Skip to content

Commit

Permalink
Merge pull request #48 from evmiguel/random-color
Browse files Browse the repository at this point in the history
Random color generator for chart
  • Loading branch information
evmiguel committed Apr 9, 2024
2 parents 2f79308 + e7bbb6e commit 0847187
Showing 1 changed file with 15 additions and 18 deletions.
33 changes: 15 additions & 18 deletions components/Analysis/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,21 +29,6 @@ type DataItem = {
value: number;
};

type DonutChartProps = {
width: number;
height: number;
data: DataItem[];
};

const colors = [
"#e0ac2b",
"#e85252",
"#6689c6",
"#9a6fb0",
"#a53253",
"#69b3a2",
];

const MARGIN_X = 150;
const MARGIN_Y = 50;
const INFLEXION_PADDING = 20; // space between donut and label inflexion point
Expand All @@ -58,6 +43,11 @@ const sumByKey = (arr: Array<any>, key: string, value: string) => {
return res;
}

const generateColor = () => {
const hex = Math.floor(Math.random()*16777215).toString(16);
return `#${hex}`
}

export default function Analysis({ purchases }: AnalysisProps) {
const context = useContext(FilterContext);

Expand All @@ -70,15 +60,22 @@ export default function Analysis({ purchases }: AnalysisProps) {
}), 'name', 'value');


const categoriesChartDataWithColor = categoriesChartData.map(category => {
return {
...category,
color: generateColor()
}
})

const width = 500;
const height = 500;
const radius = Math.min(width - 2 * MARGIN_X, height - 2 * MARGIN_Y) / 2;
const innerRadius = radius / 2;

const pie = useMemo(() => {
const pieGenerator = d3.pie<any, any>().value((d) => d.value);
return pieGenerator(categoriesChartData);
}, [categoriesChartData]);
return pieGenerator(categoriesChartDataWithColor);
}, [categoriesChartDataWithColor]);

const arcGenerator = d3.arc();

Expand Down Expand Up @@ -109,7 +106,7 @@ export default function Analysis({ purchases }: AnalysisProps) {

return (
<g key={i}>
<path d={slicePath as string} fill={colors[i]} />
<path d={slicePath as string} fill={grp.data.color} />
<circle cx={centroid[0]} cy={centroid[1]} r={2} />
<line
x1={centroid[0]}
Expand Down

0 comments on commit 0847187

Please sign in to comment.