smarter-charts 1.0.1
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 +62 -0
- package/dist/smarter-charts.css +1 -0
- package/dist/smarter-charts.es.js +47494 -0
- package/dist/smarter-charts.umd.js +1837 -0
- package/package.json +42 -0
package/README.md
ADDED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
# SMARTER-charts
|
|
2
|
+
|
|
3
|
+
In this package are distributed the charts components developed for the precision irrigation system **SMARTER** by the *Business Intelligence Group* of University of Bologna.
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
## Installation
|
|
7
|
+
```bash
|
|
8
|
+
npm install smarter-charts
|
|
9
|
+
```
|
|
10
|
+
## Usage
|
|
11
|
+
|
|
12
|
+
All the components are exposed as Custum Elements that are defined by the funcion `registerChartComponents()` and then they can be used directly as HTML tags.
|
|
13
|
+
|
|
14
|
+
```js
|
|
15
|
+
import {registerChartComponents} from 'smarter-charts'
|
|
16
|
+
|
|
17
|
+
registerChartComponents()
|
|
18
|
+
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Global `config` Prop
|
|
22
|
+
|
|
23
|
+
All components accept a `config` object to handle backend connection, resource paths, and time filtering.
|
|
24
|
+
|
|
25
|
+
```js
|
|
26
|
+
config: {
|
|
27
|
+
environment: {
|
|
28
|
+
host: string, // Backend API base URL
|
|
29
|
+
token: string // Authorization token for API calls
|
|
30
|
+
},
|
|
31
|
+
paths: {
|
|
32
|
+
refStructureName: string,
|
|
33
|
+
companyName: string,
|
|
34
|
+
fieldName: string,
|
|
35
|
+
sectorName: string,
|
|
36
|
+
plantRow: string // name of the thesis
|
|
37
|
+
}, // One or more resource identifiers (e.g., field IDs, sensors, plots)
|
|
38
|
+
params: {
|
|
39
|
+
timeFilterFrom?: string, // ISO date string or timestamp (start of time range)
|
|
40
|
+
timeFilterTo?: string // ISO date string or timestamp (end of time range)
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## Available Components
|
|
46
|
+
|
|
47
|
+
| Component Tag| Description| Props/Events|
|
|
48
|
+
|----------------------------------------------|-------------------------------------------------------------------------|---|
|
|
49
|
+
| `<delta-chart-smarter>` | Line chart showing humidity level in relation to optimal state ||
|
|
50
|
+
| `<airtemperature-chart-smarter>` | Line chart for air temperature trends |
|
|
51
|
+
| `<meancountor-chart-smarter>` | Heatmap of monitored soil portion for **mean** of matric potential in a given period|
|
|
52
|
+
| `<stdcountor-chart-smarter>` | Heatmap of monitored soil portion for **standard deviation** of matric potential in a given period |
|
|
53
|
+
| `<dripperandpluv-chart-smarter>` | Line chart showing irrigation and rainfall |
|
|
54
|
+
| `<groundwaterpot-chart-smarter>` | Line chart for matric potential of grid sensors |
|
|
55
|
+
| `<humiditymap-smarter>` | Heatmap of monitored soil portion showing the matric potential | `:selectedTimestamp` timestamp of image to show
|
|
56
|
+
| `<humiditymultiline-chart-smarter>` | Area chart of humidity levels over times | `@selectTimestamp` events emitted containing the timestamp clicked
|
|
57
|
+
| `<heatmap-animation-smarter>` | Animation of humidity heatmap over time |
|
|
58
|
+
| `<optimal-humidity-heatmap-smarter>` | Heatmaps of optimal soil state to obtain with cell weights | `:selectedTimestamp` timestamp of image to show <br>`:showDistance` flag that indicates if show the distance matrix
|
|
59
|
+
| `<calendar-smarter>` | Calendar with irrigation events |
|
|
60
|
+
| `<water-aggregate-chart-smarter>` | Bar chart to summarize daily irrigation and rainfalls|
|
|
61
|
+
|
|
62
|
+
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.animator-controllers{position:relative;margin-top:50px}.btn-secondary{padding-left:20px;padding-right:20px}.timeline-placeholder{height:70px;margin-top:-10px}.charts-wrapper{position:relative;margin-top:40px;height:400px}.timeline-wrapper{position:absolute;top:50px;left:10px;right:10px;height:30px;background:#fff;transition:1s ease all;border-radius:4px;box-shadow:0 1px 5px #000000a6}.heatmap-timeline{position:absolute;top:0;right:15px;left:80px;height:100%}.heatmap-timeline .time-point{position:absolute;background:#fff;border:2px solid #272727;width:8px;height:8px;border-radius:100%;cursor:pointer;top:15px;transform:translate(-50%) translateY(-50%)}.heatmap-timeline .time-point.active{background:#000}.heatmap-timeline .time-point.active{background:#000;width:12px;height:12px}
|