@databrainhq/plugin 0.7.19 → 0.7.21

package/dist/index.es.js

@@ -78859,22 +78859,17 @@ const AreaChart = ({
   legendSettings,
   labelSettings,
   axisSettings,
-  enableSaveAs,
   colors: colors2,
   updateGroup,
   isEnableGroupBy,
   backGroundColor,
   customSettings,
-  chartClickConfig
+  chartClickConfig,
+  chartRef
 }) => {
   var _a2;
   const option2 = {
     toolbox: {
-      feature: {
-        saveAsImage: enableSaveAs && {
-          name: "databrain"
-        }
-      },
       emphasis: {
         iconStyle: {
           borderColor: "#5865F6"
@@ -78965,6 +78960,7 @@ const AreaChart = ({
   };
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [!isEnableGroupBy && /* @__PURE__ */ jsx(EChartsReact, {
+      ref: chartRef,
       style: {
         width: "100%",
         height: "90%"
@@ -78977,6 +78973,7 @@ const AreaChart = ({
         }
       }
     }), isEnableGroupBy && updateGroup && /* @__PURE__ */ jsx(EChartsReact, {
+      ref: chartRef,
       style: {
         width: "100%",
         height: "90%"
@@ -79001,16 +78998,12 @@ const BarChart = ({
   axisSettings,
   margins,
   customSettings,
-  chartClickConfig
+  chartClickConfig,
+  chartRef
 }) => {
   var _a2, _b2;
   const option2 = {
     toolbox: {
-      feature: {
-        saveAsImage: {
-          name: "databrain"
-        }
-      },
       emphasis: {
         iconStyle: {
           borderColor: "#5865F6"
@@ -79103,6 +79096,7 @@ const BarChart = ({
   };
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [!isEnableGroupBy && /* @__PURE__ */ jsx(EChartsReact, {
+      ref: chartRef,
       style: {
         width: "100%",
         height: "90%"
@@ -79115,6 +79109,7 @@ const BarChart = ({
         }
       }
     }), isEnableGroupBy && updateGroup && /* @__PURE__ */ jsx(EChartsReact, {
+      ref: chartRef,
       style: {
         width: "100%",
         height: "90%"
@@ -79133,13 +79128,13 @@ const ComboChart = ({
   margins,
   legendSettings,
   labelSettings,
-  enableSaveAs,
   colors: colors2,
   updateGroup,
   isEnableGroupBy,
   backGroundColor,
   customSettings,
-  chartClickConfig
+  chartClickConfig,
+  chartRef
 }) => {
   var _a2;
   const choice = ["bar", "line"];
@@ -79156,11 +79151,6 @@ const ComboChart = ({
       color: colors2
     } : {},
     toolbox: {
-      feature: {
-        saveAsImage: enableSaveAs && {
-          name: "databrain"
-        }
-      },
       emphasis: {
         iconStyle: {
           borderColor: "#5865F6"
@@ -79269,6 +79259,7 @@ const ComboChart = ({
         height: "90%"
       },
       option: option2,
+      ref: chartRef,
       onEvents: {
         click: (params) => {
           var _a3;
@@ -79281,6 +79272,7 @@ const ComboChart = ({
         height: "90%"
       },
       option: option2,
+      ref: chartRef,
       onEvents: {
         click: (params) => {
           updateGroup(params.name);
@@ -79295,12 +79287,12 @@ const LineChart = ({
   legendSettings,
   labelSettings,
   axisSettings,
-  enableSaveAs,
   colors: colors2,
   updateGroup,
   isEnableGroupBy,
   customSettings,
-  chartClickConfig
+  chartClickConfig,
+  chartRef
 }) => {
   var _a2, _b2;
   const option2 = {
@@ -79330,11 +79322,6 @@ const LineChart = ({
       containLabel: true
     },
     toolbox: {
-      feature: {
-        saveAsImage: enableSaveAs && {
-          name: "databrain"
-        }
-      },
       emphasis: {
         iconStyle: {
           borderColor: "#5865F6"
@@ -79400,7 +79387,14 @@ const LineChart = ({
         width: "100%",
         height: "90%"
       },
-      option: option2
+      option: option2,
+      ref: chartRef,
+      onEvents: {
+        click: (params) => {
+          var _a3;
+          handleChartClick(chartClickConfig, ((_a3 = params == null ? void 0 : params.name) == null ? void 0 : _a3.split(" ").join("_")) || "undefined");
+        }
+      }
     }), isEnableGroupBy && updateGroup && /* @__PURE__ */ jsx(EChartsReact, {
       style: {
         width: "100%",
@@ -79409,9 +79403,10 @@ const LineChart = ({
       option: option2,
       onEvents: {
         click: (params) => {
-          handleChartClick(chartClickConfig, params.name);
+          updateGroup(params.name);
         }
-      }
+      },
+      ref: chartRef
     })]
   });
 };
@@ -79420,7 +79415,7 @@ const PieChart = ({
   margins,
   legendSettings,
   labelSettings,
-  enableSaveAs,
+  chartRef,
   colors: colors2,
   updateGroup,
   isEnableGroupBy,
@@ -79445,11 +79440,6 @@ const PieChart = ({
     });
     const option22 = {
       toolbox: {
-        feature: {
-          saveAsImage: enableSaveAs && {
-            name: "databrain"
-          }
-        },
         emphasis: {
           iconStyle: {
             borderColor: "#5865F6"
@@ -79518,7 +79508,8 @@ const PieChart = ({
             click: (params) => {
               updateGroup(params.name);
             }
-          }
+          },
+          ref: chartRef
         })
       }), !isEnableGroupBy && /* @__PURE__ */ jsx(Fragment, {
         children: /* @__PURE__ */ jsx(EChartsReact, {
@@ -79532,7 +79523,8 @@ const PieChart = ({
               var _a3;
               handleChartClick(chartClickConfig, ((_a3 = params == null ? void 0 : params.name) == null ? void 0 : _a3.split(" ").join("_")) || "undefined");
             }
-          }
+          },
+          ref: chartRef
         })
       })]
     });
@@ -79545,11 +79537,6 @@ const PieChart = ({
   });
   const option2 = {
     toolbox: {
-      feature: {
-        saveAsImage: enableSaveAs && {
-          name: "databrain"
-        }
-      },
       emphasis: {
         iconStyle: {
           borderColor: "#5865F6"
@@ -79608,7 +79595,8 @@ const PieChart = ({
             click: (params) => {
               updateGroup(params.name);
             }
-          }
+          },
+          ref: chartRef
         })
       }), !isEnableGroupBy && /* @__PURE__ */ jsx(Fragment, {
         children: /* @__PURE__ */ jsx(EChartsReact, {
@@ -79622,7 +79610,8 @@ const PieChart = ({
               var _a3;
               handleChartClick(chartClickConfig, ((_a3 = params == null ? void 0 : params.name) == null ? void 0 : _a3.split(" ").join("_")) || "undefined");
             }
-          }
+          },
+          ref: chartRef
         })
       })]
     })
@@ -79633,7 +79622,7 @@ const RowChart = ({
   margins,
   legendSettings,
   labelSettings,
-  enableSaveAs,
+  chartRef,
   colors: colors2,
   updateGroup,
   isEnableGroupBy,
@@ -79644,11 +79633,6 @@ const RowChart = ({
   var _a2;
   const option2 = {
     toolbox: {
-      feature: {
-        saveAsImage: enableSaveAs && {
-          name: "databrain"
-        }
-      },
       emphasis: {
         iconStyle: {
           borderColor: "#5865F6"
@@ -79750,7 +79734,8 @@ const RowChart = ({
           var _a3;
           handleChartClick(chartClickConfig, ((_a3 = params == null ? void 0 : params.name) == null ? void 0 : _a3.split(" ").join("_")) || "undefined");
         }
-      }
+      },
+      ref: chartRef
     }), isEnableGroupBy && updateGroup && /* @__PURE__ */ jsx(EChartsReact, {
       style: {
         width: "100%",
@@ -79761,7 +79746,8 @@ const RowChart = ({
         click: (params) => {
           updateGroup(params.name);
         }
-      }
+      },
+      ref: chartRef
     })]
   });
 };
@@ -79771,7 +79757,7 @@ const ScatterChart = ({
   legendSettings,
   labelSettings,
   axisSettings,
-  enableSaveAs,
+  chartRef,
   colors: colors2,
   updateGroup,
   isEnableGroupBy,
@@ -79782,11 +79768,6 @@ const ScatterChart = ({
   var _a2;
   const option2 = {
     toolbox: {
-      feature: {
-        saveAsImage: enableSaveAs && {
-          name: "databrain"
-        }
-      },
       emphasis: {
         iconStyle: {
           borderColor: "#5865F6"
@@ -79882,7 +79863,8 @@ const ScatterChart = ({
           var _a3;
           handleChartClick(chartClickConfig, ((_a3 = params == null ? void 0 : params.name) == null ? void 0 : _a3.split(" ").join("_")) || "undefined");
         }
-      }
+      },
+      ref: chartRef
     }), isEnableGroupBy && updateGroup && /* @__PURE__ */ jsx(EChartsReact, {
       style: {
         width: "100%",
@@ -79893,7 +79875,8 @@ const ScatterChart = ({
         click: (params) => {
           updateGroup(params.name);
         }
-      }
+      },
+      ref: chartRef
     })]
   });
 };
@@ -79902,7 +79885,7 @@ const WaterFallChart = ({
   margins,
   labelSettings,
   axisSettings,
-  enableSaveAs,
+  chartRef,
   colors: colors2,
   updateGroup,
   isEnableGroupBy,
@@ -79913,11 +79896,6 @@ const WaterFallChart = ({
   var _a2, _b2;
   const option2 = {
     toolbox: {
-      feature: {
-        saveAsImage: enableSaveAs && {
-          name: "databrain"
-        }
-      },
       emphasis: {
         iconStyle: {
           borderColor: "#5865F6"
@@ -80016,7 +79994,8 @@ const WaterFallChart = ({
           var _a3;
           handleChartClick(chartClickConfig, ((_a3 = params == null ? void 0 : params.name) == null ? void 0 : _a3.split(" ").join("_")) || "undefined");
         }
-      }
+      },
+      ref: chartRef
     }), isEnableGroupBy && updateGroup && /* @__PURE__ */ jsx(EChartsReact, {
       style: {
         width: "100%",
@@ -80027,7 +80006,8 @@ const WaterFallChart = ({
         click: (params) => {
           updateGroup(params.name);
         }
-      }
+      },
+      ref: chartRef
     })]
   });
 };
@@ -80037,7 +80017,8 @@ const FunnelChart = ({
   legendSettings,
   labelSettings,
   colors: colors2,
-  chartClickConfig
+  chartClickConfig,
+  chartRef
 }) => {
   const option2 = {
     tooltip: {
@@ -80116,7 +80097,8 @@ const FunnelChart = ({
           var _a2;
           handleChartClick(chartClickConfig, ((_a2 = params == null ? void 0 : params.name) == null ? void 0 : _a2.split(" ").join("_")) || "undefined");
         }
-      }
+      },
+      ref: chartRef
     })
   });
 };
@@ -80126,12 +80108,12 @@ const BubbleChart = ({
   legendSettings,
   labelSettings,
   axisSettings,
-  enableSaveAs,
   colors: colors2,
   updateGroup,
   isEnableGroupBy,
   customSettings,
-  chartClickConfig
+  chartClickConfig,
+  chartRef
 }) => {
   var _a2;
   const modifiedData = [];
@@ -80157,11 +80139,6 @@ const BubbleChart = ({
       color: colors2
     } : {},
     toolbox: {
-      feature: {
-        saveAsImage: enableSaveAs && {
-          name: "databrain"
-        }
-      },
       emphasis: {
         iconStyle: {
           borderColor: "#5865F6"
@@ -80251,6 +80228,7 @@ const BubbleChart = ({
   };
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [!isEnableGroupBy && /* @__PURE__ */ jsx(EChartsReact, {
+      ref: chartRef,
       style: {
         width: "100%",
         height: "90%"
@@ -80263,6 +80241,7 @@ const BubbleChart = ({
         }
       }
     }), isEnableGroupBy && updateGroup && /* @__PURE__ */ jsx(EChartsReact, {
+      ref: chartRef,
       style: {
         width: "100%",
         height: "90%"
@@ -80281,11 +80260,11 @@ const DoughnutChart = ({
   margins,
   legendSettings,
   labelSettings,
-  enableSaveAs,
   colors: colors2,
   updateGroup,
   isEnableGroupBy,
-  chartClickConfig
+  chartClickConfig,
+  chartRef
 }) => {
   var _a2, _b2;
   if (((_a2 = data2 == null ? void 0 : data2.labels) == null ? void 0 : _a2.length) > 1) {
@@ -80307,11 +80286,6 @@ const DoughnutChart = ({
     });
     const option22 = {
       toolbox: {
-        feature: {
-          saveAsImage: enableSaveAs && {
-            name: "databrain"
-          }
-        },
         emphasis: {
           iconStyle: {
             borderColor: "#5865F6"
@@ -80369,7 +80343,14 @@ const DoughnutChart = ({
           width: "100%",
           height: "90%"
         },
-        option: option22
+        option: option22,
+        ref: chartRef,
+        onEvents: {
+          click: (params) => {
+            var _a3;
+            handleChartClick(chartClickConfig, ((_a3 = params == null ? void 0 : params.name) == null ? void 0 : _a3.split(" ").join("_")) || "undefined");
+          }
+        }
       }), isEnableGroupBy && updateGroup && /* @__PURE__ */ jsx(EChartsReact, {
         style: {
           width: "100%",
@@ -80380,7 +80361,8 @@ const DoughnutChart = ({
           click: (params) => {
             updateGroup(params.name);
           }
-        }
+        },
+        ref: chartRef
       })]
     });
   }
@@ -80392,11 +80374,6 @@ const DoughnutChart = ({
   });
   const option2 = {
     toolbox: {
-      feature: {
-        saveAsImage: enableSaveAs && {
-          name: "databrain"
-        }
-      },
       emphasis: {
         iconStyle: {
           borderColor: "#5865F6"
@@ -80452,7 +80429,8 @@ const DoughnutChart = ({
           var _a3;
           handleChartClick(chartClickConfig, ((_a3 = params == null ? void 0 : params.name) == null ? void 0 : _a3.split(" ").join("_")) || "undefined");
         }
-      }
+      },
+      ref: chartRef
     }), isEnableGroupBy && updateGroup && /* @__PURE__ */ jsx(EChartsReact, {
       style: {
         width: "100%",
@@ -80463,7 +80441,8 @@ const DoughnutChart = ({
         click: (params) => {
           updateGroup(params.name);
         }
-      }
+      },
+      ref: chartRef
     })]
   });
 };
@@ -80473,7 +80452,7 @@ const SteppedAreaChart = ({
   legendSettings,
   labelSettings,
   axisSettings,
-  enableSaveAs,
+  chartRef,
   colors: colors2,
   updateGroup,
   isEnableGroupBy,
@@ -80486,11 +80465,6 @@ const SteppedAreaChart = ({
   let k = 2;
   const option2 = {
     toolbox: {
-      feature: {
-        saveAsImage: enableSaveAs && {
-          name: "databrain"
-        }
-      },
       emphasis: {
         iconStyle: {
           borderColor: "#5865F6"
@@ -80588,7 +80562,8 @@ const SteppedAreaChart = ({
           var _a3;
           handleChartClick(chartClickConfig, ((_a3 = params == null ? void 0 : params.name) == null ? void 0 : _a3.split(" ").join("_")) || "undefined");
         }
-      }
+      },
+      ref: chartRef
     }), isEnableGroupBy && updateGroup && /* @__PURE__ */ jsx(EChartsReact, {
       style: {
         width: "100%",
@@ -80599,7 +80574,8 @@ const SteppedAreaChart = ({
         click: (params) => {
           updateGroup(params.name);
         }
-      }
+      },
+      ref: chartRef
     })]
   });
 };
@@ -80609,7 +80585,7 @@ const Histogram = ({
   legendSettings,
   labelSettings,
   axisSettings,
-  enableSaveAs,
+  chartRef,
   colors: colors2,
   updateGroup,
   isEnableGroupBy,
@@ -80620,11 +80596,6 @@ const Histogram = ({
   var _a2, _b2;
   const option2 = {
     toolbox: {
-      feature: {
-        saveAsImage: enableSaveAs && {
-          name: "databrain"
-        }
-      },
       emphasis: {
         iconStyle: {
           borderColor: "#5865F6"
@@ -80718,7 +80689,8 @@ const Histogram = ({
           var _a3;
           handleChartClick(chartClickConfig, ((_a3 = params == null ? void 0 : params.name) == null ? void 0 : _a3.split(" ").join("_")) || "undefined");
         }
-      }
+      },
+      ref: chartRef
     }), isEnableGroupBy && updateGroup && /* @__PURE__ */ jsx(EChartsReact, {
       style: {
         width: "100%",
@@ -80729,7 +80701,8 @@ const Histogram = ({
         click: (params) => {
           updateGroup(params.name);
         }
-      }
+      },
+      ref: chartRef
     })]
   });
 };
@@ -80737,9 +80710,9 @@ const GaugeChart = ({
   gaugeData,
   margins,
   legendSettings,
-  enableSaveAs,
   colors: colors2,
-  chartClickConfig
+  chartClickConfig,
+  chartRef
 }) => {
   const newGuageData = Array.isArray(gaugeData) ? gaugeData : [];
   const total = newGuageData.reduce((sum2, item) => {
@@ -80748,11 +80721,6 @@ const GaugeChart = ({
   const average = Math.floor(total / newGuageData.length);
   const option2 = {
     toolbox: {
-      feature: {
-        saveAsImage: enableSaveAs && {
-          name: "databrain"
-        }
-      },
       emphasis: {
         iconStyle: {
           borderColor: "#5865F6"
@@ -80840,13 +80808,14 @@ const GaugeChart = ({
         var _a2;
         handleChartClick(chartClickConfig, ((_a2 = params == null ? void 0 : params.name) == null ? void 0 : _a2.split(" ").join("_")) || "undefined");
       }
-    }
+    },
+    ref: chartRef
   });
 };
 const SankeyChart = ({
   data: data2,
   margins,
-  enableSaveAs,
+  chartRef,
   colors: colors2,
   backGroundColor,
   chartClickConfig
@@ -80873,11 +80842,6 @@ const SankeyChart = ({
   }
   const option2 = {
     toolbox: {
-      feature: {
-        saveAsImage: enableSaveAs && {
-          name: "databrain"
-        }
-      },
       emphasis: {
         iconStyle: {
           borderColor: "#5865F6"
@@ -80932,7 +80896,8 @@ const SankeyChart = ({
           var _a3;
           handleChartClick(chartClickConfig, ((_a3 = params == null ? void 0 : params.name) == null ? void 0 : _a3.split(" ").join("_")) || "undefined");
         }
-      }
+      },
+      ref: chartRef
     })
   });
 };
@@ -80942,7 +80907,7 @@ const StackedBarChart = ({
   legendSettings,
   labelSettings,
   axisSettings,
-  enableSaveAs,
+  chartRef,
   colors: colors2,
   updateGroup,
   isEnableGroupBy,
@@ -80953,11 +80918,6 @@ const StackedBarChart = ({
   var _a2, _b2;
   const option2 = {
     toolbox: {
-      feature: {
-        saveAsImage: enableSaveAs && {
-          name: "databrain"
-        }
-      },
       emphasis: {
         iconStyle: {
           borderColor: "#5865F6"
@@ -81060,7 +81020,8 @@ const StackedBarChart = ({
           var _a3;
           handleChartClick(chartClickConfig, ((_a3 = params == null ? void 0 : params.name) == null ? void 0 : _a3.split(" ").join("_")) || "undefined");
         }
-      }
+      },
+      ref: chartRef
     }), isEnableGroupBy && updateGroup && /* @__PURE__ */ jsx(EChartsReact, {
       style: {
         width: "100%",
@@ -81071,7 +81032,8 @@ const StackedBarChart = ({
         click: (params) => {
           updateGroup(params.name);
         }
-      }
+      },
+      ref: chartRef
     })]
   });
 };
@@ -81357,10 +81319,10 @@ const BoxPlot = ({
   margins,
   legendSettings,
   axisSettings,
-  enableSaveAs,
   colors: colors2,
   customSettings,
-  chartClickConfig
+  chartClickConfig,
+  chartRef
 }) => {
   var _a2;
   const modifiedData = [];
@@ -81371,11 +81333,6 @@ const BoxPlot = ({
   });
   const option2 = {
     toolbox: {
-      feature: {
-        saveAsImage: enableSaveAs && {
-          name: "databrain"
-        }
-      },
       emphasis: {
         iconStyle: {
           borderColor: "#5865F6"
@@ -81475,6 +81432,7 @@ const BoxPlot = ({
   };
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsx(EChartsReact, {
+      ref: chartRef,
       style: {
         width: "100%",
         height: "90%"
@@ -81621,7 +81579,8 @@ const MetricChart = ({
   isEnableGroupBy,
   backGroundColor,
   chartClickConfig,
-  tableSettings
+  tableSettings,
+  chartRef
 }) => {
   var _a2, _b2, _c2, _d;
   if (chartType2 === CHART_TYPES.line) {
@@ -81632,10 +81591,10 @@ const MetricChart = ({
       labelSettings,
       axisSettings,
       customSettings,
-      enableSaveAs,
       updateGroup,
       isEnableGroupBy,
-      chartClickConfig
+      chartClickConfig,
+      chartRef
     });
   }
   if (chartType2 === CHART_TYPES.stepped) {
@@ -81652,7 +81611,8 @@ const MetricChart = ({
       updateGroup,
       isEnableGroupBy,
       backGroundColor,
-      chartClickConfig
+      chartClickConfig,
+      chartRef
     });
   }
   if (chartType2 === CHART_TYPES.bar) {
@@ -81667,7 +81627,8 @@ const MetricChart = ({
       axisSettings,
       customSettings,
       margins,
-      chartClickConfig
+      chartClickConfig,
+      chartRef
     });
   }
   if (chartType2 === CHART_TYPES.stack) {
@@ -81683,7 +81644,8 @@ const MetricChart = ({
       isEnableGroupBy,
       backGroundColor,
       customSettings,
-      chartClickConfig
+      chartClickConfig,
+      chartRef
     });
   }
   if (chartType2 === CHART_TYPES.histogram) {
@@ -81699,7 +81661,8 @@ const MetricChart = ({
       isEnableGroupBy,
       backGroundColor,
       customSettings,
-      chartClickConfig
+      chartClickConfig,
+      chartRef
     });
   }
   if (chartType2 === CHART_TYPES.bubble) {
@@ -81715,7 +81678,8 @@ const MetricChart = ({
       isEnableGroupBy,
       backGroundColor,
       customSettings,
-      chartClickConfig
+      chartClickConfig,
+      chartRef
     });
   }
   if (chartType2 === CHART_TYPES.scatter) {
@@ -81731,7 +81695,8 @@ const MetricChart = ({
       isEnableGroupBy,
       backGroundColor,
       customSettings,
-      chartClickConfig
+      chartClickConfig,
+      chartRef
     });
   }
   if (chartType2 === CHART_TYPES.row) {
@@ -81746,7 +81711,8 @@ const MetricChart = ({
       isEnableGroupBy,
       backGroundColor,
       customSettings,
-      chartClickConfig
+      chartClickConfig,
+      chartRef
     });
   }
   if (chartType2 === CHART_TYPES.area) {
@@ -81765,7 +81731,8 @@ const MetricChart = ({
       isEnableGroupBy,
       backGroundColor,
       customSettings,
-      chartClickConfig
+      chartClickConfig,
+      chartRef
     });
   }
   if (chartType2 === CHART_TYPES.combo) {
@@ -81786,7 +81753,8 @@ const MetricChart = ({
       isEnableGroupBy,
       backGroundColor,
       customSettings,
-      chartClickConfig
+      chartClickConfig,
+      chartRef
     });
   }
   if (chartType2 === CHART_TYPES.pie) {
@@ -81799,7 +81767,8 @@ const MetricChart = ({
       colors: colors2,
       updateGroup,
       isEnableGroupBy,
-      chartClickConfig
+      chartClickConfig,
+      chartRef
     });
   }
   if (chartType2 === CHART_TYPES.doughnut) {
@@ -81812,7 +81781,8 @@ const MetricChart = ({
       colors: colors2,
       updateGroup,
       isEnableGroupBy,
-      chartClickConfig
+      chartClickConfig,
+      chartRef
     });
   }
   if (chartType2 === CHART_TYPES.waterfall) {
@@ -81842,7 +81812,8 @@ const MetricChart = ({
       isEnableGroupBy,
       backGroundColor,
       customSettings,
-      chartClickConfig
+      chartClickConfig,
+      chartRef
     });
   }
   if (chartType2 === CHART_TYPES.funnel) {
@@ -81852,7 +81823,8 @@ const MetricChart = ({
       legendSettings,
       labelSettings,
       colors: colors2,
-      chartClickConfig
+      chartClickConfig,
+      chartRef
     });
   }
   if (chartType2 === CHART_TYPES.gauge) {
@@ -81863,7 +81835,8 @@ const MetricChart = ({
       labelSettings,
       enableSaveAs,
       colors: colors2,
-      chartClickConfig
+      chartClickConfig,
+      chartRef
     });
   }
   if (chartType2 === CHART_TYPES.sankey) {
@@ -81875,7 +81848,8 @@ const MetricChart = ({
       enableSaveAs,
       colors: colors2,
       backGroundColor,
-      chartClickConfig
+      chartClickConfig,
+      chartRef
     });
   }
   if (chartType2 === CHART_TYPES.singleValue) {
@@ -81897,7 +81871,8 @@ const MetricChart = ({
       enableSaveAs,
       colors: colors2,
       customSettings,
-      chartClickConfig
+      chartClickConfig,
+      chartRef
     });
   }
   if (chartType2 === CHART_TYPES.table) {
@@ -81945,7 +81920,8 @@ const FullScreenChart = ({
           dynamic: "{{value}}",
           route: "/{{value}}",
           routeType: "internal"
-        }
+        },
+        chartRef: chart.chartRef
       })
     })
   });
@@ -82409,6 +82385,17 @@ const Header = ({
   const {
     globalTheme
   } = useGlobalTheme();
+  const saveDashboardStyle = useMemo(() => {
+    var _a2, _b2;
+    if (!globalTheme)
+      return void 0;
+    const style2 = {};
+    if ((_a2 = globalTheme.dashboard.ctaColor) == null ? void 0 : _a2.trim())
+      style2.backgroundColor = globalTheme.dashboard.ctaColor.trim() || void 0;
+    if ((_b2 = globalTheme.dashboard.ctaTextColor) == null ? void 0 : _b2.trim())
+      style2.color = globalTheme.dashboard.ctaTextColor.trim() || void 0;
+    return style2;
+  }, [globalTheme]);
   return /* @__PURE__ */ jsxs("div", {
     className: styles$h["header-container"],
     children: [/* @__PURE__ */ jsxs("div", {
@@ -82444,10 +82431,7 @@ const Header = ({
         className: styles$h["save-btn"],
         isDisabled: isDisableSaveBtn,
         onClick: () => setShowSaveMetricModal(true),
-        style: globalTheme ? {
-          backgroundColor: `${globalTheme.dashboard.ctaColor} !important`,
-          color: `${globalTheme.dashboard.ctaTextColor} !important`
-        } : void 0,
+        style: saveDashboardStyle,
         children: [/* @__PURE__ */ jsx(Icons, {
           name: "save-icon",
           className: styles$h["save-btn-icon"]
@@ -83654,6 +83638,7 @@ const ChartTab = ({
   setTableSettings
 }) => {
   var _a2, _b2, _c2, _d;
+  const chartRef = useRef(null);
   const {
     globalTheme
   } = useGlobalTheme();
@@ -83793,7 +83778,8 @@ const ChartTab = ({
               routeType: "internal"
             },
             enableSaveAs: true,
-            tableSettings
+            tableSettings,
+            chartRef
           })
         }) : /* @__PURE__ */ jsxs("div", {
           className: styles$b.metricChartEmpty,
@@ -83847,7 +83833,8 @@ const ChartTab = ({
           dynamic: "{{value}}",
           route: "/{{value}}",
           routeType: "internal"
-        }
+        },
+        chartRef
       }
     })]
   });
@@ -84978,6 +84965,17 @@ const MetricForm = ({
     if (isEnableGroupBy)
       setSelectedGroupBy(selectedDimensions);
   }, [selectedDimensions, isEnableGroupBy]);
+  const primaryButtonStyle = useMemo(() => {
+    var _a2, _b2;
+    if (!globalTheme)
+      return void 0;
+    const style2 = {};
+    if ((_a2 = globalTheme.dashboard.ctaColor) == null ? void 0 : _a2.trim())
+      style2.backgroundColor = globalTheme.dashboard.ctaColor.trim() || void 0;
+    if ((_b2 = globalTheme.dashboard.ctaTextColor) == null ? void 0 : _b2.trim())
+      style2.color = globalTheme.dashboard.ctaTextColor.trim() || void 0;
+    return style2;
+  }, [globalTheme]);
   return /* @__PURE__ */ jsxs("div", {
     className: styles$5["form-container"],
     children: [!isDisableTimeColumn && /* @__PURE__ */ jsxs("div", {
@@ -85093,6 +85091,7 @@ const MetricForm = ({
                 type: "button",
                 variant: "primary",
                 size: "small",
+                style: primaryButtonStyle,
                 className: styles$5.disabled,
                 isDisabled: !metricAggregate.value || !metricColumn.value,
                 onClick: () => {
@@ -85184,6 +85183,7 @@ const MetricForm = ({
                 type: "button",
                 variant: "primary",
                 size: "small",
+                style: primaryButtonStyle,
                 className: styles$5.disabled,
                 isDisabled: !column2.value,
                 onClick: () => {
@@ -85281,6 +85281,7 @@ const MetricForm = ({
                 variant: "primary",
                 size: "small",
                 isDisabled: !filterColumn.value || !operator.value || !isFilterValue,
+                style: primaryButtonStyle,
                 className: styles$5.disabled,
                 onClick: () => {
                   setFilters((prev) => [...prev, `${isBigQuery || isMySql ? `${filterColumn.value}` : isMongoDb ? `\`${filterColumn.value}\`` : `"${filterColumn.value}"`} ${operator.value} ${isInFilter ? `(${selectedFilterValues.map((f2) => `'${f2}'`).join(", ")})` : `${filterValue.value ? `'${filterValue.value}'` : ""}`}`]);
@@ -85337,6 +85338,7 @@ const MetricForm = ({
                 size: "small",
                 isDisabled: !sortColumn.value || isDisableSorting,
                 className: styles$5.disabled,
+                style: primaryButtonStyle,
                 onClick: () => {
                   if (!columns.length) {
                     setSort(`${sortAggregate.value}(${isBigQuery || isMySql ? `${sortColumn.value}` : isMongoDb ? `\`${sortColumn.value}\`` : `"${sortColumn.value}"`})`);
@@ -85387,10 +85389,7 @@ const MetricForm = ({
       variant: "primary",
       className: styles$5.generateButton,
       isDisabled: isGeneratingDataset || isDisableGenerate,
-      style: globalTheme ? {
-        backgroundColor: `${globalTheme.dashboard.ctaColor} !important`,
-        color: `${globalTheme.dashboard.ctaTextColor} !important`
-      } : void 0,
+      style: primaryButtonStyle,
       onClick: () => {
         var _a2, _b2, _c2;
         setError("");
@@ -85803,6 +85802,17 @@ const EmbeddedMetricCreation = ({
       updateGroupData(data2, [selectedGroupBy[0]], selectedGroupBy, setGroupedData);
     }
   }, [groupedData, isEnableGroupBy, selectedGroupBy]);
+  const createMetricStyle = useMemo(() => {
+    var _a3, _b2;
+    if (!globalTheme)
+      return void 0;
+    const style2 = {};
+    if ((_a3 = globalTheme.dashboard.ctaColor) == null ? void 0 : _a3.trim())
+      style2.backgroundColor = globalTheme.dashboard.ctaColor.trim() || void 0;
+    if ((_b2 = globalTheme.dashboard.ctaTextColor) == null ? void 0 : _b2.trim())
+      style2.color = globalTheme.dashboard.ctaTextColor.trim() || void 0;
+    return style2;
+  }, [globalTheme]);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx(Button, {
       type: "button",
@@ -85810,10 +85820,7 @@ const EmbeddedMetricCreation = ({
       size: "large",
       className: variant === "floating" ? styles$g.floatingCreateButton : "",
       onClick: () => setShowMetricCreateModal(true),
-      style: globalTheme ? {
-        backgroundColor: `${globalTheme.dashboard.ctaColor} !important`,
-        color: `${globalTheme.dashboard.ctaTextColor} !important`
-      } : void 0,
+      style: createMetricStyle,
       children: variant === "floating" ? /* @__PURE__ */ jsx(mdiPlus, {
         className: styles$g.floatingCreateButtonIcon
       }) : "Create Metric"
@@ -91210,6 +91217,50 @@ var styles = {
   features
 };
 var NoData = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgMzAwIj48ZGVmcz48c3R5bGU+LmNscy0xe3N0cm9rZTojMTgyYzYwO30uY2xzLTEsLmNscy0ye2ZpbGw6bm9uZTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7fS5jbHMtM3tmaWxsOiM1ODY1ZjY7b3BhY2l0eTouMTt9LmNscy00e2ZpbGw6I2YyZjNmNDt9LmNscy01e2ZpbGw6I2MxYzdjOTt9LmNscy02e2ZpbGw6I2RhZGVkZjt9LmNscy03e2ZpbGw6IzE4MmM2MDt9LmNscy0ye3N0cm9rZTojNTg2NWY2O3N0cm9rZS13aWR0aDo0cHg7fTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0ibTIxMC41LDIwMC44M2MuNC0uNjYuNjgtMS40LjgyLTIuMiwxLjU4LTguODcsMy4xNS0xNy43NSw0LjczLTI2LjYyLDIuMDMtMTEuNDQsNC4wNi0yMi44OCw2LjA5LTM0LjMyLjcyLTQuMDgsMS43Ny04LjI1LDIuMTYtMTIuMzguNDMtNC41Ni0yLjA5LTkuNjgtNi44Ni0xMC42Ni0uMDEsMC0uMDMsMC0uMDQsMC0yLjQtLjQ5LTUuMDItLjIyLTcuNDUtLjIyaC00NC4yMmMtLjUyLDAtMi4zMy0uMzEtMi43NywwbC0yNC4yOCwxNy4yMmgtNjEuNjFjLTMuOTcsMC02Ljk5LDMuNTYtNi4zNCw3LjQ3bDkuNzUsNTkuNDJjLjUxLDMuMTEsMy4yLDUuMzksNi4zNCw1LjM5aDExNy44NiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0ibTIwNywxMTQuNDN2LTguNTRjMC0zLjU1LTIuODgtNi40My02LjQzLTYuNDNoLTE3LjE5Ii8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJtMTAzLjQ3LDk5LjQ2aC0xNS4xMmMtMy41NSwwLTYuNDMsMi44OC02LjQzLDYuNDN2MjUuNDgiLz48Zz48bGluZSBjbGFzcz0iY2xzLTIiIHgxPSIxMTQuMTIiIHkxPSI5NC4wOCIgeDI9IjE0NC44NCIgeTI9Ijk0LjA4Ii8+PGc+PHJlY3QgY2xhc3M9ImNscy02IiB4PSIxMTIuNjEiIHk9IjEwMi40MyIgd2lkdGg9IjE4Ljk3IiBoZWlnaHQ9IjMuMiIvPjxyZWN0IGNsYXNzPSJjbHMtNCIgeD0iMTM3LjYxIiB5PSIxMDIuNDMiIHdpZHRoPSI4LjkiIGhlaWdodD0iMy4yIi8+PC9nPjwvZz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Im0xNjQuOTgsODEuNDZsLS4wOCwxNi4yOHMuMTUsMy4yNC4zLDMuNjIuNiwxLjUxLDEuMTMsMS44OCwxLjAyLjc5LDEuNzcsMS4wNi45NC40OSwyLjExLjQ5LDE4LjE3LjA0LDE4LjE3LjA0bC0yMy40MS0yMy4zN1oiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Im0xODguNTEsMTA0LjkxdjkuNTIiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Im0xMDMuNTMsMTMxLjM3di00NC45NWMwLTIuODQsMi4zLTUuMTUsNS4xNS01LjE1LDE4Ljc3LDAsMzcuNTQsMCw1Ni4zMSwwIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJtMTY1LjAxLDgxLjI3djE4LjM1YzAsMi44NCwyLjMxLDUuMTUsNS4xNSw1LjE1aDE4LjM1cy0yMy41LTIzLjYyLTIzLjUtMjMuNVoiLz48Y2lyY2xlIGNsYXNzPSJjbHMtMSIgY3g9IjE2OC4yMSIgY3k9IjE2My4yNyIgcj0iMjQuOTYiLz48Y2lyY2xlIGNsYXNzPSJjbHMtMSIgY3g9IjE2OC4yMSIgY3k9IjE2My4yNyIgcj0iMzEuMjUiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Im0xOTIuNTcsMTgzLjMzYzkuNjIsOS42MiwzMC4yOCwzMC4yOCwzMC4yOCwzMC4yOCwxLjE3LDEuMTcsMS4xNywzLjA3LDAsNC4yNHMtMy4wNywxLjE3LTQuMjQsMGMwLDAtMjAuNTgtMjAuNTgtMzAuMjItMzAuMjIiLz48Zz48cGF0aCBjbGFzcz0iY2xzLTUiIGQ9Im0xNjguNjYsMTcwLjkzYy0uNzQsMC0xLjM0LjI0LTEuODEuNzItLjQ3LjQ4LS43MSwxLjA5LS43MSwxLjgzcy4yNCwxLjMyLjcxLDEuODFjLjQ3LjQ5LDEuMDcuNzQsMS44MS43NHMxLjM0LS4yNSwxLjgxLS43NGMuNDctLjQ5LjcxLTEuMS43MS0xLjgxcy0uMjQtMS4zNC0uNzEtMS44M2MtLjQ3LS40OC0xLjA4LS43Mi0xLjgxLS43MloiLz48cGF0aCBjbGFzcz0iY2xzLTUiIGQ9Im0xNzQuNjksMTUzLjc3Yy0uNjItMS4wMi0xLjQ5LTEuODItMi42LTIuNC0xLjEyLS41Ny0yLjQtLjg2LTMuODUtLjg2LTEuNjgsMC0zLjE3LjQtNC40NywxLjE5cy0yLjI5LDEuOTQtMi45OCwzLjQzbDIuNzYsMi4yOGMuNDYtMS4wNiwxLjA3LTEuODYsMS44NS0yLjQuNzctLjU0LDEuNjUtLjgxLDIuNjQtLjgxLjc2LDAsMS40MS4xNCwxLjk3LjQxLjU1LjI4Ljk4LjY3LDEuMjgsMS4xNy4zLjUxLjQ1LDEuMS40NSwxLjc5cy0uMTYsMS4yOS0uNDcsMS44MWMtLjMxLjUyLS43NS45Mi0xLjMxLDEuMjEtLjU2LjI5LTEuMjIuNDMtMS45OC40M2gtLjkzdjYuNjZoMy4yOGwuMjYtMy43M2MuNzEtLjI0LDEuMzctLjU1LDEuOTUtLjkzLjk5LS42NCwxLjc1LTEuNDUsMi4yOS0yLjQxLjU0LS45Ny44MS0yLjA3LjgxLTMuMzEsMC0xLjMzLS4zMS0yLjUxLS45My0zLjU0WiIvPjwvZz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Im04NS41NSwyMDMuOTdjLjY4LDIuODksMy4yNiw0Ljk2LDYuMjYsNC45NmgxMTcuNzMiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Im0yMTUuMzcsMjA2LjA0Yy40Ny0uNzEuOC0xLjUyLjk1LTIuNCwxLjU4LTguODcsMy4xNS0xNy43NSw0LjczLTI2LjYyLDIuMDMtMTEuNDQsNC4wNi0yMi44OCw2LjA5LTM0LjMyLjcyLTQuMDgsMS43Ny04LjI1LDIuMTYtMTIuMzguMzktNC4xNi0xLjY4LTguNzktNS42Ny0xMC4zMSIvPjxwYXRoIGNsYXNzPSJjbHMtNyIgZD0ibTIyMy41MSwxMjAuMDhzLjQ5LDEuNjIuNTMsMS43My4zMiwyLjQ0LjMyLDIuNDRsLS4wNCwxLjkxLTEuMzgsNy4xMy0zLjM5LDE5LjMxLTIuODksMTUuOTItMi45NiwxNi43Ni0yLjQ0LDEzLjE2LS45MiwyLjY1LDQuOTgsNS4xNS44NS0yLjE1LjgxLTQuMDYsMS40OC04LjMzLDIuODItMTUuNzEsMi4xNS0xMi4xMSwxLjk0LTExLjM2LDIuNzUtMTQuNzUuODgtNC42OS4yOC0yLjU4LjA3LTIuMTItLjYtMi43NS0xLjI0LTIuMzYtMS4wOS0xLjU5LTIuMDEtMS4zMS0uOTItLjI4WiIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtNyIgcG9pbnRzPSI4NS42OCAyMDMuOTMgMjA0LjU1IDIwMy44NCAyMDkuMzUgMjA4LjczIDE0OC40OCAyMDguODggOTAuOTUgMjA5LjAyIDg5LjUgMjA4LjY2IDg3Ljk4IDIwNy45MiA4Ni44MiAyMDYuNTggODYuMDEgMjA1LjAzIDg1LjY4IDIwMy45MyIvPjwvc3ZnPg==";
+const handleSaveChartImage = (chartRef) => {
+  var _a2;
+  const chartInstance = (_a2 = chartRef.current) == null ? void 0 : _a2.getEchartsInstance();
+  if (chartInstance) {
+    const dataUrl = chartInstance.getConnectedDataURL({
+      type: "png",
+      pixelRatio: 2,
+      excludeComponents: ["toolbox"],
+      backgroundColor: "#fff"
+    });
+    const link = document.createElement("a");
+    link.href = dataUrl;
+    link.download = "chart.png";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+};
+const uilImageDownload = (props) => /* @__PURE__ */ jsx("svg", {
+  viewBox: "0 0 24 24",
+  width: "1.2em",
+  height: "1.2em",
+  ...props,
+  children: /* @__PURE__ */ jsx("path", {
+    fill: "currentColor",
+    d: "M22.71 6.29a1 1 0 0 0-1.42 0L20 7.59V2a1 1 0 0 0-2 0v5.59l-1.29-1.3a1 1 0 0 0-1.42 1.42l3 3a1 1 0 0 0 .33.21a.94.94 0 0 0 .76 0a1 1 0 0 0 .33-.21l3-3a1 1 0 0 0 0-1.42ZM19 13a1 1 0 0 0-1 1v.38l-1.48-1.48a2.79 2.79 0 0 0-3.93 0l-.7.7l-2.48-2.48a2.85 2.85 0 0 0-3.93 0L4 12.6V7a1 1 0 0 1 1-1h8a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3v-5a1 1 0 0 0-1-1ZM5 20a1 1 0 0 1-1-1v-3.57l2.9-2.9a.79.79 0 0 1 1.09 0l3.17 3.17l4.3 4.3Zm13-1a.89.89 0 0 1-.18.53L13.31 15l.7-.7a.77.77 0 0 1 1.1 0L18 17.21Z"
+  })
+});
+const ChartImageDownloadButton = ({
+  className,
+  iconClass,
+  text: text2,
+  chartRef
+}) => {
+  return /* @__PURE__ */ jsxs(Button, {
+    variant: "custom",
+    type: "button",
+    onClick: () => handleSaveChartImage(chartRef),
+    className,
+    children: [/* @__PURE__ */ jsx(uilImageDownload, {
+      className: iconClass
+    }), text2]
+  });
+};
 const MetricCard = ({
   globalFilters = {
     tableName: "",
@@ -91224,6 +91275,7 @@ const MetricCard = ({
   renderHeaderName
 }) => {
   var _a2, _b2, _c2;
+  const chartRef = useRef(null);
   const {
     globalTheme
   } = useGlobalTheme();
@@ -91480,6 +91532,32 @@ const MetricCard = ({
       } : rls));
     }
   };
+  const titleStyle = useMemo(() => {
+    var _a3, _b3, _c3;
+    if (!globalTheme)
+      return void 0;
+    const style2 = {};
+    if ((_a3 = globalTheme.cardTitle.fontWeight) == null ? void 0 : _a3.trim())
+      style2.fontWeight = globalTheme.cardTitle.fontWeight.trim() || void 0;
+    if ((_b3 = globalTheme.cardTitle.color) == null ? void 0 : _b3.trim())
+      style2.color = globalTheme.cardTitle.color.trim() || void 0;
+    if ((_c3 = globalTheme.cardTitle.fontSize) == null ? void 0 : _c3.trim())
+      style2.color = globalTheme.cardTitle.fontSize.trim() || void 0;
+    return style2;
+  }, [globalTheme]);
+  const descriptionStyle = useMemo(() => {
+    var _a3, _b3, _c3;
+    if (!globalTheme)
+      return void 0;
+    const style2 = {};
+    if ((_a3 = globalTheme.cardDescription.fontWeight) == null ? void 0 : _a3.trim())
+      style2.fontWeight = globalTheme.cardDescription.fontWeight.trim() || void 0;
+    if ((_b3 = globalTheme.cardDescription.color) == null ? void 0 : _b3.trim())
+      style2.color = globalTheme.cardDescription.color.trim() || void 0;
+    if ((_c3 = globalTheme.cardDescription.fontSize) == null ? void 0 : _c3.trim())
+      style2.color = globalTheme.cardDescription.fontSize.trim() || void 0;
+    return style2;
+  }, [globalTheme]);
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsxs("div", {
       className: styles.cardContainer,
@@ -91489,30 +91567,18 @@ const MetricCard = ({
           variant: "h3",
           styleClass: "primary",
           className: styles.metricName,
-          style: globalTheme ? {
-            color: globalTheme.cardTitle.color,
-            fontWeight: globalTheme.cardTitle.fontWeight,
-            fontSize: globalTheme.cardTitle.fontSize
-          } : void 0,
+          style: titleStyle,
           children: [renderHeaderName ? renderHeaderName(metricItem.name) : /* @__PURE__ */ jsx(Button, {
             type: "button",
             variant: "custom",
             isDisabled: !clickBehaviourConfigs.card.isEnable,
             className: "disabled:cursor-text",
             onClick: () => handleCardClick(clickBehaviourConfigs, metricItem.metricId, metricItem.id),
-            style: globalTheme ? {
-              color: globalTheme.cardTitle.color,
-              fontWeight: globalTheme.cardTitle.fontWeight,
-              fontSize: globalTheme.cardTitle.fontSize
-            } : void 0,
+            style: titleStyle,
             children: metricItem.name
           }), metricItem.description && /* @__PURE__ */ jsx("span", {
             className: styles.metricDescription,
-            style: globalTheme ? {
-              color: globalTheme.cardDescription.color,
-              fontWeight: globalTheme.cardDescription.fontWeight,
-              fontSize: globalTheme.cardDescription.fontSize
-            } : void 0,
+            style: descriptionStyle,
             children: metricItem.description
           })]
         }), /* @__PURE__ */ jsxs("div", {
@@ -91604,13 +91670,19 @@ const MetricCard = ({
                   backGroundColor,
                   tableSettings,
                   enableSaveAs: true,
-                  chartClickConfig: clickBehaviourConfigs.chart
+                  chartClickConfig: clickBehaviourConfigs.chart,
+                  chartRef
                 });
               },
               children: [/* @__PURE__ */ jsx(Icons, {
                 name: "fullscreen-icon",
                 className: styles.popupItemIcon
               }), "Enter Fullscreen"]
+            }), /* @__PURE__ */ jsx(ChartImageDownloadButton, {
+              text: "Save As PNG",
+              chartRef,
+              className: `${styles.popupItem} ${styles.csvBtn}`,
+              iconClass: styles.popupItemIcon
             }), /* @__PURE__ */ jsx(CsvDownloadButton, {
               data: dataDb,
               fileName: metricItem.name,
@@ -91666,7 +91738,8 @@ const MetricCard = ({
           isEnableGroupBy,
           customSettings,
           backGroundColor,
-          chartClickConfig: clickBehaviourConfigs.chart
+          chartClickConfig: clickBehaviourConfigs.chart,
+          chartRef
         }) : null]
       })]
     })
@@ -91804,6 +91877,32 @@ const SingleValueCard = ({
       } : rls));
     }
   };
+  const titleStyle = useMemo(() => {
+    var _a3, _b2, _c2;
+    if (!globalTheme)
+      return void 0;
+    const style2 = {};
+    if ((_a3 = globalTheme.cardTitle.fontWeight) == null ? void 0 : _a3.trim())
+      style2.fontWeight = globalTheme.cardTitle.fontWeight.trim() || void 0;
+    if ((_b2 = globalTheme.cardTitle.color) == null ? void 0 : _b2.trim())
+      style2.color = globalTheme.cardTitle.color.trim() || void 0;
+    if ((_c2 = globalTheme.cardTitle.fontSize) == null ? void 0 : _c2.trim())
+      style2.color = globalTheme.cardTitle.fontSize.trim() || void 0;
+    return style2;
+  }, [globalTheme]);
+  const descriptionStyle = useMemo(() => {
+    var _a3, _b2, _c2;
+    if (!globalTheme)
+      return void 0;
+    const style2 = {};
+    if ((_a3 = globalTheme.cardDescription.fontWeight) == null ? void 0 : _a3.trim())
+      style2.fontWeight = globalTheme.cardDescription.fontWeight.trim() || void 0;
+    if ((_b2 = globalTheme.cardDescription.color) == null ? void 0 : _b2.trim())
+      style2.color = globalTheme.cardDescription.color.trim() || void 0;
+    if ((_c2 = globalTheme.cardDescription.fontSize) == null ? void 0 : _c2.trim())
+      style2.color = globalTheme.cardDescription.fontSize.trim() || void 0;
+    return style2;
+  }, [globalTheme]);
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsxs("div", {
       className: styles.cardContainer,
@@ -91813,30 +91912,18 @@ const SingleValueCard = ({
           variant: "h3",
           styleClass: "primary",
           className: styles.metricName,
-          style: globalTheme ? {
-            color: globalTheme.cardTitle.color,
-            fontWeight: globalTheme.cardTitle.fontWeight,
-            fontSize: globalTheme.cardTitle.fontSize
-          } : void 0,
+          style: titleStyle,
           children: [renderHeaderName ? renderHeaderName(metricItem.name) : /* @__PURE__ */ jsx(Button, {
             type: "button",
             variant: "custom",
             isDisabled: !clickBehaviourConfigs.card.isEnable,
             className: "disabled:cursor-text",
             onClick: () => handleCardClick(clickBehaviourConfigs, metricItem.metricId, metricItem.id),
-            style: globalTheme ? {
-              color: globalTheme.cardTitle.color,
-              fontWeight: globalTheme.cardTitle.fontWeight,
-              fontSize: globalTheme.cardTitle.fontSize
-            } : void 0,
+            style: titleStyle,
             children: metricItem.name
           }), metricItem.description && /* @__PURE__ */ jsx("span", {
             className: styles.metricDescription,
-            style: globalTheme ? {
-              color: globalTheme.cardDescription.color,
-              fontWeight: globalTheme.cardDescription.fontWeight,
-              fontSize: globalTheme.cardDescription.fontSize
-            } : void 0,
+            style: descriptionStyle,
             children: metricItem.description
           })]
         }), /* @__PURE__ */ jsx("div", {
@@ -92137,13 +92224,21 @@ const EmbeddedDashboard = React__default.memo(({
       setGlobalTheme(res.themes[0]);
     }
   });
+  const embedDashboardStyle = useMemo(() => {
+    var _a3, _b3;
+    if (!globalTheme)
+      return void 0;
+    const style2 = {};
+    if ((_a3 = globalTheme.dashboard.backgroundColor) == null ? void 0 : _a3.trim())
+      style2.backgroundColor = globalTheme.dashboard.backgroundColor.trim() || void 0;
+    if ((_b3 = globalTheme.general.fontFamily) == null ? void 0 : _b3.trim())
+      style2.fontFamily = globalTheme.general.fontFamily.trim() || void 0;
+    return style2;
+  }, [globalTheme]);
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsxs("div", {
       className: styles$C["embedDashboard-container"],
-      style: globalTheme ? {
-        backgroundColor: `${globalTheme.dashboard.backgroundColor} !important`,
-        fontFamily: `${globalTheme.general.fontFamily} !important`
-      } : void 0,
+      style: embedDashboardStyle,
       children: [((_a2 = data2.externalDashboard) == null ? void 0 : _a2.id) && !isLoading && /* @__PURE__ */ jsxs(Fragment, {
         children: [!(options2 == null ? void 0 : options2.disableMetricCreation) && !data2.externalDashboard.filters.length && !data2.isAllowedToCreateMetrics ? null : /* @__PURE__ */ jsxs("div", {
           className: (options2 == null ? void 0 : options2.headerVariant) === "floating" ? styles$C["embedDashboard-header-floating"] : styles$C["embedDashboard-header-static"],