@mantine/charts 8.3.13 → 9.0.0-alpha.0

package/esm/AreaChart/AreaChart.mjs

@@ -37,7 +37,7 @@ const varsResolver = createVarsResolver((theme, { textColor, gridColor }) => ({
     "--chart-grid-color": gridColor ? getThemeColor(gridColor, theme) : void 0
   }
 }));
-const AreaChart = factory((_props, ref) => {
+const AreaChart = factory((_props) => {
   const props = useProps("AreaChart", defaultProps, _props);
   const {
     classNames,
@@ -144,7 +144,7 @@ const AreaChart = factory((_props, ref) => {
         isAnimationActive: false,
         connectNulls,
         stackId: stacked ? "stack-dots" : void 0,
-        yAxisId: item.yAxisId || "left",
+        yAxisId: item.yAxisId || void 0,
         ...typeof areaProps === "function" ? areaProps(item) : areaProps
       }
     );
@@ -181,7 +181,7 @@ const AreaChart = factory((_props, ref) => {
           fillOpacity: dimmed ? 0 : 1,
           strokeOpacity: dimmed ? 0.5 : 1,
           strokeDasharray: item.strokeDasharray,
-          yAxisId: item.yAxisId || "left",
+          yAxisId: item.yAxisId || void 0,
           label: withPointLabels ? /* @__PURE__ */ jsx(PointLabel, { valueFormatter }) : void 0,
           ...typeof areaProps === "function" ? areaProps(item) : areaProps
         }
@@ -195,7 +195,7 @@ const AreaChart = factory((_props, ref) => {
       {
         stroke: line.color ? color : "var(--chart-grid-color)",
         strokeWidth: 1,
-        yAxisId: line.yAxisId || "left",
+        yAxisId: line.yAxisId || void 0,
         ...line,
         label: {
           value: line.label,
@@ -218,174 +218,164 @@ const AreaChart = factory((_props, ref) => {
     tickFormatter: orientation === "vertical" ? void 0 : tickFormatter,
     ...getStyles("axis")
   };
-  return /* @__PURE__ */ jsx(
-    Box,
+  return /* @__PURE__ */ jsx(Box, { ...getStyles("root"), onMouseLeave: handleMouseLeave, dir: dir || "ltr", ...others, children: /* @__PURE__ */ jsx(ResponsiveContainer, { ...getStyles("container"), children: /* @__PURE__ */ jsxs(
+    AreaChart$1,
     {
-      ref,
-      ...getStyles("root"),
-      onMouseLeave: handleMouseLeave,
-      dir: dir || "ltr",
-      ...others,
-      children: /* @__PURE__ */ jsx(ResponsiveContainer, { ...getStyles("container"), children: /* @__PURE__ */ jsxs(
-        AreaChart$1,
-        {
-          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__ */ jsx(
-              Legend,
-              {
-                verticalAlign: "top",
-                content: (payload) => /* @__PURE__ */ jsx(
-                  ChartLegend,
-                  {
-                    payload: payload.payload,
-                    onHighlight: setHighlightedArea,
-                    legendPosition: legendProps?.verticalAlign || "top",
-                    classNames: resolvedClassNames,
-                    styles: resolvedStyles,
-                    series,
-                    attributes
-                  }
-                ),
-                ...legendProps
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              CartesianGrid,
-              {
-                strokeDasharray,
-                vertical: gridAxis === "y" || gridAxis === "xy",
-                horizontal: gridAxis === "x" || gridAxis === "xy",
-                ...getStyles("grid"),
-                ...gridProps
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              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__ */ jsx(Label, { position: "insideBottom", offset: -20, fontSize: 12, ...getStyles("axisLabel"), children: xAxisLabel }),
-                  xAxisProps?.children
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              YAxis,
-              {
-                yAxisId: "left",
-                orientation: "left",
-                tick: { transform: "translate(-10, 0)", fontSize: 12, fill: "currentColor" },
-                hide: !withYAxis,
-                ...sharedYAxisProps,
-                ...yAxisProps,
-                children: [
-                  yAxisLabel && /* @__PURE__ */ jsx(
-                    Label,
-                    {
-                      position: "insideLeft",
-                      angle: -90,
-                      textAnchor: "middle",
-                      fontSize: 12,
-                      offset: -5,
-                      ...getStyles("axisLabel"),
-                      children: yAxisLabel
-                    }
-                  ),
-                  yAxisProps?.children
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              YAxis,
+      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__ */ jsx(
+          Legend,
+          {
+            verticalAlign: "top",
+            content: (payload) => /* @__PURE__ */ jsx(
+              ChartLegend,
               {
-                yAxisId: "right",
-                orientation: "right",
-                tick: { transform: "translate(10, 0)", fontSize: 12, fill: "currentColor" },
-                hide: !withRightYAxis,
-                ...sharedYAxisProps,
-                ...rightYAxisProps,
-                children: [
-                  rightYAxisLabel && /* @__PURE__ */ jsx(
-                    Label,
-                    {
-                      position: "insideRight",
-                      angle: 90,
-                      textAnchor: "middle",
-                      fontSize: 12,
-                      offset: -5,
-                      ...getStyles("axisLabel"),
-                      children: rightYAxisLabel
-                    }
-                  ),
-                  yAxisProps?.children
-                ]
+                payload: payload.payload,
+                onHighlight: setHighlightedArea,
+                legendPosition: legendProps?.verticalAlign || "top",
+                classNames: resolvedClassNames,
+                styles: resolvedStyles,
+                series,
+                attributes
               }
             ),
-            withTooltip && /* @__PURE__ */ jsx(
-              Tooltip,
+            ...legendProps
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CartesianGrid,
+          {
+            strokeDasharray,
+            vertical: gridAxis === "y" || gridAxis === "xy",
+            horizontal: gridAxis === "x" || gridAxis === "xy",
+            ...getStyles("grid"),
+            ...gridProps
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          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__ */ jsx(Label, { position: "insideBottom", offset: -20, fontSize: 12, ...getStyles("axisLabel"), children: xAxisLabel }),
+              xAxisProps?.children
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          YAxis,
+          {
+            orientation: "left",
+            tick: { transform: "translate(-10, 0)", fontSize: 12, fill: "currentColor" },
+            hide: !withYAxis,
+            ...sharedYAxisProps,
+            ...yAxisProps,
+            children: [
+              yAxisLabel && /* @__PURE__ */ jsx(
+                Label,
+                {
+                  position: "insideLeft",
+                  angle: -90,
+                  textAnchor: "middle",
+                  fontSize: 12,
+                  offset: -5,
+                  ...getStyles("axisLabel"),
+                  children: yAxisLabel
+                }
+              ),
+              yAxisProps?.children
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          YAxis,
+          {
+            yAxisId: "right",
+            orientation: "right",
+            tick: { transform: "translate(10, 0)", fontSize: 12, fill: "currentColor" },
+            hide: !withRightYAxis,
+            ...sharedYAxisProps,
+            ...rightYAxisProps,
+            children: [
+              rightYAxisLabel && /* @__PURE__ */ jsx(
+                Label,
+                {
+                  position: "insideRight",
+                  angle: 90,
+                  textAnchor: "middle",
+                  fontSize: 12,
+                  offset: -5,
+                  ...getStyles("axisLabel"),
+                  children: rightYAxisLabel
+                }
+              ),
+              yAxisProps?.children
+            ]
+          }
+        ),
+        withTooltip && /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            animationDuration: tooltipAnimationDuration,
+            isAnimationActive,
+            position: orientation === "vertical" ? {} : { y: 0 },
+            cursor: {
+              stroke: "var(--chart-grid-color)",
+              strokeWidth: 1,
+              strokeDasharray
+            },
+            content: ({ label, payload, labelFormatter }) => /* @__PURE__ */ jsx(
+              ChartTooltip,
               {
-                animationDuration: tooltipAnimationDuration,
-                isAnimationActive,
-                position: orientation === "vertical" ? {} : { y: 0 },
-                cursor: {
-                  stroke: "var(--chart-grid-color)",
-                  strokeWidth: 1,
-                  strokeDasharray
-                },
-                content: ({ label, payload, labelFormatter }) => /* @__PURE__ */ jsx(
-                  ChartTooltip,
-                  {
-                    label: labelFormatter && payload ? labelFormatter(label, payload) : label,
-                    payload,
-                    unit,
-                    classNames: resolvedClassNames,
-                    styles: resolvedStyles,
-                    series,
-                    valueFormatter,
-                    attributes
-                  }
-                ),
-                ...tooltipProps
+                label: labelFormatter && payload ? labelFormatter(label, payload) : label,
+                payload,
+                unit,
+                classNames: resolvedClassNames,
+                styles: resolvedStyles,
+                series,
+                valueFormatter,
+                attributes
               }
             ),
-            type === "split" && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
-              AreaSplit,
-              {
-                colors: splitColors,
-                id: splitId,
-                offset: splitOffset ?? getDefaultSplitOffset({ data, series }),
-                fillOpacity
-              }
-            ) }),
-            areas,
-            withDots && dotsAreas,
-            children
-          ]
-        }
-      ) })
+            ...tooltipProps
+          }
+        ),
+        type === "split" && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
+          AreaSplit,
+          {
+            colors: splitColors,
+            id: splitId,
+            offset: splitOffset ?? getDefaultSplitOffset({ data, series }),
+            fillOpacity
+          }
+        ) }),
+        areas,
+        withDots && dotsAreas,
+        children
+      ]
     }
-  );
+  ) }) });
 });
 AreaChart.classes = classes;
+AreaChart.varsResolver = varsResolver;
 AreaChart.displayName = "@mantine/charts/AreaChart";
 
 export { AreaChart };