feat: dashboard geojson map

src/common/meta/dashboards/v3/mod.rs

@@ -104,6 +104,10 @@ pub struct PanelFields {
     #[serde(skip_serializing_if = "Option::is_none")]
     pub weight: Option<AxisItem>,
     #[serde(skip_serializing_if = "Option::is_none")]
+    pub name: Option<AxisItem>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub value_for_maps: Option<AxisItem>,
+    #[serde(skip_serializing_if = "Option::is_none")]
     pub source: Option<AxisItem>,
     #[serde(skip_serializing_if = "Option::is_none")]
     pub target: Option<AxisItem>,
@@ -177,6 +181,8 @@ pub struct PanelConfig {
     #[serde(skip_serializing_if = "Option::is_none")]
     legend_width: Option<LegendWidth>,
     base_map: Option<BaseMap>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    map_type: Option<MapType>,
     map_view: Option<MapView>,
     #[serde(skip_serializing_if = "Option::is_none")]
     map_symbol_style: Option<MapSymbolStyle>,
@@ -311,6 +317,12 @@ pub struct BaseMap {
     pub type_field: Option<String>,
 }
 
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize, ToSchema)]
+pub struct MapType {
+    #[serde(rename = "type")]
+    pub type_field: Option<String>,
+}
+
 #[derive(Debug, Clone, PartialEq, Serialize, Deserialize, ToSchema)]
 pub struct MapView {
     pub zoom: f64,

web/src/components/dashboards/PanelSchemaRenderer.vue

@@ -18,8 +18,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <div style="width: 100%; height: 100%" @mouseleave="hideDrilldownPopUp">
     <div ref="chartPanelRef" style="height: 100%; position: relative">
       <div v-if="!errorDetail" style="height: 100%; width: 100%">
+      <GeoJSONMapRenderer
+        v-if="panelSchema.type == 'maps'"
+        :data="
+          panelData.chartType == 'maps'
+            ? panelData
+            : { options: {} }
+        "
+      ></GeoJSONMapRenderer>
         <GeoMapRenderer
-          v-if="panelSchema.type == 'geomap'"
+          v-else-if="panelSchema.type == 'geomap'"
           :data="
             panelData.chartType == 'geomap'
               ? panelData
@@ -31,7 +39,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :data="
             panelData.chartType == 'table'
               ? panelData
-              : { options: { backgroundColor: 'transparent' } }
+              : { options: {  backgroundColor: 'transparent'  } }
           "
           @row-click="onChartClick"
           ref="tableRendererRef"
@@ -66,7 +74,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             (data.length &&
               data[0]?.length &&
               panelData.chartType != 'geomap' &&
-              panelData.chartType != 'table')
+              panelData.chartType != 'table' &&
+            panelData.chartType != 'maps')
               ? panelData
               : { options: { backgroundColor: 'transparent' } }
           "
@@ -75,7 +84,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           @click="onChartClick"
         />
       </div>
-      <div v-if="!errorDetail" class="noData" data-test="no-data">
+      <div v-if="!errorDetail && panelSchema.type != 'geomap' && panelSchema.type != 'maps'" class="noData" data-test="no-data">
         {{ noData }}
       </div>
       <div
@@ -176,6 +185,10 @@ const GeoMapRenderer = defineAsyncComponent(() => {
   return import("@/components/dashboards/panels/GeoMapRenderer.vue");
 });
 
+const GeoJSONMapRenderer = defineAsyncComponent(() => {
+  return import("@/components/dashboards/panels/GeoJSONMapRenderer.vue");
+});
+
 const HTMLRenderer = defineAsyncComponent(() => {
   return import("./panels/HTMLRenderer.vue");
 });
