@ojiepermana/angular 21.2.4 → 21.3.3
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 +155 -12
- package/component/accordion/package.json +4 -0
- package/component/alert/package.json +4 -0
- package/component/alert-dialog/package.json +4 -0
- package/component/aspect-ratio/package.json +4 -0
- package/component/avatar/package.json +4 -0
- package/component/badge/package.json +4 -0
- package/component/breadcrumb/package.json +4 -0
- package/component/button/package.json +4 -0
- package/component/button-group/package.json +4 -0
- package/component/calendar/package.json +4 -0
- package/component/card/package.json +4 -0
- package/component/carousel/package.json +4 -0
- package/component/chart/README.md +249 -0
- package/component/chart/area/package.json +4 -0
- package/component/chart/bar/package.json +4 -0
- package/component/chart/line/package.json +4 -0
- package/component/chart/package.json +4 -0
- package/component/chart/pie/package.json +4 -0
- package/component/chart/radar/package.json +4 -0
- package/component/chart/radial/package.json +4 -0
- package/component/chart/scatter/package.json +4 -0
- package/component/checkbox/package.json +4 -0
- package/component/collapsible/package.json +4 -0
- package/component/combobox/package.json +4 -0
- package/component/command/package.json +4 -0
- package/component/context-menu/package.json +4 -0
- package/component/date-picker/package.json +4 -0
- package/component/dialog/package.json +4 -0
- package/component/drawer/package.json +4 -0
- package/component/dropdown-menu/package.json +4 -0
- package/component/form/package.json +4 -0
- package/component/input/package.json +4 -0
- package/component/input-group/package.json +4 -0
- package/component/item/package.json +4 -0
- package/component/label/package.json +4 -0
- package/component/pagination/package.json +4 -0
- package/component/popover/package.json +4 -0
- package/component/progress/package.json +4 -0
- package/component/radio/package.json +4 -0
- package/component/scroll-area/package.json +4 -0
- package/component/select/package.json +4 -0
- package/component/separator/package.json +4 -0
- package/component/sheet/package.json +4 -0
- package/component/skeleton/package.json +4 -0
- package/component/slider/package.json +4 -0
- package/component/switch/package.json +4 -0
- package/component/table/package.json +4 -0
- package/component/tabs/package.json +4 -0
- package/component/textarea/package.json +4 -0
- package/component/toast/package.json +4 -0
- package/component/tooltip/package.json +4 -0
- package/component/utils/package.json +4 -0
- package/fesm2022/ojiepermana-angular-component-accordion.mjs +174 -0
- package/fesm2022/ojiepermana-angular-component-accordion.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-alert-dialog.mjs +242 -0
- package/fesm2022/ojiepermana-angular-component-alert-dialog.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-alert.mjs +90 -0
- package/fesm2022/ojiepermana-angular-component-alert.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-aspect-ratio.mjs +33 -0
- package/fesm2022/ojiepermana-angular-component-aspect-ratio.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-avatar.mjs +123 -0
- package/fesm2022/ojiepermana-angular-component-avatar.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-badge.mjs +47 -0
- package/fesm2022/ojiepermana-angular-component-badge.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-breadcrumb.mjs +186 -0
- package/fesm2022/ojiepermana-angular-component-breadcrumb.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-button-group.mjs +95 -0
- package/fesm2022/ojiepermana-angular-component-button-group.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-button.mjs +64 -0
- package/fesm2022/ojiepermana-angular-component-button.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-calendar.mjs +78 -0
- package/fesm2022/ojiepermana-angular-component-calendar.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-card.mjs +137 -0
- package/fesm2022/ojiepermana-angular-component-card.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-carousel.mjs +310 -0
- package/fesm2022/ojiepermana-angular-component-carousel.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-chart-area.mjs +6 -0
- package/fesm2022/ojiepermana-angular-component-chart-area.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-chart-bar.mjs +6 -0
- package/fesm2022/ojiepermana-angular-component-chart-bar.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-chart-line.mjs +6 -0
- package/fesm2022/ojiepermana-angular-component-chart-line.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-chart-pie.mjs +6 -0
- package/fesm2022/ojiepermana-angular-component-chart-pie.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-chart-radar.mjs +6 -0
- package/fesm2022/ojiepermana-angular-component-chart-radar.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-chart-radial.mjs +6 -0
- package/fesm2022/ojiepermana-angular-component-chart-radial.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-chart-scatter.mjs +6 -0
- package/fesm2022/ojiepermana-angular-component-chart-scatter.mjs.map +1 -0
- package/fesm2022/{ojiepermana-angular-chart.mjs → ojiepermana-angular-component-chart.mjs} +2 -2
- package/fesm2022/ojiepermana-angular-component-chart.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-checkbox.mjs +104 -0
- package/fesm2022/ojiepermana-angular-component-checkbox.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-collapsible.mjs +116 -0
- package/fesm2022/ojiepermana-angular-component-collapsible.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-combobox.mjs +263 -0
- package/fesm2022/ojiepermana-angular-component-combobox.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-command.mjs +268 -0
- package/fesm2022/ojiepermana-angular-component-command.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-context-menu.mjs +100 -0
- package/fesm2022/ojiepermana-angular-component-context-menu.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-date-picker.mjs +155 -0
- package/fesm2022/ojiepermana-angular-component-date-picker.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-dialog.mjs +262 -0
- package/fesm2022/ojiepermana-angular-component-dialog.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-drawer.mjs +6 -0
- package/fesm2022/ojiepermana-angular-component-drawer.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-dropdown-menu.mjs +458 -0
- package/fesm2022/ojiepermana-angular-component-dropdown-menu.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-form.mjs +208 -0
- package/fesm2022/ojiepermana-angular-component-form.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-input-group.mjs +164 -0
- package/fesm2022/ojiepermana-angular-component-input-group.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-input.mjs +43 -0
- package/fesm2022/ojiepermana-angular-component-input.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-item.mjs +241 -0
- package/fesm2022/ojiepermana-angular-component-item.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-label.mjs +30 -0
- package/fesm2022/ojiepermana-angular-component-label.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-pagination.mjs +192 -0
- package/fesm2022/ojiepermana-angular-component-pagination.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-popover.mjs +163 -0
- package/fesm2022/ojiepermana-angular-component-popover.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-progress.mjs +53 -0
- package/fesm2022/ojiepermana-angular-component-progress.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-radio.mjs +92 -0
- package/fesm2022/ojiepermana-angular-component-radio.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-scroll-area.mjs +48 -0
- package/fesm2022/ojiepermana-angular-component-scroll-area.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-select.mjs +131 -0
- package/fesm2022/ojiepermana-angular-component-select.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-separator.mjs +33 -0
- package/fesm2022/ojiepermana-angular-component-separator.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-sheet.mjs +235 -0
- package/fesm2022/ojiepermana-angular-component-sheet.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-skeleton.mjs +29 -0
- package/fesm2022/ojiepermana-angular-component-skeleton.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-slider.mjs +29 -0
- package/fesm2022/ojiepermana-angular-component-slider.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-switch.mjs +84 -0
- package/fesm2022/ojiepermana-angular-component-switch.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-table.mjs +139 -0
- package/fesm2022/ojiepermana-angular-component-table.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-tabs.mjs +252 -0
- package/fesm2022/ojiepermana-angular-component-tabs.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-textarea.mjs +37 -0
- package/fesm2022/ojiepermana-angular-component-textarea.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-toast.mjs +47 -0
- package/fesm2022/ojiepermana-angular-component-toast.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-tooltip.mjs +56 -0
- package/fesm2022/ojiepermana-angular-component-tooltip.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-component-utils.mjs +13 -0
- package/fesm2022/ojiepermana-angular-component-utils.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-generator-api.mjs +2 -1
- package/fesm2022/ojiepermana-angular-generator-api.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-layout-component.mjs +581 -0
- package/fesm2022/ojiepermana-angular-layout-component.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-layout-empty.mjs +49 -0
- package/fesm2022/ojiepermana-angular-layout-empty.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-layout-horizontal.mjs +119 -0
- package/fesm2022/ojiepermana-angular-layout-horizontal.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-layout-provider.mjs +21 -0
- package/fesm2022/ojiepermana-angular-layout-provider.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-layout-services.mjs +114 -0
- package/fesm2022/ojiepermana-angular-layout-services.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-layout-shell.mjs +48 -0
- package/fesm2022/ojiepermana-angular-layout-shell.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-layout-token-directive.mjs +27 -0
- package/fesm2022/ojiepermana-angular-layout-token-directive.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-layout-token.mjs +33 -0
- package/fesm2022/ojiepermana-angular-layout-token.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-layout-vertical.mjs +113 -0
- package/fesm2022/ojiepermana-angular-layout-vertical.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-layout.mjs +141 -137
- package/fesm2022/ojiepermana-angular-layout.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-navigation-demo-data.mjs +334 -0
- package/fesm2022/ojiepermana-angular-navigation-demo-data.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-navigation-icon.mjs +59 -0
- package/fesm2022/ojiepermana-angular-navigation-icon.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-navigation-item.mjs +548 -0
- package/fesm2022/ojiepermana-angular-navigation-item.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-navigation-service.mjs +204 -0
- package/fesm2022/ojiepermana-angular-navigation-service.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-navigation-sidebar.mjs +373 -0
- package/fesm2022/ojiepermana-angular-navigation-sidebar.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-navigation-topbar.mjs +433 -0
- package/fesm2022/ojiepermana-angular-navigation-topbar.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-navigation-types.mjs +4 -0
- package/fesm2022/ojiepermana-angular-navigation-types.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-theme-provider.mjs +35 -0
- package/fesm2022/ojiepermana-angular-theme-provider.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-theme-services.mjs +286 -0
- package/fesm2022/ojiepermana-angular-theme-services.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-theme-token.mjs +56 -0
- package/fesm2022/ojiepermana-angular-theme-token.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-theme.mjs +31 -56
- package/fesm2022/ojiepermana-angular-theme.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular.mjs +7 -6
- package/fesm2022/ojiepermana-angular.mjs.map +1 -1
- package/generator/api/README.md +18 -15
- package/generator/api/bin/schematics/init/index.js +4 -2
- package/generator/api/bin/src/config/schema.js +2 -1
- package/generator/api/bin/src/emit/navigation.js +1 -1
- package/generator/api/bin/src/layout/per-domain.js +7 -3
- package/generator/api/sdk.config.example.json +4 -2
- package/layout/component/package.json +4 -0
- package/layout/empty/package.json +4 -0
- package/layout/horizontal/package.json +4 -0
- package/layout/provider/package.json +4 -0
- package/layout/services/package.json +4 -0
- package/layout/shell/package.json +4 -0
- package/layout/token/directive/package.json +4 -0
- package/layout/token/package.json +4 -0
- package/layout/vertical/package.json +4 -0
- package/navigation/demo-data/package.json +4 -0
- package/navigation/icon/package.json +4 -0
- package/navigation/item/package.json +4 -0
- package/navigation/service/package.json +4 -0
- package/navigation/sidebar/package.json +4 -0
- package/navigation/topbar/package.json +4 -0
- package/navigation/types/package.json +4 -0
- package/package.json +284 -16
- package/theme/README.md +67 -0
- package/theme/provider/package.json +4 -0
- package/theme/services/package.json +4 -0
- package/theme/styles/index.css +12 -7
- package/theme/token/package.json +4 -0
- package/types/ojiepermana-angular-component-accordion.d.ts +51 -0
- package/types/ojiepermana-angular-component-alert-dialog.d.ts +93 -0
- package/types/ojiepermana-angular-component-alert.d.ts +37 -0
- package/types/ojiepermana-angular-component-aspect-ratio.d.ts +12 -0
- package/types/ojiepermana-angular-component-avatar.d.ts +51 -0
- package/types/ojiepermana-angular-component-badge.d.ts +19 -0
- package/types/ojiepermana-angular-component-breadcrumb.d.ts +46 -0
- package/types/ojiepermana-angular-component-button-group.d.ts +26 -0
- package/types/ojiepermana-angular-component-button.d.ts +22 -0
- package/types/ojiepermana-angular-component-calendar.d.ts +33 -0
- package/types/ojiepermana-angular-component-card.d.ts +60 -0
- package/types/ojiepermana-angular-component-carousel.d.ts +86 -0
- package/types/ojiepermana-angular-component-chart-area.d.ts +1 -0
- package/types/ojiepermana-angular-component-chart-bar.d.ts +1 -0
- package/types/ojiepermana-angular-component-chart-line.d.ts +1 -0
- package/types/ojiepermana-angular-component-chart-pie.d.ts +1 -0
- package/types/ojiepermana-angular-component-chart-radar.d.ts +1 -0
- package/types/ojiepermana-angular-component-chart-radial.d.ts +1 -0
- package/types/ojiepermana-angular-component-chart-scatter.d.ts +1 -0
- package/types/{ojiepermana-angular-chart.d.ts → ojiepermana-angular-component-chart.d.ts} +15 -15
- package/types/ojiepermana-angular-component-checkbox.d.ts +35 -0
- package/types/ojiepermana-angular-component-collapsible.d.ts +42 -0
- package/types/ojiepermana-angular-component-combobox.d.ts +51 -0
- package/types/ojiepermana-angular-component-command.d.ts +99 -0
- package/types/ojiepermana-angular-component-context-menu.d.ts +35 -0
- package/types/ojiepermana-angular-component-date-picker.d.ts +41 -0
- package/types/ojiepermana-angular-component-dialog.d.ts +87 -0
- package/types/ojiepermana-angular-component-drawer.d.ts +1 -0
- package/types/ojiepermana-angular-component-dropdown-menu.d.ts +135 -0
- package/types/ojiepermana-angular-component-form.d.ts +92 -0
- package/types/ojiepermana-angular-component-input-group.d.ts +51 -0
- package/types/ojiepermana-angular-component-input.d.ts +16 -0
- package/types/ojiepermana-angular-component-item.d.ts +88 -0
- package/types/ojiepermana-angular-component-label.d.ts +11 -0
- package/types/ojiepermana-angular-component-pagination.d.ts +27 -0
- package/types/ojiepermana-angular-component-popover.d.ts +43 -0
- package/types/ojiepermana-angular-component-progress.d.ts +17 -0
- package/types/ojiepermana-angular-component-radio.d.ts +34 -0
- package/types/ojiepermana-angular-component-scroll-area.d.ts +19 -0
- package/types/ojiepermana-angular-component-select.d.ts +45 -0
- package/types/ojiepermana-angular-component-separator.d.ts +14 -0
- package/types/ojiepermana-angular-component-sheet.d.ts +74 -0
- package/types/ojiepermana-angular-component-skeleton.d.ts +10 -0
- package/types/ojiepermana-angular-component-slider.d.ts +16 -0
- package/types/ojiepermana-angular-component-switch.d.ts +30 -0
- package/types/ojiepermana-angular-component-table.d.ts +52 -0
- package/types/ojiepermana-angular-component-tabs.d.ts +92 -0
- package/types/ojiepermana-angular-component-textarea.d.ts +12 -0
- package/types/ojiepermana-angular-component-toast.d.ts +29 -0
- package/types/ojiepermana-angular-component-tooltip.d.ts +22 -0
- package/types/ojiepermana-angular-component-utils.d.ts +5 -0
- package/types/ojiepermana-angular-generator-api.d.ts +2 -1
- package/types/ojiepermana-angular-layout-component.d.ts +205 -0
- package/types/ojiepermana-angular-layout-empty.d.ts +22 -0
- package/types/ojiepermana-angular-layout-horizontal.d.ts +36 -0
- package/types/ojiepermana-angular-layout-provider.d.ts +6 -0
- package/types/ojiepermana-angular-layout-services.d.ts +25 -0
- package/types/ojiepermana-angular-layout-shell.d.ts +8 -0
- package/types/ojiepermana-angular-layout-token-directive.d.ts +13 -0
- package/types/ojiepermana-angular-layout-token.d.ts +36 -0
- package/types/ojiepermana-angular-layout-vertical.d.ts +38 -0
- package/types/ojiepermana-angular-layout.d.ts +27 -26
- package/types/ojiepermana-angular-navigation-demo-data.d.ts +5 -0
- package/types/ojiepermana-angular-navigation-icon.d.ts +17 -0
- package/types/ojiepermana-angular-navigation-item.d.ts +54 -0
- package/types/ojiepermana-angular-navigation-service.d.ts +77 -0
- package/types/ojiepermana-angular-navigation-sidebar.d.ts +75 -0
- package/types/ojiepermana-angular-navigation-topbar.d.ts +54 -0
- package/types/ojiepermana-angular-navigation-types.d.ts +129 -0
- package/types/ojiepermana-angular-theme-provider.d.ts +11 -0
- package/types/ojiepermana-angular-theme-services.d.ts +55 -0
- package/types/ojiepermana-angular-theme-token.d.ts +57 -0
- package/types/ojiepermana-angular-theme.d.ts +11 -66
- package/chart/README.md +0 -0
- package/chart/package.json +0 -4
- package/component/package.json +0 -4
- package/fesm2022/ojiepermana-angular-chart.mjs.map +0 -1
- package/fesm2022/ojiepermana-angular-component.mjs +0 -5774
- package/fesm2022/ojiepermana-angular-component.mjs.map +0 -1
- package/fesm2022/ojiepermana-angular-navigation.mjs +0 -2369
- package/fesm2022/ojiepermana-angular-navigation.mjs.map +0 -1
- package/navigation/package.json +0 -4
- package/types/ojiepermana-angular-component.d.ts +0 -1927
- package/types/ojiepermana-angular-navigation.d.ts +0 -393
- /package/theme/styles/{themes/library/_components.css → foundation/components.css} +0 -0
- /package/theme/styles/{themes/library/_layers.css → foundation/layers.css} +0 -0
- /package/theme/styles/{themes/library/_tokens.css → foundation/tokens.css} +0 -0
- /package/theme/styles/{themes/library/_material-overrides.css → integrations/material.css} +0 -0
- /package/theme/styles/{themes → integrations}/tailwind.css +0 -0
- /package/theme/styles/{themes/library → variants}/color/amber.css +0 -0
- /package/theme/styles/{themes/library → variants}/color/base.css +0 -0
- /package/theme/styles/{themes/library → variants}/color/blue.css +0 -0
- /package/theme/styles/{themes/library → variants}/color/cyan.css +0 -0
- /package/theme/styles/{themes/library → variants}/color/emerald.css +0 -0
- /package/theme/styles/{themes/library → variants}/color/fuchsia.css +0 -0
- /package/theme/styles/{themes/library → variants}/color/green.css +0 -0
- /package/theme/styles/{themes/library → variants}/color/index.css +0 -0
- /package/theme/styles/{themes/library → variants}/color/indigo.css +0 -0
- /package/theme/styles/{themes/library → variants}/color/lime.css +0 -0
- /package/theme/styles/{themes/library → variants}/color/orange.css +0 -0
- /package/theme/styles/{themes/library → variants}/color/pink.css +0 -0
- /package/theme/styles/{themes/library → variants}/color/purple.css +0 -0
- /package/theme/styles/{themes/library → variants}/color/red.css +0 -0
- /package/theme/styles/{themes/library → variants}/color/rose.css +0 -0
- /package/theme/styles/{themes/library → variants}/color/sky.css +0 -0
- /package/theme/styles/{themes/library → variants}/color/teal.css +0 -0
- /package/theme/styles/{themes/library → variants}/color/violet.css +0 -0
- /package/theme/styles/{themes/library → variants}/color/yellow.css +0 -0
- /package/theme/styles/{themes → variants}/mode/dark.css +0 -0
- /package/theme/styles/{themes → variants}/mode/index.css +0 -0
- /package/theme/styles/{themes → variants}/mode/light.css +0 -0
- /package/theme/styles/{themes/library → variants}/style/brutal.css +0 -0
- /package/theme/styles/{themes/library → variants}/style/default.css +0 -0
- /package/theme/styles/{themes/library → variants}/style/index.css +0 -0
- /package/theme/styles/{themes/library → variants}/style/sharp.css +0 -0
- /package/theme/styles/{themes/library → variants}/style/soft.css +0 -0
package/README.md
CHANGED
|
@@ -16,8 +16,13 @@ Install the published package into a consumer Angular workspace with Angular
|
|
|
16
16
|
CLI so the required peer dependencies are added to the app's `package.json`
|
|
17
17
|
and installed in the same flow:
|
|
18
18
|
|
|
19
|
+
In the consumer snippets below, `@your-scope/angular` means the package name
|
|
20
|
+
your workspace actually installs. Replace it consistently with the published
|
|
21
|
+
target you use, for example `@ojiepermana/angular`, `@edsis/angular`, or
|
|
22
|
+
another branded alias such as `@etos/angular`.
|
|
23
|
+
|
|
19
24
|
```bash
|
|
20
|
-
ng add @
|
|
25
|
+
ng add @your-scope/angular
|
|
21
26
|
```
|
|
22
27
|
|
|
23
28
|
The library requires Tailwind CSS `^4.3.0`. If the consumer workspace does
|
|
@@ -27,7 +32,7 @@ from the published `peerDependencies`.
|
|
|
27
32
|
When updating the library later, use Angular CLI as well:
|
|
28
33
|
|
|
29
34
|
```bash
|
|
30
|
-
ng update @
|
|
35
|
+
ng update @your-scope/angular
|
|
31
36
|
```
|
|
32
37
|
|
|
33
38
|
The package ships `ng-add` and `ng-update` metadata so Angular and RxJS
|
|
@@ -38,21 +43,153 @@ add` directly, peer dependency installation falls back to the package
|
|
|
38
43
|
manager's own behavior. In that flow, install Tailwind manually as well:
|
|
39
44
|
|
|
40
45
|
```bash
|
|
41
|
-
bun add @
|
|
46
|
+
bun add @your-scope/angular tailwindcss@^4.3.0
|
|
42
47
|
```
|
|
43
48
|
|
|
44
49
|
Consumer app styles should import the library theme, Tailwind, and the
|
|
45
50
|
Tailwind bridge in this order:
|
|
46
51
|
|
|
47
52
|
```css
|
|
48
|
-
@import '@
|
|
53
|
+
@import '@your-scope/angular/theme/styles';
|
|
54
|
+
@import 'tailwindcss';
|
|
55
|
+
@import '@your-scope/angular/theme/tailwind/theme.css';
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## Theme entrypoint
|
|
59
|
+
|
|
60
|
+
The shared theme runtime ships through `@your-scope/angular/theme`, with
|
|
61
|
+
granular deep-import surfaces available at `@your-scope/angular/theme/services`,
|
|
62
|
+
`@your-scope/angular/theme/provider`, and `@your-scope/angular/theme/token`.
|
|
63
|
+
The CSS assets stay available through `@your-scope/angular/theme/styles` and
|
|
64
|
+
`@your-scope/angular/theme/tailwind/theme.css`.
|
|
65
|
+
|
|
66
|
+
```ts
|
|
67
|
+
import { provideMaterialTheme, withMaterialDefaults } from '@your-scope/angular/theme';
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
```css
|
|
71
|
+
@import '@your-scope/angular/theme/styles';
|
|
49
72
|
@import 'tailwindcss';
|
|
50
|
-
@import '@
|
|
73
|
+
@import '@your-scope/angular/theme/tailwind/theme.css';
|
|
51
74
|
```
|
|
52
75
|
|
|
76
|
+
For contributors working in this repository, the theme entrypoint source is
|
|
77
|
+
split into runtime APIs under [`projects/angular/theme/services/src/lib`](theme/services/src/lib),
|
|
78
|
+
[`projects/angular/theme/provider/src/lib`](theme/provider/src/lib),
|
|
79
|
+
[`projects/angular/theme/token/src/lib`](theme/token/src/lib), and stylesheet
|
|
80
|
+
assets under [`projects/angular/theme/css`](theme/css).
|
|
81
|
+
The stylesheet sources are grouped into `foundation/`, `variants/`, and
|
|
82
|
+
`integrations/`. Local entrypoint notes live in
|
|
83
|
+
[`projects/angular/theme/README.md`](theme/README.md).
|
|
84
|
+
|
|
85
|
+
To run the theme-only regression suite from the workspace root, use:
|
|
86
|
+
|
|
87
|
+
```bash
|
|
88
|
+
bun run test:theme
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
## Breaking change migration
|
|
92
|
+
|
|
93
|
+
Granular secondary entrypoints are now the required component and navigation
|
|
94
|
+
surface. If your app previously imported from the removed
|
|
95
|
+
`@your-scope/angular/component` or `@your-scope/angular/navigation` barrels,
|
|
96
|
+
migrate in this order:
|
|
97
|
+
|
|
98
|
+
1. Confirm the package root you install in the consumer app. Keep that same
|
|
99
|
+
root in every `ng add`, `ng update`, stylesheet import, and TypeScript
|
|
100
|
+
import.
|
|
101
|
+
2. Replace broad barrel imports such as `@your-scope/angular/component` with
|
|
102
|
+
the smallest matching subpath, for example
|
|
103
|
+
`@your-scope/angular/component/button` or
|
|
104
|
+
`@your-scope/angular/component/dropdown-menu`.
|
|
105
|
+
3. Replace removed navigation imports such as `@your-scope/angular/navigation`
|
|
106
|
+
with the matching navigation subpath, for example
|
|
107
|
+
`@your-scope/angular/navigation/sidebar`,
|
|
108
|
+
`@your-scope/angular/navigation/topbar`,
|
|
109
|
+
`@your-scope/angular/navigation/service`, or
|
|
110
|
+
`@your-scope/angular/navigation/types`.
|
|
111
|
+
4. Update any internal helper imports to their new granular subpaths as well,
|
|
112
|
+
including utilities such as `@your-scope/angular/component/utils`.
|
|
113
|
+
5. Update schematic commands in the same way. The package name before the
|
|
114
|
+
colon must match the installed target.
|
|
115
|
+
|
|
116
|
+
Example migration:
|
|
117
|
+
|
|
118
|
+
```ts
|
|
119
|
+
import { ButtonComponent } from '@your-scope/angular/component/button';
|
|
120
|
+
import { DropdownMenuComponent } from '@your-scope/angular/component/dropdown-menu';
|
|
121
|
+
import { SidebarComponent } from '@your-scope/angular/navigation/sidebar';
|
|
122
|
+
import { NavigationService } from '@your-scope/angular/navigation/service';
|
|
123
|
+
import { UiNavIconComponent } from '@your-scope/angular/navigation/icon';
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
## Granular imports for production builds
|
|
127
|
+
|
|
128
|
+
Prefer the smallest subpath that matches the primitives you actually use,
|
|
129
|
+
especially in Native Federation or other shared-chunk builds. Every component
|
|
130
|
+
now ships only through its matching granular subpath, for example
|
|
131
|
+
`@your-scope/angular/component/date-picker`,
|
|
132
|
+
`@your-scope/angular/component/dropdown-menu`, and
|
|
133
|
+
`@your-scope/angular/component/tooltip`.
|
|
134
|
+
|
|
135
|
+
```ts
|
|
136
|
+
import { AvatarComponent, AvatarFallbackComponent, AvatarImageComponent } from '@your-scope/angular/component/avatar';
|
|
137
|
+
import { ButtonComponent } from '@your-scope/angular/component/button';
|
|
138
|
+
import { PopoverContentDirective, PopoverTriggerDirective } from '@your-scope/angular/component/popover';
|
|
139
|
+
import { cn } from '@your-scope/angular/component/utils';
|
|
140
|
+
import { UiNavIconComponent } from '@your-scope/angular/navigation/icon';
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
`@your-scope/angular/component` and `@your-scope/angular/navigation` aggregate
|
|
144
|
+
barrels have been removed. Consumers should use granular
|
|
145
|
+
`@your-scope/angular/component/<slug>` and
|
|
146
|
+
`@your-scope/angular/navigation/<part>` imports.
|
|
147
|
+
|
|
148
|
+
Navigation now follows the same granular pattern:
|
|
149
|
+
`@your-scope/angular/navigation/types`,
|
|
150
|
+
`@your-scope/angular/navigation/service`,
|
|
151
|
+
`@your-scope/angular/navigation/sidebar`,
|
|
152
|
+
`@your-scope/angular/navigation/topbar`,
|
|
153
|
+
`@your-scope/angular/navigation/item`,
|
|
154
|
+
`@your-scope/angular/navigation/icon`, and
|
|
155
|
+
`@your-scope/angular/navigation/demo-data`.
|
|
156
|
+
|
|
157
|
+
The same subpaths are preserved for branded packages. For example, a consumer
|
|
158
|
+
built from the EDSIS release uses:
|
|
159
|
+
|
|
160
|
+
```ts
|
|
161
|
+
import { ButtonComponent } from '@edsis/angular/component/button';
|
|
162
|
+
import { cn } from '@edsis/angular/component/utils';
|
|
163
|
+
import { UiNavIconComponent } from '@edsis/angular/navigation/icon';
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
To verify the generated package still publishes smaller entrypoints after a
|
|
167
|
+
build, run:
|
|
168
|
+
|
|
169
|
+
```bash
|
|
170
|
+
bun run build
|
|
171
|
+
bun run report:entrypoints -- --check
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
The size report validates that every granular component and navigation
|
|
175
|
+
entrypoint resolves to its own module and that the removed `./component` and
|
|
176
|
+
`./navigation` parent barrels do not return in the published exports.
|
|
177
|
+
|
|
53
178
|
## Navigation primitives
|
|
54
179
|
|
|
55
|
-
|
|
180
|
+
The navigation library now publishes only granular child entrypoints, so each
|
|
181
|
+
part can be consumed independently.
|
|
182
|
+
|
|
183
|
+
```ts
|
|
184
|
+
import { SidebarComponent } from '@your-scope/angular/navigation/sidebar';
|
|
185
|
+
import { TopbarComponent } from '@your-scope/angular/navigation/topbar';
|
|
186
|
+
import { NavigationService } from '@your-scope/angular/navigation/service';
|
|
187
|
+
import type { NavigationItem, SidebarAppearance } from '@your-scope/angular/navigation/types';
|
|
188
|
+
import { UiNavIconComponent } from '@your-scope/angular/navigation/icon';
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
The vertical navigation selector is now `sidebar` and the projected sidebar
|
|
192
|
+
slots use `sidebar-header` and `sidebar-footer`.
|
|
56
193
|
|
|
57
194
|
```html
|
|
58
195
|
<sidebar [ariaLabel]="'Primary'" [appearance]="'default'">
|
|
@@ -70,9 +207,9 @@ SDK config file under `config/sdk.config.json` and generate an Angular SDK direc
|
|
|
70
207
|
schematics:
|
|
71
208
|
|
|
72
209
|
```bash
|
|
73
|
-
ng generate @
|
|
210
|
+
ng generate @your-scope/angular:sdk-init
|
|
74
211
|
# edit config/sdk.config.json
|
|
75
|
-
ng generate @
|
|
212
|
+
ng generate @your-scope/angular:sdk
|
|
76
213
|
```
|
|
77
214
|
|
|
78
215
|
The main consumer flow is: create `config/sdk.config.json`, adjust the OpenAPI
|
|
@@ -83,8 +220,8 @@ If you want short script aliases in the consumer app's `package.json`, add:
|
|
|
83
220
|
```json
|
|
84
221
|
{
|
|
85
222
|
"scripts": {
|
|
86
|
-
"gen:sdk:init": "ng generate @
|
|
87
|
-
"gen:sdk": "ng generate @
|
|
223
|
+
"gen:sdk:init": "ng generate @your-scope/angular:sdk-init",
|
|
224
|
+
"gen:sdk": "ng generate @your-scope/angular:sdk"
|
|
88
225
|
}
|
|
89
226
|
}
|
|
90
227
|
```
|
|
@@ -95,8 +232,8 @@ ships the compiled schematic runtime.
|
|
|
95
232
|
Common follow-up options:
|
|
96
233
|
|
|
97
234
|
```bash
|
|
98
|
-
ng generate @
|
|
99
|
-
ng generate @
|
|
235
|
+
ng generate @your-scope/angular:sdk-init --path=config/my-sdk.config.json
|
|
236
|
+
ng generate @your-scope/angular:sdk --config=config/my-sdk.config.json --dry-run
|
|
100
237
|
```
|
|
101
238
|
|
|
102
239
|
## Code scaffolding
|
|
@@ -123,6 +260,12 @@ bun run build
|
|
|
123
260
|
|
|
124
261
|
This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
|
|
125
262
|
|
|
263
|
+
To inspect the generated entrypoint sizes after a build, run:
|
|
264
|
+
|
|
265
|
+
```bash
|
|
266
|
+
bun run report:entrypoints
|
|
267
|
+
```
|
|
268
|
+
|
|
126
269
|
### Publishing the Library
|
|
127
270
|
|
|
128
271
|
Publish the scoped package to the public npm registry from the workspace root.
|
|
@@ -0,0 +1,249 @@
|
|
|
1
|
+
# Chart
|
|
2
|
+
|
|
3
|
+
Angular chart primitives and chart families inspired by shadcn Chart.
|
|
4
|
+
|
|
5
|
+
In this repository, shadcn's single Chart page maps to the dedicated `/ui/chart/*` demo route group so each chart family can keep focused, production-like examples without forcing everything into one `/ui/shadcn/chart` page.
|
|
6
|
+
|
|
7
|
+
Use Chart for dashboards, KPI cards, trend comparisons, radial summaries, and interactive data views where one shared config should drive labels, colors, legends, and tooltip copy.
|
|
8
|
+
|
|
9
|
+
## Installation
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
bun add @ojiepermana/angular
|
|
13
|
+
npm install @ojiepermana/angular
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## Import
|
|
17
|
+
|
|
18
|
+
Import shared primitives from the chart root entrypoint, then import the concrete chart family from its granular subpath.
|
|
19
|
+
|
|
20
|
+
```ts
|
|
21
|
+
import {
|
|
22
|
+
ChartAxisX,
|
|
23
|
+
ChartAxisY,
|
|
24
|
+
ChartContainer,
|
|
25
|
+
ChartGrid,
|
|
26
|
+
ChartLegend,
|
|
27
|
+
ChartTooltip,
|
|
28
|
+
type ChartConfig,
|
|
29
|
+
} from '@ojiepermana/angular/component/chart';
|
|
30
|
+
import { BarChart } from '@ojiepermana/angular/component/chart/bar';
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### Supported chart entrypoints
|
|
34
|
+
|
|
35
|
+
| Import path | Selector | Best for |
|
|
36
|
+
| ---------------------------------------------- | ------------------ | ----------------------------------------------------------------- |
|
|
37
|
+
| `@ojiepermana/angular/component/chart/bar` | `ui-bar-chart` | grouped, stacked, horizontal, active, and mixed-color bar layouts |
|
|
38
|
+
| `@ojiepermana/angular/component/chart/line` | `ui-line-chart` | trends, comparisons, and zoomable time-series lines |
|
|
39
|
+
| `@ojiepermana/angular/component/chart/area` | `ui-area-chart` | filled trend bands, stacked areas, and expanded percent views |
|
|
40
|
+
| `@ojiepermana/angular/component/chart/pie` | `ui-pie-chart` | part-to-whole slices and donut charts |
|
|
41
|
+
| `@ojiepermana/angular/component/chart/radar` | `ui-radar-chart` | multi-axis performance comparisons |
|
|
42
|
+
| `@ojiepermana/angular/component/chart/radial` | `ui-radial-chart` | progress rings, radial comparisons, and center-metric summaries |
|
|
43
|
+
| `@ojiepermana/angular/component/chart/scatter` | `ui-scatter-chart` | XY correlation plots and point clouds |
|
|
44
|
+
|
|
45
|
+
## Composition
|
|
46
|
+
|
|
47
|
+
The Angular structure keeps the same high-level idea as shadcn Chart: define a shared chart config once, then compose a specific chart type with optional grid, axis, tooltip, legend, and center content.
|
|
48
|
+
|
|
49
|
+
```text
|
|
50
|
+
ui-chart-container
|
|
51
|
+
├── ui-bar-chart | ui-line-chart | ui-area-chart | ui-scatter-chart
|
|
52
|
+
│ ├── svg:g[ui-chart-grid]
|
|
53
|
+
│ ├── svg:g[ui-chart-axis-x]
|
|
54
|
+
│ ├── svg:g[ui-chart-axis-y]
|
|
55
|
+
│ └── svg:g[ui-chart-crosshair] / svg:g[ui-chart-brush] (optional)
|
|
56
|
+
├── ui-pie-chart | ui-radial-chart | ui-radar-chart
|
|
57
|
+
│ └── ui-pie-center | ui-radial-center (optional)
|
|
58
|
+
├── ui-chart-tooltip
|
|
59
|
+
├── ui-chart-legend
|
|
60
|
+
└── ui-chart-zoom-controls (optional)
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
All child primitives read dimensions, series metadata, and scoped color tokens from `ui-chart-container`.
|
|
64
|
+
|
|
65
|
+
## Basic usage
|
|
66
|
+
|
|
67
|
+
Start with a readonly `ChartConfig`, keep the dataset in any shape that makes sense for your feature, and map the chart to the relevant keys.
|
|
68
|
+
|
|
69
|
+
```ts
|
|
70
|
+
const trafficChartConfig = {
|
|
71
|
+
desktop: { label: 'Desktop', color: 'var(--chart-1)' },
|
|
72
|
+
mobile: { label: 'Mobile', color: 'var(--chart-2)' },
|
|
73
|
+
} satisfies ChartConfig;
|
|
74
|
+
|
|
75
|
+
const trafficData = [
|
|
76
|
+
{ month: 'January', desktop: 186, mobile: 80 },
|
|
77
|
+
{ month: 'February', desktop: 305, mobile: 200 },
|
|
78
|
+
{ month: 'March', desktop: 237, mobile: 120 },
|
|
79
|
+
{ month: 'April', desktop: 73, mobile: 190 },
|
|
80
|
+
{ month: 'May', desktop: 209, mobile: 130 },
|
|
81
|
+
{ month: 'June', desktop: 214, mobile: 140 },
|
|
82
|
+
];
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
```html
|
|
86
|
+
<div class="w-full max-w-3xl">
|
|
87
|
+
<ui-chart-container [config]="trafficChartConfig" chartId="traffic-overview">
|
|
88
|
+
<ui-bar-chart [data]="trafficData" xKey="month">
|
|
89
|
+
<svg:g ui-chart-grid></svg:g>
|
|
90
|
+
<svg:g ui-chart-axis-x></svg:g>
|
|
91
|
+
<svg:g ui-chart-axis-y></svg:g>
|
|
92
|
+
</ui-bar-chart>
|
|
93
|
+
<ui-chart-tooltip [data]="trafficData" xKey="month" />
|
|
94
|
+
<ui-chart-legend />
|
|
95
|
+
</ui-chart-container>
|
|
96
|
+
</div>
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
## Common patterns
|
|
100
|
+
|
|
101
|
+
### First chart flow
|
|
102
|
+
|
|
103
|
+
The closest Angular equivalent to the upstream shadcn walkthrough is:
|
|
104
|
+
|
|
105
|
+
1. Define your dataset.
|
|
106
|
+
2. Define `ChartConfig` so labels and colors stay decoupled from the raw data.
|
|
107
|
+
3. Wrap the chart in `ui-chart-container`.
|
|
108
|
+
4. Add `svg:g[ui-chart-grid]`, axis directives, `ui-chart-tooltip`, and `ui-chart-legend` only where they add value.
|
|
109
|
+
|
|
110
|
+
This keeps the chart family focused while still letting the shared primitives manage the common UI pieces.
|
|
111
|
+
|
|
112
|
+
### Swapping chart families
|
|
113
|
+
|
|
114
|
+
The same `ChartConfig` can back multiple chart families. In most cases you only swap the concrete chart import and the family-specific inputs.
|
|
115
|
+
|
|
116
|
+
```ts
|
|
117
|
+
import { AreaChart } from '@ojiepermana/angular/component/chart/area';
|
|
118
|
+
import { LineChart } from '@ojiepermana/angular/component/chart/line';
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
- `ui-line-chart` adds inputs such as `curve`, `showDots`, and `showValueLabels`.
|
|
122
|
+
- `ui-area-chart` adds `stacked`, `expanded`, `gradient`, and `curve`.
|
|
123
|
+
- `ui-bar-chart` adds `orientation`, `variant`, `colorKey`, `activeKey`, and `activeValue`.
|
|
124
|
+
|
|
125
|
+
### Pie and radial summaries
|
|
126
|
+
|
|
127
|
+
For donut, pie, and radial progress layouts, use `nameKey` plus `valueKey` instead of `xKey`.
|
|
128
|
+
|
|
129
|
+
```html
|
|
130
|
+
<ui-chart-container [config]="browserConfig" aspect="aspect-square">
|
|
131
|
+
<ui-pie-chart
|
|
132
|
+
[data]="browserData"
|
|
133
|
+
nameKey="browser"
|
|
134
|
+
valueKey="visitors"
|
|
135
|
+
[seriesKeys]="browserSeriesKeys"
|
|
136
|
+
[innerRadius]="64">
|
|
137
|
+
</ui-pie-chart>
|
|
138
|
+
<ui-chart-tooltip [data]="browserData" xKey="browser" valueKey="visitors" indicator="dot" />
|
|
139
|
+
<ui-chart-legend />
|
|
140
|
+
</ui-chart-container>
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
### Tooltip formatting
|
|
144
|
+
|
|
145
|
+
`ui-chart-tooltip` is where most presentational customization lives.
|
|
146
|
+
|
|
147
|
+
```html
|
|
148
|
+
<ui-chart-tooltip
|
|
149
|
+
[data]="activityData"
|
|
150
|
+
xKey="date"
|
|
151
|
+
indicator="line"
|
|
152
|
+
labelKey="views"
|
|
153
|
+
[labelFormatter]="longDateFormatter"
|
|
154
|
+
[formatter]="compactNumberFormatter" />
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
Use `valueKey` for single-value radial and pie datasets, `hideLabel` when the card already provides the label context, and `indicator="none"` when you want a copy-first tooltip layout.
|
|
158
|
+
|
|
159
|
+
### Per-row colors and active emphasis
|
|
160
|
+
|
|
161
|
+
Use `colorKey` when the dataset itself carries a color token such as `fill`, and use `activeKey` plus `activeValue` when one category should be visually emphasized without rewriting the whole series config.
|
|
162
|
+
|
|
163
|
+
## API reference
|
|
164
|
+
|
|
165
|
+
### `ChartContainer`
|
|
166
|
+
|
|
167
|
+
| Input | Type | Default |
|
|
168
|
+
| --------- | ---------------- | ---------------- |
|
|
169
|
+
| `config` | `ChartConfig` | — |
|
|
170
|
+
| `aspect` | `string` | `'aspect-video'` |
|
|
171
|
+
| `chartId` | `string \| null` | auto-generated |
|
|
172
|
+
|
|
173
|
+
`ChartConfig` is a readonly record of series keys to labels, icons, colors, or theme-aware light/dark color maps.
|
|
174
|
+
|
|
175
|
+
```ts
|
|
176
|
+
type ChartConfig = Readonly<
|
|
177
|
+
Record<
|
|
178
|
+
string,
|
|
179
|
+
{
|
|
180
|
+
label?: string;
|
|
181
|
+
icon?: Type<unknown>;
|
|
182
|
+
color?: string;
|
|
183
|
+
theme?: Readonly<Record<'light' | 'dark', string>>;
|
|
184
|
+
}
|
|
185
|
+
>
|
|
186
|
+
>;
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
### Shared primitives
|
|
190
|
+
|
|
191
|
+
| Part | Key inputs | Notes |
|
|
192
|
+
| ------------------------ | -------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- |
|
|
193
|
+
| `svg:g[ui-chart-grid]` | none | Adds cartesian grid lines behind bar, line, and area charts. |
|
|
194
|
+
| `svg:g[ui-chart-axis-x]` | `tickCount`, `tickLine`, `tickFormat` | Categorical axis for cartesian layouts. |
|
|
195
|
+
| `svg:g[ui-chart-axis-y]` | `tickCount`, `tickLine`, `tickFormat` | Numeric axis for cartesian layouts. |
|
|
196
|
+
| `ui-chart-tooltip` | `data`, `xKey`, `valueKey`, `indicator`, `label`, `labelKey`, `labelFormatter`, `formatter`, `hideLabel` | Handles default tooltip layout plus custom template projection. |
|
|
197
|
+
| `ui-chart-legend` | none | Renders toggle buttons for visible series. |
|
|
198
|
+
| `ui-chart-zoom-controls` | none | Pair with zoomable line and scatter views. |
|
|
199
|
+
| `ui-pie-center` | projected content | Centers labels or KPIs inside pie layouts. |
|
|
200
|
+
| `ui-radial-center` | projected content | Centers labels or KPIs inside radial layouts. |
|
|
201
|
+
|
|
202
|
+
### Chart families
|
|
203
|
+
|
|
204
|
+
| Selector | Key inputs |
|
|
205
|
+
| ------------------ | --------------------------------------------------------------------------------------------------- |
|
|
206
|
+
| `ui-bar-chart` | `data`, `xKey`, `orientation`, `variant`, `colorKey`, `activeKey`, `activeValue`, `showValueLabels` |
|
|
207
|
+
| `ui-line-chart` | `data`, `xKey`, `curve`, `showDots`, `dotRadius`, `showValueLabels` |
|
|
208
|
+
| `ui-area-chart` | `data`, `xKey`, `stacked`, `expanded`, `gradient`, `curve` |
|
|
209
|
+
| `ui-pie-chart` | `data`, `nameKey`, `valueKey`, `seriesKeys`, `innerRadius`, `activeIndex`, `activeOffset` |
|
|
210
|
+
| `ui-radar-chart` | `data`, `axisKey`, `curve`, `levels`, `grid`, `showLabels`, `showDots` |
|
|
211
|
+
| `ui-radial-chart` | `data`, `nameKey`, `valueKey`, `seriesKeys`, `maxValue`, `showTrack`, `showValueLabels` |
|
|
212
|
+
| `ui-scatter-chart` | `data`, `xKey`, `yKey`, `sizeKey`, `seriesKey`, `xDomain`, `yDomain` |
|
|
213
|
+
|
|
214
|
+
## Styling and theming
|
|
215
|
+
|
|
216
|
+
- Prefer CSS variables such as `var(--chart-1)` and `var(--chart-2)` in `ChartConfig`. This matches the current shadcn guidance and the theme tokens shipped by this library.
|
|
217
|
+
- `ui-chart-container` scopes generated `--color-<series>` variables to the chart instance, so tooltip rows, legends, and series shapes stay aligned.
|
|
218
|
+
- Use `theme: { light, dark }` on a series config entry when the chart needs different values per color scheme.
|
|
219
|
+
- Keep the parent container responsible for width, and use the `aspect` input when the default `aspect-video` does not match the layout.
|
|
220
|
+
- Use `colorKey` only when the dataset should override per-series colors with a row-specific token such as `fill`.
|
|
221
|
+
|
|
222
|
+
## Accessibility
|
|
223
|
+
|
|
224
|
+
- Chart hosts expose an `aria-label` summary describing the chart type, category count, and visible series.
|
|
225
|
+
- Interactive marks such as bars, dots, and slices are keyboard focusable where the layout supports activation.
|
|
226
|
+
- `ui-chart-tooltip` includes a polite live region so changing categories can be announced to assistive technology.
|
|
227
|
+
- `ui-chart-legend` uses native buttons with `aria-pressed` to reflect hidden and visible series state.
|
|
228
|
+
- Keep surrounding card copy descriptive so the chart has enough context when read outside its visual layout.
|
|
229
|
+
|
|
230
|
+
## Keyboard interactions
|
|
231
|
+
|
|
232
|
+
- `Tab` reaches interactive bars, dots, slices, and legend toggle buttons.
|
|
233
|
+
- `Enter` and `Space` trigger the same click behavior as pointer activation on interactive marks.
|
|
234
|
+
- Focusing a supported data mark updates the shared active point so tooltip content stays reachable without hover.
|
|
235
|
+
|
|
236
|
+
## Angular notes
|
|
237
|
+
|
|
238
|
+
- Keep chart config objects readonly and signal-friendly. A top-level `const` or signal-backed computed config works well.
|
|
239
|
+
- Every chart family must live inside `ui-chart-container`; that container provides dimensions, series visibility state, and scoped color variables to descendants.
|
|
240
|
+
- Use an explicit `chartId` when multiple charts of the same family appear on one page or when tests need a stable selector.
|
|
241
|
+
- The local shadcn mapping for Chart lives in the dedicated `/ui/chart` overview route with focused family demos under `/ui/chart/*`.
|
|
242
|
+
|
|
243
|
+
## Source parity
|
|
244
|
+
|
|
245
|
+
This Angular package follows the shadcn Chart information architecture and theming concepts, but it does not mirror the React API one-to-one.
|
|
246
|
+
|
|
247
|
+
- shadcn uses Recharts components directly and layers `ChartTooltipContent` and `ChartLegendContent` around them.
|
|
248
|
+
- This Angular library ships standalone chart families plus shared primitives, so you compose `ui-chart-container`, the relevant `ui-*-chart`, `ui-chart-tooltip`, and `ui-chart-legend` instead of wiring Recharts JSX.
|
|
249
|
+
- The dedicated `/ui/chart/*` route group is the intentional local mapping for shadcn Chart in this repo; no duplicate `/ui/shadcn/chart` page is required.
|