github-actions[bot]
001c2097a3
Created by Github action <!-- mintlify-editor-comments:start --> Mintlify --- 0 threads from 0 users in Mintlify - No unresolved comments <!-- mintlify-editor-comments:end --> <!-- mintlify-comment--> <a href="https://dashboard.mintlify.com/twenty/twenty/editor/i18n-docs?source=pr_comment" target="_blank" rel="noopener noreferrer"><picture><source media="(prefers-color-scheme: dark)" srcset="https://d3gk2c5xim1je2.cloudfront.net/assets/open-mintlify-editor-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://d3gk2c5xim1je2.cloudfront.net/assets/open-mintlify-editor-light.svg"><img src="https://d3gk2c5xim1je2.cloudfront.net/assets/open-mintlify-editor-light.svg" alt="Open in Mintlify Editor"></picture></a> <!-- /mintlify-comment --> Co-authored-by: github-actions <github-actions@twenty.com>
150 lines
6.7 KiB
Plaintext
150 lines
6.7 KiB
Plaintext
---
|
|
title: Виджеты
|
|
description: Изучите типы виджетов и варианты визуализации в Twenty.
|
|
---
|
|
|
|
import { ChartIcon } from '/snippets/chart-icon.mdx';
|
|
|
|
## Доступные виджеты
|
|
|
|
Twenty предоставляет различные типы виджетов для визуализации данных вашей CRM-системы.
|
|
|
|
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="chart-bar-popular" />Гистограммы</span>
|
|
|
|
Отображайте данные в виде горизонтальных или вертикальных столбцов.
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/dashboard/dashboard-widget-bar-chart.png" alt="Гистограмма" />
|
|
</Frame>
|
|
|
|
**Лучше всего подходит для:**
|
|
|
|
* Сравнение значений по категориям
|
|
* Отображение рейтингов
|
|
* Отслеживание метрик по периодам времени
|
|
|
|
**Примеры использования:**
|
|
|
|
* Сделки по этапам
|
|
* Выручка по менеджерам по продажам
|
|
* Контакты, добавленные по месяцам
|
|
|
|
<Note>
|
|
**Ограничения отображения**: Гистограммы могут отображать максимум 100 столбцов и 50 групп на столбец при использовании "Group By". Если вы видите предупреждение "Undisplayed data: max X bars per chart", добавьте фильтры, чтобы сузить данные, или измените группировку (например, группируйте по неделям вместо дней).
|
|
</Note>
|
|
|
|
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="chart-pie" />Круговые диаграммы</span>
|
|
|
|
Показывайте доли целого.
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/dashboard/dashboard-widget-pie-chart.png" alt="Круговая диаграмма" />
|
|
</Frame>
|
|
|
|
**Лучше всего подходит для:**
|
|
|
|
* Отражение состава или распределения
|
|
* Сравнение частей с целым
|
|
* Выделение ключевых сегментов
|
|
|
|
**Примеры использования:**
|
|
|
|
* Распределение сделок по источникам
|
|
* Разбивка контактов по отраслям
|
|
* Состав воронки по ответственным
|
|
|
|
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="chart-line" />Линейные диаграммы</span>
|
|
|
|
Отображайте динамику во времени.
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/dashboard/dashboard-widget-line-chart.png" alt="Линейная диаграмма" />
|
|
</Frame>
|
|
|
|
**Лучше всего подходит для:**
|
|
|
|
* Отслеживание изменений во времени
|
|
* Определение тенденций
|
|
* Сравнение нескольких метрик
|
|
|
|
**Примеры использования:**
|
|
|
|
* Динамика количества сделок по месяцам
|
|
* Рост выручки по кварталам
|
|
* Динамика уровня активности
|
|
|
|
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="sum" />Сводные диаграммы</span>
|
|
|
|
Наглядно отображайте отдельные ключевые значения.
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/dashboard/dashboard-widget-aggregate-chart.png" alt="Сводная диаграмма" />
|
|
</Frame>
|
|
|
|
**Лучше всего подходит для:**
|
|
|
|
* Выделение KPI
|
|
* Показ итогов или средних значений
|
|
* Быстрые проверки статуса
|
|
|
|
**Примеры использования:**
|
|
|
|
* Общий объем воронки
|
|
* Число открытых сделок
|
|
* Коэффициент конверсии
|
|
|
|
**Расширенные параметры:**
|
|
|
|
* **Ratio**: Для полей типа Select вычисляйте соотношения между значениями. Перейдите в **Отображаемые данные** → выберите поле → включите параметр **Ratio**.
|
|
* **Префикс и суффикс**: Добавляйте произвольный текст до или после числа (например, префикс "$" или суффикс "%") для лучшей читаемости.
|
|
|
|
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="frame" />iFrames</span>
|
|
|
|
Встраивайте внешние инструменты и контент прямо в ваш дашборд.
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/dashboard/dashboard-widget-iframe.png" alt="iFrame" />
|
|
</Frame>
|
|
|
|
**Лучше всего подходит для:**
|
|
|
|
* Отображение внешних отчетов или дашбордов
|
|
* Интеграция сторонних инструментов продаж
|
|
* Отображение данных в реальном времени из других систем
|
|
|
|
**Примеры использования:**
|
|
|
|
* Метрики из вашего сервиса поддержки
|
|
* Метрики из вашей системы обзвона
|
|
* Контент в реальном времени из вашего инструмента последовательностей продаж
|
|
|
|
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="align-box-left-top" />Форматированный текст</span>
|
|
|
|
Добавляйте форматированный текст и контент прямо в ваш дашборд.
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/dashboard/dashboard-widget-rich-text.png" alt="Форматированный текст" />
|
|
</Frame>
|
|
|
|
**Лучше всего подходит для:**
|
|
|
|
* Добавление контекста или инструкций
|
|
* Описания дашборда
|
|
* Заметки и аннотации
|
|
|
|
**Возможности:**
|
|
|
|
* Форматирование текста (полужирный, курсив, списки и т. д.)
|
|
* Загрузка изображений и файлов
|
|
* Редактирование в стиле Markdown
|
|
|
|
<Note>
|
|
**Скоро**: Индикаторные диаграммы и таблицы пока недоступны, но есть в нашей дорожной карте.
|
|
</Note>
|
|
|
|
### Дублирование виджетов
|
|
|
|
1. Нажмите на виджет
|
|
2. Откройте **Параметры**
|
|
3. Нажмите **Дублировать виджет**
|