Chart

Mười một dạng chart định kiểu, với các role palette theo thứ tự, hình học responsive, inspect dùng chung và một bảng dữ liệu truy cập được. Ghép với Card và DataTrend cho các panel chỉ số.

npm: 0 trực tiếp, 6 tổng
registry: 4 trực tiếp, 7 tổng

Xem trước

Hoạt động hàng tuần

Dữ liệu minh họa gốc.

Hoạt động hàng tuần
Hoạt động hàng tuần	Lượt xem	Người đọc	Thành viên
Thứ Hai	280	180	90
Thứ Ba	340	220	110
Thứ Tư	310	200	120
Thứ Năm	420	270	150
Thứ Sáu	390	260	170
Thứ Bảy	480	310	190
Chủ Nhật	520	340	220

import { Chart } from "@/components/ui/chart"

import type { ChartSeries, ChartRow } from "@/components/ui/chart"
const sampleChartSeries: ChartSeries[] = [
  {
    "id": "visits",
    "label": "Lượt xem"
  },
  {
    "id": "readers",
    "label": "Người đọc"
  },
  {
    "id": "members",
    "label": "Thành viên"
  }
];
const sampleChartRows: ChartRow[] = [
  {
    "id": "mon",
    "label": "Thứ Hai",
    "x": 1791763200000,
    "values": {
      "visits": 280,
      "readers": 180,
      "members": 90
    }
  },
  {
    "id": "tue",
    "label": "Thứ Ba",
    "x": 1791849600000,
    "values": {
      "visits": 340,
      "readers": 220,
      "members": 110
    }
  },
  {
    "id": "wed",
    "label": "Thứ Tư",
    "x": 1791936000000,
    "values": {
      "visits": 310,
      "readers": 200,
      "members": 120
    }
  },
  {
    "id": "thu",
    "label": "Thứ Năm",
    "x": 1792022400000,
    "values": {
      "visits": 420,
      "readers": 270,
      "members": 150
    }
  },
  {
    "id": "fri",
    "label": "Thứ Sáu",
    "x": 1792108800000,
    "values": {
      "visits": 390,
      "readers": 260,
      "members": 170
    }
  },
  {
    "id": "sat",
    "label": "Thứ Bảy",
    "x": 1792195200000,
    "values": {
      "visits": 480,
      "readers": 310,
      "members": 190
    }
  },
  {
    "id": "sun",
    "label": "Chủ Nhật",
    "x": 1792281600000,
    "values": {
      "visits": 520,
      "readers": 340,
      "members": 220
    }
  }
];
<Chart type="line" label="Hoạt động hàng tuần" description="Dữ liệu minh họa gốc." className="w-full min-w-0" labels={{ viewData: "Xem dữ liệu", hideData: "Ẩn dữ liệu", loading: "Đang cập nhật dữ liệu", empty: "Không có dữ liệu", missing: "Thiếu giá trị", unobserved: "Chưa quan sát", invalid: "Dữ liệu chart không hợp lệ", noSeries: "Không có chuỗi nào hiện", zeroTotal: "Tổng bằng 0", value: "Giá trị", total: "Tổng", cohortSize: "Cỡ cohort", conversion: "Chuyển đổi", share: "Tỷ lệ", coverage: "Độ phủ", start: "Bắt đầu", end: "Kết thúc", status: "Trạng thái", point: "Điểm", less: "Ít hơn", more: "Nhiều hơn" }} data={sampleChartRows} series={sampleChartSeries} axes grid xScale="category" />

Cách dùng

Khi nào dùng

Hiện thay đổi, so sánh, composition, conversion, mức giữ chân hoặc khả dụng của dịch vụ từ data số.
Giữ một bảng dữ liệu truy cập được cạnh các pattern hình và inspect từng điểm.

Khi nào không dùng

Một giá trị hiện tại và mức thay đổi của nó. Dùng DataTrend.
Mức hoàn thành hướng tới một tổng đã biết. Dùng Progress.
Sửa từng số đo. Dùng Table với các control của form.

Biến thể

table

Toggle hiện khung dữ liệu có ngữ nghĩa. Hidden giữ bảng vẫn truy cập được, với phần trình bày ẩn khỏi mắt. Sparkline mặc định hidden.

Hoạt động hàng tuần

Dữ liệu minh họa gốc.

Hoạt động hàng tuần
Hoạt động hàng tuần	Lượt xem	Người đọc	Thành viên
Thứ Hai	280	180	90
Thứ Ba	340	220	110
Thứ Tư	310	200	120
Thứ Năm	420	270	150
Thứ Sáu	390	260	170
Thứ Bảy	480	310	190
Chủ Nhật	520	340	220

togglemặc định

Hoạt động hàng tuần

Dữ liệu minh họa gốc.

Hoạt động hàng tuần
Hoạt động hàng tuần	Lượt xem	Người đọc	Thành viên
Thứ Hai	280	180	90
Thứ Ba	340	220	110
Thứ Tư	310	200	120
Thứ Năm	420	270	150
Thứ Sáu	390	260	170
Thứ Bảy	480	310	190
Chủ Nhật	520	340	220

visible

Hoạt động hàng tuần

Dữ liệu minh họa gốc.

Hoạt động hàng tuần
Hoạt động hàng tuần	Lượt xem	Người đọc	Thành viên
Thứ Hai	280	180	90
Thứ Ba	340	220	110
Thứ Tư	310	200	120
Thứ Năm	420	270	150
Thứ Sáu	390	260	170
Thứ Bảy	480	310	190
Chủ Nhật	520	340	220

hidden

import { Chart } from "@/components/ui/chart"

import type { ChartSeries, ChartRow } from "@/components/ui/chart"
const sampleChartSeries: ChartSeries[] = [
  {
    "id": "visits",
    "label": "Lượt xem"
  },
  {
    "id": "readers",
    "label": "Người đọc"
  },
  {
    "id": "members",
    "label": "Thành viên"
  }
];
const sampleChartRows: ChartRow[] = [
  {
    "id": "mon",
    "label": "Thứ Hai",
    "x": 1791763200000,
    "values": {
      "visits": 280,
      "readers": 180,
      "members": 90
    }
  },
  {
    "id": "tue",
    "label": "Thứ Ba",
    "x": 1791849600000,
    "values": {
      "visits": 340,
      "readers": 220,
      "members": 110
    }
  },
  {
    "id": "wed",
    "label": "Thứ Tư",
    "x": 1791936000000,
    "values": {
      "visits": 310,
      "readers": 200,
      "members": 120
    }
  },
  {
    "id": "thu",
    "label": "Thứ Năm",
    "x": 1792022400000,
    "values": {
      "visits": 420,
      "readers": 270,
      "members": 150
    }
  },
  {
    "id": "fri",
    "label": "Thứ Sáu",
    "x": 1792108800000,
    "values": {
      "visits": 390,
      "readers": 260,
      "members": 170
    }
  },
  {
    "id": "sat",
    "label": "Thứ Bảy",
    "x": 1792195200000,
    "values": {
      "visits": 480,
      "readers": 310,
      "members": 190
    }
  },
  {
    "id": "sun",
    "label": "Chủ Nhật",
    "x": 1792281600000,
    "values": {
      "visits": 520,
      "readers": 340,
      "members": 220
    }
  }
];
<Chart type="line" label="Hoạt động hàng tuần" description="Dữ liệu minh họa gốc." className="w-full min-w-0" labels={{ viewData: "Xem dữ liệu", hideData: "Ẩn dữ liệu", loading: "Đang cập nhật dữ liệu", empty: "Không có dữ liệu", missing: "Thiếu giá trị", unobserved: "Chưa quan sát", invalid: "Dữ liệu chart không hợp lệ", noSeries: "Không có chuỗi nào hiện", zeroTotal: "Tổng bằng 0", value: "Giá trị", total: "Tổng", cohortSize: "Cỡ cohort", conversion: "Chuyển đổi", share: "Tỷ lệ", coverage: "Độ phủ", start: "Bắt đầu", end: "Kết thúc", status: "Trạng thái", point: "Điểm", less: "Ít hơn", more: "Nhiều hơn" }} data={sampleChartRows} series={sampleChartSeries} axes grid xScale="category" />
<Chart type="line" label="Hoạt động hàng tuần" description="Dữ liệu minh họa gốc." table="visible" className="w-full min-w-0" labels={{ viewData: "Xem dữ liệu", hideData: "Ẩn dữ liệu", loading: "Đang cập nhật dữ liệu", empty: "Không có dữ liệu", missing: "Thiếu giá trị", unobserved: "Chưa quan sát", invalid: "Dữ liệu chart không hợp lệ", noSeries: "Không có chuỗi nào hiện", zeroTotal: "Tổng bằng 0", value: "Giá trị", total: "Tổng", cohortSize: "Cỡ cohort", conversion: "Chuyển đổi", share: "Tỷ lệ", coverage: "Độ phủ", start: "Bắt đầu", end: "Kết thúc", status: "Trạng thái", point: "Điểm", less: "Ít hơn", more: "Nhiều hơn" }} data={sampleChartRows} series={sampleChartSeries} axes grid xScale="category" />
<Chart type="line" label="Hoạt động hàng tuần" description="Dữ liệu minh họa gốc." table="hidden" className="w-full min-w-0" labels={{ viewData: "Xem dữ liệu", hideData: "Ẩn dữ liệu", loading: "Đang cập nhật dữ liệu", empty: "Không có dữ liệu", missing: "Thiếu giá trị", unobserved: "Chưa quan sát", invalid: "Dữ liệu chart không hợp lệ", noSeries: "Không có chuỗi nào hiện", zeroTotal: "Tổng bằng 0", value: "Giá trị", total: "Tổng", cohortSize: "Cỡ cohort", conversion: "Chuyển đổi", share: "Tỷ lệ", coverage: "Độ phủ", start: "Bắt đầu", end: "Kết thúc", status: "Trạng thái", point: "Điểm", less: "Ít hơn", more: "Nhiều hơn" }} data={sampleChartRows} series={sampleChartSeries} axes grid xScale="category" />

xScale

Khoảng cách trục Cartesian. Các mode numeric và time cần giá trị x hữu hạn, tăng nghiêm ngặt; time dùng epoch millisecond. Không có formatX thì vị trí time hiện một ngày UTC ngắn.

Hoạt động hàng tuần

Dữ liệu minh họa gốc.

Hoạt động hàng tuần
Hoạt động hàng tuần	Lượt xem	Người đọc	Thành viên
Thứ Hai	280	180	90
Thứ Ba	340	220	110
Thứ Tư	310	200	120
Thứ Năm	420	270	150
Thứ Sáu	390	260	170
Thứ Bảy	480	310	190
Chủ Nhật	520	340	220

categorymặc định

Hoạt động hàng tuần

Dữ liệu minh họa gốc.

Hoạt động hàng tuần
Hoạt động hàng tuần	Điểm	Lượt xem	Người đọc	Thành viên
Thứ Hai	1	280	180	90
Thứ Ba	2	340	220	110
Thứ Tư	3	310	200	120
Thứ Năm	4	420	270	150
Thứ Sáu	5	390	260	170
Thứ Bảy	6	480	310	190
Chủ Nhật	7	520	340	220

linear

Hoạt động hàng tuần

Dữ liệu minh họa gốc.

Hoạt động hàng tuần
Hoạt động hàng tuần	Điểm	Lượt xem	Người đọc	Thành viên
Thứ Hai	Oct 12	280	180	90
Thứ Ba	Oct 13	340	220	110
Thứ Tư	Oct 14	310	200	120
Thứ Năm	Oct 15	420	270	150
Thứ Sáu	Oct 16	390	260	170
Thứ Bảy	Oct 17	480	310	190
Chủ Nhật	Oct 18	520	340	220

time

import { Chart } from "@/components/ui/chart"

import type { ChartSeries, ChartRow } from "@/components/ui/chart"
const sampleChartSeries: ChartSeries[] = [
  {
    "id": "visits",
    "label": "Lượt xem"
  },
  {
    "id": "readers",
    "label": "Người đọc"
  },
  {
    "id": "members",
    "label": "Thành viên"
  }
];
const sampleChartRows: ChartRow[] = [
  {
    "id": "mon",
    "label": "Thứ Hai",
    "x": 1791763200000,
    "values": {
      "visits": 280,
      "readers": 180,
      "members": 90
    }
  },
  {
    "id": "tue",
    "label": "Thứ Ba",
    "x": 1791849600000,
    "values": {
      "visits": 340,
      "readers": 220,
      "members": 110
    }
  },
  {
    "id": "wed",
    "label": "Thứ Tư",
    "x": 1791936000000,
    "values": {
      "visits": 310,
      "readers": 200,
      "members": 120
    }
  },
  {
    "id": "thu",
    "label": "Thứ Năm",
    "x": 1792022400000,
    "values": {
      "visits": 420,
      "readers": 270,
      "members": 150
    }
  },
  {
    "id": "fri",
    "label": "Thứ Sáu",
    "x": 1792108800000,
    "values": {
      "visits": 390,
      "readers": 260,
      "members": 170
    }
  },
  {
    "id": "sat",
    "label": "Thứ Bảy",
    "x": 1792195200000,
    "values": {
      "visits": 480,
      "readers": 310,
      "members": 190
    }
  },
  {
    "id": "sun",
    "label": "Chủ Nhật",
    "x": 1792281600000,
    "values": {
      "visits": 520,
      "readers": 340,
      "members": 220
    }
  }
];
const sampleLinearRows: ChartRow[] = [
  {
    "id": "mon",
    "label": "Thứ Hai",
    "x": 1,
    "values": {
      "visits": 280,
      "readers": 180,
      "members": 90
    }
  },
  {
    "id": "tue",
    "label": "Thứ Ba",
    "x": 2,
    "values": {
      "visits": 340,
      "readers": 220,
      "members": 110
    }
  },
  {
    "id": "wed",
    "label": "Thứ Tư",
    "x": 3,
    "values": {
      "visits": 310,
      "readers": 200,
      "members": 120
    }
  },
  {
    "id": "thu",
    "label": "Thứ Năm",
    "x": 4,
    "values": {
      "visits": 420,
      "readers": 270,
      "members": 150
    }
  },
  {
    "id": "fri",
    "label": "Thứ Sáu",
    "x": 5,
    "values": {
      "visits": 390,
      "readers": 260,
      "members": 170
    }
  },
  {
    "id": "sat",
    "label": "Thứ Bảy",
    "x": 6,
    "values": {
      "visits": 480,
      "readers": 310,
      "members": 190
    }
  },
  {
    "id": "sun",
    "label": "Chủ Nhật",
    "x": 7,
    "values": {
      "visits": 520,
      "readers": 340,
      "members": 220
    }
  }
];
<Chart type="line" label="Hoạt động hàng tuần" description="Dữ liệu minh họa gốc." className="w-full min-w-0" labels={{ viewData: "Xem dữ liệu", hideData: "Ẩn dữ liệu", loading: "Đang cập nhật dữ liệu", empty: "Không có dữ liệu", missing: "Thiếu giá trị", unobserved: "Chưa quan sát", invalid: "Dữ liệu chart không hợp lệ", noSeries: "Không có chuỗi nào hiện", zeroTotal: "Tổng bằng 0", value: "Giá trị", total: "Tổng", cohortSize: "Cỡ cohort", conversion: "Chuyển đổi", share: "Tỷ lệ", coverage: "Độ phủ", start: "Bắt đầu", end: "Kết thúc", status: "Trạng thái", point: "Điểm", less: "Ít hơn", more: "Nhiều hơn" }} data={sampleChartRows} series={sampleChartSeries} axes grid xScale="category" />
<Chart type="line" label="Hoạt động hàng tuần" description="Dữ liệu minh họa gốc." className="w-full min-w-0" labels={{ viewData: "Xem dữ liệu", hideData: "Ẩn dữ liệu", loading: "Đang cập nhật dữ liệu", empty: "Không có dữ liệu", missing: "Thiếu giá trị", unobserved: "Chưa quan sát", invalid: "Dữ liệu chart không hợp lệ", noSeries: "Không có chuỗi nào hiện", zeroTotal: "Tổng bằng 0", value: "Giá trị", total: "Tổng", cohortSize: "Cỡ cohort", conversion: "Chuyển đổi", share: "Tỷ lệ", coverage: "Độ phủ", start: "Bắt đầu", end: "Kết thúc", status: "Trạng thái", point: "Điểm", less: "Ít hơn", more: "Nhiều hơn" }} data={sampleLinearRows} series={sampleChartSeries} axes grid xScale="linear" />
<Chart type="line" label="Hoạt động hàng tuần" description="Dữ liệu minh họa gốc." className="w-full min-w-0" labels={{ viewData: "Xem dữ liệu", hideData: "Ẩn dữ liệu", loading: "Đang cập nhật dữ liệu", empty: "Không có dữ liệu", missing: "Thiếu giá trị", unobserved: "Chưa quan sát", invalid: "Dữ liệu chart không hợp lệ", noSeries: "Không có chuỗi nào hiện", zeroTotal: "Tổng bằng 0", value: "Giá trị", total: "Tổng", cohortSize: "Cỡ cohort", conversion: "Chuyển đổi", share: "Tỷ lệ", coverage: "Độ phủ", start: "Bắt đầu", end: "Kết thúc", status: "Trạng thái", point: "Điểm", less: "Ít hơn", more: "Nhiều hơn" }} data={sampleChartRows} series={sampleChartSeries} axes grid xScale="time" />

Ví dụ

Line ba series

Data minh họa gốc. Bản copy gồm toàn bộ thiết lập cục bộ.

Hoạt động hàng tuần

Hoạt động hàng tuần
Hoạt động hàng tuần	Lượt xem	Người đọc	Thành viên
Thứ Hai	280	180	90
Thứ Ba	340	220	110
Thứ Tư	310	200	120
Thứ Năm	420	270	150
Thứ Sáu	390	260	170
Thứ Bảy	480	310	190
Chủ Nhật	520	340	220

import { Chart } from "@/components/ui/chart"

