@matdata/yasgui-chart-plugin 0.1.0 → 1.0.0
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/LICENSE +201 -201
- package/README.md +124 -124
- package/dist/yasgui-chart-plugin.cjs.js.map +1 -1
- package/dist/yasgui-chart-plugin.css +495 -495
- package/dist/yasgui-chart-plugin.esm.js.map +1 -1
- package/dist/yasgui-chart-plugin.min.js.map +1 -1
- package/package.json +65 -65
package/README.md
CHANGED
|
@@ -1,124 +1,124 @@
|
|
|
1
|
-
# YASGUI Chart Plugin
|
|
2
|
-
|
|
3
|
-
[](https://opensource.org/licenses/Apache-2.0)
|
|
4
|
-
[](https://www.npmjs.com/package/@matdata/yasgui-chart-plugin)
|
|
5
|
-
|
|
6
|
-
A YASGUI (YASR) plugin that visualises SPARQL **SELECT** results as charts: bar (grouped, stacked, horizontal), line, area, pie, donut, scatter and histogram. It is built on [Apache ECharts](https://echarts.apache.org/) and is part of [MatGUI](https://github.com/Matdata-eu/MatGUI).
|
|
7
|
-
|
|
8
|
-
**Online demo:** https://matdata-eu.github.io/yasgui-chart-plugin/
|
|
9
|
-
|
|
10
|
-
## ✨ Features
|
|
11
|
-
|
|
12
|
-
- **📊 Chart types**: bar, stacked bar, horizontal bar, line, area, pie, donut, scatter and histogram
|
|
13
|
-
- **🪄 Automatic choice**: a label/IRI column plus numbers gives a bar chart, a date column plus numbers a line chart, numbers against numbers a scatter plot, and a single numeric column a histogram
|
|
14
|
-
- **🎛️ Controls**: pick the chart type and the category, value and series columns. The choice is saved per tab; a different query (other variables) starts from the automatic chart again
|
|
15
|
-
- **🧮 Long results**: a second category-like column (e.g. `?country ?type ?count`) is split into series automatically; rows that repeat a category are summed
|
|
16
|
-
- **🏷️ Readable labels**: IRIs are shown with their label column (`?x` with `?xLabel`) or as prefixed names
|
|
17
|
-
- **🔎 Ctrl+click describe**: Ctrl+click a bar, slice or point to see the triples of its IRI (Ctrl+Shift+click for the triples where it is the object), with the same modal as the table and geo plugins
|
|
18
|
-
- **🌓 Light and dark theme**: follows the YASGUI theme and switches live
|
|
19
|
-
- **🖼️ Export**: download the chart as PNG or SVG
|
|
20
|
-
- **🔍 Zoom**: a zoom slider appears for long category axes
|
|
21
|
-
- Only offered when the results contain at least one numeric column
|
|
22
|
-
|
|
23
|
-
## 📦 Installation
|
|
24
|
-
|
|
25
|
-
### NPM
|
|
26
|
-
|
|
27
|
-
```bash
|
|
28
|
-
npm install @matdata/yasgui-chart-plugin
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
```javascript
|
|
32
|
-
import Yasgui from '@matdata/yasgui';
|
|
33
|
-
import ChartPlugin from '@matdata/yasgui-chart-plugin';
|
|
34
|
-
import '@matdata/yasgui-chart-plugin/dist/yasgui-chart-plugin.min.css';
|
|
35
|
-
|
|
36
|
-
Yasgui.Yasr.registerPlugin('Chart', ChartPlugin);
|
|
37
|
-
|
|
38
|
-
const yasgui = new Yasgui(document.getElementById('yasgui'), {
|
|
39
|
-
yasr: { pluginOrder: ['Table', 'response', 'Chart'] },
|
|
40
|
-
});
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
MatGUI ([@matdata/yasgui](https://www.npmjs.com/package/@matdata/yasgui)) already includes the chart plugin.
|
|
44
|
-
|
|
45
|
-
### CDN (UMD)
|
|
46
|
-
|
|
47
|
-
```html
|
|
48
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@matdata/yasgui/build/yasgui.min.css" />
|
|
49
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@matdata/yasgui-chart-plugin/dist/yasgui-chart-plugin.min.css" />
|
|
50
|
-
<script src="https://cdn.jsdelivr.net/npm/@matdata/yasgui/build/yasgui.min.js"></script>
|
|
51
|
-
<script src="https://cdn.jsdelivr.net/npm/@matdata/yasgui-chart-plugin/dist/yasgui-chart-plugin.min.js"></script>
|
|
52
|
-
<script>
|
|
53
|
-
// The plugin registers itself as 'Chart' when window.Yasgui exists
|
|
54
|
-
const yasgui = new Yasgui(document.getElementById('yasgui'));
|
|
55
|
-
</script>
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
## 🚀 Usage
|
|
59
|
-
|
|
60
|
-
Run a SELECT query with at least one numeric column and open the **Chart** tab. For example:
|
|
61
|
-
|
|
62
|
-
```sparql
|
|
63
|
-
PREFIX era: <http://data.europa.eu/949/>
|
|
64
|
-
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
|
|
65
|
-
|
|
66
|
-
SELECT ?country (COUNT(?op) AS ?operationalPoints) WHERE {
|
|
67
|
-
?op a era:OperationalPoint ;
|
|
68
|
-
era:inCountry ?country .
|
|
69
|
-
}
|
|
70
|
-
GROUP BY ?country
|
|
71
|
-
ORDER BY DESC(?operationalPoints)
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
### Toolbar
|
|
75
|
-
|
|
76
|
-
| Control | What it does |
|
|
77
|
-
| --- | --- |
|
|
78
|
-
| **Chart** | Chart type |
|
|
79
|
-
| **X axis** / **Slices** | Column used for the categories (bars, slices) or the x axis |
|
|
80
|
-
| **Values** / **Size** | Numeric column(s) to plot; pie, donut and histogram use one |
|
|
81
|
-
| **Series** | Column whose values split the data into series (grouped or stacked bars, several lines) |
|
|
82
|
-
| **Auto** | Go back to the automatic chart for these results |
|
|
83
|
-
| **PNG** / **SVG** | Download the chart |
|
|
84
|
-
|
|
85
|
-
The YASR download button also saves the chart as PNG.
|
|
86
|
-
|
|
87
|
-
### How columns are read
|
|
88
|
-
|
|
89
|
-
| Column kind | Recognised when every bound value is |
|
|
90
|
-
| --- | --- |
|
|
91
|
-
| number | an `xsd` numeric literal, or a plain literal that reads as a number |
|
|
92
|
-
| date | an `xsd:date`, `xsd:dateTime`, `xsd:gYear` or `xsd:gYearMonth` literal |
|
|
93
|
-
| IRI | an IRI |
|
|
94
|
-
| text | anything else |
|
|
95
|
-
|
|
96
|
-
A text column is used as the label of an IRI column when it is named after it (`?line` with `?lineLabel`, `?line_label` or `?lineName`), or when it is the only text column and maps 1:1 onto the only IRI column.
|
|
97
|
-
|
|
98
|
-
### Options
|
|
99
|
-
|
|
100
|
-
```javascript
|
|
101
|
-
Yasgui.Yasr.registerPlugin('Chart', ChartPlugin);
|
|
102
|
-
Yasgui.Yasr.defaults.plugins.Chart = { enabled: true, options: { maxRows: 10000 } };
|
|
103
|
-
```
|
|
104
|
-
|
|
105
|
-
| Option | Default | Description |
|
|
106
|
-
| --- | --- | --- |
|
|
107
|
-
| `maxRows` | `5000` | Maximum number of result rows plotted; a note says when results are cut |
|
|
108
|
-
|
|
109
|
-
## 🛠️ Development
|
|
110
|
-
|
|
111
|
-
```bash
|
|
112
|
-
npm install
|
|
113
|
-
npm run dev # demo with live reload at http://localhost:5173
|
|
114
|
-
npm test # unit tests (jest)
|
|
115
|
-
npm run typecheck # TypeScript
|
|
116
|
-
npm run build # dist/ bundles (ESM, CJS, IIFE), CSS and type declarations
|
|
117
|
-
npm run build:demo # static demo in demo/dist
|
|
118
|
-
```
|
|
119
|
-
|
|
120
|
-
The demo is deployed to GitHub Pages on every push to `main`. Publishing a GitHub release publishes the package to npm (version taken from the tag) and attaches the minified bundles to the release.
|
|
121
|
-
|
|
122
|
-
## 📄 License
|
|
123
|
-
|
|
124
|
-
Apache 2.0
|
|
1
|
+
# YASGUI Chart Plugin
|
|
2
|
+
|
|
3
|
+
[](https://opensource.org/licenses/Apache-2.0)
|
|
4
|
+
[](https://www.npmjs.com/package/@matdata/yasgui-chart-plugin)
|
|
5
|
+
|
|
6
|
+
A YASGUI (YASR) plugin that visualises SPARQL **SELECT** results as charts: bar (grouped, stacked, horizontal), line, area, pie, donut, scatter and histogram. It is built on [Apache ECharts](https://echarts.apache.org/) and is part of [MatGUI](https://github.com/Matdata-eu/MatGUI).
|
|
7
|
+
|
|
8
|
+
**Online demo:** https://matdata-eu.github.io/yasgui-chart-plugin/
|
|
9
|
+
|
|
10
|
+
## ✨ Features
|
|
11
|
+
|
|
12
|
+
- **📊 Chart types**: bar, stacked bar, horizontal bar, line, area, pie, donut, scatter and histogram
|
|
13
|
+
- **🪄 Automatic choice**: a label/IRI column plus numbers gives a bar chart, a date column plus numbers a line chart, numbers against numbers a scatter plot, and a single numeric column a histogram
|
|
14
|
+
- **🎛️ Controls**: pick the chart type and the category, value and series columns. The choice is saved per tab; a different query (other variables) starts from the automatic chart again
|
|
15
|
+
- **🧮 Long results**: a second category-like column (e.g. `?country ?type ?count`) is split into series automatically; rows that repeat a category are summed
|
|
16
|
+
- **🏷️ Readable labels**: IRIs are shown with their label column (`?x` with `?xLabel`) or as prefixed names
|
|
17
|
+
- **🔎 Ctrl+click describe**: Ctrl+click a bar, slice or point to see the triples of its IRI (Ctrl+Shift+click for the triples where it is the object), with the same modal as the table and geo plugins
|
|
18
|
+
- **🌓 Light and dark theme**: follows the YASGUI theme and switches live
|
|
19
|
+
- **🖼️ Export**: download the chart as PNG or SVG
|
|
20
|
+
- **🔍 Zoom**: a zoom slider appears for long category axes
|
|
21
|
+
- Only offered when the results contain at least one numeric column
|
|
22
|
+
|
|
23
|
+
## 📦 Installation
|
|
24
|
+
|
|
25
|
+
### NPM
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
npm install @matdata/yasgui-chart-plugin
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
```javascript
|
|
32
|
+
import Yasgui from '@matdata/yasgui';
|
|
33
|
+
import ChartPlugin from '@matdata/yasgui-chart-plugin';
|
|
34
|
+
import '@matdata/yasgui-chart-plugin/dist/yasgui-chart-plugin.min.css';
|
|
35
|
+
|
|
36
|
+
Yasgui.Yasr.registerPlugin('Chart', ChartPlugin);
|
|
37
|
+
|
|
38
|
+
const yasgui = new Yasgui(document.getElementById('yasgui'), {
|
|
39
|
+
yasr: { pluginOrder: ['Table', 'response', 'Chart'] },
|
|
40
|
+
});
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
MatGUI ([@matdata/yasgui](https://www.npmjs.com/package/@matdata/yasgui)) already includes the chart plugin.
|
|
44
|
+
|
|
45
|
+
### CDN (UMD)
|
|
46
|
+
|
|
47
|
+
```html
|
|
48
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@matdata/yasgui/build/yasgui.min.css" />
|
|
49
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@matdata/yasgui-chart-plugin/dist/yasgui-chart-plugin.min.css" />
|
|
50
|
+
<script src="https://cdn.jsdelivr.net/npm/@matdata/yasgui/build/yasgui.min.js"></script>
|
|
51
|
+
<script src="https://cdn.jsdelivr.net/npm/@matdata/yasgui-chart-plugin/dist/yasgui-chart-plugin.min.js"></script>
|
|
52
|
+
<script>
|
|
53
|
+
// The plugin registers itself as 'Chart' when window.Yasgui exists
|
|
54
|
+
const yasgui = new Yasgui(document.getElementById('yasgui'));
|
|
55
|
+
</script>
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## 🚀 Usage
|
|
59
|
+
|
|
60
|
+
Run a SELECT query with at least one numeric column and open the **Chart** tab. For example:
|
|
61
|
+
|
|
62
|
+
```sparql
|
|
63
|
+
PREFIX era: <http://data.europa.eu/949/>
|
|
64
|
+
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
|
|
65
|
+
|
|
66
|
+
SELECT ?country (COUNT(?op) AS ?operationalPoints) WHERE {
|
|
67
|
+
?op a era:OperationalPoint ;
|
|
68
|
+
era:inCountry ?country .
|
|
69
|
+
}
|
|
70
|
+
GROUP BY ?country
|
|
71
|
+
ORDER BY DESC(?operationalPoints)
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### Toolbar
|
|
75
|
+
|
|
76
|
+
| Control | What it does |
|
|
77
|
+
| --- | --- |
|
|
78
|
+
| **Chart** | Chart type |
|
|
79
|
+
| **X axis** / **Slices** | Column used for the categories (bars, slices) or the x axis |
|
|
80
|
+
| **Values** / **Size** | Numeric column(s) to plot; pie, donut and histogram use one |
|
|
81
|
+
| **Series** | Column whose values split the data into series (grouped or stacked bars, several lines) |
|
|
82
|
+
| **Auto** | Go back to the automatic chart for these results |
|
|
83
|
+
| **PNG** / **SVG** | Download the chart |
|
|
84
|
+
|
|
85
|
+
The YASR download button also saves the chart as PNG.
|
|
86
|
+
|
|
87
|
+
### How columns are read
|
|
88
|
+
|
|
89
|
+
| Column kind | Recognised when every bound value is |
|
|
90
|
+
| --- | --- |
|
|
91
|
+
| number | an `xsd` numeric literal, or a plain literal that reads as a number |
|
|
92
|
+
| date | an `xsd:date`, `xsd:dateTime`, `xsd:gYear` or `xsd:gYearMonth` literal |
|
|
93
|
+
| IRI | an IRI |
|
|
94
|
+
| text | anything else |
|
|
95
|
+
|
|
96
|
+
A text column is used as the label of an IRI column when it is named after it (`?line` with `?lineLabel`, `?line_label` or `?lineName`), or when it is the only text column and maps 1:1 onto the only IRI column.
|
|
97
|
+
|
|
98
|
+
### Options
|
|
99
|
+
|
|
100
|
+
```javascript
|
|
101
|
+
Yasgui.Yasr.registerPlugin('Chart', ChartPlugin);
|
|
102
|
+
Yasgui.Yasr.defaults.plugins.Chart = { enabled: true, options: { maxRows: 10000 } };
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
| Option | Default | Description |
|
|
106
|
+
| --- | --- | --- |
|
|
107
|
+
| `maxRows` | `5000` | Maximum number of result rows plotted; a note says when results are cut |
|
|
108
|
+
|
|
109
|
+
## 🛠️ Development
|
|
110
|
+
|
|
111
|
+
```bash
|
|
112
|
+
npm install
|
|
113
|
+
npm run dev # demo with live reload at http://localhost:5173
|
|
114
|
+
npm test # unit tests (jest)
|
|
115
|
+
npm run typecheck # TypeScript
|
|
116
|
+
npm run build # dist/ bundles (ESM, CJS, IIFE), CSS and type declarations
|
|
117
|
+
npm run build:demo # static demo in demo/dist
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
The demo is deployed to GitHub Pages on every push to `main`. Publishing a GitHub release publishes the package to npm (version taken from the tag) and attaches the minified bundles to the release.
|
|
121
|
+
|
|
122
|
+
## 📄 License
|
|
123
|
+
|
|
124
|
+
Apache 2.0
|