circular-gauge.js 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552
  1. "use strict";
  2. var __extends = (this && this.__extends) || (function () {
  3. var extendStatics = Object.setPrototypeOf ||
  4. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  5. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  6. return function (d, b) {
  7. extendStatics(d, b);
  8. function __() { this.constructor = d; }
  9. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  10. };
  11. })();
  12. /*!
  13. * devextreme-angular
  14. * Version: 19.1.16
  15. * Build date: Tue Oct 18 2022
  16. *
  17. * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
  18. *
  19. * This software may be modified and distributed under the terms
  20. * of the MIT license. See the LICENSE file in the root of the project for details.
  21. *
  22. * https://github.com/DevExpress/devextreme-angular
  23. */
  24. Object.defineProperty(exports, "__esModule", { value: true });
  25. var platform_browser_1 = require("@angular/platform-browser");
  26. var platform_browser_2 = require("@angular/platform-browser");
  27. var core_1 = require("@angular/core");
  28. var circular_gauge_1 = require("devextreme/viz/circular_gauge");
  29. var component_1 = require("../core/component");
  30. var template_host_1 = require("../core/template-host");
  31. var integration_1 = require("../core/integration");
  32. var template_1 = require("../core/template");
  33. var nested_option_1 = require("../core/nested-option");
  34. var watcher_helper_1 = require("../core/watcher-helper");
  35. var iterable_differ_helper_1 = require("../core/iterable-differ-helper");
  36. var animation_1 = require("./nested/animation");
  37. var export_1 = require("./nested/export");
  38. var geometry_1 = require("./nested/geometry");
  39. var loading_indicator_1 = require("./nested/loading-indicator");
  40. var font_1 = require("./nested/font");
  41. var margin_1 = require("./nested/margin");
  42. var range_container_1 = require("./nested/range-container");
  43. var range_dxi_1 = require("./nested/range-dxi");
  44. var scale_1 = require("./nested/scale");
  45. var label_1 = require("./nested/label");
  46. var format_1 = require("./nested/format");
  47. var minor_tick_1 = require("./nested/minor-tick");
  48. var tick_1 = require("./nested/tick");
  49. var size_1 = require("./nested/size");
  50. var subvalue_indicator_1 = require("./nested/subvalue-indicator");
  51. var text_1 = require("./nested/text");
  52. var title_1 = require("./nested/title");
  53. var subtitle_1 = require("./nested/subtitle");
  54. var tooltip_1 = require("./nested/tooltip");
  55. var border_1 = require("./nested/border");
  56. var shadow_1 = require("./nested/shadow");
  57. var value_indicator_1 = require("./nested/value-indicator");
  58. /**
  59. * The CircularGauge is a widget that indicates values on a circular numeric scale.
  60. */
  61. var DxCircularGaugeComponent = (function (_super) {
  62. __extends(DxCircularGaugeComponent, _super);
  63. function DxCircularGaugeComponent(elementRef, ngZone, templateHost, _watcherHelper, _idh, optionHost, transferState, platformId) {
  64. var _this = _super.call(this, elementRef, ngZone, templateHost, _watcherHelper, transferState, platformId) || this;
  65. _this._watcherHelper = _watcherHelper;
  66. _this._idh = _idh;
  67. _this._createEventEmitters([
  68. { subscribe: 'disposing', emit: 'onDisposing' },
  69. { subscribe: 'drawn', emit: 'onDrawn' },
  70. { subscribe: 'exported', emit: 'onExported' },
  71. { subscribe: 'exporting', emit: 'onExporting' },
  72. { subscribe: 'fileSaving', emit: 'onFileSaving' },
  73. { subscribe: 'incidentOccurred', emit: 'onIncidentOccurred' },
  74. { subscribe: 'initialized', emit: 'onInitialized' },
  75. { subscribe: 'optionChanged', emit: 'onOptionChanged' },
  76. { subscribe: 'tooltipHidden', emit: 'onTooltipHidden' },
  77. { subscribe: 'tooltipShown', emit: 'onTooltipShown' },
  78. { emit: 'animationChange' },
  79. { emit: 'containerBackgroundColorChange' },
  80. { emit: 'disabledChange' },
  81. { emit: 'elementAttrChange' },
  82. { emit: 'exportChange' },
  83. { emit: 'geometryChange' },
  84. { emit: 'loadingIndicatorChange' },
  85. { emit: 'marginChange' },
  86. { emit: 'pathModifiedChange' },
  87. { emit: 'rangeContainerChange' },
  88. { emit: 'redrawOnResizeChange' },
  89. { emit: 'rtlEnabledChange' },
  90. { emit: 'scaleChange' },
  91. { emit: 'sizeChange' },
  92. { emit: 'subvalueIndicatorChange' },
  93. { emit: 'subvaluesChange' },
  94. { emit: 'themeChange' },
  95. { emit: 'titleChange' },
  96. { emit: 'tooltipChange' },
  97. { emit: 'valueChange' },
  98. { emit: 'valueIndicatorChange' }
  99. ]);
  100. _this._idh.setHost(_this);
  101. optionHost.setHost(_this);
  102. return _this;
  103. }
  104. Object.defineProperty(DxCircularGaugeComponent.prototype, "animation", {
  105. get: /**
  106. * Specifies animation options.
  107. */
  108. function () {
  109. return this._getOption('animation');
  110. },
  111. set: function (value) {
  112. this._setOption('animation', value);
  113. },
  114. enumerable: true,
  115. configurable: true
  116. });
  117. Object.defineProperty(DxCircularGaugeComponent.prototype, "containerBackgroundColor", {
  118. get: /**
  119. * Specifies the color of the parent page element.
  120. */
  121. function () {
  122. return this._getOption('containerBackgroundColor');
  123. },
  124. set: function (value) {
  125. this._setOption('containerBackgroundColor', value);
  126. },
  127. enumerable: true,
  128. configurable: true
  129. });
  130. Object.defineProperty(DxCircularGaugeComponent.prototype, "disabled", {
  131. get: /**
  132. * Specifies whether the widget responds to the user interaction.
  133. */
  134. function () {
  135. return this._getOption('disabled');
  136. },
  137. set: function (value) {
  138. this._setOption('disabled', value);
  139. },
  140. enumerable: true,
  141. configurable: true
  142. });
  143. Object.defineProperty(DxCircularGaugeComponent.prototype, "elementAttr", {
  144. get: /**
  145. * Specifies the attributes to be attached to the widget's root element.
  146. */
  147. function () {
  148. return this._getOption('elementAttr');
  149. },
  150. set: function (value) {
  151. this._setOption('elementAttr', value);
  152. },
  153. enumerable: true,
  154. configurable: true
  155. });
  156. Object.defineProperty(DxCircularGaugeComponent.prototype, "export", {
  157. get: /**
  158. * Configures the exporting and printing features.
  159. */
  160. function () {
  161. return this._getOption('export');
  162. },
  163. set: function (value) {
  164. this._setOption('export', value);
  165. },
  166. enumerable: true,
  167. configurable: true
  168. });
  169. Object.defineProperty(DxCircularGaugeComponent.prototype, "geometry", {
  170. get: /**
  171. * Specifies the options required to set the geometry of the CircularGauge widget.
  172. */
  173. function () {
  174. return this._getOption('geometry');
  175. },
  176. set: function (value) {
  177. this._setOption('geometry', value);
  178. },
  179. enumerable: true,
  180. configurable: true
  181. });
  182. Object.defineProperty(DxCircularGaugeComponent.prototype, "loadingIndicator", {
  183. get: /**
  184. * Configures the loading indicator.
  185. */
  186. function () {
  187. return this._getOption('loadingIndicator');
  188. },
  189. set: function (value) {
  190. this._setOption('loadingIndicator', value);
  191. },
  192. enumerable: true,
  193. configurable: true
  194. });
  195. Object.defineProperty(DxCircularGaugeComponent.prototype, "margin", {
  196. get: /**
  197. * Generates space around the widget.
  198. */
  199. function () {
  200. return this._getOption('margin');
  201. },
  202. set: function (value) {
  203. this._setOption('margin', value);
  204. },
  205. enumerable: true,
  206. configurable: true
  207. });
  208. Object.defineProperty(DxCircularGaugeComponent.prototype, "pathModified", {
  209. get: /**
  210. * Notifies the widget that it is embedded into an HTML page that uses a tag modifying the path.
  211. */
  212. function () {
  213. return this._getOption('pathModified');
  214. },
  215. set: function (value) {
  216. this._setOption('pathModified', value);
  217. },
  218. enumerable: true,
  219. configurable: true
  220. });
  221. Object.defineProperty(DxCircularGaugeComponent.prototype, "rangeContainer", {
  222. get: /**
  223. * Specifies gauge range container options.
  224. */
  225. function () {
  226. return this._getOption('rangeContainer');
  227. },
  228. set: function (value) {
  229. this._setOption('rangeContainer', value);
  230. },
  231. enumerable: true,
  232. configurable: true
  233. });
  234. Object.defineProperty(DxCircularGaugeComponent.prototype, "redrawOnResize", {
  235. get: /**
  236. * Specifies whether to redraw the widget when the size of the parent browser window changes or a mobile device rotates.
  237. */
  238. function () {
  239. return this._getOption('redrawOnResize');
  240. },
  241. set: function (value) {
  242. this._setOption('redrawOnResize', value);
  243. },
  244. enumerable: true,
  245. configurable: true
  246. });
  247. Object.defineProperty(DxCircularGaugeComponent.prototype, "rtlEnabled", {
  248. get: /**
  249. * Switches the widget to a right-to-left representation.
  250. */
  251. function () {
  252. return this._getOption('rtlEnabled');
  253. },
  254. set: function (value) {
  255. this._setOption('rtlEnabled', value);
  256. },
  257. enumerable: true,
  258. configurable: true
  259. });
  260. Object.defineProperty(DxCircularGaugeComponent.prototype, "scale", {
  261. get: /**
  262. * Specifies a gauge's scale options.
  263. */
  264. function () {
  265. return this._getOption('scale');
  266. },
  267. set: function (value) {
  268. this._setOption('scale', value);
  269. },
  270. enumerable: true,
  271. configurable: true
  272. });
  273. Object.defineProperty(DxCircularGaugeComponent.prototype, "size", {
  274. get: /**
  275. * Specifies the widget's size in pixels.
  276. */
  277. function () {
  278. return this._getOption('size');
  279. },
  280. set: function (value) {
  281. this._setOption('size', value);
  282. },
  283. enumerable: true,
  284. configurable: true
  285. });
  286. Object.defineProperty(DxCircularGaugeComponent.prototype, "subvalueIndicator", {
  287. get: /**
  288. * Specifies the appearance options of subvalue indicators.
  289. */
  290. function () {
  291. return this._getOption('subvalueIndicator');
  292. },
  293. set: function (value) {
  294. this._setOption('subvalueIndicator', value);
  295. },
  296. enumerable: true,
  297. configurable: true
  298. });
  299. Object.defineProperty(DxCircularGaugeComponent.prototype, "subvalues", {
  300. get: /**
  301. * Specifies a set of subvalues to be designated by the subvalue indicators.
  302. */
  303. function () {
  304. return this._getOption('subvalues');
  305. },
  306. set: function (value) {
  307. this._setOption('subvalues', value);
  308. },
  309. enumerable: true,
  310. configurable: true
  311. });
  312. Object.defineProperty(DxCircularGaugeComponent.prototype, "theme", {
  313. get: /**
  314. * Sets the name of the theme the widget uses.
  315. */
  316. function () {
  317. return this._getOption('theme');
  318. },
  319. set: function (value) {
  320. this._setOption('theme', value);
  321. },
  322. enumerable: true,
  323. configurable: true
  324. });
  325. Object.defineProperty(DxCircularGaugeComponent.prototype, "title", {
  326. get: /**
  327. * Configures the widget's title.
  328. */
  329. function () {
  330. return this._getOption('title');
  331. },
  332. set: function (value) {
  333. this._setOption('title', value);
  334. },
  335. enumerable: true,
  336. configurable: true
  337. });
  338. Object.defineProperty(DxCircularGaugeComponent.prototype, "tooltip", {
  339. get: /**
  340. * Configures tooltips.
  341. */
  342. function () {
  343. return this._getOption('tooltip');
  344. },
  345. set: function (value) {
  346. this._setOption('tooltip', value);
  347. },
  348. enumerable: true,
  349. configurable: true
  350. });
  351. Object.defineProperty(DxCircularGaugeComponent.prototype, "value", {
  352. get: /**
  353. * Specifies the main value on a gauge.
  354. */
  355. function () {
  356. return this._getOption('value');
  357. },
  358. set: function (value) {
  359. this._setOption('value', value);
  360. },
  361. enumerable: true,
  362. configurable: true
  363. });
  364. Object.defineProperty(DxCircularGaugeComponent.prototype, "valueIndicator", {
  365. get: /**
  366. * Specifies the appearance options of the value indicator.
  367. */
  368. function () {
  369. return this._getOption('valueIndicator');
  370. },
  371. set: function (value) {
  372. this._setOption('valueIndicator', value);
  373. },
  374. enumerable: true,
  375. configurable: true
  376. });
  377. DxCircularGaugeComponent.prototype._createInstance = function (element, options) {
  378. return new circular_gauge_1.default(element, options);
  379. };
  380. DxCircularGaugeComponent.prototype.ngOnDestroy = function () {
  381. this._destroyWidget();
  382. };
  383. DxCircularGaugeComponent.prototype.ngOnChanges = function (changes) {
  384. _super.prototype.ngOnChanges.call(this, changes);
  385. this.setupChanges('subvalues', changes);
  386. };
  387. DxCircularGaugeComponent.prototype.setupChanges = function (prop, changes) {
  388. if (!(prop in this._optionsToUpdate)) {
  389. this._idh.setup(prop, changes);
  390. }
  391. };
  392. DxCircularGaugeComponent.prototype.ngDoCheck = function () {
  393. this._idh.doCheck('subvalues');
  394. this._watcherHelper.checkWatchers();
  395. _super.prototype.ngDoCheck.call(this);
  396. _super.prototype.clearChangedOptions.call(this);
  397. };
  398. DxCircularGaugeComponent.prototype._setOption = function (name, value) {
  399. var isSetup = this._idh.setupSingle(name, value);
  400. var isChanged = this._idh.getChanges(name, value) !== null;
  401. if (isSetup || isChanged) {
  402. _super.prototype._setOption.call(this, name, value);
  403. }
  404. };
  405. DxCircularGaugeComponent.decorators = [
  406. { type: core_1.Component, args: [{
  407. selector: 'dx-circular-gauge',
  408. template: '',
  409. styles: [' :host { display: block; }'],
  410. providers: [
  411. template_host_1.DxTemplateHost,
  412. watcher_helper_1.WatcherHelper,
  413. nested_option_1.NestedOptionHost,
  414. iterable_differ_helper_1.IterableDifferHelper
  415. ]
  416. },] },
  417. ];
  418. /** @nocollapse */
  419. DxCircularGaugeComponent.ctorParameters = function () { return [
  420. { type: core_1.ElementRef, },
  421. { type: core_1.NgZone, },
  422. { type: template_host_1.DxTemplateHost, },
  423. { type: watcher_helper_1.WatcherHelper, },
  424. { type: iterable_differ_helper_1.IterableDifferHelper, },
  425. { type: nested_option_1.NestedOptionHost, },
  426. { type: platform_browser_2.TransferState, },
  427. { type: undefined, decorators: [{ type: core_1.Inject, args: [core_1.PLATFORM_ID,] },] },
  428. ]; };
  429. DxCircularGaugeComponent.propDecorators = {
  430. "animation": [{ type: core_1.Input },],
  431. "containerBackgroundColor": [{ type: core_1.Input },],
  432. "disabled": [{ type: core_1.Input },],
  433. "elementAttr": [{ type: core_1.Input },],
  434. "export": [{ type: core_1.Input },],
  435. "geometry": [{ type: core_1.Input },],
  436. "loadingIndicator": [{ type: core_1.Input },],
  437. "margin": [{ type: core_1.Input },],
  438. "pathModified": [{ type: core_1.Input },],
  439. "rangeContainer": [{ type: core_1.Input },],
  440. "redrawOnResize": [{ type: core_1.Input },],
  441. "rtlEnabled": [{ type: core_1.Input },],
  442. "scale": [{ type: core_1.Input },],
  443. "size": [{ type: core_1.Input },],
  444. "subvalueIndicator": [{ type: core_1.Input },],
  445. "subvalues": [{ type: core_1.Input },],
  446. "theme": [{ type: core_1.Input },],
  447. "title": [{ type: core_1.Input },],
  448. "tooltip": [{ type: core_1.Input },],
  449. "value": [{ type: core_1.Input },],
  450. "valueIndicator": [{ type: core_1.Input },],
  451. "onDisposing": [{ type: core_1.Output },],
  452. "onDrawn": [{ type: core_1.Output },],
  453. "onExported": [{ type: core_1.Output },],
  454. "onExporting": [{ type: core_1.Output },],
  455. "onFileSaving": [{ type: core_1.Output },],
  456. "onIncidentOccurred": [{ type: core_1.Output },],
  457. "onInitialized": [{ type: core_1.Output },],
  458. "onOptionChanged": [{ type: core_1.Output },],
  459. "onTooltipHidden": [{ type: core_1.Output },],
  460. "onTooltipShown": [{ type: core_1.Output },],
  461. "animationChange": [{ type: core_1.Output },],
  462. "containerBackgroundColorChange": [{ type: core_1.Output },],
  463. "disabledChange": [{ type: core_1.Output },],
  464. "elementAttrChange": [{ type: core_1.Output },],
  465. "exportChange": [{ type: core_1.Output },],
  466. "geometryChange": [{ type: core_1.Output },],
  467. "loadingIndicatorChange": [{ type: core_1.Output },],
  468. "marginChange": [{ type: core_1.Output },],
  469. "pathModifiedChange": [{ type: core_1.Output },],
  470. "rangeContainerChange": [{ type: core_1.Output },],
  471. "redrawOnResizeChange": [{ type: core_1.Output },],
  472. "rtlEnabledChange": [{ type: core_1.Output },],
  473. "scaleChange": [{ type: core_1.Output },],
  474. "sizeChange": [{ type: core_1.Output },],
  475. "subvalueIndicatorChange": [{ type: core_1.Output },],
  476. "subvaluesChange": [{ type: core_1.Output },],
  477. "themeChange": [{ type: core_1.Output },],
  478. "titleChange": [{ type: core_1.Output },],
  479. "tooltipChange": [{ type: core_1.Output },],
  480. "valueChange": [{ type: core_1.Output },],
  481. "valueIndicatorChange": [{ type: core_1.Output },],
  482. };
  483. return DxCircularGaugeComponent;
  484. }(component_1.DxComponent));
  485. exports.DxCircularGaugeComponent = DxCircularGaugeComponent;
  486. var DxCircularGaugeModule = (function () {
  487. function DxCircularGaugeModule() {
  488. }
  489. DxCircularGaugeModule.decorators = [
  490. { type: core_1.NgModule, args: [{
  491. imports: [
  492. animation_1.DxoAnimationModule,
  493. export_1.DxoExportModule,
  494. geometry_1.DxoGeometryModule,
  495. loading_indicator_1.DxoLoadingIndicatorModule,
  496. font_1.DxoFontModule,
  497. margin_1.DxoMarginModule,
  498. range_container_1.DxoRangeContainerModule,
  499. range_dxi_1.DxiRangeModule,
  500. scale_1.DxoScaleModule,
  501. label_1.DxoLabelModule,
  502. format_1.DxoFormatModule,
  503. minor_tick_1.DxoMinorTickModule,
  504. tick_1.DxoTickModule,
  505. size_1.DxoSizeModule,
  506. subvalue_indicator_1.DxoSubvalueIndicatorModule,
  507. text_1.DxoTextModule,
  508. title_1.DxoTitleModule,
  509. subtitle_1.DxoSubtitleModule,
  510. tooltip_1.DxoTooltipModule,
  511. border_1.DxoBorderModule,
  512. shadow_1.DxoShadowModule,
  513. value_indicator_1.DxoValueIndicatorModule,
  514. integration_1.DxIntegrationModule,
  515. template_1.DxTemplateModule,
  516. platform_browser_1.BrowserTransferStateModule
  517. ],
  518. declarations: [
  519. DxCircularGaugeComponent
  520. ],
  521. exports: [
  522. DxCircularGaugeComponent,
  523. animation_1.DxoAnimationModule,
  524. export_1.DxoExportModule,
  525. geometry_1.DxoGeometryModule,
  526. loading_indicator_1.DxoLoadingIndicatorModule,
  527. font_1.DxoFontModule,
  528. margin_1.DxoMarginModule,
  529. range_container_1.DxoRangeContainerModule,
  530. range_dxi_1.DxiRangeModule,
  531. scale_1.DxoScaleModule,
  532. label_1.DxoLabelModule,
  533. format_1.DxoFormatModule,
  534. minor_tick_1.DxoMinorTickModule,
  535. tick_1.DxoTickModule,
  536. size_1.DxoSizeModule,
  537. subvalue_indicator_1.DxoSubvalueIndicatorModule,
  538. text_1.DxoTextModule,
  539. title_1.DxoTitleModule,
  540. subtitle_1.DxoSubtitleModule,
  541. tooltip_1.DxoTooltipModule,
  542. border_1.DxoBorderModule,
  543. shadow_1.DxoShadowModule,
  544. value_indicator_1.DxoValueIndicatorModule,
  545. template_1.DxTemplateModule
  546. ]
  547. },] },
  548. ];
  549. return DxCircularGaugeModule;
  550. }());
  551. exports.DxCircularGaugeModule = DxCircularGaugeModule;
  552. //# sourceMappingURL=circular-gauge.js.map