[terra-graph-docs] Update reflow docs

packages/carbon-graphs/tests/wdio/Graphs/General/general-spec.js

@@ -71,7 +71,7 @@ Terra.describeViewports('General', ['tiny', 'medium', 'large'], () => {
       Terra.validates.screenshot('x-axis_allowcalibration_disabled', { selector: '.carbon-graph-container' });
     });
     it('validates y-axis allowCalibration disabled graph', () => {
-      browser.url('/raw/tests/cerner-terra-graphs-docs/graphs/general/allow-calibration');
+      browser.url('/raw/tests/cerner-terra-graphs-docs/general/allow-calibration');
       Terra.validates.screenshot('y-axis_allowcalibration_disabled', { selector: '#allow-calibration-disabled-example' });
     });
 
@@ -90,7 +90,7 @@ Terra.describeViewports('General', ['tiny', 'medium', 'large'], () => {
       Terra.validates.screenshot('x-axis_allowcalibration_enabled', { selector: '.carbon-graph-container' });
     });
     it('validates y-axis allowCalibration enabled graph container', () => {
-      browser.url('/raw/tests/cerner-terra-graphs-docs/graphs/general/allow-calibration');
+      browser.url('/raw/tests/cerner-terra-graphs-docs/general/allow-calibration');
       Terra.validates.screenshot('y-axis_allowcalibration_enabled', { selector: '#allow-calibration-enabled-example' });
     });
 

packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/Reflow.e.graph.mdx

@@ -1,10 +1,25 @@
-import BasicReflowExample from './examples/reflow/BasicReflowExample';
-import PanningExample from './examples/reflow/PanningExample';
+import {Notice} from '@cerner/terra-docs'
 
+import BasicReflowExample from './examples/reflow/BasicReflowExample?dev-site-example';
+import PanningExample from './examples/reflow/PanningExample?dev-site-example';
+import DynamicallyUpdatingDataExample from './examples/reflow/DynamicallyUpdatingData?dev-site-example';
+import DynamicallyUpdatingMultipleDatasetsExample from './examples/reflow/DynamicallyUpdatingMultipleDatasets?dev-site-example';
 
 # Reflow
 
-Reflow can be used to dynamically update a graph.
+Reflow can be used to dynamically update a graph without causing a full redraw from scratch.
+It can be invoked by using the `GraphInstance.reflowMultipleDatasets` method.
+
+```js
+const graphInstance = Carbon.api.graph(graphConfig);
+graphInstance.reflowMultipleDatasets();
+```
+
+<Notice variant="deprecation">
+
+The original reflow method, `GraphInstance.reflow()`, is depreacted.
+
+</Notice>
 
 ## Overview
 
@@ -13,4 +28,13 @@ Reflow can be used to dynamically update a graph.
 ## Examples
 
 ### Panning
+
 <PanningExample/>
+
+### Dynamic Data
+
+<DynamicallyUpdatingDataExample />
+
+### Dynamic Data - multiple datasets
+
+<DynamicallyUpdatingMultipleDatasetsExample/>

packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/BasicReflowExample.jsx

