fix(app): area charts for trash and report #35 #36

apps/app/src/locales/en.json

@@ -86,7 +86,11 @@
             },
             "dashboard": {
                 "login": "Back to Login",
-                "home": "Back to Home"
+                "home": "Back to Home",
+                "chart": {
+                    "total_trash": "Total Trash",
+                    "total_report": "Total Report"
+                }
             },
             "user": {
                 "subtitle": "User",

apps/app/src/locales/id.json

@@ -86,7 +86,11 @@
             },
             "dashboard": {
                 "login": "Kembali ke Login",
-                "home": "Kembali ke Home"
+                "home": "Kembali ke Home",
+                "chart": {
+                    "total_trash": "Total Sampah",
+                    "total_report": "Total Laporan"
+                }
             },
             "user": {
                 "subtitle": "Pengguna",

apps/app/src/pages/operator/dashboard.tsx

@@ -1,14 +1,15 @@
 import { IonContent, IonPage } from "@ionic/react";
-import { Card, CardContent, Button, ChartExample } from "@trashtrack/ui";
+import { Card, CardContent, Button, AreaChartTotalTrash, AreaChartTotalReport } from "@trashtrack/ui";
 import { OperatorContext } from "@trashtrack/ui";
 import { t } from "i18next";
 import { useContext } from "react";
+import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
-import { Chart } from "react-google-charts";
 
 export function OperatorDashboard() {
     const history = useHistory();
     const operator = useContext(OperatorContext);
+    const { t } = useTranslation();
 
     return (
         <IonPage>
@@ -20,24 +21,17 @@ export function OperatorDashboard() {
                 <div className="flex flex-col pt-8 gap-4">
                     <Card>
                         <CardContent className="pt-2 pb-2 pl-0 pr-0">
-                            <ChartExample />
+                            <p className="pl-6 pt-4 mb-4 text-base">{t("operator.dashboard.chart.total_report")}</p>
+                            <AreaChartTotalReport />
                         </CardContent>
                     </Card>
                     <Card>
-                        <CardContent>
-                            <Chart
-                                chartType="ScatterChart"
-                                data={[
-                                    ["Age", "Weight"],
-                                    [4, 5.5],
-                                    [8, 12],
-                                ]}
-                                width="100%"
-                                height="400px"
-                                legendToggle
-                            />
+                        <CardContent className="pt-2 pb-2 pl-0 pr-0">
+                            <p className="pl-6 pt-4 mb-4 text-base">{t("operator.dashboard.chart.total_trash")}</p>
+                            <AreaChartTotalTrash />
                         </CardContent>
                     </Card>
+
                     <Card className="flex flex-col mt-8">
                         <CardContent className="pt-6">
                             <Button

libs/components/src/charts/total-report.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts";
+import { CapacitorHttp } from "@capacitor/core";
+import { useQuery } from "@tanstack/react-query";
+import { API_URL } from "@trashtrack/utils";
+import dayjs from "dayjs";
+
+export const useGetAreaChartReportTotal = () => {
+    return useQuery({
+        queryKey: ["useGetAreaChartReportTotal"],
+        queryFn: () =>
+            CapacitorHttp.request({
+                url: API_URL + `/report/area-chart-total`,
+                method: "GET",
+            }).then((res) => res.data),
+    });
+};
+
+export interface InterfaceAreaChartReportTotal {
+    name: string;
+    total: number;
+}
+
+export function AreaChartTotalReport() {
+    const { data: chartData, isLoading } = useGetAreaChartReportTotal();
+
+    if (isLoading) {
+        return <div>Loading...</div>;
+    }
+
+    // const appendDummyData = () => {
+    //     const data = chartData.data;
+    //     const today = dayjs(); // DD-M-YYYY
+    //     const days = 30;
+    //     const dummyData = [];
+    //     for (let i = 0; i < days; i++) {
+    //         const date = today.subtract(i, "day").format("DD-M-YYYY");
+    //         if (!data.find((d) => d.name === date)) {
+    //             dummyData.push({ name: date, total: Math.floor(Math.random() * 19) + 1 });
+    //         }
+    //     }
+    //     return [...data, ...dummyData];
+    // };
+
+    // if (chartData.data.length < 30) {
+    //     chartData.data = appendDummyData();
+    // }
+
+    return (
+        <ResponsiveContainer width="100%" height={600}>
+            <AreaChart
+                width={500}
+                height={400}
+                data={chartData.data}
+                margin={{
+                    top: 10,
+                    right: 30,
+                    left: 0,
+                    bottom: 0,
+                }}
+            >
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis dataKey="name" />
+                <YAxis />
+                <Tooltip />
+                <Area type="monotone" dataKey="total" stroke="#8884d8" fill="#8884d8" />
+            </AreaChart>
+        </ResponsiveContainer>
+    );
+}

libs/components/src/charts/total-trash.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts";
+import { CapacitorHttp } from "@capacitor/core";
+import { useQuery } from "@tanstack/react-query";
+import { API_URL } from "@trashtrack/utils";
+import dayjs from "dayjs";
+
+export const useGetAreaChartTrashTotal = () => {
+    return useQuery({
+        queryKey: ["useGetAreaChartTrashTotal"],
+        queryFn: () =>
+            CapacitorHttp.request({
+                url: API_URL + `/trash/area-chart-total`,
+                method: "GET",
+            }).then((res) => res.data),
+    });
+};
+
+export interface InterfaceAreaChartTrashTotal {
+    name: string;
+    total: number;
+}
+
+export function AreaChartTotalTrash() {
+    const { data: chartData, isLoading } = useGetAreaChartTrashTotal();
+
+    if (isLoading) {
+        return <div>Loading...</div>;
+    }
+
+    // const appendDummyData = () => {
+    //     const data = chartData.data;
+    //     const today = dayjs(); // DD-M-YYYY
+    //     const days = 30;
+    //     const dummyData = [];
+    //     for (let i = 0; i < days; i++) {
+    //         const date = today.subtract(i, "day").format("DD-M-YYYY");
+    //         if (!data.find((d) => d.name === date)) {
+    //             dummyData.push({ name: date, total: Math.floor(Math.random() * 19) + 1 });
+    //         }
+    //     }
+    //     return [...data, ...dummyData];
+    // };
+
+    // if (chartData.data.length < 30) {
+    //     chartData.data = appendDummyData();
+    // }
+
+    return (
+        <ResponsiveContainer width="100%" height={600}>
+            <AreaChart
+                width={500}
+                height={400}
+                data={chartData.data}
+                margin={{
+                    top: 10,
+                    right: 30,
+                    left: 0,
+                    bottom: 0,
+                }}
+            >
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis dataKey="name" />
+                <YAxis />
+                <Tooltip />
+                <Area type="monotone" dataKey="total" stroke="#8884d8" fill="#8884d8" />
+            </AreaChart>
+        </ResponsiveContainer>
+    );
+}

libs/components/src/index.ts

@@ -36,3 +36,6 @@ export * from "./forms/operator/trash-bin/change-trashbin.form";
 export * from "./forms/operator/trash-bin/change-subtrashbin.form";
 
 export * from "./charts/chart";
+
+export * from "./charts/total-trash";
+export * from "./charts/total-report";