Codesandbox examples for charting demos

package.json

@@ -25,8 +25,8 @@
     "last 1 chrome version"
   ],
   "dependencies": {
-    "@carbon/charts": "^0.28.1",
-    "@carbon/charts-react": "^0.28.1",
+    "@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",

src/components/ComponentDemo/ComponentDemo.js

@@ -2,6 +2,9 @@
 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/data';
+
 import { LiveProvider, LiveEditor, LivePreview, LiveError } from 'react-live';
 import { Row } from 'gatsby-theme-carbon';
 import { TableOfContents20 } from '@carbon/icons-react';
@@ -55,7 +58,7 @@ const ComponentDemo = ({
   // allow for write-in props
   // Tests/cleanup context
   // handle true/false better
-
+  console.log('theme', theme, theme.indexOf('g100') > -1);
   return (
     <ErrorBoundary>
       <Row>
@@ -74,7 +77,12 @@ const ComponentDemo = ({
         <LiveProvider
           noInline={noInline}
           theme={prismTheme}
-          scope={{ ...CarbonComponents, ...scope }}
+          scope={{
+            ...CarbonComponents,
+            ...CarbonChartsComponents,
+            ...chartingDemoDataAndOptions,
+            ...scope,
+          }}
           code={code}>
           <div className={cx(container, { [knoblessContainer]: !knobs })}>
             <LivePreview className={cx(theme, previewContainer)} />
@@ -91,6 +99,7 @@ const ComponentDemo = ({
             )}
             <Code links={links} code={code} src={src}>
               <LiveEditor
+                disabled
                 padding={16}
                 style={{ overflowX: 'auto', whiteSpace: 'pre' }}
                 onChange={updatedCode => setCode(updatedCode)}

src/data/charts/index.js

@@ -1,7 +1,8 @@
-export * from './bar';
-export * from './pie-donut';
-export * from './line';
+import * as de from '@carbon/charts/demo/data';
 
+export * from '@carbon/charts/demo/data';
+
+console.log('de', de);
 export const addHeightToOptions = options => ({
   ...options,
   height: '400px',

src/pages/data-visualization/basic-charts/allDemos.js

@@ -0,0 +1,74 @@
+import React from 'react';
+
+import * as ChartComponents from '@carbon/charts-react';
+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 (
+              <>
+                {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>
+              </>
+            );
+          })}
+        </>
+      );
+    })}
+  </>
+);

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>
+);

src/pages/data-visualization/basic-charts/index.mdx

@@ -9,6 +9,8 @@ Basic charts offer a way to visualize data sets in an intuitive, easy to underst
 
 </PageDescription>
 
+import { CodeSnippet } from 'carbon-components-react';
+
 import '@carbon/charts/styles.css';
 
 import {
@@ -66,124 +68,21 @@ import {
   scatterData,
 } from '../../../data/charts/index';
 
-<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>
-
-## Bar chart
-
-### Default
-
-Bar charts use vertical or horizontal data markers to compare individual values. You can use them to compare discrete data or show trends over time.
-
-<SimpleBarChart
-  data={simpleBarData}
-  options={addHeightToOptions(simpleBarOptions)}
-/>
-
-<SimpleBarChart
-  data={simpleBarTimeSeriesData}
-  options={addHeightToOptions(simpleBarTimeSeriesOptions)}
-/>
-
-### Grouped bar chart
-
-A grouped bar chart, also known as a clustered bar graph, multi-set bar chart, or grouped column chart, is a type of bar graph that is used to compare values across multiple categories.
-
-<GroupedBarChart
-  data={groupedBarData}
-  options={addHeightToOptions(groupedBarOptions)}
-/>
-
-### Stacked bar
-
-Stacked bar charts are useful for comparing proportional contributions within a category. They plot the relative value that each data series contributes to the total.
-
-<StackedBarChart
-  data={stackedBarData}
-  options={addHeightToOptions(stackedBarOptions)}
-/>
-
-<StackedBarChart
-  data={stackedBarTimeSeriesData}
-  options={addHeightToOptions(stackedBarTimeSeriesOptions)}
-/>
-
-### Horizontal bar
-
-### Default
-
-Bar charts use vertical or horizontal data markers to compare individual values. You can use them to compare discrete data or show trends over time.
-
-<SimpleBarChart
-  data={simpleHorizontalBarData}
-  options={addHeightToOptions(simpleHorizontalBarOptions)}
-/>
-
-<SimpleBarChart
-  data={simpleHorizontalBarTimeSeriesData}
-  options={addHeightToOptions(simpleHorizontalBarTimeSeriesOptions)}
-/>
-
-### Grouped bar chart
-
-A grouped bar chart, also known as a clustered bar graph, multi-set bar chart, or grouped column chart, is a type of bar graph that is used to compare values across multiple categories.
-
-<GroupedBarChart
-  data={groupedHorizontalBarData}
-  options={addHeightToOptions(groupedHorizontalBarOptions)}
-/>
-
-### Stacked bar
-
-Stacked bar charts are useful for comparing proportional contributions within a category. They plot the relative value that each data series contributes to the total.
-
-<StackedBarChart
-  data={stackedHorizontalBarData}
-  options={addHeightToOptions(stackedHorizontalBarOptions)}
-/>
-
-<StackedBarChart
-  data={stackedHorizontalBarTimeSeriesData}
-  options={addHeightToOptions(stackedHorizontalBarTimeSeriesOptions)}
-/>
-
-## Line chart
-
-### Default
-
-Line charts plot data at regular intervals connected by lines. You can use line visualizations to show trends over time and compare several data sets.
+import BasicChartsAnchorLinks from './anchorLinks';
+import AllDemos from './allDemos';
 
-<LineChart data={lineData} options={addHeightToOptions(lineOptions)} />
+<BasicChartsAnchorLinks />
+<AllDemos />
 
-<LineChart
-  data={lineTimeSeriesData}
-  options={addHeightToOptions(lineTimeSeriesOptions)}
-/>
+## Design-only
 
-### Stepped line chart
-
-Stepped line charts plot data at regular intervals, forming a series of steps between data points. You can use line visualizations to show trends over time and compare several data sets.
-
-<LineChart data={stepData} options={addHeightToOptions(stepOptions)} />
-
-### Curved line chart
+<InlineNotification>
 
-<LineChart
-  data={lineTimeSeriesData}
-  options={addHeightToOptions(lineTimeSeriesOptions)}
-/>
+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).
 
