From b114a29f60831bb0053fc1541486df2bef361ed2 Mon Sep 17 00:00:00 2001
From: Krist Wongsuphasawat <krist.wongz@gmail.com>
Date: Wed, 18 Sep 2019 22:36:47 -0700
Subject: [PATCH] docs: add screengrid demo

---
 .../Scatter/payload.js                        | 1001 -----------------
 .../Screengrid/Stories.tsx                    |   50 +
 .../Screengrid/index.js                       |    8 +
 .../Screengrid/payload.js                     |  115 ++
 4 files changed, 173 insertions(+), 1001 deletions(-)
 create mode 100644 superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Screengrid/Stories.tsx
 create mode 100644 superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Screengrid/index.js
 create mode 100644 superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Screengrid/payload.js

diff --git a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Scatter/payload.js b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Scatter/payload.js
index 81152b104d..249f778d9c 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Scatter/payload.js
+++ b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Scatter/payload.js
@@ -200,1007 +200,6 @@ export default {
         position: [-122.4224908, 37.7867552],
         __timestamp: null,
       },
-      {
-        metric: 240,
-        radius: 240,
-        cat_color: null,
-        position: [-122.4123203, 37.7784493],
-        __timestamp: null,
-      },
-      {
-        metric: 239,
-        radius: 239,
-        cat_color: null,
-        position: [-122.4368896, 37.7822303],
-        __timestamp: null,
-      },
-      {
-        metric: 237,
-        radius: 237,
-        cat_color: null,
-        position: [-122.389625, 37.7806302],
-        __timestamp: null,
-      },
-      {
-        metric: 237,
-        radius: 237,
-        cat_color: null,
-        position: [-122.3990823, 37.7831803],
-        __timestamp: null,
-      },
-      {
-        metric: 219,
-        radius: 219,
-        cat_color: null,
-        position: [-122.3959614, 37.7740032],
-        __timestamp: null,
-      },
-      {
-        metric: 216,
-        radius: 216,
-        cat_color: null,
-        position: [-122.4041783, 37.8044503],
-        __timestamp: null,
-      },
-      {
-        metric: 210,
-        radius: 210,
-        cat_color: null,
-        position: [-122.4005582, 37.7706919],
-        __timestamp: null,
-      },
-      {
-        metric: 209,
-        radius: 209,
-        cat_color: null,
-        position: [-122.4040784, 37.8034687],
-        __timestamp: null,
-      },
-      {
-        metric: 208,
-        radius: 208,
-        cat_color: null,
-        position: [-122.418513, 37.7717131],
-        __timestamp: null,
-      },
-      {
-        metric: 202,
-        radius: 202,
-        cat_color: null,
-        position: [-122.4127266, 37.7899451],
-        __timestamp: null,
-      },
-      {
-        metric: 201,
-        radius: 201,
-        cat_color: null,
-        position: [-122.402292, 37.7808479],
-        __timestamp: null,
-      },
-      {
-        metric: 200,
-        radius: 200,
-        cat_color: null,
-        position: [-122.391326, 37.7892785],
-        __timestamp: null,
-      },
-      {
-        metric: 198,
-        radius: 198,
-        cat_color: null,
-        position: [-122.3882041, 37.7195347],
-        __timestamp: null,
-      },
-      {
-        metric: 197,
-        radius: 197,
-        cat_color: null,
-        position: [-122.3917766, 37.7876762],
-        __timestamp: null,
-      },
-      {
-        metric: 196,
-        radius: 196,
-        cat_color: null,
-        position: [-122.4151204, 37.78524],
-        __timestamp: null,
-      },
-      {
-        metric: 191,
-        radius: 191,
-        cat_color: null,
-        position: [-122.3902944, 37.7836002],
-        __timestamp: null,
-      },
-      {
-        metric: 190,
-        radius: 190,
-        cat_color: null,
-        position: [-122.4162567, 37.775248],
-        __timestamp: null,
-      },
-      {
-        metric: 190,
-        radius: 190,
-        cat_color: null,
-        position: [-122.404391, 37.7853957],
-        __timestamp: null,
-      },
-      {
-        metric: 180,
-        radius: 180,
-        cat_color: null,
-        position: [-122.479301, 37.7269377],
-        __timestamp: null,
-      },
-      {
-        metric: 176,
-        radius: 176,
-        cat_color: null,
-        position: [-122.396631, 37.7536653],
-        __timestamp: null,
-      },
-      {
-        metric: 175,
-        radius: 175,
-        cat_color: null,
-        position: [-122.3990994, 37.7866056],
-        __timestamp: null,
-      },
-      {
-        metric: 166,
-        radius: 166,
-        cat_color: null,
-        position: [-122.3990304, 37.7857742],
-        __timestamp: null,
-      },
-      {
-        metric: 165,
-        radius: 165,
-        cat_color: null,
-        position: [-122.4032414, 37.7640112],
-        __timestamp: null,
-      },
-      {
-        metric: 165,
-        radius: 165,
-        cat_color: null,
-        position: [-122.4242026, 37.7867158],
-        __timestamp: null,
-      },
-      {
-        metric: 164,
-        radius: 164,
-        cat_color: null,
-        position: [-122.4258311, 37.7863612],
-        __timestamp: null,
-      },
-      {
-        metric: 161,
-        radius: 161,
-        cat_color: null,
-        position: [-122.4125675, 37.7903477],
-        __timestamp: null,
-      },
-      {
-        metric: 159,
-        radius: 159,
-        cat_color: null,
-        position: [-122.390987, 37.7870388],
-        __timestamp: null,
-      },
-      {
-        metric: 159,
-        radius: 159,
-        cat_color: null,
-        position: [-122.3897745, 37.7879511],
-        __timestamp: null,
-      },
-      {
-        metric: 155,
-        radius: 155,
-        cat_color: null,
-        position: [-122.3914536, 37.778756],
-        __timestamp: null,
-      },
-      {
-        metric: 154,
-        radius: 154,
-        cat_color: null,
-        position: [-122.4234277, 37.7934317],
-        __timestamp: null,
-      },
-      {
-        metric: 151,
-        radius: 151,
-        cat_color: null,
-        position: [-122.4269748, 37.7843846],
-        __timestamp: null,
-      },
-      {
-        metric: 145,
-        radius: 145,
-        cat_color: null,
-        position: [-122.4280333, 37.772907],
-        __timestamp: null,
-      },
-      {
-        metric: 138,
-        radius: 138,
-        cat_color: null,
-        position: [-122.4241225, 37.7847776],
-        __timestamp: null,
-      },
-      {
-        metric: 137,
-        radius: 137,
-        cat_color: null,
-        position: [-122.3890662, 37.7862368],
-        __timestamp: null,
-      },
-      {
-        metric: 136,
-        radius: 136,
-        cat_color: null,
-        position: [-122.4248444, 37.8053682],
-        __timestamp: null,
-      },
-      {
-        metric: 134,
-        radius: 134,
-        cat_color: null,
-        position: [-122.4456259, 37.7767141],
-        __timestamp: null,
-      },
-      {
-        metric: 128,
-        radius: 128,
-        cat_color: null,
-        position: [-122.4219866, 37.7739704],
-        __timestamp: null,
-      },
-      {
-        metric: 128,
-        radius: 128,
-        cat_color: null,
-        position: [-122.3935806, 37.7836994],
-        __timestamp: null,
-      },
-      {
-        metric: 128,
-        radius: 128,
-        cat_color: null,
-        position: [-122.4294984, 37.7906814],
-        __timestamp: null,
-      },
-      {
-        metric: 127,
-        radius: 127,
-        cat_color: null,
-        position: [-122.4249164, 37.7654623],
-        __timestamp: null,
-      },
-      {
-        metric: 125,
-        radius: 125,
-        cat_color: null,
-        position: [-122.4098298, 37.7883096],
-        __timestamp: null,
-      },
-      {
-        metric: 125,
-        radius: 125,
-        cat_color: null,
-        position: [-122.4241574, 37.8055099],
-        __timestamp: null,
-      },
-      {
-        metric: 123,
-        radius: 123,
-        cat_color: null,
-        position: [-122.3874914, 37.736508],
-        __timestamp: null,
-      },
-      {
-        metric: 123,
-        radius: 123,
-        cat_color: null,
-        position: [-122.3885491, 37.7718543],
-        __timestamp: null,
-      },
-      {
-        metric: 122,
-        radius: 122,
-        cat_color: null,
-        position: [-122.4198501, 37.7760628],
-        __timestamp: null,
-      },
-      {
-        metric: 120,
-        radius: 120,
-        cat_color: null,
-        position: [-122.4316456, 37.7372828],
-        __timestamp: null,
-      },
-      {
-        metric: 117,
-        radius: 117,
-        cat_color: null,
-        position: [-122.3969044, 37.784754],
-        __timestamp: null,
-      },
-      {
-        metric: 116,
-        radius: 116,
-        cat_color: null,
-        position: [-122.3770931, 37.7306292],
-        __timestamp: null,
-      },
-      {
-        metric: 115,
-        radius: 115,
-        cat_color: null,
-        position: [-122.42648, 37.7699618],
-        __timestamp: null,
-      },
-      {
-        metric: 113,
-        radius: 113,
-        cat_color: null,
-        position: [-122.4616313, 37.7256268],
-        __timestamp: null,
-      },
-      {
-        metric: 113,
-        radius: 113,
-        cat_color: null,
-        position: [-122.390422, 37.780971],
-        __timestamp: null,
-      },
-      {
-        metric: 112,
-        radius: 112,
-        cat_color: null,
-        position: [-122.4152177, 37.7984467],
-        __timestamp: null,
-      },
-      {
-        metric: 111,
-        radius: 111,
-        cat_color: null,
-        position: [-122.3959171, 37.7734891],
-        __timestamp: null,
-      },
-      {
-        metric: 111,
-        radius: 111,
-        cat_color: null,
-        position: [-122.428774, 37.7757156],
-        __timestamp: null,
-      },
-      {
-        metric: 110,
-        radius: 110,
-        cat_color: null,
-        position: [-122.3974833, 37.7530487],
-        __timestamp: null,
-      },
-      {
-        metric: 110,
-        radius: 110,
-        cat_color: null,
-        position: [-122.401043, 37.7876709],
-        __timestamp: null,
-      },
-      {
-        metric: 108,
-        radius: 108,
-        cat_color: null,
-        position: [-122.4148824, 37.7936211],
-        __timestamp: null,
-      },
-      {
-        metric: 107,
-        radius: 107,
-        cat_color: null,
-        position: [-122.3880203, 37.7627031],
-        __timestamp: null,
-      },
-      {
-        metric: 106,
-        radius: 106,
-        cat_color: null,
-        position: [-122.3846219, 37.7367678],
-        __timestamp: null,
-      },
-      {
-        metric: 104,
-        radius: 104,
-        cat_color: null,
-        position: [-122.3881715, 37.7713694],
-        __timestamp: null,
-      },
-      {
-        metric: 104,
-        radius: 104,
-        cat_color: null,
-        position: [-122.4325115, 37.7780361],
-        __timestamp: null,
-      },
-      {
-        metric: 104,
-        radius: 104,
-        cat_color: null,
-        position: [-122.4033087, 37.7881982],
-        __timestamp: null,
-      },
-      {
-        metric: 103,
-        radius: 103,
-        cat_color: null,
-        position: [-122.389154, 37.7713087],
-        __timestamp: null,
-      },
-      {
-        metric: 103,
-        radius: 103,
-        cat_color: null,
-        position: [-122.3995747, 37.7743789],
-        __timestamp: null,
-      },
-      {
-        metric: 103,
-        radius: 103,
-        cat_color: null,
-        position: [-122.3990003, 37.7815105],
-        __timestamp: null,
-      },
-      {
-        metric: 103,
-        radius: 103,
-        cat_color: null,
-        position: [-122.3942913, 37.7861477],
-        __timestamp: null,
-      },
-      {
-        metric: 102,
-        radius: 102,
-        cat_color: null,
-        position: [-122.4398489, 37.7672847],
-        __timestamp: null,
-      },
-      {
-        metric: 102,
-        radius: 102,
-        cat_color: null,
-        position: [-122.3972245, 37.7763364],
-        __timestamp: null,
-      },
-      {
-        metric: 102,
-        radius: 102,
-        cat_color: null,
-        position: [-122.4013752, 37.7862905],
-        __timestamp: null,
-      },
-      {
-        metric: 101,
-        radius: 101,
-        cat_color: null,
-        position: [-122.3754003, 37.731093],
-        __timestamp: null,
-      },
-      {
-        metric: 101,
-        radius: 101,
-        cat_color: null,
-        position: [-122.4275586, 37.7786898],
-        __timestamp: null,
-      },
-      {
-        metric: 100,
-        radius: 100,
-        cat_color: null,
-        position: [-122.3949232, 37.7742967],
-        __timestamp: null,
-      },
-      {
-        metric: 100,
-        radius: 100,
-        cat_color: null,
-        position: [-122.4348578, 37.7815968],
-        __timestamp: null,
-      },
-      {
-        metric: 99,
-        radius: 99,
-        cat_color: null,
-        position: [-122.3942758, 37.7748207],
-        __timestamp: null,
-      },
-      {
-        metric: 98,
-        radius: 98,
-        cat_color: null,
-        position: [-122.4973649, 37.7162308],
-        __timestamp: null,
-      },
-      {
-        metric: 98,
-        radius: 98,
-        cat_color: null,
-        position: [-122.4078006, 37.7947168],
-        __timestamp: null,
-      },
-      {
-        metric: 97,
-        radius: 97,
-        cat_color: null,
-        position: [-122.4145241, 37.7916716],
-        __timestamp: null,
-      },
-      {
-        metric: 96,
-        radius: 96,
-        cat_color: null,
-        position: [-122.4562152, 37.7654561],
-        __timestamp: null,
-      },
-      {
-        metric: 96,
-        radius: 96,
-        cat_color: null,
-        position: [-122.4190133, 37.7852962],
-        __timestamp: null,
-      },
-      {
-        metric: 95,
-        radius: 95,
-        cat_color: null,
-        position: [-122.39257, 37.7796877],
-        __timestamp: null,
-      },
-      {
-        metric: 95,
-        radius: 95,
-        cat_color: null,
-        position: [-122.3973983, 37.785746],
-        __timestamp: null,
-      },
-      {
-        metric: 94,
-        radius: 94,
-        cat_color: null,
-        position: [-122.4289437, 37.7775571],
-        __timestamp: null,
-      },
-      {
-        metric: 93,
-        radius: 93,
-        cat_color: null,
-        position: [-122.3974306, 37.751691],
-        __timestamp: null,
-      },
-      {
-        metric: 93,
-        radius: 93,
-        cat_color: null,
-        position: [-122.3957779, 37.7781632],
-        __timestamp: null,
-      },
-      {
-        metric: 90,
-        radius: 90,
-        cat_color: null,
-        position: [-122.4670915, 37.7102813],
-        __timestamp: null,
-      },
-      {
-        metric: 90,
-        radius: 90,
-        cat_color: null,
-        position: [-122.3997235, 37.7604593],
-        __timestamp: null,
-      },
-      {
-        metric: 90,
-        radius: 90,
-        cat_color: null,
-        position: [-122.4124476, 37.8043619],
-        __timestamp: null,
-      },
-      {
-        metric: 89,
-        radius: 89,
-        cat_color: null,
-        position: [-122.4166169, 37.7327776],
-        __timestamp: null,
-      },
-      {
-        metric: 88,
-        radius: 88,
-        cat_color: null,
-        position: [-122.3827432, 37.731301],
-        __timestamp: null,
-      },
-      {
-        metric: 88,
-        radius: 88,
-        cat_color: null,
-        position: [-122.4251708, 37.7789497],
-        __timestamp: null,
-      },
-      {
-        metric: 87,
-        radius: 87,
-        cat_color: null,
-        position: [-122.4666006, 37.7105041],
-        __timestamp: null,
-      },
-      {
-        metric: 86,
-        radius: 86,
-        cat_color: null,
-        position: [-122.412445, 37.7101158],
-        __timestamp: null,
-      },
-      {
-        metric: 86,
-        radius: 86,
-        cat_color: null,
-        position: [-122.4251559, 37.7799355],
-        __timestamp: null,
-      },
-      {
-        metric: 84,
-        radius: 84,
-        cat_color: null,
-        position: [-122.3966726, 37.784187],
-        __timestamp: null,
-      },
-      {
-        metric: 84,
-        radius: 84,
-        cat_color: null,
-        position: [-122.4297868, 37.7952767],
-        __timestamp: null,
-      },
-      {
-        metric: 83,
-        radius: 83,
-        cat_color: null,
-        position: [-122.4231996, 37.7670987],
-        __timestamp: null,
-      },
-      {
-        metric: 81,
-        radius: 81,
-        cat_color: null,
-        position: [-122.4284407, 37.7834078],
-        __timestamp: null,
-      },
-      {
-        metric: 81,
-        radius: 81,
-        cat_color: null,
-        position: [-122.4243158, 37.7935189],
-        __timestamp: null,
-      },
-      {
-        metric: 80,
-        radius: 80,
-        cat_color: null,
-        position: [-122.4014214, 37.7814419],
-        __timestamp: null,
-      },
-      {
-        metric: 77,
-        radius: 77,
-        cat_color: null,
-        position: [-122.4143391, 37.7910768],
-        __timestamp: null,
-      },
-      {
-        metric: 77,
-        radius: 77,
-        cat_color: null,
-        position: [-122.4132054, 37.7986072],
-        __timestamp: null,
-      },
-      {
-        metric: 76,
-        radius: 76,
-        cat_color: null,
-        position: [-122.3785396, 37.7354324],
-        __timestamp: null,
-      },
-      {
-        metric: 75,
-        radius: 75,
-        cat_color: null,
-        position: [-122.4204315, 37.7824191],
-        __timestamp: null,
-      },
-      {
-        metric: 75,
-        radius: 75,
-        cat_color: null,
-        position: [-122.4267148, 37.783611],
-        __timestamp: null,
-      },
-      {
-        metric: 75,
-        radius: 75,
-        cat_color: null,
-        position: [-122.4244491, 37.7858963],
-        __timestamp: null,
-      },
-      {
-        metric: 73,
-        radius: 73,
-        cat_color: null,
-        position: [-122.4680678, 37.7097529],
-        __timestamp: null,
-      },
-      {
-        metric: 73,
-        radius: 73,
-        cat_color: null,
-        position: [-122.3925795, 37.7881395],
-        __timestamp: null,
-      },
-      {
-        metric: 73,
-        radius: 73,
-        cat_color: null,
-        position: [-122.3897574, 37.7898033],
-        __timestamp: null,
-      },
-      {
-        metric: 72,
-        radius: 72,
-        cat_color: null,
-        position: [-122.3885141, 37.7111451],
-        __timestamp: null,
-      },
-      {
-        metric: 72,
-        radius: 72,
-        cat_color: null,
-        position: [-122.4809081, 37.7182663],
-        __timestamp: null,
-      },
-      {
-        metric: 72,
-        radius: 72,
-        cat_color: null,
-        position: [-122.4274323, 37.7777194],
-        __timestamp: null,
-      },
-      {
-        metric: 72,
-        radius: 72,
-        cat_color: null,
-        position: [-122.4123982, 37.8062504],
-        __timestamp: null,
-      },
-      {
-        metric: 71,
-        radius: 71,
-        cat_color: null,
-        position: [-122.422273, 37.7943068],
-        __timestamp: null,
-      },
-      {
-        metric: 71,
-        radius: 71,
-        cat_color: null,
-        position: [-122.4000919, 37.7980271],
-        __timestamp: null,
-      },
-      {
-        metric: 70,
-        radius: 70,
-        cat_color: null,
-        position: [-122.3954304, 37.7540596],
-        __timestamp: null,
-      },
-      {
-        metric: 70,
-        radius: 70,
-        cat_color: null,
-        position: [-122.4387317, 37.7736104],
-        __timestamp: null,
-      },
-      {
-        metric: 70,
-        radius: 70,
-        cat_color: null,
-        position: [-122.4344017, 37.7862156],
-        __timestamp: null,
-      },
-      {
-        metric: 69,
-        radius: 69,
-        cat_color: null,
-        position: [-122.4130293, 37.7977825],
-        __timestamp: null,
-      },
-      {
-        metric: 68,
-        radius: 68,
-        cat_color: null,
-        position: [-122.4822195, 37.7197635],
-        __timestamp: null,
-      },
-      {
-        metric: 68,
-        radius: 68,
-        cat_color: null,
-        position: [-122.431977, 37.7819513],
-        __timestamp: null,
-      },
-      {
-        metric: 68,
-        radius: 68,
-        cat_color: null,
-        position: [-122.3981667, 37.7922174],
-        __timestamp: null,
-      },
-      {
-        metric: 67,
-        radius: 67,
-        cat_color: null,
-        position: [-122.3964634, 37.7730696],
-        __timestamp: null,
-      },
-      {
-        metric: 67,
-        radius: 67,
-        cat_color: null,
-        position: [-122.3896883, 37.7827749],
-        __timestamp: null,
-      },
-      {
-        metric: 67,
-        radius: 67,
-        cat_color: null,
-        position: [-122.3889727, 37.7874652],
-        __timestamp: null,
-      },
-      {
-        metric: 67,
-        radius: 67,
-        cat_color: null,
-        position: [-122.4173941, 37.7982345],
-        __timestamp: null,
-      },
-      {
-        metric: 66,
-        radius: 66,
-        cat_color: null,
-        position: [-122.4761155, 37.7176378],
-        __timestamp: null,
-      },
-      {
-        metric: 66,
-        radius: 66,
-        cat_color: null,
-        position: [-122.3814553, 37.7359307],
-        __timestamp: null,
-      },
-      {
-        metric: 66,
-        radius: 66,
-        cat_color: null,
-        position: [-122.4318126, 37.7939966],
-        __timestamp: null,
-      },
-      {
-        metric: 66,
-        radius: 66,
-        cat_color: null,
-        position: [-122.4248488, 37.8005733],
-        __timestamp: null,
-      },
-      {
-        metric: 64,
-        radius: 64,
-        cat_color: null,
-        position: [-122.3901807, 37.7108397],
-        __timestamp: null,
-      },
-      {
-        metric: 64,
-        radius: 64,
-        cat_color: null,
-        position: [-122.3892491, 37.7109189],
-        __timestamp: null,
-      },
-      {
-        metric: 64,
-        radius: 64,
-        cat_color: null,
-        position: [-122.4838683, 37.7192013],
-        __timestamp: null,
-      },
-      {
-        metric: 64,
-        radius: 64,
-        cat_color: null,
-        position: [-122.36973, 37.729066],
-        __timestamp: null,
-      },
-      {
-        metric: 64,
-        radius: 64,
-        cat_color: null,
-        position: [-122.3987659, 37.7618873],
-        __timestamp: null,
-      },
-      {
-        metric: 64,
-        radius: 64,
-        cat_color: null,
-        position: [-122.3965766, 37.7734164],
-        __timestamp: null,
-      },
-      {
-        metric: 63,
-        radius: 63,
-        cat_color: null,
-        position: [-122.3714307, 37.729009],
-        __timestamp: null,
-      },
-      {
-        metric: 63,
-        radius: 63,
-        cat_color: null,
-        position: [-122.4222239, 37.7377139],
-        __timestamp: null,
-      },
-      {
-        metric: 63,
-        radius: 63,
-        cat_color: null,
-        position: [-122.4277775, 37.7796098],
-        __timestamp: null,
-      },
-      {
-        metric: 63,
-        radius: 63,
-        cat_color: null,
-        position: [-122.4418562, 37.7817478],
-        __timestamp: null,
-      },
-      {
-        metric: 63,
-        radius: 63,
-        cat_color: null,
-        position: [-122.4076891, 37.7831726],
-        __timestamp: null,
-      },
-      {
-        metric: 63,
-        radius: 63,
-        cat_color: null,
-        position: [-122.3863637, 37.788124],
-        __timestamp: null,
-      },
-      {
-        metric: 62,
-        radius: 62,
-        cat_color: null,
-        position: [-122.4677755, 37.7099036],
-        __timestamp: null,
-      },
-      {
-        metric: 62,
-        radius: 62,
-        cat_color: null,
-        position: [-122.3910167, 37.7260057],
-        __timestamp: null,
-      },
     ],
     mapboxApiKey:
       'pk.eyJ1Ijoia3Jpc3R3IiwiYSI6ImNqbGg1N242NTFlczczdnBhazViMjgzZ2sifQ.lUneM-o3NucXN189EYyXxQ',
