I have an array of objects, reviews
which I get from an API endpoint. This object looks like this:
[
{ name: "Facebook", count: 50 },
{ name: "Google", count: 43 },
{ name: "TripAdvisor", count: 67 },
{ name: "Other", count: 130 }
]
I have a chart.js Pie chart that I'm feeding this data to. I'm using the name
for the labels
and the count
for the size of each slice of the pie chart. Now, due to how chart.js works, I have to supply some hexadecimal colors to use as background colors, and the order in which the background color is being defined matters if I want the labels to match the colors properly. For example, if the order of the labels is [A, B, C]
, an array of colors like [red, green, blue]
means that A = red, B = green and C = blue. The problem is that the reviews
array comes in a random order every single time from the API (I don't have control over the API and the data it gives me), so I can't just have a simple, predetermined array.
As far as I see, I have two options, I either sort the reviews
array in some way, or I iterate over the data I get from the API and return an array based on some simple switch statements. I opted for the 2nd option, as it seems simpler for my usecase.
My current solution looks like this
const chartBackgroundColor = collection => {
let colorArray = [];
const itemArray = collection.map(data => data.name);
itemArray.forEach(item => {
switch (item) {
case "TripAdvisor":
colorArray.push("#00B98B");
break;
case "Google":
colorArray.push("#FFBD00");
break;
case "Facebook":
colorArray.push("#4B6DAA");
break;
default:
colorArray.push("#D9D9D9");
break;
}
}
)
return colorArray;
}
The method works fine, but I was just curious whether there was some more elegant way of handling this issue, and whether a switch case is appropriate in this situation rather than a if/ifel/else tree.