@icgcat/chart 0.0.1 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +104 -89
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,128 +1,143 @@
|
|
|
1
|
-
|
|
1
|
+
<div style="text-align:center">
|
|
2
|
+
<p>
|
|
3
|
+
<img src="https://eines.icgc.cat/recursos/logos/icgc_logo_color.png" alt="ICGC Logo" width="250px">
|
|
4
|
+
</p>
|
|
5
|
+
</div>
|
|
2
6
|
|
|
3
|
-
|
|
4
|
-
|
|
7
|
+
<div style="text-align:center">
|
|
8
|
+
|
|
9
|
+
[](LICENSE.txt)
|
|
10
|
+
[](https://www.npmjs.com/package/@icgcat/chart)
|
|
11
|
+
[](https://twitter.com/icgcat)
|
|
12
|
+
<img src="https://eines.icgc.cat/recursos//images/JS-logo.svg" width="20px"/>
|
|
13
|
+
</div>
|
|
14
|
+
|
|
15
|
+
# Svelte Chart Component
|
|
16
|
+
|
|
17
|
+
This npm package provides a reusable chart component using the `Chart.js` library. It is designed to work seamlessly with Svelte applications and supports various chart types.
|
|
5
18
|
|
|
6
19
|
---
|
|
7
20
|
|
|
8
21
|
## Installation
|
|
9
22
|
|
|
10
|
-
|
|
23
|
+
Install the package using npm:
|
|
11
24
|
|
|
12
25
|
```bash
|
|
13
|
-
|
|
26
|
+
npm install @icgcat/chart
|
|
14
27
|
```
|
|
15
28
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
```bash
|
|
19
|
-
npm install @icgcat/accordion
|
|
20
|
-
```
|
|
29
|
+
The package automatically includes the required Chart.js dependency, so there is no need for additional installations.
|
|
21
30
|
|
|
22
31
|
---
|
|
23
32
|
|
|
24
|
-
##
|
|
25
|
-
|
|
26
|
-
### Import and Basic Example
|
|
27
|
-
Here's how to use the `Accordion` and `SubAccordion` components in your Svelte application:
|
|
33
|
+
## Features
|
|
28
34
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
35
|
+
- **Chart Types**: Supports bar, line, pie, and other chart types supported by Chart.js.
|
|
36
|
+
- **Customizable**: Easily configure labels, datasets, and chart options.
|
|
37
|
+
- **Responsive Design**: Charts adapt to different screen sizes.
|
|
38
|
+
- **Legend Management**: Position and display customization for chart legends.
|
|
32
39
|
|
|
33
|
-
|
|
40
|
+
---
|
|
34
41
|
|
|
35
|
-
|
|
36
|
-
openedAccordion = openedAccordion === id ? 0 : id;
|
|
37
|
-
};
|
|
38
|
-
</script>
|
|
42
|
+
## Props
|
|
39
43
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
44
|
+
### Configurable Properties
|
|
45
|
+
|
|
46
|
+
- **`chartData`**: (Required) Configuration object for the chart. This includes:
|
|
47
|
+
- `type`: Type of the chart (e.g., `bar`, `line`, `pie`).
|
|
48
|
+
- `data`: Chart data, including `labels` and `datasets`.
|
|
49
|
+
- `options`: Additional Chart.js options for customization.
|
|
50
|
+
|
|
51
|
+
#### Example `chartData` Object
|
|
52
|
+
|
|
53
|
+
```javascript
|
|
54
|
+
{
|
|
55
|
+
type: "bar",
|
|
56
|
+
data: {
|
|
57
|
+
labels: ["January", "February", "March"],
|
|
58
|
+
datasets: [
|
|
59
|
+
{
|
|
60
|
+
label: "Sample Data",
|
|
61
|
+
data: [10, 20, 30],
|
|
62
|
+
backgroundColor: "rgba(255, 99, 132, 0.2)",
|
|
63
|
+
borderColor: "rgba(255, 99, 132, 1)",
|
|
64
|
+
borderWidth: 1,
|
|
65
|
+
},
|
|
66
|
+
],
|
|
67
|
+
},
|
|
68
|
+
options: {
|
|
69
|
+
responsive: true,
|
|
70
|
+
plugins: {
|
|
71
|
+
legend: {
|
|
72
|
+
display: true,
|
|
73
|
+
position: "top",
|
|
74
|
+
},
|
|
75
|
+
},
|
|
76
|
+
},
|
|
77
|
+
}
|
|
65
78
|
```
|
|
66
79
|
|
|
67
80
|
---
|
|
68
81
|
|
|
69
|
-
##
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
82
|
+
## Usage Example
|
|
83
|
+
|
|
84
|
+
```svelte
|
|
85
|
+
<script>
|
|
86
|
+
import Chart from '@icgcat/chart';
|
|
87
|
+
|
|
88
|
+
const chartData = {
|
|
89
|
+
type: "line",
|
|
90
|
+
data: {
|
|
91
|
+
labels: ["January", "February", "March"],
|
|
92
|
+
datasets: [
|
|
93
|
+
{
|
|
94
|
+
label: "Monthly Sales",
|
|
95
|
+
data: [50, 75, 100],
|
|
96
|
+
backgroundColor: "rgba(54, 162, 235, 0.2)",
|
|
97
|
+
borderColor: "rgba(54, 162, 235, 1)",
|
|
98
|
+
borderWidth: 2,
|
|
99
|
+
},
|
|
100
|
+
],
|
|
101
|
+
},
|
|
102
|
+
options: {
|
|
103
|
+
responsive: true,
|
|
104
|
+
plugins: {
|
|
105
|
+
legend: {
|
|
106
|
+
display: true,
|
|
107
|
+
position: "bottom",
|
|
108
|
+
},
|
|
109
|
+
},
|
|
110
|
+
},
|
|
111
|
+
};
|
|
112
|
+
</script>
|
|
113
|
+
|
|
114
|
+
<ChartComponent {chartData} />
|
|
115
|
+
```
|
|
91
116
|
|
|
92
117
|
---
|
|
93
118
|
|
|
94
119
|
## Styling
|
|
95
|
-
The components come with default styles, but you can override them using custom CSS. For example:
|
|
96
120
|
|
|
97
|
-
|
|
98
|
-
.acc {
|
|
99
|
-
border-radius: 8px;
|
|
100
|
-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
101
|
-
}
|
|
121
|
+
The component comes with minimal styling for the canvas element. Customize it as needed:
|
|
102
122
|
|
|
103
|
-
|
|
104
|
-
|
|
123
|
+
```css
|
|
124
|
+
canvas {
|
|
125
|
+
max-width: 100%;
|
|
126
|
+
margin: 20px 0;
|
|
105
127
|
}
|
|
106
128
|
```
|
|
107
129
|
|
|
108
130
|
---
|
|
109
131
|
|
|
110
|
-
##
|
|
111
|
-
These components use Svelte's `slide` transition for smooth opening and closing animations. You can modify or replace the transition if desired.
|
|
132
|
+
## Dependencies
|
|
112
133
|
|
|
113
|
-
|
|
134
|
+
- `chart.js`
|
|
114
135
|
|
|
115
|
-
|
|
116
|
-
- Fully keyboard-navigable.
|
|
117
|
-
- Supports dynamic aria-expanded attributes for screen readers.
|
|
118
|
-
|
|
119
|
-
---
|
|
120
|
-
|
|
121
|
-
## Contributions
|
|
122
|
-
Feel free to fork this repository and open pull requests to improve the components or add new features.
|
|
136
|
+
This dependency is included automatically when you install the package.
|
|
123
137
|
|
|
124
138
|
---
|
|
125
139
|
|
|
126
140
|
## License
|
|
127
|
-
|
|
141
|
+
|
|
142
|
+
This project is licensed under the [MIT License](LICENSE).
|
|
128
143
|
|