Apache Superset Gauge chart interval bounds and colors not working properly when added to a dashboard

Bug description

I have created a gauge chart with interval bounds and interval colors defined as the following picture, the color scheme defined is the Superset Colors color scheme.

When I add the chart to a dashboard, and access that dashboard, sometimes the colors and interval bounds aren't correctly displayed (see screenshot bellow).

Note: the dashboard is also set to use the Superset Colors scheme.

How to reproduce the bug

1. Create a gauge chart.
2. Define interval bounds and interval colors.
3. Add chart to a dashboard.
4. Go to the dashboard.
5. Sometimes colors are correct when accessing the dashboard and sometimes they are not correct, however try to refresh the page and the colors change after refresh.

Screenshots/recordings

No response

Superset version

3.1.3

Python version

3.9

Node version

Not applicable

Browser

Chrome

Additional context

No response

Checklist

• [X] I have searched Superset docs and Slack and didn't find a solution to my problem.
• [X] I have searched the GitHub issue tracker and didn't find a similar bug report.
• [X] I have checked Superset's logs for errors and if I found a relevant Python stacktrace, I included it here as text in the "additional context" section.

Comment From: dosubot[bot]

@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.

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:

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:

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:

{
  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 ^[1][2][3].

#### Details

**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.

To continue the conversation, mention @dosu.

Comment From: rusackas

This has been silent for quite a while. Some changes were made to color application in recent versions. Can you test this on master/5.0.0rc2 and see if it's still an issue?

Comment From: rusackas

Planning to close this as inactive/not-planned if nobody is able to test this on current versions.