Feature/sankey chart

docs/README.md

@@ -20,6 +20,7 @@ The philosophy of the Visualization Framework is to provide a library to quickly
       - [ChordGraph](#chordgraph)
       - [SimpleTextGraph](#simpletextgraph)
       - [VariationTextGraph](#variationtextgraph)
+      - [SankeyGraph](#sankeygraph)
   - [Query configuration](#query-configuration)
 - [Services](#services)
 
@@ -344,6 +345,47 @@ This graph shows a value and its variation from the previous one.
 - **fontSize** font size
 - **fontColor** font color
 
+##### SankeyGraph
+
+Display nice Sankey graph
+
+![sankey-chart](https://user-images.githubusercontent.com/26645756/30849031-9da964a0-a2be-11e7-8689-95fa95d17015.png)
+
+This graph shows a value between source and destination columns.
+
+- **sourceColumn** source column
+- **targetColumn** target column
+- **valueColumn** value between source and target column.
+
+*Note:- Data should not be cyclic.*
+
+#### Sample Data
+```javascript
+
+const data = [
+    {
+    "source": "Barry",
+    "target": "Elvis",
+    "value": 2
+    },
+    {
+    "source": "Frodo",
+    "target": "Elvis",
+    "value": 2
+    },
+    {
+    "source": "Frodo",
+    "target": "Sarah",
+    "value": 2
+    },
+    {
+    "source": "Barry",
+    "target": "Alice",
+    "value": 2
+    }
+];
+```
+
 ### Query configuration
 The query configuration allows the Visualization to know which [service](#services) it should use and what is the query it should trigger.
 

public/configurations/dashboards/example.json

@@ -5,6 +5,8 @@
     "title": "Example",
     "visualizations": [
         { "id": "vsd-from-nsgs-table",  "x": 0, "y": 0, "w": 6, "h": 12, "minW": 2, "minH": 12, "static": true},
-        { "id": "vsd-to-nsgs-table",    "x": 6, "y": 0, "w": 6, "h": 12, "minW": 2, "minH": 12, "static": true}
+        { "id": "vsd-to-nsgs-table",    "x": 6, "y": 0, "w": 6, "h": 12, "minW": 2, "minH": 12, "static": true},
+        { "id": "sample-sankey-graph",  "x": 0, "y": 12, "w": 12, "h": 20, "minW": 6, "minH": 12}
+
     ]
 }

public/configurations/dashboards/kitchenSink.json

@@ -70,7 +70,7 @@
         {
             "id": "effective-score",
             "x": 0,
-            "y": 15,
+            "y": 30,
             "w": 3,
             "h": 15,
             "minW": 2,
@@ -79,7 +79,7 @@
         {
             "id": "vss-domain-acl-time",
             "x": 3,
-            "y": 15,
+            "y": 30,
             "w": 3,
             "h": 15,
             "minW": 2,
@@ -88,30 +88,38 @@
         {
             "id": "aar-nsg-line-chart",
             "x": 6,
-            "y": 15,
+            "y": 30,
             "w": 3,
             "h": 15,
             "minW": 2,
             "minH": 12
         },
         {
             "id": "aar-nsg-gauge-chart",
-            "x": 6,
-            "y": 15,
+            "x": 9,
+            "y": 30,
             "w": 3,
             "h": 15,
             "minW": 2,
             "minH": 12
         },
         {
             "id": "aar-flow-sla-heatmap",
-            "x": 9,
-            "y": 15,
+            "x": 0,
+            "y": 45,
             "w": 6,
             "h": 15,
             "minW": 2,
             "minH": 12
+        },
+        { 
+            "id": "test-area-graph",
+            "x": 6,
+            "y": 45,
+            "w": 6,
+            "h": 15,
+            "minW": 6,
+            "minH": 15
         }
-
     ]
 }

public/configurations/visualizations/sample-sankey-graph.json

@@ -0,0 +1,18 @@
+{
+    "id": "sample-sankey-graph",
+    "graph": "SankeyGraph",
+    "title": "Sample Sankey Graph",
+    "author": "Anil Chauhan",
+    "creationDate": "25/09/2017",
+    "data": {
+        "dateHistogram": true,
+        "sourceColumn": "source",
+        "sourceColumnLabel": "Source",
+        "targetColumn": "target",
+        "targetColumnLabel": "Target",
+        "valueColumn": "value",
+        "valueColumnLabel": "Value",
+        "valueFormat": ",.1f"
+    },
+    "query": "top5-app-vertical-bar"
+}

public/configurations/visualizations/test-area-graph.json

@@ -0,0 +1,32 @@
+{
+    "id": "test-area-graph",
+    "graph": "AreaGraph",
+    "title": "Area Graph",
+    "description": "New Graph - Area Graph Visualization",
+    "author": "Anil Chauhan",
+    "creationDate": "19/08/2017",
+    "data": {
+        "dateHistogram": true,
+        "xColumn": "ts",
+        "xLabel": "Time",
+        "yColumn": ["CPU", "MEMORY",  "DISK"],
+        "yTickFormat": ",.1f",
+        "yLabel": "",
+        "yTicks": 5,
+        "xTickGrid": true,
+        "linesColumn": ["CPU", "MEMORY",  "DISK"],
+        "legend": {
+            "orientation": "vertical",
+            "show": true,
+            "circleSize": 5,
+            "labelOffset": 5
+        },
+        "tooltip": [
+            { "column": "CPU", "label": "CPU", "format": "0.2f"},
+            { "column": "MEMORY", "label": "MEMORY", "format": "0.2f"},
+            { "column": "DISK", "label": "DISK", "format": "0.2f"},
+            { "column": "ts", "label": "Timestamp", "timeFormat": "%b %d, %y %X"}
+        ]
+    },
+    "query": "vnf-status-linechart"
+}

src/components/Graphs/AbstractGraph.js

@@ -9,14 +9,23 @@ import { GraphManager } from "./index";
 import columnAccessor from "../../utils/columnAccessor";
 import crossfilter from "crossfilter2";
 
+import {
+    format
+} from "d3";
+
 
 export default class AbstractGraph extends React.Component {
 
     constructor(props, properties = {}) {
         super(props);
 
+        this.configuredProperties = {};
+
         this.defaults = GraphManager.getDefaultProperties(properties);
 
+        // set all configuration into single object
+        this.setConfiguredProperties();
+
         // Provide tooltips for subclasses.
         const { tooltip } = this.getConfiguredProperties();
         if(tooltip) {
@@ -26,7 +35,6 @@ export default class AbstractGraph extends React.Component {
 
             // This function is invoked to produce the content of a tooltip.
             this.getTooltipContent = () => {
-
                 // The value of this.hoveredDatum should be set by subclasses
                 // on mouseEnter and mouseMove of visual marks
                 // to the data entry corresponding to the hovered mark.
@@ -67,6 +75,8 @@ export default class AbstractGraph extends React.Component {
                     type="dark"
                     effect="float"
                     getContent={[() => this.getTooltipContent(), 200]}
+                    afterHide={() =>  this.handleHideEvent()}
+                    afterShow={() =>  this.handleShowEvent()}
                 />
             );
 
@@ -87,6 +97,10 @@ export default class AbstractGraph extends React.Component {
         }
     }
 
+    handleShowEvent() {}
+
+    handleHideEvent() {}
+
     wrapD3Text (text, width) {
       text.each(function() {
         var text = d3.select(this),
@@ -109,8 +123,12 @@ export default class AbstractGraph extends React.Component {
       });
     };
 
+    setConfiguredProperties() {
+        this.configuredProperties = Object.assign({}, this.defaults, this.props.configuration.data);
+    }
+
     getConfiguredProperties() {
-        return Object.assign({}, this.defaults, this.props.configuration.data);
+        return this.configuredProperties;
     }
 
     getMappedScaleColor(data, defaultColumn) {
@@ -290,6 +308,85 @@ export default class AbstractGraph extends React.Component {
         );
     }
 
+    setYlabelWidth(data) {
+        const {
+          chartWidthToPixel,
+          yTickFormat
+        } = this.getConfiguredProperties();
+
+        const yLabelFn = (d) => {
+            if(!yTickFormat) {
+                return d['yColumn'];
+            }
+            const formatter = format(yTickFormat);
+            return formatter(d['yColumn']);
+        };
+
+        this.yLabelWidth = this.longestLabelLength(data, yLabelFn) * chartWidthToPixel;
+    }
+
+    getYlabelWidth() {
+        return this.yLabelWidth;
+    }
+
+    setLeftMargin() {
+      const {
+          margin
+        } = this.getConfiguredProperties();
+
+        this.leftMargin   = margin.left + this.getYlabelWidth();
+    }
+
+    getLeftMargin() {
+        return this.leftMargin;
+    }
+
+    setAvailableWidth({width}) {
+
+        const {
+          margin,
+        } = this.getConfiguredProperties();
+
+        this.availableWidth = width - (margin.left + margin.right + this.getYlabelWidth());
+    }
+
+    getAvailableWidth() {
+       return this.availableWidth;
+    }
+
+    // height of x-axis
+    getXAxisHeight() {
+        const {
+          chartHeightToPixel,
+          xLabel
+        } = this.getConfiguredProperties();
+
+        return xLabel ? chartHeightToPixel : 0;
+    }
+
+    setAvailableHeight({height}) {
+
+        const {
+          chartHeightToPixel,
+          margin
+        } = this.getConfiguredProperties();
+
+        this.availableHeight   = height - (margin.top + margin.bottom + chartHeightToPixel + this.getXAxisHeight());
+
+    }
+
+    getAvailableHeight() {
+        return this.availableHeight;
+    }
+
+    // Check whether to display legend as vertical or horizontal
+    checkIsVerticalLegend() {
+        const {
+          legend
+        } = this.getConfiguredProperties();
+
+        return legend.orientation === 'vertical';
+    }
     getGroupedData(data, settings) {
 
         if(settings.otherOptions && settings.otherOptions.limit) {

src/components/Graphs/AreaGraph/default.config.js

@@ -0,0 +1,23 @@
+import { theme } from "../../../theme"
+
+export const properties = {
+    stroke: {
+        color: "red",
+        width: "2px",
+        opacity: "0.4"
+    },
+    legend: {
+        show: false
+    },
+    colors: [
+        theme.palette.orangeLightColor,
+        theme.palette.blueLightColor,
+        theme.palette.pinkLightColor,
+        theme.palette.orangeLighterColor,
+        theme.palette.greenColor,
+        theme.palette.yellowLightColor,
+        theme.palette.yellowDarkColor,
+    ],
+    zeroStart: true,
+    circleRadius: 5
+}