himynameisdave / svelte-frappe-charts

📈 Svelte bindings for frappe-charts.
https://frappe.io/charts
MIT License
308 stars 16 forks source link

Error: <path> attribute d: Expected number, "…10 C 1381.8,510 NaN,NaN 1551,510…". #68

Open athanhat opened 1 year ago

athanhat commented 1 year ago

Hi, I am getting this error twice in Chrome Browser developer tools Here is some code to reproduce it

<script lang="ts">
    import Chart from 'svelte-frappe-charts';

    interface YRange {
        start: number;
        end: number;
    }

    export let xticks: string[];
    export let data: number[];
    export let threshold: number;
    export let yrange: YRange;
    export let height: number = 200;

    const lineOptions:object = {        
        dotSize: 3,
        hideDots: 0,
        spline: 1,
        regionFill: 1   
    };

    const axisOptions = {
        xAxisMode: 'tick'
        // xIsSeries: true
    };

    const tooltipOptions = {
        formatTooltipX: (d: string) => 'Segment:' + d,
        formatTooltipY: (d: number) => d + ' pts'
    };

    let chartData = {
        labels: xticks,
        datasets: [
            {
                values: data
            }
        ],
        yMarkers: [
            {
                label: 'Threshold',
                value: threshold,
                options: { labelPos: 'left' } // default: 'right'
            }
        ],
        yRegions: [
            {
                label: 'Optimum Range',
                start: yrange.start,
                end: yrange.end,
                options: { labelPos: 'right' }
            }
        ]
    };
</script>

<Chart
    type="line"
    height={height}
    title="My Awesome Chart"    
    data={chartData}
    lineOptions={lineOptions}
    axisOptions={axisOptions}
    tooltipOptions={tooltipOptions}
/>

I managed to locate the source of the problem, those two lineOptions spline: 1 and regionFill: 1 produce this error

Error: attribute d: Expected number, "…10 C 1381.8,510 NaN,NaN 1551,510…". selte-frappe-charts.js?v=b86eed3b:177

This is how far I can examine this issue. Do notice that the display with spline, and regionFill is drawn correctly. It's probably an issue with Chrome Browser Version 112.0.5615.165 (Official Build) (64-bit) and my configuration options.

I use svelte-frappe-charts v1.10.0