@inb/oeb-uptime-chart
v1.0.0
Published
Standalone widget to display the uptime of a tool at OpenEBench
Downloads
5
Readme
OpenEBench software monitoring uptime Chart
This is a standalone widget to display the uptime of a tool at OpenEBench.
Live Demo
Live demo available at : https://inab.github.io/uptime-chart-OEB/
NPM Package
NPM Package @inb/oeb-classification-table
published to: https://www.npmjs.com/package/@inb/oeb-uptime-chart
.
How to use
The component can be imported in two ways: As npm package (preferred), or via the build file from the git repository (see bottom).
Use the npm Package (Recommended way)
Install the npm package in your project
npm i @inb/oeb-uptime-chart
Add JS cdn for d3 (
src
=https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.7/d3.min.js
)Add JS cdn for c3 (
src
=https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.3/c3.min.js
)Add stylesheet for c3 (
href
=https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.3/c3.min.css
)Add a div with the class
opebuptime
and the appropriate attributes (see "Attributes" section for more details):<div data-id="test" data-xaxis="true" data-yaxis="false" data-mode="dev" data-url="biotools:1000genomes_vep:1/web/browser.1000genomes.org" data-limit="5" class="opebuptime"> </div>
Import the
loadChart
function in your frontend component and call it:import {loadChart} from "@inb/oeb-uptime-chart" loadChart()
Clone from repository (Alternative way)
Add JS cdn for D3
<script src=https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.7/d3.min.js></script>
Add JS and CSS cdns for c3
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.3/c3.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.3/c3.min.js"></script>
Add a
div
with the classopebuptime
and the appropriate attributes (see "Attributes" section for more details).Add the build file which you can download from
build/build.js
and tag it into your html.<script src="build/build.js"></script>
You can then call the
loadChart()
function. The HTML file should look like this
Attributes
Attributes can be set on the <div> tag
- data-id : should be unique and start with a letter
- data-url : the ID of the tool from OEB
- data-title : chart title
- data-xaxis : boolean
- data-w : width of the chart
- data-h : height of the chart
- data-limit : amout of dates to be displayed (min : 5)