@watermarkinsights/ripple 3.27.0 → 3.27.1
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-b2e0cb4e.js → chartFunctions-42cfb4d3.js} +596 -596
- package/dist/cjs/{functions-9807717e.js → functions-85c3c557.js} +498 -498
- package/dist/cjs/{global-42a24725.js → global-9982752f.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-526c75ec.js → intl-1c36fe38.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 +189 -189
- 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 +136 -136
- 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 +186 -186
- 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 +134 -134
- 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 +948 -941
- package/dist/cjs/wm-timepicker.cjs.entry.js +385 -385
- package/dist/cjs/wm-toggletip.cjs.entry.js +120 -120
- 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 +486 -486
- 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.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 +119 -119
- 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 +362 -362
- 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 +267 -267
- 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.css +21 -17
- package/dist/collection/components/wm-tag-input/wm-tag-input.js +1302 -1295
- package/dist/collection/components/wm-timepicker/wm-timepicker.js +605 -605
- package/dist/collection/components/wm-toggletip/wm-toggletip.js +243 -243
- 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 +541 -541
- 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-dd9eb9ac.js → chartFunctions-0b53b301.js} +596 -596
- package/dist/esm/{functions-f32b1ca4.js → functions-cbb19d50.js} +498 -498
- package/dist/esm/{global-7ee0d78d.js → global-2c7bbfe6.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-d101e1a9.js → intl-ffbca53d.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 +189 -189
- 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 +136 -136
- 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 +186 -186
- 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 +134 -134
- 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 +948 -941
- package/dist/esm/wm-timepicker.entry.js +385 -385
- package/dist/esm/wm-toggletip.entry.js +120 -120
- package/dist/esm/wm-uploader.entry.js +441 -441
- package/dist/esm/wm-wrapper.entry.js +12 -12
- package/dist/esm-es5/{chartFunctions-dd9eb9ac.js → chartFunctions-0b53b301.js} +1 -1
- package/dist/esm-es5/{global-7ee0d78d.js → global-2c7bbfe6.js} +1 -1
- package/dist/esm-es5/{intl-d101e1a9.js → intl-ffbca53d.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-725c14b0.system.entry.js → p-00022d17.system.entry.js} +1 -1
- package/dist/ripple/{p-b97de06f.system.entry.js → p-0450cdbe.system.entry.js} +1 -1
- package/dist/ripple/{p-bfe1062d.entry.js → p-05a17658.entry.js} +1 -1
- package/dist/ripple/p-0b6a7b77.system.entry.js +1 -0
- package/dist/ripple/{p-b6bf2866.entry.js → p-0e789be7.entry.js} +1 -1
- package/dist/ripple/{p-b617b64f.system.entry.js → p-15779c22.system.entry.js} +1 -1
- package/dist/ripple/{p-04faca6b.entry.js → p-17487f1b.entry.js} +1 -1
- package/dist/ripple/{p-122da0d1.system.entry.js → p-197c83de.system.entry.js} +1 -1
- package/dist/ripple/{p-11d98b00.system.entry.js → p-1bad4efe.system.entry.js} +1 -1
- package/dist/ripple/{p-252ba295.system.entry.js → p-2ff923ee.system.entry.js} +1 -1
- package/dist/ripple/{p-a6afe65a.entry.js → p-31712996.entry.js} +1 -1
- package/dist/ripple/{p-f69276d5.system.entry.js → p-31c18f5e.system.entry.js} +1 -1
- package/dist/ripple/{p-df28f438.system.js → p-32944b70.system.js} +1 -1
- package/dist/ripple/{p-73d277ba.system.entry.js → p-36effc40.system.entry.js} +1 -1
- package/dist/ripple/{p-0be94e77.entry.js → p-3807bcae.entry.js} +1 -1
- package/dist/ripple/{p-88d17f6b.system.entry.js → p-3aa48fad.system.entry.js} +1 -1
- package/dist/ripple/{p-82a97531.system.entry.js → p-419f133c.system.entry.js} +1 -1
- package/dist/ripple/{p-13ec8ac0.entry.js → p-438a1e8e.entry.js} +1 -1
- package/dist/ripple/{p-19689aac.js → p-4698b365.js} +1 -1
- package/dist/ripple/{p-f8d45250.system.entry.js → p-54086f7b.system.entry.js} +1 -1
- package/dist/ripple/{p-47f53321.entry.js → p-5497694c.entry.js} +1 -1
- package/dist/ripple/{p-fb370a69.entry.js → p-58fbf116.entry.js} +1 -1
- package/dist/ripple/{p-14dfc4e7.entry.js → p-65a741c1.entry.js} +1 -1
- package/dist/ripple/{p-ac63b3aa.entry.js → p-7e74274b.entry.js} +1 -1
- package/dist/ripple/{p-81752607.system.js → p-81ad3fe5.system.js} +1 -1
- package/dist/ripple/{p-f3e42327.system.entry.js → p-89db9c27.system.entry.js} +1 -1
- package/dist/ripple/{p-4753fbfc.system.entry.js → p-947f01e2.system.entry.js} +1 -1
- package/dist/ripple/{p-3aee75e7.entry.js → p-978429f9.entry.js} +1 -1
- package/dist/ripple/{p-2c8fd902.system.entry.js → p-97d5b4bd.system.entry.js} +1 -1
- package/dist/ripple/{p-67c0ad56.system.entry.js → p-9d6a574b.system.entry.js} +1 -1
- package/dist/ripple/{p-c545fe1c.entry.js → p-a3ba2bdd.entry.js} +1 -1
- package/dist/ripple/{p-c7567fd3.entry.js → p-a42f5231.entry.js} +1 -1
- package/dist/ripple/p-a51aec3f.entry.js +1 -0
- package/dist/ripple/{p-b831988d.entry.js → p-a5b86b47.entry.js} +1 -1
- package/dist/ripple/{p-4cadf985.entry.js → p-a90b8a08.entry.js} +1 -1
- package/dist/ripple/{p-d9b66dca.system.entry.js → p-aabe172c.system.entry.js} +1 -1
- package/dist/ripple/{p-69121ad1.entry.js → p-ab2a0aee.entry.js} +1 -1
- package/dist/ripple/{p-5fb0aa58.js → p-aed93a25.js} +1 -1
- package/dist/ripple/{p-f39ee84b.entry.js → p-b2d75e7d.entry.js} +1 -1
- package/dist/ripple/{p-19b897ce.js → p-b410c675.js} +1 -1
- package/dist/ripple/{p-4809e419.system.entry.js → p-b6f558f7.system.entry.js} +1 -1
- package/dist/ripple/p-bb048fe7.entry.js +1 -0
- package/dist/ripple/{p-2805fed6.system.entry.js → p-bced37cf.system.entry.js} +1 -1
- package/dist/ripple/{p-c9a1834d.system.entry.js → p-bd0c1e7c.system.entry.js} +1 -1
- package/dist/ripple/{p-89f1991f.entry.js → p-c0e183f4.entry.js} +1 -1
- package/dist/ripple/{p-7eca18bd.system.entry.js → p-c27eda00.system.entry.js} +1 -1
- package/dist/ripple/{p-894bc6c4.system.entry.js → p-cd3e0b8b.system.entry.js} +1 -1
- package/dist/ripple/{p-f6b2e4ac.system.js → p-d1af63b5.system.js} +1 -1
- package/dist/ripple/{p-30572b71.system.js → p-d41ba263.system.js} +1 -1
- package/dist/ripple/{p-db7e6e89.entry.js → p-d8993992.entry.js} +1 -1
- package/dist/ripple/{p-f13b239c.system.entry.js → p-da525ed1.system.entry.js} +1 -1
- package/dist/ripple/{p-33af1eee.entry.js → p-e6f46289.entry.js} +1 -1
- package/dist/ripple/{p-e928f350.entry.js → p-fc967b2c.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 +44 -44
- 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 +16 -16
- 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 +30 -30
- 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 +137 -136
- package/dist/types/components/wm-timepicker/wm-timepicker.d.ts +62 -62
- package/dist/types/components/wm-toggletip/wm-toggletip.d.ts +25 -25
- 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 +40 -40
- 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/ripple/p-37de8e2f.entry.js +0 -1
- package/dist/ripple/p-b378e064.system.entry.js +0 -1
- package/dist/ripple/p-d2037549.entry.js +0 -1
- /package/dist/esm-es5/{functions-f32b1ca4.js → functions-cbb19d50.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-888bec42.js → p-43f1298b.js} +0 -0
- /package/dist/ripple/{p-cfa80f5b.js → p-91480a89.js} +0 -0
- /package/dist/ripple/{p-313b6073.system.js → p-9d02957d.system.js} +0 -0
- /package/dist/ripple/{p-9eb5a71e.system.js → p-b267e710.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-85c3c557.js');
|
|
7
|
+
const chartFunctions = require('./chartFunctions-42cfb4d3.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;
|