Allow more than one dimension to be filtered in Wikistats

This change phases out the long-standing assumption that there
is only one active "breakdown" in a given graph. The new behavior
will only accept one splitting dimension (what we previously
referred to as "breakdown"), but allow more than one dimension to
be filtered by.

Additionally, this change also allows metrics to be filtered with
and without splitting, meaning more complex questions that involve
aggregation can now be answered with Wikistats (e.g. what's the
evolution of the total amount of user editors, by number of
content-only edits, with a higher edit count than 5 per month?).

Since it's a pretty big change in the inner workings of the app I've
tried to add tests as much as possible and rewrite a couple of functions
with proper testing included.

Bug: T255757
Change-Id: I40d5a676422b167bcfddc7d69b5f431bbac3fbe5

package.json

@@ -34,6 +34,7 @@
         "wmui-base": "wikimedia/wikimedia-ui-base"
     },
     "devDependencies": {
+        "@vue/test-utils": "^1.0.3",
         "babel-core": "^6.25.0",
         "babel-loader": "^7.0.0",
         "babel-plugin-dynamic-import-webpack": "^1.0.2",

src/apis/annotation.js

@@ -72,7 +72,7 @@ class AnnotationApi {
      *      title:          {String},
      *      date:           {Date},
      *      breakdown:      {String},
-     *      breakdownValue: {String},
+     *      splitValue:     {String},
      *  }
      */
     getAnnotations (graphModel) {

src/apis/aqs.js

@@ -41,13 +41,14 @@ class AQS {
      *  /pageviews/aggregate/fr.wiktionary /desktop    /user/daily/20170514/20170614
      *  /pageviews/aggregate/fr.wiktionary /mobile-web /user/daily/20170514/20170614
      */
-    getData (uniqueParameters, commonParameters) {
+    getData (uniqueParameters, commonParameters, dimensions) {
         let tries = 3;
         return new Promise((resolve, reject) => {
             const attemptGettingData = () => {
                 const uncheckedPromise = this.requestData(
                     uniqueParameters,
-                    commonParameters
+                    commonParameters,
+                    dimensions
                 );
                 uncheckedPromise.then(dimensionalData => {
                     /*
@@ -70,7 +71,7 @@ class AQS {
         });
     }
 
-    requestData (uniqueParameters, commonParameters) {
+    requestData (uniqueParameters, commonParameters, dimensions) {
         if (!commonParameters.metric) {
             return new Promise(() => new DimensionalData());
         }
@@ -84,14 +85,22 @@ class AQS {
         if (metricConfig.cumulative === true) {
             commonParameters.start = '1980010100';
         }
-        let promises = utils.labeledCrossProduct(uniqueParameters)
+
+        let promises = utils.dimensionsKeyExplode(dimensions)
             .map(p => Object.assign(p, commonParameters))
             .map(p => {
+                p.referer = uniqueParameters.referer && uniqueParameters.referer[0];
+                p.project = uniqueParameters.project && uniqueParameters.project[0];
                 if (p.referer) {
                     // hack for mediarequests
                     p.referer = p.project.replace('all-projects', 'all-referers');
                     p.project = p.referer;
                 }
+                for (let up in uniqueParameters) {
+                    if (!p[up]) {
+                        p[up] = uniqueParameters[up];
+                    }
+                }
                 let url = apiConfig.endpoint;
                 (url.match(/{{.*?}}/g) || []).forEach((k) => {
                     const key = _.trim(k, '{}');
@@ -174,7 +183,7 @@ class AQS {
         ]
     }
 
-    Any hyphens in keys will be replaced by underscores to uniformise breakdown keys
+    Any hyphens in keys will be replaced by underscores to uniformize dimension keys
     and parameter names.
     */
     transformResults (data) {

src/components/dashboard/MetricWidget/MetricWidget.vue

@@ -39,6 +39,7 @@ import AQS from 'Src/apis/aqs';
 import config from 'Src/config';
 import utils from 'Src/utils';
 import GraphModel from 'Src/models/GraphModel';
+import Dimension from 'Src/models/Dimension';
 import RouterLink from '../../RouterLink';
 
 let aqsApi = new AQS();
@@ -67,6 +68,7 @@ export default {
     },
 
     mounted () {
+        this.graphModel.dimensions = Dimension.fromMetricConfig(this.metricConfig);
         this.loadData();
         if (this.metrics.length > 1 && !this.mobile) {
             setInterval(() => {