kanaui 4.0.4 → 4.0.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 648a2d8ad631e20069b5e86787614e5e73875e9f7dc148ae4fbc99b4cc7c3b9e
-  data.tar.gz: 3435caf8b6dd9a37cc0c6a81c66e7101f99487c117eb44c448f064c80c329507
+  metadata.gz: 00d51482c0133da05b31df9b3c58df79c8bb17349cad0c48513c23316bc4fa35
+  data.tar.gz: 816b554225c8bff40b860334cee690c22c2001241fb7e91f38b087b5f111dca3
 SHA512:
-  metadata.gz: 03aba416d0ff887cca36a81e1cdbdce16d956c1f0326343e87228592ca94d63cdf9c0fe3465f78028ee9c737adde61a70685de4fc8c9d9f0a17904ed38d6eba3
-  data.tar.gz: 74220bfdd29944f790adac921b72a02c6727740274529dd51e59bdb680e8fe92464467bcecb48628790686723ccb2c3627de6becf8c17b6558dba9779fd04a17
+  metadata.gz: 43c5d914f7ddbe8f67e2bc927c190fff8ce4084a402b19c4196ca71a245864baa4ee6082c4a13d2c2b0e9c96725d37c55b44bf5e5e38df3dbc9f65daf044e998
+  data.tar.gz: ffec8b299e454e298c9d1cc689fd608d7dbfdedf8e17f389ed4fe5027cc37e643c19bd94af9aae292584e1b55bcb4ae7bc7d1a15eaaefa3bb80e5bc176b9c206

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

@@ -1,11 +1,11 @@
-$(document).ready(function() {
-    var spinOptions = {
-        top: '150px',
-        lines: 10,
-        length: 8,
-        width: 4,
-        radius: 8,
-        speed: 1
-    }
-    $('#loading-spinner').spin(spinOptions);
+$(document).ready(function () {
+  var spinOptions = {
+    top: "150px",
+    lines: 10,
+    length: 8,
+    width: 4,
+    radius: 8,
+    speed: 1,
+  };
+  $("#loading-spinner").spin(spinOptions);
 });

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

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

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

@@ -1,72 +1,156 @@
-;(function(Kiddo, d3){
-  Kiddo.LineChart = function(){
+(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 valueline = d3.svg
+      .line()
+      .x(function (d) {
+        return self.x(d.x);
+      })
+      .y(function (d) {
+        return self.y(d.y);
+      })
+      .interpolate("monotone"); // Smooth line interpolation
 
     var axes = Kiddo.Axes.apply(this);
     var helper = new Kiddo.Helper();
 
-    self.color = d3.scale.category10();
+    // Custom blue color theme matching the image
+    var blueColors = [
+      "#1565C0",
+      "#1976D2",
+      "#2196F3",
+      "#42A5F5",
+      "#64B5F6",
+      "#90CAF9",
+      "#BBDEFB",
+      "#E3F2FD",
+    ];
+    self.color = d3.scale.ordinal().range(blueColors);
 
     return {
-      render: function(svg, json){
+      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){
+        var allValues = datasets.reduce(function (result, element) {
           return result.concat(element.values);
         }, []);
 
-        var x_domain = d3.extent(allValues, function(d){
+        var x_domain = d3.extent(allValues, function (d) {
           return new Date(d.x);
         });
 
         self.x.domain(x_domain);
 
-        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;
-                            });
-                        })];
+        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);
 
+        // Render axes first
         axes.render(svg, title);
 
         self.color.domain(d3.keys(datasets));
 
-        datasets.forEach(function(dataset){
+        // Create legend container at the top
+        var legendContainer = svg
+          .append("g")
+          .attr("class", "chart-legend")
+          .attr("transform", "translate(" + (self.width - 100) + ", -25)");
+
+        // Calculate total values for legend
+        var legendData = datasets.map(function (dataset, index) {
+          var latestValue = dataset.values[dataset.values.length - 1];
+          var totalCount = dataset.values.length;
+          return {
+            name: dataset.name,
+            value: latestValue ? latestValue.y : 0,
+            count: totalCount,
+            color: self.color(dataset.name),
+            index: index,
+          };
+        });
+
+        // Create legend items
+        var legendItems = legendContainer
+          .selectAll(".legend-item")
+          .data(legendData)
+          .enter()
+          .append("g")
+          .attr("class", "legend-item");
+
+        var xOffset = 0;
+        legendItems.each(function (d, i) {
+          var legendItem = d3.select(this);
+
+          // Add colored circle
+          legendItem
+            .append("circle")
+            .attr("cx", xOffset + 6)
+            .attr("cy", 0)
+            .attr("r", 6)
+            .style("fill", d.color);
+
+          // Add text label
+          var labelText =
+            d.name + " :: " + d.count + ": " + d3.format(",.2f")(d.value);
+          legendItem
+            .append("text")
+            .attr("x", xOffset + 18)
+            .attr("y", 0)
+            .attr("dy", "0.35em")
+            .style("font-size", "0.875rem")
+            .style("font-weight", "500")
+            .style("fill", "#6B7280")
+            .text(labelText);
+
+          // Calculate width for next item
+          var textWidth = this.getBBox().width;
+          xOffset += textWidth + 40; // Add spacing between items
+        });
+
+        // Render data lines
+        datasets.forEach(function (dataset) {
           var data = dataset.values,
             name = dataset.name;
 
-          data.forEach(function(d) {
-            d.date = d.x.split('T')[0]; // Support both date and date/times
+          data.forEach(function (d) {
+            d.date = d.x.split("T")[0]; // Support both date and date/times
             d.x = helper.parseDate(d.date);
             d.y = +d.y;
           });
 
-          svg.append('path')
-            .attr('class', 'line')
-            .attr('d', valueline(data))
+          svg
+            .append("path")
+            .attr("class", "line")
+            .attr("d", valueline(data))
             .attr("transform", "translate(" + self.margin_left + ",0)")
-            .style("stroke", function() { return self.color(name); });
+            .style("stroke", function () {
+              return self.color(name);
+            })
+            .style("stroke-width", "0.125rem")
+            .style("fill", "none")
+            .style("opacity", 0.9);
         });
 
         self.datasets = datasets;
         Kiddo.Utils.MouseOver.apply(self).render(svg, self.x, self.y);
-      }
-    }
+      },
+    };
   };
-})(window.Kiddo = window.Kiddo || {}, d3)
+})((window.Kiddo = window.Kiddo || {}), d3);

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

