charts-interactive-annotations

charts-interactive-annotations

YUI.add('charts-interactive-annotations', function (Y) {
    /**
     * Allows for the creation of annotations for a chart.
     *
     * @module charts-interactive-annotations
     */
        /**
         * Creates a marker that can be used as an annotation.
         *
         * @class AnnotationMarker
         * @constructor
         */
        Y.AnnotationMarker = function() {
            Y.AnnotationMarker.superclass.constructor.apply(this, arguments);
        };
        Y.AnnotationMarker.NAME = "annotationMarker";
        Y.AnnotationMarker.ATTRS = Y.Shape.ATTRS;
        Y.extend(Y.AnnotationMarker, Y.Shape, {
            /**
             * Draws the marker.
             *
             * @method _draw
             * @private
             */
            _draw: function() {
                var w = this.get("width"),
                    h = this.get("height");
                this.clear();
                this.moveTo(0,4*h/9)
                .lineTo(0, h/3)
                .curveTo(w/3,0,2*w/3,0,w,h/3)
                .lineTo(w, 4*h/9)
                .curveTo(9*w/10,5*h/9,2*w/3,2*h/3,w/2,h)
                .curveTo(w/3, 2*h/3, w/10, 5*h/9, 0, 4*h/9)
                .end();
            }
        });

        /**
         * Creates annotations on a chart.
         *
         * @class ChartInteractiveAnnotations
         * @constructor
         */
        Y.ChartInteractiveAnnotations = Y.Base.create("chartInteractivAnnotations", Y.Base, [Y.Renderer], {
            initializer: function() {
                this.setAnnotations();
            },

            /**
             * Creates annotations and adds them to the chart.
             *
             * @method _createAnnotation
             */
            _createAnnotation: function(e) {
                var addAnnotation = this.get("addAnnotationMethod"),
                    className = Y.ClassNameManager.getClassName("chartInteractivAnnotation");
                    series = e.series,
                    valueItem = e.valueItem,
                    categoryItem = e.categoryItem,    
                    type = e.type,
                    cb = this.chart.get("contentBox"),
                    markerNode = e.currentTarget,
                    strArr = markerNode.getAttribute("id").split("_"),
                    index = strArr.pop(),
                    seriesIndex = strArr.pop(),
                    series = this.chart.getSeries.apply(this.chart, [parseInt(seriesIndex, 10)]),
                    items = this.chart.getSeriesItems.apply(this.chart, [series, index]),
                    isTouch = e && e.hasOwnProperty("changedTouches"),
                    pageX = isTouch ? e.changedTouches[0].pageX : e.pageX,
                    pageY = isTouch ? e.changedTouches[0].pageY : e.pageY,
                    xy = this.graphic.getXY(),
                    x = pageX - xy[0],
                    y = pageY - xy[1],
                    annotation = addAnnotation.apply(this, [x, y, className, className + "_" + seriesIndex + "_" + index]);
                annotation.on("click", function(e) {
                    var key,
                        str = "============Category============";
                    for(key in items.category) {
                        str = str + "\n" + key + ": " + items.category[key];
                    }
                    str = str + "\n" + "============Values============";
                    for(key in items.value) {
                        str = str + "\n" + key + ": " + items.value[key];
                    }
                    alert(str);
                });
                this.graphic._redraw();
            },
    
            /**
             * Creates a shape annotation and adds it to the dom.
             *
             * @method _addShapeAnnotation
             * @param {Number} x The x-coordinate for the annotation.
             * @param {Number} y The y-coordinate for the annotation.
             * @param {String} className The className for the annotation.
             * @param {String} id The dom id for the annotation.
             * @private
             */        
            _addShapeAnnotation: function(x, y, className, id) {
                var styles = this.get("styles"),
                    shape = this.get("shapeClass"),
                    annotation = this.graphic.addShape({
                       type: shape,
                       x: x,
                       y: y,
                       width: this.get("annotationWidth"),
                       height: this.get("annotationHeight"),
                       id: id,
                       fill: styles.fill,
                       stroke: styles.stroke
                    });
                annotation.addClass(className);
                this._annotations.push(annotation);
                return annotation;
            },


            /**
             * Removes all annotations
             *
             * @method _destroyAnnotations
             * @private
             */
            _destroyAnnotations: function() {
                var annotation;
                if(this._annotations) {
                    while(this._annotations.length > 0) {
                        this._annotations.shift().destroy();
                    }
                }
                this._annotations = [];
            },

            /**
             * Creates annotations on a chart.
             * 
             * @method setAnnotations
             */ 
            setAnnotations: function() { 
                var chart = this.get("chart"),
                    annotationKey,
                    graph,
                    i,
                    item,
                    data;
                if(chart) {
                    this.graph = chart.get("graph");
                    this.graphic = this.graph.get("graphic");
                    this.chart = chart;
                    this.data = chart.get("dataProvider");
                    this._destroyAnnotations();
                }
                if(!this.markerHandle) {
                    this.markerHandle = Y.on(
                        "click",
                        Y.bind(this._createAnnotation, this),
                        ".yui3-seriesmarker"
                    );
                }
            },

            _getDefaultStyles: function() {
                return { 
                   stroke: {
                       weight: 2,
                       color: "#FFFFFF"
                   },
                   fill: {
                    color: "#CE8FFB"
                   }
                };
            }

        }, {
            ATTRS: {
                /**
                 * When the annotations are a shape, this is the class that will be used.
                 *
                 * @attr shapeClass
                 * @type Y.Shape
                 */
                shapeClass: {
                    value: Y.AnnotationMarker
                },

                /**
                 * Width of each annotation
                 * 
                 * @attr annotationWidth
                 * @type Number
                 */
                annotationWidth: {
                    value: 30
                },

                /**
                 * Height of each annotation
                 * 
                 * @attr annotationHeight
                 * @type Number
                 */
                annotationHeight: {
                    value: 45
                },
                /**
                 * Reference to the chart to which the annotations will be added.
                 *
                 * @attr chart
                 * @type Y.Chart
                 */
                chart: {
                    value: null
                },

                /**
                 * Method used for adding an annotation to the chart. By default, it is assumeed that
                 * the annotation is an instance of Y.Shape. If a dom element is being used, you will 
                 * need to override the default method with a method that adds a dom element to the 
                 * graph's contentBox.
                 *
                 * The method's arguments are x, y, className and dom id. 
                 *
                 * @attr addAnnotationMethod
                 * @type Function
                 */
                addAnnotationMethod: {
                    valueFn: function() {
                        return this._addShapeAnnotation;
                    }
                }
            }
    });

}, '@VERSION@', {"requires": ["charts"]});