import type { ChartSeries, ChartRow } from "@/components/ui/chart"
const sampleChartSeries: ChartSeries[] = [
  {
    "id": "visits",
    "label": "Lượt xem"
  },
  {
    "id": "readers",
    "label": "Người đọc"
  },
  {
    "id": "members",
    "label": "Thành viên"
  }
];
const sampleChartRows: ChartRow[] = [
  {
    "id": "mon",
    "label": "Thứ Hai",
    "x": 1791763200000,
    "values": {
      "visits": 280,
      "readers": 180,
      "members": 90
    }
  },
  {
    "id": "tue",
    "label": "Thứ Ba",
    "x": 1791849600000,
    "values": {
      "visits": 340,
      "readers": 220,
      "members": 110
    }
  },
  {
    "id": "wed",
    "label": "Thứ Tư",
    "x": 1791936000000,
    "values": {
      "visits": 310,
      "readers": 200,
      "members": 120
    }
  },
  {
    "id": "thu",
    "label": "Thứ Năm",
    "x": 1792022400000,
    "values": {
      "visits": 420,
      "readers": 270,
      "members": 150
    }
  },
  {
    "id": "fri",
    "label": "Thứ Sáu",
    "x": 1792108800000,
    "values": {
      "visits": 390,
      "readers": 260,
      "members": 170
    }
  },
  {
    "id": "sat",
    "label": "Thứ Bảy",
    "x": 1792195200000,
    "values": {
      "visits": 480,
      "readers": 310,
      "members": 190
    }
  },
  {
    "id": "sun",
    "label": "Chủ Nhật",
    "x": 1792281600000,
    "values": {
      "visits": 520,
      "readers": 340,
      "members": 220
    }
  }
];
<Chart type="line" label="Hoạt động hàng tuần" data={sampleChartRows} series={sampleChartSeries} />

Area phủ chồng

Data minh họa gốc. Bản copy gồm toàn bộ thiết lập cục bộ.

Đối tượng theo thời gian

Đối tượng theo thời gian
Đối tượng theo thời gian	Lượt xem	Người đọc	Thành viên
Thứ Hai	280	180	90
Thứ Ba	340	220	110
Thứ Tư	310	200	120
Thứ Năm	420	270	150
Thứ Sáu	390	260	170
Thứ Bảy	480	310	190
Chủ Nhật	520	340	220

import { Chart } from "@/components/ui/chart"

import type { ChartSeries, ChartRow } from "@/components/ui/chart"
const sampleChartSeries: ChartSeries[] = [
  {
    "id": "visits",
    "label": "Lượt xem"
  },
  {
    "id": "readers",
    "label": "Người đọc"
  },
  {
    "id": "members",
    "label": "Thành viên"
  }
];
const sampleChartRows: ChartRow[] = [
  {
    "id": "mon",
    "label": "Thứ Hai",
    "x": 1791763200000,
    "values": {
      "visits": 280,
      "readers": 180,
      "members": 90
    }
  },
  {
    "id": "tue",
    "label": "Thứ Ba",
    "x": 1791849600000,
    "values": {
      "visits": 340,
      "readers": 220,
      "members": 110
    }
  },
  {
    "id": "wed",
    "label": "Thứ Tư",
    "x": 1791936000000,
    "values": {
      "visits": 310,
      "readers": 200,
      "members": 120
    }
  },
  {
    "id": "thu",
    "label": "Thứ Năm",
    "x": 1792022400000,
    "values": {
      "visits": 420,
      "readers": 270,
      "members": 150
    }
  },
  {
    "id": "fri",
    "label": "Thứ Sáu",
    "x": 1792108800000,
    "values": {
      "visits": 390,
      "readers": 260,
      "members": 170
    }
  },
  {
    "id": "sat",
    "label": "Thứ Bảy",
    "x": 1792195200000,
    "values": {
      "visits": 480,
      "readers": 310,
      "members": 190
    }
  },
  {
    "id": "sun",
    "label": "Chủ Nhật",
    "x": 1792281600000,
    "values": {
      "visits": 520,
      "readers": 340,
      "members": 220
    }
  }
];
<Chart type="area" label="Đối tượng theo thời gian" data={sampleChartRows} series={sampleChartSeries} stack="none" />

Area xếp stack

Data minh họa gốc. Bản copy gồm toàn bộ thiết lập cục bộ.

Phân bổ theo thời gian

Phân bổ theo thời gian
Phân bổ theo thời gian	Lượt xem	Người đọc	Thành viên
Thứ Hai	280	180	90
Thứ Ba	340	220	110
Thứ Tư	310	200	120
Thứ Năm	420	270	150
Thứ Sáu	390	260	170
Thứ Bảy	480	310	190
Chủ Nhật	520	340	220

import { Chart } from "@/components/ui/chart"

import type { ChartSeries, ChartRow } from "@/components/ui/chart"
const sampleChartSeries: ChartSeries[] = [
  {
    "id": "visits",
    "label": "Lượt xem"
  },
  {
    "id": "readers",
    "label": "Người đọc"
  },
  {
    "id": "members",
    "label": "Thành viên"
  }
];
const sampleChartRows: ChartRow[] = [
  {
    "id": "mon",
    "label": "Thứ Hai",
    "x": 1791763200000,
    "values": {
      "visits": 280,
      "readers": 180,
      "members": 90
    }
  },
  {
    "id": "tue",
    "label": "Thứ Ba",
    "x": 1791849600000,
    "values": {
      "visits": 340,
      "readers": 220,
      "members": 110
    }
  },
  {
    "id": "wed",
    "label": "Thứ Tư",
    "x": 1791936000000,
    "values": {
      "visits": 310,
      "readers": 200,
      "members": 120
    }
  },
  {
    "id": "thu",
    "label": "Thứ Năm",
    "x": 1792022400000,
    "values": {
      "visits": 420,
      "readers": 270,
      "members": 150
    }
  },
  {
    "id": "fri",
    "label": "Thứ Sáu",
    "x": 1792108800000,
    "values": {
      "visits": 390,
      "readers": 260,
      "members": 170
    }
  },
  {
    "id": "sat",
    "label": "Thứ Bảy",
    "x": 1792195200000,
    "values": {
      "visits": 480,
      "readers": 310,
      "members": 190
    }
  },
  {
    "id": "sun",
    "label": "Chủ Nhật",
    "x": 1792281600000,
    "values": {
      "visits": 520,
      "readers": 340,
      "members": 220
    }
  }
];
<Chart type="area" label="Phân bổ theo thời gian" data={sampleChartRows} series={sampleChartSeries} stack="normal" />

Bar grouped chiều dọc

Data minh họa gốc. Bản copy gồm toàn bộ thiết lập cục bộ.

Hoạt động theo nhóm

Hoạt động theo nhóm
Hoạt động theo nhóm	Lượt xem	Người đọc	Thành viên
Thứ Hai	280	180	90
Thứ Ba	340	220	110
Thứ Tư	310	200	120
Thứ Năm	420	270	150
Thứ Sáu	390	260	170
Thứ Bảy	480	310	190
Chủ Nhật	520	340	220

import { Chart } from "@/components/ui/chart"

import type { ChartSeries, ChartRow } from "@/components/ui/chart"
const sampleChartSeries: ChartSeries[] = [
  {
    "id": "visits",
    "label": "Lượt xem"
  },
  {
    "id": "readers",
    "label": "Người đọc"
  },
  {
    "id": "members",
    "label": "Thành viên"
  }
];
const sampleChartRows: ChartRow[] = [
  {
    "id": "mon",
    "label": "Thứ Hai",
    "x": 1791763200000,
    "values": {
      "visits": 280,
      "readers": 180,
      "members": 90
    }
  },
  {
    "id": "tue",
    "label": "Thứ Ba",
    "x": 1791849600000,
    "values": {
      "visits": 340,
      "readers": 220,
      "members": 110
    }
  },
  {
    "id": "wed",
    "label": "Thứ Tư",
    "x": 1791936000000,
    "values": {
      "visits": 310,
      "readers": 200,
      "members": 120
    }
  },
  {
    "id": "thu",
    "label": "Thứ Năm",
    "x": 1792022400000,
    "values": {
      "visits": 420,
      "readers": 270,
      "members": 150
    }
  },
  {
    "id": "fri",
    "label": "Thứ Sáu",
    "x": 1792108800000,
    "values": {
      "visits": 390,
      "readers": 260,
      "members": 170
    }
  },
  {
    "id": "sat",
    "label": "Thứ Bảy",
    "x": 1792195200000,
    "values": {
      "visits": 480,
      "readers": 310,
      "members": 190
    }
  },
  {
    "id": "sun",
    "label": "Chủ Nhật",
    "x": 1792281600000,
    "values": {
      "visits": 520,
      "readers": 340,
      "members": 220
    }
  }
];
<Chart type="bar" label="Hoạt động theo nhóm" data={sampleChartRows} series={sampleChartSeries} orientation="vertical" layout="grouped" />

Bar stacked chiều dọc

Data minh họa gốc. Bản copy gồm toàn bộ thiết lập cục bộ.

Hoạt động xếp chồng

Hoạt động xếp chồng
Hoạt động xếp chồng	Lượt xem	Người đọc	Thành viên
Thứ Hai	280	180	90
Thứ Ba	340	220	110
Thứ Tư	310	200	120
Thứ Năm	420	270	150
Thứ Sáu	390	260	170
Thứ Bảy	480	310	190
Chủ Nhật	520	340	220

import { Chart } from "@/components/ui/chart"

import type { ChartSeries, ChartRow } from "@/components/ui/chart"
const sampleChartSeries: ChartSeries[] = [
  {
    "id": "visits",
    "label": "Lượt xem"
  },
  {
    "id": "readers",
    "label": "Người đọc"
  },
  {
    "id": "members",
    "label": "Thành viên"
  }
];
const sampleChartRows: ChartRow[] = [
  {
    "id": "mon",
    "label": "Thứ Hai",
    "x": 1791763200000,
    "values": {
      "visits": 280,
      "readers": 180,
      "members": 90
    }
  },
  {
    "id": "tue",
    "label": "Thứ Ba",
    "x": 1791849600000,
    "values": {
      "visits": 340,
      "readers": 220,
      "members": 110
    }
  },
  {
    "id": "wed",
    "label": "Thứ Tư",
    "x": 1791936000000,
    "values": {
      "visits": 310,
      "readers": 200,
      "members": 120
    }
  },
  {
    "id": "thu",
    "label": "Thứ Năm",
    "x": 1792022400000,
    "values": {
      "visits": 420,
      "readers": 270,
      "members": 150
    }
  },
  {
    "id": "fri",
    "label": "Thứ Sáu",
    "x": 1792108800000,
    "values": {
      "visits": 390,
      "readers": 260,
      "members": 170
    }
  },
  {
    "id": "sat",
    "label": "Thứ Bảy",
    "x": 1792195200000,
    "values": {
      "visits": 480,
      "readers": 310,
      "members": 190
    }
  },
  {
    "id": "sun",
    "label": "Chủ Nhật",
    "x": 1792281600000,
    "values": {
      "visits": 520,
      "readers": 340,
      "members": 220
    }
  }
];
<Chart type="bar" label="Hoạt động xếp chồng" data={sampleChartRows} series={sampleChartSeries} orientation="vertical" layout="stacked" />

Bar phần trăm chiều dọc

Data minh họa gốc. Bản copy gồm toàn bộ thiết lập cục bộ.

Hoạt động theo phần trăm

Hoạt động theo phần trăm
Hoạt động theo phần trăm	Lượt xem	Người đọc	Thành viên
Thứ Hai	280	180	90
Thứ Ba	340	220	110
Thứ Tư	310	200	120
Thứ Năm	420	270	150
Thứ Sáu	390	260	170
Thứ Bảy	480	310	190
Chủ Nhật	520	340	220

import { Chart } from "@/components/ui/chart"

import type { ChartSeries, ChartRow } from "@/components/ui/chart"
const sampleChartSeries: ChartSeries[] = [
  {
    "id": "visits",
    "label": "Lượt xem"
  },
  {
    "id": "readers",
    "label": "Người đọc"
  },
  {
    "id": "members",
    "label": "Thành viên"
  }
];
const sampleChartRows: ChartRow[] = [
  {
    "id": "mon",
    "label": "Thứ Hai",
    "x": 1791763200000,
    "values": {
      "visits": 280,
      "readers": 180,
      "members": 90
    }
  },
  {
    "id": "tue",
    "label": "Thứ Ba",
    "x": 1791849600000,
    "values": {
      "visits": 340,
      "readers": 220,
      "members": 110
    }
  },
  {
    "id": "wed",
    "label": "Thứ Tư",
    "x": 1791936000000,
    "values": {
      "visits": 310,
      "readers": 200,
      "members": 120
    }
  },
  {
    "id": "thu",
    "label": "Thứ Năm",
    "x": 1792022400000,
    "values": {
      "visits": 420,
      "readers": 270,
      "members": 150
    }
  },
  {
    "id": "fri",
    "label": "Thứ Sáu",
    "x": 1792108800000,
    "values": {
      "visits": 390,
      "readers": 260,
      "members": 170
    }
  },
  {
    "id": "sat",
    "label": "Thứ Bảy",
    "x": 1792195200000,
    "values": {
      "visits": 480,
      "readers": 310,
      "members": 190
    }
  },
  {
    "id": "sun",
    "label": "Chủ Nhật",
    "x": 1792281600000,
    "values": {
      "visits": 520,
      "readers": 340,
      "members": 220
    }
  }
];
<Chart type="bar" label="Hoạt động theo phần trăm" data={sampleChartRows} series={sampleChartSeries} orientation="vertical" layout="percentage" />

Bar grouped chiều ngang

Data minh họa gốc. Bản copy gồm toàn bộ thiết lập cục bộ.

Hoạt động theo nhóm

Hoạt động theo nhóm
Hoạt động theo nhóm	Lượt xem	Người đọc	Thành viên
Thứ Hai	280	180	90
Thứ Ba	340	220	110
Thứ Tư	310	200	120
Thứ Năm	420	270	150
Thứ Sáu	390	260	170
Thứ Bảy	480	310	190
Chủ Nhật	520	340	220

import { Chart } from "@/components/ui/chart"

import type { ChartSeries, ChartRow } from "@/components/ui/chart"
const sampleChartSeries: ChartSeries[] = [
  {
    "id": "visits",
    "label": "Lượt xem"
  },
  {
    "id": "readers",
    "label": "Người đọc"
  },
  {
    "id": "members",
    "label": "Thành viên"
  }
];
const sampleChartRows: ChartRow[] = [
  {
    "id": "mon",
    "label": "Thứ Hai",
    "x": 1791763200000,
    "values": {
      "visits": 280,
      "readers": 180,
      "members": 90
    }
  },
  {
    "id": "tue",
    "label": "Thứ Ba",
    "x": 1791849600000,
    "values": {
      "visits": 340,
      "readers": 220,
      "members": 110
    }
  },
  {
    "id": "wed",
    "label": "Thứ Tư",
    "x": 1791936000000,
    "values": {
      "visits": 310,
      "readers": 200,
      "members": 120
    }
  },
  {
    "id": "thu",
    "label": "Thứ Năm",
    "x": 1792022400000,
    "values": {
      "visits": 420,
      "readers": 270,
      "members": 150
    }
  },
  {
    "id": "fri",
    "label": "Thứ Sáu",
    "x": 1792108800000,
    "values": {
      "visits": 390,
      "readers": 260,
      "members": 170
    }
  },
  {
    "id": "sat",
    "label": "Thứ Bảy",
    "x": 1792195200000,
    "values": {
      "visits": 480,
      "readers": 310,
      "members": 190
    }
  },
  {
    "id": "sun",
    "label": "Chủ Nhật",
    "x": 1792281600000,
    "values": {
      "visits": 520,
      "readers": 340,
      "members": 220
    }
  }
];
<Chart type="bar" label="Hoạt động theo nhóm" data={sampleChartRows} series={sampleChartSeries} orientation="horizontal" layout="grouped" />

Bar stacked chiều ngang

Data minh họa gốc. Bản copy gồm toàn bộ thiết lập cục bộ.

Hoạt động xếp chồng

Hoạt động xếp chồng
Hoạt động xếp chồng	Lượt xem	Người đọc	Thành viên
Thứ Hai	280	180	90
Thứ Ba	340	220	110
Thứ Tư	310	200	120
Thứ Năm	420	270	150
Thứ Sáu	390	260	170
Thứ Bảy	480	310	190
Chủ Nhật	520	340	220

import { Chart } from "@/components/ui/chart"

import type { ChartSeries, ChartRow } from "@/components/ui/chart"
const sampleChartSeries: ChartSeries[] = [
  {
    "id": "visits",
    "label": "Lượt xem"
  },
  {
    "id": "readers",
    "label": "Người đọc"
  },
  {
    "id": "members",
    "label": "Thành viên"
  }
];
const sampleChartRows: ChartRow[] = [
  {
    "id": "mon",
    "label": "Thứ Hai",
    "x": 1791763200000,
    "values": {
      "visits": 280,
      "readers": 180,
      "members": 90
    }
  },
  {
    "id": "tue",
    "label": "Thứ Ba",
    "x": 1791849600000,
    "values": {
      "visits": 340,
      "readers": 220,
      "members": 110
    }
  },
  {
    "id": "wed",
    "label": "Thứ Tư",
    "x": 1791936000000,
    "values": {
      "visits": 310,
      "readers": 200,
      "members": 120
    }
  },
  {
    "id": "thu",
    "label": "Thứ Năm",
    "x": 1792022400000,
    "values": {
      "visits": 420,
      "readers": 270,
      "members": 150
    }
  },
  {
    "id": "fri",
    "label": "Thứ Sáu",
    "x": 1792108800000,
    "values": {
      "visits": 390,
      "readers": 260,
      "members": 170
    }
  },
  {
    "id": "sat",
    "label": "Thứ Bảy",
    "x": 1792195200000,
    "values": {
      "visits": 480,
      "readers": 310,
      "members": 190
    }
  },
  {
    "id": "sun",
    "label": "Chủ Nhật",
    "x": 1792281600000,
    "values": {
      "visits": 520,
      "readers": 340,
      "members": 220
    }
  }
];
<Chart type="bar" label="Hoạt động xếp chồng" data={sampleChartRows} series={sampleChartSeries} orientation="horizontal" layout="stacked" />

Bar phần trăm chiều ngang

Data minh họa gốc. Bản copy gồm toàn bộ thiết lập cục bộ.

Hoạt động theo phần trăm

Hoạt động theo phần trăm
Hoạt động theo phần trăm	Lượt xem	Người đọc	Thành viên
Thứ Hai	280	180	90
Thứ Ba	340	220	110
Thứ Tư	310	200	120
Thứ Năm	420	270	150
Thứ Sáu	390	260	170
Thứ Bảy	480	310	190
Chủ Nhật	520	340	220

import { Chart } from "@/components/ui/chart"

