ドキュメント検索でチャートコンポーネントに専用アイコンを表示

WebAwesomeのドキュメント検索機能に、新しいData Visualizationコンポーネント群の専用アイコンマッピングが追加されました。これにより、チャート関連ページを検索した際に、汎用的なコンポーネントアイコンではなく chart-area アイコンが表示されるようになります。

背景

WebAwesomeにData Visualizationコンポーネント群が追加されたことで、検索結果におけるアイコン表示の問題が発生していました。チャートコンポーネントのドキュメントページを検索すると、汎用的な trowel-bricks アイコンが表示されるため、ユーザーが視覚的にチャートコンポーネントを識別しにくい状況でした。

検索結果のアイコンは、iconByPrefix 配列でURLパスとアイコン名のマッピングを管理しています。この配列は前方一致で評価されるため、より具体的なパスマッピングを先に定義する必要があります。

技術的な変更

packages/webawesome/docs/assets/scripts/search.js の iconByPrefix 配列に、10種類のチャートコンポーネントのパスマッピングが追加されました。

変更内容:

@@ -45,6 +45,16 @@ const iconByPrefix = [
   ['/docs/customizing', 'rocket-launch'],
   ['/docs/form-controls', 'rocket-launch'],
   ['/docs/localization', 'rocket-launch'],
+  ['/docs/components/chart', 'chart-area'],
+  ['/docs/components/bar-chart', 'chart-area'],
+  ['/docs/components/line-chart', 'chart-area'],
+  ['/docs/components/bubble-chart', 'chart-area'],
+  ['/docs/components/doughnut-chart', 'chart-area'],
+  ['/docs/components/pie-chart', 'chart-area'],
+  ['/docs/components/polar-area-chart', 'chart-area'],
+  ['/docs/components/radar-chart', 'chart-area'],
+  ['/docs/components/scatter-chart', 'chart-area'],
+  ['/docs/components/sparkline', 'chart-area'],
   ['/docs/components', 'trowel-bricks'],
   ['/docs/patterns', 'block-brick'],
   ['/docs/frameworks', 'puzzle'],

追加されたマッピングは以下のコンポーネントをカバーしています：

基本チャート (/docs/components/chart)
棒グラフ (/docs/components/bar-chart)
折れ線グラフ (/docs/components/line-chart)
バブルチャート (/docs/components/bubble-chart)
ドーナツチャート (/docs/components/doughnut-chart)
円グラフ (/docs/components/pie-chart)
極座標エリアチャート (/docs/components/polar-area-chart)
レーダーチャート (/docs/components/radar-chart)
散布図 (/docs/components/scatter-chart)
スパークライン (/docs/components/sparkline)

これらのマッピングは、より汎用的な /docs/components のマッピングよりも前に配置されています。

設計判断

前方一致の優先順位を活用した配置が採用されました。

iconByPrefix 配列は配列の先頭から順に評価され、最初にマッチしたパターンのアイコンが使用されます。チャートコンポーネントの具体的なパス（/docs/components/bar-chart など）を、汎用的なパス（/docs/components）よりも前に配置することで、チャートコンポーネントには chart-area アイコンが、その他のコンポーネントには従来通り trowel-bricks アイコンが表示されるようになりました。

すべてのチャートコンポーネントに同じ chart-area アイコンを使用する判断も注目に値します。各チャートタイプに異なるアイコンを割り当てることも可能でしたが、統一されたアイコンを使用することで、チャートコンポーネント群としての一貫性を保っています。

まとめ

本PRは、検索結果の視覚的な識別性を向上させるための小規模な改善です。配列の評価順序という既存の仕組みを活用し、10行のマッピング追加だけでチャートコンポーネントの検索体験を改善しています。この変更により、ユーザーは検索結果からチャート関連ドキュメントを視覚的に素早く識別できるようになります。