cm-angular-org-chart - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

package.json

		{
		"name": "cm-angular-org-chart",
		"version": "1.1.1",
		"version": "1.1.2",
		"scripts": {
		@@ -5,0 +5,0 @@ "ng": "ng",

projects/cm-angular-org-chart/package.json

		{
		"name": "cm-angular-org-chart",
		"description": "Hierarchical Organizational Chart for Angular",
		"version": "1.1.1",
		"version": "1.1.2",
		"keywords": [
		@@ -6,0 +6,0 @@ "org chart",

232

README.md

		@@ -1,27 +0,231 @@
		# CmAngularOrgChart
		# Hierarchical Organization Chart for Angular 14 and above versions

		This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.0.6.
		This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.0.0.

		## Development server
		The `cm-angular-org-chart` component displays heirarchal Organizational Chart.

		Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
		Please install latest version for Error free.

		## Code scaffolding
		![Org Chart](https://github.com/chandumaram/org-chart/blob/master/src/assets/org-chart-vertical.png)

		Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive\|pipe\|service\|class\|guard\|interface\|enum\|module`.
		## Table of Contents

		## Build
		* [Usage](#usage)
		* [Inputs](#inputs)
		* [Outputs](#outputs)
		* [Default Look](#default-look)
		* [Custom Styling](#custom-styling)


		Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
		## Usage

		## Running unit tests
		Each employee is represented by an object with the following properties. Note that all the properties are optional.

		Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
		\| Property \| Type\| Description \|
		\|---\|---\|---\|
		\|`name`\|`string`\| The name of the employee \|
		\|`cssClass`\|`string`\| The CSS class to apply to the employee block\|
		\|`imageUrl`\|`string`\| URL to the employee's image
		\|`designation`\|`string`\| Employee's designation
		\|`subordinates`\|`Employee[]`\| An array of subordinate employees

		## Running end-to-end tests
		### Installation

		Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
		```sh
		$ npm i cm-angular-org-chart
		```

		## Further help
		### `app.module.ts`
		```js
		import { NgModule } from '@angular/core';
		import { BrowserModule } from '@angular/platform-browser';
		import { CmAngularOrgChartModule } from 'cm-angular-org-chart';

		To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
		import { AppRoutingModule } from './app-routing.module';
		import { AppComponent } from './app.component';
		@NgModule({
		declarations: [
		AppComponent
		],
		imports: [
		BrowserModule,
		AppRoutingModule,
		CmAngularOrgChartModule
		],
		providers: [],
		bootstrap: [AppComponent]
		})
		export class AppModule { }
		```

		### `app.component.html`:
		```html
		<org-chart [topEmployee]="topEmployee" direction="vertical"></org-chart>
		```

		### `app.component.ts`:
		```js
		export class AppComponent {
		employeeImage = "assets/employee.png";
		topEmployee: any = {
		name: 'Sundar Pichai',
		cssClass: 'oc-superSenior',
		imageUrl: this.employeeImage,
		designation: 'Chief Executive Officer',
		subordinates: [
		{
		name: 'Thomas Kurian',
		cssClass: 'oc-senior',
		imageUrl: this.employeeImage,
		designation: 'CEO, Google Cloud',
		},
		{
		name: 'Susan Wojcicki',
		cssClass: 'oc-senior',
		imageUrl: this.employeeImage,
		designation: 'CEO, YouTube',
		subordinates: [
		{
		name: 'Beau Avril',
		cssClass: 'oc-me',
		imageUrl: this.employeeImage,
		designation: 'Global Head of Business Operations',
		subordinates: []
		},
		{
		name: 'Tara Walpert Levy',
		cssClass: 'oc-me',
		imageUrl: this.employeeImage,
		designation: 'VP, Agency and Brand Solutions',
		subordinates: [
		{
		name: 'Junior 1 David',
		cssClass: 'oc-junior',
		imageUrl: this.employeeImage,
		designation: 'CEO, Google Health',
		subordinates: []
		},
		{
		name: 'Junior 2 David',
		cssClass: 'oc-junior',
		imageUrl: this.employeeImage,
		designation: 'CEO, Google Health',
		subordinates: [
		{
		name: 'superJunior 1 David',
		cssClass: 'oc-superJunior',
		imageUrl: this.employeeImage,
		designation: 'CEO, Google Health',
		subordinates: []
		},
		{
		name: 'superJunior 2 David',
		cssClass: 'oc-superJunior',
		imageUrl: this.employeeImage,
		designation: 'CEO, Google Health',
		subordinates: []
		}
		]
		}
		]
		},
		]
		},
		{
		name: 'Jeff Dean',
		cssClass: 'oc-senior',
		imageUrl: this.employeeImage,
		designation: 'Head of Artificial Intelligence',
		subordinates: [
		{
		name: 'David Feinberg (You)',
		cssClass: 'oc-me',
		imageUrl: this.employeeImage,
		designation: 'CEO, Google Health',
		subordinates: []
		}
		]
		}
		]
		};
		}
		```


		## Inputs

		\| Name \| Type \| Description
		\|---\|---\|---\|
		\|`topEmployee`\| `Employee` object\| The `Employe` object mentioned above
		\|`direction`\| `vertical` or `horizontal` \| Renders chart vertically or horizontally


		## Outputs

		\|Name \|Parameters \| Description
		\|---\|---\|---\|
		\|`itemClick`\|`Employee`\| The `Employee` object which was clicked

		Ex: <org-chart [topEmployee]="topEmployee" direction="vertical" (itemClick)="onClickItem($event)"></org-chart>


		## Default Look

		### Horizontal

		![Horizontal Chart](https://github.com/chandumaram/org-chart/blob/master/src/assets/org-chart-horizontal.png)

		### Vertical

		![Vertical Chart](https://github.com/chandumaram/org-chart/blob/master/src/assets/org-chart-vertical.png)


		## Custom Styling
		You can override default styles with your custom SCSS. Make sure you include your custom SCSS after including the default SCSS so that your styles override the default styles.

		```scss
		.oc-name {
		font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
		}

		.oc-designation {
		font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
		}

		.oc-border {
		border-color: #9E9E9E;
		}

		.oc-box {
		color: white;
		width: 10em;
		}

		// Custom cssClass from Employee object
		.oc-superSenior {
		background-color: midnightblue;
		}

		.oc-senior {
		background-color: brown;
		}

		.oc-me {
		background-color: darkgreen;
		}

		.oc-junior {
		background-color: darkgoldenrod;
		}

		.oc-superJunior {
		background-color: purple;
		}
		```

		## License
		MIT

		## Author
		- Maram Chandrasekhar Reddy [@chandumaram](https://github.com/chandumaram)

cm-angular-org-chart - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics