@databrainhq/plugin 0.7.18 → 0.7.20

package/dist/index.es.js

@@ -2554,6 +2554,7 @@ var styles$C = {
   truncate,
   border,
   "p-2": "_p-2_1ddns_1",
+  "p-1": "_p-1_1ddns_1",
   "text-center": "_text-center_1ddns_1",
   "text-sm": "_text-sm_1ddns_1",
   "text-xs": "_text-xs_1ddns_1",
@@ -82408,6 +82409,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", {
@@ -82443,10 +82455,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"]
@@ -84977,6 +84986,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", {
@@ -85092,6 +85112,7 @@ const MetricForm = ({
                 type: "button",
                 variant: "primary",
                 size: "small",
+                style: primaryButtonStyle,
                 className: styles$5.disabled,
                 isDisabled: !metricAggregate.value || !metricColumn.value,
                 onClick: () => {
@@ -85183,6 +85204,7 @@ const MetricForm = ({
                 type: "button",
                 variant: "primary",
                 size: "small",
+                style: primaryButtonStyle,
                 className: styles$5.disabled,
                 isDisabled: !column2.value,
                 onClick: () => {
@@ -85280,6 +85302,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}'` : ""}`}`]);
@@ -85336,6 +85359,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}"`})`);
@@ -85386,10 +85410,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("");
@@ -85802,6 +85823,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",
@@ -85809,10 +85841,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"
@@ -91462,10 +91491,49 @@ const MetricCard = ({
       updateGroupData(dataDb, [selectedGroupBy[0]], selectedGroupBy, setGroupedData);
     }
   };
-  const onChangeFilterValue = (name, value) => setRlsConditions((prev) => prev.map((rls) => rls.name === name ? {
-    ...rls,
-    value
-  } : rls));
+  const onChangeFilterValue = (name, value, customValue) => {
+    if (customValue) {
+      setRlsConditions((prev) => prev.map((rls) => rls.name === name ? {
+        ...rls,
+        value,
+        options: rls.options.map((option2) => option2.name === "Custom" ? {
+          ...option2,
+          ...customValue
+        } : option2)
+      } : rls));
+    } else {
+      setRlsConditions((prev) => prev.map((rls) => rls.name === name ? {
+        ...rls,
+        value
+      } : 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,
@@ -91475,35 +91543,23 @@ 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", {
           className: styles.features,
-          children: [!!rlsConditions.length && /* @__PURE__ */ jsx("div", {
+          children: [!!rlsConditions.length && (rlsConditions[0].datatype !== "date" ? /* @__PURE__ */ jsx("div", {
             className: styles.metricFilter,
             children: /* @__PURE__ */ jsx(FloatingDropDown, {
               label: rlsConditions[0].name,
@@ -91517,7 +91573,47 @@ const MetricCard = ({
               })),
               onChange: (option2) => onChangeFilterValue(rlsConditions[0].name, option2.value)
             })
-          }), /* @__PURE__ */ jsxs(PopoverMenu, {
+          }) : /* @__PURE__ */ jsx("div", {
+            className: styles.metricFilter,
+            children: /* @__PURE__ */ jsx(FloatingDropDown, {
+              label: rlsConditions[0].name,
+              selectedOption: {
+                value: rlsConditions[0].value.name || rlsConditions[0].options[0].name,
+                label: rlsConditions[0].value.name || rlsConditions[0].options[0].name
+              },
+              options: rlsConditions[0].options.map((o2) => ({
+                value: o2.name,
+                label: o2.name
+              })),
+              onChange: (option2) => onChangeFilterValue(rlsConditions[0].name, option2.value),
+              children: rlsConditions[0].value === "Custom" ? /* @__PURE__ */ jsxs("div", {
+                className: "p-1",
+                children: [/* @__PURE__ */ jsx(InputField, {
+                  label: "From Date",
+                  type: "date",
+                  onChange: ({
+                    target: {
+                      value
+                    }
+                  }) => {
+                    onChangeFilterValue(rlsConditions[0].name, "Custom", {
+                      from: new Date(Date.parse(value))
+                    });
+                  }
+                }), /* @__PURE__ */ jsx(InputField, {
+                  label: "To Date",
+                  type: "date",
+                  onChange: ({
+                    target: {
+                      value
+                    }
+                  }) => onChangeFilterValue(rlsConditions[0].name, "Custom", {
+                    to: new Date(Date.parse(value))
+                  })
+                })]
+              }) : null
+            })
+          })), /* @__PURE__ */ jsxs(PopoverMenu, {
             buttonClass: styles.popup,
             button: /* @__PURE__ */ jsx(Icons, {
               name: "more-icon",
@@ -91733,10 +91829,49 @@ const SingleValueCard = ({
   const chartData = [{
     value: singleValueData2[0]
   }];
-  const onChangeFilterValue = (name, value) => setRlsConditions((prev) => prev.map((rls) => rls.name === name ? {
-    ...rls,
-    value
-  } : rls));
+  const onChangeFilterValue = (name, value, customValue) => {
+    if (customValue) {
+      setRlsConditions((prev) => prev.map((rls) => rls.name === name ? {
+        ...rls,
+        value,
+        options: rls.options.map((option2) => option2.name === "Custom" ? {
+          ...option2,
+          ...customValue
+        } : option2)
+      } : rls));
+    } else {
+      setRlsConditions((prev) => prev.map((rls) => rls.name === name ? {
+        ...rls,
+        value
+      } : 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,
@@ -91746,35 +91881,23 @@ 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", {
           className: styles.features,
-          children: !!(rlsConditions == null ? void 0 : rlsConditions.length) && /* @__PURE__ */ jsx("div", {
+          children: !!rlsConditions.length && (rlsConditions[0].datatype !== "date" ? /* @__PURE__ */ jsx("div", {
             className: styles.metricFilter,
             children: /* @__PURE__ */ jsx(FloatingDropDown, {
               label: rlsConditions[0].name,
@@ -91788,7 +91911,47 @@ const SingleValueCard = ({
               })),
               onChange: (option2) => onChangeFilterValue(rlsConditions[0].name, option2.value)
             })
-          })
+          }) : /* @__PURE__ */ jsx("div", {
+            className: styles.metricFilter,
+            children: /* @__PURE__ */ jsx(FloatingDropDown, {
+              label: rlsConditions[0].name,
+              selectedOption: {
+                value: rlsConditions[0].value.name || rlsConditions[0].options[0].name,
+                label: rlsConditions[0].value.name || rlsConditions[0].options[0].name
+              },
+              options: rlsConditions[0].options.map((o2) => ({
+                value: o2.name,
+                label: o2.name
+              })),
+              onChange: (option2) => onChangeFilterValue(rlsConditions[0].name, option2.value),
+              children: rlsConditions[0].value === "Custom" ? /* @__PURE__ */ jsxs("div", {
+                className: "p-1",
+                children: [/* @__PURE__ */ jsx(InputField, {
+                  label: "From Date",
+                  type: "date",
+                  onChange: ({
+                    target: {
+                      value
+                    }
+                  }) => {
+                    onChangeFilterValue(rlsConditions[0].name, "Custom", {
+                      from: new Date(Date.parse(value))
+                    });
+                  }
+                }), /* @__PURE__ */ jsx(InputField, {
+                  label: "To Date",
+                  type: "date",
+                  onChange: ({
+                    target: {
+                      value
+                    }
+                  }) => onChangeFilterValue(rlsConditions[0].name, "Custom", {
+                    to: new Date(Date.parse(value))
+                  })
+                })]
+              }) : null
+            })
+          }))
         })]
       }), chartType2 && /* @__PURE__ */ jsx("div", {
         className: `${styles.metricData} ${styles.singleValueData}`,
@@ -92030,13 +92193,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"],