@mui/x-charts 6.0.0-alpha.2 → 6.0.0-alpha.3

package/BarChart/BarChart.d.ts

@@ -12,8 +12,5 @@ export interface BarChartProps extends Omit<ResponsiveChartContainerProps, 'seri
     axisHighlight?: ChartsAxisHighlightProps;
     legend?: ChartsLegendProps;
 }
-declare function BarChart(props: BarChartProps): React.JSX.Element;
-declare namespace BarChart {
-    var propTypes: any;
-}
+declare const BarChart: React.ForwardRefExoticComponent<BarChartProps & React.RefAttributes<unknown>>;
 export { BarChart };

package/BarChart/BarChart.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BarChart = BarChart;
+exports.BarChart = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
@@ -20,7 +20,7 @@ var _ChartsClipPath = require("../ChartsClipPath");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function BarChart(props) {
+const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
   const {
     xAxis,
     yAxis,
@@ -42,6 +42,7 @@ function BarChart(props) {
   const id = (0, _useId.default)();
   const clipPathId = `${id}-clip-path`;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveChartContainer.ResponsiveChartContainer, {
+    ref: ref,
     series: series.map(s => (0, _extends2.default)({
       type: 'bar'
     }, s)),
@@ -73,7 +74,8 @@ function BarChart(props) {
       id: clipPathId
     }), children]
   });
-}
+});
+exports.BarChart = BarChart;
 process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/BarChart/BarPlot.js

@@ -7,11 +7,37 @@ exports.BarPlot = BarPlot;
 var React = _interopRequireWildcard(require("react"));
 var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
-var _useScale = require("../hooks/useScale");
 var _BarElement = require("./BarElement");
+var _axis = require("../models/axis");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/**
+ * Solution of the equations
+ * W = barWidth * N + offset * (N-1)
+ * offset / (offset + barWidth) = r
+ * @param bandWidth The width available to place bars.
+ * @param numberOfGroups The number of bars to place in that space.
+ * @param gapRatio The ratio of the gap between bars over the bar width.
+ * @returns The bar width and the offset between bars.
+ */function getBandSize({
+  bandWidth: W,
+  numberOfGroups: N,
+  gapRatio: r
+}) {
+  if (r === 0) {
+    return {
+      barWidth: W / N,
+      offset: 0
+    };
+  }
+  const barWidth = W / (N + (N - 1) * r);
+  const offset = r * barWidth;
+  return {
+    barWidth,
+    offset
+  };
+}
 function BarPlot() {
   const seriesData = React.useContext(_SeriesContextProvider.SeriesContext).bar;
   const axisData = React.useContext(_CartesianContextProvider.CartesianContext);
@@ -37,19 +63,27 @@ function BarPlot() {
       return groupIds.flatMap(seriesId => {
         const xAxisKey = series[seriesId].xAxisKey ?? defaultXAxisId;
         const yAxisKey = series[seriesId].yAxisKey ?? defaultYAxisId;
-        const xScale = xAxis[xAxisKey].scale;
-        const yScale = yAxis[yAxisKey].scale;
-        if (!(0, _useScale.isBandScale)(xScale)) {
-          throw new Error(`Axis with id "${xAxisKey}" shoud be of type "band" to display the bar series ${stackingGroups}`);
+        const xAxisConfig = xAxis[xAxisKey];
+        const yAxisConfig = yAxis[yAxisKey];
+        if (!(0, _axis.isBandScaleConfig)(xAxisConfig)) {
+          throw new Error(`Axis with id "${xAxisKey}" shoud be of type "band" to display the bar series of id "${seriesId}"`);
         }
         if (xAxis[xAxisKey].data === undefined) {
           throw new Error(`Axis with id "${xAxisKey}" shoud have data property`);
         }
+        const xScale = xAxisConfig.scale;
+        const yScale = yAxisConfig.scale;
 
         // Currently assuming all bars are vertical
         const bandWidth = xScale.bandwidth();
-        const barWidth = 0.9 * bandWidth / stackingGroups.length;
-        const offset = 0.05 * bandWidth;
+        const {
+          barWidth,
+          offset
+        } = getBandSize({
+          bandWidth,
+          numberOfGroups: stackingGroups.length,
+          gapRatio: xAxisConfig.barGapRatio
+        });
 
         // @ts-ignore TODO: fix when adding a correct API for customisation
         const {
@@ -62,7 +96,7 @@ function BarPlot() {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarElement.BarElement, {
             id: seriesId,
             dataIndex: dataIndex,
-            x: xScale(xAxis[xAxisKey].data?.[dataIndex]) + groupIndex * barWidth + offset,
+            x: xScale(xAxis[xAxisKey].data?.[dataIndex]) + groupIndex * (barWidth + offset),
             y: yScale(value),
             height: yScale(baseline) - yScale(value),
             width: barWidth,