> ## Documentation Index
> Fetch the complete documentation index at: https://iyree.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Плитка (Tile)

> График для отображения ключевых показателей (KPI)

<img src="https://mintcdn.com/iyree/FQ4T7mYKeF5sFfiR/assets/img/charts/tile/tile_example.png?fit=max&auto=format&n=FQ4T7mYKeF5sFfiR&q=85&s=b6ff4c211f08b313030484b7a69d0d94" width="300" alt="Пример Tile графика" data-path="assets/img/charts/tile/tile_example.png" />

График типа Tile предназначены для отображения ключевых показателей (KPI) — одиночных числовых значений с опциональными дополнениями.

***

### Поля

<ResponseField name="type" type="&#x22;tile&#x22;" required>
  Тип графика
</ResponseField>

<ResponseField name="main_measure" type="string" required>
  Имя меры из куба данных

  ```yaml Пример theme={null}
  main_measure: sales.total_revenue
  ```
</ResponseField>

<ResponseField name="compare_period_enabled" type="boolean" default="false">
  Включить сравнение с предыдущим периодом. При включении отображает разницу (абсолютную и процентную) между текущим и предыдущим периодом. Работает, только если у фильтра периода на странице задано compare\_period\_enabled: true.
</ResponseField>

<ResponseField name="compare_formatting_direction" type="enum" default="more_better">
  Определяет цветовое форматирование изменения значения при сравнении периодов.

  <Expandable title="Значения">
    | Значение      | Описание               | Рост       | Падение    |
    | ------------- | ---------------------- | ---------- | ---------- |
    | `more_better` | Больше — лучше         | 🟢 Зелёный | 🔴 Красный |
    | `less_better` | Меньше — лучше         | 🔴 Красный | 🟢 Зелёный |
    | `none`        | Без цветовой индикации | —          | —          |
  </Expandable>

  ```yaml Пример theme={null}
  compare_formatting_direction: more_better
  ```
</ResponseField>

<ResponseField name="data_point_actions_placement" type="enum">
  Определяет, где появляется меню действий при клике.

  <Expandable title="Значения">
    | Значение     | Описание                                |
    | ------------ | --------------------------------------- |
    | `data_point` | Меню появляется при клике на значение   |
    | `tile`       | Меню появляется при клике на всю плитку |
  </Expandable>
</ResponseField>

<ResponseField name="data_point_actions" type="DataPointActionDefinition[]">
  Список действий, доступных при клике на плитку.

  <Expandable title="Структура DataPointActionDefinition">
    <ResponseField name="id" type="string" required>
      Уникальный идентификатор действия (UUID)
    </ResponseField>

    <ResponseField name="key" type="string" required>
      Ключ действия в формате `namespace:action`

      | Ключ                                        | Описание                     |
      | ------------------------------------------- | ---------------------------- |
      | `common:copy_value`                         | Копировать значение          |
      | `common:view_raw_data`                      | Просмотр исходных данных     |
      | `link:open`                                 | Открыть ссылку               |
      | `dashboard:drill_through`                   | Переход на страницу дашборда |
      | `dashboard:another_dashboard_drill_through` | Переход на другой дашборд    |
    </ResponseField>

    <ResponseField name="title" type="string" required>
      Текст, отображаемый в меню
    </ResponseField>

    <ResponseField name="icon" type="IconReference">
      Иконка действия

      <Expandable title="Структура IconReference">
        <ResponseField name="library" type="string" required>
          Библиотека иконок. Поддерживается: `lucide`
        </ResponseField>

        <ResponseField name="name" type="string" required>
          Имя иконки (например: `arrow-up`, `trending-down`, `copy`)
        </ResponseField>

        <ResponseField name="color" type="RGBColor">
          Цвет иконки `[R, G, B]` (0-255)
        </ResponseField>
      </Expandable>
    </ResponseField>

    <ResponseField name="target_page_id" type="string">
      ID целевой страницы (для `dashboard:drill_through`)
    </ResponseField>

    <ResponseField name="target_dashboard_id" type="string">
      ID целевого дашборда (для `dashboard:another_dashboard_drill_through`)
    </ResponseField>

    <ResponseField name="filter_mappings" type="DrillThroughFilterMapping[]">
      Маппинг фильтров для drill-through

      <Expandable title="Структура DrillThroughFilterMapping">
        <ResponseField name="target_filter_id" type="string" required>
          ID фильтра на целевой странице
        </ResponseField>

        <ResponseField name="sources" type="FilterSource[]" required>
          Источники данных для фильтра

          <Expandable title="Типы источников">
            **source\_dashboard\_filter** — значение фильтра текущего дашборда:

            ```yaml Пример theme={null}
            type: source_dashboard_filter
            source_filter_id: "c3d4e5f6-7890-12cd-ef01-34567890abcd"
            ```

            **data\_point\_dimension** — значение измерения из точки клика:

            ```yaml Пример theme={null}
            type: data_point_dimension
            member_name: products.category
            ```

            **data\_point\_time\_dimension** — временное измерение:

            ```yaml Пример theme={null}
            type: data_point_time_dimension
            member_name: sales.created_at
            granularity: month
            ```
          </Expandable>
        </ResponseField>
      </Expandable>
    </ResponseField>

    <ResponseField name="url" type="string">
      URL для открытия (для `link:open`). Поддерживает подстановку `{cube.member}`.
    </ResponseField>

    <ResponseField name="open_in" type="enum">
      Где открывать ссылку: `same_tab` | `new_tab`
    </ResponseField>
  </Expandable>

  ```yaml Пример theme={null}
  data_point_actions:
    - id: "f47ac10b-58cc-4372-a567-0e02b2c3d479"
      key: "dashboard:drill_through"
      title: "Детализация продаж"
      target_page_id: "a1b2c3d4-5678-90ab-cdef-1234567890ab"
      filter_mappings:
        - target_filter_id: "b2c3d4e5-6789-01bc-def0-234567890abc"
          sources:
            - type: source_dashboard_filter
              source_filter_id: "c3d4e5f6-7890-12cd-ef01-34567890abcd"
  ```
