| Предыдущая версия справа и слева Предыдущая версия Следующая версия | Предыдущая версия |
| product:dashboard:editor [17.06.2019 13:56] – mayn | product:dashboard:editor [19.02.2025 06:59] (текущий) – ekaterina.menkhuzina |
|---|
| ====== Редактор дашбордов ======= | ====== Редактор дашбордов ======= |
| |
| Перед редактированием необходимо [[product/dashboard/resource|настроить источник данных]] для дашборда. | <callout type="warning">Перед редактированием необходимо [[product/dashboard/resource|настроить источник данных]] для дашборда. </callout> |
| |
| Вы можете создать любое количество виджетов в окне одного дашборда. | Вы можете: |
| | * создать любое количество [[product:dashboard:components|виджетов]] в окне одного дашборда, |
| | * объединять виджеты в группы, |
| | * настраивать фильтрацию отдельным виджетом {{:product:dashboard:widget_17.png?nolink|}} / {{:product:dashboard:widget_18.png?nolink|}} / {{:product:dashboard:widget_19.png?nolink|}} / {{:product:dashboard:widget_20.png?nolink|}} или с помощью [[product/dashboard/editor/interactivity|"Интерактивности"]] {{:product:dashboard:dashboard_manage_3.png?nolink|}}, |
| | * выводить данные в виджете только по части данных ("Скрытое измерение"), |
| | * настраивать условное форматирование почти по любым признакам, |
| | * сортировать данные по любому полю (с помощью "Скрытой меры"), |
| | * и многое другое. |
| |
| Дашборд может состоять из: | <callout type="success">Дашборды -- это целый космос для аналитика.</callout> |
| * Общих компонентов -- таблица, сводная таблица, график, диаграмма, древовидная диаграмма, точечная диаграмма, карточка, индикатор, текст, картинка, привязанное изображение, группа; | |
| * Карт -- точечная картограмма, фоновая картограмма, пузырьковая картограмма, диаграммная картограмма; | |
| * Фильтров -- фильтр диапазона, раскрывающийся список, список, дерево выбора. | |
| |
| Действия, которые можно осуществлять с виджетами: | {{ :product:dashboard:dashboard_1.mp4?950x400 |}} |
| |
| {{:product:dashboard:dashboard_manage_1.png?nolink|}} Перемещение виджета по окну дашборда. | {{:product:dashboard:dashboard_manage_2.png?nolink|}} Свяжите выбранный тип отображения с источником данных, нажмите на значок настроек. |
| |
| {{:product:dashboard:dashboard_manage_2.png?nolink|}} Настройка данных, на основе которых будет построен виджет. | Добавляйте и перемещайте по полю виджеты относительно друг друга: |
| | {{ :product:dashboard:dashboard_2.mp4?950x400 |}} |
| |
| {{:product:dashboard:dashboard_manage_3.png?nolink|}} Настройка интерактивности виджета. | **Что можно делать с виджетами:** |
| |
| {{:product:dashboard:dashboard_manage_4.png?nolink|}} Настройка опций виджета. | {{:product:dashboard:dashboard_manage_1.png?nolink|}} Перемещение виджета по окну дашборда. |
| |
| {{:product:dashboard:dashboard_manage_5.png?nolink|}} Преобразование в другой тип виджета. | {{:product:dashboard:dashboard_manage_2.png?nolink|}} Настройка данных, на основе которых будет построен виджет. |
| |
| {{:product:dashboard:dashboard_manage_6.png?nolink|}} Удаление виджета. | {{:product:dashboard:dashboard_manage_3.png?nolink|}} Настройка [[product/dashboard/editor/interactivity|интерактивности]] виджета -- фильтрация по клику на область виджета остальных данных на странице дашборда. |
| |
| =====Общие компоненты===== | {{:product:dashboard:dashboard_manage_4.png?nolink|}} Настройка визуальных опций виджета. |
| |
| {{:product:dashboard:widget_1.png?nolink}} <btn collapse="1_table" type="link" icon="fa fa-arrow-right">1. Таблица</btn> | {{:product:dashboard:dashboard_manage_5.png?nolink|}} Преобразование в другой тип виджета. |
| <collapse collapsed="true" id="1_table"> | |
| |
| Способ структурирования данных. Предназначена для распределения данных по однотипным строкам и столбцам. | {{:product:dashboard:dashboard_manage_6.png?nolink|}} Удаление виджета. |
| | <invisible> |
| <image shape="thumbnail">{{ :product:dashboard:dashboard_editor_1.png?nolink |}}</image> | . |
| <TEXT align="center">**Рисунок 1** -- Таблица</text> | </invisible> |
| | |
| В «Данных» таблицы вы можете настроить: | |
| * колонки, которые вы хотите видеть на экране. Каждую колонку можно представить в виде измерения, меры, разности или спарклайна (для него необходимо отдельно задать аргумент); <callout type="info">Спарклайн – это небольшая диаграмма, помещенная в одну ячейку.</callout> | |
| * добавить скрытые измерения, которые вы не хотите выводить на табло виджета; | |
| * добавить скрытые меры - аналогично скрытым измерениям; | |
| * настроить аргументы фильтра, чтобы данные выводились в соответствии с заданными условиями. | |
| | |
| К колонкам значения привязываются автоматически. | |
| </collapse> | |
| | |
| {{:product:dashboard:widget_2.png?nolink}} <btn collapse="2_table" type="link" icon="fa fa-arrow-right">2. Сводная Таблица</btn> | |
| <collapse collapsed="true" id="2_table"> | |
| | |
| Сводная таблица нужна для суммирования, анализа и представления данных из «больших» исходных таблиц. | |
| | |
| <image shape="thumbnail">{{ :product:dashboard:dashboard_editor_2.png?nolink |}}</image> | |
| <TEXT align="center">**Рисунок 2** -- Сводная таблица</text> | |
| | |
| В «Данных» сводной таблицы вы можете настроить аналогичные параметры, что и в обычной таблице. | |
| | |
| В сводной таблице, в отличие от простой, значения колонок необходимо задать вручную (через привязку). | |
| </collapse> | |
| | |
| {{:product:dashboard:widget_3.png?nolink}} <btn collapse="3_graf" type="link" icon="fa fa-arrow-right">3. График</btn> | |
| <collapse collapsed="true" id="3_graf"> | |
| | |
| График - наглядное и удобное для анализа представление табличных данных. Выберите нужный Вам тип графика из предложенных в редакторе. | |
| | |
| <image shape="thumbnail">{{ :product:dashboard:dashboard_editor_3.png?nolink |}}</image> | |
| <TEXT align="center">**Рисунок 3** -- График</text> | |
| | |
| Создание графика: | |
| - задайте аргументы; | |
| - привяжите значения к выбранным аргументам, выберите тип для каждого значения; | |
| - добавьте серии рядов, чтобы мгновенно переключаться между различными параметрами диаграммы; | |
| - добавьте скрытые измерения и меры, если это необходимо. | |
| | |
| **Особенность:** Чтобы переключаться между рядами графика, вы можете создать несколько серий, которые имеют привязку к различным значениям. | |
| </collapse> | |
| | |
| {{:product:dashboard:widget_4.png?nolink}} <btn collapse="4_tree" type="link" icon="fa fa-arrow-right">4. Древовидная диаграмма</btn> | |
| <collapse collapsed="true" id="4_tree"> | |
| Древовидная диаграмма применяется для выявления и показа связи между предметом (проблемой) рассмотрения и его компонентами. | |
| | |
| <image shape="thumbnail">{{ :product:dashboard:dashboard_editor_4.png?nolink |}}</image> | |
| <TEXT align="center">**Рисунок 4** -- Древовидная диаграмма</text> | |
| | |
| Создание древовидной диаграммы: | |
| - задайте аргументы; | |
| - привяжите значения к выбранным аргументам, выберите формат (тип, единицы измерения, точность), выполните вычисления во вкладке CALCULATIONS; | |
| - добавьте скрытые измерения и меры, если это необходимо. | |
| </collapse> | |
| | |
| {{:product:dashboard:widget_5.png?nolink}} <btn collapse="5_diagram" type="link" icon="fa fa-arrow-right">5. Диаграмма</btn> | |
| <collapse collapsed="true" id="5_diagram"> | |
| Диаграмма предназначена для сегментирования данных. Её удобно использовать, когда нужно показать долю каждой величины в общем объёме. | |
| | |
| <image shape="thumbnail">{{ :product:dashboard:dashboard_editor_5.png?nolink |}}</image> | |
| <TEXT align="center">**Рисунок 5** -- Диаграмма</text> | |
| | |
| Создание диаграммы: | |
| - задайте аргументы; | |
| - привяжите значения к выбранным аргументам, сформируйте данные (порядок сортировки, опции раскраски); | |
| - добавьте серии рядов, чтобы мгновенно переключаться между различными параметрами диаграммы; | |
| - добавьте скрытые измерения и меры, если это необходимо. | |
| </collapse> | |
| | |
| {{:product:dashboard:widget_6.png?nolink}} <btn collapse="6_diagram" type="link" icon="fa fa-arrow-right">6. Точечная диаграмма</btn> | |
| <collapse collapsed="true" id="6_diagram"> | |
| Точечная диаграмма используется для сравнения двух независимых переменных. Позволяет визуально увидеть разброс значений. В отличие от графика на точечной диаграмме можно представлять данные, для которых интервалы времени имеют разную величину. | |
| | |
| <image shape="thumbnail">{{ :product:dashboard:dashboard_editor_6.png?nolink |}}</image> | |
| <TEXT align="center">**Рисунок 6** -- Точечная диаграмма</text> | |
| | |
| Создание точечной диаграммы: | |
| - задайте аргументы; | |
| - привяжите значения к выбранным аргументам, сформируйте данные (способ вычисления значений ячеек); | |
| - задайте вес величин, если это необходимо; | |
| - добавьте скрытые измерения и меры, если это необходимо. | |
| </collapse> | |
| | |
| {{:product:dashboard:widget_7.png?nolink}} <btn collapse="7_card" type="link" icon="fa fa-arrow-right">7. Карточки</btn> | |
| | |
| <collapse collapsed="true" id="7_card"> | |
| Каждая карта иллюстрирует разницу между двумя значениями. Эта разница может быть выражена как абсолютная величина, абсолютная вариация или процентное изменение. | |
| | |
| <image shape="thumbnail">{{ :product:dashboard:dashboard_editor_7.png?nolink |}}</image> | |
| <TEXT align="center">**Рисунок 7** -- Карточки</text> | |
| | |
| Создание карточек: | |
| - добавьте карточку; | |
| - привяжите к ней значения одного из столбцов таблицы; | |
| - добавьте серии рядов, чтобы мгновенно переключаться между различными параметрами карточек; | |
| - добавьте скрытые измерения и меры, если это необходимо. | |
| </collapse> | |
| | |
| {{:product:dashboard:widget_8.png?nolink}} <btn collapse="8_indicator" type="link" icon="fa fa-arrow-right">8. Индикаторы</btn> | |
| <collapse collapsed="true" id="8_indicator"> | |
| Индикаторы – хорошие аналитические инструменты. Отображая ситуацию они помогают понять поведение тренда в конкретный момент времени и найти решение той или иной проблемы. | |
| | |
| <callout type="info">Индикаторы используются для отображения значения одной меры, без измерений.</callout> | |
| | |
| <image shape="thumbnail">{{ :product:dashboard:dashboard_editor_8.png?nolink |}}</image> | |
| <TEXT align="center">**Рисунок 8** -- Индикаторы</text> | |
| | |
| Создание индикаторов: | |
| - добавьте индикатор; | |
| - привяжите к нему значения одного из столбцов таблицы; | |
| - добавьте серии рядов, чтобы мгновенно переключаться между различными параметрами индикаторов; | |
| - добавьте скрытые измерения и меры, если это необходимо. | |
| </collapse> | |
| | |
| {{:product:dashboard:widget_9.png?nolink}} <btn collapse="9_text" type="link" icon="fa fa-arrow-right">9. Текст</btn> | |
| <collapse collapsed="true" id="9_text"> | |
| Текст может привлечь внимание к наиболее важным показателям и пояснить содержание дашборда. | |
| | |
| <image shape="thumbnail">{{ :product:dashboard:dashboard_editor_9.png?nolink |}}</image> | |
| <TEXT align="center">**Рисунок 9** -- Текст</text> | |
| | |
| Создание текстовых заметок: | |
| - в опциях текста напишите заголовок; | |
| - заполните поле «Текст» вручную или загрузите файл со своего компьютера. | |
| | |
| <callout type="info">Поддерживаются файлы только в формате RTF.</callout> | |
| </collapse> | |
| | |
| {{:product:dashboard:widget_10.png?nolink}} <btn collapse="10_img" type="link" icon="fa fa-arrow-right">10. Картинка</btn> | |
| <collapse collapsed="true" id="10_img"> | |
| Картинка аналогично тексту поможет привлечь внимание и пояснить содержание дашборда. | |
| | |
| <image shape="thumbnail">{{ :product:dashboard:dashboard_editor_10.png?nolink |}}</image> | |
| <TEXT align="center">**Рисунок 10** -- Картинка</text> | |
| | |
| Создание картинки: | |
| - вставьте URL картинки; <callout type="primary">Картинка должна быть в формате png.</callout> | |
| - напишите заголовок или вообще скройте его отображение; | |
| - задайте нужное выравнивание по горизонтали и по вертикали; | |
| - измените размер изображения. | |
| </collapse> | |
| | |
| {{:product:dashboard:widget_11.png?nolink}} <btn collapse="11_img" type="link" icon="fa fa-arrow-right">11. Привязанное изображение</btn> | |
| <collapse collapsed="true" id="11_img"> | |
| Отличается от картинки тем, что здесь можно задать атрибуты и привязать к ним значения. | |
| </collapse> | |
| | |
| {{:product:dashboard:widget_12.png?nolink}} <btn collapse="12_group" type="link" icon="fa fa-arrow-right">12. Группа</btn> | |
| <collapse collapsed="true" id="12_group"> | |
| | |
| Позволяет поместить несколько виджетов в одну область дашборда для более удобной визуализации. | |
| | |
| <image shape="thumbnail">{{ :product:dashboard:dashboard_editor_11.png?nolink |}}</image> | |
| <TEXT align="center">**Рисунок 11** -- Группа</text> | |
| | |
| Создание группы: | |
| - создайте элемент группа; | |
| - перетащите в его область уже существующие виджеты или создайте новые. | |
| | |
| </collapse> | |