url/checkcle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change response time chart color

Browse Source 
Update the response time chart to use yellow color for Regional Monitoring Data
This commit is contained in:
Tola Leng
2025-06-29 00:52:06 +07:00
parent c979dd24d8
commit b37a84734f
1 changed files with 18 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
application/src/components/services/ResponseTimeChart.tsx
+18 -41
View File
@@ -1,4 +1,3 @@
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, ReferenceLine, LineChart, Line } from "recharts"; import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, ReferenceLine, LineChart, Line } from "recharts";
import { UptimeData } from "@/types/service.types"; import { UptimeData } from "@/types/service.types";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -13,16 +12,16 @@ interface ResponseTimeChartProps {
export function ResponseTimeChart({ uptimeData }: ResponseTimeChartProps) { export function ResponseTimeChart({ uptimeData }: ResponseTimeChartProps) {
const { theme } = useTheme(); const { theme } = useTheme();
// Modern color palette for different chart lines (only for All Monitoring) // Modern color palette for different chart lines with solid colors at 90-100% opacity
const modernColors = [ const modernColors = [
{ stroke: '#3b82f6', fill: 'rgba(59, 130, 246, 0.1)' }, // Blue { stroke: '#f59e0b', fill: 'rgba(245, 158, 11, 0.95)' }, // Yellow (changed from blue)
{ stroke: '#10b981', fill: 'rgba(16, 185, 129, 0.1)' }, // Emerald { stroke: '#10b981', fill: 'rgba(16, 185, 129, 0.95)' }, // Emerald
{ stroke: '#f59e0b', fill: 'rgba(245, 158, 11, 0.1)' }, // Amber { stroke: '#3b82f6', fill: 'rgba(59, 130, 246, 0.95)' }, // Blue (moved to second position)
{ stroke: '#ef4444', fill: 'rgba(239, 68, 68, 0.1)' }, // Red { stroke: '#ef4444', fill: 'rgba(239, 68, 68, 0.95)' }, // Red
{ stroke: '#8b5cf6', fill: 'rgba(139, 92, 246, 0.1)' }, // Violet { stroke: '#8b5cf6', fill: 'rgba(139, 92, 246, 0.95)' }, // Violet
{ stroke: '#06b6d4', fill: 'rgba(6, 182, 212, 0.1)' }, // Cyan { stroke: '#06b6d4', fill: 'rgba(6, 182, 212, 0.95)' }, // Cyan
{ stroke: '#f97316', fill: 'rgba(249, 115, 22, 0.1)' }, // Orange { stroke: '#f97316', fill: 'rgba(249, 115, 22, 0.95)' }, // Orange
{ stroke: '#84cc16', fill: 'rgba(132, 204, 22, 0.1)' }, // Lime { stroke: '#84cc16', fill: 'rgba(132, 204, 22, 0.95)' }, // Lime
]; ];
// Check if we have data from multiple sources // Check if we have data from multiple sources
@@ -350,14 +349,6 @@ export function ResponseTimeChart({ uptimeData }: ResponseTimeChartProps) {
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
{hasMultipleSources ? ( {hasMultipleSources ? (
<AreaChart data={chartData} margin={{ top: 10, right: 30, left: 0, bottom: 30 }}> <AreaChart data={chartData} margin={{ top: 10, right: 30, left: 0, bottom: 30 }}>
<defs>
{sources.map(source => (
<linearGradient key={`gradient-${source.key}`} id={`gradient-${source.key}`} x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={source.stroke} stopOpacity={0.3}/>
<stop offset="95%" stopColor={source.stroke} stopOpacity={0.05}/>
</linearGradient>
))}
</defs>
<CartesianGrid strokeDasharray="3 3" stroke={theme === 'dark' ? '#333' : '#e5e7eb'} /> <CartesianGrid strokeDasharray="3 3" stroke={theme === 'dark' ? '#333' : '#e5e7eb'} />
<XAxis <XAxis
dataKey="time" dataKey="time"
@@ -376,27 +367,27 @@ export function ResponseTimeChart({ uptimeData }: ResponseTimeChartProps) {
/> />
<Tooltip content={<CustomTooltip />} /> <Tooltip content={<CustomTooltip />} />
{/* Default monitoring area with modern background - only if exists and no regional default */} {/* Default monitoring area with modern solid background */}
{sources.find(s => s.key === 'default') && ( {sources.find(s => s.key === 'default') && (
<Area <Area
type="monotone" type="monotone"
dataKey="defaultValue" dataKey="defaultValue"
stroke={sources.find(s => s.key === 'default')?.stroke} stroke={sources.find(s => s.key === 'default')?.stroke}
fill={`url(#gradient-default)`} fill={sources.find(s => s.key === 'default')?.fill}
strokeWidth={2.5} strokeWidth={2.5}
dot={false} dot={false}
connectNulls={false} connectNulls={false}
/> />
)} )}
{/* Regional monitoring areas with modern backgrounds */} {/* Regional monitoring areas with modern solid backgrounds */}
{sources.filter(s => s.key !== 'default').map((source) => ( {sources.filter(s => s.key !== 'default').map((source) => (
<Area <Area
key={source.key} key={source.key}
type="monotone" type="monotone"
dataKey={`${source.key}_value`} dataKey={`${source.key}_value`}
stroke={source.stroke} stroke={source.stroke}
fill={`url(#gradient-${source.key})`} fill={source.fill}
strokeWidth={2.5} strokeWidth={2.5}
dot={false} dot={false}
connectNulls={false} connectNulls={false}
@@ -404,22 +395,8 @@ export function ResponseTimeChart({ uptimeData }: ResponseTimeChartProps) {
))} ))}
</AreaChart> </AreaChart>
) : ( ) : (
// For single regional agent or default monitoring only - use original AreaChart styling // For single regional agent or default monitoring only - use solid background colors
<AreaChart data={chartData} margin={{ top: 10, right: 30, left: 0, bottom: 30 }}> <AreaChart data={chartData} margin={{ top: 10, right: 30, left: 0, bottom: 30 }}>
<defs>
<linearGradient id="colorUp" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#10b981" stopOpacity={0.3}/>
<stop offset="95%" stopColor="#10b981" stopOpacity={0.05}/>
</linearGradient>
<linearGradient id="colorDown" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#ef4444" stopOpacity={0.3}/>
<stop offset="95%" stopColor="#ef4444" stopOpacity={0.05}/>
</linearGradient>
<linearGradient id="colorWarning" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#f59e0b" stopOpacity={0.3}/>
<stop offset="95%" stopColor="#f59e0b" stopOpacity={0.05}/>
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="3 3" stroke={theme === 'dark' ? '#333' : '#e5e7eb'} /> <CartesianGrid strokeDasharray="3 3" stroke={theme === 'dark' ? '#333' : '#e5e7eb'} />
<XAxis <XAxis
dataKey="time" dataKey="time"
@@ -438,12 +415,12 @@ export function ResponseTimeChart({ uptimeData }: ResponseTimeChartProps) {
/> />
<Tooltip content={<CustomTooltip />} /> <Tooltip content={<CustomTooltip />} />
{/* Original area charts for different statuses with background colors */} {/* Modern solid background areas for different statuses */}
<Area <Area
type="monotone" type="monotone"
dataKey="upValue" dataKey="upValue"
stroke="#10b981" stroke="#10b981"
fill="url(#colorUp)" fill="rgba(16, 185, 129, 0.9)"
strokeWidth={2.5} strokeWidth={2.5}
dot={false} dot={false}
connectNulls={false} connectNulls={false}
@@ -453,7 +430,7 @@ export function ResponseTimeChart({ uptimeData }: ResponseTimeChartProps) {
type="monotone" type="monotone"
dataKey="downValue" dataKey="downValue"
stroke="#ef4444" stroke="#ef4444"
fill="url(#colorDown)" fill="rgba(239, 68, 68, 0.9)"
strokeWidth={2.5} strokeWidth={2.5}
dot={false} dot={false}
connectNulls={false} connectNulls={false}
@@ -463,7 +440,7 @@ export function ResponseTimeChart({ uptimeData }: ResponseTimeChartProps) {
type="monotone" type="monotone"
dataKey="warningValue" dataKey="warningValue"
stroke="#f59e0b" stroke="#f59e0b"
fill="url(#colorWarning)" fill="rgba(245, 158, 11, 0.9)"
strokeWidth={2.5} strokeWidth={2.5}
dot={false} dot={false}
connectNulls={false} connectNulls={false}