chore: fix svelte type error in reporter

mrasu · Apr 14, 2024 · 0604836 · 0604836
1 parent 8d511a4
commit 0604836
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 15 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -26,3 +26,17 @@ jobs:
           cache-dependency-path: create-echoed/package-lock.json
       - run: npm ci
       - run: npm run check
+  test-reporter:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./reporter
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: .node-version
+          cache: 'npm'
+          cache-dependency-path: reporter/package-lock.json
+      - run: npm ci
+      - run: npm run check
diff --git a/reporter/src/components/trace/TraceTree.svelte b/reporter/src/components/trace/TraceTree.svelte
@@ -128,20 +128,24 @@
   };
   const dataset = traceTrees.map(createDataset);
 
-  const data: ChartConfiguration<"bar">["data"] = {
-    labels: label,
-    datasets: [
-      {
-        tree: dataset,
-      },
-    ],
-  };
+  const data: ChartConfiguration<"bar", [number, number], ILabelNode2>["data"] =
+    {
+      labels: label,
+      datasets: [
+        {
+          // Ignore type error to allow [number, number] as value type.
+          // @ts-ignore
+          tree: dataset,
+          barThickness: 20,
+        },
+      ],
+    };
 
   onMount(() => {
     const canvas = <HTMLCanvasElement>document.getElementById("canvas");
     canvas.width = window.innerWidth * 0.8;
     canvas.height = spans.length * 50 + 100;
-    const chart = new Chart(canvas, {
+    const chart = new Chart<"bar", [number, number], ILabelNode2>(canvas, {
       type: "bar",
       data: data,
       options: {
@@ -157,17 +161,13 @@
         },
         animation: false,
         responsive: true,
-        title: {
-          display: false,
-        },
         indexAxis: "y",
         layout: {
           padding: {
             // TODO: make dynamic according to tree's max depth
             left: 250,
           },
         },
-        barThickness: 20,
         scales: {
           x: {
             title: {
@@ -179,7 +179,6 @@
             hierarchyGroupLabelPosition: "first",
             ticks: {
               mirror: true,
-              beginAtZero: true,
             },
             padding: 0,
             type: "hierarchical",

diff --git a/reporter/src/main.ts b/reporter/src/main.ts
@@ -2,7 +2,7 @@ import "./app.css";
 import App from "./App.svelte";
 
 const app = new App({
-  target: document.getElementById("app"),
+  target: document.getElementById("app")!,
 });
 
 export default app;