From 49755669df2d02190c5bc509b2c317548c1652a2 Mon Sep 17 00:00:00 2001 From: jonmuell Date: Wed, 25 Oct 2017 13:47:31 +0200 Subject: [PATCH 1/4] Add service to edit series names --- src/components/axisChart/axis-chart.component.ts | 12 ++++++++---- src/components/bar-chart/bar-chart.component.ts | 9 +++++++-- src/components/line-chart/line-chart.component.ts | 9 +++++++-- src/index.ts | 2 ++ src/services/DataLabelTransformer.service.ts | 9 +++++++++ 5 files changed, 33 insertions(+), 8 deletions(-) create mode 100644 src/services/DataLabelTransformer.service.ts diff --git a/src/components/axisChart/axis-chart.component.ts b/src/components/axisChart/axis-chart.component.ts index b300999..b4df395 100644 --- a/src/components/axisChart/axis-chart.component.ts +++ b/src/components/axisChart/axis-chart.component.ts @@ -1,7 +1,7 @@ /// import { axisChartMappings } from '../../chartMappings'; import { FsData, FsDataResponse } from '../../services/FsData.service'; -import { FsSeriesTranslation } from '../../services/FsData.service'; +import { DataLabelTransformer } from "../../services/DataLabelTransformer.service"; import './bar-chart.styles.scss'; interface ChartResponse { @@ -24,8 +24,11 @@ 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 setResponse(dataset: string, value: FsDataResponse): any { @@ -60,7 +63,8 @@ protected setResponse(dataset: string, value: FsDataResponse): any { return d[xAxisColumn.key]; } }) - .filter((entry, index, arr) => labels.indexOf(entry) === -1); + .filter((entry, index, arr) => labels.indexOf(entry) === -1) + .map(this.DataLabelTransformer.transform); labels.push(...dataLabels); const objKeys = Object.keys(ds.data[0]); diff --git a/src/components/bar-chart/bar-chart.component.ts b/src/components/bar-chart/bar-chart.component.ts index 59fe992..b829fce 100644 --- a/src/components/bar-chart/bar-chart.component.ts +++ b/src/components/bar-chart/bar-chart.component.ts @@ -2,6 +2,7 @@ import { AxisChartWidget } from '../axisChart/axis-chart.component'; import { Component } from '../../decorators'; import { FsData } from '../../services/FsData.service'; +import { DataLabelTransformer } from "../../services/DataLabelTransformer.service"; import '../axisChart/bar-chart.styles.scss'; @Component({ @@ -31,8 +32,12 @@ 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 + ) { + super($scope, FsData, DataLabelTransformer); } } \ No newline at end of file diff --git a/src/components/line-chart/line-chart.component.ts b/src/components/line-chart/line-chart.component.ts index 924c4e0..89f6e6a 100644 --- a/src/components/line-chart/line-chart.component.ts +++ b/src/components/line-chart/line-chart.component.ts @@ -2,6 +2,7 @@ import { AxisChartWidget } from '../axisChart/axis-chart.component'; import { Component } from '../../decorators'; import { FsData } from '../../services/FsData.service'; +import { DataLabelTransformer } from "../../services/DataLabelTransformer.service"; import '../axisChart/line-chart.styles.scss'; @Component({ @@ -31,8 +32,12 @@ 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 + ) { + super($scope, FsData, DataLabelTransformer); } } \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index 3e5f529..cf3877f 100644 --- a/src/index.ts +++ b/src/index.ts @@ -5,10 +5,12 @@ 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 { FsData } from "./services/FsData.service"; +import { DataLabelTransformer } from "./services/DataLabelTransformer.service"; angular .module('fs-widgets', ['chart.js']) .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) diff --git a/src/services/DataLabelTransformer.service.ts b/src/services/DataLabelTransformer.service.ts new file mode 100644 index 0000000..e27d75d --- /dev/null +++ b/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 }; From c2ade994b89b8b615228a828a41688ba79570d88 Mon Sep 17 00:00:00 2001 From: jonmuell Date: Tue, 14 Nov 2017 11:46:11 +0100 Subject: [PATCH 2/4] Add ChartMapping Service --- src/chartMappings.ts | 11 ++++--- .../axisChart/axis-chart.component.ts | 7 +++-- .../bar-chart/bar-chart.component.ts | 6 ++-- .../line-chart/line-chart.component.ts | 6 ++-- src/components/top-list/top-list.component.ts | 20 ++++++++----- src/index.html | 4 +++ src/index.ts | 6 +++- src/services/ChartMapping.service.ts | 30 +++++++++++++++++++ 8 files changed, 69 insertions(+), 21 deletions(-) create mode 100644 src/services/ChartMapping.service.ts diff --git a/src/chartMappings.ts b/src/chartMappings.ts index 166c96c..a22a1ff 100644 --- a/src/chartMappings.ts +++ b/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 = { } ] } -}; \ No newline at end of file +}; diff --git a/src/components/axisChart/axis-chart.component.ts b/src/components/axisChart/axis-chart.component.ts index b4df395..c1ca4e3 100644 --- a/src/components/axisChart/axis-chart.component.ts +++ b/src/components/axisChart/axis-chart.component.ts @@ -1,7 +1,7 @@ /// -import { axisChartMappings } from '../../chartMappings'; import { FsData, FsDataResponse } from '../../services/FsData.service'; import { DataLabelTransformer } from "../../services/DataLabelTransformer.service"; +import { ChartMapping } from "../../services/ChartMapping.service"; import './bar-chart.styles.scss'; interface ChartResponse { @@ -27,7 +27,8 @@ export abstract class AxisChartWidget { constructor( protected $scope: ng.IScope, protected FsData: FsData, - protected DataLabelTransformer: DataLabelTransformer + protected DataLabelTransformer: DataLabelTransformer, + protected ChartMapping: ChartMapping ) { } @@ -35,7 +36,7 @@ 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}`); } diff --git a/src/components/bar-chart/bar-chart.component.ts b/src/components/bar-chart/bar-chart.component.ts index b829fce..1fba5c8 100644 --- a/src/components/bar-chart/bar-chart.component.ts +++ b/src/components/bar-chart/bar-chart.component.ts @@ -3,6 +3,7 @@ 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({ @@ -35,9 +36,10 @@ export class BarChartWidget extends AxisChartWidget { constructor( protected $scope: ng.IScope, protected FsData: FsData, - protected DataLabelTransformer: DataLabelTransformer + protected DataLabelTransformer: DataLabelTransformer, + protected ChartMapping: ChartMapping ) { - super($scope, FsData, DataLabelTransformer); + super($scope, FsData, DataLabelTransformer, ChartMapping); } } \ No newline at end of file diff --git a/src/components/line-chart/line-chart.component.ts b/src/components/line-chart/line-chart.component.ts index 89f6e6a..672098a 100644 --- a/src/components/line-chart/line-chart.component.ts +++ b/src/components/line-chart/line-chart.component.ts @@ -3,6 +3,7 @@ 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({ @@ -35,9 +36,10 @@ export class LineChartWidget extends AxisChartWidget { constructor( protected $scope: ng.IScope, protected FsData: FsData, - protected DataLabelTransformer: DataLabelTransformer + protected DataLabelTransformer: DataLabelTransformer, + protected ChartMapping: ChartMapping ) { - super($scope, FsData, DataLabelTransformer); + super($scope, FsData, DataLabelTransformer, ChartMapping); } } \ No newline at end of file diff --git a/src/components/top-list/top-list.component.ts b/src/components/top-list/top-list.component.ts index 8b64d5d..c43c36a 100644 --- a/src/components/top-list/top-list.component.ts +++ b/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 {

