You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by "techy2 (via GitHub)" <gi...@apache.org> on 2025/03/14 01:42:54 UTC
[I] [Feature] pin dataZoom to left or right side of chart [echarts]
techy2 opened a new issue, #20825:
URL: https://github.com/apache/echarts/issues/20825
### What problem does this feature solve?
I have modified echarts.js to allow conditional pinning of the left or right end a chart (bar, candlestick, etc...)
I am not sure how to modify the src code as it look slightly different from echarts.js
here is the patch if someone would be good enough to integrate it into the right places
--- ../echarts.js.orig Thu Mar 13 18:33:05 2025
+++ echarts.js Thu Mar 13 18:36:09 2025
@@ -71820,7 +71820,8 @@
*/
function retrieveRawOption(option) {
var ret = {};
- each(['start', 'end', 'startValue', 'endValue', 'throttle'], function (name) {
+// MODIFIED, get anchor value for pinning chart to left or right end during dataZoom
+ each(['start', 'end', 'startValue', 'endValue', 'throttle', 'anchor'], function (name) {
option.hasOwnProperty(name) && (ret[name] = option[name]);
});
return ret;
@@ -80120,8 +80121,14 @@
var directionInfo = getDirectionInfo[coordSysMainType](null, [e.originX, e.originY], axisModel, controller, coordSysInfo);
var percentPoint = (directionInfo.signal > 0 ? directionInfo.pixelStart + directionInfo.pixelLength - directionInfo.pixel : directionInfo.pixel - directionInfo.pixelStart) / directionInfo.pixelLength * (range[1] - range[0]) + range[0];
var scale = Math.max(1 / e.scale, 0);
- range[0] = (range[0] - percentPoint) * scale + percentPoint;
- range[1] = (range[1] - percentPoint) * scale + percentPoint;
+// MODIFIED, logic to conditionally pin the plot to the left or right side of the viewBox
+ var anchor = this.__model?.option?.anchor || null;
+ if (anchor !== 'start') { // pin zoom to left side of the X axis viewBox
+ range[0] = (range[0] - percentPoint) * scale + percentPoint;
+ }
+ if (anchor !== 'end') { // pin zoom to the right side of the X axis viewBox
+ range[1] = (range[1] - percentPoint) * scale + percentPoint;
+ }
// Restrict range.
var minMaxSpan = this.dataZoomModel.findRepresentativeAxisProxy().getMinMaxSpan();
sliderMove(0, range, [0, 100], 0, minMaxSpan.minSpan, minMaxSpan.maxSpan);
### What does the proposed API look like?
dataZoom: [
{
type: 'inside',
xAxisIndex: [0, 1],
start: 10,
end: 100,
anchor: 'end', // acceptable values 'start', 'end'
},
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Feature] pin dataZoom to left or right side of chart [echarts]
Posted by "Justin-ZS (via GitHub)" <gi...@apache.org>.
Justin-ZS commented on issue #20825:
URL: https://github.com/apache/echarts/issues/20825#issuecomment-2724225566
It looks like this file
https://github.com/apache/echarts/blob/6cba74cbe1ac389388e4ea762a4ce431263524ef/src/component/dataZoom/InsideZoomView.ts#L91-L97
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Feature] pin dataZoom to left or right side of chart [echarts]
Posted by "techy2 (via GitHub)" <gi...@apache.org>.
techy2 commented on issue #20825:
URL: https://github.com/apache/echarts/issues/20825#issuecomment-2723118150
I didn't expect the form to try and HTML format the diff, sigh.... here it is without the attempted formatting
<pre>
--- ../echarts.js.orig Thu Mar 13 18:33:05 2025
+++ echarts.js Thu Mar 13 18:36:09 2025
@@ -71820,7 +71820,8 @@
*/
function retrieveRawOption(option) {
var ret = {};
- each(['start', 'end', 'startValue', 'endValue', 'throttle'], function (name) {
+// MODIFIED, get anchor value for pinning chart to left or right end during dataZoom
+ each(['start', 'end', 'startValue', 'endValue', 'throttle', 'anchor'], function (name) {
option.hasOwnProperty(name) && (ret[name] = option[name]);
});
return ret;
@@ -80120,8 +80121,14 @@
var directionInfo = getDirectionInfo[coordSysMainType](null, [e.originX, e.originY], axisModel, controller, coordSysInfo);
var percentPoint = (directionInfo.signal > 0 ? directionInfo.pixelStart + directionInfo.pixelLength - directionInfo.pixel : directionInfo.pixel - directionInfo.pixelStart) / directionInfo.pixelLength * (range[1] - range[0]) + range[0];
var scale = Math.max(1 / e.scale, 0);
- range[0] = (range[0] - percentPoint) * scale + percentPoint;
- range[1] = (range[1] - percentPoint) * scale + percentPoint;
+// MODIFIED, logic to conditionally pin the plot to the left or right side of the viewBox
+ var anchor = this.__model?.option?.anchor || null;
+ if (anchor !== 'start') { // pin zoom to left side of the X axis viewBox
+ range[0] = (range[0] - percentPoint) * scale + percentPoint;
+ }
+ if (anchor !== 'end') { // pin zoom to the right side of the X axis viewBox
+ range[1] = (range[1] - percentPoint) * scale + percentPoint;
+ }
// Restrict range.
var minMaxSpan = this.dataZoomModel.findRepresentativeAxisProxy().getMinMaxSpan();
sliderMove(0, range, [0, 100], 0, minMaxSpan.minSpan, minMaxSpan.maxSpan);
</pre>
### ### ###
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Feature] pin dataZoom to left or right side of chart [echarts]
Posted by "techy2 (via GitHub)" <gi...@apache.org>.
techy2 closed issue #20825: [Feature] pin dataZoom to left or right side of chart
URL: https://github.com/apache/echarts/issues/20825
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Feature] pin dataZoom to left or right side of chart [echarts]
Posted by "techy2 (via GitHub)" <gi...@apache.org>.
techy2 commented on issue #20825:
URL: https://github.com/apache/echarts/issues/20825#issuecomment-2726310204
ok, i was not sure whether or not to add it there or not
thanks. Created PR
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org