https://github.com/recordevolution/widget-barchart
Record Evolution Bar Chart Widget
https://github.com/recordevolution/widget-barchart
dashboard-widget
Last synced: 10 months ago
JSON representation
Record Evolution Bar Chart Widget
- Host: GitHub
- URL: https://github.com/recordevolution/widget-barchart
- Owner: RecordEvolution
- Created: 2023-09-27T14:08:35.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-21T09:09:16.000Z (over 1 year ago)
- Last Synced: 2024-10-23T08:46:27.915Z (over 1 year ago)
- Topics: dashboard-widget
- Language: TypeScript
- Size: 688 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# \
This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
## Installation
```bash
npm i widget-barchart
```
## Usage
```html
import 'widget-barchart/widget-barchart.js';
```
## Expected data format
The following format represents the available data :
```
data: {
settings: {
title: string,
subTitle: string,
label: string,
style: {
backgroundColor: string[],
borderColor: string[],
borderWidth: number
}
}
data: [
{x: string, y: number}
]
}
```
## Interfaces
```
interface InputData {
settings: Settings
data: Data[]
}
```
```
interface Settings {
title: string,
subTitle: string,
label: string,
style: Style
}
```
```
interface Style {
backgroundColor: string[],
borderColor: string[],
borderWidth: number
}
```
```
interface Data {
x: string,
y: number,
}
```
## Style options
The following options are available for styling the bar graph.
A color string is provided in the `backgroundColor` array for each data object.
The same counts for the `borderColor` array
```
interface Style {
backgroundColor: string[],
borderColor: string[],
borderWidth: number
}
```
## Linting and formatting
To scan the project for linting and formatting errors, run
```bash
npm run lint
```
To automatically fix linting and formatting errors, run
```bash
npm run format
```
## Tooling configs
For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
If you customize the configuration a lot, you can consider moving them to individual files.
## Local Demo with `web-dev-server`
```bash
npm start
```
To run a local development server that serves the basic demo located in `demo/index.html`