Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | import { useMemo, useRef } from "react";
export const useGapChartColors = (
_labels: string[],
colors: string[] = [],
colorsMapping?: Record<string, string>,
colorMode: "label" | "shape" = "label",
shapeColorsMapping?: {
value1?: string;
value2?: string;
gap?: string;
}
) => {
// Cache for generated colors
const colorCacheRef = useRef<Record<string, string>>({});
// Default color palette if none provided
const defaultColors = [
"#1f77b4",
"#ff7f0e",
"#2ca02c",
"#d62728",
"#9467bd",
"#8c564b",
"#e377c2",
"#7f7f7f",
"#bcbd22",
"#17becf",
];
const getColor = useMemo(() => {
return (label: string) => {
// Use provided colors or default colors
const colorPalette = colors.length > 0 ? colors : defaultColors;
// In shape mode with explicit shape colors, use the first color as default
if (colorMode === "shape" && shapeColorsMapping) {
return shapeColorsMapping.gap || colorPalette[0];
}
// First check if there's a predefined color mapping
if (colorsMapping && colorsMapping[label]) {
return colorsMapping[label];
}
// Check cache
if (colorCacheRef.current[label]) {
return colorCacheRef.current[label];
}
// Generate new color from the colors array
const colorIndex = Object.keys(colorCacheRef.current).length % colorPalette.length;
const color = colorPalette[colorIndex];
// Cache the color
colorCacheRef.current[label] = color;
return color;
};
}, [colors, colorsMapping, colorMode, shapeColorsMapping]);
const getShapeColor = useMemo(() => {
return (shapeType: "value1" | "value2" | "gap", label?: string) => {
// Use provided colors or default colors
const colorPalette = colors.length > 0 ? colors : defaultColors;
// In shape mode, use shape-specific colors
if (colorMode === "shape") {
if (shapeColorsMapping && shapeColorsMapping[shapeType]) {
return shapeColorsMapping[shapeType];
}
// Default colors for shapes if not explicitly mapped
switch (shapeType) {
case "value1":
return colorPalette[0];
case "value2":
return colorPalette[1] || colorPalette[0];
case "gap":
return colorPalette[2] || colorPalette[0];
default:
return colorPalette[0];
}
}
// In label mode, use the label's color
if (label) {
return getColor(label);
}
return colorPalette[0];
};
}, [colorMode, shapeColorsMapping, colors, getColor]);
return { getColor, getShapeColor };
};
|