Skip to content

Commit 1d9f558

Browse files
Lukas742Lukas742
authored
feat(charts): add 12th chart color (#6444)
1 parent 744d72a commit 1d9f558

File tree

11 files changed

+38
-38
lines changed

11 files changed

+38
-38
lines changed

‎packages/charts/src/components/BarChart/BarChart.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -272,18 +272,18 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
272272
<XAxis
273273
dataKey={chartConfig.secondYAxis.dataKey}
274274
axisLine={{
275-
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
275+
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
276276
}}
277277
tick={
278278
<XAxisTicks
279279
config={secondaryMeasure}
280280
secondYAxisConfig={{
281-
color: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
281+
color: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
282282
}}
283283
/>
284284
}
285285
tickLine={{
286-
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
286+
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
287287
}}
288288
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
289289
// @ts-ignore
@@ -326,8 +326,8 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
326326
strokeOpacity={element.opacity}
327327
type="monotone"
328328
dataKey={element.accessor}
329-
fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
330-
stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
329+
fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
330+
stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
331331
barSize={element.width}
332332
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
333333
// @ts-ignore

‎packages/charts/src/components/BulletChart/BulletChart.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -354,18 +354,18 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
354354
<YAxis
355355
dataKey={chartConfig.secondYAxis.dataKey}
356356
axisLine={{
357-
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
357+
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
358358
}}
359359
tick={
360360
<YAxisTicks
361361
config={secondaryMeasure}
362362
secondYAxisConfig={{
363-
color: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
363+
color: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
364364
}}
365365
/>
366366
}
367367
tickLine={{
368-
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
368+
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
369369
}}
370370
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
371371
// @ts-ignore
@@ -385,18 +385,18 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
385385
<XAxis
386386
dataKey={chartConfig.secondYAxis.dataKey}
387387
axisLine={{
388-
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
388+
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
389389
}}
390390
tick={
391391
<XAxisTicks
392392
config={secondaryMeasure}
393393
secondYAxisConfig={{
394-
color: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
394+
color: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
395395
}}
396396
/>
397397
}
398398
tickLine={{
399-
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
399+
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
400400
}}
401401
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
402402
// @ts-ignore
@@ -487,8 +487,8 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
487487
label={
488488
isBigDataSet ? null : <ChartDataLabel config={element} chartType={'bar'} position={labelPosition} />
489489
}
490-
stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
491-
fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
490+
stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
491+
fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
492492
type="monotone"
493493
dataKey={element.accessor}
494494
{...chartElementProps}

‎packages/charts/src/components/ColumnChart/ColumnChart.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -285,18 +285,18 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
285285
<YAxis
286286
dataKey={chartConfig.secondYAxis.dataKey}
287287
axisLine={{
288-
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
288+
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
289289
}}
290290
tick={
291291
<YAxisTicks
292292
config={secondaryMeasure}
293293
secondYAxisConfig={{
294-
color: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
294+
color: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
295295
}}
296296
/>
297297
}
298298
tickLine={{
299-
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
299+
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
300300
}}
301301
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
302302
// @ts-ignore
@@ -319,8 +319,8 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
319319
strokeOpacity={element.opacity}
320320
type="monotone"
321321
dataKey={element.accessor}
322-
fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
323-
stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
322+
fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
323+
stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
324324
barSize={element.width}
325325
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
326326
// @ts-ignore

‎packages/charts/src/components/ComposedChart/index.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -360,18 +360,18 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
360360
<YAxis
361361
dataKey={chartConfig.secondYAxis.dataKey}
362362
axisLine={{
363-
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
363+
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
364364
}}
365365
tick={
366366
<YAxisTicks
367367
config={secondaryMeasure}
368368
secondYAxisConfig={{
369-
color: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
369+
color: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
370370
}}
371371
/>
372372
}
373373
tickLine={{
374-
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
374+
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
375375
}}
376376
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
377377
// @ts-ignore
@@ -391,18 +391,18 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
391391
<XAxis
392392
dataKey={chartConfig.secondYAxis.dataKey}
393393
axisLine={{
394-
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
394+
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
395395
}}
396396
tick={
397397
<XAxisTicks
398398
config={secondaryMeasure}
399399
secondYAxisConfig={{
400-
color: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
400+
color: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
401401
}}
402402
/>
403403
}
404404
tickLine={{
405-
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
405+
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
406406
}}
407407
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
408408
// @ts-ignore
@@ -501,8 +501,8 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
501501
<ChartDataLabel config={element} chartType={element.type} position={labelPosition} />
502502
)
503503
}
504-
stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
505-
fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
504+
stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
505+
fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
506506
type="monotone"
507507
dataKey={element.accessor}
508508
{...chartElementProps}

