from pyjamas import DOM
from pyjamas import Window
from pyjamas.ui import Event
from pyjamas.ui.Button import Button
from pyjamas.ui.DialogBox import DialogBox
from pyjamas.ui.DockPanel import DockPanel
from pyjamas.ui.FlexTable import FlexTable
from pyjamas.ui import HasHorizontalAlignment
from pyjamas.ui.HorizontalPanel import HorizontalPanel
from pyjamas.ui.ListBox import ListBox
from pyjamas.ui.VerticalPanel import VerticalPanel
from pyjamas.chart.GChart import GChart
from pyjamas.chart import AnnotationLocation
from pyjamas.chart import SymbolType
from pyjamas.chart import TouchedPointUpdateOption
LABEL_COL = 0; # for the label/object pairs
OBJECT_COL = 1; # associated with the property
N_COLS = 2; # editing form
N_SLICES = 5
"""*
* This example displays a pie chart that, when you click on any slice,
* opens a dialog that lets you modify the color, shading pattern, and
* size of of that slice. That dialog also contains "Prev Slice" and "Next
* Slice" buttons that, by invoking GChart's <tt>touch</tt> method,
* programmatically emulate the user sequentially "touching" (selecting)
* slices with their mouse.
*
* <p>
*
* The slice properties dialog in this example is an ordinary GWT modal
* dialog (a <tt>DialogBox</tt> with modal=True, autoHide=True). It self.gets
* GChart to inform it of click events on the chart by implementing the
* standard GWT <tt>ClickHandler</tt> interface, and then passing
* itself to GChart's <tt>addClickHandler</tt> method. The dialog's
* <tt>onClick</tt> method shows itself (via <tt>DialogBox.show</tt>)
* and then uses GChart's <tt>getTouchedPoint</tt> method to self.get a
* reference to the clicked-on slice that it uses to load that slice's
* properties into the form. As the user makes changes via the form,
* they are copied back into the chart and the chart's <tt>update</tt>
* method is invoked to immediately show the changes on the chart.
* <p>
*
* GChart's "currently touched point" (available via
* <tt>getTouchedPoint</tt>) ordinarily moves in lock-step with current
* mouse location, and thus falls short of a True point selection
* capability. This example works around this limitation by exploiting
* the fact that a GWT modal dialog "eats" all mouse events while it is
* open. So, when the modal dialog is opened, the mouse location seen by
* GChart, and hence the "currently touched" point is frozen. This lets
* us use GChart's currently touched point as if it were the "selected"
* point in this example.
*
"""
"""
* A helper class to facilitate property editing via drop-down
* lists in this example (there's nothing GChart-specific here):
"""
class ObjectSelectorDropdownList(ListBox):
def __init__(self, labelObjectPairs):
ListBox.__init__(self)
self.labelObjectPairs = labelObjectPairs
self.setVisibleItemCount(1); # makes it a drop-down list
# add each label as an item on the drop-down list
for i in range(len(labelObjectPairs)):
self.addItem( labelObjectPairs[i][LABEL_COL])
# returns object at given index
def getObject(self, index):
result = self.labelObjectPairs[index][OBJECT_COL]
return result
# returns the currently selected object in the drop-down list
def getSelectedObject(self):
result = self.getObject(self.getSelectedIndex())
return result
# makes given object the selected one (assumes it's on list--once)
def setSelectedObject(self, selectedObject):
for i in range(len(self.labelObjectPairs)):
if selectedObject == self.labelObjectPairs[i][OBJECT_COL]:
self.setSelectedIndex(i)
return
raise IllegalArgumentException(
"selectedObject specified was not found on the labelObjectPairs list.")
# number of label, object pairs
def getNObjects(self):
return len(self.labelObjectPairs)
# class ObjectSelectorDropdownList
#
# holds color information associated with color selection drop-down
class ColorSpec:
def __init__(self, backgroundColor, borderColor):
self.backgroundColor = backgroundColor
self.borderColor =borderColor
# the modal dialog that pops up when they click on a slice to edit it
class SliceEditor(DialogBox):
def __init__(self, chart):
""" DialogBox CSS Style self.settings used with this example for reference:
Note: These simplified CSS styles make the dialog's title bar behave a
little quirkily in IE6 when dragging. For more sophisticated CSS that
fixes this problem (and also provides a more professional look) see the
CSS tab of the DialogBox example in the GWT <a href="xxx"> Showcase of
Features</a> (I just didn't want to copy 5 pages of obscure DialogBox
CSS into what is after all a Client-side GChart example).
.gwt-DialogBox .Caption {
font-size: 18
color: #eef
background: #00f repeat-x 0px -2003px
padding: 4px 4px 4px 8px
cursor: default
border-bottom: 2px solid #008
border-top: 3px solid #448
.gwt-DialogBox .dialogContent {
border: 1px solid #008
background: #ddd
padding: 3px
"""
DialogBox.__init__(self, autoHide=True, modal=True)
self.chart = chart
self.isFirstTime = True
mainPanel = VerticalPanel()
propertyForm = FlexTable()
commandBar = DockPanel()
sliceSwitcher = HorizontalPanel()
self.prevSlice = Button("<Prev Slice", self)
self.nextSlice = Button("Next Slice>", self)
self.closeButton = Button("Close", self)
self.chart.colorSelector.addChangeListener(self)
self.chart.sliceSizeSelector.addChangeListener(self)
self.chart.shadingSelector.addChangeListener(self)
#self.prevSlice.addClickListener(self)
#self.nextSlice.addClickListener(self)
#self.closeButton.addClickListener(self)
# slice properties table (slice color, shading and size)
propertyForm.setSize(3, 2)
propertyForm.setText( 0, 0, "Color:")
propertyForm.setWidget(0, 1, self.chart.colorSelector)
propertyForm.setText( 1, 0, "Shading Pattern:")
propertyForm.setWidget(1, 1, self.chart.shadingSelector)
propertyForm.setText( 2, 0, "Slice Size:")
propertyForm.setWidget(2, 1, self.chart.sliceSizeSelector)
# add additional properties here, if desired
# buttons for changing the selected slice from the form
sliceSwitcher.add(self.prevSlice)
sliceSwitcher.add(self.nextSlice)
commandBar.add(sliceSwitcher, DockPanel.WEST)
commandBar.add(self.closeButton, DockPanel.EAST)
commandBar.setCellHorizontalAlignment(self.closeButton,
HasHorizontalAlignment.ALIGN_RIGHT)
commandBar.setWidth("100%"); # pushes close button to right edge
# create main form and place it in DialogBox
mainPanel.add(propertyForm)
mainPanel.add(commandBar)
self.setWidget(mainPanel); # add the DialogBox' single, defining, widget
def onChange(self, sender):
self.copyFormPropertiesIntoChart(self.chart.getTouchedPoint())
# Changes in slice size can place a different, or no, slice under
# GChart's "current mouse position". Such chart changes "underneath the
# mouse" would normally result in a change in the touched point; the
# TOUCHED_POINT_LOCKED update option keeps that from happening.
self.chart.update(TouchedPointUpdateOption.TOUCHED_POINT_LOCKED)
# loads properties associated with point/slice into form
def copyChartPropertiesIntoForm(self, p):
# dialog title bar caption:
self.setText("Slice %d Properties " % \
self.chart.getCurveIndex(p.getParent()))
self.chart.colorSelector.setSelectedObject(
self.getColorSpec( p.getParent().getSymbol().getBackgroundColor(),
p.getParent().getSymbol().getBorderColor()))
self.chart.shadingSelector.setSelectedObject(
p.getParent().getSymbol().getSymbolType())
sliceSize = round(100*p.getParent().getSymbol().getPieSliceSize())
self.chart.sliceSizeSelector.setSelectedObject( int(sliceSize) )
# saves current form self.settings into associated point/slice of chart
def copyFormPropertiesIntoChart(self, p):
p.getParent().getSymbol().setBackgroundColor(
self.chart.colorSelector.getSelectedObject().backgroundColor)
p.getParent().getSymbol().setBorderColor(
self.chart.colorSelector.getSelectedObject().borderColor)
# selection flips border and background colors
p.getParent().getSymbol().setHoverSelectionBorderColor(
self.chart.colorSelector.getSelectedObject().backgroundColor)
p.getParent().getSymbol().setHoverSelectionBackgroundColor(
self.chart.colorSelector.getSelectedObject().borderColor)
p.getParent().getSymbol().setSymbolType(
self.chart.shadingSelector.getSelectedObject())
sliceSize = int(self.chart.sliceSizeSelector.getSelectedObject())
p.getParent().getSymbol().setPieSliceSize(sliceSize/100.)
# Retrieves an existing ColorSpec object reference, given its colors
def getColorSpec(self, backgroundColor, borderColor):
for i in range(self.chart.colorSelector.getNObjects()):
cs = self.chart.colorSelector.getObject(i)
if (backgroundColor == cs.backgroundColor and
borderColor == cs.borderColor):
return cs
raise IllegalArgumentException(
"Attempt to retrieve a non-existing color combination.")
def onClick(self, sender):
print "onClick", sender
if sender == self.prevSlice:
self.chart.onClickPrevSlice(sender)
elif sender == self.nextSlice:
self.chart.onClickNextSlice(sender)
elif sender == self.closeButton:
self.onClickClose(sender)
else:
self.onClickDefault(sender)
def onClickClose(self, event):
self.hide()
self.chart.touch(None); # clears any selected slice
self.chart.update(TouchedPointUpdateOption.TOUCHED_POINT_LOCKED)
def onClickDefault(self, sender):
# don't shown property editor if they clicked on nothing
if None == self.chart.getTouchedPoint():
return
event = DOM.eventGetCurrentEvent()
# load properties of clicked-on slice into form
self.copyChartPropertiesIntoForm(self.chart.getTouchedPoint())
if self.isFirstTime:
# initially put upper left corner wherever they clicked...
self.setPopupPosition(
Window.getScrollLeft()+ DOM.eventGetClientX(event),
Window.getScrollTop() + DOM.eventGetClientX(event))
self.show()
self.isFirstTime = False
else:
# ...thereafter, just stay whereever they dragged it to
self.show()
class GChartExample20 (GChart):
# the single dialog box that self.gets used to edit any slice
def __init__(self):
GChart.__init__(self)
# labels/values for color selection drop-down list:
self.colorSelector = ObjectSelectorDropdownList( \
[["Red", ColorSpec("red", "#F88")],
["Fuchsia", ColorSpec("#F0F", "#F8F")],
["Lime", ColorSpec("#0F0", "#8F8")],
["Blue", ColorSpec("#00F", "#88F")],
["Aqua", ColorSpec("#0FF", "#8FF")],
["Maroon", ColorSpec("#800", "#C88")],
["Purple", ColorSpec("#808", "#C8C")],
["Green", ColorSpec("#080", "#8C8")],
["Olive", ColorSpec("#880", "#CC8")],
["Navy", ColorSpec("#008", "#88C")],
["Teal", ColorSpec("#088", "#8CC")]])
# labels/values for slice shading pattern drop-down list
self.shadingSelector = ObjectSelectorDropdownList( \
[["Vertical shading", SymbolType.PIE_SLICE_VERTICAL_SHADING],
["Horizontal shading", SymbolType.PIE_SLICE_HORIZONTAL_SHADING],
["Optimal shading", SymbolType.PIE_SLICE_OPTIMAL_SHADING]])
# labels/values for pie slice size (as percentage) drop-down list
self.sliceSizeSelector = ObjectSelectorDropdownList([
["0%", int(0)],
["5%", int(5)],
["10%", int(10)],
["15%", int(15)],
["20%", int(20)],
["25%", int(25)],
["30%", int(30)],
["35%", int(35)],
["40%", int(40)],
["45%", int(45)],
["50%", int(50)],
["55%", int(55)],
["60%", int(60)],
["65%", int(65)],
["70%", int(70)],
["75%", int(75)],
["80%", int(80)],
["85%", int(85)],
["90%", int(90)],
["95%", int(95)],
["100%", int(100)]])
self.theSliceEditor = SliceEditor(self)
SOURCE_CODE_LINK = \
"<a href='GChartExample20.txt' target='_blank'>Source code</a>"
self.setChartSize(100, 100)
self.setBorderStyle("none")
self.setChartTitle("<big>Click pie to edit!</big>")
self.setChartTitleThickness(20)
self.setChartFootnotes(SOURCE_CODE_LINK)
self.setChartFootnotesThickness(20)
# initial slice sizes
initSliceSize = [0.3, 0.2, 0.1, 0.2, 0.2]
self.addClickListener(self.theSliceEditor)
for iCurve in range(N_SLICES):
self.addCurve()
self.getCurve().getSymbol().setBorderWidth(1)
self.getCurve().getSymbol().setFillThickness(4)
self.getCurve().getSymbol().setFillSpacing(4)
self.getCurve().getSymbol().setHoverLocation(
AnnotationLocation.ON_PIE_ARC)
self.getCurve().getSymbol().setBorderColor(
self.colorSelector.getObject(iCurve).borderColor)
self.getCurve().getSymbol().setBackgroundColor(
self.colorSelector.getObject(iCurve).backgroundColor)
# selection flips border and background colors
self.getCurve().getSymbol().setHoverSelectionBackgroundColor(
self.colorSelector.getObject(iCurve).borderColor)
self.getCurve().getSymbol().setHoverSelectionBorderColor(
self.colorSelector.getObject(iCurve).backgroundColor)
self.getCurve().getSymbol().setSymbolType(
SymbolType.PIE_SLICE_HORIZONTAL_SHADING)
self.getCurve().getSymbol().setPieSliceSize(initSliceSize[iCurve])
self.getCurve().getSymbol().setModelHeight(1.0); #diameter = yMax-yMin
self.getCurve().getSymbol().setModelWidth(0)
self.getCurve().addPoint(0.5, 0.5); # pie centered in world units
self.getXAxis().setAxisMin(0); # so 0.5,0.5 (see above) centers pie
self.getXAxis().setAxisMax(1)
self.getYAxis().setAxisMin(0)
self.getYAxis().setAxisMax(1)
self.getXAxis().setHasGridlines(False); # hides axes, ticks, etc.
self.getXAxis().setAxisVisible(False); # (not needed for the pie)
self.getXAxis().setTickCount(0)
self.getYAxis().setHasGridlines(False)
self.getYAxis().setAxisVisible(False)
self.getYAxis().setTickCount(0)
self.update()
def onClickPrevSlice(self, event):
iCurve = self.getCurveIndex(self.getTouchedCurve())
if (iCurve == 0) :
iPrev = self.getNCurves()-1
else:
iPrev = (iCurve-1)
self.touch(self.getCurve(iPrev).getPoint(0))
self.theSliceEditor.copyChartPropertiesIntoForm(self.getTouchedPoint())
self.update(TouchedPointUpdateOption.TOUCHED_POINT_LOCKED)
def onClickNextSlice(self, event):
iCurve = self.getCurveIndex(self.getTouchedCurve())
if (iCurve+1 == self.getNCurves()) :
iNext = 0
else:
iNext = (iCurve+1)
self.touch(self.getCurve(iNext).getPoint(0))
self.theSliceEditor.copyChartPropertiesIntoForm(self.getTouchedPoint())
self.update(TouchedPointUpdateOption.TOUCHED_POINT_LOCKED)
|