{{vm.title}}

- - + + @@ -29,6 +30,9 @@ interface ToplistData { `, bindings: { title: '@', + keyTitle: '@', + valueTitle: '@', + limit: '@', type: '@', segments: '<', }, @@ -40,13 +44,15 @@ export class TopListWidget { private segments: string[] = ['all_data']; private list: ToplistData[] = []; - 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}`); } diff --git a/src/index.html b/src/index.html index dab1c0a..7cff361 100644 --- a/src/index.html +++ b/src/index.html @@ -52,10 +52,14 @@ new FsData()]) .service("DataLabelTransformer", [() => new DataLabelTransformer()]) .run(($http: ng.IHttpService) => $http.defaults.headers.common['Access-Control-Allow-Origin'] = '*') diff --git a/src/services/ChartMapping.service.ts b/src/services/ChartMapping.service.ts new file mode 100644 index 0000000..a4de0ae --- /dev/null +++ b/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 }; From ffca876300889d05c3f1c29d3d9fb6b94364aaf8 Mon Sep 17 00:00:00 2001 From: jonmuell Date: Tue, 28 Nov 2017 13:39:20 +0100 Subject: [PATCH 3/4] Add suffix for single stat widget --- src/components/single-value/single-value.component.ts | 9 ++++++++- src/index.html | 1 + 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/single-value/single-value.component.ts b/src/components/single-value/single-value.component.ts index 9fc1549..0b88885 100644 --- a/src/components/single-value/single-value.component.ts +++ b/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() { diff --git a/src/index.html b/src/index.html index 159b353..1618761 100644 --- a/src/index.html +++ b/src/index.html @@ -80,6 +80,7 @@ Date: Tue, 27 Mar 2018 16:37:17 +0200 Subject: [PATCH 4/4] Remove data label truncation --- src/components/axisChart/axis-chart.component.ts | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/components/axisChart/axis-chart.component.ts b/src/components/axisChart/axis-chart.component.ts index c1ca4e3..fb2cbdf 100644 --- a/src/components/axisChart/axis-chart.component.ts +++ b/src/components/axisChart/axis-chart.component.ts @@ -57,13 +57,7 @@ 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]; - } - }) + .map(d => d[xAxisColumn.key]) .filter((entry, index, arr) => labels.indexOf(entry) === -1) .map(this.DataLabelTransformer.transform); labels.push(...dataLabels);
NameValue{{vm.keyTitle}}{{vm.valueTitle}}