Adding temporary example to test data change

packages/react-examples/src/react-charting/AreaChart/AreaChart.DataChange.Example.tsx

@@ -0,0 +1,141 @@
+import * as React from 'react';
+import { AreaChart, IChartProps } from '@fluentui/react-charting';
+import * as d3 from 'd3-format';
+import { ILineChartProps } from '@fluentui/react-charting';
+import { DefaultButton } from '@fluentui/react/lib/Button';
+
+interface IAreaChartBasicState {
+  width: number;
+  height: number;
+  dynamicData: IChartProps;
+}
+
+export class AreaChartDataChangeExample extends React.Component<{}, IAreaChartBasicState> {
+  constructor(props: ILineChartProps) {
+    super(props);
+    this.state = {
+      width: 700,
+      height: 300,
+      dynamicData: {
+        chartTitle: 'Area chart with dynamic data',
+        lineChartData: [
+          {
+            legend: 'Chart 1',
+            data: [
+              { x: 20, y: 10 },
+              { x: 30, y: 20 },
+              { x: 40, y: 40 },
+            ],
+          },
+          {
+            legend: 'Chart 2',
+            data: [
+              { x: 20, y: 20 },
+              { x: 30, y: 30 },
+              { x: 40, y: 50 },
+            ],
+          },
+          {
+            legend: 'Chart 3',
+            data: [
+              { x: 20, y: 25 },
+              { x: 30, y: 35 },
+              { x: 40, y: 55 },
+            ],
+          },
+        ],
+      },
+    };
+    this._changeData = this._changeData.bind(this);
+  }
+
+  public render(): JSX.Element {
+    return <div>{this._basicExample()}</div>;
+  }
+
+  private _onWidthChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    this.setState({ width: parseInt(e.target.value, 10) });
+  };
+  private _onHeightChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    this.setState({ height: parseInt(e.target.value, 10) });
+  };
+
+  private _basicExample(): JSX.Element {
+    const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` };
+
+    return (
+      <>
+        <label htmlFor="changeWidth_Multiple">Change Width:</label>
+        <input
+          type="range"
+          value={this.state.width}
+          min={200}
+          max={1000}
+          id="changeWidth_Multiple"
+          onChange={this._onWidthChange}
+          aria-valuetext={`ChangeWidthslider${this.state.width}`}
+        />
+        <label htmlFor="changeHeight_Multiple">Change Height:</label>
+        <input
+          type="range"
+          value={this.state.height}
+          min={200}
+          max={1000}
+          id="changeHeight_Multiple"
+          onChange={this._onHeightChange}
+          aria-valuetext={`ChangeHeightslider${this.state.height}`}
+        />
+        <div style={rootStyle}>
+          <AreaChart
+            height={this.state.height}
+            width={this.state.width}
+            data={this.state.dynamicData}
+            legendsOverflowText={'Overflow Items'}
+            yAxisTickFormat={d3.format('$,')}
+            enablePerfOptimization={true}
+            legendProps={{
+              allowFocusOnLegends: true,
+            }}
+          />
+          <DefaultButton text="Change data" onClick={this._changeData} />
+        </div>
+      </>
+    );
+  }
+  private _changeData(): void {
+    this.setState({
+      dynamicData: {
+        chartTitle: 'Area chart with dynamic data',
+        lineChartData: [
+          {
+            legend: 'Chart 1',
+            data: [
+              { x: 20, y: this._randomY() },
+              { x: 30, y: this._randomY() },
+              { x: 40, y: this._randomY() },
+            ],
+          },
+          {
+            legend: 'Chart 2',
+            data: [
+              { x: 20, y: this._randomY() },
+              { x: 30, y: this._randomY() },
+              { x: 40, y: this._randomY() },
+            ],
+          },
+          {
+            legend: 'Chart 3',
+            data: [
+              { x: 20, y: this._randomY() },
+              { x: 30, y: this._randomY() },
+              { x: 40, y: this._randomY() },
+            ],
+          },
+        ],
+      },
+    });
+  }
+  private _randomY(): number {
+    return Math.random() * 60 + 5;
+  }
+}

packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx

@@ -12,6 +12,7 @@ import { AreaChartMultipleExample } from './AreaChart.Multiple.Example';
 import { AreaChartStyledExample } from './AreaChart.Styled.Example';
 import { AreaChartCustomAccessibilityExample } from './AreaChart.CustomAccessibility.Example';
 import { AreaChartLargeDataExample } from './AreaChart.LargeData.Example';
+import { AreaChartDataChangeExample } from './AreaChart.DataChange.Example';
 
 const AreaChartBasicExampleCode =
   require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/AreaChart/AreaChart.Basic.Example.tsx') as string;
@@ -23,6 +24,8 @@ const AreaChartCustomAccessibilityExampleCode =
   require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/AreaChart/AreaChart.CustomAccessibility.Example.tsx') as string;
 const AreaChartLargeDataExampleCode =
   require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/AreaChart/AreaChart.LargeData.Example.tsx') as string;
+const AreaChartDataChangeExampleCode =
+  require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/AreaChart/AreaChart.DataChange.Example.tsx') as string;
 
 export class AreaChart extends React.Component<IComponentDemoPageProps, {}> {
   public render(): JSX.Element {
@@ -47,6 +50,9 @@ export class AreaChart extends React.Component<IComponentDemoPageProps, {}> {
             <ExampleCard title="Area chart large data" code={AreaChartLargeDataExampleCode}>
               <AreaChartLargeDataExample />
             </ExampleCard>
+            <ExampleCard title="Area chart Data Change" code={AreaChartDataChangeExampleCode}>
+              <AreaChartDataChangeExample />
+            </ExampleCard>
           </div>
         }
         propertiesTables={