High Street Dynamic Report Pull Request

Information.txt

@@ -0,0 +1,2 @@
+API URL config: C:\Workspace\FMS\client\src\DocConfig.js
+

client/src/App.jsx

@@ -1,12 +1,19 @@
+/*
+Main application component.
+
+Updates:
+
+11/3/2020 - Chapman Munn - added dynamic-reports route.
+*/
+
 import React from "react";
-// import ReactGA from "react-ga";
 import "@arcgis/core/assets/esri/themes/light/main.css";
 import "@progress/kendo-theme-default/dist/all.css";
 import "hammerjs";
 
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 
-import Header from "./header";
+import Header from "./Header";
 import DetectorsPage from "./pages/Detectors";
 import DetectorPage from "./pages/Detector";
 import GeneratedReportPage from "./pages/GeneratedReport";
@@ -16,6 +23,8 @@ import GeneratedReportsPage from "./pages/GeneratedReports";
 import NewCorridorPage from "./pages/NewCorridor";
 
 import { DataProvider } from "./stores/DataContext";
+import ReportBuilderDynamic from "./pages/ReportBuilderDynamic";
+import ReportBuilder from "./pages/ReportBuilder";
 
 function App() {
   //     const TRACKING_ID = "UA-29422512-1";
@@ -28,18 +37,19 @@ function App() {
   const isProduction = import.meta.env.PROD;
   const basename = isProduction ? "/fms/test" : "";
   return (
-    <div className="h-screen">
+    <div className="h-full w-full">
       <DataProvider>
         <Router basename={basename}>
           <Header />
-          <div className="h-20"></div>
+          {/* <div className="h-20"></div> */}
           <Routes>
             <Route exact path="/" element={<DetectorsPage />} />
             <Route path="detector/:year/:id" element={<DetectorPage />} />
             <Route path="report/:id" element={<GeneratedReportPage />} />
             <Route path="reports" element={<GeneratedReportsPage />} />
             <Route path="corridors" element={<CorridorsPage />} />
-            <Route path="report-builder" element={<ReportBuilderPage />} />
+            <Route path="report-builder" element={<ReportBuilder />} />
+            <Route path="report-builder-dynamic" element={<ReportBuilderDynamic />} />
             <Route path="add-corridor" element={<NewCorridorPage />} />
           </Routes>
         </Router>

client/src/Header.jsx

@@ -1,21 +1,25 @@
+/*
+Application header component
+*/
+
 import React from "react";
 import logo from "./images/fmsLogo.png";
 import magLogo from "./images/mag-logo-black.png";
 import { useNavigate, useLocation } from "react-router-dom";
 
-
 export default function Header() {
     const navigate = useNavigate();
     const { pathname } = useLocation();
     const links = [
         { text: "Detectors", toLink: "/" },
         { text: "Corridors", toLink: "/corridors" },
         { text: "Report Builder", toLink: "/report-builder" },
+        { text: "Dynamic Report", toLink: "/report-builder-dynamic" },
         { text: "Reports History", toLink: "/reports" },
-        // { text: "Admin", toLink: "/admin" },
+        { text: "Admin", toLink: "/admin" },
     ];
     return (
-        <header className="fixed inset-x-0 top-0 z-50 flex h-20 w-full flex-wrap border-b border-gray-200 bg-white">
+        <header className="inset-x-0 top-0 z-50 flex w-full flex-wrap border-b border-gray-200 bg-white">
             <div className="container mx-auto my-2.5 flex px-6">
             <div className="flex flex-row items-center">
             <a href="https://azmag.gov/">

client/src/components/DynamicReport/Charts/AnnualAverageByLane.jsx

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import { getSingleSeriesByField } from "./chartDataHelpers";
+import LineChart from "./LineChart";
+import LoadingChart from "../../Loaders/loadingChart";
+import { apiUrl } from "../../../DocConfig";
+
+axios.defaults.withCredentials = true;
+
+export default function AnnualAverageByLane({ det_num, startDate, endDate }) {
+    const [series, setSeries] = useState([]);
+    const [labels, setLabels] = useState([]);
+
+    useEffect(() => {
+        (async () => {
+
+            let res = null;
+
+            res = await axios.get (
+                `${apiUrl}/Detector/AvgVolumeByLaneByParams`,
+                {
+                    params : {
+                        det_num : det_num,
+                        startDate : startDate,
+                        endDate : endDate
+
+                    }
+                }
+            );
+
+            const _data = res.data.sort((a, b) => a.lane.localeCompare(b.lane));
+            const _labels = _data.map((d) => d.lane);
+
+            const _series = getSingleSeriesByField(
+                res.data,
+                "avg_daily_traffic"
+            );
+
+            setSeries(_series);
+            setLabels(_labels);
+        })();
+    }, [det_num, setSeries, setLabels]);
+    return (
+        <div id="annual-avg-by-lane">
+            {series.length ? (
+                <LineChart
+                    field="avg_daily_traffic"
+                    series={series}
+                    title="Annual Average by Lane - raw data with zero values and without"
+                    catTitle="ADT"
+                    valueTitle=""
+                    labels={labels}
+                />
+            ) : (
+                <LoadingChart />
+            )}
+        </div>
+    );
+}

client/src/components/DynamicReport/Charts/AnnualHourlyAverageOccupancyPercent.jsx

@@ -0,0 +1,69 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import {
+    getTimeLabels,
+    sortTimeData,
+    getMultipleSeriesByField,
+} from "./chartDataHelpers";
+import LineChart from "./LineChart";
+import LoadingChart from "../../Loaders/loadingChart";
+import { apiUrl } from "../../../DocConfig";
+
+axios.defaults.withCredentials = true;
+
+export default function AnnualHourlyAverageOccupancyPercent({det_num, startDate, endDate}) {
+    const [series, setSeries] = useState([]);
+    const [dateLabels, setDateLabels] = useState([]);
+
+    useEffect(() => {
+        (async () => {
+            let res = null;
+
+            res = await axios.get (
+                `${apiUrl}/Detector/AvgHourlyOccupancyByParams`,
+                {
+                    params : {
+                        det_num : det_num,
+                        startDate : startDate,
+                        endDate : endDate
+
+                    }
+                }
+            );
+
+            const _data = res.data.sort((a, b) => {
+                return a.min_since - b.min_since;
+            });
+
+            const _dateLabels = getTimeLabels(
+                _data.filter((row) => row.lane_type === "All Lanes")
+            );
+            const _series = getMultipleSeriesByField(
+                _data,
+                "lane_type",
+                "avg_occupancy_pct"
+            );
+
+            setSeries(_series);
+            setDateLabels(_dateLabels);
+        })();
+    }, [setSeries, setDateLabels]);
+    return (
+        <>
+            {series.length ? (
+                <div id="annual-avg-hourly-occupancy">
+                    <LineChart
+                        field="avg_occupancy" // originally called avg_occupancy_pct
+                        series={series}
+                        title="Annual Hourly Average Occupancy Percent - Weekdays"
+                        catTitle="Average Occupancy Percent"
+                        valueTitle=""
+                        labels={dateLabels}
+                    />
+                </div>
+            ) : (
+                <LoadingChart />
+            )}
+        </>
+    );
+}

client/src/components/DynamicReport/Charts/AnnualHourlyAverageSpeeds.jsx

@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import { getTimeLabels, getMultipleSeriesByField } from "./chartDataHelpers";
+import LineChart from "./LineChart";
+import LoadingChart from "../../Loaders/loadingChart";
+import { apiUrl } from "../../../DocConfig";
+
+axios.defaults.withCredentials = true;
+
+export default function AnnualHourlyAverageSpeeds({det_num, startDate, endDate}) {
+    const [series, setSeries] = useState([]);
+    const [dateLabels, setDateLabels] = useState([]);
+
+    console.log(det_num, startDate, endDate)
+
+    useEffect(() => {
+        (async () => {
+            let res = null;
+
+            res = await axios.get (
+                `${apiUrl}/Detector/AvgHourlySpeedByParams`,
+                {
+                    params : {
+                        det_num : det_num,
+                        startDate : startDate,
+                        endDate : endDate
+
+                    }
+                }
+            );
+
+            const _data = res.data.sort((a, b) => {
+                return a.min_since - b.min_since;
+            });
+
+            const _dateLabels = getTimeLabels(
+                _data.filter((row) => row.lane_type === "All Lanes")
+            );
+            const _series = getMultipleSeriesByField(
+                _data,
+                "lane_type",
+                "avg_speed"
+            );
+
+            setSeries(_series);
+            setDateLabels(_dateLabels);
+        })();
+    }, [setSeries, setDateLabels]);
+    return (
+        <div id="annual-avg-hourly-speed">
+            {series.length ? (
+                <LineChart
+                    field="avg_speed"
+                    series={series}
+                    title="Annual Hourly Average Speeds - Weekdays"
+                    catTitle="Average Speed (mph)"
+                    valueTitle=""
+                    labels={dateLabels}
+                />
+            ) : (
+                <LoadingChart />
+            )}
+        </div>
+    );
+}

client/src/components/DynamicReport/Charts/AnnualHourlyAverageThroughput.jsx

@@ -0,0 +1,69 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import {
+    getTimeLabels,
+    getMultipleSeriesByField,
+    sortTimeData,
+} from "./chartDataHelpers";
+import LineChart from "./LineChart";
+import LoadingChart from "../../Loaders/loadingChart";
+import { apiUrl } from "../../../DocConfig";
+
+axios.defaults.withCredentials = true;
+
+export default function AnnualHourlyAverageThroughput({det_num, startDate, endDate }) {
+    // const [setData] = useState(null);
+    const [series, setSeries] = useState([]);
+    const [dateLabels, setDateLabels] = useState([]);
+
+    useEffect(() => {
+        (async () => {
+            let res = null;
+
+            res = await axios.get (
+                `${apiUrl}/Detector/AvgHourlyThroughputByParams`,
+                {
+                    params : {
+                        det_num : det_num,
+                        startDate : startDate,
+                        endDate : endDate
+
+                    }
+                }
+            );
+
+
+            const _data = res.data.sort((a, b) => {
+                return a.min_since - b.min_since;
+            });
+
+            const _dateLabels = getTimeLabels(
+                _data.filter((row) => row.lane_type === "All Lanes")
+            );
+            const _series = getMultipleSeriesByField(
+                _data,
+                "lane_type",
+                "avg_throughput"
+            );
+
+            setSeries(_series);
+            setDateLabels(_dateLabels);
+        })();
+    }, [setSeries, setDateLabels]);
+    return (
+        <div id="annual-avg-hourly-throughput">
+            {series.length ? (
+                <LineChart
+                    field="avg_throughput"
+                    series={series}
+                    title="Annual Hourly Average Throughput - Weekdays"
+                    catTitle="Average Volume Per Lane"
+                    valueTitle=""
+                    labels={dateLabels}
+                />
+            ) : (
+                <LoadingChart />
+            )}
+        </div>
+    );
+}