Sparklineコンポーネントの追加

Web Awesomeに新しいデータ可視化カテゴリが追加され、最初のコンポーネントとして Sparkline が実装されました。これはProコンポーネントとしての提供となり、小さなスペースでデータトレンドを表現する手段が加わります。

背景

これまでWeb Awesomeにはデータ可視化に特化したコンポーネントカテゴリが存在しませんでした。本PRは webawesome-pro #137 のサポートPRであり、Pro版に実装されたSparklineコンポーネントをドキュメントとサイドバーに統合するための変更です。

Sparklineは、ダッシュボードや一覧画面で数値データの推移を視覚的に把握するための小型グラフコンポーネントとして位置づけられています。

技術的な変更

本PRでは3つのファイルに変更が加えられています。

サイドバーへのカテゴリ追加

packages/webawesome/docs/_includes/sidebar.njk に Data Visualization カテゴリが新設されました。このカテゴリは既存の「Forms」と「Style utilities」の間に配置され、chart-area アイコンで表現されています。

<wa-details appearance="outlined">
  <h2 slot="summary">
    <wa-icon name="chart-area" aria-hidden="true"></wa-icon>
    Data Visualization
  </h2>
  <ul>
    <li>
      <span class="wa-split">
        <span>
          <a href="/docs/components/sparkline">Sparkline</a>
          <wa-icon name="flask" aria-hidden="true" class="icon-shrink"></wa-icon>
        </span>
        {{ proBadge() }}
      </span>
    </li>
  </ul>
</wa-details>

Sparklineには flask アイコンが追加されており、proBadge() マクロによってProコンポーネントであることが表示されます。

変更履歴への記載

packages/webawesome/docs/docs/resources/changelog.md の Next セクションに、Sparklineの追加が記録されました。

- Added `<wa-sparkline>` as an experimental pro component

Changelogには「experimental pro component」として記載されており、この記述から実験的なProコンポーネントとしての位置づけが確認できます。この記載は既存の <wa-file-input> と <wa-number-input> の追加項目と並んで配置されています。

スペルチェック辞書の更新

cspell.json に "sparkline" と "sparklines" が追加され、ドキュメント内でのスペルチェックエラーを回避しています。

"sparkline",
"sparklines",

まとめ

本PRは、Pro版で実装されたSparklineコンポーネントをWeb Awesomeのドキュメント体系に統合する変更です。新しい「Data Visualization」カテゴリの追加により、データ可視化コンポーネントを扱うための構造が整いました。