start on chart

Author: Jesperpaulsen

Diff for: packages/data-visualizer/package.json

@@ -6,6 +6,7 @@
     "build": "cross-env NODE_ENV=production vite build"
   },
   "dependencies": {
+    "chart.js": "^3.5.1",
     "classnames": "^2.3.1",
     "firebase": "^9.1.1",
     "jsvectormap": "^1.3.3",

Diff for: packages/data-visualizer/src/components/common/BaseChart.tsx

@@ -0,0 +1,42 @@
+import { Chart, ChartType } from 'chart.js'
+import { createRef, FunctionalComponent, RefObject } from 'preact'
+import { useEffect, useState } from 'preact/hooks'
+
+interface Props {
+  chartRef: RefObject<any>
+  type: ChartType
+}
+
+const LineChart: FunctionalComponent<Props> = ({ chartRef, type }) => {
+  const [chart, setChart] = useState<Chart | undefined>()
+
+  useEffect(() => {
+    if (!chart) {
+      const newChart = new Chart(chartRef.current, {
+        data: {
+          labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+          datasets: [
+            {
+              label: '# of Votes',
+              data: [12, 19, 3, 5, 2, 3],
+              borderWidth: 1
+            }
+          ]
+        },
+        options: {
+          scales: {
+            y: {
+              beginAtZero: true
+            }
+          }
+        },
+        type: type
+      })
+      setChart(newChart)
+    }
+  }, [chart, chartRef, type])
+
+  return null
+}
+
+export default LineChart

Diff for: packages/data-visualizer/src/components/common/LineChart.tsx

@@ -0,0 +1,41 @@
+import { Chart } from 'chart.js'
+import { createRef, FunctionalComponent, RefObject } from 'preact'
+import { useEffect, useState } from 'preact/hooks'
+
+interface Props {
+  chartRef: RefObject<any>
+}
+
+const LineChart: FunctionalComponent<Props> = ({ chartRef }) => {
+  const [chart, setChart] = useState<Chart | undefined>()
+
+  useEffect(() => {
+    if (!chart) {
+      const newChart = new Chart(chartRef.current, {
+        data: {
+          labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+          datasets: [
+            {
+              label: '# of Votes',
+              data: [12, 19, 3, 5, 2, 3],
+              borderWidth: 1
+            }
+          ]
+        },
+        options: {
+          scales: {
+            y: {
+              beginAtZero: true
+            }
+          }
+        },
+        type: 'line'
+      })
+      setChart(newChart)
+    }
+  }, [chart, chartRef])
+
+  return null
+}
+
+export default LineChart

Diff for: packages/data-visualizer/src/components/dashboard/DashboardChart.tsx

@@ -0,0 +1,17 @@
+import { createRef, FunctionalComponent } from 'preact'
+
+import LineChart from '../common/LineChart'
+
+const DashboardChart: FunctionalComponent = () => {
+  const chartRef = createRef()
+
+  return (
+    <div>
+      <canvas ref={chartRef} height={400} width={400}>
+        <LineChart chartRef={chartRef} />
+      </canvas>
+    </div>
+  )
+}
+
+export default DashboardChart

Diff for: packages/data-visualizer/src/components/usageByCountry/CountryDetails.tsx

@@ -90,8 +90,7 @@ const CountryDetails: FunctionalComponent<Props> = ({ country }) => {
                   <li key={host.countryCode}>
                     {host.hostOrigin}: {co2Formatter(host.CO2)}{' '}
                     <span className="text-sm">
-                      ({host.numberOfCalls - host.numberOfCallsWithoutSize}{' '}
-                      calls)
+                      ({host.numberOfCalls} calls)
                     </span>
                   </li>
                 ))}

Diff for: packages/data-visualizer/src/pages/Dashboard.tsx

@@ -1,7 +1,8 @@
 import { FunctionComponent } from 'preact'
 import { useContext } from 'preact/hooks'
-import UsageDisplay from '../components/dashboard/UsageDisplay'
 
+import DashboardChart from '../components/dashboard/DashboardChart'
+import UsageDisplay from '../components/dashboard/UsageDisplay'
 import Greeting from '../components/layout/Greeting'
 import { UserContext } from '../contexts/User/UserContext'
 
@@ -11,6 +12,7 @@ const Dashboard: FunctionComponent = () => {
   return (
     <div>
       <UsageDisplay />
+      <DashboardChart />
     </div>
   )
 }