import type { ChartSeries, ChartRow } from "@/components/ui/chart"
const sampleChartSeries: ChartSeries[] = [
  {
    "id": "visits",
    "label": "Lượt xem"
  },
  {
    "id": "readers",
    "label": "Người đọc"
  },
  {
    "id": "members",
    "label": "Thành viên"
  }
];
const sampleChartRows: ChartRow[] = [
  {
    "id": "mon",
    "label": "Thứ Hai",
    "x": 1791763200000,
    "values": {
      "visits": 280,
      "readers": 180,
      "members": 90
    }
  },
  {
    "id": "tue",
    "label": "Thứ Ba",
    "x": 1791849600000,
    "values": {
      "visits": 340,
      "readers": 220,
      "members": 110
    }
  },
  {
    "id": "wed",
    "label": "Thứ Tư",
    "x": 1791936000000,
    "values": {
      "visits": 310,
      "readers": 200,
      "members": 120
    }
  },
  {
    "id": "thu",
    "label": "Thứ Năm",
    "x": 1792022400000,
    "values": {
      "visits": 420,
      "readers": 270,
      "members": 150
    }
  },
  {
    "id": "fri",
    "label": "Thứ Sáu",
    "x": 1792108800000,
    "values": {
      "visits": 390,
      "readers": 260,
      "members": 170
    }
  },
  {
    "id": "sat",
    "label": "Thứ Bảy",
    "x": 1792195200000,
    "values": {
      "visits": 480,
      "readers": 310,
      "members": 190
    }
  },
  {
    "id": "sun",
    "label": "Chủ Nhật",
    "x": 1792281600000,
    "values": {
      "visits": 520,
      "readers": 340,
      "members": 220
    }
  }
];
<Chart type="bar" label="Hoạt động theo phần trăm" data={sampleChartRows} series={sampleChartSeries} orientation="horizontal" layout="percentage" />

Bar compact trong bảng

Data minh họa gốc. Bản copy gồm toàn bộ thiết lập cục bộ.

Lượt xem so với mức tối đa chung
Lượt xem so với mức tối đa chung	Lượt xem
Thứ Hai	280
Thứ Ba	340
Thứ Tư	310
Thứ Năm	420
Thứ Sáu	390
Thứ Bảy	480
Chủ Nhật	520

import { Chart } from "@/components/ui/chart"

import type { ChartRow, ChartSeries } from "@/components/ui/chart"
const sampleChartRows: ChartRow[] = [
  {
    "id": "mon",
    "label": "Thứ Hai",
    "x": 1791763200000,
    "values": {
      "visits": 280,
      "readers": 180,
      "members": 90
    }
  },
  {
    "id": "tue",
    "label": "Thứ Ba",
    "x": 1791849600000,
    "values": {
      "visits": 340,
      "readers": 220,
      "members": 110
    }
  },
  {
    "id": "wed",
    "label": "Thứ Tư",
    "x": 1791936000000,
    "values": {
      "visits": 310,
      "readers": 200,
      "members": 120
    }
  },
  {
    "id": "thu",
    "label": "Thứ Năm",
    "x": 1792022400000,
    "values": {
      "visits": 420,
      "readers": 270,
      "members": 150
    }
  },
  {
    "id": "fri",
    "label": "Thứ Sáu",
    "x": 1792108800000,
    "values": {
      "visits": 390,
      "readers": 260,
      "members": 170
    }
  },
  {
    "id": "sat",
    "label": "Thứ Bảy",
    "x": 1792195200000,
    "values": {
      "visits": 480,
      "readers": 310,
      "members": 190
    }
  },
  {
    "id": "sun",
    "label": "Chủ Nhật",
    "x": 1792281600000,
    "values": {
      "visits": 520,
      "readers": 340,
      "members": 220
    }
  }
];
const sampleSparkSeries: ChartSeries[] = [
  {
    "id": "visits",
    "label": "Lượt xem"
  }
];
<Chart type="bar" label="Lượt xem so với mức tối đa chung" data={sampleChartRows} series={sampleSparkSeries} orientation="horizontal" compact domain={[0, 600]} table="hidden" />

Sparkline

Data minh họa gốc. Bản copy gồm toàn bộ thiết lập cục bộ.

Lượt xem tuần này
Lượt xem tuần này	Lượt xem
Thứ Hai	280
Thứ Ba	340
Thứ Tư	310
Thứ Năm	420
Thứ Sáu	390
Thứ Bảy	480
Chủ Nhật	520

import { Chart } from "@/components/ui/chart"

import type { ChartRow, ChartSeries } from "@/components/ui/chart"
const sampleChartRows: ChartRow[] = [
  {
    "id": "mon",
    "label": "Thứ Hai",
    "x": 1791763200000,
    "values": {
      "visits": 280,
      "readers": 180,
      "members": 90
    }
  },
  {
    "id": "tue",
    "label": "Thứ Ba",
    "x": 1791849600000,
    "values": {
      "visits": 340,
      "readers": 220,
      "members": 110
    }
  },
  {
    "id": "wed",
    "label": "Thứ Tư",
    "x": 1791936000000,
    "values": {
      "visits": 310,
      "readers": 200,
      "members": 120
    }
  },
  {
    "id": "thu",
    "label": "Thứ Năm",
    "x": 1792022400000,
    "values": {
      "visits": 420,
      "readers": 270,
      "members": 150
    }
  },
  {
    "id": "fri",
    "label": "Thứ Sáu",
    "x": 1792108800000,
    "values": {
      "visits": 390,
      "readers": 260,
      "members": 170
    }
  },
  {
    "id": "sat",
    "label": "Thứ Bảy",
    "x": 1792195200000,
    "values": {
      "visits": 480,
      "readers": 310,
      "members": 190
    }
  },
  {
    "id": "sun",
    "label": "Chủ Nhật",
    "x": 1792281600000,
    "values": {
      "visits": 520,
      "readers": 340,
      "members": 220
    }
  }
];
const sampleSparkSeries: ChartSeries[] = [
  {
    "id": "visits",
    "label": "Lượt xem"
  }
];
<Chart type="sparkline" label="Lượt xem tuần này" data={sampleChartRows} series={sampleSparkSeries} />

Composition

Data minh họa gốc. Bản copy gồm toàn bộ thiết lập cục bộ.

Nguồn lưu lượng

Trực tiếp48044.9%
Tìm kiếm32029.9%
Cộng đồng18016.8%
Khác908.4%

Nguồn lưu lượng
Nguồn lưu lượng	Value	Share
Trực tiếp	480	44.9%
Tìm kiếm	320	29.9%
Cộng đồng	180	16.8%
Khác	90	8.4%

import { Chart } from "@/components/ui/chart"

import type { ChartItem } from "@/components/ui/chart"
const sampleChartParts: ChartItem[] = [
  {
    "id": "direct",
    "label": "Trực tiếp",
    "value": 480
  },
  {
    "id": "search",
    "label": "Tìm kiếm",
    "value": 320
  },
  {
    "id": "community",
    "label": "Cộng đồng",
    "value": 180
  },
  {
    "id": "other",
    "label": "Khác",
    "value": 90,
    "role": "other"
  }
];
<Chart type="composition" label="Nguồn lưu lượng" data={sampleChartParts} />

Donut

Data minh họa gốc. Bản copy gồm toàn bộ thiết lập cục bộ.

Nguồn lưu lượng

Trực tiếp48044.9%
Tìm kiếm32029.9%
Cộng đồng18016.8%
Khác908.4%

Nguồn lưu lượng
Nguồn lưu lượng	Value	Share
Trực tiếp	480	44.9%
Tìm kiếm	320	29.9%
Cộng đồng	180	16.8%
Khác	90	8.4%

import { Chart } from "@/components/ui/chart"

import type { ChartItem } from "@/components/ui/chart"
const sampleChartParts: ChartItem[] = [
  {
    "id": "direct",
    "label": "Trực tiếp",
    "value": 480
  },
  {
    "id": "search",
    "label": "Tìm kiếm",
    "value": 320
  },
  {
    "id": "community",
    "label": "Cộng đồng",
    "value": 180
  },
  {
    "id": "other",
    "label": "Khác",
    "value": 90,
    "role": "other"
  }
];
<Chart type="donut" label="Nguồn lưu lượng" data={sampleChartParts} />

Funnel có thứ tự

Data minh họa gốc. Bản copy gồm toàn bộ thiết lập cục bộ.

Chuyển đổi hành trình

Chuyển đổi hành trình
Chuyển đổi hành trình	Value	Share	Conversion
Đã truy cập	1,200	100%	Missing value
Đã bắt đầu	760	63.3%	63.3%
Đã xem xét	440	36.7%	57.9%
Đã hoàn thành	260	21.7%	59.1%

import { Chart } from "@/components/ui/chart"

import type { ChartItem } from "@/components/ui/chart"
const sampleFunnelParts: ChartItem[] = [
  {
    "id": "visit",
    "label": "Đã truy cập",
    "value": 1200
  },
  {
    "id": "start",
    "label": "Đã bắt đầu",
    "value": 760
  },
  {
    "id": "review",
    "label": "Đã xem xét",
    "value": 440
  },
  {
    "id": "complete",
    "label": "Đã hoàn thành",
    "value": 260
  }
];
<Chart type="funnel" label="Chuyển đổi hành trình" data={sampleFunnelParts} />

Timeline

Data minh họa gốc. Bản copy gồm toàn bộ thiết lập cục bộ.

Lịch giao hàng

On trackAt riskBlockedNo status

Lịch giao hàng
Lịch giao hàng	Start	End	Status
Khám phá	0	5	On track
Nguyên mẫu	4	12	At risk
Xây dựng	10	24	Blocked
Xem xét	24	24	No status

import { Chart } from "@/components/ui/chart"

import type { ChartRange } from "@/components/ui/chart"
const sampleChartRanges: ChartRange[] = [
  {
    "id": "discovery",
    "label": "Khám phá",
    "start": 0,
    "end": 5,
    "status": "success"
  },
  {
    "id": "prototype",
    "label": "Nguyên mẫu",
    "start": 4,
    "end": 12,
    "status": "warning"
  },
  {
    "id": "build",
    "label": "Xây dựng",
    "start": 10,
    "end": 24,
    "status": "danger"
  },
  {
    "id": "review",
    "label": "Xem xét",
    "start": 24,
    "end": 24,
    "status": "neutral"
  }
];
<Chart type="timeline" label="Lịch giao hàng" data={sampleChartRanges} range={[0, 28]} marker={{ value: 14, label: "Điểm kiểm tra" }} />

Giữ chân cohort

Các cohort minh họa gốc. Null nghĩa là chưa quan sát; zero nghĩa là 0 phần trăm đã được quan sát.

Giữ chân hàng tuần

Giữ chân hàng tuần
Cohort size	Tuần 0	Tuần 1	Tuần 2	Tuần 3
Đoàn hệ A240	100%	72%	54%	42%
Đoàn hệ B280	100%	75%	58%	-
Đoàn hệ C310	100%	78%	-	-
Đoàn hệ D330	100%	-	-	-

0%–20%
20%–40%
40%–60%
60%–80%
80%–100%
Not yet observed

Giữ chân hàng tuần
Giữ chân hàng tuần	Cohort size	Tuần 0	Tuần 1	Tuần 2	Tuần 3
Đoàn hệ A	240	100%	72%	54%	42%
Đoàn hệ B	280	100%	75%	58%	Not yet observed
Đoàn hệ C	310	100%	78%	Not yet observed	Not yet observed
Đoàn hệ D	330	100%	Not yet observed	Not yet observed	Not yet observed

import { Chart } from "@/components/ui/chart"

import type { ChartCohortRow } from "@/components/ui/chart"
const sampleCohortColumns: Array<{ id: string; label: string }> = [
  {
    "id": "w0",
    "label": "Tuần 0"
  },
  {
    "id": "w1",
    "label": "Tuần 1"
  },
  {
    "id": "w2",
    "label": "Tuần 2"
  },
  {
    "id": "w3",
    "label": "Tuần 3"
  }
];
const sampleChartCohorts: ChartCohortRow[] = [
  {
    "id": "a",
    "label": "Đoàn hệ A",
    "size": 240,
    "values": [
      100,
      72,
      54,
      42
    ]
  },
  {
    "id": "b",
    "label": "Đoàn hệ B",
    "size": 280,
    "values": [
      100,
      75,
      58,
      null
    ]
  },
  {
    "id": "c",
    "label": "Đoàn hệ C",
    "size": 310,
    "values": [
      100,
      78,
      null,
      null
    ]
  },
  {
    "id": "d",
    "label": "Đoàn hệ D",
    "size": 330,
    "values": [
      100,
      null,
      null,
      null
    ]
  }
];
<Chart type="cohort" label="Giữ chân hàng tuần" data={sampleChartCohorts} columns={sampleCohortColumns} />

Uptime dịch vụ

Các quan sát gốc, cùng thời lượng. Các kỳ unknown vẫn được nêu rõ; phần tóm tắt lấy trung bình khả dụng đã biết.

Khả dụng dịch vụ hằng ngày

Cổng99.96%
Coverage: 89 / 90
Hàng đợi100%
Coverage: 90 / 90

OperationalDegradedDownUnknown

Khả dụng dịch vụ hằng ngày
Khả dụng dịch vụ hằng ngày	Ngày 1	Ngày 2	Ngày 3	Ngày 4	Ngày 5	Ngày 6	Ngày 7	Ngày 8	Ngày 9	Ngày 10	Ngày 11	Ngày 12	Ngày 13	Ngày 14	Ngày 15	Ngày 16	Ngày 17	Ngày 18	Ngày 19	Ngày 20	Ngày 21	Ngày 22	Ngày 23	Ngày 24	Ngày 25	Ngày 26	Ngày 27	Ngày 28	Ngày 29	Ngày 30	Ngày 31	Ngày 32	Ngày 33	Ngày 34	Ngày 35	Ngày 36	Ngày 37	Ngày 38	Ngày 39	Ngày 40	Ngày 41	Ngày 42	Ngày 43	Ngày 44	Ngày 45	Ngày 46	Ngày 47	Ngày 48	Ngày 49	Ngày 50	Ngày 51	Ngày 52	Ngày 53	Ngày 54	Ngày 55	Ngày 56	Ngày 57	Ngày 58	Ngày 59	Ngày 60	Ngày 61	Ngày 62	Ngày 63	Ngày 64	Ngày 65	Ngày 66	Ngày 67	Ngày 68	Ngày 69	Ngày 70	Ngày 71	Ngày 72	Ngày 73	Ngày 74	Ngày 75	Ngày 76	Ngày 77	Ngày 78	Ngày 79	Ngày 80	Ngày 81	Ngày 82	Ngày 83	Ngày 84	Ngày 85	Ngày 86	Ngày 87	Ngày 88	Ngày 89	Ngày 90	Value	Coverage
Cổng	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Degraded: 99.2%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Down: 96.8%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Unknown: Missing value	99.96%	89/90 (98.89%)
Hàng đợi	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Degraded: 99.6%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	Operational: 100%	100%	90/90 (100%)

import { Chart } from "@/components/ui/chart"

