From afad65ffe3511bf2ce54dd29dacf5b54b4ca57d0 Mon Sep 17 00:00:00 2001
From: Dallas <71103219+LeleDallas@users.noreply.github.com>
Date: Mon, 15 May 2023 21:51:56 +0200
Subject: [PATCH] fix: Chart visualization

---
 src/Consumer/Dashboard.tsx                 | 11 ++++++-----
 src/Consumer/DashboardCards/LineCard.tsx   |  9 ++++++---
 src/Consumer/Invoices/ElectricInvoices.tsx |  6 ++++--
 src/Consumer/Invoices/GasInvoices.tsx      |  9 ++++++---
 src/Consumer/Invoices/WaterInvoices.tsx    | 10 +++++-----
 5 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/src/Consumer/Dashboard.tsx b/src/Consumer/Dashboard.tsx
index 93344ec..3b2fbec 100644
--- a/src/Consumer/Dashboard.tsx
+++ b/src/Consumer/Dashboard.tsx
@@ -27,10 +27,10 @@ const Dashboard = () => {
     gas: { name: "Gas", data: [0] },
     water: { name: "Water", data: [0] },
     electric: { name: "Electric", data: [0] },
-    solar: { name: "Solar", data: 0 },
-    wind: { name: "Wind", data: 0 },
-    hydro: { name: "Hydro", data: 0 },
-    geo: { name: "Geo", data: 0 },
+    solar: { name: "Solar", data: [0] },
+    wind: { name: "Wind", data: [0] },
+    hydro: { name: "Hydro", data: [0] },
+    geo: { name: "Geo", data: [0] },
   });
 
   const navigate = useNavigate();
