Chartjs component + deleted dialog and toast service

angular/app/components/charts-chartjs/charts-chartjs.component.html

@@ -0,0 +1,184 @@
+<section class="content-header">
+    <h1>ChartJS<small>Preview sample</small></h1>
+    <ol class="breadcrumb">
+        <li><a ui-sref="app.landing"><i class="fa fa-dashboard"></i> Home</a></li>
+        <li class="active">User Lists</li>
+    </ol>
+</section>
+<section class="content">
+  <div class="row">
+    <div class="col-md-6">
+      <div class="box box-primary">
+        <div class="box-header with-border">
+          <h3 class="box-title">Area Chart</h3>
+          <div class="box-tools pull-right">
+            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+          </div>
+        </div>
+        <!-- /.box-header -->
+        <div class="box-body">
+          <div class="row">
+            <div class="col-md-12">
+              <p class="text-center">
+                <strong>Sales: 1 Jan, 2014 - 30 Jul, 2014</strong>
+              </p>
+
+              <div class="chart">
+                <!-- Sales Chart Canvas -->
+                <canvas id="area"
+                  class="chart chart-line"
+                  chart-data="vm.areaChartData"
+                  chart-labels="vm.areaChartLabels"
+                  chart-legend="false"
+                  chart-series="vm.areaChartSeries"
+                  chart-click="vm.onClick"
+                  chart-colours="vm.areaChartColours"
+                  style="height: 180px;">
+                </canvas>
+              </div>
+              <!-- /.chart-responsive -->
+            </div>
+          </div>
+          <!-- /.row -->
+        </div>
+        <!-- ./box-body -->
+      </div>
+      <!-- /.box -->
+    </div>
+    <div class="col-md-6">
+      <div class="box box-info">
+        <div class="box-header with-border">
+          <h3 class="box-title">Line Chart</h3>
+          <div class="box-tools pull-right">
+            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+          </div>
+        </div>
+        <!-- /.box-header -->
+        <div class="box-body">
+          <div class="row">
+            <div class="col-md-12">
+              <p class="text-center">
+                <strong>Sales: 1 Jan, 2014 - 30 Jul, 2014</strong>
+              </p>
+
+              <div class="chart">
+                <!-- Sales Chart Canvas -->
+                <canvas id="line"
+                  class="chart chart-line"
+                  chart-data="vm.lineChartData"
+                  chart-labels="vm.lineChartLabels"
+                  chart-legend="false"
+                  chart-series="vm.lineChartSeries"
+                  chart-click="vm.onClick"
+                  style="height: 180px;">
+                </canvas>
+              </div>
+              <!-- /.chart-responsive -->
+            </div>
+          </div>
+          <!-- /.row -->
+        </div>
+        <!-- ./box-body -->
+      </div>
+      <!-- /.box -->
+    </div>
+    <!-- /.col -->
+  </div>
+    <!-- /.row -->
+
+    <!-- Main row -->
+  <div class="row">
+    <div class="col-md-6">
+      <div class="box box-danger">
+        <div class="box-header with-border">
+          <h3 class="box-title">Donut Chart</h3>
+
+          <div class="box-tools pull-right">
+            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+          </div>
+        </div>
+        <!-- /.box-header -->
+        <div class="box-body">
+          <div class="row">
+            <div class="col-md-8">
+              <div class="chart-responsive">
+                <canvas id="doughnut"  height="200" class="chart chart-doughnut"
+                  chart-data="vm.pieData" chart-labels="vm.pieLabels">
+                </canvas>
+                <!-- <canvas id="pieChart" height="150"></canvas> -->
+              </div>
+              <!-- ./chart-responsive -->
+            </div>
+            <!-- /.col -->
+            <div class="col-md-4">
+              <ul class="chart-legend clearfix">
+                <li><i class="fa fa-circle-o text-red"></i> Chrome</li>
+                <li><i class="fa fa-circle-o text-green"></i> IE</li>
+                <li><i class="fa fa-circle-o text-yellow"></i> FireFox</li>
+                <li><i class="fa fa-circle-o text-aqua"></i> Safari</li>
+                <li><i class="fa fa-circle-o text-light-blue"></i> Opera</li>
+                <li><i class="fa fa-circle-o text-gray"></i> Navigator</li>
+              </ul>
+            </div>
+            <!-- /.col -->
+          </div>
+          <!-- /.row -->
+        </div>
+        <!-- /.box-body -->
+        <div class="box-footer no-padding">
+          <ul class="nav nav-pills nav-stacked">
+            <li><a>United States of America <span class="pull-right text-red"><i class="fa fa-angle-down"></i> 12%</span></a></li>
+            <li><a>India <span class="pull-right text-green"><i class="fa fa-angle-up"></i> 4%</span></a></li>
+            <li><a>China<span class="pull-right text-yellow"><i class="fa fa-angle-left"></i> 0%</span></a></li>
+          </ul>
+        </div>
+        <!-- /.footer -->
+      </div>
+      <!-- /.box -->
+    </div>
+    <div class="col-md-6">
+      <div class="box box-success">
+        <div class="box-header with-border">
+          <h3 class="box-title">Bar Chart</h3>
+          <div class="box-tools pull-right">
+            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+          </div>
+        </div>
+        <!-- /.box-header -->
+        <div class="box-body">
+          <div class="row">
+            <div class="col-md-12">
+              <p class="text-center">
+                <strong>Sales: 1 Jan, 2014 - 30 Jul, 2014</strong>
+              </p>
+
+              <div class="chart">
+                <!-- Sales Chart Canvas -->
+                <canvas id="area"
+                  class="chart chart-bar"
+                  chart-data="vm.barChartData"
+                  chart-labels="vm.barChartLabels"
+                  chart-legend="false"
+                  chart-series="vm.barChartSeries"
+                  chart-click="vm.onClick"
+                  chart-colours="vm.barChartColours"
+                  style="height: 250px;">
+                </canvas>
+              </div>
+              <!-- /.chart-responsive -->
+            </div>
+          </div>
+          <!-- /.row -->
+        </div>
+        <!-- ./box-body -->
+      </div>
+      <!-- /.box -->
+    </div>
+    <!-- /.col -->
+  </div>
+    <!-- /.row -->
+</section>

