@parca/profile 0.16.499 → 0.16.500
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/CHANGELOG.md +4 -0
- package/dist/MetricsGraph/UtilizationMetrics/{AreaChart.d.ts → Throughput.d.ts} +1 -1
- package/dist/MetricsGraph/UtilizationMetrics/Throughput.d.ts.map +1 -0
- package/dist/MetricsGraph/UtilizationMetrics/{AreaChart.js → Throughput.js} +40 -65
- package/dist/ProfileSelector/MetricsGraphSection.js +1 -1
- package/package.json +2 -2
- package/src/MetricsGraph/UtilizationMetrics/{AreaChart.tsx → Throughput.tsx} +27 -45
- package/src/ProfileSelector/MetricsGraphSection.tsx +1 -1
- package/dist/MetricsGraph/UtilizationMetrics/AreaChart.d.ts.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,10 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.16.500](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.499...@parca/profile@0.16.500) (2025-04-28)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @parca/profile
|
|
9
|
+
|
|
6
10
|
## [0.16.499](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.498...@parca/profile@0.16.499) (2025-04-24)
|
|
7
11
|
|
|
8
12
|
**Note:** Version bump only for package @parca/profile
|
|
@@ -21,4 +21,4 @@ type Props = CommonProps & {
|
|
|
21
21
|
};
|
|
22
22
|
declare const AreaChart: ({ transmitData, receiveData, addLabelMatcher, setTimeRange, utilizationMetricsLoading, name, humanReadableName, from, to, }: Props) => JSX.Element;
|
|
23
23
|
export default AreaChart;
|
|
24
|
-
//# sourceMappingURL=
|
|
24
|
+
//# sourceMappingURL=Throughput.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Throughput.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/UtilizationMetrics/Throughput.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,aAAa,EAAqD,MAAM,mBAAmB,CAAC;AAIpG,OAAO,EAAC,KAAK,kBAAkB,IAAI,YAAY,EAAC,MAAM,uBAAuB,CAAC;AAiB9E,UAAU,WAAW;IACnB,YAAY,EAAE,YAAY,EAAE,CAAC;IAC7B,WAAW,EAAE,YAAY,EAAE,CAAC;IAC5B,eAAe,EAAE,CACf,MAAM,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,GAAG,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,KACvE,IAAI,CAAC;IACV,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,IAAI,EAAE,MAAM,CAAC;IACb,iBAAiB,EAAE,MAAM,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ;AAQD,KAAK,KAAK,GAAG,WAAW,GAAG;IACzB,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC,CAAC;AAmeF,QAAA,MAAM,SAAS,gIAUZ,KAAK,KAAG,GAAG,CAAC,OAiCd,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -48,23 +48,7 @@ function transformToSeries(data, isReceive = false) {
|
|
|
48
48
|
values: series.values.sort((a, b) => a[0] - b[0]),
|
|
49
49
|
}));
|
|
50
50
|
}
|
|
51
|
-
const
|
|
52
|
-
switch (name) {
|
|
53
|
-
case 'gpu_utilization_percent':
|
|
54
|
-
return 'percent';
|
|
55
|
-
case 'gpu_memory_utilization_percent':
|
|
56
|
-
return 'percent';
|
|
57
|
-
case 'gpu_power_watt':
|
|
58
|
-
return 'watts';
|
|
59
|
-
case 'gpu_pcie_throughput_transmit_bytes':
|
|
60
|
-
return 'bytes_per_second';
|
|
61
|
-
case 'gpu_pcie_throughput_receive_bytes':
|
|
62
|
-
return 'bytes_per_second';
|
|
63
|
-
default:
|
|
64
|
-
return 'percent';
|
|
65
|
-
}
|
|
66
|
-
};
|
|
67
|
-
const RawAreaChart = ({ transmitData, receiveData, addLabelMatcher, setTimeRange, width, height, margin, name, humanReadableName, from, to, }) => {
|
|
51
|
+
const RawAreaChart = ({ transmitData, receiveData, addLabelMatcher, setTimeRange, width, height, margin, humanReadableName, from, to, }) => {
|
|
68
52
|
const { timezone } = useParcaContext();
|
|
69
53
|
const graph = useRef(null);
|
|
70
54
|
const [dragging, setDragging] = useState(false);
|
|
@@ -105,13 +89,12 @@ const RawAreaChart = ({ transmitData, receiveData, addLabelMatcher, setTimeRange
|
|
|
105
89
|
});
|
|
106
90
|
// Setup scales with padded time range
|
|
107
91
|
const xScale = d3.scaleUtc().domain([paddedFrom, paddedTo]).range([0, graphWidth]);
|
|
108
|
-
// Find the absolute maximum to ensure symmetric scale
|
|
109
|
-
const absMax = Math.max(Math.abs(minY ?? 0), Math.abs(maxY ?? 0));
|
|
110
92
|
const yScale = d3
|
|
111
93
|
.scaleLinear()
|
|
112
|
-
// Ensure domain is symmetric around 0
|
|
113
|
-
.domain([
|
|
114
|
-
.range([height - margin, 0])
|
|
94
|
+
// Ensure domain is symmetric around 0 for balanced visualization
|
|
95
|
+
.domain([minY ?? 0, maxY ?? 0])
|
|
96
|
+
.range([height - margin, 0])
|
|
97
|
+
.nice();
|
|
115
98
|
const throttledSetPos = throttle(setPos, 20);
|
|
116
99
|
const onMouseMove = (e) => {
|
|
117
100
|
if (isContextMenuOpen) {
|
|
@@ -137,21 +120,15 @@ const RawAreaChart = ({ transmitData, receiveData, addLabelMatcher, setTimeRange
|
|
|
137
120
|
event: e,
|
|
138
121
|
});
|
|
139
122
|
}, [show]);
|
|
123
|
+
const color = d3.scaleOrdinal(d3.schemeCategory10);
|
|
140
124
|
const getSeriesColor = (series) => {
|
|
141
|
-
return series.
|
|
125
|
+
return color(series.labelset);
|
|
142
126
|
};
|
|
143
|
-
// Create
|
|
144
|
-
const
|
|
145
|
-
.
|
|
146
|
-
.x(d => xScale(d[0]))
|
|
147
|
-
.y0(yScale(0)) // Start from zero line
|
|
148
|
-
.y1(d => yScale(d[1])); // Top of the area (data point)
|
|
149
|
-
// Create area generator for receive (below zero)
|
|
150
|
-
const receiveArea = d3
|
|
151
|
-
.area()
|
|
127
|
+
// Create line generator for both transmit and receive
|
|
128
|
+
const lineGenerator = d3
|
|
129
|
+
.line()
|
|
152
130
|
.x(d => xScale(d[0]))
|
|
153
|
-
.
|
|
154
|
-
.y1(d => yScale(d[1])); // Bottom of the area (negative data point)
|
|
131
|
+
.y(d => yScale(d[1]));
|
|
155
132
|
const highlighted = useMemo(() => {
|
|
156
133
|
if (series.length === 0) {
|
|
157
134
|
return null;
|
|
@@ -230,46 +207,44 @@ const RawAreaChart = ({ transmitData, receiveData, addLabelMatcher, setTimeRange
|
|
|
230
207
|
return (_jsxs(_Fragment, { children: [_jsx(MetricsContextMenu, { onAddLabelMatcher: addLabelMatcher, menuId: MENU_ID, highlighted: highlighted, trackVisibility: trackVisibility, utilizationMetrics: true }), highlighted != null && hovering && !dragging && pos[0] !== 0 && pos[1] !== 0 && (_jsx("div", { onMouseMove: onMouseMove, onMouseEnter: () => setHovering(true), onMouseLeave: () => setHovering(false), children: !isContextMenuOpen && (_jsx(MetricsTooltip, { x: pos[0] + margin, y: pos[1] + margin, highlighted: {
|
|
231
208
|
...highlighted,
|
|
232
209
|
valuePerSecond: Math.abs(highlighted.valuePerSecond),
|
|
233
|
-
}, contextElement: graph.current, sampleUnit:
|
|
210
|
+
}, contextElement: graph.current, sampleUnit: 'bytes_per_second', delta: false, utilizationMetrics: true, valuePrefix: highlighted.seriesIndex >= transmitData.length ? 'Receive ' : 'Transmit ' })) })), _jsx("div", { ref: graph, onMouseEnter: () => setHovering(true), onMouseLeave: () => setHovering(false), onContextMenu: displayMenu, children: _jsxs("svg", { width: `${width}px`, height: `${height + margin}px`, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onMouseMove: onMouseMove, children: [_jsx("g", { transform: `translate(${margin}, 0)`, children: dragging && (_jsx("g", { className: "zoom-time-rect", children: _jsx("rect", { className: "bar", x: pos[0] - relPos < 0 ? pos[0] : relPos, y: 0, height: height, width: Math.abs(pos[0] - relPos), fill: 'rgba(0, 0, 0, 0.125)' }) })) }), _jsxs("g", { transform: `translate(${margin * 1.5}, ${margin / 1.5})`, children: [_jsxs("g", { className: "y axis", textAnchor: "end", fontSize: "10", fill: "none", children: [yScale.ticks(6).map((d, i, allTicks) => {
|
|
234
211
|
let decimals = 2;
|
|
235
212
|
const intervalBetweenTicks = allTicks[1] - allTicks[0];
|
|
236
213
|
if (intervalBetweenTicks < 1) {
|
|
237
214
|
const precision = getPrecision(intervalBetweenTicks);
|
|
238
215
|
decimals = precision;
|
|
239
216
|
}
|
|
240
|
-
return (_jsxs(Fragment, { children: [_jsxs("g", { className: "tick", transform: `translate(0, ${yScale(d)})`, children: [_jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x2: -6 }), _jsxs("text", { fill: "currentColor", x: -9, dy: '0.32em', children: [d < 0 ? '-' : '', valueFormatter(Math.abs(d),
|
|
217
|
+
return (_jsxs(Fragment, { children: [_jsxs("g", { className: "tick", transform: `translate(0, ${yScale(d)})`, children: [_jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x2: -6 }), _jsxs("text", { fill: "currentColor", x: -9, dy: '0.32em', children: [d < 0 ? '-' : '', valueFormatter(Math.abs(d), 'bytes_per_second', decimals)] })] }, `tick-${i}`), _jsx("g", { children: _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(from), x2: xScale(to), y1: yScale(d), y2: yScale(d) }) }, `grid-${i}`)] }, `${i.toString()}-${d.toString()}`));
|
|
241
218
|
}), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: 0, x2: 0, y1: 0, y2: height - margin }), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(to), x2: xScale(to), y1: 0, y2: height - margin }), _jsx("g", { transform: `translate(${-margin}, ${(height - margin) / 2}) rotate(270)`, children: _jsx("text", { fill: "currentColor", dy: "-0.7em", className: "text-sm capitalize", textAnchor: "middle", children: humanReadableName }) })] }), _jsxs("g", { className: "x axis", fill: "none", fontSize: "10", textAnchor: "middle", transform: `translate(0,${height - margin})`, children: [xScale.ticks(5).map((d, i) => (_jsxs(Fragment, { children: [_jsxs("g", { className: "tick",
|
|
242
219
|
/* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
|
|
243
|
-
transform: `translate(${xScale(d)}, 0)`, children: [_jsx("line", { y2: 6, className: "stroke-gray-300 dark:stroke-gray-500" }), _jsx("text", { fill: "currentColor", dy: ".71em", y: 9, children: formatDate(d, formatForTimespan(from, to), timezone) })] }, `tick-${i}`), _jsx("g", { children: _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(d), x2: xScale(d), y1: 0, y2: -height + margin }) }, `grid-${i}`)] }, `${i.toString()}-${d.toString()}`))), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: 0, x2: graphWidth, y1: 0, y2: 0 }), _jsx("g", { transform: `translate(${(width - 2.5 * margin) / 2}, ${margin / 2})`, children: _jsx("text", { fill: "currentColor", dy: ".71em", y: 5, className: "text-sm", children: "Time" }) })] }),
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
220
|
+
transform: `translate(${xScale(d)}, 0)`, children: [_jsx("line", { y2: 6, className: "stroke-gray-300 dark:stroke-gray-500" }), _jsx("text", { fill: "currentColor", dy: ".71em", y: 9, children: formatDate(d, formatForTimespan(from, to), timezone) })] }, `tick-${i}`), _jsx("g", { children: _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(d), x2: xScale(d), y1: 0, y2: -height + margin }) }, `grid-${i}`)] }, `${i.toString()}-${d.toString()}`))), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: 0, x2: graphWidth, y1: 0, y2: 0 }), _jsx("g", { transform: `translate(${(width - 2.5 * margin) / 2}, ${margin / 2})`, children: _jsx("text", { fill: "currentColor", dy: ".71em", y: 5, className: "text-sm", children: "Time" }) })] }), _jsxs("g", { className: "areas", children: [_jsx("line", { x1: xScale(from), x2: xScale(to), y1: yScale(0), y2: yScale(0), stroke: "#64748b", strokeDasharray: "4 2", strokeWidth: 1, opacity: 0.7 }), series.map((s, i) => {
|
|
221
|
+
let isSelected = false;
|
|
222
|
+
if (parsedSelectedSeries != null && parsedSelectedSeries.length > 0) {
|
|
223
|
+
isSelected = parsedSelectedSeries.every(m => {
|
|
224
|
+
for (let i = 0; i < s.metric.length; i++) {
|
|
225
|
+
if (s.metric[i].name === m.key && s.metric[i].value === m.value) {
|
|
226
|
+
return true;
|
|
227
|
+
}
|
|
250
228
|
}
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
}
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
}
|
|
271
|
-
} }) }, i));
|
|
272
|
-
}) })] })] }) })] }));
|
|
229
|
+
return false;
|
|
230
|
+
});
|
|
231
|
+
}
|
|
232
|
+
const seriesColor = getSeriesColor(s);
|
|
233
|
+
const strokeOpacity = isSelected ? 1 : 0.8;
|
|
234
|
+
return (_jsx("g", { className: "line cursor-pointer", children: _jsx("path", { d: lineGenerator(s.values) ?? '', fill: "none", stroke: seriesColor, strokeWidth: isSelected
|
|
235
|
+
? lineStrokeSelected
|
|
236
|
+
: hovering && highlighted != null && i === highlighted.seriesIndex
|
|
237
|
+
? lineStrokeHover
|
|
238
|
+
: lineStroke, strokeOpacity: strokeOpacity, onClick: () => {
|
|
239
|
+
if (highlighted != null) {
|
|
240
|
+
setSelectedSeries(JSON.stringify(highlighted.labels.map(l => ({
|
|
241
|
+
key: l.name,
|
|
242
|
+
value: l.value,
|
|
243
|
+
}))));
|
|
244
|
+
setSelectedTimeframe(undefined);
|
|
245
|
+
}
|
|
246
|
+
} }) }, i));
|
|
247
|
+
})] })] })] }) })] }));
|
|
273
248
|
};
|
|
274
249
|
const AreaChart = ({ transmitData, receiveData, addLabelMatcher, setTimeRange, utilizationMetricsLoading, name, humanReadableName, from, to, }) => {
|
|
275
250
|
const { isDarkMode } = useParcaContext();
|
|
@@ -15,7 +15,7 @@ import cx from 'classnames';
|
|
|
15
15
|
import { Query } from '@parca/parser';
|
|
16
16
|
import { MergedProfileSelection } from '..';
|
|
17
17
|
import UtilizationMetricsGraph from '../MetricsGraph/UtilizationMetrics';
|
|
18
|
-
import AreaChart from '../MetricsGraph/UtilizationMetrics/
|
|
18
|
+
import AreaChart from '../MetricsGraph/UtilizationMetrics/Throughput';
|
|
19
19
|
import ProfileMetricsGraph, { ProfileMetricsEmptyState } from '../ProfileMetricsGraph';
|
|
20
20
|
export function MetricsGraphSection({ showMetricsGraph, setDisplayHideMetricsGraphButton, heightStyle, querySelection, profileSelection, comparing, sumBy, defaultSumByLoading, queryClient, queryExpressionString, setTimeRangeSelection, selectQuery, selectProfile, query, setNewQueryExpression, utilizationMetrics, utilizationMetricsLoading, }) {
|
|
21
21
|
const handleTimeRangeChange = (range) => {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@parca/profile",
|
|
3
|
-
"version": "0.16.
|
|
3
|
+
"version": "0.16.500",
|
|
4
4
|
"description": "Profile viewing libraries",
|
|
5
5
|
"dependencies": {
|
|
6
6
|
"@headlessui/react": "^1.7.19",
|
|
@@ -77,5 +77,5 @@
|
|
|
77
77
|
"access": "public",
|
|
78
78
|
"registry": "https://registry.npmjs.org/"
|
|
79
79
|
},
|
|
80
|
-
"gitHead": "
|
|
80
|
+
"gitHead": "4fe4798ae9359ce2ca83f9ff5c83ef9868b9ef45"
|
|
81
81
|
}
|
|
@@ -100,23 +100,6 @@ function transformToSeries(data: MetricSeries[], isReceive = false): NetworkSeri
|
|
|
100
100
|
}));
|
|
101
101
|
}
|
|
102
102
|
|
|
103
|
-
const getYAxisUnit = (name: string): string => {
|
|
104
|
-
switch (name) {
|
|
105
|
-
case 'gpu_utilization_percent':
|
|
106
|
-
return 'percent';
|
|
107
|
-
case 'gpu_memory_utilization_percent':
|
|
108
|
-
return 'percent';
|
|
109
|
-
case 'gpu_power_watt':
|
|
110
|
-
return 'watts';
|
|
111
|
-
case 'gpu_pcie_throughput_transmit_bytes':
|
|
112
|
-
return 'bytes_per_second';
|
|
113
|
-
case 'gpu_pcie_throughput_receive_bytes':
|
|
114
|
-
return 'bytes_per_second';
|
|
115
|
-
default:
|
|
116
|
-
return 'percent';
|
|
117
|
-
}
|
|
118
|
-
};
|
|
119
|
-
|
|
120
103
|
const RawAreaChart = ({
|
|
121
104
|
transmitData,
|
|
122
105
|
receiveData,
|
|
@@ -125,7 +108,6 @@ const RawAreaChart = ({
|
|
|
125
108
|
width,
|
|
126
109
|
height,
|
|
127
110
|
margin,
|
|
128
|
-
name,
|
|
129
111
|
humanReadableName,
|
|
130
112
|
from,
|
|
131
113
|
to,
|
|
@@ -181,14 +163,12 @@ const RawAreaChart = ({
|
|
|
181
163
|
// Setup scales with padded time range
|
|
182
164
|
const xScale = d3.scaleUtc().domain([paddedFrom, paddedTo]).range([0, graphWidth]);
|
|
183
165
|
|
|
184
|
-
// Find the absolute maximum to ensure symmetric scale
|
|
185
|
-
const absMax = Math.max(Math.abs(minY ?? 0), Math.abs(maxY ?? 0));
|
|
186
|
-
|
|
187
166
|
const yScale = d3
|
|
188
167
|
.scaleLinear()
|
|
189
|
-
// Ensure domain is symmetric around 0
|
|
190
|
-
.domain([
|
|
191
|
-
.range([height - margin, 0])
|
|
168
|
+
// Ensure domain is symmetric around 0 for balanced visualization
|
|
169
|
+
.domain([minY ?? 0, maxY ?? 0])
|
|
170
|
+
.range([height - margin, 0])
|
|
171
|
+
.nice();
|
|
192
172
|
|
|
193
173
|
const throttledSetPos = throttle(setPos, 20);
|
|
194
174
|
|
|
@@ -227,23 +207,17 @@ const RawAreaChart = ({
|
|
|
227
207
|
[show]
|
|
228
208
|
);
|
|
229
209
|
|
|
210
|
+
const color = d3.scaleOrdinal(d3.schemeCategory10);
|
|
211
|
+
|
|
230
212
|
const getSeriesColor = (series: NetworkSeries): string => {
|
|
231
|
-
return series.
|
|
213
|
+
return color(series.labelset);
|
|
232
214
|
};
|
|
233
215
|
|
|
234
|
-
// Create
|
|
235
|
-
const
|
|
236
|
-
.
|
|
216
|
+
// Create line generator for both transmit and receive
|
|
217
|
+
const lineGenerator = d3
|
|
218
|
+
.line<number[]>()
|
|
237
219
|
.x(d => xScale(d[0]))
|
|
238
|
-
.
|
|
239
|
-
.y1(d => yScale(d[1])); // Top of the area (data point)
|
|
240
|
-
|
|
241
|
-
// Create area generator for receive (below zero)
|
|
242
|
-
const receiveArea = d3
|
|
243
|
-
.area<number[]>()
|
|
244
|
-
.x(d => xScale(d[0]))
|
|
245
|
-
.y0(yScale(0)) // Start from zero line
|
|
246
|
-
.y1(d => yScale(d[1])); // Bottom of the area (negative data point)
|
|
220
|
+
.y(d => yScale(d[1]));
|
|
247
221
|
|
|
248
222
|
const highlighted = useMemo(() => {
|
|
249
223
|
if (series.length === 0) {
|
|
@@ -365,7 +339,7 @@ const RawAreaChart = ({
|
|
|
365
339
|
valuePerSecond: Math.abs(highlighted.valuePerSecond),
|
|
366
340
|
}}
|
|
367
341
|
contextElement={graph.current}
|
|
368
|
-
sampleUnit={
|
|
342
|
+
sampleUnit={'bytes_per_second'}
|
|
369
343
|
delta={false}
|
|
370
344
|
utilizationMetrics={true}
|
|
371
345
|
valuePrefix={
|
|
@@ -419,7 +393,7 @@ const RawAreaChart = ({
|
|
|
419
393
|
<line className="stroke-gray-300 dark:stroke-gray-500" x2={-6} />
|
|
420
394
|
<text fill="currentColor" x={-9} dy={'0.32em'}>
|
|
421
395
|
{d < 0 ? '-' : ''}
|
|
422
|
-
{valueFormatter(Math.abs(d),
|
|
396
|
+
{valueFormatter(Math.abs(d), 'bytes_per_second', decimals)}
|
|
423
397
|
</text>
|
|
424
398
|
</g>
|
|
425
399
|
<g key={`grid-${i}`}>
|
|
@@ -504,6 +478,17 @@ const RawAreaChart = ({
|
|
|
504
478
|
</g>
|
|
505
479
|
</g>
|
|
506
480
|
<g className="areas">
|
|
481
|
+
{/* Draw baseline at y=0 */}
|
|
482
|
+
<line
|
|
483
|
+
x1={xScale(from)}
|
|
484
|
+
x2={xScale(to)}
|
|
485
|
+
y1={yScale(0)}
|
|
486
|
+
y2={yScale(0)}
|
|
487
|
+
stroke="#64748b"
|
|
488
|
+
strokeDasharray="4 2"
|
|
489
|
+
strokeWidth={1}
|
|
490
|
+
opacity={0.7}
|
|
491
|
+
/>
|
|
507
492
|
{series.map((s, i) => {
|
|
508
493
|
let isSelected = false;
|
|
509
494
|
if (parsedSelectedSeries != null && parsedSelectedSeries.length > 0) {
|
|
@@ -518,16 +503,13 @@ const RawAreaChart = ({
|
|
|
518
503
|
}
|
|
519
504
|
|
|
520
505
|
const seriesColor = getSeriesColor(s);
|
|
521
|
-
const fillOpacity = isSelected ? 0.4 : 0.2;
|
|
522
506
|
const strokeOpacity = isSelected ? 1 : 0.8;
|
|
523
|
-
const areaGenerator = s.isReceive === true ? receiveArea : transmitArea;
|
|
524
507
|
|
|
525
508
|
return (
|
|
526
|
-
<g key={i} className="
|
|
509
|
+
<g key={i} className="line cursor-pointer">
|
|
527
510
|
<path
|
|
528
|
-
d={
|
|
529
|
-
fill=
|
|
530
|
-
fillOpacity={fillOpacity}
|
|
511
|
+
d={lineGenerator(s.values) ?? ''}
|
|
512
|
+
fill="none"
|
|
531
513
|
stroke={seriesColor}
|
|
532
514
|
strokeWidth={
|
|
533
515
|
isSelected
|
|
@@ -19,7 +19,7 @@ import {Query} from '@parca/parser';
|
|
|
19
19
|
|
|
20
20
|
import {MergedProfileSelection, ProfileSelection} from '..';
|
|
21
21
|
import UtilizationMetricsGraph from '../MetricsGraph/UtilizationMetrics';
|
|
22
|
-
import AreaChart from '../MetricsGraph/UtilizationMetrics/
|
|
22
|
+
import AreaChart from '../MetricsGraph/UtilizationMetrics/Throughput';
|
|
23
23
|
import ProfileMetricsGraph, {ProfileMetricsEmptyState} from '../ProfileMetricsGraph';
|
|
24
24
|
import {QuerySelection, type UtilizationMetrics as UtilizationMetricsType} from './index';
|
|
25
25
|
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AreaChart.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/UtilizationMetrics/AreaChart.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,aAAa,EAAqD,MAAM,mBAAmB,CAAC;AAIpG,OAAO,EAAC,KAAK,kBAAkB,IAAI,YAAY,EAAC,MAAM,uBAAuB,CAAC;AAiB9E,UAAU,WAAW;IACnB,YAAY,EAAE,YAAY,EAAE,CAAC;IAC7B,WAAW,EAAE,YAAY,EAAE,CAAC;IAC5B,eAAe,EAAE,CACf,MAAM,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,GAAG,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,KACvE,IAAI,CAAC;IACV,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,IAAI,EAAE,MAAM,CAAC;IACb,iBAAiB,EAAE,MAAM,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ;AAQD,KAAK,KAAK,GAAG,WAAW,GAAG;IACzB,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC,CAAC;AAqfF,QAAA,MAAM,SAAS,gIAUZ,KAAK,KAAG,GAAG,CAAC,OAiCd,CAAC;AAEF,eAAe,SAAS,CAAC"}
|