@inb/oeb-widgets-graphs
v1.0.6
Published
Collection of OEB widgets for graphs components
Downloads
186
Readme
Documentation
The package is build with Lint Elements components and javascript modules.
It has some dependencies associated for the functionalities:
- html2canvas
- jspdf
- pareto-frontier
- simple-statistics
- plotly.js
:point_right: About You can see the complete documentation here
Project structure
- /src. Where the main application files are hosted.
- /src/demo. Live demo of applications functionalities and a .json file to simulate real data.
Build Setup
Download the package and install dependencies:
npm install
Serve with hot reload at localhost:
npm run dev
Build package for production:
npm run build
Usage
import '@inb/oeb-widgets-graphs/dist/oeb-widgets-graphs.es.js';
Then just declare the element with the variables that contain the data to be able to build the corresponding graph.
<widget-element
:data=graphData
:type=graphType>
</widget-element>
Graphs types
Bar plot
Bar plot shows the results of a benchmarking challenge that uses one single evaluation metric in the form of a Barplot. Challenge participants are shown in the X axis, while the value of their metric is shown in the Y axis. Bar plot live demo
Bar plot structure
You can see an example of a structure to display bar graphs within the "demo" section of the application. Bar plot structure example
Scatter plot
Scatter plot displays the results of scientific benchmarking experiments in graph format, and apply various classification methods to transform them to tabular format. Scatter plot live demo
Scatter plot classification
- Square quartiles - divide the plotting area in four squares by getting the 2nd quartile of the X and Y metrics.
- Diagonal quartiles - divide the plotting area with diagonal lines by assigning a score to each participant based in the distance to the 'optimal performance'.
- Clustering - group the participants using the K-means clustering algorithm and sort the clusters according to the performance.
Scatter plot structure
You can see an example of a structure to display bar graphs within the "demo" section of the application. Scatter plot structure example
Box plot
Box plot shiw the results of a benchmarking challenge that uses a graphical representation of the distribution of a dataset on a seven-number summary of datapoints. The challenge metrics is represented in Y axis by default. Box plot live demo
Box plot classification
The result of the plot can be ordened by maximum or minimum median value.
Box plot structure
You can see an example of a structure to display bar graphs within the "demo" section of the application. Box plot structure example
Radar plot
A radar chart is an informative visual tool in which multiple variables (three or more) are compared on a two-dimensional plane. To do this, we will create different axes that come from a common central point. In most cases, all axes are evenly distributed and drawn evenly relative to each other. Radar plot live demo
Radar plot structure
You can see an example of a structure to display bar graphs within the "demo" section of the application. Radar plot structure example.