</ResponseField>

<ResponseField name="trendline" type="TileTrendlineOptions">
  Настройки линии тренда (спарклайн) под основным значением.

  <Expandable title="Структура TileTrendlineOptions">
    <ResponseField name="color" type="string">
      HEX-цвет линии тренда

      ```yaml Пример theme={null}
      color: "#3B82F6"
      ```
    </ResponseField>

    <ResponseField name="time_dimension" type="TimeDimension" required>
      Временное измерение для построения тренда

      <Expandable title="Структура TimeDimension">
        <ResponseField name="dimension" type="string" required>
          Имя временного измерения из куба
        </ResponseField>

        <ResponseField name="granularity" type="enum" required>
          Гранулярность временного ряда

          | Значение  | Описание |
          | --------- | -------- |
          | `second`  | Секунды  |
          | `minute`  | Минуты   |
          | `hour`    | Часы     |
          | `day`     | Дни      |
          | `week`    | Недели   |
          | `month`   | Месяцы   |
          | `quarter` | Кварталы |
          | `year`    | Годы     |
        </ResponseField>
      </Expandable>

      ```yaml Пример theme={null}
      time_dimension:
        dimension: sales.created_at
        granularity: day
      ```
    </ResponseField>
  </Expandable>

  ```yaml Пример theme={null}
  trendline:
    color: "#3B82F6"
    time_dimension:
      dimension: sales.created_at
      granularity: day
  ```
</ResponseField>

### Примеры

<CodeGroup>
  ```yaml Простая плитка theme={null}
  type: tile
  main_measure: sales.total_revenue
  ```

  ```yaml Со сравнением периодов theme={null}
  type: tile
  main_measure: sales.total_revenue
  compare_period_enabled: true
  compare_formatting_direction: more_better
  ```

  ```yaml С линией тренда theme={null}
  type: tile
  main_measure: sales.total_revenue
  trendline:
    color: "#3B82F6"
    time_dimension:
      dimension: sales.created_at
      granularity: day
  ```

  ```yaml С действиями theme={null}
  type: tile
  main_measure: sales.total_revenue
  data_point_actions_placement: tile
  data_point_actions:
    - id: "d4e5f6a7-8901-23de-f012-456789abcdef"
      key: "dashboard:drill_through"
      title: "Детализация продаж"
      icon:
        library: lucide
        name: arrow-right
      target_page_id: "e5f6a7b8-9012-34ef-0123-56789abcdef0"
      filter_mappings:
        - target_filter_id: "f6a7b8c9-0123-45f0-1234-6789abcdef01"
          sources:
            - type: source_dashboard_filter
              source_filter_id: "a7b8c9d0-1234-56a1-2345-789abcdef012"
  ```
</CodeGroup>

***

## См. также

<CardGroup cols={2}>
  <Card title="Действия с данными" icon="mouse-pointer-click" href="../features/data-point-actions">
    Подробнее о Data Point Actions и drill-through
  </Card>

  <Card title="Измерения" icon="layer-group" href="../features/dimensions">
    Типы измерений и временные гранулярности
  </Card>
</CardGroup>

***

← [Обзор графиков](./index) | → [Таблицы](./table)