서로 다른 기간 동안의 데이터 비교

서로 다른 기간 동안 단일 메트릭을 비교하는 것은 데이터 분석에서 매우 일반적인 절차입니다. 올해의 수익을 전년도와 비교하여 회사의 성과를 평가할 수 있습니다. 시장에서 매출이 낮은 달과 높은 달을 이해할 수 있으며 더 나아가 고객 행동을 예측하고 계절적 패턴을 파악할 수 있습니다.

Google Analytics, Youtube Studio 등과 같은 분석 시스템은 여러 기간 동안 단일 지표를 비교하는 도구를 제공합니다.



Cube.js를 사용하여 이러한 분석 시각화를 구현하는 방법을 살펴보겠습니다.

Here 이 예제에 대한 라이브 데모 및 전체source code를 볼 수 있습니다.

샘플 전자 상거래 데이터 세트를 탐색하고 가장 최근 3년 동안의 주문 수를 비교할 것입니다. 이를 위해서는 Cube.js 서버와 간단한 대시보드 애플리케이션을 실행해야 합니다.

If you’re not yet familiar with Cube.js, please follow our guide to setting up the database, starting a Cube.js server, and getting information about data schemes and analytical cubes.

이제 다음 코드를 사용하여 Orders 폴더 안에 schema 큐브를 생성해 보겠습니다.

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`,
    },
  },
});

여기서 count 측정값은 주문 수를 계산하는 데 사용됩니다. createdAt 필드는 주문의 타임스탬프를 검색하는 데 사용됩니다.

다음 섹션에서는 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 <Line data={data} title={'multiple queries'} />;
};

데이터가 준비되면 <Line /> 렌더링 구성 요소로 보내고 유익한 차트를 만듭니다.



절차가 아주 간단하죠? 그러나 보시다시피 코드가 약간 지저분하고 반복적입니다. 더 중요한 것은 코드를 다른 연도에 맞게 조정하거나 사용자의 작업 또는 애플리케이션 상태에 따라 동적으로 조정하는 것조차 쉽지 않다는 것입니다.

이 문제를 어떻게 해결합니까? 다른 접근 방식을 시도해 보겠습니다.

단일 차트에 대한 단일 쿼리

Cube.js의 0.20.0 릴리스에서는 단일 쿼리를 사용하여 여러 기간 동안 데이터를 검색할 수 있습니다.

compareDateRange 속성은 둘 이상의 서로 다른 기간의 배열을 허용하고 하나의 요청으로 모든 기간에 대한 데이터를 반환합니다.

이전 코드를 더 간단한 방법으로 다시 작성할 수 있습니다.

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 <Line data={data} title={'the single query'} />;
};

이 코드가 훨씬 더 짧다는 것을 알 수 있습니다. 또한 이제 코드를 깔끔하게 유지하면서 compareDateRange를 통해 기간을 동적으로 설정할 수 있습니다.
<Line /> 렌더링 구성 요소를 변경하지 않았으므로 차트가 기본적으로 동일하게 보입니다.

이것이 훨씬 적은 코드를 사용하여 유용한 데이터 시각화를 만드는 데 도움이 되기를 바랍니다.

또한 Cube.js 업데이트 및 릴리스에 대한 자세한 정보를 얻으려면 월간 뉴스레터에 등록하는 것을 잊지 마십시오.