add dynamic demos to basic charts

carbon-design-system · Apr 9, 2020 · 5d0e2a7 · 5d0e2a7
1 parent 59806b6
commit 5d0e2a7
Show file tree

Hide file tree

Showing 8 changed files with 160 additions and 2,292 deletions.
diff --git a/package.json b/package.json
@@ -25,8 +25,8 @@
     "last 1 chrome version"
   ],
   "dependencies": {
-    "@carbon/charts": "^0.29.8",
-    "@carbon/charts-react": "^0.29.8",
+    "@carbon/charts": "^0.30.10",
+    "@carbon/charts-react": "^0.30.10",
     "@carbon/elements": "^10.9.2",
     "@carbon/icons": "^10.9.1",
     "@carbon/icons-react": "^10.9.1",

diff --git a/src/components/ComponentDemo/ComponentDemo.js b/src/components/ComponentDemo/ComponentDemo.js
@@ -3,7 +3,7 @@ import React, { useState, useContext } from 'react';
 import prismTheme from 'gatsby-theme-carbon/src/components/Code/prismTheme';
 import * as CarbonComponents from 'carbon-components-react';
 import * as CarbonChartsComponents from '@carbon/charts-react';
-import * as chartingDemoDataAndOptions from '@carbon/charts/demo/demo-data';
+import * as chartingDemoDataAndOptions from '@carbon/charts/demo/data';
 
 import { LiveProvider, LiveEditor, LivePreview, LiveError } from 'react-live';
 import { Row } from 'gatsby-theme-carbon';

diff --git a/src/data/charts/index.js b/src/data/charts/index.js
@@ -1,6 +1,6 @@
-import * as de from '@carbon/charts/demo/demo-data';
+import * as de from '@carbon/charts/demo/data';
 
-export * from '@carbon/charts/demo/demo-data';
+export * from '@carbon/charts/demo/data';
 
 console.log('de', de);
 export const addHeightToOptions = options => ({

diff --git a/src/pages/data-visualization/basic-charts/allDemos.js b/src/pages/data-visualization/basic-charts/allDemos.js
@@ -1,51 +1,70 @@
 import React from 'react';
 
 import * as ChartComponents from '@carbon/charts-react';
-import { demoGroups } from '@carbon/charts/demo/demo-data';
+import { demoGroups } from '@carbon/charts/demo/data';
 
 import { Launch16 } from '@carbon/icons-react';
 
+import WRITEUPS from "./writeups";
+
+const generateHeadingID = title => title.split(" ")
+  .map(title => title.toLowerCase()).join("-");
+
 export default () => (
   <>
     {demoGroups.map(demoGroup => {
       return (
         <>
+          <h2 id={generateHeadingID(demoGroup.title)}>{demoGroup.title}</h2>
+
+          {WRITEUPS[demoGroup.title] && <p>{WRITEUPS[demoGroup.title]}</p>}
+
           {demoGroup.demos.map(demo => {
             const DemoComponent = ChartComponents[demo.chartType.vanilla];
             return (
-              <div className="charting-demo with-margin-bottom">
-                <DemoComponent
-                  data={demo.data}
-                  options={demo.options}
-                  style={{ maxWidth: 400 }}
-                />
-
-                <div className="component-toolbar" style={{ marginTop: 0 }}>
-                  <div className="component-toolbar__current">CodeSandbox:</div>
-                  <div className="component-toolbar__links">
-                    <a
-                      href={demo.codesandbox.react}
-                      target="_blank"
-                      rel="noopener noreferrer">
-                      React <Launch16 />
-                    </a>
-
-                    <a
-                      href={`https://carbon-design-system.github.io/carbon-charts/angular/?path=/story/${demo.id}`}
-                      target="_blank"
-                      rel="noopener noreferrer">
-                      Angular <Launch16 />
-                    </a>
-
-                    <a
-                      href={demo.codesandbox.vue}
-                      target="_blank"
-                      rel="noopener noreferrer">
-                      Vue <Launch16 />
-                    </a>
+              <>
+                {WRITEUPS[demo.title] && <p>{WRITEUPS[demo.title]}</p>}
+                <div className="charting-demo with-margin-bottom">
+                  <DemoComponent
+                    data={demo.data}
+                    options={demo.options}
+                    style={{ maxWidth: 400 }}
+                  />
+
+                  <div className="component-toolbar" style={{ marginTop: 0 }}>
+                    <div className="component-toolbar__current">CodeSandbox:</div>
+                    <div className="component-toolbar__links">
+                      <a
+                        href={demo.codesandbox.vanilla}
+                        target="_blank"
+                        rel="noopener noreferrer">
+                        vanilla <Launch16 />
+                      </a>
+
+                      <a
+                        href={demo.codesandbox.react}
+                        target="_blank"
+                        rel="noopener noreferrer">
+                        React <Launch16 />
+                      </a>
+
+                      <a
+                        href={`https://carbon-design-system.github.io/carbon-charts/angular/?path=/story/${demo.id}`}
+                        target="_blank"
+                        rel="noopener noreferrer">
+                        Angular <Launch16 />
+                      </a>
+
+                      <a
+                        href={demo.codesandbox.vue}
+                        target="_blank"
+                        rel="noopener noreferrer">
+                        Vue <Launch16 />
+                      </a>
+                    </div>
                   </div>
                 </div>
-              </div>
+              </>
             );
           })}
         </>

diff --git a/src/pages/data-visualization/basic-charts/anchorLinks.js b/src/pages/data-visualization/basic-charts/anchorLinks.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { storybookDemoGroups } from "@carbon/charts/demo/data";
+
+import { AnchorLinks, AnchorLink } from 'gatsby-theme-carbon';
+export default () => (
+  <AnchorLinks>
+    {storybookDemoGroups.map(storybookDemoGroup => (
+      <AnchorLink>{storybookDemoGroup.title}</AnchorLink>
+    ))}
+
+    <AnchorLink>Design-only</AnchorLink>
+  </AnchorLinks>
+);
diff --git a/src/pages/data-visualization/basic-charts/index.mdx b/src/pages/data-visualization/basic-charts/index.mdx
@@ -68,15 +68,71 @@ import {
   scatterData,
 } from '../../../data/charts/index';
 
+import BasicChartsAnchorLinks from './anchorLinks';
 import AllDemos from './allDemos';
 
-<AnchorLinks>
-  <AnchorLink>Bar chart</AnchorLink>
-  <AnchorLink>Line chart</AnchorLink>
-  <AnchorLink>Area chart</AnchorLink>
-  <AnchorLink>Polar charts</AnchorLink>
-  <AnchorLink>Scatter plots</AnchorLink>
-  <AnchorLink>Meter and gauge</AnchorLink>
-</AnchorLinks>
-
+<BasicChartsAnchorLinks />
 <AllDemos />
+
+## Design-only
+
+<InlineNotification>
+
+Note: These charts are currently a work-in-progress. To see our roadmap, request missing guidance, or contribute content, please go to the carbon-charts [GitHub repository](https://github.com/carbon-design-system/carbon-charts).
+
+</InlineNotification>
+
+### Area chart
+
+Area charts are similar to line charts, but the areas below the lines are filled with colors or patterns. Stacked charts are useful for comparing proportional contributions within a category. They plot the relative value that each data series contributes to the total.
+
+<Row>
+<Column  colLg={8} colMd={6} colSm={4}>
+
+![Horizontal bar chart](images/charts-basic-area.png)
+
+</Column>
+</Row>
+
+### Stacked area chart
+
+Stacked area charts are useful for comparing proportional contributions within a category. They plot the relative value that each data series contributes to the total.
+
+<Row>
+<Column  colLg={8} colMd={6} colSm={4}>
+
+![Horizontal bar chart](images/charts-basic-areastacked.png)
+
+</Column>
+</Row>
+
+### Meter and gauge
+
+<InlineNotification>
+
+**Note:** Meter and gauge charts are not yet available in Carbon Charts. These explorations are subject to change.
+
+</InlineNotification>
+
+Meter and gauge charts are useful for showing values between a small number of variables either by using multiple markers on the same meter or gauge or by using multiples of the chart.
+
+<Row>
+<Column colMd={4} colLg={4}>
+
+![Meters](images/charts-basic-meter.png)
+
+<Caption>
+Meter charts can represent data with current value, minimum and maximum, and peaks or averages.
+</Caption>
+</Column>
+
+<Column colMd={4} colLg={4}>
+
+![Gauge](images/charts-basic-gauge.png)
+
+<Caption>
+  Gauge animates to the current value when dashboard loads to create emphasis.
+</Caption>
+
+</Column>
+</Row>
diff --git a/src/pages/data-visualization/basic-charts/writeups.js b/src/pages/data-visualization/basic-charts/writeups.js