@espressif/dashboard-ui-components 1.10.0 → 1.11.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +75 -0
- package/dist/_vendor/@radix-ui/primitive/dist/index.js +9 -0
- package/dist/_vendor/@radix-ui/react-checkbox/dist/index.js +185 -0
- package/dist/_vendor/@radix-ui/react-compose-refs/dist/index.js +28 -0
- package/dist/_vendor/@radix-ui/react-context/dist/index.js +68 -0
- package/dist/_vendor/@radix-ui/react-presence/dist/index.js +127 -0
- package/dist/_vendor/@radix-ui/react-primitive/dist/index.js +42 -0
- package/dist/_vendor/@radix-ui/react-use-controllable-state/dist/index.js +55 -0
- package/dist/_vendor/@radix-ui/react-use-layout-effect/dist/index.js +5 -0
- package/dist/_vendor/@radix-ui/react-use-previous/dist/index.js +17 -0
- package/dist/_vendor/@radix-ui/react-use-size/dist/index.js +39 -0
- package/dist/_vendor/lottie-react/build/index.es.js +537 -0
- package/dist/_vendor/lottie-web/build/player/lottie.js +14149 -0
- package/dist/_virtual/_rolldown/runtime.js +24 -0
- package/dist/assets/illustrations/bulb-cloud-drawing.js +4 -0
- package/dist/assets/illustrations/rm-dashboard-update.js +4 -0
- package/dist/assets/illustrations/rm-data-download.js +4 -0
- package/dist/assets/logos/espressif/espressif-no-text.js +4 -0
- package/dist/assets/logos/espressif/espressif-with-text-dm.js +4 -0
- package/dist/assets/logos/espressif/espressif-with-text.js +4 -0
- package/dist/assets/logos/insights/insights-no-text.js +4 -0
- package/dist/assets/logos/insights/insights-with-text-dm.js +4 -0
- package/dist/assets/logos/insights/insights-with-text.js +4 -0
- package/dist/assets/logos/launchpad/launchpad-no-text-dm.js +4 -0
- package/dist/assets/logos/launchpad/launchpad-no-text.js +4 -0
- package/dist/assets/logos/launchpad/launchpad-with-text-dm.js +4 -0
- package/dist/assets/logos/launchpad/launchpad-with-text.js +4 -0
- package/dist/assets/logos/private-agents/private-agents-no-text.js +4 -0
- package/dist/assets/logos/private-agents/private-agents-with-text-dm.js +4 -0
- package/dist/assets/logos/private-agents/private-agents-with-text.js +4 -0
- package/dist/assets/logos/rainmaker/rainmaker-no-text.js +4 -0
- package/dist/assets/logos/rainmaker/rainmaker-with-text-dm.js +4 -0
- package/dist/assets/logos/rainmaker/rainmaker-with-text.js +4 -0
- package/dist/assets/logos/rainmaker-classic/rainmaker-classic-no-text-dm.js +4 -0
- package/dist/assets/logos/rainmaker-classic/rainmaker-classic-no-text.js +4 -0
- package/dist/assets/logos/rainmaker-classic/rainmaker-classic-with-text-dm.js +4 -0
- package/dist/assets/logos/rainmaker-classic/rainmaker-classic-with-text.js +4 -0
- package/dist/assets/logos/rainmaker-neo/rainmaker-neo-no-text.js +4 -0
- package/dist/assets/logos/rainmaker-neo/rainmaker-neo-with-text-dm.js +4 -0
- package/dist/assets/logos/rainmaker-neo/rainmaker-neo-with-text.js +4 -0
- package/dist/assets/logos/ui-components/ui-components-no-text.js +4 -0
- package/dist/assets/logos/ui-components/ui-components-with-text-dm.js +4 -0
- package/dist/assets/logos/ui-components/ui-components-with-text.js +4 -0
- package/dist/assets/logos/zerocode/zerocode-no-text.js +4 -0
- package/dist/assets/logos/zerocode/zerocode-with-text-dm.js +4 -0
- package/dist/assets/logos/zerocode/zerocode-with-text.js +4 -0
- package/dist/assets/logos/zerocode-ai/zerocode-ai-no-text.js +4 -0
- package/dist/assets/logos/zerocode-ai/zerocode-ai-with-text-dm.js +4 -0
- package/dist/assets/logos/zerocode-ai/zerocode-ai-with-text.js +4 -0
- package/dist/common/animated-rainmaker-logo/animated-rainmaker-logo.constants.js +18 -0
- package/dist/common/animated-rainmaker-logo/animated-rainmaker-logo.js +24 -0
- package/dist/common/animated-rainmaker-logo/rainmaker-c-logo.js +50 -0
- package/dist/common/animated-rainmaker-logo/use-animated-rainmaker-logo-animation.js +85 -0
- package/dist/common/app-logo/app-logo.js +59 -0
- package/dist/common/app-logo/logo-config.js +297 -0
- package/dist/common/copyright-card/copyright-card.js +39 -0
- package/dist/common/footer-card/footer-card.js +22 -0
- package/dist/common/index.js +8 -8
- package/dist/common/my-account-menu/my-account-menu.js +32 -0
- package/dist/common/page-loader/page-loader.js +21 -0
- package/dist/common/profile-card/profile-card.js +26 -0
- package/dist/components/accordion/accordion.js +52 -0
- package/dist/components/advanced-search-box/advanced-search-box.js +106 -0
- package/dist/components/alert/alert.js +85 -0
- package/dist/components/animated-containers/pop-collection-item.js +28 -0
- package/dist/components/async-multi-select/async-multi-select.js +199 -0
- package/dist/components/avatar/avatar.js +41 -0
- package/dist/components/button/button.js +191 -0
- package/dist/components/button/flash-button.js +110 -0
- package/dist/components/button/invert-button.js +13 -0
- package/dist/components/calendar/calendar.js +105 -0
- package/dist/components/cards/animated-card/animated-card-animations.js +57 -0
- package/dist/components/cards/animated-card/animated-card.js +42 -0
- package/dist/components/cards/basic-details-card.js +46 -0
- package/dist/components/cards/collapsible-card.js +48 -0
- package/dist/components/cards/no-data-card/no-data-card.js +30 -0
- package/dist/components/cards/section-card.js +265 -0
- package/dist/components/cards/simple-card.js +24 -0
- package/dist/components/carousel/carousel.js +158 -0
- package/dist/components/chart/area-chart.js +135 -0
- package/dist/components/chart/bar-chart.js +151 -0
- package/dist/components/chart/chart-colors.js +85 -0
- package/dist/components/chart/chart-series-data.js +53 -0
- package/dist/components/chart/chart.js +147 -0
- package/dist/components/chart/chart.types.js +7 -0
- package/dist/components/chart/composed-chart.js +182 -0
- package/dist/components/chart/donut-chart.js +177 -0
- package/dist/components/chart/line-chart.js +137 -0
- package/dist/components/chart/treemap-chart.js +294 -0
- package/dist/components/circular-progress/circular-progress.js +125 -0
- package/dist/components/code-editor/code-editor.js +235 -0
- package/dist/components/code-editor/code-editor.utils.js +122 -0
- package/dist/components/code-editor/use-code-editor-keys.js +79 -0
- package/dist/components/code-editor/use-highlighted-html.js +102 -0
- package/dist/components/confirmation-dialog/confirmation-dialog.js +72 -0
- package/dist/components/content-container/content-container.js +20 -0
- package/dist/components/copiable-text/copiable-text.js +46 -0
- package/dist/components/data-table/data-table.js +186 -0
- package/dist/components/data-table/responsive-columns.js +65 -0
- package/dist/components/data-table/row-actions.js +27 -0
- package/dist/components/data-table/sticky-columns.js +71 -0
- package/dist/components/data-table/table-body.js +57 -0
- package/dist/components/data-table/table-header.js +21 -0
- package/dist/components/date-picker/date-picker.js +95 -0
- package/dist/components/date-range-picker/date-range-picker.js +301 -0
- package/dist/components/date-range-picker/presets.js +174 -0
- package/dist/components/date-time-picker/date-time-picker.js +144 -0
- package/dist/components/date-time-picker/date-time-picker.utils.js +32 -0
- package/dist/components/device-icon/device-icon.config.js +194 -0
- package/dist/components/device-icon/device-icon.js +17 -0
- package/dist/components/device-icon/icons/air-conditioner.js +22 -0
- package/dist/components/device-icon/icons/blind.js +24 -0
- package/dist/components/device-icon/icons/dimmer.js +14 -0
- package/dist/components/device-icon/icons/extension-board.js +42 -0
- package/dist/components/device-icon/icons/fan.js +14 -0
- package/dist/components/device-icon/icons/knob.js +14 -0
- package/dist/components/device-icon/icons/led-strip.js +22 -0
- package/dist/components/device-icon/icons/light.js +14 -0
- package/dist/components/device-icon/icons/refrigerator.js +18 -0
- package/dist/components/device-icon/icons/retro-switch.js +18 -0
- package/dist/components/device-icon/icons/router.js +20 -0
- package/dist/components/device-icon/icons/sensor.js +20 -0
- package/dist/components/device-icon/icons/socket.js +19 -0
- package/dist/components/device-icon/icons/switch.js +19 -0
- package/dist/components/device-icon/icons/thermostat.js +21 -0
- package/dist/components/device-icon/icons/washing-machine.js +22 -0
- package/dist/components/device-icon/match-device.js +61 -0
- package/dist/components/dynamic-list/dynamic-list.js +445 -0
- package/dist/components/error-display/full-size-error/full-size-error.js +20 -0
- package/dist/components/error-display/inline-error/inline-error.js +12 -0
- package/dist/components/file-input/file-input.js +318 -0
- package/dist/components/file-upload/file-upload.js +317 -0
- package/dist/components/filters-bar/filters-bar.js +36 -0
- package/dist/components/fullscreen-dialog/fullscreen-dialog.js +68 -0
- package/dist/components/icon-avatar/icon-avatar.js +130 -0
- package/dist/components/icon-text-action-card/icon-text-action-card.js +190 -0
- package/dist/components/illustration/illustration-registry.js +37 -0
- package/dist/components/illustration/illustration-variants.js +21 -0
- package/dist/components/illustration/illustration.js +68 -0
- package/dist/components/index.d.ts +0 -20
- package/dist/components/index.js +134 -6
- package/dist/components/key-value-manager/key-value-manager-add-popover.js +126 -0
- package/dist/components/key-value-manager/key-value-manager-field.js +47 -0
- package/dist/components/key-value-manager/key-value-manager-table.js +188 -0
- package/dist/components/key-value-manager/key-value-manager.js +111 -0
- package/dist/components/key-value-manager/key-value-manager.props.js +28 -0
- package/dist/components/key-value-manager/key-value-manager.utils.js +21 -0
- package/dist/components/link/link.js +67 -0
- package/dist/components/list/dropdown-list-item.js +60 -0
- package/dist/components/list/list-item.utils.js +76 -0
- package/dist/components/list/list.js +49 -0
- package/dist/components/list/list.props.js +27 -0
- package/dist/components/list/standard-list-item.js +66 -0
- package/dist/components/list-details/list-details-item-button.js +46 -0
- package/dist/components/list-details/list-details-item-dropdown.js +112 -0
- package/dist/components/list-details/list-details-item-strip.js +125 -0
- package/dist/components/list-details/list-details.js +148 -0
- package/dist/components/lottie-animation-container/lottie-animation-container.js +31 -0
- package/dist/components/lottie-animations/animation-data/access-denied.js +3980 -0
- package/dist/components/lottie-animations/animation-data/active.js +825 -0
- package/dist/components/lottie-animations/animation-data/bar-chart.js +610 -0
- package/dist/components/lottie-animations/animation-data/chart-loading.js +5368 -0
- package/dist/components/lottie-animations/animation-data/cloud-download.js +1660 -0
- package/dist/components/lottie-animations/animation-data/cloud-sync.js +932 -0
- package/dist/components/lottie-animations/animation-data/coud-upload.js +7060 -0
- package/dist/components/lottie-animations/animation-data/cross-throb.js +1506 -0
- package/dist/components/lottie-animations/animation-data/dashboard-loading.js +14330 -0
- package/dist/components/lottie-animations/animation-data/error-spread-out.js +5567 -0
- package/dist/components/lottie-animations/animation-data/error.js +1211 -0
- package/dist/components/lottie-animations/animation-data/green-success.js +14826 -0
- package/dist/components/lottie-animations/animation-data/inactive.js +723 -0
- package/dist/components/lottie-animations/animation-data/light.js +2678 -0
- package/dist/components/lottie-animations/animation-data/lock.js +900 -0
- package/dist/components/lottie-animations/animation-data/lock2.js +1686 -0
- package/dist/components/lottie-animations/animation-data/locked.js +641 -0
- package/dist/components/lottie-animations/animation-data/search-error.js +954 -0
- package/dist/components/lottie-animations/animation-data/security.js +4121 -0
- package/dist/components/lottie-animations/animation-data/success.js +404 -0
- package/dist/components/lottie-animations/animation-data/verification-in-progress.js +10138 -0
- package/dist/components/lottie-animations/animation-data/warning.js +843 -0
- package/dist/components/lottie-animations/verification-in-progress/verification-in-progress.js +19 -0
- package/dist/components/markdown-content/markdown-content.components.js +114 -0
- package/dist/components/markdown-content/markdown-content.js +39 -0
- package/dist/components/menu/menu.js +19 -0
- package/dist/components/monospace-content/monospace-content.js +80 -0
- package/dist/components/nav-bar/nav-bar-details-panel.js +51 -0
- package/dist/components/nav-bar/nav-bar-mobile-menu.js +105 -0
- package/dist/components/nav-bar/nav-bar.js +449 -0
- package/dist/components/nav-bar/use-nav-bar-overflow.js +74 -0
- package/dist/components/nav-bar/use-nav-bar-scroll.js +42 -0
- package/dist/components/overflow-badge-list/overflow-badge-list.js +58 -0
- package/dist/components/page-container/page-container-skeleton.js +72 -0
- package/dist/components/page-container/page-container.js +93 -0
- package/dist/components/pagination/pagination.js +96 -0
- package/dist/components/pagination/pagination.props.js +16 -0
- package/dist/components/progress-bar/progress-bar.js +106 -0
- package/dist/components/radio-group/radio-group.js +41 -0
- package/dist/components/requirement-list/requirement-list.js +83 -0
- package/dist/components/scrollable-sections/scrollable-sections.js +270 -0
- package/dist/components/search-box/search-box.js +54 -0
- package/dist/components/search-field-shell.js +24 -0
- package/dist/components/selectable-card-list/checkbox-card-list.js +85 -0
- package/dist/components/selectable-card-list/radio-card-list.js +99 -0
- package/dist/components/selectable-card-list/selectable-card-list-shared.js +135 -0
- package/dist/components/selectable-card-list/selectable-card-list.js +34 -0
- package/dist/components/sidebar/sidebar.js +344 -0
- package/dist/components/sidebar/types.js +6 -0
- package/dist/components/simple-clickable-card/simple-clickable-card-shared.js +309 -0
- package/dist/components/simple-clickable-card/simple-clickable-card.js +106 -0
- package/dist/components/simple-info-card/simple-info-card.js +154 -0
- package/dist/components/simple-list/simple-list.js +146 -0
- package/dist/components/simple-paginated-list/simple-paginated-list.js +178 -0
- package/dist/components/simplified-date/simplified-date.js +56 -0
- package/dist/components/skeletons/table-skeleton.js +16 -0
- package/dist/components/spinner/spinner.js +25 -0
- package/dist/components/stat-card/stat-card.js +206 -0
- package/dist/components/status-badge/status-badge.js +108 -0
- package/dist/components/status-card-list/status-card-list.js +282 -0
- package/dist/components/tag/tag.js +144 -0
- package/dist/components/tag-input/tag-input.js +161 -0
- package/dist/components/text-effects/glitch-effect/glitch-text.js +115 -0
- package/dist/components/text-effects/gradient-text/gradient-text.js +32 -0
- package/dist/components/text-effects/highlight-text/highlight-text.js +35 -0
- package/dist/components/text-effects/parse-text-markup.js +53 -0
- package/dist/components/text-effects/shimmer-text/shimmer-text.js +67 -0
- package/dist/components/time-picker/time-picker.js +23 -0
- package/dist/components/toast/toast.js +126 -0
- package/dist/components/togglable-items-list/togglable-items-list.js +28 -0
- package/dist/components/tooltip/tooltip.js +21 -0
- package/dist/components/transfer-list/transfer-list.js +413 -0
- package/dist/components/truncated-line-with-tooltip/truncated-line-with-tooltip.js +61 -0
- package/dist/components/typography/typography-variants.js +41 -0
- package/dist/components/typography/typography.js +15 -0
- package/dist/components/user-type-badge/user-type-badge.js +40 -0
- package/dist/components/user-type-badge/user-type-badge.registry.js +17 -0
- package/dist/components/vertical-stepper/vertical-stepper.js +171 -0
- package/dist/core/alert.js +33 -0
- package/dist/core/animate-ui/components/animate/code-header.js +30 -0
- package/dist/core/animate-ui/components/animate/code.js +35 -0
- package/dist/core/animate-ui/components/animate/tabs.js +188 -0
- package/dist/core/animate-ui/components/animate/tooltip.js +39 -0
- package/dist/core/animate-ui/components/base/preview-card.js +29 -0
- package/dist/core/animate-ui/components/base/progress.js +32 -0
- package/dist/core/animate-ui/components/base/radio.js +24 -0
- package/dist/core/animate-ui/components/buttons/copy.js +95 -0
- package/dist/core/animate-ui/components/radix/accordion.js +36 -0
- package/dist/core/animate-ui/components/radix/dialog.js +60 -0
- package/dist/core/animate-ui/components/radix/dropdown-menu.js +129 -0
- package/dist/core/animate-ui/components/radix/sheet.js +110 -0
- package/dist/core/animate-ui/components/radix/sidebar.js +416 -0
- package/dist/core/animate-ui/components/radix/switch.js +34 -0
- package/dist/core/animate-ui/components/radix/toggle-group.js +115 -0
- package/dist/core/animate-ui/components/radix/toggle.js +24 -0
- package/dist/core/animate-ui/primitives/animate/code-block.js +131 -0
- package/dist/core/animate-ui/primitives/animate/escape-html.js +7 -0
- package/dist/core/animate-ui/primitives/animate/shiki-highlighter.js +64 -0
- package/dist/core/animate-ui/primitives/animate/slot.js +39 -0
- package/dist/core/animate-ui/primitives/animate/tabs.js +202 -0
- package/dist/core/animate-ui/primitives/animate/tooltip.js +351 -0
- package/dist/core/animate-ui/primitives/base/preview-card.js +107 -0
- package/dist/core/animate-ui/primitives/base/progress.js +60 -0
- package/dist/core/animate-ui/primitives/base/radio.js +83 -0
- package/dist/core/animate-ui/primitives/buttons/button.js +16 -0
- package/dist/core/animate-ui/primitives/effects/highlight.js +407 -0
- package/dist/core/animate-ui/primitives/radix/accordion.js +76 -0
- package/dist/core/animate-ui/primitives/radix/dialog.js +136 -0
- package/dist/core/animate-ui/primitives/radix/dropdown-menu.js +305 -0
- package/dist/core/animate-ui/primitives/radix/sheet.js +165 -0
- package/dist/core/animate-ui/primitives/radix/switch.js +86 -0
- package/dist/core/animate-ui/primitives/radix/toggle-group.js +100 -0
- package/dist/core/animate-ui/primitives/texts/counting-number.js +75 -0
- package/dist/core/avatar.js +32 -0
- package/dist/core/badge.js +27 -0
- package/dist/core/breadcrumb.js +62 -0
- package/dist/core/button/button.js +43 -0
- package/dist/core/button/craft-button.js +78 -0
- package/dist/core/button-group.js +38 -0
- package/dist/core/button.js +40 -0
- package/dist/core/card.js +42 -0
- package/dist/core/carousel/carousel.js +149 -0
- package/dist/core/checkbox/motion-checkbox.js +103 -0
- package/dist/core/collapsible.js +54 -0
- package/dist/core/combobox/combobox.js +85 -0
- package/dist/core/command.js +61 -0
- package/dist/core/field-end-icons.js +36 -0
- package/dist/core/field-label-row.js +33 -0
- package/dist/core/form.js +92 -0
- package/dist/core/hooks/use-controlled-state.js +27 -0
- package/dist/core/hooks/use-data-state.js +39 -0
- package/dist/core/hooks/use-is-in-view.js +18 -0
- package/dist/core/hooks/use-mobile.js +19 -0
- package/dist/core/hooks/use-reveal-on-scroll-up.js +141 -0
- package/dist/core/hooks/use-scroll-overflow.js +50 -0
- package/dist/core/index.js +18 -52
- package/dist/core/input/input-password.js +30 -0
- package/dist/core/input/input.js +147 -0
- package/dist/core/input-otp/input-otp.js +183 -0
- package/dist/core/label.js +15 -0
- package/dist/core/popover.js +31 -0
- package/dist/core/scroll-area.js +42 -0
- package/dist/core/select.js +121 -0
- package/dist/core/separator.js +40 -0
- package/dist/core/skeleton.js +11 -0
- package/dist/core/table.js +59 -0
- package/dist/core/textarea/textarea.js +97 -0
- package/dist/core/utils/get-strict-context.js +18 -0
- package/dist/index.js +148 -9
- package/dist/layouts/entry-layout/entry-layout-bg.js +4 -0
- package/dist/layouts/entry-layout/entry-layout.js +52 -0
- package/dist/layouts/index.js +7 -6
- package/dist/layouts/workspace-layout/account-menu/account-menu.js +108 -0
- package/dist/layouts/workspace-layout/breadcrumbs/derive-breadcrumbs.js +37 -0
- package/dist/layouts/workspace-layout/breadcrumbs/workspace-breadcrumbs.js +22 -0
- package/dist/layouts/workspace-layout/footer/footer.js +15 -0
- package/dist/layouts/workspace-layout/header/header.js +54 -0
- package/dist/layouts/workspace-layout/workspace-layout.js +157 -0
- package/dist/tailwind-preset.js +3 -4
- package/dist/utils/cn.js +8 -0
- package/dist/utils/color.js +72 -0
- package/dist/utils/index.js +3 -2
- package/dist/utils/path-match.js +17 -0
- package/dist/utils/silver-shine.js +63 -0
- package/dist/utils/variant-gradient-underlay.js +45 -0
- package/dist/utils/variant.js +426 -0
- package/package.json +7 -4
- package/dist/chunk-2GDYZAKR.js +0 -505
- package/dist/chunk-ALCWXFUC.js +0 -733
- package/dist/chunk-CDHBLANU.js +0 -59
- package/dist/chunk-LUESSJAF.js +0 -70068
- package/dist/chunk-TMORRNEB.js +0 -323
- package/dist/chunk-TRTQSARU.js +0 -31
- package/dist/chunk-VU4CZ76T.js +0 -43
- package/dist/chunk-XNLCVHBC.js +0 -364
- package/dist/chunk-Z4776NRY.js +0 -4347
- package/src/assets/illustrations/add-to-group.svg +0 -32
- package/src/assets/illustrations/chip.svg +0 -51
- package/src/assets/illustrations/create-new-group.svg +0 -27
- package/src/assets/illustrations/new-ota.svg +0 -61
- package/src/assets/illustrations/secured-key.svg +0 -48
- /package/dist/assets/{entry-layout-bg-JPI7GJ42.webp → entry-layout-bg-DUM0UhT3.webp} +0 -0
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../../utils/cn.js";
|
|
3
|
+
import { Carousel as Carousel$1, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "../../core/carousel/carousel.js";
|
|
4
|
+
import * as React$1 from "react";
|
|
5
|
+
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
import Autoplay from "embla-carousel-autoplay";
|
|
7
|
+
//#region src/components/carousel/carousel.tsx
|
|
8
|
+
var MAX_DOTS_MIN = 1;
|
|
9
|
+
var MAX_DOTS_MAX = 10;
|
|
10
|
+
var MAX_DOTS_DEFAULT = 5;
|
|
11
|
+
var DELAY_MIN = 1e3;
|
|
12
|
+
var DELAY_MAX = 1e4;
|
|
13
|
+
var DELAY_DEFAULT = 3e3;
|
|
14
|
+
function clamp(value, min, max, fallback) {
|
|
15
|
+
if (!Number.isFinite(value)) return fallback;
|
|
16
|
+
return Math.min(max, Math.max(min, Math.floor(value)));
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* Compute the sliding window of dot indices to render when the item count
|
|
20
|
+
* exceeds `maxDots`. Returns the indices themselves — clicking dot at
|
|
21
|
+
* position `i` scrolls to `windowIndices[i]`.
|
|
22
|
+
*/
|
|
23
|
+
function getDotWindow(total, maxDots, selectedIndex) {
|
|
24
|
+
if (total <= maxDots) return Array.from({ length: total }, (_, i) => i);
|
|
25
|
+
let start = selectedIndex - Math.floor(maxDots / 2);
|
|
26
|
+
if (start < 0) start = 0;
|
|
27
|
+
if (start > total - maxDots) start = total - maxDots;
|
|
28
|
+
return Array.from({ length: maxDots }, (_, i) => start + i);
|
|
29
|
+
}
|
|
30
|
+
function DotsRow({ total, maxDots, selectedIndex, orientation, onDotClick }) {
|
|
31
|
+
const window = getDotWindow(total, maxDots, selectedIndex);
|
|
32
|
+
return /* @__PURE__ */ jsx("div", {
|
|
33
|
+
className: cn("flex items-center justify-center gap-1.5", orientation === "horizontal" ? "mt-3 flex-row" : "ml-3 flex-col"),
|
|
34
|
+
role: "tablist",
|
|
35
|
+
"aria-label": "Carousel pagination",
|
|
36
|
+
children: window.map((index) => {
|
|
37
|
+
const isActive = index === selectedIndex;
|
|
38
|
+
return /* @__PURE__ */ jsx("button", {
|
|
39
|
+
type: "button",
|
|
40
|
+
role: "tab",
|
|
41
|
+
"aria-selected": isActive,
|
|
42
|
+
"aria-label": `Go to slide ${index + 1}`,
|
|
43
|
+
onClick: () => onDotClick(index),
|
|
44
|
+
className: cn("rounded-full transition-all duration-200 ease-out", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", orientation === "horizontal" ? isActive ? "h-2 w-4 bg-foreground" : "h-2 w-2 bg-muted-foreground/40 hover:bg-muted-foreground/60" : isActive ? "h-4 w-2 bg-foreground" : "h-2 w-2 bg-muted-foreground/40 hover:bg-muted-foreground/60")
|
|
45
|
+
}, index);
|
|
46
|
+
})
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
/**
|
|
50
|
+
* High-level, data-driven carousel. Wraps shadcn/ui's Embla-based primitives
|
|
51
|
+
* with a batteries-included API: pass `data`, pick a `navigation` style, and
|
|
52
|
+
* everything else — autoplay, looping, keyboard arrow keys, dot pagination —
|
|
53
|
+
* is wired up for you.
|
|
54
|
+
*
|
|
55
|
+
* For advanced composition (non-uniform slide widths, controlling multiple
|
|
56
|
+
* carousels from one API, etc.) use `navigation="custom"` with
|
|
57
|
+
* `renderNavigation`; the underlying Embla instance is not exposed.
|
|
58
|
+
*/
|
|
59
|
+
function Carousel({ data, orientation = "horizontal", navigation = "dots", maxDots = MAX_DOTS_DEFAULT, autoplay = false, delay = DELAY_DEFAULT, loop = true, onNext, onPrevious, renderNavigation, className, itemClassName }) {
|
|
60
|
+
const clampedMaxDots = clamp(maxDots, MAX_DOTS_MIN, MAX_DOTS_MAX, MAX_DOTS_DEFAULT);
|
|
61
|
+
const clampedDelay = clamp(delay, DELAY_MIN, DELAY_MAX, DELAY_DEFAULT);
|
|
62
|
+
const autoplayPlugin = React$1.useRef(autoplay ? Autoplay({
|
|
63
|
+
delay: clampedDelay,
|
|
64
|
+
stopOnInteraction: true
|
|
65
|
+
}) : null);
|
|
66
|
+
React$1.useEffect(() => {
|
|
67
|
+
if (!autoplayPlugin.current || !autoplay) return;
|
|
68
|
+
autoplayPlugin.current = Autoplay({
|
|
69
|
+
delay: clampedDelay,
|
|
70
|
+
stopOnInteraction: true
|
|
71
|
+
});
|
|
72
|
+
}, [autoplay, clampedDelay]);
|
|
73
|
+
const plugins = React$1.useMemo(() => autoplay && autoplayPlugin.current ? [autoplayPlugin.current] : [], [autoplay, clampedDelay]);
|
|
74
|
+
const [api, setApi] = React$1.useState();
|
|
75
|
+
const [selectedIndex, setSelectedIndex] = React$1.useState(0);
|
|
76
|
+
const [scrollSnaps, setScrollSnaps] = React$1.useState([]);
|
|
77
|
+
const [canScrollPrev, setCanScrollPrev] = React$1.useState(false);
|
|
78
|
+
const [canScrollNext, setCanScrollNext] = React$1.useState(false);
|
|
79
|
+
const prevIndexRef = React$1.useRef(0);
|
|
80
|
+
React$1.useEffect(() => {
|
|
81
|
+
if (!api) return;
|
|
82
|
+
setScrollSnaps(api.scrollSnapList());
|
|
83
|
+
setSelectedIndex(api.selectedScrollSnap());
|
|
84
|
+
prevIndexRef.current = api.selectedScrollSnap();
|
|
85
|
+
const handleSelect = () => {
|
|
86
|
+
const next = api.selectedScrollSnap();
|
|
87
|
+
const prev = prevIndexRef.current;
|
|
88
|
+
const total = api.scrollSnapList().length;
|
|
89
|
+
const diff = next - prev;
|
|
90
|
+
const isForward = diff === 1 || loop && diff === -(total - 1);
|
|
91
|
+
const isBackward = diff === -1 || loop && diff === total - 1;
|
|
92
|
+
if (isForward) onNext?.();
|
|
93
|
+
else if (isBackward) onPrevious?.();
|
|
94
|
+
prevIndexRef.current = next;
|
|
95
|
+
setSelectedIndex(next);
|
|
96
|
+
setCanScrollPrev(api.canScrollPrev());
|
|
97
|
+
setCanScrollNext(api.canScrollNext());
|
|
98
|
+
};
|
|
99
|
+
const handleReInit = () => {
|
|
100
|
+
setScrollSnaps(api.scrollSnapList());
|
|
101
|
+
setSelectedIndex(api.selectedScrollSnap());
|
|
102
|
+
setCanScrollPrev(api.canScrollPrev());
|
|
103
|
+
setCanScrollNext(api.canScrollNext());
|
|
104
|
+
};
|
|
105
|
+
setCanScrollPrev(api.canScrollPrev());
|
|
106
|
+
setCanScrollNext(api.canScrollNext());
|
|
107
|
+
api.on("select", handleSelect);
|
|
108
|
+
api.on("reInit", handleReInit);
|
|
109
|
+
return () => {
|
|
110
|
+
api.off("select", handleSelect);
|
|
111
|
+
api.off("reInit", handleReInit);
|
|
112
|
+
};
|
|
113
|
+
}, [
|
|
114
|
+
api,
|
|
115
|
+
loop,
|
|
116
|
+
onNext,
|
|
117
|
+
onPrevious
|
|
118
|
+
]);
|
|
119
|
+
const scrollTo = React$1.useCallback((index) => api?.scrollTo(index), [api]);
|
|
120
|
+
const navigationState = {
|
|
121
|
+
canScrollPrev,
|
|
122
|
+
canScrollNext,
|
|
123
|
+
selectedIndex,
|
|
124
|
+
scrollSnaps,
|
|
125
|
+
scrollPrev: React$1.useCallback(() => api?.scrollPrev(), [api]),
|
|
126
|
+
scrollNext: React$1.useCallback(() => api?.scrollNext(), [api]),
|
|
127
|
+
scrollTo
|
|
128
|
+
};
|
|
129
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
130
|
+
className: cn(orientation === "horizontal" ? "flex flex-col" : "flex flex-row", className),
|
|
131
|
+
children: [
|
|
132
|
+
/* @__PURE__ */ jsxs(Carousel$1, {
|
|
133
|
+
setApi,
|
|
134
|
+
orientation,
|
|
135
|
+
opts: { loop },
|
|
136
|
+
plugins,
|
|
137
|
+
className: "min-w-0 flex-1",
|
|
138
|
+
children: [/* @__PURE__ */ jsx(CarouselContent, { children: data.map((item) => /* @__PURE__ */ jsx(CarouselItem, {
|
|
139
|
+
className: itemClassName,
|
|
140
|
+
children: item.content
|
|
141
|
+
}, item.id)) }), navigation === "arrows" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CarouselPrevious, {}), /* @__PURE__ */ jsx(CarouselNext, {})] })]
|
|
142
|
+
}),
|
|
143
|
+
navigation === "dots" && data.length > 1 && /* @__PURE__ */ jsx(DotsRow, {
|
|
144
|
+
total: data.length,
|
|
145
|
+
maxDots: clampedMaxDots,
|
|
146
|
+
selectedIndex,
|
|
147
|
+
orientation,
|
|
148
|
+
onDotClick: scrollTo
|
|
149
|
+
}),
|
|
150
|
+
navigation === "custom" && renderNavigation && /* @__PURE__ */ jsx("div", {
|
|
151
|
+
className: cn(orientation === "horizontal" ? "mt-3" : "ml-3"),
|
|
152
|
+
children: renderNavigation(navigationState)
|
|
153
|
+
})
|
|
154
|
+
]
|
|
155
|
+
});
|
|
156
|
+
}
|
|
157
|
+
//#endregion
|
|
158
|
+
export { Carousel };
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
import { cn } from "../../utils/cn.js";
|
|
2
|
+
import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from "./chart.js";
|
|
3
|
+
import { buildAutoSeriesConfig, coerceSeriesValuesToNumbers, inferCategoryKey } from "./chart-series-data.js";
|
|
4
|
+
import * as React$1 from "react";
|
|
5
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
|
|
7
|
+
//#region src/components/chart/area-chart.tsx
|
|
8
|
+
var DEFAULT_MARGIN = {
|
|
9
|
+
top: 0,
|
|
10
|
+
right: 0,
|
|
11
|
+
bottom: 0,
|
|
12
|
+
left: 0
|
|
13
|
+
};
|
|
14
|
+
var DEFAULT_X_AXIS_PADDING = {
|
|
15
|
+
left: 0,
|
|
16
|
+
right: 0
|
|
17
|
+
};
|
|
18
|
+
var AreaChart$1 = React$1.forwardRef(function AreaChart$2({ data, config: explicitConfig, categoryKey, stacked = false, curveType = "monotone", showTooltip = true, showLegend = false, showGrid = false, hideXAxis = false, hideYAxis = false, xAxisTickFormatter, yAxisTickFormatter, className, margin, xAxisPadding }, ref) {
|
|
19
|
+
const resolvedMargin = {
|
|
20
|
+
...DEFAULT_MARGIN,
|
|
21
|
+
...margin
|
|
22
|
+
};
|
|
23
|
+
const resolvedXAxisPadding = {
|
|
24
|
+
...DEFAULT_X_AXIS_PADDING,
|
|
25
|
+
...xAxisPadding
|
|
26
|
+
};
|
|
27
|
+
const resolvedCategoryKey = React$1.useMemo(() => categoryKey ?? inferCategoryKey(data[0]), [categoryKey, data]);
|
|
28
|
+
const config = React$1.useMemo(() => buildAutoSeriesConfig(data, resolvedCategoryKey, explicitConfig), [
|
|
29
|
+
data,
|
|
30
|
+
resolvedCategoryKey,
|
|
31
|
+
explicitConfig
|
|
32
|
+
]);
|
|
33
|
+
const seriesKeys = React$1.useMemo(() => Object.keys(config), [config]);
|
|
34
|
+
const chartData = React$1.useMemo(() => coerceSeriesValuesToNumbers(data, seriesKeys), [data, seriesKeys]);
|
|
35
|
+
const gradientPrefix = `area-fill-${React$1.useId().replace(/:/g, "")}`;
|
|
36
|
+
const gradientStops = stacked ? {
|
|
37
|
+
peak: .42,
|
|
38
|
+
highlight: .32,
|
|
39
|
+
mid: .18,
|
|
40
|
+
soft: .06
|
|
41
|
+
} : {
|
|
42
|
+
peak: .28,
|
|
43
|
+
highlight: .22,
|
|
44
|
+
mid: .1,
|
|
45
|
+
soft: .03
|
|
46
|
+
};
|
|
47
|
+
return /* @__PURE__ */ jsx(ChartContainer, {
|
|
48
|
+
ref,
|
|
49
|
+
config,
|
|
50
|
+
className: cn("w-full", className),
|
|
51
|
+
children: /* @__PURE__ */ jsxs(AreaChart, {
|
|
52
|
+
accessibilityLayer: true,
|
|
53
|
+
data: chartData,
|
|
54
|
+
margin: resolvedMargin,
|
|
55
|
+
children: [
|
|
56
|
+
/* @__PURE__ */ jsx("defs", { children: seriesKeys.map((key) => /* @__PURE__ */ jsxs("linearGradient", {
|
|
57
|
+
id: `${gradientPrefix}-${key}`,
|
|
58
|
+
x1: "0",
|
|
59
|
+
y1: "0",
|
|
60
|
+
x2: "0",
|
|
61
|
+
y2: "1",
|
|
62
|
+
children: [
|
|
63
|
+
/* @__PURE__ */ jsx("stop", {
|
|
64
|
+
offset: "0%",
|
|
65
|
+
stopColor: `var(--color-${key})`,
|
|
66
|
+
stopOpacity: gradientStops.peak
|
|
67
|
+
}),
|
|
68
|
+
/* @__PURE__ */ jsx("stop", {
|
|
69
|
+
offset: "14%",
|
|
70
|
+
stopColor: `var(--color-${key})`,
|
|
71
|
+
stopOpacity: gradientStops.highlight
|
|
72
|
+
}),
|
|
73
|
+
/* @__PURE__ */ jsx("stop", {
|
|
74
|
+
offset: "38%",
|
|
75
|
+
stopColor: `var(--color-${key})`,
|
|
76
|
+
stopOpacity: gradientStops.mid
|
|
77
|
+
}),
|
|
78
|
+
/* @__PURE__ */ jsx("stop", {
|
|
79
|
+
offset: "70%",
|
|
80
|
+
stopColor: `var(--color-${key})`,
|
|
81
|
+
stopOpacity: gradientStops.soft
|
|
82
|
+
}),
|
|
83
|
+
/* @__PURE__ */ jsx("stop", {
|
|
84
|
+
offset: "100%",
|
|
85
|
+
stopColor: `var(--color-${key})`,
|
|
86
|
+
stopOpacity: 0
|
|
87
|
+
})
|
|
88
|
+
]
|
|
89
|
+
}, key)) }),
|
|
90
|
+
showGrid && /* @__PURE__ */ jsx(CartesianGrid, { vertical: false }),
|
|
91
|
+
/* @__PURE__ */ jsx(XAxis, {
|
|
92
|
+
type: "category",
|
|
93
|
+
dataKey: resolvedCategoryKey,
|
|
94
|
+
hide: hideXAxis,
|
|
95
|
+
tickLine: false,
|
|
96
|
+
axisLine: false,
|
|
97
|
+
tickMargin: 8,
|
|
98
|
+
tickFormatter: xAxisTickFormatter,
|
|
99
|
+
padding: resolvedXAxisPadding,
|
|
100
|
+
interval: "preserveStartEnd"
|
|
101
|
+
}),
|
|
102
|
+
/* @__PURE__ */ jsx(YAxis, {
|
|
103
|
+
type: "number",
|
|
104
|
+
hide: hideYAxis,
|
|
105
|
+
tickLine: false,
|
|
106
|
+
axisLine: false,
|
|
107
|
+
tickMargin: 8,
|
|
108
|
+
tickFormatter: yAxisTickFormatter
|
|
109
|
+
}),
|
|
110
|
+
showTooltip && /* @__PURE__ */ jsx(ChartTooltip, {
|
|
111
|
+
cursor: {
|
|
112
|
+
fill: "var(--color-muted)",
|
|
113
|
+
fillOpacity: .12
|
|
114
|
+
},
|
|
115
|
+
content: /* @__PURE__ */ jsx(ChartTooltipContent, {})
|
|
116
|
+
}),
|
|
117
|
+
showLegend && /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }),
|
|
118
|
+
seriesKeys.map((key) => /* @__PURE__ */ jsx(Area, {
|
|
119
|
+
type: curveType,
|
|
120
|
+
dataKey: key,
|
|
121
|
+
stackId: stacked ? "stack" : void 0,
|
|
122
|
+
fill: `url(#${gradientPrefix}-${key})`,
|
|
123
|
+
stroke: `var(--color-${key})`,
|
|
124
|
+
strokeWidth: 1,
|
|
125
|
+
strokeOpacity: .75,
|
|
126
|
+
strokeLinecap: "round",
|
|
127
|
+
strokeLinejoin: "round",
|
|
128
|
+
isAnimationActive: true
|
|
129
|
+
}, key))
|
|
130
|
+
]
|
|
131
|
+
})
|
|
132
|
+
});
|
|
133
|
+
});
|
|
134
|
+
//#endregion
|
|
135
|
+
export { AreaChart$1 as AreaChart };
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
import { cn } from "../../utils/cn.js";
|
|
2
|
+
import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from "./chart.js";
|
|
3
|
+
import { buildAutoSeriesConfig, coerceSeriesValuesToNumbers, inferCategoryKey } from "./chart-series-data.js";
|
|
4
|
+
import * as React$1 from "react";
|
|
5
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
|
|
7
|
+
//#region src/components/chart/bar-chart.tsx
|
|
8
|
+
var BAR_SIZE_MAP = {
|
|
9
|
+
sm: 14,
|
|
10
|
+
default: 24,
|
|
11
|
+
lg: 36
|
|
12
|
+
};
|
|
13
|
+
var BAR_RADIUS = 4;
|
|
14
|
+
function resolveBarSize(size) {
|
|
15
|
+
if (size == null) return BAR_SIZE_MAP.default;
|
|
16
|
+
if (typeof size === "number") return size;
|
|
17
|
+
return BAR_SIZE_MAP[size];
|
|
18
|
+
}
|
|
19
|
+
function getBarRadius(index, total, stacked, rounded, layout) {
|
|
20
|
+
if (!rounded) return [
|
|
21
|
+
0,
|
|
22
|
+
0,
|
|
23
|
+
0,
|
|
24
|
+
0
|
|
25
|
+
];
|
|
26
|
+
const r = BAR_RADIUS;
|
|
27
|
+
if (!stacked || total === 1) return layout === "horizontal" ? [
|
|
28
|
+
r,
|
|
29
|
+
r,
|
|
30
|
+
0,
|
|
31
|
+
0
|
|
32
|
+
] : [
|
|
33
|
+
r,
|
|
34
|
+
0,
|
|
35
|
+
0,
|
|
36
|
+
r
|
|
37
|
+
];
|
|
38
|
+
const isFirst = index === 0;
|
|
39
|
+
const isLast = index === total - 1;
|
|
40
|
+
if (layout === "vertical") {
|
|
41
|
+
if (isFirst) return [
|
|
42
|
+
r,
|
|
43
|
+
0,
|
|
44
|
+
0,
|
|
45
|
+
r
|
|
46
|
+
];
|
|
47
|
+
if (isLast) return [
|
|
48
|
+
0,
|
|
49
|
+
r,
|
|
50
|
+
r,
|
|
51
|
+
0
|
|
52
|
+
];
|
|
53
|
+
return [
|
|
54
|
+
0,
|
|
55
|
+
0,
|
|
56
|
+
0,
|
|
57
|
+
0
|
|
58
|
+
];
|
|
59
|
+
}
|
|
60
|
+
if (isLast) return [
|
|
61
|
+
r,
|
|
62
|
+
r,
|
|
63
|
+
0,
|
|
64
|
+
0
|
|
65
|
+
];
|
|
66
|
+
if (isFirst) return [
|
|
67
|
+
0,
|
|
68
|
+
0,
|
|
69
|
+
0,
|
|
70
|
+
0
|
|
71
|
+
];
|
|
72
|
+
return [
|
|
73
|
+
0,
|
|
74
|
+
0,
|
|
75
|
+
0,
|
|
76
|
+
0
|
|
77
|
+
];
|
|
78
|
+
}
|
|
79
|
+
var BarChart$1 = React$1.forwardRef(function BarChart$2({ data, config: explicitConfig, categoryKey, layout = "horizontal", stacked = false, barSize, rounded = true, showTooltip = true, showLegend = false, showGrid = false, hideXAxis = false, hideYAxis = false, xAxisTickFormatter, yAxisTickFormatter, labelFormatter, tooltipFormatter, tooltipContent, barGap, categoryGap, className, margin }, ref) {
|
|
80
|
+
const resolvedCategoryKey = React$1.useMemo(() => categoryKey ?? inferCategoryKey(data[0]), [categoryKey, data]);
|
|
81
|
+
const config = React$1.useMemo(() => buildAutoSeriesConfig(data, resolvedCategoryKey, explicitConfig), [
|
|
82
|
+
data,
|
|
83
|
+
resolvedCategoryKey,
|
|
84
|
+
explicitConfig
|
|
85
|
+
]);
|
|
86
|
+
const barKeys = React$1.useMemo(() => Object.keys(config), [config]);
|
|
87
|
+
const chartData = React$1.useMemo(() => coerceSeriesValuesToNumbers(data, barKeys), [data, barKeys]);
|
|
88
|
+
const maxBarSize = resolveBarSize(barSize);
|
|
89
|
+
const isVertical = layout === "vertical";
|
|
90
|
+
return /* @__PURE__ */ jsx(ChartContainer, {
|
|
91
|
+
ref,
|
|
92
|
+
config,
|
|
93
|
+
className: cn("w-full", className),
|
|
94
|
+
children: /* @__PURE__ */ jsxs(BarChart, {
|
|
95
|
+
accessibilityLayer: true,
|
|
96
|
+
layout,
|
|
97
|
+
data: chartData,
|
|
98
|
+
margin,
|
|
99
|
+
barGap,
|
|
100
|
+
barCategoryGap: categoryGap,
|
|
101
|
+
children: [
|
|
102
|
+
showGrid && /* @__PURE__ */ jsx(CartesianGrid, {
|
|
103
|
+
vertical: !isVertical,
|
|
104
|
+
horizontal: isVertical
|
|
105
|
+
}),
|
|
106
|
+
/* @__PURE__ */ jsx(XAxis, {
|
|
107
|
+
type: isVertical ? "number" : "category",
|
|
108
|
+
dataKey: isVertical ? void 0 : resolvedCategoryKey,
|
|
109
|
+
hide: hideXAxis,
|
|
110
|
+
tickLine: false,
|
|
111
|
+
axisLine: false,
|
|
112
|
+
tickMargin: 8,
|
|
113
|
+
tickFormatter: xAxisTickFormatter,
|
|
114
|
+
...isVertical ? {
|
|
115
|
+
domain: [0, "dataMax"],
|
|
116
|
+
padding: {
|
|
117
|
+
left: 0,
|
|
118
|
+
right: 0
|
|
119
|
+
}
|
|
120
|
+
} : {}
|
|
121
|
+
}),
|
|
122
|
+
/* @__PURE__ */ jsx(YAxis, {
|
|
123
|
+
type: isVertical ? "category" : "number",
|
|
124
|
+
dataKey: isVertical ? resolvedCategoryKey : void 0,
|
|
125
|
+
hide: hideYAxis,
|
|
126
|
+
tickLine: false,
|
|
127
|
+
axisLine: false,
|
|
128
|
+
tickFormatter: yAxisTickFormatter
|
|
129
|
+
}),
|
|
130
|
+
showTooltip && /* @__PURE__ */ jsx(ChartTooltip, {
|
|
131
|
+
cursor: {
|
|
132
|
+
fill: "var(--color-muted)",
|
|
133
|
+
fillOpacity: .12
|
|
134
|
+
},
|
|
135
|
+
labelFormatter,
|
|
136
|
+
content: tooltipContent ?? /* @__PURE__ */ jsx(ChartTooltipContent, { formatter: tooltipFormatter })
|
|
137
|
+
}),
|
|
138
|
+
showLegend && /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }),
|
|
139
|
+
barKeys.map((key, i) => /* @__PURE__ */ jsx(Bar, {
|
|
140
|
+
dataKey: key,
|
|
141
|
+
stackId: stacked ? "stack" : void 0,
|
|
142
|
+
fill: `var(--color-${key})`,
|
|
143
|
+
maxBarSize,
|
|
144
|
+
radius: getBarRadius(i, barKeys.length, stacked, rounded, layout)
|
|
145
|
+
}, key))
|
|
146
|
+
]
|
|
147
|
+
})
|
|
148
|
+
});
|
|
149
|
+
});
|
|
150
|
+
//#endregion
|
|
151
|
+
export { BarChart$1 as BarChart };
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
//#region src/components/chart/chart-colors.ts
|
|
2
|
+
/**
|
|
3
|
+
* Default series palette (order preserved). Values resolve from `@theme` in `colors.css`
|
|
4
|
+
* (`--color-chart-1` … `--color-chart-10`). Consumers must load library styles (e.g.
|
|
5
|
+
* `@espressif/dashboard-ui-components/styles`) so these variables exist. Additional
|
|
6
|
+
* entries (`11` … `20`) are explicit hex accents.
|
|
7
|
+
*/
|
|
8
|
+
var DEFAULT_CHART_SERIES_COLORS = [
|
|
9
|
+
"var(--color-chart-1)",
|
|
10
|
+
"var(--color-chart-2)",
|
|
11
|
+
"var(--color-chart-3)",
|
|
12
|
+
"var(--color-chart-4)",
|
|
13
|
+
"var(--color-chart-5)",
|
|
14
|
+
"var(--color-chart-6)",
|
|
15
|
+
"var(--color-chart-7)",
|
|
16
|
+
"var(--color-chart-8)",
|
|
17
|
+
"var(--color-chart-9)",
|
|
18
|
+
"var(--color-chart-10)",
|
|
19
|
+
"#7DB7FF",
|
|
20
|
+
"#78D6B2",
|
|
21
|
+
"#FFB98A",
|
|
22
|
+
"#B79CED",
|
|
23
|
+
"#F6A6C1",
|
|
24
|
+
"#7ED7D1",
|
|
25
|
+
"#F5D67A",
|
|
26
|
+
"#FF9C9C",
|
|
27
|
+
"#D6B5FF",
|
|
28
|
+
"#A8D5BA"
|
|
29
|
+
];
|
|
30
|
+
/**
|
|
31
|
+
* Ordinal series palette as named keys (`color1` … `color20`). First 10 use the
|
|
32
|
+
* theme CSS vars from `colors.css`; remaining entries are explicit hex accents.
|
|
33
|
+
*
|
|
34
|
+
* {@link DEFAULT_CHART_SERIES_COLORS}; use this when you want dot access like
|
|
35
|
+
* `CHART_CATEGORY_COLORS.success` for categories.
|
|
36
|
+
*/
|
|
37
|
+
var CHART_SERIES_COLORS = {
|
|
38
|
+
color1: DEFAULT_CHART_SERIES_COLORS[0],
|
|
39
|
+
color2: DEFAULT_CHART_SERIES_COLORS[1],
|
|
40
|
+
color3: DEFAULT_CHART_SERIES_COLORS[2],
|
|
41
|
+
color4: DEFAULT_CHART_SERIES_COLORS[3],
|
|
42
|
+
color5: DEFAULT_CHART_SERIES_COLORS[4],
|
|
43
|
+
color6: DEFAULT_CHART_SERIES_COLORS[5],
|
|
44
|
+
color7: DEFAULT_CHART_SERIES_COLORS[6],
|
|
45
|
+
color8: DEFAULT_CHART_SERIES_COLORS[7],
|
|
46
|
+
color9: DEFAULT_CHART_SERIES_COLORS[8],
|
|
47
|
+
color10: DEFAULT_CHART_SERIES_COLORS[9],
|
|
48
|
+
color11: DEFAULT_CHART_SERIES_COLORS[10],
|
|
49
|
+
color12: DEFAULT_CHART_SERIES_COLORS[11],
|
|
50
|
+
color13: DEFAULT_CHART_SERIES_COLORS[12],
|
|
51
|
+
color14: DEFAULT_CHART_SERIES_COLORS[13],
|
|
52
|
+
color15: DEFAULT_CHART_SERIES_COLORS[14],
|
|
53
|
+
color16: DEFAULT_CHART_SERIES_COLORS[15],
|
|
54
|
+
color17: DEFAULT_CHART_SERIES_COLORS[16],
|
|
55
|
+
color18: DEFAULT_CHART_SERIES_COLORS[17],
|
|
56
|
+
color19: DEFAULT_CHART_SERIES_COLORS[18],
|
|
57
|
+
color20: DEFAULT_CHART_SERIES_COLORS[19]
|
|
58
|
+
};
|
|
59
|
+
/** Semantic chart colors — resolve from `colors.css` (`--color-chart-success`, etc.). For ordinal series see {@link CHART_SERIES_COLORS}. */
|
|
60
|
+
var CHART_CATEGORY_COLORS = {
|
|
61
|
+
primary: "var(--color-chart-primary)",
|
|
62
|
+
secondary: "var(--color-chart-secondary)",
|
|
63
|
+
success: "var(--color-chart-success)",
|
|
64
|
+
error: "var(--color-chart-error)",
|
|
65
|
+
warning: "var(--color-chart-warning)",
|
|
66
|
+
disabled: "var(--color-chart-disabled)",
|
|
67
|
+
gray: "var(--color-chart-gray)"
|
|
68
|
+
};
|
|
69
|
+
function getChartSeriesColor(index) {
|
|
70
|
+
return DEFAULT_CHART_SERIES_COLORS[index % DEFAULT_CHART_SERIES_COLORS.length];
|
|
71
|
+
}
|
|
72
|
+
function buildSeriesChartConfig(keys, options) {
|
|
73
|
+
const palette = options?.colors && options.colors.length > 0 ? options.colors : DEFAULT_CHART_SERIES_COLORS;
|
|
74
|
+
const config = {};
|
|
75
|
+
for (let i = 0; i < keys.length; i++) {
|
|
76
|
+
const key = keys[i];
|
|
77
|
+
config[key] = {
|
|
78
|
+
label: options?.labels?.[key] ?? key,
|
|
79
|
+
color: palette[i % palette.length]
|
|
80
|
+
};
|
|
81
|
+
}
|
|
82
|
+
return config;
|
|
83
|
+
}
|
|
84
|
+
//#endregion
|
|
85
|
+
export { CHART_CATEGORY_COLORS, CHART_SERIES_COLORS, DEFAULT_CHART_SERIES_COLORS, buildSeriesChartConfig, getChartSeriesColor };
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { buildSeriesChartConfig } from "./chart-colors.js";
|
|
2
|
+
//#region src/components/chart/chart-series-data.ts
|
|
3
|
+
/**
|
|
4
|
+
* Column names that map to the category / X axis even when values look numeric
|
|
5
|
+
* (e.g. Unix epoch in `t`). Without this, `t: 1777507200` would be treated as a
|
|
6
|
+
* Y series and `usage` could be confused as category depending on key order.
|
|
7
|
+
*/
|
|
8
|
+
var CATEGORY_AXIS_KEY_RE = /^(t|time|timestamp|date|ts|x|day|month|year|segment|label|name)$/i;
|
|
9
|
+
var NUMERIC_STRING_RE = /^-?\d+(\.\d+)?([eE][+-]?\d+)?$/;
|
|
10
|
+
function isLikelyYSeriesColumn(key, value) {
|
|
11
|
+
if (CATEGORY_AXIS_KEY_RE.test(key)) return false;
|
|
12
|
+
if (typeof value === "number" && Number.isFinite(value)) return true;
|
|
13
|
+
if (typeof value === "string") {
|
|
14
|
+
const s = value.trim();
|
|
15
|
+
if (s === "") return false;
|
|
16
|
+
return NUMERIC_STRING_RE.test(s);
|
|
17
|
+
}
|
|
18
|
+
return false;
|
|
19
|
+
}
|
|
20
|
+
/** First column that is not a plausible Y-metric; otherwise undefined (index / implicit X). */
|
|
21
|
+
function inferCategoryKey(firstRow) {
|
|
22
|
+
if (!firstRow) return void 0;
|
|
23
|
+
for (const key of Object.keys(firstRow)) if (!isLikelyYSeriesColumn(key, firstRow[key])) return key;
|
|
24
|
+
}
|
|
25
|
+
function deriveSeriesKeysFromRow(firstRow, categoryKey) {
|
|
26
|
+
return Object.keys(firstRow).filter((k) => k !== categoryKey && isLikelyYSeriesColumn(k, firstRow[k]));
|
|
27
|
+
}
|
|
28
|
+
/** Coerce numeric strings to numbers for series columns so Recharts scales/lines work. */
|
|
29
|
+
function coerceSeriesValuesToNumbers(data, seriesKeys) {
|
|
30
|
+
if (seriesKeys.length === 0) return data;
|
|
31
|
+
return data.map((row) => {
|
|
32
|
+
const out = { ...row };
|
|
33
|
+
for (const key of seriesKeys) {
|
|
34
|
+
const v = out[key];
|
|
35
|
+
if (typeof v === "string") {
|
|
36
|
+
const s = v.trim();
|
|
37
|
+
if (NUMERIC_STRING_RE.test(s)) {
|
|
38
|
+
const n = Number(s);
|
|
39
|
+
if (Number.isFinite(n)) out[key] = n;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
return out;
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
function buildAutoSeriesConfig(data, categoryKey, explicitConfig) {
|
|
47
|
+
if (explicitConfig) return explicitConfig;
|
|
48
|
+
const first = data[0];
|
|
49
|
+
if (!first) return {};
|
|
50
|
+
return buildSeriesChartConfig(deriveSeriesKeysFromRow(first, categoryKey));
|
|
51
|
+
}
|
|
52
|
+
//#endregion
|
|
53
|
+
export { buildAutoSeriesConfig, coerceSeriesValuesToNumbers, deriveSeriesKeysFromRow, inferCategoryKey, isLikelyYSeriesColumn };
|