@@ -68,7 +68,8 @@ const Dashboard = () => {
             <Col lg={8} md={8} xs={8} >
               <StatsCard
                 color={"#ebfafa"}
-                chart={<ReactApexChart options={statebar("Water", "#008ffb").options as ApexOptions}
+                chart={<ReactApexChart
+                  options={statebar("Water", "#008ffb").options as ApexOptions}
                   series={[energy.water] as ApexAxisChartSeries}
                   type="bar" height={150} />}
               />
diff --git a/src/Consumer/DashboardCards/LineCard.tsx b/src/Consumer/DashboardCards/LineCard.tsx
index 9338931..d9ca4a5 100644
--- a/src/Consumer/DashboardCards/LineCard.tsx
+++ b/src/Consumer/DashboardCards/LineCard.tsx
@@ -36,7 +36,6 @@ const options: ApexOptions = {
             },
         },
         toolbar: { show: true, },
-
     },
     stroke: {
         curve: 'smooth',
@@ -75,7 +74,7 @@ const options: ApexOptions = {
 
 }
 const LineCard = ({ data }: any) => {
-
+    
     const filterData = (e: any) => {
         ApexCharts.exec('area-datetime', 'zoomX',
             new Date(e[0]).getTime(),
@@ -92,7 +91,11 @@ const LineCard = ({ data }: any) => {
                     </CardTitle>
                 </Col>
                 <Col>
-                    <DatePicker.RangePicker placeholder={["Start Date", "End Date"]} locale={locale} onChange={(e) => filterData(e)} />
+                    <DatePicker.RangePicker
+                        placeholder={["Start Date", "End Date"]}
+                        locale={locale}
+                        onChange={(e) => filterData(e)}
+                    />
                 </Col>
             </Row>
             <ReactApexChart options={options} series={data} type="area" height={350} />
diff --git a/src/Consumer/Invoices/ElectricInvoices.tsx b/src/Consumer/Invoices/ElectricInvoices.tsx
index 929b0d1..15714ac 100644
--- a/src/Consumer/Invoices/ElectricInvoices.tsx
+++ b/src/Consumer/Invoices/ElectricInvoices.tsx
@@ -3,6 +3,7 @@ import { useEffect, useState } from "react"
 import ReactApexChart from "react-apexcharts"
 import { InvoicesProps, optionsLine, pieOptions } from "./utilsInvoices"
 import InvoicesWrapper from "./InvoicesWrapper"
+import { sortDate } from "../utils"
 
 const ElectricInvoices = ({ bills, cost, aggregated, filtered }: InvoicesProps) => {
     const [metricCubic, setMetric] = useState(true)
@@ -43,12 +44,13 @@ const ElectricInvoices = ({ bills, cost, aggregated, filtered }: InvoicesProps)
         const tmp: Array<any> = []
         if (aggregated === undefined || aggregated === "undefined") {
             filtered?.forEach((el: any) => {
-                tmp.push([el[0], el[1]])
+                tmp.push({ x: el[0], y: el[1] })
             })
+            sortDate(tmp)
             setAllElectricLine([{ data: tmp }])
         } else {
             Object.values(aggregated).map((el: any) => {
-                tmp.push([el.date, el.electric])
+                tmp.push({ x: el.date, y: el.electric })
             })
             setAllElectricLine([{ data: tmp }])
         }
diff --git a/src/Consumer/Invoices/GasInvoices.tsx b/src/Consumer/Invoices/GasInvoices.tsx
index 91574b4..ecd136f 100644
--- a/src/Consumer/Invoices/GasInvoices.tsx
+++ b/src/Consumer/Invoices/GasInvoices.tsx
@@ -3,6 +3,7 @@ import { useEffect, useState } from "react"
 import ReactApexChart from "react-apexcharts"
 import { InvoicesProps, optionsLine, pieOptions } from "./utilsInvoices"
 import InvoicesWrapper from "./InvoicesWrapper"
+import { sortDate } from "../utils"
 
 const GasInvoices = ({ bills, cost, aggregated, filtered }: InvoicesProps) => {
     const [metricCubic, setMetric] = useState(true)
@@ -41,13 +42,15 @@ const GasInvoices = ({ bills, cost, aggregated, filtered }: InvoicesProps) => {
         const tmp: any = []
         if (aggregated === undefined || aggregated === "undefined") {
             filtered?.forEach((el: any) => {
-                tmp.push([el[0], el[1]])
+                tmp.push({ x: el[0], y: el[1] })
             })
+            sortDate(tmp)
             setAllGasLine([{ data: tmp }])
         } else {
-            Object.values(aggregated)?.map((el: any) => tmp.push([el.date, el.gas]))
+            Object.values(aggregated).map((el: any) => {
+                tmp.push({ x: el.date, y: el.gas })
+            })
             setAllGasLine([{ data: tmp }])
-
         }
     }, [filtered, metricCubic, aggregated, cost, bills])
 
diff --git a/src/Consumer/Invoices/WaterInvoices.tsx b/src/Consumer/Invoices/WaterInvoices.tsx
index bb1fdaa..ce74001 100644
--- a/src/Consumer/Invoices/WaterInvoices.tsx
+++ b/src/Consumer/Invoices/WaterInvoices.tsx
@@ -3,6 +3,7 @@ import { useEffect, useState } from "react"
 import ReactApexChart from "react-apexcharts"
 import { InvoicesProps, optionsLine, pieOptions } from "./utilsInvoices"
 import InvoicesWrapper from "./InvoicesWrapper"
+import { sortDate } from "../utils"
 
 const WaterInvoices = ({ bills, cost, aggregated, filtered }: InvoicesProps) => {
     const [metricCubic, setMetric] = useState(true)
@@ -51,17 +52,16 @@ const WaterInvoices = ({ bills, cost, aggregated, filtered }: InvoicesProps) =>
         const tmp: Array<any> = []
         if (aggregated === undefined || aggregated === "undefined") {
             filtered?.forEach((el: any) => {
-                tmp.push([el[0], el[1]])
+                tmp.push({ x: el[0], y: el[1] })
             })
+            sortDate(tmp)
             setAllWaterLine([{ data: tmp }])
         } else {
-            Object.values(aggregated)?.map((el: any) => {
-                tmp.push([el.date, el.water])
+            Object.values(aggregated).map((el: any) => {
+                tmp.push({ x: el.date, y: el.gas })
             })
             setAllWaterLine([{ data: tmp }])
-
         }
-
     }, [filtered, aggregated, metricCubic, bills, cost])
 
     return (