@mui/x-charts 8.11.2 → 8.11.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/BarChart/index.d.ts +1 -0
- package/BarChart/useBarChartProps.js +4 -3
- package/CHANGELOG.md +86 -0
- package/ChartsAxisHighlight/ChartsXAxisHighlight.js +4 -4
- package/ChartsAxisHighlight/ChartsYAxisHighlight.js +4 -4
- package/ChartsLegend/ChartsLegend.js +2 -1
- package/ChartsLegend/PiecewiseColorLegend.d.ts +2 -2
- package/ChartsLegend/PiecewiseColorLegend.js +32 -22
- package/ChartsLegend/piecewiseColorLegendClasses.d.ts +4 -0
- package/ChartsLegend/piecewiseColorLegendClasses.js +2 -2
- package/ChartsSurface/ChartsSurface.js +2 -1
- package/ChartsWrapper/ChartsWrapper.d.ts +4 -0
- package/ChartsWrapper/ChartsWrapper.js +73 -25
- package/ChartsXAxis/ChartsGroupedXAxisTicks.js +2 -2
- package/ChartsXAxis/ChartsXAxisImpl.js +3 -3
- package/ChartsXAxis/getVisibleLabels.js +5 -1
- package/ChartsYAxis/ChartsGroupedYAxisTicks.js +2 -2
- package/ChartsYAxis/ChartsYAxisImpl.js +3 -3
- package/LineChart/useAreaPlotData.js +2 -2
- package/LineChart/useLineChartProps.js +2 -1
- package/LineChart/useLinePlotData.js +2 -2
- package/PieChart/PieChart.js +1 -0
- package/RadarChart/RadarAxis/useRadarAxis.js +2 -2
- package/RadarChart/useRadarChartProps.js +2 -1
- package/ScatterChart/useScatterChartProps.js +2 -1
- package/Toolbar/Toolbar.js +2 -1
- package/esm/BarChart/index.d.ts +1 -0
- package/esm/BarChart/useBarChartProps.js +4 -3
- package/esm/ChartsAxisHighlight/ChartsXAxisHighlight.js +4 -4
- package/esm/ChartsAxisHighlight/ChartsYAxisHighlight.js +4 -4
- package/esm/ChartsLegend/ChartsLegend.js +2 -1
- package/esm/ChartsLegend/PiecewiseColorLegend.d.ts +2 -2
- package/esm/ChartsLegend/PiecewiseColorLegend.js +32 -22
- package/esm/ChartsLegend/piecewiseColorLegendClasses.d.ts +4 -0
- package/esm/ChartsLegend/piecewiseColorLegendClasses.js +2 -2
- package/esm/ChartsSurface/ChartsSurface.js +2 -1
- package/esm/ChartsWrapper/ChartsWrapper.d.ts +4 -0
- package/esm/ChartsWrapper/ChartsWrapper.js +73 -25
- package/esm/ChartsXAxis/ChartsGroupedXAxisTicks.js +2 -2
- package/esm/ChartsXAxis/ChartsXAxisImpl.js +3 -3
- package/esm/ChartsXAxis/getVisibleLabels.js +5 -1
- package/esm/ChartsYAxis/ChartsGroupedYAxisTicks.js +2 -2
- package/esm/ChartsYAxis/ChartsYAxisImpl.js +3 -3
- package/esm/LineChart/useAreaPlotData.js +2 -2
- package/esm/LineChart/useLineChartProps.js +2 -1
- package/esm/LineChart/useLinePlotData.js +2 -2
- package/esm/PieChart/PieChart.js +1 -0
- package/esm/RadarChart/RadarAxis/useRadarAxis.js +2 -2
- package/esm/RadarChart/useRadarChartProps.js +2 -1
- package/esm/ScatterChart/useScatterChartProps.js +2 -1
- package/esm/Toolbar/Toolbar.js +2 -1
- package/esm/hooks/useScale.js +2 -2
- package/esm/hooks/useTicks.js +2 -2
- package/esm/hooks/useTicksGrouped.js +2 -2
- package/esm/index.js +1 -1
- package/esm/internals/index.d.ts +1 -1
- package/esm/internals/index.js +1 -1
- package/esm/internals/invertScale.js +2 -2
- package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisValue.js +3 -3
- package/esm/internals/plugins/featurePlugins/useChartPolarAxis/getAxisIndex.js +2 -2
- package/esm/internals/scaleGuards.d.ts +4 -0
- package/esm/internals/scaleGuards.js +3 -0
- package/esm/models/axis.d.ts +3 -0
- package/hooks/useScale.js +2 -2
- package/hooks/useTicks.js +2 -2
- package/hooks/useTicksGrouped.js +2 -2
- package/index.js +1 -1
- package/internals/index.d.ts +1 -1
- package/internals/index.js +4 -4
- package/internals/invertScale.js +2 -2
- package/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisValue.js +3 -3
- package/internals/plugins/featurePlugins/useChartPolarAxis/getAxisIndex.js +2 -2
- package/internals/scaleGuards.d.ts +4 -0
- package/internals/{isBandScale.js → scaleGuards.js} +2 -2
- package/models/axis.d.ts +3 -0
- package/package.json +4 -4
- package/esm/internals/isBandScale.d.ts +0 -5
- package/esm/internals/isBandScale.js +0 -3
- package/internals/isBandScale.d.ts +0 -5
|
@@ -14,7 +14,7 @@ import { defaultProps, useUtilityClasses } from "./utilities.js";
|
|
|
14
14
|
import { isInfinity } from "../internals/isInfinity.js";
|
|
15
15
|
import { useDrawingArea } from "../hooks/useDrawingArea.js";
|
|
16
16
|
import { useIsHydrated } from "../hooks/useIsHydrated.js";
|
|
17
|
-
import {
|
|
17
|
+
import { isOrdinalScale } from "../internals/scaleGuards.js";
|
|
18
18
|
import { getStringSize } from "../internals/domUtils.js";
|
|
19
19
|
import { AxisRoot } from "../internals/components/AxisSharedComponents.js";
|
|
20
20
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -100,8 +100,8 @@ export function ChartsYAxisImpl(_ref) {
|
|
|
100
100
|
};
|
|
101
101
|
const axisLabelHeight = label == null ? 0 : getStringSize(label, axisLabelProps.style).height;
|
|
102
102
|
const domain = yScale.domain();
|
|
103
|
-
const
|
|
104
|
-
const skipTickRendering =
|
|
103
|
+
const isScaleOrdinal = isOrdinalScale(yScale);
|
|
104
|
+
const skipTickRendering = isScaleOrdinal ? domain.length === 0 : domain.some(isInfinity);
|
|
105
105
|
let children = null;
|
|
106
106
|
if (!skipTickRendering) {
|
|
107
107
|
children = 'groups' in axis && Array.isArray(axis.groups) ? /*#__PURE__*/_jsx(ChartsGroupedYAxisTicks, _extends({}, inProps)) : /*#__PURE__*/_jsx(ChartsSingleYAxisTicks, _extends({}, inProps, {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { area as d3Area } from '@mui/x-charts-vendor/d3-shape';
|
|
3
3
|
import { useChartGradientIdBuilder } from "../hooks/useChartGradientId.js";
|
|
4
|
-
import {
|
|
4
|
+
import { isOrdinalScale } from "../internals/scaleGuards.js";
|
|
5
5
|
import { getCurveFactory } from "../internals/getCurve.js";
|
|
6
6
|
import { getValueToPositionMapper, useLineSeriesContext, useXAxes, useYAxes } from "../hooks/index.js";
|
|
7
7
|
import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
|
|
@@ -52,7 +52,7 @@ export function useAreaPlotData(xAxes, yAxes) {
|
|
|
52
52
|
throw new Error(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
|
-
const shouldExpand = curve?.includes('step') && !strictStepCurve &&
|
|
55
|
+
const shouldExpand = curve?.includes('step') && !strictStepCurve && isOrdinalScale(xScale);
|
|
56
56
|
const formattedData = xData?.flatMap((x, index) => {
|
|
57
57
|
const nullData = data[index] == null;
|
|
58
58
|
if (shouldExpand) {
|
|
@@ -119,7 +119,8 @@ export const useLineChartProps = props => {
|
|
|
119
119
|
const chartsWrapperProps = {
|
|
120
120
|
sx,
|
|
121
121
|
legendPosition: props.slotProps?.legend?.position,
|
|
122
|
-
legendDirection: props.slotProps?.legend?.direction
|
|
122
|
+
legendDirection: props.slotProps?.legend?.direction,
|
|
123
|
+
hideLegend: props.hideLegend ?? false
|
|
123
124
|
};
|
|
124
125
|
return {
|
|
125
126
|
chartsWrapperProps,
|
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import { warnOnce } from '@mui/x-internals/warning';
|
|
3
3
|
import { line as d3Line } from '@mui/x-charts-vendor/d3-shape';
|
|
4
4
|
import { useChartGradientIdBuilder } from "../hooks/useChartGradientId.js";
|
|
5
|
-
import {
|
|
5
|
+
import { isOrdinalScale } from "../internals/scaleGuards.js";
|
|
6
6
|
import { getCurveFactory } from "../internals/getCurve.js";
|
|
7
7
|
import { getValueToPositionMapper, useLineSeriesContext, useXAxes, useYAxes } from "../hooks/index.js";
|
|
8
8
|
import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
|
|
@@ -50,7 +50,7 @@ export function useLinePlotData(xAxes, yAxes) {
|
|
|
50
50
|
warnOnce(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`, 'error');
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
|
-
const shouldExpand = curve?.includes('step') && !strictStepCurve &&
|
|
53
|
+
const shouldExpand = curve?.includes('step') && !strictStepCurve && isOrdinalScale(xScale);
|
|
54
54
|
const formattedData = xData?.flatMap((x, index) => {
|
|
55
55
|
const nullData = data[index] == null;
|
|
56
56
|
if (shouldExpand) {
|
package/esm/PieChart/PieChart.js
CHANGED
|
@@ -78,6 +78,7 @@ const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(inProps, ref) {
|
|
|
78
78
|
legendPosition: props.slotProps?.legend?.position,
|
|
79
79
|
legendDirection: props.slotProps?.legend?.direction ?? 'vertical',
|
|
80
80
|
sx: sx,
|
|
81
|
+
hideLegend: hideLegend ?? false,
|
|
81
82
|
children: [showToolbar && Toolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !hideLegend && /*#__PURE__*/_jsx(ChartsLegend, {
|
|
82
83
|
direction: props.slotProps?.legend?.direction ?? 'vertical',
|
|
83
84
|
slots: slots,
|
|
@@ -3,7 +3,7 @@ import { useRadiusAxes } from "../../hooks/useAxis.js";
|
|
|
3
3
|
import { useRotationScale } from "../../hooks/useScale.js";
|
|
4
4
|
import { useChartContext } from "../../context/ChartProvider/useChartContext.js";
|
|
5
5
|
import { selectorChartPolarCenter } from "../../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
|
|
6
|
-
import {
|
|
6
|
+
import { isOrdinalScale } from "../../internals/scaleGuards.js";
|
|
7
7
|
import { degToRad } from "../../internals/degToRad.js";
|
|
8
8
|
import { clampAngle } from "../../internals/clampAngle.js";
|
|
9
9
|
import { useSelector } from "../../internals/store/useSelector.js";
|
|
@@ -42,7 +42,7 @@ export function useRadarAxis(params) {
|
|
|
42
42
|
}, (_, index) => (index + 1) / divisions);
|
|
43
43
|
const radiusScale = radiusAxis[metric].scale;
|
|
44
44
|
const R = radiusScale.range()[1];
|
|
45
|
-
if (
|
|
45
|
+
if (isOrdinalScale(radiusScale)) {
|
|
46
46
|
if (process.env.NODE_ENV !== 'production') {
|
|
47
47
|
console.error('MUI X Charts: Radar chart does not support ordinal axes');
|
|
48
48
|
}
|
|
@@ -88,7 +88,8 @@ export const useScatterChartProps = props => {
|
|
|
88
88
|
const chartsWrapperProps = {
|
|
89
89
|
sx,
|
|
90
90
|
legendPosition: props.slotProps?.legend?.position,
|
|
91
|
-
legendDirection: props.slotProps?.legend?.direction
|
|
91
|
+
legendDirection: props.slotProps?.legend?.direction,
|
|
92
|
+
hideLegend: props.hideLegend ?? false
|
|
92
93
|
};
|
|
93
94
|
return {
|
|
94
95
|
chartsWrapperProps,
|
package/esm/Toolbar/Toolbar.js
CHANGED
|
@@ -25,7 +25,8 @@ const ToolbarRoot = styled('div', {
|
|
|
25
25
|
minHeight: 44,
|
|
26
26
|
boxSizing: 'border-box',
|
|
27
27
|
border: `1px solid ${(theme.vars || theme).palette.divider}`,
|
|
28
|
-
borderRadius: 4
|
|
28
|
+
borderRadius: 4,
|
|
29
|
+
gridArea: 'toolbar'
|
|
29
30
|
}));
|
|
30
31
|
export const Toolbar = /*#__PURE__*/React.forwardRef(function Toolbar(_ref, ref) {
|
|
31
32
|
let {
|
package/esm/hooks/useScale.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import { isOrdinalScale } from "../internals/scaleGuards.js";
|
|
4
4
|
import { useRadiusAxis, useRotationAxis, useXAxis, useYAxis } from "./useAxis.js";
|
|
5
5
|
|
|
6
6
|
/**
|
|
@@ -10,7 +10,7 @@ import { useRadiusAxis, useRotationAxis, useXAxis, useYAxis } from "./useAxis.js
|
|
|
10
10
|
* @returns {(value: any) => number} A function that map value to their position
|
|
11
11
|
*/
|
|
12
12
|
export function getValueToPositionMapper(scale) {
|
|
13
|
-
if (
|
|
13
|
+
if (isOrdinalScale(scale)) {
|
|
14
14
|
return value => (scale(value) ?? 0) + scale.bandwidth() / 2;
|
|
15
15
|
}
|
|
16
16
|
return value => scale(value);
|
package/esm/hooks/useTicks.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { useChartContext } from "../context/ChartProvider/index.js";
|
|
5
|
-
import {
|
|
5
|
+
import { isOrdinalScale } from "../internals/scaleGuards.js";
|
|
6
6
|
import { isInfinity } from "../internals/isInfinity.js";
|
|
7
7
|
const offsetRatio = {
|
|
8
8
|
start: 0,
|
|
@@ -22,7 +22,7 @@ export function getTicks(options) {
|
|
|
22
22
|
} = options;
|
|
23
23
|
|
|
24
24
|
// band scale
|
|
25
|
-
if (
|
|
25
|
+
if (isOrdinalScale(scale)) {
|
|
26
26
|
const domain = scale.domain();
|
|
27
27
|
const tickLabelPlacement = tickLabelPlacementProp ?? 'middle';
|
|
28
28
|
if (scale.bandwidth() > 0) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
3
|
import * as React from 'react';
|
|
4
|
-
import {
|
|
4
|
+
import { isOrdinalScale } from "../internals/scaleGuards.js";
|
|
5
5
|
const offsetRatio = {
|
|
6
6
|
start: 0,
|
|
7
7
|
extremities: 0,
|
|
@@ -62,7 +62,7 @@ function mapToGrouping(tickValues, groups, tickPlacement, tickLabelPlacement, sc
|
|
|
62
62
|
if (isNew) {
|
|
63
63
|
currentValueCount = 1;
|
|
64
64
|
// Calculate tick offset
|
|
65
|
-
const tickOffset =
|
|
65
|
+
const tickOffset = isOrdinalScale(scale) ? scale(tickValue) - (scale.step() - scale.bandwidth()) / 2 + offsetRatio[tickPlacement] * scale.step() : scale(tickValue);
|
|
66
66
|
|
|
67
67
|
// Calculate the label offset
|
|
68
68
|
const labelOffset = scale.step() * currentValueCount * (offsetRatio[tickLabelPlacement] - offsetRatio[tickPlacement]);
|
package/esm/index.js
CHANGED
package/esm/internals/index.d.ts
CHANGED
|
@@ -52,7 +52,7 @@ export * from "./colorScale.js";
|
|
|
52
52
|
export * from "./ticks.js";
|
|
53
53
|
export * from "./dateHelpers.js";
|
|
54
54
|
export * from "./invertScale.js";
|
|
55
|
-
export * from "./
|
|
55
|
+
export * from "./scaleGuards.js";
|
|
56
56
|
export * from "./findMinMax.js";
|
|
57
57
|
export { getAxisExtremum } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisExtremum.js";
|
|
58
58
|
export * from "../context/ChartProvider/index.js";
|
package/esm/internals/index.js
CHANGED
|
@@ -62,7 +62,7 @@ export * from "./colorScale.js";
|
|
|
62
62
|
export * from "./ticks.js";
|
|
63
63
|
export * from "./dateHelpers.js";
|
|
64
64
|
export * from "./invertScale.js";
|
|
65
|
-
export * from "./
|
|
65
|
+
export * from "./scaleGuards.js";
|
|
66
66
|
export * from "./findMinMax.js";
|
|
67
67
|
|
|
68
68
|
// contexts
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { isOrdinalScale } from "./scaleGuards.js";
|
|
2
2
|
export function invertScale(scale, data, value) {
|
|
3
|
-
if (
|
|
3
|
+
if (isOrdinalScale(scale)) {
|
|
4
4
|
const dataIndex = scale.bandwidth() === 0 ? Math.floor((value - Math.min(...scale.range()) + scale.step() / 2) / scale.step()) : Math.floor((value - Math.min(...scale.range())) / scale.step());
|
|
5
5
|
return data[dataIndex];
|
|
6
6
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { isOrdinalScale } from "../../../scaleGuards.js";
|
|
2
2
|
function getAsANumber(value) {
|
|
3
3
|
return value instanceof Date ? value.getTime() : value;
|
|
4
4
|
}
|
|
@@ -13,7 +13,7 @@ export function getAxisIndex(axisConfig, pointerValue) {
|
|
|
13
13
|
data: axisData,
|
|
14
14
|
reverse
|
|
15
15
|
} = axisConfig;
|
|
16
|
-
if (!
|
|
16
|
+
if (!isOrdinalScale(scale)) {
|
|
17
17
|
const value = scale.invert(pointerValue);
|
|
18
18
|
if (axisData === undefined) {
|
|
19
19
|
return -1;
|
|
@@ -51,7 +51,7 @@ export function getAxisValue(axisConfig, pointerValue, dataIndex) {
|
|
|
51
51
|
scale,
|
|
52
52
|
data: axisData
|
|
53
53
|
} = axisConfig;
|
|
54
|
-
if (!
|
|
54
|
+
if (!isOrdinalScale(scale)) {
|
|
55
55
|
if (dataIndex === null) {
|
|
56
56
|
return scale.invert(pointerValue);
|
|
57
57
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { isOrdinalScale } from "../../../scaleGuards.js";
|
|
2
2
|
import { clampAngleRad } from "../../../clampAngle.js";
|
|
3
3
|
|
|
4
4
|
/**
|
|
@@ -11,7 +11,7 @@ export function getAxisIndex(axisConfig, pointerValue) {
|
|
|
11
11
|
data: axisData,
|
|
12
12
|
reverse
|
|
13
13
|
} = axisConfig;
|
|
14
|
-
if (!
|
|
14
|
+
if (!isOrdinalScale(scale)) {
|
|
15
15
|
throw new Error('MUI X Charts: getAxisValue is not implemented for polare continuous axes.');
|
|
16
16
|
}
|
|
17
17
|
if (!axisData) {
|
package/esm/models/axis.d.ts
CHANGED
|
@@ -11,6 +11,9 @@ export type D3Scale<Domain extends {
|
|
|
11
11
|
toString(): string;
|
|
12
12
|
} = number | Date | string, Range = number, Output = number> = ScaleBand<Domain> | ScaleSymLog<Range, Output> | ScaleLogarithmic<Range, Output> | ScalePoint<Domain> | ScalePower<Range, Output> | ScaleTime<Range, Output> | ScaleLinear<Range, Output>;
|
|
13
13
|
export type D3ContinuousScale<Range = number, Output = number> = ScaleSymLog<Range, Output> | ScaleLogarithmic<Range, Output> | ScalePower<Range, Output> | ScaleTime<Range, Output> | ScaleLinear<Range, Output>;
|
|
14
|
+
export type D3OrdinalScale<Domain extends {
|
|
15
|
+
toString(): string;
|
|
16
|
+
} = number | Date | string> = ScaleBand<Domain> | ScalePoint<Domain>;
|
|
14
17
|
export interface ChartsAxisSlots {
|
|
15
18
|
/**
|
|
16
19
|
* Custom component for the axis main line.
|
package/hooks/useScale.js
CHANGED
|
@@ -9,7 +9,7 @@ exports.useRadiusScale = useRadiusScale;
|
|
|
9
9
|
exports.useRotationScale = useRotationScale;
|
|
10
10
|
exports.useXScale = useXScale;
|
|
11
11
|
exports.useYScale = useYScale;
|
|
12
|
-
var
|
|
12
|
+
var _scaleGuards = require("../internals/scaleGuards");
|
|
13
13
|
var _useAxis = require("./useAxis");
|
|
14
14
|
/**
|
|
15
15
|
* For a given scale return a function that map value to their position.
|
|
@@ -18,7 +18,7 @@ var _useAxis = require("./useAxis");
|
|
|
18
18
|
* @returns {(value: any) => number} A function that map value to their position
|
|
19
19
|
*/
|
|
20
20
|
function getValueToPositionMapper(scale) {
|
|
21
|
-
if ((0,
|
|
21
|
+
if ((0, _scaleGuards.isOrdinalScale)(scale)) {
|
|
22
22
|
return value => (scale(value) ?? 0) + scale.bandwidth() / 2;
|
|
23
23
|
}
|
|
24
24
|
return value => scale(value);
|
package/hooks/useTicks.js
CHANGED
|
@@ -9,7 +9,7 @@ exports.getTicks = getTicks;
|
|
|
9
9
|
exports.useTicks = useTicks;
|
|
10
10
|
var React = _interopRequireWildcard(require("react"));
|
|
11
11
|
var _ChartProvider = require("../context/ChartProvider");
|
|
12
|
-
var
|
|
12
|
+
var _scaleGuards = require("../internals/scaleGuards");
|
|
13
13
|
var _isInfinity = require("../internals/isInfinity");
|
|
14
14
|
const offsetRatio = {
|
|
15
15
|
start: 0,
|
|
@@ -29,7 +29,7 @@ function getTicks(options) {
|
|
|
29
29
|
} = options;
|
|
30
30
|
|
|
31
31
|
// band scale
|
|
32
|
-
if ((0,
|
|
32
|
+
if ((0, _scaleGuards.isOrdinalScale)(scale)) {
|
|
33
33
|
const domain = scale.domain();
|
|
34
34
|
const tickLabelPlacement = tickLabelPlacementProp ?? 'middle';
|
|
35
35
|
if (scale.bandwidth() > 0) {
|
package/hooks/useTicksGrouped.js
CHANGED
|
@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports.useTicksGrouped = useTicksGrouped;
|
|
9
9
|
var React = _interopRequireWildcard(require("react"));
|
|
10
|
-
var
|
|
10
|
+
var _scaleGuards = require("../internals/scaleGuards");
|
|
11
11
|
const offsetRatio = {
|
|
12
12
|
start: 0,
|
|
13
13
|
extremities: 0,
|
|
@@ -68,7 +68,7 @@ function mapToGrouping(tickValues, groups, tickPlacement, tickLabelPlacement, sc
|
|
|
68
68
|
if (isNew) {
|
|
69
69
|
currentValueCount = 1;
|
|
70
70
|
// Calculate tick offset
|
|
71
|
-
const tickOffset = (0,
|
|
71
|
+
const tickOffset = (0, _scaleGuards.isOrdinalScale)(scale) ? scale(tickValue) - (scale.step() - scale.bandwidth()) / 2 + offsetRatio[tickPlacement] * scale.step() : scale(tickValue);
|
|
72
72
|
|
|
73
73
|
// Calculate the label offset
|
|
74
74
|
const labelOffset = scale.step() * currentValueCount * (offsetRatio[tickLabelPlacement] - offsetRatio[tickPlacement]);
|
package/index.js
CHANGED
package/internals/index.d.ts
CHANGED
|
@@ -52,7 +52,7 @@ export * from "./colorScale.js";
|
|
|
52
52
|
export * from "./ticks.js";
|
|
53
53
|
export * from "./dateHelpers.js";
|
|
54
54
|
export * from "./invertScale.js";
|
|
55
|
-
export * from "./
|
|
55
|
+
export * from "./scaleGuards.js";
|
|
56
56
|
export * from "./findMinMax.js";
|
|
57
57
|
export { getAxisExtremum } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisExtremum.js";
|
|
58
58
|
export * from "../context/ChartProvider/index.js";
|
package/internals/index.js
CHANGED
|
@@ -604,15 +604,15 @@ Object.keys(_invertScale).forEach(function (key) {
|
|
|
604
604
|
}
|
|
605
605
|
});
|
|
606
606
|
});
|
|
607
|
-
var
|
|
608
|
-
Object.keys(
|
|
607
|
+
var _scaleGuards = require("./scaleGuards");
|
|
608
|
+
Object.keys(_scaleGuards).forEach(function (key) {
|
|
609
609
|
if (key === "default" || key === "__esModule") return;
|
|
610
610
|
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
611
|
-
if (key in exports && exports[key] ===
|
|
611
|
+
if (key in exports && exports[key] === _scaleGuards[key]) return;
|
|
612
612
|
Object.defineProperty(exports, key, {
|
|
613
613
|
enumerable: true,
|
|
614
614
|
get: function () {
|
|
615
|
-
return
|
|
615
|
+
return _scaleGuards[key];
|
|
616
616
|
}
|
|
617
617
|
});
|
|
618
618
|
});
|
package/internals/invertScale.js
CHANGED
|
@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.invertScale = invertScale;
|
|
7
|
-
var
|
|
7
|
+
var _scaleGuards = require("./scaleGuards");
|
|
8
8
|
function invertScale(scale, data, value) {
|
|
9
|
-
if ((0,
|
|
9
|
+
if ((0, _scaleGuards.isOrdinalScale)(scale)) {
|
|
10
10
|
const dataIndex = scale.bandwidth() === 0 ? Math.floor((value - Math.min(...scale.range()) + scale.step() / 2) / scale.step()) : Math.floor((value - Math.min(...scale.range())) / scale.step());
|
|
11
11
|
return data[dataIndex];
|
|
12
12
|
}
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.getAxisIndex = getAxisIndex;
|
|
7
7
|
exports.getAxisValue = getAxisValue;
|
|
8
|
-
var
|
|
8
|
+
var _scaleGuards = require("../../../scaleGuards");
|
|
9
9
|
function getAsANumber(value) {
|
|
10
10
|
return value instanceof Date ? value.getTime() : value;
|
|
11
11
|
}
|
|
@@ -20,7 +20,7 @@ function getAxisIndex(axisConfig, pointerValue) {
|
|
|
20
20
|
data: axisData,
|
|
21
21
|
reverse
|
|
22
22
|
} = axisConfig;
|
|
23
|
-
if (!(0,
|
|
23
|
+
if (!(0, _scaleGuards.isOrdinalScale)(scale)) {
|
|
24
24
|
const value = scale.invert(pointerValue);
|
|
25
25
|
if (axisData === undefined) {
|
|
26
26
|
return -1;
|
|
@@ -58,7 +58,7 @@ function getAxisValue(axisConfig, pointerValue, dataIndex) {
|
|
|
58
58
|
scale,
|
|
59
59
|
data: axisData
|
|
60
60
|
} = axisConfig;
|
|
61
|
-
if (!(0,
|
|
61
|
+
if (!(0, _scaleGuards.isOrdinalScale)(scale)) {
|
|
62
62
|
if (dataIndex === null) {
|
|
63
63
|
return scale.invert(pointerValue);
|
|
64
64
|
}
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.getAxisIndex = getAxisIndex;
|
|
7
|
-
var
|
|
7
|
+
var _scaleGuards = require("../../../scaleGuards");
|
|
8
8
|
var _clampAngle = require("../../../clampAngle");
|
|
9
9
|
/**
|
|
10
10
|
* For a pointer coordinate, this function returns the value and dataIndex associated.
|
|
@@ -16,7 +16,7 @@ function getAxisIndex(axisConfig, pointerValue) {
|
|
|
16
16
|
data: axisData,
|
|
17
17
|
reverse
|
|
18
18
|
} = axisConfig;
|
|
19
|
-
if (!(0,
|
|
19
|
+
if (!(0, _scaleGuards.isOrdinalScale)(scale)) {
|
|
20
20
|
throw new Error('MUI X Charts: getAxisValue is not implemented for polare continuous axes.');
|
|
21
21
|
}
|
|
22
22
|
if (!axisData) {
|
package/models/axis.d.ts
CHANGED
|
@@ -11,6 +11,9 @@ export type D3Scale<Domain extends {
|
|
|
11
11
|
toString(): string;
|
|
12
12
|
} = number | Date | string, Range = number, Output = number> = ScaleBand<Domain> | ScaleSymLog<Range, Output> | ScaleLogarithmic<Range, Output> | ScalePoint<Domain> | ScalePower<Range, Output> | ScaleTime<Range, Output> | ScaleLinear<Range, Output>;
|
|
13
13
|
export type D3ContinuousScale<Range = number, Output = number> = ScaleSymLog<Range, Output> | ScaleLogarithmic<Range, Output> | ScalePower<Range, Output> | ScaleTime<Range, Output> | ScaleLinear<Range, Output>;
|
|
14
|
+
export type D3OrdinalScale<Domain extends {
|
|
15
|
+
toString(): string;
|
|
16
|
+
} = number | Date | string> = ScaleBand<Domain> | ScalePoint<Domain>;
|
|
14
17
|
export interface ChartsAxisSlots {
|
|
15
18
|
/**
|
|
16
19
|
* Custom component for the axis main line.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mui/x-charts",
|
|
3
|
-
"version": "8.11.
|
|
3
|
+
"version": "8.11.3",
|
|
4
4
|
"author": "MUI Team",
|
|
5
5
|
"description": "The community edition of MUI X Charts components.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -34,9 +34,9 @@
|
|
|
34
34
|
"prop-types": "^15.8.1",
|
|
35
35
|
"reselect": "^5.1.1",
|
|
36
36
|
"use-sync-external-store": "^1.5.0",
|
|
37
|
-
"@mui/x-charts-vendor": "8.11.
|
|
38
|
-
"@mui/x-internals": "8.11.
|
|
39
|
-
"@mui/x-internal-gestures": "0.2.
|
|
37
|
+
"@mui/x-charts-vendor": "8.11.3",
|
|
38
|
+
"@mui/x-internals": "8.11.3",
|
|
39
|
+
"@mui/x-internal-gestures": "0.2.6"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
42
42
|
"@emotion/react": "^11.9.0",
|