{"id":21842863,"url":"https://github.com/gonzofish/angular-dashboard","last_synced_at":"2025-03-21T16:15:26.793Z","repository":{"id":86061752,"uuid":"99743010","full_name":"gonzofish/angular-dashboard","owner":"gonzofish","description":"[WIP] A dashboard framework for Angular 2+","archived":false,"fork":false,"pushed_at":"2017-08-14T23:00:42.000Z","size":123,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-26T11:28:12.616Z","etag":null,"topics":["angular","angular-librarian","angular-library","angular2","angular4","dashboard"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gonzofish.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-08-08T22:54:35.000Z","updated_at":"2019-10-18T11:58:17.000Z","dependencies_parsed_at":"2023-03-05T15:46:17.207Z","dependency_job_id":null,"html_url":"https://github.com/gonzofish/angular-dashboard","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gonzofish%2Fangular-dashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gonzofish%2Fangular-dashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gonzofish%2Fangular-dashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gonzofish%2Fangular-dashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gonzofish","download_url":"https://codeload.github.com/gonzofish/angular-dashboard/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244825654,"owners_count":20516592,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-librarian","angular-library","angular2","angular4","dashboard"],"created_at":"2024-11-27T22:13:33.977Z","updated_at":"2025-03-21T16:15:26.782Z","avatar_url":"https://github.com/gonzofish.png","language":"JavaScript","readme":"# Angular Dashboard [WIP]\n\nA dynamic dashboard framework for Angular 2+ projects.\n\n- [Usage](#usage)\n- [Dashboard Component](#dashboard-component)\n- [Component Registry](#component-registry)\n- [Setup Configuration](#setup-configuration)\n- [Interfaces](#interfaces)\n    - [Angular Dashboard Input](#ad-input)\n    - [Component Registration](#component-registration)\n    - [Dashboard Event](#dashboard-event)\n    - [Dashboard Layout](#dashboard-layout)\n    - [Dashboard Pane](#dashboard-pane)\n    - [Layout Orientation](#layout-orientation)\n\n## \u003ca id=\"usage\"\u003e\u003c/a\u003eUsage\n\n1. Install using NPM or Yarn:\n\n    ```shell\n    npm i -S @angular-librarian/angular-dashboard\n    # or\n    yarn add @angular-librarian/angular-dashboard\n    ```\n2. Import into your project \u0026 module:\n    ```typescript\n    // other imports\n\n    import { AngularDashboardModule } from '@angular-librarian/angular-dashboard';\n\n    @NgModule({\n        declarations: [\n            // All components\n        ],\n        imports: [\n            // other imports\n            AngularDashboardModule.withComponents([\n                // list of components to be used\n                // dynamically in dashboard\n            ])\n        ]\n    })\n    export class MyModule {}\n    ```\n3. Register components:\n    ```typescript\n    // other imports\n\n    import { SomeComponent } from '../some-component/some-component.component.ts';\n    import { AnotherComponent } from '../another-component/another-component.component.ts';\n\n    import { ComponentRegistryService } from '@angular-librarian/angular-dashboard';\n\n    @Injectable()\n    export class SomeService {\n        constructor(private _registryService: ComponentRegistryService) {\n            _registryService.register({\n                component: SomeComponent,\n                id: 'some-component'\n            });\n            _registryService.register({\n                component: AnotherComponent,\n                id: 'another-component'\n            });\n            /*\n              or use bulkRegister:\n              _registryService.bulkRegister([\n                { component: SomeComponent, id: 'some-component' },\n                { component: AnotherComponent, id: 'another-component' }\n              ]);\n            */\n        }\n    }\n    ```\n4. Then use the [`ad-dashboard`](#ad-dashboard), providing it a set\n    configuration and data\n    (if necessary):\n    ```html\n    \u003cad-dashboard [data]=\"myData\" [setup]=\"mySetup\"\u003e\n    \u003c/ad-dashboard\u003e\n    ```\n    The format for the setup configuration can be found in the\n    \"[Setup Configuration](#setup-configuration)\" section.\n\n## \u003ca id=\"ad-dashboard\"\u003e\u003c/a\u003eDashboard Component\n\nThe `ad-dashboard` component is the single exposed component from Angular\nDashboard. It provides a way of telling Angular Dashboard what setup to use\nand what data, as well as an output for listening for events from any dashboard\npane.\n\n### API\n\nAttribute|Purpose\n---|---\n`[data]`|(_Optional_) A data object or array, which is used by all of the underlying components, data is accessed by specifying [`AdInput`](#ad-input)s either through a [`ComponentRegistration`](#component-registration) or in a [Setup Configuration](#setup-configuration).\n`[setup]`|The [Setup Configuration](#setup-configuration) to use for the dashboard.\n`(dashboardEvent)`|Whenever a pane inside the dashboard fires an event, this event will fire, carrying a [`DashboardEvent`](#dashboard-event) payload.\n\n## \u003ca id=\"component-registry\"\u003e\u003c/a\u003eComponent Registry\n\nAngular Dashboard provides a `ComponentRegistryService` which allows consumers\nof the library to give Angular Dashboard knowledge of the types of components\nthe consumer plans on using. In turn, this gives Angular Dashboard the ability\nto _dynamically_ create dashboards.\n\n### API\n\nMethod|Purpose\n---|---\n`bulkRegister(components: Array\u003cComponentRegistration\u003e)`|Allows the consumer to register a list of components, instead of individually registering them\n`register(component: ComponentRegistration)`|Register a component with Angular Dashboard\n\n## \u003ca id=\"setup-configuration\"\u003e\u003c/a\u003eSetup Configuration\n\n\u003e Coming soon\n\n## \u003ca id=\"interfaces\"\u003e\u003c/a\u003eInterfaces\n\n- [Angular Dashboard Input](#ad-input)\n- [Component Registration](#component-registration)\n- [Dashboard Event](#dashboard-event)\n- [Dashboard Layout](#dashboard-layout)\n- [Dashboard Pane](#dashboard-pane)\n- [Layout Orientation](#layout-orientation)\n\n### \u003ca id=\"ad-input\"\u003e\u003c/a\u003eAngular Dashboard Input\n\nInterface name: `AdInput`\n\n```typescript\n{\n    attribute: string;\n    dataAttribute?: string;\n    value?: any;\n}\n```\n\n`attribute` is the input name. Where, in an HTML template, you would use:\n\n```html\n\u003cmy-cmp [someAttr]=\"data.some[2].stuff\" anotherAttr=\"pizza\"\u003e\u003c/my-cmp\u003e\n```\n\nUsing `AdInput`, you would specify an `attribute` of `someAttr` and another\nwith `anotherAttr`.\n\nFor straight values, use the `value` attribute. However, for dynamic values,\npulled in from the data passed in through [`ad-dashboard`](#ad-dashboard),\nuse a dot-notation. So for `someAttr` in the example above, if `data` was\nprovided to [`ad-dashboard`](#ad-dashboard), the `dataAttribute` would be\n`'some.2.stuff'`.\n\n### \u003ca id=\"component-registration\"\u003e\u003c/a\u003eComponent Registration\n\nInterface name: `ComponentRegistration`\n\n```typescript\n{\n    component: any;\n    id: string;\n    inputs?: Array\u003cAdInput\u003e;\n    outputs?: Array\u003cstring\u003e;\n}\n```\n\nThe `component` is the component class and `id` is a unique identifer to\nmatch that component to. The configurations you create will use these `id`\nvalues to let Angular Dashboard know what component to use.\n\nThe optional `inputs` is a list of Input attributes, specified using the\n[`AdInput`](#ad-input) interface that the component has on it.\n\nThe optional `outputs` is a list of strings, each being the name of an\n`@Output` attribute the component has on it. So where normally, when\nwriting a template, you'd write:\n\n```html\n\u003cmy-cmp (myOutput)=\"callMe($event)\"\u003e\u003c/my-cmp\u003e\n```\n\nYou provide `myOutput` as part of the `outputs` attribute of a\n`ComponentRegistration`. Angular Dashboard will then relay the firing\ncomponent `id`, the `@Output` that fired, and any data that was emitted\nthrough the [`ad-dashboard`](#ad-dashboard)'s `(eventFired)` output.\n\n### \u003ca id=\"dashboard-event\"\u003e\u003c/a\u003eDashboard Event\n\nInterface name: `DashboardEvent`\n\n```typescript\n{\n    componentId: string;\n    eventName: string;\n    data?: any;\n}\n```\n\n`componentId` is the component which fired off the event. The name of that\nevent is provided by `eventName` and, any data the event fired is provided\nvia the `data` attribute.\n\n### \u003ca id=\"dashboard-layout\"\u003e\u003c/a\u003eDashboard Layout\n\nInterface name: `DashboardLayout`\n\n```typescript\n{\n    layout: LayoutOrientation;\n    panes: Array\u003cDashboardLayout|DashboardPane\u003e;\n}\n```\n\n### \u003ca id=\"dashboard-pane\"\u003e\u003c/a\u003eDashboard Pane\n\nInterface name: `DasboardPane`\n\n```typescript\n{\n    component: string;\n    inputs?: Array\u003cAdInput\u003e;\n    outputs?: Array\u003cstring\u003e;\n    size?: string;\n    title?: string;\n}\n```\n\n### \u003ca id=\"layout-orientation\"\u003e\u003c/a\u003eLayout Orientation\n\nEnum name: `LayoutOrientation`\n\n```typescript\n{\n    ROWS,\n    COLUMNS\n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgonzofish%2Fangular-dashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgonzofish%2Fangular-dashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgonzofish%2Fangular-dashboard/lists"}