angular/app/components/charts-chartjs/charts-chartjs.component.js

@@ -0,0 +1,76 @@
+class ChartsChartjsController {
+  constructor ($scope) {
+    'ngInject'
+  }
+
+  $onInit () {
+    this.lineChartLabels = ['Januarys', 'February', 'March', 'April', 'May', 'June', 'July']
+    this.lineChartSeries = ['Series A', 'Series B']
+    this.lineChartData = [
+      [65, 59, 80, 81, 56, 55, 40],
+      [28, 48, 40, 19, 86, 27, 90]
+    ]
+
+    this.areaChartLabels = ['Januarys', 'February', 'March', 'April', 'May', 'June', 'July']
+    this.areaChartSeries = ['Series A', 'Series B']
+    this.areaChartData = [
+      [65, 59, 80, 81, 56, 55, 40],
+      [28, 48, 40, 19, 86, 27, 90]
+    ]
+    this.areaChartColours = [
+      {
+        fillColor: '#D2D6DE',
+        strokeColor: '#D2D6DE',
+        pointColor: 'rgba(148,159,177,1)',
+        pointStrokeColor: '#fff',
+        pointHighlightFill: '#fff',
+        pointHighlightStroke: 'rgba(148,159,177,0.8)'
+      },
+      {
+        fillColor: '#4B94C0',
+        strokeColor: '#4B94C0',
+        pointColor: '#2980b9',
+        pointStrokeColor: '#fff',
+        pointHighlightFill: '#fff',
+        pointHighlightStroke: 'rgba(77,83,96,1)'
+      }
+    ]
+
+    this.onClick = function () {}
+
+    this.barChartLabels = ['Januarys', 'February', 'March', 'April', 'May', 'June', 'July']
+    this.barChartSeries = ['Series A', 'Series B']
+    this.barChartData = [
+      [65, 59, 80, 81, 56, 55, 40],
+      [28, 48, 40, 19, 86, 27, 90]
+    ]
+    this.barChartColours = [
+      {
+        fillColor: '#D2D6DE',
+        strokeColor: '#D2D6DE',
+        pointColor: 'rgba(148,159,177,1)',
+        pointStrokeColor: '#fff',
+        pointHighlightFill: '#fff',
+        pointHighlightStroke: 'rgba(148,159,177,0.8)'
+      },
+      {
+        fillColor: '#00A65A',
+        strokeColor: '#00A65A',
+        pointColor: '#2980b9',
+        pointStrokeColor: '#fff',
+        pointHighlightFill: '#fff',
+        pointHighlightStroke: 'rgba(77,83,96,1)'
+      }
+    ]
+
+    this.pieLabels = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales']
+    this.pieData = [300, 500, 100]
+  }
+}
+
+export const ChartsChartjsComponent = {
+  templateUrl: './views/app/components/charts-chartjs/charts-chartjs.component.html',
+  controller: ChartsChartjsController,
+  controllerAs: 'vm',
+  bindings: {}
+}

