added chart component

README.md

@@ -1,27 +1,85 @@
-# NgApexchartsDemo
+# ng-apexcharts
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.1.1.
+ng-apexcharts is an implementation of apexcharts for angular.
+It comes with one simple component that enables you to use apexcharts
+in an angular project.
 
-## Development server
+## Installation
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+1. Install using npm:
 
-## Code scaffolding
+````
+npm install apexcharts ng-apexcharts --save
+````
 
-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`.
+2. Open angular.json and under scripts add:
 
-## Build
+````
+"scripts": [
+  "node_modules/apexcharts/dist/apexcharts.min.js"
+]
+```` 
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+3. Add ng-apexcharts-module to imports
 
-## Running unit tests
+````
+imports: [
+  BrowserModule,
+  FormsModule,
+  ReactiveFormsModule,
+  NgApexchartsModule,
+  ...
+]
+````
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+## Usage
 
-## Running end-to-end tests
+In any component you can use the chart using:
 
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+````
+<apx-chart></apx-chart>
+````
 
-## Further help
+### Options
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+All options of the chart can inserted using the attributes.
+This is a list of all available attributes:
+
+````
+@Input() chart: ApexChart;
+@Input() annotations: ApexAnnotations;
+@Input() colors: string[];
+@Input() dataLabels: ApexDataLabels;
+@Input() series: ApexAxisChartSeries | ApexNonAxisChartSeries;
+@Input() stroke: ApexStroke;
+@Input() labels: string[];
+@Input() legend: ApexLegend;
+@Input() fill: ApexFill;
+@Input() tooltip: ApexTooltip;
+@Input() plotOptions: ApexPlotOptions;
+@Input() responsive: ApexResponsive[];
+@Input() xaxis: ApexXAxis;
+@Input() yaxis: ApexYAxis | ApexYAxis[];
+@Input() grid: ApexGrid;
+@Input() states: ApexStates;
+@Input() title: ApexTitleSubtitle;
+@Input() subtitle: ApexTitleSubtitle;
+@Input() theme: ApexTheme;
+````
+
+
+### Use methods
+
+If you want to access the methods of the components use this in your component:
+````
+@ViewChild('chartObj') chart: ChartComponent;
+````
+
+and change the template to this:
+````
+<apx-chart #chartObj></apx-chart>
+````
+
+## Author
+
+[Morris Janatzek](http://morrisj.net) ([morrisjdev](https://github.com/morrisjdev))

angular.json

@@ -48,7 +48,9 @@
             "styles": [
               "src/styles.less"
             ],
-            "scripts": []
+            "scripts": [
+              "node_modules/apexcharts/dist/apexcharts.min.js"
+            ]
           },
           "configurations": {
             "production": {
@@ -157,7 +159,7 @@
       "root": "projects/ng-apexcharts",
       "sourceRoot": "projects/ng-apexcharts/src",
       "projectType": "library",
-      "prefix": "lib",
+      "prefix": "apx",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-ng-packagr:build",
@@ -190,4 +192,4 @@
     }
   },
   "defaultProject": "ng-apexcharts-demo"
-}
+}

projects/ng-apexcharts/README.md

@@ -0,0 +1,85 @@
+# ng-apexcharts
+
+ng-apexcharts is an implementation of apexcharts for angular.
+It comes with one simple component that enables you to use apexcharts
+in an angular project.
+
+## Installation
+
+1. Install using npm:
+
+````
+npm install apexcharts ng-apexcharts --save
+````
+
+2. Open angular.json and under scripts add:
+
+````
+"scripts": [
+  "node_modules/apexcharts/dist/apexcharts.min.js"
+]
+```` 
+
+3. Add ng-apexcharts-module to imports
+
+````
+imports: [
+  BrowserModule,
+  FormsModule,
+  ReactiveFormsModule,
+  NgApexchartsModule,
+  ...
+]
+````
+
+## Usage
+
+In any component you can use the chart using:
+
+````
+<apx-chart></apx-chart>
+````
+
+### Options
+
+All options of the chart can inserted using the attributes.
+This is a list of all available attributes:
+
+````
+@Input() chart: ApexChart;
+@Input() annotations: ApexAnnotations;
+@Input() colors: string[];
+@Input() dataLabels: ApexDataLabels;
+@Input() series: ApexAxisChartSeries | ApexNonAxisChartSeries;
+@Input() stroke: ApexStroke;
+@Input() labels: string[];
+@Input() legend: ApexLegend;
+@Input() fill: ApexFill;
+@Input() tooltip: ApexTooltip;
+@Input() plotOptions: ApexPlotOptions;
+@Input() responsive: ApexResponsive[];
+@Input() xaxis: ApexXAxis;
+@Input() yaxis: ApexYAxis | ApexYAxis[];
+@Input() grid: ApexGrid;
+@Input() states: ApexStates;
+@Input() title: ApexTitleSubtitle;
+@Input() subtitle: ApexTitleSubtitle;
+@Input() theme: ApexTheme;
+````
+
+
+### Use methods
+
+If you want to access the methods of the components use this in your component:
+````
+@ViewChild('chartObj') chart: ChartComponent;
+````
+
+and change the template to this:
+````
+<apx-chart #chartObj></apx-chart>
+````
+
+## Author
+
+[Morris Janatzek](http://morrisj.net) ([morrisjdev](https://github.com/morrisjdev))

projects/ng-apexcharts/package.json

@@ -1,8 +1,29 @@
 {
   "name": "ng-apexcharts",
   "version": "0.0.1",
+  "description": "an angular implementation of apexcharts",
   "peerDependencies": {
     "@angular/common": "^7.1.0",
-    "@angular/core": "^7.1.0"
+    "@angular/core": "^7.1.0",
+    "apexcharts": "3.2.2"
+  },
+  "keywords": [
+    "angular",
+    "apexcharts",
+    "charts",
+    "statistics",
+    "ui"
+  ],
+  "author": {
+    "name": "Morris Janatzek"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/morrisjdev/ng-apexcharts/issues"
+  },
+  "homepage": "https://github.com/morrisjdev/ng-apexcharts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/morrisjdev/ng-apexcharts.git"
   }
-}
+}

projects/ng-apexcharts/src/lib/chart/chart.component.html

@@ -0,0 +1 @@
+<div #chart></div>

projects/ng-apexcharts/src/lib/ng-apexcharts.component.spec.ts → projects/ng-apexcharts/src/lib/chart/chart.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { NgApexchartsComponent } from './ng-apexcharts.component';
+import { ChartComponent } from './chart.component';
 
-describe('NgApexchartsComponent', () => {
-  let component: NgApexchartsComponent;
-  let fixture: ComponentFixture<NgApexchartsComponent>;
+describe('ChartComponent', () => {
+  let component: ChartComponent;
+  let fixture: ComponentFixture<ChartComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ NgApexchartsComponent ]
+      declarations: [ ChartComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(NgApexchartsComponent);
+    fixture = TestBed.createComponent(ChartComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });