kanaui 0.3.0 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: f20465488c0b32ce207c37d7ef9786742dd1982e
-  data.tar.gz: f68de76b65f60fce45e981f642a0bde19c343afe
+  metadata.gz: 06f1ff670299fd365ad6a7c065162f4e56bd43d9
+  data.tar.gz: 38c51193af202b0bc150023033c0bfa28736d411
 SHA512:
-  metadata.gz: 28f816e06db5ac2dbd02bd6f3fdad711608b934d0533c88058f02d2500f242dac3a4d5a8eeae1009576d61fba11b3232b32e7b87951a60d8f070eaccf7b21f8b
-  data.tar.gz: 0fb84bde5809634ba811ac2b725f2faee22aac1ce96ef88e49f6d00beff3306375c6d0b12f8c4c15132b1207842c116b351124381d2c888fd6728c6e609f35b3
+  metadata.gz: e5e53295020689c4dbeee7b62f15c25393c1600aaf908359c4c24d7aae60c02fdaac0ed8f2c98c944199ddc6725bbb4155306990b3ca0b00dcbf82ba5f5d0a40
+  data.tar.gz: a65383b431f905a0249522eccc7e09e73a7a72c99e8c566a22c3a2cd4fa931976264c10d9ee76cd2f4673e457d55281dcd62853e982acd8a16c85fcd660a24c7

data/MIT-LICENSE

@@ -1,4 +1,4 @@
-Copyright 2015 YOURNAME
+Copyright 2015 The Billing Project, LLC
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

data/app/assets/javascripts/application.js

@@ -6,14 +6,14 @@
 //
 //= require js-routes
 //= require log4javascript
-//= require moment.min
-//= require spin.min
+//= require moment
+//= require spin
 //= require jquery
 //= require jquery_ujs
 //= require twitter/bootstrap
+//= require dataTables/jquery.dataTables
+//= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
+//= require d3
 //= require bootstrap-datepicker
-//= require bootstrap
-//= require jquery.dataTables.min
 //= require jquery.spin
-//= require d3
-//= require_tree ./kanaui
+//= require kanaui/kanaui

data/app/assets/javascripts/kanaui/dashboard.js

