@redsift/charts 11.6.0-muiv5-alpha.3 → 11.6.0-muiv5-alpha.5
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/_internal/Arc.js +10 -0
- package/_internal/Arc.js.map +1 -0
- package/{components/Arc/Arc.js → _internal/Arc2.js} +52 -9
- package/_internal/Arc2.js.map +1 -0
- package/_internal/Arcs.js +10 -0
- package/_internal/Arcs.js.map +1 -0
- package/{components/Arcs/Arcs.js → _internal/Arcs2.js} +12 -8
- package/_internal/Arcs2.js.map +1 -0
- package/_internal/Axis.js +8 -0
- package/_internal/Axis.js.map +1 -0
- package/{types/axis.d.ts → _internal/Axis2.js} +2 -2
- package/_internal/Axis2.js.map +1 -0
- package/_internal/Bar.js +10 -0
- package/_internal/Bar.js.map +1 -0
- package/{components/Bar/Bar.js → _internal/Bar2.js} +85 -10
- package/_internal/Bar2.js.map +1 -0
- package/_internal/BarChart.js +17 -0
- package/_internal/BarChart.js.map +1 -0
- package/_internal/BarChart2.js +1419 -0
- package/_internal/BarChart2.js.map +1 -0
- package/_internal/ChartContainer.js +5 -0
- package/_internal/ChartContainer.js.map +1 -0
- package/{components/ChartContainer/ChartContainer.js → _internal/ChartContainer2.js} +105 -6
- package/_internal/ChartContainer2.js.map +1 -0
- package/_internal/DataPoint.js +7 -0
- package/_internal/DataPoint.js.map +1 -0
- package/{components/DataPoint/DataPoint.js → _internal/DataPoint2.js} +11 -5
- package/_internal/DataPoint2.js.map +1 -0
- package/_internal/Dot.js +10 -0
- package/_internal/Dot.js.map +1 -0
- package/{components/Dot/Dot.js → _internal/Dot2.js} +61 -6
- package/_internal/Dot2.js.map +1 -0
- package/_internal/Legend.js +10 -0
- package/_internal/Legend.js.map +1 -0
- package/{components/Legend/Legend.js → _internal/Legend3.js} +17 -6
- package/_internal/Legend3.js.map +1 -0
- package/_internal/LegendItem.js +21 -0
- package/_internal/LegendItem.js.map +1 -0
- package/{components/LegendItem/LegendItem.js → _internal/LegendItem2.js} +64 -7
- package/_internal/LegendItem2.js.map +1 -0
- package/_internal/Line.js +10 -0
- package/_internal/Line.js.map +1 -0
- package/{components/Line/Line.js → _internal/Line2.js} +12 -8
- package/_internal/Line2.js.map +1 -0
- package/_internal/LineChart.js +17 -0
- package/_internal/LineChart.js.map +1 -0
- package/{components/LineChart/RenderedLineChart.js → _internal/LineChart2.js} +317 -20
- package/_internal/LineChart2.js.map +1 -0
- package/_internal/PieChart.js +14 -0
- package/_internal/PieChart.js.map +1 -0
- package/_internal/PieChart2.js +605 -0
- package/_internal/PieChart2.js.map +1 -0
- package/_internal/ScatterPlot.js +17 -0
- package/_internal/ScatterPlot.js.map +1 -0
- package/_internal/ScatterPlot2.js +743 -0
- package/_internal/ScatterPlot2.js.map +1 -0
- package/{_virtual → _internal}/_rollupPluginBabelHelpers.js +1 -1
- package/_internal/config.js +13 -0
- package/_internal/config.js.map +1 -0
- package/{types/data.d.ts → _internal/data.js} +1 -1
- package/{types/legend.js → _internal/legend2.js} +2 -2
- package/_internal/legend2.js.map +1 -0
- package/{components/Axis/types.d.ts → _internal/scale.js} +47 -2
- package/{scheme.js → _internal/scheme.js} +1 -1
- package/_internal/scheme.js.map +1 -0
- package/{components/Arc/styles.d.ts → _internal/styles.js} +7 -5
- package/{components/Line/types.d.ts → _internal/styles10.js} +14 -5
- package/{components/LineChart/types.d.ts → _internal/styles11.js} +23 -12
- package/{components/PieChart/types.d.ts → _internal/styles12.js} +29 -11
- package/{components/ScatterPlot/types.d.ts → _internal/styles13.js} +23 -12
- package/{components/Arcs/types.d.ts → _internal/styles2.js} +11 -2
- package/{components/Axis/styles.d.ts → _internal/styles3.js} +6 -3
- package/{components/Bar/styles.d.ts → _internal/styles4.js} +7 -5
- package/{components/BarChart/types.d.ts → _internal/styles5.js} +49 -14
- package/{components/ChartContainer/styles.d.ts → _internal/styles6.js} +8 -3
- package/{components/DataPoint/styles.d.ts → _internal/styles7.js} +5 -2
- package/{components/Dot/styles.d.ts → _internal/styles8.js} +7 -4
- package/{components/Legend/styles.d.ts → _internal/styles9.js} +5 -2
- package/{utils/index.js → _internal/theme.js} +37 -2
- package/_internal/theme.js.map +1 -0
- package/{components/Arc/types.d.ts → _internal/types.js} +3 -3
- package/{components/Bar/types.d.ts → _internal/types2.js} +3 -3
- package/{components/ChartContainer/types.d.ts → _internal/types3.js} +1 -1
- package/{components/DataPoint/types.d.ts → _internal/types4.js} +29 -3
- package/{components/Dot/types.d.ts → _internal/types5.js} +3 -3
- package/{components/Legend/types.d.ts → _internal/types6.js} +4 -4
- package/{components/LegendItem/types.d.ts → _internal/types7.js} +8 -4
- package/{hooks → _internal}/useFormatCategoricalData.js +3 -4
- package/{hooks → _internal}/useFormatCategoricalData.js.map +1 -1
- package/index.js +129 -43
- package/index.js.map +1 -1
- package/index2.js +49 -0
- package/index2.js.map +1 -0
- package/package.json +2 -2
- package/components/Arc/Arc.d.ts +0 -6
- package/components/Arc/Arc.js.map +0 -1
- package/components/Arc/styles.js +0 -49
- package/components/Arc/styles.js.map +0 -1
- package/components/Arcs/Arcs.d.ts +0 -6
- package/components/Arcs/Arcs.js.map +0 -1
- package/components/Arcs/styles.d.ts +0 -9
- package/components/Arcs/styles.js +0 -9
- package/components/Arcs/styles.js.map +0 -1
- package/components/Axis/Axis.d.ts +0 -7
- package/components/Axis/Axis.js +0 -211
- package/components/Axis/Axis.js.map +0 -1
- package/components/Axis/computeTicks.js +0 -117
- package/components/Axis/computeTicks.js.map +0 -1
- package/components/Axis/styles.js +0 -51
- package/components/Axis/styles.js.map +0 -1
- package/components/Axis/types.js +0 -24
- package/components/Axis/types.js.map +0 -1
- package/components/Bar/Bar.d.ts +0 -6
- package/components/Bar/Bar.js.map +0 -1
- package/components/Bar/styles.js +0 -66
- package/components/Bar/styles.js.map +0 -1
- package/components/Bar/types.js +0 -18
- package/components/Bar/types.js.map +0 -1
- package/components/BarChart/BarChart.d.ts +0 -29
- package/components/BarChart/BarChart.js +0 -141
- package/components/BarChart/BarChart.js.map +0 -1
- package/components/BarChart/BarChartBars.js +0 -168
- package/components/BarChart/BarChartBars.js.map +0 -1
- package/components/BarChart/BarChartSection.js +0 -139
- package/components/BarChart/BarChartSection.js.map +0 -1
- package/components/BarChart/EmptyBarChart.js +0 -57
- package/components/BarChart/EmptyBarChart.js.map +0 -1
- package/components/BarChart/LoadingBarChart.js +0 -18
- package/components/BarChart/LoadingBarChart.js.map +0 -1
- package/components/BarChart/RenderedLinearBarChart.js +0 -549
- package/components/BarChart/RenderedLinearBarChart.js.map +0 -1
- package/components/BarChart/RenderedOrdinalBarChart.js +0 -236
- package/components/BarChart/RenderedOrdinalBarChart.js.map +0 -1
- package/components/BarChart/context.js +0 -13
- package/components/BarChart/context.js.map +0 -1
- package/components/BarChart/intl/en-US.json.js +0 -17
- package/components/BarChart/intl/en-US.json.js.map +0 -1
- package/components/BarChart/intl/fr-FR.json.js +0 -17
- package/components/BarChart/intl/fr-FR.json.js.map +0 -1
- package/components/BarChart/intl/index.js +0 -10
- package/components/BarChart/intl/index.js.map +0 -1
- package/components/BarChart/styles.d.ts +0 -19
- package/components/BarChart/styles.js +0 -71
- package/components/BarChart/styles.js.map +0 -1
- package/components/BarChart/types.js +0 -17
- package/components/BarChart/types.js.map +0 -1
- package/components/BarChart/utils.js +0 -69
- package/components/BarChart/utils.js.map +0 -1
- package/components/ChartContainer/ChartContainer.d.ts +0 -9
- package/components/ChartContainer/ChartContainer.js.map +0 -1
- package/components/ChartContainer/context.js +0 -6
- package/components/ChartContainer/context.js.map +0 -1
- package/components/ChartContainer/intl/en-US.json.js +0 -14
- package/components/ChartContainer/intl/en-US.json.js.map +0 -1
- package/components/ChartContainer/intl/fr-FR.json.js +0 -14
- package/components/ChartContainer/intl/fr-FR.json.js.map +0 -1
- package/components/ChartContainer/intl/index.js +0 -10
- package/components/ChartContainer/intl/index.js.map +0 -1
- package/components/ChartContainer/styles.js +0 -76
- package/components/ChartContainer/styles.js.map +0 -1
- package/components/DataPoint/DataPoint.d.ts +0 -6
- package/components/DataPoint/DataPoint.js.map +0 -1
- package/components/DataPoint/styles.js +0 -10
- package/components/DataPoint/styles.js.map +0 -1
- package/components/Dot/Dot.d.ts +0 -6
- package/components/Dot/Dot.js.map +0 -1
- package/components/Dot/styles.js +0 -49
- package/components/Dot/styles.js.map +0 -1
- package/components/Dot/types.js +0 -14
- package/components/Dot/types.js.map +0 -1
- package/components/Legend/Legend.d.ts +0 -6
- package/components/Legend/Legend.js.map +0 -1
- package/components/Legend/styles.js +0 -15
- package/components/Legend/styles.js.map +0 -1
- package/components/LegendItem/LegendItem.js.map +0 -1
- package/components/LegendItem/styles.js +0 -63
- package/components/LegendItem/styles.js.map +0 -1
- package/components/Line/Line.d.ts +0 -6
- package/components/Line/Line.js.map +0 -1
- package/components/Line/styles.d.ts +0 -9
- package/components/Line/styles.js +0 -9
- package/components/Line/styles.js.map +0 -1
- package/components/LineChart/EmptyLineChart.js +0 -58
- package/components/LineChart/EmptyLineChart.js.map +0 -1
- package/components/LineChart/LineChart.d.ts +0 -6
- package/components/LineChart/LineChart.js +0 -96
- package/components/LineChart/LineChart.js.map +0 -1
- package/components/LineChart/LoadingLineChart.js +0 -18
- package/components/LineChart/LoadingLineChart.js.map +0 -1
- package/components/LineChart/RenderedLineChart.js.map +0 -1
- package/components/LineChart/intl/en-US.json.js +0 -17
- package/components/LineChart/intl/en-US.json.js.map +0 -1
- package/components/LineChart/intl/fr-FR.json.js +0 -17
- package/components/LineChart/intl/fr-FR.json.js.map +0 -1
- package/components/LineChart/intl/index.js +0 -10
- package/components/LineChart/intl/index.js.map +0 -1
- package/components/LineChart/styles.d.ts +0 -17
- package/components/LineChart/styles.js +0 -53
- package/components/LineChart/styles.js.map +0 -1
- package/components/LineChart/types.js +0 -17
- package/components/LineChart/types.js.map +0 -1
- package/components/LineChart/utils.js +0 -67
- package/components/LineChart/utils.js.map +0 -1
- package/components/PieChart/EmptyPieChart.js +0 -85
- package/components/PieChart/EmptyPieChart.js.map +0 -1
- package/components/PieChart/LoadingPieChart.js +0 -18
- package/components/PieChart/LoadingPieChart.js.map +0 -1
- package/components/PieChart/PieChart.d.ts +0 -6
- package/components/PieChart/PieChart.js +0 -98
- package/components/PieChart/PieChart.js.map +0 -1
- package/components/PieChart/RenderedPieChart.js +0 -198
- package/components/PieChart/RenderedPieChart.js.map +0 -1
- package/components/PieChart/intl/en-US.json.js +0 -9
- package/components/PieChart/intl/en-US.json.js.map +0 -1
- package/components/PieChart/intl/fr-FR.json.js +0 -9
- package/components/PieChart/intl/fr-FR.json.js.map +0 -1
- package/components/PieChart/intl/index.js +0 -10
- package/components/PieChart/intl/index.js.map +0 -1
- package/components/PieChart/styles.d.ts +0 -24
- package/components/PieChart/styles.js +0 -168
- package/components/PieChart/styles.js.map +0 -1
- package/components/PieChart/types.js +0 -27
- package/components/PieChart/types.js.map +0 -1
- package/components/PieChart/utils.js +0 -37
- package/components/PieChart/utils.js.map +0 -1
- package/components/ScatterPlot/EmptyScatterPlot.js +0 -58
- package/components/ScatterPlot/EmptyScatterPlot.js.map +0 -1
- package/components/ScatterPlot/LoadingScatterPlot.js +0 -18
- package/components/ScatterPlot/LoadingScatterPlot.js.map +0 -1
- package/components/ScatterPlot/RenderedScatterPlot.js +0 -352
- package/components/ScatterPlot/RenderedScatterPlot.js.map +0 -1
- package/components/ScatterPlot/ScatterPlot.d.ts +0 -6
- package/components/ScatterPlot/ScatterPlot.js +0 -105
- package/components/ScatterPlot/ScatterPlot.js.map +0 -1
- package/components/ScatterPlot/intl/en-US.json.js +0 -12
- package/components/ScatterPlot/intl/en-US.json.js.map +0 -1
- package/components/ScatterPlot/intl/fr-FR.json.js +0 -17
- package/components/ScatterPlot/intl/fr-FR.json.js.map +0 -1
- package/components/ScatterPlot/intl/index.js +0 -10
- package/components/ScatterPlot/intl/index.js.map +0 -1
- package/components/ScatterPlot/styles.d.ts +0 -17
- package/components/ScatterPlot/styles.js +0 -53
- package/components/ScatterPlot/styles.js.map +0 -1
- package/components/ScatterPlot/types.js +0 -24
- package/components/ScatterPlot/types.js.map +0 -1
- package/components/ScatterPlot/utils.js +0 -70
- package/components/ScatterPlot/utils.js.map +0 -1
- package/config.js +0 -15
- package/config.js.map +0 -1
- package/design-system/src/react-aria/react-aria/i18n/useMessageFormatter.d.ts +0 -5
- package/hooks/useBrush.d.ts +0 -17
- package/hooks/useBrush.js +0 -48
- package/hooks/useBrush.js.map +0 -1
- package/hooks/useColor.d.ts +0 -18
- package/hooks/useColor.js +0 -20
- package/hooks/useColor.js.map +0 -1
- package/hooks/useFormatCategoricalData.d.ts +0 -26
- package/hooks/useZoom.d.ts +0 -26
- package/hooks/useZoom.js +0 -39
- package/hooks/useZoom.js.map +0 -1
- package/index.d.ts +0 -51
- package/scheme.d.ts +0 -32
- package/scheme.js.map +0 -1
- package/types/legend.d.ts +0 -30
- package/types/legend.js.map +0 -1
- package/types/scale.d.ts +0 -48
- package/types/size.d.ts +0 -20
- package/types/size.js +0 -8
- package/types/size.js.map +0 -1
- package/types/theme.d.ts +0 -23
- package/types/theme.js +0 -13
- package/types/theme.js.map +0 -1
- package/utils/index.d.ts +0 -11
- package/utils/index.js.map +0 -1
- /package/{_virtual → _internal}/_rollupPluginBabelHelpers.js.map +0 -0
package/components/Axis/Axis.js
DELETED
|
@@ -1,211 +0,0 @@
|
|
|
1
|
-
import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
-
import React__default, { forwardRef, useRef } from 'react';
|
|
3
|
-
import classNames from 'classnames';
|
|
4
|
-
import { useTheme } from '@redsift/design-system';
|
|
5
|
-
import { AxisPosition, AxisVariant } from './types.js';
|
|
6
|
-
import { StyledAxis } from './styles.js';
|
|
7
|
-
import { a as it } from '../../node_modules/@react-spring/web/dist/esm/index.js';
|
|
8
|
-
import { computeTicks } from './computeTicks.js';
|
|
9
|
-
import { config } from '../../config.js';
|
|
10
|
-
import { useSpring as J, useTransition as Gt } from '../../node_modules/@react-spring/core/dist/esm/index.js';
|
|
11
|
-
|
|
12
|
-
const _excluded = ["className", "disableAnimations", "grid", "length", "legend", "legendOffset", "legendPosition", "legendX", "legendY", "legendRotation", "legendStyle", "position", "scale", "tickPadding", "tickRotation", "tickSize", "tickValues", "tickFormat", "tickRemodelling", "variant", "x", "y", "chartWidth", "chartHeight", "sectionHeight", "textColor", "tickToColor"],
|
|
13
|
-
_excluded2 = ["length"];
|
|
14
|
-
const COMPONENT_NAME = 'Axis';
|
|
15
|
-
const CLASSNAME = 'redsift-axis';
|
|
16
|
-
const getAxisType = position => [AxisPosition.top, AxisPosition.bottom].includes(position) ? 'x' : 'y';
|
|
17
|
-
const Axis = /*#__PURE__*/forwardRef((props, ref) => {
|
|
18
|
-
const {
|
|
19
|
-
className,
|
|
20
|
-
disableAnimations,
|
|
21
|
-
grid,
|
|
22
|
-
length,
|
|
23
|
-
legend,
|
|
24
|
-
legendOffset = -32,
|
|
25
|
-
legendPosition = 'end',
|
|
26
|
-
legendX: propsLegendX,
|
|
27
|
-
legendY: propsLegendY,
|
|
28
|
-
legendRotation: propsLegendRotation,
|
|
29
|
-
legendStyle,
|
|
30
|
-
position = AxisPosition.bottom,
|
|
31
|
-
scale,
|
|
32
|
-
tickPadding = 5,
|
|
33
|
-
tickRotation = 0,
|
|
34
|
-
tickSize = 5,
|
|
35
|
-
tickValues,
|
|
36
|
-
tickFormat,
|
|
37
|
-
tickRemodelling,
|
|
38
|
-
variant = AxisVariant.default,
|
|
39
|
-
x = 0,
|
|
40
|
-
y = 0,
|
|
41
|
-
chartWidth,
|
|
42
|
-
chartHeight,
|
|
43
|
-
sectionHeight,
|
|
44
|
-
textColor,
|
|
45
|
-
tickToColor = () => true
|
|
46
|
-
} = props,
|
|
47
|
-
forwardedProps = _objectWithoutProperties(props, _excluded);
|
|
48
|
-
const theme = useTheme();
|
|
49
|
-
const axis = getAxisType(position);
|
|
50
|
-
const _ref = typeof grid === 'object' ? _objectSpread2({
|
|
51
|
-
length: axis === 'x' ? sectionHeight !== null && sectionHeight !== void 0 ? sectionHeight : chartHeight : chartWidth
|
|
52
|
-
}, grid) : grid === true ? {
|
|
53
|
-
length: axis === 'x' ? sectionHeight !== null && sectionHeight !== void 0 ? sectionHeight : chartHeight : chartWidth
|
|
54
|
-
} : {
|
|
55
|
-
length: 0
|
|
56
|
-
},
|
|
57
|
-
{
|
|
58
|
-
length: gridLength
|
|
59
|
-
} = _ref,
|
|
60
|
-
gridStyle = _objectWithoutProperties(_ref, _excluded2);
|
|
61
|
-
const axisRef = ref || useRef();
|
|
62
|
-
const animatedProps = J(_objectSpread2(_objectSpread2({}, config), {}, {
|
|
63
|
-
to: async next => {
|
|
64
|
-
await next({
|
|
65
|
-
lineX2: axis === 'x' ? length : 0,
|
|
66
|
-
lineY2: axis === 'x' ? 0 : length
|
|
67
|
-
});
|
|
68
|
-
},
|
|
69
|
-
from: {
|
|
70
|
-
lineX2: 0,
|
|
71
|
-
lineY2: 0
|
|
72
|
-
},
|
|
73
|
-
reset: false
|
|
74
|
-
}));
|
|
75
|
-
let legendNode = null;
|
|
76
|
-
if (legend !== undefined) {
|
|
77
|
-
let legendX = 0;
|
|
78
|
-
let legendY = 0;
|
|
79
|
-
let legendRotation = 0;
|
|
80
|
-
let textAnchor;
|
|
81
|
-
if (axis === 'y') {
|
|
82
|
-
legendRotation = propsLegendRotation !== null && propsLegendRotation !== void 0 ? propsLegendRotation : 90;
|
|
83
|
-
legendX = propsLegendX !== null && propsLegendX !== void 0 ? propsLegendX : legendOffset;
|
|
84
|
-
if (legendPosition === 'start') {
|
|
85
|
-
textAnchor = 'start';
|
|
86
|
-
legendY = propsLegendY !== null && propsLegendY !== void 0 ? propsLegendY : length;
|
|
87
|
-
} else if (legendPosition === 'middle') {
|
|
88
|
-
textAnchor = 'middle';
|
|
89
|
-
legendY = propsLegendY !== null && propsLegendY !== void 0 ? propsLegendY : length / 2;
|
|
90
|
-
} else if (legendPosition === 'end') {
|
|
91
|
-
textAnchor = 'end';
|
|
92
|
-
legendY = propsLegendY !== null && propsLegendY !== void 0 ? propsLegendY : legendY;
|
|
93
|
-
}
|
|
94
|
-
} else {
|
|
95
|
-
legendY = propsLegendY !== null && propsLegendY !== void 0 ? propsLegendY : legendOffset;
|
|
96
|
-
if (legendPosition === 'start') {
|
|
97
|
-
textAnchor = 'start';
|
|
98
|
-
legendX = propsLegendX !== null && propsLegendX !== void 0 ? propsLegendX : legendX;
|
|
99
|
-
} else if (legendPosition === 'middle') {
|
|
100
|
-
textAnchor = 'middle';
|
|
101
|
-
legendX = propsLegendX !== null && propsLegendX !== void 0 ? propsLegendX : length / 2;
|
|
102
|
-
} else if (legendPosition === 'end') {
|
|
103
|
-
textAnchor = 'end';
|
|
104
|
-
legendX = propsLegendX !== null && propsLegendX !== void 0 ? propsLegendX : length;
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
legendNode = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("text", {
|
|
108
|
-
transform: `translate(${legendX}, ${legendY}) rotate(${legendRotation})`,
|
|
109
|
-
textAnchor: textAnchor,
|
|
110
|
-
style: _objectSpread2({
|
|
111
|
-
dominantBaseline: 'central'
|
|
112
|
-
}, legendStyle)
|
|
113
|
-
}, legend));
|
|
114
|
-
}
|
|
115
|
-
const {
|
|
116
|
-
ticks,
|
|
117
|
-
textAlign,
|
|
118
|
-
textBaseline
|
|
119
|
-
} = computeTicks({
|
|
120
|
-
axis,
|
|
121
|
-
scale: scale,
|
|
122
|
-
ticksPosition: [AxisPosition.top, AxisPosition.left].includes(position) ? 'before' : 'after',
|
|
123
|
-
tickValues,
|
|
124
|
-
tickSize: tickSize,
|
|
125
|
-
tickPadding: tickPadding,
|
|
126
|
-
tickRotation: tickRotation,
|
|
127
|
-
tickRemodelling
|
|
128
|
-
});
|
|
129
|
-
const transition = Gt(ticks, _objectSpread2(_objectSpread2({}, config), {}, {
|
|
130
|
-
keys: tick => tick.key,
|
|
131
|
-
initial: tick => ({
|
|
132
|
-
opacity: 1,
|
|
133
|
-
transform: `translate(${tick.x},${axis === 'x' ? tick.y : (y || 0) - tick.y}),rotate(${axis === 'x' ? 0 : 180})`,
|
|
134
|
-
textTransform: `translate(${tick.textX},${tick.textY}),rotate(${tickRotation})`
|
|
135
|
-
}),
|
|
136
|
-
from: tick => ({
|
|
137
|
-
opacity: 0,
|
|
138
|
-
transform: `translate(${tick.x},${axis === 'x' ? tick.y : (y || 0) - tick.y}),rotate(${axis === 'x' ? 0 : 180})`,
|
|
139
|
-
textTransform: `translate(${tick.textX},${tick.textY}),rotate(${tickRotation})`
|
|
140
|
-
}),
|
|
141
|
-
enter: tick => ({
|
|
142
|
-
opacity: 1,
|
|
143
|
-
transform: `translate(${tick.x},${axis === 'x' ? tick.y : (y || 0) - tick.y}),rotate(${axis === 'x' ? 0 : 180})`,
|
|
144
|
-
textTransform: `translate(${tick.textX},${tick.textY}),rotate(${tickRotation})`
|
|
145
|
-
}),
|
|
146
|
-
update: tick => ({
|
|
147
|
-
opacity: 1,
|
|
148
|
-
transform: `translate(${tick.x},${axis === 'x' ? tick.y : (y || 0) - tick.y}),rotate(${axis === 'x' ? 0 : 180})`,
|
|
149
|
-
textTransform: `translate(${tick.textX},${tick.textY}),rotate(${tickRotation})`
|
|
150
|
-
}),
|
|
151
|
-
leave: {
|
|
152
|
-
opacity: 0
|
|
153
|
-
}
|
|
154
|
-
}));
|
|
155
|
-
return /*#__PURE__*/React__default.createElement(StyledAxis, _extends({
|
|
156
|
-
"aria-hidden": "true",
|
|
157
|
-
className: classNames(Axis.className, className),
|
|
158
|
-
$theme: theme
|
|
159
|
-
}, forwardedProps, {
|
|
160
|
-
transform: `translate(${x},${y})${axis === 'x' ? '' : ',rotate(180)'}`,
|
|
161
|
-
ref: axisRef,
|
|
162
|
-
$color: textColor
|
|
163
|
-
}), gridLength ? /*#__PURE__*/React__default.createElement("g", {
|
|
164
|
-
className: `${Axis.className}__grid`
|
|
165
|
-
}, ticks.map((tick, i) => /*#__PURE__*/React__default.createElement("line", {
|
|
166
|
-
key: `grid-${tick.key}-${i}`,
|
|
167
|
-
className: `${Axis.className}-grid__line`,
|
|
168
|
-
x1: axis === 'x' ? tick.x : 0,
|
|
169
|
-
x2: axis === 'x' ? tick.x : gridLength * -1,
|
|
170
|
-
y1: axis === 'x' ? 0 : tick.y,
|
|
171
|
-
y2: axis === 'x' ? gridLength * -1 : tick.y,
|
|
172
|
-
style: _objectSpread2(_objectSpread2({
|
|
173
|
-
strokeDasharray: '4,4',
|
|
174
|
-
opacity: 0.2,
|
|
175
|
-
strokeWidth: 0.5
|
|
176
|
-
}, gridStyle), {}, {
|
|
177
|
-
stroke: 'currentColor'
|
|
178
|
-
})
|
|
179
|
-
}))) : null, variant === AxisVariant.default || variant === AxisVariant.tick || variant === AxisVariant.lineTick || variant === AxisVariant.tickValue ? transition((transitionProps, tick, _state, tickIndex) => {
|
|
180
|
-
return /*#__PURE__*/React__default.createElement(it.g, {
|
|
181
|
-
className: `${Axis.className}__tick`,
|
|
182
|
-
key: tickIndex,
|
|
183
|
-
transform: transitionProps.transform,
|
|
184
|
-
style: {
|
|
185
|
-
opacity: transitionProps.opacity
|
|
186
|
-
}
|
|
187
|
-
}, /*#__PURE__*/React__default.createElement("line", {
|
|
188
|
-
className: `${Axis.className}-tick__line`,
|
|
189
|
-
x1: 0,
|
|
190
|
-
x2: tick.lineX,
|
|
191
|
-
y1: 0,
|
|
192
|
-
y2: tick.lineY
|
|
193
|
-
}), variant === AxisVariant.default || variant === AxisVariant.tickValue ? /*#__PURE__*/React__default.createElement(it.text, {
|
|
194
|
-
dominantBaseline: textBaseline,
|
|
195
|
-
textAnchor: textAlign,
|
|
196
|
-
transform: transitionProps.textTransform,
|
|
197
|
-
className: !textColor ? '' : tickToColor(tick, tickIndex) ? 'colored' : ''
|
|
198
|
-
}, `${tickFormat ? tickFormat(tick.value) : tick.value}`) : null);
|
|
199
|
-
}) : null, variant === AxisVariant.default || variant === AxisVariant.line || variant === AxisVariant.lineTick ? /*#__PURE__*/React__default.createElement(it.line, {
|
|
200
|
-
className: `${Axis.className}__line`,
|
|
201
|
-
x1: 0,
|
|
202
|
-
x2: config.immediate || disableAnimations ? axis === 'x' ? length : 0 : animatedProps.lineX2,
|
|
203
|
-
y1: 0,
|
|
204
|
-
y2: config.immediate || disableAnimations ? axis === 'x' ? 0 : length : animatedProps.lineY2
|
|
205
|
-
}) : null, legendNode);
|
|
206
|
-
});
|
|
207
|
-
Axis.className = CLASSNAME;
|
|
208
|
-
Axis.displayName = COMPONENT_NAME;
|
|
209
|
-
|
|
210
|
-
export { Axis, getAxisType };
|
|
211
|
-
//# sourceMappingURL=Axis.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Axis.js","sources":["../../../src/components/Axis/Axis.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useRef } from 'react';\nimport classNames from 'classnames';\n\nimport { Comp, useTheme } from '@redsift/design-system';\n\nimport { AxisProps, AxisPosition, AxisVariant } from './types';\nimport { StyledAxis } from './styles';\nimport { animated, useSpring, useTransition } from '@react-spring/web';\nimport { computeTicks } from './computeTicks';\nimport { config } from '../../config';\nimport { AnyScale } from '@redsift/charts/types';\n\nconst COMPONENT_NAME = 'Axis';\nconst CLASSNAME = 'redsift-axis';\n\nexport const getAxisType = (position: AxisPosition) =>\n [AxisPosition.top, AxisPosition.bottom].includes(position) ? 'x' : 'y';\n\nexport const Axis: Comp<AxisProps, SVGGElement> = forwardRef((props, ref) => {\n const {\n className,\n disableAnimations,\n grid,\n length,\n legend,\n legendOffset = -32,\n legendPosition = 'end',\n legendX: propsLegendX,\n legendY: propsLegendY,\n legendRotation: propsLegendRotation,\n legendStyle,\n position = AxisPosition.bottom,\n scale,\n tickPadding = 5,\n tickRotation = 0,\n tickSize = 5,\n tickValues,\n tickFormat,\n tickRemodelling,\n variant = AxisVariant.default,\n x = 0,\n y = 0,\n chartWidth,\n chartHeight,\n sectionHeight,\n textColor,\n tickToColor = () => true,\n ...forwardedProps\n } = props;\n const theme = useTheme();\n const axis = getAxisType(position!);\n const { length: gridLength, ...gridStyle } =\n typeof grid === 'object'\n ? { length: axis === 'x' ? sectionHeight ?? chartHeight : chartWidth, ...grid }\n : grid === true\n ? {\n length: axis === 'x' ? sectionHeight ?? chartHeight : chartWidth,\n }\n : { length: 0 };\n\n const axisRef = (ref || useRef<SVGGElement>()) as RefObject<SVGGElement>;\n\n const animatedProps = useSpring({\n ...config,\n to: async (next: (props?: object) => Promise<void>) => {\n await next({\n lineX2: axis === 'x' ? length : 0,\n lineY2: axis === 'x' ? 0 : length,\n });\n },\n from: { lineX2: 0, lineY2: 0 },\n reset: false,\n });\n\n let legendNode = null;\n if (legend !== undefined) {\n let legendX = 0;\n let legendY = 0;\n let legendRotation = 0;\n let textAnchor;\n\n if (axis === 'y') {\n legendRotation = propsLegendRotation ?? 90;\n legendX = propsLegendX ?? legendOffset!;\n if (legendPosition === 'start') {\n textAnchor = 'start';\n legendY = propsLegendY ?? length!;\n } else if (legendPosition === 'middle') {\n textAnchor = 'middle';\n legendY = propsLegendY ?? length! / 2;\n } else if (legendPosition === 'end') {\n textAnchor = 'end';\n legendY = propsLegendY ?? legendY;\n }\n } else {\n legendY = propsLegendY ?? legendOffset!;\n if (legendPosition === 'start') {\n textAnchor = 'start';\n legendX = propsLegendX ?? legendX;\n } else if (legendPosition === 'middle') {\n textAnchor = 'middle';\n legendX = propsLegendX ?? length! / 2;\n } else if (legendPosition === 'end') {\n textAnchor = 'end';\n legendX = propsLegendX ?? length!;\n }\n }\n\n legendNode = (\n <>\n <text\n transform={`translate(${legendX}, ${legendY}) rotate(${legendRotation})`}\n textAnchor={textAnchor}\n style={{\n dominantBaseline: 'central',\n ...legendStyle,\n }}\n >\n {legend}\n </text>\n </>\n );\n }\n\n const { ticks, textAlign, textBaseline } = computeTicks({\n axis,\n scale: scale as AnyScale,\n ticksPosition: [AxisPosition.top, AxisPosition.left].includes(position!) ? 'before' : 'after',\n tickValues,\n tickSize: tickSize!,\n tickPadding: tickPadding!,\n tickRotation: tickRotation!,\n tickRemodelling,\n });\n\n const transition = useTransition<(typeof ticks)[0], { opacity: number; transform: string; textTransform: string }>(\n ticks,\n {\n ...config,\n keys: (tick) => tick.key,\n initial: (tick) => ({\n opacity: 1,\n transform: `translate(${tick.x},${axis === 'x' ? tick.y : (y || 0) - tick.y}),rotate(${\n axis === 'x' ? 0 : 180\n })`,\n textTransform: `translate(${tick.textX},${tick.textY}),rotate(${tickRotation})`,\n }),\n from: (tick) => ({\n opacity: 0,\n transform: `translate(${tick.x},${axis === 'x' ? tick.y : (y || 0) - tick.y}),rotate(${\n axis === 'x' ? 0 : 180\n })`,\n textTransform: `translate(${tick.textX},${tick.textY}),rotate(${tickRotation})`,\n }),\n enter: (tick) => ({\n opacity: 1,\n transform: `translate(${tick.x},${axis === 'x' ? tick.y : (y || 0) - tick.y}),rotate(${\n axis === 'x' ? 0 : 180\n })`,\n textTransform: `translate(${tick.textX},${tick.textY}),rotate(${tickRotation})`,\n }),\n update: (tick) => ({\n opacity: 1,\n transform: `translate(${tick.x},${axis === 'x' ? tick.y : (y || 0) - tick.y}),rotate(${\n axis === 'x' ? 0 : 180\n })`,\n textTransform: `translate(${tick.textX},${tick.textY}),rotate(${tickRotation})`,\n }),\n leave: {\n opacity: 0,\n },\n }\n );\n\n return (\n <StyledAxis\n aria-hidden=\"true\"\n className={classNames(Axis.className, className)}\n $theme={theme}\n {...forwardedProps}\n transform={`translate(${x},${y})${axis === 'x' ? '' : ',rotate(180)'}`}\n ref={axisRef}\n $color={textColor}\n >\n {gridLength ? (\n <g className={`${Axis.className}__grid`}>\n {ticks.map((tick, i) => (\n <line\n key={`grid-${tick.key}-${i}`}\n className={`${Axis.className}-grid__line`}\n x1={axis === 'x' ? tick.x : 0}\n x2={axis === 'x' ? tick.x : gridLength! * -1}\n y1={axis === 'x' ? 0 : tick.y}\n y2={axis === 'x' ? gridLength! * -1 : tick.y}\n style={{\n strokeDasharray: '4,4',\n opacity: 0.2,\n strokeWidth: 0.5,\n ...gridStyle,\n stroke: 'currentColor',\n }}\n />\n ))}\n </g>\n ) : null}\n\n {variant === AxisVariant.default ||\n variant === AxisVariant.tick ||\n variant === AxisVariant.lineTick ||\n variant === AxisVariant.tickValue\n ? transition((transitionProps, tick, _state, tickIndex) => {\n return (\n <animated.g\n className={`${Axis.className}__tick`}\n key={tickIndex}\n transform={transitionProps.transform}\n style={{ opacity: transitionProps.opacity }}\n >\n <line className={`${Axis.className}-tick__line`} x1={0} x2={tick.lineX} y1={0} y2={tick.lineY} />\n {variant === AxisVariant.default || variant === AxisVariant.tickValue ? (\n <animated.text\n dominantBaseline={textBaseline}\n textAnchor={textAlign}\n transform={transitionProps.textTransform}\n className={!textColor ? '' : tickToColor(tick, tickIndex) ? 'colored' : ''}\n >\n {`${tickFormat ? tickFormat(tick.value as any) : tick.value}`}\n </animated.text>\n ) : null}\n </animated.g>\n );\n })\n : null}\n\n {variant === AxisVariant.default || variant === AxisVariant.line || variant === AxisVariant.lineTick ? (\n <animated.line\n className={`${Axis.className}__line`}\n x1={0}\n x2={config.immediate || disableAnimations ? (axis === 'x' ? length : 0) : animatedProps.lineX2}\n y1={0}\n y2={config.immediate || disableAnimations ? (axis === 'x' ? 0 : length) : animatedProps.lineY2}\n />\n ) : null}\n {legendNode}\n </StyledAxis>\n );\n});\nAxis.className = CLASSNAME;\nAxis.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getAxisType","position","AxisPosition","top","bottom","includes","Axis","forwardRef","props","ref","className","disableAnimations","grid","length","legend","legendOffset","legendPosition","legendX","propsLegendX","legendY","propsLegendY","legendRotation","propsLegendRotation","legendStyle","scale","tickPadding","tickRotation","tickSize","tickValues","tickFormat","tickRemodelling","variant","AxisVariant","default","x","y","chartWidth","chartHeight","sectionHeight","textColor","tickToColor","forwardedProps","_objectWithoutProperties","_excluded","theme","useTheme","axis","_ref","_objectSpread","gridLength","gridStyle","_excluded2","axisRef","useRef","animatedProps","useSpring","config","to","next","lineX2","lineY2","from","reset","legendNode","undefined","textAnchor","React","createElement","Fragment","transform","style","dominantBaseline","ticks","textAlign","textBaseline","computeTicks","ticksPosition","left","transition","useTransition","keys","tick","key","initial","opacity","textTransform","textX","textY","enter","update","leave","StyledAxis","_extends","classNames","$theme","$color","map","i","x1","x2","y1","y2","strokeDasharray","strokeWidth","stroke","lineTick","tickValue","transitionProps","_state","tickIndex","animated","g","lineX","lineY","text","value","line","immediate","displayName"],"mappings":"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"}
|
|
@@ -1,117 +0,0 @@
|
|
|
1
|
-
import { objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
-
|
|
3
|
-
const getScaleTicks = (scale, spec) => {
|
|
4
|
-
// specific values
|
|
5
|
-
if (Array.isArray(spec)) {
|
|
6
|
-
return spec;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
// continuous scales
|
|
10
|
-
if ('ticks' in scale) {
|
|
11
|
-
// default behaviour
|
|
12
|
-
if (spec === undefined) {
|
|
13
|
-
return scale.ticks();
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
// specific tick count
|
|
17
|
-
if (typeof spec === 'number' && isFinite(spec) && Math.floor(spec) === spec) {
|
|
18
|
-
return scale.ticks(spec);
|
|
19
|
-
}
|
|
20
|
-
if (typeof spec === 'function') {
|
|
21
|
-
return scale.ticks();
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
// non linear scale default
|
|
26
|
-
return scale.domain();
|
|
27
|
-
};
|
|
28
|
-
const centerScale = scale => {
|
|
29
|
-
const bandwidth = scale.bandwidth();
|
|
30
|
-
if (bandwidth === 0) return scale;
|
|
31
|
-
let offset = bandwidth / 2;
|
|
32
|
-
if (scale.round()) {
|
|
33
|
-
offset = Math.round(offset);
|
|
34
|
-
}
|
|
35
|
-
return d => {
|
|
36
|
-
var _scale;
|
|
37
|
-
return ((_scale = scale(d)) !== null && _scale !== void 0 ? _scale : 0) + offset;
|
|
38
|
-
};
|
|
39
|
-
};
|
|
40
|
-
const computeTicks = _ref => {
|
|
41
|
-
let {
|
|
42
|
-
axis,
|
|
43
|
-
scale,
|
|
44
|
-
ticksPosition,
|
|
45
|
-
tickValues,
|
|
46
|
-
tickSize,
|
|
47
|
-
tickPadding,
|
|
48
|
-
tickRotation,
|
|
49
|
-
tickRemodelling
|
|
50
|
-
} = _ref;
|
|
51
|
-
const values = tickRemodelling ? tickRemodelling(getScaleTicks(scale, tickValues)) : getScaleTicks(scale, tickValues);
|
|
52
|
-
const position = 'bandwidth' in scale ? centerScale(scale) : scale;
|
|
53
|
-
const line = {
|
|
54
|
-
lineX: 0,
|
|
55
|
-
lineY: 0
|
|
56
|
-
};
|
|
57
|
-
const text = {
|
|
58
|
-
textX: 0,
|
|
59
|
-
textY: 0
|
|
60
|
-
};
|
|
61
|
-
const isRTL = typeof document === 'object' ? document.dir === 'rtl' : false;
|
|
62
|
-
let translate;
|
|
63
|
-
let textAlign = 'middle';
|
|
64
|
-
let textBaseline = 'central';
|
|
65
|
-
if (axis === 'x') {
|
|
66
|
-
translate = d => {
|
|
67
|
-
var _position;
|
|
68
|
-
return {
|
|
69
|
-
x: (_position = position(d)) !== null && _position !== void 0 ? _position : 0,
|
|
70
|
-
y: 0
|
|
71
|
-
};
|
|
72
|
-
};
|
|
73
|
-
line.lineY = tickSize * (ticksPosition === 'after' ? 1 : -1);
|
|
74
|
-
text.textY = (tickSize + tickPadding) * (ticksPosition === 'after' ? 1 : -1);
|
|
75
|
-
if (ticksPosition === 'after') {
|
|
76
|
-
textBaseline = 'text-before-edge';
|
|
77
|
-
} else {
|
|
78
|
-
textBaseline = 'alphabetic';
|
|
79
|
-
}
|
|
80
|
-
if (tickRotation === 0) {
|
|
81
|
-
textAlign = 'middle';
|
|
82
|
-
} else if (ticksPosition === 'after' && tickRotation < 0 || ticksPosition === 'before' && tickRotation > 0) {
|
|
83
|
-
textAlign = isRTL ? 'start' : 'end';
|
|
84
|
-
textBaseline = 'middle';
|
|
85
|
-
} else if (ticksPosition === 'after' && tickRotation > 0 || ticksPosition === 'before' && tickRotation < 0) {
|
|
86
|
-
textAlign = isRTL ? 'end' : 'start';
|
|
87
|
-
textBaseline = 'middle';
|
|
88
|
-
}
|
|
89
|
-
} else {
|
|
90
|
-
translate = d => {
|
|
91
|
-
var _position2;
|
|
92
|
-
return {
|
|
93
|
-
x: 0,
|
|
94
|
-
y: (_position2 = position(d)) !== null && _position2 !== void 0 ? _position2 : 0
|
|
95
|
-
};
|
|
96
|
-
};
|
|
97
|
-
line.lineX = tickSize * (ticksPosition === 'after' ? 1 : -1);
|
|
98
|
-
text.textX = (tickSize + tickPadding) * (ticksPosition === 'after' ? 1 : -1);
|
|
99
|
-
if (ticksPosition === 'after') {
|
|
100
|
-
textAlign = 'start';
|
|
101
|
-
} else {
|
|
102
|
-
textAlign = 'end';
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
const ticks = values.map(value => _objectSpread2(_objectSpread2(_objectSpread2({
|
|
106
|
-
key: value instanceof Date ? `${value.valueOf()}` : `${value}`,
|
|
107
|
-
value
|
|
108
|
-
}, translate(value)), line), text));
|
|
109
|
-
return {
|
|
110
|
-
ticks,
|
|
111
|
-
textAlign,
|
|
112
|
-
textBaseline
|
|
113
|
-
};
|
|
114
|
-
};
|
|
115
|
-
|
|
116
|
-
export { centerScale, computeTicks };
|
|
117
|
-
//# sourceMappingURL=computeTicks.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"computeTicks.js","sources":["../../../src/components/Axis/computeTicks.ts"],"sourcesContent":["import { AnyScale, Coordinates, ScaleValue, ScaleWithBandwidth, TicksSpec } from '../../types';\n\nconst getScaleTicks = (scale: AnyScale, spec?: TicksSpec) => {\n // specific values\n if (Array.isArray(spec)) {\n return spec;\n }\n\n // continuous scales\n if ('ticks' in scale) {\n // default behaviour\n if (spec === undefined) {\n return scale.ticks();\n }\n\n // specific tick count\n if (typeof spec === 'number' && isFinite(spec) && Math.floor(spec) === spec) {\n return scale.ticks(spec);\n }\n\n if (typeof spec === 'function') {\n return scale.ticks();\n }\n }\n\n // non linear scale default\n return scale.domain();\n};\n\nexport const centerScale = (scale: ScaleWithBandwidth) => {\n const bandwidth = scale.bandwidth();\n\n if (bandwidth === 0) return scale;\n\n let offset = bandwidth / 2;\n if (scale.round()) {\n offset = Math.round(offset);\n }\n\n return <T extends ScaleValue>(d: T) => (scale(d) ?? 0) + offset;\n};\n\nexport const computeTicks = ({\n axis,\n scale,\n ticksPosition,\n tickValues,\n tickSize,\n tickPadding,\n tickRotation,\n tickRemodelling,\n}: {\n axis: 'x' | 'y';\n scale: AnyScale;\n ticksPosition?: 'after' | 'before';\n tickValues?: TicksSpec;\n tickSize: number;\n tickPadding: number;\n tickRotation: number;\n tickRemodelling?: (tickValues: any[]) => any[];\n}) => {\n const values = tickRemodelling ? tickRemodelling(getScaleTicks(scale, tickValues)) : getScaleTicks(scale, tickValues);\n\n const position = 'bandwidth' in scale ? centerScale(scale) : scale;\n const line = { lineX: 0, lineY: 0 };\n const text = { textX: 0, textY: 0 };\n\n const isRTL = typeof document === 'object' ? document.dir === 'rtl' : false;\n let translate: (value: ScaleValue) => Coordinates;\n let textAlign = 'middle';\n let textBaseline = 'central';\n\n if (axis === 'x') {\n translate = (d) => ({ x: position(d) ?? 0, y: 0 });\n\n line.lineY = tickSize * (ticksPosition === 'after' ? 1 : -1);\n text.textY = (tickSize + tickPadding) * (ticksPosition === 'after' ? 1 : -1);\n\n if (ticksPosition === 'after') {\n textBaseline = 'text-before-edge';\n } else {\n textBaseline = 'alphabetic';\n }\n\n if (tickRotation === 0) {\n textAlign = 'middle';\n } else if ((ticksPosition === 'after' && tickRotation < 0) || (ticksPosition === 'before' && tickRotation > 0)) {\n textAlign = isRTL ? 'start' : 'end';\n textBaseline = 'middle';\n } else if ((ticksPosition === 'after' && tickRotation > 0) || (ticksPosition === 'before' && tickRotation < 0)) {\n textAlign = isRTL ? 'end' : 'start';\n textBaseline = 'middle';\n }\n } else {\n translate = (d) => ({ x: 0, y: position(d) ?? 0 });\n\n line.lineX = tickSize * (ticksPosition === 'after' ? 1 : -1);\n text.textX = (tickSize + tickPadding) * (ticksPosition === 'after' ? 1 : -1);\n\n if (ticksPosition === 'after') {\n textAlign = 'start';\n } else {\n textAlign = 'end';\n }\n }\n\n const ticks = values.map((value: ScaleValue) => ({\n key: value instanceof Date ? `${value.valueOf()}` : `${value}`,\n value,\n ...translate(value),\n ...line,\n ...text,\n }));\n\n return {\n ticks,\n textAlign,\n textBaseline,\n };\n};\n"],"names":["getScaleTicks","scale","spec","Array","isArray","undefined","ticks","isFinite","Math","floor","domain","centerScale","bandwidth","offset","round","d","_scale","computeTicks","_ref","axis","ticksPosition","tickValues","tickSize","tickPadding","tickRotation","tickRemodelling","values","position","line","lineX","lineY","text","textX","textY","isRTL","document","dir","translate","textAlign","textBaseline","_position","x","y","_position2","map","value","_objectSpread","key","Date","valueOf"],"mappings":";;AAEA,MAAMA,aAAa,GAAGA,CAACC,KAAe,EAAEC,IAAgB,KAAK;AAC3D;AACA,EAAA,IAAIC,KAAK,CAACC,OAAO,CAACF,IAAI,CAAC,EAAE;AACvB,IAAA,OAAOA,IAAI,CAAA;AACb,GAAA;;AAEA;EACA,IAAI,OAAO,IAAID,KAAK,EAAE;AACpB;IACA,IAAIC,IAAI,KAAKG,SAAS,EAAE;AACtB,MAAA,OAAOJ,KAAK,CAACK,KAAK,EAAE,CAAA;AACtB,KAAA;;AAEA;AACA,IAAA,IAAI,OAAOJ,IAAI,KAAK,QAAQ,IAAIK,QAAQ,CAACL,IAAI,CAAC,IAAIM,IAAI,CAACC,KAAK,CAACP,IAAI,CAAC,KAAKA,IAAI,EAAE;AAC3E,MAAA,OAAOD,KAAK,CAACK,KAAK,CAACJ,IAAI,CAAC,CAAA;AAC1B,KAAA;AAEA,IAAA,IAAI,OAAOA,IAAI,KAAK,UAAU,EAAE;AAC9B,MAAA,OAAOD,KAAK,CAACK,KAAK,EAAE,CAAA;AACtB,KAAA;AACF,GAAA;;AAEA;AACA,EAAA,OAAOL,KAAK,CAACS,MAAM,EAAE,CAAA;AACvB,CAAC,CAAA;AAEYC,MAAAA,WAAW,GAAIV,KAAyB,IAAK;AACxD,EAAA,MAAMW,SAAS,GAAGX,KAAK,CAACW,SAAS,EAAE,CAAA;AAEnC,EAAA,IAAIA,SAAS,KAAK,CAAC,EAAE,OAAOX,KAAK,CAAA;AAEjC,EAAA,IAAIY,MAAM,GAAGD,SAAS,GAAG,CAAC,CAAA;AAC1B,EAAA,IAAIX,KAAK,CAACa,KAAK,EAAE,EAAE;AACjBD,IAAAA,MAAM,GAAGL,IAAI,CAACM,KAAK,CAACD,MAAM,CAAC,CAAA;AAC7B,GAAA;AAEA,EAAA,OAA8BE,CAAI,IAAA;AAAA,IAAA,IAAAC,MAAA,CAAA;AAAA,IAAA,OAAK,CAAAA,CAAAA,MAAA,GAACf,KAAK,CAACc,CAAC,CAAC,MAAAC,IAAAA,IAAAA,MAAA,KAAAA,KAAAA,CAAAA,GAAAA,MAAA,GAAI,CAAC,IAAIH,MAAM,CAAA;AAAA,GAAA,CAAA;AACjE,EAAC;AAEYI,MAAAA,YAAY,GAAGC,IAAA,IAkBtB;EAAA,IAlBuB;IAC3BC,IAAI;IACJlB,KAAK;IACLmB,aAAa;IACbC,UAAU;IACVC,QAAQ;IACRC,WAAW;IACXC,YAAY;AACZC,IAAAA,eAAAA;AAUF,GAAC,GAAAP,IAAA,CAAA;AACC,EAAA,MAAMQ,MAAM,GAAGD,eAAe,GAAGA,eAAe,CAACzB,aAAa,CAACC,KAAK,EAAEoB,UAAU,CAAC,CAAC,GAAGrB,aAAa,CAACC,KAAK,EAAEoB,UAAU,CAAC,CAAA;EAErH,MAAMM,QAAQ,GAAG,WAAW,IAAI1B,KAAK,GAAGU,WAAW,CAACV,KAAK,CAAC,GAAGA,KAAK,CAAA;AAClE,EAAA,MAAM2B,IAAI,GAAG;AAAEC,IAAAA,KAAK,EAAE,CAAC;AAAEC,IAAAA,KAAK,EAAE,CAAA;GAAG,CAAA;AACnC,EAAA,MAAMC,IAAI,GAAG;AAAEC,IAAAA,KAAK,EAAE,CAAC;AAAEC,IAAAA,KAAK,EAAE,CAAA;GAAG,CAAA;AAEnC,EAAA,MAAMC,KAAK,GAAG,OAAOC,QAAQ,KAAK,QAAQ,GAAGA,QAAQ,CAACC,GAAG,KAAK,KAAK,GAAG,KAAK,CAAA;AAC3E,EAAA,IAAIC,SAA6C,CAAA;EACjD,IAAIC,SAAS,GAAG,QAAQ,CAAA;EACxB,IAAIC,YAAY,GAAG,SAAS,CAAA;EAE5B,IAAIpB,IAAI,KAAK,GAAG,EAAE;AAChBkB,IAAAA,SAAS,GAAItB,CAAC,IAAA;AAAA,MAAA,IAAAyB,SAAA,CAAA;MAAA,OAAM;AAAEC,QAAAA,CAAC,EAAAD,CAAAA,SAAA,GAAEb,QAAQ,CAACZ,CAAC,CAAC,MAAA,IAAA,IAAAyB,SAAA,KAAA,KAAA,CAAA,GAAAA,SAAA,GAAI,CAAC;AAAEE,QAAAA,CAAC,EAAE,CAAA;OAAG,CAAA;KAAC,CAAA;AAElDd,IAAAA,IAAI,CAACE,KAAK,GAAGR,QAAQ,IAAIF,aAAa,KAAK,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;AAC5DW,IAAAA,IAAI,CAACE,KAAK,GAAG,CAACX,QAAQ,GAAGC,WAAW,KAAKH,aAAa,KAAK,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;IAE5E,IAAIA,aAAa,KAAK,OAAO,EAAE;AAC7BmB,MAAAA,YAAY,GAAG,kBAAkB,CAAA;AACnC,KAAC,MAAM;AACLA,MAAAA,YAAY,GAAG,YAAY,CAAA;AAC7B,KAAA;IAEA,IAAIf,YAAY,KAAK,CAAC,EAAE;AACtBc,MAAAA,SAAS,GAAG,QAAQ,CAAA;AACtB,KAAC,MAAM,IAAKlB,aAAa,KAAK,OAAO,IAAII,YAAY,GAAG,CAAC,IAAMJ,aAAa,KAAK,QAAQ,IAAII,YAAY,GAAG,CAAE,EAAE;AAC9Gc,MAAAA,SAAS,GAAGJ,KAAK,GAAG,OAAO,GAAG,KAAK,CAAA;AACnCK,MAAAA,YAAY,GAAG,QAAQ,CAAA;AACzB,KAAC,MAAM,IAAKnB,aAAa,KAAK,OAAO,IAAII,YAAY,GAAG,CAAC,IAAMJ,aAAa,KAAK,QAAQ,IAAII,YAAY,GAAG,CAAE,EAAE;AAC9Gc,MAAAA,SAAS,GAAGJ,KAAK,GAAG,KAAK,GAAG,OAAO,CAAA;AACnCK,MAAAA,YAAY,GAAG,QAAQ,CAAA;AACzB,KAAA;AACF,GAAC,MAAM;AACLF,IAAAA,SAAS,GAAItB,CAAC,IAAA;AAAA,MAAA,IAAA4B,UAAA,CAAA;MAAA,OAAM;AAAEF,QAAAA,CAAC,EAAE,CAAC;QAAEC,CAAC,EAAA,CAAAC,UAAA,GAAEhB,QAAQ,CAACZ,CAAC,CAAC,MAAA4B,IAAAA,IAAAA,UAAA,KAAAA,KAAAA,CAAAA,GAAAA,UAAA,GAAI,CAAA;OAAG,CAAA;KAAC,CAAA;AAElDf,IAAAA,IAAI,CAACC,KAAK,GAAGP,QAAQ,IAAIF,aAAa,KAAK,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;AAC5DW,IAAAA,IAAI,CAACC,KAAK,GAAG,CAACV,QAAQ,GAAGC,WAAW,KAAKH,aAAa,KAAK,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;IAE5E,IAAIA,aAAa,KAAK,OAAO,EAAE;AAC7BkB,MAAAA,SAAS,GAAG,OAAO,CAAA;AACrB,KAAC,MAAM;AACLA,MAAAA,SAAS,GAAG,KAAK,CAAA;AACnB,KAAA;AACF,GAAA;AAEA,EAAA,MAAMhC,KAAK,GAAGoB,MAAM,CAACkB,GAAG,CAAEC,KAAiB,IAAAC,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAA;AACzCC,IAAAA,GAAG,EAAEF,KAAK,YAAYG,IAAI,GAAI,CAAEH,EAAAA,KAAK,CAACI,OAAO,EAAG,CAAA,CAAC,GAAI,CAAA,EAAEJ,KAAM,CAAC,CAAA;AAC9DA,IAAAA,KAAAA;GACGR,EAAAA,SAAS,CAACQ,KAAK,CAAC,GAChBjB,IAAI,CAAA,EACJG,IAAI,CACP,CAAC,CAAA;EAEH,OAAO;IACLzB,KAAK;IACLgC,SAAS;AACTC,IAAAA,YAAAA;GACD,CAAA;AACH;;;;"}
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
import styled, { css } from 'styled-components';
|
|
2
|
-
import { a as it } from '../../node_modules/@react-spring/web/dist/esm/index.js';
|
|
3
|
-
import { Theme } from '@redsift/design-system';
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* Component style.
|
|
7
|
-
*/
|
|
8
|
-
const StyledAxis = styled(it.g)`
|
|
9
|
-
.redsift-axis__line,
|
|
10
|
-
.redsift-axis-tick__line {
|
|
11
|
-
fill: none;
|
|
12
|
-
${_ref => {
|
|
13
|
-
let {
|
|
14
|
-
$theme
|
|
15
|
-
} = _ref;
|
|
16
|
-
return css`
|
|
17
|
-
stroke: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});
|
|
18
|
-
`;
|
|
19
|
-
}}
|
|
20
|
-
shape-rendering: crispEdges;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
text {
|
|
24
|
-
font-family: var(--redsift-typography-font-family-poppins);
|
|
25
|
-
${_ref2 => {
|
|
26
|
-
let {
|
|
27
|
-
$theme
|
|
28
|
-
} = _ref2;
|
|
29
|
-
return css`
|
|
30
|
-
fill: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});
|
|
31
|
-
`;
|
|
32
|
-
}}
|
|
33
|
-
font-size: 10px;
|
|
34
|
-
user-select: none;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
text.colored {
|
|
38
|
-
${_ref3 => {
|
|
39
|
-
let {
|
|
40
|
-
$theme,
|
|
41
|
-
$color
|
|
42
|
-
} = _ref3;
|
|
43
|
-
return css`
|
|
44
|
-
fill: ${$color === 'green' ? '#029B57' : $color === 'red' ? '#CB0E0E' : `var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'})`};
|
|
45
|
-
`;
|
|
46
|
-
}}
|
|
47
|
-
}
|
|
48
|
-
`;
|
|
49
|
-
|
|
50
|
-
export { StyledAxis };
|
|
51
|
-
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../src/components/Axis/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledAxisProps } from './types';\nimport { animated } from '@react-spring/web';\nimport { Theme } from '@redsift/design-system';\n\n/**\n * Component style.\n */\nexport const StyledAxis = styled(animated.g)<StyledAxisProps>`\n .redsift-axis__line,\n .redsift-axis-tick__line {\n fill: none;\n ${({ $theme }) => css`\n stroke: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});\n `}\n shape-rendering: crispEdges;\n }\n\n text {\n font-family: var(--redsift-typography-font-family-poppins);\n ${({ $theme }) => css`\n fill: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});\n `}\n font-size: 10px;\n user-select: none;\n }\n\n text.colored {\n ${({ $theme, $color }) => css`\n fill: ${$color === 'green'\n ? '#029B57'\n : $color === 'red'\n ? '#CB0E0E'\n : `var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'})`};\n `}\n }\n`;\n"],"names":["StyledAxis","styled","animated","g","_ref","$theme","css","Theme","dark","_ref2","_ref3","$color"],"mappings":";;;;AAKA;AACA;AACA;AACO,MAAMA,UAAU,GAAGC,MAAM,CAACC,EAAQ,CAACC,CAAC,CAAmB,CAAA;AAC9D;AACA;AACA;AACA,IAAA,EAAMC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAD,IAAA,CAAA;AAAA,EAAA,OAAKE,GAAI,CAAA;AAC1B,0CAA4CD,EAAAA,MAAM,KAAKE,KAAK,CAACC,IAAI,GAAG,OAAO,GAAG,aAAc,CAAA;AAC5F,IAAK,CAAA,CAAA;AAAA,CAAC,CAAA;AACN;AACA;AACA;AACA;AACA;AACA,IAAA,EAAMC,KAAA,IAAA;EAAA,IAAC;AAAEJ,IAAAA,MAAAA;AAAO,GAAC,GAAAI,KAAA,CAAA;AAAA,EAAA,OAAKH,GAAI,CAAA;AAC1B,wCAA0CD,EAAAA,MAAM,KAAKE,KAAK,CAACC,IAAI,GAAG,OAAO,GAAG,aAAc,CAAA;AAC1F,IAAK,CAAA,CAAA;AAAA,CAAC,CAAA;AACN;AACA;AACA;AACA;AACA;AACA,IAAA,EAAME,KAAA,IAAA;EAAA,IAAC;IAAEL,MAAM;AAAEM,IAAAA,MAAAA;AAAO,GAAC,GAAAD,KAAA,CAAA;AAAA,EAAA,OAAKJ,GAAI,CAAA;AAClC,YAAcK,EAAAA,MAAM,KAAK,OAAO,GACtB,SAAS,GACTA,MAAM,KAAK,KAAK,GAChB,SAAS,GACR,CAA8BN,4BAAAA,EAAAA,MAAM,KAAKE,KAAK,CAACC,IAAI,GAAG,OAAO,GAAG,aAAc,CAAG,CAAA,CAAA,CAAA;AAC5F,IAAK,CAAA,CAAA;AAAA,CAAC,CAAA;AACN;AACA;;;;"}
|
package/components/Axis/types.js
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Component variant.
|
|
3
|
-
*/
|
|
4
|
-
const AxisVariant = {
|
|
5
|
-
none: 'none',
|
|
6
|
-
line: 'line',
|
|
7
|
-
lineTick: 'lineTick',
|
|
8
|
-
tick: 'tick',
|
|
9
|
-
tickValue: 'tickValue',
|
|
10
|
-
default: 'default'
|
|
11
|
-
};
|
|
12
|
-
const AxisPosition = {
|
|
13
|
-
top: 'top',
|
|
14
|
-
right: 'right',
|
|
15
|
-
bottom: 'bottom',
|
|
16
|
-
left: 'left'
|
|
17
|
-
};
|
|
18
|
-
|
|
19
|
-
/**
|
|
20
|
-
* Component props.
|
|
21
|
-
*/
|
|
22
|
-
|
|
23
|
-
export { AxisPosition, AxisVariant };
|
|
24
|
-
//# sourceMappingURL=types.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sources":["../../../src/components/Axis/types.ts"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { ValueOf, Theme } from '@redsift/design-system';\nimport { AnyScale, NumericValue, ScaleValue, StringValue, TicksSpec } from '../../types';\n\n/**\n * Component variant.\n */\nexport const AxisVariant = {\n none: 'none',\n line: 'line',\n lineTick: 'lineTick',\n tick: 'tick',\n tickValue: 'tickValue',\n default: 'default',\n} as const;\nexport type AxisVariant = ValueOf<typeof AxisVariant>;\n\nexport const AxisPosition = {\n top: 'top',\n right: 'right',\n bottom: 'bottom',\n left: 'left',\n};\nexport type AxisPosition = ValueOf<typeof AxisPosition>;\n\n/**\n * Component props.\n */\nexport interface AxisProps extends Omit<ComponentProps<'g'>, 'scale'> {\n /** Disable animations. */\n disableAnimations?: boolean;\n format?: string;\n /** Whether to display grid or not. The length is mandatory and should usually be the length of the other axis. */\n grid?:\n | boolean\n | {\n length?: number;\n stroke?: string;\n strokeWidth?: number;\n strokeDasharray?: string;\n opacity?: number;\n };\n legend?: string;\n legendOffset?: number;\n legendPosition?: 'start' | 'middle' | 'end';\n legendX?: number;\n legendY?: number;\n legendRotation?: number;\n legendStyle?: React.CSSProperties;\n /** Length of the axis. */\n length?: number;\n /** Position of axis. top|bottom means this is an x axis, right|left means this is an y axis. */\n position?: AxisPosition;\n /** Scale (d3.js) used to generate the axis. */\n scale?: AnyScale;\n tickFormat?:\n | ((d: NumericValue) => string)\n | ((d: StringValue) => string)\n | ((d: Date) => string)\n | ((d: ScaleValue) => string);\n tickPadding?: number;\n tickRotation?: number;\n tickSize?: number;\n tickValues?: TicksSpec;\n tickRemodelling?: (tickValues: any[]) => any[];\n /** Variant. */\n variant?: AxisVariant;\n /** X position. */\n x?: number;\n /** Y position. */\n y?: number;\n /** Chart width, used for horizontal grid. */\n chartWidth?: number;\n /** Chart height, used for horizontal grid. */\n chartHeight?: number;\n /** Section height, used for horizontal grid within a section. */\n sectionHeight?: number;\n /** Color used for tick values. */\n textColor?: string;\n /** Custom method to choose which tick value to color if not all. */\n tickToColor?: (\n tick?: {\n textX: number;\n textY: number;\n lineX: number;\n lineY: number;\n x: number;\n y: number;\n key: string;\n value: ScaleValue;\n },\n index?: number\n ) => boolean;\n}\n\nexport type StyledAxisProps = Omit<AxisProps, 'areXLabelsRotated' | 'size' | 'scale'> & {\n $theme: Theme;\n $color?: string;\n};\n"],"names":["AxisVariant","none","line","lineTick","tick","tickValue","default","AxisPosition","top","right","bottom","left"],"mappings":"AAIA;AACA;AACA;AACO,MAAMA,WAAW,GAAG;AACzBC,EAAAA,IAAI,EAAE,MAAM;AACZC,EAAAA,IAAI,EAAE,MAAM;AACZC,EAAAA,QAAQ,EAAE,UAAU;AACpBC,EAAAA,IAAI,EAAE,MAAM;AACZC,EAAAA,SAAS,EAAE,WAAW;AACtBC,EAAAA,OAAO,EAAE,SAAA;AACX,EAAU;AAGH,MAAMC,YAAY,GAAG;AAC1BC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,MAAM,EAAE,QAAQ;AAChBC,EAAAA,IAAI,EAAE,MAAA;AACR,EAAC;;AAGD;AACA;AACA;;;;"}
|
package/components/Bar/Bar.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Bar.js","sources":["../../../src/components/Bar/Bar.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport classNames from 'classnames';\nimport { animated, useSpring } from '@react-spring/web';\nimport { interpolate as d3interpolate } from 'd3';\n\nimport { Comp, useTheme } from '@redsift/design-system';\n\nimport { BarDirection, BarOrientation, BarProps } from './types';\nimport { StyledBar } from './styles';\nimport { monochrome } from '../../scheme';\nimport { config } from '../../config';\nimport { BarDatum } from '@redsift/charts/types';\n\nconst COMPONENT_NAME = 'Bar';\nconst CLASSNAME = 'redsift-bar';\n\nexport const Bar: Comp<BarProps, SVGGElement> = forwardRef((props, ref) => {\n const { color = monochrome, data, index = 0, isSelected: propsIsSelected, labelDecorator, onClick, role } = props;\n\n const {\n className,\n disableAnimations,\n gap = 5,\n height = 40,\n maxHeight = 100,\n orientation = BarOrientation.horizontal,\n direction = BarDirection.up,\n previousData = {\n data: {\n key: '',\n value: 0,\n },\n },\n scale,\n scalePosition,\n width = 40,\n minWidth,\n ...forwardedProps\n } = props;\n\n const theme = useTheme();\n\n const getValue = (data: BarDatum['data']) =>\n data?.cumulativeValue !== undefined ? data.cumulativeValue : data?.value;\n const interpolator = d3interpolate(getValue(previousData!.data) || 0, getValue(data.data) || 0);\n\n const text = labelDecorator\n ? labelDecorator(data, { index, isSelected: propsIsSelected, color })\n : (data.data.key as string);\n const isSelectable = role === 'option';\n const isDeselected = isSelectable && propsIsSelected === false;\n const isHorizontal = orientation === BarOrientation.horizontal;\n const goesUp = direction === BarDirection.up;\n const isOrdinal = typeof scalePosition.domain()[0] === 'string';\n\n const animatedProps = useSpring({\n ...config,\n to: async (next: (props?: object) => Promise<void>) => {\n await next({ t: 1 });\n },\n from: { t: 0 },\n });\n\n const computedWidth: number = minWidth ? Math.max(minWidth, width) : width;\n\n return (\n <StyledBar\n {...forwardedProps}\n ref={ref}\n className={classNames(Bar.className, className)}\n transform={\n isHorizontal\n ? `translate(0, ${scalePosition(data.data.key as any)! + gap! / 2})`\n : `translate(${\n goesUp\n ? scalePosition(data.data.key as any)! + (isOrdinal ? computedWidth + gap! / 2 : computedWidth / 2)\n : scalePosition(data.data.key as any)! + (isOrdinal ? -computedWidth + gap! / 2 : -computedWidth / 2)\n }, ${maxHeight})${goesUp ? ', rotate(180)' : ''}`\n }\n $clickable={Boolean(onClick)}\n $theme={theme}\n >\n {isHorizontal ? (\n <animated.rect\n height={height}\n fill={isDeselected ? 'var(--redsift-color-neutral-light-grey)' : color}\n width={\n config.immediate || disableAnimations\n ? scale(data.data.value)\n : animatedProps.t.to((t) => scale(interpolator(t)))\n }\n />\n ) : (\n <animated.rect\n height={\n config.immediate || disableAnimations\n ? goesUp\n ? maxHeight! - scale(getValue(data.data))\n : scale(getValue(data.data)) - maxHeight!\n : animatedProps.t.to((t) =>\n Math.max(0, goesUp ? maxHeight! - scale(interpolator(t)) : scale(interpolator(t)) - maxHeight!)\n )\n }\n fill={isDeselected ? 'var(--redsift-color-neutral-light-grey)' : color}\n width={computedWidth}\n />\n )}\n {isHorizontal ? (\n <text x=\"10\" y={height! / 2} dy=\"0.35em\" aria-hidden={true}>\n {text}\n </text>\n ) : null}\n </StyledBar>\n );\n});\nBar.className = CLASSNAME;\nBar.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","Bar","forwardRef","props","ref","color","monochrome","data","index","isSelected","propsIsSelected","labelDecorator","onClick","role","className","disableAnimations","gap","height","maxHeight","orientation","BarOrientation","horizontal","direction","BarDirection","up","previousData","key","value","scale","scalePosition","width","minWidth","forwardedProps","_objectWithoutProperties","_excluded","theme","useTheme","getValue","cumulativeValue","undefined","interpolator","d3interpolate","text","isSelectable","isDeselected","isHorizontal","goesUp","isOrdinal","domain","animatedProps","useSpring","_objectSpread","config","to","next","t","from","computedWidth","Math","max","React","createElement","StyledBar","_extends","classNames","transform","$clickable","Boolean","$theme","animated","rect","fill","immediate","x","y","dy","displayName"],"mappings":"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"}
|
package/components/Bar/styles.js
DELETED
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
import styled, { css } from 'styled-components';
|
|
2
|
-
import { Theme } from '@redsift/design-system';
|
|
3
|
-
import { DataPoint } from '../DataPoint/DataPoint.js';
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* Component style.
|
|
7
|
-
*/
|
|
8
|
-
const StyledBar = styled(DataPoint)`
|
|
9
|
-
text {
|
|
10
|
-
${_ref => {
|
|
11
|
-
let {
|
|
12
|
-
$theme
|
|
13
|
-
} = _ref;
|
|
14
|
-
return css`
|
|
15
|
-
fill: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});
|
|
16
|
-
`;
|
|
17
|
-
}}
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
${_ref2 => {
|
|
21
|
-
let {
|
|
22
|
-
$clickable
|
|
23
|
-
} = _ref2;
|
|
24
|
-
return $clickable ? css`
|
|
25
|
-
cursor: pointer;
|
|
26
|
-
|
|
27
|
-
&:hover,
|
|
28
|
-
&:focus,
|
|
29
|
-
&.focused {
|
|
30
|
-
outline: none;
|
|
31
|
-
rect {
|
|
32
|
-
fill-opacity: 0.7;
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
// &:focus-visible {
|
|
37
|
-
// rect {
|
|
38
|
-
// stroke: var(--redsift-color-primary-n);
|
|
39
|
-
// stroke-width: 4px;
|
|
40
|
-
// paint-order: stroke;
|
|
41
|
-
// }
|
|
42
|
-
// }
|
|
43
|
-
|
|
44
|
-
@media (prefers-reduced-motion: no-preference) {
|
|
45
|
-
&:focus-visible,
|
|
46
|
-
&.focused {
|
|
47
|
-
outline: 2px solid var(--redsift-color-primary-n);
|
|
48
|
-
transition: outline-offset 75ms ease-out;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
&:not(&:active)&:focus-visible,
|
|
52
|
-
&:not(&:active)&.focused {
|
|
53
|
-
transition-duration: 0.25s;
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
&:not(&:active)&:focus-visible,
|
|
58
|
-
&:not(&:active)&.focused {
|
|
59
|
-
outline-offset: 0.2rem;
|
|
60
|
-
}
|
|
61
|
-
` : '';
|
|
62
|
-
}}}
|
|
63
|
-
`;
|
|
64
|
-
|
|
65
|
-
export { StyledBar };
|
|
66
|
-
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../src/components/Bar/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledBarProps } from './types';\nimport { DataPoint } from '../DataPoint';\nimport { Theme } from '@redsift/design-system';\n\n/**\n * Component style.\n */\nexport const StyledBar = styled(DataPoint)<StyledBarProps>`\n text {\n ${({ $theme }) => css`\n fill: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});\n `}\n }\n\n ${({ $clickable }) =>\n $clickable\n ? css`\n cursor: pointer;\n\n &:hover,\n &:focus,\n &.focused {\n outline: none;\n rect {\n fill-opacity: 0.7;\n }\n }\n\n // &:focus-visible {\n // rect {\n // stroke: var(--redsift-color-primary-n);\n // stroke-width: 4px;\n // paint-order: stroke;\n // }\n // }\n\n @media (prefers-reduced-motion: no-preference) {\n &:focus-visible,\n &.focused {\n outline: 2px solid var(--redsift-color-primary-n);\n transition: outline-offset 75ms ease-out;\n }\n\n &:not(&:active)&:focus-visible,\n &:not(&:active)&.focused {\n transition-duration: 0.25s;\n }\n }\n\n &:not(&:active)&:focus-visible,\n &:not(&:active)&.focused {\n outline-offset: 0.2rem;\n }\n `\n : ''}}\n`;\n"],"names":["StyledBar","styled","DataPoint","_ref","$theme","css","Theme","dark","_ref2","$clickable"],"mappings":";;;;AAKA;AACA;AACA;MACaA,SAAS,GAAGC,MAAM,CAACC,SAAS,CAAkB,CAAA;AAC3D;AACA,IAAA,EAAMC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAD,IAAA,CAAA;AAAA,EAAA,OAAKE,GAAI,CAAA;AAC1B,wCAA0CD,EAAAA,MAAM,KAAKE,KAAK,CAACC,IAAI,GAAG,OAAO,GAAG,aAAc,CAAA;AAC1F,IAAK,CAAA,CAAA;AAAA,CAAC,CAAA;AACN;AACA;AACA,EAAA,EAAIC,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAAD,KAAA,CAAA;EAAA,OACfC,UAAU,GACNJ,GAAI,CAAA;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAA,CAAS,GACD,EAAE,CAAA;AAAA,CAAC,CAAA;AACX;;;;"}
|
package/components/Bar/types.js
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Component variant.
|
|
3
|
-
*/
|
|
4
|
-
const BarOrientation = {
|
|
5
|
-
horizontal: 'horizontal',
|
|
6
|
-
vertical: 'vertical'
|
|
7
|
-
};
|
|
8
|
-
const BarDirection = {
|
|
9
|
-
up: 'up',
|
|
10
|
-
down: 'down'
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
/**
|
|
14
|
-
* Component props.
|
|
15
|
-
*/
|
|
16
|
-
|
|
17
|
-
export { BarDirection, BarOrientation };
|
|
18
|
-
//# sourceMappingURL=types.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sources":["../../../src/components/Bar/types.ts"],"sourcesContent":["import { ScaleLinear as d3ScaleLinear, ScaleTime as d3ScaleTime, ScalePoint as d3ScalePoint } from 'd3';\nimport { Theme, ValueOf } from '@redsift/design-system';\nimport { BarDatum } from '../../types';\nimport { DataPointProps, StyledDataPointProps } from '../DataPoint';\n\n/**\n * Component variant.\n */\nexport const BarOrientation = {\n horizontal: 'horizontal',\n vertical: 'vertical',\n};\nexport type BarOrientation = ValueOf<typeof BarOrientation>;\n\nexport const BarDirection = {\n up: 'up',\n down: 'down',\n};\nexport type BarDirection = ValueOf<typeof BarDirection>;\n\n/**\n * Component props.\n */\nexport interface BarProps extends DataPointProps<BarDatum> {\n /** Gap between two siblings. */\n gap?: number;\n /** Height of the bar in horizontal orientation. */\n height?: number;\n /** Maximum height of the bar. */\n maxHeight?: number;\n /** Orientation of the bar. */\n orientation?: BarOrientation;\n /** Direction of the bar, works only with vertical orientation. */\n direction?: BarOrientation;\n /** A linear continuous scale defined over a numeric domain used to determine the width or height of the bar (depending on the orientation). */\n scale: d3ScaleLinear<number, number, never>;\n /** A scale defined over a numeric/time/ordinal domain used to determine the position of the bar. */\n scalePosition: d3ScaleLinear<number, number, never> | d3ScaleTime<number, number, never> | d3ScalePoint<string>;\n /** Width of the bar in vertical orientation. */\n width?: number;\n /** Min width of the bar in vertical orientation. */\n minWidth?: number;\n}\n\nexport type StyledBarProps = StyledDataPointProps &\n Omit<BarProps, 'scale' | 'scalePosition'> & {\n $theme: Theme;\n };\n"],"names":["BarOrientation","horizontal","vertical","BarDirection","up","down"],"mappings":"AAKA;AACA;AACA;AACO,MAAMA,cAAc,GAAG;AAC5BC,EAAAA,UAAU,EAAE,YAAY;AACxBC,EAAAA,QAAQ,EAAE,UAAA;AACZ,EAAC;AAGM,MAAMC,YAAY,GAAG;AAC1BC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,IAAI,EAAE,MAAA;AACR,EAAC;;AAGD;AACA;AACA;;;;"}
|