@mantine/charts 8.3.13 → 9.0.0-alpha.0

package/esm/CompositeChart/CompositeChart.mjs

@@ -29,7 +29,7 @@ const varsResolver = createVarsResolver(
     }
   })
 );
-const CompositeChart = factory((_props, ref) => {
+const CompositeChart = factory((_props) => {
   const props = useProps("CompositeChart", defaultProps, _props);
   const {
     classNames,
@@ -138,7 +138,7 @@ const CompositeChart = factory((_props, ref) => {
           connectNulls,
           type: curveType,
           strokeDasharray: item.strokeDasharray,
-          yAxisId: item.yAxisId || "left",
+          yAxisId: item.yAxisId || void 0,
           label: withPointLabels ? /* @__PURE__ */ jsx(PointLabel, { valueFormatter }) : void 0,
           ...typeof lineProps === "function" ? lineProps(item) : lineProps
         }
@@ -176,7 +176,7 @@ const CompositeChart = 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__ */ jsx(PointLabel, { valueFormatter }) : void 0,
           ...typeof areaProps === "function" ? areaProps(item) : areaProps
         }
@@ -195,7 +195,7 @@ const CompositeChart = 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
         },
@@ -219,7 +219,7 @@ const CompositeChart = 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,
@@ -241,163 +241,153 @@ const CompositeChart = factory((_props, ref) => {
     tickFormatter: valueFormatter,
     ...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(
+    ComposedChart,
     {
-      ref,
-      ...getStyles("root"),
-      onMouseLeave: handleMouseLeave,
-      dir: dir || "ltr",
-      ...others,
-      children: /* @__PURE__ */ jsx(ResponsiveContainer, { ...getStyles("container"), children: /* @__PURE__ */ jsxs(
-        ComposedChart,
-        {
-          data,
-          maxBarSize: maxBarWidth,
-          margin: {
-            bottom: xAxisLabel ? 30 : void 0,
-            left: yAxisLabel ? 10 : void 0,
-            right: yAxisLabel ? 5 : void 0
-          },
-          ...composedChartProps,
-          children: [
-            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__ */ jsxs(
-              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__ */ 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,
-              {
-                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
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              CartesianGrid,
+      data,
+      maxBarSize: maxBarWidth,
+      margin: {
+        bottom: xAxisLabel ? 30 : void 0,
+        left: yAxisLabel ? 10 : void 0,
+        right: yAxisLabel ? 5 : void 0
+      },
+      ...composedChartProps,
+      children: [
+        withLegend && /* @__PURE__ */ jsx(
+          Legend,
+          {
+            verticalAlign: "top",
+            content: (payload) => /* @__PURE__ */ jsx(
+              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__ */ jsx(
-              Tooltip,
+            ...legendProps
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          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__ */ 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
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CartesianGrid,
+          {
+            strokeDasharray,
+            vertical: gridAxis === "y" || gridAxis === "xy",
+            horizontal: gridAxis === "x" || gridAxis === "xy",
+            ...getStyles("grid"),
+            ...gridProps
+          }
+        ),
+        withTooltip && /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            animationDuration: tooltipAnimationDuration,
+            isAnimationActive: tooltipAnimationDuration !== 0,
+            position: { y: 0 },
+            cursor: {
+              stroke: "var(--chart-grid-color)",
+              strokeWidth: 1,
+              strokeDasharray
+            },
+            content: ({ label, payload, labelFormatter }) => /* @__PURE__ */ jsx(
+              ChartTooltip,
               {
-                animationDuration: tooltipAnimationDuration,
-                isAnimationActive: tooltipAnimationDuration !== 0,
-                position: { 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
               }
             ),
-            lines,
-            referenceLinesItems,
-            children
-          ]
-        }
-      ) })
+            ...tooltipProps
+          }
+        ),
+        lines,
+        referenceLinesItems,
+        children
+      ]
     }
-  );
+  ) }) });
 });
 CompositeChart.displayName = "@mantine/charts/CompositeChart";
 CompositeChart.classes = classes;
+CompositeChart.varsResolver = varsResolver;
 
 export { CompositeChart };
 //# sourceMappingURL=CompositeChart.mjs.map