import {
getDisplayedHistoryMetrics,
generateSeries,
- getSeriesMetricType
+ getSeriesMetricType,
+ splitSeriesInGraphs
} from '../../projectActivity/utils';
import { getCustomGraph, getGraph } from '../../../helpers/storage';
import AdvancedTimeline from '../../../components/charts/AdvancedTimeline';
};
const GRAPH_PADDING = [4, 0, 4, 0];
+const MAX_GRAPH_NB = 1;
+const MAX_SERIES_PER_GRAPH = 3;
export default class PreviewGraph extends React.PureComponent {
props: Props;
super(props);
const graph = getGraph();
const customMetrics = getCustomGraph();
+ const series = splitSeriesInGraphs(
+ this.getSeries(props.history, graph, customMetrics, props.metrics),
+ MAX_GRAPH_NB,
+ MAX_SERIES_PER_GRAPH
+ );
this.state = {
customMetrics,
graph,
selectedDate: null,
- series: this.getSeries(props.history, graph, customMetrics, props.metrics),
+ series: series.length > 0 ? series[0] : [],
tooltipIdx: null,
tooltipXPos: null
};
if (nextProps.history !== this.props.history || nextProps.metrics !== this.props.metrics) {
const graph = getGraph();
const customMetrics = getCustomGraph();
+ const series = splitSeriesInGraphs(
+ this.getSeries(nextProps.history, graph, customMetrics, nextProps.metrics),
+ MAX_GRAPH_NB,
+ MAX_SERIES_PER_GRAPH
+ );
this.setState({
customMetrics,
graph,
- series: this.getSeries(nextProps.history, graph, customMetrics, nextProps.metrics)
+ series: series.length > 0 ? series[0] : []
});
}
}
formatValue = (tick: number | string) =>
- formatMeasure(tick, getShortType(this.state.series[0].type));
+ formatMeasure(tick, getShortType(getSeriesMetricType(this.state.series)));
getDisplayedMetrics = (graph: string, customMetrics: Array<string>): Array<string> => {
const metrics: Array<string> = getDisplayedHistoryMetrics(graph, customMetrics);
return metrics;
};
- getSeries = (history: ?History, graph: string, customMetrics: Array<string>, metrics: Array<Metric>) => {
+ getSeries = (
+ history: ?History,
+ graph: string,
+ customMetrics: Array<string>,
+ metrics: Array<Metric>
+ ): Array<Serie> => {
const myHistory = history;
if (!myHistory) {
return [];
tooltipPos: number
};
-const TOOLTIP_WIDTH = 150;
+const TOOLTIP_WIDTH = 160;
export default class PreviewGraphTooltips extends React.PureComponent {
props: Props;
<td className="overview-analysis-graph-tooltip-value text-right little-spacer-right thin">
{value}
</td>
- <td className="text-ellipsis">
+ <td className="text-ellipsis overview-analysis-graph-tooltip-description">
{translatedName}
</td>
</tr>
customClass="bubble-popup-right"
position={
Object {
- "left": -125,
+ "left": -135,
"top": 16,
- "width": 150,
+ "width": 160,
}
}
>
1.2k
</td>
<td
- className="text-ellipsis"
+ className="text-ellipsis overview-analysis-graph-tooltip-description"
>
Code Smells
</td>
font-weight: bold;
}
+.overview-analysis-graph-tooltip-description {
+ max-width: 120px;
+}
+
.overview-analysis-event {
}
*/
// @flow
import React from 'react';
-import { debounce, findLast, maxBy, minBy, sortBy, groupBy, flatMap, chunk } from 'lodash';
+import { debounce, findLast, maxBy, minBy, sortBy } from 'lodash';
import ProjectActivityGraphsHeader from './ProjectActivityGraphsHeader';
import GraphsZoom from './GraphsZoom';
import GraphsHistory from './GraphsHistory';
import { getCustomGraph, saveCustomGraph, saveGraph } from '../../../helpers/storage';
import {
datesQueryChanged,
- isCustomGraph,
generateSeries,
getDisplayedHistoryMetrics,
getSeriesMetricType,
- historyQueryChanged
+ historyQueryChanged,
+ isCustomGraph,
+ splitSeriesInGraphs
} from '../utils';
import type { RawQuery } from '../../../helpers/query';
import type { Analysis, MeasureHistory, Metric, Query } from '../types';
);
this.state = {
series,
- graphs: this.splitSeriesInGraphs(series),
+ graphs: splitSeriesInGraphs(series, MAX_GRAPH_NB, MAX_SERIES_PER_GRAPH),
...this.getStateZoomDates(null, props, series)
};
this.updateQueryDateRange = debounce(this.updateQueryDateRange, 500);
nextProps.metrics,
getDisplayedHistoryMetrics(nextProps.query.graph, nextProps.query.customMetrics)
);
- newGraphs = this.splitSeriesInGraphs(newSeries);
+ newGraphs = splitSeriesInGraphs(newSeries, MAX_GRAPH_NB, MAX_SERIES_PER_GRAPH);
}
const newDates = this.getStateZoomDates(this.props, nextProps, newSeries);
this.props.updateQuery({ customMetrics });
};
- splitSeriesInGraphs = (series: Array<Serie>): Array<Array<Serie>> =>
- flatMap(groupBy(series, serie => serie.type), groupType =>
- chunk(groupType, MAX_SERIES_PER_GRAPH)
- ).slice(0, MAX_GRAPH_NB);
-
updateGraph = (graph: string) => {
saveGraph(graph);
if (isCustomGraph(graph) && this.props.query.customMetrics.length <= 0) {
*/
// @flow
import moment from 'moment';
-import { isEqual, sortBy } from 'lodash';
+import { chunk, flatMap, groupBy, isEqual, sortBy } from 'lodash';
import {
cleanQuery,
parseAsArray,
);
};
+export const splitSeriesInGraphs = (
+ series: Array<Serie>,
+ maxGraph: number,
+ maxSeries: number
+): Array<Array<Serie>> =>
+ flatMap(groupBy(series, serie => serie.type), type => chunk(type, maxSeries)).slice(0, maxGraph);
+
export const getSeriesMetricType = (series: Array<Serie>): string =>
series.length > 0 ? series[0].type : 'INT';
className="zoom-selection-handle"
x={-3}
y={options.yDim[1]}
- height={options.yDim[0] - options.yDim[1]}
+ height={options.yDim[0] - options.yDim[1] + 1}
width={6}
/>
</Draggable>;
<rect
className="zoom-selection"
x={0}
- y={yDim[1] + 1}
- height={yDim[0] - yDim[1]}
+ y={yDim[1]}
+ height={yDim[0] - yDim[1] + 1}
width={zoomBoxWidth}
onDoubleClick={this.handleDoubleClick(xScale, xDim)}
/>
const { xScale, yScale } = this.getScales();
return (
<svg className="line-chart " width={this.props.width} height={this.props.height}>
- <g transform={`translate(${this.props.padding[3]}, ${this.props.padding[0]})`}>
+ <g transform={`translate(${this.props.padding[3]}, ${this.props.padding[0] + 2})`}>
{this.renderLeak(xScale, yScale)}
{this.renderBaseLine(xScale, yScale)}
{this.props.showXTicks && this.renderTicks(xScale, yScale)}
projects / sonarqube.git / commitdiff