feat: advanced graph

app/.server/data-layer/controllerTemperatures.ts

@@ -3,7 +3,9 @@ import {
   desc,
   eq,
   getTableColumns,
+  gte,
   inArray,
+  lt,
   min,
   ne,
   not,
@@ -59,6 +61,34 @@ export const getControllerTemperaturesFromBatchId = async (batchId: number) => {
     );
 };
 
+export const getControllerTemperaturesFromBatchIdByDay = async (
+  batchId: number,
+  fromDay: number,
+  fromHour: number,
+) => {
+  return await db
+    .select({
+      ...getTableColumns(controllerTemperatures),
+    })
+    .from(controllerTemperatures)
+    .innerJoin(batches, eq(batches.id, controllerTemperatures.batchId))
+    .where(
+      and(
+        eq(controllerTemperatures.batchId, batchId),
+        ne(controllerTemperatures.temperature, 85),
+        ne(controllerTemperatures.temperature, -127),
+        gte(
+          controllerTemperatures.timestamp,
+          sql`unixepoch(datetime(${batches.fermentationStartDate}, 'auto','${sql.raw(`+${fromDay} day`)}', '${sql.raw(`+${fromHour} hour`)}'))`,
+        ),
+        lt(
+          controllerTemperatures.timestamp,
+          sql`unixepoch(datetime(${batches.fermentationStartDate}, 'auto','${sql.raw(`+${fromDay} day`)}', '${sql.raw(`+${fromHour + 6} hour`)}'))`,
+        ),
+      ),
+    );
+};
+
 export const getControllerTemperatures = async (
   controllerId: number,
   groupBy: string,

app/components/ui/slider.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+
+import { cn } from "~/lib/utils";
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max],
+  );
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none select-none items-center data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-[disabled]:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className={cn(
+          "relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-1.5",
+        )}
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className={cn(
+            "absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
+          )}
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="focus-visible:outline-hidden block size-4 shrink-0 rounded-full border border-primary bg-background shadow-sm ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  );
+}
+
+export { Slider };

app/routes.ts

@@ -7,6 +7,10 @@ const routes: RouteConfig = [
   route("batches", "routes/batch/BatchesPage.tsx"),
   route("users", "routes/users/users.tsx"),
   route("batch/:batchId", "routes/batch/BatchDetailsPage.tsx"),
+  route(
+    "batch/:batchId/fermentation",
+    "routes/batch/batch-fermentation-page.tsx",
+  ),
   route("login", "routes/auth/LoginPage.tsx"),
   route("sign-up", "routes/auth/SignUpPage.tsx"),
   route("logout", "routes/auth/LogoutPage.tsx"),