kanaui 0.5.0 → 0.5.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 5028db371172c24fb078fdc217e985e058cfbecf
-  data.tar.gz: da0922bc0da3a84267d30f0f80138a23fa9f92c9
+  metadata.gz: b509920c148aef35ccf0bffbe38b935b669a35ff
+  data.tar.gz: e5d121e521e55c1c3f882f7f0bbfd576c961a7e9
 SHA512:
-  metadata.gz: 9fc14b185e6631a093a74bee47b1825b7fd04aa4dbc7cbc519318e24657cd721168fb70304e5cc3859bd3a2474d499f7c8d45dbbf8f2d18b2688f2d2c6241b6a
-  data.tar.gz: ce0be1bf02f07f8173a4c99f7b389408ffc5f7f8eef47233e970753e5811f550ae05f650d3eea74089f30b52982183f4ba6f447c437f9da6049accb8938249ee
+  metadata.gz: e8ebbb2db468390719e6c125880f483382f2cfd61ca4256128409c7dfa89aa11b367d3f6b5bdc039897c81de3fd627007348ff2c86e82096e94392c4c7f47b4d
+  data.tar.gz: bc6c3397d0fa1f6192f81cf85c199934126c4a42283791ec8e6ec7b0b8e31dc7678804dc5c288474713f22a9ccad7dac089967a2a6fed42440b5edb83956bc81

data/app/assets/javascripts/kanaui/kiddo/axes.js

@@ -13,7 +13,7 @@
       return d3.svg.axis()
         .scale(self.y)
         .orient("left")
-        .tickFormat(d3.format('d'));
+        .tickFormat(d3.format(',d'));
     }
 
     var xAxis = makeXAxis();
@@ -23,32 +23,32 @@
       x: xAxis,
       y: yAxis,
       render: function(svg, yTitle){
-        svg.append("g")
-          .attr("class", "x axis")
-          .attr("transform", "translate(" + self.margin_left + "," + self.height + ")")
-          .call(xAxis);
-
-        svg.append("g")
-          .attr("class", "y axis")
-          .attr("transform", "translate(" + self.margin_left + ",0)")
-          .call(yAxis)
-
-        .append("text")
-          .attr("transform", "rotate(-90)")
-          .attr("y", 6)
-          .attr("dy", ".71em")
-          .style("text-anchor", "end")
-          .text(yTitle);
+          svg.append("g")
+              .attr("class", "grid")
+              .attr("transform", "translate(" + self.margin_left + "," + self.height + ")")
+              .call(makeXAxis().tickSize(-self.height, 0, 0).tickFormat(""));
+
+          svg.append("g")
+              .attr("class", "grid")
+              .attr("transform", "translate(" + self.margin_left + ",0)")
+              .call(makeYAxis().tickSize(-self.width, 0, 0).tickFormat(""));
 
           svg.append("g")
-            .attr("class", "grid")
-            .attr("transform", "translate(" + self.margin_left + "," + self.height + ")")
-            .call(makeXAxis().tickSize(-self.height, 0, 0).tickFormat(""));
-
-           svg.append("g")
-             .attr("class", "grid")
-             .attr("transform", "translate(" + self.margin_left + ",0)")
-             .call(makeYAxis().tickSize(-self.width, 0, 0).tickFormat(""));
+              .attr("class", "x axis")
+              .attr("transform", "translate(" + self.margin_left + "," + self.height + ")")
+              .call(xAxis);
+
+          svg.append("g")
+              .attr("class", "y axis")
+              .attr("transform", "translate(" + self.margin_left + ",0)")
+              .call(yAxis);
+              //.append("text")
+              //.attr("transform", "rotate(-90)")
+              //.attr("y", 6)
+              //.attr("dy", ".71em")
+              //.style("text-anchor", "end")
+              //.text(yTitle);
+
       }
     };
   };

data/app/assets/javascripts/kanaui/kiddo/charts/line_chart.js

@@ -30,11 +30,16 @@
 
         self.x.domain(x_domain);
 
-        var y_domain = [0, d3.max(datasets, function(datum){
-          return d3.max(datum.values, function(d){
-            return d.y;
-          });
-        })];
+        var y_domain = [d3.min(datasets, function (datum) {
+                            return d3.min(datum.values, function (d) {
+                                return d.y;
+                            });
+                        }),
+                        d3.max(datasets, function (datum) {
+                            return d3.max(datum.values, function (d) {
+                                return d.y;
+                            });
+                        })];
 
         self.y.domain(y_domain);
 
