123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>The source code</title>
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
- <style type="text/css">
- .highlight { display: block; background-color: #ddd; }
- </style>
- <script type="text/javascript">
- function highlight() {
- document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
- }
- </script>
- </head>
- <body onload="prettyPrint(); highlight();">
- <pre class="prettyprint lang-js"><span id='Ext-chart-series-Series'>/**
- </span> * @class Ext.chart.series.Series
- *
- * Series is the abstract class containing the common logic to all chart series. Series includes
- * methods from Labels, Highlights, Tips and Callouts mixins. This class implements the logic of handling
- * mouse events, animating, hiding, showing all elements and returning the color of the series to be used as a legend item.
- *
- * ## Listeners
- *
- * The series class supports listeners via the Observable syntax. Some of these listeners are:
- *
- * - `itemmouseup` When the user interacts with a marker.
- * - `itemmousedown` When the user interacts with a marker.
- * - `itemmousemove` When the user iteracts with a marker.
- * - `afterrender` Will be triggered when the animation ends or when the series has been rendered completely.
- *
- * For example:
- *
- * series: [{
- * type: 'column',
- * axis: 'left',
- * listeners: {
- * 'afterrender': function() {
- * console('afterrender');
- * }
- * },
- * xField: 'category',
- * yField: 'data1'
- * }]
- */
- Ext.define('Ext.chart.series.Series', {
- /* Begin Definitions */
- mixins: {
- observable: 'Ext.util.Observable',
- labels: 'Ext.chart.Label',
- highlights: 'Ext.chart.Highlight',
- tips: 'Ext.chart.Tip',
- callouts: 'Ext.chart.Callout'
- },
- /* End Definitions */
- <span id='Ext-chart-series-Series-cfg-highlight'> /**
- </span> * @cfg {Boolean/Object} highlight
- * If set to `true` it will highlight the markers or the series when hovering
- * with the mouse. This parameter can also be an object with the same style
- * properties you would apply to a {@link Ext.draw.Sprite} to apply custom
- * styles to markers and series.
- */
- <span id='Ext-chart-series-Series-cfg-tips'> /**
- </span> * @cfg {Object} tips
- * Add tooltips to the visualization's markers. The options for the tips are the
- * same configuration used with {@link Ext.tip.ToolTip}. For example:
- *
- * tips: {
- * trackMouse: true,
- * width: 140,
- * height: 28,
- * renderer: function(storeItem, item) {
- * this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' views');
- * }
- * },
- */
- <span id='Ext-chart-series-Series-cfg-type'> /**
- </span> * @cfg {String} type
- * The type of series. Set in subclasses.
- */
- type: null,
- <span id='Ext-chart-series-Series-cfg-title'> /**
- </span> * @cfg {String} title
- * The human-readable name of the series.
- */
- title: null,
- <span id='Ext-chart-series-Series-cfg-showInLegend'> /**
- </span> * @cfg {Boolean} showInLegend
- * Whether to show this series in the legend.
- */
- showInLegend: true,
- <span id='Ext-chart-series-Series-cfg-renderer'> /**
- </span> * @cfg {Function} renderer
- * A function that can be overridden to set custom styling properties to each rendered element.
- * Passes in (sprite, record, attributes, index, store) to the function.
- */
- renderer: function(sprite, record, attributes, index, store) {
- return attributes;
- },
- <span id='Ext-chart-series-Series-cfg-shadowAttributes'> /**
- </span> * @cfg {Array} shadowAttributes
- * An array with shadow attributes
- */
- shadowAttributes: null,
- // @private animating flag
- animating: false,
- <span id='Ext-chart-series-Series-cfg-listeners'> /**
- </span> * @cfg {Object} listeners
- * An (optional) object with event callbacks. All event callbacks get the target *item* as first parameter. The callback functions are:
- *
- * - itemmouseover
- * - itemmouseout
- * - itemmousedown
- * - itemmouseup
- */
- constructor: function(config) {
- var me = this;
- if (config) {
- Ext.apply(me, config);
- }
- me.shadowGroups = [];
- me.mixins.labels.constructor.call(me, config);
- me.mixins.highlights.constructor.call(me, config);
- me.mixins.tips.constructor.call(me, config);
- me.mixins.callouts.constructor.call(me, config);
- me.addEvents({
- scope: me,
- itemmouseover: true,
- itemmouseout: true,
- itemmousedown: true,
- itemmouseup: true,
- mouseleave: true,
- afterdraw: true,
- <span id='Ext-chart-series-Series-event-titlechange'> /**
- </span> * @event titlechange
- * Fires when the series title is changed via {@link #setTitle}.
- * @param {String} title The new title value
- * @param {Number} index The index in the collection of titles
- */
- titlechange: true
- });
- me.mixins.observable.constructor.call(me, config);
- me.on({
- scope: me,
- itemmouseover: me.onItemMouseOver,
- itemmouseout: me.onItemMouseOut,
- mouseleave: me.onMouseLeave
- });
-
- if (me.style) {
- Ext.apply(me.seriesStyle, me.style);
- }
- },
-
- <span id='Ext-chart-series-Series-method-eachRecord'> /**
- </span> * Iterate over each of the records for this series. The default implementation simply iterates
- * through the entire data store, but individual series implementations can override this to
- * provide custom handling, e.g. adding/removing records.
- * @param {Function} fn The function to execute for each record.
- * @param {Object} scope Scope for the fn.
- */
- eachRecord: function(fn, scope) {
- var chart = this.chart;
- (chart.substore || chart.store).each(fn, scope);
- },
- <span id='Ext-chart-series-Series-method-getRecordCount'> /**
- </span> * Return the number of records being displayed in this series. Defaults to the number of
- * records in the store; individual series implementations can override to provide custom handling.
- */
- getRecordCount: function() {
- var chart = this.chart,
- store = chart.substore || chart.store;
- return store ? store.getCount() : 0;
- },
- <span id='Ext-chart-series-Series-method-isExcluded'> /**
- </span> * Determines whether the series item at the given index has been excluded, i.e. toggled off in the legend.
- * @param index
- */
- isExcluded: function(index) {
- var excludes = this.__excludes;
- return !!(excludes && excludes[index]);
- },
- // @private set the bbox and clipBox for the series
- setBBox: function(noGutter) {
- var me = this,
- chart = me.chart,
- chartBBox = chart.chartBBox,
- gutterX = noGutter ? 0 : chart.maxGutter[0],
- gutterY = noGutter ? 0 : chart.maxGutter[1],
- clipBox, bbox;
- clipBox = {
- x: chartBBox.x,
- y: chartBBox.y,
- width: chartBBox.width,
- height: chartBBox.height
- };
- me.clipBox = clipBox;
- bbox = {
- x: (clipBox.x + gutterX) - (chart.zoom.x * chart.zoom.width),
- y: (clipBox.y + gutterY) - (chart.zoom.y * chart.zoom.height),
- width: (clipBox.width - (gutterX * 2)) * chart.zoom.width,
- height: (clipBox.height - (gutterY * 2)) * chart.zoom.height
- };
- me.bbox = bbox;
- },
- // @private set the animation for the sprite
- onAnimate: function(sprite, attr) {
- var me = this;
- sprite.stopAnimation();
- if (me.animating) {
- return sprite.animate(Ext.applyIf(attr, me.chart.animate));
- } else {
- me.animating = true;
- return sprite.animate(Ext.apply(Ext.applyIf(attr, me.chart.animate), {
- listeners: {
- 'afteranimate': function() {
- me.animating = false;
- me.fireEvent('afterrender');
- }
- }
- }));
- }
- },
- // @private return the gutter.
- getGutters: function() {
- return [0, 0];
- },
- // @private wrapper for the itemmouseover event.
- onItemMouseOver: function(item) {
- var me = this;
- if (item.series === me) {
- if (me.highlight) {
- me.highlightItem(item);
- }
- if (me.tooltip) {
- me.showTip(item);
- }
- }
- },
- // @private wrapper for the itemmouseout event.
- onItemMouseOut: function(item) {
- var me = this;
- if (item.series === me) {
- me.unHighlightItem();
- if (me.tooltip) {
- me.hideTip(item);
- }
- }
- },
- // @private wrapper for the mouseleave event.
- onMouseLeave: function() {
- var me = this;
- me.unHighlightItem();
- if (me.tooltip) {
- me.hideTip();
- }
- },
- <span id='Ext-chart-series-Series-method-getItemForPoint'> /**
- </span> * For a given x/y point relative to the Surface, find a corresponding item from this
- * series, if any.
- * @param {Number} x
- * @param {Number} y
- * @return {Object} An object describing the item, or null if there is no matching item.
- * The exact contents of this object will vary by series type, but should always contain the following:
- * @return {Ext.chart.series.Series} return.series the Series object to which the item belongs
- * @return {Object} return.value the value(s) of the item's data point
- * @return {Array} return.point the x/y coordinates relative to the chart box of a single point
- * for this data item, which can be used as e.g. a tooltip anchor point.
- * @return {Ext.draw.Sprite} return.sprite the item's rendering Sprite.
- */
- getItemForPoint: function(x, y) {
- //if there are no items to query just return null.
- if (!this.items || !this.items.length || this.seriesIsHidden) {
- return null;
- }
- var me = this,
- items = me.items,
- bbox = me.bbox,
- item, i, ln;
- // Check bounds
- if (!Ext.draw.Draw.withinBox(x, y, bbox)) {
- return null;
- }
- for (i = 0, ln = items.length; i < ln; i++) {
- if (items[i] && this.isItemInPoint(x, y, items[i], i)) {
- return items[i];
- }
- }
- return null;
- },
- isItemInPoint: function(x, y, item, i) {
- return false;
- },
- <span id='Ext-chart-series-Series-method-hideAll'> /**
- </span> * Hides all the elements in the series.
- */
- hideAll: function() {
- var me = this,
- items = me.items,
- item, len, i, j, l, sprite, shadows;
- me.seriesIsHidden = true;
- me._prevShowMarkers = me.showMarkers;
- me.showMarkers = false;
- //hide all labels
- me.hideLabels(0);
- //hide all sprites
- for (i = 0, len = items.length; i < len; i++) {
- item = items[i];
- sprite = item.sprite;
- if (sprite) {
- sprite.setAttributes({
- hidden: true
- }, true);
- }
- if (sprite && sprite.shadows) {
- shadows = sprite.shadows;
- for (j = 0, l = shadows.length; j < l; ++j) {
- shadows[j].setAttributes({
- hidden: true
- }, true);
- }
- }
- }
- },
- <span id='Ext-chart-series-Series-method-showAll'> /**
- </span> * Shows all the elements in the series.
- */
- showAll: function() {
- var me = this,
- prevAnimate = me.chart.animate;
- me.chart.animate = false;
- me.seriesIsHidden = false;
- me.showMarkers = me._prevShowMarkers;
- me.drawSeries();
- me.chart.animate = prevAnimate;
- },
-
- hide: function() {
- if (this.items) {
- var me = this,
- items = me.items,
- i, j, lsh, ln, shadows;
-
- if (items && items.length) {
- for (i = 0, ln = items.length; i < ln; ++i) {
- if (items[i].sprite) {
- items[i].sprite.hide(true);
- shadows = items[i].shadows || items[i].sprite.shadows;
- if (shadows) {
- for (j = 0, lsh = shadows.length; j < lsh; ++j) {
- shadows[j].hide(true);
- }
- }
- }
- }
- me.hideLabels();
- }
- }
- },
- <span id='Ext-chart-series-Series-method-getLegendColor'> /**
- </span> * Returns a string with the color to be used for the series legend item.
- */
- getLegendColor: function(index) {
- var me = this, fill, stroke;
- if (me.seriesStyle) {
- fill = me.seriesStyle.fill;
- stroke = me.seriesStyle.stroke;
- if (fill && fill != 'none') {
- return fill;
- }
- if(stroke){
- return stroke;
- }
- }
- return (me.colorArrayStyle)?me.colorArrayStyle[me.seriesIdx % me.colorArrayStyle.length]:'#000';
- },
- <span id='Ext-chart-series-Series-method-visibleInLegend'> /**
- </span> * Checks whether the data field should be visible in the legend
- * @private
- * @param {Number} index The index of the current item
- */
- visibleInLegend: function(index){
- var excludes = this.__excludes;
- if (excludes) {
- return !excludes[index];
- }
- return !this.seriesIsHidden;
- },
- <span id='Ext-chart-series-Series-method-setTitle'> /**
- </span> * Changes the value of the {@link #title} for the series.
- * Arguments can take two forms:
- * <ul>
- * <li>A single String value: this will be used as the new single title for the series (applies
- * to series with only one yField)</li>
- * <li>A numeric index and a String value: this will set the title for a single indexed yField.</li>
- * </ul>
- * @param {Number} index
- * @param {String} title
- */
- setTitle: function(index, title) {
- var me = this,
- oldTitle = me.title;
- if (Ext.isString(index)) {
- title = index;
- index = 0;
- }
- if (Ext.isArray(oldTitle)) {
- oldTitle[index] = title;
- } else {
- me.title = title;
- }
- me.fireEvent('titlechange', title, index);
- }
- });
- </pre>
- </body>
- </html>
|