@circutor/charts-react 0.0.20 → 0.1.0

package/README.md

@@ -1,11 +1,122 @@
-# `react`
+### MYC Charts
 
-> TODO: description
+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.
 
-## Usage
+### How to Use
 
+**Base Scenario**: We want to use the ITIC curve chart.
+
+#### As a Web Component
+
+To use the chart as a Web Component, simply import it from the CDN in your HTML code.
+
+```html
+<script
+  type="module"
+  src="https://unpkg.com/@circutor/charts/dist/charts/charts.esm.js"
+></script>
+<script
+  nomodule
+  src="https://unpkg.com/@circutor/charts/dist/charts/charts.js"
+></script>
+```
+
+Then, you can directly insert the chart into your HTML:
+
+```html
+<itic-chart
+  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"}]'
+></itic-chart>
+```
+
+<details>
+<summary>Complete example</summary>
+
+```html
+<!DOCTYPE html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Charts</title>
+
+    <script
+      type="module"
+      src="https://unpkg.com/@circutor/charts/dist/charts/charts.esm.js"
+    ></script>
+    <script
+      nomodule
+      src="https://unpkg.com/@circutor/charts/dist/charts/charts.js"
+    ></script>
+
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        text-align: center;
+        padding: 20px;
+      }
+      mi-componente {
+        display: block;
+        margin-top: 20px;
+      }
+    </style>
+  </head>
+  <body>
+    <itic-chart
+      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"}]'
+    ></itic-chart>
+  </body>
+</html>
 ```
-const reactLibrary = require('react');
 
