@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
|
@@ -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 };
|
package/cssm/index.js
CHANGED
|
@@ -2,12 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
require('./tslib.es6-
|
|
5
|
+
require('./tslib.es6-0de342ae.js');
|
|
6
6
|
require('react');
|
|
7
7
|
require('classnames');
|
|
8
8
|
require('recharts');
|
|
9
|
-
|
|
10
|
-
require('./
|
|
9
|
+
require('./hooks/usePathBar/utils/getRadius.js');
|
|
10
|
+
require('./hooks/usePathBar/index.js');
|
|
11
|
+
require('./components/CustomizedLabel.js');
|
|
12
|
+
require('./icons/Point.js');
|
|
13
|
+
require('./components/Dot/index.module.css');
|
|
14
|
+
require('./components/Dot/index.js');
|
|
11
15
|
require('@alfalab/core-components-typography/cssm');
|
|
12
16
|
require('./icons/Circle.js');
|
|
13
17
|
require('./icons/CircleLine.js');
|
|
@@ -15,23 +19,19 @@ require('./icons/FilledCircle.js');
|
|
|
15
19
|
require('./icons/StrokeCircle.js');
|
|
16
20
|
require('./components/Legends/index.module.css');
|
|
17
21
|
require('./components/Legends/index.js');
|
|
18
|
-
require('./
|
|
19
|
-
require('./components/
|
|
20
|
-
require('./components/
|
|
22
|
+
require('./components/LinearGradient.js');
|
|
23
|
+
require('./components/RectBar.js');
|
|
24
|
+
require('./components/Tick/index.module.css');
|
|
25
|
+
require('./components/Tick/index.js');
|
|
26
|
+
require('./components/TooltipContent/index.module.css');
|
|
27
|
+
require('./components/TooltipContent/index.js');
|
|
28
|
+
var Component = require('./Component.js');
|
|
21
29
|
require('./hooks/useSettings/utils/setComposedChartsMargin.js');
|
|
22
30
|
require('./hooks/useSettings/utils/setDatas.js');
|
|
23
31
|
require('./hooks/useSettings/utils/setGradientCharts.js');
|
|
24
32
|
require('./hooks/useSettings/utils/setLegendMargin.js');
|
|
25
33
|
require('./hooks/useSettings/utils/sortByIndex.js');
|
|
26
34
|
require('./hooks/useSettings/index.js');
|
|
27
|
-
require('./hooks/usePathBar/utils/getRadius.js');
|
|
28
|
-
require('./hooks/usePathBar/index.js');
|
|
29
|
-
require('./components/CustomizedLabel.js');
|
|
30
|
-
require('./components/RectBar.js');
|
|
31
|
-
require('./components/Tick/index.module.css');
|
|
32
|
-
require('./components/Tick/index.js');
|
|
33
|
-
require('./components/TooltipContent/index.module.css');
|
|
34
|
-
require('./components/TooltipContent/index.js');
|
|
35
35
|
require('./index.module.css');
|
|
36
36
|
|
|
37
37
|
|
|
@@ -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
|
|
@@ -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/esm/Component.js
CHANGED
|
@@ -1,37 +1,35 @@
|
|
|
1
|
-
import { _ as __assign } from './tslib.es6-
|
|
1
|
+
import { _ as __assign } from './tslib.es6-efd85325.js';
|
|
2
2
|
import React, { useState, useRef, useMemo, useCallback, useEffect } from 'react';
|
|
3
3
|
import cn from 'classnames';
|
|
4
4
|
import { Legend, CartesianGrid, XAxis, YAxis, Brush, Tooltip, Area, Line, Bar, LabelList, Cell, ResponsiveContainer, ComposedChart } from 'recharts';
|
|
5
|
-
import
|
|
5
|
+
import './hooks/usePathBar/utils/getRadius.js';
|
|
6
|
+
import './hooks/usePathBar/index.js';
|
|
7
|
+
import { CustomizedLabel } from './components/CustomizedLabel.js';
|
|
8
|
+
import './icons/Point.js';
|
|
9
|
+
import { Dot } from './components/Dot/index.js';
|
|
6
10
|
import '@alfalab/core-components-typography/esm';
|
|
7
11
|
import './icons/Circle.js';
|
|
8
12
|
import './icons/CircleLine.js';
|
|
9
13
|
import './icons/FilledCircle.js';
|
|
10
14
|
import './icons/StrokeCircle.js';
|
|
11
15
|
import { Legends } from './components/Legends/index.js';
|
|
12
|
-
import './
|
|
13
|
-
import {
|
|
16
|
+
import { LinearGradient } from './components/LinearGradient.js';
|
|
17
|
+
import { RectBar } from './components/RectBar.js';
|
|
18
|
+
import { Tick } from './components/Tick/index.js';
|
|
19
|
+
import { TooltipContent } from './components/TooltipContent/index.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 { useSettings } from './hooks/useSettings/index.js';
|
|
20
|
-
import './hooks/usePathBar/utils/getRadius.js';
|
|
21
|
-
import './hooks/usePathBar/index.js';
|
|
22
|
-
import { CustomizedLabel } from './components/CustomizedLabel.js';
|
|
23
|
-
import { RectBar } from './components/RectBar.js';
|
|
24
|
-
import { Tick } from './components/Tick/index.js';
|
|
25
|
-
import { TooltipContent } from './components/TooltipContent/index.js';
|
|
26
26
|
|
|
27
27
|
var CustomizedHOC = function (Component, options) {
|
|
28
|
-
var NewComponent = function (props) {
|
|
29
|
-
return React.createElement(Component, __assign({}, props, options));
|
|
30
|
-
};
|
|
28
|
+
var NewComponent = function (props) { return React.createElement(Component, __assign({}, props, options)); };
|
|
31
29
|
return NewComponent;
|
|
32
30
|
};
|
|
33
31
|
|
|
34
|
-
var styles = {"coreChart":"
|
|
32
|
+
var styles = {"coreChart":"chart__coreChart_tioz0","bar":"chart__bar_tioz0","unfocused":"chart__unfocused_tioz0"};
|
|
35
33
|
require('./index.css')
|
|
36
34
|
|
|
37
35
|
var Chart = function (props) {
|
|
@@ -168,7 +166,8 @@ var Chart = function (props) {
|
|
|
168
166
|
? CustomizedHOC(Dot, {
|
|
169
167
|
activeDot: activeDotsState.active,
|
|
170
168
|
dotSettings: properties.dotSettings,
|
|
171
|
-
inherit: (properties === null || properties === void 0 ? void 0 : properties.inheritStroke)
|
|
169
|
+
inherit: (properties === null || properties === void 0 ? void 0 : properties.inheritStroke)
|
|
170
|
+
? properties.inheritStroke
|
|
172
171
|
: false,
|
|
173
172
|
})
|
|
174
173
|
: false, activeDot: false }))) : null;
|
|
@@ -235,12 +234,10 @@ var Chart = function (props) {
|
|
|
235
234
|
});
|
|
236
235
|
}
|
|
237
236
|
if (typeof activeTooltipIndex === 'number' && typeof activeDotsState.prev === 'number') {
|
|
238
|
-
setActiveDotsState(function (prev) {
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
};
|
|
243
|
-
});
|
|
237
|
+
setActiveDotsState(function (prev) { return ({
|
|
238
|
+
prev: prev.active,
|
|
239
|
+
active: activeTooltipIndex,
|
|
240
|
+
}); });
|
|
244
241
|
}
|
|
245
242
|
};
|
|
246
243
|
var mouseMove = function (e) {
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
/* hash:
|
|
2
|
-
.
|
|
1
|
+
/* hash: c2x5b */
|
|
2
|
+
.chart__dotUnfocused_8wcu4 {
|
|
3
3
|
opacity: 0.3;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
|
-
.
|
|
7
|
-
.
|
|
8
|
-
.
|
|
6
|
+
.chart__dot_8wcu4,
|
|
7
|
+
.chart__dotItem_8wcu4,
|
|
8
|
+
.chart__dotWrap_8wcu4 {
|
|
9
9
|
transition: all 0.2s ease;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
-
.
|
|
13
|
-
animation:
|
|
12
|
+
.chart__dot_8wcu4 {
|
|
13
|
+
animation: chart__showDot_8wcu4 0.5s ease;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
@keyframes
|
|
16
|
+
@keyframes chart__showDot_8wcu4 {
|
|
17
17
|
from {
|
|
18
18
|
opacity: 0;
|
|
19
19
|
}
|
|
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
|
|
|
2
2
|
import cn from 'classnames';
|
|
3
3
|
import { PointIcon } from '../../icons/Point.js';
|
|
4
4
|
|
|
5
|
-
var styles = {"dotUnfocused":"
|
|
5
|
+
var styles = {"dotUnfocused":"chart__dotUnfocused_8wcu4","dot":"chart__dot_8wcu4","dotItem":"chart__dotItem_8wcu4","dotWrap":"chart__dotWrap_8wcu4","showDot":"chart__showDot_8wcu4"};
|
|
6
6
|
require('./index.css')
|
|
7
7
|
|
|
8
8
|
var Dot = React.forwardRef(function (_a, ref) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: fqqa1 */
|
|
2
2
|
:root {
|
|
3
3
|
|
|
4
4
|
/* Hard */
|
|
@@ -10,31 +10,31 @@
|
|
|
10
10
|
:root {
|
|
11
11
|
--gap-2xl: 32px;
|
|
12
12
|
}
|
|
13
|
-
.
|
|
13
|
+
.chart__legendContent_msguv {
|
|
14
14
|
display: flex;
|
|
15
15
|
align-items: center;
|
|
16
16
|
flex-wrap: wrap;
|
|
17
17
|
}
|
|
18
|
-
.
|
|
18
|
+
.chart__legendWrap_msguv {
|
|
19
19
|
width: 100%;
|
|
20
20
|
margin: 0;
|
|
21
21
|
padding: 0;
|
|
22
22
|
}
|
|
23
|
-
.
|
|
23
|
+
.chart__legendItem_msguv {
|
|
24
24
|
margin-right: var(--gap-2xl);
|
|
25
25
|
cursor: pointer;
|
|
26
26
|
display: inline-block;
|
|
27
27
|
}
|
|
28
|
-
.
|
|
28
|
+
.chart__legendItem_msguv:last-child {
|
|
29
29
|
margin-right: 0;
|
|
30
30
|
}
|
|
31
|
-
.
|
|
31
|
+
.chart__legendUnactive_msguv {
|
|
32
32
|
opacity: 0.3;
|
|
33
33
|
}
|
|
34
|
-
.
|
|
34
|
+
.chart__legendIcon_msguv {
|
|
35
35
|
margin-right: 13px;
|
|
36
36
|
display: flex;
|
|
37
37
|
}
|
|
38
|
-
.
|
|
38
|
+
.chart__legendValue_msguv {
|
|
39
39
|
text-transform: capitalize;
|
|
40
40
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { DataDynamicBooleanProps } from "../../types/utils/data.types";
|
|
4
3
|
import { LegendProps } from "../../types/legend.types";
|
|
5
4
|
import { SeriaProps } from "../../types/seria.types";
|
|
5
|
+
import { DataDynamicBooleanProps } from "../../types/utils/data.types";
|
|
6
6
|
interface Props {
|
|
7
7
|
legend: LegendProps;
|
|
8
8
|
series: SeriaProps[];
|
|
@@ -6,7 +6,7 @@ import { CircleLineIcon } from '../../icons/CircleLine.js';
|
|
|
6
6
|
import { FilledCircleIcon } from '../../icons/FilledCircle.js';
|
|
7
7
|
import { StrokeCircleIcon } from '../../icons/StrokeCircle.js';
|
|
8
8
|
|
|
9
|
-
var styles = {"legendContent":"
|
|
9
|
+
var styles = {"legendContent":"chart__legendContent_msguv","legendWrap":"chart__legendWrap_msguv","legendItem":"chart__legendItem_msguv","legendUnactive":"chart__legendUnactive_msguv","legendIcon":"chart__legendIcon_msguv","legendValue":"chart__legendValue_msguv"};
|
|
10
10
|
require('./index.css')
|
|
11
11
|
|
|
12
12
|
var icons = {
|
|
@@ -30,7 +30,8 @@ var Legends = React.forwardRef(function (_a, ref) {
|
|
|
30
30
|
return (React.createElement("li", { role: 'presentation', key: id + "-" + item.properties.dataKey, className: cn(styles.legendItem, charts["" + item.properties.dataKey] ? '' : styles.legendUnactive), onClick: function () { return toggleChart(item); } },
|
|
31
31
|
React.createElement("div", { className: cn(styles.legendContent) },
|
|
32
32
|
Icon ? (React.createElement("i", { className: cn(styles.legendIcon) },
|
|
33
|
-
React.createElement(Icon, { fill: ((_a = item.properties) === null || _a === void 0 ? void 0 : _a.fill) ||
|
|
33
|
+
React.createElement(Icon, { fill: ((_a = item.properties) === null || _a === void 0 ? void 0 : _a.fill) ||
|
|
34
|
+
((_b = item.properties) === null || _b === void 0 ? void 0 : _b.stroke) ||
|
|
34
35
|
'', height: legend.iconHeight || 16 }))) : null,
|
|
35
36
|
React.createElement(Typography.Text, { view: 'primary-medium', tag: 'span', className: cn(styles.legendValue) }, item.properties.name))));
|
|
36
37
|
})));
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { LinearGradientProps } from "../types/utils/gradient.types";
|
|
4
|
-
declare const LinearGradient: ({ id, gid, points }: LinearGradientProps) => React.ReactElement
|
|
4
|
+
declare const LinearGradient: ({ id, gid, points }: LinearGradientProps) => React.ReactElement;
|
|
5
5
|
export { LinearGradient };
|
|
@@ -4,11 +4,7 @@ import { usePathBar } from '../hooks/usePathBar/index.js';
|
|
|
4
4
|
|
|
5
5
|
// eslint-disable-next-line complexity
|
|
6
6
|
var getPath = function (x, width, height, initHeight, topRadius, bottomRadius, initY) {
|
|
7
|
-
return "\n M" + (x + ((height !== 0 && bottomRadius) || 0)) + " " + (initY + initHeight || 0) + "\n Q" + x + " " + (initY + initHeight) + " " + x + " " + (initY +
|
|
8
|
-
initHeight -
|
|
9
|
-
((height !== 0 && bottomRadius) || 0)) + "\n L" + x + " " + (initY + ((height !== 0 && topRadius) || 0)) + "\n Q" + x + " " + initY + " " + (x + ((height !== 0 && topRadius) || 0)) + " " + initY + "\n L" + (x + width - ((height !== 0 && topRadius) || 0)) + " " + initY + "\n Q" + (x + width) + " " + initY + " " + (x + width) + " " + (initY + (topRadius || 0)) + "\n L" + (x + width) + " " + (initY + initHeight - ((height !== 0 && bottomRadius) || 0)) + "\n Q" + (x + width) + " " + (initY + initHeight) + " " + (x +
|
|
10
|
-
width -
|
|
11
|
-
((height !== 0 && bottomRadius) || 0)) + " " + (initY + initHeight) + "\n Z\n ";
|
|
7
|
+
return "\n M" + (x + ((height !== 0 && bottomRadius) || 0)) + " " + (initY + initHeight || 0) + "\n Q" + x + " " + (initY + initHeight) + " " + x + " " + (initY + initHeight - ((height !== 0 && bottomRadius) || 0)) + "\n L" + x + " " + (initY + ((height !== 0 && topRadius) || 0)) + "\n Q" + x + " " + initY + " " + (x + ((height !== 0 && topRadius) || 0)) + " " + initY + "\n L" + (x + width - ((height !== 0 && topRadius) || 0)) + " " + initY + "\n Q" + (x + width) + " " + initY + " " + (x + width) + " " + (initY + (topRadius || 0)) + "\n L" + (x + width) + " " + (initY + initHeight - ((height !== 0 && bottomRadius) || 0)) + "\n Q" + (x + width) + " " + (initY + initHeight) + " " + (x + width - ((height !== 0 && bottomRadius) || 0)) + " " + (initY + initHeight) + "\n Z\n ";
|
|
12
8
|
};
|
|
13
9
|
var RectBar = function (_a) {
|
|
14
10
|
var fill = _a.fill, x = _a.x, y = _a.y, width = _a.width, height = _a.height, radius = _a.radius, background = _a.background;
|
|
@@ -18,8 +14,7 @@ var RectBar = function (_a) {
|
|
|
18
14
|
background: background,
|
|
19
15
|
y: y,
|
|
20
16
|
}), initHeight = _b[0], topRadius = _b[1], bottomRadius = _b[2], initY = _b[3];
|
|
21
|
-
|
|
22
|
-
return React.createElement(React.Fragment, null, path);
|
|
17
|
+
return useMemo(function () { return (React.createElement("path", { d: getPath(x, width, height, initHeight, topRadius, bottomRadius, initY), stroke: 'none', fill: fill })); }, [x, width, height, initHeight, topRadius, bottomRadius, initY, fill]);
|
|
23
18
|
};
|
|
24
19
|
|
|
25
20
|
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
|
var Tick = function (_a) {
|
|
@@ -11,9 +11,7 @@ var Tick = function (_a) {
|
|
|
11
11
|
(xAxis.tickMargin > 0 ? xAxis.tickMargin - radius / 2 : xAxis.tickMargin === 0)
|
|
12
12
|
? (radius / 2) * -1
|
|
13
13
|
: null;
|
|
14
|
-
return (React.createElement("g", { className: cn(styles.tick), opacity: '1', textAnchor: 'middle', transform: "translate(" + payload.coordinate + ", " + (y -
|
|
15
|
-
(typeof marginTick === 'number' ? marginTick : 0) -
|
|
16
|
-
radius * 2) + ")" },
|
|
14
|
+
return (React.createElement("g", { className: cn(styles.tick), opacity: '1', textAnchor: 'middle', transform: "translate(" + payload.coordinate + ", " + (y - (typeof marginTick === 'number' ? marginTick : 0) - radius * 2) + ")" },
|
|
17
15
|
React.createElement("text", { className: cn(styles.tickText), y: '30' }, tickFormatter ? tickFormatter(payload.value) : payload.value),
|
|
18
16
|
React.createElement("circle", { r: radius, className: cn(styles.circle) })));
|
|
19
17
|
};
|
|
@@ -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/esm';
|
|
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
|
var TooltipContent = function (_a) {
|
|
@@ -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,4 +1,4 @@
|
|
|
1
|
-
import { _ as __assign } from '../../tslib.es6-
|
|
1
|
+
import { _ as __assign } from '../../tslib.es6-efd85325.js';
|
|
2
2
|
import { useState, useEffect } from 'react';
|
|
3
3
|
import { setComposedChartsMargin } from './utils/setComposedChartsMargin.js';
|
|
4
4
|
import { setDatas } from './utils/setDatas.js';
|
|
@@ -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,6 +1,6 @@
|
|
|
1
1
|
var setComposedChartsMargin = function (composeChart, legend, brush, xAxis) {
|
|
2
2
|
var _a, _b, _c, _d;
|
|
3
|
-
return {
|
|
3
|
+
return ({
|
|
4
4
|
top: (((_a = composeChart === null || composeChart === void 0 ? void 0 : composeChart.initMargin) === null || _a === void 0 ? void 0 : _a.top) || 0) +
|
|
5
5
|
((legend === null || legend === void 0 ? void 0 : legend.verticalAlign) === 'top' && (legend === null || legend === void 0 ? void 0 : legend.marginTop) ? Math.abs(legend.marginTop) : 0),
|
|
6
6
|
bottom: (((_b = composeChart === null || composeChart === void 0 ? void 0 : composeChart.initMargin) === null || _b === void 0 ? void 0 : _b.bottom) || 0) +
|
|
@@ -9,7 +9,7 @@ var setComposedChartsMargin = function (composeChart, legend, brush, xAxis) {
|
|
|
9
9
|
((legend === null || legend === void 0 ? void 0 : legend.verticalAlign) !== 'top' && (legend === null || legend === void 0 ? void 0 : legend.marginTop) ? legend.marginTop : 0),
|
|
10
10
|
left: ((_c = composeChart === null || composeChart === void 0 ? void 0 : composeChart.initMargin) === null || _c === void 0 ? void 0 : _c.left) || 0,
|
|
11
11
|
right: ((_d = composeChart === null || composeChart === void 0 ? void 0 : composeChart.initMargin) === null || _d === void 0 ? void 0 : _d.right) || 0,
|
|
12
|
-
};
|
|
12
|
+
});
|
|
13
13
|
};
|
|
14
14
|
|
|
15
15
|
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 };
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { _ as __assign } from '../../../tslib.es6-
|
|
1
|
+
import { _ as __assign } from '../../../tslib.es6-efd85325.js';
|
|
2
2
|
|
|
3
3
|
var setDatas = function (series, labels) {
|
|
4
4
|
var initData = [];
|
|
5
5
|
var chartsNames = {};
|
|
6
6
|
var count = 0;
|
|
7
7
|
var _loop_1 = function (i) {
|
|
8
|
-
var _a = series[i], _b = _a.properties, _c =
|
|
8
|
+
var _a = series[i], _b = _a.properties, _c = _b === void 0 ? {} : _b, _d = _c.dataKey, dataKey = _d === void 0 ? '' : _d, _e = _a.data, seriaData = _e === void 0 ? [] : _e, hideLegend = _a.hideLegend, hide = _a.hide;
|
|
9
9
|
if (!hideLegend && !hide)
|
|
10
10
|
count += 1;
|
|
11
11
|
labels.map(function (label) {
|
|
@@ -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 };
|
|
@@ -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 };
|
package/esm/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
|
}
|