import type { ChartUptimeRow } from "@/components/ui/chart"
const sampleChartUptime: ChartUptimeRow[] = [
  {
    "id": "gateway",
    "label": "Cổng",
    "samples": [
      {
        "id": "day-1",
        "label": "Ngày 1",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-2",
        "label": "Ngày 2",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-3",
        "label": "Ngày 3",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-4",
        "label": "Ngày 4",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-5",
        "label": "Ngày 5",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-6",
        "label": "Ngày 6",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-7",
        "label": "Ngày 7",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-8",
        "label": "Ngày 8",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-9",
        "label": "Ngày 9",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-10",
        "label": "Ngày 10",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-11",
        "label": "Ngày 11",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-12",
        "label": "Ngày 12",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-13",
        "label": "Ngày 13",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-14",
        "label": "Ngày 14",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-15",
        "label": "Ngày 15",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-16",
        "label": "Ngày 16",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-17",
        "label": "Ngày 17",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-18",
        "label": "Ngày 18",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-19",
        "label": "Ngày 19",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-20",
        "label": "Ngày 20",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-21",
        "label": "Ngày 21",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-22",
        "label": "Ngày 22",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-23",
        "label": "Ngày 23",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-24",
        "label": "Ngày 24",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-25",
        "label": "Ngày 25",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-26",
        "label": "Ngày 26",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-27",
        "label": "Ngày 27",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-28",
        "label": "Ngày 28",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-29",
        "label": "Ngày 29",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-30",
        "label": "Ngày 30",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-31",
        "label": "Ngày 31",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-32",
        "label": "Ngày 32",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-33",
        "label": "Ngày 33",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-34",
        "label": "Ngày 34",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-35",
        "label": "Ngày 35",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-36",
        "label": "Ngày 36",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-37",
        "label": "Ngày 37",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-38",
        "label": "Ngày 38",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-39",
        "label": "Ngày 39",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-40",
        "label": "Ngày 40",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-41",
        "label": "Ngày 41",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-42",
        "label": "Ngày 42",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-43",
        "label": "Ngày 43",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-44",
        "label": "Ngày 44",
        "status": "warning",
        "availability": 99.2
      },
      {
        "id": "day-45",
        "label": "Ngày 45",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-46",
        "label": "Ngày 46",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-47",
        "label": "Ngày 47",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-48",
        "label": "Ngày 48",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-49",
        "label": "Ngày 49",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-50",
        "label": "Ngày 50",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-51",
        "label": "Ngày 51",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-52",
        "label": "Ngày 52",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-53",
        "label": "Ngày 53",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-54",
        "label": "Ngày 54",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-55",
        "label": "Ngày 55",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-56",
        "label": "Ngày 56",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-57",
        "label": "Ngày 57",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-58",
        "label": "Ngày 58",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-59",
        "label": "Ngày 59",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-60",
        "label": "Ngày 60",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-61",
        "label": "Ngày 61",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-62",
        "label": "Ngày 62",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-63",
        "label": "Ngày 63",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-64",
        "label": "Ngày 64",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-65",
        "label": "Ngày 65",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-66",
        "label": "Ngày 66",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-67",
        "label": "Ngày 67",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-68",
        "label": "Ngày 68",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-69",
        "label": "Ngày 69",
        "status": "danger",
        "availability": 96.8
      },
      {
        "id": "day-70",
        "label": "Ngày 70",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-71",
        "label": "Ngày 71",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-72",
        "label": "Ngày 72",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-73",
        "label": "Ngày 73",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-74",
        "label": "Ngày 74",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-75",
        "label": "Ngày 75",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-76",
        "label": "Ngày 76",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-77",
        "label": "Ngày 77",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-78",
        "label": "Ngày 78",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-79",
        "label": "Ngày 79",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-80",
        "label": "Ngày 80",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-81",
        "label": "Ngày 81",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-82",
        "label": "Ngày 82",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-83",
        "label": "Ngày 83",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-84",
        "label": "Ngày 84",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-85",
        "label": "Ngày 85",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-86",
        "label": "Ngày 86",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-87",
        "label": "Ngày 87",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-88",
        "label": "Ngày 88",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-89",
        "label": "Ngày 89",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-90",
        "label": "Ngày 90",
        "status": "unknown",
        "availability": null
      }
    ]
  },
  {
    "id": "queue",
    "label": "Hàng đợi",
    "samples": [
      {
        "id": "day-1",
        "label": "Ngày 1",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-2",
        "label": "Ngày 2",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-3",
        "label": "Ngày 3",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-4",
        "label": "Ngày 4",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-5",
        "label": "Ngày 5",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-6",
        "label": "Ngày 6",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-7",
        "label": "Ngày 7",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-8",
        "label": "Ngày 8",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-9",
        "label": "Ngày 9",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-10",
        "label": "Ngày 10",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-11",
        "label": "Ngày 11",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-12",
        "label": "Ngày 12",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-13",
        "label": "Ngày 13",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-14",
        "label": "Ngày 14",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-15",
        "label": "Ngày 15",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-16",
        "label": "Ngày 16",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-17",
        "label": "Ngày 17",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-18",
        "label": "Ngày 18",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-19",
        "label": "Ngày 19",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-20",
        "label": "Ngày 20",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-21",
        "label": "Ngày 21",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-22",
        "label": "Ngày 22",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-23",
        "label": "Ngày 23",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-24",
        "label": "Ngày 24",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-25",
        "label": "Ngày 25",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-26",
        "label": "Ngày 26",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-27",
        "label": "Ngày 27",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-28",
        "label": "Ngày 28",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-29",
        "label": "Ngày 29",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-30",
        "label": "Ngày 30",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-31",
        "label": "Ngày 31",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-32",
        "label": "Ngày 32",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-33",
        "label": "Ngày 33",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-34",
        "label": "Ngày 34",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-35",
        "label": "Ngày 35",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-36",
        "label": "Ngày 36",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-37",
        "label": "Ngày 37",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-38",
        "label": "Ngày 38",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-39",
        "label": "Ngày 39",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-40",
        "label": "Ngày 40",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-41",
        "label": "Ngày 41",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-42",
        "label": "Ngày 42",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-43",
        "label": "Ngày 43",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-44",
        "label": "Ngày 44",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-45",
        "label": "Ngày 45",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-46",
        "label": "Ngày 46",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-47",
        "label": "Ngày 47",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-48",
        "label": "Ngày 48",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-49",
        "label": "Ngày 49",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-50",
        "label": "Ngày 50",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-51",
        "label": "Ngày 51",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-52",
        "label": "Ngày 52",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-53",
        "label": "Ngày 53",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-54",
        "label": "Ngày 54",
        "status": "warning",
        "availability": 99.6
      },
      {
        "id": "day-55",
        "label": "Ngày 55",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-56",
        "label": "Ngày 56",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-57",
        "label": "Ngày 57",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-58",
        "label": "Ngày 58",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-59",
        "label": "Ngày 59",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-60",
        "label": "Ngày 60",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-61",
        "label": "Ngày 61",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-62",
        "label": "Ngày 62",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-63",
        "label": "Ngày 63",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-64",
        "label": "Ngày 64",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-65",
        "label": "Ngày 65",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-66",
        "label": "Ngày 66",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-67",
        "label": "Ngày 67",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-68",
        "label": "Ngày 68",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-69",
        "label": "Ngày 69",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-70",
        "label": "Ngày 70",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-71",
        "label": "Ngày 71",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-72",
        "label": "Ngày 72",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-73",
        "label": "Ngày 73",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-74",
        "label": "Ngày 74",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-75",
        "label": "Ngày 75",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-76",
        "label": "Ngày 76",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-77",
        "label": "Ngày 77",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-78",
        "label": "Ngày 78",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-79",
        "label": "Ngày 79",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-80",
        "label": "Ngày 80",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-81",
        "label": "Ngày 81",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-82",
        "label": "Ngày 82",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-83",
        "label": "Ngày 83",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-84",
        "label": "Ngày 84",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-85",
        "label": "Ngày 85",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-86",
        "label": "Ngày 86",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-87",
        "label": "Ngày 87",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-88",
        "label": "Ngày 88",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-89",
        "label": "Ngày 89",
        "status": "success",
        "availability": 100
      },
      {
        "id": "day-90",
        "label": "Ngày 90",
        "status": "success",
        "availability": 100
      }
    ]
  }
];
<Chart type="uptime" label="Khả dụng dịch vụ hằng ngày" data={sampleChartUptime} />

Hoạt động hằng ngày

Một ô cho mỗi ngày. Cột là tuần và hàng là thứ. Zero là ô trống và ngày thiếu vẫn trống với cạnh nét đứt. Tiêu đề cộng các giá trị đã biết.

749 events in the last year

LessMore

events in the last year
events in the last year	Value
Oct 13, 2025	3
Oct 14, 2025	0
Oct 15, 2025	0
Oct 16, 2025	0
Oct 17, 2025	0
Oct 18, 2025	0
Oct 19, 2025	0
Oct 20, 2025	0
Oct 21, 2025	0
Oct 22, 2025	0
Oct 23, 2025	0
Oct 24, 2025	0
Oct 25, 2025	0
Oct 26, 2025	0
Oct 27, 2025	0
Oct 28, 2025	0
Oct 29, 2025	0
Oct 30, 2025	1
Oct 31, 2025	0
Nov 1, 2025	0
Nov 2, 2025	0
Nov 3, 2025	0
Nov 4, 2025	0
Nov 5, 2025	0
Nov 6, 2025	0
Nov 7, 2025	0
Nov 8, 2025	0
Nov 9, 2025	0
Nov 10, 2025	0
Nov 11, 2025	3
Nov 12, 2025	0
Nov 13, 2025	0
Nov 14, 2025	0
Nov 15, 2025	0
Nov 16, 2025	1
Nov 17, 2025	0
Nov 18, 2025	0
Nov 19, 2025	0
Nov 20, 2025	0
Nov 21, 2025	0
Nov 22, 2025	0
Nov 23, 2025	0
Nov 24, 2025	0
Nov 25, 2025	0
Nov 26, 2025	0
Nov 27, 2025	0
Nov 28, 2025	0
Nov 29, 2025	0
Nov 30, 2025	0
Dec 1, 2025	0
Dec 2, 2025	0
Dec 3, 2025	1
Dec 4, 2025	0
Dec 5, 2025	0
Dec 6, 2025	0
Dec 7, 2025	0
Dec 8, 2025	0
Dec 9, 2025	0
Dec 10, 2025	3
Dec 11, 2025	0
Dec 12, 2025	0
Dec 13, 2025	0
Dec 14, 2025	0
Dec 15, 2025	0
Dec 16, 2025	0
Dec 17, 2025	0
Dec 18, 2025	0
Dec 19, 2025	0
Dec 20, 2025	1
Dec 21, 2025	0
Dec 22, 2025	0
Dec 23, 2025	0
Dec 24, 2025	0
Dec 25, 2025	0
Dec 26, 2025	0
Dec 27, 2025	0
Dec 28, 2025	0
Dec 29, 2025	0
Dec 30, 2025	0
Dec 31, 2025	0
Jan 1, 2026	0
Jan 2, 2026	0
Jan 3, 2026	0
Jan 4, 2026	0
Jan 5, 2026	0
Jan 6, 2026	1
Jan 7, 2026	0
Jan 8, 2026	3
Jan 9, 2026	0
Jan 10, 2026	0
Jan 11, 2026	0
Jan 12, 2026	0
Jan 13, 2026	0
Jan 14, 2026	0
Jan 15, 2026	0
Jan 16, 2026	0
Jan 17, 2026	0
Jan 18, 2026	0
Jan 19, 2026	0
Jan 20, 2026	0
Jan 21, 2026	0
Jan 22, 2026	0
Jan 23, 2026	1
Jan 24, 2026	0
Jan 25, 2026	0
Jan 26, 2026	0
Jan 27, 2026	0
Jan 28, 2026	0
Jan 29, 2026	0
Jan 30, 2026	0
Jan 31, 2026	0
Feb 1, 2026	0
Feb 2, 2026	0
Feb 3, 2026	0
Feb 4, 2026	0
Feb 5, 2026	0
Feb 6, 2026	3
Feb 7, 2026	0
Feb 8, 2026	0
Feb 9, 2026	1
Feb 10, 2026	0
Feb 11, 2026	0
Feb 12, 2026	0
Feb 13, 2026	0
Feb 14, 2026	0
Feb 15, 2026	0
Feb 16, 2026	0
Feb 17, 2026	0
Feb 18, 2026	0
Feb 19, 2026	0
Feb 20, 2026	0
Feb 21, 2026	0
Feb 22, 2026	0
Feb 23, 2026	0
Feb 24, 2026	0
Feb 25, 2026	0
Feb 26, 2026	1
Feb 27, 2026	0
Feb 28, 2026	0
Mar 1, 2026	0
Mar 2, 2026	0
Mar 3, 2026	0
Mar 4, 2026	0
Mar 5, 2026	0
Mar 6, 2026	0
Mar 7, 2026	3
Mar 8, 2026	0
Mar 9, 2026	0
Mar 10, 2026	0
Mar 11, 2026	0
Mar 12, 2026	0
Mar 13, 2026	0
Mar 14, 2026	0
Mar 15, 2026	1
Mar 16, 2026	0
Mar 17, 2026	0
Mar 18, 2026	0
Mar 19, 2026	0
Mar 20, 2026	0
Mar 21, 2026	0
Mar 22, 2026	0
Mar 23, 2026	0
Mar 24, 2026	0
Mar 25, 2026	0
Mar 26, 2026	0
Mar 27, 2026	0
Mar 28, 2026	0
Mar 29, 2026	0
Mar 30, 2026	0
Mar 31, 2026	0
Apr 1, 2026	1
Apr 2, 2026	0
Apr 3, 2026	0
Apr 4, 2026	0
Apr 5, 2026	3
Apr 6, 2026	0
Apr 7, 2026	0
Apr 8, 2026	0
Apr 9, 2026	0
Apr 10, 2026	0
Apr 11, 2026	0
Apr 12, 2026	0
Apr 13, 2026	0
Apr 14, 2026	0
Apr 15, 2026	0
Apr 16, 2026	0
Apr 17, 2026	0
Apr 18, 2026	1
Apr 19, 2026	0
Apr 20, 2026	0
Apr 21, 2026	0
Apr 22, 2026	0
Apr 23, 2026	0
Apr 24, 2026	0
Apr 25, 2026	0
Apr 26, 2026	0
Apr 27, 2026	0
Apr 28, 2026	0
Apr 29, 2026	0
Apr 30, 2026	0
May 1, 2026	0
May 2, 2026	0
May 3, 2026	0
May 4, 2026	3
May 5, 2026	1
May 6, 2026	0
May 7, 2026	0
May 8, 2026	0
May 9, 2026	0
May 10, 2026	0
May 11, 2026	0
May 12, 2026	0
May 13, 2026	0
May 14, 2026	0
May 15, 2026	0
May 16, 2026	3
May 17, 2026	2
May 18, 2026	1
May 19, 2026	1
May 20, 2026	1
May 21, 2026	2
May 22, 2026	2
May 23, 2026	3
May 24, 2026	4
May 25, 2026	4
May 26, 2026	4
May 27, 2026	3
May 28, 2026	2
May 29, 2026	1
May 30, 2026	0
May 31, 2026	0
Jun 1, 2026	0
Jun 2, 2026	0
Jun 3, 2026	0
Jun 4, 2026	0
Jun 5, 2026	0
Jun 6, 2026	1
Jun 7, 2026	2
Jun 8, 2026	2
Jun 9, 2026	3
Jun 10, 2026	2
Jun 11, 2026	2
Jun 12, 2026	1
Jun 13, 2026	1
Jun 14, 2026	1
Jun 15, 2026	1
Jun 16, 2026	1
Jun 17, 2026	2
Jun 18, 2026	3
Jun 19, 2026	4
Jun 20, 2026	5
Jun 21, 2026	6
Jun 22, 2026	7
Jun 23, 2026	7
Jun 24, 2026	6
Jun 25, 2026	6
Jun 26, 2026	5
Jun 27, 2026	4
Jun 28, 2026	3
Jun 29, 2026	3
Jun 30, 2026	3
Jul 1, 2026	3
Jul 2, 2026	4
Jul 3, 2026	4
Jul 4, 2026	5
Jul 5, 2026	5
Jul 6, 2026	5
Jul 7, 2026	5
Jul 8, 2026	4
Jul 9, 2026	3
Jul 10, 2026	2
Jul 11, 2026	1
Jul 12, 2026	0
Jul 13, 2026	0
Jul 14, 2026	0
Jul 15, 2026	1
Jul 16, 2026	2
Jul 17, 2026	3
Jul 18, 2026	3
Jul 19, 2026	4
Jul 20, 2026	5
Jul 21, 2026	5
Jul 22, 2026	4
Jul 23, 2026	4
Jul 24, 2026	3
Jul 25, 2026	3
Jul 26, 2026	3
Jul 27, 2026	3
Jul 28, 2026	3
Jul 29, 2026	4
Jul 30, 2026	5
Jul 31, 2026	7
Aug 1, 2026	8
Aug 2, 2026	8
Aug 3, 2026	9
Aug 4, 2026	8
Aug 5, 2026	8
Aug 6, 2026	7
Aug 7, 2026	6
Aug 8, 2026	5
Aug 9, 2026	5
Aug 10, 2026	4
Aug 11, 2026	5
Aug 12, 2026	5
Aug 13, 2026	6
Aug 14, 2026	6
Aug 15, 2026	7
Aug 16, 2026	7
Aug 17, 2026	7
Aug 18, 2026	6
Aug 19, 2026	5
Aug 20, 2026	4
Aug 21, 2026	3
Aug 22, 2026	2
Aug 23, 2026	2
Aug 24, 2026	2
Aug 25, 2026	2
Aug 26, 2026	3
Aug 27, 2026	4
Aug 28, 2026	5
Aug 29, 2026	6
Aug 30, 2026	6
Aug 31, 2026	7
Sep 1, 2026	6
Sep 2, 2026	6
Sep 3, 2026	5
Sep 4, 2026	5
Sep 5, 2026	5
Sep 6, 2026	5
Sep 7, 2026	5
Sep 8, 2026	6
Sep 9, 2026	7
Sep 10, 2026	8
Sep 11, 2026	9
Sep 12, 2026	10
Sep 13, 2026	10
Sep 14, 2026	10
Sep 15, 2026	10
Sep 16, 2026	9
Sep 17, 2026	8
Sep 18, 2026	7
Sep 19, 2026	7
Sep 20, 2026	6
Sep 21, 2026	6
Sep 22, 2026	6
Sep 23, 2026	7
Sep 24, 2026	8
Sep 25, 2026	8
Sep 26, 2026	9
Sep 27, 2026	9
Sep 28, 2026	8
Sep 29, 2026	7
Sep 30, 2026	6
Oct 1, 2026	5
Oct 2, 2026	4
Oct 3, 2026	4
Oct 4, 2026	3
Oct 5, 2026	4
6 thg 10, 2026	4
Oct 7, 2026	5
Oct 8, 2026	6
Oct 9, 2026	7
Oct 10, 2026	8
Oct 11, 2026	8
Oct 12, 2026	8
Oct 13, 2026	8
Oct 14, 2026	8
Oct 15, 2026	7
Oct 16, 2026	7
Oct 17, 2026	7
Oct 18, 2026	7

import { Chart } from "@/components/ui/chart"

