@mantine/charts 8.3.13 → 9.0.0-alpha.0

package/cjs/CompositeChart/CompositeChart.cjs

@@ -31,7 +31,7 @@ const varsResolver = core.createVarsResolver(
     }
   })
 );
-const CompositeChart = core.factory((_props, ref) => {
+const CompositeChart = core.factory((_props) => {
   const props = core.useProps("CompositeChart", defaultProps, _props);
   const {
     classNames,
@@ -140,7 +140,7 @@ const CompositeChart = core.factory((_props, ref) => {
           connectNulls,
           type: curveType,
           strokeDasharray: item.strokeDasharray,
-          yAxisId: item.yAxisId || "left",
+          yAxisId: item.yAxisId || void 0,
           label: withPointLabels ? /* @__PURE__ */ jsxRuntime.jsx(PointLabel.PointLabel, { valueFormatter }) : void 0,
           ...typeof lineProps === "function" ? lineProps(item) : lineProps
         }
@@ -178,7 +178,7 @@ const CompositeChart = core.factory((_props, ref) => {
           fillOpacity: dimmed ? 0 : 0.2,
           strokeOpacity: dimmed ? 0.5 : 1,
           strokeDasharray: item.strokeDasharray,
-          yAxisId: item.yAxisId || "left",
+          yAxisId: item.yAxisId || void 0,
           label: withPointLabels ? /* @__PURE__ */ jsxRuntime.jsx(PointLabel.PointLabel, { valueFormatter }) : void 0,
           ...typeof areaProps === "function" ? areaProps(item) : areaProps
         }
@@ -197,7 +197,7 @@ const CompositeChart = core.factory((_props, ref) => {
           isAnimationActive: false,
           fillOpacity: dimmed ? 0.1 : 1,
           strokeOpacity: dimmed ? 0.2 : 0,
-          yAxisId: item.yAxisId || "left",
+          yAxisId: item.yAxisId || void 0,
           minPointSize: minBarSize,
           ...typeof barProps === "function" ? barProps(item) : barProps
         },
@@ -221,7 +221,7 @@ const CompositeChart = core.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,
@@ -243,163 +243,153 @@ const CompositeChart = core.factory((_props, ref) => {
     tickFormatter: valueFormatter,
     ...getStyles("axis")
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    core.Box,
+  return /* @__PURE__ */ jsxRuntime.jsx(core.Box, { ...getStyles("root"), onMouseLeave: handleMouseLeave, dir: dir || "ltr", ...others, children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { ...getStyles("container"), children: /* @__PURE__ */ jsxRuntime.jsxs(
+    recharts.ComposedChart,
     {
-      ref,
-      ...getStyles("root"),
-      onMouseLeave: handleMouseLeave,
-      dir: dir || "ltr",
-      ...others,
-      children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { ...getStyles("container"), children: /* @__PURE__ */ jsxRuntime.jsxs(
-        recharts.ComposedChart,
-        {
-          data,
-          maxBarSize: maxBarWidth,
-          margin: {
-            bottom: xAxisLabel ? 30 : void 0,
-            left: yAxisLabel ? 10 : void 0,
-            right: yAxisLabel ? 5 : void 0
-          },
-          ...composedChartProps,
-          children: [
-            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,
-                    attributes
-                  }
-                ),
-                ...legendProps
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              recharts.XAxis,
-              {
-                hide: !withXAxis,
-                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,
-              {
-                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
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              recharts.CartesianGrid,
+      data,
+      maxBarSize: maxBarWidth,
+      margin: {
+        bottom: xAxisLabel ? 30 : void 0,
+        left: yAxisLabel ? 10 : void 0,
+        right: yAxisLabel ? 5 : void 0
+      },
+      ...composedChartProps,
+      children: [
+        withLegend && /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Legend,
+          {
+            verticalAlign: "top",
+            content: (payload) => /* @__PURE__ */ jsxRuntime.jsx(
+              ChartLegend.ChartLegend,
               {
-                strokeDasharray,
-                vertical: gridAxis === "y" || gridAxis === "xy",
-                horizontal: gridAxis === "x" || gridAxis === "xy",
-                ...getStyles("grid"),
-                ...gridProps
+                payload: payload.payload,
+                onHighlight: setHighlightedArea,
+                legendPosition: legendProps?.verticalAlign || "top",
+                classNames: resolvedClassNames,
+                styles: resolvedStyles,
+                series,
+                attributes
               }
             ),
-            withTooltip && /* @__PURE__ */ jsxRuntime.jsx(
-              recharts.Tooltip,
+            ...legendProps
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          recharts.XAxis,
+          {
+            hide: !withXAxis,
+            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,
+          {
+            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
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.CartesianGrid,
+          {
+            strokeDasharray,
+            vertical: gridAxis === "y" || gridAxis === "xy",
+            horizontal: gridAxis === "x" || gridAxis === "xy",
+            ...getStyles("grid"),
+            ...gridProps
+          }
+        ),
+        withTooltip && /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Tooltip,
+          {
+            animationDuration: tooltipAnimationDuration,
+            isAnimationActive: tooltipAnimationDuration !== 0,
+            position: { y: 0 },
+            cursor: {
+              stroke: "var(--chart-grid-color)",
+              strokeWidth: 1,
+              strokeDasharray
+            },
+            content: ({ label, payload, labelFormatter }) => /* @__PURE__ */ jsxRuntime.jsx(
+              ChartTooltip.ChartTooltip,
               {
-                animationDuration: tooltipAnimationDuration,
-                isAnimationActive: tooltipAnimationDuration !== 0,
-                position: { y: 0 },
-                cursor: {
-                  stroke: "var(--chart-grid-color)",
-                  strokeWidth: 1,
-                  strokeDasharray
-                },
-                content: ({ label, payload, labelFormatter }) => /* @__PURE__ */ jsxRuntime.jsx(
-                  ChartTooltip.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
               }
             ),
-            lines,
-            referenceLinesItems,
-            children
-          ]
-        }
-      ) })
+            ...tooltipProps
+          }
+        ),
+        lines,
+        referenceLinesItems,
+        children
+      ]
     }
-  );
+  ) }) });
 });
 CompositeChart.displayName = "@mantine/charts/CompositeChart";
 CompositeChart.classes = gridChart_module;
+CompositeChart.varsResolver = varsResolver;
 
 exports.CompositeChart = CompositeChart;
 //# sourceMappingURL=CompositeChart.cjs.map