@aivenio/aquarium 2.3.2 → 2.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/_variables.scss +49 -0
- package/dist/atoms.cjs +55 -0
- package/dist/atoms.mjs +55 -0
- package/dist/charts.cjs +1166 -325
- package/dist/charts.mjs +1167 -328
- package/dist/src/charts/AreaChart/AreaChart.d.ts +2 -1
- package/dist/src/charts/AreaChart/AreaChart.js +14 -30
- package/dist/src/charts/BarChart/BarChart.d.ts +2 -1
- package/dist/src/charts/BarChart/BarChart.js +17 -21
- package/dist/src/charts/DefaultPalette/DefaultPalette.d.ts +15 -0
- package/dist/src/charts/DefaultPalette/DefaultPalette.js +23 -0
- package/dist/src/charts/Legend/Legend.d.ts +4 -1
- package/dist/src/charts/Legend/Legend.js +25 -3
- package/dist/src/charts/LineChart/LineChart.d.ts +2 -1
- package/dist/src/charts/LineChart/LineChart.js +17 -32
- package/dist/src/charts/PieChart/DoughnutChart.d.ts +2 -1
- package/dist/src/charts/PieChart/DoughnutChart.js +16 -4
- package/dist/src/charts/PieChart/PieChart.d.ts +3 -2
- package/dist/src/charts/PieChart/PieChart.js +17 -2
- package/dist/src/charts/PieChart/renderPieChildren.d.ts +5 -1
- package/dist/src/charts/PieChart/renderPieChildren.js +7 -4
- package/dist/src/charts/Tooltip/Tooltip.js +2 -2
- package/dist/src/charts/{PieChart → Tooltip}/TooltipContentWrapper.d.ts +2 -1
- package/dist/src/charts/Tooltip/TooltipContentWrapper.js +37 -0
- package/dist/src/charts/hooks/index.d.ts +1 -0
- package/dist/src/charts/hooks/index.js +2 -0
- package/dist/src/charts/hooks/useDefaultColor.d.ts +1 -0
- package/dist/src/charts/hooks/useDefaultColor.js +7 -0
- package/dist/src/charts/hooks/useDefaultColor.spec.d.ts +1 -0
- package/dist/src/charts/hooks/useDefaultColor.spec.js +28 -0
- package/dist/src/charts/index.d.ts +2 -0
- package/dist/src/charts/index.js +3 -1
- package/dist/src/charts/lib/utils.d.ts +5 -1
- package/dist/src/charts/lib/utils.js +27 -1
- package/dist/src/molecules/Combobox/Combobox.d.ts +6 -5
- package/dist/src/molecules/Combobox/Combobox.js +21 -12
- package/dist/src/molecules/DatePicker/Calendar.js +2 -2
- package/dist/src/molecules/DatePicker/RangeCalendar.js +3 -3
- package/dist/src/molecules/MultiSelect/MultiSelect.d.ts +5 -11
- package/dist/src/molecules/MultiSelect/MultiSelect.js +2 -9
- package/dist/src/molecules/Section/Section.js +7 -2
- package/dist/src/molecules/Select/utils.d.ts +3 -0
- package/dist/src/molecules/Select/utils.js +7 -0
- package/dist/src/tokens/tokens.json +55 -0
- package/dist/styles.css +75 -20
- package/dist/system.cjs +143 -78
- package/dist/system.mjs +101 -36
- package/dist/tokens.json +55 -0
- package/dist/tsconfig.module.tsbuildinfo +1 -1
- package/dist/types/tailwindGenerated.d.ts +1 -1
- package/package.json +1 -1
- package/dist/src/charts/PieChart/TooltipContentWrapper.js +0 -31
@@ -1,11 +1,12 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import { Area as _Area, AreaChart as _AreaChart, type AreaProps } from 'recharts';
|
3
3
|
import { type ContainerProps } from '../../../src/charts/Container/Container';
|
4
|
+
import { type PaletteProps } from '../../../src/charts/DefaultPalette/DefaultPalette';
|
4
5
|
import { type ChartProps } from '../../../src/charts/lib/utils';
|
5
6
|
type ComposedAreaChart = {
|
6
7
|
Area: typeof Area;
|
7
8
|
};
|
8
|
-
type AreaChartProps = ChartProps & ContainerProps & React.ComponentProps<typeof _AreaChart>;
|
9
|
+
type AreaChartProps = ChartProps & ContainerProps & PaletteProps & React.ComponentProps<typeof _AreaChart>;
|
9
10
|
export declare const AreaChart: ComposedAreaChart & React.FC<AreaChartProps>;
|
10
11
|
export declare const Area: ((props: Omit<AreaProps, "ref">) => React.JSX.Element) & typeof _Area;
|
11
12
|
export {};
|
@@ -11,47 +11,31 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
11
11
|
};
|
12
12
|
import React from 'react';
|
13
13
|
import { Area as _Area, AreaChart as _AreaChart } from 'recharts';
|
14
|
-
import { Axis, renderXAxis, renderXTimeAxis, renderYAxis } from '../../../src/charts/Axis/Axis';
|
15
14
|
import { ResponsiveContainer } from '../../../src/charts/Container/Container';
|
15
|
+
import { DefaultPalette } from '../../../src/charts/DefaultPalette/DefaultPalette';
|
16
16
|
import { CartesianGrid } from '../../../src/charts/Grid/Grid';
|
17
|
-
import {
|
17
|
+
import { useDefaultColor } from '../../../src/charts/hooks';
|
18
|
+
import { DEFAULT_MARGINS, extractChildByDisplayName, renderChartChildren } from '../../../src/charts/lib/utils';
|
18
19
|
import { Tooltip } from '../../../src/charts/Tooltip/Tooltip';
|
19
|
-
const renderChildren = (props) => {
|
20
|
-
return React.Children.map(props.children, (child) => {
|
21
|
-
if (!child) {
|
22
|
-
return child;
|
23
|
-
}
|
24
|
-
switch (getDisplayName(child.type)) {
|
25
|
-
case Axis.XAxis.displayName: {
|
26
|
-
return renderXAxis(child, props);
|
27
|
-
}
|
28
|
-
case Axis.XAxis.Time.displayName: {
|
29
|
-
return renderXTimeAxis(child, props);
|
30
|
-
}
|
31
|
-
case Axis.YAxis.displayName: {
|
32
|
-
return renderYAxis(child, props);
|
33
|
-
}
|
34
|
-
default: {
|
35
|
-
return child;
|
36
|
-
}
|
37
|
-
}
|
38
|
-
});
|
39
|
-
};
|
40
20
|
export const AreaChart = (_a) => {
|
41
|
-
var { isBusy, busyLabel, margin = DEFAULT_MARGINS } = _a, props = __rest(_a, ["isBusy", "busyLabel", "margin"]);
|
21
|
+
var { isBusy, busyLabel, margin = DEFAULT_MARGINS, palette } = _a, props = __rest(_a, ["isBusy", "busyLabel", "margin", "palette"]);
|
42
22
|
const [tooltip] = extractChildByDisplayName(props.children, Tooltip.displayName);
|
43
|
-
return (React.createElement(
|
44
|
-
React.createElement(
|
45
|
-
React.createElement(
|
46
|
-
|
23
|
+
return (React.createElement(DefaultPalette, { palette: palette },
|
24
|
+
React.createElement(ResponsiveContainer, { width: props.width, height: props.height, isBusy: isBusy, busyLabel: busyLabel },
|
25
|
+
React.createElement(_AreaChart, { accessibilityLayer: tooltip !== undefined, data: props.data, style: { stroke: '#fff', strokeWidth: 1 }, margin: margin },
|
26
|
+
React.createElement(CartesianGrid, null),
|
27
|
+
React.Children.map(props.children, (child) => renderChartChildren(child, props))))));
|
47
28
|
};
|
48
29
|
export const Area = Object.assign((props) => {
|
49
30
|
var _a;
|
50
|
-
|
31
|
+
const stroke = useDefaultColor(props.dataKey.toString(), props.stroke);
|
32
|
+
const fill = useDefaultColor(props.dataKey.toString(), (_a = props.fill) !== null && _a !== void 0 ? _a : stroke);
|
33
|
+
return (React.createElement(_Area, Object.assign({ type: "linear", strokeWidth: 2, dot: false }, props, { stroke: stroke, fill: fill, fillOpacity: 0.1, isAnimationActive: false })));
|
51
34
|
}, _Area);
|
52
35
|
Area.defaultProps = Object.assign({}, _Area.defaultProps, {
|
53
36
|
fillOpacity: 0.1,
|
54
37
|
fill: undefined,
|
38
|
+
stroke: undefined,
|
55
39
|
});
|
56
40
|
AreaChart.Area = Area;
|
57
|
-
//# sourceMappingURL=data:application/json;base64,
|
41
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQXJlYUNoYXJ0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NoYXJ0cy9BcmVhQ2hhcnQvQXJlYUNoYXJ0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUMxQixPQUFPLEVBQUUsSUFBSSxJQUFJLEtBQUssRUFBRSxTQUFTLElBQUksVUFBVSxFQUFrQixNQUFNLFVBQVUsQ0FBQztBQUVsRixPQUFPLEVBQXVCLG1CQUFtQixFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUFDMUYsT0FBTyxFQUFFLGNBQWMsRUFBcUIsTUFBTSwwQ0FBMEMsQ0FBQztBQUM3RixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFDckQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBQ25ELE9BQU8sRUFBbUIsZUFBZSxFQUFFLHlCQUF5QixFQUFFLG1CQUFtQixFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFDeEgsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBUXJELE1BQU0sQ0FBQyxNQUFNLFNBQVMsR0FBaUQsQ0FBQyxFQU12RSxFQUFFLEVBQUU7UUFObUUsRUFDdEUsTUFBTSxFQUNOLFNBQVMsRUFDVCxNQUFNLEdBQUcsZUFBZSxFQUN4QixPQUFPLE9BRVIsRUFESSxLQUFLLGNBTDhELDRDQU12RSxDQURTO0lBRVIsTUFBTSxDQUFDLE9BQU8sQ0FBQyxHQUFHLHlCQUF5QixDQUFDLEtBQUssQ0FBQyxRQUFRLEVBQUUsT0FBTyxDQUFDLFdBQVcsQ0FBQyxDQUFDO0lBRWpGLE9BQU8sQ0FDTCxvQkFBQyxjQUFjLElBQUMsT0FBTyxFQUFFLE9BQU87UUFDOUIsb0JBQUMsbUJBQW1CLElBQUMsS0FBSyxFQUFFLEtBQUssQ0FBQyxLQUFLLEVBQUUsTUFBTSxFQUFFLEtBQUssQ0FBQyxNQUFNLEVBQUUsTUFBTSxFQUFFLE1BQU0sRUFBRSxTQUFTLEVBQUUsU0FBUztZQUNqRyxvQkFBQyxVQUFVLElBQ1Qsa0JBQWtCLEVBQUUsT0FBTyxLQUFLLFNBQVMsRUFDekMsSUFBSSxFQUFFLEtBQUssQ0FBQyxJQUFJLEVBQ2hCLEtBQUssRUFBRSxFQUFFLE1BQU0sRUFBRSxNQUFNLEVBQUUsV0FBVyxFQUFFLENBQUMsRUFBRSxFQUN6QyxNQUFNLEVBQUUsTUFBTTtnQkFFZCxvQkFBQyxhQUFhLE9BQUc7Z0JBQ2hCLEtBQUssQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxRQUFRLEVBQUUsQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUFDLG1CQUFtQixDQUFDLEtBQUssRUFBRSxLQUFLLENBQUMsQ0FBQyxDQUN0RSxDQUNPLENBQ1AsQ0FDbEIsQ0FBQztBQUNKLENBQUMsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLElBQUksR0FBRyxNQUFNLENBQUMsTUFBTSxDQUFDLENBQUMsS0FBNkIsRUFBRSxFQUFFOztJQUNsRSxNQUFNLE1BQU0sR0FBRyxlQUFlLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxRQUFRLEVBQUUsRUFBRSxLQUFLLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDdkUsTUFBTSxJQUFJLEdBQUcsZUFBZSxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUMsUUFBUSxFQUFFLEVBQUUsTUFBQSxLQUFLLENBQUMsSUFBSSxtQ0FBSSxNQUFNLENBQUMsQ0FBQztJQUU3RSxPQUFPLENBQ0wsb0JBQUMsS0FBSyxrQkFDSixJQUFJLEVBQUMsUUFBUSxFQUNiLFdBQVcsRUFBRSxDQUFDLEVBQ2QsR0FBRyxFQUFFLEtBQUssSUFDTixLQUFLLElBQ1QsTUFBTSxFQUFFLE1BQU0sRUFDZCxJQUFJLEVBQUUsSUFBSSxFQUNWLFdBQVcsRUFBRSxHQUFHLEVBQ2hCLGlCQUFpQixFQUFFLEtBQUssSUFDeEIsQ0FDSCxDQUFDO0FBQ0osQ0FBQyxFQUFFLEtBQUssQ0FBQyxDQUFDO0FBRVYsSUFBSSxDQUFDLFlBQVksR0FBRyxNQUFNLENBQUMsTUFBTSxDQUFDLEVBQUUsRUFBRSxLQUFLLENBQUMsWUFBWSxFQUFFO0lBQ3hELFdBQVcsRUFBRSxHQUFHO0lBQ2hCLElBQUksRUFBRSxTQUFTO0lBQ2YsTUFBTSxFQUFFLFNBQVM7Q0FDbEIsQ0FBQyxDQUFDO0FBRUgsU0FBUyxDQUFDLElBQUksR0FBRyxJQUFJLENBQUMifQ==
|
@@ -1,13 +1,14 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import { Bar as _Bar, BarChart as _BarChart, type BarProps } from 'recharts';
|
3
3
|
import { type ContainerProps } from '../../../src/charts/Container/Container';
|
4
|
+
import { type PaletteProps } from '../../../src/charts/DefaultPalette/DefaultPalette';
|
4
5
|
import { type ChartProps } from '../../../src/charts/lib/utils';
|
5
6
|
import { Tooltip } from '../../../src/charts/Tooltip/Tooltip';
|
6
7
|
type ComposedBarChart = {
|
7
8
|
Bar: typeof Bar;
|
8
9
|
Tooltip: typeof Tooltip;
|
9
10
|
};
|
10
|
-
type BarChartProps = ChartProps & ContainerProps & React.ComponentProps<typeof _BarChart>;
|
11
|
+
type BarChartProps = ChartProps & ContainerProps & PaletteProps & React.ComponentProps<typeof _BarChart>;
|
11
12
|
export declare const BarChart: ComposedBarChart & React.FC<BarChartProps>;
|
12
13
|
export declare const Bar: ((props: Omit<BarProps, "ref">) => React.JSX.Element) & typeof _Bar;
|
13
14
|
export {};
|
@@ -11,31 +11,23 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
11
11
|
};
|
12
12
|
import React from 'react';
|
13
13
|
import { Bar as _Bar, BarChart as _BarChart, Rectangle } from 'recharts';
|
14
|
-
import { Axis, renderXAxis, renderXTimeAxis, renderYAxis } from '../../../src/charts/Axis/Axis';
|
15
14
|
import { ResponsiveContainer } from '../../../src/charts/Container/Container';
|
15
|
+
import { DefaultPalette } from '../../../src/charts/DefaultPalette/DefaultPalette';
|
16
16
|
import { CartesianGrid } from '../../../src/charts/Grid/Grid';
|
17
|
-
import {
|
17
|
+
import { useDefaultColor } from '../../../src/charts/hooks';
|
18
|
+
import { DEFAULT_MARGINS, extractChildByDisplayName, getDisplayName, renderChartChildren, } from '../../../src/charts/lib/utils';
|
18
19
|
import { Tooltip } from '../../../src/charts/Tooltip/Tooltip';
|
20
|
+
import { TooltipContentWrapper } from '../../../src/charts/Tooltip/TooltipContentWrapper';
|
19
21
|
export const BarChart = (_a) => {
|
20
|
-
var { isBusy, busyLabel, margin = DEFAULT_MARGINS } = _a, props = __rest(_a, ["isBusy", "busyLabel", "margin"]);
|
22
|
+
var { isBusy, busyLabel, margin = DEFAULT_MARGINS, palette } = _a, props = __rest(_a, ["isBusy", "busyLabel", "margin", "palette"]);
|
21
23
|
const [activeIndex, setActiveIndex] = React.useState(undefined);
|
22
24
|
const [tooltip] = extractChildByDisplayName(props.children, Tooltip.displayName);
|
23
25
|
const renderChildren = (props) => {
|
24
26
|
return React.Children.map(props.children, (child) => {
|
25
|
-
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
26
27
|
if (!child) {
|
27
28
|
return child;
|
28
29
|
}
|
29
30
|
switch (getDisplayName(child.type)) {
|
30
|
-
case Axis.XAxis.displayName: {
|
31
|
-
return renderXAxis(child, props);
|
32
|
-
}
|
33
|
-
case Axis.XAxis.Time.displayName: {
|
34
|
-
return renderXTimeAxis(child, props);
|
35
|
-
}
|
36
|
-
case Axis.YAxis.displayName: {
|
37
|
-
return renderYAxis(child, props);
|
38
|
-
}
|
39
31
|
case _Bar.displayName: {
|
40
32
|
return React.cloneElement(child, {
|
41
33
|
/*
|
@@ -47,20 +39,24 @@ export const BarChart = (_a) => {
|
|
47
39
|
});
|
48
40
|
}
|
49
41
|
case Tooltip.displayName: {
|
50
|
-
return React.createElement(Tooltip, Object.assign({}, child.props, { cursor: false }));
|
42
|
+
return (React.createElement(Tooltip, Object.assign({}, child.props, { content: React.createElement(TooltipContentWrapper, { content: child.props.content, tooltipColor: "fill" }), cursor: false })));
|
51
43
|
}
|
52
44
|
default: {
|
53
|
-
return child;
|
45
|
+
return renderChartChildren(child, props);
|
54
46
|
}
|
55
47
|
}
|
56
48
|
});
|
57
49
|
};
|
58
|
-
return (React.createElement(
|
59
|
-
React.createElement(
|
60
|
-
React.createElement(
|
61
|
-
|
50
|
+
return (React.createElement(DefaultPalette, { palette: palette },
|
51
|
+
React.createElement(ResponsiveContainer, { width: props.width, height: props.height, isBusy: isBusy, busyLabel: busyLabel },
|
52
|
+
React.createElement(_BarChart, Object.assign({}, props, { accessibilityLayer: tooltip !== undefined, barCategoryGap: "5%", style: { stroke: '#fff', strokeWidth: 1 }, onMouseMove: (state) => setActiveIndex(state.isTooltipActive ? state.activeTooltipIndex : undefined), onMouseLeave: () => setActiveIndex(undefined), margin: margin }),
|
53
|
+
React.createElement(CartesianGrid, null),
|
54
|
+
renderChildren(props)))));
|
62
55
|
};
|
63
|
-
export const Bar = Object.assign((props) =>
|
56
|
+
export const Bar = Object.assign((props) => {
|
57
|
+
const fill = useDefaultColor(props.dataKey.toString(), props.fill);
|
58
|
+
return React.createElement(_Bar, Object.assign({}, props, { fill: fill, isAnimationActive: false }));
|
59
|
+
}, _Bar);
|
64
60
|
BarChart.Bar = Bar;
|
65
61
|
BarChart.Tooltip = Tooltip;
|
66
|
-
//# sourceMappingURL=data:application/json;base64,
|
62
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQmFyQ2hhcnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY2hhcnRzL0JhckNoYXJ0L0JhckNoYXJ0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUMxQixPQUFPLEVBQUUsR0FBRyxJQUFJLElBQUksRUFBRSxRQUFRLElBQUksU0FBUyxFQUFpQixTQUFTLEVBQUUsTUFBTSxVQUFVLENBQUM7QUFFeEYsT0FBTyxFQUF1QixtQkFBbUIsRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBQzFGLE9BQU8sRUFBRSxjQUFjLEVBQXFCLE1BQU0sMENBQTBDLENBQUM7QUFDN0YsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBQ3JELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztBQUNuRCxPQUFPLEVBRUwsZUFBZSxFQUNmLHlCQUF5QixFQUN6QixjQUFjLEVBQ2QsbUJBQW1CLEdBQ3BCLE1BQU0sc0JBQXNCLENBQUM7QUFDOUIsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQ3JELE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLDBDQUEwQyxDQUFDO0FBU2pGLE1BQU0sQ0FBQyxNQUFNLFFBQVEsR0FBK0MsQ0FBQyxFQU1wRSxFQUFFLEVBQUU7UUFOZ0UsRUFDbkUsTUFBTSxFQUNOLFNBQVMsRUFDVCxNQUFNLEdBQUcsZUFBZSxFQUN4QixPQUFPLE9BRVIsRUFESSxLQUFLLGNBTDJELDRDQU1wRSxDQURTO0lBRVIsTUFBTSxDQUFDLFdBQVcsRUFBRSxjQUFjLENBQUMsR0FBRyxLQUFLLENBQUMsUUFBUSxDQUFxQixTQUFTLENBQUMsQ0FBQztJQUNwRixNQUFNLENBQUMsT0FBTyxDQUFDLEdBQUcseUJBQXlCLENBQUMsS0FBSyxDQUFDLFFBQVEsRUFBRSxPQUFPLENBQUMsV0FBVyxDQUFDLENBQUM7SUFFakYsTUFBTSxjQUFjLEdBQUcsQ0FBQyxLQUFvQixFQUFFLEVBQUU7UUFDOUMsT0FBTyxLQUFLLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsUUFBUSxFQUFFLENBQUMsS0FBSyxFQUFFLEVBQUU7WUFDbEQsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO2dCQUNYLE9BQU8sS0FBSyxDQUFDO1lBQ2YsQ0FBQztZQUVELFFBQVEsY0FBYyxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDO2dCQUNuQyxLQUFLLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQyxDQUFDO29CQUN0QixPQUFPLEtBQUssQ0FBQyxZQUFZLENBQVcsS0FBSyxFQUFFO3dCQUN6Qzs7OzsyQkFJRzt3QkFDSCxLQUFLLEVBQUUsQ0FBQyxLQUFVLEVBQUUsRUFBRSxDQUFDLENBQ3JCLG9CQUFDLFNBQVMsb0JBQUssS0FBSyxJQUFFLFNBQVMsRUFBRSxXQUFXLEtBQUssU0FBUyxDQUFDLENBQUMsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLFNBQVMsSUFBSSxDQUN4RjtxQkFDRixDQUFDLENBQUM7Z0JBQ0wsQ0FBQztnQkFFRCxLQUFLLE9BQU8sQ0FBQyxXQUFXLENBQUMsQ0FBQyxDQUFDO29CQUN6QixPQUFPLENBQ0wsb0JBQUMsT0FBTyxvQkFDRixLQUFLLENBQUMsS0FBSyxJQUNmLE9BQU8sRUFBRSxvQkFBQyxxQkFBcUIsSUFBQyxPQUFPLEVBQUUsS0FBSyxDQUFDLEtBQUssQ0FBQyxPQUFPLEVBQUUsWUFBWSxFQUFDLE1BQU0sR0FBRyxFQUNwRixNQUFNLEVBQUUsS0FBSyxJQUNiLENBQ0gsQ0FBQztnQkFDSixDQUFDO2dCQUVELE9BQU8sQ0FBQyxDQUFDLENBQUM7b0JBQ1IsT0FBTyxtQkFBbUIsQ0FBQyxLQUFLLEVBQUUsS0FBSyxDQUFDLENBQUM7Z0JBQzNDLENBQUM7WUFDSCxDQUFDO1FBQ0gsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDLENBQUM7SUFFRixPQUFPLENBQ0wsb0JBQUMsY0FBYyxJQUFDLE9BQU8sRUFBRSxPQUFPO1FBQzlCLG9CQUFDLG1CQUFtQixJQUFDLEtBQUssRUFBRSxLQUFLLENBQUMsS0FBSyxFQUFFLE1BQU0sRUFBRSxLQUFLLENBQUMsTUFBTSxFQUFFLE1BQU0sRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLFNBQVM7WUFDakcsb0JBQUMsU0FBUyxvQkFDSixLQUFLLElBQ1Qsa0JBQWtCLEVBQUUsT0FBTyxLQUFLLFNBQVMsRUFDekMsY0FBYyxFQUFDLElBQUksRUFDbkIsS0FBSyxFQUFFLEVBQUUsTUFBTSxFQUFFLE1BQU0sRUFBRSxXQUFXLEVBQUUsQ0FBQyxFQUFFLEVBQ3pDLFdBQVcsRUFBRSxDQUFDLEtBQUssRUFBRSxFQUFFLENBQUMsY0FBYyxDQUFDLEtBQUssQ0FBQyxlQUFlLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLEVBQ3BHLFlBQVksRUFBRSxHQUFHLEVBQUUsQ0FBQyxjQUFjLENBQUMsU0FBUyxDQUFDLEVBQzdDLE1BQU0sRUFBRSxNQUFNO2dCQUVkLG9CQUFDLGFBQWEsT0FBRztnQkFDaEIsY0FBYyxDQUFDLEtBQUssQ0FBQyxDQUNaLENBQ1EsQ0FDUCxDQUNsQixDQUFDO0FBQ0osQ0FBQyxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sR0FBRyxHQUFHLE1BQU0sQ0FBQyxNQUFNLENBQUMsQ0FBQyxLQUE0QixFQUFFLEVBQUU7SUFDaEUsTUFBTSxJQUFJLEdBQUcsZUFBZSxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUMsUUFBUSxFQUFFLEVBQUUsS0FBSyxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ25FLE9BQU8sb0JBQUMsSUFBSSxvQkFBSyxLQUFLLElBQUUsSUFBSSxFQUFFLElBQUksRUFBRSxpQkFBaUIsRUFBRSxLQUFLLElBQUksQ0FBQztBQUNuRSxDQUFDLEVBQUUsSUFBSSxDQUFDLENBQUM7QUFDVCxRQUFRLENBQUMsR0FBRyxHQUFHLEdBQUcsQ0FBQztBQUNuQixRQUFRLENBQUMsT0FBTyxHQUFHLE9BQU8sQ0FBQyJ9
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
type KeyToDefaultColor = (key: string) => string | undefined;
|
3
|
+
type DefaultPaletteContext = {
|
4
|
+
getDefaultColor: KeyToDefaultColor;
|
5
|
+
};
|
6
|
+
export declare const DefaultPaletteContext: React.Context<DefaultPaletteContext>;
|
7
|
+
export type PaletteProps = {
|
8
|
+
/**
|
9
|
+
* Optional prop whether to use primary or secondary palette for default colors.
|
10
|
+
* @default 'primary'
|
11
|
+
*/
|
12
|
+
palette?: 'primary' | 'secondary';
|
13
|
+
};
|
14
|
+
export declare const DefaultPalette: React.FC<React.PropsWithChildren<PaletteProps>>;
|
15
|
+
export {};
|
@@ -0,0 +1,23 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import tokens from '../../../src/tokens/tokens.json';
|
3
|
+
export const DefaultPaletteContext = React.createContext({ getDefaultColor: () => undefined });
|
4
|
+
const PRIMARY_CATEGORIAL = Object.values(tokens.chartColors.primaryCategorical);
|
5
|
+
const SECONDARY_CATEGORIAL = Object.values(tokens.chartColors.secondaryCategorical);
|
6
|
+
export const DefaultPalette = ({ palette = 'primary', children }) => {
|
7
|
+
// We don't want to trigger rerender when a new key is added to registeredKeys
|
8
|
+
// so we'll use a ref to store the keys.
|
9
|
+
const registeredKeys = React.useRef([]);
|
10
|
+
const colors = palette === 'primary' ? PRIMARY_CATEGORIAL : SECONDARY_CATEGORIAL;
|
11
|
+
// New keys are registerd in "first come, first serve" order.
|
12
|
+
const getDefaultColor = React.useCallback((key) => {
|
13
|
+
const keys = registeredKeys.current;
|
14
|
+
let index = keys.indexOf(key);
|
15
|
+
if (index === -1) {
|
16
|
+
// push() returns the new length of the array, so we need to subtract 1 to get the correct index.
|
17
|
+
index = registeredKeys.current.push(key) - 1;
|
18
|
+
}
|
19
|
+
return colors[index % colors.length];
|
20
|
+
}, [colors]);
|
21
|
+
return React.createElement(DefaultPaletteContext.Provider, { value: { getDefaultColor } }, children);
|
22
|
+
};
|
23
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRGVmYXVsdFBhbGV0dGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY2hhcnRzL0RlZmF1bHRQYWxldHRlL0RlZmF1bHRQYWxldHRlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFFMUIsT0FBTyxNQUFNLE1BQU0sd0JBQXdCLENBQUM7QUFRNUMsTUFBTSxDQUFDLE1BQU0scUJBQXFCLEdBQUcsS0FBSyxDQUFDLGFBQWEsQ0FBd0IsRUFBRSxlQUFlLEVBQUUsR0FBRyxFQUFFLENBQUMsU0FBUyxFQUFFLENBQUMsQ0FBQztBQUV0SCxNQUFNLGtCQUFrQixHQUFHLE1BQU0sQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDLFdBQVcsQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDO0FBQ2hGLE1BQU0sb0JBQW9CLEdBQUcsTUFBTSxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsV0FBVyxDQUFDLG9CQUFvQixDQUFDLENBQUM7QUFVcEYsTUFBTSxDQUFDLE1BQU0sY0FBYyxHQUFvRCxDQUFDLEVBQUUsT0FBTyxHQUFHLFNBQVMsRUFBRSxRQUFRLEVBQUUsRUFBRSxFQUFFO0lBQ25ILDhFQUE4RTtJQUM5RSx3Q0FBd0M7SUFDeEMsTUFBTSxjQUFjLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBVyxFQUFFLENBQUMsQ0FBQztJQUNsRCxNQUFNLE1BQU0sR0FBRyxPQUFPLEtBQUssU0FBUyxDQUFDLENBQUMsQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDLENBQUMsb0JBQW9CLENBQUM7SUFFakYsNkRBQTZEO0lBQzdELE1BQU0sZUFBZSxHQUFHLEtBQUssQ0FBQyxXQUFXLENBQ3ZDLENBQUMsR0FBVyxFQUFFLEVBQUU7UUFDZCxNQUFNLElBQUksR0FBRyxjQUFjLENBQUMsT0FBTyxDQUFDO1FBQ3BDLElBQUksS0FBSyxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsR0FBRyxDQUFDLENBQUM7UUFFOUIsSUFBSSxLQUFLLEtBQUssQ0FBQyxDQUFDLEVBQUUsQ0FBQztZQUNqQixpR0FBaUc7WUFDakcsS0FBSyxHQUFHLGNBQWMsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUMvQyxDQUFDO1FBQ0QsT0FBTyxNQUFNLENBQUMsS0FBSyxHQUFHLE1BQU0sQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUN2QyxDQUFDLEVBQ0QsQ0FBQyxNQUFNLENBQUMsQ0FDVCxDQUFDO0lBRUYsT0FBTyxvQkFBQyxxQkFBcUIsQ0FBQyxRQUFRLElBQUMsS0FBSyxFQUFFLEVBQUUsZUFBZSxFQUFFLElBQUcsUUFBUSxDQUFrQyxDQUFDO0FBQ2pILENBQUMsQ0FBQyJ9
|
@@ -1,4 +1,7 @@
|
|
1
1
|
import React from 'react';
|
2
|
-
import { type LegendProps as _LegendProps } from 'recharts';
|
2
|
+
import { type DefaultLegendContentProps, type LegendProps as _LegendProps } from 'recharts';
|
3
3
|
export type LegendProps = Omit<_LegendProps, 'ref'>;
|
4
4
|
export declare const Legend: React.ForwardRefExoticComponent<LegendProps & React.RefAttributes<HTMLDivElement>>;
|
5
|
+
export declare const LegendContentWrapper: ({ ref, content, ...props }: DefaultLegendContentProps & {
|
6
|
+
content: LegendProps["content"] | undefined;
|
7
|
+
}) => React.JSX.Element;
|
@@ -1,7 +1,19 @@
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
2
|
+
var t = {};
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
4
|
+
t[p] = s[p];
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
8
|
+
t[p[i]] = s[p[i]];
|
9
|
+
}
|
10
|
+
return t;
|
11
|
+
};
|
1
12
|
import React from 'react';
|
2
|
-
import { Legend as _Legend } from 'recharts';
|
13
|
+
import { DefaultLegendContent, Legend as _Legend, } from 'recharts';
|
14
|
+
import { DefaultPaletteContext } from '../DefaultPalette/DefaultPalette';
|
3
15
|
export const Legend = React.forwardRef((props, _ref) => {
|
4
|
-
return React.createElement(_Legend, Object.assign({}, props, { margin: Object.assign(Object.assign({}, props.margin), { top: 0 }) }));
|
16
|
+
return (React.createElement(_Legend, Object.assign({}, props, { margin: Object.assign(Object.assign({}, props.margin), { top: 0 }), content: React.createElement(LegendContentWrapper, { content: props.content }) })));
|
5
17
|
});
|
6
18
|
Legend.displayName = 'Legend';
|
7
19
|
Legend.defaultProps = {
|
@@ -12,4 +24,14 @@ Legend.defaultProps = {
|
|
12
24
|
verticalAlign: 'top',
|
13
25
|
margin: { top: 0 },
|
14
26
|
};
|
15
|
-
|
27
|
+
export const LegendContentWrapper = (_a) => {
|
28
|
+
var _b;
|
29
|
+
var { ref, content } = _a, props = __rest(_a, ["ref", "content"]);
|
30
|
+
const { getDefaultColor } = React.useContext(DefaultPaletteContext);
|
31
|
+
const payload = (_b = props.payload) === null || _b === void 0 ? void 0 : _b.map((entry) => {
|
32
|
+
var _a;
|
33
|
+
return (Object.assign(Object.assign({}, entry), { color: (_a = entry.color) !== null && _a !== void 0 ? _a : getDefaultColor('dataKey' in entry && typeof entry.dataKey === 'string' ? entry.dataKey : 'unknown') }));
|
34
|
+
});
|
35
|
+
return React.createElement(DefaultLegendContent, Object.assign({}, props, { payload: payload }));
|
36
|
+
};
|
37
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTGVnZW5kLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NoYXJ0cy9MZWdlbmQvTGVnZW5kLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUMxQixPQUFPLEVBQ0wsb0JBQW9CLEVBRXBCLE1BQU0sSUFBSSxPQUFPLEdBRWxCLE1BQU0sVUFBVSxDQUFDO0FBRWxCLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLGtDQUFrQyxDQUFDO0FBSXpFLE1BQU0sQ0FBQyxNQUFNLE1BQU0sR0FBRyxLQUFLLENBQUMsVUFBVSxDQUE4QixDQUFDLEtBQUssRUFBRSxJQUFJLEVBQUUsRUFBRTtJQUNsRixPQUFPLENBQ0wsb0JBQUMsT0FBTyxvQkFDRixLQUFLLElBQ1QsTUFBTSxrQ0FBTyxLQUFLLENBQUMsTUFBTSxLQUFFLEdBQUcsRUFBRSxDQUFDLEtBQ2pDLE9BQU8sRUFBRSxvQkFBQyxvQkFBb0IsSUFBQyxPQUFPLEVBQUUsS0FBSyxDQUFDLE9BQU8sR0FBSSxJQUN6RCxDQUNILENBQUM7QUFDSixDQUFDLENBQUMsQ0FBQztBQUVILE1BQU0sQ0FBQyxXQUFXLEdBQUcsUUFBUSxDQUFDO0FBQzlCLE1BQU0sQ0FBQyxZQUFZLEdBQUc7SUFDcEIsUUFBUSxFQUFFLFFBQVE7SUFDbEIsUUFBUSxFQUFFLENBQUM7SUFDWCxLQUFLLEVBQUUsTUFBTTtJQUNiLE1BQU0sRUFBRSxZQUFZO0lBQ3BCLGFBQWEsRUFBRSxLQUFLO0lBQ3BCLE1BQU0sRUFBRSxFQUFFLEdBQUcsRUFBRSxDQUFDLEVBQUU7Q0FDbkIsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLG9CQUFvQixHQUFHLENBQUMsRUFNcEMsRUFBRSxFQUFFOztRQU5nQyxFQUNuQyxHQUFHLEVBQ0gsT0FBTyxPQUlSLEVBSEksS0FBSyxjQUgyQixrQkFJcEMsQ0FEUztJQUlSLE1BQU0sRUFBRSxlQUFlLEVBQUUsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUFDLHFCQUFxQixDQUFDLENBQUM7SUFFcEUsTUFBTSxPQUFPLEdBQUcsTUFBQSxLQUFLLENBQUMsT0FBTywwQ0FBRSxHQUFHLENBQUMsQ0FBQyxLQUFLLEVBQUUsRUFBRTs7UUFBQyxPQUFBLGlDQUN6QyxLQUFLLEtBQ1IsS0FBSyxFQUNILE1BQUEsS0FBSyxDQUFDLEtBQUssbUNBQ1gsZUFBZSxDQUFDLFNBQVMsSUFBSSxLQUFLLElBQUksT0FBTyxLQUFLLENBQUMsT0FBTyxLQUFLLFFBQVEsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLElBQ3RHLENBQUE7S0FBQSxDQUFDLENBQUM7SUFFSixPQUFPLG9CQUFDLG9CQUFvQixvQkFBSyxLQUFLLElBQUUsT0FBTyxFQUFFLE9BQU8sSUFBSSxDQUFDO0FBQy9ELENBQUMsQ0FBQyJ9
|
@@ -1,11 +1,12 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import { Line as _Line, LineChart as _LineChart, type LineProps } from 'recharts';
|
3
3
|
import { type ContainerProps } from '../../../src/charts/Container/Container';
|
4
|
+
import { type PaletteProps } from '../../../src/charts/DefaultPalette/DefaultPalette';
|
4
5
|
import { type ChartProps } from '../../../src/charts/lib/utils';
|
5
6
|
type ComposedLineChart = {
|
6
7
|
Line: typeof Line;
|
7
8
|
};
|
8
|
-
type LineChartProps = ChartProps & ContainerProps & React.ComponentProps<typeof _LineChart>;
|
9
|
+
type LineChartProps = ChartProps & ContainerProps & PaletteProps & React.ComponentProps<typeof _LineChart>;
|
9
10
|
export declare const LineChart: ComposedLineChart & React.FC<LineChartProps>;
|
10
11
|
export declare const Line: ((props: Omit<LineProps, "ref">) => React.JSX.Element) & typeof _Line;
|
11
12
|
export {};
|
@@ -10,41 +10,26 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
10
10
|
return t;
|
11
11
|
};
|
12
12
|
import React from 'react';
|
13
|
-
import { Line as _Line, LineChart as _LineChart } from 'recharts';
|
14
|
-
import { Axis, renderXAxis, renderXTimeAxis, renderYAxis } from '../../../src/charts/Axis/Axis';
|
13
|
+
import { Line as _Line, LineChart as _LineChart, Tooltip } from 'recharts';
|
15
14
|
import { ResponsiveContainer } from '../../../src/charts/Container/Container';
|
15
|
+
import { DefaultPalette } from '../../../src/charts/DefaultPalette/DefaultPalette';
|
16
16
|
import { CartesianGrid } from '../../../src/charts/Grid/Grid';
|
17
|
-
import {
|
18
|
-
import {
|
19
|
-
const renderChildren = (props) => {
|
20
|
-
return React.Children.map(props.children, (child) => {
|
21
|
-
if (!child) {
|
22
|
-
return child;
|
23
|
-
}
|
24
|
-
switch (getDisplayName(child.type)) {
|
25
|
-
case Axis.XAxis.displayName: {
|
26
|
-
return renderXAxis(child, props);
|
27
|
-
}
|
28
|
-
case Axis.XAxis.Time.displayName: {
|
29
|
-
return renderXTimeAxis(child, props);
|
30
|
-
}
|
31
|
-
case Axis.YAxis.displayName: {
|
32
|
-
return renderYAxis(child, props);
|
33
|
-
}
|
34
|
-
default: {
|
35
|
-
return child;
|
36
|
-
}
|
37
|
-
}
|
38
|
-
});
|
39
|
-
};
|
17
|
+
import { useDefaultColor } from '../../../src/charts/hooks';
|
18
|
+
import { DEFAULT_MARGINS, extractChildByDisplayName, renderChartChildren } from '../../../src/charts/lib/utils';
|
40
19
|
export const LineChart = (_a) => {
|
41
|
-
var { isBusy, busyLabel, margin = DEFAULT_MARGINS } = _a, props = __rest(_a, ["isBusy", "busyLabel", "margin"]);
|
20
|
+
var { isBusy, busyLabel, margin = DEFAULT_MARGINS, palette } = _a, props = __rest(_a, ["isBusy", "busyLabel", "margin", "palette"]);
|
42
21
|
const [tooltip] = extractChildByDisplayName(props.children, Tooltip.displayName);
|
43
|
-
return (React.createElement(
|
44
|
-
React.createElement(
|
45
|
-
React.createElement(
|
46
|
-
|
22
|
+
return (React.createElement(DefaultPalette, { palette: palette },
|
23
|
+
React.createElement(ResponsiveContainer, { width: props.width, height: props.height, isBusy: isBusy, busyLabel: busyLabel },
|
24
|
+
React.createElement(_LineChart, { data: props.data, style: { stroke: '#fff', strokeWidth: 1 }, margin: margin, accessibilityLayer: tooltip !== undefined },
|
25
|
+
React.createElement(CartesianGrid, null),
|
26
|
+
React.Children.map(props.children, (child) => renderChartChildren(child, props))))));
|
47
27
|
};
|
48
|
-
export const Line = Object.assign((props) =>
|
28
|
+
export const Line = Object.assign((props) => {
|
29
|
+
var _a, _b;
|
30
|
+
const stroke = useDefaultColor((_b = (_a = props.dataKey) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : 'unknown', props.stroke);
|
31
|
+
return React.createElement(_Line, Object.assign({ type: "linear" }, props, { stroke: stroke, strokeWidth: 2, isAnimationActive: false, dot: false }));
|
32
|
+
}, _Line);
|
33
|
+
Line.defaultProps = Object.assign({}, _Line.defaultProps, { stroke: undefined, fill: undefined });
|
49
34
|
LineChart.Line = Line;
|
50
|
-
//# sourceMappingURL=data:application/json;base64,
|
35
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTGluZUNoYXJ0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NoYXJ0cy9MaW5lQ2hhcnQvTGluZUNoYXJ0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUMxQixPQUFPLEVBQUUsSUFBSSxJQUFJLEtBQUssRUFBRSxTQUFTLElBQUksVUFBVSxFQUFrQixPQUFPLEVBQUUsTUFBTSxVQUFVLENBQUM7QUFFM0YsT0FBTyxFQUF1QixtQkFBbUIsRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBQzFGLE9BQU8sRUFBRSxjQUFjLEVBQXFCLE1BQU0sMENBQTBDLENBQUM7QUFDN0YsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBQ3JELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztBQUNuRCxPQUFPLEVBQW1CLGVBQWUsRUFBRSx5QkFBeUIsRUFBRSxtQkFBbUIsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBUXhILE1BQU0sQ0FBQyxNQUFNLFNBQVMsR0FBaUQsQ0FBQyxFQU12RSxFQUFFLEVBQUU7UUFObUUsRUFDdEUsTUFBTSxFQUNOLFNBQVMsRUFDVCxNQUFNLEdBQUcsZUFBZSxFQUN4QixPQUFPLE9BRVIsRUFESSxLQUFLLGNBTDhELDRDQU12RSxDQURTO0lBRVIsTUFBTSxDQUFDLE9BQU8sQ0FBQyxHQUFHLHlCQUF5QixDQUFDLEtBQUssQ0FBQyxRQUFRLEVBQUUsT0FBTyxDQUFDLFdBQVcsQ0FBQyxDQUFDO0lBRWpGLE9BQU8sQ0FDTCxvQkFBQyxjQUFjLElBQUMsT0FBTyxFQUFFLE9BQU87UUFDOUIsb0JBQUMsbUJBQW1CLElBQUMsS0FBSyxFQUFFLEtBQUssQ0FBQyxLQUFLLEVBQUUsTUFBTSxFQUFFLEtBQUssQ0FBQyxNQUFNLEVBQUUsTUFBTSxFQUFFLE1BQU0sRUFBRSxTQUFTLEVBQUUsU0FBUztZQUNqRyxvQkFBQyxVQUFVLElBQ1QsSUFBSSxFQUFFLEtBQUssQ0FBQyxJQUFJLEVBQ2hCLEtBQUssRUFBRSxFQUFFLE1BQU0sRUFBRSxNQUFNLEVBQUUsV0FBVyxFQUFFLENBQUMsRUFBRSxFQUN6QyxNQUFNLEVBQUUsTUFBTSxFQUNkLGtCQUFrQixFQUFFLE9BQU8sS0FBSyxTQUFTO2dCQUV6QyxvQkFBQyxhQUFhLE9BQUc7Z0JBQ2hCLEtBQUssQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxRQUFRLEVBQUUsQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUFDLG1CQUFtQixDQUFDLEtBQUssRUFBRSxLQUFLLENBQUMsQ0FBQyxDQUN0RSxDQUNPLENBQ1AsQ0FDbEIsQ0FBQztBQUNKLENBQUMsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLElBQUksR0FBRyxNQUFNLENBQUMsTUFBTSxDQUFDLENBQUMsS0FBNkIsRUFBRSxFQUFFOztJQUNsRSxNQUFNLE1BQU0sR0FBRyxlQUFlLENBQUMsTUFBQSxNQUFBLEtBQUssQ0FBQyxPQUFPLDBDQUFFLFFBQVEsRUFBRSxtQ0FBSSxTQUFTLEVBQUUsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBQ3JGLE9BQU8sb0JBQUMsS0FBSyxrQkFBQyxJQUFJLEVBQUMsUUFBUSxJQUFLLEtBQUssSUFBRSxNQUFNLEVBQUUsTUFBTSxFQUFFLFdBQVcsRUFBRSxDQUFDLEVBQUUsaUJBQWlCLEVBQUUsS0FBSyxFQUFFLEdBQUcsRUFBRSxLQUFLLElBQUksQ0FBQztBQUNsSCxDQUFDLEVBQUUsS0FBSyxDQUFDLENBQUM7QUFFVixJQUFJLENBQUMsWUFBWSxHQUFHLE1BQU0sQ0FBQyxNQUFNLENBQUMsRUFBRSxFQUFFLEtBQUssQ0FBQyxZQUFZLEVBQUUsRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLElBQUksRUFBRSxTQUFTLEVBQUUsQ0FBQyxDQUFDO0FBQ2xHLFNBQVMsQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDIn0=
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import { Cell, Pie as _Pie, PieChart as _PieChart, type PieProps } from 'recharts';
|
3
3
|
import { type ContainerProps } from '../../../src/charts/Container/Container';
|
4
|
+
import { type PaletteProps } from '../../../src/charts/DefaultPalette/DefaultPalette';
|
4
5
|
import { type ChartProps } from '../../../src/charts/lib/utils';
|
5
6
|
import { ChartValue } from './ChartValue';
|
6
7
|
type ComposedLDoughnutChart = {
|
@@ -8,7 +9,7 @@ type ComposedLDoughnutChart = {
|
|
8
9
|
ChartValue: typeof ChartValue;
|
9
10
|
Cell: typeof Cell;
|
10
11
|
};
|
11
|
-
type DoughtnutChartProps = ChartProps & ContainerProps & React.ComponentProps<typeof _PieChart>;
|
12
|
+
type DoughtnutChartProps = ChartProps & ContainerProps & PaletteProps & React.ComponentProps<typeof _PieChart>;
|
12
13
|
export declare const DoughnutChart: ComposedLDoughnutChart & React.FC<DoughtnutChartProps>;
|
13
14
|
export declare const Doughnut: ((props: Omit<PieProps, "ref">) => React.JSX.Element) & typeof _Pie;
|
14
15
|
export {};
|
@@ -13,19 +13,29 @@ import React from 'react';
|
|
13
13
|
import isNil from 'lodash/isNil';
|
14
14
|
import { Cell, Customized, Pie as _Pie, PieChart as _PieChart } from 'recharts';
|
15
15
|
import { ResponsiveContainer } from '../../../src/charts/Container/Container';
|
16
|
+
import { DefaultPalette, DefaultPaletteContext } from '../../../src/charts/DefaultPalette/DefaultPalette';
|
16
17
|
import { extractChildByDisplayName } from '../../../src/charts/lib/utils';
|
17
18
|
import { Tooltip } from '../../../src/charts/Tooltip/Tooltip';
|
18
19
|
import { ChartValue } from './ChartValue';
|
19
20
|
import { renderPieChildren } from './renderPieChildren';
|
20
21
|
// A chart at this size squared causes the tailwind styles look balanced, used for calculating scale.
|
21
22
|
const refSize = 300;
|
23
|
+
// We'll need to add a wrapper for the chart so we can use DefaultPaletteContext in the actual
|
24
|
+
// chart component.
|
22
25
|
export const DoughnutChart = (_a) => {
|
26
|
+
var { palette } = _a, props = __rest(_a, ["palette"]);
|
27
|
+
return (React.createElement(DefaultPalette, { palette: palette },
|
28
|
+
React.createElement(DoughnutChartWrapper, Object.assign({}, props))));
|
29
|
+
};
|
30
|
+
const DoughnutChartWrapper = (_a) => {
|
31
|
+
var _b;
|
23
32
|
var { isBusy, busyLabel } = _a, props = __rest(_a, ["isBusy", "busyLabel"]);
|
24
33
|
const [containerWidth, setContainerWidth] = React.useState(0);
|
25
34
|
const [containerHeight, setContainerHeight] = React.useState(0);
|
26
35
|
const [activeIndex, setActiveIndex] = React.useState(null);
|
36
|
+
const { getDefaultColor } = React.useContext(DefaultPaletteContext);
|
27
37
|
const [chartValue, _children] = extractChildByDisplayName(props.children, ChartValue.displayName);
|
28
|
-
const [
|
38
|
+
const [doughnut, children] = extractChildByDisplayName(_children, DoughnutChart.Doughnut.displayName);
|
29
39
|
const [tooltip] = extractChildByDisplayName(props.children, Tooltip.displayName);
|
30
40
|
const onResize = (w, h) => {
|
31
41
|
setContainerWidth(w);
|
@@ -66,11 +76,13 @@ export const DoughnutChart = (_a) => {
|
|
66
76
|
return (React.createElement(ResponsiveContainer, { width: props.width, height: props.height, isBusy: isBusy, busyLabel: busyLabel, onResize: onResize },
|
67
77
|
React.createElement(_PieChart, null,
|
68
78
|
chartValue && React.createElement(Customized, { component: renderChartValue }),
|
69
|
-
|
70
|
-
renderPieChildren(children))));
|
79
|
+
doughnut && (React.createElement(_Pie, Object.assign({}, doughnut.props, { fill: (_b = doughnut.props.fill) !== null && _b !== void 0 ? _b : getDefaultColor(doughnut.props.dataKey), onMouseEnter: (_, index) => setActiveIndex(index), onMouseLeave: () => setActiveIndex(null), activeIndex: activeIndex, inactiveShape: { className: highlightActive ? 'inactive' : undefined }, activeShape: { className: highlightActive ? 'active' : undefined } }))),
|
80
|
+
renderPieChildren(children, { tooltipColor: 'fill' }))));
|
71
81
|
};
|
72
82
|
export const Doughnut = Object.assign((props) => React.createElement(_Pie, Object.assign({}, props)), _Pie);
|
73
83
|
Doughnut.defaultProps = Object.assign({}, _Pie.defaultProps, {
|
84
|
+
fill: undefined,
|
85
|
+
stroke: undefined,
|
74
86
|
isAnimationActive: false,
|
75
87
|
innerRadius: '60%',
|
76
88
|
outerRadius: '80%',
|
@@ -78,4 +90,4 @@ Doughnut.defaultProps = Object.assign({}, _Pie.defaultProps, {
|
|
78
90
|
DoughnutChart.Doughnut = Doughnut;
|
79
91
|
DoughnutChart.ChartValue = ChartValue;
|
80
92
|
DoughnutChart.Cell = Cell;
|
81
|
-
//# sourceMappingURL=data:application/json;base64,
|
93
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRG91Z2hudXRDaGFydC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jaGFydHMvUGllQ2hhcnQvRG91Z2hudXRDaGFydC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxLQUFLLE1BQU0sY0FBYyxDQUFDO0FBQ2pDLE9BQU8sRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLEdBQUcsSUFBSSxJQUFJLEVBQUUsUUFBUSxJQUFJLFNBQVMsRUFBaUIsTUFBTSxVQUFVLENBQUM7QUFFL0YsT0FBTyxFQUF1QixtQkFBbUIsRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBQzFGLE9BQU8sRUFBRSxjQUFjLEVBQUUscUJBQXFCLEVBQXFCLE1BQU0sMENBQTBDLENBQUM7QUFDcEgsT0FBTyxFQUFtQix5QkFBeUIsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBQ2xGLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUVyRCxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sY0FBYyxDQUFDO0FBQzFDLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBVXhELHFHQUFxRztBQUNyRyxNQUFNLE9BQU8sR0FBRyxHQUFHLENBQUM7QUFFcEIsOEZBQThGO0FBQzlGLG1CQUFtQjtBQUNuQixNQUFNLENBQUMsTUFBTSxhQUFhLEdBQTJELENBQUMsRUFBcUIsRUFBRSxFQUFFO1FBQXpCLEVBQUUsT0FBTyxPQUFZLEVBQVAsS0FBSyxjQUFuQixXQUFxQixDQUFGO0lBQ3ZHLE9BQU8sQ0FDTCxvQkFBQyxjQUFjLElBQUMsT0FBTyxFQUFFLE9BQU87UUFDOUIsb0JBQUMsb0JBQW9CLG9CQUFLLEtBQUssRUFBSSxDQUNwQixDQUNsQixDQUFDO0FBQ0osQ0FBQyxDQUFDO0FBRUYsTUFBTSxvQkFBb0IsR0FBa0MsQ0FBQyxFQUEr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
|
@@ -1,12 +1,13 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import { Cell, Pie as _Pie, PieChart as _PieChart, type PieProps } from 'recharts';
|
3
3
|
import { type ContainerProps } from '../../../src/charts/Container/Container';
|
4
|
-
import type
|
4
|
+
import { type PaletteProps } from '../../../src/charts/DefaultPalette/DefaultPalette';
|
5
|
+
import { type ChartProps } from '../../../src/charts/lib/utils';
|
5
6
|
type ComposedPieChart = {
|
6
7
|
Pie: typeof Pie;
|
7
8
|
Cell: typeof Cell;
|
8
9
|
};
|
9
|
-
type PieChartProps = ChartProps & ContainerProps & React.ComponentProps<typeof _PieChart>;
|
10
|
+
type PieChartProps = ChartProps & ContainerProps & PaletteProps & React.ComponentProps<typeof _PieChart>;
|
10
11
|
export declare const PieChart: ComposedPieChart & React.FC<PieChartProps>;
|
11
12
|
export declare const Pie: ((props: Omit<PieProps, "ref">) => React.JSX.Element) & typeof _Pie;
|
12
13
|
export {};
|
@@ -12,18 +12,33 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
12
12
|
import React from 'react';
|
13
13
|
import { Cell, Pie as _Pie, PieChart as _PieChart } from 'recharts';
|
14
14
|
import { ResponsiveContainer } from '../../../src/charts/Container/Container';
|
15
|
+
import { DefaultPalette, DefaultPaletteContext } from '../../../src/charts/DefaultPalette/DefaultPalette';
|
16
|
+
import { extractChildByDisplayName } from '../../../src/charts/lib/utils';
|
15
17
|
import { renderPieChildren } from './renderPieChildren';
|
16
18
|
export const PieChart = (_a) => {
|
19
|
+
var { palette } = _a, props = __rest(_a, ["palette"]);
|
20
|
+
return (React.createElement(DefaultPalette, { palette: palette },
|
21
|
+
React.createElement(PieChartWrapper, Object.assign({}, props))));
|
22
|
+
};
|
23
|
+
// We'll need to add a wrapper for the chart so we can use DefaultPaletteContext in the actual
|
24
|
+
// chart component.
|
25
|
+
const PieChartWrapper = (_a) => {
|
26
|
+
var _b;
|
17
27
|
var { isBusy, busyLabel } = _a, props = __rest(_a, ["isBusy", "busyLabel"]);
|
28
|
+
const [pie, children] = extractChildByDisplayName(props.children, PieChart.Pie.displayName);
|
29
|
+
const { getDefaultColor } = React.useContext(DefaultPaletteContext);
|
18
30
|
return (React.createElement(ResponsiveContainer, { width: props.width, height: props.height, isBusy: isBusy, busyLabel: busyLabel },
|
19
|
-
React.createElement(_PieChart, { width: 500, height: 500 },
|
31
|
+
React.createElement(_PieChart, { width: 500, height: 500 },
|
32
|
+
renderPieChildren(children, { tooltipColor: 'fill' }),
|
33
|
+
pie && React.createElement(_Pie, Object.assign({}, pie.props, { fill: (_b = pie.props.fill) !== null && _b !== void 0 ? _b : getDefaultColor(pie.props.dataKey) })))));
|
20
34
|
};
|
21
35
|
export const Pie = Object.assign((props) => React.createElement(_Pie, Object.assign({}, props)), _Pie);
|
22
36
|
Pie.defaultProps = Object.assign({}, _Pie.defaultProps, {
|
37
|
+
fill: undefined,
|
23
38
|
isAnimationActive: false,
|
24
39
|
innerRadius: 0,
|
25
40
|
outerRadius: '80%',
|
26
41
|
});
|
27
42
|
PieChart.Pie = Pie;
|
28
43
|
PieChart.Cell = Cell;
|
29
|
-
//# sourceMappingURL=data:application/json;base64,
|
44
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUGllQ2hhcnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY2hhcnRzL1BpZUNoYXJ0L1BpZUNoYXJ0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUMxQixPQUFPLEVBQUUsSUFBSSxFQUFFLEdBQUcsSUFBSSxJQUFJLEVBQUUsUUFBUSxJQUFJLFNBQVMsRUFBaUIsTUFBTSxVQUFVLENBQUM7QUFFbkYsT0FBTyxFQUF1QixtQkFBbUIsRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBQzFGLE9BQU8sRUFBRSxjQUFjLEVBQUUscUJBQXFCLEVBQXFCLE1BQU0sMENBQTBDLENBQUM7QUFDcEgsT0FBTyxFQUFtQix5QkFBeUIsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBRWxGLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBU3hELE1BQU0sQ0FBQyxNQUFNLFFBQVEsR0FBK0MsQ0FBQyxFQUFxQixFQUFFLEVBQUU7UUFBekIsRUFBRSxPQUFPLE9BQVksRUFBUCxLQUFLLGNBQW5CLFdBQXFCLENBQUY7SUFDdEYsT0FBTyxDQUNMLG9CQUFDLGNBQWMsSUFBQyxPQUFPLEVBQUUsT0FBTztRQUM5QixvQkFBQyxlQUFlLG9CQUFLLEtBQUssRUFBSSxDQUNmLENBQ2xCLENBQUM7QUFDSixDQUFDLENBQUM7QUFFRiw4RkFBOEY7QUFDOUYsbUJBQW1CO0FBQ25CLE1BQU0sZUFBZSxHQUE0QixDQUFDLEVBQStCLEVBQUUsRUFBRTs7UUFBbkMsRUFBRSxNQUFNLEVBQUUsU0FBUyxPQUFZLEVBQVAsS0FBSyxjQUE3Qix1QkFBK0IsQ0FBRjtJQUM3RSxNQUFNLENBQUMsR0FBRyxFQUFFLFFBQVEsQ0FBQyxHQUFHLHlCQUF5QixDQUFDLEtBQUssQ0FBQyxRQUFRLEVBQUUsUUFBUSxDQUFDLEdBQUcsQ0FBQyxXQUFXLENBQUMsQ0FBQztJQUM1RixNQUFNLEVBQUUsZUFBZSxFQUFFLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FBQyxxQkFBcUIsQ0FBQyxDQUFDO0lBRXBFLE9BQU8sQ0FDTCxvQkFBQyxtQkFBbUIsSUFBQyxLQUFLLEVBQUUsS0FBSyxDQUFDLEtBQUssRUFBRSxNQUFNLEVBQUUsS0FBSyxDQUFDLE1BQU0sRUFBRSxNQUFNLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxTQUFTO1FBQ2pHLG9CQUFDLFNBQVMsSUFBQyxLQUFLLEVBQUUsR0FBRyxFQUFFLE1BQU0sRUFBRSxHQUFHO1lBQy9CLGlCQUFpQixDQUFDLFFBQVEsRUFBRSxFQUFFLFlBQVksRUFBRSxNQUFNLEVBQUUsQ0FBQztZQUNyRCxHQUFHLElBQUksb0JBQUMsSUFBSSxvQkFBSyxHQUFHLENBQUMsS0FBSyxJQUFFLElBQUksRUFBRSxNQUFBLEdBQUcsQ0FBQyxLQUFLLENBQUMsSUFBSSxtQ0FBSSxlQUFlLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUNqRixDQUNRLENBQ3ZCLENBQUM7QUFDSixDQUFDLENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxHQUFHLEdBQUcsTUFBTSxDQUFDLE1BQU0sQ0FBQyxDQUFDLEtBQTRCLEVBQUUsRUFBRSxDQUFDLG9CQUFDLElBQUksb0JBQUssS0FBSyxFQUFJLEVBQUUsSUFBSSxDQUFDLENBQUM7QUFFOUYsR0FBRyxDQUFDLFlBQVksR0FBRyxNQUFNLENBQUMsTUFBTSxDQUFDLEVBQUUsRUFBRSxJQUFJLENBQUMsWUFBWSxFQUFFO0lBQ3RELElBQUksRUFBRSxTQUFTO0lBQ2YsaUJBQWlCLEVBQUUsS0FBSztJQUN4QixXQUFXLEVBQUUsQ0FBQztJQUNkLFdBQVcsRUFBRSxLQUFLO0NBQ25CLENBQUMsQ0FBQztBQUVILFFBQVEsQ0FBQyxHQUFHLEdBQUcsR0FBRyxDQUFDO0FBQ25CLFFBQVEsQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDIn0=
|
@@ -1,2 +1,6 @@
|
|
1
1
|
import React from 'react';
|
2
|
-
|
2
|
+
type RenderOptions = {
|
3
|
+
tooltipColor?: 'fill' | 'stroke';
|
4
|
+
};
|
5
|
+
export declare const renderPieChildren: (children: React.ReactElement[], opts?: RenderOptions) => React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
|
6
|
+
export {};
|
@@ -2,8 +2,8 @@ import React from 'react';
|
|
2
2
|
import { Legend } from 'recharts';
|
3
3
|
import { getDisplayName } from '../../../src/charts/lib/utils';
|
4
4
|
import { Tooltip } from '../../../src/charts/Tooltip/Tooltip';
|
5
|
-
import { TooltipContentWrapper } from '
|
6
|
-
export const renderPieChildren = (children) => {
|
5
|
+
import { TooltipContentWrapper } from '../../../src/charts/Tooltip/TooltipContentWrapper';
|
6
|
+
export const renderPieChildren = (children, opts = {}) => {
|
7
7
|
return React.Children.map(children, (child) => {
|
8
8
|
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
9
9
|
if (!child) {
|
@@ -19,7 +19,10 @@ export const renderPieChildren = (children) => {
|
|
19
19
|
* So, to make it work better, we'll add a custom wrapper for tooltip content
|
20
20
|
* which will try to add the color information available.
|
21
21
|
*/
|
22
|
-
return React.cloneElement(child, {
|
22
|
+
return React.cloneElement(child, {
|
23
|
+
content: React.createElement(TooltipContentWrapper, { content: child.props.content, tooltipColor: opts.tooltipColor }),
|
24
|
+
labelStyle: { paddingBottom: 0 },
|
25
|
+
});
|
23
26
|
}
|
24
27
|
case Legend.displayName: {
|
25
28
|
return React.cloneElement(child, { verticalAlign: 'top', align: 'center' });
|
@@ -30,4 +33,4 @@ export const renderPieChildren = (children) => {
|
|
30
33
|
}
|
31
34
|
});
|
32
35
|
};
|
33
|
-
//# sourceMappingURL=data:application/json;base64,
|
36
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmVuZGVyUGllQ2hpbGRyZW4uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY2hhcnRzL1BpZUNoYXJ0L3JlbmRlclBpZUNoaWxkcmVuLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLFVBQVUsQ0FBQztBQUVsQyxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFDdEQsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQ3JELE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLDBDQUEwQyxDQUFDO0FBTWpGLE1BQU0sQ0FBQyxNQUFNLGlCQUFpQixHQUFHLENBQUMsUUFBOEIsRUFBRSxPQUFzQixFQUFFLEVBQUUsRUFBRTtJQUM1RixPQUFPLEtBQUssQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLFFBQVEsRUFBRSxDQUFDLEtBQUssRUFBRSxFQUFFO1FBQzVDLHVFQUF1RTtRQUN2RSxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7WUFDWCxPQUFPLEtBQUssQ0FBQztRQUNmLENBQUM7UUFFRCxRQUFRLGNBQWMsQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQztZQUNuQyxLQUFLLE9BQU8sQ0FBQyxXQUFXLENBQUMsQ0FBQyxDQUFDO2dCQUN6Qjs7Ozs7OzttQkFPRztnQkFDSCxPQUFPLEtBQUssQ0FBQyxZQUFZLENBQUMsS0FBSyxFQUFFO29CQUMvQixPQUFPLEVBQUUsb0JBQUMscUJBQXFCLElBQUMsT0FBTyxFQUFFLEtBQUssQ0FBQyxLQUFLLENBQUMsT0FBTyxFQUFFLFlBQVksRUFBRSxJQUFJLENBQUMsWUFBWSxHQUFJO29CQUNqRyxVQUFVLEVBQUUsRUFBRSxhQUFhLEVBQUUsQ0FBQyxFQUFFO2lCQUNqQyxDQUFDLENBQUM7WUFDTCxDQUFDO1lBRUQsS0FBSyxNQUFNLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQztnQkFDeEIsT0FBTyxLQUFLLENBQUMsWUFBWSxDQUFDLEtBQUssRUFBRSxFQUFFLGFBQWEsRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLFFBQVEsRUFBRSxDQUFDLENBQUM7WUFDOUUsQ0FBQztZQUVELE9BQU8sQ0FBQyxDQUFDLENBQUM7Z0JBQ1IsT0FBTyxLQUFLLENBQUM7WUFDZixDQUFDO1FBQ0gsQ0FBQztJQUNILENBQUMsQ0FBQyxDQUFDO0FBQ0wsQ0FBQyxDQUFDIn0=
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import { DefaultTooltipContent, Tooltip as _Tooltip } from 'recharts';
|
2
2
|
const contentStyle = {
|
3
3
|
boxShadow: 'var(--aquarium-box-shadow-8dp)',
|
4
|
-
background: '
|
4
|
+
background: 'var(--aquarium-background-color-body)',
|
5
5
|
};
|
6
6
|
const itemStyle = {
|
7
7
|
display: 'flex',
|
@@ -18,4 +18,4 @@ Tooltip.defaultProps = Object.assign({}, _Tooltip.defaultProps, {
|
|
18
18
|
itemStyle,
|
19
19
|
cursor: { stroke: 'var(--aquarium-border-color-intense)', strokeDasharray: '5' },
|
20
20
|
});
|
21
|
-
//# sourceMappingURL=data:application/json;base64,
|
21
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVG9vbHRpcC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jaGFydHMvVG9vbHRpcC9Ub29sdGlwLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUscUJBQXFCLEVBQUUsT0FBTyxJQUFJLFFBQVEsRUFBRSxNQUFNLFVBQVUsQ0FBQztBQVV0RSxNQUFNLFlBQVksR0FBd0I7SUFDeEMsU0FBUyxFQUFFLGdDQUFnQztJQUMzQyxVQUFVLEVBQUUsdUNBQXVDO0NBQ3BELENBQUM7QUFFRixNQUFNLFNBQVMsR0FBd0I7SUFDckMsT0FBTyxFQUFFLE1BQU07SUFDZixVQUFVLEVBQUUsS0FBSztJQUNqQixhQUFhLEVBQUUsS0FBSztDQUNyQixDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sT0FBTyxHQUF1QyxNQUFNLENBQUMsTUFBTSxDQUFDLFFBQVEsRUFBRTtJQUNqRixjQUFjLEVBQUUscUJBQXFCO0NBQ3RDLENBQUMsQ0FBQztBQUVILE9BQU8sQ0FBQyxZQUFZLEdBQUcsTUFBTSxDQUFDLE1BQU0sQ0FBQyxFQUFFLEVBQUUsUUFBUSxDQUFDLFlBQVksRUFBRTtJQUM5RCxTQUFTLEVBQUUsRUFBRTtJQUNiLGlCQUFpQixFQUFFLEtBQUs7SUFDeEIsWUFBWTtJQUNaLFNBQVM7SUFDVCxNQUFNLEVBQUUsRUFBRSxNQUFNLEVBQUUsc0NBQXNDLEVBQUUsZUFBZSxFQUFFLEdBQUcsRUFBRTtDQUNqRixDQUFDLENBQUMifQ==
|
@@ -3,7 +3,8 @@ import { type TooltipProps } from '../../../src/charts/Tooltip/Tooltip';
|
|
3
3
|
import type { DefaultTooltipContentProps } from 'recharts';
|
4
4
|
type NameType = number | string;
|
5
5
|
type ValueType = Array<number | string> | number | string;
|
6
|
-
export declare const TooltipContentWrapper: <TValue extends ValueType, TName extends NameType>({ content, ...props }: DefaultTooltipContentProps<TValue, TName> & {
|
6
|
+
export declare const TooltipContentWrapper: <TValue extends ValueType, TName extends NameType>({ content, tooltipColor, ...props }: DefaultTooltipContentProps<TValue, TName> & {
|
7
7
|
content: TooltipProps<TValue, TName>["content"] | undefined;
|
8
|
+
tooltipColor?: "fill" | "stroke";
|
8
9
|
}) => React.JSX.Element;
|
9
10
|
export {};
|