Графики

Красивые графики. Построен с использованием Recharts. Скопируйте и вставьте в свои приложения.

Коллекция компонентов диаграммы, которые можно копировать и вставлять в свои приложения. Диаграммы созданы так, чтобы выглядеть великолепно сразу после установки. Они хорошо работают с другими компонентами и полностью настраиваются в соответствии с вашим проектом.

Обзор доступных возможностей можно найти на странице Charts.

Компонент

Рефлекс наматывает Recharts под капот. Это означает, что вы создаете свои собственные диаграммы, используя компоненты Recharts, и добавляете жетоны своей темы и пользовательские компоненты, такие как chart_tooltip, только тогда и там, где вам это нужно.

import reflex as rx

rx.recharts.area_chart(
    rx.recharts.cartesian_grid(),
    rx.recharts.x_axis(),
    rx.recharts.y_axis(),
    rx.recharts.area(),
    rx.recharts.area(),
    rx.recharts.tooltip(),
)

Мы не накручиваем речарты. Это означает, что вы не заперты в абстракции. Когда будет выпущена новая версия Recharts, вы сможете воспользоваться официальным путем обновления, чтобы обновить свои графики.

Установка

Buridan/ui предоставляет специальный chart_tooltip, который можно использовать для сопоставления с общими сгенерированными токенами темы.

Ваш первый график

Давайте построим вашу первую диаграмму. Мы построим гистограмму, добавим сетку, ось, подсказку и легенду.

Определение ваших данных

Следующие данные представляют количество пользователей настольных компьютеров и мобильных устройств за каждый месяц.

Примечание. Во всех наших примерах используются статические данные в определенной структуре данных. Вы не ограничены ни статическими данными, ни структурой. Для динамических данных вместо этого используйте rx.State.

data = [
    {"month": "Jan", "desktop": 186, "mobile": 80},
    {"month": "Feb", "desktop": 305, "mobile": 200},
    {"month": "Mar", "desktop": 237, "mobile": 120},
    {"month": "Apr", "desktop": 73, "mobile": 190},
    {"month": "May", "desktop": 209, "mobile": 130},
    {"month": "Jun", "desktop": 214, "mobile": 140},
]

Создайте свою диаграмму

Теперь вы можете построить свою диаграмму, используя компоненты Recharts.

Добавить сетку

Добавим сетку на диаграмму.

rx.recharts.cartesian_grid(
    horizontal=True, vertical=False, class_name="opacity-30"
)

Добавить ось

Чтобы добавить ось X на диаграмму, мы воспользуемся компонентом rx.recharts.x_axis().

rx.recharts.x_axis(
    data_key="month",
    axis_line=False,
    tick_size=10,
    tick_line=False,
    custom_attrs={"fontSize": "12px"},
    interval="preserveStartEnd",
)

Добавить подсказку

До сих пор мы использовали только компоненты от Recharts. Они отлично выглядят «из коробки» благодаря некоторой настройке компонента диаграммы.

Чтобы добавить всплывающую подсказку, мы будем использовать пользовательские компоненты chart_tooltip и chart_tooltip_content из диаграммы.

Примечание: небольшой комментарий относительно пользовательской подсказки. Из-за способа составления Recharts и способа его упаковки в Reflex настраиваемая всплывающая подсказка на данный момент работает только для диаграмм с областями, гистограммами и линейными диаграммами.

Чтобы использовать пользовательскую подсказку, сначала импортируйте ее в верхнюю часть файла диаграммы.

from components.charts.chart_tooltip import (
    chart_tooltip,
    chart_tooltip_content,
)

Добавьте компонент в диаграмму и передайте реквизиты.

rx.recharts.bar_chart(
    ...,
    chart_tooltip(),
    data=data,
    width="100%",
    height=250,
    class_name=chart_tooltip_content([1, 2], "square"),
)

Наведите курсор, чтобы увидеть подсказки. Легко, правда? Два компонента, и у нас есть красивая подсказка.

Добавить легенду

Мы сделаем то же самое с легендой. Хотя для легенд не существует API, который мы создали для всплывающих подсказок, по-прежнему применяется та же логика.

Добавьте компонент на диаграмму.

rx.el.div(
    rx.foreach(
        ["Desktop", "Mobile"],
        lambda device, index: rx.el.div(
            rx.el.div(
                class_name=f"h-3 w-3 rounded-sm bg-chart-{index + 1}"
            ),
            rx.el.p(device, class_name="text-xs text-foreground"),
            class_name="flex flex-row items-center gap-x-2",
        ),
    ),
    class_name="flex items-center gap-4 justify-center",
)

Готово. Вы построили свою первую диаграмму!

Тематика

Диаграммы имеют встроенную поддержку тем. Вы можете использовать переменные CSS (рекомендуется) или значения цвета в любом цветовом формате, например шестнадцатеричном, hsl или oklch.

CSS-переменные

Определите цвета в CSS-файле.

:root {
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
}

.dark {
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
}

hex, hsl или oklch

Вы также можете определить цвета непосредственно в компоненте диаграммы. Используйте тот цветовой формат, который вы предпочитаете.

rx.recharts.bar(data_key="mobile", fill="var(--chart-2)")
rx.recharts.bar(data_key="mobile", fill="#2563eb")
rx.recharts.bar(data_key="mobile", fill="oklch(0.5 0.2 240)")

Вы также можете включить цвета в свою структуру данных и использовать rx.foreach для более краткой базы кода.

data = [
    {"month": "Jan", "desktop": 186, "mobile": 80, "fill": "#2563eb"},
    {"month": "Feb", "desktop": 305, "mobile": 200, "fill": "oklch(0.5 0.2 240)"},
]

Подсказка

Подсказка диаграммы содержит метку и тип образца. Вы можете использовать их комбинацию для настройки всплывающей подсказки.

Display = Literal["show", "hide"]
Swatch = Literal["square", "line", "border"]

Вы можете включить/выключить любой из них с помощью реквизита display и настроить стиль индикатора с помощью реквизита swatch.

Реквизит

Используйте следующие реквизиты, чтобы настроить всплывающую подсказку.

chart_tooltip()

chart_tooltip_content()

chart_tooltip_content() возвращает строку классов Tailwind и должна быть передана в class_name компонента диаграммы, а не в chart_tooltip().