This repository was archived by the owner on Jul 30, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathlabels-plnkr.json
More file actions
1 lines (1 loc) · 32.5 KB
/
labels-plnkr.json
File metadata and controls
1 lines (1 loc) · 32.5 KB
1
{"index.css":"","app/property-pane.tsx":"import * as ReactDOM from 'react-dom';\r\nimport * as React from 'react';\r\nexport class PropertyPane extends React.Component<{ title: string }, {}>{\r\n\r\n render() {\r\n return (\r\n <div className='property-panel-section'>\r\n <div className=\"property-panel-header\">\r\n {this.props.title}\r\n </div>\r\n <div className=\"property-panel-content\">\r\n {this.props.children}\r\n </div>\r\n </div>\r\n\r\n )\r\n }\r\n}\r\n","systemjs.config.js":"System.config({\r\n transpiler: \"ts\",\r\n typescriptOptions: {\r\n target: \"es5\",\r\n module: \"commonjs\",\r\n moduleResolution: \"node\",\r\n emitDecoratorMetadata: true,\r\n experimentalDecorators: true,\r\n \"jsx\": \"react\"\r\n },\r\n meta: {\r\n 'typescript': {\r\n \"exports\": \"ts\"\r\n },\r\n '*.json': { loader: 'plugin-json' }\r\n },\r\n paths: {\r\n \"syncfusion:\": \"http://cdn.syncfusion.com/ej2/\"},\r\n map: {\r\n app: 'app',\r\n ts: \"https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js\",\r\n typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\r\n \"plugin-json\":\"https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js\",\r\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\r\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\r\n \"@syncfusion/ej2-splitbuttons\": \"syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js\",\r\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\r\n \"@syncfusion/ej2-maps\": \"syncfusion:ej2-maps/dist/ej2-maps.umd.min.js\",\r\n \"@syncfusion/ej2-treemap\": \"syncfusion:ej2-treemap/dist/ej2-treemap.umd.min.js\",\r\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\r\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\r\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\r\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\r\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\r\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",\r\n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\r\n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",\r\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",\r\n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\r\n \"@syncfusion/ej2-schedule\": \"syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js\",\r\n \"@syncfusion/ej2-pdf-export\": \"syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js\", \r\n \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\r\n \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\", \r\n \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\",\r\n \"@syncfusion/ej2-documenteditor\": \"syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js\",\r\n \"@syncfusion/ej2-notifications\": \"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js\",\r\n \"@syncfusion/ej2-richtexteditor\": \"syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js\",\r\n\t\t\"@syncfusion/ej2-svg-base\": \"syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js\",\r\n \"@syncfusion/ej2-pivotview\": \"syncfusion:ej2-pivotview/dist/ej2-pivotview.umd.min.js\",\r\n \"@syncfusion/ej2-heatmap\": \"syncfusion:ej2-heatmap/dist/ej2-heatmap.umd.min.js\",\r\n \"@syncfusion/ej2-react-base\": \"syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js\",\r\n \"@syncfusion/ej2-react-buttons\": \"syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js\",\r\n \"@syncfusion/ej2-react-splitbuttons\": \"syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js\",\r\n \"@syncfusion/ej2-react-charts\": \"syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js\",\r\n \"@syncfusion/ej2-react-maps\": \"syncfusion:ej2-react-maps/dist/ej2-react-maps.umd.min.js\",\r\n \"@syncfusion/ej2-react-treemap\": \"syncfusion:ej2-react-treemap/dist/ej2-react-treemap.umd.min.js\",\r\n \"@syncfusion/ej2-react-circulargauge\": \"syncfusion:ej2-react-circulargauge/dist/ej2-react-circulargauge.umd.min.js\",\r\n \"@syncfusion/ej2-react-lineargauge\": \"syncfusion:ej2-react-lineargauge/dist/ej2-react-lineargauge.umd.min.js\",\r\n \"@syncfusion/ej2-react-calendars\": \"syncfusion:ej2-react-calendars/dist/ej2-react-calendars.umd.min.js\",\r\n \"@syncfusion/ej2-react-dropdowns\": \"syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js\",\r\n \"@syncfusion/ej2-react-grids\": \"syncfusion:ej2-react-grids/dist/ej2-react-grids.umd.min.js\",\r\n \"@syncfusion/ej2-react-inputs\": \"syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js\",\r\n \"@syncfusion/ej2-react-lists\": \"syncfusion:ej2-react-lists/dist/ej2-react-lists.umd.min.js\",\r\n \"@syncfusion/ej2-react-navigations\": \"syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js\",\r\n \"@syncfusion/ej2-react-popups\": \"syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js\",\r\n \"@syncfusion/ej2-react-schedule\": \"syncfusion:ej2-react-schedule/dist/ej2-react-schedule.umd.min.js\",\r\n \"@syncfusion/ej2-react-documenteditor\": \"syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js\",\r\n \"@syncfusion/ej2-react-notifications\": \"syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.min.js\",\r\n \"@syncfusion/ej2-react-richtexteditor\": \"syncfusion:ej2-react-richtexteditor/dist/ej2-react-richtexteditor.umd.min.js\",\r\n \"@syncfusion/ej2-react-pivotview\": \"syncfusion:ej2-react-pivotview/dist/ej2-react-pivotview.umd.min.js\",\r\n \"@syncfusion/ej2-react-heatmap\": \"syncfusion:ej2-react-heatmap/dist/ej2-react-heatmap.umd.min.js\",\r\n \"react-dom\":\"https://unpkg.com/react-dom@15.5.4/dist/react-dom.min.js\",\r\n \"react\":\"https://unpkg.com/react@15.5.4/dist/react.min.js\",\r\n },\r\n packages: {\r\n 'app': { main: 'index', defaultExtension: 'tsx' },\r\n }\r\n});\r\n\r\nSystem.import('app');","index.html":"<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <title>Circular-gauge · Labels · Essential JS 2 for React · Syncfusion</title>\r\n <meta charset=\"utf-8\" />\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\" />\r\n <meta http-equiv=\"x-ua-compatible\" content=\"ie=edge\">\r\n <!-- {{:meta}} -->\r\n <meta name=\"author\" content=\"Syncfusion\" />\r\n <script type=\"text/javascript\">\r\n var themeName = location.hash || 'material';\r\n themeName = themeName.replace('#','');\r\n window.ripple = (themeName === \"material\")\r\n document.write('<link href=\"http://cdn.syncfusion.com/ej2/' + themeName + '.css\" rel=\"stylesheet\">');\r\n </script>\r\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\" />\r\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\r\n <script src=\"systemjs.config.js\"></script>\r\n <link href=\"index.css\" rel=\"stylesheet\" />\r\n <style>\r\n #loader {\r\n color: #008cff;\r\n height: 40px;\r\n left: 45%;\r\n position: absolute;\r\n top: 45%;\r\n width: 30%;\r\n }\r\n body {\r\n touch-action:none;\r\n }\r\n .body {\r\n font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\";\r\n }\r\n\r\n .e-view {\r\n bottom: 0;\r\n left: 0;\r\n overflow: hidden;\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n }\r\n\r\n .sb-left {\r\n float: left;\r\n }\r\n\r\n .sb-right {\r\n float: right;\r\n }\r\n\r\n .sb-block {\r\n display: block;\r\n }\r\n\r\n .sb-table {\r\n display: table;\r\n }\r\n\r\n .sb-table-cell {\r\n display: table-cell;\r\n vertical-align: middle;\r\n }\r\n\r\n /*sample header*/\r\n\r\n\r\n .sb-header {\r\n height: 48px;\r\n background: #FFFFFF;\r\n box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12);\r\n z-index: 1001;\r\n opacity: 100;\r\n }\r\n\r\n\r\n .sb-header-left, .sb-header-right {\r\n height: 100%;\r\n }\r\n\r\n #sb-header-text {\r\n padding-left: 22px;\r\n opacity: 0.87;\r\n font-family: Roboto;\r\n font-weight: 500;\r\n font-size: 15px;\r\n color: #000000;\r\n text-align: left;\r\n }\r\n\r\n .header-logo {\r\n float: left;\r\n padding-left: 8px;\r\n padding-right: 22px;\r\n }\r\n\r\n .footer-logo {\r\n background: url(https://ej2.syncfusion.com/home/images/footer-logo.svg) no-repeat right;\r\n height: 40px;\r\n width: 140px;\r\n }\r\n\r\n .sb-header-splitter {\r\n float: left;\r\n border-left: 1px solid rgb(196, 196, 196);\r\n height: 32px;\r\n margin-top: 8px;\r\n padding-left: 22 px;\r\n }\r\n\r\n .sb-header-settings {\r\n display: none;\r\n }\r\n\r\n .product-style a{\r\n padding-right: 15px;\r\n font-family:Roboto;\r\n font-weight: 500;\r\n font-size: 13px;\r\n color: #363636;\r\n text-align: center;\r\n text-decoration: none;\r\n }\r\n .product-style a:hover {\r\n color:#3C78EF;\r\n }\r\n\r\n .sb-download-btn a {\r\n text-decoration: none;\r\n }\r\n\r\n .sb-download-text {\r\n color: #FFFFFF;\r\n }\r\n\r\n .sb-download-wrapper {\r\n padding-right: 27px;\r\n }\r\n\r\n .sb-download-btn:hover .sb-download-btn:focus .sb-download-btn.active {\r\n border-radius: 2px;\r\n font-family: \"Roboto\";\r\n font-weight: bold;\r\n color: #FFFFFF;\r\n }\r\n\r\n .sb-download-btn:hover {\r\n background: #006CE6;\r\n }\r\n\r\n .sb-download-btn:focus {\r\n background: #0051CB;\r\n }\r\n\r\n .sb-download-btn.active {\r\n background: #0036B1;\r\n }\r\n\r\n .sb-download-btn {\r\n background-color: #3C78EF;\r\n opacity: 100;\r\n border-radius: 2px;\r\n font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\";\r\n font-weight: 500;\r\n line-height: 18px;\r\n height: 32px;\r\n border-color: transparent;\r\n }\r\n\r\n .sb-bread-crumb {\r\n padding-left: 20px;\r\n padding-top: 24px;\r\n padding-bottom: 10px;\r\n }\r\n\r\n .category-allcontrols a, .category-text a, .crumb-sample {\r\n display: table;\r\n opacity: 0.87;\r\n font-family: Roboto;\r\n font-weight: 500;\r\n font-size: 15px;\r\n color: #3C78EF;\r\n text-align: left;\r\n text-decoration: none;\r\n }\r\n\r\n .sb-bread-crumb .sb-bread-crumb-text>div {\r\n font-size: 15px;\r\n font-weight: 500;\r\n padding-right: 8px;\r\n cursor: default;\r\n display: table-cell;\r\n }\r\n\r\n .sb-bread-crumb-text>div.seperator {\r\n font-weight: 700;\r\n font-size: 15px;\r\n vertical-align: bottom;\r\n } \r\n\r\n .content {\r\n overflow: auto;\r\n height: calc(100% - 50px);\r\n top: 50px;\r\n }\r\n\r\n\r\n .sample-content {\r\n top: 48px;\r\n background: #FFFFFF;\r\n }\r\n\r\n .div {\r\n display: block;\r\n }\r\n\r\n .control-section {\r\n padding-left: 4px;\r\n }\r\n\r\n .crumb-sample {\r\n color: #000000;\r\n line-height: 18px;\r\n }\r\n\r\n #description {\r\n padding-bottom: 16px;\r\n padding-left: 20px;\r\n opacity: 0.75;\r\n font-family: Roboto;\r\n font-size: 13px;\r\n color: #000000;\r\n text-align: left;\r\n padding-top: 14px;\r\n }\r\n\r\n #action-description {\r\n padding-left: 20px;\r\n padding-bottom: 15px;\r\n opacity: 0.75;\r\n font-family: Roboto;\r\n font-size: 13px;\r\n color: #000000;\r\n text-align: left;\r\n }\r\n\r\n #description-section {\r\n padding-left: 20px;\r\n padding-top: 30px;\r\n opacity: 0.87;\r\n font-family:Roboto;\r\n font-weight: 700;\r\n font-size: 15px;\r\n color: #000000;\r\n text-align: left;\r\n }\r\n\r\n\r\n\r\n </style>\r\n</head>\r\n\r\n<body class='e-view ej2-new' aria-busy=\"true\">\r\n <div class=\"sample-browser\">\r\n <div id='sample-header' class=\"sb-header\" role=\"banner\">\r\n <div class='sb-header-left sb-left sb-table'>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div class=\"header-logo\">\r\n <a href=\"https://ej2.syncfusion.com/home/react.html\" target=\"\" rel=\"noopener noreferrer\">\r\n <div class=\"footer-logo\"> </div>\r\n </a>\r\n </div>\r\n \r\n </div>\r\n <div class=\"sb-header-splitter sb-download-splitter\"></div>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div id='sb-header-text' class='e-sb-header-text'>\r\n \r\n <span class='sb-header-text-left'>Essential JS 2 for React</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class='sb-header-right sb-right sb-table'>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div class='product-style'>\r\n <div><a href=\"https://www.syncfusion.com/products/react/circular-gauge\">PRODUCT DETAILS</a></div>\r\n </div>\r\n </div>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div class=\"sb-header-item sb-table-cell sb-download-wrapper\">\r\n <a href=\"https://www.syncfusion.com/downloads/essential-js2\" target=\"_blank\">\r\n <button id=\"download-now\" class=\"sb-download-btn\">\r\n <span class=\"sb-download-text\">DOWNLOAD</span>\r\n </button>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n <div class ='content e-view'>\r\n <div class='sample-content'>\r\n <div id=\"sample-bread-crumb\" class=\"sb-bread-crumb\">\r\n <div class=\"sb-bread-crumb-text\">\r\n <div class=\"category-allcontrols\"><a href=\"https://ej2.syncfusion.com/react/demos\"><span>All Controls</span></a></div>\r\n <div class=\"category-seperator sb-icons\"> / </div>\r\n <div class=\"category-text bread-ctext\"><a href=\"https://ej2.syncfusion.com/react/demos/#/material/circular-gauge/default.html\"><span>Circular-gauge</span></a></div>\r\n <div class=\"category-seperator sb-icons\"> / </div>\r\n <div class=\"crumb-sample\">Labels</div>\r\n </div>\r\n </div>\r\n <div class=\"control-content\">\r\n <div id=\"action-description\">\r\n <p>\r\n \n <p>\n This sample illustrates how to customize the ticks and labels of an axis. \n Position, offset, and height of the tick and label can be changed by using the options provided in the property panel.\n </p>\n \r\n </p>\r\n </div>\r\n <div class=\"container-fluid\">\r\n <div class=\"control-section\">\r\n <div id='sample'>\r\n <div id='loader'>Loading....</div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div id=\"description-section\">Description</div> \r\n <div id=\"description\">\r\n <p>\r\n \n <p>\n In this example, you can see how to render and configure the ticks and labels of an axis in the circular gauge. Labels are\n units that are used to display the values in the axis. You can customize <code>labels</code> with the properties\n like <code>angle</code>, <code>font</code>,\n <code>position</code>, etc. Ticks are used to mark some values on the axis. You can also customize the ticks using\n <code>majorTicks</code>,\n <code>minorTicks</code> properties.\n </p>\n <p>\n More information on the labels can be found in this\n <a target=\"_blank\" href=\"http://ej2.syncfusion.com/documentation\"> documentation section</a>.\n </p>\n \r\n </p> \r\n </div> \r\n </div> \r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n</body>\r\n</html>\r\n","app/index.tsx":"/**\r\n * Sample for labels\r\n */\r\nimport * as React from 'react';\r\nimport * as ReactDOM from 'react-dom';\r\nimport { PropertyPane } from './property-pane';\r\nimport {\r\n CircularGaugeComponent, ILoadedEventArgs, GaugeTheme, AxesDirective, AxisDirective, Inject, AnnotationsDirective, AnnotationDirective,\r\n PointersDirective, PointerDirective, RangesDirective, RangeDirective, Annotations, TickModel\r\n} from '@syncfusion/ej2-react-circulargauge';\r\nimport { SampleBase } from './sample-base';\r\nimport { DropDownList } from '@syncfusion/ej2-dropdowns';\r\nconst SAMPLE_CSS = `\r\n .control-fluid {\r\n\t\tpadding: 0px !important;\r\n }`;\r\n \r\nexport class Labels extends SampleBase<{}, {}> {\r\n private gauge: CircularGaugeComponent;\r\n private tickOffset: HTMLInputElement;\r\n private tickHeight: HTMLInputElement;\r\n private labelOffset: HTMLInputElement;\r\n private isMajorTicks: boolean = true;\r\n private loaded: boolean = false;\r\n public load(args: ILoadedEventArgs): void {\r\n let selectedTheme: string = location.hash.split('/')[1];\r\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\r\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)) as GaugeTheme;\r\n }\r\n public ticksOffset(): void {\r\n let value: number = +this.tickOffset.value;\r\n if (this.isMajorTicks) {\r\n this.gauge.axes[0].majorTicks.offset = value;\r\n } else {\r\n this.gauge.axes[0].minorTicks.offset = value;\r\n }\r\n document.getElementById('offset').innerHTML = 'Tick Offset <span> ' + value;\r\n this.gauge.refresh();\r\n }\r\n public ticksHeight(): void {\r\n let value: number = +this.tickHeight.value;\r\n if (this.isMajorTicks) {\r\n this.gauge.axes[0].majorTicks.height = value;\r\n } else {\r\n this.gauge.axes[0].minorTicks.height = value;\r\n }\r\n document.getElementById('height').innerHTML = 'Tick Height <span> ' + value;\r\n this.gauge.refresh();\r\n }\r\n public labelsOffset(): void {\r\n let value: number = +this.labelOffset.value;\r\n this.gauge.axes[0].labelStyle.offset = value;\r\n document.getElementById('labelOffsetValue').innerHTML = 'Label Offset <span> ' + value;\r\n this.gauge.refresh();\r\n }\r\n public ticks: DropDownList; public tickPosition: DropDownList; public labelPosition: DropDownList;\r\n render() {\r\n return (\r\n <div className='control-pane'>\r\n <div className='control-section row'>\r\n <div className='col-lg-8'>\r\n <CircularGaugeComponent load={this.load.bind(this)} id='range-container' loaded={this.onChartLoad.bind(this)} ref={gauge => this.gauge = gauge}>\r\n <Inject services={[Annotations]} />\r\n <AxesDirective>\r\n <AxisDirective startAngle={210} endAngle={150} radius='75%' minimum={0} maximum={180}\r\n majorTicks={{\r\n position: 'Inside', color: '#757575', width: 2, height: 10, interval: 20\r\n }} lineStyle={{ width: 2, color: '#9E9E9E' }}\r\n minorTicks={{\r\n position: 'Inside', color: '#757575', height: 5, width: 2, interval: 10\r\n }} labelStyle={{\r\n position: 'Outside', autoAngle: true,\r\n font: {\r\n size: '10px'\r\n }\r\n }}>\r\n <AnnotationsDirective>\r\n <AnnotationDirective content='<div id=\"content\" style=\"color:#518C03;font-size:20px;font-family:Segoe UI;font-weight:semibold;\">145</div>'\r\n angle={0} radius='0%' zIndex='1'>\r\n </AnnotationDirective>\r\n </AnnotationsDirective>\r\n <PointersDirective>\r\n <PointerDirective value={145} radius='60%' color='#8BC34A' pointerWidth={10} border={{\r\n width: 0,\r\n color: 'transparent'\r\n }}\r\n animation={{ enable: false }}\r\n type=\"RangeBar\"\r\n roundedCornerRadius={10}\r\n cap={{\r\n radius: 0,\r\n border: {\r\n width: 0\r\n }\r\n }} />\r\n </PointersDirective>\r\n </AxisDirective>\r\n </AxesDirective>\r\n </CircularGaugeComponent>\r\n </div>\r\n <div className='col-lg-4 property-section'>\r\n <PropertyPane title='Properties'>\r\n <table id='property' title='Properties' className='property-panel-table' style={{ width: '100%' }}>\r\n <tbody>\r\n <tr>\r\n <td>\r\n <div> Ticks </div>\r\n </td>\r\n <td>\r\n <div>\r\n <select id=\"Ticks\" className=\"form-control\" style={{ width: '90%' }}>\r\n <option value=\"major\"> Major Ticks</option>\r\n <option value=\"minor\">Minor Ticks</option>\r\n </select>\r\n </div>\r\n </td>\r\n </tr>\r\n <tr>\r\n <td>\r\n <div> Tick Position </div>\r\n </td>\r\n <td>\r\n <div>\r\n <select id=\"tickposition\" className=\"form-control\" style={{ width: '90%' }}>\r\n <option value=\"Inside\"> Inside</option>\r\n <option value=\"Outside\">Outside</option>\r\n </select>\r\n </div>\r\n </td>\r\n </tr>\r\n <tr>\r\n <td>\r\n <div> Label Position </div>\r\n </td>\r\n <td>\r\n <div>\r\n <select id=\"labelposition\" className=\"form-control\" style={{ width: '90%' }}>\r\n <option value=\"Outside\"> Outside</option>\r\n <option value=\"Inside\">Inside</option>\r\n </select>\r\n </div>\r\n </td>\r\n </tr>\r\n <tr>\r\n <td>\r\n <div id='offset'>Tick Offset <span> 0</span> </div>\r\n </td>\r\n <td>\r\n <div>\r\n <input type=\"range\" onChange={this.ticksOffset.bind(this)} ref={d => this.tickOffset = d} id=\"tickOffset\" defaultValue=\"0\" min=\"0\" max=\"50\" style={{ width: '90%' }} />\r\n </div>\r\n </td>\r\n </tr>\r\n <tr>\r\n <td>\r\n <div id='height'>Tick Height <span> 10</span> </div>\r\n </td>\r\n <td>\r\n <div>\r\n <input type=\"range\" onChange={this.ticksHeight.bind(this)} ref={d => this.tickHeight = d} id=\"tickHeight\" defaultValue=\"10\" min=\"1\" max=\"50\" style={{ width: '90%' }} />\r\n </div>\r\n </td>\r\n </tr>\r\n <tr>\r\n <td>\r\n <div id='labelOffsetValue'>Label Offset <span> 0</span> </div>\r\n </td>\r\n <td>\r\n <div>\r\n <input type=\"range\" onChange={this.labelsOffset.bind(this)} ref={d => this.labelOffset = d} id=\"labelOffset\" defaultValue=\"0\" min=\"0\" max=\"50\" style={{ width: '90%' }} />\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </PropertyPane>\r\n </div>\r\n </div>\r\n </div>\r\n )\r\n }\r\n\r\n public onChartLoad(args: {}): void {\r\n if (!this.loaded) {\r\n this.loaded = true;\r\n this.ticks = new DropDownList({\r\n index: 0, width: 130,\r\n change: () => {\r\n let value: string = this.ticks.value.toString();\r\n let tickProp: TickModel; this.isMajorTicks = value === 'major';\r\n if (this.isMajorTicks) {\r\n tickProp = this.gauge.axes[0].majorTicks;\r\n } else {\r\n tickProp = this.gauge.axes[0].minorTicks;\r\n }\r\n this.tickPosition.value = tickProp.position;\r\n this.tickOffset.value = tickProp.offset.toString();\r\n this.tickHeight.value = tickProp.height.toString();\r\n document.getElementById('offset').innerHTML = 'Tick Offset <span> ' + tickProp.offset;\r\n document.getElementById('height').innerHTML = 'Tick Height <span> ' + tickProp.height;\r\n }\r\n });\r\n this.ticks.appendTo('#Ticks');\r\n\r\n this.tickPosition = new DropDownList({\r\n index: 0, width: 130,\r\n change: () => {\r\n let value: string = this.tickPosition.value.toString();\r\n if (this.isMajorTicks) {\r\n this.gauge.axes[0].majorTicks.position = value == 'Inside' ? 'Inside' : 'Outside';\r\n } else {\r\n this.gauge.axes[0].minorTicks.position = value == 'Inside' ? 'Inside' : 'Outside';\r\n }\r\n this.gauge.refresh();\r\n }\r\n });\r\n this.tickPosition.appendTo('#tickposition');\r\n\r\n this.labelPosition = new DropDownList({\r\n index: 0, width: 130,\r\n change: () => {\r\n let value: string = this.labelPosition.value.toString();\r\n this.gauge.axes[0].labelStyle.position = value == 'Inside' ? 'Inside' : 'Outside';\r\n this.gauge.refresh();\r\n }\r\n });\r\n this.labelPosition.appendTo('#labelposition');\r\n }\r\n }\r\n}\nReactDOM.render(<Labels />, document.getElementById('sample'));","app/sample-base.tsx":"import * as ReactDOM from 'react-dom';\r\nimport * as React from 'react';\r\nimport { RouteComponentProps } from 'react-router-dom';\r\nimport { enableRipple } from '@syncfusion/ej2-base';\r\n\r\nenableRipple((window as any).ripple);\r\nexport class SampleBase<P, S> extends React.PureComponent<RouteComponentProps<any> & P, S>{\r\n public rendereComplete(): void {\r\n /**custom render complete function */\r\n }\r\n componentDidMount(): void {\r\n setTimeout(() => {\r\n this.rendereComplete();\r\n }\r\n );\r\n }\r\n}"}