Skip to content

Commit

Permalink
feat(legacy-plugin-chart-map-box): control panel (apache#507)
Browse files Browse the repository at this point in the history
  • Loading branch information
@suddjian @zhaoyongjie
suddjian authored and zhaoyongjie committed Nov 17, 2021
1 parent 7240ae6 commit 10caf1b
Show file tree
Hide file tree
Showing 3 changed files with 298 additions and 0 deletions.
1 change: 1 addition & 0 deletions ...ontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-map-box/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
},
"peerDependencies": {
"@superset-ui/chart": "^0.13.0",
"@superset-ui/control-utils": "^0.13.12",
"@superset-ui/translation": "^0.13.0",
"react": "^15 || ^16"
}
Expand Down
295 changes: 295 additions & 0 deletions ...temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-map-box/src/controlPanel.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,295 @@
/**
* 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.
*/
import { t } from '@superset-ui/translation';
import { formatSelectOptions, internalSharedControls } from '@superset-ui/control-utils';

const { columnChoices } = internalSharedControls;

export default {
controlPanelSections: [
{
label: t('Query'),
expanded: true,
controlSetRows: [
[
{
name: 'all_columns_x',
config: {
type: 'SelectControl',
label: t('Longitude'),
default: null,
description: t('Column containing longitude data'),
mapStateToProps: state => ({
choices: columnChoices(state.datasource),
}),
},
},
{
name: 'all_columns_y',
config: {
type: 'SelectControl',
label: t('Latitude'),
default: null,
description: t('Column containing latitude data'),
mapStateToProps: state => ({
choices: columnChoices(state.datasource),
}),
},
},
],
[
{
name: 'clustering_radius',
config: {
type: 'SelectControl',
freeForm: true,
label: t('Clustering Radius'),
default: '60',
choices: formatSelectOptions([
'0',
'20',
'40',
'60',
'80',
'100',
'200',
'500',
'1000',
]),
description: t(
'The radius (in pixels) the algorithm uses to define a cluster. ' +
'Choose 0 to turn off clustering, but beware that a large ' +
'number of points (>1000) will cause lag.',
),
},
},
],
['row_limit'],
['adhoc_filters'],
['groupby'],
],
},
{
label: t('Points'),
controlSetRows: [
[
{
name: 'point_radius',
config: {
type: 'SelectControl',
label: t('Point Radius'),
default: 'Auto',
description: t(
'The radius of individual points (ones that are not in a cluster). ' +
'Either a numerical column or `Auto`, which scales the point based ' +
'on the largest cluster',
),
mapStateToProps: state => ({
choices: formatSelectOptions(['Auto']).concat(columnChoices(state.datasource)),
}),
},
},
],
[
{
name: 'point_radius_unit',
config: {
type: 'SelectControl',
label: t('Point Radius Unit'),
default: 'Pixels',
choices: formatSelectOptions(['Pixels', 'Miles', 'Kilometers']),
description: t('The unit of measure for the specified point radius'),
},
},
],
],
},
{
label: t('Labelling'),
controlSetRows: [
[
{
name: 'mapbox_label',
config: {
type: 'SelectControl',
multi: true,
label: t('label'),
default: [],
description: t(
'`count` is COUNT(*) if a group by is used. ' +
'Numerical columns will be aggregated with the aggregator. ' +
'Non-numerical columns will be used to label points. ' +
'Leave empty to get a count of points in each cluster.',
),
mapStateToProps: state => ({
choices: columnChoices(state.datasource),
}),
},
},
],
[
{
name: 'pandas_aggfunc',
config: {
type: 'SelectControl',
label: t('Cluster label aggregator'),
clearable: false,
choices: formatSelectOptions(['sum', 'mean', 'min', 'max', 'std', 'var']),
default: 'sum',
description: t(
'Aggregate function applied to the list of points ' +
'in each cluster to produce the cluster label.',
),
},
},
],
],
},
{
label: t('Visual Tweaks'),
controlSetRows: [
[
{
name: 'render_while_dragging',
config: {
type: 'CheckboxControl',
label: t('Live render'),
default: true,
description: t('Points and clusters will update as the viewport is being changed'),
},
},
],
[
{
name: 'mapbox_style',
config: {
type: 'SelectControl',
label: t('Map Style'),
clearable: false,
renderTrigger: true,
choices: [
['mapbox://styles/mapbox/streets-v9', 'Streets'],
['mapbox://styles/mapbox/dark-v9', 'Dark'],
['mapbox://styles/mapbox/light-v9', 'Light'],
['mapbox://styles/mapbox/satellite-streets-v9', 'Satellite Streets'],
['mapbox://styles/mapbox/satellite-v9', 'Satellite'],
['mapbox://styles/mapbox/outdoors-v9', 'Outdoors'],
],
default: 'mapbox://styles/mapbox/light-v9',
description: t('Base layer map style'),
},
},
],
[
{
name: 'global_opacity',
config: {
type: 'TextControl',
label: t('Opacity'),
default: 1,
isFloat: true,
description: t('Opacity of all clusters, points, and labels. Between 0 and 1.'),
},
},
],
[
{
name: 'mapbox_color',
config: {
type: 'SelectControl',
freeForm: true,
label: t('RGB Color'),
default: 'rgb(0, 122, 135)',
choices: [
['rgb(0, 139, 139)', 'Dark Cyan'],
['rgb(128, 0, 128)', 'Purple'],
['rgb(255, 215, 0)', 'Gold'],
['rgb(69, 69, 69)', 'Dim Gray'],
['rgb(220, 20, 60)', 'Crimson'],
['rgb(34, 139, 34)', 'Forest Green'],
],
description: t('The color for points and clusters in RGB'),
},
},
],
],
},
{
label: t('Viewport'),
expanded: true,
controlSetRows: [
[
{
name: 'viewport_longitude',
config: {
type: 'TextControl',
label: t('Default longitude'),
renderTrigger: true,
default: -122.405293,
isFloat: true,
description: t('Longitude of default viewport'),
places: 8,
// Viewport longitude changes shouldn't prompt user to re-run query
dontRefreshOnChange: true,
},
},
{
name: 'viewport_latitude',
config: {
type: 'TextControl',
label: t('Default latitude'),
renderTrigger: true,
default: 37.772123,
isFloat: true,
description: t('Latitude of default viewport'),
places: 8,
// Viewport latitude changes shouldn't prompt user to re-run query
dontRefreshOnChange: true,
},
},
],
[
{
name: 'viewport_zoom',
config: {
type: 'TextControl',
label: t('Zoom'),
renderTrigger: true,
isFloat: true,
default: 11,
description: t('Zoom level of the map'),
places: 8,
// Viewport zoom shouldn't prompt user to re-run query
dontRefreshOnChange: true,
},
},
null,
],
],
},
],
controlOverrides: {
groupby: {
description: t(
'One or many controls to group by. If grouping, latitude ' +
'and longitude columns must be present.',
),
},
},
};
2 changes: 2 additions & 0 deletions ...ontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-map-box/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
import { t } from '@superset-ui/translation';
import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
import thumbnail from './images/thumbnail.png';
import controlPanel from './controlPanel';

const metadata = new ChartMetadata({
credits: ['https://www.mapbox.com/mapbox-gl-js/api/'],
Expand All @@ -34,6 +35,7 @@ export default class MapBoxChartPlugin extends ChartPlugin {
loadChart: () => import('./MapBox'),
loadTransformProps: () => import('./transformProps.js'),
metadata,
controlPanel,
});
}
}

0 comments on commit 10caf1b

Please sign in to comment.