Skip to content

Commit c2585ea

Browse files
kurklekurkle
authored
Fix drag-zoom and pan for non-linear scales (#488)
* Fix drag-zoom and pan for non-linear scales * Fix non-linear pan against limit * Test and fix category zoom to and from 1 category * CC * Add test for category limits * Add reject test for drag zoom * Add api test
1 parent e8bdf4e commit c2585ea

File tree

19 files changed

+877
-60
lines changed

19 files changed

+877
-60
lines changed

‎docs/.vuepress/config.js

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -78,13 +78,27 @@ module.exports = {
7878
],
7979
'/samples/': [
8080
'basic',
81-
'over-scale-mode',
82-
'bar',
83-
'log',
84-
'time',
85-
'drag',
81+
{
82+
title: 'Wheel Zoom',
83+
children: [
84+
'wheel/category',
85+
'wheel/log',
86+
'wheel/time',
87+
'wheel/over-scale-mode',
88+
'wheel/click-zoom',
89+
]
90+
},
91+
{
92+
title: 'Drag to Zoom',
93+
children: [
94+
'drag/category',
95+
'drag/linear',
96+
'drag/log',
97+
'drag/time',
98+
'drag/timeseries',
99+
]
100+
},
86101
'api',
87-
'click-zoom',
88102
'pan-region',
89103
],
90104
}

‎docs/samples/drag/category.md

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
# Category Scale
2+
3+
Zooming is performed by clicking and selecting an area over the chart with the mouse. Pan is activated by keeping `ctrl` pressed.
4+
5+
```js chart-editor
6+
// <block:data:1>
7+
const DATA_COUNT = 20;
8+
const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100};
9+
const data = {
10+
labels: Utils.months({count: DATA_COUNT}),
11+
datasets: [{
12+
label: 'Dataset 1',
13+
borderColor: Utils.randomColor(0.7),
14+
backgroundColor: Utils.randomColor(0.5),
15+
data: Utils.numbers(NUMBER_CFG),
16+
}, {
17+
label: 'Dataset 2',
18+
borderColor: Utils.randomColor(0.7),
19+
backgroundColor: Utils.randomColor(0.5),
20+
data: Utils.numbers(NUMBER_CFG),
21+
}, {
22+
label: 'Dataset 3',
23+
borderColor: Utils.randomColor(0.7),
24+
backgroundColor: Utils.randomColor(0.5),
25+
data: Utils.numbers(NUMBER_CFG),
26+
}]
27+
};
28+
// </block:data>
29+
30+
// <block:scales:2>
31+
const scaleOpts = {
32+
grid: {
33+
borderColor: Utils.randomColor(1),
34+
color: 'rgba( 0, 0, 0, 0.1)',
35+
},
36+
title: {
37+
display: true,
38+
text: (ctx) => ctx.scale.axis + ' axis',
39+
}
40+
};
41+
const scales = {
42+
x: {
43+
type: 'category',
44+
},
45+
y: {
46+
type: 'linear',
47+
ticks: {
48+
callback: (val, index, ticks) => index === 0 || index === ticks.length - 1 ? null : val,
49+
},
50+
},
51+
};
52+
Object.keys(scales).forEach(scale => Object.assign(scales[scale], scaleOpts));
53+
// </block:scales>
54+
55+
// <block:config:0>
56+
const config = {
57+
type: 'bar',
58+
data: data,
59+
options: {
60+
scales: scales,
61+
plugins: {
62+
tooltip: false,
63+
zoom: {
64+
pan: {
65+
enabled: true,
66+
mode: 'x',
67+
modifierKey: 'ctrl',
68+
},
69+
zoom: {
70+
enabled: true,
71+
drag: true,
72+
mode: 'x',
73+
},
74+
}
75+
},
76+
}
77+
};
78+
// </block:config>
79+
80+
const actions = [
81+
{
82+
name: 'Reset zoom',
83+
handler(chart) {
84+
chart.resetZoom();
85+
}
86+
}
87+
];
88+
89+
module.exports = {
90+
actions,
91+
config,
92+
};
93+
```

‎docs/samples/drag.md renamed to ‎docs/samples/drag/linear.md

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Drag To Zoom
1+
# Linear Scales
22

33
Zooming is performed by clicking and selecting an area over the chart with the mouse. Pan is activated by keeping `ctrl` pressed.
44

