Fix zooming issues

Author: BlueManCZ

src/client/apps/contwatch-client/app/[lang]/inspector/components/InspectorChart/InspectorChart.tsx

@@ -82,6 +82,17 @@ export const InspectorChart: FC<InspectorChartProps> = ({ attributes = [], date,
         };
     }, []);
 
+    options.scales = {
+        ...options.scales,
+        x: {
+            ...options.scales?.x,
+            time: {
+                unit: "hour",
+                tooltipFormat: lng === "cs" ? "d.MM.yyyy HH:mm:ss" : "",
+            },
+        },
+    };
+
     const data = {
         datasets:
             attributeChartData?.map((attributeChart) => ({
@@ -129,22 +140,7 @@ export const InspectorChart: FC<InspectorChartProps> = ({ attributes = [], date,
             </Flex>
             <div className={bem("chart")}>
                 <Line
-                    {...{
-                        options: {
-                            ...options,
-                            scales: {
-                                ...options.scales,
-                                x: {
-                                    ...options.scales.x,
-                                    time: {
-                                        ...options.scales.x.time,
-                                        tooltipFormat: lng === "cs" ? "d.MM.yyyy HH:mm:ss" : undefined,
-                                    },
-                                },
-                            },
-                        } as ChartOptions<"line">,
-                        data,
-                    }}
+                    {...{ options: options as ChartOptions<"line">, data }}
                     ref={(ref) => setRef(ref as unknown as Chart)}
                     onWheel={() => setZoomLevel(ref?.getZoomLevel?.() ?? 1)}
                     onTouchEnd={() => setZoomLevel(ref?.getZoomLevel?.() ?? 1)}

src/client/apps/contwatch-client/app/[lang]/inspector/components/InspectorChart/chartOptions.ts

@@ -14,6 +14,7 @@ export const options = {
             type: "time",
             time: {
                 unit: "hour",
+                tooltipFormat: "",
             },
             beginAtZero: true,
         },

src/client/apps/contwatch-client/public/icons/chevron-down.svg

@@ -6,8 +6,9 @@ export type IconType =
     | "arrow-right-up"
     | "arrow-up-square"
     | "branch-horizontal"
-    | "circle"
     | "chart-square"
+    | "chevron-down"
+    | "circle"
     | "cross-small"
     | "edit-square"
     | "grid-mixed"

src/client/packages/types/src/IconType.d.ts

@@ -95,6 +95,8 @@
     &__icon {
         position: absolute;
         right: 1.2rem;
+        pointer-events: none;
+        user-select: none;
     }
 
     &--hasIcon {

src/client/packages/ui/src/components/Input/Input.module.scss

@@ -57,6 +57,10 @@ export const Input: FC<InputProps> = ({
     onValueChange,
     onNumberChange,
 }) => {
+    if (type === "pick" && !icon) {
+        icon = "chevron-down";
+    }
+
     const offsetValue = (offset: number) => {
         return processValue(
             parseLocalizedFloat(valueState !== "" ? valueState : "0", currentLocale) + offset,