search

NativeScript / nativescript-ui-charts

NativeScript wrapper around HiCharts library
Apache License 2.0
26 stars 6 forks source link

chart breaks if labelFormatters are used and app is build with --env.uglify #9

Closed cjohn001 closed 3 years ago

cjohn001 commented 3 years ago

Which platform(s) does your issue occur on?

Please, provide the following version numbers that your issue occurs with:

Please, tell us how to recreate the issue in as much detail as possible.

The following attached chart runs well when the app is build without --env.uglify flag. However, when it is build with uglification the chart breaks (does not render). I narrowed down the problem to the following code snipped:

yAxis: {
        stackLabels: {
            enabled: !0,
            useHTML: !0,
            formatter: function () {
                return (
                    '<span style="font-size:12px; color:#6E6E6E; font-weight: normal;">' + this.total + '</span>'
                );
            }
        }

The source of the error is the formatter function. As soon as it tries to access the this pointer, the chart breaks. I also tried an if (this && this.total), but also trying to read the this pointer results in an error, I mean I need not try to access this.total at all in order to let the rendering break.

@shiv19 I am currently developing an app with lots of charts and analytics involved, hence I would really like to use this plugin. I think it would also be a great chance to get this plugin out of alpha state. I in the meantime understood the resize issue of the underlaying highcharts object. This would not be an issue for me as my charts are static and as the app I am building does not require orientation changes which would require the chart to resize ( at least not for the beginning). Therefore, I am wondering, if you would be interested and would have the time to get things going. The legend bug in version 10 and the missing option to use formatters with uglification are an issue which would not allow me to proceed with the plugin, or I would have to make restrictive constraints on the chart design, the standard text formating options of highcharts are rather week. So would you support me to get things done or should I better try to jump to the nativescript-ui-highcharts plugin? I have not tested it yet and therefore I am not sure if it will be an alternative in regards to performance.

Is there any code involved?

The following chart works well without uglification and breaks when enabled

chartOptions: any = {
    chart: {
        backgroundColor: 'rgba(0,0,0,0)',
        animation: !0,
        marginTop: 17,
        marginBottom: 41,
        marginLeft: 17,
        marginRight: 0,
        borderWidth: 0,
        plotBorderWidth: 0,
        type: 'column',
        options3d: { enabled: !0, alpha: 8, beta: 2, viewDistance: 15, depth: 40 }
    },
    legend: {
        layout: 'horizontal',
        align: 'center',
        verticalAlign: 'top',
        x: 0,
        y: -7,
        floating: !1,
        enabled: !0,
        itemStyle: { color: '#6E6E6E', fontSize: '12px', fontWeight: 'normal' }
    },
    exporting: { enabled: !1 },
    credits: { enabled: !1 },
    title: { text: '' },
    tooltip: { enabled: !1 },
    xAxis: {
        type: 'datetime',
        skew3d: !0,
        labels: { enabled: !0, rotation: -35 },
        style: { fontSize: '12px' },
        dateTimeLabelFormats: { day: '%e. %b' },
        tickInterval: 864e5,
        gridLineWidth: 0
    },
    yAxis: {
        allowDecimals: !1,
        height: '100%',
        gridLineWidth: 0,
        labels: { enabled: !1 },
        title: { align: 'middle', text: 'kcal', rotation: 0, y: 0 },
        stackLabels: {
            enabled: !0,
            useHTML: !0,
            formatter: function () {
                let retVal = '<span style="font-size:12px; color:#6E6E6E; font-weight: normal;"></span>';
                if (this && this.total) {
                    retVal =
                        '<span style="font-size:12px; color:#6E6E6E; font-weight: normal;">' +
                        this.total +
                        '</span>';
                }
                return retVal;
            }
        }
    },
    series: [
        {
            name: 'Installation',
            data: [0, 1, 2, 3, 4, 5, 6]
        },
        {
            name: 'Manufacturing',
            data: [6, 5, 4, 3, 2, 1, 0]
        }
    ]
};
shiv19 commented 3 years ago

Turn your functions to a one liner (minify) , then pass it as a string :)

cjohn001 commented 3 years ago

Great, this works. Thanks you very much.