components-tkob - CodeSandbox

,\n \u002F\u002F },\n \u002F\u002F },\n \u002F\u002F {\n \u002F\u002F plot: [\n \u002F\u002F {\n \u002F\u002F value: 'O2 concentration',\n \u002F\u002F connectnulldata: true,\n \u002F\u002F },\n \u002F\u002F ],\n \u002F\u002F min: '3',\n \u002F\u002F max: '6',\n \u002F\u002F title: 'O₂ Concentration (mg\u002FL)',\n \u002F\u002F format: {\n \u002F\u002F prefix: '

,\n \u002F\u002F },\n \u002F\u002F },\n \u002F\u002F ],\n },\n events: {\n dataPlotRollOver: function (e) {\n setTimeout(function () {\n const getChart = document.getElementById(`chartobject-1`);\n if (getChart) {\n const tooltipData = getChart.getElementsByClassName(\n \"fc__tooltip\"\n );\n\n if (tooltipData && tooltipData.length \u003E 0) {\n for (let index = 0; index \u003C tooltipData.length; index++) {\n const getText = tooltipData[index].textContent;\n \u002F\u002F if (getText.indexOf(\"Anomaly\") !== -1) {\n \u002F\u002F tooltipData[index].style.display = \"none\";\n \u002F\u002F }\n console.log(getText);\n }\n }\n }\n }, 300);\n }\n }\n }\n };\n }\n\n async componentDidMount() {\n await this.onFetchData(sample.trend, sample.schema);\n }\n\n async componentDidUpdate(prevProps) {\n if (this.props.trend !== prevProps.trend) {\n await this.onFetchData(this.props.trend, this.props.schema);\n const setyaxis = await this.setState((prevState) =\u003E ({\n timeseriesDs: {\n \u002F\u002F object that we want to update\n ...prevState.timeseriesDs, \u002F\u002F keep all other key-value pairs\n dataSource: {\n ...prevState.dataSource,\n chart: {\n ...prevState.chart,\n exportAtClientSide: 1,\n decimalSeparator: \",\",\n thousandSeparator: \".\",\n formatNumber: \"0\",\n forceDecimals: \"1\",\n forceYAxisValueDecimals: \"1\",\n forceXAxisValueDecimals: \"1\",\n exportEnabled: 1,\n legendPosition: \"top-right\",\n legendAllowDrag: \"1\",\n paletteColors:\n \"#52c41a,#1890ff,#f5222d,#fa8c16,#FC8181,#F6AD55,#F6E05E,#68D391,#4FD1C5,#63B3ED,#7F9CF5,#B794F4,#F687B3,#F56565,#ED8936,#ECC94B,#48BB78,#38B2AC,#4299E1,#667EEA,#9F7AEA,#ED64A6,#E53E3E,#DD6B20,#D69E2E,#38A169,#319795,#3182CE,#5A67D8,#805AD5,#D53F8C\"\n },\n legend: {\n alignment: \"middle\"\n },\n tooltip: {\n enabled: \"true\",\n toolText:\n \"\u003Cb\u003E$bin\u003C\u002Fb\u003E\u003Cbr\u003E$series.0.plotIdentifier $series.0.name: $series.0.dataValue\u003Cbr\u003E$series.1.plotIdentifier $series.1.name: \u003Cb\u003E$series.1.dataValue\u003C\u002Fb\u003E\"\n },\n\n yaxis: sample.yAxis\n } \u002F\u002F update the value of specific key\n }\n }));\n }\n }\n\n onFetchData(a, b) {\n Promise.all([a, b]).then((res) =\u003E {\n const data = sample.data;\n const schema = sample.schema;\n const fusionTable = new FusionCharts.DataStore().createDataTable(\n data,\n schema\n );\n const timeseriesDs = Object.assign({}, this.state.timeseriesDs);\n timeseriesDs.dataSource.data = fusionTable;\n this.setState({\n timeseriesDs\n });\n });\n }\n\n render() {\n const { timeseriesDs } = this.state;\n return (\n \u003C\u003E\n {timeseriesDs.dataSource.data ? (\n \u003C\u003E\n {this.props.title && (\n \u003C\u003E\n \u003CTypography\n variant=\"subtitle1\"\n color=\"primary\"\n display=\"block\"\n align=\"left\"\n gutterBottom\n className=\"mb-0 mt-10\"\n style={{ lineHeight: 1 }}\n \u003E\n {this.props.title}\n \u003C\u002FTypography\u003E\n \u003CTypography\n variant=\"subtitle2\"\n display=\"block\"\n className=\"mb-2\"\n gutterBottom\n style={{ fontSize: \"11px\" }}\n \u003E\n {this.props.subTitle}\n \u003C\u002FTypography\u003E\n \u003C\u002F\u003E\n )}\n \u003CReactFC {...timeseriesDs} width=\"100%\" height=\"100%\" \u002F\u003E\n \u003C\u002F\u003E\n ) : (\n \"loading\"\n )}\n \u003C\u002F\u003E\n );\n }\n}\n\nexport default MultivariateChart;\n","id":"ad767266-4803-4cd4-900c-bca3145b4b97","is_binary":false,"title":"MultivariateChart.js","sha":null,"inserted_at":"2021-03-03T07:53:00","updated_at":"2021-11-16T01:55:28","upload_id":null,"shortid":"qxY40","source_id":"1112e17c-408e-4770-8c71-17cc4e1b5ea0","directory_shortid":"WKog4"},{"code":"import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport \".\u002Findex.css\";\nimport App from \".\u002FApp\";\nimport * as serviceWorker from \".\u002FserviceWorker\";\n\nReactDOM.render(\u003CApp \u002F\u003E, document.getElementById(\"root\"));\n\n\u002F\u002F If you want your app to work offline and load faster, you can change\n\u002F\u002F unregister() to register() below. Note this comes with some pitfalls.\n\u002F\u002F Learn more about service workers: https:\u002F\u002Fbit.ly\u002FCRA-PWA\nserviceWorker.unregister();\n","id":"7fd5f866-aef3-4c50-b9b5-b179ab3dc998","is_binary":false,"title":"index.js","sha":null,"inserted_at":"2021-12-28T15:08:49","updated_at":"2021-12-28T15:13:24","upload_id":null,"shortid":"EBKwk","source_id":"1112e17c-408e-4770-8c71-17cc4e1b5ea0","directory_shortid":"GXOoy"},{"code":"\u002F\u002F This optional code is used to register a service worker.\n\u002F\u002F register() is not called by default.\n\n\u002F\u002F This lets the app load faster on subsequent visits in production, and gives\n\u002F\u002F it offline capabilities. However, it also means that developers (and users)\n\u002F\u002F will only see deployed updates on subsequent visits to a page, after all the\n\u002F\u002F existing tabs open on the page have been closed, since previously cached\n\u002F\u002F resources are updated in the background.\n\n\u002F\u002F To learn more about the benefits of this model and instructions on how to\n\u002F\u002F opt-in, read https:\u002F\u002Fbit.ly\u002FCRA-PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === \"localhost\" ||\n \u002F\u002F [::1] is the IPv6 localhost address.\n window.location.hostname === \"[::1]\" ||\n \u002F\u002F 127.0.0.1\u002F8 is considered localhost for IPv4.\n window.location.hostname.match(\n \u002F^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$\u002F\n )\n);\n\nexport function register(config) {\n if (process.env.NODE_ENV === \"production\" && \"serviceWorker\" in navigator) {\n \u002F\u002F The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n if (publicUrl.origin !== window.location.origin) {\n \u002F\u002F Our service worker won't work if PUBLIC_URL is on a different origin\n \u002F\u002F from what our page is served on. This might happen if a CDN is used to\n \u002F\u002F serve assets; see https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fcreate-react-app\u002Fissues\u002F2374\n return;\n }\n\n window.addEventListener(\"load\", () =\u003E {\n const swUrl = `${process.env.PUBLIC_URL}\u002Fservice-worker.js`;\n\n if (isLocalhost) {\n \u002F\u002F This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n \u002F\u002F Add some additional logging to localhost, pointing developers to the\n \u002F\u002F service worker\u002FPWA documentation.\n navigator.serviceWorker.ready.then(() =\u003E {\n console.log(\n \"This web app is being served cache-first by a service \" +\n \"worker. To learn more, visit https:\u002F\u002Fbit.ly\u002FCRA-PWA\"\n );\n });\n } else {\n \u002F\u002F Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl, config) {\n navigator.serviceWorker\n .register(swUrl)\n .then((registration) =\u003E {\n registration.onupdatefound = () =\u003E {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () =\u003E {\n if (installingWorker.state === \"installed\") {\n if (navigator.serviceWorker.controller) {\n \u002F\u002F At this point, the updated precached content has been fetched,\n \u002F\u002F but the previous service worker will still serve the older\n \u002F\u002F content until all client tabs are closed.\n console.log(\n \"New content is available and will be used when all \" +\n \"tabs for this page are closed. See https:\u002F\u002Fbit.ly\u002FCRA-PWA.\"\n );\n\n \u002F\u002F Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n \u002F\u002F At this point, everything has been precached.\n \u002F\u002F It's the perfect time to display a\n \u002F\u002F \"Content is cached for offline use.\" message.\n console.log(\"Content is cached for offline use.\");\n\n \u002F\u002F Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch((error) =\u003E {\n console.error(\"Error during service worker registration:\", error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n \u002F\u002F Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl)\n .then((response) =\u003E {\n \u002F\u002F Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get(\"content-type\");\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf(\"javascript\") === -1)\n ) {\n \u002F\u002F No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then((registration) =\u003E {\n registration.unregister().then(() =\u003E {\n window.location.reload();\n });\n });\n } else {\n \u002F\u002F Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() =\u003E {\n console.log(\n \"No internet connection found. App is running in offline mode.\"\n );\n });\n}\n\nexport function unregister() {\n if (\"serviceWorker\" in navigator) {\n navigator.serviceWorker.ready.then((registration) =\u003E {\n registration.unregister();\n });\n }\n}\n","id":"2aab43cc-69c8-4c43-8140-85f94385cb70","is_binary":false,"title":"serviceWorker.js","sha":null,"inserted_at":"2021-12-28T15:10:39","updated_at":"2021-12-28T15:11:28","upload_id":null,"shortid":"1Qj6R","source_id":"1112e17c-408e-4770-8c71-17cc4e1b5ea0","directory_shortid":"GXOoy"},{"code":".App {\n text-align: center;\n}\n\n.App-logo {\n animation: App-logo-spin infinite 20s linear;\n height: 40vmin;\n pointer-events: none;\n}\n\n.App-header {\n background-color: #282c34;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: calc(10px + 2vmin);\n color: white;\n}\n\n.App-link {\n color: #61dafb;\n}\n\n@keyframes App-logo-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n","id":"d4d50e68-f325-4e57-8bf7-daf1c90fd47a","is_binary":false,"title":"index.css","sha":null,"inserted_at":"2021-12-28T15:09:42","updated_at":"2021-12-28T15:09:45","upload_id":null,"shortid":"6j2rn","source_id":"1112e17c-408e-4770-8c71-17cc4e1b5ea0","directory_shortid":"GXOoy"},{"code":"","id":"62b7ee38-55d6-42fc-b42b-78ada1c22863","is_binary":false,"title":"index.js","sha":null,"inserted_at":"2021-12-28T15:09:55","updated_at":"2021-12-28T15:09:55","upload_id":null,"shortid":"HyiTdiujt","source_id":"1112e17c-408e-4770-8c71-17cc4e1b5ea0","directory_shortid":null},{"code":"import React, { useRef } from \"react\";\nimport { Editor } from \"@tinymce\u002Ftinymce-react\";\n\nexport default function HtmlEditor() {\n const editorRef = useRef(null);\n const log = () =\u003E {\n if (editorRef.current) {\n console.log(editorRef.current.getContent());\n }\n };\n return (\n \u003C\u003E\n \u003CEditor\n apiKey=\"g2u67qa1sji9b2bggoumnusvio51i5zykxzx0povup1iz9ej\"\n onInit={(evt, editor) =\u003E (editorRef.current = editor)}\n initialValue=\"\u003Cp\u003EThis is the initial content of the editor.\u003C\u002Fp\u003E\n \u003Cp\u003Ethis is a great HTML Editor.\u003Cbr \u002F\u003EFast and work great as hell than ckedtor as shit\u003C\u002Fp\u003E\n \u003Cp\u003E \u003C\u002Fp\u003E\n \u003Cp\u003Ethis is a healthy component than a foolish component.\u003Cbr \u002F\u003EThis plugin has been known for ages.\u003C\u002Fp\u003E \"\n init={{\n height: 500,\n menubar: false,\n plugins: [\n \"advlist autolink lists link image charmap print preview anchor\",\n \"searchreplace visualblocks code fullscreen\",\n \"insertdatetime media table paste code help wordcount\"\n ],\n toolbar:\n \"undo redo | formatselect | \" +\n \"bold italic backcolor | alignleft aligncenter \" +\n \"alignright alignjustify | bullist numlist outdent indent | \" +\n \"removeformat | help\",\n content_style:\n \"body { font-family:Helvetica,Arial,sans-serif; font-size:14px }\"\n }}\n \u002F\u003E\n \u003Cbutton onClick={log}\u003ELog editor content\u003C\u002Fbutton\u003E\n \u003C\u002F\u003E\n );\n}\n","id":"5f1f58d0-ade2-4fe9-8190-e1f38dd1a1ea","is_binary":false,"title":"HtmlEditor.js","sha":null,"inserted_at":"2021-12-27T07:53:47","updated_at":"2021-12-28T16:33:23","upload_id":null,"shortid":"Wpx3J","source_id":"1112e17c-408e-4770-8c71-17cc4e1b5ea0","directory_shortid":"WKog4"},{"code":"{\n \"name\": \"thekingofbandit\",\n \"description\": \"\",\n \"version\": \"0.0.9\",\n \"keywords\": [],\n \"dependencies\": {\n \"@babel\u002Fcore\": \"7.2.2\",\n \"@babel\u002Fplugin-transform-react-jsx\": \"^7.3.0\",\n \"@babel\u002Fplugin-transform-react-jsx-self\": \"^7.2.0\",\n \"@material-ui\u002Fcore\": \"4.12.3\",\n \"@material-ui\u002Ficons\": \"4.2.1\",\n \"@material-ui\u002Fstyles\": \"4.10.0\",\n \"@material-ui\u002Futils\": \"4.10.2\",\n \"@svgr\u002Fwebpack\": \"4.1.0\",\n \"@tinymce\u002Ftinymce-react\": \"3.13.0\",\n \"babel-core\": \"7.0.0-bridge.0\",\n \"babel-eslint\": \"9.0.0\",\n \"babel-jest\": \"23.6.0\",\n \"babel-loader\": \"8.0.5\",\n \"babel-plugin-named-asset-import\": \"^0.3.1\",\n \"babel-plugin-transform-react-jsx-self\": \"6.22.0\",\n \"babel-preset-react-app\": \"^7.0.2\",\n \"bfj\": \"6.1.1\",\n \"case-sensitive-paths-webpack-plugin\": \"2.2.0\",\n \"css-loader\": \"1.0.0\",\n \"dotenv\": \"6.0.0\",\n \"dotenv-expand\": \"4.2.0\",\n \"eslint\": \"5.12.0\",\n \"eslint-config-react-app\": \"^3.0.8\",\n \"eslint-loader\": \"2.1.1\",\n \"eslint-plugin-flowtype\": \"2.50.1\",\n \"eslint-plugin-import\": \"2.14.0\",\n \"eslint-plugin-jsx-a11y\": \"6.1.2\",\n \"eslint-plugin-react\": \"7.12.4\",\n \"faker\": \"5.1.0\",\n \"file-loader\": \"2.0.0\",\n \"formik\": \"2.1.5\",\n \"fs-extra\": \"7.0.1\",\n \"fusioncharts\": \"3.18.0\",\n \"gojs\": \"2.1.37\",\n \"gojs-react\": \"1.0.10\",\n \"html-webpack-plugin\": \"4.0.0-alpha.2\",\n \"identity-obj-proxy\": \"3.0.0\",\n \"immer\": \"9.0.1\",\n \"jest\": \"23.6.0\",\n \"jest-pnp-resolver\": \"1.0.2\",\n \"jest-resolve\": \"23.6.0\",\n \"jest-watch-typeahead\": \"^0.2.1\",\n \"jszip\": \"2.4.0\",\n \"lodash\": \"4.17.21\",\n \"mini-css-extract-plugin\": \"0.5.0\",\n \"moment\": \"2.29.1\",\n \"namor\": \"2.0.3\",\n \"node-fetch\": \"2.6.1\",\n \"npm\": \"8.3.0\",\n \"optimize-css-assets-webpack-plugin\": \"5.0.1\",\n \"pnp-webpack-plugin\": \"1.2.1\",\n \"postcss-flexbugs-fixes\": \"4.1.0\",\n \"postcss-loader\": \"3.0.0\",\n \"postcss-preset-env\": \"6.5.0\",\n \"postcss-safe-parser\": \"4.0.1\",\n \"raw-loader\": \"^2.0.0\",\n \"react\": \"16.8.3\",\n \"react-accessible-accordion\": \"3.3.4\",\n \"react-app-polyfill\": \"^0.2.2\",\n \"react-checkbox-tree-enhanced\": \"1.5.15\",\n \"react-csv\": \"2.0.3\",\n \"react-dev-utils\": \"^8.0.0\",\n \"react-dom\": \"^16.8.6\",\n \"react-export-excel\": \"0.5.3\",\n \"react-fusioncharts\": \"3.1.2\",\n \"react-inlinesvg\": \"2.3.0\",\n \"react-json-view\": \"1.19.1\",\n \"react-number-format\": \"4.5.1\",\n \"react-redux\": \"7.2.0\",\n \"react-router-dom\": \"5.2.0\",\n \"react-select\": \"3.1.1\",\n \"react-svg-pan-zoom\": \"3.10.0\",\n \"redux\": \"4.0.5\",\n \"resolve\": \"1.10.0\",\n \"sass-loader\": \"7.1.0\",\n \"semantic-ui-css\": \"2.4.1\",\n \"semantic-ui-react\": \"1.2.1\",\n \"stream-browserify\": \"3.0.0\",\n \"style-loader\": \"0.23.1\",\n \"svg-pan-zoom\": \"3.6.1\",\n \"terser-webpack-plugin\": \"1.2.2\",\n \"tinymce\": \"5.10.2\",\n \"url-loader\": \"1.1.2\",\n \"webpack\": \"4.28.3\",\n \"webpack-dev-server\": \"3.1.14\",\n \"webpack-manifest-plugin\": \"2.0.4\",\n \"workbox-webpack-plugin\": \"3.6.3\",\n \"xlsx\": \"0.8.8\"\n },\n \"devDependencies\": {\n \"react-scripts\": \"2.0.4\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test --env=jsdom\",\n \"eject\": \"react-scripts eject\"\n }\n}","id":"bebaa43c-17c5-4212-aac3-5893b0613804","is_binary":false,"title":"package.json","sha":null,"inserted_at":"2020-09-11T02:41:00","updated_at":"2021-12-28T17:00:08","upload_id":null,"shortid":"ZGQK6","source_id":"1112e17c-408e-4770-8c71-17cc4e1b5ea0","directory_shortid":null},{"code":"\u002F\u002F this demo is using TyniMCE with self-hosted files\nimport React, { useState } from \"react\";\nimport \"tinymce\u002Ftinymce\";\nimport \"tinymce\u002Ficons\u002Fdefault\";\nimport \"tinymce\u002Fthemes\u002Fsilver\";\nimport \"tinymce\u002Fplugins\u002Fpaste\";\nimport \"tinymce\u002Fplugins\u002Flink\";\nimport \"tinymce\u002Fplugins\u002Fimage\";\nimport \"tinymce\u002Fplugins\u002Ftable\";\nimport \"tinymce\u002Fskins\u002Fui\u002Foxide\u002Fskin.min.css\";\nimport \"tinymce\u002Fskins\u002Fui\u002Foxide\u002Fcontent.min.css\";\nimport \"tinymce\u002Fskins\u002Fcontent\u002Fdefault\u002Fcontent.min.css\";\nimport { Editor } from \"@tinymce\u002Ftinymce-react\";\n\nconst TinyMCE = () =\u003E {\n const [contentEditor, setContentEditor] = useState();\n const handleEditorChange = (content, editor) =\u003E {\n console.log(\"Content was updated:\", content);\n setContentEditor(content);\n };\n\n return (\n \u003CEditor\n initialValue=\"\u003Cp\u003Ebecause tineyMCE is 1 million times better than this shit\u003C\u002Fp\u003E \"\n init={{\n skin: false,\n content_css: false,\n height: 500,\n menubar: false,\n plugins: [\"link image\", \"table paste\"],\n toolbar:\n \"undo redo | formatselect | bold italic backcolor | \\\n alignleft aligncenter alignright alignjustify | \\\n bullist numlist outdent indent | removeformat | help\"\n }}\n value={contentEditor}\n onEditorChange={(e) =\u003E handleEditorChange(e)}\n \u002F\u003E\n );\n};\n\nexport default TinyMCE;\n","id":"b6c0db15-6845-4318-84b5-854340c1aa28","is_binary":false,"title":"TinyMCE.js","sha":null,"inserted_at":"2021-12-28T17:00:43","updated_at":"2021-12-28T17:12:06","upload_id":null,"shortid":"n8mEE","source_id":"1112e17c-408e-4770-8c71-17cc4e1b5ea0","directory_shortid":"WKog4"},{"code":"import React from \"react\";\nimport { BrowserRouter as Router, Switch, Route, Link } from \"react-router-dom\";\nimport { Grid, Segment, Menu, Button } from \"semantic-ui-react\";\nimport \"semantic-ui-css\u002Fsemantic.min.css\";\nimport \".\u002Fassets\u002Fcss\u002Fstyle.css\";\nimport Dashboard from \".\u002Fcomponents\u002FDashboard\";\nimport { BarChart } from \".\u002Fcomponents\u002FBarChart\";\nimport { DualAxisChart } from \".\u002Fcomponents\u002FDualAxisChart\";\nimport { MultiSeries } from \".\u002Fcomponents\u002FMultiSeries\";\nimport { TimseriesFushionChart } from \".\u002Fcomponents\u002FTimseriesFushionChart\";\nimport { CheckboxExample } from \".\u002Fcomponents\u002FCheckboxExample\";\nimport { CheckboxSUI } from \".\u002Fcomponents\u002FCheckboxSUI\";\nimport Treegator from \".\u002Fcomponents\u002FTreegator\";\nimport ExpandedTree from \".\u002Fcomponents\u002FExpandedTree\";\nimport ReactSelect from \".\u002Fcomponents\u002FReactSelect\";\nimport ScatterChart from \".\u002Fcomponents\u002FScatterChart\";\nimport CharTimeDualAxis from \".\u002Fcomponents\u002FChartTimeDualAxis\";\nimport MultivariateChart from \".\u002Fcomponents\u002FMultivariateChart\";\nimport Gojs from \".\u002Fcomponents\u002FGojs\";\nimport InlineSvg from \".\u002Fcomponents\u002FInlineSvg\";\nimport ExcelExport from \".\u002Fcomponents\u002FExcelExport\";\nimport HtmlEditor from \".\u002Fcomponents\u002FHtmlEditor\";\nimport TinyMCE from \".\u002Fcomponents\u002FTinyMCE\";\nimport WeightForm from \".\u002Fcomponents\u002FWeightForm\";\n\nfunction App() {\n return (\n \u003CRouter\u003E\n \u003CGrid width={16} padded\u003E\n \u003CGrid.Row className=\"h-10\"\u003E\n \u003CMenu className={\"scroll-vertical\"} secondary\u003E\n \u003CMenu.Item\u003E\n \u003CLink to=\"\u002FWeightForm\"\u003E\n \u003CButton primary inverted\u003E\n Calculator\n \u003C\u002FButton\u003E\n \u003C\u002FLink\u003E\n \u003C\u002FMenu.Item\u003E\n \u003CMenu.Item\u003E\n \u003CLink to=\"\u002FTinyMCE\"\u003E\n \u003CButton primary inverted\u003E\n TinyMCE\n \u003C\u002FButton\u003E\n \u003C\u002FLink\u003E\n \u003C\u002FMenu.Item\u003E\n \u003CMenu.Item\u003E\n \u003CLink to=\"\u002FHtmlEditor\"\u003E\n \u003CButton primary inverted\u003E\n HtmlEditor\n \u003C\u002FButton\u003E\n \u003C\u002FLink\u003E\n \u003C\u002FMenu.Item\u003E\n \u003CMenu.Item\u003E\n \u003CLink to=\"\u002FExcelExport\"\u003E\n \u003CButton primary inverted\u003E\n ExcelExport\n \u003C\u002FButton\u003E\n \u003C\u002FLink\u003E\n \u003C\u002FMenu.Item\u003E\n \u003CMenu.Item\u003E\n \u003CLink to=\"\u002FInlineSvg\"\u003E\n \u003CButton primary inverted\u003E\n InlineSvg\n \u003C\u002FButton\u003E\n \u003C\u002FLink\u003E\n \u003C\u002FMenu.Item\u003E\n\n \u003CMenu.Item\u003E\n \u003CLink to=\"\u002FMultivariateChart\"\u003E\n \u003CButton primary inverted\u003E\n MultivariateChart\n \u003C\u002FButton\u003E\n \u003C\u002FLink\u003E\n \u003C\u002FMenu.Item\u003E\n \u003CMenu.Item\u003E\n \u003CLink to=\"\u002FGoJs\"\u003E\n \u003CButton primary inverted\u003E\n GoJS\n \u003C\u002FButton\u003E\n \u003C\u002FLink\u003E\n \u003C\u002FMenu.Item\u003E\n \u003CMenu.Item\u003E\n \u003CLink to=\"\u002FCharTimeDualAxis\"\u003E\n \u003CButton primary inverted\u003E\n Char Time Dual Y-Axis\n \u003C\u002FButton\u003E\n \u003C\u002FLink\u003E\n \u003C\u002FMenu.Item\u003E\n \u003CMenu.Item\u003E\n \u003CLink to=\"\u002FScatter-Chart\"\u003E\n \u003CButton primary inverted\u003E\n Scatter Chart\n \u003C\u002FButton\u003E\n \u003C\u002FLink\u003E\n \u003C\u002FMenu.Item\u003E\n \u003CMenu.Item\u003E\n \u003CLink to=\"\u002FSimple-Bar-Chart\"\u003E\n \u003CButton primary inverted\u003E\n Bar Chart\n \u003C\u002FButton\u003E\n \u003C\u002FLink\u003E\n \u003C\u002FMenu.Item\u003E\n \u003CMenu.Item\u003E\n \u003CLink to=\"\u002FDual-Axis-Chart\"\u003E\n \u003CButton secondary inverted\u003E\n Dual Axis\n \u003C\u002FButton\u003E\n \u003C\u002FLink\u003E\n \u003C\u002FMenu.Item\u003E\n \u003CMenu.Item\u003E\n \u003CLink to=\"\u002FMultiple-Line-Chart\"\u003E\n \u003CButton color=\"red\" inverted\u003E\n Multiple Series\n \u003C\u002FButton\u003E\n \u003C\u002FLink\u003E\n \u003C\u002FMenu.Item\u003E\n \u003CMenu.Item\u003E\n \u003CLink to=\"\u002FTime-Series-Chart\"\u003E\n \u003CButton color=\"green\" inverted\u003E\n Time Series Chart\n \u003C\u002FButton\u003E\n \u003C\u002FLink\u003E\n \u003C\u002FMenu.Item\u003E\n \u003CMenu.Item\u003E\n \u003CLink to=\"\u002FCheckbox-Example\"\u003E\n \u003CButton color=\"green\" inverted\u003E\n Checkbox Formic\n \u003C\u002FButton\u003E\n \u003C\u002FLink\u003E\n \u003C\u002FMenu.Item\u003E\n \u003CMenu.Item\u003E\n \u003CLink to=\"\u002FCheckboxSUI\"\u003E\n \u003CButton color=\"green\" inverted\u003E\n Checkbox SUI\n \u003C\u002FButton\u003E\n \u003C\u002FLink\u003E\n \u003C\u002FMenu.Item\u003E\n \u003CMenu.Item\u003E\n \u003CLink to=\"\u002FDashboard\"\u003E\n \u003CButton color=\"green\" inverted\u003E\n Dashboard\n \u003C\u002FButton\u003E\n \u003C\u002FLink\u003E\n \u003C\u002FMenu.Item\u003E\n \u003CMenu.Item\u003E\n \u003CLink to=\"\u002FTreegator\"\u003E\n \u003CButton color=\"green\" inverted\u003E\n Treegator\n \u003C\u002FButton\u003E\n \u003C\u002FLink\u003E\n \u003C\u002FMenu.Item\u003E\n \u003CMenu.Item\u003E\n \u003CLink to=\"\u002FExpandedTree\"\u003E\n \u003CButton color=\"green\" inverted\u003E\n ExpandedTree\n \u003C\u002FButton\u003E\n \u003C\u002FLink\u003E\n \u003C\u002FMenu.Item\u003E\n \u003CMenu.Item\u003E\n \u003CLink to=\"\u002FReactSelect\"\u003E\n \u003CButton color=\"green\" inverted\u003E\n React Select\n \u003C\u002FButton\u003E\n \u003C\u002FLink\u003E\n \u003C\u002FMenu.Item\u003E\n \u003CMenu.Item\u003E\n \u003CButton disabled inverted\u003E\n Coming Soon\n \u003C\u002FButton\u003E\n \u003C\u002FMenu.Item\u003E\n \u003CMenu.Item\u003E\n \u003CButton disabled inverted\u003E\n Coming Soon\n \u003C\u002FButton\u003E\n \u003C\u002FMenu.Item\u003E\n \u003CMenu.Item\u003E\n \u003CButton disabled inverted\u003E\n Coming Soon\n \u003C\u002FButton\u003E\n \u003C\u002FMenu.Item\u003E\n \u003CMenu.Item\u003E\n \u003CButton disabled inverted\u003E\n Coming Soon\n \u003C\u002FButton\u003E\n \u003C\u002FMenu.Item\u003E\n \u003CMenu.Item\u003E\n \u003CButton disabled inverted\u003E\n Coming Soon\n \u003C\u002FButton\u003E\n \u003C\u002FMenu.Item\u003E\n \u003CMenu.Item\u003E\n \u003CButton disabled inverted\u003E\n Coming Soon\n \u003C\u002FButton\u003E\n \u003C\u002FMenu.Item\u003E\n \u003CMenu.Item\u003E\n \u003CButton disabled inverted\u003E\n Coming Soon\n \u003C\u002FButton\u003E\n \u003C\u002FMenu.Item\u003E\n \u003CMenu.Item\u003E\n \u003CButton disabled inverted\u003E\n Coming Soon\n \u003C\u002FButton\u003E\n \u003C\u002FMenu.Item\u003E\n \u003CMenu.Item\u003E\n \u003CButton disabled inverted\u003E\n Coming Soon\n \u003C\u002FButton\u003E\n \u003C\u002FMenu.Item\u003E\n \u003CMenu.Item\u003E\n \u003CButton disabled inverted\u003E\n Coming Soon\n \u003C\u002FButton\u003E\n \u003C\u002FMenu.Item\u003E\n \u003CMenu.Item\u003E\n \u003CButton disabled inverted\u003E\n Coming Soon\n \u003C\u002FButton\u003E\n \u003C\u002FMenu.Item\u003E\n \u003C\u002FMenu\u003E\n \u003C\u002FGrid.Row\u003E\n {\u002F* \u003CGrid.Row \u003E\n \u003CGrid.Column\u003E\n \u003CSegment\u003E *\u002F}\n {\u002F*\n A \u003CSwitch\u003E looks through all its children \u003CRoute\u003E\n elements and renders the first one whose path\n matches the current URL. Use a \u003CSwitch\u003E any time\n you have multiple routes, but you want only one\n of them to render at a time\n *\u002F}\n {\u002F* \u003C\u002FSegment\u003E\n \u003C\u002FGrid.Column\u003E\n \u003C\u002FGrid.Row\u003E *\u002F}\n \u003C\u002FGrid\u003E\n \u003CSwitch\u003E\n \u003CRoute exact path=\"\u002FWeightForm\"\u003E\n \u003CWeightForm \u002F\u003E\n \u003C\u002FRoute\u003E\n \u003CRoute exact path=\"\u002FTinyMCE\"\u003E\n \u003CTinyMCE \u002F\u003E\n \u003C\u002FRoute\u003E\n \u003CRoute exact path=\"\u002FHtmlEditor\"\u003E\n \u003CHtmlEditor \u002F\u003E\n \u003C\u002FRoute\u003E\n \u003CRoute exact path=\"\u002FExcelExport\"\u003E\n \u003CExcelExport \u002F\u003E\n \u003C\u002FRoute\u003E\n \u003CRoute exact path=\"\u002FInlineSvg\"\u003E\n \u003CInlineSvg \u002F\u003E\n \u003C\u002FRoute\u003E\n\n \u003CRoute exact path=\"\u002FMultivariateChart\"\u003E\n \u003CMultivariateChart \u002F\u003E\n \u003C\u002FRoute\u003E\n \u003CRoute exact path=\"\u002FGojs\"\u003E\n \u003CGojs \u002F\u003E\n \u003C\u002FRoute\u003E\n \u003CRoute exact path=\"\u002FCharTimeDualAxis\"\u003E\n \u003CCharTimeDualAxis \u002F\u003E\n \u003C\u002FRoute\u003E\n \u003CRoute exact path=\"\u002FScatter-Chart\"\u003E\n \u003CScatterChart \u002F\u003E\n \u003C\u002FRoute\u003E\n \u003CRoute exact path=\"\u002FDashboard\"\u003E\n \u003CDashboard \u002F\u003E\n \u003C\u002FRoute\u003E\n \u003CRoute exact path=\"\u002FSimple-Bar-Chart\"\u003E\n \u003CSegment className=\"h-80\"\u003E\n \u003CBarChart \u002F\u003E\n \u003C\u002FSegment\u003E\n \u003C\u002FRoute\u003E\n \u003CRoute path=\"\u002FDual-Axis-Chart\"\u003E\n \u003CSegment className=\"h-80\"\u003E\n \u003CDualAxisChart \u002F\u003E\n \u003C\u002FSegment\u003E\n \u003C\u002FRoute\u003E\n \u003CRoute path=\"\u002FMultiple-Line-Chart\"\u003E\n \u003CSegment className=\"h-80\"\u003E\n \u003CMultiSeries \u002F\u003E\n \u003C\u002FSegment\u003E\n \u003C\u002FRoute\u003E\n \u003CRoute path=\"\u002FTime-Series-Chart\"\u003E\n \u003CSegment className=\"h-80\"\u003E\n \u003CTimseriesFushionChart \u002F\u003E\n \u003C\u002FSegment\u003E\n \u003C\u002FRoute\u003E\n \u003CRoute path=\"\u002FCheckbox-Example\"\u003E\n \u003CSegment\u003E\n \u003CCheckboxExample \u002F\u003E\n \u003C\u002FSegment\u003E\n \u003C\u002FRoute\u003E\n \u003CRoute path=\"\u002FCheckboxSUI\"\u003E\n \u003CSegment\u003E\n \u003CCheckboxSUI \u002F\u003E\n \u003C\u002FSegment\u003E\n \u003C\u002FRoute\u003E\n \u003CRoute path=\"\u002FTreegator\"\u003E\n \u003CSegment\u003E\n \u003CTreegator \u002F\u003E\n \u003C\u002FSegment\u003E\n \u003C\u002FRoute\u003E\n \u003CRoute path=\"\u002FExpandedTree\"\u003E\n \u003CSegment\u003E\n \u003CExpandedTree \u002F\u003E\n \u003C\u002FSegment\u003E\n \u003C\u002FRoute\u003E\n \u003CRoute path=\"\u002FReactSelect\"\u003E\n \u003CSegment\u003E\n \u003CReactSelect \u002F\u003E\n \u003C\u002FSegment\u003E\n \u003C\u002FRoute\u003E\n \u003C\u002FSwitch\u003E\n \u003C\u002FRouter\u003E\n );\n}\n\nexport default App;\n","id":"2e557e27-be61-4879-a719-7107f3cc2a47","is_binary":false,"title":"App.js","sha":null,"inserted_at":"2020-09-11T02:41:00","updated_at":"2022-04-28T10:25:12","upload_id":null,"shortid":"5QyoA","source_id":"1112e17c-408e-4770-8c71-17cc4e1b5ea0","directory_shortid":"GXOoy"},{"code":"import React from \"react\";\n\ntype NumberFieldProps\u003CValue extends number | undefined\u003E = {\n value?: Value;\n onChange?: (newVal: Value) =\u003E void;\n};\n\nfunction NumberField\u003CValue extends number | undefined\u003E({\n value,\n onChange\n}: NumberFieldProps\u003CValue\u003E) {\n return (\n \u003Cinput\n type=\"number\"\n value={value}\n onChange={(e) =\u003E {\n const number = parseFloat(e.target.value) as Value;\n onChange?.(number);\n }}\n \u002F\u003E\n );\n}\n\ntype Option = {\n id: string;\n label: string;\n};\n\ntype SelectFieldProps\u003CTOption extends Option\u003E = {\n options: Readonly\u003CTOption[]\u003E;\n value?: TOption[\"id\"];\n onChange?: (change: TOption[\"id\"]) =\u003E void | undefined;\n};\n\nfunction SelectField\u003CTOption extends Option\u003E({\n options,\n value,\n onChange\n}: SelectFieldProps\u003CTOption\u003E) {\n const optionsSet = React.useMemo(() =\u003E new Set(options.map((o) =\u003E o.id)), [\n options\n ]);\n\n function isOptionId(id: string): id is TOption[\"id\"] {\n return optionsSet.has(id);\n }\n\n return (\n \u003Cselect\n value={value}\n onChange={(e) =\u003E {\n if (!isOptionId(e.target.value)) return;\n\n onChange?.(e.target.value);\n }}\n \u003E\n {options.map((option) =\u003E (\n \u003Coption value={option.id}\u003E{option.label}\u003C\u002Foption\u003E\n ))}\n \u003C\u002Fselect\u003E\n );\n}\n\nenum Units {\n Pound = \"pound\",\n Kilogram = \"kilogram\",\n Gram = \"gram\"\n}\n\nconst options = [\n { id: Units.Pound, label: \"lbs\" },\n { id: Units.Kilogram, label: \"kgs\" }\n] as const;\n\nclass MeasurementUnit\u003CUnit extends Units\u003E {\n constructor(unit: Unit) {\n this.unit = unit;\n }\n private unit: Unit;\n}\ntype Measurement\u003CUnit extends Units\u003E = number & MeasurementUnit\u003CT\u003E;\n\ntype Grams = Measurement\u003CUnits.Gram\u003E;\n\nconst ToGrams = {\n kilogram: (val) =\u003E val \u002F 1000,\n pound: (val) =\u003E val * 453.593,\n gram: (val) =\u003E val\n} as { [key in Units]: (val: number) =\u003E Grams };\n\nconst FromGrams = {\n kilogram: (val) =\u003E val * 1000,\n pound: (val) =\u003E val \u002F 453.593,\n gram: (val) =\u003E val\n} as { [key in Units]: (val: Grams) =\u003E Measurement\u003Ckey\u003E };\n\nfunction convert\u003CTo extends Units\u003E(\n curBase: Units,\n newBase: To,\n value?: number\n) {\n if (value) {\n const grams = ToGrams[curBase](value);\n return FromGrams[newBase](grams);\n }\n return undefined;\n}\n\ntype SingleFormValue\u003CUnit extends Units\u003E = {\n amount?: Measurement\u003CUnit\u003E;\n unit: Unit;\n};\n\ntype ValidFormValue\u003CUnit\u003E = Unit extends Units ? SingleFormValue\u003CUnit\u003E : never;\n\ntype OptionIds = typeof options[number][\"id\"];\n\ntype FormValue = ValidFormValue\u003COptionIds\u003E;\n\nfunction WeightForm() {\n const [formVal, setFormVal] = React.useState\u003CFormValue\u003E({\n unit: Units.Pound\n });\n\n function onChangeAmount(newVal: typeof formVal[\"amount\"]) {\n setFormVal((curFormVal) =\u003E {\n const isValidUpdate = (\n formVal: SingleFormValue\u003COptionIds\u003E\n ): formVal is FormValue =\u003E typeof formVal.amount === \"number\";\n\n const update = {\n ...curFormVal,\n unit: curFormVal.unit,\n amount: newVal\n };\n\n if (isValidUpdate(update)) {\n return update;\n }\n\n return curFormVal;\n });\n }\n\n function onChangeUnit(newVal: FormValue[\"unit\"]) {\n setFormVal((curFormVal) =\u003E {\n function buildUpdate\u003CUnit extends FormValue[\"unit\"]\u003E(unit: Unit) {\n return {\n ...curFormVal,\n unit,\n amount: convert(curFormVal.unit, unit, curFormVal.amount)\n };\n }\n\n switch (newVal) {\n case Units.Kilogram:\n return buildUpdate(newVal);\n case Units.Pound:\n return buildUpdate(newVal);\n }\n });\n }\n\n return (\n \u003Cdiv\u003E\n \u003CNumberField value={formVal.amount} onChange={onChangeAmount} \u002F\u003E\n \u003CSelectField\n options={options}\n value={formVal.unit}\n onChange={onChangeUnit}\n \u002F\u003E\n \u003C\u002Fdiv\u003E\n );\n}\n\nexport default WeightForm;\n","id":"e5d409df-751f-4afc-b306-ffb799c343b9","is_binary":false,"title":"index.tsx","sha":null,"inserted_at":"2022-04-28T10:18:57","updated_at":"2022-04-28T10:25:19","upload_id":null,"shortid":"A86G1","source_id":"1112e17c-408e-4770-8c71-17cc4e1b5ea0","directory_shortid":"R0r7R"},{"code":"import React from \"react\";\nimport FusionCharts from \"fusioncharts\";\nimport TimeSeries from \"fusioncharts\u002Ffusioncharts.timeseries\";\nimport ReactFC from \"react-fusioncharts\";\nimport CandyTheme from \"fusioncharts\u002Fthemes\u002Ffusioncharts.theme.candy\";\n\nReactFC.fcRoot(FusionCharts, TimeSeries, CandyTheme);\n\u002F\u002F const fetch = require(\"node-fetch\");\n\u002F\u002F const jsonify = (res) =\u003E res.json();\nconst dataFetch = [\n [\"2018-01-06 20:00:00.000\", \"82000.56589\", \"25.441\"],\n [\"2018-01-06 20:00:00.000\", \"82000.56589\", \"18.441\"],\n [\"2018-01-07 20:00:00.000\", \"82000.56589\", \"15.441\"],\n [\"2018-01-08 20:00:00.000\", \"72000.56589\", \"11.441\"],\n [\"2018-01-09 20:00:00.000\", \"42000.56589\", \"5.441\"],\n [\"2018-01-10 20:00:00.000\", \"23000.56589\", \"5.441\"],\n [\"2018-01-11 20:00:00.000\", \"15000.56589\", \"8.441\"],\n [\"2018-01-12 20:00:00.000\", \"10000.56589\", \"9.441\"]\n];\nconst schemaFetch = [\n {\n name: \"Date\",\n type: \"date\",\n format: \"%Y-%m-%d %H:%M:%S.%L\"\n },\n {\n name: \"Energy\",\n type: \"number\"\n },\n {\n name: \"Temperature\",\n type: \"number\"\n }\n];\n\nconst dataSource = {\n chart: {\n theme: \"candy\",\n multicanvas: false,\n paletteColors: \"#52c41a,#1890ff,#fa8c16,#f5222d\",\n exportEnabled: 1,\n exportFileName: \"batchExport\",\n exportFormat: \"jpg\",\n exportAtClientSide: 1,\n decimalSeparator: \".\",\n thousandSeparator: \",\",\n drawAnchors: 1,\n anchorRadius: \"16\",\n anchorBorderThickness: \"12\",\n anchorBorderColor: \"#127fcb\",\n anchorSides: \"3\",\n anchorBgColor: \"#d3f7ff\",\n formatNumber: \"0\",\n formatNumberScale: \"0\",\n decimals: \"2\",\n showValues: \"1\"\n },\n caption: {\n text: \"Covid 19 Indonesia\"\n },\n subcaption: {\n text: \"Data from https:\u002F\u002Fdata.kemkes.go.id\u002Fcovid19\u002Findex.html\"\n },\n yaxis: [\n {\n plot: [\n {\n aggregation: \"Last\",\n value: \"Energy\",\n connectnulldata: true,\n type: \"smooth-line\"\n }\n ],\n\n defaultFormat: false,\n format: {\n suffix: \" kWh\",\n defaultFormat: false\n }\n },\n {\n plot: [\n {\n aggregation: \"Last\",\n value: \"Temperature\",\n connectnulldata: false,\n type: \"smooth-line\",\n drawAnchors: \"1\"\n }\n ],\n format: {\n suffix: \" °C\"\n }\n }\n ],\n xAxis: {\n binning: {\n year: [],\n month: [],\n day: [1],\n hour: [],\n minute: [],\n second: [],\n millisecond: []\n },\n initialinterval: {\n from: \"01-Jan-12\",\n to: \"31-Dec-12\"\n },\n outputTimeFormat: {\n \u002F\u002Fyear: \"\",\n \u002F\u002F month: \"%b'%y (%q)\",\n \u002F\u002F day: \"%d\u002F%m (%a)\",\n \u002F\u002F hour: \"%-I %p\"\n \u002F\u002Fminute: \"\",\n \u002F\u002Fsecond: \"\",\n \u002F\u002Fmillisecond: \"\"\n }\n },\n tooltip: {\n enabled: true\n }\n};\n\nexport class TimseriesFushionChart extends React.Component {\n constructor(props) {\n super(props);\n this.onFetchData = this.onFetchData.bind(this);\n this.state = {\n timeseriesDs: {\n type: \"timeseries\",\n renderAt: \"container\",\n width: \"100%\",\n height: \"100%\",\n dataSource\n }\n };\n }\n\n componentDidMount() {\n this.onFetchData();\n }\n\n onFetchData() {\n Promise.all([dataFetch, schemaFetch]).then((res) =\u003E {\n const data = res[0];\n const schema = res[1];\n console.log(JSON.stringify(data));\n console.log(JSON.stringify(schema));\n const fusionTable = new FusionCharts.DataStore().createDataTable(\n data,\n schema\n );\n console.log(fusionTable);\n const timeseriesDs = Object.assign({}, this.state.timeseriesDs);\n timeseriesDs.dataSource.data = fusionTable;\n this.setState({\n timeseriesDs\n });\n\n console.log(this.state.timeseriesDs);\n });\n }\n\n render() {\n return (\n \u003Cdiv style={{ margin: \"0.5em\", height: \"60vh\" }}\u003E\n {this.state.timeseriesDs.dataSource.data ? (\n \u003C\u003E\n \u003CReactFC {...this.state.timeseriesDs} \u002F\u003E\n \u003C\u002F\u003E\n ) : (\n \"loading\"\n )}\n \u003C\u002Fdiv\u003E\n );\n }\n}\n","id":"54a255f3-7f5e-4370-b835-0e1b9c7e18d5","is_binary":false,"title":"TimseriesFushionChart.js","sha":null,"inserted_at":"2020-09-11T02:41:00","updated_at":"2023-02-23T23:49:13","upload_id":null,"shortid":"nxABl","source_id":"1112e17c-408e-4770-8c71-17cc4e1b5ea0","directory_shortid":"WKog4"},{"code":"import { stubFalse } from \"lodash\";\nimport React from \"react\";\nimport CheckboxTree from \"react-checkbox-tree-enhanced\";\n\u002F\u002F import 'font-awesome\u002Fcss\u002Ffont-awesome.css';\nimport \"react-checkbox-tree-enhanced\u002Flib\u002Freact-checkbox-tree.css\";\nconst nodes = [\n {\n unitId: \"\",\n type: \"region\",\n label: \"Jawa, Madura dan Bali\",\n value: \"2-region1-1\",\n showCheckbox: false,\n children: [\n {\n unitId: \"\",\n type: \"plant\",\n label: \"PLTU Tanjung Awar-Awar\",\n value: \"6-plant1-2\",\n showCheckbox: true,\n children: [\n {\n unitId: \"91\",\n type: \"unit\",\n label: \"PLTU Tanjung Awar-Awar 1\",\n value: \"91-unit1-3\",\n showCheckbox: true,\n children: [\n {\n unitId: \"91\",\n type: \"equipment\",\n label: \"BOILER\",\n value: \"91-BOILER-4\",\n showCheckbox: true,\n children: []\n },\n {\n unitId: \"91\",\n type: \"equipment\",\n label: \"STEAM TURBINE\",\n value: \"91-STEAM TURBINE-4\",\n showCheckbox: true,\n children: []\n },\n {\n unitId: \"91\",\n type: \"equipment\",\n label: \"CONDENSER\",\n value: \"91-CONDENSER-4\",\n showCheckbox: true,\n children: []\n },\n {\n unitId: \"91\",\n type: \"equipment\",\n label: \"AIR HEATER\",\n value: \"91-AIR HEATER-4\",\n showCheckbox: true,\n children: []\n },\n {\n unitId: \"91\",\n type: \"equipment\",\n label: \"HPH\",\n value: \"91-HPH-4\",\n showCheckbox: true,\n children: []\n },\n {\n unitId: \"91\",\n type: \"equipment\",\n label: \"LPH\",\n value: \"91-LPH-4\",\n showCheckbox: true,\n children: []\n }\n ]\n },\n {\n unitId: \"92\",\n type: \"unit\",\n label: \"PLTU Tanjung Awar-Awar 2\",\n value: \"92-unit-3\",\n showCheckbox: true,\n children: [\n {\n unitId: \"92\",\n type: \"equipment\",\n label: \"BOILER\",\n value: \"92-BOILER-4\",\n showCheckbox: true,\n children: []\n },\n {\n unitId: \"92\",\n type: \"equipment\",\n label: \"STEAM TURBINE\",\n value: \"92-STEAM TURBINE-4\",\n showCheckbox: true,\n children: []\n },\n {\n unitId: \"92\",\n type: \"equipment\",\n label: \"CONDENSER\",\n value: \"92-CONDENSER-4\",\n showCheckbox: true,\n children: []\n },\n {\n unitId: \"92\",\n type: \"equipment\",\n label: \"AIR HEATER\",\n value: \"92-AIR HEATER-4\",\n showCheckbox: true,\n children: []\n },\n {\n unitId: \"92\",\n type: \"equipment\",\n label: \"HPH\",\n value: \"92-HPH-4\",\n showCheckbox: true,\n children: []\n },\n {\n unitId: \"92\",\n type: \"equipment\",\n label: \"LPH\",\n value: \"92-LPH-4\",\n showCheckbox: true,\n children: []\n }\n ]\n }\n ]\n }\n ]\n },\n {\n unitId: \"\",\n type: \"region\",\n label: \"Sumatera - Kalimantan\",\n value: \"1-region2-1\",\n showCheckbox: false,\n children: [\n {\n unitId: \"\",\n type: \"plant\",\n label: \"PLTU Tenayan\",\n value: \"8-plant3-2\",\n showCheckbox: true,\n children: [\n {\n unitId: \"101\",\n type: \"unit\",\n label: \"PLTU Tenayan 1\",\n value: \"101-unit4-3\",\n showCheckbox: true,\n children: [\n {\n unitId: \"101\",\n type: \"equipment\",\n label: \"BOILER\",\n value: \"101-BOILER-4\",\n showCheckbox: true,\n children: []\n },\n {\n unitId: \"101\",\n type: \"equipment\",\n label: \"STEAM TURBINE\",\n value: \"101-STEAM TURBINE-4\",\n showCheckbox: true,\n children: []\n },\n {\n unitId: \"101\",\n type: \"equipment\",\n label: \"CONDENSER\",\n value: \"101-CONDENSER-4\",\n showCheckbox: true,\n children: []\n },\n {\n unitId: \"101\",\n type: \"equipment\",\n label: \"AIR HEATER\",\n value: \"101-AIR HEATER-4\",\n showCheckbox: true,\n children: []\n },\n {\n unitId: \"101\",\n type: \"equipment\",\n label: \"HPH\",\n value: \"101-HPH-4\",\n showCheckbox: true,\n children: []\n },\n {\n unitId: \"101\",\n type: \"equipment\",\n label: \"LPH\",\n value: \"101-LPH-4\",\n showCheckbox: true,\n children: []\n }\n ]\n },\n {\n unitId: \"102\",\n type: \"unit\",\n label: \"PLTU Tenayan 2\",\n value: \"102-unit3-3\",\n showCheckbox: true,\n children: [\n {\n unitId: \"102\",\n type: \"equipment\",\n label: \"BOILER\",\n value: \"102-BOILER-4\",\n showCheckbox: true,\n children: []\n },\n {\n unitId: \"102\",\n type: \"equipment\",\n label: \"STEAM TURBINE\",\n value: \"8-102-STEAM TURBINE-4\",\n showCheckbox: true,\n children: []\n },\n {\n unitId: \"102\",\n type: \"equipment\",\n label: \"CONDENSER\",\n value: \"102-CONDENSER-4\",\n showCheckbox: true,\n children: []\n },\n {\n unitId: \"102\",\n type: \"equipment\",\n label: \"AIR HEATER\",\n value: \"102-AIR HEATER-4\",\n showCheckbox: true,\n children: []\n },\n {\n unitId: \"102\",\n type: \"equipment\",\n label: \"HPH\",\n value: \"102-HPH-4\",\n showCheckbox: true,\n children: []\n },\n {\n unitId: \"102\",\n type: \"equipment\",\n label: \"LPH\",\n value: \"102-LPH-4\",\n showCheckbox: true,\n children: []\n }\n ]\n }\n ]\n }\n ]\n }\n];\n\nclass Treegator extends React.Component {\n state = {\n checked: [],\n expanded: [],\n mode: false,\n data: {\n data: [],\n types: \"\",\n technology: \"\"\n }\n };\n\n getInitialState = () =\u003E ({\n \u002F* state props *\u002F\n checked: []\n \u002F\u002F mode:false\n \u002F\u002F expanded: []\n });\n\n resetState = () =\u003E {\n this.setState(this.getInitialState());\n };\n updateState = (value) =\u003E {\n this.resetState();\n if (this.state.checked.length === 0) {\n this.setState({ checked: value });\n }\n };\n\n handleCheck = (checkedData, targetNode) =\u003E {\n console.log(targetNode);\n\n let data = this.state.data;\n let draft = this.state.checked;\n const vals = targetNode.value.split(\"-\");\n\n const technology = vals[0];\n const val = vals[1];\n const types = vals[2];\n\n let draftData = this.state.data;\n const draftType = types;\n const draftTechnology = val;\n\n \u002F\u002F check apakah technologynya berubah\n \u002F\u002F check apakah typenya berubah\n \u002F\u002F check apakah valuenya sudah ada, yes, remove, no, add\n\n console.log(data.data.includes(val));\n console.log(data);\n \u002F\u002F console.log(data.types.includes(types));\n \u002F\u002F console.log(data.technology.includes(technology));\n\n \u002F\u002F const index = data.data.indexOf(val);\n \u002F\u002F data.data.splice(index, 1);\n \u002F\u002F data.data.push(val);\n\n const ty = data.types;\n\n if (!ty.includes(types)) {\n this.setState({\n checked: [targetNode.value]\n });\n draftData = {\n data: [val],\n types,\n technology\n };\n } else {\n if (data.data.includes(val)) {\n let DraftCheck = this.state.checked;\n const idx = DraftCheck.indexOf(targetNode.value);\n DraftCheck.splice(idx, 1);\n\n this.setState({\n checked: DraftCheck\n });\n\n const index = data.data.indexOf(targetNode.value);\n data.data.splice(index, 1);\n } else {\n let DraftCheck = this.state.checked;\n\n this.setState({\n checked: [...DraftCheck, targetNode.value]\n });\n\n data.data.push(val);\n }\n draftData = {\n data: [...data.data],\n types,\n technology\n };\n }\n\n this.setState({ data: draftData });\n\n \u002F\u002F a = draftData;\n\n \u002F\u002F console.log(draftData);\n };\n\n render() {\n return (\n \u003C\u003E\n {JSON.stringify(this.state.checked)}\n {JSON.stringify(this.state.data)}\n\n \u003CCheckboxTree\n noCascade={true}\n onlyLeafCheckboxes={false}\n nodes={nodes}\n checked={this.state.checked}\n expanded={this.state.expanded}\n onCheck={(checkedData, targetNode) =\u003E {\n this.handleCheck(checkedData, targetNode);\n }}\n onExpand={(expanded) =\u003E this.setState({ expanded })}\n \u002F\u003E\n \u003C\u002F\u003E\n );\n }\n}\n\nexport default Treegator;\n","id":"cded80a6-81a5-482f-9109-482e525b7011","is_binary":false,"title":"Treegator.js","sha":null,"inserted_at":"2020-12-10T09:50:12","updated_at":"2023-04-02T08:11:18","upload_id":null,"shortid":"SyhU1uy3P","source_id":"1112e17c-408e-4770-8c71-17cc4e1b5ea0","directory_shortid":"WKog4"}],"base_git":null,"preview_secret":null,"owned":false,"tags":[],"npm_dependencies":{"react":"16.0.0","react-dom":"16.0.0"},"v2":false,"collection":false,"npm_registries":[],"updated_at":"2023-05-24T08:15:00","source_id":"1112e17c-408e-4770-8c71-17cc4e1b5ea0","restrictions":{"free_plan_editing_restricted":false,"live_sessions_restricted":true},"external_resources":[],"is_frozen":true,"entry":"src\u002Findex.js","pr_number":null,"description":null,"room_id":null};