Add demo for series highlighting
[dygraphs.git] / generate-documentation.py
... / ...
CommitLineData
1#!/usr/bin/env python
2
3# Generate docs/options.html
4
5import json
6import glob
7import re
8import sys
9
10# Set this to the path to a test file to get debug output for just that test
11# file. Can be helpful to figure out why a test is not being shown for a
12# particular option.
13debug_tests = [] # [ 'tests/zoom.html' ]
14
15# Pull options reference JSON out of dygraph.js
16js = ''
17in_json = False
18for line in file('dygraph-options-reference.js'):
19 if '<JSON>' in line:
20 in_json = True
21 elif '</JSON>' in line:
22 in_json = False
23 elif in_json:
24 js += line
25
26# TODO(danvk): better errors here.
27assert js
28docs = json.loads(js)
29
30# Go through the tests and find uses of each option.
31for opt in docs:
32 docs[opt]['tests'] = []
33
34# This is helpful for differentiating uses of options like 'width' and 'height'
35# from appearances of identically-named options in CSS.
36def find_braces(txt):
37 """Really primitive method to find text inside of {..} braces.
38 Doesn't work if there's an unmatched brace in a string, e.g. '{'. """
39 out = ''
40 level = 0
41 for char in txt:
42 if char == '{':
43 level += 1
44 if level >= 1:
45 out += char
46 if char == '}':
47 level -= 1
48 return out
49
50# Find text followed by a colon. These won't all be options, but those that
51# have the same name as a Dygraph option probably will be.
52prop_re = re.compile(r'\b([a-zA-Z0-9]+) *:')
53tests = debug_tests or glob.glob('tests/*.html')
54for test_file in tests:
55 braced_html = find_braces(file(test_file).read())
56 if debug_tests:
57 print braced_html
58
59 ms = re.findall(prop_re, braced_html)
60 for opt in ms:
61 if debug_tests: print '\n'.join(ms)
62 if opt in docs and test_file not in docs[opt]['tests']:
63 docs[opt]['tests'].append(test_file)
64
65if debug_tests: sys.exit(0)
66
67# Extract a labels list.
68labels = []
69for nu, opt in docs.iteritems():
70 for label in opt['labels']:
71 if label not in labels:
72 labels.append(label)
73
74print """<!DOCTYPE HTML>
75<html>
76<head>
77 <title>Dygraphs Options Reference</title>
78 <link rel="stylesheet" href="style.css">
79 <style type="text/css">
80 p.option {
81 padding-left: 25px;
82 }
83 div.parameters {
84 padding-left: 15px;
85 }
86 #nav {
87 position: fixed;
88 }
89 #content {
90 max-width: 800px;
91 }
92 </style>
93</head>
94<body>
95"""
96
97print """
98<div id='nav'>
99<h2>Dygraphs</h2>
100<ul>
101 <li><a href="index.html">Home</a>
102 <li><a href="data.html">Data Formats</a></li>
103 <li><a href="annotations.html">Annotations</a></li>
104</ul>
105<h2>Options Reference</h2>
106<ul>
107 <li><a href="#usage">Usage</a>
108"""
109for label in sorted(labels):
110 print ' <li><a href="#%s">%s</a>\n' % (label, label)
111print '</ul>\n</div>\n\n'
112
113def name(f):
114 """Takes 'tests/demo.html' -> 'demo'"""
115 return f.replace('tests/', '').replace('.html', '')
116
117print """
118<div id='content'>
119<h2>Options Reference</h2>
120<p>Dygraphs tries to do a good job of displaying your data without any further configuration. But inevitably, you're going to want to tinker. Dygraphs provides a rich set of options for configuring its display and behavior.</p>
121
122<a name="usage"></a><h3>Usage</h3>
123<p>You specify options in the third parameter to the dygraphs constructor:</p>
124<pre>g = new Dygraph(div,
125 data,
126 {
127 option1: value1,
128 option2: value2,
129 ...
130 });
131</pre>
132
133<p>After you've created a Dygraph, you can change an option by calling the <code>updateOptions</code> method:</p>
134<pre>g.updateOptions({
135 new_option1: value1,
136 new_option2: value2
137 });
138</pre>
139<p>And, without further ado, here's the complete list of options:</p>
140"""
141for label in sorted(labels):
142 print '<a name="%s"><h3>%s</h3>\n' % (label, label)
143
144 for opt_name in sorted(docs.keys()):
145 opt = docs[opt_name]
146 if label not in opt['labels']: continue
147 tests = opt['tests']
148 if not tests:
149 examples_html = '<font color=red>NONE</font>'
150 else:
151 examples_html = ' '.join(
152 '<a href="%s">%s</a>' % (f, name(f)) for f in tests)
153
154 if 'parameters' in opt:
155 parameters = opt['parameters']
156 parameters_html = '\n'.join("<i>%s</i>: %s<br/>" % (p[0], p[1]) for p in parameters)
157 parameters_html = "\n <div class='parameters'>\n%s</div>" % (parameters_html);
158 else:
159 parameters_html = ''
160
161 if not opt['type']: opt['type'] = '(missing)'
162 if not opt['default']: opt['default'] = '(missing)'
163 if not opt['description']: opt['description'] = '(missing)'
164
165 print """
166 <div class='option'><a name="%(name)s"></a><b>%(name)s</b><br/>
167 %(desc)s<br/>
168 <i>Type: %(type)s</i><br/>%(parameters)s
169 <i>Default: %(default)s</i><br/>
170 Examples: %(examples_html)s<br/>
171 <br/></div>
172 """ % { 'name': opt_name,
173 'type': opt['type'],
174 'parameters': parameters_html,
175 'default': opt['default'],
176 'desc': opt['description'],
177 'examples_html': examples_html}
178
179
180print """
181<a name="point_properties"></a><h3>Point Properties</h3>
182Some callbacks take a point argument. Its properties are:<br/>
183<ul>
184<li>xval/yval: The data coordinates of the point (with dates/times as millis since epoch)</li>
185<li>canvasx/canvasy: The canvas coordinates at which the point is drawn.</li>
186<li>name: The name of the data series to which the point belongs</li>
187</ul>
188</div>
189</body>
190</html>
191"""
192
193# This page was super-helpful:
194# http://jsbeautifier.org/