@@ -47,8 +52,8 @@
             name = dataset.name;
 
           data.forEach(function(d) {
-            d.date = d.x;
-            d.x = helper.parseDate(d.x);
+            d.date = d.x.split('T')[0]; // Support both date and date/times
+            d.x = helper.parseDate(d.date);
             d.y = +d.y;
           });
 

data/app/assets/javascripts/kanaui/kiddo/charts/utils/mouse_over.js

@@ -12,23 +12,13 @@
             .style("display", "none");
 
         var canvas = svg.append("g")
+          .attr("id", "mouseover_canvas")
           .style("display", "none");
 
         var info = canvas.append("rect")
           .attr("class", "information")
           .attr("width", self.width / 2);
 
-        var addInfoDimensions = function(element){
-          var box = element.node().getBBox();
-          var infoBox = info.node().getBBox();
-          var margin = 10;
-
-          info.attr("height", infoBox.height + box.height + margin);
-          if(infoBox.width < box.width){
-            info.attr("width", box.width + margin);
-          }
-        };
-
         // The magic:
         svg.append("rect")
           .attr("class", "overlay")
@@ -41,45 +31,49 @@
 
         var infoTitleBg = canvas.append("rect")
           .attr("class", "info-title__bg")
-          .attr("width", self.width / 2)
+          .attr("width", self.width)
           .attr("height", 30);
 
-        canvas.append("text")
-          .attr("dy", ".85em")
-          .attr("dx", 100)
+        var infoTitle = canvas.append("text")
+          .attr("dy", "1em")
+          .attr("dx", 0)
           .attr("class", "info-title")
           .attr("id", "info-title");
 
-        addInfoDimensions(infoTitleBg);
+        var addInfoDimensions = function(element) {
+          // On mouseover, element is the current label_idx
+          var box = element.node().getBBox();
+          // infoBox is the .information rect
+          var infoBox = info.node().getBBox();
+          var infoTitleBox = infoTitle.node().getBBox();
+          var margin = 40;
+
+          info.attr("height", infoBox.height + box.height + 7);
+          if (infoBox.width < box.width) {
+            info.attr("width", box.width + margin);
+            infoTitleBg.attr("width", box.width + margin);
+
+            $('#mouseover_canvas #info-title').attr("dx", (box.width + margin) / 2 - infoTitleBox.width / 2);
+          }
+        };
 
         self.datasets.forEach(function(element, index){
           focus.append("circle")
             .attr("r", 4.5)
             .attr("id", "circle_" + index)
             .attr("transform", "translate(" + self.margin_left + ",0)");
-
-          canvas.append("circle")
-            .attr("r", 5.5)
-            .attr("cx", 10)
-            .attr("cy", (index + 2) * 25)
-            .style("fill", self.color(element.name))
-            .style("stroke", "black")
-
-          var text = canvas.append("text")
-            .attr("y", (index + 2) * 25)
-            .attr("x", 20)
-            .attr("cx", 20)
-            .attr("dy", ".35em")
-            .attr("class", "chart_values")
-            .attr("id", "label_" + index)
-            .text(element.name);
-
-          addInfoDimensions(text);
         });
 
         function mousemove() {
           var _this = this;
 
+          $('#mouseover_canvas .chart_values').detach().remove();
+          $('#mouseover_canvas .chart_circles').detach().remove();
+          info.attr("height", infoTitleBg.node().getBBox().height + 10);
+          info.attr("width", 1);
+          infoTitle.attr("width", 1);
+
+          var elementsForLegend = [];
           self.datasets.forEach(function(element, index){
             var data = element.values;
             var name = element.name;
@@ -87,16 +81,24 @@
             var x0 = x.invert(d3.mouse(_this)[0]),
               i = helper.bisectDate(data, x0, 1),
               d0 = data[i - 1],
-              d1 = data[i],
-              d = x0 - d0.x > d1.x - x0 ? d1 : d0;
+              d1 = data[i];
+
+            if (d0 !== undefined && d1 !== undefined) {
+                var d = x0 - d0.x > d1.x - x0 ? d1 : d0;
+            } else if (d0 !== undefined) {
+                var d = d0;
+            } else if (d1 !== undefined) {
+                var d = d1;
+            } else {
+                return;
+            }
 
             focus.select("#circle_" + index)
               .attr("cx", x(d.x))
               .attr("cy", y(d.y))
               .style("fill", self.color(name));
 
-            var infoWidth = info.node().getBBox().width
-            var canvasPosition = x(x0) > self.width / 2 ? 50 : self.width - infoWidth;
+            var canvasPosition = x(x0) > self.width / 2 ? 50 : self.width / 2;
 
             canvas
               .attr("transform", "translate(" + canvasPosition + ",0)");
@@ -104,7 +106,33 @@
             canvas.select("#info-title")
               .text(d.date);
 
-            text = canvas.select("#label_" + index).text(helper.formatValueDisplay(name, d));
+            elementsForLegend.push({element: element, d: d});
+          });
+
+          elementsForLegend.sort(function (a, b) {
+              return a.d.y > b.d.y ? -1 : (a.d.y < b.d.y ? 1 : 0);
+          });
+
+          // Limit the number of legend items (document largest values only)
+          elementsForLegend.slice(0,10).forEach(function(element, index) {
+              canvas.append("circle")
+                  .attr("r", 5.5)
+                  .attr("cx", 15)
+                  .attr("cy", (index + 2) * 25)
+                  .attr("class", "chart_circles")
+                  .style("fill", self.color(element.element.name))
+                  .style("stroke", "black")
+
+              var text = canvas.append("text")
+                  .attr("y", (index + 2) * 25)
+                  .attr("x", 25)
+                  .attr("cx", 25)
+                  .attr("dy", ".35em")
+                  .attr("class", "chart_values")
+                  .attr("id", "label_" + index)
+                  .text(element.d === undefined ? element.element.name : helper.formatValueDisplay(element.element.name, element.d));
+
+              addInfoDimensions(text);
           });
         }
       }

