Merge pull request #11 from RobDWaller/tidyup

Tidyup, including fixes for desktop bugs
RobDWaller · Aug 9, 2018 · edbcebd · edbcebd
2 parents 7d218a1 + 0a1b092
commit edbcebd
Show file tree

Hide file tree

Showing 12 changed files with 58 additions and 57 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -3,6 +3,10 @@ language: node_js
 node_js:
     - "8"
 
+before_script:
+    - cp config-example.js config.js
+
 script:
     - yarn codecov
     - yarn analyse
+    - yarn build
diff --git a/README.md b/README.md
@@ -1,13 +1,13 @@
-# [Fableau](http://fableau.io) (Alpha)
+# [Fableau](http://fableau.io) (Beta)
+[![Build Status](https://travis-ci.org/RobDWaller/fableau.svg?branch=master)](https://travis-ci.org/RobDWaller/fableau) [![codecov](https://codecov.io/gh/RobDWaller/fableau/branch/master/graph/badge.svg)](https://codecov.io/gh/RobDWaller/fableau)
 
-A Tableau Web Data Connector for Facebook that allows you to pull your page and
-post metrics data into Tableau.  
+A Tableau Web Data Connector for Facebook that allows you to pull your Facebook post and
+page metrics data into Tableau.  
 
-The WDC is currently in alpha and requires further testing and tidy up, please
-use it at your own risk until we release a stable version.
+The WDC is currently in alpha and requires further testing and tidy up.
 
 You can use this code to create your own Web Data Connector however you can use
-the connector as is at [Fableau.io](http://fableau.io)
+the connector itself at [Fableau.io](http://fableau.io)
 
 ## End Points
 
@@ -34,8 +34,8 @@ long term access token via client code.
 
 For more information on this issue please see the [Facebook documentation](https://developers.facebook.com/docs/facebook-login/access-tokens).
 It is relatively simple to solve this problem using server based code such as
-PHP or Python. We have no plans to extend this Web Data Connector to solve
-this problem.  
+PHP, Python or NodeJS. We have no plans to extend this Web Data Connector to solve
+this problem at this time.  
 
 ## License
 

diff --git a/config-example.js b/config-example.js
@@ -2,5 +2,5 @@
  * Set your Facebook app id here.
  */
 export const facebook = {
-    'client_id': //Fill In Your Facebook App Id
+    'client_id': '123'//Fill In Your Facebook App Id
 }
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "devDependencies": {
         "babel-core": "^6.26.3",
         "babel-jest": "^23.4.0",
+        "babel-loader": "^7.1.5",
         "babel-preset-env": "^1.7.0",
         "codecov": "^3.0.4",
         "css-loader": "^0.28.11",
@@ -51,6 +52,7 @@
             "^.+\\.js$": "babel-jest"
         },
         "verbose": true,
+        "testURL": "http://localhost/",
         "coverageDirectory": "./coverage/",
         "collectCoverage": true,
         "collectCoverageFrom": [

diff --git a/public/index.html b/public/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <title>Fableau (Alpha): A Tableau Facebook Web Data Connector for Tableau</title>
+        <title>Fableau (Beta): A Tableau Facebook Web Data Connector for Tableau</title>
         <link href="https://fonts.googleapis.com/css?family=Montserrat|Slabo+27px" rel="stylesheet">
         <link rel="stylesheet" href="assets/main.css">
         <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
@@ -10,20 +10,20 @@
         <meta name="keywords" content="tableau, fableau, web data connector, wdc, facebook" />
         <meta name="robots" content="index,follow" />
         <meta name="description" content="A Tableau Web Data Connector for Facebook Pages. Visualise your data beautifully and analyse it intelligently" />
-        <meta property="og:title" content="Fableau (Alpha): A Tableau Web Data Connector for Facebook" />
+        <meta property="og:title" content="Fableau (Beta): A Tableau Web Data Connector for Facebook" />
         <meta property="og:description" content="A Tableau Web Data Connector for Facebook Pages. Visualise your data beautifully and analyse it intelligently" />
         <meta property="og:url" content="http://fableau.io" />
         <meta property="og:image" content="" />
         <meta name="twitter:card" content="summary" />
         <meta name="twitter:site" content="" />
-        <meta name="twitter:title" content="Fableau (Alpha): A Tableau Web Data Connector for Facebook" />
+        <meta name="twitter:title" content="Fableau (Beta): A Tableau Web Data Connector for Facebook" />
         <meta name="twitter:description" content="A Tableau Web Data Connector for Facebook Pages. Visualise your data beautifully and analyse it intelligently" />
         <meta name="twitter:image" content="" />
     </head>
     <body>
         <div id="holder">
             <div class="header">
-                <h1 class="header__text">Fableau (Alpha)</h1>
+                <h1 class="header__text">Fableau (Beta)</h1>
             </div>
             <div class="facebook_auth" id="facebook-block">
                 <p class="facebook_auth__text">A Tableau Web Data Connector for Facebook Pages. Visualise your data beautifully and analyse it intelligently.</p>

diff --git a/src/js/helper/message-remover.js b/src/js/helper/message-remover.js
@@ -19,7 +19,7 @@ class MessageRemover {
    * @param Event event
    */
   remove (event) {
-    if (event.target && event.target.matches('div.message__close')) {
+    if (event.target && this.matches(event, 'div.message__close')) {
       let elements = this.dom.getClass('message__close')
 
       Array.prototype.forEach.call(elements, (element) => {
@@ -29,6 +29,22 @@ class MessageRemover {
       })
     }
   }
+
+  /**
+   * This is a pollyfill for event.target to work with Tableau Desktop which
+   * seems to use an old version of IE as its client.
+   *
+   * @param Event event
+   * @param string elementString
+   * @return bool
+   */
+  matches (event, elementString) {
+    if (!event.target.matches) {
+      return (event.srcElement.type + '.' + event.srcElement.className) === elementString
+    }
+
+    return event.target.matches(elementString)
+  }
 }
 
 export default MessageRemover
diff --git a/src/js/init.js b/src/js/init.js
@@ -109,6 +109,8 @@ window.onload = function () {
     var tableauBuilder = new TableauBuilder(tableau, new Ajax())
     await tableauBuilder.setConnectionData(app.getFacebookAccessToken())
     tableauBuilder.setConnectionName('Fableau Facebook Metrics')
+    // Not used by the Web Data Connector, password is required by Tableau.
+    tableauBuilder.setPassword('password')
     tableauBuilder.submit()
   }
 

diff --git a/src/js/service/facebook/requests.js b/src/js/service/facebook/requests.js
@@ -45,7 +45,7 @@ class FacebookRequests {
    */
   getPostMetrics (page) {
     return this.facebookData.getDataPaginate(
-      `${this.urlPrepend}/${page.id}/posts?fields=insights.metric(post_stories,post_storytellers,post_story_adds,post_story_adds_unique,post_engaged_users,post_consumptions,post_consumptions_unique,post_impressions,post_impressions_unique,post_impressions_paid,post_impressions_paid_unique,post_reactions_like_total,post_reactions_love_total,post_reactions_wow_total,post_reactions_haha_total,post_reactions_sorry_total,post_reactions_anger_total)&access_token=${page.access_token}`
+      `${this.urlPrepend}/${page.id}/posts?fields=insights.metric(post_impressions,post_impressions_unique,post_impressions_paid,post_impressions_paid_unique,post_reactions_like_total,post_reactions_love_total,post_reactions_wow_total,post_reactions_haha_total,post_reactions_sorry_total,post_reactions_anger_total)&access_token=${page.access_token}`
     ).then((result) => {
       return new PostMetrics(result)
     })
@@ -85,7 +85,7 @@ class FacebookRequests {
    */
   getPageMetrics (page) {
     return this.facebookData.getDataPaginate(
-      `${this.urlPrepend}/${page.id}/insights/page_impressions,page_impressions_unique,page_impressions_paid,page_impressions_organic,page_stories,page_engaged_users,page_consumptions,page_consumptions_unique,page_negative_feedback,page_negative_feedback_unique,page_fan_adds_unique,page_views_total,page_views_logged_in_unique,page_posts_impressions,page_posts_impressions_unique,page_posts_impressions_paid,page_posts_impressions_organic,page_post_engagements,page_video_views?access_token=${page.access_token}&since=${this.date.getUnixTimestampMinusDays(90)}&until=${this.date.getUnixTimestamp()}`, 'previous', true
+      `${this.urlPrepend}/${page.id}/insights/page_impressions,page_impressions_unique,page_impressions_paid,page_impressions_organic,page_engaged_users,page_consumptions,page_consumptions_unique,page_negative_feedback,page_negative_feedback_unique,page_fan_adds_unique,page_views_total,page_views_logged_in_unique,page_posts_impressions,page_posts_impressions_unique,page_posts_impressions_paid,page_posts_impressions_organic,page_post_engagements,page_video_views?access_token=${page.access_token}&since=${this.date.getUnixTimestampMinusDays(90)}&until=${this.date.getUnixTimestamp()}`, 'previous', true
     ).then((result) => {
       return new PageMetrics(result)
     })

diff --git a/src/js/tableau/builder.js b/src/js/tableau/builder.js
@@ -141,12 +141,14 @@ class TableauBuilder {
   }
 
   /**
-   * @todo may not need this method anymore
+   * Sets the Tableau WDC password property. Only used because Tableau requires
+   * the password property to be set.
+   *
+   * @param string password
    */
-  // setPassword(password)
-  // {
-  //     this.tableau.password = password;
-  // }
+  setPassword (password) {
+    this.tableau.password = password
+  }
 
   /**
    * Set the connection data for Tableau to use for Facebook requests. This

diff --git a/src/js/tableau/columns/page-metrics.js b/src/js/tableau/columns/page-metrics.js
@@ -71,18 +71,6 @@ class PageImpressionColumns {
       id: 'page_impressions_organic_days_28',
       alias: 'Impressions Organic Last Month',
       dataType: this.tableauDataTypeObject.int
-    }, {
-      id: 'page_stories_day',
-      alias: 'Stories Last Day',
-      dataType: this.tableauDataTypeObject.int
-    }, {
-      id: 'page_stories_week',
-      alias: 'Stories Last Week',
-      dataType: this.tableauDataTypeObject.int
-    }, {
-      id: 'page_stories_days_28',
-      alias: 'Stories Last Month',
-      dataType: this.tableauDataTypeObject.int
     }, {
       id: 'page_engaged_users_day',
       alias: 'Engaged Users Last Day',

diff --git a/src/js/tableau/columns/post-metrics.js b/src/js/tableau/columns/post-metrics.js
@@ -31,30 +31,6 @@ class PageColumns {
       id: 'page_post_id',
       alias: 'Page Post Id',
       dataType: this.tableauDataTypeObject.string
-    }, {
-      id: 'post_stories',
-      alias: 'Stories',
-      dataType: this.tableauDataTypeObject.int
-    }, {
-      id: 'post_storytellers',
-      alias: 'Storytellers',
-      dataType: this.tableauDataTypeObject.int
-    }, {
-      id: 'post_story_adds',
-      alias: 'Story Adds',
-      dataType: this.tableauDataTypeObject.int
-    }, {
-      id: 'post_engaged_users',
-      alias: 'Engaged Users',
-      dataType: this.tableauDataTypeObject.int
-    }, {
-      id: 'post_consumptions',
-      alias: 'Consumptions',
-      dataType: this.tableauDataTypeObject.int
-    }, {
-      id: 'post_consumptions_unique',
-      alias: 'Consumptions Unique',
-      dataType: this.tableauDataTypeObject.int
     }, {
       id: 'post_impressions',
       alias: 'Impressions',

diff --git a/webpack.config.js b/webpack.config.js
@@ -15,6 +15,17 @@ module.exports = {
                 "css-loader",
                 "sass-loader"
             ]
+        },{
+            test: /\.js$/,
+            exclude: /(node_modules|bower_components)/,
+            use: {
+                loader: "babel-loader",
+                options: {
+                    presets: [
+                        ["env"]
+                    ]
+                }
+            }
         }]
     },
     plugins: [