feat(Charts): color system

packages/core/base.css

@@ -71,14 +71,18 @@
     --page: var(--white-100);
     --shadow: theme("colors.grey.100");
 
-    --chart-1: 181 52% 45%;
-    --chart-2: 250 80% 72%;
-    --chart-3: 340 50% 57%;
-    --chart-4: 239 63% 61%;
-    --chart-5: 324 40% 38%;
-    --chart-6: 278 47% 58%;
-    --chart-7: 191 16% 47%;
-    --chart-8: 202 61% 27%;
+    --chart-categorical-1: 184 92% 35%;
+    --chart-categorical-2: 216 90% 65%;
+    --chart-categorical-3: 84 55% 53%;
+    --chart-categorical-4: 340 49% 60%;
+    --chart-categorical-5: 24 98% 59%;
+    --chart-categorical-6: 239 91% 64%;
+    --chart-categorical-7: 162 44% 33%;
+    --chart-categorical-8: 25 46% 53%;
+
+    --chart-feedback-negative: 6 100% 65%;
+    --chart-feedback-neutral: 38 92% 54%;
+    --chart-feedback-positive: 160 85% 39%;
 
     --scrollbar-track: transparent;
     --scrollbar-thumb: rgba(0, 0, 0, 0.4);
@@ -149,15 +153,6 @@
     --page: theme("colors.white.3");
     --shadow: theme("colors.grey.100");
 
-    --chart-1: 181 52% 45%;
-    --chart-2: 250 80% 72%;
-    --chart-3: 340 50% 57%;
-    --chart-4: 239 63% 61%;
-    --chart-5: 324 40% 38%;
-    --chart-6: 278 47% 58%;
-    --chart-7: 191 16% 47%;
-    --chart-8: 202 61% 27%;
-
     --scrollbar-track: transparent;
     --scrollbar-thumb: rgba(255, 255, 255, 0.4);
     --scrollbar-thumb-hover: rgba(255, 255, 255, 0.6);

packages/react/src/components/Charts/AreaChart/index.stories.tsx

@@ -2,39 +2,10 @@ import type { Meta } from "@storybook/react-vite"
 
 import { AreaChart } from "./index"
 
