<html>
  <head>
    <meta charset="utf-8">
      <link rel="stylesheet" href="css/bootstrap.min.css" media="screen">
      <link rel="stylesheet" href="css/bootstrap-responsive.min.css">
      <style type="text/css">
        body '{' font: 20px sans-serif; '}'
        .axis path,
        .axis line '{' fill: none; stroke: #000; shape-rendering: crispEdges; '}'
        .axis text '{' font-family: sans-serif; font-size: 20px; '}'
        .line '{' fill: none; stroke: steelblue; stroke-width: 3px; '}'
        .legend '{'
          padding: 5px;
          font: 18px sans-serif;
          background: yellow;
          box-shadow: 2px 2px 1px #888;
        '}'
        .title '{' font: 24px sans-serif; '}'
        .divborder '{'
          border-width: 1px;
          border-style: solid;
          border-color: black;
          margin-top:10px
        '}'
      </style>
      <script src="js/thirdparty/d3.v3.js"></script>
      <script src="js/thirdparty/jquery.js"></script>
      <script src="js/thirdparty/bootstrap.min.js"></script>
    </head>
  <body>
    <div class="row">
      <div class="span10 offset2"><br>
        <input type="button" style="float: right;" value="Stop"
               onClick="stop()" />
      </div>
    </div>
    <div class="row">
      <div class="divborder span8" style="margin-left:50px" id="area1"></div>
      <div class="divborder span8" id="area2"></div>
    </div>
    <div class="row">
      <div class="divborder span8" style="margin-left:50px" id="area3"></div>
      <div class="divborder span8" id="area4"></div>
    </div>
    <div class="row">
      <div class="divborder span8" style="margin-left:50px" id="area5"></div>
      <div class="divborder span8" id="area6"></div>
    </div>
    <div class="row">
      <div class="divborder span8" style="margin-left:50px" id="area7"></div>
      <div class="span8" id="area8"></div>
    </div><br/><br/>

    <script>
      var basetime = 0;
      var running = 1;
      var data = [];
      var width, height;
      var legends = [];
      var titles = [];
      var yLabels = [];
      var isAreas = [];
      var svgs = [];
      var xs = [];
      var ys = [];
      var xAxiss = [];
      var yAxiss = [];
      var lineAreas = [];
      var stacks = [];

      // legends
      legends[0] = [''running.applications'', ''running.containers''];
      legends[1] = [''jvm.free.memory'', ''jvm.max.memory'', ''jvm.total.memory''];
      legends[2] = [''cluster.allocated.memory'', ''cluster.available.memory''];
      legends[3] = [''cluster.allocated.vcores'', ''cluster.available.vcores''];
      legends[4] = [];
      legends[5] = [];
      {0}
      legends[6] = [''scheduler.allocate.timecost'',
                    ''scheduler.handle-NODE_ADDED.timecost'',
                    ''scheduler.handle-NODE_REMOVED.timecost'',
                    ''scheduler.handle-NODE_UPDATE.timecost'',
                    ''scheduler.handle-APP_ADDED.timecost'',
                    ''scheduler.handle-APP_REMOVED.timecost'',
                    ''scheduler.handle-CONTAINER_EXPIRED.timecost''];

      // title
      titles[0] = ''Cluster running applications & containers'';
      titles[1] = ''JVM memory'';
      titles[2] = ''Cluster allocated & available memory'';
      titles[3] = ''Cluster allocated & available vcores'';
      titles[4] = ''Queue allocated memory'';
      titles[5] = ''Queue allocated vcores'';
      titles[6] = ''Scheduler allocate & handle operation timecost'';

      // ylabels
      yLabels[0] = ''Number'';
      yLabels[1] = ''Memory (GB)'';
      yLabels[2] = ''Memory (GB)'';
      yLabels[3] = ''Number'';
      yLabels[4] = ''Memory (GB)'';
      yLabels[5] = ''Number'';
      yLabels[6] = ''Timecost (ms)'';

      // is area?
      isAreas = [0, 0, 0, 0, 1, 1, 0];

      // draw all charts
      for (var i = 0; i < 7; i ++) '{'
        drawEachChart(i);
      '}'

      // draw each chart
      function drawEachChart(index) '{'
        var margin = '{'top: 50, right: 250, bottom: 50, left: 70'}';
        width = 750 - margin.left - margin.right;
        height = 420 - margin.top - margin.bottom;

      xs[index] = d3.scale.linear().range([0, width]);
      ys[index] = d3.scale.linear().range([height, 0]);
      xAxiss[index] = d3.svg.axis().scale(xs[index]).orient(''bottom'');
      yAxiss[index] = d3.svg.axis().scale(ys[index]).orient(''left'');

      if (isAreas[index] == 1)'{'
        lineAreas[index] = d3.svg.area()
                            .x(function(d) '{' return xs[index](d.time); '}')
                            .y0(function(d) '{' return ys[index](d.y0); '}')
                            .y1(function(d) '{' return ys[index](d.y0 + d.y); '}');

        stacks[index] = d3.layout.stack()
                          .values(function(d) '{' return d.values; '}');
      '}' else '{'
        lineAreas[index] = d3.svg.line()
                            .interpolate(''basis'')
                            .x(function(d) '{' return xs[index](d.time); '}')
                            .y(function(d) '{' return ys[index](d.value); '}');
      '}'

      svgs[index] = d3.select(''#area'' + (index + 1)).append(''svg'')
        .attr(''width'', width + margin.left + margin.right)
        .attr(''height'', height + margin.top + margin.bottom)
        .append(''g'')
        .attr(''transform'', ''translate('' + margin.left + '','' + margin.top + '')'');

      // x, y and title
      svgs[index].append(''text'')
        .attr(''transform'', ''translate('' + (width / 2) + '' ,'' +
              (height + margin.bottom - 10 ) + '')'')
        .style(''text-anchor'', ''middle'')
        .text(''Time ({1})'');

      svgs[index].append(''text'')
        .attr(''transform'', ''rotate(-90)'')
        .attr(''y'', 0 - margin.left)
        .attr(''x'',0 - (height / 2))
        .attr(''dy'', ''1em'')
        .style(''text-anchor'', ''middle'')
        .text(yLabels[index]);

      svgs[index].append(''text'')
        .attr(''x'', (width / 2))
        .attr(''y'', 10 - (margin.top / 2))
        .attr(''text-anchor'', ''middle'')
        .text(titles[index]);
    '}'

    // request data
    function requestData() '{'
      $.ajax('{'url: ''simulateMetrics'',
        success: function(point) '{'
          // update data
          if (basetime == 0)  basetime = point.time;
          point.time = (point.time - basetime) / {2};
          data.push(point);

          // clear old
          for (var i = 0; i < 7; i ++) '{'
            svgs[i].selectAll(''g.tick'').remove();
            svgs[i].selectAll(''g'').remove();
            var color = d3.scale.category10();
            color.domain(d3.keys(data[0]).filter(function(key) '{'
              return $.inArray(key, legends[i]) !== -1;
            '}'));

            var values;
            if (isAreas[i] == 1) '{'
              values = stacks[i](color.domain().map(function(name) '{'
                return '{'
                  name: name,
                  values: data.map(function(d) '{'
                    return '{'time: d.time, y: d[name]'}';
                  '}')
                '}'
              '}'));
              xs[i].domain(d3.extent(data, function(d) '{' return d.time;'}'));
              ys[i].domain([
                d3.min(values, function(c) '{' return 0; '}'),
                d3.max(values, function(c) '{' return 1.1 * d3.max(c.values,
                                        function(v) '{' return v.y + v.y0; '}'); '}')
              ]);
            '}' else '{'
              values = color.domain().map(function(name) '{'
                return '{'
                  name: name,
                  values: data.map(function(d) '{'
                    return '{'time: d.time, value: d[name]'}';
                  '}')
                '}'
              '}');
              xs[i].domain(d3.extent(data, function(d) '{' return d.time;'}'));
              ys[i].domain([
                d3.min(values, function(c) '{' return 0; '}'),
                d3.max(values, function(c) '{' return 1.1 * d3.max(c.values,
                                        function(v) '{' return v.value; '}'); '}')
              ]);
            '}'

            svgs[i].append(''g'').attr(''class'', ''x axis'')
              .attr(''transform'', ''translate(0,'' + height + '')'').call(xAxiss[i]);

            svgs[i].append(''g'').attr(''class'', ''y axis'').call(yAxiss[i]);

            var value = svgs[i].selectAll(''.path'')
              .data(values).enter().append(''g'').attr(''class'', ''line'');

            if(isAreas[i] == 1) '{'
              value.append(''path'').attr(''class'', ''area'')
                    .attr(''d'', function(d) '{'return lineAreas[i](d.values); '}')
                    .style(''fill'', function(d) '{'return color(d.name); '}');
            '}' else '{'
              value.append(''path'').attr(''class'', ''line'')
                    .attr(''d'', function(d) '{'return lineAreas[i](d.values); '}')
                    .style(''stroke'', function(d) '{'return color(d.name); '}');
            '}'

            // legend
            var legend = svgs[i].append(''g'')
              .attr(''class'', ''legend'')
              .attr(''x'', width + 5)
              .attr(''y'', 25)
              .attr(''height'', 120)
              .attr(''width'', 140);
            legend.selectAll(''g'').data(legends[i])
              .enter()
              .append(''g'')
              .each(function(d, i) '{'
                var g = d3.select(this);
                g.append(''rect'')
                  .attr(''x'', width + 5)
                  .attr(''y'', i*20)
                  .attr(''width'', 10)
                  .attr(''height'', 10)
                  .style(''fill'', color(d));
                g.append(''text'')
                  .attr(''x'', width + 25)
                  .attr(''y'', i * 20 + 8)
                  .attr(''height'',30)
                  .attr(''width'',250)
                  .style(''fill'', color(d))
                  .text(d);
              '}');
            '}'

            if(running == 1)
              setTimeout(requestData, {3});
          '}',
          cache: false
        '}');
      '}'

      // stop
      function stop() '{'
        running = 0;
      '}'
      requestData();
    </script>
  </body>
</html>