From 237b3428270cb669f17840d76d0f14637c1299ce Mon Sep 17 00:00:00 2001 From: Saad <38024451+sdadn@users.noreply.github.com> Date: Mon, 1 Apr 2024 17:00:33 -0500 Subject: [PATCH 01/10] updated foldername --- .../Axes.1/AllowCalibration.7.graph.mdx | 0 .../{examples-temp => examples}/Axes.1/AxisHidden.1.graph.mdx | 0 .../{examples-temp => examples}/Axes.1/AxisTicks.2.graph.mdx | 0 .../{examples-temp => examples}/Axes.1/DateTimeBucket.6.graph.mdx | 0 .../{examples-temp => examples}/Axes.1/Label.3.graph.mdx | 0 .../Axes.1/XAxisAlternateLocale.4.graph.mdx | 0 .../Axes.1/XAxisOrientationTop.5.graph.mdx | 0 .../Axes.1/XAxisTickLabelOrientation.8.graph.mdx | 0 .../{examples-temp => examples}/Grid.5.graph.mdx | 0 .../{examples-temp => examples}/Legend.4.graph.mdx | 0 .../Other.3/BackgroundColor.14.graph.mdx | 0 .../{examples-temp => examples}/Other.3/NoData.6.graph.mdx | 0 .../Padding.2/CustomLegendPlacement.1.graph.mdx | 0 .../Padding.2/GraphAndLegendPaddingReduced.2.graph.mdx | 0 14 files changed, 0 insertions(+), 0 deletions(-) rename packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/{examples-temp => examples}/Axes.1/AllowCalibration.7.graph.mdx (100%) rename packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/{examples-temp => examples}/Axes.1/AxisHidden.1.graph.mdx (100%) rename packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/{examples-temp => examples}/Axes.1/AxisTicks.2.graph.mdx (100%) rename packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/{examples-temp => examples}/Axes.1/DateTimeBucket.6.graph.mdx (100%) rename packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/{examples-temp => examples}/Axes.1/Label.3.graph.mdx (100%) rename packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/{examples-temp => examples}/Axes.1/XAxisAlternateLocale.4.graph.mdx (100%) rename packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/{examples-temp => examples}/Axes.1/XAxisOrientationTop.5.graph.mdx (100%) rename packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/{examples-temp => examples}/Axes.1/XAxisTickLabelOrientation.8.graph.mdx (100%) rename packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/{examples-temp => examples}/Grid.5.graph.mdx (100%) rename packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/{examples-temp => examples}/Legend.4.graph.mdx (100%) rename packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/{examples-temp => examples}/Other.3/BackgroundColor.14.graph.mdx (100%) rename packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/{examples-temp => examples}/Other.3/NoData.6.graph.mdx (100%) rename packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/{examples-temp => examples}/Padding.2/CustomLegendPlacement.1.graph.mdx (100%) rename packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/{examples-temp => examples}/Padding.2/GraphAndLegendPaddingReduced.2.graph.mdx (100%) diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples-temp/Axes.1/AllowCalibration.7.graph.mdx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/Axes.1/AllowCalibration.7.graph.mdx similarity index 100% rename from packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples-temp/Axes.1/AllowCalibration.7.graph.mdx rename to packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/Axes.1/AllowCalibration.7.graph.mdx diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples-temp/Axes.1/AxisHidden.1.graph.mdx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/Axes.1/AxisHidden.1.graph.mdx similarity index 100% rename from packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples-temp/Axes.1/AxisHidden.1.graph.mdx rename to packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/Axes.1/AxisHidden.1.graph.mdx diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples-temp/Axes.1/AxisTicks.2.graph.mdx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/Axes.1/AxisTicks.2.graph.mdx similarity index 100% rename from packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples-temp/Axes.1/AxisTicks.2.graph.mdx rename to packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/Axes.1/AxisTicks.2.graph.mdx diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples-temp/Axes.1/DateTimeBucket.6.graph.mdx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/Axes.1/DateTimeBucket.6.graph.mdx similarity index 100% rename from packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples-temp/Axes.1/DateTimeBucket.6.graph.mdx rename to packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/Axes.1/DateTimeBucket.6.graph.mdx diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples-temp/Axes.1/Label.3.graph.mdx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/Axes.1/Label.3.graph.mdx similarity index 100% rename from packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples-temp/Axes.1/Label.3.graph.mdx rename to packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/Axes.1/Label.3.graph.mdx diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples-temp/Axes.1/XAxisAlternateLocale.4.graph.mdx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/Axes.1/XAxisAlternateLocale.4.graph.mdx similarity index 100% rename from packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples-temp/Axes.1/XAxisAlternateLocale.4.graph.mdx rename to packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/Axes.1/XAxisAlternateLocale.4.graph.mdx diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples-temp/Axes.1/XAxisOrientationTop.5.graph.mdx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/Axes.1/XAxisOrientationTop.5.graph.mdx similarity index 100% rename from packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples-temp/Axes.1/XAxisOrientationTop.5.graph.mdx rename to packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/Axes.1/XAxisOrientationTop.5.graph.mdx diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples-temp/Axes.1/XAxisTickLabelOrientation.8.graph.mdx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/Axes.1/XAxisTickLabelOrientation.8.graph.mdx similarity index 100% rename from packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples-temp/Axes.1/XAxisTickLabelOrientation.8.graph.mdx rename to packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/Axes.1/XAxisTickLabelOrientation.8.graph.mdx diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples-temp/Grid.5.graph.mdx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/Grid.5.graph.mdx similarity index 100% rename from packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples-temp/Grid.5.graph.mdx rename to packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/Grid.5.graph.mdx diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples-temp/Legend.4.graph.mdx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/Legend.4.graph.mdx similarity index 100% rename from packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples-temp/Legend.4.graph.mdx rename to packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/Legend.4.graph.mdx diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples-temp/Other.3/BackgroundColor.14.graph.mdx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/Other.3/BackgroundColor.14.graph.mdx similarity index 100% rename from packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples-temp/Other.3/BackgroundColor.14.graph.mdx rename to packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/Other.3/BackgroundColor.14.graph.mdx diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples-temp/Other.3/NoData.6.graph.mdx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/Other.3/NoData.6.graph.mdx similarity index 100% rename from packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples-temp/Other.3/NoData.6.graph.mdx rename to packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/Other.3/NoData.6.graph.mdx diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples-temp/Padding.2/CustomLegendPlacement.1.graph.mdx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/Padding.2/CustomLegendPlacement.1.graph.mdx similarity index 100% rename from packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples-temp/Padding.2/CustomLegendPlacement.1.graph.mdx rename to packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/Padding.2/CustomLegendPlacement.1.graph.mdx diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples-temp/Padding.2/GraphAndLegendPaddingReduced.2.graph.mdx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/Padding.2/GraphAndLegendPaddingReduced.2.graph.mdx similarity index 100% rename from packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples-temp/Padding.2/GraphAndLegendPaddingReduced.2.graph.mdx rename to packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/Padding.2/GraphAndLegendPaddingReduced.2.graph.mdx From 89b872c42d02f28c32c5509d00647fc9095ff86d Mon Sep 17 00:00:00 2001 From: Saad <38024451+sdadn@users.noreply.github.com> Date: Fri, 5 Apr 2024 07:16:21 -0500 Subject: [PATCH 02/10] restored axis docs --- .../CoreConfiguration.b/Axes.3.graph.mdx | 141 ++++++++++++++++++ 1 file changed, 141 insertions(+) create mode 100644 packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Axes.3.graph.mdx diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Axes.3.graph.mdx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Axes.3.graph.mdx new file mode 100644 index 000000000..5e4d3788b --- /dev/null +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Axes.3.graph.mdx @@ -0,0 +1,141 @@ +# Axes + +Any graph that inherits from `Graph` API will inherit the following `Axis` and `Tick` properties as well. + +- [Structure](#structure) +- [Properties](#properties) + - [allowCalibration](#allowCalibration) + - [type](#type) + - [orientation](#orientation) + - [Note](#note) +- [X Axis Domain Padding](#x-axis-domain-padding) + + +## Structure + +```json +axis: { + x: , + y: , + y2: , +} + + +axis: { + x: { + lowerLimit: or , + upperLimit: or , + label: , + allowCalibration: + onLabelClick: , + orientation: + rangeRounding: , + show: , + suppressingTrailingZeros: , + ticks: , + type: + rotateAngle: , + }, + y: { + lowerLimit: or , + upperLimit: or , + label: , + onLabelClick: , + padDomain: , + rangeRounding: , + show: , + suppressingTrailingZeros: , + ticks: , + type: + }, + y2:{ + lowerLimit: or , + upperLimit: or , + label: , + onLabelClick: , + padDomain: , + rangeRounding: , + show: , + suppressingTrailingZeros: , + ticks: , + type: + } + +} + +``` + + +## Properties + +| Property Name | Type | Default | Required | Description | +|-----------------------|----------------|----------------------------|----------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| lowerLimit | number or Date | - | yes | Lower bound for the axis. This is inclusive. | +| upperLimit | number or Date | - | yes | Upper bound for the axis. This is inclusive. | +| label | string | - | yes | Axis label value. Will not be rendered if nothing is provided. | +| allowCalibration | bool | `false` | no | See [allowCalibration](#allowCalibration). | +| onLabelClick | Function | `undefined` | no | Any action that can be performed when clicking on label. | +| orientation | Function | `AXES_ORIENTATION.DEFAULT` | no | See [orientation](#orientation). | +| padDomain | boolean | `true` | no | Toggle for disabling the padding (only for Y and Y2 axes). | +| rangeRounding | boolean | `true` | no | Toggle for range rounding. | +| show | boolean | `true` | no | Toggle for showing the axis. | +| suppressTrailingZeros | boolean | `false` | no | Toggle to suppress tick values's trailing zeros when default d3 tick formatting is used. For X axis, this property works only when X axis type is set to AXIS_TYPE.DEFAULT. Specifying `~` in the tick format takes precedence over `suppressTrailingZeros` property. | +| ticks | object | `null` | no | See [Ticks](./Ticks). | +| 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. | + +- ### `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`. + + NOTE: This property is only implemented for the x-axis (`config.axis.x.allowCalibration`). + Please refer to [config.allowCalibration](./Graph/##configuration-properties) for calibrating the y-axes. + + +- ### `type` + Property to set the type of the axis. + + | Constant | Value | + |-------------------------|----------------------------------------------------------------| + | `AXIS_TYPE.DEFAULT` | Numeric based x-axis. Will take a `` for tick values. | + | `AXIS_TYPE.TIME_SERIES` | Timeseries based x-axis. Will take a `` for tick values. | + + +- ### `orientation` + + Sets the orientation for the x-axis. + Can be accessed through `AXES_ORIENTATION`. + Valid values are: + - `AXES_ORIENTATION.TOP` + - `AXES_ORIENTATION.BOTTOM` + + + #### Note: + + - y2 axis is mandatory if the **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. + - `onLabelClick` property will override default onClick functionality provided by Carbon-graphs. + - For Bar Graphs, `padDomain` property will be overridden to false. + +## X Axis Domain Padding + +Unlike Y Axis, X Axis can have different types of values as ticks namely numeric, datetime etc. By design, domain padding has not been provided for this reason. Consumers however who are more acquainted with their dataset can judge how much value padding is necessary and achieve similar results as Y Axis. + +Example: + +```js +const padXAxisLimits = (extent) => { + const range = extent[1] - extent[0]; + return [extent[0] - range * 0.05, extent[1] + range * 0.05]; +}; + +const datetime = padXAxisLimits( + d3.extent([ + /* Array containing all the datetime in RFC3339 format*/ + ]) +); +``` From 8b0a8177a1d83d95a93067e760c184d2396480f0 Mon Sep 17 00:00:00 2001 From: Saad <38024451+sdadn@users.noreply.github.com> Date: Fri, 5 Apr 2024 11:57:55 -0500 Subject: [PATCH 03/10] added examples --- .../CoreConfiguration.b/Axes.3.graph.mdx | 11 +++- .../AllowCalibrationXAxisDisabled.jsx | 59 ++++++++++++++++++ .../examples/AllowCalibrationXAxisEnabled.jsx | 60 +++++++++++++++++++ 3 files changed, 128 insertions(+), 2 deletions(-) create mode 100644 packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationXAxisDisabled.jsx create mode 100644 packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationXAxisEnabled.jsx diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Axes.3.graph.mdx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Axes.3.graph.mdx index 5e4d3788b..cf286e119 100644 --- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Axes.3.graph.mdx +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Axes.3.graph.mdx @@ -1,3 +1,6 @@ +import AllowCalibrationXAxisDisabledExample from './examples/AllowCalibrationXAxisDisabled'; +import AllowCalibrationXAxisEnabledExample from './examples/AllowCalibrationXAxisEnabled'; + # Axes Any graph that inherits from `Graph` API will inherit the following `Axis` and `Tick` properties as well. @@ -84,6 +87,7 @@ 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. | + - ### `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. @@ -91,7 +95,10 @@ axis: { If panning is enabled then this property will be ignored if `true`. NOTE: This property is only implemented for the x-axis (`config.axis.x.allowCalibration`). - Please refer to [config.allowCalibration](./Graph/##configuration-properties) for calibrating the y-axes. + Please refer to [config.allowCalibration](./graph-configuration-object/#allowcalibration) for calibrating the y-axes. + + + - ### `type` @@ -138,4 +145,4 @@ const datetime = padXAxisLimits( /* Array containing all the datetime in RFC3339 format*/ ]) ); -``` +```./examples/AllowCalibrationXAxisDisabled diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationXAxisDisabled.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationXAxisDisabled.jsx new file mode 100644 index 000000000..eac08c639 --- /dev/null +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationXAxisDisabled.jsx @@ -0,0 +1,59 @@ +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: 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 NoDataGeneralExample = () => { + React.useEffect(() => { + const graph = Carbon.api.graph(graphConfig); + graph.loadContent(Carbon.api.line(dataset1)); + }, []); + return
; +}; + +export default NoDataGeneralExample; diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationXAxisEnabled.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationXAxisEnabled.jsx new file mode 100644 index 000000000..ce126c6d5 --- /dev/null +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationXAxisEnabled.jsx @@ -0,0 +1,60 @@ +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: 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 NoDataGeneralExample = () => { + React.useEffect(() => { + const graph = Carbon.api.graph(graphConfig); + graph.loadContent(Carbon.api.line(dataset1)); + }, []); + return
; +}; + +export default NoDataGeneralExample; From 3fa0c0c913d214d2dfe707c30114d31a4f7824f3 Mon Sep 17 00:00:00 2001 From: Saad <38024451+sdadn@users.noreply.github.com> Date: Fri, 5 Apr 2024 12:14:51 -0500 Subject: [PATCH 04/10] updated examples --- .../CoreConfiguration.b/Axes.3.graph.mdx | 24 ++++++-- .../examples/AllowCalibrationEnabled.jsx | 4 +- .../AllowCalibrationXAxisDisabled.jsx | 6 +- .../examples/AllowCalibrationXAxisEnabled.jsx | 8 +-- .../examples/RangeRoundingYAxisDisabled.jsx | 60 +++++++++++++++++++ .../examples/RangeRoundingYAxisEnabled.jsx | 59 ++++++++++++++++++ .../examples/YAxisHidden.jsx | 60 +++++++++++++++++++ 7 files changed, 208 insertions(+), 13 deletions(-) create mode 100644 packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/RangeRoundingYAxisDisabled.jsx create mode 100644 packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/RangeRoundingYAxisEnabled.jsx create mode 100644 packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/YAxisHidden.jsx diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Axes.3.graph.mdx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Axes.3.graph.mdx index cf286e119..dfb43b9ce 100644 --- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Axes.3.graph.mdx +++ b/packages/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,12 +85,13 @@ 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. @@ -100,6 +99,21 @@ axis: { +- ### `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/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationEnabled.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationEnabled.jsx index ee58e71a4..05d68b3c8 100644 --- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationEnabled.jsx +++ b/packages/terra-graphs-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/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationXAxisDisabled.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationXAxisDisabled.jsx index eac08c639..5a7db6085 100644 --- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationXAxisDisabled.jsx +++ b/packages/terra-graphs-docs/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,7 +50,7 @@ const dataset1 = { // graph rendering -const NoDataGeneralExample = () => { +const AllowCalibrationDisabledExample = () => { React.useEffect(() => { const graph = Carbon.api.graph(graphConfig); graph.loadContent(Carbon.api.line(dataset1)); @@ -56,4 +58,4 @@ const NoDataGeneralExample = () => { return
; }; -export default NoDataGeneralExample; +export default AllowCalibrationDisabledExample; diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationXAxisEnabled.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationXAxisEnabled.jsx index ce126c6d5..435989225 100644 --- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationXAxisEnabled.jsx +++ b/packages/terra-graphs-docs/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
; + return
; }; -export default NoDataGeneralExample; +export default AllowCalibrationEnabledExample; diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/RangeRoundingYAxisDisabled.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/RangeRoundingYAxisDisabled.jsx new file mode 100644 index 000000000..465c1c631 --- /dev/null +++ b/packages/terra-graphs-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
; +}; + +export default RangeRoundingDisabledExample; diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/RangeRoundingYAxisEnabled.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/RangeRoundingYAxisEnabled.jsx new file mode 100644 index 000000000..d498912e4 --- /dev/null +++ b/packages/terra-graphs-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
; +}; + +export default RangeRoundingEnabledExample; diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/YAxisHidden.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/YAxisHidden.jsx new file mode 100644 index 000000000..f7162ff6e --- /dev/null +++ b/packages/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
; +}; + +export default YAxisHiddenExample; From 6b65a59a932032896d11f8eac69d175f714ccc6a Mon Sep 17 00:00:00 2001 From: Saad <38024451+sdadn@users.noreply.github.com> Date: Fri, 5 Apr 2024 12:23:52 -0500 Subject: [PATCH 05/10] updated docs --- .../{Axes.3.graph.mdx => Axes.b.graph.mdx} | 9 ++++++--- ....1.graph.mdx => GraphConfigurationObject.a.graph.mdx} | 4 ++-- 2 files changed, 8 insertions(+), 5 deletions(-) rename packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/{Axes.3.graph.mdx => Axes.b.graph.mdx} (96%) rename packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/{GraphConfigurationObject.1.graph.mdx => GraphConfigurationObject.a.graph.mdx} (98%) diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Axes.3.graph.mdx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Axes.b.graph.mdx similarity index 96% rename from packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Axes.3.graph.mdx rename to packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Axes.b.graph.mdx index dfb43b9ce..dd79e24b6 100644 --- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Axes.3.graph.mdx +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Axes.b.graph.mdx @@ -1,5 +1,7 @@ -import AllowCalibrationXAxisDisabledExample from './examples/AllowCalibrationXAxisDisabled'; -import AllowCalibrationXAxisEnabledExample from './examples/AllowCalibrationXAxisEnabled'; +import AllowCalibrationXAxisDisabledExample from './examples/AllowCalibrationXAxisDisabled?dev-site-example'; +import AllowCalibrationXAxisEnabledExample from './examples/AllowCalibrationXAxisEnabled?dev-site-example'; +import RangeRoundingDisabledExample from './examples/RangeRoundingYAxisDisabled?dev-site-example'; + # Axes @@ -94,7 +96,7 @@ axis: { 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. + Refer to [`config.allowCalibration`](./graph-configuration-object/#allowcalibration) for calibrating the y-axes. @@ -109,6 +111,7 @@ Axis label value. Will not be rendered if nothing is provided. - ### `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` diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/GraphConfigurationObject.1.graph.mdx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/GraphConfigurationObject.a.graph.mdx similarity index 98% rename from packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/GraphConfigurationObject.1.graph.mdx rename to packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/GraphConfigurationObject.a.graph.mdx index d178f8d25..a04670ca0 100644 --- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/GraphConfigurationObject.1.graph.mdx +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/GraphConfigurationObject.a.graph.mdx @@ -30,7 +30,7 @@ It is required for the following graphs: - [Paired Result](../paired-result-graph/about) - [Scatter](../scatter-graph/about) -Without a dataset, the above graphs will render as follows: +Without a dataset, the above graphs will render as: @@ -108,7 +108,7 @@ const graphConfig = { - ### `allowCalibration` **type:** boolean -The `allowCalibration` prop allows the y-axes to be automatically updated based on the dataset. +The `allowCalibration` prop allows the y-axes to be automatically updated based on the dataset. For calibrating the x-axis, see [`axis.x.allowCalibration`](./axes#allowcalibration). 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. From ac6a3be6f28bfa8e21b0f4e7efef1881feee1d7a Mon Sep 17 00:00:00 2001 From: Saad <38024451+sdadn@users.noreply.github.com> Date: Fri, 5 Apr 2024 12:25:35 -0500 Subject: [PATCH 06/10] updated paths --- .../graph/CoreConfiguration.b/Axes.b.graph.mdx | 8 ++++---- .../examples/{ => axes}/AllowCalibrationXAxisDisabled.jsx | 0 .../examples/{ => axes}/AllowCalibrationXAxisEnabled.jsx | 0 .../examples/{ => axes}/RangeRoundingYAxisDisabled.jsx | 0 .../examples/{ => axes}/RangeRoundingYAxisEnabled.jsx | 0 .../examples/{ => axes}/YAxisHidden.jsx | 0 6 files changed, 4 insertions(+), 4 deletions(-) rename packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/{ => axes}/AllowCalibrationXAxisDisabled.jsx (100%) rename packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/{ => axes}/AllowCalibrationXAxisEnabled.jsx (100%) rename packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/{ => axes}/RangeRoundingYAxisDisabled.jsx (100%) rename packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/{ => axes}/RangeRoundingYAxisEnabled.jsx (100%) rename packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/{ => axes}/YAxisHidden.jsx (100%) diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Axes.b.graph.mdx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Axes.b.graph.mdx index dd79e24b6..0f7eded14 100644 --- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Axes.b.graph.mdx +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Axes.b.graph.mdx @@ -1,6 +1,6 @@ -import AllowCalibrationXAxisDisabledExample from './examples/AllowCalibrationXAxisDisabled?dev-site-example'; -import AllowCalibrationXAxisEnabledExample from './examples/AllowCalibrationXAxisEnabled?dev-site-example'; -import RangeRoundingDisabledExample from './examples/RangeRoundingYAxisDisabled?dev-site-example'; +import AllowCalibrationXAxisDisabledExample from './examples/axes/AllowCalibrationXAxisDisabled?dev-site-example'; +import AllowCalibrationXAxisEnabledExample from './examples/axes/AllowCalibrationXAxisEnabled?dev-site-example'; +import RangeRoundingDisabledExample from './examples/axes/RangeRoundingYAxisDisabled?dev-site-example'; # Axes @@ -162,4 +162,4 @@ const datetime = padXAxisLimits( /* Array containing all the datetime in RFC3339 format*/ ]) ); -```./examples/AllowCalibrationXAxisDisabled +``` diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationXAxisDisabled.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/AllowCalibrationXAxisDisabled.jsx similarity index 100% rename from packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationXAxisDisabled.jsx rename to packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/AllowCalibrationXAxisDisabled.jsx diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationXAxisEnabled.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/AllowCalibrationXAxisEnabled.jsx similarity index 100% rename from packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationXAxisEnabled.jsx rename to packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/AllowCalibrationXAxisEnabled.jsx diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/RangeRoundingYAxisDisabled.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/RangeRoundingYAxisDisabled.jsx similarity index 100% rename from packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/RangeRoundingYAxisDisabled.jsx rename to packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/RangeRoundingYAxisDisabled.jsx diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/RangeRoundingYAxisEnabled.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/RangeRoundingYAxisEnabled.jsx similarity index 100% rename from packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/RangeRoundingYAxisEnabled.jsx rename to packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/RangeRoundingYAxisEnabled.jsx diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/YAxisHidden.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/YAxisHidden.jsx similarity index 100% rename from packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/YAxisHidden.jsx rename to packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/YAxisHidden.jsx From e263b60211c35e0c6089c4a0cd26700bbab53b55 Mon Sep 17 00:00:00 2001 From: Saad <38024451+sdadn@users.noreply.github.com> Date: Fri, 5 Apr 2024 12:51:47 -0500 Subject: [PATCH 07/10] added show example --- .../CoreConfiguration.b/Axes.b.graph.mdx | 24 +++++++++++++++---- .../examples/AllowCalibrationDisabled.jsx | 2 -- .../examples/AllowCalibrationEnabled.jsx | 2 -- .../examples/GraphWithCustomLegendDom.jsx | 2 -- .../examples/GraphWithNoData.jsx | 2 -- .../axes/AllowCalibrationXAxisDisabled.jsx | 2 -- .../axes/AllowCalibrationXAxisEnabled.jsx | 2 -- .../axes/RangeRoundingYAxisDisabled.jsx | 6 ++--- .../axes/RangeRoundingYAxisEnabled.jsx | 6 ++--- .../examples/axes/YAxisHidden.jsx | 5 ++-- 10 files changed, 27 insertions(+), 26 deletions(-) diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Axes.b.graph.mdx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Axes.b.graph.mdx index 0f7eded14..5978e4dfb 100644 --- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Axes.b.graph.mdx +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Axes.b.graph.mdx @@ -1,6 +1,11 @@ import AllowCalibrationXAxisDisabledExample from './examples/axes/AllowCalibrationXAxisDisabled?dev-site-example'; import AllowCalibrationXAxisEnabledExample from './examples/axes/AllowCalibrationXAxisEnabled?dev-site-example'; + import RangeRoundingDisabledExample from './examples/axes/RangeRoundingYAxisDisabled?dev-site-example'; +import RangeRoundingEnabledExample from './examples/axes/RangeRoundingYAxisEnabled?dev-site-example'; + +import YAxisHiddenExample from './examples/axes/YAxisHidden?dev-site-example'; + # Axes @@ -8,11 +13,15 @@ import RangeRoundingDisabledExample from './examples/axes/RangeRoundingYAxisDisa Any graph that inherits from `Graph` API will inherit the following `Axis` and `Tick` properties as well. - [Structure](#structure) -- [Properties](#properties) +- [Properties Summary](#properties-summary) +- [Properties Details](#properties-details) - [allowCalibration](#allowCalibration) - - [type](#type) + - [label](#label) - [orientation](#orientation) - - [Note](#note) + - [rangeRounding](#rangerounding) + - [show](#show) + - [type](#type) + - [Notes](#notes) - [X Axis Domain Padding](#x-axis-domain-padding) @@ -101,17 +110,22 @@ axis: { + - ### `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` @@ -136,7 +150,7 @@ Axis label value. Will not be rendered if nothing is provided. - `AXES_ORIENTATION.BOTTOM` - #### Note: + #### Notes: - y2 axis is mandatory if **y2.show** is enabled. - Ticks are mandatory for Bar graphs. @@ -163,3 +177,5 @@ const datetime = padXAxisLimits( ]) ); ``` +import { jsx } from "react/jsx-runtime" + diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationDisabled.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationDisabled.jsx index 76e93f864..9b09763e7 100644 --- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationDisabled.jsx +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationDisabled.jsx @@ -7,13 +7,11 @@ 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, diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationEnabled.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationEnabled.jsx index 05d68b3c8..5670a030b 100644 --- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationEnabled.jsx +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationEnabled.jsx @@ -27,13 +27,11 @@ const graphConfig2 = { bindTo: '#allow-calibration-enabled-example2', axis: { x: { - show: true, label: 'x-axis', lowerLimit: 80, upperLimit: 130, }, y: { - show: true, label: 'y-axis', lowerLimit: -5, upperLimit: 20, diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/GraphWithCustomLegendDom.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/GraphWithCustomLegendDom.jsx index 6f905fc31..ffff3283f 100644 --- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/GraphWithCustomLegendDom.jsx +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/GraphWithCustomLegendDom.jsx @@ -9,13 +9,11 @@ const graphConfig = { bindLegendTo: '#custom-legend-node', axis: { x: { - show: true, label: 'x axis', lowerLimit: 80, upperLimit: 280, }, y: { - show: true, label: 'y axis', lowerLimit: -18, upperLimit: 18, diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/GraphWithNoData.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/GraphWithNoData.jsx index c0624dce2..d2388e0e8 100644 --- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/GraphWithNoData.jsx +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/GraphWithNoData.jsx @@ -8,13 +8,11 @@ const graphConfig = { bindLegendTo: null, axis: { x: { - show: true, label: 'x axis', lowerLimit: 80, upperLimit: 280, }, y: { - show: true, label: 'y axis', lowerLimit: -18, upperLimit: 18, diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/AllowCalibrationXAxisDisabled.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/AllowCalibrationXAxisDisabled.jsx index 5a7db6085..26693cd10 100644 --- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/AllowCalibrationXAxisDisabled.jsx +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/AllowCalibrationXAxisDisabled.jsx @@ -7,7 +7,6 @@ const graphConfig = { bindTo: '#allow-calibration-disabled-example', axis: { x: { - show: true, label: 'x-axis', lowerLimit: 100, upperLimit: 200, @@ -15,7 +14,6 @@ const graphConfig = { // allowCalibration: false, }, y: { - show: true, label: 'y-axis', lowerLimit: -5, upperLimit: 20, diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/AllowCalibrationXAxisEnabled.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/AllowCalibrationXAxisEnabled.jsx index 435989225..7c9ecee55 100644 --- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/AllowCalibrationXAxisEnabled.jsx +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/AllowCalibrationXAxisEnabled.jsx @@ -7,14 +7,12 @@ const graphConfig = { bindTo: '#allow-calibration-enabled-example', axis: { x: { - show: true, label: 'x-axis', lowerLimit: 100, upperLimit: 200, allowCalibration: true, }, y: { - show: true, label: 'y-axis', lowerLimit: -5, upperLimit: 20, diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/RangeRoundingYAxisDisabled.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/RangeRoundingYAxisDisabled.jsx index 465c1c631..0da46923e 100644 --- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/RangeRoundingYAxisDisabled.jsx +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/RangeRoundingYAxisDisabled.jsx @@ -7,16 +7,14 @@ 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, + lowerLimit: -39, + upperLimit: 39, rangeRounding: false, }, }, diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/RangeRoundingYAxisEnabled.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/RangeRoundingYAxisEnabled.jsx index d498912e4..35b3f7db4 100644 --- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/RangeRoundingYAxisEnabled.jsx +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/RangeRoundingYAxisEnabled.jsx @@ -7,16 +7,14 @@ 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, + lowerLimit: -39, + upperLimit: 39, }, }, }; diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/YAxisHidden.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/YAxisHidden.jsx index f7162ff6e..69328b624 100644 --- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/YAxisHidden.jsx +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/YAxisHidden.jsx @@ -7,14 +7,15 @@ const graphConfig = { bindTo: '#y-axis-hidden-example', axis: { x: { - show: true, + // show is true by default + // show: true, label: 'x-axis', lowerLimit: 100, upperLimit: 200, allowCalibration: true, }, y: { - show: true, + show: false, label: 'y-axis', lowerLimit: -5, upperLimit: 20, From db4fc4cd3a7a68769cbdd966fbc1795b7442e7ac Mon Sep 17 00:00:00 2001 From: Saad <38024451+sdadn@users.noreply.github.com> Date: Fri, 5 Apr 2024 12:52:29 -0500 Subject: [PATCH 08/10] updated CHANGELOG --- packages/terra-graphs-docs/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/terra-graphs-docs/CHANGELOG.md b/packages/terra-graphs-docs/CHANGELOG.md index 61368271d..adb7a9ec8 100644 --- a/packages/terra-graphs-docs/CHANGELOG.md +++ b/packages/terra-graphs-docs/CHANGELOG.md @@ -4,6 +4,7 @@ * Changed * Updated core-configuration/graph-config-object documentation and examples. + * Updated core-configuration/axes documentation and examples. * Optimized published package size by removing unecessary files. * Moved Core Configuration documentation up one level out of its subfolder. * Updated documentation to use new named export. From 094a9dcfb76803b50a24f4cd158dc963e757d25c Mon Sep 17 00:00:00 2001 From: Saad <38024451+sdadn@users.noreply.github.com> Date: Fri, 5 Apr 2024 13:06:21 -0500 Subject: [PATCH 09/10] updated orientation doc --- .../CoreConfiguration.b/Axes.b.graph.mdx | 50 ++++++++++--------- .../axes/AllowCalibrationXAxisDisabled.jsx | 4 +- .../axes/AllowCalibrationXAxisEnabled.jsx | 4 +- .../examples/axes/XAxisOrientationTop.jsx | 32 ++++++++++++ 4 files changed, 62 insertions(+), 28 deletions(-) create mode 100644 packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/XAxisOrientationTop.jsx diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Axes.b.graph.mdx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Axes.b.graph.mdx index 5978e4dfb..e4ffd9232 100644 --- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Axes.b.graph.mdx +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Axes.b.graph.mdx @@ -4,6 +4,8 @@ import AllowCalibrationXAxisEnabledExample from './examples/axes/AllowCalibratio import RangeRoundingDisabledExample from './examples/axes/RangeRoundingYAxisDisabled?dev-site-example'; import RangeRoundingEnabledExample from './examples/axes/RangeRoundingYAxisEnabled?dev-site-example'; +import XAxisOrientationTopExample from './examples/axes/XAxisOrientationTop?dev-site-example'; + import YAxisHiddenExample from './examples/axes/YAxisHidden?dev-site-example'; @@ -80,21 +82,21 @@ axis: { ``` ## Properties Summary -| Property Name | Type | Default | Required | Description | -|-----------------------|----------------|----------------------------|----------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -| lowerLimit | number or Date | - | yes | Lower bound for the axis. This is inclusive. | -| upperLimit | number or Date | - | yes | Upper bound for the axis. This is inclusive. | -| label | string | - | yes | Axis label value. Will not be rendered if nothing is provided. | -| allowCalibration | bool | `false` | no | See [allowCalibration](#allowCalibration). | -| onLabelClick | Function | `undefined` | no | Any action that can be performed when clicking on label. | -| orientation | Function | `AXES_ORIENTATION.DEFAULT` | no | See [orientation](#orientation). | -| padDomain | boolean | `true` | no | Toggle for disabling the padding (only for Y and Y2 axes). | -| rangeRounding | boolean | `true` | no | Toggle for range rounding. | -| show | boolean | `true` | no | Toggle for showing the axis. | -| suppressTrailingZeros | boolean | `false` | no | Toggle to suppress tick values's trailing zeros when default d3 tick formatting is used. For X axis, this property works only when X axis type is set to AXIS_TYPE.DEFAULT. Specifying `~` in the tick format takes precedence over `suppressTrailingZeros` property. | -| ticks | object | `null` | no | See [Ticks](./Ticks). | -| 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. | +| Property Name | Type | Default | Required | Description | +| --------------------- | -------------- | ------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| lowerLimit | number or Date | - | yes | Lower bound for the axis. This is inclusive. | +| upperLimit | number or Date | - | yes | Upper bound for the axis. This is inclusive. | +| label | string | - | yes | Axis label value. Will not be rendered if nothing is provided. | +| allowCalibration | bool | `false` | no | See [allowCalibration](#allowCalibration). | +| onLabelClick | Function | `undefined` | no | Any action that can be performed when clicking on label. | +| orientation | Function | BOTTOM (for x-axis) | no | See [orientation](#orientation). | +| padDomain | boolean | `true` | no | Toggle for disabling the padding (only for Y and Y2 axes). | +| rangeRounding | boolean | `true` | no | Toggle for range rounding. | +| show | boolean | `true` | no | Toggle for showing the axis. | +| suppressTrailingZeros | boolean | `false` | no | Toggle to suppress tick values's trailing zeros when default d3 tick formatting is used. For X axis, this property works only when X axis type is set to AXIS_TYPE.DEFAULT. Specifying `~` in the tick format takes precedence over `suppressTrailingZeros` property. | +| ticks | object | `null` | no | See [Ticks](./Ticks). | +| 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 @@ -117,7 +119,13 @@ Axis label value. Will not be rendered if nothing is provided. - ### `orientation` - + Sets the orientation for the x-axis. + Can be accessed through `AXES_ORIENTATION`. + Valid values are: + - `AXES_ORIENTATION.X.TOP` + - `AXES_ORIENTATION.X.BOTTOM` + + - ### `rangeRounding` @@ -128,8 +136,8 @@ Axis label value. Will not be rendered if nothing is provided. - ### `show` - - + Toggle for showing the axis ticks. + - ### `type` @@ -141,13 +149,7 @@ Axis label value. Will not be rendered if nothing is provided. | `AXIS_TYPE.TIME_SERIES` | Timeseries based x-axis. Will take a `` for tick values. | -- ### `orientation` - Sets the orientation for the x-axis. - Can be accessed through `AXES_ORIENTATION`. - Valid values are: - - `AXES_ORIENTATION.TOP` - - `AXES_ORIENTATION.BOTTOM` #### Notes: diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/AllowCalibrationXAxisDisabled.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/AllowCalibrationXAxisDisabled.jsx index 26693cd10..1a805a9f9 100644 --- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/AllowCalibrationXAxisDisabled.jsx +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/AllowCalibrationXAxisDisabled.jsx @@ -4,7 +4,7 @@ import Carbon from '@cerner/carbon-graphs'; // graph configuration object const graphConfig = { - bindTo: '#allow-calibration-disabled-example', + bindTo: '#allow-calibration-x-axis-disabled-example', axis: { x: { label: 'x-axis', @@ -53,7 +53,7 @@ const AllowCalibrationDisabledExample = () => { const graph = Carbon.api.graph(graphConfig); graph.loadContent(Carbon.api.line(dataset1)); }, []); - return
; + return
; }; export default AllowCalibrationDisabledExample; diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/AllowCalibrationXAxisEnabled.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/AllowCalibrationXAxisEnabled.jsx index 7c9ecee55..8f15ce539 100644 --- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/AllowCalibrationXAxisEnabled.jsx +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/AllowCalibrationXAxisEnabled.jsx @@ -4,7 +4,7 @@ import Carbon from '@cerner/carbon-graphs'; // graph configuration object const graphConfig = { - bindTo: '#allow-calibration-enabled-example', + bindTo: '#allow-calibration-x-axis-enabled-example', axis: { x: { label: 'x-axis', @@ -52,7 +52,7 @@ const AllowCalibrationEnabledExample = () => { const graph = Carbon.api.graph(graphConfig); graph.loadContent(Carbon.api.line(dataset1)); }, []); - return
; + return
; }; export default AllowCalibrationEnabledExample; diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/XAxisOrientationTop.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/XAxisOrientationTop.jsx new file mode 100644 index 000000000..ea0a904fe --- /dev/null +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/axes/XAxisOrientationTop.jsx @@ -0,0 +1,32 @@ +import React from 'react'; +import Carbon from '@cerner/carbon-graphs'; + +// graph configuration object + +const graphConfig = { + bindTo: '#x-axis-orientation-top-example', + axis: { + x: { + label: 'x-axis', + lowerLimit: 100, + upperLimit: 200, + orientation: Carbon.helpers.AXES_ORIENTATION.X.TOP, + }, + y: { + show: true, + label: 'y-axis', + lowerLimit: -5, + upperLimit: 20, + }, + }, +}; +// graph rendering + +const YAxisHiddenExample = () => { + React.useEffect(() => { + Carbon.api.graph(graphConfig); + }, []); + return
; +}; + +export default YAxisHiddenExample; From e86e5435ce82d384949a61f6bcf9705af1173741 Mon Sep 17 00:00:00 2001 From: Saad <38024451+sdadn@users.noreply.github.com> Date: Fri, 5 Apr 2024 13:07:53 -0500 Subject: [PATCH 10/10] updated docs --- .../CoreConfiguration.b/Axes.b.graph.mdx | 45 +++++++++---------- 1 file changed, 20 insertions(+), 25 deletions(-) diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Axes.b.graph.mdx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Axes.b.graph.mdx index e4ffd9232..f3c16d210 100644 --- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Axes.b.graph.mdx +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Axes.b.graph.mdx @@ -101,31 +101,31 @@ 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 it is `true`. + 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 it is `true`. - NOTE: This property is only implemented for the x-axis (`config.axis.x.allowCalibration`). - Refer to [`config.allowCalibration`](./graph-configuration-object/#allowcalibration) for calibrating the y-axes. + NOTE: This property is only implemented for the x-axis (`config.axis.x.allowCalibration`). + Refer to [`config.allowCalibration`](./graph-configuration-object/#allowcalibration) for calibrating the y-axes. - - + + - ### `label` -Axis label value. Will not be rendered if nothing is provided. + Axis label value. Will not be rendered if nothing is provided. - ### `orientation` - Sets the orientation for the x-axis. - Can be accessed through `AXES_ORIENTATION`. - Valid values are: - - `AXES_ORIENTATION.X.TOP` - - `AXES_ORIENTATION.X.BOTTOM` + Sets the orientation for the x-axis. + Can be accessed through `AXES_ORIENTATION`. + Valid values are: + - `AXES_ORIENTATION.X.TOP` + - `AXES_ORIENTATION.X.BOTTOM` - + - ### `rangeRounding` @@ -141,15 +141,12 @@ Axis label value. Will not be rendered if nothing is provided. - ### `type` - Property to set the type of the axis. - - | Constant | Value | - |-------------------------|----------------------------------------------------------------| - | `AXIS_TYPE.DEFAULT` | Numeric based x-axis. Will take a `` for tick values. | - | `AXIS_TYPE.TIME_SERIES` | Timeseries based x-axis. Will take a `` for tick values. | - - + Property to set the type of the axis. + | Constant | Value | + |-------------------------|----------------------------------------------------------------| + | `AXIS_TYPE.DEFAULT` | Numeric based x-axis. Will take a `` for tick values. | + | `AXIS_TYPE.TIME_SERIES` | Timeseries based x-axis. Will take a `` for tick values. | #### Notes: @@ -179,5 +176,3 @@ const datetime = padXAxisLimits( ]) ); ``` -import { jsx } from "react/jsx-runtime" -