Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(charts): add 12th chart color #6444

Merged
merged 5 commits into from
Oct 4, 2024
Merged

feat(charts): add 12th chart color #6444

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c679da5
feat(ThemingParameters): update `ThemingParameters` to use latest CSS…
Lukas742 Oct 4, 2024
8ceedeb
feat(charts): add 12th chart color
Lukas742 Oct 4, 2024
b719038
Update BarChart.tsx
Lukas742 Oct 4, 2024
285a06a
Merge branch 'main' into feat/charts-colors-wc2.3
Lukas742 Oct 4, 2024
28b7786
update all ordered-colors
Lukas742 Oct 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions packages/charts/src/components/BarChart/BarChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@
* @param measure {IChartMeasure} Current measure object
* @param dataElement {object} Current data element
*/
highlightColor?: (value: number, measure: MeasureConfig, dataElement: Record<string, any>) => CSSProperties['color'];

Check warning on line 79 in packages/charts/src/components/BarChart/BarChart.tsx

View workflow job for this annotation

GitHub Actions / lint 

Unexpected any. Specify a different type
}

interface DimensionConfig extends IChartDimension {
Expand Down Expand Up @@ -186,7 +186,7 @@
? dataKeys.findIndex((key) => key === chartConfig.secondYAxis?.dataKey)
: 0;

const [componentRef, chartRef] = useSyncRef<any>(ref);

Check warning on line 189 in packages/charts/src/components/BarChart/BarChart.tsx

View workflow job for this annotation

GitHub Actions / lint 

Unexpected any. Specify a different type

const onItemLegendClick = useLegendItemClick(onLegendClick);
const labelFormatter = useLabelFormatter(primaryDimension);
Expand Down Expand Up @@ -272,18 +272,18 @@
<XAxis
dataKey={chartConfig.secondYAxis.dataKey}
axisLine={{
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
}}
tick={
<XAxisTicks
config={secondaryMeasure}
secondYAxisConfig={{
color: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
color: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
}}
/>
}
tickLine={{
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
}}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
Expand Down Expand Up @@ -326,8 +326,8 @@
strokeOpacity={element.opacity}
type="monotone"
dataKey={element.accessor}
fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
barSize={element.width}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
Expand Down
16 changes: 8 additions & 8 deletions packages/charts/src/components/BulletChart/BulletChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@
* @param measure {IChartMeasure} Current measure object
* @param dataElement {object} Current data element
*/
highlightColor?: (value: number, measure: MeasureConfig, dataElement: Record<string, any>) => CSSProperties['color'];

Check warning on line 69 in packages/charts/src/components/BulletChart/BulletChart.tsx

View workflow job for this annotation

GitHub Actions / lint 

Unexpected any. Specify a different type
}

interface DimensionConfig extends IChartDimension {
Expand Down Expand Up @@ -146,7 +146,7 @@
...rest
} = props;

const [componentRef, chartRef] = useSyncRef<any>(ref);

Check warning on line 149 in packages/charts/src/components/BulletChart/BulletChart.tsx

View workflow job for this annotation

GitHub Actions / lint 

Unexpected any. Specify a different type

