Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Porting to CHART.JS 3 (using master) #390

Merged
merged 24 commits into from
Nov 21, 2020
Merged

Porting to CHART.JS 3 (using master) #390

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
473cac7
porting to CHART.JS 3 (using master)
stockiNail Oct 22, 2020
2142078
Add args argument to beforeUpdate method of the plugin
stockiNail Oct 27, 2020
4a6043a
changes tests caes, link to chartjs version 3.0.0-beta6
stockiNail Nov 20, 2020
b977402
uses defaults of the plugin instead to set Chart.defauls.plugins
stockiNail Nov 20, 2020
2a4fca0
fixed unit test of 'should be called with default options'
stockiNail Nov 20, 2020
315339b
removes Chart.Zoom.defaults because not used anymore
stockiNail Nov 20, 2020
9d94314
set only master branch to be able to merge
stockiNail Nov 20, 2020
0a04a34
disable travis
stockiNail Nov 20, 2020
d0171a0
try with VM instead of container
stockiNail Nov 20, 2020
fbcda18
fallback to origin configuration
stockiNail Nov 20, 2020
c2620c7
Merge remote-tracking branch 'origin/master' into chartjs3
stockiNail Nov 20, 2020
d43638e
change base path of karma
stockiNail Nov 20, 2020
79dce44
changes basePath of karma config
stockiNail Nov 20, 2020
0978754
changes the basePath to see if GH action works
stockiNail Nov 20, 2020
d3835b5
Reverts the change, going to default Karma basePath (as formerly was)
stockiNail Nov 20, 2020
47b0881
sets actions/checkout@v1 instead of v2
stockiNail Nov 20, 2020
b7143e6
adds cmds on run to see current folder
stockiNail Nov 20, 2020
e006597
changes to lower case Chart.js link into karma config
stockiNail Nov 20, 2020
483d136
changes moment URL on samples and removes pan/zoomTimeScale functions
stockiNail Nov 21, 2020
4bbbc43
move pan/zoomNumericScale function below pan/zoomCategoryScale one
stockiNail Nov 21, 2020
b277bca
removes empty lines where not needed
stockiNail Nov 21, 2020
0abae1e
Newline required at end of file but not found
stockiNail Nov 21, 2020
3534dbf
updates README adding the dependency to Chart.js 3.0.0
stockiNail Nov 21, 2020
6d87274
fixed README missing dot at the end of sentence.
stockiNail Nov 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
# chartjs-plugin-zoom

A zoom and pan plugin for Chart.js. Currently requires Chart.js >= 2.6.0
A zoom and pan plugin for Chart.js >= 3.0.0.

