dosubot[bot] commented on issue #28766:
URL: https://github.com/apache/superset/issues/28766#issuecomment-2137778979
<!-- Greeting -->
@rodrigo-l-santos-alb Olรก! I'm here to help you with any issues you're
experiencing. Let's take a look at what's going on with the gauge chart.
<!-- Answer -->
To address the issue where the gauge chart sometimes displays incorrect
colors and interval bounds when added to a dashboard in Superset, you need to
ensure that the `getIntervalBoundsAndColors` function correctly parses and
normalizes the interval bounds and colors. Here is the relevant code snippet
that handles this:
```ts
export const getIntervalBoundsAndColors = (
intervals: string,
intervalColorIndices: string,
colorFn: CategoricalColorScale,
min: number,
max: number,
): Array<[number, string]> => {
let intervalBoundsNonNormalized;
let intervalColorIndicesArray;
try {
intervalBoundsNonNormalized = parseNumbersList(intervals, ',');
intervalColorIndicesArray = parseNumbersList(intervalColorIndices, ',');
} catch (error) {
intervalBoundsNonNormalized = [] as number[];
intervalColorIndicesArray = [] as number[];
}
const intervalBounds = intervalBoundsNonNormalized.map(
bound => (bound - min) / (max - min),
);
const intervalColors = intervalColorIndicesArray.map(
ind => colorFn.colors[(ind - 1) % colorFn.colors.length],
);
return intervalBounds.map((val, idx) => {
const color = intervalColors[idx];
return [val, color || colorFn.colors[idx]];
});
};
```
Ensure that the `intervals` and `intervalColorIndices` strings are correctly
formatted and passed to this function. If the issue persists, verify that the
`colorFn` and `CategoricalColorScale` are correctly initialized and contain the
expected color values.
Additionally, you can refer to the test cases in `transformProps.test.ts` to
ensure that the `getIntervalBoundsAndColors` function is working as expected.
Here is an example test case:
```ts
describe('getIntervalBoundsAndColors', () => {
it('should generate correct interval bounds and colors', () => {
const colorFn = CategoricalColorNamespace.getScale('supersetColors' as
string);
expect(getIntervalBoundsAndColors('', '', colorFn, 0, 10)).toEqual([]);
expect(getIntervalBoundsAndColors('4, 10', '1, 2', colorFn, 0,
10)).toEqual([
[0.4, '#1f77b4'],
[1, '#ff7f0e'],
]);
expect(getIntervalBoundsAndColors('4, 8, 10', '9, 8, 7', colorFn, 0,
10)).toEqual([
[0.4, '#bcbd22'],
[0.8, '#7f7f7f'],
[1, '#e377c2'],
]);
expect(getIntervalBoundsAndColors('4, 10', '1, 2', colorFn, 2,
10)).toEqual([
[0.25, '#1f77b4'],
[1, '#ff7f0e'],
]);
expect(getIntervalBoundsAndColors('-4, 0', '1, 2', colorFn, -10,
0)).toEqual([
[0.6, '#1f77b4'],
[1, '#ff7f0e'],
]);
expect(getIntervalBoundsAndColors('-4, -2', '1, 2', colorFn, -10,
-2)).toEqual([
[0.75, '#1f77b4'],
[1, '#ff7f0e'],
]);
});
});
```
These tests ensure that the function correctly handles various interval and
color index inputs, providing confidence that the function works as intended.
Moreover, ensure that the control panel configuration for the gauge chart in
`controlPanel.tsx` is correctly set up. Specifically, check the `intervals` and
`interval_color_indices` controls:
```tsx
{
name: 'intervals',
config: {
type: 'TextControl',
label: t('Interval bounds'),
description: t(
'Comma-separated interval bounds, e.g. 2,4,5 for intervals 0-2, 2-4
and 4-5. Last number should match the value provided for MAX.',
),
renderTrigger: true,
default: DEFAULT_FORM_DATA.intervals,
},
},
{
name: 'interval_color_indices',
config: {
type: 'TextControl',
label: t('Interval colors'),
description: t(
'Comma-separated color picks for the intervals, e.g. 1,2,4. Integers
denote colors from the chosen color scheme and are 1-indexed. Length must be
matching that of interval bounds.',
),
renderTrigger: true,
default: DEFAULT_FORM_DATA.intervalColorIndices,
},
},
```
Ensure that these controls are correctly configured and that the user inputs
are properly validated and passed to the `getIntervalBoundsAndColors` function
<sup>[[1]](https://github.com/apache/superset/blob/master/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts)</sup><sup>[[2]](https://github.com/apache/superset/blob/master/superset-frontend/plugins/plugin-chart-echarts/test/Gauge/transformProps.test.ts)</sup><sup>[[3]](https://github.com/apache/superset/blob/master/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/controlPanel.tsx)</sup>.
<!-- Dosu Comment Footer -->
<details open>
<summary>
#### Details
</summary>
**About Dosu**
This response is meant to be useful and save you time. It is **not meant to
be a precise solution**, but rather a starting point for your own research.
Help me be more useful! Please leave a ๐ if this is helpful and ๐ if it is
irrelevant.
</details>
*To continue the conversation, mention @dosu.*
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
