@oneuptime/common 11.5.1 → 11.5.2

package/UI/Components/Charts/ChartLibrary/LineChart/LineChart.tsx

@@ -27,9 +27,11 @@ import { AxisDomain } from "recharts/types/util/types";
 import { useOnWindowResize } from "../Utils/UseWindowOnResize";
 import {
   AvailableChartColors,
-  AvailableChartColorsKeys,
+  ChartColorValue,
   constructCategoryColors,
   getColorClassName,
+  getColorHex,
+  isHexColorValue,
 } from "../Utils/ChartColors";
 import { cx } from "../Utils/Cx";
 import { getYAxisDomain } from "../Utils/GetYAxisDomain";
@@ -40,8 +42,8 @@ import ChartCurve from "../../Types/ChartCurve";
 
 interface LegendItemProps {
   name: string;
-  color: AvailableChartColorsKeys;
-  onClick?: (name: string, color: AvailableChartColorsKeys) => void;
+  color: ChartColorValue;
+  onClick?: (name: string, color: ChartColorValue) => void;
   activeLegend?: string;
 }
 
@@ -77,6 +79,11 @@ const LegendItem: ({
           getColorClassName(color, "bg"),
           activeLegend && activeLegend !== name ? "opacity-40" : "opacity-100",
         )}
+        style={
+          isHexColorValue(color)
+            ? { backgroundColor: getColorHex(color) }
+            : undefined
+        }
         aria-hidden={true}
       />
       <p
