Merge pull request #32 from TrackER-Corporation/fix/Data-visualization

fix: data visualization

src/Components/LoadingSpinner.tsx

@@ -19,7 +19,9 @@ const LoadingSpinner = ({ message, size = "large" }: LoadingSpinnerProps) =>
         justifyContent: "center",
         verticalAlign: "middle",
     }}>
-        <Spin size={size} style={{ position: "absolute", top: "50%" }} tip={message} />
+        <Spin size={size} style={{ position: "absolute", top: "50%" }} tip={message} >
+            <div />
+        </Spin>
     </div>
 
 export default LoadingSpinner

src/Consumer/Building/BuildingsTab.tsx

@@ -11,7 +11,7 @@ import { useAppDispatch, useAppSelector } from "../../hooks";
 import { PageHeader } from "@ant-design/pro-components";
 import api from "../../api";
 import "./style.css"
-import { getBills } from "../utils";
+import { getBills, sortDate } from "../utils";
 import { deleteBuilding } from "./utils";
 
 const { Search } = Input;
@@ -50,14 +50,17 @@ const BuildingTab = ({ updateRoute }: BuildingTabProps) => {
         const buildingBills = bills?.all?.find((el: any) => el.buildingId === id);
         if (!buildingBills) return [];
 
+        const orderData = buildingBills.bills
+            .filter((el: any) => el[type.toLowerCase()] !== undefined)
+            .map((el: any) => ({
+                x: moment.utc(el.date).local().format(),
+                y: el[type.toLowerCase()]
+            }))
+
+        sortDate(orderData)
         return [{
             name: type,
-            data: buildingBills.bills
-                .filter((el: any) => el[type.toLowerCase()] !== undefined)
-                .map((el: any) => ({
-                    x: moment.utc(el.date).local().format(),
-                    y: el[type.toLowerCase()]
-                }))
+            data: orderData
         }];
     };
 

src/Consumer/Building/utils.tsx

@@ -8,6 +8,7 @@ import api from "../../api"
 import { Building, EnergyType, Organization } from "../../types"
 import { fetchBuildings } from "../../reducers/buildings"
 import { AppDispatch } from "../../store"