@@ -1,43 +1,4 @@
 $(document).ready(function() {
-
-    setupDebugLog();
-
-    var reports = new Reports();
-    reports.init();
-
-    // https://github.com/twbs/bootstrap/issues/2097
-    $('.dropdown-menu').on('click', function(e){
-        if ($(this).hasClass('dropdown-menu-form')){
-            e.stopPropagation();
-        }
-    });
-
-    initializeDatePicker(reports);
-
-    // Configure the refresh button callback
-    $('#refresh-graphs').click(function() {
-      $(location).attr('href', reports.buildRefreshURL());
-    });
-
-    // Configure the default graphs
-    $('#reset-dashboards').click(function() {
-        $(location).attr('href', reports.buildRefreshURL({}));
-    });
-    $('#standard-analytics-dashboards').click(function() {
-        $(location).attr('href', reports.buildRefreshURL(reports.ANALYTICS_REPORTS.reports) + '&__preset=ANALYTICS');
-    });
-    $('#standard-system-dashboards').click(function() {
-        $(location).attr('href', reports.buildRefreshURL(reports.SYSTEM_REPORTS.reports) + '&__preset=SYSTEM');
-    });
-    // Highlight the menu links
-    var preset = $.url().param('__preset');
-    if (preset == 'ANALYTICS') {
-        $('#standard-analytics-dashboards-wrapper').addClass('active');
-    } else if (preset == 'SYSTEM') {
-        $('#standard-system-dashboards-wrapper').addClass('active');
-    }
-
-    // Display the loading indicator
     var spinOptions = {
         top: '150px',
         lines: 10,
@@ -47,85 +8,4 @@ $(document).ready(function() {
         speed: 1
     }
     $('#loading-spinner').spin(spinOptions);
-
-    // Finally, draw the graphs
-    reports.getDataForReports(function(dataForAllReports) {
-        // As a hint the AJAX requests are done, accelerate the spinner
-        spinOptions['speed'] = 4;
-        $('#loading-spinner').spin(spinOptions);
-
-        try {
-            if (dataForAllReports.length == 0) {
-                displayInfo("Use the menu to select reports");
-            } else {
-                var reportsGraphs = new ReportsGraphs(reports);
-                reportsGraphs.drawAll(dataForAllReports);
-            }
-        } finally {
-            // Hide the loading indicator
-            $('#loading-spinner').spin(false);
-        }
-    });
 });
-
-//
-// Utils
-//
-
-function initializeDatePicker(reports) {
-
-    //
-    // We are using http://www.eyecon.ro/bootstrap-datepicker/ but thgere seems to be a fork of it:
-    // https://github.com/eternicode/bootstrap-datepicker that seems better.
-    //
-    $('#start-date').datepicker()
-        .on('changeDate', function(ev){
-            var newDate = new Date(ev.date.valueOf()).toISOString().split('T')[0]
-            reports.startDate = newDate;
-            $(this).datepicker('hide');
-        }).data('datepicker');
-
-    $('#end-date').datepicker()
-        .on('changeDate', function(ev){
-            var newDate = new Date(ev.date.valueOf()).toISOString().split('T')[0]
-            reports.endDate = newDate;
-            $(this).datepicker('hide');
-        }).data('datepicker');
-
-    $('#start-date').datepicker('setValue', reports.startDate);
-    $('#end-date').datepicker('setValue', reports.endDate);
-}
-
-function setupDebugLog() {
-    // Setup the debug logs
-    var consoleAppender = new log4javascript.BrowserConsoleAppender();
-    consoleAppender.setThreshold(log4javascript.Level.INFO);
-    var layout = new log4javascript.PatternLayout("%d [%-5p] %m{5}");
-    consoleAppender.setLayout(layout);
-    window.log = log4javascript.getLogger();
-    window.log.addAppender(consoleAppender);
-}
-
-function dateFromDatepicker(datepicker) {
-    if (datepicker && datepicker.dates.length > 0) {
-        var date = datepicker.getDate();
-        return moment(date).format('YYYY[-]MM[-]DD');
-    }
-}
-
-function displayInfo(msg) {
-    $('#alert-info').html(msg);
-    $('#alert-info').show();
-}
-
-function displayError(msg) {
-    $('#alert-error').html(msg);
-    $('#alert-error').show();
-}
-
-// http://stackoverflow.com/questions/646628/javascript-startswith
-if (typeof String.prototype.startsWith != 'function') {
-    String.prototype.startsWith = function(str) {
-        return this.slice(0, str.length) == str;
-    };
-}

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

@@ -0,0 +1,7 @@
+// This is a manifest file that'll be compiled into including all the files listed below.
+// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
+// be included in the compiled file accessible from http://example.com/assets/application.js
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// the compiled file.
+//
+//= require_tree .

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

@@ -0,0 +1,55 @@
+;(function(Kiddo, d3){
+  Kiddo.Axes = function(){
+    var self = this;
+
+    var makeXAxis = function(){
+      return d3.svg.axis()
+        .scale(self.x)
+        .orient("bottom")
+        .ticks(6);
+    }
+
+    var makeYAxis = function(){
+      return d3.svg.axis()
+        .scale(self.y)
+        .orient("left")
+        .tickFormat(d3.format('d'));
+    }
+
+    var xAxis = makeXAxis();
+    var yAxis = makeYAxis();
+
+    return {
+      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(""));
+      }
+    };
+  };
+})(window.Kiddo = window.Kiddo || {}, d3)

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

@@ -0,0 +1,67 @@
+;(function(Kiddo, d3){
+  Kiddo.LineChart = function(){
+    var self = this;
+
+    this.x = d3.time.scale().range([0, this.width]);
+    this.y = d3.scale.linear().range([this.height, 0]);
+
+    var valueline = d3.svg.line()
+      .x(function(d) { return self.x(d.x); })
+      .y(function(d) { return self.y(d.y); });
+
+    var axes = Kiddo.Axes.apply(this);
+    var helper = new Kiddo.Helper();
+
+    self.color = d3.scale.category10();
+
+    return {
+      render: function(svg, json){
+        var title = json.title,
+          datasets = json.data;
+
+        // Scale the range of the data before rendering axes
+        var allValues = datasets.reduce(function(result, element){
+          return result.concat(element.values);
+        }, []);
+
+        var x_domain = d3.extent(allValues, function(d){
+          return new Date(d.x);
+        });
+
+        self.x.domain(x_domain);
+
+        var y_domain = [0, d3.max(datasets, function(datum){
+          return d3.max(datum.values, function(d){
+            return d.y;
+          });
+        })];
+
+        self.y.domain(y_domain);
+
+        axes.render(svg, title);
+
+        self.color.domain(d3.keys(datasets));
+
+        datasets.forEach(function(dataset){
+          var data = dataset.values,
+            name = dataset.name;
+
+          data.forEach(function(d) {
+            d.date = d.x;
+            d.x = helper.parseDate(d.x);
+            d.y = +d.y;
+          });
+
+          svg.append('path')
+            .attr('class', 'line')
+            .attr('d', valueline(data))
+            .attr("transform", "translate(" + self.margin_left + ",0)")
+            .style("stroke", function() { return self.color(name); });
+        });
+
+        self.datasets = datasets;
+        Kiddo.Utils.MouseOver.apply(self).render(svg, self.x, self.y);
+      }
+    }
+  };
+})(window.Kiddo = window.Kiddo || {}, d3)

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

