@icgcat/chart 0.0.1 → 0.0.2

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.
Files changed (2) hide show
  1. package/README.md +90 -89
  2. package/package.json +2 -2
package/README.md CHANGED
@@ -1,128 +1,129 @@
1
- # Accordion Component for Svelte
1
+ # Chart Component
2
2
 
3
- ## Introduction
4
- This Svelte package provides two components for creating collapsible sections: `Accordion` and `SubAccordion`. These components are accessible, customizable, and lightweight, with built-in animations and rich styling options. Perfect for displaying nested or standalone collapsible content sections in a clean and interactive manner.
3
+ 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
4
 
6
5
  ---
7
6
 
8
7
  ## Installation
9
8
 
10
- To clone the package:
9
+ Install the package using npm:
11
10
 
12
11
  ```bash
13
- git clone git@autogitlab.icgc.local:geostarters/components/accordion.git
12
+ npm install @icgcat/chart
14
13
  ```
15
14
 
16
- To install the package, use npm or yarn:
17
-
18
- ```bash
19
- npm install @icgcat/accordion
20
- ```
15
+ The package automatically includes the required Chart.js dependency, so there is no need for additional installations.
21
16
 
22
17
  ---
23
18
 
24
- ## Usage
19
+ ## Features
25
20
 
26
- ### Import and Basic Example
27
- Here's how to use the `Accordion` and `SubAccordion` components in your Svelte application:
21
+ - **Chart Types**: Supports bar, line, pie, and other chart types supported by Chart.js.
22
+ - **Customizable**: Easily configure labels, datasets, and chart options.
23
+ - **Responsive Design**: Charts adapt to different screen sizes.
24
+ - **Legend Management**: Position and display customization for chart legends.
28
25
 
