comments updated

src/App.tsx

@@ -2,6 +2,10 @@ import React, { Suspense, lazy } from 'react'
 import './index.css'
 import Loader from './components/Loader'
 import Header from './components/Header'
+
+/*
+ *lazy loading body component
+ */
 const Body = lazy(async () => await import('./components/Body'))
 
 const App: React.FC = (): JSX.Element => {

src/components/Body.tsx

@@ -1,16 +1,32 @@
-// local imports
+/*
+ *The Body component is responsible for displaying the chart and the button to toggle between the charts.
+ */
+
+/*
+ *local imports
+ */
 import React from 'react'
 import ChartDisplay from './ChartDisplay'
+
+/*
+ *helpers
+ */
 import { getChart1Data, getChart2Data } from '../static/helpers'
-import { type ChartDataType } from '../interfaces/interface'
+
+/*
+ *types and interfaces
+ */
+import type { ChartDataType } from '../interfaces/interface'
 
 const Body: React.FC = () => {
-  const [chartNum, setChartNum] = React.useState<number>(1)
+  const [chartNum, setChartNum] = React.useState<number>(1) // 1 for Flavanoids vs Ash, 2 for chart Magnesium vs Alcohol
   const [currentChartData, setCurrentChartData] = React.useState<ChartDataType>(
     getChart1Data()
   )
 
-  // local functions
+  /*
+   *local functions
+   */
   const updateChart = (e: React.MouseEvent<HTMLButtonElement>): void => {
     e.preventDefault()
     setChartNum((chartNum) => {
@@ -19,13 +35,17 @@ const Body: React.FC = () => {
     })
   }
 
-  // useEffect hook
+  /*
+   *useEffect hook
+   */
   React.useEffect(() => {
     if (chartNum === 1) setCurrentChartData(getChart1Data())
     else if (chartNum === 2) setCurrentChartData(getChart2Data())
   }, [chartNum])
 
-  // return statement
+  /*
+   *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 ip5_h-1/2 ipx_h-6/10 ipD_h-6/10 ipDP_h-7/10">
@@ -36,7 +56,9 @@ const Body: React.FC = () => {
           className="bg-blue-700 text-white font-bold py-4 px-8 rounded ip5_py-4 ip5_px-8 ipx_py-4 ipx_px-8 ipD_py-4 ipD_px-8 ipDP_py-4 ipDP_px-8"
           onClick={updateChart}
         >
-          <span className='text-md ip5_text-md ipx_text-md ipD_text-md ipDP_text-md'>Show Chart {chartNum === 1 ? 2 : 1}</span>
+          <span className="text-md ip5_text-md ipx_text-md ipD_text-md ipDP_text-md">
+            Show Chart {chartNum === 1 ? 2 : 1}
+          </span>
         </button>
       </div>
     </section>

src/components/ChartDisplay.tsx

@@ -1,15 +1,33 @@
-// local imports
+/*
+ *The ChartDisplay component is responsible for displaying the chart based on the data provided by the user.
+ */
+
+/*
+ *local imports
+ */
 import React from 'react'
 import { option } from '../static/static'
+import type { OptionType, ChartDataType } from '../interfaces/interface'
 
-// importing the core library.
+/*
+ *Importing the echarts core library.
+ *echarts-for-react provides a declarative way to use echarts in a React application.
+ *It internally integrates echarts by using the latest version, and provides a declarative React component interface.
+ *echarts-for-react supports TypeScript.
+ */
 import ReactEChartsCore from 'echarts-for-react/lib/core'
 
-// Importing the echarts core module, which provides the necessary interfaces for using echarts.
+/*
+ *Importing the echarts supports library.
+ *echarts supports is a library that provides a set of common classes, which can be used to extend echarts functionalities.
+ *It is used to load the extensions of echarts.
+ */
 import * as echarts from 'echarts/core'
 import { BarChart, LineChart } from 'echarts/charts'
 
-// importing required components, all suffixed with Component
+/*
+ *Importing the echarts components that are required.
+ */
 import {
   GridComponent,
   TooltipComponent,
@@ -18,9 +36,10 @@ import {
   ToolboxComponent
 } from 'echarts/components'
 
-// importing default canvas renderer
+/*
+ *Importing the echarts renderers that are required.
+ */
 import { CanvasRenderer } from 'echarts/renderers'
-import type { OptionType, ChartDataType } from '../interfaces/interface'
 
 // Register the required components
 echarts.use([
@@ -81,27 +100,28 @@ const ChartDisplay: React.FC<ChartPropTypes> = (props) => {
             align: 'center'
           }
         },
-        series: props.currentChart === 1
-          ? [
-              {
-                ...currentOption.series[0],
-                name: `${props.chartData.nameY} - Line`,
-                type: 'line',
-                smooth: true,
-                areaStyle: undefined,
-                data: props.chartData.vertical
-              }
-            ]
-          : [
-              {
-                ...currentOption.series[0],
-                name: `${props.chartData.nameY} - Bar`,
-                type: 'bar',
-                smooth: true,
-                areaStyle: undefined,
-                data: props.chartData.vertical
-              }
-            ]
+        series:
+          props.currentChart === 1
+            ? [
+                {
+                  ...currentOption.series[0],
+                  name: `${props.chartData.nameY} - Line`,
+                  type: 'line',
+                  smooth: true,
+                  areaStyle: undefined,
+                  data: props.chartData.vertical
+                }
+              ]
+            : [
+                {
+                  ...currentOption.series[0],
+                  name: `${props.chartData.nameY} - Bar`,
+                  type: 'bar',
+                  smooth: true,
+                  areaStyle: undefined,
+                  data: props.chartData.vertical
+                }
+              ]
       }
     })
   }, [props.chartData, props.currentChart])

