Treemap

Иерархические серии без осей. Данные — вложенные через children; значение узла — sizeField листа или сумма потомков.

Treemap

Squarify-раскладка: вложенные прямоугольники, группы с заголовками.

config.ts

import { getData } from './data';
import type { ChartOptions } from 'grafit-charts';

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Lines of code by module' },
    series: [{ type: 'treemap', labelField: 'label', sizeField: 'size' }],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    {
      label: 'Frontend',
      children: [
        { label: 'app', size: 420 },
        { label: 'widgets', size: 180 },
        { label: 'shared', size: 310 },
      ],
    },
    {
      label: 'Backend',
      children: [
        { label: 'api', size: 540 },
        { label: 'workers', size: 230 },
        { label: 'db', size: 160 },
      ],
    },
    {
      label: 'Infra',
      children: [
        { label: 'ci', size: 90 },
        { label: 'deploy', size: 140 },
      ],
    },
  ];
}

Подписи и отступы плиток

label — как у heatmap: placement (9 позиций), formatter, шрифт; цвет подбирается автоконтрастом по плитке. itemPadding — зазор между плитками:

config.ts

import { getData } from './data';
import type { ChartOptions } from 'grafit-charts';

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Tile labels and padding' },
    series: [
      {
        type: 'treemap',
        labelField: 'label',
        sizeField: 'size',
        itemPadding: 5,
        label: {
          enabled: true,
          placement: 'top-left',
          formatter: ({ label, value }) => `${label} · ${value}`,
          fontSize: 12,
          fontWeight: 'bold',
        },
      },
    ],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    {
      label: 'Frontend',
      children: [
        { label: 'App', size: 34 },
        { label: 'Widgets', size: 22 },
        { label: 'UI Kit', size: 18 },
        { label: 'Utils', size: 8 },
      ],
    },
    {
      label: 'Backend',
      children: [
        { label: 'API', size: 28 },
        { label: 'Jobs', size: 14 },
        { label: 'Auth', size: 9 },
      ],
    },
    {
      label: 'Infra',
      children: [
        { label: 'CI', size: 12 },
        { label: 'IaC', size: 10 },
      ],
    },
  ];
}

Опции

Общие опции всех серий (name, showInLegend, tooltip.renderer, …) — в разделе Общие опции серий.

Опция	Серии	По умолчанию	Описание
groupHeaderHeight	treemap	18	высота заголовка группы
fills	все	палитра	цвета ветвей/слоёв
itemPadding	treemap	2	зазор между плитками
labelField	treemap	label/size/children	ключи иерархии
sizeField	treemap	label/size/children	ключи иерархии
childrenField	treemap	label/size/children	ключи иерархии
label.enabled	boolean	true	показать подписи значений
label.placement	center, края и углы (9 позиций)	'center'	позиция подписи
label.formatter	({ datum, label, value }) => string	значение	содержимое подписи
label.fontSize	Pixels	11	размер шрифта подписи
label.fontWeight	string | number	normal	насыщенность
label.fontFamily	string	шрифт темы	гарнитура
label.color	ColorValue	foreground; внутри — автоконтраст	цвет текста