nginx/index.html

<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="icon" type="image/x-icon" href="public/images/favicon.ico">
  <title>Coco Reporter - {{title}}</title>
  <link rel="stylesheet" href="public/css/reset.css">
  <link rel="stylesheet" href="public/css/tooltip.css">
  <link rel="stylesheet" href="public/css/context-menu.css">
  <link rel="stylesheet" href="public/css/layout.css">
  <style>
    #commit-calendar {
      width: 50%;
    }

    #slider-chart,
    #code-flower,
    #file-explorer,
    #commit-contributions,
    #line-history,
    #pipeline,
    #circle-packing, #nested-treemap, #branch-timeline, #members-lifecycle {
      width: 1200px;
      height: auto;
      position: relative;
    }

    #circle-packing text,
    #branch-timeline svg,
    #members-lifecycle svg,
    .menu-entry rect,
    .tooltip {
      font: 12px sans-serif;
      line-height: 20px;
      font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
    }

    .nodetext {
      z-index: 999;
    }

    #commits-tree text {
      font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
    }

    /* hour heatmap: for */
    rect.bordered {
      stroke: #E6E6E6;
      stroke-width: 4px;
    }

    text.mono {
      font-size: 12px;
      font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
      fill: #aaa;
    }

    text.axis-workweek {
      fill: #000;
    }

    text.axis-worktime {
      fill: #000;
    }

    /* learning-curve: line chart */
    .line {
      fill: none;
      stroke: steelblue;
      stroke-width: 2px;
    }

    /* tag history line */
    .dot-line {
      fill: none;
      stroke: black;
      stroke-width: 2px;
    }


    /* slider */
    #play-button {
      position: relative;
      left: 50px;
      background: #f08080;
      border-radius: 3px;
      border: none;
      color: white;
      margin: 0;
      padding: 0 12px;
      width: 60px;
      cursor: pointer;
      height: 30px;
    }

    #play-button:hover {
      background-color: #696969;
    }

    .ticks {
      font-size: 10px;
    }

    .track,
    .track-inset,
    .track-overlay {
      stroke-linecap: round;
    }

    .track {
      stroke: #000;
      stroke-opacity: 0.3;
      stroke-width: 10px;
    }

    .track-inset {
      stroke: #dcdcdc;
      stroke-width: 8px;
    }

    .track-overlay {
      pointer-events: stroke;
      stroke-width: 50px;
      stroke: transparent;
      cursor: crosshair;
    }

    .handle {
      fill: #fff;
      stroke: #000;
      stroke-opacity: 0.5;
      stroke-width: 1.25px;
    }
  </style>
</head>
<body>
<h1>Coco Reporter</h1>

<h2>Code Explorer</h2>
<select id="file-history-select"></select>
<button id="play-button">Play</button>
<div id="file-explorer"></div>

<h1>Coding Skills</h1>
<h2>Code Frequency</h2>
<select id="code-frequency-select"></select>
<div id="code-frequency"></div>
<h3>Commit Contributions</h3>
<div id="commit-contributions"></div>
<h3>Line History</h3>
<div id="line-history"></div>

<h1>Deploy Design</h1>
<h2>Commit Calendar</h2>
<div id="commit-calendar"></div>
<h2>Branches History</h2>
<div id="branch-timeline"></div>
<h2>Tags Timeline</h2>
<select id="tags-timeline-select"></select>
<div id="tags-timeline"></div>

<h1>Tooling Usage</h1>
<div id="pipeline"></div>

<h1>Knowledge Transform</h1>
<h2>Learning Curve</h2>
<div id="learning-curve"></div>
<h2>Member Lifecycle</h2>
<div id="members-lifecycle"></div>

<h1>Architecture Design(Physical Design)</h1>
<h2>Package by Size 1</h2>
<div id="circle-packing"></div>
<h2>Package by Size 2</h2>
<div id="nested-treemap"></div>
<h2>Coder Flower</h2>
<div id="code-flower"></div>

<h1>Organizational Culture</h1>
<div class="layout-grid2x2">
  <div>
    <h2>Hour Heatmap</h2>
    <div id="hour-heatmap"></div>
  </div>
  <div>
    <h2>Hour Heatmap (Half Year)</h2>
    <div id="hour-heatmap-half-year"></div>
  </div>
  <div>
    <h2>Hour Heatmap (Three Month)</h2>
    <div id="hour-heatmap-three-month"></div>
  </div>
</div>

<h2>Commits Tree</h2>
<div id="commits-tree"></div>

<script src="public/js/libs/d3.min.js"></script>

<!-- for file explorer -->
<script src="public/js/plugins/d3-weighted-voronoi.js"></script>
<script src="public/js/plugins/d3-voronoi-map.js"></script>
<script src="public/js/plugins/d3-voronoi-treemap.js"></script>
<script src="public/js/plugins/seedrandom.min.js"></script>
<script src="public/js/plugins/code-layout.js"></script>

<script src="public/js/graph-config.js"></script>

<script src="public/js/support/code-support.js"></script>
<script src="public/js/support/dom-support.js"></script>
<script src="public/js/support/menu-support.js"></script>
<script src="public/js/support/time-support.js"></script>
<script src="public/js/support/commit-convert.js"></script>

<script src="public/js/graph/cloc/circle-packing.js"></script>
<script src="public/js/graph/cloc/nested-treemap.js"></script>
<script src="public/js/graph/cloc/code-flower.js"></script>

<script src="public/js/plugins/legend.js"></script>

<script src="public/js/graph/git/branch-timeline.js"></script>
<script src="public/js/graph/git/commits-tree.js"></script>
<script src="public/js/graph/git/commit-hour-heatmap.js"></script>
<script src="public/js/graph/git/tags-timeline.js"></script>

<script src="public/js/graph/git/team-lifecycle.js"></script>
<script src="public/js/graph/git/team-learning-curve.js"></script>
<script src="public/js/graph/git/commit-calendar.js"></script>
<script src="public/js/graph/git/commit-code-frequency.js"></script>
<script src="public/js/graph/git/time-interactive-line.js"></script>
<script src="public/js/graph/git/file-explorer.js"></script>

<script src="public/js/graph/plugins/struct-visual.js"></script>
<script src="public/js/graph/plugins/pipeline-visual.js"></script>

<script src="public/js/index.js"></script>
</body>
</html>