Чарт типа «Каскадная диаграмма»

В данной статье мы рассмотрим как создать чарт типа «Каскадная диаграмма» для визуализации выгруженных Экстрактором 1С данных.

Подробнее об Экстракторе 1С

Чарт «Каскадная диаграмма» (она же «Водопадная диаграмма», «waterfall chart» или просто «Водопад») в Yandex DataLens — это тип визуализации, который показывает последовательное изменение значения под влиянием различных факторов.

Примечание

Каскадную диаграмму на сегодняшний день можно создать только в режиме платной версии DataLens Editor.

Первым шагом является подготовка данных, в данном случае, используем простую google-таблицу с двумя показателями.

Затем достаточно дать публичный доступ по ссылке, скопировать ссылку и можно переходить к созданию датасета (при необходимости, в самом DataLens можно поменять тип данных).

Переходим к созданию чарта-диаграммы. Для начала копируем ID датасета (его Вы потом будете использовать в DataLens Editor).

И создаем чарт в Editor на базе датасета.

Теперь выбираем График (Gravity UI Charts).

Далее для настройки используется программный код, который мы не будем подробно разбирать в данной статье.

Но, если интересно, здесь Вы можете ознакомиться с полным кодом:
// Модуль "Meta"
{
    "links": {
        "kaskad": "//ID датасета//"
    }
}
Source
// Подключаем библиотеку
const {buildSource} = require('libs/dataset/v2');
 
//Формируем источник
module.exports = {
    'kaskadData': buildSource({
 
   //Из какого датасет брать данные    
   datasetId: Editor.getId('kaskad'),
        // Какие колонки
        columns: ['Month', 'Amount'],
    }),
};
 
 
// Модуль "Prepare"
//Подгружаем данные из датасета
const Dataset = require('libs/dataset/v2');
const loadedData = Editor.getLoadedData();
const data = Dataset.processData(loadedData, 'kaskadData', Editor);
console.log(data);
 
//Подключаем библиотеку по работе с датами
const { dateTimeParse } = require('@gravity-ui/date-utils');
 
//Сортируем колонку с датами по возрастанию
data.sort((a, b) => {
  const dateA = dateTimeParse(a.Month);
  const dateB = dateTimeParse(b.Month);
  return dateA - dateB;
});
console.log(data);
 
//Задаем красивое отображение дат для оси Х
const formattedDates = data.map(item => {
  const parsedDate = dateTimeParse(item.Month);
  return parsedDate.format('MMM YY');
});
 
console.log(formattedDates);
 
//Строим диаграмму
module.exports = {
    //Задаем поля и отступы
    chart: {
        margin: {
            left: 10,
            right: 10,
            top: 10,
            bottom: 10,
        }
    },
    series: {
 
        //Задаем тип графика и распределение данных по осям
        data: [
            {
                type: 'waterfall',
                data: data.map((item, index) => ({ y: item.Amount, x: index})),
                name: 'Разница',
                dataLabels: {enabled: true},
 
       
            },
        ],
    },
 
// Настраиваем подписи для оси Х    
xAxis: {
        type: 'category',
        categories: formattedDates,
    },
 
    // Прочие настройки графика
    yAxis: [
        {
            ticks: {
                pixelInterval: 120,
            },
        },
    ],
 
};

При необходимости можно проверить работу готовой диаграммы, для этого можно добавить новые значения в источник данных (в нашем случае, это Google-таблица) и обновить диаграмму. Диаграмма выглядит следующим образом:

Такая диаграмма будет автоматически обновляться при изменении данных в датасете. Каскадная диаграмма — это мощный инструмент для анализа и визуализации данных в реальном времени.