Skip to content

Feature - Add Chart.js-powered charts collection#737

Merged
markmead merged 10 commits into
feature/templates-collectionfrom
feature/application-charts
Jul 8, 2026
Merged

Feature - Add Chart.js-powered charts collection#737
markmead merged 10 commits into
feature/templates-collectionfrom
feature/application-charts

Conversation

@markmead

@markmead markmead commented Jul 5, 2026

Copy link
Copy Markdown
Owner

Summary

  • Stacked on Feature - Add full-page templates collection #736 (templates collection) since it wires charts into the analytics dashboard template
  • Adds a new application/charts collection: line chart, bar chart, donut chart, and a sparkline variant — each self-contained (Chart.js loaded from jsDelivr CDN inside the copied snippet, no build step required to use them)
  • Swaps the previously-installed apexcharts dependency for chart.js — fully MIT licensed with no commercial/revenue-based restriction, unlike ApexCharts' paid tier above $2M revenue
  • Wires the new charts into the analytics dashboard template: a sparkline in the "Monthly revenue" stat card, plus a "Revenue trend" line chart and "Orders by status" donut chart section above the orders table (donut categories match the table's Paid/Pending/Refunded statuses)
  • Notes the Chart.js dependency via the existing plugins field (renders as "Plugins: chart.js" linking to npm, same mechanism already used for @tailwindcss/forms elsewhere)

Test plan

  • astro check — no new type errors (same pre-existing TypographyMapper.astro errors as before)
  • astro build — all pages build, including /components/application/charts and the updated dashboard template
  • Syntax-checked all inline Chart.js init scripts
  • Verified the pinned Chart.js CDN URL resolves (200 OK)
  • Visual check in a browser (not done this session — please eyeball the rendered charts before merging)

markmead and others added 4 commits July 5, 2026 10:20
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…template

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Jul 5, 2026

Copy link
Copy Markdown

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Preview URL Updated (UTC)
✅ Deployment successful!
View logs
hyperui ab1508d Commit Preview URL

Branch Preview URL
Jul 08 2026, 08:20 AM

markmead and others added 6 commits July 5, 2026 10:37
…charts

# Conflicts:
#	src/content/collection/templates/analytics-dashboard.mdx
…y to charts

Swap the flat grayscale fills for indigo/emerald/amber/rose accents,
add a gradient fill and index-mode hover (visible point, tooltip
anywhere along the x-axis) to the line chart, and give it a working
6M/12M range toggle.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
… toggle

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…ter, and bubble charts

Rounds out the charts collection with the remaining Chart.js chart types not yet covered, each with light and dark variants.
Canvas-rendered Chart.js charts had no accessible way to expose per-point data or multi-series legends beyond a one-line aria-label. Adds a visually hidden data table next to each canvas, shortens aria-labels to name-only strings, and fixes the range-toggle chart's label going stale after switching periods.
The sr-only data table swaps rows when the 6M/12M toggle is clicked, but nothing told screen reader users content had changed unless they were already focused on the table. aria-live="polite" makes the update self-announcing.
@markmead markmead merged commit 684040a into feature/templates-collection Jul 8, 2026
1 check passed
@markmead markmead deleted the feature/application-charts branch July 8, 2026 08:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant