feat(html reporter): add graph to report

add charts to html report
kucherenko · Dec 14, 2018 · d051154 · d051154
1 parent af99689
commit d051154
Show file tree

Hide file tree

Showing 10 changed files with 133 additions and 55 deletions.
diff --git a/.jscpd.json b/.jscpd.json
@@ -1,5 +1,5 @@
 {
-  "threshold": 0.1,
+  "threshold": 0,
   "reporters": ["console", "badge"],
   "ignore": ["**/__snapshots__/**"],
   "tokensToSkip": ["comment", "empty", "new_line", "ignore"]

diff --git a/assets/jscpd-badge.svg b/assets/jscpd-badge.svg
diff --git a/html/layout.pug b/html/layout.pug
@@ -5,11 +5,11 @@ html(lang='en')
     meta(http-equiv='x-ua-compatible', content='ie=edge')
     meta(name='viewport', content='width=device-width, initial-scale=1')
     title jscpd, Copy/Paste Detector
-    link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism.min.css')
     link(rel='stylesheet', href='https://unpkg.com/purecss@1.0.0/build/pure-min.css', integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w", crossorigin="anonymous")
+    link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism.min.css')
     script(src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js')
     script(src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/plugins/autoloader/prism-autoloader.min.js')
-
+    script(src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.js", integrity="sha256-5oGDDQdB95LVt6XQcCR1rIRWUIoDC9vtM/TmZFmmvHc=", crossorigin="anonymous")
     script.
 
       Prism.plugins.autoloader.languages_path = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/';
@@ -28,6 +28,63 @@ html(lang='en')
       }
 
       window.onload = function() {
+        echarts.init(document.getElementById('totalChart')).setOption({
+          title: {
+            text: 'Copy/paste report',
+            x: 'center'
+          },
+          tooltip: {
+            trigger: 'item',
+            formatter: "{a} <br/>{b} : {c} lines"
+          },
+          series: [
+            {
+              name: 'Copy/Paste report',
+              type: 'pie',
+              data: [
+                { value: #{total.lines}, name: 'Total' },
+                { value: #{total.duplicatedLines}, name: 'Copy/Pasted' },
+              ]
+            }
+          ]
+        });
+
+        echarts.init(document.getElementById('formatsChart')).setOption({
+          title: {
+            text: 'Formats analyzed',
+            x: 'center'
+          },
+          tooltip: {
+            trigger: 'item',
+            formatter: "{a} <br/>{b} : {c} lines"
+          },
+          label: {
+            normal: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              show: true,
+              textStyle: {
+                fontSize: '30',
+                fontWeight: 'bold'
+              }
+            }
+          },
+          labelLine: {
+            normal: {
+              show: false
+            }
+          },
+          series: [
+            {
+              name: 'Formats analyzed',
+              type: 'pie',
+              data: !{JSON.stringify(formatsReports)}
+            }
+          ]
+        });
+
         document.querySelectorAll('.clone').forEach(function(cloneElement) {
           cloneElement.addEventListener('click', expandCollapse)
         });
@@ -111,6 +168,10 @@ html(lang='en')
         padding: 2em 1em 0;
       }
 
+      a.top {
+        padding-left: 1em;
+      }
+
       .clone {
         padding-bottom: 2em;
 
@@ -278,6 +339,11 @@ html(lang='en')
         .footer
           p © 2013-2018 jscpd, copy/paste detector
 
-
-
-
+    script(async='', src='https://www.googletagmanager.com/gtag/js?id=UA-730549-17')
+    script.
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
+      gtag('config', 'UA-730549-17');
diff --git a/html/report.pug b/html/report.pug
@@ -2,6 +2,11 @@ extends layout
 
 block content
 
+  a(name="top")
+  .pure-g
+    .pure-u-1-2.pure-u-md-1#totalChart(style="min-height:20em;")
+    .pure-u-1-2.pure-u-md-1#formatsChart(style="min-height:20em;")
+
   .controls
     .pure-u
       button.pure-button(onclick="collapseExpandAll()") Collapse/Expand All
@@ -34,6 +39,7 @@ mixin mode(name, mode)
       p
         span.mode-rate= mode.total.percentage + '%'
         = " Total files: " + mode.total.sources + ", total lines of code: " + mode.total.lines + ", duplicated lines: " + mode.total.duplicatedLines
+        a.top(href="#top")= "[Top ↑↑↑]"
 
     each clone in clones
       if clone.format === name

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -74,7 +74,7 @@
     "@types/prismjs": "^1.9.0",
     "@types/proxyquire": "^1.3.28",
     "@types/pug": "^2.0.4",
-    "@types/sinon": "^5.0.2",
+    "@types/sinon": "^7.0.0",
     "ava": "^1.0.0-beta.8",
     "codecov": "^3.1.0",
     "cz-conventional-changelog": "^2.1.0",
@@ -86,7 +86,7 @@
     "opn-cli": "^3.1.0",
     "prettier": "^1.14.3",
     "proxyquire": "^2.1.0",
-    "sinon": "^6.3.5",
+    "sinon": "^7.2.2",
     "standard-version": "^4.4.0",
     "trash-cli": "^1.4.0",
     "ts-node": "^7.0.1",

diff --git a/src/__tests__/__snapshots__/index.spec.js.md b/src/__tests__/__snapshots__/index.spec.js.md
@@ -92,7 +92,7 @@ Generated by [AVA](https://ava.li).
           },
         },
         format: 'javascript',
-        foundDate: 'date',
+        foundDate: 123123,
       },
       {
         duplicationA: {
@@ -182,7 +182,7 @@ Generated by [AVA](https://ava.li).
           },
         },
         format: 'javascript',
-        foundDate: 'date',
+        foundDate: 123123,
       },
       {
         duplicationA: {
@@ -272,7 +272,7 @@ Generated by [AVA](https://ava.li).
           },
         },
         format: 'javascript',
-        foundDate: 'date',
+        foundDate: 123123,
       },
       {
         duplicationA: {
@@ -410,7 +410,7 @@ Generated by [AVA](https://ava.li).
           },
         },
         format: 'javascript',
-        foundDate: 'date',
+        foundDate: 123123,
       },
       {
         duplicationA: {
@@ -500,6 +500,6 @@ Generated by [AVA](https://ava.li).
           },
         },
         format: 'javascript',
-        foundDate: 'date',
+        foundDate: 123123,
       },
     ]
diff --git a/src/__tests__/__snapshots__/index.spec.js.snap b/src/__tests__/__snapshots__/index.spec.js.snap
diff --git a/src/__tests__/index.spec.ts b/src/__tests__/index.spec.ts
@@ -8,7 +8,7 @@ let log: any;
 
 const cpd = new JSCPD({});
 
-stub(Date.prototype, 'getTime').returns('date');
+stub(Date.prototype, 'getTime').returns(123123);
 
 test.beforeEach(() => {
   log = console.log;

diff --git a/src/reporters/html.ts b/src/reporters/html.ts
@@ -13,8 +13,14 @@ export class HtmlReporter implements IReporter {
 
   public report(clones: IClone[], statistic: IStatistic): void {
     const reportFunction = compileFile(__dirname + '/../../html/report.pug');
+
+    const formatsReports: any[] = Object.keys(statistic.formats).map(format => {
+      return { value: statistic.formats[format].total.lines, name: format };
+    });
+
     const html = reportFunction({
       ...statistic,
+      formatsReports,
       clones,
       getPath,
       getSourceLocation,