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 pathannotation-plnkr.json
More file actions
1 lines (1 loc) · 35.2 KB
/
annotation-plnkr.json
File metadata and controls
1 lines (1 loc) · 35.2 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","annotation-gauge":"/**\r\n * Annotations\r\n */\r\nimport { CircularGauge } from '@syncfusion/ej2-circulargauge';\r\nimport { Annotations } from '@syncfusion/ej2-circulargauge';\r\nCircularGauge.Inject(Annotations);\r\n\r\nexport function gauge2(): CircularGauge {\r\n let gauge2: CircularGauge = new CircularGauge({\r\n titleStyle: { color: 'black' },\r\n axes: [\r\n {\r\n startAngle: 0, endAngle: 0,\r\n lineStyle: { width: 0 },\r\n ranges: [\r\n {\r\n start: 0, end: 3,\r\n startWidth: 4, endWidth: 4,\r\n color: 'rgba(29,29,29,0.4)'\r\n }, {\r\n start: 3, end: 12,\r\n startWidth: 4, endWidth: 4,\r\n color: 'rgba(168,145,102,0.1)'\r\n }\r\n ],\r\n annotations: [{\r\n angle: 270,\r\n radius: '40%',\r\n content: null\r\n }, {\r\n angle: 180,\r\n radius: '40%',\r\n content: null\r\n }, {\r\n angle: 90,\r\n radius: '50%',\r\n content: null\r\n }, {\r\n angle: 360, zIndex: '1',\r\n radius: '35%',\r\n content: '<div id=\"tm\" style=\"font-size:10px;\">21-06-17</div>'\r\n }],\r\n labelStyle: {\r\n hiddenLabel: 'First',\r\n font: {\r\n color: '#8c8c8c',\r\n size: '0px'\r\n },\r\n autoAngle: false\r\n }, majorTicks: {\r\n width: 1,\r\n height: 5,\r\n interval: 1\r\n }, minorTicks: {\r\n height: 3,\r\n width: 0.5,\r\n interval: 0.2\r\n },\r\n minimum: 0,\r\n maximum: 12,\r\n pointers: [{\r\n radius: '70%',\r\n pointerWidth: 2,\r\n color: 'rgba(29,29,29,1)',\r\n cap: {\r\n color: 'rgba(29,29,29,1)',\r\n radius: 2,\r\n border: {\r\n width: 0.2,\r\n color: 'rgba(168,145,102,1)'\r\n }\r\n },\r\n needleTail: {\r\n color: 'rgba(168,145,102,1)',\r\n length: '10%'\r\n }, animation: {\r\n enable: false,\r\n duration: 500\r\n }\r\n }]\r\n }\r\n ]\r\n });\r\n return gauge2;\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 · AnnotationsSample · 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\">AnnotationsSample</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 a clock by using annotation feature in the gauge. \n Hour and minute gauge are placed as annotation in circular gauge.\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 use annotation in the circular gauge. Annotations are used to mark the specific area\n of interest in gauge with texts, shapes or images. In this sample <code>minutes</code> and <code>seconds</code> sub gauges are achieved using <code>annotation</code> feature.\n </p>\n <br>\n <p classname=\"description-header\">Injecting Module</p>\n <p>Circular gauge component features are segregated into individual feature-wise modules. To use annotation, we need to\n inject <code>Annotations</code> into <code>services</code>.\n </p>\n <p>\n More information on the annotation 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 Annotation\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, ILoadedEventArgs, GaugeTheme\r\n} from '@syncfusion/ej2-react-circulargauge';\r\nimport { CircularGauge, Pointer } from '@syncfusion/ej2-circulargauge';\r\nimport { SampleBase } from './sample-base';\r\nimport { gauge2 } from '../annotation-gauge';\r\nimport { Browser } from '@syncfusion/ej2-base';\r\nconst SAMPLE_CSS = `\r\n .control-fluid {\r\n\t\tpadding: 0px !important;\r\n }`;\r\n\r\nexport class AnnotationsSample extends SampleBase<{}, {}> {\r\n public gauge: CircularGauge;\r\n public onChartLoad(args: ILoadedEventArgs): void {\r\n let id: string = args.gauge.element.id;\r\n document.getElementById(id).setAttribute('title', '');\r\n this.gauge = args.gauge;\r\n this.updateSubGauge1();\r\n this.updateSubGauge2();\r\n };\r\n public onResized(args: Object) {\r\n location.reload();\r\n }\r\n\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 calcTime(offset: string): Date {\r\n let date: Date = new Date();\r\n let localTime: number = date.getTime();\r\n let localOffset: number = date.getTimezoneOffset() * 60000;\r\n let utc: number = localTime + localOffset;\r\n let curretDate: Date = new Date(utc + (3600000 * (+offset)));\r\n return curretDate;\r\n }\r\n public clockInterval: Object;\r\n public intervalExecute: boolean = true;\r\n public subGauge1: CircularGauge; public subGauge2: CircularGauge;\r\n public updateSubGauge1(): void {\r\n this.subGauge1 = new CircularGauge(gauge2());\r\n this.subGauge1.appendTo('#minutes');\r\n }\r\n public updateSubGauge2(): void {\r\n this.subGauge2 = new CircularGauge({\r\n axes: [{\r\n ranges: [{ start: 0, end: 3, startWidth: 4, endWidth: 4, color: 'rgba(29,29,29,0.4)' },\r\n { start: 3, end: 12, startWidth: 4, endWidth: 4, color: 'rgba(168,145,102,0.1)' }],\r\n labelStyle: { hiddenLabel: 'First', font: { color: '#8c8c8c', size: '0px' }, autoAngle: false },\r\n majorTicks: { width: 1, height: 5, interval: 1 },\r\n minorTicks: { height: 3, width: 0.5, interval: 0.2 }, minimum: 0, maximum: 12,\r\n pointers: [{\r\n radius: '70%', pointerWidth: 2, color: 'rgba(29,29,29,1)',\r\n cap: {\r\n color: 'rgba(29,29,29,1)', radius: 2, border: { width: 0.2, color: 'rgba(168,145,102,1)' }\r\n }, needleTail: { color: 'rgba(168,145,102,1)', length: '10%' }, animation: { enable: false, duration: 500 }\r\n }], startAngle: 0, endAngle: 0, lineStyle: { width: 0 }\r\n }],\r\n load: ((args: ILoadedEventArgs): void => {\r\n args.gauge.axes[0].annotations = [{\r\n angle: 360, radius: '35%', zIndex: '1', content: '<div id=\"tm\" style=\"font-size:10px;\">21-06-17</div>'\r\n }];\r\n }),\r\n loaded: ((args: {}): void => {\r\n if (this.intervalExecute) {\r\n this.updateTime(false);\r\n this.clockInterval = setInterval(\r\n (): void => {\r\n this.updateTime(true, this.clockInterval);\r\n },\r\n 1000\r\n );\r\n this.intervalExecute = false;\r\n }\r\n })\r\n });\r\n this.subGauge2.appendTo('#seconds');\r\n }\r\n\r\n public updateTime(enable: boolean, interval?: Object): void {\r\n if (document.getElementById('annotation-container') && document.getElementsByClassName('e-circulargauge')) {\r\n this.getTime('+5.5', this.gauge, enable);\r\n if (document.getElementById('minutes').childElementCount) {\r\n this.getTime('+5.5', this.subGauge1, enable, true);\r\n } else {\r\n this.updateSubGauge1(); this.getTime('+5.5', this.subGauge1, enable, true);\r\n }\r\n if (document.getElementById('seconds').childElementCount) {\r\n this.getTime('+5.5', this.subGauge2, enable, true);\r\n } else {\r\n this.updateSubGauge2(); this.getTime('+5.5', this.subGauge2, enable, true);\r\n }\r\n } else {\r\n clearInterval(+interval);\r\n }\r\n }\r\n\r\n public getTime(offset: string, gauge: CircularGauge | CircularGaugeComponent, enable: boolean, subGauge?: boolean): void {\r\n let returnTime: Date = this.calcTime(offset);\r\n let seconds: number = returnTime.getSeconds() * 12 / 60; seconds = seconds === 0 ? 12 : seconds;\r\n let pointer: Pointer = gauge.axes[0].pointers[2] as Pointer;\r\n let pointer1: Pointer = gauge.axes[0].pointers[0] as Pointer;\r\n if (!subGauge) {\r\n gauge.axes[0].pointers[2].animation.enable = enable;\r\n pointer.currentValue = seconds === 0.2 ? 0 : pointer.currentValue;\r\n } else {\r\n pointer1.currentValue = seconds === 0.2 ? 0 : pointer1.currentValue;\r\n gauge.axes[0].pointers[0].animation.enable = (gauge.element.id === 'seconds' && enable);\r\n }\r\n let hour: number = (returnTime.getHours() + returnTime.getMinutes() / 60) % 12;\r\n let minutes: number = returnTime.getMinutes() * 12 / 60 + returnTime.getSeconds() * 12 / 3600;\r\n let content: string; let hourValue: number;\r\n if (subGauge) {\r\n if (gauge.element.id === 'minutes') {\r\n content = '<div id=\"tm\" style=\"font-size:8px;\">' + Math.floor(returnTime.getMinutes()) + ' M</div>';\r\n gauge.setPointerValue(0, 0, minutes); gauge.setAnnotationValue(0, 3, content);\r\n } else {\r\n gauge.setPointerValue(0, 0, seconds);\r\n content = '<div id=\"tm\" style=\"font-size:8px;\">' + Math.floor(returnTime.getSeconds()) + ' S</div>';\r\n gauge.axes[0].annotations[0].angle = 0;\r\n gauge.axes[0].annotations[0].radius = '50%';\r\n gauge.setAnnotationValue(0, 0, content);\r\n }\r\n } else {\r\n gauge.setPointerValue(0, 0, hour); gauge.setPointerValue(0, 1, minutes); gauge.setPointerValue(0, 2, seconds);\r\n hourValue = (Math.floor(returnTime.getHours()) % 12);\r\n content = '<div id=\"hr\" style=\"background-color:rgba(226, 226, 226, 0.4);' +\r\n 'color:rgba(29,29,29,0.9);padding:4px;font-size:12px;\">' +\r\n (hourValue === 0 ? 12 : hourValue) + ':' + Math.floor(returnTime.getMinutes()) +\r\n (returnTime.getHours() >= 12 ? ' PM' : ' AM') + '</div>';\r\n gauge.setAnnotationValue(0, 2, content); let date: Date = new Date();\r\n content = '<div id=\"tm\" style=\"font-size:10px;\">' + date.getDate() + '-' +\r\n (date.getMonth() + 1) + '-' + date.getFullYear() + '</div>';\r\n gauge.setAnnotationValue(0, 3, content);\r\n }\r\n }\r\n render() {\r\n return (\r\n <div className='control-pane'>\r\n <style>\r\n {SAMPLE_CSS}\r\n </style>\r\n <div className='control-section'>\r\n <CircularGaugeComponent load={this.load.bind(this)} id='annotation-container' ref={gauge => this.gauge = gauge}\r\n loaded={this.onChartLoad.bind(this)}\r\n resized={this.onResized.bind(this)}\r\n centerY='45%'\r\n titleStyle={{ color: 'black', size: '16px' }}>\r\n <Inject services={[Annotations]} />\r\n <AxesDirective>\r\n <AxisDirective startAngle={0} endAngle={0} radius={Browser.isDevice ? '90%' : '70%'} minimum={0} maximum={12}\r\n majorTicks={{\r\n width: 2, height: 14, interval: 1, color: 'rgb(29,29,29)'\r\n }} lineStyle={{ width: 0 }}\r\n minorTicks={{\r\n height: 4, width: 1, interval: 0.2, color: 'rgb(29,29,29)'\r\n }} labelStyle={{\r\n hiddenLabel: 'First', font: { color: 'rgb(29,29,29)' }, autoAngle: false\r\n }}>\r\n <AnnotationsDirective>\r\n <AnnotationDirective content='<div id=\"minutes\" style=\"width:75px;height:75px;\"></div>'\r\n angle={270} radius='50%' zIndex='1'>\r\n </AnnotationDirective>\r\n <AnnotationDirective content='<div id=\"seconds\" style=\"width:75px;height:75px;\"></div>'\r\n angle={180} radius='50%' zIndex='1'>\r\n </AnnotationDirective>\r\n <AnnotationDirective content='<div id=\"hr\" style=\"background-color:rgba(29,29,29,0.6); color:white;font-size:12px;\">11:11 AM</div>'\r\n angle={90} radius='40%' zIndex='1'>\r\n </AnnotationDirective>\r\n <AnnotationDirective content='<div id=\"tm\" style=\"font-size:10px;\">21-06-17</div>'\r\n angle={360} radius='50%' zIndex='1'>\r\n </AnnotationDirective>\r\n </AnnotationsDirective>\r\n <PointersDirective>\r\n <PointerDirective pointerWidth={5} radius='40%' color='rgba(29,29,29,0.8)'\r\n border={{ width: 0, color: '#679EEF' }}\r\n cap={{ radius: 0, border: { width: 0, color: 'red' } }}\r\n needleTail={{ length: '0%' }} animation={{ enable: false }}>\r\n </PointerDirective>\r\n <PointerDirective radius='60%' pointerWidth={5} color='rgba(29,29,29,0.8)'\r\n border={{ width: 0, color: '#2856B6' }}\r\n cap={{ color: 'rgba(29,29,29,0.8)', radius: 0, border: { width: 0, color: 'red' } }}\r\n needleTail={{ length: '0%' }}\r\n animation={{ enable: false }}>\r\n </PointerDirective>\r\n <PointerDirective radius='70%'\r\n pointerWidth={1}\r\n color='rgba(29,29,29,0.8)'\r\n cap={{ color: 'white', radius: 4, border: { width: 2, color: 'rgba(29,29,29,0.8)' } }}\r\n border={{ width: 2, color: 'rgba(29,29,29,0.8)' }}\r\n needleTail={{ color: 'rgba(29,29,29,0.8)', length: '20%', border: { width: 2, color: 'rgba(29,29,29,0.8)' } }}\r\n animation={{ enable: false, duration: 500 }}>\r\n </PointerDirective>\r\n </PointersDirective>\r\n <RangesDirective>\r\n <RangeDirective start={0} end={3} color='rgba(29,29,29,0.6)' />\r\n <RangeDirective start={3} end={12} color='rgba(226, 226, 226, 0.6)' />\r\n </RangesDirective>\r\n </AxisDirective>\r\n </AxesDirective>\r\n </CircularGaugeComponent>\r\n </div>\r\n </div >\r\n )\r\n }\r\n}\nReactDOM.render(<AnnotationsSample />, 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}"}