From 8df8bbf7db31ea52db3ea265f3077e34d5053322 Mon Sep 17 00:00:00 2001
From: Tyler <trtate@us.ibm.com>
Date: Wed, 8 Jul 2020 10:51:58 -0500
Subject: [PATCH] Chart type cards (#1270)

* adds thumbnails

* image update

* image udate

* Description update

* enable cards

* Update src/pages/data-visualization/chart-types/index.mdx

Co-authored-by: Eliad Moosavi <theiliad@users.noreply.github.com>

* Update src/pages/data-visualization/chart-types/index.mdx

Co-authored-by: Eliad Moosavi <theiliad@users.noreply.github.com>

* Update src/pages/data-visualization/chart-types/index.mdx

Co-authored-by: Eliad Moosavi <theiliad@users.noreply.github.com>

* Update src/pages/data-visualization/chart-types/index.mdx

Co-authored-by: Eliad Moosavi <theiliad@users.noreply.github.com>

* Update src/pages/data-visualization/chart-types/index.mdx

Co-authored-by: Eliad Moosavi <theiliad@users.noreply.github.com>

* link fix

* grouped bar link fix

* removed design only tags

Co-authored-by: Eliad Moosavi <theiliad@users.noreply.github.com>
---
 .../images/grouped-bar-horizontal.svg         | 12 ++++++
 .../chart-types/images/pie.svg                | 10 +++++
 .../images/stacked-bar-horizontal.svg         | 16 ++++++++
 .../data-visualization/chart-types/index.mdx  | 38 +++++++++++++++----
 4 files changed, 68 insertions(+), 8 deletions(-)
 create mode 100644 src/pages/data-visualization/chart-types/images/grouped-bar-horizontal.svg
 create mode 100644 src/pages/data-visualization/chart-types/images/pie.svg
 create mode 100644 src/pages/data-visualization/chart-types/images/stacked-bar-horizontal.svg

diff --git a/src/pages/data-visualization/chart-types/images/grouped-bar-horizontal.svg b/src/pages/data-visualization/chart-types/images/grouped-bar-horizontal.svg
new file mode 100644
index 00000000000..2f3ef15273e
--- /dev/null
+++ b/src/pages/data-visualization/chart-types/images/grouped-bar-horizontal.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
+  <g fill="none" fill-rule="evenodd">
+    <polygon fill="#97C1FF" fill-rule="nonzero" points="113.5 109.5 117.5 109.5 117.5 248.5 113.5 248.5" transform="rotate(90 115.5 179)"/>
+    <rect width="4" height="106" x="97" y="121" fill="#0062FF" fill-rule="nonzero" transform="rotate(90 99 174)"/>
+    <polygon fill="#97C1FF" fill-rule="nonzero" points="86 111 90 111 90 195 86 195" transform="rotate(90 88 153)"/>
+    <rect width="4" height="51" x="69.5" y="122.5" fill="#0062FF" fill-rule="nonzero" transform="rotate(90 71.5 148)"/>
+    <polygon fill="#97C1FF" fill-rule="nonzero" points="92 79 96 79 96 175 92 175" transform="rotate(90 94 127)"/>
+    <rect width="4" height="31" x="59.5" y="106.5" fill="#0062FF" fill-rule="nonzero" transform="rotate(90 61.5 122)"/>
+    <rect width="4" height="148" x="118" y="27" fill="#97C1FF" fill-rule="nonzero" transform="rotate(90 120 101)"/>
+    <rect width="4" height="86" x="87" y="53" fill="#0062FF" fill-rule="nonzero" transform="rotate(90 89 96)"/>
+  </g>
+</svg>
diff --git a/src/pages/data-visualization/chart-types/images/pie.svg b/src/pages/data-visualization/chart-types/images/pie.svg
new file mode 100644
index 00000000000..5ef26fa7286
--- /dev/null
+++ b/src/pages/data-visualization/chart-types/images/pie.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
+  <g fill="none" fill-rule="evenodd">
+    <circle cx="120.5" cy="137.5" r="56.5" fill="#FFF" fill-rule="nonzero"/>
+    <path fill="#6EA6FF" fill-rule="nonzero" d="M120.312127,138.246 L148.286423,186.699793 C140.080514,191.344633 130.597451,193.996 120.495127,193.996 C89.6030797,193.996 64.5016362,169.203477 64.0026966,138.430331 L64.0011272,138.246 L120.312127,138.246 Z"/>
+    <path fill="#0062FF" fill-rule="nonzero" d="M121.495127,81.0046791 C152.238098,81.5384611 176.995127,106.626074 176.995127,137.496 C176.995127,158.061759 166.007173,176.061144 149.581698,185.943723 L121.495127,137.295 L121.495127,81.0046791 Z"/>
+    <path fill="#C9DEFF" fill-rule="nonzero" d="M105.377019,83.0413342 L119.767127,136.74625 L64,136.74625 C64.3334344,111.107885 81.7436868,89.5883341 105.377019,83.0413342 Z"/>
+    <path fill="#97C1FF" fill-rule="nonzero" d="M119.995127,81 L119.995127,131.801 L106.828257,82.6601381 C110.914824,81.6449597 115.17713,81.0746439 119.560796,81.0035694 L119.995127,81 Z"/>
+    <rect width="115" height="128" x="62" y="79"/>
+  </g>
+</svg>
diff --git a/src/pages/data-visualization/chart-types/images/stacked-bar-horizontal.svg b/src/pages/data-visualization/chart-types/images/stacked-bar-horizontal.svg
new file mode 100644
index 00000000000..c1d2b31dc6f
--- /dev/null
+++ b/src/pages/data-visualization/chart-types/images/stacked-bar-horizontal.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
+  <g fill="none" fill-rule="evenodd">
+    <polygon fill="#97C1FF" fill-rule="nonzero" points="161 179 168 179 168 198 161 198" transform="rotate(90 164.5 188.5)"/>
+    <rect width="7" height="106" x="96.5" y="135.5" fill="#0062FF" fill-rule="nonzero" transform="rotate(90 100 188.5)"/>
+    <polygon fill="#97C1FF" fill-rule="nonzero" points="125.5 135.5 132.5 135.5 132.5 193.5 125.5 193.5" transform="rotate(90 129 164.5)"/>
+    <rect width="7" height="51" x="69" y="139" fill="#0062FF" fill-rule="nonzero" transform="rotate(90 72.5 164.5)"/>
+    <polygon fill="#97C1FF" fill-rule="nonzero" points="82.5 134.5 89.5 134.5 89.5 146.5 82.5 146.5" transform="rotate(90 86 140.5)"/>
+    <rect width="7" height="31" x="59" y="125" fill="#0062FF" fill-rule="nonzero" transform="rotate(90 62.5 140.5)"/>
+    <polygon fill="#97C1FF" fill-rule="nonzero" points="168 95 175 95 175 138 168 138" transform="rotate(90 171.5 116.5)"/>
+    <polygon fill="#0062FF" fill-rule="nonzero" points="94 66 101 66 101 167 94 167" transform="rotate(90 97.5 116.5)"/>
+    <rect width="2" height="7" x="148" y="113" fill="#FFF" fill-rule="nonzero"/>
+    <rect width="2" height="7" x="78" y="137" fill="#FFF" fill-rule="nonzero"/>
+    <rect width="2" height="7" x="153" y="185" fill="#FFF" fill-rule="nonzero"/>
+    <rect width="2" height="7" x="98" y="161" fill="#FFF" fill-rule="nonzero"/>
+  </g>
+</svg>
diff --git a/src/pages/data-visualization/chart-types/index.mdx b/src/pages/data-visualization/chart-types/index.mdx
index 3d89fc9c773..eb6e16ba353 100644
--- a/src/pages/data-visualization/chart-types/index.mdx
+++ b/src/pages/data-visualization/chart-types/index.mdx
@@ -7,7 +7,7 @@ import OverviewCard from "components/OverviewCard";
 
 <PageDescription>
 
-Start by identifying the purpose of the visualization and choose a chart type appropriately.
+Start by identifying the purpose of the visualization and then choose the appropriate chart type.
 
 </PageDescription>
 
@@ -62,6 +62,16 @@ Start by identifying the purpose of the visualization and choose a chart type ap
 
 ![Simple bar (horizontal)](images/barhoriz.svg)
 
+</OverviewCard>
+</Column>
+<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >
+ <OverviewCard
+    title="Grouped bar (horizontal)"
+    href="/data-visualization/basic-charts#grouped-horizontal-bar-(discrete)"
+    >
+
+![Grouped bar (horizontal)](images/grouped-bar-horizontal.svg)
+
 </OverviewCard>
 </Column>
 </Row>
@@ -102,7 +112,7 @@ Start by identifying the purpose of the visualization and choose a chart type ap
 <Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >
  <OverviewCard
     title="Stream"
-    disabled
+    href="/data-visualization/basic-charts#donut"
     >
 
 ![Stream](images/stream.svg)
@@ -130,7 +140,18 @@ Start by identifying the purpose of the visualization and choose a chart type ap
     href="/data-visualization/basic-charts#pie"
     >
 
-![Pie](images/donut.svg)
+![Pie](images/pie.svg)
+
+</OverviewCard>
+</Column>
+
+<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >
+ <OverviewCard
+    title="Stacked bar (horizontal)"
+    href="/data-visualization/basic-charts/#stacked-horizontal-bar-(discrete)"
+    >
+
+![Stacked bar horizontal](images/stacked-bar-horizontal.svg)
 
 </OverviewCard>
 </Column>
@@ -148,7 +169,6 @@ Start by identifying the purpose of the visualization and choose a chart type ap
  <OverviewCard
     title="Stacked area"
     href="/data-visualization/basic-charts/#stacked-area-chart"
-    tag="Design only"
     >
 
 ![Stacked area](images/areastack.svg)
@@ -162,14 +182,14 @@ Start by identifying the purpose of the visualization and choose a chart type ap
    tag="Design only"
    >
 
-![Meter / gauge](images/gauge.svg)
+![Gauge](images/gauge.svg)
 
 </OverviewCard>
 </Column>
 <Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm>
  <OverviewCard
     title="Tree map"
-    disabled
+    href="/data-visualization/basic-charts#gauge"
     >
 
 ![Tree map](images/treemap.svg)
@@ -194,7 +214,8 @@ Start by identifying the purpose of the visualization and choose a chart type ap
 <Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >
  <OverviewCard
     title="Heat map"
-    disabled
+    href="/data-visualization/advanced-charts#heat-maps"	       
+    tag="Design only"
     >
 
 ![Heat map](images/heatmap.svg)
@@ -204,7 +225,8 @@ Start by identifying the purpose of the visualization and choose a chart type ap
 <Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >
  <OverviewCard
     title="Parallel coordinates"
-    disabled
+    href="/data-visualization/advanced-charts#parallel-coordinates"	       
+    tag="Design only"
     >
 
 ![Parallel coordinates](images/parallel.svg)