import type { ChartActivityDay } from "@/components/ui/chart"
const sampleChartActivity: ChartActivityDay[] = [
  {
    "id": "2025-10-13",
    "label": "Oct 13, 2025",
    "date": "2025-10-13",
    "value": 3
  },
  {
    "id": "2025-10-14",
    "label": "Oct 14, 2025",
    "date": "2025-10-14",
    "value": 0
  },
  {
    "id": "2025-10-15",
    "label": "Oct 15, 2025",
    "date": "2025-10-15",
    "value": 0
  },
  {
    "id": "2025-10-16",
    "label": "Oct 16, 2025",
    "date": "2025-10-16",
    "value": 0
  },
  {
    "id": "2025-10-17",
    "label": "Oct 17, 2025",
    "date": "2025-10-17",
    "value": 0
  },
  {
    "id": "2025-10-18",
    "label": "Oct 18, 2025",
    "date": "2025-10-18",
    "value": 0
  },
  {
    "id": "2025-10-19",
    "label": "Oct 19, 2025",
    "date": "2025-10-19",
    "value": 0
  },
  {
    "id": "2025-10-20",
    "label": "Oct 20, 2025",
    "date": "2025-10-20",
    "value": 0
  },
  {
    "id": "2025-10-21",
    "label": "Oct 21, 2025",
    "date": "2025-10-21",
    "value": 0
  },
  {
    "id": "2025-10-22",
    "label": "Oct 22, 2025",
    "date": "2025-10-22",
    "value": 0
  },
  {
    "id": "2025-10-23",
    "label": "Oct 23, 2025",
    "date": "2025-10-23",
    "value": 0
  },
  {
    "id": "2025-10-24",
    "label": "Oct 24, 2025",
    "date": "2025-10-24",
    "value": 0
  },
  {
    "id": "2025-10-25",
    "label": "Oct 25, 2025",
    "date": "2025-10-25",
    "value": 0
  },
  {
    "id": "2025-10-26",
    "label": "Oct 26, 2025",
    "date": "2025-10-26",
    "value": 0
  },
  {
    "id": "2025-10-27",
    "label": "Oct 27, 2025",
    "date": "2025-10-27",
    "value": 0
  },
  {
    "id": "2025-10-28",
    "label": "Oct 28, 2025",
    "date": "2025-10-28",
    "value": 0
  },
  {
    "id": "2025-10-29",
    "label": "Oct 29, 2025",
    "date": "2025-10-29",
    "value": 0
  },
  {
    "id": "2025-10-30",
    "label": "Oct 30, 2025",
    "date": "2025-10-30",
    "value": 1
  },
  {
    "id": "2025-10-31",
    "label": "Oct 31, 2025",
    "date": "2025-10-31",
    "value": 0
  },
  {
    "id": "2025-11-01",
    "label": "Nov 1, 2025",
    "date": "2025-11-01",
    "value": 0
  },
  {
    "id": "2025-11-02",
    "label": "Nov 2, 2025",
    "date": "2025-11-02",
    "value": 0
  },
  {
    "id": "2025-11-03",
    "label": "Nov 3, 2025",
    "date": "2025-11-03",
    "value": 0
  },
  {
    "id": "2025-11-04",
    "label": "Nov 4, 2025",
    "date": "2025-11-04",
    "value": 0
  },
  {
    "id": "2025-11-05",
    "label": "Nov 5, 2025",
    "date": "2025-11-05",
    "value": 0
  },
  {
    "id": "2025-11-06",
    "label": "Nov 6, 2025",
    "date": "2025-11-06",
    "value": 0
  },
  {
    "id": "2025-11-07",
    "label": "Nov 7, 2025",
    "date": "2025-11-07",
    "value": 0
  },
  {
    "id": "2025-11-08",
    "label": "Nov 8, 2025",
    "date": "2025-11-08",
    "value": 0
  },
  {
    "id": "2025-11-09",
    "label": "Nov 9, 2025",
    "date": "2025-11-09",
    "value": 0
  },
  {
    "id": "2025-11-10",
    "label": "Nov 10, 2025",
    "date": "2025-11-10",
    "value": 0
  },
  {
    "id": "2025-11-11",
    "label": "Nov 11, 2025",
    "date": "2025-11-11",
    "value": 3
  },
  {
    "id": "2025-11-12",
    "label": "Nov 12, 2025",
    "date": "2025-11-12",
    "value": 0
  },
  {
    "id": "2025-11-13",
    "label": "Nov 13, 2025",
    "date": "2025-11-13",
    "value": 0
  },
  {
    "id": "2025-11-14",
    "label": "Nov 14, 2025",
    "date": "2025-11-14",
    "value": 0
  },
  {
    "id": "2025-11-15",
    "label": "Nov 15, 2025",
    "date": "2025-11-15",
    "value": 0
  },
  {
    "id": "2025-11-16",
    "label": "Nov 16, 2025",
    "date": "2025-11-16",
    "value": 1
  },
  {
    "id": "2025-11-17",
    "label": "Nov 17, 2025",
    "date": "2025-11-17",
    "value": 0
  },
  {
    "id": "2025-11-18",
    "label": "Nov 18, 2025",
    "date": "2025-11-18",
    "value": 0
  },
  {
    "id": "2025-11-19",
    "label": "Nov 19, 2025",
    "date": "2025-11-19",
    "value": 0
  },
  {
    "id": "2025-11-20",
    "label": "Nov 20, 2025",
    "date": "2025-11-20",
    "value": 0
  },
  {
    "id": "2025-11-21",
    "label": "Nov 21, 2025",
    "date": "2025-11-21",
    "value": 0
  },
  {
    "id": "2025-11-22",
    "label": "Nov 22, 2025",
    "date": "2025-11-22",
    "value": 0
  },
  {
    "id": "2025-11-23",
    "label": "Nov 23, 2025",
    "date": "2025-11-23",
    "value": 0
  },
  {
    "id": "2025-11-24",
    "label": "Nov 24, 2025",
    "date": "2025-11-24",
    "value": 0
  },
  {
    "id": "2025-11-25",
    "label": "Nov 25, 2025",
    "date": "2025-11-25",
    "value": 0
  },
  {
    "id": "2025-11-26",
    "label": "Nov 26, 2025",
    "date": "2025-11-26",
    "value": 0
  },
  {
    "id": "2025-11-27",
    "label": "Nov 27, 2025",
    "date": "2025-11-27",
    "value": 0
  },
  {
    "id": "2025-11-28",
    "label": "Nov 28, 2025",
    "date": "2025-11-28",
    "value": 0
  },
  {
    "id": "2025-11-29",
    "label": "Nov 29, 2025",
    "date": "2025-11-29",
    "value": 0
  },
  {
    "id": "2025-11-30",
    "label": "Nov 30, 2025",
    "date": "2025-11-30",
    "value": 0
  },
  {
    "id": "2025-12-01",
    "label": "Dec 1, 2025",
    "date": "2025-12-01",
    "value": 0
  },
  {
    "id": "2025-12-02",
    "label": "Dec 2, 2025",
    "date": "2025-12-02",
    "value": 0
  },
  {
    "id": "2025-12-03",
    "label": "Dec 3, 2025",
    "date": "2025-12-03",
    "value": 1
  },
  {
    "id": "2025-12-04",
    "label": "Dec 4, 2025",
    "date": "2025-12-04",
    "value": 0
  },
  {
    "id": "2025-12-05",
    "label": "Dec 5, 2025",
    "date": "2025-12-05",
    "value": 0
  },
  {
    "id": "2025-12-06",
    "label": "Dec 6, 2025",
    "date": "2025-12-06",
    "value": 0
  },
  {
    "id": "2025-12-07",
    "label": "Dec 7, 2025",
    "date": "2025-12-07",
    "value": 0
  },
  {
    "id": "2025-12-08",
    "label": "Dec 8, 2025",
    "date": "2025-12-08",
    "value": 0
  },
  {
    "id": "2025-12-09",
    "label": "Dec 9, 2025",
    "date": "2025-12-09",
    "value": 0
  },
  {
    "id": "2025-12-10",
    "label": "Dec 10, 2025",
    "date": "2025-12-10",
    "value": 3
  },
  {
    "id": "2025-12-11",
    "label": "Dec 11, 2025",
    "date": "2025-12-11",
    "value": 0
  },
  {
    "id": "2025-12-12",
    "label": "Dec 12, 2025",
    "date": "2025-12-12",
    "value": 0
  },
  {
    "id": "2025-12-13",
    "label": "Dec 13, 2025",
    "date": "2025-12-13",
    "value": 0
  },
  {
    "id": "2025-12-14",
    "label": "Dec 14, 2025",
    "date": "2025-12-14",
    "value": 0
  },
  {
    "id": "2025-12-15",
    "label": "Dec 15, 2025",
    "date": "2025-12-15",
    "value": 0
  },
  {
    "id": "2025-12-16",
    "label": "Dec 16, 2025",
    "date": "2025-12-16",
    "value": 0
  },
  {
    "id": "2025-12-17",
    "label": "Dec 17, 2025",
    "date": "2025-12-17",
    "value": 0
  },
  {
    "id": "2025-12-18",
    "label": "Dec 18, 2025",
    "date": "2025-12-18",
    "value": 0
  },
  {
    "id": "2025-12-19",
    "label": "Dec 19, 2025",
    "date": "2025-12-19",
    "value": 0
  },
  {
    "id": "2025-12-20",
    "label": "Dec 20, 2025",
    "date": "2025-12-20",
    "value": 1
  },
  {
    "id": "2025-12-21",
    "label": "Dec 21, 2025",
    "date": "2025-12-21",
    "value": 0
  },
  {
    "id": "2025-12-22",
    "label": "Dec 22, 2025",
    "date": "2025-12-22",
    "value": 0
  },
  {
    "id": "2025-12-23",
    "label": "Dec 23, 2025",
    "date": "2025-12-23",
    "value": 0
  },
  {
    "id": "2025-12-24",
    "label": "Dec 24, 2025",
    "date": "2025-12-24",
    "value": 0
  },
  {
    "id": "2025-12-25",
    "label": "Dec 25, 2025",
    "date": "2025-12-25",
    "value": 0
  },
  {
    "id": "2025-12-26",
    "label": "Dec 26, 2025",
    "date": "2025-12-26",
    "value": 0
  },
  {
    "id": "2025-12-27",
    "label": "Dec 27, 2025",
    "date": "2025-12-27",
    "value": 0
  },
  {
    "id": "2025-12-28",
    "label": "Dec 28, 2025",
    "date": "2025-12-28",
    "value": 0
  },
  {
    "id": "2025-12-29",
    "label": "Dec 29, 2025",
    "date": "2025-12-29",
    "value": 0
  },
  {
    "id": "2025-12-30",
    "label": "Dec 30, 2025",
    "date": "2025-12-30",
    "value": 0
  },
  {
    "id": "2025-12-31",
    "label": "Dec 31, 2025",
    "date": "2025-12-31",
    "value": 0
  },
  {
    "id": "2026-01-01",
    "label": "Jan 1, 2026",
    "date": "2026-01-01",
    "value": 0
  },
  {
    "id": "2026-01-02",
    "label": "Jan 2, 2026",
    "date": "2026-01-02",
    "value": 0
  },
  {
    "id": "2026-01-03",
    "label": "Jan 3, 2026",
    "date": "2026-01-03",
    "value": 0
  },
  {
    "id": "2026-01-04",
    "label": "Jan 4, 2026",
    "date": "2026-01-04",
    "value": 0
  },
  {
    "id": "2026-01-05",
    "label": "Jan 5, 2026",
    "date": "2026-01-05",
    "value": 0
  },
  {
    "id": "2026-01-06",
    "label": "Jan 6, 2026",
    "date": "2026-01-06",
    "value": 1
  },
  {
    "id": "2026-01-07",
    "label": "Jan 7, 2026",
    "date": "2026-01-07",
    "value": 0
  },
  {
    "id": "2026-01-08",
    "label": "Jan 8, 2026",
    "date": "2026-01-08",
    "value": 3
  },
  {
    "id": "2026-01-09",
    "label": "Jan 9, 2026",
    "date": "2026-01-09",
    "value": 0
  },
  {
    "id": "2026-01-10",
    "label": "Jan 10, 2026",
    "date": "2026-01-10",
    "value": 0
  },
  {
    "id": "2026-01-11",
    "label": "Jan 11, 2026",
    "date": "2026-01-11",
    "value": 0
  },
  {
    "id": "2026-01-12",
    "label": "Jan 12, 2026",
    "date": "2026-01-12",
    "value": 0
  },
  {
    "id": "2026-01-13",
    "label": "Jan 13, 2026",
    "date": "2026-01-13",
    "value": 0
  },
  {
    "id": "2026-01-14",
    "label": "Jan 14, 2026",
    "date": "2026-01-14",
    "value": 0
  },
  {
    "id": "2026-01-15",
    "label": "Jan 15, 2026",
    "date": "2026-01-15",
    "value": 0
  },
  {
    "id": "2026-01-16",
    "label": "Jan 16, 2026",
    "date": "2026-01-16",
    "value": 0
  },
  {
    "id": "2026-01-17",
    "label": "Jan 17, 2026",
    "date": "2026-01-17",
    "value": 0
  },
  {
    "id": "2026-01-18",
    "label": "Jan 18, 2026",
    "date": "2026-01-18",
    "value": 0
  },
  {
    "id": "2026-01-19",
    "label": "Jan 19, 2026",
    "date": "2026-01-19",
    "value": 0
  },
  {
    "id": "2026-01-20",
    "label": "Jan 20, 2026",
    "date": "2026-01-20",
    "value": 0
  },
  {
    "id": "2026-01-21",
    "label": "Jan 21, 2026",
    "date": "2026-01-21",
    "value": 0
  },
  {
    "id": "2026-01-22",
    "label": "Jan 22, 2026",
    "date": "2026-01-22",
    "value": 0
  },
  {
    "id": "2026-01-23",
    "label": "Jan 23, 2026",
    "date": "2026-01-23",
    "value": 1
  },
  {
    "id": "2026-01-24",
    "label": "Jan 24, 2026",
    "date": "2026-01-24",
    "value": 0
  },
  {
    "id": "2026-01-25",
    "label": "Jan 25, 2026",
    "date": "2026-01-25",
    "value": 0
  },
  {
    "id": "2026-01-26",
    "label": "Jan 26, 2026",
    "date": "2026-01-26",
    "value": 0
  },
  {
    "id": "2026-01-27",
    "label": "Jan 27, 2026",
    "date": "2026-01-27",
    "value": 0
  },
  {
    "id": "2026-01-28",
    "label": "Jan 28, 2026",
    "date": "2026-01-28",
    "value": 0
  },
  {
    "id": "2026-01-29",
    "label": "Jan 29, 2026",
    "date": "2026-01-29",
    "value": 0
  },
  {
    "id": "2026-01-30",
    "label": "Jan 30, 2026",
    "date": "2026-01-30",
    "value": 0
  },
  {
    "id": "2026-01-31",
    "label": "Jan 31, 2026",
    "date": "2026-01-31",
    "value": 0
  },
  {
    "id": "2026-02-01",
    "label": "Feb 1, 2026",
    "date": "2026-02-01",
    "value": 0
  },
  {
    "id": "2026-02-02",
    "label": "Feb 2, 2026",
    "date": "2026-02-02",
    "value": 0
  },
  {
    "id": "2026-02-03",
    "label": "Feb 3, 2026",
    "date": "2026-02-03",
    "value": 0
  },
  {
    "id": "2026-02-04",
    "label": "Feb 4, 2026",
    "date": "2026-02-04",
    "value": 0
  },
  {
    "id": "2026-02-05",
    "label": "Feb 5, 2026",
    "date": "2026-02-05",
    "value": 0
  },
  {
    "id": "2026-02-06",
    "label": "Feb 6, 2026",
    "date": "2026-02-06",
    "value": 3
  },
  {
    "id": "2026-02-07",
    "label": "Feb 7, 2026",
    "date": "2026-02-07",
    "value": 0
  },
  {
    "id": "2026-02-08",
    "label": "Feb 8, 2026",
    "date": "2026-02-08",
    "value": 0
  },
  {
    "id": "2026-02-09",
    "label": "Feb 9, 2026",
    "date": "2026-02-09",
    "value": 1
  },
  {
    "id": "2026-02-10",
    "label": "Feb 10, 2026",
    "date": "2026-02-10",
    "value": 0
  },
  {
    "id": "2026-02-11",
    "label": "Feb 11, 2026",
    "date": "2026-02-11",
    "value": 0
  },
  {
    "id": "2026-02-12",
    "label": "Feb 12, 2026",
    "date": "2026-02-12",
    "value": 0
  },
  {
    "id": "2026-02-13",
    "label": "Feb 13, 2026",
    "date": "2026-02-13",
    "value": 0
  },
  {
    "id": "2026-02-14",
    "label": "Feb 14, 2026",
    "date": "2026-02-14",
    "value": 0
  },
  {
    "id": "2026-02-15",
    "label": "Feb 15, 2026",
    "date": "2026-02-15",
    "value": 0
  },
  {
    "id": "2026-02-16",
    "label": "Feb 16, 2026",
    "date": "2026-02-16",
    "value": 0
  },
  {
    "id": "2026-02-17",
    "label": "Feb 17, 2026",
    "date": "2026-02-17",
    "value": 0
  },
  {
    "id": "2026-02-18",
    "label": "Feb 18, 2026",
    "date": "2026-02-18",
    "value": 0
  },
  {
    "id": "2026-02-19",
    "label": "Feb 19, 2026",
    "date": "2026-02-19",
    "value": 0
  },
  {
    "id": "2026-02-20",
    "label": "Feb 20, 2026",
    "date": "2026-02-20",
    "value": 0
  },
  {
    "id": "2026-02-21",
    "label": "Feb 21, 2026",
    "date": "2026-02-21",
    "value": 0
  },
  {
    "id": "2026-02-22",
    "label": "Feb 22, 2026",
    "date": "2026-02-22",
    "value": 0
  },
  {
    "id": "2026-02-23",
    "label": "Feb 23, 2026",
    "date": "2026-02-23",
    "value": 0
  },
  {
    "id": "2026-02-24",
    "label": "Feb 24, 2026",
    "date": "2026-02-24",
    "value": 0
  },
  {
    "id": "2026-02-25",
    "label": "Feb 25, 2026",
    "date": "2026-02-25",
    "value": 0
  },
  {
    "id": "2026-02-26",
    "label": "Feb 26, 2026",
    "date": "2026-02-26",
    "value": 1
  },
  {
    "id": "2026-02-27",
    "label": "Feb 27, 2026",
    "date": "2026-02-27",
    "value": 0
  },
  {
    "id": "2026-02-28",
    "label": "Feb 28, 2026",
    "date": "2026-02-28",
    "value": 0
  },
  {
    "id": "2026-03-01",
    "label": "Mar 1, 2026",
    "date": "2026-03-01",
    "value": 0
  },
  {
    "id": "2026-03-02",
    "label": "Mar 2, 2026",
    "date": "2026-03-02",
    "value": 0
  },
  {
    "id": "2026-03-03",
    "label": "Mar 3, 2026",
    "date": "2026-03-03",
    "value": 0
  },
  {
    "id": "2026-03-04",
    "label": "Mar 4, 2026",
    "date": "2026-03-04",
    "value": 0
  },
  {
    "id": "2026-03-05",
    "label": "Mar 5, 2026",
    "date": "2026-03-05",
    "value": 0
  },
  {
    "id": "2026-03-06",
    "label": "Mar 6, 2026",
    "date": "2026-03-06",
    "value": 0
  },
  {
    "id": "2026-03-07",
    "label": "Mar 7, 2026",
    "date": "2026-03-07",
    "value": 3
  },
  {
    "id": "2026-03-08",
    "label": "Mar 8, 2026",
    "date": "2026-03-08",
    "value": 0
  },
  {
    "id": "2026-03-09",
    "label": "Mar 9, 2026",
    "date": "2026-03-09",
    "value": 0
  },
  {
    "id": "2026-03-10",
    "label": "Mar 10, 2026",
    "date": "2026-03-10",
    "value": 0
  },
  {
    "id": "2026-03-11",
    "label": "Mar 11, 2026",
    "date": "2026-03-11",
    "value": 0
  },
  {
    "id": "2026-03-12",
    "label": "Mar 12, 2026",
    "date": "2026-03-12",
    "value": 0
  },
  {
    "id": "2026-03-13",
    "label": "Mar 13, 2026",
    "date": "2026-03-13",
    "value": 0
  },
  {
    "id": "2026-03-14",
    "label": "Mar 14, 2026",
    "date": "2026-03-14",
    "value": 0
  },
  {
    "id": "2026-03-15",
    "label": "Mar 15, 2026",
    "date": "2026-03-15",
    "value": 1
  },
  {
    "id": "2026-03-16",
    "label": "Mar 16, 2026",
    "date": "2026-03-16",
    "value": 0
  },
  {
    "id": "2026-03-17",
    "label": "Mar 17, 2026",
    "date": "2026-03-17",
    "value": 0
  },
  {
    "id": "2026-03-18",
    "label": "Mar 18, 2026",
    "date": "2026-03-18",
    "value": 0
  },
  {
    "id": "2026-03-19",
    "label": "Mar 19, 2026",
    "date": "2026-03-19",
    "value": 0
  },
  {
    "id": "2026-03-20",
    "label": "Mar 20, 2026",
    "date": "2026-03-20",
    "value": 0
  },
  {
    "id": "2026-03-21",
    "label": "Mar 21, 2026",
    "date": "2026-03-21",
    "value": 0
  },
  {
    "id": "2026-03-22",
    "label": "Mar 22, 2026",
    "date": "2026-03-22",
    "value": 0
  },
  {
    "id": "2026-03-23",
    "label": "Mar 23, 2026",
    "date": "2026-03-23",
    "value": 0
  },
  {
    "id": "2026-03-24",
    "label": "Mar 24, 2026",
    "date": "2026-03-24",
    "value": 0
  },
  {
    "id": "2026-03-25",
    "label": "Mar 25, 2026",
    "date": "2026-03-25",
    "value": 0
  },
  {
    "id": "2026-03-26",
    "label": "Mar 26, 2026",
    "date": "2026-03-26",
    "value": 0
  },
  {
    "id": "2026-03-27",
    "label": "Mar 27, 2026",
    "date": "2026-03-27",
    "value": 0
  },
  {
    "id": "2026-03-28",
    "label": "Mar 28, 2026",
    "date": "2026-03-28",
    "value": 0
  },
  {
    "id": "2026-03-29",
    "label": "Mar 29, 2026",
    "date": "2026-03-29",
    "value": 0
  },
  {
    "id": "2026-03-30",
    "label": "Mar 30, 2026",
    "date": "2026-03-30",
    "value": 0
  },
  {
    "id": "2026-03-31",
    "label": "Mar 31, 2026",
    "date": "2026-03-31",
    "value": 0
  },
  {
    "id": "2026-04-01",
    "label": "Apr 1, 2026",
    "date": "2026-04-01",
    "value": 1
  },
  {
    "id": "2026-04-02",
    "label": "Apr 2, 2026",
    "date": "2026-04-02",
    "value": 0
  },
  {
    "id": "2026-04-03",
    "label": "Apr 3, 2026",
    "date": "2026-04-03",
    "value": 0
  },
  {
    "id": "2026-04-04",
    "label": "Apr 4, 2026",
    "date": "2026-04-04",
    "value": 0
  },
  {
    "id": "2026-04-05",
    "label": "Apr 5, 2026",
    "date": "2026-04-05",
    "value": 3
  },
  {
    "id": "2026-04-06",
    "label": "Apr 6, 2026",
    "date": "2026-04-06",
    "value": 0
  },
  {
    "id": "2026-04-07",
    "label": "Apr 7, 2026",
    "date": "2026-04-07",
    "value": 0
  },
  {
    "id": "2026-04-08",
    "label": "Apr 8, 2026",
    "date": "2026-04-08",
    "value": 0
  },
  {
    "id": "2026-04-09",
    "label": "Apr 9, 2026",
    "date": "2026-04-09",
    "value": 0
  },
  {
    "id": "2026-04-10",
    "label": "Apr 10, 2026",
    "date": "2026-04-10",
    "value": 0
  },
  {
    "id": "2026-04-11",
    "label": "Apr 11, 2026",
    "date": "2026-04-11",
    "value": 0
  },
  {
    "id": "2026-04-12",
    "label": "Apr 12, 2026",
    "date": "2026-04-12",
    "value": 0
  },
  {
    "id": "2026-04-13",
    "label": "Apr 13, 2026",
    "date": "2026-04-13",
    "value": 0
  },
  {
    "id": "2026-04-14",
    "label": "Apr 14, 2026",
    "date": "2026-04-14",
    "value": 0
  },
  {
    "id": "2026-04-15",
    "label": "Apr 15, 2026",
    "date": "2026-04-15",
    "value": 0
  },
  {
    "id": "2026-04-16",
    "label": "Apr 16, 2026",
    "date": "2026-04-16",
    "value": 0
  },
  {
    "id": "2026-04-17",
    "label": "Apr 17, 2026",
    "date": "2026-04-17",
    "value": 0
  },
  {
    "id": "2026-04-18",
    "label": "Apr 18, 2026",
    "date": "2026-04-18",
    "value": 1
  },
  {
    "id": "2026-04-19",
    "label": "Apr 19, 2026",
    "date": "2026-04-19",
    "value": 0
  },
  {
    "id": "2026-04-20",
    "label": "Apr 20, 2026",
    "date": "2026-04-20",
    "value": 0
  },
  {
    "id": "2026-04-21",
    "label": "Apr 21, 2026",
    "date": "2026-04-21",
    "value": 0
  },
  {
    "id": "2026-04-22",
    "label": "Apr 22, 2026",
    "date": "2026-04-22",
    "value": 0
  },
  {
    "id": "2026-04-23",
    "label": "Apr 23, 2026",
    "date": "2026-04-23",
    "value": 0
  },
  {
    "id": "2026-04-24",
    "label": "Apr 24, 2026",
    "date": "2026-04-24",
    "value": 0
  },
  {
    "id": "2026-04-25",
    "label": "Apr 25, 2026",
    "date": "2026-04-25",
    "value": 0
  },
  {
    "id": "2026-04-26",
    "label": "Apr 26, 2026",
    "date": "2026-04-26",
    "value": 0
  },
  {
    "id": "2026-04-27",
    "label": "Apr 27, 2026",
    "date": "2026-04-27",
    "value": 0
  },
  {
    "id": "2026-04-28",
    "label": "Apr 28, 2026",
    "date": "2026-04-28",
    "value": 0
  },
  {
    "id": "2026-04-29",
    "label": "Apr 29, 2026",
    "date": "2026-04-29",
    "value": 0
  },
  {
    "id": "2026-04-30",
    "label": "Apr 30, 2026",
    "date": "2026-04-30",
    "value": 0
  },
  {
    "id": "2026-05-01",
    "label": "May 1, 2026",
    "date": "2026-05-01",
    "value": 0
  },
  {
    "id": "2026-05-02",
    "label": "May 2, 2026",
    "date": "2026-05-02",
    "value": 0
  },
  {
    "id": "2026-05-03",
    "label": "May 3, 2026",
    "date": "2026-05-03",
    "value": 0
  },
  {
    "id": "2026-05-04",
    "label": "May 4, 2026",
    "date": "2026-05-04",
    "value": 3
  },
  {
    "id": "2026-05-05",
    "label": "May 5, 2026",
    "date": "2026-05-05",
    "value": 1
  },
  {
    "id": "2026-05-06",
    "label": "May 6, 2026",
    "date": "2026-05-06",
    "value": 0
  },
  {
    "id": "2026-05-07",
    "label": "May 7, 2026",
    "date": "2026-05-07",
    "value": 0
  },
  {
    "id": "2026-05-08",
    "label": "May 8, 2026",
    "date": "2026-05-08",
    "value": 0
  },
  {
    "id": "2026-05-09",
    "label": "May 9, 2026",
    "date": "2026-05-09",
    "value": 0
  },
  {
    "id": "2026-05-10",
    "label": "May 10, 2026",
    "date": "2026-05-10",
    "value": 0
  },
  {
    "id": "2026-05-11",
    "label": "May 11, 2026",
    "date": "2026-05-11",
    "value": 0
  },
  {
    "id": "2026-05-12",
    "label": "May 12, 2026",
    "date": "2026-05-12",
    "value": 0
  },
  {
    "id": "2026-05-13",
    "label": "May 13, 2026",
    "date": "2026-05-13",
    "value": 0
  },
  {
    "id": "2026-05-14",
    "label": "May 14, 2026",
    "date": "2026-05-14",
    "value": 0
  },
  {
    "id": "2026-05-15",
    "label": "May 15, 2026",
    "date": "2026-05-15",
    "value": 0
  },
  {
    "id": "2026-05-16",
    "label": "May 16, 2026",
    "date": "2026-05-16",
    "value": 3
  },
  {
    "id": "2026-05-17",
    "label": "May 17, 2026",
    "date": "2026-05-17",
    "value": 2
  },
  {
    "id": "2026-05-18",
    "label": "May 18, 2026",
    "date": "2026-05-18",
    "value": 1
  },
  {
    "id": "2026-05-19",
    "label": "May 19, 2026",
    "date": "2026-05-19",
    "value": 1
  },
  {
    "id": "2026-05-20",
    "label": "May 20, 2026",
    "date": "2026-05-20",
    "value": 1
  },
  {
    "id": "2026-05-21",
    "label": "May 21, 2026",
    "date": "2026-05-21",
    "value": 2
  },
  {
    "id": "2026-05-22",
    "label": "May 22, 2026",
    "date": "2026-05-22",
    "value": 2
  },
  {
    "id": "2026-05-23",
    "label": "May 23, 2026",
    "date": "2026-05-23",
    "value": 3
  },
  {
    "id": "2026-05-24",
    "label": "May 24, 2026",
    "date": "2026-05-24",
    "value": 4
  },
  {
    "id": "2026-05-25",
    "label": "May 25, 2026",
    "date": "2026-05-25",
    "value": 4
  },
  {
    "id": "2026-05-26",
    "label": "May 26, 2026",
    "date": "2026-05-26",
    "value": 4
  },
  {
    "id": "2026-05-27",
    "label": "May 27, 2026",
    "date": "2026-05-27",
    "value": 3
  },
  {
    "id": "2026-05-28",
    "label": "May 28, 2026",
    "date": "2026-05-28",
    "value": 2
  },
  {
    "id": "2026-05-29",
    "label": "May 29, 2026",
    "date": "2026-05-29",
    "value": 1
  },
  {
    "id": "2026-05-30",
    "label": "May 30, 2026",
    "date": "2026-05-30",
    "value": 0
  },
  {
    "id": "2026-05-31",
    "label": "May 31, 2026",
    "date": "2026-05-31",
    "value": 0
  },
  {
    "id": "2026-06-01",
    "label": "Jun 1, 2026",
    "date": "2026-06-01",
    "value": 0
  },
  {
    "id": "2026-06-02",
    "label": "Jun 2, 2026",
    "date": "2026-06-02",
    "value": 0
  },
  {
    "id": "2026-06-03",
    "label": "Jun 3, 2026",
    "date": "2026-06-03",
    "value": 0
  },
  {
    "id": "2026-06-04",
    "label": "Jun 4, 2026",
    "date": "2026-06-04",
    "value": 0
  },
  {
    "id": "2026-06-05",
    "label": "Jun 5, 2026",
    "date": "2026-06-05",
    "value": 0
  },
  {
    "id": "2026-06-06",
    "label": "Jun 6, 2026",
    "date": "2026-06-06",
    "value": 1
  },
  {
    "id": "2026-06-07",
    "label": "Jun 7, 2026",
    "date": "2026-06-07",
    "value": 2
  },
  {
    "id": "2026-06-08",
    "label": "Jun 8, 2026",
    "date": "2026-06-08",
    "value": 2
  },
  {
    "id": "2026-06-09",
    "label": "Jun 9, 2026",
    "date": "2026-06-09",
    "value": 3
  },
  {
    "id": "2026-06-10",
    "label": "Jun 10, 2026",
    "date": "2026-06-10",
    "value": 2
  },
  {
    "id": "2026-06-11",
    "label": "Jun 11, 2026",
    "date": "2026-06-11",
    "value": 2
  },
  {
    "id": "2026-06-12",
    "label": "Jun 12, 2026",
    "date": "2026-06-12",
    "value": 1
  },
  {
    "id": "2026-06-13",
    "label": "Jun 13, 2026",
    "date": "2026-06-13",
    "value": 1
  },
  {
    "id": "2026-06-14",
    "label": "Jun 14, 2026",
    "date": "2026-06-14",
    "value": 1
  },
  {
    "id": "2026-06-15",
    "label": "Jun 15, 2026",
    "date": "2026-06-15",
    "value": 1
  },
  {
    "id": "2026-06-16",
    "label": "Jun 16, 2026",
    "date": "2026-06-16",
    "value": 1
  },
  {
    "id": "2026-06-17",
    "label": "Jun 17, 2026",
    "date": "2026-06-17",
    "value": 2
  },
  {
    "id": "2026-06-18",
    "label": "Jun 18, 2026",
    "date": "2026-06-18",
    "value": 3
  },
  {
    "id": "2026-06-19",
    "label": "Jun 19, 2026",
    "date": "2026-06-19",
    "value": 4
  },
  {
    "id": "2026-06-20",
    "label": "Jun 20, 2026",
    "date": "2026-06-20",
    "value": 5
  },
  {
    "id": "2026-06-21",
    "label": "Jun 21, 2026",
    "date": "2026-06-21",
    "value": 6
  },
  {
    "id": "2026-06-22",
    "label": "Jun 22, 2026",
    "date": "2026-06-22",
    "value": 7
  },
  {
    "id": "2026-06-23",
    "label": "Jun 23, 2026",
    "date": "2026-06-23",
    "value": 7
  },
  {
    "id": "2026-06-24",
    "label": "Jun 24, 2026",
    "date": "2026-06-24",
    "value": 6
  },
  {
    "id": "2026-06-25",
    "label": "Jun 25, 2026",
    "date": "2026-06-25",
    "value": 6
  },
  {
    "id": "2026-06-26",
    "label": "Jun 26, 2026",
    "date": "2026-06-26",
    "value": 5
  },
  {
    "id": "2026-06-27",
    "label": "Jun 27, 2026",
    "date": "2026-06-27",
    "value": 4
  },
  {
    "id": "2026-06-28",
    "label": "Jun 28, 2026",
    "date": "2026-06-28",
    "value": 3
  },
  {
    "id": "2026-06-29",
    "label": "Jun 29, 2026",
    "date": "2026-06-29",
    "value": 3
  },
  {
    "id": "2026-06-30",
    "label": "Jun 30, 2026",
    "date": "2026-06-30",
    "value": 3
  },
  {
    "id": "2026-07-01",
    "label": "Jul 1, 2026",
    "date": "2026-07-01",
    "value": 3
  },
  {
    "id": "2026-07-02",
    "label": "Jul 2, 2026",
    "date": "2026-07-02",
    "value": 4
  },
  {
    "id": "2026-07-03",
    "label": "Jul 3, 2026",
    "date": "2026-07-03",
    "value": 4
  },
  {
    "id": "2026-07-04",
    "label": "Jul 4, 2026",
    "date": "2026-07-04",
    "value": 5
  },
  {
    "id": "2026-07-05",
    "label": "Jul 5, 2026",
    "date": "2026-07-05",
    "value": 5
  },
  {
    "id": "2026-07-06",
    "label": "Jul 6, 2026",
    "date": "2026-07-06",
    "value": 5
  },
  {
    "id": "2026-07-07",
    "label": "Jul 7, 2026",
    "date": "2026-07-07",
    "value": 5
  },
  {
    "id": "2026-07-08",
    "label": "Jul 8, 2026",
    "date": "2026-07-08",
    "value": 4
  },
  {
    "id": "2026-07-09",
    "label": "Jul 9, 2026",
    "date": "2026-07-09",
    "value": 3
  },
  {
    "id": "2026-07-10",
    "label": "Jul 10, 2026",
    "date": "2026-07-10",
    "value": 2
  },
  {
    "id": "2026-07-11",
    "label": "Jul 11, 2026",
    "date": "2026-07-11",
    "value": 1
  },
  {
    "id": "2026-07-12",
    "label": "Jul 12, 2026",
    "date": "2026-07-12",
    "value": 0
  },
  {
    "id": "2026-07-13",
    "label": "Jul 13, 2026",
    "date": "2026-07-13",
    "value": 0
  },
  {
    "id": "2026-07-14",
    "label": "Jul 14, 2026",
    "date": "2026-07-14",
    "value": 0
  },
  {
    "id": "2026-07-15",
    "label": "Jul 15, 2026",
    "date": "2026-07-15",
    "value": 1
  },
  {
    "id": "2026-07-16",
    "label": "Jul 16, 2026",
    "date": "2026-07-16",
    "value": 2
  },
  {
    "id": "2026-07-17",
    "label": "Jul 17, 2026",
    "date": "2026-07-17",
    "value": 3
  },
  {
    "id": "2026-07-18",
    "label": "Jul 18, 2026",
    "date": "2026-07-18",
    "value": 3
  },
  {
    "id": "2026-07-19",
    "label": "Jul 19, 2026",
    "date": "2026-07-19",
    "value": 4
  },
  {
    "id": "2026-07-20",
    "label": "Jul 20, 2026",
    "date": "2026-07-20",
    "value": 5
  },
  {
    "id": "2026-07-21",
    "label": "Jul 21, 2026",
    "date": "2026-07-21",
    "value": 5
  },
  {
    "id": "2026-07-22",
    "label": "Jul 22, 2026",
    "date": "2026-07-22",
    "value": 4
  },
  {
    "id": "2026-07-23",
    "label": "Jul 23, 2026",
    "date": "2026-07-23",
    "value": 4
  },
  {
    "id": "2026-07-24",
    "label": "Jul 24, 2026",
    "date": "2026-07-24",
    "value": 3
  },
  {
    "id": "2026-07-25",
    "label": "Jul 25, 2026",
    "date": "2026-07-25",
    "value": 3
  },
  {
    "id": "2026-07-26",
    "label": "Jul 26, 2026",
    "date": "2026-07-26",
    "value": 3
  },
  {
    "id": "2026-07-27",
    "label": "Jul 27, 2026",
    "date": "2026-07-27",
    "value": 3
  },
  {
    "id": "2026-07-28",
    "label": "Jul 28, 2026",
    "date": "2026-07-28",
    "value": 3
  },
  {
    "id": "2026-07-29",
    "label": "Jul 29, 2026",
    "date": "2026-07-29",
    "value": 4
  },
  {
    "id": "2026-07-30",
    "label": "Jul 30, 2026",
    "date": "2026-07-30",
    "value": 5
  },
  {
    "id": "2026-07-31",
    "label": "Jul 31, 2026",
    "date": "2026-07-31",
    "value": 7
  },
  {
    "id": "2026-08-01",
    "label": "Aug 1, 2026",
    "date": "2026-08-01",
    "value": 8
  },
  {
    "id": "2026-08-02",
    "label": "Aug 2, 2026",
    "date": "2026-08-02",
    "value": 8
  },
  {
    "id": "2026-08-03",
    "label": "Aug 3, 2026",
    "date": "2026-08-03",
    "value": 9
  },
  {
    "id": "2026-08-04",
    "label": "Aug 4, 2026",
    "date": "2026-08-04",
    "value": 8
  },
  {
    "id": "2026-08-05",
    "label": "Aug 5, 2026",
    "date": "2026-08-05",
    "value": 8
  },
  {
    "id": "2026-08-06",
    "label": "Aug 6, 2026",
    "date": "2026-08-06",
    "value": 7
  },
  {
    "id": "2026-08-07",
    "label": "Aug 7, 2026",
    "date": "2026-08-07",
    "value": 6
  },
  {
    "id": "2026-08-08",
    "label": "Aug 8, 2026",
    "date": "2026-08-08",
    "value": 5
  },
  {
    "id": "2026-08-09",
    "label": "Aug 9, 2026",
    "date": "2026-08-09",
    "value": 5
  },
  {
    "id": "2026-08-10",
    "label": "Aug 10, 2026",
    "date": "2026-08-10",
    "value": 4
  },
  {
    "id": "2026-08-11",
    "label": "Aug 11, 2026",
    "date": "2026-08-11",
    "value": 5
  },
  {
    "id": "2026-08-12",
    "label": "Aug 12, 2026",
    "date": "2026-08-12",
    "value": 5
  },
  {
    "id": "2026-08-13",
    "label": "Aug 13, 2026",
    "date": "2026-08-13",
    "value": 6
  },
  {
    "id": "2026-08-14",
    "label": "Aug 14, 2026",
    "date": "2026-08-14",
    "value": 6
  },
  {
    "id": "2026-08-15",
    "label": "Aug 15, 2026",
    "date": "2026-08-15",
    "value": 7
  },
  {
    "id": "2026-08-16",
    "label": "Aug 16, 2026",
    "date": "2026-08-16",
    "value": 7
  },
  {
    "id": "2026-08-17",
    "label": "Aug 17, 2026",
    "date": "2026-08-17",
    "value": 7
  },
  {
    "id": "2026-08-18",
    "label": "Aug 18, 2026",
    "date": "2026-08-18",
    "value": 6
  },
  {
    "id": "2026-08-19",
    "label": "Aug 19, 2026",
    "date": "2026-08-19",
    "value": 5
  },
  {
    "id": "2026-08-20",
    "label": "Aug 20, 2026",
    "date": "2026-08-20",
    "value": 4
  },
  {
    "id": "2026-08-21",
    "label": "Aug 21, 2026",
    "date": "2026-08-21",
    "value": 3
  },
  {
    "id": "2026-08-22",
    "label": "Aug 22, 2026",
    "date": "2026-08-22",
    "value": 2
  },
  {
    "id": "2026-08-23",
    "label": "Aug 23, 2026",
    "date": "2026-08-23",
    "value": 2
  },
  {
    "id": "2026-08-24",
    "label": "Aug 24, 2026",
    "date": "2026-08-24",
    "value": 2
  },
  {
    "id": "2026-08-25",
    "label": "Aug 25, 2026",
    "date": "2026-08-25",
    "value": 2
  },
  {
    "id": "2026-08-26",
    "label": "Aug 26, 2026",
    "date": "2026-08-26",
    "value": 3
  },
  {
    "id": "2026-08-27",
    "label": "Aug 27, 2026",
    "date": "2026-08-27",
    "value": 4
  },
  {
    "id": "2026-08-28",
    "label": "Aug 28, 2026",
    "date": "2026-08-28",
    "value": 5
  },
  {
    "id": "2026-08-29",
    "label": "Aug 29, 2026",
    "date": "2026-08-29",
    "value": 6
  },
  {
    "id": "2026-08-30",
    "label": "Aug 30, 2026",
    "date": "2026-08-30",
    "value": 6
  },
  {
    "id": "2026-08-31",
    "label": "Aug 31, 2026",
    "date": "2026-08-31",
    "value": 7
  },
  {
    "id": "2026-09-01",
    "label": "Sep 1, 2026",
    "date": "2026-09-01",
    "value": 6
  },
  {
    "id": "2026-09-02",
    "label": "Sep 2, 2026",
    "date": "2026-09-02",
    "value": 6
  },
  {
    "id": "2026-09-03",
    "label": "Sep 3, 2026",
    "date": "2026-09-03",
    "value": 5
  },
  {
    "id": "2026-09-04",
    "label": "Sep 4, 2026",
    "date": "2026-09-04",
    "value": 5
  },
  {
    "id": "2026-09-05",
    "label": "Sep 5, 2026",
    "date": "2026-09-05",
    "value": 5
  },
  {
    "id": "2026-09-06",
    "label": "Sep 6, 2026",
    "date": "2026-09-06",
    "value": 5
  },
  {
    "id": "2026-09-07",
    "label": "Sep 7, 2026",
    "date": "2026-09-07",
    "value": 5
  },
  {
    "id": "2026-09-08",
    "label": "Sep 8, 2026",
    "date": "2026-09-08",
    "value": 6
  },
  {
    "id": "2026-09-09",
    "label": "Sep 9, 2026",
    "date": "2026-09-09",
    "value": 7
  },
  {
    "id": "2026-09-10",
    "label": "Sep 10, 2026",
    "date": "2026-09-10",
    "value": 8
  },
  {
    "id": "2026-09-11",
    "label": "Sep 11, 2026",
    "date": "2026-09-11",
    "value": 9
  },
  {
    "id": "2026-09-12",
    "label": "Sep 12, 2026",
    "date": "2026-09-12",
    "value": 10
  },
  {
    "id": "2026-09-13",
    "label": "Sep 13, 2026",
    "date": "2026-09-13",
    "value": 10
  },
  {
    "id": "2026-09-14",
    "label": "Sep 14, 2026",
    "date": "2026-09-14",
    "value": 10
  },
  {
    "id": "2026-09-15",
    "label": "Sep 15, 2026",
    "date": "2026-09-15",
    "value": 10
  },
  {
    "id": "2026-09-16",
    "label": "Sep 16, 2026",
    "date": "2026-09-16",
    "value": 9
  },
  {
    "id": "2026-09-17",
    "label": "Sep 17, 2026",
    "date": "2026-09-17",
    "value": 8
  },
  {
    "id": "2026-09-18",
    "label": "Sep 18, 2026",
    "date": "2026-09-18",
    "value": 7
  },
  {
    "id": "2026-09-19",
    "label": "Sep 19, 2026",
    "date": "2026-09-19",
    "value": 7
  },
  {
    "id": "2026-09-20",
    "label": "Sep 20, 2026",
    "date": "2026-09-20",
    "value": 6
  },
  {
    "id": "2026-09-21",
    "label": "Sep 21, 2026",
    "date": "2026-09-21",
    "value": 6
  },
  {
    "id": "2026-09-22",
    "label": "Sep 22, 2026",
    "date": "2026-09-22",
    "value": 6
  },
  {
    "id": "2026-09-23",
    "label": "Sep 23, 2026",
    "date": "2026-09-23",
    "value": 7
  },
  {
    "id": "2026-09-24",
    "label": "Sep 24, 2026",
    "date": "2026-09-24",
    "value": 8
  },
  {
    "id": "2026-09-25",
    "label": "Sep 25, 2026",
    "date": "2026-09-25",
    "value": 8
  },
  {
    "id": "2026-09-26",
    "label": "Sep 26, 2026",
    "date": "2026-09-26",
    "value": 9
  },
  {
    "id": "2026-09-27",
    "label": "Sep 27, 2026",
    "date": "2026-09-27",
    "value": 9
  },
  {
    "id": "2026-09-28",
    "label": "Sep 28, 2026",
    "date": "2026-09-28",
    "value": 8
  },
  {
    "id": "2026-09-29",
    "label": "Sep 29, 2026",
    "date": "2026-09-29",
    "value": 7
  },
  {
    "id": "2026-09-30",
    "label": "Sep 30, 2026",
    "date": "2026-09-30",
    "value": 6
  },
  {
    "id": "2026-10-01",
    "label": "Oct 1, 2026",
    "date": "2026-10-01",
    "value": 5
  },
  {
    "id": "2026-10-02",
    "label": "Oct 2, 2026",
    "date": "2026-10-02",
    "value": 4
  },
  {
    "id": "2026-10-03",
    "label": "Oct 3, 2026",
    "date": "2026-10-03",
    "value": 4
  },
  {
    "id": "2026-10-04",
    "label": "Oct 4, 2026",
    "date": "2026-10-04",
    "value": 3
  },
  {
    "id": "2026-10-05",
    "label": "Oct 5, 2026",
    "date": "2026-10-05",
    "value": 4
  },
  {
    "id": "2026-10-06",
    "label": "6 thg 10, 2026",
    "date": "2026-10-06",
    "value": 4
  },
  {
    "id": "2026-10-07",
    "label": "Oct 7, 2026",
    "date": "2026-10-07",
    "value": 5
  },
  {
    "id": "2026-10-08",
    "label": "Oct 8, 2026",
    "date": "2026-10-08",
    "value": 6
  },
  {
    "id": "2026-10-09",
    "label": "Oct 9, 2026",
    "date": "2026-10-09",
    "value": 7
  },
  {
    "id": "2026-10-10",
    "label": "Oct 10, 2026",
    "date": "2026-10-10",
    "value": 8
  },
  {
    "id": "2026-10-11",
    "label": "Oct 11, 2026",
    "date": "2026-10-11",
    "value": 8
  },
  {
    "id": "2026-10-12",
    "label": "Oct 12, 2026",
    "date": "2026-10-12",
    "value": 8
  },
  {
    "id": "2026-10-13",
    "label": "Oct 13, 2026",
    "date": "2026-10-13",
    "value": 8
  },
  {
    "id": "2026-10-14",
    "label": "Oct 14, 2026",
    "date": "2026-10-14",
    "value": 8
  },
  {
    "id": "2026-10-15",
    "label": "Oct 15, 2026",
    "date": "2026-10-15",
    "value": 7
  },
  {
    "id": "2026-10-16",
    "label": "Oct 16, 2026",
    "date": "2026-10-16",
    "value": 7
  },
  {
    "id": "2026-10-17",
    "label": "Oct 17, 2026",
    "date": "2026-10-17",
    "value": 7
  },
  {
    "id": "2026-10-18",
    "label": "Oct 18, 2026",
    "date": "2026-10-18",
    "value": 7
  }
];
<Chart type="activity" label="events in the last year" data={sampleChartActivity} />

