feat(app): unify chart color system with accessible palette

.changeset/orange-charts-glow.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+feat(charts): switch to Observable categorical color palette for better accessibility and theme support

packages/app/src/HDXMultiSeriesTimeChart.tsx

@@ -453,7 +453,7 @@ export const MemoChart = memo(function MemoChart({
         return !hasSelection || selectedSeriesNames.has(seriesName);
       });
 
-    return limitedGroupKeys.map((key, i) => {
+    return limitedGroupKeys.map(key => {
       const lineDataIndex = lineData.findIndex(ld => ld.dataKey === key);
       const color = lineData[lineDataIndex]?.color;
       const strokeDasharray = lineData[lineDataIndex]?.isDashed ? '4 3' : '0';
@@ -495,7 +495,7 @@ export const MemoChart = memo(function MemoChart({
           {...(isHovered
             ? { fill: 'none', strokeDasharray }
             : {
-                fill: `url(#time-chart-lin-grad-${id}-${color.replace('#', '').toLowerCase()})`,
+                fill: `url(#time-chart-lin-grad-${id}-${color?.replace('#', '').toLowerCase()})`,
                 strokeDasharray,
               })}
           name={seriesName}

packages/app/src/__tests__/ChartUtils.test.ts

@@ -10,6 +10,7 @@ import {
   convertToTimeChartConfig,
   formatResponseForTimeChart,
 } from '@/ChartUtils';
+import { CHART_COLOR_ERROR, COLORS } from '@/utils';
 
 describe('ChartUtils', () => {
   describe('formatResponseForTimeChart', () => {
@@ -122,7 +123,7 @@ describe('ChartUtils', () => {
       });
       expect(actual.lineData).toEqual([
         {
-          color: '#20c997',
+          color: COLORS[0],
           dataKey: 'AVG(toFloat64OrDefault(toString(Duration)))',
           currentPeriodKey: 'AVG(toFloat64OrDefault(toString(Duration)))',
           previousPeriodKey:
@@ -211,7 +212,7 @@ describe('ChartUtils', () => {
       });
       expect(actual.lineData).toEqual([
         {
-          color: '#20c997',
+          color: COLORS[0],
           dataKey: 'AVG(toFloat64OrDefault(toString(Duration))) · checkout',
           currentPeriodKey:
             'AVG(toFloat64OrDefault(toString(Duration))) · checkout',
@@ -221,15 +222,15 @@ describe('ChartUtils', () => {
           isDashed: false,
         },
         {
-          color: '#8250dc',
+          color: COLORS[1],
           dataKey: 'max · checkout',
           currentPeriodKey: 'max · checkout',
           previousPeriodKey: 'max · checkout (previous)',
           displayName: 'max · checkout',
           isDashed: false,
         },
         {
-          color: '#cdad7a',
+          color: COLORS[2],
           dataKey: 'AVG(toFloat64OrDefault(toString(Duration))) · shipping',
           currentPeriodKey:
             'AVG(toFloat64OrDefault(toString(Duration))) · shipping',
@@ -239,7 +240,7 @@ describe('ChartUtils', () => {
           isDashed: false,
         },
         {
-          color: '#0d6efd',
+          color: COLORS[3],
           dataKey: 'max · shipping',
           currentPeriodKey: 'max · shipping',
           previousPeriodKey: 'max · shipping (previous)',
@@ -299,23 +300,23 @@ describe('ChartUtils', () => {
 
       expect(actual.lineData).toEqual([
         {
-          color: '#20c997',
+          color: COLORS[0],
           dataKey: 'info',
           currentPeriodKey: 'info',
           previousPeriodKey: 'info (previous)',
           displayName: 'info',
           isDashed: false,
         },
         {
-          color: '#20c997',
+          color: COLORS[0],
           dataKey: 'debug',
           currentPeriodKey: 'debug',
           previousPeriodKey: 'debug (previous)',
           displayName: 'debug',
           isDashed: false,
         },
         {
-          color: '#F81358',
+          color: CHART_COLOR_ERROR,
           dataKey: 'error',
           currentPeriodKey: 'error',
           previousPeriodKey: 'error (previous)',
@@ -403,7 +404,7 @@ describe('ChartUtils', () => {
       });
       expect(actual.lineData).toEqual([
         {
-          color: '#20c997',
+          color: COLORS[0],
           dataKey: 'AVG(toFloat64OrDefault(toString(Duration))) · checkout',
           currentPeriodKey:
             'AVG(toFloat64OrDefault(toString(Duration))) · checkout',
@@ -413,15 +414,15 @@ describe('ChartUtils', () => {
           isDashed: false,
         },
         {
-          color: '#8250dc',
+          color: COLORS[1],
           dataKey: 'max · checkout',
           currentPeriodKey: 'max · checkout',
           previousPeriodKey: 'max · checkout (previous)',
           displayName: 'max · checkout',
           isDashed: false,
         },
         {
-          color: '#cdad7a',
+          color: COLORS[2],
           dataKey: 'AVG(toFloat64OrDefault(toString(Duration))) · shipping',
           currentPeriodKey:
             'AVG(toFloat64OrDefault(toString(Duration))) · shipping',
@@ -431,7 +432,7 @@ describe('ChartUtils', () => {
           isDashed: false,
         },
         {
-          color: '#0d6efd',
+          color: COLORS[3],
           dataKey: 'max · shipping',
           currentPeriodKey: 'max · shipping',
           previousPeriodKey: 'max · shipping (previous)',
@@ -519,7 +520,7 @@ describe('ChartUtils', () => {
       });
       expect(actual.lineData).toEqual([
         {
-          color: '#20c997',
+          color: COLORS[0],
           currentPeriodKey: 'AVG(toFloat64OrDefault(toString(Duration)))',
           previousPeriodKey:
             'AVG(toFloat64OrDefault(toString(Duration))) (previous)',
@@ -528,7 +529,7 @@ describe('ChartUtils', () => {
           isDashed: false,
         },
         {
-          color: '#20c997',
+          color: COLORS[0],
           currentPeriodKey: 'AVG(toFloat64OrDefault(toString(Duration)))',
           previousPeriodKey:
             'AVG(toFloat64OrDefault(toString(Duration))) (previous)',

packages/app/src/components/DBDeltaChart.tsx

@@ -27,7 +27,11 @@ import {
 import { isAggregateFunction } from '@/ChartUtils';
 import { useQueriedChartConfig } from '@/hooks/useChartConfig';
 import { getFirstTimestampValueExpression } from '@/source';
-import { truncateMiddle } from '@/utils';
+import {
+  CHART_COLOR_ERROR,
+  CHART_COLOR_SUCCESS,
+  truncateMiddle,
+} from '@/utils';
 
 import { SQLPreview } from './ChartSQLPreview';
 
@@ -246,13 +250,13 @@ function PropertyComparisonChart({
           <Bar
             dataKey="outlierCount"
             name="Outliers"
-            fill="#F81358"
+            fill={CHART_COLOR_ERROR}
             isAnimationActive={false}
           />
           <Bar
             dataKey="inlierCount"
             name="Inliers"
-            fill="#09D99C"
+            fill={CHART_COLOR_SUCCESS}
             isAnimationActive={false}
           />
         </BarChart>

packages/app/src/components/DBRowTable.tsx

@@ -84,6 +84,7 @@ import { UNDEFINED_WIDTH } from '@/tableUtils';
 import { FormatTime } from '@/useFormatTime';
 import { useUserPreferences } from '@/useUserPreferences';
 import {
+  COLORS,
   getLogLevelClass,
   logLevelColor,
   useLocalStorage,
@@ -232,14 +233,14 @@ export const PatternTrendChart = ({
               isAnimationActive={false}
               dataKey="count"
               stackId="a"
-              fill={color || '#20c997'}
+              fill={color || COLORS[0]}
               maxBarSize={24}
             />
             {/* <Line
               key={'count'}
               type="monotone"
               dataKey={'count'}
-              stroke={'#20c997'}
+              stroke={COLORS[0]}
               dot={false}
             /> */}
             <Tooltip content={<PatternTrendChartTooltip />} />

packages/app/src/components/DBTimeChart.tsx

@@ -685,8 +685,7 @@ function DBTimeChartComponent({
           </Text>
           <Button
             className="mx-auto"
-            variant="subtle"
-            color="red"
+            variant="danger"
             onClick={() => errorExpansion.open()}
           >
             <Group gap="xxs">

packages/app/src/components/DBTraceWaterfallChart.tsx

@@ -39,6 +39,12 @@ import {
 } from '@/source';
 import TimelineChart from '@/TimelineChart';
 import { useFormatTime } from '@/useFormatTime';
+import {
+  CHART_COLOR_ERROR,
+  CHART_COLOR_ERROR_HIGHLIGHT,
+  CHART_COLOR_WARNING,
+  CHART_COLOR_WARNING_HIGHLIGHT,
+} from '@/utils';
 import {
   getHighlightedAttributesFromData,
   getSelectExpressionsForHighlightedAttributes,
@@ -82,8 +88,10 @@ function barColor(condition: {
   isHighlighted: boolean;
 }) {
   const { isError, isWarn, isHighlighted } = condition;
-  if (isError) return isHighlighted ? '#FF6E6E' : '#F53749';
-  if (isWarn) return isHighlighted ? '#FFE38A' : '#FFC107';
+  if (isError)
+    return isHighlighted ? CHART_COLOR_ERROR_HIGHLIGHT : CHART_COLOR_ERROR;
+  if (isWarn)
+    return isHighlighted ? CHART_COLOR_WARNING_HIGHLIGHT : CHART_COLOR_WARNING;
   return isHighlighted ? '#A9AFB7' : '#6A7077';
 }