How to use graphs

The use of the graphs module is to provide a module to quickly shows your data into graphs.

Requirement
Usage examples
Configuration
- Common configuration
  - Tooltips
  - Listeners
- Graph specific configuration
  - Supported Graphs
    - BarGraph
    - LineGraph
    - PieGraph
    - Table
    - ChordGraph
    - SimpleTextGraph
    - VariationTextGraph
    - HeatmpaGraph
    - AreaGraph
    - GuageGraph
    - [Geomap] (#geomap)

Requirement-

We must need the following libraries which are using in different graphs -

  "react": "15.6.0",
  "react-dom": "15.6.0",
  "d3": "4.10.0",
  "eval-expression": "^1.0.0",
  "lodash": "^4.17.4",
  "material-ui": "^0.16.7",
  "material-ui-datatables": "0.18.2",
  "material-ui-superselectfield": "^1.9.8",
  "react-copy-to-clipboard": "^4.3.1",
  "react-filter-box": "^2.0.0",
  "react-fontawesome": "1.3.1",
  "react-icons": "^2.2.7",
  "react-lightweight-tooltip": "0.0.4",
  "react-tap-event-plugin": "2.0.1",
  "react-tooltip": "^3.2.1",
  "object-path": "^0.11.4",
  "react-google-maps": "^9.4.5"

Usage examples

Make sure your current project must be a valid git project, if not then run the below command git init
Now run the following command to download graph module into your specified path

  git submodule add https://github.com/nuagenetworks/vis-graphs.git your-path

Here is an example how to use bar graph into your component -

import React, {Component} from 'react';
import { GraphManager } from "path-to-your-graph-component/vis-graphs/Graphs/index";
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
import { theme } from "path-to-your-graph-component/vis-graphs/theme"
import injectTapEventPlugin from "react-tap-event-plugin";

injectTapEventPlugin();

const TABLE_DATA =  [
    {
        "L7Classification": "Proin",
        "Sum of MB": 10000
    },
    {
        "L7Classification": "Justo",
        "Sum of MB": 25000
    },
    ...
];

class Graph extends Component {

  handleClickEvent(datum) {
    //..handle click event
  }
  render() {
    // pass a graph name to getGraphComponent as a param to use that graph
    const GraphComponent = GraphManager.getGraphComponent('BarGraph')
    return (
        <MuiThemeProvider muiTheme={theme}>
            <GraphComponent
              data={data}
              data1={data1} // you may pass data from multiple source as well
              configuration={configuration} // configuration object
              width={width} // graph width (numeric)
              height={height} // graph height (numeric)
              onMarkClick={ this.handleClickEvent } // event listener
            />
        </MuiThemeProvider>
    );
  }
}

Note:

Make sure you have to wrap graph component with MuiThemeProvider and pass graph's theme to MuiThemeProvider as a props
Register injectTapEventPlugin() method before calling graph component to enable touch tap event on graphs

Common configuration

Configuration is a little more complex as it has more options. But it is working the same way, so don't worry :)

Here is the list of common options:

Tolltip - If you want to add tooltips on an existing configuration ? Update its configuration:

column* - attribute name to use to display the value
label - tooltip label. If not specified, column will be used.
format - d3 format style to display the column value

{
    // ...
    "data": {
        // ...
        "tooltip": [
            { "column": "L7Classification", "label": "L7 Signature" },
            { "column": "Sum of MB", "format": ",.2s"}
        ]
    }
    // ...
}

onMarkClick - Method used to handle click event

brush - (Number) to enble brushing with pre selected bars.Currently support in bar graph and heatmap graph. E.g -

"brush": 3,
"brushArea": 20

brushArea (Number) space in visualization where brush slider display (in percentage). Default is 20.

padding

top set top padding in pixels
bottom set bottom padding in pixels
right set right padding in pixels
left set left padding in pixels

margin*

top set top margin in pixels
bottom set bottom margin in pixels
right set right margin in pixels
left set left margin in pixels

colors - (array) List of colors to use to render the graph.

yLabelLimit - (numeric) Limit the character of y-axis label. Above the defined limit, the substring of the label will be display followed by the "..." and full label will be show on mouseover.

appendCharLength - (numeric) The length of the appended dots after the label if yLabelLimit defined

stroke

width define stroke width
color define stroke color

legend

show true to display legend. false otherwise. Default is false
orientation vertical or horizontal legend. Default is vertical
circleSize size of a legend circle. Default is 4 pixels
labelOffset space in pixel between the legend circle and its label. Default is 2.

filterOptions - Allows to set filters on the visualization. See dashboard configuration for more information as it is working the same way!

dateHistogram - To enable date formatted scaling if any of x-axis or y-axis data contain date. Default is false

x-axis and y-axis - (Supported Graphs - BarGraph, PieGraph, AreaGraph, HeatmapGraph, LineGraph)

xColumn attribute name in your results to use for x-axis
xLabel x-axis title
xTicks number of ticks to use for x-axis
xTickFormat d3 format style to display x-axis labels
xTickGrid (boolean) If set to true then the complete grid will be drawn
xTickSizeInner - If size is specified, sets the inner tick size to the specified value and returns the axis.
xTickSizeOuter If size is specified, sets the outer tick size to the specified value and returns the axis.
yColumn* attribute name in your results to use for y-axis
yLabel y-axis title
yTicks number of ticks to use on y-axis
yTickFormat d3 format style to display y-axis labels
yTickGrid (boolean) If set to true then the complete grid will be drawn
yTickSizeInner If size is specified, sets the inner tick size to the specified value and returns the axis.
yTickSizeOuter If size is specified, sets the outer tick size to the specified value and returns the axis.

Graph specific configuration

BarGraph

Display vertical or horizontal bar charts

orientation - Orientation of the graph. Default is vertical. Set to horizontal to have an horizontal bar chart.

otherOptions - (object) For grouping a data in order to show in single bar after defined limit of bars. Grouping can either be define in percentage or number. Default is percentage. E.g -

  "otherOptions": {
        "label": "Others", //used to display name of bar
        "limit": 5, // afer a given limit grouping is enable
        "type": "number" // it can be percentage as well
    }

stackColumn - Used to show stacked data in bars. E.g-

  "stackColumn": "social"

stackColumn (optional) To show stacked Bar Charts

brush (number) To enble brushing with pre selected bars.Currently support in bar graph and heatmap graph. E.g -

"brush": 3,
"brushArea": 20

LineGraph

Display one or multiple lines

linesColumn - attribute name in your results to display line value

showNull - (Boolean) If false, Show truncated line if yValue is null . Default is true

defaultY - (string | object) default yAxis value used to draw straight horizontal line to show cut off value. It can be object which define data source and column to get data from another query and you may define separate tooltip for this staright line from data source. Example -

 {
     `"defaultY": {
         "source": "data2",
         "column": "memory",
         "tooltip": [
             { "column": "memory", "label": "memory"},
             { "column": "cpu", "label": "cpu"}
         ]
     }
 }

PieGraph

Display nice Pie or Donut graphs

pieInnerRadius - Inner radius of the slices. Make this non-zero for a Donut Chart

pieOuterRadius - Outer radius of the slices

pieLabelRadius - Radius for positioning labels

otherOptions - optional object

type Value must be percentage or number, and default is percentage
limit As per the type we can define the limit in percentage or slices respectively.
minimum In case of percentage, if we want to override the mimium slices of 10.

Table

This is used to show data in tabular form

selectable - To enable/disable selectable feature - Default is true

multiSelectable - To enable/disable multi select feature - default is false

showCheckboxes - To show checkboxes to select rows - default is false

enableSelectAll - To enable/disable select all feature - Default is true

matchingRowColumn - (string) Compare matchingRowColumn value with all available datas and if equal to selected row, then save all matched records in store under "matchedRows"

selectColumnOption - (Boolean) To show columns selection dropdown set this value to true (default is false). In Columns array set display: false to hide any column (default is true, i.e. column will display inside the table if display is missing or set to true).

selectedColumns - (Array) Containing the list of labels for the columns to be displayed, if empty or not present then will be used the display key of the columns records. Must be applicable if selectColumnOption is set to true

onColumnSelection - (handler) Event to capture the list of selected columns and must be passed as props.

highlight - (Array of columns) Highlighted the rows if value of columns is not null

hidePagination - Hide paging and search bar if data size is less than pagination limit - Default is true

border

top set top border. Default is solid 1px #ccc
bottom set bottom border. Default is 0
right set right border. Default is 0
left set left border. Default is 0

header - header specific parameters includes

fontColor - Color of the header text

columns - (Array) Array of columns display in the table. Example -

"columns":
  [
      { "column": "type", "label": " ", "colors" : {
          "OTHER": "green",
          "DENY": "red"
          }
      },
      { "column": "protocol", "label": "Proto", "selection": true  } // set `selection: true` to enable autocompleter for values of `protocol` column in search bar and must be string only.
      { "column": "sourceip", "label": "SIP" },
      { "column": "subnetName", "label": "Subnet", "totalCharacters":    16, "tooltip" : {"column": "nuage_metadata.subnetName"} }
  ]

In above example, if a value of the column show via colors then add colors property in object and mentioned all values as a key and color as a value in order to replace color from value. Note: Add label property with space to declare empty column in the table. E.g -

ChordGraph

This graph visualises the inter-relationships between entities and compare similarities between them

outerPadding - Padding from container. Default is 30

arcThickness - Outer arc thickness. Default is 20

padAngle - Padding between arcs. Default is 0.07

labelPadding - Padding of the labels from arcs. Default is 10

transitionDuration - Duration of animation. Default is 500

defaultOpacity - Default opacity. Default is 0.6

fadedOpacity - Hovered opacity. Default is 0.1

SimpleTextGraph

This graph allows you to display a simple text information.

targetedColumn - Name of the attribute to use to display the value. If not specified, this graph will display the length of the result

titlePosition - Position title on top or at the bottom of the graph

textAlign - Align text on left, center or right. Default is center

fontSize - Font size

fontColor - Font color

borderRadius - Set a radius if you want to display your text in a square or rounded area. Default is 50%

innerWidth - Define the percentage of the width for the area. 1 means 100% of the width. Default is 0.3

innerHeight - Define the percentage of the height for the area. 1 means 100% of the width. Default is 0.4

VariationTextGraph

This graph shows a value and its variation from the previous one.

drawColor - Color in case there is no variation

negativeColor - Color in case the variation is lower than 0

positiveColor - Color in case the variation is geater than 0

textAlign - Align text on left, center or right. Default is center

fontSize - Font size

fontColor - Font color

HeatmapGraph

This graph shows a value of a column at given timestamp. It is a graphical representation of data where the individual values contained in a matrix are represented as colors

selectedData: Selected data, normally returned by onMarkClick event after clicking on the cell, and will be used to highlight the cell for selected data.

legendColumn - Used to display matrix

xAlign - (boolean) If true then align x-axis label to the left position , default align is middle

heatmapColor - (object) Used to define the color of the matrix of given legendColumn value. E.g -

`"heatmapColor": {
    "InSla": "#b3d645"
}`

AreaGraph

This graph displays graphically quantitative data. The area between axis and line are commonly emphasized with colors, textures and hatchings. Commonly one compares with an area chart two or more quantities.

linesColumn (Object) Its value is used to display area in graph

"linesColumn": [
    {
        "key": "CPU"
    },
    {
        "key": "MEMORY"
    },
    {
        "key": "DISK",
        "value": "DISK"
    }
]

stacked - (boolean) Whether area shown as stacked or not. Default is false.

GuageGraph

Display a needle or dial to indicate where your data point(s) falls over a particular range

maxValue - Maximum value to draw speddometer

currentColumn - Column used to show needle value

gauzeTicks - Number of ticks on speedometer

Geomap

Display a cluster markers on map to show data

latitudeColumn - Latitude of the marker

longitudeColumn - Longitude of the marker

nameColumn - name displayed on marker infowindow

localityColumn - Locality displayed on marker infowindow

idColumn - id to uniquely identified each marker

links - (Object) to show connected lines beetween markers. For e.g.

"links": {
    "source": "data1", // data source
    "sourceColumn": "source", // source column id(equivalent to idColumn)
    "destinationColumn": "destination" // destination column id(equivalent to idColumn)
}

filters - List down columns in search bar

"filters": [
            {
                "columnText": "name",
                "columField": "nsgatewayName",
                "type": "text"
            },
            {
                "columField": "status",
                "type": "selection" // for `selection`, columnText must be empty and value of status field should be string
            }

        ]

markerIcon - (Object || string) to show markers icon. List of all the icons are defined in the Icon Helper files. Please add the icon over there before using the "key" over here like: nsGateway, icon1, icon2 and so on . For e.g.

"markerIcon": "nsgGateway"

or

"markerIcon": {
    "default": "default-icon", // optional
    "defaultUrgency": "GREEN", // optional
    "criteria": [
        {
            "icon": "icon1",
            "fields": {
                "nsg.status": "deactivated"
            },
            "urgency": "GRAY" // Either of "GREY", "RED", "YELLOW", "BLUE", as per criticaliy.
        },
        {
            "icon": "icon2",
            "fields": {
                "nsg.status": "activated",
                "nsg.signal": "yellow"
            }
        }
    ]
}

pabloauv / vis-graphs Goto Github PK

vis-graphs's Introduction

How to use graphs

Table of Contents