@circutor/charts-react 0.0.20 → 0.0.21
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 +116 -5
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,11 +1,122 @@
|
|
|
1
|
-
|
|
1
|
+
### MYC Charts
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
This repository aims to make the charts used by the Cloud team in their web applications accessible to the rest of the organization. This will facilitate their reuse, standardization, and maintenance across different projects.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
### How to Use
|
|
6
6
|
|
|
7
|
+
**Base Scenario**: We want to use the ITIC curve chart.
|
|
8
|
+
|
|
9
|
+
#### As a Web Component
|
|
10
|
+
|
|
11
|
+
To use the chart as a Web Component, simply import it from the CDN in your HTML code.
|
|
12
|
+
|
|
13
|
+
```html
|
|
14
|
+
<script
|
|
15
|
+
type="module"
|
|
16
|
+
src="https://unpkg.com/@circutor/charts/dist/charts/charts.esm.js"
|
|
17
|
+
></script>
|
|
18
|
+
<script
|
|
19
|
+
nomodule
|
|
20
|
+
src="https://unpkg.com/@circutor/charts/dist/charts/charts.js"
|
|
21
|
+
></script>
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
Then, you can directly insert the chart into your HTML:
|
|
25
|
+
|
|
26
|
+
```html
|
|
27
|
+
<itic-chart
|
|
28
|
+
groups='[{"groupName":"L1,L2,L3","points":[{"duration":230,"voltage":93.46,"ts":"2024-06-26T20:23:45.220000+02:00"}],"color":"#00B388"},{"groupName":"L2","points":[{"duration":20,"voltage":0.4000000000000057,"ts":"2025-01-26T23:04:34.840000+01:00"}],"color":"#20262C"}]'
|
|
29
|
+
></itic-chart>
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
<details>
|
|
33
|
+
<summary>Complete example</summary>
|
|
34
|
+
|
|
35
|
+
```html
|
|
36
|
+
<!DOCTYPE html>
|
|
37
|
+
<html lang="es">
|
|
38
|
+
<head>
|
|
39
|
+
<meta charset="UTF-8" />
|
|
40
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
41
|
+
<title>Charts</title>
|
|
42
|
+
|
|
43
|
+
<script
|
|
44
|
+
type="module"
|
|
45
|
+
src="https://unpkg.com/@circutor/charts/dist/charts/charts.esm.js"
|
|
46
|
+
></script>
|
|
47
|
+
<script
|
|
48
|
+
nomodule
|
|
49
|
+
src="https://unpkg.com/@circutor/charts/dist/charts/charts.js"
|
|
50
|
+
></script>
|
|
51
|
+
|
|
52
|
+
<style>
|
|
53
|
+
body {
|
|
54
|
+
font-family: Arial, sans-serif;
|
|
55
|
+
text-align: center;
|
|
56
|
+
padding: 20px;
|
|
57
|
+
}
|
|
58
|
+
mi-componente {
|
|
59
|
+
display: block;
|
|
60
|
+
margin-top: 20px;
|
|
61
|
+
}
|
|
62
|
+
</style>
|
|
63
|
+
</head>
|
|
64
|
+
<body>
|
|
65
|
+
<itic-chart
|
|
66
|
+
groups='[{"groupName":"L1,L2,L3","points":[{"duration":230,"voltage":93.46,"ts":"2024-06-26T20:23:45.220000+02:00"}],"color":"#00B388"},{"groupName":"L2","points":[{"duration":20,"voltage":0.4000000000000057,"ts":"2025-01-26T23:04:34.840000+01:00"}],"color":"#20262C"}]'
|
|
67
|
+
></itic-chart>
|
|
68
|
+
</body>
|
|
69
|
+
</html>
|
|
7
70
|
```
|
|
8
|
-
const reactLibrary = require('react');
|
|
9
71
|
|
|
10
|
-
|
|
72
|
+
</details>
|
|
73
|
+
|
|
74
|
+
#### From a React Application
|
|
75
|
+
|
|
76
|
+
1. **Install the package**
|
|
77
|
+
First, you need to install the `@circutor/charts-react` package in your project:
|
|
78
|
+
|
|
11
79
|
```
|
|
80
|
+
npm install @circutor/charts-react
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
2. **Import the component**
|
|
84
|
+
Then, import the component into your React file:
|
|
85
|
+
|
|
86
|
+
```javascript
|
|
87
|
+
import { IticChart } from '@circutor/charts-react';`>
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
3. **Use the component**
|
|
91
|
+
Now, you can use the chart in your application like any other React component. Just pass the necessary data and configurations:
|
|
92
|
+
|
|
93
|
+
```html
|
|
94
|
+
<IticChart
|
|
95
|
+
groups={[
|
|
96
|
+
{
|
|
97
|
+
groupName: "L1,L2,L3",
|
|
98
|
+
points: [
|
|
99
|
+
{
|
|
100
|
+
duration: 230,
|
|
101
|
+
voltage: 93.46,
|
|
102
|
+
ts: "2024-06-26T20:23:45.220000+02:00",
|
|
103
|
+
},
|
|
104
|
+
],
|
|
105
|
+
color: "#00B388",
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
groupName: "L2",
|
|
109
|
+
points: [
|
|
110
|
+
{
|
|
111
|
+
duration: 20,
|
|
112
|
+
voltage: 0.4000000000000057,
|
|
113
|
+
ts: "2025-01-26T23:04:34.840000+01:00",
|
|
114
|
+
},
|
|
115
|
+
],
|
|
116
|
+
color: "#20262C",
|
|
117
|
+
},
|
|
118
|
+
]}
|
|
119
|
+
></IticChart>
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
Remember to consult the documentation for each component for more details and configuration options.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@circutor/charts-react",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.21",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "apinto <apinto@circutor.com>",
|
|
6
6
|
"homepage": "",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"typescript": "^5.7.3"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@circutor/charts": "^0.0.
|
|
25
|
+
"@circutor/charts": "^0.0.21",
|
|
26
26
|
"@stencil/react-output-target": "^0.8.2"
|
|
27
27
|
},
|
|
28
28
|
"repository": {
|
|
@@ -32,5 +32,5 @@
|
|
|
32
32
|
"publishConfig": {
|
|
33
33
|
"access": "public"
|
|
34
34
|
},
|
|
35
|
-
"gitHead": "
|
|
35
|
+
"gitHead": "e028b97d43fcb4704607349eed2e891fccecf907"
|
|
36
36
|
}
|