Chart Mappings & Data Labels

src/chartMappings.ts

@@ -1,4 +1,4 @@
-export const axisChartMappings = {
+export const chartMappings = {
   calls_per_day: {
     columns: [
       {
@@ -8,10 +8,12 @@ export const axisChartMappings = {
       {
         key: 'Answered',
         xAxis: false,
+        name: "Answered Calls"
       },
       {
         key: 'Missed',
         xAxis: false,
+        name: "Missed Calls"
       }
     ]
   },
@@ -57,10 +59,7 @@ export const axisChartMappings = {
         xAxis: false,
       }
     ]
-  }
-};
-
-export const listChartMappings = {
+  },
   top_customers_by_calls: {
     columns: [
       {
@@ -85,4 +84,4 @@ export const listChartMappings = {
       }
     ]
   }
-};
+};

src/components/axisChart/axis-chart.component.ts

@@ -1,7 +1,7 @@
 /// <reference path="../../../node_modules/@types/angular/index.d.ts" />
-import { axisChartMappings } from '../../chartMappings';
 import { FsData, FsDataResponse } from '../../services/FsData.service';
-import { FsSeriesTranslation } from '../../services/FsData.service';
+import { DataLabelTransformer } from "../../services/DataLabelTransformer.service";
+import { ChartMapping } from "../../services/ChartMapping.service";
 import './bar-chart.styles.scss';
 
 interface ChartResponse {
@@ -24,15 +24,19 @@ export abstract class AxisChartWidget {
   protected fromDate: string;
   protected toDate: string;
 
-  constructor(protected $scope: ng.IScope, protected FsData: FsData) {
-
+  constructor(
+      protected $scope: ng.IScope,
+      protected FsData: FsData,
+      protected DataLabelTransformer: DataLabelTransformer,
+      protected ChartMapping: ChartMapping
+  ) {
   }
 
 protected setResponse(dataset: string, value: FsDataResponse): any {
     let data: any[] = [];
     let labels: string[] = [];
     let series: any[] = [];
-    const chartMap = axisChartMappings[dataset];
+    const chartMap = this.ChartMapping.getMappingForType(dataset);
     if (chartMap === undefined) {
       throw new Error(`Chartmapping missing for ${dataset}`);
     }
@@ -53,14 +57,9 @@ protected setResponse(dataset: string, value: FsDataResponse): any {
              return a.name < b.name ? -1 : 1;
            }
          })
-         .map(d => {
-           if (d[xAxisColumn.key].length > 15) {
-            return d[xAxisColumn.key].substr(0, 18)+'...';
-           } else {
-             return d[xAxisColumn.key];
-           }
-         })
-         .filter((entry, index, arr) => labels.indexOf(entry) === -1);
+         .map(d => d[xAxisColumn.key])
+         .filter((entry, index, arr) => labels.indexOf(entry) === -1)
+         .map(this.DataLabelTransformer.transform);
        labels.push(...dataLabels);
 
        const objKeys = Object.keys(ds.data[0]);

src/components/bar-chart/bar-chart.component.ts

@@ -2,6 +2,8 @@
 import { AxisChartWidget } from '../axisChart/axis-chart.component';
 import { Component } from '../../decorators';
 import { FsData } from '../../services/FsData.service';
+import { DataLabelTransformer } from "../../services/DataLabelTransformer.service";
+import { ChartMapping } from "../../services/ChartMapping.service";
 import '../axisChart/bar-chart.styles.scss';
 
 @Component({
@@ -31,8 +33,13 @@ import '../axisChart/bar-chart.styles.scss';
 })
 export class BarChartWidget extends AxisChartWidget {
 
-  constructor(protected $scope: ng.IScope, protected FsData: FsData) {
-    super($scope, FsData);
+  constructor(
+      protected $scope: ng.IScope,
+      protected FsData: FsData,
+      protected DataLabelTransformer: DataLabelTransformer,
+      protected ChartMapping: ChartMapping
+  ) {
+    super($scope, FsData, DataLabelTransformer, ChartMapping);
   }
 
 }

src/components/line-chart/line-chart.component.ts

@@ -2,6 +2,8 @@
 import { AxisChartWidget } from '../axisChart/axis-chart.component';
 import { Component } from '../../decorators';
 import { FsData } from '../../services/FsData.service';
+import { DataLabelTransformer } from "../../services/DataLabelTransformer.service";
+import { ChartMapping } from "../../services/ChartMapping.service";
 import '../axisChart/line-chart.styles.scss';
 
 @Component({
@@ -31,8 +33,13 @@ import '../axisChart/line-chart.styles.scss';
 })
 export class LineChartWidget extends AxisChartWidget {
 
-  constructor(protected $scope: ng.IScope, protected FsData: FsData) {
-    super($scope, FsData);
+  constructor(
+      protected $scope: ng.IScope,
+      protected FsData: FsData,
+      protected DataLabelTransformer: DataLabelTransformer,
+      protected ChartMapping: ChartMapping
+  ) {
+    super($scope, FsData, DataLabelTransformer, ChartMapping);
   }
 
 }

src/components/single-value/single-value.component.ts

@@ -15,6 +15,7 @@ import './single-value.styles.scss';
     title: '@',
     type: '@',
     segment: '@',
+    suffix: '@',
     fromDate: '@',
     toDate: '@'
   },
@@ -25,6 +26,7 @@ export class SingleValueWidget {
   private type: string;
   private segments: string[] = ['all_data'];
   private value: any;
+  private suffix: string;
   private fromDate: string;
   private toDate: string;
 
@@ -33,7 +35,12 @@ export class SingleValueWidget {
   }
 
   private setResponse(value: FsDataResponse): any {
-      this.value = value.datasources[0].data;
+    let data = value.datasources[0].data;
+    if(this.suffix) {
+      this.value = `${data} ${this.suffix}`;
+    } else {
+      this.value = data
+    }
   }
 
   async $onChanges() {

src/components/top-list/top-list.component.ts

@@ -2,6 +2,7 @@
 import { listChartMappings } from '../../chartMappings';
 import { Component } from '../../decorators';
 import { FsData, FsDataResponse } from '../../services/FsData.service';
+import { ChartMapping } from "../../services/ChartMapping.service";
 import './top-list.styles.scss';
 
 interface ToplistData {
@@ -14,12 +15,12 @@ interface ToplistData {
     <h3>{{vm.title}}</h3>
     <table cell-spacing="0" cell-padding="0">
       <thead>
-        <th>Name</th>
-        <th>Value</th>
+        <th>{{vm.keyTitle}}</th>
+        <th>{{vm.valueTitle}}</th>
       </thead>
       <tbody>
         <tr
-          ng-repeat="item in vm.list | orderBy:'value':true | limitTo: 4"
+          ng-repeat="item in vm.list | orderBy:'value':true | limitTo: vm.limit"
         >
           <td ng-bind="item.name"></td>
           <td ng-bind="item.value"></td>
@@ -29,6 +30,9 @@ interface ToplistData {
   `,
   bindings: {
     title: '@',
+    keyTitle: '@',
+    valueTitle: '@',
+    limit: '@',
     type: '@',
     segments: '<',
     fromDate: '@',
@@ -44,13 +48,15 @@ export class TopListWidget {
   private fromDate: string;
   private toDate: string;
 
-  constructor (private $scope: ng.IScope, private FsData: FsData) {
-
-  }
+  constructor (
+      private $scope: ng.IScope,
+      private FsData: FsData,
+      private ChartMapping: ChartMapping
+  ) {}
 
   private setResponse(dataset: string, value: FsDataResponse): any {
     let data: any[] = [];
-    const chartMap = listChartMappings[dataset];
+    const chartMap = this.ChartMapping.getMappingForType(dataset);
     if (chartMap === undefined) {
       throw new Error(`Chartmapping missing for ${dataset}`);
     }

src/index.html

@@ -54,10 +54,14 @@
               type="top_customers_by_calls"
               from-date="{{ctrl.fromDate}}"
               to-date="{{ctrl.toDate}}"
+              limit=4
       ></fs-top-list>
       <fs-top-list
               title="Geographic origin"
               type="geographic_origin"
+              key_title="Country"
+              value_title="Calls"
+              limit=4
       ></fs-top-list>
       <fs-single-value
               title="Average calls per user"
@@ -76,6 +80,7 @@
       <fs-single-value
               title="Call durations"
               type="call_durations"
+              suffix="min"
       ></fs-single-value>
       <fs-single-value
               title="Missed calls"

src/index.ts

@@ -3,12 +3,18 @@ declare var angular: angular.IAngularStatic;
 import { LineChartWidget } from "./components/line-chart/line-chart.component";
 import { BarChartWidget } from "./components/bar-chart/bar-chart.component";
 import { TopListWidget } from "./components/top-list/top-list.component";
-import {SingleValueWidget } from "./components/single-value/single-value.component";
+import { SingleValueWidget } from "./components/single-value/single-value.component";
 import { FsData } from "./services/FsData.service";
+import { DataLabelTransformer } from "./services/DataLabelTransformer.service";
+import { ChartMapping } from "./services/ChartMapping.service";
+import { chartMappings } from "./chartMappings";
 
 angular
   .module('fs-widgets', ['chart.js'])
+  .constant("ChartMappings", chartMappings)
+  .service("ChartMapping", ["ChartMappings", ChartMapping])
   .provider("FsData", [() => new FsData()])
+  .service("DataLabelTransformer", [() => new DataLabelTransformer()])
   .run(($http: ng.IHttpService) => $http.defaults.headers.common['Access-Control-Allow-Origin'] = '*')
   .component('fsLineChart', LineChartWidget)
   .component('fsBarChart', BarChartWidget)

src/services/ChartMapping.service.ts

@@ -0,0 +1,30 @@
+export interface AxisChartMappings {
+  [type: String]: ChartMappingModel
+}
+
+export interface ChartMappingModel {
+  type: String;
+  sort: boolean;
+  columns: [AxisMapping];
+}
+
+export interface AxisMapping {
+  key: String;
+  xAxis: boolean;
+  name: String;
+}
+
+class ChartMapping implements ng.IServiceProvider {
+
+  private axisChartMappings: AxisChartMappings;
+
+  constructor(axisChartMappings: AxisChartMappings) {
+    this.axisChartMappings = axisChartMappings;
+  }
+
+  getMappingForType(type: String): ChartMappingModel {
+    return this.axisChartMappings[type];
+  }
+}
+
+export { ChartMapping };

src/services/DataLabelTransformer.service.ts

@@ -0,0 +1,9 @@
+// This class is just a placeholder
+// You can replace it with your own service if you need to
+class DataLabelTransformer implements ng.IServiceProvider {
+  transform(seriesName): string {
+    return seriesName;
+  }
+}
+
+export { DataLabelTransformer };