Skip to content

Commit

Permalink
feat(labels): improve labels related widgets
Browse files Browse the repository at this point in the history
  • Loading branch information
Raphaël Benitte committed Aug 3, 2017
1 parent e0f5170 commit d3ee798
Show file tree
Hide file tree
Showing 13 changed files with 632 additions and 495 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
13 changes: 10 additions & 3 deletions src/client.js
Original file line number Diff line number Diff line change
Expand Up @@ -93,9 +93,16 @@ const client = mozaik => {
})
},
projectLabels({ project }) {
return buildApiRequest(`/projects/${encodeURIComponent(project)}/labels`)
.then(res => res.body)
}
return Promise.all([
operations.project({ project }),
buildApiRequest(`/projects/${encodeURIComponent(project)}/labels`).then(
res => res.body
),
]).then(([project, labels]) => ({
project,
labels,
}))
},
}

return operations
Expand Down
66 changes: 0 additions & 66 deletions src/components/LabelsBubbles.js

This file was deleted.

66 changes: 0 additions & 66 deletions src/components/LabelsTreemap.js

This file was deleted.

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

export default {
Project,
Expand All @@ -16,6 +15,5 @@ export default {
BuildHistogram,
Branches,
//MergeRequestsGauge,
LabelsBubbles,
LabelsTreemap,
...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>
)
}
}

0 comments on commit d3ee798

Please sign in to comment.