refactor color scheme

ValtechMobility · Aug 7, 2023 · 2bb013e · 2bb013e
1 parent 0981ee9
commit 2bb013e
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 35 deletions.
diff --git a/superset-frontend/plugins/plugin-country-map-pie-chart/src/PluginCountryMapPieChart.tsx b/superset-frontend/plugins/plugin-country-map-pie-chart/src/PluginCountryMapPieChart.tsx
@@ -45,7 +45,7 @@ const Styles = styled.div<PluginCountryMapPieChartStylesProps>`
 
   .pie-chart {
     opacity: 1;
-    box-shadow: -4px 5px 5px 0px black;
+    box-shadow: -4px 5px 5px 0 black;
   }
 
   .tooltip {
@@ -83,44 +83,16 @@ const Styles = styled.div<PluginCountryMapPieChartStylesProps>`
 export default function PluginCountryMapPieChart(
   props: PluginCountryMapPieChartProps,
 ) {
-  const { data, height, width, metric } = props;
+  const { data, height, width, metric, dashboardColors } = props;
   const selectedCountries = getAllSelectedCountries();
   let scale;
   let center;
   let radius;
 
   const color = d3
     .scaleOrdinal()
-    .domain([
-      'Success',
-      'Up-To-Date',
-      'In Update Process',
-      'Disenrolled',
-      'Error in Front of Customer',
-      'UpdateJob Not Requested',
-      'Failed - Waiting for Retry',
-      'DL Preparation',
-      'DL Started',
-      'DL Session Completed',
-      'Installation Process',
-      'Campaign Not Feasible',
-      'Failed',
-    ])
-    .range([
-      '#008833',
-      '#ACA2F1',
-      '#7E24FF',
-      '#FAA000',
-      '#F80556',
-      '#FFC55B',
-      '#FF8E86',
-      '#2E218E',
-      '#442EE0',
-      '#00FA9A',
-      '#9E00FF',
-      '#FFF049',
-      '#EE4C40',
-    ]);
+    .domain(Object.keys(dashboardColors))
+    .range(Object.values(dashboardColors));
 
   // canvas of the world map
   const svg = d3

diff --git a/superset-frontend/plugins/plugin-country-map-pie-chart/src/plugin/controlPanel.ts b/superset-frontend/plugins/plugin-country-map-pie-chart/src/plugin/controlPanel.ts
@@ -130,6 +130,7 @@ const config: ControlPanelConfig = {
       label: t('Hello Controls!'),
       expanded: true,
       controlSetRows: [
+        ['color_scheme'],
         [
           {
             name: 'header_text',

diff --git a/superset-frontend/plugins/plugin-country-map-pie-chart/src/plugin/transformProps.ts b/superset-frontend/plugins/plugin-country-map-pie-chart/src/plugin/transformProps.ts
@@ -16,7 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ChartProps, QueryFormData } from '@superset-ui/core';
+import {
+  CategoricalColorNamespace,
+  ChartProps,
+  QueryFormData,
+} from '@superset-ui/core';
 import { UpdateData } from '../types';
 
 export default function transformProps(chartProps: ChartProps<QueryFormData>) {
@@ -50,14 +54,19 @@ export default function transformProps(chartProps: ChartProps<QueryFormData>) {
    * be seen until restarting the development server.
    */
   const { width, height, formData, queriesData } = chartProps;
-  const { boldText, headerFontSize, headerText, metric } = formData;
+  const { boldText, headerFontSize, headerText, metric, colorScheme } =
+    formData;
   const data = Array.from(queriesData[0].data) as UpdateData[];
 
+  const colorFn = CategoricalColorNamespace.getScale(colorScheme as string);
+  const dashboardColors = colorFn.parentForcedColors;
+
   return {
     width,
     height,
     data,
     metric,
+    dashboardColors,
     // and now your control data, manipulated as needed, and passed through as props!
     boldText,
     headerFontSize,

diff --git a/superset-frontend/plugins/plugin-country-map-pie-chart/src/types.ts b/superset-frontend/plugins/plugin-country-map-pie-chart/src/types.ts
@@ -17,7 +17,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { QueryFormData, QueryFormMetric, supersetTheme } from '@superset-ui/core';
+import {
+  QueryFormData,
+  QueryFormMetric,
+  supersetTheme,
+} from '@superset-ui/core';
 
 export class Point {
   constructor() {
@@ -52,6 +56,7 @@ export type PluginCountryMapPieChartProps =
     PluginCountryMapPieChartCustomizeProps & {
       data;
       metric: QueryFormMetric;
+      colorScheme: string;
       // add typing here for the props you pass in from transformProps.ts!
     };