@pareto-engineering/design-system 4.9.1 → 4.9.3
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/cjs/a/AreaChart/AreaChart.js +176 -0
- package/dist/cjs/a/AreaChart/index.js +13 -0
- package/dist/cjs/a/AreaChart/styles.scss +89 -0
- package/dist/cjs/a/XMLEditor/XMLEditor.js +1 -1
- package/dist/cjs/a/index.js +8 -1
- package/dist/cjs/f/fields/FileUpload/FileUpload.js +4 -2
- package/dist/es/a/AreaChart/AreaChart.js +163 -0
- package/dist/es/a/AreaChart/index.js +1 -0
- package/dist/es/a/AreaChart/styles.scss +89 -0
- package/dist/es/a/XMLEditor/XMLEditor.js +2 -2
- package/dist/es/a/index.js +2 -1
- package/dist/es/f/fields/FileUpload/FileUpload.js +4 -2
- package/package.json +4 -3
- package/src/stories/a/AreaChart.stories.jsx +118 -0
- package/src/ui/a/AreaChart/AreaChart.jsx +185 -0
- package/src/ui/a/AreaChart/index.js +1 -0
- package/src/ui/a/AreaChart/styles.scss +89 -0
- package/src/ui/a/XMLEditor/XMLEditor.jsx +4 -1
- package/src/ui/a/index.js +1 -0
- package/src/ui/f/fields/FileUpload/FileUpload.jsx +4 -1
- package/tests/__snapshots__/Storyshots.test.js.snap +501 -0
- package/tests/test-setup.js +11 -0
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var React = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
+
var _recharts = require("recharts");
|
|
10
|
+
var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
|
|
11
|
+
require("./styles.scss");
|
|
12
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
13
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
14
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
15
|
+
// front/packages/design-system/src/ui/a/AreaChart/AreaChart.jsx
|
|
16
|
+
|
|
17
|
+
// Local Definitions
|
|
18
|
+
|
|
19
|
+
const baseClassName = _exports.default.base;
|
|
20
|
+
const componentClassName = 'area-chart';
|
|
21
|
+
const AreaChart = _ref => {
|
|
22
|
+
let {
|
|
23
|
+
id,
|
|
24
|
+
className: userClassName,
|
|
25
|
+
data,
|
|
26
|
+
title,
|
|
27
|
+
xKey,
|
|
28
|
+
yKeys,
|
|
29
|
+
xLabel,
|
|
30
|
+
yLabel,
|
|
31
|
+
colors,
|
|
32
|
+
filled,
|
|
33
|
+
height,
|
|
34
|
+
width
|
|
35
|
+
// ...otherProps
|
|
36
|
+
} = _ref;
|
|
37
|
+
const processedData = data.map(item => {
|
|
38
|
+
const yValues = yKeys.map(key => item[key]);
|
|
39
|
+
const lowerBound = Math.min(...yValues);
|
|
40
|
+
const upperBound = Math.max(...yValues);
|
|
41
|
+
const margin = (upperBound - lowerBound) * 0.1;
|
|
42
|
+
return {
|
|
43
|
+
...item,
|
|
44
|
+
bounds: [lowerBound - margin, upperBound + margin]
|
|
45
|
+
};
|
|
46
|
+
});
|
|
47
|
+
const yAxisBounds = () => {
|
|
48
|
+
const yValues = data.map(item => yKeys.map(key => item[key]));
|
|
49
|
+
const min = Math.min(...yValues.flat());
|
|
50
|
+
const max = Math.max(...yValues.flat());
|
|
51
|
+
const margin = (max - min) * 0.1;
|
|
52
|
+
return [min - margin, max + margin];
|
|
53
|
+
};
|
|
54
|
+
const CustomTooltipContent = _ref2 => {
|
|
55
|
+
let {
|
|
56
|
+
active,
|
|
57
|
+
payload,
|
|
58
|
+
label
|
|
59
|
+
} = _ref2;
|
|
60
|
+
if (active && payload && payload.length) {
|
|
61
|
+
const newPayload = payload.filter(item => item.name !== 'bounds');
|
|
62
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
63
|
+
className: "custom-tooltip"
|
|
64
|
+
}, /*#__PURE__*/React.createElement("p", {
|
|
65
|
+
className: "label"
|
|
66
|
+
}, `${xLabel}: ${label}`), newPayload.map(entry => /*#__PURE__*/React.createElement("p", {
|
|
67
|
+
className: "label",
|
|
68
|
+
key: `${entry.name}`,
|
|
69
|
+
style: {
|
|
70
|
+
color: entry.color
|
|
71
|
+
}
|
|
72
|
+
}, `${entry.name}: ${entry.value}`)));
|
|
73
|
+
}
|
|
74
|
+
return null;
|
|
75
|
+
};
|
|
76
|
+
const CustomLegend = _ref3 => {
|
|
77
|
+
let {
|
|
78
|
+
colorsArray,
|
|
79
|
+
yKeysArray
|
|
80
|
+
} = _ref3;
|
|
81
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
82
|
+
className: "custom-legend"
|
|
83
|
+
}, yKeysArray.map((key, index) => /*#__PURE__*/React.createElement("div", {
|
|
84
|
+
key: key,
|
|
85
|
+
className: "item"
|
|
86
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
87
|
+
className: "line",
|
|
88
|
+
style: {
|
|
89
|
+
backgroundColor: colorsArray[index]
|
|
90
|
+
}
|
|
91
|
+
}), /*#__PURE__*/React.createElement("span", {
|
|
92
|
+
className: "text"
|
|
93
|
+
}, key))));
|
|
94
|
+
};
|
|
95
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
96
|
+
id: id,
|
|
97
|
+
className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
|
|
98
|
+
}, /*#__PURE__*/React.createElement("h3", null, title), /*#__PURE__*/React.createElement(CustomLegend, {
|
|
99
|
+
colorsArray: colors,
|
|
100
|
+
yKeysArray: yKeys
|
|
101
|
+
}), /*#__PURE__*/React.createElement(_recharts.ResponsiveContainer, {
|
|
102
|
+
width: width,
|
|
103
|
+
height: height
|
|
104
|
+
}, /*#__PURE__*/React.createElement(_recharts.AreaChart, {
|
|
105
|
+
data: processedData
|
|
106
|
+
}, /*#__PURE__*/React.createElement(_recharts.CartesianGrid, {
|
|
107
|
+
strokeDasharray: "3 3"
|
|
108
|
+
}), /*#__PURE__*/React.createElement(_recharts.XAxis, {
|
|
109
|
+
dataKey: xKey,
|
|
110
|
+
label: {
|
|
111
|
+
value: xLabel,
|
|
112
|
+
position: 'insideBottom',
|
|
113
|
+
offset: -5
|
|
114
|
+
} // Adjusted offset for padding
|
|
115
|
+
,
|
|
116
|
+
axisLine: false,
|
|
117
|
+
tickLine: false,
|
|
118
|
+
tickCount: 3
|
|
119
|
+
}), /*#__PURE__*/React.createElement(_recharts.YAxis, {
|
|
120
|
+
domain: yAxisBounds,
|
|
121
|
+
label: {
|
|
122
|
+
value: yLabel,
|
|
123
|
+
angle: -90,
|
|
124
|
+
position: 'insideLeft',
|
|
125
|
+
offset: 15
|
|
126
|
+
},
|
|
127
|
+
axisLine: false,
|
|
128
|
+
tickLine: false,
|
|
129
|
+
tickFormatter: value => value.toFixed(2)
|
|
130
|
+
}), /*#__PURE__*/React.createElement(_recharts.Tooltip, {
|
|
131
|
+
content: /*#__PURE__*/React.createElement(CustomTooltipContent, null)
|
|
132
|
+
}), filled && /*#__PURE__*/React.createElement(_recharts.Area, {
|
|
133
|
+
id: "bounds",
|
|
134
|
+
type: "linear",
|
|
135
|
+
dataKey: "bounds",
|
|
136
|
+
stroke: "none",
|
|
137
|
+
fill: "var(--hard-ui-main-2)",
|
|
138
|
+
fillOpacity: 0.4,
|
|
139
|
+
activeDot: false,
|
|
140
|
+
dot: false,
|
|
141
|
+
label: false,
|
|
142
|
+
isAnimationActive: false
|
|
143
|
+
}), yKeys.map((key, index) => /*#__PURE__*/React.createElement(_recharts.Area, {
|
|
144
|
+
id: key,
|
|
145
|
+
key: key,
|
|
146
|
+
type: "linear",
|
|
147
|
+
dataKey: key,
|
|
148
|
+
stroke: colors[index],
|
|
149
|
+
fill: "none",
|
|
150
|
+
connectNulls: true,
|
|
151
|
+
dot: false,
|
|
152
|
+
activeDot: {
|
|
153
|
+
r: 4
|
|
154
|
+
},
|
|
155
|
+
isAnimationActive: false
|
|
156
|
+
})))));
|
|
157
|
+
};
|
|
158
|
+
AreaChart.propTypes = {
|
|
159
|
+
// eslint-disable-next-line react/forbid-prop-types
|
|
160
|
+
data: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
|
|
161
|
+
title: _propTypes.default.string.isRequired,
|
|
162
|
+
xKey: _propTypes.default.string.isRequired,
|
|
163
|
+
yKeys: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
|
|
164
|
+
xLabel: _propTypes.default.string,
|
|
165
|
+
yLabel: _propTypes.default.string,
|
|
166
|
+
colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
|
|
167
|
+
filled: _propTypes.default.bool,
|
|
168
|
+
height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
|
169
|
+
width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
|
|
170
|
+
};
|
|
171
|
+
AreaChart.defaultProps = {
|
|
172
|
+
filled: false,
|
|
173
|
+
width: '100%',
|
|
174
|
+
height: 300
|
|
175
|
+
};
|
|
176
|
+
var _default = exports.default = AreaChart;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "AreaChart", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function () {
|
|
9
|
+
return _AreaChart.default;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
var _AreaChart = _interopRequireDefault(require("./AreaChart"));
|
|
13
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
@use "@pareto-engineering/bem";
|
|
2
|
+
|
|
3
|
+
$default-margin: 1rem;
|
|
4
|
+
$default-padding: 1rem;
|
|
5
|
+
$default-box-shadow: 0 .25rem .75rem var(--ui-lines);
|
|
6
|
+
$default-text-font-size: calc(var(--s-1) * 1rem);
|
|
7
|
+
$default-border-radius: .25rem;
|
|
8
|
+
$default-legend-gap: .625rem;
|
|
9
|
+
$default-legend-padding: calc($default-padding * .125) calc($default-padding * .625);
|
|
10
|
+
$default-legend-line-width: 1.25rem;
|
|
11
|
+
$default-legend-line-height: .125rem;
|
|
12
|
+
$default-legend-line-margin-right: .3125rem;
|
|
13
|
+
$default-border-line-width: .0625rem;
|
|
14
|
+
|
|
15
|
+
.#{bem.$base} {
|
|
16
|
+
&.area-chart {
|
|
17
|
+
background-color: var(--background-far);
|
|
18
|
+
border-radius: var(--theme-default-border-radius);
|
|
19
|
+
box-shadow: $default-box-shadow;
|
|
20
|
+
margin: $default-margin 0;
|
|
21
|
+
padding: $default-padding;
|
|
22
|
+
|
|
23
|
+
h3 {
|
|
24
|
+
color: var(--subtitle);
|
|
25
|
+
margin: calc($default-margin / 5);
|
|
26
|
+
text-align: left;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.custom-legend {
|
|
30
|
+
display: flex;
|
|
31
|
+
gap: $default-legend-gap;
|
|
32
|
+
justify-content: flex-end;
|
|
33
|
+
padding-bottom: $default-padding;
|
|
34
|
+
padding-right: calc($default-padding * .25);
|
|
35
|
+
|
|
36
|
+
.item {
|
|
37
|
+
align-items: center;
|
|
38
|
+
border: $default-border-line-width solid var(--ui-lines);
|
|
39
|
+
border-radius: $default-border-radius;
|
|
40
|
+
display: flex;
|
|
41
|
+
padding: $default-legend-padding;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.line {
|
|
45
|
+
display: inline-block;
|
|
46
|
+
height: $default-legend-line-height;
|
|
47
|
+
margin-right: $default-legend-line-margin-right;
|
|
48
|
+
width: $default-legend-line-width;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.text {
|
|
52
|
+
color: var(--paragraph);
|
|
53
|
+
font-size: calc($default-text-font-size * .75);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.custom-tooltip {
|
|
58
|
+
background-color: var(--background-far);
|
|
59
|
+
border: $default-border-line-width solid var(--ui-lines);
|
|
60
|
+
border-radius: $default-border-radius;
|
|
61
|
+
padding: calc($default-padding * .25);
|
|
62
|
+
|
|
63
|
+
.label {
|
|
64
|
+
color: var(--hard-paragraph);
|
|
65
|
+
font-size: $default-text-font-size;
|
|
66
|
+
margin: calc($default-margin * .25);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/* stylelint-disable selector-max-compound-selectors -- nested elements */
|
|
71
|
+
.recharts-wrapper {
|
|
72
|
+
.recharts-surface {
|
|
73
|
+
.recharts-cartesian-grid line {
|
|
74
|
+
stroke: var(--ui-lines);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.recharts-text {
|
|
78
|
+
fill: var(--soft-paragraph);
|
|
79
|
+
font-size: calc($default-text-font-size * .75);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.recharts-text.recharts-label {
|
|
83
|
+
fill: var(--paragraph);
|
|
84
|
+
font-size: $default-text-font-size;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
}
|
|
@@ -44,7 +44,7 @@ const XMLEditor = _ref => {
|
|
|
44
44
|
(0, _react.useEffect)(() => {
|
|
45
45
|
const startState = _state.EditorState.create({
|
|
46
46
|
doc: config,
|
|
47
|
-
extensions: [_view.keymap.of([_commands.defaultKeymap, _commands.indentWithTab]), (0, _language.indentOnInput)(), (0, _view.lineNumbers)(), (0, _language.bracketMatching)(), (0, _language.foldGutter)(), (0, _view.drawSelection)(), (0, _view.highlightActiveLine)(), (0, _view.highlightActiveLineGutter)(), (0, _view.highlightSpecialChars)(), (0, _view.dropCursor)(), (0, _view.rectangularSelection)(), (0, _view.crosshairCursor)(), (0, _langXml.xml)(), _common.theme, _state.EditorState.readOnly.of(readOnly), _view.EditorView.updateListener.of(view => {
|
|
47
|
+
extensions: [_view.keymap.of([_commands.defaultKeymap, _commands.indentWithTab, ..._commands.historyKeymap]), (0, _language.indentOnInput)(), (0, _view.lineNumbers)(), (0, _language.bracketMatching)(), (0, _language.foldGutter)(), (0, _view.drawSelection)(), (0, _view.highlightActiveLine)(), (0, _view.highlightActiveLineGutter)(), (0, _view.highlightSpecialChars)(), (0, _view.dropCursor)(), (0, _view.rectangularSelection)(), (0, _view.crosshairCursor)(), (0, _langXml.xml)(), (0, _commands.history)(), _common.theme, _state.EditorState.readOnly.of(readOnly), _view.EditorView.updateListener.of(view => {
|
|
48
48
|
onChange(view);
|
|
49
49
|
// view.state.doc.toString() to receive the current content in the editor.
|
|
50
50
|
}), _view.EditorView.focusChangeEffect.of((state, focused) => {
|
package/dist/cjs/a/index.js
CHANGED
|
@@ -27,6 +27,12 @@ Object.defineProperty(exports, "AppContextProvider", {
|
|
|
27
27
|
return _AppContext.AppContextProvider;
|
|
28
28
|
}
|
|
29
29
|
});
|
|
30
|
+
Object.defineProperty(exports, "AreaChart", {
|
|
31
|
+
enumerable: true,
|
|
32
|
+
get: function () {
|
|
33
|
+
return _AreaChart.AreaChart;
|
|
34
|
+
}
|
|
35
|
+
});
|
|
30
36
|
Object.defineProperty(exports, "BlurOverlay", {
|
|
31
37
|
enumerable: true,
|
|
32
38
|
get: function () {
|
|
@@ -230,4 +236,5 @@ var _Removable = require("./Removable");
|
|
|
230
236
|
var _ToggleSwitch = require("./ToggleSwitch");
|
|
231
237
|
var _XMLEditor = require("./XMLEditor");
|
|
232
238
|
var _DatePicker = require("./DatePicker");
|
|
233
|
-
var _Tooltip = require("./Tooltip");
|
|
239
|
+
var _Tooltip = require("./Tooltip");
|
|
240
|
+
var _AreaChart = require("./AreaChart");
|
|
@@ -101,6 +101,7 @@ const FileUpload = _ref => {
|
|
|
101
101
|
});
|
|
102
102
|
};
|
|
103
103
|
const acceptOptions = Array.isArray(accept) ? accept?.join(',') : accept;
|
|
104
|
+
const isAnyFileUploading = Object.values(uploadStatus ?? {})?.map(e => e?.status)?.some(status => status === 'pending');
|
|
104
105
|
return /*#__PURE__*/React.createElement("div", {
|
|
105
106
|
id: id,
|
|
106
107
|
className: [baseClassName, componentClassName, userClassName, `preview-${filePreviewAlignment}`, `y-${color}`].filter(e => e).join(' '),
|
|
@@ -119,7 +120,7 @@ const FileUpload = _ref => {
|
|
|
119
120
|
type: "file",
|
|
120
121
|
accept: acceptOptions,
|
|
121
122
|
multiple: multiple || maxCount && maxCount > 0,
|
|
122
|
-
disabled: disabled,
|
|
123
|
+
disabled: disabled || isAnyFileUploading,
|
|
123
124
|
onChange: handleChange
|
|
124
125
|
}), /*#__PURE__*/React.createElement("span", {
|
|
125
126
|
className: "ai-icon"
|
|
@@ -226,7 +227,8 @@ FileUpload.defaultProps = {
|
|
|
226
227
|
disabled: false,
|
|
227
228
|
color: 'paragraph',
|
|
228
229
|
filePreviewAlignment: 'bottom',
|
|
229
|
-
viewOnly: false
|
|
230
|
+
viewOnly: false,
|
|
231
|
+
multiple: true
|
|
230
232
|
};
|
|
231
233
|
FileUpload.Preview = _common.Preview;
|
|
232
234
|
var _default = exports.default = FileUpload;
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
// front/packages/design-system/src/ui/a/AreaChart/AreaChart.jsx
|
|
2
|
+
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import PropTypes from 'prop-types';
|
|
5
|
+
import { AreaChart as RechartsAreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
|
|
6
|
+
import styleNames from '@pareto-engineering/bem/exports';
|
|
7
|
+
import "./styles.scss";
|
|
8
|
+
|
|
9
|
+
// Local Definitions
|
|
10
|
+
|
|
11
|
+
const baseClassName = styleNames.base;
|
|
12
|
+
const componentClassName = 'area-chart';
|
|
13
|
+
const AreaChart = ({
|
|
14
|
+
id,
|
|
15
|
+
className: userClassName,
|
|
16
|
+
data,
|
|
17
|
+
title,
|
|
18
|
+
xKey,
|
|
19
|
+
yKeys,
|
|
20
|
+
xLabel,
|
|
21
|
+
yLabel,
|
|
22
|
+
colors,
|
|
23
|
+
filled,
|
|
24
|
+
height,
|
|
25
|
+
width
|
|
26
|
+
// ...otherProps
|
|
27
|
+
}) => {
|
|
28
|
+
const processedData = data.map(item => {
|
|
29
|
+
const yValues = yKeys.map(key => item[key]);
|
|
30
|
+
const lowerBound = Math.min(...yValues);
|
|
31
|
+
const upperBound = Math.max(...yValues);
|
|
32
|
+
const margin = (upperBound - lowerBound) * 0.1;
|
|
33
|
+
return {
|
|
34
|
+
...item,
|
|
35
|
+
bounds: [lowerBound - margin, upperBound + margin]
|
|
36
|
+
};
|
|
37
|
+
});
|
|
38
|
+
const yAxisBounds = () => {
|
|
39
|
+
const yValues = data.map(item => yKeys.map(key => item[key]));
|
|
40
|
+
const min = Math.min(...yValues.flat());
|
|
41
|
+
const max = Math.max(...yValues.flat());
|
|
42
|
+
const margin = (max - min) * 0.1;
|
|
43
|
+
return [min - margin, max + margin];
|
|
44
|
+
};
|
|
45
|
+
const CustomTooltipContent = ({
|
|
46
|
+
active,
|
|
47
|
+
payload,
|
|
48
|
+
label
|
|
49
|
+
}) => {
|
|
50
|
+
if (active && payload && payload.length) {
|
|
51
|
+
const newPayload = payload.filter(item => item.name !== 'bounds');
|
|
52
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
53
|
+
className: "custom-tooltip"
|
|
54
|
+
}, /*#__PURE__*/React.createElement("p", {
|
|
55
|
+
className: "label"
|
|
56
|
+
}, `${xLabel}: ${label}`), newPayload.map(entry => /*#__PURE__*/React.createElement("p", {
|
|
57
|
+
className: "label",
|
|
58
|
+
key: `${entry.name}`,
|
|
59
|
+
style: {
|
|
60
|
+
color: entry.color
|
|
61
|
+
}
|
|
62
|
+
}, `${entry.name}: ${entry.value}`)));
|
|
63
|
+
}
|
|
64
|
+
return null;
|
|
65
|
+
};
|
|
66
|
+
const CustomLegend = ({
|
|
67
|
+
colorsArray,
|
|
68
|
+
yKeysArray
|
|
69
|
+
}) => /*#__PURE__*/React.createElement("div", {
|
|
70
|
+
className: "custom-legend"
|
|
71
|
+
}, yKeysArray.map((key, index) => /*#__PURE__*/React.createElement("div", {
|
|
72
|
+
key: key,
|
|
73
|
+
className: "item"
|
|
74
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
75
|
+
className: "line",
|
|
76
|
+
style: {
|
|
77
|
+
backgroundColor: colorsArray[index]
|
|
78
|
+
}
|
|
79
|
+
}), /*#__PURE__*/React.createElement("span", {
|
|
80
|
+
className: "text"
|
|
81
|
+
}, key))));
|
|
82
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
83
|
+
id: id,
|
|
84
|
+
className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
|
|
85
|
+
}, /*#__PURE__*/React.createElement("h3", null, title), /*#__PURE__*/React.createElement(CustomLegend, {
|
|
86
|
+
colorsArray: colors,
|
|
87
|
+
yKeysArray: yKeys
|
|
88
|
+
}), /*#__PURE__*/React.createElement(ResponsiveContainer, {
|
|
89
|
+
width: width,
|
|
90
|
+
height: height
|
|
91
|
+
}, /*#__PURE__*/React.createElement(RechartsAreaChart, {
|
|
92
|
+
data: processedData
|
|
93
|
+
}, /*#__PURE__*/React.createElement(CartesianGrid, {
|
|
94
|
+
strokeDasharray: "3 3"
|
|
95
|
+
}), /*#__PURE__*/React.createElement(XAxis, {
|
|
96
|
+
dataKey: xKey,
|
|
97
|
+
label: {
|
|
98
|
+
value: xLabel,
|
|
99
|
+
position: 'insideBottom',
|
|
100
|
+
offset: -5
|
|
101
|
+
} // Adjusted offset for padding
|
|
102
|
+
,
|
|
103
|
+
axisLine: false,
|
|
104
|
+
tickLine: false,
|
|
105
|
+
tickCount: 3
|
|
106
|
+
}), /*#__PURE__*/React.createElement(YAxis, {
|
|
107
|
+
domain: yAxisBounds,
|
|
108
|
+
label: {
|
|
109
|
+
value: yLabel,
|
|
110
|
+
angle: -90,
|
|
111
|
+
position: 'insideLeft',
|
|
112
|
+
offset: 15
|
|
113
|
+
},
|
|
114
|
+
axisLine: false,
|
|
115
|
+
tickLine: false,
|
|
116
|
+
tickFormatter: value => value.toFixed(2)
|
|
117
|
+
}), /*#__PURE__*/React.createElement(Tooltip, {
|
|
118
|
+
content: /*#__PURE__*/React.createElement(CustomTooltipContent, null)
|
|
119
|
+
}), filled && /*#__PURE__*/React.createElement(Area, {
|
|
120
|
+
id: "bounds",
|
|
121
|
+
type: "linear",
|
|
122
|
+
dataKey: "bounds",
|
|
123
|
+
stroke: "none",
|
|
124
|
+
fill: "var(--hard-ui-main-2)",
|
|
125
|
+
fillOpacity: 0.4,
|
|
126
|
+
activeDot: false,
|
|
127
|
+
dot: false,
|
|
128
|
+
label: false,
|
|
129
|
+
isAnimationActive: false
|
|
130
|
+
}), yKeys.map((key, index) => /*#__PURE__*/React.createElement(Area, {
|
|
131
|
+
id: key,
|
|
132
|
+
key: key,
|
|
133
|
+
type: "linear",
|
|
134
|
+
dataKey: key,
|
|
135
|
+
stroke: colors[index],
|
|
136
|
+
fill: "none",
|
|
137
|
+
connectNulls: true,
|
|
138
|
+
dot: false,
|
|
139
|
+
activeDot: {
|
|
140
|
+
r: 4
|
|
141
|
+
},
|
|
142
|
+
isAnimationActive: false
|
|
143
|
+
})))));
|
|
144
|
+
};
|
|
145
|
+
AreaChart.propTypes = {
|
|
146
|
+
// eslint-disable-next-line react/forbid-prop-types
|
|
147
|
+
data: PropTypes.arrayOf(PropTypes.object).isRequired,
|
|
148
|
+
title: PropTypes.string.isRequired,
|
|
149
|
+
xKey: PropTypes.string.isRequired,
|
|
150
|
+
yKeys: PropTypes.arrayOf(PropTypes.string).isRequired,
|
|
151
|
+
xLabel: PropTypes.string,
|
|
152
|
+
yLabel: PropTypes.string,
|
|
153
|
+
colors: PropTypes.arrayOf(PropTypes.string).isRequired,
|
|
154
|
+
filled: PropTypes.bool,
|
|
155
|
+
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
156
|
+
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
|
|
157
|
+
};
|
|
158
|
+
AreaChart.defaultProps = {
|
|
159
|
+
filled: false,
|
|
160
|
+
width: '100%',
|
|
161
|
+
height: 300
|
|
162
|
+
};
|
|
163
|
+
export default AreaChart;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as AreaChart } from "./AreaChart";
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
@use "@pareto-engineering/bem";
|
|
2
|
+
|
|
3
|
+
$default-margin: 1rem;
|
|
4
|
+
$default-padding: 1rem;
|
|
5
|
+
$default-box-shadow: 0 .25rem .75rem var(--ui-lines);
|
|
6
|
+
$default-text-font-size: calc(var(--s-1) * 1rem);
|
|
7
|
+
$default-border-radius: .25rem;
|
|
8
|
+
$default-legend-gap: .625rem;
|
|
9
|
+
$default-legend-padding: calc($default-padding * .125) calc($default-padding * .625);
|
|
10
|
+
$default-legend-line-width: 1.25rem;
|
|
11
|
+
$default-legend-line-height: .125rem;
|
|
12
|
+
$default-legend-line-margin-right: .3125rem;
|
|
13
|
+
$default-border-line-width: .0625rem;
|
|
14
|
+
|
|
15
|
+
.#{bem.$base} {
|
|
16
|
+
&.area-chart {
|
|
17
|
+
background-color: var(--background-far);
|
|
18
|
+
border-radius: var(--theme-default-border-radius);
|
|
19
|
+
box-shadow: $default-box-shadow;
|
|
20
|
+
margin: $default-margin 0;
|
|
21
|
+
padding: $default-padding;
|
|
22
|
+
|
|
23
|
+
h3 {
|
|
24
|
+
color: var(--subtitle);
|
|
25
|
+
margin: calc($default-margin / 5);
|
|
26
|
+
text-align: left;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.custom-legend {
|
|
30
|
+
display: flex;
|
|
31
|
+
gap: $default-legend-gap;
|
|
32
|
+
justify-content: flex-end;
|
|
33
|
+
padding-bottom: $default-padding;
|
|
34
|
+
padding-right: calc($default-padding * .25);
|
|
35
|
+
|
|
36
|
+
.item {
|
|
37
|
+
align-items: center;
|
|
38
|
+
border: $default-border-line-width solid var(--ui-lines);
|
|
39
|
+
border-radius: $default-border-radius;
|
|
40
|
+
display: flex;
|
|
41
|
+
padding: $default-legend-padding;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.line {
|
|
45
|
+
display: inline-block;
|
|
46
|
+
height: $default-legend-line-height;
|
|
47
|
+
margin-right: $default-legend-line-margin-right;
|
|
48
|
+
width: $default-legend-line-width;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.text {
|
|
52
|
+
color: var(--paragraph);
|
|
53
|
+
font-size: calc($default-text-font-size * .75);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.custom-tooltip {
|
|
58
|
+
background-color: var(--background-far);
|
|
59
|
+
border: $default-border-line-width solid var(--ui-lines);
|
|
60
|
+
border-radius: $default-border-radius;
|
|
61
|
+
padding: calc($default-padding * .25);
|
|
62
|
+
|
|
63
|
+
.label {
|
|
64
|
+
color: var(--hard-paragraph);
|
|
65
|
+
font-size: $default-text-font-size;
|
|
66
|
+
margin: calc($default-margin * .25);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/* stylelint-disable selector-max-compound-selectors -- nested elements */
|
|
71
|
+
.recharts-wrapper {
|
|
72
|
+
.recharts-surface {
|
|
73
|
+
.recharts-cartesian-grid line {
|
|
74
|
+
stroke: var(--ui-lines);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.recharts-text {
|
|
78
|
+
fill: var(--soft-paragraph);
|
|
79
|
+
font-size: calc($default-text-font-size * .75);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.recharts-text.recharts-label {
|
|
83
|
+
fill: var(--paragraph);
|
|
84
|
+
font-size: $default-text-font-size;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
}
|
|
@@ -4,7 +4,7 @@ import { useEffect, useRef } from 'react';
|
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
5
|
import { EditorState } from '@codemirror/state';
|
|
6
6
|
import { EditorView, keymap, lineNumbers, drawSelection, dropCursor, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, crosshairCursor, rectangularSelection } from '@codemirror/view';
|
|
7
|
-
import { defaultKeymap, indentWithTab } from '@codemirror/commands';
|
|
7
|
+
import { defaultKeymap, indentWithTab, history, historyKeymap } from '@codemirror/commands';
|
|
8
8
|
import { indentOnInput, bracketMatching, foldGutter } from '@codemirror/language';
|
|
9
9
|
import { xml } from '@codemirror/lang-xml';
|
|
10
10
|
import styleNames from '@pareto-engineering/bem/exports';
|
|
@@ -33,7 +33,7 @@ const XMLEditor = ({
|
|
|
33
33
|
useEffect(() => {
|
|
34
34
|
const startState = EditorState.create({
|
|
35
35
|
doc: config,
|
|
36
|
-
extensions: [keymap.of([defaultKeymap, indentWithTab]), indentOnInput(), lineNumbers(), bracketMatching(), foldGutter(), drawSelection(), highlightActiveLine(), highlightActiveLineGutter(), highlightSpecialChars(), dropCursor(), rectangularSelection(), crosshairCursor(), xml(), theme, EditorState.readOnly.of(readOnly), EditorView.updateListener.of(view => {
|
|
36
|
+
extensions: [keymap.of([defaultKeymap, indentWithTab, ...historyKeymap]), indentOnInput(), lineNumbers(), bracketMatching(), foldGutter(), drawSelection(), highlightActiveLine(), highlightActiveLineGutter(), highlightSpecialChars(), dropCursor(), rectangularSelection(), crosshairCursor(), xml(), history(), theme, EditorState.readOnly.of(readOnly), EditorView.updateListener.of(view => {
|
|
37
37
|
onChange(view);
|
|
38
38
|
// view.state.doc.toString() to receive the current content in the editor.
|
|
39
39
|
}), EditorView.focusChangeEffect.of((state, focused) => {
|
package/dist/es/a/index.js
CHANGED
|
@@ -27,4 +27,5 @@ export { Removable } from "./Removable";
|
|
|
27
27
|
export { ToggleSwitch } from "./ToggleSwitch";
|
|
28
28
|
export { XMLEditor } from "./XMLEditor";
|
|
29
29
|
export { DatePicker } from "./DatePicker";
|
|
30
|
-
export { Tooltip } from "./Tooltip";
|
|
30
|
+
export { Tooltip } from "./Tooltip";
|
|
31
|
+
export { AreaChart } from "./AreaChart";
|
|
@@ -90,6 +90,7 @@ const FileUpload = ({
|
|
|
90
90
|
});
|
|
91
91
|
};
|
|
92
92
|
const acceptOptions = Array.isArray(accept) ? accept?.join(',') : accept;
|
|
93
|
+
const isAnyFileUploading = Object.values(uploadStatus ?? {})?.map(e => e?.status)?.some(status => status === 'pending');
|
|
93
94
|
return /*#__PURE__*/React.createElement("div", {
|
|
94
95
|
id: id,
|
|
95
96
|
className: [baseClassName, componentClassName, userClassName, `preview-${filePreviewAlignment}`, `y-${color}`].filter(e => e).join(' '),
|
|
@@ -108,7 +109,7 @@ const FileUpload = ({
|
|
|
108
109
|
type: "file",
|
|
109
110
|
accept: acceptOptions,
|
|
110
111
|
multiple: multiple || maxCount && maxCount > 0,
|
|
111
|
-
disabled: disabled,
|
|
112
|
+
disabled: disabled || isAnyFileUploading,
|
|
112
113
|
onChange: handleChange
|
|
113
114
|
}), /*#__PURE__*/React.createElement("span", {
|
|
114
115
|
className: "ai-icon"
|
|
@@ -215,7 +216,8 @@ FileUpload.defaultProps = {
|
|
|
215
216
|
disabled: false,
|
|
216
217
|
color: 'paragraph',
|
|
217
218
|
filePreviewAlignment: 'bottom',
|
|
218
|
-
viewOnly: false
|
|
219
|
+
viewOnly: false,
|
|
220
|
+
multiple: true
|
|
219
221
|
};
|
|
220
222
|
FileUpload.Preview = Preview;
|
|
221
223
|
export default FileUpload;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pareto-engineering/design-system",
|
|
3
|
-
"version": "4.9.
|
|
3
|
+
"version": "4.9.3",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/es/index.js",
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
"@lexical/selection": "0.12.2",
|
|
60
60
|
"@lexical/table": "0.12.2",
|
|
61
61
|
"@lexical/utils": "0.12.2",
|
|
62
|
-
"@pareto-engineering/assets": "^4.9.
|
|
62
|
+
"@pareto-engineering/assets": "^4.9.3",
|
|
63
63
|
"@pareto-engineering/bem": "^4.8.1",
|
|
64
64
|
"@pareto-engineering/styles": "^4.2.0",
|
|
65
65
|
"@pareto-engineering/utils": "^4.0.0",
|
|
@@ -79,8 +79,9 @@
|
|
|
79
79
|
"react-helmet-async": "^1.3.0",
|
|
80
80
|
"react-relay": "^15.0.0",
|
|
81
81
|
"react-router-dom": "^5.3.4",
|
|
82
|
+
"recharts": "^2.13.3",
|
|
82
83
|
"relay-test-utils": "^15.0.0"
|
|
83
84
|
},
|
|
84
85
|
"browserslist": "> 2%",
|
|
85
|
-
"gitHead": "
|
|
86
|
+
"gitHead": "d69af6b2eea2c7f0897d665c3d13e3dda118e293"
|
|
86
87
|
}
|