chore(charts): Added tutorials for all chart types

patternfly · Sep 13, 2019 · f5d2556 · f5d2556
1 parent 0e0cfb1
commit f5d2556
Show file tree

Hide file tree

Showing 8 changed files with 224 additions and 39 deletions.
diff --git a/packages/patternfly-4/react-charts/src/components/ChartArea/examples/ChartArea.md b/packages/patternfly-4/react-charts/src/components/ChartArea/examples/ChartArea.md
@@ -8,6 +8,29 @@ propComponents: ['Chart', 'ChartArea', 'ChartGroup', 'ChartVoronoiContainer']
 import { Chart, ChartArea, ChartAxis, ChartGroup, ChartLabel, ChartLegendWrapper, ChartVoronoiContainer } from '@patternfly/react-charts';
 import './chart-area.scss';
 
+## Tutorial
+```js
+import React from 'react';
+import { Text, TextContent, TextVariants } from '@patternfly/react-charts';
+
+<TextContent>
+  <Text component={TextVariants.p}>
+    PatternFly React charts are based on the Victory chart library, along with additional functionality, custom 
+    components, and theming for PatternFly. This provides a collection of React components you can use to build 
+    interfaces with consistent markup, styling, and behavior.
+  </Text>
+  <Text component={TextVariants.p}>
+    In this 
+    <Text component={TextVariants.a} href="https://katacoda.com/patternfly/courses/charts/module-area" target="_blank">
+      tutorial
+    </Text>,
+    we will build a PatternFly area chart together - starting with a simple chart, adding multiple datasets, 
+    tooltips, axis labels, a legend, and concluding by changing the theme color. You'll learn a little bit about React 
+    and how to use PatternFly components together to build a consistent experience.
+  </Text>
+</TextContent>
+```
+
 ## Simple area chart with right aligned legend
 ```js
 import React from 'react';
@@ -19,7 +42,7 @@ import { Chart, ChartArea, ChartAxis, ChartGroup, ChartVoronoiContainer } from '
       ariaDesc="Average number of pets"
       ariaTitle="Area chart example"
       containerComponent={<ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />}
-      legendData={[{ name: 'Cats' }, { name: 'Birds' }, { name: 'Dogs' }]}
+      legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }]}
       legendOrientation="vertical"
       legendPosition="right"
       height={200}
@@ -46,21 +69,21 @@ import { Chart, ChartArea, ChartAxis, ChartGroup, ChartVoronoiContainer } from '
         />
         <ChartArea
           data={[
-            { name: 'Birds', x: 1, y: 2 },
-            { name: 'Birds', x: 2, y: 3 },
-            { name: 'Birds', x: 3, y: 4 },
-            { name: 'Birds', x: 4, y: 5 },
-            { name: 'Birds', x: 5, y: 6 }
+            { name: 'Dogs', x: 1, y: 2 },
+            { name: 'Dogs', x: 2, y: 3 },
+            { name: 'Dogs', x: 3, y: 4 },
+            { name: 'Dogs', x: 4, y: 5 },
+            { name: 'Dogs', x: 5, y: 6 }
           ]}
           interpolation="basis"
         />
         <ChartArea
           data={[
-            { name: 'Dogs', x: 1, y: 1 },
-            { name: 'Dogs', x: 2, y: 2 },
-            { name: 'Dogs', x: 3, y: 3 },
-            { name: 'Dogs', x: 4, y: 2 },
-            { name: 'Dogs', x: 5, y: 4 }
+            { name: 'Birds', x: 1, y: 1 },
+            { name: 'Birds', x: 2, y: 2 },
+            { name: 'Birds', x: 3, y: 3 },
+            { name: 'Birds', x: 4, y: 2 },
+            { name: 'Birds', x: 5, y: 4 }
           ]}
           interpolation="basis"
         />
@@ -81,7 +104,7 @@ import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThemeColor } from '@patte
       ariaDesc="Average number of pets"
       ariaTitle="Area chart example"
       containerComponent={<ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />}
-      legendData={[{ name: 'Cats' }, { name: 'Birds' }, { name: 'Dogs' }]}
+      legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }]}
       legendPosition="bottom"
       height={250}
       padding={{
@@ -108,21 +131,21 @@ import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThemeColor } from '@patte
         />
         <ChartArea
           data={[
-            { name: 'Birds', x: 1, y: 2 },
-            { name: 'Birds', x: 2, y: 3 },
-            { name: 'Birds', x: 3, y: 4 },
-            { name: 'Birds', x: 4, y: 5 },
-            { name: 'Birds', x: 5, y: 6 }
+            { name: 'Dogs', x: 1, y: 2 },
+            { name: 'Dogs', x: 2, y: 3 },
+            { name: 'Dogs', x: 3, y: 4 },
+            { name: 'Dogs', x: 4, y: 5 },
+            { name: 'Dogs', x: 5, y: 6 }
           ]}
           interpolation="basis"
         />
         <ChartArea
           data={[
-            { name: 'Dogs', x: 1, y: 1 },
-            { name: 'Dogs', x: 2, y: 2 },
-            { name: 'Dogs', x: 3, y: 3 },
-            { name: 'Dogs', x: 4, y: 2 },
-            { name: 'Dogs', x: 5, y: 4 }
+            { name: 'Birds', x: 1, y: 1 },
+            { name: 'Birds', x: 2, y: 2 },
+            { name: 'Birds', x: 3, y: 3 },
+            { name: 'Birds', x: 4, y: 2 },
+            { name: 'Birds', x: 5, y: 4 }
           ]}
           interpolation="basis"
         />
@@ -170,7 +193,7 @@ class MultiColorChart extends React.Component {
             ariaDesc="Average number of pets"
             ariaTitle="Area chart example"
             containerComponent={<ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />}
-            legendData={[{ name: 'Cats' }, { name: 'Birds' }, { name: 'Dogs' }]}
+            legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }]}
             legendPosition="bottom-left"
             height={225}
             padding={{
@@ -197,21 +220,21 @@ class MultiColorChart extends React.Component {
               />
              <ChartArea
                data={[
-                  { name: 'Birds', x: 1, y: 2 },
-                  { name: 'Birds', x: 2, y: 3 },
-                  { name: 'Birds', x: 3, y: 4 },
-                  { name: 'Birds', x: 4, y: 5 },
-                  { name: 'Birds', x: 5, y: 6 }
+                  { name: 'Dogs', x: 1, y: 2 },
+                  { name: 'Dogs', x: 2, y: 3 },
+                  { name: 'Dogs', x: 3, y: 4 },
+                  { name: 'Dogs', x: 4, y: 5 },
+                  { name: 'Dogs', x: 5, y: 6 }
                 ]}
                 interpolation="basis"
               />
               <ChartArea
                 data={[
-                  { name: 'Dogs', x: 1, y: 1 },
-                  { name: 'Dogs', x: 2, y: 2 },
-                  { name: 'Dogs', x: 3, y: 3 },
-                  { name: 'Dogs', x: 4, y: 2 },
-                  { name: 'Dogs', x: 5, y: 4 }
+                  { name: 'Birds', x: 1, y: 1 },
+                  { name: 'Birds', x: 2, y: 2 },
+                  { name: 'Birds', x: 3, y: 3 },
+                  { name: 'Birds', x: 4, y: 2 },
+                  { name: 'Birds', x: 5, y: 4 }
                 ]}
                 interpolation="basis"
               />

diff --git a/packages/patternfly-4/react-charts/src/components/ChartBar/examples/ChartBar.md b/packages/patternfly-4/react-charts/src/components/ChartBar/examples/ChartBar.md
@@ -8,6 +8,29 @@ propComponents: ['Chart', 'ChartBar', 'ChartGroup']
 import { Chart, ChartBar, ChartGroup, ChartThemeColor } from '@patternfly/react-charts';
 import './chart-bar.scss';
 
+## Tutorial
+```js
+import React from 'react';
+import { Text, TextContent, TextVariants } from '@patternfly/react-charts';
+
+<TextContent>
+  <Text component={TextVariants.p}>
+    PatternFly React charts are based on the Victory chart library, along with additional functionality, custom 
+    components, and theming for PatternFly. This provides a collection of React components you can use to build 
+    interfaces with consistent markup, styling, and behavior.
+  </Text>
+  <Text component={TextVariants.p}>
+    In this 
+    <Text component={TextVariants.a} href="https://katacoda.com/patternfly/courses/charts/module-bar" target="_blank">
+      tutorial
+    </Text>,
+    we will build a PatternFly bar chart together - starting with a simple chart, adding multiple datasets, 
+    tooltips, axis labels, a legend, and concluding by changing the theme color. You'll learn a little bit about React 
+    and how to use PatternFly components together to build a consistent experience.
+  </Text>
+</TextContent>
+```
+
 ## Simple bar chart with right aligned legend
 ```js
 import React from 'react';
