From 473278ecf6ef632d9104af0c46fc86ae93cfccda Mon Sep 17 00:00:00 2001 From: Robert Konigsberg Date: Tue, 28 Feb 2012 06:24:55 -0500 Subject: [PATCH] Doc updates / push gallery, rename some gallery js files for compatibility. --- gallery/annotation-gviz.js | 42 ------------ gallery/annotation-native.js | 36 ---------- gallery/annotation.js | 152 ------------------------------------------ gallery/annotations-gviz.js | 42 ++++++++++++ gallery/annotations-native.js | 36 ++++++++++ gallery/annotations.js | 152 ++++++++++++++++++++++++++++++++++++++++++ gallery/index.html | 6 +- generate-documentation.py | 63 +++++++++++------ 8 files changed, 276 insertions(+), 253 deletions(-) delete mode 100644 gallery/annotation-gviz.js delete mode 100644 gallery/annotation-native.js delete mode 100644 gallery/annotation.js create mode 100644 gallery/annotations-gviz.js create mode 100644 gallery/annotations-native.js create mode 100644 gallery/annotations.js diff --git a/gallery/annotation-gviz.js b/gallery/annotation-gviz.js deleted file mode 100644 index 0bdd097..0000000 --- a/gallery/annotation-gviz.js +++ /dev/null @@ -1,42 +0,0 @@ -Gallery.register( - 'annotation-gviz', - { - name: 'Annotation Gviz (broken)', - title: 'Comparison of Gviz and Dygraphs annotated timelines', - setup : function(parent) { - parent.innerHTML = - "

Google AnnotatedTimeline:

" + - "
" + - "

Dygraph.GVizChart:

" + - "
"; - }, - run: function() { - drawChart = function() { - var data = new google.visualization.DataTable(); - data.addColumn('date', 'Date'); - data.addColumn('number', 'Sold Pencils'); - data.addColumn('string', 'title1'); - data.addColumn('string', 'text1'); - data.addColumn('number', 'Sold Pens'); - data.addColumn('string', 'title2'); - data.addColumn('string', 'text2'); - data.addRows([ - [new Date(2008, 1 ,1), 30000, undefined, undefined, 40645, undefined, undefined], - [new Date(2008, 1 ,2), 14045, undefined, undefined, 20374, undefined, undefined], - [new Date(2008, 1 ,3), 55022, undefined, undefined, 50766, undefined, undefined], - [new Date(2008, 1 ,4), 75284, undefined, undefined, 14334, 'Out of Stock','Ran out of stock on pens at 4pm'], - [new Date(2008, 1 ,5), 41476, 'Bought Pens','Bought 200k pens', 66467, undefined, undefined], - [new Date(2008, 1 ,6), 33322, undefined, undefined, 39463, undefined, undefined] - ]); - - var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('gviz_div')); - chart.draw(data, {displayAnnotations: true}); - - }; - google.setOnLoadCallback(drawChart); - var f = function() { alert("!"); }; - google.setOnLoadCallback(f); - var g = new Dygraph.GVizChart(document.getElementById("dg_div")); - g.draw(data, {displayAnnotations: true, labelsKMB: true}); - } - }); diff --git a/gallery/annotation-native.js b/gallery/annotation-native.js deleted file mode 100644 index 8ed7ff9..0000000 --- a/gallery/annotation-native.js +++ /dev/null @@ -1,36 +0,0 @@ -Gallery.register( - 'annotations-native', - { - name: 'Annotations with Native format', - setup: function(parent) { - parent.innerHTML = - "

This test demonstrates how annotations can be used with " + - "native-format data.

" + - "
"; - }, - run: function() { - g = new Dygraph( - document.getElementById("demodiv"), - [ - [ new Date("2011/11/01"), 100 ], - [ new Date("2011/11/02"), 200 ], - [ new Date("2011/11/03"), 300 ], - [ new Date("2011/11/04"), 100 ], - [ new Date("2011/11/05"), 200 ], - [ new Date("2011/11/06"), 300 ], - [ new Date("2011/11/07"), 200 ], - [ new Date("2011/11/08"), 100 ] - ], - { - labels: [ 'Date', 'Value' ] - } - ); - - g.setAnnotations([{ - series: 'Value', - x: Date.parse('2011/11/04'), - shortText: 'M', - text: 'Marker' - }]); - } -}); diff --git a/gallery/annotation.js b/gallery/annotation.js deleted file mode 100644 index e0e0319..0000000 --- a/gallery/annotation.js +++ /dev/null @@ -1,152 +0,0 @@ -Gallery.register( - 'annotations', - { - name: 'Annotations', - title: 'Dynamic Annotations Demo', - setup: function(parent) { - parent.innerHTML = [ - "

Click any point to add an annotation to it or click 'Add Annotation'.

", - "", - "", - "
", - "
", - "
" ].join("\n"); - }, - - run: function() { - var eventDiv = document.getElementById("events"); - function nameAnnotation(ann) { - return "(" + ann.series + ", " + ann.x + ")"; - } - - g = new Dygraph( - document.getElementById("g_div"), - function() { - var zp = function(x) { if (x < 10) return "0"+x; else return x; }; - var r = "date,parabola,line,another line,sine wave\n"; - for (var i=1; i<=31; i++) { - r += "200610" + zp(i); - r += "," + 10*(i*(31-i)); - r += "," + 10*(8*i); - r += "," + 10*(250 - 8*i); - r += "," + 10*(125 + 125 * Math.sin(0.3*i)); - r += "\n"; - } - return r; - }, - { - rollPeriod: 1, - showRoller: true, - width: 480, - height: 320, - drawCallback: function(g) { - var ann = g.annotations(); - var html = ""; - for (var i = 0; i < ann.length; i++) { - var name = nameAnnotation(ann[i]); - html += "" - html += name + ": " + (ann[i].shortText || '(icon)') - html += " -> " + ann[i].text + "
"; - } - document.getElementById("list").innerHTML = html; - } - } - ); - - var last_ann = 0; - annotations = []; - for (var x = 10; x < 15; x += 2) { - annotations.push( { - series: 'sine wave', - x: "200610" + x, - shortText: x, - text: 'Stock Market Crash ' + x - } ); - last_ann = x; - } - annotations.push( { - series: 'another line', - x: "20061013", - icon: 'images/dollar.png', - width: 18, - height: 23, - tickHeight: 4, - text: 'Another one', - cssClass: 'annotation', - clickHandler: function() { - eventDiv.innerHTML += "special handler
"; - } - } ); - g.setAnnotations(annotations); - - document.getElementById('add').onclick = function() { - var x = last_ann + 2; - var annnotations = g.annotations(); - annotations.push( { - series: 'line', - x: "200610" + x, - shortText: x, - text: 'Line ' + x, - tickHeight: 10 - } ); - last_ann = x; - g.setAnnotations(annotations); - } - - var bottom = document.getElementById('bottom'); - - bottom.onclick = function() { - var to_bottom = bottom.textContent == 'Shove to bottom'; - - var anns = g.annotations(); - for (var i = 0; i < anns.length; i++) { - anns[i].attachAtBottom = to_bottom; - } - g.setAnnotations(anns); - - if (to_bottom) { - bottom.textContent = 'Lift back up'; - } else { - bottom.textContent = 'Shove to bottom'; - } - } - - var saveBg = ''; - var num = 0; - g.updateOptions( { - annotationClickHandler: function(ann, point, dg, event) { - eventDiv.innerHTML += "click: " + nameAnnotation(ann) + "
"; - }, - annotationDblClickHandler: function(ann, point, dg, event) { - eventDiv.innerHTML += "dblclick: " + nameAnnotation(ann) + "
"; - }, - annotationMouseOverHandler: function(ann, point, dg, event) { - document.getElementById(nameAnnotation(ann)).style.fontWeight = 'bold'; - saveBg = ann.div.style.backgroundColor; - ann.div.style.backgroundColor = '#ddd'; - }, - annotationMouseOutHandler: function(ann, point, dg, event) { - document.getElementById(nameAnnotation(ann)).style.fontWeight = 'normal'; - ann.div.style.backgroundColor = saveBg; - }, - - pointClickCallback: function(event, p) { - // Check if the point is already annotated. - if (p.annotation) return; - - // If not, add one. - var ann = { - series: p.name, - xval: p.xval, - shortText: num, - text: "Annotation #" + num - }; - var anns = g.annotations(); - anns.push(ann); - g.setAnnotations(anns); - - num++; - } - }); - } - }); diff --git a/gallery/annotations-gviz.js b/gallery/annotations-gviz.js new file mode 100644 index 0000000..a9ce26c --- /dev/null +++ b/gallery/annotations-gviz.js @@ -0,0 +1,42 @@ +Gallery.register( + 'annotations-gviz', + { + name: 'Annotation Gviz (broken)', + title: 'Comparison of Gviz and Dygraphs annotated timelines', + setup : function(parent) { + parent.innerHTML = + "

Google AnnotatedTimeline:

" + + "
" + + "

Dygraph.GVizChart:

" + + "
"; + }, + run: function() { + drawChart = function() { + var data = new google.visualization.DataTable(); + data.addColumn('date', 'Date'); + data.addColumn('number', 'Sold Pencils'); + data.addColumn('string', 'title1'); + data.addColumn('string', 'text1'); + data.addColumn('number', 'Sold Pens'); + data.addColumn('string', 'title2'); + data.addColumn('string', 'text2'); + data.addRows([ + [new Date(2008, 1 ,1), 30000, undefined, undefined, 40645, undefined, undefined], + [new Date(2008, 1 ,2), 14045, undefined, undefined, 20374, undefined, undefined], + [new Date(2008, 1 ,3), 55022, undefined, undefined, 50766, undefined, undefined], + [new Date(2008, 1 ,4), 75284, undefined, undefined, 14334, 'Out of Stock','Ran out of stock on pens at 4pm'], + [new Date(2008, 1 ,5), 41476, 'Bought Pens','Bought 200k pens', 66467, undefined, undefined], + [new Date(2008, 1 ,6), 33322, undefined, undefined, 39463, undefined, undefined] + ]); + + var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('gviz_div')); + chart.draw(data, {displayAnnotations: true}); + + }; + google.setOnLoadCallback(drawChart); + var f = function() { alert("!"); }; + google.setOnLoadCallback(f); + var g = new Dygraph.GVizChart(document.getElementById("dg_div")); + g.draw(data, {displayAnnotations: true, labelsKMB: true}); + } + }); diff --git a/gallery/annotations-native.js b/gallery/annotations-native.js new file mode 100644 index 0000000..8ed7ff9 --- /dev/null +++ b/gallery/annotations-native.js @@ -0,0 +1,36 @@ +Gallery.register( + 'annotations-native', + { + name: 'Annotations with Native format', + setup: function(parent) { + parent.innerHTML = + "

This test demonstrates how annotations can be used with " + + "native-format data.

" + + "
"; + }, + run: function() { + g = new Dygraph( + document.getElementById("demodiv"), + [ + [ new Date("2011/11/01"), 100 ], + [ new Date("2011/11/02"), 200 ], + [ new Date("2011/11/03"), 300 ], + [ new Date("2011/11/04"), 100 ], + [ new Date("2011/11/05"), 200 ], + [ new Date("2011/11/06"), 300 ], + [ new Date("2011/11/07"), 200 ], + [ new Date("2011/11/08"), 100 ] + ], + { + labels: [ 'Date', 'Value' ] + } + ); + + g.setAnnotations([{ + series: 'Value', + x: Date.parse('2011/11/04'), + shortText: 'M', + text: 'Marker' + }]); + } +}); diff --git a/gallery/annotations.js b/gallery/annotations.js new file mode 100644 index 0000000..e0e0319 --- /dev/null +++ b/gallery/annotations.js @@ -0,0 +1,152 @@ +Gallery.register( + 'annotations', + { + name: 'Annotations', + title: 'Dynamic Annotations Demo', + setup: function(parent) { + parent.innerHTML = [ + "

Click any point to add an annotation to it or click 'Add Annotation'.

", + "", + "", + "
", + "
", + "
" ].join("\n"); + }, + + run: function() { + var eventDiv = document.getElementById("events"); + function nameAnnotation(ann) { + return "(" + ann.series + ", " + ann.x + ")"; + } + + g = new Dygraph( + document.getElementById("g_div"), + function() { + var zp = function(x) { if (x < 10) return "0"+x; else return x; }; + var r = "date,parabola,line,another line,sine wave\n"; + for (var i=1; i<=31; i++) { + r += "200610" + zp(i); + r += "," + 10*(i*(31-i)); + r += "," + 10*(8*i); + r += "," + 10*(250 - 8*i); + r += "," + 10*(125 + 125 * Math.sin(0.3*i)); + r += "\n"; + } + return r; + }, + { + rollPeriod: 1, + showRoller: true, + width: 480, + height: 320, + drawCallback: function(g) { + var ann = g.annotations(); + var html = ""; + for (var i = 0; i < ann.length; i++) { + var name = nameAnnotation(ann[i]); + html += "" + html += name + ": " + (ann[i].shortText || '(icon)') + html += " -> " + ann[i].text + "
"; + } + document.getElementById("list").innerHTML = html; + } + } + ); + + var last_ann = 0; + annotations = []; + for (var x = 10; x < 15; x += 2) { + annotations.push( { + series: 'sine wave', + x: "200610" + x, + shortText: x, + text: 'Stock Market Crash ' + x + } ); + last_ann = x; + } + annotations.push( { + series: 'another line', + x: "20061013", + icon: 'images/dollar.png', + width: 18, + height: 23, + tickHeight: 4, + text: 'Another one', + cssClass: 'annotation', + clickHandler: function() { + eventDiv.innerHTML += "special handler
"; + } + } ); + g.setAnnotations(annotations); + + document.getElementById('add').onclick = function() { + var x = last_ann + 2; + var annnotations = g.annotations(); + annotations.push( { + series: 'line', + x: "200610" + x, + shortText: x, + text: 'Line ' + x, + tickHeight: 10 + } ); + last_ann = x; + g.setAnnotations(annotations); + } + + var bottom = document.getElementById('bottom'); + + bottom.onclick = function() { + var to_bottom = bottom.textContent == 'Shove to bottom'; + + var anns = g.annotations(); + for (var i = 0; i < anns.length; i++) { + anns[i].attachAtBottom = to_bottom; + } + g.setAnnotations(anns); + + if (to_bottom) { + bottom.textContent = 'Lift back up'; + } else { + bottom.textContent = 'Shove to bottom'; + } + } + + var saveBg = ''; + var num = 0; + g.updateOptions( { + annotationClickHandler: function(ann, point, dg, event) { + eventDiv.innerHTML += "click: " + nameAnnotation(ann) + "
"; + }, + annotationDblClickHandler: function(ann, point, dg, event) { + eventDiv.innerHTML += "dblclick: " + nameAnnotation(ann) + "
"; + }, + annotationMouseOverHandler: function(ann, point, dg, event) { + document.getElementById(nameAnnotation(ann)).style.fontWeight = 'bold'; + saveBg = ann.div.style.backgroundColor; + ann.div.style.backgroundColor = '#ddd'; + }, + annotationMouseOutHandler: function(ann, point, dg, event) { + document.getElementById(nameAnnotation(ann)).style.fontWeight = 'normal'; + ann.div.style.backgroundColor = saveBg; + }, + + pointClickCallback: function(event, p) { + // Check if the point is already annotated. + if (p.annotation) return; + + // If not, add one. + var ann = { + series: p.name, + xval: p.xval, + shortText: num, + text: "Annotation #" + num + }; + var anns = g.annotations(); + anns.push(ann); + g.setAnnotations(anns); + + num++; + } + }); + } + }); diff --git a/gallery/index.html b/gallery/index.html index 311427e..79f86fc 100644 --- a/gallery/index.html +++ b/gallery/index.html @@ -15,7 +15,7 @@ - + @@ -44,8 +44,8 @@ - - + + --> diff --git a/generate-documentation.py b/generate-documentation.py index 0614bef..01dd495 100755 --- a/generate-documentation.py +++ b/generate-documentation.py @@ -30,6 +30,7 @@ docs = json.loads(js) # Go through the tests and find uses of each option. for opt in docs: docs[opt]['tests'] = [] + docs[opt]['gallery'] = [] # This is helpful for differentiating uses of options like 'width' and 'height' # from appearances of identically-named options in CSS. @@ -47,20 +48,23 @@ def find_braces(txt): level -= 1 return out -# Find text followed by a colon. These won't all be options, but those that -# have the same name as a Dygraph option probably will be. -prop_re = re.compile(r'\b([a-zA-Z0-9]+) *:') -tests = debug_tests or glob.glob('tests/*.html') -for test_file in tests: - braced_html = find_braces(file(test_file).read()) - if debug_tests: - print braced_html - - ms = re.findall(prop_re, braced_html) - for opt in ms: - if debug_tests: print '\n'.join(ms) - if opt in docs and test_file not in docs[opt]['tests']: - docs[opt]['tests'].append(test_file) +def search_files(type, files): + # Find text followed by a colon. These won't all be options, but those that + # have the same name as a Dygraph option probably will be. + prop_re = re.compile(r'\b([a-zA-Z0-9]+) *:') + for test_file in files: + braced_html = find_braces(file(test_file).read()) + if debug_tests: + print braced_html + + ms = re.findall(prop_re, braced_html) + for opt in ms: + if debug_tests: print '\n'.join(ms) + if opt in docs and test_file not in docs[opt][type]: + docs[opt][type].append(test_file) + +search_files("tests", glob.glob("tests/*.html")) +search_files("gallery", glob.glob("gallery/*.js")) #TODO add grep "Gallery.register\(" if debug_tests: sys.exit(0) @@ -110,10 +114,6 @@ for label in sorted(labels): print '
  • %s\n' % (label, label) print '\n\n\n' -def name(f): - """Takes 'tests/demo.html' -> 'demo'""" - return f.replace('tests/', '').replace('.html', '') - print """

    Options Reference

    @@ -138,6 +138,20 @@ print """

    And, without further ado, here's the complete list of options:

    """ + +def de_tests(f): + """Takes 'tests/demo.html' -> 'demo'""" + return f.replace('tests/', '').replace('.html', '') + +def de_gallery(f): + """Takes 'gallery/demo.js' -> 'demo'""" + return f.replace('gallery/', '').replace('.js', '') + +def urlify_gallery(f): + """Takes 'gallery/demo.js' -> 'demo'""" + return f.replace('gallery/', 'gallery/#g/').replace('.js', '') + + for label in sorted(labels): print '

    %s

    \n' % (label, label) @@ -149,7 +163,14 @@ for label in sorted(labels): examples_html = 'NONE' else: examples_html = ' '.join( - '    %s' % (f, name(f)) for f in tests) + '%s' % (f, de_tests(f)) for f in tests) + + gallery = opt['gallery'] + if not gallery: + gallery_html = 'NONE' + else: + gallery_html = ' '.join( + '%s' % (urlify_gallery(f), de_gallery(f)) for f in gallery) if 'parameters' in opt: parameters = opt['parameters'] @@ -168,13 +189,15 @@ for label in sorted(labels): Type: %(type)s
    %(parameters)s Default: %(default)s
    Examples: %(examples_html)s
    + Gallery: %(gallery_html)s

    """ % { 'name': opt_name, 'type': opt['type'], 'parameters': parameters_html, 'default': opt['default'], 'desc': opt['description'], - 'examples_html': examples_html} + 'examples_html': examples_html, + 'gallery_html': gallery_html} print """ -- 2.7.4