@@ -29,7 +29,7 @@ const graphConfig = {
 const dataset1 = {
   key: 'uid_1',
   label: {
-    display: 'Data Label 1',
+    display: 'Dataset 1',
   },
   color: Carbon.helpers.COLORS.BLACK,
   values: [
@@ -66,14 +66,14 @@ const BasicReflowExample = () => {
     graph.reflowMultipleDatasets();
   };
 
-  const handleClickUpdateLimits = () => {
+  const handleClickUpdateLimits1 = () => {
     graph.config.axis.y.domain.lowerLimit = -52;
     graph.config.axis.y.domain.upperLimit = 52;
 
     graph.reflowMultipleDatasets();
   };
 
-  const handleClickReset = () => {
+  const handleClickUpdateLimits2 = () => {
     graph.config.axis.y.domain.lowerLimit = 0;
     graph.config.axis.y.domain.upperLimit = 20;
 
@@ -83,8 +83,8 @@ const BasicReflowExample = () => {
   return (
     <>
       <Button text="Toggle Calibration" onClick={handleClickToggleCalibration} />
-      <Button text="Update Axis Limits" onClick={handleClickUpdateLimits} />
-      <Button text="Reset" onClick={handleClickReset} />
+      <Button text="Update y-axis limits to -52, 52" onClick={handleClickUpdateLimits1} />
+      <Button text="Update y-axis limits to 0, 20" onClick={handleClickUpdateLimits2} />
       <div>
         AllowCalibration:
         {allowCalibrationStatus}

packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx

@@ -0,0 +1,125 @@
+import React, { useState } from 'react';
+
+import Button from 'terra-button';
+
+import Carbon from '@cerner/carbon-graphs';
+
+//  graph configuration object
+
+const graphConfig = {
+  bindTo: '#dynamic-data-update-example',
+  axis: {
+    x: {
+      label: 'x-axis',
+      lowerLimit: 80,
+      upperLimit: 280,
+      rangeRounding: false,
+    },
+    y: {
+      label: 'y-axis',
+      lowerLimit: -5,
+      upperLimit: 20,
+    },
+  },
+  allowCalibration: true,
+};
+
+//  graph dataset
+
+const dataset1 = {
+  key: 'uid_1',
+  label: {
+    display: 'Dataset 1',
+  },
+  color: Carbon.helpers.COLORS.PINK,
+  values: [
+    { x: 87, y: -2 },
+    { x: 95, y: 1 },
+    { x: 103, y: -4 },
+    { x: 109, y: -2 },
+    { x: 128, y: 3 },
+    { x: 145, y: 28 },
+    { x: 151, y: 7 },
+    { x: 164, y: 10 },
+    { x: 177, y: 1 },
+    { x: 192, y: 6 },
+    { x: 203, y: -21 },
+    { x: 209, y: -3 },
+    { x: 246, y: 3 },
+  ],
+};
+
+// Updated values for dataset 1
+// Color, shape & label of the original dataset is retained if it is not updated
+const updatedDataset1 = {
+  key: 'uid_1',
+  values: [
+    { x: 81, y: 21 },
+    { x: 107, y: 6 },
+    { x: 109, y: 7 },
+    { x: 118, y: 5 },
+    { x: 117, y: 21 },
+    { x: 127, y: -20 },
+    { x: 137, y: -9 },
+    { x: 141, y: -6 },
+    { x: 144, y: 39 },
+    { x: 151, y: -14 },
+    { x: 156, y: -9 },
+    { x: 163, y: 4 },
+    { x: 164, y: 29 },
+    { x: 170, y: 30 },
+    { x: 172, y: 31 },
+    { x: 176, y: 34 },
+    { x: 185, y: 1 },
+    { x: 191, y: -2 },
+    { x: 193, y: 38 },
+    { x: 198, y: 40 },
+  ],
+};
+
+// graph rendering
+let graph;
+const DynamicallyUpdatingDataExample = () => {
+  const [allowCalibrationStatus, SetAllowCalibrationStatus] = useState(graphConfig.allowCalibration.toString());
+
+  React.useEffect(() => {
+    graph = Carbon.api.graph(graphConfig);
+    graph.loadContent(Carbon.api.line(dataset1));
+  }, []);
+
+  const handleClickToggleCalibration = () => {
+    graph.config.allowCalibration = !graph.config.allowCalibration;
+    SetAllowCalibrationStatus(graph.config.allowCalibration.toString());
+
+    graph.reflowMultipleDatasets();
+  };
+
+  const handleClickUpdateData = () => {
+    //    graph.config.axis.y.domain.lowerLimit = 0;
+    //    graph.config.axis.y.domain.upperLimit = 20;
+
+    graph.reflowMultipleDatasets({
+      panData: [updatedDataset1],
+    });
+  };
+
+  const handleClickReset = () => {
+    graph.unloadContent(Carbon.api.line(dataset1));
+    graph.loadContent(Carbon.api.line(dataset1));
+  };
+
+  return (
+    <>
+      <Button text="Toggle Calibration" onClick={handleClickToggleCalibration} />
+      <Button text="Update Data" onClick={handleClickUpdateData} />
+      <Button text="Reset" onClick={handleClickReset} />
+      <div>
+        AllowCalibration:
+        {allowCalibrationStatus}
+      </div>
+      <div id="dynamic-data-update-example" />
+    </>
+  );
+};
+
+export default DynamicallyUpdatingDataExample;

packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingMultipleDatasets.jsx

@@ -0,0 +1,171 @@
+import React, { useState } from 'react';
+
+import Button from 'terra-button';
+
+import Carbon from '@cerner/carbon-graphs';
+
+//  graph configuration object
+
+const graphConfig = {
+  bindTo: '#dynamic-data-update-multiple-datasets-example',
+  axis: {
+    x: {
+      label: 'x-axis',
+      lowerLimit: 80,
+      upperLimit: 280,
+      rangeRounding: false,
+    },
+    y: {
+      label: 'y-axis',
+      lowerLimit: -5,
+      upperLimit: 20,
+    },
+  },
+  allowCalibration: true,
+};
+
+//  graph datasets
+
+const dataset1 = {
+  key: 'uid_1',
+  label: {
+    display: 'Dataset 1',
+  },
+  color: Carbon.helpers.COLORS.PINK,
+  values: [
+    { x: 87, y: -2 },
+    { x: 95, y: 1 },
+    { x: 103, y: -4 },
+    { x: 109, y: -2 },
+    { x: 128, y: 3 },
+    { x: 145, y: 28 },
+    { x: 151, y: 7 },
+    { x: 164, y: 10 },
+    { x: 177, y: 1 },
+    { x: 192, y: 6 },
+    { x: 203, y: -21 },
+    { x: 209, y: -3 },
+    { x: 246, y: 3 },
+  ],
+};
+
+const dataset2 = {
+  key: 'uid_2',
+  label: {
+    display: 'Dataset 2',
+  },
+  color: Carbon.helpers.COLORS.LAVENDER,
+  values: [
+    { x: 106, y: 19 },
+    { x: 111, y: 45 },
+    { x: 111, y: -1 },
+    { x: 113, y: 25 },
+    { x: 130, y: 12 },
+    { x: 133, y: 39 },
+    { x: 144, y: 45 },
+    { x: 155, y: 37 },
+    { x: 166, y: 20 },
+    { x: 181, y: 60 },
+    { x: 182, y: 29 },
+    { x: 187, y: -6 },
+    { x: 189, y: 54 },
+    { x: 195, y: 59 },
+    { x: 222, y: 32 },
+  ],
+};
+
+// updated datasets
+
+// updated values for dataset 1
+// color, shape & label of the original dataset is retained if it is not updated
+const updatedDataset1 = {
+  key: 'uid_1',
+  values: [
+    { x: 81, y: 21 },
+    { x: 107, y: 6 },
+    { x: 109, y: 7 },
+    { x: 118, y: 5 },
+    { x: 117, y: 21 },
+    { x: 127, y: -20 },
+    { x: 137, y: -9 },
+    { x: 141, y: -6 },
+    { x: 144, y: 39 },
+    { x: 151, y: -14 },
+    { x: 156, y: -9 },
+    { x: 163, y: 4 },
+    { x: 164, y: 29 },
+    { x: 170, y: 30 },
+    { x: 172, y: 31 },
+    { x: 176, y: 34 },
+    { x: 185, y: 1 },
+    { x: 191, y: -2 },
+    { x: 193, y: 38 },
+    { x: 198, y: 40 },
+  ],
+};
+
+const updatedDataset2 = {
+  key: 'uid_2',
+  values: [
+    { x: 101, y: 31 },
+    { x: 104, y: 7 },
+    { x: 107, y: 120 },
+    { x: 131, y: 19 },
+    { x: 141, y: -5 },
+    { x: 150, y: 27 },
+    { x: 150, y: -1 },
+    { x: 158, y: 28 },
+    { x: 192, y: 27 },
+    { x: 212, y: 13 },
+    { x: 212, y: 46 },
+    { x: 217, y: 3 },
+    { x: 224, y: 0 },
+  ],
+};
+
+// graph rendering
+let graph;
+const DynamicallyUpdatingDataExample = () => {
+  const [allowCalibrationStatus, SetAllowCalibrationStatus] = useState(graphConfig.allowCalibration.toString());
+
+  React.useEffect(() => {
+    graph = Carbon.api.graph(graphConfig);
+    graph.loadContent(Carbon.api.line(dataset1));
+    graph.loadContent(Carbon.api.line(dataset2));
+  }, []);
+
+  const handleClickToggleCalibration = () => {
+    graph.config.allowCalibration = !graph.config.allowCalibration;
+    SetAllowCalibrationStatus(graph.config.allowCalibration.toString());
+
+    graph.reflowMultipleDatasets();
+  };
+
+  const handleClickUpdateData = () => {
+    graph.reflowMultipleDatasets({
+      panData: [updatedDataset1, updatedDataset2],
+    });
+  };
+
+  const handleClickReset = () => {
+    graph.unloadContent(Carbon.api.line(dataset1));
+    graph.unloadContent(Carbon.api.line(dataset2));
+    graph.loadContent(Carbon.api.line(dataset1));
+    graph.loadContent(Carbon.api.line(dataset2));
+  };
+
+  return (
+    <>
+      <Button text="Toggle Calibration" onClick={handleClickToggleCalibration} />
+      <Button text="Update Data" onClick={handleClickUpdateData} />
+      <Button text="Reset" onClick={handleClickReset} />
+      <div>
+        AllowCalibration:
+        {allowCalibrationStatus}
+      </div>
+      <div id="dynamic-data-update-multiple-datasets-example" />
+    </>
+  );
+};
+
+export default DynamicallyUpdatingDataExample;