@mantine/charts 7.13.4 → 7.13.5-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/charts",
-  "version": "7.13.4",
+  "version": "7.13.5-alpha.0",
   "description": "Charts components built with recharts and Mantine",
   "homepage": "https://mantine.dev/",
   "license": "MIT",
@@ -35,15 +35,15 @@
     "directory": "packages/@mantine/charts"
   },
   "peerDependencies": {
-    "@mantine/core": "7.13.4",
-    "@mantine/hooks": "7.13.4",
+    "@mantine/core": "7.13.5-alpha.0",
+    "@mantine/hooks": "7.13.5-alpha.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "recharts": "^2.10.3"
   },
   "devDependencies": {
-    "@mantine-tests/core": "1.1.0",
-    "@mantine/core": "7.13.4",
-    "@mantine/hooks": "7.13.4"
+    "@mantine-tests/core": "workspace:*",
+    "@mantine/core": "workspace:*",
+    "@mantine/hooks": "workspace:*"
   }
-}
+}

package/styles.css

@@ -29,6 +29,11 @@
     padding-top: var(--mantine-spacing-sm);
   }
 
+.m_b30369b5 {
+  width: calc(0.75rem * var(--mantine-scale));
+  height: calc(0.75rem * var(--mantine-scale));
+}
+
 .m_3de8964e {
   font-size: var(--mantine-font-size-sm);
   display: flex;
@@ -221,3 +226,41 @@
   height: 100%;
   width: 100%;
 }
