Fix: format X-axis timestamps to readable time format in Victory.js charts

This commit is contained in:
2025-10-03 09:29:34 -03:00
parent 37a6681cd6
commit 9ce6a0fb88

View File

@@ -2913,6 +2913,7 @@
width: containerWidth, width: containerWidth,
height: containerHeight, height: containerHeight,
theme: Victory.VictoryTheme.material, theme: Victory.VictoryTheme.material,
scale: { x: 'time' },
style: { style: {
parent: { parent: {
background: '#1E1E1E', background: '#1E1E1E',
@@ -2933,10 +2934,18 @@
}), }),
React.createElement(Victory.VictoryAxis, { React.createElement(Victory.VictoryAxis, {
key: 'x-axis', key: 'x-axis',
scale: 'time',
style: { style: {
axis: { stroke: '#404040' }, axis: { stroke: '#404040' },
tickLabels: { fill: '#FFFFFF', fontSize: 12 }, tickLabels: { fill: '#FFFFFF', fontSize: 12 },
grid: { stroke: '#404040' } grid: { stroke: '#404040' }
},
tickFormat: (t) => {
const date = new Date(t);
return date.toLocaleTimeString('pt-BR', {
hour: '2-digit',
minute: '2-digit'
});
} }
}), }),
React.createElement(Victory.VictoryLine, { React.createElement(Victory.VictoryLine, {
@@ -2987,6 +2996,7 @@
width: containerWidth, width: containerWidth,
height: containerHeight, height: containerHeight,
theme: Victory.VictoryTheme.material, theme: Victory.VictoryTheme.material,
scale: { x: 'time' },
style: { style: {
parent: { parent: {
background: '#1E1E1E', background: '#1E1E1E',
@@ -3007,10 +3017,18 @@
}), }),
React.createElement(Victory.VictoryAxis, { React.createElement(Victory.VictoryAxis, {
key: 'x-axis', key: 'x-axis',
scale: 'time',
style: { style: {
axis: { stroke: '#404040' }, axis: { stroke: '#404040' },
tickLabels: { fill: '#FFFFFF', fontSize: 12 }, tickLabels: { fill: '#FFFFFF', fontSize: 12 },
grid: { stroke: '#404040' } grid: { stroke: '#404040' }
},
tickFormat: (t) => {
const date = new Date(t);
return date.toLocaleTimeString('pt-BR', {
hour: '2-digit',
minute: '2-digit'
});
} }
}), }),
React.createElement(Victory.VictoryLine, { React.createElement(Victory.VictoryLine, {