@alfalab/core-components-chart 3.1.0 → 3.1.2
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/Component.js +18 -21
- package/components/Dot/index.css +8 -8
- package/components/Dot/index.js +1 -1
- package/components/Legends/index.css +8 -8
- package/components/Legends/index.d.ts +1 -1
- package/components/Legends/index.js +3 -2
- package/components/LinearGradient.d.ts +1 -1
- package/components/RectBar.js +2 -7
- package/components/Tick/index.css +4 -4
- package/components/Tick/index.js +2 -4
- package/components/TooltipContent/index.css +7 -7
- package/components/TooltipContent/index.js +1 -1
- package/cssm/Component.js +20 -23
- package/cssm/components/Legends/index.d.ts +1 -1
- package/cssm/components/Legends/index.js +2 -1
- package/cssm/components/LinearGradient.d.ts +1 -1
- package/cssm/components/RectBar.js +2 -7
- package/cssm/components/Tick/index.js +1 -3
- package/cssm/hooks/useSettings/index.d.ts +14 -11
- package/cssm/hooks/useSettings/index.js +1 -1
- package/cssm/hooks/useSettings/utils/setComposedChartsMargin.d.ts +2 -2
- package/cssm/hooks/useSettings/utils/setComposedChartsMargin.js +2 -2
- package/cssm/hooks/useSettings/utils/setDatas.d.ts +2 -3
- package/cssm/hooks/useSettings/utils/setDatas.js +2 -2
- package/cssm/hooks/useSettings/utils/setGradientCharts.js +1 -1
- package/cssm/hooks/useSettings/utils/setLegendMargin.d.ts +1 -1
- package/cssm/icons/CircleLine.d.ts +1 -1
- package/cssm/index.js +14 -14
- package/cssm/{tslib.es6-2be2aee7.d.ts → tslib.es6-0de342ae.d.ts} +8 -4
- package/{tslib.es6-e232afa5.js → cssm/tslib.es6-0de342ae.js} +1 -1
- package/cssm/types/chart.types.d.ts +1 -1
- package/cssm/types/options.types.d.ts +2 -2
- package/cssm/types/seria.types.d.ts +2 -2
- package/cssm/types/tooltip.types.d.ts +1 -1
- package/esm/Component.js +18 -21
- package/esm/components/Dot/index.css +8 -8
- package/esm/components/Dot/index.js +1 -1
- package/esm/components/Legends/index.css +8 -8
- package/esm/components/Legends/index.d.ts +1 -1
- package/esm/components/Legends/index.js +3 -2
- package/esm/components/LinearGradient.d.ts +1 -1
- package/esm/components/RectBar.js +2 -7
- package/esm/components/Tick/index.css +4 -4
- package/esm/components/Tick/index.js +2 -4
- package/esm/components/TooltipContent/index.css +7 -7
- package/esm/components/TooltipContent/index.js +1 -1
- package/esm/hooks/useSettings/index.d.ts +14 -11
- package/esm/hooks/useSettings/index.js +1 -1
- package/esm/hooks/useSettings/utils/setComposedChartsMargin.d.ts +2 -2
- package/esm/hooks/useSettings/utils/setComposedChartsMargin.js +2 -2
- package/esm/hooks/useSettings/utils/setDatas.d.ts +2 -3
- package/esm/hooks/useSettings/utils/setDatas.js +2 -2
- package/esm/hooks/useSettings/utils/setGradientCharts.js +1 -1
- package/esm/hooks/useSettings/utils/setLegendMargin.d.ts +1 -1
- package/esm/icons/CircleLine.d.ts +1 -1
- package/esm/index.css +5 -5
- package/esm/index.js +11 -11
- package/{tslib.es6-e232afa5.d.ts → esm/tslib.es6-efd85325.d.ts} +8 -4
- package/esm/{tslib.es6-f1220da2.js → tslib.es6-efd85325.js} +1 -1
- package/esm/types/chart.types.d.ts +1 -1
- package/esm/types/options.types.d.ts +2 -2
- package/esm/types/seria.types.d.ts +2 -2
- package/esm/types/tooltip.types.d.ts +1 -1
- package/hooks/useSettings/index.d.ts +14 -11
- package/hooks/useSettings/index.js +1 -1
- package/hooks/useSettings/utils/setComposedChartsMargin.d.ts +2 -2
- package/hooks/useSettings/utils/setComposedChartsMargin.js +2 -2
- package/hooks/useSettings/utils/setDatas.d.ts +2 -3
- package/hooks/useSettings/utils/setDatas.js +2 -2
- package/hooks/useSettings/utils/setGradientCharts.js +1 -1
- package/hooks/useSettings/utils/setLegendMargin.d.ts +1 -1
- package/icons/CircleLine.d.ts +1 -1
- package/index.css +5 -5
- package/index.js +11 -11
- package/modern/Component.js +31 -35
- package/modern/components/Dot/index.css +8 -8
- package/modern/components/Dot/index.js +2 -2
- package/modern/components/Legends/index.css +8 -8
- package/modern/components/Legends/index.d.ts +1 -1
- package/modern/components/Legends/index.js +1 -1
- package/modern/components/LinearGradient.d.ts +1 -1
- package/modern/components/LinearGradient.js +1 -3
- package/modern/components/RectBar.js +3 -8
- package/modern/components/Tick/index.css +4 -4
- package/modern/components/Tick/index.js +2 -4
- package/modern/components/TooltipContent/index.css +7 -7
- package/modern/components/TooltipContent/index.js +1 -1
- package/modern/hooks/useSettings/index.d.ts +14 -11
- package/modern/hooks/useSettings/utils/setComposedChartsMargin.d.ts +2 -2
- package/modern/hooks/useSettings/utils/setComposedChartsMargin.js +10 -12
- package/modern/hooks/useSettings/utils/setDatas.d.ts +2 -3
- package/modern/hooks/useSettings/utils/setDatas.js +1 -1
- package/modern/hooks/useSettings/utils/setGradientCharts.js +1 -1
- package/modern/hooks/useSettings/utils/setLegendMargin.d.ts +1 -1
- package/modern/hooks/useSettings/utils/sortByIndex.js +6 -8
- package/modern/icons/Circle.js +2 -4
- package/modern/icons/CircleLine.d.ts +1 -1
- package/modern/icons/CircleLine.js +3 -5
- package/modern/icons/FilledCircle.js +6 -8
- package/modern/icons/StrokeCircle.js +2 -4
- package/modern/index.css +5 -5
- package/modern/index.js +10 -10
- package/modern/types/chart.types.d.ts +1 -1
- package/modern/types/options.types.d.ts +2 -2
- package/modern/types/seria.types.d.ts +2 -2
- package/modern/types/tooltip.types.d.ts +1 -1
- package/package.json +2 -2
- package/send-stats.js +1 -1
- package/{esm/tslib.es6-f1220da2.d.ts → tslib.es6-806ac05c.d.ts} +8 -4
- package/{cssm/tslib.es6-2be2aee7.js → tslib.es6-806ac05c.js} +1 -1
- package/types/chart.types.d.ts +1 -1
- package/types/options.types.d.ts +2 -2
- package/types/seria.types.d.ts +2 -2
- package/types/tooltip.types.d.ts +1 -1
|
@@ -5,17 +5,13 @@ import { usePathBar } from '../hooks/usePathBar/index.js';
|
|
|
5
5
|
// eslint-disable-next-line complexity
|
|
6
6
|
const getPath = (x, width, height, initHeight, topRadius, bottomRadius, initY) => `
|
|
7
7
|
M${x + ((height !== 0 && bottomRadius) || 0)} ${initY + initHeight || 0}
|
|
8
|
-
Q${x} ${initY + initHeight} ${x} ${initY +
|
|
9
|
-
initHeight -
|
|
10
|
-
((height !== 0 && bottomRadius) || 0)}
|
|
8
|
+
Q${x} ${initY + initHeight} ${x} ${initY + initHeight - ((height !== 0 && bottomRadius) || 0)}
|
|
11
9
|
L${x} ${initY + ((height !== 0 && topRadius) || 0)}
|
|
12
10
|
Q${x} ${initY} ${x + ((height !== 0 && topRadius) || 0)} ${initY}
|
|
13
11
|
L${x + width - ((height !== 0 && topRadius) || 0)} ${initY}
|
|
14
12
|
Q${x + width} ${initY} ${x + width} ${initY + (topRadius || 0)}
|
|
15
13
|
L${x + width} ${initY + initHeight - ((height !== 0 && bottomRadius) || 0)}
|
|
16
|
-
Q${x + width} ${initY + initHeight} ${x +
|
|
17
|
-
width -
|
|
18
|
-
((height !== 0 && bottomRadius) || 0)} ${initY + initHeight}
|
|
14
|
+
Q${x + width} ${initY + initHeight} ${x + width - ((height !== 0 && bottomRadius) || 0)} ${initY + initHeight}
|
|
19
15
|
Z
|
|
20
16
|
`;
|
|
21
17
|
const RectBar = ({ fill, x, y, width, height, radius, background }) => {
|
|
@@ -25,8 +21,7 @@ const RectBar = ({ fill, x, y, width, height, radius, background }) => {
|
|
|
25
21
|
background,
|
|
26
22
|
y,
|
|
27
23
|
});
|
|
28
|
-
|
|
29
|
-
return React.createElement(React.Fragment, null, path);
|
|
24
|
+
return useMemo(() => (React.createElement("path", { d: getPath(x, width, height, initHeight, topRadius, bottomRadius, initY), stroke: 'none', fill: fill })), [x, width, height, initHeight, topRadius, bottomRadius, initY, fill]);
|
|
30
25
|
};
|
|
31
26
|
|
|
32
27
|
export { RectBar };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: ofx49 */
|
|
2
2
|
:root {
|
|
3
3
|
--color-dark-bg-primary: #0b1f35;
|
|
4
4
|
--color-light-text-primary: #0b1f35;
|
|
@@ -11,17 +11,17 @@
|
|
|
11
11
|
|
|
12
12
|
/* Hard up */
|
|
13
13
|
}
|
|
14
|
-
.
|
|
14
|
+
.chart__tickText_wgwi3 {
|
|
15
15
|
fill: var(--color-light-text-primary);
|
|
16
16
|
font-size: 16px;
|
|
17
17
|
line-height: 24px;
|
|
18
18
|
font-weight: 400;
|
|
19
19
|
}
|
|
20
|
-
.
|
|
20
|
+
.chart__circle_wgwi3 {
|
|
21
21
|
opacity: 0.3;
|
|
22
22
|
fill: var(--color-dark-bg-primary);
|
|
23
23
|
}
|
|
24
|
-
.
|
|
24
|
+
.chart__circle_wgwi3 {
|
|
25
25
|
opacity: 0.3;
|
|
26
26
|
fill: var(--color-dark-bg-primary);
|
|
27
27
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import cn from 'classnames';
|
|
3
3
|
|
|
4
|
-
var styles = {"tickText":"
|
|
4
|
+
var styles = {"tickText":"chart__tickText_wgwi3","circle":"chart__circle_wgwi3"};
|
|
5
5
|
require('./index.css')
|
|
6
6
|
|
|
7
7
|
const Tick = ({ y, payload, tickFormatter, xAxis }) => {
|
|
@@ -10,9 +10,7 @@ const Tick = ({ y, payload, tickFormatter, xAxis }) => {
|
|
|
10
10
|
(xAxis.tickMargin > 0 ? xAxis.tickMargin - radius / 2 : xAxis.tickMargin === 0)
|
|
11
11
|
? (radius / 2) * -1
|
|
12
12
|
: null;
|
|
13
|
-
return (React.createElement("g", { className: cn(styles.tick), opacity: '1', textAnchor: 'middle', transform: `translate(${payload.coordinate}, ${y -
|
|
14
|
-
(typeof marginTick === 'number' ? marginTick : 0) -
|
|
15
|
-
radius * 2})` },
|
|
13
|
+
return (React.createElement("g", { className: cn(styles.tick), opacity: '1', textAnchor: 'middle', transform: `translate(${payload.coordinate}, ${y - (typeof marginTick === 'number' ? marginTick : 0) - radius * 2})` },
|
|
16
14
|
React.createElement("text", { className: cn(styles.tickText), y: '30' }, tickFormatter ? tickFormatter(payload.value) : payload.value),
|
|
17
15
|
React.createElement("circle", { r: radius, className: cn(styles.circle) })));
|
|
18
16
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: ofyh1 */
|
|
2
2
|
:root {
|
|
3
3
|
--color-light-bg-primary: #fff;
|
|
4
4
|
--color-light-border-primary: #dbdee1;
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
:root {
|
|
20
20
|
--border-radius-m: 8px;
|
|
21
21
|
}
|
|
22
|
-
.
|
|
22
|
+
.chart__tooltip_1ogbv {
|
|
23
23
|
background-color: var(--color-light-bg-primary);
|
|
24
24
|
border: 1px solid var(--color-light-border-primary);
|
|
25
25
|
box-shadow: var(--shadow-l);
|
|
@@ -28,17 +28,17 @@
|
|
|
28
28
|
pointer-events: none;
|
|
29
29
|
position: relative;
|
|
30
30
|
}
|
|
31
|
-
.
|
|
31
|
+
.chart__tooltipList_1ogbv {
|
|
32
32
|
position: relative;
|
|
33
33
|
z-index: 5;
|
|
34
34
|
list-style-type: none;
|
|
35
35
|
padding: 0;
|
|
36
36
|
margin: 0;
|
|
37
37
|
}
|
|
38
|
-
.
|
|
38
|
+
.chart__tooltipItem_1ogbv {
|
|
39
39
|
margin-bottom: 10px;
|
|
40
40
|
}
|
|
41
|
-
.
|
|
41
|
+
.chart__tooltipArrow_1ogbv {
|
|
42
42
|
position: absolute;
|
|
43
43
|
left: 0;
|
|
44
44
|
top: 50%;
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
border: 1px solid var(--color-light-border-primary);
|
|
49
49
|
background-color: var(--color-light-bg-primary);
|
|
50
50
|
}
|
|
51
|
-
.
|
|
51
|
+
.chart__tooltipArrow_1ogbv:before {
|
|
52
52
|
content: '';
|
|
53
53
|
position: absolute;
|
|
54
54
|
left: -2px;
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
border-width: 0 24px 24px 0;
|
|
60
60
|
border-color: transparent var(--color-light-bg-primary) transparent transparent;
|
|
61
61
|
}
|
|
62
|
-
.
|
|
62
|
+
.chart__tooltipArrowRight_1ogbv {
|
|
63
63
|
left: 100%;
|
|
64
64
|
transform: translate(-50%, -50%) scale(-1, 1) rotate(45deg);
|
|
65
65
|
}
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import cn from 'classnames';
|
|
3
3
|
import { Typography } from '@alfalab/core-components-typography/modern';
|
|
4
4
|
|
|
5
|
-
var styles = {"tooltip":"
|
|
5
|
+
var styles = {"tooltip":"chart__tooltip_1ogbv","tooltipList":"chart__tooltipList_1ogbv","tooltipItem":"chart__tooltipItem_1ogbv","tooltipArrow":"chart__tooltipArrow_1ogbv","tooltipArrowRight":"chart__tooltipArrowRight_1ogbv"};
|
|
6
6
|
require('./index.css')
|
|
7
7
|
|
|
8
8
|
const TooltipContent = ({ payload, separator, label, tooltipArrowSide, arrow, series, labelFormatter, labelStyle, }) => {
|
|
@@ -1,16 +1,19 @@
|
|
|
1
1
|
import { Dispatch, SetStateAction } from 'react';
|
|
2
2
|
import { OptionsProps } from "../../types/options.types";
|
|
3
3
|
import { DataDynamicBooleanProps, DataDynamicProps } from "../../types/utils/data.types";
|
|
4
|
-
type Settings = [
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
4
|
+
type Settings = [
|
|
5
|
+
{
|
|
6
|
+
state: OptionsProps | null;
|
|
7
|
+
data: DataDynamicProps[];
|
|
8
|
+
charts: DataDynamicBooleanProps;
|
|
9
|
+
filterCount: number;
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
setState: Dispatch<SetStateAction<OptionsProps | null>>;
|
|
13
|
+
setData: Dispatch<SetStateAction<DataDynamicProps[]>>;
|
|
14
|
+
setCharts: Dispatch<SetStateAction<DataDynamicBooleanProps>>;
|
|
15
|
+
setFilterCount: Dispatch<SetStateAction<number>>;
|
|
16
|
+
}
|
|
17
|
+
];
|
|
15
18
|
declare const useSettings: (options: OptionsProps) => Settings;
|
|
16
19
|
export { useSettings };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { XAxisProps } from "../../../types/xAxis.types";
|
|
2
1
|
import { BrushProps } from "../../../types/brush.types";
|
|
3
|
-
import { LegendProps } from "../../../types/legend.types";
|
|
4
2
|
import { ComposedChartProps } from "../../../types/composedChart.types";
|
|
3
|
+
import { LegendProps } from "../../../types/legend.types";
|
|
4
|
+
import { XAxisProps } from "../../../types/xAxis.types";
|
|
5
5
|
type ComposedChartsMarginResultProps = {
|
|
6
6
|
top: number;
|
|
7
7
|
bottom: number;
|
|
@@ -1,14 +1,12 @@
|
|
|
1
|
-
const setComposedChartsMargin = (composeChart, legend, brush, xAxis) => {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
};
|
|
12
|
-
};
|
|
1
|
+
const setComposedChartsMargin = (composeChart, legend, brush, xAxis) => ({
|
|
2
|
+
top: (composeChart?.initMargin?.top || 0) +
|
|
3
|
+
(legend?.verticalAlign === 'top' && legend?.marginTop ? Math.abs(legend.marginTop) : 0),
|
|
4
|
+
bottom: (composeChart?.initMargin?.bottom || 0) +
|
|
5
|
+
(xAxis?.tickMargin || 0) +
|
|
6
|
+
(brush?.brushMargin || 0) +
|
|
7
|
+
(legend?.verticalAlign !== 'top' && legend?.marginTop ? legend.marginTop : 0),
|
|
8
|
+
left: composeChart?.initMargin?.left || 0,
|
|
9
|
+
right: composeChart?.initMargin?.right || 0,
|
|
10
|
+
});
|
|
13
11
|
|
|
14
12
|
export { setComposedChartsMargin };
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { DataDynamicBooleanProps, DataDynamicProps } from "../../../types/utils/data.types";
|
|
3
1
|
import { SeriaProps } from "../../../types/seria.types";
|
|
2
|
+
import { DataDynamicBooleanProps, DataDynamicProps } from "../../../types/utils/data.types";
|
|
4
3
|
type DatasResultProps = [DataDynamicProps[], DataDynamicBooleanProps, number];
|
|
5
|
-
declare const setDatas: (series: SeriaProps[], labels:
|
|
4
|
+
declare const setDatas: (series: SeriaProps[], labels: Array<string | number>) => DatasResultProps;
|
|
6
5
|
export { setDatas };
|
|
@@ -6,7 +6,7 @@ const setDatas = (series, labels) => {
|
|
|
6
6
|
const { properties: { dataKey = '' } = {}, data: seriaData = [], hideLegend, hide, } = series[i];
|
|
7
7
|
if (!hideLegend && !hide)
|
|
8
8
|
count += 1;
|
|
9
|
-
labels.map(label => {
|
|
9
|
+
labels.map((label) => {
|
|
10
10
|
const item = seriaData.find((d) => d.label === label);
|
|
11
11
|
if (item) {
|
|
12
12
|
const obj = {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const setGradientCharts = (series) => {
|
|
2
|
-
const filterSeries = series.filter(item => item.chart !== 'gradient');
|
|
2
|
+
const filterSeries = series.filter((item) => item.chart !== 'gradient');
|
|
3
3
|
return filterSeries.reduce((accum, item) => {
|
|
4
4
|
const { chart, data: dataSeria, offset, fill } = item;
|
|
5
5
|
if (chart === 'area') {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { LegendProps } from "../../../types/legend.types";
|
|
2
1
|
import { BrushProps } from "../../../types/brush.types";
|
|
2
|
+
import { LegendProps } from "../../../types/legend.types";
|
|
3
3
|
declare const setLegendMargin: (brush: BrushProps, legend: LegendProps) => number;
|
|
4
4
|
export { setLegendMargin };
|
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
const sortByIndex = (series) => {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
});
|
|
8
|
-
};
|
|
1
|
+
const sortByIndex = (series) => series.sort((a, b) => {
|
|
2
|
+
if (a?.zIndex && b?.zIndex && a?.zIndex > b?.zIndex) {
|
|
3
|
+
return 1;
|
|
4
|
+
}
|
|
5
|
+
return -1;
|
|
6
|
+
});
|
|
9
7
|
|
|
10
8
|
export { sortByIndex };
|
package/modern/icons/Circle.js
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
|
-
const CircleIcon = ({ fill = '#FF5C5C', height = 16 }) => {
|
|
4
|
-
|
|
5
|
-
React.createElement("circle", { cx: '8', cy: '8', r: '8', fill: fill })));
|
|
6
|
-
};
|
|
3
|
+
const CircleIcon = ({ fill = '#FF5C5C', height = 16 }) => (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', height: height, viewBox: '0 0 16 16', fill: 'none' },
|
|
4
|
+
React.createElement("circle", { cx: '8', cy: '8', r: '8', fill: fill })));
|
|
7
5
|
|
|
8
6
|
export { CircleIcon };
|
|
@@ -4,5 +4,5 @@ type Props = {
|
|
|
4
4
|
fill?: string;
|
|
5
5
|
height?: number;
|
|
6
6
|
};
|
|
7
|
-
declare const CircleLineIcon: ({ fill, height }: Props) => React.ReactElement
|
|
7
|
+
declare const CircleLineIcon: ({ fill, height }: Props) => React.ReactElement;
|
|
8
8
|
export { CircleLineIcon };
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
|
-
const CircleLineIcon = ({ fill = '#FF5C5C', height = 16 }) => {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
React.createElement("rect", { y: '5', width: '22', height: '2', fill: fill })));
|
|
7
|
-
};
|
|
3
|
+
const CircleLineIcon = ({ fill = '#FF5C5C', height = 16 }) => (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', height: height, viewBox: '0 0 22 12', fill: 'none' },
|
|
4
|
+
React.createElement("circle", { cx: '11', cy: '6', r: '6', fill: fill }),
|
|
5
|
+
React.createElement("rect", { y: '5', width: '22', height: '2', fill: fill })));
|
|
8
6
|
|
|
9
7
|
export { CircleLineIcon };
|
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
|
-
const FilledCircleIcon = ({ fill = '#5A8ECF', height = 16 }) => {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
React.createElement("
|
|
7
|
-
React.createElement("
|
|
8
|
-
|
|
9
|
-
React.createElement("stop", { offset: '1', stopColor: fill, stopOpacity: '0' })))));
|
|
10
|
-
};
|
|
3
|
+
const FilledCircleIcon = ({ fill = '#5A8ECF', height = 16 }) => (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', height: height, viewBox: '0 0 22 22', fill: 'none' },
|
|
4
|
+
React.createElement("circle", { cx: '11', cy: '11', r: '10', fill: 'url(#paint0_linear)', stroke: fill, strokeWidth: '2' }),
|
|
5
|
+
React.createElement("defs", null,
|
|
6
|
+
React.createElement("linearGradient", { id: 'paint0_linear', x1: '11', y1: '1', x2: '11', y2: '21', gradientUnits: 'userSpaceOnUse' },
|
|
7
|
+
React.createElement("stop", { stopColor: fill, stopOpacity: '0.2' }),
|
|
8
|
+
React.createElement("stop", { offset: '1', stopColor: fill, stopOpacity: '0' })))));
|
|
11
9
|
|
|
12
10
|
export { FilledCircleIcon };
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
|
-
const StrokeCircleIcon = ({ fill = '#5A8ECF', height = 16 }) => {
|
|
4
|
-
|
|
5
|
-
React.createElement("circle", { cx: '11', cy: '11', r: '10', stroke: fill, strokeWidth: '2', strokeDasharray: '8 8' })));
|
|
6
|
-
};
|
|
3
|
+
const StrokeCircleIcon = ({ fill = '#5A8ECF', height = 16 }) => (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', height: height, viewBox: '0 0 22 22', fill: 'none' },
|
|
4
|
+
React.createElement("circle", { cx: '11', cy: '11', r: '10', stroke: fill, strokeWidth: '2', strokeDasharray: '8 8' })));
|
|
7
5
|
|
|
8
6
|
export { StrokeCircleIcon };
|
package/modern/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 128of */
|
|
2
2
|
:root {
|
|
3
3
|
--color-light-text-primary: #0b1f35;
|
|
4
4
|
}
|
|
@@ -10,17 +10,17 @@
|
|
|
10
10
|
|
|
11
11
|
/* Hard up */
|
|
12
12
|
}
|
|
13
|
-
.
|
|
13
|
+
.chart__coreChart_tioz0 .recharts-line path {
|
|
14
14
|
transition: d 0.2s ease-out;
|
|
15
15
|
}
|
|
16
|
-
.
|
|
16
|
+
.chart__coreChart_tioz0 .recharts-text tspan {
|
|
17
17
|
fill: var(--color-light-text-primary);
|
|
18
18
|
font-size: 16px;
|
|
19
19
|
line-height: 22px;
|
|
20
20
|
}
|
|
21
|
-
.
|
|
21
|
+
.chart__bar_tioz0 {
|
|
22
22
|
transition: opacity 0.2s ease-out, d 0.2s ease-out;
|
|
23
23
|
}
|
|
24
|
-
.
|
|
24
|
+
.chart__unfocused_tioz0 {
|
|
25
25
|
opacity: 0.3;
|
|
26
26
|
}
|
package/modern/index.js
CHANGED
|
@@ -1,25 +1,25 @@
|
|
|
1
1
|
import 'react';
|
|
2
2
|
import 'classnames';
|
|
3
3
|
import 'recharts';
|
|
4
|
-
|
|
5
|
-
import './
|
|
4
|
+
import './hooks/usePathBar/utils/getRadius.js';
|
|
5
|
+
import './hooks/usePathBar/index.js';
|
|
6
|
+
import './components/CustomizedLabel.js';
|
|
7
|
+
import './icons/Point.js';
|
|
8
|
+
import './components/Dot/index.js';
|
|
6
9
|
import '@alfalab/core-components-typography/modern';
|
|
7
10
|
import './icons/Circle.js';
|
|
8
11
|
import './icons/CircleLine.js';
|
|
9
12
|
import './icons/FilledCircle.js';
|
|
10
13
|
import './icons/StrokeCircle.js';
|
|
11
14
|
import './components/Legends/index.js';
|
|
12
|
-
import './
|
|
13
|
-
import './components/
|
|
15
|
+
import './components/LinearGradient.js';
|
|
16
|
+
import './components/RectBar.js';
|
|
17
|
+
import './components/Tick/index.js';
|
|
18
|
+
import './components/TooltipContent/index.js';
|
|
19
|
+
export { Chart } from './Component.js';
|
|
14
20
|
import './hooks/useSettings/utils/setComposedChartsMargin.js';
|
|
15
21
|
import './hooks/useSettings/utils/setDatas.js';
|
|
16
22
|
import './hooks/useSettings/utils/setGradientCharts.js';
|
|
17
23
|
import './hooks/useSettings/utils/setLegendMargin.js';
|
|
18
24
|
import './hooks/useSettings/utils/sortByIndex.js';
|
|
19
25
|
import './hooks/useSettings/index.js';
|
|
20
|
-
import './hooks/usePathBar/utils/getRadius.js';
|
|
21
|
-
import './hooks/usePathBar/index.js';
|
|
22
|
-
import './components/CustomizedLabel.js';
|
|
23
|
-
import './components/RectBar.js';
|
|
24
|
-
import './components/Tick/index.js';
|
|
25
|
-
import './components/TooltipContent/index.js';
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { ReactElement } from 'react';
|
|
2
2
|
import { RectangleProps } from 'recharts';
|
|
3
3
|
import { DataKey } from 'recharts/types/util/types';
|
|
4
|
-
import { DotSettingProps } from "./utils/dot.types";
|
|
5
4
|
import { DataProps } from "./utils/data.types";
|
|
5
|
+
import { DotSettingProps } from "./utils/dot.types";
|
|
6
6
|
type CurveType = 'linear' | 'monotone' | 'step';
|
|
7
7
|
type RectangleShapeType = ReactElement<SVGElement> | ((props: any) => ReactElement<SVGElement>) | RectangleProps | boolean;
|
|
8
8
|
interface ChartProps {
|
|
@@ -4,11 +4,11 @@ import { BrushProps } from "./brush.types";
|
|
|
4
4
|
import { CartesianGridProps } from "./cartesianGrid.types";
|
|
5
5
|
import { ComposedChartProps } from "./composedChart.types";
|
|
6
6
|
import { LegendProps } from "./legend.types";
|
|
7
|
+
import { ResponsiveContainerProps } from "./responsiveContainer.types";
|
|
8
|
+
import { SeriaProps } from "./seria.types";
|
|
7
9
|
import { TooltipProps } from "./tooltip.types";
|
|
8
10
|
import { XAxisProps } from "./xAxis.types";
|
|
9
11
|
import { YAxisProps } from "./yAxis.types";
|
|
10
|
-
import { SeriaProps } from "./seria.types";
|
|
11
|
-
import { ResponsiveContainerProps } from "./responsiveContainer.types";
|
|
12
12
|
interface OptionsProps {
|
|
13
13
|
/**
|
|
14
14
|
* Индефикатор графика
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { ChartProps } from "./chart.types";
|
|
2
|
-
import { LabelListProps } from "./labelList.types";
|
|
3
1
|
import { DataProps } from "./utils/data.types";
|
|
4
2
|
import { GradientProps } from "./utils/gradient.types";
|
|
3
|
+
import { ChartProps } from "./chart.types";
|
|
4
|
+
import { LabelListProps } from "./labelList.types";
|
|
5
5
|
type RadiusProp = {
|
|
6
6
|
top?: number;
|
|
7
7
|
bottom?: number;
|
|
@@ -57,7 +57,7 @@ interface TooltipProps {
|
|
|
57
57
|
/**
|
|
58
58
|
* Стиль метки всплывающей подсказки по умолчанию, которая является элементом p.
|
|
59
59
|
*/
|
|
60
|
-
labelStyle?:
|
|
60
|
+
labelStyle?: Record<string, unknown>;
|
|
61
61
|
/**
|
|
62
62
|
* Значение метки, которое сейчас активно, обычно рассчитывается внутри компании.
|
|
63
63
|
*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alfalab/core-components-chart",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.2",
|
|
4
4
|
"description": "Chart component",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"directory": "dist"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@alfalab/core-components-typography": "^3.0.
|
|
17
|
+
"@alfalab/core-components-typography": "^3.0.4",
|
|
18
18
|
"classnames": "^2.3.1",
|
|
19
19
|
"recharts": "^2.1.2"
|
|
20
20
|
},
|
package/send-stats.js
CHANGED
|
@@ -12,9 +12,12 @@ declare function __generator(thisArg: any, body: any): {
|
|
|
12
12
|
declare function __exportStar(m: any, o: any): void;
|
|
13
13
|
declare function __values(o: any): any;
|
|
14
14
|
declare function __read(o: any, n: any): any;
|
|
15
|
+
/** @deprecated */
|
|
15
16
|
declare function __spread(...args: any[]): any[];
|
|
17
|
+
/** @deprecated */
|
|
16
18
|
declare function __spreadArrays(...args: any[]): any[];
|
|
17
|
-
declare function
|
|
19
|
+
declare function __spreadArray(to: any, from: any, pack: any, ...args: any[]): any;
|
|
20
|
+
declare function __await(v: any): __await;
|
|
18
21
|
declare class __await {
|
|
19
22
|
constructor(v: any);
|
|
20
23
|
v: any;
|
|
@@ -25,8 +28,9 @@ declare function __asyncValues(o: any): any;
|
|
|
25
28
|
declare function __makeTemplateObject(cooked: any, raw: any): any;
|
|
26
29
|
declare function __importStar(mod: any): any;
|
|
27
30
|
declare function __importDefault(mod: any): any;
|
|
28
|
-
declare function __classPrivateFieldGet(receiver: any,
|
|
29
|
-
declare function __classPrivateFieldSet(receiver: any,
|
|
31
|
+
declare function __classPrivateFieldGet(receiver: any, state: any, kind: any, f: any): any;
|
|
32
|
+
declare function __classPrivateFieldSet(receiver: any, state: any, value: any, kind: any, f: any): any;
|
|
33
|
+
declare function __classPrivateFieldIn(state: any, receiver: any): any;
|
|
30
34
|
declare function __assign(...args: any[]): any;
|
|
31
35
|
declare function __createBinding(o: any, m: any, k: any, k2: any): void;
|
|
32
|
-
export { __extends, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault, __classPrivateFieldGet, __classPrivateFieldSet, __assign, __createBinding };
|
|
36
|
+
export { __extends, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __spreadArray, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault, __classPrivateFieldGet, __classPrivateFieldSet, __classPrivateFieldIn, __assign, __createBinding };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
/******************************************************************************
|
|
4
4
|
Copyright (c) Microsoft Corporation.
|
|
5
5
|
|
|
6
6
|
Permission to use, copy, modify, and/or distribute this software for any
|
package/types/chart.types.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { ReactElement } from 'react';
|
|
2
2
|
import { RectangleProps } from 'recharts';
|
|
3
3
|
import { DataKey } from 'recharts/types/util/types';
|
|
4
|
-
import { DotSettingProps } from "./utils/dot.types";
|
|
5
4
|
import { DataProps } from "./utils/data.types";
|
|
5
|
+
import { DotSettingProps } from "./utils/dot.types";
|
|
6
6
|
type CurveType = 'linear' | 'monotone' | 'step';
|
|
7
7
|
type RectangleShapeType = ReactElement<SVGElement> | ((props: any) => ReactElement<SVGElement>) | RectangleProps | boolean;
|
|
8
8
|
interface ChartProps {
|
package/types/options.types.d.ts
CHANGED
|
@@ -4,11 +4,11 @@ import { BrushProps } from "./brush.types";
|
|
|
4
4
|
import { CartesianGridProps } from "./cartesianGrid.types";
|
|
5
5
|
import { ComposedChartProps } from "./composedChart.types";
|
|
6
6
|
import { LegendProps } from "./legend.types";
|
|
7
|
+
import { ResponsiveContainerProps } from "./responsiveContainer.types";
|
|
8
|
+
import { SeriaProps } from "./seria.types";
|
|
7
9
|
import { TooltipProps } from "./tooltip.types";
|
|
8
10
|
import { XAxisProps } from "./xAxis.types";
|
|
9
11
|
import { YAxisProps } from "./yAxis.types";
|
|
10
|
-
import { SeriaProps } from "./seria.types";
|
|
11
|
-
import { ResponsiveContainerProps } from "./responsiveContainer.types";
|
|
12
12
|
interface OptionsProps {
|
|
13
13
|
/**
|
|
14
14
|
* Индефикатор графика
|
package/types/seria.types.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { ChartProps } from "./chart.types";
|
|
2
|
-
import { LabelListProps } from "./labelList.types";
|
|
3
1
|
import { DataProps } from "./utils/data.types";
|
|
4
2
|
import { GradientProps } from "./utils/gradient.types";
|
|
3
|
+
import { ChartProps } from "./chart.types";
|
|
4
|
+
import { LabelListProps } from "./labelList.types";
|
|
5
5
|
type RadiusProp = {
|
|
6
6
|
top?: number;
|
|
7
7
|
bottom?: number;
|
package/types/tooltip.types.d.ts
CHANGED
|
@@ -57,7 +57,7 @@ interface TooltipProps {
|
|
|
57
57
|
/**
|
|
58
58
|
* Стиль метки всплывающей подсказки по умолчанию, которая является элементом p.
|
|
59
59
|
*/
|
|
60
|
-
labelStyle?:
|
|
60
|
+
labelStyle?: Record<string, unknown>;
|
|
61
61
|
/**
|
|
62
62
|
* Значение метки, которое сейчас активно, обычно рассчитывается внутри компании.
|
|
63
63
|
*/
|