From ac6881db34564a5831d6e8151efb9cd46d888f39 Mon Sep 17 00:00:00 2001 From: sdadn Date: Thu, 18 Apr 2024 15:57:10 +0000 Subject: [PATCH] deploy: 3c7ba11455e50b8f46c0502440297a2e7e9dff99 --- ..._terra-dev-site_graph_CoreConcepts_b_Reflow_e_graph_mdx.js | 4 ++-- ...te_test_general_reflow_DynamicallyUpdatingData_test_jsx.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/pull/355/packages_terra-graphs-docs_src_terra-dev-site_graph_CoreConcepts_b_Reflow_e_graph_mdx.js b/pull/355/packages_terra-graphs-docs_src_terra-dev-site_graph_CoreConcepts_b_Reflow_e_graph_mdx.js index e01a725a5..dbfbdb93f 100644 --- a/pull/355/packages_terra-graphs-docs_src_terra-dev-site_graph_CoreConcepts_b_Reflow_e_graph_mdx.js +++ b/pull/355/packages_terra-graphs-docs_src_terra-dev-site_graph_CoreConcepts_b_Reflow_e_graph_mdx.js @@ -35,7 +35,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac \*******************************************************************************************************************************************/ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": function() { return /* binding */ MDXContent; }\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/esm/extends.js\");\n/* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/objectWithoutProperties */ \"./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var _mdx_js_react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mdx-js/react */ \"./node_modules/@mdx-js/react/dist/cjs.js\");\n\n\nvar _excluded = [\"components\"];\n\n\n\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar layoutProps = {};\nvar MDXLayout = \"wrapper\";\nfunction MDXContent(_ref) {\n var components = _ref.components,\n props = (0,_babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_ref, _excluded);\n return (0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(MDXLayout, (0,_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__[\"default\"])({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), (0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(\"pre\", null, (0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"import React, { useState } from 'react';\\nimport * as d3 from'd3-array';\\n\\nimport Button from 'terra-button';\\nimport Carbon from '@cerner/carbon-graphs';\\n\\n// graph configuration object\\n\\nconst graphConfig = {\\n bindTo: '#dynamic-data-update-example',\\n axis: {\\n x: {\\n label: 'x-axis',\\n lowerLimit: 80,\\n upperLimit: 280,\\n rangeRounding: false,\\n },\\n y: {\\n label: 'y-axis',\\n lowerLimit: -5,\\n upperLimit: 20,\\n },\\n },\\n allowCalibration: false,\\n};\\n\\n// graph dataset\\n\\nconst dataset1 = {\\n key: 'uid_1',\\n label: {\\n display: 'Dataset 1',\\n },\\n color: Carbon.helpers.COLORS.PINK,\\n values: [\\n { x: 87, y: -2 },\\n { x: 95, y: 1 },\\n { x: 103, y: -4 },\\n { x: 109, y: -2 },\\n { x: 128, y: 3 },\\n { x: 145, y: 28 },\\n { x: 151, y: 7 },\\n { x: 164, y: 10 },\\n { x: 177, y: 1 },\\n { x: 192, y: 6 },\\n { x: 203, y: -21 },\\n { x: 209, y: -3 },\\n { x: 246, y: 3 },\\n ],\\n};\\n\\n// Updated values for dataset 1\\n// Color, shape & label of the original dataset is retained if it is not updated\\nconst updatedDataset1 = {\\n key: 'uid_1',\\n values: [\\n { x: 81, y: 21 },\\n { x: 107, y: 6 },\\n { x: 109, y: 7 },\\n { x: 118, y: 5 },\\n { x: 117, y: 21 },\\n { x: 127, y: -20 },\\n { x: 137, y: -9 },\\n { x: 141, y: -6 },\\n { x: 144, y: 39 },\\n { x: 151, y: -14 },\\n { x: 156, y: -9 },\\n { x: 163, y: 4 },\\n { x: 164, y: 29 },\\n { x: 170, y: 30 },\\n { x: 172, y: 31 },\\n { x: 176, y: 34 },\\n { x: 185, y: 1 },\\n { x: 191, y: -2 },\\n { x: 193, y: 38 },\\n { x: 198, y: 40 },\\n ],\\n};\\n\\nconst getNewTicks = (currentLower, currentUpper, dataset) => {\\n const maxValue = Math.max(...dataset.values.map(value => value.y), currentUpper);\\n const minValue = Math.min(...dataset.values.map(value => value.y), currentLower);\\n\\n // add padding by using the nice function\\n const [newLower, newUpper] = d3.nice(minValue - 1, maxValue + 1, 10);\\n\\n // get new tick values\\n const ticksCount = 3;\\n const ticks = new Array().concat(d3.ticks(newLower, newUpper, ticksCount), [newLower, newUpper] );\\n\\n console.log(\\\"ticks\\\",ticks);\\n console.log(\\\"current min, max\\\",[minValue, maxValue]);\\n console.log(\\\"new min, max\\\", [newLower, newUpper]);\\n\\n return {\\n newLower,\\n newUpper,\\n ticks,\\n }\\n}\\n\\n// graph rendering\\nlet graph;\\nconst DynamicallyUpdatingDataExample = () => {\\n const [allowCalibrationStatus, SetAllowCalibrationStatus] = useState(graphConfig.allowCalibration.toString());\\n\\n // initial graph load\\n React.useEffect(() => {\\n graph = Carbon.api.graph(graphConfig);\\n graph.loadContent(Carbon.api.line(dataset1));\\n\\n const newTicks = getNewTicks(graph.config.axis.y.upperLimit, graph.config.axis.y.lowerLimit, dataset1);\\n\\n graph.config.axis.y.domain.lowerLimit = newTicks.newLower;\\n graph.config.axis.y.domain.upperLimit = newTicks.newUpper;\\n graph.config.axis.y.ticks.values = newTicks.ticks;\\n\\n graph.reflowMultipleDatasets();\\n\\n console.log(graph.config.axis.y.upperLimit)\\n\\n }, []);\\n\\n const handleClickToggleCalibration = () => {\\n graph.config.allowCalibration = !graph.config.allowCalibration;\\n SetAllowCalibrationStatus(graph.config.allowCalibration.toString());\\n\\n graph.reflowMultipleDatasets();\\n };\\n\\n // dynamically update graph data\\n const handleClickUpdateData = () => {\\n const newTicks = getNewTicks(graph.config.axis.y.lowerLimit, graph.config.axis.y.upperLimit, updatedDataset1);\\n\\n graph.config.axis.y.domain.lowerLimit = newTicks.newLower;\\n graph.config.axis.y.domain.upperLimit = newTicks.newUpper;\\n graph.config.axis.y.ticks.values = newTicks.ticks;\\n\\n graph.reflowMultipleDatasets({\\n panData: [updatedDataset1],\\n });\\n };\\n\\n // reset graph to it's original state\\n const handleClickReset = () => {\\n const newTicks = getNewTicks(graph.config.axis.y.lowerLimit, graph.config.axis.y.upperLimit, dataset1);\\n\\n graph.config.axis.y.domain.lowerLimit = newTicks.newLower;\\n graph.config.axis.y.domain.upperLimit = newTicks.newUpper;\\n graph.config.axis.y.ticks.values = newTicks.ticks;\\n\\n graph.reflowMultipleDatasets({\\n panData: [dataset1],\\n });\\n };\\n\\n return (\\n <>\\n