@databrainhq/plugin 0.8.19 → 0.8.20

package/dist/components/InfoTooltip/index.d.ts

@@ -2,6 +2,7 @@ import React, { PropsWithChildren } from 'react';
 declare type TooltipProps = PropsWithChildren & {
     content: JSX.Element;
     className?: string;
+    position?: 'left' | 'right' | 'top' | 'bottom' | 'left-bottom-end' | 'right-bottom-end' | 'left-top-end' | 'right-top-end' | 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top' | 'center';
 };
 export declare const Tooltip: React.FC<TooltipProps>;
 export declare const InfoTooltip: React.FC<Omit<TooltipProps, 'content'> & {

package/dist/index.es.js

@@ -80454,7 +80454,14 @@ const FunnelChart = ({
   const option2 = {
     tooltip: {
       trigger: "item",
-      formatter: "{b} : {c}",
+      formatter: customSettings.showConversionRate ? (context) => {
+        var _a2, _b2;
+        let percent = 100;
+        if (context.dataIndex > 0) {
+          percent = (((_a2 = funnelData[context.dataIndex]) == null ? void 0 : _a2.value) || 0) / (((_b2 = funnelData[context.dataIndex - 1]) == null ? void 0 : _b2.value) || 1) * 100;
+        }
+        return `${context.name}: ${percent.toFixed(0)}%`;
+      } : customSettings.showLabelValues ? "{b}: {c}" : customSettings.labelFormat || "{b}",
       backgroundColor: "black",
       textStyle: {
         color: "white"
@@ -80491,12 +80498,19 @@ const FunnelChart = ({
       max: 100,
       minSize: "0%",
       maxSize: "100%",
-      sort: "descending",
+      sort: "none",
       gap: 3,
       label: {
         show: labelSettings.show,
         position: labelSettings.position,
-        formatter: customSettings.showLabelValues ? "{b} : {c}" : "{b}"
+        formatter: customSettings.showConversionRate ? (context) => {
+          var _a2, _b2;
+          let percent = 100;
+          if (context.dataIndex > 0) {
+            percent = (((_a2 = funnelData[context.dataIndex]) == null ? void 0 : _a2.value) || 0) / (((_b2 = funnelData[context.dataIndex - 1]) == null ? void 0 : _b2.value) || 1) * 100;
+          }
+          return `${context.name}: ${percent.toFixed(0)}%`;
+        } : customSettings.showLabelValues ? "{b}: {c}" : customSettings.labelFormat || "{b}"
       },
       labelLine: {
         length: 10,
@@ -86139,10 +86153,10 @@ const leave$1 = "_leave_1qflp_65";
 const leaveFrom$1 = "_leaveFrom_1qflp_73";
 const leaveTo$1 = "_leaveTo_1qflp_81";
 const center$1 = "_center_1qflp_89";
-const top$1 = "_top_1qflp_97";
-const bottom$2 = "_bottom_1qflp_105";
-const left$1 = "_left_1qflp_113";
-const right$1 = "_right_1qflp_121";
+const top$2 = "_top_1qflp_97";
+const bottom$3 = "_bottom_1qflp_105";
+const left$2 = "_left_1qflp_113";
+const right$2 = "_right_1qflp_121";
 var styles$o = {
   container: container$a,
   popover: popover$1,
@@ -86156,10 +86170,10 @@ var styles$o = {
   leaveFrom: leaveFrom$1,
   leaveTo: leaveTo$1,
   center: center$1,
-  top: top$1,
-  bottom: bottom$2,
-  left: left$1,
-  right: right$1,
+  top: top$2,
+  bottom: bottom$3,
+  left: left$2,
+  right: right$2,
   "left-top-end": "_left-top-end_1qflp_129",
   "right-top-end": "_right-top-end_1qflp_137",
   "left-bottom-end": "_left-bottom-end_1qflp_145",
@@ -86525,21 +86539,42 @@ const GlobalFilters = ({
     })
   });
 };
-const container$8 = "_container_1sd6f_1";
-const tooltip$1 = "_tooltip_1sd6f_7";
+const container$8 = "_container_nbkwy_1";
+const tooltip$1 = "_tooltip_nbkwy_9";
+const top$1 = "_top_nbkwy_25";
+const bottom$2 = "_bottom_nbkwy_33";
+const left$1 = "_left_nbkwy_41";
+const right$1 = "_right_nbkwy_49";
 var styles$m = {
   container: container$8,
-  tooltip: tooltip$1
+  tooltip: tooltip$1,
+  top: top$1,
+  bottom: bottom$2,
+  left: left$1,
+  right: right$1,
+  "left-top-end": "_left-top-end_nbkwy_57",
+  "right-top-end": "_right-top-end_nbkwy_65",
+  "left-bottom-end": "_left-bottom-end_nbkwy_73",
+  "right-bottom-end": "_right-bottom-end_nbkwy_81",
+  "top-left": "_top-left_nbkwy_89",
+  "top-right": "_top-right_nbkwy_97",
+  "bottom-left": "_bottom-left_nbkwy_105",
+  "bottom-right": "_bottom-right_nbkwy_113",
+  "left-top": "_left-top_nbkwy_57",
+  "left-bottom": "_left-bottom_nbkwy_73",
+  "right-top": "_right-top_nbkwy_65",
+  "right-bottom": "_right-bottom_nbkwy_81"
 };
 const Tooltip = ({
   children: children2,
   content: content2,
-  className = ""
+  className = "",
+  position: position2 = "bottom"
 }) => {
   return /* @__PURE__ */ jsxs("span", {
     className: `${styles$m.container} ${className}`,
     children: [content2, /* @__PURE__ */ jsx("span", {
-      className: styles$m.tooltip,
+      className: `${styles$m.tooltip} ${styles$m[position2]}`,
       children: children2
     })]
   });
@@ -86547,7 +86582,8 @@ const Tooltip = ({
 const InfoTooltip = ({
   children: children2,
   className,
-  iconClass
+  iconClass,
+  position: position2
 }) => {
   return /* @__PURE__ */ jsx(Tooltip, {
     className,
@@ -86555,6 +86591,7 @@ const InfoTooltip = ({
       name: "info-icon",
       className: iconClass
     }),
+    position: position2,
     children: children2
   });
 };
@@ -86679,24 +86716,25 @@ const Dataset = ({
     })]
   });
 };
-const container$6 = "_container_j5bye_1";
-const header$2 = "_header_j5bye_7";
-const tab$2 = "_tab_j5bye_13";
-const tabText$1 = "_tabText_j5bye_19";
-const tabHeading = "_tabHeading_j5bye_25";
-const form = "_form_j5bye_31";
-const inputWrapper = "_inputWrapper_j5bye_37";
-const input$1 = "_input_j5bye_37";
-const selectWrapper = "_selectWrapper_j5bye_49";
-const select = "_select_j5bye_49";
-const label$1 = "_label_j5bye_61";
-const series = "_series_j5bye_67";
-const legendWrapper = "_legendWrapper_j5bye_73";
-const seriesWrapper = "_seriesWrapper_j5bye_79";
-const valueLabelWrapper = "_valueLabelWrapper_j5bye_85";
-const singleCheckBox = "_singleCheckBox_j5bye_91";
-const seriesCheck = "_seriesCheck_j5bye_97";
-const seriesCheckContainer = "_seriesCheckContainer_j5bye_103";
+const container$6 = "_container_1pfol_1";
+const header$2 = "_header_1pfol_7";
+const tab$2 = "_tab_1pfol_13";
+const tabText$1 = "_tabText_1pfol_19";
+const tabHeading = "_tabHeading_1pfol_25";
+const form = "_form_1pfol_31";
+const inputWrapper = "_inputWrapper_1pfol_37";
+const input$1 = "_input_1pfol_37";
+const selectWrapper = "_selectWrapper_1pfol_49";
+const select = "_select_1pfol_49";
+const label$1 = "_label_1pfol_61";
+const labelFormatTooltip = "_labelFormatTooltip_1pfol_67";
+const series = "_series_1pfol_73";
+const legendWrapper = "_legendWrapper_1pfol_79";
+const seriesWrapper = "_seriesWrapper_1pfol_85";
+const valueLabelWrapper = "_valueLabelWrapper_1pfol_91";
+const singleCheckBox = "_singleCheckBox_1pfol_97";
+const seriesCheck = "_seriesCheck_1pfol_103";
+const seriesCheckContainer = "_seriesCheckContainer_1pfol_109";
 var styles$i = {
   container: container$6,
   header: header$2,
@@ -86709,6 +86747,7 @@ var styles$i = {
   selectWrapper,
   select,
   label: label$1,
+  labelFormatTooltip,
   series,
   legendWrapper,
   seriesWrapper,
@@ -87138,14 +87177,41 @@ const ChartConfigure = ({
                   }))
                 })
               })]
-            }), chartType2 === "funnel" && /* @__PURE__ */ jsx(InputField, {
-              type: "checkbox",
-              label: "Show labels with values",
-              checked: customSettings.showLabelValues,
-              onChange: (e2) => setCustomSettings((settings2) => ({
-                ...settings2,
-                showLabelValues: e2.target.checked
-              }))
+            }), chartType2 === "funnel" && /* @__PURE__ */ jsxs(Fragment, {
+              children: [/* @__PURE__ */ jsx(InputField, {
+                type: "checkbox",
+                label: "Show labels with values",
+                checked: customSettings.showLabelValues,
+                onChange: (e2) => setCustomSettings((settings2) => ({
+                  ...settings2,
+                  showLabelValues: e2.target.checked
+                }))
+              }), /* @__PURE__ */ jsx(InputField, {
+                type: "checkbox",
+                label: "Show Conversion Rate",
+                checked: customSettings.showConversionRate,
+                onChange: (e2) => setCustomSettings((settings2) => ({
+                  ...settings2,
+                  showConversionRate: e2.target.checked
+                }))
+              }), /* @__PURE__ */ jsx(InputField, {
+                type: "text",
+                label: "Label Format",
+                icon: /* @__PURE__ */ jsx("span", {
+                  className: styles$i.labelFormatTooltip,
+                  children: /* @__PURE__ */ jsx(InfoTooltip, {
+                    position: "left-top-end",
+                    children: `Please use {b} to show the label name, {c} to show the label value. 
+ Note: Only works if the above options are not selected.`
+                  })
+                }),
+                placeholder: "{b}",
+                value: customSettings.labelFormat,
+                onChange: (e2) => setCustomSettings((settings2) => ({
+                  ...settings2,
+                  labelFormat: e2.target.value
+                }))
+              })]
             }), chartType2 !== "pie" && chartType2 !== "doughnut" && chartType2 !== "funnel" && chartType2 !== "gauge" && chartType2 !== "sankey" && chartType2 !== "singleValue" && chartType2 !== "table" && /* @__PURE__ */ jsxs(Fragment, {
               children: [/* @__PURE__ */ jsxs("div", {
                 className: styles$i.seriesWrapper,