Skip to content

Commit f099633

Browse files
benmccannbenmccann
authored
Cleanup options handling (#221)
Cleanup options handling
1 parent b2f520d commit f099633

File tree

9 files changed

+223
-177
lines changed

9 files changed

+223
-177
lines changed

‎README.md‎

Lines changed: 60 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -12,67 +12,69 @@ Zooming is done via the mouse wheel or via a pinch gesture. [Hammer JS](http://h
1212
To configure the zoom and pan plugin, you can simply add new config options to your chart config.
1313

1414
```javascript
15-
{
16-
// Container for pan options
17-
pan: {
18-
// Boolean to enable panning
19-
enabled: true,
20-
21-
// Panning directions. Remove the appropriate direction to disable
22-
// Eg. 'y' would only allow panning in the y direction
23-
mode: 'xy',
24-
rangeMin: {
25-
// Format of min pan range depends on scale type
26-
x: null,
27-
y: null
28-
},
29-
rangeMax: {
30-
// Format of max pan range depends on scale type
31-
x: null,
32-
y: null
33-
},
34-
// Function called once panning is completed
35-
// Useful for dynamic data loading
36-
onPan: function({chart}) { console.log(`I was panned!!!`); }
37-
},
38-
39-
// Container for zoom options
15+
plugins: {
4016
zoom: {
41-
// Boolean to enable zooming
42-
enabled: true,
43-
44-
// Enable drag-to-zoom behavior
45-
drag: true,
46-
47-
// Drag-to-zoom rectangle style can be customized
48-
// drag: {
49-
// borderColor: 'rgba(225,225,225,0.3)'
50-
// borderWidth: 5,
51-
// backgroundColor: 'rgb(225,225,225)'
52-
// },
53-
54-
// Zooming directions. Remove the appropriate direction to disable
55-
// Eg. 'y' would only allow zooming in the y direction
56-
mode: 'xy',
57-
58-
rangeMin: {
59-
// Format of min zoom range depends on scale type
60-
x: null,
61-
y: null
17+
// Container for pan options
18+
pan: {
19+
// Boolean to enable panning
20+
enabled: true,
21+
22+
// Panning directions. Remove the appropriate direction to disable
23+
// Eg. 'y' would only allow panning in the y direction
24+
mode: 'xy',
25+
rangeMin: {
26+
// Format of min pan range depends on scale type
27+
x: null,
28+
y: null
29+
},
30+
rangeMax: {
31+
// Format of max pan range depends on scale type
32+
x: null,
33+
y: null
34+
},
35+
// Function called once panning is completed
36+
// Useful for dynamic data loading
37+
onPan: function({chart}) { console.log(`I was panned!!!`); }
6238
},
63-
rangeMax: {
64-
// Format of max zoom range depends on scale type
65-
x: null,
66-
y: null
67-
},
68-
69-
// Speed of zoom via mouse wheel
70-
// (percentage of zoom on a wheel event)
71-
speed: 0.1,
7239

73-
// Function called once zooming is completed
74-
// Useful for dynamic data loading
75-
onZoom: function({chart}) { console.log(`I was zoomed!!!`); }
40+
// Container for zoom options
41+
zoom: {
42+
// Boolean to enable zooming
43+
enabled: true,
44+
45+
// Enable drag-to-zoom behavior
46+
drag: true,
47+
48+
// Drag-to-zoom rectangle style can be customized
49+
// drag: {
50+
// borderColor: 'rgba(225,225,225,0.3)'
51+
// borderWidth: 5,
52+
// backgroundColor: 'rgb(225,225,225)'
53+
// },
54+
55+
// Zooming directions. Remove the appropriate direction to disable
56+
// Eg. 'y' would only allow zooming in the y direction
57+
mode: 'xy',
58+
59+
rangeMin: {
60+
// Format of min zoom range depends on scale type
61+
x: null,
62+
y: null
63+
},
64+
rangeMax: {
65+
// Format of max zoom range depends on scale type
66+
x: null,
67+
y: null
68+
},
69+
70+
// Speed of zoom via mouse wheel
71+
// (percentage of zoom on a wheel event)
72+
speed: 0.1,
73+
74+
// Function called once zooming is completed
75+
// Useful for dynamic data loading
76+
onZoom: function({chart}) { console.log(`I was zoomed!!!`); }
77+
}
7678
}
7779
}
7880
```

‎samples/pan-bar.html‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -68,23 +68,27 @@
6868
display: true,
6969
text: 'Chart.js Bar Chart'
7070
},
71-
pan: {
72-
enabled: true,
73-
mode: 'x',
74-
speed: 10,
75-
threshold: 10
76-
},
77-
zoom: {
78-
enabled: true,
79-
mode: 'y'
80-
},
8171
scales: {
8272
xAxes: [{
8373
ticks: {
8474
min: 'March',
8575
max: 'August'
8676
}
8777
}]
78+
},
79+
plugins: {
80+
zoom: {
81+
pan: {
82+
enabled: true,
83+
mode: 'x',
84+
speed: 10,
85+
threshold: 10
86+
},
87+
zoom: {
88+
enabled: true,
89+
mode: 'y'
90+
}
91+
}
8892
}
8993
}
9094
});

