Skip to content

Latest commit

 

History

History
91 lines (68 loc) · 2.5 KB

readme.md

File metadata and controls

91 lines (68 loc) · 2.5 KB
Raw

fs-widgets

A collection of widgets for displaying data from the Freespee platform.

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 Freespee 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 diretive wich data to display.

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

Translations to the series name can be configure 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>
Available widget types
Bar/line charts:
  • call_length_distribution
  • calls_per_day
  • calls_top_attributions
  • daily_call_distribution
Top lists:
  • geographic_origin
  • top_customers_by_calls
Single values:
  • average_calls_per_user
  • call_durations
  • call_totals
  • missed_calls
  • unique_callers