Merge pull request #1081 from boxwise/dashboard+ux

Dashboard+ux
boxwise · Nov 3, 2023 · fab5c7a · fab5c7a
2 parents 94da292 + 18b5e95
commit fab5c7a
Show file tree

Hide file tree

Showing 33 changed files with 911 additions and 703 deletions.
diff --git a/back/boxtribute_server/routes.py b/back/boxtribute_server/routes.py
@@ -34,11 +34,6 @@ def handle_auth_error(ex):
     return response
 
 
-@api_bp.route("/public", methods=["GET"])
-def public():
-    return PLAYGROUND_HTML, 200
-
-
 @api_bp.route("/", methods=["GET"])
 def query_api_playground():
     return PLAYGROUND_HTML, 200
@@ -128,3 +123,8 @@ def graphql_playgroud():
     # but keep on mind this will not prohibit clients from
     # exploring your API using desktop GraphQL Playground app.
     return PLAYGROUND_HTML, 200
+
+
+@api_bp.route("/public", methods=["GET"])
+def public():
+    return PLAYGROUND_HTML, 200
diff --git a/statviz/src/App.tsx b/statviz/src/App.tsx
@@ -1,17 +1,27 @@
 import { Route, Routes } from "react-router-dom";
 import DemographicView from "./views/Statistics/DemographicView";
-import BoxView from "./views/Statistics/BoxView";
-import ProductRankView from "./views/Statistics/TopProductsView";
-import Dashboard from "./views/Statistics/Dashboard";
+import Dashboard from "./views/Dashboard/Dashboard";
+import CreatedBoxes from "./views/Statistics/components/CreatedBoxes";
+import TopProducts from "./views/Statistics/components/TopProducts";
 
 function App() {
   return (
     <Routes>
       <Route index />
-      <Route path="demographic" element={<DemographicView />} />
-      <Route path="boxes" element={<BoxView />} />
-      <Route path="product-rank" element={<ProductRankView />} />
-      <Route path="dashboard" element={<Dashboard />} />
+      <Route path="bases">
+        <Route path=":baseId">
+          <Route index element={<Dashboard />} />
+          <Route
+            path="created-boxes"
+            element={<CreatedBoxes width="800px" height="800px" />}
+          />
+          <Route
+            path="product-rank"
+            element={<TopProducts width="800px" height="800px" />}
+          />
+          <Route path="demographic" element={<DemographicView />} />
+        </Route>
+      </Route>
     </Routes>
   );
 }

diff --git a/statviz/src/components/Form/DateField.tsx b/statviz/src/components/Form/DateField.tsx
@@ -1,4 +1,10 @@
-import { FormControl, FormErrorMessage, FormLabel, Input, Text } from "@chakra-ui/react";
+import {
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Input,
+  Text,
+} from "@chakra-ui/react";
 import { Controller } from "react-hook-form";
 
 export interface IDateFieldProps {
@@ -13,6 +19,7 @@ export interface IDateFieldProps {
   minDate?: any;
   // eslint-disable-next-line react/require-default-props
   maxDate?: any;
+  onInput?: (event: any) => void;
 }
 
 function DateField({
@@ -61,7 +68,9 @@ function DateField({
           />
         )}
       />
-      <FormErrorMessage>{!!errors[fieldId] && errors[fieldId].message}</FormErrorMessage>
+      <FormErrorMessage>
+        {!!errors[fieldId] && errors[fieldId].message}
+      </FormErrorMessage>
     </FormControl>
   );
 }

diff --git a/statviz/src/components/custom-graphs/BarChartCenterAxis.tsx b/statviz/src/components/custom-graphs/BarChartCenterAxis.tsx
@@ -6,6 +6,7 @@ import { Group } from "@visx/group";
 import { scaleLinear } from "@visx/scale";
 import { Bar } from "@visx/shape";
 import { localPoint } from "@visx/event";
+import { Box } from "@chakra-ui/react";
 
 type TooltipData = string;
 
@@ -111,6 +112,7 @@ export default function BarChartCenterAxis(chart: IBarChartCenterAxis) {
 
   return (
     <>
+      <Box h="50px" w={fields.width} backgroundColor="white"></Box>
       <svg
         width={fields.width}
         height={fields.height}

diff --git a/statviz/src/components/custom-graphs/BarChartVertical.tsx b/statviz/src/components/custom-graphs/BarChartVertical.tsx