Сравнение данных в разные периоды времени

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

Аналитические системы, такие как Google Analytics, YouTube Studio и другие, предоставляют инструменты для сравнения одной метрики в течение разных периодов времени.

Посмотрим, как вы можете реализовать такую аналитическую визуализацию с помощью cube.js.

Здесь Вы можете увидеть живую демонстрацию и полную исходный код Для этого примера.

Мы рассмотрим пример набора данных электронной коммерции и сравним количество заказов в три самых последних года. Для этого нам нужно запустить сервер Cube.js и простое приложение для приборной панели.

Если вы еще не знакомы с Cube.js, пожалуйста, следуйте нашему Руководство Для настройки базы данных запустите сервер Cube.js и получение информации о схемах данных и аналитических кубиках.

Теперь давайте создадим Заказы куб внутри схема Папка со следующим кодом:

cube(`Orders`, {
  sql: `SELECT * FROM public.orders`,

  measures: {
    count: {
      type: `count`,
    },
  },

  dimensions: {
    id: {
      sql: `id`,
      type: `number`,
      primaryKey: true,
    },
    createdAt: {
      sql: `created_at`,
      type: `time`,
    },
  },
});

Здесь счет Мера используется для расчета количества заказов. Создан Поле используется для извлечения временной метки заказа.

В следующих разделах мы будем реализовать пример с React, но вы можете использовать тот же подход с Vue, Angular и Vanilla JS.

Несколько запросов на одну диаграмму

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

import React, { useState, useEffect } from 'react';
import { useCubeQuery } from '@cubejs-client/react';
import * as moment from 'moment';

import Line from './Line';

export default () => {
  const [data, setData] = useState([]);

  const { resultSet: result22 } = useCubeQuery({
    measures: ['Orders.count'],
    timeDimensions: [
      {
        dimension: 'Orders.createdAt',
        dateRange: ['2022-01-01', '2022-12-31'],
        granularity: 'month',
      },
    ],
  });

  const { resultSet: result21 } = useCubeQuery({
    measures: ['Orders.count'],
    timeDimensions: [
      {
        dimension: 'Orders.createdAt',
        dateRange: ['2021-01-01', '2021-12-31'],
        granularity: 'month',
      },
    ],
  });

  const { resultSet: result20 } = useCubeQuery({
    measures: ['Orders.count'],
    timeDimensions: [
      {
        dimension: 'Orders.createdAt',
        dateRange: ['2020-01-01', '2020-12-31'],
        granularity: 'month',
      },
    ],
  });

  useEffect(() => {
    const parseResultSet = (resultSet) => {
      return {
        name: moment(
          resultSet.tablePivot()[0]['Orders.createdAt.month']
        ).format('YYYY'),
        data: resultSet
          .tablePivot()
          .map((item) => parseInt(item['Orders.count'])),
      };
    };

    const temp = [
      result22 ? parseResultSet(result22) : [],
      result21 ? parseResultSet(result21) : [],
      result20 ? parseResultSet(result20) : [],
    ];

    setData(temp);
  }, [result22, result21, result20]);

  return ;
};

Как только данные будут подготовлены, мы отправляем их в рендеринг компонент и, вот, мы создаем информативную диаграмму:

Процедура довольно проста, не так ли? Однако, как вы можете видеть, код немного грязный и повторяющийся. Что еще более важно, нелегко адаптировать код к другому количеству лет или даже динамически настроить его в ответ на действия пользователей или состояния приложения.

Как решить эту проблему? Давайте попробуем другой подход.

Один запрос на одну диаграмму

С выпуском 0,20.0 Cube.js можно получить данные в течение разных периодов времени, используя один запрос.

сравниваемая сторона Собственность принимает массив из двух или более разных периодов времени и возвращает данные для всех из них в одном запросе.

Мы можем переписать наш предыдущий код проще:

import React, { useState, useEffect } from 'react';
import { useCubeQuery } from '@cubejs-client/react';

import Line from './Line';

export default () => {
  const [data, setData] = useState([]);

  const { resultSet: result } = useCubeQuery({
    measures: ['Orders.count'],
    timeDimensions: [
      {
        dimension: 'Orders.createdAt',
        compareDateRange: [
          ['2022-01-01', '2022-12-31'],
          ['2021-01-01', '2021-12-31'],
          ['2020-01-01', '2020-12-31'],
        ],
        granularity: 'month',
      },
    ],
  });

  useEffect(() => {
    if (result) {
      const temp = result.series().map((data) => {
        return {
          name: data.key.substring(0, 4),
          data: data.series.map((item) => item.value),
        };
      });
      setData(temp);
    }
  }, [result]);

  return ;
};

Вы можете видеть, что этот код намного короче. Кроме того, теперь мы можем установить периоды времени через сравниваемая сторона Динамически, сохраняя наш код в чистоте.

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

Я надеюсь, что это поможет вам создать полезные визуализации данных, используя значительно меньшее код.

Кроме того, не забудьте подписаться на нашу ежемесячную рассылку, чтобы получить больше информации об обновлениях и выпусках Cube.js.

Оригинал: “https://dev.to/kalipso/comparing-data-over-different-time-periods-4h3i”