サマリと明細の構造を表現したデータを作ってみよう～faker.jsとtidyjsとd3を添えて～

こんにちわ。nap5です。


サマリと明細の構造を表現したデータを作ってみましたので、紹介したいと思います。

テストデータを作成するに当たり、以下のライブラリを使っています。

tidy.js

Faker | Faker

個別に以下のobservablehqの記事も参考になります。

tidy.js - groupBy: summarize while keeping reference to items

デモコードの抜粋です。グルーピングしたあとにentriesに持ち替えてキーバリューにそれぞれ案分することで、セレクトボックスなどのコンポーネントの引数に渡すことができます。最後にreduceでサマリあげています。

const {keys, values} = tidy(
  d3.range(30),
  map((n) => {
    faker.seed(n);
    return {
      productMaterial: faker.commerce.productMaterial(),
      productName: faker.commerce.productName(),
      price: Number(faker.commerce.price()),
    };
  }),
  groupBy(
    'productMaterial',
    summarize({
      total: sum('price'),
      count: n('price'),
      max: max('price'),
      min: min('price'),
      items: (items) => {
        return items;
      },
    }),
    groupBy.entries()
  )
).reduce(
  (acc, [key, value]) => {
    acc.keys.push(key);
    acc.values.push(...value);
    return acc;
  },
  {keys: [], values: []}
);

console.log(keys, values);

デモサイトです。

タイトル未設定

デモコードです。

throbbing-water-ug55io - CodeSandbox

簡単ですが、以上です。