@quillsql/react 2.16.18 → 2.16.20

package/dist/index.cjs

@@ -19976,6 +19976,7 @@ async function cleanDashboardItem({
     pivotRows: pivotTable ? pivotTable.rows : void 0,
     pivotColumns: pivotTable ? pivotTable.columns : void 0,
     compareRows: item.compareRows,
+    showLegend: item.showLegend ?? false,
     columns: processedColumns.map((column) => {
       return {
         field: column.field,
@@ -20242,6 +20243,7 @@ function createInitialFormData(columns) {
     ],
     xAxisLabel: "",
     chartType: firstNumberColumn ? "line" : "table",
+    showLegend: false,
     pivot: null,
     template: true,
     referenceLines: []
@@ -20329,7 +20331,8 @@ function extractAllReportValuesFromQuillInternalReport(reportInternal) {
     pivotRows: reportInternal.pivotRows,
     pivotColumns: reportInternal.pivotColumns,
     pivotRowCount: reportInternal.pivotRowCount,
-    filterMap: reportInternal.filterMap
+    filterMap: reportInternal.filterMap,
+    showLegend: reportInternal.showLegend
   };
 }
 async function fetchReportRows({
@@ -25507,7 +25510,7 @@ var BarList = import_react4.default.forwardRef((props, ref) => {
 var BarList_default = BarList;
 
 // src/components/Chart/PieChart.tsx
-var import_react5 = __toESM(require("react"), 1);
+var import_react13 = __toESM(require("react"), 1);
 var import_recharts = require("recharts");
 
 // src/utils/color.ts
@@ -25867,529 +25870,62 @@ function HSLtoRGB(h, s, l) {
 // src/components/Chart/PieChart.tsx
 init_util();
 init_valueFormatter();
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var defaultValueFormatter = (value) => (value * 1).toFixed(1) + "%";
-var parseData2 = (data, colors, categoryKey, valueKey) => {
-  const maxItems = 20;
-  const slicedData = deepCopy(data).slice(0, maxItems);
-  const totalValue = slicedData.reduce(
-    (acc, dataPoint) => (
-      // Big(acc)
-      //   .add(Big(Number(dataPoint[valueKey]) ?? 0))
-      //   .toNumber(),
-      acc + parseFloat(dataPoint[valueKey] ?? "0")
-    ),
-    0
-  );
-  slicedData.forEach((dataPoint) => {
-    const rawValue = parseFloat(dataPoint[valueKey] ?? "0");
-    dataPoint[valueKey] = totalValue ? rawValue * 100 / totalValue : data.length > maxItems ? 100 / (maxItems + 1) : 100 / slicedData.length;
-    dataPoint[`raw_${valueKey}`] = parseFloat(rawValue.toFixed(2));
-  });
-  const parsedData = slicedData.map((dataPoint, idx) => {
-    const baseColor = colors.length > 0 ? idx < colors.length ? colors[idx] : colors[colors.length - 1] : "#808080";
-    return {
-      ...dataPoint,
-      color: baseColor,
-      fill: baseColor
-    };
-  });
-  if (data.length > maxItems) {
-    const otherData = data.slice(maxItems);
-    const otherSum = otherData.reduce(
-      (acc, dataPoint) => (
-        // Big(acc)
-        //   .add(Big(Number(dataPoint[valueKey])) ?? 0)
-        //   .toNumber(),
-        acc + parseFloat(dataPoint[valueKey] ?? "0")
-      ),
-      0
-    );
-    const otherColor = colors.length > 0 ? colors[colors.length - 1] : "#808080";
-    const normalizedOtherSum = totalValue ? otherSum * 100 / totalValue : 100 / (maxItems + 1);
-    parsedData.push({
-      [categoryKey]: "Other",
-      [valueKey]: normalizedOtherSum,
-      [`raw_${valueKey}`]: parseFloat(otherSum.toFixed(2)),
-      color: otherColor,
-      fill: otherColor
-    });
-  }
-  return parsedData;
-};
-var ChartTooltipFrame = ({
-  children,
-  theme
-}) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-  "div",
-  {
-    style: {
-      borderStyle: "solid",
-      borderColor: theme?.borderColor || "#E5E7EB",
-      borderWidth: 1,
-      background: theme?.backgroundColor || "#ffffff",
-      fontSize: theme?.fontSize || "14px",
-      borderRadius: "6px",
-      boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"
-    },
-    children
-  }
-);
-var ChartTooltipRow = ({
-  value,
-  rawValue,
-  valueKey,
-  valueKeyLabel,
-  name: name2,
-  // color,
-  theme
-}) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-  "div",
-  {
-    style: {
-      display: "flex",
-      flexDirection: "column",
-      gap: 2,
-      minWidth: 150,
-      position: "relative"
-    },
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        "div",
-        {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            width: "100%"
-            // paddingLeft: '24px',
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-            "span",
-            {
-              style: {
-                flex: 1,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between"
-              },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                  "p",
-                  {
-                    style: {
-                      marginTop: 0,
-                      marginBottom: 0,
-                      marginRight: "24px",
-                      fontFamily: theme?.fontFamily,
-                      color: theme?.primaryTextColor,
-                      fontSize: theme?.fontSizeSmall || "14px",
-                      fontWeight: theme?.fontWeightMedium || "500",
-                      minWidth: "60px"
-                    },
-                    children: name2
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                  "p",
-                  {
-                    style: {
-                      marginTop: 0,
-                      marginBottom: 0,
-                      fontFamily: theme?.fontFamily,
-                      color: theme?.primaryTextColor,
-                      fontSize: theme?.fontSizeSmall || "14px",
-                      fontWeight: theme?.fontWeightMedium || "500",
-                      minWidth: "40px",
-                      textAlign: "right"
-                    },
-                    children: value
-                  }
-                )
-              ]
-            }
-          )
-        }
-      ),
-      (rawValue || valueKey) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        "div",
-        {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            width: "100%",
-            // paddingLeft: '24px',
-            justifyContent: "space-between"
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-            "span",
-            {
-              style: {
-                flex: 1,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between"
-              },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                  "p",
-                  {
-                    style: {
-                      marginTop: 0,
-                      marginBottom: 0,
-                      marginRight: "24px",
-                      fontFamily: theme?.fontFamily,
-                      color: theme?.primaryTextColor,
-                      fontSize: theme?.fontSizeSmall || "14px",
-                      fontWeight: theme?.fontWeightMedium || "500",
-                      minWidth: "60px"
-                    },
-                    children: valueKeyLabel || valueKey
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                  "p",
-                  {
-                    style: {
-                      marginTop: 0,
-                      marginBottom: 0,
-                      fontFamily: theme?.fontFamily,
-                      color: theme?.primaryTextColor,
-                      fontSize: theme?.fontSizeSmall || "14px",
-                      fontWeight: theme?.fontWeightMedium || "500",
-                      minWidth: "40px",
-                      textAlign: "right"
-                    },
-                    children: rawValue
-                  }
-                )
-              ]
-            }
-          )
-        }
-      )
-    ]
-  }
-);
-var DonutChartTooltip = ({
-  active,
-  payload,
-  valueFormatter: valueFormatter2,
-  theme,
-  yAxisFields
-}) => {
-  if (active && payload[0]) {
-    const payloadRow = payload[0];
-    const rawValue = payloadRow.payload[`raw_${payloadRow.dataKey}`];
-    const field = yAxisFields?.find((f) => f.field === payloadRow.dataKey);
-    const formattedRawValue = quillFormat({
-      value: rawValue?.toString() || "",
-      format: field?.format || "string"
-    });
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChartTooltipFrame, { theme, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      "div",
-      {
-        style: {
-          paddingLeft: "1rem",
-          paddingRight: "1rem",
-          paddingTop: "8px",
-          paddingBottom: "8px"
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          ChartTooltipRow,
-          {
-            value: valueFormatter2(payloadRow.value),
-            rawValue: rawValue ? formattedRawValue : void 0,
-            valueKey: payloadRow.dataKey,
-            valueKeyLabel: field?.label,
-            name: payloadRow.name,
-            color: payloadRow.payload.color,
-            theme
-          }
-        )
-      }
-    ) });
-  }
-  return null;
-};
-var renderCustomizedLabel = ({
-  cx,
-  cy,
-  name: name2,
-  midAngle,
-  outerRadius,
-  percent,
-  tooltipPayload,
-  theme,
-  yAxisFields
-}) => {
-  const RADIAN = Math.PI / 180;
-  const radius = outerRadius + 25;
-  const x = cx + radius * Math.cos(-midAngle * RADIAN);
-  const y = cy + radius * Math.sin(-midAngle * RADIAN);
-  const category = tooltipPayload?.[0]?.dataKey;
-  const rawValue = tooltipPayload?.[0]?.payload?.[`raw_${category}`];
-  const displayValue = rawValue ? `${rawValue}` : `${(percent * 100).toFixed(0)}%`;
-  const isRightSide = x > cx;
-  const isTopSide = y < cy;
-  const field = yAxisFields?.find(
-    (f) => f.field === tooltipPayload?.[0]?.dataKey
-  );
-  const formattedDisplayValue = quillFormat({
-    value: displayValue?.toString() || "",
-    format: field?.format || "string"
-  });
-  const padding = 10;
-  let textX;
-  if (isRightSide) {
-    textX = x + padding;
-  } else {
-    const longestText = name2.length > displayValue.length ? name2 : displayValue;
-    const estimatedTextWidth = longestText.length * 7;
-    textX = x - padding - estimatedTextWidth;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("g", { children: isTopSide ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      "text",
-      {
-        x: textX,
-        y: y - 8,
-        fill: theme?.secondaryTextColor,
-        textAnchor: "start",
-        dominantBaseline: "central",
-        fontSize: theme?.fontSize || "14px",
-        fontWeight: "500",
-        fontFamily: theme?.fontFamily,
-        children: name2
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      "text",
-      {
-        x: textX,
-        y: y + 8,
-        fill: theme?.secondaryTextColor,
-        textAnchor: "start",
-        dominantBaseline: "central",
-        fontSize: theme?.fontSize || "14px",
-        fontWeight: "400",
-        fontFamily: theme?.fontFamily,
-        children: formattedDisplayValue
-      }
-    )
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      "text",
-      {
-        x: textX,
-        y: y + 8,
-        fill: theme?.secondaryTextColor,
-        textAnchor: "start",
-        dominantBaseline: "central",
-        fontSize: theme?.fontSize || "14px",
-        fontWeight: "400",
-        fontFamily: theme?.fontFamily,
-        children: formattedDisplayValue
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      "text",
-      {
-        x: textX,
-        y: y - 8,
-        fill: theme?.secondaryTextColor,
-        textAnchor: "start",
-        dominantBaseline: "central",
-        fontSize: theme?.fontSize || "14px",
-        fontWeight: "500",
-        fontFamily: theme?.fontFamily,
-        children: name2
-      }
-    )
-  ] }) });
-};
-var PieChartWrapper = import_react5.default.forwardRef(
-  (props, ref) => {
-    const {
-      category = "pct_of_the_total",
-      index = "status",
-      data,
-      colors = [],
-      colorMap = {},
-      variant = "donut",
-      valueFormatter: valueFormatter2 = defaultValueFormatter,
-      className,
-      containerStyle,
-      theme,
-      onClickChartElement,
-      yAxisFields,
-      showLegend = false,
-      ...other
-    } = props;
-    const isDonut = variant == "donut";
-    if (!data || data.length === 0) {
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        "div",
-        {
-          style: {
-            display: "flex",
-            flex: "1 0 auto",
-            // height: '100%',
-            margin: "auto",
-            justifyContent: "center",
-            alignItems: "center",
-            fontSize: 13,
-            fontFamily: theme?.fontFamily,
-            color: theme.secondaryTextColor,
-            ...containerStyle
-          },
-          className,
-          children: "No results"
-        }
-      );
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      "div",
-      {
-        ref,
-        className,
-        style: {
-          width: "100%",
-          display: "flex",
-          flexDirection: "row",
-          alignItems: "center",
-          justifyContent: "center",
-          boxSizing: "content-box",
-          ...containerStyle
-        },
-        ...other,
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          import_recharts.ResponsiveContainer,
-          {
-            width: "100%",
-            height: "100%",
-            minWidth: 0,
-            minHeight: 0,
-            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_recharts.PieChart, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                import_recharts.Pie,
-                {
-                  data: parseData2(
-                    data,
-                    (() => {
-                      const colorArray = colorMap[category] && colorMap[category]["primary"] && colorMap[category]["primary"] || colors;
-                      const containsCssVars = colorArray.some(
-                        (color2) => typeof color2 === "string" && color2.includes("var(")
-                      );
-                      if (containsCssVars) {
-                        return Array.from({ length: data.length }).map(
-                          (_, idx) => colorArray[idx % colorArray.length] ?? colorArray[colorArray.length - 1] ?? "#808080"
-                        );
-                      }
-                      return colorArray.length >= data.length ? colorArray.slice(0, data.length) : generateArrayFromColor(colorArray, data.length);
-                    })(),
-                    index,
-                    category
-                  ),
-                  cx: "50%",
-                  cy: "50%",
-                  startAngle: 90,
-                  endAngle: -270,
-                  innerRadius: isDonut ? showLegend ? "50%" : "70%" : "0%",
-                  outerRadius: showLegend ? "70%" : "100%",
-                  paddingAngle: 0,
-                  dataKey: category,
-                  nameKey: index,
-                  isAnimationActive: true,
-                  onClick: onClickChartElement,
-                  labelLine: false,
-                  label: showLegend ? (props2) => renderCustomizedLabel({ ...props2, theme, yAxisFields }) : void 0
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                import_recharts.Tooltip,
-                {
-                  wrapperStyle: {
-                    outline: "none"
-                  },
-                  content: ({ active, payload }) => {
-                    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                      DonutChartTooltip,
-                      {
-                        active,
-                        payload,
-                        valueFormatter: valueFormatter2,
-                        theme,
-                        yAxisFields
-                      }
-                    );
-                  }
-                }
-              )
-            ] })
-          }
-        )
-      }
-    );
-  }
-);
-var PieChart_default = PieChartWrapper;
 
