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 pathcustomization-plnkr.json
More file actions
1 lines (1 loc) · 40.6 KB
/
customization-plnkr.json
File metadata and controls
1 lines (1 loc) · 40.6 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","customization-service":"/**\r\n * Dynamic source\r\n */\r\n\r\nimport { CircularGauge } from '@syncfusion/ej2-circulargauge';\r\nimport { Annotations, IAxisLabelRenderEventArgs } from '@syncfusion/ej2-circulargauge';\r\nCircularGauge.Inject(Annotations);\r\n\r\nexport class DynamicDataSerive {\r\n GetSubGauge1(): any {\r\n let gauge1: CircularGauge = new CircularGauge({\r\n axes: [{\r\n annotations: [{\r\n content: '<div style=\"color:#666666;font-size:35px;\">50.5GB</div>',\r\n angle: 180, radius: '0%', zIndex: '1'\r\n }, {\r\n content: '<div style=\"color:#757575;font-size:15px;\">Used</div>',\r\n angle: 180, radius: '25%', zIndex: '1',\r\n textStyle: {\r\n fontFamily: 'Roboto',\r\n color: '#9E9E9E',\r\n fontStyle: 'Bold',\r\n fontWeight: 'Regular',\r\n size: '14px'\r\n }\r\n }],\r\n lineStyle: { width: 0 },\r\n startAngle: 180, endAngle: 180,\r\n radius: '80%',\r\n labelStyle: { font: { size: '0px' } },\r\n majorTicks: { width: 0 },\r\n minorTicks: { height: 0 },\r\n minimum: 0, maximum: 100,\r\n ranges: [{\r\n start: 0, end: 100,\r\n radius: '80%', startWidth: 30,\r\n endWidth: 30, color: '#E0E0E0'\r\n }],\r\n pointers: [{\r\n type: 'RangeBar',\r\n value: 50.5, radius: '80%',\r\n color: '#FF2680', animation: { duration: 0 },\r\n pointerWidth: 30\r\n }]\r\n }]\r\n });\r\n let gauge2: CircularGauge = new CircularGauge({\r\n centerY: '70%',\r\n axes: [{\r\n annotations: [{\r\n content: '<div style=\"color:#666666;font-size:35px;\">1800</div>',\r\n angle: 0,\r\n radius: '110%', zIndex: '1'\r\n }],\r\n lineStyle: { width: 0 },\r\n startAngle: 300, endAngle: 60,\r\n radius: '80%',\r\n labelStyle: { font: { size: '0px' } },\r\n majorTicks: { width: 0 },\r\n minorTicks: { height: 0 },\r\n minimum: 999, maximum: 2000,\r\n ranges: [{\r\n start: 1000, end: 2000,\r\n radius: '90%',\r\n startWidth: 30, endWidth: 30,\r\n color: '#E0E0E0'\r\n }],\r\n pointers: [{\r\n type: 'RangeBar',\r\n value: 1800, radius: '90%',\r\n color: '#FFDD00', animation: { duration: 0 },\r\n pointerWidth: 30\r\n }, {\r\n radius: '90%', value: 1800,\r\n color: '#424242',\r\n animation: { duration: 0 },\r\n pointerWidth: 9,\r\n cap: { radius: 10, color: '#424242', border: { width: 0 } }\r\n }]\r\n }]\r\n });\r\n return { 'gauge1': gauge1, 'gauge2': gauge2 };\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 · Customization · 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\">Customization</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 gauge with pointers. \n Options to change the color and type of the pointer are available 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 gauge elements such as <code>pointers</code> and <code>range</code>.\n Here a needle and range bar are added to show the current value and its appearance\n can be customized by using options in property panel.\n </p>\n <p>\n More information on the range and pointer customization 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 Gauge Customization\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, AnnotationsDirective, AnnotationDirective,\r\n PointersDirective, PointerDirective, RangesDirective, RangeDirective, Annotations, TickModel, GaugeTheme,\r\n ILoadedEventArgs\r\n} from '@syncfusion/ej2-react-circulargauge';\r\nimport { SampleBase } from './sample-base';\r\nimport { CircularGauge } from '@syncfusion/ej2-circulargauge';\r\nimport { DynamicDataSerive } from '../customization-service';\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 Customization extends SampleBase<{}, {}> {\r\n private gauge1: CircularGauge;\r\n private usageGauge: CircularGauge = new CircularGauge(DynamicDataSerive.prototype.GetSubGauge1().gauge1);\r\n private randomGauge: CircularGauge = new CircularGauge(DynamicDataSerive.prototype.GetSubGauge1().gauge2);\r\n private image1: HTMLImageElement;\r\n private image2: HTMLImageElement;\r\n private isUsage: boolean = false;\r\n private isClicked: boolean = true;\r\n private loaded: boolean = false;\r\n private pointerValueElement: HTMLInputElement;\r\n public barColor: DropDownList; public rangeColor: DropDownList; public pointerColor: DropDownList;\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 random(): void {\r\n if (this.isClicked) {\r\n this.gauge1.destroy();\r\n this.isClicked = false;\r\n } else {\r\n this.usageGauge.destroy();\r\n }\r\n this.randomGauge.appendTo('#customization-container');\r\n this.isUsage = false;\r\n this.pointerValueElement.min = '1000';\r\n this.pointerValueElement.max = '2000';\r\n this.pointerValueElement.value = this.randomGauge.axes[0].pointers[0].value.toString();\r\n document.getElementById('currentPointerValue').innerHTML = 'Current Value <span> ' + this.randomGauge.axes[0].pointers[0].value + '</span>';\r\n this.barColor.value = this.randomGauge.axes[0].pointers[0].color;\r\n this.rangeColor.value = this.randomGauge.axes[0].ranges[0].color;\r\n this.pointerColor.value = this.randomGauge.axes[0].pointers[1].color;\r\n this.pointerColor.enabled = true;\r\n document.getElementById('pointColor').className = 'e-enabled';\r\n document.getElementById('pointColor').style.visibility = 'visible';\r\n let currentLine: HTMLSelectElement = document.getElementById('random_line') as HTMLSelectElement;\r\n let exisLine: HTMLSelectElement = document.getElementById('usage_line') as HTMLSelectElement;\r\n currentLine.style.display = 'block';\r\n exisLine.style.display = 'none';\r\n }\r\n public usage(): void {\r\n if (this.isClicked) {\r\n this.gauge1.destroy();\r\n this.isClicked = false;\r\n } else {\r\n this.randomGauge.destroy();\r\n }\r\n this.usageGauge.appendTo('#customization-container');\r\n this.isUsage = true;\r\n this.pointerValueElement.min = '0.5';\r\n this.pointerValueElement.max = '100';\r\n this.pointerValueElement.value = this.usageGauge.axes[0].pointers[0].value.toString();\r\n document.getElementById('currentPointerValue').innerHTML = 'Current Value <span> ' + this.usageGauge.axes[0].pointers[0].value + '</span>';\r\n this.barColor.value = this.usageGauge.axes[0].pointers[0].color;\r\n this.rangeColor.value = this.usageGauge.axes[0].ranges[0].color;\r\n this.pointerColor.enabled = false;\r\n document.getElementById('pointColor').className = 'e-disabled';\r\n let currentLine: HTMLSelectElement = document.getElementById('usage_line') as HTMLSelectElement;\r\n let exisLine: HTMLSelectElement = document.getElementById('random_line') as HTMLSelectElement;\r\n currentLine.style.display = 'block';\r\n exisLine.style.display = 'none';\r\n\r\n }\r\n public pointerValue(): void {\r\n let value: number = +this.pointerValueElement.value;\r\n if (!this.isClicked) {\r\n if (this.isUsage) {\r\n this.usageGauge.setPointerValue(0, 0, value);\r\n this.usageGauge.setAnnotationValue(0, 0, '<div style=\"color:#666666;font-size:35px;\">' + value + 'GB' + '</div>');\r\n } else {\r\n this.randomGauge.setPointerValue(0, 0, value);\r\n this.randomGauge.setPointerValue(0, 1, value);\r\n this.randomGauge.setAnnotationValue(0, 0, '<div style=\"color:#666666;font-size:35px;\">' + value + '' + '</div>');\r\n }\r\n } else {\r\n this.gauge1.setPointerValue(0, 0, value);\r\n this.gauge1.setPointerValue(0, 1, value);\r\n this.gauge1.setAnnotationValue(0, 0, '<div style=\"color:#666666;font-size:35px;\">' + value + '' + '</div>');\r\n this.randomGauge.axes[0].pointers[0].value = value;\r\n this.randomGauge.axes[0].pointers[1].value = value;\r\n this.randomGauge.axes[0].annotations[0].content = '<div style=\"color:#666666;font-size:35px;\">' + value + '' + '</div>';\r\n }\r\n document.getElementById('currentPointerValue').innerHTML = 'Current Value <span> ' + value + '</span>';\r\n }\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='customization-container' loaded={this.onChartLoad.bind(this)} ref={gauge => this.gauge1 = gauge}\r\n centerY='70%'>\r\n <Inject services={[Annotations]} />\r\n <AxesDirective>\r\n <AxisDirective startAngle={300} endAngle={60} radius='80%' minimum={999} maximum={2000}\r\n majorTicks={{\r\n width: 0\r\n }} lineStyle={{ width: 0 }}\r\n minorTicks={{\r\n width: 0\r\n }} labelStyle={{\r\n font: { size: '0px' }\r\n }}>\r\n <AnnotationsDirective>\r\n <AnnotationDirective content='<div style=\"color:#666666;font-size:35px;\">1800</div>'\r\n angle={0} radius='110%' zIndex='1'>\r\n </AnnotationDirective>\r\n </AnnotationsDirective>\r\n <PointersDirective>\r\n <PointerDirective type='RangeBar' value={1800} radius='90%' color='#FFDD00' pointerWidth={30} animation={{\r\n duration: 0\r\n }} />\r\n <PointerDirective value={1800} radius='90%' color='#424242' pointerWidth={9} cap=\r\n {{ radius: 10, color: '#424242', border: { width: 0 } }} animation={{\r\n duration: 0\r\n }} />\r\n </PointersDirective>\r\n <RangesDirective>\r\n <RangeDirective start={1000} end={2000} radius='90%' color='#E0E0E0' startWidth={30} endWidth={30} />\r\n </RangesDirective>\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 <img id='random' src=\"http://ej2.syncfusion.com/react/demos/src/circular-gauge/images/gauge-1.png\" style={{ marginLeft: '25px', marginTop: '10px' }} onClick={this.random.bind(this)} ref={d => this.image1 = d} />\r\n <div id=\"random_line\" style={{ display: \"block\", left: \"0px\", background: \"#ff4081\", \"padding-top\": \"0px\", height: \"2px\", width: \"85px\", margin: \"2px 2px 2px 17px\" }}></div>\r\n </td>\r\n <td>\r\n <img id='usage' src=\"http://ej2.syncfusion.com/react/demos/src/circular-gauge/images/gauge-2.png\" style={{ marginLeft: '25px', marginTop: '10px' }} onClick={this.usage.bind(this)} ref={d => this.image2 = d} />\r\n <div id=\"usage_line\" style={{ display: \"none\", left: \"0px\", background: \"#ff4081\", \"padding-top\": \"0px\", height: \"2px\", width: \"85px\", margin: \"2px 2px 2px 17px\" }}></div>\r\n </td>\r\n </tr>\r\n <tr style={{ height: '50px' }}>\r\n <td>\r\n <div id='currentPointerValue'>Current Value <span> 1800</span> </div>\r\n </td>\r\n <td>\r\n <div>\r\n <input type=\"range\" id=\"currentValue\" defaultValue=\"1800\" min=\"1000\" max=\"2000\" style={{ width: \"90%\" }} onChange={this.pointerValue.bind(this)} ref={d => this.pointerValueElement = d} />\r\n </div>\r\n </td>\r\n </tr>\r\n <tr style={{ height: '50px' }}>\r\n <td>\r\n <div id='rangebarColor'>RangeBar Color</div>\r\n </td>\r\n <td>\r\n <div>\r\n <select id=\"barColor\" className=\"form-control\">\r\n <option value=\"#FFDD00\">#FFDD00</option>\r\n <option value=\"#00bdae\">#00bdae</option>\r\n <option value=\"#FF2680\">#FF2680</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='range'>Range Color</div>\r\n </td>\r\n <td>\r\n <div>\r\n <select id=\"rangeColor\" className=\"form-control\">\r\n <option value=\"#E0E0E0\">#E0E0E0</option>\r\n <option value=\"#7bb4eb\">#7bb4eb</option>\r\n <option value=\"#ea7a57\">#ea7a57</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='pointColor'>Pointer Color</div>\r\n </td>\r\n <td>\r\n <div>\r\n <select id=\"pointerColor\" className=\"form-control\">\r\n <option value=\"#424242\" >#424242</option>\r\n <option value=\"#6f6fe2\">#6f6fe2</option>\r\n <option value=\"#9e480e\">#9e480e</option>\r\n </select>\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.barColor = new DropDownList({\r\n index: 0,\r\n width: 130,\r\n change: () => {\r\n let barColor: string = this.barColor.value.toString();\r\n if (!this.isClicked) {\r\n if (this.isUsage) {\r\n this.usageGauge.axes[0].pointers[0].color = barColor;\r\n this.usageGauge.refresh();\r\n } else {\r\n this.randomGauge.axes[0].pointers[0].color = barColor;\r\n this.randomGauge.refresh();\r\n }\r\n } else {\r\n this.gauge1.axes[0].pointers[0].color = barColor;\r\n this.gauge1.refresh();\r\n this.randomGauge.axes[0].pointers[0].color = barColor;\r\n }\r\n }\r\n });\r\n this.barColor.appendTo('#barColor');\r\n this.rangeColor = new DropDownList({\r\n index: 0,\r\n width: 130,\r\n change: () => {\r\n let barColor: string = this.rangeColor.value.toString();\r\n if (!this.isClicked) {\r\n if (this.isUsage) {\r\n this.usageGauge.axes[0].ranges[0].color = barColor;\r\n this.usageGauge.refresh();\r\n } else {\r\n this.randomGauge.axes[0].ranges[0].color = barColor;\r\n this.randomGauge.refresh();\r\n }\r\n } else {\r\n this.gauge1.axes[0].ranges[0].color = barColor;\r\n this.gauge1.refresh();\r\n this.randomGauge.axes[0].ranges[0].color = barColor;\r\n }\r\n }\r\n });\r\n this.rangeColor.appendTo('#rangeColor');\r\n this.pointerColor = new DropDownList({\r\n index: 0,\r\n width: 130,\r\n change: () => {\r\n let barColor: string = this.pointerColor.value.toString();\r\n if (!this.isClicked) {\r\n if (!this.isUsage) {\r\n this.randomGauge.axes[0].pointers[1].color = barColor;\r\n this.randomGauge.axes[0].pointers[1].cap.border.color = barColor;\r\n this.randomGauge.axes[0].pointers[1].cap.color = barColor;\r\n this.randomGauge.refresh();\r\n }\r\n } else {\r\n this.gauge1.axes[0].pointers[1].color = barColor;\r\n this.gauge1.axes[0].pointers[1].cap.border.color = barColor;\r\n this.gauge1.axes[0].pointers[1].cap.color = barColor;\r\n this.gauge1.refresh();\r\n this.randomGauge.axes[0].pointers[1].color = barColor;\r\n this.randomGauge.axes[0].pointers[1].cap.border.color = barColor;\r\n this.randomGauge.axes[0].pointers[1].cap.color = barColor;\r\n }\r\n }\r\n });\r\n this.pointerColor.appendTo('#pointerColor');\r\n }\r\n let selectedTheme: string = location.hash.split('/')[1]; let color: string;\r\n if (selectedTheme === 'bootstrap') {\r\n color = '#a16ee5';\r\n } else if (selectedTheme === 'fabric') {\r\n color = '#1783FF';\r\n } else {\r\n color = '#ff4081';\r\n }\r\n let exisLine: HTMLSelectElement = document.getElementById('usage_line') as HTMLSelectElement;\r\n let currentLine: HTMLSelectElement = document.getElementById('random_line') as HTMLSelectElement;\r\n exisLine.style.background = color; currentLine.style.background = color;\r\n }\r\n}\nReactDOM.render(<Customization />, 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}"}