Skip to content

Commit

Permalink
support resizing preview range sliders; closes #375; closes #417; closes
Browse files Browse the repository at this point in the history 
 #382
  • Loading branch information
@dchester
dchester committed Apr 12, 2014
1 parent 819a63b commit 972c2bd
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 26 deletions.
24 changes: 18 additions & 6 deletions examples/resize.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,35 +3,47 @@
<link type="text/css" rel="stylesheet" href="css/lines.css">

<script src="../vendor/d3.v3.js"></script>
<script src="../rickshaw.min.js"></script>
<script src="../rickshaw.js"></script>

<div id="chart"></div>
<div id="preview"></div>

<script>

var seriesData = [ [], [] ];
var random = new Rickshaw.Fixtures.RandomData(150);

for (var i = 0; i < 150; i++) {
random.addData(seriesData);
}

var graph = new Rickshaw.Graph( {
element: document.getElementById("chart"),
renderer: 'area',
series: [
{
data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 } ],
data: seriesData[0],
color: 'steelblue'
}, {
data: [ { x: 0, y: 19 }, { x: 1, y: 22 }, { x: 2, y: 32 }, { x: 3, y: 20 }, { x: 4, y: 21 } ],
data: seriesData[1],
color: 'lightblue'
}
]
} );

var resize = function() {
var padding = 40;
graph.configure({
width: window.innerWidth - padding,
height: window.innerHeight - padding
width: window.innerWidth * 0.75,
height: window.innerHeight * 0.75
});
graph.render();
}

var preview = new Rickshaw.Graph.RangeSlider.Preview({
graph: graph,
element: document.getElementById('preview')
});

window.addEventListener('resize', resize);
resize();

Expand Down
68 changes: 48 additions & 20 deletions src/js/Rickshaw.Graph.RangeSlider.Preview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ Rickshaw.Graph.RangeSlider.Preview = Rickshaw.Class.create({
if (!args.graph && !args.graphs) throw "Rickshaw.Graph.RangeSlider.Preview needs a reference to an graph or an array of graphs";

this.element = args.element;
this.element.style.position = 'relative';

this.graphs = args.graph ? [ args.graph ] : args.graphs;

this.defaults = {
Expand All @@ -18,18 +20,29 @@ Rickshaw.Graph.RangeSlider.Preview = Rickshaw.Class.create({
frameHandleThickness: 10,
frameColor: "#d4d4d4",
frameOpacity: 1,
minimumFrameWidth: 0
minimumFrameWidth: 0,
heightRatio: 0.2
};

this.heightRatio = args.heightRatio || this.defaults.heightRatio;
this.defaults.gripperColor = d3.rgb(this.defaults.frameColor).darker().toString();

this.configureCallbacks = [];
this.slideCallbacks = [];

this.previews = [];

if (!args.width) this.widthFromGraph = true;
if (!args.height) this.heightFromGraph = true;

if (this.widthFromGraph || this.heightFromGraph) {
this.graphs[0].onConfigure(function () {
this.configure(args); this.render();
}.bind(this));
}

args.width = args.width || this.graphs[0].width || this.defaults.width;
args.height = args.height || this.graphs[0].height / 5 || this.defaults.height;
args.height = args.height || this.graphs[0].height * this.heightRatio || this.defaults.height;

this.configure(args);
this.render();
Expand All @@ -45,7 +58,7 @@ Rickshaw.Graph.RangeSlider.Preview = Rickshaw.Class.create({

configure: function(args) {

this.config = {};
this.config = this.config || {};

this.configureCallbacks.forEach(function(callback) {
callback(args);
Expand All @@ -57,17 +70,29 @@ Rickshaw.Graph.RangeSlider.Preview = Rickshaw.Class.create({
: this.defaults[k];
}, this);

if (args.width) {
this.previews.forEach(function(preview) {
var width = args.width - this.config.frameHandleThickness * 2;
preview.setSize({ width: width });
}, this);
}
if ('width' in args || 'height' in args) {

if (this.widthFromGraph) {
this.config.width = this.graphs[0].width;
}

if (this.heightFromGraph) {
this.config.height = this.graphs[0].height * this.heightRatio;
this.previewHeight = this.config.height;
}

if (args.height) {
this.previews.forEach(function(preview) {
var height = this.previewHeight / this.graphs.length;
preview.setSize({ height: height });

var height = this.previewHeight / this.graphs.length - this.config.frameTopThickness * 2;
var width = this.config.width - this.config.frameHandleThickness * 2;
preview.setSize({ width: width, height: height });

if (this.svg) {
var svgHeight = height + this.config.frameHandleThickness * 2;
var svgWidth = width + this.config.frameHandleThickness * 2;
this.svg.style("width", svgWidth + "px");
this.svg.style("height", svgHeight + "px");
}
}, this);
}
},
Expand Down Expand Up @@ -107,6 +132,7 @@ Rickshaw.Graph.RangeSlider.Preview = Rickshaw.Class.create({
parent.onConfigure(function(args) {
// don't propagate height
delete args.height;
args.width = args.width - self.config.frameHandleThickness * 2;
graph.configure(args);
graph.render();
});
Expand Down Expand Up @@ -160,8 +186,8 @@ Rickshaw.Graph.RangeSlider.Preview = Rickshaw.Class.create({
.classed("rickshaw_range_slider_preview", true)
.style("height", this.config.height + "px")
.style("width", this.config.width + "px")
.style("position", "relative")
.style("top", -this.previewHeight + "px");
.style("position", "absolute")
.style("top", 0);

this._renderDimming();
this._renderFrame();
Expand Down Expand Up @@ -261,25 +287,27 @@ Rickshaw.Graph.RangeSlider.Preview = Rickshaw.Class.create({
leftHandle.enter()
.append("rect")
.attr('width', this.config.frameHandleThickness)
.attr('height', this.config.height)
.style("cursor", "ew-resize")
.style("fill-opacity", "0")
.classed("left_handle", true);

leftHandle.attr('x', this.currentFrame[0]);
leftHandle
.attr('x', this.currentFrame[0])
.attr('height', this.config.height);

var rightHandle = this.svg.selectAll("rect.right_handle")
.data([null]);

rightHandle.enter()
.append("rect")
.attr('width', this.config.frameHandleThickness)
.attr('height', this.config.height)
.style("cursor", "ew-resize")
.style("fill-opacity", "0")
.classed("right_handle", true);

rightHandle.attr('x', this.currentFrame[1] + this.config.frameHandleThickness);
rightHandle
.attr('x', this.currentFrame[1] + this.config.frameHandleThickness)
.attr('height', this.config.height);
},

_renderMiddle: function() {
Expand All @@ -289,14 +317,14 @@ Rickshaw.Graph.RangeSlider.Preview = Rickshaw.Class.create({

middleHandle.enter()
.append("rect")
.attr('height', this.config.height)
.style("cursor", "move")
.style("fill-opacity", "0")
.classed("middle_handle", true);

middleHandle
.attr('width', Math.max(0, this.currentFrame[1] - this.currentFrame[0]))
.attr('x', this.currentFrame[0] + this.config.frameHandleThickness);
.attr('x', this.currentFrame[0] + this.config.frameHandleThickness)
.attr('height', this.config.height);
},

_registerMouseEvents: function() {
Expand Down

0 comments on commit 972c2bd

Please sign in to comment.