Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(Tracking): display traking info progress bar
ISSUES CLOSED: #74 fix fix store log
- Loading branch information
1 parent
9b0c93b
commit 1995497
Showing
15 changed files
with
302 additions
and
26 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
86 changes: 86 additions & 0 deletions
86
app/containers/IssueView/TrackingBar/ProgressBar/CircularProgressBar.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| // @flow | ||
| import React from 'react'; | ||
| import Tooltip from '@atlaskit/tooltip'; | ||
|
|
||
| import type { | ||
| StatelessFunctionalComponent, | ||
| Node, | ||
| } from 'react'; | ||
|
|
||
| import { | ||
| CircleStop, | ||
| CircleProgress, | ||
| CircleBackground, | ||
| } from './styled'; | ||
|
|
||
| type Props = { | ||
| content?: Node, | ||
| percentage?: number, | ||
| onClick: () => {}, | ||
| }; | ||
|
|
||
| const CircularProgressBar: StatelessFunctionalComponent<Props> = ({ | ||
| content, | ||
| percentage, | ||
| onClick, | ||
| }: Props): Node => { | ||
| // options | ||
| const sqSize = 60; | ||
| const strokeWidth = 5; | ||
|
|
||
| // SVG centers the stroke width on the radius, subtract out so circle fits in square | ||
| const radius = (sqSize - strokeWidth) / 2; | ||
| // Enclose cicle in a circumscribing square | ||
| const viewBox = `0 0 ${sqSize} ${sqSize}`; | ||
| // Arc length at 100% coverage is the circle circumference | ||
| const dashArray = radius * Math.PI * 2; | ||
| // Scale 100% coverage overlay with the actual percent | ||
| const dashOffset = dashArray - ((dashArray * percentage) / 100); | ||
|
|
||
| return ( | ||
| <Tooltip | ||
| content={content} | ||
| position="left" | ||
| delay={200} | ||
| > | ||
| <svg | ||
| width={sqSize} | ||
| height={sqSize} | ||
| viewBox={viewBox} | ||
| onClick={onClick} | ||
| > | ||
| <CircleBackground | ||
| cx={sqSize / 2} | ||
| cy={sqSize / 2} | ||
| r={radius} | ||
| strokeWidth={`${strokeWidth}px`} | ||
| /> | ||
| <CircleProgress | ||
| cx={sqSize / 2} | ||
| cy={sqSize / 2} | ||
| r={radius} | ||
| strokeWidth={`${strokeWidth}px`} | ||
| transform={`rotate(-90 ${sqSize / 2} ${sqSize / 2})`} | ||
| style={{ | ||
| strokeDasharray: dashArray, | ||
| strokeDashoffset: dashOffset, | ||
| }} | ||
| /> | ||
| <CircleStop | ||
| x="20" | ||
| y="20" | ||
| rx="1" | ||
| width="20" | ||
| height="20" | ||
| /> | ||
| </svg> | ||
| </Tooltip> | ||
| ); | ||
| }; | ||
|
|
||
| CircularProgressBar.defaultProps = { | ||
| content: null, | ||
| percentage: 0, | ||
| }; | ||
|
|
||
| export default CircularProgressBar; |
61 changes: 61 additions & 0 deletions
61
app/containers/IssueView/TrackingBar/ProgressBar/ProgressBar.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| // @flow | ||
| import React from 'react'; | ||
|
|
||
| import type { | ||
| StatelessFunctionalComponent, | ||
| Node, | ||
| } from 'react'; | ||
| import type { | ||
| IssuesReports, | ||
| } from 'types'; | ||
|
|
||
| import { | ||
| stj, | ||
| } from 'time-util'; | ||
|
|
||
| import { | ||
| ProgressBarContainer, | ||
| } from './styled'; | ||
|
|
||
| import CircularProgressBar from './CircularProgressBar'; | ||
|
|
||
| type Props = { | ||
| time: number, | ||
| report: IssuesReports, | ||
| showLoggedOnStop: boolean, | ||
| onClick: () => {}, | ||
| }; | ||
|
|
||
| // eslint-disable-next-line | ||
| const ProgressBar: StatelessFunctionalComponent<Props> = ({ | ||
| time, | ||
| report, | ||
| showLoggedOnStop, | ||
| onClick, | ||
| }: Props): Node => { | ||
| const { loggedTotal, originalestimate, remaining } = report; | ||
|
|
||
| let content = ''; | ||
| let percentage = 0; | ||
| if (remaining > 0) { | ||
| percentage = Math.round(((loggedTotal + time) / originalestimate) * 100); | ||
| content = showLoggedOnStop ? `${stj(loggedTotal + time)} / ${percentage}%` : ''; | ||
|
|
||
| if (percentage > 100) { | ||
| percentage = 100; | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
| <ProgressBarContainer> | ||
| <CircularProgressBar | ||
| percentage={percentage} | ||
| content={content} | ||
| onClick={onClick} | ||
| /> | ||
| </ProgressBarContainer> | ||
| ); | ||
| }; | ||
|
|
||
| export default ProgressBar; |
33 changes: 33 additions & 0 deletions
33
app/containers/IssueView/TrackingBar/ProgressBar/styled/index.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| /* eslint-disable no-confusing-arrow */ | ||
| import styled from 'styled-components'; | ||
| import { | ||
| Flex, | ||
| } from 'components'; | ||
|
|
||
| export const ProgressBarContainer = styled(Flex).attrs({ | ||
| alignCenter: true, | ||
| })` | ||
| position: absolute; | ||
| right: 20px; | ||
| bottom: 6px | ||
| cursor: pointer; | ||
| `; | ||
|
|
||
| export const CircleBackground = styled.circle` | ||
| fill: #172B4D; | ||
| stroke: white; | ||
| cursor: pointer; | ||
| `; | ||
|
|
||
| export const CircleProgress = styled.circle` | ||
| fill: none; | ||
| stroke: #FFAB00; | ||
| stroke-linecap: round; | ||
| stroke-linejoin: round; | ||
| cursor: pointer; | ||
| `; | ||
|
|
||
| export const CircleStop = styled.rect` | ||
| fill: white; | ||
| cursor: pointer; | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.