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(day: number) {
  return Array.from({ length: 24 }, (_, hour) => 80 + ((day * 47 + hour * 31) % 320));
}
const data = Array.from({ length: 7 }, (_, day) => row(day));
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(day) {
  return Array.from({ length: 24 }, (_, hour) => 80 + ((day * 47 + hour * 31) % 320));
}
const data = Array.from({ length: 7 }, (_, day) => row(day));
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(day: number) {
    return Array.from({ length: 24 }, (_, hour) => 80 + ((day * 47 + hour * 31) % 320));
  }
  const data = Array.from({ length: 7 }, (_, day) => row(day));
  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(day) {
    return Array.from({ length: 24 }, (_, hour) => 80 + ((day * 47 + hour * 31) % 320));
  }
  const data = Array.from({ length: 7 }, (_, day) => row(day));
  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 + ((h * 17 + peakHour * 11) % 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 + ((h * 17 + peakHour * 11) % 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() {
  function row(peakHour: number) {
    return Array.from({ length: 24 }, (_, h) => {
      const dist = Math.abs(h - peakHour);
      return 80 + (24 - dist) * 12 + ((h * 17 + peakHour * 11) % 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` : '');
  return (
    <>
      <CfLatencyHeatmap data={data} rowLabels={rowLabels} colLabels={colLabels} height={220} />
    </>
  );
}

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

export default function Demo() {
  function row(peakHour) {
    return Array.from({ length: 24 }, (_, h) => {
      const dist = Math.abs(h - peakHour);
      return 80 + (24 - dist) * 12 + ((h * 17 + peakHour * 11) % 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` : '');
  return (
    <>
      <CfLatencyHeatmap data={data} rowLabels={rowLabels} colLabels={colLabels} height={220} />
    </>
  );
}

API

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