Skip to content

Add charts.js package and example components #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 13 commits into from
Jul 5, 2024
Merged

Add charts.js package and example components #23

merged 13 commits into from
Jul 5, 2024

Conversation

sgreenbury
Copy link
Contributor

@sgreenbury sgreenbury commented Jun 6, 2024

Closes #6.

This PR adds:

  • chart.js dep (svelte-chartjs does not seem to be supported with svelte5 at the moment)
  • Adds example components to left panel of template app: bar chart, bar chart with data retrieved from an API (perhaps condense to one example), bubble chart
  • Consider moving the examples to the ua_components package and allow data to be passed in, otherwise use svelte-chartjs
  • Add zoom functionality (currently attempting with chartjs-zoom-plugin)

Copy link
Contributor

@dabreegster dabreegster left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems fine to merge to me, nice! Remaining problems could be tackled in smaller followup steps

},
};
new Chart(
(document.getElementById("myCanvas") as HTMLCanvasElement).getContext(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is correct / safe as it is, because onMount runs after the DOM elements below the script section are ready. But optionally, you could use https://learn.svelte.dev/tutorial/actions and/or a let canvas: HTMLCanvasElement; and <canvas bind:this={canvas} /> instead of getElementById. The danger of id is that the IDs need to be unique for the whole page, so no other component can use this ID, or you can't have two ApiBartChart components on one page.

In fact, looks like BarChart.svelte is using actions as I'd expect. Could we do the same thing here to nudge people towards best practices? The complication is that the API results won't be immediately ready... Hmm, the simplest approach I know is to keep onMount as you have it, but get rid of id (for the uniqueness problem) and use bind:this instead

And it could be worth it to have a comment about why doing this instead of the use: actions is helpful, to guide people to doing the appropriate thing

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the explanation and thoughts on this. I've updated as you suggested with a comment and the bind:this approach.

@sgreenbury sgreenbury marked this pull request as ready for review July 5, 2024 05:32
@sgreenbury
Copy link
Contributor Author

Thanks @dabreegster for reviewing this, opened #28 for further work on this and will merge now.

@sgreenbury sgreenbury merged commit 1320252 into main Jul 5, 2024
@sgreenbury sgreenbury deleted the 6-charts branch July 5, 2024 08:22
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.

Charting library
2 participants