@andreagiugni/tailwind-dashboard-ui 1.0.10 → 1.0.12

package/README.md

@@ -221,7 +221,7 @@ in [Peer dependencies](#peer-dependencies)).
 
 | Component | Key props |
 |---|---|
-| `BarChart` | `series`, `categories`, `colors?`, `height?`, `options?` (merged over defaults) |
+| `BarChart` | `series`, `categories`, `colors?`, `height?`, `horizontal?`, `showBarValues?`, `showBarPercentages?`, `percentageMode?`, `barValueFormatter?`, `barPercentageFormatter?`, `options?` (merged over defaults) |
 | `LineChart` | `series`, `categories`, `colors?`, `height?`, `options?` |
 | `Calendar` | `events`, `onEventClick`, `onDateSelect`, `initialView` |
 | `Editor` (WYSIWYG) | `content`, `onChange(html)`, `placeholder?`, `editable?`, `toolbar?`, `rows?` — Tiptap-powered, customizable toolbar |

package/dist/chunk-VEQ43DHE.cjs

@@ -0,0 +1,340 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var defaultOptions = {
+  colors: ["#465fff"],
+  chart: {
+    fontFamily: "Outfit, sans-serif",
+    type: "bar",
+    height: 180,
+    toolbar: {
+      show: false
+    }
+  },
+  plotOptions: {
+    bar: {
+      horizontal: false,
+      columnWidth: "39%",
+      borderRadius: 5,
+      borderRadiusApplication: "end"
+    }
+  },
+  dataLabels: {
+    enabled: false
+  },
+  // No transparent stroke around the columns: it shrinks and shifts the
+  // painted bar inside its allocated slot, so the hover highlight band
+  // (crosshairs width "barWidth" = the allocated width) would render wider
+  // than — and offset from — the visible bar.
+  stroke: {
+    show: false
+  },
+  xaxis: {
+    categories: [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "May",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dec"
+    ],
+    axisBorder: {
+      show: false
+    },
+    axisTicks: {
+      show: false
+    },
+    // Match the hover highlight band to the bar width (the default band spans
+    // the whole category slot, looking ~3x wider than the 39% columns).
+    crosshairs: {
+      width: "barWidth"
+    }
+  },
+  legend: {
+    show: true,
+    position: "top",
+    horizontalAlign: "left",
+    fontFamily: "Outfit",
+    // Rounded, border-less swatches that echo the column styling. ApexCharts
+    // sets the marker span's `color` to the series color, so `currentColor`
+    // picks it up; `customHTML` lets us round the corners (the built-in shapes
+    // are sharp SVG paths that CSS border-radius can't touch).
+    markers: {
+      size: 7,
+      strokeWidth: 0,
+      customHTML: () => '<span style="display:block;height:100%;width:100%;border-radius:3px;background:currentColor"></span>'
+    }
+  },
+  yaxis: {
+    title: {
+      text: void 0
+    }
+  },
+  grid: {
+    yaxis: {
+      lines: {
+        show: true
+      }
+    }
+  },
+  fill: {
+    opacity: 1
+  },
+  tooltip: {
+    x: {
+      show: false
+    },
+    y: {
+      formatter: (val) => `${val}`
+    }
+  }
+};
+var defaultSeries = [
+  {
+    name: "Sales",
+    data: [168, 385, 201, 298, 187, 195, 291, 110, 215, 390, 280, 112]
+  }
+];
+var horizontalGridOptions = {
+  borderColor: "transparent",
+  xaxis: {
+    lines: {
+      show: false
+    }
+  },
+  yaxis: {
+    lines: {
+      show: false
+    }
+  }
+};
+function mergeGridOptions(base, override) {
+  return {
+    ...base,
+    ...override,
+    xaxis: {
+      ...base?.xaxis,
+      ...override?.xaxis,
+      lines: {
+        ...base?.xaxis?.lines,
+        ...override?.xaxis?.lines
+      }
+    },
+    yaxis: {
+      ...base?.yaxis,
+      ...override?.yaxis,
+      lines: {
+        ...base?.yaxis?.lines,
+        ...override?.yaxis?.lines
+      }
+    }
+  };
+}
+function getDataValue(value) {
+  if (typeof value === "number") return value;
+  if (Array.isArray(value) && typeof value[1] === "number") return value[1];
+  if (value && typeof value === "object" && "y" in value) {
+    const y = value.y;
+    return typeof y === "number" ? y : null;
+  }
+  return null;
+}
+function getValueMatrix(series) {
+  return series.map((item) => item.data.map((value) => getDataValue(value) ?? 0));
+}
+function getSeriesTotal(matrix) {
+  return matrix.reduce(
+    (seriesTotal, data) => seriesTotal + data.reduce((total, value) => total + value, 0),
+    0
+  );
+}
+function getCategoryTotal(matrix, dataPointIndex) {
+  return matrix.reduce((total, data) => total + (data[dataPointIndex] ?? 0), 0);
+}
+function mergeDataLabels(base, override, generated) {
+  return {
+    ...base,
+    ...override,
+    ...generated,
+    style: {
+      ...base?.style,
+      ...override?.style,
+      ...generated?.style
+    },
+    background: {
+      ...base?.background,
+      ...override?.background,
+      ...generated?.background
+    }
+  };
+}
+function mergeAnnotations(override, generated) {
+  if (!override && !generated) return void 0;
+  return {
+    ...override,
+    ...generated,
+    points: [...override?.points ?? [], ...generated?.points ?? []]
+  };
+}
+var BarChart = ({
+  series,
+  categories,
+  colors,
+  height,
+  horizontal,
+  showBarValues = false,
+  showBarPercentages = false,
+  percentageMode = "total",
+  barValueFormatter,
+  barPercentageFormatter,
+  options
+}) => {
+  const [Chart, setChart] = React__default.default.useState(null);
+  const effectiveSeries = series ?? defaultSeries;
+  const effectiveCategories = categories ?? options?.xaxis?.categories;
+  const valueMatrix = getValueMatrix(effectiveSeries);
+  const seriesTotal = getSeriesTotal(valueMatrix);
+  const isHorizontal = horizontal ?? options?.plotOptions?.bar?.horizontal === true;
+  const hasGeneratedLabels = showBarValues || showBarPercentages;
+  const baseGridOptions = isHorizontal ? mergeGridOptions(defaultOptions.grid, horizontalGridOptions) : defaultOptions.grid;
+  const getLabelContext = (seriesIndex, dataPointIndex, total) => ({
+    seriesIndex,
+    dataPointIndex,
+    seriesName: effectiveSeries[seriesIndex]?.name,
+    category: effectiveCategories?.[dataPointIndex],
+    total
+  });
+  const generatedDataLabels = hasGeneratedLabels ? {
+    enabled: true,
+    textAnchor: "middle",
+    offsetX: 0,
+    offsetY: 0,
+    background: {
+      enabled: false
+    },
+    style: {
+      fontSize: "12px",
+      fontWeight: 600,
+      colors: [showBarPercentages ? "#ffffff" : "#344054"]
+    },
+    formatter: (value, opts) => {
+      const seriesIndex = opts?.seriesIndex ?? 0;
+      const dataPointIndex = opts?.dataPointIndex ?? 0;
+      const numericValue = typeof value === "number" ? value : valueMatrix[seriesIndex]?.[dataPointIndex] ?? 0;
+      const total = percentageMode === "category" ? getCategoryTotal(valueMatrix, dataPointIndex) : seriesTotal;
+      const context = getLabelContext(seriesIndex, dataPointIndex, total);
+      if (showBarPercentages) {
+        const percentage = total > 0 ? numericValue / total * 100 : 0;
+        return barPercentageFormatter ? barPercentageFormatter(percentage, numericValue, context) : `${Math.round(percentage)}%`;
+      }
+      return barValueFormatter ? barValueFormatter(numericValue, context) : `${numericValue}`;
+    }
+  } : void 0;
+  const generatedAnnotations = isHorizontal && showBarValues ? {
+    points: effectiveSeries.flatMap(
+      (item, seriesIndex) => item.data.map((dataPoint, dataPointIndex) => {
+        const value = getDataValue(dataPoint) ?? 0;
+        const total = percentageMode === "category" ? getCategoryTotal(valueMatrix, dataPointIndex) : seriesTotal;
+        const context = getLabelContext(seriesIndex, dataPointIndex, total);
+        return {
+          x: value,
+          y: dataPointIndex,
+          seriesIndex,
+          marker: {
+            size: 0
+          },
+          label: {
+            text: barValueFormatter ? barValueFormatter(value, context) : `${value}`,
+            borderWidth: 0,
+            offsetY: -12,
+            style: {
+              background: "transparent",
+              color: "#344054",
+              fontSize: "12px",
+              fontWeight: 600,
+              padding: {
+                left: 0,
+                right: 0,
+                top: 0,
+                bottom: 0
+              }
+            }
+          }
+        };
+      })
+    )
+  } : void 0;
+  const mergedOptions = {
+    ...defaultOptions,
+    ...options,
+    colors: colors ?? options?.colors ?? defaultOptions.colors,
+    chart: {
+      ...defaultOptions.chart,
+      ...options?.chart,
+      height: height ?? options?.chart?.height ?? defaultOptions.chart?.height
+    },
+    plotOptions: {
+      ...defaultOptions.plotOptions,
+      ...options?.plotOptions,
+      bar: {
+        ...defaultOptions.plotOptions?.bar,
+        ...options?.plotOptions?.bar,
+        horizontal: isHorizontal,
+        ...hasGeneratedLabels && {
+          dataLabels: {
+            ...options?.plotOptions?.bar?.dataLabels,
+            position: showBarPercentages ? "center" : "top"
+          }
+        }
+      }
+    },
+    dataLabels: mergeDataLabels(
+      defaultOptions.dataLabels,
+      options?.dataLabels,
+      generatedDataLabels
+    ),
+    xaxis: {
+      ...defaultOptions.xaxis,
+      ...options?.xaxis,
+      categories: categories ?? options?.xaxis?.categories ?? defaultOptions.xaxis?.categories
+    },
+    grid: mergeGridOptions(baseGridOptions, options?.grid),
+    annotations: mergeAnnotations(options?.annotations, generatedAnnotations)
+  };
+  React__default.default.useEffect(() => {
+    let isMounted = true;
+    import('react-apexcharts').then((module) => {
+      if (isMounted) setChart(() => module.default);
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+  if (!Chart) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Chart,
+    {
+      options: mergedOptions,
+      series: effectiveSeries,
+      type: "bar",
+      height: height ?? 180
+    }
+  );
+};
+
+exports.BarChart = BarChart;
+//# sourceMappingURL=chunk-VEQ43DHE.cjs.map
+//# sourceMappingURL=chunk-VEQ43DHE.cjs.map

package/dist/chunk-VEQ43DHE.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Charts/BarChart.tsx"],"names":["React","jsx"],"mappings":"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","file":"chunk-VEQ43DHE.cjs","sourcesContent":["\"use client\";\nimport React from \"react\";\nimport type { ApexOptions } from \"apexcharts\";\n\ntype ReactApexChartProps = {\n  options: ApexOptions;\n  series: ApexAxisChartSeries;\n  type: \"bar\" | \"area\";\n  height: number;\n};\ntype ReactApexChartComponent = React.ComponentType<ReactApexChartProps>;\n\nexport interface BarChartProps {\n  series?: ApexAxisChartSeries;\n  categories?: string[];\n  colors?: string[];\n  height?: number;\n  horizontal?: boolean;\n  showBarValues?: boolean;\n  showBarPercentages?: boolean;\n  percentageMode?: \"total\" | \"category\";\n  barValueFormatter?: (value: number, context: BarChartLabelContext) => string;\n  barPercentageFormatter?: (\n    percentage: number,\n    value: number,\n    context: BarChartLabelContext\n  ) => string;\n  options?: ApexOptions;\n}\n\nexport interface BarChartLabelContext {\n  seriesIndex: number;\n  dataPointIndex: number;\n  seriesName?: string;\n  category?: string;\n  total: number;\n}\n\nconst defaultOptions: ApexOptions = {\n  colors: [\"#465fff\"],\n  chart: {\n    fontFamily: \"Outfit, sans-serif\",\n    type: \"bar\",\n    height: 180,\n    toolbar: {\n      show: false,\n    },\n  },\n  plotOptions: {\n    bar: {\n      horizontal: false,\n      columnWidth: \"39%\",\n      borderRadius: 5,\n      borderRadiusApplication: \"end\",\n    },\n  },\n  dataLabels: {\n    enabled: false,\n  },\n  // No transparent stroke around the columns: it shrinks and shifts the\n  // painted bar inside its allocated slot, so the hover highlight band\n  // (crosshairs width \"barWidth\" = the allocated width) would render wider\n  // than — and offset from — the visible bar.\n  stroke: {\n    show: false,\n  },\n  xaxis: {\n    categories: [\n      \"Jan\",\n      \"Feb\",\n      \"Mar\",\n      \"Apr\",\n      \"May\",\n      \"Jun\",\n      \"Jul\",\n      \"Aug\",\n      \"Sep\",\n      \"Oct\",\n      \"Nov\",\n      \"Dec\",\n    ],\n    axisBorder: {\n      show: false,\n    },\n    axisTicks: {\n      show: false,\n    },\n    // Match the hover highlight band to the bar width (the default band spans\n    // the whole category slot, looking ~3x wider than the 39% columns).\n    crosshairs: {\n      width: \"barWidth\",\n    },\n  },\n  legend: {\n    show: true,\n    position: \"top\",\n    horizontalAlign: \"left\",\n    fontFamily: \"Outfit\",\n    // Rounded, border-less swatches that echo the column styling. ApexCharts\n    // sets the marker span's `color` to the series color, so `currentColor`\n    // picks it up; `customHTML` lets us round the corners (the built-in shapes\n    // are sharp SVG paths that CSS border-radius can't touch).\n    markers: {\n      size: 7,\n      strokeWidth: 0,\n      customHTML: () =>\n        '<span style=\"display:block;height:100%;width:100%;border-radius:3px;background:currentColor\"></span>',\n    },\n  },\n  yaxis: {\n    title: {\n      text: undefined,\n    },\n  },\n  grid: {\n    yaxis: {\n      lines: {\n        show: true,\n      },\n    },\n  },\n  fill: {\n    opacity: 1,\n  },\n  tooltip: {\n    x: {\n      show: false,\n    },\n    y: {\n      formatter: (val: number) => `${val}`,\n    },\n  },\n};\n\nconst defaultSeries: ApexAxisChartSeries = [\n  {\n    name: \"Sales\",\n    data: [168, 385, 201, 298, 187, 195, 291, 110, 215, 390, 280, 112],\n  },\n];\n\nconst horizontalGridOptions: ApexOptions[\"grid\"] = {\n  borderColor: \"transparent\",\n  xaxis: {\n    lines: {\n      show: false,\n    },\n  },\n  yaxis: {\n    lines: {\n      show: false,\n    },\n  },\n};\n\nfunction mergeGridOptions(\n  base: ApexOptions[\"grid\"],\n  override: ApexOptions[\"grid\"]\n): ApexOptions[\"grid\"] {\n  return {\n    ...base,\n    ...override,\n    xaxis: {\n      ...base?.xaxis,\n      ...override?.xaxis,\n      lines: {\n        ...base?.xaxis?.lines,\n        ...override?.xaxis?.lines,\n      },\n    },\n    yaxis: {\n      ...base?.yaxis,\n      ...override?.yaxis,\n      lines: {\n        ...base?.yaxis?.lines,\n        ...override?.yaxis?.lines,\n      },\n    },\n  };\n}\n\nfunction getDataValue(value: unknown): number | null {\n  if (typeof value === \"number\") return value;\n  if (Array.isArray(value) && typeof value[1] === \"number\") return value[1];\n  if (value && typeof value === \"object\" && \"y\" in value) {\n    const y = (value as { y: unknown }).y;\n    return typeof y === \"number\" ? y : null;\n  }\n  return null;\n}\n\nfunction getValueMatrix(series: ApexAxisChartSeries): number[][] {\n  return series.map((item) => item.data.map((value) => getDataValue(value) ?? 0));\n}\n\nfunction getSeriesTotal(matrix: number[][]): number {\n  return matrix.reduce(\n    (seriesTotal, data) => seriesTotal + data.reduce((total, value) => total + value, 0),\n    0\n  );\n}\n\nfunction getCategoryTotal(matrix: number[][], dataPointIndex: number): number {\n  return matrix.reduce((total, data) => total + (data[dataPointIndex] ?? 0), 0);\n}\n\nfunction mergeDataLabels(\n  base: ApexOptions[\"dataLabels\"],\n  override: ApexOptions[\"dataLabels\"],\n  generated: ApexOptions[\"dataLabels\"]\n): ApexOptions[\"dataLabels\"] {\n  return {\n    ...base,\n    ...override,\n    ...generated,\n    style: {\n      ...base?.style,\n      ...override?.style,\n      ...generated?.style,\n    },\n    background: {\n      ...base?.background,\n      ...override?.background,\n      ...generated?.background,\n    },\n  };\n}\n\nfunction mergeAnnotations(\n  override: ApexOptions[\"annotations\"],\n  generated: ApexOptions[\"annotations\"]\n): ApexOptions[\"annotations\"] | undefined {\n  if (!override && !generated) return undefined;\n  return {\n    ...override,\n    ...generated,\n    points: [...(override?.points ?? []), ...(generated?.points ?? [])],\n  };\n}\n\nexport const BarChart: React.FC<BarChartProps> = ({\n  series,\n  categories,\n  colors,\n  height,\n  horizontal,\n  showBarValues = false,\n  showBarPercentages = false,\n  percentageMode = \"total\",\n  barValueFormatter,\n  barPercentageFormatter,\n  options,\n}) => {\n  const [Chart, setChart] = React.useState<ReactApexChartComponent | null>(null);\n  const effectiveSeries = series ?? defaultSeries;\n  const effectiveCategories =\n    categories ?? (options?.xaxis?.categories as string[] | undefined);\n  const valueMatrix = getValueMatrix(effectiveSeries);\n  const seriesTotal = getSeriesTotal(valueMatrix);\n  const isHorizontal = horizontal ?? (options?.plotOptions?.bar?.horizontal === true);\n  const hasGeneratedLabels = showBarValues || showBarPercentages;\n  const baseGridOptions = isHorizontal\n    ? mergeGridOptions(defaultOptions.grid, horizontalGridOptions)\n    : defaultOptions.grid;\n  const getLabelContext = (\n    seriesIndex: number,\n    dataPointIndex: number,\n    total: number\n  ): BarChartLabelContext => ({\n    seriesIndex,\n    dataPointIndex,\n    seriesName: effectiveSeries[seriesIndex]?.name,\n    category: effectiveCategories?.[dataPointIndex],\n    total,\n  });\n  const generatedDataLabels: ApexOptions[\"dataLabels\"] | undefined = hasGeneratedLabels\n    ? {\n        enabled: true,\n        textAnchor: \"middle\",\n        offsetX: 0,\n        offsetY: 0,\n        background: {\n          enabled: false,\n        },\n        style: {\n          fontSize: \"12px\",\n          fontWeight: 600,\n          colors: [showBarPercentages ? \"#ffffff\" : \"#344054\"],\n        },\n        formatter: (value, opts) => {\n          const seriesIndex = opts?.seriesIndex ?? 0;\n          const dataPointIndex = opts?.dataPointIndex ?? 0;\n          const numericValue =\n            typeof value === \"number\"\n              ? value\n              : valueMatrix[seriesIndex]?.[dataPointIndex] ?? 0;\n          const total =\n            percentageMode === \"category\"\n              ? getCategoryTotal(valueMatrix, dataPointIndex)\n              : seriesTotal;\n          const context = getLabelContext(seriesIndex, dataPointIndex, total);\n\n          if (showBarPercentages) {\n            const percentage = total > 0 ? (numericValue / total) * 100 : 0;\n            return barPercentageFormatter\n              ? barPercentageFormatter(percentage, numericValue, context)\n              : `${Math.round(percentage)}%`;\n          }\n\n          return barValueFormatter\n            ? barValueFormatter(numericValue, context)\n            : `${numericValue}`;\n        },\n      }\n    : undefined;\n  const generatedAnnotations: ApexOptions[\"annotations\"] | undefined =\n    isHorizontal && showBarValues\n      ? {\n          points: effectiveSeries.flatMap((item, seriesIndex) =>\n            item.data.map((dataPoint, dataPointIndex) => {\n              const value = getDataValue(dataPoint) ?? 0;\n              const total =\n                percentageMode === \"category\"\n                  ? getCategoryTotal(valueMatrix, dataPointIndex)\n                  : seriesTotal;\n              const context = getLabelContext(seriesIndex, dataPointIndex, total);\n              return {\n                x: value,\n                y: dataPointIndex,\n                seriesIndex,\n                marker: {\n                  size: 0,\n                },\n                label: {\n                  text: barValueFormatter ? barValueFormatter(value, context) : `${value}`,\n                  borderWidth: 0,\n                  offsetY: -12,\n                  style: {\n                    background: \"transparent\",\n                    color: \"#344054\",\n                    fontSize: \"12px\",\n                    fontWeight: 600,\n                    padding: {\n                      left: 0,\n                      right: 0,\n                      top: 0,\n                      bottom: 0,\n                    },\n                  },\n                },\n              };\n            })\n          ),\n        }\n      : undefined;\n  const mergedOptions: ApexOptions = {\n    ...defaultOptions,\n    ...options,\n    colors: colors ?? options?.colors ?? defaultOptions.colors,\n    chart: {\n      ...defaultOptions.chart,\n      ...options?.chart,\n      height: height ?? options?.chart?.height ?? defaultOptions.chart?.height,\n    },\n    plotOptions: {\n      ...defaultOptions.plotOptions,\n      ...options?.plotOptions,\n      bar: {\n        ...defaultOptions.plotOptions?.bar,\n        ...options?.plotOptions?.bar,\n        horizontal: isHorizontal,\n        ...(hasGeneratedLabels && {\n          dataLabels: {\n            ...options?.plotOptions?.bar?.dataLabels,\n            position: showBarPercentages ? \"center\" : \"top\",\n          },\n        }),\n      },\n    },\n    dataLabels: mergeDataLabels(\n      defaultOptions.dataLabels,\n      options?.dataLabels,\n      generatedDataLabels\n    ),\n    xaxis: {\n      ...defaultOptions.xaxis,\n      ...options?.xaxis,\n      categories:\n        categories ??\n        options?.xaxis?.categories ??\n        defaultOptions.xaxis?.categories,\n    },\n    grid: mergeGridOptions(baseGridOptions, options?.grid),\n    annotations: mergeAnnotations(options?.annotations, generatedAnnotations),\n  };\n\n  React.useEffect(() => {\n    let isMounted = true;\n\n    import(\"react-apexcharts\").then((module) => {\n      if (isMounted) setChart(() => module.default as ReactApexChartComponent);\n    });\n\n    return () => {\n      isMounted = false;\n    };\n  }, []);\n\n  if (!Chart) return null;\n\n  return (\n    <Chart\n      options={mergedOptions}\n      series={effectiveSeries}\n      type=\"bar\"\n      height={height ?? 180}\n    />\n  );\n};\n"]}

package/dist/{chunk-NWIOJGF7.js → chunk-W6E275RF.js}

@@ -1,5 +1,5 @@
 "use client";
-import Chart from 'react-apexcharts';
+import React from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 var defaultOptions = {
@@ -123,6 +123,7 @@ var LineChart = ({
   height,
   options
 }) => {
+  const [Chart, setChart] = React.useState(null);
   const mergedOptions = {
     ...defaultOptions,
     ...options,
@@ -138,6 +139,16 @@ var LineChart = ({
       categories: categories ?? options?.xaxis?.categories ?? defaultOptions.xaxis?.categories
     }
   };
+  React.useEffect(() => {
+    let isMounted = true;
+    import('react-apexcharts').then((module) => {
+      if (isMounted) setChart(() => module.default);
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+  if (!Chart) return null;
   return /* @__PURE__ */ jsx(
     Chart,
     {
@@ -150,5 +161,5 @@ var LineChart = ({
 };
 
 export { LineChart };
-//# sourceMappingURL=chunk-NWIOJGF7.js.map
-//# sourceMappingURL=chunk-NWIOJGF7.js.map
+//# sourceMappingURL=chunk-W6E275RF.js.map
+//# sourceMappingURL=chunk-W6E275RF.js.map

package/dist/chunk-W6E275RF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Charts/LineChart.tsx"],"names":[],"mappings":"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","file":"chunk-W6E275RF.js","sourcesContent":["\"use client\";\nimport React from \"react\";\nimport type { ApexOptions } from \"apexcharts\";\n\ntype ReactApexChartProps = {\n  options: ApexOptions;\n  series: ApexAxisChartSeries;\n  type: \"bar\" | \"area\";\n  height: number;\n};\ntype ReactApexChartComponent = React.ComponentType<ReactApexChartProps>;\n\nexport interface LineChartProps {\n  series?: ApexAxisChartSeries;\n  categories?: string[];\n  colors?: string[];\n  height?: number;\n  options?: ApexOptions;\n}\n\nconst defaultOptions: ApexOptions = {\n  legend: {\n    show: false,\n    position: \"top\",\n    horizontalAlign: \"left\",\n    // Rounded, border-less swatches (visible when the legend is enabled).\n    // ApexCharts sets the marker span's `color` to the series color, so\n    // `currentColor` picks it up; `customHTML` rounds the corners.\n    markers: {\n      size: 7,\n      strokeWidth: 0,\n      customHTML: () =>\n        '<span style=\"display:block;height:100%;width:100%;border-radius:3px;background:currentColor\"></span>',\n    },\n  },\n  colors: [\"#465FFF\", \"#9CB9FF\"],\n  chart: {\n    fontFamily: \"Outfit, sans-serif\",\n    height: 310,\n    type: \"line\",\n    toolbar: {\n      show: false,\n    },\n  },\n  stroke: {\n    curve: \"straight\",\n    width: [2, 2],\n  },\n  fill: {\n    type: \"gradient\",\n    gradient: {\n      opacityFrom: 0.55,\n      opacityTo: 0,\n    },\n  },\n  markers: {\n    size: 0,\n    strokeColors: \"#fff\",\n    strokeWidth: 2,\n    hover: {\n      size: 6,\n    },\n  },\n  grid: {\n    xaxis: {\n      lines: {\n        show: false,\n      },\n    },\n    yaxis: {\n      lines: {\n        show: true,\n      },\n    },\n  },\n  dataLabels: {\n    enabled: false,\n  },\n  tooltip: {\n    enabled: true,\n    x: {\n      format: \"dd MMM yyyy\",\n    },\n  },\n  xaxis: {\n    type: \"category\",\n    categories: [\n      \"Jan\",\n      \"Feb\",\n      \"Mar\",\n      \"Apr\",\n      \"May\",\n      \"Jun\",\n      \"Jul\",\n      \"Aug\",\n      \"Sep\",\n      \"Oct\",\n      \"Nov\",\n      \"Dec\",\n    ],\n    axisBorder: {\n      show: false,\n    },\n    axisTicks: {\n      show: false,\n    },\n    tooltip: {\n      enabled: false,\n    },\n  },\n  yaxis: {\n    labels: {\n      style: {\n        fontSize: \"12px\",\n        colors: [\"#6B7280\"],\n      },\n    },\n    title: {\n      text: \"\",\n      style: {\n        fontSize: \"0px\",\n      },\n    },\n  },\n};\n\nconst defaultSeries: ApexAxisChartSeries = [\n  {\n    name: \"Sales\",\n    data: [180, 190, 170, 160, 175, 165, 170, 205, 230, 210, 240, 235],\n  },\n  {\n    name: \"Revenue\",\n    data: [40, 30, 50, 40, 55, 40, 70, 100, 110, 120, 150, 140],\n  },\n];\n\nexport const LineChart: React.FC<LineChartProps> = ({\n  series,\n  categories,\n  colors,\n  height,\n  options,\n}) => {\n  const [Chart, setChart] = React.useState<ReactApexChartComponent | null>(null);\n  const mergedOptions: ApexOptions = {\n    ...defaultOptions,\n    ...options,\n    colors: colors ?? options?.colors ?? defaultOptions.colors,\n    chart: {\n      ...defaultOptions.chart,\n      ...options?.chart,\n      height: height ?? options?.chart?.height ?? defaultOptions.chart?.height,\n    },\n    xaxis: {\n      ...defaultOptions.xaxis,\n      ...options?.xaxis,\n      categories:\n        categories ??\n        options?.xaxis?.categories ??\n        defaultOptions.xaxis?.categories,\n    },\n  };\n\n  React.useEffect(() => {\n    let isMounted = true;\n\n    import(\"react-apexcharts\").then((module) => {\n      if (isMounted) setChart(() => module.default as ReactApexChartComponent);\n    });\n\n    return () => {\n      isMounted = false;\n    };\n  }, []);\n\n  if (!Chart) return null;\n\n  return (\n    <Chart\n      options={mergedOptions}\n      series={series ?? defaultSeries}\n      type=\"area\"\n      height={height ?? 310}\n    />\n  );\n};\n"]}