@redsift/charts 8.0.0 → 8.0.1
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/coverage/clover.xml +1070 -0
- package/coverage/coverage-final.json +60 -0
- package/coverage/lcov-report/ChartEmptyState/ChartEmptyState.tsx.html +679 -0
- package/coverage/lcov-report/ChartEmptyState/index.html +146 -0
- package/coverage/lcov-report/ChartEmptyState/index.ts.html +91 -0
- package/coverage/lcov-report/ChartEmptyState/styles.ts.html +184 -0
- package/coverage/lcov-report/HorizontalBarChart/HorizontalBarChart.tsx.html +775 -0
- package/coverage/lcov-report/HorizontalBarChart/HorizontalBarChartAxisBottom.tsx.html +259 -0
- package/coverage/lcov-report/HorizontalBarChart/HorizontalBarChartBar.tsx.html +421 -0
- package/coverage/lcov-report/HorizontalBarChart/index.html +191 -0
- package/coverage/lcov-report/HorizontalBarChart/index.ts.html +94 -0
- package/coverage/lcov-report/HorizontalBarChart/styles.ts.html +451 -0
- package/coverage/lcov-report/HorizontalBarChart/types.ts.html +433 -0
- package/coverage/lcov-report/PieChart/PieChart.tsx.html +1105 -0
- package/coverage/lcov-report/PieChart/PieChartArc.tsx.html +412 -0
- package/coverage/lcov-report/PieChart/index.html +176 -0
- package/coverage/lcov-report/PieChart/index.ts.html +94 -0
- package/coverage/lcov-report/PieChart/styles.ts.html +616 -0
- package/coverage/lcov-report/PieChart/types.ts.html +472 -0
- package/coverage/lcov-report/PieChart.tsx.html +1045 -0
- package/coverage/lcov-report/PieChartArc.tsx.html +271 -0
- package/coverage/lcov-report/StaticPieChart.tsx.html +286 -0
- package/coverage/lcov-report/base.css +224 -0
- package/coverage/lcov-report/block-navigation.js +87 -0
- package/coverage/lcov-report/components/Arc/Arc.tsx.html +304 -0
- package/coverage/lcov-report/components/Arc/index.html +146 -0
- package/coverage/lcov-report/components/Arc/index.ts.html +94 -0
- package/coverage/lcov-report/components/Arc/styles.ts.html +208 -0
- package/coverage/lcov-report/components/Arcs/Arcs.tsx.html +427 -0
- package/coverage/lcov-report/components/Arcs/index.html +146 -0
- package/coverage/lcov-report/components/Arcs/index.ts.html +94 -0
- package/coverage/lcov-report/components/Arcs/styles.ts.html +106 -0
- package/coverage/lcov-report/components/Axis/Axis.tsx.html +754 -0
- package/coverage/lcov-report/components/Axis/computeTicks.ts.html +481 -0
- package/coverage/lcov-report/components/Axis/index.html +176 -0
- package/coverage/lcov-report/components/Axis/index.ts.html +94 -0
- package/coverage/lcov-report/components/Axis/styles.ts.html +148 -0
- package/coverage/lcov-report/components/Axis/types.ts.html +253 -0
- package/coverage/lcov-report/components/Bar/Bar.tsx.html +421 -0
- package/coverage/lcov-report/components/Bar/index.html +161 -0
- package/coverage/lcov-report/components/Bar/index.ts.html +94 -0
- package/coverage/lcov-report/components/Bar/styles.ts.html +247 -0
- package/coverage/lcov-report/components/Bar/types.ts.html +178 -0
- package/coverage/lcov-report/components/BarChart/BarChart.tsx.html +355 -0
- package/coverage/lcov-report/components/BarChart/EmptyBarChart.tsx.html +259 -0
- package/coverage/lcov-report/components/BarChart/LoadingBarChart.tsx.html +145 -0
- package/coverage/lcov-report/components/BarChart/RenderedBarChart.tsx.html +496 -0
- package/coverage/lcov-report/components/BarChart/index.html +206 -0
- package/coverage/lcov-report/components/BarChart/index.ts.html +94 -0
- package/coverage/lcov-report/components/BarChart/styles.ts.html +190 -0
- package/coverage/lcov-report/components/BarChart/utils.ts.html +145 -0
- package/coverage/lcov-report/components/ChartContainer/ChartContainer.tsx.html +433 -0
- package/coverage/lcov-report/components/ChartContainer/index.html +146 -0
- package/coverage/lcov-report/components/ChartContainer/index.ts.html +94 -0
- package/coverage/lcov-report/components/ChartContainer/intl/index.html +116 -0
- package/coverage/lcov-report/components/ChartContainer/intl/index.ts.html +106 -0
- package/coverage/lcov-report/components/ChartContainer/styles.ts.html +211 -0
- package/coverage/lcov-report/components/DataPoint/DataPoint.tsx.html +442 -0
- package/coverage/lcov-report/components/DataPoint/index.html +146 -0
- package/coverage/lcov-report/components/DataPoint/index.ts.html +94 -0
- package/coverage/lcov-report/components/DataPoint/styles.ts.html +109 -0
- package/coverage/lcov-report/components/Dot/Dot.tsx.html +232 -0
- package/coverage/lcov-report/components/Dot/index.html +146 -0
- package/coverage/lcov-report/components/Dot/index.ts.html +94 -0
- package/coverage/lcov-report/components/Dot/styles.ts.html +184 -0
- package/coverage/lcov-report/components/Legend/Legend.tsx.html +268 -0
- package/coverage/lcov-report/components/Legend/index.html +146 -0
- package/coverage/lcov-report/components/Legend/index.ts.html +94 -0
- package/coverage/lcov-report/components/Legend/styles.ts.html +130 -0
- package/coverage/lcov-report/components/LegendItem/LegendItem.tsx.html +403 -0
- package/coverage/lcov-report/components/LegendItem/index.html +146 -0
- package/coverage/lcov-report/components/LegendItem/index.ts.html +94 -0
- package/coverage/lcov-report/components/LegendItem/styles.ts.html +205 -0
- package/coverage/lcov-report/components/PieChart/EmptyPieChart.tsx.html +343 -0
- package/coverage/lcov-report/components/PieChart/LoadingPieChart.tsx.html +145 -0
- package/coverage/lcov-report/components/PieChart/PieChart.tsx.html +388 -0
- package/coverage/lcov-report/components/PieChart/RenderedPieChart.tsx.html +571 -0
- package/coverage/lcov-report/components/PieChart/index.html +221 -0
- package/coverage/lcov-report/components/PieChart/index.ts.html +94 -0
- package/coverage/lcov-report/components/PieChart/styles.ts.html +376 -0
- package/coverage/lcov-report/components/PieChart/types.ts.html +352 -0
- package/coverage/lcov-report/components/PieChart/utils.ts.html +199 -0
- package/coverage/lcov-report/components/ScatterPlot/EmptyScatterPlot.tsx.html +295 -0
- package/coverage/lcov-report/components/ScatterPlot/LoadingScatterPlot.tsx.html +145 -0
- package/coverage/lcov-report/components/ScatterPlot/RenderedScatterPlot.tsx.html +910 -0
- package/coverage/lcov-report/components/ScatterPlot/ScatterPlot.tsx.html +379 -0
- package/coverage/lcov-report/components/ScatterPlot/index.html +221 -0
- package/coverage/lcov-report/components/ScatterPlot/index.ts.html +94 -0
- package/coverage/lcov-report/components/ScatterPlot/styles.ts.html +196 -0
- package/coverage/lcov-report/components/ScatterPlot/types.ts.html +376 -0
- package/coverage/lcov-report/components/ScatterPlot/utils.ts.html +388 -0
- package/coverage/lcov-report/favicon.png +0 -0
- package/coverage/lcov-report/hooks/index.html +176 -0
- package/coverage/lcov-report/hooks/index.ts.html +97 -0
- package/coverage/lcov-report/hooks/useBrush.tsx.html +430 -0
- package/coverage/lcov-report/hooks/useColor.tsx.html +163 -0
- package/coverage/lcov-report/hooks/useFormatCategoricalData.tsx.html +289 -0
- package/coverage/lcov-report/hooks/useZoom.tsx.html +235 -0
- package/coverage/lcov-report/index.html +311 -0
- package/coverage/lcov-report/index.ts.html +94 -0
- package/coverage/lcov-report/prettify.css +1 -0
- package/coverage/lcov-report/prettify.js +2 -0
- package/coverage/lcov-report/sort-arrow-sprite.png +0 -0
- package/coverage/lcov-report/sorter.js +196 -0
- package/coverage/lcov-report/styles.ts.html +631 -0
- package/coverage/lcov-report/types.ts.html +457 -0
- package/coverage/lcov.info +2272 -0
- package/dist/index.js +6326 -0
- package/dist/index.js.map +1 -0
- package/dist/package.json +98 -0
- package/index.ts +1 -0
- package/jest.config.js +3 -0
- package/package.json +2 -3
- package/rollup.config.js +13 -0
- package/src/components/Arc/Arc.test.tsx +92 -0
- package/src/components/Arc/Arc.tsx +73 -0
- package/src/components/Arc/index.ts +3 -0
- package/src/components/Arc/styles.ts +41 -0
- package/src/components/Arc/types.ts +18 -0
- package/src/components/Arcs/Arcs.stories.tsx +177 -0
- package/src/components/Arcs/Arcs.tsx +114 -0
- package/src/components/Arcs/index.ts +3 -0
- package/src/components/Arcs/styles.ts +7 -0
- package/src/components/Arcs/types.ts +26 -0
- package/src/components/Axis/Axis.stories.tsx +297 -0
- package/src/components/Axis/Axis.tsx +223 -0
- package/src/components/Axis/computeTicks.ts +132 -0
- package/src/components/Axis/index.ts +3 -0
- package/src/components/Axis/styles.ts +21 -0
- package/src/components/Axis/types.ts +56 -0
- package/src/components/Bar/Bar.stories.tsx +152 -0
- package/src/components/Bar/Bar.test.tsx +158 -0
- package/src/components/Bar/Bar.tsx +112 -0
- package/src/components/Bar/index.ts +3 -0
- package/src/components/Bar/styles.ts +54 -0
- package/src/components/Bar/types.ts +31 -0
- package/src/components/BarChart/BarChart.stories.tsx +80 -0
- package/src/components/BarChart/BarChart.test.tsx +189 -0
- package/src/components/BarChart/BarChart.tsx +90 -0
- package/src/components/BarChart/EmptyBarChart.tsx +58 -0
- package/src/components/BarChart/LoadingBarChart.tsx +20 -0
- package/src/components/BarChart/RenderedBarChart.tsx +137 -0
- package/src/components/BarChart/__snapshots__/BarChart.test.tsx.snap +6932 -0
- package/src/components/BarChart/index.ts +3 -0
- package/src/components/BarChart/styles.ts +35 -0
- package/src/components/BarChart/types.ts +58 -0
- package/src/components/BarChart/utils.ts +20 -0
- package/src/components/ChartContainer/ChartContainer.stories.tsx +81 -0
- package/src/components/ChartContainer/ChartContainer.test.tsx +75 -0
- package/src/components/ChartContainer/ChartContainer.tsx +116 -0
- package/src/components/ChartContainer/index.ts +3 -0
- package/src/components/ChartContainer/intl/en-US.json +3 -0
- package/src/components/ChartContainer/intl/fr-FR.json +3 -0
- package/src/components/ChartContainer/intl/index.ts +7 -0
- package/src/components/ChartContainer/styles.ts +42 -0
- package/src/components/ChartContainer/types.ts +24 -0
- package/src/components/DataPoint/DataPoint.tsx +119 -0
- package/src/components/DataPoint/index.ts +3 -0
- package/src/components/DataPoint/styles.ts +8 -0
- package/src/components/DataPoint/types.ts +33 -0
- package/src/components/Dot/Dot.stories.tsx +157 -0
- package/src/components/Dot/Dot.test.tsx +136 -0
- package/src/components/Dot/Dot.tsx +49 -0
- package/src/components/Dot/index.ts +3 -0
- package/src/components/Dot/styles.ts +33 -0
- package/src/components/Dot/types.ts +16 -0
- package/src/components/Legend/Legend.stories.tsx +108 -0
- package/src/components/Legend/Legend.tsx +61 -0
- package/src/components/Legend/index.ts +3 -0
- package/src/components/Legend/styles.ts +15 -0
- package/src/components/Legend/types.ts +27 -0
- package/src/components/LegendItem/LegendItem.test.tsx +69 -0
- package/src/components/LegendItem/LegendItem.tsx +106 -0
- package/src/components/LegendItem/index.ts +3 -0
- package/src/components/LegendItem/styles.ts +40 -0
- package/src/components/LegendItem/types.ts +30 -0
- package/src/components/PieChart/EmptyPieChart.tsx +86 -0
- package/src/components/PieChart/LoadingPieChart.tsx +20 -0
- package/src/components/PieChart/PieChart.stories.tsx +91 -0
- package/src/components/PieChart/PieChart.test.tsx +201 -0
- package/src/components/PieChart/PieChart.tsx +101 -0
- package/src/components/PieChart/RenderedPieChart.tsx +162 -0
- package/src/components/PieChart/__snapshots__/PieChart.stories.storyshot +7843 -0
- package/src/components/PieChart/__snapshots__/PieChart.test.tsx.snap +20540 -0
- package/src/components/PieChart/index.ts +3 -0
- package/src/components/PieChart/styles.ts +97 -0
- package/src/components/PieChart/types.ts +89 -0
- package/src/components/PieChart/utils.ts +38 -0
- package/src/components/ScatterPlot/EmptyScatterPlot.tsx +70 -0
- package/src/components/ScatterPlot/LoadingScatterPlot.tsx +20 -0
- package/src/components/ScatterPlot/RenderedScatterPlot.tsx +275 -0
- package/src/components/ScatterPlot/ScatterPlot.stories.tsx +95 -0
- package/src/components/ScatterPlot/ScatterPlot.test.tsx +44 -0
- package/src/components/ScatterPlot/ScatterPlot.tsx +98 -0
- package/src/components/ScatterPlot/__snapshots__/ScatterPlot.test.tsx.snap +88352 -0
- package/src/components/ScatterPlot/index.ts +3 -0
- package/src/components/ScatterPlot/styles.ts +37 -0
- package/src/components/ScatterPlot/types.ts +97 -0
- package/src/components/ScatterPlot/utils.ts +101 -0
- package/src/config.ts +10 -0
- package/src/hooks/index.ts +4 -0
- package/src/hooks/useBrush.tsx +115 -0
- package/src/hooks/useColor.tsx +26 -0
- package/src/hooks/useFormatCategoricalData.tsx +68 -0
- package/src/hooks/useZoom.tsx +50 -0
- package/src/index.ts +15 -0
- package/src/scheme.ts +221 -0
- package/src/types/data.ts +52 -0
- package/src/types/index.ts +5 -0
- package/src/types/legend.ts +19 -0
- package/src/types/scale.ts +79 -0
- package/src/types/size.ts +17 -0
- package/src/types/theme.ts +27 -0
- package/tsconfig.json +3 -0
- package/index.js +0 -2606
- package/index.js.map +0 -1
- /package/{CONTRIBUTING.md → dist/CONTRIBUTING.md} +0 -0
- /package/{index.d.ts → dist/index.d.ts} +0 -0
package/index.js
DELETED
|
@@ -1,2606 +0,0 @@
|
|
|
1
|
-
import { brush, select, scaleOrdinal, zoom, interpolateRound, interpolate, scaleLinear, sum, arc, pie, min, extent, descending, scaleSqrt, max } from 'd3';
|
|
2
|
-
import { RedsiftDataVizColorBlueDefault, RedsiftDataVizColorGreyDark, RedsiftDataVizColorGreenDefault, RedsiftDataVizColorPinkDefault, RedsiftDataVizColorAquaDefault, RedsiftDataVizColorBrownDefault, RedsiftDataVizColorRedDefault, RedsiftDataVizColorYellowDefault, RedsiftDataVizColorPurpleDefault, RedsiftDataVizColorOrangeDefault, RedsiftDataVizColorGreyDefault, RedsiftDataVizColorGreenDark, RedsiftDataVizColorPinkDark, RedsiftDataVizColorAquaDark, RedsiftDataVizColorBrownDark, RedsiftDataVizColorRedDark, RedsiftDataVizColorYellowDark, RedsiftDataVizColorPurpleDark, RedsiftDataVizColorOrangeDark, RedsiftDataVizColorBlueDark, RedsiftDataVizColorGreenDarker, RedsiftDataVizColorPinkDarker, RedsiftDataVizColorAquaDarker, RedsiftDataVizColorBrownDarker, RedsiftDataVizColorRedDarker, RedsiftDataVizColorYellowDarker, RedsiftDataVizColorPurpleDarker, RedsiftDataVizColorOrangeDarker, RedsiftDataVizColorBlueDarker, RedsiftDataVizColorGreyDarker, RedsiftDataVizColorGreenDarkerer, RedsiftDataVizColorPinkDarkerer, RedsiftDataVizColorAquaDarkerer, RedsiftDataVizColorBrownDarkerer, RedsiftDataVizColorRedDarkerer, RedsiftDataVizColorYellowDarkerer, RedsiftDataVizColorPurpleDarkerer, RedsiftDataVizColorOrangeDarkerer, RedsiftDataVizColorBlueDarkerer, RedsiftDataVizColorGreyDarkerer, RedsiftDataVizColorGreenLight, RedsiftDataVizColorPinkLight, RedsiftDataVizColorAquaLight, RedsiftDataVizColorBrownLight, RedsiftDataVizColorRedLight, RedsiftDataVizColorYellowLight, RedsiftDataVizColorPurpleLight, RedsiftDataVizColorOrangeLight, RedsiftDataVizColorBlueLight, RedsiftDataVizColorGreyLight, RedsiftDataVizColorGreenLighter, RedsiftDataVizColorPinkLighter, RedsiftDataVizColorAquaLighter, RedsiftDataVizColorBrownLighter, RedsiftDataVizColorRedLighter, RedsiftDataVizColorYellowLighter, RedsiftDataVizColorPurpleLighter, RedsiftDataVizColorOrangeLighter, RedsiftDataVizColorBlueLighter, RedsiftDataVizColorGreyLighter, RedsiftDataVizColorGreenLighterer, RedsiftDataVizColorPinkLighterer, RedsiftDataVizColorAquaLighterer, RedsiftDataVizColorBrownLighterer, RedsiftDataVizColorRedLighterer, RedsiftDataVizColorYellowLighterer, RedsiftDataVizColorPurpleLighterer, RedsiftDataVizColorOrangeLighterer, RedsiftDataVizColorBlueLighterer, RedsiftDataVizColorGreyLighterer, Text, Number as Number$1, baseStyling, focusRing, Flexbox, warnIfNoAccessibleLabelFound, Heading, Button } from '@redsift/design-system';
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
import React__default, { useRef, useEffect, useMemo, useState, useLayoutEffect, forwardRef, useCallback, useContext, useId } from 'react';
|
|
5
|
-
import classNames from 'classnames';
|
|
6
|
-
import { unstable_batchedUpdates } from 'react-dom';
|
|
7
|
-
import styled, { css } from 'styled-components';
|
|
8
|
-
import { Tooltip } from '@redsift/popovers';
|
|
9
|
-
import { useLocalizedStringFormatter } from 'react-aria';
|
|
10
|
-
|
|
11
|
-
const getRoundedIntermediaryPoint = (selection, scaleX, scaleY) => {
|
|
12
|
-
if (!selection) {
|
|
13
|
-
return null;
|
|
14
|
-
}
|
|
15
|
-
const xTicks = scaleX.ticks(20);
|
|
16
|
-
const xDelta = xTicks[1] - xTicks[0];
|
|
17
|
-
const yTicks = scaleY.ticks(20);
|
|
18
|
-
const yDelta = yTicks[1] - yTicks[0];
|
|
19
|
-
return [[scaleX(Math.round(scaleX.invert(selection[0][0]) / xDelta) * xDelta - xDelta / 2), scaleY(Math.round(scaleY.invert(selection[0][1]) / yDelta) * yDelta - yDelta / 2)], [scaleX(Math.round(scaleX.invert(selection[1][0]) / xDelta) * xDelta - xDelta / 2), scaleY(Math.round(scaleY.invert(selection[1][1]) / yDelta) * yDelta - yDelta / 2)]];
|
|
20
|
-
};
|
|
21
|
-
const useBrush = _ref => {
|
|
22
|
-
let {
|
|
23
|
-
brushRef: propsBrushRef,
|
|
24
|
-
svgRef,
|
|
25
|
-
extent,
|
|
26
|
-
scaleX,
|
|
27
|
-
scaleY,
|
|
28
|
-
isBrushable,
|
|
29
|
-
isGridded,
|
|
30
|
-
onBrush,
|
|
31
|
-
onBrushEnd
|
|
32
|
-
} = _ref;
|
|
33
|
-
const brushRef = propsBrushRef || useRef();
|
|
34
|
-
useEffect(() => {
|
|
35
|
-
if (svgRef.current && isBrushable) {
|
|
36
|
-
brushRef.current = brush().extent(extent).keyModifiers(false).filter(event => event.shiftKey).on('brush', event => {
|
|
37
|
-
if (!event.sourceEvent || !brushRef.current || !svgRef.current) return;
|
|
38
|
-
if (isGridded) {
|
|
39
|
-
const selection = getRoundedIntermediaryPoint(event.selection, scaleX, scaleY);
|
|
40
|
-
select(svgRef.current).call(brushRef.current.move, selection);
|
|
41
|
-
onBrush === null || onBrush === void 0 ? void 0 : onBrush(selection, scaleX, scaleY);
|
|
42
|
-
} else {
|
|
43
|
-
onBrush === null || onBrush === void 0 ? void 0 : onBrush(event.selection, scaleX, scaleY);
|
|
44
|
-
}
|
|
45
|
-
}).on('end', event => {
|
|
46
|
-
if (!event.sourceEvent || !brushRef.current || !svgRef.current) return;
|
|
47
|
-
onBrushEnd === null || onBrushEnd === void 0 ? void 0 : onBrushEnd(event.selection, scaleX, scaleY);
|
|
48
|
-
});
|
|
49
|
-
select(svgRef.current).call(brushRef.current);
|
|
50
|
-
}
|
|
51
|
-
});
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
const monochrome = RedsiftDataVizColorBlueDefault;
|
|
55
|
-
const empty = RedsiftDataVizColorGreyDark;
|
|
56
|
-
const scheme = {
|
|
57
|
-
default: [RedsiftDataVizColorGreenDefault, RedsiftDataVizColorPinkDefault, RedsiftDataVizColorAquaDefault, RedsiftDataVizColorBrownDefault, RedsiftDataVizColorRedDefault, RedsiftDataVizColorYellowDefault, RedsiftDataVizColorPurpleDefault, RedsiftDataVizColorOrangeDefault, RedsiftDataVizColorBlueDefault, RedsiftDataVizColorGreyDefault],
|
|
58
|
-
dark: [RedsiftDataVizColorGreenDark, RedsiftDataVizColorPinkDark, RedsiftDataVizColorAquaDark, RedsiftDataVizColorBrownDark, RedsiftDataVizColorRedDark, RedsiftDataVizColorYellowDark, RedsiftDataVizColorPurpleDark, RedsiftDataVizColorOrangeDark, RedsiftDataVizColorBlueDark, RedsiftDataVizColorGreyDark],
|
|
59
|
-
darker: [RedsiftDataVizColorGreenDarker, RedsiftDataVizColorPinkDarker, RedsiftDataVizColorAquaDarker, RedsiftDataVizColorBrownDarker, RedsiftDataVizColorRedDarker, RedsiftDataVizColorYellowDarker, RedsiftDataVizColorPurpleDarker, RedsiftDataVizColorOrangeDarker, RedsiftDataVizColorBlueDarker, RedsiftDataVizColorGreyDarker],
|
|
60
|
-
darkerer: [RedsiftDataVizColorGreenDarkerer, RedsiftDataVizColorPinkDarkerer, RedsiftDataVizColorAquaDarkerer, RedsiftDataVizColorBrownDarkerer, RedsiftDataVizColorRedDarkerer, RedsiftDataVizColorYellowDarkerer, RedsiftDataVizColorPurpleDarkerer, RedsiftDataVizColorOrangeDarkerer, RedsiftDataVizColorBlueDarkerer, RedsiftDataVizColorGreyDarkerer],
|
|
61
|
-
light: [RedsiftDataVizColorGreenLight, RedsiftDataVizColorPinkLight, RedsiftDataVizColorAquaLight, RedsiftDataVizColorBrownLight, RedsiftDataVizColorRedLight, RedsiftDataVizColorYellowLight, RedsiftDataVizColorPurpleLight, RedsiftDataVizColorOrangeLight, RedsiftDataVizColorBlueLight, RedsiftDataVizColorGreyLight],
|
|
62
|
-
lighter: [RedsiftDataVizColorGreenLighter, RedsiftDataVizColorPinkLighter, RedsiftDataVizColorAquaLighter, RedsiftDataVizColorBrownLighter, RedsiftDataVizColorRedLighter, RedsiftDataVizColorYellowLighter, RedsiftDataVizColorPurpleLighter, RedsiftDataVizColorOrangeLighter, RedsiftDataVizColorBlueLighter, RedsiftDataVizColorGreyLighter],
|
|
63
|
-
lighterer: [RedsiftDataVizColorGreenLighterer, RedsiftDataVizColorPinkLighterer, RedsiftDataVizColorAquaLighterer, RedsiftDataVizColorBrownLighterer, RedsiftDataVizColorRedLighterer, RedsiftDataVizColorYellowLighterer, RedsiftDataVizColorPurpleLighterer, RedsiftDataVizColorOrangeLighterer, RedsiftDataVizColorBlueLighterer, RedsiftDataVizColorGreyLighterer],
|
|
64
|
-
monochrome: [monochrome],
|
|
65
|
-
empty: [empty]
|
|
66
|
-
};
|
|
67
|
-
const successDangerScheme = {
|
|
68
|
-
success: RedsiftDataVizColorGreenDefault,
|
|
69
|
-
warning: RedsiftDataVizColorOrangeDefault,
|
|
70
|
-
danger: RedsiftDataVizColorRedDefault,
|
|
71
|
-
neutral: RedsiftDataVizColorGreyDefault
|
|
72
|
-
};
|
|
73
|
-
const getColorScale = (theme, domain, isEmpty) => {
|
|
74
|
-
let d3colors = scaleOrdinal(scheme.default);
|
|
75
|
-
if (isEmpty) {
|
|
76
|
-
d3colors = scaleOrdinal(scheme.empty);
|
|
77
|
-
} else if (typeof theme === 'string') {
|
|
78
|
-
d3colors = scaleOrdinal().domain(domain).range(scheme[theme]).unknown(monochrome);
|
|
79
|
-
} else if (typeof theme === 'object') {
|
|
80
|
-
if (Object.keys(theme).includes('success') && Object.keys(theme).includes('danger') && Object.keys(theme).includes('warning')) {
|
|
81
|
-
d3colors = scaleOrdinal().domain([theme.success, theme.warning, theme.danger, ...(theme.neutral ? [theme.neutral] : [])]).range([successDangerScheme.success, successDangerScheme.warning, successDangerScheme.danger, ...(theme.neutral ? [successDangerScheme.neutral] : [])]).unknown(monochrome);
|
|
82
|
-
} else {
|
|
83
|
-
d3colors = scaleOrdinal().domain(Object.keys(theme)).range(Object.values(theme)).unknown(monochrome);
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
return d3colors;
|
|
87
|
-
};
|
|
88
|
-
|
|
89
|
-
const useColor = _ref => {
|
|
90
|
-
let {
|
|
91
|
-
data,
|
|
92
|
-
theme,
|
|
93
|
-
category
|
|
94
|
-
} = _ref;
|
|
95
|
-
const colorScale = useMemo(() => getColorScale(theme, data.map(d => d[category])), [theme]);
|
|
96
|
-
return colorScale;
|
|
97
|
-
};
|
|
98
|
-
|
|
99
|
-
function ownKeys(object, enumerableOnly) {
|
|
100
|
-
var keys = Object.keys(object);
|
|
101
|
-
if (Object.getOwnPropertySymbols) {
|
|
102
|
-
var symbols = Object.getOwnPropertySymbols(object);
|
|
103
|
-
enumerableOnly && (symbols = symbols.filter(function (sym) {
|
|
104
|
-
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
105
|
-
})), keys.push.apply(keys, symbols);
|
|
106
|
-
}
|
|
107
|
-
return keys;
|
|
108
|
-
}
|
|
109
|
-
function _objectSpread2(target) {
|
|
110
|
-
for (var i = 1; i < arguments.length; i++) {
|
|
111
|
-
var source = null != arguments[i] ? arguments[i] : {};
|
|
112
|
-
i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
|
|
113
|
-
_defineProperty(target, key, source[key]);
|
|
114
|
-
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
|
|
115
|
-
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
116
|
-
});
|
|
117
|
-
}
|
|
118
|
-
return target;
|
|
119
|
-
}
|
|
120
|
-
function _defineProperty(obj, key, value) {
|
|
121
|
-
key = _toPropertyKey(key);
|
|
122
|
-
if (key in obj) {
|
|
123
|
-
Object.defineProperty(obj, key, {
|
|
124
|
-
value: value,
|
|
125
|
-
enumerable: true,
|
|
126
|
-
configurable: true,
|
|
127
|
-
writable: true
|
|
128
|
-
});
|
|
129
|
-
} else {
|
|
130
|
-
obj[key] = value;
|
|
131
|
-
}
|
|
132
|
-
return obj;
|
|
133
|
-
}
|
|
134
|
-
function _extends() {
|
|
135
|
-
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
136
|
-
for (var i = 1; i < arguments.length; i++) {
|
|
137
|
-
var source = arguments[i];
|
|
138
|
-
for (var key in source) {
|
|
139
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
140
|
-
target[key] = source[key];
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
}
|
|
144
|
-
return target;
|
|
145
|
-
};
|
|
146
|
-
return _extends.apply(this, arguments);
|
|
147
|
-
}
|
|
148
|
-
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
149
|
-
if (source == null) return {};
|
|
150
|
-
var target = {};
|
|
151
|
-
var sourceKeys = Object.keys(source);
|
|
152
|
-
var key, i;
|
|
153
|
-
for (i = 0; i < sourceKeys.length; i++) {
|
|
154
|
-
key = sourceKeys[i];
|
|
155
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
156
|
-
target[key] = source[key];
|
|
157
|
-
}
|
|
158
|
-
return target;
|
|
159
|
-
}
|
|
160
|
-
function _objectWithoutProperties(source, excluded) {
|
|
161
|
-
if (source == null) return {};
|
|
162
|
-
var target = _objectWithoutPropertiesLoose(source, excluded);
|
|
163
|
-
var key, i;
|
|
164
|
-
if (Object.getOwnPropertySymbols) {
|
|
165
|
-
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
|
166
|
-
for (i = 0; i < sourceSymbolKeys.length; i++) {
|
|
167
|
-
key = sourceSymbolKeys[i];
|
|
168
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
169
|
-
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
170
|
-
target[key] = source[key];
|
|
171
|
-
}
|
|
172
|
-
}
|
|
173
|
-
return target;
|
|
174
|
-
}
|
|
175
|
-
function _toPrimitive(input, hint) {
|
|
176
|
-
if (typeof input !== "object" || input === null) return input;
|
|
177
|
-
var prim = input[Symbol.toPrimitive];
|
|
178
|
-
if (prim !== undefined) {
|
|
179
|
-
var res = prim.call(input, hint || "default");
|
|
180
|
-
if (typeof res !== "object") return res;
|
|
181
|
-
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
182
|
-
}
|
|
183
|
-
return (hint === "string" ? String : Number)(input);
|
|
184
|
-
}
|
|
185
|
-
function _toPropertyKey(arg) {
|
|
186
|
-
var key = _toPrimitive(arg, "string");
|
|
187
|
-
return typeof key === "symbol" ? key : String(key);
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
const useFormatCategoricalData = _ref => {
|
|
191
|
-
let {
|
|
192
|
-
data,
|
|
193
|
-
caping,
|
|
194
|
-
others,
|
|
195
|
-
theme
|
|
196
|
-
} = _ref;
|
|
197
|
-
const computedData = useMemo(() => {
|
|
198
|
-
let computedData;
|
|
199
|
-
if (data === undefined || data === null) {
|
|
200
|
-
return undefined;
|
|
201
|
-
}
|
|
202
|
-
computedData = [...data].sort((a, b) => a.value === b.value ? a.key > b.key ? 1 : -1 : a.value < b.value ? 1 : -1);
|
|
203
|
-
if (caping) {
|
|
204
|
-
if (typeof others === 'boolean' && !others) {
|
|
205
|
-
computedData = computedData.slice(0, caping);
|
|
206
|
-
} else {
|
|
207
|
-
computedData = computedData.reduce((acc, curr, index) => {
|
|
208
|
-
if (index < caping) {
|
|
209
|
-
acc[index] = curr;
|
|
210
|
-
} else if (index === caping) {
|
|
211
|
-
acc[index] = {
|
|
212
|
-
key: typeof others === 'string' ? others : 'Others',
|
|
213
|
-
value: curr.value
|
|
214
|
-
};
|
|
215
|
-
} else {
|
|
216
|
-
acc[caping] = _objectSpread2(_objectSpread2({}, acc[caping]), {}, {
|
|
217
|
-
value: acc[caping].value + curr.value
|
|
218
|
-
});
|
|
219
|
-
}
|
|
220
|
-
return acc;
|
|
221
|
-
}, []);
|
|
222
|
-
}
|
|
223
|
-
}
|
|
224
|
-
return computedData;
|
|
225
|
-
}, [data, caping]);
|
|
226
|
-
const colorScale = useColor({
|
|
227
|
-
data: computedData,
|
|
228
|
-
theme,
|
|
229
|
-
category: 'key'
|
|
230
|
-
});
|
|
231
|
-
return {
|
|
232
|
-
data: computedData,
|
|
233
|
-
colorScale
|
|
234
|
-
};
|
|
235
|
-
};
|
|
236
|
-
|
|
237
|
-
const useZoom = _ref => {
|
|
238
|
-
let {
|
|
239
|
-
svgRef,
|
|
240
|
-
scaleX,
|
|
241
|
-
scaleY,
|
|
242
|
-
defaultTransform = {
|
|
243
|
-
k: 1,
|
|
244
|
-
x: 0,
|
|
245
|
-
y: 0
|
|
246
|
-
},
|
|
247
|
-
size,
|
|
248
|
-
onZoom
|
|
249
|
-
} = _ref;
|
|
250
|
-
const zx = useRef(scaleX);
|
|
251
|
-
const zy = useRef(scaleY);
|
|
252
|
-
const [transform, setTransform] = useState(defaultTransform);
|
|
253
|
-
useEffect(() => {
|
|
254
|
-
if (svgRef.current) {
|
|
255
|
-
const zoom$1 = zoom().filter(event => !event.shiftKey).scaleExtent([1 / 2 ** 3, 2 ** 3]).on('zoom', event => {
|
|
256
|
-
onZoom === null || onZoom === void 0 ? void 0 : onZoom();
|
|
257
|
-
zx.current = event.transform.rescaleX(scaleX).interpolate(interpolateRound);
|
|
258
|
-
zy.current = event.transform.rescaleY(scaleY).interpolate(interpolateRound);
|
|
259
|
-
setTransform(event.transform);
|
|
260
|
-
});
|
|
261
|
-
select(svgRef.current).call(zoom$1);
|
|
262
|
-
}
|
|
263
|
-
}, [svgRef.current, size]);
|
|
264
|
-
return {
|
|
265
|
-
transform,
|
|
266
|
-
scaleX: zx.current,
|
|
267
|
-
scaleY: zy.current
|
|
268
|
-
};
|
|
269
|
-
};
|
|
270
|
-
|
|
271
|
-
/** TOOLTIP */
|
|
272
|
-
|
|
273
|
-
const TooltipVariant = {
|
|
274
|
-
none: 'none',
|
|
275
|
-
label: 'label',
|
|
276
|
-
value: 'value',
|
|
277
|
-
percent: 'percent'
|
|
278
|
-
};
|
|
279
|
-
/** LEGEND */
|
|
280
|
-
const LabelVariant = {
|
|
281
|
-
label: 'label',
|
|
282
|
-
value: 'value',
|
|
283
|
-
percent: 'percent'
|
|
284
|
-
};
|
|
285
|
-
|
|
286
|
-
const ChartSize = {
|
|
287
|
-
small: 'small',
|
|
288
|
-
medium: 'medium',
|
|
289
|
-
large: 'large'
|
|
290
|
-
};
|
|
291
|
-
|
|
292
|
-
const ColorTheme = {
|
|
293
|
-
default: 'default',
|
|
294
|
-
dark: 'dark',
|
|
295
|
-
darker: 'darker',
|
|
296
|
-
darkerer: 'darkerer',
|
|
297
|
-
light: 'light',
|
|
298
|
-
lighter: 'lighter',
|
|
299
|
-
lighterer: 'lighterer',
|
|
300
|
-
monochrome: 'monochrome'
|
|
301
|
-
};
|
|
302
|
-
|
|
303
|
-
var f$1=r(),n=e=>c$3(e,f$1),m$1=r();n.write=e=>c$3(e,m$1);var d$2=r();n.onStart=e=>c$3(e,d$2);var h$3=r();n.onFrame=e=>c$3(e,h$3);var p$1=r();n.onFinish=e=>c$3(e,p$1);var i=[];n.setTimeout=(e,t)=>{let a=n.now()+t,o=()=>{let F=i.findIndex(z=>z.cancel==o);~F&&i.splice(F,1),u$2-=~F?1:0;},s={time:a,handler:e,cancel:o};return i.splice(w(a),0,s),u$2+=1,v$2(),s};var w=e=>~(~i.findIndex(t=>t.time>e)||~i.length);n.cancel=e=>{d$2.delete(e),h$3.delete(e),p$1.delete(e),f$1.delete(e),m$1.delete(e);};n.sync=e=>{T=!0,n.batchedUpdates(e),T=!1;};n.throttle=e=>{let t;function a(){try{e(...t);}finally{t=null;}}function o(...s){t=s,n.onStart(a);}return o.handler=e,o.cancel=()=>{d$2.delete(a),t=null;},o};var y$3=typeof window<"u"?window.requestAnimationFrame:()=>{};n.use=e=>y$3=e;n.now=typeof performance<"u"?()=>performance.now():Date.now;n.batchedUpdates=e=>e();n.catch=console.error;n.frameLoop="always";n.advance=()=>{n.frameLoop!=="demand"?console.warn("Cannot call the manual advancement of rafz whilst frameLoop is not set as demand"):x$2();};var l$2=-1,u$2=0,T=!1;function c$3(e,t){T?(t.delete(e),e(0)):(t.add(e),v$2());}function v$2(){l$2<0&&(l$2=0,n.frameLoop!=="demand"&&y$3(b$2));}function R(){l$2=-1;}function b$2(){~l$2&&(y$3(b$2),n.batchedUpdates(x$2));}function x$2(){let e=l$2;l$2=n.now();let t=w(l$2);if(t&&(Q$2(i.splice(0,t),a=>a.handler()),u$2-=t),!u$2){R();return}d$2.flush(),f$1.flush(e?Math.min(64,l$2-e):16.667),h$3.flush(),m$1.flush(),p$1.flush();}function r(){let e=new Set,t=e;return {add(a){u$2+=t==e&&!e.has(a)?1:0,e.add(a);},delete(a){return u$2-=t==e&&e.has(a)?1:0,e.delete(a)},flush(a){t.size&&(e=new Set,u$2-=t.size,Q$2(t,o=>o(a)&&e.add(o)),u$2+=e.size,t=e);}}}function Q$2(e,t){e.forEach(a=>{try{t(a);}catch(o){n.catch(o);}});}
|
|
304
|
-
|
|
305
|
-
var ze$1=Object.defineProperty;var Le$2=(e,t)=>{for(var r in t)ze$1(e,r,{get:t[r],enumerable:!0});};var p={};Le$2(p,{assign:()=>U,colors:()=>c$2,createStringInterpolator:()=>k$2,skipAnimation:()=>ee,to:()=>J$1,willAdvance:()=>S});function Y(){}var mt$1=(e,t,r)=>Object.defineProperty(e,t,{value:r,writable:!0,configurable:!0}),l$1={arr:Array.isArray,obj:e=>!!e&&e.constructor.name==="Object",fun:e=>typeof e=="function",str:e=>typeof e=="string",num:e=>typeof e=="number",und:e=>e===void 0};function bt$1(e,t){if(l$1.arr(e)){if(!l$1.arr(t)||e.length!==t.length)return !1;for(let r=0;r<e.length;r++)if(e[r]!==t[r])return !1;return !0}return e===t}var Ve=(e,t)=>e.forEach(t);function xt(e,t,r){if(l$1.arr(e)){for(let n=0;n<e.length;n++)t.call(r,e[n],`${n}`);return}for(let n in e)e.hasOwnProperty(n)&&t.call(r,e[n],n);}var ht$1=e=>l$1.und(e)?[]:l$1.arr(e)?e:[e];function Pe$1(e,t){if(e.size){let r=Array.from(e);e.clear(),Ve(r,t);}}var yt$1=(e,...t)=>Pe$1(e,r=>r(...t)),h$2=()=>typeof window>"u"||!window.navigator||/ServerSideRendering|^Deno\//.test(window.navigator.userAgent);var k$2,J$1,c$2=null,ee=!1,S=Y,U=e=>{e.to&&(J$1=e.to),e.now&&(n.now=e.now),e.colors!==void 0&&(c$2=e.colors),e.skipAnimation!=null&&(ee=e.skipAnimation),e.createStringInterpolator&&(k$2=e.createStringInterpolator),e.requestAnimationFrame&&n.use(e.requestAnimationFrame),e.batchedUpdates&&(n.batchedUpdates=e.batchedUpdates),e.willAdvance&&(S=e.willAdvance),e.frameLoop&&(n.frameLoop=e.frameLoop);};var E$1=new Set,u$1=[],H$1=[],A=0,qe$1={get idle(){return !E$1.size&&!u$1.length},start(e){A>e.priority?(E$1.add(e),n.onStart($e)):(te$1(e),n(B));},advance:B,sort(e){if(A)n.onFrame(()=>qe$1.sort(e));else {let t=u$1.indexOf(e);~t&&(u$1.splice(t,1),re(e));}},clear(){u$1=[],E$1.clear();}};function $e(){E$1.forEach(te$1),E$1.clear(),n(B);}function te$1(e){u$1.includes(e)||re(e);}function re(e){u$1.splice(Ge$1(u$1,t=>t.priority>e.priority),0,e);}function B(e){let t=H$1;for(let r=0;r<u$1.length;r++){let n=u$1[r];A=n.priority,n.idle||(S(n),n.advance(e),n.idle||t.push(n));}return A=0,H$1=u$1,H$1.length=0,u$1=t,u$1.length>0}function Ge$1(e,t){let r=e.findIndex(t);return r<0?e.length:r}var ne$2=(e,t,r)=>Math.min(Math.max(r,e),t);var It={transparent:0,aliceblue:4042850303,antiquewhite:4209760255,aqua:16777215,aquamarine:2147472639,azure:4043309055,beige:4126530815,bisque:4293182719,black:255,blanchedalmond:4293643775,blue:65535,blueviolet:2318131967,brown:2771004159,burlywood:3736635391,burntsienna:3934150143,cadetblue:1604231423,chartreuse:2147418367,chocolate:3530104575,coral:4286533887,cornflowerblue:1687547391,cornsilk:4294499583,crimson:3692313855,cyan:16777215,darkblue:35839,darkcyan:9145343,darkgoldenrod:3095792639,darkgray:2846468607,darkgreen:6553855,darkgrey:2846468607,darkkhaki:3182914559,darkmagenta:2332068863,darkolivegreen:1433087999,darkorange:4287365375,darkorchid:2570243327,darkred:2332033279,darksalmon:3918953215,darkseagreen:2411499519,darkslateblue:1211993087,darkslategray:793726975,darkslategrey:793726975,darkturquoise:13554175,darkviolet:2483082239,deeppink:4279538687,deepskyblue:12582911,dimgray:1768516095,dimgrey:1768516095,dodgerblue:512819199,firebrick:2988581631,floralwhite:4294635775,forestgreen:579543807,fuchsia:4278255615,gainsboro:3705462015,ghostwhite:4177068031,gold:4292280575,goldenrod:3668254975,gray:2155905279,green:8388863,greenyellow:2919182335,grey:2155905279,honeydew:4043305215,hotpink:4285117695,indianred:3445382399,indigo:1258324735,ivory:4294963455,khaki:4041641215,lavender:3873897215,lavenderblush:4293981695,lawngreen:2096890111,lemonchiffon:4294626815,lightblue:2916673279,lightcoral:4034953471,lightcyan:3774873599,lightgoldenrodyellow:4210742015,lightgray:3553874943,lightgreen:2431553791,lightgrey:3553874943,lightpink:4290167295,lightsalmon:4288707327,lightseagreen:548580095,lightskyblue:2278488831,lightslategray:2005441023,lightslategrey:2005441023,lightsteelblue:2965692159,lightyellow:4294959359,lime:16711935,limegreen:852308735,linen:4210091775,magenta:4278255615,maroon:2147483903,mediumaquamarine:1724754687,mediumblue:52735,mediumorchid:3126187007,mediumpurple:2473647103,mediumseagreen:1018393087,mediumslateblue:2070474495,mediumspringgreen:16423679,mediumturquoise:1221709055,mediumvioletred:3340076543,midnightblue:421097727,mintcream:4127193855,mistyrose:4293190143,moccasin:4293178879,navajowhite:4292783615,navy:33023,oldlace:4260751103,olive:2155872511,olivedrab:1804477439,orange:4289003775,orangered:4282712319,orchid:3664828159,palegoldenrod:4008225535,palegreen:2566625535,paleturquoise:2951671551,palevioletred:3681588223,papayawhip:4293907967,peachpuff:4292524543,peru:3448061951,pink:4290825215,plum:3718307327,powderblue:2967529215,purple:2147516671,rebeccapurple:1714657791,red:4278190335,rosybrown:3163525119,royalblue:1097458175,saddlebrown:2336560127,salmon:4202722047,sandybrown:4104413439,seagreen:780883967,seashell:4294307583,sienna:2689740287,silver:3233857791,skyblue:2278484991,slateblue:1784335871,slategray:1887473919,slategrey:1887473919,snow:4294638335,springgreen:16744447,steelblue:1182971135,tan:3535047935,teal:8421631,thistle:3636451583,tomato:4284696575,turquoise:1088475391,violet:4001558271,wheat:4125012991,white:4294967295,whitesmoke:4126537215,yellow:4294902015,yellowgreen:2597139199};var d$1="[-+]?\\d*\\.?\\d+",M=d$1+"%";function C$1(...e){return "\\(\\s*("+e.join(")\\s*,\\s*(")+")\\s*\\)"}var oe$1=new RegExp("rgb"+C$1(d$1,d$1,d$1)),fe$1=new RegExp("rgba"+C$1(d$1,d$1,d$1,d$1)),ae$1=new RegExp("hsl"+C$1(d$1,M,M)),ie=new RegExp("hsla"+C$1(d$1,M,M,d$1)),se$1=/^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,ue$1=/^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,le$1=/^#([0-9a-fA-F]{6})$/,ce=/^#([0-9a-fA-F]{8})$/;function be$1(e){let t;return typeof e=="number"?e>>>0===e&&e>=0&&e<=4294967295?e:null:(t=le$1.exec(e))?parseInt(t[1]+"ff",16)>>>0:c$2&&c$2[e]!==void 0?c$2[e]:(t=oe$1.exec(e))?(y$2(t[1])<<24|y$2(t[2])<<16|y$2(t[3])<<8|255)>>>0:(t=fe$1.exec(e))?(y$2(t[1])<<24|y$2(t[2])<<16|y$2(t[3])<<8|me$1(t[4]))>>>0:(t=se$1.exec(e))?parseInt(t[1]+t[1]+t[2]+t[2]+t[3]+t[3]+"ff",16)>>>0:(t=ce.exec(e))?parseInt(t[1],16)>>>0:(t=ue$1.exec(e))?parseInt(t[1]+t[1]+t[2]+t[2]+t[3]+t[3]+t[4]+t[4],16)>>>0:(t=ae$1.exec(e))?(de$1(pe(t[1]),z$1(t[2]),z$1(t[3]))|255)>>>0:(t=ie.exec(e))?(de$1(pe(t[1]),z$1(t[2]),z$1(t[3]))|me$1(t[4]))>>>0:null}function j$1(e,t,r){return r<0&&(r+=1),r>1&&(r-=1),r<1/6?e+(t-e)*6*r:r<1/2?t:r<2/3?e+(t-e)*(2/3-r)*6:e}function de$1(e,t,r){let n=r<.5?r*(1+t):r+t-r*t,f=2*r-n,o=j$1(f,n,e+1/3),i=j$1(f,n,e),s=j$1(f,n,e-1/3);return Math.round(o*255)<<24|Math.round(i*255)<<16|Math.round(s*255)<<8}function y$2(e){let t=parseInt(e,10);return t<0?0:t>255?255:t}function pe(e){return (parseFloat(e)%360+360)%360/360}function me$1(e){let t=parseFloat(e);return t<0?0:t>1?255:Math.round(t*255)}function z$1(e){let t=parseFloat(e);return t<0?0:t>100?1:t/100}function D$1(e){let t=be$1(e);if(t===null)return e;t=t||0;let r=(t&4278190080)>>>24,n=(t&16711680)>>>16,f=(t&65280)>>>8,o=(t&255)/255;return `rgba(${r}, ${n}, ${f}, ${o})`}var W$1=(e,t,r)=>{if(l$1.fun(e))return e;if(l$1.arr(e))return W$1({range:e,output:t,extrapolate:r});if(l$1.str(e.output[0]))return k$2(e);let n=e,f=n.output,o=n.range||[0,1],i=n.extrapolateLeft||n.extrapolate||"extend",s=n.extrapolateRight||n.extrapolate||"extend",x=n.easing||(a=>a);return a=>{let F=He$1(a,o);return Ue$1(a,o[F],o[F+1],f[F],f[F+1],x,i,s,n.map)}};function Ue$1(e,t,r,n,f,o,i,s,x){let a=x?x(e):e;if(a<t){if(i==="identity")return a;i==="clamp"&&(a=t);}if(a>r){if(s==="identity")return a;s==="clamp"&&(a=r);}return n===f?n:t===r?e<=t?n:f:(t===-1/0?a=-a:r===1/0?a=a-t:a=(a-t)/(r-t),a=o(a),n===-1/0?a=-a:f===1/0?a=a+n:a=a*(f-n)+n,a)}function He$1(e,t){for(var r=1;r<t.length-1&&!(t[r]>=e);++r);return r-1}var Be=(e,t="end")=>r=>{r=t==="end"?Math.min(r,.999):Math.max(r,.001);let n=r*e,f=t==="end"?Math.floor(n):Math.ceil(n);return ne$2(0,1,f/e)},P=1.70158,L$1=P*1.525,xe$1=P+1,he$1=2*Math.PI/3,ye$1=2*Math.PI/4.5,V$1=e=>e<1/2.75?7.5625*e*e:e<2/2.75?7.5625*(e-=1.5/2.75)*e+.75:e<2.5/2.75?7.5625*(e-=2.25/2.75)*e+.9375:7.5625*(e-=2.625/2.75)*e+.984375,Lt$1={linear:e=>e,easeInQuad:e=>e*e,easeOutQuad:e=>1-(1-e)*(1-e),easeInOutQuad:e=>e<.5?2*e*e:1-Math.pow(-2*e+2,2)/2,easeInCubic:e=>e*e*e,easeOutCubic:e=>1-Math.pow(1-e,3),easeInOutCubic:e=>e<.5?4*e*e*e:1-Math.pow(-2*e+2,3)/2,easeInQuart:e=>e*e*e*e,easeOutQuart:e=>1-Math.pow(1-e,4),easeInOutQuart:e=>e<.5?8*e*e*e*e:1-Math.pow(-2*e+2,4)/2,easeInQuint:e=>e*e*e*e*e,easeOutQuint:e=>1-Math.pow(1-e,5),easeInOutQuint:e=>e<.5?16*e*e*e*e*e:1-Math.pow(-2*e+2,5)/2,easeInSine:e=>1-Math.cos(e*Math.PI/2),easeOutSine:e=>Math.sin(e*Math.PI/2),easeInOutSine:e=>-(Math.cos(Math.PI*e)-1)/2,easeInExpo:e=>e===0?0:Math.pow(2,10*e-10),easeOutExpo:e=>e===1?1:1-Math.pow(2,-10*e),easeInOutExpo:e=>e===0?0:e===1?1:e<.5?Math.pow(2,20*e-10)/2:(2-Math.pow(2,-20*e+10))/2,easeInCirc:e=>1-Math.sqrt(1-Math.pow(e,2)),easeOutCirc:e=>Math.sqrt(1-Math.pow(e-1,2)),easeInOutCirc:e=>e<.5?(1-Math.sqrt(1-Math.pow(2*e,2)))/2:(Math.sqrt(1-Math.pow(-2*e+2,2))+1)/2,easeInBack:e=>xe$1*e*e*e-P*e*e,easeOutBack:e=>1+xe$1*Math.pow(e-1,3)+P*Math.pow(e-1,2),easeInOutBack:e=>e<.5?Math.pow(2*e,2)*((L$1+1)*2*e-L$1)/2:(Math.pow(2*e-2,2)*((L$1+1)*(e*2-2)+L$1)+2)/2,easeInElastic:e=>e===0?0:e===1?1:-Math.pow(2,10*e-10)*Math.sin((e*10-10.75)*he$1),easeOutElastic:e=>e===0?0:e===1?1:Math.pow(2,-10*e)*Math.sin((e*10-.75)*he$1)+1,easeInOutElastic:e=>e===0?0:e===1?1:e<.5?-(Math.pow(2,20*e-10)*Math.sin((20*e-11.125)*ye$1))/2:Math.pow(2,-20*e+10)*Math.sin((20*e-11.125)*ye$1)/2+1,easeInBounce:e=>1-V$1(1-e),easeOutBounce:V$1,easeInOutBounce:e=>e<.5?(1-V$1(1-2*e))/2:(1+V$1(2*e-1))/2,steps:Be};var g$1=Symbol.for("FluidValue.get"),m=Symbol.for("FluidValue.observers");var Pt=e=>!!(e&&e[g$1]),ve=e=>e&&e[g$1]?e[g$1]():e,qt=e=>e[m]||null;function je(e,t){e.eventObserved?e.eventObserved(t):e(t);}function $t(e,t){let r=e[m];r&&r.forEach(n=>{je(n,t);});}var ge=class{[g$1];[m];constructor(t){if(!t&&!(t=this.get))throw Error("Unknown getter");De$1(this,t);}},De$1=(e,t)=>Ee$1(e,g$1,t);function Gt$1(e,t){if(e[g$1]){let r=e[m];r||Ee$1(e,m,r=new Set),r.has(t)||(r.add(t),e.observerAdded&&e.observerAdded(r.size,t));}return t}function Qt(e,t){let r=e[m];if(r&&r.has(t)){let n=r.size-1;n?r.delete(t):e[m]=null,e.observerRemoved&&e.observerRemoved(n,t);}}var Ee$1=(e,t,r)=>Object.defineProperty(e,t,{value:r,writable:!0,configurable:!0});var O=/[+\-]?(?:0|[1-9]\d*)(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,Oe=/(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))/gi,K=new RegExp(`(${O.source})(%|[a-z]+)`,"i"),we$1=/rgba\(([0-9\.-]+), ([0-9\.-]+), ([0-9\.-]+), ([0-9\.-]+)\)/gi,b$1=/var\((--[a-zA-Z0-9-_]+),? ?([a-zA-Z0-9 ()%#.,-]+)?\)/;var N=e=>{let[t,r]=We(e);if(!t||h$2())return e;let n=window.getComputedStyle(document.documentElement).getPropertyValue(t);if(n)return n.trim();if(r&&r.startsWith("--")){let f=window.getComputedStyle(document.documentElement).getPropertyValue(r);return f||e}else {if(r&&b$1.test(r))return N(r);if(r)return r}return e},We=e=>{let t=b$1.exec(e);if(!t)return [,];let[,r,n]=t;return [r,n]};var _$1,Ke$1=(e,t,r,n,f)=>`rgba(${Math.round(t)}, ${Math.round(r)}, ${Math.round(n)}, ${f})`,Xt=e=>{_$1||(_$1=c$2?new RegExp(`(${Object.keys(c$2).join("|")})(?!\\w)`,"g"):/^\b$/);let t=e.output.map(o=>ve(o).replace(b$1,N).replace(Oe,D$1).replace(_$1,D$1)),r=t.map(o=>o.match(O).map(Number)),f=r[0].map((o,i)=>r.map(s=>{if(!(i in s))throw Error('The arity of each "output" value must be equal');return s[i]})).map(o=>W$1({...e,output:o}));return o=>{let i=!K.test(t[0])&&t.find(x=>K.test(x))?.replace(O,""),s=0;return t[0].replace(O,()=>`${f[s++](o)}${i||""}`).replace(we$1,Ke$1)}};var Z="react-spring: ",Te=e=>{let t=e,r=!1;if(typeof t!="function")throw new TypeError(`${Z}once requires a function parameter`);return (...n)=>{r||(t(...n),r=!0);}},Ne$1=Te(console.warn);function Jt(){Ne$1(`${Z}The "interpolate" function is deprecated in v9 (use "to" instead)`);}var _e$1=Te(console.warn);function er$1(){_e$1(`${Z}Directly calling start instead of using the api object is deprecated in v9 (use ".start" instead), this will be removed in later 0.X.0 versions`);}function or(e){return l$1.str(e)&&(e[0]=="#"||/\d/.test(e)||!h$2()&&b$1.test(e)||e in(c$2||{}))}var Q$1=h$2()?useEffect:useLayoutEffect;var Ce$1=()=>{let e=useRef(!1);return Q$1(()=>(e.current=!0,()=>{e.current=!1;}),[]),e};function Mr(){let e=useState()[1],t=Ce$1();return ()=>{t.current&&e(Math.random());}}function Lr(e,t){let[r]=useState(()=>({inputs:t,result:e()})),n=useRef(),f=n.current,o=f;return o?t&&o.inputs&&it$2(t,o.inputs)||(o={inputs:t,result:e()}):o=r,useEffect(()=>{n.current=o,f==r&&(r.inputs=r.result=void 0);},[o]),o.result}function it$2(e,t){if(e.length!==t.length)return !1;for(let r=0;r<e.length;r++)if(e[r]!==t[r])return !1;return !0}var $r=e=>useEffect(e,ut),ut=[];function Ur(e){let t=useRef();return useEffect(()=>{t.current=e;}),t.current}
|
|
306
|
-
|
|
307
|
-
var h$1=Symbol.for("Animated:node"),v$1=e=>!!e&&e[h$1]===e,k$1=e=>e&&e[h$1],D=(e,t)=>mt$1(e,h$1,t),F$1=e=>e&&e[h$1]&&e[h$1].getPayload(),c$1=class{payload;constructor(){D(this,this);}getPayload(){return this.payload||[]}};var l=class extends c$1{constructor(r){super();this._value=r;l$1.num(this._value)&&(this.lastPosition=this._value);}done=!0;elapsedTime;lastPosition;lastVelocity;v0;durationProgress=0;static create(r){return new l(r)}getPayload(){return [this]}getValue(){return this._value}setValue(r,n){return l$1.num(r)&&(this.lastPosition=r,n&&(r=Math.round(r/n)*n,this.done&&(this.lastPosition=r))),this._value===r?!1:(this._value=r,!0)}reset(){let{done:r}=this;this.done=!1,l$1.num(this._value)&&(this.elapsedTime=0,this.durationProgress=0,this.lastPosition=this._value,r&&(this.lastVelocity=null),this.v0=null);}};var d=class extends l{_string=null;_toString;constructor(t){super(0),this._toString=W$1({output:[t,t]});}static create(t){return new d(t)}getValue(){let t=this._string;return t??(this._string=this._toString(this._value))}setValue(t){if(l$1.str(t)){if(t==this._string)return !1;this._string=t,this._value=1;}else if(super.setValue(t))this._string=null;else return !1;return !0}reset(t){t&&(this._toString=W$1({output:[this.getValue(),t]})),this._value=0,super.reset();}};var f={dependencies:null};var u=class extends c$1{constructor(r){super();this.source=r;this.setValue(r);}getValue(r){let n={};return xt(this.source,(a,i)=>{v$1(a)?n[i]=a.getValue(r):Pt(a)?n[i]=ve(a):r||(n[i]=a);}),n}setValue(r){this.source=r,this.payload=this._makePayload(r);}reset(){this.payload&&Ve(this.payload,r=>r.reset());}_makePayload(r){if(r){let n=new Set;return xt(r,this._addToPayload,n),Array.from(n)}}_addToPayload(r){f.dependencies&&Pt(r)&&f.dependencies.add(r);let n=F$1(r);n&&Ve(n,a=>this.add(a));}};var y$1=class extends u{constructor(t){super(t);}static create(t){return new y$1(t)}getValue(){return this.source.map(t=>t.getValue())}setValue(t){let r=this.getPayload();return t.length==r.length?r.map((n,a)=>n.setValue(t[a])).some(Boolean):(super.setValue(t.map(z)),!0)}};function z(e){return (or(e)?d:l).create(e)}function Le$1(e){let t=k$1(e);return t?t.constructor:l$1.arr(e)?y$1:or(e)?d:l}var x$1=(e,t)=>{let r=!l$1.fun(e)||e.prototype&&e.prototype.isReactComponent;return forwardRef((n$1,a)=>{let i=useRef(null),o=r&&useCallback(s=>{i.current=ae(a,s);},[a]),[m,T]=ne$1(n$1,t),W=Mr(),P=()=>{let s=i.current;if(r&&!s)return;(s?t.applyAnimatedValues(s,m.getValue(!0)):!1)===!1&&W();},_=new b(P,T),p=useRef();Q$1(()=>(p.current=_,Ve(T,s=>Gt$1(s,_)),()=>{p.current&&(Ve(p.current.deps,s=>Qt(s,p.current)),n.cancel(p.current.update));})),useEffect(P,[]),$r(()=>()=>{let s=p.current;Ve(s.deps,S=>Qt(S,s));});let $=t.getComponentProps(m.getValue());return React.createElement(e,{...$,ref:o})})},b=class{constructor(t,r){this.update=t;this.deps=r;}eventObserved(t){t.type=="change"&&n.write(this.update);}};function ne$1(e,t){let r=new Set;return f.dependencies=r,e.style&&(e={...e,style:t.createAnimatedStyle(e.style)}),e=new u(e),f.dependencies=null,[e,r]}function ae(e,t){return e&&(l$1.fun(e)?e(t):e.current=t),t}var j=Symbol.for("AnimatedComponent"),Ke=(e,{applyAnimatedValues:t=()=>!1,createAnimatedStyle:r=a=>new u(a),getComponentProps:n=a=>a}={})=>{let a={applyAnimatedValues:t,createAnimatedStyle:r,getComponentProps:n},i=o=>{let m=I$2(o)||"Anonymous";return l$1.str(o)?o=i[o]||(i[o]=x$1(o,a)):o=o[j]||(o[j]=x$1(o,a)),o.displayName=`Animated(${m})`,o};return xt(e,(o,m)=>{l$1.arr(e)&&(m=I$2(o)),i[m]=i(o);}),{animated:i}},I$2=e=>l$1.str(e)?e:e&&l$1.str(e.displayName)?e.displayName:l$1.fun(e)&&e.name||null;
|
|
308
|
-
|
|
309
|
-
function I$1(t,...e){return l$1.fun(t)?t(...e):t}var te=(t,e)=>t===!0||!!(e&&t&&(l$1.fun(t)?t(e):ht$1(t).includes(e))),et=(t,e)=>l$1.obj(t)?e&&t[e]:t;var ke=(t,e)=>t.default===!0?t[e]:t.default?t.default[e]:void 0,nn=t=>t,ne=(t,e=nn)=>{let n=rn;t.default&&t.default!==!0&&(t=t.default,n=Object.keys(t));let r={};for(let o of n){let s=e(t[o],o);l$1.und(s)||(r[o]=s);}return r},rn=["config","onProps","onStart","onChange","onPause","onResume","onRest"],on={config:1,from:1,to:1,ref:1,loop:1,reset:1,pause:1,cancel:1,reverse:1,immediate:1,default:1,delay:1,onProps:1,onStart:1,onChange:1,onPause:1,onResume:1,onRest:1,onResolve:1,items:1,trail:1,sort:1,expires:1,initial:1,enter:1,update:1,leave:1,children:1,onDestroyed:1,keys:1,callId:1,parentId:1};function sn(t){let e={},n=0;if(xt(t,(r,o)=>{on[o]||(e[o]=r,n++);}),n)return e}function de(t){let e=sn(t);if(e){let n={to:e};return xt(t,(r,o)=>o in e||(n[o]=r)),n}return {...t}}function me(t){return t=ve(t),l$1.arr(t)?t.map(me):or(t)?p.createStringInterpolator({range:[0,1],output:[t,t]})(1):t}function Ue(t){for(let e in t)return !0;return !1}function Ee(t){return l$1.fun(t)||l$1.arr(t)&&l$1.obj(t[0])}function xe(t,e){t.ref?.delete(t),e?.delete(t);}function he(t,e){e&&t.ref!==e&&(t.ref?.delete(t),e.add(t),t.ref=e);}var mt={default:{tension:170,friction:26},gentle:{tension:120,friction:14},wobbly:{tension:180,friction:12},stiff:{tension:210,friction:20},slow:{tension:280,friction:60},molasses:{tension:280,friction:120}};var tt={...mt.default,mass:1,damping:1,easing:Lt$1.linear,clamp:!1},we=class{tension;friction;frequency;damping;mass;velocity=0;restVelocity;precision;progress;duration;easing;clamp;bounce;decay;round;constructor(){Object.assign(this,tt);}};function gt(t,e,n){n&&(n={...n},ht(n,e),e={...n,...e}),ht(t,e),Object.assign(t,e);for(let i in tt)t[i]==null&&(t[i]=tt[i]);let{frequency:r,damping:o}=t,{mass:s}=t;return l$1.und(r)||(r<.01&&(r=.01),o<0&&(o=0),t.tension=Math.pow(2*Math.PI/r,2)*s,t.friction=4*Math.PI*o*s/r),t}function ht(t,e){if(!l$1.und(e.decay))t.duration=void 0;else {let n=!l$1.und(e.tension)||!l$1.und(e.friction);(n||!l$1.und(e.frequency)||!l$1.und(e.damping)||!l$1.und(e.mass))&&(t.duration=void 0,t.decay=void 0),n&&(t.frequency=void 0);}}var yt=[],Le=class{changed=!1;values=yt;toValues=null;fromValues=yt;to;from;config=new we;immediate=!1};function Me(t,{key:e,props:n$1,defaultProps:r,state:o,actions:s}){return new Promise((i,a)=>{let u,p$1,f=te(n$1.cancel??r?.cancel,e);if(f)b();else {l$1.und(n$1.pause)||(o.paused=te(n$1.pause,e));let c=r?.pause;c!==!0&&(c=o.paused||te(c,e)),u=I$1(n$1.delay||0,e),c?(o.resumeQueue.add(m),s.pause()):(s.resume(),m());}function d(){o.resumeQueue.add(m),o.timeouts.delete(p$1),p$1.cancel(),u=p$1.time-n.now();}function m(){u>0&&!p.skipAnimation?(o.delayed=!0,p$1=n.setTimeout(b,u),o.pauseQueue.add(d),o.timeouts.add(p$1)):b();}function b(){o.delayed&&(o.delayed=!1),o.pauseQueue.delete(d),o.timeouts.delete(p$1),t<=(o.cancelId||0)&&(f=!0);try{s.start({...n$1,callId:t,cancel:f},i);}catch(c){a(c);}}})}var be=(t,e)=>e.length==1?e[0]:e.some(n=>n.cancelled)?q$1(t.get()):e.every(n=>n.noop)?nt(t.get()):E(t.get(),e.every(n=>n.finished)),nt=t=>({value:t,noop:!0,finished:!0,cancelled:!1}),E=(t,e,n=!1)=>({value:t,finished:e,cancelled:n}),q$1=t=>({value:t,cancelled:!0,finished:!1});function De(t,e,n$1,r){let{callId:o,parentId:s,onRest:i}=e,{asyncTo:a,promise:u}=n$1;return !s&&t===a&&!e.reset?u:n$1.promise=(async()=>{n$1.asyncId=o,n$1.asyncTo=t;let p$1=ne(e,(l,h)=>h==="onRest"?void 0:l),f,d,m=new Promise((l,h)=>(f=l,d=h)),b=l=>{let h=o<=(n$1.cancelId||0)&&q$1(r)||o!==n$1.asyncId&&E(r,!1);if(h)throw l.result=h,d(l),l},c=(l,h)=>{let g=new Ae,x=new Ne;return (async()=>{if(p.skipAnimation)throw oe(n$1),x.result=E(r,!1),d(x),x;b(g);let S=l$1.obj(l)?{...l}:{...h,to:l};S.parentId=o,xt(p$1,(V,_)=>{l$1.und(S[_])&&(S[_]=V);});let A=await r.start(S);return b(g),n$1.paused&&await new Promise(V=>{n$1.resumeQueue.add(V);}),A})()},P;if(p.skipAnimation)return oe(n$1),E(r,!1);try{let l;l$1.arr(t)?l=(async h=>{for(let g of h)await c(g);})(t):l=Promise.resolve(t(c,r.stop.bind(r))),await Promise.all([l.then(f),m]),P=E(r.get(),!0,!1);}catch(l){if(l instanceof Ae)P=l.result;else if(l instanceof Ne)P=l.result;else throw l}finally{o==n$1.asyncId&&(n$1.asyncId=s,n$1.asyncTo=s?a:void 0,n$1.promise=s?u:void 0);}return l$1.fun(i)&&n.batchedUpdates(()=>{i(P,r,r.item);}),P})()}function oe(t,e){Pe$1(t.timeouts,n=>n.cancel()),t.pauseQueue.clear(),t.resumeQueue.clear(),t.asyncId=t.asyncTo=t.promise=void 0,e&&(t.cancelId=e);}var Ae=class extends Error{result;constructor(){super("An async animation has been interrupted. You see this error because you forgot to use `await` or `.catch(...)` on its returned promise.");}},Ne=class extends Error{result;constructor(){super("SkipAnimationSignal");}};var Re=t=>t instanceof X,Sn=1,X=class extends ge{id=Sn++;_priority=0;get priority(){return this._priority}set priority(e){this._priority!=e&&(this._priority=e,this._onPriorityChange(e));}get(){let e=k$1(this);return e&&e.getValue()}to(...e){return p.to(this,e)}interpolate(...e){return Jt(),p.to(this,e)}toJSON(){return this.get()}observerAdded(e){e==1&&this._attach();}observerRemoved(e){e==0&&this._detach();}_attach(){}_detach(){}_onChange(e,n=!1){$t(this,{type:"change",parent:this,value:e,idle:n});}_onPriorityChange(e){this.idle||qe$1.sort(this),$t(this,{type:"priority",parent:this,priority:e});}};var se=Symbol.for("SpringPhase"),bt=1,rt=2,ot=4,qe=t=>(t[se]&bt)>0,Q=t=>(t[se]&rt)>0,ye=t=>(t[se]&ot)>0,st=(t,e)=>e?t[se]|=rt|bt:t[se]&=~rt,it$1=(t,e)=>e?t[se]|=ot:t[se]&=~ot;var ue=class extends X{key;animation=new Le;queue;defaultProps={};_state={paused:!1,delayed:!1,pauseQueue:new Set,resumeQueue:new Set,timeouts:new Set};_pendingCalls=new Set;_lastCallId=0;_lastToId=0;_memoizedDuration=0;constructor(e,n){if(super(),!l$1.und(e)||!l$1.und(n)){let r=l$1.obj(e)?{...e}:{...n,from:e};l$1.und(r.default)&&(r.default=!0),this.start(r);}}get idle(){return !(Q(this)||this._state.asyncTo)||ye(this)}get goal(){return ve(this.animation.to)}get velocity(){let e=k$1(this);return e instanceof l?e.lastVelocity||0:e.getPayload().map(n=>n.lastVelocity||0)}get hasAnimated(){return qe(this)}get isAnimating(){return Q(this)}get isPaused(){return ye(this)}get isDelayed(){return this._state.delayed}advance(e){let n=!0,r=!1,o=this.animation,{toValues:s}=o,{config:i}=o,a=F$1(o.to);!a&&Pt(o.to)&&(s=ht$1(ve(o.to))),o.values.forEach((f,d$1)=>{if(f.done)return;let m=f.constructor==d?1:a?a[d$1].lastPosition:s[d$1],b=o.immediate,c=m;if(!b){if(c=f.lastPosition,i.tension<=0){f.done=!0;return}let P=f.elapsedTime+=e,l=o.fromValues[d$1],h=f.v0!=null?f.v0:f.v0=l$1.arr(i.velocity)?i.velocity[d$1]:i.velocity,g,x=i.precision||(l==m?.005:Math.min(1,Math.abs(m-l)*.001));if(l$1.und(i.duration))if(i.decay){let S=i.decay===!0?.998:i.decay,A=Math.exp(-(1-S)*P);c=l+h/(1-S)*(1-A),b=Math.abs(f.lastPosition-c)<=x,g=h*A;}else {g=f.lastVelocity==null?h:f.lastVelocity;let S=i.restVelocity||x/10,A=i.clamp?0:i.bounce,V=!l$1.und(A),_=l==m?f.v0>0:l<m,v,w=!1,C=1,$=Math.ceil(e/C);for(let L=0;L<$&&(v=Math.abs(g)>S,!(!v&&(b=Math.abs(m-c)<=x,b)));++L){V&&(w=c==m||c>m==_,w&&(g=-g*A,c=m));let N=-i.tension*1e-6*(c-m),y=-i.friction*.001*g,T=(N+y)/i.mass;g=g+T*C,c=c+g*C;}}else {let S=1;i.duration>0&&(this._memoizedDuration!==i.duration&&(this._memoizedDuration=i.duration,f.durationProgress>0&&(f.elapsedTime=i.duration*f.durationProgress,P=f.elapsedTime+=e)),S=(i.progress||0)+P/this._memoizedDuration,S=S>1?1:S<0?0:S,f.durationProgress=S),c=l+i.easing(S)*(m-l),g=(c-f.lastPosition)/e,b=S==1;}f.lastVelocity=g,Number.isNaN(c)&&(console.warn("Got NaN while animating:",this),b=!0);}a&&!a[d$1].done&&(b=!1),b?f.done=!0:n=!1,f.setValue(c,i.round)&&(r=!0);});let u=k$1(this),p=u.getValue();if(n){let f=ve(o.to);(p!==f||r)&&!i.decay?(u.setValue(f),this._onChange(f)):r&&i.decay&&this._onChange(p),this._stop();}else r&&this._onChange(p);}set(e){return n.batchedUpdates(()=>{this._stop(),this._focus(e),this._set(e);}),this}pause(){this._update({pause:!0});}resume(){this._update({pause:!1});}finish(){if(Q(this)){let{to:e,config:n$1}=this.animation;n.batchedUpdates(()=>{this._onStart(),n$1.decay||this._set(e,!1),this._stop();});}return this}update(e){return (this.queue||(this.queue=[])).push(e),this}start(e,n){let r;return l$1.und(e)?(r=this.queue||[],this.queue=[]):r=[l$1.obj(e)?e:{...n,to:e}],Promise.all(r.map(o=>this._update(o))).then(o=>be(this,o))}stop(e){let{to:n$1}=this.animation;return this._focus(this.get()),oe(this._state,e&&this._lastCallId),n.batchedUpdates(()=>this._stop(n$1,e)),this}reset(){this._update({reset:!0});}eventObserved(e){e.type=="change"?this._start():e.type=="priority"&&(this.priority=e.priority+1);}_prepareNode(e){let n=this.key||"",{to:r,from:o}=e;r=l$1.obj(r)?r[n]:r,(r==null||Ee(r))&&(r=void 0),o=l$1.obj(o)?o[n]:o,o==null&&(o=void 0);let s={to:r,from:o};return qe(this)||(e.reverse&&([r,o]=[o,r]),o=ve(o),l$1.und(o)?k$1(this)||this._set(r):this._set(o)),s}_update({...e},n){let{key:r,defaultProps:o}=this;e.default&&Object.assign(o,ne(e,(a,u)=>/^on/.test(u)?et(a,r):a)),_t(this,e,"onProps"),Ie(this,"onProps",e,this);let s=this._prepareNode(e);if(Object.isFrozen(this))throw Error("Cannot animate a `SpringValue` object that is frozen. Did you forget to pass your component to `animated(...)` before animating its props?");let i=this._state;return Me(++this._lastCallId,{key:r,props:e,defaultProps:o,state:i,actions:{pause:()=>{ye(this)||(it$1(this,!0),yt$1(i.pauseQueue),Ie(this,"onPause",E(this,Ce(this,this.animation.to)),this));},resume:()=>{ye(this)&&(it$1(this,!1),Q(this)&&this._resume(),yt$1(i.resumeQueue),Ie(this,"onResume",E(this,Ce(this,this.animation.to)),this));},start:this._merge.bind(this,s)}}).then(a=>{if(e.loop&&a.finished&&!(n&&a.noop)){let u=at(e);if(u)return this._update(u,!0)}return a})}_merge(e,n$1,r){if(n$1.cancel)return this.stop(!0),r(q$1(this));let o=!l$1.und(e.to),s=!l$1.und(e.from);if(o||s)if(n$1.callId>this._lastToId)this._lastToId=n$1.callId;else return r(q$1(this));let{key:i,defaultProps:a,animation:u}=this,{to:p,from:f}=u,{to:d$1=p,from:m=f}=e;s&&!o&&(!n$1.default||l$1.und(d$1))&&(d$1=m),n$1.reverse&&([d$1,m]=[m,d$1]);let b=!bt$1(m,f);b&&(u.from=m),m=ve(m);let c=!bt$1(d$1,p);c&&this._focus(d$1);let P=Ee(n$1.to),{config:l}=u,{decay:h,velocity:g}=l;(o||s)&&(l.velocity=0),n$1.config&&!P&>(l,I$1(n$1.config,i),n$1.config!==a.config?I$1(a.config,i):void 0);let x=k$1(this);if(!x||l$1.und(d$1))return r(E(this,!0));let S=l$1.und(n$1.reset)?s&&!n$1.default:!l$1.und(m)&&te(n$1.reset,i),A=S?m:this.get(),V=me(d$1),_=l$1.num(V)||l$1.arr(V)||or(V),v=!P&&(!_||te(a.immediate||n$1.immediate,i));if(c){let L=Le$1(d$1);if(L!==x.constructor)if(v)x=this._set(V);else throw Error(`Cannot animate between ${x.constructor.name} and ${L.name}, as the "to" prop suggests`)}let w=x.constructor,C=Pt(d$1),$=!1;if(!C){let L=S||!qe(this)&&b;(c||L)&&($=bt$1(me(A),V),C=!$),(!bt$1(u.immediate,v)&&!v||!bt$1(l.decay,h)||!bt$1(l.velocity,g))&&(C=!0);}if($&&Q(this)&&(u.changed&&!S?C=!0:C||this._stop(p)),!P&&((C||Pt(p))&&(u.values=x.getPayload(),u.toValues=Pt(d$1)?null:w==d?[1]:ht$1(V)),u.immediate!=v&&(u.immediate=v,!v&&!S&&this._set(p)),C)){let{onRest:L}=u;Ve(_n,y=>_t(this,n$1,y));let N=E(this,Ce(this,p));yt$1(this._pendingCalls,N),this._pendingCalls.add(r),u.changed&&n.batchedUpdates(()=>{u.changed=!S,L?.(N,this),S?I$1(a.onRest,N):u.onStart?.(N,this);});}S&&this._set(A),P?r(De(n$1.to,n$1,this._state,this)):C?this._start():Q(this)&&!c?this._pendingCalls.add(r):r(nt(A));}_focus(e){let n=this.animation;e!==n.to&&(qt(this)&&this._detach(),n.to=e,qt(this)&&this._attach());}_attach(){let e=0,{to:n}=this.animation;Pt(n)&&(Gt$1(n,this),Re(n)&&(e=n.priority+1)),this.priority=e;}_detach(){let{to:e}=this.animation;Pt(e)&&Qt(e,this);}_set(e,n$1=!0){let r=ve(e);if(!l$1.und(r)){let o=k$1(this);if(!o||!bt$1(r,o.getValue())){let s=Le$1(r);!o||o.constructor!=s?D(this,s.create(r)):o.setValue(r),o&&n.batchedUpdates(()=>{this._onChange(r,n$1);});}}return k$1(this)}_onStart(){let e=this.animation;e.changed||(e.changed=!0,Ie(this,"onStart",E(this,Ce(this,e.to)),this));}_onChange(e,n){n||(this._onStart(),I$1(this.animation.onChange,e,this)),I$1(this.defaultProps.onChange,e,this),super._onChange(e,n);}_start(){let e=this.animation;k$1(this).reset(ve(e.to)),e.immediate||(e.fromValues=e.values.map(n=>n.lastPosition)),Q(this)||(st(this,!0),ye(this)||this._resume());}_resume(){p.skipAnimation?this.finish():qe$1.start(this);}_stop(e,n){if(Q(this)){st(this,!1);let r=this.animation;Ve(r.values,s=>{s.done=!0;}),r.toValues&&(r.onChange=r.onPause=r.onResume=void 0),$t(this,{type:"idle",parent:this});let o=n?q$1(this.get()):E(this.get(),Ce(this,e??r.to));yt$1(this._pendingCalls,o),r.changed&&(r.changed=!1,Ie(this,"onRest",o,this));}}};function Ce(t,e){let n=me(e),r=me(t.get());return bt$1(r,n)}function at(t,e=t.loop,n=t.to){let r=I$1(e);if(r){let o=r!==!0&&de(r),s=(o||t).reverse,i=!o||o.reset;return Pe({...t,loop:e,default:!1,pause:void 0,to:!s||Ee(n)?n:void 0,from:i?t.from:void 0,reset:i,...o})}}function Pe(t){let{to:e,from:n}=t=de(t),r=new Set;return l$1.obj(e)&&Vt(e,r),l$1.obj(n)&&Vt(n,r),t.keys=r.size?Array.from(r):null,t}function Ot(t){let e=Pe(t);return l$1.und(e.default)&&(e.default=ne(e)),e}function Vt(t,e){xt(t,(n,r)=>n!=null&&e.add(r));}var _n=["onStart","onRest","onChange","onPause","onResume"];function _t(t,e,n){t.animation[n]=e[n]!==ke(e,n)?et(e[n],t.key):void 0;}function Ie(t,e,...n){t.animation[e]?.(...n),t.defaultProps[e]?.(...n);}var Fn=["onStart","onChange","onRest"],kn=1,le=class{id=kn++;springs={};queue=[];ref;_flush;_initialProps;_lastAsyncId=0;_active=new Set;_changed=new Set;_started=!1;_item;_state={paused:!1,pauseQueue:new Set,resumeQueue:new Set,timeouts:new Set};_events={onStart:new Map,onChange:new Map,onRest:new Map};constructor(e,n){this._onFrame=this._onFrame.bind(this),n&&(this._flush=n),e&&this.start({default:!0,...e});}get idle(){return !this._state.asyncTo&&Object.values(this.springs).every(e=>e.idle&&!e.isDelayed&&!e.isPaused)}get item(){return this._item}set item(e){this._item=e;}get(){let e={};return this.each((n,r)=>e[r]=n.get()),e}set(e){for(let n in e){let r=e[n];l$1.und(r)||this.springs[n].set(r);}}update(e){return e&&this.queue.push(Pe(e)),this}start(e){let{queue:n}=this;return e?n=ht$1(e).map(Pe):this.queue=[],this._flush?this._flush(this,n):(jt(this,n),ze(this,n))}stop(e,n){if(e!==!!e&&(n=e),n){let r=this.springs;Ve(ht$1(n),o=>r[o].stop(!!e));}else oe(this._state,this._lastAsyncId),this.each(r=>r.stop(!!e));return this}pause(e){if(l$1.und(e))this.start({pause:!0});else {let n=this.springs;Ve(ht$1(e),r=>n[r].pause());}return this}resume(e){if(l$1.und(e))this.start({pause:!1});else {let n=this.springs;Ve(ht$1(e),r=>n[r].resume());}return this}each(e){xt(this.springs,e);}_onFrame(){let{onStart:e,onChange:n,onRest:r}=this._events,o=this._active.size>0,s=this._changed.size>0;(o&&!this._started||s&&!this._started)&&(this._started=!0,Pe$1(e,([u,p])=>{p.value=this.get(),u(p,this,this._item);}));let i=!o&&this._started,a=s||i&&r.size?this.get():null;s&&n.size&&Pe$1(n,([u,p])=>{p.value=a,u(p,this,this._item);}),i&&(this._started=!1,Pe$1(r,([u,p])=>{p.value=a,u(p,this,this._item);}));}eventObserved(e){if(e.type=="change")this._changed.add(e.parent),e.idle||this._active.add(e.parent);else if(e.type=="idle")this._active.delete(e.parent);else return;n.onFrame(this._onFrame);}};function ze(t,e){return Promise.all(e.map(n=>wt(t,n))).then(n=>be(t,n))}async function wt(t,e,n$1){let{keys:r,to:o,from:s,loop:i,onRest:a,onResolve:u}=e,p=l$1.obj(e.default)&&e.default;i&&(e.loop=!1),o===!1&&(e.to=null),s===!1&&(e.from=null);let f=l$1.arr(o)||l$1.fun(o)?o:void 0;f?(e.to=void 0,e.onRest=void 0,p&&(p.onRest=void 0)):Ve(Fn,P=>{let l=e[P];if(l$1.fun(l)){let h=t._events[P];e[P]=({finished:g,cancelled:x})=>{let S=h.get(l);S?(g||(S.finished=!1),x&&(S.cancelled=!0)):h.set(l,{value:null,finished:g||!1,cancelled:x||!1});},p&&(p[P]=e[P]);}});let d=t._state;e.pause===!d.paused?(d.paused=e.pause,yt$1(e.pause?d.pauseQueue:d.resumeQueue)):d.paused&&(e.pause=!0);let m=(r||Object.keys(t.springs)).map(P=>t.springs[P].start(e)),b=e.cancel===!0||ke(e,"cancel")===!0;(f||b&&d.asyncId)&&m.push(Me(++t._lastAsyncId,{props:e,state:d,actions:{pause:Y,resume:Y,start(P,l){b?(oe(d,t._lastAsyncId),l(q$1(t))):(P.onRest=a,l(De(f,P,d,t)));}}})),d.paused&&await new Promise(P=>{d.resumeQueue.add(P);});let c=be(t,await Promise.all(m));if(i&&c.finished&&!(n$1&&c.noop)){let P=at(e,i,o);if(P)return jt(t,[P]),wt(t,P,!0)}return u&&n.batchedUpdates(()=>u(c,t,t.item)),c}function _e(t,e){let n={...t.springs};return e&&Ve(ht$1(e),r=>{l$1.und(r.keys)&&(r=Pe(r)),l$1.obj(r.to)||(r={...r,to:void 0}),Mt(n,r,o=>Lt(o));}),pt(t,n),n}function pt(t,e){xt(e,(n,r)=>{t.springs[r]||(t.springs[r]=n,Gt$1(n,t));});}function Lt(t,e){let n=new ue;return n.key=t,e&&Gt$1(n,e),n}function Mt(t,e,n){e.keys&&Ve(e.keys,r=>{(t[r]||(t[r]=n(r)))._prepareNode(e);});}function jt(t,e){Ve(e,n=>{Mt(t.springs,n,r=>Lt(r,t));});}var H=({children:t,...e})=>{let n=useContext(Ge),r=e.pause||!!n.pause,o=e.immediate||!!n.immediate;e=Lr(()=>({pause:r,immediate:o}),[r,o]);let{Provider:s}=Ge;return React.createElement(s,{value:e},t)},Ge=wn(H,{});H.Provider=Ge.Provider;H.Consumer=Ge.Consumer;function wn(t,e){return Object.assign(t,React.createContext(e)),t.Provider._context=t,t.Consumer._context=t,t}var fe=()=>{let t=[],e=function(r){er$1();let o=[];return Ve(t,(s,i)=>{if(l$1.und(r))o.push(s.start());else {let a=n(r,s,i);a&&o.push(s.start(a));}}),o};e.current=t,e.add=function(r){t.includes(r)||t.push(r);},e.delete=function(r){let o=t.indexOf(r);~o&&t.splice(o,1);},e.pause=function(){return Ve(t,r=>r.pause(...arguments)),this},e.resume=function(){return Ve(t,r=>r.resume(...arguments)),this},e.set=function(r){Ve(t,(o,s)=>{let i=l$1.fun(r)?r(s,o):r;i&&o.set(i);});},e.start=function(r){let o=[];return Ve(t,(s,i)=>{if(l$1.und(r))o.push(s.start());else {let a=this._getProps(r,s,i);a&&o.push(s.start(a));}}),o},e.stop=function(){return Ve(t,r=>r.stop(...arguments)),this},e.update=function(r){return Ve(t,(o,s)=>o.update(this._getProps(r,o,s))),this};let n=function(r,o,s){return l$1.fun(r)?r(s,o):r};return e._getProps=n,e};function He(t,e,n){let r=l$1.fun(e)&&e;r&&!n&&(n=[]);let o=useMemo(()=>r||arguments.length==3?fe():void 0,[]),s=useRef(0),i=Mr(),a=useMemo(()=>({ctrls:[],queue:[],flush(h,g){let x=_e(h,g);return s.current>0&&!a.queue.length&&!Object.keys(x).some(A=>!h.springs[A])?ze(h,g):new Promise(A=>{pt(h,x),a.queue.push(()=>{A(ze(h,g));}),i();})}}),[]),u=useRef([...a.ctrls]),p=[],f=Ur(t)||0;useMemo(()=>{Ve(u.current.slice(t,f),h=>{xe(h,o),h.stop(!0);}),u.current.length=t,d(f,t);},[t]),useMemo(()=>{d(0,Math.min(f,t));},n);function d(h,g){for(let x=h;x<g;x++){let S=u.current[x]||(u.current[x]=new le(null,a.flush)),A=r?r(x,S):e[x];A&&(p[x]=Ot(A));}}let m=u.current.map((h,g)=>_e(h,p[g])),b=useContext(H),c=Ur(b),P=b!==c&&Ue(b);Q$1(()=>{s.current++,a.ctrls=u.current;let{queue:h}=a;h.length&&(a.queue=[],Ve(h,g=>g())),Ve(u.current,(g,x)=>{o?.add(g),P&&g.start({default:b});let S=p[x];S&&(he(g,S.ref),g.ref?g.queue.push(S):g.start(S));});}),$r(()=>()=>{Ve(a.ctrls,h=>h.stop(!0));});let l=m.map(h=>({...h}));return o?[l,o]:l}function J(t,e){let n=l$1.fun(t),[[r],o]=He(1,n?t:[t],n?e||[]:e);return n||arguments.length==2?[r,o]:r}function Gt(t,e,n){let r=l$1.fun(e)&&e,{reset:o,sort:s,trail:i=0,expires:a=!0,exitBeforeEnter:u=!1,onDestroyed:p,ref:f,config:d}=r?r():e,m=useMemo(()=>r||arguments.length==3?fe():void 0,[]),b=ht$1(t),c=[],P=useRef(null),l=o?null:P.current;Q$1(()=>{P.current=c;}),$r(()=>(Ve(c,y=>{m?.add(y.ctrl),y.ctrl.ref=m;}),()=>{Ve(P.current,y=>{y.expired&&clearTimeout(y.expirationId),xe(y.ctrl,m),y.ctrl.stop(!0);});}));let h=tr(b,r?r():e,l),g=o&&P.current||[];Q$1(()=>Ve(g,({ctrl:y,item:T,key:F})=>{xe(y,m),I$1(p,T,F);}));let x=[];if(l&&Ve(l,(y,T)=>{y.expired?(clearTimeout(y.expirationId),g.push(y)):(T=x[T]=h.indexOf(y.key),~T&&(c[T]=y));}),Ve(b,(y,T)=>{c[T]||(c[T]={key:h[T],item:y,phase:"mount",ctrl:new le},c[T].ctrl.item=y);}),x.length){let y=-1,{leave:T}=r?r():e;Ve(x,(F,k)=>{let O=l[k];~F?(y=c.indexOf(O),c[y]={...O,item:b[F]}):T&&c.splice(++y,0,O);});}l$1.fun(s)&&c.sort((y,T)=>s(y.item,T.item));let S=-i,A=Mr(),V=ne(e),_=new Map,v=useRef(new Map),w=useRef(!1);Ve(c,(y,T)=>{let F=y.key,k=y.phase,O=r?r():e,U,D,Jt=I$1(O.delay||0,F);if(k=="mount")U=O.enter,D="enter";else {let M=h.indexOf(F)<0;if(k!="leave")if(M)U=O.leave,D="leave";else if(U=O.update)D="update";else return;else if(!M)U=O.enter,D="enter";else return}if(U=I$1(U,y.item,T),U=l$1.obj(U)?de(U):{to:U},!U.config){let M=d||V.config;U.config=I$1(M,y.item,T,D);}S+=i;let Z={...V,delay:Jt+S,ref:f,immediate:O.immediate,reset:!1,...U};if(D=="enter"&&l$1.und(Z.from)){let M=r?r():e,Te=l$1.und(M.initial)||l?M.from:M.initial;Z.from=I$1(Te,y.item,T);}let{onResolve:Wt}=Z;Z.onResolve=M=>{I$1(Wt,M);let Te=P.current,B=Te.find(Fe=>Fe.key===F);if(B&&!(M.cancelled&&B.phase!="update")&&B.ctrl.idle){let Fe=Te.every(ee=>ee.ctrl.idle);if(B.phase=="leave"){let ee=I$1(a,B.item);if(ee!==!1){let Ze=ee===!0?0:ee;if(B.expired=!0,!Fe&&Ze>0){Ze<=2147483647&&(B.expirationId=setTimeout(A,Ze));return}}}Fe&&Te.some(ee=>ee.expired)&&(v.current.delete(B),u&&(w.current=!0),A());}};let ft=_e(y.ctrl,Z);D==="leave"&&u?v.current.set(y,{phase:D,springs:ft,payload:Z}):_.set(y,{phase:D,springs:ft,payload:Z});});let C=useContext(H),$=Ur(C),L=C!==$&&Ue(C);Q$1(()=>{L&&Ve(c,y=>{y.ctrl.start({default:C});});},[C]),Ve(_,(y,T)=>{if(v.current.size){let F=c.findIndex(k=>k.key===T.key);c.splice(F,1);}}),Q$1(()=>{Ve(v.current.size?v.current:_,({phase:y,payload:T},F)=>{let{ctrl:k}=F;F.phase=y,m?.add(k),L&&y=="enter"&&k.start({default:C}),T&&(he(k,T.ref),(k.ref||m)&&!w.current?k.update(T):(k.start(T),w.current&&(w.current=!1)));});},o?void 0:n);let N=y=>React.createElement(React.Fragment,null,c.map((T,F)=>{let{springs:k}=_.get(T)||T.ctrl,O=y({...k},T.item,T,F);return O&&O.type?React.createElement(O.type,{...O.props,key:l$1.str(T.key)||l$1.num(T.key)?T.key:T.ctrl.id,ref:O.ref}):O}));return m?[N,m]:N}var er=1;function tr(t,{key:e,keys:n=e},r){if(n===null){let o=new Set;return t.map(s=>{let i=r&&r.find(a=>a.item===s&&a.phase!=="leave"&&!o.has(a));return i?(o.add(i),i.key):er++})}return l$1.und(n)?t:l$1.fun(n)?t.map(n):ht$1(n)}var W=class extends X{constructor(n,r){super();this.source=n;this.calc=W$1(...r);let o=this._get(),s=Le$1(o);D(this,s.create(o));}key;idle=!0;calc;_active=new Set;advance(n){let r=this._get(),o=this.get();bt$1(r,o)||(k$1(this).setValue(r),this._onChange(r,this.idle)),!this.idle&&Yt(this._active)&&ct(this);}_get(){let n=l$1.arr(this.source)?this.source.map(ve):ht$1(ve(this.source));return this.calc(...n)}_start(){this.idle&&!Yt(this._active)&&(this.idle=!1,Ve(F$1(this),n=>{n.done=!1;}),p.skipAnimation?(n.batchedUpdates(()=>this.advance()),ct(this)):qe$1.start(this));}_attach(){let n=1;Ve(ht$1(this.source),r=>{Pt(r)&&Gt$1(r,this),Re(r)&&(r.idle||this._active.add(r),n=Math.max(n,r.priority+1));}),this.priority=n,this._start();}_detach(){Ve(ht$1(this.source),n=>{Pt(n)&&Qt(n,this);}),this._active.clear(),ct(this);}eventObserved(n){n.type=="change"?n.idle?this.advance():(this._active.add(n.parent),this._start()):n.type=="idle"?this._active.delete(n.parent):n.type=="priority"&&(this.priority=ht$1(this.source).reduce((r,o)=>Math.max(r,(Re(o)?o.priority:0)+1),0));}};function vr(t){return t.idle!==!1}function Yt(t){return !t.size||Array.from(t).every(vr)}function ct(t){t.idle||(t.idle=!0,Ve(F$1(t),e=>{e.done=!0;}),$t(t,{type:"idle",parent:t}));}p.assign({createStringInterpolator:Xt,to:(t,e)=>new W(t,e)});
|
|
310
|
-
|
|
311
|
-
var k=/^--/;function I(t,e){return e==null||typeof e=="boolean"||e===""?"":typeof e=="number"&&e!==0&&!k.test(t)&&!(c.hasOwnProperty(t)&&c[t])?e+"px":(""+e).trim()}var v={};function V(t,e){if(!t.nodeType||!t.setAttribute)return !1;let r=t.nodeName==="filter"||t.parentNode&&t.parentNode.nodeName==="filter",{style:i,children:s,scrollTop:u,scrollLeft:l,viewBox:a,...n}=e,d=Object.values(n),m=Object.keys(n).map(o=>r||t.hasAttribute(o)?o:v[o]||(v[o]=o.replace(/([A-Z])/g,p=>"-"+p.toLowerCase())));s!==void 0&&(t.textContent=s);for(let o in i)if(i.hasOwnProperty(o)){let p=I(o,i[o]);k.test(o)?t.style.setProperty(o,p):t.style[o]=p;}m.forEach((o,p)=>{t.setAttribute(o,d[p]);}),u!==void 0&&(t.scrollTop=u),l!==void 0&&(t.scrollLeft=l),a!==void 0&&t.setAttribute("viewBox",a);}var c={animationIterationCount:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},F=(t,e)=>t+e.charAt(0).toUpperCase()+e.substring(1),L=["Webkit","Ms","Moz","O"];c=Object.keys(c).reduce((t,e)=>(L.forEach(r=>t[F(r,e)]=t[e]),t),c);var _=/^(matrix|translate|scale|rotate|skew)/,$=/^(translate)/,G=/^(rotate|skew)/,y=(t,e)=>l$1.num(t)&&t!==0?t+e:t,h=(t,e)=>l$1.arr(t)?t.every(r=>h(r,e)):l$1.num(t)?t===e:parseFloat(t)===e,g=class extends u{constructor({x:e,y:r,z:i,...s}){let u=[],l=[];(e||r||i)&&(u.push([e||0,r||0,i||0]),l.push(a=>[`translate3d(${a.map(n=>y(n,"px")).join(",")})`,h(a,0)])),xt(s,(a,n)=>{if(n==="transform")u.push([a||""]),l.push(d=>[d,d===""]);else if(_.test(n)){if(delete s[n],l$1.und(a))return;let d=$.test(n)?"px":G.test(n)?"deg":"";u.push(ht$1(a)),l.push(n==="rotate3d"?([m,o,p,O])=>[`rotate3d(${m},${o},${p},${y(O,d)})`,h(O,0)]:m=>[`${n}(${m.map(o=>y(o,d)).join(",")})`,h(m,n.startsWith("scale")?1:0)]);}}),u.length&&(s.transform=new x(u,l)),super(s);}},x=class extends ge{constructor(r,i){super();this.inputs=r;this.transforms=i;}_value=null;get(){return this._value||(this._value=this._get())}_get(){let r="",i=!0;return Ve(this.inputs,(s,u)=>{let l=ve(s[0]),[a,n]=this.transforms[u](l$1.arr(l)?l:s.map(ve));r+=" "+a,i=i&&n;}),i?"none":r}observerAdded(r){r==1&&Ve(this.inputs,i=>Ve(i,s=>Pt(s)&&Gt$1(s,this)));}observerRemoved(r){r==0&&Ve(this.inputs,i=>Ve(i,s=>Pt(s)&&Qt(s,this)));}eventObserved(r){r.type=="change"&&(this._value=null),$t(this,r);}};var C=["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","big","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","menu","menuitem","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","title","tr","track","u","ul","var","video","wbr","circle","clipPath","defs","ellipse","foreignObject","g","image","line","linearGradient","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","text","tspan"];p.assign({batchedUpdates:unstable_batchedUpdates,createStringInterpolator:Xt,colors:It});var q=Ke(C,{applyAnimatedValues:V,createAnimatedStyle:t=>new g(t),getComponentProps:({scrollTop:t,scrollLeft:e,...r})=>r}),it=q.animated;
|
|
312
|
-
|
|
313
|
-
/**
|
|
314
|
-
* Component style.
|
|
315
|
-
*/
|
|
316
|
-
const StyledDataPoint = styled(it.g)``;
|
|
317
|
-
|
|
318
|
-
const _excluded$k = ["children", "className", "data", "id", "index", "isSelected", "labelDecorator", "onClick", "role", "tooltipVariant"];
|
|
319
|
-
const DataPoint = /*#__PURE__*/forwardRef((props, ref) => {
|
|
320
|
-
const {
|
|
321
|
-
children,
|
|
322
|
-
className,
|
|
323
|
-
data,
|
|
324
|
-
id: propsId,
|
|
325
|
-
index,
|
|
326
|
-
isSelected: propsIsSelected,
|
|
327
|
-
labelDecorator,
|
|
328
|
-
onClick,
|
|
329
|
-
role,
|
|
330
|
-
tooltipVariant
|
|
331
|
-
} = props,
|
|
332
|
-
forwardedProps = _objectWithoutProperties(props, _excluded$k);
|
|
333
|
-
const id = propsId !== null && propsId !== void 0 ? propsId : useId();
|
|
334
|
-
const text = labelDecorator ? labelDecorator(data) : data.data.key;
|
|
335
|
-
const hasText = text && tooltipVariant !== TooltipVariant.none;
|
|
336
|
-
const tooltipValue = tooltipVariant === TooltipVariant.value ? data.data.value : tooltipVariant === TooltipVariant.percent && data.data.percent ? data.data.percent : undefined;
|
|
337
|
-
const hasValue = tooltipValue && [TooltipVariant.value, TooltipVariant.percent].includes(tooltipVariant);
|
|
338
|
-
const showTooltip = tooltipVariant !== TooltipVariant.none && (hasText || hasValue);
|
|
339
|
-
const isEmpty = data.data.value === 0;
|
|
340
|
-
const isSelectable = role === 'option';
|
|
341
|
-
const isSelected = isSelectable && propsIsSelected === true;
|
|
342
|
-
const isDeselected = isSelectable && propsIsSelected === false;
|
|
343
|
-
const onKeyDown = event => {
|
|
344
|
-
if (onClick) {
|
|
345
|
-
event.stopPropagation();
|
|
346
|
-
if (event.code === 'Enter' || event.code === 'Space') {
|
|
347
|
-
event.preventDefault();
|
|
348
|
-
onClick(data);
|
|
349
|
-
}
|
|
350
|
-
}
|
|
351
|
-
};
|
|
352
|
-
const DataPointComponent = /*#__PURE__*/React__default.createElement(StyledDataPoint, _extends({
|
|
353
|
-
tabIndex: onClick ? 0 : undefined
|
|
354
|
-
}, forwardedProps, {
|
|
355
|
-
className: classNames(className, `_${index}`, {
|
|
356
|
-
selected: isSelected,
|
|
357
|
-
deselected: isDeselected
|
|
358
|
-
}),
|
|
359
|
-
ref: ref,
|
|
360
|
-
"aria-label": showTooltip && !isEmpty ? `${text}: ${data.data.value}` : undefined,
|
|
361
|
-
"aria-labelledby": !showTooltip && !isEmpty ? `${id}-title` : undefined,
|
|
362
|
-
"aria-selected": isSelected ? true : isDeselected ? false : undefined,
|
|
363
|
-
id: id,
|
|
364
|
-
onClick: onClick ? () => onClick(data) : undefined,
|
|
365
|
-
onKeyDown: onClick ? e => onKeyDown(e) : undefined,
|
|
366
|
-
role: role ? role : onClick ? 'button' : undefined,
|
|
367
|
-
$clickable: Boolean(onClick)
|
|
368
|
-
}), children, !showTooltip && !isEmpty ? /*#__PURE__*/React__default.createElement("title", {
|
|
369
|
-
id: `${id}-title`
|
|
370
|
-
}, `${text}: ${data.data.value}`) : null);
|
|
371
|
-
if (showTooltip) {
|
|
372
|
-
return /*#__PURE__*/React__default.createElement(Tooltip, {
|
|
373
|
-
placement: "right"
|
|
374
|
-
}, /*#__PURE__*/React__default.createElement(Tooltip.Trigger, null, DataPointComponent), /*#__PURE__*/React__default.createElement(Tooltip.Content, null, /*#__PURE__*/React__default.createElement(Text, {
|
|
375
|
-
variant: "caption"
|
|
376
|
-
}, text, hasText && hasValue ? ' - ' : null, hasValue ? /*#__PURE__*/React__default.createElement(Number$1, {
|
|
377
|
-
value: tooltipValue,
|
|
378
|
-
type: tooltipVariant === TooltipVariant.percent ? 'percent' : 'decimal',
|
|
379
|
-
variant: "caption",
|
|
380
|
-
maximumFractionDigits: 2
|
|
381
|
-
}) : null)));
|
|
382
|
-
}
|
|
383
|
-
return DataPointComponent;
|
|
384
|
-
});
|
|
385
|
-
|
|
386
|
-
/**
|
|
387
|
-
* Component style.
|
|
388
|
-
*/
|
|
389
|
-
const StyledArc = styled(DataPoint)`
|
|
390
|
-
${_ref => {
|
|
391
|
-
let {
|
|
392
|
-
$hasStroke
|
|
393
|
-
} = _ref;
|
|
394
|
-
return $hasStroke ? css`
|
|
395
|
-
path {
|
|
396
|
-
stroke-width: 2px;
|
|
397
|
-
stroke: #fff;
|
|
398
|
-
}
|
|
399
|
-
` : '';
|
|
400
|
-
}}
|
|
401
|
-
|
|
402
|
-
${_ref2 => {
|
|
403
|
-
let {
|
|
404
|
-
$clickable
|
|
405
|
-
} = _ref2;
|
|
406
|
-
return $clickable ? css`
|
|
407
|
-
cursor: pointer;
|
|
408
|
-
|
|
409
|
-
&:hover,
|
|
410
|
-
&:focus,
|
|
411
|
-
&.focused {
|
|
412
|
-
opacity: 0.8;
|
|
413
|
-
outline: none;
|
|
414
|
-
}
|
|
415
|
-
|
|
416
|
-
&:focus-visible,
|
|
417
|
-
&.focused {
|
|
418
|
-
path {
|
|
419
|
-
stroke: var(--redsift-color-default-primary);
|
|
420
|
-
stroke-width: 4px;
|
|
421
|
-
paint-order: stroke;
|
|
422
|
-
}
|
|
423
|
-
}
|
|
424
|
-
` : '';
|
|
425
|
-
}}}
|
|
426
|
-
`;
|
|
427
|
-
|
|
428
|
-
const config = (() => ({
|
|
429
|
-
config: {
|
|
430
|
-
duration: 700,
|
|
431
|
-
easing: Lt$1.easeInOutQuad
|
|
432
|
-
},
|
|
433
|
-
reset: true,
|
|
434
|
-
immediate: false
|
|
435
|
-
}))();
|
|
436
|
-
|
|
437
|
-
const _excluded$j = ["className", "createArc", "hasStroke", "previousData"];
|
|
438
|
-
const COMPONENT_NAME$a = 'Arc';
|
|
439
|
-
const CLASSNAME$a = 'redsift-arc';
|
|
440
|
-
const DEFAULT_PROPS$a = {
|
|
441
|
-
color: monochrome,
|
|
442
|
-
index: 0,
|
|
443
|
-
previousData: {
|
|
444
|
-
data: {
|
|
445
|
-
key: '',
|
|
446
|
-
value: 0
|
|
447
|
-
},
|
|
448
|
-
startAngle: 0,
|
|
449
|
-
endAngle: 0,
|
|
450
|
-
padAngle: 0,
|
|
451
|
-
value: 0,
|
|
452
|
-
index: 0
|
|
453
|
-
}
|
|
454
|
-
};
|
|
455
|
-
const Arc = /*#__PURE__*/forwardRef((props, ref) => {
|
|
456
|
-
const {
|
|
457
|
-
color,
|
|
458
|
-
data,
|
|
459
|
-
isSelected: propsIsSelected,
|
|
460
|
-
onClick,
|
|
461
|
-
role
|
|
462
|
-
} = props;
|
|
463
|
-
const {
|
|
464
|
-
className,
|
|
465
|
-
createArc,
|
|
466
|
-
hasStroke,
|
|
467
|
-
previousData
|
|
468
|
-
} = props,
|
|
469
|
-
forwardedProps = _objectWithoutProperties(props, _excluded$j);
|
|
470
|
-
const interpolator = interpolate(previousData, data);
|
|
471
|
-
const isSelectable = role === 'option';
|
|
472
|
-
const isDeselected = isSelectable && propsIsSelected === false;
|
|
473
|
-
const animatedProps = J(_objectSpread2(_objectSpread2({}, config), {}, {
|
|
474
|
-
to: async next => {
|
|
475
|
-
await next({
|
|
476
|
-
t: 1
|
|
477
|
-
});
|
|
478
|
-
},
|
|
479
|
-
from: {
|
|
480
|
-
t: 0
|
|
481
|
-
}
|
|
482
|
-
}));
|
|
483
|
-
return /*#__PURE__*/React__default.createElement(StyledArc, _extends({}, forwardedProps, {
|
|
484
|
-
ref: ref,
|
|
485
|
-
className: classNames(Arc.className, className),
|
|
486
|
-
$clickable: Boolean(onClick),
|
|
487
|
-
$hasStroke: Boolean(hasStroke)
|
|
488
|
-
}), /*#__PURE__*/React__default.createElement(it.path, {
|
|
489
|
-
d: config.immediate ? createArc(data) : animatedProps.t.to(t => createArc(interpolator(t))),
|
|
490
|
-
fill: isDeselected ? 'var(--redsift-color-neutral-lightgrey)' : color
|
|
491
|
-
}));
|
|
492
|
-
});
|
|
493
|
-
Arc.className = CLASSNAME$a;
|
|
494
|
-
Arc.defaultProps = DEFAULT_PROPS$a;
|
|
495
|
-
Arc.displayName = COMPONENT_NAME$a;
|
|
496
|
-
|
|
497
|
-
/**
|
|
498
|
-
* Component style.
|
|
499
|
-
*/
|
|
500
|
-
const StyledArcs = styled.g``;
|
|
501
|
-
|
|
502
|
-
const _excluded$i = ["arcs", "className", "color", "hasLabels", "hasStroke", "id", "labelDecorator", "onClick", "role", "sliceProps", "tooltipVariant"];
|
|
503
|
-
const COMPONENT_NAME$9 = 'Arcs';
|
|
504
|
-
const CLASSNAME$9 = 'redsift-arcs';
|
|
505
|
-
const DEFAULT_PROPS$9 = {};
|
|
506
|
-
const Arcs = /*#__PURE__*/forwardRef((props, ref) => {
|
|
507
|
-
const {
|
|
508
|
-
arcs,
|
|
509
|
-
className,
|
|
510
|
-
color,
|
|
511
|
-
hasLabels,
|
|
512
|
-
hasStroke,
|
|
513
|
-
id: propsId,
|
|
514
|
-
labelDecorator,
|
|
515
|
-
onClick,
|
|
516
|
-
role,
|
|
517
|
-
sliceProps,
|
|
518
|
-
tooltipVariant
|
|
519
|
-
} = props,
|
|
520
|
-
forwardedProps = _objectWithoutProperties(props, _excluded$i);
|
|
521
|
-
const id = propsId !== null && propsId !== void 0 ? propsId : useId();
|
|
522
|
-
const animatedProps = J(_objectSpread2(_objectSpread2({}, config), {}, {
|
|
523
|
-
to: async next => {
|
|
524
|
-
await next({
|
|
525
|
-
t: 1
|
|
526
|
-
});
|
|
527
|
-
},
|
|
528
|
-
from: {
|
|
529
|
-
t: 0
|
|
530
|
-
}
|
|
531
|
-
}));
|
|
532
|
-
return /*#__PURE__*/React__default.createElement(StyledArcs, _extends({}, forwardedProps, {
|
|
533
|
-
className: classNames(Arcs.className, className),
|
|
534
|
-
ref: ref
|
|
535
|
-
}), /*#__PURE__*/React__default.createElement("g", {
|
|
536
|
-
className: "arc-group"
|
|
537
|
-
}, arcs.map((arc, index) => {
|
|
538
|
-
var _arc$index, _arc$id;
|
|
539
|
-
const arcIndex = (_arc$index = arc.index) !== null && _arc$index !== void 0 ? _arc$index : index;
|
|
540
|
-
const arcId = (_arc$id = arc.id) !== null && _arc$id !== void 0 ? _arc$id : `id${id}__arc-${arcIndex}`;
|
|
541
|
-
return /*#__PURE__*/React__default.createElement(Arc, _extends({}, sliceProps, {
|
|
542
|
-
color: color,
|
|
543
|
-
hasStroke: hasStroke,
|
|
544
|
-
labelDecorator: labelDecorator,
|
|
545
|
-
onClick: onClick,
|
|
546
|
-
role: role,
|
|
547
|
-
tooltipVariant: tooltipVariant
|
|
548
|
-
}, arc, {
|
|
549
|
-
key: arcId,
|
|
550
|
-
id: arcId,
|
|
551
|
-
index: arcIndex
|
|
552
|
-
}));
|
|
553
|
-
})), hasLabels ? /*#__PURE__*/React__default.createElement("g", {
|
|
554
|
-
className: "arc-label-group"
|
|
555
|
-
}, arcs.filter(arc => {
|
|
556
|
-
const value = arc.data.data.value;
|
|
557
|
-
const percent = arc.data.data.percent;
|
|
558
|
-
return percent ? value > 0 && percent >= 0.1 : value > 0;
|
|
559
|
-
}).map((arc, index) => {
|
|
560
|
-
var _arc$index2, _arc$id2, _arc$labelDecorator;
|
|
561
|
-
const arcIndex = (_arc$index2 = arc.index) !== null && _arc$index2 !== void 0 ? _arc$index2 : index;
|
|
562
|
-
const arcId = (_arc$id2 = arc.id) !== null && _arc$id2 !== void 0 ? _arc$id2 : `id${id}__arc-${arcIndex}`;
|
|
563
|
-
const arcLabelDecorator = (_arc$labelDecorator = arc.labelDecorator) !== null && _arc$labelDecorator !== void 0 ? _arc$labelDecorator : labelDecorator;
|
|
564
|
-
const interpolator = interpolate(arc.from, arc.data);
|
|
565
|
-
return /*#__PURE__*/React__default.createElement(it.text, {
|
|
566
|
-
alignmentBaseline: "middle",
|
|
567
|
-
className: `arc-label _${index}`,
|
|
568
|
-
key: `${arcId}-label`,
|
|
569
|
-
textAnchor: "middle",
|
|
570
|
-
transform: config.immediate ? `translate(${arc.createArc.centroid(arc.data)})` : animatedProps.t.to(t => `translate(${arc.createArc.centroid(interpolator(t))})`)
|
|
571
|
-
}, arcLabelDecorator ? arcLabelDecorator(arc.data) : arc.data.data.key);
|
|
572
|
-
})) : null);
|
|
573
|
-
});
|
|
574
|
-
Arcs.className = CLASSNAME$9;
|
|
575
|
-
Arcs.defaultProps = DEFAULT_PROPS$9;
|
|
576
|
-
Arcs.displayName = COMPONENT_NAME$9;
|
|
577
|
-
|
|
578
|
-
/**
|
|
579
|
-
* Component variant.
|
|
580
|
-
*/
|
|
581
|
-
const AxisVariant = {
|
|
582
|
-
none: 'none',
|
|
583
|
-
line: 'line',
|
|
584
|
-
lineTick: 'lineTick',
|
|
585
|
-
tick: 'tick',
|
|
586
|
-
tickValue: 'tickValue',
|
|
587
|
-
default: 'default'
|
|
588
|
-
};
|
|
589
|
-
const AxisPosition = {
|
|
590
|
-
top: 'top',
|
|
591
|
-
right: 'right',
|
|
592
|
-
bottom: 'bottom',
|
|
593
|
-
left: 'left'
|
|
594
|
-
};
|
|
595
|
-
|
|
596
|
-
/**
|
|
597
|
-
* Component props.
|
|
598
|
-
*/
|
|
599
|
-
|
|
600
|
-
/**
|
|
601
|
-
* Component style.
|
|
602
|
-
*/
|
|
603
|
-
const StyledAxis = styled(it.g)`
|
|
604
|
-
.redsift-axis__line,
|
|
605
|
-
.redsift-axis-tick__line {
|
|
606
|
-
fill: none;
|
|
607
|
-
stroke: var(--redsift-color-neutral-black);
|
|
608
|
-
shape-rendering: crispEdges;
|
|
609
|
-
}
|
|
610
|
-
|
|
611
|
-
text {
|
|
612
|
-
font-family: var(--redsift-typography-font-family-source-code-pro);
|
|
613
|
-
font-size: 10px;
|
|
614
|
-
user-select: none;
|
|
615
|
-
}
|
|
616
|
-
`;
|
|
617
|
-
|
|
618
|
-
const getScaleTicks = (scale, spec) => {
|
|
619
|
-
// specific values
|
|
620
|
-
if (Array.isArray(spec)) {
|
|
621
|
-
return spec;
|
|
622
|
-
}
|
|
623
|
-
|
|
624
|
-
// continuous scales
|
|
625
|
-
if ('ticks' in scale) {
|
|
626
|
-
// default behaviour
|
|
627
|
-
if (spec === undefined) {
|
|
628
|
-
return scale.ticks();
|
|
629
|
-
}
|
|
630
|
-
|
|
631
|
-
// specific tick count
|
|
632
|
-
if (typeof spec === 'number' && isFinite(spec) && Math.floor(spec) === spec) {
|
|
633
|
-
return scale.ticks(spec);
|
|
634
|
-
}
|
|
635
|
-
}
|
|
636
|
-
|
|
637
|
-
// non linear scale default
|
|
638
|
-
return scale.domain();
|
|
639
|
-
};
|
|
640
|
-
const centerScale = scale => {
|
|
641
|
-
const bandwidth = scale.bandwidth();
|
|
642
|
-
if (bandwidth === 0) return scale;
|
|
643
|
-
let offset = bandwidth / 2;
|
|
644
|
-
if (scale.round()) {
|
|
645
|
-
offset = Math.round(offset);
|
|
646
|
-
}
|
|
647
|
-
return d => {
|
|
648
|
-
var _scale;
|
|
649
|
-
return ((_scale = scale(d)) !== null && _scale !== void 0 ? _scale : 0) + offset;
|
|
650
|
-
};
|
|
651
|
-
};
|
|
652
|
-
const computeTicks = _ref => {
|
|
653
|
-
let {
|
|
654
|
-
axis,
|
|
655
|
-
scale,
|
|
656
|
-
ticksPosition,
|
|
657
|
-
tickValues,
|
|
658
|
-
tickSize,
|
|
659
|
-
tickPadding,
|
|
660
|
-
tickRotation
|
|
661
|
-
} = _ref;
|
|
662
|
-
const values = getScaleTicks(scale, tickValues);
|
|
663
|
-
const position = 'bandwidth' in scale ? centerScale(scale) : scale;
|
|
664
|
-
const line = {
|
|
665
|
-
lineX: 0,
|
|
666
|
-
lineY: 0
|
|
667
|
-
};
|
|
668
|
-
const text = {
|
|
669
|
-
textX: 0,
|
|
670
|
-
textY: 0
|
|
671
|
-
};
|
|
672
|
-
const isRTL = typeof document === 'object' ? document.dir === 'rtl' : false;
|
|
673
|
-
let translate;
|
|
674
|
-
let textAlign = 'middle';
|
|
675
|
-
let textBaseline = 'central';
|
|
676
|
-
if (axis === 'x') {
|
|
677
|
-
translate = d => {
|
|
678
|
-
var _position;
|
|
679
|
-
return {
|
|
680
|
-
x: (_position = position(d)) !== null && _position !== void 0 ? _position : 0,
|
|
681
|
-
y: 0
|
|
682
|
-
};
|
|
683
|
-
};
|
|
684
|
-
line.lineY = tickSize * (ticksPosition === 'after' ? 1 : -1);
|
|
685
|
-
text.textY = (tickSize + tickPadding) * (ticksPosition === 'after' ? 1 : -1);
|
|
686
|
-
if (ticksPosition === 'after') {
|
|
687
|
-
textBaseline = 'text-before-edge';
|
|
688
|
-
} else {
|
|
689
|
-
textBaseline = 'alphabetic';
|
|
690
|
-
}
|
|
691
|
-
if (tickRotation === 0) {
|
|
692
|
-
textAlign = 'middle';
|
|
693
|
-
} else if (ticksPosition === 'after' && tickRotation < 0 || ticksPosition === 'before' && tickRotation > 0) {
|
|
694
|
-
textAlign = isRTL ? 'start' : 'end';
|
|
695
|
-
textBaseline = 'middle';
|
|
696
|
-
} else if (ticksPosition === 'after' && tickRotation > 0 || ticksPosition === 'before' && tickRotation < 0) {
|
|
697
|
-
textAlign = isRTL ? 'end' : 'start';
|
|
698
|
-
textBaseline = 'middle';
|
|
699
|
-
}
|
|
700
|
-
} else {
|
|
701
|
-
translate = d => {
|
|
702
|
-
var _position2;
|
|
703
|
-
return {
|
|
704
|
-
x: 0,
|
|
705
|
-
y: (_position2 = position(d)) !== null && _position2 !== void 0 ? _position2 : 0
|
|
706
|
-
};
|
|
707
|
-
};
|
|
708
|
-
line.lineX = tickSize * (ticksPosition === 'after' ? 1 : -1);
|
|
709
|
-
text.textX = (tickSize + tickPadding) * (ticksPosition === 'after' ? 1 : -1);
|
|
710
|
-
if (ticksPosition === 'after') {
|
|
711
|
-
textAlign = 'start';
|
|
712
|
-
} else {
|
|
713
|
-
textAlign = 'end';
|
|
714
|
-
}
|
|
715
|
-
}
|
|
716
|
-
const ticks = values.map(value => _objectSpread2(_objectSpread2(_objectSpread2({
|
|
717
|
-
key: value instanceof Date ? `${value.valueOf()}` : `${value}`,
|
|
718
|
-
value
|
|
719
|
-
}, translate(value)), line), text));
|
|
720
|
-
return {
|
|
721
|
-
ticks,
|
|
722
|
-
textAlign,
|
|
723
|
-
textBaseline
|
|
724
|
-
};
|
|
725
|
-
};
|
|
726
|
-
|
|
727
|
-
const _excluded$h = ["className", "length", "legend", "legendOffset", "legendPosition", "position", "scale", "tickPadding", "tickRotation", "tickSize", "tickValues", "variant", "x", "y"];
|
|
728
|
-
const COMPONENT_NAME$8 = 'Axis';
|
|
729
|
-
const CLASSNAME$8 = 'redsift-axis';
|
|
730
|
-
const DEFAULT_PROPS$8 = {
|
|
731
|
-
position: AxisPosition.bottom,
|
|
732
|
-
legendOffset: -32,
|
|
733
|
-
legendPosition: 'end',
|
|
734
|
-
tickPadding: 5,
|
|
735
|
-
tickRotation: 0,
|
|
736
|
-
tickSize: 5,
|
|
737
|
-
variant: AxisVariant.default,
|
|
738
|
-
x: 0,
|
|
739
|
-
y: 0
|
|
740
|
-
};
|
|
741
|
-
const getAxisType = position => [AxisPosition.top, AxisPosition.bottom].includes(position) ? 'x' : 'y';
|
|
742
|
-
const Axis = /*#__PURE__*/forwardRef((props, ref) => {
|
|
743
|
-
const {
|
|
744
|
-
className,
|
|
745
|
-
length,
|
|
746
|
-
legend,
|
|
747
|
-
legendOffset,
|
|
748
|
-
legendPosition,
|
|
749
|
-
position,
|
|
750
|
-
scale,
|
|
751
|
-
tickPadding,
|
|
752
|
-
tickRotation,
|
|
753
|
-
tickSize,
|
|
754
|
-
tickValues,
|
|
755
|
-
variant,
|
|
756
|
-
x,
|
|
757
|
-
y
|
|
758
|
-
} = props,
|
|
759
|
-
forwardedProps = _objectWithoutProperties(props, _excluded$h);
|
|
760
|
-
const axis = getAxisType(position);
|
|
761
|
-
const axisRef = ref || useRef();
|
|
762
|
-
const animatedProps = J(_objectSpread2(_objectSpread2({}, config), {}, {
|
|
763
|
-
to: async next => {
|
|
764
|
-
await next({
|
|
765
|
-
lineX2: axis === 'x' ? length : 0,
|
|
766
|
-
lineY2: axis === 'x' ? 0 : length
|
|
767
|
-
});
|
|
768
|
-
},
|
|
769
|
-
from: {
|
|
770
|
-
lineX2: 0,
|
|
771
|
-
lineY2: 0
|
|
772
|
-
},
|
|
773
|
-
reset: false
|
|
774
|
-
}));
|
|
775
|
-
let legendNode = null;
|
|
776
|
-
if (legend !== undefined) {
|
|
777
|
-
let legendX = 0;
|
|
778
|
-
let legendY = 0;
|
|
779
|
-
let legendRotation = 0;
|
|
780
|
-
let textAnchor;
|
|
781
|
-
if (axis === 'y') {
|
|
782
|
-
legendRotation = -90;
|
|
783
|
-
legendX = legendOffset;
|
|
784
|
-
if (legendPosition === 'start') {
|
|
785
|
-
textAnchor = 'start';
|
|
786
|
-
legendY = length;
|
|
787
|
-
} else if (legendPosition === 'middle') {
|
|
788
|
-
textAnchor = 'middle';
|
|
789
|
-
legendY = length / 2;
|
|
790
|
-
} else if (legendPosition === 'end') {
|
|
791
|
-
textAnchor = 'end';
|
|
792
|
-
}
|
|
793
|
-
} else {
|
|
794
|
-
legendY = legendOffset;
|
|
795
|
-
if (legendPosition === 'start') {
|
|
796
|
-
textAnchor = 'start';
|
|
797
|
-
} else if (legendPosition === 'middle') {
|
|
798
|
-
textAnchor = 'middle';
|
|
799
|
-
legendX = length / 2;
|
|
800
|
-
} else if (legendPosition === 'end') {
|
|
801
|
-
textAnchor = 'end';
|
|
802
|
-
legendX = length;
|
|
803
|
-
}
|
|
804
|
-
}
|
|
805
|
-
legendNode = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("text", {
|
|
806
|
-
transform: `translate(${legendX}, ${legendY}) rotate(${legendRotation})`,
|
|
807
|
-
textAnchor: textAnchor,
|
|
808
|
-
style: {
|
|
809
|
-
dominantBaseline: 'central'
|
|
810
|
-
}
|
|
811
|
-
}, legend));
|
|
812
|
-
}
|
|
813
|
-
const {
|
|
814
|
-
ticks,
|
|
815
|
-
textAlign,
|
|
816
|
-
textBaseline
|
|
817
|
-
} = computeTicks({
|
|
818
|
-
axis,
|
|
819
|
-
scale,
|
|
820
|
-
ticksPosition: [AxisPosition.top, AxisPosition.left].includes(position) ? 'before' : 'after',
|
|
821
|
-
tickValues,
|
|
822
|
-
tickSize: tickSize,
|
|
823
|
-
tickPadding: tickPadding,
|
|
824
|
-
tickRotation: tickRotation
|
|
825
|
-
});
|
|
826
|
-
const transition = Gt(ticks, _objectSpread2(_objectSpread2({}, config), {}, {
|
|
827
|
-
keys: tick => tick.key,
|
|
828
|
-
initial: tick => ({
|
|
829
|
-
opacity: 1,
|
|
830
|
-
transform: `translate(${tick.x},${tick.y})`,
|
|
831
|
-
textTransform: `translate(${tick.textX},${tick.textY}) rotate(${tickRotation})`
|
|
832
|
-
}),
|
|
833
|
-
from: tick => ({
|
|
834
|
-
opacity: 0,
|
|
835
|
-
transform: `translate(${tick.x},${tick.y})`,
|
|
836
|
-
textTransform: `translate(${tick.textX},${tick.textY}) rotate(${tickRotation})`
|
|
837
|
-
}),
|
|
838
|
-
enter: tick => ({
|
|
839
|
-
opacity: 1,
|
|
840
|
-
transform: `translate(${tick.x},${tick.y})`,
|
|
841
|
-
textTransform: `translate(${tick.textX},${tick.textY}) rotate(${tickRotation})`
|
|
842
|
-
}),
|
|
843
|
-
update: tick => ({
|
|
844
|
-
opacity: 1,
|
|
845
|
-
transform: `translate(${tick.x},${tick.y})`,
|
|
846
|
-
textTransform: `translate(${tick.textX},${tick.textY}) rotate(${tickRotation})`
|
|
847
|
-
}),
|
|
848
|
-
leave: {
|
|
849
|
-
opacity: 0
|
|
850
|
-
}
|
|
851
|
-
}));
|
|
852
|
-
return /*#__PURE__*/React__default.createElement(StyledAxis, _extends({
|
|
853
|
-
className: classNames(Axis.className, className)
|
|
854
|
-
}, forwardedProps, {
|
|
855
|
-
transform: `translate(${x},${y})`,
|
|
856
|
-
ref: axisRef
|
|
857
|
-
}), variant === AxisVariant.default || variant === AxisVariant.tick || variant === AxisVariant.lineTick || variant === AxisVariant.tickValue ? transition((transitionProps, tick, _state, tickIndex) => {
|
|
858
|
-
return /*#__PURE__*/React__default.createElement(it.g, {
|
|
859
|
-
className: `${Axis.className}__tick`,
|
|
860
|
-
key: tickIndex,
|
|
861
|
-
transform: transitionProps.transform,
|
|
862
|
-
style: {
|
|
863
|
-
opacity: transitionProps.opacity
|
|
864
|
-
}
|
|
865
|
-
}, /*#__PURE__*/React__default.createElement("line", {
|
|
866
|
-
className: `${Axis.className}-tick__line`,
|
|
867
|
-
x1: 0,
|
|
868
|
-
x2: tick.lineX,
|
|
869
|
-
y1: 0,
|
|
870
|
-
y2: tick.lineY
|
|
871
|
-
}), variant === AxisVariant.default || variant === AxisVariant.tickValue ? /*#__PURE__*/React__default.createElement(it.text, {
|
|
872
|
-
dominantBaseline: textBaseline,
|
|
873
|
-
textAnchor: textAlign,
|
|
874
|
-
transform: transitionProps.textTransform
|
|
875
|
-
}, `${tick.value}`) : null);
|
|
876
|
-
}) : null, variant === AxisVariant.default || variant === AxisVariant.line || variant === AxisVariant.lineTick ? /*#__PURE__*/React__default.createElement(it.line, {
|
|
877
|
-
className: `${Axis.className}__line`,
|
|
878
|
-
x1: 0,
|
|
879
|
-
x2: config.immediate ? axis === 'x' ? length : 0 : animatedProps.lineX2,
|
|
880
|
-
y1: 0,
|
|
881
|
-
y2: config.immediate ? axis === 'x' ? 0 : length : animatedProps.lineY2
|
|
882
|
-
}) : null, legendNode);
|
|
883
|
-
});
|
|
884
|
-
Axis.className = CLASSNAME$8;
|
|
885
|
-
Axis.defaultProps = DEFAULT_PROPS$8;
|
|
886
|
-
Axis.displayName = COMPONENT_NAME$8;
|
|
887
|
-
|
|
888
|
-
/**
|
|
889
|
-
* Component variant.
|
|
890
|
-
*/
|
|
891
|
-
const BarOrientation = {
|
|
892
|
-
horizontal: 'horizontal',
|
|
893
|
-
vertical: 'vertical'
|
|
894
|
-
};
|
|
895
|
-
|
|
896
|
-
/**
|
|
897
|
-
* Component props.
|
|
898
|
-
*/
|
|
899
|
-
|
|
900
|
-
/**
|
|
901
|
-
* Component style.
|
|
902
|
-
*/
|
|
903
|
-
const StyledBar = styled(DataPoint)`
|
|
904
|
-
rect {
|
|
905
|
-
fill-opacity: 0.9;
|
|
906
|
-
}
|
|
907
|
-
|
|
908
|
-
${_ref => {
|
|
909
|
-
let {
|
|
910
|
-
$clickable
|
|
911
|
-
} = _ref;
|
|
912
|
-
return $clickable ? css`
|
|
913
|
-
cursor: pointer;
|
|
914
|
-
|
|
915
|
-
&:hover,
|
|
916
|
-
&:focus,
|
|
917
|
-
&.focused {
|
|
918
|
-
outline: none;
|
|
919
|
-
rect {
|
|
920
|
-
fill-opacity: 0.7;
|
|
921
|
-
}
|
|
922
|
-
}
|
|
923
|
-
|
|
924
|
-
// &:focus-visible {
|
|
925
|
-
// rect {
|
|
926
|
-
// stroke: var(--redsift-color-default-primary);
|
|
927
|
-
// stroke-width: 4px;
|
|
928
|
-
// paint-order: stroke;
|
|
929
|
-
// }
|
|
930
|
-
// }
|
|
931
|
-
|
|
932
|
-
@media (prefers-reduced-motion: no-preference) {
|
|
933
|
-
&:focus-visible,
|
|
934
|
-
&.focused {
|
|
935
|
-
outline: 2px solid var(--redsift-color-default-primary);
|
|
936
|
-
transition: outline-offset 75ms ease-out;
|
|
937
|
-
}
|
|
938
|
-
|
|
939
|
-
&:not(&:active)&:focus-visible,
|
|
940
|
-
&:not(&:active)&.focused {
|
|
941
|
-
transition-duration: 0.25s;
|
|
942
|
-
}
|
|
943
|
-
}
|
|
944
|
-
|
|
945
|
-
&:not(&:active)&:focus-visible,
|
|
946
|
-
&:not(&:active)&.focused {
|
|
947
|
-
outline-offset: 0.2rem;
|
|
948
|
-
}
|
|
949
|
-
` : '';
|
|
950
|
-
}}}
|
|
951
|
-
`;
|
|
952
|
-
|
|
953
|
-
const _excluded$g = ["className", "gap", "height", "orientation", "previousData", "scale", "width"];
|
|
954
|
-
const COMPONENT_NAME$7 = 'Bar';
|
|
955
|
-
const CLASSNAME$7 = 'redsift-bar';
|
|
956
|
-
const DEFAULT_PROPS$7 = {
|
|
957
|
-
color: monochrome,
|
|
958
|
-
index: 0,
|
|
959
|
-
gap: 5,
|
|
960
|
-
height: 40,
|
|
961
|
-
orientation: BarOrientation.horizontal,
|
|
962
|
-
previousData: {
|
|
963
|
-
data: {
|
|
964
|
-
key: '',
|
|
965
|
-
value: 0
|
|
966
|
-
}
|
|
967
|
-
},
|
|
968
|
-
width: 40
|
|
969
|
-
};
|
|
970
|
-
const Bar = /*#__PURE__*/forwardRef((props, ref) => {
|
|
971
|
-
var _data;
|
|
972
|
-
const {
|
|
973
|
-
color,
|
|
974
|
-
data,
|
|
975
|
-
index,
|
|
976
|
-
isSelected: propsIsSelected,
|
|
977
|
-
labelDecorator,
|
|
978
|
-
onClick,
|
|
979
|
-
role
|
|
980
|
-
} = props;
|
|
981
|
-
const {
|
|
982
|
-
className,
|
|
983
|
-
gap,
|
|
984
|
-
height,
|
|
985
|
-
orientation,
|
|
986
|
-
previousData,
|
|
987
|
-
scale,
|
|
988
|
-
width
|
|
989
|
-
} = props,
|
|
990
|
-
forwardedProps = _objectWithoutProperties(props, _excluded$g);
|
|
991
|
-
const interpolator = interpolate(((_data = previousData.data) === null || _data === void 0 ? void 0 : _data.value) || 0, data.data.value);
|
|
992
|
-
const text = labelDecorator ? labelDecorator(data) : data.data.key;
|
|
993
|
-
const isSelectable = role === 'option';
|
|
994
|
-
const isDeselected = isSelectable && propsIsSelected === false;
|
|
995
|
-
const animatedProps = J(_objectSpread2(_objectSpread2({}, config), {}, {
|
|
996
|
-
to: async next => {
|
|
997
|
-
await next({
|
|
998
|
-
t: 1
|
|
999
|
-
});
|
|
1000
|
-
},
|
|
1001
|
-
from: {
|
|
1002
|
-
t: 0
|
|
1003
|
-
}
|
|
1004
|
-
}));
|
|
1005
|
-
return /*#__PURE__*/React__default.createElement(StyledBar, _extends({}, forwardedProps, {
|
|
1006
|
-
ref: ref,
|
|
1007
|
-
className: classNames(Bar.className, className),
|
|
1008
|
-
transform: orientation === BarOrientation.horizontal ? `translate(0, ${gap * (index + 1) + height * index})` : `translate(${gap * (index + 1) + width * index}, 0)`,
|
|
1009
|
-
$clickable: Boolean(onClick)
|
|
1010
|
-
}), orientation === BarOrientation.horizontal ? /*#__PURE__*/React__default.createElement(it.rect, {
|
|
1011
|
-
height: height,
|
|
1012
|
-
fill: isDeselected ? 'var(--redsift-color-neutral-lightgrey)' : color,
|
|
1013
|
-
width: config.immediate ? scale(data.data.value) : animatedProps.t.to(t => scale(interpolator(t)))
|
|
1014
|
-
}) : /*#__PURE__*/React__default.createElement(it.rect, {
|
|
1015
|
-
height: config.immediate ? scale(data.data.value) : animatedProps.t.to(t => scale(interpolator(t))),
|
|
1016
|
-
fill: isDeselected ? 'var(--redsift-color-neutral-lightgrey)' : color,
|
|
1017
|
-
width: width
|
|
1018
|
-
}), orientation === BarOrientation.horizontal ? /*#__PURE__*/React__default.createElement("text", {
|
|
1019
|
-
x: "10",
|
|
1020
|
-
y: height / 2,
|
|
1021
|
-
dy: "0.35em",
|
|
1022
|
-
"aria-hidden": true
|
|
1023
|
-
}, text) : null);
|
|
1024
|
-
});
|
|
1025
|
-
Bar.className = CLASSNAME$7;
|
|
1026
|
-
Bar.defaultProps = DEFAULT_PROPS$7;
|
|
1027
|
-
Bar.displayName = COMPONENT_NAME$7;
|
|
1028
|
-
|
|
1029
|
-
var reset$1 = "Reset";
|
|
1030
|
-
var enUS = {
|
|
1031
|
-
reset: reset$1
|
|
1032
|
-
};
|
|
1033
|
-
|
|
1034
|
-
var reset = "Réinitialiser";
|
|
1035
|
-
var frFR = {
|
|
1036
|
-
reset: reset
|
|
1037
|
-
};
|
|
1038
|
-
|
|
1039
|
-
var intlMessages = {
|
|
1040
|
-
'en-US': enUS,
|
|
1041
|
-
'fr-FR': frFR
|
|
1042
|
-
};
|
|
1043
|
-
|
|
1044
|
-
/**
|
|
1045
|
-
* Component style.
|
|
1046
|
-
*/
|
|
1047
|
-
const StyledChartContainer = styled.div`
|
|
1048
|
-
${baseStyling}
|
|
1049
|
-
|
|
1050
|
-
margin: 8px;
|
|
1051
|
-
padding: 8px;
|
|
1052
|
-
color: var(--redsift-color-neutral-black);
|
|
1053
|
-
|
|
1054
|
-
.redsift-chart-container__content {
|
|
1055
|
-
display: flex;
|
|
1056
|
-
align-items: center;
|
|
1057
|
-
gap: 16px;
|
|
1058
|
-
font-family: var(--redsift-typography-font-family-source-code-pro);
|
|
1059
|
-
font-size: 11px;
|
|
1060
|
-
justify-content: center;
|
|
1061
|
-
margin: 8px 0;
|
|
1062
|
-
position: relative;
|
|
1063
|
-
|
|
1064
|
-
${focusRing}
|
|
1065
|
-
}
|
|
1066
|
-
|
|
1067
|
-
svg {
|
|
1068
|
-
display: block;
|
|
1069
|
-
}
|
|
1070
|
-
`;
|
|
1071
|
-
const StyledChartContainerTitle = styled(Flexbox)``;
|
|
1072
|
-
const StyledChartContainerCaption = styled.p`
|
|
1073
|
-
font-family: var(--redsift-typography-caption-font-family);
|
|
1074
|
-
font-size: var(--redsift-typography-caption-font-size);
|
|
1075
|
-
font-weight: var(--redsift-typography-caption-font-weight);
|
|
1076
|
-
line-height: var(--redsift-typography-caption-line-height);
|
|
1077
|
-
`;
|
|
1078
|
-
|
|
1079
|
-
const _excluded$f = ["aria-label", "aria-labelledby", "caption", "chartProps", "chartRef", "children", "className", "id", "title", "onReset"];
|
|
1080
|
-
const COMPONENT_NAME$6 = 'ChartContainer';
|
|
1081
|
-
const CLASSNAME$6 = 'redsift-chart-container';
|
|
1082
|
-
const DEFAULT_PROPS$6 = {};
|
|
1083
|
-
const ChartContainer = /*#__PURE__*/forwardRef((props, ref) => {
|
|
1084
|
-
const {
|
|
1085
|
-
'aria-label': propsAriaLabel,
|
|
1086
|
-
'aria-labelledby': propsAriaLabelledby,
|
|
1087
|
-
caption,
|
|
1088
|
-
chartProps,
|
|
1089
|
-
chartRef,
|
|
1090
|
-
children,
|
|
1091
|
-
className,
|
|
1092
|
-
id: propsId,
|
|
1093
|
-
title,
|
|
1094
|
-
onReset
|
|
1095
|
-
} = props,
|
|
1096
|
-
forwardedProps = _objectWithoutProperties(props, _excluded$f);
|
|
1097
|
-
const id = propsId !== null && propsId !== void 0 ? propsId : useId();
|
|
1098
|
-
warnIfNoAccessibleLabelFound(props, [title]);
|
|
1099
|
-
const stringFormatter = useLocalizedStringFormatter(intlMessages);
|
|
1100
|
-
const ariaLabel = propsAriaLabel ? propsAriaLabel : propsAriaLabelledby || title ? undefined : undefined;
|
|
1101
|
-
const ariaLabelledby = propsAriaLabelledby ? propsAriaLabelledby : title ? `id${id}__title` : undefined;
|
|
1102
|
-
return /*#__PURE__*/React__default.createElement(StyledChartContainer, _extends({}, forwardedProps, {
|
|
1103
|
-
ref: ref,
|
|
1104
|
-
className: classNames(ChartContainer.className, className),
|
|
1105
|
-
id: id
|
|
1106
|
-
}), title || onReset ? /*#__PURE__*/React__default.createElement(StyledChartContainerTitle, {
|
|
1107
|
-
alignItems: "center",
|
|
1108
|
-
justifyContent: "space-between",
|
|
1109
|
-
className: `${ChartContainer.className}__title`,
|
|
1110
|
-
id: `id${id}__title`
|
|
1111
|
-
}, typeof title === 'string' ? /*#__PURE__*/React__default.createElement(Heading, {
|
|
1112
|
-
as: "h3"
|
|
1113
|
-
}, title) : title ? title : null, onReset ? /*#__PURE__*/React__default.createElement(Button, {
|
|
1114
|
-
className: `${ChartContainer.className}-title__reset-button`,
|
|
1115
|
-
color: "question",
|
|
1116
|
-
variant: "unstyled",
|
|
1117
|
-
onClick: onReset
|
|
1118
|
-
}, stringFormatter.format('reset')) : null) : null, children ? /*#__PURE__*/React__default.createElement("div", _extends({}, chartProps, {
|
|
1119
|
-
ref: chartRef,
|
|
1120
|
-
className: `${ChartContainer.className}__content`,
|
|
1121
|
-
"aria-label": ariaLabel,
|
|
1122
|
-
"aria-labelledby": ariaLabelledby
|
|
1123
|
-
}), children) : null, caption ? /*#__PURE__*/React__default.createElement(StyledChartContainerCaption, {
|
|
1124
|
-
className: `${ChartContainer.className}__caption`
|
|
1125
|
-
}, caption) : null);
|
|
1126
|
-
});
|
|
1127
|
-
ChartContainer.className = CLASSNAME$6;
|
|
1128
|
-
ChartContainer.defaultProps = DEFAULT_PROPS$6;
|
|
1129
|
-
ChartContainer.displayName = COMPONENT_NAME$6;
|
|
1130
|
-
|
|
1131
|
-
/**
|
|
1132
|
-
* Component style.
|
|
1133
|
-
*/
|
|
1134
|
-
const StyledBarChart = styled(ChartContainer)``;
|
|
1135
|
-
const StyledBarChartEmptyText = styled.div`
|
|
1136
|
-
position: absolute;
|
|
1137
|
-
top: 0;
|
|
1138
|
-
left: 0;
|
|
1139
|
-
height: 100%;
|
|
1140
|
-
width: 100%;
|
|
1141
|
-
display: flex;
|
|
1142
|
-
flex-direction: column;
|
|
1143
|
-
justify-content: center;
|
|
1144
|
-
align-items: center;
|
|
1145
|
-
pointer-events: none;
|
|
1146
|
-
|
|
1147
|
-
> * {
|
|
1148
|
-
max-width: ${_ref => {
|
|
1149
|
-
let {
|
|
1150
|
-
$maxWidth
|
|
1151
|
-
} = _ref;
|
|
1152
|
-
return $maxWidth;
|
|
1153
|
-
}}px;
|
|
1154
|
-
}
|
|
1155
|
-
|
|
1156
|
-
> span {
|
|
1157
|
-
font-family: var(--redsift-typography-font-family-raleway);
|
|
1158
|
-
color: var(--redsift-color-neutral-black);
|
|
1159
|
-
font-size: ${_ref2 => {
|
|
1160
|
-
let {
|
|
1161
|
-
$textSize
|
|
1162
|
-
} = _ref2;
|
|
1163
|
-
return $textSize;
|
|
1164
|
-
}}px;
|
|
1165
|
-
line-height: ${_ref3 => {
|
|
1166
|
-
let {
|
|
1167
|
-
$textSize
|
|
1168
|
-
} = _ref3;
|
|
1169
|
-
return $textSize;
|
|
1170
|
-
}}px;
|
|
1171
|
-
}
|
|
1172
|
-
`;
|
|
1173
|
-
|
|
1174
|
-
const sizeToDimension$2 = size => {
|
|
1175
|
-
if (typeof size !== 'string') {
|
|
1176
|
-
return size;
|
|
1177
|
-
}
|
|
1178
|
-
switch (size) {
|
|
1179
|
-
case ChartSize.small:
|
|
1180
|
-
return {
|
|
1181
|
-
width: 300,
|
|
1182
|
-
height: 200,
|
|
1183
|
-
fontSize: 30
|
|
1184
|
-
};
|
|
1185
|
-
case ChartSize.large:
|
|
1186
|
-
return {
|
|
1187
|
-
width: 500,
|
|
1188
|
-
height: 400,
|
|
1189
|
-
fontSize: 38
|
|
1190
|
-
};
|
|
1191
|
-
case ChartSize.medium:
|
|
1192
|
-
default:
|
|
1193
|
-
return {
|
|
1194
|
-
width: 400,
|
|
1195
|
-
height: 300,
|
|
1196
|
-
fontSize: 34
|
|
1197
|
-
};
|
|
1198
|
-
}
|
|
1199
|
-
};
|
|
1200
|
-
|
|
1201
|
-
const _excluded$e = ["className", "emptyComponent", "size", "localeText"];
|
|
1202
|
-
const EmptyBarChart = /*#__PURE__*/forwardRef((props, ref) => {
|
|
1203
|
-
const {
|
|
1204
|
-
className,
|
|
1205
|
-
emptyComponent,
|
|
1206
|
-
size,
|
|
1207
|
-
localeText
|
|
1208
|
-
} = props,
|
|
1209
|
-
forwardedProps = _objectWithoutProperties(props, _excluded$e);
|
|
1210
|
-
const chartDimensions = sizeToDimension$2(size);
|
|
1211
|
-
const width = chartDimensions.width;
|
|
1212
|
-
const height = chartDimensions.height;
|
|
1213
|
-
const margins = {
|
|
1214
|
-
top: 16,
|
|
1215
|
-
left: 16,
|
|
1216
|
-
right: 16,
|
|
1217
|
-
bottom: 32
|
|
1218
|
-
};
|
|
1219
|
-
const chartHeight = height - margins.top - margins.bottom;
|
|
1220
|
-
const chartWidth = width - margins.left - margins.right;
|
|
1221
|
-
const scaleRef = useRef();
|
|
1222
|
-
if (!scaleRef.current) {
|
|
1223
|
-
scaleRef.current = scaleLinear().domain([]).range([0, chartWidth]);
|
|
1224
|
-
}
|
|
1225
|
-
return /*#__PURE__*/React__default.createElement(StyledBarChart, _extends({}, forwardedProps, {
|
|
1226
|
-
className: className,
|
|
1227
|
-
ref: ref
|
|
1228
|
-
}), emptyComponent !== null && emptyComponent !== void 0 ? emptyComponent : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledBarChartEmptyText, {
|
|
1229
|
-
$maxWidth: width,
|
|
1230
|
-
$textSize: chartDimensions.fontSize / 2
|
|
1231
|
-
}, /*#__PURE__*/React__default.createElement("span", null, localeText === null || localeText === void 0 ? void 0 : localeText.emptyChartText)), /*#__PURE__*/React__default.createElement("svg", {
|
|
1232
|
-
width: width,
|
|
1233
|
-
height: height
|
|
1234
|
-
}, /*#__PURE__*/React__default.createElement("g", {
|
|
1235
|
-
transform: `translate(${margins.left},${margins.top})`
|
|
1236
|
-
}, /*#__PURE__*/React__default.createElement(Axis, {
|
|
1237
|
-
position: "bottom",
|
|
1238
|
-
length: chartWidth,
|
|
1239
|
-
scale: scaleRef.current,
|
|
1240
|
-
x: 0,
|
|
1241
|
-
y: chartHeight,
|
|
1242
|
-
tickValues: 4
|
|
1243
|
-
})))));
|
|
1244
|
-
});
|
|
1245
|
-
|
|
1246
|
-
const _excluded$d = ["className"];
|
|
1247
|
-
const LoadingBarChart = /*#__PURE__*/forwardRef((props, ref) => {
|
|
1248
|
-
const {
|
|
1249
|
-
className
|
|
1250
|
-
} = props,
|
|
1251
|
-
forwardedProps = _objectWithoutProperties(props, _excluded$d);
|
|
1252
|
-
return /*#__PURE__*/React__default.createElement(StyledBarChart, _extends({}, forwardedProps, {
|
|
1253
|
-
className: className,
|
|
1254
|
-
ref: ref
|
|
1255
|
-
}), "Loading...");
|
|
1256
|
-
});
|
|
1257
|
-
|
|
1258
|
-
const _excluded$c = ["areXLabelsRotated", "barProps", "caping", "className", "data", "id", "isBarSelected", "labelDecorator", "onBarClick", "others", "size", "barRole", "theme", "tooltipVariant"];
|
|
1259
|
-
const RenderedBarChart = /*#__PURE__*/forwardRef((props, ref) => {
|
|
1260
|
-
const {
|
|
1261
|
-
areXLabelsRotated,
|
|
1262
|
-
barProps,
|
|
1263
|
-
caping,
|
|
1264
|
-
className,
|
|
1265
|
-
data: propsData,
|
|
1266
|
-
id,
|
|
1267
|
-
isBarSelected,
|
|
1268
|
-
labelDecorator,
|
|
1269
|
-
onBarClick,
|
|
1270
|
-
others,
|
|
1271
|
-
size,
|
|
1272
|
-
barRole,
|
|
1273
|
-
theme,
|
|
1274
|
-
tooltipVariant
|
|
1275
|
-
} = props,
|
|
1276
|
-
forwardedProps = _objectWithoutProperties(props, _excluded$c);
|
|
1277
|
-
const cache = useRef();
|
|
1278
|
-
const {
|
|
1279
|
-
data,
|
|
1280
|
-
colorScale
|
|
1281
|
-
} = useFormatCategoricalData({
|
|
1282
|
-
data: propsData,
|
|
1283
|
-
theme: theme,
|
|
1284
|
-
caping,
|
|
1285
|
-
others
|
|
1286
|
-
});
|
|
1287
|
-
useEffect(() => {
|
|
1288
|
-
cache.current = data;
|
|
1289
|
-
});
|
|
1290
|
-
const chartDimensions = sizeToDimension$2(size);
|
|
1291
|
-
const width = chartDimensions.width;
|
|
1292
|
-
const height = chartDimensions.height;
|
|
1293
|
-
const margins = {
|
|
1294
|
-
top: 16,
|
|
1295
|
-
left: 16,
|
|
1296
|
-
right: 16,
|
|
1297
|
-
bottom: 32
|
|
1298
|
-
};
|
|
1299
|
-
const chartHeight = height - margins.top - margins.bottom;
|
|
1300
|
-
const chartWidth = width - margins.left - margins.right;
|
|
1301
|
-
const numberOfRows = data.length;
|
|
1302
|
-
const gap = 5;
|
|
1303
|
-
const scale = useMemo(() => scaleLinear().domain([0, Math.max(...data.map(_ref => {
|
|
1304
|
-
let {
|
|
1305
|
-
value
|
|
1306
|
-
} = _ref;
|
|
1307
|
-
return value;
|
|
1308
|
-
}))]).range([0, chartWidth]), [size]);
|
|
1309
|
-
const barHeight = (chartHeight - (numberOfRows + 1) * gap) / numberOfRows;
|
|
1310
|
-
const total = sum(data, d => d.value);
|
|
1311
|
-
return /*#__PURE__*/React__default.createElement(StyledBarChart, _extends({}, forwardedProps, {
|
|
1312
|
-
id: id,
|
|
1313
|
-
className: className,
|
|
1314
|
-
ref: ref
|
|
1315
|
-
}), /*#__PURE__*/React__default.createElement("svg", {
|
|
1316
|
-
width: width,
|
|
1317
|
-
height: height
|
|
1318
|
-
}, /*#__PURE__*/React__default.createElement("g", {
|
|
1319
|
-
transform: `translate(${margins.left},${margins.top})`
|
|
1320
|
-
}, /*#__PURE__*/React__default.createElement(Axis, {
|
|
1321
|
-
position: "bottom",
|
|
1322
|
-
length: chartWidth,
|
|
1323
|
-
scale: scale,
|
|
1324
|
-
x: 0,
|
|
1325
|
-
y: chartHeight,
|
|
1326
|
-
tickValues: 4,
|
|
1327
|
-
tickRotation: areXLabelsRotated ? -45 : 0
|
|
1328
|
-
}), data.filter(datum => datum.value).map((datum, index) => {
|
|
1329
|
-
const percent = datum.value / total;
|
|
1330
|
-
const to = {
|
|
1331
|
-
data: _objectSpread2(_objectSpread2({}, datum), {}, {
|
|
1332
|
-
percent
|
|
1333
|
-
})
|
|
1334
|
-
};
|
|
1335
|
-
const from = cache.current ? {
|
|
1336
|
-
data: cache.current[index]
|
|
1337
|
-
} : undefined;
|
|
1338
|
-
return /*#__PURE__*/React__default.createElement(Bar, _extends({}, barProps, {
|
|
1339
|
-
color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(to.data.key),
|
|
1340
|
-
data: to,
|
|
1341
|
-
gap: gap,
|
|
1342
|
-
height: barHeight,
|
|
1343
|
-
id: `id${id}__bar-${index}`,
|
|
1344
|
-
index: index,
|
|
1345
|
-
isSelected: Boolean(isBarSelected(to)),
|
|
1346
|
-
key: `bar _${index}`,
|
|
1347
|
-
labelDecorator: labelDecorator,
|
|
1348
|
-
onClick: onBarClick,
|
|
1349
|
-
previousData: from,
|
|
1350
|
-
role: barRole,
|
|
1351
|
-
scale: scale,
|
|
1352
|
-
tooltipVariant: tooltipVariant
|
|
1353
|
-
}));
|
|
1354
|
-
}))));
|
|
1355
|
-
});
|
|
1356
|
-
|
|
1357
|
-
const _excluded$b = ["areXLabelsRotated", "caping", "chartRef", "className", "data", "emptyComponent", "id", "isBarSelected", "labelDecorator", "localeText", "onBarClick", "others", "size", "barRole", "theme", "tooltipVariant"];
|
|
1358
|
-
const COMPONENT_NAME$5 = 'BarChart';
|
|
1359
|
-
const CLASSNAME$5 = 'redsift-barchart';
|
|
1360
|
-
const DEFAULT_PROPS$5 = {
|
|
1361
|
-
isBarSelected: () => true,
|
|
1362
|
-
others: true,
|
|
1363
|
-
size: ChartSize.medium,
|
|
1364
|
-
theme: ColorTheme.default,
|
|
1365
|
-
tooltipVariant: TooltipVariant.value,
|
|
1366
|
-
localeText: {
|
|
1367
|
-
emptyChartText: 'No Data'
|
|
1368
|
-
}
|
|
1369
|
-
};
|
|
1370
|
-
const BarChart = /*#__PURE__*/forwardRef((props, ref) => {
|
|
1371
|
-
const {
|
|
1372
|
-
areXLabelsRotated,
|
|
1373
|
-
caping,
|
|
1374
|
-
chartRef,
|
|
1375
|
-
className,
|
|
1376
|
-
data: propsData,
|
|
1377
|
-
emptyComponent,
|
|
1378
|
-
id: propsId,
|
|
1379
|
-
isBarSelected,
|
|
1380
|
-
labelDecorator,
|
|
1381
|
-
localeText,
|
|
1382
|
-
onBarClick,
|
|
1383
|
-
others,
|
|
1384
|
-
size,
|
|
1385
|
-
barRole,
|
|
1386
|
-
theme,
|
|
1387
|
-
tooltipVariant
|
|
1388
|
-
} = props,
|
|
1389
|
-
forwardedProps = _objectWithoutProperties(props, _excluded$b);
|
|
1390
|
-
const id = propsId !== null && propsId !== void 0 ? propsId : useId();
|
|
1391
|
-
if (propsData === undefined || propsData === null) {
|
|
1392
|
-
return /*#__PURE__*/React__default.createElement(LoadingBarChart, _extends({
|
|
1393
|
-
id: id
|
|
1394
|
-
}, forwardedProps, {
|
|
1395
|
-
ref: ref
|
|
1396
|
-
}));
|
|
1397
|
-
}
|
|
1398
|
-
if (propsData.length === 0) {
|
|
1399
|
-
return /*#__PURE__*/React__default.createElement(EmptyBarChart, _extends({
|
|
1400
|
-
data: propsData,
|
|
1401
|
-
emptyComponent: emptyComponent,
|
|
1402
|
-
id: id,
|
|
1403
|
-
localeText: localeText,
|
|
1404
|
-
size: size
|
|
1405
|
-
}, forwardedProps, {
|
|
1406
|
-
ref: ref
|
|
1407
|
-
}));
|
|
1408
|
-
}
|
|
1409
|
-
return /*#__PURE__*/React__default.createElement(RenderedBarChart, _extends({
|
|
1410
|
-
areXLabelsRotated: areXLabelsRotated,
|
|
1411
|
-
barRole: barRole,
|
|
1412
|
-
caping: caping,
|
|
1413
|
-
chartRef: chartRef,
|
|
1414
|
-
className: classNames(BarChart.className, className),
|
|
1415
|
-
data: propsData,
|
|
1416
|
-
id: id,
|
|
1417
|
-
isBarSelected: isBarSelected,
|
|
1418
|
-
labelDecorator: labelDecorator,
|
|
1419
|
-
onBarClick: onBarClick,
|
|
1420
|
-
others: others,
|
|
1421
|
-
size: size,
|
|
1422
|
-
theme: theme,
|
|
1423
|
-
tooltipVariant: tooltipVariant
|
|
1424
|
-
}, forwardedProps, {
|
|
1425
|
-
ref: ref
|
|
1426
|
-
}));
|
|
1427
|
-
});
|
|
1428
|
-
BarChart.className = CLASSNAME$5;
|
|
1429
|
-
BarChart.defaultProps = DEFAULT_PROPS$5;
|
|
1430
|
-
BarChart.displayName = COMPONENT_NAME$5;
|
|
1431
|
-
|
|
1432
|
-
/**
|
|
1433
|
-
* Component style.
|
|
1434
|
-
*/
|
|
1435
|
-
const StyledDot = styled(DataPoint)`
|
|
1436
|
-
circle {
|
|
1437
|
-
fill-opacity: 0.7;
|
|
1438
|
-
}
|
|
1439
|
-
|
|
1440
|
-
${_ref => {
|
|
1441
|
-
let {
|
|
1442
|
-
$clickable
|
|
1443
|
-
} = _ref;
|
|
1444
|
-
return $clickable ? css`
|
|
1445
|
-
cursor: pointer;
|
|
1446
|
-
|
|
1447
|
-
&:hover,
|
|
1448
|
-
&:focus {
|
|
1449
|
-
opacity: 0.5;
|
|
1450
|
-
outline: none;
|
|
1451
|
-
}
|
|
1452
|
-
|
|
1453
|
-
&:focus-visible {
|
|
1454
|
-
circle {
|
|
1455
|
-
stroke: var(--redsift-color-default-primary);
|
|
1456
|
-
stroke-width: 4px;
|
|
1457
|
-
paint-order: stroke;
|
|
1458
|
-
}
|
|
1459
|
-
}
|
|
1460
|
-
` : '';
|
|
1461
|
-
}}}
|
|
1462
|
-
`;
|
|
1463
|
-
|
|
1464
|
-
const _excluded$a = ["className", "scaleX", "scaleY"];
|
|
1465
|
-
const COMPONENT_NAME$4 = 'Dot';
|
|
1466
|
-
const CLASSNAME$4 = 'redsift-dot';
|
|
1467
|
-
const DEFAULT_PROPS$4 = {
|
|
1468
|
-
color: monochrome,
|
|
1469
|
-
index: 0,
|
|
1470
|
-
labelDecorator: datum => {
|
|
1471
|
-
return datum.data.key[2] !== undefined && datum.data.key[2] !== null ? datum.data.key[2] : `${datum.data.key[0]},${datum.data.key[1]}`;
|
|
1472
|
-
}
|
|
1473
|
-
};
|
|
1474
|
-
const Dot = /*#__PURE__*/forwardRef((props, ref) => {
|
|
1475
|
-
const {
|
|
1476
|
-
color,
|
|
1477
|
-
data,
|
|
1478
|
-
isSelected: propsIsSelected,
|
|
1479
|
-
onClick,
|
|
1480
|
-
role
|
|
1481
|
-
} = props;
|
|
1482
|
-
const {
|
|
1483
|
-
className,
|
|
1484
|
-
scaleX,
|
|
1485
|
-
scaleY
|
|
1486
|
-
} = props,
|
|
1487
|
-
forwardedProps = _objectWithoutProperties(props, _excluded$a);
|
|
1488
|
-
const isSelectable = role === 'option';
|
|
1489
|
-
const isDeselected = isSelectable && propsIsSelected === false;
|
|
1490
|
-
return /*#__PURE__*/React__default.createElement(StyledDot, _extends({}, forwardedProps, {
|
|
1491
|
-
ref: ref,
|
|
1492
|
-
className: classNames(Dot.className, className),
|
|
1493
|
-
$clickable: Boolean(onClick)
|
|
1494
|
-
}), /*#__PURE__*/React__default.createElement("circle", {
|
|
1495
|
-
cx: scaleX(data.x),
|
|
1496
|
-
cy: scaleY(data.y),
|
|
1497
|
-
r: data.r,
|
|
1498
|
-
fill: isDeselected ? 'var(--redsift-color-neutral-lightgrey)' : color
|
|
1499
|
-
}));
|
|
1500
|
-
});
|
|
1501
|
-
Dot.className = CLASSNAME$4;
|
|
1502
|
-
Dot.defaultProps = DEFAULT_PROPS$4;
|
|
1503
|
-
Dot.displayName = COMPONENT_NAME$4;
|
|
1504
|
-
|
|
1505
|
-
/**
|
|
1506
|
-
* Component style.
|
|
1507
|
-
*/
|
|
1508
|
-
const StyledLegend = styled.ul`
|
|
1509
|
-
max-width: 262px;
|
|
1510
|
-
${_ref => {
|
|
1511
|
-
let {
|
|
1512
|
-
$width
|
|
1513
|
-
} = _ref;
|
|
1514
|
-
return $width !== undefined ? css`
|
|
1515
|
-
width: ${$width};
|
|
1516
|
-
` : null;
|
|
1517
|
-
}}
|
|
1518
|
-
`;
|
|
1519
|
-
|
|
1520
|
-
/**
|
|
1521
|
-
* Component style.
|
|
1522
|
-
*/
|
|
1523
|
-
const StyledLegendItem = styled.li`
|
|
1524
|
-
display: flex;
|
|
1525
|
-
align-items: center;
|
|
1526
|
-
gap: 8px;
|
|
1527
|
-
font-size: var(--redsift-typography-caption-font-size);
|
|
1528
|
-
|
|
1529
|
-
> div {
|
|
1530
|
-
height: 16px;
|
|
1531
|
-
width: 16px;
|
|
1532
|
-
min-width: 16px;
|
|
1533
|
-
background-color: ${_ref => {
|
|
1534
|
-
let {
|
|
1535
|
-
color
|
|
1536
|
-
} = _ref;
|
|
1537
|
-
return color;
|
|
1538
|
-
}};
|
|
1539
|
-
}
|
|
1540
|
-
|
|
1541
|
-
${_ref2 => {
|
|
1542
|
-
let {
|
|
1543
|
-
$clickable
|
|
1544
|
-
} = _ref2;
|
|
1545
|
-
return $clickable ? css`
|
|
1546
|
-
cursor: pointer;
|
|
1547
|
-
|
|
1548
|
-
&:hover,
|
|
1549
|
-
&:focus {
|
|
1550
|
-
outline: none;
|
|
1551
|
-
> div {
|
|
1552
|
-
opacity: 0.7;
|
|
1553
|
-
}
|
|
1554
|
-
}
|
|
1555
|
-
|
|
1556
|
-
&:focus-visible {
|
|
1557
|
-
> div {
|
|
1558
|
-
outline: 4px solid var(--redsift-color-default-primary);
|
|
1559
|
-
}
|
|
1560
|
-
}
|
|
1561
|
-
` : '';
|
|
1562
|
-
}}}
|
|
1563
|
-
`;
|
|
1564
|
-
|
|
1565
|
-
const _excluded$9 = ["className", "color", "data", "id", "total", "variant"];
|
|
1566
|
-
const COMPONENT_NAME$3 = 'LegendItem';
|
|
1567
|
-
const CLASSNAME$3 = 'redsift-legend-item';
|
|
1568
|
-
const DEFAULT_PROPS$3 = {
|
|
1569
|
-
color: monochrome,
|
|
1570
|
-
index: 0
|
|
1571
|
-
};
|
|
1572
|
-
const LegendItem = /*#__PURE__*/forwardRef((props, ref) => {
|
|
1573
|
-
const {
|
|
1574
|
-
index,
|
|
1575
|
-
isSelected: propsIsSelected,
|
|
1576
|
-
labelDecorator,
|
|
1577
|
-
onClick,
|
|
1578
|
-
role
|
|
1579
|
-
} = props;
|
|
1580
|
-
const {
|
|
1581
|
-
className,
|
|
1582
|
-
color,
|
|
1583
|
-
data,
|
|
1584
|
-
id: propsId,
|
|
1585
|
-
total,
|
|
1586
|
-
variant
|
|
1587
|
-
} = props,
|
|
1588
|
-
forwardedProps = _objectWithoutProperties(props, _excluded$9);
|
|
1589
|
-
const id = propsId !== null && propsId !== void 0 ? propsId : useId();
|
|
1590
|
-
const text = labelDecorator ? labelDecorator(data) : data.data.key;
|
|
1591
|
-
const isEmpty = data.data.value === 0;
|
|
1592
|
-
const isSelectable = role === 'option';
|
|
1593
|
-
const isSelected = isSelectable && propsIsSelected === true;
|
|
1594
|
-
const isDeselected = isSelectable && propsIsSelected === false;
|
|
1595
|
-
const onKeyDown = event => {
|
|
1596
|
-
if (onClick) {
|
|
1597
|
-
event.stopPropagation();
|
|
1598
|
-
if (event.code === 'Enter' || event.code === 'Space') {
|
|
1599
|
-
event.preventDefault();
|
|
1600
|
-
onClick(data);
|
|
1601
|
-
}
|
|
1602
|
-
}
|
|
1603
|
-
};
|
|
1604
|
-
return /*#__PURE__*/React__default.createElement(StyledLegendItem, _extends({}, forwardedProps, {
|
|
1605
|
-
className: classNames(LegendItem.className, className, `_${index}`, {
|
|
1606
|
-
selected: isSelected,
|
|
1607
|
-
deselected: isDeselected
|
|
1608
|
-
}),
|
|
1609
|
-
color: isDeselected ? 'var(--redsift-color-neutral-lightgrey)' : color,
|
|
1610
|
-
ref: ref,
|
|
1611
|
-
"aria-labelledby": !isEmpty ? `${id}-title` : undefined,
|
|
1612
|
-
"aria-selected": isSelected ? true : isDeselected ? false : undefined,
|
|
1613
|
-
id: id,
|
|
1614
|
-
onClick: onClick ? () => onClick(data) : undefined,
|
|
1615
|
-
onKeyDown: onClick ? e => onKeyDown(e) : undefined,
|
|
1616
|
-
role: role ? role : onClick ? 'button' : undefined,
|
|
1617
|
-
tabIndex: onClick ? 0 : undefined,
|
|
1618
|
-
$clickable: Boolean(onClick)
|
|
1619
|
-
}), /*#__PURE__*/React__default.createElement("div", null), variant === LabelVariant.value ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Number$1, {
|
|
1620
|
-
as: "b",
|
|
1621
|
-
maximumFractionDigits: 2,
|
|
1622
|
-
value: data.data.value,
|
|
1623
|
-
variant: "inherit"
|
|
1624
|
-
}), /*#__PURE__*/React__default.createElement(Text, {
|
|
1625
|
-
variant: "caption"
|
|
1626
|
-
}, text)) : variant === LabelVariant.percent && total ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Number$1, {
|
|
1627
|
-
as: "b",
|
|
1628
|
-
maximumFractionDigits: 2,
|
|
1629
|
-
type: "percent",
|
|
1630
|
-
value: data.data.value / total,
|
|
1631
|
-
variant: "inherit"
|
|
1632
|
-
}), /*#__PURE__*/React__default.createElement(Text, {
|
|
1633
|
-
variant: "caption"
|
|
1634
|
-
}, text)) : /*#__PURE__*/React__default.createElement(Text, {
|
|
1635
|
-
variant: "caption"
|
|
1636
|
-
}, text));
|
|
1637
|
-
});
|
|
1638
|
-
LegendItem.className = CLASSNAME$3;
|
|
1639
|
-
LegendItem.defaultProps = DEFAULT_PROPS$3;
|
|
1640
|
-
LegendItem.displayName = COMPONENT_NAME$3;
|
|
1641
|
-
|
|
1642
|
-
const _excluded$8 = ["className", "data", "isLegendItemSelected", "labelDecorator", "legendItemRole", "onLegendItemClick", "variant", "width"],
|
|
1643
|
-
_excluded2 = ["color"];
|
|
1644
|
-
const COMPONENT_NAME$2 = 'Legend';
|
|
1645
|
-
const CLASSNAME$2 = 'redsift-chart-legend';
|
|
1646
|
-
const DEFAULT_PROPS$2 = {
|
|
1647
|
-
isLegendItemSelected: () => true,
|
|
1648
|
-
variant: LabelVariant.label
|
|
1649
|
-
};
|
|
1650
|
-
const Legend = /*#__PURE__*/forwardRef((props, ref) => {
|
|
1651
|
-
const {
|
|
1652
|
-
className,
|
|
1653
|
-
data,
|
|
1654
|
-
isLegendItemSelected,
|
|
1655
|
-
labelDecorator,
|
|
1656
|
-
legendItemRole,
|
|
1657
|
-
onLegendItemClick,
|
|
1658
|
-
variant,
|
|
1659
|
-
width
|
|
1660
|
-
} = props,
|
|
1661
|
-
forwardedProps = _objectWithoutProperties(props, _excluded$8);
|
|
1662
|
-
const total = sum(data, d => d.value);
|
|
1663
|
-
return /*#__PURE__*/React__default.createElement(StyledLegend, _extends({}, forwardedProps, {
|
|
1664
|
-
className: classNames(Legend.className, className),
|
|
1665
|
-
ref: ref,
|
|
1666
|
-
$width: width
|
|
1667
|
-
}), data.map((_ref, index) => {
|
|
1668
|
-
let {
|
|
1669
|
-
color
|
|
1670
|
-
} = _ref,
|
|
1671
|
-
datum = _objectWithoutProperties(_ref, _excluded2);
|
|
1672
|
-
return /*#__PURE__*/React__default.createElement(LegendItem, {
|
|
1673
|
-
data: {
|
|
1674
|
-
data: datum
|
|
1675
|
-
},
|
|
1676
|
-
color: color,
|
|
1677
|
-
total: total,
|
|
1678
|
-
variant: variant,
|
|
1679
|
-
index: index,
|
|
1680
|
-
isSelected: Boolean(isLegendItemSelected({
|
|
1681
|
-
data: datum
|
|
1682
|
-
})),
|
|
1683
|
-
key: `legend-item _${index}`,
|
|
1684
|
-
labelDecorator: labelDecorator,
|
|
1685
|
-
onClick: onLegendItemClick,
|
|
1686
|
-
role: legendItemRole
|
|
1687
|
-
});
|
|
1688
|
-
}));
|
|
1689
|
-
});
|
|
1690
|
-
Legend.className = CLASSNAME$2;
|
|
1691
|
-
Legend.defaultProps = DEFAULT_PROPS$2;
|
|
1692
|
-
Legend.displayName = COMPONENT_NAME$2;
|
|
1693
|
-
|
|
1694
|
-
/**
|
|
1695
|
-
* Component variant.
|
|
1696
|
-
*/
|
|
1697
|
-
const PieChartVariant = {
|
|
1698
|
-
plain: 'plain',
|
|
1699
|
-
spaced: 'spaced',
|
|
1700
|
-
donut: 'donut',
|
|
1701
|
-
spacedDonut: 'spacedDonut'
|
|
1702
|
-
};
|
|
1703
|
-
/**
|
|
1704
|
-
* Component's labels variant.
|
|
1705
|
-
*/
|
|
1706
|
-
const PieChartLabelVariant = {
|
|
1707
|
-
none: 'none',
|
|
1708
|
-
internal: 'internal',
|
|
1709
|
-
externalLabel: 'externalLabel',
|
|
1710
|
-
externalLabelValue: 'externalLabelValue',
|
|
1711
|
-
externalLabelPercent: 'externalLabelPercent'
|
|
1712
|
-
};
|
|
1713
|
-
|
|
1714
|
-
/**
|
|
1715
|
-
* Component props.
|
|
1716
|
-
*/
|
|
1717
|
-
|
|
1718
|
-
/**
|
|
1719
|
-
* Component style.
|
|
1720
|
-
*/
|
|
1721
|
-
const StyledPieChart = styled(ChartContainer)`
|
|
1722
|
-
.redsift-piechart__chart-wrapper {
|
|
1723
|
-
position: relative;
|
|
1724
|
-
}
|
|
1725
|
-
`;
|
|
1726
|
-
const StyledPieChartCenterText = styled.div`
|
|
1727
|
-
position: absolute;
|
|
1728
|
-
top: 0;
|
|
1729
|
-
left: 0;
|
|
1730
|
-
height: 100%;
|
|
1731
|
-
width: 100%;
|
|
1732
|
-
display: flex;
|
|
1733
|
-
flex-direction: column;
|
|
1734
|
-
justify-content: center;
|
|
1735
|
-
align-items: center;
|
|
1736
|
-
pointer-events: none;
|
|
1737
|
-
|
|
1738
|
-
> * {
|
|
1739
|
-
max-width: ${_ref => {
|
|
1740
|
-
let {
|
|
1741
|
-
$maxWidth
|
|
1742
|
-
} = _ref;
|
|
1743
|
-
return $maxWidth;
|
|
1744
|
-
}}px;
|
|
1745
|
-
}
|
|
1746
|
-
|
|
1747
|
-
> b {
|
|
1748
|
-
font-family: var(--redsift-typography-font-family-source-code-pro);
|
|
1749
|
-
color: var(--redsift-color-neutral-black);
|
|
1750
|
-
font-weight: var(--redsift-typography-font-weight-medium);
|
|
1751
|
-
font-size: ${_ref2 => {
|
|
1752
|
-
let {
|
|
1753
|
-
$textSize
|
|
1754
|
-
} = _ref2;
|
|
1755
|
-
return $textSize;
|
|
1756
|
-
}}px;
|
|
1757
|
-
line-height: ${_ref3 => {
|
|
1758
|
-
let {
|
|
1759
|
-
$textSize
|
|
1760
|
-
} = _ref3;
|
|
1761
|
-
return $textSize;
|
|
1762
|
-
}}px;
|
|
1763
|
-
|
|
1764
|
-
&:nth-child(2) {
|
|
1765
|
-
font-weight: normal;
|
|
1766
|
-
margin-top: 8px;
|
|
1767
|
-
font-family: var(--redsift-typography-font-family-raleway);
|
|
1768
|
-
font-size: ${_ref4 => {
|
|
1769
|
-
let {
|
|
1770
|
-
$smallTextSize
|
|
1771
|
-
} = _ref4;
|
|
1772
|
-
return $smallTextSize;
|
|
1773
|
-
}}px;
|
|
1774
|
-
line-height: ${_ref5 => {
|
|
1775
|
-
let {
|
|
1776
|
-
$smallTextSize
|
|
1777
|
-
} = _ref5;
|
|
1778
|
-
return $smallTextSize;
|
|
1779
|
-
}}px;
|
|
1780
|
-
}
|
|
1781
|
-
}
|
|
1782
|
-
> span {
|
|
1783
|
-
color: var(--redsift-color-neutral-black);
|
|
1784
|
-
font-size: ${_ref6 => {
|
|
1785
|
-
let {
|
|
1786
|
-
$textSize
|
|
1787
|
-
} = _ref6;
|
|
1788
|
-
return $textSize;
|
|
1789
|
-
}}px;
|
|
1790
|
-
line-height: ${_ref7 => {
|
|
1791
|
-
let {
|
|
1792
|
-
$textSize
|
|
1793
|
-
} = _ref7;
|
|
1794
|
-
return $textSize;
|
|
1795
|
-
}}px;
|
|
1796
|
-
&:nth-child(3) {
|
|
1797
|
-
margin-top: 4px;
|
|
1798
|
-
font-size: ${_ref8 => {
|
|
1799
|
-
let {
|
|
1800
|
-
$smallTextSize
|
|
1801
|
-
} = _ref8;
|
|
1802
|
-
return $smallTextSize;
|
|
1803
|
-
}}px;
|
|
1804
|
-
line-height: ${_ref9 => {
|
|
1805
|
-
let {
|
|
1806
|
-
$smallTextSize
|
|
1807
|
-
} = _ref9;
|
|
1808
|
-
return $smallTextSize;
|
|
1809
|
-
}}px;
|
|
1810
|
-
}
|
|
1811
|
-
}
|
|
1812
|
-
> b + span {
|
|
1813
|
-
font-size: var(--redsift-typography-body-font-size);
|
|
1814
|
-
font-family: var(--redsift-typography-font-family-raleway);
|
|
1815
|
-
line-height: var(--redsift-typography-badge-line-height);
|
|
1816
|
-
color: rgba(0, 0, 0, 0.6);
|
|
1817
|
-
text-align: center;
|
|
1818
|
-
}
|
|
1819
|
-
`;
|
|
1820
|
-
const StyledPieChartEmptyText = styled.div`
|
|
1821
|
-
position: absolute;
|
|
1822
|
-
top: 0;
|
|
1823
|
-
left: 0;
|
|
1824
|
-
height: 100%;
|
|
1825
|
-
width: 100%;
|
|
1826
|
-
display: flex;
|
|
1827
|
-
flex-direction: column;
|
|
1828
|
-
justify-content: center;
|
|
1829
|
-
align-items: center;
|
|
1830
|
-
pointer-events: none;
|
|
1831
|
-
|
|
1832
|
-
> * {
|
|
1833
|
-
max-width: ${_ref10 => {
|
|
1834
|
-
let {
|
|
1835
|
-
$maxWidth
|
|
1836
|
-
} = _ref10;
|
|
1837
|
-
return $maxWidth;
|
|
1838
|
-
}}px;
|
|
1839
|
-
}
|
|
1840
|
-
|
|
1841
|
-
> span {
|
|
1842
|
-
font-family: var(--redsift-typography-font-family-raleway);
|
|
1843
|
-
color: ${_ref11 => {
|
|
1844
|
-
let {
|
|
1845
|
-
$isDonut
|
|
1846
|
-
} = _ref11;
|
|
1847
|
-
return $isDonut ? css`var(--redsift-color-neutral-midgrey)` : css`var(--redsift-color-neutral-black)`;
|
|
1848
|
-
}};
|
|
1849
|
-
font-size: ${_ref12 => {
|
|
1850
|
-
let {
|
|
1851
|
-
$textSize
|
|
1852
|
-
} = _ref12;
|
|
1853
|
-
return $textSize;
|
|
1854
|
-
}}px;
|
|
1855
|
-
line-height: ${_ref13 => {
|
|
1856
|
-
let {
|
|
1857
|
-
$textSize
|
|
1858
|
-
} = _ref13;
|
|
1859
|
-
return $textSize;
|
|
1860
|
-
}}px;
|
|
1861
|
-
}
|
|
1862
|
-
`;
|
|
1863
|
-
|
|
1864
|
-
const _excluded$7 = ["className"];
|
|
1865
|
-
const LoadingPieChart = /*#__PURE__*/forwardRef((props, ref) => {
|
|
1866
|
-
const {
|
|
1867
|
-
className
|
|
1868
|
-
} = props,
|
|
1869
|
-
forwardedProps = _objectWithoutProperties(props, _excluded$7);
|
|
1870
|
-
return /*#__PURE__*/React__default.createElement(StyledPieChart, _extends({}, forwardedProps, {
|
|
1871
|
-
className: className,
|
|
1872
|
-
ref: ref
|
|
1873
|
-
}), "Loading...");
|
|
1874
|
-
});
|
|
1875
|
-
|
|
1876
|
-
const sizeToDimension$1 = size => {
|
|
1877
|
-
if (typeof size !== 'string') {
|
|
1878
|
-
return size;
|
|
1879
|
-
}
|
|
1880
|
-
switch (size) {
|
|
1881
|
-
case ChartSize.small:
|
|
1882
|
-
return {
|
|
1883
|
-
width: 200,
|
|
1884
|
-
height: 200,
|
|
1885
|
-
smallFontSize: 13,
|
|
1886
|
-
fontSize: 30,
|
|
1887
|
-
innerRadius: 55
|
|
1888
|
-
};
|
|
1889
|
-
case ChartSize.large:
|
|
1890
|
-
return {
|
|
1891
|
-
width: 300,
|
|
1892
|
-
height: 300,
|
|
1893
|
-
smallFontSize: 18,
|
|
1894
|
-
fontSize: 38,
|
|
1895
|
-
innerRadius: 80
|
|
1896
|
-
};
|
|
1897
|
-
case ChartSize.medium:
|
|
1898
|
-
default:
|
|
1899
|
-
return {
|
|
1900
|
-
width: 240,
|
|
1901
|
-
height: 240,
|
|
1902
|
-
smallFontSize: 14,
|
|
1903
|
-
fontSize: 34,
|
|
1904
|
-
innerRadius: 65
|
|
1905
|
-
};
|
|
1906
|
-
}
|
|
1907
|
-
};
|
|
1908
|
-
|
|
1909
|
-
const _excluded$6 = ["className", "emptyComponent", "localeText", "size", "variant"];
|
|
1910
|
-
const EmptyPieChart = /*#__PURE__*/forwardRef((props, ref) => {
|
|
1911
|
-
const {
|
|
1912
|
-
className,
|
|
1913
|
-
emptyComponent,
|
|
1914
|
-
localeText,
|
|
1915
|
-
size,
|
|
1916
|
-
variant
|
|
1917
|
-
} = props,
|
|
1918
|
-
forwardedProps = _objectWithoutProperties(props, _excluded$6);
|
|
1919
|
-
const isDonut = variant === PieChartVariant.donut || variant === PieChartVariant.spacedDonut;
|
|
1920
|
-
const {
|
|
1921
|
-
width,
|
|
1922
|
-
height,
|
|
1923
|
-
fontSize,
|
|
1924
|
-
innerRadius
|
|
1925
|
-
} = sizeToDimension$1(size);
|
|
1926
|
-
const externalRadiusPadding = 8;
|
|
1927
|
-
const createArc = arc().innerRadius(isDonut ? innerRadius : 0).outerRadius(width / 2 - externalRadiusPadding);
|
|
1928
|
-
return /*#__PURE__*/React__default.createElement(StyledPieChart, _extends({}, forwardedProps, {
|
|
1929
|
-
className: className,
|
|
1930
|
-
ref: ref
|
|
1931
|
-
}), emptyComponent !== null && emptyComponent !== void 0 ? emptyComponent : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledPieChartEmptyText, {
|
|
1932
|
-
$maxWidth: innerRadius * 2,
|
|
1933
|
-
$textSize: fontSize / 2,
|
|
1934
|
-
$isDonut: isDonut
|
|
1935
|
-
}, /*#__PURE__*/React__default.createElement("span", null, localeText === null || localeText === void 0 ? void 0 : localeText.emptyChartText)), /*#__PURE__*/React__default.createElement("svg", {
|
|
1936
|
-
width: width,
|
|
1937
|
-
height: height
|
|
1938
|
-
}, /*#__PURE__*/React__default.createElement(Arcs, {
|
|
1939
|
-
arcs: [{
|
|
1940
|
-
createArc,
|
|
1941
|
-
previousData: {
|
|
1942
|
-
data: {
|
|
1943
|
-
key: '',
|
|
1944
|
-
value: 0
|
|
1945
|
-
},
|
|
1946
|
-
startAngle: 0,
|
|
1947
|
-
endAngle: 0,
|
|
1948
|
-
padAngle: 0,
|
|
1949
|
-
value: 0,
|
|
1950
|
-
index: 0
|
|
1951
|
-
},
|
|
1952
|
-
data: {
|
|
1953
|
-
data: {
|
|
1954
|
-
key: 'No Data',
|
|
1955
|
-
value: 0
|
|
1956
|
-
},
|
|
1957
|
-
index: 0,
|
|
1958
|
-
value: 0,
|
|
1959
|
-
startAngle: 0,
|
|
1960
|
-
endAngle: 2 * Math.PI,
|
|
1961
|
-
padAngle: 0
|
|
1962
|
-
},
|
|
1963
|
-
color: empty
|
|
1964
|
-
}],
|
|
1965
|
-
transform: `translate(${width / 2} ${height / 2})`
|
|
1966
|
-
}))));
|
|
1967
|
-
});
|
|
1968
|
-
|
|
1969
|
-
const _excluded$5 = ["caping", "className", "data", "id", "isSliceSelected", "labelDecorator", "labelVariant", "middleText", "onSliceClick", "others", "size", "sliceProps", "sliceRole", "subtext", "text", "theme", "tooltipVariant", "variant"];
|
|
1970
|
-
const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
|
|
1971
|
-
const {
|
|
1972
|
-
caping,
|
|
1973
|
-
className,
|
|
1974
|
-
data: propsData,
|
|
1975
|
-
id,
|
|
1976
|
-
isSliceSelected,
|
|
1977
|
-
labelDecorator,
|
|
1978
|
-
labelVariant,
|
|
1979
|
-
middleText,
|
|
1980
|
-
onSliceClick,
|
|
1981
|
-
others,
|
|
1982
|
-
size,
|
|
1983
|
-
sliceProps,
|
|
1984
|
-
sliceRole,
|
|
1985
|
-
subtext,
|
|
1986
|
-
text,
|
|
1987
|
-
theme,
|
|
1988
|
-
tooltipVariant,
|
|
1989
|
-
variant
|
|
1990
|
-
} = props,
|
|
1991
|
-
forwardedProps = _objectWithoutProperties(props, _excluded$5);
|
|
1992
|
-
const cache = useRef();
|
|
1993
|
-
const isDonut = variant === PieChartVariant.donut || variant === PieChartVariant.spacedDonut;
|
|
1994
|
-
const {
|
|
1995
|
-
data,
|
|
1996
|
-
colorScale
|
|
1997
|
-
} = useFormatCategoricalData({
|
|
1998
|
-
data: propsData,
|
|
1999
|
-
theme: theme,
|
|
2000
|
-
caping,
|
|
2001
|
-
others
|
|
2002
|
-
});
|
|
2003
|
-
useEffect(() => {
|
|
2004
|
-
cache.current = data;
|
|
2005
|
-
});
|
|
2006
|
-
const {
|
|
2007
|
-
width,
|
|
2008
|
-
height,
|
|
2009
|
-
smallFontSize,
|
|
2010
|
-
fontSize,
|
|
2011
|
-
innerRadius
|
|
2012
|
-
} = sizeToDimension$1(size);
|
|
2013
|
-
const externalRadiusPadding = 8;
|
|
2014
|
-
const createPie = pie().value(d => d.value).sort(null);
|
|
2015
|
-
const createArc = arc().innerRadius(isDonut ? innerRadius : 0).outerRadius(width / 2 - externalRadiusPadding);
|
|
2016
|
-
const pieData = createPie(data);
|
|
2017
|
-
const previousPieData = cache.current ? createPie(cache.current) : undefined;
|
|
2018
|
-
const total = sum(data, d => d.value);
|
|
2019
|
-
return /*#__PURE__*/React__default.createElement(StyledPieChart, _extends({}, forwardedProps, {
|
|
2020
|
-
className: className,
|
|
2021
|
-
id: id,
|
|
2022
|
-
ref: ref
|
|
2023
|
-
}), /*#__PURE__*/React__default.createElement("div", {
|
|
2024
|
-
className: `${PieChart.className}__chart-wrapper`
|
|
2025
|
-
}, text ? /*#__PURE__*/React__default.createElement(StyledPieChartCenterText, {
|
|
2026
|
-
$maxWidth: innerRadius * 2,
|
|
2027
|
-
$textSize: fontSize,
|
|
2028
|
-
$smallTextSize: smallFontSize
|
|
2029
|
-
}, subtext ? /*#__PURE__*/React__default.createElement("b", null, text) : /*#__PURE__*/React__default.createElement("span", null, text), middleText ? /*#__PURE__*/React__default.createElement("b", null, middleText) : null, /*#__PURE__*/React__default.createElement("span", null, subtext)) : null, /*#__PURE__*/React__default.createElement("svg", {
|
|
2030
|
-
width: width,
|
|
2031
|
-
height: height
|
|
2032
|
-
}, /*#__PURE__*/React__default.createElement(Arcs, {
|
|
2033
|
-
arcs: pieData.filter(datum => datum.data.value).map((datum, index) => {
|
|
2034
|
-
const percent = datum.data.value / total;
|
|
2035
|
-
const from = previousPieData ? previousPieData[index] : {
|
|
2036
|
-
data: {
|
|
2037
|
-
key: '',
|
|
2038
|
-
value: 0
|
|
2039
|
-
},
|
|
2040
|
-
startAngle: 0,
|
|
2041
|
-
endAngle: 0,
|
|
2042
|
-
padAngle: 0,
|
|
2043
|
-
value: 0,
|
|
2044
|
-
index: index
|
|
2045
|
-
};
|
|
2046
|
-
const to = _objectSpread2(_objectSpread2({}, datum), {}, {
|
|
2047
|
-
data: _objectSpread2(_objectSpread2({}, datum.data), {}, {
|
|
2048
|
-
percent
|
|
2049
|
-
})
|
|
2050
|
-
});
|
|
2051
|
-
return {
|
|
2052
|
-
color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(to.data.key),
|
|
2053
|
-
createArc,
|
|
2054
|
-
previousData: from,
|
|
2055
|
-
id: `id${id}__bar-${index}`,
|
|
2056
|
-
index,
|
|
2057
|
-
isSelected: isSliceSelected(to),
|
|
2058
|
-
key: `id${id}__bar-${index}`,
|
|
2059
|
-
data: to
|
|
2060
|
-
};
|
|
2061
|
-
}),
|
|
2062
|
-
hasLabels: labelVariant === PieChartLabelVariant.internal,
|
|
2063
|
-
hasStroke: variant === PieChartVariant.spaced || variant === PieChartVariant.spacedDonut,
|
|
2064
|
-
labelDecorator: labelDecorator,
|
|
2065
|
-
onClick: onSliceClick,
|
|
2066
|
-
role: sliceRole,
|
|
2067
|
-
sliceProps: sliceProps,
|
|
2068
|
-
tooltipVariant: tooltipVariant,
|
|
2069
|
-
transform: `translate(${width / 2} ${height / 2})`
|
|
2070
|
-
}))), labelVariant !== PieChartLabelVariant.none && labelVariant !== PieChartLabelVariant.internal ? /*#__PURE__*/React__default.createElement(Legend, {
|
|
2071
|
-
data: data.map(d => _objectSpread2(_objectSpread2({}, d), {}, {
|
|
2072
|
-
color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(d.key)
|
|
2073
|
-
})),
|
|
2074
|
-
variant: labelVariant === PieChartLabelVariant.externalLabelValue ? LabelVariant.value : labelVariant === PieChartLabelVariant.externalLabelPercent ? LabelVariant.percent : LabelVariant.label
|
|
2075
|
-
}) : null);
|
|
2076
|
-
});
|
|
2077
|
-
|
|
2078
|
-
const _excluded$4 = ["caping", "chartRef", "className", "data", "emptyComponent", "id", "isSliceSelected", "labelDecorator", "labelVariant", "localeText", "middleText", "onSliceClick", "others", "size", "sliceRole", "subtext", "text", "theme", "tooltipVariant", "variant"];
|
|
2079
|
-
const COMPONENT_NAME$1 = 'PieChart';
|
|
2080
|
-
const CLASSNAME$1 = 'redsift-piechart';
|
|
2081
|
-
const DEFAULT_PROPS$1 = {
|
|
2082
|
-
isSliceSelected: () => true,
|
|
2083
|
-
labelVariant: PieChartLabelVariant.none,
|
|
2084
|
-
others: true,
|
|
2085
|
-
size: ChartSize.medium,
|
|
2086
|
-
theme: ColorTheme.default,
|
|
2087
|
-
variant: PieChartVariant.plain,
|
|
2088
|
-
tooltipVariant: TooltipVariant.value,
|
|
2089
|
-
localeText: {
|
|
2090
|
-
emptyChartText: 'No Data'
|
|
2091
|
-
}
|
|
2092
|
-
};
|
|
2093
|
-
const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
|
|
2094
|
-
const {
|
|
2095
|
-
caping,
|
|
2096
|
-
chartRef,
|
|
2097
|
-
className,
|
|
2098
|
-
data: propsData,
|
|
2099
|
-
emptyComponent,
|
|
2100
|
-
id: propsId,
|
|
2101
|
-
isSliceSelected,
|
|
2102
|
-
labelDecorator,
|
|
2103
|
-
labelVariant,
|
|
2104
|
-
localeText,
|
|
2105
|
-
middleText,
|
|
2106
|
-
onSliceClick,
|
|
2107
|
-
others,
|
|
2108
|
-
size,
|
|
2109
|
-
sliceRole,
|
|
2110
|
-
subtext,
|
|
2111
|
-
text,
|
|
2112
|
-
theme,
|
|
2113
|
-
tooltipVariant,
|
|
2114
|
-
variant
|
|
2115
|
-
} = props,
|
|
2116
|
-
forwardedProps = _objectWithoutProperties(props, _excluded$4);
|
|
2117
|
-
const id = propsId !== null && propsId !== void 0 ? propsId : useId();
|
|
2118
|
-
if (propsData === undefined || propsData === null) {
|
|
2119
|
-
return /*#__PURE__*/React__default.createElement(LoadingPieChart, _extends({
|
|
2120
|
-
id: id
|
|
2121
|
-
}, forwardedProps, {
|
|
2122
|
-
ref: ref
|
|
2123
|
-
}));
|
|
2124
|
-
}
|
|
2125
|
-
if (propsData.length === 0) {
|
|
2126
|
-
return /*#__PURE__*/React__default.createElement(EmptyPieChart, _extends({
|
|
2127
|
-
data: propsData,
|
|
2128
|
-
emptyComponent: emptyComponent,
|
|
2129
|
-
id: id,
|
|
2130
|
-
localeText: localeText,
|
|
2131
|
-
size: size,
|
|
2132
|
-
variant: variant
|
|
2133
|
-
}, forwardedProps, {
|
|
2134
|
-
ref: ref
|
|
2135
|
-
}));
|
|
2136
|
-
}
|
|
2137
|
-
return /*#__PURE__*/React__default.createElement(RenderedPieChart, _extends({
|
|
2138
|
-
caping: caping,
|
|
2139
|
-
chartRef: chartRef,
|
|
2140
|
-
className: classNames(PieChart.className, className),
|
|
2141
|
-
data: propsData,
|
|
2142
|
-
id: id,
|
|
2143
|
-
isSliceSelected: isSliceSelected,
|
|
2144
|
-
labelDecorator: labelDecorator,
|
|
2145
|
-
labelVariant: labelVariant,
|
|
2146
|
-
middleText: middleText,
|
|
2147
|
-
onSliceClick: onSliceClick,
|
|
2148
|
-
others: others,
|
|
2149
|
-
size: size,
|
|
2150
|
-
sliceRole: sliceRole,
|
|
2151
|
-
subtext: subtext,
|
|
2152
|
-
text: text,
|
|
2153
|
-
theme: theme,
|
|
2154
|
-
tooltipVariant: tooltipVariant,
|
|
2155
|
-
variant: variant
|
|
2156
|
-
}, forwardedProps, {
|
|
2157
|
-
ref: ref
|
|
2158
|
-
}));
|
|
2159
|
-
});
|
|
2160
|
-
PieChart.className = CLASSNAME$1;
|
|
2161
|
-
PieChart.defaultProps = DEFAULT_PROPS$1;
|
|
2162
|
-
PieChart.displayName = COMPONENT_NAME$1;
|
|
2163
|
-
|
|
2164
|
-
/**
|
|
2165
|
-
* Component variant.
|
|
2166
|
-
*/
|
|
2167
|
-
const ScatterPlotVariant = {
|
|
2168
|
-
default: 'default',
|
|
2169
|
-
gridded: 'gridded'
|
|
2170
|
-
};
|
|
2171
|
-
/**
|
|
2172
|
-
* Component's labels variant.
|
|
2173
|
-
*/
|
|
2174
|
-
const ScatterPlotLabelVariant = {
|
|
2175
|
-
none: 'none',
|
|
2176
|
-
externalLabel: 'externalLabel',
|
|
2177
|
-
externalLabelValue: 'externalLabelValue',
|
|
2178
|
-
externalLabelPercent: 'externalLabelPercent'
|
|
2179
|
-
};
|
|
2180
|
-
|
|
2181
|
-
/**
|
|
2182
|
-
* Component props.
|
|
2183
|
-
*/
|
|
2184
|
-
|
|
2185
|
-
/**
|
|
2186
|
-
* Component style.
|
|
2187
|
-
*/
|
|
2188
|
-
const StyledScatterPlot = styled(ChartContainer)``;
|
|
2189
|
-
const StyledScatterPlotEmptyText = styled.div`
|
|
2190
|
-
position: absolute;
|
|
2191
|
-
top: 0;
|
|
2192
|
-
left: 0;
|
|
2193
|
-
height: 100%;
|
|
2194
|
-
width: 100%;
|
|
2195
|
-
display: flex;
|
|
2196
|
-
flex-direction: column;
|
|
2197
|
-
justify-content: center;
|
|
2198
|
-
align-items: center;
|
|
2199
|
-
pointer-events: none;
|
|
2200
|
-
|
|
2201
|
-
> * {
|
|
2202
|
-
max-width: ${_ref => {
|
|
2203
|
-
let {
|
|
2204
|
-
$maxWidth
|
|
2205
|
-
} = _ref;
|
|
2206
|
-
return $maxWidth;
|
|
2207
|
-
}}px;
|
|
2208
|
-
}
|
|
2209
|
-
|
|
2210
|
-
> span {
|
|
2211
|
-
font-family: var(--redsift-typography-font-family-raleway);
|
|
2212
|
-
color: var(--redsift-color-neutral-black);
|
|
2213
|
-
font-size: ${_ref2 => {
|
|
2214
|
-
let {
|
|
2215
|
-
$textSize
|
|
2216
|
-
} = _ref2;
|
|
2217
|
-
return $textSize;
|
|
2218
|
-
}}px;
|
|
2219
|
-
line-height: ${_ref3 => {
|
|
2220
|
-
let {
|
|
2221
|
-
$textSize
|
|
2222
|
-
} = _ref3;
|
|
2223
|
-
return $textSize;
|
|
2224
|
-
}}px;
|
|
2225
|
-
}
|
|
2226
|
-
`;
|
|
2227
|
-
|
|
2228
|
-
const _excluded$3 = ["className"];
|
|
2229
|
-
const LoadingScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
|
|
2230
|
-
const {
|
|
2231
|
-
className
|
|
2232
|
-
} = props,
|
|
2233
|
-
forwardedProps = _objectWithoutProperties(props, _excluded$3);
|
|
2234
|
-
return /*#__PURE__*/React__default.createElement(StyledScatterPlot, _extends({}, forwardedProps, {
|
|
2235
|
-
className: className,
|
|
2236
|
-
ref: ref
|
|
2237
|
-
}), "Loading...");
|
|
2238
|
-
});
|
|
2239
|
-
|
|
2240
|
-
const sizeToDimension = size => {
|
|
2241
|
-
if (typeof size !== 'string') {
|
|
2242
|
-
return size;
|
|
2243
|
-
}
|
|
2244
|
-
switch (size) {
|
|
2245
|
-
case ChartSize.small:
|
|
2246
|
-
return {
|
|
2247
|
-
width: 600,
|
|
2248
|
-
height: 300,
|
|
2249
|
-
fontSize: 30
|
|
2250
|
-
};
|
|
2251
|
-
case ChartSize.medium:
|
|
2252
|
-
default:
|
|
2253
|
-
return {
|
|
2254
|
-
width: 750,
|
|
2255
|
-
height: 375,
|
|
2256
|
-
fontSize: 34
|
|
2257
|
-
};
|
|
2258
|
-
case ChartSize.large:
|
|
2259
|
-
return {
|
|
2260
|
-
width: 900,
|
|
2261
|
-
height: 450,
|
|
2262
|
-
fontSize: 38
|
|
2263
|
-
};
|
|
2264
|
-
}
|
|
2265
|
-
};
|
|
2266
|
-
const BASE_NUMBER_OF_TICKS = 20;
|
|
2267
|
-
const getClosestLineIndex = (value, scale) => {
|
|
2268
|
-
const ticks = scale.ticks(BASE_NUMBER_OF_TICKS);
|
|
2269
|
-
const delta = ticks[1] - ticks[0];
|
|
2270
|
-
const index = Math.round(value / delta);
|
|
2271
|
-
const roundValue = index * delta;
|
|
2272
|
-
return [index, roundValue];
|
|
2273
|
-
};
|
|
2274
|
-
const group = (data, x, y) => {
|
|
2275
|
-
const groupDict = {};
|
|
2276
|
-
data.forEach(d => {
|
|
2277
|
-
const [i, rx] = getClosestLineIndex(d.key[0], x);
|
|
2278
|
-
const [j, ry] = getClosestLineIndex(d.key[1], y);
|
|
2279
|
-
const key = `${i}_${j}_${d.key[2]}`;
|
|
2280
|
-
if (!(key in groupDict)) {
|
|
2281
|
-
groupDict[key] = {
|
|
2282
|
-
category: d.key[2],
|
|
2283
|
-
x: rx,
|
|
2284
|
-
y: ry,
|
|
2285
|
-
data: {
|
|
2286
|
-
key: d.key,
|
|
2287
|
-
value: 0
|
|
2288
|
-
},
|
|
2289
|
-
points: []
|
|
2290
|
-
};
|
|
2291
|
-
}
|
|
2292
|
-
groupDict[key].points.push(d);
|
|
2293
|
-
groupDict[key].data.value += 1;
|
|
2294
|
-
});
|
|
2295
|
-
return Object.values(groupDict);
|
|
2296
|
-
};
|
|
2297
|
-
const countBy = arr => {
|
|
2298
|
-
const counts = arr.reduce((prev, curr) => (prev[curr.key[2]] = ++prev[curr.key[2]] || 1, prev), {});
|
|
2299
|
-
return Object.keys(counts).map(key => ({
|
|
2300
|
-
key: key,
|
|
2301
|
-
value: counts[key]
|
|
2302
|
-
})).sort((a, b) => a.value === b.value ? a.key > b.key ? 1 : -1 : a.value < b.value ? 1 : -1);
|
|
2303
|
-
};
|
|
2304
|
-
|
|
2305
|
-
const _excluded$2 = ["className", "data", "emptyComponent", "localeText", "size"];
|
|
2306
|
-
const EmptyScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
|
|
2307
|
-
const {
|
|
2308
|
-
className,
|
|
2309
|
-
data: propsData,
|
|
2310
|
-
emptyComponent,
|
|
2311
|
-
localeText,
|
|
2312
|
-
size
|
|
2313
|
-
} = props,
|
|
2314
|
-
forwardedProps = _objectWithoutProperties(props, _excluded$2);
|
|
2315
|
-
const cache = useRef();
|
|
2316
|
-
const data = propsData;
|
|
2317
|
-
useEffect(() => {
|
|
2318
|
-
cache.current = data;
|
|
2319
|
-
});
|
|
2320
|
-
const chartDimensions = sizeToDimension(size);
|
|
2321
|
-
const width = chartDimensions.width;
|
|
2322
|
-
const height = chartDimensions.height;
|
|
2323
|
-
const margins = {
|
|
2324
|
-
top: 16,
|
|
2325
|
-
left: 48,
|
|
2326
|
-
right: 16,
|
|
2327
|
-
bottom: 48
|
|
2328
|
-
};
|
|
2329
|
-
const chartWidth = width - margins.left - margins.right;
|
|
2330
|
-
return /*#__PURE__*/React__default.createElement(StyledScatterPlot, _extends({}, forwardedProps, {
|
|
2331
|
-
className: className,
|
|
2332
|
-
ref: ref
|
|
2333
|
-
}), emptyComponent !== null && emptyComponent !== void 0 ? emptyComponent : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledScatterPlotEmptyText, {
|
|
2334
|
-
$maxWidth: width,
|
|
2335
|
-
$textSize: chartDimensions.fontSize / 2
|
|
2336
|
-
}, /*#__PURE__*/React__default.createElement("span", null, localeText === null || localeText === void 0 ? void 0 : localeText.emptyChartText)), /*#__PURE__*/React__default.createElement("svg", {
|
|
2337
|
-
width: width,
|
|
2338
|
-
height: height
|
|
2339
|
-
}, /*#__PURE__*/React__default.createElement("g", {
|
|
2340
|
-
transform: `translate(${margins.left},${margins.top})`
|
|
2341
|
-
}, /*#__PURE__*/React__default.createElement(Axis, {
|
|
2342
|
-
position: "bottom",
|
|
2343
|
-
length: width - 32,
|
|
2344
|
-
scale: scaleLinear().domain([]).range([0, chartWidth]),
|
|
2345
|
-
x: 0,
|
|
2346
|
-
y: height,
|
|
2347
|
-
tickValues: 4
|
|
2348
|
-
})))));
|
|
2349
|
-
});
|
|
2350
|
-
|
|
2351
|
-
const _excluded$1 = ["isBrushable", "className", "data", "dotRole", "id", "isDotSelected", "labelDecorator", "labelVariant", "legendProps", "onBrush", "onBrushEnd", "onDotClick", "size", "theme", "tooltipVariant", "variant", "xAxisVariant", "yAxisVariant"];
|
|
2352
|
-
const RenderedScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
|
|
2353
|
-
const {
|
|
2354
|
-
isBrushable,
|
|
2355
|
-
className,
|
|
2356
|
-
data: propsData,
|
|
2357
|
-
dotRole,
|
|
2358
|
-
id,
|
|
2359
|
-
isDotSelected,
|
|
2360
|
-
labelDecorator,
|
|
2361
|
-
labelVariant,
|
|
2362
|
-
legendProps,
|
|
2363
|
-
onBrush,
|
|
2364
|
-
onBrushEnd,
|
|
2365
|
-
onDotClick,
|
|
2366
|
-
size,
|
|
2367
|
-
theme,
|
|
2368
|
-
tooltipVariant,
|
|
2369
|
-
variant,
|
|
2370
|
-
xAxisVariant,
|
|
2371
|
-
yAxisVariant
|
|
2372
|
-
} = props,
|
|
2373
|
-
forwardedProps = _objectWithoutProperties(props, _excluded$1);
|
|
2374
|
-
const cache = useRef();
|
|
2375
|
-
const data = propsData.filter(datum => datum.value && typeof datum.key[0] === 'number' && !Number.isNaN(datum.key[0]) && typeof datum.key[1] === 'number' && !Number.isNaN(datum.key[1]));
|
|
2376
|
-
useEffect(() => {
|
|
2377
|
-
cache.current = data;
|
|
2378
|
-
});
|
|
2379
|
-
const chartDimensions = sizeToDimension(size);
|
|
2380
|
-
const width = chartDimensions.width;
|
|
2381
|
-
const height = chartDimensions.height;
|
|
2382
|
-
const margins = {
|
|
2383
|
-
top: 16,
|
|
2384
|
-
left: 48,
|
|
2385
|
-
right: 16,
|
|
2386
|
-
bottom: 48
|
|
2387
|
-
};
|
|
2388
|
-
const chartHeight = height - margins.top - margins.bottom;
|
|
2389
|
-
const chartWidth = width - margins.left - margins.right;
|
|
2390
|
-
const minSize = min([chartWidth, chartHeight]);
|
|
2391
|
-
const extendedScaleX = (() => {
|
|
2392
|
-
const domain = extent(data, d => d.key[0]);
|
|
2393
|
-
const gap = domain[1] - domain[0];
|
|
2394
|
-
domain[0] -= gap * 0.1;
|
|
2395
|
-
domain[1] += gap * 0.1;
|
|
2396
|
-
return scaleLinear().domain(domain).range([0, chartWidth]).nice();
|
|
2397
|
-
})();
|
|
2398
|
-
const extendedScaleY = (() => {
|
|
2399
|
-
const domain = extent(data, d => d.key[1]);
|
|
2400
|
-
const gap = domain[1] - domain[0];
|
|
2401
|
-
domain[0] -= gap * 0.1;
|
|
2402
|
-
domain[1] += gap * 0.1;
|
|
2403
|
-
return scaleLinear().domain(domain).range([chartHeight, 0]).nice();
|
|
2404
|
-
})();
|
|
2405
|
-
const hasCategory = data[0] && data[0].key.length >= 3 && data[0].key[2] !== null && data[0].key[2] !== undefined;
|
|
2406
|
-
const countsByCategory = hasCategory ? countBy(data) : undefined;
|
|
2407
|
-
const colorScale = useColor({
|
|
2408
|
-
data: countsByCategory || data,
|
|
2409
|
-
theme: theme,
|
|
2410
|
-
category: 'key'
|
|
2411
|
-
});
|
|
2412
|
-
const svgRef = useRef();
|
|
2413
|
-
const brushRef = useRef();
|
|
2414
|
-
const svgBrushRef = useRef();
|
|
2415
|
-
const {
|
|
2416
|
-
scaleX,
|
|
2417
|
-
scaleY,
|
|
2418
|
-
transform
|
|
2419
|
-
} = useZoom({
|
|
2420
|
-
svgRef,
|
|
2421
|
-
scaleX: extendedScaleX,
|
|
2422
|
-
scaleY: extendedScaleY,
|
|
2423
|
-
size,
|
|
2424
|
-
onZoom: () => {
|
|
2425
|
-
if (brushRef.current && svgBrushRef.current) {
|
|
2426
|
-
brushRef.current.clear(select(svgBrushRef.current));
|
|
2427
|
-
onBrushEnd === null || onBrushEnd === void 0 ? void 0 : onBrushEnd(null);
|
|
2428
|
-
}
|
|
2429
|
-
}
|
|
2430
|
-
});
|
|
2431
|
-
useBrush({
|
|
2432
|
-
brushRef,
|
|
2433
|
-
svgRef: svgBrushRef,
|
|
2434
|
-
extent: [[0, 0], [chartWidth, chartHeight]],
|
|
2435
|
-
scaleX,
|
|
2436
|
-
scaleY,
|
|
2437
|
-
isBrushable,
|
|
2438
|
-
isGridded: variant === ScatterPlotVariant.gridded,
|
|
2439
|
-
onBrush,
|
|
2440
|
-
onBrushEnd
|
|
2441
|
-
});
|
|
2442
|
-
const circles = variant === ScatterPlotVariant.gridded ? group(data, scaleX, scaleY).sort((a, b) => descending(a.points.length, b.points.length)) : data.map(d => ({
|
|
2443
|
-
category: d.key[2],
|
|
2444
|
-
x: d.key[0],
|
|
2445
|
-
y: d.key[1],
|
|
2446
|
-
data: {
|
|
2447
|
-
key: d.key,
|
|
2448
|
-
value: 1
|
|
2449
|
-
},
|
|
2450
|
-
points: [d]
|
|
2451
|
-
}));
|
|
2452
|
-
const globalSize = variant === ScatterPlotVariant.gridded ? scaleSqrt().domain([1, Math.max(max(circles, d => d.points.length), 1)]).range([3, minSize / BASE_NUMBER_OF_TICKS / 2]) : undefined;
|
|
2453
|
-
const legendWidth = useRef();
|
|
2454
|
-
if (countsByCategory && !legendWidth.current) {
|
|
2455
|
-
legendWidth.current = `${Math.max(...countsByCategory.map(d => d.key.length + String(d.value).length)) * 8 + 32}px`;
|
|
2456
|
-
}
|
|
2457
|
-
return /*#__PURE__*/React__default.createElement(StyledScatterPlot, _extends({}, forwardedProps, {
|
|
2458
|
-
id: id,
|
|
2459
|
-
className: className,
|
|
2460
|
-
ref: ref
|
|
2461
|
-
}), /*#__PURE__*/React__default.createElement("svg", {
|
|
2462
|
-
ref: svgRef,
|
|
2463
|
-
width: width,
|
|
2464
|
-
height: height
|
|
2465
|
-
}, /*#__PURE__*/React__default.createElement("g", {
|
|
2466
|
-
ref: svgBrushRef,
|
|
2467
|
-
transform: `translate(${margins.left},${margins.top})`
|
|
2468
|
-
}), /*#__PURE__*/React__default.createElement("g", {
|
|
2469
|
-
transform: `translate(${margins.left},${margins.top})`
|
|
2470
|
-
}, /*#__PURE__*/React__default.createElement("g", null, circles.map((circle, index) => {
|
|
2471
|
-
var _countsByCategory$fin;
|
|
2472
|
-
const scaleXDomain = scaleX.domain();
|
|
2473
|
-
const scaleYDomain = scaleY.domain();
|
|
2474
|
-
if (circle.x < scaleXDomain[0] || circle.x > scaleXDomain[1] || circle.y < scaleYDomain[0] || circle.y > scaleYDomain[1]) {
|
|
2475
|
-
return null;
|
|
2476
|
-
}
|
|
2477
|
-
const to = _objectSpread2(_objectSpread2({}, circle), {}, {
|
|
2478
|
-
data: _objectSpread2(_objectSpread2({}, circle.data), {}, {
|
|
2479
|
-
percent: circle.category ? circle.data.value / (countsByCategory === null || countsByCategory === void 0 ? void 0 : (_countsByCategory$fin = countsByCategory.find(_ref => {
|
|
2480
|
-
let {
|
|
2481
|
-
key
|
|
2482
|
-
} = _ref;
|
|
2483
|
-
return key === circle.category;
|
|
2484
|
-
})) === null || _countsByCategory$fin === void 0 ? void 0 : _countsByCategory$fin.value) : undefined
|
|
2485
|
-
}),
|
|
2486
|
-
r: variant === ScatterPlotVariant.gridded ? globalSize(circle.points.length) / (transform.k < 1 ? transform.k : 1) : 4
|
|
2487
|
-
});
|
|
2488
|
-
return /*#__PURE__*/React__default.createElement(Dot, {
|
|
2489
|
-
color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(circle.category),
|
|
2490
|
-
data: to,
|
|
2491
|
-
isSelected: Boolean(isDotSelected === null || isDotSelected === void 0 ? void 0 : isDotSelected(to)),
|
|
2492
|
-
key: `circle _${index}`,
|
|
2493
|
-
labelDecorator: labelDecorator,
|
|
2494
|
-
onClick: onDotClick,
|
|
2495
|
-
role: dotRole,
|
|
2496
|
-
scaleX: scaleX,
|
|
2497
|
-
scaleY: scaleY,
|
|
2498
|
-
tooltipVariant: tooltipVariant
|
|
2499
|
-
});
|
|
2500
|
-
}))), /*#__PURE__*/React__default.createElement("g", {
|
|
2501
|
-
transform: `translate(${margins.left},${margins.top})`
|
|
2502
|
-
}, /*#__PURE__*/React__default.createElement(Axis, {
|
|
2503
|
-
position: "left",
|
|
2504
|
-
length: chartHeight,
|
|
2505
|
-
scale: scaleY,
|
|
2506
|
-
x: 0,
|
|
2507
|
-
y: 0,
|
|
2508
|
-
tickValues: 8,
|
|
2509
|
-
variant: xAxisVariant
|
|
2510
|
-
}), /*#__PURE__*/React__default.createElement(Axis, {
|
|
2511
|
-
position: "bottom",
|
|
2512
|
-
length: chartWidth,
|
|
2513
|
-
scale: scaleX,
|
|
2514
|
-
x: 0,
|
|
2515
|
-
y: chartHeight,
|
|
2516
|
-
tickValues: 8,
|
|
2517
|
-
variant: yAxisVariant
|
|
2518
|
-
}))), hasCategory && labelVariant !== ScatterPlotLabelVariant.none ? /*#__PURE__*/React__default.createElement(Legend, _extends({
|
|
2519
|
-
data: countsByCategory.map(d => _objectSpread2(_objectSpread2({}, d), {}, {
|
|
2520
|
-
color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(d.key)
|
|
2521
|
-
})),
|
|
2522
|
-
variant: labelVariant === ScatterPlotLabelVariant.externalLabelValue ? LabelVariant.value : labelVariant === ScatterPlotLabelVariant.externalLabelPercent ? LabelVariant.percent : LabelVariant.label,
|
|
2523
|
-
width: legendWidth.current
|
|
2524
|
-
}, legendProps)) : null);
|
|
2525
|
-
});
|
|
2526
|
-
|
|
2527
|
-
const _excluded = ["className", "data", "dotRole", "emptyComponent", "id", "isDotSelected", "labelVariant", "localeText", "onBrush", "onBrushEnd", "onDotClick", "size", "theme", "tooltipVariant", "variant"];
|
|
2528
|
-
const COMPONENT_NAME = 'ScatterPlot';
|
|
2529
|
-
const CLASSNAME = 'redsift-scatterplot';
|
|
2530
|
-
const DEFAULT_PROPS = {
|
|
2531
|
-
labelVariant: ScatterPlotLabelVariant.externalLabel,
|
|
2532
|
-
localeText: {
|
|
2533
|
-
emptyChartText: 'No Data'
|
|
2534
|
-
},
|
|
2535
|
-
size: ChartSize.medium,
|
|
2536
|
-
theme: ColorTheme.default,
|
|
2537
|
-
tooltipVariant: TooltipVariant.none,
|
|
2538
|
-
variant: ScatterPlotVariant.default,
|
|
2539
|
-
xAxisVariant: AxisVariant.default,
|
|
2540
|
-
yAxisVariant: AxisVariant.default
|
|
2541
|
-
};
|
|
2542
|
-
const ScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
|
|
2543
|
-
const {
|
|
2544
|
-
className,
|
|
2545
|
-
data: propsData,
|
|
2546
|
-
dotRole,
|
|
2547
|
-
emptyComponent,
|
|
2548
|
-
id: propsId,
|
|
2549
|
-
isDotSelected,
|
|
2550
|
-
labelVariant,
|
|
2551
|
-
localeText,
|
|
2552
|
-
onBrush,
|
|
2553
|
-
onBrushEnd,
|
|
2554
|
-
onDotClick,
|
|
2555
|
-
size,
|
|
2556
|
-
theme,
|
|
2557
|
-
tooltipVariant,
|
|
2558
|
-
variant
|
|
2559
|
-
} = props,
|
|
2560
|
-
forwardedProps = _objectWithoutProperties(props, _excluded);
|
|
2561
|
-
const id = propsId !== null && propsId !== void 0 ? propsId : useId();
|
|
2562
|
-
|
|
2563
|
-
// console.log(propsData);
|
|
2564
|
-
|
|
2565
|
-
if (propsData === undefined || propsData === null) {
|
|
2566
|
-
return /*#__PURE__*/React__default.createElement(LoadingScatterPlot, _extends({
|
|
2567
|
-
id: id
|
|
2568
|
-
}, forwardedProps, {
|
|
2569
|
-
ref: ref
|
|
2570
|
-
}));
|
|
2571
|
-
}
|
|
2572
|
-
if (propsData.length === 0) {
|
|
2573
|
-
return /*#__PURE__*/React__default.createElement(EmptyScatterPlot, _extends({
|
|
2574
|
-
data: propsData,
|
|
2575
|
-
emptyComponent: emptyComponent,
|
|
2576
|
-
localeText: localeText,
|
|
2577
|
-
size: size
|
|
2578
|
-
}, forwardedProps, {
|
|
2579
|
-
ref: ref
|
|
2580
|
-
}));
|
|
2581
|
-
}
|
|
2582
|
-
return /*#__PURE__*/React__default.createElement(RenderedScatterPlot, _extends({
|
|
2583
|
-
className: classNames(ScatterPlot.className, className),
|
|
2584
|
-
data: propsData,
|
|
2585
|
-
dotRole: dotRole,
|
|
2586
|
-
id: id,
|
|
2587
|
-
isDotSelected: isDotSelected,
|
|
2588
|
-
labelVariant: labelVariant,
|
|
2589
|
-
localeText: localeText,
|
|
2590
|
-
onBrush: onBrush,
|
|
2591
|
-
onBrushEnd: onBrushEnd,
|
|
2592
|
-
onDotClick: onDotClick,
|
|
2593
|
-
size: size,
|
|
2594
|
-
theme: theme,
|
|
2595
|
-
tooltipVariant: tooltipVariant,
|
|
2596
|
-
variant: variant
|
|
2597
|
-
}, forwardedProps, {
|
|
2598
|
-
ref: ref
|
|
2599
|
-
}));
|
|
2600
|
-
});
|
|
2601
|
-
ScatterPlot.className = CLASSNAME;
|
|
2602
|
-
ScatterPlot.defaultProps = DEFAULT_PROPS;
|
|
2603
|
-
ScatterPlot.displayName = COMPONENT_NAME;
|
|
2604
|
-
|
|
2605
|
-
export { Arc, Arcs, Axis, AxisPosition, AxisVariant, Bar, BarChart, BarOrientation, ChartContainer, ChartSize, ColorTheme, DataPoint, Dot, LabelVariant, Legend, PieChart, PieChartLabelVariant, PieChartVariant, ScatterPlot, ScatterPlotLabelVariant, ScatterPlotVariant, StyledArc, StyledArcs, StyledAxis, StyledBar, StyledBarChart, StyledBarChartEmptyText, StyledChartContainer, StyledChartContainerCaption, StyledChartContainerTitle, StyledDataPoint, StyledDot, StyledLegend, StyledPieChart, StyledPieChartCenterText, StyledPieChartEmptyText, StyledScatterPlot, StyledScatterPlotEmptyText, TooltipVariant, empty, getColorScale, monochrome, scheme, successDangerScheme, useBrush, useColor, useFormatCategoricalData, useZoom };
|
|
2606
|
-
//# sourceMappingURL=index.js.map
|