Domain buffer func 2nd pass post PR comments & CI test config

.github/workflows/yarn_test.yaml

@@ -21,11 +21,7 @@ jobs:
       run: |
         cd apps/nowcasting-app
         yarn install
-    - name: build & start app
+    - name: build & start app to run tests
       run: |
         cd apps/nowcasting-app
-        yarn build
-    - name: run tests
-      run: |
-        cd apps/nowcasting-app
-        yarn start & sleep 5 && yarn test --coverage --coverageDirectory=../..
+        yarn test:ci

apps/nowcasting-app/package.json

@@ -10,7 +10,8 @@
     "build-storybook": "build-storybook",
     "lint": "next lint",
     "pre-commit": "pre-commit run",
-    "test": "cypress run --browser chrome && jest"
+    "test": "npx cypress run --browser chrome && jest",
+    "test:ci": "yarn build && start-server-and-test 'yarn start' http://localhost:3002/api/health 'yarn test'"
   },
   "dependencies": {
     "@auth0/nextjs-auth0": "^1.8.0",
@@ -69,6 +70,7 @@
     "openapi-typescript": "^6.5.5",
     "postcss": "^8.4.13",
     "prettier": "^2.6.2",
+    "start-server-and-test": "^2.0.3",
     "swr": "^2.2.0",
     "tailwindcss": "^3.3.2",
     "ts-jest": "^29.1.1",

apps/nowcasting-app/pages/api/health.ts

@@ -0,0 +1,7 @@
+// Heartbeat endpoint for the Quartz app
+
+import { NextApiRequest, NextApiResponse } from "next";
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  res.status(200).json({ status: "ok" });
+}

apps/quartz-app/src/components/charts/Charts.tsx

@@ -135,8 +135,8 @@ const Charts: FC<ChartsProps> = ({ combinedData }) => {
               />
               <YAxis
                 tick={{ fill: "white", style: { fontSize: "12px" } }}
-                domain={(dataMinMax) =>
-                  getDomainWithUpperBuffer(dataMinMax, 100)
+                domain={([, dataMax]) =>
+                  getDomainWithUpperBuffer(dataMax, 1000, 100)
                 }
                 label={{
                   value: "Generation ( MW )",

apps/quartz-app/src/helpers/chart.test.ts

@@ -2,39 +2,91 @@ import { getDomainWithUpperBuffer } from "@/src/helpers/chart";
 
 describe("Get Domain with upper buffer for chart", () => {
   it("should return the next closest 1000 above the dataMax", () => {
-    const dataMinMax: [number, number] = [0, 1800];
+    const dataMax = 1800;
+    const roundingTickAmount = 1000;
     const buffer = 100;
-    const result = getDomainWithUpperBuffer(dataMinMax, buffer);
+    const result = getDomainWithUpperBuffer(
+      dataMax,
+      roundingTickAmount,
+      buffer
+    );
     expect(result).toEqual([0, 2000]);
   });
   it("should return the next closest 1000 above the dataMax (larger max)", () => {
-    const dataMinMax: [number, number] = [0, 9500];
+    const dataMax = 9500;
+    const roundingTickAmount = 1000;
     const buffer = 100;
-    const result = getDomainWithUpperBuffer(dataMinMax, buffer);
+    const result = getDomainWithUpperBuffer(
+      dataMax,
+      roundingTickAmount,
+      buffer
+    );
     expect(result).toEqual([0, 10000]);
   });
-  it("should return dataMax + 1000 if is on a round x1000 and has no buffer", () => {
-    const dataMinMax: [number, number] = [0, 2000];
+  it("should return dataMax if is on a round x1000 and has no buffer", () => {
+    const dataMax = 2000;
+    const roundingTickAmount = 1000;
     const buffer = 0;
-    const result = getDomainWithUpperBuffer(dataMinMax, buffer);
-    expect(result).toEqual([0, 3000]);
+    const result = getDomainWithUpperBuffer(
+      dataMax,
+      roundingTickAmount,
+      buffer
+    );
+    expect(result).toEqual([0, 2000]);
   });
-  it("should return the 1000 above if buffer puts exactly on a x1000", () => {
-    const dataMinMax: [number, number] = [0, 1900];
+  it("should return the tick if is exactly dataMax + buffer", () => {
+    const dataMax = 1900;
+    const roundingTickAmount = 1000;
     const buffer = 100;
-    const result = getDomainWithUpperBuffer(dataMinMax, buffer);
-    expect(result).toEqual([0, 3000]);
+    const result = getDomainWithUpperBuffer(
+      dataMax,
+      roundingTickAmount,
+      buffer
+    );
+    expect(result).toEqual([0, 2000]);
   });
   it("should return the 1000 above if is on a buffer pushes into next band", () => {
-    const dataMinMax: [number, number] = [0, 1950];
+    const dataMax = 1950;
+    const roundingTickAmount = 1000;
     const buffer = 100;
-    const result = getDomainWithUpperBuffer(dataMinMax, buffer);
+    const result = getDomainWithUpperBuffer(
+      dataMax,
+      roundingTickAmount,
+      buffer
+    );
     expect(result).toEqual([0, 3000]);
   });
   it("should ignore the dataMin and always return 0", () => {
-    const dataMinMax: [number, number] = [1000, 1800];
+    const dataMax = 1800;
+    const roundingTickAmount = 1000;
     const buffer = 100;
-    const result = getDomainWithUpperBuffer(dataMinMax, buffer);
+    const result = getDomainWithUpperBuffer(
+      dataMax,
+      roundingTickAmount,
+      buffer
+    );
     expect(result).toEqual([0, 2000]);
   });
+  it("should return the dataMax + buffer if the roundingTickAmount is 0", () => {
+    const dataMax = 1800;
+    const roundingTickAmount = 0;
+    const buffer = 100;
+    const result = getDomainWithUpperBuffer(
+      dataMax,
+      roundingTickAmount,
+      buffer
+    );
+    expect(result).toEqual([0, 1900]);
+  });
+  it("should return the dataMax + buffer if the roundingTickAmount is negative", () => {
+    const dataMax = 1800;
+    const roundingTickAmount = -1000;
+    const buffer = 100;
+    const result = getDomainWithUpperBuffer(
+      dataMax,
+      roundingTickAmount,
+      buffer
+    );
+    expect(result).toEqual([0, 1900]);
+  });
 });

apps/quartz-app/src/helpers/chart.ts

@@ -1,6 +1,21 @@
+/**
+ * Calculates the domain for a chart axis with an upper buffer.
+ *
+ * @param dataMax - The maximum data value that will be plotted on the chart.
+ * @param roundingTickAmount - The value to which the maximum data value should be rounded up.
+ * @param buffer - The buffer amount to be added to the maximum data value before rounding.
+ * @returns An array where the first element is the minimum domain value (always 0)
+ * and the second element is the maximum domain value, calculated by
+ * rounding up the sum of the maximum data value and the buffer to the
+ * nearest multiple of the rounding tick amount.
+ */
 export const getDomainWithUpperBuffer = (
-  [dataMin, dataMax]: [number, number],
+  dataMax: number,
+  roundingTickAmount: number,
   buffer: number
 ): [number, number] => {
-  return [0, Math.floor((dataMax + buffer) / 1000) * 1000 + 1000];
+  if (roundingTickAmount <= 0) return [0, dataMax + buffer];
+  const roundedMax =
+    Math.ceil((dataMax + buffer) / roundingTickAmount) * roundingTickAmount;
+  return [0, roundedMax];
 };