-// src/components/QuillTable.tsx
-var import_react13 = require("react");
-init_valueFormatter();
+// src/components/Chart/CustomLegend.tsx
+var import_react12 = require("react");
 
 // src/components/UiComponents.tsx
-var import_react12 = require("react");
+var import_react11 = require("react");
 
 // src/assets/ArrowDownHeadIcon.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 
 // src/assets/ArrowDownRightIcon.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 
 // src/assets/ArrowDownIcon.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 
 // src/assets/ArrowRightIcon.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 
 // src/assets/ArrowRightHeadIcon.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 
 // src/assets/ArrowLeftHeadIcon.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 
 // src/assets/DoubleArrowLeftHeadIcon.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 
 // src/assets/DoubleArrowRightHeadIcon.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 
 // src/assets/ArrowUpHeadIcon.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 
 // src/assets/ArrowUpIcon.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 
 // src/assets/ArrowUpRightIcon.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 
 // src/assets/CalendarIcon.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 
 // src/assets/CalendarNormalIcon.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 
 // src/assets/ExclamationFilledIcon.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var ExclamationFilledIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var ExclamationFilledIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
   "svg",
   {
     ...props,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "currentColor",
-    children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "path",
       {
         fillRule: "evenodd",
@@ -26402,20 +25938,20 @@ var ExclamationFilledIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_run
 var ExclamationFilledIcon_default = ExclamationFilledIcon;
 
 // src/assets/SearchIcon.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 
 // src/assets/XCircleIcon.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 
 // src/assets/RefreshIcon.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 
 // src/assets/FilterIcon.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 
 // src/assets/MoreIcon.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var MoreIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var MoreIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
   "svg",
   {
     width: "24",
@@ -26425,20 +25961,20 @@ var MoreIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("circle", { cx: "5", cy: "12", r: "2", fill: "currentColor" }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("circle", { cx: "12", cy: "12", r: "2", fill: "currentColor" }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("circle", { cx: "19", cy: "12", r: "2", fill: "currentColor" })
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("circle", { cx: "5", cy: "12", r: "2", fill: "currentColor" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("circle", { cx: "12", cy: "12", r: "2", fill: "currentColor" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("circle", { cx: "19", cy: "12", r: "2", fill: "currentColor" })
     ]
   }
 );
 var MoreIcon_default = MoreIcon;
 
 // src/assets/UpLeftArrowsIcon.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 
 // src/assets/XIcon.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var XIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var XIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
   "svg",
   {
     ...props,
@@ -26446,7 +25982,7 @@ var XIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     viewBox: "0 0 24 24",
     height: "20",
     width: "20",
-    children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "path",
       {
         fillRule: "evenodd",
@@ -26459,15 +25995,15 @@ var XIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
 var XIcon_default = XIcon;
 
 // src/components/Chart/ChartSkeleton.tsx
-var import_react6 = require("react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var QuillLoadingSkeleton = () => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ChartSkeleton, {});
+var import_react5 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var QuillLoadingSkeleton = () => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ChartSkeleton, {});
 function ChartSkeleton({
   className,
   containerStyle
 }) {
-  const [theme] = (0, import_react6.useContext)(ThemeContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  const [theme] = (0, import_react5.useContext)(ThemeContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "div",
     {
       style: {
@@ -26477,7 +26013,7 @@ function ChartSkeleton({
         ...containerStyle
       },
       className,
-      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         "div",
         {
           style: {
@@ -26487,7 +26023,7 @@ function ChartSkeleton({
             borderRadius: 8,
             overflow: "hidden"
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
             "svg",
             {
               width: "100%",
@@ -26495,7 +26031,7 @@ function ChartSkeleton({
               xmlns: "http://www.w3.org/2000/svg",
               xmlnsXlink: "http://www.w3.org/1999/xlink",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                   "rect",
                   {
                     width: "100%",
@@ -26503,7 +26039,7 @@ function ChartSkeleton({
                     fill: theme?.loadingStateBackgroundColor || "#F9F9FA"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("defs", { fill: theme?.loadingStateBackgroundColor || "#F9F9FA", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("defs", { fill: theme?.loadingStateBackgroundColor || "#F9F9FA", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
                   "linearGradient",
                   {
                     id: "skeletonGradient",
@@ -26513,10 +26049,10 @@ function ChartSkeleton({
                     y2: "0%",
                     gradientUnits: "userSpaceOnUse",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("stop", { offset: "0%", stopColor: "rgba(255,255,255,0)" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("stop", { offset: "50%", stopColor: "#FEFEFE" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("stop", { offset: "100%", stopColor: "rgba(255,255,255,0)" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("stop", { offset: "0%", stopColor: "rgba(255,255,255,0)" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("stop", { offset: "50%", stopColor: "#FEFEFE" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("stop", { offset: "100%", stopColor: "rgba(255,255,255,0)" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                         "animate",
                         {
                           attributeName: "x1",
@@ -26526,7 +26062,7 @@ function ChartSkeleton({
                           repeatCount: "indefinite"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                         "animate",
                         {
                           attributeName: "x2",
@@ -26539,7 +26075,7 @@ function ChartSkeleton({
                     ]
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("rect", { width: "50%", height: "100%", fill: "url(#skeletonGradient)", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("rect", { width: "50%", height: "100%", fill: "url(#skeletonGradient)", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                   "animate",
                   {
                     attributeName: "x",
@@ -26559,12 +26095,12 @@ function ChartSkeleton({
 }
 
 // src/hooks/useInternalState.tsx
-var import_react7 = require("react");
+var import_react6 = require("react");
 
 // src/hooks/useOnClickOutside.tsx
-var import_react8 = require("react");
+var import_react7 = require("react");
 var useOnClickOutside = (ref, handler, listening) => {
-  (0, import_react8.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const listener = (event) => {
       if (!ref.current || ref.current.contains(event.target)) {
         return;
@@ -26605,13 +26141,13 @@ var createsStackingContext = (computedStyle) => {
 var useOnClickOutside_default = useOnClickOutside;
 
 // src/hooks/useOnWindowResize.tsx
-var import_react9 = require("react");
+var import_react8 = require("react");
 
 // src/hooks/useSelectOnKeyDown.tsx
-var import_react10 = require("react");
+var import_react9 = require("react");
 
 // src/hooks/useResponsiveFirstChildWidth.ts
-var import_react11 = require("react");
+var import_react10 = require("react");
 var DEFAULT_MIN_WIDTH = 0;
 var parseNumericValue = (value) => {
   if (!value) {
@@ -26659,7 +26195,7 @@ var calculateFirstChildWidth = (element, options) => {
   const clampedWidth = max2 !== void 0 ? Math.min(Math.max(rawWidth, min2), max2) : Math.max(rawWidth, min2);
   return Math.floor(clampedWidth);
 };
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react11.useLayoutEffect : import_react11.useEffect;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react10.useLayoutEffect : import_react10.useEffect;
 var useResponsiveFirstChildWidth = (containerRef, options = {}) => {
   const {
     gap,
@@ -26667,8 +26203,8 @@ var useResponsiveFirstChildWidth = (containerRef, options = {}) => {
     minWidth = DEFAULT_MIN_WIDTH,
     maxWidth
   } = options;
-  const [width, setWidth] = (0, import_react11.useState)(initialWidth);
-  const previousWidthRef = (0, import_react11.useRef)(initialWidth);
+  const [width, setWidth] = (0, import_react10.useState)(initialWidth);
+  const previousWidthRef = (0, import_react10.useRef)(initialWidth);
   useIsomorphicLayoutEffect(() => {
     const element = containerRef?.current ?? null;
     if (!element || typeof window === "undefined") {
@@ -26764,8 +26300,8 @@ var getScrollableParent = (element) => {
 };
 
 // src/components/UiComponents.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var QuillTextInput = (0, import_react12.forwardRef)(
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var QuillTextInput = (0, import_react11.forwardRef)(
   ({
     id: id2,
     value,
@@ -26775,10 +26311,10 @@ var QuillTextInput = (0, import_react12.forwardRef)(
     onChange,
     disabled
   }, ref) => {
-    const [theme] = (0, import_react12.useContext)(ThemeContext);
+    const [theme] = (0, import_react11.useContext)(ThemeContext);
     const isNumericWidth = typeof width === "number";
     const resolvedWidth = typeof width === "string" ? width : isNumericWidth ? width : "100%";
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
       "label",
       {
         style: {
@@ -26791,7 +26327,7 @@ var QuillTextInput = (0, import_react12.forwardRef)(
           flex: isNumericWidth ? "0 0 auto" : "1 1 auto"
         },
         children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          label && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             "div",
             {
               style: {
@@ -26804,7 +26340,7 @@ var QuillTextInput = (0, import_react12.forwardRef)(
               children: label
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             "input",
             {
               ref,
@@ -26845,13 +26381,13 @@ var MemoizedButton = ({
   tooltipText,
   isLoading
 }) => {
-  const [theme] = (0, import_react12.useContext)(ThemeContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  const [theme] = (0, import_react11.useContext)(ThemeContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     QuillToolTipPortal,
     {
       enabled: !!tooltipText && tooltipText !== "",
       text: tooltipText ?? "",
-      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
         "button",
         {
           className: disabled ? "quill-button-disabled" : "quill-button",
@@ -26877,7 +26413,7 @@ var MemoizedButton = ({
             justifyContent: "center"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("style", { children: `
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("style", { children: `
       .quill-button {
         background-color: ${theme?.primaryButtonColor};
         color: ${theme?.primaryButtonTextColor ?? "white"};
@@ -26891,8 +26427,8 @@ var MemoizedButton = ({
         background-color: ${theme?.hoverPrimaryButtonColor};
         color: ${theme?.hoverPrimaryButtonTextColor ?? "white"};
       }` }),
-            isLoading ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { position: "absolute" }, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LoadingSpinner, {}) }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+            isLoading ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { position: "absolute" }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(LoadingSpinner, {}) }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
               "div",
               {
                 style: {
@@ -26918,13 +26454,13 @@ var MemoizedSecondaryButton = ({
   tooltipText,
   width
 }) => {
-  const [theme] = (0, import_react12.useContext)(ThemeContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  const [theme] = (0, import_react11.useContext)(ThemeContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     QuillToolTip,
     {
       enabled: !!tooltipText && tooltipText !== "",
       text: tooltipText ?? "",
-      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
         "button",
         {
           className: "quill-secondary-button",
@@ -26951,7 +26487,7 @@ var MemoizedSecondaryButton = ({
           },
           disabled,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("style", { children: `
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("style", { children: `
       .quill-secondary-button {
         background-color: white;
       }
@@ -26971,8 +26507,8 @@ var MemoizedSecondaryButton = ({
         flex-shrink: 0;
       }
       ` }),
-            icon && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "icon-container", children: icon }),
-            label && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            icon && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "icon-container", children: icon }),
+            label && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               "span",
               {
                 style: {
@@ -26992,8 +26528,8 @@ var MemoizedSecondaryButton = ({
   );
 };
 var MemoizedHeader = ({ label }) => {
-  const [theme] = (0, import_react12.useContext)(ThemeContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  const [theme] = (0, import_react11.useContext)(ThemeContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "h1",
     {
       style: {
@@ -27010,8 +26546,8 @@ var MemoizedHeader = ({ label }) => {
   );
 };
 var MemoizedSubHeader = ({ label }) => {
-  const [theme] = (0, import_react12.useContext)(ThemeContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  const [theme] = (0, import_react11.useContext)(ThemeContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "h2",
     {
       style: {
@@ -27029,8 +26565,8 @@ var MemoizedSubHeader = ({ label }) => {
   );
 };
 var MemoizedLabel = ({ label }) => {
-  const [theme] = (0, import_react12.useContext)(ThemeContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  const [theme] = (0, import_react11.useContext)(ThemeContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "h1",
     {
       style: {
@@ -27052,8 +26588,8 @@ var MemoizedCheckbox = ({
   containerStyle,
   disabled
 }) => {
-  const [theme] = (0, import_react12.useContext)(ThemeContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  const [theme] = (0, import_react11.useContext)(ThemeContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "label",
     {
       style: {
@@ -27066,7 +26602,7 @@ var MemoizedCheckbox = ({
         ...containerStyle
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           "input",
           {
             type: "checkbox",
@@ -27081,7 +26617,7 @@ var MemoizedCheckbox = ({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           "span",
           {
             style: {
@@ -27110,7 +26646,7 @@ var QuillTabs = ({
   options = DEFAULT_TAB_OPTIONS,
   value,
   onChange
-}) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
   "div",
   {
     style: {
@@ -27121,7 +26657,7 @@ var QuillTabs = ({
       background: "#F9FAFB",
       padding: "5px"
     },
-    children: options.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    children: options.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "button",
       {
         onClick: () => {
@@ -27161,8 +26697,8 @@ var QuillTabs = ({
   }
 );
 var MemoizedText = ({ label }) => {
-  const [theme] = (0, import_react12.useContext)(ThemeContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  const [theme] = (0, import_react11.useContext)(ThemeContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "p",
     {
       style: {
@@ -27192,11 +26728,11 @@ var MemoizedPopover = ({
   horizontalPadding = 20,
   titlePaddingLeft = 0
 }) => {
-  const [theme] = (0, import_react12.useContext)(ThemeContext);
-  const [rightAlignment, setRightAlignment] = (0, import_react12.useState)("auto");
-  const modalRef = (0, import_react12.useRef)(null);
-  const popoverRef = (0, import_react12.useRef)(null);
-  (0, import_react12.useEffect)(() => {
+  const [theme] = (0, import_react11.useContext)(ThemeContext);
+  const [rightAlignment, setRightAlignment] = (0, import_react11.useState)("auto");
+  const modalRef = (0, import_react11.useRef)(null);
+  const popoverRef = (0, import_react11.useRef)(null);
+  (0, import_react11.useEffect)(() => {
     const listener = (event) => {
       const target = event.target;
       if (modalRef.current?.contains(target) || target.closest("[data-portal-ignore]") || ignoredRefs?.some(
@@ -27215,7 +26751,7 @@ var MemoizedPopover = ({
       document.removeEventListener("mousedown", listener);
     };
   }, [isOpen, ignoredRefs, setIsOpen, modalRef]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     updatePopoverPosition();
     window.addEventListener("resize", updatePopoverPosition);
     return () => {
@@ -27233,15 +26769,15 @@ var MemoizedPopover = ({
       }
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: containerStyle, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: containerStyle, children: [
     triggerLabel,
-    !disabled && isOpen && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    !disabled && isOpen && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "div",
       {
         id: "quill-popover-modal",
         ref: modalRef,
         style: { position: "relative" },
-        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
           "div",
           {
             ref: popoverRef,
@@ -27258,7 +26794,7 @@ var MemoizedPopover = ({
               right: rightAlignment
             },
             children: [
-              popoverTitle && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              popoverTitle && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                 "h1",
                 {
                   style: {
@@ -27290,12 +26826,12 @@ function MemoizedModal({
   width,
   height
 }) {
-  const [theme] = (0, import_react12.useContext)(ThemeContext);
+  const [theme] = (0, import_react11.useContext)(ThemeContext);
   if (!isOpen) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "div",
       {
         style: {
@@ -27311,7 +26847,7 @@ function MemoizedModal({
         onClick: () => setIsOpen(false)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "div",
       {
         style: {
@@ -27334,7 +26870,7 @@ function MemoizedModal({
           maxWidth: "calc(100vw - 82px)",
           maxHeight: "calc(100vh - 82px)"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
           "div",
           {
             style: {
@@ -27348,7 +26884,7 @@ function MemoizedModal({
               fontFamily: theme?.fontFamily
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
                 "div",
                 {
                   id: "quill-modal-header",
@@ -27363,7 +26899,7 @@ function MemoizedModal({
                     borderBottom: "1px solid #E7E7E7"
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                       "h2",
                       {
                         style: {
@@ -27377,11 +26913,11 @@ function MemoizedModal({
                         children: title
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MemoizedDeleteButton, { onClick: () => setIsOpen(false) })
+                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MemoizedDeleteButton, { onClick: () => setIsOpen(false) })
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                 "div",
                 {
                   style: {
@@ -27402,7 +26938,7 @@ function MemoizedModal({
 }
 var MemoizedDeleteButton = ({
   onClick
-}) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
   "button",
   {
     className: "quill-delete-button",
@@ -27419,18 +26955,18 @@ var MemoizedDeleteButton = ({
       borderRadius: 6
     },
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("style", { children: `
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("style", { children: `
   .quill-delete-button {
       background-color: white;
   }
   .quill-delete-button:hover {
     background-color: #F4F4F5;
   }` }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(XIcon_default, { height: "20", width: "20", fill: "#6C727F" })
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(XIcon_default, { height: "20", width: "20", fill: "#6C727F" })
     ]
   }
 );
-var LoadingSpinner = () => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+var LoadingSpinner = () => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
   "div",
   {
     style: {
@@ -27441,8 +26977,8 @@ var LoadingSpinner = () => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       justifyContent: "center",
       alignItems: "center"
     },
-    children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("svg", { width: "24", height: "24", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("svg", { width: "24", height: "24", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         "circle",
         {
           cx: "12",
@@ -27454,7 +26990,7 @@ var LoadingSpinner = () => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           stroke: "#364153",
           fill: "none",
           transform: "rotate(-90 12 12)",
-          children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             "animateTransform",
             {
               attributeName: "transform",
@@ -27468,7 +27004,7 @@ var LoadingSpinner = () => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         "circle",
         {
           cx: "12",
@@ -27480,7 +27016,7 @@ var LoadingSpinner = () => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           stroke: "#ADB1B9",
           fill: "none",
           transform: "rotate(90 12 12)",
-          children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             "animateTransform",
             {
               attributeName: "transform",
@@ -27497,7 +27033,7 @@ var LoadingSpinner = () => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     ] })
   }
 );
-var QuillEmptyDashboardComponent = () => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", {});
+var QuillEmptyDashboardComponent = () => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", {});
 var defaultFilterContainerStyles = {
   display: "flex",
   width: "100%",
@@ -27509,9 +27045,9 @@ var QuillLoadingDashboardComponent = ({
   chartContainerStyle,
   LoadingComponent = QuillLoadingSkeleton
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: { ...containerStyle, overflow: "hidden" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: defaultFilterContainerStyles, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LoadingComponent, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: { ...containerStyle, overflow: "hidden" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: defaultFilterContainerStyles, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(LoadingComponent, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "div",
       {
         style: {
@@ -27520,7 +27056,7 @@ var QuillLoadingDashboardComponent = ({
           gridTemplateRows: `repeat(${170}px)`,
           gap: 40
         },
-        children: Array.from({ length: 4 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: chartContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LoadingComponent, {}, index) }, index))
+        children: Array.from({ length: 4 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: chartContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(LoadingComponent, {}, index) }, index))
       }
     )
   ] });
@@ -27528,7 +27064,7 @@ var QuillLoadingDashboardComponent = ({
 var QuillChartBuilderInputRowContainer = ({
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
     {
       style: {
@@ -27543,7 +27079,7 @@ var QuillChartBuilderInputRowContainer = ({
 var QuillChartBuilderInputColumnContainer = ({
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
     {
       style: {
@@ -27558,7 +27094,7 @@ var QuillChartBuilderInputColumnContainer = ({
 var QuillPivotRowContainer = ({
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
     {
       style: {
@@ -27573,7 +27109,7 @@ var QuillPivotRowContainer = ({
 var QuillPivotColumnContainer = ({
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
     {
       style: {
@@ -27588,7 +27124,7 @@ var QuillPivotColumnContainer = ({
 var QuillFilterContainerComponent = ({
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
     {
       style: {
@@ -27611,11 +27147,11 @@ var QuillModalComponent = ({
   triggerLabel,
   title
 }) => {
-  const [theme] = (0, import_react12.useContext)(ThemeContext);
-  const [rightAlignment, setRightAlignment] = (0, import_react12.useState)("auto");
-  const modalRef = (0, import_react12.useRef)(null);
-  const popoverRef = (0, import_react12.useRef)(null);
-  (0, import_react12.useEffect)(() => {
+  const [theme] = (0, import_react11.useContext)(ThemeContext);
+  const [rightAlignment, setRightAlignment] = (0, import_react11.useState)("auto");
+  const modalRef = (0, import_react11.useRef)(null);
+  const popoverRef = (0, import_react11.useRef)(null);
+  (0, import_react11.useEffect)(() => {
     const listener = (event) => {
       if (modalRef?.current && !modalRef?.current?.contains(event.target)) {
         if (setIsOpen) setIsOpen(false);
@@ -27630,7 +27166,7 @@ var QuillModalComponent = ({
       document.removeEventListener("mousedown", listener);
     };
   }, [modalRef, setIsOpen, isOpen]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     updatePopoverPosition();
     window.addEventListener("resize", updatePopoverPosition);
     return () => {
@@ -27648,8 +27184,8 @@ var QuillModalComponent = ({
       }
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: { position: "relative" }, ref: modalRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: { position: "relative" }, ref: modalRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       MemoizedSecondaryButton,
       {
         onClick: () => {
@@ -27658,12 +27194,12 @@ var QuillModalComponent = ({
         label: triggerLabel || ""
       }
     ),
-    title && title === "Filters" ? isOpen && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    title && title === "Filters" ? isOpen && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "div",
       {
         id: "quill-popover-modal",
         style: { position: "relative", top: 10 },
-        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
           "div",
           {
             ref: popoverRef,
@@ -27680,7 +27216,7 @@ var QuillModalComponent = ({
               right: rightAlignment
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                 "h1",
                 {
                   style: {
@@ -27700,8 +27236,8 @@ var QuillModalComponent = ({
           }
         )
       }
-    ) : isOpen && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    ) : isOpen && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         "div",
         {
           style: {
@@ -27719,7 +27255,7 @@ var QuillModalComponent = ({
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         "div",
         {
           style: {
@@ -27740,7 +27276,7 @@ var QuillModalComponent = ({
             padding: 30,
             overflow: "auto"
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
             "div",
             {
               style: {
@@ -27749,7 +27285,7 @@ var QuillModalComponent = ({
                 minWidth: "60vw"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                   "h1",
                   {
                     style: {
@@ -27776,7 +27312,7 @@ var QuillModalComponent = ({
 var QuillChartBuilderFormContainer = ({
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
     {
       style: {
@@ -27798,8 +27334,8 @@ var QuillErrorMessageComponent = ({
   errorMessage,
   containerStyle
 }) => {
-  const [theme] = (0, import_react12.useContext)(ThemeContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  const [theme] = (0, import_react11.useContext)(ThemeContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "div",
     {
       style: {
@@ -27817,7 +27353,7 @@ var QuillErrorMessageComponent = ({
         ...containerStyle
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -27831,7 +27367,7 @@ var QuillErrorMessageComponent = ({
               marginRight: 8,
               color: "#D32F2F"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               "path",
               {
                 strokeLinecap: "round",
@@ -27847,12 +27383,12 @@ var QuillErrorMessageComponent = ({
   );
 };
 var QuillColumnSearchEmptyState = () => {
-  const [theme] = (0, import_react12.useContext)(ThemeContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { fontFamily: theme?.fontFamily }, children: "No results found" });
+  const [theme] = (0, import_react11.useContext)(ThemeContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { fontFamily: theme?.fontFamily }, children: "No results found" });
 };
 var QuillLoadingComponent = () => {
-  const [theme] = (0, import_react12.useContext)(ThemeContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  const [theme] = (0, import_react11.useContext)(ThemeContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "div",
     {
       style: {
@@ -27867,9 +27403,9 @@ var QuillLoadingComponent = () => {
         justifyContent: "center"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { height: 100 } }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("svg", { width: "24", height: "24", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { height: 100 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("svg", { width: "24", height: "24", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             "circle",
             {
               cx: "12",
@@ -27881,7 +27417,7 @@ var QuillLoadingComponent = () => {
               stroke: theme?.primaryTextColor || "#364153",
               fill: "none",
               transform: "rotate(-90 12 12)",
-              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                 "animateTransform",
                 {
                   attributeName: "transform",
@@ -27895,7 +27431,7 @@ var QuillLoadingComponent = () => {
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             "circle",
             {
               cx: "12",
@@ -27907,7 +27443,7 @@ var QuillLoadingComponent = () => {
               stroke: "#ADB1B9",
               fill: "none",
               transform: "rotate(90 12 12)",
-              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                 "animateTransform",
                 {
                   attributeName: "transform",
@@ -27930,9 +27466,9 @@ var OverflowContainer = ({
   children,
   style: style2
 }) => {
-  const containerRef = (0, import_react12.useRef)(null);
-  const [showTopShadow, setShowTopShadow] = (0, import_react12.useState)(false);
-  const [showBottomShadow, setShowBottomShadow] = (0, import_react12.useState)(false);
+  const containerRef = (0, import_react11.useRef)(null);
+  const [showTopShadow, setShowTopShadow] = (0, import_react11.useState)(false);
+  const [showBottomShadow, setShowBottomShadow] = (0, import_react11.useState)(false);
   const checkOverflow = () => {
     const container = containerRef.current;
     if (container) {
@@ -27943,7 +27479,7 @@ var OverflowContainer = ({
       );
     }
   };
-  (0, import_react12.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const container = containerRef.current;
     if (container) {
       checkOverflow();
@@ -27997,7 +27533,7 @@ var OverflowContainer = ({
     opacity: showBottomShadow ? 1 : 0,
     ...shadowStyle
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "div",
     {
       style: containerStyle,
@@ -28006,9 +27542,9 @@ var OverflowContainer = ({
       onTouchMove: checkOverflow,
       onMouseMove: checkOverflow,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: topShadowStyle }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: topShadowStyle }),
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: bottomShadowStyle })
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: bottomShadowStyle })
       ]
     }
   );
@@ -28021,9 +27557,9 @@ var QuillToolTip = ({
   textStyle = {},
   displayBelow = false
 }) => {
-  const [theme] = (0, import_react12.useContext)(ThemeContext);
-  return enabled ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "tooltip-container", style: { ...containerStyle }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("style", { children: `
+  const [theme] = (0, import_react11.useContext)(ThemeContext);
+  return enabled ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "tooltip-container", style: { ...containerStyle }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("style", { children: `
         .tooltip-container {
           position: relative;
           display: inline-block;
@@ -28085,7 +27621,7 @@ var QuillToolTip = ({
           opacity: 1;
         }` }),
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "tooltip-text", style: { ...textStyle }, children: text })
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "tooltip-text", style: { ...textStyle }, children: text })
   ] }) : children;
 };
 var QuillToolTipPortal = ({
@@ -28096,11 +27632,11 @@ var QuillToolTipPortal = ({
   textStyle = {},
   mirror = false
 }) => {
-  const [theme] = (0, import_react12.useContext)(ThemeContext);
-  const [isOpen, setIsOpen] = (0, import_react12.useState)(false);
-  const tooltipRef = (0, import_react12.useRef)(null);
-  const triggerRef = (0, import_react12.useRef)(null);
-  const [tooltipPosition, setTooltipPosition] = (0, import_react12.useState)(void 0);
+  const [theme] = (0, import_react11.useContext)(ThemeContext);
+  const [isOpen, setIsOpen] = (0, import_react11.useState)(false);
+  const tooltipRef = (0, import_react11.useRef)(null);
+  const triggerRef = (0, import_react11.useRef)(null);
+  const [tooltipPosition, setTooltipPosition] = (0, import_react11.useState)(void 0);
   const updatePosition = () => {
     if (triggerRef.current && tooltipRef.current) {
       const rect = triggerRef.current.getBoundingClientRect();
@@ -28125,7 +27661,7 @@ var QuillToolTipPortal = ({
       setTooltipPosition({ top, left });
     }
   };
-  (0, import_react12.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (isOpen) {
       const timer2 = setTimeout(() => {
         updatePosition();
@@ -28140,9 +27676,9 @@ var QuillToolTipPortal = ({
     }
   }, [isOpen]);
   if (!enabled) {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_jsx_runtime27.Fragment, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "div",
     {
       ref: triggerRef,
@@ -28156,7 +27692,7 @@ var QuillToolTipPortal = ({
       children: [
         children,
         isOpen && (0, import_react_dom2.createPortal)(
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
             "div",
             {
               ref: tooltipRef,
@@ -28183,7 +27719,7 @@ var QuillToolTipPortal = ({
               },
               children: [
                 text,
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                   "div",
                   {
                     style: {
@@ -28198,7 +27734,7 @@ var QuillToolTipPortal = ({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                   "div",
                   {
                     style: {
@@ -28229,8 +27765,8 @@ var QuillChartBuilderCheckboxComponent = ({
   disabled,
   containerStyle
 }) => {
-  const [theme] = (0, import_react12.useContext)(ThemeContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  const [theme] = (0, import_react11.useContext)(ThemeContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
     {
       style: {
@@ -28239,7 +27775,7 @@ var QuillChartBuilderCheckboxComponent = ({
         paddingBottom: 4,
         paddingLeft: 8,
         paddingRight: 8,
-        border: "1px solid #E7E7E7",
+        // border: '1px solid #E7E7E7',
         borderRadius: 4,
         display: "flex",
         alignItems: "center",
@@ -28248,7 +27784,7 @@ var QuillChartBuilderCheckboxComponent = ({
         pointerEvents: disabled ? "none" : "auto",
         ...containerStyle
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         MemoizedCheckbox,
         {
           isChecked,
@@ -28268,10 +27804,10 @@ var QuillPortal = ({
   showModal,
   setShowModal
 }) => {
-  const modalRef = (0, import_react12.useRef)(null);
-  const [popoverPosition, setPopoverPosition] = (0, import_react12.useState)(void 0);
-  const [z, setZ] = (0, import_react12.useState)(10);
-  const scrollableParentRef = (0, import_react12.useRef)(document.body);
+  const modalRef = (0, import_react11.useRef)(null);
+  const [popoverPosition, setPopoverPosition] = (0, import_react11.useState)(void 0);
+  const [z, setZ] = (0, import_react11.useState)(10);
+  const scrollableParentRef = (0, import_react11.useRef)(document.body);
   const updatePosition = () => {
     if (anchorRef.current) {
       requestAnimationFrame(() => {
@@ -28289,7 +27825,7 @@ var QuillPortal = ({
       });
     }
   };
-  (0, import_react12.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     let resizeObserver;
     let mutationObserver;
     if (showModal && anchorRef.current) {
@@ -28328,7 +27864,7 @@ var QuillPortal = ({
     showModal
   );
   return (0, import_react_dom2.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "div",
       {
         style: {
@@ -28363,8 +27899,645 @@ var QuillPortal = ({
   );
 };
 
-// src/components/QuillTable.tsx
+// src/components/Chart/CustomLegend.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var getLegendLabel = (entry) => {
+  const label = entry?.payload?.name ?? entry?.value ?? entry?.dataKey ?? "";
+  return typeof label === "string" ? label : String(label ?? "");
+};
+var LegendItem = ({
+  entry,
+  index,
+  theme
+}) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  "div",
+  {
+    style: {
+      display: "flex",
+      alignItems: "baseline",
+      marginRight: "1rem"
+    },
+    children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: { display: "flex", flexDirection: "row", alignItems: "center" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        "svg",
+        {
+          style: { marginRight: "0.5rem" },
+          width: "16",
+          height: "16",
+          viewBox: "0 0 16 16",
+          children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("rect", { width: "16", height: "16", rx: "3", fill: entry?.color })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        "span",
+        {
+          style: {
+            color: theme?.secondaryTextColor,
+            fontFamily: theme?.fontFamily,
+            fontSize: theme?.fontSizeMedium || "14px",
+            whiteSpace: "nowrap"
+          },
+          children: getLegendLabel(entry)
+        }
+      )
+    ] })
+  },
+  `legend-${index}`
+);
+var getOuterWidth = (element) => {
+  if (!element) return 0;
+  const rect = element.getBoundingClientRect();
+  const styles = window.getComputedStyle(element);
+  const marginLeft = Number.parseFloat(styles.marginLeft || "0");
+  const marginRight = Number.parseFloat(styles.marginRight || "0");
+  return rect.width + marginLeft + marginRight;
+};
+var RenderLegend = ({
+  payload,
+  limit
+}) => {
+  const [theme] = (0, import_react12.useContext)(ThemeContext);
+  const [isOpen, setIsOpen] = (0, import_react12.useState)(false);
+  const [showSeeAll, setShowSeeAll] = (0, import_react12.useState)(false);
+  const [visibleCount, setVisibleCount] = (0, import_react12.useState)(null);
+  const containerRef = (0, import_react12.useRef)(null);
+  const seeAllMeasureRef = (0, import_react12.useRef)(null);
+  const seeAllTriggerRef = (0, import_react12.useRef)(null);
+  const itemRefs = (0, import_react12.useRef)([]);
+  if (!payload || payload.length === 0) return null;
+  const maxItems = limit ?? payload.length;
+  const measuredLimit = visibleCount ?? maxItems;
+  const visiblePayload = payload.slice(0, Math.min(maxItems, measuredLimit));
+  const handleOpen = () => setIsOpen(true);
+  const handleClose = () => setIsOpen(false);
+  (0, import_react12.useLayoutEffect)(() => {
+    if (!containerRef.current) return;
+    if (!payload.length) return;
+    const updateVisibleCount = () => {
+      const containerWidth = containerRef.current?.offsetWidth ?? 0;
+      if (!containerWidth) return;
+      const maxCount = Math.min(maxItems, payload.length);
+      const seeAllWidth = getOuterWidth(seeAllMeasureRef.current);
+      const computeCount = (reserveSeeAll) => {
+        const availableWidth = containerWidth - (reserveSeeAll ? seeAllWidth : 0);
+        if (availableWidth <= 0) return 1;
+        let totalWidth = 0;
+        let nextCount = 0;
+        for (let i = 0; i < maxCount; i += 1) {
+          const itemWidth = getOuterWidth(itemRefs.current[i] ?? null);
+          if (totalWidth + itemWidth > availableWidth) break;
+          totalWidth += itemWidth;
+          nextCount = i + 1;
+        }
+        return Math.max(1, nextCount);
+      };
+      const countWithSeeAll = computeCount(true);
+      const shouldShowSeeAll = payload.length > countWithSeeAll;
+      const finalCount = shouldShowSeeAll ? countWithSeeAll : computeCount(false);
+      setShowSeeAll(shouldShowSeeAll);
+      setVisibleCount(finalCount);
+    };
+    updateVisibleCount();
+    const observer = new ResizeObserver(updateVisibleCount);
+    observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, [payload.length, maxItems]);
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      style: {
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexWrap: "nowrap",
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              visibility: "hidden",
+              height: 0,
+              overflow: "hidden",
+              pointerEvents: "none",
+              display: "flex",
+              alignItems: "center",
+              flexWrap: "nowrap",
+              justifyContent: "space-between",
+              width: "100%"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexDirection: "row",
+                    alignItems: "center",
+                    justifyContent: "flex-start",
+                    flexWrap: "nowrap"
+                  },
+                  children: payload.slice(0, maxItems).map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                    "div",
+                    {
+                      ref: (element) => {
+                        itemRefs.current[index] = element;
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LegendItem, { entry, index, theme })
+                    },
+                    `legend-measure-${index}`
+                  ))
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                "div",
+                {
+                  ref: seeAllMeasureRef,
+                  style: {
+                    color: theme?.secondaryTextColor,
+                    fontSize: theme?.fontSizeMedium || "14px",
+                    fontFamily: theme?.fontFamily,
+                    marginLeft: 10,
+                    display: "flex",
+                    alignItems: "baseline",
+                    flexShrink: 0,
+                    whiteSpace: "nowrap"
+                  },
+                  children: "See all"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "flex-start",
+              flexWrap: "nowrap"
+            },
+            children: visiblePayload.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              LegendItem,
+              {
+                entry,
+                index,
+                theme
+              },
+              `legend-${index}`
+            ))
+          }
+        ),
+        showSeeAll && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { onMouseEnter: handleOpen, onMouseLeave: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          MemoizedPopover,
+          {
+            isOpen,
+            setIsOpen,
+            triggerLabel: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              "div",
+              {
+                ref: seeAllTriggerRef,
+                onClick: handleOpen,
+                onMouseEnter: handleOpen,
+                style: {
+                  cursor: "pointer",
+                  color: theme?.secondaryTextColor,
+                  fontSize: theme?.fontSizeMedium || "14px",
+                  fontFamily: theme?.fontFamily,
+                  marginLeft: 10,
+                  display: "flex",
+                  alignItems: "baseline",
+                  flexShrink: 0,
+                  whiteSpace: "nowrap"
+                },
+                children: "See all"
+              }
+            ),
+            popoverChildren: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  flexWrap: "wrap",
+                  alignItems: "center",
+                  minWidth: 260,
+                  maxWidth: 520,
+                  gap: "0.5rem"
+                },
+                children: payload.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  LegendItem,
+                  {
+                    entry,
+                    index,
+                    theme
+                  },
+                  `legend-popover-${index}`
+                ))
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
+};
+
+// src/components/Chart/PieChart.tsx
 var import_jsx_runtime28 = require("react/jsx-runtime");
+var defaultValueFormatter = (value) => (value * 1).toFixed(1) + "%";
+var parseData2 = (data, colors, categoryKey, valueKey) => {
+  const maxItems = 20;
+  const slicedData = deepCopy(data).slice(0, maxItems);
+  const totalValue = slicedData.reduce(
+    (acc, dataPoint) => (
+      // Big(acc)
+      //   .add(Big(Number(dataPoint[valueKey]) ?? 0))
+      //   .toNumber(),
+      acc + parseFloat(dataPoint[valueKey] ?? "0")
+    ),
+    0
+  );
+  slicedData.forEach((dataPoint) => {
+    const rawValue = parseFloat(dataPoint[valueKey] ?? "0");
+    dataPoint[valueKey] = totalValue ? rawValue * 100 / totalValue : data.length > maxItems ? 100 / (maxItems + 1) : 100 / slicedData.length;
+    dataPoint[`raw_${valueKey}`] = parseFloat(rawValue.toFixed(2));
+  });
+  const parsedData = slicedData.map((dataPoint, idx) => {
+    const baseColor = colors.length > 0 ? idx < colors.length ? colors[idx] : colors[colors.length - 1] : "#808080";
+    return {
+      ...dataPoint,
+      color: baseColor,
+      fill: baseColor
+    };
+  });
+  if (data.length > maxItems) {
+    const otherData = data.slice(maxItems);
+    const otherSum = otherData.reduce(
+      (acc, dataPoint) => (
+        // Big(acc)
+        //   .add(Big(Number(dataPoint[valueKey])) ?? 0)
+        //   .toNumber(),
+        acc + parseFloat(dataPoint[valueKey] ?? "0")
+      ),
+      0
+    );
+    const otherColor = colors.length > 0 ? colors[colors.length - 1] : "#808080";
+    const normalizedOtherSum = totalValue ? otherSum * 100 / totalValue : 100 / (maxItems + 1);
+    parsedData.push({
+      [categoryKey]: "Other",
+      [valueKey]: normalizedOtherSum,
+      [`raw_${valueKey}`]: parseFloat(otherSum.toFixed(2)),
+      color: otherColor,
+      fill: otherColor
+    });
+  }
+  return parsedData;
+};
+var ChartTooltipFrame = ({
+  children,
+  theme
+}) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  "div",
+  {
+    style: {
+      borderStyle: "solid",
+      borderColor: theme?.borderColor || "#E5E7EB",
+      borderWidth: 1,
+      background: theme?.backgroundColor || "#ffffff",
+      fontSize: theme?.fontSize || "14px",
+      borderRadius: "6px",
+      boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"
+    },
+    children
+  }
+);
+var ChartTooltipRow = ({
+  value,
+  rawValue,
+  valueKey,
+  valueKeyLabel,
+  name: name2,
+  // color,
+  theme
+}) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  "div",
+  {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: 2,
+      minWidth: 150,
+      position: "relative"
+    },
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            width: "100%"
+            // paddingLeft: '24px',
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+            "span",
+            {
+              style: {
+                flex: 1,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                  "p",
+                  {
+                    style: {
+                      marginTop: 0,
+                      marginBottom: 0,
+                      marginRight: "24px",
+                      fontFamily: theme?.fontFamily,
+                      color: theme?.primaryTextColor,
+                      fontSize: theme?.fontSizeSmall || "14px",
+                      fontWeight: theme?.fontWeightMedium || "500",
+                      minWidth: "60px"
+                    },
+                    children: name2
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                  "p",
+                  {
+                    style: {
+                      marginTop: 0,
+                      marginBottom: 0,
+                      fontFamily: theme?.fontFamily,
+                      color: theme?.primaryTextColor,
+                      fontSize: theme?.fontSizeSmall || "14px",
+                      fontWeight: theme?.fontWeightMedium || "500",
+                      minWidth: "40px",
+                      textAlign: "right"
+                    },
+                    children: value
+                  }
+                )
+              ]
+            }
+          )
+        }
+      ),
+      (rawValue || valueKey) && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            width: "100%",
+            // paddingLeft: '24px',
+            justifyContent: "space-between"
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+            "span",
+            {
+              style: {
+                flex: 1,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                  "p",
+                  {
+                    style: {
+                      marginTop: 0,
+                      marginBottom: 0,
+                      marginRight: "24px",
+                      fontFamily: theme?.fontFamily,
+                      color: theme?.primaryTextColor,
+                      fontSize: theme?.fontSizeSmall || "14px",
+                      fontWeight: theme?.fontWeightMedium || "500",
+                      minWidth: "60px"
+                    },
+                    children: valueKeyLabel || valueKey
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                  "p",
+                  {
+                    style: {
+                      marginTop: 0,
+                      marginBottom: 0,
+                      fontFamily: theme?.fontFamily,
+                      color: theme?.primaryTextColor,
+                      fontSize: theme?.fontSizeSmall || "14px",
+                      fontWeight: theme?.fontWeightMedium || "500",
+                      minWidth: "40px",
+                      textAlign: "right"
+                    },
+                    children: rawValue
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    ]
+  }
+);
+var DonutChartTooltip = ({
+  active,
+  payload,
+  valueFormatter: valueFormatter2,
+  theme,
+  yAxisFields
+}) => {
+  if (active && payload[0]) {
+    const payloadRow = payload[0];
+    const rawValue = payloadRow.payload[`raw_${payloadRow.dataKey}`];
+    const field = yAxisFields?.find((f) => f.field === payloadRow.dataKey);
+    const formattedRawValue = quillFormat({
+      value: rawValue?.toString() || "",
+      format: field?.format || "string"
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ChartTooltipFrame, { theme, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      "div",
+      {
+        style: {
+          paddingLeft: "1rem",
+          paddingRight: "1rem",
+          paddingTop: "8px",
+          paddingBottom: "8px"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          ChartTooltipRow,
+          {
+            value: valueFormatter2(payloadRow.value),
+            rawValue: rawValue ? formattedRawValue : void 0,
+            valueKey: payloadRow.dataKey,
+            valueKeyLabel: field?.label,
+            name: payloadRow.name,
+            color: payloadRow.payload.color,
+            theme
+          }
+        )
+      }
+    ) });
+  }
+  return null;
+};
+var PieChartWrapper = import_react13.default.forwardRef(
+  (props, ref) => {
+    const {
+      category = "pct_of_the_total",
+      index = "status",
+      data,
+      colors = [],
+      colorMap = {},
+      variant = "donut",
+      valueFormatter: valueFormatter2 = defaultValueFormatter,
+      className,
+      containerStyle,
+      theme,
+      onClickChartElement,
+      yAxisFields,
+      showLegend = false,
+      ...other
+    } = props;
+    const isDonut = variant == "donut";
+    if (!data || data.length === 0) {
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flex: "1 0 auto",
+            // height: '100%',
+            margin: "auto",
+            justifyContent: "center",
+            alignItems: "center",
+            fontSize: 13,
+            fontFamily: theme?.fontFamily,
+            color: theme.secondaryTextColor,
+            ...containerStyle
+          },
+          className,
+          children: "No results"
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      "div",
+      {
+        ref,
+        className,
+        style: {
+          width: "100%",
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center",
+          boxSizing: "content-box",
+          ...containerStyle
+        },
+        ...other,
+        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          import_recharts.ResponsiveContainer,
+          {
+            width: "100%",
+            height: "100%",
+            minWidth: 0,
+            minHeight: 0,
+            children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_recharts.PieChart, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                import_recharts.Pie,
+                {
+                  data: parseData2(
+                    data,
+                    (() => {
+                      const colorArray = colorMap[category] && colorMap[category]["primary"] && colorMap[category]["primary"] || colors;
+                      const containsCssVars = colorArray.some(
+                        (color2) => typeof color2 === "string" && color2.includes("var(")
+                      );
+                      if (containsCssVars) {
+                        return Array.from({ length: data.length }).map(
+                          (_, idx) => colorArray[idx % colorArray.length] ?? colorArray[colorArray.length - 1] ?? "#808080"
+                        );
+                      }
+                      return colorArray.length >= data.length ? colorArray.slice(0, data.length) : generateArrayFromColor(colorArray, data.length);
+                    })(),
+                    index,
+                    category
+                  ),
+                  cx: "50%",
+                  cy: "50%",
+                  startAngle: 90,
+                  endAngle: -270,
+                  innerRadius: isDonut ? showLegend ? "50%" : "70%" : "0%",
+                  outerRadius: showLegend ? "70%" : "100%",
+                  paddingAngle: 0,
+                  dataKey: category,
+                  nameKey: index,
+                  isAnimationActive: true,
+                  onClick: onClickChartElement,
+                  labelLine: false,
+                  label: false
+                }
+              ),
+              showLegend && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                import_recharts.Legend,
+                {
+                  verticalAlign: "top",
+                  align: "left",
+                  fontSize: 11,
+                  color: theme.secondaryTextColor,
+                  wrapperStyle: {
+                    paddingBottom: 20,
+                    fontFamily: theme?.fontFamily
+                  },
+                  content: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(RenderLegend, { limit: 5 })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                import_recharts.Tooltip,
+                {
+                  wrapperStyle: {
+                    outline: "none"
+                  },
+                  content: ({ active, payload }) => {
+                    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                      DonutChartTooltip,
+                      {
+                        active,
+                        payload,
+                        valueFormatter: valueFormatter2,
+                        theme,
+                        yAxisFields
+                      }
+                    );
+                  }
+                }
+              )
+            ] })
+          }
+        )
+      }
+    );
+  }
+);
+var PieChart_default = PieChartWrapper;
+
+// src/components/QuillTable.tsx
+var import_react14 = require("react");
+init_valueFormatter();
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function QuillTable({
   rows,
   rowCount,
@@ -28393,18 +28566,18 @@ function QuillTable({
   borderTop,
   borderBottom
 }) {
-  const [activeRows, setActiveRows] = (0, import_react13.useState)([]);
-  const [maxPage, setMaxPage] = (0, import_react13.useState)(1);
-  const [sortColumn, setSortColumn] = (0, import_react13.useState)(sort?.field || "");
-  const [sortDirection, setSortDirection] = (0, import_react13.useState)(sort?.direction || "desc");
-  const [theme] = (0, import_react13.useContext)(ThemeContext);
-  const [isPaginating, setIsPaginating] = (0, import_react13.useState)(true);
-  const [initialLoad, setInitialLoad] = (0, import_react13.useState)(true);
-  (0, import_react13.useEffect)(() => {
+  const [activeRows, setActiveRows] = (0, import_react14.useState)([]);
+  const [maxPage, setMaxPage] = (0, import_react14.useState)(1);
+  const [sortColumn, setSortColumn] = (0, import_react14.useState)(sort?.field || "");
+  const [sortDirection, setSortDirection] = (0, import_react14.useState)(sort?.direction || "desc");
+  const [theme] = (0, import_react14.useContext)(ThemeContext);
+  const [isPaginating, setIsPaginating] = (0, import_react14.useState)(true);
+  const [initialLoad, setInitialLoad] = (0, import_react14.useState)(true);
+  (0, import_react14.useEffect)(() => {
     setSortColumn(sort?.field || "");
     setSortDirection(sort?.direction || "desc");
   }, [sort]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (rows?.length === 0 && isLoading) {
       return;
     }
@@ -28436,7 +28609,7 @@ function QuillTable({
     rowCount,
     isLoading
   ]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (rows.length <= currentPage * rowsPerPage) {
       onPageChange && onPageChange(0);
       setMaxPage(1);
@@ -28480,7 +28653,7 @@ function QuillTable({
     }
   };
   if (initialLoad) {
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "div",
       {
         style: {
@@ -28488,11 +28661,11 @@ function QuillTable({
           ...containerStyle
         },
         className,
-        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LoadingComponent, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(LoadingComponent, {})
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "div",
     {
       style: {
@@ -28505,7 +28678,7 @@ function QuillTable({
         ...containerStyle
       },
       className,
-      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         "div",
         {
           style: {
@@ -28524,7 +28697,7 @@ function QuillTable({
             outline: "none",
             position: "relative"
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
             "div",
             {
               role: "table",
@@ -28538,8 +28711,8 @@ function QuillTable({
                 minHeight: "260px"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { style: { overflow: "auto", flexGrow: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { style: { minWidth: "100%", display: "inline-block" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { style: { overflow: "auto", flexGrow: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { style: { minWidth: "100%", display: "inline-block" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                     "div",
                     {
                       className: "thead",
@@ -28549,7 +28722,7 @@ function QuillTable({
                         zIndex: 1,
                         background: headerBackgroundColor ?? "white"
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                         "div",
                         {
                           role: "row",
@@ -28562,7 +28735,7 @@ function QuillTable({
                             marginBottom: "-1px"
                             // avoid double border
                           },
-                          children: columns && columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+                          children: columns && columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
                             "div",
                             {
                               onClick: (e) => {
@@ -28593,7 +28766,7 @@ function QuillTable({
                                 justifyContent: "space-between"
                               },
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                                   "div",
                                   {
                                     "aria-haspopup": "dialog",
@@ -28618,7 +28791,7 @@ function QuillTable({
                                     children: hideLabels || !column.label ? column.field : column.label
                                   }
                                 ),
-                                column.field === sortColumn && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                                column.field === sortColumn && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                                   "svg",
                                   {
                                     xmlns: "http://www.w3.org/2000/svg",
@@ -28629,7 +28802,7 @@ function QuillTable({
                                     style: {
                                       transform: sortDirection === "desc" ? "rotate(180deg)" : void 0
                                     },
-                                    children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                                       "path",
                                       {
                                         fillRule: "evenodd",
@@ -28647,15 +28820,15 @@ function QuillTable({
                       )
                     }
                   ),
-                  (isPaginating || isLoading) && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                  (isPaginating || isLoading) && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                     "div",
                     {
                       className,
                       style: { position: "absolute", width: "100%" },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LoadingComponent, {})
+                      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(LoadingComponent, {})
                     }
                   ),
-                  activeRows && activeRows.length === 0 || columns && columns.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                  activeRows && activeRows.length === 0 || columns && columns.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                     "div",
                     {
                       style: {
@@ -28673,7 +28846,7 @@ function QuillTable({
                       },
                       children: emptyStateLabel
                     }
-                  ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { role: "rowgroup", className: "tbody", children: activeRows && activeRows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { role: "rowgroup", className: "tbody", children: activeRows && activeRows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                     "div",
                     {
                       role: "row",
@@ -28684,7 +28857,7 @@ function QuillTable({
                         minWidth: "100px",
                         boxSizing: "border-box"
                       },
-                      children: columns && columns.map((column, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                      children: columns && columns.map((column, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                         "div",
                         {
                           role: "cell",
@@ -28703,7 +28876,7 @@ function QuillTable({
                             borderBottom: rowIndex === activeRows?.length - 1 ? "1px solid #E7E7E7" : void 0,
                             userSelect: "none"
                           },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                             "div",
                             {
                               style: {
@@ -28715,7 +28888,7 @@ function QuillTable({
                                 userSelect: "none"
                               },
                               "data-testid": "static-cell",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                                 "div",
                                 {
                                   "aria-haspopup": "dialog",
@@ -28747,7 +28920,7 @@ function QuillTable({
                     "sqlrow" + rowIndex
                   )) })
                 ] }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                   "div",
                   {
                     style: {
@@ -28760,7 +28933,7 @@ function QuillTable({
                       marginTop: "-1px"
                       // avoid double border
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
                       "div",
                       {
                         style: {
@@ -28772,7 +28945,7 @@ function QuillTable({
                           height: 37
                         },
                         children: [
-                          !hideCSVDownloadButton ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                          !hideCSVDownloadButton ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                             "button",
                             {
                               onClick: downloadCSV2,
@@ -28788,8 +28961,8 @@ function QuillTable({
                               },
                               children: "Download CSV"
                             }
-                          ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", {}),
-                          rows.length === 0 || isLoading ? null : /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+                          ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", {}),
+                          rows.length === 0 || isLoading ? null : /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
                             "div",
                             {
                               style: {
@@ -28798,7 +28971,7 @@ function QuillTable({
                                 alignItems: "center"
                               },
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+                                /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
                                   "div",
                                   {
                                     style: {
@@ -28813,8 +28986,8 @@ function QuillTable({
                                     ]
                                   }
                                 ),
-                                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { style: { width: 8 } }),
-                                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { style: { width: 8 } }),
+                                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                                   "button",
                                   {
                                     onClick: (e) => {
@@ -28826,7 +28999,7 @@ function QuillTable({
                                       border: "none",
                                       background: "transparent"
                                     },
-                                    children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                                       "svg",
                                       {
                                         xmlns: "http://www.w3.org/2000/svg",
@@ -28834,7 +29007,7 @@ function QuillTable({
                                         fill: theme?.chartLabelFontFamily || theme?.fontFamily,
                                         height: "16px",
                                         width: "16px",
-                                        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                                        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                                           "path",
                                           {
                                             fillRule: "evenodd",
@@ -28846,7 +29019,7 @@ function QuillTable({
                                     )
                                   }
                                 ),
-                                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                                   "button",
                                   {
                                     onClick: (e) => {
@@ -28858,7 +29031,7 @@ function QuillTable({
                                       border: "none",
                                       background: "transparent"
                                     },
-                                    children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                                       "svg",
                                       {
                                         xmlns: "http://www.w3.org/2000/svg",
@@ -28866,7 +29039,7 @@ function QuillTable({
                                         fill: theme?.chartLabelFontFamily || theme?.fontFamily,
                                         height: "16px",
                                         width: "16px",
-                                        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                                        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                                           "path",
                                           {
                                             fillRule: "evenodd",
@@ -28878,7 +29051,7 @@ function QuillTable({
                                     )
                                   }
                                 ),
-                                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { style: { width: 12 } })
+                                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { style: { width: 12 } })
                               ]
                             }
                           )
@@ -29055,12 +29228,12 @@ var format_wo_yyyy2 = (value) => {
 var import_date_fns10 = require("date-fns");
 
 // src/components/Chart/ChartTooltipFrame.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function ChartTooltipFrame2({
   children,
   theme
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "div",
     {
       style: {
@@ -29080,7 +29253,7 @@ function ChartTooltipFrame2({
 }
 
 // src/components/Chart/ChartTooltipRow.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function ChartTooltipRow2({
   value,
   name: name2,
@@ -29088,7 +29261,7 @@ function ChartTooltipRow2({
   theme,
   hideDot = false
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "div",
     {
       style: {
@@ -29101,8 +29274,8 @@ function ChartTooltipRow2({
         paddingBottom: 2
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { style: { display: "flex", alignItems: "center" }, children: [
-          !hideDot && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { style: { display: "flex", alignItems: "center" }, children: [
+          !hideDot && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             "span",
             {
               style: {
@@ -29119,7 +29292,7 @@ function ChartTooltipRow2({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             "p",
             {
               style: {
@@ -29134,7 +29307,7 @@ function ChartTooltipRow2({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           "p",
           {
             style: {
@@ -29158,14 +29331,14 @@ function ChartTooltipRow2({
 }
 
 // src/components/Chart/ChartTooltipGroup.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function ChartTooltipGroup({
   name: name2,
   items,
   theme,
   hideDot = false
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "div",
     {
       style: {
@@ -29177,7 +29350,7 @@ function ChartTooltipGroup({
         marginRight: "24px"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           "p",
           {
             style: {
@@ -29195,7 +29368,7 @@ function ChartTooltipGroup({
             children: name2.replaceAll("_", " ").toLowerCase()
           }
         ),
-        items.map(({ color: color2, value, name: name3 }, idx) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        items.map(({ color: color2, value, name: name3 }, idx) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           ChartTooltipRow2,
           {
             value,
@@ -29213,9 +29386,9 @@ function ChartTooltipGroup({
 
 // src/components/Chart/ChartTooltip.tsx
 init_dates();
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var ChartTooltipPrimary = (props) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(ChartTooltipFrame2, { theme: props.theme, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var ChartTooltipPrimary = (props) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(ChartTooltipFrame2, { theme: props.theme, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     "div",
     {
       style: {
@@ -29233,7 +29406,7 @@ var ChartTooltipPrimary = (props) => /* @__PURE__ */ (0, import_jsx_runtime32.js
         paddingTop: "8px",
         paddingBottom: "8px"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         "p",
         {
           style: {
@@ -29252,7 +29425,7 @@ var ChartTooltipPrimary = (props) => /* @__PURE__ */ (0, import_jsx_runtime32.js
       )
     }
   ),
-  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     "div",
     {
       style: {
@@ -29261,7 +29434,7 @@ var ChartTooltipPrimary = (props) => /* @__PURE__ */ (0, import_jsx_runtime32.js
         paddingTop: "8px",
         paddingBottom: "8px"
       },
-      children: props.payload.map(({ color: color2, value, name: name2 }, idx) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      children: props.payload.map(({ color: color2, value, name: name2 }, idx) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         ChartTooltipRow2,
         {
           value: props.valueFormatter(value, name2),
@@ -29342,8 +29515,8 @@ function ChartTooltipComparison(props) {
     presetLabel,
     convertComparisonRange(presetLabel, comparisonLabel)
   ) ?? {};
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(ChartTooltipFrame2, { theme: props.theme, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(ChartTooltipFrame2, { theme: props.theme, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "div",
       {
         style: {
@@ -29361,7 +29534,7 @@ function ChartTooltipComparison(props) {
           paddingTop: "8px",
           paddingBottom: "8px"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "p",
           {
             style: {
@@ -29381,7 +29554,7 @@ function ChartTooltipComparison(props) {
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "div",
       {
         style: {
@@ -29393,7 +29566,7 @@ function ChartTooltipComparison(props) {
           flexDirection: "column",
           gap: 4
         },
-        children: Object.entries(newRows).map(([key, value], index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        children: Object.entries(newRows).map(([key, value], index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           ChartTooltipGroup,
           {
             name: key,
@@ -29409,8 +29582,8 @@ function ChartTooltipComparison(props) {
 }
 function ChartTooltip(props) {
   if (!props.active || !props.payload) return null;
-  if (props.comparison) return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartTooltipComparison, { ...props });
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartTooltipPrimary, { ...props });
+  if (props.comparison) return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartTooltipComparison, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartTooltipPrimary, { ...props });
 }
 
 // src/utils/getDomain.ts
@@ -29486,7 +29659,7 @@ var import_react15 = require("react");
 
 // src/components/Chart/CustomReferenceLine.tsx
 init_constants();
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function CustomReferenceLine({
   xAxisMap,
   yAxisMap,
@@ -29503,8 +29676,8 @@ function CustomReferenceLine({
   const y1 = yScale(referenceLine[0]);
   const y2 = yScale(referenceLine[1]);
   const textY = yScale(referenceLine[referenceLine.length - 1]) - 5;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-    referenceLine.length === 2 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+    referenceLine.length === 2 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "line",
       {
         x1: xMin,
@@ -29520,7 +29693,7 @@ function CustomReferenceLine({
     referenceLine.length > 2 && referenceLine.slice(1).map((point, index) => {
       const x1 = xMin + (xMax - xMin) * (index / (referenceLine.length - 1));
       const x2 = xMin + (xMax - xMin) * ((index + 1) / (referenceLine.length - 1));
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         "line",
         {
           x1,
@@ -29535,7 +29708,7 @@ function CustomReferenceLine({
         index
       );
     }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
       "text",
       {
         x: xMax - 5,
@@ -29558,56 +29731,6 @@ function CustomReferenceLine({
   ] });
 }
 
-// src/components/Chart/CustomLegend.tsx
-var import_react14 = require("react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var RenderLegend = (props) => {
-  const { payload } = props;
-  const [theme] = (0, import_react14.useContext)(ThemeContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { style: { display: "flex", justifyContent: "flex-start" }, children: payload.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        marginRight: "1rem"
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-          "svg",
-          {
-            style: { marginRight: "0.5rem" },
-            width: "16",
-            height: "16",
-            viewBox: "0 0 16 16",
-            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-              "rect",
-              {
-                width: "16",
-                height: "16",
-                rx: "3",
-                fill: payload?.[index]?.color
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-          "span",
-          {
-            style: {
-              color: theme?.secondaryTextColor,
-              fontFamily: theme?.fontFamily,
-              fontSize: theme?.fontSizeMedium || "14px"
-            },
-            children: entry.value
-          }
-        )
-      ]
-    },
-    `legend-${index}`
-  )) });
-};
-
 // src/components/Chart/LineChart.tsx
 var import_jsx_runtime35 = require("react/jsx-runtime");
 function createLineForEmptyChart(yAxisFields, dateFilter, xAxisField, xAxisFormat) {
@@ -32760,6 +32883,7 @@ var constructReportFromItem = (item) => {
     rows: [],
     columns: [],
     chartType: item.chartType,
+    showLegend: item.showLegend,
     dateField: item.dateField,
     pivot: item.pivot,
     xAxisLabel: item.xAxisLabel,
@@ -36522,7 +36646,7 @@ var ChartDisplay = ({
   onClickChartElement,
   overrideTheme,
   referenceLines,
-  showLegend = false,
+  showLegend,
   tableRowsLoading = false
 }) => {
   const { downloadCSV: downloadCSV2 } = useExport(reportId);
@@ -36555,6 +36679,7 @@ var ChartDisplay = ({
     }
     return void 0;
   }, [config, specificReportFilters, specificDashboardFilters]);
+  const resolvedShowLegend = showLegend !== void 0 ? showLegend : config?.showLegend ?? false;
   const [page, setPage] = (0, import_react30.useState)(0);
   if (loading) {
     return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className, style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(LoadingComponent, {}) });
@@ -36590,7 +36715,7 @@ var ChartDisplay = ({
         colorMap,
         onClickChartElement,
         yAxisFields: config?.yAxisFields,
-        showLegend
+        showLegend: resolvedShowLegend
       }
     );
   }
@@ -36664,7 +36789,7 @@ var ChartDisplay = ({
         onClickChartElement,
         dateFilter: !hideDateRangeFilter ? dateFilter : void 0,
         referenceLines,
-        showLegend
+        showLegend: resolvedShowLegend
       }
     );
   }
@@ -36691,7 +36816,7 @@ var ChartDisplay = ({
         onClickChartElement,
         dateFilter: !hideDateRangeFilter ? dateFilter : void 0,
         referenceLines,
-        showLegend,
+        showLegend: resolvedShowLegend,
         stackedMode: true
       }
     );
@@ -36835,7 +36960,7 @@ var ChartDisplay = ({
       onClickChartElement,
       dateFilter: !hideDateRangeFilter ? dateFilter : void 0,
       referenceLines,
-      showLegend
+      showLegend: resolvedShowLegend
     }
   );
 };
@@ -44186,6 +44311,7 @@ function ChartBuilder({
     ],
     xAxisLabel: "",
     chartType: firstNumberColumn ? "line" : "table",
+    showLegend: report?.showLegend ?? false,
     pivot: null,
     dateField: defaultDateField,
     template: true,
@@ -46151,6 +46277,19 @@ function ChartBuilder({
                             ) })
                           ] })
                         ] }),
+                        ["line", "column", "stacked", "pie"].includes(
+                          (chartData.chartType ?? "").toLowerCase()
+                        ) && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(SubHeaderComponent, { label: "Legend" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ChartBuilderInputRowContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+                            CheckboxComponent,
+                            {
+                              isChecked: !!formData.showLegend,
+                              label: "Show legend",
+                              onChange: () => handleChange(!formData.showLegend, "showLegend")
+                            }
+                          ) })
+                        ] }),
                         client?.featureFlags?.["referenceLines"] && (chartData.chartType === "line" || chartData.chartType === "column") && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { children: [
                           /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(SubHeaderComponent, { label: "Reference Lines" }),
                           /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(ChartBuilderInputColumnContainer, { children: [
@@ -54108,7 +54247,7 @@ function StaticChart(props) {
     reportId,
     onClickChartElement,
     containerStyle,
-    showLegend = false,
+    showLegend,
     className
   } = props;
   const {