From ddf9aadbb2de58645b40b2264527c0cfcb3d3dcf Mon Sep 17 00:00:00 2001 From: Saad <38024451+sdadn@users.noreply.github.com> Date: Wed, 17 Apr 2024 17:59:54 -0500 Subject: [PATCH 1/5] updated example --- packages/terra-graphs-docs/package.json | 1 + .../reflow/DynamicallyUpdatingData.jsx | 55 +++++++++++++++++-- 2 files changed, 52 insertions(+), 4 deletions(-) diff --git a/packages/terra-graphs-docs/package.json b/packages/terra-graphs-docs/package.json index a73365329..be4b0b9c9 100644 --- a/packages/terra-graphs-docs/package.json +++ b/packages/terra-graphs-docs/package.json @@ -38,6 +38,7 @@ "dependencies": { "@cerner/carbon-graphs": "^2.25.0", "classnames": "2", + "d3-array": "^3.2.4", "d3-selection": "1", "details-polyfill": "1", "prop-types": "15", diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx index 0913fa424..1fffa33b0 100644 --- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; +import * as d3 from'd3-array'; import Button from 'terra-button'; - import Carbon from '@cerner/carbon-graphs'; // graph configuration object @@ -21,7 +21,7 @@ const graphConfig = { upperLimit: 20, }, }, - allowCalibration: true, + allowCalibration: false, }; // graph dataset @@ -77,6 +77,28 @@ const updatedDataset1 = { ], }; +const getNewTicks = (currentUpper, currentLower, dataset) => { + const maxValue = Math.max(...dataset.values.map(value => value.y), currentUpper); + const minValue = Math.min(...dataset.values.map(value => value.y), currentLower); + + // add padding by using the nice function + const [newLower, newUpper] = d3.nice(minValue-1, maxValue+1, 10); + + // get new tick values + const ticksCount = 3; + const ticks = new Array().concat(d3.ticks(newLower, newUpper, ticksCount), [newLower, newUpper] ); + + console.log("ticks",ticks); + console.log("current min, max",[minValue, maxValue]); + console.log("new min, max", [newLower, newUpper]); + + return { + newLower, + newUpper, + ticks, + } +} + // graph rendering let graph; const DynamicallyUpdatingDataExample = () => { @@ -85,6 +107,17 @@ const DynamicallyUpdatingDataExample = () => { React.useEffect(() => { graph = Carbon.api.graph(graphConfig); graph.loadContent(Carbon.api.line(dataset1)); + + const newTicks = getNewTicks(graph.config.axis.y.upperLimit, graph.config.axis.y.lowerLimit, dataset1); + + graph.config.axis.y.domain.lowerLimit = newTicks.newLower; + graph.config.axis.y.domain.upperLimit = newTicks.newUpper; + graph.config.axis.y.ticks.values = newTicks.ticks; + + graph.reflowMultipleDatasets(); + + console.log(graph.config.axis.y.upperLimit) + }, []); const handleClickToggleCalibration = () => { @@ -95,8 +128,14 @@ const DynamicallyUpdatingDataExample = () => { }; const handleClickUpdateData = () => { - // graph.config.axis.y.domain.lowerLimit = 0; - // graph.config.axis.y.domain.upperLimit = 20; + const maxValue = Math.max(...updatedDataset1.values.map(value => value.y), graph.config.axis.y.upperLimit); + const minValue = Math.min(...updatedDataset1.values.map(value => value.y), graph.config.axis.y.lowerLimit); + + const newTicks = getNewTicks(graph.config.axis.y.upperLimit, graph.config.axis.y.lowerLimit, updatedDataset1); + + graph.config.axis.y.domain.lowerLimit = newTicks.newLower; + graph.config.axis.y.domain.upperLimit = newTicks.newUpper; + graph.config.axis.y.ticks.values = newTicks.ticks; graph.reflowMultipleDatasets({ panData: [updatedDataset1], @@ -106,6 +145,14 @@ const DynamicallyUpdatingDataExample = () => { const handleClickReset = () => { graph.unloadContent(Carbon.api.line(dataset1)); graph.loadContent(Carbon.api.line(dataset1)); + + const newTicks = getNewTicks(graph.config.axis.y.upperLimit, graph.config.axis.y.lowerLimit, dataset1); + + graph.config.axis.y.domain.lowerLimit = newTicks.newLower; + graph.config.axis.y.domain.upperLimit = newTicks.newUpper; + graph.config.axis.y.ticks.values = newTicks.ticks; + + graph.reflowMultipleDatasets(); }; return ( From a915aa92fccb154aa790bf84110c8a3d6c7719fe Mon Sep 17 00:00:00 2001 From: Saad <38024451+sdadn@users.noreply.github.com> Date: Wed, 17 Apr 2024 18:12:46 -0500 Subject: [PATCH 2/5] updated package-lock --- package-lock.json | 203 ++++++++++-------- .../reflow/DynamicallyUpdatingData.jsx | 6 +- 2 files changed, 114 insertions(+), 95 deletions(-) diff --git a/package-lock.json b/package-lock.json index 185dd628e..26add59fe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3418,9 +3418,9 @@ } }, "node_modules/@formatjs/ts-transformer/node_modules/@types/node": { - "version": "16.18.95", - "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.95.tgz", - "integrity": "sha512-z9w+CcR7ahc7UhsKe+PGB25nmPmCERQBAdLdFHhoZ6+FfgSr7gUvdQI0eLH2t7ue8u5wKsLdde6cHKPjhC8vGg==", + "version": "16.18.96", + "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.96.tgz", + "integrity": "sha512-84iSqGXoO+Ha16j8pRZ/L90vDMKX04QTYMTfYeE1WrjWaZXuchBehGUZEpNgx7JnmlrIHdnABmpjrQjhCnNldQ==", "dev": true }, "node_modules/@formatjs/ts-transformer/node_modules/ansi-styles": { @@ -7651,9 +7651,9 @@ } }, "node_modules/@npmcli/map-workspaces": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/@npmcli/map-workspaces/-/map-workspaces-3.0.4.tgz", - "integrity": "sha512-Z0TbvXkRbacjFFLpVpV0e2mheCh+WzQpcqL+4xp49uNJOxOnIAPZyXtUxZ5Qn3QBTGKA11Exjd9a5411rBrhDg==", + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/@npmcli/map-workspaces/-/map-workspaces-3.0.6.tgz", + "integrity": "sha512-tkYs0OYnzQm6iIRdfy+LcLBjcKuQCeE5YLb8KnrIlutJfheNaPvPpgoFEyEFgbjzl5PLZ3IA/BWAwRU0eHuQDA==", "dev": true, "dependencies": { "@npmcli/name-from-folder": "^2.0.0", @@ -9821,9 +9821,9 @@ "dev": true }, "node_modules/@types/node": { - "version": "20.12.5", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.5.tgz", - "integrity": "sha512-BD+BjQ9LS/D8ST9p5uqBxghlN+S42iuNxjsUGjeZobe/ciXzk2qb1B6IXc6AnRLS+yFJRpN2IPEHMzwspfDJNw==", + "version": "20.12.7", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.7.tgz", + "integrity": "sha512-wq0cICSkRLVaf3UGLMGItu/PtdY7oaXaI/RVU+xliKVOtRna3PRY57ZDfztpDL0n11vfymMUnXv8QwYCO7L1wg==", "dev": true, "dependencies": { "undici-types": "~5.26.4" @@ -9889,9 +9889,9 @@ "dev": true }, "node_modules/@types/qs": { - "version": "6.9.14", - "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.14.tgz", - "integrity": "sha512-5khscbd3SwWMhFqylJBLQ0zIu7c1K6Vz0uBIt915BI3zV0q1nfjRQD3RqSBcPaO6PHEF4ov/t9y89fSiyThlPA==", + "version": "6.9.15", + "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.15.tgz", + "integrity": "sha512-uXHQKES6DQKKCLh441Xv/dwxOq1TVS3JPUMlEqoEglvlhR6Mxnlew/Xq/LRVHpLyk7iK3zODe1qYHIMltO7XGg==", "dev": true }, "node_modules/@types/range-parser": { @@ -9901,9 +9901,9 @@ "dev": true }, "node_modules/@types/react": { - "version": "18.2.74", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.74.tgz", - "integrity": "sha512-9AEqNZZyBx8OdZpxzQlaFEVCSFUM2YXJH46yPOiOpm078k6ZLOCcuAzGum/zK8YBwY+dbahVNbHrbgrAwIRlqw==", + "version": "18.2.79", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.79.tgz", + "integrity": "sha512-RwGAGXPl9kSXwdNTafkOEuFrTBD5SA2B3iEB96xi8+xu5ddUa/cpvyVCSNn+asgLCTHkb5ZxN8gbuibYJi4s1w==", "dependencies": { "@types/prop-types": "*", "csstype": "^3.0.2" @@ -10337,9 +10337,9 @@ } }, "node_modules/@wdio/cli/node_modules/@types/node": { - "version": "18.19.30", - "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.30.tgz", - "integrity": "sha512-453z1zPuJLVDbyahaa1sSD5C2sht6ZpHp5rgJNs+H8YGqhluCXcuOUmBYsAo0Tos0cHySJ3lVUGbGgLlqIkpyg==", + "version": "18.19.31", + "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.31.tgz", + "integrity": "sha512-ArgCD39YpyyrtFKIqMDvjz79jto5fcI/SVUs2HwB+f0dAzq68yqOdyaSivLiLugSziTpNXLQrVb7RZFmdZzbhA==", "dev": true, "dependencies": { "undici-types": "~5.26.4" @@ -10702,9 +10702,9 @@ } }, "node_modules/@wdio/reporter/node_modules/@types/node": { - "version": "18.19.30", - "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.30.tgz", - "integrity": "sha512-453z1zPuJLVDbyahaa1sSD5C2sht6ZpHp5rgJNs+H8YGqhluCXcuOUmBYsAo0Tos0cHySJ3lVUGbGgLlqIkpyg==", + "version": "18.19.31", + "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.31.tgz", + "integrity": "sha512-ArgCD39YpyyrtFKIqMDvjz79jto5fcI/SVUs2HwB+f0dAzq68yqOdyaSivLiLugSziTpNXLQrVb7RZFmdZzbhA==", "dev": true, "dependencies": { "undici-types": "~5.26.4" @@ -10842,9 +10842,9 @@ } }, "node_modules/@wdio/sync/node_modules/@types/node": { - "version": "18.19.30", - "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.30.tgz", - "integrity": "sha512-453z1zPuJLVDbyahaa1sSD5C2sht6ZpHp5rgJNs+H8YGqhluCXcuOUmBYsAo0Tos0cHySJ3lVUGbGgLlqIkpyg==", + "version": "18.19.31", + "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.31.tgz", + "integrity": "sha512-ArgCD39YpyyrtFKIqMDvjz79jto5fcI/SVUs2HwB+f0dAzq68yqOdyaSivLiLugSziTpNXLQrVb7RZFmdZzbhA==", "dev": true, "dependencies": { "undici-types": "~5.26.4" @@ -11213,9 +11213,9 @@ } }, "node_modules/@wdio/types/node_modules/@types/node": { - "version": "18.19.30", - "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.30.tgz", - "integrity": "sha512-453z1zPuJLVDbyahaa1sSD5C2sht6ZpHp5rgJNs+H8YGqhluCXcuOUmBYsAo0Tos0cHySJ3lVUGbGgLlqIkpyg==", + "version": "18.19.31", + "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.31.tgz", + "integrity": "sha512-ArgCD39YpyyrtFKIqMDvjz79jto5fcI/SVUs2HwB+f0dAzq68yqOdyaSivLiLugSziTpNXLQrVb7RZFmdZzbhA==", "dev": true, "dependencies": { "undici-types": "~5.26.4" @@ -11502,9 +11502,9 @@ } }, "node_modules/ace-builds": { - "version": "1.32.9", - "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.32.9.tgz", - "integrity": "sha512-dqBLPj//Gq0b92YUtRIsdWsORf4J+4xW3r8/4Wr2Vqid7O1j7YBV/ZsVvWBjZFy+EnvMCRFCFOEIM1cbt4BQ/g==", + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.33.0.tgz", + "integrity": "sha512-PDvytkZNvAfuh+PaP5Oy3l3sBGd7xMk4NsB+4w/w1e3gjBqEOGeJwcX+wF/SB6mLtT3VfJLrhDNPT3eaCjtR3w==", "dev": true }, "node_modules/acorn": { @@ -12367,9 +12367,9 @@ "optional": true }, "node_modules/aws-sdk": { - "version": "2.1595.0", - "resolved": "https://registry.npmjs.org/aws-sdk/-/aws-sdk-2.1595.0.tgz", - "integrity": "sha512-ee0FaplSMz9Y6XJnnyDCHv6SLziJ2YCI4SsO0VRFUKK4Jtk/KErp20CJI/4ZsS+oz7k2/vQ3JqGQXCz95nU8Ww==", + "version": "2.1601.0", + "resolved": "https://registry.npmjs.org/aws-sdk/-/aws-sdk-2.1601.0.tgz", + "integrity": "sha512-znwVdKs3g0j1cAFfi+PGPSmBxXjiekJXp1nnOUq4rxXYvN7av8gxptXaQz+vqB4uhNFsD+OXNQh+6bd9eQxZmw==", "dev": true, "hasInstallScript": true, "optional": true, @@ -13874,9 +13874,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001607", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001607.tgz", - "integrity": "sha512-WcvhVRjXLKFB/kmOFVwELtMxyhq3iM/MvmXcyCe2PNf166c39mptscOc/45TTS96n2gpNV2z7+NakArTWZCQ3w==", + "version": "1.0.30001610", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001610.tgz", + "integrity": "sha512-QFutAY4NgaelojVMjY63o6XlZyORPaLfyMnsl3HgnWdJUcX6K0oaJymHjH8PT5Gk7sTm8rvC/c5COUQKXqmOMA==", "dev": true, "funding": [ { @@ -14890,9 +14890,9 @@ } }, "node_modules/core-js": { - "version": "3.36.1", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.36.1.tgz", - "integrity": "sha512-BTvUrwxVBezj5SZ3f10ImnX2oRByMxql3EimVqMysepbC9EeMUOpLwdy6Eoili2x6E4kf+ZUB5k/+Jv55alPfA==", + "version": "3.37.0", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.37.0.tgz", + "integrity": "sha512-fu5vHevQ8ZG4og+LXug8ulUtVxjOcEYvifJr7L5Bfq9GOztVqsKd9/59hUk2ZSbCrS3BqUr3EpaYGIYzq7g3Ug==", "dev": true, "hasInstallScript": true, "funding": { @@ -14901,9 +14901,9 @@ } }, "node_modules/core-js-compat": { - "version": "3.36.1", - "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.36.1.tgz", - "integrity": "sha512-Dk997v9ZCt3X/npqzyGdTlq6t7lDBhZwGvV94PKzDArjp7BTRm7WlDAXYd/OWdeFHO8OChQYRJNJvUCqCbrtKA==", + "version": "3.37.0", + "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.37.0.tgz", + "integrity": "sha512-vYq4L+T8aS5UuFg4UwDhc7YNRWVeVZwltad9C/jV3R2LgVOpS9BDr7l/WL6BN0dbV3k1XejPTHqqEzJgsa0frA==", "dev": true, "dependencies": { "browserslist": "^4.23.0" @@ -16229,9 +16229,9 @@ "dev": true }, "node_modules/devtools/node_modules/@types/node": { - "version": "18.19.30", - "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.30.tgz", - "integrity": "sha512-453z1zPuJLVDbyahaa1sSD5C2sht6ZpHp5rgJNs+H8YGqhluCXcuOUmBYsAo0Tos0cHySJ3lVUGbGgLlqIkpyg==", + "version": "18.19.31", + "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.31.tgz", + "integrity": "sha512-ArgCD39YpyyrtFKIqMDvjz79jto5fcI/SVUs2HwB+f0dAzq68yqOdyaSivLiLugSziTpNXLQrVb7RZFmdZzbhA==", "dev": true, "dependencies": { "undici-types": "~5.26.4" @@ -16763,9 +16763,9 @@ "dev": true }, "node_modules/ejs": { - "version": "3.1.9", - "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.9.tgz", - "integrity": "sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==", + "version": "3.1.10", + "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz", + "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==", "dev": true, "dependencies": { "jake": "^10.8.5" @@ -16778,9 +16778,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.4.730", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.730.tgz", - "integrity": "sha512-oJRPo82XEqtQAobHpJIR3zW5YO3sSRRkPz2an4yxi1UvqhsGm54vR/wzTFV74a3soDOJ8CKW7ajOOX5ESzddwg==", + "version": "1.4.739", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.739.tgz", + "integrity": "sha512-koRkawXOuN9w/ymhTNxGfB8ta4MRKVW0nzifU17G1UwTWlBg0vv7xnz4nxDnRFSBe9nXMGRgICcAzqXc0PmLeA==", "dev": true }, "node_modules/emittery": { @@ -21378,6 +21378,14 @@ "node": ">= 0.4" } }, + "node_modules/internmap": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz", + "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==", + "engines": { + "node": ">=12" + } + }, "node_modules/interpret": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz", @@ -27974,9 +27982,9 @@ } }, "node_modules/mini-css-extract-plugin": { - "version": "2.8.1", - "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.8.1.tgz", - "integrity": "sha512-/1HDlyFRxWIZPI1ZpgqlZ8jMw/1Dp/dl3P0L1jtZ+zVcHqwPhGwaJwKL00WVgfnBy6PWCde9W65or7IIETImuA==", + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.9.0.tgz", + "integrity": "sha512-Zs1YsZVfemekSZG+44vBsYTLQORkPMwnlv+aehcxK/NLKC+EGhDB39/YePYYqx/sTk6NnYpuqikhSn7+JIevTA==", "dev": true, "dependencies": { "schema-utils": "^4.0.0", @@ -33556,9 +33564,9 @@ } }, "node_modules/qs": { - "version": "6.12.0", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.12.0.tgz", - "integrity": "sha512-trVZiI6RMOkO476zLGaBIzszOdFPnCCXHPG9kn0yuS1uz6xdVxPfZdB3vUig9pxPFDM9BRAgz/YUIVQ1/vuiUg==", + "version": "6.12.1", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.12.1.tgz", + "integrity": "sha512-zWmv4RSuB9r2mYQw3zxQuHWeU+42aKi1wWig/j4ele4ygELZ7PEO6MM7rim9oAQH2A5MWfsAVf/jPvTPgCbvUQ==", "dev": true, "dependencies": { "side-channel": "^1.0.6" @@ -33899,17 +33907,17 @@ } }, "node_modules/react-focus-lock": { - "version": "2.11.2", - "resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.11.2.tgz", - "integrity": "sha512-DDTbEiov0+RthESPVSTIdAWPPKic+op3sCcP+icbMRobvQNt7LuAlJ3KoarqQv5sCgKArru3kXmlmFTa27/CdQ==", + "version": "2.11.3", + "resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.11.3.tgz", + "integrity": "sha512-CfWYS86y6KvAIGxYzO1/HlWI2zGON9Fa3L2xfREDGMNFAtYj3m/ZRvnsMH4H75dj5FpgDy2LWA1Vyx+twV80vw==", "dev": true, "peer": true, "dependencies": { "@babel/runtime": "^7.0.0", - "focus-lock": "^1.3.2", + "focus-lock": "^1.3.5", "prop-types": "^15.6.2", "react-clientside-effect": "^1.2.6", - "use-callback-ref": "^1.3.0", + "use-callback-ref": "^1.3.2", "use-sidecar": "^1.1.2" }, "peerDependencies": { @@ -33923,18 +33931,17 @@ } }, "node_modules/react-focus-on": { - "version": "3.9.2", - "resolved": "https://registry.npmjs.org/react-focus-on/-/react-focus-on-3.9.2.tgz", - "integrity": "sha512-3UZ9PjA+pe8ZK3B+rz7zcgJUIRJVzJEddYe6R5WVUAsSXW8awHw9nXJqK0UU5MenGEUh/tMUBWMqN633+d2eCA==", + "version": "3.9.3", + "resolved": "https://registry.npmjs.org/react-focus-on/-/react-focus-on-3.9.3.tgz", + "integrity": "sha512-GSLz54TvP6OUlsvnlgHJu80nHOAO2ikRTtDt/aP8GZu3DPPAbwHFdliveBwUfPnyKLUKutFMCJUkH55vuo4uKQ==", "dev": true, "peer": true, "dependencies": { "aria-hidden": "^1.2.2", - "react-focus-lock": "^2.11.2", + "react-focus-lock": "^2.11.3", "react-remove-scroll": "^2.5.7", "react-style-singleton": "^2.2.1", "tslib": "^2.3.1", - "use-callback-ref": "^1.3.0", "use-sidecar": "^1.1.2" }, "engines": { @@ -35566,9 +35573,9 @@ "dev": true }, "node_modules/sass": { - "version": "1.74.1", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.74.1.tgz", - "integrity": "sha512-w0Z9p/rWZWelb88ISOLyvqTWGmtmu2QJICqDBGyNnfG4OUnPX9BBjjYIXUpXCMOOg5MQWNpqzt876la1fsTvUA==", + "version": "1.75.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.75.0.tgz", + "integrity": "sha512-ShMYi3WkrDWxExyxSZPst4/okE9ts46xZmJDSawJQrnte7M1V9fScVB+uNXOVKRBt0PggHOwoZcn8mYX4trnBw==", "dev": true, "dependencies": { "chokidar": ">=3.0.0 <4.0.0", @@ -36323,9 +36330,9 @@ } }, "node_modules/socks": { - "version": "2.8.1", - "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.1.tgz", - "integrity": "sha512-B6w7tkwNid7ToxjZ08rQMT8M9BJAf8DKx8Ft4NivzH0zBUfd6jldGcisJn/RLgxcX3FPNDdNQCUEMMT79b+oCQ==", + "version": "2.8.3", + "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.3.tgz", + "integrity": "sha512-l5x7VUUWbjVFbafGLxPWkYsHIhEvmF85tbIeFZWc8ZPtoMyybuEhL7Jye/ooC4/d48FgOjSJXgsF/AJPYCW8Zw==", "dev": true, "dependencies": { "ip-address": "^9.0.5", @@ -38603,9 +38610,9 @@ } }, "node_modules/terra-menu": { - "version": "6.91.0", - "resolved": "https://registry.npmjs.org/terra-menu/-/terra-menu-6.91.0.tgz", - "integrity": "sha512-KeLl7JTJaNwR4O4piq9NrUO4pqdiD/ymFctX4gC73oLBf70s2MGQ7xj2MnYniwtRRe465H66Lx+qLpDXnsaWqg==", + "version": "6.92.0", + "resolved": "https://registry.npmjs.org/terra-menu/-/terra-menu-6.92.0.tgz", + "integrity": "sha512-iTD6cFgXLDmHlH7Y47L545Sk4SZb42wv/pPKz1PDF7SyBqmJ+YJ3GtMAqquCsHHzOsMP85ZrdOvPH7L0dXpONw==", "dev": true, "dependencies": { "classnames": "^2.2.5", @@ -38653,15 +38660,15 @@ } }, "node_modules/terra-navigation-prompt": { - "version": "1.89.0", - "resolved": "https://registry.npmjs.org/terra-navigation-prompt/-/terra-navigation-prompt-1.89.0.tgz", - "integrity": "sha512-XfiXfC3vB9uVq2HOeAAzA3dnOF4lpUZi9d9RxuXgZOvxxqAAyOVCeDAw8hPsPJf0l/75Ak2QKYKeOxbbw5GKSA==", + "version": "1.90.0", + "resolved": "https://registry.npmjs.org/terra-navigation-prompt/-/terra-navigation-prompt-1.90.0.tgz", + "integrity": "sha512-OCypGUBYfHvQZAwz2sFJyc5efiNbYrpl5mdvbB0vCO5SYcsFiarlUqRfNZcFq6n1t93YWpErvsF3au1HA12lTQ==", "dev": true, "peer": true, "dependencies": { "classnames": "^2.2.5", "prop-types": "^15.5.8", - "terra-notification-dialog": "^4.46.0", + "terra-notification-dialog": "^4.46.1", "uuid": "3.4.0" }, "peerDependencies": { @@ -38670,9 +38677,9 @@ } }, "node_modules/terra-notification-dialog": { - "version": "4.46.0", - "resolved": "https://registry.npmjs.org/terra-notification-dialog/-/terra-notification-dialog-4.46.0.tgz", - "integrity": "sha512-NcoOncTF4FjVUXbED/c0iO1bzVeOKY6m52EjHekytE9HEXnpHOpf1/5yR6QsXcVYwBw6a5NHFBH29/lLpJQU1A==", + "version": "4.46.1", + "resolved": "https://registry.npmjs.org/terra-notification-dialog/-/terra-notification-dialog-4.46.1.tgz", + "integrity": "sha512-4Yxw0o59QP7WAEmrsNgmlMwFXU8Wr0jedujZCkiJiDLGqrjt8IBcADGHvImUSsyuzy/suoXhzzv1uoF0YtW1Mg==", "dev": true, "peer": true, "dependencies": { @@ -38810,9 +38817,9 @@ } }, "node_modules/terra-slide-panel-manager": { - "version": "5.99.0", - "resolved": "https://registry.npmjs.org/terra-slide-panel-manager/-/terra-slide-panel-manager-5.99.0.tgz", - "integrity": "sha512-bzCTjC4OfBJ47vr7j5zW+QjEl2vx1kWGM0u+Ibdt9nGaGWB4b/zkAlOMiqSWU13admODzbA/rozZhe9DyflMIQ==", + "version": "5.100.0", + "resolved": "https://registry.npmjs.org/terra-slide-panel-manager/-/terra-slide-panel-manager-5.100.0.tgz", + "integrity": "sha512-l7X4XgJzTwv74HiU77JQ/cPubQ6J2ukJaLCE4bN6VV2wJpg0WrwK3BWvbbFEJ3yqe9XaMZUtcqa4JywlCdKH9w==", "dev": true, "peer": true, "dependencies": { @@ -40678,9 +40685,9 @@ } }, "node_modules/webdriver/node_modules/@types/node": { - "version": "18.19.30", - "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.30.tgz", - "integrity": "sha512-453z1zPuJLVDbyahaa1sSD5C2sht6ZpHp5rgJNs+H8YGqhluCXcuOUmBYsAo0Tos0cHySJ3lVUGbGgLlqIkpyg==", + "version": "18.19.31", + "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.31.tgz", + "integrity": "sha512-ArgCD39YpyyrtFKIqMDvjz79jto5fcI/SVUs2HwB+f0dAzq68yqOdyaSivLiLugSziTpNXLQrVb7RZFmdZzbhA==", "dev": true, "dependencies": { "undici-types": "~5.26.4" @@ -40725,9 +40732,9 @@ } }, "node_modules/webdriverio/node_modules/@types/node": { - "version": "18.19.30", - "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.30.tgz", - "integrity": "sha512-453z1zPuJLVDbyahaa1sSD5C2sht6ZpHp5rgJNs+H8YGqhluCXcuOUmBYsAo0Tos0cHySJ3lVUGbGgLlqIkpyg==", + "version": "18.19.31", + "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.31.tgz", + "integrity": "sha512-ArgCD39YpyyrtFKIqMDvjz79jto5fcI/SVUs2HwB+f0dAzq68yqOdyaSivLiLugSziTpNXLQrVb7RZFmdZzbhA==", "dev": true, "dependencies": { "undici-types": "~5.26.4" @@ -42164,6 +42171,7 @@ "dependencies": { "@cerner/carbon-graphs": "^2.25.0", "classnames": "2", + "d3-array": "^3.2.4", "d3-selection": "1", "details-polyfill": "1", "prop-types": "15", @@ -42176,6 +42184,17 @@ "react": "16", "react-dom": "16" } + }, + "packages/terra-graphs-docs/node_modules/d3-array": { + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz", + "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==", + "dependencies": { + "internmap": "1 - 2" + }, + "engines": { + "node": ">=12" + } } } } diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx index 1fffa33b0..f531150fa 100644 --- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx @@ -77,7 +77,7 @@ const updatedDataset1 = { ], }; -const getNewTicks = (currentUpper, currentLower, dataset) => { +const getNewTicks = (currentLower, currentUpper, dataset) => { const maxValue = Math.max(...dataset.values.map(value => value.y), currentUpper); const minValue = Math.min(...dataset.values.map(value => value.y), currentLower); @@ -131,7 +131,7 @@ const DynamicallyUpdatingDataExample = () => { const maxValue = Math.max(...updatedDataset1.values.map(value => value.y), graph.config.axis.y.upperLimit); const minValue = Math.min(...updatedDataset1.values.map(value => value.y), graph.config.axis.y.lowerLimit); - const newTicks = getNewTicks(graph.config.axis.y.upperLimit, graph.config.axis.y.lowerLimit, updatedDataset1); + const newTicks = getNewTicks(graph.config.axis.y.lowerLimit, graph.config.axis.y.upperLimit, updatedDataset1); graph.config.axis.y.domain.lowerLimit = newTicks.newLower; graph.config.axis.y.domain.upperLimit = newTicks.newUpper; @@ -146,7 +146,7 @@ const DynamicallyUpdatingDataExample = () => { graph.unloadContent(Carbon.api.line(dataset1)); graph.loadContent(Carbon.api.line(dataset1)); - const newTicks = getNewTicks(graph.config.axis.y.upperLimit, graph.config.axis.y.lowerLimit, dataset1); + const newTicks = getNewTicks(graph.config.axis.y.lowerLimit, graph.config.axis.y.upperLimit, dataset1); graph.config.axis.y.domain.lowerLimit = newTicks.newLower; graph.config.axis.y.domain.upperLimit = newTicks.newUpper; From fd5caff6a80a564aac65a2cf393c408b5eb38b87 Mon Sep 17 00:00:00 2001 From: Saad <38024451+sdadn@users.noreply.github.com> Date: Wed, 17 Apr 2024 18:28:14 -0500 Subject: [PATCH 3/5] updated comments --- .../examples/reflow/DynamicallyUpdatingData.jsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx index f531150fa..3fdbd899e 100644 --- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx @@ -82,7 +82,7 @@ const getNewTicks = (currentLower, currentUpper, dataset) => { const minValue = Math.min(...dataset.values.map(value => value.y), currentLower); // add padding by using the nice function - const [newLower, newUpper] = d3.nice(minValue-1, maxValue+1, 10); + const [newLower, newUpper] = d3.nice(minValue, maxValue, 10); // get new tick values const ticksCount = 3; @@ -104,6 +104,7 @@ let graph; const DynamicallyUpdatingDataExample = () => { const [allowCalibrationStatus, SetAllowCalibrationStatus] = useState(graphConfig.allowCalibration.toString()); + // initial graph load React.useEffect(() => { graph = Carbon.api.graph(graphConfig); graph.loadContent(Carbon.api.line(dataset1)); @@ -127,10 +128,8 @@ const DynamicallyUpdatingDataExample = () => { graph.reflowMultipleDatasets(); }; + // dynamically update graph data const handleClickUpdateData = () => { - const maxValue = Math.max(...updatedDataset1.values.map(value => value.y), graph.config.axis.y.upperLimit); - const minValue = Math.min(...updatedDataset1.values.map(value => value.y), graph.config.axis.y.lowerLimit); - const newTicks = getNewTicks(graph.config.axis.y.lowerLimit, graph.config.axis.y.upperLimit, updatedDataset1); graph.config.axis.y.domain.lowerLimit = newTicks.newLower; @@ -142,17 +141,17 @@ const DynamicallyUpdatingDataExample = () => { }); }; + // reset graph to it's original state const handleClickReset = () => { - graph.unloadContent(Carbon.api.line(dataset1)); - graph.loadContent(Carbon.api.line(dataset1)); - const newTicks = getNewTicks(graph.config.axis.y.lowerLimit, graph.config.axis.y.upperLimit, dataset1); graph.config.axis.y.domain.lowerLimit = newTicks.newLower; graph.config.axis.y.domain.upperLimit = newTicks.newUpper; graph.config.axis.y.ticks.values = newTicks.ticks; - graph.reflowMultipleDatasets(); + graph.reflowMultipleDatasets({ + panData: [dataset1], + }); }; return ( From db60bbba84d0bc98841165e555e35dd7e8aeafa9 Mon Sep 17 00:00:00 2001 From: Saad <38024451+sdadn@users.noreply.github.com> Date: Thu, 18 Apr 2024 10:21:10 -0500 Subject: [PATCH 4/5] added offsets to limits --- .../CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx index 3fdbd899e..443eb9837 100644 --- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx @@ -82,7 +82,7 @@ const getNewTicks = (currentLower, currentUpper, dataset) => { const minValue = Math.min(...dataset.values.map(value => value.y), currentLower); // add padding by using the nice function - const [newLower, newUpper] = d3.nice(minValue, maxValue, 10); + const [newLower, newUpper] = d3.nice(minValue - 1, maxValue + 1, 10); // get new tick values const ticksCount = 3; From e8f4c30cba833ad9ecb35b5f9814c3024b01beb8 Mon Sep 17 00:00:00 2001 From: Saad <38024451+sdadn@users.noreply.github.com> Date: Thu, 18 Apr 2024 10:54:23 -0500 Subject: [PATCH 5/5] updated padding logic --- .../CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx index 443eb9837..a3bd1dc4e 100644 --- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/DynamicallyUpdatingData.jsx @@ -82,7 +82,8 @@ const getNewTicks = (currentLower, currentUpper, dataset) => { const minValue = Math.min(...dataset.values.map(value => value.y), currentLower); // add padding by using the nice function - const [newLower, newUpper] = d3.nice(minValue - 1, maxValue + 1, 10); + const padding = Math.abs(minValue - maxValue) * 0.05; + const [newLower, newUpper] = d3.nice(minValue - padding, maxValue + padding, 10); // get new tick values const ticksCount = 3;