なつねこメモ

主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ﾉ

2022/11/17

@ant-design/plots で、特定条件を満たした場合だけラベルを表示したい

カテゴリー：

@ant-design/plots という、統計情報みたいなグラフを表示するための Alibaba グループの出しているライブラリがあります。
これは様々なカスタマイズができていろいろ便利なのですが、なにせドキュメントが英文化されていないのに加えて抜けがあるみたいな状態で、地味につらいです。
ということで、今回はそんな @ant-design/plots で特定条件でラベルを表示する方法を紹介します。

今回は Column 、つまりは棒グラフについてです。
Label を設定することで、棒グラフの上、中心、下に任意の文字列を表示させることが出来ます。

例えば、上記リンクの例ではグラフ中央に数値が表示されていますが、それがラベルに値します。
今回は、それを上に表示する場合についての解説です。

上に表示したい場合は、 label.position を top にすることで出来ます。

import { Column } from "@ant-design/plots";
 
// ...
type AntDesignColumnProps = React.ComponentProps<typeof Column>;
 
const props: AntDesignColumnProps = {
  data: [
    /* ... */
  ],
  label: {
    position: "top",
  },
};
 
return <Column {...props} />;

これだけで、グラフの上側に表示することが出来ます。
しかし、この状態だと、例えば棒グラフのうち一番値が大きいものについては、グラフからはみ出してしまいます。
これでは意図しない表示となっているので、 padding を設定することで修正します。
padding については number | number[] | 'auto' が受け入れられ、 number[] の場合は上下左右それぞれ値を設定することが可能です。
配列のどの部分が上下左右のどこに値するかは、下記コードを参集してください。

import { Column } from "@ant-design/plots";
 
// ...
type AntDesignColumnProps = React.ComponentProps<typeof Column>;
 
const props: AntDesignColumnProps = {
  data: [
    /* ... */
  ],
  padding: [
    40, // top
    0, // right
    40, // bottom
    40, // left
  ],
  label: {
    position: "top",
  },
};
 
return <Column {...props} />;

今回の場合は、右側以外に padding を設定します。
これは、デフォルトの auto では、左側と下側については、自動的にある程度の余白が設定されているためです。
なので、追加で上側に余白を設定して上げることで、 position: top の状態でも、はみ出ることなくラベルを表示することが出来ます。

次に、データの値によってラベルの表示非表示を切り替えたい場合。これは、 label.content にコールバックを設定することで出来ます。
コールバックのシグニチャーは型定義が死んでるのでアレですが、第一引数にデータがそのまま入っているので、それを使えばデータの値によってラベルの表示を変更できます。

import { Column } from "@ant-design/plots";
 
// ...
type AntDesignColumnProps = React.ComponentProps<typeof Column>;
 
const props: AntDesignColumnProps = {
  data: [
    { name: "Maya", likes: 11164 },
    { name: "Kikyo", likes: 11563 },
    { name: "Mishe", likes: 9055 },
    /* ... */
  ],
  padding: [
    40, // top
    0, // right
    40, // bottom
    40, // left
  ],
  label: {
    position: "top",
    content: (props) => {
      if (props.likes >= 10000) {
        return "💕";
      }
 
      return "";
    },
  },
};
 
return <Column {...props} />;

ということで、実行結果はこんな感じになります：StackBlitz
そんなわけで、 @ant-design/plots でした。ではでは。