diff --git a/binocular-frontend/src/visualizations/VisualizationComponents/commitTimeTracking/chart/CommitBarChart.tsx b/binocular-frontend/src/visualizations/VisualizationComponents/commitTimeTracking/chart/CommitBarChart.tsx index ce6f65c4..94997998 100644 --- a/binocular-frontend/src/visualizations/VisualizationComponents/commitTimeTracking/chart/CommitBarChart.tsx +++ b/binocular-frontend/src/visualizations/VisualizationComponents/commitTimeTracking/chart/CommitBarChart.tsx @@ -21,6 +21,7 @@ interface Props { colorDomain: any, colorPalette: any, ) => void | undefined; + axisTitles: string[]; } interface State { @@ -56,6 +57,7 @@ export default class CommitBarChart extends React.Component { private readonly defaultColor: string; private readonly colorPalette: string[]; private readonly dimensions: number[]; + private readonly axisTitles: string[]; private readonly displayStatistics: ( statisticsWindow: any, statisticsSettings: any, @@ -71,6 +73,7 @@ export default class CommitBarChart extends React.Component { this.defaultColor = props.defaultColor; this.colorPalette = props.colorPalette; this.dimensions = props.dimensions; + this.axisTitles = props.axisTitles; this.state = { content: props.content, @@ -110,7 +113,7 @@ export default class CommitBarChart extends React.Component { return; } const width = - ((visualViewport?.width ?? 1920) - 511 - 40 - 30) * + ((visualViewport?.width ?? 1920) - 511 - 80 - 30) * (this.state.content.commitData.slice(50 * this.state.page, 50 + 50 * this.state.page).length / 50.0); const nodeChartHeight = this.state.content.nodeChart ? 40 : 0; const numberOfBarcharts = this.state.content.upperChart && this.state.content.lowerChart ? 2 : 1; @@ -119,7 +122,7 @@ export default class CommitBarChart extends React.Component { const mainDiv = d3.select(this.divRef).html(''); if (this.state.content.upperChart) { - this.drawChart(mainDiv, width, height, { top: 40, right: 30, bottom: 0, left: 40 }, false); + this.drawChart(mainDiv, width, height, { top: 40, right: 30, bottom: 0, left: 80 }, false, this.axisTitles[0]); } if (this.state.content.nodeChart) { @@ -127,7 +130,7 @@ export default class CommitBarChart extends React.Component { } if (this.state.content.lowerChart) { - this.drawChart(mainDiv, width, height, { top: 0, right: 30, bottom: 40, left: 40 }, true); + this.drawChart(mainDiv, width, height, { top: 0, right: 30, bottom: 40, left: 80 }, true, this.axisTitles[1]); } this.drawNavigation(mainDiv, Math.ceil(this.state.content.commitData.length / 50.0)); @@ -173,6 +176,7 @@ export default class CommitBarChart extends React.Component { height: number, margin: Margin, showUpsideDown: boolean, + axisTitle: string, ) { const chartData = !showUpsideDown ? this.state.content.upperChart.slice(this.state.page * 50, 50 + this.state.page * 50) @@ -183,10 +187,26 @@ export default class CommitBarChart extends React.Component { const colorScale = this.createColorScale(this.colorDomain, this.defaultColor, this.colorPalette); this.appendBars(svg, chartData, x, y, colorScale, showUpsideDown, height); + svg + .append('g') + .attr('transform', `translate(${-10},0)`) + .call(d3.axisLeft(y).tickFormat((y) => (y * 1).toFixed())) + .call((g) => g.select('.domain').remove()) + .call((g) => + g + .append('text') + .attr('x', -50) + .attr('y', height / 2) + .attr('fill', 'currentColor') + .style('writing-mode', 'vertical-rl') + .style('font-size', '20px') + .attr('text-anchor', 'middle') + .text(axisTitle), + ); } drawNodes(mainDiv: d3.Selection, width: number) { - const svg = this.createSVG(mainDiv, 'nodeChart', { top: 5, right: 30, bottom: 5, left: 40 }, 40); + const svg = this.createSVG(mainDiv, 'nodeChart', { top: 5, right: 30, bottom: 5, left: 80 }, 40); const x = this.createXAxis(this.state.content.nodeChart.slice(this.state.page * 50, 50 + this.state.page * 50), width); const nodes = svg diff --git a/binocular-frontend/src/visualizations/VisualizationComponents/commitTimeTracking/chart/chart.tsx b/binocular-frontend/src/visualizations/VisualizationComponents/commitTimeTracking/chart/chart.tsx index 2befa19d..106b57cd 100644 --- a/binocular-frontend/src/visualizations/VisualizationComponents/commitTimeTracking/chart/chart.tsx +++ b/binocular-frontend/src/visualizations/VisualizationComponents/commitTimeTracking/chart/chart.tsx @@ -256,6 +256,7 @@ export default (props: Props) => { commitChartData !== undefined && commitChartData.length > 0 ? ( d.commitSHA).join('-') + (props.useActualTime ? '' : commitChartData.map((d) => d.timeSpent.estimated).join('-')) + @@ -382,7 +383,7 @@ function addActualTime(commits: any[]) { const timeStamp = c.message.match(regex); if (timeStamp) { - const time = timeStamp.split(' ')[1]; + const time = timeStamp[0].split(' ')[1]; timeSpent = +time.substring(0, time.indexOf('h')) * 60 + +time.substring(time.indexOf('h') + 1, time.indexOf('m')); } c.timeSpent = { actual: timeSpent }; diff --git a/binocular-frontend/src/visualizations/VisualizationComponents/commitTimeTracking/config.tsx b/binocular-frontend/src/visualizations/VisualizationComponents/commitTimeTracking/config.tsx index f81ec054..312f50a8 100644 --- a/binocular-frontend/src/visualizations/VisualizationComponents/commitTimeTracking/config.tsx +++ b/binocular-frontend/src/visualizations/VisualizationComponents/commitTimeTracking/config.tsx @@ -186,7 +186,7 @@ function addActualTime(commits: any[]) { const timeStamp = c.message.match(regex); if (timeStamp) { - const time = timeStamp.split(' ')[1]; + const time = timeStamp[0].split(' ')[1]; timeSpent = +time.substring(0, time.indexOf('h')) * 60 + +time.substring(time.indexOf('h') + 1, time.indexOf('m')); } c.timeSpent.actual = timeSpent; diff --git a/binocular-frontend/src/visualizations/VisualizationComponents/commitTimeTracking/styles.module.scss b/binocular-frontend/src/visualizations/VisualizationComponents/commitTimeTracking/styles.module.scss index ebcb5dc8..288ab622 100644 --- a/binocular-frontend/src/visualizations/VisualizationComponents/commitTimeTracking/styles.module.scss +++ b/binocular-frontend/src/visualizations/VisualizationComponents/commitTimeTracking/styles.module.scss @@ -125,7 +125,7 @@ min-width: 150px; left: 10px; top: 10px; - opacity: 0.9; + opacity: 0.75; z-index: 3; }