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 pathrange-plnkr.json
More file actions
1 lines (1 loc) · 36.1 KB
/
range-plnkr.json
File metadata and controls
1 lines (1 loc) · 36.1 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 · Range · 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\">Range</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 highlight a region in an axis by using ranges in gauge. Start, end, color, width and corner radius of the range can be changed by using the options provided \n 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 customize the ranges of an axis in the\n circular gauge.\n Ranges are used to group the axis values, you can use <code>start</code>,\n <code>end</code>, <code>color</code>, <code>startWidth</code>, <code>endWidth</code>\n <code>radius</code> and <code>roundedCornerRadius</code> properties to customize the ranges. In this sample,\n an axis is shown with one range and options to customize the range properties with\n property panel.\n </p>\n <p>\n More information on the ranges 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 Ranges\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, AxesDirective, AxisDirective, Inject,\r\n PointersDirective, PointerDirective, RangesDirective, RangeDirective,\r\n Annotations, AnnotationsDirective, AnnotationDirective, ILoadedEventArgs, GaugeTheme,\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 Range extends SampleBase<{}, {}> {\r\n private gauge: CircularGaugeComponent;\r\n private startElement: HTMLInputElement;\r\n private endElement: HTMLInputElement;\r\n private startWidthElement: HTMLInputElement;\r\n private endWidthElement: HTMLInputElement;\r\n private enableElement: HTMLInputElement;\r\n private radiusElement: HTMLInputElement;\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 start(): void {\r\n let index: number = +this.listObj.value;\r\n let min: number = +this.startElement.value;\r\n document.getElementById('rangeStart').innerHTML = 'Range Start <span> ' + min;\r\n this.gauge.axes[0].ranges[index].start = min;\r\n this.gauge.axes[0].pointers[0].animation.enable = false;\r\n this.gauge.refresh();\r\n }\r\n\r\n public end(): void {\r\n let index: number = +this.listObj.value;\r\n let max: number = +this.endElement.value;\r\n document.getElementById('rangeEnd').innerHTML = 'Range End <span> ' + max;\r\n this.gauge.axes[0].ranges[index].end = max;\r\n this.gauge.axes[0].pointers[0].animation.enable = false;\r\n this.gauge.refresh();\r\n }\r\n\r\n public startWidth(): void {\r\n let index: number = +this.listObj.value;\r\n let startWidth: number = +this.startWidthElement.value;\r\n document.getElementById('rangeStartWidth').innerHTML = 'Start Width <span> ' + startWidth;\r\n this.gauge.axes[0].ranges[index].startWidth = startWidth;\r\n this.gauge.axes[0].pointers[0].animation.enable = false;\r\n this.gauge.refresh();\r\n }\r\n\r\n public endWidth(): void {\r\n let index: number = +this.listObj.value;\r\n let endWidth: number = +this.endWidthElement.value;\r\n document.getElementById('rangeEndWidth').innerHTML = 'End Width <span> ' + endWidth;\r\n this.gauge.axes[0].ranges[index].endWidth = endWidth;\r\n this.gauge.axes[0].pointers[0].animation.enable = false;\r\n this.gauge.refresh();\r\n }\r\n\r\n public radius(): void {\r\n let index: number = +this.listObj.value;\r\n let radius: number = +this.radiusElement.value;\r\n document.getElementById('roundedRadius').innerHTML = 'Corner Radius <span> ' + radius;\r\n this.gauge.axes[0].ranges[index].roundedCornerRadius = radius;\r\n this.gauge.axes[0].pointers[0].animation.enable = false;\r\n this.gauge.refresh();\r\n }\r\n\r\n public enable(): void {\r\n let index: number = +this.listObj.value;\r\n let useRangeColor: boolean = this.enableElement.checked;\r\n this.gauge.axes[0].labelStyle.useRangeColor = useRangeColor;\r\n this.gauge.axes[0].majorTicks.useRangeColor = useRangeColor;\r\n this.gauge.axes[0].minorTicks.useRangeColor = useRangeColor;\r\n this.gauge.axes[0].pointers[0].animation.enable = false;\r\n this.gauge.refresh();\r\n }\r\n public colortObj: DropDownList;\r\n public listObj: 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' ref={gauge => this.gauge = gauge} loaded={this.onChartLoad.bind(this)}>\r\n <Inject services={[Annotations]} />\r\n <AxesDirective>\r\n <AxisDirective startAngle={210} radius='80%' endAngle={150} minimum={0} maximum={120}\r\n majorTicks={{\r\n height: 10, offset: 5,\r\n color: '#9E9E9E'\r\n }} lineStyle={{ width: 10, color: 'transparent' }}\r\n minorTicks={{\r\n height: 0\r\n }} labelStyle={{\r\n position: 'Inside',\r\n font: {\r\n size: '12px',\r\n fontFamily: 'Roboto', fontStyle: 'Regular'\r\n },\r\n useRangeColor: false\r\n }}>\r\n <PointersDirective>\r\n <PointerDirective value={65} radius='60%' color='#757575' pointerWidth={8} needleTail={{\r\n length: '18%',\r\n color: '#757575' \r\n }} cap={{\r\n radius: 7,\r\n color: '#757575'\r\n }} />\r\n </PointersDirective>\r\n <RangesDirective>\r\n <RangeDirective start={0} end={40} color='#30B32D' />\r\n <RangeDirective start={40} end={80} color='#FFDD00' />\r\n <RangeDirective start={80} end={120} color='#F03E3E' />\r\n </RangesDirective>\r\n <AnnotationsDirective>\r\n <AnnotationDirective content='<div><span style=\"font-size:14px; color:#9E9E9E; font-family:Regular\">Speedometer</span></div>'\r\n angle={0} zIndex='1' radius='30%'>\r\n </AnnotationDirective>\r\n <AnnotationDirective content='<div><span style=\"font-size:24px; color:#424242; font-family:Regular\">65 MPH</span></div>'\r\n angle={180} zIndex='1' radius='40%'>\r\n </AnnotationDirective>\r\n </AnnotationsDirective>\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 style={{ height: '50px' }}>\r\n <td>\r\n <div> Select Range </div>\r\n </td>\r\n <td>\r\n <div>\r\n <select id=\"rangeSelect\" className=\"form-control\" style={{ width: '90%' }}>\r\n <option value=\"0\"> Low</option>\r\n <option value=\"1\">Medium</option>\r\n <option value=\"2\">High</option>\r\n </select>\r\n </div>\r\n </td>\r\n </tr>\r\n <tr style={{ height: '50px' }}>\r\n <td>\r\n <div id='rangeStart'>Range Start <span> 0</span> </div>\r\n </td>\r\n <td>\r\n <div>\r\n <input type=\"range\" id=\"start\" defaultValue=\"0\" min=\"0\" max=\"120\" style={{ width: '90%' }} onChange={this.start.bind(this)} ref={d => this.startElement = d} />\r\n </div>\r\n </td>\r\n </tr>\r\n\r\n <tr style={{ height: '50px' }}>\r\n <td>\r\n <div id='rangeEnd'>Range End <span> 40</span> </div>\r\n </td>\r\n <td>\r\n <div>\r\n <input type=\"range\" id=\"end\" defaultValue=\"40\" min=\"0\" max=\"120\" style={{ width: '90%' }} onChange={this.end.bind(this)} ref={d => this.endElement = d} />\r\n </div>\r\n </td>\r\n </tr>\r\n <tr style={{ height: '50px' }}>\r\n <td>\r\n <div id=''>Range Color</div>\r\n </td>\r\n <td>\r\n <div>\r\n <select id=\"rangeColor\" className=\"form-control\">\r\n <option value=\"#30B32D\">#30B32D</option>\r\n <option value=\"#FFDD00\">#FFDD00</option>\r\n <option value=\"#F03E3E\">#F03E3E</option>\r\n </select>\r\n </div>\r\n </td>\r\n </tr>\r\n <tr style={{ height: '50px' }}>\r\n <td style={{ width: '20%' }}>\r\n <div id='enablePointer'>Range Font Color</div>\r\n </td>\r\n <td style={{ width: '40%' }}>\r\n <div>\r\n <input type=\"checkbox\" id=\"enable\" onChange={this.enable.bind(this)} ref={d => this.enableElement = d} />\r\n </div>\r\n </td>\r\n </tr>\r\n <tr style={{ height: '50px' }}>\r\n <td>\r\n <div id='rangeStartWidth'>Start Width <span> 10</span> </div>\r\n </td>\r\n <td>\r\n <div>\r\n <input type=\"range\" id=\"startWidth\" defaultValue=\"10\" min=\"0\" max=\"30\" style={{ width: '90%' }} onChange={this.startWidth.bind(this)} ref={d => this.startWidthElement = d} />\r\n </div>\r\n </td>\r\n </tr>\r\n <tr style={{ height: '50px' }}>\r\n <td>\r\n <div id='rangeEndWidth'>End Width <span> 10</span> </div>\r\n </td>\r\n <td>\r\n <div>\r\n <input type=\"range\" id=\"endWidth\" defaultValue=\"10\" min=\"0\" max=\"30\" style={{ width: '90%' }} onChange={this.endWidth.bind(this)} ref={d => this.endWidthElement = d} />\r\n </div>\r\n </td>\r\n </tr>\r\n <tr style={{ height: '50px' }}>\r\n <td>\r\n <div id='roundedRadius'>Corner Radius <span> 0</span> </div>\r\n </td>\r\n <td>\r\n <div>\r\n <input type=\"range\" id=\"radius\" defaultValue=\"0\" min=\"0\" max=\"30\" step=\"5\" style={{ width: '90%' }} onChange={this.radius.bind(this)} ref={d => this.radiusElement = d} />\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 public onChartLoad(args: {}): void {\r\n if (!this.loaded) {\r\n this.loaded = true;\r\n this.listObj = new DropDownList({\r\n index: 0, width: 130,\r\n change: () => {\r\n let index: number = +this.listObj.value;\r\n this.colortObj.value = this.gauge.axes[0].ranges[index].color;\r\n this.endWidthElement.value = this.gauge.axes[0].ranges[index].endWidth.toString();\r\n document.getElementById('rangeEndWidth').innerHTML = 'End Width <span> ' + this.gauge.axes[0].ranges[index].endWidth;\r\n this.startWidthElement.value = this.gauge.axes[0].ranges[index].startWidth.toString();\r\n document.getElementById('rangeStartWidth').innerHTML = 'Start Width <span> ' + this.gauge.axes[0].ranges[index].startWidth;\r\n this.endElement.value = this.gauge.axes[0].ranges[index].end.toString();\r\n document.getElementById('rangeEnd').innerHTML = 'Range End <span> ' + this.gauge.axes[0].ranges[index].end;\r\n this.startElement.value = this.gauge.axes[0].ranges[index].start.toString();\r\n document.getElementById('rangeStart').innerHTML = 'Range Start <span> ' + this.gauge.axes[0].ranges[index].start;\r\n this.radiusElement.value = this.gauge.axes[0].ranges[index].roundedCornerRadius.toString();\r\n document.getElementById('roundedRadius').innerHTML = 'Corner Radius <span> ' + this.gauge.axes[0].ranges[index].roundedCornerRadius;\r\n }\r\n });\r\n this.listObj.appendTo('#rangeSelect');\r\n this.colortObj = new DropDownList({\r\n index: 0, width: 130,\r\n change: () => {\r\n this.gauge.axes[0].ranges[+this.listObj.value].color = this.colortObj.value.toString();\r\n this.gauge.axes[0].pointers[0].animation.enable = false; this.gauge.refresh();\r\n }\r\n });\r\n this.colortObj.appendTo('#rangeColor');\r\n }\r\n };\r\n}\nReactDOM.render(<Range />, 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}"}