Skip to content

Commit 1ed1ebf

Browse files
elizabetdevelizabetdev
authored
feat(app): unify chart color system with accessible palette (#1627)
1 parent 72d8998 commit 1ed1ebf

11 files changed

Lines changed: 528 additions & 46 deletions

‎.changeset/orange-charts-glow.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@hyperdx/app": patch
3+
---
4+
5+
feat(charts): switch to Observable categorical color palette for better accessibility and theme support

‎packages/app/src/HDXMultiSeriesTimeChart.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -453,7 +453,7 @@ export const MemoChart = memo(function MemoChart({
453453
return !hasSelection || selectedSeriesNames.has(seriesName);
454454
});
455455

456-
return limitedGroupKeys.map((key, i) => {
456+
return limitedGroupKeys.map(key => {
457457
const lineDataIndex = lineData.findIndex(ld => ld.dataKey === key);
458458
const color = lineData[lineDataIndex]?.color;
459459
const strokeDasharray = lineData[lineDataIndex]?.isDashed ? '4 3' : '0';
@@ -495,7 +495,7 @@ export const MemoChart = memo(function MemoChart({
495495
{...(isHovered
496496
? { fill: 'none', strokeDasharray }
497497
: {
498-
fill: `url(#time-chart-lin-grad-${id}-${color.replace('#', '').toLowerCase()})`,
498+
fill: `url(#time-chart-lin-grad-${id}-${color?.replace('#', '').toLowerCase()})`,
499499
strokeDasharray,
500500
})}
501501
name={seriesName}

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

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
convertToTimeChartConfig,
1111
formatResponseForTimeChart,
1212
} from '@/ChartUtils';
13+
import { CHART_COLOR_ERROR, COLORS } from '@/utils';
1314

1415
describe('ChartUtils', () => {
1516
describe('formatResponseForTimeChart', () => {
@@ -122,7 +123,7 @@ describe('ChartUtils', () => {
122123
});
123124
expect(actual.lineData).toEqual([
124125
{
125-
color: '#20c997',
126+
color: COLORS[0],
126127
dataKey: 'AVG(toFloat64OrDefault(toString(Duration)))',
127128
currentPeriodKey: 'AVG(toFloat64OrDefault(toString(Duration)))',
128129
previousPeriodKey:
@@ -211,7 +212,7 @@ describe('ChartUtils', () => {
211212
});
212213
expect(actual.lineData).toEqual([
213214
{
214-
color: '#20c997',
215+
color: COLORS[0],
215216
dataKey: 'AVG(toFloat64OrDefault(toString(Duration))) · checkout',
216217
currentPeriodKey:
217218
'AVG(toFloat64OrDefault(toString(Duration))) · checkout',
@@ -221,15 +222,15 @@ describe('ChartUtils', () => {
221222
isDashed: false,
222223
},
223224
{
224-
color: '#8250dc',
225+
color: COLORS[1],
225226
dataKey: 'max · checkout',
226227
currentPeriodKey: 'max · checkout',
227228
previousPeriodKey: 'max · checkout (previous)',
228229
displayName: 'max · checkout',
229230
isDashed: false,
230231
},
231232
{
232-
color: '#cdad7a',
233+
color: COLORS[2],
233234
dataKey: 'AVG(toFloat64OrDefault(toString(Duration))) · shipping',
234235
currentPeriodKey:
235236
'AVG(toFloat64OrDefault(toString(Duration))) · shipping',
@@ -239,7 +240,7 @@ describe('ChartUtils', () => {
239240
isDashed: false,
240241
},
241242
{
242-
color: '#0d6efd',
243+
color: COLORS[3],
243244
dataKey: 'max · shipping',
244245
currentPeriodKey: 'max · shipping',
245246
previousPeriodKey: 'max · shipping (previous)',
@@ -299,23 +300,23 @@ describe('ChartUtils', () => {
299300

300301
expect(actual.lineData).toEqual([
301302
{
302-
color: '#20c997',
303+
color: COLORS[0],
303304
dataKey: 'info',
304305
currentPeriodKey: 'info',
305306
previousPeriodKey: 'info (previous)',
306307
displayName: 'info',
307308
isDashed: false,
308309
},
309310
{
310-
color: '#20c997',
311+
color: COLORS[0],
311312
dataKey: 'debug',
312313
currentPeriodKey: 'debug',
313314
previousPeriodKey: 'debug (previous)',
314315
displayName: 'debug',
315316
isDashed: false,
316317
},
317318
{
318-
color: '#F81358',
319+
color: CHART_COLOR_ERROR,
319320
dataKey: 'error',
320321
currentPeriodKey: 'error',
321322
previousPeriodKey: 'error (previous)',
@@ -403,7 +404,7 @@ describe('ChartUtils', () => {
403404
});
404405
expect(actual.lineData).toEqual([
405406
{
406-
color: '#20c997',
407+
color: COLORS[0],
407408
dataKey: 'AVG(toFloat64OrDefault(toString(Duration))) · checkout',
408409
currentPeriodKey:
409410
'AVG(toFloat64OrDefault(toString(Duration))) · checkout',
@@ -413,15 +414,15 @@ describe('ChartUtils', () => {
413414
isDashed: false,
414415
},
415416
{
416-
color: '#8250dc',
417+
color: COLORS[1],
417418
dataKey: 'max · checkout',
418419
currentPeriodKey: 'max · checkout',
419420
previousPeriodKey: 'max · checkout (previous)',
420421
displayName: 'max · checkout',
421422
isDashed: false,
422423
},
423424
{
424-
color: '#cdad7a',
425+
color: COLORS[2],
425426
dataKey: 'AVG(toFloat64OrDefault(toString(Duration))) · shipping',
426427
currentPeriodKey:
427428
'AVG(toFloat64OrDefault(toString(Duration))) · shipping',
@@ -431,7 +432,7 @@ describe('ChartUtils', () => {
431432
isDashed: false,
432433
},
433434
{
434-
color: '#0d6efd',
435+
color: COLORS[3],
435436
dataKey: 'max · shipping',
436437
currentPeriodKey: 'max · shipping',
437438
previousPeriodKey: 'max · shipping (previous)',
@@ -519,7 +520,7 @@ describe('ChartUtils', () => {
519520
});
520521
expect(actual.lineData).toEqual([
521522
{
522-
color: '#20c997',
523+
color: COLORS[0],
523524
currentPeriodKey: 'AVG(toFloat64OrDefault(toString(Duration)))',
524525
previousPeriodKey:
525526
'AVG(toFloat64OrDefault(toString(Duration))) (previous)',
@@ -528,7 +529,7 @@ describe('ChartUtils', () => {
528529
isDashed: false,
529530
},
530531
{
531-
color: '#20c997',
532+
color: COLORS[0],
532533
currentPeriodKey: 'AVG(toFloat64OrDefault(toString(Duration)))',
533534
previousPeriodKey:
534535
'AVG(toFloat64OrDefault(toString(Duration))) (previous)',

‎packages/app/src/components/DBDeltaChart.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,11 @@ import {
2727
import { isAggregateFunction } from '@/ChartUtils';
2828
import { useQueriedChartConfig } from '@/hooks/useChartConfig';
2929
import { getFirstTimestampValueExpression } from '@/source';
30-
import { truncateMiddle } from '@/utils';
30+
import {
31+
CHART_COLOR_ERROR,
32+
CHART_COLOR_SUCCESS,
33+
truncateMiddle,
34+
} from '@/utils';
3135

3236
import { SQLPreview } from './ChartSQLPreview';
3337

@@ -246,13 +250,13 @@ function PropertyComparisonChart({
246250
<Bar
247251
dataKey="outlierCount"
248252
name="Outliers"
249-
fill="#F81358"
253+
fill={CHART_COLOR_ERROR}
250254
isAnimationActive={false}
251255
/>
252256
<Bar
253257
dataKey="inlierCount"
254258
name="Inliers"
255-
fill="#09D99C"
259+
fill={CHART_COLOR_SUCCESS}
256260
isAnimationActive={false}
257261
/>
258262
</BarChart>

‎packages/app/src/components/DBRowTable.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ import { UNDEFINED_WIDTH } from '@/tableUtils';
8484
import { FormatTime } from '@/useFormatTime';
8585
import { useUserPreferences } from '@/useUserPreferences';
8686
import {
87+
COLORS,
8788
getLogLevelClass,
8889
logLevelColor,
8990
useLocalStorage,
@@ -232,14 +233,14 @@ export const PatternTrendChart = ({
232233
isAnimationActive={false}
233234
dataKey="count"
234235
stackId="a"
235-
fill={color || '#20c997'}
236+
fill={color || COLORS[0]}
236237
maxBarSize={24}
237238
/>
238239
{/* <Line
239240
key={'count'}
240241
type="monotone"
241242
dataKey={'count'}
242-
stroke={'#20c997'}
243+
stroke={COLORS[0]}
243244
dot={false}
244245
/> */}
245246
<Tooltip content={<PatternTrendChartTooltip />} />

‎packages/app/src/components/DBTimeChart.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -685,8 +685,7 @@ function DBTimeChartComponent({
685685
</Text>
686686
<Button
687687
className="mx-auto"
688-
variant="subtle"
689-
color="red"
688+
variant="danger"
690689
onClick={() => errorExpansion.open()}
691690
>
692691
<Group gap="xxs">

‎packages/app/src/components/DBTraceWaterfallChart.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,12 @@ import {
3939
} from '@/source';
4040
import TimelineChart from '@/TimelineChart';
4141
import { useFormatTime } from '@/useFormatTime';
42+
import {
43+
CHART_COLOR_ERROR,
44+
CHART_COLOR_ERROR_HIGHLIGHT,
45+
CHART_COLOR_WARNING,
46+
CHART_COLOR_WARNING_HIGHLIGHT,
47+
} from '@/utils';
4248
import {
4349
getHighlightedAttributesFromData,
4450
getSelectExpressionsForHighlightedAttributes,
@@ -82,8 +88,10 @@ function barColor(condition: {
8288
isHighlighted: boolean;
8389
}) {
8490
const { isError, isWarn, isHighlighted } = condition;
85-
if (isError) return isHighlighted ? '#FF6E6E' : '#F53749';
86-
if (isWarn) return isHighlighted ? '#FFE38A' : '#FFC107';
91+
if (isError)
92+
return isHighlighted ? CHART_COLOR_ERROR_HIGHLIGHT : CHART_COLOR_ERROR;
93+
if (isWarn)
94+
return isHighlighted ? CHART_COLOR_WARNING_HIGHLIGHT : CHART_COLOR_WARNING;
8795
return isHighlighted ? '#A9AFB7' : '#6A7077';
8896
}
8997

0 commit comments

Comments
 (0)