flot - npm Package Compare versions

Comparing version 3.2.7 to 3.2.8

package.json

 {
   "name": "flot",
-  "version": "3.2.7",
+  "version": "3.2.8",
   "main": "dist/es5/jquery.flot.js",
@@ -5,0 +5,0 @@ "scripts": {

source/jquery.canvaswrapper.js

@@ -348,2 +348,11 @@ /** ## jquery.flot.canvaswrapper
 
+    function updateTransforms (element, transforms) {
+        element.transform.baseVal.clear();
+        if (transforms) {
+            transforms.forEach(function(t) {
+                element.transform.baseVal.appendItem(t);
+            });
+        }
+    }
+
     /**
@@ -381,2 +390,3 @@ - addText (layer, x, y, text, font, angle, width, halign, valign, transforms)
 
+
         // Determine whether this text already exists at this position.
@@ -389,2 +399,5 @@ // If so, mark it for inclusion in the next render pass.
                 position.active = true;
+                // update the transforms
+                updateTransforms(position.element, transforms);
+
                 return;
@@ -404,2 +417,5 @@ } else if (position.active === false) {
                 position.y = y;
+                // update the transforms
+                updateTransforms(position.element, transforms);
+
                 return;
@@ -436,10 +452,6 @@ }
         position.element.style.textAlign = halign;
+        // update the transforms
+        updateTransforms(position.element, transforms);
+   };
 
-        if (transforms) {
-            transforms.forEach(function(t) {
-                info.element.transform.baseVal.appendItem(t);
-            });
-        }
-    };
-
     var addTspanElements = function(text, element, x) {
@@ -446,0 +458,0 @@ var lines = text.split('<br>'),

source/jquery.flot.hover.js

@@ -246,2 +246,5 @@ /* global jQuery */
             triggerCleanupEvent();
+        }
+
+        function setupGrid() {
             doTriggerClickHoverEvent(lastMouseMoveEvent, eventType.hover);
@@ -330,2 +333,3 @@ }
                 plot.hooks.processRawData.push(processRawData);
+                plot.hooks.setupGrid.push(setupGrid);
             }
@@ -332,0 +336,0 @@

source/jquery.flot.legend.js

