config(EJ2-2871): Added changes to circular gauge.

Author: pipeline

src/circulargauge/labels-plnkr.json

@@ -19,9 +19,9 @@ this.default = (): void => {
                 position: 'Outside', autoAngle: true,
                 font: { size: '10px', color: '#333333' }
             }, majorTicks: {
-                position: 'Inside', color: 'black', width: 0.7, height: 10, interval: 20
+                position: 'Inside', color: 'black', width: 0.5, height: 10, interval: 20
             }, minorTicks: {
-                position: 'Inside', color: 'black', height: 5, width: 0.7, interval: 10
+                position: 'Inside', color: 'black', height: 5, width: 0.5, interval: 10
             },
             radius: '75%', minimum: 0, maximum: 180,
             ranges: [{  start: 0, end: 145, color: '#8BC34A', radius: '60%' }],

src/circulargauge/labels.ts

@@ -1 +1 @@
-{"index.ts":"/**\n * Default sample\n */\nimport { CircularGauge, isCompleteAngle, GaugeDirection } from '@syncfusion/ej2-circulargauge';\nimport { DropDownList } from '@syncfusion/ej2-dropdowns';\n\n    let axisIndex: number = 0;\n    let axis: DropDownList; let direction: DropDownList;\n    let circulargauge: CircularGauge = new CircularGauge({\n        title: 'Gauge with Multiple Axes',\n        titleStyle: { color: 'gray', size: '16px' },\n        axes: [{\n            lineStyle: { width: 1.5, color: ' #9E9E9E' },\n            radius: '95%',\n            labelStyle: {\n                position: 'Inside', autoAngle: true,\n                hiddenLabel: 'None', font: { color: '#333333' }\n            }, majorTicks: {\n                position: 'Inside',\n                width: 0.7, height: 10, color: '#757575'\n            }, minorTicks: {\n                position: 'Inside', width: 0.7,\n                height: 5, color: '#757575'\n            },\n            minimum: 0, maximum: 160, startAngle: 220, endAngle: 140,\n            pointers: [{\n                value: 80, radius: '100%', color: '#333333',\n                markerHeight: 15, markerWidth: 15, type: 'Marker',\n                markerShape: 'Triangle',\n            }]\n        }, {\n            lineStyle: { width: 1.5, color: '#E84011' }, radius: '95%',\n            labelStyle: {\n                position: 'Outside', autoAngle: true,\n                hiddenLabel: 'None', font: { color: '#E84011' }\n            }, majorTicks: {\n                position: 'Outside', width: 2, height: 10,\n                color: '#E84011'\n            }, minorTicks: {\n                position: 'Outside', width: 2,\n                height: 5, color: '#E84011'\n            },\n            minimum: 0, maximum: 240, startAngle: 220, endAngle: 140,\n            pointers: [{\n                value: 120, radius: '100%', color: '#C62E0A',\n                markerHeight: 15, markerWidth: 15, type: 'Marker',\n                markerShape: 'InvertedTriangle',\n            }]\n        }]\n    });\n    circulargauge.appendTo('#axis-container');\n\n    axis = new DropDownList({\n        index: 0, width: 110,\n        change: () => {\n            axisIndex = +axis.value;\n            direction.value = circulargauge.axes[axisIndex].direction;\n            let startAngle: number = circulargauge.axes[axisIndex].startAngle;\n            let endAngle: number = circulargauge.axes[axisIndex].endAngle;\n            document.getElementById('start').innerHTML = 'Start Angle <span> &nbsp;&nbsp;&nbsp;' + startAngle;\n            document.getElementById('end').innerHTML = 'End Angle <span> &nbsp;&nbsp;&nbsp;' + endAngle;\n            (<HTMLInputElement>document.getElementById('startAngle')).value = startAngle.toString();\n            (<HTMLInputElement>document.getElementById('endAngle')).value = endAngle.toString();\n        }\n    });\n    axis.appendTo('#axisIndex');\n\n    direction = new DropDownList({\n        index: 0, width: 110,\n        change: () => {\n            circulargauge.axes[axisIndex].direction = <GaugeDirection>direction.value.toString();\n            circulargauge.axes[0].pointers[0].animation.enable = false;\n            circulargauge.axes[1].pointers[0].animation.enable = false;\n            circulargauge.refresh();\n        }\n    });\n    direction.appendTo('#axisDirection');\n\n    document.getElementById('startAngle').onpointermove = document.getElementById('startAngle').ontouchmove =\n        document.getElementById('startAngle').onchange = () => {\n            let value: number = parseInt((<HTMLInputElement>document.getElementById('startAngle')).value, 10);\n            circulargauge.axes[0].pointers[0].animation.enable = false;\n            circulargauge.axes[1].pointers[0].animation.enable = false;\n            circulargauge.axes[axisIndex].startAngle = value;\n            document.getElementById('start').innerHTML = 'Start Angle <span> &nbsp;&nbsp;&nbsp;' + value;\n            circulargauge.axes[axisIndex].labelStyle.hiddenLabel =\n                isCompleteAngle(circulargauge.axes[axisIndex].startAngle, circulargauge.axes[axisIndex].endAngle) ?\n                    'First' : 'None';\n            circulargauge.refresh();\n        };\n\n    document.getElementById('endAngle').onpointermove = document.getElementById('endAngle').ontouchmove =\n        document.getElementById('endAngle').onchange = () => {\n            let value: number = parseInt((<HTMLInputElement>document.getElementById('endAngle')).value, 10);\n            circulargauge.axes[0].pointers[0].animation.enable = false;\n            circulargauge.axes[1].pointers[0].animation.enable = false;\n            circulargauge.axes[axisIndex].endAngle = value;\n            document.getElementById('end').innerHTML = 'End Angle <span> &nbsp;&nbsp;&nbsp;' + value;\n            circulargauge.axes[axisIndex].labelStyle.hiddenLabel =\n                isCompleteAngle(circulargauge.axes[axisIndex].startAngle, circulargauge.axes[axisIndex].endAngle) ?\n                    'First' : 'None';\n            circulargauge.refresh();\n        };\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-md-8 control-section\">\n        <div class=\"content-wrapper\">\n            <div id=\"axis-container\"></div>\n        </div>\n    </div>\n    <div class=\"col-md-4 property-section\">\n        &#xA0;\n            &#xA0;\n            &#xA0;\n            <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n            <tbody><tr>\n                <td>\n                    <div> Axis </div>\n                </td>\n                <td>\n                    <div>\n                        <select id=\"axisIndex\" class=\"form-control\" style=\"width:90%\"> \n                            <option value=\"0\" selected=\"true\">Axis 1</option>\n                            <option value=\"1\">Axis 2</option>\n                        </select>\n                    </div>\n                </td>\n            </tr><tr>\n                <td>\n                    <div> Direction </div>\n                </td>\n                <td>\n                    <div>\n                        <select id=\"axisDirection\" class=\"form-control\" style=\"width:90%\"> \n                            <option value=\"ClockWise\" selected=\"true\">ClockWise</option>\n                            <option value=\"AntiClockWise\">AntiClockWise</option>\n                        </select>\n                    </div>\n                </td>\n            </tr><tr>\n                <td>\n                    <div id=\"start\">Start Angle <span> &#xA0;&#xA0;&#xA0;220</span> </div>\n                </td>\n                <td>\n                    <div>\n                        <input type=\"range\" id=\"startAngle\" value=\"220\" min=\"0\" max=\"360\" style=\"width:90%\">\n                    </div>\n                </td>\n            </tr><tr>\n                <td>\n                    <div id=\"end\">End Angle <span> &#xA0;&#xA0;&#xA0;140</span> </div>\n                </td>\n                <td>\n                    <div>\n                        <input type=\"range\" id=\"endAngle\" value=\"140\" min=\"0\" max=\"360\" 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));"}
+{"index.ts":"/**\n * Default sample\n */\nimport { CircularGauge, isCompleteAngle, GaugeDirection } from '@syncfusion/ej2-circulargauge';\nimport { DropDownList } from '@syncfusion/ej2-dropdowns';\n\n    let axisIndex: number = 0;\n    let axis: DropDownList; let direction: DropDownList;\n    let circulargauge: CircularGauge = new CircularGauge({\n        title: 'Gauge with Multiple Axes',\n        titleStyle: { color: 'gray', size: '16px' },\n        axes: [{\n            lineStyle: { width: 1.5, color: ' #9E9E9E' },\n            radius: '95%',\n            labelStyle: {\n                position: 'Inside', autoAngle: true,\n                hiddenLabel: 'None', font: { color: '#333333' }\n            }, majorTicks: {\n                position: 'Inside',\n                width: 0.5, height: 10, color: '#757575'\n            }, minorTicks: {\n                position: 'Inside', width: 0.5,\n                height: 5, color: '#757575'\n            },\n            minimum: 0, maximum: 160, startAngle: 220, endAngle: 140,\n            pointers: [{\n                value: 80, radius: '100%', color: '#333333',\n                markerHeight: 15, markerWidth: 15, type: 'Marker',\n                markerShape: 'Triangle',\n            }]\n        }, {\n            lineStyle: { width: 1.5, color: '#E84011' }, radius: '95%',\n            labelStyle: {\n                position: 'Outside', autoAngle: true,\n                hiddenLabel: 'None', font: { color: '#E84011' }\n            }, majorTicks: {\n                position: 'Outside', width: 0.5, height: 10,\n                color: '#E84011'\n            }, minorTicks: {\n                position: 'Outside', width: 0.5,\n                height: 5, color: '#E84011'\n            },\n            minimum: 0, maximum: 240, startAngle: 220, endAngle: 140,\n            pointers: [{\n                value: 120, radius: '100%', color: '#C62E0A',\n                markerHeight: 15, markerWidth: 15, type: 'Marker',\n                markerShape: 'InvertedTriangle',\n            }]\n        }]\n    });\n    circulargauge.appendTo('#axis-container');\n\n    axis = new DropDownList({\n        index: 0, width: 110,\n        change: () => {\n            axisIndex = +axis.value;\n            direction.value = circulargauge.axes[axisIndex].direction;\n            let startAngle: number = circulargauge.axes[axisIndex].startAngle;\n            let endAngle: number = circulargauge.axes[axisIndex].endAngle;\n            document.getElementById('start').innerHTML = 'Start Angle <span> &nbsp;&nbsp;&nbsp;' + startAngle;\n            document.getElementById('end').innerHTML = 'End Angle <span> &nbsp;&nbsp;&nbsp;' + endAngle;\n            (<HTMLInputElement>document.getElementById('startAngle')).value = startAngle.toString();\n            (<HTMLInputElement>document.getElementById('endAngle')).value = endAngle.toString();\n        }\n    });\n    axis.appendTo('#axisIndex');\n\n    direction = new DropDownList({\n        index: 0, width: 110,\n        change: () => {\n            circulargauge.axes[axisIndex].direction = <GaugeDirection>direction.value.toString();\n            circulargauge.axes[0].pointers[0].animation.enable = false;\n            circulargauge.axes[1].pointers[0].animation.enable = false;\n            circulargauge.refresh();\n        }\n    });\n    direction.appendTo('#axisDirection');\n\n    document.getElementById('startAngle').onpointermove = document.getElementById('startAngle').ontouchmove =\n        document.getElementById('startAngle').onchange = () => {\n            let value: number = parseInt((<HTMLInputElement>document.getElementById('startAngle')).value, 10);\n            circulargauge.axes[0].pointers[0].animation.enable = false;\n            circulargauge.axes[1].pointers[0].animation.enable = false;\n            circulargauge.axes[axisIndex].startAngle = value;\n            document.getElementById('start').innerHTML = 'Start Angle <span> &nbsp;&nbsp;&nbsp;' + value;\n            circulargauge.axes[axisIndex].labelStyle.hiddenLabel =\n                isCompleteAngle(circulargauge.axes[axisIndex].startAngle, circulargauge.axes[axisIndex].endAngle) ?\n                    'First' : 'None';\n            circulargauge.refresh();\n        };\n\n    document.getElementById('endAngle').onpointermove = document.getElementById('endAngle').ontouchmove =\n        document.getElementById('endAngle').onchange = () => {\n            let value: number = parseInt((<HTMLInputElement>document.getElementById('endAngle')).value, 10);\n            circulargauge.axes[0].pointers[0].animation.enable = false;\n            circulargauge.axes[1].pointers[0].animation.enable = false;\n            circulargauge.axes[axisIndex].endAngle = value;\n            document.getElementById('end').innerHTML = 'End Angle <span> &nbsp;&nbsp;&nbsp;' + value;\n            circulargauge.axes[axisIndex].labelStyle.hiddenLabel =\n                isCompleteAngle(circulargauge.axes[axisIndex].startAngle, circulargauge.axes[axisIndex].endAngle) ?\n                    'First' : 'None';\n            circulargauge.refresh();\n        };\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-md-8 control-section\">\n        <div class=\"content-wrapper\">\n            <div id=\"axis-container\"></div>\n        </div>\n    </div>\n    <div class=\"col-md-4 property-section\">\n        &#xA0;\n            &#xA0;\n            &#xA0;\n            <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n            <tbody><tr>\n                <td>\n                    <div> Axis </div>\n                </td>\n                <td>\n                    <div>\n                        <select id=\"axisIndex\" class=\"form-control\" style=\"width:90%\"> \n                            <option value=\"0\" selected=\"true\">Axis 1</option>\n                            <option value=\"1\">Axis 2</option>\n                        </select>\n                    </div>\n                </td>\n            </tr><tr>\n                <td>\n                    <div> Direction </div>\n                </td>\n                <td>\n                    <div>\n                        <select id=\"axisDirection\" class=\"form-control\" style=\"width:90%\"> \n                            <option value=\"ClockWise\" selected=\"true\">ClockWise</option>\n                            <option value=\"AntiClockWise\">AntiClockWise</option>\n                        </select>\n                    </div>\n                </td>\n            </tr><tr>\n                <td>\n                    <div id=\"start\">Start Angle <span> &#xA0;&#xA0;&#xA0;220</span> </div>\n                </td>\n                <td>\n                    <div>\n                        <input type=\"range\" id=\"startAngle\" value=\"220\" min=\"0\" max=\"360\" style=\"width:90%\">\n                    </div>\n                </td>\n            </tr><tr>\n                <td>\n                    <div id=\"end\">End Angle <span> &#xA0;&#xA0;&#xA0;140</span> </div>\n                </td>\n                <td>\n                    <div>\n                        <input type=\"range\" id=\"endAngle\" value=\"140\" min=\"0\" max=\"360\" 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));"}