highcharts-rails 5.0.14 → 6.0.0

data/app/assets/javascripts/highcharts/modules/series-label.js

@@ -1,5 +1,5 @@
 /**
- * @license Highcharts JS v5.0.14 (2017-07-28)
+ * @license Highcharts JS v6.0.0 (2017-10-04)
  *
  * (c) 2009-2017 Torstein Honsi
  *
@@ -20,11 +20,10 @@
          * License: www.highcharts.com/license
          */
         /**
-         * EXPERIMENTAL Highcharts module to place labels next to a series in a natural position.
+         * Highcharts module to place labels next to a series in a natural position.
          *
          * TODO:
          * - add column support (box collision detection, boxesToAvoid logic)
-         * - other series types, area etc.
          * - avoid data labels, when data labels above, show series label below.
          * - add more options (connector, format, formatter)
          * 
@@ -40,41 +39,92 @@
             each = H.each,
             extend = H.extend,
             isNumber = H.isNumber,
+            pick = H.pick,
             Series = H.Series,
             SVGRenderer = H.SVGRenderer,
             Chart = H.Chart;
 
         H.setOptions({
+            /**
+             * @optionparent plotOptions
+             */
             plotOptions: {
                 series: {
-
                     /**
+                     * Series labels are placed as close to the series as possible in a
+                     * natural way, seeking to avoid other series. The goal of this
+                     * feature is to make the chart more easily readable, like if a
+                     * human designer placed the labels in the optimal position.
+                     *
+                     * The series labels currently work with series types having a
+                     * `graph` or an `area`.
+                     *
+                     * Requires the `series-label.js` module.
+                     *
+                     * @sample highcharts/series-label/line-chart
+                     *         Line chart
+                     * @sample highcharts/demo/streamgraph
+                     *         Stream graph
+                     * @sample highcharts/series-label/stock-chart
+                     *         Stock chart
+                     * @since 6.0.0
+                     * @product highcharts highstock
                      */
                     label: {
-
                         /**
+                         * Enable the series label per series.
                          */
                         enabled: true,
-                        // Allow labels to be placed distant to the graph if necessary, and
-                        // draw a connector line to the graph
-
                         /**
+                         * Allow labels to be placed distant to the graph if necessary,
+                         * and draw a connector line to the graph.
                          */
                         connectorAllowed: true,
-
                         /**
+                         * If the label is closer than this to a neighbour graph, draw a
+                         * connector.
                          */
-                        connectorNeighbourDistance: 24, // If the label is closer than this to a neighbour graph, draw a connector
-
+                        connectorNeighbourDistance: 24,
+                        /**
+                         * For area-like series, allow the font size to vary so that
+                         * small areas get a smaller font size. The default applies this
+                         * effect to area-like series but not line-like series.
+                         *
+                         * @type {Number}
+                         */
+                        minFontSize: null,
+                        /**
+                         * For area-like series, allow the font size to vary so that
+                         * small areas get a smaller font size. The default applies this
+                         * effect to area-like series but not line-like series.
+                         *
+                         * @type {Number}
+                         */
+                        maxFontSize: null,
                         /**
+                         * Draw the label on the area of an area series. By default it
+                         * is drawn on the area. Set it to `false` to draw it next to
+                         * the graph instead.
+                         * 
+                         * @type {Boolean}
                          */
-                        styles: {
+                        onArea: null,
 
-                            /**
-                             */
+                        /**
+                         * Styles for the series label. The color defaults to the series
+                         * color, or a contrast color if `onArea`.
+                         */
+                        style: {
                             fontWeight: 'bold'
-                        }
-                        // boxesToAvoid: []
+                        },
+
+                        /**
+                         * An array of boxes to avoid when laying out the labels. Each 
+                         * item has a `left`, `right`, `top` and `bottom` property.
+                         *
+                         * @type {Array.<Object>}
+                         */
+                        boxesToAvoid: []
                     }
                 }
             }
