updated examples

cerner · Apr 5, 2024 · 3fa0c0c · 3fa0c0c
1 parent b07bfef
commit 3fa0c0c
Show file tree

Hide file tree

Showing 7 changed files with 208 additions and 13 deletions.
diff --git a/...terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Axes.3.graph.mdx b/...terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Axes.3.graph.mdx
@@ -67,9 +67,7 @@ axis: {
 }
 
 ```
-
-
-## Properties
+## Properties Summary
 
 | Property Name         | Type           | Default                    | Required | Description                                                                                                                                                                                                                                                           |
 |-----------------------|----------------|----------------------------|----------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
@@ -87,19 +85,35 @@ axis: {
 | type                  | string         | `AXIS_TYPE.DEFAULT`        | no       | See [type](#type). Normal number value or time-based. Only for x-axis.                                                                                                                                                                                                |    
 | tickLabelsRotation    | integer        | -                          | no       | Sets the rotation of the x-axis tick labels to `0º` or `-45º`. Accepted values: 0 or -45. Only for x-axis.                                                                                                                                                            |
 
+## Properties Details
 
 - ### `allowCalibration`
     Set calibration for the axis. 
     If `true`, then the axis upper and lower limits will update to fit the entire graph on the x-axis. 
     This feature can _not_ be used in conjunction with panning. 
-    If panning is enabled then this property will be ignored if `true`.
+    If panning is enabled then this property will be ignored if it is `true`.
 
     NOTE: This property is only implemented for the x-axis (`config.axis.x.allowCalibration`). 
     Please refer to [config.allowCalibration](./graph-configuration-object/#allowcalibration) for calibrating the y-axes.
 
     <AllowCalibrationXAxisDisabledExample/>
     <AllowCalibrationXAxisEnabledExample/>
 
+- ### `label`
+
+Axis label value. Will not be rendered if nothing is provided. 
+
+- ### `orientation`
+
+
+- ### `rangeRounding`
+  `rangeRounding` property extends the domain so that it starts and ends on nice round values.
+  This method typically modifies the scale's domain, and may only extend the bounds to the nearest round value.
+
+- ### `show`
+
+
+
 
 - ### `type`
     Property to set the type of the axis.
@@ -121,7 +135,7 @@ axis: {
 
   #### Note:
 
-  -   y2 axis is mandatory if the **y2.show** is enabled.
+  -   y2 axis is mandatory if **y2.show** is enabled.
   -   Ticks are mandatory for Bar graphs.
   -   `rangeRounding` property extends the domain so that it starts and ends on nice round values. This method typically modifies the scale’s domain, and may only extend the bounds to the nearest round value.
   -   `padDomain` property is only for Y and Y2 axes.

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
@@ -70,7 +70,7 @@ const dataset1 = {
 
 // graph rendering
 
-const NoDataGeneralExample = () => {
+const AllowCalibrationEnabledExample = () => {
   React.useEffect(() => {
     const graph1 = Carbon.api.graph(graphConfig1);
     graph1.loadContent(Carbon.api.line(dataset1));
@@ -87,4 +87,4 @@ const NoDataGeneralExample = () => {
   );
 };
 
-export default NoDataGeneralExample;
+export default AllowCalibrationEnabledExample;
diff --git a/...s/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationXAxisDisabled.jsx b/...s/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationXAxisDisabled.jsx
@@ -11,6 +11,8 @@ const graphConfig = {
       label: 'x-axis',
       lowerLimit: 100,
       upperLimit: 200,
+      // allowCalibration is true by default
+      // allowCalibration: false,
     },
     y: {
       show: true,
@@ -48,12 +50,12 @@ const dataset1 = {
 
 // graph rendering
 
-const NoDataGeneralExample = () => {
+const AllowCalibrationDisabledExample = () => {
   React.useEffect(() => {
     const graph = Carbon.api.graph(graphConfig);
     graph.loadContent(Carbon.api.line(dataset1));
   }, []);
   return <div id="allow-calibration-disabled-example" />;
 };
 
-export default NoDataGeneralExample;
+export default AllowCalibrationDisabledExample;
diff --git a/...cs/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationXAxisEnabled.jsx b/...cs/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationXAxisEnabled.jsx
@@ -4,7 +4,7 @@ import Carbon from '@cerner/carbon-graphs';
 //  graph configuration object
 
 const graphConfig = {
-  bindTo: '#allow-calibration-disabled-example',
+  bindTo: '#allow-calibration-enabled-example',
   axis: {
     x: {
       show: true,
@@ -49,12 +49,12 @@ const dataset1 = {
 
 // graph rendering
 
-const NoDataGeneralExample = () => {
+const AllowCalibrationEnabledExample = () => {
   React.useEffect(() => {
     const graph = Carbon.api.graph(graphConfig);
     graph.loadContent(Carbon.api.line(dataset1));
   }, []);
-  return <div id="allow-calibration-disabled-example" />;
+  return <div id="allow-calibration-enabled-example" />;
 };
 
-export default NoDataGeneralExample;
+export default AllowCalibrationEnabledExample;
diff --git a/...docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/RangeRoundingYAxisDisabled.jsx b/...docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/RangeRoundingYAxisDisabled.jsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import Carbon from '@cerner/carbon-graphs';
+
+//  graph configuration object
+
+const graphConfig = {
+  bindTo: '#range-rounding-disabled-example',
+  axis: {
+    x: {
+      show: true,
+      label: 'x-axis',
+      lowerLimit: 100,
+      upperLimit: 200,
+    },
+    y: {
+      show: true,
+      label: 'y-axis',
+      lowerLimit: -5,
+      upperLimit: 20,
+      rangeRounding: 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: 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 },
+  ],
+};
+
+// graph rendering
+
+const RangeRoundingDisabledExample = () => {
+  React.useEffect(() => {
+    const graph = Carbon.api.graph(graphConfig);
+    graph.loadContent(Carbon.api.line(dataset1));
+  }, []);
+  return <div id="range-rounding-disabled-example" />;
+};
+
+export default RangeRoundingDisabledExample;
diff --git a/...-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/RangeRoundingYAxisEnabled.jsx b/...-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/RangeRoundingYAxisEnabled.jsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Carbon from '@cerner/carbon-graphs';
+
+//  graph configuration object
+
+const graphConfig = {
+  bindTo: '#range-rounding-enabled-example',
+  axis: {
+    x: {
+      show: true,
+      label: 'x-axis',
+      lowerLimit: 100,
+      upperLimit: 200,
+    },
+    y: {
+      show: true,
+      label: 'y-axis',
+      lowerLimit: -5,
+      upperLimit: 20,
+    },
+  },
+};
+
+//  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: 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 },
+  ],
+};
+
+// graph rendering
+
+const RangeRoundingEnabledExample = () => {
+  React.useEffect(() => {
+    const graph = Carbon.api.graph(graphConfig);
+    graph.loadContent(Carbon.api.line(dataset1));
+  }, []);
+  return <div id="range-rounding-enabled-example" />;
+};
+
+export default RangeRoundingEnabledExample;
diff --git a/...s/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/YAxisHidden.jsx b/...s/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/YAxisHidden.jsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import Carbon from '@cerner/carbon-graphs';
+
+//  graph configuration object
+
+const graphConfig = {
+  bindTo: '#y-axis-hidden-example',
+  axis: {
+    x: {
+      show: true,
+      label: 'x-axis',
+      lowerLimit: 100,
+      upperLimit: 200,
+      allowCalibration: true,
+    },
+    y: {
+      show: true,
+      label: 'y-axis',
+      lowerLimit: -5,
+      upperLimit: 20,
+    },
+  },
+};
+
+//  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: 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 },
+  ],
+};
+
+// graph rendering
+
+const YAxisHiddenExample = () => {
+  React.useEffect(() => {
+    const graph = Carbon.api.graph(graphConfig);
+    graph.loadContent(Carbon.api.line(dataset1));
+  }, []);
+  return <div id="y-axis-hidden-example" />;
+};
+
+export default YAxisHiddenExample;