-## Area chart
+</InlineNotification>
 
-### Default
+### 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.
 
@@ -199,12 +98,6 @@ Area charts are similar to line charts, but the areas below the lines are filled
 
 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.
 
-<InlineNotification>
-
-Note: This chart is 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>
-
 <Row>
 <Column  colLg={8} colMd={6} colSm={4}>
 
@@ -213,42 +106,7 @@ Note: This chart is currently a work-in-progress. To see our roadmap, request mi
 </Column>
 </Row>
 
-## Polar charts
-
-### Pie
-
-<PieChart data={pieData} options={addHeightToOptions(pieOptions)} />
-
-### Donut
-
-<DonutChart data={donutData} options={addHeightToOptions(donutOptions)} />
-
-## Scatter plots
-
-### Default
-
-Scatter plot visualizations use data points to plot two measures anywhere along a scale, not only at regular tick marks. You can use scatter plots to explore correlations between different measures.
-
-<ScatterChart data={scatterData} options={addHeightToOptions(scatterOptions)} />
-
-<ScatterChart
-  data={scatterTimeSeriesData}
-  options={addHeightToOptions(scatterTimeSeriesOptions)}
-/>
-
-### Bubble chart
-
-Bubble charts use data points and bubbles to plot measures anywhere along a scale. One measure is plotted along each axis. The size of the bubble represents the third measure. You can use bubble charts to represent financial data or any data where measured values are related.
-
-<Row>
-<Column  colLg={8} colMd={6} colSm={4}>
-
-![Horizontal bar chart](images/charts-basic-bubble.png)
-
-</Column>
-</Row>
-
-## Meter and gauge
+### Meter and gauge
 
 <InlineNotification>
 

src/pages/data-visualization/data-visualization.scss

@@ -2,3 +2,11 @@ div.chart-holder {
   background: $carbon--white-0;
   padding: rem(30px);
 }
+
+.charting-demo {
+  max-width: 700px;
+}
+
+.charting-demo.with-margin-bottom {
+  margin-bottom: rem(60px);
+}

src/pages/updates/migration-guide/design.mdx

@@ -21,7 +21,7 @@ The transition from v9 to v10 is primarily visual. The IBM color palette was upd
 
 ## IBM Design Language
 
-Carbon v10 delivers the [IBM Design Language](https://www.ibm.com/design/language/) to product teams. It represents a complete visual refresh of the system, delivering the ethos of IBM Design. Carbon v10 is a modern, open-source framework for building digital products and experiences, with tooling and guidance on color, layout, typography, iconography, motion, patterns, and content. 
+Carbon v10 delivers the [IBM Design Language](https://www.ibm.com/design/language/) to product teams. It represents a complete visual refresh of the system, delivering the ethos of IBM Design. Carbon v10 is a modern, open-source framework for building digital products and experiences, with tooling and guidance on color, layout, typography, iconography, motion, patterns, and content.
 
 ## Design kit