feat: Custom color schemes support (#12210)

* feat: setupColors.ts support
docs: add FAQ to custom color schemes

* fix: delete mistake lines

* fix: CR note

* feat: support for SETUP_EXTRA

* fix: remove after cr

* fix: CR note

* fix: after CR migrate from SETUP_EXTRA into 2 color scheme array

* fix: typing issues

* fix: python generic typing

* chore: add neat code examples

superset-frontend/src/preamble.ts

@@ -20,6 +20,7 @@ import { setConfig as setHotLoaderConfig } from 'react-hot-loader';
 import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only';
 import moment from 'moment';
 import { configure } from '@superset-ui/core';
+import ColorScheme from '@superset-ui/core/lib/color/ColorScheme';
 import setupClient from './setup/setupClient';
 import setupColors from './setup/setupColors';
 import setupFormatters from './setup/setupFormatters';
@@ -28,10 +29,12 @@ if (process.env.WEBPACK_MODE === 'development') {
   setHotLoaderConfig({ logLevel: 'debug', trackTailUpdates: false });
 }
 
+let bootstrapData: any;
 // Configure translation
 if (typeof window !== 'undefined') {
   const root = document.getElementById('app');
-  const bootstrapData = root
+
+  bootstrapData = root
     ? JSON.parse(root.getAttribute('data-bootstrap') || '{}')
     : {};
   if (bootstrapData.common && bootstrapData.common.language_pack) {
@@ -49,7 +52,25 @@ if (typeof window !== 'undefined') {
 setupClient();
 
 // Setup color palettes
-setupColors();
+let extraCategoricalColorSchemes: ColorScheme[] = [];
+let extraSequentialColorSchemes: ColorScheme[] = [];
+
+if (
+  bootstrapData.common &&
+  bootstrapData.common.extra_categorical_color_schemes
+) {
+  extraCategoricalColorSchemes =
+    bootstrapData.common.extra_categorical_color_schemes;
+}
+if (
+  bootstrapData.common &&
+  bootstrapData.common.extra_sequential_color_schemes
+) {
+  extraSequentialColorSchemes =
+    bootstrapData.common.extra_sequential_color_schemes;
+}
+
+setupColors(extraCategoricalColorSchemes, extraSequentialColorSchemes);
 
 // Setup number formatters
 setupFormatters();

superset-frontend/src/setup/setupColors.js

@@ -30,9 +30,19 @@ import {
 } from '@superset-ui/core';
 import superset from '@superset-ui/core/esm/color/colorSchemes/categorical/superset';
 
-export default function setupColors() {
+export default function setupColors(
+  extraCategoricalColorSchemas,
+  extraSequentialColorSchemes,
+) {
   // Register color schemes
   const categoricalSchemeRegistry = getCategoricalSchemeRegistry();
+
+  if (extraCategoricalColorSchemas && extraCategoricalColorSchemas.length > 0) {
+    extraCategoricalColorSchemas.forEach(scheme => {
+      categoricalSchemeRegistry.registerValue(scheme.id, scheme);
+    });
+  }
+
   [superset, airbnb, categoricalD3, echarts, google, lyft, preset].forEach(
     group => {
       group.forEach(scheme => {
@@ -43,6 +53,13 @@ export default function setupColors() {
   categoricalSchemeRegistry.setDefaultKey('supersetColors');
 
   const sequentialSchemeRegistry = getSequentialSchemeRegistry();
+
+  if (extraSequentialColorSchemes && extraSequentialColorSchemes.length > 0) {
+    extraSequentialColorSchemes.forEach(scheme => {
+      categoricalSchemeRegistry.registerValue(scheme.id, scheme);
+    });
+  }
+
   [sequentialCommon, sequentialD3].forEach(group => {
     group.forEach(scheme => {
       sequentialSchemeRegistry.registerValue(scheme.id, scheme);

superset/config.py

@@ -368,6 +368,37 @@ FEATURE_FLAGS: Dict[str, bool] = {}
 #     return feature_flags_dict
 GET_FEATURE_FLAGS_FUNC: Optional[Callable[[Dict[str, bool]], Dict[str, bool]]] = None
 
+# EXTRA_CATEGORICAL_COLOR_SCHEMES is used for adding custom categorical color schemes
+# example code for "My custom warm to hot" color scheme
+# EXTRA_CATEGORICAL_COLOR_SCHEMES =  [
+#     {
+#         "id": 'myVisualizationColors',
+#         "description": '',
+#         "label": 'My Visualization Colors',
+#         "colors":
+#          ['#006699', '#009DD9', '#5AAA46', '#44AAAA', '#DDAA77', '#7799BB', '#88AA77',
+#          '#552288', '#5AAA46', '#CC7788', '#EEDD55', '#9977BB', '#BBAA44', '#DDCCDD']
+#     }]
+#
+
+# This is merely a default
+EXTRA_CATEGORICAL_COLOR_SCHEMES: List[Dict[str, Any]] = []
+
+# EXTRA_SEQUENTIAL_COLOR_SCHEMES is used for adding custom sequential color schemes
+# EXTRA_SEQUENTIAL_COLOR_SCHEMES =  [
+#     {
+#         "id": 'warmToHot',
+#         "description": '',
+#         "isDiverging": true
+#         "label": 'My custom warm to hot',
+#         "colors":
+#          ['#552288', '#5AAA46', '#CC7788', '#EEDD55', '#9977BB', '#BBAA44', '#DDCCDD',
+#          '#006699', '#009DD9', '#5AAA46', '#44AAAA', '#DDAA77', '#7799BB', '#88AA77']
+#     }]
+
+# This is merely a default
+EXTRA_SEQUENTIAL_COLOR_SCHEMES: List[Dict[str, Any]] = []
+
 # ---------------------------------------------------
 # Thumbnail config (behind feature flag)
 # ---------------------------------------------------
@@ -545,6 +576,7 @@ MAX_TABLE_NAMES = 3000
 SQLLAB_SAVE_WARNING_MESSAGE = None
 SQLLAB_SCHEDULE_WARNING_MESSAGE = None
 
+
 # Default celery config is to use SQLA as a broker, in a production setting
 # you'll want to use a proper broker as specified here:
 # http://docs.celeryproject.org/en/latest/getting-started/brokers/index.html
@@ -997,7 +1029,6 @@ SIP_15_TOAST_MESSAGE = (
     'class="alert-link">here</a>.'
 )
 
-
 # SQLA table mutator, every time we fetch the metadata for a certain table
 # (superset.connectors.sqla.models.SqlaTable), we call this hook
 # to allow mutating the object with this callback.
@@ -1049,7 +1080,6 @@ elif importlib.util.find_spec("superset_config") and not is_test():
         logger.exception("Found but failed to import local superset_config")
         raise
 
-
 # It's possible to add a dataset health check logic which is specific to your system.
 # It will get executed each time when user open a chart's explore view.
 DATASET_HEALTH_CHECK = None

superset/views/base.py

@@ -318,6 +318,8 @@ def common_bootstrap_payload() -> Dict[str, Any]:
         "locale": locale,
         "language_pack": get_language_pack(locale),
         "feature_flags": get_feature_flags(),
+        "extra_sequential_color_schemes": conf["EXTRA_SEQUENTIAL_COLOR_SCHEMES"],
+        "extra_categorical_color_schemes": conf["EXTRA_CATEGORICAL_COLOR_SCHEMES"],
         "menu_data": menu_data(),
     }