チャートコンポーネント群をProエディションに追加

2026年02月25日 23:04 JST shoelace-style/webawesome

https://github.com/shoelace-style/webawesome/pull/2091

Web Awesome 3.3.0では、Chart.jsベースの8種類のチャートコンポーネントが実験的機能として追加されました。これらはKickstarterストレッチゴールとして計画されていた機能で、Proエディション限定のデータ可視化ソリューションとして提供されます。

背景

Web AwesomeのKickstarterキャンペーンでは、チャート機能がストレッチゴールとして掲げられていました。Issue #1073で追跡されていたこの機能は、既存の <wa-sparkline> に加えて、包括的なデータ可視化コンポーネント群を求める声に応えるものです。

従来は簡易的なSparklineのみが提供されていましたが、ビジネスダッシュボードやアナリティクス画面など、より高度なデータ表現が必要なユースケースへの対応が課題でした。

技術的な変更

Chart.js 4.5.1を依存関係に追加し、複数のチャートタイプを実装しています。

追加された依存関係:

"node_modules/chart.js": {
  "version": "4.5.1",
  "dependencies": {
    "@kurkle/color": "^0.3.0"
  },
  "engines": {
    "pnpm": ">=8"
  }
}

"node_modules/style-observer": {
  "version": "0.1.2"
}

Chart.jsはカラー処理に @kurkle/color を、スタイル変更の監視に style-observer を使用します。engines フィールドにpnpm 8以上の指定があることから、パッケージマネージャーの制約が明示されています。

追加されたコンポーネント:

サイドバーナビゲーションには8種類のチャートコンポーネントと高度な使用法を説明する <wa-chart> が追加されました。

+<li><a href="/docs/components/bar-chart">Bar Chart</a></li>
+<li><a href="/docs/components/line-chart">Line Chart</a></li>
+<li><a href="/docs/components/bubble-chart">Bubble Chart</a></li>
+<li><a href="/docs/components/doughnut-chart">Doughnut Chart</a></li>
+<li><a href="/docs/components/pie-chart">Pie Chart</a></li>
+<li><a href="/docs/components/polar-area-chart">Polar Area Chart</a></li>
+<li><a href="/docs/components/radar-chart">Radar Chart</a></li>
+<li><a href="/docs/components/scatter-chart">Scatter Chart</a></li>
+<li><a href="/docs/components/sparkline">Sparkline</a></li>
+<li><a href="/docs/components/chart">Advanced Usage</a></li>

各チャートタイプは独立したコンポーネントとして実装され、<wa-chart> がカスタマイズのための高度なAPIを提供する構成です。既存の <wa-sparkline> も「Data Visualization」セクションに統合されました。

セクションのバッジ更新:

 <h2 slot="summary">
   <wa-icon name="chart-area" variant="regular" aria-hidden="true"></wa-icon>
   Data Visualization
+  {{ proBadge() }}
+  <wa-icon name="flask" aria-hidden="true" class="icon-shrink de-emphasize"></wa-icon>
 </h2>

セクション全体にProバッジと実験的機能を示すフラスコアイコンが付与され、これらのコンポーネントがProエディション限定かつ実験段階であることが明示されています。個別のコンポーネントレベルでのバッジ表示は削除され、セクション単位での表示に統一されました。

設計判断

Chart.jsの採用という判断がなされています。独自のチャートエンジンを実装せず、実績のあるOSSライブラリをラップする方式です。Chart.js 4.5.1は宣言的なデータ構造とレスポンシブ設計を提供し、Web Componentsとの統合も容易です。

実験的機能としてのリリースも特徴的です。Proエディション限定でありながら実験バッジを付与することで、APIの安定性について慎重な姿勢を示しています。本番環境での使用前にフィードバックを収集する意図が読み取れます。

コード例のトランスフォーマーでは、<script> 要素の type 属性の扱いが修正されています。

-if (!script.type?.trim()) {
+const scriptType = script.getAttribute("type")?.trim()
+if (!scriptType) {
   script.setAttribute('type', 'module');
 }

コメントに「script.type は常に undefined」とあることから、DOMパーサーの挙動に起因する問題への対処です。属性の直接取得に切り替えることで、Chart.jsのサンプルコードが正しくモジュールとして実行されることを保証しています。

まとめ

本PRは、KickstarterのストレッチゴールとしてコミットされていたChart機能を、実験的Proコンポーネントとして実装したものです。Chart.jsの統合により8種類のチャートタイプと高度なカスタマイズAPIを提供し、Web AwesomeのProエディションをデータ可視化領域まで拡張しています。実験バッジの付与は、初期フィードバックを収集しながらAPIを洗練させる段階的リリース戦略を示しています。