auth0/auth0-dashboard-widget

Name: auth0-dashboard-widget

Owner: Auth0

Description: A users dashboard for Auth0 accounts

Created: 2015-08-04 14:49:53.0

Updated: 2017-07-26 17:35:20.0

Pushed: 2016-04-04 20:54:32.0

Homepage: http://auth0.github.io/auth0-dashboard-widget/

Size: 5958

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

Auth0 Dashboard Widget

Widget to show a dashboard about your users stats consuming the API provided by Auth0 Dashboard Backend

How it works

This widget can be separated in different sections. First, it provides different kind of ways to show your data. Second, it will connect all the widgets in order to allow cross filtering and data drill down. Finally, it uses an API to filter your users data.

Charts

All chart must register to the Auth0DasboardWidget which is the responsible of handling the chart events, calling the API to retrieve the fitered information and udpate the events.

widget = new Auth0DasboardWidget(api_endpoint);

et.on('loading', function(){
document.getElementById('loading').className = "visible";

et.on('loaded', function(){
document.getElementById('loading').className = "";


et.init();

et.register(chart1);
et.register(chart2);

• The api endpoint is the one the widget will call to retrieve the information
• The events loading and loaded are called before and after the api request is made
• The register method is used to regist each chart to the widget

The Auth0DasboardWidget provides an event in order to make it easy to register the charts in case they are instantiated separately. You can listen to the event like this:

ow.addEventListener('a0-dashboard-init', function (e) { 
var map = new Auth0MapWidget({
        ...        
    });
e.detail.widget.register(map);

Basic chart

This one will provide a simple pie or bar chart.

age = new Auth0BasicChartWidget({
    name:'age',
    grouping_field:'agebucket',
    selection_enabled: true,
    color_pattern:['#F39C12','#2ECC71','#3498DB','#9B59B6','#34495E','#F1C40F','#E67E22','#E74C3C', '#1ABC9C'],
    type: 'pie',
    data_processor: Auth0PieDataProcessor,
    wrapper_selector:'#auth0ChartAge'
});

• name: chart name
• grouping_field: field it will use to show the data
• selection_enabled: allow the user to select what will be user for filtering the data
• color_pattern: colors used in the chart
• type: C3js chart type
• data_processor: how it will handle the data to be shown (Pie or Bar data processor)
• wrapper_selector: where it will be shown

Map chart

It will show a map based on geolocated data

map = new Auth0MapWidget({
name:'location',
wrapper_selector:'auth0ChartLocations',
map_styles:[{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]

• map_styles: a way to customize the map style

TimeLine chart

This will show a line chart based on a timeline

Income chart

This is a multidimention chart based on parallel coordinates.

API endpoint

This widget needs an API in order to store the rates of the products. You can use webtask.io if you don't have a backend and it is provided with the plugin.

In order to create your webtask, download the webtask code and follow this steps:

• Follow the instructions to install the wt-cli tool and setup it for your Auth0 account.
• Create the webtask used by the plugin to retrieve the information:

  reate dashboard_endpoint.js --no-merge --no-parse
  

• Create the cronned webtask used to retriebe your users info and process it to allow the plugin query this information:

  ron schedule -n dashboard-cron "*/30 * * * *" dashboard_cron.js -p "wptest-default" \
  cret mongo_connection_string=mongo_connection_string \
  cret domain=yourdomain.auth0.com \
  cret app_token=app_token \
  tput url mfa-passwordless.js
  

  • mongo_connection_string: This widget needs some place to store the users information. In this case it uses a Mongolab MongoDB database.
  • domain: your account domain
  • app_token: this should be a valid app_token, with read:users scope (you can generate one here https://auth0.com/docs/api/v2#!/Users/get_users)

Issue Reporting

If you have found a bug or if you have a feature request, please report them at this repository issues section. Please do not report security vulnerabilities on the public GitHub issue tracker. The Responsible Disclosure Program details the procedure for disclosing security issues.

Author

Auth0

License

This project is licensed under the MIT license. See the LICENSE file for more info.