Codesandbox examples for charting demos (#987)

* initial effort * add dynamic demos to basic charts * update charting package version, optimize demo components * fix lint error * update @carbon/charts to 0.32.3 * add image alt tags to dataviz chart types page * update yarn.lock * fix styling issues * styling fixes * undo overview-card tag height change * move resources below anchor links for basic charts page * final touch on CodeBar Co-authored-by: TJ Egan <[email protected]>
carbon-design-system · Jun 23, 2020 · 5cb04e0 · 5cb04e0 · vercel · Jun 23, 2020
1 parent 060de59
commit 5cb04e0
Show file tree

Hide file tree

Showing 14 changed files with 225 additions and 935 deletions.
diff --git a/package.json b/package.json
@@ -34,8 +34,8 @@
     "carbon-components-react": "^7.14.0"
   },
   "dependencies": {
-    "@carbon/charts": "^0.28.1",
-    "@carbon/charts-react": "^0.28.1",
+    "@carbon/charts": "^0.32.8",
+    "@carbon/charts-react": "^0.32.8",
     "@carbon/elements": "^10.14.0",
     "@carbon/icons": "^10.13.0",
     "@carbon/icons-react": "^10.13.0",

diff --git a/src/components/ComponentDemo/Code/CodeBar.js b/src/components/ComponentDemo/Code/CodeBar.js
@@ -20,18 +20,22 @@ const StorybookLink = ({ framework, url }) => (
 const CodeBar = ({ src, code, links }) => {
   const sandboxUrl = useCodesandbox(code);
   const storybookLinks = Object.entries(links);
+  const shouldShowCopyButton = !src && code;
 
   return (
     <div className={codeBar}>
       <div className={linkList}>
-        <a target="_blank" rel="noopener noreferrer" href={sandboxUrl}>
-          CodeSandbox <Launch16 />
-        </a>
+        {sandboxUrl && (
+          <a target="_blank" rel="noopener noreferrer" href={sandboxUrl}>
+            CodeSandbox <Launch16 />
+          </a>
+        )}
         {storybookLinks.map(([framework, url]) => (
           <StorybookLink key={framework} framework={framework} url={url} />
         ))}
       </div>
-      {src ? (
+
+      {src && (
         <a
           target="_blank"
           rel="noopener noreferrer"
@@ -42,7 +46,9 @@ const CodeBar = ({ src, code, links }) => {
         >
           <Launch16 />
         </a>
-      ) : (
+      )}
+
+      {shouldShowCopyButton && (
         <CopyButton
           className={cx(button, copyButton)}
           onClick={() => {

diff --git a/src/components/ComponentDemo/Code/useCodesandbox.js b/src/components/ComponentDemo/Code/useCodesandbox.js
@@ -23,6 +23,10 @@ const getIndex = ({ code = '' }) => {
 const useCodesandbox = (code) => {
   const { current: originalCode } = useRef(code);
   const url = useMemo(() => {
+    if (!originalCode) {
+      return null;
+    }
+
     const indexContent = getIndex({ code: originalCode });
 
     const parameters = getParameters({

diff --git a/src/components/data-visualization/AllDemos.js b/src/components/data-visualization/AllDemos.js
@@ -0,0 +1,73 @@
+import React from 'react';
+
+import * as ChartComponents from '@carbon/charts-react';
+
+import H2 from 'gatsby-theme-carbon/src/components/markdown/H2';
+import CodeBar from '../ComponentDemo/Code/CodeBar.js';
+
+import demoGroups from '../../data/data-visualization';
+
+const generateHeadingID = (title) =>
+  title
+    .split(' ')
+    .map((t) => t.toLowerCase())
+    .join('-');
+
+const AllDemos = () => (
+  <>
+    {demoGroups.map((demoGroup) => (
+      <>
+        <H2>{demoGroup.title}</H2>
+
+        {demoGroup.description && (
+          <div className="bx--row">
+            <div className="bx--col-sm-4 bx--col-md-8 bx--col-lg-8">
+              <p className="dataviz-copy">{demoGroup.description}</p>
+            </div>
+          </div>
+        )}
+
+        {demoGroup.demos.map((demo) => {
+          const DemoComponent = ChartComponents[demo.chartType.vanilla];
+          return (
+            <>
+              {demo.description && (
+                <div className="bx--row">
+                  <div className="bx--col-sm-4 bx--col-md-8 bx--col-lg-8">
+                    <p className="dataviz-copy">{demo.description}</p>
+                  </div>
+                </div>
+              )}
+              <div className="bx--row">
+                <div className="bx--col-sm-4 bx--col-md-8 bx--col-lg-8">
+                  <div
+                    className="chart-demo-wrapper"
+                    id={generateHeadingID(demo.title)}
+                  >
+                    <div className="chart-demo">
+                      <DemoComponent
+                        data={demo.data}
+                        options={demo.options}
+                        style={{ maxWidth: 400 }}
+                      />
+                    </div>
+                    <CodeBar
+                      links={{
+                        React: demo.codesandbox.react,
+                        Angular: `https://carbon-design-system.github.io/carbon-charts/angular/?path=/story/${demo.id}`,
+                        Vue: demo.codesandbox.vue,
+                        Vanilla: demo.codesandbox.vanilla,
+                      }}
+                    />
+                  </div>
+                </div>
+              </div>
+            </>
+          );
+        })}
+      </>
+    ))}
+  </>
+);
+
+export default AllDemos;