+
+:where([data-mantine-color-scheme='light']) .m_cd2bd9e5 {
+    --chart-empty-background: var(--mantine-color-gray-1);
+    --chart-cursor-color: var(--mantine-color-gray-4);
+}
+  :where([data-mantine-color-scheme='dark']) .m_cd2bd9e5 {
+    --chart-empty-background: var(--mantine-color-dark-6);
+    --chart-cursor-color: var(--mantine-color-dark-4);
+}
+
+.m_6bcc3420 {
+  padding: var(--mantine-spacing-md);
+  box-shadow: var(--mantine-shadow-md);
+  min-width: calc(12.5rem * var(--mantine-scale));
+  font-size: var(--mantine-font-size-sm);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+:where([data-mantine-color-scheme='light']) .m_6bcc3420 {
+    border: 1px solid var(--mantine-color-gray-2);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_6bcc3420 {
+    border: 1px solid var(--mantine-color-dark-4);
+}
+
+.m_80d531e7 {
+  min-height: var(--chart-size, auto);
+  height: var(--chart-size, auto);
+  width: var(--chart-size, auto);
+  min-width: var(--chart-size, auto);
+}
+
+  .m_80d531e7 :where(*) {
+    outline: 0;
+  }

package/styles.layer.css

@@ -29,6 +29,11 @@
     padding-top: var(--mantine-spacing-sm);
   }
 
+.m_b30369b5 {
+  width: calc(0.75rem * var(--mantine-scale));
+  height: calc(0.75rem * var(--mantine-scale));
+}
+
 .m_3de8964e {
   font-size: var(--mantine-font-size-sm);
   display: flex;
@@ -221,4 +226,42 @@
   height: 100%;
   width: 100%;
 }
+
+:where([data-mantine-color-scheme='light']) .m_cd2bd9e5 {
+    --chart-empty-background: var(--mantine-color-gray-1);
+    --chart-cursor-color: var(--mantine-color-gray-4);
+}
+  :where([data-mantine-color-scheme='dark']) .m_cd2bd9e5 {
+    --chart-empty-background: var(--mantine-color-dark-6);
+    --chart-cursor-color: var(--mantine-color-dark-4);
+}
+
+.m_6bcc3420 {
+  padding: var(--mantine-spacing-md);
+  box-shadow: var(--mantine-shadow-md);
+  min-width: calc(12.5rem * var(--mantine-scale));
+  font-size: var(--mantine-font-size-sm);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+:where([data-mantine-color-scheme='light']) .m_6bcc3420 {
+    border: 1px solid var(--mantine-color-gray-2);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_6bcc3420 {
+    border: 1px solid var(--mantine-color-dark-4);
+}
+
+.m_80d531e7 {
+  min-height: var(--chart-size, auto);
+  height: var(--chart-size, auto);
+  width: var(--chart-size, auto);
+  min-width: var(--chart-size, auto);
+}
+
+  .m_80d531e7 :where(*) {
+    outline: 0;
+  }
 }

package/cjs/AreaChart/AreaChart.cjs

@@ -1,388 +0,0 @@
-'use client';
-'use strict';
-
-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');
-var ChartTooltip = require('../ChartTooltip/ChartTooltip.cjs');
-var PointLabel = require('../PointLabel/PointLabel.cjs');
-var AreaGradient = require('./AreaGradient.cjs');
-var AreaSplit = require('./AreaSplit.cjs');
-var getSplitOffset = require('./get-split-offset.cjs');
-var gridChart_module = require('../grid-chart.module.css.cjs');
-
-function valueToPercent(value) {
-  return `${(value * 100).toFixed(0)}%`;
-}
-const defaultProps = {
-  withXAxis: true,
-  withYAxis: true,
-  withDots: true,
-  withTooltip: true,
-  connectNulls: true,
-  strokeWidth: 2,
-  tooltipAnimationDuration: 0,
-  fillOpacity: 0.2,
-  tickLine: "y",
-  strokeDasharray: "5 5",
-  curveType: "monotone",
-  gridAxis: "x",
-  type: "default",
-  splitColors: ["green.7", "red.7"],
-  orientation: "horizontal"
-};
-const varsResolver = core.createVarsResolver((theme, { textColor, gridColor }) => ({
-  root: {
-    "--chart-text-color": textColor ? core.getThemeColor(textColor, theme) : void 0,
-    "--chart-grid-color": gridColor ? core.getThemeColor(gridColor, theme) : void 0
-  }
-}));
-const AreaChart = core.factory((_props, ref) => {
-  const props = core.useProps("AreaChart", defaultProps, _props);
-  const {
-    classNames,
-    className,
-    style,
-    styles,
-    unstyled,
-    vars,
-    data,
-    series,
-    withGradient,
-    dataKey,
-    withXAxis,
-    withYAxis,
-    curveType,
-    gridProps,
-    withDots,
-    tickLine,
-    strokeDasharray,
-    gridAxis,
-    unit,
-    yAxisProps,
-    xAxisProps,
-    dotProps,
-    activeDotProps,
-    strokeWidth,
-    tooltipAnimationDuration,
-    type,
-    legendProps,
-    tooltipProps,
-    withLegend,
-    withTooltip,
-    areaChartProps,
-    fillOpacity,
-    splitColors,
-    splitOffset,
-    connectNulls,
-    onMouseLeave,
-    orientation,
-    referenceLines,
-    dir,
-    valueFormatter,
-    children,
-    areaProps,
-    xAxisLabel,
-    yAxisLabel,
-    withRightYAxis,
-    rightYAxisLabel,
-    rightYAxisProps,
-    withPointLabels,
-    ...others
-  } = props;
-  const theme = core.useMantineTheme();
-  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 shouldHighlight = highlightedArea !== null;
-  const handleMouseLeave = (event) => {
-    setHighlightedArea(null);
-    onMouseLeave?.(event);
-  };
-  const { resolvedClassNames, resolvedStyles } = core.useResolvedStylesApi({
-    classNames,
-    styles,
-    props
-  });
-  const getStyles = core.useStyles({
-    name: "AreaChart",
-    classes: gridChart_module,
-    props,
-    className,
-    style,
-    classNames,
-    styles,
-    unstyled,
-    vars,
-    varsResolver
-  });
-  const dotsAreas = series.map((item) => {
-    const color = core.getThemeColor(item.color, theme);
-    const dimmed = shouldHighlight && highlightedArea !== item.name;
-    return /* @__PURE__ */ react.createElement(
-      recharts.Area,
-      {
-        ...getStyles("area"),
-        activeDot: { fill: theme.white, stroke: color, strokeWidth: 2, r: 4, ...activeDotProps },
-        dot: { fill: color, fillOpacity: dimmed ? 0 : 1, strokeWidth: 2, r: 4, ...dotProps },
-        key: item.name,
-        name: item.name,
-        type: curveType,
-        dataKey: item.name,
-        fill: "none",
-        strokeWidth,
-        stroke: "none",
-        isAnimationActive: false,
-        connectNulls,
-        stackId: stacked ? "stack-dots" : void 0,
-        yAxisId: item.yAxisId || "left",
-        ...typeof areaProps === "function" ? areaProps(item) : areaProps
-      }
-    );
-  });
-  const areas = series.map((item) => {
-    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__ */ 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,
-          yAxisId: item.yAxisId || "left",
-          label: withPointLabels ? /* @__PURE__ */ jsxRuntime.jsx(PointLabel.PointLabel, {}) : void 0,
-          ...typeof areaProps === "function" ? areaProps(item) : areaProps
-        }
-      )
-    ] }, item.name);
-  });
-  const referenceLinesItems = referenceLines?.map((line, index) => {
-    const color = core.getThemeColor(line.color, theme);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      recharts.ReferenceLine,
-      {
-        stroke: line.color ? color : "var(--chart-grid-color)",
-        strokeWidth: 1,
-        yAxisId: line.yAxisId || "left",
-        ...line,
-        label: {
-          value: line.label,
-          fill: line.color ? color : "currentColor",
-          fontSize: 12,
-          position: line.labelPosition ?? "insideBottomLeft"
-        },
-        ...getStyles("referenceLine")
-      },
-      index
-    );
-  });
-  const tickFormatter = type === "percent" ? valueToPercent : valueFormatter;
-  const sharedYAxisProps = {
-    axisLine: false,
-    ...orientation === "vertical" ? { dataKey, type: "category" } : { type: "number" },
-    tickLine: withYTickLine ? { stroke: "currentColor" } : false,
-    allowDecimals: true,
-    unit,
-    tickFormatter: orientation === "vertical" ? void 0 : tickFormatter,
-    ...getStyles("axis")
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    core.Box,
-    {
-      ref,
-      ...getStyles("root"),
-      onMouseLeave: handleMouseLeave,
-      dir: dir || "ltr",
-      ...others,
-      children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { ...getStyles("container"), children: /* @__PURE__ */ jsxRuntime.jsxs(
-        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,
-          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,
-                tickFormatter: orientation === "vertical" ? tickFormatter : void 0,
-                ...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,
-              {
-                yAxisId: "left",
-                orientation: "left",
-                tick: { transform: "translate(-10, 0)", fontSize: 12, fill: "currentColor" },
-                hide: !withYAxis,
-                ...sharedYAxisProps,
-                ...yAxisProps,
-                children: [
-                  yAxisLabel && /* @__PURE__ */ jsxRuntime.jsx(
-                    recharts.Label,
-                    {
-                      position: "insideLeft",
-                      angle: -90,
-                      textAnchor: "middle",
-                      fontSize: 12,
-                      offset: -5,
-                      ...getStyles("axisLabel"),
-                      children: yAxisLabel
-                    }
-                  ),
-                  yAxisProps?.children
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              recharts.YAxis,
-              {
-                yAxisId: "right",
-                orientation: "right",
-                tick: { transform: "translate(10, 0)", fontSize: 12, fill: "currentColor" },
-                hide: !withRightYAxis,
-                ...sharedYAxisProps,
-                ...rightYAxisProps,
-                children: [
-                  rightYAxisLabel && /* @__PURE__ */ jsxRuntime.jsx(
-                    recharts.Label,
-                    {
-                      position: "insideRight",
-                      angle: 90,
-                      textAnchor: "middle",
-                      fontSize: 12,
-                      offset: -5,
-                      ...getStyles("axisLabel"),
-                      children: rightYAxisLabel
-                    }
-                  ),
-                  yAxisProps?.children
-                ]
-              }
-            ),
-            withTooltip && /* @__PURE__ */ jsxRuntime.jsx(
-              recharts.Tooltip,
-              {
-                animationDuration: tooltipAnimationDuration,
-                isAnimationActive,
-                position: orientation === "vertical" ? {} : { 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
-          ]
-        }
-      ) })
-    }
-  );
-});
-AreaChart.classes = gridChart_module;
-AreaChart.displayName = "@mantine/charts/AreaChart";
-
-exports.AreaChart = AreaChart;
-//# sourceMappingURL=AreaChart.cjs.map