Skip to content

Commit 91b9a99

Browse files
adamdoeadamdoe
committed
fix: deviation palette isVqPalette(config) checks
1 parent 49d5d44 commit 91b9a99

File tree

2 files changed

+166
-166
lines changed

2 files changed

+166
-166
lines changed

‎packages/chart/src/components/DeviationBar.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,10 @@ export default function DeviationBar({ height, xScale }) {
2727
roundingStyle === 'standard'
2828
? '8px'
2929
: roundingStyle === 'shallow'
30-
? '5px'
31-
: roundingStyle === 'finger'
32-
? '15px'
33-
: '0px'
30+
? '5px'
31+
: roundingStyle === 'finger'
32+
? '15px'
33+
: '0px'
3434
const isRounded = config.barStyle === 'rounded'
3535
const target = Number(config.xAxis.target)
3636
const seriesKey = config.series[0].dataKey
@@ -177,8 +177,8 @@ export default function DeviationBar({ height, xScale }) {
177177
const squareY = barY - barHeight / 2
178178
const borderRadius = applyRadius(barPosition)
179179
// colors
180-
let versionName = isV1Palette(twoColor.palette) ? 'v1' : 'v2'
181-
const [leftColor, rightColor] = twoColorPalette[versionName][twoColor.palette]
180+
let versionName = isV1Palette(config) ? 'v1' : 'v2'
181+
const [leftColor, rightColor] = twoColorPalette?.[versionName]?.[twoColor.palette] || ['#1D6ABF', '#935586']
182182
const barColor = { left: leftColor, right: rightColor }
183183
const fill = getContrastColor(APP_FONT_COLOR, barColor[barPosition])
184184

‎packages/chart/src/components/Legend/helpers/createFormatLabels.tsx‎

Lines changed: 160 additions & 160 deletions
Original file line numberDiff line numberDiff line change
@@ -13,189 +13,189 @@ import _ from 'lodash'
1313

1414
export const createFormatLabels =
1515
(config: ChartConfig, tableData: Object[], data: TransformedData[], colorScale: ColorScale) =>
16-
(defaultLabels: Label[]): Label[] => {
17-
const { visualizationType, visualizationSubType, series, runtime, legend } = config
18-
const sortVertical = labels =>
19-
legend.verticalSorted
20-
? _.sortBy(_.cloneDeep(labels), label => {
16+
(defaultLabels: Label[]): Label[] => {
17+
const { visualizationType, visualizationSubType, series, runtime, legend } = config
18+
const sortVertical = labels =>
19+
legend.verticalSorted
20+
? _.sortBy(_.cloneDeep(labels), label => {
2121
const match = label.datum?.match(/-?\d+(\.\d+)?/)
2222
return match ? parseFloat(match[0]) : Number.MAX_SAFE_INTEGER
2323
})
24-
: labels
25-
const reverseLabels = labels => {
26-
if (config.series.some(series => series.dynamicCategory)) {
27-
return orderDynamicLabels(labels)
28-
}
29-
30-
return config.legend.reverseLabelOrder ? sortVertical(labels).reverse() : sortVertical(labels)
31-
}
32-
33-
const orderDynamicLabels = labels => {
34-
// Handle different ordering configurations
35-
switch (config.legend.order) {
36-
case 'dataColumn':
37-
return labels
38-
case 'asc':
39-
case 'desc':
40-
return labels.sort((a, b) => {
41-
const valA = a.datum || a.text
42-
const valB = b.datum || b.text
43-
const numA = parseFloat(valA)
44-
const numB = parseFloat(valB)
45-
if (!isNaN(numA) && !isNaN(numB)) {
46-
return config.legend.order === 'asc' ? numA - numB : numB - numA
47-
} else {
48-
return config.legend.order === 'asc' ? valA.localeCompare(valB) : valB.localeCompare(valA)
49-
}
50-
})
24+
: labels
25+
const reverseLabels = labels => {
26+
if (config.series.some(series => series.dynamicCategory)) {
27+
return orderDynamicLabels(labels)
28+
}
5129

52-
default:
53-
return labels // Default case to handle any unexpected config.legend.order values
54-
}
55-
}
56-
const colorCode = config.legend?.colorCode
57-
if (visualizationType === 'Deviation Bar') {
58-
let versionName = isV1Palette(config.twoColor.palette) ? 'v1' : 'v2'
59-
const [belowColor, aboveColor] = twoColorPalette[versionName][config.twoColor.palette]
60-
61-
const labelBelow = {
62-
datum: 'X',
63-
index: 0,
64-
text: `Below ${config.xAxis.targetLabel}`,
65-
value: belowColor
66-
}
67-
const labelAbove = {
68-
datum: 'X',
69-
index: 1,
70-
text: `Above ${config.xAxis.targetLabel}`,
71-
value: aboveColor
30+
return config.legend.reverseLabelOrder ? sortVertical(labels).reverse() : sortVertical(labels)
7231
}
7332

74-
return reverseLabels([labelBelow, labelAbove])
75-
}
76-
if (visualizationType === 'Bar' && visualizationSubType === 'regular' && colorCode && series?.length === 1) {
77-
const currentPaletteName = getCurrentPaletteName(config) || getFallbackColorPalette(config)
78-
const paletteName = migratePaletteWithMap(currentPaletteName, chartPaletteMigrationMap, true)
79-
let palette = getPaletteAccessor(colorPalettes, config, paletteName)
80-
81-
const numberOfKeys = data.length
82-
83-
// Check if we should use v2 distribution logic for better contrast
84-
const version = getColorPaletteVersion(config)
85-
const isSequentialOrDivergent =
86-
paletteName && (paletteName.includes('sequential') || paletteName.includes('divergent'))
87-
const isPairedBarOrDeviation = ['Paired Bar', 'Deviation Bar'].includes(config.visualizationType)
88-
const useV2Distribution =
89-
version === 2 && isSequentialOrDivergent && palette.length === 9 && numberOfKeys <= 9 && !isPairedBarOrDeviation
90-
91-
if (useV2Distribution && v2ColorDistribution[numberOfKeys]) {
92-
// Use strategic color distribution for v2 sequential palettes
93-
const distributionIndices = v2ColorDistribution[numberOfKeys]
94-
palette = distributionIndices.map(index => palette[index])
95-
} else {
96-
// Use existing logic for v1 palettes and other cases
97-
while (tableData.length > palette.length) {
98-
palette = palette.concat(palette)
33+
const orderDynamicLabels = labels => {
34+
// Handle different ordering configurations
35+
switch (config.legend.order) {
36+
case 'dataColumn':
37+
return labels
38+
case 'asc':
39+
case 'desc':
40+
return labels.sort((a, b) => {
41+
const valA = a.datum || a.text
42+
const valB = b.datum || b.text
43+
const numA = parseFloat(valA)
44+
const numB = parseFloat(valB)
45+
if (!isNaN(numA) && !isNaN(numB)) {
46+
return config.legend.order === 'asc' ? numA - numB : numB - numA
47+
} else {
48+
return config.legend.order === 'asc' ? valA.localeCompare(valB) : valB.localeCompare(valA)
49+
}
50+
})
51+
52+
default:
53+
return labels // Default case to handle any unexpected config.legend.order values
9954
}
100-
palette = palette.slice(0, data.length)
10155
}
102-
//store unique values to Set by colorCode
103-
const set = new Set()
104-
105-
tableData.forEach(d => set.add(d[colorCode]))
106-
107-
// create labels with unique values
108-
const uniqueLabels = Array.from(set).map((val, i) => {
109-
const newLabel = {
110-
datum: val,
111-
index: i,
112-
text: val,
113-
value: palette[i]
56+
const colorCode = config.legend?.colorCode
57+
if (visualizationType === 'Deviation Bar') {
58+
let versionName = isV1Palette(config) ? 'v1' : 'v2'
59+
const [belowColor, aboveColor] = twoColorPalette?.[versionName]?.[config.twoColor.palette] || ['#1D6ABF', '#935586']
60+
61+
const labelBelow = {
62+
datum: 'X',
63+
index: 0,
64+
text: `Below ${config.xAxis.targetLabel}`,
65+
value: belowColor
66+
}
67+
const labelAbove = {
68+
datum: 'X',
69+
index: 1,
70+
text: `Above ${config.xAxis.targetLabel}`,
71+
value: aboveColor
11472
}
115-
return newLabel
116-
})
117-
118-
return reverseLabels(uniqueLabels)
119-
}
12073

121-
// get forecasting items inside of combo
122-
if (runtime?.forecastingSeriesKeys?.length > 0) {
123-
let seriesLabels = []
74+
return reverseLabels([labelBelow, labelAbove])
75+
}
76+
if (visualizationType === 'Bar' && visualizationSubType === 'regular' && colorCode && series?.length === 1) {
77+
const currentPaletteName = getCurrentPaletteName(config) || getFallbackColorPalette(config)
78+
const paletteName = migratePaletteWithMap(currentPaletteName, chartPaletteMigrationMap, true)
79+
let palette = getPaletteAccessor(colorPalettes, config, paletteName)
80+
81+
const numberOfKeys = data.length
82+
83+
// Check if we should use v2 distribution logic for better contrast
84+
const version = getColorPaletteVersion(config)
85+
const isSequentialOrDivergent =
86+
paletteName && (paletteName.includes('sequential') || paletteName.includes('divergent'))
87+
const isPairedBarOrDeviation = ['Paired Bar', 'Deviation Bar'].includes(config.visualizationType)
88+
const useV2Distribution =
89+
version === 2 && isSequentialOrDivergent && palette.length === 9 && numberOfKeys <= 9 && !isPairedBarOrDeviation
90+
91+
if (useV2Distribution && v2ColorDistribution[numberOfKeys]) {
92+
// Use strategic color distribution for v2 sequential palettes
93+
const distributionIndices = v2ColorDistribution[numberOfKeys]
94+
palette = distributionIndices.map(index => palette[index])
95+
} else {
96+
// Use existing logic for v1 palettes and other cases
97+
while (tableData.length > palette.length) {
98+
palette = palette.concat(palette)
99+
}
100+
palette = palette.slice(0, data.length)
101+
}
102+
//store unique values to Set by colorCode
103+
const set = new Set()
124104

125-
//store unique values to Set by colorCode
126-
// loop through each stage/group/area on the chart and create a label
127-
config.runtime?.forecastingSeriesKeys?.map((outerGroup, index) => {
128-
return outerGroup?.stages?.map((stage, index) => {
129-
let colorValue = sequentialPalettes[stage.color]?.[2]
130-
? sequentialPalettes[stage.color]?.[2]
131-
: colorPalettes[stage.color]?.[2]
132-
? colorPalettes[stage.color]?.[2]
133-
: '#ccc'
105+
tableData.forEach(d => set.add(d[colorCode]))
134106

107+
// create labels with unique values
108+
const uniqueLabels = Array.from(set).map((val, i) => {
135109
const newLabel = {
136-
datum: stage.key,
137-
index: index,
138-
text: stage.key,
139-
value: colorValue
110+
datum: val,
111+
index: i,
112+
text: val,
113+
value: palette[i]
140114
}
141-
142-
seriesLabels.push(newLabel)
115+
return newLabel
143116
})
144-
})
145117

146-
// loop through bars for now to meet requirements.
147-
config.runtime.barSeriesKeys &&
148-
config.runtime.barSeriesKeys.forEach((bar, index) => {
149-
const currentPaletteName = getCurrentPaletteName(config) || getFallbackColorPalette(config)
150-
const migratedPaletteName = migratePaletteWithMap(currentPaletteName, chartPaletteMigrationMap, true)
151-
const palette = getPaletteAccessor(colorPalettes, config, migratedPaletteName)
152-
let colorValue = palette?.[index] || '#ccc'
118+
return reverseLabels(uniqueLabels)
119+
}
153120

154-
const newLabel = {
155-
datum: bar,
156-
index: index,
157-
text: bar,
158-
value: colorValue
159-
}
121+
// get forecasting items inside of combo
122+
if (runtime?.forecastingSeriesKeys?.length > 0) {
123+
let seriesLabels = []
124+
125+
//store unique values to Set by colorCode
126+
// loop through each stage/group/area on the chart and create a label
127+
config.runtime?.forecastingSeriesKeys?.map((outerGroup, index) => {
128+
return outerGroup?.stages?.map((stage, index) => {
129+
let colorValue = sequentialPalettes[stage.color]?.[2]
130+
? sequentialPalettes[stage.color]?.[2]
131+
: colorPalettes[stage.color]?.[2]
132+
? colorPalettes[stage.color]?.[2]
133+
: '#ccc'
134+
135+
const newLabel = {
136+
datum: stage.key,
137+
index: index,
138+
text: stage.key,
139+
value: colorValue
140+
}
160141

161-
seriesLabels.push(newLabel)
142+
seriesLabels.push(newLabel)
143+
})
162144
})
163145

164-
return reverseLabels(seriesLabels)
165-
}
146+
// loop through bars for now to meet requirements.
147+
config.runtime.barSeriesKeys &&
148+
config.runtime.barSeriesKeys.forEach((bar, index) => {
149+
const currentPaletteName = getCurrentPaletteName(config) || getFallbackColorPalette(config)
150+
const migratedPaletteName = migratePaletteWithMap(currentPaletteName, chartPaletteMigrationMap, true)
151+
const palette = getPaletteAccessor(colorPalettes, config, migratedPaletteName)
152+
let colorValue = palette?.[index] || '#ccc'
153+
154+
const newLabel = {
155+
datum: bar,
156+
index: index,
157+
text: bar,
158+
value: colorValue
159+
}
166160

167-
if (config.series.some(item => item.name)) {
168-
const uniqueLabels = Array.from(new Set(config.series.map(d => d.name || d.dataKey))).map((val, i) => ({
169-
datum: val,
170-
index: i,
171-
text: val,
172-
value: colorScale(val)
173-
}))
174-
return reverseLabels(uniqueLabels)
175-
}
161+
seriesLabels.push(newLabel)
162+
})
176163

177-
if (
178-
(config.visualizationType === 'Bar' || config.visualizationType === 'Combo') &&
179-
config.visualizationSubType === 'regular' &&
180-
config.suppressedData
181-
) {
182-
const lastIndex = defaultLabels.length - 1
183-
let newLabels = []
164+
return reverseLabels(seriesLabels)
165+
}
184166

185-
config.suppressedData?.forEach(({ label, icon }, index) => {
186-
if (label && icon) {
187-
const newLabel = {
188-
datum: label,
189-
index: lastIndex + index,
190-
text: label,
191-
icon: <FaStar color='#000' size={15} />
167+
if (config.series.some(item => item.name)) {
168+
const uniqueLabels = Array.from(new Set(config.series.map(d => d.name || d.dataKey))).map((val, i) => ({
169+
datum: val,
170+
index: i,
171+
text: val,
172+
value: colorScale(val)
173+
}))
174+
return reverseLabels(uniqueLabels)
175+
}
176+
177+
if (
178+
(config.visualizationType === 'Bar' || config.visualizationType === 'Combo') &&
179+
config.visualizationSubType === 'regular' &&
180+
config.suppressedData
181+
) {
182+
const lastIndex = defaultLabels.length - 1
183+
let newLabels = []
184+
185+
config.suppressedData?.forEach(({ label, icon }, index) => {
186+
if (label && icon) {
187+
const newLabel = {
188+
datum: label,
189+
index: lastIndex + index,
190+
text: label,
191+
icon: <FaStar color='#000' size={15} />
192+
}
193+
newLabels.push(newLabel)
192194
}
193-
newLabels.push(newLabel)
194-
}
195-
})
195+
})
196196

197-
return [...defaultLabels, ...newLabels]
198-
}
197+
return [...defaultLabels, ...newLabels]
198+
}
199199

200-
return reverseLabels(defaultLabels)
201-
}
200+
return reverseLabels(defaultLabels)
201+
}

0 commit comments

Comments
 (0)