We offer a number of widgets in the Dashboard for our customers, in order to have some key data accessible and easy to find. That said, we understand sometimes some specific details may be more important than others for some customers. 

To this end, we have created our Widget API, so you can build your own dashboards using Kaisa data. The Widget API currently contains data points for three type of Widgets:

Bar/line charts:
call_length_distribution
calls_per_day
calls_top_attributions
daily_call_distribution
distribution_improvements_suggestions

Top lists:
geographic_origin
top_customers_by_calls

Single values:
average_calls_per_user
call_durations
call_totals
missed_calls
unique_callers
average_customer_feedback 
feedback_sms_sent
feedbacks_received

Get started

1. Install

Clone via git and use dist/index.js

git clone https://github.com/freespee/fs-widgets

2. Include dependencies and add module as dependency

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="/node_modules/Chart.min.js"></script>
<script src="/node_modules/angular-chart.min.js"></script>

let app = angular.module('app', ['fs-widgets']);

3. Configure your Kaisa account

Add your dataurl that points to a proxy as shown below.

customerId, fromDate and toDate are optional parameters that can be passed in to globally filter widgets.

let app = angular.module('app', ['fs-widgets']);

app.config(function(FsDataProvider) {
  FsDataProvider.customerId = 300033;
  FsDataProvider.fromDate = '2017-07-01';
  FsDataProvider.toDate = '2017-08-01';
  FsDataProvider.dataUrl = '/data?type={{type}}&customer_id={{customerId}}&from_date={{fromDate}}&to_date={{toDate}}';
  FsDataProvider.baseUrl = 'http://localhost:3000';
  FsDataProvider.dateFormat = 'YYYY-MM-DD'; // Optional. Default: 'YYYY-MM-DD'. See [momentjs](https://momentjs.com/docs/#/parsing/string-format) for a complete list of date formatting tokens.
});

3. Add widgets directives to template

  <fs-line-chart type="calls_per_day">
  </fs-line-chart>

The only attribute required is type. That tells the directive which data to display.

You can optionally pass title to specify the header of the widget, and segments to target specific segments of your visitors.

Translations to the series name can be configured via translations. In the case of call_events_per_day two series will be displayed, answered and missed. To override those you can pass an array of objects that looks like this.

  $scope.myTranslations = [
    {serieName: 'answered', translation: 'Antworten'},
    {serieName: 'missed', translation: 'Verpasste'}
  ]

  <fs-line-chart
    title="Calls per day"
    type="calls_per_day"
    fs-translations="myTranslations">
  </fs-line-chart>