diff --git a/.github/workflows/ci-cd.yml b/.github/workflows/ci-cd.yml index 13de9eb50..e34ab74c4 100644 --- a/.github/workflows/ci-cd.yml +++ b/.github/workflows/ci-cd.yml @@ -61,7 +61,7 @@ jobs: env: SITE: build/${{ matrix.theme }} FORM_FACTOR: ${{ matrix.form-factor }} - run: npm run wdio-${{ matrix.theme }} + run: npm run wdio:${{ matrix.theme }} release-and-deploy: runs-on: ubuntu-latest diff --git a/package.json b/package.json index 5ba08778e..23f7b92cd 100644 --- a/package.json +++ b/package.json @@ -133,8 +133,8 @@ "test": "npm run lint && npm run jest && npm run wdio-default", "test:docker": "npm run lint && npm run jest && && npm run karma && npm run wdio-default:docker", "wdio": "npm run compile && terra wdio --themes terra-default-theme", - "wdio-default": "terra wdio --themes terra-default-theme", - "wdio-default:docker": "terra wdio --disable-selenium-service=true", + "wdio:default": "terra wdio --themes terra-default-theme", + "wdio:default:docker": "terra wdio --disable-selenium-service=true", "wdio:docker": "terra wdio --disable-selenium-service=true --themes terra-default-theme", "wdio:bar": "terra wdio --themes terra-default-theme --spec packages/carbon-graphs/tests/wdio/Graphs/BarGraph/bar-graph-spec.js", "wdio:bubble": "terra wdio --themes terra-default-theme --spec packages/carbon-graphs/tests/wdio/Graphs/BubbleGraph/bubbleGraphs-spec.js", diff --git a/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_large/general-spec/custom_legend_placement.png b/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_large/general-spec/custom_legend_placement.png index 54e0d25ed..1b7d84a93 100644 Binary files a/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_large/general-spec/custom_legend_placement.png and b/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_large/general-spec/custom_legend_placement.png differ diff --git a/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_large/general-spec/no_data.png b/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_large/general-spec/no_data.png index 871e14c77..6b75e0bdf 100644 Binary files a/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_large/general-spec/no_data.png and b/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_large/general-spec/no_data.png differ diff --git a/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_large/general-spec/y-axis_allowcalibration_disabled.png b/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_large/general-spec/y-axis_allowcalibration_disabled.png index d98ec8059..896d3cde8 100644 Binary files a/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_large/general-spec/y-axis_allowcalibration_disabled.png and b/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_large/general-spec/y-axis_allowcalibration_disabled.png differ diff --git a/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_large/general-spec/y-axis_allowcalibration_enabled.png b/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_large/general-spec/y-axis_allowcalibration_enabled.png index f40c929de..a64705621 100644 Binary files a/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_large/general-spec/y-axis_allowcalibration_enabled.png and b/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_large/general-spec/y-axis_allowcalibration_enabled.png differ diff --git a/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_medium/general-spec/custom_legend_placement.png b/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_medium/general-spec/custom_legend_placement.png index c0c1bed4d..89969426a 100644 Binary files a/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_medium/general-spec/custom_legend_placement.png and b/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_medium/general-spec/custom_legend_placement.png differ diff --git a/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_medium/general-spec/no_data.png b/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_medium/general-spec/no_data.png index 7ce36704d..29c4f4693 100644 Binary files a/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_medium/general-spec/no_data.png and b/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_medium/general-spec/no_data.png differ diff --git a/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_medium/general-spec/y-axis_allowcalibration_disabled.png b/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_medium/general-spec/y-axis_allowcalibration_disabled.png index 65849fae2..c958f67c9 100644 Binary files a/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_medium/general-spec/y-axis_allowcalibration_disabled.png and b/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_medium/general-spec/y-axis_allowcalibration_disabled.png differ diff --git a/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_medium/general-spec/y-axis_allowcalibration_enabled.png b/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_medium/general-spec/y-axis_allowcalibration_enabled.png index 1af7578e5..9875d1df8 100644 Binary files a/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_medium/general-spec/y-axis_allowcalibration_enabled.png and b/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_medium/general-spec/y-axis_allowcalibration_enabled.png differ diff --git a/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_tiny/general-spec/custom_legend_placement.png b/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_tiny/general-spec/custom_legend_placement.png index 039ffc301..eb791ab1a 100644 Binary files a/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_tiny/general-spec/custom_legend_placement.png and b/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_tiny/general-spec/custom_legend_placement.png differ diff --git a/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_tiny/general-spec/no_data.png b/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_tiny/general-spec/no_data.png index 555d31024..5010356b3 100644 Binary files a/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_tiny/general-spec/no_data.png and b/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_tiny/general-spec/no_data.png differ diff --git a/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_tiny/general-spec/y-axis_allowcalibration_disabled.png b/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_tiny/general-spec/y-axis_allowcalibration_disabled.png index 196a61709..e5876eace 100644 Binary files a/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_tiny/general-spec/y-axis_allowcalibration_disabled.png and b/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_tiny/general-spec/y-axis_allowcalibration_disabled.png differ diff --git a/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_tiny/general-spec/y-axis_allowcalibration_enabled.png b/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_tiny/general-spec/y-axis_allowcalibration_enabled.png index c2ca4f4af..c9c9da1f5 100644 Binary files a/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_tiny/general-spec/y-axis_allowcalibration_enabled.png and b/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_tiny/general-spec/y-axis_allowcalibration_enabled.png differ diff --git a/packages/carbon-graphs/tests/wdio/Graphs/General/general-spec.js b/packages/carbon-graphs/tests/wdio/Graphs/General/general-spec.js index ab8ae295a..df31af013 100644 --- a/packages/carbon-graphs/tests/wdio/Graphs/General/general-spec.js +++ b/packages/carbon-graphs/tests/wdio/Graphs/General/general-spec.js @@ -70,9 +70,9 @@ Terra.describeViewports('General', ['tiny', 'medium', 'large'], () => { browser.url('/raw/tests/cerner-terra-graphs-docs/graphs/general/axes/allow-calibration-disabled-x-axis'); Terra.validates.screenshot('x-axis_allowcalibration_disabled', { selector: '.carbon-graph-container' }); }); - it('validates y-axis allowCalibration disabled graph container', () => { - browser.url('/raw/tests/cerner-terra-graphs-docs/graphs/general/axes/allow-calibration-disabled-y-axis'); - Terra.validates.screenshot('y-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'); + Terra.validates.screenshot('y-axis_allowcalibration_disabled', { selector: '#allow-calibration-disabled-example' }); }); it('validates timeseries x-axis allowCalibration enabled graph container', () => { @@ -90,8 +90,8 @@ 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/axes/allow-calibration-enabled-y-axis'); - Terra.validates.screenshot('y-axis_allowcalibration_enabled', { selector: '.carbon-graph-container' }); + browser.url('/raw/tests/cerner-terra-graphs-docs/graphs/general/allow-calibration'); + Terra.validates.screenshot('y-axis_allowcalibration_enabled', { selector: '#allow-calibration-enabled-example' }); }); it('validates Y-axis hidden graph container', () => { @@ -144,7 +144,7 @@ Terra.describeViewports('General', ['tiny', 'medium', 'large'], () => { describe('Legend', () => { it('validates custom legend placement graph container', () => { browser.url('/raw/tests/cerner-terra-graphs-docs/graphs/general/padding/custom-legend-placement'); - Terra.validates.screenshot('custom_legend_placement', { selector: '.bindto-container' }); + Terra.validates.screenshot('custom_legend_placement', { selector: '#custom-legend-example' }); }); it('validates graph and legend padding reduced graph container', () => { diff --git a/packages/terra-graphs-docs/CHANGELOG.md b/packages/terra-graphs-docs/CHANGELOG.md index cf5047b89..61368271d 100644 --- a/packages/terra-graphs-docs/CHANGELOG.md +++ b/packages/terra-graphs-docs/CHANGELOG.md @@ -3,6 +3,7 @@ ## Unreleased * Changed + * Updated core-configuration/graph-config-object 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. diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Graph.1.graph.mdx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Graph.1.graph.mdx deleted file mode 100644 index 8227f9c24..000000000 --- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Graph.1.graph.mdx +++ /dev/null @@ -1,152 +0,0 @@ -# Graph - -The graph configuration object has a set of properties for the underlying grid of a graph. -It hold various properties to configure a grid. - -- [Valid Graphs](#valid-graphs) -- [Configuration Structure](#configuration-structure) -- [Configuration Properties](#configuration-properties) - - [clickPassThrough](#clickpassthrough) - - [dimension](#dimension) - - [legendPadding](#legendpadding) - - [ticksCount](#tickscount) - -## Valid Graphs - -It is required for the following graphs: - -- [Bar](../../bar-graph/about) -- [Bubble](../../bubble-graph/about) -- [Combination](../../combination/about) -- [Line](../../line-graph/about) -- [Paired Result](../../paired-result-graph/about) -- [Scatter](../../scatter-graph/about) - - -## Configuration Structure -```js -const graphConfig = { - axis: , - bindTo: , - allowCalibration: , - bindLegendTo: , - clickPassThrough: { - datelines: , - eventlines: , - } - dateline: , - eventline: , - legendPadding: { - top: , - bottom: , - left: , - right: - }, - locale: , - padding: { - top: , - bottom: , - left: , - right: - }, - pan: { - enabled: - }, - removeContainerPadding: , - showHGrid: , - showLabel: , - showLegend: , - showNoDataText: , - showShapes: , - showVGrid: , - showXLabel: , - ticksCount: -} -``` - -## Configuration Properties - -| 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. | -| bindLegendTo | string | `null` | no | If DOM id provided, binds legend into that container (Example: `"#legendContainer"`). | -| clickPassThrough | object | `{}` | no | See [clickPassThrough](#clickpassthrough). | -| dateline | array | `[]` | no | See [Dateline](./Dateline). | -| eventline | array | `[]` | no | See [Eventline](./Eventline). | -| dimension | object | `{}` | no | See [dimension](#dimension). | -| legendPadding | object | `{ top: 4, bottom: 4, left: 8, right: 8 }` | no | Sets the legend padding and removes the carbon default margin of `8px` around legend. | -| locale | object | `LOCALE.en_US` | no | Locale object for x-Axis tick values. | -| opaqueBackground | false | `false` | no | Toggle between a `transparent` or `white` background for the container. | -| padding | object | `{ top: 10, bottom: 10, left: 30, right: 50 }` | no | See [Padding](./Padding). | -| pan | object | `{}` | no | See [Panning](./Panning). | -| removeContainerPadding | boolean | `false` | no | Toggle to remove the top and bottom padding of the carbon container. | -| showHGrid | boolean | `true` | no | Toggle to show horizontal grid. | -| showLabel | boolean | `true` | no | Toggle to show axes labels. | -| showLegend | boolean | `true` | no | Toggle to show graph legend. | -| showNoDataText | boolean | `true` | no | Toggle to show no data text. | -| showShapes | boolean | `true` | no | Toggle to show shapes in the line graph. | -| showVGrid | boolean | `true` | no | Toggle to show vertical grid. | -| 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). | - -- ### `clickPassThrough` - - | Property Name | Expected | Default | Required | Description | - |---------------|----------|---------|----------|-------------------------------------------------------------| - | datelines | object | null | no | Toggle for allowing click events to items below datelines. | - | eventlines | object | null | no | Toggle for allowing click events to items below eventlines. | - - The following is a table of how `clickPassThrough` works: - - ##### `dateline` - - | `clickPassThrough.dateline` Value | `onClick` function | Result | - |-----------------------------------|--------------------|--------------------------------------------------------------------------------------------------------------------| - | `true` | defined | `onClick` function is executed and cursor pointer is visible top of the element. | - | `true` | `undefined` | The element beneath it is clickable. If the bottom element is selectable, then the cursor pointer is also visible. | - | `false` | defined | `onClick` function is executed and cursor pointer is visible top of the element. | - | `false` | `undefined` | All mouse events are disabled. | - - ##### `eventline` - | `clickPassThrough.eventline` Value | Result | - |------------------------------------|--------------------------------------------------------------------------------------------------------------| - | `true` | Clicking underneath the element is allowed and if bottom element is selectable, then the pointer is visible. | - | `false` | All mouse events are disabled. | - - -- ### `dimension` - **type:** object - - | Property Name | Type | Required | Description | - |---------------|--------|----------|-------------------------------| - | height | number | no | Sets the height of the graph. | - - -- ### `legendPadding` - **type:** object - - Sets the legend padding and removes the carbon default margin of `8px` around legend. - - ```json - legendPadding: { - top: , - bottom: , - left: , - right: - } - ``` - - | Property Name | Type | Required | Default | Description | - |---------------|--------|----------|---------|-------------------------------------| - | top | number | no | `4` | Top padding of legend container. | - | bottom | number | no | `4` | Bottom padding of legend container. | - | left | number | no | `8` | Left padding of legend container. | - | right | number | no | `8` | Right padding of legend container. | - -- ### `ticksCount` - **type:** number - - Number of ticks (0-19) to show on the vertical axes, excluding the upper and lower limits, if not provided, the number of ticks will be set to a value from 3-7, based on the `Y` & `Y2` range. - See [Ticks](./Ticks) for more information on how this is used with the Ticks object. 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.1.graph.mdx new file mode 100644 index 000000000..d178f8d25 --- /dev/null +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/GraphConfigurationObject.1.graph.mdx @@ -0,0 +1,192 @@ +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 + +The graph configuration object has a set of properties for the underlying grid of a graph. +It hold various properties to configure a grid. + +- [Valid Graphs](#valid-graphs) +- [Configuration Structure](#configuration-structure) +- [Configuration Properties Summary](#configuration-properties-summary) +- [Configuration Properties Details](#configuration-properties-details) + - [allowCalibration](#allowcalibration) + - [bindLegendTo](#bindlegendto) + - [clickPassThrough](#clickpassthrough) + - [dimension](#dimension) + - [legendPadding](#legendpadding) + - [ticksCount](#tickscount) + +## Valid Graphs + +It is required for the following graphs: + +- [Bar](../bar-graph/about) +- [Bubble](../bubble-graph/about) +- [Combination](../combination/about) +- [Line](../line-graph/about) +- [Paired Result](../paired-result-graph/about) +- [Scatter](../scatter-graph/about) + +Without a dataset, the above graphs will render as follows: + + + + +## Configuration Structure +```js +const graphConfig = { + axis: , + bindTo: , + allowCalibration: , + bindLegendTo: , + clickPassThrough: { + datelines: , + eventlines: , + } + dateline: , + eventline: , + legendPadding: { + top: , + bottom: , + left: , + right: + }, + locale: , + padding: { + top: , + bottom: , + left: , + right: + }, + pan: { + enabled: + }, + removeContainerPadding: , + showHGrid: , + showLabel: , + showLegend: , + showNoDataText: , + showShapes: , + showVGrid: , + showXLabel: , + ticksCount: +} +``` + +## 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](#allowcalibration) | boolean | `true` | no | Toggle to automatically adjust the y axis based on the dataset. | +| [bindLegendTo](#bindlegendto) | string | `null` | no | Container id for custom legend placement. See [bindLegendTo](#bindLegendTo). | +| [clickPassThrough](#clickpassthrough) | object | `{}` | no | See [clickPassThrough](#clickpassthrough). | +| dateline | array | `[]` | no | See [Dateline](./Dateline). | +| eventline | array | `[]` | no | See [Eventline](./Eventline). | +| [dimension](#dimension) | object | `{}` | no | See [dimension](#dimension). | +| [legendPadding](#legendpadding) | object | `{ top: 4, bottom: 4, left: 8, right: 8 }` | no | Sets the legend padding and removes the carbon default margin of `8px` around legend. | +| locale | object | `LOCALE.en_US` | no | Locale object for x-Axis tick values. | +| opaqueBackground | false | `false` | no | Toggle between a `transparent` or `white` background for the container. | +| padding | object | `{ top: 10, bottom: 10, left: 30, right: 50 }` | no | See [Padding](./Padding). | +| pan | object | `{}` | no | See [Panning](./Panning). | +| removeContainerPadding | boolean | `false` | no | Toggle to remove the top and bottom padding of the carbon container. | +| showHGrid | boolean | `true` | no | Toggle to show horizontal grid. | +| showLabel | boolean | `true` | no | Toggle to show axes labels. | +| showLegend | boolean | `true` | no | Toggle to show graph legend. | +| showNoDataText | boolean | `true` | no | Toggle to show no data text. | +| showShapes | boolean | `true` | no | Toggle to show shapes in the line graph. | +| showVGrid | boolean | `true` | no | Toggle to show vertical grid. | +| 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](#tickscount) | number | `3`-`7` depending on the input range | no | See [ticksCount](#tickscount). | + +## Configuration Properties Details + +- ### `allowCalibration` + **type:** boolean + +The `allowCalibration` prop allows the y-axes to be automatically updated based on the dataset. + + +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. + + + +- ### `bindLegendTo` + **type:** string + +Container ID for custom legend placement. + + + +- ### `clickPassThrough` + **type:** object + + ```js + clickPassThrough: { + datelines: , + eventlines: , + } + ``` + + | Property Name | Expected | Default | Required | Description | + | ------------- | -------- | ------- | -------- | ----------------------------------------------------------- | + | datelines | object | null | no | Toggle for allowing click events to items below datelines. | + | eventlines | object | null | no | Toggle for allowing click events to items below eventlines. | + + The following is a table of how `clickPassThrough` works: + + ##### `dateline` + + | `clickPassThrough.dateline` Value | `onClick` function | Result | + | --------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------ | + | `true` | defined | `onClick` function is executed and cursor pointer is visible top of the element. | + | `true` | `undefined` | The element beneath it is clickable. If the bottom element is selectable, then the cursor pointer is also visible. | + | `false` | defined | `onClick` function is executed and cursor pointer is visible top of the element. | + | `false` | `undefined` | All mouse events are disabled. | + + ##### `eventline` + | `clickPassThrough.eventline` Value | Result | + | ---------------------------------- | ------------------------------------------------------------------------------------------------------------ | + | `true` | Clicking underneath the element is allowed and if bottom element is selectable, then the pointer is visible. | + | `false` | All mouse events are disabled. | + + +- ### `dimension` + **type:** object + + | Property Name | Type | Required | Description | + | ------------- | ------ | -------- | ----------------------------- | + | height | number | no | Sets the height of the graph. | + + +- ### `legendPadding` + **type:** object + + Sets the legend padding and removes the carbon default margin of `8px` around legend. + + ```json + legendPadding: { + top: , + bottom: , + left: , + right: + } + ``` + + | Property Name | Type | Required | Default | Description | + | ------------- | ------ | -------- | ------- | ----------------------------------- | + | top | number | no | `4` | Top padding of legend container. | + | bottom | number | no | `4` | Bottom padding of legend container. | + | left | number | no | `8` | Left padding of legend container. | + | right | number | no | `8` | Right padding of legend container. | + + +- ### `ticksCount` + **type:** number + + Number of ticks (0-19) to show on the vertical axes, excluding the upper and lower limits, if not provided, the number of ticks will be set to a value from 3-7, based on the `Y` & `Y2` range. + See [Ticks](./Ticks) for more information on how this is used with the Ticks object. 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 new file mode 100644 index 000000000..76e93f864 --- /dev/null +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationDisabled.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: 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: 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 AllowCalibrationDisabledExample = () => { + React.useEffect(() => { + const graph = Carbon.api.graph(graphConfig); + graph.loadContent(Carbon.api.line(dataset1)); + }, []); + return
; +}; + +export default AllowCalibrationDisabledExample; 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 new file mode 100644 index 000000000..ee58e71a4 --- /dev/null +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/AllowCalibrationEnabled.jsx @@ -0,0 +1,90 @@ +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: 130, + }, + 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: 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 graph1 = Carbon.api.graph(graphConfig1); + graph1.loadContent(Carbon.api.line(dataset1)); + + const graph2 = Carbon.api.graph(graphConfig2); + graph2.loadContent(Carbon.api.line(dataset1)); + }, []); + + return ( + <> +
+
+ + ); +}; + +export default NoDataGeneralExample; 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 new file mode 100644 index 000000000..6f905fc31 --- /dev/null +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/GraphWithCustomLegendDom.jsx @@ -0,0 +1,68 @@ +/* eslint-disable react/forbid-dom-props */ +import React from 'react'; +import Carbon from '@cerner/carbon-graphs'; + +// graph configuration object + +const graphConfig = { + bindTo: '#custom-legend-graph', + 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, + }, + }, +}; + +// 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 CustomLegendDomExample = () => { + React.useEffect(() => { + const graph = Carbon.api.graph(graphConfig); + graph.loadContent(Carbon.api.line(dataset1)); + }, []); + return ( +
+
+
+
+
+
+ ); +}; + +export default CustomLegendDomExample; 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 new file mode 100644 index 000000000..c0624dce2 --- /dev/null +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/examples/GraphWithNoData.jsx @@ -0,0 +1,34 @@ +import React from 'react'; +import Carbon from '@cerner/carbon-graphs'; + +// graph configuration object + +const graphConfig = { + bindTo: '#no-data-example', + bindLegendTo: null, + axis: { + x: { + show: true, + label: 'x axis', + lowerLimit: 80, + upperLimit: 280, + }, + y: { + show: true, + label: 'y axis', + lowerLimit: -18, + upperLimit: 18, + }, + }, +}; + +// graph rendering + +const NoDataGeneralExample = () => { + React.useEffect(() => { + Carbon.api.graph(graphConfig); + }, []); + return
; +}; + +export default NoDataGeneralExample; diff --git a/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/AllowCalibration.test.jsx b/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/AllowCalibration.test.jsx new file mode 100644 index 000000000..3086cf4af --- /dev/null +++ b/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/AllowCalibration.test.jsx @@ -0,0 +1,13 @@ +import React from 'react'; +import AllowCalibrationDisabled from '../../../graph/CoreConfiguration.b/examples/AllowCalibrationDisabled'; +import AllowCalibrationEnabled from '../../../graph/CoreConfiguration.b/examples/AllowCalibrationEnabled'; + +export default () => ( +
+

allowCalibration Disabled

+ + +

allowCalibration Enabled

+ +
+); diff --git a/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/Other/NoData.test.jsx b/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/Other/NoData.test.jsx index b83226ff2..4a34885d5 100644 --- a/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/Other/NoData.test.jsx +++ b/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/Other/NoData.test.jsx @@ -1,9 +1,4 @@ import React from 'react'; -import utils from '@cerner/carbon-graphs/lib/js/helpers/utils'; -import LineGraph from '@cerner/terra-graphs-docs/lib/terra-graphs-src/components/Line/LineGraph'; -import '@cerner/terra-graphs-docs/lib/terra-dev-site/ExampleGraphContainer/ExampleGraphContainer.module.scss'; -import getGraphConfig from '@cerner/terra-graphs-docs/lib/example-datasets/graphConfigObjects/General/generalDefault'; +import NoDataExample from '../../../../graph/CoreConfiguration.b/examples/GraphWithNoData'; -const graphConfig = utils.deepClone(getGraphConfig('#nodata')); - -export default () => ; +export default () => ; diff --git a/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/Padding/CustomLegendPlacement.test.jsx b/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/Padding/CustomLegendPlacement.test.jsx index b5b43c99e..922a5d089 100644 --- a/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/Padding/CustomLegendPlacement.test.jsx +++ b/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/Padding/CustomLegendPlacement.test.jsx @@ -1,26 +1,4 @@ import React from 'react'; -import utils from '@cerner/carbon-graphs/lib/js/helpers/utils'; -import LineGraph from '@cerner/terra-graphs-docs/lib/terra-graphs-src/components/Line/LineGraph'; -import '@cerner/terra-graphs-docs/lib/terra-dev-site/ExampleGraphContainer/ExampleGraphContainer.module.scss'; -import getGraphConfig from '@cerner/terra-graphs-docs/lib/example-datasets/graphConfigObjects/General/generalDefaultCustomLegendPlacement'; -import exampleData1 from '@cerner/terra-graphs-docs/lib/example-datasets/dataObjects/General/dataset1'; -import exampleData2 from '@cerner/terra-graphs-docs/lib/example-datasets/dataObjects/General/dataset2'; -import exampleData3 from '@cerner/terra-graphs-docs/lib/example-datasets/dataObjects/General/dataset3'; +import CustomLegendDomExample from '../../../../graph/CoreConfiguration.b/examples/GraphWithCustomLegendDom'; -const graphConfig = utils.deepClone(getGraphConfig('#graphContainer', '#legendContainer')); -const dataset = [ - utils.deepClone(exampleData1), - utils.deepClone(exampleData2), - utils.deepClone(exampleData3), -]; - -export default () => ( -
-
-
-
-
-
- -
-); +export default () => ;