--- /dev/null
+<li class="overview-gate-condition spacer-bottom text-ellipsis">
+ <i class="{{alertIconClass level}}"></i>
+ {{#canHaveDrilldownUrl metric period}}
+ <a href="{{urlForDrilldown ../../componentKey metric period periodDate}}"
+ class="overview-status overview-status-{{level}}"
+ title="{{#notEq level 'OK'}}{{t 'quality_gates.operator' op 'short'}} {{/notEq}}{{#eq level 'ERROR'}}{{formatMeasure error type}}{{/eq}}{{#eq level 'WARN'}}{{formatMeasure warning type}}{{/eq}}"
+ data-toggle="tooltip" data-placement="bottom">{{formatMeasure actual type}}</a>
+ {{else}}
+ <span class="overview-status overview-status-{{level}}"
+ title="{{#notEq level 'OK'}}{{t 'quality_gates.operator' op 'short'}} {{/notEq}}{{#eq level 'ERROR'}}{{formatMeasure error type}}{{/eq}}{{#eq level 'WARN'}}{{formatMeasure warning type}}{{/eq}}"
+ data-toggle="tooltip" data-placement="bottom">{{formatMeasure actual type}}</span>
+ {{/canHaveDrilldownUrl}}
+ <span class="note text-lowercase" style="padding-top: 4px;">{{t 'metric' metric 'name'}}</span>
+ <span class="note text-lowercase">{{default periodName period}}</span>
+</li>
+<header class="overview-card-header page-header">
+ <h2 class="page-title">{{t 'overview.testing'}}</h2>
+</header>
+
<div class="overview-highlight">
- <h6 class="note">{{t 'overview.coverage'}}</h6>
+ <h6 class="note">{{t 'metric.coverage.name'}}</h6>
<div class="overview-main-measure">
{{#notNull coverage}}
- <a href="{{urlForDrilldown componentKey 'overall_coverage'}}">{{formatMeasure coverage 'PERCENT'}}</a>
+ <a href="{{urlForDrilldown componentKey 'coverage'}}">{{formatMeasure coverage 'PERCENT'}}</a>
{{else}}
–
{{/notNull}}
</div>
- {{#notNull coverage3}}
- <div class="spacer-top">
- <span class="overview-measure {{#gt coverage3 0}}text-success{{/gt}}{{#lt coverage3 0}}text-danger{{/lt}}">{{formatMeasureVariation coverage3 'PERCENT'}}</span>
- <span class="note">{{period3Name}}</span>
- </div>
- {{/notNull}}
{{#notNull newCoverage3}}
- <div class="spacer-top">
- <a class="overview-measure spacer-top" href="{{urlForDrilldown componentKey 'new_overall_coverage' 3}}">{{formatMeasure newCoverage3 'PERCENT'}}</a>
- <span class="note">on new code</span>
- </div>
+ <h6 class="note">{{period3Name}}</h6>
+ <a class="overview-measure spacer-top"
+ href="{{urlForDrilldown componentKey 'new_coverage' 3}}">{{formatMeasure newCoverage3 'PERCENT'}}</a>
+ <span class="note">{{t 'overview.on_new_code'}}</span>
{{/notNull}}
</div>
<div class="overview-trend">
- <div class="overview-sparkline" id="overview-coverage-trend" data-width="300" data-height="50" data-color="#f3ca8e" data-type="PERCENT"></div>
+ <div class="overview-sparkline" id="overview-coverage-trend" data-height="120" data-color="#f3ca8e"
+ data-type="PERCENT"></div>
</div>
--- /dev/null
+<header class="overview-card-header page-header">
+ <h2 class="page-title">{{t 'overview.debt'}}</h2>
+</header>
+
+<div class="overview-highlight">
+ <h6 class="note">{{t 'metric.sqale_index.name'}}</h6>
+ <div class="overview-main-measure">
+ <a href="{{urlForDrilldown componentKey 'sqale_index'}}">{{formatMeasure debt 'WORK_DUR'}}</a>
+ </div>
+ {{#notNull issues3}}
+ <h6 class="note">{{period3Name}}</h6>
+ <a href="{{urlForDrilldown componentKey 'new_technical_debt'}}"
+ class="overview-measure {{#gt newDebt 0}}text-danger{{else}}text-success{{/gt}}">{{formatMeasure newDebt 'WORK_DUR'}}</a>
+ <span class="note">{{t 'overview.new'}}</span>
+ {{/notNull}}
+</div>
+
+<div class="overview-trend">
+ <div class="overview-sparkline" id="overview-debt-trend" data-height="120" data-color="#f3ca8e"
+ data-type="WORK_DUR"></div>
+</div>
+<header class="overview-card-header page-header">
+ <h2 class="page-title">{{t 'overview.duplications'}}</h2>
+</header>
+
<div class="overview-highlight">
- <h6 class="note">{{t 'overview.duplications'}}</h6>
+ <h6 class="note">{{t 'metric.duplicated_lines_density.short_name'}}</h6>
<div class="overview-main-measure">
<a href="{{urlForDrilldown componentKey 'duplicated_lines_density'}}">
{{formatMeasure duplications 'PERCENT'}}
</a>
</div>
{{#notNull duplications3}}
- <div class="spacer-top">
- <a class="overview-measure {{#gt duplications3 0}}text-danger{{/gt}}{{#lt duplications3 0}}text-success{{/lt}}"
- href="{{urlForDrilldown componentKey 'duplicated_lines_density' 3}}">{{formatMeasureVariation duplications3 'PERCENT'}}</a>
- <span class="note">{{period3Name}}</span>
- </div>
+ <h6 class="note">{{period3Name}}</h6>
+ <a class="overview-measure {{#gt duplications3 0}}text-danger{{/gt}}{{#lt duplications3 0}}text-success{{/lt}}"
+ href="{{urlForDrilldown componentKey 'duplicated_lines_density' 3}}">{{formatMeasureVariation duplications3 'PERCENT'}}</a>
{{/notNull}}
</div>
<div class="overview-trend">
- <div class="overview-sparkline" id="overview-duplications-trend" data-width="300" data-height="50" data-color="#f3ca8e" data-type="PERCENT"></div>
+ <div class="overview-sparkline" id="overview-duplications-trend" data-height="120" data-color="#f3ca8e"
+ data-type="PERCENT"></div>
</div>
-<div class="text-center">
- {{#notEmpty gateConditions}}
- <ul class="list-inline spacer-top" style="display: inline-block;">
- {{#each gateConditions}}
- <li>
- {{#canHaveDrilldownUrl metric period}}
- <a href="{{urlForDrilldown ../../componentKey metric period periodDate}}"
- class="overview-status overview-status-{{level}}"
- title="{{#notEq level 'OK'}}{{t 'quality_gates.operator' op 'short'}} {{/notEq}}{{#eq level 'ERROR'}}{{formatMeasure error type}}{{/eq}}{{#eq level 'WARN'}}{{formatMeasure warning type}}{{/eq}}"
- data-toggle="tooltip" data-placement="bottom">{{formatMeasure actual type}}</a>
- {{else}}
- <span class="overview-status overview-status-{{level}}"
- title="{{#notEq level 'OK'}}{{t 'quality_gates.operator' op 'short'}} {{/notEq}}{{#eq level 'ERROR'}}{{formatMeasure error type}}{{/eq}}{{#eq level 'WARN'}}{{formatMeasure warning type}}{{/eq}}"
- data-toggle="tooltip" data-placement="bottom">{{formatMeasure actual type}}</span>
- {{/canHaveDrilldownUrl}}
- <p class="note text-lowercase" style="padding-top: 4px;">{{t 'metric' metric 'name'}}</p>
- <p class="note">{{default periodName period}}</p>
- </li>
- {{/each}}
- </ul>
- {{/notEmpty}}
-</div>
+<header class="overview-card-header page-header">
+ <h2 class="page-title">{{t 'overview.gate'}}</h2>
+</header>
+
+{{#notEmpty gateConditions}}
+ <div class="columns">
+ <div class="column-half">
+ <ul>
+ {{#eachEven gateConditions}}
+ {{> '_overview-gate-condition'}}
+ {{/eachEven}}
+ </ul>
+ </div>
+ <div class="column-half">
+ <ul>
+ {{#eachOdd gateConditions}}
+ {{> '_overview-gate-condition'}}
+ {{/eachOdd}}
+ </ul>
+ </div>
+ </div>
+{{/notEmpty}}
+<header class="overview-card-header page-header">
+ <h2 class="page-title">{{t 'overview.issues'}}</h2>
+</header>
+
<div class="overview-highlight">
<h6 class="note">{{t 'overview.issues'}}</h6>
<div class="overview-main-measure">
- <a href="{{urlForIssuesOverview componentKey}}">{{formatMeasure issues 'INT'}}</a>
- </div>
- <div class="spacer-top">
- {{#notNull sqaleRating}}
- <a class="overview-measure" href="{{urlForDrilldown componentKey 'sqale_rating'}}"><span class="rating rating-{{formatMeasure sqaleRating 'RATING'}}">{{formatMeasure sqaleRating 'RATING'}}</span></a>
- {{/notNull}}
-
- <a class="overview-measure" href="{{urlForDrilldown componentKey 'sqale_index'}}">{{formatMeasure debt 'WORK_DUR'}}</a>
+ <a href="{{urlForIssuesOverview componentKey}}">{{formatMeasure issues 'SHORT_INT'}}</a>
</div>
{{#notNull issues3}}
- <div class="spacer-top">
- <a href="{{urlForIssuesOverview componentKey period3Date}}"
- class="overview-measure {{#gt issues3 0}}text-danger{{else}}text-success{{/gt}}">{{formatMeasureVariation issues3 'INT'}}</a>
- <span class="note">new {{period3Name}}</span>
- </div>
+ <h6 class="note">{{period3Name}}</h6>
+ <a href="{{urlForIssuesOverview componentKey period3Date}}"
+ class="overview-measure {{#gt issues3 0}}text-danger{{else}}text-success{{/gt}}">{{formatMeasure issues3 'INT'}}</a>
+ <span class="note">{{t 'overview.new'}}</span>
{{/notNull}}
</div>
<div class="overview-trend">
- <div class="overview-sparkline" id="overview-issues-trend" data-width="300" data-height="50" data-color="#f3ca8e" data-type="INT"></div>
+ <div class="overview-sparkline" id="overview-issues-trend" data-height="120" data-color="#f3ca8e"
+ data-type="SHORT_INT"></div>
</div>
-<div class="overview-card overview-gate" id="overview-gate"></div>
-
-<div class="overview-container columns">
- <div class="column-half">
- <div class="overview-card" id="overview-size"></div>
- </div>
+<div class="columns">
<div class="column-half">
+ <div class="overview-card overview-gate" id="overview-gate"></div>
<div class="overview-card" id="overview-issues"></div>
+ <div class="overview-card" id="overview-debt"></div>
</div>
-</div>
-<div class="overview-container columns">
<div class="column-half">
+ <div class="overview-card" id="overview-size"></div>
<div class="overview-card" id="overview-coverage"></div>
- </div>
- <div class="column-half">
<div class="overview-card" id="overview-duplications"></div>
</div>
</div>
+<header class="overview-card-header page-header">
+ <h2 class="page-title">{{t 'overview.size'}}</h2>
+</header>
+
<div class="overview-highlight">
- <h6 class="note">{{t 'overview.lines_of_code'}}</h6>
+ <h6 class="note">{{t 'metric.ncloc.name'}}</h6>
<div class="overview-main-measure">
- <a href="{{urlForDrilldown componentKey 'ncloc'}}">{{formatMeasure ncloc 'INT'}}</a>
+ <a href="{{urlForDrilldown componentKey 'ncloc'}}">{{formatMeasure ncloc 'SHORT_INT'}}</a>
</div>
+
{{#notNull ncloc3}}
<div class="spacer-top">
- <span class="overview-measure">{{formatMeasureVariation ncloc3 'INT'}}</span>
- <span class="note">{{period3Name}}</span>
+ <h6 class="note">{{period3Name}}</h6>
+ <span class="overview-measure">{{formatMeasureVariation ncloc3 'SHORT_INT'}}</span>
</div>
{{/notNull}}
</div>
<div class="overview-trend">
- <div class="overview-sparkline" id="overview-size-trend" data-width="300" data-height="50" data-color="#f3ca8e" data-type="INT"></div>
+ <div class="overview-sparkline" id="overview-size-trend" data-height="120" data-color="#f3ca8e"
+ data-type="SHORT_INT"></div>
</div>
+
+
(function () {
+ function shortIntFormatter (value) {
+ var format = '0,0';
+ if (value >= 1000) {
+ format = '0.[0]a';
+ }
+ if (value >= 10000) {
+ format = '0a';
+ }
+ return numeral(value).format(format);
+ }
+
+ function shortIntVariationFormatter (value) {
+ var format = '+0,0';
+ if (value >= 1000) {
+ format = '+0.[0]a';
+ }
+ if (value >= 10000) {
+ format = '+0a';
+ }
+ return numeral(value).format(format);
+ }
+
/**
* Check if days should be displayed for a work duration
* @param {number} days
* @returns {string}
*/
function addSpaceIfNeeded (value) {
- return value.length > 0 ? value : value + ' ';
+ return value.length > 0 ? value + ' ' : value;
}
/**
'INT': function (value) {
return numeral(value).format('0,0');
},
+ 'SHORT_INT': shortIntFormatter,
'FLOAT': function (value) {
return numeral(value).format('0,0.0');
},
'INT': function (value) {
return value === 0 ? '0' : numeral(value).format('+0,0');
},
+ 'SHORT_INT': shortIntVariationFormatter,
'FLOAT': function (value) {
return value === 0 ? '0' : numeral(value).format('+0,0.0');
},
});
Handlebars.registerHelper('numberShort', function (number) {
- if (number > 9999) {
- return numeral(number).format('0.[0]a');
- } else {
- return numeral(number).format('0,0');
+ var format = '0,0';
+ if (number >= 10000) {
+ format = '0.[0]a';
+ }
+ if (number >= 100000) {
+ format = '0a';
}
+ return numeral(number).format(format);
});
Handlebars.registerHelper('pluginActions', function (actions, options) {
var defaults = {
height: 30,
color: '#1f77b4',
- interpolate: 'bundle',
+ interpolate: 'linear',
tension: 1,
type: 'INT'
};
xScale = d3.time.scale()
.domain(d3.extent(data, function (d) {
return moment(d.val).toDate();
- })),
+ }))
+ .nice(),
yScale = d3.scale.linear()
.domain(d3.extent(data, function (d) {
return d.count;
- })),
+ }))
+ .nice(),
- minValue = yScale.domain()[0],
- maxValue = yScale.domain()[1],
+ xTicks = xScale.ticks(5),
+ yTicks = yScale.ticks(3),
line = d3.svg.line()
.x(function (d) {
return yScale(d.count);
})
.interpolate(options.interpolate)
- .tension(options.tension),
-
- minLabel = plot.append('text')
- .text(window.formatMeasure(minValue, options.type))
- .attr('dy', '3px')
- .style('text-anchor', 'end')
- .style('font-size', '10px')
- .style('font-weight', '300')
- .style('fill', '#aaa'),
-
- maxLabel = plot.append('text')
- .text(window.formatMeasure(maxValue, options.type))
- .attr('dy', '5px')
- .style('text-anchor', 'end')
- .style('font-size', '10px')
- .style('font-weight', '300')
- .style('fill', '#aaa'),
-
- maxLabelWidth = Math.max(minLabel.node().getBBox().width, maxLabel.node().getBBox().width) + 3;
+ .tension(options.tension);
_.extend(options, {
- marginLeft: 1,
- marginRight: 1 + maxLabelWidth,
- marginTop: 6,
- marginBottom: 6
+ marginLeft: 20,
+ marginRight: 50,
+ marginTop: 0,
+ marginBottom: 25
});
_.extend(options, {
xScale.range([0, options.availableWidth]);
yScale.range([options.availableHeight, 0]);
+ xTicks.forEach(function (tick) {
+ plot.append('text')
+ .text(xScale.tickFormat()(tick))
+ .attr('x', xScale(tick))
+ .attr('y', options.availableHeight + 20)
+ .attr('dy', '0')
+ .style('text-anchor', 'middle')
+ .style('font-size', '10px')
+ .style('font-weight', '300')
+ .style('fill', '#aaa');
+ plot.append('line')
+ .attr('x1', xScale(tick))
+ .attr('x2', xScale(tick))
+ .attr('y1', 0)
+ .attr('y2', options.availableHeight)
+ .style('stroke', '#eee')
+ .style('shape-rendering', 'crispedges');
+ });
+
+ yTicks.forEach(function (tick) {
+ plot.append('text')
+ .text(window.formatMeasure(tick, options.type))
+ .attr('x', options.availableWidth + 50)
+ .attr('y', yScale(tick))
+ .attr('dy', '5px')
+ .style('text-anchor', 'end')
+ .style('font-size', '10px')
+ .style('font-weight', '300')
+ .style('fill', '#aaa');
+ plot.append('line')
+ .attr('x1', 0)
+ .attr('x2', options.availableWidth)
+ .attr('y1', yScale(tick))
+ .attr('y2', yScale(tick))
+ .style('stroke', '#eee')
+ .style('shape-rendering', 'crispedges');
+ });
+
plot.append('path')
.datum(data)
.attr('d', line)
.classed('line', true)
.style('stroke', options.color);
-
- minLabel
- .attr('x', options.availableWidth + maxLabelWidth)
- .attr('y', yScale(minValue));
- maxLabel
- .attr('x', options.availableWidth + maxLabelWidth)
- .attr('y', yScale(maxValue));
}
);
};
// add state model
this.state = new State(window.overviewConf);
+ this.state.set('period3Name', 'During Leak Period');
// create and render layout
this.layout = new Layout({
'overview/main/gate-view',
'overview/main/size-view',
'overview/main/issues-view',
+ 'overview/main/debt-view',
'overview/main/coverage-view',
'overview/main/duplications-view'
], function (MainLayout,
GateView,
SizeView,
IssuesView,
+ DebtView,
CoverageView,
DuplicationsView) {
mainLayout.gateRegion.show(new GateView(options));
mainLayout.sizeRegion.show(new SizeView(options));
mainLayout.issuesRegion.show(new IssuesView(options));
+ mainLayout.debtRegion.show(new DebtView(options));
mainLayout.coverageRegion.show(new CoverageView(options));
mainLayout.duplicationsRegion.show(new DuplicationsView(options));
this.state.fetch();
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
define([
+ 'overview/trend-view',
'templates/overview'
-], function () {
+], function (TrendView) {
return Marionette.Layout.extend({
template: Templates['overview-coverage'],
var trend = this.model.get('coverageTrend'),
hasCoverage = this.model.get('coverage') != null;
if (_.size(trend) > 1 && hasCoverage) {
- this.$('#overview-coverage-trend').sparkline(this.model.get('coverageTrend'));
+ this.trendView = new TrendView({ data: trend, type: 'PERCENT' });
+ this.trendView.render()
+ .$el.appendTo(this.$('#overview-coverage-trend'));
+ this.trendView.update();
+ }
+ },
+
+ onClose: function () {
+ if (this.trendView != null) {
+ this.trendView.detachEvents().remove();
}
}
});
--- /dev/null
+/*
+ * SonarQube, open source software quality management tool.
+ * Copyright (C) 2008-2014 SonarSource
+ * mailto:contact AT sonarsource DOT com
+ *
+ * SonarQube is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * SonarQube is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ */
+define([
+ 'overview/trend-view',
+ 'templates/overview'
+], function (TrendView) {
+
+ return Marionette.Layout.extend({
+ template: Templates['overview-debt'],
+
+ modelEvents: {
+ 'change': 'render'
+ },
+
+ onRender: function () {
+ var trend = this.model.get('debtTrend'),
+ hasDebt = this.model.get('debt') != null;
+ if (_.size(trend) > 1 && hasDebt) {
+ this.trendView = new TrendView({ data: trend, type: 'WORK_DUR' });
+ this.trendView.render()
+ .$el.appendTo(this.$('#overview-debt-trend'));
+ this.trendView.update();
+ }
+ },
+
+ onClose: function () {
+ if (this.trendView != null) {
+ this.trendView.detachEvents().remove();
+ }
+ }
+ });
+
+});
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
define([
+ 'overview/trend-view',
'templates/overview'
-], function () {
+], function (TrendView) {
return Marionette.Layout.extend({
template: Templates['overview-duplications'],
var trend = this.model.get('duplicationsTrend'),
hasDuplications = this.model.get('duplications') != null;
if (_.size(trend) > 1 && hasDuplications) {
- this.$('#overview-duplications-trend').sparkline(this.model.get('duplicationsTrend'));
+ this.trendView = new TrendView({ data: trend, type: 'PERCENT' });
+ this.trendView.render()
+ .$el.appendTo(this.$('#overview-duplications-trend'));
+ this.trendView.update();
+ }
+ },
+
+ onClose: function () {
+ if (this.trendView != null) {
+ this.trendView.detachEvents().remove();
}
}
});
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
define([
+ 'overview/trend-view',
'templates/overview'
-], function () {
+], function (TrendView) {
return Marionette.Layout.extend({
template: Templates['overview-issues'],
var trend = this.model.get('issuesTrend'),
hasIssues = this.model.get('issues') != null;
if (_.size(trend) > 1 && hasIssues) {
- this.$('#overview-issues-trend').sparkline(this.model.get('issuesTrend'));
+ this.trendView = new TrendView({ data: trend, type: 'SHORT_INT' });
+ this.trendView.render()
+ .$el.appendTo(this.$('#overview-issues-trend'));
+ this.trendView.update();
+ }
+ },
+
+ onClose: function () {
+ if (this.trendView != null) {
+ this.trendView.detachEvents().remove();
}
}
});
gateRegion: '#overview-gate',
sizeRegion: '#overview-size',
issuesRegion: '#overview-issues',
+ debtRegion: '#overview-debt',
coverageRegion: '#overview-coverage',
duplicationsRegion: '#overview-duplications'
},
toggleRegions: function () {
var conditions = this.model.get('gateConditions'),
hasGate = _.isArray(conditions) && conditions.length > 0;
- this.$(this.gateRegion.el).toggle(hasGate);
+ this.$(this.gateRegion.el).toggleClass('hidden', !hasGate);
}
});
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
define([
+ 'overview/trend-view',
'templates/overview'
-], function () {
+], function (TrendView) {
return Marionette.Layout.extend({
template: Templates['overview-size'],
var trend = this.model.get('sizeTrend'),
hasSize = this.model.get('ncloc') != null;
if (_.size(trend) > 1 && hasSize) {
- this.$('#overview-size-trend').sparkline(this.model.get('sizeTrend'));
+ this.trendView = new TrendView({ data: trend, type: 'SHORT_INT' });
+ this.trendView.render()
+ .$el.appendTo(this.$('#overview-size-trend'));
+ this.trendView.update();
+ }
+ },
+
+ onClose: function () {
+ if (this.trendView != null) {
+ this.trendView.detachEvents().remove();
}
}
});
SIZE_METRIC = 'ncloc',
ISSUES_METRIC = 'violations',
DEBT_METRIC = 'sqale_index',
+ NEW_DEBT_METRIC = 'new_technical_debt',
SQALE_RATING_METRIC = 'sqale_rating',
- COVERAGE_METRIC = 'overall_coverage',
- NEW_COVERAGE_METRIC = 'new_overall_coverage',
+ COVERAGE_METRIC = 'coverage',
+ NEW_COVERAGE_METRIC = 'new_coverage',
DUPLICATIONS_METRIC = 'duplicated_lines_density';
return Backbone.Model.extend({
GATE_METRIC,
SIZE_METRIC,
DEBT_METRIC,
+ NEW_DEBT_METRIC,
SQALE_RATING_METRIC,
COVERAGE_METRIC,
NEW_COVERAGE_METRIC,
parseDebt: function (msr) {
var debtMeasure = _.findWhere(msr, { key: DEBT_METRIC }),
+ newDebtMeasure = _.findWhere(msr, { key: NEW_DEBT_METRIC }),
sqaleRatingMeasure = _.findWhere(msr, { key: SQALE_RATING_METRIC });
if (debtMeasure != null) {
this.set({ debt: debtMeasure.val });
}
+ if (newDebtMeasure != null) {
+ this.set({ newDebt: newDebtMeasure.var3 });
+ }
if (sqaleRatingMeasure != null) {
this.set({ sqaleRating: sqaleRatingMeasure.val });
}
metrics: [
SIZE_METRIC,
ISSUES_METRIC,
+ DEBT_METRIC,
COVERAGE_METRIC,
DUPLICATIONS_METRIC
].join(',')
if (_.isArray(r)) {
that.parseSizeTrend(r[0]);
that.parseIssuesTrend(r[0]);
+ that.parseDebtTrend(r[0]);
that.parseCoverageTrend(r[0]);
that.parseDuplicationsTrend(r[0]);
}
this.parseTrend(r, 'issuesTrend', ISSUES_METRIC);
},
+ parseDebtTrend: function (r) {
+ this.parseTrend(r, 'debtTrend', DEBT_METRIC);
+ },
+
parseCoverageTrend: function (r) {
this.parseTrend(r, 'coverageTrend', COVERAGE_METRIC);
},
--- /dev/null
+define(function () {
+
+ function trans (left, top) {
+ return 'translate(' + left + ', ' + top + ')';
+ }
+
+ var $ = jQuery;
+
+
+ return Backbone.View.extend({
+
+ initialize: function (options) {
+ this.data = options.data;
+ this.type = options.type || 'INT';
+ this.width = 0;
+ this.height = 0;
+ },
+
+ attachEvents: function () {
+ this.detachEvents();
+ var event = 'resize.trend-' + this.cid,
+ update = _.throttle(_.bind(this.update, this), 50);
+ $(window).on(event, update);
+ },
+
+ detachEvents: function () {
+ var event = 'resize.trend-' + this.cid;
+ $(window).off(event);
+ return this;
+ },
+
+ render: function () {
+ var that = this,
+ data = this.data;
+ this.container = d3.select(this.el);
+ this.svg = this.container.append('svg')
+ .classed('sonar-d3', true);
+ this.plot = this.svg.append('g')
+ .classed('plot', true);
+
+ this.xScale = d3.time.scale()
+ .domain(d3.extent(data, function (d) {
+ return moment(d.val).toDate();
+ }))
+ .nice();
+ this.yScale = d3.scale.linear()
+ .domain(d3.extent(data, function (d) {
+ return d.count;
+ }))
+ .nice();
+
+ this.line = d3.svg.line()
+ .x(function (d) {
+ return that.xScale(moment(d.val).toDate());
+ })
+ .y(function (d) {
+ return that.yScale(d.count);
+ })
+ .interpolate('linear');
+
+ this.xScaleTicks = this.xScale.ticks(5);
+ this.yScaleTicks = this.yScale.ticks(3);
+
+ this.xTicks = this.xScaleTicks.map(function (tick) {
+ return that.plot.append('text')
+ .datum(tick)
+ .text(that.xScale.tickFormat()(tick))
+ .attr('dy', '0')
+ .style('text-anchor', 'middle')
+ .style('font-size', '10px')
+ .style('font-weight', '300')
+ .style('fill', '#aaa');
+ });
+ this.yTicks = this.yScaleTicks.map(function (tick) {
+ return that.plot.append('text')
+ .datum(tick)
+ .text(window.formatMeasure(tick, that.type))
+ .attr('dy', '5px')
+ .style('text-anchor', 'end')
+ .style('font-size', '10px')
+ .style('font-weight', '300')
+ .style('fill', '#aaa');
+ });
+
+ this.xTickLines = this.xScaleTicks.map(function (tick) {
+ return that.plot.append('line')
+ .datum(tick)
+ .style('stroke', '#eee')
+ .style('shape-rendering', 'crispedges');
+ });
+ this.yTickLines = this.yScaleTicks.map(function (tick) {
+ return that.plot.append('line')
+ .datum(tick)
+ .style('stroke', '#eee')
+ .style('shape-rendering', 'crispedges');
+ });
+
+ this.path = this.plot.append('path')
+ .datum(data)
+ .classed('line', true)
+ .style('stroke', 'rgb(31, 119, 180)');
+
+ this.attachEvents();
+
+ return this;
+ },
+
+ update: function () {
+ var that = this,
+ width = this.$el.closest('.overview-trend').width(),
+ height = 150,
+ marginLeft = 20,
+ marginRight = 50,
+ marginTop = 5,
+ marginBottom = 25,
+ availableWidth = width - marginLeft - marginRight,
+ availableHeight = height - marginTop - marginBottom;
+
+ this.svg
+ .attr('width', width)
+ .attr('height', height);
+
+ this.plot.attr('transform', trans(marginLeft, marginTop));
+ this.xScale.range([0, availableWidth]);
+ this.yScale.range([availableHeight, 0]);
+
+ this.path
+ .attr('d', this.line);
+
+ this.xTicks.forEach(function (tick) {
+ tick
+ .attr('x', that.xScale(tick.datum()))
+ .attr('y', availableHeight + 20);
+ });
+
+ this.yTicks.forEach(function (tick) {
+ tick
+ .attr('x', availableWidth + 50)
+ .attr('y', that.yScale(tick.datum()));
+ });
+
+ this.xTickLines.forEach(function (tick) {
+ tick
+ .attr('x1', that.xScale(tick.datum()))
+ .attr('x2', that.xScale(tick.datum()))
+ .attr('y1', 0)
+ .attr('y2', availableHeight);
+ });
+
+ this.yTickLines.forEach(function (tick) {
+ tick
+ .attr('x1', 0)
+ .attr('x2', availableWidth)
+ .attr('y1', that.yScale(tick.datum()))
+ .attr('y2', that.yScale(tick.datum()));
+ });
+
+ return this;
+ }
+
+ });
+
+});
.column-third {
float: left;
- width: 33%;
+ width: 33.3333333333%;
+ padding: 0 10px;
+ .box-sizing(border-box);
+}
+
+.column-two-thirds {
+ float: left;
+ width: 66.6666666667%;
padding: 0 10px;
.box-sizing(border-box);
}
}
.overview-card {
- padding-top: 5px;
- background: @white;
+ .clearfix;
+ padding: 20px;
border: 1px solid @barBorderColor;
+ background: @white;
}
-.overview-gate {
- padding: 10px;
+.overview-card:not(.hidden) + .overview-card {
+ margin-top: 20px;
}
.overview-gate-ok { border: 2px solid @green; }
.overview-gate-error { border: 2px solid @red; }
+.overview-gate-condition {
+ padding-left: 1px;
+}
+
.overview-container {
margin-top: 20px;
- text-align: center;
}
.overview-card-header {
- padding-bottom: 5px;
+ margin-bottom: 20px;
+ padding-bottom: 20px;
border-bottom: 1px solid @barBorderColor;
}
margin: 0;
padding: 0 6px;
color: #fff !important;
- font-size: 24px;
font-weight: 300;
a& {
.overview-status-ERROR { background-color: @red; }
.overview-highlight {
- height: 145px;
-}
-
-.overview-main-measure {
- line-height: 1.3;
- font-size: 36px;
- font-weight: 300;
+ float: left;
+ width: 160px;
+ padding-right: 20px;
+ .box-sizing(border-box);
}
.overview-trend {
- height: 50px;
- margin-top: 15px;
- padding: 5px 10px;
- border-top: 1px solid @barBorderColor;
- background-color: #fdfdfd;
+ padding-left: 160px;
.note { font-size: 10px; }
}
-.overview-sparkline {
- display: inline-block;
- vertical-align: middle;
+.overview-main-measure {
+ line-height: 1.3;
+ margin-bottom: 20px;
+ font-size: 36px;
+ font-weight: 300;
+
+ .rating { font-size: 30px; }
}
.overview-measure {
- font-size: 16px;
+ line-height: 1.5;
+ font-size: 20px;
font-weight: 300;
}
lib.configureCasper();
-casper.test.begin(testName(), 23, function (test) {
+casper.test.begin(testName(), 22, function (test) {
casper
.start(lib.buildUrl('overview'), function () {
lib.setDefaultViewport();
})
.then(function () {
- casper.waitForText('165,077');
+ casper.waitForText('165k');
})
.then(function () {
test.assertElementCount('#overview-gate .overview-status-WARN', 1);
test.assertElementCount('#overview-gate .overview-status-OK', 5);
- test.assertSelectorContains('#overview-size', '165,077');
- test.assertSelectorContains('#overview-size', '+3,916');
+ test.assertSelectorContains('#overview-size', '165k');
+ test.assertSelectorContains('#overview-size', '+3.9k');
test.assertExists('#overview-size-trend path');
- test.assertSelectorContains('#overview-issues', '1,605');
- test.assertSelectorContains('#overview-issues', 'A');
- test.assertSelectorContains('#overview-issues', '66');
+ test.assertSelectorContains('#overview-issues', '1.6k');
test.assertExists('#overview-issues-trend path');
+ test.assertSelectorContains('#overview-debt', '66');
+ test.assertExists('#overview-debt-trend path');
+
test.assertSelectorContains('#overview-coverage', '83.9%');
- test.assertSelectorContains('#overview-coverage', '+0.6%');
test.assertSelectorContains('#overview-coverage', '90.0%');
test.assertExists('#overview-coverage-trend path');
"fvar3": "0"
},
{
- "key": "overall_coverage",
+ "key": "coverage",
"val": 83.9,
"frmt_val": "83.9%",
"trend": 0,
"fvar3": "0.6%"
},
{
- "key": "new_overall_coverage",
+ "key": "new_coverage",
"var1": 88.2352941176471,
"fvar1": "88.2%",
"var2": 87.9254132585941,
"metric": "sqale_index"
},
{
- "metric": "overall_coverage"
+ "metric": "coverage"
},
{
"metric": "duplicated_lines_density"
componentKey: 'org.codehaus.sonar:sonar',
componentUuid: '69e57151-be0d-4157-adff-c06741d88879'
};
- require(['overview/app']);
metric.lines.name=Lines
metric.lines.description=Lines
-metric.ncloc.name=Lines of code
+metric.ncloc.name=Lines of Code
metric.ncloc.description=Non Commenting Lines of Code
metric.ncloc.abbreviation=LOC
metric.duplicated_files.abbreviation=Dup. files
metric.duplicated_lines_density.name=Duplicated lines (%)
+metric.duplicated_lines_density.short_name=Duplications
metric.duplicated_lines_density.description=Duplicated lines balanced by statements
metric.duplicated_lines_density.abbreviation=Dup. lines(%)
# OVERVIEW
#
#------------------------------------------------------------------------------
-overview.lines_of_code=Lines of Code
+overview.size=Size
+overview.gate=Quality Gate
overview.issues=Issues
-overview.debt=Debt
-overview.coverage=Coverage
+overview.debt=Technical Debt
+overview.testing=Testing
overview.duplications=Duplications
+overview.new=new
+overview.on_new_code=on new code
projects / sonarqube.git / commitdiff