data/app/assets/javascripts/kanaui/kiddo/kiddo_initialize.js

@@ -3,40 +3,48 @@
     if($('#chartAnchor').length == 0) { return; }
 
     d3.json($('#chartAnchor').data('reports-path'), function(error, json){
-      if(error){ throw error };
+      $('#loading-spinner').remove();
+
+      var renderer = new Kiddo.Renderer('#chartAnchor');
+
+      if (error) {
+        console.log(error);
+        return renderer.noData();
+      }
 
       var data = json[0];
 
-      $('#loading-spinner').remove();
+      if (data === undefined ||
+          data.data === undefined ||
+          data.data.length == 0) {
+        return renderer.noData();
+      }
 
       var render = function(type){
-        if(data.data.length == 0) { return renderer.noData(); }
         switch(type){
           case 'COUNTERS':
-            var renderer = new Kiddo.Renderer('#chartAnchor');
-            renderer.pieChart(data)
+            renderer.pieChart(data);
             break;
           case 'TIMELINE':
-            var renderer = new Kiddo.Renderer('#chartAnchor');
             renderer.lineChart(data);
+            // Date controls only make sense for timelines
+            $('#date-controls').show();
             break;
           case 'TABLE':
-            new ReportsDataTables(null).buildTable(data['data'][0], $('#chartAnchor'));
+            renderer.table(data);
             break;
           default:
             console.log('No such type implemented: ' + type);
-            var renderer = new Kiddo.Renderer('#chartAnchor');
             renderer.noData();
         }
       };
 
       try{
-        render(json[0].type);
-      }catch(ex){
+        render(data.type);
+      } catch (ex){
         console.log(ex);
         renderer.noData();
       }
-
     });
   });
 })(d3, jQuery, window, document);

data/app/assets/javascripts/kanaui/kiddo/renderer.js

@@ -9,6 +9,7 @@
       .append('svg')
         .attr('width', settings.raw_width)
         .attr('height', settings.raw_height)
+        .attr('style', 'overflow: visible')
       .append('g')
         .attr('transform', 'translate(' + settings.margin_left + ',' + settings.margin_top + ')');
 
@@ -18,11 +19,15 @@
         chart.render(svg, data);
       },
 
