search

kurkle / chartjs-chart-treemap

Chart.js module for creating treemap charts
MIT License
139 stars 34 forks source link

Enable zoom plugin on treemap controller #141

Closed stockiNail closed 2 years ago

stockiNail commented 2 years ago

Fix #140 Fix #139 codepen: https://codepen.io/stockinail/pen/bGMQRLN

stockiNail commented 2 years ago

I set this as draft because I have forgotten to manage dataset.tree as array of numbers.

stockiNail commented 2 years ago

@kurkle do you think a sample is needed (importing zoom plugin)? And some tests (even if we didn't do for datalabels)?

stockiNail commented 2 years ago

zoom.drag doesn't seem working...

kurkle commented 2 years ago

@kurkle do you think a sample is needed (importing zoom plugin)? And some tests (even if we didn't do for datalabels)?

A sample would be ok. I'm undecided about tests. Let's do those later in any case.

stockiNail commented 2 years ago

I'm still struggling with zoom.drag. I'm debugging in CHART.JS and in the controller because the scales are changing their min/max without any reason, only click on the chart. I'm going in deep... it seems something related to meta._parsed array.....

kurkle commented 2 years ago

I think it would make things easier to move away from the tree before doing this.

stockiNail commented 2 years ago

I think it would make things easier to move away from the tree before doing this.

Yes, t could be. But if you agree, I'd like to understand better how it works in CHART.JS (forgive my lack of knowledge on this internal parts of code) and probably this analysis will help me (at least me ;)) to understand better how to remove tree option in favor to data (for instance implementing parse method).

stockiNail commented 2 years ago

@kurkle if think I understood why I have issues with zoom.drag. First of all, it's not related to zoom.drag itself but it's related to updateRangeFromParsed method of DatasetController. This method is looking for scale.axis value to calculate the range of the scale and in treemap controller data, we store x and y properties (location of the element). CHART.JS is expecting x and y as property for data structure as object.

I think the final solution is to separate the data parsing and the element size calculation (planned for version 3). Now I'm looking for a workaround.

stockiNail commented 2 years ago

@kurkle Overriding updateRangeFromParsed method, drag is working. Off topic: do you know why zoom plugin draw the "drag" rectangle in the beforeDatasetsDraw hook instead of the after one?

stockiNail commented 2 years ago

Ready for review. Sorry but the updateRangeFromParsed issue was time consuming to fix.

kurkle commented 2 years ago

@kurkle Overriding updateRangeFromParsed method, drag is working. Off topic: do you know why zoom plugin draw the "drag" rectangle in the beforeDatasetsDraw hook instead of the after one?

I think its so that for example points/lines are drawn on top of the drag area, but am not sure.

stockiNail commented 2 years ago

I think its so that for example points/lines are drawn on top of the drag area, but am not sure.

Yes, I didn't add another comment but yes. Nevertheless for treemap, it's quite useless because the drag area is not visible (below the elements). I'd like to submit a PR to zoom plugin, adding drawTime option to zoom.drag (like in the annotation plugin). What do you think?