docs(dataviz): add tree diagram demos, update network thumbnail (#2543)

* docs(dataviz): add histogram * docs(dataviz): add tree diagram demos, update network thumbnail
carbon-design-system · Sep 13, 2021 · 0175022 · 0175022 · vercel · Sep 13, 2021
1 parent 15246d9
commit 0175022
Show file tree

Hide file tree

Showing 7 changed files with 223 additions and 73 deletions.
diff --git a/package.json b/package.json
@@ -44,7 +44,7 @@
     "@carbon/icons-react": "^10.38.0"
   },
   "dependencies": {
-    "@carbon/charts-react": "0.42.1",
+    "@carbon/charts-react": "0.48.0",
     "@carbon/elements": "^10.42.0",
     "@carbon/icons": "^10.38.0",
     "@carbon/icons-react": "^10.38.0",

diff --git a/src/components/data-visualization/ChartDemoGroup.js b/src/components/data-visualization/ChartDemoGroup.js
@@ -23,7 +23,7 @@ const ChartDemoGroup = ({ demoGroup, light }) => {
   const DemoComponent = ChartComponents[demo.chartType.vanilla];
 
   const numberOfRemainingDemos =
-    demoGroup.demos.length > 2 ? demoGroup.demos.length - 1 : 0;
+    demoGroup.demos.length >= 2 ? demoGroup.demos.length - 1 : 0;
 
   const demoGroupClassification = demoGroup.type.replace('-chart', '');
 
@@ -40,47 +40,47 @@ const ChartDemoGroup = ({ demoGroup, light }) => {
       )}
 
       {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--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>
+            <P className="dataviz-copy">{demo.description}</P>
+          </div>
+        </div>
+      )}
 
-              <CodeBar
-                links={{
-                  React: demo.codesandbox.react,
-                  Angular: `https://carbon-design-system.github.io/carbon-charts/angular/?path=/story/${demoGroupClassification}-charts-${demo.id}`,
-                  Vue: demo.codesandbox.vue,
-                  Vanilla: demo.codesandbox.vanilla,
-                }}
+      <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/${demoGroupClassification}-charts-${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/${demoGroupClassification}-charts-${demo.id}`}>
-            <img src={STORYBOOK_LOGO} alt="" style={{ height: 20 }} />
-          </MiniCard>
-        )}
+      {numberOfRemainingDemos > 0 && (
+        <MiniCard
+          title={`${numberOfRemainingDemos} more demo${
+            numberOfRemainingDemos > 1 ? 's' : ''
+          }`}
+          href={`https://carbon-design-system.github.io/carbon-charts/?path=/story/${demoGroupClassification}-charts-${demo.id}`}>
+          <img src={STORYBOOK_LOGO} alt="" style={{ height: 20 }} />
+        </MiniCard>
+      )}
     </div>
   );
 };

diff --git a/src/pages/data-visualization/chart-types/images/networkdiagram.svg b/src/pages/data-visualization/chart-types/images/networkdiagram.svg