diff options
Diffstat (limited to 'server/sonar-web/src/main/js/components/charts')
9 files changed, 116 insertions, 91 deletions
diff --git a/server/sonar-web/src/main/js/components/charts/LanguageDistribution.js b/server/sonar-web/src/main/js/components/charts/LanguageDistribution.js index d6fb2024693..696ad6c6e24 100644 --- a/server/sonar-web/src/main/js/components/charts/LanguageDistribution.js +++ b/server/sonar-web/src/main/js/components/charts/LanguageDistribution.js @@ -18,6 +18,7 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import { find, sortBy } from 'lodash'; +import PropTypes from 'prop-types'; import React from 'react'; import { Histogram } from './histogram'; import { formatMeasure } from '../../helpers/measures'; @@ -26,7 +27,7 @@ import { translate } from '../../helpers/l10n'; export default class LanguageDistribution extends React.PureComponent { static propTypes = { - distribution: React.PropTypes.string.isRequired + distribution: PropTypes.string.isRequired }; state = {}; diff --git a/server/sonar-web/src/main/js/components/charts/Timeline.js b/server/sonar-web/src/main/js/components/charts/Timeline.js index f8c5568df02..0896127d099 100644 --- a/server/sonar-web/src/main/js/components/charts/Timeline.js +++ b/server/sonar-web/src/main/js/components/charts/Timeline.js @@ -19,19 +19,23 @@ */ import $ from 'jquery'; import moment from 'moment'; +import PropTypes from 'prop-types'; import React from 'react'; +import createReactClass from 'create-react-class'; import { extent, max } from 'd3-array'; import { scaleLinear, scalePoint, scaleTime } from 'd3-scale'; import { line as d3Line, curveBasis } from 'd3-shape'; import { ResizeMixin } from '../mixins/resize-mixin'; import { TooltipsMixin } from '../mixins/tooltips-mixin'; -const Timeline = React.createClass({ +const Timeline = createReactClass({ + displayName: 'Timeline', + propTypes: { - data: React.PropTypes.arrayOf(React.PropTypes.object).isRequired, - padding: React.PropTypes.arrayOf(React.PropTypes.number), - height: React.PropTypes.number, - basisCurve: React.PropTypes.bool + data: PropTypes.arrayOf(PropTypes.object).isRequired, + padding: PropTypes.arrayOf(PropTypes.number), + height: PropTypes.number, + basisCurve: PropTypes.bool }, mixins: [ResizeMixin, TooltipsMixin], @@ -205,6 +209,7 @@ const Timeline = React.createClass({ </g> ); }, + render() { if (!this.state.width || !this.state.height) { return <div />; 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 1d89adb5475..37e847d580d 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 @@ -18,20 +18,24 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import React from 'react'; +import createReactClass from 'create-react-class'; +import PropTypes from 'prop-types'; import { max } from 'd3-array'; import { scaleLinear, scaleBand } from 'd3-scale'; import { ResizeMixin } from './../mixins/resize-mixin'; import { TooltipsContainer } from './../mixins/tooltips-mixin'; -export const BarChart = React.createClass({ +export const BarChart = createReactClass({ + displayName: 'BarChart', + propTypes: { - data: React.PropTypes.arrayOf(React.PropTypes.object).isRequired, - xTicks: React.PropTypes.arrayOf(React.PropTypes.any), - xValues: React.PropTypes.arrayOf(React.PropTypes.any), - height: React.PropTypes.number, - padding: React.PropTypes.arrayOf(React.PropTypes.number), - barsWidth: React.PropTypes.number.isRequired, - onBarClick: React.PropTypes.func + data: PropTypes.arrayOf(PropTypes.object).isRequired, + xTicks: PropTypes.arrayOf(PropTypes.any), + xValues: PropTypes.arrayOf(PropTypes.any), + height: PropTypes.number, + padding: PropTypes.arrayOf(PropTypes.number), + barsWidth: PropTypes.number.isRequired, + onBarClick: PropTypes.func }, mixins: [ResizeMixin], 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 a55a243a72f..9acec66a199 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 @@ -18,22 +18,22 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import React from 'react'; +import createReactClass from 'create-react-class'; +import PropTypes from 'prop-types'; import { arc as d3Arc, pie as d3Pie } from 'd3-shape'; import { ResizeMixin } from './../mixins/resize-mixin'; import { TooltipsMixin } from './../mixins/tooltips-mixin'; -const Sector = React.createClass({ - render() { - const arc = d3Arc() - .outerRadius(this.props.radius) - .innerRadius(this.props.radius - this.props.thickness); - return <path d={arc(this.props.data)} style={{ fill: this.props.fill }} />; - } -}); +function Sector(props) { + const arc = d3Arc().outerRadius(props.radius).innerRadius(props.radius - props.thickness); + return <path d={arc(props.data)} style={{ fill: props.fill }} />; +} + +export const DonutChart = createReactClass({ + displayName: 'DonutChart', -export const DonutChart = React.createClass({ propTypes: { - data: React.PropTypes.arrayOf(React.PropTypes.object).isRequired + data: PropTypes.arrayOf(PropTypes.object).isRequired }, mixins: [ResizeMixin, TooltipsMixin], 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 c7542b3a0de..b6fdeb7b6c5 100644 --- a/server/sonar-web/src/main/js/components/charts/histogram.js +++ b/server/sonar-web/src/main/js/components/charts/histogram.js @@ -18,21 +18,25 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import React from 'react'; +import createReactClass from 'create-react-class'; +import PropTypes from 'prop-types'; import { max } from 'd3-array'; import { scaleLinear, scaleBand } from 'd3-scale'; import { ResizeMixin } from './../mixins/resize-mixin'; import { TooltipsMixin } from './../mixins/tooltips-mixin'; -export const Histogram = React.createClass({ +export const Histogram = createReactClass({ + displayName: 'Histogram', + propTypes: { - data: React.PropTypes.arrayOf(React.PropTypes.object).isRequired, - yTicks: React.PropTypes.arrayOf(React.PropTypes.any), - yValues: React.PropTypes.arrayOf(React.PropTypes.any), - width: React.PropTypes.number, - height: React.PropTypes.number, - padding: React.PropTypes.arrayOf(React.PropTypes.number), - barsHeight: React.PropTypes.number, - onBarClick: React.PropTypes.func + data: PropTypes.arrayOf(PropTypes.object).isRequired, + yTicks: PropTypes.arrayOf(PropTypes.any), + yValues: PropTypes.arrayOf(PropTypes.any), + width: PropTypes.number, + height: PropTypes.number, + padding: PropTypes.arrayOf(PropTypes.number), + barsHeight: PropTypes.number, + onBarClick: PropTypes.func }, mixins: [ResizeMixin, TooltipsMixin], 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 1b574db1216..ea56aa7e6ca 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 @@ -18,23 +18,27 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import React from 'react'; +import createReactClass from 'create-react-class'; +import PropTypes from 'prop-types'; import { extent, max } from 'd3-array'; import { scaleLinear } from 'd3-scale'; import { area as d3Area, line as d3Line, curveBasis } from 'd3-shape'; import { ResizeMixin } from './../mixins/resize-mixin'; import { TooltipsMixin } from './../mixins/tooltips-mixin'; -export const LineChart = React.createClass({ +export const LineChart = createReactClass({ + displayName: 'LineChart', + propTypes: { - data: React.PropTypes.arrayOf(React.PropTypes.object).isRequired, - xTicks: React.PropTypes.arrayOf(React.PropTypes.any), - xValues: React.PropTypes.arrayOf(React.PropTypes.any), - padding: React.PropTypes.arrayOf(React.PropTypes.number), - backdropConstraints: React.PropTypes.arrayOf(React.PropTypes.number), - displayBackdrop: React.PropTypes.bool, - displayPoints: React.PropTypes.bool, - displayVerticalGrid: React.PropTypes.bool, - height: React.PropTypes.number + data: PropTypes.arrayOf(PropTypes.object).isRequired, + xTicks: PropTypes.arrayOf(PropTypes.any), + xValues: PropTypes.arrayOf(PropTypes.any), + padding: PropTypes.arrayOf(PropTypes.number), + backdropConstraints: PropTypes.arrayOf(PropTypes.number), + displayBackdrop: PropTypes.bool, + displayPoints: PropTypes.bool, + displayVerticalGrid: PropTypes.bool, + height: PropTypes.number }, mixins: [ResizeMixin, TooltipsMixin], diff --git a/server/sonar-web/src/main/js/components/charts/treemap-breadcrumbs.js b/server/sonar-web/src/main/js/components/charts/treemap-breadcrumbs.js index 3e23cb080ac..8ed3536a9d6 100644 --- a/server/sonar-web/src/main/js/components/charts/treemap-breadcrumbs.js +++ b/server/sonar-web/src/main/js/components/charts/treemap-breadcrumbs.js @@ -18,15 +18,16 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import React from 'react'; +import PropTypes from 'prop-types'; import QualifierIcon from '../shared/QualifierIcon'; export class TreemapBreadcrumbs extends React.PureComponent { static propTypes = { - breadcrumbs: React.PropTypes.arrayOf( - React.PropTypes.shape({ - key: React.PropTypes.string.isRequired, - name: React.PropTypes.string.isRequired, - qualifier: React.PropTypes.string.isRequired + breadcrumbs: PropTypes.arrayOf( + PropTypes.shape({ + key: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + qualifier: PropTypes.string.isRequired }).isRequired ).isRequired }; 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 77316c7c78f..7b6c73af59e 100644 --- a/server/sonar-web/src/main/js/components/charts/treemap.js +++ b/server/sonar-web/src/main/js/components/charts/treemap.js @@ -18,6 +18,8 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import React from 'react'; +import createReactClass from 'create-react-class'; +import PropTypes from 'prop-types'; import { scaleLinear } from 'd3-scale'; import { treemap as d3Treemap, hierarchy as d3Hierarchy } from 'd3-hierarchy'; import { TreemapBreadcrumbs } from './treemap-breadcrumbs'; @@ -42,18 +44,18 @@ function mostCommitPrefix(strings) { return prefix.substr(0, prefix.length - lastPrefixPart.length); } -export const TreemapRect = React.createClass({ - propTypes: { - x: React.PropTypes.number.isRequired, - y: React.PropTypes.number.isRequired, - width: React.PropTypes.number.isRequired, - height: React.PropTypes.number.isRequired, - fill: React.PropTypes.string.isRequired, - label: React.PropTypes.string.isRequired, - onClick: React.PropTypes.func - }, - - renderLink() { +export class TreemapRect extends React.PureComponent { + static propTypes = { + x: PropTypes.number.isRequired, + y: PropTypes.number.isRequired, + width: PropTypes.number.isRequired, + height: PropTypes.number.isRequired, + fill: PropTypes.string.isRequired, + label: PropTypes.string.isRequired, + onClick: PropTypes.func + }; + + renderLink = () => { if (!this.props.link) { return null; } @@ -71,7 +73,7 @@ export const TreemapRect = React.createClass({ <span className="icon-link" /> </a> ); - }, + }; render() { let tooltipAttrs = {}; @@ -108,13 +110,15 @@ export const TreemapRect = React.createClass({ </div> ); } -}); +} + +export const Treemap = createReactClass({ + displayName: 'Treemap', -export const Treemap = React.createClass({ propTypes: { - items: React.PropTypes.arrayOf(React.PropTypes.object).isRequired, - height: React.PropTypes.number, - onRectangleClick: React.PropTypes.func + items: PropTypes.arrayOf(PropTypes.object).isRequired, + height: PropTypes.number, + onRectangleClick: PropTypes.func }, mixins: [ResizeMixin, TooltipsMixin], 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 021b5bcba59..c7547ebdf87 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 @@ -18,39 +18,41 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import React from 'react'; +import createReactClass from 'create-react-class'; +import PropTypes from 'prop-types'; import { max } from 'd3-array'; import { scaleLinear } from 'd3-scale'; import { sortBy } from 'lodash'; import { TooltipsMixin } from './../mixins/tooltips-mixin'; -export const Word = React.createClass({ - propTypes: { - size: React.PropTypes.number.isRequired, - text: React.PropTypes.string.isRequired, - tooltip: React.PropTypes.string, - link: React.PropTypes.string.isRequired - }, - - render() { - let tooltipAttrs = {}; - if (this.props.tooltip) { - tooltipAttrs = { - 'data-toggle': 'tooltip', - title: this.props.tooltip - }; - } - return ( - <a {...tooltipAttrs} style={{ fontSize: this.props.size }} href={this.props.link}> - {this.props.text} - </a> - ); +export function Word(props) { + let tooltipAttrs = {}; + if (props.tooltip) { + tooltipAttrs = { + 'data-toggle': 'tooltip', + title: props.tooltip + }; } -}); + return ( + <a {...tooltipAttrs} style={{ fontSize: props.size }} href={props.link}> + {props.text} + </a> + ); +} + +Word.propTypes = { + size: PropTypes.number.isRequired, + text: PropTypes.string.isRequired, + tooltip: PropTypes.string, + link: PropTypes.string.isRequired +}; + +export const WordCloud = createReactClass({ + displayName: 'WordCloud', -export const WordCloud = React.createClass({ propTypes: { - items: React.PropTypes.arrayOf(React.PropTypes.object).isRequired, - sizeRange: React.PropTypes.arrayOf(React.PropTypes.number) + items: PropTypes.arrayOf(PropTypes.object).isRequired, + sizeRange: PropTypes.arrayOf(PropTypes.number) }, mixins: [TooltipsMixin], |