updated by GasGit automation

scripts/Sankey.js

@@ -3,15 +3,19 @@
 var Sankey = (function(sankey) {
   'use strict';
   
+  
   /**
   * draw a sankey
-     * @param {object} settings the chart settings
+  * @param {object} sets the chart settings
   * @param {string[]} headers
   * @param {[[string,string,number]]} data
   * @param {element} chartElem where to put it
   * @param {boolean} clear whether to clear current chart.
   */
-	 sankey.drawChart = function (settings,headers, data, chartElem,clear) {
+  sankey.drawChart = function (sets,headers, data, chartElem,clear) {
+    
+    // clone the settings
+    var settings = Utils.clone (sets);
     
     if(clear) {
       chartElem.innerHTML = "";
@@ -29,20 +33,14 @@ var Sankey = (function(sankey) {
       dataTable.addColumn ('string' , headers[0]);
       dataTable.addColumn ('string' , headers[1]);	
       dataTable.addColumn ('number' , headers[2]);
-          
+      dataTable.addColumn({type: 'string', role: 'tooltip'});
-
-          
       // assign data - be lenient with mismatched data types
       dataTable.addRows(data.map(function(d) {
-            return [d[0].toString(), d[1].toString() , parseInt (d[2],10)];
+        return [d[0].toString(), d[1].toString() , parseInt (d[2],10) ,  d[0] + ">" + d[1] + "(" + d[2] + ")"];
-          })
+      }).filter(function(d){
-		  .filter(function(d){
         // get rid of blank rows
         return d[0] && d[1] && !isNaN(d[2]);
       }));
-          // Set chart options
-          settings.width = settings.width || chartElem.offsetWidth; 
-          settings.height = settings.height || chartElem.offsetHeight; 
       
       
       // Instantiate and draw our chart, passing in some options.
@@ -54,41 +52,647 @@ var Sankey = (function(sankey) {
     }
   };
   
-    sankey.initialize = function () {
+  sankey.doElementer = function (setup) {
-      sankey.settings = {
+    
-          height: 0,
+    return new Elementer()
-          width: 0,
+    .setMain('container')
+    .setContainer('elementer-content')
+    .setRoot('elementer-root')
+    .setLayout(setup.layout)
+    .setDetail(setup.detail)
+    .build();
+    
+  };
+  
+  sankey.mapSettings = function (arger) {
+    
+    var ec = arger.getElements().controls;
+    
+    return {
+      height: parseInt(ec.previewHeight.value, 10),
+      width: parseInt(ec.previewWidth.value, 10),
       scale: {
-            width:4,
+        width: parseFloat(ec.scaleWidth.value),
-            height:3,
+        height: parseFloat(ec.scaleHeight.value),
-            font:2
+        font: parseFloat(ec.scaleFont.value)
       },
+      options:{
+        
+        height:parseInt(ec.previewHeight.value, 10),
+        width:parseInt(ec.previewWidth.value, 10),
+        
+        tooltip:{
+          textStyle:{
+            fontName: ec.tooltipFontName.value,
+            fontSize: parseInt(ec.tooltipFontSize.value, 10),
+            color: ec.tooltipFontColor.value,
+            bold: ec.tooltipFontBold.checked,
+            italic: ec.tooltipFontItalic.checked
+          },
+          isHtml:false
+        },    
+        
         sankey: {
           link: {
+            colorMode:ec.linkColorMode.value,
             color: {
-                      fill: '#eee',     // Color of the link.
+              fill: ec.linkFillColor.value, // Color of the link.
-                      fillOpacity: 0.7, // Transparency of the link.
+              fillOpacity: parseFloat(ec.linkOpacity.value), // Transparency of the link.
-                      stroke: 'black',  // Color of the link border.
+              stroke: ec.linkBorderColor.value, // Color of the link border.
-                      strokeWidth: 0    // Thickness of the link border (default 0).
+              strokeWidth: parseInt(ec.linkBorderWidth.value, 10) // Thickness of the link border 
             }
           },
+          
           node: {
             label: {
-                      fontName:'Roboto',
+              fontName: ec.labelFontName.value,
-                      fontSize: 10,
+              fontSize: parseInt(ec.labelFontSize.value, 10),
-                      color: '#000',
+              color: ec.labelFontColor.value,
-                      bold: false,
+              bold: ec.labelFontBold.checked,
-                      italic: false
+              italic: ec.labelFontItalic.checked
             },
-                  labelPadding: 6, // Horizontal distance between the label and the node.
+            labelPadding: parseInt(ec.labelPadding.value, 10), // Horizontal distance between the lab
-                  nodePadding: 10, // Vertical distance between nodes.
+            nodePadding: parseInt(ec.nodePadding.value, 10), // Vertical distance between nodes.
-                  width: 5         // Thickness of the node.
+            width: parseInt(ec.nodeWidth.value, 10) // Thickness of the node.
+          }
         }
       }
     };
     
+    
+    
   };
   
+  sankey.setup = function() {
+    return {
+      detail: {
+        sourceDivider: {
+          template: "dividerTemplate",
+          label: "Source data"
+        },
+        
+        columnDivider: {
+          template: "dividerTemplate",
+          label: "Columns"
+        },
+        
+        useDivider: {
+          template: "dividerTemplate",
+          label:"Apply settings",    
+        },
+        
+        manageDivider: {
+          template: "dividerTemplate",
+          label:"Current settings",    
+        },
+        
+        useStandard: {
+          template: "radioTemplate",
+          label: "Standard",
+          icon: "tuner",
+          properties:{
+            name:"use-group"
+          },
+          values:{
+            resetable:false
+          }
+        },
+        useDocument: {
+          template: "radioTemplate",
+          label: "This document's settings",
+          icon: "playlist_play",
+          properties:{
+            name:"use-group"
+          },
+          values:{
+            resetable:false
+          }
+        },
+        useUser: {
+          template: "radioTemplate",
+          label: "My personal settings",
+          icon: "fingerprint",
+          properties:{
+            name:"use-group"
+          },
+          values:{
+            resetable:false
+          }
+        },
+        
+        useInitial: {
+          template: "radioTemplate",
+          label: "Reset to initial",
+          icon: "undo",
+          properties:{
+            name:"use-group"
+          },
+          values:{
+            value:true,
+            resetable:false
+          }
+        },
+        
+        makePermanent: {
+          template: "radioTemplate",
+          label: "Save for future use in this document",
+          icon: "playlist_add_check",
+          properties:{
+            name:"manage-group"
+          },
+          values:{
+            resetable:false,
+            value:true
+          }
+        },
+        
+        makeDefault: {
+          template: "radioTemplate",
+          label: "Save for future use in all my documents",
+          icon: "playlist_add",
+          properties:{
+            name:"manage-group"
+          },
+          values:{
+            resetable:false
+          }
+        },
+        
+        clearPermanent: {
+          template: "radioTemplate",
+          label: "Clear saved settings in this document",
+          icon: "settings_backup_restore",
+          properties:{
+            name:"manage-group"
+          },
+          values:{
+            resetable:false
+          }
+        },
+        
+        clearDefault: {
+          template: "radioTemplate",
+          label: "Clear all my saved default settings",
+          icon: "layers_clear",
+          properties:{
+            name:"manage-group"
+          },
+          values:{
+            resetable:false
+          }
+        },
+        
+        manageButton:{
+          template:"buttonTemplate",
+          classes:{
+            element:"action mui--pull-left"
+          },
+          styles:{
+            tdElement:"padding-top:10px;"
+          },
+          values:{
+            value:"Save"
+          },
+          custom:{
+            spanCols:true
+          }
+        },
+        
+        applyButton:{
+          template:"buttonTemplate",
+          classes:{
+            element:"action mui--pull-left"
+          },
+          styles:{
+            tdElement:"padding-top:10px;"
+          },
+          values:{
+            value:"Apply"
+          },
+          custom:{
+            spanCols:true
+          }
+        },
+        
+        insertButton:{
+          template:"buttonTemplate",
+          classes:{
+            element:"action mui--pull-left"
+          },
+          styles:{
+            tdElement:"padding-top:10px;"
+          },
+          values:{
+            value:"Insert"
+          },
+          custom:{
+            spanCols:true
+          }
+        },
+        wholeSheet: {
+          template: "radioTemplate",
+          label: "Whole sheet",
+          icon: "grid_on",
+          values: {
+            value: true,
+            resetable:false
+          },
+          properties:{
+            name:"range-group"
+          }
+        },        
+        selectedRange: {
+          template: "radioTemplate",
+          label: "Selected range",
+          icon: "domain",
+          properties:{
+            name:"range-group"
+          },
+          values:{
+            resetable:false
+          }
+        },
+        
+        fromColumn: {
+          template: "selectTemplate",
+          label: "Source column",
+          icon: "skip_previous",
+          values:{
+            resetable:false
+          }
+        },
+        toColumn: {
+          template: "selectTemplate",
+          label: "Target column",
+          icon: "skip_next",
+          values:{
+            resetable:false
+          }
+        },
+        weightColumn: {
+          template: "selectTemplate",
+          label: "Weight column",
+          icon: "network_check",
+          values:{
+            resetable:false
+          }
+        },
+        
+        previewWidth: {
+          template: "numberTemplate",
+          label: "Width",
+          icon: "crop_landscape",
+        },
+        
+        previewHeight: {
+          template: "numberTemplate",
+          label: "Height",
+          icon: "crop_portrait",
+        },
+        
+        scaleWidth: {
+          template: "numberTemplate",
+          label: "Width ratio to preview chart",
+          icon: "picture_in_picture_alt",
+          properties: {
+            max: 5,
+            min: .5,
+            step: 0.1
+          },
+          values:{
+            value:2.3
+          }
+        },
+        scaleHeight: {
+          template: "numberTemplate",
+          label: "Height ratio to preview chart",
+          icon: "picture_in_picture",
+          properties: {
+            max: 4,
+            min: .5,
+            step: 0.1
+          },
+          values:{
+            value:1.4
+          }
+        },
+        scaleFont: {
+          template: "numberTemplate",
+          label: "Font size ratio to preview chart",
+          icon: "format_size",
+          properties: {
+            max: 3,
+            min: .5,
+            step: 0.1
+          },
+          values:{
+            value:1.2
+          }
+        },
+        
+        nodePadding: {
+          template: "numberTemplate",
+          label: "Vertical spacing between nodes",
+          icon: "vertical_align_bottom",
+          properties: {
+            max: 20,
+            min: 0
+          },
+          values:{
+            value:10
+          }
+        },
+        nodeWidth: {
+          template: "numberTemplate",
+          label: "Thickness of node",
+          icon: "flip",
+          properties: {
+            max: 20,
+            min: 0
+          },
+          values:{
+            value:5
+          }
+        },
+        tooltipFontSize: {
+          template: "numberTemplate",
+          label: "Font size",
+          icon: "format_size",
+          properties: {
+            min: 6,
+            max: 20
+          },
+          values:{
+            value:10
+          }
+        },
+        tooltipFontName: {
+          template: "textTemplate",
+          label: "Font name",
+          icon: "text_fields",
+          values: {
+            value: "Roboto"
+          }
+        },
+        tooltipFontColor: {
+          template: "textTemplate",
+          label: "Font color",
+          icon: "format_color_text",
+          properties: {
+            type: "color"
+          },
+          values:{
+            value:"#212121"
+          }
+        },
+        tooltipFontBold: {
+          template: "checkboxTemplate",
+          label: "Bold",
+          icon: "format_bold"
+        },
+        tooltipFontItalic: {
+          template: "checkboxTemplate",
+          label: "Italic",
+          icon: "format_italic"
+        },
+        
+        linkColorMode:{
+          template:"selectTemplate",
+          label:"Color mode",
+          icon:"gradient",
+          options:["none","source","target","gradient"],
+          values:{
+            value:"none"
+          }
+        },
+        linkFillColor: {
+          template: "textTemplate",
+          label: "Background color",
+          icon: "format_color_fill",
+          properties: {
+            type: "color",
+            value: '#eeeeee'
+          },
+          values:{
+            value:'#eeeeee'
+          }
+        },
+        linkBorderWidth: {
+          template: "numberTemplate",
+          label: "Border width",
+          icon: "line_weight",
+          properties: {
+            max: 5,
+            min: 0
+          },
+          values:{
+            value:0
+          }
+        },
+        linkBorderColor: {
+          template: "textTemplate",
+          label: "Border color",
+          icon: "border_color",
+          properties: {
+            type: "color"
+          },
+          values:{
+            value:'#212121'
+          }
+        },
+        linkOpacity: {
+          template: "numberTemplate",
+          label: "Opacity",
+          icon: "opacity",
+          properties: {
+            min: 0,
+            max: 1,
+            step: 0.1
+          },
+          values:{
+            value:0.4
+          }
+        },
+        labelDivider: {
+          template: "dividerTemplate",
+          label: "Labels"
+        },
+        labelPadding: {
+          template: "numberTemplate",
+          label: "Label padding",
+          icon: "vertical_align_bottom",
+          properties: {
+            max: 20,
+            min: 0,
+            value: 6
+          },
+          values:{
+            value:6
+          }
+        },
+        labelFontSize: {
+          template: "numberTemplate",
+          label: "Font size",
+          icon: "format_size",
+          properties: {
+            min: 4,
+            max: 24
+          },
+          values:{
+            value:10
+          }
+        },
+        labelFontName: {
+          template: "textTemplate",
+          label: "Font name",
+          icon: "text_fields",
+          values: {
+            value: "Roboto"
+          }
+        },
+        labelFontColor: {
+          template: "textTemplate",
+          label: "Font color",
+          icon: "format_color_text",
+          properties: {
+            type: "color"
+          },
+          values:{
+            value:'#212121'
+          }
+        },
+        labelFontBold: {
+          template: "checkboxTemplate",
+          label: "Bold",
+          values:{
+            value:false
+          },
+          icon: "format_bold"
+        },
+        labelFontItalic: {
+          template: "checkboxTemplate",
+          label: "Italic",
+          icon: "format_italic",
+          values:{
+            value:false
+          }
+        },
+        
+        aboutStuff: {
+          template: "contentTemplate",
+          label: '#about-sankey',
+          values:{
+            resetable:false
+          }
+        },
+        
+        svgCode: {
+          template: "textAreaTemplate",
+          label: "Copy SVG code to embed the chart image in your web site",
+          properties: {
+            disabled: true,
+            rows: 18,
+            spellcheck: false
+          },
+          classes:{
+            elementContainer:"mui--text-dark-hint",
+          },
+          styles: {
+            tdElement: "width:60%;",
+            element: "width:90%;"
+          },
+          icon: "settings_ethernet",
+          values:{
+            resetable:false
+          }
+        }
+      },
+      layout: {
+        settings: {
+          prefix: "layout",
+          root: "root"
+        },
+        pages: {
+          root: {
+            label: "Main page",
+            items: [ "chartSettings", "dataSettings", "about","insertButton"]
+          },
+          about: {
+            label: "About",
+            items: ["aboutStuff"]
+          },
+          dataSettings: {
+            label: "Data",
+            items: ["sourceDivider", "wholeSheet", "selectedRange", "columnDivider", "fromColumn", "toColumn", "weightColumn"]
+          },
+          
+          manageSettings: {
+            label:"Manage settings",
+            items:["saveSettings","useDivider","useInitial","useStandard","useUser", "useDocument","applyButton"],
+            on: {
+              exit: function (elementer, branch_) {
+                // reset the buttons to apply next time in
+                Process.control.buttons.apply.disabled=false;
+              }
+            }
+          },
+   
+          saveSettings: {
+            label:"Save settings",
+            items:["manageDivider","makePermanent","makeDefault","clearPermanent","clearDefault","manageButton"],
+            on: {
+              exit: function (elementer, branch_) {
+                // reset the buttons to apply next time in
+                Process.control.buttons.manage.disabled=false;
+              }
+            }
+          },
+          
+          
+          chartSettings: {
+            label: "Chart",
+            items: ["arrangePreview", "scaleRatio", "embedCode","manageSettings"],
+            on: {
+              exit: function(elementer, branch) {
+                // apply any settings changes
+                if (Process.applyElementer()) {
+                  // this would have returned true if any changes happened
+                  Process.drawChart(true);
+                };
+              }
+            }
+          },
+          embedCode: {
+            label: "Get embed code",
+            items: ["svgCode"]
+          },
+          arrangePreview: {
+            label: "Appearance",
+            items: ["previewHeight", "previewWidth", "links", "nodes","tooltips"]
+          },
+          scaleRatio: {
+            label: "Scale",
+            items: ["scaleHeight", "scaleWidth", "scaleFont"]
+          },
+          links: {
+            label: "Links",
+            items: ["linkColorMode","linkFillColor", "linkOpacity", "linkBorderColor", "linkBorderWidth"]
+          },
+          nodes: {
+            label: "Nodes",
+            items: ["nodePadding", "nodeWidth", "labelDivider", "labelPadding",  "labelFontSize", "labelFontColor", "labelFontName","labelFontBold", "labelFontItalic"]
+          },
+          tooltips: {
+            label: "Tooltips",
+            items: ["tooltipFontSize", "tooltipFontColor", "tooltipFontName","tooltipFontBold", "tooltipFontItalic"]
+          }
+        }
+      }
+    }
+  };
+  
+  
+  
   return sankey;
   
 })(Sankey || {});