diff options
| author | Clement Ho <clemmakesapps@gmail.com> | 2018-04-12 17:32:21 +0000 |
|---|---|---|
| committer | Clement Ho <clemmakesapps@gmail.com> | 2018-04-12 17:32:21 +0000 |
| commit | da6933883f42d66ca75e37a90f03d2a5b22e78ec (patch) | |
| tree | 194de6a4def9bd04c7533e2e328857bb6258ebc7 | |
| parent | a76dacd96a17a2974885de0ed54bd0e96696f36d (diff) | |
| parent | e3eeb3cb7e3b8db11b98b06122a728c90491c2cd (diff) | |
| download | gitlab-ce-da6933883f42d66ca75e37a90f03d2a5b22e78ec.tar.gz | |
Merge branch 'docs-graphs-section-new-frontend-guide' into 'master'
Update the new frontend guide to specify the usage of d3
See merge request gitlab-org/gitlab-ce!18294
| -rw-r--r-- | doc/development/new_fe_guide/development/components.md | 20 |
1 files changed, 19 insertions, 1 deletions
diff --git a/doc/development/new_fe_guide/development/components.md b/doc/development/new_fe_guide/development/components.md index 637099d1e83..899efb398cd 100644 --- a/doc/development/new_fe_guide/development/components.md +++ b/doc/development/new_fe_guide/development/components.md @@ -1,3 +1,21 @@ # Components -> TODO: Add content +## Graphs + +We have a lot of graphing libraries in our codebase to render graphs. In an effort to improve maintainability, new graphs should use [D3.js](https://d3js.org/). If a new graph is fairly simple, consider implementing it in SVGs or HTML5 canvas. + +We chose D3 as our library going forward because of the following features: + +* [Tree shaking webpack capabilities.](https://github.com/d3/d3/blob/master/CHANGES.md#changes-in-d3-40) +* [Compatible with vue.js as well as vanilla javascript.](https://github.com/d3/d3/blob/master/CHANGES.md#changes-in-d3-40) + +D3 is very popular across many projects outside of GitLab: + +* [The New York Times](https://archive.nytimes.com/www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html) +* [plot.ly](https://plot.ly/) +* [Droptask](https://www.droptask.com/) + +Within GitLab, D3 has been used for the following notable features + +* [Prometheus graphs](https://docs.gitlab.com/ee/user/project/integrations/prometheus.html) +* Contribution calendars |