customization-stack.json

{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/sparkline/customization/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-8 control-section\">\n        <div id=\"spark-container\" class=\"row\">\n            <div class=\"cols-sample-area\" align=\"center\">\n                <p>\n                    <font size=\"4px\"> Worldwide car sales by brand - 2017</font>\n                </p>\n                <table style=\"width:100%;\">\n                    <tbody><tr>\n                        <td align=\"center\" style=\"width: 30%;\">Sales Percentage</td>\n                        <td style=\"width: 30%;\">\n                            <div id=\"percentage\" style=\"height:200px\"></div>\n                        </td>\n                    </tr>\n                    <tr>\n                        <td align=\"center\" style=\"width: 30%;\">Sales Count</td>\n                        <td style=\"width: 30%;\">\n                            <div id=\"sales\" style=\"height:200px\"></div>\n                        </td>\n                    </tr>\n                </tbody></table>\n            </div>\n        </div>\n        <div style=\"float: right; margin-right: 10px;\">Source:\n            <a href=\" http://carsalesbase.com/global-car-sales-2017\" target=\"_blank\">carsalesbase.com</a>\n        </div>\n    </div>\n    \n    \n    \n    \n    \n\n    <!-- Property Panel -->\n    <div class=\"col-lg-4 property-section\">\n        &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0;\n        <br>\n        <table id=\"property\" style=\"width:100%\" title=\"Properties\">\n            <tbody>\n                <tr style=\"height: 30px\">\n                    <td class=\"property-text\" style=\"width: 50%\">\n                        Sparkline\n                    </td>\n                    <td style=\"width: 50%\">\n                        <select id=\"spark\" style=\"width: 100%;\">\n                            <option selected value=\"salespercentage\">Sales Percentage</option>\n                            <option value=\"salescount\">Sales Count</option>\n                        </select>\n                    </td>\n                </tr>\n                <tr style=\"height: 30px\">\n                    <td style=\"width: 50%\">\n                        Special Points\n                    </td>\n                    <td style=\"width: 50%\">\n                        <table>\n                            <tbody><tr>\n                                <td>All</td>\n                                <td>\n                                    <input type=\"checkbox\" id=\"all\">\n                                </td>\n                                <td style=\"padding: 5px;\">Negative</td>\n                                <td>\n                                    <input type=\"checkbox\" id=\"negative\">\n                                </td>\n                            </tr>\n                            <tr>\n                                <td style=\"padding: 5px;\">First</td>\n                                <td>\n                                    <input type=\"checkbox\" id=\"first\">\n                                </td>\n                                <td style=\"padding: 5px;\">Last</td>\n                                <td>\n                                    <input type=\"checkbox\" id=\"last\">\n                                </td>\n                            </tr>\n                            <tr>\n                                <td style=\"padding: 5px;\">High</td>\n                                <td>\n                                    <input type=\"checkbox\" id=\"high\">\n                                </td>\n                                <td style=\"padding: 5px;\">Low</td>\n                                <td>\n                                    <input type=\"checkbox\" id=\"low\">\n                                </td>\n                            </tr>\n                        </tbody></table>\n                    </td>\n                </tr>\n                <tr style=\"height: 30px\">\n                    <td style=\"width: 50%\">\n                        Marker\n                    </td>\n                    <td style=\"width: 50%\">\n                        <input type=\"checkbox\" name=\"marker\" id=\"marker\">\n                    </td>\n                </tr>\n                <tr style=\"height: 30px\">\n                    <td style=\"width: 50%\">\n                        Data Label\n                    </td>\n                    <td style=\"width: 50%\">\n                        <input type=\"checkbox\" name=\"datalabel\" id=\"datalabel\">\n                    </td>\n                </tr>\n\t\t\t\t<tr style=\"height: 30px\">\n                    <td style=\"width: 50%\">\n                        Enable RTL\n                    </td>\n                    <td style=\"width: 50%\">\n                        <input type=\"checkbox\" name=\"enableRTL\" id=\"enableRTL\">\n                    </td>\n                </tr>\n                <tr style=\"height: 30px\">\n                    <td style=\"width: 50%\">\n                        Tooltip\n                    </td>\n                    <td style=\"width: 50%\">\n                        <input type=\"checkbox\" name=\"tooltip\" id=\"tooltip\">\n                    </td>\n                </tr>\n                <tr style=\"height: 30px\">\n                    <td style=\"width: 50%\">\n                        Track Line\n                    </td>\n                    <td style=\"width: 50%\">\n                        <input type=\"checkbox\" name=\"trackline\" id=\"trackline\">\n                    </td>\n                </tr>\n                <tr style=\"height: 30px\">\n                    <td style=\"width: 50%\">\n                        Axis Line\n                    </td>\n                    <td style=\"width: 50%\">\n                        <input type=\"checkbox\" name=\"axis\" id=\"axis1\">\n                    </td>\n                </tr>\n                <tr>\n                    <td id=\"axisval\">\n                        Axis Value\n                        <span>&#xA0;&#xA0;&#xA0;0</span>\n                    </td>\n                    <td>\n                        <div id=\"range\"></div>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n    </div></div></body></html>","index.js":"{{ripple}}\n\n    var percentage = new ej.charts.Sparkline({\n\n        lineWidth: 1,\n        type: 'Column',\n        valueType: 'Category',\n        height: '200px',\n        width: '180px',\n        dataSource: [\n            { x: 0, xval: 'AUDI', yval: 1 },\n            { x: 1, xval: 'BMW', yval: 5 },\n            { x: 2, xval: 'BUICK', yval: -1 },\n            { x: 3, xval: 'CETROEN', yval: -6 },           \n            { x: 6, xval: 'FORD', yval: -2 },\n            { x: 7, xval: 'HONDA', yval: 7 },\n            { x: 8, xval: 'HYUNDAI', yval: -9 },\n            { x: 9, xval: 'JEEP', yval: 0 },\n            { x: 4, xval: 'CHEVROLET', yval: 0 },\n            { x: 5, xval: 'FIAT', yval: 1 },\n            { x: 10, xval: 'KIA', yval: -10 },\n            { x: 11, xval: 'MAZDA', yval: 3 },            \n            { x: 14, xval: 'OPEL/VHALL', yval: -6 },\n            { x: 15, xval: 'PEUGEOT', yval: 0 },\n            { x: 16, xval: 'RENAULT', yval: 7 },\n            { x: 17, xval: 'SKODA', yval: 5 },\n            { x: 12, xval: 'MERCEDES', yval: 13 },\n            { x: 13, xval: 'NISSAN', yval: 5 },\n            { x: 18, xval: 'SUBARU', yval: 5 },\n            { x: 19, xval: 'SUZUKI', yval: 11 },\n            { x: 20, xval: 'TOYOTA', yval: 5 },\n            { x: 21, xval: 'VOLKSWAGEN', yval: 3 },\n        ],\n        xName: 'xval', yName: 'yval',\n        markerSettings: {\n            fill: 'red',\n            size: 5\n        },\n        tooltipSettings: {\n            format: '${xval}: ${yval}',\n            trackLineSettings: {\n                color: 'red',\n                width: 1\n            }\n        },\n        axisSettings: {\n            lineSettings: {\n                color: 'red',\n                width: 2\n            }\n        }\n    });\n    percentage.appendTo('#percentage');\n    var sales = new ej.charts.Sparkline({\n        load: sparkload,\n        height: '200px',\n        width: '180px',\n        lineWidth: 1,\n        type: 'Column',\n        valueType: 'Category',\n        dataSource: [\n            { x: 0, xval: 'AUDI', yval: 1847613 },\n            { x: 1, xval: 'BMW', yval: 2030331 },\n            { x: 2, xval: 'BUICK', yval: 1465823 },\n            { x: 3, xval: 'CETROEN', yval: 999888 },\n            { x: 4, xval: 'CHEVROLET', yval: 3857388 },\n            { x: 5, xval: 'FIAT', yval: 1503806 },\n            { x: 6, xval: 'FORD', yval: 5953122 },\n            { x: 7, xval: 'HONDA', yval: 4967689 },\n            { x: 8, xval: 'HYUNDAI', yval: 3951176 },\n            { x: 9, xval: 'JEEP', yval: 1390130 },\n            { x: 10, xval: 'KIA', yval: 2511293 },\n            { x: 11, xval: 'MAZDA', yval: 1495557 },\n            { x: 12, xval: 'MERCEDES', yval: 2834181 },\n            { x: 13, xval: 'NISSAN', yval: 4834694 },\n            { x: 14, xval: 'OPEL/VHALL', yval: 996559 },\n            { x: 15, xval: 'PEUGEOT', yval: 1590300 },\n            { x: 16, xval: 'RENAULT', yval: 2275227 },\n            { x: 17, xval: 'SKODA', yval: 1180672 },\n            { x: 18, xval: 'SUBARU', yval: 1050390 },\n            { x: 19, xval: 'SUZUKI', yval: 2891415 },\n            { x: 20, xval: 'TOYOTA', yval: 7843423 },\n            { x: 21, xval: 'VOLKSWAGEN', yval: 6639250 },\n        ],\n        xName: 'xval', yName: 'yval',\n        axisSettings: {\n            lineSettings: {\n                color: 'red',\n                width: 2\n            }\n        },\n        markerSettings: {\n            fill: 'red',\n            size: 5\n        },\n        tooltipSettings: {\n            format: '${xval}: ${yval}',\n            trackLineSettings: {\n                color: 'red',\n                width: 1\n            }\n        }\n    });\n    sales.appendTo('#sales');\n    // Code for Property Panel\n    var sampleChange;\n    var sampleValue = new ej.dropdowns.DropDownList({\n        index: 0,\n        placeholder: 'Sales Percentage',\n        width: '100%',\n        change: sampleChange\n    });\n    var sliderChange;\n    var slider = new ej.inputs.Slider({\n        value: 0, type: 'MinRange',\n        change: sliderChange,\n        max: 100, min: 0\n    }, '#range');\n    var allchange;\n    var allCheckBox = new ej.buttons.CheckBox({\n        checked: true, change: allchange\n    }, '#all');\n    var otherchange;\n    var negativeCheckBox = new ej.buttons.CheckBox({\n        change: otherchange, disabled: true\n    }, '#negative');\n    var firstCheckBox = new ej.buttons.CheckBox({\n        change: otherchange, disabled: true\n    }, '#first');\n    var lastCheckBox = new ej.buttons.CheckBox({\n        change: otherchange, disabled: true\n    }, '#last');\n    var highCheckBox = new ej.buttons.CheckBox({\n        change: otherchange, disabled: true\n    }, '#high');\n    var lowCheckBox = new ej.buttons.CheckBox({\n        change: otherchange, disabled: true\n    }, '#low');\n    var markerchange;\n    var markerCheckBox = new ej.buttons.CheckBox({\n        change: markerchange\n    }, '#marker');\n    var datalabelchange;\n    var datalabelCheckBox = new ej.buttons.CheckBox({\n        change: datalabelchange\n    }, '#datalabel');\n\tvar enableRTLchange;\n    var enableRTLCheckBox = new ej.buttons.CheckBox({\n        change: enableRTLchange\n    }, '#enableRTL');\n    var tooltipchange;\n    var tooltipCheckBox = new ej.buttons.CheckBox({\n        change: tooltipchange\n    }, '#tooltip');\n    var trackerchange;\n    var trackerCheckBox = new ej.buttons.CheckBox({\n        change: trackerchange\n    }, '#trackline');\n    var axislinechange;\n    var axislineCheckBox = new ej.buttons.CheckBox({\n        change: axislinechange\n    }, '#axis1');\n    sampleValue.change = sampleChange = function (drop) {\n        if (drop.value === 'salespercentage') {\n            slider.min = 0;\n            slider.max = 10;\n        }\n        else {\n            slider.min = 0;\n            slider.max = 5000000;\n        }\n        if ((drop.value === 'salespercentage' && percentage.markerSettings.visible.length) ||\n            (drop.value === 'salescount' && sales.markerSettings.visible.length)) {\n            markerCheckBox.checked = true;\n        }\n        else {\n            markerCheckBox.checked = false;\n        }\n        markerCheckBox.change = markerchange = function (e) {\n            var boolean = e.checked;\n            var spark = drop.value === 'salespercentage' ? percentage : sales;\n            if (boolean) {\n                spark.markerSettings.visible = getVisible();\n            }\n            else {\n                spark.markerSettings.visible = [];\n            }\n            spark.refresh();\n        };\n        if ((drop.value === 'salespercentage' && percentage.dataLabelSettings.visible.length) ||\n            (drop.value === 'salescount' && sales.dataLabelSettings.visible.length)) {\n            datalabelCheckBox.checked = true;\n        }\n        else {\n            datalabelCheckBox.checked = false;\n        }\n        var spark = drop.value === 'salespercentage' ? percentage : sales;\n        if (!markerCheckBox.checked && !datalabelCheckBox.checked) {\n            allCheckBox.checked = false;\n            negativeCheckBox.checked = false;\n            firstCheckBox.checked = false;\n            lastCheckBox.checked = false;\n            highCheckBox.checked = false;\n            lowCheckBox.checked = false;\n        }\n        if (markerCheckBox.checked) {\n            var spark_1 = drop.value === 'salespercentage' ? percentage : sales;\n            allCheckBox.checked = spark_1.markerSettings.visible.indexOf('All') > -1;\n            negativeCheckBox.checked = spark_1.markerSettings.visible.indexOf('Negative') > -1;\n            firstCheckBox.checked = spark_1.markerSettings.visible.indexOf('Start') > -1;\n            lastCheckBox.checked = spark_1.markerSettings.visible.indexOf('End') > -1;\n            highCheckBox.checked = spark_1.markerSettings.visible.indexOf('High') > -1;\n            lowCheckBox.checked = spark_1.markerSettings.visible.indexOf('Low') > -1;\n        }\n        if (datalabelCheckBox.checked) {\n            var spark_2 = drop.value === 'salespercentage' ? percentage : sales;\n            allCheckBox.checked = spark_2.dataLabelSettings.visible.indexOf('All') > -1;\n            negativeCheckBox.checked = spark_2.dataLabelSettings.visible.indexOf('Negative') > -1;\n            firstCheckBox.checked = spark_2.dataLabelSettings.visible.indexOf('Start') > -1;\n            lastCheckBox.checked = spark_2.dataLabelSettings.visible.indexOf('End') > -1;\n            highCheckBox.checked = spark_2.dataLabelSettings.visible.indexOf('High') > -1;\n            lowCheckBox.checked = spark_2.dataLabelSettings.visible.indexOf('Low') > -1;\n        }\n        datalabelCheckBox.change = datalabelchange = function (e) {\n            var boolean = e.checked;\n            var spark = drop.value === 'salespercentage' ? percentage : sales;\n            if (boolean) {\n                spark.dataLabelSettings.visible = getVisible();\n            }\n            else {\n                spark.dataLabelSettings.visible = [];\n            }\n            spark.refresh();\n        };\n        if ((drop.value === 'salespercentage' && percentage.tooltipSettings.visible === true) ||\n            (drop.value === 'salescount' && sales.tooltipSettings.visible === true)) {\n            tooltipCheckBox.checked = true;\n        }\n        else {\n            tooltipCheckBox.checked = false;\n        }\n        if ((drop.value === 'salespercentage' && percentage.enableRtl === true) ||\n        (drop.value === 'salescount' && sales.enableRtl === true)) {\n            enableRTLCheckBox.checked = true;\n        }\n        else {\n            enableRTLCheckBox.checked = false;\n        }\n        tooltipCheckBox.change = tooltipchange = function (e) {\n            var boolean = e.checked;\n            var spark = drop.value === 'salespercentage' ? percentage : sales;\n            if (boolean) {\n                spark.tooltipSettings.visible = true;\n            }\n            else {\n                spark.tooltipSettings.visible = false;\n            }\n            spark.refresh();\n        };\n        if ((drop.value === 'salespercentage' && percentage.tooltipSettings.trackLineSettings.visible === true) ||\n            (drop.value === 'salescount' && sales.tooltipSettings.trackLineSettings.visible === true)) {\n            trackerCheckBox.checked = true;\n        }\n        else {\n            trackerCheckBox.checked = false;\n        }\n        trackerCheckBox.change = trackerchange = function (e) {\n            var boolean = e.checked;\n            var spark = drop.value === 'salespercentage' ? percentage : sales;\n            if (boolean) {\n                spark.tooltipSettings.trackLineSettings.visible = true;\n            }\n            else {\n                spark.tooltipSettings.trackLineSettings.visible = false;\n            }\n            spark.refresh();\n        };\n        if ((drop.value === 'salespercentage' && percentage.axisSettings.lineSettings.visible === true) ||\n            (drop.value === 'salescount' && sales.axisSettings.lineSettings.visible === true)) {\n            axislineCheckBox.checked = true;\n        }\n        else {\n            axislineCheckBox.checked = false;\n        }\n        axislineCheckBox.change = axislinechange = function (e) {\n            var boolean = e.checked;\n            var spark = drop.value === 'salespercentage' ? percentage : sales;\n            if (boolean) {\n                spark.axisSettings.lineSettings.visible = true;\n            }\n            else {\n                spark.axisSettings.lineSettings.visible = false;\n            }\n            spark.refresh();\n        };\n        if (drop.value === 'salespercentage' && percentage.axisSettings.value !== 0) {\n            slider.value = percentage.axisSettings.value;\n            slider.min = 0;\n            slider.max = 10;\n            document.getElementById('axisval').innerHTML = 'Axis value: <span> ' + percentage.axisSettings.value;\n        }\n        if (drop.value === 'salescount' && sales.axisSettings.value !== 0) {\n            slider.value = sales.axisSettings.value;\n            slider.min = 0;\n            slider.max = 5000000;\n            document.getElementById('axisval').innerHTML = 'Axis value: <span> ' + sales.axisSettings.value;\n        }\n        slider.change = sliderChange = function (e) {\n            var spark = drop.value === 'salespercentage' ? percentage : sales;\n            spark.axisSettings.value = e.value;\n            document.getElementById('axisval').innerHTML = 'Axis value: <span> ' + e.value;\n            spark.refresh();\n        };\n        allCheckBox.checked = !(negativeCheckBox.checked || highCheckBox.checked || lowCheckBox.checked ||\n            firstCheckBox.checked || lastCheckBox.checked);\n        negativeCheckBox.disabled = highCheckBox.disabled = lowCheckBox.disabled = firstCheckBox.disabled =\n            lastCheckBox.disabled = allCheckBox.checked;\n    };\n    sampleValue.appendTo('#spark');\n    if (sampleValue.value === 'salespercentage') {\n        slider.min = 0;\n        slider.max = 10;\n    }\n    else {\n        slider.min = 0;\n        slider.max = 5000000;\n    }\n    allCheckBox.change = allchange = function (e) {\n        var checked = e.checked;\n        negativeCheckBox.disabled = checked;\n        firstCheckBox.disabled = checked;\n        lastCheckBox.disabled = checked;\n        highCheckBox.disabled = checked;\n        lowCheckBox.disabled = checked;\n        var spark = sampleValue.value === 'salespercentage' ? percentage : sales;\n        spark.markerSettings.visible = (checked && markerCheckBox.checked) ? ['All'] : (markerCheckBox.checked) ? getVisible() : [];\n        spark.dataLabelSettings.visible = (checked && datalabelCheckBox.checked) ? ['All'] :\n            (datalabelCheckBox.checked) ? getVisible() : [];\n        spark.refresh();\n    };\n    negativeCheckBox.change = otherchange = firstCheckBox.change = lastCheckBox.change = highCheckBox.change =\n        lowCheckBox.change = function (e) {\n            processMarkerLabel(e);\n        };\n    var processMarkerLabel = function (e) {\n        var checked = e.checked;\n        var spark = sampleValue.value === 'salespercentage' ? percentage : sales;\n        if (markerCheckBox.checked) {\n            spark.markerSettings.visible = getVisible();\n            spark.refresh();\n        }\n        if (datalabelCheckBox.checked) {\n            spark.dataLabelSettings.visible = getVisible();\n            spark.refresh();\n        }\n    };\n    var getVisible = function () {\n        var visible = [];\n        if (allCheckBox.checked) {\n            return ['All'];\n        }\n        if (negativeCheckBox.checked) {\n            visible.push('Negative');\n        }\n        if (firstCheckBox.checked) {\n            visible.push('Start');\n        }\n        if (lastCheckBox.checked) {\n            visible.push('End');\n        }\n        if (highCheckBox.checked) {\n            visible.push('High');\n        }\n        if (lowCheckBox.checked) {\n            visible.push('Low');\n        }\n        return visible;\n    };\n    markerCheckBox.change = markerchange = function (e) {\n        var boolean = e.checked;\n        var spark = sampleValue.value === 'salespercentage' ? percentage : sales;\n        if (boolean) {\n            spark.markerSettings.visible = getVisible();\n        }\n        else {\n            spark.markerSettings.visible = [];\n        }\n        spark.refresh();\n    };\n    datalabelCheckBox.change = datalabelchange = function (e) {\n        var boolean = e.checked;\n        var spark = sampleValue.value === 'salespercentage' ? percentage : sales;\n        if (boolean) {\n            spark.dataLabelSettings.visible = getVisible();\n        }\n        else {\n            spark.dataLabelSettings.visible = [];\n        }\n        spark.refresh();\n    };\n\tenableRTLCheckBox.change = enableRTLchange = function (e) {\n\t\tvar boolean = e.checked;\n\t\tvar spark = sampleValue.value === 'salespercentage' ? percentage : sales;\n\t\tif(boolean == true) {\n\t\t\tspark.enableRtl = true;\n\t\t} \n\t\telse {\n\t\t\tspark.enableRtl = false;\n\t\t}\n\t\tspark.refresh();\n\t};\n    tooltipCheckBox.change = tooltipchange = function (e) {\n        var boolean = e.checked;\n        var spark = sampleValue.value === 'salespercentage' ? percentage : sales;\n        if (boolean) {\n            spark.tooltipSettings.visible = true;\n            spark.tooltipSettings.format = '${xval}: ${yval}';\n        }\n        else {\n            spark.tooltipSettings.visible = false;\n        }\n        spark.refresh();\n    };\n    trackerCheckBox.change = trackerchange = function (e) {\n        var boolean = e.checked;\n        var spark = sampleValue.value === 'salespercentage' ? percentage : sales;\n        if (boolean) {\n            spark.tooltipSettings.trackLineSettings.visible = true;\n            spark.tooltipSettings.trackLineSettings.color = 'red';\n            spark.tooltipSettings.trackLineSettings.width = 1;\n        }\n        else {\n            spark.tooltipSettings.trackLineSettings.visible = false;\n        }\n        spark.refresh();\n    };\n    axislineCheckBox.change = axislinechange = function (e) {\n        var boolean = e.checked;\n        var spark = sampleValue.value === 'salespercentage' ? percentage : sales;\n        if (boolean) {\n            spark.axisSettings.lineSettings.visible = true;\n            spark.axisSettings.lineSettings.color = 'red';\n            spark.axisSettings.lineSettings.width = 2;\n        }\n        else {\n            spark.axisSettings.lineSettings.visible = false;\n        }\n        spark.refresh();\n    };\n    slider.change = sliderChange = function (e) {\n        var spark = sampleValue.value === 'salespercentage' ? percentage : sales;\n        spark.axisSettings.value = e.value;\n        document.getElementById('axisval').innerHTML = 'Axis value: <span> ' + e.value;\n        spark.refresh();\n    };\n"}