angular/app/components/login-form/login-form.component.js

@@ -15,10 +15,10 @@ class LoginFormController {
     this.unverified = false
   }
 
-  $onInit(){
-        this.email = '';
-        this.password = '';
-    }
+  $onInit () {
+    this.email = ''
+    this.password = ''
+  }
 
   login () {
     this.loginfailed = false

angular/app/components/nav-sidebar/nav-sidebar.component.html

@@ -73,7 +73,7 @@
           <i class="fa fa-angle-left pull-right"></i>
         </a>
         <ul class="treeview-menu">
-          <li><a ui-sref="app.comingsoon"><i class="fa fa-circle-o"></i> ChartJS</a></li>
+          <li><a ui-sref="app.chartjs"><i class="fa fa-circle-o"></i> ChartJS</a></li>
           <li><a ui-sref="app.comingsoon"><i class="fa fa-circle-o"></i> Morris</a></li>
           <li><a ui-sref="app.comingsoon"><i class="fa fa-circle-o"></i> Flot</a></li>
           <li><a ui-sref="app.comingsoon"><i class="fa fa-circle-o"></i> Inline charts</a></li>

angular/app/components/register-form/register-form.component.js

@@ -11,12 +11,11 @@ class RegisterFormController {
     this.errors = []
   }
 
-
-  $onInit(){
-    this.name = '';
-    this.email = '';
-    this.password = '';
-    }
+  $onInit () {
+    this.name = ''
+    this.email = ''
+    this.password = ''
+  }
 
   register (isValid) {
     if (isValid) {

angular/config/routes.config.js

@@ -41,6 +41,17 @@ export function RoutesConfig ($stateProvider, $urlRouterProvider) {
         }
       }
     })
+    .state('app.chartjs', {
+      url: '/charts-chartjs',
+      data: {
+        auth: true
+      },
+      views: {
+        'main@app': {
+          template: '<charts-chartjs></charts-chartjs>'
+        }
+      }
+    })
     .state('app.comingsoon', {
       url: '/comingsoon',
       data: {

angular/index.components.js

@@ -1,3 +1,4 @@
+import { ChartsChartjsComponent } from './app/components/charts-chartjs/charts-chartjs.component'
 import { WidgetsComponent } from './app/components/widgets/widgets.component'
 import { UserProfileComponent } from './app/components/user-profile/user-profile.component'
 import { UserVerificationComponent } from './app/components/user-verification/user-verification.component'
@@ -20,6 +21,7 @@ import { LoginFormComponent } from './app/components/login-form/login-form.compo
 import { RegisterFormComponent } from './app/components/register-form/register-form.component'
 
 angular.module('app.components')
+  .component('chartsChartjs', ChartsChartjsComponent)
   .component('widgets', WidgetsComponent)
   .component('userProfile', UserProfileComponent)
   .component('userVerification', UserVerificationComponent)

angular/index.services.js

@@ -1,10 +1,6 @@
 import { ContextService } from './services/context.service'
 import { APIService } from './services/API.service'
-import { DialogService } from './services/dialog.service'
-import { ToastService } from './services/toast.service'
 
 angular.module('app.services')
   .service('ContextService', ContextService)
   .service('API', APIService)
-  .service('DialogService', DialogService)
-  .service('ToastService', ToastService)