-// TODO: DEMONSTRATE API
+</details>
+
+#### From a React Application
+
+1. **Install the package**  
+   First, you need to install the `@circutor/charts-react` package in your project:
+
 ```
+npm install @circutor/charts-react
+```
+
+2. **Import the component**  
+   Then, import the component into your React file:
+
+```javascript
+import { IticChart } from '@circutor/charts-react';`>
+```
+
+3. **Use the component**  
+   Now, you can use the chart in your application like any other React component. Just pass the necessary data and configurations:
+
+```html
+<IticChart
+        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",
+          },
+        ]}
+      ></IticChart>
+```
+
+Remember to consult the documentation for each component for more details and configuration options.

package/dist/components/stencil-generated/components.js

@@ -1,8 +1,7 @@
 'use client';
-import { IticChart as IticChartElement, defineCustomElement as defineIticChart } from "@circutor/charts/dist/components/itic-chart.js";
-import { MyComponent as MyComponentElement, defineCustomElement as defineMyComponent } from "@circutor/charts/dist/components/my-component.js";
 import { createComponent } from '@stencil/react-output-target/runtime';
 import React from 'react';
+import { IticChart as IticChartElement, defineCustomElement as defineIticChart } from "@circutor/charts/dist/components/itic-chart.js";
 export const IticChart = createComponent({
     tagName: 'itic-chart',
     elementClass: IticChartElement,
@@ -10,11 +9,4 @@ export const IticChart = createComponent({
     events: {},
     defineCustomElement: defineIticChart
 });
-export const MyComponent = createComponent({
-    tagName: 'my-component',
-    elementClass: MyComponentElement,
-    react: React,
-    events: {},
-    defineCustomElement: defineMyComponent
-});
 //# sourceMappingURL=components.js.map

package/dist/components/stencil-generated/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sourceRoot":"","sources":["../../../lib/components/stencil-generated/components.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AASb,OAAO,EAAE,SAAS,IAAI,gBAAgB,EAAE,mBAAmB,IAAI,eAAe,EAAE,MAAM,gDAAgD,CAAC;AACvI,OAAO,EAAE,WAAW,IAAI,kBAAkB,EAAE,mBAAmB,IAAI,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AAE/I,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AACvE,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,CAAC,MAAM,SAAS,GAA2E,eAAe,CAAoC;IAChJ,OAAO,EAAE,YAAY;IACrB,YAAY,EAAE,gBAAgB;IAE9B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,EAAqB;IAC7B,mBAAmB,EAAE,eAAe;CACvC,CAAC,CAAC;AAIH,MAAM,CAAC,MAAM,WAAW,GAA+E,eAAe,CAAwC;IAC1J,OAAO,EAAE,cAAc;IACvB,YAAY,EAAE,kBAAkB;IAEhC,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,EAAuB;IAC/B,mBAAmB,EAAE,iBAAiB;CACzC,CAAC,CAAC"}
+{"version":3,"file":"components.js","sourceRoot":"","sources":["../../../lib/components/stencil-generated/components.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAUb,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AACvE,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,SAAS,IAAI,gBAAgB,EAAE,mBAAmB,IAAI,eAAe,EAAE,MAAM,gDAAgD,CAAC;AAIvI,MAAM,CAAC,MAAM,SAAS,GAAiG,eAAe,CAA0D;IAC5L,OAAO,EAAE,YAAY;IACrB,YAAY,EAAE,gBAAgB;IAE9B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,EAAqB;IAC7B,mBAAmB,EAAE,eAAe;CACvC,CAAC,CAAC"}

package/dist/types/components/stencil-generated/components.d.ts

@@ -1,8 +1,5 @@
-import { IticChart as IticChartElement } from "@circutor/charts/dist/components/itic-chart.js";
-import { MyComponent as MyComponentElement } from "@circutor/charts/dist/components/my-component.js";
 import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
-type IticChartEvents = NonNullable<unknown>;
-export declare const IticChart: StencilReactComponent<IticChartElement, IticChartEvents>;
-type MyComponentEvents = NonNullable<unknown>;
-export declare const MyComponent: StencilReactComponent<MyComponentElement, MyComponentEvents>;
-export {};
+import type { Components } from "@circutor/charts/dist/components";
+import { IticChart as IticChartElement } from "@circutor/charts/dist/components/itic-chart.js";
+export type IticChartEvents = NonNullable<unknown>;
+export declare const IticChart: StencilReactComponent<IticChartElement, IticChartEvents, Components.IticChart>;

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@circutor/charts-react",
-  "version": "0.0.20",
-  "description": "",
+  "version": "0.1.0",
+  "description": "React wrappers for the @circutor/charts Web Components",
   "author": "apinto <apinto@circutor.com>",
-  "homepage": "",
   "license": "ISC",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -12,8 +11,11 @@
     "dist"
   ],
   "scripts": {
-    "build": "npm run tsc",
-    "tsc": "tsc -p . --outDir ./dist"
+    "build": "tsc -p . --outDir ./dist"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   },
   "devDependencies": {
     "@types/react": "^19.0.8",
@@ -22,8 +24,8 @@
     "typescript": "^5.7.3"
   },
   "dependencies": {
-    "@circutor/charts": "^0.0.20",
-    "@stencil/react-output-target": "^0.8.2"
+    "@circutor/charts": "^0.1.0",
+    "@stencil/react-output-target": "^1.6.5"
   },
   "repository": {
     "type": "git",
@@ -32,5 +34,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7ca8496e18978b80751943374e146a7f10d2aab3"
+  "gitHead": "44a514e1c49b34d4ab2a9e52d1354c3753c76e0b"
 }

package/dist/components/stencil-generated/IticChart.js

@@ -1,13 +0,0 @@
-'use client';
-import { IticChart as IticChartElement, defineCustomElement as defineIticChart } from "../../../../stencil/dist/components/itic-chart.js";
-import { createComponent } from '@stencil/react-output-target/runtime';
-import React from 'react';
-const IticChart = createComponent({
-    tagName: 'itic-chart',
-    elementClass: IticChartElement,
-    react: React,
-    events: {},
-    defineCustomElement: defineIticChart
-});
-export default IticChart;
-//# sourceMappingURL=IticChart.js.map

package/dist/components/stencil-generated/IticChart.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"IticChart.js","sourceRoot":"","sources":["../../../lib/components/stencil-generated/IticChart.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AASb,OAAO,EAAE,SAAS,IAAI,gBAAgB,EAAE,mBAAmB,IAAI,eAAe,EAAE,MAAM,mDAAmD,CAAC;AAE1I,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AACvE,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,SAAS,GAA2E,eAAe,CAAoC;IACzI,OAAO,EAAE,YAAY;IACrB,YAAY,EAAE,gBAAgB;IAE9B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,EAAqB;IAC7B,mBAAmB,EAAE,eAAe;CACvC,CAAC,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/dist/components/stencil-generated/MyComponent.js

@@ -1,13 +0,0 @@
-'use client';
-import { MyComponent as MyComponentElement, defineCustomElement as defineMyComponent } from "../../../../stencil/dist/components/my-component.js";
-import { createComponent } from '@stencil/react-output-target/runtime';
-import React from 'react';
-const MyComponent = createComponent({
-    tagName: 'my-component',
-    elementClass: MyComponentElement,
-    react: React,
-    events: {},
-    defineCustomElement: defineMyComponent
-});
-export default MyComponent;
-//# sourceMappingURL=MyComponent.js.map

package/dist/components/stencil-generated/MyComponent.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MyComponent.js","sourceRoot":"","sources":["../../../lib/components/stencil-generated/MyComponent.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AASb,OAAO,EAAE,WAAW,IAAI,kBAAkB,EAAE,mBAAmB,IAAI,iBAAiB,EAAE,MAAM,qDAAqD,CAAC;AAElJ,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AACvE,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,GAA+E,eAAe,CAAwC;IACnJ,OAAO,EAAE,cAAc;IACvB,YAAY,EAAE,kBAAkB;IAEhC,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,EAAuB;IAC/B,mBAAmB,EAAE,iBAAiB;CACzC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC"}

package/dist/types/components/stencil-generated/IticChart.d.ts

@@ -1,5 +0,0 @@
-import { IticChart as IticChartElement } from "../../../../stencil/dist/components/itic-chart.js";
-import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
-type IticChartEvents = NonNullable<unknown>;
-declare const IticChart: StencilReactComponent<IticChartElement, IticChartEvents>;
-export default IticChart;

package/dist/types/components/stencil-generated/MyComponent.d.ts

@@ -1,5 +0,0 @@
-import { MyComponent as MyComponentElement } from "../../../../stencil/dist/components/my-component.js";
-import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
-type MyComponentEvents = NonNullable<unknown>;
-declare const MyComponent: StencilReactComponent<MyComponentElement, MyComponentEvents>;
-export default MyComponent;

package/dist/types/components/stencil-generated/components.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../../lib/components/stencil-generated/components.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,SAAS,IAAI,gBAAgB,EAA0C,MAAM,gDAAgD,CAAC;AACvI,OAAO,EAAE,WAAW,IAAI,kBAAkB,EAA4C,MAAM,kDAAkD,CAAC;AAC/I,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAIlF,KAAK,eAAe,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;AAE5C,eAAO,MAAM,SAAS,EAAE,qBAAqB,CAAC,gBAAgB,EAAE,eAAe,CAO7E,CAAC;AAEH,KAAK,iBAAiB,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;AAE9C,eAAO,MAAM,WAAW,EAAE,qBAAqB,CAAC,kBAAkB,EAAE,iBAAiB,CAOnF,CAAC"}

package/dist/types/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,2CAA2C,CAAC"}