Docs
Logs Bar Chart
Logs Bar Chart
A stacked bar chart that displays logs errors and successes.
Jan 17, 2025, 09:44amJan 17, 2025, 05:59pm
import { LogsBarChart } from 'ui-patterns/LogsBarChart'
export function LogsBarChartDemo() {
const data = Array.from({ length: 100 }, (_, i) => {
const date = new Date()
date.setMinutes(date.getMinutes() - i * 5) // Each point 5 minutes apart
return {
timestamp: date.toISOString(),
ok_count: Math.floor(Math.random() * 100), // Random value 0-99
error_count: Math.floor(Math.random() * 50), // Random value 0-50
}
}).reverse()
return (
<div className="w-full">
<LogsBarChart data={data} />
</div>
)
}Usage
This component is used to display the bar chart in logs pages.
It requires that the data prop is an array of objects with the following shape:
type LogsBarChartDatum = {
timestamp: string
ok_count: number
error_count: number
}