@@ -57,6 +57,7 @@ const dragColor = Utils.randomColor(0.4);
5757
const zoomOptions = {
5858
pan: {
5959
enabled: true,
60+
mode: 'xy',
6061
modifierKey: 'ctrl',
6162
},
6263
zoom: {
@@ -87,9 +88,6 @@ const config = {
8788
text: (ctx) => 'Zoom: ' + zoomStatus()
8889
}
8990
},
90-
onClick(e) {
91-
console.log(e.type);
92-
}
9391
}
9492
};
9593
// </block:config>
@@ -112,6 +110,5 @@ const actions = [
112110
module.exports = {
113111
actions,
114112
config,
115-
output: 'Clicks are logged here'
116113
};
117114
```

‎docs/samples/drag/log.md

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
# Logarithmic Scale
2+
3+
Zooming is performed by clicking and selecting an area over the chart with the mouse. Pan is activated by keeping `ctrl` pressed.
4+
5+
```js chart-editor
6+
// <block:data:2>
7+
const data = {
8+
datasets: [{
9+
label: 'V(node2)',
10+
borderColor: Utils.randomColor(0.4),
11+
backgroundColor: Utils.randomColor(0.1),
12+
pointBorderColor: Utils.randomColor(0.7),
13+
pointBackgroundColor: Utils.randomColor(0.5),
14+
pointBorderWidth: 1,
15+
data: [{
16+
x: 1,
17+
y: -1.711e-2,
18+
}, {
19+
x: 1.26,
20+
y: -2.708e-2,
21+
}, {
22+
x: 1.58,
23+
y: -4.285e-2,
24+
}, {
25+
x: 2.0,
26+
y: -6.772e-2,
27+
}, {
28+
x: 2.51,
29+
y: -1.068e-1,
30+
}, {
31+
x: 3.16,
32+
y: -1.681e-1,
33+
}, {
34+
x: 3.98,
35+
y: -2.635e-1,
36+
}, {
37+
x: 5.01,
38+
y: -4.106e-1,
39+
}, {
40+
x: 6.31,
41+
y: -6.339e-1,
42+
}, {
43+
x: 7.94,
44+
y: -9.659e-1,
45+
}, {
46+
x: 10.00,
47+
y: -1.445,
48+
}, {
49+
x: 12.6,
50+
y: -2.110,
51+
}, {
52+
x: 15.8,
53+
y: -2.992,
54+
}, {
55+
x: 20.0,
56+
y: -4.102,
57+
}, {
58+
x: 25.1,
59+
y: -5.429,
60+
}, {
61+
x: 31.6,
62+
y: -6.944,
63+
}, {
64+
x: 39.8,
65+
y: -8.607,
66+
}, {
67+
x: 50.1,
68+
y: -1.038e1,
69+
}, {
70+
x: 63.1,
71+
y: -1.223e1,
72+
}, {
73+
x: 79.4,
74+
y: -1.413e1,
75+
}, {
76+
x: 100.00,
77+
y: -1.607e1,
78+
}, {
79+
x: 126,
80+
y: -1.803e1,
81+
}, {
82+
x: 158,
83+
y: -2e1,
84+
}, {
85+
x: 200,
86+
y: -2.199e1,
87+
}, {
88+
x: 251,
89+
y: -2.398e1,
90+
}, {
91+
x: 316,
92+
y: -2.597e1,
93+
}, {
94+
x: 398,
95+
y: -2.797e1,
96+
}, {
97+
x: 501,
98+
y: -2.996e1,
99+
}, {
100+
x: 631,
101+
y: -3.196e1,
102+
}, {
103+
x: 794,
104+
y: -3.396e1,
105+
}, {
106+
x: 1000,
107+
y: -3.596e1
108+
}]
109+
}]
110+
};
111+
// </block:data>
112+
113+
// <block:scales:1>
114+
const scales = {
115+
x: {
116+
type: 'logarithmic',
117+
ticks: {
118+
callback: function(tick) {
119+
const remain = tick / (Math.pow(10, Math.floor(Math.log10(tick))));
120+
if (remain === 1 || remain === 2 || remain === 5) {
121+
return tick.toString() + 'Hz';
122+
}
123+
return '';
124+
},
125+
maxRotation: 0
126+
},
127+
title: {
128+
display: true,
129+
text: 'Frequency',
130+
},
131+
}
132+
};
133+
// </block:scales>
134+
135+
// <block:config:0>
136+
const config = {
137+
type: 'scatter',
138+
data: data,
139+
options: {
140+
scales: scales,
141+
plugins: {
142+
zoom: {
143+
pan: {
144+
enabled: true,
145+
mode: 'xy',
146+
modifierKey: 'ctrl',
147+
},
148+
zoom: {
149+
enabled: true,
150+
drag: true,
151+
mode: 'xy',
152+
},
153+
}
154+
},
155+
}
156+
};
157+
// </block:config>
158+
159+
const actions = [
160+
{
161+
name: 'Reset zoom',
162+
handler(chart) {
163+
chart.resetZoom();
164+
}
165+
}
166+
];
167+
168+
module.exports = {
169+
actions,
170+
config,
171+
};
172+
```

0 commit comments

Comments
 (0)