feat: add message for empty charts

samply · Dec 18, 2024 · 2ea9ec9 · 2ea9ec9
1 parent 2d19ebe
commit 2ea9ec9
Showing 1 changed file with 27 additions and 2 deletions.
diff --git a/packages/lib/src/components/results/ChartComponent.wc.svelte b/packages/lib/src/components/results/ChartComponent.wc.svelte
@@ -78,6 +78,9 @@
     /**
      * initialize the chart
      */
+
+    let noDataAvailable: boolean = false;
+
     let canvas!: HTMLCanvasElement;
 
     let chart: Chart;
@@ -391,15 +394,23 @@
      * @param responseStore - the response store
      */
     const setChartData = (responseStore: ResponseStore): void => {
-        if (responseStore.size === 0) return;
+        if (responseStore.size === 0) {
+            noDataAvailable = true;
+            return;
+        }
 
         let isDataAvailable: boolean = false;
 
         responseStore.forEach((value) => {
             if (value.data !== null) isDataAvailable = true;
         });
 
-        if (!isDataAvailable) return;
+        if (!isDataAvailable) {
+            noDataAvailable = true;
+            return;
+        }
+
+        noDataAvailable = false;
 
         let chartLabels: string[] = [];
 
@@ -589,6 +600,11 @@
     {#if options.hintText}
         <InfoButtonComponent message={options.hintText} />
     {/if}
+
+    {#if noDataAvailable}
+        <p>No Data Available</p>
+    {/if}
+
     <canvas
         part="chart-canvas"
         bind:this={canvas}
@@ -597,3 +613,12 @@
     />
     <slot />
 </div>
+
+<style>
+    p {
+        position: absolute;
+        top: 45%;
+        font-weight: bold;
+        left: 30%;
+    }
+</style>