I have this where car is 2 and total is 12. So I wanted to get the percentage of this but this is in an Object.values(res)

I wanted the dataset in the graph to be in a percentage value. Let's say car is 2 and the total is 12. So it should be 16.66%. However, in my dataset right now, it's only showing 2.

This is the codesandbox link : https://codesandbox.io/s/bar-graph-9nr8u?file=/src/App.js:0-3062

export default function App() {
  const data = [
    {
      birthdate: "Thu Aug 31 2000",
      createdDate: { seconds: 1630377545, nanoseconds: 313000000 },
      items: {
        type2: false,
        type1: true,
        selectedItem: "car"
      },
      displayName: "Person1"
    },
    {
      birthdate: "Thu Aug 31 2000",
      createdDate: { seconds: 1630377545, nanoseconds: 313000000 },
      items: {
        type2: true,
        type1: true,
        selectedItem: "bikes"
      },
      displayName: "Person2"
    },
    {
      birthdate: "Thu Aug 31 2000",
      createdDate: { seconds: 1630377545, nanoseconds: 313000000 },
      items: {
        type2: true,
        type1: true,
        selectedItem: "car"
      },
      displayName: "Person3"
    },
    {
      birthdate: "Thu Aug 31 2000",
      createdDate: { seconds: 1630377545, nanoseconds: 313000000 },
      items: {
        type2: true,
        type1: true,
        selectedItem: "motor"
      },
      displayName: "Person4"
    },
    {
      birthdate: "Thu Aug 31 2000",
      createdDate: { seconds: 1630377545, nanoseconds: 313000000 },
      items: {
        type2: true,
        type1: true,
        selectedItem: "motor"
      },
      displayName: "Person5"
    },
    {
      birthdate: "Thu Aug 31 2000",
      createdDate: { seconds: 1630377545, nanoseconds: 313000000 },
      items: {
        type2: true,
        type1: true,
        selectedItem: "truck"
      },
      displayName: "Person6"
    },
    {
      birthdate: "Thu Aug 31 2000",
      createdDate: { seconds: 1630377545, nanoseconds: 313000000 },
      items: {
        type2: true,
        type1: true,
        selectedItem: "bikes"
      },
      displayName: "Person7"
    },
    {
      birthdate: "Thu Aug 31 2000",
      createdDate: { seconds: 1630377545, nanoseconds: 313000000 },
      items: {
        type2: true,
        type1: true,
        selectedItem: "truck"
      },
      displayName: "Person8"
    }
  ];

  const total = 12;

  let res = [...data].reduce(
    (a, c) => (
      (a[c.items.selectedItem] = (a[c.items.selectedItem] || 0)   1), a
    ),
    {}
  );

  const rounded = Object.entries(res).reduce((acc, [key, value]) => {
    return { ...acc, [key]: value.toFixed(2) };
  }, {});

  return (
    <div className="App">
      <Pie
        data={{
          labels: Object.keys(rounded),
          datasets: [
            {
              data: Object.values(rounded),
              backgroundColor: ["red", "yellow", "green", "blue", "pink"],
              borderColor: ["rgba(255, 99, 132, 1)"],
              borderWidth: 1
            }
          ]
        }}
        height={400}
        width={600}
        options={{
          maintainAspectRatio: false,
          title: {
            display: true,
            text: "Selected",
            fontSize: 20
          },
          legend: {
            labels: {
              fontSize: 25
            }
          }
        }}
      />
    </div>
  );
}

CodePudding user response：

You mean

[key]: ((value/total)*100).toFixed(2)

const data = [{
    birthdate: "Thu Aug 31 2000",
    createdDate: {
      seconds: 1630377545,
      nanoseconds: 313000000
    },
    items: {
      type2: false,
      type1: true,
      selectedItem: "car"
    },
    displayName: "Person1"
  },
  {
    birthdate: "Thu Aug 31 2000",
    createdDate: {
      seconds: 1630377545,
      nanoseconds: 313000000
    },
    items: {
      type2: true,
      type1: true,
      selectedItem: "bikes"
    },
    displayName: "Person2"
  },
  {
    birthdate: "Thu Aug 31 2000",
    createdDate: {
      seconds: 1630377545,
      nanoseconds: 313000000
    },
    items: {
      type2: true,
      type1: true,
      selectedItem: "car"
    },
    displayName: "Person3"
  },
  {
    birthdate: "Thu Aug 31 2000",
    createdDate: {
      seconds: 1630377545,
      nanoseconds: 313000000
    },
    items: {
      type2: true,
      type1: true,
      selectedItem: "motor"
    },
    displayName: "Person4"
  },
  {
    birthdate: "Thu Aug 31 2000",
    createdDate: {
      seconds: 1630377545,
      nanoseconds: 313000000
    },
    items: {
      type2: true,
      type1: true,
      selectedItem: "motor"
    },
    displayName: "Person5"
  },
  {
    birthdate: "Thu Aug 31 2000",
    createdDate: {
      seconds: 1630377545,
      nanoseconds: 313000000
    },
    items: {
      type2: true,
      type1: true,
      selectedItem: "truck"
    },
    displayName: "Person6"
  },
  {
    birthdate: "Thu Aug 31 2000",
    createdDate: {
      seconds: 1630377545,
      nanoseconds: 313000000
    },
    items: {
      type2: true,
      type1: true,
      selectedItem: "bikes"
    },
    displayName: "Person7"
  },
  {
    birthdate: "Thu Aug 31 2000",
    createdDate: {
      seconds: 1630377545,
      nanoseconds: 313000000
    },
    items: {
      type2: true,
      type1: true,
      selectedItem: "truck"
    },
    displayName: "Person8"
  }
];

const total = 12;

let res = [...data].reduce(
  (a, c) => (
    (a[c.items.selectedItem] = (a[c.items.selectedItem] || 0)   1), a
  ), {}
);

const rounded = Object.entries(res).reduce((acc, [key, value]) => {
  return { ...acc,
    [key]: ((value/total)*100).toFixed(2)
  };
}, {});

console.log(rounded)
console.log(res)

CodePudding user response：

You can see your modified codesandbox here: https://codesandbox.io/s/bar-graph-forked-vp4uk In that case, you have to use the percentage instead of the value.

So, you have to change:

  const rounded = Object.entries(res).reduce((acc, [key, value]) => {
    return { ...acc, [key]: value.toFixed(2) };
  }, {});

to this:

  const rounded = Object.entries(res).reduce((acc, [key, value]) => {
    return { ...acc, [key]: ((value / total) * 100).toFixed(2) };
  }, {});