Skip to content
This repository has been archived by the owner on Dec 10, 2021. It is now read-only.

feat(legacy-plugin-chart-map-box): control panel #507

Merged
merged 1 commit into from
May 19, 2020
Merged

feat(legacy-plugin-chart-map-box): control panel #507

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions plugins/legacy-plugin-chart-map-box/package.json
View file
Open in desktop
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 plugins/legacy-plugin-chart-map-box/src/controlPanel.js
View file
Open in desktop
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 plugins/legacy-plugin-chart-map-box/src/index.js
View file
Open in desktop
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,
});
}
}