src/index.css

@@ -1,3 +1,8 @@
+/* 
+    *The following classes are named with referrence to tailwind classes 
+    *and are used to style the components in the app
+*/
+
 *,
 *::before,
 *::after {
@@ -150,10 +155,10 @@ button:hover {
 }
 
 
-/* Media queries */
+/* *Media queries */
 
 
-/* iPhone 5 */
+/* *iPhone 5 */
 
 @media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
     .ip5_h-1\/2 {
@@ -176,7 +181,7 @@ button:hover {
 }
 
 
-/* iPhone X */
+/* *iPhone X */
 
 @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-device-pixel-ratio: 3) {
     .ipx_h-6\/10 {
@@ -202,7 +207,7 @@ button:hover {
 }
 
 
-/* iPad */
+/* *iPad */
 
 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
     .ipD_h-6\/10 {
@@ -228,7 +233,7 @@ button:hover {
 }
 
 
-/* iPad Pro */
+/* *iPad Pro */
 
 @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
     .ipDP_h-7\/10 {

src/interfaces/interface.ts

@@ -1,3 +1,8 @@
+/*
+ *Purpose: Stores and emits the data type and required interfaces of the chart
+ *This file is used to store the data type and required interfaces of the chart.
+ */
+
 interface ChartDataType {
   horizontal: number[]
   vertical: number[]

src/static/helpers.ts

@@ -1,41 +1,83 @@
-// importing the json data
+/*
+ *Purpose: Helper functions for the charts.
+ */
+
+/*
+ *importing the json data
+ */
 import data from '../assets/Wine-Data.json'
+
+/*
+ *importing the interface
+ */
 import type { ChartDataType } from '../interfaces/interface'
 
+/*
+ *function to get the data for the first chart
+ */
 const getChart1Data = (): ChartDataType => {
+  /*
+   *logic to convert the string data to number for Flavanoids, if there is one, and return the data
+   */
+
   const flavanoids = data.map((item) => {
     if (typeof item.Flavanoids === 'string') {
       return parseFloat(item.Flavanoids)
     }
 
     return item.Flavanoids
   })
+
+  /*
+   *logic to convert the string data to number for Ash, if there is one, and return the data
+   */
   const ash = data.map((item) => {
     if (typeof item.Ash === 'string') {
       return parseFloat(item.Ash)
     }
 
     return item.Ash
   })
-  return { horizontal: flavanoids, vertical: ash, nameX: 'Flavanoids', nameY: 'Ash' }
+  return {
+    horizontal: flavanoids,
+    vertical: ash,
+    nameX: 'Flavanoids',
+    nameY: 'Ash'
+  }
 }
 
+/*
+ *function to get the data for the second chart
+ */
 const getChart2Data = (): ChartDataType => {
+  /*
+   *logic to convert the string data to number for *minimum* Alcohol, if there is one, and return the data
+   */
+
   const alcohol = data.map((item) => {
     if (typeof item.Alcohol === 'string') {
       return parseFloat(item.Alcohol)
     }
 
     return item.Alcohol
   })
+
+  /*
+   *logic to convert the string data to number for *minimum* Magnesium, if there is one, and return the data
+   */
   const magnesium = data.map((item) => {
     if (typeof item.Magnesium === 'string') {
-      return parseFloat(item.Magnesium)
+      return Math.floor(parseFloat(item.Magnesium))
     }
 
-    return item.Magnesium
+    return Math.floor(item.Magnesium)
   })
-  return { horizontal: alcohol, vertical: magnesium, nameX: 'Alcohol', nameY: 'Magnesium' }
+  return {
+    horizontal: alcohol,
+    vertical: magnesium,
+    nameX: 'Alcohol',
+    nameY: 'Magnesium'
+  }
 }
 
 export { getChart1Data, getChart2Data }

src/static/static.ts

@@ -1,3 +1,8 @@
+/*
+ *Purpose: This file stores initial values of any stateful variables, such as options for charts, etc.
+ *This file is used to store the initial values of the options for the charts.
+ */
+
 import type { OptionType } from '../interfaces/interface'
 
 const option: OptionType = {