React Data Visualization

Installation

npm install --save react-dv

How To Use Data Visualization Component

First import this component where you want to use it

import { DataVisualization } from "react-dv"

Next add embedding script to index.html of project

<script
    src="<oac instance url>/dv/ui/api/v1/plugins/embedding/standalone/embedding.js"
    type="application/javascript">
</script>

Then just render it. This component requires Single Sign On to be enable between the Oracle Analytics Cloud and your application. For testing, you can run the application in the same browser where you are signed into Oracle Analytics Cloud to get around the Single Sign On requirement.

<DataVisualization path="oac/project/path" activeTab="1" showFilter={false} disableMobileLayout={false} />

Props

| Prop | Description | Value | | ------------------- | :--------------------------------------------------------: | ------------- | | path | Set path to Oracle Cloud Analytics project | String | | activeTab | Select active canvas to display | String | | showFilter | Determines if filtering is enabled for visualization | Boolean | | disableMobileLayout | Disables or enables mobile layout | Boolean |

Example

import React, { Component } from "react";
import DataVisualization from "react-dv";


class App extends Component {

  render() {
    return (
        <DataVisualization path="oac/project/path" activeTab="1" showFilter={false} disableMobileLayout={false} />
    );
  }
}

export default App;

How To Use Dashoboard Component

First import this component where you want to use it

import { Dashboard } from "react-dv"

Then just render it. This component requires Single Sign On to be enable between the Oracle Analytics Cloud and your application. For testing, you can run the application in the same browser where you are signed into Oracle Analytics Cloud to get around the Single Sign On requirement.

<Dashboard link="oac.com/prompted-url-link" />

Props

| Prop | Description | Value | | ------------------- | :--------------------------------------------------------: | ------------- | | link | Prompted URL for Business Intelligence Dashboard | String |

Example

import React, { Component } from "react";
import { Dashboard } from "react-dv";


class App extends Component {

  render() {
    return (
        <Dashboard link="oac.com/prompted-url-link" />
    );
  }
}

export default App;