chart data updated

src/components/Body.tsx

@@ -1,22 +1,34 @@
 // local imports
 import React from 'react'
-import Chart1 from './Chart1'
+import ChartDisplay from './ChartDisplay'
+import { getChart1Data } from '../static/helpers'
+import { type ChartDataType } from '../interfaces/interface'
 
 const Body: React.FC = () => {
   const [chartNum, setChartNum] = React.useState<number>(1)
+  const [currentChartData, setCurrentChartData] = React.useState<ChartDataType>(
+    getChart1Data()
+  )
 
+  // local functions
   const updateChart = (e: React.MouseEvent<HTMLButtonElement>): void => {
     e.preventDefault()
     setChartNum((chartNum) => {
       if (chartNum === 1) return 2
       else return 1
     })
   }
+
+  // useEffect hook
+  React.useEffect(() => {
+    if (chartNum === 1) setCurrentChartData(getChart1Data())
+    else if (chartNum === 2) setCurrentChartData(getChart1Data())
+  }, [chartNum])
+
+  // return statement
   return (
     <section className="w-full h-8/10 flex flex-col justify-center items-center">
-      <div className="w-full h-8/10 px-4">
-        {chartNum === 1 && <Chart1 />}
-      </div>
+      <div className="w-full h-8/10 px-4">{<ChartDisplay chartData={currentChartData} />}</div>
       <div className="w-full h-2/10 flex justify-center items-center">
         <button
           className="bg-blue-700 text-white font-bold py-4 px-8 rounded"

src/components/Chart1.tsx → src/components/ChartDisplay.tsx

@@ -20,6 +20,7 @@ import {
 
 // importing default canvas renderer
 import { CanvasRenderer } from 'echarts/renderers'
+import { type ChartDataType } from '../interfaces/interface'
 
 // Register the required components
 echarts.use([
@@ -33,7 +34,13 @@ echarts.use([
   ToolboxComponent
 ])
 
-const Chart1: React.FC = () => {
+// local prop type declaration
+
+interface ChartPropTypes {
+  chartData: ChartDataType
+}
+
+const ChartDisplay: React.FC<ChartPropTypes> = (props) => {
   return (
     <ReactEChartsCore
       echarts={echarts}
@@ -47,4 +54,4 @@ const Chart1: React.FC = () => {
   )
 }
 
-export default Chart1
+export default ChartDisplay

src/interfaces/interface.ts

@@ -0,0 +1,6 @@
+interface ChartDataType {
+  horizontal: number[]
+  vertical: number[]
+}
+
+export type { ChartDataType }

src/static/helpers.ts

@@ -1,8 +1,23 @@
 // importing the json data
 import data from '../assets/Wine-Data.json'
+import type { ChartDataType } from '../interfaces/interface'
 
-const getData = (): void => {
-  console.log(data)
+const getChart1Data = (): ChartDataType => {
+  const flavanoids = data.map((item) => {
+    if (typeof item.Flavanoids === 'string') {
+      return parseFloat(item.Flavanoids)
+    }
+
+    return item.Flavanoids
+  })
+  const ash = data.map((item) => {
+    if (typeof item.Ash === 'string') {
+      return parseFloat(item.Ash)
+    }
+
+    return item.Ash
+  })
+  return { horizontal: flavanoids, vertical: ash }
 }
 
-export { getData }
+export { getChart1Data }

src/static/static.ts

@@ -7,7 +7,8 @@ const option = {
     trigger: 'axis'
   },
   legend: {
-    data: ['a', 'b', 'c']
+    data: ['a', 'b', 'c'],
+    padding: 20
   },
   toolbox: {
     feature: {
@@ -37,23 +38,23 @@ const option = {
   ],
   series: [
     {
-      name: 'q',
+      name: 'a',
       type: 'line',
       stack: 'x',
       smooth: true,
       areaStyle: { normal: {} },
       data: [120, 132, 101, 134, 90, 230, 210]
     },
     {
-      name: 'w',
+      name: 'b',
       type: 'line',
       stack: 'x',
       smooth: true,
       areaStyle: { normal: {} },
       data: [220, 182, 191, 234, 290, 330, 310]
     },
     {
-      name: 'r',
+      name: 'c',
       type: 'line',
       stack: 'x',
       smooth: true,