From a69b8596cefa2884e1ec11c436f9d791360b9678 Mon Sep 17 00:00:00 2001
From: Krist Wongsuphasawat <krist.wongz@gmail.com>
Date: Sun, 10 Nov 2019 17:52:45 -0800
Subject: [PATCH] docs: update table example to test larger dataset

---
 .../stories/plugin-chart-table/Stories.jsx    | 36 +++++++++++++++++--
 .../stories/plugin-chart-table/bigData.js     | 34 ------------------
 .../plugin-chart-table/generateData.js        | 36 +++++++++++++++++++
 3 files changed, 69 insertions(+), 37 deletions(-)
 delete mode 100644 packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/bigData.js
 create mode 100644 packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/generateData.js

diff --git a/packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/Stories.jsx b/packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/Stories.jsx
index b2e1a8fbc..b79f27973 100644
--- a/packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/Stories.jsx
+++ b/packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/Stories.jsx
@@ -3,7 +3,10 @@ import React from 'react';
 import { SuperChart } from '@superset-ui/chart';
 import dataLegacy from './dataLegacy';
 import data from './data';
-import bigData from './bigData';
+import generateData from './generateData';
+
+const dataset30Rows = { data: generateData(30) };
+const dataset1000Rows = { data: generateData(1000) };
 
 export default [
   {
@@ -117,10 +120,37 @@ export default [
           tableTimestampFormat: '%Y-%m-%d %H:%M:%S',
           timeseriesLimitMetric: null,
         }}
-        queryData={{ data: bigData }}
+        queryData={dataset30Rows}
+      />
+    ),
+    storyName: '30 rows 20 columns',
+    storyPath: 'plugin-chart-table|TableChartPlugin',
+  },
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="table2"
+        key="bigTable"
+        datasource={{
+          columnFormats: {},
+          verboseMap: {},
+        }}
+        formData={{
+          alignPn: true,
+          colorPn: true,
+          includeSearch: true,
+          metrics: [],
+          orderDesc: true,
+          pageLength: 0,
+          percentMetrics: [],
+          tableFilter: false,
+          tableTimestampFormat: '%Y-%m-%d %H:%M:%S',
+          timeseriesLimitMetric: null,
+        }}
+        queryData={dataset1000Rows}
       />
     ),
-    storyName: 'BigTable',
+    storyName: '1000 rows 20 columns',
     storyPath: 'plugin-chart-table|TableChartPlugin',
   },
 ];
diff --git a/packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/bigData.js b/packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/bigData.js
deleted file mode 100644
index 6a811342b..000000000
--- a/packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/bigData.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/* eslint-disable no-unused-vars */
-/* eslint-disable no-magic-numbers */
-/* eslint-disable sort-keys */
-const ROW_COUNT = 30;
-const COLUMN_COUNT = 20;
-
-export const keys = ['ds', 'html'].concat(
-  Array(COLUMN_COUNT)
-    .fill(0)
-    .map((_, i) => `clm ${i}`),
-);
-
-const item = {};
-keys.forEach((key, i) => {
-  item[key] = Array(i + 1)
-    .fill(0)
-    .join('');
-});
-item.ds = '2019-09-09';
-
-const getHTML = () => {
-  const randomText = Array(Math.floor(Math.random() * 20))
-    .fill('very')
-    .join(' ');
-
-  return `<a href="www.google.com" target="_blank">Link Test with a ${randomText} long title</a>`;
-};
-
-export default Array(ROW_COUNT)
-  .fill(0)
-  .map(_ => ({
-    ...item,
-    html: getHTML(),
-  }));
diff --git a/packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/generateData.js b/packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/generateData.js
new file mode 100644
index 000000000..a0f8d18b2
--- /dev/null
+++ b/packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/generateData.js
@@ -0,0 +1,36 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable no-magic-numbers */
+/* eslint-disable sort-keys */
+
+const getHTML = () => {
+  const randomText = Array(Math.floor(Math.random() * 20))
+    .fill('very')
+    .join(' ');
+
+  return `<a href="www.google.com" target="_blank">Link Test with a ${randomText} long title</a>`;
+};
+
+export default function generateData(rowCount = 30, columnCount = 20) {
+  const columns = Array(columnCount)
+    .fill(0)
+    .map((_, i) => `clm ${i}`);
+
+  return Array(rowCount)
+    .fill(0)
+    .map((_, index) => ({
+      index: index + 1,
+      html: getHTML(),
+      ...columns.reduce(
+        (prev, key, i) => {
+          const obj = prev;
+          // eslint-disable-next-line no-restricted-properties
+          obj[key] = Math.round(Math.random() * Math.pow(10, i));
+
+          return obj;
+        },
+        {
+          ds: '2019-09-09',
+        },
+      ),
+    }));
+}