date style

Author: stepanovit

dist/assets/css/widgets.css

@@ -1,6 +1,6 @@
 {
   "name": "widgets",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "",
   "main": "dist/widgets.js",
   "directories": {

dist/widgets.js

@@ -1,7 +1,7 @@
 <template>
     <div>
         <GChart :type="chartType" :data="chartData" :options="chartOptions" :events="chartEvents" @ready="onReady" />
-{{setZoom()}}
+{{setUnits()}}
 {{setRevert()}}
     </div>
 </template>
@@ -79,7 +79,7 @@
             }
         },
         mounted: function(){
-            this.setZoom();
+            this.setUnits();
             this.setRevert();
         },
         methods: {
@@ -121,23 +121,19 @@
                     }
                 }
             },
-            setZoom: function(){
+            setUnits: function(){
                 let it = this;
                 if(it.$el && it.context.query.refresh){
                     if(!it.dFormat){
                         it.dFormat = document.createElement('div');
-                        it.dFormat.innerHTML = "Time units <select>" +
+                        // opacity: 0
+                        it.dFormat.innerHTML = "<span></span><select>" +
                             // "<option value='%Y-%m-%dT%H'>Hours</option>" +
                             "<option value='%Y-%m-%d'>Days</option>" +
-                            "<option value='%Y-%m'>Month</option>" +
+                            "<option value='%Y-%m'>Months</option>" +
                             "<option value='%Y'>Years</option>" +
                             "</select>";
-                        it.dFormat.style.position = "absolute";
-                        it.dFormat.style.zIndex = 1000;
-                        it.dFormat.style.bottom = '15px';
-                        it.dFormat.style.left = '0';
-                        it.dFormat.style.width = '100%';
-                        it.dFormat.style.textAlign = 'center';
+                        it.dFormat.classList.add('widgets-set-units');
                         it.$el.appendChild(it.dFormat);
                         it.dFormat.querySelector('select').addEventListener('change', function(e){
                             // if (Array.isArray(it.historyRequests)){
@@ -152,6 +148,7 @@
                         });
                     }
                     it.dFormat.querySelector('select').value = it.context.query.variables.dateFormat;
+                    it.dFormat.querySelector('span').innerText = it.dFormat.querySelector('select>option:checked').text;
                 }
             },
             prepareChartData: function(result, options){

package.json

@@ -287,3 +287,29 @@
 .widgets-errors{
   color: red;
 }
+
+.widgets-set-units{
+  position: absolute;
+  z-index: 1000;
+  bottom: 15px;
+  left: 0;
+  width: 100%;
+  text-align: center;
+
+  span{
+    text-decoration-line: underline;
+    text-decoration-style: dashed;
+    text-underline-position: under;
+    cursor: pointer;
+  }
+
+  select{
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    position: absolute;
+    left: 0;
+    right: 0;
+    opacity: 0;
+  }
+}