From 1984113cd3136c759aea3acb74df74d1ce9ba0be Mon Sep 17 00:00:00 2001 From: Soham Das Date: Fri, 28 Apr 2023 13:00:15 +0530 Subject: [PATCH] chart component added --- package.json | 2 ++ src/components/Body.tsx | 27 +++++++++++++++- src/components/Chart1.tsx | 50 +++++++++++++++++++++++++++++ src/index.css | 54 ++++++++++++++++++++++++++++++++ src/static/helpers.ts | 8 +++++ src/static/static.ts | 66 +++++++++++++++++++++++++++++++++++++++ yarn.lock | 33 ++++++++++++++++++++ 7 files changed, 239 insertions(+), 1 deletion(-) create mode 100644 src/components/Chart1.tsx create mode 100644 src/static/helpers.ts create mode 100644 src/static/static.ts diff --git a/package.json b/package.json index d59ba5f..981e17f 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,8 @@ "@types/node": "^16.7.13", "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", + "echarts": "^5.4.2", + "echarts-for-react": "^3.0.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", diff --git a/src/components/Body.tsx b/src/components/Body.tsx index cc13d55..a3c291d 100644 --- a/src/components/Body.tsx +++ b/src/components/Body.tsx @@ -1,7 +1,32 @@ +// local imports import React from 'react' +import Chart1 from './Chart1' const Body: React.FC = () => { - return
Body
+ const [chartNum, setChartNum] = React.useState(1) + + const updateChart = (e: React.MouseEvent): void => { + e.preventDefault() + setChartNum((chartNum) => { + if (chartNum === 1) return 2 + else return 1 + }) + } + return ( +
+
+ {chartNum === 1 && } +
+
+ +
+
+ ) } export default Body diff --git a/src/components/Chart1.tsx b/src/components/Chart1.tsx new file mode 100644 index 0000000..6e0295f --- /dev/null +++ b/src/components/Chart1.tsx @@ -0,0 +1,50 @@ +// local imports +import React from 'react' +import { option } from '../static/static' + +// importing the core library. +import ReactEChartsCore from 'echarts-for-react/lib/core' + +// Importing the echarts core module, which provides the necessary interfaces for using echarts. +import * as echarts from 'echarts/core' +import { BarChart, LineChart } from 'echarts/charts' + +// importing required components, all suffixed with Component +import { + GridComponent, + TooltipComponent, + TitleComponent, + LegendComponent, + ToolboxComponent +} from 'echarts/components' + +// importing default canvas renderer +import { CanvasRenderer } from 'echarts/renderers' + +// Register the required components +echarts.use([ + TitleComponent, + TooltipComponent, + GridComponent, + BarChart, + LineChart, + CanvasRenderer, + LegendComponent, + ToolboxComponent +]) + +const Chart1: React.FC = () => { + return ( + + ) +} + +export default Chart1 diff --git a/src/index.css b/src/index.css index d27ea52..9c33937 100644 --- a/src/index.css +++ b/src/index.css @@ -13,6 +13,10 @@ body { -moz-osx-font-smoothing: grayscale; } +.p-4 { + padding: 1rem; +} + .w-full { width: 100%; } @@ -54,6 +58,14 @@ body { height: 80%; } +.w-1\/2 { + width: 50%; +} + +.h-1\/2 { + height: 50%; +} + .flex { display: flex; } @@ -70,6 +82,48 @@ body { align-items: center; } +button { + cursor: pointer; + outline: none; + border: none; + opacity: 0.8; +} + +button:hover { + opacity: 1; +} + +.bg-blue-700 { + background-color: rgb(29 78 216); +} + +.text-white { + color: #fff; +} + +.font-bold { + font-weight: 700; +} + +.py-4 { + padding-top: 1rem; + padding-bottom: 1rem; +} + +.px-4 { + padding-left: 1rem; + padding-right: 1rem; +} + +.px-8 { + padding-left: 2rem; + padding-right: 2rem; +} + +.rounded { + border-radius: 0.25rem; +} + .loader { border: 16px solid #f3f3f3; /* Light grey */ diff --git a/src/static/helpers.ts b/src/static/helpers.ts new file mode 100644 index 0000000..72b2a3a --- /dev/null +++ b/src/static/helpers.ts @@ -0,0 +1,8 @@ +// importing the json data +import data from '../assets/Wine-Data.json' + +const getData = (): void => { + console.log(data) +} + +export { getData } diff --git a/src/static/static.ts b/src/static/static.ts new file mode 100644 index 0000000..6e6bcec --- /dev/null +++ b/src/static/static.ts @@ -0,0 +1,66 @@ +const option = { + title: { + text: 'Trial', + padding: 20 + }, + tooltip: { + trigger: 'axis' + }, + legend: { + data: ['a', 'b', 'c'] + }, + toolbox: { + feature: { + saveAsImage: {} + } + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + xAxis: [ + { + type: 'category', + boundaryGap: false, + name: 'x-axis', + nameLocation: 'center', + nameGap: 30, + data: ['x', 'c', 'v', 'y', 'z', 'n', 'l'] + } + ], + yAxis: [ + { + type: 'value' + } + ], + series: [ + { + name: 'q', + type: 'line', + stack: 'x', + smooth: true, + areaStyle: { normal: {} }, + data: [120, 132, 101, 134, 90, 230, 210] + }, + { + name: 'w', + type: 'line', + stack: 'x', + smooth: true, + areaStyle: { normal: {} }, + data: [220, 182, 191, 234, 290, 330, 310] + }, + { + name: 'r', + type: 'line', + stack: 'x', + smooth: true, + areaStyle: { normal: {} }, + data: [150, 232, 201, 154, 190, 330, 410] + } + ] +} + +export { option } diff --git a/yarn.lock b/yarn.lock index 088999f..865e6fb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3814,6 +3814,22 @@ duplexer@^0.1.2: resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6" integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg== +echarts-for-react@^3.0.2: + version "3.0.2" + resolved "https://registry.yarnpkg.com/echarts-for-react/-/echarts-for-react-3.0.2.tgz#ac5859157048a1066d4553e34b328abb24f2b7c1" + integrity sha512-DRwIiTzx8JfwPOVgGttDytBqdp5VzCSyMRIxubgU/g2n9y3VLUmF2FK7Icmg/sNVkv4+rktmrLN9w22U2yy3fA== + dependencies: + fast-deep-equal "^3.1.3" + size-sensor "^1.0.1" + +echarts@^5.4.2: + version "5.4.2" + resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.4.2.tgz#9f38781c9c6ae323e896956178f6956952c77a48" + integrity sha512-2W3vw3oI2tWJdyAz+b8DuWS0nfXtSDqlDmqgin/lfzbkB01cuMEN66KWBlmur3YMp5nEDEEt5s23pllnAzB4EA== + dependencies: + tslib "2.3.0" + zrender "5.4.3" + ee-first@1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d" @@ -8148,6 +8164,11 @@ sisteransi@^1.0.5: resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed" integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg== +size-sensor@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/size-sensor/-/size-sensor-1.0.1.tgz#f84e46206d3e259faff1d548e4b3beca93219dbb" + integrity sha512-QTy7MnuugCFXIedXRpUSk9gUnyNiaxIdxGfUjr8xxXOqIB3QvBUYP9+b51oCg2C4dnhaeNk/h57TxjbvoJrJUA== + slash@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634" @@ -8707,6 +8728,11 @@ tsconfig-paths@^3.14.1: minimist "^1.2.6" strip-bom "^3.0.0" +tslib@2.3.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e" + integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg== + tslib@^1.8.1: version "1.14.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" @@ -9442,3 +9468,10 @@ yocto-queue@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b" integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q== + +zrender@5.4.3: + version "5.4.3" + resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.4.3.tgz#41ffaf835f3a3210224abd9d6964b48ff01e79f5" + integrity sha512-DRUM4ZLnoaT0PBVvGBDO9oWIDBKFdAVieNWxWwK0niYzJCMwGchRk21/hsE+RKkIveH3XHCyvXcJDkgLVvfizQ== + dependencies: + tslib "2.3.0"