update dataviz demo pages (#2223)

* update dataviz demo pages

* update chart types page links

* final touches

* add boxplot & wordcloud images

* add lollipop to demos and move wordcloud into comparisons

conf.d/rewrite.conf

@@ -39,3 +39,7 @@ rewrite /resources /developing/developer-resources permanent;
 rewrite /tutorial/angular/(.*) /developing/angular-tutorial/\$1 permanent;
 rewrite /tutorial/react/(.*) /developing/react-tutorial/\$1 permanent;
 rewrite /tutorial/vue/(.*) /developing/vue-tutorial/\$1 permanent;
+
+# Data-visualization
+rewrite /data-visualization/basic-charts/ /data-visualization/simple-charts/ permanent;
+rewrite /data-visualization/advanced-charts/ /data-visualization/complex-charts/ permanent;

package.json

@@ -45,8 +45,7 @@
     "gatsby-remark-images": "^3.3.33"
   },
   "dependencies": {
-    "@carbon/charts": "0.34.11",
-    "@carbon/charts-react": "0.34.11",
+    "@carbon/charts-react": "0.41.53",
     "@carbon/elements": "^10.32.0",
     "@carbon/icons": "^10.30.0",
     "@carbon/icons-react": "^10.30.0",

src/components/MdxIcon/MdxIcon.module.scss

@@ -1,5 +1,6 @@
 .mdx-icon {
   width: 32px;
+  max-height: 32px;
   object-fit: contain;
   position: relative;
   display: inline-block;

src/components/MdxIcon/index.js

@@ -13,6 +13,7 @@ import vue from './icons/vue.png';
 import angular from './icons/angular.png';
 import webcomponents from './icons/webcomponents.png';
 import npm from './icons/npm.svg';
+import storybook from './icons/storybook.svg';
 
 const localIcons = {
   sketch,
@@ -25,6 +26,7 @@ const localIcons = {
   angular,
   webcomponents,
   npm,
+  storybook,
 };
 
 const carbonIcons = {

src/components/data-visualization/ChartDemoGroup.js

@@ -0,0 +1,96 @@
+import React from 'react';
+
+import * as ChartComponents from '@carbon/charts-react';
+
+import H2 from 'gatsby-theme-carbon/src/components/markdown/H2';
+import P from 'gatsby-theme-carbon/src/components/markdown/P';
+import CodeBar from '../ComponentDemo/Code/CodeBar.js';
+
+import {
+  CardGroup,
+  MiniCard,
+} from 'gatsby-theme-carbon/src/components/MiniCard';
+
+import STORYBOOK_LOGO from '../../images/storybook-icon.svg';
+
+const generateHeadingID = (title) =>
+  title
+    .split(' ')
+    .map((t) => t.toLowerCase())
+    .join('-');
+
+const ChartDemoGroup = ({ demoGroup, light }) => {
+  let demo = demoGroup.demos.find((d) => d.mainDemo === true);
+  if (!demo) {
+    demo = demoGroup.demos[0];
+  }
+
+  const DemoComponent = ChartComponents[demo.chartType.vanilla];
+
+  const numberOfRemainingDemos =
+    demoGroup.demos.length > 2 ? demoGroup.demos.length - 1 : 0;
+
+  return (
+    <div>
+      {light !== true && <H2>{demoGroup.title}</H2>}
+
+      {light !== true && 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>
+      )}
+
+      <>
+        {light !== true && 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" style={{ marginTop: "1.5rem"}}>
+          <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>
+
+        {numberOfRemainingDemos > 0 && (
+          <MiniCard
+            title={`${numberOfRemainingDemos} more demo${
+              numberOfRemainingDemos > 1 ? 's' : ''
+            }`}
+            href={`https://carbon-design-system.github.io/carbon-charts/?path=/story/${demoGroup.type.replace(
+              '-chart',
+              ''
+            )}-charts-${demo.id}`}>
+            <img src={STORYBOOK_LOGO} style={{ height: 20 }} />
+          </MiniCard>
+        )}
+      </>
+    </div>
+  );
+};
+
+export default ChartDemoGroup;

src/data/data-visualization/index.js

@@ -1,21 +1,14 @@
-import { demoGroups as dG } from '@carbon/charts/demo/data';
+import { storybookDemoGroups } from '@carbon/charts/demo/data';
 
-// Merge all demoGroups with matching names
-const demoGroups = [];
-dG.forEach((demoGroup) => {
-  const demoGroupTitle = demoGroup.title;
-  const demoGroupExistingIndex = demoGroups.findIndex(
-    (dg) => dg.title === demoGroupTitle
-  );
+export const simpleChartDemoGroups = storybookDemoGroups.filter(
+  (demoGroup) => demoGroup.type === 'simple-chart'
+);
 
-  if (demoGroupExistingIndex === -1) {
-    demoGroups.push(demoGroup);
-  } else {
-    const existingDemos = demoGroups[demoGroupExistingIndex].demos;
-    demoGroups[demoGroupExistingIndex].demos = existingDemos.concat(
-      demoGroup.demos
-    );
-  }
-});
+export const complexChartDemoGroups = storybookDemoGroups.filter(
+  (demoGroup) => demoGroup.type === 'complex-chart'
+);
 
-export default demoGroups;
+export const getDemoGroupByTitle = (title) =>
+  storybookDemoGroups.find(
+    (demoGroup) => demoGroup.title.toLowerCase() === title.toLowerCase()
+  );

src/data/nav-items.yaml

@@ -213,10 +213,10 @@
       path: /data-visualization/chart-types/
     - title: Chart anatomy
       path: /data-visualization/chart-anatomy/
-    - title: Basic charts
-      path: /data-visualization/basic-charts/
-    - title: Advanced charts
-      path: /data-visualization/advanced-charts/
+    - title: Simple charts
+      path: /data-visualization/simple-charts/
+    - title: Complex charts
+      path: /data-visualization/complex-charts/
     - title: Color palettes
       path: /data-visualization/color-palettes/
     - title: Axes and labels