feat(playground): Support various chart libraries for dashboard generation

paveltiunov · paveltiunov · commit a4ba9c503e01 · 2019-09-27T15:02:57.000-07:00
diff --git a/packages/cubejs-playground/src/ChartContainer.jsx b/packages/cubejs-playground/src/ChartContainer.jsx
@@ -13,7 +13,7 @@ import PropTypes from 'prop-types';
 import PrismCode from './PrismCode';
 import { playgroundAction } from './events';
 
-const frameworks = [{
+export const frameworks = [{
   id: 'vanilla',
   title: 'Vanilla JavaScript',
   docsLink: 'https://cube.dev/docs/@cubejs-client-core'
@@ -103,8 +103,6 @@ class ChartContainer extends React.Component {
 
     const parameters = getParameters(this.codeSandboxDefinition(codeSandboxSource, dependencies));
 
-    console.log(chartLibraries);
-
     const chartLibrariesMenu = (
       <Menu
         onClick={(e) => {
diff --git a/packages/cubejs-playground/src/ChartRenderer.js b/packages/cubejs-playground/src/ChartRenderer.js
@@ -68,10 +68,12 @@ const rootElement = document.getElementById("root");
 ReactDOM.render(<ChartRenderer />, rootElement);
 `;
 
-export const selectChartLibrary = (chartType, chartLibrary) => {
-  return ['table', 'number'].indexOf(chartType) !== -1
-    ? tablesLibrary : libraryToTemplate[chartLibrary].library;
-};
+export const selectChartLibrary = (chartType, chartLibrary) => (
+  ['table', 'number'].indexOf(chartType) !== -1 ? tablesLibrary : libraryToTemplate[chartLibrary].library
+);
+
+export const chartLibraries = Object.keys(libraryToTemplate)
+  .map(k => ({ value: k, title: libraryToTemplate[k].title }));
 
 export const ChartRenderer = (props) => {
   const {
@@ -121,7 +123,7 @@ export const ChartRenderer = (props) => {
             dashboardSource={dashboardSource}
             chartLibrary={chartLibrary}
             setChartLibrary={setChartLibrary}
-            chartLibraries={Object.keys(libraryToTemplate).map(k => ({ value: k, title: libraryToTemplate[k].title }))}
+            chartLibraries={chartLibraries}
             cubejsApi={cubejsApi}
             render={() => (jsCompilingError ? (
               <Alert
diff --git a/packages/cubejs-playground/src/DashboardPage.js b/packages/cubejs-playground/src/DashboardPage.js
@@ -1,9 +1,13 @@
 /* globals window */
 import React, { Component } from 'react';
-import { Spin, Button, Alert } from 'antd';
-import { Link } from "react-router-dom";
+import {
+  Spin, Button, Alert, Menu, Dropdown, Icon, Form
+} from 'antd';
 import DashboardSource from "./DashboardSource";
 import fetch from './playgroundFetch';
+import { frameworks } from "./ChartContainer";
+import { playgroundAction } from "./events";
+import { chartLibraries } from "./ChartRenderer";
 
 const Frame = ({ children }) => (
   <div style={{ textAlign: 'center', marginTop: 50 }}>
@@ -12,15 +16,18 @@ const Frame = ({ children }) => (
 );
 
 const Hint = () => (
-  <p style={{width: 450, margin: "20px auto"}}>
+  <p style={{ width: 450, margin: "20px auto" }}>
     Dashboard App is a convenient way to setup and deploy frontend app to work with Cube.js backend. You can learn more about it the <a href="https://cube.dev/docs/dashboard-app" target="_blankl">Cube.js docs</a>.
   </p>
 );
 
 class DashboardPage extends Component {
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {
+      chartLibrary: chartLibraries[0].value,
+      framework: 'react'
+    };
   }
 
   async componentDidMount() {
@@ -29,11 +36,12 @@ class DashboardPage extends Component {
   }
 
   async loadDashboard(createApp) {
+    const { chartLibrary } = this.state;
     this.setState({
       appCode: null,
       loadError: null
     });
-    await this.dashboardSource.load(createApp);
+    await this.dashboardSource.load(createApp, { chartLibrary });
     this.setState({
       dashboardStarting: false,
       appCode: !this.dashboardSource.loadError && this.dashboardSource.dashboardAppCode(),
@@ -59,6 +67,44 @@ class DashboardPage extends Component {
   }
 
   render() {
+    const { chartLibrary, framework } = this.state;
+    const currentLibraryItem = chartLibraries.find(m => m.value === chartLibrary);
+    const frameworkItem = frameworks.find(m => m.id === framework);
+
+    const chartLibrariesMenu = (
+      <Menu
+        onClick={(e) => {
+          playgroundAction('Set Chart Library', { chartLibrary: e.key });
+          this.setState({ chartLibrary: e.key });
+        }}
+      >
+        {
+          chartLibraries.map(library => (
+            <Menu.Item key={library.value}>
+              {library.title}
+            </Menu.Item>
+          ))
+        }
+      </Menu>
+    );
+
+    const frameworkMenu = (
+      <Menu
+        onClick={(e) => {
+          playgroundAction('Set Framework', { framework: e.key });
+          this.setState({ framework: e.key });
+        }}
+      >
+        {
+          frameworks.map(f => (
+            <Menu.Item key={f.id}>
+              {f.title}
+            </Menu.Item>
+          ))
+        }
+      </Menu>
+    );
+
     const {
       appCode, dashboardPort, loadError, dashboardRunning, dashboardStarting, dashboardAppPath
     } = this.state;
@@ -68,11 +114,54 @@ class DashboardPage extends Component {
           <h2>
             {loadError}
           </h2>
-          <p style={{marginTop: 25}}>
+          <Form layout="inline">
+            <Form.Item>
+              <Dropdown overlay={frameworkMenu}>
+                <Button>
+                  {frameworkItem && frameworkItem.title}
+                  <Icon type="down" />
+                </Button>
+              </Dropdown>
+            </Form.Item>
+            <Form.Item>
+              <Dropdown
+                overlay={chartLibrariesMenu}
+                disabled={!!frameworkItem.docsLink}
+              >
+                <Button>
+                  {currentLibraryItem && currentLibraryItem.title}
+                  <Icon type="down" />
+                </Button>
+              </Dropdown>
+            </Form.Item>
+          </Form>
+          {
+            frameworkItem && frameworkItem.docsLink && (
+              <h2 style={{ paddingTop: 24, textAlign: 'center' }}>
+                We do not support&nbsp;
+                {frameworkItem.title}
+                &nbsp;dashboard scaffolding generation yet.
+                < br/>
+                Please refer to&nbsp;
+                <a
+                  href={frameworkItem.docsLink}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  onClick={() => playgroundAction('Unsupported Dashboard Framework Docs', { framework })}
+                >
+                  {frameworkItem.title}
+                  &nbsp;docs
+                </a>
+                &nbsp;to see on how to use it with Cube.js.
+              </h2>
+            )
+          }
+          <p style={{ marginTop: 25 }}>
             <Button
               type="primary"
               size="large"
               onClick={() => this.loadDashboard(true)}
+              disabled={!!frameworkItem.docsLink}
             >
               Create dashboard app template in your project directory
             </Button>
@@ -101,7 +190,10 @@ class DashboardPage extends Component {
             Dashboard App is not running
           </h2>
           <h3>
-            Please start dashboard app or run it manually using <code class="inline-code">$ npm run start</code><br /> in&nbsp;
+            Please start dashboard app or run it manually using
+            <code className="inline-code">$ npm run start</code>
+            <br />
+            in&nbsp;
             <b>{dashboardAppPath}</b>
             &nbsp;directory.
           </h3>
@@ -121,7 +213,11 @@ class DashboardPage extends Component {
     }
     const devServerUrl = `http://${window.location.hostname}:${dashboardPort}`;
     return (
-      <div style={{ height: '100%', width: '100%', padding: "15px 30px 30px 30px", background: "#fff" }}>
+      <div
+        style={{
+          height: '100%', width: '100%', padding: "15px 30px 30px 30px", background: "#fff"
+        }}
+      >
         <Alert
           message={(
             <span>
@@ -131,8 +227,11 @@ class DashboardPage extends Component {
               Dev server is running at&nbsp;
               <a href={devServerUrl} target="_blank" rel="noopener noreferrer">{devServerUrl}</a>
               .
-              Learn more how to customize and deploy it at <a href="https://cube.dev/docs/dashboard-app">Cube.js&nbsp;docs</a>.&nbsp;
-              <a onClick={() => window.location.reload()} style={{ cursor: 'pointer' }}>Refresh page</a> if it is empty.
+              Learn more how to customize and deploy it at
+              <a href="https://cube.dev/docs/dashboard-app">Cube.js&nbsp;docs</a>
+              .&nbsp;
+              <a onClick={() => window.location.reload()} style={{ cursor: 'pointer' }}>Refresh page</a>
+              if it is empty.
             </span>
           )}
           type="info"
diff --git a/packages/cubejs-playground/src/DashboardSource.js b/packages/cubejs-playground/src/DashboardSource.js
@@ -3,7 +3,6 @@ import traverse from "@babel/traverse";
 import fetch from './playgroundFetch';
 import AppSnippet from './source/AppSnippet';
 import TargetSource from './source/TargetSource';
-import ChartSnippet from "./source/ChartSnippet";
 import ScaffoldingSources from "./codegen/ScaffoldingSources";
 import MergeScaffolding from "./source/MergeScaffolding";
 import IndexSnippet from "./source/IndexSnippet";
@@ -21,7 +20,7 @@ body {
 const fetchWithRetry = (url, options, retries) => fetch(url, { ...options, retries });
 
 class DashboardSource {
-  async load(createApp) {
+  async load(createApp, { chartLibrary }) {
     this.loadError = null;
     if (createApp) {
       await fetchWithRetry('/playground/ensure-dashboard-app', undefined, 5);
@@ -37,7 +36,7 @@ class DashboardSource {
       this.filesToPersist = [];
       this.parse(result.fileContents);
     }
-    if (!result.error && this.ensureDashboardIsInApp()) {
+    if (!result.error && this.ensureDashboardIsInApp({ chartLibrary })) {
       await this.persist();
     }
   }
@@ -83,13 +82,7 @@ class DashboardSource {
       .map(i => {
         const importName = i.get('source').node.value.split('/');
         const dependency = importName[0].indexOf('@') === 0 ? [importName[0], importName[1]].join('/') : importName[0];
-        if (dependency === 'graphql-tag') {
-          return {
-            graphql: 'latest',
-            [dependency]: 'latest'
-          };
-        }
-        return { [dependency]: 'latest' };
+        return this.withPeerDependencies(dependency);
       }).reduce((a, b) => ({ ...a, ...b }));
     await fetchWithRetry('/playground/ensure-dependencies', {
       method: 'POST',
@@ -102,6 +95,26 @@ class DashboardSource {
     }, 5);
   }
 
+  // TODO move to dev server
+  withPeerDependencies(dependency) {
+    let result = {
+      [dependency]: 'latest'
+    };
+    if (dependency === 'graphql-tag') {
+      result = {
+        ...result,
+        graphql: 'latest'
+      };
+    }
+    if (dependency === 'react-chartjs-2') {
+      result = {
+        ...result,
+        'chart.js': 'latest'
+      };
+    }
+    return result;
+  }
+
   parse(sourceFiles) {
     this.appFile = sourceFiles.find(f => f.fileName.indexOf('src/App.js') !== -1);
     if (!this.appFile) {
@@ -111,7 +124,7 @@ class DashboardSource {
     this.appTargetSource = this.targetSourceByFile('/src/App.js');
   }
 
-  ensureDashboardIsInApp() {
+  ensureDashboardIsInApp({ chartLibrary }) {
     let dashboardAdded = false;
     let headerElement = null;
     traverse(this.appTargetSource.ast, {
@@ -138,7 +151,7 @@ class DashboardSource {
       appSnippet.mergeTo(this.appTargetSource);
       this.mergeSnippetToFile(new IndexSnippet(this.playgroundContext), '/src/index.js');
       this.mergeSnippetToFile(new ExploreSnippet(), '/src/ExplorePage.js');
-      this.mergeSnippetToFile(new ChartRendererSnippet(), '/src/ChartRenderer.js');
+      this.mergeSnippetToFile(new ChartRendererSnippet(chartLibrary), '/src/ChartRenderer.js');
       this.mergeSnippetToFile(new DashboardStoreSnippet(), '/src/DashboardStore.js');
       this.mergeSnippetToFile(new SourceSnippet(ScaffoldingSources['react/DashboardPage.js']), '/src/DashboardPage.js');
       merged = true;
@@ -174,6 +187,7 @@ class DashboardSource {
     snippet.mergeTo(targetSource);
   }
 
+  /*
   async addChart(chartCode) {
     await this.load(true);
     if (this.loadError) {
@@ -184,6 +198,7 @@ class DashboardSource {
     this.mergeSnippetToFile(chartSnippet, '/src/DashboardPage.js');
     await this.persist();
   }
+  */
 
   dashboardAppCode() {
     return this.appTargetSource.code();
diff --git a/packages/cubejs-playground/src/source/ChartRendererSnippet.js b/packages/cubejs-playground/src/source/ChartRendererSnippet.js
@@ -4,16 +4,16 @@ import { selectChartLibrary } from "../ChartRenderer";
 import ChartTypeSnippet from "./ChartTypeSnippet";
 
 class ChartRendererSnippet extends SourceSnippet {
-  constructor() {
+  constructor(chartLibrary) {
     super(ScaffoldingSources['react/ChartRenderer.js']);
+    this.chartLibrary = chartLibrary;
   }
 
   mergeTo(targetSource) {
     super.mergeTo(targetSource);
     const chartTypes = ['line', 'bar', 'area', 'pie', 'table', 'number'];
-    const chartLibraryId = 'bizcharts'; // TODO
     chartTypes.forEach(chartType => {
-      const chartLibrary = selectChartLibrary(chartType, chartLibraryId);
+      const chartLibrary = selectChartLibrary(chartType, this.chartLibrary);
       const chartSnippet = new ChartTypeSnippet(
         chartLibrary.sourceCodeTemplate({ chartType, renderFnName: 'render' }),
         chartType
