@tomaso909/dashboard 1.3.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/README.md +89 -0
- package/dist/dashboard.obf.js +60 -0
- package/package.json +39 -0
package/README.md
ADDED
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
# Dashboard
|
|
2
|
+
|
|
3
|
+
Interactive data visualization dashboard with Plotly.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- Multiple plot types: line, scatter, contour, surface (3D), parallel axis, and polar
|
|
8
|
+
- Data grouping with color-coded visualization
|
|
9
|
+
- Dynamic variable selection via dropdown menus
|
|
10
|
+
- Responsive design with dark theme
|
|
11
|
+
- Uses colorscale and styles from w2uiplots library
|
|
12
|
+
|
|
13
|
+
## Installation
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Build
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
npm run build
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Development
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
npm run dev
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## Usage
|
|
32
|
+
|
|
33
|
+
```javascript
|
|
34
|
+
import Dashboard from './src/index.js';
|
|
35
|
+
|
|
36
|
+
// Create dashboard instance
|
|
37
|
+
const container = document.getElementById('dashboard-container');
|
|
38
|
+
const dashboard = new Dashboard(container);
|
|
39
|
+
|
|
40
|
+
// Set data (will update all existing plots)
|
|
41
|
+
const data = [
|
|
42
|
+
{ x: 1, y: 2, category: 'A', value: 10 },
|
|
43
|
+
{ x: 2, y: 4, category: 'B', value: 20 },
|
|
44
|
+
// ...
|
|
45
|
+
];
|
|
46
|
+
dashboard.setData(data);
|
|
47
|
+
|
|
48
|
+
// Add more plots programmatically
|
|
49
|
+
const plotId = dashboard.addPlot({
|
|
50
|
+
plotType: 'scatter',
|
|
51
|
+
xVar: 'x',
|
|
52
|
+
yVar: 'value',
|
|
53
|
+
groupVar: 'category'
|
|
54
|
+
});
|
|
55
|
+
|
|
56
|
+
// Or add a plot with default settings
|
|
57
|
+
dashboard.addPlot(); // Will create a line plot with default x and y
|
|
58
|
+
|
|
59
|
+
// Remove a specific plot
|
|
60
|
+
dashboard.removePlot(plotId);
|
|
61
|
+
|
|
62
|
+
// Clear all plots
|
|
63
|
+
dashboard.clearPlots();
|
|
64
|
+
|
|
65
|
+
// Render all plots (called automatically when data or settings change)
|
|
66
|
+
dashboard.render();
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## API
|
|
70
|
+
|
|
71
|
+
### Constructor
|
|
72
|
+
- `new Dashboard(container)` - Create a new dashboard in the given container element
|
|
73
|
+
|
|
74
|
+
### Methods
|
|
75
|
+
- `setData(data)` - Set the data for all plots. Data should be an array of objects
|
|
76
|
+
- `addPlot(config)` - Add a new plot to the dashboard
|
|
77
|
+
- `config.plotType` - Type of plot: 'line', 'scatter', 'contour', 'surface', 'parallel', or 'polar'
|
|
78
|
+
- `config.xVar` - Variable name for X axis
|
|
79
|
+
- `config.yVar` - Variable name for Y axis
|
|
80
|
+
- `config.groupVar` - Variable name for grouping/coloring (optional)
|
|
81
|
+
- Returns: plot ID (number)
|
|
82
|
+
- `removePlot(plotId)` - Remove a plot by its ID
|
|
83
|
+
- `clearPlots()` - Remove all plots
|
|
84
|
+
- `render()` - Re-render all plots (usually called automatically)
|
|
85
|
+
|
|
86
|
+
## Testing
|
|
87
|
+
|
|
88
|
+
Open `test.html` in a browser after building the project.
|
|
89
|
+
# dashboard
|