From b77d7a56cdc26a9846d6d6fa008974be4c0564e9 Mon Sep 17 00:00:00 2001 From: blcook223 Date: Fri, 13 Feb 2015 23:44:23 -0600 Subject: [PATCH] added some additional options for styling the range selector plugin --- auto_tests/tests/range_selector.js | 33 +++++++++++++++++++++++++++++- dygraph-options-reference.js | 42 ++++++++++++++++++++++++++++++++++++++ dygraph-utils.js | 11 ++++++++-- dygraph.js | 37 +++++++++++++++++++-------------- plugins/range-selector.js | 21 +++++++++++-------- 5 files changed, 117 insertions(+), 27 deletions(-) diff --git a/auto_tests/tests/range_selector.js b/auto_tests/tests/range_selector.js index a145d7a..29a6709 100644 --- a/auto_tests/tests/range_selector.js +++ b/auto_tests/tests/range_selector.js @@ -133,6 +133,37 @@ RangeSelectorTestCase.prototype.testRangeSelectorOptions = function() { this.assertGraphExistence(g, graph); }; +RangeSelectorTestCase.prototype.testAdditionalRangeSelectorOptions = function() { + var opts = { + width: 480, + height: 320, + showRangeSelector: true, + rangeSelectorHeight: 30, + rangeSelectorBGStrokeColor: 'blue', + rangeSelectorBGLineWidth: 3, + rangeSelectorPlotLineWidth: 0.5, + rangeSelectorPlotGradientColor: 'gray', + rangeSelectorFGStrokeColor: 'red', + rangeSelectorFGLineWidth: 2, + rangeSelectorAlpha: 0.8, + labels: ['X', 'Y'] + }; + var data = [ + [1, 10], + [2, 15], + [3, 10], + [4, 15], + [5, 10], + [6, 15], + [7, 10], + [8, 15], + [9, 10] + ]; + var graph = document.getElementById("graph"); + var g = new Dygraph(graph, data, opts); + this.assertGraphExistence(g, graph); +}; + RangeSelectorTestCase.prototype.testRangeSelectorEnablingAfterCreation = function() { var opts = { width: 480, @@ -343,7 +374,7 @@ RangeSelectorTestCase.prototype.testRangeSelectorPositionIfXAxisNotDrawn = funct ]; var graph = document.getElementById("graph"); var g = new Dygraph(graph, data, opts); - + //assert, that the range selector is at top position 70 since the 30px of the // xAxis shouldn't be reserved since it isn't drawn. this.assertGraphExistence(g, graph); diff --git a/dygraph-options-reference.js b/dygraph-options-reference.js index 596e541..11c1236 100644 --- a/dygraph-options-reference.js +++ b/dygraph-options-reference.js @@ -739,6 +739,48 @@ Dygraph.OPTIONS_REFERENCE = // "type": "string", "description": "The range selector mini plot fill color. This can be of the form \"#AABBCC\" or \"rgb(255,100,200)\" or \"yellow\". You can also specify null or \"\" to turn off fill." }, + "rangeSelectorBGStrokeColor": { + "default": "gray", + "labels": ["Interactive Elements"], + "type": "string", + "description": "The color of the lines below and on both sides of the range selector mini plot. This can be of the form \"#AABBCC\" or \"rgb(255,100,200)\" or \"yellow\"." + }, + "rangeSelectorBGLineWidth": { + "default": "1", + "labels": ["Interactive Elements"], + "type": "float", + "description": "The width of the lines below and on both sides of the range selector mini plot." + }, + "rangeSelectorPlotLineWidth": { + "default": "1.5", + "labels": ["Interactive Elements"], + "type": "float", + "description": "The width of the range selector mini plot line." + }, + "rangeSelectorPlotGradientColor": { + "default": "white", + "labels": ["Interactive Elements"], + "type": "string", + "description": "The color that along with rangeSelectorPlotFillColor defines the linear gradient in the range selector mini plot. This can be of the form \"#AABBCC\" or \"rgb(255,100,200)\" or \"yellow\". You can also specify \"\" to turn off gradient." + }, + "rangeSelectorFGStrokeColor": { + "default": "black", + "labels": ["Interactive Elements"], + "type": "string", + "description": "The color of the lines in the interactive layer of the range selector. This can be of the form \"#AABBCC\" or \"rgb(255,100,200)\" or \"yellow\"." + }, + "rangeSelectorFGLineWidth": { + "default": "1", + "labels": ["Interactive Elements"], + "type": "float", + "description": "The width the lines in the interactive layer of the range selector." + }, + "rangeSelectorAlpha": { + "default": "0.6", + "labels": ["Interactive Elements"], + "type": "float (0.0 - 1.0)", + "description": "The transparency of the veil that is drawn over the unselected portions of the range selector mini plot. A value of 0 represents full transparency and the unselected portions of the mini plot will appear as normal. A value of 1 represents full opacity and the unselected portions of the mini plot will be hidden." + }, "showInRangeSelector": { "default": "null", "labels": ["Interactive Elements"], diff --git a/dygraph-utils.js b/dygraph-utils.js index 992242d..767fe64 100644 --- a/dygraph-utils.js +++ b/dygraph-utils.js @@ -355,7 +355,7 @@ Dygraph.zeropad = function(x) { }; /** - * Date accessors to get the parts of a calendar date (year, month, + * Date accessors to get the parts of a calendar date (year, month, * day, hour, minute, second and millisecond) according to local time, * and factory method to call the Date constructor with an array of arguments. */ @@ -374,7 +374,7 @@ Dygraph.DateAccessorsLocal = { }; /** - * Date accessors to get the parts of a calendar date (year, month, + * Date accessors to get the parts of a calendar date (year, month, * day of month, hour, minute, second and millisecond) according to UTC time, * and factory method to call the Date constructor with an array of arguments. */ @@ -903,6 +903,13 @@ var pixelSafeOptions = { 'pointSize': true, 'rangeSelectorPlotFillColor': true, 'rangeSelectorPlotStrokeColor': true, + 'rangeSelectorBGStrokeColor': true, + 'rangeSelectorBGLineWidth': true, + 'rangeSelectorPlotLineWidth': true, + 'rangeSelectorPlotGradientColor': true, + 'rangeSelectorFGStrokeColor': true, + 'rangeSelectorFGLineWidth': true, + 'rangeSelectorAlpha': true, 'showLabelsOnHighlight': true, 'showRoller': true, 'strokeWidth': true, diff --git a/dygraph.js b/dygraph.js index 5f6e1e1..acbcbe3 100644 --- a/dygraph.js +++ b/dygraph.js @@ -203,7 +203,7 @@ Dygraph.SHORT_MONTH_NAMES_ = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', ' /** * Convert a JS date to a string appropriate to display on an axis that - * is displaying values at the stated granularity. This respects the + * is displaying values at the stated granularity. This respects the * labelsUTC option. * @param {Date} date The date to format * @param {number} granularity One of the Dygraph granularity constants @@ -241,7 +241,7 @@ Dygraph.dateAxisLabelFormatter = function(date, granularity, opts) { Dygraph.dateAxisFormatter = Dygraph.dateAxisLabelFormatter; /** - * Return a string version of a JS date for a value label. This respects the + * Return a string version of a JS date for a value label. This respects the * labelsUTC option. * @param {Date} date The date to be formatted * @param {Dygraph} opts An options view @@ -337,6 +337,13 @@ Dygraph.DEFAULT_ATTRS = { rangeSelectorHeight: 40, rangeSelectorPlotStrokeColor: "#808FAB", rangeSelectorPlotFillColor: "#A7B1C4", + rangeSelectorBGStrokeColor: "gray", + rangeSelectorBGLineWidth: 1, + rangeSelectorPlotLineWidth:1.5, + rangeSelectorPlotGradientColor: "white", + rangeSelectorFGStrokeColor: "black", + rangeSelectorFGLineWidth: 1, + rangeSelectorAlpha: 0.6, showInRangeSelector: null, // The ordering here ensures that central lines always appear above any @@ -1986,7 +1993,7 @@ Dygraph.prototype.mouseMove_ = function(event) { }; /** - * Fetch left offset from the specified set index or if not passed, the + * Fetch left offset from the specified set index or if not passed, the * first defined boundaryIds record (see bug #236). * @private */ @@ -2323,7 +2330,7 @@ Dygraph.prototype.getHandlerClass_ = function() { */ Dygraph.prototype.predraw_ = function() { var start = new Date(); - + // Create the correct dataHandler this.dataHandler_ = new (this.getHandlerClass_())(); @@ -2361,7 +2368,7 @@ Dygraph.prototype.predraw_ = function() { if (this.rollPeriod_ > 1) { series = this.dataHandler_.rollingAverage(series, this.rollPeriod_, this.attributes_); } - + this.rolledSeries_.push(series); } @@ -2520,7 +2527,7 @@ Dygraph.prototype.gatherDatasets_ = function(rolledSeries, dateWindow) { var seriesIdx, sampleIdx; var firstIdx, lastIdx; var axisIdx; - + // Loop over the fields (series). Go from the last to the first, // because if they're stacked that's how we accumulate the values. var num_series = rolledSeries.length - 1; @@ -2538,7 +2545,7 @@ Dygraph.prototype.gatherDatasets_ = function(rolledSeries, dateWindow) { // TODO(danvk): do binary search instead of linear search. // TODO(danvk): pass firstIdx and lastIdx directly to the renderer. - firstIdx = null; + firstIdx = null; lastIdx = null; for (sampleIdx = 0; sampleIdx < series.length; sampleIdx++) { if (series[sampleIdx][0] >= low && firstIdx === null) { @@ -2572,9 +2579,9 @@ Dygraph.prototype.gatherDatasets_ = function(rolledSeries, dateWindow) { if (correctedLastIdx !== lastIdx) { lastIdx = correctedLastIdx; } - + boundaryIds[seriesIdx-1] = [firstIdx, lastIdx]; - + // .slice's end is exclusive, we want to include lastIdx. series = series.slice(firstIdx, lastIdx + 1); } else { @@ -2583,10 +2590,10 @@ Dygraph.prototype.gatherDatasets_ = function(rolledSeries, dateWindow) { } var seriesName = this.attr_("labels")[seriesIdx]; - var seriesExtremes = this.dataHandler_.getExtremeYValues(series, + var seriesExtremes = this.dataHandler_.getExtremeYValues(series, dateWindow, this.getBooleanOption("stepPlot",seriesName)); - var seriesPoints = this.dataHandler_.seriesToPoints(series, + var seriesPoints = this.dataHandler_.seriesToPoints(series, seriesName, boundaryIds[seriesIdx-1][0]); if (this.getBooleanOption("stackedGraph")) { @@ -2801,7 +2808,7 @@ Dygraph.prototype.computeYAxisRanges_ = function(extremes) { }; var numAxes = this.attributes_.numAxes(); var ypadCompat, span, series, ypad; - + var p_axis; // Compute extreme values, a span and tick marks for each axis. @@ -2927,8 +2934,8 @@ Dygraph.prototype.computeYAxisRanges_ = function(extremes) { } else { axis.computedValueRange = axis.extremeRange; } - - + + if (independentTicks) { axis.independentTicks = independentTicks; var opts = this.optionsViewForAxis_('y' + (i ? '2' : '')); @@ -2950,7 +2957,7 @@ Dygraph.prototype.computeYAxisRanges_ = function(extremes) { // independent ticks, then that is permissible as well. for (var i = 0; i < numAxes; i++) { var axis = this.axes_[i]; - + if (!axis.independentTicks) { var opts = this.optionsViewForAxis_('y' + (i ? '2' : '')); var ticker = opts('ticker'); diff --git a/plugins/range-selector.js b/plugins/range-selector.js index 0f72f95..fea0cf3 100644 --- a/plugins/range-selector.js +++ b/plugins/range-selector.js @@ -176,7 +176,7 @@ rangeSelector.prototype.resize_ = function() { } var plotArea = this.dygraph_.layout_.getPlotArea(); - + var xAxisLabelHeight = 0; if (this.dygraph_.getOptionForAxis('drawAxis', 'x')) { xAxisLabelHeight = this.getOption_('xAxisHeight') || (this.getOption_('axisLabelFontSize') + 2 * this.getOption_('axisTickSize')); @@ -222,7 +222,7 @@ rangeSelector.prototype.createZoomHandles_ = function() { img.style.zIndex = 10; img.style.visibility = 'hidden'; // Initially hidden so they don't show up in the wrong place. img.style.cursor = 'col-resize'; - +//TODO: change image to more options if (/MSIE 7/.test(navigator.userAgent)) { // IE7 doesn't support embedded src data. img.width = 7; img.height = 14; @@ -526,8 +526,8 @@ rangeSelector.prototype.drawStaticLayer_ = function() { } var margin = 0.5; - this.bgcanvas_ctx_.lineWidth = 1; - ctx.strokeStyle = 'gray'; + this.bgcanvas_ctx_.lineWidth = this.getOption_('rangeSelectorBGLineWidth'); + ctx.strokeStyle = this.getOption_('rangeSelectorBGStrokeColor'); ctx.beginPath(); ctx.moveTo(margin, margin); ctx.lineTo(margin, this.canvasRect_.h-margin); @@ -547,6 +547,8 @@ rangeSelector.prototype.drawMiniPlot_ = function() { if (!fillStyle && !strokeStyle) { return; } + var gradientFillStyle = this.getOption_('rangeSelectorPlotGradientColor'); + if (!gradientFillStyle) { gradientFillStyle = fillStyle; } var stepPlot = this.getOption_('stepPlot'); @@ -608,7 +610,7 @@ rangeSelector.prototype.drawMiniPlot_ = function() { if (fillStyle) { var lingrad = this.bgcanvas_ctx_.createLinearGradient(0, 0, 0, canvasHeight); - lingrad.addColorStop(0, 'white'); + lingrad.addColorStop(0, gradientFillStyle); lingrad.addColorStop(1, fillStyle); this.bgcanvas_ctx_.fillStyle = lingrad; ctx.fill(); @@ -616,7 +618,7 @@ rangeSelector.prototype.drawMiniPlot_ = function() { if (strokeStyle) { this.bgcanvas_ctx_.strokeStyle = strokeStyle; - this.bgcanvas_ctx_.lineWidth = 1.5; + this.bgcanvas_ctx_.lineWidth = this.getOption_('rangeSelectorPlotLineWidth'); ctx.stroke(); } }; @@ -658,7 +660,7 @@ rangeSelector.prototype.computeCombinedSeriesAndLimits_ = function() { if (g.rollPeriod() > 1) { series = dataHandler.rollingAverage(series, g.rollPeriod(), options); } - + rolledSeries.push(series); } @@ -746,7 +748,8 @@ rangeSelector.prototype.drawInteractiveLayer_ = function() { var height = this.canvasRect_.h - margin; var zoomHandleStatus = this.getZoomHandleStatus_(); - ctx.strokeStyle = 'black'; + ctx.strokeStyle = this.getOption_('rangeSelectorFGStrokeColor'); + ctx.lineWidth = this.getOption_('rangeSelectorFGLineWidth'); if (!zoomHandleStatus.isZoomed) { ctx.beginPath(); ctx.moveTo(margin, margin); @@ -758,7 +761,7 @@ rangeSelector.prototype.drawInteractiveLayer_ = function() { var leftHandleCanvasPos = Math.max(margin, zoomHandleStatus.leftHandlePos - this.canvasRect_.x); var rightHandleCanvasPos = Math.min(width, zoomHandleStatus.rightHandlePos - this.canvasRect_.x); - ctx.fillStyle = 'rgba(240, 240, 240, 0.6)'; + ctx.fillStyle = 'rgba(240, 240, 240, ' + this.getOption_('rangeSelectorAlpha').toString() + ')'; ctx.fillRect(0, 0, leftHandleCanvasPos, this.canvasRect_.h); ctx.fillRect(rightHandleCanvasPos, 0, this.canvasRect_.w - rightHandleCanvasPos, this.canvasRect_.h); -- 2.7.4