@@ -9,2 +9,3 @@ /* Flot plugin for drawing legends.
             show: false,
+            noColumns: 1,
             labelFormatter: null, // fn: string -> string
@@ -35,4 +36,4 @@ container: null, // container (as jQuery object) to put legend in, null means default on top of graph
             entry, labelHtml, iconHtml,
-            maxLabelLength = 0,
             j = 0,
+            i,
             pos = "",
@@ -52,9 +53,42 @@ p = options.legend.position,
 
+        var left = 0;
+        var columnWidths = [];
+        var style = window.getComputedStyle(document.querySelector('body'));
+        for (i = 0; i < entries.length; ++i) {
+            var columnIndex = i % options.legend.noColumns;
+            entry = entries[i];
+            shape.label = entry.label;
+            var info = plot.getSurface().getTextInfo('', shape.label, {
+                style: style.fontStyle,
+                variant: style.fontVariant,
+                weight: style.fontWeight,
+                size: parseInt(style.fontSize),
+                lineHeight: parseInt(style.lineHeight),
+                family: style.fontFamily
+            });
+
+            labelWidth = info.width;
+            // 36px = 1.5em + 6px margin
+            var iconWidth = 48;
+            if (columnWidths[columnIndex]) {
+                if (labelWidth > columnWidths[columnIndex]) {
+                    columnWidths[columnIndex] = labelWidth + iconWidth;
+                }
+            } else {
+                columnWidths[columnIndex] = labelWidth + iconWidth;
+            }
+        }
+
         // Generate html for icons and labels from a list of entries
-        for (var i = 0; i < entries.length; ++i) {
+        for (i = 0; i < entries.length; ++i) {
+            var columnIndex = i % options.legend.noColumns;
             entry = entries[i];
             iconHtml = '';
             shape.label = entry.label;
-            shape.xPos = '0em';
-            shape.yPos = i * 1.5 + 'em';
+            shape.xPos = (left + 3) + 'px';
+            left += columnWidths[columnIndex];
+            if ((i + 1) % options.legend.noColumns === 0) {
+                left = 0;
+            }
+            shape.yPos = Math.floor(i / options.legend.noColumns) * 1.5 + 'em';
             // area
@@ -88,3 +122,2 @@ if (entry.options.lines.show && entry.options.lines.fill) {
 
-            maxLabelLength = maxLabelLength < shape.label.length ? shape.label.length : maxLabelLength;
             labelHtml = '<text x="' + shape.xPos + '" y="' + shape.yPos + '" text-anchor="start"><tspan dx="2em" dy="1.2em">' + shape.label + '</tspan></text>'
@@ -111,8 +144,12 @@ html[j++] = '<g>' + iconHtml + labelHtml + '</g>';
 
+        var width = 6;
+        for (i = 0; i < columnWidths.length; ++i) {
+            width += columnWidths[i];
+        }
+
         var legendEl,
-            width = 3 + maxLabelLength / 2,
-            height = entries.length * 1.6;
+            height = Math.ceil(entries.length / options.legend.noColumns) * 1.6;
         if (!options.legend.container) {
             legendEl = $('<div class="legend" style="position:absolute;' + pos + '">' + html.join('') + '</div>').appendTo(placeholder);
-            legendEl.css('width', width + 'em');
+            legendEl.css('width', width + 'px');
             legendEl.css('height', height + 'em');
@@ -122,3 +159,3 @@ legendEl.css('pointerEvents', 'none');
             legendEl = $(html.join('')).appendTo(options.legend.container)[0];
-            options.legend.container.style.width = width + 'em';
+            options.legend.container.style.width = width + 'px';
             options.legend.container.style.height = height + 'em';
@@ -125,0 +162,0 @@ }

source/jquery.flot.selection.js

@@ -12,2 +12,3 @@ /* Flot plugin for selecting regions of a plot.
     shape: "round" or "miter" or "bevel",
+    visualization: "fill" or "focus",
     minSize: number of pixels
@@ -23,2 +24,8 @@ }
 
+The way how the selection is visualized, can be changed by using the option
+"visualization". Flot currently supports two modes: "focus" and "fill". The
+option "focus" draws a colored bezel around the selected area while keeping
+the selected area clear. The option "fill" highlights (i.e., fills) the
+selected area with a colored highlight.
+
 "minSize" is the minimum size a selection can be in pixels. This value can
@@ -117,2 +124,5 @@ be customized to determine the smallest size a selection can be and still
 
+            // reinitialize currentMode
+            selection.currentMode = 'xy';
+
             // cancel out any text selections
@@ -454,4 +464,12 @@ document.body.focus();
                 var c = $.color.parse(o.selection.color);
+                var visualization = o.selection.visualization;
 
-                ctx.strokeStyle = c.scale('a', 1).toString();
+                var scalingFactor = 1;
+
+                // use a dimmer scaling factor if visualization is "fill"
+                if (visualization === "fill") {
+                    scalingFactor = 0.8;
+                }
+
+                ctx.strokeStyle = c.scale('a', scalingFactor).toString();
                 ctx.lineWidth = 1;
@@ -478,5 +496,10 @@ ctx.lineJoin = o.selection.shape;
 
-                ctx.fillRect(0, 0, plot.width(), plot.height());
-                ctx.clearRect(x, y, w, h);
-                drawSelectionDecorations(ctx, x, y, w, h, oX, oY, selectionDirection(plot));
+                if (visualization === "fill") {
+                    ctx.fillRect(x, y, w, h);
+                    ctx.strokeRect(x, y, w, h);
+                } else {
+                    ctx.fillRect(0, 0, plot.width(), plot.height());
+                    ctx.clearRect(x, y, w, h);
+                    drawSelectionDecorations(ctx, x, y, w, h, oX, oY, selectionDirection(plot));
+                }
 
@@ -502,2 +525,3 @@ ctx.restore();
                 mode: null, // one of null, "x", "y" or "xy"
+                visualization: "focus", // "focus" or "fill"
                 color: "#888888",
@@ -504,0 +528,0 @@ shape: "round", // one of "round", "miter", or "bevel"

No alert changes

Improved metrics

Total package byte prevSize

983516

increased by0.37%

Lines of code

19494

increased by0.36%

No dependency changes