Ralph Bean avatar Ralph Bean committed f72437e

Got Area, Bar, and Pie charts minimally working.

Comments (0)

Files changed (6)

tw2/jit/__init__.py

 # TODO -- is this the right way todo this?
 jit_base = "static/Jit-2.0.0a"
 
-from widgets import (AreaChart)
+from widgets import (AreaChart, BarChart, PieChart)
 
 """
 from widgets import (Button, CheckBox, FieldSet, FileField, Form, HiddenField, ImageButton,

tw2/jit/defaults.py

+# This module just contains some of the more lengthy constants used in
+# widgets.py that would otherwise clutter that file.
+AreaChartJSONDefaults = {
+    'label': ['label A', 'label B', 'label C', 'label D'],
+    'values': [
+        {
+            'label': 'date A',
+            'values': [20, 40, 15, 5]
+        },
+        {
+            'label': 'date B',
+            'values': [30, 10, 45, 10]
+        },
+        {
+            'label': 'date E',
+            'values': [38, 20, 35, 17]
+        },
+        {
+            'label': 'date F',
+            'values': [58, 10, 35, 32]
+        },
+        {
+            'label': 'date D',
+            'values': [55, 60, 34, 38]
+        },
+        {
+            'label': 'date C',
+            'values': [26, 40, 25, 40]
+        }
+    ]
+}
+BarChartJSONDefaults = AreaChartJSONDefaults
+PieChartJSONDefaults = AreaChartJSONDefaults

tw2/jit/templates/areachart.html

-<div xmlns:py="http://genshi.edgewall.org/">
-
-<div py:attrs="w.attrs"/>
-
-<script type="text/javascript">
-var obj = ${w.attrs};
-alert(obj);
+<div>
+<div style="width: $w.width; height: $w.height;" id="$w.compound_id"></div>
+<script language="javascript" type="text/javascript">
+(function () {
+    var areaChart = new $$jit.AreaChart($w.config);
+    areaChart.loadJSON($w.json);
+})();
 </script>
-
 </div>

tw2/jit/templates/barchart.html

+<div>
+<div style="width: $w.width; height: $w.height;" id="$w.compound_id"></div>
+<script language="javascript" type="text/javascript">
+(function() {
+    var barChart = new $$jit.BarChart($w.config);
+    barChart.loadJSON($w.json);
+})();
+</script>
+</div>

tw2/jit/templates/piechart.html

+<div>
+<div style="width: $w.width; height: $w.height;" id="$w.compound_id"></div>
+<script language="javascript" type="text/javascript">
+(function () {
+    var pieChart = new $$jit.PieChart($w.config);
+    pieChart.loadJSON($w.json);
+})();
+</script>
+</div>

tw2/jit/widgets.py

 import tw2.core as twc, re, itertools, webob, cgi
+from tw2.core.resources import JSLink, CSSLink
+from tw2.jit import jit_base
+from simplejson.encoder import JSONEncoder
+from tw2.jit.defaults import AreaChartJSONDefaults
+from tw2.jit.defaults import BarChartJSONDefaults
+from tw2.jit.defaults import PieChartJSONDefaults
 
-#--
-# Basic Fields
-#--
+encoder = JSONEncoder()
+
+jit_yc_js = JSLink(modname=__name__, filename="%s/jit-yc.js" % jit_base)
+jit_js = JSLink(modname=__name__, filename="%s/jit.js" % jit_base)
+
 class JitWidget(twc.Widget):
-    name = twc.Variable(
+    injectInto = twc.Variable(
         description='dom name',
         request_local=False,
         attribute=True,
         default=property(lambda s: s.compound_id))
+    width = twc.Param(
+        description='(string) width of the widget',
+        request_local=False,
+        attribute=True,
+        default='300px')
+    height = twc.Param(
+        description='(string) height of the widget',
+        request_local=False,
+        attribute=True,
+        default='300px')
+     
+class AreaChart(JitWidget):
+    # TODO -- redo this with mako to have an example of either
+    template = "genshi:tw2.jit.templates.areachart"
 
-class AreaChart(JitWidget):
-    template = "tw2.jit.templates.areachart"
+    # TODO -- what's the right way to choose minified or not?
+    #resources = [jit_yc_js]
+    resources = [jit_js]
+
     animate = twc.Param(
         '(boolean) Whether to add animated transitions ' +
         'when filtering/restoring stacks',
         default=True, attribute=True, request_local=False)
     offset = twc.Param(
-        '(number) Adds margin between the visualziation ' + 
+        '(number) Adds margin between the visualiziation ' + 
         'and the canvas.',
         default=25, attribute=True, request_local=False)
     labelOffset = twc.Param(
     restoreOnRightClick = twc.Param(
         '(boolean) Show all stacks by right clicking.',
         default=True, attribute=True, request_local=False)
+    Label = twc.Param(
+        '(dict) Of the form Options.Label in the jit docs.',
+        default={
+            'type': 'HTML',
+            'size': 9,  
+            'family': 'Arial',  
+            'color': 'black',
+        }, attribute=True, request_local=False)
+    # TODO -- this doesn't seem to work at all :(
+    Tips = twc.Param(
+        '(dict) Of the form of Options.Tips in the jit docs.',
+        default={
+            'enable' : True,  
+            'type' : 'auto',  
+            'offsetX' : 20,  
+            'offsetY' : 20,  
+    # TODO -- how do we go about this?
+    #        onShow: JSFuncCall('$.empty'), 
+    #        onHide: JSFuncCall('alert("onHide!");'),
+        }, attribute=True, request_local=False)
+    json = twc.Param(
+        '(dict) Data to send to the widget.',
+        default=AreaChartJSONDefaults, attribute=True, request_local=False)
 
-#BarChart
+    config = twc.Variable( 'jsonified version of other attrs.', default={} )
+
+    def prepare(self):
+        super(AreaChart, self).prepare()
+        self.config = encoder.encode(self.attrs)
+        self.json = encoder.encode(self.json)
+
 class BarChart(JitWidget):
-    pass
-#PieChart
+    # TODO -- redo this with mako to have an example of either
+    template = "genshi:tw2.jit.templates.barchart"
+
+    # TODO -- what's the right way to choose minified or not?
+    #resources = [jit_yc_js]
+    resources = [jit_js]
+
+    animate = twc.Param(
+        '(boolean) Whether to add animated transitions ' +
+        'when filtering/restoring stacks',
+        default=True, attribute=True, request_local=False)
+    offset = twc.Param(
+        '(number) Adds margin between the visualiziation ' +
+        'and the canvas.',
+        default=25, attribute=True, request_local=False)
+    labelOffset = twc.Param(
+        '(number) Adds margin between the label and the ' +
+        'default place where it should be drawn.',
+        default=3, attribute=True, request_local=False)
+    barsOffset = twc.Param(
+        '(number) Separation between bars.',
+        default=0, attribute=True, request_local=False)
+    type = twc.Param(
+        '(string) Stack style.  Possible values are ' +
+        '"stacked", "stacked:gradient" to add gradients.',
+        default='stacked', attribute=True, request_local=False)
+    hoveredColor = twc.Param(
+        '(string) Sets the selected color for a hovered bar stack.',
+        default='#9fd4ff', attribute=True, request_local=False)
+    orientation = twc.Param(
+        '(string) Sets the direction of the bars.  Possible ' +
+        'options are "vertical" and "horizontal".',
+        default='horizontal', attribute=True, request_local=False)
+    showAggregates = twc.Param(
+        '(boolean) Display the sum of the values of the ' +
+        'different stacks.',
+        default=True, attribute=True, request_local=False)
+    showLabels = twc.Param(
+        '(boolean) Display the name of the slots.',
+        default=True, attribute=True, request_local=False)
+    Label = twc.Param(
+        '(dict) Of the form Options.Label in the jit docs.',
+        default={
+            'type': 'HTML',
+            'size': 9,
+            'family': 'Arial',
+            'color': 'black',
+        }, attribute=True, request_local=False)
+    # TODO -- this doesn't seem to work at all :(
+    Tips = twc.Param(
+        '(dict) Of the form of Options.Tips in the jit docs.',
+        default={
+            'enable' : True,
+            'type' : 'auto',
+            'offsetX' : 20,
+            'offsetY' : 20,
+    # TODO -- how do we go about this?
+    #        onShow: JSFuncCall('$.empty'), 
+    #        onHide: JSFuncCall('alert("onHide!");'),
+        }, attribute=True, request_local=False)
+    json = twc.Param(
+        '(dict) Data to send to the widget.',
+        default=BarChartJSONDefaults, attribute=True, request_local=False)
+
+    config = twc.Variable( 'jsonified version of other attrs.', default={} )
+
+    def prepare(self):
+        super(BarChart, self).prepare()
+        self.config = encoder.encode(self.attrs)
+        self.json = encoder.encode(self.json)
 class PieChart(JitWidget):
-    pass
+    # TODO -- redo this with mako to have an example of either
+    template = "genshi:tw2.jit.templates.piechart"
+
+    # TODO -- what's the right way to choose minified or not?
+    #resources = [jit_yc_js]
+    resources = [jit_js]
+
+    animate = twc.Param(
+        '(boolean) Whether to add animated transitions ' +
+        'when filtering/restoring stacks',
+        default=True, attribute=True, request_local=False)
+    offset = twc.Param(
+        '(number) Adds margin between the visualiziation ' +
+        'and the canvas.',
+        default=25, attribute=True, request_local=False)
+    sliceOffset = twc.Param(
+        '(number) Separation between the center of the ' +
+        'canvas and each pie slice.',
+        default=0, attribute=True, request_local=False)
+    labelOffset = twc.Param(
+        '(number) Adds margin between the label and the ' +
+        'default place where it should be drawn.',
+        default=3, attribute=True, request_local=False)
+    type = twc.Param(
+        '(string) Stack style.  Possible values are ' +
+        '"stacked", "stacked:gradient" to add gradients.',
+        default='stacked', attribute=True, request_local=False)
+    hoveredColor = twc.Param(
+        '(string) Sets the selected color for a hovered pie stack.',
+        default='#9fd4ff', attribute=True, request_local=False)
+    showLabels = twc.Param(
+        '(boolean) Display the name of the slots.',
+        default=True, attribute=True, request_local=False)
+    resizeLabels = twc.Param(
+        '(boolean|number) Resize the pie labels according to ' +
+        'their stacked values.  Set a number for resizeLabels ' +
+        'to set a font size minimum.',
+        default=False, attribute=True, request_local=False)
+    updateHeights = twc.Param(
+        '(boolean) Only for mono-valued (most common) pie ' +
+        'charts.  Resize the height of the pie slices ' +
+        'according to their current values.',
+        default=False, attribute=True, request_local=False)
+    Label = twc.Param(
+        '(dict) Of the form Options.Label in the jit docs.',
+        default={
+            'type': 'HTML',
+            'size': 9,
+            'family': 'Arial',
+            'color': 'black',
+        }, attribute=True, request_local=False)
+    # TODO -- this doesn't seem to work at all :(
+    Tips = twc.Param(
+        '(dict) Of the form of Options.Tips in the jit docs.',
+        default={
+            'enable' : True,
+            'type' : 'auto',
+            'offsetX' : 20,
+            'offsetY' : 20,
+    # TODO -- how do we go about this?
+    #        onShow: JSFuncCall('$.empty'), 
+    #        onHide: JSFuncCall('alert("onHide!");'),
+        }, attribute=True, request_local=False)
+    json = twc.Param(
+        '(dict) Data to send to the widget.',
+        default=PieChartJSONDefaults, attribute=True, request_local=False)
+
+    config = twc.Variable( 'jsonified version of other attrs.', default={} )
+
+    def prepare(self):
+        super(PieChart, self).prepare()
+        self.config = encoder.encode(self.attrs)
+        self.json = encoder.encode(self.json)
+
 #TreeMap
 class TreeMap(JitWidget):
     pass
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.