config(EJ2-2871): Added changes to charts.

pipeline · pipeline · commit 573466739e84 · 2017-08-31T13:05:18.000Z
diff --git a/src/chart/club-point-plnkr.json b/src/chart/club-point-plnkr.json
@@ -1 +1 @@
-{"index.ts":"import { AccumulationChart, AccumulationLegend, PieSeries, AccumulationTooltip, IAccTextRenderEventArgs } from '@syncfusion/ej2-charts';\nimport { IAccPointRenderEventArgs, IAccLoadedEventArgs, AccumulationDataLabel } from '@syncfusion/ej2-charts';\nAccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, AccumulationDataLabel);\n\n/**\n * Club Point\n */\n\n    let pie: AccumulationChart = new AccumulationChart({\n        series: [\n            {\n                dataSource: [\n                    { 'x': 'China', y: 26, text: 'China: 26' },\n                    { 'x': 'Russia', y: 19, text: 'Russia: 19' },\n                    { 'x': 'Germany', y: 17, text: 'Germany: 17' },\n                    { 'x': 'Japan', y: 12, text: 'Japan: 12' },\n                    { 'x': 'France', y: 10, text: 'France: 10' },\n                    { 'x': 'South Korea', y: 9, text: 'South Korea: 9' },\n                    { 'x': 'Great Britain', y: 27, text: 'Great Britain: 27' },\n                    { 'x': 'Italy', y: 8, text: 'Italy: 8' },\n                    { 'x': 'Australia', y: 8, text: 'Australia: 8' },\n                    { 'x': 'Netherlands', y: 8, text: 'Netherlands: 8' },\n                    { 'x': 'Hungary', y: 8, text: 'Hungary: 8' },\n                    { 'x': 'Brazil', y: 7, text: 'Brazil: 7' },\n                    { 'x': 'Spain', y: 7, text: 'Spain: 7' },\n                    { 'x': 'Kenya', y: 6, text: 'Kenya: 6' },\n                ],\n                animation: { enable: true },\n                dataLabel: {\n                    visible: true,\n                    position: 'Outside',\n                    connectorStyle: { type: 'Line', length: '2%', color: 'transparent' },\n                    font: {\n                        size: '14px'\n                    }\n                },\n                radius: '70%',\n                xName: 'x',\n                yName: 'y',\n                groupTo: '6',\n                startAngle: 0,\n                endAngle: 360,\n                innerRadius: '0%',\n            }\n        ],\n        pointRender: (args: IAccPointRenderEventArgs) => {\n            if ((args.point.x as string).indexOf('Others') > -1) {\n                args.fill = '#D3D3D3';\n            }\n        },\n        enableSmartLabels: true,\n        legendSettings: {\n            visible: false,\n        },\n        textRender: (args: IAccTextRenderEventArgs) => {\n            args.text = args.point.x + ' ' + args.point.y + ' Medals';\n        },\n        tooltip: { enable: true, format: '${point.x} <br> ${point.y} Medals' },\n        title: 'Rio Olympics Gold',\n        load: (args: IAccLoadedEventArgs) => {\n            let selectedTheme: string = location.hash.split('/')[1];\n            args.pie.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';\n        }\n    });\n    pie.appendTo('#container');\n    function clubchange(value: number): void {\n        pie.series[0].groupTo = value.toString();\n        pie.series[0].animation.enable = false;\n        document.getElementById('clubvalue').innerHTML = value.toString();\n        pie.removeSvg();\n        pie.refreshSeries();\n        pie.refreshChart();\n    }\n    document.getElementById('clubpoint').onpointermove = document.getElementById('clubpoint').ontouchmove =\n        document.getElementById('clubpoint').onchange = (e: Event) => {\n            clubchange(+(document.getElementById('clubpoint') as HTMLInputElement).value);\n        };\n","index.html":"<html><head>\n    <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\">\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n    <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<div>\n    <div class=\"col-lg-9 control-section\">\n        <div class=\"content-wrapper\">\n            <div id=\"container\"></div>\n        </div>\n    </div>\n    <div class=\"col-lg-3 property-section\">\n        <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n            <tbody><tr style=\"height: 50px\">\n                <td style=\"width: 30%\">\n                    <div>Club Value:\n                        <p id=\"clubvalue\" style=\"font-weight: normal;\">6</p>\n                    </div>\n                </td>\n                <td style=\"width: 70%;\">\n                    <div data-role=\"rangeslider\">\n                        <input type=\"range\" name=\"range-min\" id=\"clubpoint\" value=\"6\" min=\"0\" max=\"27\" style=\"width:90%\">\n                    </div>\n                </td>\n            </tr>\n        </tbody></table>\n    </div>\n</div>\n\n\n</body></html>","systemjs.config.js":"System.config({\n    transpiler: \"typescript\",\n    typescriptOptions: {\n        compilerOptions: {\n            target: \"umd\",\n            module: \"commonjs\",\n            moduleResolution: \"node\",\n            emitDecoratorMetadata: true,\n            experimentalDecorators: true\n        }\n    },\n    paths: {\n        \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n    },\n    map: {\n        main: \"index.ts\",\n        typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\n        'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n        \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n        \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n        \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n        \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n        \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n        \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n        \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n        \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",        \n        \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",        \n        \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n        \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",        \n        \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\"\n    },\n     meta: { \n       '*.json': { loader: 'plugin-json' }\n    }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
+{"index.ts":"import { AccumulationChart, AccumulationLegend, PieSeries, AccumulationTooltip, IAccTextRenderEventArgs } from '@syncfusion/ej2-charts';\nimport { IAccPointRenderEventArgs, IAccLoadedEventArgs, AccumulationDataLabel } from '@syncfusion/ej2-charts';\nAccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, AccumulationDataLabel);\n\n/**\n * Club Point\n */\n\n    let pie: AccumulationChart = new AccumulationChart({\n        series: [\n            {\n                dataSource: [\n                    { 'x': 'China', y: 26, text: 'China: 26' },\n                    { 'x': 'Russia', y: 19, text: 'Russia: 19' },\n                    { 'x': 'Germany', y: 17, text: 'Germany: 17' },\n                    { 'x': 'Japan', y: 12, text: 'Japan: 12' },\n                    { 'x': 'France', y: 10, text: 'France: 10' },\n                    { 'x': 'South Korea', y: 9, text: 'South Korea: 9' },\n                    { 'x': 'Great Britain', y: 27, text: 'Great Britain: 27' },\n                    { 'x': 'Italy', y: 8, text: 'Italy: 8' },\n                    { 'x': 'Australia', y: 8, text: 'Australia: 8' },\n                    { 'x': 'Netherlands', y: 8, text: 'Netherlands: 8' },\n                    { 'x': 'Hungary', y: 8, text: 'Hungary: 8' },\n                    { 'x': 'Brazil', y: 7, text: 'Brazil: 7' },\n                    { 'x': 'Spain', y: 7, text: 'Spain: 7' },\n                    { 'x': 'Kenya', y: 6, text: 'Kenya: 6' },\n                ],\n                animation: { enable: true },\n                dataLabel: {\n                    visible: true,\n                    position: 'Outside',\n                    connectorStyle: { type: 'Line', length: '2%', color: 'transparent' },\n                    font: {\n                        size: '14px'\n                    }\n                },\n                radius: '70%',\n                xName: 'x',\n                yName: 'y',\n                groupTo: '6',\n                startAngle: 0,\n                endAngle: 360,\n                innerRadius: '0%',\n            }\n        ],\n        pointRender: (args: IAccPointRenderEventArgs) => {\n            if ((args.point.x as string).indexOf('Others') > -1) {\n                args.fill = '#D3D3D3';\n            }\n        },\n        enableSmartLabels: true,\n        legendSettings: {\n            visible: false,\n        },\n        textRender: (args: IAccTextRenderEventArgs) => {\n            args.text = args.point.x + ' ' + args.point.y + ' Medals';\n        },\n        tooltip: { enable: true, format: '${point.x} <br> ${point.y} Medals' },\n        title: 'Rio Olympics Gold',\n        load: (args: IAccLoadedEventArgs) => {\n            let selectedTheme: string = location.hash.split('/')[1];\n            args.pie.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';\n        }\n    });\n    pie.appendTo('#container');\n    function clubchange(value: number): void {\n        pie.series[0].groupTo = value.toString();\n        pie.series[0].animation.enable = false;\n        document.getElementById('clubvalue').innerHTML = value.toString();\n        pie.removeSvg();\n        pie.refreshSeries();\n        pie.refreshChart();\n    }\n    document.getElementById('clubpoint').onpointermove = document.getElementById('clubpoint').ontouchmove =\n        document.getElementById('clubpoint').onchange = (e: Event) => {\n            clubchange(+(document.getElementById('clubpoint') as HTMLInputElement).value);\n        };\n","index.html":"<html><head>\n    <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\">\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n    <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<div>\n    <div class=\"col-lg-9 control-section\">\n        <div class=\"content-wrapper\">\n            <div id=\"container\"></div>\n        </div>\n    </div>\n    <div class=\"col-lg-3 property-section\">\n        <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n            <tbody><tr style=\"height: 50px\">\n                <td style=\"width: 60%\">\n                    <div>Group To:\n                        <p id=\"clubvalue\" style=\"font-weight: normal;\">6</p>\n                    </div>\n                </td>\n                <td style=\"width: 40%;\">\n                    <div data-role=\"rangeslider\">\n                        <input type=\"range\" name=\"range-min\" id=\"clubpoint\" value=\"6\" min=\"0\" max=\"27\" style=\"width:90%\">\n                    </div>\n                </td>\n            </tr>\n        </tbody></table>\n    </div>\n</div>\n\n\n</body></html>","systemjs.config.js":"System.config({\n    transpiler: \"typescript\",\n    typescriptOptions: {\n        compilerOptions: {\n            target: \"umd\",\n            module: \"commonjs\",\n            moduleResolution: \"node\",\n            emitDecoratorMetadata: true,\n            experimentalDecorators: true\n        }\n    },\n    paths: {\n        \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n    },\n    map: {\n        main: \"index.ts\",\n        typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\n        'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n        \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n        \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n        \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n        \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n        \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n        \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n        \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n        \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",        \n        \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",        \n        \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n        \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",        \n        \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\"\n    },\n     meta: { \n       '*.json': { loader: 'plugin-json' }\n    }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
diff --git a/src/chart/club-point.html b/src/chart/club-point.html
@@ -7,12 +7,12 @@
     <div class="col-lg-3 property-section">
         <table id="property" title="Properties" style="width: 100%">
             <tr style="height: 50px">
-                <td style="width: 30%">
-                    <div>Club Value:
+                <td style="width: 60%">
+                    <div>Group To:
                         <p id="clubvalue" style="font-weight: normal;">6</p>
                     </div>
                 </td>
-                <td style="width: 70%;">
+                <td style="width: 40%;">
                     <div data-role="rangeslider">
                         <input type="range" name="range-min" id="clubpoint" value="6" min="0" max="27" style="width:90%">
                     </div>
diff --git a/src/chart/sample.json b/src/chart/sample.json
@@ -114,7 +114,7 @@
 			"type": "new"
         }, {
             "url": "club-point",
-            "name": "ClubPoint",
+            "name": "Grouping",
             "category": "Accumulation Series",
 			"type": "new"
         }, {
diff --git a/src/common/sampleList.ts b/src/common/sampleList.ts

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		-{"index.ts":"import { AccumulationChart, AccumulationLegend, PieSeries, AccumulationTooltip, IAccTextRenderEventArgs } from '@syncfusion/ej2-charts';\nimport { IAccPointRenderEventArgs, IAccLoadedEventArgs, AccumulationDataLabel } from '@syncfusion/ej2-charts';\nAccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, AccumulationDataLabel);\n\n/*\n Club Point\n /\n\n let pie: AccumulationChart = new AccumulationChart({\n series: [\n {\n dataSource: [\n { 'x': 'China', y: 26, text: 'China: 26' },\n { 'x': 'Russia', y: 19, text: 'Russia: 19' },\n { 'x': 'Germany', y: 17, text: 'Germany: 17' },\n { 'x': 'Japan', y: 12, text: 'Japan: 12' },\n { 'x': 'France', y: 10, text: 'France: 10' },\n { 'x': 'South Korea', y: 9, text: 'South Korea: 9' },\n { 'x': 'Great Britain', y: 27, text: 'Great Britain: 27' },\n { 'x': 'Italy', y: 8, text: 'Italy: 8' },\n { 'x': 'Australia', y: 8, text: 'Australia: 8' },\n { 'x': 'Netherlands', y: 8, text: 'Netherlands: 8' },\n { 'x': 'Hungary', y: 8, text: 'Hungary: 8' },\n { 'x': 'Brazil', y: 7, text: 'Brazil: 7' },\n { 'x': 'Spain', y: 7, text: 'Spain: 7' },\n { 'x': 'Kenya', y: 6, text: 'Kenya: 6' },\n ],\n animation: { enable: true },\n dataLabel: {\n visible: true,\n position: 'Outside',\n connectorStyle: { type: 'Line', length: '2%', color: 'transparent' },\n font: {\n size: '14px'\n }\n },\n radius: '70%',\n xName: 'x',\n yName: 'y',\n groupTo: '6',\n startAngle: 0,\n endAngle: 360,\n innerRadius: '0%',\n }\n ],\n pointRender: (args: IAccPointRenderEventArgs) => {\n if ((args.point.x as string).indexOf('Others') > -1) {\n args.fill = '#D3D3D3';\n }\n },\n enableSmartLabels: true,\n legendSettings: {\n visible: false,\n },\n textRender: (args: IAccTextRenderEventArgs) => {\n args.text = args.point.x + ' ' + args.point.y + ' Medals';\n },\n tooltip: { enable: true, format: '${point.x} <br> ${point.y} Medals' },\n title: 'Rio Olympics Gold',\n load: (args: IAccLoadedEventArgs) => {\n let selectedTheme: string = location.hash.split('/')[1];\n args.pie.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';\n }\n });\n pie.appendTo('#container');\n function clubchange(value: number): void {\n pie.series[0].groupTo = value.toString();\n pie.series[0].animation.enable = false;\n document.getElementById('clubvalue').innerHTML = value.toString();\n pie.removeSvg();\n pie.refreshSeries();\n pie.refreshChart();\n }\n document.getElementById('clubpoint').onpointermove = document.getElementById('clubpoint').ontouchmove =\n document.getElementById('clubpoint').onchange = (e: Event) => {\n clubchange(+(document.getElementById('clubpoint') as HTMLInputElement).value);\n };\n","index.html":"<html><head>\n <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\">\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<div>\n <div class=\"col-lg-9 control-section\">\n <div class=\"content-wrapper\">\n <div id=\"container\"></div>\n </div>\n </div>\n <div class=\"col-lg-3 property-section\">\n <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n <tbody><tr style=\"height: 50px\">\n <td style=\"width: 30%\">\n <div>Club Value:\n <p id=\"clubvalue\" style=\"font-weight: normal;\">6</p>\n </div>\n </td>\n <td style=\"width: 70%;\">\n <div data-role=\"rangeslider\">\n <input type=\"range\" name=\"range-min\" id=\"clubpoint\" value=\"6\" min=\"0\" max=\"27\" style=\"width:90%\">\n </div>\n </td>\n </tr>\n </tbody></table>\n </div>\n</div>\n\n\n</body></html>","systemjs.config.js":"System.config({\n transpiler: \"typescript\",\n typescriptOptions: {\n compilerOptions: {\n target: \"umd\",\n module: \"commonjs\",\n moduleResolution: \"node\",\n emitDecoratorMetadata: true,\n experimentalDecorators: true\n }\n },\n paths: {\n \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n },\n map: {\n main: \"index.ts\",\n typescript: \"https://unpkg.com/[email protected]/lib/typescript.js\",\n 'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\", \n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\", \n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\", \n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\"\n },\n meta: { \n '.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
	`1`	+{"index.ts":"import { AccumulationChart, AccumulationLegend, PieSeries, AccumulationTooltip, IAccTextRenderEventArgs } from '@syncfusion/ej2-charts';\nimport { IAccPointRenderEventArgs, IAccLoadedEventArgs, AccumulationDataLabel } from '@syncfusion/ej2-charts';\nAccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, AccumulationDataLabel);\n\n/*\n Club Point\n /\n\n let pie: AccumulationChart = new AccumulationChart({\n series: [\n {\n dataSource: [\n { 'x': 'China', y: 26, text: 'China: 26' },\n { 'x': 'Russia', y: 19, text: 'Russia: 19' },\n { 'x': 'Germany', y: 17, text: 'Germany: 17' },\n { 'x': 'Japan', y: 12, text: 'Japan: 12' },\n { 'x': 'France', y: 10, text: 'France: 10' },\n { 'x': 'South Korea', y: 9, text: 'South Korea: 9' },\n { 'x': 'Great Britain', y: 27, text: 'Great Britain: 27' },\n { 'x': 'Italy', y: 8, text: 'Italy: 8' },\n { 'x': 'Australia', y: 8, text: 'Australia: 8' },\n { 'x': 'Netherlands', y: 8, text: 'Netherlands: 8' },\n { 'x': 'Hungary', y: 8, text: 'Hungary: 8' },\n { 'x': 'Brazil', y: 7, text: 'Brazil: 7' },\n { 'x': 'Spain', y: 7, text: 'Spain: 7' },\n { 'x': 'Kenya', y: 6, text: 'Kenya: 6' },\n ],\n animation: { enable: true },\n dataLabel: {\n visible: true,\n position: 'Outside',\n connectorStyle: { type: 'Line', length: '2%', color: 'transparent' },\n font: {\n size: '14px'\n }\n },\n radius: '70%',\n xName: 'x',\n yName: 'y',\n groupTo: '6',\n startAngle: 0,\n endAngle: 360,\n innerRadius: '0%',\n }\n ],\n pointRender: (args: IAccPointRenderEventArgs) => {\n if ((args.point.x as string).indexOf('Others') > -1) {\n args.fill = '#D3D3D3';\n }\n },\n enableSmartLabels: true,\n legendSettings: {\n visible: false,\n },\n textRender: (args: IAccTextRenderEventArgs) => {\n args.text = args.point.x + ' ' + args.point.y + ' Medals';\n },\n tooltip: { enable: true, format: '${point.x} <br> ${point.y} Medals' },\n title: 'Rio Olympics Gold',\n load: (args: IAccLoadedEventArgs) => {\n let selectedTheme: string = location.hash.split('/')[1];\n args.pie.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';\n }\n });\n pie.appendTo('#container');\n function clubchange(value: number): void {\n pie.series[0].groupTo = value.toString();\n pie.series[0].animation.enable = false;\n document.getElementById('clubvalue').innerHTML = value.toString();\n pie.removeSvg();\n pie.refreshSeries();\n pie.refreshChart();\n }\n document.getElementById('clubpoint').onpointermove = document.getElementById('clubpoint').ontouchmove =\n document.getElementById('clubpoint').onchange = (e: Event) => {\n clubchange(+(document.getElementById('clubpoint') as HTMLInputElement).value);\n };\n","index.html":"<html><head>\n <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\">\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<div>\n <div class=\"col-lg-9 control-section\">\n <div class=\"content-wrapper\">\n <div id=\"container\"></div>\n </div>\n </div>\n <div class=\"col-lg-3 property-section\">\n <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n <tbody><tr style=\"height: 50px\">\n <td style=\"width: 60%\">\n <div>Group To:\n <p id=\"clubvalue\" style=\"font-weight: normal;\">6</p>\n </div>\n </td>\n <td style=\"width: 40%;\">\n <div data-role=\"rangeslider\">\n <input type=\"range\" name=\"range-min\" id=\"clubpoint\" value=\"6\" min=\"0\" max=\"27\" style=\"width:90%\">\n </div>\n </td>\n </tr>\n </tbody></table>\n </div>\n</div>\n\n\n</body></html>","systemjs.config.js":"System.config({\n transpiler: \"typescript\",\n typescriptOptions: {\n compilerOptions: {\n target: \"umd\",\n module: \"commonjs\",\n moduleResolution: \"node\",\n emitDecoratorMetadata: true,\n experimentalDecorators: true\n }\n },\n paths: {\n \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n },\n map: {\n main: \"index.ts\",\n typescript: \"https://unpkg.com/[email protected]/lib/typescript.js\",\n 'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\", \n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\", \n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\", \n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\"\n },\n meta: { \n '.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}