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>
|
29 | <div class="collapse navbar-collapse" id="navbar-responsive-collapse">
|
30 |
|
31 |
|
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>
|
78 |
|
79 | </div>
|
80 | </div>
|
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
|
97 | to 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
|
103 | code. 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
|
145 | have a good writeup <a
|
146 | href="http://web.archive.org/web/20160625121005/https://help.github.com/articles/using-pull-requests/">here</a>. These
|
147 | instructions discuss dygraphs more specifically.</p>
|
148 |
|
149 | <p>The list of steps may look a bit daunting, but it's not too bad,
|
150 | especially if you have any familiarity with git or github. If you run into
|
151 | any problems while following the instructions, feel free to contact
|
152 | dygraphs-users.</p>
|
153 |
|
154 | <p>Why not just take patches? This process means less work for me (the
|
155 | maintainer) and it also results in your name appearing in the list of
|
156 | dygraphs 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 .
|
185 | git 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>
|
207 | </div>
|
208 | </div>
|
209 |
|
210 |
|
211 |
|
212 |
|
213 | </body>
|
214 | </html>
|