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.

背景

src/App.vue

<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>

<script setup>
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>

import { CfLatencyHeatmap } from '@chufix-design/react';

export default function Demo() {
  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` : '');
  return (
    <>
      <CfLatencyHeatmap data={data} rowLabels={rowLabels} colLabels={colLabels} />
    </>
  );
}

import { CfLatencyHeatmap } from '@chufix-design/react';

export default function Demo() {
  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` : '');
  return (
    <>
      <CfLatencyHeatmap data={data} rowLabels={rowLabels} colLabels={colLabels} />
    </>
  );
}

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).

背景

src/App.vue

<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>

<script setup>
import { CfLatencyHeatmap } from '@chufix-design/vue';
function row(peakHour) {
  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>

import { CfLatencyHeatmap } from '@chufix-design/react';

export default function Demo() {
  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` : '');
  return (
    <>
      <CfLatencyHeatmap data={data} rowLabels={days} colLabels={hours} />
    </>
  );
}

import { CfLatencyHeatmap } from '@chufix-design/react';

export default function Demo() {
  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` : '');
  return (
    <>
      <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