Kỳ hiện tại và kỳ trước

Data minh họa gốc. Bản copy gồm toàn bộ thiết lập cục bộ.

Hoạt động hiện tại và trước đó

Hoạt động hiện tại và trước đó
Hoạt động hiện tại và trước đó	Kỳ hiện tại	Kỳ trước
Thứ Hai	280	240
Thứ Ba	340	270
Thứ Tư	310	300
Thứ Năm	420	330
Thứ Sáu	390	360
Thứ Bảy	480	390
Chủ Nhật	520	420

import { Chart } from "@/components/ui/chart"

import type { ChartSeries, ChartRow } from "@/components/ui/chart"
const sampleComparisonSeries: ChartSeries[] = [
  {
    "id": "current",
    "label": "Kỳ hiện tại"
  },
  {
    "id": "prior",
    "label": "Kỳ trước",
    "comparison": true
  }
];
const sampleComparisonRows: ChartRow[] = [
  {
    "id": "mon",
    "label": "Thứ Hai",
    "x": 1791763200000,
    "values": {
      "current": 280,
      "prior": 240
    }
  },
  {
    "id": "tue",
    "label": "Thứ Ba",
    "x": 1791849600000,
    "values": {
      "current": 340,
      "prior": 270
    }
  },
  {
    "id": "wed",
    "label": "Thứ Tư",
    "x": 1791936000000,
    "values": {
      "current": 310,
      "prior": 300
    }
  },
  {
    "id": "thu",
    "label": "Thứ Năm",
    "x": 1792022400000,
    "values": {
      "current": 420,
      "prior": 330
    }
  },
  {
    "id": "fri",
    "label": "Thứ Sáu",
    "x": 1792108800000,
    "values": {
      "current": 390,
      "prior": 360
    }
  },
  {
    "id": "sat",
    "label": "Thứ Bảy",
    "x": 1792195200000,
    "values": {
      "current": 480,
      "prior": 390
    }
  },
  {
    "id": "sun",
    "label": "Chủ Nhật",
    "x": 1792281600000,
    "values": {
      "current": 520,
      "prior": 420
    }
  }
];
<Chart type="line" label="Hoạt động hiện tại và trước đó" data={sampleComparisonRows} series={sampleComparisonSeries} />

