@watermarkinsights/ripple 3.26.0-9 → 3.26.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/dist/cjs/{chartFunctions-d746b939.js → chartFunctions-b7452189.js} +596 -596
- package/dist/cjs/{functions-68f637b4.js → functions-a047a8ea.js} +503 -503
- package/dist/cjs/{global-0f60d748.js → global-21ae6c78.js} +72 -72
- package/dist/cjs/{http-service-9e8c4dd5.js → http-service-494d81de.js} +49 -49
- package/dist/cjs/{interfaces-30a74c1f.js → interfaces-a3338581.js} +29 -29
- package/dist/cjs/{intl-d9ffc76c.js → intl-47d63c8f.js} +131 -131
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/priv-chart-popover.cjs.entry.js +91 -91
- package/dist/cjs/priv-datepicker.cjs.entry.js +657 -657
- package/dist/cjs/priv-navigator-button.cjs.entry.js +19 -19
- package/dist/cjs/priv-navigator-item.cjs.entry.js +23 -23
- package/dist/cjs/ripple.cjs.js +1 -1
- package/dist/cjs/wm-action-menu_2.cjs.entry.js +334 -334
- package/dist/cjs/wm-button.cjs.entry.js +260 -260
- package/dist/cjs/wm-chart-slice.cjs.entry.js +18 -18
- package/dist/cjs/wm-chart.cjs.entry.js +183 -183
- package/dist/cjs/wm-datepicker.cjs.entry.js +263 -263
- package/dist/cjs/wm-file-list.cjs.entry.js +35 -35
- package/dist/cjs/wm-file.cjs.entry.js +181 -181
- package/dist/cjs/wm-input.cjs.entry.js +137 -137
- package/dist/cjs/wm-modal-footer.cjs.entry.js +33 -33
- package/dist/cjs/wm-modal-header.cjs.entry.js +32 -32
- package/dist/cjs/wm-modal.cjs.entry.js +152 -152
- package/dist/cjs/wm-navigation_3.cjs.entry.js +225 -225
- package/dist/cjs/wm-navigator.cjs.entry.js +264 -264
- package/dist/cjs/wm-network-uploader.cjs.entry.js +465 -465
- package/dist/cjs/wm-option_2.cjs.entry.js +768 -768
- package/dist/cjs/wm-pagination.cjs.entry.js +179 -179
- package/dist/cjs/wm-progress-indicator_3.cjs.entry.js +155 -155
- package/dist/cjs/wm-search.cjs.entry.js +184 -184
- package/dist/cjs/wm-snackbar.cjs.entry.js +155 -155
- package/dist/cjs/wm-tab-item_3.cjs.entry.js +264 -264
- package/dist/cjs/wm-tag-input-row.cjs.entry.js +14 -14
- package/dist/cjs/wm-tag-input.cjs.entry.js +939 -939
- package/dist/cjs/wm-timepicker.cjs.entry.js +385 -385
- package/dist/cjs/wm-toggletip.cjs.entry.js +130 -130
- package/dist/cjs/wm-uploader.cjs.entry.js +441 -441
- package/dist/cjs/wm-wrapper.cjs.entry.js +12 -12
- package/dist/collection/components/charts/chartFunctions.js +562 -562
- package/dist/collection/components/charts/priv-chart-popover/priv-chart-popover.js +267 -267
- package/dist/collection/components/charts/wm-chart/wm-chart-slice.js +125 -125
- package/dist/collection/components/charts/wm-chart/wm-chart.js +450 -450
- package/dist/collection/components/charts/wm-progress-monitor/wm-progress-indicator.js +207 -207
- package/dist/collection/components/charts/wm-progress-monitor/wm-progress-monitor.js +143 -143
- package/dist/collection/components/charts/wm-progress-monitor/wm-progress-slice.js +121 -121
- package/dist/collection/components/wm-action-menu/wm-action-menu.js +472 -472
- package/dist/collection/components/wm-button/wm-button.js +575 -575
- package/dist/collection/components/wm-datepicker/priv-datepicker/priv-datepicker.js +983 -983
- package/dist/collection/components/wm-datepicker/wm-datepicker.js +491 -491
- package/dist/collection/components/wm-file/wm-file.js +313 -313
- package/dist/collection/components/wm-file-list/wm-file-list.js +152 -152
- package/dist/collection/components/wm-input/wm-input.css +5 -1
- package/dist/collection/components/wm-input/wm-input.js +509 -509
- package/dist/collection/components/wm-menuitem/wm-menuitem.js +454 -454
- package/dist/collection/components/wm-modal/wm-modal-footer.js +138 -138
- package/dist/collection/components/wm-modal/wm-modal-header.js +82 -82
- package/dist/collection/components/wm-modal/wm-modal.js +462 -462
- package/dist/collection/components/wm-navigation/wm-navigation-hamburger.js +176 -176
- package/dist/collection/components/wm-navigation/wm-navigation-item.js +130 -130
- package/dist/collection/components/wm-navigation/wm-navigation.js +217 -217
- package/dist/collection/components/wm-navigator/priv-navigator-button/priv-navigator-button.js +106 -106
- package/dist/collection/components/wm-navigator/priv-navigator-item/priv-navigator-item.js +123 -123
- package/dist/collection/components/wm-navigator/wm-navigator.js +467 -467
- package/dist/collection/components/wm-option/wm-option.js +435 -435
- package/dist/collection/components/wm-pagination/wm-pagination.js +370 -370
- package/dist/collection/components/wm-search/wm-search.js +439 -439
- package/dist/collection/components/wm-select/wm-select.js +1054 -1054
- package/dist/collection/components/wm-snackbar/wm-snackbar.js +282 -282
- package/dist/collection/components/wm-tabs/wm-tab-item/wm-tab-item.js +211 -211
- package/dist/collection/components/wm-tabs/wm-tab-list/wm-tab-list.js +327 -327
- package/dist/collection/components/wm-tabs/wm-tab-panel/wm-tab-panel.js +108 -108
- package/dist/collection/components/wm-tag-input/wm-tag-input-row/wm-tag-input-row.js +122 -122
- package/dist/collection/components/wm-tag-input/wm-tag-input.js +1294 -1294
- package/dist/collection/components/wm-timepicker/wm-timepicker.js +605 -605
- package/dist/collection/components/wm-toggletip/wm-toggletip.js +253 -253
- package/dist/collection/components/wm-uploader/wm-network-uploader/wm-network-uploader.js +772 -772
- package/dist/collection/components/wm-uploader/wm-uploader.js +964 -964
- package/dist/collection/components/wm-wrapper/wm-wrapper.js +28 -28
- package/dist/collection/dev/scripts.js +20 -20
- package/dist/collection/global/__mocks__/functions.js +6 -6
- package/dist/collection/global/functions.js +546 -546
- package/dist/collection/global/global.js +79 -79
- package/dist/collection/global/interfaces.js +49 -49
- package/dist/collection/global/intl.js +132 -132
- package/dist/collection/global/services/__mocks__/http-service.js +130 -130
- package/dist/collection/global/services/http-service.js +50 -50
- package/dist/collection/lang/lang.js +5 -5
- package/dist/collection/lang/missing.js +43 -43
- package/dist/collection/lang/piglatin.js +93 -93
- package/dist/esm/{chartFunctions-5c1ad085.js → chartFunctions-9d629e09.js} +596 -596
- package/dist/esm/{functions-b2582352.js → functions-3b813e0c.js} +503 -503
- package/dist/esm/{global-86bf0ca6.js → global-c7bb5530.js} +72 -72
- package/dist/esm/{http-service-5d037e16.js → http-service-3dc3b3e7.js} +49 -49
- package/dist/esm/{interfaces-61c6305b.js → interfaces-2b97fab2.js} +29 -29
- package/dist/esm/{intl-6732dd5b.js → intl-d544f922.js} +131 -131
- package/dist/esm/loader.js +1 -1
- package/dist/esm/polyfills/core-js.js +0 -0
- package/dist/esm/polyfills/dom.js +0 -0
- package/dist/esm/polyfills/es5-html-element.js +0 -0
- package/dist/esm/polyfills/index.js +0 -0
- package/dist/esm/polyfills/system.js +0 -0
- package/dist/esm/priv-chart-popover.entry.js +91 -91
- package/dist/esm/priv-datepicker.entry.js +657 -657
- package/dist/esm/priv-navigator-button.entry.js +19 -19
- package/dist/esm/priv-navigator-item.entry.js +23 -23
- package/dist/esm/ripple.js +1 -1
- package/dist/esm/wm-action-menu_2.entry.js +334 -334
- package/dist/esm/wm-button.entry.js +260 -260
- package/dist/esm/wm-chart-slice.entry.js +18 -18
- package/dist/esm/wm-chart.entry.js +183 -183
- package/dist/esm/wm-datepicker.entry.js +263 -263
- package/dist/esm/wm-file-list.entry.js +35 -35
- package/dist/esm/wm-file.entry.js +181 -181
- package/dist/esm/wm-input.entry.js +137 -137
- package/dist/esm/wm-modal-footer.entry.js +33 -33
- package/dist/esm/wm-modal-header.entry.js +32 -32
- package/dist/esm/wm-modal.entry.js +152 -152
- package/dist/esm/wm-navigation_3.entry.js +225 -225
- package/dist/esm/wm-navigator.entry.js +264 -264
- package/dist/esm/wm-network-uploader.entry.js +465 -465
- package/dist/esm/wm-option_2.entry.js +768 -768
- package/dist/esm/wm-pagination.entry.js +179 -179
- package/dist/esm/wm-progress-indicator_3.entry.js +155 -155
- package/dist/esm/wm-search.entry.js +184 -184
- package/dist/esm/wm-snackbar.entry.js +155 -155
- package/dist/esm/wm-tab-item_3.entry.js +264 -264
- package/dist/esm/wm-tag-input-row.entry.js +14 -14
- package/dist/esm/wm-tag-input.entry.js +939 -939
- package/dist/esm/wm-timepicker.entry.js +385 -385
- package/dist/esm/wm-toggletip.entry.js +130 -130
- package/dist/esm/wm-uploader.entry.js +441 -441
- package/dist/esm/wm-wrapper.entry.js +12 -12
- package/dist/esm-es5/{chartFunctions-5c1ad085.js → chartFunctions-9d629e09.js} +1 -1
- package/dist/esm-es5/global-c7bb5530.js +1 -0
- package/dist/esm-es5/{intl-6732dd5b.js → intl-d544f922.js} +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/priv-chart-popover.entry.js +1 -1
- package/dist/esm-es5/priv-datepicker.entry.js +1 -1
- package/dist/esm-es5/ripple.js +1 -1
- package/dist/esm-es5/wm-action-menu_2.entry.js +1 -1
- package/dist/esm-es5/wm-button.entry.js +1 -1
- package/dist/esm-es5/wm-chart.entry.js +1 -1
- package/dist/esm-es5/wm-datepicker.entry.js +1 -1
- package/dist/esm-es5/wm-file.entry.js +1 -1
- package/dist/esm-es5/wm-input.entry.js +1 -1
- package/dist/esm-es5/wm-modal-header.entry.js +1 -1
- package/dist/esm-es5/wm-modal.entry.js +1 -1
- package/dist/esm-es5/wm-navigation_3.entry.js +1 -1
- package/dist/esm-es5/wm-navigator.entry.js +1 -1
- package/dist/esm-es5/wm-network-uploader.entry.js +1 -1
- package/dist/esm-es5/wm-option_2.entry.js +1 -1
- package/dist/esm-es5/wm-pagination.entry.js +1 -1
- package/dist/esm-es5/wm-progress-indicator_3.entry.js +1 -1
- package/dist/esm-es5/wm-search.entry.js +1 -1
- package/dist/esm-es5/wm-snackbar.entry.js +1 -1
- package/dist/esm-es5/wm-tab-item_3.entry.js +1 -1
- package/dist/esm-es5/wm-tag-input.entry.js +1 -1
- package/dist/esm-es5/wm-timepicker.entry.js +1 -1
- package/dist/esm-es5/wm-toggletip.entry.js +1 -1
- package/dist/esm-es5/wm-uploader.entry.js +1 -1
- package/dist/ripple/{p-d5a420fa.entry.js → p-05563588.entry.js} +1 -1
- package/dist/ripple/{p-061914bf.system.entry.js → p-09a04f55.system.entry.js} +1 -1
- package/dist/ripple/{p-a2f10a77.entry.js → p-09bc0aa7.entry.js} +1 -1
- package/dist/ripple/{p-0414179c.entry.js → p-0cfc0d13.entry.js} +1 -1
- package/dist/ripple/{p-a9080b82.entry.js → p-0ef638b7.entry.js} +1 -1
- package/dist/ripple/{p-f740c48c.system.entry.js → p-12c70659.system.entry.js} +1 -1
- package/dist/ripple/p-169606b9.system.js +1 -0
- package/dist/ripple/{p-7ee31208.js → p-18c2f4fe.js} +1 -1
- package/dist/ripple/{p-462e7cf8.system.entry.js → p-236dab05.system.entry.js} +1 -1
- package/dist/ripple/{p-9baf62ae.entry.js → p-2cd5477a.entry.js} +1 -1
- package/dist/ripple/{p-2cef256c.system.entry.js → p-2cde4ade.system.entry.js} +1 -1
- package/dist/ripple/{p-076a8729.entry.js → p-2d46dbea.entry.js} +1 -1
- package/dist/ripple/{p-3313df40.system.entry.js → p-2dd5f5c3.system.entry.js} +1 -1
- package/dist/ripple/{p-64b64f40.system.entry.js → p-35790e4e.system.entry.js} +1 -1
- package/dist/ripple/{p-4e7489a3.system.entry.js → p-38819b27.system.entry.js} +1 -1
- package/dist/ripple/{p-926aab51.entry.js → p-3aa8e5f5.entry.js} +1 -1
- package/dist/ripple/{p-42739dba.entry.js → p-42f8f3ff.entry.js} +1 -1
- package/dist/ripple/{p-c1d814f8.system.entry.js → p-4444add0.system.entry.js} +1 -1
- package/dist/ripple/{p-0648aa61.system.entry.js → p-4f5a48dd.system.entry.js} +1 -1
- package/dist/ripple/{p-2948bf33.system.entry.js → p-4fb81a33.system.entry.js} +1 -1
- package/dist/ripple/{p-22b74491.entry.js → p-51b38033.entry.js} +1 -1
- package/dist/ripple/{p-9706537b.system.js → p-54a2b7d6.system.js} +1 -1
- package/dist/ripple/{p-00edfbc8.system.entry.js → p-56ba575c.system.entry.js} +1 -1
- package/dist/ripple/{p-b7f204e6.entry.js → p-5708349e.entry.js} +1 -1
- package/dist/ripple/{p-7dafc84b.system.entry.js → p-630bd6f5.system.entry.js} +1 -1
- package/dist/ripple/{p-b7982fab.system.js → p-6eb2c2d5.system.js} +1 -1
- package/dist/ripple/{p-a966a18c.entry.js → p-72b9b986.entry.js} +1 -1
- package/dist/ripple/p-76015762.js +1 -0
- package/dist/ripple/{p-3aaf86e4.entry.js → p-7f15df83.entry.js} +1 -1
- package/dist/ripple/{p-5ddb1660.entry.js → p-832910a0.entry.js} +1 -1
- package/dist/ripple/{p-66bb46e5.system.entry.js → p-84ce9b67.system.entry.js} +1 -1
- package/dist/ripple/{p-e6fde200.system.entry.js → p-8775e10b.system.entry.js} +1 -1
- package/dist/ripple/{p-6f96c28d.entry.js → p-8b23f32b.entry.js} +1 -1
- package/dist/ripple/{p-17490d32.entry.js → p-8c853762.entry.js} +1 -1
- package/dist/ripple/{p-81b26d3a.system.entry.js → p-8ff578ad.system.entry.js} +1 -1
- package/dist/ripple/{p-9b9e60aa.system.entry.js → p-95aa793b.system.entry.js} +1 -1
- package/dist/ripple/{p-9b28a31f.entry.js → p-95f4e5a1.entry.js} +1 -1
- package/dist/ripple/{p-accdf91c.system.entry.js → p-a006968b.system.entry.js} +1 -1
- package/dist/ripple/{p-2d33df00.system.js → p-a48e4f1a.system.js} +1 -1
- package/dist/ripple/{p-094388f1.entry.js → p-ae1e1db8.entry.js} +1 -1
- package/dist/ripple/{p-3b582301.entry.js → p-b3d97de8.entry.js} +1 -1
- package/dist/ripple/{p-f8418ac9.entry.js → p-bdecbb63.entry.js} +1 -1
- package/dist/ripple/{p-b805612a.system.entry.js → p-c3665c9f.system.entry.js} +1 -1
- package/dist/ripple/{p-d7f77b2c.js → p-d96b86c9.js} +1 -1
- package/dist/ripple/p-d973fe13.system.entry.js +1 -0
- package/dist/ripple/{p-0503e614.system.entry.js → p-ea99fb58.system.entry.js} +1 -1
- package/dist/ripple/{p-bd94e7c3.entry.js → p-eeeec290.entry.js} +1 -1
- package/dist/ripple/{p-a5662a2c.system.entry.js → p-f2bb38d0.system.entry.js} +1 -1
- package/dist/ripple/{p-043b4874.entry.js → p-f6c9c95f.entry.js} +1 -1
- package/dist/ripple/{p-731beaab.system.entry.js → p-f6f80b8d.system.entry.js} +1 -1
- package/dist/ripple/{p-49f7f1da.entry.js → p-fe76e568.entry.js} +1 -1
- package/dist/ripple/{p-60f58a39.system.entry.js → p-fea37751.system.entry.js} +1 -1
- package/dist/ripple/{p-5b7e1b5d.entry.js → p-ffb83b6f.entry.js} +1 -1
- package/dist/ripple/ripple.esm.js +1 -1
- package/dist/ripple/ripple.js +1 -1
- package/dist/types/components/charts/chartFunctions.d.ts +37 -37
- package/dist/types/components/charts/priv-chart-popover/priv-chart-popover.d.ts +27 -27
- package/dist/types/components/charts/wm-chart/wm-chart-slice.d.ts +11 -11
- package/dist/types/components/charts/wm-chart/wm-chart.d.ts +47 -47
- package/dist/types/components/charts/wm-progress-monitor/wm-progress-indicator.d.ts +29 -29
- package/dist/types/components/charts/wm-progress-monitor/wm-progress-monitor.d.ts +20 -20
- package/dist/types/components/charts/wm-progress-monitor/wm-progress-slice.d.ts +10 -10
- package/dist/types/components/wm-action-menu/wm-action-menu.d.ts +49 -49
- package/dist/types/components/wm-button/wm-button.d.ts +49 -49
- package/dist/types/components/wm-datepicker/priv-datepicker/priv-datepicker.d.ts +80 -80
- package/dist/types/components/wm-datepicker/wm-datepicker.d.ts +42 -42
- package/dist/types/components/wm-file/wm-file.d.ts +40 -40
- package/dist/types/components/wm-file-list/wm-file-list.d.ts +16 -16
- package/dist/types/components/wm-input/wm-input.d.ts +57 -57
- package/dist/types/components/wm-menuitem/wm-menuitem.d.ts +34 -34
- package/dist/types/components/wm-modal/wm-modal-footer.d.ts +14 -14
- package/dist/types/components/wm-modal/wm-modal-header.d.ts +10 -10
- package/dist/types/components/wm-modal/wm-modal.d.ts +40 -40
- package/dist/types/components/wm-navigation/wm-navigation-hamburger.d.ts +21 -21
- package/dist/types/components/wm-navigation/wm-navigation-item.d.ts +13 -13
- package/dist/types/components/wm-navigation/wm-navigation.d.ts +26 -26
- package/dist/types/components/wm-navigator/priv-navigator-button/priv-navigator-button.d.ts +10 -10
- package/dist/types/components/wm-navigator/priv-navigator-item/priv-navigator-item.d.ts +13 -13
- package/dist/types/components/wm-navigator/wm-navigator.d.ts +61 -61
- package/dist/types/components/wm-option/wm-option.d.ts +34 -34
- package/dist/types/components/wm-pagination/wm-pagination.d.ts +32 -32
- package/dist/types/components/wm-search/wm-search.d.ts +77 -77
- package/dist/types/components/wm-select/wm-select.d.ts +101 -101
- package/dist/types/components/wm-snackbar/wm-snackbar.d.ts +31 -31
- package/dist/types/components/wm-tabs/wm-tab-item/wm-tab-item.d.ts +37 -37
- package/dist/types/components/wm-tabs/wm-tab-list/wm-tab-list.d.ts +52 -52
- package/dist/types/components/wm-tabs/wm-tab-panel/wm-tab-panel.d.ts +20 -20
- package/dist/types/components/wm-tag-input/wm-tag-input-row/wm-tag-input-row.d.ts +11 -11
- package/dist/types/components/wm-tag-input/wm-tag-input.d.ts +136 -136
- package/dist/types/components/wm-timepicker/wm-timepicker.d.ts +62 -62
- package/dist/types/components/wm-toggletip/wm-toggletip.d.ts +28 -28
- package/dist/types/components/wm-uploader/wm-network-uploader/wm-network-uploader.d.ts +85 -85
- package/dist/types/components/wm-uploader/wm-uploader.d.ts +99 -99
- package/dist/types/components/wm-wrapper/wm-wrapper.d.ts +7 -7
- package/dist/types/components.d.ts +27 -27
- package/dist/types/global/__mocks__/functions.d.ts +6 -6
- package/dist/types/global/functions.d.ts +49 -49
- package/dist/types/global/global.d.ts +1 -1
- package/dist/types/global/interfaces.d.ts +74 -74
- package/dist/types/global/intl.d.ts +29 -29
- package/dist/types/global/services/__mocks__/http-service.d.ts +6 -6
- package/dist/types/global/services/http-service.d.ts +4 -4
- package/dist/types/lang/lang.d.ts +5 -5
- package/package.json +46 -46
- package/dist/esm-es5/global-86bf0ca6.js +0 -1
- package/dist/ripple/p-233c8059.js +0 -1
- package/dist/ripple/p-9f9a5a1f.system.js +0 -1
- package/dist/ripple/p-e4cef02b.system.entry.js +0 -1
- /package/dist/esm-es5/{functions-b2582352.js → functions-3b813e0c.js} +0 -0
- /package/dist/esm-es5/{http-service-5d037e16.js → http-service-3dc3b3e7.js} +0 -0
- /package/dist/esm-es5/{interfaces-61c6305b.js → interfaces-2b97fab2.js} +0 -0
- /package/dist/ripple/{p-9e94ae94.system.js → p-190afa40.system.js} +0 -0
- /package/dist/ripple/{p-888bec42.js → p-43f1298b.js} +0 -0
- /package/dist/ripple/{p-5384856b.js → p-4a0e1d2d.js} +0 -0
- /package/dist/ripple/{p-313b6073.system.js → p-9d02957d.system.js} +0 -0
- /package/dist/ripple/{p-08b7ec08.system.js → p-f5df5903.system.js} +0 -0
- /package/dist/ripple/{p-a6d6eae7.js → p-fd8070fb.js} +0 -0
|
@@ -3,192 +3,192 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-9f0e6656.js');
|
|
6
|
-
const functions = require('./functions-
|
|
7
|
-
const chartFunctions = require('./chartFunctions-
|
|
6
|
+
const functions = require('./functions-a047a8ea.js');
|
|
7
|
+
const chartFunctions = require('./chartFunctions-b7452189.js');
|
|
8
8
|
|
|
9
9
|
const wmChartCss = ":host,wm-chart{display:block}:host .component-wrapper,wm-chart .component-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;font-size:0.875rem;position:relative;outline:none;}:host .component-wrapper .label,wm-chart .component-wrapper .label{display:block;margin:0;padding-bottom:0.25rem;font-weight:500;position:relative}:host .component-wrapper .label .subinfo,wm-chart .component-wrapper .label .subinfo{display:block;font-weight:normal;font-style:italic;bottom:0.25rem;width:100%;color:#6b6b6b}:host .component-wrapper .label.custom-width,wm-chart .component-wrapper .label.custom-width{width:var(--custom-label-width)}:host .component-wrapper .doughnut-svg,wm-chart .component-wrapper .doughnut-svg,:host .component-wrapper .inner-stacked-bar-wrapper,wm-chart .component-wrapper .inner-stacked-bar-wrapper{overflow:visible}:host .component-wrapper .bar-wrapper,wm-chart .component-wrapper .bar-wrapper{-ms-flex-positive:1;flex-grow:1;width:100%}:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper,wm-chart .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper{width:100%}:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .values,wm-chart .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .values{display:-ms-flexbox;display:flex}:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper,wm-chart .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper{display:-ms-flexbox;display:flex}:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper .stacked-bar-segment,wm-chart .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper .stacked-bar-segment{height:30px;cursor:pointer}:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper .stacked-bar-segment:not(.zero):not(:last-of-type),wm-chart .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper .stacked-bar-segment:not(.zero):not(:last-of-type){margin-right:2px}:host .component-wrapper .doughnut-wrapper,wm-chart .component-wrapper .doughnut-wrapper{-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px}:host .component-wrapper .doughnut-wrapper .doughnut-segment,wm-chart .component-wrapper .doughnut-wrapper .doughnut-segment{cursor:pointer}:host .component-wrapper .value-wrapper,wm-chart .component-wrapper .value-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host .component-wrapper .value-wrapper:not(:last-of-type),wm-chart .component-wrapper .value-wrapper:not(:last-of-type){margin-right:2px}:host .component-wrapper .value-wrapper .value.hidden,wm-chart .component-wrapper .value-wrapper .value.hidden{visibility:hidden}:host .component-wrapper path:active,wm-chart .component-wrapper path:active,:host .component-wrapper path:hover,wm-chart .component-wrapper path:hover,:host .component-wrapper path:focus,wm-chart .component-wrapper path:focus,:host .component-wrapper .stacked-bar-segment:active,wm-chart .component-wrapper .stacked-bar-segment:active,:host .component-wrapper .stacked-bar-segment:hover,wm-chart .component-wrapper .stacked-bar-segment:hover,:host .component-wrapper .stacked-bar-segment:focus,wm-chart .component-wrapper .stacked-bar-segment:focus{outline:none}:host .component-wrapper .stacked-bar-segment:active.stacked-bar-segment,wm-chart .component-wrapper .stacked-bar-segment:active.stacked-bar-segment,:host .component-wrapper .stacked-bar-segment:hover.stacked-bar-segment,wm-chart .component-wrapper .stacked-bar-segment:hover.stacked-bar-segment,:host .component-wrapper .stacked-bar-segment:focus.stacked-bar-segment,wm-chart .component-wrapper .stacked-bar-segment:focus.stacked-bar-segment{-webkit-box-shadow:0px 0px 6px #333;-moz-box-shadow:0px 0px 6px #333;box-shadow:0px 0px 6px #333}:host .component-wrapper path:active.doughnut-segment,wm-chart .component-wrapper path:active.doughnut-segment,:host .component-wrapper path:hover.doughnut-segment,wm-chart .component-wrapper path:hover.doughnut-segment,:host .component-wrapper path:focus.doughnut-segment,wm-chart .component-wrapper path:focus.doughnut-segment,:host .component-wrapper .stacked-bar-segment:active.doughnut-segment,wm-chart .component-wrapper .stacked-bar-segment:active.doughnut-segment,:host .component-wrapper .stacked-bar-segment:hover.doughnut-segment,wm-chart .component-wrapper .stacked-bar-segment:hover.doughnut-segment,:host .component-wrapper .stacked-bar-segment:focus.doughnut-segment,wm-chart .component-wrapper .stacked-bar-segment:focus.doughnut-segment{-webkit-filter:url(#wmHoverDropShadow);filter:url(#wmHoverDropShadow)}:host .component-wrapper path::-moz-focus-inner,wm-chart .component-wrapper path::-moz-focus-inner,:host .component-wrapper .stacked-bar-segment::-moz-focus-inner,wm-chart .component-wrapper .stacked-bar-segment::-moz-focus-inner{border:0;outline:none}:host .component-wrapper.doughnut,wm-chart .component-wrapper.doughnut{width:300px}:host .component-wrapper.doughnut1 label,wm-chart .component-wrapper.doughnut1 label,:host .component-wrapper.doughnut1 .label-text,wm-chart .component-wrapper.doughnut1 .label-text,:host .component-wrapper.doughnut2 label,wm-chart .component-wrapper.doughnut2 label,:host .component-wrapper.doughnut2 .label-text,wm-chart .component-wrapper.doughnut2 .label-text,:host .component-wrapper.doughnut2b label,wm-chart .component-wrapper.doughnut2b label,:host .component-wrapper.doughnut2b .label-text,wm-chart .component-wrapper.doughnut2b .label-text,:host .component-wrapper.doughnut3 label,wm-chart .component-wrapper.doughnut3 label,:host .component-wrapper.doughnut3 .label-text,wm-chart .component-wrapper.doughnut3 .label-text{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .component-wrapper.doughnut0,wm-chart .component-wrapper.doughnut0,:host .component-wrapper.doughnut,wm-chart .component-wrapper.doughnut{-ms-flex-align:center;align-items:center}:host .component-wrapper.doughnut0 label,wm-chart .component-wrapper.doughnut0 label,:host .component-wrapper.doughnut label,wm-chart .component-wrapper.doughnut label{text-align:center;width:100%;padding-bottom:1.5rem}:host .component-wrapper.doughnut0 label .subinfo,wm-chart .component-wrapper.doughnut0 label .subinfo,:host .component-wrapper.doughnut label .subinfo,wm-chart .component-wrapper.doughnut label .subinfo{position:absolute}:host .component-wrapper.doughnut0 .completion-message,wm-chart .component-wrapper.doughnut0 .completion-message,:host .component-wrapper.doughnut .completion-message,wm-chart .component-wrapper.doughnut .completion-message{padding-top:0.625rem}:host .component-wrapper.bar1,wm-chart .component-wrapper.bar1,:host .component-wrapper.bar,wm-chart .component-wrapper.bar{padding:1.25rem;-ms-flex-align:start;align-items:flex-start}:host .component-wrapper.bar1 label,wm-chart .component-wrapper.bar1 label,:host .component-wrapper.bar label,wm-chart .component-wrapper.bar label{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .component-wrapper.bar1 label .subinfo,wm-chart .component-wrapper.bar1 label .subinfo,:host .component-wrapper.bar label .subinfo,wm-chart .component-wrapper.bar label .subinfo{position:initial}:host .component-wrapper.bar1 .chart-wrapper,wm-chart .component-wrapper.bar1 .chart-wrapper,:host .component-wrapper.bar .chart-wrapper,wm-chart .component-wrapper.bar .chart-wrapper{display:-ms-flexbox;display:flex}:host .component-wrapper.bar1 .chart-wrapper .single-perc,wm-chart .component-wrapper.bar1 .chart-wrapper .single-perc,:host .component-wrapper.bar .chart-wrapper .single-perc,wm-chart .component-wrapper.bar .chart-wrapper .single-perc{width:4rem;-ms-flex:none;flex:none;display:-ms-flexbox;display:flex;height:30px;-ms-flex-align:center;align-items:center}:host .component-wrapper.bar1 .chart-wrapper .inner-stacked-bar-wrapper,wm-chart .component-wrapper.bar1 .chart-wrapper .inner-stacked-bar-wrapper,:host .component-wrapper.bar .chart-wrapper .inner-stacked-bar-wrapper,wm-chart .component-wrapper.bar .chart-wrapper .inner-stacked-bar-wrapper{-ms-flex:1;flex:1}:host .component-wrapper.bar1 .chart-wrapper .completion-message,wm-chart .component-wrapper.bar1 .chart-wrapper .completion-message,:host .component-wrapper.bar .chart-wrapper .completion-message,wm-chart .component-wrapper.bar .chart-wrapper .completion-message{width:100%;text-align:right;margin-top:0.25rem}@media screen and (min-width: 768px){:host .component-wrapper.bar1,wm-chart .component-wrapper.bar1,:host .component-wrapper.bar,wm-chart .component-wrapper.bar{-ms-flex-direction:row;flex-direction:row}:host .component-wrapper.bar1 label,wm-chart .component-wrapper.bar1 label,:host .component-wrapper.bar label,wm-chart .component-wrapper.bar label{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;min-height:30px;width:12rem;text-align:left;padding-right:1.25rem;padding-bottom:0;-ms-flex:none;flex:none}:host .component-wrapper.bar1 .bar-wrapper,wm-chart .component-wrapper.bar1 .bar-wrapper,:host .component-wrapper.bar .bar-wrapper,wm-chart .component-wrapper.bar .bar-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host .component-wrapper.bar1 .bar-wrapper .single-perc,wm-chart .component-wrapper.bar1 .bar-wrapper .single-perc,:host .component-wrapper.bar .bar-wrapper .single-perc,wm-chart .component-wrapper.bar .bar-wrapper .single-perc{text-align:center;padding-left:0.5rem;-ms-flex-pack:center;justify-content:center}}:host .component-wrapper.bar2,wm-chart .component-wrapper.bar2,:host .component-wrapper.bar3,wm-chart .component-wrapper.bar3,:host .component-wrapper.bar4,wm-chart .component-wrapper.bar4,:host .component-wrapper.bar5,wm-chart .component-wrapper.bar5{-ms-flex-align:start;align-items:flex-start}:host .component-wrapper.bar2 .inner-stacked-bar-wrapper,wm-chart .component-wrapper.bar2 .inner-stacked-bar-wrapper,:host .component-wrapper.bar4 .inner-stacked-bar-wrapper,wm-chart .component-wrapper.bar4 .inner-stacked-bar-wrapper,:host .component-wrapper.bar5 .inner-stacked-bar-wrapper,wm-chart .component-wrapper.bar5 .inner-stacked-bar-wrapper{height:30px;margin-bottom:0}:host .component-wrapper.bar2 .inner-stacked-bar-wrapper.show-values,wm-chart .component-wrapper.bar2 .inner-stacked-bar-wrapper.show-values,:host .component-wrapper.bar4 .inner-stacked-bar-wrapper.show-values,wm-chart .component-wrapper.bar4 .inner-stacked-bar-wrapper.show-values,:host .component-wrapper.bar5 .inner-stacked-bar-wrapper.show-values,wm-chart .component-wrapper.bar5 .inner-stacked-bar-wrapper.show-values{height:60px;margin-top:0}:host .component-wrapper.bar3 .chart-wrapper,wm-chart .component-wrapper.bar3 .chart-wrapper{position:relative;height:100px}:host .component-wrapper.bar3 .chart-wrapper .inner-stacked-bar-wrapper,wm-chart .component-wrapper.bar3 .chart-wrapper .inner-stacked-bar-wrapper{position:absolute;top:35px;left:0;right:0;bottom:0;height:30px}:host .component-wrapper.bar3 .chart-wrapper .inner-stacked-bar-wrapper text,wm-chart .component-wrapper.bar3 .chart-wrapper .inner-stacked-bar-wrapper text{fill:#4a4a4a}:host .component-wrapper.bar3 .chart-wrapper .axis,wm-chart .component-wrapper.bar3 .chart-wrapper .axis{position:absolute;top:0;left:0;height:90px;width:100%;overflow:visible;-webkit-transform:translateY(90px);transform:translateY(90px)}:host .component-wrapper.bar3 .chart-wrapper .axis line,wm-chart .component-wrapper.bar3 .chart-wrapper .axis line{stroke:#eeedf4;stroke-width:1px}:host .component-wrapper.bar3 .chart-wrapper .axis text,wm-chart .component-wrapper.bar3 .chart-wrapper .axis text{-webkit-transform:translate(4px, 24px);transform:translate(4px, 24px);text-anchor:middle}:host .component-wrapper.bar3 .hidden-values-warning,wm-chart .component-wrapper.bar3 .hidden-values-warning{margin-top:1.25rem}:host .component-wrapper.bar6,wm-chart .component-wrapper.bar6,:host .component-wrapper.bar7,wm-chart .component-wrapper.bar7{--chartPadding:48px;-ms-flex-align:start;align-items:flex-start}:host .component-wrapper.bar6 .chart-wrapper,wm-chart .component-wrapper.bar6 .chart-wrapper,:host .component-wrapper.bar7 .chart-wrapper,wm-chart .component-wrapper.bar7 .chart-wrapper{width:100%}:host .component-wrapper.bar6 .chart,wm-chart .component-wrapper.bar6 .chart,:host .component-wrapper.bar7 .chart,wm-chart .component-wrapper.bar7 .chart{position:relative;padding-right:var(--chartPadding)}:host .component-wrapper.bar6 .gridlines,wm-chart .component-wrapper.bar6 .gridlines,:host .component-wrapper.bar7 .gridlines,wm-chart .component-wrapper.bar7 .gridlines{position:absolute;left:var(--labelWidth);right:var(--chartPadding);top:0;bottom:0;background-image:linear-gradient(90deg, #8f8f8f 1px, transparent 1px);background-position:-1px;border-left:1px solid #8f8f8f;border-bottom:1px solid #8f8f8f;background-size:var(--backgroundSize)}:host .component-wrapper.bar6 .rows,wm-chart .component-wrapper.bar6 .rows,:host .component-wrapper.bar7 .rows,wm-chart .component-wrapper.bar7 .rows{display:grid;grid-template-columns:var(--labelWidth) auto;grid-auto-rows:minmax(30px, 1fr);-ms-flex-align:center;align-items:center;position:relative;z-index:1}:host .component-wrapper.bar6 .rows .label,wm-chart .component-wrapper.bar6 .rows .label,:host .component-wrapper.bar7 .rows .label,wm-chart .component-wrapper.bar7 .rows .label{font-weight:400;padding:0 0.75rem 0 0;text-align:right;margin:0.75rem 0}:host .component-wrapper.bar6 .rows .label.hidden,wm-chart .component-wrapper.bar6 .rows .label.hidden,:host .component-wrapper.bar7 .rows .label.hidden,wm-chart .component-wrapper.bar7 .rows .label.hidden{visibility:hidden;white-space:nowrap}:host .component-wrapper.bar6 .bar,wm-chart .component-wrapper.bar6 .bar,:host .component-wrapper.bar7 .bar,wm-chart .component-wrapper.bar7 .bar{height:30px;position:relative}:host .component-wrapper.bar6 .bar .value,wm-chart .component-wrapper.bar6 .bar .value,:host .component-wrapper.bar7 .bar .value,wm-chart .component-wrapper.bar7 .bar .value{position:absolute;top:50%;right:-0.5rem;-webkit-transform:translate(100%, -50%);transform:translate(100%, -50%)}:host .component-wrapper.bar6 .x-axis,wm-chart .component-wrapper.bar6 .x-axis,:host .component-wrapper.bar7 .x-axis,wm-chart .component-wrapper.bar7 .x-axis{margin-left:var(--labelWidth);margin-right:var(--chartPadding);display:-ms-flexbox;display:flex;postion:relative}:host .component-wrapper.bar6 .tick,wm-chart .component-wrapper.bar6 .tick,:host .component-wrapper.bar7 .tick,wm-chart .component-wrapper.bar7 .tick{-ms-flex:1;flex:1;text-align:right}:host .component-wrapper.bar6 .tick span,wm-chart .component-wrapper.bar6 .tick span,:host .component-wrapper.bar7 .tick span,wm-chart .component-wrapper.bar7 .tick span{-webkit-transform:translateX(50%);transform:translateX(50%);display:inline-block}:host .component-wrapper.bar6 .zero,wm-chart .component-wrapper.bar6 .zero,:host .component-wrapper.bar7 .zero,wm-chart .component-wrapper.bar7 .zero{position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%)}:host .component-wrapper.bar6 .bar:active,wm-chart .component-wrapper.bar6 .bar:active,:host .component-wrapper.bar6 .bar:hover,wm-chart .component-wrapper.bar6 .bar:hover,:host .component-wrapper.bar6 .bar:focus,wm-chart .component-wrapper.bar6 .bar:focus,:host .component-wrapper.bar7 .bar:active,wm-chart .component-wrapper.bar7 .bar:active,:host .component-wrapper.bar7 .bar:hover,wm-chart .component-wrapper.bar7 .bar:hover,:host .component-wrapper.bar7 .bar:focus,wm-chart .component-wrapper.bar7 .bar:focus{outline:none}:host .component-wrapper.bar6 .bar:active.bar,wm-chart .component-wrapper.bar6 .bar:active.bar,:host .component-wrapper.bar6 .bar:hover.bar,wm-chart .component-wrapper.bar6 .bar:hover.bar,:host .component-wrapper.bar6 .bar:focus.bar,wm-chart .component-wrapper.bar6 .bar:focus.bar,:host .component-wrapper.bar7 .bar:active.bar,wm-chart .component-wrapper.bar7 .bar:active.bar,:host .component-wrapper.bar7 .bar:hover.bar,wm-chart .component-wrapper.bar7 .bar:hover.bar,:host .component-wrapper.bar7 .bar:focus.bar,wm-chart .component-wrapper.bar7 .bar:focus.bar{-webkit-box-shadow:0px 0px 6px #333;-moz-box-shadow:0px 0px 6px #333;box-shadow:0px 0px 6px #333}:host .component-wrapper.left-label,wm-chart .component-wrapper.left-label{-ms-flex-direction:row;flex-direction:row}:host .component-wrapper.left-label .label,wm-chart .component-wrapper.left-label .label{width:12rem;padding-right:1.25rem;-ms-flex:none;flex:none;-ms-flex-item-align:end;align-self:flex-end;min-height:30px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .component-wrapper .hidden-values-warning,wm-chart .component-wrapper .hidden-values-warning{font-size:0.75rem;font-style:italic;max-width:100%}:host #chart-instructions,wm-chart #chart-instructions{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .component-wrapper .legend-wrapper,wm-chart .component-wrapper .legend-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-align:center}:host .component-wrapper .legend-wrapper .legend,wm-chart .component-wrapper .legend-wrapper .legend{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;text-align:center;padding-top:0.25rem;padding-bottom:0.75rem;-webkit-box-sizing:border-box;box-sizing:border-box}:host .component-wrapper .legend-wrapper .legend.bar1,wm-chart .component-wrapper .legend-wrapper .legend.bar1,:host .component-wrapper .legend-wrapper .legend.bar6,wm-chart .component-wrapper .legend-wrapper .legend.bar6{display:none}:host .component-wrapper .legend-wrapper .legend.--top,wm-chart .component-wrapper .legend-wrapper .legend.--top{margin-top:-0.75rem}:host .component-wrapper .legend-wrapper .legend.--top .legend-item,wm-chart .component-wrapper .legend-wrapper .legend.--top .legend-item{padding-top:0.75rem}:host .component-wrapper .legend-wrapper .legend.--top .legend-color,wm-chart .component-wrapper .legend-wrapper .legend.--top .legend-color{top:0.75rem}:host .component-wrapper .legend-wrapper .legend.--bottom,wm-chart .component-wrapper .legend-wrapper .legend.--bottom{margin-bottom:-0.75rem}:host .component-wrapper .legend-wrapper .legend.--bottom .legend-item,wm-chart .component-wrapper .legend-wrapper .legend.--bottom .legend-item{padding-bottom:0.75rem}:host .component-wrapper .legend-wrapper .legend.--bottom .legend-color,wm-chart .component-wrapper .legend-wrapper .legend.--bottom .legend-color{top:-0.75rem}:host .component-wrapper .legend-wrapper .legend .legend-item,wm-chart .component-wrapper .legend-wrapper .legend .legend-item{position:relative}:host .component-wrapper .legend-wrapper .legend .legend-item:not(:last-of-type),wm-chart .component-wrapper .legend-wrapper .legend .legend-item:not(:last-of-type){padding-right:1.25rem}:host .component-wrapper .legend-wrapper .legend .legend-text,wm-chart .component-wrapper .legend-wrapper .legend .legend-text{font-size:0.875rem;padding-left:1rem;line-height:1}:host .component-wrapper .legend-wrapper .legend .legend-color,wm-chart .component-wrapper .legend-wrapper .legend .legend-color{position:absolute;left:0;bottom:0;margin:auto;width:0.6875rem;height:0.6875rem}:host .component-wrapper .legend-wrapper .legend.bar3,wm-chart .component-wrapper .legend-wrapper .legend.bar3{padding-bottom:1.25rem}:host(:focus){outline:none}:host(:focus) .component-wrapper.user-is-tabbing .stacked-bar-segments-wrapper,:host(:focus) .component-wrapper.user-is-tabbing .simple-bar-wrapper,:host(:focus) .component-wrapper.user-is-tabbing .doughnut-wrapper{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}:host(:focus) .component-wrapper.user-is-tabbing .stacked-bar-segments-wrapper::-moz-focus-inner,:host(:focus) .component-wrapper.user-is-tabbing .simple-bar-wrapper::-moz-focus-inner,:host(:focus) .component-wrapper.user-is-tabbing .doughnut-wrapper::-moz-focus-inner{border:0}";
|
|
10
10
|
|
|
11
|
-
const Chart = class {
|
|
12
|
-
constructor(hostRef) {
|
|
13
|
-
index.registerInstance(this, hostRef);
|
|
14
|
-
this.uid = functions.generateId();
|
|
15
|
-
this.slicesDetails = [];
|
|
16
|
-
this.handleStackedBarResize = functions.debounce(async () => {
|
|
17
|
-
let hasHiddenBarValue = false;
|
|
18
|
-
// if any value text overlaps with another, hide it and display warning
|
|
19
|
-
const valueEls = this.el.shadowRoot.querySelectorAll(".value");
|
|
20
|
-
if (valueEls.length) {
|
|
21
|
-
let lastVisibleRightEdge = valueEls.length ? valueEls[0].getBoundingClientRect().right : 0;
|
|
22
|
-
let margin = 4;
|
|
23
|
-
valueEls.forEach((valueEl, idx) => {
|
|
24
|
-
// checks are to the left of each valueEl, so skip the first one
|
|
25
|
-
if (idx > 0) {
|
|
26
|
-
const bounds = valueEl.getBoundingClientRect();
|
|
27
|
-
if (bounds.left - margin < lastVisibleRightEdge) {
|
|
28
|
-
// left edge of current value is overlapping right edge of last visible value
|
|
29
|
-
valueEl.classList.add("hidden");
|
|
30
|
-
hasHiddenBarValue = true;
|
|
31
|
-
}
|
|
32
|
-
else {
|
|
33
|
-
valueEl.classList.remove("hidden");
|
|
34
|
-
lastVisibleRightEdge = bounds.right;
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
});
|
|
38
|
-
}
|
|
39
|
-
this.hasHiddenBarValue = hasHiddenBarValue;
|
|
40
|
-
}, 100);
|
|
41
|
-
this.debouncedUpdate = functions.debounce(async () => {
|
|
42
|
-
index.forceUpdate(this.el);
|
|
43
|
-
}, 10);
|
|
44
|
-
this.debouncedSliceUpdate = functions.debounce(async () => {
|
|
45
|
-
await chartFunctions.getDetails.call(this, this.currentChartType);
|
|
46
|
-
index.forceUpdate(this.el);
|
|
47
|
-
}, 100);
|
|
48
|
-
this.chartType = "doughnut1";
|
|
49
|
-
this.label = undefined;
|
|
50
|
-
this.labelWidth = "150px";
|
|
51
|
-
this.subinfo = undefined;
|
|
52
|
-
this.completionMessage = undefined;
|
|
53
|
-
this.valueFormat = undefined;
|
|
54
|
-
this.showValues = undefined;
|
|
55
|
-
this.showGrid = true;
|
|
56
|
-
this.showLegend = true;
|
|
57
|
-
this.showBarLegend = false;
|
|
58
|
-
this.notStartedColor = false;
|
|
59
|
-
this.labelPosition = "top";
|
|
60
|
-
this.isTabbing = false;
|
|
61
|
-
this.userIsNavigating = false;
|
|
62
|
-
this.hasHiddenBarValue = false;
|
|
63
|
-
}
|
|
64
|
-
get tempValueFormat() {
|
|
65
|
-
// use of this getter should be replaced with dateFormat when showValues is fully phased out
|
|
66
|
-
return this.valueFormat || this.showValues || "none";
|
|
67
|
-
}
|
|
68
|
-
get hybridType() {
|
|
69
|
-
return window.innerWidth > 1340 ? "doughnut0" : "bar1";
|
|
70
|
-
}
|
|
71
|
-
get popoverEl() {
|
|
72
|
-
return this.el.shadowRoot.querySelector("priv-chart-popover");
|
|
73
|
-
}
|
|
74
|
-
get sliceEls() {
|
|
75
|
-
return Array.from(this.el.shadowRoot.querySelectorAll(".segment"));
|
|
76
|
-
}
|
|
77
|
-
get currentChartType() {
|
|
78
|
-
let current = this.chartType;
|
|
79
|
-
if (this.chartType === "hybrid") {
|
|
80
|
-
current = this.hybridType;
|
|
81
|
-
}
|
|
82
|
-
else if (this.chartType === "doughnut2" && this.el.children.length > 3) {
|
|
83
|
-
// render an internal type (that includes an additional color) if doughnut2 has more than 3 slices
|
|
84
|
-
current = "doughnut2b";
|
|
85
|
-
}
|
|
86
|
-
else if (this.chartType === "bar2" && this.el.children.length > 4) {
|
|
87
|
-
// render an internal type (that includes an additional color) if bar2 has more than 4 slices ("conditonally met" color)
|
|
88
|
-
current = "bar2b";
|
|
89
|
-
}
|
|
90
|
-
return current;
|
|
91
|
-
}
|
|
92
|
-
get chartDetails() {
|
|
93
|
-
return chartFunctions.allChartsDetails[this.currentChartType];
|
|
94
|
-
}
|
|
95
|
-
get ariaLabelText() {
|
|
96
|
-
let text = `${this.label}`;
|
|
97
|
-
if (this.subinfo) {
|
|
98
|
-
text += ` ${this.subinfo}`;
|
|
99
|
-
}
|
|
100
|
-
return text;
|
|
101
|
-
}
|
|
102
|
-
get isDoughnut() {
|
|
103
|
-
return this.chartDetails.category === "doughnut";
|
|
104
|
-
}
|
|
105
|
-
get isStackedBar() {
|
|
106
|
-
return this.chartDetails.category === "stackedBar";
|
|
107
|
-
}
|
|
108
|
-
get isSimpleBar() {
|
|
109
|
-
return this.chartDetails.category === "simpleBar";
|
|
110
|
-
}
|
|
111
|
-
get isBar() {
|
|
112
|
-
return this.isStackedBar || this.isSimpleBar;
|
|
113
|
-
}
|
|
114
|
-
get chartRoleDescription() {
|
|
115
|
-
return functions.intl.formatMessage({
|
|
116
|
-
id: "chart.roleDescription",
|
|
117
|
-
defaultMessage: "Interactive chart",
|
|
118
|
-
description: "For screen readers only, a description clarifying the role of the chart widget",
|
|
119
|
-
});
|
|
120
|
-
}
|
|
121
|
-
toggleTabbingOn() {
|
|
122
|
-
this.isTabbing = true;
|
|
123
|
-
}
|
|
124
|
-
toggleTabbingOff() {
|
|
125
|
-
this.isTabbing = false;
|
|
126
|
-
}
|
|
127
|
-
handleKeydown(ev) {
|
|
128
|
-
chartFunctions.handleChartKeydown.call(this, ev);
|
|
129
|
-
}
|
|
130
|
-
/* LIFECYCLE METHODS + EVENTS FROM THE CHILDREN */
|
|
131
|
-
async componentWillLoad() {
|
|
132
|
-
if (!this.label) {
|
|
133
|
-
throw new Error("For accessibility purposes, you must provide a label for the chart. See https://components.watermarkinsights.com/chart for more information.");
|
|
134
|
-
}
|
|
135
|
-
if (this.showValues) {
|
|
136
|
-
console.warn("wm-chart: show-values has been deprecated as of v3.1.0. Please use value-format instead.");
|
|
137
|
-
}
|
|
138
|
-
await chartFunctions.getDetails.call(this, this.currentChartType);
|
|
139
|
-
// rerender on resize
|
|
140
|
-
// unnecessary for doughnuts (except hybrid) as layout doesn't change
|
|
141
|
-
if (this.chartType === "hybrid" || !this.isDoughnut) {
|
|
142
|
-
const resizeObserver = new ResizeObserver(() => {
|
|
143
|
-
this.isStackedBar ? this.handleStackedBarResize() : this.debouncedUpdate();
|
|
144
|
-
});
|
|
145
|
-
resizeObserver.observe(this.el);
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
handleSliceUpdate() {
|
|
149
|
-
this.debouncedSliceUpdate();
|
|
150
|
-
}
|
|
151
|
-
/* RENDERING */
|
|
152
|
-
renderBarText(s, idx) {
|
|
153
|
-
let val;
|
|
154
|
-
if (this.tempValueFormat === "percentage") {
|
|
155
|
-
// if segment has an amount, but "0" percentage (it's below 0.5% and rounded down), still display it as <1%
|
|
156
|
-
val = s.perc === 0 && s.amount > 0 ? "<1%" : `${s.perc}%`;
|
|
157
|
-
}
|
|
158
|
-
else if (this.tempValueFormat === "amount") {
|
|
159
|
-
val = s.amount;
|
|
160
|
-
}
|
|
161
|
-
// even though we do not display the value text if it has an amount of 0, we still want to render the value-wrapper
|
|
162
|
-
// in order to not disturb the positioning of the other value texts in the entire row
|
|
163
|
-
return (index.h("div", { class: "value-wrapper", style: {
|
|
164
|
-
width: `calc(${chartFunctions.amountToPercent(s.amount, this.total, false)}%
|
|
165
|
-
${idx !== this.slicesDetails.length - 1 ? " - 2px" : ""}`,
|
|
166
|
-
} }, index.h("span", { class: "value" }, s.amount > 0 && val)));
|
|
167
|
-
}
|
|
168
|
-
drawAxis() {
|
|
169
|
-
if (this.currentChartType === "bar3") {
|
|
170
|
-
return (index.h("svg", { class: "axis" }, index.h("line", { x1: "0", x2: "100%", y1: "0", y2: "0" }), index.h("line", { x1: "0", x2: "0", y1: "0", y2: "-85px" }), index.h("line", { class: "tick", x1: "0.5", x2: "0.5", y1: "0", y2: "6" }), index.h("text", { x: "0.5", y: "-6" }, "0%"), index.h("line", { class: "tick", x1: "100%", x2: "100%", y1: "0", y2: "6" }), index.h("text", { x: "100%", y: "-6" }, "100%")));
|
|
171
|
-
}
|
|
172
|
-
}
|
|
173
|
-
renderChart() {
|
|
174
|
-
if (this.total > 0) {
|
|
175
|
-
if (this.isStackedBar) {
|
|
176
|
-
return chartFunctions.renderStackedBar.call(this, this.currentChartType);
|
|
177
|
-
}
|
|
178
|
-
else if (this.isSimpleBar) {
|
|
179
|
-
return chartFunctions.renderSimpleBar.call(this, this.currentChartType);
|
|
180
|
-
}
|
|
181
|
-
else if (this.isDoughnut) {
|
|
182
|
-
return chartFunctions.renderDoughnut.call(this, this.currentChartType);
|
|
183
|
-
}
|
|
184
|
-
}
|
|
185
|
-
}
|
|
186
|
-
render() {
|
|
187
|
-
return (index.h(index.Host, { onBlur: () => chartFunctions.exitChart.call(this) }, index.h("div", { ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.currentChartType} ${this.isTabbing && !this.userIsNavigating ? "user-is-tabbing" : ""} ${this.labelPosition === "left" && this.currentChartType === "bar4" ? "left-label" : ""}`, role: "application", "aria-label": this.ariaLabelText, tabindex: 0, "aria-roledescription": this.chartRoleDescription, "aria-describedby": "chart-instructions" }, index.h("label", { class: "label", id: `label-${this.uid}`, htmlFor: `graphic-${this.uid}` }, index.h("span", { class: "label-text" }, this.label), this.subinfo ? index.h("span", { class: "subinfo" }, this.subinfo) : ""), this.isBar && chartFunctions.renderLegend.call(this, this.currentChartType), this.renderChart(), this.isDoughnut && chartFunctions.renderLegend.call(this, this.currentChartType), index.h("priv-chart-popover", { class: this.isTabbing ? "user-is-tabbing" : "" }), this.currentChartType === "doughnut0" ? chartFunctions.renderCompletionMessage.call(this) : "", this.hasHiddenBarValue && chartFunctions.renderHiddenValuesMessage()), chartFunctions.renderInstructionsText()));
|
|
188
|
-
}
|
|
189
|
-
static get delegatesFocus() { return true; }
|
|
190
|
-
get el() { return index.getElement(this); }
|
|
191
|
-
};
|
|
11
|
+
const Chart = class {
|
|
12
|
+
constructor(hostRef) {
|
|
13
|
+
index.registerInstance(this, hostRef);
|
|
14
|
+
this.uid = functions.generateId();
|
|
15
|
+
this.slicesDetails = [];
|
|
16
|
+
this.handleStackedBarResize = functions.debounce(async () => {
|
|
17
|
+
let hasHiddenBarValue = false;
|
|
18
|
+
// if any value text overlaps with another, hide it and display warning
|
|
19
|
+
const valueEls = this.el.shadowRoot.querySelectorAll(".value");
|
|
20
|
+
if (valueEls.length) {
|
|
21
|
+
let lastVisibleRightEdge = valueEls.length ? valueEls[0].getBoundingClientRect().right : 0;
|
|
22
|
+
let margin = 4;
|
|
23
|
+
valueEls.forEach((valueEl, idx) => {
|
|
24
|
+
// checks are to the left of each valueEl, so skip the first one
|
|
25
|
+
if (idx > 0) {
|
|
26
|
+
const bounds = valueEl.getBoundingClientRect();
|
|
27
|
+
if (bounds.left - margin < lastVisibleRightEdge) {
|
|
28
|
+
// left edge of current value is overlapping right edge of last visible value
|
|
29
|
+
valueEl.classList.add("hidden");
|
|
30
|
+
hasHiddenBarValue = true;
|
|
31
|
+
}
|
|
32
|
+
else {
|
|
33
|
+
valueEl.classList.remove("hidden");
|
|
34
|
+
lastVisibleRightEdge = bounds.right;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
this.hasHiddenBarValue = hasHiddenBarValue;
|
|
40
|
+
}, 100);
|
|
41
|
+
this.debouncedUpdate = functions.debounce(async () => {
|
|
42
|
+
index.forceUpdate(this.el);
|
|
43
|
+
}, 10);
|
|
44
|
+
this.debouncedSliceUpdate = functions.debounce(async () => {
|
|
45
|
+
await chartFunctions.getDetails.call(this, this.currentChartType);
|
|
46
|
+
index.forceUpdate(this.el);
|
|
47
|
+
}, 100);
|
|
48
|
+
this.chartType = "doughnut1";
|
|
49
|
+
this.label = undefined;
|
|
50
|
+
this.labelWidth = "150px";
|
|
51
|
+
this.subinfo = undefined;
|
|
52
|
+
this.completionMessage = undefined;
|
|
53
|
+
this.valueFormat = undefined;
|
|
54
|
+
this.showValues = undefined;
|
|
55
|
+
this.showGrid = true;
|
|
56
|
+
this.showLegend = true;
|
|
57
|
+
this.showBarLegend = false;
|
|
58
|
+
this.notStartedColor = false;
|
|
59
|
+
this.labelPosition = "top";
|
|
60
|
+
this.isTabbing = false;
|
|
61
|
+
this.userIsNavigating = false;
|
|
62
|
+
this.hasHiddenBarValue = false;
|
|
63
|
+
}
|
|
64
|
+
get tempValueFormat() {
|
|
65
|
+
// use of this getter should be replaced with dateFormat when showValues is fully phased out
|
|
66
|
+
return this.valueFormat || this.showValues || "none";
|
|
67
|
+
}
|
|
68
|
+
get hybridType() {
|
|
69
|
+
return window.innerWidth > 1340 ? "doughnut0" : "bar1";
|
|
70
|
+
}
|
|
71
|
+
get popoverEl() {
|
|
72
|
+
return this.el.shadowRoot.querySelector("priv-chart-popover");
|
|
73
|
+
}
|
|
74
|
+
get sliceEls() {
|
|
75
|
+
return Array.from(this.el.shadowRoot.querySelectorAll(".segment"));
|
|
76
|
+
}
|
|
77
|
+
get currentChartType() {
|
|
78
|
+
let current = this.chartType;
|
|
79
|
+
if (this.chartType === "hybrid") {
|
|
80
|
+
current = this.hybridType;
|
|
81
|
+
}
|
|
82
|
+
else if (this.chartType === "doughnut2" && this.el.children.length > 3) {
|
|
83
|
+
// render an internal type (that includes an additional color) if doughnut2 has more than 3 slices
|
|
84
|
+
current = "doughnut2b";
|
|
85
|
+
}
|
|
86
|
+
else if (this.chartType === "bar2" && this.el.children.length > 4) {
|
|
87
|
+
// render an internal type (that includes an additional color) if bar2 has more than 4 slices ("conditonally met" color)
|
|
88
|
+
current = "bar2b";
|
|
89
|
+
}
|
|
90
|
+
return current;
|
|
91
|
+
}
|
|
92
|
+
get chartDetails() {
|
|
93
|
+
return chartFunctions.allChartsDetails[this.currentChartType];
|
|
94
|
+
}
|
|
95
|
+
get ariaLabelText() {
|
|
96
|
+
let text = `${this.label}`;
|
|
97
|
+
if (this.subinfo) {
|
|
98
|
+
text += ` ${this.subinfo}`;
|
|
99
|
+
}
|
|
100
|
+
return text;
|
|
101
|
+
}
|
|
102
|
+
get isDoughnut() {
|
|
103
|
+
return this.chartDetails.category === "doughnut";
|
|
104
|
+
}
|
|
105
|
+
get isStackedBar() {
|
|
106
|
+
return this.chartDetails.category === "stackedBar";
|
|
107
|
+
}
|
|
108
|
+
get isSimpleBar() {
|
|
109
|
+
return this.chartDetails.category === "simpleBar";
|
|
110
|
+
}
|
|
111
|
+
get isBar() {
|
|
112
|
+
return this.isStackedBar || this.isSimpleBar;
|
|
113
|
+
}
|
|
114
|
+
get chartRoleDescription() {
|
|
115
|
+
return functions.intl.formatMessage({
|
|
116
|
+
id: "chart.roleDescription",
|
|
117
|
+
defaultMessage: "Interactive chart",
|
|
118
|
+
description: "For screen readers only, a description clarifying the role of the chart widget",
|
|
119
|
+
});
|
|
120
|
+
}
|
|
121
|
+
toggleTabbingOn() {
|
|
122
|
+
this.isTabbing = true;
|
|
123
|
+
}
|
|
124
|
+
toggleTabbingOff() {
|
|
125
|
+
this.isTabbing = false;
|
|
126
|
+
}
|
|
127
|
+
handleKeydown(ev) {
|
|
128
|
+
chartFunctions.handleChartKeydown.call(this, ev);
|
|
129
|
+
}
|
|
130
|
+
/* LIFECYCLE METHODS + EVENTS FROM THE CHILDREN */
|
|
131
|
+
async componentWillLoad() {
|
|
132
|
+
if (!this.label) {
|
|
133
|
+
throw new Error("For accessibility purposes, you must provide a label for the chart. See https://components.watermarkinsights.com/chart for more information.");
|
|
134
|
+
}
|
|
135
|
+
if (this.showValues) {
|
|
136
|
+
console.warn("wm-chart: show-values has been deprecated as of v3.1.0. Please use value-format instead.");
|
|
137
|
+
}
|
|
138
|
+
await chartFunctions.getDetails.call(this, this.currentChartType);
|
|
139
|
+
// rerender on resize
|
|
140
|
+
// unnecessary for doughnuts (except hybrid) as layout doesn't change
|
|
141
|
+
if (this.chartType === "hybrid" || !this.isDoughnut) {
|
|
142
|
+
const resizeObserver = new ResizeObserver(() => {
|
|
143
|
+
this.isStackedBar ? this.handleStackedBarResize() : this.debouncedUpdate();
|
|
144
|
+
});
|
|
145
|
+
resizeObserver.observe(this.el);
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
handleSliceUpdate() {
|
|
149
|
+
this.debouncedSliceUpdate();
|
|
150
|
+
}
|
|
151
|
+
/* RENDERING */
|
|
152
|
+
renderBarText(s, idx) {
|
|
153
|
+
let val;
|
|
154
|
+
if (this.tempValueFormat === "percentage") {
|
|
155
|
+
// if segment has an amount, but "0" percentage (it's below 0.5% and rounded down), still display it as <1%
|
|
156
|
+
val = s.perc === 0 && s.amount > 0 ? "<1%" : `${s.perc}%`;
|
|
157
|
+
}
|
|
158
|
+
else if (this.tempValueFormat === "amount") {
|
|
159
|
+
val = s.amount;
|
|
160
|
+
}
|
|
161
|
+
// even though we do not display the value text if it has an amount of 0, we still want to render the value-wrapper
|
|
162
|
+
// in order to not disturb the positioning of the other value texts in the entire row
|
|
163
|
+
return (index.h("div", { class: "value-wrapper", style: {
|
|
164
|
+
width: `calc(${chartFunctions.amountToPercent(s.amount, this.total, false)}%
|
|
165
|
+
${idx !== this.slicesDetails.length - 1 ? " - 2px" : ""}`,
|
|
166
|
+
} }, index.h("span", { class: "value" }, s.amount > 0 && val)));
|
|
167
|
+
}
|
|
168
|
+
drawAxis() {
|
|
169
|
+
if (this.currentChartType === "bar3") {
|
|
170
|
+
return (index.h("svg", { class: "axis" }, index.h("line", { x1: "0", x2: "100%", y1: "0", y2: "0" }), index.h("line", { x1: "0", x2: "0", y1: "0", y2: "-85px" }), index.h("line", { class: "tick", x1: "0.5", x2: "0.5", y1: "0", y2: "6" }), index.h("text", { x: "0.5", y: "-6" }, "0%"), index.h("line", { class: "tick", x1: "100%", x2: "100%", y1: "0", y2: "6" }), index.h("text", { x: "100%", y: "-6" }, "100%")));
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
renderChart() {
|
|
174
|
+
if (this.total > 0) {
|
|
175
|
+
if (this.isStackedBar) {
|
|
176
|
+
return chartFunctions.renderStackedBar.call(this, this.currentChartType);
|
|
177
|
+
}
|
|
178
|
+
else if (this.isSimpleBar) {
|
|
179
|
+
return chartFunctions.renderSimpleBar.call(this, this.currentChartType);
|
|
180
|
+
}
|
|
181
|
+
else if (this.isDoughnut) {
|
|
182
|
+
return chartFunctions.renderDoughnut.call(this, this.currentChartType);
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
render() {
|
|
187
|
+
return (index.h(index.Host, { onBlur: () => chartFunctions.exitChart.call(this) }, index.h("div", { ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.currentChartType} ${this.isTabbing && !this.userIsNavigating ? "user-is-tabbing" : ""} ${this.labelPosition === "left" && this.currentChartType === "bar4" ? "left-label" : ""}`, role: "application", "aria-label": this.ariaLabelText, tabindex: 0, "aria-roledescription": this.chartRoleDescription, "aria-describedby": "chart-instructions" }, index.h("label", { class: "label", id: `label-${this.uid}`, htmlFor: `graphic-${this.uid}` }, index.h("span", { class: "label-text" }, this.label), this.subinfo ? index.h("span", { class: "subinfo" }, this.subinfo) : ""), this.isBar && chartFunctions.renderLegend.call(this, this.currentChartType), this.renderChart(), this.isDoughnut && chartFunctions.renderLegend.call(this, this.currentChartType), index.h("priv-chart-popover", { class: this.isTabbing ? "user-is-tabbing" : "" }), this.currentChartType === "doughnut0" ? chartFunctions.renderCompletionMessage.call(this) : "", this.hasHiddenBarValue && chartFunctions.renderHiddenValuesMessage()), chartFunctions.renderInstructionsText()));
|
|
188
|
+
}
|
|
189
|
+
static get delegatesFocus() { return true; }
|
|
190
|
+
get el() { return index.getElement(this); }
|
|
191
|
+
};
|
|
192
192
|
Chart.style = wmChartCss;
|
|
193
193
|
|
|
194
194
|
exports.wm_chart = Chart;
|