mirror of
https://github.com/apache/superset.git
synced 2024-09-06 13:57:40 -04:00
feat(world-map): support color by metric or country column (#19881)
* feat(world-map): support color by metric or country column * fix lint * Update superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/RadioButtonControl.tsx Co-authored-by: Evan Rusackas <evan@preset.io> * Update superset-frontend/plugins/legacy-plugin-chart-world-map/src/controlPanel.ts Co-authored-by: Evan Rusackas <evan@preset.io> * Update superset-frontend/plugins/legacy-plugin-chart-world-map/src/controlPanel.ts Co-authored-by: Evan Rusackas <evan@preset.io> * fix lint Co-authored-by: Evan Rusackas <evan@preset.io>
This commit is contained in:
parent
0e38c686c6
commit
766f737728
@ -53,8 +53,12 @@ export default function RadioButtonControl({
|
|||||||
'.btn:focus': {
|
'.btn:focus': {
|
||||||
outline: 'none',
|
outline: 'none',
|
||||||
},
|
},
|
||||||
|
'.control-label': {
|
||||||
|
color: theme.colors.grayscale.base,
|
||||||
|
marginBottom: theme.gridUnit,
|
||||||
|
},
|
||||||
'.control-label + .btn-group': {
|
'.control-label + .btn-group': {
|
||||||
marginTop: 1,
|
marginTop: '1px',
|
||||||
},
|
},
|
||||||
'.btn-group .btn-default': {
|
'.btn-group .btn-default': {
|
||||||
color: theme.colors.grayscale.dark1,
|
color: theme.colors.grayscale.dark1,
|
||||||
|
@ -23,8 +23,10 @@ import { extent as d3Extent } from 'd3-array';
|
|||||||
import {
|
import {
|
||||||
getNumberFormatter,
|
getNumberFormatter,
|
||||||
getSequentialSchemeRegistry,
|
getSequentialSchemeRegistry,
|
||||||
|
CategoricalColorNamespace,
|
||||||
} from '@superset-ui/core';
|
} from '@superset-ui/core';
|
||||||
import Datamap from 'datamaps/dist/datamaps.world.min';
|
import Datamap from 'datamaps/dist/datamaps.world.min';
|
||||||
|
import { ColorBy } from './utils';
|
||||||
|
|
||||||
const propTypes = {
|
const propTypes = {
|
||||||
data: PropTypes.arrayOf(
|
data: PropTypes.arrayOf(
|
||||||
@ -55,6 +57,9 @@ function WorldMap(element, props) {
|
|||||||
showBubbles,
|
showBubbles,
|
||||||
linearColorScheme,
|
linearColorScheme,
|
||||||
color,
|
color,
|
||||||
|
colorBy,
|
||||||
|
colorScheme,
|
||||||
|
sliceId,
|
||||||
theme,
|
theme,
|
||||||
} = props;
|
} = props;
|
||||||
const div = d3.select(element);
|
const div = d3.select(element);
|
||||||
@ -70,15 +75,27 @@ function WorldMap(element, props) {
|
|||||||
.domain([extRadius[0], extRadius[1]])
|
.domain([extRadius[0], extRadius[1]])
|
||||||
.range([1, maxBubbleSize]);
|
.range([1, maxBubbleSize]);
|
||||||
|
|
||||||
const colorScale = getSequentialSchemeRegistry()
|
let processedData;
|
||||||
|
let colorScale;
|
||||||
|
if (colorBy === ColorBy.country) {
|
||||||
|
colorScale = CategoricalColorNamespace.getScale(colorScheme);
|
||||||
|
|
||||||
|
processedData = filteredData.map(d => ({
|
||||||
|
...d,
|
||||||
|
radius: radiusScale(Math.sqrt(d.m2)),
|
||||||
|
fillColor: colorScale(d.name, sliceId),
|
||||||
|
}));
|
||||||
|
} else {
|
||||||
|
colorScale = getSequentialSchemeRegistry()
|
||||||
.get(linearColorScheme)
|
.get(linearColorScheme)
|
||||||
.createLinearScale(d3Extent(filteredData, d => d.m1));
|
.createLinearScale(d3Extent(filteredData, d => d.m1));
|
||||||
|
|
||||||
const processedData = filteredData.map(d => ({
|
processedData = filteredData.map(d => ({
|
||||||
...d,
|
...d,
|
||||||
radius: radiusScale(Math.sqrt(d.m2)),
|
radius: radiusScale(Math.sqrt(d.m2)),
|
||||||
fillColor: colorScale(d.m1),
|
fillColor: colorScale(d.m1),
|
||||||
}));
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
const mapData = {};
|
const mapData = {};
|
||||||
processedData.forEach(d => {
|
processedData.forEach(d => {
|
||||||
|
@ -22,6 +22,7 @@ import {
|
|||||||
formatSelectOptions,
|
formatSelectOptions,
|
||||||
sections,
|
sections,
|
||||||
} from '@superset-ui/chart-controls';
|
} from '@superset-ui/chart-controls';
|
||||||
|
import { ColorBy } from './utils';
|
||||||
|
|
||||||
const config: ControlPanelConfig = {
|
const config: ControlPanelConfig = {
|
||||||
controlPanelSections: [
|
controlPanelSections: [
|
||||||
@ -106,7 +107,25 @@ const config: ControlPanelConfig = {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
['color_picker'],
|
['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(
|
||||||
|
'Choose whether a country should be shaded by the metric, or assigned a color based on a categorical color palette',
|
||||||
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
['linear_color_scheme'],
|
['linear_color_scheme'],
|
||||||
|
['color_scheme'],
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
@ -115,10 +134,6 @@ const config: ControlPanelConfig = {
|
|||||||
label: t('Country Column'),
|
label: t('Country Column'),
|
||||||
description: t('3 letter code of the country'),
|
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: {
|
secondary_metric: {
|
||||||
label: t('Bubble Size'),
|
label: t('Bubble Size'),
|
||||||
description: t('Metric that defines the size of the bubble'),
|
description: t('Metric that defines the size of the bubble'),
|
||||||
@ -128,6 +143,13 @@ const config: ControlPanelConfig = {
|
|||||||
},
|
},
|
||||||
linear_color_scheme: {
|
linear_color_scheme: {
|
||||||
label: t('Country 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),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -20,8 +20,15 @@ import { rgb } from 'd3-color';
|
|||||||
|
|
||||||
export default function transformProps(chartProps) {
|
export default function transformProps(chartProps) {
|
||||||
const { width, height, formData, queriesData } = chartProps;
|
const { width, height, formData, queriesData } = chartProps;
|
||||||
const { maxBubbleSize, showBubbles, linearColorScheme, colorPicker } =
|
const {
|
||||||
formData;
|
maxBubbleSize,
|
||||||
|
showBubbles,
|
||||||
|
linearColorScheme,
|
||||||
|
colorPicker,
|
||||||
|
colorBy,
|
||||||
|
colorScheme,
|
||||||
|
sliceId,
|
||||||
|
} = formData;
|
||||||
const { r, g, b } = colorPicker;
|
const { r, g, b } = colorPicker;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
@ -32,5 +39,8 @@ export default function transformProps(chartProps) {
|
|||||||
showBubbles,
|
showBubbles,
|
||||||
linearColorScheme,
|
linearColorScheme,
|
||||||
color: rgb(r, g, b).hex(),
|
color: rgb(r, g, b).hex(),
|
||||||
|
colorBy,
|
||||||
|
colorScheme,
|
||||||
|
sliceId,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -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',
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user