Preview Updated 2026-05-10

LatencyHeatmap

2D matrix heatmap with green→yellow→red OKLCH hue lerp.

Basic usage

Data is passed via props; pure SVG rendering with no third-party chart library. Colors come from the --viz-1..8 tokens and are color-blind friendly.

背景

<script setup lang="ts">
import { CfLatencyHeatmap } from '@chufix-design/vue';
function row() { return Array.from({ length: 24 }, () => 50 + Math.random() * 400); }
const data = [row(), row(), row(), row(), row(), row(), row()];
const rowLabels = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
const colLabels = Array.from({ length: 24 }, (_, i) => i % 4 === 0 ? `${i}h` : '');
</script>

<template>
  <CfLatencyHeatmap :data="data" :row-labels="rowLabels" :col-labels="colLabels" />
</template>

<CfLatencyHeatmap ... />

Week × 24 hours

Rows = Mon–Sun, columns = hours. Colors map to oklch(70% 0.16 H) where H lerps from 152 (green) → 78 (yellow) → 22 (red).

背景

<script setup lang="ts">
import { CfLatencyHeatmap } from '@chufix-design/vue';
function row(peakHour: number) {
  return Array.from({ length: 24 }, (_, h) => {
    const dist = Math.abs(h - peakHour);
    return 80 + (24 - dist) * 12 + Math.random() * 60;
  });
}
const data = [row(15), row(15), row(15), row(16), row(15), row(13), row(13)];
const rowLabels = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];
const colLabels = Array.from({ length: 24 }, (_, i) => i % 4 === 0 ? `${i}h` : '');
</script>

<template>
  <CfLatencyHeatmap :data="data" :row-labels="rowLabels" :col-labels="colLabels" :height="220" />
</template>

<CfLatencyHeatmap data={data} rowLabels={days} colLabels={hours} />

API

Prop	Type	Default	Description
`data`	`number[][]`	`—`	rows × cols numeric matrix
`rowLabels / colLabels`	`string[]`	`—`
`min / max`	`number`	`auto`	Color mapping range