Giá trị thiếu

Data minh họa gốc. Bản copy gồm toàn bộ thiết lập cục bộ.

Hoạt động có khoảng trống quan sát

Hoạt động có khoảng trống quan sát
Hoạt động có khoảng trống quan sát	Lượt xem	Người đọc	Thành viên
Thứ Hai	280	180	90
Thứ Ba	340	220	110
Thứ Tư	310	200	120
Thứ Năm	Missing value	270	150
Thứ Sáu	390	260	170
Thứ Bảy	480	310	190
Chủ Nhật	520	340	220

import { Chart } from "@/components/ui/chart"

import type { ChartSeries, ChartRow } from "@/components/ui/chart"
const sampleChartSeries: ChartSeries[] = [
  {
    "id": "visits",
    "label": "Lượt xem"
  },
  {
    "id": "readers",
    "label": "Người đọc"
  },
  {
    "id": "members",
    "label": "Thành viên"
  }
];
const sampleMissingRows: ChartRow[] = [
  {
    "id": "mon",
    "label": "Thứ Hai",
    "x": 1791763200000,
    "values": {
      "visits": 280,
      "readers": 180,
      "members": 90
    }
  },
  {
    "id": "tue",
    "label": "Thứ Ba",
    "x": 1791849600000,
    "values": {
      "visits": 340,
      "readers": 220,
      "members": 110
    }
  },
  {
    "id": "wed",
    "label": "Thứ Tư",
    "x": 1791936000000,
    "values": {
      "visits": 310,
      "readers": 200,
      "members": 120
    }
  },
  {
    "id": "thu",
    "label": "Thứ Năm",
    "x": 1792022400000,
    "values": {
      "visits": null,
      "readers": 270,
      "members": 150
    }
  },
  {
    "id": "fri",
    "label": "Thứ Sáu",
    "x": 1792108800000,
    "values": {
      "visits": 390,
      "readers": 260,
      "members": 170
    }
  },
  {
    "id": "sat",
    "label": "Thứ Bảy",
    "x": 1792195200000,
    "values": {
      "visits": 480,
      "readers": 310,
      "members": 190
    }
  },
  {
    "id": "sun",
    "label": "Chủ Nhật",
    "x": 1792281600000,
    "values": {
      "visits": 520,
      "readers": 340,
      "members": 220
    }
  }
];
<Chart type="line" label="Hoạt động có khoảng trống quan sát" data={sampleMissingRows} series={sampleChartSeries} />

Giá trị có dấu

Data minh họa gốc. Bản copy gồm toàn bộ thiết lập cục bộ.

Thay đổi ròng theo khu vực

Thay đổi ròng theo khu vực
Thay đổi ròng theo khu vực	Lượt xem	Người đọc
Bắc	80	-30
Nam	-40	65
Đông	50	-20

import { Chart } from "@/components/ui/chart"

import type { ChartRow, ChartSeries } from "@/components/ui/chart"
const sampleSignedRows: ChartRow[] = [
  {
    "id": "a",
    "label": "Bắc",
    "x": 0,
    "values": {
      "visits": 80,
      "readers": -30
    }
  },
  {
    "id": "b",
    "label": "Nam",
    "x": 1,
    "values": {
      "visits": -40,
      "readers": 65
    }
  },
  {
    "id": "c",
    "label": "Đông",
    "x": 2,
    "values": {
      "visits": 50,
      "readers": -20
    }
  }
];
const sampleSignedSeries: ChartSeries[] = [
  {
    "id": "visits",
    "label": "Lượt xem"
  },
  {
    "id": "readers",
    "label": "Người đọc"
  }
];
<Chart type="bar" label="Thay đổi ròng theo khu vực" data={sampleSignedRows} series={sampleSignedSeries} layout="stacked" />

Tổng trống

Data minh họa gốc. Bản copy gồm toàn bộ thiết lập cục bộ.

Hoạt động đang chờ quan sát

Total is zero

Hoạt động đang chờ quan sát
Hoạt động đang chờ quan sát	Value	Share
Đang chờ hoạt động	0	Missing value

import { Chart } from "@/components/ui/chart"

import type { ChartItem } from "@/components/ui/chart"
const sampleZeroParts: ChartItem[] = [
  {
    "id": "pending",
    "label": "Đang chờ hoạt động",
    "value": 0
  }
];
<Chart type="donut" label="Hoạt động đang chờ quan sát" data={sampleZeroParts} />

Tám series

Data minh họa gốc. Bản copy gồm toàn bộ thiết lập cục bộ.

Tám nhóm được gắn nhãn

Tám nhóm được gắn nhãn
Tám nhóm được gắn nhãn	Nhóm 1	Nhóm 2	Nhóm 3	Nhóm 4	Nhóm 5	Nhóm 6	Nhóm 7	Nhóm 8
Thứ Hai	20	35	50	65	80	95	110	125
Thứ Ba	23	39	55	71	87	103	119	135
Thứ Tư	26	43	60	77	94	111	128	145
Thứ Năm	29	47	65	83	101	119	137	155
Thứ Sáu	32	51	70	89	108	127	146	125
Thứ Bảy	35	55	75	95	115	95	115	135
Chủ Nhật	38	59	80	101	82	103	124	145

import { Chart } from "@/components/ui/chart"

