@databrainhq/plugin 0.8.21 → 0.8.22

package/README.md

@@ -1,26 +1,26 @@
-# @databrainhq/plugin
-
-> Databrain app ui plugin.
-
-[![NPM](https://img.shields.io/npm/v/@databrainhq/plugin.svg)](https://www.npmjs.com/package/@databrainhq/plugin) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
-
-## Install
-
-```bash
-npm install @databrainhq/plugin
-```
-
-## Usage
-
-```tsx
-import { Dashboard } from '@databrainhq/plugin';
-import '@databrainhq/plugin/dist/style.css';
-
-const Example = () => {
-  return <Dashboard token={/* Your Guest Token */} />;
-};
-```
-
-## License
-
-MIT © [databrainhq](https://github.com/databrainhq)
+# @databrainhq/plugin
+
+> Databrain app ui plugin.
+
+[![NPM](https://img.shields.io/npm/v/@databrainhq/plugin.svg)](https://www.npmjs.com/package/@databrainhq/plugin) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+
+## Install
+
+```bash
+npm install @databrainhq/plugin
+```
+
+## Usage
+
+```tsx
+import { Dashboard } from '@databrainhq/plugin';
+import '@databrainhq/plugin/dist/style.css';
+
+const Example = () => {
+  return <Dashboard token={/* Your Guest Token */} />;
+};
+```
+
+## License
+
+MIT © [databrainhq](https://github.com/databrainhq)

package/dist/index.es.js

@@ -2639,17 +2639,17 @@ var classnames$1 = { exports: {} };
 })(classnames$1);
 var classnames = classnames$1.exports;
 var styles$G = {
-  "btn-primary": "_btn-primary_u81u9_1",
-  "btn-secondary": "_btn-secondary_u81u9_9",
-  "btn-reject": "_btn-reject_u81u9_17",
-  "btn-outlined": "_btn-outlined_u81u9_27",
-  "btn-tertiary": "_btn-tertiary_u81u9_35",
-  "btn-default": "_btn-default_u81u9_43",
-  "btn-large": "_btn-large_u81u9_49",
-  "btn-small": "_btn-small_u81u9_55",
-  "btn-xs": "_btn-xs_u81u9_61",
-  "btn-medium": "_btn-medium_u81u9_67",
-  "btn-11rem": "_btn-11rem_u81u9_75"
+  "btn-primary": "_btn-primary_17kvk_1",
+  "btn-secondary": "_btn-secondary_17kvk_5",
+  "btn-reject": "_btn-reject_17kvk_9",
+  "btn-outlined": "_btn-outlined_17kvk_14",
+  "btn-tertiary": "_btn-tertiary_17kvk_18",
+  "btn-default": "_btn-default_17kvk_22",
+  "btn-large": "_btn-large_17kvk_25",
+  "btn-small": "_btn-small_17kvk_28",
+  "btn-xs": "_btn-xs_17kvk_31",
+  "btn-medium": "_btn-medium_17kvk_34",
+  "btn-11rem": "_btn-11rem_17kvk_38"
 };
 var jsxRuntime$1 = { exports: {} };
 var reactJsxRuntime_production_min = {};
@@ -4944,39 +4944,39 @@ let xe = "div", ne = S.RenderStrategy, re = C$2(function(e2, s2) {
   let n2 = useContext(F) !== null, m2 = s() !== null;
   return React__default.createElement(React__default.Fragment, null, !n2 && m2 ? React__default.createElement(q, { ref: s$12, ...e2 }) : React__default.createElement(re, { ref: s$12, ...e2 }));
 }), We = Object.assign(q, { Child: Pe, Root: q });
-const listBoxButton = "_listBoxButton_kdipy_9";
-const selectedOptionText = "_selectedOptionText_kdipy_33";
-const transitionDiv = "_transitionDiv_kdipy_41";
-const listboxButtonWrapper = "_listboxButtonWrapper_kdipy_49";
-const arrowicon = "_arrowicon_kdipy_55";
-const leave$2 = "_leave_kdipy_61";
-const leaveFrom$2 = "_leaveFrom_kdipy_67";
-const leaveTo$2 = "_leaveTo_kdipy_73";
-const notAvailable = "_notAvailable_kdipy_79";
-const option$1 = "_option_kdipy_85";
-const activeOption = "_activeOption_kdipy_91";
-const optionSelected = "_optionSelected_kdipy_97";
-const inactiveOption = "_inactiveOption_kdipy_103";
-const optionLabel = "_optionLabel_kdipy_109";
-const optionSubLabel = "_optionSubLabel_kdipy_115";
-const selectedLabel = "_selectedLabel_kdipy_121";
-const nonselectedLabel = "_nonselectedLabel_kdipy_127";
-const check = "_check_kdipy_133";
-const checkActive = "_checkActive_kdipy_139";
-const checkInactive = "_checkInactive_kdipy_145";
-const checkIcon$1 = "_checkIcon_kdipy_151";
-const checkIconSelected = "_checkIconSelected_kdipy_157";
-const checkIconUnselected = "_checkIconUnselected_kdipy_163";
-const loadMore$1 = "_loadMore_kdipy_169";
-const selectedList = "_selectedList_kdipy_175";
-const selectedListItem = "_selectedListItem_kdipy_181";
-const label$7 = "_label_kdipy_187";
-const clientText$1 = "_clientText_kdipy_193";
+const listBoxButton = "_listBoxButton_fw8xj_5";
+const selectedOptionText = "_selectedOptionText_fw8xj_17";
+const transitionDiv = "_transitionDiv_fw8xj_21";
+const listboxButtonWrapper = "_listboxButtonWrapper_fw8xj_25";
+const arrowicon = "_arrowicon_fw8xj_28";
+const leave$2 = "_leave_fw8xj_31";
+const leaveFrom$2 = "_leaveFrom_fw8xj_34";
+const leaveTo$2 = "_leaveTo_fw8xj_37";
+const notAvailable = "_notAvailable_fw8xj_40";
+const option$1 = "_option_fw8xj_43";
+const activeOption = "_activeOption_fw8xj_46";
+const optionSelected = "_optionSelected_fw8xj_49";
+const inactiveOption = "_inactiveOption_fw8xj_52";
+const optionLabel = "_optionLabel_fw8xj_55";
+const optionSubLabel = "_optionSubLabel_fw8xj_58";
+const selectedLabel = "_selectedLabel_fw8xj_61";
+const nonselectedLabel = "_nonselectedLabel_fw8xj_64";
+const check = "_check_fw8xj_67";
+const checkActive = "_checkActive_fw8xj_70";
+const checkInactive = "_checkInactive_fw8xj_73";
+const checkIcon$1 = "_checkIcon_fw8xj_76";
+const checkIconSelected = "_checkIconSelected_fw8xj_79";
+const checkIconUnselected = "_checkIconUnselected_fw8xj_82";
+const loadMore$1 = "_loadMore_fw8xj_85";
+const selectedList = "_selectedList_fw8xj_88";
+const selectedListItem = "_selectedListItem_fw8xj_91";
+const label$7 = "_label_fw8xj_94";
+const clientText$1 = "_clientText_fw8xj_97";
 var style = {
-  "listBox-label": "_listBox-label_kdipy_1",
-  "listBoxButton-container": "_listBoxButton-container_kdipy_9",
+  "listBox-label": "_listBox-label_fw8xj_1",
+  "listBoxButton-container": "_listBoxButton-container_fw8xj_5",
   listBoxButton,
-  "listBox-option": "_listBox-option_kdipy_25",
+  "listBox-option": "_listBox-option_fw8xj_13",
   selectedOptionText,
   transitionDiv,
   listboxButtonWrapper,
@@ -5005,22 +5005,22 @@ var style = {
   label: label$7,
   clientText: clientText$1
 };
-const primary = "_primary_1ipyg_1";
-const secondary = "_secondary_1ipyg_9";
-const tertiary = "_tertiary_1ipyg_19";
+const primary = "_primary_18yak_1";
+const secondary = "_secondary_18yak_5";
+const tertiary = "_tertiary_18yak_10";
 var styles$E = {
   primary,
   secondary,
   tertiary,
-  "font-18": "_font-18_1ipyg_27",
-  "font-20": "_font-20_1ipyg_35",
-  "font-14": "_font-14_1ipyg_43",
-  "font-14a": "_font-14a_1ipyg_51",
-  "font-14b": "_font-14b_1ipyg_59",
-  "font-14c": "_font-14c_1ipyg_67",
-  "font-14d": "_font-14d_1ipyg_75",
-  "font-15": "_font-15_1ipyg_83",
-  "font-34": "_font-34_1ipyg_89"
+  "font-18": "_font-18_18yak_14",
+  "font-20": "_font-20_18yak_18",
+  "font-14": "_font-14_18yak_22",
+  "font-14a": "_font-14a_18yak_26",
+  "font-14b": "_font-14b_18yak_30",
+  "font-14c": "_font-14c_18yak_34",
+  "font-14d": "_font-14d_18yak_38",
+  "font-15": "_font-15_18yak_42",
+  "font-34": "_font-34_18yak_45"
 };
 const variants = {
   h1: "h1",
@@ -5048,10 +5048,10 @@ const Text = ({
     children: children2
   });
 };
-const search$1 = "_search_qirxg_1";
+const search$1 = "_search_1klck_1";
 var styles$D = {
-  "searchTab-container": "_searchTab-container_qirxg_1",
-  "searchTab-input": "_searchTab-input_qirxg_9",
+  "searchTab-container": "_searchTab-container_1klck_1",
+  "searchTab-input": "_searchTab-input_1klck_5",
   search: search$1
 };
 const iconoirSearch = (props) => /* @__PURE__ */ jsx("svg", {
@@ -7162,22 +7162,22 @@ const ExternalMetricForm = ({
     })]
   });
 };
-const container$d = "_container_1b6ua_1";
-const wrapper$3 = "_wrapper_1b6ua_9";
-const label$3 = "_label_1b6ua_17";
-const floatingLabel = "_floatingLabel_1b6ua_25";
-const clientText = "_clientText_1b6ua_33";
-const normalText = "_normalText_1b6ua_41";
-const dropdown$1 = "_dropdown_1b6ua_49";
-const options = "_options_1b6ua_57";
-const checkedOption = "_checkedOption_1b6ua_65";
-const option = "_option_1b6ua_57";
-const icon$1 = "_icon_1b6ua_81";
-const text$2 = "_text_1b6ua_89";
-const floatingText = "_floatingText_1b6ua_97";
-const search = "_search_1b6ua_105";
-const loadMore = "_loadMore_1b6ua_113";
-const loadMoreIcon = "_loadMoreIcon_1b6ua_121";
+const container$d = "_container_q0qrl_1";
+const wrapper$3 = "_wrapper_q0qrl_5";
+const label$3 = "_label_q0qrl_9";
+const floatingLabel = "_floatingLabel_q0qrl_13";
+const clientText = "_clientText_q0qrl_17";
+const normalText = "_normalText_q0qrl_21";
+const dropdown$1 = "_dropdown_q0qrl_25";
+const options = "_options_q0qrl_29";
+const checkedOption = "_checkedOption_q0qrl_33";
+const option = "_option_q0qrl_29";
+const icon$1 = "_icon_q0qrl_41";
+const text$2 = "_text_q0qrl_45";
+const floatingText = "_floatingText_q0qrl_49";
+const search = "_search_q0qrl_53";
+const loadMore = "_loadMore_q0qrl_57";
+const loadMoreIcon = "_loadMoreIcon_q0qrl_61";
 var styles$u = {
   container: container$d,
   wrapper: wrapper$3,
@@ -81359,6 +81359,23 @@ const StackedBarChart = ({
   handleChartRightClick
 }) => {
   var _a2, _b2;
+  const customData = useMemo(() => {
+    if (!data || !data.datasets)
+      return;
+    if (!customSettings.showFullStacked)
+      return;
+    const percentages = {};
+    data.datasets.forEach((dataset) => {
+      const labelPercentages = dataset.data.map((value, index2) => {
+        const total = data.datasets.reduce((acc, currDataset) => {
+          return acc + currDataset.data[index2];
+        }, 0);
+        return (value / total * 100).toFixed(2);
+      });
+      percentages[dataset.label] = labelPercentages;
+    });
+    return percentages;
+  }, [customSettings.showFullStacked, data]);
   const option2 = {
     toolbox: {
       emphasis: {
@@ -81405,6 +81422,7 @@ const StackedBarChart = ({
     },
     yAxis: {
       type: "value",
+      max: (customSettings == null ? void 0 : customSettings.showFullStacked) ? 100 : void 0,
       position: axisSettings.axis,
       splitLine: {
         show: !!((customSettings == null ? void 0 : customSettings.hideSplitLines) === "vertical" || (customSettings == null ? void 0 : customSettings.hideSplitLines) === "none")
@@ -81413,7 +81431,8 @@ const StackedBarChart = ({
         show: !!((customSettings == null ? void 0 : customSettings.hideAxisLines) === "x" || (customSettings == null ? void 0 : customSettings.hideAxisLines) === "none")
       },
       axisLabel: {
-        show: !!((customSettings == null ? void 0 : customSettings.axisLabels) === "x" || (customSettings == null ? void 0 : customSettings.axisLabels) === "none")
+        show: !!((customSettings == null ? void 0 : customSettings.axisLabels) === "x" || (customSettings == null ? void 0 : customSettings.axisLabels) === "none"),
+        formatter: "{value} %"
       }
     },
     legend: {
@@ -81429,7 +81448,7 @@ const StackedBarChart = ({
     },
     series: (_b2 = data == null ? void 0 : data.datasets) == null ? void 0 : _b2.map((item) => {
       return {
-        data: item.data,
+        data: (customSettings == null ? void 0 : customSettings.showFullStacked) ? customData[item.label] : item.data,
         type: "bar",
         name: item.label,
         stack: "x",
@@ -81455,7 +81474,7 @@ const StackedBarChart = ({
     children: /* @__PURE__ */ jsx(EChartsReact, {
       style: {
         width: "100%",
-        height: "90%"
+        height: "300px"
       },
       option: option2,
       onEvents: {
@@ -86498,10 +86517,10 @@ const GlobalFilters = ({
     integrationId,
     integrationName
   } = useMemo(() => {
-    var _a2, _b2, _c2, _d;
+    var _a2, _b2;
     return {
-      integrationId: (_b2 = (_a2 = data == null ? void 0 : data.companyIntegrations) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.integrationId,
-      integrationName: (_d = (_c2 = data == null ? void 0 : data.companyIntegrations) == null ? void 0 : _c2[0]) == null ? void 0 : _d.name
+      integrationId: (_a2 = data == null ? void 0 : data.companyIntegrations[0]) == null ? void 0 : _a2.id,
+      integrationName: (_b2 = data == null ? void 0 : data.companyIntegrations[0]) == null ? void 0 : _b2.name
     };
   }, [data == null ? void 0 : data.companyIntegrations]);
   return /* @__PURE__ */ jsx(Fragment, {
@@ -86656,12 +86675,12 @@ const InfoTooltip = ({
   });
 };
 var styles$l = {
-  "header-container": "_header-container_1pbz4_1",
-  "btn-container": "_btn-container_1pbz4_9",
-  "back-btn": "_back-btn_1pbz4_17",
-  "sql-btn": "_sql-btn_1pbz4_25",
-  "save-btn": "_save-btn_1pbz4_33",
-  "save-btn-icon": "_save-btn-icon_1pbz4_41"
+  "header-container": "_header-container_t2r6v_1",
+  "btn-container": "_btn-container_t2r6v_5",
+  "back-btn": "_back-btn_t2r6v_9",
+  "sql-btn": "_sql-btn_t2r6v_13",
+  "save-btn": "_save-btn_t2r6v_17",
+  "save-btn-icon": "_save-btn-icon_t2r6v_21"
 };
 const Header = ({
   setShowMetricCreateModal,
@@ -86714,20 +86733,20 @@ const Header = ({
   });
 };
 var styles$k = {
-  "create-btn": "_create-btn_zxqu9_1",
-  "modal-container": "_modal-container_zxqu9_9",
-  "query-modal": "_query-modal_zxqu9_17"
+  "create-btn": "_create-btn_ihjk8_1",
+  "modal-container": "_modal-container_ihjk8_5",
+  "query-modal": "_query-modal_ihjk8_9"
 };
-const container$7 = "_container_u2z1d_1";
-const header$3 = "_header_u2z1d_9";
-const wrapper$2 = "_wrapper_u2z1d_17";
-const column = "_column_u2z1d_33";
-const columnText$1 = "_columnText_u2z1d_41";
+const container$7 = "_container_1q2ss_1";
+const header$3 = "_header_1q2ss_5";
+const wrapper$2 = "_wrapper_1q2ss_9";
+const column = "_column_1q2ss_17";
+const columnText$1 = "_columnText_1q2ss_21";
 var styles$j = {
   container: container$7,
   header: header$3,
   wrapper: wrapper$2,
-  "col-container": "_col-container_u2z1d_25",
+  "col-container": "_col-container_1q2ss_13",
   column,
   columnText: columnText$1
 };
@@ -87325,7 +87344,15 @@ const ChartConfigure = ({
                   ...settings2,
                   show: e2.target.checked
                 }))
-              }) : null, /* @__PURE__ */ jsxs("div", {
+              }) : null, chartType2 === "stack" && /* @__PURE__ */ jsx(InputField, {
+                type: "checkbox",
+                label: "Show 100% Stacked Bar",
+                checked: customSettings.showFullStacked,
+                onChange: (e2) => setCustomSettings((settings2) => ({
+                  ...settings2,
+                  showFullStacked: e2.target.checked
+                }))
+              }), /* @__PURE__ */ jsxs("div", {
                 className: styles$i.seriesWrapper,
                 children: [/* @__PURE__ */ jsxs(Text, {
                   variant: "h1",
@@ -88137,10 +88164,10 @@ const ChartTab = ({
     })]
   });
 };
-const container$5 = "_container_wjdaz_1";
-const wrapper$1 = "_wrapper_wjdaz_9";
-const text = "_text_wjdaz_17";
-const table$2 = "_table_wjdaz_23";
+const container$5 = "_container_yjeiv_1";
+const wrapper$1 = "_wrapper_yjeiv_5";
+const text = "_text_yjeiv_9";
+const table$2 = "_table_yjeiv_12";
 var styles$e = {
   container: container$5,
   wrapper: wrapper$1,
@@ -88173,16 +88200,16 @@ const InputTables = ({
     })
   });
 };
-const container$4 = "_container_127xg_1";
-const header$1 = "_header_127xg_9";
-const tabButton$1 = "_tabButton_127xg_31";
-const selectedTab = "_selectedTab_127xg_37";
-const table$1 = "_table_127xg_43";
+const container$4 = "_container_38zl3_1";
+const header$1 = "_header_38zl3_5";
+const tabButton$1 = "_tabButton_38zl3_16";
+const selectedTab = "_selectedTab_38zl3_19";
+const table$1 = "_table_38zl3_22";
 var styles$d = {
   container: container$4,
   header: header$1,
-  "text-container": "_text-container_127xg_17",
-  "btn-container": "_btn-container_127xg_25",
+  "text-container": "_text-container_38zl3_9",
+  "btn-container": "_btn-container_38zl3_13",
   tabButton: tabButton$1,
   selectedTab,
   table: table$1
@@ -88263,17 +88290,17 @@ const TableTab = ({
     })]
   });
 };
-const mainContainerUpdate = "_mainContainerUpdate_o2f8j_7";
-const wrapper = "_wrapper_o2f8j_23";
-const updateWrapper = "_updateWrapper_o2f8j_29";
-const updateWrapperContent = "_updateWrapperContent_o2f8j_35";
-const searchCommand = "_searchCommand_o2f8j_41";
-const tabButton = "_tabButton_o2f8j_47";
-const tabActive = "_tabActive_o2f8j_53";
+const mainContainerUpdate = "_mainContainerUpdate_19iy1_4";
+const wrapper = "_wrapper_19iy1_12";
+const updateWrapper = "_updateWrapper_19iy1_15";
+const updateWrapperContent = "_updateWrapperContent_19iy1_18";
+const searchCommand = "_searchCommand_19iy1_21";
+const tabButton = "_tabButton_19iy1_24";
+const tabActive = "_tabActive_19iy1_27";
 var styles$c = {
-  "main-container": "_main-container_o2f8j_1",
+  "main-container": "_main-container_19iy1_1",
   mainContainerUpdate,
-  "outputTab-header": "_outputTab-header_o2f8j_15",
+  "outputTab-header": "_outputTab-header_19iy1_8",
   wrapper,
   updateWrapper,
   updateWrapperContent,
@@ -88410,30 +88437,30 @@ const MetricOutput = ({
     })]
   });
 };
-const fieldValueIcon = "_fieldValueIcon_107sf_49";
-const fieldAddBtnIcon = "_fieldAddBtnIcon_107sf_65";
-const group = "_group_107sf_1";
-const tooltipWrapper = "_tooltipWrapper_107sf_89";
-const tooltip = "_tooltip_107sf_89";
-const dropdown = "_dropdown_107sf_113";
-const filterDropdown = "_filterDropdown_107sf_121";
-const filterValues = "_filterValues_107sf_129";
-const columnText = "_columnText_107sf_137";
-const disabled = "_disabled_107sf_145";
-const checkIcon = "_checkIcon_107sf_153";
-const generateButton = "_generateButton_107sf_161";
+const fieldValueIcon = "_fieldValueIcon_14dsc_25";
+const fieldAddBtnIcon = "_fieldAddBtnIcon_14dsc_33";
+const group = "_group_14dsc_1";
+const tooltipWrapper = "_tooltipWrapper_14dsc_45";
+const tooltip = "_tooltip_14dsc_45";
+const dropdown = "_dropdown_14dsc_57";
+const filterDropdown = "_filterDropdown_14dsc_61";
+const filterValues = "_filterValues_14dsc_65";
+const columnText = "_columnText_14dsc_69";
+const disabled = "_disabled_14dsc_73";
+const checkIcon = "_checkIcon_14dsc_77";
+const generateButton = "_generateButton_14dsc_81";
 var styles$b = {
-  "form-container": "_form-container_107sf_1",
-  "field-container": "_field-container_107sf_9",
-  "field-label": "_field-label_107sf_17",
-  "field-wrapper": "_field-wrapper_107sf_25",
-  "field-inner-container": "_field-inner-container_107sf_33",
-  "field-value": "_field-value_107sf_41",
+  "form-container": "_form-container_14dsc_1",
+  "field-container": "_field-container_14dsc_5",
+  "field-label": "_field-label_14dsc_9",
+  "field-wrapper": "_field-wrapper_14dsc_13",
+  "field-inner-container": "_field-inner-container_14dsc_17",
+  "field-value": "_field-value_14dsc_21",
   fieldValueIcon,
-  "field-add-btn": "_field-add-btn_107sf_57",
+  "field-add-btn": "_field-add-btn_14dsc_29",
   fieldAddBtnIcon,
-  "field-value-container": "_field-value-container_107sf_73",
-  "field-prompt": "_field-prompt_107sf_81",
+  "field-value-container": "_field-value-container_14dsc_37",
+  "field-prompt": "_field-prompt_14dsc_41",
   group,
   tooltipWrapper,
   tooltip,
@@ -88444,12 +88471,12 @@ var styles$b = {
   disabled,
   checkIcon,
   generateButton,
-  "saved-container": "_saved-container_107sf_169",
-  "custom-container": "_custom-container_107sf_177",
-  "simple-container": "_simple-container_107sf_185",
-  "filter-dropdown": "_filter-dropdown_107sf_193",
-  "editor-field": "_editor-field_107sf_201",
-  "tab-border": "_tab-border_107sf_209"
+  "saved-container": "_saved-container_14dsc_85",
+  "custom-container": "_custom-container_14dsc_89",
+  "simple-container": "_simple-container_14dsc_93",
+  "filter-dropdown": "_filter-dropdown_14dsc_97",
+  "editor-field": "_editor-field_14dsc_101",
+  "tab-border": "_tab-border_14dsc_105"
 };
 const button$1 = "_button_18a2n_1";
 const menu$1 = "_menu_18a2n_7";
@@ -116541,10 +116568,10 @@ const MetricForm = ({
     })]
   });
 };
-const container$2 = "_container_1v000_1";
-const header = "_header_1v000_9";
-const enableGroupBy = "_enableGroupBy_1v000_15";
-const enableGroupButton = "_enableGroupButton_1v000_21";
+const container$2 = "_container_rofqe_1";
+const header = "_header_rofqe_5";
+const enableGroupBy = "_enableGroupBy_rofqe_8";
+const enableGroupButton = "_enableGroupButton_rofqe_11";
 var styles$9 = {
   container: container$2,
   header,
@@ -121649,8 +121676,8 @@ const ChartImageDownloadButton = ({
     }), text2]
   });
 };
-const metricFilter = "_metricFilter_1xge8_1";
-const customContainer = "_customContainer_1xge8_7";
+const metricFilter = "_metricFilter_k2gef_1";
+const customContainer = "_customContainer_k2gef_4";
 var styles$5 = {
   metricFilter,
   customContainer
@@ -121757,24 +121784,24 @@ const MetricFilterDropDown = ({
     }) : void 0
   });
 };
-const container$1 = "_container_a6fvx_1";
-const popover = "_popover_a6fvx_9";
-const button = "_button_a6fvx_17";
-const buttonOpen = "_buttonOpen_a6fvx_25";
-const menu = "_menu_a6fvx_33";
-const enter = "_enter_a6fvx_41";
-const enterFrom = "_enterFrom_a6fvx_49";
-const enterTo = "_enterTo_a6fvx_57";
-const leave = "_leave_a6fvx_65";
-const leaveFrom = "_leaveFrom_a6fvx_73";
-const leaveTo = "_leaveTo_a6fvx_81";
-const center = "_center_a6fvx_89";
-const top = "_top_a6fvx_97";
-const bottom = "_bottom_a6fvx_105";
-const left = "_left_a6fvx_113";
-const right = "_right_a6fvx_121";
-const chartOptionBtn = "_chartOptionBtn_a6fvx_225";
-const chartpopup = "_chartpopup_a6fvx_233";
+const container$1 = "_container_14i90_1";
+const popover = "_popover_14i90_5";
+const button = "_button_14i90_9";
+const buttonOpen = "_buttonOpen_14i90_13";
+const menu = "_menu_14i90_17";
+const enter = "_enter_14i90_21";
+const enterFrom = "_enterFrom_14i90_25";
+const enterTo = "_enterTo_14i90_29";
+const leave = "_leave_14i90_33";
+const leaveFrom = "_leaveFrom_14i90_37";
+const leaveTo = "_leaveTo_14i90_41";
+const center = "_center_14i90_45";
+const top = "_top_14i90_49";
+const bottom = "_bottom_14i90_53";
+const left = "_left_14i90_57";
+const right = "_right_14i90_61";
+const chartOptionBtn = "_chartOptionBtn_14i90_113";
+const chartpopup = "_chartpopup_14i90_117";
 var styles$4 = {
   container: container$1,
   popover,
@@ -121792,23 +121819,23 @@ var styles$4 = {
   bottom,
   left,
   right,
-  "left-top-end": "_left-top-end_a6fvx_129",
-  "right-top-end": "_right-top-end_a6fvx_137",
-  "left-bottom-end": "_left-bottom-end_a6fvx_145",
-  "right-bottom-end": "_right-bottom-end_a6fvx_153",
-  "top-left": "_top-left_a6fvx_161",
-  "top-right": "_top-right_a6fvx_169",
-  "bottom-left": "_bottom-left_a6fvx_177",
-  "bottom-right": "_bottom-right_a6fvx_185",
-  "left-top": "_left-top_a6fvx_129",
-  "left-bottom": "_left-bottom_a6fvx_145",
-  "right-top": "_right-top_a6fvx_137",
-  "right-bottom": "_right-bottom_a6fvx_153",
+  "left-top-end": "_left-top-end_14i90_65",
+  "right-top-end": "_right-top-end_14i90_69",
+  "left-bottom-end": "_left-bottom-end_14i90_73",
+  "right-bottom-end": "_right-bottom-end_14i90_77",
+  "top-left": "_top-left_14i90_81",
+  "top-right": "_top-right_14i90_85",
+  "bottom-left": "_bottom-left_14i90_89",
+  "bottom-right": "_bottom-right_14i90_93",
+  "left-top": "_left-top_14i90_65",
+  "left-bottom": "_left-bottom_14i90_73",
+  "right-top": "_right-top_14i90_69",
+  "right-bottom": "_right-bottom_14i90_77",
   chartOptionBtn,
   chartpopup
 };
-const fullscreen = "_fullscreen_19jec_1";
-const loading = "_loading_19jec_9";
+const fullscreen = "_fullscreen_1gpy3_1";
+const loading = "_loading_1gpy3_5";
 var styles$3 = {
   fullscreen,
   loading
@@ -122069,8 +122096,8 @@ const asEmail = {
   }
 };
 var styles$2 = {
-  "dbc-container": "_dbc-container_nmp4f_1",
-  "active-dimension": "_active-dimension_nmp4f_9"
+  "dbc-container": "_dbc-container_1dw7c_1",
+  "active-dimension": "_active-dimension_1dw7c_5"
 };
 const DrillBreadCrumb = ({
   dimensions,