web: added interval minute, profile list and profile view

apps/web/src/components/report/ReportDateRange.tsx

@@ -3,7 +3,7 @@ import { RadioGroup, RadioGroupItem } from "../ui/radio-group";
 import { changeDateRanges, changeInterval } from "./reportSlice";
 import { Combobox } from "../ui/combobox";
 import { type IInterval } from "@/types";
-import { timeRanges } from "@/utils/constants";
+import { intervals, timeRanges } from "@/utils/constants";
 
 export function ReportDateRange() {
   const dispatch = useDispatch();
@@ -14,7 +14,7 @@ export function ReportDateRange() {
   return (
     <>
       <RadioGroup>
-        {timeRanges.map(item => {
+        {timeRanges.map((item) => {
           return (
             <RadioGroupItem
               key={item.range}
@@ -25,7 +25,7 @@ export function ReportDateRange() {
             >
               {item.title}
             </RadioGroupItem>
-          )
+          );
         })}
       </RadioGroup>
       {chartType === "linear" && (
@@ -36,20 +36,10 @@ export function ReportDateRange() {
               dispatch(changeInterval(value as IInterval));
             }}
             value={interval}
-            items={[
-              {
-                label: "Hour",
-                value: "hour",
-              },
-              {
-                label: "Day",
-                value: "day",
-              },
-              {
-                label: "Month",
-                value: "month",
-              },
-            ]}
+            items={Object.entries(intervals).map(([key, value]) => ({
+              label: value,
+              value: key,
+            }))}
           />
         </div>
       )}

apps/web/src/components/report/chart/ReportLineChartTooltip.tsx

@@ -1,6 +1,7 @@
+import { useFormatDateInterval } from "@/hooks/useFormatDateInterval";
 import { useMappings } from "@/hooks/useMappings";
+import { useSelector } from "@/redux";
 import { type IToolTipProps } from "@/types";
-import { formatDate } from "@/utils/date";
 
 type ReportLineChartTooltipProps = IToolTipProps<{
   color: string;
@@ -17,6 +18,8 @@ export function ReportLineChartTooltip({
   payload,
 }: ReportLineChartTooltipProps) {
   const getLabel = useMappings();
+  const interval = useSelector((state) => state.report.interval);
+  const formatDate = useFormatDateInterval(interval);
 
   if (!active || !payload) {
     return null;

apps/web/src/components/report/reportSlice.ts

@@ -117,7 +117,9 @@ export const reportSlice = createSlice({
 
     changeDateRanges: (state, action: PayloadAction<IChartRange>) => {
       state.range = action.payload
-      if (action.payload === 0 || action.payload === 1) {
+      if (action.payload === 0.3 || action.payload === 0.6) {
+        state.interval = "minute";
+      } else if (action.payload === 0 || action.payload === 1) {
         state.interval = "hour";
       } else if (action.payload <= 30) {
         state.interval = "day";