Add chart max domain calc function & tests

.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

@@ -32,6 +32,7 @@ import { useChartData } from "@/src/hooks/useChartData";
 import { CustomLabel } from "@/src/components/charts/labels/CustomLabel";
 import { useGlobalState } from "../helpers/globalState";
 import { DateTime } from "luxon";
+import { getDomainWithUpperBuffer } from "@/src/helpers/chart";
 
 type ChartsProps = {
   combinedData: CombinedData;
@@ -134,6 +135,9 @@ const Charts: FC<ChartsProps> = ({ combinedData }) => {
               />
               <YAxis
                 tick={{ fill: "white", style: { fontSize: "12px" } }}
+                domain={([, dataMax]) =>
+                  getDomainWithUpperBuffer(dataMax, 1000, 100)
+                }
                 label={{
                   value: "Generation ( MW )",
                   angle: 270,

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

@@ -0,0 +1,92 @@
+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 dataMax = 1800;
+    const roundingTickAmount = 1000;
+    const buffer = 100;
+    const result = getDomainWithUpperBuffer(
+      dataMax,
+      roundingTickAmount,
+      buffer
+    );
+    expect(result).toEqual([0, 2000]);
+  });
+  it("should return the next closest 1000 above the dataMax (larger max)", () => {
+    const dataMax = 9500;
+    const roundingTickAmount = 1000;
+    const buffer = 100;
+    const result = getDomainWithUpperBuffer(
+      dataMax,
+      roundingTickAmount,
+      buffer
+    );
+    expect(result).toEqual([0, 10000]);
+  });
+  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(
+      dataMax,
+      roundingTickAmount,
+      buffer
+    );
+    expect(result).toEqual([0, 2000]);
+  });
+  it("should return the tick if is exactly dataMax + buffer", () => {
+    const dataMax = 1900;
+    const roundingTickAmount = 1000;
+    const buffer = 100;
+    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 dataMax = 1950;
+    const roundingTickAmount = 1000;
+    const buffer = 100;
+    const result = getDomainWithUpperBuffer(
+      dataMax,
+      roundingTickAmount,
+      buffer
+    );
+    expect(result).toEqual([0, 3000]);
+  });
+  it("should ignore the dataMin and always return 0", () => {
+    const dataMax = 1800;
+    const roundingTickAmount = 1000;
+    const buffer = 100;
+    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

@@ -0,0 +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 = (
+  dataMax: number,
+  roundingTickAmount: number,
+  buffer: number
+): [number, number] => {
+  if (roundingTickAmount <= 0) return [0, dataMax + buffer];
+  const roundedMax =
+    Math.ceil((dataMax + buffer) / roundingTickAmount) * roundingTickAmount;
+  return [0, roundedMax];
+};