Overview

OEB Visualizations is a collection of Vue components for data visualization in OpenEBench.

Installation

To install the package run:

npm install @inb/oeb_visualizations

Usage

In Vue applications

You can find more complete examples in the documentation of each component.

Install @inb/oeb_visualizations in your project and import the component you want to use. Then add it to the components section of your Vue component and use it in the template.

<template>
    <div>
        <citationsPlot :dataTraces="data" />
    </div>
</template>
<script>
import citationsPlot from '@inb/oeb_visualizations'

export default {
  name: 'IndexPage',
  components: {
    citationsPlot
  },
    data(){
        return {
            data: [
                // Your data for the plot
            ]
        }
    }
}
</script>

In HTML pages

You can find a complete example here. Also available as a Code Pen.

oeb_visualization components can be embedded in any page. There is no need to install anything, everything necessary is contained in the HTML.

To use a component in an HTML page:

• Include oeb_visualizations and its dependencies (Vue and Plotly) in your HTML file.

  <script src="https://cdn.jsdelivr.net/npm/@inb/oeb_visualizations/dist/oeb-visualizations.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  

• Create a Vue instance and register the oeb_visualizations component you are going to use (citationsPlot in this example).

  <script>
      var app = new Vue({
          el: '#app',
          data: {
              // Other data available to the Vue instance goes here
              dataPlot: {
                  // Your data for the plot
              }
          }
      })
  
      Vue.component('citations-plot', 'oeb_visualizations'.citationsPlot)
  </script>
  

• Finally, create a div where Vue will be active (id=#app) and add your components under it (not necessarily as direct child).

  <div id="app">
      <citations-plot :dataTraces="dataPlot"></citations-plot>
  </div>