@perses-dev/components 0.0.0-snapshot-time-range-height-80d08fc → 0.0.0-snapshot-test-theming-76fd1cc
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/GaugeChart/GaugeChart.d.ts +11 -2
- package/dist/GaugeChart/GaugeChart.d.ts.map +1 -1
- package/dist/GaugeChart/GaugeChart.js +58 -10
- package/dist/GaugeChart/GaugeChart.js.map +1 -1
- package/dist/InfoTooltip/InfoTooltip.d.ts +3 -1
- package/dist/InfoTooltip/InfoTooltip.d.ts.map +1 -1
- package/dist/InfoTooltip/InfoTooltip.js +4 -2
- package/dist/InfoTooltip/InfoTooltip.js.map +1 -1
- package/dist/LegendOptionsEditor/LegendOptionsEditor.d.ts +8 -0
- package/dist/LegendOptionsEditor/LegendOptionsEditor.d.ts.map +1 -0
- package/dist/LegendOptionsEditor/LegendOptionsEditor.js +82 -0
- package/dist/LegendOptionsEditor/LegendOptionsEditor.js.map +1 -0
- package/dist/LegendOptionsEditor/LegendOptionsEditor.test.d.ts +2 -0
- package/dist/LegendOptionsEditor/LegendOptionsEditor.test.d.ts.map +1 -0
- package/dist/LegendOptionsEditor/LegendOptionsEditor.test.js +41 -0
- package/dist/LegendOptionsEditor/LegendOptionsEditor.test.js.map +1 -0
- package/dist/LegendOptionsEditor/index.d.ts +2 -0
- package/dist/LegendOptionsEditor/index.d.ts.map +1 -0
- package/dist/LegendOptionsEditor/index.js +15 -0
- package/dist/LegendOptionsEditor/index.js.map +1 -0
- package/dist/LineChart/LineChart.d.ts +2 -3
- package/dist/LineChart/LineChart.d.ts.map +1 -1
- package/dist/LineChart/LineChart.js +35 -32
- package/dist/LineChart/LineChart.js.map +1 -1
- package/dist/StatChart/StatChart.test.js +9 -2
- package/dist/StatChart/StatChart.test.js.map +1 -1
- package/dist/Tooltip/TooltipContent.d.ts.map +1 -1
- package/dist/Tooltip/TooltipContent.js +1 -1
- package/dist/Tooltip/TooltipContent.js.map +1 -1
- package/dist/UnitSelector/UnitSelector.test.js +3 -4
- package/dist/UnitSelector/UnitSelector.test.js.map +1 -1
- package/dist/cjs/GaugeChart/GaugeChart.js +66 -15
- package/dist/cjs/InfoTooltip/InfoTooltip.js +4 -2
- package/dist/cjs/LegendOptionsEditor/LegendOptionsEditor.js +88 -0
- package/dist/cjs/LegendOptionsEditor/LegendOptionsEditor.test.js +48 -0
- package/dist/cjs/LegendOptionsEditor/index.js +28 -0
- package/dist/cjs/LineChart/LineChart.js +34 -31
- package/dist/cjs/StatChart/StatChart.test.js +9 -2
- package/dist/cjs/Tooltip/TooltipContent.js +1 -1
- package/dist/cjs/UnitSelector/UnitSelector.test.js +3 -4
- package/dist/cjs/index.js +1 -0
- package/dist/cjs/model/graph.js +14 -3
- package/dist/cjs/model/units/bytes.js +32 -6
- package/dist/cjs/model/units/time.js +1 -1
- package/dist/cjs/model/units/units.js +1 -4
- package/dist/cjs/model/units/units.test.js +153 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/model/graph.d.ts +4 -2
- package/dist/model/graph.d.ts.map +1 -1
- package/dist/model/graph.js +4 -0
- package/dist/model/graph.js.map +1 -1
- package/dist/model/units/bytes.d.ts +6 -1
- package/dist/model/units/bytes.d.ts.map +1 -1
- package/dist/model/units/bytes.js +35 -7
- package/dist/model/units/bytes.js.map +1 -1
- package/dist/model/units/time.js +1 -1
- package/dist/model/units/time.js.map +1 -1
- package/dist/model/units/units.d.ts.map +1 -1
- package/dist/model/units/units.js +1 -4
- package/dist/model/units/units.js.map +1 -1
- package/dist/model/units/units.test.d.ts +2 -0
- package/dist/model/units/units.test.d.ts.map +1 -0
- package/dist/model/units/units.test.js +151 -0
- package/dist/model/units/units.test.js.map +1 -0
- package/package.json +2 -2
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
// Copyright 2022 The Perses Authors
|
|
2
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
3
|
+
// you may not use this file except in compliance with the License.
|
|
4
|
+
// You may obtain a copy of the License at
|
|
5
|
+
//
|
|
6
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
7
|
+
//
|
|
8
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
9
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
10
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
11
|
+
// See the License for the specific language governing permissions and
|
|
12
|
+
// limitations under the License.
|
|
13
|
+
"use strict";
|
|
14
|
+
Object.defineProperty(exports, "__esModule", {
|
|
15
|
+
value: true
|
|
16
|
+
});
|
|
17
|
+
Object.defineProperty(exports, "LegendOptionsEditor", {
|
|
18
|
+
enumerable: true,
|
|
19
|
+
get: ()=>LegendOptionsEditor
|
|
20
|
+
});
|
|
21
|
+
const _jsxRuntime = require("react/jsx-runtime");
|
|
22
|
+
const _material = require("@mui/material");
|
|
23
|
+
const _model = require("../model");
|
|
24
|
+
const _optionsEditorLayout = require("../OptionsEditorLayout");
|
|
25
|
+
const LEGEND_POSITIONS = [
|
|
26
|
+
'bottom',
|
|
27
|
+
'right'
|
|
28
|
+
];
|
|
29
|
+
const LEGEND_POSITIONS_CONFIG = {
|
|
30
|
+
bottom: {
|
|
31
|
+
label: 'Bottom'
|
|
32
|
+
},
|
|
33
|
+
right: {
|
|
34
|
+
label: 'Right'
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
const POSITION_OPTIONS = Object.entries(LEGEND_POSITIONS_CONFIG).map(([id, config])=>{
|
|
38
|
+
return {
|
|
39
|
+
id: id,
|
|
40
|
+
...config
|
|
41
|
+
};
|
|
42
|
+
});
|
|
43
|
+
function LegendOptionsEditor({ value , onChange }) {
|
|
44
|
+
const handleLegendShowChange = (_, checked)=>{
|
|
45
|
+
// legend is hidden when legend obj is undefined
|
|
46
|
+
const legendValue = checked === true ? {
|
|
47
|
+
position: _model.DEFAULT_LEGEND.position
|
|
48
|
+
} : undefined;
|
|
49
|
+
onChange(legendValue);
|
|
50
|
+
};
|
|
51
|
+
const handleLegendPositionChange = (_, newValue)=>{
|
|
52
|
+
onChange({
|
|
53
|
+
...value,
|
|
54
|
+
position: newValue.id
|
|
55
|
+
});
|
|
56
|
+
};
|
|
57
|
+
var ref;
|
|
58
|
+
const legendConfig = LEGEND_POSITIONS_CONFIG[(ref = value === null || value === void 0 ? void 0 : value.position) !== null && ref !== void 0 ? ref : _model.DEFAULT_LEGEND.position];
|
|
59
|
+
var ref1;
|
|
60
|
+
return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
61
|
+
children: [
|
|
62
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
|
|
63
|
+
label: "Show",
|
|
64
|
+
control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
|
|
65
|
+
checked: value !== undefined,
|
|
66
|
+
onChange: handleLegendShowChange
|
|
67
|
+
})
|
|
68
|
+
}),
|
|
69
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
|
|
70
|
+
label: "Position",
|
|
71
|
+
control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Autocomplete, {
|
|
72
|
+
value: {
|
|
73
|
+
...legendConfig,
|
|
74
|
+
id: (ref1 = value === null || value === void 0 ? void 0 : value.position) !== null && ref1 !== void 0 ? ref1 : _model.DEFAULT_LEGEND.position
|
|
75
|
+
},
|
|
76
|
+
options: POSITION_OPTIONS,
|
|
77
|
+
isOptionEqualToValue: (option, value)=>option.id === value.id,
|
|
78
|
+
renderInput: (params)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
|
|
79
|
+
...params
|
|
80
|
+
}),
|
|
81
|
+
onChange: handleLegendPositionChange,
|
|
82
|
+
disabled: value === undefined,
|
|
83
|
+
disableClearable: true
|
|
84
|
+
})
|
|
85
|
+
})
|
|
86
|
+
]
|
|
87
|
+
});
|
|
88
|
+
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
// Copyright 2022 The Perses Authors
|
|
2
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
3
|
+
// you may not use this file except in compliance with the License.
|
|
4
|
+
// You may obtain a copy of the License at
|
|
5
|
+
//
|
|
6
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
7
|
+
//
|
|
8
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
9
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
10
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
11
|
+
// See the License for the specific language governing permissions and
|
|
12
|
+
// limitations under the License.
|
|
13
|
+
"use strict";
|
|
14
|
+
Object.defineProperty(exports, "__esModule", {
|
|
15
|
+
value: true
|
|
16
|
+
});
|
|
17
|
+
const _jsxRuntime = require("react/jsx-runtime");
|
|
18
|
+
const _react = require("@testing-library/react");
|
|
19
|
+
const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-library/user-event"));
|
|
20
|
+
const _legendOptionsEditor = require("./LegendOptionsEditor");
|
|
21
|
+
function _interopRequireDefault(obj) {
|
|
22
|
+
return obj && obj.__esModule ? obj : {
|
|
23
|
+
default: obj
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
describe('LegendOptionsEditor', ()=>{
|
|
27
|
+
const renderLegendOptionsEditor = (value, onChange = jest.fn())=>{
|
|
28
|
+
(0, _react.render)(/*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
|
|
29
|
+
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_legendOptionsEditor.LegendOptionsEditor, {
|
|
30
|
+
value: value,
|
|
31
|
+
onChange: onChange
|
|
32
|
+
})
|
|
33
|
+
}));
|
|
34
|
+
};
|
|
35
|
+
const getLegendShowSwitch = ()=>{
|
|
36
|
+
return _react.screen.getByRole('checkbox', {
|
|
37
|
+
name: 'Show'
|
|
38
|
+
});
|
|
39
|
+
};
|
|
40
|
+
it('can change legend visibility by clicking', ()=>{
|
|
41
|
+
const onChange = jest.fn();
|
|
42
|
+
renderLegendOptionsEditor(undefined, onChange);
|
|
43
|
+
_userEvent.default.click(getLegendShowSwitch());
|
|
44
|
+
expect(onChange).toHaveBeenCalledWith({
|
|
45
|
+
position: 'bottom'
|
|
46
|
+
});
|
|
47
|
+
});
|
|
48
|
+
});
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
// Copyright 2022 The Perses Authors
|
|
2
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
3
|
+
// you may not use this file except in compliance with the License.
|
|
4
|
+
// You may obtain a copy of the License at
|
|
5
|
+
//
|
|
6
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
7
|
+
//
|
|
8
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
9
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
10
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
11
|
+
// See the License for the specific language governing permissions and
|
|
12
|
+
// limitations under the License.
|
|
13
|
+
"use strict";
|
|
14
|
+
Object.defineProperty(exports, "__esModule", {
|
|
15
|
+
value: true
|
|
16
|
+
});
|
|
17
|
+
_exportStar(require("./LegendOptionsEditor"), exports);
|
|
18
|
+
function _exportStar(from, to) {
|
|
19
|
+
Object.keys(from).forEach(function(k) {
|
|
20
|
+
if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
|
|
21
|
+
enumerable: true,
|
|
22
|
+
get: function() {
|
|
23
|
+
return from[k];
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
});
|
|
27
|
+
return from;
|
|
28
|
+
}
|
|
@@ -26,10 +26,11 @@ const _charts = require("echarts/charts");
|
|
|
26
26
|
const _components = require("echarts/components");
|
|
27
27
|
const _renderers = require("echarts/renderers");
|
|
28
28
|
const _echart = require("../EChart");
|
|
29
|
+
const _graph = require("../model/graph");
|
|
29
30
|
const _chartsThemeProvider = require("../context/ChartsThemeProvider");
|
|
30
31
|
const _tooltip = require("../Tooltip/Tooltip");
|
|
31
|
-
const _utils = require("./utils");
|
|
32
32
|
const _timeZoneProvider = require("../context/TimeZoneProvider");
|
|
33
|
+
const _utils = require("./utils");
|
|
33
34
|
(0, _core.use)([
|
|
34
35
|
_charts.LineChart,
|
|
35
36
|
_components.GridComponent,
|
|
@@ -41,10 +42,9 @@ const _timeZoneProvider = require("../context/TimeZoneProvider");
|
|
|
41
42
|
_components.ToolboxComponent,
|
|
42
43
|
_components.TooltipComponent,
|
|
43
44
|
_components.LegendComponent,
|
|
44
|
-
_components.VisualMapComponent,
|
|
45
45
|
_renderers.CanvasRenderer
|
|
46
46
|
]);
|
|
47
|
-
function LineChart({ height , data , yAxis , unit , grid , legend ,
|
|
47
|
+
function LineChart({ height , data , yAxis , unit , grid , legend , onDataZoom , onDoubleClick }) {
|
|
48
48
|
const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
|
|
49
49
|
const chartRef = (0, _react.useRef)();
|
|
50
50
|
const [showTooltip, setShowTooltip] = (0, _react.useState)(true);
|
|
@@ -85,7 +85,6 @@ function LineChart({ height , data , yAxis , unit , grid , legend , visualMap ,
|
|
|
85
85
|
if (chartRef.current !== undefined) {
|
|
86
86
|
(0, _utils.enableDataZoom)(chartRef.current);
|
|
87
87
|
}
|
|
88
|
-
const handleOnClick = ()=>setPinTooltip((current)=>!current);
|
|
89
88
|
const handleOnDoubleClick = (e)=>{
|
|
90
89
|
setPinTooltip(false);
|
|
91
90
|
// either dispatch ECharts restore action to return to orig state or allow consumer to define behavior
|
|
@@ -97,25 +96,12 @@ function LineChart({ height , data , yAxis , unit , grid , legend , visualMap ,
|
|
|
97
96
|
onDoubleClick(e);
|
|
98
97
|
}
|
|
99
98
|
};
|
|
100
|
-
const
|
|
101
|
-
// hide tooltip when user drags to zoom, but allow clicking inside tooltip to copy labels
|
|
102
|
-
if (e.target instanceof HTMLCanvasElement) {
|
|
103
|
-
setShowTooltip(false);
|
|
104
|
-
}
|
|
105
|
-
};
|
|
106
|
-
const handleOnMouseUp = ()=>{
|
|
107
|
-
setShowTooltip(true);
|
|
108
|
-
};
|
|
109
|
-
const handleOnMouseEnter = ()=>{
|
|
110
|
-
setShowTooltip(true);
|
|
111
|
-
};
|
|
112
|
-
const handleOnMouseLeave = ()=>{
|
|
113
|
-
setShowTooltip(false);
|
|
114
|
-
setPinTooltip(false);
|
|
115
|
-
};
|
|
99
|
+
const { noDataOption } = chartsTheme;
|
|
116
100
|
const option = (0, _react.useMemo)(()=>{
|
|
117
101
|
if (data.timeSeries === undefined) return {};
|
|
118
|
-
if (data.timeSeries === null || data.timeSeries.length === 0) return
|
|
102
|
+
if (data.timeSeries === null || data.timeSeries.length === 0) return noDataOption;
|
|
103
|
+
// show symbols and axisPointer dashed line on hover
|
|
104
|
+
const isOptimizedMode = data.timeSeries.length > _graph.OPTIMIZED_MODE_SERIES_LIMIT;
|
|
119
105
|
var _rangeMs;
|
|
120
106
|
const rangeMs = (_rangeMs = data.rangeMs) !== null && _rangeMs !== void 0 ? _rangeMs : (0, _utils.getDateRange)(data.xAxis);
|
|
121
107
|
const option = {
|
|
@@ -133,11 +119,11 @@ function LineChart({ height , data , yAxis , unit , grid , legend , visualMap ,
|
|
|
133
119
|
yAxis: (0, _utils.getYAxes)(yAxis, unit),
|
|
134
120
|
animation: false,
|
|
135
121
|
tooltip: {
|
|
136
|
-
show:
|
|
122
|
+
show: !isOptimizedMode,
|
|
137
123
|
trigger: 'axis',
|
|
138
124
|
showContent: false,
|
|
139
125
|
axisPointer: {
|
|
140
|
-
type: 'line',
|
|
126
|
+
type: isOptimizedMode ? 'none' : 'line',
|
|
141
127
|
z: 0
|
|
142
128
|
}
|
|
143
129
|
},
|
|
@@ -150,28 +136,45 @@ function LineChart({ height , data , yAxis , unit , grid , legend , visualMap ,
|
|
|
150
136
|
}
|
|
151
137
|
},
|
|
152
138
|
grid,
|
|
153
|
-
legend
|
|
154
|
-
visualMap
|
|
139
|
+
legend
|
|
155
140
|
};
|
|
156
141
|
return option;
|
|
157
142
|
}, [
|
|
158
143
|
data,
|
|
159
144
|
yAxis,
|
|
145
|
+
unit,
|
|
160
146
|
grid,
|
|
161
147
|
legend,
|
|
162
|
-
|
|
148
|
+
noDataOption,
|
|
163
149
|
timeZone
|
|
164
150
|
]);
|
|
165
151
|
return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
|
|
166
152
|
sx: {
|
|
167
153
|
height
|
|
168
154
|
},
|
|
169
|
-
onClick:
|
|
155
|
+
onClick: ()=>{
|
|
156
|
+
setPinTooltip((current)=>!current);
|
|
157
|
+
},
|
|
158
|
+
onMouseDown: (e)=>{
|
|
159
|
+
// hide tooltip when user drags to zoom, but allow clicking inside tooltip to copy labels
|
|
160
|
+
if (e.target instanceof HTMLCanvasElement) {
|
|
161
|
+
setShowTooltip(false);
|
|
162
|
+
}
|
|
163
|
+
},
|
|
164
|
+
onMouseUp: ()=>{
|
|
165
|
+
setShowTooltip(true);
|
|
166
|
+
},
|
|
167
|
+
onMouseLeave: ()=>{
|
|
168
|
+
setShowTooltip(false);
|
|
169
|
+
setPinTooltip(false);
|
|
170
|
+
},
|
|
171
|
+
onMouseEnter: ()=>{
|
|
172
|
+
setShowTooltip(true);
|
|
173
|
+
if (chartRef.current !== undefined) {
|
|
174
|
+
(0, _utils.enableDataZoom)(chartRef.current);
|
|
175
|
+
}
|
|
176
|
+
},
|
|
170
177
|
onDoubleClick: handleOnDoubleClick,
|
|
171
|
-
onMouseDown: handleOnMouseDown,
|
|
172
|
-
onMouseUp: handleOnMouseUp,
|
|
173
|
-
onMouseLeave: handleOnMouseLeave,
|
|
174
|
-
onMouseEnter: handleOnMouseEnter,
|
|
175
178
|
children: [
|
|
176
179
|
showTooltip === true && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tooltip.Tooltip, {
|
|
177
180
|
chartRef: chartRef,
|
|
@@ -72,14 +72,21 @@ describe('StatChart', ()=>{
|
|
|
72
72
|
renderChart(unit);
|
|
73
73
|
expect(_react.screen.getByText('7.73')).toBeInTheDocument();
|
|
74
74
|
});
|
|
75
|
-
it('show value with
|
|
75
|
+
it('show value with bytes unit formatting', ()=>{
|
|
76
|
+
const unit = {
|
|
77
|
+
kind: 'Bytes'
|
|
78
|
+
};
|
|
79
|
+
renderChart(unit);
|
|
80
|
+
expect(_react.screen.getByText('7.73 bytes')).toBeInTheDocument();
|
|
81
|
+
});
|
|
82
|
+
it('show value with seconds time unit formatting', ()=>{
|
|
76
83
|
const unit = {
|
|
77
84
|
kind: 'Seconds'
|
|
78
85
|
};
|
|
79
86
|
renderChart(unit);
|
|
80
87
|
expect(_react.screen.getByText('7.73 seconds')).toBeInTheDocument();
|
|
81
88
|
});
|
|
82
|
-
it('show value with time unit formatting', ()=>{
|
|
89
|
+
it('show value with months time unit formatting', ()=>{
|
|
83
90
|
const unit = {
|
|
84
91
|
kind: 'Months'
|
|
85
92
|
};
|
|
@@ -21,8 +21,8 @@ Object.defineProperty(exports, "TooltipContent", {
|
|
|
21
21
|
const _jsxRuntime = require("react/jsx-runtime");
|
|
22
22
|
const _react = require("react");
|
|
23
23
|
const _material = require("@mui/material");
|
|
24
|
-
const _seriesInfo = require("./SeriesInfo");
|
|
25
24
|
const _timeZoneProvider = require("../context/TimeZoneProvider");
|
|
25
|
+
const _seriesInfo = require("./SeriesInfo");
|
|
26
26
|
function TooltipContent(props) {
|
|
27
27
|
const { focusedSeries , wrapLabels } = props;
|
|
28
28
|
const { formatWithUserTimeZone } = (0, _timeZoneProvider.useTimeZone)();
|
|
@@ -68,8 +68,7 @@ describe('UnitSelector', ()=>{
|
|
|
68
68
|
kind: 'Bytes'
|
|
69
69
|
}, onChange);
|
|
70
70
|
const unitSelector = getUnitSelector();
|
|
71
|
-
|
|
72
|
-
// abbreviate comes first and is disabled in some cases.
|
|
71
|
+
_userEvent.default.tab();
|
|
73
72
|
_userEvent.default.tab();
|
|
74
73
|
expect(unitSelector).toHaveFocus();
|
|
75
74
|
_userEvent.default.clear(unitSelector);
|
|
@@ -191,11 +190,11 @@ describe('UnitSelector', ()=>{
|
|
|
191
190
|
});
|
|
192
191
|
expect(getDecimalSelector()).toBeEnabled();
|
|
193
192
|
});
|
|
194
|
-
it('
|
|
193
|
+
it('allows the user to set abbreviate', ()=>{
|
|
195
194
|
renderUnitSelector({
|
|
196
195
|
kind: 'Bytes'
|
|
197
196
|
});
|
|
198
|
-
expect(getAbbreviateSwitch()).
|
|
197
|
+
expect(getAbbreviateSwitch()).toBeEnabled();
|
|
199
198
|
});
|
|
200
199
|
});
|
|
201
200
|
it('should not show an option for disabled units', ()=>{
|
package/dist/cjs/index.js
CHANGED
|
@@ -23,6 +23,7 @@ _exportStar(require("./GaugeChart"), exports);
|
|
|
23
23
|
_exportStar(require("./InfoTooltip"), exports);
|
|
24
24
|
_exportStar(require("./JSONEditor"), exports);
|
|
25
25
|
_exportStar(require("./Legend"), exports);
|
|
26
|
+
_exportStar(require("./LegendOptionsEditor"), exports);
|
|
26
27
|
_exportStar(require("./LineChart"), exports);
|
|
27
28
|
_exportStar(require("./OptionsEditorLayout"), exports);
|
|
28
29
|
_exportStar(require("./StatChart"), exports);
|
package/dist/cjs/model/graph.js
CHANGED
|
@@ -14,8 +14,19 @@
|
|
|
14
14
|
Object.defineProperty(exports, "__esModule", {
|
|
15
15
|
value: true
|
|
16
16
|
});
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
17
|
+
function _export(target, all) {
|
|
18
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: all[name]
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
_export(exports, {
|
|
24
|
+
OPTIMIZED_MODE_SERIES_LIMIT: ()=>OPTIMIZED_MODE_SERIES_LIMIT,
|
|
25
|
+
DEFAULT_LEGEND_POSITION: ()=>DEFAULT_LEGEND_POSITION,
|
|
26
|
+
DEFAULT_LEGEND: ()=>DEFAULT_LEGEND
|
|
20
27
|
});
|
|
21
28
|
const OPTIMIZED_MODE_SERIES_LIMIT = 1000;
|
|
29
|
+
const DEFAULT_LEGEND_POSITION = 'bottom';
|
|
30
|
+
const DEFAULT_LEGEND = {
|
|
31
|
+
position: DEFAULT_LEGEND_POSITION
|
|
32
|
+
};
|
|
@@ -25,12 +25,14 @@ _export(exports, {
|
|
|
25
25
|
BYTES_UNIT_CONFIG: ()=>BYTES_UNIT_CONFIG,
|
|
26
26
|
formatBytes: ()=>formatBytes
|
|
27
27
|
});
|
|
28
|
+
const _constants = require("./constants");
|
|
28
29
|
const bytesUnitKinds = [
|
|
29
30
|
'Bytes'
|
|
30
31
|
];
|
|
31
32
|
const BYTES_GROUP_CONFIG = {
|
|
32
33
|
label: 'Bytes',
|
|
33
|
-
decimal_places: true
|
|
34
|
+
decimal_places: true,
|
|
35
|
+
abbreviate: true
|
|
34
36
|
};
|
|
35
37
|
const BYTES_UNIT_CONFIG = {
|
|
36
38
|
Bytes: {
|
|
@@ -38,12 +40,35 @@ const BYTES_UNIT_CONFIG = {
|
|
|
38
40
|
label: 'Bytes'
|
|
39
41
|
}
|
|
40
42
|
};
|
|
41
|
-
function formatBytes(bytes,
|
|
42
|
-
if (bytes === 0) return '0
|
|
43
|
+
function formatBytes(bytes, unitOptions) {
|
|
44
|
+
if (bytes === 0) return '0 bytes';
|
|
45
|
+
// default to full 'Bytes' formatting
|
|
46
|
+
const options = unitOptions.abbreviate === undefined ? {
|
|
47
|
+
...unitOptions,
|
|
48
|
+
abbreviate: false
|
|
49
|
+
} : unitOptions;
|
|
50
|
+
var _decimal_places;
|
|
51
|
+
let decimals = (_decimal_places = options.decimal_places) !== null && _decimal_places !== void 0 ? _decimal_places : _constants.DEFAULT_DECIMAL_PLACES;
|
|
52
|
+
// avoids minimumFractionDigits value is out of range error, possible values are 0 to 20
|
|
53
|
+
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumfractiondigits
|
|
54
|
+
if (decimals < 0) {
|
|
55
|
+
decimals = 0;
|
|
56
|
+
} else if (decimals > 20) {
|
|
57
|
+
decimals = 20;
|
|
58
|
+
}
|
|
59
|
+
const formatParams = {
|
|
60
|
+
style: 'decimal',
|
|
61
|
+
minimumFractionDigits: decimals,
|
|
62
|
+
maximumFractionDigits: decimals,
|
|
63
|
+
useGrouping: true
|
|
64
|
+
};
|
|
65
|
+
const formatter = new Intl.NumberFormat('en-US', formatParams);
|
|
66
|
+
if (options.abbreviate === false) {
|
|
67
|
+
return `${formatter.format(bytes)} bytes`;
|
|
68
|
+
}
|
|
43
69
|
const k = 1024;
|
|
44
|
-
const dm = decimals < 0 ? 0 : decimals;
|
|
45
70
|
const sizes = [
|
|
46
|
-
'
|
|
71
|
+
'bytes',
|
|
47
72
|
'KB',
|
|
48
73
|
'MB',
|
|
49
74
|
'GB',
|
|
@@ -56,5 +81,6 @@ function formatBytes(bytes, decimals = 2) {
|
|
|
56
81
|
// Math.max(0, ...) ensures that we don't return -1 as a value for the index.
|
|
57
82
|
// Why? When the number of bytes are between -1 and 1, Math.floor(Math.log(bytes)/Math.log(1024)) returns -1.
|
|
58
83
|
const i = Math.max(0, Math.floor(Math.log(bytes) / Math.log(k)));
|
|
59
|
-
|
|
84
|
+
const abbreviatedValue = bytes / Math.pow(k, i);
|
|
85
|
+
return `${formatter.format(abbreviatedValue)} ${sizes[i]}`;
|
|
60
86
|
}
|
|
@@ -91,7 +91,7 @@ function formatTime(value, unitOptions) {
|
|
|
91
91
|
var _decimal_places;
|
|
92
92
|
const decimals = (_decimal_places = unitOptions.decimal_places) !== null && _decimal_places !== void 0 ? _decimal_places : _constants.DEFAULT_DECIMAL_PLACES;
|
|
93
93
|
const timeUnit = TimeIntlDuration[unitOptions.kind];
|
|
94
|
-
const formatter = new Intl.NumberFormat('en', {
|
|
94
|
+
const formatter = new Intl.NumberFormat('en-US', {
|
|
95
95
|
style: 'unit',
|
|
96
96
|
unit: timeUnit,
|
|
97
97
|
unitDisplay: 'long',
|
|
@@ -35,7 +35,6 @@ _export(exports, {
|
|
|
35
35
|
isUnitWithAbbreviate: ()=>isUnitWithAbbreviate
|
|
36
36
|
});
|
|
37
37
|
const _bytes = require("./bytes");
|
|
38
|
-
const _constants = require("./constants");
|
|
39
38
|
const _decimal = require("./decimal");
|
|
40
39
|
const _percent = require("./percent");
|
|
41
40
|
const _time = require("./time");
|
|
@@ -65,9 +64,7 @@ function formatValue(value, unitOptions) {
|
|
|
65
64
|
return (0, _percent.formatPercent)(value, unitOptions);
|
|
66
65
|
}
|
|
67
66
|
if (isBytesUnit(unitOptions)) {
|
|
68
|
-
|
|
69
|
-
const decimals = (_decimal_places = unitOptions.decimal_places) !== null && _decimal_places !== void 0 ? _decimal_places : _constants.DEFAULT_DECIMAL_PLACES;
|
|
70
|
-
return (0, _bytes.formatBytes)(value, decimals);
|
|
67
|
+
return (0, _bytes.formatBytes)(value, unitOptions);
|
|
71
68
|
}
|
|
72
69
|
const exhaustive = unitOptions;
|
|
73
70
|
throw new Error(`Unknown unit options ${exhaustive}`);
|
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
// Copyright 2022 The Perses Authors
|
|
2
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
3
|
+
// you may not use this file except in compliance with the License.
|
|
4
|
+
// You may obtain a copy of the License at
|
|
5
|
+
//
|
|
6
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
7
|
+
//
|
|
8
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
9
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
10
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
11
|
+
// See the License for the specific language governing permissions and
|
|
12
|
+
// limitations under the License.
|
|
13
|
+
"use strict";
|
|
14
|
+
Object.defineProperty(exports, "__esModule", {
|
|
15
|
+
value: true
|
|
16
|
+
});
|
|
17
|
+
const _units = require("./units");
|
|
18
|
+
describe('formatValue()', ()=>{
|
|
19
|
+
const tests = [
|
|
20
|
+
{
|
|
21
|
+
value: 100000,
|
|
22
|
+
unit: {
|
|
23
|
+
kind: 'Decimal'
|
|
24
|
+
},
|
|
25
|
+
expected: '100,000.00'
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
value: 155900,
|
|
29
|
+
unit: {
|
|
30
|
+
kind: 'Decimal',
|
|
31
|
+
decimal_places: 4
|
|
32
|
+
},
|
|
33
|
+
expected: '155,900.0000'
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
value: 10,
|
|
37
|
+
unit: {
|
|
38
|
+
kind: 'Percent'
|
|
39
|
+
},
|
|
40
|
+
expected: '10.00%'
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
value: 50,
|
|
44
|
+
unit: {
|
|
45
|
+
kind: 'Percent',
|
|
46
|
+
decimal_places: 0
|
|
47
|
+
},
|
|
48
|
+
expected: '50%'
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
value: 0.1,
|
|
52
|
+
unit: {
|
|
53
|
+
kind: 'PercentDecimal'
|
|
54
|
+
},
|
|
55
|
+
expected: '10.00%'
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
value: 100,
|
|
59
|
+
unit: {
|
|
60
|
+
kind: 'Bytes',
|
|
61
|
+
decimal_places: 0,
|
|
62
|
+
abbreviate: false
|
|
63
|
+
},
|
|
64
|
+
expected: '100 bytes'
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
value: 100,
|
|
68
|
+
unit: {
|
|
69
|
+
kind: 'Bytes',
|
|
70
|
+
decimal_places: -1,
|
|
71
|
+
abbreviate: false
|
|
72
|
+
},
|
|
73
|
+
expected: '100 bytes'
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
value: 225000,
|
|
77
|
+
unit: {
|
|
78
|
+
kind: 'Bytes',
|
|
79
|
+
decimal_places: 0,
|
|
80
|
+
abbreviate: true
|
|
81
|
+
},
|
|
82
|
+
expected: '220 KB'
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
value: 505200,
|
|
86
|
+
unit: {
|
|
87
|
+
kind: 'Bytes'
|
|
88
|
+
},
|
|
89
|
+
expected: '505,200.00 bytes'
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
value: 8000,
|
|
93
|
+
unit: {
|
|
94
|
+
kind: 'Milliseconds'
|
|
95
|
+
},
|
|
96
|
+
expected: '8,000.00 milliseconds'
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
value: 200900,
|
|
100
|
+
unit: {
|
|
101
|
+
kind: 'Seconds'
|
|
102
|
+
},
|
|
103
|
+
expected: '200,900.00 seconds'
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
value: 300,
|
|
107
|
+
unit: {
|
|
108
|
+
kind: 'Minutes'
|
|
109
|
+
},
|
|
110
|
+
expected: '300.00 minutes'
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
value: 300,
|
|
114
|
+
unit: {
|
|
115
|
+
kind: 'Hours'
|
|
116
|
+
},
|
|
117
|
+
expected: '300.00 hours'
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
value: 300,
|
|
121
|
+
unit: {
|
|
122
|
+
kind: 'Days'
|
|
123
|
+
},
|
|
124
|
+
expected: '300.00 days'
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
value: 300,
|
|
128
|
+
unit: {
|
|
129
|
+
kind: 'Weeks'
|
|
130
|
+
},
|
|
131
|
+
expected: '300.00 weeks'
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
value: 300,
|
|
135
|
+
unit: {
|
|
136
|
+
kind: 'Months'
|
|
137
|
+
},
|
|
138
|
+
expected: '300.00 months'
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
value: 300,
|
|
142
|
+
unit: {
|
|
143
|
+
kind: 'Years'
|
|
144
|
+
},
|
|
145
|
+
expected: '300.00 years'
|
|
146
|
+
}
|
|
147
|
+
];
|
|
148
|
+
tests.forEach(({ value , unit , expected })=>{
|
|
149
|
+
it(`formats ${value} as ${JSON.stringify(unit)}`, ()=>{
|
|
150
|
+
expect((0, _units.formatValue)(value, unit)).toEqual(expected);
|
|
151
|
+
});
|
|
152
|
+
});
|
|
153
|
+
});
|
package/dist/index.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ export * from './GaugeChart';
|
|
|
7
7
|
export * from './InfoTooltip';
|
|
8
8
|
export * from './JSONEditor';
|
|
9
9
|
export * from './Legend';
|
|
10
|
+
export * from './LegendOptionsEditor';
|
|
10
11
|
export * from './LineChart';
|
|
11
12
|
export * from './OptionsEditorLayout';
|
|
12
13
|
export * from './StatChart';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -19,6 +19,7 @@ export * from './GaugeChart';
|
|
|
19
19
|
export * from './InfoTooltip';
|
|
20
20
|
export * from './JSONEditor';
|
|
21
21
|
export * from './Legend';
|
|
22
|
+
export * from './LegendOptionsEditor';
|
|
22
23
|
export * from './LineChart';
|
|
23
24
|
export * from './OptionsEditorLayout';
|
|
24
25
|
export * from './StatChart';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './DateTimeRangePicker';\nexport * from './Drawer';\nexport * from './EChart';\nexport * from './ErrorAlert';\nexport * from './ErrorBoundary';\nexport * from './GaugeChart';\nexport * from './InfoTooltip';\nexport * from './JSONEditor';\nexport * from './Legend';\nexport * from './LineChart';\nexport * from './OptionsEditorLayout';\nexport * from './StatChart';\nexport * from './UnitSelector';\nexport * from './YAxisLabel';\nexport * from './context/ChartsThemeProvider';\nexport * from './context/TimeZoneProvider';\nexport * from './utils';\nexport * from './model';\nexport * from './test-utils';\nexport * from './theme';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './DateTimeRangePicker';\nexport * from './Drawer';\nexport * from './EChart';\nexport * from './ErrorAlert';\nexport * from './ErrorBoundary';\nexport * from './GaugeChart';\nexport * from './InfoTooltip';\nexport * from './JSONEditor';\nexport * from './Legend';\nexport * from './LegendOptionsEditor';\nexport * from './LineChart';\nexport * from './OptionsEditorLayout';\nexport * from './StatChart';\nexport * from './UnitSelector';\nexport * from './YAxisLabel';\nexport * from './context/ChartsThemeProvider';\nexport * from './context/TimeZoneProvider';\nexport * from './utils';\nexport * from './model';\nexport * from './test-utils';\nexport * from './theme';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}
|