update pie chart to donut, reuse in widget

allure-report-face/package.json

@@ -55,7 +55,6 @@
     "backbone-decorators": "0.0.4",
     "backbone.marionette": "^2.4.5",
     "backbone.wreqr": "^1.3.0",
-    "c3": "^0.4.11-rc4",
     "d3": "^3.5.12",
     "denodeify": "^1.2.1",
     "filesize": "^3.1.5",

allure-report-face/src/blocks/splash/styles.css

@@ -0,0 +1,11 @@
+.splash {
+    margin: auto;
+    text-align: center;
+    &__title {
+        font-size: 3.5em;
+        line-height: 1;
+    }
+    &__subtitle {
+        color: $text-muted-color;
+    }
+}

allure-report-face/src/blocks/widget/styles.css

@@ -1,6 +1,18 @@
 @import "../../variables.css";
 
 .widget {
+  margin-bottom: $gap-size;
+  position: relative;
+
+  &_ghost {
+    border: 1px dashed $border-accent-color;
+    box-shadow: none;
+    min-height: 50px;
+    & > * {
+      display: none;
+    }
+  }
+
   &__title {
     margin-top: 0;
     font-weight: lighter;
@@ -10,23 +22,15 @@
   &__subtitle {
     color: $text-muted-color;
     font-size: 16px;
-    text-transform: lowercase;
+    text-transform: none;
   }
 
   &__flex-line {
     display: flex;
   }
 
-  margin-bottom: $gap-size;
-  position: relative;
-
-  &_ghost {
-    border: 1px dashed $border-accent-color;
-    box-shadow: none;
-    min-height: 50px;
-    & > * {
-      display: none;
-    }
+  &__column {
+    width: 50%;
   }
 
   &__handle {
@@ -50,20 +54,3 @@
     }
   }
 }
-
-.widget-content {
-  width: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: auto;
-  flex-direction: column;
-
-  &__title {
-    font-size: 3.5em;
-  }
-
-  &__subtitle {
-    color: $text-muted-color;
-  }
-}

allure-report-face/src/components/chart/BaseChartView.js

@@ -6,6 +6,7 @@ export default class BaseChartView extends View {
 
     constructor(options) {
         super(options);
+        this.options = options;
         this.firstRender = true;
     }
 

allure-report-face/src/components/chart/styles.css

@@ -11,6 +11,9 @@
     margin-bottom: $gap-size;
     font-size: 18px;
   }
+  &__caption {
+      text-anchor: middle;
+  }
   &__svg {
     width: 100%;
     height: 100%;
@@ -64,4 +67,3 @@
     }
   }
 }
-

allure-report-face/src/components/widgets-grid/WidgetsGridView.js

@@ -20,7 +20,7 @@ class WidgetsGridView extends LayoutView {
         return '';
     }
 
