.. _widget_graphic_statistics:

Виджет «Графическая статистика»
===============================================

.. contents::
   :depth: 3

.. note::

    Доступно только в enterprise версии.

Ключ ``charts``

Виджет позволяет пользователям наглядно представлять и анализировать данные, повышая эффективность принятия решений и улучшая понимание текущего состояния бизнес-процессов.

.. image:: ../_static/widgets/chart_1.png
       :width: 600
       :align: center

.. image:: ../_static/widgets/chart_1_1.png
       :width: 600
       :align: center

При разработке использована библиотека `Chart.js <https://www.chartjs.org/docs/latest/>`_

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

Графики конфигурируемые - пользователи могут настраивать оси, масштабирование и т.д.

.. image:: ../_static/widgets/chart_2.png
       :width: 600
       :align: center

Для столбчатого, линейного, кругового тира по нажатию на пункт легенды данные пункта легенды убираются из представления графика:

.. image:: ../_static/widgets/chart_3.png
       :width: 600
       :align: center

Общая конфигурация
------------------

Для всех типов графиков:

.. image:: ../_static/widgets/chart_4.png
       :width: 700
       :align: center

.. list-table::
      :widths: 10 40
      :class: tight-table

      * - **Название виджета**
        - Укажите наименование представления.
      * - **Тип графика**
        - |  Выберите тип из списка:
          |  - Столбчатый
          |  - Круговой
          |  - Линейный
          |  - Воронка
      * - **Настройки журнала**
        -
      * - **Журнал**
        - |  Выберите журнал, по данным которого необходимо построить график.
          |  В выбранном журнале должны быть заранее настроены колонки для группировки. Действие доступно для администратора.

          | Для разрешения группировки перейдите в журнале к необходимому столбцу, нажмите **Дополнительно**:

              .. image:: ../_static/widgets/chart_sett_01.png
                     :width: 500
                     :align: center

          | Выставите чекбокс **Можно ли группировать**:

              .. image:: ../_static/widgets/chart_sett_02.png
                     :width: 500
                     :align: center

      * - **Шаблон журнала**
        - Выберите шаблон журнала.
      * - **Атрибуты группировки**
        - | **Группировка** -  операция объединения данных в группы таким образом, чтобы у элементов в каждой группе был общий атрибут.
          | Нажмите **"Добавить"** и выберите из списка атрибуты, по которым производить группировку данных.
          | В списке представлены атрибуты, у которых в настройках разрешена группировка.
      * - **Атрибут агрегации**
        - Выберите атрибут из представленых в списке, по которому возвращать сводные данные.

Столбчатый
~~~~~~~~~~

.. image:: ../_static/widgets/chart_8.png
       :width: 600
       :align: center

**Столбчатый график** — диаграмма, представленная прямоугольными зонами (столбцами), высоты или длины которых пропорциональны величинам, которые они отображают.

Настройка:

.. image:: ../_static/widgets/chart_5.png
       :width: 600
       :align: center

.. list-table::
      :widths: 10 40
      :name: Настройки столбчатого графика
      :class: tight-table

      * - **Минимальное вертикальное значение**
        - Минимальное значение, отображаемое на вертикальной шкале
      * - **Максимальное вертикальное значение**
        - Максимальное значение, отображаемое на вертикальной шкале
      * - **Соотношение сторон x/y**
        - Дробное. Масштабирования оси - отношение единицы X к единице Y. По умолчанию 2.

С помощью параметра **Соотношение сторон x/y** и подбора пропорций график можно выровнять по высоте. Примеры различных величин соотношений сторон:

.. list-table::
      :widths: 5 30
      :align: center

      * - **2:**
        - |

            .. image:: ../_static/widgets/chart_6.png
                  :width: 600
                  :align: center

      * - **4:**
        - |

            .. image:: ../_static/widgets/chart_7.png
                  :width: 600
                  :align: center

Линейный
~~~~~~~~

.. image:: ../_static/widgets/chart_10.png
       :width: 600
       :align: center

**Линейный график** позволяет размещать данные в виде точек на линии. Используется для того, чтобы отразить изменение показателей с течением времени, или же для сравнения двух наборов данных.

Настройка:

.. image:: ../_static/widgets/chart_9.png
       :width: 600
       :align: center

.. list-table::
      :widths: 10 40
      :name: Настройки линейного графика
      :class: tight-table

      * - **Минимальное вертикальное значение**
        - Минимальное значение, отображаемое на вертикальной шкале
      * - **Максимальное вертикальное значение**
        - Максимальное значение, отображаемое на вертикальной шкале
      * - **Соотношение сторон x/y**
        - Дробное. Масштабирования оси - отношение единицы X к единице Y. По умолчанию 2.
      * - **Растяжение**
        - Уровень плавности линии графика. По умолчанию 0.

Круговой
~~~~~~~~

.. image:: ../_static/widgets/chart_12.png
       :width: 300
       :align: center

**Круговой график** представляет данные в виде круга, разделенного на сектора. Каждый сектор — категория данных, которая составляет долю от общей суммы.

Настройка:

.. image:: ../_static/widgets/chart_11.png
       :width: 600
       :align: center

.. list-table::
      :widths: 10 40
      :name: Настройки кругового графика
      :class: tight-table
      :align: center

      * - **Радиус середины**
        - Радиус центрального круга, в процентах от радиуса основного. По умолчанию 50 %.

Воронка
~~~~~~~

.. image:: ../_static/widgets/chart_13.png
       :width: 300
       :align: center

**Воронка** используется для визуализации последовательных этапов процесса, где количество элементов уменьшается на каждом шаге. На каждом уровне указывается количество элементов и процент от общего количества.

При клике на любой из уровней графика открывается журнал со списком элементов, относящихся к признаку группировки.

Настройка:

.. image:: ../_static/widgets/chart_14.png
       :width: 600
       :align: center

.. list-table::
      :widths: 10 40
      :name: Настройки воронки
      :class: tight-table
      :align: center

      * - **Стадии воронки**
        - Выбор стадий и цветов отображения на воронке.

Для воронки доступны:

.. list-table::
      :widths: 20 20
      :align: center

      * - | Выбор ответственного с функцией поиска:

            .. image:: ../_static/widgets/chart_15.png
                  :width: 280
                  :align: center

        - | Выбор периода дат:

            .. image:: ../_static/widgets/chart_16.png
                  :width: 350
                  :align: center