@@ -166,7 +173,7 @@ const ScrollButton: ({
 
 interface LegendProps extends React.OlHTMLAttributes<HTMLOListElement> {
   categories: string[];
-  colors?: AvailableChartColorsKeys[];
+  colors?: ChartColorValue[];
   onClickLegendItem?: (category: string, color: string) => void;
   activeLegend?: string;
   enableLegendSlider?: boolean;
@@ -310,7 +317,7 @@ const Legend: React.ForwardRefExoticComponent<
               <LegendItem
                 key={`item-${index}`}
                 name={category}
-                color={colors[index] as AvailableChartColorsKeys}
+                color={colors[index] as ChartColorValue}
                 onClick={onClickLegendItem as any}
                 activeLegend={activeLegend!}
               />
@@ -356,7 +363,7 @@ Legend.displayName = "Legend";
 
 const ChartLegend: (
   { payload }: any,
-  categoryColors: Map<string, AvailableChartColorsKeys>,
+  categoryColors: Map<string, ChartColorValue>,
   setLegendHeight: React.Dispatch<React.SetStateAction<number>>,
   activeLegend: string | undefined,
   onClick?: (category: string, color: string) => void,
@@ -365,7 +372,7 @@ const ChartLegend: (
   yAxisWidth?: number,
 ) => React.JSX.Element = (
   { payload }: any,
-  categoryColors: Map<string, AvailableChartColorsKeys>,
+  categoryColors: Map<string, ChartColorValue>,
   setLegendHeight: React.Dispatch<React.SetStateAction<number>>,
   activeLegend: string | undefined,
   onClick?: (category: string, color: string) => void,
@@ -432,7 +439,7 @@ export type PayloadItem = {
   // eslint-disable-next-line react/no-unused-prop-types
   index: string;
   // eslint-disable-next-line react/no-unused-prop-types
-  color: AvailableChartColorsKeys;
+  color: ChartColorValue;
   // eslint-disable-next-line react/no-unused-prop-types
   type?: string;
   // eslint-disable-next-line react/no-unused-prop-types
@@ -499,6 +506,11 @@ const ChartTooltip: ({
                         "h-[3px] w-3.5 shrink-0 rounded-full",
                         getColorClassName(color, "bg"),
                       )}
+                      style={
+                        isHexColorValue(color)
+                          ? { backgroundColor: getColorHex(color) }
+                          : undefined
+                      }
                     />
                     <p
                       className={cx(
@@ -551,7 +563,7 @@ interface LineChartProps extends React.HTMLAttributes<HTMLDivElement> {
   data: Record<string, any>[];
   index: string;
   categories: string[];
-  colors?: AvailableChartColorsKeys[];
+  colors?: ChartColorValue[];
   valueFormatter?: (value: number) => string;
   startEndOnly?: boolean;
   showXAxis?: boolean;
@@ -628,7 +640,7 @@ const LineChart: React.ForwardRefExoticComponent<
     const [activeLegend, setActiveLegend] = React.useState<string | undefined>(
       undefined,
     );
-    const categoryColors: Map<string, string | number> =
+    const categoryColors: Map<string, ChartColorValue> =
       constructCategoryColors(categories, colors);
 
     const yAxisDomain: (number | "auto")[] = getYAxisDomain(
@@ -828,7 +840,7 @@ const LineChart: React.ForwardRefExoticComponent<
                         index: item.payload[index],
                         color: categoryColors.get(
                           item.dataKey,
-                        ) as AvailableChartColorsKeys,
+                        ) as ChartColorValue,
                         type: item.type,
                         payload: item.payload,
                       };
@@ -887,14 +899,14 @@ const LineChart: React.ForwardRefExoticComponent<
               />
             ) : null}
             {categories.map((category: string) => {
+              const lineColor: ChartColorValue = categoryColors.get(
+                category,
+              ) as ChartColorValue;
+              const isCustomColor: boolean = isHexColorValue(lineColor);
+              const lineHex: string = getColorHex(lineColor);
               return (
                 <Line
-                  className={cx(
-                    getColorClassName(
-                      categoryColors.get(category) as AvailableChartColorsKeys,
-                      "stroke",
-                    ),
-                  )}
+                  className={cx(getColorClassName(lineColor, "stroke"))}
                   strokeOpacity={
                     activeDot || (activeLegend && activeLegend !== category)
                       ? 0.3
@@ -908,24 +920,18 @@ const LineChart: React.ForwardRefExoticComponent<
                       strokeLinecap,
                       strokeLinejoin,
                       strokeWidth,
-                      dataKey,
                     } = props;
                     return (
                       <Dot
                         className={cx(
                           "stroke-white",
                           onValueChange ? "cursor-pointer" : "",
-                          getColorClassName(
-                            categoryColors.get(
-                              dataKey,
-                            ) as AvailableChartColorsKeys,
-                            "fill",
-                          ),
+                          getColorClassName(lineColor, "fill"),
                         )}
                         cx={cxCoord}
                         cy={cyCoord}
                         r={5}
-                        fill=""
+                        fill={isCustomColor ? lineHex : ""}
                         stroke={stroke}
                         strokeLinecap={strokeLinecap}
                         strokeLinejoin={strokeLinejoin}
@@ -944,7 +950,6 @@ const LineChart: React.ForwardRefExoticComponent<
                       strokeWidth,
                       cx: cxCoord,
                       cy: cyCoord,
-                      dataKey,
                       index,
                     } = props;
 
@@ -964,19 +969,14 @@ const LineChart: React.ForwardRefExoticComponent<
                           cy={cyCoord}
                           r={5}
                           stroke={stroke}
-                          fill=""
+                          fill={isCustomColor ? lineHex : ""}
                           strokeLinecap={strokeLinecap}
                           strokeLinejoin={strokeLinejoin}
                           strokeWidth={strokeWidth}
                           className={cx(
                             "stroke-white",
                             onValueChange ? "cursor-pointer" : "",
-                            getColorClassName(
-                              categoryColors.get(
-                                dataKey,
-                              ) as AvailableChartColorsKeys,
-                              "fill",
-                            ),
+                            getColorClassName(lineColor, "fill"),
                           )}
                         />
                       );
@@ -987,7 +987,11 @@ const LineChart: React.ForwardRefExoticComponent<
                   name={category}
                   type={props.curve || ChartCurve.LINEAR}
                   dataKey={category}
-                  stroke=""
+                  /*
+                   * Custom hex → set the stroke inline; named palette → keep ""
+                   * so the `stroke-*` Tailwind class on the Line applies.
+                   */
+                  stroke={isCustomColor ? lineHex : ""}
                   strokeWidth={2}
                   strokeLinejoin="round"
                   strokeLinecap="round"

package/UI/Components/Charts/ChartLibrary/SparkChart/SparkChart.tsx

@@ -21,6 +21,7 @@ import type { AxisDomain } from "recharts/types/util/types";
 import {
   AvailableChartColors,
   type AvailableChartColorsKeys,
+  type ChartColorValue,
   constructCategoryColors,
   getColorClassName,
 } from "../Utils/ChartColors";
@@ -64,7 +65,7 @@ const SparkAreaChart: React.ForwardRefExoticComponent<
       ...other
     } = props;
 
-    const categoryColors: Map<string, AvailableChartColorsKeys> =
+    const categoryColors: Map<string, ChartColorValue> =
       constructCategoryColors(categories, colors);
     const yAxisDomain: AxisDomain = getYAxisDomain(
       autoMinValue,
@@ -209,7 +210,7 @@ const SparkLineChart: React.ForwardRefExoticComponent<
       ...other
     } = props;
 
-    const categoryColors: Map<string, AvailableChartColorsKeys> =
+    const categoryColors: Map<string, ChartColorValue> =
       constructCategoryColors(categories, colors);
     const yAxisDomain: AxisDomain = getYAxisDomain(
       autoMinValue,
@@ -304,7 +305,7 @@ const SparkBarChart: React.ForwardRefExoticComponent<
       ...other
     } = props;
 
-    const categoryColors: Map<string, AvailableChartColorsKeys> =
+    const categoryColors: Map<string, ChartColorValue> =
       constructCategoryColors(categories, colors);
 
     const yAxisDomain: AxisDomain = getYAxisDomain(

package/UI/Components/Charts/ChartLibrary/Utils/ChartColors.ts

@@ -92,16 +92,38 @@ export const AvailableChartColors: AvailableChartColorsKeys[] = Object.keys(
   chartColors,
 ) as Array<AvailableChartColorsKeys>;
 
+/*
+ * A chart color value can be either a named palette key (e.g. "indigo") or
+ * a raw hex string (e.g. "#6366f1"). Named keys resolve to Tailwind classes;
+ * hex values are applied via inline styles by the chart renderers. This lets
+ * users pick arbitrary custom/brand colors per series while the default
+ * palette continues to use theme-safe named colors.
+ */
+export type ChartColorValue = AvailableChartColorsKeys | string;
+
+/*
+ * True when the value is a raw hex color rather than a named palette key.
+ * The chart renderers use this to decide between an inline style (hex) and
+ * a Tailwind color class (named key). Accepts ChartColorValue (which widens
+ * to `string | number` because `chartColors` has a string index signature) —
+ * only actual `#…` strings return true.
+ */
+export const isHexColorValue: (
+  color: ChartColorValue | undefined | null,
+) => boolean = (color: ChartColorValue | undefined | null): boolean => {
+  return typeof color === "string" && color.trim().startsWith("#");
+};
+
 export const constructCategoryColors: (
   categories: string[],
-  colors: AvailableChartColorsKeys[],
-) => Map<string, AvailableChartColorsKeys> = (
+  colors: Array<ChartColorValue>,
+) => Map<string, ChartColorValue> = (
   categories: string[],
-  colors: AvailableChartColorsKeys[],
-): Map<string, AvailableChartColorsKeys> => {
-  const categoryColors: Map<string, AvailableChartColorsKeys> = new Map<
+  colors: Array<ChartColorValue>,
+): Map<string, ChartColorValue> => {
+  const categoryColors: Map<string, ChartColorValue> = new Map<
     string,
-    AvailableChartColorsKeys
+    ChartColorValue
   >();
   categories.forEach((category: string, index: number) => {
     categoryColors.set(category, colors[index % colors.length]!);
@@ -110,9 +132,9 @@ export const constructCategoryColors: (
 };
 
 export const getColorClassName: (
-  color: AvailableChartColorsKeys,
+  color: ChartColorValue,
   type: ColorUtility,
-) => string = (color: AvailableChartColorsKeys, type: ColorUtility): string => {
+) => string = (color: ChartColorValue, type: ColorUtility): string => {
   const fallbackColor: {
     bg: string;
     stroke: string;
@@ -124,11 +146,27 @@ export const getColorClassName: (
     fill: "fill-gray-500",
     text: "text-gray-500",
   };
+  /*
+   * Hex values have no Tailwind class — callers apply them via inline style,
+   * so return an empty string here rather than the gray fallback (which would
+   * otherwise paint a custom-colored series gray).
+   */
+  if (isHexColorValue(color)) {
+    return "";
+  }
   return chartColors[color]?.[type] ?? fallbackColor[type];
 };
 
-export const getColorHex: (color: AvailableChartColorsKeys) => string = (
-  color: AvailableChartColorsKeys,
+/*
+ * Resolve any chart color value to a concrete hex string. Named palette keys
+ * map to their `chartColors` hex; raw hex values pass through unchanged. Used
+ * for SVG fill/stroke and inline style props where a class name won't work.
+ */
+export const getColorHex: (color: ChartColorValue) => string = (
+  color: ChartColorValue,
 ): string => {
+  if (isHexColorValue(color)) {
+    return color as string;
+  }
   return chartColors[color]?.hex ?? "#6b7280";
 };

package/UI/Components/Charts/Line/LineChart.tsx

@@ -1,5 +1,8 @@
 import { LineChart } from "../ChartLibrary/LineChart/LineChart";
-import { AvailableChartColorsKeys } from "../ChartLibrary/Utils/ChartColors";
+import {
+  AvailableChartColorsKeys,
+  ChartColorValue,
+} from "../ChartLibrary/Utils/ChartColors";
 import React, {
   FunctionComponent,
   ReactElement,
@@ -41,6 +44,12 @@ export interface ComponentProps {
   exemplarPoints?: Array<ExemplarPoint> | undefined;
   onExemplarClick?: ((exemplar: ExemplarPoint) => void) | undefined;
   showLegend?: boolean | undefined;
+  /*
+   * Optional per-series color override (named palette keys or hex strings).
+   * When provided, replaces the default LineChartPalette. Indexed by series
+   * position (index % length).
+   */
+  colors?: Array<ChartColorValue> | undefined;
 }
 
 export interface LineInternalProps extends ComponentProps {
@@ -118,7 +127,11 @@ const LineChartElement: FunctionComponent<LineInternalProps> = (
         tickGap={30}
         index={"Time"}
         categories={categories}
-        colors={LineChartPalette}
+        colors={
+          props.colors && props.colors.length > 0
+            ? props.colors
+            : LineChartPalette
+        }
         valueFormatter={props.yAxis.options.formatter || undefined}
         showTooltip={true}
         showLegend={props.showLegend !== false}