:feat: enable customized colors

components/LineGraph.tsx

@@ -60,6 +60,7 @@ interface LineGraphProps {
     left: number;
     right: number;
   };
+  colorRange: string[];
   className?: string;
   /** Font size of the category tick labels, in pixels. Default is 16px. */
   xTickLabelSize?: number;
@@ -96,6 +97,7 @@ export const LineGraph = withTooltip<LineGraphProps, TooltipData>(
     height,
     margin,
     data,
+    colorRange, 
     className,
     xTickLabelSize = DEFAULT_LABEL_SIZE,
     yTickLabelSize = DEFAULT_LABEL_SIZE,
@@ -123,6 +125,10 @@ export const LineGraph = withTooltip<LineGraphProps, TooltipData>(
 
     const xLength = data.xValues.length;
 
+    if (data.lines.length != colorRange.length) {
+      throw new Error("Invalid data with wrong length.");
+    }
+
     data.lines.forEach((line) => {
       if (line.yValues.length != xLength) {
         throw new Error("Invalid data with wrong length.");
@@ -164,7 +170,7 @@ export const LineGraph = withTooltip<LineGraphProps, TooltipData>(
 
     const legendScale = scaleOrdinal<string, string>({
       domain: keys,
-      range: [Color.primaryAccent, Color.secondaryAccent],
+      range: colorRange,
     });
 
     return (
@@ -257,9 +263,7 @@ export const LineGraph = withTooltip<LineGraphProps, TooltipData>(
                       x={(d) => xScale(getX(d))!}
                       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                       y={(d) => yScale(getY(d))!}
-                      stroke={
-                        isEven ? Color.primaryAccent : Color.secondaryAccent
-                      }
+                      stroke={colorRange[i]}
                       strokeWidth={4}
                       strokeOpacity={2}
                     />

pages/playground.tsx

@@ -203,6 +203,10 @@ export default function Home() {
           left: 30,
           right: 20,
         }}
+        colorRange={[
+          Color.primaryAccent,
+          Color.secondaryAccentLight
+        ]}
       />
 
       <h2>