frappe / charts

Simple, responsive, modern SVG Charts with zero dependencies
https://frappe.io/charts
MIT License
14.9k stars 716 forks source link

isNavigable broken on latest #371

Closed sdmcallister closed 1 year ago

sdmcallister commented 2 years ago

Expected Behaviour

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/frappe-charts@latest"></script>
    <!-- <script src="https://unpkg.com/frappe-charts@1.2.4/dist/frappe-charts.min.iife.js"></script> -->
</head>
<body>
    <div id="chart"></div>
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <script>
        const data = {

            labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am",
                "12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am"
            ],
            datasets: [
                {
                    name: "Some Data", chartType: "bar",
                    values: [25, 40, 30, 35, 8, 52, 17, -4]
                },
                {
                    name: "Another Set", chartType: "line",
                    values: [25, 50, -10, 15.6, 50, 32, 27, 0]
                }
            ]
        }

        const chart = new frappe.Chart("#chart", {  // or a DOM element,
            // new Chart() in case of ES6 module with above usage
            title: "My Awesome Chart",
            isNavigable: true,
            data: data,
            type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage'
            height: 400,
            colors: ['#7cd6fd', '#743ee2']
        })

        chart.parent.addEventListener('data-select', (e) => {
            console.log(e.index); // e contains index and value of current datapoint
        });
    </script>
</body>
</html>

should result in console logging index but produces:

frappe-charts@latest:1 Uncaught TypeError: Cannot read properties of undefined (reading 'nodeName')
    at Object.bar (frappe-charts@latest:1)
    at frappe-charts@latest:1
    at Array.map (<anonymous>)
    at i.value (frappe-charts@latest:1)
    at i.value (frappe-charts@latest:1)
    at i.value (frappe-charts@latest:1)
    at i.value (frappe-charts@latest:1)
    at ResizeObserver.boundDrawFn (frappe-charts@latest:1)

Works fine with 1.2.4

JTarball commented 2 years ago

Experiencing the same issue

Bocom commented 2 years ago

I'm also experiencing the same issue.

uhrjun commented 1 year ago

Took over this project recently. Been actively looking into this. Haven't quite pinned down the cause yet. v1.6.1 seems to have been the last version with expected behavior.

uhrjun commented 1 year ago

Can positively point to commit 12533f3b376328a8437109977910c8f2041572e5 as the one that broke isNavigable. Will look into reverting it.