For Chart.js 2.6.0 to 2.9.x support, use [version 0.7.7 of this plugin](https://github.com/chartjs/chartjs-plugin-zoom/releases/tag/v0.7.7).

Panning can be done via the mouse or with a finger.
Zooming is done via the mouse wheel or via a pinch gesture. [Hammer.js](https://hammerjs.github.io/) is used for gesture recognition.
Expand Down
2 changes: 1 addition & 1 deletion karma.conf.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ module.exports = function(karma) {
// {pattern: 'test/fixtures/**/*.js', included: false},
// {pattern: 'test/fixtures/**/*.json', included: false},
// {pattern: 'test/fixtures/**/*.png', included: false},
'node_modules/chart.js/dist/Chart.js',
'node_modules/chart.js/dist/chart.js',
'test/index.js',
'src/plugin.js'
].concat(args.inputs),
Expand Down
37 changes: 4 additions & 33 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"test": "gulp test"
},
"devDependencies": {
"chart.js": "^2.9.2",
"chart.js": "^3.0.0-beta.6",
"coveralls": "^3.1.0",
"eslint": "^5.12.1",
"eslint-config-chartjs": "^0.1.0",
Expand Down Expand Up @@ -49,7 +49,7 @@
"yargs": "^15.3.1"
},
"peerDependencies": {
"chart.js": "^2.6.0"
"chart.js": "^3.0.0-beta.6"
},
"dependencies": {
"hammerjs": "^2.0.8"
Expand Down
12 changes: 5 additions & 7 deletions samples/pan-bar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

<head>
<title>Bar Chart Pan</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.1"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0-beta.6"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="../dist/chartjs-plugin-zoom.min.js"></script>

Expand Down Expand Up @@ -69,12 +69,10 @@
text: 'Chart.js Bar Chart'
},
scales: {
xAxes: [{
ticks: {
min: 'March',
max: 'August'
}
}]
x: {
min: 'March',
max: 'August'
}
},
plugins: {
zoom: {
Expand Down
12 changes: 5 additions & 7 deletions samples/zoom-bar-x.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

<head>
<title>Bar Chart Zoom</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.1"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0-beta.6"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="../dist/chartjs-plugin-zoom.min.js"></script>

Expand Down Expand Up @@ -69,12 +69,10 @@
text: 'Chart.js Bar Chart'
},
scales: {
xAxes: [{
ticks: {
min: 'February-16',
max: 'June-16'
}
}]
x: {
min: 'February-16',
max: 'June-16'
}
},
plugins: {
zoom: {
Expand Down
12 changes: 5 additions & 7 deletions samples/zoom-bar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

<head>
<title>Bar Chart Zoom</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.1"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0-beta.6"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="../dist/chartjs-plugin-zoom.min.js"></script>

Expand Down Expand Up @@ -69,12 +69,10 @@
text: 'Chart.js Bar Chart'
},
scales: {
xAxes: [{
ticks: {
min: 'February',
max: 'June'
}
}]
x: {
min: 'February',
max: 'June'
}
},
plugins: {
zoom: {
Expand Down
17 changes: 8 additions & 9 deletions samples/zoom-horizontal-bar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

<head>
<title>Horizontal Bar Chart Zoom</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.1"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0-beta.6"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="../dist/chartjs-plugin-zoom.min.js"></script>

Expand All @@ -29,7 +29,6 @@
var barChartData = {
labels: ['January-16', 'February-16', 'March-16', 'April-16', 'May-16', 'June-16', 'July-16', 'August-16', 'September-16', 'October-16', 'November-16', 'December-16', 'January-17', 'February-17', 'March-17', 'April-17', 'May-17', 'June-17', 'July-17', 'August-17', 'September-17', 'October-17', 'November-17', 'December-17'],
datasets: [{
label: 'Dataset 1',
backgroundColor: 'rgba(220,220,220,0.5)',
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}, {
Expand All @@ -47,9 +46,10 @@
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myBar = new window.Chart(ctx, {
type: 'horizontalBar',
type: 'bar',
data: barChartData,
options: {
indexAxis: 'y',
// Elements options apply to all of the options unless overridden in a dataset
// In this case, we are setting the border of each bar to be 2px wide and green
elements: {
Expand All @@ -68,12 +68,11 @@
text: 'Chart.js Bar Chart'
},
scales: {
yAxes: [{
ticks: {
min: 'April-16',
max: 'August-16'
}
}]
y: {
type: 'category',
min: 'April-16',
max: 'August-16'
}
},
plugins: {
zoom: {
Expand Down
17 changes: 9 additions & 8 deletions samples/zoom-log.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

<head>
<title>Scatter Chart</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.1"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0-beta.6"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="../dist/chartjs-plugin-zoom.min.js"></script>

Expand Down Expand Up @@ -137,19 +137,20 @@

window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myScatter = window.Chart.Scatter(ctx, {
window.myScatter = new window.Chart(ctx, {
type: 'scatter',
data: scatterChartData,
options: {
title: {
display: true,
text: 'Chart.js Scatter Chart - Logarithmic X-Axis'
},
scales: {
xAxes: [{
x: {
type: 'logarithmic',
position: 'bottom',
ticks: {
userCallback: function(tick) {
callback: function(tick) {
var remain = tick / (Math.pow(10, Math.floor(window.Chart.helpers.log10(tick))));
if (remain === 1 || remain === 2 || remain === 5) {
return tick.toString() + 'Hz';
Expand All @@ -162,19 +163,19 @@
labelString: 'Frequency',
display: true,
},
}],
yAxes: [{
},
y: {
type: 'linear',
ticks: {
userCallback: function(tick) {
callback: function(tick) {
return tick.toFixed(0) + 'dB';
}
},
scaleLabel: {
labelString: 'Voltage',
display: true
}
}]
}
},
plugins: {
zoom: {
Expand Down
13 changes: 7 additions & 6 deletions samples/zoom-time.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,10 @@
<head>
<title>Line Chart</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="../dist/chartjs-plugin-zoom.min.js"></script>
<script src="../dist/chartjs-plugin-zoom.js"></script>

<style>
canvas {
Expand Down Expand Up @@ -87,7 +88,7 @@
text: 'Chart.js Time Scale'
},
scales: {
xAxes: [{
x: {
type: 'time',
time: {
parser: timeFormat,
Expand All @@ -101,13 +102,13 @@
ticks: {
maxRotation: 0
}
}],
yAxes: [{
},
y: {
scaleLabel: {
display: true,
labelString: 'value'
}
}]
}
},
plugins: {
zoom: {
Expand Down
27 changes: 15 additions & 12 deletions samples/zoom.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

<head>
<title>Scatter Chart</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.1"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0-beta.6"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="../dist/chartjs-plugin-zoom.min.js"></script>

Expand Down Expand Up @@ -92,41 +92,44 @@

window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myScatter = window.Chart.Scatter(ctx, {
window.myScatter = new window.Chart(ctx, {
type: 'scatter',
data: scatterChartData,
options: {
title: {
display: true,
text: 'Chart.js Scatter Chart'
},
scales: {
xAxes: [{
x: {
position: 'top',
reverse: true,
gridLines: {
zeroLineColor: 'rgba(0,255,0,1)'
color: function(context) {
return !context.index ? 'rgba(0,255,0,1)' : 'rgba(0,0,0,0.1)';
}
},
scaleLabel: {
display: true,
labelString: 'x axis'
},
ticks: {
maxRotation: 0,
reverse: true
}
}],
yAxes: [{
},
y: {
position: 'right',
reverse: true,
gridLines: {
zeroLineColor: 'rgba(0,255,0,1)'
color: function(context) {
return !context.index ? 'rgba(0,255,0,1)' : 'rgba(0,0,0,0.1)';
}
},
scaleLabel: {
display: true,
labelString: 'y axis'
},
ticks: {
reverse: true
}
}]
}
},
plugins: {
zoom: {
Expand Down
Loading