@feugene/granularity-charts

@feugene/granularity-charts

Графики для дизайн-системы @feugene/granularity: свой SVG, ноль зависимостей, рисунок собирается токенами темы, а не палитрой вендора — переключение light/dark ничего не пересоздаёт.

yarn add @feugene/granularity-charts

Состав

Плюс арифметика отдельным subpath — по ней строят свою разметку, когда готового компонента не хватает:

import { linearTicks, normalizeChartData } from '@feugene/granularity-charts/chart'
import { useChartScale } from '@feugene/granularity-charts/composables/useChartScale'

Подключение

// granum.config.ts
import { defineGranumConfig } from '@feugene/granum/vite'
import { windEngine } from '@feugene/granum-engine-wind'

export default defineGranumConfig({
  engine: windEngine(),
  providers: ['@feugene/granularity', '@feugene/granularity-charts'],
  components: 'all',
  appSources: { dirs: ['src'] },
})

Оба пакета — по имени, а не импортированными объектами: каждый отгружает свой granum.manifest.json, и granum читает его вместо скана dist. Ядро нужно в списке и само по себе: от него приезжают токены, база и темы.

// vite.config.ts — авто-импорт
import { GranularityResolver } from '@feugene/unplugin-granularity'

Components({ resolvers: GranularityResolver() })

Резолвер ядра (@feugene/unplugin-granularity >=1.1.0) находит пакет в package.json приложения сам; собственный GranularityChartsResolver() остаётся для уже написанных конфигов.

Локали подключаются вместе со словарём ядра:

import { en, GR_CHARTS_I18N_BLOCK, ru } from '@feugene/granularity-charts/i18n'

Вес гранулярного импорта

Числа не складываются: общий код посчитан в каждой строке заново, а платится один раз — поэтому набор компонентов и показан объединением, а не суммой. Это верхняя граница: gzip всего, что подпуть тянет из dist, а бандлер приложения трясёт дальше и минифицирует повторно.

Вес каждого компонента — docs/entry-sizes.md.

Доки

• docs/model.md — форма данных, шкалы, деления, что считается пропуском;
• docs/a11y.md — роли, объявления, скрытая таблица;
• docs/keyboard.md — карта клавиш, края ряда, различия типов графиков;
• docs/theming.md — токены пакета, палитра серий, различители помимо цвета;
• docs/ssr.md — первый рендер от объявленной ширины.

Границы

Без 3D, без географии (это карта) и без аннотаций. Приближение по абсциссе есть — проп zoom у GrChartLine и GrChartArea: протяжка, колесо и клавиатура (+/-, Shift+стрелки, 0), причём клавиатура не отключается. Порог SVG — около 2 000 точек на серию; canvas-путь за тем же API придёт позже.