Codesandbox examples for charting demos

package.json

@@ -30,8 +30,8 @@
     "/node_modules/*"
   ],
   "dependencies": {
-    "@carbon/charts": "^0.28.1",
-    "@carbon/charts-react": "^0.28.1",
+    "@carbon/charts": "^0.32.3",
+    "@carbon/charts-react": "^0.32.3",
     "@carbon/elements": "^10.13.0",
     "@carbon/icons": "^10.12.0",
     "@carbon/icons-react": "^10.12.0",

src/components/ComponentDemo/Code/CodeBar.js

@@ -17,21 +17,24 @@ const StorybookLink = ({ framework, url }) => (
   </a>
 );
 
-const CodeBar = ({ src, code, links }) => {
+const CodeBar = ({ src, code, links, showSandboxURL }) => {
   const sandboxUrl = useCodesandbox(code);
   const storybookLinks = Object.entries(links);
 
   return (
     <div className={codeBar}>
       <div className={linkList}>
-        <a target="_blank" rel="noopener noreferrer" href={sandboxUrl}>
-          CodeSandbox <Launch16 />
-        </a>
+        {showSandboxURL && (
+          <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 +45,9 @@ const CodeBar = ({ src, code, links }) => {
         >
           <Launch16 />
         </a>
-      ) : (
+      )}
+
+      {!src && code && (
         <CopyButton
           className={cx(button, copyButton)}
           onClick={() => {

src/components/data-visualization/AllDemos.js

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import * as ChartComponents from '@carbon/charts-react';
+import { demoGroups } from '@carbon/charts/demo/data';
+
+import CodeBar from '../ComponentDemo/Code/CodeBar.js';
+
+const generateHeadingID = (title) =>
+  title
+    .split(' ')
+    .map((t) => t.toLowerCase())
+    .join('-');
+
+const AllDemos = () => (
+  <>
+    {demoGroups.map((demoGroup) => (
+      <>
+        <h2 id={generateHeadingID(demoGroup.title)}>{demoGroup.title}</h2>
+
+        {demoGroup.description && <p>{demoGroup.description}</p>}
+
+        {demoGroup.demos.map((demo) => {
+          const DemoComponent = ChartComponents[demo.chartType.vanilla];
+          return (
+            <>
+              {demo.description && <p>{demo.description}</p>}
+              <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>
+            </>
+          );
+        })}
+      </>
+    ))}
+  </>
+);
+
+export default AllDemos;