Fully implement chartjs data visualization

toduyemi · Mar 19, 2024 · 5924e2e · 5924e2e
1 parent d2ad7ce
commit 5924e2e
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 14 deletions.
diff --git a/src/appTypes.types.ts b/src/appTypes.types.ts
@@ -19,6 +19,7 @@ export interface WeatherCard {
 }
 
 export interface ForecastObj {
+  dt: number;
   date: string;
   temp: number;
   pop: number;
@@ -28,6 +29,8 @@ export interface ForecastObj {
     description: string;
     icon: string;
   };
+  rain?: number;
+  snow?: number;
 }
 
 export interface Coordinates {

diff --git a/src/dataCharts.ts b/src/dataCharts.ts
@@ -16,7 +16,7 @@ export async function renderChart(forecast: ForecastObj[]) {
     options: {
       layout: {
         padding: {
-          bottom: 10.15,
+          bottom: 47.15,
         },
       },
       maintainAspectRatio: false,
@@ -74,6 +74,9 @@ export async function renderChart(forecast: ForecastObj[]) {
           display: false,
           max: getMaxValueWithPadding(),
         },
+        yLev: {
+          display: false,
+        },
       },
     },
     data: {
@@ -93,25 +96,63 @@ export async function renderChart(forecast: ForecastObj[]) {
           yAxisID: 'yPop',
           type: 'bar',
           datalabels: {
-            anchor: 'end',
-            align: 'end',
-            font: {
-              weight: 'bold',
+            labels: {
+              description: {
+                anchor: 'start',
+                align: 'start',
+                font: {
+                  size: 8.5,
+                },
+                formatter: (value, context) => {
+                  const bar = forecast[context.dataIndex];
+                  const words = bar.weather.description.split(' ');
+                  return [words[0], words[1]];
+                },
+              },
+              value: {
+                anchor: 'end',
+                align: 'end',
+                font: {
+                  size: 8.5,
+                  weight: 'bold',
+                },
+                formatter: (value, context) => {
+                  const bar = forecast[context.dataIndex];
+                  const sum = (bar.rain ?? 0) + (bar.snow ?? 0);
+                  if (sum)
+                    return `${sum} mm/h\n${(
+                      (value as number) * 100
+                    ).toFixed()}%`;
+                  else return `${((value as number) * 100).toFixed()}%`;
+                },
+                textAlign: 'center',
+              },
             },
-            formatter: (value) => `${((value as number) * 100).toFixed()}%`,
           },
         },
+        {
+          label: '3h rain',
+          type: 'bar',
+          yAxisID: 'yLev',
+          data: forecast.map((row) => row.pop),
+          datalabels: {
+            anchor: 'start',
+          },
+          hidden: true,
+        },
       ],
     },
   });
+  // Chart2 ===================>
   const chartCtr2 = document.querySelector('#temp-chart2') as HTMLCanvasElement;
   new Chart(chartCtr2, {
     type: 'line',
     options: {
       maintainAspectRatio: false,
       layout: {
         padding: {
-          top: 51.35,
+          top: 30,
+          bottom: 41,
         },
       },
       animation: false,
@@ -138,9 +179,9 @@ export async function renderChart(forecast: ForecastObj[]) {
           ticks: {
             display: false,
           },
-          grid: {
-            drawTicks: false,
-          },
+          // grid: {
+          //   drawTicks: false,
+          // },
         },
         y: {
           afterFit: (ctx) => {
@@ -163,5 +204,3 @@ export async function renderChart(forecast: ForecastObj[]) {
     },
   });
 }
-
-// Chart2 ===================>
diff --git a/src/dataUtils.ts b/src/dataUtils.ts
@@ -41,13 +41,20 @@ export function createForecastArr(response: ForecastResponse): ForecastObj[] {
   const obj: ForecastObj[] = [];
 
   response?.list.forEach((item: List) => {
-    let forecast = {
+    let forecast: ForecastObj = {
       dt: item.dt,
       date: item.dt_txt,
       pop: item.pop,
       temp: item.main.temp,
       weather: item.weather[0],
     };
+
+    if (item.rain) {
+      forecast.rain = item.rain['3h'];
+    }
+    else if (item.snow) {
+      forecast.snow = item.snow['3h'];
+    }
     obj.push(forecast);
   });
 

diff --git a/src/openWeather.types.ts b/src/openWeather.types.ts
@@ -33,6 +33,7 @@ export interface List {
   visibility: number;
   pop: number;
   rain?: Rain;
+  snow?: Snow;
   sys: Sys;
   dt_txt: string;
 }
@@ -56,6 +57,7 @@ export interface Main {
 export interface Rain {
   '3h': number;
 }
+export interface Snow extends Rain {}
 
 export interface Sys {
   pod: string;

diff --git a/src/style.css b/src/style.css
@@ -125,7 +125,7 @@ button {
 }
 .box {
   border: none;
-  width: calc(1500px - 28px);
+  width: calc(2000px - 28px);
   height: 500px;
 }
 canvas {