monobill-mintui 0.6.612 → 0.6.613
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 +76 -302
- package/bin/component-dependencies.json +131 -0
- package/bin/mint-ui.js +446 -0
- package/dist/alert.css +3 -0
- package/dist/back-button.css +3 -0
- package/dist/bottom-navigation.css +3 -0
- package/dist/button.css +3 -0
- package/dist/card.css +3 -0
- package/dist/chart.css +3 -0
- package/dist/checkbox.css +3 -0
- package/dist/chip.css +3 -0
- package/dist/choice.css +3 -0
- package/dist/clickable.css +3 -0
- package/dist/collapsible.css +3 -0
- package/dist/components/alert/Alert.d.ts +1 -32
- package/dist/components/alert/Alert.d.ts.map +10 -1
- package/dist/components/alert/browser.js +167 -0
- package/dist/components/alert/index.cjs +1 -0
- package/dist/components/alert/index.d.ts +1 -3
- package/dist/components/alert/index.d.ts.map +10 -1
- package/dist/components/alert/index.js +155 -0
- package/dist/components/back-button/BackButton.d.ts +1 -18
- package/dist/components/back-button/BackButton.d.ts.map +10 -1
- package/dist/components/back-button/browser.js +241 -0
- package/dist/components/back-button/index.cjs +1 -0
- package/dist/components/back-button/index.d.ts +1 -3
- package/dist/components/back-button/index.d.ts.map +10 -1
- package/dist/components/back-button/index.js +229 -0
- package/dist/components/bottom-navigation/BottomNavigation.d.ts +1 -10
- package/dist/components/bottom-navigation/BottomNavigation.d.ts.map +10 -1
- package/dist/components/bottom-navigation/browser.js +97 -0
- package/dist/components/bottom-navigation/index.cjs +1 -0
- package/dist/components/bottom-navigation/index.d.ts +2 -5
- package/dist/components/bottom-navigation/index.d.ts.map +10 -1
- package/dist/components/bottom-navigation/index.js +85 -0
- package/dist/components/button/Button.d.ts +1 -57
- package/dist/components/button/Button.d.ts.map +10 -1
- package/dist/components/button/browser.js +18 -0
- package/dist/components/button/index.cjs +1 -0
- package/dist/components/button/index.d.ts +1 -3
- package/dist/components/button/index.d.ts.map +10 -1
- package/dist/components/button/index.js +6 -0
- package/dist/components/card/Card.d.ts +1 -17
- package/dist/components/card/Card.d.ts.map +10 -1
- package/dist/components/card/browser.js +25 -0
- package/dist/components/card/index.cjs +1 -0
- package/dist/components/card/index.d.ts +1 -3
- package/dist/components/card/index.d.ts.map +10 -1
- package/dist/components/card/index.js +13 -0
- package/dist/components/chart/Chart.d.ts +1 -291
- package/dist/components/chart/Chart.d.ts.map +10 -1
- package/dist/components/chart/browser.js +1331 -0
- package/dist/components/chart/index.cjs +37 -0
- package/dist/components/chart/index.d.ts +1 -3
- package/dist/components/chart/index.d.ts.map +10 -1
- package/dist/components/chart/index.js +1319 -0
- package/dist/components/checkbox/Checkbox.d.ts +1 -41
- package/dist/components/checkbox/Checkbox.d.ts.map +10 -1
- package/dist/components/checkbox/browser.js +162 -0
- package/dist/components/checkbox/index.cjs +1 -0
- package/dist/components/checkbox/index.d.ts +1 -3
- package/dist/components/checkbox/index.d.ts.map +10 -1
- package/dist/components/checkbox/index.js +150 -0
- package/dist/components/chip/Chip.d.ts +1 -16
- package/dist/components/chip/Chip.d.ts.map +10 -1
- package/dist/components/chip/browser.js +17 -0
- package/dist/components/chip/index.cjs +1 -0
- package/dist/components/chip/index.d.ts +1 -3
- package/dist/components/chip/index.d.ts.map +10 -1
- package/dist/components/chip/index.js +5 -0
- package/dist/components/choice/Choice.d.ts +1 -27
- package/dist/components/choice/Choice.d.ts.map +10 -1
- package/dist/components/choice/browser.js +272 -0
- package/dist/components/choice/index.cjs +1 -0
- package/dist/components/choice/index.d.ts +1 -5
- package/dist/components/choice/index.d.ts.map +10 -1
- package/dist/components/choice/index.js +260 -0
- package/dist/components/chunks/button-B0Yt0MX1.js +380 -0
- package/dist/components/chunks/button-BlbLHMts.js +1 -0
- package/dist/components/chunks/caret-down-BN9cl4o4.js +1 -0
- package/dist/components/chunks/caret-down-Ch6IfR7r.js +9 -0
- package/dist/components/chunks/caret-right-CDUwqoen.js +1 -0
- package/dist/components/chunks/caret-right-CVOgr4nk.js +9 -0
- package/dist/components/chunks/caret-up-3XCuTXSE.js +1 -0
- package/dist/components/chunks/caret-up-D_6oa7o1.js +9 -0
- package/dist/components/chunks/chip-B04bJM4r.js +1 -0
- package/dist/components/chunks/chip-B9whjEvW.js +54 -0
- package/dist/components/chunks/close-5tYlQdkk.js +1 -0
- package/dist/components/chunks/close-Dg6U0IjZ.js +10 -0
- package/dist/components/chunks/icon-C0OLmjDY.js +1 -0
- package/dist/components/chunks/icon-CyzR9aVl.js +1 -0
- package/dist/components/chunks/icon-dG8sLTBn.js +27 -0
- package/dist/components/chunks/icon-gQAtsERy.js +1324 -0
- package/dist/components/chunks/input-8bbXzpa5.js +334 -0
- package/dist/components/chunks/input-BoiREc6Y.js +1 -0
- package/dist/components/chunks/link-BxhPnVaz.js +1 -0
- package/dist/components/chunks/link-DKgtBYK6.js +38 -0
- package/dist/components/chunks/modal-B8gNdwEl.js +153 -0
- package/dist/components/chunks/modal-WYWvk2lZ.js +1 -0
- package/dist/components/chunks/popover-BeaGf_JC.js +1 -0
- package/dist/components/chunks/popover-gviDCspV.js +188 -0
- package/dist/components/chunks/register-element-BFYmIynH.js +53 -0
- package/dist/components/chunks/register-element-tCL_F1YI.js +1 -0
- package/dist/components/chunks/search-ANUKQi0r.js +9 -0
- package/dist/components/chunks/search-B3egXuw4.js +1 -0
- package/dist/components/chunks/spinner-BsaFHuS6.js +108 -0
- package/dist/components/chunks/spinner-DbTohC6i.js +63 -0
- package/dist/components/chunks/stack-D1uh4L79.js +1 -0
- package/dist/components/chunks/stack-DyQfjPDh.js +53 -0
- package/dist/components/chunks/table-BgboosRK.js +65 -0
- package/dist/components/chunks/table-DDUNUwGd.js +1 -0
- package/dist/components/chunks/text-BHkEs8U5.js +67 -0
- package/dist/components/chunks/text-BmHZbBMo.js +1 -0
- package/dist/components/clickable/Clickable.d.ts +1 -14
- package/dist/components/clickable/Clickable.d.ts.map +10 -1
- package/dist/components/clickable/browser.js +78 -0
- package/dist/components/clickable/index.cjs +1 -0
- package/dist/components/clickable/index.d.ts +1 -3
- package/dist/components/clickable/index.d.ts.map +10 -1
- package/dist/components/clickable/index.js +66 -0
- package/dist/components/collapsible/Collapsible.d.ts +1 -28
- package/dist/components/collapsible/Collapsible.d.ts.map +10 -1
- package/dist/components/collapsible/browser.js +170 -0
- package/dist/components/collapsible/index.cjs +1 -0
- package/dist/components/collapsible/index.d.ts +1 -3
- package/dist/components/collapsible/index.d.ts.map +10 -1
- package/dist/components/collapsible/index.js +158 -0
- package/dist/components/confirm-action/ConfirmAction.d.ts +1 -27
- package/dist/components/confirm-action/ConfirmAction.d.ts.map +10 -1
- package/dist/components/confirm-action/browser.js +130 -0
- package/dist/components/confirm-action/index.cjs +1 -0
- package/dist/components/confirm-action/index.d.ts +2 -3
- package/dist/components/confirm-action/index.d.ts.map +10 -1
- package/dist/components/confirm-action/index.js +118 -0
- package/dist/components/date-picker/DatePicker.d.ts +1 -130
- package/dist/components/date-picker/DatePicker.d.ts.map +10 -1
- package/dist/components/date-picker/browser.js +1288 -0
- package/dist/components/date-picker/index.cjs +1 -0
- package/dist/components/date-picker/index.d.ts +1 -3
- package/dist/components/date-picker/index.d.ts.map +10 -1
- package/dist/components/date-picker/index.js +1276 -0
- package/dist/components/dropzone/Dropzone.d.ts +1 -59
- package/dist/components/dropzone/Dropzone.d.ts.map +10 -1
- package/dist/components/dropzone/browser.js +355 -0
- package/dist/components/dropzone/index.cjs +1 -0
- package/dist/components/dropzone/index.d.ts +1 -3
- package/dist/components/dropzone/index.d.ts.map +10 -1
- package/dist/components/dropzone/index.js +343 -0
- package/dist/components/form/Form.d.ts +1 -133
- package/dist/components/form/Form.d.ts.map +10 -1
- package/dist/components/form/browser.js +1002 -0
- package/dist/components/form/index.cjs +1 -0
- package/dist/components/form/index.d.ts +1 -3
- package/dist/components/form/index.d.ts.map +10 -1
- package/dist/components/form/index.js +990 -0
- package/dist/components/grid/Grid.d.ts +1 -16
- package/dist/components/grid/Grid.d.ts.map +10 -1
- package/dist/components/grid/browser.js +24 -0
- package/dist/components/grid/index.cjs +1 -0
- package/dist/components/grid/index.d.ts +1 -3
- package/dist/components/grid/index.d.ts.map +10 -1
- package/dist/components/grid/index.js +12 -0
- package/dist/components/icon/Icon.d.ts +1 -16
- package/dist/components/icon/Icon.d.ts.map +10 -1
- package/dist/components/icon/browser.js +16 -0
- package/dist/components/icon/index.cjs +1 -0
- package/dist/components/icon/index.d.ts +2 -3
- package/dist/components/icon/index.d.ts.map +10 -1
- package/dist/components/icon/index.js +4 -0
- package/dist/components/input/Input.d.ts +1 -68
- package/dist/components/input/Input.d.ts.map +10 -1
- package/dist/components/input/browser.js +17 -0
- package/dist/components/input/index.cjs +1 -0
- package/dist/components/input/index.d.ts +1 -3
- package/dist/components/input/index.d.ts.map +10 -1
- package/dist/components/input/index.js +5 -0
- package/dist/components/link/Link.d.ts +1 -16
- package/dist/components/link/Link.d.ts.map +10 -1
- package/dist/components/link/browser.js +16 -0
- package/dist/components/link/index.cjs +1 -0
- package/dist/components/link/index.d.ts +1 -3
- package/dist/components/link/index.d.ts.map +10 -1
- package/dist/components/link/index.js +4 -0
- package/dist/components/modal/Modal.d.ts +1 -38
- package/dist/components/modal/Modal.d.ts.map +10 -1
- package/dist/components/modal/browser.js +21 -0
- package/dist/components/modal/index.cjs +1 -0
- package/dist/components/modal/index.d.ts +1 -3
- package/dist/components/modal/index.d.ts.map +10 -1
- package/dist/components/modal/index.js +9 -0
- package/dist/components/navigation/Navigation.d.ts +1 -0
- package/dist/components/navigation/Navigation.d.ts.map +10 -0
- package/dist/components/navigation/browser.js +198 -0
- package/dist/components/navigation/index.cjs +1 -0
- package/dist/components/navigation/index.d.ts +1 -0
- package/dist/components/navigation/index.d.ts.map +10 -0
- package/dist/components/navigation/index.js +186 -0
- package/dist/components/off-canvas/OffCanvas.d.ts +1 -46
- package/dist/components/off-canvas/OffCanvas.d.ts.map +10 -1
- package/dist/components/off-canvas/browser.js +192 -0
- package/dist/components/off-canvas/index.cjs +1 -0
- package/dist/components/off-canvas/index.d.ts +1 -3
- package/dist/components/off-canvas/index.d.ts.map +10 -1
- package/dist/components/off-canvas/index.js +180 -0
- package/dist/components/page/Page.d.ts +1 -37
- package/dist/components/page/Page.d.ts.map +10 -1
- package/dist/components/page/browser.js +74 -0
- package/dist/components/page/index.cjs +16 -0
- package/dist/components/page/index.d.ts +1 -3
- package/dist/components/page/index.d.ts.map +10 -1
- package/dist/components/page/index.js +62 -0
- package/dist/components/popover/Popover.d.ts +1 -64
- package/dist/components/popover/Popover.d.ts.map +10 -1
- package/dist/components/popover/browser.js +17 -0
- package/dist/components/popover/index.cjs +1 -0
- package/dist/components/popover/index.d.ts +1 -3
- package/dist/components/popover/index.d.ts.map +10 -1
- package/dist/components/popover/index.js +5 -0
- package/dist/components/resource-table/ResourceTable.d.ts +1 -327
- package/dist/components/resource-table/ResourceTable.d.ts.map +10 -1
- package/dist/components/resource-table/browser.js +1457 -0
- package/dist/components/resource-table/index.cjs +2 -0
- package/dist/components/resource-table/index.d.ts +1 -4
- package/dist/components/resource-table/index.d.ts.map +10 -1
- package/dist/components/resource-table/index.js +1445 -0
- package/dist/components/search/Search.d.ts +1 -151
- package/dist/components/search/Search.d.ts.map +10 -1
- package/dist/components/search/browser.js +681 -0
- package/dist/components/search/index.cjs +1 -0
- package/dist/components/search/index.d.ts +1 -3
- package/dist/components/search/index.d.ts.map +10 -1
- package/dist/components/search/index.js +669 -0
- package/dist/components/select/Select.d.ts +1 -37
- package/dist/components/select/Select.d.ts.map +10 -1
- package/dist/components/select/browser.js +285 -0
- package/dist/components/select/index.cjs +1 -0
- package/dist/components/select/index.d.ts +1 -3
- package/dist/components/select/index.d.ts.map +10 -1
- package/dist/components/select/index.js +273 -0
- package/dist/components/side-navigation/SideNavigation.d.ts +1 -52
- package/dist/components/side-navigation/SideNavigation.d.ts.map +10 -1
- package/dist/components/side-navigation/browser.js +466 -0
- package/dist/components/side-navigation/index.cjs +1 -0
- package/dist/components/side-navigation/index.d.ts +5 -8
- package/dist/components/side-navigation/index.d.ts.map +10 -1
- package/dist/components/side-navigation/index.js +454 -0
- package/dist/components/sortable/Sortable.d.ts +1 -62
- package/dist/components/sortable/Sortable.d.ts.map +10 -1
- package/dist/components/sortable/browser.js +340 -0
- package/dist/components/sortable/index.cjs +1 -0
- package/dist/components/sortable/index.d.ts +1 -3
- package/dist/components/sortable/index.d.ts.map +10 -1
- package/dist/components/sortable/index.js +328 -0
- package/dist/components/spinner/Spinner.d.ts +1 -13
- package/dist/components/spinner/Spinner.d.ts.map +10 -1
- package/dist/components/spinner/browser.js +16 -0
- package/dist/components/spinner/index.cjs +1 -0
- package/dist/components/spinner/index.d.ts +1 -3
- package/dist/components/spinner/index.d.ts.map +10 -1
- package/dist/components/spinner/index.js +4 -0
- package/dist/components/stack/Stack.d.ts +1 -23
- package/dist/components/stack/Stack.d.ts.map +10 -1
- package/dist/components/stack/browser.js +16 -0
- package/dist/components/stack/index.cjs +1 -0
- package/dist/components/stack/index.d.ts +1 -3
- package/dist/components/stack/index.d.ts.map +10 -1
- package/dist/components/stack/index.js +4 -0
- package/dist/components/switch/Switch.d.ts +1 -33
- package/dist/components/switch/Switch.d.ts.map +10 -1
- package/dist/components/switch/browser.js +203 -0
- package/dist/components/switch/index.cjs +1 -0
- package/dist/components/switch/index.d.ts +1 -3
- package/dist/components/switch/index.d.ts.map +10 -1
- package/dist/components/switch/index.js +191 -0
- package/dist/components/table/Table.d.ts +1 -11
- package/dist/components/table/Table.d.ts.map +10 -1
- package/dist/components/table/browser.js +16 -0
- package/dist/components/table/index.cjs +1 -0
- package/dist/components/table/index.d.ts +1 -3
- package/dist/components/table/index.d.ts.map +10 -1
- package/dist/components/table/index.js +4 -0
- package/dist/components/tabs/Tabs.d.ts +1 -20
- package/dist/components/tabs/Tabs.d.ts.map +10 -1
- package/dist/components/tabs/browser.js +251 -0
- package/dist/components/tabs/index.cjs +1 -0
- package/dist/components/tabs/index.d.ts +4 -9
- package/dist/components/tabs/index.d.ts.map +10 -1
- package/dist/components/tabs/index.js +239 -0
- package/dist/components/tags/Tags.d.ts +1 -82
- package/dist/components/tags/Tags.d.ts.map +10 -1
- package/dist/components/tags/browser.js +416 -0
- package/dist/components/tags/index.cjs +1 -0
- package/dist/components/tags/index.d.ts +1 -3
- package/dist/components/tags/index.d.ts.map +10 -1
- package/dist/components/tags/index.js +404 -0
- package/dist/components/text/Text.d.ts +1 -25
- package/dist/components/text/Text.d.ts.map +10 -1
- package/dist/components/text/browser.js +16 -0
- package/dist/components/text/index.cjs +1 -0
- package/dist/components/text/index.d.ts +1 -3
- package/dist/components/text/index.d.ts.map +10 -1
- package/dist/components/text/index.js +4 -0
- package/dist/components/time-picker/TimePicker.d.ts +1 -61
- package/dist/components/time-picker/TimePicker.d.ts.map +10 -1
- package/dist/components/time-picker/browser.js +366 -0
- package/dist/components/time-picker/index.cjs +1 -0
- package/dist/components/time-picker/index.d.ts +1 -3
- package/dist/components/time-picker/index.d.ts.map +10 -1
- package/dist/components/time-picker/index.js +354 -0
- package/dist/components/toast/Toast.d.ts +1 -21
- package/dist/components/toast/Toast.d.ts.map +10 -1
- package/dist/components/toast/browser.js +147 -0
- package/dist/components/toast/index.cjs +3 -0
- package/dist/components/toast/index.d.ts +3 -3
- package/dist/components/toast/index.d.ts.map +10 -1
- package/dist/components/toast/index.js +135 -0
- package/dist/confirm-action.css +3 -0
- package/dist/date-picker.css +3 -0
- package/dist/dropzone.css +3 -0
- package/dist/form.css +3 -0
- package/dist/grid.css +3 -0
- package/dist/icon.css +3 -0
- package/dist/icons/ai.svg +5 -6
- package/dist/icons/bank.svg +1 -1
- package/dist/icons/barcode.svg +1 -1
- package/dist/icons/basket.svg +1 -1
- package/dist/icons/building.svg +1 -1
- package/dist/icons/buildings.svg +1 -1
- package/dist/icons/calendar.svg +1 -1
- package/dist/icons/cash.svg +3 -0
- package/dist/icons/check.svg +1 -1
- package/dist/icons/close.svg +1 -1
- package/dist/icons/coupon.svg +3 -0
- package/dist/icons/delivery-location.svg +3 -0
- package/dist/icons/desktop.svg +3 -0
- package/dist/icons/dollar-sign.svg +1 -1
- package/dist/icons/edit.svg +1 -1
- package/dist/icons/gift.svg +3 -0
- package/dist/icons/grip-lines.svg +2 -2
- package/dist/icons/heart.svg +3 -0
- package/dist/icons/installments.svg +3 -0
- package/dist/icons/inventory.svg +3 -0
- package/dist/icons/invoice.svg +3 -0
- package/dist/icons/loyalty-points.svg +3 -0
- package/dist/icons/membership.svg +3 -0
- package/dist/icons/mobile.svg +3 -0
- package/dist/icons/order-tracking.svg +7 -0
- package/dist/icons/out-of-stock.svg +3 -0
- package/dist/icons/package.svg +3 -0
- package/dist/icons/percent-discount.svg +3 -0
- package/dist/icons/pickup.svg +3 -0
- package/dist/icons/plus.svg +1 -1
- package/dist/icons/price-label.svg +3 -0
- package/dist/icons/product-review.svg +3 -0
- package/dist/icons/receipt.svg +3 -0
- package/dist/icons/refund.svg +3 -0
- package/dist/icons/remove.svg +1 -1
- package/dist/icons/return.svg +3 -0
- package/dist/icons/sale-burst.svg +3 -0
- package/dist/icons/secure-checkout.svg +3 -0
- package/dist/icons/shopping-bag.svg +3 -0
- package/dist/icons/shopping-cart.svg +3 -0
- package/dist/icons/storefront.svg +3 -0
- package/dist/icons/support.svg +3 -0
- package/dist/icons/tablet.svg +3 -0
- package/dist/icons/wallet.svg +3 -0
- package/dist/icons/warehouse.svg +3 -0
- package/dist/index.cjs +83 -79
- package/dist/index.css +253 -0
- package/dist/index.d.ts +94 -91
- package/dist/index.d.ts.map +10 -1
- package/dist/index.js +10695 -10239
- package/dist/input.css +3 -0
- package/dist/link.css +3 -0
- package/dist/mintui-elements.d.ts +156 -0
- package/dist/mintui-elements.d.ts.map +10 -0
- package/dist/modal.css +3 -0
- package/dist/navigation.css +3 -0
- package/dist/off-canvas.css +3 -0
- package/dist/page.css +3 -0
- package/dist/popover.css +3 -0
- package/dist/resource-table.css +3 -0
- package/dist/search.css +3 -0
- package/dist/select.css +3 -0
- package/dist/side-navigation.css +3 -0
- package/dist/sortable.css +3 -0
- package/dist/spinner.css +3 -0
- package/dist/stack.css +3 -0
- package/dist/switch.css +3 -0
- package/dist/table.css +3 -0
- package/dist/tabs.css +3 -0
- package/dist/tags.css +3 -0
- package/dist/text.css +3 -0
- package/dist/theme.css +101 -0
- package/dist/time-picker.css +3 -0
- package/dist/toast.css +3 -0
- package/package.json +379 -30
- package/dist/components/bottom-navigation/BottomNavItem.d.ts +0 -14
- package/dist/components/bottom-navigation/BottomNavItem.d.ts.map +0 -1
- package/dist/components/choice/ChoiceOption.d.ts +0 -30
- package/dist/components/choice/ChoiceOption.d.ts.map +0 -1
- package/dist/components/confirm-action/ConfirmActionApi.d.ts +0 -17
- package/dist/components/confirm-action/ConfirmActionApi.d.ts.map +0 -1
- package/dist/components/icon/build-icons.d.ts +0 -2
- package/dist/components/icon/build-icons.d.ts.map +0 -1
- package/dist/components/icon/icons/ai.d.ts +0 -3
- package/dist/components/icon/icons/ai.d.ts.map +0 -1
- package/dist/components/icon/icons/archive.d.ts +0 -3
- package/dist/components/icon/icons/archive.d.ts.map +0 -1
- package/dist/components/icon/icons/arrow-down.d.ts +0 -3
- package/dist/components/icon/icons/arrow-down.d.ts.map +0 -1
- package/dist/components/icon/icons/arrow-left.d.ts +0 -3
- package/dist/components/icon/icons/arrow-left.d.ts.map +0 -1
- package/dist/components/icon/icons/arrow-right.d.ts +0 -3
- package/dist/components/icon/icons/arrow-right.d.ts.map +0 -1
- package/dist/components/icon/icons/arrow-up.d.ts +0 -3
- package/dist/components/icon/icons/arrow-up.d.ts.map +0 -1
- package/dist/components/icon/icons/attach.d.ts +0 -3
- package/dist/components/icon/icons/attach.d.ts.map +0 -1
- package/dist/components/icon/icons/bank.d.ts +0 -3
- package/dist/components/icon/icons/bank.d.ts.map +0 -1
- package/dist/components/icon/icons/barcode.d.ts +0 -3
- package/dist/components/icon/icons/barcode.d.ts.map +0 -1
- package/dist/components/icon/icons/basket.d.ts +0 -3
- package/dist/components/icon/icons/basket.d.ts.map +0 -1
- package/dist/components/icon/icons/bookmark.d.ts +0 -3
- package/dist/components/icon/icons/bookmark.d.ts.map +0 -1
- package/dist/components/icon/icons/building.d.ts +0 -3
- package/dist/components/icon/icons/building.d.ts.map +0 -1
- package/dist/components/icon/icons/buildings.d.ts +0 -3
- package/dist/components/icon/icons/buildings.d.ts.map +0 -1
- package/dist/components/icon/icons/bullhorn.d.ts +0 -3
- package/dist/components/icon/icons/bullhorn.d.ts.map +0 -1
- package/dist/components/icon/icons/calendar-day.d.ts +0 -3
- package/dist/components/icon/icons/calendar-day.d.ts.map +0 -1
- package/dist/components/icon/icons/calendar-empty.d.ts +0 -3
- package/dist/components/icon/icons/calendar-empty.d.ts.map +0 -1
- package/dist/components/icon/icons/calendar-week.d.ts +0 -3
- package/dist/components/icon/icons/calendar-week.d.ts.map +0 -1
- package/dist/components/icon/icons/calendar.d.ts +0 -3
- package/dist/components/icon/icons/calendar.d.ts.map +0 -1
- package/dist/components/icon/icons/caret-down.d.ts +0 -3
- package/dist/components/icon/icons/caret-down.d.ts.map +0 -1
- package/dist/components/icon/icons/caret-left.d.ts +0 -3
- package/dist/components/icon/icons/caret-left.d.ts.map +0 -1
- package/dist/components/icon/icons/caret-right.d.ts +0 -3
- package/dist/components/icon/icons/caret-right.d.ts.map +0 -1
- package/dist/components/icon/icons/caret-up.d.ts +0 -3
- package/dist/components/icon/icons/caret-up.d.ts.map +0 -1
- package/dist/components/icon/icons/chart-bar.d.ts +0 -3
- package/dist/components/icon/icons/chart-bar.d.ts.map +0 -1
- package/dist/components/icon/icons/chart-line.d.ts +0 -3
- package/dist/components/icon/icons/chart-line.d.ts.map +0 -1
- package/dist/components/icon/icons/chat.d.ts +0 -3
- package/dist/components/icon/icons/chat.d.ts.map +0 -1
- package/dist/components/icon/icons/check.d.ts +0 -3
- package/dist/components/icon/icons/check.d.ts.map +0 -1
- package/dist/components/icon/icons/clock.d.ts +0 -3
- package/dist/components/icon/icons/clock.d.ts.map +0 -1
- package/dist/components/icon/icons/close.d.ts +0 -3
- package/dist/components/icon/icons/close.d.ts.map +0 -1
- package/dist/components/icon/icons/copy.d.ts +0 -3
- package/dist/components/icon/icons/copy.d.ts.map +0 -1
- package/dist/components/icon/icons/credit-card.d.ts +0 -3
- package/dist/components/icon/icons/credit-card.d.ts.map +0 -1
- package/dist/components/icon/icons/delete.d.ts +0 -3
- package/dist/components/icon/icons/delete.d.ts.map +0 -1
- package/dist/components/icon/icons/desktop-screen.d.ts +0 -3
- package/dist/components/icon/icons/desktop-screen.d.ts.map +0 -1
- package/dist/components/icon/icons/documentation.d.ts +0 -3
- package/dist/components/icon/icons/documentation.d.ts.map +0 -1
- package/dist/components/icon/icons/dollar-sign.d.ts +0 -3
- package/dist/components/icon/icons/dollar-sign.d.ts.map +0 -1
- package/dist/components/icon/icons/download.d.ts +0 -3
- package/dist/components/icon/icons/download.d.ts.map +0 -1
- package/dist/components/icon/icons/duplicate.d.ts +0 -3
- package/dist/components/icon/icons/duplicate.d.ts.map +0 -1
- package/dist/components/icon/icons/edit.d.ts +0 -3
- package/dist/components/icon/icons/edit.d.ts.map +0 -1
- package/dist/components/icon/icons/ellipsis.d.ts +0 -3
- package/dist/components/icon/icons/ellipsis.d.ts.map +0 -1
- package/dist/components/icon/icons/error.d.ts +0 -3
- package/dist/components/icon/icons/error.d.ts.map +0 -1
- package/dist/components/icon/icons/external-link.d.ts +0 -3
- package/dist/components/icon/icons/external-link.d.ts.map +0 -1
- package/dist/components/icon/icons/eye.d.ts +0 -3
- package/dist/components/icon/icons/eye.d.ts.map +0 -1
- package/dist/components/icon/icons/file.d.ts +0 -3
- package/dist/components/icon/icons/file.d.ts.map +0 -1
- package/dist/components/icon/icons/filter.d.ts +0 -3
- package/dist/components/icon/icons/filter.d.ts.map +0 -1
- package/dist/components/icon/icons/folder.d.ts +0 -3
- package/dist/components/icon/icons/folder.d.ts.map +0 -1
- package/dist/components/icon/icons/gavel.d.ts +0 -3
- package/dist/components/icon/icons/gavel.d.ts.map +0 -1
- package/dist/components/icon/icons/globe.d.ts +0 -3
- package/dist/components/icon/icons/globe.d.ts.map +0 -1
- package/dist/components/icon/icons/grid.d.ts +0 -3
- package/dist/components/icon/icons/grid.d.ts.map +0 -1
- package/dist/components/icon/icons/grip-lines.d.ts +0 -3
- package/dist/components/icon/icons/grip-lines.d.ts.map +0 -1
- package/dist/components/icon/icons/help.d.ts +0 -3
- package/dist/components/icon/icons/help.d.ts.map +0 -1
- package/dist/components/icon/icons/home.d.ts +0 -3
- package/dist/components/icon/icons/home.d.ts.map +0 -1
- package/dist/components/icon/icons/image.d.ts +0 -3
- package/dist/components/icon/icons/image.d.ts.map +0 -1
- package/dist/components/icon/icons/index.cjs +0 -34
- package/dist/components/icon/icons/index.d.ts +0 -92
- package/dist/components/icon/icons/index.d.ts.map +0 -1
- package/dist/components/icon/icons/index.js +0 -752
- package/dist/components/icon/icons/info.d.ts +0 -3
- package/dist/components/icon/icons/info.d.ts.map +0 -1
- package/dist/components/icon/icons/language.d.ts +0 -3
- package/dist/components/icon/icons/language.d.ts.map +0 -1
- package/dist/components/icon/icons/line-chart.d.ts +0 -3
- package/dist/components/icon/icons/line-chart.d.ts.map +0 -1
- package/dist/components/icon/icons/link.d.ts +0 -3
- package/dist/components/icon/icons/link.d.ts.map +0 -1
- package/dist/components/icon/icons/list.d.ts +0 -3
- package/dist/components/icon/icons/list.d.ts.map +0 -1
- package/dist/components/icon/icons/location.d.ts +0 -3
- package/dist/components/icon/icons/location.d.ts.map +0 -1
- package/dist/components/icon/icons/lock.d.ts +0 -3
- package/dist/components/icon/icons/lock.d.ts.map +0 -1
- package/dist/components/icon/icons/login.d.ts +0 -3
- package/dist/components/icon/icons/login.d.ts.map +0 -1
- package/dist/components/icon/icons/logout.d.ts +0 -3
- package/dist/components/icon/icons/logout.d.ts.map +0 -1
- package/dist/components/icon/icons/mail.d.ts +0 -3
- package/dist/components/icon/icons/mail.d.ts.map +0 -1
- package/dist/components/icon/icons/map.d.ts +0 -3
- package/dist/components/icon/icons/map.d.ts.map +0 -1
- package/dist/components/icon/icons/menu.d.ts +0 -3
- package/dist/components/icon/icons/menu.d.ts.map +0 -1
- package/dist/components/icon/icons/moon.d.ts +0 -3
- package/dist/components/icon/icons/moon.d.ts.map +0 -1
- package/dist/components/icon/icons/notifications.d.ts +0 -3
- package/dist/components/icon/icons/notifications.d.ts.map +0 -1
- package/dist/components/icon/icons/paste.d.ts +0 -3
- package/dist/components/icon/icons/paste.d.ts.map +0 -1
- package/dist/components/icon/icons/pin.d.ts +0 -3
- package/dist/components/icon/icons/pin.d.ts.map +0 -1
- package/dist/components/icon/icons/plus.d.ts +0 -3
- package/dist/components/icon/icons/plus.d.ts.map +0 -1
- package/dist/components/icon/icons/print.d.ts +0 -3
- package/dist/components/icon/icons/print.d.ts.map +0 -1
- package/dist/components/icon/icons/refresh.d.ts +0 -3
- package/dist/components/icon/icons/refresh.d.ts.map +0 -1
- package/dist/components/icon/icons/remove.d.ts +0 -3
- package/dist/components/icon/icons/remove.d.ts.map +0 -1
- package/dist/components/icon/icons/save.d.ts +0 -3
- package/dist/components/icon/icons/save.d.ts.map +0 -1
- package/dist/components/icon/icons/search.d.ts +0 -3
- package/dist/components/icon/icons/search.d.ts.map +0 -1
- package/dist/components/icon/icons/settings.d.ts +0 -3
- package/dist/components/icon/icons/settings.d.ts.map +0 -1
- package/dist/components/icon/icons/share.d.ts +0 -3
- package/dist/components/icon/icons/share.d.ts.map +0 -1
- package/dist/components/icon/icons/sort-arrows.d.ts +0 -3
- package/dist/components/icon/icons/sort-arrows.d.ts.map +0 -1
- package/dist/components/icon/icons/sort.d.ts +0 -3
- package/dist/components/icon/icons/sort.d.ts.map +0 -1
- package/dist/components/icon/icons/star.d.ts +0 -3
- package/dist/components/icon/icons/star.d.ts.map +0 -1
- package/dist/components/icon/icons/success.d.ts +0 -3
- package/dist/components/icon/icons/success.d.ts.map +0 -1
- package/dist/components/icon/icons/sun.d.ts +0 -3
- package/dist/components/icon/icons/sun.d.ts.map +0 -1
- package/dist/components/icon/icons/table.d.ts +0 -3
- package/dist/components/icon/icons/table.d.ts.map +0 -1
- package/dist/components/icon/icons/tag.d.ts +0 -3
- package/dist/components/icon/icons/tag.d.ts.map +0 -1
- package/dist/components/icon/icons/trash.d.ts +0 -3
- package/dist/components/icon/icons/trash.d.ts.map +0 -1
- package/dist/components/icon/icons/truck.d.ts +0 -3
- package/dist/components/icon/icons/truck.d.ts.map +0 -1
- package/dist/components/icon/icons/unlock.d.ts +0 -3
- package/dist/components/icon/icons/unlock.d.ts.map +0 -1
- package/dist/components/icon/icons/upload.d.ts +0 -3
- package/dist/components/icon/icons/upload.d.ts.map +0 -1
- package/dist/components/icon/icons/user-add.d.ts +0 -3
- package/dist/components/icon/icons/user-add.d.ts.map +0 -1
- package/dist/components/icon/icons/user.d.ts +0 -3
- package/dist/components/icon/icons/user.d.ts.map +0 -1
- package/dist/components/icon/icons/users.d.ts +0 -3
- package/dist/components/icon/icons/users.d.ts.map +0 -1
- package/dist/components/icon/icons/video.d.ts +0 -3
- package/dist/components/icon/icons/video.d.ts.map +0 -1
- package/dist/components/icon/icons/warning.d.ts +0 -3
- package/dist/components/icon/icons/warning.d.ts.map +0 -1
- package/dist/components/icon/registry.d.ts +0 -15
- package/dist/components/icon/registry.d.ts.map +0 -1
- package/dist/components/resource-table/ResourceTableContextMenu.d.ts +0 -40
- package/dist/components/resource-table/ResourceTableContextMenu.d.ts.map +0 -1
- package/dist/components/side-navigation/SideNavigationActionHeader.d.ts +0 -2
- package/dist/components/side-navigation/SideNavigationActionHeader.d.ts.map +0 -1
- package/dist/components/side-navigation/SideNavigationActionLinks.d.ts +0 -9
- package/dist/components/side-navigation/SideNavigationActionLinks.d.ts.map +0 -1
- package/dist/components/side-navigation/SideNavigationActionMenu.d.ts +0 -26
- package/dist/components/side-navigation/SideNavigationActionMenu.d.ts.map +0 -1
- package/dist/components/side-navigation/SideNavigationLink.d.ts +0 -38
- package/dist/components/side-navigation/SideNavigationLink.d.ts.map +0 -1
- package/dist/components/side-navigation/SideNavigationLinks.d.ts +0 -38
- package/dist/components/side-navigation/SideNavigationLinks.d.ts.map +0 -1
- package/dist/components/tabs/Tab.d.ts +0 -19
- package/dist/components/tabs/Tab.d.ts.map +0 -1
- package/dist/components/tabs/TabContent.d.ts +0 -13
- package/dist/components/tabs/TabContent.d.ts.map +0 -1
- package/dist/components/tabs/TabList.d.ts +0 -12
- package/dist/components/tabs/TabList.d.ts.map +0 -1
- package/dist/components/toast/ToastApi.d.ts +0 -21
- package/dist/components/toast/ToastApi.d.ts.map +0 -1
- package/dist/components/top-navigation/TopNavigation.d.ts +0 -65
- package/dist/components/top-navigation/TopNavigation.d.ts.map +0 -1
- package/dist/components/top-navigation/index.d.ts +0 -4
- package/dist/components/top-navigation/index.d.ts.map +0 -1
- package/dist/icons/truck.svg +0 -13
- package/dist/search-CM-OgatF.js +0 -179
- package/dist/search-C_vLUsm7.cjs +0 -1
- package/dist/styles.css +0 -3
- package/tailwind.preset.cjs +0 -75
- package/tailwind.preset.js +0 -97
|
@@ -0,0 +1,1319 @@
|
|
|
1
|
+
import '../../theme.css'
|
|
2
|
+
import '../../chart.css'
|
|
3
|
+
import { t as e } from "../chunks/register-element-BFYmIynH.js";
|
|
4
|
+
//#region src/components/chart/Chart.ts
|
|
5
|
+
var t = class e extends HTMLElement {
|
|
6
|
+
static get observedAttributes() {
|
|
7
|
+
return [
|
|
8
|
+
"type",
|
|
9
|
+
"data",
|
|
10
|
+
"width",
|
|
11
|
+
"height",
|
|
12
|
+
"show-legend",
|
|
13
|
+
"show-grid",
|
|
14
|
+
"show-tooltip",
|
|
15
|
+
"curve-tension"
|
|
16
|
+
];
|
|
17
|
+
}
|
|
18
|
+
static {
|
|
19
|
+
this.MAX_CACHE_SIZE = 100;
|
|
20
|
+
}
|
|
21
|
+
constructor() {
|
|
22
|
+
super(), this._chartContainer = null, this._svg = null, this._tooltip = null, this._chartType = "line", this._chartData = null, this._width = 800, this._height = 400, this._padding = {
|
|
23
|
+
top: 20,
|
|
24
|
+
right: 20,
|
|
25
|
+
bottom: 60,
|
|
26
|
+
left: 60
|
|
27
|
+
}, this._showLegend = !0, this._showGrid = !0, this._showTooltip = !0, this._curveTension = .5, this._dataObserver = null, this._darkModeObserver = null, this._tooltipHideTimeout = null, this._lastTooltipContent = "", this._activeXValue = null, this._pinnedXValue = null, this._tooltipAnimationFrame = null, this._cachedTooltipContent = /* @__PURE__ */ new Map(), this._cachedXPositions = /* @__PURE__ */ new Map(), this._verticalLine = null, this._plotPoints = /* @__PURE__ */ new Map(), this._resizeObserver = null, this._windowResizeHandler = null, this._pieChartTimeouts = /* @__PURE__ */ new Set(), this._pieChartTooltipShown = !1, this._pieChartClickOutsideHandler = null, this._pieChartGroup = null, this._chartClickOutsideHandler = null, this._chartTooltipScrollHandler = null, this._cachedBounds = {
|
|
28
|
+
bounds: null,
|
|
29
|
+
dataHash: ""
|
|
30
|
+
}, this._cachedYRange = {
|
|
31
|
+
range: null,
|
|
32
|
+
dataHash: ""
|
|
33
|
+
}, this._cachedXValues = {
|
|
34
|
+
values: null,
|
|
35
|
+
dataHash: ""
|
|
36
|
+
}, this._renderScheduled = !1, this._animateNextRender = !1, this._observedDataReference = null, this._observedDataFingerprint = "", this._datasetVisibility = /* @__PURE__ */ new Map(), this._widthValue = "100%", this._heightValue = 400, this._defaultColors = [
|
|
37
|
+
"#2563eb",
|
|
38
|
+
"#3b82f6",
|
|
39
|
+
"#0d9488",
|
|
40
|
+
"#7c3aed",
|
|
41
|
+
"#d97706",
|
|
42
|
+
"#059669",
|
|
43
|
+
"#dc2626",
|
|
44
|
+
"#c026d3"
|
|
45
|
+
], this._legendHeight = 0, this._rotatedLabelHeight = 0;
|
|
46
|
+
}
|
|
47
|
+
connectedCallback() {
|
|
48
|
+
this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "block", "w-full"), this._setupDataObserver(), this._setupDarkModeObserver(), this._setupResizeObserver(), requestAnimationFrame(() => {
|
|
49
|
+
requestAnimationFrame(() => {
|
|
50
|
+
this.render();
|
|
51
|
+
});
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
_setupDataObserver() {
|
|
55
|
+
let e = () => {
|
|
56
|
+
if (!this.isConnected) return;
|
|
57
|
+
let e = this.data, t = null;
|
|
58
|
+
e && typeof e == "object" && !Array.isArray(e) && "datasets" in e && (t = e);
|
|
59
|
+
let n = "";
|
|
60
|
+
if (t) try {
|
|
61
|
+
n = JSON.stringify(t);
|
|
62
|
+
} catch {
|
|
63
|
+
n = "";
|
|
64
|
+
}
|
|
65
|
+
t && (t !== this._observedDataReference || n && n !== this._observedDataFingerprint) && (this._observedDataReference = t, this._observedDataFingerprint = n, this._chartData = t, this._animateNextRender = !0, this._cachedBounds.dataHash = "", this._cachedYRange.dataHash = "", this._cachedXValues.dataHash = "", this.render());
|
|
66
|
+
};
|
|
67
|
+
requestAnimationFrame(() => {
|
|
68
|
+
e(), requestAnimationFrame(() => {
|
|
69
|
+
e();
|
|
70
|
+
});
|
|
71
|
+
});
|
|
72
|
+
let t = setInterval(() => {
|
|
73
|
+
if (!this.isConnected) {
|
|
74
|
+
clearInterval(t);
|
|
75
|
+
return;
|
|
76
|
+
}
|
|
77
|
+
e();
|
|
78
|
+
}, 250);
|
|
79
|
+
this._dataCheckInterval = t;
|
|
80
|
+
}
|
|
81
|
+
_setupDarkModeObserver() {
|
|
82
|
+
this._darkModeObserver = new MutationObserver(() => {
|
|
83
|
+
this.isConnected && this.render();
|
|
84
|
+
}), this._darkModeObserver.observe(document.documentElement, {
|
|
85
|
+
attributes: !0,
|
|
86
|
+
attributeFilter: ["class"]
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
disconnectedCallback() {
|
|
90
|
+
if (this._tooltip && this._tooltip.parentNode && (this._tooltip.parentNode.removeChild(this._tooltip), this._tooltip = null), this._tooltipHideTimeout !== null && (clearTimeout(this._tooltipHideTimeout), this._tooltipHideTimeout = null), this._pieChartTimeouts.forEach((e) => clearTimeout(e)), this._pieChartTimeouts.clear(), this._pieChartClickOutsideHandler &&= (document.removeEventListener("click", this._pieChartClickOutsideHandler, !0), null), this._chartClickOutsideHandler &&= (document.removeEventListener("click", this._chartClickOutsideHandler, !0), null), this._pieChartTooltipShown = !1, this._pieChartGroup = null, this._pinnedXValue = null, this._tooltipAnimationFrame !== null && (cancelAnimationFrame(this._tooltipAnimationFrame), this._tooltipAnimationFrame = null), this._dataObserver &&= (this._dataObserver.disconnect(), null), this._darkModeObserver &&= (this._darkModeObserver.disconnect(), null), this._dataCheckInterval &&= (clearInterval(this._dataCheckInterval), null), this._svg && (this._chartTooltipMouseMove &&= (this._svg.removeEventListener("mousemove", this._chartTooltipMouseMove), null), this._chartTooltipMouseLeave &&= (this._svg.removeEventListener("mouseleave", this._chartTooltipMouseLeave), null), this._chartTooltipTouchStart &&= (this._svg.removeEventListener("touchstart", this._chartTooltipTouchStart), null), this._chartTooltipTouchMove &&= (this._svg.removeEventListener("touchmove", this._chartTooltipTouchMove), null), this._chartTooltipTouchEnd &&= (this._svg.removeEventListener("touchend", this._chartTooltipTouchEnd), null)), this._chartTooltipScrollHandler) {
|
|
91
|
+
window.removeEventListener("scroll", this._chartTooltipScrollHandler, !0), this._chartContainer && this._chartContainer.removeEventListener("scroll", this._chartTooltipScrollHandler, !0);
|
|
92
|
+
let e = this.parentElement;
|
|
93
|
+
for (; e;) e.removeEventListener("scroll", this._chartTooltipScrollHandler, !0), e = e.parentElement;
|
|
94
|
+
this._chartTooltipScrollHandler = null;
|
|
95
|
+
}
|
|
96
|
+
this._resizeObserver &&= (this._resizeObserver.disconnect(), null), this._windowResizeHandler &&= (window.removeEventListener("resize", this._windowResizeHandler), null), this._cachedTooltipContent.clear(), this._cachedXPositions.clear(), this._plotPoints.clear(), this._cachedBounds = {
|
|
97
|
+
bounds: null,
|
|
98
|
+
dataHash: ""
|
|
99
|
+
}, this._cachedYRange = {
|
|
100
|
+
range: null,
|
|
101
|
+
dataHash: ""
|
|
102
|
+
}, this._cachedXValues = {
|
|
103
|
+
values: null,
|
|
104
|
+
dataHash: ""
|
|
105
|
+
};
|
|
106
|
+
}
|
|
107
|
+
_handleResize() {
|
|
108
|
+
if (!this.isConnected) return;
|
|
109
|
+
let e = this.getBoundingClientRect(), t = e.width || this.parentElement?.clientWidth || 800, n = e.height || this.parentElement?.clientHeight || 400, r = this._calculateDimension(this._widthValue, t, t), i = this._calculateDimension(this._heightValue, n, 400);
|
|
110
|
+
(r !== this._width || i !== this._height) && (this._width = r, this._height = i, this.render());
|
|
111
|
+
}
|
|
112
|
+
_setupResizeObserver() {
|
|
113
|
+
this._resizeObserver &&= (this._resizeObserver.disconnect(), null), this._windowResizeHandler &&= (window.removeEventListener("resize", this._windowResizeHandler), null);
|
|
114
|
+
let e = null, t = () => {
|
|
115
|
+
e && clearTimeout(e), e = window.setTimeout(() => {
|
|
116
|
+
this._handleResize();
|
|
117
|
+
}, 100);
|
|
118
|
+
};
|
|
119
|
+
this._windowResizeHandler = t, this._resizeObserver = new ResizeObserver(() => {
|
|
120
|
+
t();
|
|
121
|
+
}), this._resizeObserver.observe(this), window.addEventListener("resize", t);
|
|
122
|
+
}
|
|
123
|
+
attributeChangedCallback(e, t, n) {
|
|
124
|
+
if (t !== n) {
|
|
125
|
+
if (e === "data") {
|
|
126
|
+
if (n) try {
|
|
127
|
+
this._chartData = JSON.parse(n);
|
|
128
|
+
} catch (e) {
|
|
129
|
+
console.error("mint-chart: Invalid data JSON", e), this._chartData = null;
|
|
130
|
+
}
|
|
131
|
+
else this._chartData = null;
|
|
132
|
+
this._invalidateDataCaches(), this._animateNextRender = !0;
|
|
133
|
+
}
|
|
134
|
+
(e === "width" || e === "height") && this.isConnected && (t && t.endsWith("%")) !== (n && n.endsWith("%")) && this._setupResizeObserver(), this.isConnected && requestAnimationFrame(() => {
|
|
135
|
+
this.render();
|
|
136
|
+
});
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
get type() {
|
|
140
|
+
let e = this.getAttribute("type") || "line";
|
|
141
|
+
return e === "line" || e === "bar" || e === "area" || e === "pie" ? e : "line";
|
|
142
|
+
}
|
|
143
|
+
set type(e) {
|
|
144
|
+
this.setAttribute("type", e);
|
|
145
|
+
}
|
|
146
|
+
get data() {
|
|
147
|
+
return this._chartData;
|
|
148
|
+
}
|
|
149
|
+
set data(e) {
|
|
150
|
+
if (typeof e == "string") try {
|
|
151
|
+
this._chartData = JSON.parse(e);
|
|
152
|
+
} catch (e) {
|
|
153
|
+
console.error("mint-chart: Invalid data JSON", e), this._chartData = null;
|
|
154
|
+
}
|
|
155
|
+
else this._chartData = e;
|
|
156
|
+
this._invalidateDataCaches(), this._animateNextRender = !0, this.isConnected && requestAnimationFrame(() => {
|
|
157
|
+
this.render();
|
|
158
|
+
});
|
|
159
|
+
}
|
|
160
|
+
get width() {
|
|
161
|
+
let e = this.getAttribute("width");
|
|
162
|
+
if (!e) return this._widthValue;
|
|
163
|
+
if (e.endsWith("%")) return e;
|
|
164
|
+
let t = parseInt(e, 10);
|
|
165
|
+
return isNaN(t) ? this._widthValue : t;
|
|
166
|
+
}
|
|
167
|
+
set width(e) {
|
|
168
|
+
this.setAttribute("width", e.toString());
|
|
169
|
+
}
|
|
170
|
+
get height() {
|
|
171
|
+
let e = this.getAttribute("height");
|
|
172
|
+
if (!e) return this._heightValue;
|
|
173
|
+
if (e.endsWith("%")) return e;
|
|
174
|
+
let t = parseInt(e, 10);
|
|
175
|
+
return isNaN(t) ? this._heightValue : t;
|
|
176
|
+
}
|
|
177
|
+
set height(e) {
|
|
178
|
+
this.setAttribute("height", e.toString());
|
|
179
|
+
}
|
|
180
|
+
_calculateDimension(e, t, n) {
|
|
181
|
+
if (typeof e == "number") return e;
|
|
182
|
+
if (typeof e == "string" && e.endsWith("%")) {
|
|
183
|
+
let n = parseFloat(e);
|
|
184
|
+
if (!isNaN(n)) return t * n / 100;
|
|
185
|
+
}
|
|
186
|
+
return n;
|
|
187
|
+
}
|
|
188
|
+
_scheduleRender() {
|
|
189
|
+
this._animateNextRender = !0, this._syncObservedData(), !this._renderScheduled && (this._renderScheduled = !0, requestAnimationFrame(() => {
|
|
190
|
+
this._renderScheduled = !1, this.render();
|
|
191
|
+
}));
|
|
192
|
+
}
|
|
193
|
+
_invalidateDataCaches() {
|
|
194
|
+
this._cachedBounds.dataHash = "", this._cachedYRange.dataHash = "", this._cachedXValues.dataHash = "", this._cachedTooltipContent?.clear();
|
|
195
|
+
}
|
|
196
|
+
_syncObservedData() {
|
|
197
|
+
this._observedDataReference = this._chartData;
|
|
198
|
+
try {
|
|
199
|
+
this._observedDataFingerprint = this._chartData ? JSON.stringify(this._chartData) : "";
|
|
200
|
+
} catch {
|
|
201
|
+
this._observedDataFingerprint = "";
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
_isDatasetVisible(e, t) {
|
|
205
|
+
if (e.id) {
|
|
206
|
+
let t = this._datasetVisibility.get(e.id);
|
|
207
|
+
if (t !== void 0) return t;
|
|
208
|
+
}
|
|
209
|
+
return e.visible !== !1;
|
|
210
|
+
}
|
|
211
|
+
_initializeDatasetVisibility() {
|
|
212
|
+
this._chartData && this._chartData.datasets.forEach((e, t) => {
|
|
213
|
+
e.id && (this._datasetVisibility.has(e.id) || this._datasetVisibility.set(e.id, e.visible !== !1));
|
|
214
|
+
});
|
|
215
|
+
}
|
|
216
|
+
render() {
|
|
217
|
+
if (!this.isConnected) return;
|
|
218
|
+
let e = this._animateNextRender && !window.matchMedia?.("(prefers-reduced-motion: reduce)").matches && this._svg ? this._svg.cloneNode(!0) : null;
|
|
219
|
+
this._animateNextRender = !1, this._plotPoints.clear(), this._activeXValue = null, this._cachedTooltipContent?.clear(), this._cachedXPositions?.clear(), this._chartType = this.type;
|
|
220
|
+
let t = this.data;
|
|
221
|
+
if (t && typeof t == "object" && !Array.isArray(t) && "datasets" in t && (this._chartData = t), !this._chartData) {
|
|
222
|
+
let e = this.getAttribute("data");
|
|
223
|
+
if (e) try {
|
|
224
|
+
this._chartData = JSON.parse(e);
|
|
225
|
+
} catch (e) {
|
|
226
|
+
console.error("mint-chart: Invalid data JSON", e), this._chartData = null;
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
this._widthValue = this.width, this._heightValue = this.height;
|
|
230
|
+
let n = this.getBoundingClientRect(), r = n.width || this.parentElement?.clientWidth || 800, i = n.height || this.parentElement?.clientHeight || 400;
|
|
231
|
+
this._width = this._calculateDimension(this._widthValue, r, r), this._height = this._calculateDimension(this._heightValue, i, 400), this._showLegend = this.getAttribute("show-legend") !== "false", this._showGrid = this.getAttribute("show-grid") !== "false", this._showTooltip = this.getAttribute("show-tooltip") !== "false";
|
|
232
|
+
let a = this.getAttribute("curve-tension");
|
|
233
|
+
if (a !== null) {
|
|
234
|
+
let e = parseFloat(a);
|
|
235
|
+
this._curveTension = isNaN(e) ? .5 : Math.max(0, Math.min(1, e));
|
|
236
|
+
} else this._curveTension = .5;
|
|
237
|
+
if (!this._chartData || !this._chartData.datasets || this._chartData.datasets.length === 0) {
|
|
238
|
+
this.innerHTML = "<div class=\"p-4 text-gray-500\">No chart data provided</div>";
|
|
239
|
+
return;
|
|
240
|
+
}
|
|
241
|
+
this.innerHTML = "", this._chartContainer = document.createElement("div"), this._chartContainer.className = "relative w-full", this._chartContainer.style.position = "relative", typeof this._widthValue == "string" && this._widthValue.endsWith("%") ? this._chartContainer.style.width = this._widthValue : this._chartContainer.style.width = `${this._width}px`, typeof this._heightValue == "string" && this._heightValue.endsWith("%") ? this._chartContainer.style.height = this._heightValue : this._chartContainer.style.height = `${this._height}px`, this.appendChild(this._chartContainer), this._svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this._svg.setAttribute("width", this._width.toString()), this._svg.setAttribute("height", this._height.toString()), this._svg.setAttribute("viewBox", `0 0 ${this._width} ${this._height}`), this._svg.setAttribute("class", "w-full h-full"), this._svg.setAttribute("role", "img");
|
|
242
|
+
let o = this._chartData.datasets.map((e) => e.name).filter(Boolean), s = this.getAttribute("aria-label")?.trim() || `${this.type} chart${o.length ? ` showing ${o.join(", ")}` : ""}. ${Math.max(0, ...this._chartData.datasets.map((e) => e.data.length))} data points.`, c = `${this.id || `mint-chart-${Math.random().toString(36).slice(2, 10)}`}-data`;
|
|
243
|
+
this._svg.setAttribute("aria-label", s), this._svg.setAttribute("aria-describedby", c), this._chartContainer && this._svg && (e && (e.style.position = "absolute", e.style.inset = "0", e.style.width = "100%", e.style.height = "100%", e.style.pointerEvents = "none", e.style.zIndex = "1", e.style.opacity = "1", e.style.transition = "opacity 260ms ease", this._chartContainer.appendChild(e), this._svg.style.position = "relative", this._svg.style.zIndex = "0", this._svg.style.opacity = "0", this._svg.style.transition = "opacity 260ms ease"), this._chartContainer.appendChild(this._svg));
|
|
244
|
+
let l = document.createElement("table");
|
|
245
|
+
l.id = c, Object.assign(l.style, {
|
|
246
|
+
position: "absolute",
|
|
247
|
+
width: "1px",
|
|
248
|
+
height: "1px",
|
|
249
|
+
padding: "0",
|
|
250
|
+
margin: "-1px",
|
|
251
|
+
overflow: "hidden",
|
|
252
|
+
clip: "rect(0, 0, 0, 0)",
|
|
253
|
+
whiteSpace: "nowrap",
|
|
254
|
+
border: "0"
|
|
255
|
+
});
|
|
256
|
+
let u = document.createElement("caption");
|
|
257
|
+
u.textContent = `Data for ${s}`, l.appendChild(u);
|
|
258
|
+
let d = document.createElement("thead"), f = document.createElement("tr"), p = document.createElement("th");
|
|
259
|
+
p.scope = "col", p.textContent = "Category", f.appendChild(p), this._chartData.datasets.forEach((e) => {
|
|
260
|
+
let t = document.createElement("th");
|
|
261
|
+
t.scope = "col", t.textContent = e.name || "Series", f.appendChild(t);
|
|
262
|
+
}), d.appendChild(f), l.appendChild(d);
|
|
263
|
+
let m = document.createElement("tbody"), h = Math.max(0, ...this._chartData.datasets.map((e) => e.data.length));
|
|
264
|
+
for (let e = 0; e < h; e += 1) {
|
|
265
|
+
let t = document.createElement("tr"), n = document.createElement("th");
|
|
266
|
+
n.scope = "row", n.textContent = String(this._chartData.datasets.find((t) => t.data[e])?.data[e]?.x ?? e + 1), t.appendChild(n), this._chartData.datasets.forEach((n) => {
|
|
267
|
+
let r = document.createElement("td"), i = n.data[e];
|
|
268
|
+
r.textContent = i ? this._formatValue(i.y, n) : "", t.appendChild(r);
|
|
269
|
+
}), m.appendChild(t);
|
|
270
|
+
}
|
|
271
|
+
switch (l.appendChild(m), this.appendChild(l), this._showTooltip && this._createTooltip(), this._initializeDatasetVisibility(), this._calculateRotatedLabelHeight(), this._showLegend ? this._legendHeight = this._calculateLegendHeight() : this._legendHeight = 0, this._showLegend && this._renderLegend(), this._chartType !== "pie" && this._pieChartClickOutsideHandler && (document.removeEventListener("click", this._pieChartClickOutsideHandler, !0), this._pieChartClickOutsideHandler = null, this._pieChartTooltipShown = !1, this._pieChartGroup = null), this._pinnedXValue = null, this._chartType) {
|
|
272
|
+
case "line":
|
|
273
|
+
this._renderLineChart();
|
|
274
|
+
break;
|
|
275
|
+
case "bar":
|
|
276
|
+
this._renderBarChart();
|
|
277
|
+
break;
|
|
278
|
+
case "area":
|
|
279
|
+
this._renderAreaChart();
|
|
280
|
+
break;
|
|
281
|
+
case "pie":
|
|
282
|
+
this._renderPieChart();
|
|
283
|
+
break;
|
|
284
|
+
}
|
|
285
|
+
if (this._showTooltip && this._chartType !== "pie" && (this._setupChartTooltip(), this._setupTooltipScrollHandler()), this._createVerticalLine(), e && this._svg) {
|
|
286
|
+
let t = this._svg;
|
|
287
|
+
requestAnimationFrame(() => requestAnimationFrame(() => {
|
|
288
|
+
t.isConnected && (e.style.opacity = "0", t.style.opacity = "1", window.setTimeout(() => e.remove(), 280));
|
|
289
|
+
}));
|
|
290
|
+
}
|
|
291
|
+
}
|
|
292
|
+
_createTooltip() {
|
|
293
|
+
this._tooltip && this._tooltip.parentNode && this._tooltip.parentNode.removeChild(this._tooltip), this._tooltip = document.createElement("div"), this._tooltip.className = "fixed pointer-events-none z-50 bg-gray-900 dark:bg-mint-elevated text-white text-xs rounded px-2 py-1 shadow-lg opacity-0", this._tooltip.style.display = "none", document.body.appendChild(this._tooltip);
|
|
294
|
+
}
|
|
295
|
+
_showTooltipAt(e, t, n) {
|
|
296
|
+
if (!this._tooltip) return;
|
|
297
|
+
this._tooltipHideTimeout !== null && (clearTimeout(this._tooltipHideTimeout), this._tooltipHideTimeout = null), this._lastTooltipContent !== n && (this._tooltip.innerHTML = n, this._lastTooltipContent = n), (this._tooltip.style.display === "none" || this._tooltip.style.opacity === "0") && (this._tooltip.style.display = "block", this._tooltip.style.opacity = "1", this._tooltip.style.padding = "8px 12px");
|
|
298
|
+
let r = this._tooltip.getBoundingClientRect(), i = window.innerWidth, a = window.innerHeight, o = e + 10, s = t - r.height - 8;
|
|
299
|
+
o + r.width > i && (o = e - r.width - 10), o < 0 && (o = 10), s < 0 && (s = t + 20), s + r.height > a && (s = t - r.height - 8, s < 0 && (s = 10));
|
|
300
|
+
let c = `${o}px`, l = `${s}px`;
|
|
301
|
+
this._tooltip.style.left !== c && (this._tooltip.style.left = c), this._tooltip.style.top !== l && (this._tooltip.style.top = l);
|
|
302
|
+
}
|
|
303
|
+
_hideTooltip() {
|
|
304
|
+
this._tooltip && (this._tooltipHideTimeout !== null && (clearTimeout(this._tooltipHideTimeout), this._tooltipHideTimeout = null), this._tooltip.style.opacity = "0", this._tooltipHideTimeout = window.setTimeout(() => {
|
|
305
|
+
this._tooltip && (this._tooltip.style.display = "none"), this._tooltipHideTimeout = null;
|
|
306
|
+
}, 200));
|
|
307
|
+
}
|
|
308
|
+
_createVerticalLine() {
|
|
309
|
+
if (!this._svg) return;
|
|
310
|
+
this._verticalLine && this._verticalLine.parentNode && this._verticalLine.parentNode.removeChild(this._verticalLine), this._verticalLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
|
|
311
|
+
let e = document.documentElement.classList.contains("dark");
|
|
312
|
+
this._verticalLine.setAttribute("stroke", e ? "#9ca3af" : "#6b7280"), this._verticalLine.setAttribute("stroke-width", "1"), this._verticalLine.setAttribute("stroke-dasharray", "4,2"), this._verticalLine.style.opacity = "0", this._verticalLine.style.pointerEvents = "none";
|
|
313
|
+
let t = this._svg.querySelector(".chart-legend");
|
|
314
|
+
t && t.parentNode ? t.parentNode.insertBefore(this._verticalLine, t) : this._svg.appendChild(this._verticalLine);
|
|
315
|
+
}
|
|
316
|
+
_showVerticalLineAtX(e, t) {
|
|
317
|
+
if (!this._verticalLine) return;
|
|
318
|
+
let n = this._chartType === "bar" ? this._scaleXForBarChart(e, t) : this._scaleX(e, t);
|
|
319
|
+
this._verticalLine.setAttribute("x1", n.toString()), this._verticalLine.setAttribute("y1", t.y.toString()), this._verticalLine.setAttribute("x2", n.toString()), this._verticalLine.setAttribute("y2", (t.y + t.height).toString()), this._verticalLine.style.opacity = "1";
|
|
320
|
+
}
|
|
321
|
+
_hideVerticalLine() {
|
|
322
|
+
this._verticalLine && (this._verticalLine.style.opacity = "0");
|
|
323
|
+
}
|
|
324
|
+
_showPlotPointsForX(e) {
|
|
325
|
+
this._plotPoints.forEach((e) => {
|
|
326
|
+
e.forEach((e) => {
|
|
327
|
+
e.style.opacity = "0";
|
|
328
|
+
});
|
|
329
|
+
});
|
|
330
|
+
let t = String(e), n = this._plotPoints.get(t);
|
|
331
|
+
n && n.forEach((e) => {
|
|
332
|
+
e.style.opacity = "1";
|
|
333
|
+
});
|
|
334
|
+
}
|
|
335
|
+
_hidePlotPoints() {
|
|
336
|
+
this._plotPoints.forEach((e) => {
|
|
337
|
+
e.forEach((e) => {
|
|
338
|
+
e.style.opacity = "0";
|
|
339
|
+
});
|
|
340
|
+
});
|
|
341
|
+
}
|
|
342
|
+
_calculateMaxYAxisLabelWidth() {
|
|
343
|
+
if (!this._showGrid || !this._chartData) return 0;
|
|
344
|
+
let e = document.createElement("canvas").getContext("2d");
|
|
345
|
+
if (!e) return 60;
|
|
346
|
+
e.font = "12px system-ui, -apple-system, sans-serif";
|
|
347
|
+
let t = this._showLegend ? Math.max(this._legendHeight, 60) : 0, n = this._height - t, r = Math.floor(n / 35), i = Math.min(5, r), a = 0;
|
|
348
|
+
for (let t = 0; t <= i; t++) {
|
|
349
|
+
let n = this._getYRange(), r = n.max - (n.max - n.min) / i * t, o = this._formatYAxisValue(r), s = e.measureText(o);
|
|
350
|
+
a = Math.max(a, s.width);
|
|
351
|
+
}
|
|
352
|
+
return Math.ceil(a) + 20;
|
|
353
|
+
}
|
|
354
|
+
_getChartBounds() {
|
|
355
|
+
let e = this._calculateMaxYAxisLabelWidth(), t = `${this._width}-${this._height}-${this._showGrid}-${this._showLegend}-${this._legendHeight}-${e}-${this._rotatedLabelHeight}`;
|
|
356
|
+
if (this._cachedBounds.bounds && this._cachedBounds.dataHash === t) return this._cachedBounds.bounds;
|
|
357
|
+
let n = 0, r = 0;
|
|
358
|
+
this._showGrid && (n = e + 10);
|
|
359
|
+
let i = (this._rotatedLabelHeight > 0 ? 30 : 20) + this._rotatedLabelHeight + 12, a = i;
|
|
360
|
+
this._showLegend && (a = i + 20 + Math.max(this._legendHeight, 60));
|
|
361
|
+
let o = this._height - 0 - n - 0, s = o - a, c = 1;
|
|
362
|
+
if (s < 100 && a > 0) {
|
|
363
|
+
let e = o - 100;
|
|
364
|
+
e > 0 ? (c = Math.min(1, e / a), c = Math.max(.5, c)) : c = .5;
|
|
365
|
+
}
|
|
366
|
+
r = a * c;
|
|
367
|
+
let l = this._width * .3, u = n, d = 1;
|
|
368
|
+
n > l && (d = l / n, u = l);
|
|
369
|
+
let f = {
|
|
370
|
+
width: (this._width - u - 0) * d,
|
|
371
|
+
height: this._height - 0 - r,
|
|
372
|
+
x: u,
|
|
373
|
+
y: 0
|
|
374
|
+
};
|
|
375
|
+
return this._cachedBounds = {
|
|
376
|
+
bounds: f,
|
|
377
|
+
dataHash: t
|
|
378
|
+
}, f;
|
|
379
|
+
}
|
|
380
|
+
_getAllDataPoints() {
|
|
381
|
+
if (!this._chartData) return [];
|
|
382
|
+
let e = [];
|
|
383
|
+
return this._chartData.datasets.forEach((t, n) => {
|
|
384
|
+
this._isDatasetVisible(t, n) && e.push(...t.data);
|
|
385
|
+
}), e;
|
|
386
|
+
}
|
|
387
|
+
_getXValues() {
|
|
388
|
+
if (!this._chartData) return [];
|
|
389
|
+
let e = JSON.stringify(this._chartData.labels) + JSON.stringify(this._chartData.datasets.map((e) => e.data.map((e) => e.x)));
|
|
390
|
+
if (this._cachedXValues.values && this._cachedXValues.dataHash === e) return this._cachedXValues.values;
|
|
391
|
+
if (this._chartData.labels && this._chartData.labels.length > 0) return this._cachedXValues = {
|
|
392
|
+
values: this._chartData.labels,
|
|
393
|
+
dataHash: e
|
|
394
|
+
}, this._chartData.labels;
|
|
395
|
+
let t = /* @__PURE__ */ new Set();
|
|
396
|
+
this._chartData.datasets.forEach((e, n) => {
|
|
397
|
+
this._isDatasetVisible(e, n) && e.data.forEach((e) => {
|
|
398
|
+
t.add(e.x);
|
|
399
|
+
});
|
|
400
|
+
});
|
|
401
|
+
let n = Array.from(t).sort((e, t) => {
|
|
402
|
+
if (typeof e == "number" && typeof t == "number") return e - t;
|
|
403
|
+
let n = String(e), r = String(t), i = /^([A-Za-z]{3})\s+(\d{4})$/, a = n.match(i), o = r.match(i);
|
|
404
|
+
if (a && o) {
|
|
405
|
+
let e = [
|
|
406
|
+
"Jan",
|
|
407
|
+
"Feb",
|
|
408
|
+
"Mar",
|
|
409
|
+
"Apr",
|
|
410
|
+
"May",
|
|
411
|
+
"Jun",
|
|
412
|
+
"Jul",
|
|
413
|
+
"Aug",
|
|
414
|
+
"Sep",
|
|
415
|
+
"Oct",
|
|
416
|
+
"Nov",
|
|
417
|
+
"Dec"
|
|
418
|
+
], t = e.indexOf(a[1]), n = e.indexOf(o[1]), r = parseInt(a[2]), i = parseInt(o[2]);
|
|
419
|
+
return r === i ? t - n : r - i;
|
|
420
|
+
}
|
|
421
|
+
return n.localeCompare(r);
|
|
422
|
+
});
|
|
423
|
+
return this._cachedXValues = {
|
|
424
|
+
values: n,
|
|
425
|
+
dataHash: e
|
|
426
|
+
}, n;
|
|
427
|
+
}
|
|
428
|
+
_getYRange() {
|
|
429
|
+
if (!this._chartData) return {
|
|
430
|
+
min: 0,
|
|
431
|
+
max: 100
|
|
432
|
+
};
|
|
433
|
+
let e = JSON.stringify(this._chartData.datasets.map((e) => e.data.map((e) => e.y)));
|
|
434
|
+
if (this._cachedYRange.range && this._cachedYRange.dataHash === e) return this._cachedYRange.range;
|
|
435
|
+
let t = this._getAllDataPoints();
|
|
436
|
+
if (t.length === 0) {
|
|
437
|
+
let t = {
|
|
438
|
+
min: 0,
|
|
439
|
+
max: 100
|
|
440
|
+
};
|
|
441
|
+
return this._cachedYRange = {
|
|
442
|
+
range: t,
|
|
443
|
+
dataHash: e
|
|
444
|
+
}, t;
|
|
445
|
+
}
|
|
446
|
+
let n = t.map((e) => e.y), r = Math.min(...n), i = Math.max(...n), a = (i - r) * .1, o = {
|
|
447
|
+
min: Math.max(0, r - a),
|
|
448
|
+
max: i + a
|
|
449
|
+
};
|
|
450
|
+
return this._cachedYRange = {
|
|
451
|
+
range: o,
|
|
452
|
+
dataHash: e
|
|
453
|
+
}, o;
|
|
454
|
+
}
|
|
455
|
+
_hasDecimalValues() {
|
|
456
|
+
return this._getAllDataPoints().some((e) => e.y % 1 != 0);
|
|
457
|
+
}
|
|
458
|
+
_formatValueByString(e, t) {
|
|
459
|
+
switch (t.toLowerCase()) {
|
|
460
|
+
case "currency":
|
|
461
|
+
case "currency-usd": return new Intl.NumberFormat("en-US", {
|
|
462
|
+
style: "currency",
|
|
463
|
+
currency: "USD"
|
|
464
|
+
}).format(e);
|
|
465
|
+
case "currency-eur": return new Intl.NumberFormat("en-US", {
|
|
466
|
+
style: "currency",
|
|
467
|
+
currency: "EUR"
|
|
468
|
+
}).format(e);
|
|
469
|
+
case "currency-gbp": return new Intl.NumberFormat("en-US", {
|
|
470
|
+
style: "currency",
|
|
471
|
+
currency: "GBP"
|
|
472
|
+
}).format(e);
|
|
473
|
+
case "number":
|
|
474
|
+
case "number-with-commas": return new Intl.NumberFormat("en-US").format(e);
|
|
475
|
+
case "percent": return new Intl.NumberFormat("en-US", {
|
|
476
|
+
style: "percent",
|
|
477
|
+
minimumFractionDigits: 1
|
|
478
|
+
}).format(e / 100);
|
|
479
|
+
default: return this._hasDecimalValues() && e % 1 != 0 ? e.toFixed(1) : Math.round(e).toString();
|
|
480
|
+
}
|
|
481
|
+
}
|
|
482
|
+
_formatXAxisValue(e) {
|
|
483
|
+
if (this._chartData?.formatXAxis) {
|
|
484
|
+
if (typeof this._chartData.formatXAxis == "function") return this._chartData.formatXAxis(e);
|
|
485
|
+
if (typeof this._chartData.formatXAxis == "string") return String(e);
|
|
486
|
+
}
|
|
487
|
+
return String(e);
|
|
488
|
+
}
|
|
489
|
+
_escapeHtmlForTooltip(e) {
|
|
490
|
+
return e.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
|
|
491
|
+
}
|
|
492
|
+
_tooltipXHeadingHtml(e) {
|
|
493
|
+
return `<strong>${this._escapeHtmlForTooltip(this._formatXAxisValue(e))}</strong><br/>`;
|
|
494
|
+
}
|
|
495
|
+
_formatYAxisValue(e) {
|
|
496
|
+
if (this._chartData?.formatYAxis) {
|
|
497
|
+
if (typeof this._chartData.formatYAxis == "function") return this._chartData.formatYAxis(e);
|
|
498
|
+
if (typeof this._chartData.formatYAxis == "string") return this._formatValueByString(e, this._chartData.formatYAxis);
|
|
499
|
+
}
|
|
500
|
+
if (this._chartData?.datasets?.[0]?.formatValue) {
|
|
501
|
+
if (typeof this._chartData.datasets[0].formatValue == "function") return this._chartData.datasets[0].formatValue(e);
|
|
502
|
+
if (typeof this._chartData.datasets[0].formatValue == "string") return this._formatValueByString(e, this._chartData.datasets[0].formatValue);
|
|
503
|
+
}
|
|
504
|
+
return this._hasDecimalValues() && e % 1 != 0 ? e.toFixed(1) : Math.round(e).toString();
|
|
505
|
+
}
|
|
506
|
+
_formatValue(e, t) {
|
|
507
|
+
if (t.formatValue) {
|
|
508
|
+
if (typeof t.formatValue == "function") return t.formatValue(e);
|
|
509
|
+
if (typeof t.formatValue == "string") return this._formatValueByString(e, t.formatValue);
|
|
510
|
+
}
|
|
511
|
+
return String(e);
|
|
512
|
+
}
|
|
513
|
+
_getAllDatasetsAtX(e) {
|
|
514
|
+
if (!this._chartData) return [];
|
|
515
|
+
let t = [];
|
|
516
|
+
return this._chartData.datasets.forEach((n, r) => {
|
|
517
|
+
if (!this._isDatasetVisible(n, r)) return;
|
|
518
|
+
let i = n.data.find((t) => String(t.x) === String(e));
|
|
519
|
+
if (i) {
|
|
520
|
+
let e = this._getDatasetColor(n, r), a = this._formatValue(i.y, n);
|
|
521
|
+
t.push({
|
|
522
|
+
name: n.name,
|
|
523
|
+
value: i.y,
|
|
524
|
+
color: e,
|
|
525
|
+
formattedValue: a
|
|
526
|
+
});
|
|
527
|
+
}
|
|
528
|
+
}), t;
|
|
529
|
+
}
|
|
530
|
+
_findNearestXValue(e) {
|
|
531
|
+
if (!this._chartData) return null;
|
|
532
|
+
let t = this._getChartBounds(), n = this._getXValues();
|
|
533
|
+
if (n.length === 0) return null;
|
|
534
|
+
let r = this._chartType === "bar", i = null, a = Infinity;
|
|
535
|
+
return n.forEach((n) => {
|
|
536
|
+
let o = r ? this._scaleXForBarChart(n, t) : this._scaleX(n, t), s = Math.abs(e - o);
|
|
537
|
+
s < a && (a = s, i = n);
|
|
538
|
+
}), i;
|
|
539
|
+
}
|
|
540
|
+
_setupTooltipScrollHandler() {
|
|
541
|
+
if (this._chartTooltipScrollHandler) {
|
|
542
|
+
window.removeEventListener("scroll", this._chartTooltipScrollHandler, !0), this._chartContainer && this._chartContainer.removeEventListener("scroll", this._chartTooltipScrollHandler, !0);
|
|
543
|
+
let e = this.parentElement;
|
|
544
|
+
for (; e;) e.removeEventListener("scroll", this._chartTooltipScrollHandler, !0), e = e.parentElement;
|
|
545
|
+
}
|
|
546
|
+
this._chartTooltipScrollHandler = () => {
|
|
547
|
+
this._hideTooltip(), this._pinnedXValue = null;
|
|
548
|
+
}, window.addEventListener("scroll", this._chartTooltipScrollHandler, !0), this._chartContainer && this._chartContainer.addEventListener("scroll", this._chartTooltipScrollHandler, !0);
|
|
549
|
+
let e = this.parentElement;
|
|
550
|
+
for (; e;) {
|
|
551
|
+
let t = window.getComputedStyle(e), n = t.overflow, r = t.overflowY;
|
|
552
|
+
(n === "auto" || n === "scroll" || r === "auto" || r === "scroll") && e.addEventListener("scroll", this._chartTooltipScrollHandler, !0), e = e.parentElement;
|
|
553
|
+
}
|
|
554
|
+
}
|
|
555
|
+
_setupChartTooltip() {
|
|
556
|
+
if (!this._svg || !this._showTooltip) return;
|
|
557
|
+
this._chartTooltipMouseMove && this._svg.removeEventListener("mousemove", this._chartTooltipMouseMove), this._chartTooltipMouseLeave && this._svg.removeEventListener("mouseleave", this._chartTooltipMouseLeave), this._chartTooltipClick && this._svg.removeEventListener("click", this._chartTooltipClick), this._chartTooltipTouchStart && this._svg.removeEventListener("touchstart", this._chartTooltipTouchStart), this._chartTooltipTouchMove && this._svg.removeEventListener("touchmove", this._chartTooltipTouchMove), this._chartTooltipTouchEnd && this._svg.removeEventListener("touchend", this._chartTooltipTouchEnd), this._cachedTooltipContent.clear(), this._cachedXPositions.clear();
|
|
558
|
+
let t = this._getChartBounds(), n = 0, r = 0, i = (i) => {
|
|
559
|
+
!this._chartContainer || !this._svg || (n = i.clientX, r = i.clientY, this._tooltipAnimationFrame !== null && cancelAnimationFrame(this._tooltipAnimationFrame), this._tooltipAnimationFrame = requestAnimationFrame(() => {
|
|
560
|
+
if (this._tooltipAnimationFrame = null, !this._svg) return;
|
|
561
|
+
let i = this._svg.getBoundingClientRect(), a = n - i.left, o = r - i.top;
|
|
562
|
+
if (a < t.x || a > t.x + t.width || o < t.y || o > t.y + t.height) {
|
|
563
|
+
this._hideTooltip(), this._hidePlotPoints(), this._hideVerticalLine(), this._activeXValue = null;
|
|
564
|
+
return;
|
|
565
|
+
}
|
|
566
|
+
let s = this._findNearestXValue(a);
|
|
567
|
+
if (!s) {
|
|
568
|
+
this._hideTooltip(), this._hidePlotPoints(), this._hideVerticalLine(), this._activeXValue = null;
|
|
569
|
+
return;
|
|
570
|
+
}
|
|
571
|
+
if (this._pinnedXValue !== null && this._pinnedXValue === s) {
|
|
572
|
+
let e = this._pinnedXValue, i = this._getAllDatasetsAtX(e);
|
|
573
|
+
if (i.length > 0) {
|
|
574
|
+
this._activeXValue = e, this._showPlotPointsForX(e), this._showVerticalLineAtX(e, t);
|
|
575
|
+
let a = this._cachedTooltipContent.get(e);
|
|
576
|
+
a || (a = this._tooltipXHeadingHtml(e), i.forEach((e) => {
|
|
577
|
+
a += `<div style="display: flex; align-items: center; gap: 6px; margin-top: 4px;">
|
|
578
|
+
<span style="display: inline-block; width: 12px; height: 12px; background-color: ${e.color}; border-radius: 2px;"></span>
|
|
579
|
+
<span>${e.name}: ${e.formattedValue}</span>
|
|
580
|
+
</div>`;
|
|
581
|
+
}), this._cachedTooltipContent.set(e, a)), this._updateTooltipPosition(n, r), this._lastTooltipContent !== a && this._showTooltipAt(n, r, a);
|
|
582
|
+
return;
|
|
583
|
+
}
|
|
584
|
+
}
|
|
585
|
+
if (this._activeXValue === s) {
|
|
586
|
+
this._updateTooltipPosition(n, r);
|
|
587
|
+
return;
|
|
588
|
+
}
|
|
589
|
+
let c = this._getAllDatasetsAtX(s);
|
|
590
|
+
if (c.length === 0) {
|
|
591
|
+
this._hideTooltip(), this._hidePlotPoints(), this._hideVerticalLine();
|
|
592
|
+
return;
|
|
593
|
+
}
|
|
594
|
+
this._activeXValue = s, this._showPlotPointsForX(s), this._showVerticalLineAtX(s, t);
|
|
595
|
+
let l = this._cachedTooltipContent.get(s);
|
|
596
|
+
if (!l) {
|
|
597
|
+
if (l = this._tooltipXHeadingHtml(s), c.forEach((e) => {
|
|
598
|
+
l += `<div style="display: flex; align-items: center; gap: 6px; margin-top: 4px;">
|
|
599
|
+
<span style="display: inline-block; width: 12px; height: 12px; background-color: ${e.color}; border-radius: 2px;"></span>
|
|
600
|
+
<span>${e.name}: ${e.formattedValue}</span>
|
|
601
|
+
</div>`;
|
|
602
|
+
}), this._cachedTooltipContent.size >= e.MAX_CACHE_SIZE) {
|
|
603
|
+
let e = this._cachedTooltipContent.keys().next().value;
|
|
604
|
+
e !== void 0 && this._cachedTooltipContent.delete(e);
|
|
605
|
+
}
|
|
606
|
+
this._cachedTooltipContent.set(s, l);
|
|
607
|
+
}
|
|
608
|
+
this._showTooltipAt(n, r, l);
|
|
609
|
+
}));
|
|
610
|
+
}, a = () => {
|
|
611
|
+
this._tooltipAnimationFrame !== null && (cancelAnimationFrame(this._tooltipAnimationFrame), this._tooltipAnimationFrame = null), this._hideTooltip(), this._hidePlotPoints(), this._hideVerticalLine(), this._activeXValue = null;
|
|
612
|
+
}, o = (e) => {
|
|
613
|
+
if (!this._chartContainer || !this._svg) return;
|
|
614
|
+
e.stopPropagation();
|
|
615
|
+
let n = this._svg.getBoundingClientRect(), r = e.clientX - n.left, i = e.clientY - n.top;
|
|
616
|
+
if (r < t.x || r > t.x + t.width || i < t.y || i > t.y + t.height) return;
|
|
617
|
+
let a = this._findNearestXValue(r);
|
|
618
|
+
if (a) if (this._pinnedXValue === a) this._pinnedXValue = null, this._hideTooltip(), this._hidePlotPoints(), this._hideVerticalLine(), this._activeXValue = null;
|
|
619
|
+
else {
|
|
620
|
+
this._pinnedXValue = a, this._activeXValue = a;
|
|
621
|
+
let n = this._getAllDatasetsAtX(a);
|
|
622
|
+
if (n.length === 0) return;
|
|
623
|
+
this._showPlotPointsForX(a), this._showVerticalLineAtX(a, t);
|
|
624
|
+
let r = this._cachedTooltipContent.get(a);
|
|
625
|
+
r || (r = this._tooltipXHeadingHtml(a), n.forEach((e) => {
|
|
626
|
+
r += `<div style="display: flex; align-items: center; gap: 6px; margin-top: 4px;">
|
|
627
|
+
<span style="display: inline-block; width: 12px; height: 12px; background-color: ${e.color}; border-radius: 2px;"></span>
|
|
628
|
+
<span>${e.name}: ${e.formattedValue}</span>
|
|
629
|
+
</div>`;
|
|
630
|
+
}), this._cachedTooltipContent.set(a, r)), this._showTooltipAt(e.clientX, e.clientY, r);
|
|
631
|
+
}
|
|
632
|
+
}, s = (e) => {
|
|
633
|
+
if (!this._chartContainer || !this._svg) return;
|
|
634
|
+
let n = e.touches[0];
|
|
635
|
+
if (!n) return;
|
|
636
|
+
let r = this._svg.getBoundingClientRect(), i = n.clientX - r.left, a = n.clientY - r.top;
|
|
637
|
+
if (i < t.x || i > t.x + t.width || a < t.y || a > t.y + t.height) {
|
|
638
|
+
this._pinnedXValue === null && (this._hideTooltip(), this._hidePlotPoints(), this._hideVerticalLine(), this._activeXValue = null);
|
|
639
|
+
return;
|
|
640
|
+
}
|
|
641
|
+
let o = this._findNearestXValue(i);
|
|
642
|
+
if (!o) {
|
|
643
|
+
this._pinnedXValue === null && (this._hideTooltip(), this._hidePlotPoints(), this._hideVerticalLine(), this._activeXValue = null);
|
|
644
|
+
return;
|
|
645
|
+
}
|
|
646
|
+
if (this._pinnedXValue === o) this._pinnedXValue = null, this._hideTooltip(), this._hidePlotPoints(), this._hideVerticalLine(), this._activeXValue = null;
|
|
647
|
+
else {
|
|
648
|
+
this._pinnedXValue = o, this._activeXValue = o;
|
|
649
|
+
let e = this._getAllDatasetsAtX(o);
|
|
650
|
+
if (e.length === 0) return;
|
|
651
|
+
this._showPlotPointsForX(o), this._showVerticalLineAtX(o, t);
|
|
652
|
+
let r = this._cachedTooltipContent.get(o);
|
|
653
|
+
r || (r = this._tooltipXHeadingHtml(o), e.forEach((e) => {
|
|
654
|
+
r += `<div style="display: flex; align-items: center; gap: 6px; margin-top: 4px;">
|
|
655
|
+
<span style="display: inline-block; width: 12px; height: 12px; background-color: ${e.color}; border-radius: 2px;"></span>
|
|
656
|
+
<span>${e.name}: ${e.formattedValue}</span>
|
|
657
|
+
</div>`;
|
|
658
|
+
}), this._cachedTooltipContent.set(o, r)), this._showTooltipAt(n.clientX, n.clientY, r);
|
|
659
|
+
}
|
|
660
|
+
}, c = (n) => {
|
|
661
|
+
if (!this._chartContainer || !this._svg) return;
|
|
662
|
+
let r = n.touches[0];
|
|
663
|
+
r && (this._tooltipAnimationFrame !== null && cancelAnimationFrame(this._tooltipAnimationFrame), this._tooltipAnimationFrame = requestAnimationFrame(() => {
|
|
664
|
+
if (this._tooltipAnimationFrame = null, !this._svg) return;
|
|
665
|
+
let n = this._svg.getBoundingClientRect(), i = r.clientX - n.left, a = r.clientY - n.top;
|
|
666
|
+
if (i < t.x || i > t.x + t.width || a < t.y || a > t.y + t.height) {
|
|
667
|
+
if (this._pinnedXValue === null) this._hideTooltip(), this._hidePlotPoints(), this._hideVerticalLine(), this._activeXValue = null;
|
|
668
|
+
else {
|
|
669
|
+
let e = this._pinnedXValue, n = this._getAllDatasetsAtX(e);
|
|
670
|
+
if (n.length > 0) {
|
|
671
|
+
this._activeXValue = e, this._showPlotPointsForX(e), this._showVerticalLineAtX(e, t);
|
|
672
|
+
let i = this._cachedTooltipContent.get(e);
|
|
673
|
+
i || (i = this._tooltipXHeadingHtml(e), n.forEach((e) => {
|
|
674
|
+
i += `<div style="display: flex; align-items: center; gap: 6px; margin-top: 4px;">
|
|
675
|
+
<span style="display: inline-block; width: 12px; height: 12px; background-color: ${e.color}; border-radius: 2px;"></span>
|
|
676
|
+
<span>${e.name}: ${e.formattedValue}</span>
|
|
677
|
+
</div>`;
|
|
678
|
+
}), this._cachedTooltipContent.set(e, i)), this._updateTooltipPosition(r.clientX, r.clientY), this._lastTooltipContent !== i && this._showTooltipAt(r.clientX, r.clientY, i);
|
|
679
|
+
}
|
|
680
|
+
}
|
|
681
|
+
return;
|
|
682
|
+
}
|
|
683
|
+
if (this._pinnedXValue !== null) {
|
|
684
|
+
let e = this._pinnedXValue, n = this._getAllDatasetsAtX(e);
|
|
685
|
+
if (n.length > 0) {
|
|
686
|
+
this._activeXValue = e, this._showPlotPointsForX(e), this._showVerticalLineAtX(e, t);
|
|
687
|
+
let i = this._cachedTooltipContent.get(e);
|
|
688
|
+
i || (i = this._tooltipXHeadingHtml(e), n.forEach((e) => {
|
|
689
|
+
i += `<div style="display: flex; align-items: center; gap: 6px; margin-top: 4px;">
|
|
690
|
+
<span style="display: inline-block; width: 12px; height: 12px; background-color: ${e.color}; border-radius: 2px;"></span>
|
|
691
|
+
<span>${e.name}: ${e.formattedValue}</span>
|
|
692
|
+
</div>`;
|
|
693
|
+
}), this._cachedTooltipContent.set(e, i)), this._updateTooltipPosition(r.clientX, r.clientY), this._lastTooltipContent !== i && this._showTooltipAt(r.clientX, r.clientY, i);
|
|
694
|
+
return;
|
|
695
|
+
}
|
|
696
|
+
}
|
|
697
|
+
let o = this._findNearestXValue(i);
|
|
698
|
+
if (!o) {
|
|
699
|
+
this._pinnedXValue === null && (this._hideTooltip(), this._hidePlotPoints(), this._hideVerticalLine(), this._activeXValue = null);
|
|
700
|
+
return;
|
|
701
|
+
}
|
|
702
|
+
if (this._activeXValue === o) {
|
|
703
|
+
this._updateTooltipPosition(r.clientX, r.clientY);
|
|
704
|
+
return;
|
|
705
|
+
}
|
|
706
|
+
let s = this._getAllDatasetsAtX(o);
|
|
707
|
+
if (s.length === 0) {
|
|
708
|
+
this._hideTooltip(), this._hidePlotPoints(), this._hideVerticalLine();
|
|
709
|
+
return;
|
|
710
|
+
}
|
|
711
|
+
this._activeXValue = o, this._showPlotPointsForX(o), this._showVerticalLineAtX(o, t);
|
|
712
|
+
let c = this._cachedTooltipContent.get(o);
|
|
713
|
+
if (!c) {
|
|
714
|
+
if (c = this._tooltipXHeadingHtml(o), s.forEach((e) => {
|
|
715
|
+
c += `<div style="display: flex; align-items: center; gap: 6px; margin-top: 4px;">
|
|
716
|
+
<span style="display: inline-block; width: 12px; height: 12px; background-color: ${e.color}; border-radius: 2px;"></span>
|
|
717
|
+
<span>${e.name}: ${e.formattedValue}</span>
|
|
718
|
+
</div>`;
|
|
719
|
+
}), this._cachedTooltipContent.size >= e.MAX_CACHE_SIZE) {
|
|
720
|
+
let e = this._cachedTooltipContent.keys().next().value;
|
|
721
|
+
e !== void 0 && this._cachedTooltipContent.delete(e);
|
|
722
|
+
}
|
|
723
|
+
this._cachedTooltipContent.set(o, c);
|
|
724
|
+
}
|
|
725
|
+
this._showTooltipAt(r.clientX, r.clientY, c);
|
|
726
|
+
}));
|
|
727
|
+
}, l = () => {
|
|
728
|
+
this._tooltipAnimationFrame !== null && (cancelAnimationFrame(this._tooltipAnimationFrame), this._tooltipAnimationFrame = null), this._pinnedXValue === null && setTimeout(() => {
|
|
729
|
+
this._hideTooltip(), this._hidePlotPoints(), this._hideVerticalLine(), this._activeXValue = null;
|
|
730
|
+
}, 500);
|
|
731
|
+
};
|
|
732
|
+
this._chartClickOutsideHandler || (this._chartClickOutsideHandler = (e) => {
|
|
733
|
+
if (this._pinnedXValue === null) return;
|
|
734
|
+
let t = e.target;
|
|
735
|
+
this._svg && !this._svg.contains(t) && (this._pinnedXValue = null, this._hideTooltip(), this._hidePlotPoints(), this._hideVerticalLine(), this._activeXValue = null);
|
|
736
|
+
}, document.addEventListener("click", this._chartClickOutsideHandler, !0)), this._svg.addEventListener("mousemove", i), this._svg.addEventListener("mouseleave", a), this._svg.addEventListener("click", o), this._svg.addEventListener("touchstart", s, { passive: !0 }), this._svg.addEventListener("touchmove", c, { passive: !0 }), this._svg.addEventListener("touchend", l), this._chartTooltipMouseMove = i, this._chartTooltipMouseLeave = a, this._chartTooltipClick = o, this._chartTooltipTouchStart = s, this._chartTooltipTouchMove = c, this._chartTooltipTouchEnd = l;
|
|
737
|
+
}
|
|
738
|
+
_updateTooltipPosition(e, t) {
|
|
739
|
+
if (!this._tooltip || this._tooltip.style.display === "none" || this._tooltip.style.opacity === "0") return;
|
|
740
|
+
let n = this._tooltip.getBoundingClientRect(), r = window.innerWidth, i = window.innerHeight, a = e + 10, o = t - n.height - 8;
|
|
741
|
+
a + n.width > r && (a = e - n.width - 10), a < 0 && (a = 10), o < 0 && (o = t + 20), o + n.height > i && (o = t - n.height - 8, o < 0 && (o = 10));
|
|
742
|
+
let s = `${a}px`, c = `${o}px`;
|
|
743
|
+
this._tooltip.style.left !== s && (this._tooltip.style.left = s), this._tooltip.style.top !== c && (this._tooltip.style.top = c);
|
|
744
|
+
}
|
|
745
|
+
_scaleX(e, t) {
|
|
746
|
+
let n = this._getXValues();
|
|
747
|
+
if (n.length === 0) return t.x;
|
|
748
|
+
let r = n.indexOf(e);
|
|
749
|
+
if (r === -1) return t.x;
|
|
750
|
+
let i = t.width / Math.max(1, n.length - 1);
|
|
751
|
+
return t.x + r * i;
|
|
752
|
+
}
|
|
753
|
+
_scaleY(e, t) {
|
|
754
|
+
let n = this._getYRange();
|
|
755
|
+
if (n.max === n.min) return t.y + t.height / 2;
|
|
756
|
+
let r = (e - n.min) / (n.max - n.min);
|
|
757
|
+
return t.y + t.height - r * t.height;
|
|
758
|
+
}
|
|
759
|
+
_getDatasetColor(e, t, n) {
|
|
760
|
+
return n === void 0 ? e.color || this._defaultColors[t % this._defaultColors.length] : e.color || this._defaultColors[n % this._defaultColors.length];
|
|
761
|
+
}
|
|
762
|
+
_getContrastColor(e) {
|
|
763
|
+
let t = e.replace("#", ""), n = parseInt(t.substring(0, 2), 16), r = parseInt(t.substring(2, 4), 16), i = parseInt(t.substring(4, 6), 16);
|
|
764
|
+
return (.299 * n + .587 * r + .114 * i) / 255 > .5 ? "#000000" : "#ffffff";
|
|
765
|
+
}
|
|
766
|
+
_calculateRotatedLabelHeight() {
|
|
767
|
+
if (this._rotatedLabelHeight = 0, !this._chartData || !this._showGrid) return;
|
|
768
|
+
let e = this._getXValues();
|
|
769
|
+
if (e.length <= 1) return;
|
|
770
|
+
let t = {
|
|
771
|
+
width: this._width - (this._showGrid ? 60 : 0) - 0,
|
|
772
|
+
height: this._height - (this._showLegend ? Math.max(this._legendHeight, 60) : 0) - 0,
|
|
773
|
+
x: this._showGrid ? 60 : 0,
|
|
774
|
+
y: 0
|
|
775
|
+
}, n = this._chartType === "bar", r = [];
|
|
776
|
+
e.forEach((e) => {
|
|
777
|
+
let i = n ? this._scaleXForBarChart(e, t) : this._scaleX(e, t);
|
|
778
|
+
r.push(i);
|
|
779
|
+
});
|
|
780
|
+
let i = document.createElement("canvas").getContext("2d");
|
|
781
|
+
if (!i) return;
|
|
782
|
+
i.font = "12px system-ui, -apple-system, sans-serif";
|
|
783
|
+
let a = [];
|
|
784
|
+
e.forEach((e) => {
|
|
785
|
+
let t = this._formatXAxisValue(e), n = i.measureText(t);
|
|
786
|
+
a.push(n.width);
|
|
787
|
+
});
|
|
788
|
+
let o = !0;
|
|
789
|
+
for (let t = 1; t < e.length; t++) {
|
|
790
|
+
let e = r[t] - r[t - 1], n = a[t - 1] / 2 + a[t] / 2 + 10;
|
|
791
|
+
if (e < Math.max(n, 80)) {
|
|
792
|
+
o = !1;
|
|
793
|
+
break;
|
|
794
|
+
}
|
|
795
|
+
}
|
|
796
|
+
if (!o) {
|
|
797
|
+
let e = (Math.max(...a) + 12 * 1.2) * .707;
|
|
798
|
+
this._rotatedLabelHeight = Math.ceil(e) + 10;
|
|
799
|
+
}
|
|
800
|
+
}
|
|
801
|
+
_renderGrid(e) {
|
|
802
|
+
if (!this._svg || !this._showGrid) return;
|
|
803
|
+
let t = document.createElementNS("http://www.w3.org/2000/svg", "g");
|
|
804
|
+
t.setAttribute("class", "chart-grid");
|
|
805
|
+
let n = this._getYRange(), r = Math.floor(e.height / 35), i = Math.min(5, r);
|
|
806
|
+
for (let r = 0; r <= i; r++) {
|
|
807
|
+
let a = e.y + e.height / i * r, o = document.createElementNS("http://www.w3.org/2000/svg", "line");
|
|
808
|
+
o.setAttribute("x1", e.x.toString()), o.setAttribute("y1", a.toString()), o.setAttribute("x2", (e.x + e.width).toString()), o.setAttribute("y2", a.toString()), o.setAttribute("stroke", "#e5e7eb"), o.setAttribute("stroke-width", "1"), o.setAttribute("stroke-dasharray", "2,2"), document.documentElement.classList.contains("dark") && o.setAttribute("stroke", "#374151"), t.appendChild(o);
|
|
809
|
+
let s = n.max - (n.max - n.min) / i * r, c = document.createElementNS("http://www.w3.org/2000/svg", "text"), l = a + 4;
|
|
810
|
+
r === 0 && (l = a + 12), c.setAttribute("x", "5"), c.setAttribute("y", l.toString()), c.setAttribute("text-anchor", "start"), c.setAttribute("fill", "#6b7280"), c.setAttribute("font-size", "12"), c.textContent = this._formatYAxisValue(s), document.documentElement.classList.contains("dark") && c.setAttribute("fill", "#9ca3af"), t.appendChild(c);
|
|
811
|
+
}
|
|
812
|
+
let a = this._getXValues();
|
|
813
|
+
if (a.length === 0) {
|
|
814
|
+
this._svg.appendChild(t);
|
|
815
|
+
return;
|
|
816
|
+
}
|
|
817
|
+
let o = this._chartType === "bar", s = [];
|
|
818
|
+
a.forEach((t) => {
|
|
819
|
+
let n = o ? this._scaleXForBarChart(t, e) : this._scaleX(t, e);
|
|
820
|
+
s.push(n);
|
|
821
|
+
});
|
|
822
|
+
let c = document.createElement("canvas").getContext("2d"), l = !1, u = Array(a.length).fill(!0);
|
|
823
|
+
if (c && a.length > 1) {
|
|
824
|
+
c.font = "12px system-ui, -apple-system, sans-serif";
|
|
825
|
+
let e = [];
|
|
826
|
+
a.forEach((t) => {
|
|
827
|
+
let n = this._formatXAxisValue(t), r = c.measureText(n);
|
|
828
|
+
e.push(r.width);
|
|
829
|
+
});
|
|
830
|
+
let t = !0;
|
|
831
|
+
for (let n = 1; n < a.length; n++) {
|
|
832
|
+
let r = s[n] - s[n - 1], i = e[n - 1] / 2 + e[n] / 2 + 10;
|
|
833
|
+
if (r < Math.max(i, 80)) {
|
|
834
|
+
t = !1;
|
|
835
|
+
break;
|
|
836
|
+
}
|
|
837
|
+
}
|
|
838
|
+
if (!t) {
|
|
839
|
+
l = !0;
|
|
840
|
+
let t = 12 * 1.2;
|
|
841
|
+
if (this._rotatedLabelHeight === 0) {
|
|
842
|
+
let n = (Math.max(...e) + t) * .707;
|
|
843
|
+
this._rotatedLabelHeight = Math.ceil(n) + 10;
|
|
844
|
+
}
|
|
845
|
+
let n = t * 1.5, r = !0;
|
|
846
|
+
for (let e = 1; e < a.length; e++) if (s[e] - s[e - 1] < n) {
|
|
847
|
+
r = !1;
|
|
848
|
+
break;
|
|
849
|
+
}
|
|
850
|
+
if (!r) {
|
|
851
|
+
let e = n;
|
|
852
|
+
u = Array(a.length).fill(!1);
|
|
853
|
+
let t = -Infinity;
|
|
854
|
+
a.length > 0 && (u[0] = !0, t = s[0]);
|
|
855
|
+
for (let n = 1; n < a.length - 1; n++) {
|
|
856
|
+
let r = s[n];
|
|
857
|
+
r - t >= e && (u[n] = !0, t = r);
|
|
858
|
+
}
|
|
859
|
+
if (a.length > 1) {
|
|
860
|
+
let n = s[a.length - 1];
|
|
861
|
+
if (n - t >= e) u[a.length - 1] = !0;
|
|
862
|
+
else {
|
|
863
|
+
for (; n - t < e;) {
|
|
864
|
+
let e = !1;
|
|
865
|
+
for (let n = a.length - 2; n >= 0; n--) if (u[n]) {
|
|
866
|
+
if (u[n] = !1, n > 0) {
|
|
867
|
+
for (let r = n - 1; r >= 0; r--) if (u[r]) {
|
|
868
|
+
t = s[r], e = !0;
|
|
869
|
+
break;
|
|
870
|
+
}
|
|
871
|
+
e || (t = s[0]);
|
|
872
|
+
} else t = s[0];
|
|
873
|
+
e = !0;
|
|
874
|
+
break;
|
|
875
|
+
}
|
|
876
|
+
if (!e) break;
|
|
877
|
+
}
|
|
878
|
+
n - t >= e && (u[a.length - 1] = !0);
|
|
879
|
+
}
|
|
880
|
+
}
|
|
881
|
+
}
|
|
882
|
+
}
|
|
883
|
+
} else u = Array(a.length).fill(!1), a.length > 0 && (u[0] = !0), a.length > 1 && (u[a.length - 1] = !0), this._rotatedLabelHeight = 0;
|
|
884
|
+
l || (this._rotatedLabelHeight = 0), a.forEach((n, r) => {
|
|
885
|
+
if (u[r]) {
|
|
886
|
+
let i = s[r], o = document.createElementNS("http://www.w3.org/2000/svg", "line");
|
|
887
|
+
o.setAttribute("x1", i.toString()), o.setAttribute("y1", e.y.toString()), o.setAttribute("x2", i.toString()), o.setAttribute("y2", (e.y + e.height).toString()), o.setAttribute("stroke", "#e5e7eb"), o.setAttribute("stroke-width", "1"), o.setAttribute("stroke-dasharray", "2,2"), document.documentElement.classList.contains("dark") && o.setAttribute("stroke", "#374151"), t.appendChild(o);
|
|
888
|
+
let c = document.createElementNS("http://www.w3.org/2000/svg", "text"), u = i, d = "middle";
|
|
889
|
+
if (!l) {
|
|
890
|
+
if (r === 0) {
|
|
891
|
+
let t = e.x;
|
|
892
|
+
u = Math.max(i, t), d = "start";
|
|
893
|
+
} else if (r === a.length - 1) {
|
|
894
|
+
let t = e.x + e.width;
|
|
895
|
+
u = Math.min(i, t), d = "end";
|
|
896
|
+
}
|
|
897
|
+
} else if (d = "end", r === a.length - 1) {
|
|
898
|
+
let t = document.createElement("canvas").getContext("2d");
|
|
899
|
+
if (t) {
|
|
900
|
+
t.font = "12px system-ui, -apple-system, sans-serif";
|
|
901
|
+
let r = this._formatXAxisValue(n), a = t.measureText(r).width * .707, o = e.x + e.width + 100;
|
|
902
|
+
u = Math.min(i, o - a);
|
|
903
|
+
}
|
|
904
|
+
}
|
|
905
|
+
c.setAttribute("x", u.toString());
|
|
906
|
+
let f = (this._rotatedLabelHeight > 0 ? 30 : 20) + this._rotatedLabelHeight + 12, p = f;
|
|
907
|
+
this._showLegend && (p = f + 20 + Math.max(this._legendHeight, 60));
|
|
908
|
+
let m = (this._height - e.y - e.height) / p, h = (l ? 30 : 20) * m, g = e.y + e.height + h;
|
|
909
|
+
c.setAttribute("y", g.toString()), c.setAttribute("text-anchor", d), c.setAttribute("fill", "#6b7280"), c.setAttribute("font-size", "12"), l && c.setAttribute("transform", `rotate(-45 ${u} ${g})`), c.textContent = this._formatXAxisValue(n), document.documentElement.classList.contains("dark") && c.setAttribute("fill", "#9ca3af"), t.appendChild(c);
|
|
910
|
+
}
|
|
911
|
+
}), this._svg.appendChild(t);
|
|
912
|
+
}
|
|
913
|
+
_buildMonotoneXLinePathD(e) {
|
|
914
|
+
let t = (e) => e < 0 ? -1 : 1, n = (e, n, r, i, a, o) => {
|
|
915
|
+
let s = r - e, c = a - r, l = (i - n) / (s || c < 0 && -0), u = (o - i) / (c || s < 0 && -0), d = (l * c + u * s) / (s + c || 1e-12);
|
|
916
|
+
return (t(l) + t(u)) * Math.min(Math.abs(l), Math.abs(u), .5 * Math.abs(d)) || 0;
|
|
917
|
+
}, r = (e, t, n, r, i) => {
|
|
918
|
+
let a = n - e;
|
|
919
|
+
return a ? (3 * ((r - t) / a) - i) / 2 : i;
|
|
920
|
+
}, i = (e, t, n, r, i, a, o) => {
|
|
921
|
+
let s = (r - t) / 3;
|
|
922
|
+
e.push(`C ${t + s} ${n + s * a} ${r - s} ${i - s * o} ${r} ${i}`);
|
|
923
|
+
}, a = [];
|
|
924
|
+
for (let t of e) {
|
|
925
|
+
let e = a[a.length - 1];
|
|
926
|
+
(!e || e.x !== t.x || e.y !== t.y) && a.push(t);
|
|
927
|
+
}
|
|
928
|
+
if (a.length === 0) return "";
|
|
929
|
+
if (a.length === 1) return `M ${a[0].x} ${a[0].y}`;
|
|
930
|
+
let o = [], s = NaN, c = NaN, l = NaN, u = NaN, d = NaN, f = 0;
|
|
931
|
+
for (let e of a) {
|
|
932
|
+
let t = e.x, a = e.y;
|
|
933
|
+
if (!(t === l && a === u)) switch (f) {
|
|
934
|
+
case 0:
|
|
935
|
+
o.push(`M ${t} ${a}`), s = t, c = a, l = t, u = a, f = 1;
|
|
936
|
+
break;
|
|
937
|
+
case 1:
|
|
938
|
+
l = t, u = a, f = 2;
|
|
939
|
+
break;
|
|
940
|
+
case 2: {
|
|
941
|
+
let e = n(s, c, l, u, t, a);
|
|
942
|
+
i(o, s, c, l, u, r(s, c, l, u, e), e), s = l, c = u, l = t, u = a, d = e, f = 3;
|
|
943
|
+
break;
|
|
944
|
+
}
|
|
945
|
+
default: {
|
|
946
|
+
let e = n(s, c, l, u, t, a);
|
|
947
|
+
i(o, s, c, l, u, d, e), s = l, c = u, l = t, u = a, d = e;
|
|
948
|
+
}
|
|
949
|
+
}
|
|
950
|
+
}
|
|
951
|
+
return f === 2 ? o.push(`L ${l} ${u}`) : f === 3 && i(o, s, c, l, u, d, r(s, c, l, u, d)), o.join(" ");
|
|
952
|
+
}
|
|
953
|
+
_stripLeadingMoveTo(e) {
|
|
954
|
+
return e.replace(/^M\s+[\d.-]+\s+[\d.-]+\s*/i, "").trim();
|
|
955
|
+
}
|
|
956
|
+
_buildAreaFillPathD(e, t) {
|
|
957
|
+
if (e.length === 0) return "";
|
|
958
|
+
let n = e[e.length - 1];
|
|
959
|
+
if (e.length === 1) return `M ${e[0].x} ${t} L ${e[0].x} ${e[0].y} L ${e[0].x} ${t} Z`;
|
|
960
|
+
if (this._curveTension <= 0) {
|
|
961
|
+
let r = [`M ${e[0].x} ${t}`, `L ${e[0].x} ${e[0].y}`];
|
|
962
|
+
for (let t = 1; t < e.length; t++) r.push(`L ${e[t].x} ${e[t].y}`);
|
|
963
|
+
return r.push(`L ${n.x} ${t}`, "Z"), r.join(" ");
|
|
964
|
+
}
|
|
965
|
+
let r = this._buildMonotoneXLinePathD(e), i = this._stripLeadingMoveTo(r);
|
|
966
|
+
return `M ${e[0].x} ${t} L ${e[0].x} ${e[0].y} ${i} L ${n.x} ${t} Z`;
|
|
967
|
+
}
|
|
968
|
+
_buildSmoothLinePathD(e) {
|
|
969
|
+
if (e.length === 0) return "";
|
|
970
|
+
if (e.length === 1) return `M ${e[0].x} ${e[0].y}`;
|
|
971
|
+
if (this._curveTension <= 0) {
|
|
972
|
+
let t = [`M ${e[0].x} ${e[0].y}`];
|
|
973
|
+
for (let n = 1; n < e.length; n++) t.push(`L ${e[n].x} ${e[n].y}`);
|
|
974
|
+
return t.join(" ");
|
|
975
|
+
}
|
|
976
|
+
return this._buildMonotoneXLinePathD(e);
|
|
977
|
+
}
|
|
978
|
+
_renderLineChart() {
|
|
979
|
+
if (!this._svg || !this._chartData) return;
|
|
980
|
+
let e = this._getChartBounds();
|
|
981
|
+
this._renderGrid(e);
|
|
982
|
+
let t = document.createElementNS("http://www.w3.org/2000/svg", "g");
|
|
983
|
+
t.setAttribute("class", "chart-data");
|
|
984
|
+
let n = document.createDocumentFragment();
|
|
985
|
+
this._chartData.datasets.forEach((t, r) => {
|
|
986
|
+
if (!this._isDatasetVisible(t, r)) return;
|
|
987
|
+
let i = this._getDatasetColor(t, r), a = document.createElementNS("http://www.w3.org/2000/svg", "path"), o = t.data.map((t) => ({
|
|
988
|
+
x: this._scaleX(t.x, e),
|
|
989
|
+
y: this._scaleY(t.y, e)
|
|
990
|
+
}));
|
|
991
|
+
o.length !== 0 && (a.setAttribute("d", this._buildSmoothLinePathD(o)), a.setAttribute("fill", "none"), a.setAttribute("stroke", i), a.setAttribute("stroke-width", "2"), a.setAttribute("stroke-linecap", "round"), a.setAttribute("stroke-linejoin", "round"), n.appendChild(a), t.data.forEach((a) => {
|
|
992
|
+
let o = document.createElementNS("http://www.w3.org/2000/svg", "circle"), s = this._scaleX(a.x, e), c = this._scaleY(a.y, e);
|
|
993
|
+
o.setAttribute("cx", s.toString()), o.setAttribute("cy", c.toString()), o.setAttribute("r", "4"), o.setAttribute("fill", i);
|
|
994
|
+
let l = document.documentElement.classList.contains("dark");
|
|
995
|
+
o.setAttribute("stroke", l ? "#1f2937" : "#fff"), o.setAttribute("stroke-width", "2"), o.setAttribute("class", "chart-point"), o.setAttribute("data-dataset", r.toString()), o.setAttribute("data-x", String(a.x)), o.setAttribute("data-y", a.y.toString()), o.setAttribute("data-name", t.name), o.style.opacity = "0", o.style.pointerEvents = "none";
|
|
996
|
+
let u = String(a.x);
|
|
997
|
+
this._plotPoints.has(u) || this._plotPoints.set(u, []), this._plotPoints.get(u).push(o), n.appendChild(o);
|
|
998
|
+
}));
|
|
999
|
+
}), t.appendChild(n), this._svg.appendChild(t);
|
|
1000
|
+
}
|
|
1001
|
+
_scaleXForBarChart(e, t) {
|
|
1002
|
+
let n = this._getXValues();
|
|
1003
|
+
if (n.length === 0) return t.x;
|
|
1004
|
+
let r = n.indexOf(e);
|
|
1005
|
+
if (r === -1) return t.x;
|
|
1006
|
+
let i = n.length + 1, a = t.width / i;
|
|
1007
|
+
return t.x + (r + 1) * a;
|
|
1008
|
+
}
|
|
1009
|
+
_renderBarChart() {
|
|
1010
|
+
if (!this._svg || !this._chartData) return;
|
|
1011
|
+
let e = this._getChartBounds();
|
|
1012
|
+
this._renderGrid(e);
|
|
1013
|
+
let t = document.createElementNS("http://www.w3.org/2000/svg", "g");
|
|
1014
|
+
t.setAttribute("class", "chart-data");
|
|
1015
|
+
let n = document.createDocumentFragment(), r = this._getXValues(), i = this._chartData.datasets.filter((e, t) => this._isDatasetVisible(e, t)).length, a = r.length;
|
|
1016
|
+
if (a === 0) return;
|
|
1017
|
+
let o = [];
|
|
1018
|
+
r.forEach((t) => {
|
|
1019
|
+
o.push(this._scaleXForBarChart(t, e));
|
|
1020
|
+
}), o.sort((e, t) => e - t);
|
|
1021
|
+
let s = e.width;
|
|
1022
|
+
if (a > 1) for (let e = 0; e < o.length - 1; e++) {
|
|
1023
|
+
let t = o[e + 1] - o[e];
|
|
1024
|
+
t > 0 && t < s && (s = t);
|
|
1025
|
+
}
|
|
1026
|
+
else s = e.width * .5;
|
|
1027
|
+
let c = s * .7, l = .2, u = c / ((1 + l) * i - l), d = u * l, f = (u + d) * i - d;
|
|
1028
|
+
if (f > c) {
|
|
1029
|
+
let e = c / f;
|
|
1030
|
+
u *= e, d = u * l, f = (u + d) * i - d;
|
|
1031
|
+
}
|
|
1032
|
+
let p = 0;
|
|
1033
|
+
this._chartData.datasets.forEach((t, r) => {
|
|
1034
|
+
if (!this._isDatasetVisible(t, r)) return;
|
|
1035
|
+
let i = this._getDatasetColor(t, r), a = -f / 2 + (u + d) * p;
|
|
1036
|
+
p++, t.data.forEach((o) => {
|
|
1037
|
+
let s = this._scaleXForBarChart(o.x, e), c = this._scaleY(o.y, e), l = e.y + e.height - c, d = s + a, f = document.createElementNS("http://www.w3.org/2000/svg", "rect");
|
|
1038
|
+
f.setAttribute("x", d.toString()), f.setAttribute("y", c.toString()), f.setAttribute("width", u.toString()), f.setAttribute("height", l.toString()), f.setAttribute("fill", i), f.setAttribute("rx", "2"), f.setAttribute("class", "chart-bar"), f.setAttribute("data-dataset", r.toString()), f.setAttribute("data-x", String(o.x)), f.setAttribute("data-y", o.y.toString()), f.setAttribute("data-name", t.name), f.style.cursor = "pointer", this._showTooltip && f.addEventListener("mouseenter", (e) => {
|
|
1039
|
+
let t = this._getAllDatasetsAtX(o.x), n = this._tooltipXHeadingHtml(o.x);
|
|
1040
|
+
t.forEach((e) => {
|
|
1041
|
+
n += `<div style="display: flex; align-items: center; gap: 6px; margin-top: 4px;">
|
|
1042
|
+
<span style="display: inline-block; width: 12px; height: 12px; background-color: ${e.color}; border-radius: 2px;"></span>
|
|
1043
|
+
<span>${e.name}: ${e.formattedValue}</span>
|
|
1044
|
+
</div>`;
|
|
1045
|
+
}), this._showTooltipAt(e.clientX, e.clientY, n);
|
|
1046
|
+
}), n.appendChild(f);
|
|
1047
|
+
});
|
|
1048
|
+
}), t.appendChild(n), this._svg.appendChild(t);
|
|
1049
|
+
}
|
|
1050
|
+
_renderAreaChart() {
|
|
1051
|
+
if (!this._svg || !this._chartData) return;
|
|
1052
|
+
let e = this._getChartBounds();
|
|
1053
|
+
this._renderGrid(e);
|
|
1054
|
+
let t = document.createElementNS("http://www.w3.org/2000/svg", "g");
|
|
1055
|
+
t.setAttribute("class", "chart-data");
|
|
1056
|
+
let n = document.createDocumentFragment();
|
|
1057
|
+
this._chartData.datasets.forEach((t, r) => {
|
|
1058
|
+
if (!this._isDatasetVisible(t, r)) return;
|
|
1059
|
+
let i = this._getDatasetColor(t, r), a = t.data.map((t) => ({
|
|
1060
|
+
x: this._scaleX(t.x, e),
|
|
1061
|
+
y: this._scaleY(t.y, e)
|
|
1062
|
+
}));
|
|
1063
|
+
if (a.length === 0) return;
|
|
1064
|
+
let o = e.y + e.height, s = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
1065
|
+
s.setAttribute("d", this._buildAreaFillPathD(a, o)), s.setAttribute("fill", i), s.setAttribute("fill-opacity", "0.3"), n.appendChild(s);
|
|
1066
|
+
let c = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
1067
|
+
c.setAttribute("d", this._buildSmoothLinePathD(a)), c.setAttribute("fill", "none"), c.setAttribute("stroke", i), c.setAttribute("stroke-width", "2"), c.setAttribute("stroke-linecap", "round"), c.setAttribute("stroke-linejoin", "round"), n.appendChild(c), t.data.forEach((a) => {
|
|
1068
|
+
let o = document.createElementNS("http://www.w3.org/2000/svg", "circle"), s = this._scaleX(a.x, e), c = this._scaleY(a.y, e);
|
|
1069
|
+
o.setAttribute("cx", s.toString()), o.setAttribute("cy", c.toString()), o.setAttribute("r", "4"), o.setAttribute("fill", i);
|
|
1070
|
+
let l = document.documentElement.classList.contains("dark");
|
|
1071
|
+
o.setAttribute("stroke", l ? "#1f2937" : "#fff"), o.setAttribute("stroke-width", "2"), o.setAttribute("class", "chart-point"), o.setAttribute("data-dataset", r.toString()), o.setAttribute("data-x", String(a.x)), o.setAttribute("data-y", a.y.toString()), o.setAttribute("data-name", t.name), o.style.opacity = "0", o.style.pointerEvents = "none";
|
|
1072
|
+
let u = String(a.x);
|
|
1073
|
+
this._plotPoints.has(u) || this._plotPoints.set(u, []), this._plotPoints.get(u).push(o), n.appendChild(o);
|
|
1074
|
+
});
|
|
1075
|
+
}), t.appendChild(n), this._svg.appendChild(t);
|
|
1076
|
+
}
|
|
1077
|
+
_renderPieChart() {
|
|
1078
|
+
if (!this._svg || !this._chartData) return;
|
|
1079
|
+
let e = this._getChartBounds(), t = e.x + e.width / 2, n = e.y + e.height / 2, r = Math.min(e.width, e.height) / 2 - 20, i = this._chartData.datasets[0];
|
|
1080
|
+
if (!i || !i.data || i.data.length === 0) return;
|
|
1081
|
+
let a = i.data.reduce((e, t) => e + t.y, 0);
|
|
1082
|
+
if (a === 0) return;
|
|
1083
|
+
let o = document.createElementNS("http://www.w3.org/2000/svg", "g");
|
|
1084
|
+
o.setAttribute("class", "chart-data"), this._pieChartGroup = o, this._pieChartClickOutsideHandler || (this._pieChartClickOutsideHandler = (e) => {
|
|
1085
|
+
if (!this._pieChartTooltipShown) return;
|
|
1086
|
+
let t = e.target;
|
|
1087
|
+
this._pieChartGroup && !this._pieChartGroup.contains(t) && (this._pieChartTooltipShown = !1, this._hideTooltip());
|
|
1088
|
+
}, document.addEventListener("click", this._pieChartClickOutsideHandler, !0));
|
|
1089
|
+
let s = document.createElementNS("http://www.w3.org/2000/svg", "circle");
|
|
1090
|
+
s.setAttribute("cx", t.toString()), s.setAttribute("cy", n.toString()), s.setAttribute("r", r.toString()), s.setAttribute("fill", "transparent"), s.setAttribute("pointer-events", "none"), o.appendChild(s);
|
|
1091
|
+
let c = -Math.PI / 2;
|
|
1092
|
+
i.data.forEach((e, s) => {
|
|
1093
|
+
let l = e.y, u = l / a * 100, d = l / a * 2 * Math.PI, f = e.color || this._getDatasetColor(i, 0, s), p = document.createElementNS("http://www.w3.org/2000/svg", "g");
|
|
1094
|
+
p.setAttribute("class", "chart-pie-slice-group"), p.setAttribute("data-index", s.toString()), p.style.cursor = "pointer", p.style.transition = "transform 0.2s ease-out";
|
|
1095
|
+
let m = document.createElementNS("http://www.w3.org/2000/svg", "path"), h = r + 2, g = t + h * Math.cos(c), _ = n + h * Math.sin(c), v = t + h * Math.cos(c + d), y = n + h * Math.sin(c + d), b = d > Math.PI ? 1 : 0, x = [
|
|
1096
|
+
`M ${t} ${n}`,
|
|
1097
|
+
`L ${g} ${_}`,
|
|
1098
|
+
`A ${h} ${h} 0 ${b} 1 ${v} ${y}`,
|
|
1099
|
+
"Z"
|
|
1100
|
+
].join(" ");
|
|
1101
|
+
m.setAttribute("d", x), m.setAttribute("fill", f), m.setAttribute("class", "chart-pie-slice"), m.setAttribute("data-index", s.toString()), m.setAttribute("data-x", String(e.x)), m.setAttribute("data-y", e.y.toString()), m.setAttribute("data-name", i.name), m.setAttribute("data-percentage", u.toFixed(1)), p.appendChild(m);
|
|
1102
|
+
let S = c + d / 2, C = Math.cos(S) * 10, w = Math.sin(S) * 10, T = null, E = null, D = !1;
|
|
1103
|
+
if (p.__chartInstance = this, p.addEventListener("mouseenter", function() {
|
|
1104
|
+
if (E !== null && (clearTimeout(E), E = null), !D) {
|
|
1105
|
+
T !== null && clearTimeout(T);
|
|
1106
|
+
let e = window.setTimeout(() => {
|
|
1107
|
+
D = !0, this.setAttribute("transform", `translate(${C}, ${w})`), T = null, this.__chartInstance && this.__chartInstance._pieChartTimeouts.delete(e);
|
|
1108
|
+
}, 150);
|
|
1109
|
+
T = e, this.__chartInstance && this.__chartInstance._pieChartTimeouts.add(e);
|
|
1110
|
+
}
|
|
1111
|
+
}), p.addEventListener("mouseleave", function() {
|
|
1112
|
+
if (T !== null && (clearTimeout(T), T = null), D) {
|
|
1113
|
+
E !== null && clearTimeout(E);
|
|
1114
|
+
let e = window.setTimeout(() => {
|
|
1115
|
+
D = !1, this.setAttribute("transform", "translate(0, 0)"), E = null, this.__chartInstance && this.__chartInstance._pieChartTimeouts.delete(e);
|
|
1116
|
+
}, 200);
|
|
1117
|
+
E = e, this.__chartInstance && this.__chartInstance._pieChartTimeouts.add(e);
|
|
1118
|
+
}
|
|
1119
|
+
}), p.addEventListener("click", function() {
|
|
1120
|
+
T !== null && (clearTimeout(T), T = null), E !== null && (clearTimeout(E), E = null), D = !0, this.setAttribute("transform", `translate(${C}, ${w})`);
|
|
1121
|
+
}), this._showTooltip) {
|
|
1122
|
+
let t = this._formatValue(l, i), n = `${this._tooltipXHeadingHtml(e.x)}${i.name}: ${t}<br/>${u.toFixed(1)}%`, r = (e) => {
|
|
1123
|
+
this._pieChartTooltipShown = !0, this._showTooltipAt(e.clientX, e.clientY, n);
|
|
1124
|
+
};
|
|
1125
|
+
p.addEventListener("mouseenter", r), p.addEventListener("mousemove", r), p.addEventListener("click", (e) => {
|
|
1126
|
+
e.stopPropagation(), r(e);
|
|
1127
|
+
}), p.addEventListener("mouseleave", () => {
|
|
1128
|
+
this._tooltipHideTimeout = window.setTimeout(() => {
|
|
1129
|
+
this._pieChartTooltipShown = !1, this._hideTooltip();
|
|
1130
|
+
}, 90);
|
|
1131
|
+
});
|
|
1132
|
+
}
|
|
1133
|
+
if (u > 5) {
|
|
1134
|
+
let e = c + d / 2, i = r * .7, a = t + i * Math.cos(e), o = n + i * Math.sin(e), s = this._getContrastColor(f), l = document.createElementNS("http://www.w3.org/2000/svg", "text");
|
|
1135
|
+
l.setAttribute("x", a.toString()), l.setAttribute("y", o.toString()), l.setAttribute("text-anchor", "middle"), l.setAttribute("dominant-baseline", "middle"), l.setAttribute("fill", s), l.setAttribute("font-size", "12"), l.setAttribute("font-weight", "500"), l.textContent = `${u.toFixed(1)}%`, p.appendChild(l);
|
|
1136
|
+
}
|
|
1137
|
+
o.appendChild(p), c += d;
|
|
1138
|
+
}), this._svg.appendChild(o), this._showTooltip && (this._svg.addEventListener("mousemove", (e) => {
|
|
1139
|
+
this._pieChartTooltipShown && this._lastTooltipContent && this._showTooltipAt(e.clientX, e.clientY, this._lastTooltipContent);
|
|
1140
|
+
}), this._svg.addEventListener("mouseleave", () => {
|
|
1141
|
+
this._pieChartTooltipShown = !1, this._hideTooltip();
|
|
1142
|
+
}));
|
|
1143
|
+
}
|
|
1144
|
+
_calculateLegendHeight() {
|
|
1145
|
+
if (!this._chartData) return 0;
|
|
1146
|
+
let e = this._width - 40, t = [];
|
|
1147
|
+
this._chartType === "pie" && this._chartData.datasets.length > 0 ? this._chartData.datasets[0].data.forEach((e) => {
|
|
1148
|
+
t.push({
|
|
1149
|
+
name: String(e.x),
|
|
1150
|
+
row: 0
|
|
1151
|
+
});
|
|
1152
|
+
}) : this._chartData.datasets.forEach((e) => {
|
|
1153
|
+
t.push({
|
|
1154
|
+
name: e.name,
|
|
1155
|
+
row: 0
|
|
1156
|
+
});
|
|
1157
|
+
});
|
|
1158
|
+
let n = 0, r = [];
|
|
1159
|
+
return t.forEach((t) => {
|
|
1160
|
+
let i = 20 + Math.min(t.name.length * 7.5, 150);
|
|
1161
|
+
r[n] || (r[n] = []), r[n].reduce((e, t) => e + (20 + Math.min(t.name.length * 7.5, 150)) + 32, 0) + i > e && r[n].length > 0 && (n++, r[n] = []), t.row = n, r[n].push(t);
|
|
1162
|
+
}), r.length * 36;
|
|
1163
|
+
}
|
|
1164
|
+
_renderLegend() {
|
|
1165
|
+
if (!this._chartData || !this._svg) return { height: 0 };
|
|
1166
|
+
let e = this._svg.querySelector(".chart-legend");
|
|
1167
|
+
e && e.remove();
|
|
1168
|
+
let t = document.createElementNS("http://www.w3.org/2000/svg", "g");
|
|
1169
|
+
if (t.setAttribute("class", "chart-legend"), !this._chartData) return { height: 0 };
|
|
1170
|
+
let n = this._chartData, r = this._width - 40, i = [];
|
|
1171
|
+
if (this._chartType === "pie" && n.datasets.length > 0) {
|
|
1172
|
+
let e = n.datasets[0];
|
|
1173
|
+
e.data.forEach((t, n) => {
|
|
1174
|
+
let r = t.color || this._getDatasetColor(e, 0, n), a = String(t.x);
|
|
1175
|
+
i.push({
|
|
1176
|
+
name: a,
|
|
1177
|
+
color: r,
|
|
1178
|
+
x: 0,
|
|
1179
|
+
textX: 0,
|
|
1180
|
+
row: 0
|
|
1181
|
+
});
|
|
1182
|
+
});
|
|
1183
|
+
} else n.datasets.forEach((e, t) => {
|
|
1184
|
+
if (!this._isDatasetVisible(e, t)) return;
|
|
1185
|
+
let n = this._getDatasetColor(e, t);
|
|
1186
|
+
i.push({
|
|
1187
|
+
name: e.name,
|
|
1188
|
+
color: n,
|
|
1189
|
+
x: 0,
|
|
1190
|
+
textX: 0,
|
|
1191
|
+
row: 0
|
|
1192
|
+
});
|
|
1193
|
+
});
|
|
1194
|
+
let a = 0, o = [];
|
|
1195
|
+
i.forEach((e) => {
|
|
1196
|
+
let t = 20 + Math.min(e.name.length * 7.5, 150);
|
|
1197
|
+
o[a] || (o[a] = []), o[a].reduce((e, t) => e + (20 + Math.min(t.name.length * 7.5, 150)) + 32, 0) + t > r && o[a].length > 0 && (a++, o[a] = []), e.row = a, o[a].push(e);
|
|
1198
|
+
}), o.forEach((e) => {
|
|
1199
|
+
let t = e.reduce((e, t) => e + (20 + Math.min(t.name.length * 7.5, 150)), 0) + (e.length - 1) * 32, n = (this._width - t) / 2;
|
|
1200
|
+
e.forEach((e) => {
|
|
1201
|
+
let t = Math.min(e.name.length * 7.5, 150);
|
|
1202
|
+
e.x = n, e.textX = n + 6 + 8, n += 20 + t + 32;
|
|
1203
|
+
});
|
|
1204
|
+
}), o.length * 36;
|
|
1205
|
+
let s = this._getChartBounds(), c = (this._rotatedLabelHeight > 0 ? 30 : 20) + this._rotatedLabelHeight + 12, l = c;
|
|
1206
|
+
this._showLegend && (l = c + 20 + Math.max(this._legendHeight, 60));
|
|
1207
|
+
let u = this._height - s.y - s.height, d = l > 0 ? u / l : 1, f = (this._rotatedLabelHeight > 0 ? 30 : 20) * d, p = 12 * d, m = this._rotatedLabelHeight * d, h = s.y + s.height + f + (this._rotatedLabelHeight > 0 ? m : p) + 20 * d;
|
|
1208
|
+
return i.forEach((e) => {
|
|
1209
|
+
let n = h + e.row * 36 + 16 / 2, r = document.createElementNS("http://www.w3.org/2000/svg", "circle");
|
|
1210
|
+
r.setAttribute("cx", e.x.toString()), r.setAttribute("cy", n.toString()), r.setAttribute("r", "6"), r.setAttribute("fill", e.color), t.appendChild(r);
|
|
1211
|
+
let i = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject");
|
|
1212
|
+
i.setAttribute("x", e.textX.toString()), i.setAttribute("y", (n - 12).toString()), i.setAttribute("width", "150"), i.setAttribute("height", "24");
|
|
1213
|
+
let a = document.createElement("div");
|
|
1214
|
+
a.style.cssText = `
|
|
1215
|
+
font-size: 12px;
|
|
1216
|
+
font-family: system-ui, -apple-system, sans-serif;
|
|
1217
|
+
color: ${document.documentElement.classList.contains("dark") ? "#d1d5db" : "#374151"};
|
|
1218
|
+
line-height: 1.2;
|
|
1219
|
+
word-wrap: break-word;
|
|
1220
|
+
overflow-wrap: break-word;
|
|
1221
|
+
white-space: normal;
|
|
1222
|
+
max-width: 150px;
|
|
1223
|
+
display: flex;
|
|
1224
|
+
align-items: center;
|
|
1225
|
+
height: 100%;
|
|
1226
|
+
`, a.textContent = e.name, i.appendChild(a), t.appendChild(i);
|
|
1227
|
+
}), this._svg.appendChild(t), { height: this._legendHeight + 50 };
|
|
1228
|
+
}
|
|
1229
|
+
async addDataPoint(e, t) {
|
|
1230
|
+
return !this._chartData || !this._chartData.datasets[e] ? (console.error(`Dataset at index ${e} does not exist`), Promise.reject(/* @__PURE__ */ Error(`Dataset at index ${e} does not exist`))) : (this._chartData.datasets[e].data.push(t), this._cachedBounds.dataHash = "", this._cachedYRange.dataHash = "", this._cachedXValues.dataHash = "", this._cachedTooltipContent.clear(), this._scheduleRender(), new Promise((e) => requestAnimationFrame(() => e())));
|
|
1231
|
+
}
|
|
1232
|
+
async batchAddDataPoints(e) {
|
|
1233
|
+
if (!this._chartData) return Promise.resolve();
|
|
1234
|
+
let t = !1;
|
|
1235
|
+
for (let { datasetIndex: n, point: r } of e) this._chartData.datasets[n] && (this._chartData.datasets[n].data.push(r), t = !0);
|
|
1236
|
+
return t && (this._cachedBounds.dataHash = "", this._cachedYRange.dataHash = "", this._cachedXValues.dataHash = "", this._cachedTooltipContent.clear(), this._scheduleRender()), new Promise((e) => requestAnimationFrame(() => e()));
|
|
1237
|
+
}
|
|
1238
|
+
async updateDatasetData(e, t) {
|
|
1239
|
+
return !this._chartData || !this._chartData.datasets[e] ? (console.error(`Dataset at index ${e} does not exist`), Promise.reject(/* @__PURE__ */ Error(`Dataset at index ${e} does not exist`))) : (this._chartData.datasets[e].data = t, this._cachedBounds.dataHash = "", this._cachedYRange.dataHash = "", this._cachedXValues.dataHash = "", this._cachedTooltipContent.clear(), this._scheduleRender(), new Promise((e) => requestAnimationFrame(() => e())));
|
|
1240
|
+
}
|
|
1241
|
+
async addDataset(e) {
|
|
1242
|
+
return this._chartData ? (this._chartData.datasets.push(e), e.id && this._datasetVisibility.set(e.id, e.visible !== !1), this._cachedBounds.dataHash = "", this._cachedYRange.dataHash = "", this._cachedXValues.dataHash = "", this._cachedTooltipContent.clear(), this._scheduleRender(), new Promise((e) => requestAnimationFrame(() => e()))) : (console.error("Chart data not initialized"), Promise.reject(/* @__PURE__ */ Error("Chart data not initialized")));
|
|
1243
|
+
}
|
|
1244
|
+
async removeDataset(e) {
|
|
1245
|
+
return !this._chartData || !this._chartData.datasets[e] ? (console.error(`Dataset at index ${e} does not exist`), Promise.reject(/* @__PURE__ */ Error(`Dataset at index ${e} does not exist`))) : (this._chartData.datasets.splice(e, 1), this._cachedBounds.dataHash = "", this._cachedYRange.dataHash = "", this._cachedXValues.dataHash = "", this._cachedTooltipContent.clear(), this._scheduleRender(), new Promise((e) => requestAnimationFrame(() => e())));
|
|
1246
|
+
}
|
|
1247
|
+
async updateDataPoint(e, t, n) {
|
|
1248
|
+
return !this._chartData || !this._chartData.datasets[e] ? (console.error(`Dataset at index ${e} does not exist`), Promise.reject(/* @__PURE__ */ Error(`Dataset at index ${e} does not exist`))) : this._chartData.datasets[e].data[t] ? (this._chartData.datasets[e].data[t] = n, this._cachedBounds.dataHash = "", this._cachedYRange.dataHash = "", this._cachedXValues.dataHash = "", this._cachedTooltipContent.clear(), this._scheduleRender(), new Promise((e) => requestAnimationFrame(() => e()))) : (console.error(`Data point at index ${t} does not exist`), Promise.reject(/* @__PURE__ */ Error(`Data point at index ${t} does not exist`)));
|
|
1249
|
+
}
|
|
1250
|
+
async batchUpdateDataPoints(e) {
|
|
1251
|
+
if (!this._chartData) return Promise.resolve();
|
|
1252
|
+
let t = !1;
|
|
1253
|
+
for (let { datasetIndex: n, pointIndex: r, point: i } of e) this._chartData.datasets[n]?.data[r] && (this._chartData.datasets[n].data[r] = i, t = !0);
|
|
1254
|
+
return t && (this._cachedBounds.dataHash = "", this._cachedYRange.dataHash = "", this._cachedXValues.dataHash = "", this._cachedTooltipContent.clear(), this._scheduleRender()), new Promise((e) => requestAnimationFrame(() => e()));
|
|
1255
|
+
}
|
|
1256
|
+
async removeDataPoint(e, t) {
|
|
1257
|
+
return !this._chartData || !this._chartData.datasets[e] ? (console.error(`Dataset at index ${e} does not exist`), Promise.reject(/* @__PURE__ */ Error(`Dataset at index ${e} does not exist`))) : (this._chartData.datasets[e].data.splice(t, 1), this._cachedBounds.dataHash = "", this._cachedYRange.dataHash = "", this._cachedXValues.dataHash = "", this._cachedTooltipContent.clear(), this._scheduleRender(), new Promise((e) => requestAnimationFrame(() => e())));
|
|
1258
|
+
}
|
|
1259
|
+
async batchRemoveDataPoints(e) {
|
|
1260
|
+
if (!this._chartData) return Promise.resolve();
|
|
1261
|
+
let t = !1;
|
|
1262
|
+
for (let { datasetIndex: n, pointIndex: r } of e) this._chartData.datasets[n]?.data[r] && (this._chartData.datasets[n].data.splice(r, 1), t = !0);
|
|
1263
|
+
return t && (this._cachedBounds.dataHash = "", this._cachedYRange.dataHash = "", this._cachedXValues.dataHash = "", this._cachedTooltipContent.clear(), this._scheduleRender()), new Promise((e) => requestAnimationFrame(() => e()));
|
|
1264
|
+
}
|
|
1265
|
+
async showDataset(e) {
|
|
1266
|
+
return this._datasetVisibility.set(e, !0), this._cachedBounds.dataHash = "", this._cachedYRange.dataHash = "", this._cachedXValues.dataHash = "", this._cachedTooltipContent.clear(), this._scheduleRender(), new Promise((e) => requestAnimationFrame(() => e()));
|
|
1267
|
+
}
|
|
1268
|
+
async hideDataset(e) {
|
|
1269
|
+
return this._datasetVisibility.set(e, !1), this._cachedBounds.dataHash = "", this._cachedYRange.dataHash = "", this._cachedXValues.dataHash = "", this._cachedTooltipContent.clear(), this._scheduleRender(), new Promise((e) => requestAnimationFrame(() => e()));
|
|
1270
|
+
}
|
|
1271
|
+
async toggleDataset(e) {
|
|
1272
|
+
let t = !(this._datasetVisibility.get(e) ?? !0);
|
|
1273
|
+
return this._datasetVisibility.set(e, t), this._cachedBounds.dataHash = "", this._cachedYRange.dataHash = "", this._cachedXValues.dataHash = "", this._cachedTooltipContent.clear(), this._scheduleRender(), await new Promise((e) => requestAnimationFrame(() => e())), t;
|
|
1274
|
+
}
|
|
1275
|
+
isDatasetVisible(e) {
|
|
1276
|
+
return this._datasetVisibility.get(e);
|
|
1277
|
+
}
|
|
1278
|
+
async downloadAsPNG(e = "chart.png") {
|
|
1279
|
+
if (!this._svg) return console.error("Chart SVG not found"), Promise.reject(/* @__PURE__ */ Error("Chart SVG not found"));
|
|
1280
|
+
let t = this._svg.cloneNode(!0), n = this._width, r = this._height;
|
|
1281
|
+
t.querySelectorAll("text").forEach((e) => {
|
|
1282
|
+
let t = e.getAttribute("font-family");
|
|
1283
|
+
(!t || t.includes("system-ui") || t.includes("apple-system")) && e.setAttribute("font-family", "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif");
|
|
1284
|
+
}), t.setAttribute("width", n.toString()), t.setAttribute("height", r.toString()), t.setAttribute("xmlns", "http://www.w3.org/2000/svg"), t.querySelectorAll("foreignObject").forEach((e) => {
|
|
1285
|
+
let t = e.querySelector("div");
|
|
1286
|
+
if (t) {
|
|
1287
|
+
let n = document.createElementNS("http://www.w3.org/2000/svg", "text"), r = e.getAttribute("x") || "0", i = e.getAttribute("y") || "0";
|
|
1288
|
+
n.setAttribute("x", r), n.setAttribute("y", (parseFloat(i) + 12).toString()), n.setAttribute("fill", t.style.color || "#374151"), n.setAttribute("font-size", "12"), n.setAttribute("font-family", t.style.fontFamily || "system-ui, -apple-system, sans-serif"), n.textContent = t.textContent || "", e.parentNode && e.parentNode.replaceChild(n, e);
|
|
1289
|
+
}
|
|
1290
|
+
});
|
|
1291
|
+
let i = new XMLSerializer().serializeToString(t), a = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(i), o = new Image();
|
|
1292
|
+
return o.crossOrigin = "anonymous", new Promise((t, i) => {
|
|
1293
|
+
o.onload = () => {
|
|
1294
|
+
setTimeout(() => {
|
|
1295
|
+
let a = document.createElement("canvas");
|
|
1296
|
+
a.width = n + 60, a.height = r + 60;
|
|
1297
|
+
let s = a.getContext("2d");
|
|
1298
|
+
if (!s) {
|
|
1299
|
+
console.error("Could not get canvas context"), i(/* @__PURE__ */ Error("Could not get canvas context"));
|
|
1300
|
+
return;
|
|
1301
|
+
}
|
|
1302
|
+
s.fillStyle = document.documentElement.classList.contains("dark") ? "#111827" : "#ffffff", s.fillRect(0, 0, a.width, a.height), s.drawImage(o, 30, 30), a.toBlob((n) => {
|
|
1303
|
+
if (!n) {
|
|
1304
|
+
console.error("Could not create blob from canvas"), i(/* @__PURE__ */ Error("Could not create blob from canvas"));
|
|
1305
|
+
return;
|
|
1306
|
+
}
|
|
1307
|
+
let r = URL.createObjectURL(n), a = document.createElement("a");
|
|
1308
|
+
a.href = r, a.download = e, document.body.appendChild(a), a.click(), document.body.removeChild(a), URL.revokeObjectURL(r), t();
|
|
1309
|
+
}, "image/png");
|
|
1310
|
+
}, 0);
|
|
1311
|
+
}, o.onerror = () => {
|
|
1312
|
+
console.error("Error loading SVG image"), i(/* @__PURE__ */ Error("Error loading SVG image"));
|
|
1313
|
+
}, o.src = a;
|
|
1314
|
+
});
|
|
1315
|
+
}
|
|
1316
|
+
};
|
|
1317
|
+
customElements.get("mint-chart") || e("mint-chart", t);
|
|
1318
|
+
//#endregion
|
|
1319
|
+
export { t as default };
|