Skip to content

Commit

Permalink
chore(legacy-deckgl): add deckgl control panels to deckgl monorepo (#17)
Browse files Browse the repository at this point in the history
* add deckgl control panels to deckgl monorepo

* fix lint errors

* readd chart-controls as dependency?

* restructure deck layer folder files and convert chart to emotions

* move peers back to depends

* move dependencies

* add lock file

* fix for eslint bug?

* update breaking package

* Update index.js
  • Loading branch information
pkdotson authored and zhaoyongjie committed Nov 30, 2021
1 parent e45825d commit 24c1285
Show file tree
Hide file tree
Showing 23 changed files with 2,242 additions and 11 deletions.
Expand Up @@ -47,7 +47,7 @@
"@airbnb/config-typescript": "^2.1.2",
"@airbnb/nimbus": "^2.1.3",
"@superset-ui/commit-config": "^0.0.9",
"@superset-ui/superset-ui": "^0.13.9",
"@superset-ui/superset-ui": "^0.14.9",
"@types/enzyme": "^3.10.3",
"@types/jest": "^25.1.1",
"@types/jsdom": "^12.2.4",
Expand Down Expand Up @@ -119,7 +119,12 @@
"rules": {
"react/jsx-no-literals": "off",
"prefer-exponentiation-operator": "off",
"@typescript-eslint/no-explicit-any": ["warn", { "fixToUnknown": false }]
"@typescript-eslint/no-explicit-any": [
"warn",
{
"fixToUnknown": false
}
]
}
}
]
Expand Down
Expand Up @@ -46,14 +46,17 @@
"xss": "^1.0.6"
},
"peerDependencies": {
"@superset-ui/chart": "^0.12.0 || ^0.13.3",
"@superset-ui/color": "^0.12.0 || ^0.13.3",
"@superset-ui/connection": "^0.12.0 || ^0.13.3",
"@superset-ui/core": "^0.12.0 || ^0.13.3",
"@superset-ui/dimension": "^0.12.0 || ^0.13.3",
"@superset-ui/number-format": "^0.12.0 || ^0.13.3",
"@superset-ui/time-format": "^0.12.0 || ^0.13.3",
"@superset-ui/translation": "^0.12.0 || ^0.13.3",
"@superset-ui/chart": "^0.14.9",
"@superset-ui/chart-controls": "^0.14.9",
"@superset-ui/color": "^0.14.9",
"@superset-ui/connection": "^0.14.9",
"@superset-ui/core": "^0.14.9",
"@superset-ui/dimension": "^0.14.9",
"@superset-ui/number-format": "^0.14.9",
"@superset-ui/style": "^0.14.9",
"@superset-ui/time-format": "^0.14.9",
"@superset-ui/translation": "^0.14.9",
"@superset-ui/validator": "^0.14.9",
"react": "^15 || ^16"
}
}
Expand Up @@ -24,6 +24,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { StaticMap } from 'react-map-gl';
import DeckGL from 'deck.gl';
import styled from '@superset-ui/style';
// eslint-disable-next-line import/extensions
import Tooltip from './components/Tooltip';
import 'mapbox-gl/dist/mapbox-gl.css';
Expand All @@ -49,7 +50,7 @@ const defaultProps = {
bottomMargin: 0,
};