import type { ChartSeries, ChartRow } from "@/components/ui/chart"
const sampleEightSeries: ChartSeries[] = [
  {
    "id": "series-0",
    "label": "Nhóm 1"
  },
  {
    "id": "series-1",
    "label": "Nhóm 2"
  },
  {
    "id": "series-2",
    "label": "Nhóm 3"
  },
  {
    "id": "series-3",
    "label": "Nhóm 4"
  },
  {
    "id": "series-4",
    "label": "Nhóm 5"
  },
  {
    "id": "series-5",
    "label": "Nhóm 6"
  },
  {
    "id": "series-6",
    "label": "Nhóm 7"
  },
  {
    "id": "series-7",
    "label": "Nhóm 8"
  }
];
const sampleEightRows: ChartRow[] = [
  {
    "id": "mon",
    "label": "Thứ Hai",
    "x": 1791763200000,
    "values": {
      "series-0": 20,
      "series-1": 35,
      "series-2": 50,
      "series-3": 65,
      "series-4": 80,
      "series-5": 95,
      "series-6": 110,
      "series-7": 125
    }
  },
  {
    "id": "tue",
    "label": "Thứ Ba",
    "x": 1791849600000,
    "values": {
      "series-0": 23,
      "series-1": 39,
      "series-2": 55,
      "series-3": 71,
      "series-4": 87,
      "series-5": 103,
      "series-6": 119,
      "series-7": 135
    }
  },
  {
    "id": "wed",
    "label": "Thứ Tư",
    "x": 1791936000000,
    "values": {
      "series-0": 26,
      "series-1": 43,
      "series-2": 60,
      "series-3": 77,
      "series-4": 94,
      "series-5": 111,
      "series-6": 128,
      "series-7": 145
    }
  },
  {
    "id": "thu",
    "label": "Thứ Năm",
    "x": 1792022400000,
    "values": {
      "series-0": 29,
      "series-1": 47,
      "series-2": 65,
      "series-3": 83,
      "series-4": 101,
      "series-5": 119,
      "series-6": 137,
      "series-7": 155
    }
  },
  {
    "id": "fri",
    "label": "Thứ Sáu",
    "x": 1792108800000,
    "values": {
      "series-0": 32,
      "series-1": 51,
      "series-2": 70,
      "series-3": 89,
      "series-4": 108,
      "series-5": 127,
      "series-6": 146,
      "series-7": 125
    }
  },
  {
    "id": "sat",
    "label": "Thứ Bảy",
    "x": 1792195200000,
    "values": {
      "series-0": 35,
      "series-1": 55,
      "series-2": 75,
      "series-3": 95,
      "series-4": 115,
      "series-5": 95,
      "series-6": 115,
      "series-7": 135
    }
  },
  {
    "id": "sun",
    "label": "Chủ Nhật",
    "x": 1792281600000,
    "values": {
      "series-0": 38,
      "series-1": 59,
      "series-2": 80,
      "series-3": 101,
      "series-4": 82,
      "series-5": 103,
      "series-6": 124,
      "series-7": 145
    }
  }
];
<Chart type="line" label="Tám nhóm được gắn nhãn" data={sampleEightRows} series={sampleEightSeries} />

Làm mới pending

Data minh họa gốc vẫn hiện, chỉ plot bị mờ.

Hoạt động đang được làm mới

Hoạt động đang được làm mới
Hoạt động đang được làm mới	Lượt xem	Người đọc	Thành viên
Thứ Hai	280	180	90
Thứ Ba	340	220	110
Thứ Tư	310	200	120
Thứ Năm	420	270	150
Thứ Sáu	390	260	170
Thứ Bảy	480	310	190
Chủ Nhật	520	340	220

import { Chart } from "@/components/ui/chart"

import type { ChartSeries, ChartRow } from "@/components/ui/chart"
const sampleChartSeries: ChartSeries[] = [
  {
    "id": "visits",
    "label": "Lượt xem"
  },
  {
    "id": "readers",
    "label": "Người đọc"
  },
  {
    "id": "members",
    "label": "Thành viên"
  }
];
const sampleChartRows: ChartRow[] = [
  {
    "id": "mon",
    "label": "Thứ Hai",
    "x": 1791763200000,
    "values": {
      "visits": 280,
      "readers": 180,
      "members": 90
    }
  },
  {
    "id": "tue",
    "label": "Thứ Ba",
    "x": 1791849600000,
    "values": {
      "visits": 340,
      "readers": 220,
      "members": 110
    }
  },
  {
    "id": "wed",
    "label": "Thứ Tư",
    "x": 1791936000000,
    "values": {
      "visits": 310,
      "readers": 200,
      "members": 120
    }
  },
  {
    "id": "thu",
    "label": "Thứ Năm",
    "x": 1792022400000,
    "values": {
      "visits": 420,
      "readers": 270,
      "members": 150
    }
  },
  {
    "id": "fri",
    "label": "Thứ Sáu",
    "x": 1792108800000,
    "values": {
      "visits": 390,
      "readers": 260,
      "members": 170
    }
  },
  {
    "id": "sat",
    "label": "Thứ Bảy",
    "x": 1792195200000,
    "values": {
      "visits": 480,
      "readers": 310,
      "members": 190
    }
  },
  {
    "id": "sun",
    "label": "Chủ Nhật",
    "x": 1792281600000,
    "values": {
      "visits": 520,
      "readers": 340,
      "members": 220
    }
  }
];
<Chart type="line" label="Hoạt động đang được làm mới" data={sampleChartRows} series={sampleChartSeries} pending />

Nhãn theo locale

Data minh họa gốc. Bản copy gồm toàn bộ thiết lập cục bộ.

Hoạt động với nhãn tùy chỉnh

Hoạt động với nhãn tùy chỉnh
Hoạt động với nhãn tùy chỉnh	Lượt xem	Người đọc	Thành viên
Thứ Hai	280	180	90
Thứ Ba	340	220	110
Thứ Tư	310	200	120
Thứ Năm	Not measured	270	150
Thứ Sáu	390	260	170
Thứ Bảy	480	310	190
Chủ Nhật	520	340	220

import { Chart } from "@/components/ui/chart"

import type { ChartSeries, ChartRow, ChartLabels } from "@/components/ui/chart"
const sampleChartSeries: ChartSeries[] = [
  {
    "id": "visits",
    "label": "Lượt xem"
  },
  {
    "id": "readers",
    "label": "Người đọc"
  },
  {
    "id": "members",
    "label": "Thành viên"
  }
];
const sampleMissingRows: ChartRow[] = [
  {
    "id": "mon",
    "label": "Thứ Hai",
    "x": 1791763200000,
    "values": {
      "visits": 280,
      "readers": 180,
      "members": 90
    }
  },
  {
    "id": "tue",
    "label": "Thứ Ba",
    "x": 1791849600000,
    "values": {
      "visits": 340,
      "readers": 220,
      "members": 110
    }
  },
  {
    "id": "wed",
    "label": "Thứ Tư",
    "x": 1791936000000,
    "values": {
      "visits": 310,
      "readers": 200,
      "members": 120
    }
  },
  {
    "id": "thu",
    "label": "Thứ Năm",
    "x": 1792022400000,
    "values": {
      "visits": null,
      "readers": 270,
      "members": 150
    }
  },
  {
    "id": "fri",
    "label": "Thứ Sáu",
    "x": 1792108800000,
    "values": {
      "visits": 390,
      "readers": 260,
      "members": 170
    }
  },
  {
    "id": "sat",
    "label": "Thứ Bảy",
    "x": 1792195200000,
    "values": {
      "visits": 480,
      "readers": 310,
      "members": 190
    }
  },
  {
    "id": "sun",
    "label": "Chủ Nhật",
    "x": 1792281600000,
    "values": {
      "visits": 520,
      "readers": 340,
      "members": 220
    }
  }
];
const sampleChartLabels: Partial<ChartLabels> = {
  "viewData": "Open values",
  "hideData": "Close values",
  "missing": "Not measured",
  "unobserved": "Not yet observed"
};
<Chart type="line" label="Hoạt động với nhãn tùy chỉnh" data={sampleMissingRows} series={sampleChartSeries} locale="en-GB" labels={sampleChartLabels} />

Nên và không nên

Nên

Dùng mười contract data đã phân nhánh. Giữ id ổn định và nhãn hàng đầy đủ.
Dùng series theo thứ tự chartPalette; đánh dấu so sánh bằng comparison=true và cung cấp nhãn trực tiếp hoặc pattern khi nhiều hơn bốn series.
Đặt value và nhãn trên bề mặt neutral. Ghép chỉ số với cả khối DataTrend và mục tiêu với Progress.
Giữ nội dung trước đó khi làm mới. Chỉ dùng Skeleton có độ trễ cho lần tải đầu.
Gắn nhãn các bộ data mẫu là minh họa, và tính mọi chart, chỉ số và bảng trên một màn hình từ cùng các hàng.

Không nên

Đừng chọn hue tùy ý, áp alpha cho màu, thêm nấc opacity hoặc animate việc vẽ chart.
Đừng nối qua giá trị thiếu, clamp số liệu không hợp lệ, hoặc coi null là zero.
Đừng lấy trung bình các mẫu khả dụng có thời lượng không bằng nhau, hoặc đếm ô status thành uptime.
Đừng ngụ ý rằng các dải nhiệt cohort là ngưỡng success.
Đừng thêm một bề mặt Card thứ hai quanh chart đã nằm trong một Card.

Props

Tên	Kiểu	Giá trị	Mặc định	Mô tả
type bắt buộc	enum	line \| area \| bar \| sparkline \| composition \| donut \| funnel \| timeline \| cohort \| uptime \| activity	-	Discriminant bắt buộc. Mỗi type chỉ nhận đúng hình dạng data của nó.
label bắt buộc	string	-	-	Tên chart cho truy cập, bắt buộc.
description	string	-	-	Ngữ cảnh tùy chọn gắn với chart.
data bắt buộc	ChartRow[] \| ChartItem[] \| ChartRange[] \| ChartCohortRow[] \| ChartUptimeRow[] \| ChartActivityDay[]	-	-	Data cục bộ có thứ tự, khớp type. Null giữ nghĩa thiếu hoặc chưa quan sát; giá trị không hợp lệ thì được báo.
series	ChartSeries[]	-	-	Bắt buộc cho line, area, bar và sparkline. Các id ổn định ánh xạ tới value; comparison thêm một nét đứt. Sparkline nhận một series.
height	number	-	-	Chiều cao plot theo pixel CSS. Mặc định 256, sparkline 48, bar compact 32. Timeline, cohort, uptime và activity mặc định cao theo các hàng; một height cố định timeline và giới hạn cohort, uptime cùng activity, rồi chúng cuộn.
legend	boolean	-	true	Hiện legend của series hoặc status. Mặc định true, trừ sparkline và bar một series. Composition, donut và funnel giữ nhãn trực tiếp, không legend trùng.
interactive	boolean	-	true	Bật inspect bằng pointer, cảm ứng và bàn phím. Mặc định true, trừ sparkline.
pending	boolean	-	false	Giữ data hiện tại, đánh dấu figure đang bận và chỉ làm mờ plot.
table	enum	toggle \| visible \| hidden	toggle	Toggle hiện khung dữ liệu có ngữ nghĩa. Hidden giữ bảng vẫn truy cập được, với phần trình bày ẩn khỏi mắt. Sparkline mặc định hidden.
locale	string	-	en	Locale định dạng số, đặt rõ, dùng chung cho server và client.
labels	Partial<ChartLabels>	-	-	Ghi đè chữ của viewData, hideData, loading, empty, missing, unobserved, invalid, noSeries, zeroTotal, value, total, cohortSize, conversion, share, coverage, success, warning, danger, unknown, neutral, start, end, status, point, less và more. Giá trị thô dùng formatValue; phần trăm dẫn xuất luôn dùng định dạng phần trăm theo locale.
formatValue	(value: number, id: string) => string	-	-	Định dạng một số hữu hạn và id ổn định của series hoặc item, không đổi hình học.
xScale	enum	category \| linear \| time	category	Khoảng cách trục Cartesian. Các mode numeric và time cần giá trị x hữu hạn, tăng nghiêm ngặt; time dùng epoch millisecond. Không có formatX thì vị trí time hiện một ngày UTC ngắn.
formatX	(value: number) => string	-	-	Định dạng tick numeric hoặc time cho chart Cartesian và timeline; nhãn đầy đủ của hàng vẫn còn.
domain	[number, number]	-	-	Biên giá trị Cartesian, hữu hạn, tăng dần, chứa mọi giá trị. Domain của bar phải chứa zero.
axes	boolean	-	true	Hiện các trục Cartesian. Mặc định true, trừ sparkline và bar compact.
grid	boolean	-	true	Hiện các đường lưới Cartesian. Mặc định true, trừ sparkline và bar compact.
hiddenSeries	string[]	-	-	Các id series Cartesian đang ẩn, ở chế độ controlled. Vị trí palette giữ nguyên.
defaultHiddenSeries	string[]	-	-	Các id series Cartesian ẩn ban đầu, ở chế độ uncontrolled.
onHiddenSeriesChange	(ids: string[]) => void	-	-	Nhận các id series đang ẩn sau một hành động trên legend.
stack	enum	none \| normal	none	Chỉ area: các series độc lập phủ chồng, hoặc một stack cộng không âm. Null làm đứt stack tại hàng đó.
orientation	enum	vertical \| horizontal	vertical	Chỉ bar: bar vertical hoặc horizontal.
layout	enum	grouped \| stacked \| percentage	grouped	Chỉ bar: grouped, stacked có dấu, hoặc composition phần trăm không âm. Hàng phần trăm có tổng zero thì để trống.
compact	boolean	-	false	Chỉ bar: ô số ngắn, không trục và không legend. Một domain dùng chung cho các độ dài so sánh được.
range	[number, number]	-	-	Chỉ timeline, bắt buộc: khoảng hữu hạn, tăng dần, theo đơn vị do người gọi định nghĩa. Mọi mục phải nằm trong khoảng.
marker	{ value: number; label: string }	-	-	Vị trí mốc trên timeline, tùy chọn. Vị trí ngoài khoảng vẫn được mô tả, không có marker nhìn thấy.
columns	Array<{ id: string; label: string }>	-	-	Chỉ cohort, bắt buộc các cột duy nhất. Mỗi hàng có một phần trăm hoặc null cho mỗi cột.
thresholds	[number, number, number, number]	-	-	Chỉ cohort: bốn mốc tăng dần trong (0, 100), xác định năm dải nhiệt có thứ tự của chart series 1, mỗi dải đậm hơn; giá trị in trên ô. Mặc định [20, 40, 60, 80].
weekStartsOn	number	-	0	Chỉ activity. 0 bắt đầu mỗi tuần vào Chủ nhật và 1 bắt đầu vào Thứ hai. Các type chart khác bỏ qua.

Cấu tạo

Phần	Mô tả
root	Figure có tên, với description và trạng thái loading.
plot	Plot responsive và một bề mặt inspect bằng bàn phím. Đường line và cạnh area là đường cong monotone mượt, không vượt quá một giá trị; phần tô area mờ từ màu series ở opacity-subtle tới trong suốt. Đường lưới nét đứt và nhẹ; đường zero chuyển solid trên domain có dấu. Bar mảnh, chỉ bo đầu phía giá trị và không có outline. Các phần composition và cung donut cách nhau một khe 2px thay vì outline. Điểm line và area đang inspect dùng nền series của chúng, một vòng trắng 2px color-border-chart-marker và drop-shadow-low. Phần composition đang inspect nở thêm 4px phía trên và dưới track, còn cung donut đang inspect nở thêm 4px ra ngoài, vẽ lên trên các phần kề.
legend	Các button bật tắt series, với khóa gọn (một nét ngắn cho line, một ô mẫu nhỏ cho dấu có tô) hoặc một danh sách status tĩnh với icon status. Composition và donut liệt kê từng danh mục với lượng và share; hàng funnel hiện conversion từ giai đoạn trước, lượng và share của giai đoạn đầu, và mọi giai đoạn dùng series 1, vì các giai đoạn là một thước đo.
tooltip	Các giá trị đang inspect, dạng gọn, cạnh pointer hoặc dấu được chọn bằng bàn phím, nằm trong plot và bo bằng radius-container.
table	Khung xem dữ liệu thô có ngữ nghĩa, với caption và header.

Role: figure

Phím	Hành động
Tab	Vào plot một lần; các button legend và toggle dữ liệu vẫn là các control riêng.
Arrow keys	Inspect các hàng và series đang hiện; điều hướng các khoảng hoặc ô ma trận theo type của chart.
Home / End	Inspect hàng Cartesian đầu hoặc cuối.
Escape	Đóng inspect và trả focus về plot.

label bắt buộc đặt tên cho figure; description cung cấp ngữ cảnh. Mọi chart giữ một bảng dữ liệu có ngữ nghĩa, kể cả table=hidden.
Null nghĩa là thiếu với giá trị Cartesian, và chưa quan sát với cohort. Zero là giá trị đã quan sát.
Series giữ danh tính palette khi bị ẩn. Nhiều hơn bốn series thì thêm pattern và nét đứt; với bốn series trở xuống, giữ legend hoặc bảng dữ liệu hiện, vì legend ẩn thì màu là tín hiệu duy nhất.
Chạm trên cảm ứng ghim inspect; chạm lần hai hoặc chạm ra ngoài thì đóng. Cuộn trang bình thường vẫn dùng được. Hover bằng chuột không nhận contour focus của bàn phím, và plot đang focus giữ focus ring khi chuột di chuyển. Mỗi nhóm bar là một dải chạm ngang trục giá trị; khe giữa các nhóm thì đóng inspect. Hàng uptime là target 44px, chọn kỳ nằm dưới pointer. Ở bar horizontal, Up và Down chuyển giữa các hàng, Left và Right chuyển giữa các series.
Mẫu uptime đại diện cho các kỳ có thời lượng bằng nhau. Coverage và trung bình của khả dụng đã biết vẫn tách riêng.

Cài đặt

npx werewolf-ui add chart

Chạy npx werewolf-ui init một lần trong app trước khi thêm component. Init cài token, thêm CSS import và luật cho agent. Add cài component này cùng các dependency và giữ nguyên theme của bạn. Xem Cài đặt để biết yêu cầu và cách cài qua registry.

Xem trước

Cách dùng

Khi nào dùng

Khi nào không dùng

Biến thể

table

xScale

Ví dụ

Line ba series

Area phủ chồng

Area xếp stack

Bar grouped chiều dọc

Bar stacked chiều dọc

Bar phần trăm chiều dọc

Bar grouped chiều ngang

Bar stacked chiều ngang

Bar phần trăm chiều ngang

Bar compact trong bảng

Sparkline

Composition

Donut

Funnel có thứ tự

Timeline

Giữ chân cohort

Uptime dịch vụ

Hoạt động hằng ngày

Kỳ hiện tại và kỳ trước

Giá trị thiếu

Giá trị có dấu

Tổng trống

Tám series

Làm mới pending

Nhãn theo locale

Nên và không nên

Nên

Không nên

Props

Cấu tạo

Khả năng truy cập

Cài đặt