fix: fixed color palette usecase

Author: noahonyejese

Diff for: src/components/charts-generic/histogram/histogram-state.tsx

@@ -25,6 +25,7 @@ import {
   useFormatCurrency,
 } from "src/domain/helpers";
 import { estimateTextWidth } from "src/lib/estimate-text-width";
+import { chartPalette } from "src/themes/palette";
 
 const useHistogramState = ({
   data,
@@ -72,7 +73,7 @@ const useHistogramState = ({
 
   const colors = scaleLinear<string>()
     .domain(colorDomain)
-    .range(palette.diverging)
+    .range(chartPalette.diverging.GO)
     .interpolate(interpolateHsl);
   // y
   const bins = bin<GenericObservation, number>()

Diff for: src/components/charts-generic/rangeplot/rangeplot-state.tsx

@@ -34,6 +34,7 @@ import {
 } from "src/domain/helpers";
 import { minMaxBy } from "src/lib/array";
 import { estimateTextWidth } from "src/lib/estimate-text-width";
+import { chartPalette } from "src/themes/palette";
 
 export const DOT_RADIUS = 8;
 const OUTER_PADDING = 0.2;
@@ -98,7 +99,7 @@ const useRangePlotState = ({
 
   const colors = scaleLinear<string, string>()
     .domain(colorDomain)
-    .range(palette.diverging)
+    .range(chartPalette.diverging.GO)
     .interpolate(interpolateLab);
   const left = estimateTextWidth(
     yScale.domain().length > 1

Diff for: src/components/price-color-legend.tsx

@@ -7,6 +7,7 @@ import { InfoDialogButton } from "src/components/info-dialog";
 import { useFormatCurrency } from "src/domain/helpers";
 import { IconClear } from "src/icons/ic-clear";
 import { IconInfo } from "src/icons/ic-info";
+import { chartPalette } from "src/themes/palette";
 
 const LEGEND_WIDTH = 215;
 const TOP_LABEL_HEIGHT = 14;
@@ -223,7 +224,9 @@ const ColorsLine = () => {
           height: 0,
           borderTop: `${COLOR_HEIGHT / 2}px solid transparent`,
           borderBottom: `${COLOR_HEIGHT / 2}px solid transparent`,
-          borderRight: `${COLOR_HEIGHT / 2}px solid  ${palette.diverging[0]}`,
+          borderRight: `${COLOR_HEIGHT / 2}px solid  ${
+            chartPalette.diverging.GO[0]
+          }`,
         }}
       />
       <Box
@@ -235,7 +238,7 @@ const ColorsLine = () => {
           width: "100%",
         }}
       >
-        {palette.diverging.map((bg, i) => (
+        {chartPalette.diverging.GO.map((bg, i) => (
           <Box
             key={bg}
             sx={{
@@ -276,7 +279,7 @@ const ColorsLine = () => {
           borderTop: `${COLOR_HEIGHT / 2}px solid transparent`,
           borderBottom: `${COLOR_HEIGHT / 2}px solid transparent`,
           borderLeft: `${COLOR_HEIGHT / 2}px solid ${
-            palette.diverging[palette.diverging.length - 1]
+            chartPalette.diverging.GO[chartPalette.diverging.GO.length - 1]
           }`,
         }}
       />

Diff for: src/domain/data.ts

@@ -1,9 +1,9 @@
-import { useTheme } from "@mui/material";
 import { range, scaleThreshold } from "d3";
 import { useMemo } from "react";
 
 import buildEnv from "src/env/build";
 import { Observation as QueryObservation } from "src/graphql/queries";
+import { chartPalette } from "src/themes/palette";
 
 export type ObservationValue = string | number | boolean | Date;
 export type GenericObservation = Record<string, ObservationValue>;
@@ -52,17 +52,15 @@ export const useColorScale = ({
   medianValue: number | undefined;
   accessor: (x: QueryObservation) => number;
 }) => {
-  const { palette } = useTheme();
-
   return useMemo(() => {
     const m = medianValue ?? 0;
     const domain = [m * 0.85, m * 0.95, m * 1.05, m * 1.15];
     const scale = scaleThreshold<number, string>()
       .domain(domain)
-      .range(palette.diverging);
+      .range(chartPalette.diverging.GO);
 
     return scale;
-  }, [medianValue, palette.diverging]);
+  }, [medianValue]);
 };
 
 export type Entity = "municipality" | "operator" | "canton";

Diff for: src/domain/helpers.tsx

@@ -23,6 +23,7 @@ import { GenericObservation } from "src/domain/data";
 import { estimateTextWidth } from "src/lib/estimate-text-width";
 import { useLocale } from "src/lib/use-locale";
 import { d3FormatLocales, d3TimeFormatLocales } from "src/locales/locales";
+import { chartPalette } from "src/themes/palette";
 
 export const isNumber = (x: $IntentionalAny): boolean =>
   typeof x === "number" && !isNaN(x);
@@ -159,7 +160,7 @@ export const getPalette = (
     case "set3":
       return schemeSet3;
     case "elcom":
-      return theme.palette.categorical;
+      return chartPalette.categorical;
     default:
       return schemeCategory10;
   }

Diff for: src/themes/index.d.ts

@@ -44,6 +44,14 @@ declare module "@mui/material/Typography" {
 
 declare module "@mui/material/styles" {
   interface BreakpointOverrides extends FederalBreakpointOverrides {}
+
+  interface Palette {
+    tertiary: { main: string };
+  }
+
+  interface PaletteOptions {
+    tertiary: { main: string };
+  }
 }
 
 export { theme } from "./elcom";

Diff for: src/themes/palette.ts

@@ -16,31 +16,33 @@ export const palette = {
     main: colors.cobalt[700],
     ...colors.cobalt,
   },
+  tertiary: {
+    main: colors.monochrome[800],
+  },
 } satisfies ThemeOptions["palette"];
 
-// FIXME: Bring back once we use it to prevent knip from causing issues
-// export const chartPalette = {
-//   categorical: [
-//     "#3B82F6",
-//     "#EC4899",
-//     "#10B981",
-//     "#8B5CF6",
-//     "#059669",
-//     "#6B7280",
-//     "#EA580C",
-//   ],
-//   sequential: {
-//     yellow: ["#FDE68A", "#FCD34D", "#FBBF24", "#F59E0B", "#D97706", "#B45309"],
-//     orange: ["#FED7AA", "#FDBA74", "#FB923C", "#F97316", "#EA580C", "#C2410C"],
-//     green: ["#A7F3D0", "#6EE7B7", "#34D399", "#10B981", "#059669", "#047857"],
-//     teal: ["#98F6F3", "#5DE8EA", "#2BCED4", "#14AFB8", "#0D8B96", "#0F6B75"],
-//     blue: ["#BFDBFE", "#93C5FD", "#60A5FA", "#3B82F6", "#2563EB", "#1D4ED8"],
-//     indigo: ["#E0E7FF", "#C7D2FE", "#A5B4FC", "#818CF8", "#6366F1", "#4338CA"],
-//     purple: ["#EDE9FE", "#DDD6FE", "#C4B5FD", "#A78BFA", "#8B5CF6", "#7C3AED"],
-//     pink: ["#FBCFE8", "#F9A8D4", "#F472B6", "#EC4899", "#DB2777", "#BE185D"],
-//   },
-//   diverging: {
-//     BP: ["#2563EB", "#60A5FA", "#BFDBFE", "#FBCFE8", "#DB2777"],
-//     GO: ["#059669", "#34D399", "#A7F3D0", "#E4D78C", "#EA580C"],
-//   },
-// };
+export const chartPalette = {
+  categorical: [
+    "#3B82F6",
+    "#F59E0B",
+    "#EC4899",
+    "#0D8B96",
+    "#8655F6",
+    "#059669",
+    "#EA580C",
+  ],
+  sequential: {
+    orange: ["#FED7AA", "#FDBA74", "#FB923C", "#F97316", "#EA580C", "#C2410C"],
+    yellow: ["#FDE68A", "#FCD34D", "#FBBF24", "#F59E0B", "#D97706", "#B45309"],
+    green: ["#A7F3D0", "#6EE7B7", "#34D399", "#10B981", "#059669", "#047857"],
+    teal: ["#98F6F3", "#5DE8EA", "#2BCED4", "#14AFB8", "#0D8B96", "#0F6B75"],
+    blue: ["#BFDBFE", "#93C5FD", "#60A5FA", "#3B82F6", "#2563EB", "#1D4ED8"],
+    indigo: ["#E0E7FF", "#C7D2FE", "#A5B4FC", "#818CF8", "#6366F1", "#4338CA"],
+    purple: ["#EDE9FE", "#DDD6FE", "#C4B5FD", "#A78BFA", "#8B5CF6", "#7C3AED"],
+    pink: ["#FBCFE8", "#F9A8D4", "#F472B6", "#EC4899", "#DB2777", "#BE185D"],
+  },
+  diverging: {
+    GO: ["#059669", "#34D399", "#A7F3D0", "#E4D78C", "#EA580C"],
+    BP: ["#2563EB", "#60A5FA", "#BFDBFE", "#FBCFE8", "#DB2777"],
+  },
+};