Your IP : 3.144.250.118


Current Path : /usr/local/mgr5/skins/orion/src/
Upload File :
Current File : //usr/local/mgr5/skins/orion/src/App.GoogleCharts.js

/**
 * Wrapper for google charts
 *  @param {object} window  global object
 *  @param {function} $ jQuery library
 *  @param {object} EventMgr EventMgr library
 *  @param {object} App Application
 *  @param {object} pageInfo
 */
/*global App: true*/
App.GoogleCharts = function(window, $, EventMgr, App, pageInfo) {
  'use strict';
  var init = function() {
    EventMgr.bind('appendReport', loadGCharts);
    EventMgr.bind('appendListWithDiagram', loadGChartFromList);
    EventMgr.bind('loadGCharts', loadGCharts);
    EventMgr.bind('loadGChart', loadGChart);
    EventMgr.bind('loadGChartPrepare', loadGChartPrepare);
    EventMgr.one('loadGChartScripts', loadGChartScript);
  },

      loadedGChartScripts = false,
      //load google charts
      loadGCharts = function(e, data) {
        var bands = data.bands.bands,
            tabId = data.tabId,
            len = bands.length,
            id, gid, i, j, lenD;
        for (i = 0; i < len; i++) {
          id = tabId + '-' + i;
          gid = id + bands[i].id;
          if (bands[i].diagram !== undefined) {
            lenD = bands[i].diagram.length;
            for (j = 0; j < lenD; j++) {
              if (loadedGChartScripts) {
                EventMgr.trigger('loadGChart', {
                  diagram: bands[i].diagram[j],
                  gid: gid + j,
                  empty: bands[i].empty,
                  tabId: tabId,
                  content: bands[i].content });
              } else {
                EventMgr.trigger('loadGChartPrepare', {
                  diagram: bands[i].diagram[j],
                  gid: gid + j,
                  empty: bands[i].empty,
                  tabId: tabId,
                  content: bands[i].content });
              }
            }
          }
        }
        if (data.bands.emptyBand) {
          var emptyBandData = data.bands.emptyBandData;
          if (loadedGChartScripts) {
            EventMgr.trigger('loadGChart', {
              diagram: emptyBandData.diagram,
              gid: tabId + '-band-empty',
              tabId: tabId,
              content: emptyBandData.content });
          } else {
            EventMgr.trigger('loadGChartPrepare', {
              diagram: emptyBandData.diagram,
              gid: tabId + '-band-empty',
              tabId: tabId,
              content: emptyBandData.content });
          }
        }
      },
      //
      loadGChartFromList = function(e, data) {
        var diagram = data.diagram,
            gid = data.gid,
            tabId = data.tabId,
            content = data.content;
        if (loadedGChartScripts) {
          EventMgr.trigger('loadGChart', {
            diagram: diagram,
            gid: gid,
            tabId: tabId,
            content: content });
        } else {
          EventMgr.trigger('loadGChartPrepare', {
            diagram: diagram,
            gid: gid,
            tabId: tabId,
            content: content });
        }
      },
      //load google chart
      loadGChart = function(e, data) {
        var diagram = data.diagram,
            content = data.content,
            gid = data.gid,
            wrapper = App.Dom.byId(gid),
            tabId = data.tabId,
            chart, cdata, options,
            empty = data.empty,
            chartsData, rawData = false,
            colors = ['#5c85d6', '#e36141', '#ffbc58', '#53b858', '#ba70ba', '#3fafd1', '#e37fa0', '#8dc43b', '#cc6665', '#aaa'];
         if (diagram.colors && diagram.colors.length > 1) {
           colors = diagram.colors;
           colors.shift();
         }
        //check for data form dashbord or report
        //dashboard data without line
        if (diagram.chartsData && !diagram.chartsData.fakeArr) {
          chartsData = diagram.chartsData.data;
          rawData = true;
        //dashboard data with line
        } else if (diagram.chartsData && diagram.chartsData.fakeArr) {
          chartsData = diagram.chartsData;
          rawData = true;
        //report
        } else {
          chartsData = makeData(diagram, content);
        }
        if (wrapper === null) { return; }
        var len = chartsData.data ? chartsData.data.length : chartsData.length,
            len2 = 0,
            fakeArr = [],
            pointSize = 0,
            showTextEvery = 'automatic',
            width = wrapper.offsetWidth;
        //check for point size
        if (len < 32) { pointSize = 3;}
        //check for show labels 
        if (width > 700) {
          showTextEvery = Math.round(len / 10);
        } else {
          showTextEvery = Math.round(len / 5);
        }
        //check when rawData
        if (len === 1) {
          if (chartsData.data) {
            len2 = chartsData.data[0];
          } else {
            console.log('empty chart data');
            return;
          }
          while (len2--) {
            fakeArr.push(0);
          }
         // chartsData.push(fakeArr);
        }
        if (rawData) {
          chartsData = prepareRawData(chartsData, len);
        }

        if (diagram && diagram.type === 'pie') {
          if (rawData) {
            cdata = window.google.visualization.arrayToDataTable(chartsData);
          } else {
            cdata = new window.google.visualization.DataTable();
            for (var i = 0, l = chartsData.fakeArr.length; i < l; i++) {
              if (chartsData.fakeArr[i] === null) {
                cdata.addColumn({ type: 'string', role: 'tooltip'});
              } else {
                cdata.addColumn(i === 0 ? 'string' : 'number', chartsData.fakeArr[i]);
              }
            }
            cdata.addRows(chartsData.data);
          }

          options = {
            // backgroundColor : 'rgb(242, 249, 255)',
            'backgroundColor.stroke': '#fff',
            'vAxis': {
              'minValue': 0,
              'textStyle': { 'fontSize': '11'}
            },
            'colors': colors,
            'is3D': true,
            'legend': {
              'alignment': 'center',
              'textStyle': { 'fontSize': '11'}
            },
            'sliceVisibilityThreshold': diagram.others
          };
          if (diagram.title) {
            options.title = diagram.title;
            options.chartArea = { 'height': '80%' };
          } else {
            options.chartArea = { 'height': '94%' };
          }
          chart = new window.google.visualization.PieChart(App.Dom.byId(gid));
        } else if (diagram && diagram.type === 'histogram') {
          if (!chartsData.fakeArr) {
            cdata = window.google.visualization.arrayToDataTable(chartsData);
          } else {
            cdata = new window.google.visualization.DataTable();
            /* jshint shadow: true */
            for (var i = 0, l = chartsData.fakeArr.length; i < l; i++) {
              if (chartsData.fakeArr[i] === null) {
                cdata.addColumn({ type: 'string', role: 'tooltip'});
              } else {
                cdata.addColumn(i === 0 ? 'string' : 'number', chartsData.fakeArr[i]);
              }
            }
            cdata.addRows(chartsData.data);
          }

          options = {
            //backgroundColor : 'rgb(242, 249, 255)',
            'backgroundColor.stroke': '#fff',
            colors: colors,
            vAxis: {
              //'minValue': 0,
              textStyle: { fontSize: '11'},
              viewWindow: {}
            },
            hAxis: {
              textStyle: { fontSize: '11'}
            },
            legend: {
              alignment: 'start',
              position: 'right',
              textStyle: { fontSize: '11'}
            }
          };
          if (diagram.title) {
            options.title = diagram.title;
          }
          //set min/max viewport for chart
          if (diagram.min) {
            options.vAxis.viewWindow.min = diagram.min;
          }
          if (diagram.max) {
            options.vAxis.viewWindow.max = diagram.max;
          }
         chart = new window.google.visualization.ColumnChart(App.Dom.byId(gid));
        } else if (diagram && (diagram.type === 'line' || diagram.type === 'area' || diagram.type === 'steppedarea')) {
          if (!chartsData.fakeArr) {
            cdata = window.google.visualization.arrayToDataTable(chartsData);
          } else {
            cdata = new window.google.visualization.DataTable();
            for (var i = 0, l = chartsData.fakeArr.length; i < l; i++) {
            /* jshint shadow: true */
              if (chartsData.fakeArr[i] === null) {
                cdata.addColumn({ type: 'string', role: 'tooltip'});
              } else {
                cdata.addColumn(i === 0 ? 'string' : 'number', chartsData.fakeArr[i]);
              }
            }
            cdata.addRows(chartsData.data);
          }
          options = {
            //backgroundColor : 'rgb(242, 249, 255)',
            // 'chartArea' : { 'left' : 50 },
            'backgroundColor.stroke': '#fff',
            colors: colors,
            vAxis: {
              //'minValue' : 0,
              textStyle: { fontSize: '11'},
              viewWindow: {}
            },
            hAxis: {
              showTextEvery: showTextEvery,
              textStyle: { fontSize: '11'}
            },
            pointSize: pointSize,
            focusTarget: 'category',
            legend: {
              alignment: 'start',
              textStyle: { fontSize: '11'}
            }
          };
          if (diagram.title) {
            title = diagram.title
          }
          //set min/max viewport for chart
          if (diagram.min) {
            options.vAxis.viewWindow.min = diagram.min;
          }
          if (diagram.max) {
            options.vAxis.viewWindow.max = diagram.max;
          }
          if (diagram.type === 'line') {
            chart = new window.google.visualization.LineChart(App.Dom.byId(gid));
          } else if (diagram.type === 'area') {
            chart = new window.google.visualization.AreaChart(App.Dom.byId(gid));
          } else if (diagram.type === 'steppedarea') {
            options.areaOpacity = 1;
            options.isStacked = true;
            chart = new window.google.visualization.SteppedAreaChart(App.Dom.byId(gid));
          } else if (diagram.type === 'column') {
            options.isStacked = true;
            chart = new window.google.visualization.ColumnChart(App.Dom.byId(gid));
          }
        } else if (diagram && diagram.type === 'scatter') {
          if (!chartsData.fakeArr) {
            cdata = window.google.visualization.arrayToDataTable(chartsData);
          } else {
            //chartsData.data.unshift(chartsData.fakeArr);
            //var tmpArr = chartsData.data;
            //cdata = google.visualization.arrayToDataTable(tmpArr);
            cdata = new window.google.visualization.DataTable();
            /* jshint shadow: true */
            for (var i = 0, l = chartsData.fakeArr.length; i < l; i++) {
              if (chartsData.fakeArr[i] === null) {
                cdata.addColumn({ type: 'string', role: 'tooltip'});
              } else {
                cdata.addColumn('number', chartsData.fakeArr[i]);
              }
            }
            if (diagram.markerline !== undefined) {
              for (var i = 0, l = chartsData.data.length; i < l; i++) {
                chartsData.data[i].push(diagram.markerline - 0);
              }
              cdata.addColumn('number', diagram.markerlineLabel);
            }
            cdata.addRows(chartsData.data);
          }
          options = {
            'backgroundColor.stroke': '#fff',
            colors: colors,
            vAxis: {
              //'minValue' : 0,
              textStyle: { fontSize: '11'},
              viewWindow: {}
            },
            hAxis: {
              showTextEvery: showTextEvery,
              textStyle: { fontSize: '11'}
            },
            legend: false,
            seriesType: 'scatter'
          };

          if (diagram.markerline !== undefined) {
            options.series = {};
            options.series[1] = {'type': 'line'}
          }
          //set min/max viewport for chart
          if (diagram.min) {
            options.vAxis.viewWindow.min = diagram.min;
          }
          if (diagram.max) {
            options.vAxis.viewWindow.max = diagram.max;
          }
          //chart = new google.visualization.ScatterChart(App.Dom.byId(gid));
          chart = new window.google.visualization.ComboChart(App.Dom.byId(gid));

        } else if (diagram) {
          EventMgr.trigger('pullMsg', { msg: 'Diagram type "' + diagram.type + '" do not support' });
          return;
        }
        if (empty) {
          options.colors = colors;
        }
        chart.draw(cdata, options);
        EventMgr.trigger('addedChart', { chart: chart, tabId: tabId });
        var func = function() {
          EventMgr.trigger('updateScroll', { id: 'form-scroll-' + tabId });
          EventMgr.trigger('updTableHeight');
        };
        App.Common.noMoreThan('form-scroll-' + tabId, 100, func);
      },

      prepareRawData = function(chartsData, len) {
        var len2,
            data = chartsData.data ? chartsData.data : chartsData;
        while (len--) {
          //check for separate data
          //skip first elem with labels
          if (len === 0 && !chartsData.fakeArr) {
            continue;
          }
          len2 = data[len].length;
          while (len2--) {
            if (len2 !== 0) {
              //check for separate data
              //skip elem with hint
              if (chartsData.fakeArr && !chartsData.fakeArr[len2]) {
                continue;
              }
              data[len][len2] = parseData(data[len][len2]);
            }
          }
        }
        if (chartsData.data) {
          chartsData.data = data;
        } else {
          chartsData = data;
        }
        return chartsData;
      },

      parseData = function(value) {
        return value === '' ? null : parseFloat(String(value).replace(/\s/g, ''));  
      },

      makeData = function(diagram, content) {
        var type = diagram.type,
            data,
            elem,
            fakeArr,
            label = diagram.label,
            dataCol = diagram.data,
            labels = diagram.labelText,
            lines = diagram.lines,
            tooltip = diagram.tooltip,
            woLabel = diagram.type === 'scatter',
            len, labelsLen, i, j, labelsLenSrc;
        //if (type == 'histogram' || type == 'pie') {
        //withot lines
        if (!lines) {
          //check for one lines in histogram
          dataCol = dataCol[0] ? dataCol[0] : dataCol;
          //first fake row
          fakeArr = ['fake', labels[0]];
          if (dataCol.convert || tooltip) {
            fakeArr.push(null);
          }
         // data = [elem];
          data = [];
          len = content.length;
          i = 0;
          while (len--) {
            if (tooltip) {
              elem = [
                content[i][label].v,
                parseFloat(content[i][dataCol.name].v.replace(/\s/g, ''))
              ];
              elem.push(content[i][tooltip].v + ': ' + elem[0] + ', ' + elem[1]);
            } else if (dataCol.convert) {
              elem = [
                content[i][label].v,
                parseFloat(content[i][dataCol.name].orig || content[i][dataCol.name].v),
                content[i][dataCol.name].v
              ];
            } else {
              elem = [
                content[i][label].v,
                parseFloat(content[i][dataCol.name].v.replace(/\s/g, ''))
              ];
            }
            //
            if (woLabel) {
              elem[0] = elem[0] - 0;
            }
            data.push(elem);
            i++;
          }
        } else {
          //first fake row
          fakeArr = ['fake'];
          labelsLen = dataCol.length;
          labelsLenSrc = labelsLen;
          i = 0;
          while (labelsLen--) {
            fakeArr.push(labels[i]);
            if (dataCol[i].convert) {
              fakeArr.push(null);
            }
            i++;
          }

         // data = [elem];
          data = [];
          len = content.length;
          j = 0;
          while (len--) {
            elem = [content[j][label].v];
            labelsLen = labelsLenSrc;
            i = 0;
            while (labelsLen--) {
              if (dataCol[i].convert) {
                 elem.push(parseFloat(content[j][dataCol[i].name].orig || content[j][dataCol[i].name].v.replace(/\s/g, '')));
                 elem.push(content[j][dataCol[i].name].v === '' ?
                  null : content[j][dataCol[i].name].v);
              } else {
               elem.push(content[j][dataCol[i].name].v === '' ?
                  null : parseFloat(content[j][dataCol[i].name].v.replace(/\s/g, '')));
              }
              i++;
            }
            data.push(elem);
            j++;
          }
        }
        return {
             data: data,
             fakeArr: fakeArr
        };
      },

      queueCharts = [],

      loadGChartPrepare = function(e, data) {
        queueCharts.push(data);
        EventMgr.trigger('loadGChartScripts', {});
      },
      //loading gchart form queue
      runQueue = function() {
        var len = queueCharts.length;
        while (len--) {
          EventMgr.trigger('loadGChart', queueCharts[len]);
        }
        queueCharts = [];
      },

      checkScripts = function() {
        if (window.google.visualization === undefined) {
          setTimeout(function() {
            checkScripts();
          }, 100);
        } else {
          if (window.google.visualization.arrayToDataTable === undefined) {
            setTimeout(function() {
              checkScripts();
            }, 100);
          } else {
            loadedGChartScripts = true;
            runQueue();
          }
        }
      },
    //load google charts scripts
      loadGChartScript = function() {
        setTimeout(function() {
          window.google.load('visualization', '1', {
            'callback': 'console.log("2 sec wait")',
            'packages': ['corechart'],
            'language': pageInfo.lang });
        }, 100);
        setTimeout(function() {
          checkScripts();
        }, 100);
      };

  return {
    init: init
  };
}(window, $, EventMgr, App, pageInfo);