‎packages/charts/src/components/LineChart/LineChart.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -271,18 +271,18 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
271271
<YAxis
272272
dataKey={chartConfig.secondYAxis.dataKey}
273273
axisLine={{
274-
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
274+
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
275275
}}
276276
tick={
277277
<YAxisTicks
278278
config={secondaryMeasure}
279279
secondYAxisConfig={{
280-
color: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
280+
color: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
281281
}}
282282
/>
283283
}
284284
tickLine={{
285-
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
285+
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
286286
}}
287287
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
288288
// @ts-ignore
@@ -306,7 +306,7 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
306306
label={isBigDataSet ? false : <ChartDataLabel config={element} chartType="line" position="top" />}
307307
type="monotone"
308308
dataKey={element.accessor}
309-
stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
309+
stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
310310
strokeWidth={element.width}
311311
activeDot={{ onClick: onDataPointClickInternal }}
312312
isAnimationActive={!noAnimation}

‎packages/charts/src/components/PieChart/PieChart.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -307,7 +307,7 @@ const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
307307
<Cell
308308
key={index}
309309
name={dimension.formatter(getValueByDataKey(data, dimension.accessor, ''))}
310-
fill={measure.colors?.[index] ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
310+
fill={measure.colors?.[index] ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
311311
/>
312312
))}
313313
</Pie>

‎packages/charts/src/components/RadarChart/RadarChart.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -199,8 +199,8 @@ const RadarChart = forwardRef<HTMLDivElement, RadarChartProps>((props, ref) => {
199199
activeDot={{ onClick: onDataPointClickInternal } as any}
200200
name={element.label ?? element.accessor}
201201
dataKey={element.accessor}
202-
stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
203-
fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
202+
stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
203+
fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
204204
fillOpacity={element.opacity}
205205
label={<ChartDataLabel config={element} chartType="radar" position={'outside'} />}
206206
isAnimationActive={!noAnimation}

‎packages/charts/src/components/ScatterChart/ScatterChart.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -293,7 +293,7 @@ const ScatterChart = forwardRef<HTMLDivElement, ScatterChartProps>((props, ref)
293293
data={dataSet?.data}
294294
name={dataSet?.label}
295295
key={dataSet?.label}
296-
fill={dataSet?.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
296+
fill={dataSet?.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
297297
isAnimationActive={!noAnimation}
298298
/>
299299
);

‎packages/charts/src/components/TimelineChart/chartbody/TimelineChartRow.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const TimelineChartRow = ({
2727
showTooltip,
2828
hideTooltip
2929
}: TimelineChartRowProps) => {
30-
rowData.color = rowData.color ?? `var(--sapChart_OrderedColor_${(rowIndex % 11) + 1})`;
30+
rowData.color = rowData.color ?? `var(--sapChart_OrderedColor_${(rowIndex % 12) + 1})`;
3131

3232
return (
3333
<svg

‎packages/charts/src/hooks/usePrepareTrendMeasures.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,15 @@ export const usePrepareTrendMeasures = (measures: ITrendChartMeasure[], dataset:
2424
formatter: defaultFormatter
2525
});
2626
columnMeasures.push({
27-
color: measure.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`,
27+
color: measure.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`,
2828
formatter: defaultFormatter,
2929
...measure
3030
});
3131
}
3232

3333
if (measure.type === 'line') {
3434
lineMeasures.push({
35-
color: measure.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`,
35+
color: measure.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`,
3636
formatter: defaultFormatter,
3737
...measure
3838
});

‎packages/charts/src/internal/Utils.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export const getCellColors = (element: Record<string, any>, data: Record<string,
55
return (
66
element.highlightColor?.(getValueByDataKey(data, element.accessor), element, data) ??
77
element.color ??
8-
`var(--sapChart_OrderedColor_${(index % 11) + 1})`
8+
`var(--sapChart_OrderedColor_${(index % 12) + 1})`
99
);
1010
};
1111

0 commit comments

Comments
 (0)