From 0604836879f804dac5b6221302443a971c9b7ac4 Mon Sep 17 00:00:00 2001
From: mrasu <m.rasu.hitsuji@gmail.com>
Date: Sun, 14 Apr 2024 18:29:32 +0900
Subject: [PATCH] chore: fix svelte type error in reporter

---
 .github/workflows/test.yml                    | 14 ++++++++++
 .../src/components/trace/TraceTree.svelte     | 27 +++++++++----------
 reporter/src/main.ts                          |  2 +-
 3 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index aff98b2..9d1f68d 100644
--- 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
index a5569d6..f5d6b1c 100644
--- 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,9 +161,6 @@
         },
         animation: false,
         responsive: true,
-        title: {
-          display: false,
-        },
         indexAxis: "y",
         layout: {
           padding: {
@@ -167,7 +168,6 @@
             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
index 7ece250..e736285 100644
--- 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;