‎samples/zoom-bar-x.html‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -68,22 +68,26 @@
6868
display: true,
6969
text: 'Chart.js Bar Chart'
7070
},
71-
pan: {
72-
enabled: true,
73-
mode: 'xy' // is panning about the y axis neccessary for bar charts?
74-
},
75-
zoom: {
76-
enabled: true,
77-
mode: 'x',
78-
sensitivity: 3
79-
},
8071
scales: {
8172
xAxes: [{
8273
ticks: {
8374
min: 'February-16',
8475
max: 'June-16'
8576
}
8677
}]
78+
},
79+
plugins: {
80+
zoom: {
81+
pan: {
82+
enabled: true,
83+
mode: 'xy' // is panning about the y axis neccessary for bar charts?
84+
},
85+
zoom: {
86+
enabled: true,
87+
mode: 'x',
88+
sensitivity: 3
89+
}
90+
}
8791
}
8892
}
8993
});

‎samples/zoom-bar.html‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -68,21 +68,25 @@
6868
display: true,
6969
text: 'Chart.js Bar Chart'
7070
},
71-
pan: {
72-
enabled: true,
73-
mode: 'y'
74-
},
75-
zoom: {
76-
enabled: true,
77-
mode: 'y'
78-
},
7971
scales: {
8072
xAxes: [{
8173
ticks: {
8274
min: 'February',
8375
max: 'June'
8476
}
8577
}]
78+
},
79+
plugins: {
80+
zoom: {
81+
pan: {
82+
enabled: true,
83+
mode: 'y'
84+
},
85+
zoom: {
86+
enabled: true,
87+
mode: 'y'
88+
}
89+
}
8690
}
8791
}
8892
});

‎samples/zoom-horizontal-bar.html‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -67,21 +67,25 @@
6767
display: true,
6868
text: 'Chart.js Bar Chart'
6969
},
70-
pan: {
71-
enabled: true,
72-
mode: 'y'
73-
},
74-
zoom: {
75-
enabled: true,
76-
mode: 'xy'
77-
},
7870
scales: {
7971
yAxes: [{
8072
ticks: {
8173
min: 'April-16',
8274
max: 'August-16'
8375
}
8476
}]
77+
},
78+
plugins: {
79+
zoom: {
80+
pan: {
81+
enabled: true,
82+
mode: 'y'
83+
},
84+
zoom: {
85+
enabled: true,
86+
mode: 'xy'
87+
}
88+
}
8589
}
8690
}
8791
});

‎samples/zoom-log.html‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -175,16 +175,20 @@
175175
}
176176
}]
177177
},
178-
pan: {
179-
enabled: true,
180-
mode: 'xy',
181-
xScale0: {
182-
max: 1e4
178+
plugins: {
179+
zoom: {
180+
pan: {
181+
enabled: true,
182+
mode: 'xy',
183+
xScale0: {
184+
max: 1e4
185+
}
186+
},
187+
zoom: {
188+
enabled: true,
189+
mode: 'xy'
190+
}
183191
}
184-
},
185-
zoom: {
186-
enabled: true,
187-
mode: 'xy'
188192
}
189193
}
190194
});

‎samples/zoom-time.html‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -105,11 +105,15 @@
105105
}
106106
}]
107107
},
108-
zoom: {
109-
enabled: true,
110-
drag: true,
111-
mode: 'x',
112-
speed: 0.05
108+
plugins: {
109+
zoom: {
110+
zoom: {
111+
enabled: true,
112+
drag: true,
113+
mode: 'x',
114+
speed: 0.05
115+
}
116+
}
113117
}
114118
}
115119
};
@@ -127,8 +131,10 @@
127131
};
128132

129133
window.toggleDragMode = function() {
130-
var zoomOptions = window.myLine.options.zoom;
134+
var chart = window.myLine;
135+
var zoomOptions = chart.options.plugins.zoom.zoom;
131136
zoomOptions.drag = !zoomOptions.drag;
137+
chart.update();
132138
document.getElementById('drag-switch').innerText = zoomOptions.drag ? 'Disable drag mode' : 'Enable drag mode';
133139
};
134140

‎samples/zoom.html‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -127,13 +127,17 @@
127127
}
128128
}]
129129
},
130-
pan: {
131-
enabled: true,
132-
mode: 'xy'
133-
},
134-
zoom: {
135-
enabled: true,
136-
mode: 'xy'
130+
plugins: {
131+
zoom: {
132+
pan: {
133+
enabled: true,
134+
mode: 'xy'
135+
},
136+
zoom: {
137+
enabled: true,
138+
mode: 'xy'
139+
}
140+
}
137141
},
138142
onClick: function(e) {
139143
// eslint-disable-next-line no-alert

0 commit comments

Comments
 (0)