home.jade

data

{"total_rows":2,"offset":0,"rows":[
{"id":"202638c9041c87a2e01e1a320600074d","key":"202638c9041c87a2e01e1a320600074d","value":{"_id":"202638c9041c87a2e01e1a320600074d","_rev":"6-b28aa64f065a183c86c9d2097a1c81a7","company":"SAPA","project":"Replace wires system","contact":"Munetsi Chiunda","created":"","nextStep":"Roll-out prototype","value":"300000.00","state":{"0":"2012/3/15","1":"2012/4/19"},"type":"global"}},
{"id":"202638c9041c87a2e01e1a320600098c","key":"202638c9041c87a2e01e1a320600098c","value":{"_id":"202638c9041c87a2e01e1a320600098c","_rev":"7-7db0c0d4640bf7f070f4c34d7f746d2d","company":"ITWeb","project":"News diary","contact":"Jon Tullet","created":"2012/5/15","state":{"0":"2012/5/15","1":"2012/5/19"},"nextStep":"Get functional specficiation","value":"150000.00","type":"global"}}
]}

gistfile1.txt

div.container
  h1= title
  p 10Layer #{title}
  
  div.row
    div.span10
      a(href='/addLead')(data-toggle='modal') Add a lead
     table.table
       thead
         tr
           th Company
           th Project
           th Contact Person
           th Initial Contact Date
           th Next Step
           th Estimated Amount
         - for (var d in data)
          tbody
            td: =data[d].value.company
            td: =data[d].value.project
            td: =data[d].value.contact
            td: =data[d].value.created
            td: =data[d].value.nextStep
            td: =data[d].value.value

  div#placeholder(style='width:800px;height:300px;')
  // Values on [X, Y]
  // Need to have a full workflow history for each sales object e.g. state, and date of state change as a key: pair value
  script(type='text/javascript')
    // data variable is the variable passed through to Jade.
    var data = !{JSON.stringify(data)};

    // Iterate through object.
    // For each data set, check number of states
    // Push number of states to array
    
    // Method to check size of object, so that we know how many data sets to enumerate thorugh.
    Object.size = function(obj) {
      var size = 0, key;
      for (key in obj) {
          if (obj.hasOwnProperty(key)) size++;
            }
              return size;
    };

    var size = Object.size(data);

    // Need to turn data object into a an object that flot can use/understand.

    // Turn object into a multidimensional array
    var dataArray = [];
    var fullArray = [];

    // The bad way of doing this
    dataObj = new Object;
    for (d in data) {
      dataObj.title = data[d].value.company;
      for (key in data[d].value.state) {
        dataArray.push([new Date(data[d].value.state[key]).getTime(), key]);
        var lastKey = key;
      }
      // Extend array so that line extends through to today
      dataArray.push([new Date().getTime(), lastKey]);
      // Push data into array with form [[date, value], [date, value]]
      fullArray.push(dataArray);
      //empty array so old data doesn't contaminate the loop
      dataArray = [];
      dataObj.data = fullArray;
    }

    // Generate graph 
    // Trying again with underscore
    var underscoreObject = _.pick(data, 'id');
    //underscoreObject = _.pick(underscoreObject, 'state');

    // Data object I want 
    // { 'title': 'The title of a company',
    //    'data': [[ array], [array]]
    //  }
    $.plot($('#placeholder'), 
      fullArray,
      //dataObj,
    { yaxis: 
      { 
        max: 5, ticks: [[0, 'Lead'], [1, 'Understand Requirements'], [2, 'Detail Requirements'], [3, 'Proposal'], [4, 'Negotiate'], [5, 'Closed']] 
      }, 
      xaxis: 
        { 
          mode: "time",minTickSize: [1, "day"],timeformat: "%d/%m/%y"
        },
      "lines": 
        {
          "show": "true"
        }
      ,"points": 
        {
          "show": "true"
        },
      clickable:true,hoverable: true
    });