@@ -102,8 +152,8 @@
         function boxIntersectLine(x, y, w, h, x1, y1, x2, y2) {
             return (
                 intersectLine(x, y, x + w, y, x1, y1, x2, y2) || // top of label
-                intersectLine(x + w, y, x + w, y + h, x1, y1, x2, y2) || // right of label
-                intersectLine(x, y + h, x + w, y + h, x1, y1, x2, y2) || // bottom of label
+                intersectLine(x + w, y, x + w, y + h, x1, y1, x2, y2) || // right
+                intersectLine(x, y + h, x + w, y + h, x1, y1, x2, y2) || // bottom
                 intersectLine(x, y, x, y + h, x1, y1, x2, y2) // left of label
             );
         }
@@ -156,6 +206,11 @@
          * interpolated positions.
          */
         Series.prototype.getPointsOnGraph = function() {
+
+            if (!this.xAxis && !this.yAxis) {
+                return;
+            }
+
             var distance = 16,
                 points = this.points,
                 point,
@@ -172,12 +227,18 @@
                 graph = this.graph || this.area,
                 node = graph.element,
                 inverted = this.chart.inverted,
-                paneLeft = inverted ? this.yAxis.pos : this.xAxis.pos,
-                paneTop = inverted ? this.xAxis.pos : this.yAxis.pos;
-
-            // For splines, get the point at length (possible caveat: peaks are not correctly detected)
-            if (this.getPointSpline && node.getPointAtLength) {
-                // If it is animating towards a path definition, use that briefly, and reset
+                xAxis = this.xAxis,
+                yAxis = this.yAxis,
+                paneLeft = inverted ? yAxis.pos : xAxis.pos,
+                paneTop = inverted ? xAxis.pos : yAxis.pos,
+                onArea = pick(this.options.label.onArea, !!this.area),
+                translatedThreshold = yAxis.getThreshold(this.options.threshold);
+
+            // For splines, get the point at length (possible caveat: peaks are not
+            // correctly detected)
+            if (this.getPointSpline && node.getPointAtLength && !onArea) {
+                // If it is animating towards a path definition, use that briefly, and
+                // reset
                 if (graph.toD) {
                     d = graph.attr('d');
                     graph.attr({
@@ -216,6 +277,13 @@
                     // Absolute coordinates so we can compare different panes
                     point.chartX = paneLeft + point.plotX;
                     point.chartY = paneTop + point.plotY;
+                    if (onArea) {
+                        // Vertically centered inside area
+                        point.chartCenterY = paneTop + (
+                            point.plotY +
+                            pick(point.yBottom, translatedThreshold)
+                        ) / 2;
+                    }
 
                     // Add interpolated points
                     if (i > 0) {
@@ -228,10 +296,17 @@
 
                             for (j = 1; j < n; j += 1) {
                                 interpolated.push({
-                                    chartX: last.chartX + (point.chartX - last.chartX) * (j / n),
-                                    chartY: last.chartY + (point.chartY - last.chartY) * (j / n),
-                                    plotX: last.plotX + (point.plotX - last.plotX) * (j / n),
-                                    plotY: last.plotY + (point.plotY - last.plotY) * (j / n)
+                                    chartX: last.chartX +
+                                        (point.chartX - last.chartX) * (j / n),
+                                    chartY: last.chartY +
+                                        (point.chartY - last.chartY) * (j / n),
+                                    chartCenterY: last.chartCenterY +
+                                        (point.chartCenterY - last.chartCenterY) *
+                                        (j / n),
+                                    plotX: last.plotX +
+                                        (point.plotX - last.plotX) * (j / n),
+                                    plotY: last.plotY +
+                                        (point.plotY - last.plotY) * (j / n)
                                 });
                             }
                         }
@@ -243,9 +318,30 @@
                     }
                 }
             }
+
+            // Get the bounding box so we can do a quick check first if the bounding
+            // boxes overlap.
+            /*
+            interpolated.bBox = node.getBBox();
+            interpolated.bBox.x += paneLeft;
+            interpolated.bBox.y += paneTop;
+            */
+
             return interpolated;
         };
 
+        /**
+         * Overridable function to return series-specific font sizes for the labels. By
+         * default it returns bigger font sizes for series with the greater sum of y
+         * values.
+         */
+        Series.prototype.labelFontSize = function(minFontSize, maxFontSize) {
+            return minFontSize + (
+                (this.sum / this.chart.labelSeriesMaxSum) *
+                (maxFontSize - minFontSize)
+            ) + 'px';
+        };
+
         /**
          * Check whether a proposed label position is clear of other elements
          */
@@ -255,12 +351,14 @@
                 dist,
                 connectorPoint,
                 connectorEnabled = this.options.label.connectorAllowed,
-
+                onArea = pick(this.options.label.onArea, !!this.area),
                 chart = this.chart,
                 series,
                 points,
                 leastDistance = 16,
                 withinRange,
+                xDist,
+                yDist,
                 i,
                 j;
 
@@ -272,9 +370,9 @@
             }
 
             /**
-             * Get the weight in order to determine the ideal position. Larger distance to
-             * other series gives more weight. Smaller distance to the actual point (connector points only)
-             * gives more weight.
+             * Get the weight in order to determine the ideal position. Larger distance
+             * to other series gives more weight. Smaller distance to the actual point
+             * (connector points only) gives more weight.
              */
             function getWeight(distToOthersSquared, distToPointSquared) {
                 return distToOthersSquared - distToPointSquared;
@@ -292,64 +390,99 @@
                 }
             }
 
