@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
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { BarChartProps, BarChartSectionProps, BarChartBarsProps, ComputedBarProps } from './types.js';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { Comp } from '@redsift/design-system';
|
|
4
|
-
import { AxisProps } from '../Axis/types.js';
|
|
5
|
-
import { BarDatum } from '../../types/data.js';
|
|
6
|
-
import { LegendProps } from '../Legend/types.js';
|
|
7
|
-
import { LegendItemProps } from '../LegendItem/types.js';
|
|
8
|
-
import { ChartContainerProps } from '../ChartContainer/types.js';
|
|
9
|
-
|
|
10
|
-
declare const BaseBarChart: Comp<BarChartProps, HTMLDivElement>;
|
|
11
|
-
declare const BarChart: Comp<BarChartProps, HTMLDivElement> & {
|
|
12
|
-
Section: Comp<BarChartSectionProps, SVGGElement>;
|
|
13
|
-
Bars: Comp<BarChartBarsProps, SVGGElement>;
|
|
14
|
-
Axis: Comp<AxisProps, SVGGElement>;
|
|
15
|
-
GroupedTooltip: React.FC<{
|
|
16
|
-
dateFormatter: (date: Date) => string;
|
|
17
|
-
categories: string[];
|
|
18
|
-
categoryDecorator?: ((category: string) => string) | undefined;
|
|
19
|
-
categoryColor: (category: string) => string;
|
|
20
|
-
datum: BarDatum;
|
|
21
|
-
groupedData: ComputedBarProps[] | undefined;
|
|
22
|
-
}>;
|
|
23
|
-
Legend: Comp<LegendProps, HTMLUListElement>;
|
|
24
|
-
LegendItem: Comp<LegendItemProps, HTMLLIElement>;
|
|
25
|
-
Title: Comp<Pick<ChartContainerProps, "onReset"> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
|
|
26
|
-
Description: Comp<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, HTMLDivElement>;
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
export { BarChart, BaseBarChart };
|
|
@@ -1,141 +0,0 @@
|
|
|
1
|
-
import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
-
import React__default, { forwardRef } from 'react';
|
|
3
|
-
import classNames from 'classnames';
|
|
4
|
-
import { useId } from '@redsift/design-system';
|
|
5
|
-
import { BarChartLegendVariant } from './types.js';
|
|
6
|
-
import { EmptyBarChart } from './EmptyBarChart.js';
|
|
7
|
-
import { LoadingBarChart } from './LoadingBarChart.js';
|
|
8
|
-
import { RenderedOrdinalBarChart } from './RenderedOrdinalBarChart.js';
|
|
9
|
-
import { RenderedLinearBarChart } from './RenderedLinearBarChart.js';
|
|
10
|
-
import { isValidDate } from '../../utils/index.js';
|
|
11
|
-
import { BarChartSection } from './BarChartSection.js';
|
|
12
|
-
import { BarChartBars, BarChartGroupedTooltip } from './BarChartBars.js';
|
|
13
|
-
import { ColorTheme } from '../../types/theme.js';
|
|
14
|
-
import { ChartContainerTitle, ChartContainerDescription } from '../ChartContainer/ChartContainer.js';
|
|
15
|
-
import { BarOrientation } from '../Bar/types.js';
|
|
16
|
-
import { ChartSize } from '../../types/size.js';
|
|
17
|
-
import { TooltipVariant } from '../../types/legend.js';
|
|
18
|
-
import { Axis } from '../Axis/Axis.js';
|
|
19
|
-
import { Legend } from '../Legend/Legend.js';
|
|
20
|
-
import { LegendItem } from '../LegendItem/LegendItem.js';
|
|
21
|
-
|
|
22
|
-
const _excluded = ["barRole", "caping", "chartRef", "className", "colorTheme", "data", "dataType", "emptyComponent", "id", "isBarSelected", "labelDecorator", "legendDecorator", "legendVariant", "localeText", "onBarClick", "orientation", "others", "size", "sortingMethod", "theme", "tooltipDecorator", "tooltipVariant", "xAxisPlacement", "yAxisPlacement"];
|
|
23
|
-
const COMPONENT_NAME = 'BarChart';
|
|
24
|
-
const CLASSNAME = 'redsift-barchart';
|
|
25
|
-
const BaseBarChart = /*#__PURE__*/forwardRef((props, ref) => {
|
|
26
|
-
const {
|
|
27
|
-
barRole,
|
|
28
|
-
caping,
|
|
29
|
-
chartRef,
|
|
30
|
-
className,
|
|
31
|
-
colorTheme = ColorTheme.default,
|
|
32
|
-
data: propsData,
|
|
33
|
-
dataType: propsDataType,
|
|
34
|
-
emptyComponent,
|
|
35
|
-
id: propsId,
|
|
36
|
-
isBarSelected = () => true,
|
|
37
|
-
labelDecorator,
|
|
38
|
-
legendDecorator,
|
|
39
|
-
legendVariant: propsLegendVariant,
|
|
40
|
-
localeText = {
|
|
41
|
-
emptyChartText: 'No Data'
|
|
42
|
-
},
|
|
43
|
-
onBarClick,
|
|
44
|
-
orientation = BarOrientation.horizontal,
|
|
45
|
-
others = true,
|
|
46
|
-
size = ChartSize.medium,
|
|
47
|
-
sortingMethod = 'desc-value',
|
|
48
|
-
theme,
|
|
49
|
-
tooltipDecorator,
|
|
50
|
-
tooltipVariant = TooltipVariant.value,
|
|
51
|
-
xAxisPlacement = 'bottom',
|
|
52
|
-
yAxisPlacement = 'left'
|
|
53
|
-
} = props,
|
|
54
|
-
forwardedProps = _objectWithoutProperties(props, _excluded);
|
|
55
|
-
const [_id] = useId();
|
|
56
|
-
const id = propsId !== null && propsId !== void 0 ? propsId : _id;
|
|
57
|
-
const legendVariant = propsLegendVariant !== null && propsLegendVariant !== void 0 ? propsLegendVariant : BarChartLegendVariant.externalLabel;
|
|
58
|
-
if (propsData === undefined || propsData === null) {
|
|
59
|
-
return /*#__PURE__*/React__default.createElement(LoadingBarChart, _extends({
|
|
60
|
-
id: id
|
|
61
|
-
}, forwardedProps, {
|
|
62
|
-
ref: ref
|
|
63
|
-
}));
|
|
64
|
-
}
|
|
65
|
-
if (propsData.length === 0) {
|
|
66
|
-
return /*#__PURE__*/React__default.createElement(EmptyBarChart, _extends({
|
|
67
|
-
data: propsData,
|
|
68
|
-
emptyComponent: emptyComponent,
|
|
69
|
-
id: id,
|
|
70
|
-
localeText: localeText,
|
|
71
|
-
size: size
|
|
72
|
-
}, forwardedProps, {
|
|
73
|
-
ref: ref
|
|
74
|
-
}));
|
|
75
|
-
}
|
|
76
|
-
const dataType = propsDataType ? propsDataType : Array.isArray(propsData[0].key) ? 'TwoCategoryData' : propsData[0].key instanceof Date ? 'LinearData' : typeof propsData[0].key === 'number' ? 'LinearData' : typeof propsData[0].key === 'string' && isValidDate(propsData[0].key) ? 'LinearData' : typeof propsData[0].key === 'string' ? 'CategoryData' : 'CategoryData';
|
|
77
|
-
if (dataType === 'CategoryData') {
|
|
78
|
-
return /*#__PURE__*/React__default.createElement(RenderedOrdinalBarChart, _extends({
|
|
79
|
-
barRole: barRole,
|
|
80
|
-
caping: caping,
|
|
81
|
-
chartRef: chartRef,
|
|
82
|
-
className: classNames(BaseBarChart.className, className),
|
|
83
|
-
data: propsData,
|
|
84
|
-
id: id,
|
|
85
|
-
isBarSelected: isBarSelected,
|
|
86
|
-
labelDecorator: labelDecorator,
|
|
87
|
-
onBarClick: onBarClick,
|
|
88
|
-
orientation: orientation,
|
|
89
|
-
others: others,
|
|
90
|
-
size: size,
|
|
91
|
-
sortingMethod: sortingMethod,
|
|
92
|
-
theme: theme,
|
|
93
|
-
tooltipDecorator: tooltipDecorator,
|
|
94
|
-
colorTheme: colorTheme,
|
|
95
|
-
tooltipVariant: tooltipVariant,
|
|
96
|
-
xAxisPlacement: xAxisPlacement,
|
|
97
|
-
yAxisPlacement: yAxisPlacement
|
|
98
|
-
}, forwardedProps, {
|
|
99
|
-
ref: ref
|
|
100
|
-
}));
|
|
101
|
-
} else if (dataType === 'LinearData' || dataType === 'TwoCategoryData') {
|
|
102
|
-
return /*#__PURE__*/React__default.createElement(RenderedLinearBarChart, _extends({
|
|
103
|
-
barRole: barRole,
|
|
104
|
-
chartRef: chartRef,
|
|
105
|
-
className: classNames(BaseBarChart.className, className),
|
|
106
|
-
data: propsData,
|
|
107
|
-
id: id,
|
|
108
|
-
isBarSelected: isBarSelected,
|
|
109
|
-
labelDecorator: labelDecorator,
|
|
110
|
-
legendDecorator: legendDecorator,
|
|
111
|
-
legendVariant: legendVariant,
|
|
112
|
-
onBarClick: onBarClick,
|
|
113
|
-
size: size,
|
|
114
|
-
sortingMethod: sortingMethod,
|
|
115
|
-
theme: theme,
|
|
116
|
-
tooltipDecorator: tooltipDecorator,
|
|
117
|
-
colorTheme: colorTheme,
|
|
118
|
-
tooltipVariant: tooltipVariant,
|
|
119
|
-
xAxisPlacement: xAxisPlacement,
|
|
120
|
-
yAxisPlacement: yAxisPlacement
|
|
121
|
-
}, forwardedProps, {
|
|
122
|
-
ref: ref
|
|
123
|
-
}));
|
|
124
|
-
}
|
|
125
|
-
return null;
|
|
126
|
-
});
|
|
127
|
-
BaseBarChart.className = CLASSNAME;
|
|
128
|
-
BaseBarChart.displayName = COMPONENT_NAME;
|
|
129
|
-
const BarChart = Object.assign(BaseBarChart, {
|
|
130
|
-
Section: BarChartSection,
|
|
131
|
-
Bars: BarChartBars,
|
|
132
|
-
Axis: Axis,
|
|
133
|
-
GroupedTooltip: BarChartGroupedTooltip,
|
|
134
|
-
Legend: Legend,
|
|
135
|
-
LegendItem: LegendItem,
|
|
136
|
-
Title: ChartContainerTitle,
|
|
137
|
-
Description: ChartContainerDescription
|
|
138
|
-
});
|
|
139
|
-
|
|
140
|
-
export { BarChart, BaseBarChart };
|
|
141
|
-
//# sourceMappingURL=BarChart.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BarChart.js","sources":["../../../src/components/BarChart/BarChart.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport classNames from 'classnames';\n\nimport { Comp, useId } from '@redsift/design-system';\n\nimport { ChartSize, ColorTheme, LinearData, TooltipVariant } from '../../types';\nimport { BarChartLegendVariant, BarChartProps } from './types';\nimport { EmptyBarChart } from './EmptyBarChart';\nimport { LoadingBarChart } from './LoadingBarChart';\nimport { RenderedOrdinalBarChart } from './RenderedOrdinalBarChart';\nimport { RenderedLinearBarChart } from './RenderedLinearBarChart';\nimport { BarOrientation } from '../Bar';\nimport { isValidDate } from '../../utils';\nimport { BarChartSection } from './BarChartSection';\nimport { BarChartBars, BarChartGroupedTooltip } from './BarChartBars';\nimport { Axis } from '../Axis';\nimport { Legend } from '../Legend';\nimport { LegendItem } from '../LegendItem';\nimport { ChartContainerDescription, ChartContainerTitle } from '../ChartContainer';\n\nconst COMPONENT_NAME = 'BarChart';\nconst CLASSNAME = 'redsift-barchart';\n\nexport const BaseBarChart: Comp<BarChartProps, HTMLDivElement> = forwardRef((props, ref) => {\n const {\n barRole,\n caping,\n chartRef,\n className,\n colorTheme = ColorTheme.default,\n data: propsData,\n dataType: propsDataType,\n emptyComponent,\n id: propsId,\n isBarSelected = () => true,\n labelDecorator,\n legendDecorator,\n legendVariant: propsLegendVariant,\n localeText = { emptyChartText: 'No Data' },\n onBarClick,\n orientation = BarOrientation.horizontal,\n others = true,\n size = ChartSize.medium,\n sortingMethod = 'desc-value',\n theme,\n tooltipDecorator,\n tooltipVariant = TooltipVariant.value,\n xAxisPlacement = 'bottom',\n yAxisPlacement = 'left',\n ...forwardedProps\n } = props;\n const [_id] = useId();\n const id = propsId ?? _id;\n\n const legendVariant = propsLegendVariant ?? BarChartLegendVariant.externalLabel;\n\n if (propsData === undefined || propsData === null) {\n return <LoadingBarChart id={id} {...forwardedProps} ref={ref} />;\n }\n\n if (propsData.length === 0) {\n return (\n <EmptyBarChart\n data={propsData}\n emptyComponent={emptyComponent}\n id={id}\n localeText={localeText}\n size={size}\n {...forwardedProps}\n ref={ref}\n />\n );\n }\n\n const dataType = propsDataType\n ? propsDataType\n : Array.isArray(propsData[0].key)\n ? 'TwoCategoryData'\n : propsData[0].key instanceof Date\n ? 'LinearData'\n : typeof propsData[0].key === 'number'\n ? 'LinearData'\n : typeof propsData[0].key === 'string' && isValidDate(propsData[0].key)\n ? 'LinearData'\n : typeof propsData[0].key === 'string'\n ? 'CategoryData'\n : 'CategoryData';\n\n if (dataType === 'CategoryData') {\n return (\n <RenderedOrdinalBarChart\n barRole={barRole}\n caping={caping}\n chartRef={chartRef}\n className={classNames(BaseBarChart.className, className)}\n data={propsData}\n id={id}\n isBarSelected={isBarSelected}\n labelDecorator={labelDecorator}\n onBarClick={onBarClick}\n orientation={orientation}\n others={others}\n size={size}\n sortingMethod={sortingMethod}\n theme={theme}\n tooltipDecorator={tooltipDecorator}\n colorTheme={colorTheme}\n tooltipVariant={tooltipVariant}\n xAxisPlacement={xAxisPlacement}\n yAxisPlacement={yAxisPlacement}\n {...forwardedProps}\n ref={ref}\n />\n );\n } else if (dataType === 'LinearData' || dataType === 'TwoCategoryData') {\n return (\n <RenderedLinearBarChart\n barRole={barRole}\n chartRef={chartRef}\n className={classNames(BaseBarChart.className, className)}\n data={propsData as LinearData}\n id={id}\n isBarSelected={isBarSelected}\n labelDecorator={labelDecorator}\n legendDecorator={legendDecorator}\n legendVariant={legendVariant}\n onBarClick={onBarClick}\n size={size}\n sortingMethod={sortingMethod}\n theme={theme}\n tooltipDecorator={tooltipDecorator}\n colorTheme={colorTheme}\n tooltipVariant={tooltipVariant}\n xAxisPlacement={xAxisPlacement}\n yAxisPlacement={yAxisPlacement}\n {...forwardedProps}\n ref={ref}\n />\n );\n }\n\n return null;\n});\nBaseBarChart.className = CLASSNAME;\nBaseBarChart.displayName = COMPONENT_NAME;\n\nexport const BarChart = Object.assign(BaseBarChart, {\n Section: BarChartSection,\n Bars: BarChartBars,\n Axis: Axis,\n GroupedTooltip: BarChartGroupedTooltip,\n Legend: Legend,\n LegendItem: LegendItem,\n Title: ChartContainerTitle,\n Description: ChartContainerDescription,\n});\n"],"names":["COMPONENT_NAME","CLASSNAME","BaseBarChart","forwardRef","props","ref","barRole","caping","chartRef","className","colorTheme","ColorTheme","default","data","propsData","dataType","propsDataType","emptyComponent","id","propsId","isBarSelected","labelDecorator","legendDecorator","legendVariant","propsLegendVariant","localeText","emptyChartText","onBarClick","orientation","BarOrientation","horizontal","others","size","ChartSize","medium","sortingMethod","theme","tooltipDecorator","tooltipVariant","TooltipVariant","value","xAxisPlacement","yAxisPlacement","forwardedProps","_objectWithoutProperties","_excluded","_id","useId","BarChartLegendVariant","externalLabel","undefined","React","createElement","LoadingBarChart","_extends","length","EmptyBarChart","Array","isArray","key","Date","isValidDate","RenderedOrdinalBarChart","classNames","RenderedLinearBarChart","displayName","BarChart","Object","assign","Section","BarChartSection","Bars","BarChartBars","Axis","GroupedTooltip","BarChartGroupedTooltip","Legend","LegendItem","Title","ChartContainerTitle","Description","ChartContainerDescription"],"mappings":"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"}
|
|
@@ -1,168 +0,0 @@
|
|
|
1
|
-
import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
-
import React__default, { forwardRef } from 'react';
|
|
3
|
-
import { Flexbox, Text } from '@redsift/design-system';
|
|
4
|
-
import { StyledBarChartBars } from './styles.js';
|
|
5
|
-
import { useBarChartContext } from './context.js';
|
|
6
|
-
import { Bar } from '../Bar/Bar.js';
|
|
7
|
-
import { BarOrientation } from '../Bar/types.js';
|
|
8
|
-
|
|
9
|
-
const _excluded = ["category"];
|
|
10
|
-
const COMPONENT_NAME = 'BarChartBars';
|
|
11
|
-
const CLASSNAME = 'redsift-bars';
|
|
12
|
-
const BarChartBars = /*#__PURE__*/forwardRef((props, ref) => {
|
|
13
|
-
const {
|
|
14
|
-
category = 'default'
|
|
15
|
-
} = props,
|
|
16
|
-
forwardedProps = _objectWithoutProperties(props, _excluded);
|
|
17
|
-
const {
|
|
18
|
-
barProps,
|
|
19
|
-
barRole,
|
|
20
|
-
bars,
|
|
21
|
-
barWidth,
|
|
22
|
-
cache,
|
|
23
|
-
categories,
|
|
24
|
-
colorScale,
|
|
25
|
-
direction,
|
|
26
|
-
disableAnimations,
|
|
27
|
-
format,
|
|
28
|
-
gap,
|
|
29
|
-
getBarAnchorProps,
|
|
30
|
-
hasCategory,
|
|
31
|
-
id,
|
|
32
|
-
isBarSelected,
|
|
33
|
-
labelDecorator,
|
|
34
|
-
onBarClick,
|
|
35
|
-
scaleX,
|
|
36
|
-
scaleY,
|
|
37
|
-
tooltipVariant,
|
|
38
|
-
tooltipDecorator,
|
|
39
|
-
xScaleType
|
|
40
|
-
} = useBarChartContext();
|
|
41
|
-
const filteredBarChartBars = bars.filter(bar => bar.category === category && bar.value > 0);
|
|
42
|
-
const categoryIndex = categories.indexOf(category);
|
|
43
|
-
const categoryLength = categories.length;
|
|
44
|
-
return /*#__PURE__*/React__default.createElement(StyledBarChartBars, _extends({
|
|
45
|
-
key: `${id}-series-${category}`,
|
|
46
|
-
"aria-hidden": "false",
|
|
47
|
-
role: "region"
|
|
48
|
-
}, hasCategory ? {
|
|
49
|
-
'aria-label': format('series-legend', {
|
|
50
|
-
category,
|
|
51
|
-
categoryIndex: categoryIndex + 1,
|
|
52
|
-
categoryLength,
|
|
53
|
-
barLength: filteredBarChartBars.length
|
|
54
|
-
})
|
|
55
|
-
} : {}, forwardedProps, {
|
|
56
|
-
ref: ref
|
|
57
|
-
}), filteredBarChartBars.map((bar, index) => {
|
|
58
|
-
const to = {
|
|
59
|
-
data: bar,
|
|
60
|
-
category
|
|
61
|
-
};
|
|
62
|
-
const from = cache.current ? {
|
|
63
|
-
data: cache.current[index]
|
|
64
|
-
} : undefined;
|
|
65
|
-
const groupedBars = bars.filter(b => {
|
|
66
|
-
return xScaleType === 'Date' || xScaleType === 'dateString' ? b.key.getTime() === bar.key.getTime() : b.key === bar.key;
|
|
67
|
-
});
|
|
68
|
-
return /*#__PURE__*/React__default.createElement(Bar, _extends({
|
|
69
|
-
color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(to.data.category),
|
|
70
|
-
data: to,
|
|
71
|
-
dataset: bars,
|
|
72
|
-
groupedData: groupedBars,
|
|
73
|
-
disableAnimations: disableAnimations,
|
|
74
|
-
gap: gap,
|
|
75
|
-
id: `id${id}__bar-${categoryIndex}.${index}`,
|
|
76
|
-
index: index,
|
|
77
|
-
isSelected: Boolean(isBarSelected(to)),
|
|
78
|
-
key: `bar _${categoryIndex}.${index}`,
|
|
79
|
-
labelDecorator: labelDecorator,
|
|
80
|
-
maxHeight: scaleY(bar.cumulativeValue - bar.value),
|
|
81
|
-
anchorProps: getBarAnchorProps ? getBarAnchorProps(to) : undefined,
|
|
82
|
-
onClick: onBarClick,
|
|
83
|
-
orientation: BarOrientation.vertical,
|
|
84
|
-
direction: direction,
|
|
85
|
-
previousData: from,
|
|
86
|
-
scale: scaleY,
|
|
87
|
-
scalePosition: scaleX,
|
|
88
|
-
tooltipVariant: tooltipVariant,
|
|
89
|
-
tooltipDecorator: tooltipDecorator
|
|
90
|
-
}, barProps, {
|
|
91
|
-
width: barProps !== null && barProps !== void 0 && barProps.width && typeof barProps.width === 'number' ? barProps.width : barWidth,
|
|
92
|
-
height: undefined,
|
|
93
|
-
role: barRole
|
|
94
|
-
}));
|
|
95
|
-
}));
|
|
96
|
-
});
|
|
97
|
-
BarChartBars.className = CLASSNAME;
|
|
98
|
-
BarChartBars.displayName = COMPONENT_NAME;
|
|
99
|
-
const BarChartGroupedTooltip = _ref => {
|
|
100
|
-
let {
|
|
101
|
-
dateFormatter,
|
|
102
|
-
categories,
|
|
103
|
-
categoryDecorator,
|
|
104
|
-
categoryColor,
|
|
105
|
-
datum,
|
|
106
|
-
groupedData
|
|
107
|
-
} = _ref;
|
|
108
|
-
return /*#__PURE__*/React__default.createElement(Flexbox, {
|
|
109
|
-
flexDirection: "column",
|
|
110
|
-
margin: "16px",
|
|
111
|
-
gap: "0"
|
|
112
|
-
}, /*#__PURE__*/React__default.createElement(Flexbox, {
|
|
113
|
-
flexDirection: "row",
|
|
114
|
-
gap: "8px"
|
|
115
|
-
}, /*#__PURE__*/React__default.createElement(Text, {
|
|
116
|
-
fontWeight: "400",
|
|
117
|
-
fontSize: "14px"
|
|
118
|
-
}, "Date:"), /*#__PURE__*/React__default.createElement(Text, {
|
|
119
|
-
fontWeight: "700",
|
|
120
|
-
fontSize: "14px"
|
|
121
|
-
}, dateFormatter(datum.data.key))), /*#__PURE__*/React__default.createElement("div", {
|
|
122
|
-
style: {
|
|
123
|
-
width: '100%',
|
|
124
|
-
height: '1px',
|
|
125
|
-
backgroundColor: '#858585',
|
|
126
|
-
margin: '8px 0'
|
|
127
|
-
}
|
|
128
|
-
}), /*#__PURE__*/React__default.createElement(Flexbox, {
|
|
129
|
-
flexDirection: "row",
|
|
130
|
-
gap: "8px"
|
|
131
|
-
}, /*#__PURE__*/React__default.createElement(Text, {
|
|
132
|
-
fontWeight: "400",
|
|
133
|
-
fontSize: "14px"
|
|
134
|
-
}, "Total:"), /*#__PURE__*/React__default.createElement(Text, {
|
|
135
|
-
fontWeight: "600",
|
|
136
|
-
fontSize: "14px"
|
|
137
|
-
}, groupedData === null || groupedData === void 0 ? void 0 : groupedData.reduce((acc, d) => acc + d.value, 0))), /*#__PURE__*/React__default.createElement(Flexbox, {
|
|
138
|
-
flexDirection: "column",
|
|
139
|
-
marginTop: "4px",
|
|
140
|
-
gap: "8px"
|
|
141
|
-
}, categories.map(category => {
|
|
142
|
-
var _groupedData$find;
|
|
143
|
-
const value = groupedData === null || groupedData === void 0 ? void 0 : (_groupedData$find = groupedData.find(d => d.category === category)) === null || _groupedData$find === void 0 ? void 0 : _groupedData$find.value;
|
|
144
|
-
const color = categoryColor(category);
|
|
145
|
-
return value ? /*#__PURE__*/React__default.createElement(Flexbox, {
|
|
146
|
-
key: category,
|
|
147
|
-
alignItems: "center",
|
|
148
|
-
gap: "8px"
|
|
149
|
-
}, /*#__PURE__*/React__default.createElement("div", {
|
|
150
|
-
style: {
|
|
151
|
-
width: '16px',
|
|
152
|
-
height: '16px',
|
|
153
|
-
backgroundColor: color
|
|
154
|
-
}
|
|
155
|
-
}), /*#__PURE__*/React__default.createElement(Text, {
|
|
156
|
-
fontWeight: "400",
|
|
157
|
-
fontSize: "14px",
|
|
158
|
-
lineHeight: "18px"
|
|
159
|
-
}, categoryDecorator ? categoryDecorator(category) : category), /*#__PURE__*/React__default.createElement(Text, {
|
|
160
|
-
fontWeight: "600",
|
|
161
|
-
fontSize: "14px",
|
|
162
|
-
lineHeight: "18px"
|
|
163
|
-
}, value)) : null;
|
|
164
|
-
})));
|
|
165
|
-
};
|
|
166
|
-
|
|
167
|
-
export { BarChartBars, BarChartGroupedTooltip };
|
|
168
|
-
//# sourceMappingURL=BarChartBars.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BarChartBars.js","sources":["../../../src/components/BarChart/BarChartBars.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\n\nimport { Comp, Flexbox, Text } from '@redsift/design-system';\n\nimport { BarChartBarsProps, ComputedBarProps } from './types';\nimport { StyledBarChartBars } from './styles';\nimport { useBarChartContext } from './context';\nimport { BarDatum } from '../../types';\nimport { Bar, BarOrientation } from '../Bar';\n\nconst COMPONENT_NAME = 'BarChartBars';\nconst CLASSNAME = 'redsift-bars';\n\nexport const BarChartBars: Comp<BarChartBarsProps, SVGGElement> = forwardRef((props, ref) => {\n const { category = 'default', ...forwardedProps } = props;\n\n const {\n barProps,\n barRole,\n bars,\n barWidth,\n cache,\n categories,\n colorScale,\n direction,\n disableAnimations,\n format,\n gap,\n getBarAnchorProps,\n hasCategory,\n id,\n isBarSelected,\n labelDecorator,\n onBarClick,\n scaleX,\n scaleY,\n tooltipVariant,\n tooltipDecorator,\n xScaleType,\n } = useBarChartContext();\n\n const filteredBarChartBars = bars.filter((bar) => bar.category === category && bar.value > 0);\n const categoryIndex = categories.indexOf(category);\n const categoryLength = categories.length;\n\n return (\n <StyledBarChartBars\n key={`${id}-series-${category}`}\n aria-hidden=\"false\"\n role=\"region\"\n {...(hasCategory\n ? {\n 'aria-label': format('series-legend', {\n category,\n categoryIndex: categoryIndex + 1,\n categoryLength,\n barLength: filteredBarChartBars.length,\n }),\n }\n : {})}\n {...forwardedProps}\n ref={ref as RefObject<SVGGElement>}\n >\n {filteredBarChartBars.map((bar, index: number) => {\n const to = {\n data: bar,\n category,\n };\n const from = cache.current ? { data: cache.current[index] } : undefined;\n\n const groupedBars = bars.filter((b) => {\n return xScaleType === 'Date' || xScaleType === 'dateString'\n ? (b.key as Date).getTime() === (bar.key as Date).getTime()\n : b.key === bar.key;\n });\n\n return (\n <Bar\n color={colorScale?.(to.data.category)!}\n data={to as BarDatum}\n dataset={bars}\n groupedData={groupedBars}\n disableAnimations={disableAnimations}\n gap={gap}\n id={`id${id}__bar-${categoryIndex}.${index}`}\n index={index}\n isSelected={Boolean(isBarSelected!(to as BarDatum))}\n key={`bar _${categoryIndex}.${index}`}\n labelDecorator={labelDecorator}\n maxHeight={scaleY(bar.cumulativeValue - bar.value)}\n anchorProps={getBarAnchorProps ? getBarAnchorProps(to) : undefined}\n onClick={onBarClick}\n orientation={BarOrientation.vertical}\n direction={direction}\n previousData={from! as BarDatum}\n scale={scaleY}\n scalePosition={scaleX}\n tooltipVariant={tooltipVariant}\n tooltipDecorator={tooltipDecorator}\n {...barProps}\n width={barProps?.width && typeof barProps.width === 'number' ? barProps.width : barWidth}\n height={undefined}\n role={barRole}\n />\n );\n })}\n </StyledBarChartBars>\n );\n});\n\nBarChartBars.className = CLASSNAME;\nBarChartBars.displayName = COMPONENT_NAME;\n\nexport const BarChartGroupedTooltip: React.FC<{\n dateFormatter: (date: Date) => string;\n categories: string[];\n categoryDecorator?: (category: string) => string;\n categoryColor: (category: string) => string;\n datum: BarDatum;\n groupedData: ComputedBarProps[] | undefined;\n}> = ({ dateFormatter, categories, categoryDecorator, categoryColor, datum, groupedData }) => (\n <Flexbox flexDirection=\"column\" margin=\"16px\" gap=\"0\">\n <Flexbox flexDirection=\"row\" gap=\"8px\">\n <Text fontWeight=\"400\" fontSize=\"14px\">\n Date:\n </Text>\n <Text fontWeight=\"700\" fontSize=\"14px\">\n {dateFormatter(datum.data.key as Date)}\n </Text>\n </Flexbox>\n <div style={{ width: '100%', height: '1px', backgroundColor: '#858585', margin: '8px 0' }} />\n <Flexbox flexDirection=\"row\" gap=\"8px\">\n <Text fontWeight=\"400\" fontSize=\"14px\">\n Total:\n </Text>\n <Text fontWeight=\"600\" fontSize=\"14px\">\n {groupedData?.reduce((acc, d) => acc + d.value, 0)}\n </Text>\n </Flexbox>\n <Flexbox flexDirection=\"column\" marginTop=\"4px\" gap=\"8px\">\n {categories.map((category) => {\n const value = groupedData?.find((d) => d.category === category)?.value;\n const color = categoryColor(category);\n return value ? (\n <Flexbox key={category} alignItems=\"center\" gap=\"8px\">\n <div style={{ width: '16px', height: '16px', backgroundColor: color }} />\n <Text fontWeight=\"400\" fontSize=\"14px\" lineHeight=\"18px\">\n {categoryDecorator ? categoryDecorator(category) : category}\n </Text>\n <Text fontWeight=\"600\" fontSize=\"14px\" lineHeight=\"18px\">\n {value}\n </Text>\n </Flexbox>\n ) : null;\n })}\n </Flexbox>\n </Flexbox>\n);\n"],"names":["COMPONENT_NAME","CLASSNAME","BarChartBars","forwardRef","props","ref","category","forwardedProps","_objectWithoutProperties","_excluded","barProps","barRole","bars","barWidth","cache","categories","colorScale","direction","disableAnimations","format","gap","getBarAnchorProps","hasCategory","id","isBarSelected","labelDecorator","onBarClick","scaleX","scaleY","tooltipVariant","tooltipDecorator","xScaleType","useBarChartContext","filteredBarChartBars","filter","bar","value","categoryIndex","indexOf","categoryLength","length","React","createElement","StyledBarChartBars","_extends","key","role","barLength","map","index","to","data","from","current","undefined","groupedBars","b","getTime","Bar","color","dataset","groupedData","isSelected","Boolean","maxHeight","cumulativeValue","anchorProps","onClick","orientation","BarOrientation","vertical","previousData","scale","scalePosition","width","height","className","displayName","BarChartGroupedTooltip","_ref","dateFormatter","categoryDecorator","categoryColor","datum","Flexbox","flexDirection","margin","Text","fontWeight","fontSize","style","backgroundColor","reduce","acc","d","marginTop","_groupedData$find","find","alignItems","lineHeight"],"mappings":"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"}
|
|
@@ -1,139 +0,0 @@
|
|
|
1
|
-
import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
-
import React__default, { forwardRef, useMemo } from 'react';
|
|
3
|
-
import classNames from 'classnames';
|
|
4
|
-
import { RedsiftColorGreenD1, RedsiftColorRedD1, RedsiftColorNeutralBlack, useTheme, isComponent } from '@redsift/design-system';
|
|
5
|
-
import { StyledBarChartSection } from './styles.js';
|
|
6
|
-
import { useBarChartContext, BarChartContext } from './context.js';
|
|
7
|
-
import { getAxisType } from '../Axis/Axis.js';
|
|
8
|
-
|
|
9
|
-
const _excluded = ["className", "from", "to", "color", "title", "titlePosition", "scaleX", "scaleY", "children", "direction"];
|
|
10
|
-
const COMPONENT_NAME = 'BarChartSection';
|
|
11
|
-
const CLASSNAME = 'redsift-barchart-section';
|
|
12
|
-
const BarChartSection = /*#__PURE__*/forwardRef((props, ref) => {
|
|
13
|
-
const {
|
|
14
|
-
className,
|
|
15
|
-
from = 0,
|
|
16
|
-
to = 1,
|
|
17
|
-
color,
|
|
18
|
-
title,
|
|
19
|
-
titlePosition = 'center',
|
|
20
|
-
scaleX,
|
|
21
|
-
scaleY,
|
|
22
|
-
children: propsChildren,
|
|
23
|
-
direction
|
|
24
|
-
} = props,
|
|
25
|
-
forwardedProps = _objectWithoutProperties(props, _excluded);
|
|
26
|
-
const {
|
|
27
|
-
textColor,
|
|
28
|
-
backgroundColor
|
|
29
|
-
} = useMemo(() => {
|
|
30
|
-
if (color === 'green') {
|
|
31
|
-
return {
|
|
32
|
-
textColor: RedsiftColorGreenD1,
|
|
33
|
-
backgroundColor: '#F7FBF9'
|
|
34
|
-
};
|
|
35
|
-
} else if (color === 'red') {
|
|
36
|
-
return {
|
|
37
|
-
textColor: RedsiftColorRedD1,
|
|
38
|
-
backgroundColor: '#FFF7F7'
|
|
39
|
-
};
|
|
40
|
-
} else if (color === undefined) {
|
|
41
|
-
return {
|
|
42
|
-
textColor: RedsiftColorNeutralBlack,
|
|
43
|
-
backgroundColor: undefined
|
|
44
|
-
};
|
|
45
|
-
}
|
|
46
|
-
return color;
|
|
47
|
-
}, [color]);
|
|
48
|
-
const theme = useTheme();
|
|
49
|
-
const context = useBarChartContext();
|
|
50
|
-
const {
|
|
51
|
-
chartHeight,
|
|
52
|
-
chartWidth,
|
|
53
|
-
margins,
|
|
54
|
-
disableAnimations,
|
|
55
|
-
xAxisTickValues,
|
|
56
|
-
xAxisTickPadding,
|
|
57
|
-
xAxisTickRotation,
|
|
58
|
-
xAxisTickSize,
|
|
59
|
-
xAxisTickFormat,
|
|
60
|
-
xAxisTickRemodelling,
|
|
61
|
-
xAxisVariant,
|
|
62
|
-
yAxisTickValues,
|
|
63
|
-
yAxisTickPadding,
|
|
64
|
-
yAxisTickRotation,
|
|
65
|
-
yAxisTickSize,
|
|
66
|
-
yAxisTickFormat,
|
|
67
|
-
yAxisTickRemodelling,
|
|
68
|
-
yAxisVariant
|
|
69
|
-
} = context;
|
|
70
|
-
const sectionHeight = Math.max(0, Math.min(1, to - from)) * chartHeight;
|
|
71
|
-
const sectionY = Math.max(0, Math.min(1, from)) * chartHeight;
|
|
72
|
-
const titleX = titlePosition === 'center' ? chartWidth / 2 : titlePosition === 'right' ? chartWidth - 10 : 10;
|
|
73
|
-
const titleAnchor = titlePosition === 'center' ? 'middle' : titlePosition === 'right' ? 'end' : 'start';
|
|
74
|
-
const children = useMemo(() => {
|
|
75
|
-
const renderedChildren = [];
|
|
76
|
-
React__default.Children.forEach(propsChildren, child => {
|
|
77
|
-
if (! /*#__PURE__*/React__default.isValidElement(child)) return;
|
|
78
|
-
const isX = getAxisType(child.props.position) === 'x';
|
|
79
|
-
let enhancedChild = child;
|
|
80
|
-
if (isComponent('Axis')(child)) {
|
|
81
|
-
var _ref;
|
|
82
|
-
enhancedChild = /*#__PURE__*/React__default.cloneElement(child, _objectSpread2({
|
|
83
|
-
key: child.key || `axis-${child.props.position}`,
|
|
84
|
-
chartWidth,
|
|
85
|
-
chartHeight,
|
|
86
|
-
sectionHeight,
|
|
87
|
-
scale: isX ? scaleX : scaleY,
|
|
88
|
-
x: child.props.position === 'right' ? chartWidth : 0,
|
|
89
|
-
y: child.props.position === 'bottom' ? sectionHeight : child.props.position === 'top' ? 0 : sectionHeight,
|
|
90
|
-
disableAnimations,
|
|
91
|
-
length: isX ? chartWidth : sectionHeight,
|
|
92
|
-
tickValues: (_ref = isX ? xAxisTickValues : yAxisTickValues) !== null && _ref !== void 0 ? _ref : 8,
|
|
93
|
-
tickPadding: isX ? xAxisTickPadding : yAxisTickPadding,
|
|
94
|
-
tickRotation: isX ? xAxisTickRotation : yAxisTickRotation,
|
|
95
|
-
tickSize: isX ? xAxisTickSize : yAxisTickSize,
|
|
96
|
-
tickFormat: isX ? xAxisTickFormat : yAxisTickFormat,
|
|
97
|
-
tickRemodelling: isX ? xAxisTickRemodelling : yAxisTickRemodelling,
|
|
98
|
-
variant: isX ? xAxisVariant : yAxisVariant,
|
|
99
|
-
textColor: isX ? undefined : color,
|
|
100
|
-
tickToColor: (_, index) => index !== 0
|
|
101
|
-
}, child.props));
|
|
102
|
-
}
|
|
103
|
-
renderedChildren.push(enhancedChild);
|
|
104
|
-
});
|
|
105
|
-
return renderedChildren;
|
|
106
|
-
}, [propsChildren]);
|
|
107
|
-
return /*#__PURE__*/React__default.createElement(BarChartContext.Provider, {
|
|
108
|
-
value: _objectSpread2(_objectSpread2({}, context), {}, {
|
|
109
|
-
scaleX: scaleX,
|
|
110
|
-
scaleY: scaleY,
|
|
111
|
-
direction,
|
|
112
|
-
sectionHeight
|
|
113
|
-
})
|
|
114
|
-
}, /*#__PURE__*/React__default.createElement(StyledBarChartSection, _extends({}, forwardedProps, {
|
|
115
|
-
className: classNames(BarChartSection.className, className),
|
|
116
|
-
transform: `translate(${margins.left},${(margins.top || 0) + sectionY})`,
|
|
117
|
-
ref: ref,
|
|
118
|
-
$theme: theme,
|
|
119
|
-
$textColor: textColor
|
|
120
|
-
}), backgroundColor ? /*#__PURE__*/React__default.createElement("rect", {
|
|
121
|
-
x: 0,
|
|
122
|
-
y: 0,
|
|
123
|
-
width: chartWidth,
|
|
124
|
-
height: sectionHeight,
|
|
125
|
-
fill: backgroundColor
|
|
126
|
-
}) : null, title && /*#__PURE__*/React__default.createElement("text", {
|
|
127
|
-
className: "title colored",
|
|
128
|
-
x: titleX,
|
|
129
|
-
y: direction === 'up' ? 8 : direction === 'down' ? sectionHeight - 8 : sectionHeight / 2,
|
|
130
|
-
textAnchor: titleAnchor,
|
|
131
|
-
fontSize: 12,
|
|
132
|
-
dominantBaseline: direction === 'up' ? 'hanging' : direction === 'down' ? 'auto' : 'middle'
|
|
133
|
-
}, title), children));
|
|
134
|
-
});
|
|
135
|
-
BarChartSection.className = CLASSNAME;
|
|
136
|
-
BarChartSection.displayName = COMPONENT_NAME;
|
|
137
|
-
|
|
138
|
-
export { BarChartSection };
|
|
139
|
-
//# sourceMappingURL=BarChartSection.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BarChartSection.js","sources":["../../../src/components/BarChart/BarChartSection.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useMemo } from 'react';\nimport classNames from 'classnames';\n\nimport {\n Comp,\n isComponent,\n RedsiftColorGreenD1,\n RedsiftColorNeutralBlack,\n RedsiftColorRedD1,\n useTheme,\n} from '@redsift/design-system';\n\nimport { BarChartSectionProps } from './types';\nimport { StyledBarChartSection } from './styles';\nimport { BarChartContext, useBarChartContext } from './context';\nimport { getAxisType } from '../Axis';\n\nconst COMPONENT_NAME = 'BarChartSection';\nconst CLASSNAME = 'redsift-barchart-section';\n\nexport const BarChartSection: Comp<BarChartSectionProps, SVGGElement> = forwardRef((props, ref) => {\n const {\n className,\n from = 0,\n to = 1,\n color,\n title,\n titlePosition = 'center',\n scaleX,\n scaleY,\n children: propsChildren,\n direction,\n ...forwardedProps\n } = props;\n\n const { textColor, backgroundColor } = useMemo(() => {\n if (color === 'green') {\n return {\n textColor: RedsiftColorGreenD1,\n backgroundColor: '#F7FBF9',\n };\n } else if (color === 'red') {\n return {\n textColor: RedsiftColorRedD1,\n backgroundColor: '#FFF7F7',\n };\n } else if (color === undefined) {\n return {\n textColor: RedsiftColorNeutralBlack,\n backgroundColor: undefined,\n };\n }\n return color;\n }, [color]);\n\n const theme = useTheme();\n\n const context = useBarChartContext();\n const {\n chartHeight,\n chartWidth,\n margins,\n disableAnimations,\n xAxisTickValues,\n xAxisTickPadding,\n xAxisTickRotation,\n xAxisTickSize,\n xAxisTickFormat,\n xAxisTickRemodelling,\n xAxisVariant,\n yAxisTickValues,\n yAxisTickPadding,\n yAxisTickRotation,\n yAxisTickSize,\n yAxisTickFormat,\n yAxisTickRemodelling,\n yAxisVariant,\n } = context;\n\n const sectionHeight = Math.max(0, Math.min(1, to - from)) * chartHeight;\n const sectionY = Math.max(0, Math.min(1, from)) * chartHeight;\n\n const titleX = titlePosition === 'center' ? chartWidth / 2 : titlePosition === 'right' ? chartWidth - 10 : 10;\n\n const titleAnchor = titlePosition === 'center' ? 'middle' : titlePosition === 'right' ? 'end' : 'start';\n\n const children = useMemo(() => {\n const renderedChildren: React.ReactElement[] = [];\n\n React.Children.forEach(propsChildren, (child) => {\n if (!React.isValidElement(child)) return;\n const isX = getAxisType(child.props.position) === 'x';\n\n let enhancedChild = child;\n\n if (isComponent('Axis')(child)) {\n enhancedChild = React.cloneElement(child, {\n key: child.key || `axis-${child.props.position}`,\n chartWidth,\n chartHeight,\n sectionHeight,\n scale: isX ? scaleX : scaleY,\n x: child.props.position === 'right' ? chartWidth : 0,\n y: child.props.position === 'bottom' ? sectionHeight : child.props.position === 'top' ? 0 : sectionHeight,\n disableAnimations,\n length: isX ? chartWidth : sectionHeight,\n tickValues: (isX ? xAxisTickValues : yAxisTickValues) ?? 8,\n tickPadding: isX ? xAxisTickPadding : yAxisTickPadding,\n tickRotation: isX ? xAxisTickRotation : yAxisTickRotation,\n tickSize: isX ? xAxisTickSize : yAxisTickSize,\n tickFormat: isX ? xAxisTickFormat : yAxisTickFormat,\n tickRemodelling: isX ? xAxisTickRemodelling : yAxisTickRemodelling,\n variant: isX ? xAxisVariant : yAxisVariant,\n textColor: isX ? undefined : color,\n tickToColor: (_: never, index: number) => index !== 0,\n ...child.props,\n });\n }\n\n renderedChildren.push(enhancedChild);\n });\n\n return renderedChildren;\n }, [propsChildren]);\n\n return (\n <BarChartContext.Provider\n value={{\n ...context,\n scaleX: scaleX!,\n scaleY: scaleY!,\n direction,\n sectionHeight,\n }}\n >\n <StyledBarChartSection\n {...forwardedProps}\n className={classNames(BarChartSection.className, className)}\n transform={`translate(${margins.left},${(margins.top || 0) + sectionY})`}\n ref={ref as RefObject<SVGGElement>}\n $theme={theme}\n $textColor={textColor}\n >\n {backgroundColor ? <rect x={0} y={0} width={chartWidth} height={sectionHeight} fill={backgroundColor} /> : null}\n {title && (\n <text\n className=\"title colored\"\n x={titleX}\n y={direction === 'up' ? 8 : direction === 'down' ? sectionHeight - 8 : sectionHeight / 2}\n textAnchor={titleAnchor}\n fontSize={12}\n dominantBaseline={direction === 'up' ? 'hanging' : direction === 'down' ? 'auto' : 'middle'}\n >\n {title}\n </text>\n )}\n {children}\n </StyledBarChartSection>\n </BarChartContext.Provider>\n );\n});\n\nBarChartSection.className = CLASSNAME;\nBarChartSection.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","BarChartSection","forwardRef","props","ref","className","from","to","color","title","titlePosition","scaleX","scaleY","children","propsChildren","direction","forwardedProps","_objectWithoutProperties","_excluded","textColor","backgroundColor","useMemo","RedsiftColorGreenD1","RedsiftColorRedD1","undefined","RedsiftColorNeutralBlack","theme","useTheme","context","useBarChartContext","chartHeight","chartWidth","margins","disableAnimations","xAxisTickValues","xAxisTickPadding","xAxisTickRotation","xAxisTickSize","xAxisTickFormat","xAxisTickRemodelling","xAxisVariant","yAxisTickValues","yAxisTickPadding","yAxisTickRotation","yAxisTickSize","yAxisTickFormat","yAxisTickRemodelling","yAxisVariant","sectionHeight","Math","max","min","sectionY","titleX","titleAnchor","renderedChildren","React","Children","forEach","child","isValidElement","isX","getAxisType","position","enhancedChild","isComponent","_ref","cloneElement","_objectSpread","key","scale","x","y","length","tickValues","tickPadding","tickRotation","tickSize","tickFormat","tickRemodelling","variant","tickToColor","_","index","push","createElement","BarChartContext","Provider","value","StyledBarChartSection","_extends","classNames","transform","left","top","$theme","$textColor","width","height","fill","textAnchor","fontSize","dominantBaseline","displayName"],"mappings":"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"}
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
-
import React__default, { forwardRef, useRef } from 'react';
|
|
3
|
-
import { scaleLinear } from 'd3';
|
|
4
|
-
import { StyledBarChart, StyledBarChartEmptyText } from './styles.js';
|
|
5
|
-
import { sizeToDimension } from './utils.js';
|
|
6
|
-
import { useTheme } from '@redsift/design-system';
|
|
7
|
-
import { Axis } from '../Axis/Axis.js';
|
|
8
|
-
|
|
9
|
-
const _excluded = ["className", "emptyComponent", "size", "localeText"];
|
|
10
|
-
const EmptyBarChart = /*#__PURE__*/forwardRef((props, ref) => {
|
|
11
|
-
const {
|
|
12
|
-
className,
|
|
13
|
-
emptyComponent,
|
|
14
|
-
size,
|
|
15
|
-
localeText
|
|
16
|
-
} = props,
|
|
17
|
-
forwardedProps = _objectWithoutProperties(props, _excluded);
|
|
18
|
-
const theme = useTheme();
|
|
19
|
-
const chartDimensions = sizeToDimension(size);
|
|
20
|
-
const width = chartDimensions.width;
|
|
21
|
-
const height = chartDimensions.height;
|
|
22
|
-
const margins = {
|
|
23
|
-
top: 16,
|
|
24
|
-
left: 16,
|
|
25
|
-
right: 16,
|
|
26
|
-
bottom: 32
|
|
27
|
-
};
|
|
28
|
-
const chartHeight = height - margins.top - margins.bottom;
|
|
29
|
-
const chartWidth = width - margins.left - margins.right;
|
|
30
|
-
const scaleRef = useRef();
|
|
31
|
-
if (!scaleRef.current) {
|
|
32
|
-
scaleRef.current = scaleLinear().domain([]).range([0, chartWidth]);
|
|
33
|
-
}
|
|
34
|
-
return /*#__PURE__*/React__default.createElement(StyledBarChart, _extends({}, forwardedProps, {
|
|
35
|
-
className: className,
|
|
36
|
-
ref: ref
|
|
37
|
-
}), emptyComponent !== null && emptyComponent !== void 0 ? emptyComponent : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledBarChartEmptyText, {
|
|
38
|
-
$maxWidth: width,
|
|
39
|
-
$textSize: chartDimensions.fontSize / 2,
|
|
40
|
-
$theme: theme
|
|
41
|
-
}, /*#__PURE__*/React__default.createElement("span", null, localeText === null || localeText === void 0 ? void 0 : localeText.emptyChartText)), /*#__PURE__*/React__default.createElement("svg", {
|
|
42
|
-
width: width,
|
|
43
|
-
height: height
|
|
44
|
-
}, /*#__PURE__*/React__default.createElement("g", {
|
|
45
|
-
transform: `translate(${margins.left},${margins.top})`
|
|
46
|
-
}, /*#__PURE__*/React__default.createElement(Axis, {
|
|
47
|
-
position: "bottom",
|
|
48
|
-
length: chartWidth,
|
|
49
|
-
scale: scaleRef.current,
|
|
50
|
-
x: 0,
|
|
51
|
-
y: chartHeight,
|
|
52
|
-
tickValues: 4
|
|
53
|
-
})))));
|
|
54
|
-
});
|
|
55
|
-
|
|
56
|
-
export { EmptyBarChart };
|
|
57
|
-
//# sourceMappingURL=EmptyBarChart.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"EmptyBarChart.js","sources":["../../../src/components/BarChart/EmptyBarChart.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useRef } from 'react';\nimport { scaleLinear as d3scaleLinear, ScaleLinear as d3ScaleLinear } from 'd3';\n\nimport { AnyScale } from '../../types';\nimport { BarChartProps } from './types';\nimport { StyledBarChart, StyledBarChartEmptyText } from './styles';\nimport { Axis } from '../Axis';\nimport { sizeToDimension } from './utils';\nimport { useTheme } from '@redsift/design-system';\n\nexport const EmptyBarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {\n const { className, emptyComponent, size, localeText, ...forwardedProps } = props;\n const theme = useTheme();\n\n const chartDimensions = sizeToDimension(size!);\n const width = chartDimensions.width;\n const height = chartDimensions.height;\n const margins = { top: 16, left: 16, right: 16, bottom: 32 };\n const chartHeight = height - margins.top - margins.bottom;\n const chartWidth = width - margins.left - margins.right;\n\n const scaleRef = useRef<d3ScaleLinear<number, number>>();\n if (!scaleRef.current) {\n scaleRef.current = d3scaleLinear().domain([]).range([0, chartWidth]);\n }\n\n return (\n <StyledBarChart {...forwardedProps} className={className} ref={ref as RefObject<HTMLDivElement>}>\n {emptyComponent ?? (\n <>\n <StyledBarChartEmptyText $maxWidth={width} $textSize={chartDimensions.fontSize / 2} $theme={theme}>\n <span>{localeText?.emptyChartText}</span>\n </StyledBarChartEmptyText>\n <svg width={width} height={height}>\n <g transform={`translate(${margins.left},${margins.top})`}>\n <Axis\n position=\"bottom\"\n length={chartWidth}\n scale={scaleRef.current as AnyScale}\n x={0}\n y={chartHeight}\n tickValues={4}\n />\n </g>\n </svg>\n </>\n )}\n </StyledBarChart>\n );\n});\n"],"names":["EmptyBarChart","forwardRef","props","ref","className","emptyComponent","size","localeText","forwardedProps","_objectWithoutProperties","_excluded","theme","useTheme","chartDimensions","sizeToDimension","width","height","margins","top","left","right","bottom","chartHeight","chartWidth","scaleRef","useRef","current","d3scaleLinear","domain","range","React","createElement","StyledBarChart","_extends","Fragment","StyledBarChartEmptyText","$maxWidth","$textSize","fontSize","$theme","emptyChartText","transform","Axis","position","length","scale","x","y","tickValues"],"mappings":";;;;;;;;;AAUO,MAAMA,aAAa,gBAAGC,UAAU,CAAgC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACrF,MAAM;MAAEC,SAAS;MAAEC,cAAc;MAAEC,IAAI;AAAEC,MAAAA,UAAAA;AAA8B,KAAC,GAAGL,KAAK;AAAxBM,IAAAA,cAAc,GAAAC,wBAAA,CAAKP,KAAK,EAAAQ,SAAA,CAAA,CAAA;AAChF,EAAA,MAAMC,KAAK,GAAGC,QAAQ,EAAE,CAAA;AAExB,EAAA,MAAMC,eAAe,GAAGC,eAAe,CAACR,IAAK,CAAC,CAAA;AAC9C,EAAA,MAAMS,KAAK,GAAGF,eAAe,CAACE,KAAK,CAAA;AACnC,EAAA,MAAMC,MAAM,GAAGH,eAAe,CAACG,MAAM,CAAA;AACrC,EAAA,MAAMC,OAAO,GAAG;AAAEC,IAAAA,GAAG,EAAE,EAAE;AAAEC,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,KAAK,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE,EAAA;GAAI,CAAA;EAC5D,MAAMC,WAAW,GAAGN,MAAM,GAAGC,OAAO,CAACC,GAAG,GAAGD,OAAO,CAACI,MAAM,CAAA;EACzD,MAAME,UAAU,GAAGR,KAAK,GAAGE,OAAO,CAACE,IAAI,GAAGF,OAAO,CAACG,KAAK,CAAA;AAEvD,EAAA,MAAMI,QAAQ,GAAGC,MAAM,EAAiC,CAAA;AACxD,EAAA,IAAI,CAACD,QAAQ,CAACE,OAAO,EAAE;AACrBF,IAAAA,QAAQ,CAACE,OAAO,GAAGC,WAAa,EAAE,CAACC,MAAM,CAAC,EAAE,CAAC,CAACC,KAAK,CAAC,CAAC,CAAC,EAAEN,UAAU,CAAC,CAAC,CAAA;AACtE,GAAA;EAEA,oBACEO,cAAA,CAAAC,aAAA,CAACC,cAAc,EAAAC,QAAA,KAAKzB,cAAc,EAAA;AAAEJ,IAAAA,SAAS,EAAEA,SAAU;AAACD,IAAAA,GAAG,EAAEA,GAAAA;AAAiC,GAAA,CAAA,EAC7FE,cAAc,KAAdA,IAAAA,IAAAA,cAAc,cAAdA,cAAc,gBACbyB,cAAA,CAAAC,aAAA,CAAAD,cAAA,CAAAI,QAAA,EAAA,IAAA,eACEJ,cAAA,CAAAC,aAAA,CAACI,uBAAuB,EAAA;AAACC,IAAAA,SAAS,EAAErB,KAAM;AAACsB,IAAAA,SAAS,EAAExB,eAAe,CAACyB,QAAQ,GAAG,CAAE;AAACC,IAAAA,MAAM,EAAE5B,KAAAA;AAAM,GAAA,eAChGmB,cAAA,CAAAC,aAAA,CAAOxB,MAAAA,EAAAA,IAAAA,EAAAA,UAAU,aAAVA,UAAU,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAVA,UAAU,CAAEiC,cAAqB,CACjB,CAAC,eAC1BV,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKhB,IAAAA,KAAK,EAAEA,KAAM;AAACC,IAAAA,MAAM,EAAEA,MAAAA;GACzBc,eAAAA,cAAA,CAAAC,aAAA,CAAA,GAAA,EAAA;IAAGU,SAAS,EAAG,aAAYxB,OAAO,CAACE,IAAK,CAAGF,CAAAA,EAAAA,OAAO,CAACC,GAAI,CAAA,CAAA,CAAA;AAAG,GAAA,eACxDY,cAAA,CAAAC,aAAA,CAACW,IAAI,EAAA;AACHC,IAAAA,QAAQ,EAAC,QAAQ;AACjBC,IAAAA,MAAM,EAAErB,UAAW;IACnBsB,KAAK,EAAErB,QAAQ,CAACE,OAAoB;AACpCoB,IAAAA,CAAC,EAAE,CAAE;AACLC,IAAAA,CAAC,EAAEzB,WAAY;AACf0B,IAAAA,UAAU,EAAE,CAAA;AAAE,GACf,CACA,CACA,CACL,CAEU,CAAC,CAAA;AAErB,CAAC;;;;"}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
-
import React__default, { forwardRef } from 'react';
|
|
3
|
-
import { StyledBarChart } from './styles.js';
|
|
4
|
-
|
|
5
|
-
const _excluded = ["className"];
|
|
6
|
-
const LoadingBarChart = /*#__PURE__*/forwardRef((props, ref) => {
|
|
7
|
-
const {
|
|
8
|
-
className
|
|
9
|
-
} = props,
|
|
10
|
-
forwardedProps = _objectWithoutProperties(props, _excluded);
|
|
11
|
-
return /*#__PURE__*/React__default.createElement(StyledBarChart, _extends({}, forwardedProps, {
|
|
12
|
-
className: className,
|
|
13
|
-
ref: ref
|
|
14
|
-
}), "Loading...");
|
|
15
|
-
});
|
|
16
|
-
|
|
17
|
-
export { LoadingBarChart };
|
|
18
|
-
//# sourceMappingURL=LoadingBarChart.js.map
|