const chartConfig: BulletChartProps['chartConfig'] = {
yAxisVisible: false,
Expand Down Expand Up @@ -225,7 +225,7 @@
);
} else {
onDataPointClick(
enrichEventWithDetails({} as any, {

Check warning on line 228 in packages/charts/src/components/BulletChart/BulletChart.tsx

View workflow job for this annotation

GitHub Actions / lint 

Unexpected any. Specify a different type
value: eventOrIndex.value,
dataKey: eventOrIndex.dataKey,
dataIndex: eventOrIndex.index,
Expand Down Expand Up @@ -302,7 +302,7 @@
{chartConfig.xAxisVisible &&
dimensions.map((dimension, index) => {
let AxisComponent;
const axisProps: any = {

Check warning on line 305 in packages/charts/src/components/BulletChart/BulletChart.tsx

View workflow job for this annotation

GitHub Actions / lint 

Unexpected any. Specify a different type
dataKey: dimension.accessor,
interval: dimension?.interval ?? (isBigDataSet ? 'preserveStartEnd' : 0),
tickLine: index < 1,
Expand Down Expand Up @@ -354,18 +354,18 @@
<YAxis
dataKey={chartConfig.secondYAxis.dataKey}
axisLine={{
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
}}
tick={
<YAxisTicks
config={secondaryMeasure}
secondYAxisConfig={{
color: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
color: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
}}
/>
}
tickLine={{
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
}}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
Expand All @@ -385,18 +385,18 @@
<XAxis
dataKey={chartConfig.secondYAxis.dataKey}
axisLine={{
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
}}
tick={
<XAxisTicks
config={secondaryMeasure}
secondYAxisConfig={{
color: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
color: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
}}
/>
}
tickLine={{
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
}}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
Expand Down Expand Up @@ -442,7 +442,7 @@
/>
)}
{sortedMeasures?.map((element, index) => {
const chartElementProps: any = {

Check warning on line 445 in packages/charts/src/components/BulletChart/BulletChart.tsx

View workflow job for this annotation

GitHub Actions / lint 

Unexpected any. Specify a different type
isAnimationActive: !noAnimation
};
let labelPosition = 'top';
Expand Down Expand Up @@ -487,8 +487,8 @@
label={
isBigDataSet ? null : <ChartDataLabel config={element} chartType={'bar'} position={labelPosition} />
}
stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
type="monotone"
dataKey={element.accessor}
{...chartElementProps}
Expand Down
10 changes: 5 additions & 5 deletions packages/charts/src/components/ColumnChart/ColumnChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -285,18 +285,18 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
<YAxis
dataKey={chartConfig.secondYAxis.dataKey}
axisLine={{
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
}}
tick={
<YAxisTicks
config={secondaryMeasure}
secondYAxisConfig={{
color: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
color: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
}}
/>
}
tickLine={{
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
}}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
Expand All @@ -319,8 +319,8 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
strokeOpacity={element.opacity}
type="monotone"
dataKey={element.accessor}
fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
barSize={element.width}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
Expand Down
16 changes: 8 additions & 8 deletions packages/charts/src/components/ComposedChart/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -360,18 +360,18 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
<YAxis
dataKey={chartConfig.secondYAxis.dataKey}
axisLine={{
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
}}
tick={
<YAxisTicks
config={secondaryMeasure}
secondYAxisConfig={{
color: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
color: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
}}
/>
}
tickLine={{
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
}}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
Expand All @@ -391,18 +391,18 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
<XAxis
dataKey={chartConfig.secondYAxis.dataKey}
axisLine={{
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
}}
tick={
<XAxisTicks
config={secondaryMeasure}
secondYAxisConfig={{
color: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
color: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
}}
/>
}
tickLine={{
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
}}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
Expand Down Expand Up @@ -501,8 +501,8 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
<ChartDataLabel config={element} chartType={element.type} position={labelPosition} />
)
}
stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
type="monotone"
dataKey={element.accessor}
{...chartElementProps}
Expand Down
8 changes: 4 additions & 4 deletions packages/charts/src/components/LineChart/LineChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -271,18 +271,18 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
<YAxis
dataKey={chartConfig.secondYAxis.dataKey}
axisLine={{
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
}}
tick={
<YAxisTicks
config={secondaryMeasure}
secondYAxisConfig={{
color: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
color: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
}}
/>
}
tickLine={{
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`
stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`
}}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
Expand All @@ -306,7 +306,7 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
label={isBigDataSet ? false : <ChartDataLabel config={element} chartType="line" position="top" />}
type="monotone"
dataKey={element.accessor}
stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
strokeWidth={element.width}
activeDot={{ onClick: onDataPointClickInternal }}
isAnimationActive={!noAnimation}
Expand Down
2 changes: 1 addition & 1 deletion packages/charts/src/components/PieChart/PieChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -307,7 +307,7 @@ const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
<Cell
key={index}
name={dimension.formatter(getValueByDataKey(data, dimension.accessor, ''))}
fill={measure.colors?.[index] ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
fill={measure.colors?.[index] ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
/>
))}
</Pie>
Expand Down
4 changes: 2 additions & 2 deletions packages/charts/src/components/RadarChart/RadarChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,8 +199,8 @@ const RadarChart = forwardRef<HTMLDivElement, RadarChartProps>((props, ref) => {
activeDot={{ onClick: onDataPointClickInternal } as any}
name={element.label ?? element.accessor}
dataKey={element.accessor}
stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
fillOpacity={element.opacity}
label={<ChartDataLabel config={element} chartType="radar" position={'outside'} />}
isAnimationActive={!noAnimation}
Expand Down
2 changes: 1 addition & 1 deletion packages/charts/src/components/ScatterChart/ScatterChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -293,7 +293,7 @@ const ScatterChart = forwardRef<HTMLDivElement, ScatterChartProps>((props, ref)
data={dataSet?.data}
name={dataSet?.label}
key={dataSet?.label}
fill={dataSet?.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
fill={dataSet?.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
isAnimationActive={!noAnimation}
/>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/charts/src/components/TimelineChart/chartbody/TimelineChartRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const TimelineChartRow = ({
showTooltip,
hideTooltip
}: TimelineChartRowProps) => {
rowData.color = rowData.color ?? `var(--sapChart_OrderedColor_${(rowIndex % 11) + 1})`;
rowData.color = rowData.color ?? `var(--sapChart_OrderedColor_${(rowIndex % 12) + 1})`;

return (
<svg
Expand Down
4 changes: 2 additions & 2 deletions packages/charts/src/hooks/usePrepareTrendMeasures.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,15 @@ export const usePrepareTrendMeasures = (measures: ITrendChartMeasure[], dataset:
formatter: defaultFormatter
});
columnMeasures.push({
color: measure.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`,
color: measure.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`,
formatter: defaultFormatter,
...measure
});
}

if (measure.type === 'line') {
lineMeasures.push({
color: measure.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`,
color: measure.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`,
formatter: defaultFormatter,
...measure
});
Expand Down
2 changes: 1 addition & 1 deletion packages/charts/src/internal/Utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export const getCellColors = (element: Record<string, any>, data: Record<string,
return (
element.highlightColor?.(getValueByDataKey(data, element.accessor), element, data) ??
element.color ??
`var(--sapChart_OrderedColor_${(index % 11) + 1})`
`var(--sapChart_OrderedColor_${(index % 12) + 1})`
);
};

Expand Down
Loading