@@ -21,7 +44,7 @@ import { Chart, ChartBar } from '@patternfly/react-charts';
       containerComponent={<ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />}
       domain={{y: [0,9]}}
       domainPadding={{ x: [30, 25] }}
-      legendData={[{ name: 'Cats' }, { name: 'Birds' }, { name: 'Dogs' }, { name: 'Mice' }]}
+      legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }]}
       legendOrientation="vertical"
       legendPosition="right"
       height={250}
@@ -58,7 +81,7 @@ import { Chart, ChartBar, ChartGroup, ChartThemeColor, ChartVoronoiContainer } f
       ariaTitle="Bar chart example"
       containerComponent={<ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />}
       domainPadding={{ x: [30, 25] }}
-      legendData={[{ name: 'Cats' }, { name: 'Birds' }, { name: 'Dogs' }, { name: 'Mice' }]}
+      legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }]}
       legendPosition="bottom"
       height={275}
       padding={{
@@ -96,7 +119,7 @@ import { Chart, ChartBar, ChartGroup, ChartThemeColor } from '@patternfly/react-
       ariaDesc="Average number of pets"
       ariaTitle="Bar chart example"
       domainPadding={{ x: [30, 25] }}
-      legendData={[{ name: 'Cats' }, { name: 'Birds' }, { name: 'Dogs' }, { name: 'Mice' }]}
+      legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }]}
       legendPosition="bottom-left"
       height={400}
       padding={{

diff --git a/...es/patternfly-4/react-charts/src/components/ChartBullet/examples/ChartBullet.md b/...es/patternfly-4/react-charts/src/components/ChartBullet/examples/ChartBullet.md
@@ -8,6 +8,30 @@ propComponents: ['ChartAxis', 'ChartBullet']
 import { ChartAxis, ChartBullet, ChartContainer, ChartThemeColor } from '@patternfly/react-charts';
 import './chart-bullet.scss';
 
+## Tutorial
+```js
+import React from 'react';
+import { Text, TextContent, TextVariants } from '@patternfly/react-charts';
+
+<TextContent>
+  <Text component={TextVariants.p}>
+    PatternFly React charts are based on the Victory chart library, along with additional functionality, custom 
+    components, and theming for PatternFly. This provides a collection of React components you can use to build 
+    interfaces with consistent markup, styling, and behavior.
+  </Text>
+  <Text component={TextVariants.p}>
+    In this 
+    <Text component={TextVariants.a} href="https://katacoda.com/patternfly/courses/charts/module-bullet" target="_blank">
+      tutorial
+    </Text>,
+    we will build a PatternFly bullet chart together - starting with a simple chart, adding qualitative ranges, primary 
+    compararative measures, a compararative warning measure, tooltips, a legend, and concluding by changing the theme 
+    color. You'll learn a little bit about React and how to use PatternFly components together to build a consistent 
+    experience.
+  </Text>
+</TextContent>
+```
+
 ## Simple bullet chart
 ```js
 import React from 'react';

diff --git a/...ages/patternfly-4/react-charts/src/components/ChartDonut/examples/ChartDonut.md b/...ages/patternfly-4/react-charts/src/components/ChartDonut/examples/ChartDonut.md
@@ -8,6 +8,29 @@ propComponents: ['ChartDonut']
 import { ChartDonut, ChartThemeColor, ChartThemeVariant } from '@patternfly/react-charts';
 import './chart-donut.scss';
 
+## Tutorial
+```js
+import React from 'react';
+import { Text, TextContent, TextVariants } from '@patternfly/react-charts';
+
+<TextContent>
+  <Text component={TextVariants.p}>
+    PatternFly React charts are based on the Victory chart library, along with additional functionality, custom 
+    components, and theming for PatternFly. This provides a collection of React components you can use to build 
+    interfaces with consistent markup, styling, and behavior.
+  </Text>
+  <Text component={TextVariants.p}>
+    In this 
+    <Text component={TextVariants.a} href="https://katacoda.com/patternfly/courses/charts/module-donut" target="_blank">
+      tutorial
+    </Text>,
+    we will build a PatternFly donut chart together - starting with a simple chart, adding thresholds, 
+    tooltips,  a legend, and concluding by changing the theme color. You'll learn a little bit about React 
+    and how to use PatternFly components together to build a consistent experience.
+  </Text>
+</TextContent>
+```
+
 ## Simple donut chart
 ```js
 import React from 'react';

diff --git a/...t-charts/src/components/ChartDonutUtilization/examples/ChartDonutUtilization.md b/...t-charts/src/components/ChartDonutUtilization/examples/ChartDonutUtilization.md
@@ -8,6 +8,29 @@ propComponents: ['ChartDonutThreshold', 'ChartDonutUtilization']
 import { ChartDonutThreshold, ChartDonutUtilization, ChartThemeColor, ChartThemeVariant } from '@patternfly/react-charts';
 import './chart-donut-utilization.scss';
 
+## Tutorial
+```js
+import React from 'react';
+import { Text, TextContent, TextVariants } from '@patternfly/react-charts';
+
+<TextContent>
+  <Text component={TextVariants.p}>
+    PatternFly React charts are based on the Victory chart library, along with additional functionality, custom 
+    components, and theming for PatternFly. This provides a collection of React components you can use to build 
+    interfaces with consistent markup, styling, and behavior.
+  </Text>
+  <Text component={TextVariants.p}>
+    In this 
+    <Text component={TextVariants.a} href="https://katacoda.com/patternfly/courses/charts/module-donut-utilization" target="_blank">
+      tutorial
+    </Text>,
+    we will build a PatternFly donut utilization chart together - starting with a simple chart, adding thresholds, 
+    tooltips, a legend, and concluding by changing the theme color. You'll learn a little bit about React 
+    and how to use PatternFly components together to build a consistent experience.
+  </Text>
+</TextContent>
+```
+
 ## Simple donut utilization chart
 ```js
 import React from 'react';

diff --git a/packages/patternfly-4/react-charts/src/components/ChartLine/examples/ChartLine.md b/packages/patternfly-4/react-charts/src/components/ChartLine/examples/ChartLine.md
@@ -9,6 +9,29 @@ import { Chart, ChartAxis, ChartGroup, ChartLegend, ChartLine, ChartThemeColor,
 import { VictoryZoomContainer } from 'victory';
 import './chart-line.scss';
 
+## Tutorial
+```js
+import React from 'react';
+import { Text, TextContent, TextVariants } from '@patternfly/react-charts';
+
+<TextContent>
+  <Text component={TextVariants.p}>
+    PatternFly React charts are based on the Victory chart library, along with additional functionality, custom 
+    components, and theming for PatternFly. This provides a collection of React components you can use to build 
+    interfaces with consistent markup, styling, and behavior.
+  </Text>
+  <Text component={TextVariants.p}>
+    In this 
+    <Text component={TextVariants.a} href="https://katacoda.com/patternfly/courses/charts/module-line" target="_blank">
+      tutorial
+    </Text>,
+    we will build a PatternFly line chart together - starting with a simple chart, adding multiple datasets, 
+    tooltips, axis labels, a legend, and concluding by changing the theme color. You'll learn a little bit about React 
+    and how to use PatternFly components together to build a consistent experience.
+  </Text>
+</TextContent>
+```
+
 ## Simple line chart with right aligned legend
 ```js
 import React from 'react';

diff --git a/packages/patternfly-4/react-charts/src/components/ChartPie/examples/ChartPie.md b/packages/patternfly-4/react-charts/src/components/ChartPie/examples/ChartPie.md
@@ -8,6 +8,29 @@ propComponents: ['ChartLegend', 'ChartPie']
 import { ChartLegend, ChartPie, ChartThemeColor, ChartThemeVariant } from '@patternfly/react-charts';
 import './chart-pie.scss';
 
+## Tutorial
+```js
+import React from 'react';
+import { Text, TextContent, TextVariants } from '@patternfly/react-charts';
+
+<TextContent>
+  <Text component={TextVariants.p}>
+    PatternFly React charts are based on the Victory chart library, along with additional functionality, custom 
+    components, and theming for PatternFly. This provides a collection of React components you can use to build 
+    interfaces with consistent markup, styling, and behavior.
+  </Text>
+  <Text component={TextVariants.p}>
+    In this 
+    <Text component={TextVariants.a} href="https://katacoda.com/patternfly/courses/charts/module-pie" target="_blank">
+      tutorial
+    </Text>,
+    we will build a PatternFly pie chart together - starting with a simple chart, adding tooltips, a legend, and 
+    concluding by changing the theme color. You'll learn a little bit about React and how to use PatternFly components 
+    together to build a consistent experience.
+  </Text>
+</TextContent>
+```
+
 ## Simple pie chart with right aligned legend
 ```js
 import React from 'react';