diff --git a/ui/src/visualizations/File-Evolution/chart/chart.js b/ui/src/visualizations/File-Evolution/chart/chart.js index 113e0506..e3fbbc71 100644 --- a/ui/src/visualizations/File-Evolution/chart/chart.js +++ b/ui/src/visualizations/File-Evolution/chart/chart.js @@ -19,11 +19,13 @@ export default class FileEvolution extends React.Component { const commitBoxes = this.getCommitsDraw(space); //const svgHeight = (commitRects.length / 2 + 1) * this.props.commitBoxHeight + (commitRects.length / 2) * space; const svgHeight = this.props.commitBoxHeight + space; - const svgWidth = (commitBoxes.length / 2 + 1) * this.props.commitBoxHeight + (commitBoxes.length / 2) * space; + const svgWidth = (commitBoxes.length / 2 + 1) * this.props.commitBoxHeight + commitBoxes.length / 2 * space; return (
- {commitBoxes} + + {commitBoxes} +
); @@ -36,50 +38,86 @@ export default class FileEvolution extends React.Component { color = props.authorsColorPalette[commit.signature]; } else if (props.commitBoxColor === 'branch') { //TODO branch color - color = 'yellow'; + color = props.branchesColorPalette[getBranch(props, commit)]; + if (color === undefined) { + color = 'red'; + } } return color; } + function getBranch(props, commit) { + let branch = ''; + for (const b in props.branches) { + const branchName = props.branches[b].branch; + if (commit.branch.includes(branchName)) { + branch = branchName; + break; + } + } + return branch; + } + function getCommitInfo(props, commit) { //TODO font size - const commitInfo = []; - if (props.showCommitMessage === 'header') { + + commitInfo.push( +

+ {commit.messageHeader} +

+ ); + commitInfo.push(
); + if (props.showCommitMessage) { commitInfo.push( - - {commit.messageHeader} - + + Message: {commit.message} + ); - } else if (props.showCommitMessage === 'all') { + } + if (props.showCommitSha === 'short') { commitInfo.push( - - {commit.message} - + + Short SHA: {commit.shortSha} + ); + } else if (props.showCommitSha === 'all') { + commitInfo.push(SHA: {commit.sha}); } if (props.showCommitDate) { - if (commitInfo.length > 0) { - commitInfo.push(
); - } - commitInfo.push({commit.date}); + commitInfo.push( + + Date: {commit.date} + + ); } if (props.showCommitAuthor) { - if (commitInfo.length > 0) { - commitInfo.push(
); - } - commitInfo.push({commit.signature}); + commitInfo.push( + + Author: {commit.signature} + + ); + } + if (props.showCommitWeblink) { + commitInfo.push( + + + URL: {commit.webUrl} + + + ); } if (props.showCommitFiles) { - if (commitInfo.length > 0) { - commitInfo.push(
); - } + commitInfo.push(Files:); + commitInfo.push(
); const files = props.commitFiles[commit.sha]; for (const f in files) { const file = files[f]; commitInfo.push( - {file.path} + + {file.path} + ); commitInfo.push(
); @@ -98,8 +136,8 @@ export default class FileEvolution extends React.Component { const pointsForLine = '' + lineXstart.toString() + ',' + lineY.toString() + ' ' + lineXend.toString() + ',' + lineY.toString(); const arrowHeadYup = y + height / 4; - const arrowHeadYdown = y + (height / 4) * 3; - const arrowHeadX = lineXstart + ((lineXend - lineXstart) / 4) * 3; + const arrowHeadYdown = y + height / 4 * 3; + const arrowHeadX = lineXstart + (lineXend - lineXstart) / 4 * 3; const pointsForArrowHead = '' + arrowHeadX.toString() + @@ -118,6 +156,7 @@ export default class FileEvolution extends React.Component { arrow.push(); return arrow; } + const commitData = this.props.commits; const width = this.props.commitBoxWidth; const height = this.props.commitBoxHeight; @@ -127,24 +166,26 @@ export default class FileEvolution extends React.Component { for (const i in commitData) { const commit = commitData[i]; if (this.props.selectedAuthors.indexOf(commit.signature) > -1) { - const color = getBoxColor(this.props, commit); - commitRects.push( - - - - {getCommitInfo(this.props, commit)} - - - ); + if (this.props.selectedBranches.indexOf(getBranch(this.props, commit)) > -1) { + const color = getBoxColor(this.props, commit); + commitRects.push( + + + + {getCommitInfo(this.props, commit)} + + + ); - commitRects.push( - - {getArrow(x, y, height, width)} - - ); + commitRects.push( + + {getArrow(x, y, height, width)} + + ); - x = x + width + space; - //y = y + height + space; //TODO auskommentieren + x = x + width + space; + //y = y + height + space; //TODO auskommentieren + } } } commitRects.pop(); //remove last arrow diff --git a/ui/src/visualizations/File-Evolution/chart/index.js b/ui/src/visualizations/File-Evolution/chart/index.js index 7c1a7bcf..495d16d7 100644 --- a/ui/src/visualizations/File-Evolution/chart/index.js +++ b/ui/src/visualizations/File-Evolution/chart/index.js @@ -23,6 +23,8 @@ const mapStateToProps = (state /*, ownProps*/) => { showCommitDate: FileEvolutionState.config.showCommitDate, showCommitAuthor: FileEvolutionState.config.showCommitAuthor, showCommitMessage: FileEvolutionState.config.showCommitMessage, + showCommitWeblink: FileEvolutionState.config.showCommitWeblink, + showCommitSha: FileEvolutionState.config.showCommitSha, showCommitFiles: FileEvolutionState.config.showCommitFiles }; }; diff --git a/ui/src/visualizations/File-Evolution/config.js b/ui/src/visualizations/File-Evolution/config.js index 78561637..14c3dd8a 100644 --- a/ui/src/visualizations/File-Evolution/config.js +++ b/ui/src/visualizations/File-Evolution/config.js @@ -12,7 +12,8 @@ import { setShowCommitDate, setShowCommitMessage, setShowCommitAuthor, - setShowCommitFiles + setShowCommitFiles, + setShowCommitSha, setShowCommitWeblink } from './sagas'; import React from 'react'; @@ -37,6 +38,7 @@ const mapStateToProps = (state /*, ownProps*/) => { showCommitDate: FileEvolutionState.config.showCommitDate, showCommitAuthor: FileEvolutionState.config.showCommitAuthor, showCommitMessage: FileEvolutionState.config.showCommitMessage, + showCommitSha: FileEvolutionState.config.showCommitSha, showCommitFiles: FileEvolutionState.config.showCommitFiles }; }; @@ -50,7 +52,9 @@ const mapDispatchToProps = (dispatch /*, ownProps*/) => { onClickShowCommitBoxDate: showCommitDate => dispatch(setShowCommitDate(showCommitDate)), onClickShowCommitBoxAuthor: showCommitAuthor => dispatch(setShowCommitAuthor(showCommitAuthor)), onClickShowCommitBoxFiles: showCommitFiles => dispatch(setShowCommitFiles(showCommitFiles)), - onSetShowCommitMessage: showCommitMessage => dispatch(setShowCommitMessage(showCommitMessage)), + onClickShowCommitBoxMessage: showCommitMessage => dispatch(setShowCommitMessage(showCommitMessage)), + onClickShowCommitBoxWeblink: showCommitWeblink => dispatch(setShowCommitWeblink(showCommitWeblink)), + onSetShowCommitSha: showCommitSha => dispatch(setShowCommitSha(showCommitSha)), onClickCommitBoxColor: commitBoxColor => dispatch(setCommitBoxColor(commitBoxColor)) }; }; @@ -113,6 +117,7 @@ const FileEvolutionConfigComponent = props => { />{' '} Show Author{' '} +
+
+
+ +
+ - + props.onSetShowCommitMessage(value)} + onChange={value => props.onSetShowCommitSha(value)} />
diff --git a/ui/src/visualizations/File-Evolution/reducers/config.js b/ui/src/visualizations/File-Evolution/reducers/config.js index 98679091..c2887172 100644 --- a/ui/src/visualizations/File-Evolution/reducers/config.js +++ b/ui/src/visualizations/File-Evolution/reducers/config.js @@ -11,9 +11,11 @@ export default handleActions( SET_SELECTED_AUTHORS: (state, action) => _.assign({}, state, { selectedAuthors: [...action.payload] }), SET_SELECTED_BRANCHES: (state, action) => _.assign({}, state, { selectedBranches: [...action.payload] }), SET_SHOW_COMMIT_DATE: (state, action) => _.assign({}, state, { showCommitDate: action.payload }), - SET_SHOW_COMMIT_MESSAGE: (state, action) => _.assign({}, state, { showCommitMessage: action.payload }), + SET_SHOW_COMMIT_SHA: (state, action) => _.assign({}, state, { showCommitSha: action.payload }), SET_SHOW_COMMIT_AUTHOR: (state, action) => _.assign({}, state, { showCommitAuthor: action.payload }), - SET_SHOW_COMMIT_FILES: (state, action) => _.assign({}, state, { showCommitFiles: action.payload }) + SET_SHOW_COMMIT_FILES: (state, action) => _.assign({}, state, { showCommitFiles: action.payload }), + SET_SHOW_COMMIT_WEBLINK: (state, action) => _.assign({}, state, { showCommitWeblink: action.payload }), + SET_SHOW_COMMIT_MESSAGE: (state, action) => _.assign({}, state, { showCommitMessage: action.payload }) }, { commitBoxWidth: 200, @@ -22,8 +24,10 @@ export default handleActions( selectedAuthors: [], selectedBranches: [], showCommitDate: true, - showCommitMessage: 'header', + showCommitSha: 'short', showCommitAuthor: false, - showCommitFiles: true + showCommitFiles: true, + showCommitMessage: true, + showCommitWeblink: false } ); diff --git a/ui/src/visualizations/File-Evolution/sagas/getCommitData.js b/ui/src/visualizations/File-Evolution/sagas/getCommitData.js index 99c5a33a..58fac717 100644 --- a/ui/src/visualizations/File-Evolution/sagas/getCommitData.js +++ b/ui/src/visualizations/File-Evolution/sagas/getCommitData.js @@ -25,6 +25,8 @@ const getCommitsPage = until => (page, perPage) => { data { sha date + branch + shortSha message messageHeader signature diff --git a/ui/src/visualizations/File-Evolution/sagas/index.js b/ui/src/visualizations/File-Evolution/sagas/index.js index 7ce2cc7f..214e0b6a 100644 --- a/ui/src/visualizations/File-Evolution/sagas/index.js +++ b/ui/src/visualizations/File-Evolution/sagas/index.js @@ -18,7 +18,9 @@ export const setSelectedAuthors = createAction('SET_SELECTED_AUTHORS'); export const setSelectedBranches = createAction('SET_SELECTED_BRANCHES'); export const setShowCommitDate = createAction('SET_SHOW_COMMIT_DATE'); +export const setShowCommitSha = createAction('SET_SHOW_COMMIT_SHA'); export const setShowCommitMessage = createAction('SET_SHOW_COMMIT_MESSAGE'); +export const setShowCommitWeblink = createAction('SET_SHOW_COMMIT_WEBLINK'); export const setShowCommitAuthor = createAction('SET_SHOW_COMMIT_AUTHOR'); export const setShowCommitFiles = createAction('SET_SHOW_COMMIT_FILES'); @@ -65,7 +67,7 @@ export const fetchFileEvolutionData = fetchFactory( //const commiters = yield getCommiters(); return yield Promise.join(getCommitData(), getBranches(), getCommiters(), getFiles()) .spread((commits, branches, commiters, files) => { - console.log(files); + console.log(commits); const authorsColorPalette = getAuthorColorPalette(commiters); const branchesColorPalette = getBranchesColorPalette(branches); const commitFiles = addFilesToCommit(files, commits); @@ -128,6 +130,11 @@ function getBranchesColorPalette(branches) { } colorPalette[branches[i].branch] = randomColor; } + let randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16); + while (randomColor.length !== 7) { + randomColor = randomColor + '0'; + } + colorPalette['tags/v1.0.0'] = randomColor; console.log(colorPalette); return colorPalette; }