-
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
Changes from 7 commits
9cd89c5
b8c09c3
3a33bbc
8138d93
9b2fc5b
a8eb528
123877d
db6ec6d
9e41251
babda2d
a4685ac
d2ba953
3b35523
88ac6fa
f3752ed
0127977
ea9821a
02611c5
d9124d4
8143c2d
81c4467
4a7454f
48b2e18
a84d110
2f5360f
2b515d9
661906b
9719a19
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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 <a href="./packages/core" target="_blank">vanilla JavaScript</a>, <a href="./packages/svelte" target="_blank">Svelte</a>, <a href="./packages/react" target="_blank">React</a>, <a href="./packages/vue" target="_blank">Vue.js</a> and <a href="./packages/angular" target="_blank">Angular</a>. | ||
<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" /> | ||
<a href="https://discord.gg/J7JEUEkTRX"> | ||
<img src="https://img.shields.io/discord/689212587170201628?color=5865F2" alt="Chat with us on Discord"> | ||
</a> | ||
|
@@ -19,74 +19,26 @@ | |
|
||
## 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 commentThe reason will be displayed to describe this comment to others. Learn more. Already stated above with links to the packages. |
||
|
||
<a href="https://charts.carbondesignsystem.com/" target="_blank"> | ||
<img src="./assets/dashboard.png" width=700 /> | ||
</a> | ||
|
||
## Packages | ||
|
||
- [Vanilla JavaScript](./packages/core) | ||
- [React](./packages/react) | ||
- [Angular](./packages/angular) | ||
- [Svelte](./packages/svelte) | ||
- [Vue](./packages/vue) | ||
Comment on lines
-28
to
-34
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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> | ||
Comment on lines
-36
to
-38
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Moved this to the bottom. |
||
|
||
## CHANGELOG | ||
|
||
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: | | ||
Comment on lines
-42
to
-76
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. |
||
Release change logs can be found [here](https://github.com/carbon-design-system/carbon-charts/releases). | ||
|
||
## Bugs and feature requests | ||
|
||
Have a bug or a feature request? First read the | ||
Please read the | ||
[issue guidelines](https://github.com/carbon-design-system/carbon-charts/blob/master/CONTRIBUTING.md#issue-guidelines) | ||
and search for existing and closed issues. If your problem or idea is not addressed yet, | ||
[open a new issue](https://github.com/carbon-design-system/carbon-charts/issues/new). | ||
and search for existing and closed issues. If your problem or idea has not been addressed, [submit a bug report](https://github.com/carbon-design-system/carbon-charts/issues/new?assignees=&labels=bug+🐛&projects=&template=BUG_REPORT.yaml&title=%5BBug%5D%3A+) or [feature enhancement request](https://github.com/carbon-design-system/carbon-charts/issues/new?assignees=&labels=enhancement&projects=&template=ENHANCEMENT.yaml&title=%5BEnhancement%5D%3A+). | ||
|
||
## Contributing | ||
|
||
See our | ||
[contributing guidelines](https://github.com/carbon-design-system/carbon-charts/blob/master/.github/CONTRIBUTING.md). | ||
Included are instructions for opening issues, coding guidelines, and submitting pull requests. | ||
[contributing guidelines](https://github.com/carbon-design-system/carbon-charts/blob/master/.github/CONTRIBUTING.md) - instructions for opening issues, coding guidelines, and submitting pull requests. | ||
|
||
<!-- ## Community | ||
|
||
|
@@ -97,10 +49,6 @@ Get updates on Charts' development and chat with the core team and community. -- | |
We use the **semantic-release** library to automatically version our releases within the guidelines | ||
of Semantic Versioning [Semantic Versioning guidelines](http://semver.org/). | ||
|
||
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. | ||
|
||
Comment on lines
-100
to
-103
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Already stated above. |
||
## Core team | ||
|
||
<!-- prettier-ignore --> | ||
|
@@ -178,3 +126,7 @@ for the changelog of each version of Charts. | |
## Code of Conduct | ||
|
||
Read our code of conduct [here](.github/CODE_OF_CONDUCT.md) | ||
|
||
<a href="https://www.netlify.com" target="_blank"> | ||
<img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" /> | ||
</a> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,21 @@ | ||
# Carbon Charts Angular | ||
|
||
Carbon Charts Angular is a thin Angular wrapper around the vanilla JavaScript `@carbon/charts` | ||
component library. This prerelease is for Angular 18 and higher. | ||
<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> | ||
|
||
Comment on lines
+1
to
+18
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. |
||
If you need support for older versions of Angular (or encounter problems with this module), please | ||
revert to `@carbon/charts-angular@latest`. Distribution tags have been added for previous Angular | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,21 @@ | ||
# Carbon Charts | ||
|
||
Carbon Charts is a component library for vanilla JavaScript. | ||
<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> | ||
|
||
Comment on lines
+1
to
+18
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. |
||
## [Documentation with StackBlitz examples](https://charts.carbondesignsystem.com/) | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,21 @@ | ||
# Carbon Charts React | ||
|
||
Carbon Charts React is a thin React wrapper around the vanilla JavaScript `@carbon/charts` component | ||
library. | ||
<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> | ||
|
||
Comment on lines
+1
to
+18
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. |
||
**[Documentation with StackBlitz examples](https://charts.carbondesignsystem.com/)** | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,21 @@ | ||
# Carbon Charts Svelte | ||
|
||
Carbon Charts Svelte is a thin Svelte wrapper around the vanilla JavaScript `@carbon/charts` | ||
component library. | ||
<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> | ||
|
||
Comment on lines
+1
to
+18
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. |
||
## [Documentation with StackBlitz examples](https://charts.carbondesignsystem.com/) | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,23 @@ | ||
# Carbon Charts Vue | ||
|
||
Carbon Charts Vue is a thin Vue.js wrapper around the vanilla JavaScript `@carbon/charts` component | ||
library. This version is for Vue.js ^3.3.0. For Vue.js 2.x support, please use | ||
<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> | ||
|
||
Comment on lines
+1
to
+18
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. |
||
For Vue.js 2.x support, please use | ||
`@carbon/charts-vue@latest`. | ||
|
||
## [Documentation with StackBlitz examples](https://charts.carbondesignsystem.com/) | ||
|
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