@@ -0,0 +1,51 @@
+;(function(Kiddo, d3){
+  Kiddo.PieChart = function(){
+    var self = this;
+    var radius = Math.min(this.width, this.height) / 2;
+    var color = d3.scale.category10();
+
+    var arc = d3.svg.arc()
+      .outerRadius(radius - 10)
+      .innerRadius(0);
+
+    var pie = d3.layout.pie()
+      .sort(null)
+      .value(function(d) { return d.value; });
+
+    return {
+      render: function(svg, json){
+        var data = json.data;
+
+        svg.attr('transform', "translate(" + self.width / 2 + "," + self.height / 2 + ")");
+
+        data.forEach(function(d){
+          d.value = +d.value;
+        });
+
+        var g = svg.selectAll(".arc")
+          .data(pie(data))
+          .enter().append("g")
+          .attr("class", "arc");
+
+        g.append("path")
+          .attr("d", arc)
+          .style("fill", function(d) { return color(d.data.value); });
+
+        var colorCircle = function(value){
+          return(
+            '<span class="colored-dot" style="background-color:' + color(value) + ';"></span>'
+          );
+        }
+
+        g.append("foreignObject")
+          .attr("width", 200)
+          .attr("height", 150)
+          .attr("dy", ".35em")
+          .attr("x", 250)
+          .attr("y", function(d, i) { return 50 * i - 200; })
+          .html(function(d) { return  colorCircle(d.data.value) + d.data.label + ": " + d.data.value; })
+          .attr("class", "chart_values");
+      }
+    }
+  };
+})(window.Kiddo = window.Kiddo || {}, d3)

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

@@ -0,0 +1,113 @@
+;(function(Kiddo, d3){
+  Kiddo.Utils = Kiddo.Utils || {};
+
+  Kiddo.Utils.MouseOver = function(){
+    var self = this;
+    var helper = new Kiddo.Helper();
+
+    return {
+      render: function(svg, x, y){
+        var focus = svg.append("g")
+            .attr("class", "focus")
+            .style("display", "none");
+
+        var canvas = svg.append("g")
+          .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")
+          .attr("width", self.width)
+          .attr("height", self.height)
+          .attr('transform', 'translate(' + self.margin_left + ',0)')
+          .on("mouseover", function() { focus.style("display", null); canvas.style("display", null); })
+          .on("mouseout", function() { focus.style("display", "none"); canvas.style("display", "none"); })
+          .on("mousemove", mousemove);
+
+        var infoTitleBg = canvas.append("rect")
+          .attr("class", "info-title__bg")
+          .attr("width", self.width / 2)
+          .attr("height", 30);
+
+        canvas.append("text")
+          .attr("dy", ".85em")
+          .attr("dx", 100)
+          .attr("class", "info-title")
+          .attr("id", "info-title");
+
+        addInfoDimensions(infoTitleBg);
+
+        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;
+
+          self.datasets.forEach(function(element, index){
+            var data = element.values;
+            var name = element.name;
+
+            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;
+
+            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;
+
+            canvas
+              .attr("transform", "translate(" + canvasPosition + ",0)");
+
+            canvas.select("#info-title")
+              .text(d.date);
+
+            text = canvas.select("#label_" + index).text(helper.formatValueDisplay(name, d));
+          });
+        }
+      }
+    };
+  };
+})(window.Kiddo = window.Kiddo || {}, d3)