From 2edefdb0bfa904391a6eb52d73bdf55f825ee9bb Mon Sep 17 00:00:00 2001
From: ktx-vaidehi <134508096+ktx-vaidehi@users.noreply.github.com>
Date: Wed, 16 Apr 2025 11:12:47 +0530
Subject: [PATCH] feat: dashboard when loading and no data is present show
 blank chart (#6550)

- If no data is present and the chart is loading, there's now an option
to show a blank chart
- #6557
---
 .../dashboards/PanelSchemaRenderer.vue         | 18 ++++++++++++------
 web/src/locales/languages/en.json              |  4 ++--
 web/src/utils/dashboard/convertPromQLData.ts   |  8 ++++++--
 web/src/utils/dashboard/convertSQLData.ts      | 12 ++++++++----
 4 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/web/src/components/dashboards/PanelSchemaRenderer.vue b/web/src/components/dashboards/PanelSchemaRenderer.vue
index e4c4b0451f..4c9ad44a4a 100644
--- a/web/src/components/dashboards/PanelSchemaRenderer.vue
+++ b/web/src/components/dashboards/PanelSchemaRenderer.vue
@@ -89,13 +89,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           v-else
           :data="
             panelSchema.queryType === 'promql' ||
-            (data.length &&
-              data[0]?.length &&
-              panelData.chartType != 'geomap' &&
+            (panelData.chartType != 'geomap' &&
               panelData.chartType != 'table' &&
-              panelData.chartType != 'maps')
+              panelData.chartType != 'maps' &&
+              loading)
               ? panelData
-              : { options: { backgroundColor: 'transparent' } }
+              : noData == 'No Data'
+                ? {
+                    options: {
+                      backgroundColor: 'transparent',
+                    },
+                  }
+                : panelData
           "
           :height="chartPanelHeight"
           @updated:data-zoom="onDataZoom"
@@ -107,7 +112,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         v-if="
           !errorDetail?.message &&
           panelSchema.type != 'geomap' &&
-          panelSchema.type != 'maps'
+          panelSchema.type != 'maps' &&
+          !loading
         "
         class="noData"
         data-test="no-data"
diff --git a/web/src/locales/languages/en.json b/web/src/locales/languages/en.json
index 520ca407b1..f7cd26e13a 100644
--- a/web/src/locales/languages/en.json
+++ b/web/src/locales/languages/en.json
@@ -761,8 +761,8 @@
     "default": "Default",
     "numbers": "Numbers",
     "bytes": "Bytes",
-    "kilobytes": "Kilobytes (kb)",
-    "megabytes": "Megabytes (mb)",
+    "kilobytes": "Kilobytes (KB)",
+    "megabytes": "Megabytes (MB)",
     "bytesPerSecond": "Bytes/Second",
     "seconds": "Seconds (s)",
     "microseconds": "Microseconds (μs)",
diff --git a/web/src/utils/dashboard/convertPromQLData.ts b/web/src/utils/dashboard/convertPromQLData.ts
index 164a4639f8..3c207c9dd7 100644
--- a/web/src/utils/dashboard/convertPromQLData.ts
+++ b/web/src/utils/dashboard/convertPromQLData.ts
@@ -349,7 +349,9 @@ export const convertPromQLData = async (
     xAxis: {
       type: "time",
       axisLine: {
-        show: panelSchema.config?.axis_border_show || false,
+        show: searchQueryData?.every((it: any) => it.result.length == 0)
+          ? true
+          : (panelSchema.config?.axis_border_show ?? false),
       },
       splitLine: {
         show: true,
@@ -379,7 +381,9 @@ export const convertPromQLData = async (
         },
       },
       axisLine: {
-        show: panelSchema.config?.axis_border_show || false,
+        show: searchQueryData?.every((it: any) => it.result.length == 0)
+          ? true
+          : (panelSchema.config?.axis_border_show ?? false),
       },
       splitLine: {
         show: true,
diff --git a/web/src/utils/dashboard/convertSQLData.ts b/web/src/utils/dashboard/convertSQLData.ts
index b80d8afd7d..ffb63cbea3 100644
--- a/web/src/utils/dashboard/convertSQLData.ts
+++ b/web/src/utils/dashboard/convertSQLData.ts
@@ -1111,7 +1111,9 @@ export const convertSQLData = async (
           show: true,
         },
         axisLine: {
-          show: panelSchema.config?.axis_border_show || false,
+          show: searchQueryData?.every((it: any) => it.length == 0)
+            ? true
+            : (panelSchema.config?.axis_border_show ?? false),
         },
         axisTick: {
           show: xAxisKeys.length + breakDownKeys.length == 1 ? false : true,
@@ -1170,7 +1172,9 @@ export const convertSQLData = async (
         show: true,
       },
       axisLine: {
-        show: panelSchema.config?.axis_border_show || false,
+        show: searchQueryData?.every((it: any) => it.length == 0)
+          ? true
+          : (panelSchema.config?.axis_border_show ?? false),
       },
     },
     toolbox: {
@@ -2643,9 +2647,9 @@ export const convertSQLData = async (
   if (!["metric", "gauge"].includes(panelSchema.type)) {
     options.series = options.series.filter((it: any) => it.data?.length);
     if (panelSchema.type == "h-bar" || panelSchema.type == "h-stacked") {
-      options.xAxis = options.series.length ? options.xAxis : {};
+      options.xAxis = options.xAxis;
     } else if (!["pie", "donut"].includes(panelSchema.type)) {
-      options.yAxis = options.series.length ? options.yAxis : {};
+      options.yAxis = options.yAxis;
     }
   }