29
- ```svelte
30
- <script>
31
- import { Accordion, SubAccordion } from "@icgcat/accordion";
32
-
33
- let openedAccordion = 0; // Track the currently opened accordion
26
+ ---
34
27
 
35
- const toggleAccordion = (id) => {
36
- openedAccordion = openedAccordion === id ? 0 : id;
37
- };
38
- </script>
28
+ ## Props
39
29
 
40
- <Accordion
41
- id={1}
42
- openedAccordion={openedAccordion}
43
- title="First Section"
44
- iconTheme = "share"
45
- onToggle={toggleAccordion}
46
- component={() => <p>Content for the first section</p>}
47
- />
48
-
49
- <Accordion
50
- id={2}
51
- openedAccordion={openedAccordion}
52
- title="Second Section"
53
- iconTheme = "map"
54
- onToggle={toggleAccordion}
55
- >
56
- <SubAccordion
57
- id={3}
58
- openedAccordion={openedAccordion}
59
- title="Nested Section"
60
- onToggle={toggleAccordion}
61
- >
62
- <p>Content for the nested section</p>
63
- </SubAccordion>
64
- </Accordion>
30
+ ### Configurable Properties
31
+
32
+ - **`chartData`**: (Required) Configuration object for the chart. This includes:
33
+ - `type`: Type of the chart (e.g., `bar`, `line`, `pie`).
34
+ - `data`: Chart data, including `labels` and `datasets`.
35
+ - `options`: Additional Chart.js options for customization.
36
+
37
+ #### Example `chartData` Object
38
+
39
+ ```javascript
40
+ {
41
+ type: "bar",
42
+ data: {
43
+ labels: ["January", "February", "March"],
44
+ datasets: [
45
+ {
46
+ label: "Sample Data",
47
+ data: [10, 20, 30],
48
+ backgroundColor: "rgba(255, 99, 132, 0.2)",
49
+ borderColor: "rgba(255, 99, 132, 1)",
50
+ borderWidth: 1,
51
+ },
52
+ ],
53
+ },
54
+ options: {
55
+ responsive: true,
56
+ plugins: {
57
+ legend: {
58
+ display: true,
59
+ position: "top",
60
+ },
61
+ },
62
+ },
63
+ }
65
64
  ```
66
65
 
67
66
  ---
68
67
 
69
- ## Props
70
- ### Accordion
71
- The `Accordion` component accepts the following props:
72
-
73
- | Prop | Type | Default | Description |
74
- |-------------------|----------|------------------------|-----------------------------------------------|
75
- | `id` | `number` | `0` | Unique identifier for each accordion. |
76
- | `openedAccordion` | `number` | `0` | Tracks the currently opened accordion. |
77
- | `title` | `string` | `""` | The title displayed in the accordion header. |
78
- | `className` | `string` | `"acc"` | Custom CSS class for styling. |
79
- | `iconTheme` | `string` | `"keyboard_arrow_down"` | Icon displayed in the accordion header. |
80
- | `component` | `any` | `null` | Content rendered inside the accordion body. |
81
- | `onToggle` | `function` | `null` | Callback triggered when the accordion is toggled. |
82
- | `openColor` | `string` | `"#FFE448"` | Background color when the accordion is open. |
83
- | `backgroundColor` | `string` | `"#F5F5F5"` | Default background color. |
84
- | `hoverColor` | `string` | `"rgb(173, 173, 173)"`| Background color on hover. |
85
- | `activeColorStyle`| `string` | `"rgb(173, 173, 173)"`| Background color on active state. |
86
- | `fontColor` | `string` | `"black"` | Font color for the accordion header. |
87
- | `children` | `function` | `null` | Content passed dynamically to the accordion body. |
88
-
89
- ### SubAccordion
90
- The `SubAccordion` component accepts the same props as `Accordion`, with the exception of `component`. Instead, it expects content to be passed as `children`.
68
+ ## Usage Example
69
+
70
+ ```svelte
71
+ <script>
72
+ import Chart from '@icgcat/chart';
73
+
74
+ const chartData = {
75
+ type: "line",
76
+ data: {
77
+ labels: ["January", "February", "March"],
78
+ datasets: [
79
+ {
80
+ label: "Monthly Sales",
81
+ data: [50, 75, 100],
82
+ backgroundColor: "rgba(54, 162, 235, 0.2)",
83
+ borderColor: "rgba(54, 162, 235, 1)",
84
+ borderWidth: 2,
85
+ },
86
+ ],
87
+ },
88
+ options: {
89
+ responsive: true,
90
+ plugins: {
91
+ legend: {
92
+ display: true,
93
+ position: "bottom",
94
+ },
95
+ },
96
+ },
97
+ };
98
+ </script>
99
+
100
+ <ChartComponent {chartData} />
101
+ ```
91
102
 
92
103
  ---
93
104
 
94
105
  ## Styling
95
- The components come with default styles, but you can override them using custom CSS. For example:
96
106
 
97
- ```css
98
- .acc {
99
- border-radius: 8px;
100
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
101
- }
107
+ The component comes with minimal styling for the canvas element. Customize it as needed:
102
108
 
103
- .collapsible-header {
104
- transition: background-color 0.3s ease;
109
+ ```css
110
+ canvas {
111
+ max-width: 100%;
112
+ margin: 20px 0;
105
113
  }
106
114
  ```
107
115
 
108
116
  ---
109
117
 
110
- ## Transitions
111
- These components use Svelte's `slide` transition for smooth opening and closing animations. You can modify or replace the transition if desired.
112
-
113
- ---
114
-
115
- ## Accessibility
116
- - Fully keyboard-navigable.
117
- - Supports dynamic aria-expanded attributes for screen readers.
118
+ ## Dependencies
118
119
 
119
- ---
120
+ - `chart.js`
120
121
 
121
- ## Contributions
122
- Feel free to fork this repository and open pull requests to improve the components or add new features.
122
+ This dependency is included automatically when you install the package.
123
123
 
124
124
  ---
125
125
 
126
126
  ## License
127
- This project is licensed under the MIT License.
127
+
128
+ This project is licensed under the [MIT License](LICENSE).
128
129
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@icgcat/chart",
3
- "version": "0.0.1",
3
+ "version": "0.0.2",
4
4
  "main": "src/index.js",
5
5
  "type": "module",
6
6
  "scripts": {
@@ -23,4 +23,4 @@
23
23
  "dependencies": {
24
24
  "chart.js": "^4.4.7"
25
25
  }
26
- }
26
+ }