graham/towerops
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make traffic graph scale symmetric to keep zero line in middle

Browse source
This commit is contained in:
Graham McIntire 2026-01-05 13:43:09 -06:00
parent abe4cb6845
commit 527e28736a
No known key found for this signature in database
1 changed files with 76 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

109
assets/js/app.js
View file

@ -100,46 +100,89 @@ const SensorChart = {
}
}
// Y-axis configuration
const yAxisConfig = autoScale ? {
beginAtZero: showZeroLine,
ticks: {
callback: function(value) {
if (unit === 'bps') {
return formatBps(value)
// For traffic graphs, calculate symmetric scale to keep zero in the middle
let yAxisConfig = {}
if (autoScale) {
if (showZeroLine && unit === 'bps') {
// Find max absolute value to make symmetric scale
let maxAbsValue = 0
datasets.forEach(dataset => {
dataset.data.forEach(point => {
maxAbsValue = Math.max(maxAbsValue, Math.abs(point.y))
})
})
// Add 10% padding
maxAbsValue = maxAbsValue * 1.1
yAxisConfig = {
min: -maxAbsValue,
max: maxAbsValue,
ticks: {
callback: function(value) {
return formatBps(value)
}
},
grid: {
color: function(context) {
// Make the zero line more prominent
if (context.tick.value === 0) {
return 'rgba(0, 0, 0, 0.3)'
}
return 'rgba(0, 0, 0, 0.05)'
},
lineWidth: function(context) {
// Make the zero line thicker
if (context.tick.value === 0) {
return 2
}
return 1
}
}
return value + unit
}
},
grid: {
color: function(context) {
// Make the zero line more prominent
if (showZeroLine && context.tick.value === 0) {
return 'rgba(0, 0, 0, 0.3)'
} else {
yAxisConfig = {
beginAtZero: showZeroLine,
ticks: {
callback: function(value) {
if (unit === 'bps') {
return formatBps(value)
}
return value + unit
}
},
grid: {
color: function(context) {
// Make the zero line more prominent
if (showZeroLine && context.tick.value === 0) {
return 'rgba(0, 0, 0, 0.3)'
}
return 'rgba(0, 0, 0, 0.05)'
},
lineWidth: function(context) {
// Make the zero line thicker
if (showZeroLine && context.tick.value === 0) {
return 2
}
return 1
}
}
return 'rgba(0, 0, 0, 0.05)'
},
lineWidth: function(context) {
// Make the zero line thicker
if (showZeroLine && context.tick.value === 0) {
return 2
}
return 1
}
}
} : {
min: 0,
max: 100,
ticks: {
callback: function(value) {
if (unit === 'bps') {
return formatBps(value)
} else {
yAxisConfig = {
min: 0,
max: 100,
ticks: {
callback: function(value) {
if (unit === 'bps') {
return formatBps(value)
}
return value + unit
}
return value + unit
},
grid: {
color: 'rgba(0, 0, 0, 0.05)'
}
},
grid: {
color: 'rgba(0, 0, 0, 0.05)'
}
}