# Дашборд сети магазинов из БД ClickHouse®


{% note warning %}

Часть ресурсов, необходимых для прохождения практического руководства, доступны только в [регионе Россия](../../overview/concepts/region.md).

{% endnote %}


{% note info %}

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

{% cut "Создать папку" %}

1. Перейдите на [главную страницу](https://datalens.ru/?skipPromo=true) DataLens.
1. На панели слева выберите ![](../../_assets/console-icons/folders.svg) **Все объекты** или ![](../../_assets/console-icons/folder-house.svg) **Личная папка**.
1. В правом верхнем углу нажмите **Создать** → **Папку**.
1. Введите название папки.
1. Нажмите кнопку **Создать**.

{% endcut %}

{% endnote %}

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

* Динамику продаж по дням и месяцам.
* Продажи по продуктовым категориям.
* Тепловую карту заказов.

В качестве источника будет использована демонстрационная база данных ClickHouse® с информацией о продажах товаров в сети московских магазинов.

Для визуализации и исследования данных [подготовьте DataLens к работе](#before-you-begin), затем выполните следующие шаги:

1. [Создайте воркбук](#create-workbook).
1. [Создайте подключение](#create-connection).
1. [Создайте датасет](#create-dataset).
1. [Создайте чарт — линейная диаграмма](#create-line-chart).
1. [Создайте чарт — столбчатая диаграмма](#create-column-chart).
1. [Создайте чарт — сводная таблица](#create-pivot-chart).
1. [Создайте чарт — тепловая карта](#create-heat-map-chart).
1. [Создайте дашборд и добавьте на него чарты](#create-dashboard).
1. [Добавьте селекторы на дашборд](#add-selectors).


## Перед началом работы {#before-you-begin}

Чтобы начать работать с DataLens:


{% list tabs group=datalens_user %}

- Новый пользователь {#new}

  1. [Войдите](https://passport.yandex.ru/auth) в ваш аккаунт на Яндексе. Если у вас еще нет аккаунта, [создайте](https://yandex.ru/support/passport/authorization/registration.html) его.
  1. Откройте [главную страницу](https://datalens.ru/promo) DataLens.
  1. Нажмите **Начать в облаке**.
  1. Подтвердите, что ознакомились с [Условиями использования](https://yandex.ru/legal/cloud_termsofuse/?lang=ru) и принимаете их и нажмите кнопку **Войти**.

- Уже использую Yandex Cloud {#already}

  1. [Войдите](https://passport.yandex.ru/auth) в ваш аккаунт на Яндексе.
  1. Откройте [главную страницу](https://datalens.ru/promo) DataLens.
  1. Нажмите **Начать в облаке**.
  1. Выберите один из вариантов:

     * Если у вас уже есть организация, выберите ее в выпадающем меню на вкладке **Организации** и нажмите **DataLens**.

       {% note info %}

       Для активации экземпляра DataLens пользователю нужна роль `admin` или `owner`. Подробнее про роли смотрите в разделе [Управление доступом в Yandex Identity Hub](../../organization/security/index.md).

       {% endnote %}

     * Если у вас есть облако, но нет организации, нажмите **Добавить новый DataLens**. В открывшемся окне введите название и описание организации и нажмите **Создать организацию и DataLens**. Подробнее о работе с организациями смотрите в разделе [Начало работы с организациями](../../organization/quickstart.md).

{% endlist %}

Если у вас возник технический вопрос по работе сервиса, обратитесь в [службу поддержки](https://kz.center.yandex.cloud/support) Yandex Cloud. Чтобы спросить совета, обсудить решение вашей задачи или лучшие практики работы сервиса, напишите в чат [DataLens](https://t.me/YandexDataLens) в Telegram.


## Создайте воркбук {#create-workbook}

1. Перейдите на [главную страницу](https://datalens.ru/?skipPromo=true) DataLens.
1. На панели слева выберите ![collections](../../_assets/console-icons/rectangles-4.svg) **Коллекции и воркбуки**.
1. В правом верхнем углу нажмите **Создать** → **Создать воркбук**.
1. Введите название [воркбука](../../datalens/workbooks-collections/index.md) — `Практические руководства`.
1. Нажмите кнопку **Создать**.

## Создайте подключение {#create-connection}

Для доступа к базе данных будет создано подключение **Sample ClickHouse**.

1. В правом верхнем углу воркбука нажмите **Создать** → ![image](../../_assets/console-icons/thunderbolt.svg) **Подключение**.



1. В разделе **Базы данных** выберите подключение **ClickHouse®**.

   1. В открывшемся окне выберите тип подключения `Указать вручную` и укажите параметры подключения:

   
      * Имя хоста — `rc1a-ckg8nrosr2lim5iz.mdb.yandexcloud.net`.
      * Порт HTTP-интерфейса — `8443` (по умолчанию).
      * Имя пользователя — `samples_ro`.
      * Пароль — `MsgfcjEhJk`.

   1. Включите опцию **SQL на чтение**.
   1. Нажмите кнопку **Проверить подключение** и убедитесь, что появился зеленый значок.
   1. Нажмите кнопку **Создать подключение**.
   1. Введите название подключения — `Sample ClickHouse`.
   1. Нажмите кнопку **Создать**.





Дождитесь сохранения подключения.

## Создайте датасет {#create-dataset}

Создайте [датасет](../../datalens/dataset/index.md) на базе подключения `Sample ClickHouse`:

1. На странице подключения в правом верхнем углу нажмите кнопку **Создать датасет**.
1. Перенесите на рабочую область таблицу `MS_SalesFacts`.

   ![image](../../_assets/datalens/solution-02/03-drag-table.png)

1. Перенесите на рабочую область таблицу `MS_Clients`. Таблицы автоматически свяжутся.

   ![image](../../_assets/datalens/solution-02/04-autolink1.png)

1. Для проверки связи нажмите значок связи между таблицами.

   ![image](../../_assets/datalens/solution-02/05-link-button.png)

1. Таблицы связаны по полю `ClientID`. При необходимости связь можно изменить или дополнить, указав еще одну пару полей. Для закрытия окна связей нажмите значок ![icon](../../_assets/console-icons/xmark.svg) или за пределы окна.

   ![image](../../_assets/datalens/solution-02/06-link-settings.png)

1. Перенесите на рабочую область таблицу `MS_Products`. Таблица автоматически свяжется с левой (корневой) таблицей `MS_SalesFacts`.

   ![image](../../_assets/datalens/solution-02/06-autolink2.png)

1. Перенесите на рабочую область таблицу `MS_Shops`. Таблица автоматически свяжется с левой (корневой) таблицей `MS_SalesFacts`.

   ![image](../../_assets/datalens/solution-02/07-autolink3.png)

1. Перейдите на вкладку **Поля**.
1. Удалите дубликаты полей, получившиеся в результате соединения таблиц: `ClientID (1)`, `ProductID (1)` и `ShopID (1)`. Для этого сначала отметьте их, а затем на панели под списком полей нажмите ![icon](../../_assets/console-icons/trash-bin.svg) **Удалить**.

   ![image](../../_assets/datalens/solution-02/09-delete-some-fields.png)

1. Создайте поле с датой заказа `OrderDate`:

   1. Продублируйте поле `OrderDatetime` — в правой части строки с полем нажмите ![image](../../_assets/console-icons/ellipsis.svg) и выберите **Дублировать**.
   1. Переименуйте дубликат поля `OrderDatetime (1)` в `OrderDate`: нажмите на имя поля, удалите текущее имя и введите новое.
   1. В столбце **Тип** измените тип данных с **Дата и время** на **Дата**.

   ![image](../../_assets/datalens/solution-02/10-rename-field-date-type-change.png)

1. Измените тип данных для полей:

   * `ShopDistrictCoordinates` — на **Геополигон**;
   * `DeliveryDistrictCoordinates` — на **Геополигон**;
   * `DeliveryAddressCoord` — на **Геоточка**.

1. Создайте показатель с суммой заказа: в столбце **Агрегация** для поля `Price` выберите **Сумма**. Поле с агрегацией поменяет цвет на синий: оно стало показателем.

   ![image](../../_assets/datalens/solution-02/13-choose-agg.png)

1. Создайте показатель с количеством заказов:

   1. Продублируйте поле `OrderID`.
   1. Переименуйте дубликат поля `OrderID (1)` в `OrderCount`.
   1. Измените тип агрегации на **Количество уникальных**.

1. Создайте вычисляемое поле для расчета средней суммы продаж на один заказ:

   1. В правом верхнем углу нажмите кнопку **Добавить поле**.
   1. Слева вверху укажите название поля — `Sales per Order`.
   1. Слева в колонке нажмите на поле `Price`.
   1. Введите символ `/`.
   1. Слева в колонке нажмите на поле `OrderCount`.
   1. Нажмите кнопку **Создать**.

   ![image](../../_assets/datalens/solution-02/16-formula.png)

1. Сохраните датасет:

   1. В правом верхнем углу нажмите кнопку **Сохранить**.
   1. Введите название датасета — `Moscow Sales dataset` и нажмите кнопку **Создать**.

## Создайте чарт — линейная диаграмма {#create-line-chart}

Для визуализации динамики продаж по месяцам создайте [чарт](../../datalens/concepts/chart/index.md) — [линейную диаграмму](../../datalens/visualization-ref/line-chart.md):

1. На странице датасета в правом верхнем углу нажмите кнопку **Создать чарт**.
1. Выберите тип визуализации **Линейная диаграмма**.

   ![image](../../_assets/datalens/solution-02/19-choose-line-chart.png)

1. Добавьте в чарт дату продажи. Для этого из раздела **Измерения** перетащите поле `OrderDate` в секцию **X**.
1. Добавьте в чарт показатель продаж. Для этого из раздела **Показатели** перетащите поле `Price` в секцию **Y**.
1. Добавьте в чарт тип доставки. Для этого из раздела **Измерения** перетащите поле `PaymentType` в секцию **Цвета**.

   ![image](../../_assets/datalens/solution-02/20-line-diagram1.png)

1. Отобразите чарт по месяцам:

   1. Нажмите на иконку с календарем у поля `OrderDate` в секции **X**.
   1. В поле **Группировка** выберите **Округление** ⟶ **Месяц**, затем нажмите **Применить**.

   ![image](../../_assets/datalens/solution-02/21-date-to-month.png)

1. Сохраните чарт:

   1. В правом верхнем углу нажмите кнопку **Сохранить**.
   1. В открывшемся окне введите название чарта `Динамика продаж по месяцам и типам оплаты` и нажмите кнопку **Сохранить**.

   ![image](../../_assets/datalens/solution-02/22-save-chart.png)

## Создайте чарт — столбчатая диаграмма {#create-column-chart}

Для визуализации продаж в разрезе брендов и продуктовых категорий создайте чарт — [столбчатую диаграмму](../../datalens/visualization-ref/column-chart.md).

1. Создайте копию чарта, созданного на предыдущем шаге:

   1. В правом верхнем углу нажмите значок ![save-button](../../_assets/console-icons/chevron-down.svg) → **Сохранить как копию**.

      ![image](../../_assets/datalens/solution-02/23-save-chart-as-copy.png)

   1. В открывшемся окне введите название нового чарта `Продажи по брендам и категориям` и нажмите кнопку **Сохранить**.

1. Выберите тип визуализации **Столбчатая диаграмма**.

   ![image](../../_assets/datalens/solution-02/24-choose-barchart.png)

1. Поля `OrderDate`, `Price` и `PaymentType` автоматически попадут в секции **X**, **Y** и **Цвета** соответственно.
1. Замените месяцы на бренды на оси X. Для этого из раздела **Измерения** перетащите поле `ProductBrand` в секцию **X** и наведите его над полем `OrderDate`, пока то не станет красным.
1. Замените типы оплаты на категории товаров в секции **Цвета** — из раздела **Измерения** перетащите поле `ProductCategory` в секцию **Цвета** и наведите его над полем `PaymentType`, пока то не станет красным.
1. Отсортируйте чарт по убыванию показателя продаж. Для этого из раздела **Показатели** перетащите поле `Price` в секцию **Сортировка**.
1. Сохраните чарт — в правом верхнем углу нажмите кнопку **Сохранить**.

   ![image](../../_assets/datalens/solution-02/27-column-chart.png)

## Создайте чарт — сводная таблица {#create-pivot-chart}

Для визуализации продаж в разрезе продуктов и времени создайте чарт — [сводную таблицу](../../datalens/visualization-ref/pivot-table-chart.md):

1. Создайте копию чарта, созданного на предыдущем шаге:

   1. В правом верхнем углу нажмите значок ![save-button](../../_assets/console-icons/chevron-down.svg) → **Сохранить как копию**.
   1. В открывшемся окне введите название нового чарта `Продажи в разрезе лет и продуктов` и нажмите кнопку **Сохранить**.

1. Выберите тип визуализации **Сводная таблица**.

   ![image](../../_assets/datalens/solution-02/28-choose-pivot.png)

1. Поля `ProductBrand` и `Price` автоматически попадут в секции **Столбцы** и **Показатели** соответственно.
1. Удалите `ProductBrand` из таблицы. Для этого в секции **Столбцы** напротив поля нажмите значок ![save-button](../../_assets/console-icons/xmark.svg) (значок появляется при наведении указателя на поле).
1. Добавьте дату заказа в таблицу. Для этого из раздела **Измерения** перетащите поле `OrderDate` в секцию **Столбцы**.
1. Измените формат отображения `OrderDate` на годы:

   1. Нажмите значок календаря у поля `OrderDate` в секции **Столбцы**.
   1. В поле **Группировка** выберите **Часть даты** ⟶ **Год**, затем нажмите **Применить**.

   ![image](../../_assets/datalens/solution-02/30-date-to-year.png)

1. Добавьте в таблицу категорию и подкатегорию продуктов. Для этого из раздела **Измерения** перетащите поля `ProductCategory` и `ProductSubcategory` в секцию **Строки**.
1. Измените цвет показателя продаж в таблице. Для этого из раздела **Показатели** перетащите поле `Price` в секцию **Цвета**.
1. В правом верхнем углу нажмите кнопку **Сохранить**.

   ![image](../../_assets/datalens/solution-02/32-pivot-chart.png)

## Создайте чарт — тепловая карта {#create-heat-map-chart}

Для визуализации плотности заказов на карте Москвы создайте чарт — [тепловую карту](../../datalens/visualization-ref/heat-map-chart.md).

1. Создайте копию чарта, созданного на предыдущем шаге:

   1. В правом верхнем углу нажмите значок ![save-button](../../_assets/console-icons/chevron-down.svg) → **Сохранить как копию**.
   1. В открывшемся окне введите название нового чарта `Тепловая карта продаж` и нажмите кнопку **Сохранить**.

1. Выберите тип визуализации **Карта**.

   ![image](../../_assets/datalens/solution-02/33-choose-heatmap.png)

1. Выберите тип слоя **Теплокарта (Геоточки)**.

   ![image](../../_assets/datalens/solution-02/33-choose-layer-heatmap.png)

1. Добавьте на карту координаты точек доставки. Для этого из раздела **Измерения** перетащите поле `DeliveryAddressCoord` в секцию **Теплокарта (Геоточки)**.
1. В правом верхнем углу нажмите кнопку **Сохранить**.

   ![image](../../_assets/datalens/solution-02/34-heatmap.png)

## Создайте дашборд и добавьте на него чарты {#create-dashboard}

Создайте [дашборд](../../datalens/concepts/dashboard.md), на который будут добавлены чарты и другие виджеты:

1. На панели слева выберите ![collections](../../_assets/console-icons/rectangles-4.svg) **Коллекции и воркбуки** и перейдите в воркбук `Практические руководства`.
1. В правом верхнем углу нажмите **Создать** → ![image](../../_assets/console-icons/layout-cells-large.svg) **Дашборд**.
1. На панели в нижней части страницы зажмите ![image](../../_assets/console-icons/chart-column.svg) **Чарт** и перетащите его в нужную область.

   ![image](../../_assets/datalens/solution-02/37-add-chart.png)

1. В открывшемся окне нажмите кнопку **Выбрать**.
1. Выберите чарт `Динамика продаж по месяцам и типам оплаты`.
1. Нажмите кнопку **Добавить**.

   ![image](../../_assets/datalens/solution-02/38-add-chart-window.png)

1. Повторите шаги 3-6, чтобы добавить чарты:

   * `Продажи по брендам и категориям`
   * `Продажи в разрезе лет и продуктов`
   * `Тепловая карта продаж`

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

   ![image](../../_assets/datalens/solution-02/39-dashboard1.png)

## Добавьте селекторы на дашборд {#add-selectors}

Добавьте [селекторы](../../datalens/dashboard/selector.md), чтобы фильтровать чарты по дате, районам Москвы, продуктам и статусам клиентов:

1. На панели в нижней части страницы зажмите ![image](../../_assets/console-icons/sliders.svg)  **Селектор** и перетащите его в нужную область.

   ![image](../../_assets/datalens/solution-02/40-add-selector.png)

1. Добавьте селектор с календарем по датам заказа:

   1. Выберите датасет `Moscow Sales dataset`.
   1. Выберите поле `OrderDate`.
   1. Включите опцию **Диапазон**.
   1. Нажмите кнопку **Сохранить**.

   ![image](../../_assets/datalens/solution-02/41-selector1.png)

1. Добавьте селектор по категории продуктов:

   1. Убедитесь, что выбран датасет `Moscow Sales dataset`.
   1. Выберите поле `ProductCategory`.
   1. Включите опцию **Множественный выбор**.
   1. Нажмите кнопку **Сохранить**.

1. Аналогичным способом добавьте селекторы по полям:

   * `ProductBrand`
   * `DeliveryDistrictName`
   * `DeliveryType`
   * `PaymentType`

1. Расположите селекторы на дашборде в удобном для вас порядке.
1. Сохраните дашборд:

   1. В правом верхнем углу дашборда нажмите кнопку **Сохранить**.
   1. Введите название дашборда `Moscow Shops dashboard` и нажмите кнопку **Создать**.

Дашборд готов.

![image](../../_assets/datalens/solution-02/44-dashboard3.png)

Применяя разные комбинации фильтров можно проанализировать, как менялись продажи товаров в различных разрезах. Например, проанализировать, как менялась динамика продаж с доставкой товаров по категориям `Бытовые товары` и `Техника для дома` в районе доставки `Измайлово` за период `01.01.2017 - 31.12.2018` и оценить плотность продаж на тепловой карте. Для этого задайте значения в селекторах:

* `OrderDate` — `01.01.2017 - 31.12.2018`;
* `ProductCategory` — `Бытовые товары` и `Техника для дома`;
* `DeliveryDistrictName` — `Измайлово`;
* `DeliveryType` — `Доставка`.

![image](../../_assets/datalens/solution-02/45-dashboard4.png)

_ClickHouse® является зарегистрированным товарным знаком [ClickHouse, Inc](https://clickhouse.com)._