diff options
| author | Jose Ivan Vargas <jvargas@gitlab.com> | 2018-04-10 16:32:33 -0500 |
|---|---|---|
| committer | Jose Ivan Vargas <jvargas@gitlab.com> | 2018-04-12 12:21:09 -0500 |
| commit | e3eeb3cb7e3b8db11b98b06122a728c90491c2cd (patch) | |
| tree | 75bf787842cb37a970701ae2f63b7f70f07b1631 /doc/development/new_fe_guide/development | |
| parent | 37a5632483b67ddcfa4c535cc911319b25f01fb5 (diff) | |
| download | gitlab-ce-e3eeb3cb7e3b8db11b98b06122a728c90491c2cd.tar.gz | |
Added d3 documentation for the new fe guide
Diffstat (limited to 'doc/development/new_fe_guide/development')
| -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 |