UNPKG

10.6 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Dygraphs — development guide</title>
7
8 <link rel="stylesheet" type="text/css" href=".jslibs/bootstrap.min.css" />
9 <link rel="stylesheet" type="text/css" href="dist/dygraph.css" />
10 <link rel="stylesheet" type="text/css" href="common/vextlnk.css" />
11 <link rel="stylesheet" type="text/css" href="site.css" />
12
13 <script type="text/javascript" src=".jslibs/jquery.min.js"></script>
14 <script type="text/javascript" src=".jslibs/bootstrap.min.js"></script>
15 <script type="text/javascript" src="dist/dygraph.js"></script>
16 </head>
17 <body>
18 <nav id="header" class="navbar navbar-default navbar-fixed-top">
19 <div class="container-fluid">
20 <div class="navbar-header">
21 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-responsive-collapse" aria-expanded="false">
22 <span class="sr-only">Toggle navigation</span>
23 <span class="icon-bar"></span>
24 <span class="icon-bar"></span>
25 <span class="icon-bar"></span>
26 </button>
27 <a class="navbar-brand" href="/">dygraphs</a>
28 </div><!-- /navbar-header -->
29 <div class="collapse navbar-collapse" id="navbar-responsive-collapse">
30
31 <!-- TODO(danvk): fill in relevant links here -->
32 <ul class="nav navbar-nav">
33 <li class="dropdown">
34 <a class="dropdown-toggle" id="drop3" role="button" data-toggle="dropdown" href="#">Documentation<b class="caret"></b></a>
35 <ul id="menu0" class="dropdown-menu" role="menu" aria-labelledby="drop3">
36 <li role="presentation"><a role="menuitem" tabindex="-1" href="tutorial.html">Tutorial</a></li>
37 <li role="presentation"><a role="menuitem" tabindex="-1" href="options.html">Options Reference</a></li>
38 <li role="presentation"><a role="menuitem" tabindex="-1" href="jsdoc/symbols/Dygraph.html">API Reference</a></li>
39 <li role="presentation"><a role="menuitem" tabindex="-1" href="data.html">Data Format</a></li>
40 <li role="presentation"><a role="menuitem" tabindex="-1" href="annotations.html">Annotations</a></li>
41 <li role="presentation"><a role="menuitem" tabindex="-1" href="css.html">CSS Reference</a></li>
42 <li role="presentation"><a role="menuitem" tabindex="-1" href="versions.html">Version History</a></li>
43 <li role="separator" class="divider"></li>
44 <li role="presentation"><a role="menuitem" tabindex="-1" href="ie.html">Notes on Internet Explorer</a></li>
45 </ul>
46 </li>
47 <li class="dropdown">
48 <a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Examples<b class="caret"></b></a>
49 <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
50 <li role="presentation"><a role="menuitem" tabindex="-1" href="gallery/">Demo Gallery</a></li>
51 <li role="presentation"><a role="menuitem" tabindex="-1" href="users.html">List of Users</a></li>
52 <li role="separator" class="divider"></li>
53 <li role="presentation"><a role="menuitem" tabindex="-1" href="tests/">Test Cases</a></li>
54 <li role="separator" class="divider"></li>
55 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://dygraphs.com/fiddle/">Play</a></li>
56 </ul>
57 </li>
58 <li><a class="xnavbar-link" href="download.html">Download</a></li>
59 <li class="dropdown">
60 <a class="dropdown-toggle" id="drop7" role="button" data-toggle="dropdown" href="#">Community <b class="caret"></b></a>
61 <ul id="menu4" class="dropdown-menu" role="menu" aria-labelledby="drop7">
62 <li role="presentation"><a role="menuitem" tabindex="-1" href="http://blog.dygraphs.com/">Blog</a></li>
63 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://stackoverflow.com/questions/ask?tags=dygraphs+javascript">Ask a Question</a></li>
64 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://stackoverflow.com/questions/tagged/dygraphs">Stack Overflow</a></li>
65 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://groups.google.com/g/dygraphs-users">Mailing List</a></li>
66 </ul>
67 </li>
68 <li class="dropdown">
69 <a class="dropdown-toggle" id="drop6" role="button" data-toggle="dropdown" href="#">Contribute <b class="caret"></b></a>
70 <ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop6">
71 <li role="presentation"><a role="menuitem" tabindex="-1" href="changes.html">Contributors Guide</a></li>
72 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://github.com/danvk/dygraphs">Source (Github)</a></li>
73 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://github.com/danvk/dygraphs/issues">Issue Tracker</a></li>
74 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://github.com/danvk/dygraphs/issues/new">Report a Bug</a></li>
75 </ul>
76 </li>
77 </ul><!-- /navbar-nav -->
78
79 </div><!-- /navbar-responsive-collapse -->
80 </div><!-- container-fluid -->
81 </nav>
82
83 <div class="container" id="main">
84 <div class="row">
85 <div class="col-lg-12">
86<style type="text/css">
87 pre {
88 margin-top: 5px;
89 margin-bottom: 5px;
90 }
91 ol > li { padding: 5px; }
92</style>
93
94<h2>Guide to making dygraphs changes</h2>
95
96<p>So you've made a change to dygraphs and would like to contribute it back
97to the open source project. Wonderful!</p>
98
99<p>This is a step-by-step guide explaining how to do it.</p>
100
101<h3>dygraphs style</h3>
102<p>First of all, please try to follow the style of the existing dygraphs
103code. This will make the review process go much more smoothly.<p>
104
105<p>A few salient points:</p>
106<ol>
107 <li>We try to adhere to Google's <a
108 href="http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml">
109 JS style guide</a> and would appreciate it if you try to as well. This
110 means:
111 <ul>
112 <li>No tabs! Indent using two spaces.
113 <li>Use camelCase for variable and function names.
114 <li>Limit lines to 80 characters.
115 </ul>
116
117 <li>Please run 'lint.sh' to see if you've introduced any new violations.
118
119 <li>If you've added a new feature, add a test for it (in the tests/
120 directory) or a gallery entry.
121
122 <li>If you've added an option, document it in
123 dygraph-options-reference.js. You'll get lots of warnings if you don't.
124
125 <li>If you've fixed a bug or added a feature, add an auto_test for
126 it.<br />
127 This ensures that we won't inadvertently break your feature in the
128 future. To do this, either add to an existing auto_test in
129 auto_tests/tests or run
130 <code>auto_tests/misc/new-test.sh your-test-name</code> to
131 create a new one. There are two easy ways to run tests:
132 <ul>
133 <li>You can run your auto_test in any browser by visiting
134 <code>auto_tests/misc/local.html</code>. This allows you to debug your
135 test, or test against a specific browser.
136 <li>You can run your auto_test on the command-line by running
137 <code>./test.sh</code>. (It requires installing
138 <a href="https://phantomjs.org/">phantomjs</a> on your computer.)
139 </ul>
140</ol>
141
142<h3>Sending a Pull Request</h3>
143
144<p>dygraphs is hosted on github, which uses a "pull request" model. They
145have a good writeup <a
146 href="http://web.archive.org/web/20160625121005/https://help.github.com/articles/using-pull-requests/">here</a>. These
147instructions discuss dygraphs more specifically.</p>
148
149<p>The list of steps may look a bit daunting, but it's not too bad,
150especially if you have any familiarity with git or github. If you run into
151any problems while following the instructions, feel free to contact
152dygraphs-users.</p>
153
154<p>Why not just take patches? This process means less work for me (the
155maintainer) and it also results in your name appearing in the list of
156dygraphs commits. This lets you take credit for your work.</p>
157
158<ol>
159 <li>Create an account on <a href="https://github.com/">github</a>. This is
160 free, painless and will let you claim credit for your changes.
161
162 <li>Install git. github has a good writeup <a
163 href="https://docs.github.com/en/get-started/quickstart/set-up-git">here</a>.
164
165 <li>Create a fork of the dygraphs repository on github by
166 clicking <a href="https://github.com/danvk/dygraphs">this link</a> and
167 then the "Fork" button.
168
169 <li>You should see a URL along the lines of
170 <code>git@github.com:yourname/dygraphs.git</code><br />Copy this, open up a
171 terminal and run<br />
172 <pre>git clone git@github.com:yourname/dygraphs.git</pre> This
173 pulls the dygraphs code down onto your local disk.
174
175 <li>cd into the dygraphs directory and make your changes.<br />
176 If you've already got them somewhere else, just copy them over.<br />
177
178 <li>Be a good citizen! Make sure your code follows the guidelines
179 above.<br />
180 You'll have to do this before we accept your changes, so you may as well
181 do it now
182
183 <li>Commit your changes locally: run
184 <pre>git add .
185git commit</pre>
186 Type in a description of your change. This will
187 eventually appear in the dygraphs <a
188 href="https://github.com/danvk/dygraphs/commits/master">commit list</a>.
189
190 <li>Push your changes to github by running <pre>git push</pre>This will
191 send your changes to your forked repository on github.
192
193 <li>Go to your fork of dygraphs on github (i.e.
194 github.com/yourname/dygraphs).<br />
195 Click the "Pull Request" button.<br />
196 This will send me an email with a pointer to your changes.
197
198 <li>We'll review your changes and (unless your code is perfect!) give you
199 some feedback. Make these suggested changes in your local git client and
200 re-run "git commit" and "git push" so that we can see them.
201
202 <li>Once your change is ready, we'll pull it into the main dygraphs
203 repository and publish it to the web.
204</ol>
205
206 </div> <!-- .col-lg-12 -->
207 </div> <!-- /div.row -->
208</div> <!-- /div#main.container -->
209
210<!-- TODO(danvk): add a real footer -->
211<!--@@@IFIMPRINT:<div class="container" style="border:1px solid green; margin-bottom:1ex;">@@@PLACE_IMPRINT_LINK_HERE_IF_NECESSARY@@@</div>:FIIMPRINT@@@-->
212
213 </body>
214</html>