Superset how to support custom add Color Scheme?

[wuchunfu]

Well, I am having a problem now, I want to add a Color Scheme to Chart Options, but I have tried a lot of methods that can't solve this problem, including modifying ${SUPERSET_HOME}/static/assets/src/modules/colors.js, I tried to add the following code to it

export const newColorScheme = [
  '#a4f2b8',
  '#abc8fa',
];

export const ALL_COLOR_SCHEMES = {
  bnbColors,
  d3Category10,
  d3Category20,
  d3Category20b,
  d3Category20c,
  googleCategory10c,
  googleCategory20c,
  lyftColors,
  newColorScheme,
};

This is a screenshot of the problem I encountered:

Superset version
incubator-superset-0.26.3

The result I want is that I can choose my custom Color in Color Scheme.

If you want to reproduce, you can click Charts in the menu bar, then select a chart, click Style, you can see Color Scheme, you can choose a color scheme, as shown below:

[mistercrunch]

Your code change seems right, but did you properly rebuild the js bundles and did you setup your dev environment properly? Read the CONTRIBUTING.md file for more information on setting up your dev env.

[dominijk]

@mistercrunch How do you properly rebuild the js bundles?

[wuchunfu]

You can rebuild the js package by running the command.

cd ${SUPERSET_HOME}/assets/
./js_build.sh
npm run dev

[mistercrunch]

Instructions are here https://github.com/apache/incubator-superset/blob/master/CONTRIBUTING.md

[ilyakam]

The 2019-01-30 version of CONTRIBUTING.md does not mention anything about adding custom color schemes. Checked by searching for the keywords "color" and "scheme" on the historic version of that file.

The steps outlined in the OP seem to no longer be applicable following this change: a7b52da. Moreover, no Markdown files were changed in #6234.

So, what's the correct way to add a custom color scheme to Superset now?

[breizh24]

@ilyakam To add custom schemes, in case of a "Categorical Scheme" you need to import the CategoricalScheme class from the module "@superset-ui/color", here is an example:

import { CategoricalScheme } from '@superset-ui/color';

const schemes = [
  {
    id: 'testColors',
    label: 'Test Colors',
    colors: ['#2d51a3', '#7d7f82', '#2061e0', '000000'],
  },
].map(s => new CategoricalScheme(s));

export default schemes;

then you need to import this into /superset/assets/src/setup/setupColors.js and add it to the already existing schemes, you should end up with something like this:

import testColors from '../myColors/myColorSchemes';

export default function setupColors() {
  // Register color schemes
  const categoricalSchemeRegistry = getCategoricalSchemeRegistry();
  [airbnb, categoricalD3, google, lyft, testColors].forEach((group) => {
    group.forEach((scheme) => {
      categoricalSchemeRegistry.registerValue(scheme.id, scheme);
    });
  });
  categoricalSchemeRegistry.setDefaultKey('bnbColors');

[toilv]

Could someone take a couple of minutes to guide us how to do that ?
What requirements ?
How can we customize in production enviroment with WSGI HTTP Server?

[mhconradt]

It seems most of this advice has become outdated. How can I add a custom color scheme using the Docker workflow in 2021?

[junlincc]

@mhconradt #12210 this is available in v1.0, let us know if that helps

[Vadi]

The 2019-01-30 version of CONTRIBUTING.md does not mention anything about adding custom color schemes. Checked by searching for the keywords "color" and "scheme" on the historic version of that file.

The steps outlined in the OP seem to no longer be applicable following this change: a7b52da. Moreover, no Markdown files were changed in #6234.

So, what's the correct way to add a custom color scheme to Superset now?

Your code change seems right, but did you properly rebuild the js bundles and did you setup your dev environment properly? Read the CONTRIBUTING.md file for more information on setting up your dev env.

I don

You can rebuild the js package by running the command.

cd ${SUPERSET_HOME}/assets/
./js_build.sh
npm run dev

This was not working, I ended up deleting docker volumes to make it work.