from pyjamas.ui.Button import Button
from pyjamas.ui.HTML import HTML
from pyjamas.ui.HorizontalPanel import HorizontalPanel
from pyjamas.chart.GChart import GChart
from pyjamas.chart import AnnotationLocation
from pyjamas.chart import SymbolType

"""*
*
* In this example, whenever the user clicks on a point, a
* hover widget that allows them to increase or decrease
* the y value of that point appears below the chart.
* <p>
*
* The chart uses <tt>setHoverTouchingEnabled(False)</tt> to
* disable GChart's "auto-select-on-mouseover" feature. This
* assures that, when the user clicks on a point, that point
* remains selected, as required, when their mouse moves
* below the chart to interact with the y-value-changing
* hover widget.<p>
*
* In general, by disabling hover touching in this manner,
* you can make a GChart act much like a single-selection
* listbox, with points playing the role of list items.
* <p>
*
* The screen shot shows what the chart looks like after the
* user clicks on a center bar, and then clicks the
* "Increment Y" button a few times.
*
*
"""

# hover widget that changes y value of selected point
class YChanger (HorizontalPanel):

    def __init__(self, chart):
        self.chart = chart
        HorizontalPanel.__init__(self)
        # y-changing, x,y coordinate displaying, widget
        self.incrementY = Button("Increment Y")
        self.coordinates = HTML(""); # x,y of selected point
        self.decrementY = Button("Decrement Y")
        self.incrementY.addClickListener(self)
        self.decrementY.addClickListener(self)
        self.add(self.incrementY)
        self.add(self.coordinates)
        self.add(self.decrementY)
    
    def onClick(self, sender):
        if sender == self.incrementY:
            self.chart.getTouchedPoint().setY(
                                self.chart.getTouchedPoint().getY() + 1)
        else:
            self.chart.getTouchedPoint().setY(
                                self.chart.getTouchedPoint().getY() - 1)
        self.chart.update()
    
    # The 2 HoverUpdateable interface methods:
    def hoverCleanup(self, hoveredAwayFrom):
        pass
    
    def hoverUpdate(self, hoveredOver):
        # update (x,y) display when they click point
        self.coordinates.setHTML(hoveredOver.getHovertext())
    

class GChartExample21(GChart):
    
    def __init__(self):
        GChart.__init__(self)
        self.setChartSize(300, 300)
        self.setBorderStyle("none")
        """
        * So selection changing requires the user to click
        * (not just mouseover a point). This allows the
        * selection to stay put while user moves to click the
        * y-changing buttons.
        *
        """
        self.setHoverTouchingEnabled(False)
        self.addCurve()
        # make a y-changer pop up when they click a point
        self.getCurve().getSymbol().setHoverWidget(YChanger(self))
        # Configure hover annotation so it appears below chart
        self.getCurve().getSymbol().setHoverAnnotationSymbolType(
                                    SymbolType.ANCHOR_SOUTH)
        self.getCurve().getSymbol().setHoverLocation(AnnotationLocation.SOUTH)
        self.getCurve().getSymbol().setHoverYShift(-30)
        # 3px, external point selection border
        self.getCurve().getSymbol().setHoverSelectionBorderWidth(-3)
        
        # configure curve as a baseline-based bar chart
        self.getCurve().getSymbol().setSymbolType(SymbolType.VBAR_BASELINE_EAST)
        self.getCurve().getSymbol().setModelWidth(1)
        self.getCurve().getSymbol().setBorderWidth(1)
        self.getCurve().getSymbol().setBorderColor("black")
        self.getCurve().getSymbol().setBackgroundColor("blue")
        # add a simple y = 2*x curve
        for iPoint in range(10):
            self.getCurve().addPoint(iPoint, 2*iPoint)