Chart

Chart Component

Um Daten für den Verbrauch verschiedener Lebensmittel, Güter oder Tätigkeiten darzustellen, können Balkendiagramme in den Kapiteln der Story verwendet werden. Die Chart-Component stellt die Informationen über mehrere Balkendiagramme dar, welche über ein Auswahl-Element zu einem bestimmten Thema gewechselt werden können.

Verwendung

Um die Chart an einer bestimmten Stelle im Kapitel anzuzeigen, kann das HTML-Tag der Chart an entsprechender Stelle eingebettet werden:

<app-chart [charts]="charts"></app-chart>

Das Attribut [charts] muss dabei mit einem Array von Chart Objekten initialisiert werden, um entsprechende Informationen dynamisch anzuzeigen. Eine Chart besteht aus einem oder mehreren Consumption Objekten, welche Informationen zu dem Verbrauch eines Gegenstands beinhalten. Um eine Consumption für die Chart zu erzeugen werden folgende Informationen benötigt:

• Titel/Bezeichnung des Gegenstands (z.B. '1 Kg Rindfleich', '1 Stunde Auto fahren', usw.)
• Menge des Verbrauchs (z.B. 120, 38.5, 1000 usw.)
• Einheit des Verbrauchs (z.B. 'Kg', 'Liter', usw.)
• Pfad zum Hintergrund Bild des Diagrammbalkens (z.B. '/assets/image.png', usw.)

Mit diesen Informationen können dann über die addConsumption(topic, amount, unit, imagePath) Methode der Klasse Chart, die Informationen für die einzelnen Balken des Diagramms hinzugefügt werden.

Beispiel

Der Aufbau von zwei Verschiedenen Charts mit jeweils drei Balken zum Thema CO2-Ausstoß und Wasserverbrauch von Lebensmitteln(Fleisch, Eier, Soja) kann wie folgt in der Komponente erfolgen, welche die Chart verwendet:

export class ParentComponent implements OnInit{
  charts: Chart[] = [];

  ngOnInit(): void {
    let co2ConsumptionChart = Chart.createWith('Kg CO2 verursacht...');
    co2ConsumptionChart.addConsumption('1 Kg Fleisch', 120, 'Kg', '../../assets/chart/kapitel1_stats_rindfleisch.png');
    co2ConsumptionChart.addConsumption('1 Kg Eier', 60, 'Kg', '../../assets/chart/kapitel1_stats_eier.png');
    co2ConsumptionChart.addConsumption('1 Kg Soja', 30, 'Kg', '../../assets/chart/kapitel1_stats_vegan.png');

    let waterConsumptionChart = Chart.createWith('l Wasser verbraucht...');
    waterConsumptionChart.addConsumption('1 Kg Fleisch', 100, 'l', '../../assets/chart/kapitel1_stats_rindfleisch.png');
    waterConsumptionChart.addConsumption('1 Kg Eier', 70, 'l', '../../assets/chart/kapitel1_stats_eier.png');
    waterConsumptionChart.addConsumption('1 Kg Soja', 35, 'l', '../../assets/chart/kapitel1_stats_vegan.png');

    this.charts.push(co2ConsumptionChart, waterConsumptionChart);
  }
}

Das charts Objekt wird dann dem HTML-Tag der Chart Komponente übergeben. Somit wird in der ParentComponent das Balkendiagramm angezeigt, welches über das Auswahl-Element geändert werden kann.

Hinweise

• Da über das Auswahlelement zwischen Diagrammen gewechselt werden kann, wird Standartmäßig das Chart Objekt welches sich an erster Stelle im Array befindet angezeigt.
• Die Breite der Balken passt sich den Werten aus amount an.
• Die Balken stehen immer im Verhältnis zu der Breite des ersten Balkens. Deshalb muss darauf geachtet werden, das bei dem ersten Aufruf der addConsumption() Methode eines Chart Objekts, immer die Consumption mit dem größten Verbrauch hinzugefügt wird.