Fix: format X-axis timestamps to readable time format in Victory.js charts
This commit is contained in:
@@ -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, {
|
||||||
|
|||||||
Reference in New Issue
Block a user