79 lines
2.2 KiB
React
79 lines
2.2 KiB
React
import "./index.css";
|
|
import PropTypes from "prop-types";
|
|
import { BarChart, Bar, ResponsiveContainer, Cell } from "recharts";
|
|
|
|
const RANGE_MAX = 100;
|
|
const RANGE_MIN = 1;
|
|
|
|
const calculatePercentile = (arr, percentile) => {
|
|
const sorted = arr.slice().sort((a, b) => a.responseTime - b.responseTime);
|
|
const index = (percentile / 100) * (sorted.length - 1);
|
|
const lower = Math.floor(index);
|
|
const upper = lower + 1;
|
|
const weight = index % 1;
|
|
if (upper >= sorted.length) return sorted[lower].responseTime;
|
|
return (
|
|
sorted[lower].responseTime * (1 - weight) +
|
|
sorted[upper].responseTime * weight
|
|
);
|
|
};
|
|
|
|
const normalizeData = (checks) => {
|
|
if (checks.length > 1) {
|
|
// Get the 5th and 95th percentile
|
|
const min = calculatePercentile(checks, 5);
|
|
const max = calculatePercentile(checks, 95);
|
|
|
|
const normalizedChecks = checks.map((check) => {
|
|
// Normalize the response time between 1 and 100
|
|
let normalizedResponseTime =
|
|
RANGE_MIN +
|
|
((check.responseTime - min) * (RANGE_MAX - RANGE_MIN)) / (max - min);
|
|
|
|
// Put a floor on the response times so we don't have extreme outliers
|
|
// Better visuals
|
|
normalizedResponseTime = Math.max(
|
|
RANGE_MIN,
|
|
Math.min(RANGE_MAX, normalizedResponseTime)
|
|
);
|
|
return {
|
|
...check,
|
|
responseTime: normalizedResponseTime,
|
|
};
|
|
});
|
|
|
|
return normalizedChecks;
|
|
} else {
|
|
return checks;
|
|
}
|
|
};
|
|
|
|
const ResponseTimeChart = ({ checks = [] }) => {
|
|
const normalizedChecks = normalizeData(checks);
|
|
return (
|
|
<div className="chart-container">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart width={150} height={40} data={normalizedChecks}>
|
|
<Bar maxBarSize={10} dataKey="responseTime">
|
|
{normalizedChecks.map((check, index) => (
|
|
<Cell
|
|
key={`cell-${index}`}
|
|
fill={
|
|
check.status === true
|
|
? "var(--env-var-color-23)"
|
|
: "var(--env-var-color-24)"
|
|
}
|
|
/>
|
|
))}
|
|
</Bar>
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
ResponseTimeChart.propTypes = {
|
|
checks: PropTypes.array,
|
|
};
|
|
export default ResponseTimeChart;
|