updated examples

cerner · Apr 5, 2024 · 41adbd1 · 41adbd1
1 parent cb25a75
commit 41adbd1
Show file tree

Hide file tree

Showing 4 changed files with 161 additions and 5 deletions.
diff --git a/...c/terra-dev-site/graph/CoreConfiguration.b/GraphConfigurationObject.1.graph.mdx b/...c/terra-dev-site/graph/CoreConfiguration.b/GraphConfigurationObject.1.graph.mdx
@@ -1,5 +1,7 @@
 import NoDataGeneralExample from './examples/GraphWithNoData?dev-site-example';
 import CustomLegendDomExample from './examples/GraphWithCustomLegendDom?dev-site-example';
+import AllowCalibrationDisabledExample from './examples/AllowCalibrationDisabled?dev-site-example';
+import AllowCalibrationEnabledExample from './examples/AllowCalibrationEnabled?dev-site-example';
 
 # Graph Configuration Object
 
@@ -8,7 +10,10 @@ It hold various properties to configure a grid.
 
 -   [Valid Graphs](#valid-graphs)
 -   [Configuration Structure](#configuration-structure)
--   [Configuration Properties](#configuration-properties)
+-   [Configuration Properties Summary](#configuration-properties-summary)
+-   [Configuration Properties Details](#configuration-properties-details)
+    -   [allowCalibration](#allowcalibration)
+    -   [bindLegendTo](#bindlegendto)
     -   [clickPassThrough](#clickpassthrough)
     -   [dimension](#dimension)
     -   [legendPadding](#legendpadding)
@@ -71,13 +76,13 @@ const graphConfig = {
 }
 ```
 
-## Configuration Properties
+## Configuration Properties Summary
 
 | Property Name          | Expected | Default                                        | Required | Description                                                                                                                                                                                 |
 |------------------------|----------|------------------------------------------------|----------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | axis                   | object   | -                                              | yes      | See [Axis](./Axes).                                                                                                                                                                         |
 | bindTo                 | string   | -                                              | yes      | DOM ID to bind the graph container to.                                                                                                                                                      |
-| allowCalibration       | boolean  | `true`                                         | no       | Toggle to allow calibration to adjust the y axis.                                                                                                                                           |
+| [allowCalibration](#allowcalibration)       | boolean  | `true`                                         | no       | Toggle to automatically adjust the y axis based on the dataset.                                                                                                                             |
 | bindLegendTo           | string   | `null`                                         | no       | Container id for custom legend placement. See [bindLegendTo](#bindLegendTo).                                                                                                                |
 | clickPassThrough       | object   | `{}`                                           | no       | See [clickPassThrough](#clickpassthrough).                                                                                                                                                  |
 | dateline               | array    | `[]`                                           | no       | See [Dateline](./Dateline).                                                                                                                                                                 |
@@ -98,6 +103,19 @@ const graphConfig = {
 | showXLabel             | boolean  | `true`                                         | no       | Toggle to show the x-axis label. An x-axis label will be required by default in 3.0.0. Set this property to `false` for specific use cases where the x-axis label needs to be hidden.       |
 | ticksCount             | number   | `3`-`7` depending on the input range           | no       | See [ticksCount](#tickscount).                                                                                                                                                              |
 
+## Configuration Properties Details
+
+- ### `allowCalibration`
+
+The `allowCalibration` prop allows the y-axes to be automatically updated based on the dataset.
+
+<AllowCalibrationDisabledExample/>
+
+When enabled, the maximum and minimum points of the dataset are used to determine the new limits, regardless of if the datapoints are visible in the viewport.
+
+<AllowCalibrationEnabledExample/>
+
+
 - ### `bindLegendTo`
 
 Container ID for custom legend placement.
@@ -158,6 +176,7 @@ Container ID for custom legend placement.
   | left          | number | no       | `8`     | Left padding of legend container.   |
   | right         | number | no       | `8`     | Right padding of legend container.  |
 
+
 - ### `ticksCount`
   **type:** number
 

diff --git a/...s-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationDisabled.jsx b/...s-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationDisabled.jsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import Carbon from '@cerner/carbon-graphs';
+
+//  graph configuration object
+
+const graphConfig = {
+  bindTo: '#allow-calibration-disabled-example',
+  axis: {
+    x: {
+      show: true,
+      label: 'x-axis',
+      lowerLimit: 80,
+      upperLimit: 280,
+    },
+    y: {
+      show: true,
+      label: 'y-axis',
+      lowerLimit: -5,
+      upperLimit: 20,
+    },
+  },
+  allowCalibration: false,
+};
+
+//  graph dataset
+
+const dataset1 = {
+  key: 'uid_1',
+  label: {
+    display: 'Data Label 1',
+  },
+  color: Carbon.helpers.COLORS.BLACK,
+  values: [
+    { x: 87, y: -2 },
+    { x: 95, y: 1 },
+    { x: 160, y: -7 },
+    { x: 200, y: 28 },
+    { x: 213, y: 11 },
+    { x: 246, y: 1 },
+  ],
+};
+
+// graph rendering
+
+const NoDataGeneralExample = () => {
+  React.useEffect(() => {
+    const graph = Carbon.api.graph(graphConfig);
+    graph.loadContent(Carbon.api.line(dataset1));
+  }, []);
+  return <div id="allow-calibration-disabled-example" />;
+};
+
+export default NoDataGeneralExample;
diff --git a/...hs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationEnabled.jsx b/...hs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationEnabled.jsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import Carbon from '@cerner/carbon-graphs';
+
+//  graph configuration objects
+
+const graphConfig1 = {
+  bindTo: '#allow-calibration-enabled-example',
+  axis: {
+    x: {
+      show: true,
+      label: 'x-axis',
+      lowerLimit: 80,
+      upperLimit: 280,
+    },
+    y: {
+      show: true,
+      label: 'y-axis',
+      lowerLimit: -5,
+      upperLimit: 20,
+    },
+  },
+  // allowCalibration is true by default
+  // allowCalibration: true,
+};
+
+const graphConfig2 = {
+  bindTo: '#allow-calibration-enabled-example2',
+  axis: {
+    x: {
+      show: true,
+      label: 'x-axis',
+      lowerLimit: 80,
+      upperLimit: 100,
+    },
+    y: {
+      show: true,
+      label: 'y-axis',
+      lowerLimit: -5,
+      upperLimit: 20,
+    },
+  },
+  // allowCalibration is true by default
+  // allowCalibration: true,
+};
+
+//  graph dataset
+
+const dataset1 = {
+  key: 'uid_1',
+  label: {
+    display: 'Data Label 1',
+  },
+  color: Carbon.helpers.COLORS.BLACK,
+  values: [
+    { x: 87, y: -2 },
+    { x: 95, y: 1 },
+    { x: 160, y: -7 },
+    { x: 200, y: 28 },
+    { x: 213, y: 11 },
+    { x: 246, y: 1 },
+  ],
+};
+
+// graph rendering
+
+const NoDataGeneralExample = () => {
+
+  React.useEffect(() => {
+    const graph1 = Carbon.api.graph(graphConfig1);
+    graph1.loadContent(Carbon.api.line(dataset1));
+
+    const graph2 = Carbon.api.graph(graphConfig2);
+    graph2.loadContent(Carbon.api.line(dataset1));
+  }, []);
+
+  return (
+    <>
+      <div id="allow-calibration-enabled-example" />
+      <div id="allow-calibration-enabled-example2" />
+    </>
+  );
+};
+
+export default NoDataGeneralExample;
diff --git a/...s-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/GraphWithCustomLegendDom.jsx b/...s-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/GraphWithCustomLegendDom.jsx
@@ -43,7 +43,7 @@ const dataset1 = {
 
 // graph rendering
 
-const NoDataGeneralExample = () => {
+const CustomLegendDomExample = () => {
   React.useEffect(() => {
     const graph = Carbon.api.graph(graphConfig);
     graph.loadContent(Carbon.api.line(dataset1));
@@ -58,4 +58,4 @@ const NoDataGeneralExample = () => {
   );
 };
 
-export default NoDataGeneralExample;
+export default CustomLegendDomExample;