v0.4.0: 41 SVG-график без зависимостей, 24 новые секции и более 290 блоков

Графики, сделанные правильно

Вышел astro-component-kit 0.4.0, и этот релиз посвящён визуализации данных. Мы добавили 41 новый компонент графиков и статистики, и теперь в категории «Графики и статистика» 47 компонентов. Вместе с 24 новыми секциями в библиотеке уже более 290 компонентов и секций.

Все новые графики — это чистый SVG, который рендерится на этапе сборки. Это значит:

• Ноль зависимостей. Никаких Chart.js, D3 или ApexCharts: Astro вычисляет разметку и отдаёт её как статический HTML.
• Мгновенная отрисовка. График уже есть на странице при загрузке — без сдвигов макета и без клиентских бандлов.
• Доступность из коробки. У каждого графика есть легенда, фокусируемые с клавиатуры элементы с подсказками и таблица «Данные», чтобы пользователи скринридеров получали реальные цифры.
• Гибкая тема. Цвета берутся из токенов --chart-1…8, --chart-pos и --chart-neg в global.css: меняете палитру в одном месте — обновляются все графики.

---

41 новый график

📈 Динамика во времени

• Line Chart — Несколько серий с плавной, линейной или ступенчатой кривой и опциональной заливкой.
• Stacked Area Chart — Накопительные серии, показывающие вклад каждой части в итог.
• Range Area Chart — Полосы минимума и максимума вокруг центрального значения.
• Forecast Line Chart — Факт плюс пунктирный прогноз с доверительным интервалом.
• Slope Chart — Сравнение «до/после» между двумя моментами.
• Bump Chart — Изменение позиций в рейтинге по периодам.
• Sparkline Chart — Компактный тренд для таблиц и KPI-карточек.
• Candlestick Chart — Финансовые свечи: открытие, максимум, минимум, закрытие.

📊 Сравнение значений

• Grouped Bar Chart, Stacked Bar Chart и Horizontal Bar Chart — сравнение рядом и долей от целого.
• Diverging Bar Chart — Положительные и отрицательные значения относительно нуля.
• Waterfall Chart — Как начальное значение шаг за шагом превращается в итоговое.
• Histogram Chart — Распределение значений по интервалам.
• Lollipop Chart и Dumbbell Chart — Лёгкая альтернатива столбцам и разница между двумя значениями.
• Bullet Chart — Факт против цели на фоне качественных диапазонов.
• Population Pyramid — Два зеркальных распределения.

🥧 Части целого

• Pie Chart (круговая или кольцевая), Waffle Chart и Segmented Bar Chart.
• Treemap Chart и Sunburst Chart для иерархий.
• Funnel Chart — Шаги конверсии с долей отвала.
• Radial Bar Chart и Polar Area Chart.

🔬 Распределения и связи

• Scatter Plot с опциональной линией регрессии и R², а также Bubble Chart.
• Box Plot Chart — Медиана, квартили и выбросы.
• Heatmap Chart и Punch Card Chart — Интенсивность по двум измерениям.
• Radar Chart — Сравнение профилей по нескольким осям.
• Sankey Chart — Потоки между этапами.

🎯 KPI и прогресс

• KPI Stat Tile и KPI Trend Grid — Ключевые цифры с изменением и спарклайном.
• Gauge Chart, Meter Gauge и Goal Progress Chart.
• Activity Rings — Концентрические кольца прогресса.
• Retention Cohort Table и Metric Delta Table — Таблицы данных со встроенной цветовой шкалой и изменениями.

Все графики используют общий Chart Frame для заголовка, легенды, подсказок и таблицы данных и поддерживают варианты glass, solid и ghost в размерах sm, md и lg.

---
import 'astro-component-kit/global.css';
import { LineChart, KpiStatTile } from 'astro-component-kit/charts';
---

<KpiStatTile label="Выручка" value="48,2 тыс. $" change={24} period="к прошлому месяцу" />
<LineChart
  title="Активные пользователи за месяц"
  categories={['Янв', 'Фев', 'Мар', 'Апр']}
  series={[{ name: 'Web', data: [120, 180, 160, 240] }]}
/>

---

24 новые секции лендингов

Библиотека секций выросла до 41 готовой секции, и некоторые из них построены на новых графиках:

• Hero: Minimal Centered, Terminal, Waitlist и Dashboard Preview.
• Возможности: Icon Grid, Alternating Rows, Tabs Showcase, How It Works и Integrations Grid.
• Тарифы и отзывы: Pricing Toggle Cards, Single Plan, Testimonial Carousel, Featured Testimonial и Logo Wall.
• Данные: Stats Counter Band и Stats Dashboard.
• Конверсия и контент: Newsletter CTA, Split Image CTA, Careers, FAQ в две колонки, Контакты с картой, Blog Grid, Changelog и Mega Footer.

---

Обновление

npm install astro-component-kit@0.4.0

Релиз обратно совместим: существующие импорты продолжают работать, а новые компоненты доступны из astro-component-kit/charts, astro-component-kit/sections или корневой точки входа.

Смотрите всё на страницах Графики и статистика и Секции и расскажите нам на GitHub, что хотите увидеть дальше.