@mantine/charts 7.8.1 → 7.9.1

package/cjs/AreaChart/AreaChart.cjs

@@ -1,7 +1,8 @@
 'use client';
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 var recharts = require('recharts');
 var core = require('@mantine/core');
 var ChartLegend = require('../ChartLegend/ChartLegend.cjs');
@@ -11,10 +12,6 @@ var AreaSplit = require('./AreaSplit.cjs');
 var getSplitOffset = require('./get-split-offset.cjs');
 var gridChart_module = require('../grid-chart.module.css.cjs');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-
 function valueToPercent(value) {
   return `${(value * 100).toFixed(0)}%`;
 }
@@ -91,14 +88,14 @@ const AreaChart = core.factory((_props, ref) => {
     ...others
   } = props;
   const theme = core.useMantineTheme();
-  const baseId = React.useId();
+  const baseId = react.useId();
   const splitId = `${baseId}-split`;
   const withXTickLine = gridAxis !== "none" && (tickLine === "x" || tickLine === "xy");
   const withYTickLine = gridAxis !== "none" && (tickLine === "y" || tickLine === "xy");
   const isAnimationActive = (tooltipAnimationDuration || 0) > 0;
   const _withGradient = typeof withGradient === "boolean" ? withGradient : type === "default";
   const stacked = type === "stacked" || type === "percent";
-  const [highlightedArea, setHighlightedArea] = React.useState(null);
+  const [highlightedArea, setHighlightedArea] = react.useState(null);
   const shouldHighlight = highlightedArea !== null;
   const handleMouseLeave = (event) => {
     setHighlightedArea(null);
@@ -124,7 +121,7 @@ const AreaChart = core.factory((_props, ref) => {
   const dotsAreas = series.map((item) => {
     const color = core.getThemeColor(item.color, theme);
     const dimmed = shouldHighlight && highlightedArea !== item.name;
-    return /* @__PURE__ */ React__default.default.createElement(
+    return /* @__PURE__ */ react.createElement(
       recharts.Area,
       {
         ...getStyles("area"),
@@ -148,42 +145,44 @@ const AreaChart = core.factory((_props, ref) => {
     const id = `${baseId}-${item.color.replace(/[^a-zA-Z0-9]/g, "")}`;
     const color = core.getThemeColor(item.color, theme);
     const dimmed = shouldHighlight && highlightedArea !== item.name;
-    return /* @__PURE__ */ React__default.default.createElement(React.Fragment, { key: item.name }, /* @__PURE__ */ React__default.default.createElement("defs", null, /* @__PURE__ */ React__default.default.createElement(
-      AreaGradient.AreaGradient,
-      {
-        color,
-        withGradient: _withGradient,
-        id,
-        fillOpacity
-      }
-    )), /* @__PURE__ */ React__default.default.createElement(
-      recharts.Area,
-      {
-        ...getStyles("area"),
-        activeDot: false,
-        dot: false,
-        name: item.name,
-        type: curveType,
-        dataKey: item.name,
-        fill: type === "split" ? `url(#${splitId})` : `url(#${id})`,
-        strokeWidth,
-        stroke: color,
-        isAnimationActive: false,
-        connectNulls,
-        stackId: stacked ? "stack" : void 0,
-        fillOpacity: dimmed ? 0 : 1,
-        strokeOpacity: dimmed ? 0.5 : 1,
-        strokeDasharray: item.strokeDasharray,
-        ...typeof areaProps === "function" ? areaProps(item) : areaProps
-      }
-    ));
+    return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx(
+        AreaGradient.AreaGradient,
+        {
+          color,
+          withGradient: _withGradient,
+          id,
+          fillOpacity
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.Area,
+        {
+          ...getStyles("area"),
+          activeDot: false,
+          dot: false,
+          name: item.name,
+          type: curveType,
+          dataKey: item.name,
+          fill: type === "split" ? `url(#${splitId})` : `url(#${id})`,
+          strokeWidth,
+          stroke: color,
+          isAnimationActive: false,
+          connectNulls,
+          stackId: stacked ? "stack" : void 0,
+          fillOpacity: dimmed ? 0 : 1,
+          strokeOpacity: dimmed ? 0.5 : 1,
+          strokeDasharray: item.strokeDasharray,
+          ...typeof areaProps === "function" ? areaProps(item) : areaProps
+        }
+      )
+    ] }, item.name);
   });
   const referenceLinesItems = referenceLines?.map((line, index) => {
     const color = core.getThemeColor(line.color, theme);
-    return /* @__PURE__ */ React__default.default.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       recharts.ReferenceLine,
       {
-        key: index,
         stroke: line.color ? color : "var(--chart-grid-color)",
         strokeWidth: 1,
         ...line,
@@ -194,143 +193,150 @@ const AreaChart = core.factory((_props, ref) => {
           position: line.labelPosition ?? "insideBottomLeft"
         },
         ...getStyles("referenceLine")
-      }
+      },
+      index
     );
   });
-  return /* @__PURE__ */ React__default.default.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     core.Box,
     {
       ref,
       ...getStyles("root"),
       onMouseLeave: handleMouseLeave,
       dir: dir || "ltr",
-      ...others
-    },
-    /* @__PURE__ */ React__default.default.createElement(recharts.ResponsiveContainer, { ...getStyles("container") }, /* @__PURE__ */ React__default.default.createElement(
-      recharts.AreaChart,
-      {
-        data,
-        stackOffset: type === "percent" ? "expand" : void 0,
-        layout: orientation,
-        margin: {
-          bottom: xAxisLabel ? 30 : void 0,
-          left: yAxisLabel ? 10 : void 0,
-          right: yAxisLabel ? 5 : void 0
-        },
-        ...areaChartProps
-      },
-      referenceLinesItems,
-      withLegend && /* @__PURE__ */ React__default.default.createElement(
-        recharts.Legend,
-        {
-          verticalAlign: "top",
-          content: (payload) => /* @__PURE__ */ React__default.default.createElement(
-            ChartLegend.ChartLegend,
-            {
-              payload: payload.payload,
-              onHighlight: setHighlightedArea,
-              legendPosition: legendProps?.verticalAlign || "top",
-              classNames: resolvedClassNames,
-              styles: resolvedStyles,
-              series
-            }
-          ),
-          ...legendProps
-        }
-      ),
-      /* @__PURE__ */ React__default.default.createElement(
-        recharts.CartesianGrid,
-        {
-          strokeDasharray,
-          vertical: gridAxis === "y" || gridAxis === "xy",
-          horizontal: gridAxis === "x" || gridAxis === "xy",
-          ...getStyles("grid"),
-          ...gridProps
-        }
-      ),
-      /* @__PURE__ */ React__default.default.createElement(
-        recharts.XAxis,
-        {
-          hide: !withXAxis,
-          ...orientation === "vertical" ? { type: "number" } : { dataKey },
-          tick: { transform: "translate(0, 10)", fontSize: 12, fill: "currentColor" },
-          stroke: "",
-          interval: "preserveStartEnd",
-          tickLine: withXTickLine ? { stroke: "currentColor" } : false,
-          minTickGap: 5,
-          ...getStyles("axis"),
-          ...xAxisProps
-        },
-        xAxisLabel && /* @__PURE__ */ React__default.default.createElement(recharts.Label, { position: "insideBottom", offset: -20, fontSize: 12, ...getStyles("axisLabel") }, xAxisLabel),
-        xAxisProps?.children
-      ),
-      /* @__PURE__ */ React__default.default.createElement(
-        recharts.YAxis,
+      ...others,
+      children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { ...getStyles("container"), children: /* @__PURE__ */ jsxRuntime.jsxs(
+        recharts.AreaChart,
         {
-          hide: !withYAxis,
-          axisLine: false,
-          ...orientation === "vertical" ? { dataKey, type: "category" } : { type: "number" },
-          tickLine: withYTickLine ? { stroke: "currentColor" } : false,
-          tick: { transform: "translate(-10, 0)", fontSize: 12, fill: "currentColor" },
-          allowDecimals: true,
-          unit,
-          tickFormatter: type === "percent" ? valueToPercent : valueFormatter,
-          ...getStyles("axis"),
-          ...yAxisProps
-        },
-        yAxisLabel && /* @__PURE__ */ React__default.default.createElement(
-          recharts.Label,
-          {
-            position: "insideLeft",
-            angle: -90,
-            textAnchor: "middle",
-            fontSize: 12,
-            offset: -5,
-            ...getStyles("axisLabel")
+          data,
+          stackOffset: type === "percent" ? "expand" : void 0,
+          layout: orientation,
+          margin: {
+            bottom: xAxisLabel ? 30 : void 0,
+            left: yAxisLabel ? 10 : void 0,
+            right: yAxisLabel ? 5 : void 0
           },
-          yAxisLabel
-        ),
-        yAxisProps?.children
-      ),
-      withTooltip && /* @__PURE__ */ React__default.default.createElement(
-        recharts.Tooltip,
-        {
-          animationDuration: tooltipAnimationDuration,
-          isAnimationActive,
-          position: { y: 0 },
-          cursor: {
-            stroke: "var(--chart-grid-color)",
-            strokeWidth: 1,
-            strokeDasharray
-          },
-          content: ({ label, payload }) => /* @__PURE__ */ React__default.default.createElement(
-            ChartTooltip.ChartTooltip,
-            {
-              label,
-              payload,
-              unit,
-              classNames: resolvedClassNames,
-              styles: resolvedStyles,
-              series,
-              valueFormatter
-            }
-          ),
-          ...tooltipProps
-        }
-      ),
-      type === "split" && /* @__PURE__ */ React__default.default.createElement("defs", null, /* @__PURE__ */ React__default.default.createElement(
-        AreaSplit.AreaSplit,
-        {
-          colors: splitColors,
-          id: splitId,
-          offset: splitOffset ?? getSplitOffset.getDefaultSplitOffset({ data, series }),
-          fillOpacity
+          ...areaChartProps,
+          children: [
+            referenceLinesItems,
+            withLegend && /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Legend,
+              {
+                verticalAlign: "top",
+                content: (payload) => /* @__PURE__ */ jsxRuntime.jsx(
+                  ChartLegend.ChartLegend,
+                  {
+                    payload: payload.payload,
+                    onHighlight: setHighlightedArea,
+                    legendPosition: legendProps?.verticalAlign || "top",
+                    classNames: resolvedClassNames,
+                    styles: resolvedStyles,
+                    series
+                  }
+                ),
+                ...legendProps
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.CartesianGrid,
+              {
+                strokeDasharray,
+                vertical: gridAxis === "y" || gridAxis === "xy",
+                horizontal: gridAxis === "x" || gridAxis === "xy",
+                ...getStyles("grid"),
+                ...gridProps
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              recharts.XAxis,
+              {
+                hide: !withXAxis,
+                ...orientation === "vertical" ? { type: "number" } : { dataKey },
+                tick: { transform: "translate(0, 10)", fontSize: 12, fill: "currentColor" },
+                stroke: "",
+                interval: "preserveStartEnd",
+                tickLine: withXTickLine ? { stroke: "currentColor" } : false,
+                minTickGap: 5,
+                ...getStyles("axis"),
+                ...xAxisProps,
+                children: [
+                  xAxisLabel && /* @__PURE__ */ jsxRuntime.jsx(recharts.Label, { position: "insideBottom", offset: -20, fontSize: 12, ...getStyles("axisLabel"), children: xAxisLabel }),
+                  xAxisProps?.children
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              recharts.YAxis,
+              {
+                hide: !withYAxis,
+                axisLine: false,
+                ...orientation === "vertical" ? { dataKey, type: "category" } : { type: "number" },
+                tickLine: withYTickLine ? { stroke: "currentColor" } : false,
+                tick: { transform: "translate(-10, 0)", fontSize: 12, fill: "currentColor" },
+                allowDecimals: true,
+                unit,
+                tickFormatter: type === "percent" ? valueToPercent : valueFormatter,
+                ...getStyles("axis"),
+                ...yAxisProps,
+                children: [
+                  yAxisLabel && /* @__PURE__ */ jsxRuntime.jsx(
+                    recharts.Label,
+                    {
+                      position: "insideLeft",
+                      angle: -90,
+                      textAnchor: "middle",
+                      fontSize: 12,
+                      offset: -5,
+                      ...getStyles("axisLabel"),
+                      children: yAxisLabel
+                    }
+                  ),
+                  yAxisProps?.children
+                ]
+              }
+            ),
+            withTooltip && /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Tooltip,
+              {
+                animationDuration: tooltipAnimationDuration,
+                isAnimationActive,
+                position: { y: 0 },
+                cursor: {
+                  stroke: "var(--chart-grid-color)",
+                  strokeWidth: 1,
+                  strokeDasharray
+                },
+                content: ({ label, payload }) => /* @__PURE__ */ jsxRuntime.jsx(
+                  ChartTooltip.ChartTooltip,
+                  {
+                    label,
+                    payload,
+                    unit,
+                    classNames: resolvedClassNames,
+                    styles: resolvedStyles,
+                    series,
+                    valueFormatter
+                  }
+                ),
+                ...tooltipProps
+              }
+            ),
+            type === "split" && /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx(
+              AreaSplit.AreaSplit,
+              {
+                colors: splitColors,
+                id: splitId,
+                offset: splitOffset ?? getSplitOffset.getDefaultSplitOffset({ data, series }),
+                fillOpacity
+              }
+            ) }),
+            areas,
+            withDots && dotsAreas,
+            children
+          ]
         }
-      )),
-      areas,
-      withDots && dotsAreas,
-      children
-    ))
+      ) })
+    }
   );
 });
 AreaChart.classes = gridChart_module;