Dashboard Color Scheme keeps changing every refresh

gladwincogoport commented 1 month ago

Bug description

I've created a dashboard with the color scheme set as Superset Colors. But every time I hit refresh, the colors of the dashboard change, however the color scheme does not change in the dashboard properties.

How to reproduce the bug

Click on 'edit dashboard' on any existing dashboard
Change color scheme to 'Superset Colors'
Save dashboard
reload the page

Screenshots/recordings

No response

Superset version

4.0.2

Python version

3.9

Node version

16

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.

dosubot[bot] commented 1 month ago

To prevent the dashboard colors from changing on every refresh when the color scheme is set to "Superset Colors" in Superset version 4.0.2, ensure that the color_scheme and label_colors are consistently defined in the dashboard's json_metadata.

Here is an example configuration for json_metadata:

{
  "color_scheme": "supersetColors",
  "label_colors": {
    "0": "#FCC700",
    "1": "#A868B7",
    "15": "#3CCCCB",
    "30": "#A38F79",
    "45": "#8FD3E4",
    "age": "#1FA8C9",
    "Yes,": "#1FA8C9",
    "Female": "#454E7C",
    "Prefer": "#5AC189",
    "No,": "#FF7F44",
    "Male": "#666666",
    "Prefer not to say": "#E04355",
    "Ph.D.": "#FCC700",
    "associate's degree": "#A868B7",
    "bachelor's degree": "#3CCCCB",
    "high school diploma or equivalent (GED)": "#A38F79",
    "master's degree (non-professional)": "#8FD3E4",
    "no high school (secondary school)": "#A1A6BD",
    "professional degree (MBA, MD, JD, etc.)": "#ACE1C4",
    "some college credit, no degree": "#FEC0A1",
    "some high school": "#B2B2B2",
    "trade, technical, or vocational training": "#EFA1AA",
    "No, not an ethnic minority": "#1FA8C9",
    "Yes, an ethnic minority": "#454E7C",
    "<NULL>": "#5AC189",
    "Yes": "#FF7F44",
    "No": "#666666",
    "last_yr_income": "#E04355",
    "More": "#A1A6BD",
    "Less": "#ACE1C4",
    "I": "#FEC0A1",
    "expected_earn": "#B2B2B2",
    "Yes: Willing To": "#EFA1AA",
    "No: Not Willing to": "#FDE380",
    "No Answer": "#D3B3DA",
    "In an Office (with Other Developers)": "#9EE5E5",
    "No Preference": "#D1C6BC",
    "From Home": "#1FA8C9"
  }
}

Ensure this configuration is saved and not overwritten on each refresh. If the colors are still changing, check for any scripts or settings that might dynamically alter these values on refresh.

Additionally, you can use the updateDashboardLabelsColor function to ensure the color scheme and label colors are correctly applied and synchronized. This function updates the dashboard metadata with the correct color settings and ensures the color scheme is applied consistently ^[1]^[2]^[3].

To continue talking to Dosu, mention @dosu.

gladwincogoport commented 1 month ago

@dosu my labels are dynamic in nature. I'm unable to define the entire list of labels

dosubot[bot] commented 1 month ago

To ensure the color scheme remains consistent in Superset version 4.0.2 despite having dynamic labels, you can use the ColorSchemeControl component and the updateDashboardLabelsColor function. These tools help manage and apply color schemes effectively, even with dynamic labels.

Using `ColorSchemeControl`

Here's an example of how to use the ColorSchemeControl component:

import React from 'react';
import { ColorSchemeControl } from 'src/explore/components/controls/ColorSchemeControl';

const colorSchemeProps = {
  hasCustomLabelsColor: true,
  dashboardId: 1, // Your dashboard ID
  label: 'Color scheme',
  name: 'color_scheme',
  onChange: (value: string) => {
    console.log('Color scheme changed to:', value);
  },
  value: 'supersetColors',
  clearable: true,
  defaultScheme: 'SUPERSET_DEFAULT',
  choices: [
    ['supersetColors', 'Superset Colors'],
    // Add more color scheme choices if needed
  ],
  schemes: {
    supersetColors: { id: 'supersetColors', label: 'Superset Colors', colors: ['#FF5733', '#33FF57', '#3357FF'] },
    // Define your color schemes here
  },
  isLinear: false,
};

const MyDashboard = () => (
  <div>
    <ColorSchemeControl {...colorSchemeProps} />
  </div>
);

export default MyDashboard;

Using `updateDashboardLabelsColor`

To ensure the color scheme and labels color map are synchronized, use the updateDashboardLabelsColor function. This function updates the dashboard metadata with the correct color scheme and applies the colors to the labels:

import { updateDashboardLabelsColor } from 'src/dashboard/actions/dashboardState';

const syncColorScheme = async (dispatch, getState) => {
  const {
    dashboardInfo: { id, metadata },
  } = getState();
  const categoricalSchemes = getCategoricalSchemeRegistry();
  const colorScheme = metadata?.color_scheme;
  const colorSchemeRegistry = categoricalSchemes.get(
    metadata?.color_scheme,
    true,
  );
  const defaultScheme = categoricalSchemes.defaultKey;
  const fallbackScheme = defaultScheme?.toString() || 'supersetColors';
  const colorSchemeDomain = metadata?.color_scheme_domain || [];

  try {
    const updatedMetadata = { ...metadata };
    let updatedScheme = metadata?.color_scheme;

    if (colorScheme && !colorSchemeRegistry) {
      updatedScheme = fallbackScheme;
      updatedMetadata.color_scheme = updatedScheme;
      updatedMetadata.color_scheme_domain = getColorSchemeDomain(colorScheme);

      dispatch(setColorScheme(updatedScheme));
      applyColors(updatedMetadata, true);
    }

    const isMapSynced = isLabelsColorMapSynced(metadata);
    if (!isMapSynced) {
      applyColors(updatedMetadata, true);
      updatedMetadata.shared_label_colors = getLabelsColorMapEntries();
    }

    await updateDashboardMetadata(id, updatedMetadata, dispatch);
  } catch (error) {
    console.error('Error updating dashboard labels color:', error);
  }
};

By following these steps and utilizing the provided functions, you can ensure that the color scheme remains consistent across your Superset dashboard, even with dynamic labels ^[1]^[2].

To continue talking to Dosu, mention @dosu.

rusackas commented 1 month ago

CC @geido

geido commented 4 days ago

@gladwincogoport Do you have a video showing the issue? it would help. Thank you

apache / superset