+import { sortDate } from "../utils"
 
 export const optionsBar: ApexOptions = {
     chart: {
@@ -128,7 +129,6 @@ export const RenewableCardRender = (
                 <p style={{ fontWeight: "300", fontSize: 17, color: "#1196db" }}>{title}</p>
                 <IconFont
                     type={icon}
-                    className="iconfontMedium3"
                     color="#1196db"
                     style={{
                         color: "#1196db",
@@ -137,6 +137,7 @@ export const RenewableCardRender = (
                         verticalAlign: "middle",
                     }} />
                 <Statistic
+                    style={{ marginTop: 15 }}
                     value={!metric ? totalSum : totalSum / 1000}
                     suffix={metric ? "kW" : "W"}
                     precision={2} />
@@ -256,58 +257,55 @@ export const getAllDataRenewable = async (
             return [];
         }
 
-        const devices = await api.renewable.fetchResourcesByBuildingId(buildingBills.buildingId);
+        const device = await api.renewable.fetchResourcesByBuildingId(buildingBills.buildingId);
 
-        devices.forEach((device: any) => {
-            deviceEarning += device.earning;
-            deviceCost += device.price;
+        deviceEarning += device.earning;
+        deviceCost += device.price;
 
-            buildingBills.bills.forEach((bill: any) => {
-                const resources = bill.resources.find((resource: any) => resArray.includes(Object.keys(resource)[0]));
+        buildingBills.bills.forEach((bill: any) => {
+            const resources = bill.resources.find((resource: any) => resArray.includes(Object.keys(resource)[0]));
 
-                if (!resources) {
-                    return;
-                }
-
-                const [resourceName, resourceValue] = Object.entries(resources)[0];
+            if (!resources) {
+                return;
+            }
 
-                switch (resourceName) {
-                    case "Solar":
-                        solarSum += Number(resourceValue);
+            const [resourceName, resourceValue] = Object.entries(resources)[0];
 
-                        if (device.resourcesType === "Solar" && filter === "Solar") {
-                            totalSum += Number(resourceValue);
-                            allBills.push([bill.date, Number(resourceValue).toFixed(2)]);
-                        }
-                        break;
-                    case "Hydro":
-                        hydroSum += Number(resourceValue);
+            switch (resourceName) {
+                case "Solar":
+                    solarSum += Number(resourceValue);
 
-                        if (device.resourcesType === "Hydro" && filter === "Hydro") {
-                            totalSum += Number(resourceValue);
-                            allBills.push([bill.date, Number(resourceValue).toFixed(2)]);
-                        }
-                        break;
-                    case "Geo":
-                        geoSum += Number(resourceValue);
+                    if (device.resourcesType === "Solar" && filter === "Solar") {
+                        totalSum += Number(resourceValue);
+                        allBills.push([{x:bill.date, y:Number(resourceValue).toFixed(2)}]);
+                    }
+                    break;
+                case "Hydro":
+                    hydroSum += Number(resourceValue);
+                    if (device.resourcesType === "Hydro" && filter === "Hydro") {
+                        totalSum += Number(resourceValue);
+                        allBills.push([{x:bill.date, y:Number(resourceValue).toFixed(2)}]);
+                    }
+                    break;
+                case "Geo":
+                    geoSum += Number(resourceValue);
 
-                        if (device.resourcesType === "Geo" && filter === "Geo") {
-                            totalSum += Number(resourceValue);
-                            allBills.push([bill.date, Number(resourceValue).toFixed(2)]);
-                        }
-                        break;
-                    case "Wind":
-                        windSum += Number(resourceValue);
+                    if (device.resourcesType === "Geo" && filter === "Geo") {
+                        totalSum += Number(resourceValue);
+                        allBills.push({x:bill.date, y:Number(resourceValue).toFixed(2)});
+                    }
+                    break;
+                case "Wind":
+                    windSum += Number(resourceValue);
 
-                        if (device.resourcesType === "Wind" && filter === "Wind") {
-                            totalSum += Number(resourceValue);
-                            allBills.push([bill.date, Number(resourceValue).toFixed(2)]);
-                        }
-                        break;
-                    default:
-                        break;
-                }
-            });
+                    if (device.resourcesType === "Wind" && filter === "Wind") {
+                        totalSum += Number(resourceValue);
+                        allBills.push([{x:bill.date, y:Number(resourceValue).toFixed(2)}]);
+                    }
+                    break;
+                default:
+                    break;
+            }
         });
 
         setHydroSum(hydroSum);
@@ -317,6 +315,7 @@ export const getAllDataRenewable = async (
         setTotalSum(totalSum);
         setDeviceEarning(deviceEarning);
         setDeviceCost(deviceCost);
+        sortDate(allBills)
         setAllBills(allBills);
     } catch (error) {
         console.log(error);

src/Consumer/Dashboard.tsx

@@ -4,7 +4,7 @@ import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { ProCard } from "@ant-design/pro-components";
 import { ArrowRightOutlined } from "@ant-design/icons";
-import { getBillsAggregated, getBillsRenewable, getData, statebar } from "./utils";
+import { getBillsRenewable, getData, statebar } from "./utils";
 import { useAppSelector } from "../hooks";
 import avatarImages from "../globalUtils";
 import { ApexOptions } from "apexcharts";
@@ -27,24 +27,21 @@ 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();
 
   useEffect(() => {
     if (buildings === null || buildings === undefined) return
 
-    const ids = Object.values(buildings).filter((el: any) =>
-      el.resources.length !== 0).map((el: any) => el._id)
-    if (user._id !== undefined && user._id !== "undefined") {
-      getBillsAggregated(user._id, setBills, energy, setEnergy)
-    }
+    Object.values(buildings).filter((el) =>
+      el.resources.length !== 0).map((el) => el._id)
+      .map(id => getBillsRenewable(id, buildings, energy, user._id, setEnergy, setTotalRen, setBills))
 
-    ids.forEach(id => getBillsRenewable(id, buildings, energy, setEnergy, setTotalRen))
   }, [user, buildings])
 
   return (
@@ -68,7 +65,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} />}
               />

src/Consumer/DashboardCards/EarningsCard.tsx

@@ -2,7 +2,6 @@ import { Col, Row } from "antd";
 import { ProCard } from "@ant-design/pro-components";
 import ReactApexChart from "react-apexcharts";
 import { stackedOptions } from "../utils";
-import { ApexOptions } from "apexcharts";
 import Empty from "../../Components/Empty";
 
 interface EarningsCard {
@@ -11,10 +10,9 @@ interface EarningsCard {
 }
 
 
-const EarningsCard = ({ series, total = 0 }: EarningsCard) => {
-  return (<ProCard bordered style={{
-    borderRadius: "10px"
-  }}>
+
+const EarningsCard = ({ series, total = 0 }: EarningsCard) =>
+  <ProCard bordered style={{ borderRadius: "10px" }}>
     <Row align="middle" justify="space-between">
       <Col lg={6} md={6} xs={24}>
         <h4 style={{ fontSize: "20px", fontWeight: 500, color: "#2d3436" }}>Renewable Production</h4>
@@ -24,16 +22,13 @@ const EarningsCard = ({ series, total = 0 }: EarningsCard) => {
       </Col>
       <Col lg={18} md={18} xs={24} >
         {
-          total <= 0 ?
+          total === 0 ?
             <Empty />
             :
-            <ReactApexChart options={stackedOptions as ApexOptions} series={series} height={150} />
+            <ReactApexChart type="bar" options={stackedOptions} series={series} height={150} />
         }
       </Col>
     </Row>
-  </ProCard>)
-}
-
-
+  </ProCard>
 export default EarningsCard
 

src/Consumer/DashboardCards/ExpensiveChart.tsx

@@ -145,7 +145,7 @@ const ExpensiveChart = ({ bills }: any) => {
                 <CardTitle style={{ marginTop: "32px" }}>By Category</CardTitle>
                 {names.map((el) => {
                     return (
-                        <RowHover justify="space-evenly" align="middle" style={{ padding: 12 }} className="hover" onClick={() => el.action()}>
+                        <RowHover key={el.name+el.icon} justify="space-evenly" align="middle" style={{ padding: 12 }} className="hover" onClick={() => el.action()}>
                             <Col span={4} style={{ color: "blue" }}> {el.icon}</Col>
                             <Col span={16} >
                                 <CardTitle style={{ lineHeight: 1 }} >{el.name}</CardTitle>

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} />

src/Consumer/DashboardCards/RevenueCard.tsx

@@ -43,9 +43,9 @@ const options: ApexOptions = {
 }
 
 const RevenueCard = ({ bills = {} }) => {
-    const [electric, setElectric]: any = useState({})
-    const [gas, setGas]: any = useState({})
-    const [water, setWater]: any = useState({})
+    const [electric, setElectric] = useState<any>({})
+    const [gas, setGas] = useState<any>({})
+    const [water, setWater] = useState<any>({})
     useEffect(() => {
         if (Object.keys(bills).length === 0)
             return
@@ -59,7 +59,7 @@ const RevenueCard = ({ bills = {} }) => {
         let month
         Object.values(bills).map((el: any) => {
             month = moment(el.date).format('DD MMM');
-            if (moment(el.date).isSame(date, 'day')) {
+            if (moment(el.date).isSame(date, 'week')) {
                 totElectric += Number(el.electric)
                 totWater += Number(el.water)
                 totGas += Number(el.gas)
@@ -69,7 +69,6 @@ const RevenueCard = ({ bills = {} }) => {
                 dataGas.push({ x: month, y: totGas.toFixed(2) })
                 dataWater.push({ x: month, y: totWater.toFixed(2) })
                 date = el.date
-                console.log(totElectric)
                 totElectric = 0
                 totGas = 0
                 totWater = 0
@@ -90,9 +89,14 @@ const RevenueCard = ({ bills = {} }) => {
             </Row>
             <Col span={24}>
                 <Row justify="center">
-                    {
-                        Object.keys(bills).length <= 0 ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> :
-                            <ReactApexChart options={options} series={[electric, gas, water]} type="radar" height={390} />
+                    {Object.keys(bills).length <= 0 ?
+                        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+                        :
+                        <ReactApexChart
+                            options={options}
+                            series={[electric, gas, water]}
+                            type="radar"
+                            height={500} />
                     }
                 </Row>
             </Col>

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,13 +44,15 @@ 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 })
             })
+            sortDate(tmp)
             setAllElectricLine([{ data: tmp }])
         }
     }, [filtered, metricCubic, aggregated, cost, electricSum, bills])