diff --git a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Screengrid/Stories.tsx b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Screengrid/Stories.tsx
new file mode 100644
index 0000000000..310baf59e0
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Screengrid/Stories.tsx
@@ -0,0 +1,50 @@
+/* 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_screengrid"
+        width={400}
+        height={400}
+        datasource={dummyDatasource}
+        queryData={payload}
+        formData={{
+          datasource: '5__table',
+          viz_type: 'deck_screengrid',
+          slice_id: 67,
+          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/dark-v9',
+          viewport: {
+            bearing: -4.952916738791771,
+            latitude: 37.76024135844065,
+            longitude: -122.41827069521386,
+            pitch: 4.750411100577438,
+            zoom: 14.161641703941438,
+          },
+          autozoom: true,
+          grid_size: 20,
+          color_picker: { a: 1, b: 0, g: 255, r: 14 },
+          js_columns: [],
+          js_data_mutator: '',
+          js_tooltip: '',
+          js_onclick_href: '',
+        }}
+      />
+    ),
+    storyName: 'Basic',
+    storyPath: 'legacy-|preset-chart-deckgl|ScreengridChartPlugin',
+  },
+];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Screengrid/index.js b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Screengrid/index.js
new file mode 100644
index 0000000000..266dbc5b85
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Screengrid/index.js
@@ -0,0 +1,8 @@
+import { ScreengridChartPlugin } from '../../../../../superset-ui-legacy-preset-chart-deckgl/src';
+import Stories from './Stories';
+
+new ScreengridChartPlugin().configure({ key: 'deck_screengrid' }).register();
+
+export default {
+  examples: [...Stories],
+};
diff --git a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Screengrid/payload.js b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Screengrid/payload.js
new file mode 100644
index 0000000000..98ed953544
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-deckgl/Screengrid/payload.js
@@ -0,0 +1,115 @@
+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',
+    granularity_sqla: 'dttm',
+    grid_size: 20,
+    groupby: [],
+    mapbox_style: 'mapbox://styles/mapbox/dark-v9',
+    point_radius: 'Auto',
+    point_radius_fixed: { type: 'fix', value: 2000 },
+    point_unit: 'square_m',
+    row_limit: 5000,
+    size: 'count',
+    spatial: { latCol: 'LAT', lonCol: 'LON', type: 'latlong' },
+    time_grain_sqla: null,
+    viewport: {
+      bearing: -4.952916738791771,
+      latitude: 37.76024135844065,
+      longitude: -122.41827069521386,
+      pitch: 4.750411100577438,
+      zoom: 14.161641703941438,
+    },
+    viz_type: 'deck_screengrid',
+    slice_id: 67,
+    time_range: ' : ',
+    adhoc_filters: [
+      {
+        clause: 'WHERE',
+        expressionType: 'SIMPLE',
+        filterOptionName: '341bf332-81fe-4f9e-837e-90a4d8b8b9f0',
+        comparator: '',
+        operator: 'IS NOT NULL',
+        subject: 'LAT',
+      },
+      {
+        clause: 'WHERE',
+        expressionType: 'SIMPLE',
+        filterOptionName: '453dd738-e394-4ea2-bbe9-a7b59bf5e0cc',
+        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, __timestamp: null },
+      { position: [-122.4101989, 37.7878771], weight: 2391, __timestamp: null },
+      { position: [-122.4205965, 37.8054735], weight: 1349, __timestamp: null },
+      { position: [-122.4125137, 37.7908413], weight: 1004, __timestamp: null },
+      { position: [-122.4088144, 37.7912984], weight: 816, __timestamp: null },
+      { position: [-122.3934248, 37.7776271], weight: 610, __timestamp: null },
+      { position: [-122.390972, 37.789376], weight: 460, __timestamp: null },
+      { position: [-122.3804676, 37.7334388], weight: 453, __timestamp: null },
+      { position: [-122.4214063, 37.7813858], weight: 453, __timestamp: null },
+      { position: [-122.3961419, 37.7905823], weight: 422, __timestamp: null },
+      { position: [-122.3922757, 37.7858294], weight: 376, __timestamp: null },
+      { position: [-122.3903881, 37.7826463], weight: 359, __timestamp: null },
+      { position: [-122.3936422, 37.7870311], weight: 353, __timestamp: null },
+      { position: [-122.435635, 37.7852314], weight: 306, __timestamp: null },
+      { position: [-122.3971336, 37.7790975], weight: 301, __timestamp: null },
+      { position: [-122.3921161, 37.7864536], weight: 300, __timestamp: null },
+      { position: [-122.390611, 37.7876797], weight: 292, __timestamp: null },
+      { position: [-122.4055041, 37.804244], weight: 291, __timestamp: null },
+      { position: [-122.4136476, 37.7910263], weight: 264, __timestamp: null },
+      { position: [-122.4224908, 37.7867552], weight: 247, __timestamp: null },
+      { position: [-122.4123203, 37.7784493], weight: 240, __timestamp: null },
+      { position: [-122.4368896, 37.7822303], weight: 239, __timestamp: null },
+      { position: [-122.389625, 37.7806302], weight: 237, __timestamp: null },
+      { position: [-122.3990823, 37.7831803], weight: 237, __timestamp: null },
+      { position: [-122.3959614, 37.7740032], weight: 219, __timestamp: null },
+      { position: [-122.4041783, 37.8044503], weight: 216, __timestamp: null },
+      { position: [-122.4005582, 37.7706919], weight: 210, __timestamp: null },
+      { position: [-122.4040784, 37.8034687], weight: 209, __timestamp: null },
+      { position: [-122.418513, 37.7717131], weight: 208, __timestamp: null },
+      { position: [-122.4127266, 37.7899451], weight: 202, __timestamp: null },
+      { position: [-122.402292, 37.7808479], weight: 201, __timestamp: null },
+      { position: [-122.391326, 37.7892785], weight: 200, __timestamp: null },
+      { position: [-122.3882041, 37.7195347], weight: 198, __timestamp: null },
+      { position: [-122.3917766, 37.7876762], weight: 197, __timestamp: null },
+      { position: [-122.4151204, 37.78524], weight: 196, __timestamp: null },
+      { position: [-122.3902944, 37.7836002], weight: 191, __timestamp: null },
+      { position: [-122.4162567, 37.775248], weight: 190, __timestamp: null },
+      { position: [-122.404391, 37.7853957], weight: 190, __timestamp: null },
+      { position: [-122.479301, 37.7269377], weight: 180, __timestamp: null },
+      { position: [-122.396631, 37.7536653], weight: 176, __timestamp: null },
+      { position: [-122.3990994, 37.7866056], weight: 175, __timestamp: null },
+      { position: [-122.3990304, 37.7857742], weight: 166, __timestamp: null },
+      { position: [-122.4032414, 37.7640112], weight: 165, __timestamp: null },
+      { position: [-122.4242026, 37.7867158], weight: 165, __timestamp: null },
+      { position: [-122.4258311, 37.7863612], weight: 164, __timestamp: null },
+      { position: [-122.4125675, 37.7903477], weight: 161, __timestamp: null },
+    ],
+    mapboxApiKey:
+      'pk.eyJ1Ijoia3Jpc3R3IiwiYSI6ImNqbGg1N242NTFlczczdnBhazViMjgzZ2sifQ.lUneM-o3NucXN189EYyXxQ',
+    metricLabels: ['count'],
+  },
+};