@mui/x-charts-pro 8.0.0-beta.2 → 8.0.0
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/BarChartPro/BarChartPro.js +788 -9
- package/CHANGELOG.md +423 -96
- package/ChartDataProviderPro/ChartDataProviderPro.d.ts +1 -1
- package/ChartDataProviderPro/ChartDataProviderPro.js +27 -22
- package/ChartDataProviderPro/useChartDataProviderProProps.d.ts +1 -2
- package/ChartDataProviderPro/useChartDataProviderProProps.js +0 -2
- package/FunnelChart/FunnelChart.js +73 -4
- package/FunnelChart/categoryAxis.types.d.ts +3 -2
- package/FunnelChart/funnelSectionClasses.d.ts +5 -0
- package/FunnelChart/funnelSectionClasses.js +1 -1
- package/FunnelChart/index.d.ts +1 -0
- package/FunnelChart/index.js +12 -0
- package/FunnelChart/useFunnelChartProps.js +3 -3
- package/Heatmap/Heatmap.d.ts +1 -1
- package/Heatmap/Heatmap.js +4 -3
- package/Heatmap/{HeatmapTooltip.js → HeatmapTooltip/HeatmapTooltip.js} +30 -34
- package/Heatmap/HeatmapTooltip/HeatmapTooltipAxesValue.d.ts +4 -0
- package/Heatmap/HeatmapTooltip/HeatmapTooltipAxesValue.js +26 -0
- package/Heatmap/HeatmapTooltip/index.d.ts +1 -0
- package/Heatmap/HeatmapTooltip/index.js +16 -0
- package/Heatmap/heatmapClasses.d.ts +5 -0
- package/Heatmap/heatmapClasses.js +1 -1
- package/Heatmap/index.d.ts +1 -1
- package/LineChartPro/LineChartPro.js +788 -9
- package/ScatterChartPro/ScatterChartPro.js +788 -9
- package/esm/BarChartPro/BarChartPro.js +788 -9
- package/esm/ChartDataProviderPro/ChartDataProviderPro.d.ts +1 -1
- package/esm/ChartDataProviderPro/ChartDataProviderPro.js +28 -23
- package/esm/ChartDataProviderPro/useChartDataProviderProProps.d.ts +1 -2
- package/esm/ChartDataProviderPro/useChartDataProviderProProps.js +0 -2
- package/esm/FunnelChart/FunnelChart.js +73 -4
- package/esm/FunnelChart/categoryAxis.types.d.ts +3 -2
- package/esm/FunnelChart/funnelSectionClasses.d.ts +5 -0
- package/esm/FunnelChart/funnelSectionClasses.js +1 -1
- package/esm/FunnelChart/index.d.ts +1 -0
- package/esm/FunnelChart/index.js +1 -0
- package/esm/FunnelChart/useFunnelChartProps.js +3 -3
- package/esm/Heatmap/Heatmap.d.ts +1 -1
- package/esm/Heatmap/Heatmap.js +4 -3
- package/{modern/Heatmap → esm/Heatmap/HeatmapTooltip}/HeatmapTooltip.js +30 -34
- package/esm/Heatmap/HeatmapTooltip/HeatmapTooltipAxesValue.d.ts +4 -0
- package/esm/Heatmap/HeatmapTooltip/HeatmapTooltipAxesValue.js +22 -0
- package/esm/Heatmap/HeatmapTooltip/index.d.ts +1 -0
- package/esm/Heatmap/HeatmapTooltip/index.js +1 -0
- package/esm/Heatmap/heatmapClasses.d.ts +5 -0
- package/esm/Heatmap/heatmapClasses.js +1 -1
- package/esm/Heatmap/index.d.ts +1 -1
- package/esm/Heatmap/index.js +1 -1
- package/esm/LineChartPro/LineChartPro.js +788 -9
- package/esm/ScatterChartPro/ScatterChartPro.js +788 -9
- package/esm/index.js +1 -1
- package/esm/internals/plugins/useChartProZoom/useChartProZoom.js +28 -35
- package/esm/internals/plugins/useChartProZoom/useChartProZoom.selectors.d.ts +7 -7
- package/index.js +1 -1
- package/internals/plugins/useChartProZoom/useChartProZoom.js +28 -34
- package/internals/plugins/useChartProZoom/useChartProZoom.selectors.d.ts +7 -7
- package/package.json +9 -19
- package/esm/Heatmap/HeatmapTooltip.js +0 -288
- package/esm/internals/utils/releaseInfo.d.ts +0 -1
- package/esm/internals/utils/releaseInfo.js +0 -13
- package/internals/utils/releaseInfo.d.ts +0 -1
- package/internals/utils/releaseInfo.js +0 -21
- package/modern/BarChartPro/BarChartPro.d.ts +0 -18
- package/modern/BarChartPro/BarChartPro.js +0 -404
- package/modern/BarChartPro/BarChartPro.plugins.d.ts +0 -4
- package/modern/BarChartPro/BarChartPro.plugins.js +0 -3
- package/modern/BarChartPro/index.d.ts +0 -1
- package/modern/BarChartPro/index.js +0 -1
- package/modern/ChartContainerPro/ChartContainerPro.d.ts +0 -35
- package/modern/ChartContainerPro/ChartContainerPro.js +0 -290
- package/modern/ChartContainerPro/index.d.ts +0 -2
- package/modern/ChartContainerPro/index.js +0 -2
- package/modern/ChartContainerPro/useChartContainerProProps.d.ts +0 -9
- package/modern/ChartContainerPro/useChartContainerProProps.js +0 -35
- package/modern/ChartDataProviderPro/ChartDataProviderPro.d.ts +0 -37
- package/modern/ChartDataProviderPro/ChartDataProviderPro.js +0 -106
- package/modern/ChartDataProviderPro/index.d.ts +0 -2
- package/modern/ChartDataProviderPro/index.js +0 -2
- package/modern/ChartDataProviderPro/useChartDataProviderProProps.d.ts +0 -8
- package/modern/ChartDataProviderPro/useChartDataProviderProProps.js +0 -15
- package/modern/FunnelChart/FunnelChart.d.ts +0 -37
- package/modern/FunnelChart/FunnelChart.js +0 -212
- package/modern/FunnelChart/FunnelPlot.d.ts +0 -16
- package/modern/FunnelChart/FunnelPlot.js +0 -184
- package/modern/FunnelChart/FunnelSection.d.ts +0 -15
- package/modern/FunnelChart/FunnelSection.js +0 -56
- package/modern/FunnelChart/categoryAxis.types.d.ts +0 -24
- package/modern/FunnelChart/categoryAxis.types.js +0 -1
- package/modern/FunnelChart/funnel.types.d.ts +0 -124
- package/modern/FunnelChart/funnel.types.js +0 -1
- package/modern/FunnelChart/funnelPlotSlots.types.d.ts +0 -20
- package/modern/FunnelChart/funnelPlotSlots.types.js +0 -1
- package/modern/FunnelChart/funnelSectionClasses.d.ts +0 -13
- package/modern/FunnelChart/funnelSectionClasses.js +0 -20
- package/modern/FunnelChart/funnelSlots.types.d.ts +0 -19
- package/modern/FunnelChart/funnelSlots.types.js +0 -1
- package/modern/FunnelChart/funnelStepCurve.d.ts +0 -4
- package/modern/FunnelChart/funnelStepCurve.js +0 -67
- package/modern/FunnelChart/index.d.ts +0 -7
- package/modern/FunnelChart/index.js +0 -5
- package/modern/FunnelChart/labelUtils.d.ts +0 -42
- package/modern/FunnelChart/labelUtils.js +0 -166
- package/modern/FunnelChart/seriesConfig/extremums.d.ts +0 -3
- package/modern/FunnelChart/seriesConfig/extremums.js +0 -42
- package/modern/FunnelChart/seriesConfig/getColor.d.ts +0 -3
- package/modern/FunnelChart/seriesConfig/getColor.js +0 -4
- package/modern/FunnelChart/seriesConfig/getSeriesWithDefaultValues.d.ts +0 -3
- package/modern/FunnelChart/seriesConfig/getSeriesWithDefaultValues.js +0 -11
- package/modern/FunnelChart/seriesConfig/index.d.ts +0 -2
- package/modern/FunnelChart/seriesConfig/index.js +0 -15
- package/modern/FunnelChart/seriesConfig/legend.d.ts +0 -3
- package/modern/FunnelChart/seriesConfig/legend.js +0 -25
- package/modern/FunnelChart/seriesConfig/seriesProcessor.d.ts +0 -3
- package/modern/FunnelChart/seriesConfig/seriesProcessor.js +0 -89
- package/modern/FunnelChart/seriesConfig/tooltip.d.ts +0 -3
- package/modern/FunnelChart/seriesConfig/tooltip.js +0 -29
- package/modern/FunnelChart/useFunnelChartProps.d.ts +0 -30
- package/modern/FunnelChart/useFunnelChartProps.js +0 -161
- package/modern/Heatmap/Heatmap.d.ts +0 -57
- package/modern/Heatmap/Heatmap.js +0 -387
- package/modern/Heatmap/Heatmap.plugins.d.ts +0 -3
- package/modern/Heatmap/Heatmap.plugins.js +0 -2
- package/modern/Heatmap/HeatmapItem.d.ts +0 -49
- package/modern/Heatmap/HeatmapItem.js +0 -106
- package/modern/Heatmap/HeatmapPlot.d.ts +0 -8
- package/modern/Heatmap/HeatmapPlot.js +0 -59
- package/modern/Heatmap/HeatmapTooltip.d.ts +0 -16
- package/modern/Heatmap/heatmapClasses.d.ts +0 -11
- package/modern/Heatmap/heatmapClasses.js +0 -14
- package/modern/Heatmap/index.d.ts +0 -4
- package/modern/Heatmap/index.js +0 -4
- package/modern/Heatmap/seriesConfig/extremums.d.ts +0 -2
- package/modern/Heatmap/seriesConfig/extremums.js +0 -8
- package/modern/Heatmap/seriesConfig/getColor.d.ts +0 -3
- package/modern/Heatmap/seriesConfig/getColor.js +0 -15
- package/modern/Heatmap/seriesConfig/getSeriesWithDefaultValues.d.ts +0 -3
- package/modern/Heatmap/seriesConfig/getSeriesWithDefaultValues.js +0 -8
- package/modern/Heatmap/seriesConfig/index.d.ts +0 -2
- package/modern/Heatmap/seriesConfig/index.js +0 -14
- package/modern/Heatmap/seriesConfig/seriesProcessor.d.ts +0 -3
- package/modern/Heatmap/seriesConfig/seriesProcessor.js +0 -21
- package/modern/Heatmap/seriesConfig/tooltip.d.ts +0 -3
- package/modern/Heatmap/seriesConfig/tooltip.js +0 -25
- package/modern/LineChartPro/LineChartPro.d.ts +0 -17
- package/modern/LineChartPro/LineChartPro.js +0 -401
- package/modern/LineChartPro/LineChartPro.plugins.d.ts +0 -4
- package/modern/LineChartPro/LineChartPro.plugins.js +0 -3
- package/modern/LineChartPro/index.d.ts +0 -1
- package/modern/LineChartPro/index.js +0 -1
- package/modern/ScatterChartPro/ScatterChartPro.d.ts +0 -17
- package/modern/ScatterChartPro/ScatterChartPro.js +0 -395
- package/modern/ScatterChartPro/ScatterChartPro.plugins.d.ts +0 -4
- package/modern/ScatterChartPro/ScatterChartPro.plugins.js +0 -3
- package/modern/ScatterChartPro/index.d.ts +0 -1
- package/modern/ScatterChartPro/index.js +0 -1
- package/modern/hooks/index.d.ts +0 -2
- package/modern/hooks/index.js +0 -2
- package/modern/hooks/useFunnelSeries.d.ts +0 -33
- package/modern/hooks/useFunnelSeries.js +0 -42
- package/modern/hooks/useHeatmapSeries.d.ts +0 -33
- package/modern/hooks/useHeatmapSeries.js +0 -42
- package/modern/hooks/zoom/index.d.ts +0 -1
- package/modern/hooks/zoom/index.js +0 -1
- package/modern/hooks/zoom/useIsZoomInteracting.d.ts +0 -6
- package/modern/hooks/zoom/useIsZoomInteracting.js +0 -14
- package/modern/index.d.ts +0 -34
- package/modern/index.js +0 -45
- package/modern/internals/plugins/allPlugins.d.ts +0 -8
- package/modern/internals/plugins/allPlugins.js +0 -6
- package/modern/internals/plugins/useChartProZoom/index.d.ts +0 -3
- package/modern/internals/plugins/useChartProZoom/index.js +0 -3
- package/modern/internals/plugins/useChartProZoom/useChartProZoom.d.ts +0 -3
- package/modern/internals/plugins/useChartProZoom/useChartProZoom.js +0 -350
- package/modern/internals/plugins/useChartProZoom/useChartProZoom.selectors.d.ts +0 -203
- package/modern/internals/plugins/useChartProZoom/useChartProZoom.selectors.js +0 -4
- package/modern/internals/plugins/useChartProZoom/useChartProZoom.types.d.ts +0 -53
- package/modern/internals/plugins/useChartProZoom/useChartProZoom.types.js +0 -1
- package/modern/internals/plugins/useChartProZoom/useChartProZoom.utils.d.ts +0 -45
- package/modern/internals/plugins/useChartProZoom/useChartProZoom.utils.js +0 -126
- package/modern/internals/utils/releaseInfo.d.ts +0 -1
- package/modern/internals/utils/releaseInfo.js +0 -13
- package/modern/models/index.d.ts +0 -2
- package/modern/models/index.js +0 -2
- package/modern/models/seriesType/heatmap.d.ts +0 -28
- package/modern/models/seriesType/heatmap.js +0 -1
- package/modern/models/seriesType/index.d.ts +0 -1
- package/modern/models/seriesType/index.js +0 -1
- package/modern/package.json +0 -1
- package/modern/themeAugmentation/components.d.ts +0 -23
- package/modern/themeAugmentation/index.d.ts +0 -4
- package/modern/themeAugmentation/index.js +0 -0
- package/modern/themeAugmentation/overrides.d.ts +0 -11
- package/modern/themeAugmentation/props.d.ts +0 -20
- package/modern/typeOverloads/index.d.ts +0 -1
- package/modern/typeOverloads/index.js +0 -1
- package/modern/typeOverloads/modules.d.ts +0 -33
- package/modern/typeOverloads/modules.js +0 -1
- package/tsconfig.build.tsbuildinfo +0 -1
- /package/Heatmap/{HeatmapTooltip.d.ts → HeatmapTooltip/HeatmapTooltip.d.ts} +0 -0
- /package/esm/Heatmap/{HeatmapTooltip.d.ts → HeatmapTooltip/HeatmapTooltip.d.ts} +0 -0
|
@@ -1,212 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
4
|
-
import * as React from 'react';
|
|
5
|
-
import { useThemeProps } from '@mui/material/styles';
|
|
6
|
-
import PropTypes from 'prop-types';
|
|
7
|
-
import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay';
|
|
8
|
-
import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
|
|
9
|
-
import { ChartsWrapper } from '@mui/x-charts/internals';
|
|
10
|
-
import { ChartsLegend } from '@mui/x-charts/ChartsLegend';
|
|
11
|
-
import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
|
|
12
|
-
import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
|
|
13
|
-
import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
|
|
14
|
-
import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
|
|
15
|
-
import { FunnelPlot } from "./FunnelPlot.js";
|
|
16
|
-
import { useFunnelChartProps } from "./useFunnelChartProps.js";
|
|
17
|
-
import { seriesConfig as funnelSeriesConfig } from "./seriesConfig/index.js";
|
|
18
|
-
import { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
|
|
19
|
-
import { ChartDataProviderPro } from "../ChartDataProviderPro/index.js";
|
|
20
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
21
|
-
const seriesConfig = {
|
|
22
|
-
funnel: funnelSeriesConfig
|
|
23
|
-
};
|
|
24
|
-
const FunnelChart = /*#__PURE__*/React.forwardRef(function FunnelChart(props, ref) {
|
|
25
|
-
const themedProps = useThemeProps({
|
|
26
|
-
props,
|
|
27
|
-
name: 'MuiFunnelChart'
|
|
28
|
-
});
|
|
29
|
-
const {
|
|
30
|
-
chartContainerProps,
|
|
31
|
-
funnelPlotProps,
|
|
32
|
-
overlayProps,
|
|
33
|
-
legendProps,
|
|
34
|
-
clipPathGroupProps,
|
|
35
|
-
chartsAxisProps,
|
|
36
|
-
clipPathProps,
|
|
37
|
-
chartsWrapperProps,
|
|
38
|
-
axisHighlightProps,
|
|
39
|
-
children
|
|
40
|
-
} = useFunnelChartProps(themedProps);
|
|
41
|
-
const {
|
|
42
|
-
chartDataProviderProProps,
|
|
43
|
-
chartsSurfaceProps
|
|
44
|
-
} = useChartContainerProProps(chartContainerProps, ref);
|
|
45
|
-
const Tooltip = themedProps.slots?.tooltip ?? ChartsTooltip;
|
|
46
|
-
return /*#__PURE__*/_jsx(ChartDataProviderPro, _extends({}, chartDataProviderProProps, {
|
|
47
|
-
seriesConfig: seriesConfig,
|
|
48
|
-
children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
|
|
49
|
-
children: [!themedProps.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
|
|
50
|
-
children: [/*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
|
|
51
|
-
children: [/*#__PURE__*/_jsx(FunnelPlot, _extends({}, funnelPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
|
|
52
|
-
})), !themedProps.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, themedProps.slotProps?.tooltip, {
|
|
53
|
-
trigger: "item"
|
|
54
|
-
})), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
|
|
55
|
-
}))]
|
|
56
|
-
}))
|
|
57
|
-
}));
|
|
58
|
-
});
|
|
59
|
-
process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
|
|
60
|
-
// ----------------------------- Warning --------------------------------
|
|
61
|
-
// | These PropTypes are generated from the TypeScript type definitions |
|
|
62
|
-
// | To update them edit the TypeScript types and run "pnpm proptypes" |
|
|
63
|
-
// ----------------------------------------------------------------------
|
|
64
|
-
apiRef: PropTypes.shape({
|
|
65
|
-
current: PropTypes.shape({
|
|
66
|
-
setZoomData: PropTypes.func.isRequired
|
|
67
|
-
})
|
|
68
|
-
}),
|
|
69
|
-
/**
|
|
70
|
-
* The configuration of axes highlight.
|
|
71
|
-
* Default is set to 'band' in the bar direction.
|
|
72
|
-
* Depends on `layout` prop.
|
|
73
|
-
* @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.
|
|
74
|
-
*/
|
|
75
|
-
axisHighlight: PropTypes.shape({
|
|
76
|
-
x: PropTypes.oneOf(['band', 'line', 'none']),
|
|
77
|
-
y: PropTypes.oneOf(['band', 'line', 'none'])
|
|
78
|
-
}),
|
|
79
|
-
/**
|
|
80
|
-
* The configuration of the category axis.
|
|
81
|
-
*
|
|
82
|
-
* @default { position: 'none' }
|
|
83
|
-
*/
|
|
84
|
-
categoryAxis: PropTypes.shape({
|
|
85
|
-
categories: PropTypes.arrayOf(PropTypes.string),
|
|
86
|
-
disableLine: PropTypes.bool,
|
|
87
|
-
disableTicks: PropTypes.bool,
|
|
88
|
-
id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
89
|
-
position: PropTypes.oneOf(['bottom', 'left', 'none', 'right', 'top']),
|
|
90
|
-
scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
|
|
91
|
-
size: PropTypes.number,
|
|
92
|
-
tickLabelStyle: PropTypes.object,
|
|
93
|
-
tickSize: PropTypes.number
|
|
94
|
-
}),
|
|
95
|
-
children: PropTypes.node,
|
|
96
|
-
className: PropTypes.string,
|
|
97
|
-
/**
|
|
98
|
-
* Color palette used to colorize multiple series.
|
|
99
|
-
* @default rainbowSurgePalette
|
|
100
|
-
*/
|
|
101
|
-
colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
|
|
102
|
-
desc: PropTypes.string,
|
|
103
|
-
/**
|
|
104
|
-
* If `true`, the charts will not listen to the mouse move event.
|
|
105
|
-
* It might break interactive features, but will improve performance.
|
|
106
|
-
* @default false
|
|
107
|
-
*/
|
|
108
|
-
disableAxisListener: PropTypes.bool,
|
|
109
|
-
/**
|
|
110
|
-
* The height of the chart in px. If not defined, it takes the height of the parent element.
|
|
111
|
-
*/
|
|
112
|
-
height: PropTypes.number,
|
|
113
|
-
/**
|
|
114
|
-
* If `true`, the legend is not rendered.
|
|
115
|
-
* @default false
|
|
116
|
-
*/
|
|
117
|
-
hideLegend: PropTypes.bool,
|
|
118
|
-
/**
|
|
119
|
-
* The highlighted item.
|
|
120
|
-
* Used when the highlight is controlled.
|
|
121
|
-
*/
|
|
122
|
-
highlightedItem: PropTypes.shape({
|
|
123
|
-
dataIndex: PropTypes.number,
|
|
124
|
-
seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
|
|
125
|
-
}),
|
|
126
|
-
/**
|
|
127
|
-
* This prop is used to help implement the accessibility logic.
|
|
128
|
-
* If you don't provide this prop. It falls back to a randomly generated id.
|
|
129
|
-
*/
|
|
130
|
-
id: PropTypes.string,
|
|
131
|
-
/**
|
|
132
|
-
* The list of zoom data related to each axis.
|
|
133
|
-
* Used to initialize the zoom in a specific configuration without controlling it.
|
|
134
|
-
*/
|
|
135
|
-
initialZoom: PropTypes.arrayOf(PropTypes.shape({
|
|
136
|
-
axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
|
|
137
|
-
end: PropTypes.number.isRequired,
|
|
138
|
-
start: PropTypes.number.isRequired
|
|
139
|
-
})),
|
|
140
|
-
/**
|
|
141
|
-
* If `true`, a loading overlay is displayed.
|
|
142
|
-
* @default false
|
|
143
|
-
*/
|
|
144
|
-
loading: PropTypes.bool,
|
|
145
|
-
/**
|
|
146
|
-
* The margin between the SVG and the drawing area.
|
|
147
|
-
* It's used for leaving some space for extra information such as the x- and y-axis or legend.
|
|
148
|
-
*
|
|
149
|
-
* Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
|
|
150
|
-
*/
|
|
151
|
-
margin: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
|
|
152
|
-
bottom: PropTypes.number,
|
|
153
|
-
left: PropTypes.number,
|
|
154
|
-
right: PropTypes.number,
|
|
155
|
-
top: PropTypes.number
|
|
156
|
-
})]),
|
|
157
|
-
/**
|
|
158
|
-
* The function called for onClick events.
|
|
159
|
-
* The second argument contains information about all line/bar elements at the current mouse position.
|
|
160
|
-
* @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
|
|
161
|
-
* @param {null | AxisData} data The data about the clicked axis and items associated with it.
|
|
162
|
-
*/
|
|
163
|
-
onAxisClick: PropTypes.func,
|
|
164
|
-
/**
|
|
165
|
-
* The callback fired when the highlighted item changes.
|
|
166
|
-
*
|
|
167
|
-
* @param {HighlightItemData | null} highlightedItem The newly highlighted item.
|
|
168
|
-
*/
|
|
169
|
-
onHighlightChange: PropTypes.func,
|
|
170
|
-
/**
|
|
171
|
-
* Callback fired when a funnel item is clicked.
|
|
172
|
-
* @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
|
|
173
|
-
* @param {FunnelItemIdentifier} funnelItemIdentifier The funnel item identifier.
|
|
174
|
-
*/
|
|
175
|
-
onItemClick: PropTypes.func,
|
|
176
|
-
/**
|
|
177
|
-
* The series to display in the funnel chart.
|
|
178
|
-
* An array of [[FunnelSeriesType]] objects.
|
|
179
|
-
*/
|
|
180
|
-
series: PropTypes.arrayOf(PropTypes.object).isRequired,
|
|
181
|
-
/**
|
|
182
|
-
* If `true`, animations are skipped.
|
|
183
|
-
* If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
|
|
184
|
-
*/
|
|
185
|
-
skipAnimation: PropTypes.bool,
|
|
186
|
-
/**
|
|
187
|
-
* The props used for each component slot.
|
|
188
|
-
* @default {}
|
|
189
|
-
*/
|
|
190
|
-
slotProps: PropTypes.object,
|
|
191
|
-
/**
|
|
192
|
-
* Overridable component slots.
|
|
193
|
-
* @default {}
|
|
194
|
-
*/
|
|
195
|
-
slots: PropTypes.object,
|
|
196
|
-
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
|
197
|
-
theme: PropTypes.oneOf(['dark', 'light']),
|
|
198
|
-
title: PropTypes.string,
|
|
199
|
-
/**
|
|
200
|
-
* The width of the chart in px. If not defined, it takes the width of the parent element.
|
|
201
|
-
*/
|
|
202
|
-
width: PropTypes.number,
|
|
203
|
-
/**
|
|
204
|
-
* The list of zoom data related to each axis.
|
|
205
|
-
*/
|
|
206
|
-
zoomData: PropTypes.arrayOf(PropTypes.shape({
|
|
207
|
-
axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
|
|
208
|
-
end: PropTypes.number.isRequired,
|
|
209
|
-
start: PropTypes.number.isRequired
|
|
210
|
-
}))
|
|
211
|
-
} : void 0;
|
|
212
|
-
export { FunnelChart };
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { FunnelItemIdentifier } from "./funnel.types.js";
|
|
3
|
-
import { FunnelPlotSlotExtension } from "./funnelPlotSlots.types.js";
|
|
4
|
-
export interface FunnelPlotProps extends FunnelPlotSlotExtension {
|
|
5
|
-
/**
|
|
6
|
-
* Callback fired when a funnel item is clicked.
|
|
7
|
-
* @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
|
|
8
|
-
* @param {FunnelItemIdentifier} funnelItemIdentifier The funnel item identifier.
|
|
9
|
-
*/
|
|
10
|
-
onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, funnelItemIdentifier: FunnelItemIdentifier) => void;
|
|
11
|
-
}
|
|
12
|
-
declare function FunnelPlot(props: FunnelPlotProps): React.JSX.Element;
|
|
13
|
-
declare namespace FunnelPlot {
|
|
14
|
-
var propTypes: any;
|
|
15
|
-
}
|
|
16
|
-
export { FunnelPlot };
|
|
@@ -1,184 +0,0 @@
|
|
|
1
|
-
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
2
|
-
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
3
|
-
const _excluded = ["onItemClick"];
|
|
4
|
-
import * as React from 'react';
|
|
5
|
-
import PropTypes from 'prop-types';
|
|
6
|
-
import { line as d3Line } from '@mui/x-charts-vendor/d3-shape';
|
|
7
|
-
import { getCurveFactory, cartesianSeriesTypes } from '@mui/x-charts/internals';
|
|
8
|
-
import { useXAxes, useYAxes } from '@mui/x-charts/hooks';
|
|
9
|
-
import { useTheme } from '@mui/material/styles';
|
|
10
|
-
import { FunnelSection } from "./FunnelSection.js";
|
|
11
|
-
import { alignLabel, positionLabel } from "./labelUtils.js";
|
|
12
|
-
import { funnelHorizontalStepCurve, funnelVerticalStepCurve } from "./funnelStepCurve.js";
|
|
13
|
-
import { useFunnelSeriesContext } from "../hooks/useFunnelSeries.js";
|
|
14
|
-
import { createElement as _createElement } from "react";
|
|
15
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
16
|
-
cartesianSeriesTypes.addType('funnel');
|
|
17
|
-
const getFunnelCurve = (curve, isHorizontal) => {
|
|
18
|
-
if (curve === 'step') {
|
|
19
|
-
return isHorizontal ? funnelHorizontalStepCurve : funnelVerticalStepCurve;
|
|
20
|
-
}
|
|
21
|
-
if (curve === 'bump') {
|
|
22
|
-
return isHorizontal ? getCurveFactory('bumpX') : getCurveFactory('bumpY');
|
|
23
|
-
}
|
|
24
|
-
return getCurveFactory(curve ?? 'linear');
|
|
25
|
-
};
|
|
26
|
-
const useAggregatedData = () => {
|
|
27
|
-
const seriesData = useFunnelSeriesContext();
|
|
28
|
-
const {
|
|
29
|
-
xAxis,
|
|
30
|
-
xAxisIds
|
|
31
|
-
} = useXAxes();
|
|
32
|
-
const {
|
|
33
|
-
yAxis,
|
|
34
|
-
yAxisIds
|
|
35
|
-
} = useYAxes();
|
|
36
|
-
const allData = React.useMemo(() => {
|
|
37
|
-
if (seriesData === undefined) {
|
|
38
|
-
return [];
|
|
39
|
-
}
|
|
40
|
-
const {
|
|
41
|
-
series,
|
|
42
|
-
seriesOrder
|
|
43
|
-
} = seriesData;
|
|
44
|
-
const defaultXAxisId = xAxisIds[0];
|
|
45
|
-
const defaultYAxisId = yAxisIds[0];
|
|
46
|
-
const isHorizontal = Object.values(series).some(s => s.layout === 'horizontal');
|
|
47
|
-
const result = seriesOrder.map(seriesId => {
|
|
48
|
-
const currentSeries = series[seriesId];
|
|
49
|
-
const xAxisId = currentSeries.xAxisId ?? defaultXAxisId;
|
|
50
|
-
const yAxisId = currentSeries.yAxisId ?? defaultYAxisId;
|
|
51
|
-
const valueFormatter = currentSeries.valueFormatter;
|
|
52
|
-
const baseScaleConfig = isHorizontal ? xAxis[xAxisId] : yAxis[yAxisId];
|
|
53
|
-
const isXAxisBand = xAxis[xAxisId].scaleType === 'band';
|
|
54
|
-
const isYAxisBand = yAxis[yAxisId].scaleType === 'band';
|
|
55
|
-
const bandWidth = (isXAxisBand || isYAxisBand) && baseScaleConfig.scale?.bandwidth() || 0;
|
|
56
|
-
const xScale = xAxis[xAxisId].scale;
|
|
57
|
-
const yScale = yAxis[yAxisId].scale;
|
|
58
|
-
const curve = getFunnelCurve(currentSeries.curve, isHorizontal);
|
|
59
|
-
const xPosition = (value, bandIndex, stackOffset, useBand) => {
|
|
60
|
-
if (isXAxisBand) {
|
|
61
|
-
const position = xScale(bandIndex);
|
|
62
|
-
return useBand ? position + bandWidth : position;
|
|
63
|
-
}
|
|
64
|
-
return xScale(isHorizontal ? value + (stackOffset || 0) : value);
|
|
65
|
-
};
|
|
66
|
-
const yPosition = (value, bandIndex, stackOffset, useBand) => {
|
|
67
|
-
if (isYAxisBand) {
|
|
68
|
-
const position = yScale(bandIndex);
|
|
69
|
-
return useBand ? position + bandWidth : position;
|
|
70
|
-
}
|
|
71
|
-
return yScale(isHorizontal ? value : value + (stackOffset || 0));
|
|
72
|
-
};
|
|
73
|
-
return currentSeries.dataPoints.map((values, dataIndex) => {
|
|
74
|
-
const color = currentSeries.data[dataIndex].color;
|
|
75
|
-
const id = `${seriesId}-${dataIndex}`;
|
|
76
|
-
const sectionLabel = typeof currentSeries.sectionLabel === 'function' ? currentSeries.sectionLabel({
|
|
77
|
-
dataIndex,
|
|
78
|
-
seriesId,
|
|
79
|
-
value: currentSeries.data[dataIndex].value
|
|
80
|
-
}) : currentSeries.sectionLabel;
|
|
81
|
-
const line = d3Line().x(d => xPosition(d.x, baseScaleConfig.data?.[dataIndex], d.stackOffset, d.useBandWidth)).y(d => yPosition(d.y, baseScaleConfig.data?.[dataIndex], d.stackOffset, d.useBandWidth)).curve(curve);
|
|
82
|
-
return {
|
|
83
|
-
d: line(values),
|
|
84
|
-
color,
|
|
85
|
-
id,
|
|
86
|
-
seriesId,
|
|
87
|
-
dataIndex,
|
|
88
|
-
label: sectionLabel !== false && _extends({}, positionLabel(_extends({}, sectionLabel, {
|
|
89
|
-
xPosition,
|
|
90
|
-
yPosition,
|
|
91
|
-
isHorizontal,
|
|
92
|
-
values,
|
|
93
|
-
dataIndex,
|
|
94
|
-
baseScaleData: baseScaleConfig.data ?? []
|
|
95
|
-
})), alignLabel(sectionLabel ?? {}), {
|
|
96
|
-
value: valueFormatter ? valueFormatter(currentSeries.data[dataIndex], {
|
|
97
|
-
dataIndex
|
|
98
|
-
}) : currentSeries.data[dataIndex].value?.toLocaleString()
|
|
99
|
-
})
|
|
100
|
-
};
|
|
101
|
-
});
|
|
102
|
-
});
|
|
103
|
-
return result.flat();
|
|
104
|
-
}, [seriesData, xAxis, xAxisIds, yAxis, yAxisIds]);
|
|
105
|
-
return allData;
|
|
106
|
-
};
|
|
107
|
-
function FunnelPlot(props) {
|
|
108
|
-
const {
|
|
109
|
-
onItemClick
|
|
110
|
-
} = props,
|
|
111
|
-
other = _objectWithoutPropertiesLoose(props, _excluded);
|
|
112
|
-
const theme = useTheme();
|
|
113
|
-
const data = useAggregatedData();
|
|
114
|
-
return /*#__PURE__*/_jsxs(React.Fragment, {
|
|
115
|
-
children: [data.map(({
|
|
116
|
-
d,
|
|
117
|
-
color,
|
|
118
|
-
id,
|
|
119
|
-
seriesId,
|
|
120
|
-
dataIndex
|
|
121
|
-
}) => /*#__PURE__*/_createElement(FunnelSection, _extends({}, other, {
|
|
122
|
-
d: d,
|
|
123
|
-
color: color,
|
|
124
|
-
key: id,
|
|
125
|
-
dataIndex: dataIndex,
|
|
126
|
-
seriesId: seriesId,
|
|
127
|
-
onClick: onItemClick && (event => {
|
|
128
|
-
onItemClick(event, {
|
|
129
|
-
type: 'funnel',
|
|
130
|
-
seriesId,
|
|
131
|
-
dataIndex
|
|
132
|
-
});
|
|
133
|
-
})
|
|
134
|
-
}))), data.map(({
|
|
135
|
-
id,
|
|
136
|
-
label
|
|
137
|
-
}) => {
|
|
138
|
-
if (!label) {
|
|
139
|
-
return null;
|
|
140
|
-
}
|
|
141
|
-
return /*#__PURE__*/_jsx("text", {
|
|
142
|
-
x: label.x,
|
|
143
|
-
y: label.y,
|
|
144
|
-
textAnchor: label.textAnchor,
|
|
145
|
-
dominantBaseline: label.dominantBaseline,
|
|
146
|
-
stroke: "none",
|
|
147
|
-
pointerEvents: "none",
|
|
148
|
-
fontFamily: theme.typography.body2.fontFamily,
|
|
149
|
-
fontSize: theme.typography.body2.fontSize,
|
|
150
|
-
fontSizeAdjust: theme.typography.body2.fontSizeAdjust,
|
|
151
|
-
fontWeight: theme.typography.body2.fontWeight,
|
|
152
|
-
letterSpacing: theme.typography.body2.letterSpacing,
|
|
153
|
-
fontStretch: theme.typography.body2.fontStretch,
|
|
154
|
-
fontStyle: theme.typography.body2.fontStyle,
|
|
155
|
-
fontVariant: theme.typography.body2.fontVariant,
|
|
156
|
-
fill: (theme.vars || theme)?.palette?.text?.primary,
|
|
157
|
-
children: label.value
|
|
158
|
-
}, id);
|
|
159
|
-
})]
|
|
160
|
-
});
|
|
161
|
-
}
|
|
162
|
-
process.env.NODE_ENV !== "production" ? FunnelPlot.propTypes = {
|
|
163
|
-
// ----------------------------- Warning --------------------------------
|
|
164
|
-
// | These PropTypes are generated from the TypeScript type definitions |
|
|
165
|
-
// | To update them edit the TypeScript types and run "pnpm proptypes" |
|
|
166
|
-
// ----------------------------------------------------------------------
|
|
167
|
-
/**
|
|
168
|
-
* Callback fired when a funnel item is clicked.
|
|
169
|
-
* @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
|
|
170
|
-
* @param {FunnelItemIdentifier} funnelItemIdentifier The funnel item identifier.
|
|
171
|
-
*/
|
|
172
|
-
onItemClick: PropTypes.func,
|
|
173
|
-
/**
|
|
174
|
-
* The props used for each component slot.
|
|
175
|
-
* @default {}
|
|
176
|
-
*/
|
|
177
|
-
slotProps: PropTypes.object,
|
|
178
|
-
/**
|
|
179
|
-
* Overridable component slots.
|
|
180
|
-
* @default {}
|
|
181
|
-
*/
|
|
182
|
-
slots: PropTypes.object
|
|
183
|
-
} : void 0;
|
|
184
|
-
export { FunnelPlot };
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { SeriesId } from '@mui/x-charts/internals';
|
|
3
|
-
import { FunnelSectionClasses } from "./funnelSectionClasses.js";
|
|
4
|
-
export interface FunnelSectionProps extends Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> {
|
|
5
|
-
seriesId: SeriesId;
|
|
6
|
-
dataIndex: number;
|
|
7
|
-
color: string;
|
|
8
|
-
classes?: Partial<FunnelSectionClasses>;
|
|
9
|
-
}
|
|
10
|
-
export declare const FunnelSectionPath: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, React.SVGProps<SVGPathElement>, {}>;
|
|
11
|
-
/**
|
|
12
|
-
* @ignore - internal component.
|
|
13
|
-
*/
|
|
14
|
-
declare const FunnelSection: React.ForwardRefExoticComponent<FunnelSectionProps & React.RefAttributes<{}>>;
|
|
15
|
-
export { FunnelSection };
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
4
|
-
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
5
|
-
const _excluded = ["seriesId", "dataIndex", "classes", "color", "onClick", "className"];
|
|
6
|
-
import * as React from 'react';
|
|
7
|
-
import { styled } from '@mui/material/styles';
|
|
8
|
-
import { useInteractionItemProps, consumeSlots } from '@mui/x-charts/internals';
|
|
9
|
-
import { useItemHighlighted } from '@mui/x-charts/hooks';
|
|
10
|
-
import clsx from 'clsx';
|
|
11
|
-
import { useUtilityClasses } from "./funnelSectionClasses.js";
|
|
12
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
-
export const FunnelSectionPath = styled('path')(() => ({
|
|
14
|
-
transition: 'opacity 0.2s ease-in, fill 0.2s ease-in'
|
|
15
|
-
}));
|
|
16
|
-
|
|
17
|
-
/**
|
|
18
|
-
* @ignore - internal component.
|
|
19
|
-
*/
|
|
20
|
-
const FunnelSection = consumeSlots('MuiFunnelSection', 'funnelSection', {
|
|
21
|
-
classesResolver: useUtilityClasses
|
|
22
|
-
}, /*#__PURE__*/React.forwardRef(function FunnelSection(props, ref) {
|
|
23
|
-
const {
|
|
24
|
-
seriesId,
|
|
25
|
-
dataIndex,
|
|
26
|
-
classes,
|
|
27
|
-
color,
|
|
28
|
-
onClick,
|
|
29
|
-
className
|
|
30
|
-
} = props,
|
|
31
|
-
other = _objectWithoutPropertiesLoose(props, _excluded);
|
|
32
|
-
const interactionProps = useInteractionItemProps({
|
|
33
|
-
type: 'funnel',
|
|
34
|
-
seriesId,
|
|
35
|
-
dataIndex
|
|
36
|
-
});
|
|
37
|
-
const {
|
|
38
|
-
isFaded,
|
|
39
|
-
isHighlighted
|
|
40
|
-
} = useItemHighlighted({
|
|
41
|
-
seriesId,
|
|
42
|
-
dataIndex
|
|
43
|
-
});
|
|
44
|
-
return /*#__PURE__*/_jsx(FunnelSectionPath, _extends({}, interactionProps, {
|
|
45
|
-
filter: isHighlighted ? 'brightness(120%)' : undefined,
|
|
46
|
-
opacity: isFaded ? 0.3 : 1,
|
|
47
|
-
fill: color,
|
|
48
|
-
stroke: "none",
|
|
49
|
-
cursor: onClick ? 'pointer' : 'unset',
|
|
50
|
-
onClick: onClick,
|
|
51
|
-
className: clsx(classes?.root, className, isHighlighted && classes?.highlighted, isFaded && classes?.faded)
|
|
52
|
-
}, other, {
|
|
53
|
-
ref: ref
|
|
54
|
-
}));
|
|
55
|
-
}));
|
|
56
|
-
export { FunnelSection };
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { AxisConfig, ScaleName } from '@mui/x-charts/models';
|
|
2
|
-
import { MakeOptional } from '@mui/x-internals/types';
|
|
3
|
-
export type CategoryAxis = {
|
|
4
|
-
/**
|
|
5
|
-
* The categories to be displayed on the axis.
|
|
6
|
-
* The order of the categories is the order in which they are displayed.
|
|
7
|
-
*/
|
|
8
|
-
categories?: string[];
|
|
9
|
-
/**
|
|
10
|
-
* The position of the axis.
|
|
11
|
-
* - 'left' - The axis is positioned on the left side of the chart.
|
|
12
|
-
* - 'right' - The axis is positioned on the right side of the chart.
|
|
13
|
-
* - 'top' - The axis is positioned on the top side of the chart.
|
|
14
|
-
* - 'bottom' - The axis is positioned on the bottom side of the chart.
|
|
15
|
-
* - 'none' - The axis is not displayed.
|
|
16
|
-
*/
|
|
17
|
-
position?: 'left' | 'right' | 'top' | 'bottom' | 'none';
|
|
18
|
-
/**
|
|
19
|
-
* The size of the axis.
|
|
20
|
-
* - If the axis is horizontal, the size is the height of the axis.
|
|
21
|
-
* - If the axis is vertical, the size is the width of the axis.
|
|
22
|
-
*/
|
|
23
|
-
size?: number;
|
|
24
|
-
} & MakeOptional<Pick<AxisConfig<ScaleName, any>, 'disableLine' | 'disableTicks' | 'scaleType' | 'tickLabelStyle' | 'tickSize' | 'id'>, 'id'>;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,124 +0,0 @@
|
|
|
1
|
-
import { ChartsLabelMarkProps } from '@mui/x-charts/ChartsLabel';
|
|
2
|
-
import { CommonSeriesType, CartesianSeriesType, CommonDefaultizedProps, SeriesId } from '@mui/x-charts/internals';
|
|
3
|
-
import { CurveType, Position } from '@mui/x-charts/models';
|
|
4
|
-
import { DefaultizedProps, MakeRequired } from '@mui/x-internals/types';
|
|
5
|
-
export type FunnelItemId = string | number;
|
|
6
|
-
export type FunnelCurveType = Extract<CurveType, 'linear' | 'step'> | 'bump';
|
|
7
|
-
export type FunnelValueType = {
|
|
8
|
-
/**
|
|
9
|
-
* A unique identifier of the funnel section.
|
|
10
|
-
*/
|
|
11
|
-
id?: FunnelItemId;
|
|
12
|
-
/**
|
|
13
|
-
* The value of the funnel section.
|
|
14
|
-
*/
|
|
15
|
-
value: number;
|
|
16
|
-
/**
|
|
17
|
-
* The label to display on the tooltip, funnel section, or the legend. It can be a string or a function.
|
|
18
|
-
*/
|
|
19
|
-
label?: string | ((location: 'tooltip' | 'legend' | 'section') => string);
|
|
20
|
-
/**
|
|
21
|
-
* The color of the funnel section
|
|
22
|
-
*/
|
|
23
|
-
color?: string;
|
|
24
|
-
/**
|
|
25
|
-
* Defines the mark type for the funnel item.
|
|
26
|
-
* @default 'square'
|
|
27
|
-
*/
|
|
28
|
-
labelMarkType?: ChartsLabelMarkProps['type'];
|
|
29
|
-
};
|
|
30
|
-
export interface FunnelSeriesType extends Omit<CommonSeriesType<FunnelValueType>, 'color'>, CartesianSeriesType {
|
|
31
|
-
type: 'funnel';
|
|
32
|
-
/**
|
|
33
|
-
* Data associated to the funnel section.
|
|
34
|
-
*/
|
|
35
|
-
data: Readonly<FunnelValueType[]>;
|
|
36
|
-
/**
|
|
37
|
-
* The label to display on the tooltip or the legend. It can be a string or a function.
|
|
38
|
-
*/
|
|
39
|
-
label?: string | ((location: 'tooltip' | 'legend') => string);
|
|
40
|
-
/**
|
|
41
|
-
* Layout of the funnel.
|
|
42
|
-
* @default 'vertical'
|
|
43
|
-
*/
|
|
44
|
-
layout?: 'horizontal' | 'vertical';
|
|
45
|
-
/**
|
|
46
|
-
* The type of curve to use for the line. Read more about curves at
|
|
47
|
-
* [line interpolation](https://mui.com/x/react-charts/lines/#interpolation).
|
|
48
|
-
* @default 'linear'
|
|
49
|
-
*/
|
|
50
|
-
curve?: FunnelCurveType;
|
|
51
|
-
/**
|
|
52
|
-
* The label configuration for the funnel plot.
|
|
53
|
-
* Allows to customize the position and margin of the label that is displayed on the funnel sections.
|
|
54
|
-
*
|
|
55
|
-
* If set to `false`, the label will not be displayed.
|
|
56
|
-
* @default { vertical: 'middle', horizontal: 'center' }
|
|
57
|
-
*/
|
|
58
|
-
sectionLabel?: FunnelLabelOptions | ((item: FunnelItem) => FunnelLabelOptions | false) | false;
|
|
59
|
-
}
|
|
60
|
-
/**
|
|
61
|
-
* An object that allows to identify a funnel item.
|
|
62
|
-
* Used for item interaction
|
|
63
|
-
*/
|
|
64
|
-
export type FunnelItemIdentifier = {
|
|
65
|
-
type: 'funnel';
|
|
66
|
-
/**
|
|
67
|
-
* The series id of the funnel.
|
|
68
|
-
*/
|
|
69
|
-
seriesId: SeriesId;
|
|
70
|
-
/**
|
|
71
|
-
* The index of the data point in the series.
|
|
72
|
-
*/
|
|
73
|
-
dataIndex: number;
|
|
74
|
-
};
|
|
75
|
-
export type FunnelItem = {
|
|
76
|
-
/**
|
|
77
|
-
* The series id of the funnel.
|
|
78
|
-
*/
|
|
79
|
-
seriesId: SeriesId;
|
|
80
|
-
/**
|
|
81
|
-
* The index of the data point in the series.
|
|
82
|
-
*/
|
|
83
|
-
dataIndex: number;
|
|
84
|
-
/**
|
|
85
|
-
* The value of the data point.
|
|
86
|
-
*/
|
|
87
|
-
value: number;
|
|
88
|
-
};
|
|
89
|
-
export interface DefaultizedFunnelSeriesType extends DefaultizedProps<FunnelSeriesType, CommonDefaultizedProps | 'layout'> {
|
|
90
|
-
dataPoints: FunnelDataPoints[][];
|
|
91
|
-
data: Readonly<MakeRequired<FunnelValueType, 'id' | 'color'>[]>;
|
|
92
|
-
}
|
|
93
|
-
export type FunnelDataPoints = Record<'x' | 'y', number> & {
|
|
94
|
-
useBandWidth: boolean;
|
|
95
|
-
stackOffset: number;
|
|
96
|
-
};
|
|
97
|
-
export type FunnelLabelOptions = {
|
|
98
|
-
/**
|
|
99
|
-
* The position of the label.
|
|
100
|
-
* @default { vertical: 'middle', horizontal: 'center' }
|
|
101
|
-
*/
|
|
102
|
-
position?: Position;
|
|
103
|
-
/**
|
|
104
|
-
* The text anchor of the label. Affects the horizontal alignment of the text.
|
|
105
|
-
*
|
|
106
|
-
* Default value depends on the position.
|
|
107
|
-
*/
|
|
108
|
-
textAnchor?: 'start' | 'middle' | 'end';
|
|
109
|
-
/**
|
|
110
|
-
* The dominant baseline of the label. Affects the vertical alignment of the text.
|
|
111
|
-
*
|
|
112
|
-
* Default value depends on the position.
|
|
113
|
-
*/
|
|
114
|
-
dominantBaseline?: 'auto' | 'baseline' | 'hanging' | 'middle' | 'central' | 'text-after-edge' | 'text-before-edge';
|
|
115
|
-
/**
|
|
116
|
-
* The offset of the label from the anchor point.
|
|
117
|
-
* If a single number is provided, the offset will be applied in both directions.
|
|
118
|
-
* @default 0
|
|
119
|
-
*/
|
|
120
|
-
offset?: number | {
|
|
121
|
-
x?: number;
|
|
122
|
-
y?: number;
|
|
123
|
-
};
|
|
124
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { FunnelSectionProps } from './FunnelSection';
|
|
3
|
-
export interface FunnelPlotSlots {
|
|
4
|
-
funnelSection?: React.ElementType<FunnelSectionProps>;
|
|
5
|
-
}
|
|
6
|
-
export interface FunnelPlotSlotProps {
|
|
7
|
-
funnelSection?: FunnelSectionProps;
|
|
8
|
-
}
|
|
9
|
-
export interface FunnelPlotSlotExtension {
|
|
10
|
-
/**
|
|
11
|
-
* Overridable component slots.
|
|
12
|
-
* @default {}
|
|
13
|
-
*/
|
|
14
|
-
slots?: FunnelPlotSlots;
|
|
15
|
-
/**
|
|
16
|
-
* The props used for each component slot.
|
|
17
|
-
* @default {}
|
|
18
|
-
*/
|
|
19
|
-
slotProps?: FunnelPlotSlotProps;
|
|
20
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import type { FunnelSectionProps } from './FunnelSection';
|
|
2
|
-
export interface FunnelSectionClasses {
|
|
3
|
-
/** Styles applied to the root element. */
|
|
4
|
-
root: string;
|
|
5
|
-
/** Styles applied to the root element if `highlighted={true}`. */
|
|
6
|
-
highlighted: string;
|
|
7
|
-
/** Styles applied to the root element if `faded={true}`. */
|
|
8
|
-
faded: string;
|
|
9
|
-
/** Styles applied to the label element. */
|
|
10
|
-
label: string;
|
|
11
|
-
}
|
|
12
|
-
export declare const useUtilityClasses: (props: FunnelSectionProps) => Record<"label" | "highlighted" | "faded" | "root", string>;
|
|
13
|
-
export declare const funnelSectionClasses: FunnelSectionClasses;
|