docs: add Charts subpage for React usage (#3397)

Author: web-padawan

articles/components/charts/usage-with-react.adoc

@@ -0,0 +1,52 @@
+---
+title: Usage with React
+description: Examples of using Charts with React
+order: 10
+---
+
+
+= Usage with React
+
+The sections that follow provide examples of certain Chart types with React.
+
+== Column Chart
+
+[.example]
+--
+[source,tsx]
+----
+include::{root}/frontend/demo/component/charts/react/charts-column.tsx[render,tags=snippet,indent=0,group=React]
+----
+--
+
+
+== Area Chart
+
+[.example]
+--
+[source,tsx]
+----
+include::{root}/frontend/demo/component/charts/react/charts-area.tsx[render,tags=snippet,indent=0,group=React]
+----
+--
+
+
+== Pie Chart
+
+[.example]
+--
+[source,tsx]
+----
+include::{root}/frontend/demo/component/charts/react/charts-pie.tsx[render,tags=snippet,indent=0,group=React]
+----
+--
+
+== Polar Chart
+
+[.example]
+--
+[source,tsx]
+----
+include::{root}/frontend/demo/component/charts/react/charts-polar.tsx[render,tags=snippet,indent=0,group=React]
+----
+--

frontend/demo/component/charts/react/charts-area.tsx

@@ -0,0 +1,30 @@
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import React from 'react';
+import { Chart } from '@vaadin/react-components-pro/Chart.js';
+import { ChartSeries } from '@vaadin/react-components-pro/ChartSeries.js';
+
+function Example() {
+  return (
+    // tag::snippet[]
+    <Chart
+      type="area"
+      title="Area Chart"
+      stacking="normal"
+      categories={'Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec'.split(',')}
+    >
+      <ChartSeries
+        title="United States dollar"
+        values={[135, 125, 89, 124, 105, 81, 111, 94, 95, 129, 98, 84]}
+      />
+      <ChartSeries title="Euro" values={[62, 72, 89, 68, 94, 92, 110, 100, 109, 89, 86, 105]} />
+      <ChartSeries title="Japanese yen" values={[30, 25, 32, 26, 15, 31, 24, 32, 21, 8, 12, 32]} />
+      <ChartSeries
+        title="Pound sterling"
+        values={[32, 21, 8, 12, 32, 21, 12, 30, 25, 19, 26, 15]}
+      />
+    </Chart>
+    // end::snippet[]
+  );
+}
+
+export default reactExample(Example); // hidden-source-line

frontend/demo/component/charts/react/charts-column.tsx

@@ -0,0 +1,18 @@
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import React from 'react';
+import { Chart } from '@vaadin/react-components-pro/Chart.js';
+import { ChartSeries } from '@vaadin/react-components-pro/ChartSeries.js';
+
+function Example() {
+  return (
+    // tag::snippet[]
+    <Chart title="Column Chart" type="column" categories={['Jan', 'Feb', 'Mar']}>
+      <ChartSeries title="Tokyo" values={[49.9, 71.5, 106.4]} />
+      <ChartSeries title="New York" values={[83.6, 78.8, 98.5]} />
+      <ChartSeries title="London" values={[48.9, 38.8, 39.3]} />
+    </Chart>
+    // end::snippet[]
+  );
+}
+
+export default reactExample(Example); // hidden-source-line

frontend/demo/component/charts/react/charts-pie.tsx

@@ -0,0 +1,24 @@
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import React from 'react';
+import { Chart } from '@vaadin/react-components-pro/Chart.js';
+import { ChartSeries } from '@vaadin/react-components-pro/ChartSeries.js';
+
+function Example() {
+  return (
+    // tag::snippet[]
+    <Chart type="pie" title="Pie Chart" tooltip>
+      <ChartSeries
+        title="Brands"
+        values={[
+          { name: 'Chrome', y: 38 },
+          { name: 'Firefox', y: 24 },
+          { name: 'Edge', y: 15, sliced: true, selected: true },
+          { name: 'Internet Explorer', y: 8 },
+        ]}
+      />
+    </Chart>
+    // end::snippet[]
+  );
+}
+
+export default reactExample(Example); // hidden-source-line

frontend/demo/component/charts/react/charts-polar.tsx

@@ -0,0 +1,18 @@
+import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
+import React from 'react';
+import { Chart } from '@vaadin/react-components-pro/Chart.js';
+import { ChartSeries } from '@vaadin/react-components-pro/ChartSeries.js';
+
+function Example() {
+  return (
+    // tag::snippet[]
+    <Chart polar title="Polar Chart">
+      <ChartSeries type="column" title="Column" values={[8, 7, 6, 5, 4, 3, 2, 1]} />
+      <ChartSeries type="line" title="Line" values={[1, 2, 3, 4, 5, 6, 7, 8]} />
+      <ChartSeries type="area" title="Area" values={[1, 8, 2, 7, 3, 6, 4, 5]} />
+    </Chart>
+    // end::snippet[]
+  );
+}
+
+export default reactExample(Example); // hidden-source-line