Dlcm/map refactoring

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 } = 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
@@ -139,7 +111,7 @@ export default function PluginCountryMapPieChart(
     radius = 75;
   } else {
     scale = 1150;
-    center = [5, 60];
+    center = [10, 60];
     radius = 25;
   }
 
@@ -280,7 +252,7 @@ export default function PluginCountryMapPieChart(
   function drawPieChartForCountry(pieChartSlices, maxOperations: number, country: Selection<BaseType, unknown, HTMLElement, any>, countryIso, projection, div: Selection<BaseType, unknown, HTMLElement, any>) {
     let totalOperationCount = 0;
     pieChartSlices.forEach(function (x: UpdateData) {
-      totalOperationCount += x['SUM(count_vin)'];
+      totalOperationCount += x[metric.label];
     });
 
     let scaledRadius;
@@ -306,7 +278,7 @@ export default function PluginCountryMapPieChart(
           return b.pie_detail.localeCompare(a.pie_detail);
         })
         .value(function (d) {
-          return d['SUM(count_vin)'];
+          return d[metric.label];
         })(pieChartSlices);
 
       const pieChart = svg
@@ -338,10 +310,10 @@ export default function PluginCountryMapPieChart(
           const { y } = svg;
           d3.select(this).attr('opacity', '100');
           div
-            .html(`${ d.data.pie_detail }: ${ d.data['SUM(count_vin)'] }`)
+            .html(`${ d.data.pie_detail }: ${ d.data[metric.label] }`)
             .style('opacity', 1)
-            .style('left', `${ d3.event.pageX - x + 5}px`)
-            .style('top', `${ d3.event.pageY - y - 5}px`);
+            .style('left', `${ d3.event.pageX - x + 20}px`)
+            .style('top', `${ d3.event.pageY - y - 20}px`);
         })
         .on('mouseout', function () {
           div.html('').style('opacity', 0);
@@ -379,7 +351,7 @@ export default function PluginCountryMapPieChart(
       });
       let totalOperationCount = 0;
       entries.forEach(function (x: UpdateData) {
-        totalOperationCount += x['SUM(count_vin)'];
+        totalOperationCount += x[metric.label];
       });
 
       if (totalOperationCount > maxOperations) {

superset-frontend/plugins/plugin-country-map-pie-chart/src/plugin/controlPanel.ts

@@ -16,9 +16,10 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { t, validateNonEmpty } from '@superset-ui/core';
+import { t } from '@superset-ui/core';
 import {
   ControlPanelConfig,
+  getStandardizedControls,
   sections,
   sharedControls,
 } from '@superset-ui/chart-controls';
@@ -115,17 +116,7 @@ const config: ControlPanelConfig = {
             },
           },
         ],
-        [
-          {
-            name: 'metrics',
-            config: {
-              ...sharedControls.metrics,
-              // it's possible to add validators to controls if
-              // certain selections/types need to be enforced
-              validators: [validateNonEmpty],
-            },
-          },
-        ],
+        ['metric'],
         ['adhoc_filters'],
         [
           {
@@ -139,6 +130,7 @@ const config: ControlPanelConfig = {
       label: t('Hello Controls!'),
       expanded: true,
       controlSetRows: [
+        ['color_scheme'],
         [
           {
             name: 'header_text',
@@ -189,6 +181,10 @@ const config: ControlPanelConfig = {
       ],
     },
   ],
+  formDataOverrides: formData => ({
+    ...formData,
+    metric: getStandardizedControls().shiftMetric(),
+  }),
 };
 
 export default config;

superset-frontend/plugins/plugin-country-map-pie-chart/src/plugin/transformProps.ts

@@ -16,10 +16,14 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ChartProps } from '@superset-ui/core';
+import {
+  CategoricalColorNamespace,
+  ChartProps,
+  QueryFormData,
+} from '@superset-ui/core';
 import { UpdateData } from '../types';
 
-export default function transformProps(chartProps: ChartProps) {
+export default function transformProps(chartProps: ChartProps<QueryFormData>) {
   /**
    * This function is called after a successful response has been
    * received from the chart data endpoint, and is used to transform
@@ -50,13 +54,19 @@ export default function transformProps(chartProps: ChartProps) {
    * be seen until restarting the development server.
    */
   const { width, height, formData, queriesData } = chartProps;
-  const { boldText, headerFontSize, headerText } = 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,

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, supersetTheme } from '@superset-ui/core';
+import {
+  QueryFormData,
+  QueryFormMetric,
+  supersetTheme,
+} from '@superset-ui/core';
 
 export class Point {
   constructor() {
@@ -51,6 +55,8 @@ export type PluginCountryMapPieChartProps =
   PluginCountryMapPieChartStylesProps &
     PluginCountryMapPieChartCustomizeProps & {
       data;
+      metric: QueryFormMetric;
+      colorScheme: string;
       // add typing here for the props you pass in from transformProps.ts!
     };