both charts committed

src/components/Body.tsx

@@ -1,7 +1,7 @@
 // local imports
 import React from 'react'
 import ChartDisplay from './ChartDisplay'
-import { getChart1Data } from '../static/helpers'
+import { getChart1Data, getChart2Data } from '../static/helpers'
 import { type ChartDataType } from '../interfaces/interface'
 
 const Body: React.FC = () => {
@@ -22,13 +22,15 @@ const Body: React.FC = () => {
   // useEffect hook
   React.useEffect(() => {
     if (chartNum === 1) setCurrentChartData(getChart1Data())
-    else if (chartNum === 2) setCurrentChartData(getChart1Data())
+    else if (chartNum === 2) setCurrentChartData(getChart2Data())
   }, [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">{<ChartDisplay chartData={currentChartData} />}</div>
+      <div className="w-full h-8/10 px-4">
+        {<ChartDisplay chartData={currentChartData} currentChart={chartNum} />}
+      </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/ChartDisplay.tsx

@@ -20,7 +20,7 @@ import {
 
 // importing default canvas renderer
 import { CanvasRenderer } from 'echarts/renderers'
-import { type ChartDataType } from '../interfaces/interface'
+import type { OptionType, ChartDataType } from '../interfaces/interface'
 
 // Register the required components
 echarts.use([
@@ -38,13 +38,66 @@ echarts.use([
 
 interface ChartPropTypes {
   chartData: ChartDataType
+  currentChart: number
 }
 
 const ChartDisplay: React.FC<ChartPropTypes> = (props) => {
+  const [currentOption, setCurrentOption] = React.useState<OptionType>(option)
+
+  // useEffect hook
+  React.useEffect(() => {
+    setCurrentOption((currentOption) => {
+      return {
+        ...currentOption,
+        title: {
+          ...currentOption.title,
+          text: `Chart ${props.currentChart}`
+        },
+        legend: {
+          ...currentOption.legend,
+          data: [
+            `Chart ${props.currentChart} - Line`,
+            `Chart ${props.currentChart} - Bar`,
+            `Chart ${props.currentChart} - Area`
+          ]
+        },
+        xAxis: {
+          ...currentOption.xAxis,
+          data: props.chartData.horizontal
+        },
+        series: [
+          {
+            ...currentOption.series[0],
+            name: `Chart ${props.currentChart} - Line`,
+            type: 'line',
+            smooth: true,
+            areaStyle: undefined,
+            data: props.chartData.vertical
+          },
+          {
+            ...currentOption.series[0],
+            name: `Chart ${props.currentChart} - Bar`,
+            type: 'bar',
+            smooth: false,
+            areaStyle: undefined,
+            data: props.chartData.vertical
+          },
+          {
+            ...currentOption.series[0],
+            name: `Chart ${props.currentChart} - Area`,
+            type: 'line',
+            smooth: true,
+            areaStyle: { normal: {} },
+            data: props.chartData.vertical
+          }
+        ]
+      }
+    })
+  }, [props.chartData, props.currentChart])
   return (
     <ReactEChartsCore
       echarts={echarts}
-      option={option}
+      option={currentOption}
       notMerge={true}
       lazyUpdate={true}
       theme={'dark'}

src/interfaces/interface.ts

@@ -3,4 +3,54 @@ interface ChartDataType {
   vertical: number[]
 }
 
-export type { ChartDataType }
+interface SeriesType {
+  name: string
+  type: 'line' | 'bar'
+  stack?: string
+  smooth?: boolean
+  areaStyle?: { normal: Record<string, unknown> }
+  data: number[]
+}
+
+interface OptionType {
+  title: {
+    text: string
+    padding?: number | string
+  }
+  tooltip: {
+    trigger: string
+  }
+  legend: {
+    data: string[]
+    padding: number | string
+  }
+  toolbox: {
+    feature: {
+      saveAsImage: Record<string, unknown>
+    }
+  }
+  grid: {
+    left: string
+    right: string
+    bottom: string
+    containLabel: boolean
+  }
+  xAxis: [
+    {
+      type: 'category'
+      boundaryGap: boolean
+      name?: string
+      nameLocation?: 'start' | 'center' | 'middle' | 'end'
+      nameGap?: number
+      data: number[] | string[]
+    }
+  ]
+  yAxis: [
+    {
+      type: 'value'
+    }
+  ]
+  series: SeriesType[]
+}
+
+export type { ChartDataType, OptionType }

src/static/helpers.ts

@@ -20,4 +20,22 @@ const getChart1Data = (): ChartDataType => {
   return { horizontal: flavanoids, vertical: ash }
 }
 
-export { getChart1Data }
+const getChart2Data = (): ChartDataType => {
+  const alcohol = data.map((item) => {
+    if (typeof item.Alcohol === 'string') {
+      return parseFloat(item.Alcohol)
+    }
+
+    return item.Alcohol
+  })
+  const magnesium = data.map((item) => {
+    if (typeof item.Magnesium === 'string') {
+      return parseFloat(item.Magnesium)
+    }
+
+    return item.Magnesium
+  })
+  return { horizontal: alcohol, vertical: magnesium }
+}
+
+export { getChart1Data, getChart2Data }

src/static/static.ts

@@ -1,4 +1,6 @@
-const option = {
+import type { OptionType } from '../interfaces/interface'
+
+const option: OptionType = {
   title: {
     text: 'Trial',
     padding: 20
@@ -28,7 +30,7 @@ const option = {
       name: 'x-axis',
       nameLocation: 'center',
       nameGap: 30,
-      data: ['x', 'c', 'v', 'y', 'z', 'n', 'l']
+      data: [0, 1, 2, 3, 4, 5, 6]
     }
   ],
   yAxis: [