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",
"version": "0.0.0",
"description": "Superset Legacy Chart - deck.gl",
"sideEffects": [
"*.css"
],
"sideEffects": true,
"main": "lib/index.js",
"module": "esm/index.js",
"files": [

View File

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

View File

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