異なる期間にわたるデータの比較

異なる期間にわたる単一のメトリックを比較することは、データ解析論における非常に一般的な手順である.今年の収益を前年と比較することによって、あなたの会社の業績を評価することができます.あなたは、あなたの市場の低い、高い売上数であることを理解できます.
Google Analytics、YouTube Studioなどのような分析システムは、異なる期間にわたって単一のメトリックを比較するためのツールを提供します.

キューブでそのような解析的可視化を実行する方法を見てみましょう.js
Here ライブデモとフルを見ることができますsource code この例では.
我々は、サンプルの電子商取引データセットを探索し、3つの最新の年の順序の数を比較します.これを行うには、キューブを実行する必要があります.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 測定は、注文の数を計算するために使用されます.The createdAt フィールドは、順序のタイムスタンプを取得するために使用されます.
次のセクションでは、この例をReplyで実装しますが、Vue、Angle、Banilla 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 /> コンポーネントをレンダリングするには、有益なグラフを作成します.

手順はとても簡単ですね.しかし、あなたが見ることができるように、コードは少し厄介で反復的です.さらに重要なことは、数年の異なる量にコードを適応させるのも簡単ではありません.また、ユーザーの行動やアプリケーションの状態に応じて動的に調整することもできません.
どのように、我々はこの問題を解決しますか?別のアプローチを試みましょう.

単一のグラフの単一のクエリ

立方体の0.20.0リリースで.JSは、単一のクエリを使用して別の期間のデータを取得することが可能です.
The compareDateRange プロパティは、2つ以上の異なる期間の配列を受け取り、1つのリクエストですべてのデータを返します.
簡単な方法で以前のコードを書き換えることができます.

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 /> コンポーネントをレンダリングするので、グラフは本質的に同じになります.
私は、これがあなたが実質的により少ないコードを使用している役に立つデータ視覚化をつくるのを援助することを望みます.
また、キューブについての詳細情報を得るために私たちの毎月のニュースレターにサインアップすることを忘れないでください.JSアップデートとリリース.