Monthly CO2 emissions per transport are not displayed in my bar chart

[donacrisante]

Hello everyone,
I have implemented a stacked bar chart from chartjs.org for my overview page and would like the chart to show the total CO2 emissions per means of transport and per month. I managed to show the emissions per means of transport, but I can't manage to show them per month. I have tried several methods, but none of them work. I have left the last method in my code and commented it out so you can see what I tried last. When I try this last method, I get nothing displayed..
Can anyone give me a quick hand please?

Many thanks in advance!

PS: The three buttons do nothing yet. This is normal.

Here my PR:

donacrisante/Capstone-project#13

[Kheirah]

The method getMonth does not give you a string but a number.
January is encoded as a zero. Your code will have to say something like this:

  const totalEmissionsPerTransport = (transport, fuel, month) =>
    Math.floor(
      entries
        .filter(
          (entry) =>
            entry.transport === transport &&
            entry.fuel === fuel  &&
            new Date(entry.date).getMonth() === month
        )
        .reduce((acc, curr) => acc + curr.result, 0)
    );

  const months = [
    0,
    1,
    2,
    3,
    4,
    5,
    6,
    7,
    8,
    9,
    10,
    11,
  ];

[donacrisante]

Thank you, Ernst, for your answer, but if I do this, I don't get any bar displayed and I get numbers instead of months in my axis.

[Kheirah]

Okay, I see. Forget about my first answer, we'll keep the month array as is.

In total, you'll need to change several other things. First, adjust the function totalEmissionsPerTransport to consider that the fuel might be missing as is the case for transports like the plane.

const totalEmissionsPerTransport = (transport, fuel, month) =>
    Math.floor(
      entries
        .filter(
          (entry) => {
            const hasFuel = fuel ? true : false;
            const givenTransport = entry.transport === transport;
            const givenFuel = entry.fuel === fuel;
            const givenMonth = new Date(entry.date).getMonth() === month;
            return hasFuel ? (givenFuel && givenTransport && givenMonth) : givenTransport && givenMonth;
          }
        )
        .reduce((acc, curr) => acc + curr.result, 0)
    );

Then, you will need to map over the months array and using the index for any given month, you pass all necessary arguments to the aforementioned function.

const carPetrol = months.map((_, monthIndex) => totalEmissionsPerTransport("car", "petrol", monthIndex));
  const carDiesel = months.map((_, monthIndex) => totalEmissionsPerTransport("car", "diesel", monthIndex));
  const carHybrid = months.map((_, monthIndex) => totalEmissionsPerTransport("car", "hybrid", monthIndex));
  const carElectricStrommix = months.map((_, monthIndex) => totalEmissionsPerTransport("car", "electric-strommix", monthIndex));
  const carElectricRenewable = months.map((_, monthIndex) => totalEmissionsPerTransport("car", "electric-renewable", monthIndex));
  const train = months.map((_, monthIndex) => totalEmissionsPerTransport("train", null, monthIndex));
  const plane = months.map((_, monthIndex) => totalEmissionsPerTransport("plane", null, monthIndex));
  const bicycle = months.map((_, monthIndex) => totalEmissionsPerTransport("bycicle", null, monthIndex));

The data expects arrays, but since we're mapping we already have an array. Remove the arrays from the data attribue:

const data = {
    labels: months,
    datasets: [
      {
        label: "Car petrol",
        data: carPetrol,
        backgroundColor: "violet",
      },
      {
        label: "Car diesel",
        data: carDiesel,
        backgroundColor: "orange",
      },
      {
        label: "Car hybrid",
        data: carHybrid,
        backgroundColor: "yellow",
      },
      {
        label: "Car Electric-Strommix",
        data: carElectricStrommix,
        backgroundColor: "pink",
      },
      {
        label: "Car Electric-Renewable",
        data: carElectricRenewable,
        backgroundColor: "turquoise",
      },
      {
        label: "Train",
        data: train,
        backgroundColor: "lightgreen",
      },
      {
        label: "Plane",
        data: plane,
        backgroundColor: "coral",
      },
      {
        label: "Bicycle",
        data: bicycle,
        backgroundColor: "lightblue",
      },
    ],
  };

Finally, your Bar component only needs to know the options because the Bar components already knows that it's a Bar component.

<Bar data={data} options={config.options} />

[donacrisante]

Hi Ernst, thanks a lot for your help! I have implemented your corrections and it works!