diff options
Diffstat (limited to 'server/sonar-web/src/main/js/components/charts')
7 files changed, 91 insertions, 34 deletions
diff --git a/server/sonar-web/src/main/js/components/charts/bar-chart.js b/server/sonar-web/src/main/js/components/charts/bar-chart.js index 761ae960c65..6b95a6ec42c 100644 --- a/server/sonar-web/src/main/js/components/charts/bar-chart.js +++ b/server/sonar-web/src/main/js/components/charts/bar-chart.js @@ -5,8 +5,6 @@ import { ResizeMixin } from './../mixins/resize-mixin'; import { TooltipsMixin } from './../mixins/tooltips-mixin'; export const BarChart = React.createClass({ - mixins: [ResizeMixin, TooltipsMixin], - propTypes: { data: React.PropTypes.arrayOf(React.PropTypes.object).isRequired, xTicks: React.PropTypes.arrayOf(React.PropTypes.any), @@ -16,6 +14,8 @@ export const BarChart = React.createClass({ barsWidth: React.PropTypes.number }, + mixins: [ResizeMixin, TooltipsMixin], + getDefaultProps() { return { xTicks: [], @@ -43,7 +43,12 @@ export const BarChart = React.createClass({ tooltipAtts['title'] = d.tooltip; tooltipAtts['data-toggle'] = 'tooltip'; } - return <text key={index} className="bar-chart-tick" x={x} y={y} dy="1.5em" {...tooltipAtts}>{tick}</text>; + return <text key={index} + className="bar-chart-tick" + x={x} + y={y} + dy="1.5em" + {...tooltipAtts}>{tick}</text>; }); return <g>{ticks}</g>; }, @@ -62,7 +67,12 @@ export const BarChart = React.createClass({ tooltipAtts['title'] = d.tooltip; tooltipAtts['data-toggle'] = 'tooltip'; } - return <text key={index} className="bar-chart-tick" x={x} y={y} dy="-1em" {...tooltipAtts}>{value}</text>; + return <text key={index} + className="bar-chart-tick" + x={x} + y={y} + dy="-1em" + {...tooltipAtts}>{value}</text>; }); return <g>{ticks}</g>; }, @@ -78,8 +88,13 @@ export const BarChart = React.createClass({ tooltipAtts['title'] = d.tooltip; tooltipAtts['data-toggle'] = 'tooltip'; } - return <rect key={index} className="bar-chart-bar" {...tooltipAtts} - x={x} y={y} width={this.props.barsWidth} height={height}/>; + return <rect key={index} + className="bar-chart-bar" + {...tooltipAtts} + x={x} + y={y} + width={this.props.barsWidth} + height={height}/>; }); return <g>{bars}</g>; }, diff --git a/server/sonar-web/src/main/js/components/charts/bubble-chart.js b/server/sonar-web/src/main/js/components/charts/bubble-chart.js index ab1d1833358..270bec31d12 100644 --- a/server/sonar-web/src/main/js/components/charts/bubble-chart.js +++ b/server/sonar-web/src/main/js/components/charts/bubble-chart.js @@ -37,8 +37,6 @@ export const Bubble = React.createClass({ export const BubbleChart = React.createClass({ - mixins: [ResizeMixin, TooltipsMixin], - propTypes: { items: React.PropTypes.arrayOf(React.PropTypes.object).isRequired, sizeRange: React.PropTypes.arrayOf(React.PropTypes.number), @@ -52,6 +50,8 @@ export const BubbleChart = React.createClass({ formatYTick: React.PropTypes.func }, + mixins: [ResizeMixin, TooltipsMixin], + getDefaultProps() { return { sizeRange: [5, 45], @@ -94,7 +94,12 @@ export const BubbleChart = React.createClass({ let x = xScale(tick); let y1 = yScale.range()[0]; let y2 = yScale.range()[1]; - return <line key={index} x1={x} x2={x} y1={y1} y2={y2} className="bubble-chart-grid"/>; + return <line key={index} + x1={x} + x2={x} + y1={y1} + y2={y2} + className="bubble-chart-grid"/>; }); return <g ref="xGrid">{lines}</g>; @@ -109,7 +114,12 @@ export const BubbleChart = React.createClass({ let y = yScale(tick); let x1 = xScale.range()[0]; let x2 = xScale.range()[1]; - return <line key={index} x1={x1} x2={x2} y1={y} y2={y} className="bubble-chart-grid"/>; + return <line key={index} + x1={x1} + x2={x2} + y1={y} + y2={y} + className="bubble-chart-grid"/>; }); return <g ref="yGrid">{lines}</g>; @@ -123,8 +133,12 @@ export const BubbleChart = React.createClass({ let ticks = xScale.ticks().map((tick, index) => { let x = xScale(tick); let y = yScale.range()[0]; - let text = this.props.formatXTick(tick); - return <text key={index} className="bubble-chart-tick" x={x} y={y} dy="1.5em">{text}</text>; + let innerText = this.props.formatXTick(tick); + return <text key={index} + className="bubble-chart-tick" + x={x} + y={y} + dy="1.5em">{innerText}</text>; }); return <g>{ticks}</g>; @@ -138,9 +152,13 @@ export const BubbleChart = React.createClass({ let ticks = yScale.ticks(5).map((tick, index) => { let x = xScale.range()[0]; let y = yScale(tick); - let text = this.props.formatYTick(tick); - return <text key={index} className="bubble-chart-tick bubble-chart-tick-y" - x={x} y={y} dx="-0.5em" dy="0.3em">{text}</text>; + let innerText = this.props.formatYTick(tick); + return <text key={index} + className="bubble-chart-tick bubble-chart-tick-y" + x={x} + y={y} + dx="-0.5em" + dy="0.3em">{innerText}</text>; }); return <g>{ticks}</g>; diff --git a/server/sonar-web/src/main/js/components/charts/donut-chart.js b/server/sonar-web/src/main/js/components/charts/donut-chart.js index b54597dd208..de07bd6f169 100644 --- a/server/sonar-web/src/main/js/components/charts/donut-chart.js +++ b/server/sonar-web/src/main/js/components/charts/donut-chart.js @@ -16,12 +16,12 @@ const Sector = React.createClass({ export const DonutChart = React.createClass({ - mixins: [ResizeMixin, TooltipsMixin], - propTypes: { data: React.PropTypes.arrayOf(React.PropTypes.object).isRequired }, + mixins: [ResizeMixin, TooltipsMixin], + getDefaultProps() { return { thickness: 6, padding: [0, 0, 0, 0] }; }, @@ -45,7 +45,11 @@ export const DonutChart = React.createClass({ .sort(null) .value(d => d.value); let sectors = pie(this.props.data).map((d, i) => { - return <Sector key={i} data={d} radius={radius} fill={this.props.data[i].fill} thickness={this.props.thickness}/>; + return <Sector key={i} + data={d} + radius={radius} + fill={this.props.data[i].fill} + thickness={this.props.thickness}/>; }); return <svg className="donut-chart" width={this.state.width} height={this.state.height}> diff --git a/server/sonar-web/src/main/js/components/charts/histogram.js b/server/sonar-web/src/main/js/components/charts/histogram.js index 0843e76126a..ffac187583c 100644 --- a/server/sonar-web/src/main/js/components/charts/histogram.js +++ b/server/sonar-web/src/main/js/components/charts/histogram.js @@ -5,8 +5,6 @@ import { ResizeMixin } from './../mixins/resize-mixin'; import { TooltipsMixin } from './../mixins/tooltips-mixin'; export const Histogram = React.createClass({ - mixins: [ResizeMixin, TooltipsMixin], - propTypes: { data: React.PropTypes.arrayOf(React.PropTypes.object).isRequired, yTicks: React.PropTypes.arrayOf(React.PropTypes.any), @@ -18,6 +16,8 @@ export const Histogram = React.createClass({ onBarClick: React.PropTypes.func }, + mixins: [ResizeMixin, TooltipsMixin], + getDefaultProps() { return { xTicks: [], diff --git a/server/sonar-web/src/main/js/components/charts/line-chart.js b/server/sonar-web/src/main/js/components/charts/line-chart.js index 375931ea9f5..e4f66c7c9c8 100644 --- a/server/sonar-web/src/main/js/components/charts/line-chart.js +++ b/server/sonar-web/src/main/js/components/charts/line-chart.js @@ -6,8 +6,6 @@ import { TooltipsMixin } from './../mixins/tooltips-mixin'; export const LineChart = React.createClass({ - mixins: [ResizeMixin, TooltipsMixin], - propTypes: { data: React.PropTypes.arrayOf(React.PropTypes.object).isRequired, xTicks: React.PropTypes.arrayOf(React.PropTypes.any), @@ -21,6 +19,8 @@ export const LineChart = React.createClass({ interpolate: React.PropTypes.string }, + mixins: [ResizeMixin, TooltipsMixin], + getDefaultProps() { return { displayBackdrop: true, @@ -63,7 +63,11 @@ export const LineChart = React.createClass({ let points = this.props.data.map((point, index) => { let x = xScale(point.x); let y = yScale(point.y); - return <circle key={index} className="line-chart-point" r="3" cx={x} cy={y}/>; + return <circle key={index} + className="line-chart-point" + r="3" + cx={x} + cy={y}/>; }); return <g>{points}</g>; }, @@ -76,7 +80,12 @@ export const LineChart = React.createClass({ let x = xScale(point.x); let y1 = yScale.range()[0]; let y2 = yScale(point.y); - return <line key={index} className="line-chart-grid" x1={x} x2={x} y1={y1} y2={y2}/>; + return <line key={index} + className="line-chart-grid" + x1={x} + x2={x} + y1={y1} + y2={y2}/>; }); return <g>{lines}</g>; }, @@ -89,7 +98,11 @@ export const LineChart = React.createClass({ let point = this.props.data[index]; let x = xScale(point.x); let y = yScale.range()[0]; - return <text key={index} className="line-chart-tick" x={x} y={y} dy="1.5em">{tick}</text>; + return <text key={index} + className="line-chart-tick" + x={x} + y={y} + dy="1.5em">{tick}</text>; }); return <g>{ticks}</g>; }, @@ -102,18 +115,22 @@ export const LineChart = React.createClass({ let point = this.props.data[index]; let x = xScale(point.x); let y = yScale(point.y); - return <text key={index} className="line-chart-tick" x={x} y={y} dy="-1em">{value}</text>; + return <text key={index} + className="line-chart-tick" + x={x} + y={y} + dy="-1em">{value}</text>; }); return <g>{ticks}</g>; }, renderLine (xScale, yScale) { - let path = d3.svg.line() + let p = d3.svg.line() .x(d => xScale(d.x)) .y(d => yScale(d.y)) .interpolate(this.props.interpolate); - return <path className="line-chart-path" d={path(this.props.data)}/>; + return <path className="line-chart-path" d={p(this.props.data)}/>; }, render () { diff --git a/server/sonar-web/src/main/js/components/charts/treemap.js b/server/sonar-web/src/main/js/components/charts/treemap.js index f06eda570d0..ad851948113 100644 --- a/server/sonar-web/src/main/js/components/charts/treemap.js +++ b/server/sonar-web/src/main/js/components/charts/treemap.js @@ -48,7 +48,7 @@ export const TreemapRect = React.createClass({ return <a onClick={e => e.stopPropagation()} className="treemap-link" href={this.props.link} - style={{ fontSize: 12 }}><i className="icon-link"/></a>; + style={{ fontSize: 12 }}><span className="icon-link"/></a>; }, render () { @@ -70,7 +70,10 @@ export const TreemapRect = React.createClass({ cursor: typeof this.props.onClick === 'function' ? 'pointer' : 'default' }; let isTextVisible = this.props.width >= 40 && this.props.height >= 40; - return <div className="treemap-cell" {...tooltipAttrs} style={cellStyles} onClick={this.props.onClick}> + return <div className="treemap-cell" + {...tooltipAttrs} + style={cellStyles} + onClick={this.props.onClick}> <div className="treemap-inner" dangerouslySetInnerHTML={{ __html: this.props.label }} style={{ maxWidth: this.props.width, visibility: isTextVisible ? 'visible': 'hidden' }}/> {this.renderLink()} @@ -80,14 +83,14 @@ export const TreemapRect = React.createClass({ export const Treemap = React.createClass({ - mixins: [ResizeMixin, TooltipsMixin], - propTypes: { items: React.PropTypes.arrayOf(React.PropTypes.object).isRequired, height: React.PropTypes.number, onRectangleClick: React.PropTypes.func }, + mixins: [ResizeMixin, TooltipsMixin], + getInitialState() { return { width: this.props.width, height: this.props.height }; }, diff --git a/server/sonar-web/src/main/js/components/charts/word-cloud.js b/server/sonar-web/src/main/js/components/charts/word-cloud.js index 1edbc2274ec..3744d3fa6de 100644 --- a/server/sonar-web/src/main/js/components/charts/word-cloud.js +++ b/server/sonar-web/src/main/js/components/charts/word-cloud.js @@ -26,13 +26,13 @@ export const Word = React.createClass({ export const WordCloud = React.createClass({ - mixins: [TooltipsMixin], - propTypes: { items: React.PropTypes.arrayOf(React.PropTypes.object).isRequired, sizeRange: React.PropTypes.arrayOf(React.PropTypes.number) }, + mixins: [TooltipsMixin], + getDefaultProps() { return { sizeRange: [10, 24] |