@@ -190,6 +203,7 @@ export default defineComponent({
     ChartRenderer,
     TableRenderer,
     GeoMapRenderer,
+    GeoJSONMapRenderer,
     HTMLRenderer,
     MarkdownRenderer,
   },
@@ -377,6 +391,10 @@ export default defineComponent({
             yAlias.every((y: any) => data.value[0][0][y] != null)
           );
         }
+        case "maps":
+        case "geomap": {
+          return true;
+        }
         case "sankey": {
           const source = panelSchema.value.queries[0].fields.source.alias;
           const target = panelSchema.value.queries[0].fields.target.alias;

web/src/components/dashboards/addPanel/ChartSelection.vue

@@ -146,6 +146,11 @@ export default defineComponent({
         title: t("dashboard.geomapLabel"),
         id: "geomap",
       },
+      {
+        image: "img:" + getImageURL("images/dashboard/charts/world-map.png"),
+        title: t("dashboard.worldmapLabel"),
+        id: "maps",
+      },
       {
         image: "img:" + getImageURL("images/dashboard/charts/pie-chart.png"),
         title: t("dashboard.pieLabel"),

web/src/components/dashboards/addPanel/ConfigPanel.vue

@@ -39,7 +39,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         dashboardPanelData.data.type != 'metric' &&
         dashboardPanelData.data.type != 'gauge' &&
         dashboardPanelData.data.type != 'geomap' &&
-        dashboardPanelData.data.type != 'sankey'
+        dashboardPanelData.data.type != 'sankey' &&
+        dashboardPanelData.data.type != 'maps'
       "
       v-model="dashboardPanelData.data.config.show_legends"
       :label="t('dashboard.showLegendsLabel')"
@@ -66,7 +67,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           dashboardPanelData.data.type != 'gauge' &&
           dashboardPanelData.data.type != 'geomap' &&
           dashboardPanelData.data.config.show_legends &&
-          dashboardPanelData.data.type != 'sankey'
+          dashboardPanelData.data.type != 'sankey' &&
+          dashboardPanelData.data.type != 'maps'
         "
         outlined
         v-model="dashboardPanelData.data.config.legends_position"
@@ -220,6 +222,23 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
       <div class="space"></div>
 
+      <q-select
+        v-if="dashboardPanelData.data.type == 'maps'"
+        outlined
+        v-model="dashboardPanelData.data.config.map_type.type"
+        :options="mapTypeOptions"
+        dense
+        :label="t('dashboard.mapTypeLabel')"
+        class="showLabelOnTop"
+        stack-label
+        emit-value
+        :display-value="'World'"
+        data-test="dashboard-config-map-type"
+      >
+      </q-select>
+
+      <div class="space"></div>
+
       <q-select
         v-if="dashboardPanelData.data.type == 'geomap'"
         outlined
@@ -724,7 +743,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           dashboardPanelData.data.type != 'table' &&
           dashboardPanelData.data.type != 'pie' &&
           dashboardPanelData.data.type != 'donut' &&
-          dashboardPanelData.data.type != 'sankey'
+          dashboardPanelData.data.type != 'sankey' &&
+          dashboardPanelData.data.type != 'maps'
         "
         v-model.number="dashboardPanelData.data.config.axis_width"
         :label="t('common.axisWidth')"
@@ -757,7 +777,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           dashboardPanelData.data.type != 'table' &&
           dashboardPanelData.data.type != 'pie' &&
           dashboardPanelData.data.type != 'donut' &&
-          dashboardPanelData.data.type != 'sankey'
+          dashboardPanelData.data.type != 'sankey' &&
+          dashboardPanelData.data.type != 'maps'
         "
         v-model="dashboardPanelData.data.config.axis_border_show"
         :label="t('dashboard.showBorder')"
@@ -798,6 +819,13 @@ export default defineComponent({
       },
     ];
 
+    const mapTypeOptions = [
+      {
+        label: t("dashboard.world"),
+        value: "World",
+      },
+    ];
+
     onBeforeMount(() => {
       // Ensure that the nested structure is initialized
       if (!dashboardPanelData.data.config.legend_width) {
@@ -1014,6 +1042,7 @@ export default defineComponent({
       dashboardPanelData,
       promqlMode,
       basemapTypeOptions,
+      mapTypeOptions,
       layerTypeOptions,
       symbolOptions,
       legendsPositionOptions,