Merge pull request #130 from DNO-inc/dev

Completed development of statistics v1.0

public/locales/en/translation.json

@@ -14,6 +14,7 @@
     "12": "Dec."
   },
   "common": {
+    "tickets": "Tickets",
     "q/a": "Q/A",
     "reports": "Reports",
     "suggestion": "Suggestions",
@@ -133,7 +134,7 @@
     "scopes": {
       "reportsTitle": "Reports",
       "q/aTitle": "Questions",
-      "suggestionsTitle": "Suggestions"
+      "suggestionTitle": "Suggestions"
     },
     "showAll": "Show all"
   },
@@ -254,7 +255,11 @@
   "statistic": {
     "heading": "Statistic",
     "activitySummary": {
-      "heading": "Activity summary"
+      "heading": "Activity summary",
+      "processingTime": "Processing time",
+      "users": "Users",
+      "hours": "h",
+      "days": "d"
     },
     "scopeStatistic": {
       "heading": "Tickets processed"

public/locales/ua/translation.json

@@ -14,6 +14,7 @@
     "12": "Груд."
   },
   "common": {
+    "tickets": "Звернень",
     "q/a": "Питання",
     "reports": "Скарги",
     "suggestion": "Пропозиції",
@@ -133,7 +134,7 @@
     "scopes": {
       "reportsTitle": "Скарги",
       "q/aTitle": "Питання",
-      "suggestionsTitle": "Пропозиції"
+      "suggestionTitle": "Пропозиції"
     },
     "showAll": "Показати всі"
   },
@@ -254,7 +255,11 @@
   "statistic": {
     "heading": "Статистика",
     "activitySummary": {
-      "heading": "Підсумок діяльності"
+      "heading": "Підсумкова діяльність",
+      "processingTime": "Час обробки",
+      "users": "Користувачів",
+      "hours": "г",
+      "days": "д"
     },
     "scopeStatistic": {
       "heading": "Звернень оброблено"

src/components/StatisticCard/StatisticCard.tsx

@@ -31,7 +31,7 @@ const StatisticCard: FC<StatisticCardProps> = ({
         flexDirection: "column",
         gap: "20px",
         p: "15px 20px",
-        width: `${width}px`,
+        minWidth: `${width}px`,
         height: `fit-content`,
         borderRadius: 1,
         bgcolor: palette.grey.card,

src/index.css

@@ -54,6 +54,24 @@ select {
   }
 }
 
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
 .scroll::-webkit-scrollbar {
   width: 8px;
   height: 8px;

src/pages/Statistic/Statistic.tsx

@@ -1,39 +1,35 @@
-import { FC, useEffect } from "react";
+import { FC } from "react";
 import { useTranslation } from "react-i18next";
 
 import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid";
 import Typography from "@mui/material/Typography";
+import useTheme from "@mui/material/styles/useTheme";
 
 import { StatusesStatistic } from "./components/StatusesStatistic";
 import { ActivitySummary } from "./components/ActivitySummary";
 import { ScopesStatistic } from "./components/ScopesStatistic";
 import { FacultiesStatistic } from "./components/FacultiesStatistic";
 
 import {
-  useGetFacultyStatisticQuery,
-  useGetGeneralStatisticMutation,
+  useGetPeriodStatisticQuery,
   useGetSummaryActivityQuery,
 } from "api/statistic.api";
+import IPalette from "theme/IPalette.interface";
 
 export interface IPeriodStatus {
   date: string;
   status_id: number;
-  status_name: string;
+  name: string;
   tickets_count: number;
 }
 
 const Statistic: FC = () => {
   const { t } = useTranslation();
+  const { palette }: IPalette = useTheme();
 
   const { data: summaryActivity } = useGetSummaryActivityQuery({});
-  const { data: facultiesStatistic } = useGetFacultyStatisticQuery({});
-  const [getStatistics, { data: generalStatistic }] =
-    useGetGeneralStatisticMutation();
-
-  useEffect(() => {
-    getStatistics(JSON.stringify({}));
-  }, []);
+  const { data: generalStatistic } = useGetPeriodStatisticQuery({});
 
   return (
     <Grid container>
@@ -44,21 +40,39 @@ const Statistic: FC = () => {
         sx={{
           display: "grid",
           gap: "20px",
-          gridTemplateAreas: `"statuses activities faculties" 
-                              "statuses scopes     faculties"
-                              "statuses none       none"`,
+          gridTemplateAreas: `"statuses faculties faculties" 
+                              "statuses scopes     activities"`,
           pt: "100px !important",
+          overflowX: "auto",
+          pb: 2,
+          "&::-webkit-scrollbar": {
+            height: "8px",
+          },
+          "&::-webkit-scrollbar-thumb": {
+            background: palette.grey.divider,
+            borderRadius: "4px",
+          },
+          "&::-webkit-scrollbar-thumb:hover": {
+            background: "#555",
+          },
+          "&": {
+            scrollbarWidth: "thin",
+            scrollbarColor: "#555 #212125",
+          },
+          "&:hover": {
+            scrollbarColor: "#555 #212125",
+          },
         }}
       >
-        {generalStatistic && (
+        {generalStatistic?.statuses && (
           <StatusesStatistic statusesStatistic={generalStatistic.statuses} />
         )}
-        {generalStatistic && (
+        {generalStatistic?.scopes && (
           <ScopesStatistic calendarStatistic={generalStatistic.scopes} />
         )}
-        {facultiesStatistic && (
+        {generalStatistic?.faculty_scopes && (
           <FacultiesStatistic
-            facultiesStatistic={facultiesStatistic.faculties_data}
+            facultiesStatistic={generalStatistic?.faculty_scopes}
           />
         )}
         {summaryActivity && (

src/pages/Statistic/components/ActivitySummary/ActivitySummary.tsx

@@ -1,4 +1,5 @@
 import { FC } from "react";
+import { useTranslation } from "react-i18next";
 
 import Box from "@mui/material/Box";
 import useTheme from "@mui/material/styles/useTheme";
@@ -21,6 +22,7 @@ interface ActivitySummaryProps {
 }
 
 const ActivitySummary: FC<ActivitySummaryProps> = ({ summaryActivity }) => {
+  const { t } = useTranslation();
   const { palette }: IPalette = useTheme();
 
   const { average_process_time, tickets_processed, users_registered } =
@@ -29,31 +31,25 @@ const ActivitySummary: FC<ActivitySummaryProps> = ({ summaryActivity }) => {
   const activityList = [
     {
       icon: processingTime,
-      stat: `${average_process_time} d`,
-      title: "Processing time",
-      percent: "+10% from yesterday",
-      color: "#B59469",
+      stat: `${average_process_time} ${t("statistic.activitySummary.days")}`,
+      title: t("statistic.activitySummary.processingTime"),
     },
     {
       icon: ticketsCount,
       stat: tickets_processed,
-      title: "Tickets",
-      percent: "+8% from yesterday",
-      color: "#A9DFD8",
+      title: t("common.tickets"),
     },
     {
       icon: usersCount,
       stat: users_registered,
-      title: "Users",
-      percent: "+3% from yesterday",
-      color: "#20AEF3",
+      title: t("statistic.activitySummary.users"),
     },
   ];
 
   return (
     <StatisticCard
       title={"activitySummary"}
-      width={320}
+      width={350}
       styles={{ gridArea: "activities" }}
     >
       <Box
@@ -69,17 +65,10 @@ const ActivitySummary: FC<ActivitySummaryProps> = ({ summaryActivity }) => {
         }}
       >
         {activityList.map((activity, index) => {
-          const { icon, stat, title, percent, color } = activity;
+          const { icon, stat, title } = activity;
 
           return (
-            <ActivityTile
-              icon={icon}
-              stat={stat}
-              title={title}
-              percent={percent}
-              color={color}
-              key={index}
-            />
+            <ActivityTile icon={icon} stat={stat} title={title} key={index} />
           );
         })}
       </Box>

src/pages/Statistic/components/ActivitySummary/components/ActivityTile/ActivityTile.tsx

@@ -1,16 +1,19 @@
 import { FC } from "react";
 
 import Box from "@mui/material/Box";
+import useTheme from "@mui/material/styles/useTheme";
+
+import IPalette from "theme/IPalette.interface";
 
 interface ActivityTileProps {
   icon: any;
   stat: number | string;
   title: string;
-  percent: string;
-  color: string;
 }
 
 const ActivityTile: FC<ActivityTileProps> = ({ icon, stat, title }) => {
+  const { palette }: IPalette = useTheme();
+
   return (
     <Box
       sx={{
@@ -33,7 +36,7 @@ const ActivityTile: FC<ActivityTileProps> = ({ icon, stat, title }) => {
           gap: 5,
         }}
       >
-        <div style={{ fontSize: 16 }}>{stat}</div>
+        <div style={{ fontSize: 16, color: palette.semantic.info }}>{stat}</div>
         <div style={{ fontSize: 12 }}>{title}</div>
       </div>
     </Box>