-const dataConfig = {
-  desktop: {
-    label: "Desktop",
-  },
-  mobile: {
-    label: "Mobile",
-  },
-}
-
-const meta: Meta<typeof AreaChart<typeof dataConfig>> = {
+const meta: Meta = {
   title: "Charts/AreaChart",
   component: AreaChart,
   tags: ["autodocs"],
-  args: {
-    dataConfig,
-    xAxis: {
-      tickFormatter: (value: string) => value.slice(0, 3),
-    },
-    yAxis: {
-      hide: true,
-      tickFormatter: (value: string) =>
-        `${Number.isNaN(parseFloat(value)) ? value : (parseFloat(value) / 100).toFixed(2) + ",00 Euros"}`,
-    },
-    blurArea: "lr",
-    data: [
-      { label: "January", values: { mobile: 1200, desktop: 500 } },
-      { label: "February", values: { mobile: 1500, desktop: 1500 } },
-      { label: "March", values: { mobile: 1300, desktop: 3000 } },
-      { label: "April", values: { mobile: 1000, desktop: 4500 } },
-      { label: "May", values: { mobile: 800, desktop: 5000 } },
-      { label: "June", values: { mobile: 600, desktop: 4000 } },
-    ],
-  },
   argTypes: {
     blurArea: {
       control: "select",
@@ -52,18 +23,117 @@ const meta: Meta<typeof AreaChart<typeof dataConfig>> = {
 
 export default meta
 
-export const Default = {}
+const headcountDataConfig = {
+  headcount: {
+    label: "Total headcount",
+  },
+}
 
-export const Dashed = {
+export const Default: Meta<typeof AreaChart<typeof headcountDataConfig>> = {
   args: {
-    dataConfig: {
-      desktop: {
-        label: "Desktop",
-        dashed: true,
+    dataConfig: headcountDataConfig,
+    xAxis: {
+      hide: false,
+      tickFormatter: (value: string) => value.slice(0, 3),
+    },
+    yAxis: {
+      hide: false,
+      tickFormatter: (value: string) => value,
+    },
+    data: [
+      { label: "January", values: { headcount: 170 } },
+      { label: "February", values: { headcount: 200 } },
+      { label: "March", values: { headcount: 256 } },
+      { label: "April", values: { headcount: 301 } },
+      { label: "May", values: { headcount: 345 } },
+      { label: "June", values: { headcount: 308 } },
+    ],
+  },
+}
+
+const headcountProjectionDataConfig = {
+  actual: {
+    label: "Actual headcount",
+  },
+  projected: {
+    label: "Projected headcount",
+    dashed: true,
+  },
+}
+
+export const DashedArea: Meta<
+  typeof AreaChart<typeof headcountProjectionDataConfig>
+> = {
+  args: {
+    dataConfig: headcountProjectionDataConfig,
+    xAxis: {
+      hide: false,
+      tickFormatter: (value: string) => value.slice(0, 3),
+    },
+    yAxis: {
+      hide: false,
+      tickFormatter: (value: string) => value,
+    },
+    data: [
+      { label: "January", values: { actual: 170, projected: 220 } },
+      { label: "February", values: { actual: 200, projected: 245 } },
+      { label: "March", values: { actual: 256, projected: 270 } },
+      { label: "April", values: { actual: 301, projected: 295 } },
+      { label: "May", values: { actual: 345, projected: 320 } },
+      { label: "June", values: { actual: 308, projected: 345 } },
+    ],
+  },
+}
+const teamHeadcountDataConfig = {
+  design: {
+    label: "Design",
+  },
+  product: {
+    label: "Product",
+  },
+  engineering: {
+    label: "Engineering",
+  },
+}
+
+export const MultipleAreas: Meta<
+  typeof AreaChart<typeof teamHeadcountDataConfig>
+> = {
+  args: {
+    dataConfig: teamHeadcountDataConfig,
+    xAxis: {
+      hide: false,
+      tickFormatter: (value: string) => value.slice(0, 3),
+    },
+    yAxis: {
+      hide: false,
+      tickFormatter: (value: string) => value,
+    },
+    data: [
+      {
+        label: "January",
+        values: { design: 12, product: 28, engineering: 65 },
       },
-      mobile: {
-        label: "Mobile",
+      {
+        label: "February",
+        values: { design: 14, product: 32, engineering: 72 },
       },
-    },
+      {
+        label: "March",
+        values: { design: 16, product: 36, engineering: 78 },
+      },
+      {
+        label: "April",
+        values: { design: 18, product: 41, engineering: 95 },
+      },
+      {
+        label: "May",
+        values: { design: 20, product: 58, engineering: 102 },
+      },
+      {
+        label: "June",
+        values: { design: 19, product: 50, engineering: 98 },
+      },
+    ],
   },
 }

packages/react/src/components/Charts/AreaChart/index.tsx

@@ -19,7 +19,7 @@ import {
   YAxis,
 } from "recharts"
 import { usePrivacyMode } from "../../../lib/privacyMode"
-import { autoColor } from "../utils/colors"
+import { getCategoricalColor, getColor } from "../utils/colors"
 import {
   cartesianGridProps,
   chartTooltipProps,
@@ -168,12 +168,20 @@ export const BaseAreaChart = <K extends LineChartConfig>(
             >
               <stop
                 offset="5%"
-                stopColor={dataConfig[area].color || autoColor(index)}
+                stopColor={
+                  dataConfig[area].color
+                    ? getColor(dataConfig[area].color)
+                    : getCategoricalColor(index)
+                }
                 stopOpacity={0.8}
               />
               <stop
                 offset="95%"
-                stopColor={dataConfig[area].color || autoColor(index)}
+                stopColor={
+                  dataConfig[area].color
+                    ? getColor(dataConfig[area].color)
+                    : getCategoricalColor(index)
+                }
                 stopOpacity={0.1}
               />
             </linearGradient>
@@ -232,7 +240,11 @@ export const BaseAreaChart = <K extends LineChartConfig>(
             mask={`url(#${chartId}-transparent-edges)`}
             fill={`url(#fill${area}-${chartId})`}
             fillOpacity={dataConfig[area].dashed ? 0 : 0.4}
-            stroke={dataConfig[area].color || autoColor(index)}
+            stroke={
+              dataConfig[area].color
+                ? getColor(dataConfig[area].color)
+                : getCategoricalColor(index)
+            }
             strokeWidth={1.5}
             strokeDasharray={dataConfig[area].dashed ? "4 4" : undefined}
           />