yamada-ui/chartsをリリースした
はじめに
3月のyamada-ui v1.3.0のリリースでyamada-ui/chartsが追加されました。
よければ使ってください。
使い方
storybookに一通りサンプルを実装しています。
dataにはデータのオブジェクトを投入し、seriesにそのデータの色などのパラメーターを指定してあげます。
dataKeyは今回はname: `Page ${index}`,としているので、nameを入れます。
この3つのpropsが必須です。ほかのチャートも今のところは共通しています。
- data
- series
- dataKey
メモ化できる場合はuseMemoで囲ってあげましょう。
カスタマイズする
以下に記載のPropを入れるとカスタマイズができます。
xAxisPropsやyAxisProps,areaPropsなどのPropsはさらにカスタマイズしたい場合に利用できます。
グラフごとにカスタマイズする
複数表示するグラフの一つだけ表示をカスタマイズしたい場合は以下のようにします。
構成
実装した内容を忘れないように、自分用に記録します。
前提
yamada-ui/chartsはrechartsを使って実装されています。
rechartsを簡単に利用できるようにして、かつyamada-uiのスタイルシステムを利用できるようにしたものが、yamada-ui/chartsです。
要素
charts/srcの中は以下のファイルで分けてます。
xxx-chart.tsx
各チャートのコンポーネント。
AreaChartやLineChartなどがここに入っており、最終的にrechartsを使って表示しているのがここになります。
use-xxx.ts
カスタムフックでロジックをまとめています。
rechartsを利用しているので、ユーザーが入力してきたPropsをいろいろ計算して、最終的にrechartの要素のPropsに入れる必要があります。
例えば、以下のgetAreaChartPropsという関数はuseAreaChartから持ってきていますが、この関数でReChartsAreaChartに入れれるPropsに変換してあげてます。
chart.types.ts
yamada-ui/chartsを作るにあたり必要だった型の定義をまとめています。
rechart-properties.ts
rechartのコンポーネントのPropのリストをまとめています。
yamada-uiのPropsと一緒に混ざって入ってくる場合があるため、それを分離するために必要になります。
chart-utils.ts
便利な関数の置き場所。
chart-legend.tsx, chart-tooltip.tsx
デフォルトのtooltipやlegendを実装してます。
処理の流れ
yamada-ui/chartsはrechartsのカスタマイズもできつつ、yamada-uiのスタイルシステムを利用してカスタマイズもできます。
例えばstorybookのcustomAxisではtickMarginやorientationなどrechartのPropsも受け入れつつ、colorはyamada-uiの指定の仕方ができます。
混ざって入ってきたPropsは一度分離する必要があります。
分離する処理は何度も実施するのでchart-utils.tsのgetComponentPropsにまとめています。
以下が返ってきてます。
- chartProps: 分離したrechartのProps
- areaChartClassName: yamada-uiのPropsを当てれるclassName
補足
styles.xxxはここのthemeをとってきています。
styles.areaはarea:{}の中身が返されます。今回は空です。
LineChartのthemeを引っ張ってきているので、実際はここ。
サイト全体のスタイルを変更するような場合に、カスタマイズすると便利。
getComponentPropsが行っているのは、以下です。
- 混ざって入ってきたyamada-uiのPropsとrechartのPropsを分離する
- 分離したyamada-uiのPropsのスタイルを当てれる
classNameに変換する - rechartのPropsと
classNameを返してくる
rechartのPropsはそのままrechartのコンポーネントに渡せますが、yamada-uiのPropsはそのままではrechartのコンポーネントに渡すことができないので、classNameでスタイルを当てています。
計算した値をもとに、getxxxPropsを実装します。
戻り値はrechartのコンポーネントにそのまま入れれる型にする必要があります。
getxxxPropsをrechartのコンポーネントに入れて完成！
rechartsのバグ修正
yamada-uiのスタイルをclassNameで当てる必要がありますが、rechart側のバグにより、当てれない要素が結構ありました。
そのため、rechart側の修正も実施しました。
まとめ
バグとか、要望とかあれば、ぜひissueあげてください！
Discussion