-      pieChart: function(data){
-        var chart = Kiddo.PieChart.apply(settings);
+      pieChart: function(data){var chart = Kiddo.PieChart.apply(settings);
         chart.render(svg, data);
       },
 
+      table: function(data){
+        svg.node().parentNode.remove();
+        new ReportsDataTables(null).buildTable(data['data'][0], $(selector));
+      },
+
       noData: function(){
         svg.append('text')
           .attr('class', 'chart-info')

data/app/assets/javascripts/kanaui/kiddo/settings.js

@@ -2,7 +2,7 @@
   Kiddo.Settings = function(){
     var margin_top =  30,
       margin_bottom = 40,
-      margin_left = 30,
+      margin_left = 50,
       margin_right = 150,
       raw_width = parseInt(this.element.node().getBoundingClientRect().width, 10),
       raw_height = 500;

data/app/assets/stylesheets/kanaui/reports.css

@@ -10,7 +10,7 @@
 }
 
 .x.axis path {
-  display: none;
+  #display: none;
 }
 
 .line {

data/app/controllers/kanaui/dashboard_controller.rb

@@ -6,44 +6,64 @@ module Kanaui
     # the reports and available_reports endpoints below.
     #
     def index
-      raw_reports = Kanaui::DashboardHelper::DashboardApi.available_reports(options)
+      raw_reports = Kanaui::DashboardHelper::DashboardApi.available_reports(options_for_klient)
 
-      @endDate = params['endDate'] || Date.today.to_s
+      @raw_name = (params[:name] || '').split('^')[0]
+
+      @end_date = params[:end_date] || Date.today.to_s
 
       @available_start_dates = start_date_options
-      @startDate = params['startDate'] || @available_start_dates['Last 6 months']
+      @start_date = params[:start_date] || (params[:delta_days].present? ? (@end_date.to_date - params[:delta_days].to_i.day).to_s : @available_start_dates['Last 6 months'])
 
       @reports = JSON.parse(raw_reports)
+      @report = current_report(@reports) || {}
+
+      query = build_slice_and_dice_query
+
+      # Redirect also in case the dates have been updated to avoid any confusion in the view
+      if query.present? || params[:start_date].blank? || params[:end_date].blank?
+        # TODO Make metrics configurable
+        name = query.present? ? "#{params[:name]}#{query}^metric:count" : params[:name]
+        redirect_to dashboard_index_path(:start_date => @start_date,
+                                         :end_date => @end_date,
+                                         :name => name,
+                                         :smooth => params[:smooth],
+                                         :sql_only => params[:sql_only],
+                                         :format => params[:format]) and return
+      end
+
       render
     end
 
     # Not used anymore as reports are pulled from index
     def available_reports
-      available_reports = Kanaui::DashboardHelper::DashboardApi.available_reports(options)
-      render json: available_reports
+      available_reports = Kanaui::DashboardHelper::DashboardApi.available_reports(options_for_klient)
+      render :json => available_reports
     end
 
     def reports
-      format = params['format'] || 'json'
-      reports = fetch_reports(format)
-      render json: reports
-    end
+      format = params[:format] || 'json'
+      raw_reports = fetch_reports(format)
 
-    private
+      if format == 'json' && params[:sql_only] != 'true'
+        reports = JSON.parse(raw_reports)
 
-    def options
-      user = current_tenant_user
-      {
-        :username => user[:username],
-        :password => user[:password],
-        :session_id => user[:session_id],
-        :api_key => user[:api_key],
-        :api_secret => user[:api_secret]
-      }
+        # Remove reports with empty data
+        reports.reject! do |report|
+          reject = false
+          (report['data'] || []).each { |data| reject = true if (data['values'] || []).empty? && data['value'].blank? }
+          reject
+        end
+      else
+        reports = raw_reports
+      end
+      render :json => reports
     end
 
+    private
+
     def start_date_options
-      end_date = @endDate.to_date
+      end_date = @end_date.to_date
       {
         'Last month' => (end_date - 1.month).to_s,
         'Last 3 months' => (end_date - 3.months).to_s,
@@ -53,13 +73,53 @@ module Kanaui
     end
 
     def fetch_reports(format)
-      if params['fake']
+      if params[:fake]
         type = params.fetch('type', 'pie')
         File.read(Kanaui::Engine.root.join('lib', 'sample_data', "#{type}.json"))
       else
-        Kanaui::DashboardHelper::DashboardApi.reports(params['startDate'], params['endDate'], params['name'], params['smooth'], format, options)
+        Kanaui::DashboardHelper::DashboardApi.reports(params[:start_date],
+                                                      params[:end_date],
+                                                      params[:name],
+                                                      params[:smooth],
+                                                      params[:sql_only],
+                                                      format,
+                                                      options_for_klient)
       end
     end
 
+    def current_report(reports)
+      return nil if @raw_name.blank?
+
+      reports.find { |r| r['reportName'] == @raw_name }
+    end
+
+    def build_slice_and_dice_query
+      query = ''
+
+      filters = {}
+      groups = {}
+      ((@report['schema'] || {})['fields'] || []).each do |field|
+        field_name = field['name']
+
+        filters[field_name] = params["filter_#{field_name}"]
+        groups[field_name] = params["group_#{field_name}"]
+      end
+
+      filter_query = ''
+      filters.each do |k, v|
+        next if v.blank?
+        filter_query << '%26' unless filter_query.blank?
+        filter_query << "(#{k}=#{v.join("|#{k}=")})"
+      end
+      query << "^filter:#{filter_query}" unless filter_query.blank?
+
+      groups.each do |k, v|
+        next if v.blank?
+        # TODO Make "no other" configurable
+        query << "^dimension:#{k}(#{v.join('|')}|-)"
+      end
+
+      query
+    end
   end
 end