diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/BasicReflowExample.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/BasicReflowExample.jsx index 4c1db8611..bc86376d5 100644 --- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/BasicReflowExample.jsx +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConcepts.b/examples/reflow/BasicReflowExample.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import Button from 'terra-button'; @@ -21,7 +21,7 @@ const graphConfig = { upperLimit: 20, }, }, - allowCalibration: false, + allowCalibration: true, }; // graph dataset @@ -51,32 +51,44 @@ const dataset1 = { // graph rendering let graph; - const BasicReflowExample = () => { + const [allowCalibrationStatus, SetAllowCalibrationStatus] = useState(graphConfig.allowCalibration.toString()); + React.useEffect(() => { graph = Carbon.api.graph(graphConfig); graph.loadContent(Carbon.api.line(dataset1)); }, []); - const handleClick = () => { - if (!graph) { return; } - - + const handleClickToggleCalibration = () => { + graph.config.allowCalibration = !graph.config.allowCalibration; + SetAllowCalibrationStatus(graph.config.allowCalibration.toString()); - // graph.config.axis.y.lowerLimit = -50; - // graph.config.axis.y.upperLimit = 20; + graph.reflowMultipleDatasets(); + }; - graph.config.axis.y.lowerLimit = -50; + const handleClickUpdateLimits = () => { + graph.config.axis.y.domain.lowerLimit = -52; + graph.config.axis.y.domain.upperLimit = 52; + graph.reflowMultipleDatasets(); + }; - // graph.config.allowCalibration = !graph.config.allowCalibration; + const handleClickReset = () => { + graph.config.axis.y.domain.lowerLimit = 0; + graph.config.axis.y.domain.upperLimit = 20; graph.reflowMultipleDatasets(); }; return ( <> -