working version before refactore

typescript/Frontend/package.json

@@ -11,7 +11,6 @@
     "@mui/lab": "^5.0.0-alpha.120",
     "@mui/material": "^5.11.7",
     "@mui/x-date-pickers": "^6.5.0",
-    "@mui/x-date-pickers-pro": "^6.5.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -60,7 +59,15 @@
     "extends": [
       "react-app",
       "react-app/jest"
-    ]
+    ],
+    "plugins": [
+      "formatjs"
+    ],
+    "rules": {
+      "formatjs/enforce-default-message": "warn",
+      "formatjs/enforce-id": "warn",
+      "formatjs/no-literal-string-in-jsx": "warn"
+    }
   },
   "browserslist": {
     "production": [
@@ -76,6 +83,7 @@
   },
   "devDependencies": {
     "@formatjs/cli": "^6.0.3",
-    "@types/react-plotly.js": "^2.6.0"
+    "@types/react-plotly.js": "^2.6.0",
+    "eslint-plugin-formatjs": "^4.10.1"
   }
 }

typescript/Frontend/src/components/Installations/Log/CheckboxTree.tsx

@@ -32,10 +32,6 @@ const CheckboxTree = () => {
     if (children.length > 0) {
       children.forEach((child) => {
         setCheckedToggles((prevState) => {
-          console.log("setChecked", {
-            ...prevState,
-            [child.id]: !checked,
-          });
           return {
             ...prevState,
             [child.id]: !checked,
@@ -63,7 +59,6 @@ const CheckboxTree = () => {
     event.stopPropagation();
   };
   const renderTree = (data: TreeElement[]): ReactNode => {
-    console.log("checkedToggles", checkedToggles);
     return data.map((element) => {
       const checked = checkedToggles?.[element.id];
       const splitName = element.name.split("/");
@@ -98,7 +93,6 @@ const CheckboxTree = () => {
         <>
           <Divider sx={{ mt: 2 }} />
           <TreeView
-            aria-label="rich object"
             defaultCollapseIcon={<ExpandMoreIcon />}
             defaultExpandIcon={<ChevronRightIcon />}
             sx={{

typescript/Frontend/src/components/Installations/Log/DateRangePicker.tsx

@@ -1,62 +1,80 @@
 import * as React from "react";
-import dayjs, { Dayjs } from "dayjs";
+import { Button, Dialog, DialogContent, DialogTitle } from "@mui/material";
-import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { useState } from "react";
+import { UnixTime, TimeSpan } from "../../../dataCache/time";
+import { createTimes } from "../../../util/graph.util";
+import { DatePicker, LocalizationProvider } from "@mui/x-date-pickers";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
-import { StaticDateRangePicker } from "@mui/x-date-pickers-pro/StaticDateRangePicker";
+import dayjs from "dayjs";
-import { PickersShortcutsItem } from "@mui/x-date-pickers/PickersShortcuts";
+import InnovenergyButton from "../../Layout/InnovenergyButton";
-import { DateRange } from "@mui/x-date-pickers-pro";
 
-const shortcutsItems: PickersShortcutsItem<DateRange<Dayjs>>[] = [
+interface DateRangePickerProps {
-  {
+  setRange: (value: Date[]) => void;
-    label: "This Week",
+  range: Date[];
-    getValue: () => {
+  getCacheSeries: (xaxisRange0: number, xaxisRange1: number) => void;
-      const today = dayjs();
+}
-      return [today.startOf("week"), today.endOf("week")];
+const DateRangePicker = (props: DateRangePickerProps) => {
-    },
+  const { setRange, range, getCacheSeries } = props;
-  },
+  const [open, setOpen] = useState(false);
-  {
-    label: "Last Week",
-    getValue: () => {
-      const today = dayjs();
-      const prevWeek = today.subtract(7, "day");
-      return [prevWeek.startOf("week"), prevWeek.endOf("week")];
-    },
-  },
-  {
-    label: "Last 7 Days",
-    getValue: () => {
-      const today = dayjs();
-      return [today.subtract(7, "day"), today];
-    },
-  },
-  {
-    label: "Current Month",
-    getValue: () => {
-      const today = dayjs();
-      return [today.startOf("month"), today.endOf("month")];
-    },
-  },
-  {
-    label: "Next Month",
-    getValue: () => {
-      const today = dayjs();
-      const startOfNextMonth = today.endOf("month").add(1, "day");
-      return [startOfNextMonth, startOfNextMonth.endOf("month")];
-    },
-  },
-  { label: "Reset", getValue: () => [null, null] },
-];
 
-export default function BasicRangeShortcuts() {
   return (
+    <>
+      <InnovenergyButton onClick={() => setOpen(true)}>
+        Set range
+      </InnovenergyButton>
+      <Dialog open={open} maxWidth="lg" onClose={() => setOpen(false)}>
+        <DialogTitle id="dialog-title">Set range</DialogTitle>
+        <DialogContent>
+          <div>
+            <Button
+              onClick={() => {
+                const weekRange = createTimes(
+                  UnixTime.now().rangeBefore(TimeSpan.fromDays(7)),
+                  100
+                );
+                setRange([
+                  weekRange[0].toDate(),
+                  weekRange[weekRange.length - 1].toDate(),
+                ]);
+                getCacheSeries(
+                  weekRange[0].ticks,
+                  weekRange[weekRange.length - 1].ticks
+                );
+              }}
+            >
+              Last week
+            </Button>
+          </div>
           <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <StaticDateRangePicker
+            <DatePicker
-        slotProps={{
+              label="From date"
-          shortcuts: {
+              value={dayjs(range[0])}
-            items: shortcutsItems,
+              onChange={(newValue) => {
-          },
+                if (newValue) {
+                  const fromDate = newValue.toDate();
+                  const toDate = range[1];
+                  setRange([fromDate, toDate]);
+                  getCacheSeries(+fromDate, +toDate);
+                }
+              }}
+            />
+            <DatePicker
+              label="To date"
+              value={dayjs(range[1])}
+              onChange={(newValue) => {
+                if (newValue) {
+                  const fromDate = newValue.toDate();
+                  const toDate = range[1];
+                  setRange([fromDate, toDate]);
+                  getCacheSeries(+fromDate, +toDate);
+                }
               }}
             />
           </LocalizationProvider>
+        </DialogContent>
+      </Dialog>
+    </>
   );
-}
+};
+
+export default DateRangePicker;

typescript/Frontend/src/components/Installations/Log/ScalarGraph.tsx

@@ -19,14 +19,17 @@ import { LogContext } from "../../Context/LogContextProvider";
 import { TreeElement } from "./CheckboxTree";
 import { isDefined } from "../../../dataCache/utils/maybe";
 import { Data, Layout } from "plotly.js";
-import { Alert } from "@mui/material";
+import { Alert, Button, ToggleButton, ToggleButtonGroup } from "@mui/material";
+import DateRangePicker from "./DateRangePicker";
+import { LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 
 const NUMBER_OF_NODES = 100;
 
 const ScalarGraph = () => {
   const timeRange = createTimes(
     UnixTime.now() /* .fromTicks(1682085650) */
-      .earlier(TimeSpan.fromDays(2))
+      .earlier(TimeSpan.fromDays(7))
       .rangeBefore(TimeSpan.fromDays(4)),
     NUMBER_OF_NODES
   );
@@ -149,6 +152,18 @@ const ScalarGraph = () => {
         );
   };
 
+  const getCacheSeries = (xaxisRange0: number, xaxisRange1: number) => {
+    const times = createTimes(
+      TimeRange.fromTimes(
+        UnixTime.fromDate(new Date(xaxisRange0)),
+        UnixTime.fromDate(new Date(xaxisRange1))
+      ),
+      NUMBER_OF_NODES
+    );
+    cache.getSeries(times);
+    times$.next(times);
+  };
+
   const renderGraphs = () => {
     if (checkedToggles) {
       const coordinateTimeSeries = transformToGraphData(timeSeries);
@@ -156,7 +171,16 @@ const ScalarGraph = () => {
         return checkedToggles[path];
       });
       if (visibleGraphs.length > 0) {
-        return visibleGraphs.map((path) => {
+        return (
+          <>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <DateRangePicker
+                setRange={setRange}
+                range={range}
+                getCacheSeries={getCacheSeries}
+              />
+            </LocalizationProvider>
+            {visibleGraphs.map((path) => {
               const isScalar = isNumeric(coordinateTimeSeries[path].y[0]);
               const data = isScalar
                 ? [
@@ -204,26 +228,24 @@ const ScalarGraph = () => {
                     ],
                   }}
                   onRelayout={(params) => {
+                    console.log("relayout");
                     const xaxisRange0 = params["xaxis.range[0]"];
                     const xaxisRange1 = params["xaxis.range[1]"];
 
                     if (xaxisRange0 && xaxisRange1) {
                       setRange([new Date(xaxisRange0), new Date(xaxisRange1)]);
                       setUiRevision(Math.random());
-                  const times = createTimes(
+                      console.log("ranges", xaxisRange0);
-                    TimeRange.fromTimes(
+                      getCacheSeries(xaxisRange0, xaxisRange1);
-                      UnixTime.fromDate(new Date(xaxisRange0)),
-                      UnixTime.fromDate(new Date(xaxisRange1))
-                    ),
-                    NUMBER_OF_NODES
-                  );
-                  cache.getSeries(times);
-                  times$.next(times);
                     }
                   }}
+                  onRestyle={() => "event restyle"}
+                  onRedraw={() => "event restyle"}
                 />
               );
-        });
+            })}
+          </>
+        );
       }
       return (
         <Alert sx={{ mt: 2 }} severity="info">

typescript/Frontend/src/components/Layout/Table.tsx

@@ -36,7 +36,7 @@ const rows = [
 const BasicTable = () => {
   return (
     <TableContainer component={Paper}>
-      <Table aria-label="simple table">
+      {/*       <Table aria-label="simple table">
         <TableHead>
           <TableRow>
             <TableCell>Device</TableCell>
@@ -57,7 +57,7 @@ const BasicTable = () => {
             </TableRow>
           ))}
         </TableBody>
-      </Table>
+      </Table> */}
     </TableContainer>
   );
 };

typescript/Frontend/src/components/Users/AddUser.tsx

@@ -9,11 +9,11 @@ import UserForm from "./UserForm";
 
 const AddUser = () => {
   const [open, setOpen] = useState(false);
-  const { locale } = useIntl();
+  const intl = useIntl();
 
   const handleSubmit = (data: Partial<I_User>) => {
     return axiosConfig
-      .post("/CreateUser", { ...data, password: "", language: locale })
+      .post("/CreateUser", { ...data, password: "", language: intl.locale })
       .then((res) => {
         setOpen(false);
         return res;
@@ -42,12 +42,14 @@ const AddUser = () => {
         maxWidth="sm"
       >
         <DialogTitle>
-          Create new user
+          <FormattedMessage
+            id="createNewUser"
+            defaultMessage="Create new user"
+          />
           <IconButton
             edge="start"
             color="inherit"
             onClick={() => setOpen(false)}
-            aria-label="close"
             sx={{
               position: "absolute",
               right: 8,

typescript/Frontend/src/components/Users/UserTabs.tsx

@@ -17,7 +17,10 @@ const UserTabs = () => {
       <AntTabs
         id="users-tabs"
         value={routeMatch?.pattern?.path ?? routes.user + ":id"}
-        aria-label="user tabs"
+        aria-label={intl.formatMessage({
+          id: "userTabs",
+          defaultMessage: "user tabs",
+        })}
       >
         <StyledTab
           id="users-tab-user"

typescript/Frontend/src/util/graph.util.tsx

@@ -38,9 +38,6 @@ export const parseCsv = (text: string) => {
     .split(/\r?\n/)
     .filter((split) => split.length > 0)
     .map((l) => {
-      if (l.length === 0) {
-        console.log("splitting", l, l.split(";"));
-      }
       return l.split(";");
     });