4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T1464,"use client"; import { EChartsAreaChart, type ChartConfig } from "@/registry/charts/echarts-area-chart"; import { cn } from "@/lib/utils"; import { useState } from "react"; const SERIES = [ { key: "p99", label: "P99", color: "#D41F12", latest: 204 }, { key: "p95", label: "P95", color: "#F37A00", latest: 98 }, { key: "p75", label: "P75", color: "#62C9D4", latest: 46 }, { key: "p50", label: "P50", color: "#007292", latest: 21 }, ] as const; const chartData = [ { time: "Today 13:06", p99: 188, p95: 92, p75: 44, p50: 20 }, { time: "Today 13:07", p99: 196, p95: 95, p75: 46, p50: 21 }, { time: "Today 13:08", p99: 181, p95: 89, p75: 43, p50: 20 }, { time: "Today 13:09", p99: 192, p95: 94, p75: 47, p50: 22 }, { time: "Today 13:10", p99: 205, p95: 99, p75: 45, p50: 21 }, { time: "Today 13:11", p99: 187, p95: 91, p75: 44, p50: 20 }, { time: "Today 13:12", p99: 179, p95: 88, p75: 42, p50: 19 }, { time: "Today 13:13", p99: 198, p95: 96, p75: 46, p50: 21 }, { time: "Today 13:14", p99: 210, p95: 101, p75: 48, p50: 22 }, { time: "Today 13:15", p99: 194, p95: 93, p75: 45, p50: 21 }, { time: "Today 13:16", p99: 202, p95: 97, p75: 47, p50: 22 }, { time: "Today 13:17", p99: 215, p95: 104, p75: 49, p50: 23 }, { time: "Today 13:18", p99: 231, p95: 112, p75: 52, p50: 23 }, { time: "Today 13:19", p99: 278, p95: 131, p75: 57, p50: 24 }, { time: "Today 13:20", p99: 306, p95: 142, p75: 61, p50: 25 }, { time: "Today 13:21", p99: 289, p95: 135, p75: 58, p50: 24 }, { time: "Today 13:22", p99: 247, p95: 118, p75: 53, p50: 23 }, { time: "Today 13:23", p99: 216, p95: 105, p75: 49, p50: 22 }, { time: "Today 13:24", p99: 201, p95: 97, p75: 46, p50: 21 }, { time: "Today 13:25", p99: 193, p95: 94, p75: 45, p50: 21 }, { time: "Today 13:26", p99: 186, p95: 90, p75: 44, p50: 20 }, { time: "Today 13:27", p99: 199, p95: 96, p75: 46, p50: 21 }, { time: "Today 13:28", p99: 207, p95: 100, p75: 47, p50: 22 }, { time: "Today 13:29", p99: 191, p95: 92, p75: 45, p50: 20 }, { time: "Today 13:30", p99: 184, p95: 89, p75: 43, p50: 20 }, { time: "Today 13:31", p99: 196, p95: 95, p75: 46, p50: 21 }, { time: "Today 13:32", p99: 209, p95: 101, p75: 48, p50: 22 }, { time: "Today 13:33", p99: 198, p95: 96, p75: 46, p50: 21 }, { time: "Today 13:34", p99: 204, p95: 98, p75: 46, p50: 21 }, ]; const chartConfig = { p99: { label: "P99", colors: { light: ["#f87171"], dark: ["#D41F12"] } }, p95: { label: "P95", colors: { light: ["#fbbf24"], dark: ["#F37A00"] } }, p75: { label: "P75", colors: { light: ["#60a5fa"], dark: ["#62C9D4"] } }, p50: { label: "P50", colors: { light: ["#93c5fd"], dark: ["#007292"] } }, } satisfies ChartConfig; export function EChartsLatencyAreaChart() { const [selected, setSelected] = useState(null); return (

{SERIES.map(({ key, label, color, latest }) => ( ))}

value.replace("Today ", "")} />

); } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","echarts",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/echarts","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"echarts"}]]}]}],["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":["@evilcharts/echarts-area-chart"]}]]}],["$","$L50",null,{"sourceUrl":"https://evilcharts.com/r/latency-echarts-area-chart.json","proxyUrl":"https://shadcnregistry.com/r/evilcharts/latency-echarts-area-chart","itemId":"@evilcharts/latency-echarts-area-chart"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"src/registry/blocks/echarts/b-latency-echarts-area-chart.tsx","content":"$52","type":"registry:block","target":"components/evilcharts/blocks/latency-echarts-area-chart.tsx"}]}]]}],"$L53"]}]

Latency Echarts Area Chart

Installation

Files

components

Styles