Components / AI Dashboards

AI Latency Chart

A real-time latency monitoring chart showing AI API response times with min, max, and average indicators.

Live Preview — ai-latency-chart-01

API Latency

Average response time over last 24h

92ms

-8% from yesterday

Installation

Dependencies

Install the core libraries required for this component.

npm
npm install react

Source Code

ai-latency-chart-01.tsx 
"use client";

import React from "react";

const points = [42, 65, 45, 80, 55, 90, 72, 85, 60, 95, 88, 112, 98, 124];

export default function AILatencyChart() {
    const max = Math.max(...points);
    const min = Math.min(...points);

    return (
        <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-6 shadow-sm w-full max-w-lg mx-auto">
            <div className="flex items-center justify-between mb-8">
                <div>
                    <h3 className="text-sm font-bold text-zinc-900 dark:text-zinc-100">API Latency</h3>
                    <p className="text-xs text-zinc-500 mt-1">Average response time over last 24h</p>
                </div>
                <div className="text-right">
                    <p className="text-lg font-bold text-blue-500">92ms</p>
                    <p className="text-[10px] text-zinc-400 uppercase font-bold tracking-widest">-8% from yesterday</p>
                </div>
            </div>

            <div className="relative h-32 flex items-end gap-1 px-2">
                {/* Simple grid lines */}
                <div className="absolute inset-0 flex flex-col justify-between pointer-events-none opacity-20">
                    <div className="border-t border-zinc-500 w-full" />
                    <div className="border-t border-zinc-500 w-full" />
                    <div className="border-t border-zinc-500 w-full" />
                </div>

                {points.map((p, i) => (
                    <div key={i} className="flex-1 group relative flex flex-col items-center justify-end h-full">
                        <div
                            className="w-full bg-blue-500/20 group-hover:bg-blue-500/40 rounded-t-sm transition-all duration-300"
                            style={{ height: `${((p - min * 0.5) / (max - min * 0.5)) * 100}%` }}
                        />
                        {/* Tooltip on hover */}
                        <div className="absolute -top-6 hidden group-hover:block bg-zinc-900 text-white text-[10px] py-1 px-1.5 rounded font-bold whitespace-nowrap z-10">
                            {p}ms
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}

Functional Logic

Internal functions used to handle component logic.

Function Parameters
AILatencyChart() None

Variables

All variable declarations found in this component.

Name Kind Value
points const [42, 65, 45, 80, 55, 90, 72, 85, 60, 95, 88, 112, 98, 124]
max const Math.max(...points)
min const Math.min(...points)

JSX Tags Usage

Every JSX/HTML tag used in this component, with usage count and source.

Tag Count Type Source
<div> 12× Native Native HTML
<h3> 1× Native Native HTML
<p> 3× Native Native HTML

Related Components

  • AI Analytics Card — A dashboard analytics card showing AI model usage metrics with sparkline charts, percentage changes, and trend indicators.
  • AI Token Usage Meter — A circular progress meter showing AI token consumption with remaining quota and cost estimation.
  • AI Model Performance Table — A comparison table showing AI model performance benchmarks with sortable columns for speed, accuracy, and cost.
  • AI Request Log — A real-time scrolling log of AI API requests with status indicators, response times, and token counts.
  • AI Cost Breakdown Chart — A visual cost breakdown showing AI spending by model with horizontal bar charts and total cost summary.
  • AI Service Status Badge — An AI service status indicator showing operational health with animated pulse dots and uptime percentages.