-
Notifications
You must be signed in to change notification settings - Fork 184
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
Update readme and dependencies #1871
Conversation
…t, react-router-dom, vue
✅ Deploy Preview for carbon-charts-angular ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for carbon-charts-react ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for carbon-charts-core ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for carbon-charts-docs ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
README.md
Outdated
@@ -4,13 +4,13 @@ | |||
</a> | |||
<h3 align="center">Carbon Charts</h3> | |||
<p align="center"> | |||
A reusable framework-agnostic D3 charting library. | |||
A component library of 26 charts for [vanilla JavaScript](./packages/core), [Svelte](./packages/svelte), [React](./packages/react), [Vue.js](./packages/vue) and [Angular](./packages/angular). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
d3 is no longer a peer dependency so including this adds nothing. Also, got rid of the packages section by putting direct links to them here at the top.
<br /><br /> | ||
<a href="https://www.npmjs.com/package/@carbon/charts"> | ||
<img src="https://img.shields.io/npm/v/@carbon/charts.svg" /> | ||
</a> | ||
<img alt="semantic-versioning" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--ver-e10079.svg" /> | ||
<img alt="semantic-versioning" src="https://img.shields.io/badge/downloads-+20k%2Fweek-green" /> | ||
<img alt="semantic-versioning" src="https://img.shields.io/badge/downloads-+60k%2Fweek-green" /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is the latest sum of downloads for all the packages - 60, 161
@@ -19,61 +19,15 @@ | |||
|
|||
## Documentation | |||
|
|||
Includes StackBlitz examples of each chart type for Vanilla JavaScript, Svelte, React, Angular and Vue.js. | |||
Includes StackBlitz examples of each chart type for supported frameworks. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Already stated above with links to the packages.
## Packages | ||
|
||
- [Vanilla JavaScript](./packages/core) | ||
- [React](./packages/react) | ||
- [Angular](./packages/angular) | ||
- [Svelte](./packages/svelte) | ||
- [Vue](./packages/vue) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Links provided higher up.
<a href="https://www.netlify.com" target="_blank"> | ||
<img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" /> | ||
</a> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Moved this to the bottom.
Read the release change logs [here](https://github.com/carbon-design-system/carbon-charts/releases) | ||
|
||
## Component status | ||
|
||
:white_check_mark: Stable :hourglass_flowing_sand: In progress | ||
|
||
| Component | Vanilla | Angular | React | Vue | Svelte | | ||
| -------------------- | ------------------------ | ------------------------ | ------------------------ | ------------------------ | ------------------------ | | ||
| Simple Bar | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | ||
| Grouped Bar | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | ||
| Stacked Bar | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | ||
| Floating Bar | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | ||
| Donut | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | ||
| Line | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | ||
| Curved Line | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | ||
| Pie | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | ||
| Step | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | ||
| Scatter | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | ||
| Radar | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | ||
| Area | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | ||
| Gauge | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | ||
| Meter | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | ||
| Sparkline | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | ||
| Treemap | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | ||
| Combo | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | ||
| Wordcloud | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | ||
| Bullet | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | ||
| Circle Pack | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | ||
| Network diagrams | — | :white_check_mark: | :white_check_mark: | — | — | | ||
| Proportional meter | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | ||
| Histogram | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | ||
| Tree | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | ||
| Alluvial | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | ||
| Heatmap | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | ||
| Choropleth | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The reason I pulled these out is because all chart types are available for all frameworks except Network Diagrams. The documentation website clearly covers this and presents the list of chart types in a better way. It is better to drive users to the Docs site than repeat info here. Also, the list isn't well-organized so you really have to know what you're looking for. The docs site lists charts alphabetically on the side nav and by function on the introduction page with the tiles.
See our | ||
[release change logs](https://github.com/carbon-design-system/carbon-charts/blob/master/CHANGELOG.md) | ||
for the changelog of each version of Charts. | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Already stated above.
<p align="center"> | ||
<a href="https://charts.carbondesignsystem.com/"> | ||
<img src="../../assets/dashboard.png" alt="Carbon Charts" /> | ||
</a> | ||
<h3 align="center">Carbon Charts Angular</h3> | ||
<p align="center"> | ||
A component library of 26 charts for Angular 18. | ||
<br /><br /> | ||
<a href="https://www.npmjs.com/package/@carbon/charts"> | ||
<img src="https://img.shields.io/npm/v/@carbon/charts.svg" /> | ||
</a> | ||
<img alt="semantic-versioning" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--ver-e10079.svg" /> | ||
<img alt="semantic-versioning" src="https://img.shields.io/badge/downloads-+60k%2Fweek-green" /> | ||
<a href="https://discord.gg/J7JEUEkTRX"> | ||
<img src="https://img.shields.io/discord/689212587170201628?color=5865F2" alt="Chat with us on Discord"> | ||
</a> | ||
</p> | ||
</p> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Makes the read me more visually interesting over what we had especially important for npmjs page.
<p align="center"> | ||
<a href="https://charts.carbondesignsystem.com/"> | ||
<img src="../../assets/dashboard.png" alt="Carbon Charts" /> | ||
</a> | ||
<h3 align="center">Carbon Charts</h3> | ||
<p align="center"> | ||
A component library of 26 charts for vanilla JavaScript. | ||
<br /><br /> | ||
<a href="https://www.npmjs.com/package/@carbon/charts"> | ||
<img src="https://img.shields.io/npm/v/@carbon/charts.svg" /> | ||
</a> | ||
<img alt="semantic-versioning" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--ver-e10079.svg" /> | ||
<img alt="semantic-versioning" src="https://img.shields.io/badge/downloads-+60k%2Fweek-green" /> | ||
<a href="https://discord.gg/J7JEUEkTRX"> | ||
<img src="https://img.shields.io/discord/689212587170201628?color=5865F2" alt="Chat with us on Discord"> | ||
</a> | ||
</p> | ||
</p> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Makes the read me more visually interesting over what we had especially important for npmjs page.
<p align="center"> | ||
<a href="https://charts.carbondesignsystem.com/"> | ||
<img src="../../assets/dashboard.png" alt="Carbon Charts" /> | ||
</a> | ||
<h3 align="center">Carbon Charts React</h3> | ||
<p align="center"> | ||
A component library of 26 charts for React. | ||
<br /><br /> | ||
<a href="https://www.npmjs.com/package/@carbon/charts"> | ||
<img src="https://img.shields.io/npm/v/@carbon/charts.svg" /> | ||
</a> | ||
<img alt="semantic-versioning" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--ver-e10079.svg" /> | ||
<img alt="semantic-versioning" src="https://img.shields.io/badge/downloads-+60k%2Fweek-green" /> | ||
<a href="https://discord.gg/J7JEUEkTRX"> | ||
<img src="https://img.shields.io/discord/689212587170201628?color=5865F2" alt="Chat with us on Discord"> | ||
</a> | ||
</p> | ||
</p> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Makes the read me more visually interesting over what we had especially important for npmjs page.
<p align="center"> | ||
<a href="https://charts.carbondesignsystem.com/"> | ||
<img src="../../assets/dashboard.png" alt="Carbon Charts" /> | ||
</a> | ||
<h3 align="center">Carbon Charts Svelte</h3> | ||
<p align="center"> | ||
A component library of 26 charts for Svelte and SvelteKit. | ||
<br /><br /> | ||
<a href="https://www.npmjs.com/package/@carbon/charts"> | ||
<img src="https://img.shields.io/npm/v/@carbon/charts.svg" /> | ||
</a> | ||
<img alt="semantic-versioning" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--ver-e10079.svg" /> | ||
<img alt="semantic-versioning" src="https://img.shields.io/badge/downloads-+60k%2Fweek-green" /> | ||
<a href="https://discord.gg/J7JEUEkTRX"> | ||
<img src="https://img.shields.io/discord/689212587170201628?color=5865F2" alt="Chat with us on Discord"> | ||
</a> | ||
</p> | ||
</p> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Makes the read me more visually interesting over what we had especially important for npmjs page.
<p align="center"> | ||
<a href="https://charts.carbondesignsystem.com/"> | ||
<img src="../../assets/dashboard.png" alt="Carbon Charts" /> | ||
</a> | ||
<h3 align="center">Carbon Charts Vue</h3> | ||
<p align="center"> | ||
A component library of 26 charts for Vue.js 3+. | ||
<br /><br /> | ||
<a href="https://www.npmjs.com/package/@carbon/charts"> | ||
<img src="https://img.shields.io/npm/v/@carbon/charts.svg" /> | ||
</a> | ||
<img alt="semantic-versioning" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--ver-e10079.svg" /> | ||
<img alt="semantic-versioning" src="https://img.shields.io/badge/downloads-+60k%2Fweek-green" /> | ||
<a href="https://discord.gg/J7JEUEkTRX"> | ||
<img src="https://img.shields.io/discord/689212587170201628?color=5865F2" alt="Chat with us on Discord"> | ||
</a> | ||
</p> | ||
</p> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Makes the read me more visually interesting over what we had especially important for npmjs page.
… vitest, typedoc, vue-tsc
…ript, @carbon/react
…ages, react-router-dom
…d types for core to dependencies
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
Updates