From d1497b5511f307b3f622ea5c52d39a1781eb1bfd Mon Sep 17 00:00:00 2001 From: Saad <38024451+sdadn@users.noreply.github.com> Date: Mon, 15 Apr 2024 13:33:17 -0500 Subject: [PATCH 01/14] reordered docs --- ...raph.mdx => ContributingGuide.z.graph.mdx} | 0 ...1.graph.mdx => GettingStarted.a.graph.mdx} | 0 .../examples/ReflowDynamicData.jsx | 0 .../examples/ReflowDynamicLegend.jsx | 0 .../LineGraph.c/examples/ReflowPanning.jsx | 124 ++++++++++++++++++ .../examples/ReflowPanningTimeseries.jsx | 0 .../examples/ReflowPanningWithY2.jsx | 0 7 files changed, 124 insertions(+) rename packages/terra-graphs-docs/src/terra-dev-site/graph/{GettingStarted.a/ContributingGuide.2.graph.mdx => ContributingGuide.z.graph.mdx} (100%) rename packages/terra-graphs-docs/src/terra-dev-site/graph/{GettingStarted.a/Introduction.1.graph.mdx => GettingStarted.a.graph.mdx} (100%) create mode 100644 packages/terra-graphs-docs/src/terra-dev-site/graph/LineGraph.c/examples/ReflowDynamicData.jsx create mode 100644 packages/terra-graphs-docs/src/terra-dev-site/graph/LineGraph.c/examples/ReflowDynamicLegend.jsx create mode 100644 packages/terra-graphs-docs/src/terra-dev-site/graph/LineGraph.c/examples/ReflowPanning.jsx create mode 100644 packages/terra-graphs-docs/src/terra-dev-site/graph/LineGraph.c/examples/ReflowPanningTimeseries.jsx create mode 100644 packages/terra-graphs-docs/src/terra-dev-site/graph/LineGraph.c/examples/ReflowPanningWithY2.jsx diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/GettingStarted.a/ContributingGuide.2.graph.mdx b/packages/terra-graphs-docs/src/terra-dev-site/graph/ContributingGuide.z.graph.mdx similarity index 100% rename from packages/terra-graphs-docs/src/terra-dev-site/graph/GettingStarted.a/ContributingGuide.2.graph.mdx rename to packages/terra-graphs-docs/src/terra-dev-site/graph/ContributingGuide.z.graph.mdx diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/GettingStarted.a/Introduction.1.graph.mdx b/packages/terra-graphs-docs/src/terra-dev-site/graph/GettingStarted.a.graph.mdx similarity index 100% rename from packages/terra-graphs-docs/src/terra-dev-site/graph/GettingStarted.a/Introduction.1.graph.mdx rename to packages/terra-graphs-docs/src/terra-dev-site/graph/GettingStarted.a.graph.mdx diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/LineGraph.c/examples/ReflowDynamicData.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/LineGraph.c/examples/ReflowDynamicData.jsx new file mode 100644 index 000000000..e69de29bb diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/LineGraph.c/examples/ReflowDynamicLegend.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/LineGraph.c/examples/ReflowDynamicLegend.jsx new file mode 100644 index 000000000..e69de29bb diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/LineGraph.c/examples/ReflowPanning.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/LineGraph.c/examples/ReflowPanning.jsx new file mode 100644 index 000000000..f3f8d3c8d --- /dev/null +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/LineGraph.c/examples/ReflowPanning.jsx @@ -0,0 +1,124 @@ +import React from 'react'; + +import Button from 'terra-button'; +import { IconLeft, IconRight } from 'terra-icon'; + +import Carbon from '@cerner/carbon-graphs'; + +// import React from 'react'; +// import Button from 'terra-button/lib/Button'; +// import Carbon from '@cerner/carbon-graphs'; +// import utils from '@cerner/carbon-graphs/lib/js/helpers/utils'; +// import '@cerner/terra-graphs-docs/lib/terra-graphs-src/components/Line/LineGraph.module.scss'; +// import ExampleGraphContainer from '@cerner/terra-graphs-docs/lib/terra-dev-site/ExampleGraphContainer/ExampleGraphContainer'; +// import getConfigLineTimeseriesPanning from '@cerner/terra-graphs-docs/lib/example-datasets/graphConfigObjects/Line/lineTimeseriesPanning'; +// import exampleData from '@cerner/terra-graphs-docs/lib/example-datasets/dataObjects/Line/datasetTimeseries1'; + +// graph configuration object + +const graphConfig = { + bindTo: '#line-graph-panning-example', + axis: { + x: { + label: 'x-axis', + lowerLimit: 80, + upperLimit: 280, + rangeRounding: false, // it's helpful to set rangeRounding to false for smoother panning + }, + y: { + 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 state = { + initial: 0, + factor: 3, +}; + +let graph; +const panningFactor = 10; + +const SimpleLinePanningExample = () => { + // let graph = useRef({}); + + const reducer = (panState, action) => { + let newLowerLimit = graph.config.axis.x.lowerLimit; + let newUpperLimit = graph.config.axis.x.upperLimit; + + switch (action.type) { + case 'panLeft': + newLowerLimit = graph.config.axis.x.lowerLimit - panningFactor; + newUpperLimit = graph.config.axis.x.upperLimit - panningFactor; + break; + + case 'panRight': + newLowerLimit = graph.config.axis.x.lowerLimit + panningFactor; + newUpperLimit = graph.config.axis.x.upperLimit + panningFactor; + break; + + default: + return panState; + } + + return { + newLowerLimit, + newUpperLimit, + }; + }; + + const [panState, dispatch] = React.useReducer(reducer, state); + + React.useLayoutEffect(() => { + if (!graph) { return; } + + graph.config.axis.x.lowerLimit = panState.newLowerLimit; + graph.config.axis.x.upperLimit = panState.newUpperLimit; + + graph.reflowMultipleDatasets(); + }, [panState]); + + React.useEffect(() => { + graph = Carbon.api.graph(graphConfig); + graph.loadContent(Carbon.api.line(dataset1)); + }, []); + + return ( + <> +