export default class DeckGLContainer extends React.Component {
class DeckGLContainer extends React.Component {
constructor(props) {
super(props);
this.tick = this.tick.bind(this);
Expand Down Expand Up @@ -129,3 +130,10 @@ export default class DeckGLContainer extends React.Component {

DeckGLContainer.propTypes = propTypes;
DeckGLContainer.defaultProps = defaultProps;

export default styled(DeckGLContainer)`
.deckgl-tooltip > div {
overflow: hidden;
text-overflow: ellipsis;
}
`;
@@ -0,0 +1,137 @@
/**
* 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 { validateNonEmpty, legacyValidateInteger } from '@superset-ui/validator';
import timeGrainSqlaAnimationOverrides, {
columnChoices,
PRIMARY_COLOR,
} from '../../utilities/controls';
import { formatSelectOptions } from '../../utilities/utils';
import {
filterNulls,
autozoom,
dimension,
jsColumns,
jsDataMutator,
jsTooltip,
jsOnclickHref,
legendFormat,
legendPosition,
viewport,
mapboxStyle,
} from '../../utilities/Shared_DeckGL';

export default {
controlPanelSections: [
{
label: t('Query'),
expanded: true,
controlSetRows: [
[
{
name: 'start_spatial',
config: {
type: 'SpatialControl',
label: t('Start Longitude & Latitude'),
validators: [validateNonEmpty],
description: t('Point to your spatial columns'),
mapStateToProps: state => ({
choices: columnChoices(state.datasource),
}),
},
},
{
name: 'end_spatial',
config: {
type: 'SpatialControl',
label: t('End Longitude & Latitude'),
validators: [validateNonEmpty],
description: t('Point to your spatial columns'),
mapStateToProps: state => ({
choices: columnChoices(state.datasource),
}),
},
},
],
['row_limit', filterNulls],
['adhoc_filters'],
],
},
{
label: t('Map'),
controlSetRows: [
[mapboxStyle, viewport],
[autozoom, null],
],
},
{
label: t('Arc'),
controlSetRows: [
[
'color_picker',
{
name: 'target_color_picker',
config: {
label: t('Target Color'),
description: t('Color of the target location'),
type: 'ColorPickerControl',
default: PRIMARY_COLOR,
renderTrigger: true,
},
},
],
[
{
...dimension,
label: t('Categorical Color'),
description: t('Pick a dimension from which categorical colors are defined'),
},
'color_scheme',
'label_colors',
],
[
{
name: 'stroke_width',
color: {
type: 'SelectControl',
freeForm: true,
label: t('Stroke Width'),
validators: [legacyValidateInteger],
default: null,
renderTrigger: true,
choices: formatSelectOptions([1, 2, 3, 4, 5]),
},
},
legendPosition,
],
[legendFormat, null],
],
},
{
label: t('Advanced'),
controlSetRows: [[jsColumns], [jsDataMutator], [jsTooltip], [jsOnclickHref]],
},
],
controlOverrides: {
size: {
validators: [],
},
time_grain_sqla: timeGrainSqlaAnimationOverrides,
},
};
Expand Up @@ -20,6 +20,7 @@ import { t } from '@superset-ui/translation';
import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
import thumbnail from './images/thumbnail.png';
import transformProps from '../../transformProps';
import controlPanel from './controlPanel';

const metadata = new ChartMetadata({
credits: ['https://uber.github.io/deck.gl'],
Expand All @@ -33,6 +34,7 @@ export default class ArcChartPlugin extends ChartPlugin {
constructor() {
super({
loadChart: () => import('./Arc'),
controlPanel,
metadata,
transformProps,
});
Expand Down
@@ -0,0 +1,97 @@
/**
* 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 { validateNonEmpty, legacyValidateInteger } from '@superset-ui/validator';
import { formatSelectOptions } from '../../utilities/utils';
import { columnChoices } from '../../utilities/controls';
import {
filterNulls,
jsColumns,
jsDataMutator,
jsTooltip,
jsOnclickHref,
fillColorPicker,
strokeColorPicker,
filled,
stroked,
extruded,
viewport,
mapboxStyle,
} from '../../utilities/Shared_DeckGL';

export default {
controlPanelSections: [
{
label: t('Query'),
expanded: true,
controlSetRows: [
[
{
name: 'geojson',
config: {
type: 'SelectControl',
label: t('GeoJson Column'),
validators: [validateNonEmpty],
description: t('Select the geojson column'),
mapStateToProps: state => ({
choices: columnChoices(state.datasource),
}),
},
},
null,
],
['row_limit', filterNulls],
['adhoc_filters'],
],
},
{
label: t('Map'),
controlSetRows: [
[mapboxStyle, viewport],
// TODO [autozoom, null], // import { autozoom } from './Shared_DeckGL'
],
},
{
label: t('GeoJson Settings'),
controlSetRows: [
[fillColorPicker, strokeColorPicker],
[filled, stroked],
[extruded, null],
[
{
name: 'point_radius_scale',
config: {
type: 'SelectControl',
freeForm: true,
label: t('Point Radius Scale'),
validators: [legacyValidateInteger],
default: null,
choices: formatSelectOptions([0, 100, 200, 300, 500]),
},
},
null,
],
],
},
{
label: t('Advanced'),
controlSetRows: [[jsColumns], [jsDataMutator], [jsTooltip], [jsOnclickHref]],
},
],
};
Expand Up @@ -20,6 +20,7 @@ import { t } from '@superset-ui/translation';
import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
import thumbnail from './images/thumbnail.png';
import transformProps from '../../transformProps';
import controlPanel from './controlPanel';

const metadata = new ChartMetadata({
credits: ['https://uber.github.io/deck.gl'],
Expand All @@ -33,6 +34,7 @@ export default class GeojsonChartPlugin extends ChartPlugin {
constructor() {
super({
loadChart: () => import('./Geojson'),
controlPanel,
metadata,
transformProps,
});
Expand Down

0 comments on commit 24c1285

Please sign in to comment.