sabrina v0.1.0-alpha.9
sabrina
sabrina is a dashboard server built using express, whose React DOM is dynamically controlled by client POST
requests.
ā ļø This project is currently experimental, so you must use at your own risk. It is in no way fit for a production environment.
š„ Features
āļø It's extensible!
- You can configure sabrina to support the visualisation of any React Components.
Rendered layouts are described using propeteer, so we can specify whatever props you want on rendered components.
ā” It's asynchronous!
Using websockets, sabrina will publish all dashboard updates to all client browsers at once.
š It's batteries included!
sabrina comes pre-packaged with react-mosaic, so you get awesome window management for free.
- It's bundled using parcel, so you know it's fast.
š Getting Started
Using npm
:
npm i sabrina
Using yarn
:
yarn add sabrina
Breaking Changes
0.1.0-alpha.6
Server configuration options are now specified using an options
object, as opposed to a sequence of primitives.
+ sabrina({ /* ui dependencies */ }, {
+ port: 3000,
+ socket: 40510,
+ });
- sabrina({ /* ui dependencies */ }, 3000, 40510);
š Usage
In this example, we'll use react-chartjs-2 to render a <Doughnut />
. We'll start by importing the server and configuring it to support this kind of component.
import "react-chartjs-2";
import sabrina from "sabrina";
sabrina({
'react-chartjs-2': ['Doughnut'],
});
When we run our application, it'll by default get published to http://localhost:3000:
$ ./node_modules/.bin/babel-node ./index.js
ā” Available at http://localhost:3000
Finally, we can start populating our dashboard by making some POST
requests to the /pane
route, which is used to add new tiled window content to the dashboard. Below, we use axios
:
import axios from "axios";
axios({
headers: {
"Content-Type": "application/json",
"Accept": "application/json"
},
url: "http://localhost:3000/pane",
method: "post",
data: {
title: "š ich bin ein berliner",
children: {
_: "Doughnut",
data: {
labels: ["How awesome is sabrina?"],
datasets: [{
data: [100],
backgroundColor: [
"#00FF00",
]
}],
}
}
}
});
And this will publish our new chart data to all connected clients. Simple!
āļø License
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago