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.

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

Breaking change in fixRange method #928

Open
K1mpe opened this issue Feb 12, 2025 · 3 comments
Open

Breaking change in fixRange method #928

K1mpe opened this issue Feb 12, 2025 · 3 comments

Comments

@K1mpe
Copy link

K1mpe commented Feb 12, 2025

When running this code:
function fixRange(range, {min, max, minLimit, maxLimit}, originalLimits) { const offset = (range - max + min) / 2; min -= offset; max += offset; const origMin = originalLimits.min.options ?? originalLimits.min.scale; const origMax = originalLimits.max.options ?? originalLimits.max.scale; const epsilon = range / 1e6; if (helpers.almostEquals(min, origMin, epsilon)) { min = origMin; } if (helpers.almostEquals(max, origMax, epsilon)) { max = origMax; } if (min < minLimit) { min = minLimit; max = Math.min(minLimit + range, maxLimit); } else if (max > maxLimit) { max = maxLimit; min = Math.max(maxLimit - range, minLimit); } return {min, max}; }

originalLimits.min.options is a object, causing the helpers.almostEquals() to throw a exception.

My code is made for version V2.0.1 and did work perfectly then, but does not work for V2.1.0 or V2.2.0.
Any breaking changes in the code implementation since then?

This is my implementation of ChartJs

`chart = new Chart($('#uicabbd488c7ab04e589f591f67ebbfcd4c')[0], {
type: 'line',

    data:{
        datasets: datasets,
    },

    options:{
        responsive: true,
        maintainAspectRatio: false,
        parsing: {
            xAxisKey: 'd',
            yAxisKey: 'v'
        },

        scales: {
            x: {
                min: minDateTime,
                max: maxDateTime,
                type: 'time',
                time: {
                    displayFormats:{

                            day: 'DD/MM',
                        
                            hour: 'DD/MM - HH:mm',
                        
                            minute: 'HH:mm',
                        
                            second: 'HH:mm:ss',
                                                }
                },
                ticks: {
                    major: {
                        enabled: true,
                    },
                    color: (context) => context.tick && context.tick.major && '#FF0000',
                    font: function (context) {
                        if (context.tick && context.tick.major) {
                            return {
                                weight: 'bold'
                            };
                        }
                    }
                }

            },
        },

    
        plugins:{
            legend: {
                onClick:(ev, legendItem, legend) => {
                    let graph;
                    EachGraph(g => {
                        if(g.index == legendItem.datasetIndex)
                            graph = g;
                    })
                    setDataSetVisibility(graph.id, null);
                },
                display: true,
                position: 'top'
            },
            title:{
                display: false,
            },
            zoom:
            {
                limits:{
                    x:{
                    }
                },
                pan: {
                    enabled: true,
                    mode: 'x',
                    onPanComplete: afterChartMove,
                },
                zoom: {

                    wheel: {
                        enabled: true,
                    },
                    pinch: {
                        enabled: true,
                    },
                    mode: 'x',
                    onZoomComplete: afterChartMove,
                    onZoomStart: (args)=>{
                        var range = args.chart.scales.x.max - args.chart.scales.x.min;

                            if(0 > args.event.deltaY  && 60000 >= range)
                                return false;
                            
                                if(args.event.deltaY > 0 && range >= 31622400000)
                                return false;
                            
                        return true;
                        }
                    },
                },
            
            },
        },
    });
}`
@joshkel
Copy link
Contributor

joshkel commented Feb 13, 2025

@K1mpe, yes, it looks like this was changed in 2.1.0 as part of #888.

I'm guessing there's a bug with its date/time handling. What are minDateTime and maxDateTime in your example? What date/time adapter are you using?

@K1mpe
Copy link
Author

K1mpe commented Feb 14, 2025

let minDateTime = moment("2025-02-14 08:05:39", moment.ISO_8601);
let maxDateTime = moment("2025-02-14 08:06:39", moment.ISO_8601);

i'm using [email protected]

All date/time values i have use this same format

@kurkle
Copy link
Member

kurkle commented Feb 15, 2025

Looks like I forgot to apply scale.parse to the min/max option.

joshkel added a commit to joshkel/Chart.js that referenced this issue Feb 15, 2025
While investigating chartjs/chartjs-plugin-zoom#928, I found that `isNonPrimitive` will throw TypeError on a Moment.js object after it's passed through Chart.js's options proxy, because the value has its `Symbol.toPrimitive`, `toString`, and `valueOf` all set to null.

See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#string_coercion.

Since isNumber appears to be a low-level function that can take any arbitrary input, it seems worth letting it handle this case.
joshkel added a commit to joshkel/Chart.js that referenced this issue Feb 15, 2025
While investigating chartjs/chartjs-plugin-zoom#928, I found that `isNonPrimitive` will throw TypeError on a Moment.js object after it's passed through Chart.js's options proxy, because the object has its `Symbol.toPrimitive`, `toString`, and `valueOf` all set to null.

(See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#string_coercion for background reading.)

Since isNumber appears to be a low-level function that can take any arbitrary input, it seems worth letting it handle this case.
etimberg pushed a commit to chartjs/Chart.js that referenced this issue Feb 16, 2025
While investigating chartjs/chartjs-plugin-zoom#928, I found that `isNonPrimitive` will throw TypeError on a Moment.js object after it's passed through Chart.js's options proxy, because the object has its `Symbol.toPrimitive`, `toString`, and `valueOf` all set to null.

(See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#string_coercion for background reading.)

Since isNumber appears to be a low-level function that can take any arbitrary input, it seems worth letting it handle this case.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants