dockerfile

Author: algertc

Dockerfile

@@ -1,16 +1,49 @@
-FROM node:18-bullseye AS builder
+FROM node:20-bullseye AS builder
 WORKDIR /app
 COPY package.json next.config.js ./
-RUN yarn install
+
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    libcairo2-dev \
+    libpango1.0-dev \
+    libjpeg-dev \
+    libgif-dev \
+    librsvg2-dev \
+    python3 \
+    && rm -rf /var/lib/apt/lists/*
+
+
+# A bunch of canvas bs
+ENV npm_config_canvas_binary_host_mirror=https://github.com/Automattic/node-canvas/releases/download/
+ENV CXXFLAGS="-DSYZX_FEATURE_FLAG=1"
+
+COPY package.json yarn.lock* ./
+RUN yarn install --network-timeout 100000 || \
+    (echo "Retrying with canvas workaround..." && \
+     yarn add canvas@2.11.2 --network-timeout 100000 && \
+     yarn install --network-timeout 100000)
+
+
 COPY . .
 RUN yarn build
 
 
-FROM node:18-bullseye
+FROM node:20-bullseye
 WORKDIR /app
+
+RUN apt-get update && apt-get install -y \
+    libcairo2 \
+    libpango-1.0-0 \
+    libpangocairo-1.0-0 \
+    libjpeg62-turbo \
+    libgif7 \
+    librsvg2-2 \
+    && rm -rf /var/lib/apt/lists/*
+
 COPY --from=builder /app/.next ./.next
 COPY --from=builder /app/public ./public
 COPY --from=builder /app /app
+COPY --from=builder /app/node_modules ./node_modules
 COPY --from=builder /app/package.json ./package.json
 EXPOSE 3000
 RUN mkdir -p /auth

app/dashboard/CameraChart.jsx

@@ -79,7 +79,7 @@ export function CameraReadsChart({ data, loading }) {
                 }}
                 barGap={4}
               >
-                <CartesianGrid vertical={false} strokeWidth={0.2} />
+                <CartesianGrid vertical={false} strokeWidth={0.25} />
                 <XAxis
                   dataKey="camera"
                   tickLine={false}
@@ -143,7 +143,7 @@ export function CameraReadsChart({ data, loading }) {
           </div>
         )}
       </CardContent>
-      <CardFooter className="flex-col items-start gap-1 text-xs pt-2 md:pb-0">
+      <CardFooter className="flex-col items-start gap-1 text-xs pt-2">
         <div className="flex gap-2 font-medium leading-none items-center">
           Most Active: {mostActiveCamera}
           <Camera className="h-4 w-4" />