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

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"

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)",

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,

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;
     }
   }