From 019fbeb8303860023a4e1e38f45f46d1666152fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jorge=20Cort=C3=A9s?= <jecr@users.noreply.github.com>
Date: Mon, 26 Feb 2024 10:59:48 -0600
Subject: [PATCH] frontend: add and use charts colors (#2926)

This PR adds the color palette to be used in charts and updates current
usages with references to the theme. A new property was added to the
theme object: `chartColors`, to hold an static array of colors.

Added default colors to the `theme.colors` object for the `Pie` and
`LinearTimeline` components, `TimeseriesChart` does not use default
colors, but their stories now use colors from `theme`.

Changed components:

### Linear Timeline
before
<img width="408" alt="image"
src="https://github.com/lyft/clutch/assets/5430603/f1ab1b14-228e-49ea-b5c5-e93063ab774f">

after
<img width="421" alt="image"
src="https://github.com/lyft/clutch/assets/5430603/462082ce-c11e-409b-9455-b8ff15fbe496">

Custom styled

before
<img width="415" alt="image"
src="https://github.com/lyft/clutch/assets/5430603/a9fefc14-b7b5-4bf9-8be9-322c771c6ca8">

after
<img width="419" alt="image"
src="https://github.com/lyft/clutch/assets/5430603/f395d04f-d927-4765-a3f6-fa41d00b3f17">

### Pie Chart
Chart now uses colors from theme
Changed labels to get colors from palette

before
<img width="325" alt="image"
src="https://github.com/lyft/clutch/assets/5430603/2f34af8b-19de-42be-8796-a5c1e2adeea0">

after
<img width="328" alt="image"
src="https://github.com/lyft/clutch/assets/5430603/b2e8bf9c-f5de-4603-88e5-7406d8761ce7">

### TimeseriesChart
before
<img width="917" alt="image"
src="https://github.com/lyft/clutch/assets/5430603/38bb3a87-97c3-4fe8-952d-8b9faf56c491">

after
<img width="917" alt="image"
src="https://github.com/lyft/clutch/assets/5430603/4105467c-b8db-4e8c-bbfd-3c82e55eeb4c">

before
<img width="895" alt="image"
src="https://github.com/lyft/clutch/assets/5430603/386a4623-6092-4af7-87d3-d070b138187c">

after
<img width="895" alt="image"
src="https://github.com/lyft/clutch/assets/5430603/83545c4f-416f-4a94-a14f-1c863fd5d8c1">


### Testing Performed
manual, unit tests
---
 .../core/src/Charts/linearTimeline.tsx        | 18 ++++-
 frontend/packages/core/src/Charts/pie.tsx     | 45 +++++------
 .../Charts/stories/linearTimeline.stories.tsx | 41 +++++++---
 .../src/Charts/stories/timeseries.stories.tsx | 30 +++++---
 .../core/src/Charts/tests/pie.test.tsx        |  8 +-
 frontend/packages/core/src/Theme/colors.tsx   | 74 +++++++++++++++++--
 frontend/packages/core/src/Theme/types.tsx    | 18 +++++
 7 files changed, 178 insertions(+), 56 deletions(-)

diff --git a/frontend/packages/core/src/Charts/linearTimeline.tsx b/frontend/packages/core/src/Charts/linearTimeline.tsx
index 0e6e1cd30a..43aee97ed8 100644
--- a/frontend/packages/core/src/Charts/linearTimeline.tsx
+++ b/frontend/packages/core/src/Charts/linearTimeline.tsx
@@ -10,6 +10,8 @@ import {
   YAxis,
 } from "recharts";
 
+import { useTheme } from "../AppProvider/themes";
+
 import { calculateDomainEdges, calculateTicks, localTimeFormatter } from "./helpers";
 import type { CustomTooltipProps, LinearTimelineData, LinearTimelineStylingProps } from "./types";
 
@@ -46,6 +48,8 @@ const LinearTimeline = ({
   tooltipFormatterFunc = null,
   stylingProps = {},
 }: LinearTimelineProps) => {
+  const theme = useTheme();
+
   const combinedData = Object.keys(data).reduce((acc, lane) => {
     return [...acc, ...data[lane].points];
   }, []);
@@ -86,8 +90,11 @@ const LinearTimeline = ({
       return (
         <div
           style={{
-            backgroundColor: stylingProps?.tooltipBackgroundColor,
-            color: stylingProps?.tooltipTextColor,
+            backgroundColor:
+              stylingProps?.tooltipBackgroundColor ||
+              theme.colors.charts.linearTimeline.tooltipBackgroundColor,
+            color:
+              stylingProps?.tooltipTextColor || theme.colors.charts.linearTimeline.tooltipTextColor,
           }}
         >
           {localTimeFormatter(payload[0].value)}
@@ -102,8 +109,11 @@ const LinearTimeline = ({
     <ResponsiveContainer width="100%" height="100%">
       <ScatterChart>
         <CartesianGrid
-          fill={stylingProps?.gridBackgroundColor ?? "black"}
-          stroke={stylingProps?.gridStroke ?? "white"}
+          fill={
+            stylingProps?.gridBackgroundColor ??
+            theme.colors.charts.linearTimeline.gridBackgroundColor
+          }
+          stroke={stylingProps?.gridStroke ?? theme.colors.charts.linearTimeline.gridStroke}
         />
         <XAxis
           dataKey={xAxisDataKey}
diff --git a/frontend/packages/core/src/Charts/pie.tsx b/frontend/packages/core/src/Charts/pie.tsx
index 8c7f86cc71..a9294a422d 100644
--- a/frontend/packages/core/src/Charts/pie.tsx
+++ b/frontend/packages/core/src/Charts/pie.tsx
@@ -1,4 +1,6 @@
 import React, { PureComponent } from "react";
+import { ThemeContext } from "@emotion/react";
+import type { Theme } from "@mui/material";
 import {
   Cell,
   Label,
@@ -10,6 +12,8 @@ import {
   Tooltip,
 } from "recharts";
 
+import styled from "../styled";
+
 import type { PieChartData } from "./types";
 
 export interface PieChartProps {
@@ -90,22 +94,13 @@ interface PieChartState {
   activeIndex?: number;
 }
 
-const DEFAULT_COLORS = [
-  "#651FFF",
-  "#FF4081",
-  "#0091EA",
-  "#00695C",
-  "#9E9D24",
-  "#880E4F",
-  "#01579B",
-  "#F4511E",
-  "#009688",
-  "#C2185B",
-  "#1A237E",
-  "#7C4DFF",
-  "#88451D",
-  "#AA00FF",
-];
+const ChartLabelPrimary = styled("text")(({ theme }: { theme: Theme }) => ({
+  fill: theme.colors.charts.pie.labelPrimary,
+}));
+
+const ChartLabelSecondary = styled("text")(({ theme }: { theme: Theme }) => ({
+  fill: theme.colors.charts.pie.labelSecondary,
+}));
 
 const renderActiveShape = (props, options) => {
   const RADIAN = Math.PI / 180;
@@ -161,12 +156,12 @@ const renderActiveShape = (props, options) => {
       />
       <path d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`} stroke={fill} fill="none" />
       <circle cx={ex} cy={ey} r={2} fill={fill} stroke="none" />
-      <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} textAnchor={textAnchor} fill="#333">
+      <ChartLabelPrimary x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} textAnchor={textAnchor}>
         {payload.name}
-      </text>
-      <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} dy={18} textAnchor={textAnchor} fill="#999">
+      </ChartLabelPrimary>
+      <ChartLabelSecondary x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} dy={18} textAnchor={textAnchor}>
         {`${value} (${(percent * 100).toFixed(2)}%)`}
-      </text>
+      </ChartLabelSecondary>
     </g>
   );
 };
@@ -219,6 +214,8 @@ class PieChart extends PureComponent<PieChartProps, PieChartState> {
       tooltip,
     } = this.props;
 
+    const { colors } = this.context;
+
     const chartOptions = {
       activeTooltip: typeof activeTooltip === "boolean" ? activeTooltip : true,
       activeTooltipOptions: typeof activeTooltip !== "boolean" ? { ...activeTooltip } : {},
@@ -270,7 +267,7 @@ class PieChart extends PureComponent<PieChartProps, PieChartState> {
       >
         <Pie
           data={data}
-          fill={DEFAULT_COLORS[0]}
+          fill={colors.charts.common.data[0]}
           dataKey="value"
           onMouseEnter={this.onPieEnter}
           {...chartOptions.dimensions}
@@ -280,7 +277,9 @@ class PieChart extends PureComponent<PieChartProps, PieChartState> {
             <Cell
               // eslint-disable-next-line react/no-array-index-key
               key={`cell-${index}`}
-              fill={entry.color ?? DEFAULT_COLORS[index % DEFAULT_COLORS.length]}
+              fill={
+                entry.color ?? colors.charts.common.data[index % colors.charts.common.data.length]
+              }
             />
           ))}
           {centerLabel && <Label content={<CenterLabel options={centerLabel} />} />}
@@ -301,4 +300,6 @@ class PieChart extends PureComponent<PieChartProps, PieChartState> {
   }
 }
 
+PieChart.contextType = ThemeContext;
+
 export { PieChart };
diff --git a/frontend/packages/core/src/Charts/stories/linearTimeline.stories.tsx b/frontend/packages/core/src/Charts/stories/linearTimeline.stories.tsx
index cf509d2dcd..b5637ec940 100644
--- a/frontend/packages/core/src/Charts/stories/linearTimeline.stories.tsx
+++ b/frontend/packages/core/src/Charts/stories/linearTimeline.stories.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import type { Meta } from "@storybook/react";
 
+import { useTheme } from "../../AppProvider/themes";
 import styled from "../../styled";
 import LinearTimeline from "../linearTimeline";
 import type { LinearTimelineData } from "../types";
@@ -16,9 +17,18 @@ const ChartContainer = styled("div")({
 });
 
 export const Primary = () => {
+  const theme = useTheme();
   const mockData: LinearTimelineData = {
-    deploys: { points: [{ timestamp: 1588884888 }], shape: "cross", color: "purple" },
-    "k8s events": { points: [{ timestamp: 1588985888 }], shape: "triangle", color: "blue" },
+    deploys: {
+      points: [{ timestamp: 1588884888 }],
+      shape: "cross",
+      color: theme.colors.charts.common.data[1],
+    },
+    "k8s events": {
+      points: [{ timestamp: 1588985888 }],
+      shape: "triangle",
+      color: theme.colors.charts.common.data[6],
+    },
     explosions: {
       points: [
         { timestamp: 1588788888 },
@@ -36,7 +46,7 @@ export const Primary = () => {
         { timestamp: 1589807088 },
       ],
       shape: "star",
-      color: "green",
+      color: theme.colors.charts.common.data[2],
     },
   };
   return (
@@ -47,9 +57,18 @@ export const Primary = () => {
 };
 
 export const ColoredChart = () => {
+  const theme = useTheme();
   const mockData: LinearTimelineData = {
-    deploys: { points: [{ timestamp: 1588884888 }], shape: "cross", color: "purple" },
-    "k8s events": { points: [{ timestamp: 1588985888 }], shape: "triangle", color: "blue" },
+    deploys: {
+      points: [{ timestamp: 1588884888 }],
+      shape: "cross",
+      color: theme.colors.red[500],
+    },
+    "k8s events": {
+      points: [{ timestamp: 1588985888 }],
+      shape: "triangle",
+      color: theme.colors.amber[500],
+    },
     explosions: {
       points: [
         { timestamp: 1588788888 },
@@ -67,7 +86,7 @@ export const ColoredChart = () => {
         { timestamp: 1589807088 },
       ],
       shape: "star",
-      color: "black",
+      color: theme.colors.green[500],
     },
   };
   return (
@@ -76,11 +95,11 @@ export const ColoredChart = () => {
         data={mockData}
         xAxisDataKey="timestamp"
         stylingProps={{
-          xAxisStroke: "red",
-          tooltipBackgroundColor: "blue",
-          tooltipTextColor: "white",
-          gridBackgroundColor: "green",
-          gridStroke: "yellow",
+          xAxisStroke: theme.colors.blue[500],
+          tooltipBackgroundColor: theme.colors.blue[200],
+          tooltipTextColor: theme.colors.blue[900],
+          gridBackgroundColor: theme.colors.blue[100],
+          gridStroke: theme.colors.blue[300],
         }}
       />
     </ChartContainer>
diff --git a/frontend/packages/core/src/Charts/stories/timeseries.stories.tsx b/frontend/packages/core/src/Charts/stories/timeseries.stories.tsx
index d3d08362e4..038ee9c7cc 100644
--- a/frontend/packages/core/src/Charts/stories/timeseries.stories.tsx
+++ b/frontend/packages/core/src/Charts/stories/timeseries.stories.tsx
@@ -1,6 +1,8 @@
 import React from "react";
+import { alpha } from "@mui/system";
 import type { Meta } from "@storybook/react";
 
+import { useTheme } from "../../AppProvider/themes";
 import styled from "../../styled";
 import { dateTimeFormatter, isoTimeFormatter } from "../helpers";
 import TimeseriesChart from "../timeseries";
@@ -17,6 +19,7 @@ const ChartContainer = styled("div")({
 });
 
 export const SingleDataLine = () => {
+  const theme = useTheme();
   const mockDataSingleLine = [
     {
       lineName: "line1",
@@ -53,7 +56,7 @@ export const SingleDataLine = () => {
   const mockLines = [
     {
       dataKey: "value",
-      color: "red",
+      color: theme.colors.red[500],
       animationDuration: 0,
     },
   ];
@@ -94,6 +97,7 @@ export const SingleDataLine = () => {
 };
 
 export const MultiLine = () => {
+  const theme = useTheme();
   const mockDataMultiLine = [
     {
       lineName: "line1",
@@ -130,12 +134,12 @@ export const MultiLine = () => {
   const mockMultipleLines = [
     {
       dataKey: "value",
-      color: "red",
+      color: theme.colors.red[500],
       animationDuration: 0,
     },
     {
       dataKey: "value2",
-      color: "blue",
+      color: theme.colors.blue[500],
     },
   ];
 
@@ -160,6 +164,7 @@ export const MultiLine = () => {
  * other options.
  */
 export const ReferenceLinesAndThingsDisabled = () => {
+  const theme = useTheme();
   const mockData = [
     {
       lineName: "line1",
@@ -181,7 +186,7 @@ export const ReferenceLinesAndThingsDisabled = () => {
   const mockLines = [
     {
       dataKey: "value",
-      color: "purple",
+      color: theme.colors.charts.common.data[0],
       animationDuration: 2000,
     },
   ];
@@ -191,13 +196,13 @@ export const ReferenceLinesAndThingsDisabled = () => {
       axis: "x",
       coordinate: 1546300850000,
       label: "ref line 1",
-      color: "green",
+      color: theme.colors.green[500],
     },
     {
       axis: "y",
       coordinate: 17,
       label: "ref line 2",
-      color: "red",
+      color: theme.colors.red[500],
     },
   ];
 
@@ -212,7 +217,7 @@ export const ReferenceLinesAndThingsDisabled = () => {
         drawDots={false}
         legend={false}
         grid={false}
-        tickFormatterFunc={null}
+        tickFormatterFunc={v => `${v}`}
         xDomainSpread={null}
       />
     </ChartContainer>
@@ -220,6 +225,7 @@ export const ReferenceLinesAndThingsDisabled = () => {
 };
 
 export const StyledChart = () => {
+  const theme = useTheme();
   const mockDataSingleLine = [
     {
       lineName: "line1",
@@ -256,7 +262,7 @@ export const StyledChart = () => {
   const mockLines = [
     {
       dataKey: "value",
-      color: "red",
+      color: theme.colors.red[500],
       animationDuration: 0,
     },
   ];
@@ -272,10 +278,10 @@ export const StyledChart = () => {
         yDomainSpread={0.3}
         regularIntervalTicks
         stylingProps={{
-          gridBackgroundColor: "pink",
-          gridStroke: "blue",
-          xAxisStroke: "green",
-          yAxisStroke: "orange",
+          gridBackgroundColor: alpha(theme.colors.red[600], 0.4),
+          gridStroke: theme.colors.blue[700],
+          xAxisStroke: theme.colors.green[500],
+          yAxisStroke: theme.colors.amber[500],
         }}
       />
     </ChartContainer>
diff --git a/frontend/packages/core/src/Charts/tests/pie.test.tsx b/frontend/packages/core/src/Charts/tests/pie.test.tsx
index c0500081a4..b60a794e04 100644
--- a/frontend/packages/core/src/Charts/tests/pie.test.tsx
+++ b/frontend/packages/core/src/Charts/tests/pie.test.tsx
@@ -3,6 +3,7 @@ import { render } from "@testing-library/react";
 
 import "@testing-library/jest-dom";
 
+import { ThemeProvider } from "../../Theme";
 import { PieChart } from "../pie";
 import type { PieChartData } from "../types";
 
@@ -28,7 +29,12 @@ jest.mock("recharts", () => {
   };
 });
 
-const setup = props => render(<PieChart data={mockData} {...props} />);
+const setup = props =>
+  render(
+    <ThemeProvider>
+      <PieChart data={mockData} {...props} />
+    </ThemeProvider>
+  );
 
 test("renders correctly", () => {
   const { container } = setup({});
diff --git a/frontend/packages/core/src/Theme/colors.tsx b/frontend/packages/core/src/Theme/colors.tsx
index 54aa2dd4ea..e3e39f9af6 100644
--- a/frontend/packages/core/src/Theme/colors.tsx
+++ b/frontend/packages/core/src/Theme/colors.tsx
@@ -7,6 +7,40 @@ export enum THEME_VARIANTS {
 
 export const brandColor = "#02acbe";
 
+const LIGHT_CHART_COLORS: string[] = [
+  "#651FFF",
+  "#FF4081",
+  "#0091EA",
+  "#00695C",
+  "#9E9D24",
+  "#880E4F",
+  "#01579B",
+  "#F4511E",
+  "#009688",
+  "#C2185B",
+  "#1A237E",
+  "#7C4DFF",
+  "#88451D",
+  "#AA00FF",
+];
+
+const DARK_CHART_COLORS: string[] = [
+  "#651FFF",
+  "#FF4081",
+  "#0091EA",
+  "#00695C",
+  "#9E9D24",
+  "#880E4F",
+  "#01579B",
+  "#F4511E",
+  "#009688",
+  "#C2185B",
+  "#1A237E",
+  "#7C4DFF",
+  "#88451D",
+  "#AA00FF",
+];
+
 export const LIGHT_COLORS: ClutchColors = {
   neutral: {
     50: "#F8F8F9",
@@ -88,6 +122,22 @@ export const LIGHT_COLORS: ClutchColors = {
     A400: "#571608",
     A700: "#571608",
   },
+  charts: {
+    common: {
+      data: LIGHT_CHART_COLORS,
+    },
+    pie: {
+      labelPrimary: "#0D1030",
+      labelSecondary: "#868798",
+    },
+    linearTimeline: {
+      xAxisStroke: "#000",
+      tooltipBackgroundColor: "#FFF",
+      tooltipTextColor: "#000",
+      gridBackgroundColor: "#000",
+      gridStroke: "#FFF",
+    },
+  },
 };
 
 export const DARK_COLORS: ClutchColors = {
@@ -171,6 +221,22 @@ export const DARK_COLORS: ClutchColors = {
     A400: "#FFFFFF",
     A700: "#FFFFFF",
   },
+  charts: {
+    common: {
+      data: DARK_CHART_COLORS,
+    },
+    pie: {
+      labelPrimary: "#0D1030",
+      labelSecondary: "#8D8E9E",
+    },
+    linearTimeline: {
+      xAxisStroke: "#FFF",
+      tooltipBackgroundColor: "#FFF",
+      tooltipTextColor: "#000",
+      gridBackgroundColor: "#FFF",
+      gridStroke: "#000",
+    },
+  },
 };
 
 export const STATE_OPACITY: { [key in ComponentState]: number } = {
@@ -181,11 +247,7 @@ export const STATE_OPACITY: { [key in ComponentState]: number } = {
   disabled: 0.5,
 };
 
-const clutchColors = (variant: ThemeVariant) => {
-  const colors = variant === THEME_VARIANTS.light ? LIGHT_COLORS : DARK_COLORS;
-  return {
-    ...colors,
-  };
-};
+const clutchColors = (variant: ThemeVariant) =>
+  variant === THEME_VARIANTS.light ? LIGHT_COLORS : DARK_COLORS;
 
 export { clutchColors };
diff --git a/frontend/packages/core/src/Theme/types.tsx b/frontend/packages/core/src/Theme/types.tsx
index 6260220318..7b224cf3a7 100644
--- a/frontend/packages/core/src/Theme/types.tsx
+++ b/frontend/packages/core/src/Theme/types.tsx
@@ -14,12 +14,30 @@ export interface StrokeColor {
   inverse: string;
 }
 
+export interface ChartColors {
+  common: {
+    data: string[];
+  };
+  pie: {
+    labelPrimary: string;
+    labelSecondary: string;
+  };
+  linearTimeline: {
+    xAxisStroke: string;
+    tooltipBackgroundColor: string;
+    tooltipTextColor: string;
+    gridBackgroundColor: string;
+    gridStroke: string;
+  };
+}
+
 export interface ClutchColors {
   neutral: Color;
   blue: Color;
   green: Color;
   amber: Color;
   red: Color;
+  charts: ChartColors;
 }
 
 export type ComponentState = "hover" | "focused" | "pressed" | "selected" | "disabled";