artus9033 / chartjs-plugin-dragdata

Draggable data points plugin for Chart.js
MIT License
257 stars 55 forks source link

Ability to drag entire range bar without changing its size #80

Open fairking opened 2 years ago

fairking commented 2 years ago

Having the following example https://chrispahm.github.io/chartjs-plugin-dragdata/horizontalFloatingBar.html would be nice to have an ability to drag the entire bar without changing its size.

fairking commented 2 years ago

Made some changes related to that: https://github.com/chrispahm/chartjs-plugin-dragdata/pull/82/commits/6083bf535bb34104e448bf390c6a2e80fea998e3?diff=unified&w=1

Working example: https://fairking.mooo.com/index.php/s/mrNk8sjdbLrqrdD

chrispahm commented 2 years ago

Hey @fairking, this is an AWESOME addition to the library 🎉 💯 ! Sorry for taking me so long to review both of your PRs, I've tried to keep my laptop closed during the holidays...

fairking commented 2 years ago

Please be aware I have not tested it for other chart types. Only stacked horizontal bars (timeline) where the x is time.

The line 155:

let isDate = false;

let dataPointLeft = dataPoint[0]
if (typeof dataPointLeft === 'string' || dataPointLeft instanceof String) {
    dataPointLeft = new Date(dataPointLeft)
}
if (dataPointLeft instanceof Date) {
    isDate = true;
    dataPointLeft = dataPointLeft.getTime()
}

let dataPointRight = dataPoint[1] ?? dataPoint[0]
if (typeof dataPointRight === 'string' || dataPointRight instanceof String) {
    dataPointRight = new Date(dataPointRight)
}
if (dataPointRight instanceof Date) {
    dataPointRight = dataPointRight.getTime()
}

I had an issue here because the date was coming as a string in format 2012-08-20T15:00:00:000Z. But could be an issue from my side when the date is coming from API. I will test it again and check if this code needs to be removed or not.

fairking commented 2 years ago

@chrispahm I've pushed a new commit with some fixes to reflect all types of chart. not tested!!! (tested only locally with my custom chart) (https://github.com/chrispahm/chartjs-plugin-dragdata/pull/82/commits/b30d64915736866b9021dd2461b8b01c2835f0cd)