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

Jump to bottom

Fixes plugin on Chart.js 3.5.x / 3.6.x. #88

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Fixes plugin on Chart.js 3.5.x / 3.6.x. #88

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f334ced
Fixes plugin on Chart.js 3.5.x / 3.6.x.
TimUnderhay Oct 23, 2021
4e5ec25
Bug fixes.
TimUnderhay Oct 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
60 changes: 33 additions & 27 deletions src/trace.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,13 +34,14 @@ export default {

id: 'crosshair',

afterInit: function(chart) {
start: function(chart) {

if (!chart.config.options.scales.x) {
return
const xScaleOptions = chart.config.options.scales.x || chart.config.options.scales.xAxes;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would be better to make this a variable that the user can configure in the options for the plugin so that all names you give to your x axis are supported.

Then if no name has been given you can fall back to chart.js's default x axis scale id which is x

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You are, of course, welcome to make any changes you desire.

if (!xScaleOptions) {
return;
}

var xScaleType = chart.config.options.scales.x.type
var xScaleType = xScaleOptions.type

if (xScaleType !== 'linear' && xScaleType !== 'time' && xScaleType !== 'category' && xScaleType !== 'logarithmic') {
return;
Expand Down Expand Up @@ -167,15 +168,17 @@ export default {

afterEvent: function(chart, event) {

if (chart.config.options.scales.x.length == 0) {
return
const xScaleOptions = chart.config.options.scales.x || chart.config.options.scales.xAxes;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above


if (xScaleOptions.length == 0) {
return;
}

let e = event.event

var xScaleType = chart.config.options.scales.x.type
var xScaleType = xScaleOptions.type

if (xScaleType !== 'linear' && xScaleType !== 'time' && xScaleType !== 'category' && xscaleType !== 'logarithmic') {
if (xScaleType !== 'linear' && xScaleType !== 'time' && xScaleType !== 'category' && xScaleType !== 'logarithmic') {
return;
}

Expand Down Expand Up @@ -278,6 +281,7 @@ export default {
},

resetZoom: function(chart) {
const xAxisName = chart.config.options.scales.x ? 'x' : chart.config.options.scales.xAxes ? 'xAxes' : undefined;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same as above, just take it from the options and if not specify fall back to default x


var stop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var update = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
Expand All @@ -293,16 +297,16 @@ export default {

// reset original xRange
if (chart.crosshair.originalXRange.min) {
chart.options.scales.x.min = chart.crosshair.originalXRange.min;
chart.options.scales[xAxisName].min = chart.crosshair.originalXRange.min;
chart.crosshair.originalXRange.min = null;
} else {
delete chart.options.scales.x.min;
delete chart.options.scales[xAxisName].min;
}
if (chart.crosshair.originalXRange.max) {
chart.options.scales.x.max = chart.crosshair.originalXRange.max;
chart.options.scales[xAxisName].max = chart.crosshair.originalXRange.max;
chart.crosshair.originalXRange.max = null;
} else {
delete chart.options.scales.x.max;
delete chart.options.scales[xAxisName].max;
}
}

Expand All @@ -327,37 +331,39 @@ export default {
}
},

doZoom: function(chart, start, end) {

doZoom: function(chart, start, end) {
const xAxisName = chart.config.options.scales.x ? 'x' : chart.config.options.scales.xAxes ? 'xAxes' : undefined;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same as above

const xScaleOptions = chart.config.options.scales[xAxisName];
// swap start/end if user dragged from right to left
if (start > end) {
var tmp = start;
start = end;
end = tmp;
}

// notify delegate
var beforeZoomCallback = valueOrDefault(chart.options.plugins.crosshair.callbacks ? chart.options.plugins.crosshair.callbacks.beforeZoom : undefined, defaultOptions.callbacks.beforeZoom);
var beforeZoomCallback = valueOrDefault(chart.config.options.plugins.crosshair.callbacks ? chart.config.options.plugins.crosshair.callbacks.beforeZoom : undefined, defaultOptions.callbacks.beforeZoom);

if (!beforeZoomCallback(start, end)) {
return false;
}

chart.crosshair.dragStarted = false
chart.crosshair.dragStarted = false;

if (chart.options.scales.x.min && chart.crosshair.originalData.length === 0) {
chart.crosshair.originalXRange.min = chart.options.scales.x.min;
if (chart.options.scales[xAxisName].min && chart.crosshair.originalData.length === 0) {
chart.crosshair.originalXRange.min = chart.options.scales[xAxisName].min;
}
if (chart.options.scales.x.max && chart.crosshair.originalData.length === 0) {
chart.crosshair.originalXRange.max = chart.options.scales.x.max;
if (chart.options.scales[xAxisName].max && chart.crosshair.originalData.length === 0) {
chart.crosshair.originalXRange.max = chart.options.scales[xAxisName].max;
}

if (!chart.crosshair.button) {
// add restore zoom button
var button = document.createElement('button');

var buttonText = this.getOption(chart, 'zoom', 'zoomButtonText')
var buttonClass = this.getOption(chart, 'zoom', 'zoomButtonClass')
var buttonText = this.getOption(chart, 'zoom', 'zoomButtonText');
var buttonClass = this.getOption(chart, 'zoom', 'zoomButtonClass');

var buttonLabel = document.createTextNode(buttonText);
button.appendChild(buttonLabel);
Expand All @@ -370,15 +376,15 @@ export default {
}

// set axis scale
chart.options.scales.x.min = start;
chart.options.scales.x.max = end;
chart.options.scales[xAxisName].min = start;
chart.options.scales[xAxisName].max = end;
Comment on lines 378 to +380
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider that if "xAxisName" is "xAxes" then it's an array, not an single object

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not true, all scales in chart.js V3 are single objects


// make a copy of the original data for later restoration

var storeOriginals = (chart.crosshair.originalData.length === 0) ? true : false;


var filterDataset = (chart.config.options.scales.x.type !== 'category')
var filterDataset = (xScaleOptions.type !== 'category');

if(filterDataset) {

Expand All @@ -400,7 +406,7 @@ export default {

var oldData = sourceDataset[oldDataIndex];
// var oldDataX = this.getXScale(chart).getRightValue(oldData)
var oldDataX = oldData.x !== undefined ? oldData.x : NaN
var oldDataX = oldData.x !== undefined ? oldData.x : NaN;

// append one value outside of bounds
if (oldDataX >= start && !started && index > 0) {
Expand Down Expand Up @@ -431,7 +437,7 @@ export default {
chart.crosshair.max = xAxes.max;
}

chart.crosshair.ignoreNextEvents = 2 // ignore next 2 events to prevent starting a new zoom action after updating the chart
chart.crosshair.ignoreNextEvents = 2; // ignore next 2 events to prevent starting a new zoom action after updating the chart

chart.update('none');

Expand Down