vccs 0.1.0 → 0.3.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/README.md +151 -0
- package/dist/animation/Animate.d.ts +1 -1
- package/dist/cartesian/area/type.d.ts +3 -3
- package/dist/cartesian/bar/type.d.ts +1 -13
- package/dist/cartesian/brush/components/Slide.d.ts +1 -1
- package/dist/cartesian/brush/components/TravellerLayer.d.ts +1 -1
- package/dist/cartesian/brush/type.d.ts +2 -1
- package/dist/cartesian/cartesian-axis/CartesianAxis.d.ts +2 -1
- package/dist/cartesian/funnel/Funnel.d.ts +2 -0
- package/dist/cartesian/funnel/index.d.ts +2 -0
- package/dist/cartesian/funnel/type.d.ts +74 -6
- package/dist/cartesian/index.d.ts +2 -0
- package/dist/cartesian/line/Line.d.ts +7 -13
- package/dist/cartesian/line/type.d.ts +4 -17
- package/dist/cartesian/reference-area/ReferenceArea.d.ts +16 -16
- package/dist/cartesian/reference-dot/ReferenceDot.d.ts +143 -0
- package/dist/cartesian/reference-dot/index.d.ts +2 -0
- package/dist/cartesian/reference-line/ReferenceLine.d.ts +8 -8
- package/dist/cartesian/scatter/Scatter.d.ts +1 -1
- package/dist/chart/FunnelChart.d.ts +1 -0
- package/dist/chart/RechartsWrapper.d.ts +7 -3
- package/dist/chart/Surface.d.ts +2 -1
- package/dist/chart/Treemap.d.ts +237 -0
- package/dist/chart/generateCategoricalChart.d.ts +2 -1
- package/dist/chart/index.d.ts +2 -0
- package/dist/chart/treemapUtils.d.ts +22 -0
- package/dist/components/Customized.d.ts +23 -0
- package/dist/components/Text.d.ts +4 -4
- package/dist/components/Tooltip.d.ts +1 -1
- package/dist/components/index.d.ts +2 -0
- package/dist/components/label/Label.d.ts +3 -3
- package/dist/components/label/types.d.ts +1 -1
- package/dist/container/Surface.d.ts +3 -2
- package/dist/es/animation/Animate.mjs +48 -22
- package/dist/es/cartesian/GraphicalItemClipPath.mjs +16 -15
- package/dist/es/cartesian/area/ActivePoints.mjs +44 -40
- package/dist/es/cartesian/area/Area.mjs +42 -31
- package/dist/es/cartesian/area/ClipRect.mjs +79 -58
- package/dist/es/cartesian/area/RenderArea.mjs +142 -108
- package/dist/es/cartesian/area/hooks/useArea.mjs +71 -47
- package/dist/es/cartesian/area/type.mjs +13 -15
- package/dist/es/cartesian/area/utils.mjs +69 -49
- package/dist/es/cartesian/axis/XAxis.mjs +87 -73
- package/dist/es/cartesian/axis/YAxis.mjs +67 -56
- package/dist/es/cartesian/bar/Bar.mjs +78 -71
- package/dist/es/cartesian/bar/components/BarBackground.mjs +22 -19
- package/dist/es/cartesian/bar/components/BarRectangles.mjs +117 -80
- package/dist/es/cartesian/bar/hooks/useBar.mjs +49 -37
- package/dist/es/cartesian/bar/type.mjs +11 -25
- package/dist/es/cartesian/bar/utils.mjs +97 -70
- package/dist/es/cartesian/cartesian-axis/CartesianAxis.mjs +165 -115
- package/dist/es/cartesian/cartesian-grid/Background.mjs +19 -16
- package/dist/es/cartesian/cartesian-grid/CartesianGrid.mjs +116 -97
- package/dist/es/cartesian/cartesian-grid/HorizontalGridLines.mjs +24 -23
- package/dist/es/cartesian/cartesian-grid/HorizontalStripes.mjs +24 -24
- package/dist/es/cartesian/cartesian-grid/VerticalGridLines.mjs +23 -22
- package/dist/es/cartesian/cartesian-grid/VerticalStripes.mjs +24 -24
- package/dist/es/cartesian/cartesian-grid/const.mjs +317 -10
- package/dist/es/cartesian/cartesian-grid/utils.mjs +18 -13
- package/dist/es/cartesian/error-bar/ErrorBar.mjs +111 -83
- package/dist/es/cartesian/error-bar/ErrorBarContext.mjs +13 -12
- package/dist/es/cartesian/funnel/Funnel.mjs +162 -0
- package/dist/es/cartesian/funnel/type.mjs +78 -0
- package/dist/es/cartesian/funnel/utils.mjs +102 -0
- package/dist/es/cartesian/line/ActivePoints.mjs +45 -41
- package/dist/es/cartesian/line/Line.mjs +41 -37
- package/dist/es/cartesian/line/StaticLine.mjs +191 -122
- package/dist/es/cartesian/line/hooks/useLine.mjs +60 -44
- package/dist/es/cartesian/line/type.mjs +13 -18
- package/dist/es/cartesian/line/utils.mjs +27 -26
- package/dist/es/cartesian/reference-area/ReferenceArea.mjs +79 -78
- package/dist/es/cartesian/reference-dot/ReferenceDot.mjs +134 -0
- package/dist/es/cartesian/reference-line/ReferenceLine.mjs +93 -84
- package/dist/es/cartesian/scatter/Scatter.mjs +168 -140
- package/dist/es/cartesian/scatter/hooks/useScatter.mjs +18 -14
- package/dist/es/cartesian/useNeedsClip.mjs +18 -9
- package/dist/es/cartesian/utils/get-ticks.mjs +103 -68
- package/dist/es/cartesian/z-axis/ZAxis.mjs +30 -28
- package/dist/es/chart/AreaChart.mjs +5 -5
- package/dist/es/chart/BarChart.mjs +5 -5
- package/dist/es/chart/ComposedChart.mjs +5 -5
- package/dist/es/chart/FunnelChart.mjs +11 -0
- package/dist/es/chart/LegendPortalContext.mjs +3 -3
- package/dist/es/chart/LineChart.mjs +5 -5
- package/dist/es/chart/PieChart.mjs +5 -5
- package/dist/es/chart/RadarChart.mjs +5 -5
- package/dist/es/chart/RadialBarChart.mjs +5 -5
- package/dist/es/chart/RechartsWrapper.mjs +113 -89
- package/dist/es/chart/ScatterChart.mjs +5 -5
- package/dist/es/chart/Surface.mjs +3 -3
- package/dist/es/chart/Surface.vue_vue_type_script_setup_true_lang.mjs +51 -45
- package/dist/es/chart/TooltipPortalContext.mjs +3 -3
- package/dist/es/chart/Treemap.mjs +379 -0
- package/dist/es/chart/const.mjs +2 -2
- package/dist/es/chart/generateCategoricalChart.mjs +99 -89
- package/dist/es/chart/provideClipPathId.mjs +12 -7
- package/dist/es/chart/treemapUtils.mjs +32 -0
- package/dist/es/components/Cell.mjs +16 -4
- package/dist/es/components/Customized.mjs +43 -0
- package/dist/es/components/Text.mjs +3 -3
- package/dist/es/components/Text.vue_vue_type_script_setup_true_lang.mjs +106 -69
- package/dist/es/components/Tooltip.mjs +274 -199
- package/dist/es/components/label/Label.mjs +30 -26
- package/dist/es/components/label/LabelList.mjs +45 -39
- package/dist/es/components/label/types.mjs +10 -6
- package/dist/es/components/label/utils.mjs +194 -162
- package/dist/es/components/legend/Legend.mjs +82 -71
- package/dist/es/components/legend/LegendSymbol.mjs +40 -38
- package/dist/es/components/legend/hooks/useLegend.mjs +71 -46
- package/dist/es/components/legend/hooks/useLegendContent.mjs +52 -31
- package/dist/es/components/legend/type.mjs +2 -2
- package/dist/es/components/legend/utils.mjs +19 -11
- package/dist/es/components/utils.mjs +35 -22
- package/dist/es/container/ClipPath.mjs +14 -14
- package/dist/es/container/Layer.mjs +9 -7
- package/dist/es/container/ResponsiveContainer.mjs +3 -3
- package/dist/es/container/ResponsiveContainer.vue_vue_type_script_setup_true_lang.mjs +109 -77
- package/dist/es/container/Surface.mjs +25 -23
- package/dist/es/container/useSizeContext.mjs +3 -3
- package/dist/es/context/ChartDataContextProvider.mjs +19 -13
- package/dist/es/context/PanoramaContextProvider.mjs +15 -10
- package/dist/es/context/accessibilityContext.mjs +3 -3
- package/dist/es/context/cartesianLabelListContext.mjs +3 -3
- package/dist/es/context/chartLayoutContext.mjs +33 -30
- package/dist/es/context/cursorLayerContext.mjs +3 -3
- package/dist/es/context/graphicalLayerContext.mjs +3 -3
- package/dist/es/context/labelLayerContext.mjs +3 -3
- package/dist/es/context/polarLabelViewBoxContext.mjs +5 -5
- package/dist/es/context/useTooltipAxis.mjs +14 -12
- package/dist/es/events/useChartSynchronisation.mjs +91 -66
- package/dist/es/hooks/publicHooks.mjs +207 -0
- package/dist/es/hooks/useIsAnimating.mjs +28 -0
- package/dist/es/hooks/useSetupGraphicalItem.mjs +52 -43
- package/dist/es/index.mjs +54 -42
- package/dist/es/polar/pie/Pie.mjs +131 -115
- package/dist/es/polar/pie/type.mjs +8 -10
- package/dist/es/polar/radar/PolarAngleAxis.mjs +103 -84
- package/dist/es/polar/radar/PolarGrid.mjs +72 -59
- package/dist/es/polar/radar/PolarRadiusAxis.mjs +90 -65
- package/dist/es/polar/radar/Radar.mjs +181 -145
- package/dist/es/polar/radial-bar/RadialBar.mjs +161 -140
- package/dist/es/polar/radial-bar/type.mjs +9 -9
- package/dist/es/shape/Cross.mjs +11 -10
- package/dist/es/shape/Curve.mjs +71 -44
- package/dist/es/shape/Dot.mjs +12 -11
- package/dist/es/shape/Polygon.mjs +19 -0
- package/dist/es/shape/Rectangle.mjs +41 -30
- package/dist/es/shape/Sector.mjs +105 -79
- package/dist/es/shape/Symbols.mjs +45 -34
- package/dist/es/shape/Trapezoid.mjs +50 -0
- package/dist/es/state/ReportChartProps.mjs +23 -24
- package/dist/es/state/ReportMainChartProps.mjs +26 -21
- package/dist/es/state/ReportPolarOptions.mjs +23 -22
- package/dist/es/state/SetGraphicalItem.mjs +42 -27
- package/dist/es/state/SetLegendPayload.mjs +17 -13
- package/dist/es/state/SetTooltipEntrySettings.mjs +14 -12
- package/dist/es/state/brushSlice.mjs +12 -8
- package/dist/es/state/cartesianAxisSlice.mjs +23 -17
- package/dist/es/state/chartDataSlice.mjs +18 -13
- package/dist/es/state/externalEventsMiddleware.mjs +25 -15
- package/dist/es/state/graphicalItemsSlice.mjs +29 -25
- package/dist/es/state/hooks.mjs +24 -3
- package/dist/es/state/keyboardEventsMiddleware.mjs +50 -42
- package/dist/es/state/layoutSlice.mjs +18 -12
- package/dist/es/state/legendSlice.mjs +19 -14
- package/dist/es/state/mouseEventsMiddleware.mjs +31 -24
- package/dist/es/state/optionsSlice.mjs +14 -11
- package/dist/es/state/polarAxisSlice.mjs +15 -13
- package/dist/es/state/polarOptionsSlice.mjs +8 -6
- package/dist/es/state/reduxDevtoolsJsonStringifyReplacer.mjs +5 -3
- package/dist/es/state/referenceElementsSlice.mjs +21 -19
- package/dist/es/state/rootPropsSlice.mjs +20 -9
- package/dist/es/state/selectors/areaSelectors.mjs +65 -55
- package/dist/es/state/selectors/axisSelectors.mjs +784 -569
- package/dist/es/state/selectors/barSelectors.mjs +225 -162
- package/dist/es/state/selectors/brushSelectors.mjs +15 -14
- package/dist/es/state/selectors/combiners/combineActiveLabel.mjs +6 -5
- package/dist/es/state/selectors/combiners/combineActiveTooltipIndex.mjs +36 -27
- package/dist/es/state/selectors/combiners/combineAxisRangeWithReverse.mjs +5 -3
- package/dist/es/state/selectors/combiners/combineCoordinateForDefaultIndex.mjs +13 -11
- package/dist/es/state/selectors/combiners/combineTooltipInteractionState.mjs +26 -21
- package/dist/es/state/selectors/combiners/combineTooltipPayloadConfigurations.mjs +10 -6
- package/dist/es/state/selectors/common.mjs +2 -2
- package/dist/es/state/selectors/containerSelectors.mjs +5 -2
- package/dist/es/state/selectors/dataSelectors.mjs +28 -9
- package/dist/es/state/selectors/funnelSelectors.mjs +38 -0
- package/dist/es/state/selectors/legendSelectors.mjs +7 -6
- package/dist/es/state/selectors/lineSelectors.mjs +54 -47
- package/dist/es/state/selectors/pickAxisId.mjs +2 -2
- package/dist/es/state/selectors/pickAxisType.mjs +2 -2
- package/dist/es/state/selectors/pieSelectors.mjs +116 -81
- package/dist/es/state/selectors/polarAxisSelectors.mjs +113 -94
- package/dist/es/state/selectors/polarGridSelectors.mjs +13 -11
- package/dist/es/state/selectors/polarScaleSelectors.mjs +49 -46
- package/dist/es/state/selectors/polarSelectors.mjs +79 -62
- package/dist/es/state/selectors/radarSelectors.mjs +111 -91
- package/dist/es/state/selectors/radialBarSelectors.mjs +230 -183
- package/dist/es/state/selectors/rootPropsSelectors.mjs +11 -5
- package/dist/es/state/selectors/scatterSelectors.mjs +111 -95
- package/dist/es/state/selectors/selectActivePropsFromChartPointer.mjs +19 -17
- package/dist/es/state/selectors/selectAllAxes.mjs +8 -3
- package/dist/es/state/selectors/selectChartOffset.mjs +59 -50
- package/dist/es/state/selectors/selectChartOffsetInternal.mjs +55 -44
- package/dist/es/state/selectors/selectTooltipEventType.mjs +15 -14
- package/dist/es/state/selectors/selectTooltipPayloadSearcher.mjs +3 -3
- package/dist/es/state/selectors/selectTooltipSettings.mjs +2 -2
- package/dist/es/state/selectors/selectTooltipState.mjs +2 -2
- package/dist/es/state/selectors/selectors.mjs +94 -75
- package/dist/es/state/selectors/tooltipSelectors.mjs +253 -204
- package/dist/es/state/selectors/touchSelectors.mjs +17 -14
- package/dist/es/state/store.mjs +46 -46
- package/dist/es/state/tooltipSlice.mjs +64 -37
- package/dist/es/state/touchEventsMiddleware.mjs +35 -29
- package/dist/es/state/utils/useReportScale.mjs +16 -13
- package/dist/es/synchronisation/syncSelectors.mjs +3 -3
- package/dist/es/synchronisation/useChartSynchronisation.mjs +33 -19
- package/dist/es/types/common.mjs +12 -0
- package/dist/es/types/event.mjs +164 -2
- package/dist/es/utils/ReduceCSSCalc.mjs +81 -49
- package/dist/es/utils/VueUtils.mjs +35 -14
- package/dist/es/utils/attrs.mjs +43 -26
- package/dist/es/utils/cartesian.mjs +47 -15
- package/dist/es/utils/cell.mjs +28 -0
- package/dist/es/utils/chart.mjs +298 -197
- package/dist/es/utils/const.mjs +30 -2
- package/dist/es/utils/createCategoricalInverse.mjs +46 -0
- package/dist/es/utils/createContext.mjs +28 -9
- package/dist/es/utils/data-utils.mjs +9 -8
- package/dist/es/utils/data.mjs +35 -21
- package/dist/es/utils/events.mjs +5 -3
- package/dist/es/utils/getLinearRegression.mjs +28 -11
- package/dist/es/utils/grid.mjs +20 -5
- package/dist/es/utils/isDomainSpecifiedByUser.mjs +105 -54
- package/dist/es/utils/legend.mjs +13 -12
- package/dist/es/utils/log.mjs +10 -7
- package/dist/es/utils/payload/getUniqPayload.mjs +6 -4
- package/dist/es/utils/polar.mjs +37 -30
- package/dist/es/utils/props.mjs +16 -10
- package/dist/es/utils/resolveDefaultProps.mjs +23 -4
- package/dist/es/utils/scale/getNiceTickValues.mjs +127 -49
- package/dist/es/utils/scale/utils/arithmetic.mjs +49 -19
- package/dist/es/utils/scale/utils/utils.mjs +43 -24
- package/dist/es/utils/scale.mjs +46 -0
- package/dist/es/utils/style.mjs +24 -13
- package/dist/es/utils/tick.mjs +34 -23
- package/dist/es/utils/tooltip/translate.mjs +63 -49
- package/dist/es/utils/validate.mjs +40 -29
- package/dist/hooks/publicHooks.d.ts +143 -0
- package/dist/hooks/useIsAnimating.d.ts +14 -0
- package/dist/index.d.ts +1 -0
- package/dist/polar/pie/type.d.ts +2 -2
- package/dist/polar/radar/Radar.d.ts +4 -4
- package/dist/shape/Curve.d.ts +2 -1
- package/dist/shape/Polygon.d.ts +9 -0
- package/dist/shape/Rectangle.d.ts +0 -4
- package/dist/shape/Sector.d.ts +2 -2
- package/dist/shape/Symbols.d.ts +2 -1
- package/dist/shape/Trapezoid.d.ts +30 -0
- package/dist/shape/index.d.ts +2 -0
- package/dist/shape/types.d.ts +4 -5
- package/dist/state/ReportChartProps.d.ts +3 -3
- package/dist/state/graphicalItemsSlice.d.ts +1 -1
- package/dist/state/rootPropsSlice.d.ts +2 -2
- package/dist/state/selectors/axisSelectors.d.ts +5 -0
- package/dist/types/axis.d.ts +2 -2
- package/dist/types/bar.d.ts +2 -6
- package/dist/types/categorical.d.ts +2 -2
- package/dist/types/common.d.ts +7 -1
- package/dist/types/tooltip.d.ts +2 -2
- package/dist/utils/cell.d.ts +11 -0
- package/dist/utils/createCategoricalInverse.d.ts +16 -0
- package/dist/utils/scale.d.ts +23 -0
- package/package.json +2 -1
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
//#region src/state/selectors/combiners/combineTooltipPayloadConfigurations.ts
|
|
2
|
-
function
|
|
3
|
-
if (
|
|
4
|
-
if (
|
|
5
|
-
let
|
|
6
|
-
|
|
2
|
+
function combineTooltipPayloadConfigurations(tooltipState, tooltipEventType, trigger, defaultIndex) {
|
|
3
|
+
if (tooltipEventType === "axis") return tooltipState.tooltipItemPayloads;
|
|
4
|
+
if (tooltipState.tooltipItemPayloads.length === 0) return [];
|
|
5
|
+
let filterByDataKey;
|
|
6
|
+
if (trigger === "hover") filterByDataKey = tooltipState.itemInteraction.hover.dataKey;
|
|
7
|
+
else filterByDataKey = tooltipState.itemInteraction.click.dataKey;
|
|
8
|
+
if (tooltipState.syncInteraction.active && filterByDataKey == null) return tooltipState.tooltipItemPayloads;
|
|
9
|
+
if (filterByDataKey == null && defaultIndex != null) return [tooltipState.tooltipItemPayloads[0]];
|
|
10
|
+
return tooltipState.tooltipItemPayloads.filter((tpc) => tpc.settings?.dataKey === filterByDataKey);
|
|
7
11
|
}
|
|
8
12
|
//#endregion
|
|
9
|
-
export {
|
|
13
|
+
export { combineTooltipPayloadConfigurations };
|
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
//#region src/state/selectors/containerSelectors.ts
|
|
2
|
-
var
|
|
2
|
+
var selectChartWidth = (state) => state.layout.width;
|
|
3
|
+
var selectChartHeight = (state) => state.layout.height;
|
|
4
|
+
var selectContainerScale = (state) => state.layout.scale;
|
|
5
|
+
var selectMargin = (state) => state.layout.margin;
|
|
3
6
|
//#endregion
|
|
4
|
-
export {
|
|
7
|
+
export { selectChartHeight, selectChartWidth, selectContainerScale, selectMargin };
|
|
@@ -1,16 +1,35 @@
|
|
|
1
|
-
import { createSelector
|
|
1
|
+
import { createSelector } from "@reduxjs/toolkit";
|
|
2
2
|
//#region src/state/selectors/dataSelectors.ts
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
/**
|
|
4
|
+
* This selector always returns the data with the indexes set by a Brush.
|
|
5
|
+
* Trouble is, that might or might not be what you want.
|
|
6
|
+
*
|
|
7
|
+
* In charts with Brush, you will sometimes want to select the full range of data, and sometimes the one decided by the Brush
|
|
8
|
+
* - even if the Brush is active, the panorama inside the Brush should show the full range of data.
|
|
9
|
+
*
|
|
10
|
+
* So instead of this selector, consider using either selectChartDataAndAlwaysIgnoreIndexes or selectChartDataWithIndexesIfNotInPanorama
|
|
11
|
+
*
|
|
12
|
+
* @param state RechartsRootState
|
|
13
|
+
* @returns data defined on the chart root element, such as BarChart or ScatterChart
|
|
14
|
+
*/
|
|
15
|
+
var selectChartDataWithIndexes = (state) => state.chartData;
|
|
16
|
+
/**
|
|
17
|
+
* This selector will always return the full range of data, ignoring the indexes set by a Brush.
|
|
18
|
+
* Useful for when you want to render the full range of data, even if a Brush is active.
|
|
19
|
+
* For example: in the Brush panorama, in Legend, in Tooltip.
|
|
20
|
+
*/
|
|
21
|
+
var selectChartDataAndAlwaysIgnoreIndexes = createSelector([selectChartDataWithIndexes], (dataState) => {
|
|
22
|
+
const dataEndIndex = dataState.chartData != null ? dataState.chartData.length - 1 : 0;
|
|
5
23
|
return {
|
|
6
|
-
chartData:
|
|
7
|
-
computedData:
|
|
8
|
-
dataEndIndex
|
|
24
|
+
chartData: dataState.chartData,
|
|
25
|
+
computedData: dataState.computedData,
|
|
26
|
+
dataEndIndex,
|
|
9
27
|
dataStartIndex: 0
|
|
10
28
|
};
|
|
11
29
|
});
|
|
12
|
-
function
|
|
13
|
-
|
|
30
|
+
function selectChartDataWithIndexesIfNotInPanorama(state, _xAxisId, _yAxisId, isPanorama) {
|
|
31
|
+
if (isPanorama) return selectChartDataAndAlwaysIgnoreIndexes(state);
|
|
32
|
+
return selectChartDataWithIndexes(state);
|
|
14
33
|
}
|
|
15
34
|
//#endregion
|
|
16
|
-
export {
|
|
35
|
+
export { selectChartDataAndAlwaysIgnoreIndexes, selectChartDataWithIndexes, selectChartDataWithIndexesIfNotInPanorama };
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { selectChartDataAndAlwaysIgnoreIndexes } from "./dataSelectors.mjs";
|
|
2
|
+
import { selectChartOffset } from "./selectChartOffset.mjs";
|
|
3
|
+
import { computeFunnelTrapezoids } from "../../cartesian/funnel/utils.mjs";
|
|
4
|
+
import { createSelector } from "@reduxjs/toolkit";
|
|
5
|
+
//#region src/state/selectors/funnelSelectors.ts
|
|
6
|
+
function pickFunnelSettings(_state, funnelSettings) {
|
|
7
|
+
return funnelSettings;
|
|
8
|
+
}
|
|
9
|
+
var selectFunnelTrapezoids = createSelector([
|
|
10
|
+
selectChartOffset,
|
|
11
|
+
pickFunnelSettings,
|
|
12
|
+
selectChartDataAndAlwaysIgnoreIndexes
|
|
13
|
+
], (offset, { data, dataKey, nameKey, tooltipType, lastShapeType, reversed, customWidth, presentationProps }, { chartData }) => {
|
|
14
|
+
let displayedData;
|
|
15
|
+
if (data != null && data.length > 0) displayedData = data;
|
|
16
|
+
else if (chartData != null && chartData.length > 0) displayedData = chartData;
|
|
17
|
+
if (displayedData && displayedData.length) displayedData = displayedData.map((entry, index) => ({
|
|
18
|
+
payload: entry,
|
|
19
|
+
...presentationProps,
|
|
20
|
+
...entry
|
|
21
|
+
}));
|
|
22
|
+
else return {
|
|
23
|
+
trapezoids: [],
|
|
24
|
+
data: displayedData
|
|
25
|
+
};
|
|
26
|
+
return computeFunnelTrapezoids({
|
|
27
|
+
dataKey,
|
|
28
|
+
nameKey,
|
|
29
|
+
displayedData,
|
|
30
|
+
tooltipType,
|
|
31
|
+
lastShapeType,
|
|
32
|
+
reversed,
|
|
33
|
+
offset,
|
|
34
|
+
customWidth
|
|
35
|
+
});
|
|
36
|
+
});
|
|
37
|
+
//#endregion
|
|
38
|
+
export { selectFunnelTrapezoids };
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import { createSelector
|
|
1
|
+
import { createSelector } from "@reduxjs/toolkit";
|
|
2
2
|
//#region src/state/selectors/legendSelectors.ts
|
|
3
|
-
var
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
var selectLegendSettings = (state) => state.legend.settings;
|
|
4
|
+
var selectLegendSize = (state) => state.legend.size;
|
|
5
|
+
function selectAllLegendPayload2DArray(state) {
|
|
6
|
+
return state.legend.payload;
|
|
6
7
|
}
|
|
7
|
-
var
|
|
8
|
+
var selectLegendPayload = createSelector([selectAllLegendPayload2DArray], (payloads) => payloads.flat(1));
|
|
8
9
|
//#endregion
|
|
9
|
-
export {
|
|
10
|
+
export { selectLegendPayload, selectLegendSettings, selectLegendSize };
|
|
@@ -1,57 +1,64 @@
|
|
|
1
|
-
import { isCategoricalAxis
|
|
2
|
-
import { selectChartDataWithIndexesIfNotInPanorama
|
|
3
|
-
import { selectChartLayout
|
|
4
|
-
import { getBandSizeOfAxis
|
|
5
|
-
import { selectAxisWithScale
|
|
6
|
-
import { computeLinePoints
|
|
7
|
-
import { createSelector
|
|
1
|
+
import { isCategoricalAxis } from "../../utils/validate.mjs";
|
|
2
|
+
import { selectChartDataWithIndexesIfNotInPanorama } from "./dataSelectors.mjs";
|
|
3
|
+
import { selectChartLayout } from "./common.mjs";
|
|
4
|
+
import { getBandSizeOfAxis } from "../../utils/chart.mjs";
|
|
5
|
+
import { selectAxisWithScale, selectTicksOfGraphicalItem, selectUnfilteredCartesianItems } from "./axisSelectors.mjs";
|
|
6
|
+
import { computeLinePoints } from "../../cartesian/line/utils.mjs";
|
|
7
|
+
import { createSelector } from "@reduxjs/toolkit";
|
|
8
8
|
//#region src/state/selectors/lineSelectors.ts
|
|
9
|
-
function
|
|
10
|
-
return
|
|
9
|
+
function selectXAxisWithScale(state, xAxisId, _yAxisId, isPanorama) {
|
|
10
|
+
return selectAxisWithScale(state, "xAxis", xAxisId, isPanorama);
|
|
11
11
|
}
|
|
12
|
-
function
|
|
13
|
-
return
|
|
12
|
+
function selectXAxisTicks(state, xAxisId, _yAxisId, isPanorama) {
|
|
13
|
+
return selectTicksOfGraphicalItem(state, "xAxis", xAxisId, isPanorama);
|
|
14
14
|
}
|
|
15
|
-
function
|
|
16
|
-
return
|
|
15
|
+
function selectYAxisWithScale(state, _xAxisId, yAxisId, isPanorama) {
|
|
16
|
+
return selectAxisWithScale(state, "yAxis", yAxisId, isPanorama);
|
|
17
17
|
}
|
|
18
|
-
function
|
|
19
|
-
return
|
|
18
|
+
function selectYAxisTicks(state, _xAxisId, yAxisId, isPanorama) {
|
|
19
|
+
return selectTicksOfGraphicalItem(state, "yAxis", yAxisId, isPanorama);
|
|
20
20
|
}
|
|
21
|
-
var
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
], (
|
|
28
|
-
|
|
29
|
-
return
|
|
21
|
+
var selectBandSize = createSelector([
|
|
22
|
+
selectChartLayout,
|
|
23
|
+
selectXAxisWithScale,
|
|
24
|
+
selectYAxisWithScale,
|
|
25
|
+
selectXAxisTicks,
|
|
26
|
+
selectYAxisTicks
|
|
27
|
+
], (layout, xAxis, yAxis, xAxisTicks, yAxisTicks) => {
|
|
28
|
+
if (isCategoricalAxis(layout, "xAxis")) return getBandSizeOfAxis(xAxis, xAxisTicks, false);
|
|
29
|
+
return getBandSizeOfAxis(yAxis, yAxisTicks, false);
|
|
30
|
+
});
|
|
31
|
+
function pickLineSettings(_state, _xAxisId, _yAxisId, _isPanorama, lineSettings) {
|
|
32
|
+
return lineSettings;
|
|
30
33
|
}
|
|
31
|
-
var
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
if (
|
|
34
|
+
var selectLinePoints = createSelector([
|
|
35
|
+
selectChartLayout,
|
|
36
|
+
selectXAxisWithScale,
|
|
37
|
+
selectYAxisWithScale,
|
|
38
|
+
selectXAxisTicks,
|
|
39
|
+
selectYAxisTicks,
|
|
40
|
+
createSelector([selectUnfilteredCartesianItems, pickLineSettings], (graphicalItems, lineSettingsFromProps) => {
|
|
41
|
+
if (graphicalItems.some((cgis) => cgis.type === "line" && lineSettingsFromProps.dataKey === cgis.dataKey && lineSettingsFromProps.data === cgis.data)) return lineSettingsFromProps;
|
|
39
42
|
}),
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
], (
|
|
43
|
-
if (
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
43
|
+
selectBandSize,
|
|
44
|
+
selectChartDataWithIndexesIfNotInPanorama
|
|
45
|
+
], (layout, xAxis, yAxis, xAxisTicks, yAxisTicks, lineSettings, bandSize, { chartData, dataStartIndex, dataEndIndex }) => {
|
|
46
|
+
if (lineSettings == null || xAxis == null || yAxis == null || xAxisTicks == null || yAxisTicks == null || xAxisTicks.length === 0 || yAxisTicks.length === 0) return;
|
|
47
|
+
const { dataKey, data } = lineSettings;
|
|
48
|
+
let displayedData;
|
|
49
|
+
if (data?.length > 0) displayedData = data;
|
|
50
|
+
else displayedData = chartData?.slice(dataStartIndex, dataEndIndex + 1);
|
|
51
|
+
if (displayedData == null) return;
|
|
52
|
+
return computeLinePoints({
|
|
53
|
+
layout,
|
|
54
|
+
xAxis,
|
|
55
|
+
yAxis,
|
|
56
|
+
xAxisTicks,
|
|
57
|
+
yAxisTicks,
|
|
58
|
+
dataKey,
|
|
59
|
+
bandSize,
|
|
60
|
+
displayedData
|
|
54
61
|
});
|
|
55
62
|
});
|
|
56
63
|
//#endregion
|
|
57
|
-
export {
|
|
64
|
+
export { selectLinePoints };
|
|
@@ -1,97 +1,132 @@
|
|
|
1
|
-
import { isNumber
|
|
2
|
-
import { selectChartDataAndAlwaysIgnoreIndexes
|
|
3
|
-
import { selectChartOffset
|
|
4
|
-
import { getMaxRadius
|
|
5
|
-
import { getPercentValue
|
|
6
|
-
import { getValueByDataKey
|
|
7
|
-
import { selectUnfilteredPolarItems
|
|
8
|
-
import { createSelector
|
|
1
|
+
import { isNumber } from "../../utils/validate.mjs";
|
|
2
|
+
import { selectChartDataAndAlwaysIgnoreIndexes } from "./dataSelectors.mjs";
|
|
3
|
+
import { selectChartOffset } from "./selectChartOffset.mjs";
|
|
4
|
+
import { getMaxRadius, polarToCartesian } from "../../utils/polar.mjs";
|
|
5
|
+
import { getPercentValue, mathSign } from "../../utils/data.mjs";
|
|
6
|
+
import { getValueByDataKey } from "../../utils/chart.mjs";
|
|
7
|
+
import { selectUnfilteredPolarItems } from "./polarSelectors.mjs";
|
|
8
|
+
import { createSelector } from "@reduxjs/toolkit";
|
|
9
9
|
//#region src/state/selectors/pieSelectors.ts
|
|
10
|
-
var
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
var pickPieSettings = (_state, pieSettings) => pieSettings;
|
|
11
|
+
var EMPTY_CELLS = [];
|
|
12
|
+
function pickCells(_state, _pieSettings) {
|
|
13
|
+
return EMPTY_CELLS;
|
|
13
14
|
}
|
|
14
|
-
var
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
], ({ chartData
|
|
19
|
-
let
|
|
20
|
-
if (
|
|
21
|
-
|
|
22
|
-
if (
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
15
|
+
var selectDisplayedData = createSelector([
|
|
16
|
+
selectChartDataAndAlwaysIgnoreIndexes,
|
|
17
|
+
pickPieSettings,
|
|
18
|
+
pickCells
|
|
19
|
+
], ({ chartData }, pieSettings, cells) => {
|
|
20
|
+
let displayedData;
|
|
21
|
+
if (pieSettings.data != null && pieSettings.data.length > 0) displayedData = pieSettings.data;
|
|
22
|
+
else displayedData = chartData;
|
|
23
|
+
if (!displayedData || !displayedData.length) {}
|
|
24
|
+
if (displayedData == null) return;
|
|
25
|
+
return displayedData;
|
|
26
|
+
});
|
|
27
|
+
var selectPieLegend = createSelector([selectDisplayedData, pickPieSettings], (displayedData, pieSettings) => {
|
|
28
|
+
if (displayedData == null) return;
|
|
29
|
+
return displayedData.map((entry, i) => {
|
|
30
|
+
const name = getValueByDataKey(entry, pieSettings.nameKey, pieSettings.name);
|
|
31
|
+
let color;
|
|
32
|
+
if (typeof entry === "object" && entry != null && "fill" in entry && typeof entry.fill === "string") color = entry.fill;
|
|
33
|
+
else color = pieSettings.fill;
|
|
34
|
+
return {
|
|
35
|
+
value: name ?? String(pieSettings.dataKey ?? i),
|
|
36
|
+
color,
|
|
37
|
+
payload: entry,
|
|
38
|
+
type: pieSettings.legendType
|
|
29
39
|
};
|
|
30
40
|
});
|
|
31
|
-
}), h = l([c, u], (e, t) => {
|
|
32
|
-
if (e.some((e) => e.type === "pie" && t.dataKey === e.dataKey)) return t;
|
|
33
41
|
});
|
|
34
|
-
|
|
35
|
-
|
|
42
|
+
var selectSynchronisedPieSettings = createSelector([selectUnfilteredPolarItems, pickPieSettings], (graphicalItems, pieSettingsFromProps) => {
|
|
43
|
+
if (graphicalItems.some((pgis) => pgis.type === "pie" && pieSettingsFromProps.dataKey === pgis.dataKey)) return pieSettingsFromProps;
|
|
44
|
+
});
|
|
45
|
+
function parseDeltaAngle(startAngle, endAngle) {
|
|
46
|
+
return mathSign(endAngle - startAngle) * Math.min(Math.abs(endAngle - startAngle), 360);
|
|
36
47
|
}
|
|
37
|
-
function
|
|
38
|
-
|
|
48
|
+
function getOuterRadius(dataPoint, outerRadius, maxPieRadius) {
|
|
49
|
+
if (typeof outerRadius === "function") return getPercentValue(outerRadius(dataPoint), maxPieRadius, maxPieRadius * .8);
|
|
50
|
+
return getPercentValue(outerRadius ?? maxPieRadius * .8, maxPieRadius, maxPieRadius * .8);
|
|
39
51
|
}
|
|
40
|
-
function
|
|
41
|
-
|
|
52
|
+
function parseCoordinateOfPie(pieSettings, offset, dataPoint) {
|
|
53
|
+
const { top, left, width, height } = offset;
|
|
54
|
+
const maxPieRadius = getMaxRadius(width, height);
|
|
42
55
|
return {
|
|
43
|
-
cx:
|
|
44
|
-
cy:
|
|
45
|
-
innerRadius:
|
|
46
|
-
outerRadius:
|
|
47
|
-
maxRadius: Math.sqrt(
|
|
56
|
+
cx: left + getPercentValue(pieSettings.cx ?? width / 2, width, width / 2),
|
|
57
|
+
cy: top + getPercentValue(pieSettings.cy ?? height / 2, height, height / 2),
|
|
58
|
+
innerRadius: getPercentValue(pieSettings.innerRadius ?? 0, maxPieRadius, 0),
|
|
59
|
+
outerRadius: getOuterRadius(dataPoint, pieSettings.outerRadius, maxPieRadius),
|
|
60
|
+
maxRadius: Math.sqrt(width * width + height * height) / 2
|
|
48
61
|
};
|
|
49
62
|
}
|
|
50
|
-
function
|
|
51
|
-
if (!
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
63
|
+
function computePieSectors({ pieSettings, displayedData, offset }) {
|
|
64
|
+
if (!displayedData || displayedData.length === 0) return;
|
|
65
|
+
const { cornerRadius, dataKey, nameKey, tooltipType } = pieSettings;
|
|
66
|
+
const startAngle = pieSettings.startAngle ?? 0;
|
|
67
|
+
const endAngle = pieSettings.endAngle ?? 360;
|
|
68
|
+
const minAngle = Math.abs(pieSettings.minAngle ?? 0);
|
|
69
|
+
const deltaAngle = parseDeltaAngle(startAngle, endAngle);
|
|
70
|
+
const absDeltaAngle = Math.abs(deltaAngle);
|
|
71
|
+
const paddingAngle = displayedData.length <= 1 ? 0 : pieSettings.paddingAngle ?? 0;
|
|
72
|
+
const notZeroItemCount = displayedData.filter((entry) => getValueByDataKey(entry, dataKey, 0) !== 0).length;
|
|
73
|
+
const totalPaddingAngle = (absDeltaAngle >= 360 ? notZeroItemCount : notZeroItemCount - 1) * paddingAngle;
|
|
74
|
+
const realTotalAngle = absDeltaAngle - notZeroItemCount * minAngle - totalPaddingAngle;
|
|
75
|
+
const sum = displayedData.reduce((result, entry) => {
|
|
76
|
+
const val = getValueByDataKey(entry, dataKey, 0);
|
|
77
|
+
return result + (isNumber(val) ? val : 0);
|
|
55
78
|
}, 0);
|
|
56
|
-
if (
|
|
57
|
-
let
|
|
58
|
-
return
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
79
|
+
if (sum <= 0) return;
|
|
80
|
+
let prev;
|
|
81
|
+
return displayedData.map((entry, i) => {
|
|
82
|
+
const val = getValueByDataKey(entry, dataKey, 0);
|
|
83
|
+
const name = getValueByDataKey(entry, nameKey, i);
|
|
84
|
+
const coordinate = parseCoordinateOfPie(pieSettings, offset, entry);
|
|
85
|
+
const percent = (isNumber(val) ? val : 0) / sum;
|
|
86
|
+
const entryWithInfo = { ...entry };
|
|
87
|
+
const sectorColor = entryWithInfo != null && "fill" in entryWithInfo && typeof entryWithInfo.fill === "string" ? entryWithInfo.fill : pieSettings.fill;
|
|
88
|
+
let tempStartAngle;
|
|
89
|
+
if (i) tempStartAngle = prev.endAngle + mathSign(deltaAngle) * paddingAngle * (val !== 0 ? 1 : 0);
|
|
90
|
+
else tempStartAngle = startAngle;
|
|
91
|
+
const tempEndAngle = tempStartAngle + mathSign(deltaAngle) * ((val !== 0 ? minAngle : 0) + percent * realTotalAngle);
|
|
92
|
+
const midAngle = (tempStartAngle + tempEndAngle) / 2;
|
|
93
|
+
const middleRadius = (coordinate.innerRadius + coordinate.outerRadius) / 2;
|
|
94
|
+
const tooltipPosition = polarToCartesian(coordinate.cx, coordinate.cy, middleRadius, midAngle);
|
|
95
|
+
prev = {
|
|
96
|
+
...pieSettings.presentationProps,
|
|
97
|
+
percent,
|
|
98
|
+
cornerRadius: typeof cornerRadius === "string" ? parseFloat(cornerRadius) : cornerRadius,
|
|
99
|
+
name,
|
|
100
|
+
midAngle,
|
|
101
|
+
middleRadius,
|
|
102
|
+
tooltipPosition,
|
|
103
|
+
...entryWithInfo,
|
|
104
|
+
...coordinate,
|
|
105
|
+
value: val,
|
|
106
|
+
dataKey,
|
|
107
|
+
startAngle: tempStartAngle,
|
|
108
|
+
endAngle: tempEndAngle,
|
|
109
|
+
payload: entryWithInfo,
|
|
110
|
+
paddingAngle: mathSign(deltaAngle) * paddingAngle,
|
|
111
|
+
fill: sectorColor,
|
|
112
|
+
nameKey,
|
|
113
|
+
tooltipType
|
|
114
|
+
};
|
|
115
|
+
return prev;
|
|
82
116
|
});
|
|
83
117
|
}
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
], (
|
|
90
|
-
if (
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
118
|
+
createSelector([
|
|
119
|
+
selectDisplayedData,
|
|
120
|
+
selectSynchronisedPieSettings,
|
|
121
|
+
pickCells,
|
|
122
|
+
selectChartOffset
|
|
123
|
+
], (displayedData, pieSettings, _cells, offset) => {
|
|
124
|
+
if (pieSettings == null || displayedData == null) return;
|
|
125
|
+
return computePieSectors({
|
|
126
|
+
offset,
|
|
127
|
+
pieSettings,
|
|
128
|
+
displayedData
|
|
94
129
|
});
|
|
95
130
|
});
|
|
96
131
|
//#endregion
|
|
97
|
-
export {
|
|
132
|
+
export { computePieSectors, selectDisplayedData, selectPieLegend, selectSynchronisedPieSettings };
|