Added dropdown-menu and made the date interval changeable. Tagged 2.0.2

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "series-timeline",
   "description": "A Polymer Element that runs a time-series query and shows the response data in a timeline.",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "authors": ["Next Century Corporation"],
   "license": "Apache-2.0",
   "keywords": [
@@ -17,7 +17,9 @@
   "dependencies": {
     "polymer": "Polymer/polymer#2.5.0",
     "build-and-run-query": "DigElements/build-and-run-query#2.5.1",
+    "dropdown-menu": "DigElements/dropdown-menu#2.0.1",
     "elastic-client-query-builder": "DigElements/elastic-client-query-builder#2.1.2",
+    "lodash-import": "DigElements/lodash-import#~1.0.1",
     "zoomable-bar-chart": "DigElements/zoomable-bar-chart#2.2.1"
   },
   "devDependencies": {

series-timeline.html

@@ -16,7 +16,9 @@
 
 <link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="../build-and-run-query/build-and-run-query.html">
+<link rel="import" href="../dropdown-menu/dropdown-menu.html">
 <link rel="import" href="../elastic-client-query-builder/elastic-client-query-builder.html">
+<link rel="import" href="../lodash-import/lodash.html">
 <link rel="import" href="../zoomable-bar-chart/zoomable-bar-chart.html">
 
 <!--
@@ -44,6 +46,11 @@
         display: block;
       }
 
+      dropdown-menu {
+        /* Align with bar chart Y-axis. */
+        margin-left: 50px;
+      }
+
       .text {
         font-size: 14px;
         font-weight: 500;
@@ -80,7 +87,7 @@
       page-size="10000"
       source-exclude="[]"
       source-include="[[sourceInclude]]"
-      transform-config="[[transformConfig]]"
+      transform-config="[[_buildSeriesTransformConfig(interval, transformConfig)]]"
       transform-function="[[transformFunction]]"
       error="{{_seriesDataError}}"
       loading="{{_seriesDataLoading}}"
@@ -96,7 +103,7 @@
         default-label="[[label]]"
         height="85"
         hide-overview
-        interval="day"
+        interval="[[interval]]"
         label-property="text"
         load
         loading="[[_seriesDataLoading]]"
@@ -109,6 +116,15 @@
     <template is="dom-if" if="[[!_seriesData.length]]">
       <div class="text">No Time Series Data</div>
     </template>
+
+    <template is="dom-if" if="[[_seriesData.length]]">
+      <dropdown-menu
+        data='[{"title":"Hourly","value":"hour"},{"title":"Daily","value":"day"},{"title":"Weekly","value":"week"},{"title":"Monthly","value":"month"},{"title":"Yearly","value":"year"}]'
+        label="Date"
+        no-label-float
+        selected="{{interval}}">
+      </dropdown-menu>
+    </template>
   </template>
 
   <script>
@@ -191,6 +207,20 @@
           }
         },
 
+        /**
+         * (Optional|Output)
+         *
+         * The selected time interval.
+         *
+         * @type {String}
+         * @default 'month'
+         */
+        interval: {
+          notify: true,
+          type: String,
+          value: 'month'
+        },
+
         /**
          * (Optional)
          *
@@ -340,10 +370,28 @@
        * @param {Object} one
        * @param {Object} two
        * @return {Array}
+       * @private
        */
       _buildArray: function(one, two) {
         return (one && two) ? [one, two] : [];
       },
+
+      /**
+       * Returns the transform config for the series transform function.
+       *
+       * @param {String} interval
+       * @param {Object} config
+       * @return {Object}
+       * @private
+       */
+      _buildSeriesTransformConfig: function(interval, config) {
+        if(interval && config) {
+          var clonedConfig = _.cloneDeep(config);
+          clonedConfig.interval = interval;
+          return clonedConfig;
+        }
+        return undefined;
+      }
     });
   })();
   </script>

test/series-timeline-test.html

@@ -68,6 +68,28 @@
         expect(element._buildArray(1, 2)).to.deep.equal([1, 2]);
       });
 
+      test('_buildSeriesTransformConfig does work as expected', function() {
+        expect(element._buildSeriesTransformConfig()).to.not.exist;
+        expect(element._buildSeriesTransformConfig('interval', undefined)).to.not.exist;
+        expect(element._buildSeriesTransformConfig(undefined, {
+          key: 'value'
+        })).to.not.exist;
+        expect(element._buildSeriesTransformConfig('interval', {
+          key: 'value'
+        })).to.deep.equal({
+          interval: 'interval',
+          key: 'value'
+        });
+      });
+
+      test('_buildSeriesTransformConfig does copy config', function() {
+        var config = {
+          key: 'value'
+        };
+        var output = element._buildSeriesTransformConfig('interval', config);
+        expect(config).to.not.equal(output);
+      });
+
       test('setting idField and seriesId does set _seriesIdQuery', function() {
         element.idField = 'testIdField';
         expect(element._seriesIdQuery).to.not.exist;
@@ -109,6 +131,28 @@
           done();
         });
       });
+
+      test('setting _seriesData to empty array does show text', function(done) {
+        expect(element.$$('.text')).to.not.exist;
+
+        element._seriesData = [];
+
+        flush(function() {
+          expect(element.$$('.text')).to.exist;
+          done();
+        });
+      });
+
+      test('setting _seriesData to non-empty array does show dropdown-menu', function(done) {
+        expect(element.$$('dropdown-menu')).to.not.exist;
+
+        element._seriesData = [{}];
+
+        flush(function() {
+          expect(element.$$('dropdown-menu')).to.exist;
+          done();
+        });
+      });
     });
   </script>
 </body>