From c3dc6ababb016d755114abd33973d3d01f7e715d Mon Sep 17 00:00:00 2001 From: stephenLYZ <750188453@qq.com> Date: Thu, 28 Apr 2022 20:38:11 +0800 Subject: [PATCH 1/6] feat(world-map): support color by metric or country column --- .../components/RadioButtonControl.tsx | 6 +++- .../src/WorldMap.js | 34 ++++++++++++++----- .../src/controlPanel.ts | 30 +++++++++++++--- .../src/transformProps.js | 14 ++++++-- .../src/utils.ts | 23 +++++++++++++ 5 files changed, 92 insertions(+), 15 deletions(-) create mode 100644 superset-frontend/plugins/legacy-plugin-chart-world-map/src/utils.ts diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/RadioButtonControl.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/RadioButtonControl.tsx index b613fed93aa87..b85534d672a96 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/RadioButtonControl.tsx +++ b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/RadioButtonControl.tsx @@ -53,8 +53,12 @@ export default function RadioButtonControl({ '.btn:focus': { outline: 'none', }, + '.control-label': { + color: theme.colors.grayscale.base, + marginBottom: theme.gridUnit, + }, '.control-label + .btn-group': { - marginTop: 1, + marginTop: theme.gridUnit * 0.25, }, '.btn-group .btn-default': { color: theme.colors.grayscale.dark1, diff --git a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js index c7253e10d0e68..0279f7cd6fc33 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js +++ b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js @@ -23,8 +23,10 @@ import { extent as d3Extent } from 'd3-array'; import { getNumberFormatter, getSequentialSchemeRegistry, + CategoricalColorNamespace, } from '@superset-ui/core'; import Datamap from 'datamaps/dist/datamaps.world.min'; +import { ColorBy } from './utils'; const propTypes = { data: PropTypes.arrayOf( @@ -55,6 +57,9 @@ function WorldMap(element, props) { showBubbles, linearColorScheme, color, + colorBy, + colorScheme, + sliceId, } = props; const div = d3.select(element); div.classed('superset-legacy-chart-world-map', true); @@ -69,15 +74,28 @@ function WorldMap(element, props) { .domain([extRadius[0], extRadius[1]]) .range([1, maxBubbleSize]); - const colorScale = getSequentialSchemeRegistry() - .get(linearColorScheme) - .createLinearScale(d3Extent(filteredData, d => d.m1)); + let processedData; + let colorScale; + if (colorBy === ColorBy.country) { + colorScale = CategoricalColorNamespace.getScale(colorScheme); + processedData = filteredData.map(d => { + return { + ...d, + radius: radiusScale(Math.sqrt(d.m2)), + fillColor: colorScale(d.name, sliceId), + }; + }); + } else { + colorScale = getSequentialSchemeRegistry() + .get(linearColorScheme) + .createLinearScale(d3Extent(filteredData, d => d.m1)); - const processedData = filteredData.map(d => ({ - ...d, - radius: radiusScale(Math.sqrt(d.m2)), - fillColor: colorScale(d.m1), - })); + processedData = filteredData.map(d => ({ + ...d, + radius: radiusScale(Math.sqrt(d.m2)), + fillColor: colorScale(d.m1), + })); + } const mapData = {}; processedData.forEach(d => { diff --git a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/controlPanel.ts b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/controlPanel.ts index ec8aafc7b872a..276662fbd18bf 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/controlPanel.ts +++ b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/controlPanel.ts @@ -22,6 +22,7 @@ import { formatSelectOptions, sections, } from '@superset-ui/chart-controls'; +import { ColorBy } from './utils'; const config: ControlPanelConfig = { controlPanelSections: [ @@ -106,7 +107,25 @@ const config: ControlPanelConfig = { }, ], ['color_picker'], + [ + { + name: 'color_by', + config: { + type: 'RadioButtonControl', + label: t('Color by'), + default: ColorBy.metric, + options: [ + [ColorBy.metric, t('metric')], + [ColorBy.country, t('country')], + ], + description: t( + 'Whether to define a color by metric or country column', + ), + }, + }, + ], ['linear_color_scheme'], + ['color_scheme'], ], }, ], @@ -115,10 +134,6 @@ const config: ControlPanelConfig = { label: t('Country Column'), description: t('3 letter code of the country'), }, - metric: { - label: t('Metric for Color'), - description: t('Metric that defines the color of the country'), - }, secondary_metric: { label: t('Bubble Size'), description: t('Metric that defines the size of the bubble'), @@ -128,6 +143,13 @@ const config: ControlPanelConfig = { }, linear_color_scheme: { label: t('Country Color Scheme'), + visibility: ({ controls }) => + Boolean(controls?.color_by.value === ColorBy.metric), + }, + color_scheme: { + label: t('Country Color Scheme'), + visibility: ({ controls }) => + Boolean(controls?.color_by.value === ColorBy.country), }, }, }; diff --git a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/transformProps.js b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/transformProps.js index 464dd53afa4fc..fd5f109c0d40e 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/transformProps.js +++ b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/transformProps.js @@ -20,8 +20,15 @@ import { rgb } from 'd3-color'; export default function transformProps(chartProps) { const { width, height, formData, queriesData } = chartProps; - const { maxBubbleSize, showBubbles, linearColorScheme, colorPicker } = - formData; + const { + maxBubbleSize, + showBubbles, + linearColorScheme, + colorPicker, + colorBy, + colorScheme, + sliceId, + } = formData; const { r, g, b } = colorPicker; return { @@ -32,5 +39,8 @@ export default function transformProps(chartProps) { showBubbles, linearColorScheme, color: rgb(r, g, b).hex(), + colorBy, + colorScheme, + sliceId, }; } diff --git a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/utils.ts b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/utils.ts new file mode 100644 index 0000000000000..b558b15b97fe5 --- /dev/null +++ b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/utils.ts @@ -0,0 +1,23 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +export enum ColorBy { + metric = 'metric', + country = 'country', +} From b608026db92609e00a0e88f5cdb10f43b01ba441 Mon Sep 17 00:00:00 2001 From: stephenLYZ <750188453@qq.com> Date: Thu, 28 Apr 2022 22:28:55 +0800 Subject: [PATCH 2/6] fix lint --- .../legacy-plugin-chart-world-map/src/WorldMap.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js index 0279f7cd6fc33..d66dadc46beea 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js +++ b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js @@ -78,13 +78,12 @@ function WorldMap(element, props) { let colorScale; if (colorBy === ColorBy.country) { colorScale = CategoricalColorNamespace.getScale(colorScheme); - processedData = filteredData.map(d => { - return { - ...d, - radius: radiusScale(Math.sqrt(d.m2)), - fillColor: colorScale(d.name, sliceId), - }; - }); + + processedData = filteredData.map(d => ({ + ...d, + radius: radiusScale(Math.sqrt(d.m2)), + fillColor: colorScale(d.name, sliceId), + })); } else { colorScale = getSequentialSchemeRegistry() .get(linearColorScheme) From 2f9a59cde424582de7d02bae530fc25e5aed96ce Mon Sep 17 00:00:00 2001 From: Stephen Liu <750188453@qq.com> Date: Fri, 29 Apr 2022 17:51:46 +0800 Subject: [PATCH 3/6] Update superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/RadioButtonControl.tsx Co-authored-by: Evan Rusackas --- .../src/shared-controls/components/RadioButtonControl.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/RadioButtonControl.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/RadioButtonControl.tsx index b85534d672a96..45cfea819d6d2 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/RadioButtonControl.tsx +++ b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/RadioButtonControl.tsx @@ -58,7 +58,7 @@ export default function RadioButtonControl({ marginBottom: theme.gridUnit, }, '.control-label + .btn-group': { - marginTop: theme.gridUnit * 0.25, + marginTop: 1px, }, '.btn-group .btn-default': { color: theme.colors.grayscale.dark1, From 07fc58af87c64b7d9a4532a0c6dc6276f752db41 Mon Sep 17 00:00:00 2001 From: Stephen Liu <750188453@qq.com> Date: Fri, 29 Apr 2022 17:52:01 +0800 Subject: [PATCH 4/6] Update superset-frontend/plugins/legacy-plugin-chart-world-map/src/controlPanel.ts Co-authored-by: Evan Rusackas --- .../plugins/legacy-plugin-chart-world-map/src/controlPanel.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/controlPanel.ts b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/controlPanel.ts index 276662fbd18bf..8ff5e1032c1fb 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/controlPanel.ts +++ b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/controlPanel.ts @@ -115,8 +115,8 @@ const config: ControlPanelConfig = { label: t('Color by'), default: ColorBy.metric, options: [ - [ColorBy.metric, t('metric')], - [ColorBy.country, t('country')], + [ColorBy.metric, t('Metric')], + [ColorBy.country, t('Country')], ], description: t( 'Whether to define a color by metric or country column', From f01439cc4da88b869467c81615759ee3d5f23c6d Mon Sep 17 00:00:00 2001 From: Stephen Liu <750188453@qq.com> Date: Fri, 29 Apr 2022 17:52:09 +0800 Subject: [PATCH 5/6] Update superset-frontend/plugins/legacy-plugin-chart-world-map/src/controlPanel.ts Co-authored-by: Evan Rusackas --- .../plugins/legacy-plugin-chart-world-map/src/controlPanel.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/controlPanel.ts b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/controlPanel.ts index 8ff5e1032c1fb..93fc1ab1c9c02 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/controlPanel.ts +++ b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/controlPanel.ts @@ -119,7 +119,7 @@ const config: ControlPanelConfig = { [ColorBy.country, t('Country')], ], description: t( - 'Whether to define a color by metric or country column', + 'Choose whether a country should be shaded by the metric, or assigned a color based on a categorical color palette', ), }, }, From efa959d97d47fd5d925c7c741eb5db2b333758af Mon Sep 17 00:00:00 2001 From: stephenLYZ <750188453@qq.com> Date: Fri, 29 Apr 2022 18:10:36 +0800 Subject: [PATCH 6/6] fix lint --- .../src/shared-controls/components/RadioButtonControl.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/RadioButtonControl.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/RadioButtonControl.tsx index 45cfea819d6d2..497e331133470 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/RadioButtonControl.tsx +++ b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/RadioButtonControl.tsx @@ -58,7 +58,7 @@ export default function RadioButtonControl({ marginBottom: theme.gridUnit, }, '.control-label + .btn-group': { - marginTop: 1px, + marginTop: '1px', }, '.btn-group .btn-default': { color: theme.colors.grayscale.dark1,