-            // For each position, check if the lines around the label intersect with any of the 
-            // graphs
+            // For each position, check if the lines around the label intersect with any
+            // of the graphs.
             for (i = 0; i < chart.series.length; i += 1) {
                 series = chart.series[i];
                 points = series.interpolatedPoints;
                 if (series.visible && points) {
                     for (j = 1; j < points.length; j += 1) {
-                        // If any of the box sides intersect with the line, return
-                        if (boxIntersectLine(
-                                x,
-                                y,
-                                bBox.width,
-                                bBox.height,
-                                points[j - 1].chartX,
-                                points[j - 1].chartY,
-                                points[j].chartX,
-                                points[j].chartY
-                            )) {
-                            return false;
-                        }
 
-                        // But if it is too far away (a padded box doesn't intersect), also return
-                        if (this === series && !withinRange && checkDistance) {
-                            withinRange = boxIntersectLine(
-                                x - leastDistance,
-                                y - leastDistance,
-                                bBox.width + 2 * leastDistance,
-                                bBox.height + 2 * leastDistance,
-                                points[j - 1].chartX,
-                                points[j - 1].chartY,
-                                points[j].chartX,
-                                points[j].chartY
-                            );
+                        if (
+                            // To avoid processing, only check intersection if the X
+                            // values are close to the box.
+                            points[j].chartX >= x - leastDistance &&
+                            points[j - 1].chartX <= x + bBox.width + leastDistance
+                        ) {
+                            // If any of the box sides intersect with the line, return.
+                            if (boxIntersectLine(
+                                    x,
+                                    y,
+                                    bBox.width,
+                                    bBox.height,
+                                    points[j - 1].chartX,
+                                    points[j - 1].chartY,
+                                    points[j].chartX,
+                                    points[j].chartY
+                                )) {
+                                return false;
+                            }
+
+                            // But if it is too far away (a padded box doesn't
+                            // intersect), also return.
+                            if (this === series && !withinRange && checkDistance) {
+                                withinRange = boxIntersectLine(
+                                    x - leastDistance,
+                                    y - leastDistance,
+                                    bBox.width + 2 * leastDistance,
+                                    bBox.height + 2 * leastDistance,
+                                    points[j - 1].chartX,
+                                    points[j - 1].chartY,
+                                    points[j].chartX,
+                                    points[j].chartY
+                                );
+                            }
                         }
 
-                        // Find the squared distance from the center of the label
-                        if (this !== series) {
+                        // Find the squared distance from the center of the label. On
+                        // area series, avoid its own graph.
+                        if (
+                            (connectorEnabled || withinRange) &&
+                            (this !== series || onArea)
+                        ) {
+                            xDist = x + bBox.width / 2 - points[j].chartX;
+                            yDist = y + bBox.height / 2 - points[j].chartY;
                             distToOthersSquared = Math.min(
                                 distToOthersSquared,
-                                Math.pow(x + bBox.width / 2 - points[j].chartX, 2) + Math.pow(y + bBox.height / 2 - points[j].chartY, 2),
-                                Math.pow(x - points[j].chartX, 2) + Math.pow(y - points[j].chartY, 2),
-                                Math.pow(x + bBox.width - points[j].chartX, 2) + Math.pow(y - points[j].chartY, 2),
-                                Math.pow(x + bBox.width - points[j].chartX, 2) + Math.pow(y + bBox.height - points[j].chartY, 2),
-                                Math.pow(x - points[j].chartX, 2) + Math.pow(y + bBox.height - points[j].chartY, 2)
+                                xDist * xDist + yDist * yDist
                             );
                         }
                     }
 
                     // Do we need a connector? 
-                    if (connectorEnabled && this === series && ((checkDistance && !withinRange) ||
-                            distToOthersSquared < Math.pow(this.options.label.connectorNeighbourDistance, 2))) {
+                    if (!onArea &&
+                        connectorEnabled &&
+                        this === series &&
+                        (
+                            (checkDistance && !withinRange) ||
+                            distToOthersSquared < Math.pow(
+                                this.options.label.connectorNeighbourDistance,
+                                2
+                            )
+                        )
+                    ) {
                         for (j = 1; j < points.length; j += 1) {
                             dist = Math.min(
-                                Math.pow(x + bBox.width / 2 - points[j].chartX, 2) + Math.pow(y + bBox.height / 2 - points[j].chartY, 2),
-                                Math.pow(x - points[j].chartX, 2) + Math.pow(y - points[j].chartY, 2),
-                                Math.pow(x + bBox.width - points[j].chartX, 2) + Math.pow(y - points[j].chartY, 2),
-                                Math.pow(x + bBox.width - points[j].chartX, 2) + Math.pow(y + bBox.height - points[j].chartY, 2),
-                                Math.pow(x - points[j].chartX, 2) + Math.pow(y + bBox.height - points[j].chartY, 2)
+                                (
+                                    Math.pow(x + bBox.width / 2 - points[j].chartX, 2) +
+                                    Math.pow(y + bBox.height / 2 - points[j].chartY, 2)
+                                ),
+                                (
+                                    Math.pow(x - points[j].chartX, 2) +
+                                    Math.pow(y - points[j].chartY, 2)
+                                ),
+                                (
+                                    Math.pow(x + bBox.width - points[j].chartX, 2) +
+                                    Math.pow(y - points[j].chartY, 2)
+                                ),
+                                (
+                                    Math.pow(x + bBox.width - points[j].chartX, 2) +
+                                    Math.pow(y + bBox.height - points[j].chartY, 2)
+                                ),
+                                (
+                                    Math.pow(x - points[j].chartX, 2) +
+                                    Math.pow(y + bBox.height - points[j].chartY, 2)
+                                )
                             );
                             if (dist < distToPointSquared) {
                                 distToPointSquared = dist;
@@ -364,7 +497,10 @@
             return !checkDistance || withinRange ? {
                 x: x,
                 y: y,
-                weight: getWeight(distToOthersSquared, connectorPoint ? distToPointSquared : 0),
+                weight: getWeight(
+                    distToOthersSquared,
+                    connectorPoint ? distToPointSquared : 0
+                ),
                 connectorPoint: connectorPoint
             } : false;
 
@@ -376,6 +512,9 @@
          * account when placing the labels.
          */
         Chart.prototype.drawSeriesLabels = function() {
+
+            // console.time('drawSeriesLabels');
+
             var chart = this,
                 labelSeries = this.labelSeries;
 
@@ -391,6 +530,11 @@
             });
 
             each(chart.series, function(series) {
+
+                if (!series.xAxis && !series.yAxis) {
+                    return;
+                }
+
                 var bBox,
                     x,
                     y,
@@ -398,13 +542,17 @@
                     clearPoint,
                     i,
                     best,
+                    labelOptions = series.options.label,
                     inverted = chart.inverted,
                     paneLeft = inverted ? series.yAxis.pos : series.xAxis.pos,
                     paneTop = inverted ? series.xAxis.pos : series.yAxis.pos,
                     paneWidth = chart.inverted ? series.yAxis.len : series.xAxis.len,
                     paneHeight = chart.inverted ? series.xAxis.len : series.yAxis.len,
                     points = series.interpolatedPoints,
-                    label = series.labelBySeries;
+                    onArea = pick(labelOptions.onArea, !!series.area),
+                    label = series.labelBySeries,
+                    minFontSize = labelOptions.minFontSize,
+                    maxFontSize = labelOptions.maxFontSize;
 
                 function insidePane(x, y, bBox) {
                     return x > paneLeft && x <= paneLeft + paneWidth - bBox.width &&
@@ -416,13 +564,24 @@
                         series.labelBySeries = label = chart.renderer
                             .label(series.name, 0, -9999, 'connector')
                             .css(extend({
-                                color: series.color
-                            }, series.options.label.styles))
+                                color: onArea ?
+                                    chart.renderer.getContrast(series.color) : series.color
+                            }, series.options.label.style));
+
+                        // Adapt label sizes to the sum of the data
+                        if (minFontSize && maxFontSize) {
+                            label.css({
+                                fontSize: series.labelFontSize(minFontSize, maxFontSize)
+                            });
+                        }
+
+                        label
                             .attr({
                                 padding: 0,
-                                opacity: 0,
+                                opacity: chart.renderer.forExport ? 1 : 0,
                                 stroke: series.color,
-                                'stroke-width': 1
+                                'stroke-width': 1,
+                                zIndex: 3
                             })
                             .add(series.group)
                             .animate({
@@ -439,66 +598,85 @@
                     // of chart
                     for (i = points.length - 1; i > 0; i -= 1) {
 
-                        // Right - up
-                        x = points[i].chartX + labelDistance;
-                        y = points[i].chartY - bBox.height - labelDistance;
-                        if (insidePane(x, y, bBox)) {
-                            best = series.checkClearPoint(
-                                x,
-                                y,
-                                bBox
-                            );
-                        }
-                        if (best) {
-                            results.push(best);
-                        }
+                        if (onArea) {
+
+                            // Centered
+                            x = points[i].chartX - bBox.width / 2;
+                            y = points[i].chartCenterY - bBox.height / 2;
+                            if (insidePane(x, y, bBox)) {
+                                best = series.checkClearPoint(
+                                    x,
+                                    y,
+                                    bBox
+                                );
+                            }
+                            if (best) {
+                                results.push(best);
+                            }
 
-                        // Right - down
-                        x = points[i].chartX + labelDistance;
-                        y = points[i].chartY + labelDistance;
-                        if (insidePane(x, y, bBox)) {
-                            best = series.checkClearPoint(
-                                x,
-                                y,
-                                bBox
-                            );
-                        }
-                        if (best) {
-                            results.push(best);
-                        }
 
-                        // Left - down
-                        x = points[i].chartX - bBox.width - labelDistance;
-                        y = points[i].chartY + labelDistance;
-                        if (insidePane(x, y, bBox)) {
-                            best = series.checkClearPoint(
-                                x,
-                                y,
-                                bBox
-                            );
-                        }
-                        if (best) {
-                            results.push(best);
-                        }
+                        } else {
 
-                        // Left - up
-                        x = points[i].chartX - bBox.width - labelDistance;
-                        y = points[i].chartY - bBox.height - labelDistance;
-                        if (insidePane(x, y, bBox)) {
-                            best = series.checkClearPoint(
-                                x,
-                                y,
-                                bBox
-                            );
-                        }
-                        if (best) {
-                            results.push(best);
-                        }
+                            // Right - up
+                            x = points[i].chartX + labelDistance;
+                            y = points[i].chartY - bBox.height - labelDistance;
+                            if (insidePane(x, y, bBox)) {
+                                best = series.checkClearPoint(
+                                    x,
+                                    y,
+                                    bBox
+                                );
+                            }
+                            if (best) {
+                                results.push(best);
+                            }
+
+                            // Right - down
+                            x = points[i].chartX + labelDistance;
+                            y = points[i].chartY + labelDistance;
+                            if (insidePane(x, y, bBox)) {
+                                best = series.checkClearPoint(
+                                    x,
+                                    y,
+                                    bBox
+                                );
+                            }
+                            if (best) {
+                                results.push(best);
+                            }
+
+                            // Left - down
+                            x = points[i].chartX - bBox.width - labelDistance;
+                            y = points[i].chartY + labelDistance;
+                            if (insidePane(x, y, bBox)) {
+                                best = series.checkClearPoint(
+                                    x,
+                                    y,
+                                    bBox
+                                );
+                            }
+                            if (best) {
+                                results.push(best);
+                            }
 
+                            // Left - up
+                            x = points[i].chartX - bBox.width - labelDistance;
+                            y = points[i].chartY - bBox.height - labelDistance;
+                            if (insidePane(x, y, bBox)) {
+                                best = series.checkClearPoint(
+                                    x,
+                                    y,
+                                    bBox
+                                );
+                            }
+                            if (best) {
+                                results.push(best);
+                            }
+                        }
                     }
 
                     // Brute force, try all positions on the chart in a 16x16 grid
-                    if (!results.length) {
+                    if (!results.length && !onArea) {
                         for (x = paneLeft + paneWidth - bBox.width; x >= paneLeft; x -= 16) {
                             for (y = paneTop; y < paneTop + paneHeight - bBox.height; y += 16) {
                                 clearPoint = series.checkClearPoint(x, y, bBox, true);
@@ -525,19 +703,39 @@
                         });
 
                         // Move it if needed
-                        if (Math.round(best.x) !== Math.round(label.x) ||
-                            Math.round(best.y) !== Math.round(label.y)) {
-                            series.labelBySeries
-                                .attr({
-                                    opacity: 0,
+                        var dist = Math.sqrt(
+                            Math.pow(Math.abs(best.x - label.x), 2),
+                            Math.pow(Math.abs(best.y - label.y), 2)
+                        );
+
+                        if (dist) {
+
+                            // Move fast and fade in - pure animation movement is 
+                            // distractive...
+                            var attr = {
+                                    opacity: chart.renderer.forExport ? 1 : 0,
                                     x: best.x - paneLeft,
-                                    y: best.y - paneTop,
-                                    anchorX: best.connectorPoint && best.connectorPoint.plotX,
-                                    anchorY: best.connectorPoint && best.connectorPoint.plotY
-                                })
-                                .animate({
+                                    y: best.y - paneTop
+                                },
+                                anim = {
                                     opacity: 1
-                                });
+                                };
+                            // ... unless we're just moving a short distance
+                            if (dist <= 10) {
+                                anim = {
+                                    x: attr.x,
+                                    y: attr.y
+                                };
+                                attr = {};
+                            }
+                            series.labelBySeries
+                                .attr(extend(attr, {
+                                    anchorX: best.connectorPoint &&
+                                        best.connectorPoint.plotX,
+                                    anchorY: best.connectorPoint &&
+                                        best.connectorPoint.plotY
+                                }))
+                                .animate(anim);
 
                             // Record closest point to stick to for sync redraw
                             series.options.kdNow = true;
@@ -559,6 +757,7 @@
                     }
                 }
             });
+            // console.timeEnd('drawSeriesLabels');
         };
 
         /**
@@ -576,6 +775,7 @@
             proceed.apply(chart, [].slice.call(arguments, 1));
 
             chart.labelSeries = [];
+            chart.labelSeriesMaxSum = 0;
 
             clearTimeout(chart.seriesLabelTimer);
 
@@ -588,6 +788,16 @@
                 if (options.enabled && series.visible && (series.graph || series.area)) {
                     chart.labelSeries.push(series);
 
+                    if (options.minFontSize && options.maxFontSize) {
+                        series.sum = H.reduce(series.yData, function(pv, cv) {
+                            return (pv || 0) + (cv || 0);
+                        }, 0);
+                        chart.labelSeriesMaxSum = Math.max(
+                            chart.labelSeriesMaxSum,
+                            series.sum
+                        );
+                    }
+
                     // The labels are processing heavy, wait until the animation is done
                     if (initial) {
                         delay = Math.max(
@@ -612,9 +822,9 @@
                 }
             });
 
-            chart.seriesLabelTimer = setTimeout(function() {
+            chart.seriesLabelTimer = H.syncTimeout(function() {
                 chart.drawSeriesLabels();
-            }, delay);
+            }, chart.renderer.forExport ? 0 : delay);
 
         }
         wrap(Chart.prototype, 'render', drawLabels);