-    onRender() {
+    onShow() {
         this.getWidgetsArrangement().map(col => {
             return col.map(widgetName => [widgetName, allurePlugins.widgets[widgetName]]);
         }).forEach(widgetCol => {

allure-report-face/src/plugins/default/index.js

@@ -1,10 +1,6 @@
 import allurePlugins from '../../pluginApi';
-
-import OverviewWidget from '../../components/widget-overview/OverviewWidget';
 import OverviewLayout from '../../layouts/overview/OverivewLayout';
 
-allurePlugins.addWidget('total', OverviewWidget);
-
 allurePlugins.addTab('', {
     title: 'Overview', icon: 'fa fa-home',
     route: '',

allure-report-face/src/plugins/graph/GraphsView.js

@@ -2,17 +2,26 @@ import './styles.css';
 import {LayoutView} from 'backbone.marionette';
 import $ from 'jquery';
 import {className} from '../../decorators';
-import * as charts from './charts';
+import DurationChart from './charts/DurationChart';
+import StatusChart from './charts/StatusChart';
+import SeverityChart from './charts/SeverityChart';
+
 
 @className('charts-grid')
 class GraphsView extends LayoutView {
     template() { return ''; }
 
     onShow() {
-        Object.keys(charts).forEach(chart => this.addChart(chart, charts[chart]));
+        const collection = this.collection;
+        this.addChart('Status', new StatusChart({
+            statistic: this.getStatusChartData(),
+            showLegend: true
+         }));
+        this.addChart('Severity', new SeverityChart({collection}));
+        this.addChart('Duration', new DurationChart({collection}));
     }
 
-    addChart(name, Chart) {
+    addChart(name, chart) {
         const container = $(`<div class="chart__wrap">
             <div class="chart island">
                 <h2 class="chart__title">${name}</h2>
@@ -21,7 +30,21 @@ class GraphsView extends LayoutView {
         </div>`);
         this.$el.append(container);
         this.addRegion(name, {el: container.find('.chart__body')});
-        this.getRegion(name).show(new Chart({collection: this.collection}));
+        this.getRegion(name).show(chart);
+    }
+
+    getStatusChartData() {
+        return this.collection.reduce((stats, testcase) => {
+            stats[testcase.get('status').toLowerCase()]++;
+            return stats;
+        }, {
+            total: this.collection.length,
+            failed: 0,
+            broken: 0,
+            canceled: 0,
+            pending: 0,
+            passed: 0
+        });
     }
 }
 

allure-report-face/src/plugins/graph/charts/StatusChart.js

@@ -1,6 +1,7 @@
 import BaseChartView from '../../../components/chart/BaseChartView';
 import TooltipView from '../../../components/tooltip/TooltipView';
 import {on} from '../../../decorators';
+import {omit} from 'underscore';
 import d3 from 'd3';
 import escape from '../../../util/escape';
 
@@ -13,71 +14,84 @@ const legendTpl = `<div class="chart__legend">
 export default class StatusChart extends BaseChartView {
 
     initialize() {
-        this.arc = d3.svg.arc().innerRadius(0);
+        this.arc = d3.svg.arc();
         this.pie = d3.layout.pie().sort(null).value(d => d.value);
         this.tooltip = new TooltipView({position: 'center'});
     }
 
     getChartData() {
-        const stats = this.collection.reduce((stats, testcase) => {
-            stats[testcase.get('status')]++;
-            return stats;
-        }, {
-            FAILED: 0,
-            BROKEN: 0,
-            CANCELED: 0,
-            PENDING: 0,
-            PASSED: 0
-        });
+        const {total} = this.options.statistic;
+        const stats = omit(this.options.statistic, 'total');
         return Object.keys(stats).map(key => ({
-            name: key,
+            name: key.toUpperCase(),
             value: stats[key],
-            part: stats[key] / this.collection.length
+            part: stats[key] / total
         }));
     }
 
 
     setupViewport() {
         const svg = super.setupViewport();
-        this.$el.append(legendTpl);
+        if(this.options.showLegend) {
+            this.$el.append(legendTpl);
+        }
         return svg;
     }
 
     onShow() {
         const data = this.getChartData();
         const width = this.$el.width();
         const radius = width / 4;
+        var leftOffset = width / 2;
+
+        if(this.options.showLegend) {
+            leftOffset -= 70;
+        }
         this.$el.height(radius * 2);
-        this.arc.outerRadius(radius);
+        this.arc.innerRadius(0.8 * radius).outerRadius(radius);
 
         this.svg = this.setupViewport();
 
         var sectors = this.svg.select('.chart__plot')
-            .attr({transform: `translate(${width / 2 - 70},${radius})`})
+            .attr({transform: `translate(${leftOffset},${radius})`})
             .selectAll('.chart__arc').data(this.pie(data))
             .enter()
             .append('path')
             .attr('class', d => 'chart__arc chart__fill_status_' + d.data.name);
 
         this.bindTooltip(sectors);
 
+        this.svg.select('.chart__plot').append('text')
+            .classed('chart__caption', true)
+            .attr({dy: '0.4em'})
+            .style({'font-size': radius / 3})
+            .text(this.getChartTitle());
+
         if(this.firstRender) {
             sectors.transition().duration(750).attrTween('d', d => {
-                const radiusFn = d3.interpolate(10, radius);
                 const startAngleFn = d3.interpolate(0, d.startAngle);
                 const endAngleFn = d3.interpolate(0, d.endAngle);
                 return t =>
-                    this.arc.outerRadius(radiusFn(t))({startAngle: startAngleFn(t), endAngle: endAngleFn(t)});
+                    this.arc({startAngle: startAngleFn(t), endAngle: endAngleFn(t)});
             });
         } else {
             sectors.attr('d', d => this.arc(d));
         }
         super.onShow();
     }
 
+    formatNumber(number) {
+        return (Math.floor(number * 100) / 100).toString();
+    }
+
+    getChartTitle() {
+        const {passed, total} = this.options.statistic;
+        return this.formatNumber(passed / total * 100) + '%';
+    }
+
     getTooltipContent({data}) {
         return escape`
-            ${data.value} tests (${(data.part * 100).toFixed(0)}%)<br>
+            ${data.value} tests (${this.formatNumber(data.part * 100)}%)<br>
             ${data.name}
         `;
     }

allure-report-face/src/plugins/graph/graph-widget/GraphWidget.hbs

@@ -0,0 +1,14 @@
+<h2 class="{{b 'widget' 'title'}}">{{t "TEST_RUN"}}
+    <span class="{{b 'widget' 'subtitle'}}">
+        {{t "STARTED_AT" date=(date time.start) time=(time time.start)}}
+    </span>
+</h2>
+
+<div class="{{b 'widget' 'flex-line'}}">
+    <div class="{{b 'widget' 'column'}} splash">
+        <div class="{{b 'splash' 'title'}}">{{ statistic.total }}</div>
+        <div class="{{b 'splash' 'subtitle'}}">Cases in {{duration time.duration}}</div>
+    </div>
+
+    <div class="{{b 'widget' 'column'}} {{b 'graph-widget' 'chart'}}"></div>
+</div>