mirror of https://github.com/apache/superset.git
[Ready] Define ChartProps data structure (#6125)
* rename basicChartInput to chartProps * replace BasicChartInput with ChartProps class * Add transformProps to deck.gl plugins * Add space * delete BasicChartInput * add width and height as part of ChartProps and update transformProps * remove width and height * remove adaptors from deck.gl components * remove deck.gl creataAdaptor
This commit is contained in:
parent
4e2341a131
commit
d662e36442
|
@ -1,18 +1,33 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import BasicChartInput from '../visualizations/models/BasicChartInput';
|
||||
import ChartProps from '../visualizations/core/models/ChartProps';
|
||||
|
||||
const IDENTITY = x => x;
|
||||
|
||||
export default function createAdaptor(Component, transformProps = IDENTITY) {
|
||||
return function adaptor(slice, payload, setControlValue) {
|
||||
const basicChartInput = new BasicChartInput(slice, payload, setControlValue);
|
||||
const chartProps = new ChartProps({
|
||||
width: slice.width(),
|
||||
height: slice.height(),
|
||||
annotationData: slice.annotationData,
|
||||
datasource: slice.datasource,
|
||||
filters: slice.getFilters(),
|
||||
formData: slice.formData,
|
||||
onAddFilter(...args) {
|
||||
slice.addFilter(...args);
|
||||
},
|
||||
onError(...args) {
|
||||
slice.error(...args);
|
||||
},
|
||||
payload,
|
||||
setControlValue,
|
||||
setTooltip(...args) {
|
||||
slice.setTooltip(...args);
|
||||
},
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<Component
|
||||
width={slice.width()}
|
||||
height={slice.height()}
|
||||
{...transformProps(basicChartInput)}
|
||||
/>,
|
||||
<Component {...transformProps(chartProps)} />,
|
||||
document.querySelector(slice.selector),
|
||||
);
|
||||
};
|
||||
|
|
|
@ -5,8 +5,8 @@ import { renderTooltipFactory } from './BigNumber';
|
|||
|
||||
const TIME_COLUMN = '__timestamp';
|
||||
|
||||
export default function transformProps(basicChartInput) {
|
||||
const { formData, payload } = basicChartInput;
|
||||
export default function transformProps(chartProps) {
|
||||
const { width, height, formData, payload } = chartProps;
|
||||
const {
|
||||
colorPicker,
|
||||
compareLag: compareLagInput,
|
||||
|
@ -65,6 +65,8 @@ export default function transformProps(basicChartInput) {
|
|||
const formatValue = d3FormatPreset(yAxisFormat);
|
||||
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
bigNumber,
|
||||
className,
|
||||
formatBigNumber: formatValue,
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
export default function transformProps(basicChartInput) {
|
||||
const { formData, payload, datasource } = basicChartInput;
|
||||
export default function transformProps(chartProps) {
|
||||
const { height, formData, payload, datasource } = chartProps;
|
||||
const {
|
||||
cellPadding,
|
||||
cellRadius,
|
||||
|
@ -16,6 +16,7 @@ export default function transformProps(basicChartInput) {
|
|||
const { verboseMap } = datasource;
|
||||
|
||||
return {
|
||||
height,
|
||||
data: payload.data,
|
||||
cellPadding,
|
||||
cellRadius,
|
||||
|
|
|
@ -1,8 +1,10 @@
|
|||
export default function transformProps(basicChartInput) {
|
||||
const { formData, payload } = basicChartInput;
|
||||
export default function transformProps(chartProps) {
|
||||
const { width, height, formData, payload } = chartProps;
|
||||
const { yAxisFormat, colorScheme } = formData;
|
||||
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
data: payload.data,
|
||||
numberFormat: yAxisFormat,
|
||||
colorScheme,
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
export default function transformProps(basicChartInput) {
|
||||
const { formData, payload } = basicChartInput;
|
||||
export default function transformProps(chartProps) {
|
||||
const { width, height, formData, payload } = chartProps;
|
||||
const {
|
||||
linearColorScheme,
|
||||
numberFormat,
|
||||
|
@ -7,6 +7,8 @@ export default function transformProps(basicChartInput) {
|
|||
} = formData;
|
||||
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
data: payload.data,
|
||||
country: selectCountry,
|
||||
linearColorScheme,
|
||||
|
|
|
@ -5,8 +5,8 @@ import {
|
|||
ENTITY_ID,
|
||||
} from '@data-ui/event-flow';
|
||||
|
||||
export default function transformProps(basicChartInput) {
|
||||
const { formData, payload } = basicChartInput;
|
||||
export default function transformProps(chartProps) {
|
||||
const { formData, payload } = chartProps;
|
||||
const {
|
||||
allColumnsX,
|
||||
entity,
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
export default function transformProps(basicChartInput) {
|
||||
export default function transformProps(chartProps) {
|
||||
const {
|
||||
datasource,
|
||||
filters,
|
||||
|
@ -6,7 +6,7 @@ export default function transformProps(basicChartInput) {
|
|||
onAddFilter,
|
||||
payload,
|
||||
rawDatasource,
|
||||
} = basicChartInput;
|
||||
} = chartProps;
|
||||
const {
|
||||
dateFilter,
|
||||
groupby,
|
||||
|
|
|
@ -1,8 +1,10 @@
|
|||
export default function transformProps(basicChartInput) {
|
||||
const { formData, payload } = basicChartInput;
|
||||
export default function transformProps(chartProps) {
|
||||
const { width, height, formData, payload } = chartProps;
|
||||
const { charge, linkLength } = formData;
|
||||
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
data: payload.data,
|
||||
charge,
|
||||
linkLength,
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
export default function transformProps(basicChartInput) {
|
||||
const { formData, payload } = basicChartInput;
|
||||
export default function transformProps(chartProps) {
|
||||
const { width, height, formData, payload } = chartProps;
|
||||
const {
|
||||
bottomMargin,
|
||||
canvasImageRendering,
|
||||
|
@ -21,6 +21,8 @@ export default function transformProps(basicChartInput) {
|
|||
} = formData;
|
||||
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
data: payload.data,
|
||||
bottomMargin,
|
||||
canvasImageRendering,
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
export default function transformProps(basicChartInput) {
|
||||
const { formData, payload } = basicChartInput;
|
||||
export default function transformProps(chartProps) {
|
||||
const { width, height, formData, payload } = chartProps;
|
||||
const {
|
||||
colorScheme,
|
||||
linkLength,
|
||||
|
@ -10,6 +10,8 @@ export default function transformProps(basicChartInput) {
|
|||
} = formData;
|
||||
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
data: payload.data,
|
||||
binCount: parseInt(linkLength, 10),
|
||||
colorScheme,
|
||||
|
|
|
@ -1,11 +1,12 @@
|
|||
export default function transformProps(basicChartInput) {
|
||||
const { formData, payload } = basicChartInput;
|
||||
export default function transformProps(chartProps) {
|
||||
const { width, formData, payload } = chartProps;
|
||||
const {
|
||||
horizonColorScale,
|
||||
seriesHeight,
|
||||
} = formData;
|
||||
|
||||
return {
|
||||
width,
|
||||
data: payload.data,
|
||||
seriesHeight: parseInt(seriesHeight, 10),
|
||||
colorScale: horizonColorScale,
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
import supercluster from 'supercluster';
|
||||
import { DEFAULT_POINT_RADIUS, DEFAULT_MAX_ZOOM } from './MapBox';
|
||||
|
||||
export default function transformProps(basicChartInput) {
|
||||
const { formData, onError, payload, setControlValue } = basicChartInput;
|
||||
export default function transformProps(chartProps) {
|
||||
const { width, height, formData, onError, payload, setControlValue } = chartProps;
|
||||
const {
|
||||
bounds,
|
||||
geoJSON,
|
||||
|
@ -59,6 +59,8 @@ export default function transformProps(basicChartInput) {
|
|||
clusterer.load(geoJSON.features);
|
||||
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
aggregatorName: pandasAggfunc,
|
||||
bounds,
|
||||
clusterer,
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
export default function transformProps(basicChartInput) {
|
||||
const { formData, payload } = basicChartInput;
|
||||
export default function transformProps(chartProps) {
|
||||
const { formData, payload } = chartProps;
|
||||
const {
|
||||
groupby,
|
||||
liftvaluePrecision,
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
export default function transformProps(basicChartInput) {
|
||||
const { formData, payload } = basicChartInput;
|
||||
export default function transformProps(chartProps) {
|
||||
const { width, height, formData, payload } = chartProps;
|
||||
const {
|
||||
includeSeries,
|
||||
linearColorScheme,
|
||||
|
@ -10,6 +10,8 @@ export default function transformProps(basicChartInput) {
|
|||
} = formData;
|
||||
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
data: payload.data,
|
||||
includeSeries,
|
||||
linearColorScheme,
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
export default function transformProps(basicChartInput) {
|
||||
const { datasource, formData, payload } = basicChartInput;
|
||||
export default function transformProps(chartProps) {
|
||||
const { width, height, datasource, formData, payload } = chartProps;
|
||||
const {
|
||||
colorScheme,
|
||||
dateTimeFormat,
|
||||
|
@ -16,6 +16,8 @@ export default function transformProps(basicChartInput) {
|
|||
const { verboseMap } = datasource;
|
||||
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
data: payload.data,
|
||||
colorScheme,
|
||||
dateTimeFormat,
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
export default function transformProps(basicChartInput) {
|
||||
const { datasource, formData, payload } = basicChartInput;
|
||||
export default function transformProps(chartProps) {
|
||||
const { height, datasource, formData, payload } = chartProps;
|
||||
const {
|
||||
groupby,
|
||||
numberFormat,
|
||||
|
@ -10,6 +10,7 @@ export default function transformProps(basicChartInput) {
|
|||
} = datasource;
|
||||
|
||||
return {
|
||||
height,
|
||||
data: payload.data,
|
||||
columnFormats,
|
||||
numGroups: groupby.length,
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
export default function transformProps(basicChartInput) {
|
||||
const { formData, payload } = basicChartInput;
|
||||
export default function transformProps(chartProps) {
|
||||
const { width, height, formData, payload } = chartProps;
|
||||
const {
|
||||
colorScheme,
|
||||
dateTimeFormat,
|
||||
|
@ -9,6 +9,8 @@ export default function transformProps(basicChartInput) {
|
|||
} = formData;
|
||||
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
data: payload.data,
|
||||
colorScheme,
|
||||
dateTimeFormat,
|
||||
|
|
|
@ -1,8 +1,10 @@
|
|||
export default function transformProps(basicChartInput) {
|
||||
const { formData, payload } = basicChartInput;
|
||||
export default function transformProps(chartProps) {
|
||||
const { width, height, formData, payload } = chartProps;
|
||||
const { colorScheme } = formData;
|
||||
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
data: payload.data,
|
||||
colorScheme,
|
||||
};
|
||||
|
|
|
@ -1,8 +1,10 @@
|
|||
export default function transformProps(basicChartInput) {
|
||||
const { formData, payload } = basicChartInput;
|
||||
export default function transformProps(chartProps) {
|
||||
const { width, height, formData, payload } = chartProps;
|
||||
const { colorScheme, metric, secondaryMetric } = formData;
|
||||
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
data: payload.data,
|
||||
colorScheme,
|
||||
metrics: [metric, secondaryMetric],
|
||||
|
|
|
@ -1,11 +1,12 @@
|
|||
export default function transformProps(basicChartInput) {
|
||||
export default function transformProps(chartProps) {
|
||||
const {
|
||||
height,
|
||||
datasource,
|
||||
filters,
|
||||
formData,
|
||||
onAddFilter,
|
||||
payload,
|
||||
} = basicChartInput;
|
||||
} = chartProps;
|
||||
const {
|
||||
alignPn,
|
||||
colorPn,
|
||||
|
@ -40,6 +41,7 @@ export default function transformProps(basicChartInput) {
|
|||
});
|
||||
|
||||
return {
|
||||
height,
|
||||
data: records,
|
||||
alignPositiveNegative: alignPn,
|
||||
colorPositiveNegative: colorPn,
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
export default function transformProps(basicChartInput) {
|
||||
const { datasource, formData, payload } = basicChartInput;
|
||||
export default function transformProps(chartProps) {
|
||||
const { height, datasource, formData, payload } = chartProps;
|
||||
const {
|
||||
columnCollection,
|
||||
groupby,
|
||||
|
@ -40,6 +40,7 @@ export default function transformProps(basicChartInput) {
|
|||
});
|
||||
|
||||
return {
|
||||
height,
|
||||
data: records,
|
||||
columnConfigs: columnCollection,
|
||||
rows,
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
export default function transformProps(basicChartInput) {
|
||||
const { formData, payload } = basicChartInput;
|
||||
export default function transformProps(chartProps) {
|
||||
const { width, height, formData, payload } = chartProps;
|
||||
const {
|
||||
colorScheme,
|
||||
numberFormat,
|
||||
|
@ -7,6 +7,8 @@ export default function transformProps(basicChartInput) {
|
|||
} = formData;
|
||||
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
data: payload.data,
|
||||
colorScheme,
|
||||
numberFormat,
|
||||
|
|
|
@ -1,8 +1,9 @@
|
|||
export default function transformProps(basicChartInput) {
|
||||
const { formData, payload } = basicChartInput;
|
||||
export default function transformProps(chartProps) {
|
||||
const { height, formData, payload } = chartProps;
|
||||
const { maxBubbleSize, showBubbles } = formData;
|
||||
|
||||
return {
|
||||
height,
|
||||
data: payload.data,
|
||||
maxBubbleSize: parseInt(maxBubbleSize, 10),
|
||||
showBubbles,
|
||||
|
|
|
@ -0,0 +1,31 @@
|
|||
import convertKeysToCamelCase from '../../../utils/convertKeysToCamelCase';
|
||||
|
||||
export default class ChartProps {
|
||||
constructor({
|
||||
width,
|
||||
height,
|
||||
annotationData,
|
||||
datasource,
|
||||
filters,
|
||||
formData,
|
||||
onAddFilter,
|
||||
onError,
|
||||
payload,
|
||||
setControlValue,
|
||||
setTooltip,
|
||||
}) {
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
this.annotationData = annotationData;
|
||||
this.datasource = convertKeysToCamelCase(datasource);
|
||||
this.rawDatasource = datasource;
|
||||
this.filters = filters;
|
||||
this.formData = convertKeysToCamelCase(formData);
|
||||
this.rawFormData = formData;
|
||||
this.onAddFilter = onAddFilter;
|
||||
this.onError = onError;
|
||||
this.payload = payload;
|
||||
this.setControlValue = setControlValue;
|
||||
this.setTooltip = setTooltip;
|
||||
}
|
||||
}
|
|
@ -4,7 +4,6 @@ import $ from 'jquery';
|
|||
import DeckGLContainer from '../DeckGLContainer';
|
||||
import { getExploreLongUrl } from '../../../explore/exploreUtils';
|
||||
import layerGenerators from '../layers';
|
||||
import createAdaptor from '../createAdaptor';
|
||||
|
||||
const propTypes = {
|
||||
formData: PropTypes.object.isRequired,
|
||||
|
@ -84,4 +83,4 @@ class DeckMulti extends React.PureComponent {
|
|||
|
||||
DeckMulti.propTypes = propTypes;
|
||||
|
||||
export default createAdaptor(DeckMulti);
|
||||
export default DeckMulti;
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import ChartPlugin from '../../core/models/ChartPlugin';
|
||||
import ChartMetadata from '../../core/models/ChartMetadata';
|
||||
import thumbnail from './images/thumbnail.png';
|
||||
import transformProps from '../transformProps';
|
||||
|
||||
const metadata = new ChartMetadata({
|
||||
name: 'deck.gl Multiple Layers',
|
||||
|
@ -14,6 +15,7 @@ export default class MultiChartPlugin extends ChartPlugin {
|
|||
super({
|
||||
metadata,
|
||||
loadChart: () => import('./Multi.jsx'),
|
||||
transformProps,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,30 +0,0 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
const IDENTITY = x => x;
|
||||
|
||||
class DeckGlChartInput {
|
||||
constructor(slice, payload, setControlValue) {
|
||||
this.formData = slice.formData;
|
||||
this.payload = payload;
|
||||
this.setControlValue = setControlValue;
|
||||
this.viewport = {
|
||||
...this.formData.viewport,
|
||||
width: slice.width(),
|
||||
height: slice.height(),
|
||||
};
|
||||
|
||||
this.onAddFilter = ((...args) => { slice.addFilter(...args); });
|
||||
this.setTooltip = ((...args) => { slice.setTooltip(...args); });
|
||||
}
|
||||
}
|
||||
|
||||
export default function createAdaptor(Component, transformProps = IDENTITY) {
|
||||
return function adaptor(slice, payload, setControlValue) {
|
||||
const chartInput = new DeckGlChartInput(slice, payload, setControlValue);
|
||||
ReactDOM.render(
|
||||
<Component {...transformProps(chartInput)} />,
|
||||
document.querySelector(slice.selector),
|
||||
);
|
||||
};
|
||||
}
|
|
@ -1,6 +1,5 @@
|
|||
import { ArcLayer } from 'deck.gl';
|
||||
import { commonLayerProps } from '../common';
|
||||
import createAdaptor from '../../createAdaptor';
|
||||
import { createCategoricalDeckGLComponent } from '../../factory';
|
||||
|
||||
function getPoints(data) {
|
||||
|
@ -26,4 +25,4 @@ export function getLayer(fd, payload, onAddFilter, setTooltip) {
|
|||
});
|
||||
}
|
||||
|
||||
export default createAdaptor(createCategoricalDeckGLComponent(getLayer, getPoints));
|
||||
export default createCategoricalDeckGLComponent(getLayer, getPoints);
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import ChartPlugin from '../../../core/models/ChartPlugin';
|
||||
import ChartMetadata from '../../../core/models/ChartMetadata';
|
||||
import thumbnail from './images/thumbnail.png';
|
||||
import transformProps from '../../transformProps';
|
||||
|
||||
const metadata = new ChartMetadata({
|
||||
name: 'deck.gl Arc',
|
||||
|
@ -14,6 +15,7 @@ export default class ArcChartPlugin extends ChartPlugin {
|
|||
super({
|
||||
metadata,
|
||||
loadChart: () => import('./Arc.jsx'),
|
||||
transformProps,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
@ -7,7 +7,6 @@ import DeckGLContainer from '../../DeckGLContainer';
|
|||
import { hexToRGB } from '../../../../modules/colors';
|
||||
import sandboxedEval from '../../../../modules/sandbox';
|
||||
import { commonLayerProps } from '../common';
|
||||
import createAdaptor from '../../createAdaptor';
|
||||
|
||||
const propertyMap = {
|
||||
fillColor: 'fillColor',
|
||||
|
@ -137,4 +136,4 @@ function deckGeoJson(props) {
|
|||
deckGeoJson.propTypes = propTypes;
|
||||
deckGeoJson.defaultProps = defaultProps;
|
||||
|
||||
export default createAdaptor(deckGeoJson);
|
||||
export default deckGeoJson;
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import ChartPlugin from '../../../core/models/ChartPlugin';
|
||||
import ChartMetadata from '../../../core/models/ChartMetadata';
|
||||
import thumbnail from './images/thumbnail.png';
|
||||
import transformProps from '../../transformProps';
|
||||
|
||||
const metadata = new ChartMetadata({
|
||||
name: 'deck.gl Geojson',
|
||||
|
@ -14,6 +15,7 @@ export default class GeojsonChartPlugin extends ChartPlugin {
|
|||
super({
|
||||
metadata,
|
||||
loadChart: () => import('./Geojson.jsx'),
|
||||
transformProps,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import { GridLayer } from 'deck.gl';
|
||||
import { commonLayerProps } from '../common';
|
||||
import sandboxedEval from '../../../../modules/sandbox';
|
||||
import createAdaptor from '../../createAdaptor';
|
||||
import { createDeckGLComponent } from '../../factory';
|
||||
|
||||
export function getLayer(formData, payload, onAddFilter, setTooltip) {
|
||||
|
@ -37,4 +36,4 @@ function getPoints(data) {
|
|||
return data.map(d => d.position);
|
||||
}
|
||||
|
||||
export default createAdaptor(createDeckGLComponent(getLayer, getPoints));
|
||||
export default createDeckGLComponent(getLayer, getPoints);
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import ChartPlugin from '../../../core/models/ChartPlugin';
|
||||
import ChartMetadata from '../../../core/models/ChartMetadata';
|
||||
import thumbnail from './images/thumbnail.png';
|
||||
import transformProps from '../../transformProps';
|
||||
|
||||
const metadata = new ChartMetadata({
|
||||
name: 'deck.gl Grid',
|
||||
|
@ -14,6 +15,7 @@ export default class GridChartPlugin extends ChartPlugin {
|
|||
super({
|
||||
metadata,
|
||||
loadChart: () => import('./Grid.jsx'),
|
||||
transformProps,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import { HexagonLayer } from 'deck.gl';
|
||||
import { commonLayerProps } from '../common';
|
||||
import sandboxedEval from '../../../../modules/sandbox';
|
||||
import createAdaptor from '../../createAdaptor';
|
||||
import { createDeckGLComponent } from '../../factory';
|
||||
|
||||
export function getLayer(formData, payload, onAddFilter, setTooltip) {
|
||||
|
@ -37,4 +36,4 @@ function getPoints(data) {
|
|||
return data.map(d => d.position);
|
||||
}
|
||||
|
||||
export default createAdaptor(createDeckGLComponent(getLayer, getPoints));
|
||||
export default createDeckGLComponent(getLayer, getPoints);
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import ChartPlugin from '../../../core/models/ChartPlugin';
|
||||
import ChartMetadata from '../../../core/models/ChartMetadata';
|
||||
import thumbnail from './images/thumbnail.png';
|
||||
import transformProps from '../../transformProps';
|
||||
|
||||
const metadata = new ChartMetadata({
|
||||
name: 'deck.gl 3D Hexagon',
|
||||
|
@ -14,6 +15,7 @@ export default class HexChartPlugin extends ChartPlugin {
|
|||
super({
|
||||
metadata,
|
||||
loadChart: () => import('./Hex.jsx'),
|
||||
transformProps,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import { PathLayer } from 'deck.gl';
|
||||
import { commonLayerProps } from '../common';
|
||||
import sandboxedEval from '../../../../modules/sandbox';
|
||||
import createAdaptor from '../../createAdaptor';
|
||||
import { createDeckGLComponent } from '../../factory';
|
||||
|
||||
export function getLayer(formData, payload, onAddFilter, setTooltip) {
|
||||
|
@ -37,4 +36,4 @@ function getPoints(data) {
|
|||
return points;
|
||||
}
|
||||
|
||||
export default createAdaptor(createDeckGLComponent(getLayer, getPoints));
|
||||
export default createDeckGLComponent(getLayer, getPoints);
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import ChartPlugin from '../../../core/models/ChartPlugin';
|
||||
import ChartMetadata from '../../../core/models/ChartMetadata';
|
||||
import thumbnail from './images/thumbnail.png';
|
||||
import transformProps from '../../transformProps';
|
||||
|
||||
const metadata = new ChartMetadata({
|
||||
name: 'deck.gl Path',
|
||||
|
@ -14,6 +15,7 @@ export default class PathChartPlugin extends ChartPlugin {
|
|||
super({
|
||||
metadata,
|
||||
loadChart: () => import('./Path.jsx'),
|
||||
transformProps,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
@ -4,7 +4,6 @@ import { flatten } from 'lodash';
|
|||
import { colorScalerFactory } from '../../../../modules/colors';
|
||||
import { commonLayerProps } from '../common';
|
||||
import sandboxedEval from '../../../../modules/sandbox';
|
||||
import createAdaptor from '../../createAdaptor';
|
||||
import { createDeckGLComponent } from '../../factory';
|
||||
|
||||
function getPoints(features) {
|
||||
|
@ -49,4 +48,4 @@ export function getLayer(formData, payload, onAddFilter, setTooltip) {
|
|||
});
|
||||
}
|
||||
|
||||
export default createAdaptor(createDeckGLComponent(getLayer, getPoints));
|
||||
export default createDeckGLComponent(getLayer, getPoints);
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import ChartPlugin from '../../../core/models/ChartPlugin';
|
||||
import ChartMetadata from '../../../core/models/ChartMetadata';
|
||||
import thumbnail from './images/thumbnail.png';
|
||||
import transformProps from '../../transformProps';
|
||||
|
||||
const metadata = new ChartMetadata({
|
||||
name: 'deck.gl Polygon',
|
||||
|
@ -14,6 +15,7 @@ export default class PolygonChartPlugin extends ChartPlugin {
|
|||
super({
|
||||
metadata,
|
||||
loadChart: () => import('./Polygon.jsx'),
|
||||
transformProps,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
import { ScatterplotLayer } from 'deck.gl';
|
||||
import { commonLayerProps } from '../common';
|
||||
import createAdaptor from '../../createAdaptor';
|
||||
import { createCategoricalDeckGLComponent } from '../../factory';
|
||||
import { unitToRadius } from '../../../../modules/geo';
|
||||
|
||||
|
@ -33,4 +32,4 @@ export function getLayer(fd, payload, slice) {
|
|||
});
|
||||
}
|
||||
|
||||
export default createAdaptor(createCategoricalDeckGLComponent(getLayer, getPoints));
|
||||
export default createCategoricalDeckGLComponent(getLayer, getPoints);
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import ChartPlugin from '../../../core/models/ChartPlugin';
|
||||
import ChartMetadata from '../../../core/models/ChartMetadata';
|
||||
import thumbnail from './images/thumbnail.png';
|
||||
import transformProps from '../../transformProps';
|
||||
|
||||
const metadata = new ChartMetadata({
|
||||
name: 'deck.gl Scatterplot',
|
||||
|
@ -14,6 +15,7 @@ export default class ScatterChartPlugin extends ChartPlugin {
|
|||
super({
|
||||
metadata,
|
||||
loadChart: () => import('./Scatter.jsx'),
|
||||
transformProps,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
@ -7,7 +7,6 @@ import AnimatableDeckGLContainer from '../../AnimatableDeckGLContainer';
|
|||
import { getPlaySliderParams } from '../../../../modules/time';
|
||||
import sandboxedEval from '../../../../modules/sandbox';
|
||||
import { commonLayerProps, fitViewport } from '../common';
|
||||
import createAdaptor from '../../createAdaptor';
|
||||
|
||||
function getPoints(data) {
|
||||
return data.map(d => d.position);
|
||||
|
@ -135,4 +134,4 @@ class DeckGLScreenGrid extends React.PureComponent {
|
|||
DeckGLScreenGrid.propTypes = propTypes;
|
||||
DeckGLScreenGrid.defaultProps = defaultProps;
|
||||
|
||||
export default createAdaptor(DeckGLScreenGrid);
|
||||
export default DeckGLScreenGrid;
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import ChartPlugin from '../../../core/models/ChartPlugin';
|
||||
import ChartMetadata from '../../../core/models/ChartMetadata';
|
||||
import thumbnail from './images/thumbnail.png';
|
||||
import transformProps from '../../transformProps';
|
||||
|
||||
const metadata = new ChartMetadata({
|
||||
name: 'deck.gl Screen Grid',
|
||||
|
@ -14,6 +15,7 @@ export default class ScreengridChartPlugin extends ChartPlugin {
|
|||
super({
|
||||
metadata,
|
||||
loadChart: () => import('./Screengrid.jsx'),
|
||||
transformProps,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
@ -0,0 +1,24 @@
|
|||
export default function transformProps(chartProps) {
|
||||
const {
|
||||
width,
|
||||
height,
|
||||
rawFormData,
|
||||
payload,
|
||||
setControlValue,
|
||||
onAddFilter,
|
||||
setTooltip,
|
||||
} = chartProps;
|
||||
|
||||
return {
|
||||
formData: rawFormData,
|
||||
payload,
|
||||
setControlValue,
|
||||
viewport: {
|
||||
...rawFormData.viewport,
|
||||
width,
|
||||
height,
|
||||
},
|
||||
onAddFilter,
|
||||
setTooltip,
|
||||
};
|
||||
}
|
|
@ -1,3 +1,6 @@
|
|||
import createAdaptor from '../utils/createAdaptor';
|
||||
import transformProps from './deckgl/transformProps';
|
||||
|
||||
/* eslint-disable global-require */
|
||||
|
||||
// You ***should*** use these to reference viz_types in code
|
||||
|
@ -55,10 +58,13 @@ export const VIZ_TYPES = {
|
|||
const loadVis = promise =>
|
||||
promise.then((module) => {
|
||||
const defaultExport = module.default || module;
|
||||
|
||||
// deckgl visualizations don't use esModules, fix it?
|
||||
return defaultExport.default || defaultExport;
|
||||
});
|
||||
|
||||
const loadDeckGLVis = promise =>
|
||||
loadVis(promise).then(module => createAdaptor(module, transformProps));
|
||||
|
||||
const loadNvd3 = () => loadVis(import(/* webpackChunkName: "nvd3_vis" */ './nvd3/adaptor.jsx'));
|
||||
|
||||
const vizMap = {
|
||||
|
@ -117,25 +123,25 @@ const vizMap = {
|
|||
[VIZ_TYPES.partition]: () =>
|
||||
loadVis(import(/* webpackChunkName: "partition" */ './Partition/adaptor.jsx')),
|
||||
[VIZ_TYPES.deck_scatter]: () =>
|
||||
loadVis(import(/* webpackChunkName: "deckgl/layers/scatter" */ './deckgl/layers/Scatter/Scatter.jsx')),
|
||||
loadDeckGLVis(import(/* webpackChunkName: "deckgl/layers/scatter" */ './deckgl/layers/Scatter/Scatter.jsx')),
|
||||
[VIZ_TYPES.deck_screengrid]: () =>
|
||||
loadVis(
|
||||
loadDeckGLVis(
|
||||
import(/* webpackChunkName: "deckgl/layers/screengrid" */ './deckgl/layers/Screengrid/Screengrid.jsx'),
|
||||
),
|
||||
[VIZ_TYPES.deck_grid]: () =>
|
||||
loadVis(import(/* webpackChunkName: "deckgl/layers/grid" */ './deckgl/layers/Grid/Grid.jsx')),
|
||||
loadDeckGLVis(import(/* webpackChunkName: "deckgl/layers/grid" */ './deckgl/layers/Grid/Grid.jsx')),
|
||||
[VIZ_TYPES.deck_hex]: () =>
|
||||
loadVis(import(/* webpackChunkName: "deckgl/layers/hex" */ './deckgl/layers/Hex/Hex.jsx')),
|
||||
loadDeckGLVis(import(/* webpackChunkName: "deckgl/layers/hex" */ './deckgl/layers/Hex/Hex.jsx')),
|
||||
[VIZ_TYPES.deck_path]: () =>
|
||||
loadVis(import(/* webpackChunkName: "deckgl/layers/path" */ './deckgl/layers/Path/Path.jsx')),
|
||||
loadDeckGLVis(import(/* webpackChunkName: "deckgl/layers/path" */ './deckgl/layers/Path/Path.jsx')),
|
||||
[VIZ_TYPES.deck_geojson]: () =>
|
||||
loadVis(import(/* webpackChunkName: "deckgl/layers/geojson" */ './deckgl/layers/Geojson/Geojson.jsx')),
|
||||
loadDeckGLVis(import(/* webpackChunkName: "deckgl/layers/geojson" */ './deckgl/layers/Geojson/Geojson.jsx')),
|
||||
[VIZ_TYPES.deck_arc]: () =>
|
||||
loadVis(import(/* webpackChunkName: "deckgl/layers/arc" */ './deckgl/layers/Arc/Arc.jsx')),
|
||||
loadDeckGLVis(import(/* webpackChunkName: "deckgl/layers/arc" */ './deckgl/layers/Arc/Arc.jsx')),
|
||||
[VIZ_TYPES.deck_polygon]: () =>
|
||||
loadVis(import(/* webpackChunkName: "deckgl/layers/polygon" */ './deckgl/layers/Polygon/Polygon.jsx')),
|
||||
loadDeckGLVis(import(/* webpackChunkName: "deckgl/layers/polygon" */ './deckgl/layers/Polygon/Polygon.jsx')),
|
||||
[VIZ_TYPES.deck_multi]: () =>
|
||||
loadVis(import(/* webpackChunkName: "deckgl/multi" */ './deckgl/Multi/Multi.jsx')),
|
||||
loadDeckGLVis(import(/* webpackChunkName: "deckgl/multi" */ './deckgl/Multi/Multi.jsx')),
|
||||
[VIZ_TYPES.rose]: () => loadVis(import(/* webpackChunkName: "rose" */ './Rose/adaptor.jsx')),
|
||||
};
|
||||
|
||||
|
|
|
@ -1,19 +0,0 @@
|
|||
import convertKeysToCamelCase from '../../utils/convertKeysToCamelCase';
|
||||
|
||||
export default class BasicChartInput {
|
||||
constructor(slice, payload, setControlValue) {
|
||||
this.annotationData = slice.annotationData;
|
||||
this.datasource = convertKeysToCamelCase(slice.datasource);
|
||||
this.rawDatasource = slice.datasource;
|
||||
this.filters = slice.getFilters();
|
||||
this.formData = convertKeysToCamelCase(slice.formData);
|
||||
this.onAddFilter = (...args) => {
|
||||
slice.addFilter(...args);
|
||||
};
|
||||
this.onError = (...args) => {
|
||||
slice.error(...args);
|
||||
};
|
||||
this.payload = payload;
|
||||
this.setControlValue = setControlValue;
|
||||
}
|
||||
}
|
|
@ -1,15 +1,17 @@
|
|||
import { isTruthy } from '../../utils/common';
|
||||
import { formatLabel } from './utils';
|
||||
|
||||
export default function transformProps(basicChartInput) {
|
||||
export default function transformProps(chartProps) {
|
||||
const {
|
||||
width,
|
||||
height,
|
||||
annotationData,
|
||||
datasource,
|
||||
formData,
|
||||
onError,
|
||||
onAddFilter,
|
||||
payload,
|
||||
} = basicChartInput;
|
||||
} = chartProps;
|
||||
|
||||
const {
|
||||
annotationLayers,
|
||||
|
@ -63,6 +65,8 @@ export default function transformProps(basicChartInput) {
|
|||
: rawData;
|
||||
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
data,
|
||||
annotationData,
|
||||
annotationLayers,
|
||||
|
|
|
@ -9,8 +9,8 @@ function transformData(data, formData) {
|
|||
return transformedData;
|
||||
}
|
||||
|
||||
export default function transformProps(basicChartInput) {
|
||||
const { formData, payload } = basicChartInput;
|
||||
export default function transformProps(chartProps) {
|
||||
const { width, height, formData, payload } = chartProps;
|
||||
const {
|
||||
colorScheme,
|
||||
rotation,
|
||||
|
@ -19,6 +19,8 @@ export default function transformProps(basicChartInput) {
|
|||
} = formData;
|
||||
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
data: transformData(payload.data, formData),
|
||||
colorScheme,
|
||||
rotation,
|
||||
|
|
Loading…
Reference in New Issue