@@ -1,51 +1,84 @@
-;(function(Kiddo, d3){
-  Kiddo.PieChart = function(){
+(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()
+    // Custom blue color theme - matching the line chart
+    var blueColors = [
+      "#1565C0",
+      "#1976D2",
+      "#2196F3",
+      "#42A5F5",
+      "#64B5F6",
+      "#90CAF9",
+      "#BBDEFB",
+      "#E3F2FD",
+    ];
+    var color = d3.scale.ordinal().range(blueColors);
+
+    var arc = d3.svg
+      .arc()
       .outerRadius(radius - 10)
       .innerRadius(0);
 
-    var pie = d3.layout.pie()
+    var pie = d3.layout
+      .pie()
       .sort(null)
-      .value(function(d) { return d.value; });
+      .value(function (d) {
+        return d.value;
+      });
 
     return {
-      render: function(svg, json){
+      render: function (svg, json) {
         var data = json.data;
 
-        svg.attr('transform', "translate(" + self.width / 2 + "," + self.height / 2 + ")");
+        svg.attr(
+          "transform",
+          "translate(" + self.width / 2 + "," + self.height / 2 + ")"
+        );
 
-        data.forEach(function(d){
+        data.forEach(function (d) {
           d.value = +d.value;
         });
 
-        var g = svg.selectAll(".arc")
+        var g = svg
+          .selectAll(".arc")
           .data(pie(data))
-          .enter().append("g")
+          .enter()
+          .append("g")
           .attr("class", "arc");
 
         g.append("path")
           .attr("d", arc)
-          .style("fill", function(d) { return color(d.data.value); });
+          .style("fill", function (d, i) {
+            return color(i);
+          }) // Use index for consistent coloring
+          .style("stroke", "#ffffff")
+          .style("stroke-width", "1px"); // Add white borders for better separation
 
-        var colorCircle = function(value){
-          return(
-            '<span class="colored-dot" style="background-color:' + color(value) + ';"></span>'
+        var colorCircle = function (value, index) {
+          return (
+            '<span class="colored-dot" style="background-color:' +
+            color(index) +
+            ';"></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("y", function (d, i) {
+            return 50 * i - 200;
+          })
+          .html(function (d, i) {
+            return (
+              colorCircle(d.data.value, i) + d.data.label + ": " + d.data.value
+            );
+          })
           .attr("class", "chart_values");
-      }
-    }
+      },
+    };
   };
-})(window.Kiddo = window.Kiddo || {}, d3)
+})((window.Kiddo = window.Kiddo || {}), d3);

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

@@ -1,46 +1,58 @@
-;(function(Kiddo, d3){
+(function (Kiddo, d3) {
   Kiddo.Utils = Kiddo.Utils || {};
 
-  Kiddo.Utils.MouseOver = function(){
+  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");
+      render: function (svg, x, y) {
+        var focus = svg
+          .append("g")
+          .attr("class", "focus")
+          .style("display", "none");
 
-        var canvas = svg.append("g")
+        var canvas = svg
+          .append("g")
           .attr("id", "mouseover_canvas")
           .style("display", "none");
 
-        var info = canvas.append("rect")
+        var info = canvas
+          .append("rect")
           .attr("class", "information")
           .attr("width", self.width / 2);
 
         // The magic:
-        svg.append("rect")
+        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"); })
+          .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")
+        var infoTitleBg = canvas
+          .append("rect")
           .attr("class", "info-title__bg")
           .attr("width", self.width)
           .attr("height", 30);
 
-        var infoTitle = canvas.append("text")
+        var infoTitle = canvas
+          .append("text")
           .attr("dy", "1em")
           .attr("dx", 0)
           .attr("class", "info-title")
           .attr("id", "info-title");
 
-        var addInfoDimensions = function(element) {
+        var addInfoDimensions = function (element) {
           // On mouseover, element is the current label_idx
           var box = element.node().getBBox();
           // infoBox is the .information rect
@@ -53,12 +65,16 @@
             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);
+            $("#mouseover_canvas #info-title").attr(
+              "dx",
+              (box.width + margin) / 2 - infoTitleBox.width / 2
+            );
           }
         };
 
-        self.datasets.forEach(function(element, index){
-          focus.append("circle")
+        self.datasets.forEach(function (element, index) {
+          focus
+            .append("circle")
             .attr("r", 4.5)
             .attr("id", "circle_" + index)
             .attr("transform", "translate(" + self.margin_left + ",0)");
@@ -67,14 +83,14 @@
         function mousemove() {
           var _this = this;
 
-          $('#mouseover_canvas .chart_values').detach().remove();
-          $('#mouseover_canvas .chart_circles').detach().remove();
+          $("#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){
+          self.datasets.forEach(function (element, index) {
             var data = element.values;
             var name = element.name;
 
@@ -84,58 +100,63 @@
               d1 = data[i];
 
             if (d0 !== undefined && d1 !== undefined) {
-                var d = x0 - d0.x > d1.x - x0 ? d1 : d0;
+              var d = x0 - d0.x > d1.x - x0 ? d1 : d0;
             } else if (d0 !== undefined) {
-                var d = d0;
+              var d = d0;
             } else if (d1 !== undefined) {
-                var d = d1;
+              var d = d1;
             } else {
-                return;
+              return;
             }
 
-            focus.select("#circle_" + index)
+            focus
+              .select("#circle_" + index)
               .attr("cx", x(d.x))
               .attr("cy", y(d.y))
               .style("fill", self.color(name));
 
             var canvasPosition = x(x0) > self.width / 2 ? 50 : self.width / 2;
 
-            canvas
-              .attr("transform", "translate(" + canvasPosition + ",0)");
+            canvas.attr("transform", "translate(" + canvasPosition + ",0)");
 
-            canvas.select("#info-title")
-              .text(d.date);
+            canvas.select("#info-title").text(d.date);
 
-            elementsForLegend.push({element: element, d: 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);
+            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);
+          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);
           });
         }
-      }
+      },
     };
   };
-})(window.Kiddo = window.Kiddo || {}, d3)
+})((window.Kiddo = window.Kiddo || {}), d3);