@xfers/design-system 2.5.0 → 2.6.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/cjs/index.js +1 -1
- package/cjs/index.js.map +1 -1
- package/dist/components/Chart/index.js +28 -10
- package/dist/components/Chart/index.js.map +1 -1
- package/dist/components/Tooltip/index.js +2 -2
- package/dist/components/Tooltip/index.js.map +1 -1
- package/dist/types/components/Chart/index.d.ts +2 -1
- package/dist/types/components/Tooltip/index.d.ts +2 -1
- package/es/index.js +2 -2
- package/es/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -16,7 +16,7 @@ var chart_js_1 = require("chart.js");
|
|
|
16
16
|
var react_chartjs_2_1 = require("react-chartjs-2");
|
|
17
17
|
chart_js_1.Chart.register(chart_js_1.CategoryScale, chart_js_1.LinearScale, chart_js_1.PointElement, chart_js_1.LineElement, chart_js_1.LineController, chart_js_1.Tooltip, chart_js_1.Legend, chart_js_1.Filler);
|
|
18
18
|
var CustomChart = function (_a) {
|
|
19
|
-
var xValues = _a.xValues, yValues = _a.yValues, dataPrefix = _a.dataPrefix, dataPostfix = _a.dataPostfix, _b = _a.height, height = _b === void 0 ? 40 : _b;
|
|
19
|
+
var xValues = _a.xValues, yValues = _a.yValues, dataPrefix = _a.dataPrefix, dataPostfix = _a.dataPostfix, straitsXStyle = _a.straitsXStyle, _b = _a.height, height = _b === void 0 ? 40 : _b;
|
|
20
20
|
var chartRef = react_1.useRef(null);
|
|
21
21
|
var _c = react_1.useState({
|
|
22
22
|
datasets: []
|
|
@@ -41,9 +41,13 @@ var CustomChart = function (_a) {
|
|
|
41
41
|
gradient.addColorStop(0.3, 'rgba(47, 141, 238, 0.08)');
|
|
42
42
|
gradient.addColorStop(0.6, 'rgba(47, 141, 238, 0.0002)');
|
|
43
43
|
gradient.addColorStop(1, 'rgba(47, 141, 238, 0');
|
|
44
|
-
var
|
|
44
|
+
var straitsXGradient = context.createLinearGradient(0, 0, 0, 280);
|
|
45
|
+
straitsXGradient.addColorStop(0, 'rgba(0, 211, 126, 0.2)');
|
|
46
|
+
straitsXGradient.addColorStop(0.1, 'rgba(0, 211, 126, 0.1)');
|
|
47
|
+
straitsXGradient.addColorStop(1, 'rgba(0, 211, 126, 0)');
|
|
48
|
+
var chartData = __assign(__assign({}, data), { datasets: data.datasets.map(function (dataset) { return (__assign(__assign({}, dataset), { backgroundColor: straitsXStyle ? straitsXGradient : gradient, fill: true, borderColor: straitsXStyle ? '#00D37E' : '#2E8DEE', pointRadius: 0 })); }) });
|
|
45
49
|
setChartData(chartData);
|
|
46
|
-
}, []);
|
|
50
|
+
}, [straitsXStyle, xValues, yValues]);
|
|
47
51
|
var options = {
|
|
48
52
|
maintainAspectRatio: false,
|
|
49
53
|
plugins: {
|
|
@@ -59,6 +63,11 @@ var CustomChart = function (_a) {
|
|
|
59
63
|
intersect: false,
|
|
60
64
|
padding: 15,
|
|
61
65
|
displayColors: false,
|
|
66
|
+
borderColor: 'rgba(0, 211, 126, 1)',
|
|
67
|
+
borderWidth: straitsXStyle ? 1 : 0,
|
|
68
|
+
backgroundColor: straitsXStyle ? '#ffffff' : '#000000',
|
|
69
|
+
titleColor: straitsXStyle ? '#1B2736' : '#fff',
|
|
70
|
+
bodyColor: straitsXStyle ? '#1B2736' : '#fff',
|
|
62
71
|
titleAlign: 'center',
|
|
63
72
|
bodyAlign: 'center',
|
|
64
73
|
titleFont: {
|
|
@@ -68,12 +77,15 @@ var CustomChart = function (_a) {
|
|
|
68
77
|
size: 14
|
|
69
78
|
},
|
|
70
79
|
callbacks: {
|
|
80
|
+
title: function (data) {
|
|
81
|
+
return straitsXStyle
|
|
82
|
+
? "" + prefix + data[0].parsed.y + postfix
|
|
83
|
+
: data[0].label;
|
|
84
|
+
},
|
|
71
85
|
label: function (data) {
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
}
|
|
76
|
-
return label;
|
|
86
|
+
return straitsXStyle
|
|
87
|
+
? data.label
|
|
88
|
+
: "" + prefix + data.parsed.y + postfix;
|
|
77
89
|
}
|
|
78
90
|
}
|
|
79
91
|
}
|
|
@@ -81,7 +93,11 @@ var CustomChart = function (_a) {
|
|
|
81
93
|
scales: {
|
|
82
94
|
x: {
|
|
83
95
|
ticks: {
|
|
84
|
-
color: 'rgba(0, 0, 0, 0.4)'
|
|
96
|
+
color: straitsXStyle ? '#1B2736' : 'rgba(0, 0, 0, 0.4)',
|
|
97
|
+
font: {
|
|
98
|
+
weight: '500',
|
|
99
|
+
size: 13
|
|
100
|
+
}
|
|
85
101
|
},
|
|
86
102
|
grid: {
|
|
87
103
|
display: false
|
|
@@ -89,8 +105,10 @@ var CustomChart = function (_a) {
|
|
|
89
105
|
},
|
|
90
106
|
y: {
|
|
91
107
|
ticks: {
|
|
108
|
+
beginAtZero: true,
|
|
109
|
+
padding: 18,
|
|
92
110
|
maxTicksLimit: 3,
|
|
93
|
-
color: 'rgba(0, 0, 0, 0.4)',
|
|
111
|
+
color: straitsXStyle ? '#1B2736' : 'rgba(0, 0, 0, 0.4)',
|
|
94
112
|
callback: function (label) { return "" + prefix + label + postfix; }
|
|
95
113
|
},
|
|
96
114
|
grid: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Chart/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,+BAA0D;AAE1D,qCAUiB;AACjB,mDAAuC;AAEvC,gBAAO,CAAC,QAAQ,CACd,wBAAa,EACb,sBAAW,EACX,uBAAY,EACZ,sBAAW,EACX,yBAAc,EACd,kBAAO,EACP,iBAAM,EACN,iBAAM,CACP,CAAA;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Chart/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -36,8 +36,8 @@ var defaultOverlayStyle = emotion_1.css(templateObject_1 || (templateObject_1 =
|
|
|
36
36
|
var Container = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding: 7px;\n font-family: Inter;\n font-style: normal;\n font-weight: 500;\n font-size: 16px;\n line-height: 21px;\n color: #ffffff;\n\n h1 {\n font-family: Inter;\n font-style: normal;\n font-weight: bold;\n font-size: 16px;\n line-height: 19px;\n margin: 0;\n color: #ffffff;\n margin-bottom: 10px;\n }\n"], ["\n padding: 7px;\n font-family: Inter;\n font-style: normal;\n font-weight: 500;\n font-size: 16px;\n line-height: 21px;\n color: #ffffff;\n\n h1 {\n font-family: Inter;\n font-style: normal;\n font-weight: bold;\n font-size: 16px;\n line-height: 19px;\n margin: 0;\n color: #ffffff;\n margin-bottom: 10px;\n }\n"])));
|
|
37
37
|
var FooterContainer = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-top: 20px;\n display: flex;\n justify-content: flex-end;\n\n a {\n margin-left: 20px;\n }\n"], ["\n margin-top: 20px;\n display: flex;\n justify-content: flex-end;\n\n a {\n margin-left: 20px;\n }\n"])));
|
|
38
38
|
function default_1(_a) {
|
|
39
|
-
var children = _a.children, _b = _a.placement, placement = _b === void 0 ? 'bottomRight' : _b, _c = _a.overlayClassName, overlayClassName = _c === void 0 ? defaultOverlayStyle : _c, title = _a.title, footer = _a.footer, _d = _a.mouseEnterDelay, mouseEnterDelay = _d === void 0 ? 0 : _d, _e = _a.mouseLeaveDelay, mouseLeaveDelay = _e === void 0 ? 0 : _e, rest = __rest(_a, ["children", "placement", "overlayClassName", "title", "footer", "mouseEnterDelay", "mouseLeaveDelay"]);
|
|
40
|
-
return (react_1.default.createElement(tooltip_1.default, __assign({ overlayClassName: overlayClassName, arrowPointAtCenter: true, placement: placement, title: react_1.default.createElement(Container, null,
|
|
39
|
+
var children = _a.children, _b = _a.placement, placement = _b === void 0 ? 'bottomRight' : _b, _c = _a.overlayClassName, overlayClassName = _c === void 0 ? defaultOverlayStyle : _c, color = _a.color, title = _a.title, footer = _a.footer, _d = _a.mouseEnterDelay, mouseEnterDelay = _d === void 0 ? 0 : _d, _e = _a.mouseLeaveDelay, mouseLeaveDelay = _e === void 0 ? 0 : _e, rest = __rest(_a, ["children", "placement", "overlayClassName", "color", "title", "footer", "mouseEnterDelay", "mouseLeaveDelay"]);
|
|
40
|
+
return (react_1.default.createElement(tooltip_1.default, __assign({ overlayClassName: overlayClassName, arrowPointAtCenter: true, color: color, placement: placement, title: react_1.default.createElement(Container, null,
|
|
41
41
|
title,
|
|
42
42
|
footer && react_1.default.createElement(FooterContainer, null, footer)), mouseEnterDelay: mouseEnterDelay, mouseLeaveDelay: mouseLeaveDelay }, rest), children));
|
|
43
43
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tooltip/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAyB;AACzB,2CAAqC;AACrC,qCAAkC;AAElC,0CAAoC;AACpC,mCAA6B;AAC7B,yDAA8D;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tooltip/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAyB;AACzB,2CAAqC;AACrC,qCAAkC;AAElC,0CAAoC;AACpC,mCAA6B;AAC7B,yDAA8D;AA6B9D,IAAM,mBAAmB,GAAG,aAAG,0VAAA,mPAW3B,EAAkB,kCAGrB,KAHG,gCAAkB,CAGrB,CAAA;AAED,IAAM,SAAS,GAAG,gBAAM,CAAC,GAAG,8ZAAA,2VAmB3B,IAAA,CAAA;AAED,IAAM,eAAe,GAAG,gBAAM,CAAC,GAAG,kLAAA,+GAQjC,IAAA,CAAA;AAED,mBAAwB,EAUhB;IATN,IAAA,QAAQ,cAAA,EACR,iBAAyB,EAAzB,SAAS,mBAAG,aAAa,KAAA,EACzB,wBAAsC,EAAtC,gBAAgB,mBAAG,mBAAmB,KAAA,EACtC,KAAK,WAAA,EACL,KAAK,WAAA,EACL,MAAM,YAAA,EACN,uBAAmB,EAAnB,eAAe,mBAAG,CAAC,KAAA,EACnB,uBAAmB,EAAnB,eAAe,mBAAG,CAAC,KAAA,EAChB,IAAI,cATe,+GAUvB,CADQ;IAEP,OAAO,CACL,8BAAC,iBAAO,aACN,gBAAgB,EAAE,gBAAgB,EAClC,kBAAkB,QAClB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,KAAK,EACH,8BAAC,SAAS;YACP,KAAK;YACL,MAAM,IAAI,8BAAC,eAAe,QAAE,MAAM,CAAmB,CAC5C,EAEd,eAAe,EAAE,eAAe,EAChC,eAAe,EAAE,eAAe,IAC5B,IAAI,GAEP,QAAQ,CACD,CACX,CAAA;AACH,CAAC;AA9BD,4BA8BC"}
|
|
@@ -6,6 +6,7 @@ declare type ChartProps = {
|
|
|
6
6
|
dataPostfix?: string;
|
|
7
7
|
height?: number;
|
|
8
8
|
width?: number;
|
|
9
|
+
straitsXStyle?: boolean;
|
|
9
10
|
};
|
|
10
|
-
declare const CustomChart: ({ xValues, yValues, dataPrefix, dataPostfix, height }: ChartProps) => JSX.Element;
|
|
11
|
+
declare const CustomChart: ({ xValues, yValues, dataPrefix, dataPostfix, straitsXStyle, height }: ChartProps) => JSX.Element;
|
|
11
12
|
export default CustomChart;
|
|
@@ -10,6 +10,7 @@ declare type Props = {
|
|
|
10
10
|
overlayClassName?: string;
|
|
11
11
|
mouseEnterDelay?: number;
|
|
12
12
|
mouseLeaveDelay?: number;
|
|
13
|
+
color?: string;
|
|
13
14
|
};
|
|
14
|
-
export default function ({ children, placement, overlayClassName, title, footer, mouseEnterDelay, mouseLeaveDelay, ...rest }: Props): JSX.Element;
|
|
15
|
+
export default function ({ children, placement, overlayClassName, color, title, footer, mouseEnterDelay, mouseLeaveDelay, ...rest }: Props): JSX.Element;
|
|
15
16
|
export {};
|