docs: add grid demo

This commit is contained in:
Krist Wongsuphasawat 2019-09-18 18:25:42 -07:00 committed by Yongjie Zhao
parent 5d5e68bdf5
commit 853102c4eb
7 changed files with 394 additions and 356 deletions

View File

@ -2,9 +2,7 @@
"name": "@superset-ui/legacy-preset-chart-deckgl", "name": "@superset-ui/legacy-preset-chart-deckgl",
"version": "0.0.0", "version": "0.0.0",
"description": "Superset Legacy Chart - deck.gl", "description": "Superset Legacy Chart - deck.gl",
"sideEffects": [ "sideEffects": true,
"*.css"
],
"main": "lib/index.js", "main": "lib/index.js",
"module": "esm/index.js", "module": "esm/index.js",
"files": [ "files": [

View File

@ -14,63 +14,63 @@ export default [
datasource={dummyDatasource} datasource={dummyDatasource}
queryData={payload} queryData={payload}
formData={{ formData={{
"datasource": "10__table", datasource: '10__table',
"viz_type": "deck_arc", viz_type: 'deck_arc',
"granularity_sqla": "dttm", granularity_sqla: 'dttm',
"time_grain_sqla": null, time_grain_sqla: null,
"time_range": " : ", time_range: ' : ',
"start_spatial": { start_spatial: {
"latCol": "LATITUDE", latCol: 'LATITUDE',
"lonCol": "LONGITUDE", lonCol: 'LONGITUDE',
"type": "latlong" type: 'latlong',
}, },
"end_spatial": { end_spatial: {
"latCol": "LATITUDE_DEST", latCol: 'LATITUDE_DEST',
"lonCol": "LONGITUDE_DEST", lonCol: 'LONGITUDE_DEST',
"type": "latlong" type: 'latlong',
}, },
"row_limit": 5000, row_limit: 5000,
"filter_nulls": true, filter_nulls: true,
"adhoc_filters": [], adhoc_filters: [],
"mapbox_style": "mapbox://styles/mapbox/light-v9", mapbox_style: 'mapbox://styles/mapbox/light-v9',
"viewport": { viewport: {
"altitude": 1.5, altitude: 1.5,
"bearing": 8.546256357301871, bearing: 8.546256357301871,
"height": 642, height: 642,
"latitude": 44.596651438714254, latitude: 44.596651438714254,
"longitude": -91.84340711201104, longitude: -91.84340711201104,
"maxLatitude": 85.05113, maxLatitude: 85.05113,
"maxPitch": 60, maxPitch: 60,
"maxZoom": 20, maxZoom: 20,
"minLatitude": -85.05113, minLatitude: -85.05113,
"minPitch": 0, minPitch: 0,
"minZoom": 0, minZoom: 0,
"pitch": 60, pitch: 60,
"width": 997, width: 997,
"zoom": 2.929837070560775 zoom: 2.929837070560775,
}, },
"autozoom": true, autozoom: true,
"color_picker": { color_picker: {
"a": 1, a: 1,
"b": 135, b: 135,
"g": 122, g: 122,
"r": 0 r: 0,
}, },
"target_color_picker": { target_color_picker: {
"r": 0, r: 0,
"g": 122, g: 122,
"b": 135, b: 135,
"a": 1 a: 1,
}, },
"dimension": null, dimension: null,
"label_colors": {}, label_colors: {},
"stroke_width": 1, stroke_width: 1,
"legend_position": "tr", legend_position: 'tr',
"legend_format": null, legend_format: null,
"js_columns": [], js_columns: [],
"js_data_mutator": "", js_data_mutator: '',
"js_tooltip": "", js_tooltip: '',
"js_onclick_href": "" js_onclick_href: '',
}} }}
/> />
), ),

View File

@ -1,363 +1,251 @@
/* eslint-disable sort-keys, no-magic-numbers */ /* eslint-disable sort-keys, no-magic-numbers */
export default { export default {
"cache_key": null, cache_key: null,
"cached_dttm": null, cached_dttm: null,
"cache_timeout": 86400, cache_timeout: 86400,
"error": null, error: null,
"form_data": { form_data: {
"datasource": "10__table", datasource: '10__table',
"viz_type": "deck_arc", viz_type: 'deck_arc',
"slice_id": 71, slice_id: 71,
"url_params": {}, url_params: {},
"granularity_sqla": "dttm", granularity_sqla: 'dttm',
"time_grain_sqla": null, time_grain_sqla: null,
"time_range": " : ", time_range: ' : ',
"start_spatial": { start_spatial: {
"type": "latlong", type: 'latlong',
"latCol": "LATITUDE", latCol: 'LATITUDE',
"lonCol": "LONGITUDE" lonCol: 'LONGITUDE',
}, },
"end_spatial": { end_spatial: {
"type": "latlong", type: 'latlong',
"latCol": "LATITUDE_DEST", latCol: 'LATITUDE_DEST',
"lonCol": "LONGITUDE_DEST" lonCol: 'LONGITUDE_DEST',
}, },
"row_limit": 5000, row_limit: 5000,
"filter_nulls": true, filter_nulls: true,
"adhoc_filters": [ adhoc_filters: [
{ {
"clause": "WHERE", clause: 'WHERE',
"expressionType": "SIMPLE", expressionType: 'SIMPLE',
"filterOptionName": "1b92e906-53a1-48e2-8e45-056fc5c9d2dc", filterOptionName: '1b92e906-53a1-48e2-8e45-056fc5c9d2dc',
"comparator": "", comparator: '',
"operator": "IS NOT NULL", operator: 'IS NOT NULL',
"subject": "LATITUDE" subject: 'LATITUDE',
}, },
{ {
"clause": "WHERE", clause: 'WHERE',
"expressionType": "SIMPLE", expressionType: 'SIMPLE',
"filterOptionName": "0ec864e8-e3e1-42cc-b0f8-4620dfc1c806", filterOptionName: '0ec864e8-e3e1-42cc-b0f8-4620dfc1c806',
"comparator": "", comparator: '',
"operator": "IS NOT NULL", operator: 'IS NOT NULL',
"subject": "LATITUDE_DEST" subject: 'LATITUDE_DEST',
}, },
{ {
"clause": "WHERE", clause: 'WHERE',
"expressionType": "SIMPLE", expressionType: 'SIMPLE',
"filterOptionName": "ecf4d524-eb35-45a8-b928-91398ebcf498", filterOptionName: 'ecf4d524-eb35-45a8-b928-91398ebcf498',
"comparator": "", comparator: '',
"operator": "IS NOT NULL", operator: 'IS NOT NULL',
"subject": "LONGITUDE" subject: 'LONGITUDE',
}, },
{ {
"clause": "WHERE", clause: 'WHERE',
"expressionType": "SIMPLE", expressionType: 'SIMPLE',
"filterOptionName": "5297586e-9c42-4c5a-bd5d-8a5fed4d698f", filterOptionName: '5297586e-9c42-4c5a-bd5d-8a5fed4d698f',
"comparator": "", comparator: '',
"operator": "IS NOT NULL", operator: 'IS NOT NULL',
"subject": "LONGITUDE_DEST" subject: 'LONGITUDE_DEST',
} },
], ],
"mapbox_style": "mapbox://styles/mapbox/light-v9", mapbox_style: 'mapbox://styles/mapbox/light-v9',
"viewport": { viewport: {
"altitude": 1.5, altitude: 1.5,
"bearing": 8.546256357301871, bearing: 8.546256357301871,
"height": 642, height: 642,
"latitude": 44.596651438714254, latitude: 44.596651438714254,
"longitude": -91.84340711201104, longitude: -91.84340711201104,
"maxLatitude": 85.05113, maxLatitude: 85.05113,
"maxPitch": 60, maxPitch: 60,
"maxZoom": 20, maxZoom: 20,
"minLatitude": -85.05113, minLatitude: -85.05113,
"minPitch": 0, minPitch: 0,
"minZoom": 0, minZoom: 0,
"pitch": 60, pitch: 60,
"width": 997, width: 997,
"zoom": 2.929837070560775 zoom: 2.929837070560775,
}, },
"autozoom": true, autozoom: true,
"color_picker": { color_picker: {
"a": 1, a: 1,
"b": 135, b: 135,
"g": 122, g: 122,
"r": 0 r: 0,
}, },
"target_color_picker": { target_color_picker: {
"r": 0, r: 0,
"g": 122, g: 122,
"b": 135, b: 135,
"a": 1 a: 1,
}, },
"dimension": null, dimension: null,
"color_scheme": "bnbColors", color_scheme: 'bnbColors',
"label_colors": {}, label_colors: {},
"stroke_width": 1, stroke_width: 1,
"legend_position": "tr", legend_position: 'tr',
"legend_format": null, legend_format: null,
"js_columns": [], js_columns: [],
"where": "", where: '',
"having": "", having: '',
"having_filters": [], having_filters: [],
"filters": [ filters: [
{ {
"col": "LATITUDE", col: 'LATITUDE',
"op": "IS NOT NULL", op: 'IS NOT NULL',
"val": "" val: '',
}, },
{ {
"col": "LATITUDE_DEST", col: 'LATITUDE_DEST',
"op": "IS NOT NULL", op: 'IS NOT NULL',
"val": "" val: '',
}, },
{ {
"col": "LONGITUDE", col: 'LONGITUDE',
"op": "IS NOT NULL", op: 'IS NOT NULL',
"val": "" val: '',
}, },
{ {
"col": "LONGITUDE_DEST", col: 'LONGITUDE_DEST',
"op": "IS NOT NULL", op: 'IS NOT NULL',
"val": "" val: '',
} },
] ],
}, },
"is_cached": false, is_cached: false,
"query": "SELECT \"LATITUDE\" AS \"LATITUDE\",\n \"LONGITUDE\" AS \"LONGITUDE\",\n \"LONGITUDE_DEST\" AS \"LONGITUDE_DEST\",\n \"LATITUDE_DEST\" AS \"LATITUDE_DEST\"\nFROM flights\nWHERE \"LATITUDE\" IS NOT NULL\n AND \"LATITUDE_DEST\" IS NOT NULL\n AND \"LONGITUDE\" IS NOT NULL\n AND \"LONGITUDE_DEST\" IS NOT NULL\nLIMIT 5000\nOFFSET 0", query:
"status": "success", 'SELECT "LATITUDE" AS "LATITUDE",\n "LONGITUDE" AS "LONGITUDE",\n "LONGITUDE_DEST" AS "LONGITUDE_DEST",\n "LATITUDE_DEST" AS "LATITUDE_DEST"\nFROM flights\nWHERE "LATITUDE" IS NOT NULL\n AND "LATITUDE_DEST" IS NOT NULL\n AND "LONGITUDE" IS NOT NULL\n AND "LONGITUDE_DEST" IS NOT NULL\nLIMIT 5000\nOFFSET 0',
"stacktrace": null, status: 'success',
"rowcount": 5000, stacktrace: null,
"data": { rowcount: 5000,
"features": [ data: {
features: [
{ {
"sourcePosition": [ sourcePosition: [-149.99618999999998, 61.174319999999994],
-149.99618999999998, targetPosition: [-122.30931000000001, 47.44898],
61.174319999999994 cat_color: null,
], __timestamp: null,
"targetPosition": [
-122.30931000000001,
47.44898
],
"cat_color": null,
"__timestamp": null
}, },
{ {
"sourcePosition": [ sourcePosition: [-118.40807, 33.94254],
-118.40807, targetPosition: [-80.09559, 26.683159999999997],
33.94254 cat_color: null,
], __timestamp: null,
"targetPosition": [
-80.09559,
26.683159999999997
],
"cat_color": null,
"__timestamp": null
}, },
{ {
"sourcePosition": [ sourcePosition: [-122.37483999999999, 37.619],
-122.37483999999999, targetPosition: [-80.94313000000001, 35.214009999999995],
37.619 cat_color: null,
], __timestamp: null,
"targetPosition": [
-80.94313000000001,
35.214009999999995
],
"cat_color": null,
"__timestamp": null
}, },
{ {
"sourcePosition": [ sourcePosition: [-118.40807, 33.94254],
-118.40807, targetPosition: [-80.29056, 25.79325],
33.94254 cat_color: null,
], __timestamp: null,
"targetPosition": [
-80.29056,
25.79325
],
"cat_color": null,
"__timestamp": null
}, },
{ {
"sourcePosition": [ sourcePosition: [-122.30931000000001, 47.44898],
-122.30931000000001, targetPosition: [-149.99618999999998, 61.174319999999994],
47.44898 cat_color: null,
], __timestamp: null,
"targetPosition": [
-149.99618999999998,
61.174319999999994
],
"cat_color": null,
"__timestamp": null
}, },
{ {
"sourcePosition": [ sourcePosition: [-122.37483999999999, 37.619],
-122.37483999999999, targetPosition: [-93.21692, 44.88055],
37.619 cat_color: null,
], __timestamp: null,
"targetPosition": [
-93.21692,
44.88055
],
"cat_color": null,
"__timestamp": null
}, },
{ {
"sourcePosition": [ sourcePosition: [-115.15233, 36.08036],
-115.15233, targetPosition: [-93.21692, 44.88055],
36.08036 cat_color: null,
], __timestamp: null,
"targetPosition": [
-93.21692,
44.88055
],
"cat_color": null,
"__timestamp": null
}, },
{ {
"sourcePosition": [ sourcePosition: [-118.40807, 33.94254],
-118.40807, targetPosition: [-80.94313000000001, 35.214009999999995],
33.94254 cat_color: null,
], __timestamp: null,
"targetPosition": [
-80.94313000000001,
35.214009999999995
],
"cat_color": null,
"__timestamp": null
}, },
{ {
"sourcePosition": [ sourcePosition: [-122.37483999999999, 37.619],
-122.37483999999999, targetPosition: [-97.0372, 32.89595],
37.619 cat_color: null,
], __timestamp: null,
"targetPosition": [
-97.0372,
32.89595
],
"cat_color": null,
"__timestamp": null
}, },
{ {
"sourcePosition": [ sourcePosition: [-115.15233, 36.08036],
-115.15233, targetPosition: [-84.42694, 33.640440000000005],
36.08036 cat_color: null,
], __timestamp: null,
"targetPosition": [
-84.42694,
33.640440000000005
],
"cat_color": null,
"__timestamp": null
}, },
{ {
"sourcePosition": [ sourcePosition: [-104.667, 39.85841],
-104.667, targetPosition: [-84.42694, 33.640440000000005],
39.85841 cat_color: null,
], __timestamp: null,
"targetPosition": [
-84.42694,
33.640440000000005
],
"cat_color": null,
"__timestamp": null
}, },
{ {
"sourcePosition": [ sourcePosition: [-115.15233, 36.08036],
-115.15233, targetPosition: [-80.29056, 25.79325],
36.08036 cat_color: null,
], __timestamp: null,
"targetPosition": [
-80.29056,
25.79325
],
"cat_color": null,
"__timestamp": null
}, },
{ {
"sourcePosition": [ sourcePosition: [-118.40807, 33.94254],
-118.40807, targetPosition: [-93.21692, 44.88055],
33.94254 cat_color: null,
], __timestamp: null,
"targetPosition": [
-93.21692,
44.88055
],
"cat_color": null,
"__timestamp": null
}, },
{ {
"sourcePosition": [ sourcePosition: [-111.97776999999999, 40.78839],
-111.97776999999999, targetPosition: [-84.42694, 33.640440000000005],
40.78839 cat_color: null,
], __timestamp: null,
"targetPosition": [
-84.42694,
33.640440000000005
],
"cat_color": null,
"__timestamp": null
}, },
{ {
"sourcePosition": [ sourcePosition: [-122.30931000000001, 47.44898],
-122.30931000000001, targetPosition: [-93.21692, 44.88055],
47.44898 cat_color: null,
], __timestamp: null,
"targetPosition": [
-93.21692,
44.88055
],
"cat_color": null,
"__timestamp": null
}, },
{ {
"sourcePosition": [ sourcePosition: [-149.99618999999998, 61.174319999999994],
-149.99618999999998, targetPosition: [-122.30931000000001, 47.44898],
61.174319999999994 cat_color: null,
], __timestamp: null,
"targetPosition": [
-122.30931000000001,
47.44898
],
"cat_color": null,
"__timestamp": null
}, },
{ {
"sourcePosition": [ sourcePosition: [-149.99618999999998, 61.174319999999994],
-149.99618999999998, targetPosition: [-122.30931000000001, 47.44898],
61.174319999999994 cat_color: null,
], __timestamp: null,
"targetPosition": [
-122.30931000000001,
47.44898
],
"cat_color": null,
"__timestamp": null
}, },
{ {
"sourcePosition": [ sourcePosition: [-122.37483999999999, 37.619],
-122.37483999999999, targetPosition: [-95.33972, 29.98047],
37.619 cat_color: null,
], __timestamp: null,
"targetPosition": [
-95.33972,
29.98047
],
"cat_color": null,
"__timestamp": null
}, },
{ {
"sourcePosition": [ sourcePosition: [-149.99618999999998, 61.174319999999994],
-149.99618999999998, targetPosition: [-122.5975, 45.58872],
61.174319999999994 cat_color: null,
], __timestamp: null,
"targetPosition": [
-122.5975,
45.58872
],
"cat_color": null,
"__timestamp": null
}, },
], ],
"mapboxApiKey": "pk.eyJ1Ijoia3Jpc3R3IiwiYSI6ImNqbGg1N242NTFlczczdnBhazViMjgzZ2sifQ.lUneM-o3NucXN189EYyXxQ" mapboxApiKey:
} 'pk.eyJ1Ijoia3Jpc3R3IiwiYSI6ImNqbGg1N242NTFlczczdnBhazViMjgzZ2sifQ.lUneM-o3NucXN189EYyXxQ',
} },
};

View File

@ -0,0 +1,51 @@
/* eslint-disable no-magic-numbers */
import React from 'react';
import { SuperChart } from '@superset-ui/chart';
import payload from './payload';
import dummyDatasource from '../../../shared/dummyDatasource';
export default [
{
renderStory: () => (
<SuperChart
chartType="deck_grid"
width={400}
height={400}
datasource={dummyDatasource}
queryData={payload}
formData={{
datasource: '5__table',
viz_type: 'deck_grid',
slice_id: 69,
url_params: {},
granularity_sqla: 'dttm',
time_grain_sqla: null,
time_range: '+:+',
spatial: { latCol: 'LAT', lonCol: 'LON', type: 'latlong' },
size: 'count',
row_limit: 5000,
filter_nulls: true,
adhoc_filters: [],
mapbox_style: 'mapbox://styles/mapbox/satellite-streets-v9',
viewport: {
bearing: 155.80099696026355,
latitude: 37.7942314882596,
longitude: -122.42066918995666,
pitch: 53.470800300695146,
zoom: 12.699690845482069,
},
color_picker: { a: 1, b: 0, g: 255, r: 14 },
autozoom: true,
grid_size: 120,
extruded: true,
js_columns: [],
js_data_mutator: '',
js_tooltip: '',
js_onclick_href: '',
}}
/>
),
storyName: 'Basic',
storyPath: 'legacy-|preset-chart-deckgl|GridChartPlugin',
},
];

View File

@ -0,0 +1,8 @@
import { GridChartPlugin } from '../../../../../superset-ui-legacy-preset-chart-deckgl';
import Stories from './Stories';
new GridChartPlugin().configure({ key: 'deck_grid' }).register();
export default {
examples: [...Stories],
};

View File

@ -0,0 +1,93 @@
export default {
cache_key: null,
cached_dttm: null,
cache_timeout: 86400,
error: null,
form_data: {
color_picker: { a: 1, b: 0, g: 255, r: 14 },
datasource: '5__table',
extruded: true,
granularity_sqla: 'dttm',
grid_size: 120,
groupby: [],
mapbox_style: 'mapbox://styles/mapbox/satellite-streets-v9',
point_radius: 'Auto',
point_radius_fixed: { type: 'fix', value: 2000 },
point_radius_unit: 'Pixels',
row_limit: 5000,
size: 'count',
spatial: { latCol: 'LAT', lonCol: 'LON', type: 'latlong' },
time_grain_sqla: null,
viewport: {
bearing: 155.80099696026355,
latitude: 37.7942314882596,
longitude: -122.42066918995666,
pitch: 53.470800300695146,
zoom: 12.699690845482069,
},
viz_type: 'deck_grid',
slice_id: 69,
time_range: ' : ',
adhoc_filters: [
{
clause: 'WHERE',
expressionType: 'SIMPLE',
filterOptionName: '72912258-6f4f-4f04-a570-58317ca49b11',
comparator: '',
operator: 'IS NOT NULL',
subject: 'LAT',
},
{
clause: 'WHERE',
expressionType: 'SIMPLE',
filterOptionName: '7e19669b-48ef-4be8-a7e1-8378dedb4c00',
comparator: '',
operator: 'IS NOT NULL',
subject: 'LON',
},
],
where: '',
having: '',
having_filters: [],
filters: [
{ col: 'LAT', op: 'IS NOT NULL', val: '' },
{ col: 'LON', op: 'IS NOT NULL', val: '' },
],
},
is_cached: false,
query:
'SELECT "LAT" AS "LAT",\n "LON" AS "LON",\n COUNT(*) AS count\nFROM\n (SELECT datetime,\n ROUND(LON*10000000)/10000000 as LON,\n ROUND(LAT*10000000)/10000000 as LAT, NUMBER , STREET,\n UNIT,\n CITY,\n DISTRICT,\n REGION,\n POSTCODE,\n ID occupancy,\n radius_miles,\n geohash,\n delimited\n FROM long_lat) AS expr_qry\nWHERE "LAT" IS NOT NULL\n AND "LON" IS NOT NULL\nGROUP BY "LAT",\n "LON"\nORDER BY count DESC\nLIMIT 5000\nOFFSET 0',
status: 'success',
stacktrace: null,
rowcount: 5000,
data: {
features: [
{ position: [-122.4221936, 37.7786083], weight: 2415 },
{ position: [-122.4101989, 37.7878771], weight: 2391 },
{ position: [-122.4205965, 37.8054735], weight: 1349 },
{ position: [-122.4125137, 37.7908413], weight: 1004 },
{ position: [-122.4088144, 37.7912984], weight: 816 },
{ position: [-122.3934248, 37.7776271], weight: 610 },
{ position: [-122.390972, 37.789376], weight: 460 },
{ position: [-122.3804676, 37.7334388], weight: 453 },
{ position: [-122.4214063, 37.7813858], weight: 453 },
{ position: [-122.3961419, 37.7905823], weight: 422 },
{ position: [-122.3922757, 37.7858294], weight: 376 },
{ position: [-122.3903881, 37.7826463], weight: 359 },
{ position: [-122.3936422, 37.7870311], weight: 353 },
{ position: [-122.435635, 37.7852314], weight: 306 },
{ position: [-122.3971336, 37.7790975], weight: 301 },
{ position: [-122.3921161, 37.7864536], weight: 300 },
{ position: [-122.390611, 37.7876797], weight: 292 },
{ position: [-122.4055041, 37.804244], weight: 291 },
{ position: [-122.4136476, 37.7910263], weight: 264 },
{ position: [-122.4224908, 37.7867552], weight: 247 },
{ position: [-122.4123203, 37.7784493], weight: 240 },
{ position: [-122.4368896, 37.7822303], weight: 239 },
{ position: [-122.389625, 37.7806302], weight: 237 },
],
mapboxApiKey:
'pk.eyJ1Ijoia3Jpc3R3IiwiYSI6ImNqbGg1N242NTFlczczdnBhazViMjgzZ2sifQ.lUneM-o3NucXN189EYyXxQ',
metricLabels: ['count'],
},
};

View File

@ -1,4 +1,4 @@
import { PathChartPlugin } from '../../../../../superset-ui-legacy-preset-chart-deckgl/src'; import { PathChartPlugin } from '../../../../../superset-ui-legacy-preset-chart-deckgl';
import Stories from './Stories'; import Stories from './Stories';
new PathChartPlugin().configure({ key: 'deck_path' }).register(); new PathChartPlugin().configure({ key: 'deck_path' }).register();