Skip to content

Commit

Permalink
Merge 893fabd into df894d9
Browse files Browse the repository at this point in the history
  • Loading branch information
Raphaël Benitte committed Aug 3, 2017
2 parents df894d9 + 893fabd commit abf96ef
Show file tree
Hide file tree
Showing 11 changed files with 648 additions and 356 deletions.
88 changes: 87 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -202,6 +202,92 @@ dashboards:
y: 0
```

### GitLab project labels bubble chart

> Show GitLab project info.
![Gitlab project](https://raw.githubusercontent.com/plouc/mozaik-ext-gitlab/master/preview/gitlab_project.png)

#### parameters

key | required | description
----------|----------|--------------------------
`project` | yes | *ID or NAMESPACE/PROJECT_NAME of a project*

#### usage

``` yaml
# config.yml
dashboards:
- #
widgets:
- extension: gitlab
widget: Project
project: gitlab-org/gitlab-ce
columns: 1
rows: 1
x: 0
y: 0
```


### GitLab project labels pie chart

> Show GitLab project info.
![Gitlab project](https://raw.githubusercontent.com/plouc/mozaik-ext-gitlab/master/preview/gitlab_project.png)

#### parameters

key | required | description
----------|----------|--------------------------
`project` | yes | *ID or NAMESPACE/PROJECT_NAME of a project*

#### usage

``` yaml
# config.yml
dashboards:
- #
widgets:
- extension: gitlab
widget: Project
project: gitlab-org/gitlab-ce
columns: 1
rows: 1
x: 0
y: 0
```


### GitLab project labels tree map chart

> Show GitLab project info.
![Gitlab project](https://raw.githubusercontent.com/plouc/mozaik-ext-gitlab/master/preview/gitlab_project.png)

#### parameters

key | required | description
----------|----------|--------------------------
`project` | yes | *ID or NAMESPACE/PROJECT_NAME of a project*

#### usage

``` yaml
# config.yml
dashboards:
- #
widgets:
- extension: gitlab
widget: Project
project: gitlab-org/gitlab-ce
columns: 1
rows: 1
x: 0
y: 0
```


[license-image]: https://img.shields.io/github/license/plouc/mozaik-ext-gitlab.svg?style=flat-square
[license-url]: https://github.com/plouc/mozaik-ext-gitlab/blob/master/LICENSE.md
Expand All @@ -213,6 +299,6 @@ dashboards:
[gemnasium-url]: https://gemnasium.com/plouc/mozaik-ext-gitlab
[coverage-image]: https://img.shields.io/coveralls/plouc/mozaik-ext-gitlab.svg?style=flat-square
[coverage-url]: https://coveralls.io/github/plouc/mozaik-ext-gitlab
[widget-count-image]: https://img.shields.io/badge/widgets-x6-green.svg?style=flat-square
[widget-count-image]: https://img.shields.io/badge/widgets-x9-green.svg?style=flat-square
[heroku-image]: https://www.herokucdn.com/deploy/button.svg
[heroku-url]: https://heroku.com/deploy?template=https://github.com/plouc/mozaik-ext-gitlab/tree/demo
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
},
"peerDependencies": {
"@mozaik/ui": "^2.0.0-alpha.11",
"nivo": "^0.1.0",
"nivo": "^0.2.0",
"react": "^15.6.1"
},
"scripts": {
Expand Down
11 changes: 11 additions & 0 deletions src/client.js
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,17 @@ const client = mozaik => {
}
})
},
projectLabels({ project }) {
return Promise.all([
operations.project({ project }),
buildApiRequest(`/projects/${encodeURIComponent(project)}/labels`).then(
res => res.body
),
]).then(([project, labels]) => ({
project,
labels,
}))
},
}

return operations
Expand Down
2 changes: 2 additions & 0 deletions src/components/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import BuildHistory from './BuildHistory'
import BuildHistogram from './BuildHistogram'
import Branches from './Branches'
//import MergeRequestsGauge from './MergeRequestsGauge'
import * as labels from './labels'

export default {
Project,
Expand All @@ -14,4 +15,5 @@ export default {
BuildHistogram,
Branches,
//MergeRequestsGauge,
...labels,
}
73 changes: 73 additions & 0 deletions src/components/labels/LabelsBubble.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import React, { Component } from 'react'
import LabelsIcon from 'react-icons/lib/fa/tags'
import { TrapApiError, Widget, WidgetHeader, WidgetBody, WidgetLoader } from '@mozaik/ui'
import { ResponsiveBubble } from 'nivo'
import { labelsPropTypes, labelsDefaultProps } from './propTypes'
import { countLabel } from './counts'

export default class LabelsBubbles extends Component {
static propTypes = labelsPropTypes

static defaultProps = labelsDefaultProps

static getApiRequest({ project }) {
return {
id: `gitlab.projectLabels.${project}`,
params: { project },
}
}

render() {
const { apiData, apiError, title, countBy, animate } = this.props

let body = <WidgetLoader />
let subject = null
let count = 0
if (apiData) {
const { project, labels } = apiData

count = labels.length

const data = {
name: 'labels',
color: '#000',
children: labels,
}

subject = (
<a href={project.web_url} target="_blank">
{project.name}
</a>
)

body = (
<ResponsiveBubble
root={data}
labelSkipRadius={12}
value={countBy}
label={d => `${d.name} ${d[countBy]}`}
labelTextColor="inherit:darker(1.6)"
leavesOnly={true}
colorBy={d => d.color}
animate={animate}
/>
)
}

return (
<Widget>
<WidgetHeader
title={title || `Labels by ${countLabel(countBy)}`}
subject={title ? null : subject}
count={count}
icon={LabelsIcon}
/>
<WidgetBody>
<TrapApiError error={apiError}>
{body}
</TrapApiError>
</WidgetBody>
</Widget>
)
}
}
70 changes: 70 additions & 0 deletions src/components/labels/LabelsPie.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import React, { Component } from 'react'
import LabelsIcon from 'react-icons/lib/fa/tags'
import { TrapApiError, Widget, WidgetHeader, WidgetBody, WidgetLoader } from '@mozaik/ui'
import { ResponsivePie } from 'nivo'
import { labelsPropTypes, labelsDefaultProps } from './propTypes'
import { countLabel } from './counts'

export default class LabelsPie extends Component {
static propTypes = labelsPropTypes

static defaultProps = labelsDefaultProps

static getApiRequest({ project }) {
return {
id: `gitlab.projectLabels.${project}`,
params: { project },
}
}

render() {
const { apiData, apiError, title, countBy, animate } = this.props

let body = <WidgetLoader />
let subject = null
let count = 0
if (apiData) {
const { project, labels } = apiData

count = labels.length

const data = labels.map(label => ({
...label,
id: `${label.id}`,
value: label[countBy],
}))

subject = (
<a href={project.web_url} target="_blank">
{project.name}
</a>
)

body = (
<ResponsivePie
data={data}
colorBy={d => d.color}
innerRadius={0.6}
label={d => `${d.name} ${d.open_issues_count}`}
animate={animate}
/>
)
}

return (
<Widget>
<WidgetHeader
title={title || `Labels by ${countLabel(countBy)}`}
subject={title ? null : subject}
count={count}
icon={LabelsIcon}
/>
<WidgetBody>
<TrapApiError error={apiError}>
{body}
</TrapApiError>
</WidgetBody>
</Widget>
)
}
}
77 changes: 77 additions & 0 deletions src/components/labels/LabelsTreemap.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import React, { Component } from 'react'
import LabelsIcon from 'react-icons/lib/fa/tags'
import { TrapApiError, Widget, WidgetHeader, WidgetBody, WidgetLoader } from '@mozaik/ui'
import { ResponsiveTreeMap } from 'nivo'
import { labelsPropTypes, labelsDefaultProps } from './propTypes'
import { countLabel } from './counts'

export default class LabelsTreemap extends Component {
static propTypes = labelsPropTypes

static defaultProps = labelsDefaultProps

static getApiRequest({ project }) {
return {
id: `gitlab.projectLabels.${project}`,
params: { project },
}
}

render() {
const { apiData, apiError, title, countBy, animate } = this.props

let body = <WidgetLoader />
let subject = null
let count = 0
if (apiData) {
const { project, labels } = apiData

count = labels.length

const data = {
name: 'labels',
color: '#000',
children: labels,
}

subject = (
<a href={project.web_url} target="_blank">
{project.name}
</a>
)

body = (
<ResponsiveTreeMap
root={data}
tile="binary"
labelSkipSize={12}
identity="id"
value={countBy}
label={d => `${d.name} ${d[countBy]}`}
labelTextColor="inherit:darker(1.6)"
leavesOnly={true}
outerPadding={10}
innerPadding={2}
colorBy={d => d.color}
animate={animate}
/>
)
}

return (
<Widget>
<WidgetHeader
title={title || `Labels by ${countLabel(countBy)}`}
subject={title ? null : subject}
count={count}
icon={LabelsIcon}
/>
<WidgetBody>
<TrapApiError error={apiError}>
{body}
</TrapApiError>
</WidgetBody>
</Widget>
)
}
}
9 changes: 9 additions & 0 deletions src/components/labels/counts.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
export const countByLabels = {
open_issues_count: 'open issues',
closed_issues_count: 'closed issues',
open_merge_requests_count: 'opened merge requests',
}

export const countTypes = Object.keys(countByLabels)

export const countLabel = countType => countByLabels[countType]
3 changes: 3 additions & 0 deletions src/components/labels/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export { default as LabelsBubble } from './LabelsBubble'
export { default as LabelsPie } from './LabelsPie'
export { default as LabelsTreemap } from './LabelsTreemap'
Loading

0 comments on commit abf96ef

Please sign in to comment.