diff options
3 files changed, 110 insertions, 2 deletions
diff --git a/server/sonar-web/src/main/js/apps/overview/components/ncloc-distribution.js b/server/sonar-web/src/main/js/apps/overview/components/ncloc-distribution.js new file mode 100644 index 00000000000..ad03795df80 --- /dev/null +++ b/server/sonar-web/src/main/js/apps/overview/components/ncloc-distribution.js @@ -0,0 +1,84 @@ +import _ from 'underscore'; +import React from 'react'; + +import { Histogram } from '../../../components/charts/histogram'; +import { formatMeasure } from '../../../helpers/measures'; +import { collapsePath } from '../../../helpers/path'; +import { getChildren } from '../../../api/components'; + + +const HEIGHT = 302; +const METRIC = 'ncloc'; + + +export const NclocDistribution = React.createClass({ + propTypes: { + component: React.PropTypes.object.isRequired + }, + + getInitialState() { + return { loading: true, files: [] }; + }, + + componentDidMount () { + this.requestComponents(); + }, + + requestComponents () { + let metrics = [METRIC]; + return getChildren(this.props.component.key, metrics).then(r => { + let components = r.map(component => { + let measures = {}; + (component.msr || []).forEach(measure => { + measures[measure.key] = measure.val; + }); + return _.extend(component, { measures }); + }); + this.setState({ loading: false, components }); + }); + }, + + renderLoading () { + return <div className="overview-chart-placeholder" style={{ height: HEIGHT }}> + <i className="spinner"/> + </div>; + }, + + renderBarChart () { + if (this.state.loading) { + return this.renderLoading(); + } + + let data = this.state.components.map((component, index) => { + return { + x: parseInt(component.measures[METRIC], 10), + y: index, + value: component.name + }; + }); + + data = _.sortBy(data, d => -d.x); + + let yTicks = data.map(d => collapsePath(d.value, 20)); + + let yValues = data.map(d => formatMeasure(d.x, 'SHORT_INT')); + + return <Histogram data={data} + yTicks={yTicks} + yValues={yValues} + height={data.length * 25} + barsWidth={10} + padding={[0, 50, 0, 240]}/>; + }, + + render () { + return <div className="overview-domain-chart"> + <div className="overview-card-header"> + <h2 className="overview-title">{window.t('overview.chart.components')}</h2> + </div> + <div className="overview-bar-chart"> + {this.renderBarChart()} + </div> + </div>; + } +}); diff --git a/server/sonar-web/src/main/js/apps/overview/domains/size-domain.js b/server/sonar-web/src/main/js/apps/overview/domains/size-domain.js index a5e0f2e7fab..dcdab0821fd 100644 --- a/server/sonar-web/src/main/js/apps/overview/domains/size-domain.js +++ b/server/sonar-web/src/main/js/apps/overview/domains/size-domain.js @@ -2,10 +2,10 @@ import React from 'react'; import { LanguageDistribution } from './../components/language-distribution'; import { ComplexityDistribution } from './../components/complexity-distribution'; +import { NclocDistribution } from '../components/ncloc-distribution'; import { getMeasuresAndVariations } from '../../../api/measures'; import { DetailedMeasure } from '../components/detailed-measure'; import { DomainTimeline } from '../components/domain-timeline'; -import { DomainTreemap } from '../components/domain-treemap'; import { getPeriodLabel, getPeriodDate } from './../helpers/periods'; import { TooltipsMixin } from '../../../components/mixins/tooltips-mixin'; import { filterMetrics, filterMetricsForDomains } from '../helpers/metrics'; @@ -146,7 +146,7 @@ export const SizeMain = React.createClass({ allMetrics={this.getAllMetricsForTimeline()}/> </div> <div className="overview-card"> - <DomainTreemap {...this.props} sizeMetric="ncloc"/> + <NclocDistribution {...this.props}/> </div> </div> </div>; diff --git a/server/sonar-web/src/main/js/helpers/path.js b/server/sonar-web/src/main/js/helpers/path.js new file mode 100644 index 00000000000..ea389d48cb8 --- /dev/null +++ b/server/sonar-web/src/main/js/helpers/path.js @@ -0,0 +1,24 @@ +export function collapsePath (path, limit = 30) { + if (typeof path !== 'string') { + return ''; + } + + var tokens = path.split('/'); + + if (tokens.length <= 2) { + return path; + } + + var head = _.first(tokens), + tail = _.last(tokens), + middle = _.initial(_.rest(tokens)), + cut = false; + + while (middle.join().length > limit && middle.length > 0) { + middle.shift(); + cut = true; + } + + var body = [].concat(head, cut ? ['...'] : [], middle, tail); + return body.join('/'); +} |