Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-04 00:18:01 +01:00
Code Issues Projects Releases Wiki Activity

fix: dynamic highlight width (#9166)

Browse Source 
This makes the width of the highlight bars in the network dynamic and
based on the number of labels included in the chart.

Since the number of labels should always correspond to the number of
data points, this seems like a sensible approach.

With this, the label width will now be calculated on the fly, so even if
you resize the window or change the number of labels, the highlighting
will still work as expected.

Daily view:

![image](https://github.com/user-attachments/assets/e1d158db-0587-46b3-afb1-76dfc523505d)

Monthly aggregate:

![image](https://github.com/user-attachments/assets/8c74d2a3-afc8-4623-8ac7-0c263c7e6037)

The labels are now a little narrower on the daily graphs, but it avoids
them being super wide on the monthly graphs
This commit is contained in:
Thomas Heartman 2025-01-29 12:03:31 +01:00 committed by GitHub
parent 22f9363a05
commit 7ca8cc2276
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsage.tsx
View File

@ -298,7 +298,7 @@ const NewNetworkTrafficUsage: FC = () => {
</NewHeader> </NewHeader>
<Bar <Bar
data={data} data={data}
plugins={[customHighlightPlugin()]} // todo: accomodate wide bars when grouping by month plugins={[customHighlightPlugin()]}
options={options} options={options}
aria-label='An instance metrics line chart with two lines: requests per second for admin API and requests per second for client API' // todo: this isn't correct at all! aria-label='An instance metrics line chart with two lines: requests per second for admin API and requests per second for client API' // todo: this isn't correct at all!
/> />

10
frontend/src/component/common/Chart/customHighlightPlugin.ts
View File

@ -1,6 +1,6 @@
import type { Chart } from 'chart.js'; import type { Chart } from 'chart.js';
export const customHighlightPlugin = (width = 46, bottomOverflow = 34) => ({ export const customHighlightPlugin = (bottomOverflow = 34) => ({
id: 'customLine', id: 'customLine',
beforeDraw: (chart: Chart) => { beforeDraw: (chart: Chart) => {
if (chart.tooltip?.opacity && chart.tooltip.x) { if (chart.tooltip?.opacity && chart.tooltip.x) {
@ -17,10 +17,14 @@ export const customHighlightPlugin = (width = 46, bottomOverflow = 34) => ({
gradient.addColorStop(0, 'rgba(129, 122, 254, 0)'); gradient.addColorStop(0, 'rgba(129, 122, 254, 0)');
gradient.addColorStop(1, 'rgba(129, 122, 254, 0.12)'); gradient.addColorStop(1, 'rgba(129, 122, 254, 0.12)');
ctx.fillStyle = gradient; ctx.fillStyle = gradient;
const barWidth =
(chart.width / (chart.data.labels?.length ?? 1)) *
(chart.options.datasets?.bar?.categoryPercentage ?? 1);
ctx.roundRect( ctx.roundRect(
x - width / 2, x - barWidth / 2,
yAxis.top, yAxis.top,
width, barWidth,
yAxis.bottom - yAxis.top + bottomOverflow, yAxis.bottom - yAxis.top + bottomOverflow,
5, 5,
); );