The use of the graphs module is to provide a module to quickly shows your data into graphs.
- 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"- 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-pathHere 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
MuiThemeProviderand pass graph'sthemetoMuiThemeProvideras a props - Register
injectTapEventPlugin()method before calling graph component to enable touch tap event on graphs
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"}
]
}
// ...
}
The example above will display will display a tooltip with 2 lines (See picture below)
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.
You may see example in Heatmap and Bargraph section
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
padding currently supported only for text graph
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
trueto display legend.falseotherwise. Default isfalse - orientation
verticalorhorizontallegend. Default isvertical - circleSize size of a legend circle. Default is
4pixels - 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
truethen 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
truethen 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.
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
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"}
]
}
}See x-axis and y-axis sections in BarGraph for more information
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.
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 -
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
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
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
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"
}`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.
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
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"
}
}
]
}