@htmlbricks/hb-chartjs 0.66.8 → 0.66.10
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 +40 -0
- package/manifest.json +1 -1
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
## `hb-chartjs` — chartjs
|
|
2
|
+
|
|
3
|
+
**Category:** data | **Tags:** data, chart
|
|
4
|
+
|
|
5
|
+
### What it does
|
|
6
|
+
|
|
7
|
+
Embeds Chart.js (line, bar, pie, radar, time scales, etc.) inside the shadow DOM. Pass a JSON `data` object with `type`, `data`, and optional `options`; the chart is recreated on data changes and when the container resizes. Clicking the canvas dispatches `chartClick` with the nearest point’s label and value.
|
|
8
|
+
|
|
9
|
+
### Custom element
|
|
10
|
+
|
|
11
|
+
`hb-chartjs`
|
|
12
|
+
|
|
13
|
+
### Attributes / props (snake_case)
|
|
14
|
+
|
|
15
|
+
| Property | Type | Notes |
|
|
16
|
+
| --- | --- | --- |
|
|
17
|
+
| `id` | string (optional) | Element identifier. |
|
|
18
|
+
| `style` | string (optional) | Inline style string. |
|
|
19
|
+
| `data` | any (required) | JSON Chart.js configuration: `{ type, data, options? }`. |
|
|
20
|
+
|
|
21
|
+
**CSS part:** `container`. No slots.
|
|
22
|
+
|
|
23
|
+
### Events (`CustomEvent` names)
|
|
24
|
+
|
|
25
|
+
- **`chartClick`** — `{ label?: string; value?: any }[]` — Per types, payload is an **array** of point-like objects (label/value pairs from the hit detection).
|
|
26
|
+
|
|
27
|
+
### Usage notes
|
|
28
|
+
|
|
29
|
+
- Chart.js runs inside shadow DOM; global Chart defaults may not apply unless duplicated.
|
|
30
|
+
- Bootstrap is not required for the canvas itself; host page can still use BS layout around the element.
|
|
31
|
+
- ResizeObserver + debounced window resize keep charts responsive.
|
|
32
|
+
- Pass `data` as a JSON string attribute from plain HTML.
|
|
33
|
+
|
|
34
|
+
### Minimal HTML example
|
|
35
|
+
|
|
36
|
+
```html
|
|
37
|
+
<hb-chartjs
|
|
38
|
+
data='{"type":"bar","data":{"labels":["A","B"],"datasets":[{"label":"K","data":[1,2]}]},"options":{}}'
|
|
39
|
+
></hb-chartjs>
|
|
40
|
+
```
|
package/manifest.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@htmlbricks/hb-chartjs",
|
|
3
|
-
"version": "0.66.
|
|
3
|
+
"version": "0.66.10",
|
|
4
4
|
"contributors": [],
|
|
5
5
|
"description": "Embeds Chart.js (line, bar, pie, radar, time scales, etc.) inside the shadow DOM. Pass a JSON `data` object with `type`, `data`, and optional `options`; the chart is recreated on data changes and when the container resizes (ResizeObserver + debounced window resize). Clicking the canvas dispatches `chartClick` with the nearest point’s label and value.",
|
|
6
6
|
"licenses": [
|