kanaui 5.0.0 → 5.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b83ffa9a7fd38924effe4fa1d41bf931884e21db37d6e098931f864cd8e6f168
-  data.tar.gz: 18548789c20e02693bfeec178331b27bc43d32c10473638ed3819253f861cb20
+  metadata.gz: 0c74b8f72b208b13b20e079654c00f793b3d0c663cd33f9dbb4957aa6fd420e6
+  data.tar.gz: 859e32a01514363bb64f4c3772c0d6b70b2ed72fb0daa0d4bda8facef7bba877
 SHA512:
-  metadata.gz: 4d5f2cf67c9412dde6dbf0e74abb92557bd47b90180a5f9c6a41ec5a8d2a1911ed321e4429cc695a7ea4aa72c26b2c78db27d102b1bed1d54023658ecf46d22b
-  data.tar.gz: 965d83c8c2ea050106c85e5568a282573c5b70cd1679e78c80683ed6a96ca1206bcda2dbe10cecd1df7d774387bc56a4071d01b7f5368a7fa06249914642585b
+  metadata.gz: 52219b23e1cdd624809a26bc71ab8ea903d3c649ff5e5e6d3fe74538c850341680a189d9e50f1c19097df907430b49dc27009f63319a27f110635b3a4afa6589
+  data.tar.gz: 2606b237d12c8e5f4ecf5bcca19bed63ef34eb38c0adb862f4924f3e3d6afe898fdccf53474d328d49cbaa9026d38253f88e4306f5049937c9fd46ccb4601336

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

@@ -3,14 +3,12 @@
     var self = this;
 
     var makeXAxis = function () {
-      return d3.svg.axis().scale(self.x).orient("bottom").ticks(6);
+      return d3.axisBottom(self.x).ticks(6);
     };
 
     var makeYAxis = function () {
-      return d3.svg
-        .axis()
-        .scale(self.y)
-        .orient("left")
+      return d3
+        .axisLeft(self.y)
         .tickFormat(d3.format(",d"));
     };
 
@@ -28,13 +26,13 @@
             "transform",
             "translate(" + self.margin_left + "," + self.height + ")"
           )
-          .call(makeXAxis().tickSize(-self.height, 0, 0).tickFormat(""));
+          .call(makeXAxis().tickSize(-self.height).tickFormat(""));
 
         svg
           .append("g")
           .attr("class", "grid")
           .attr("transform", "translate(" + self.margin_left + ",0)")
-          .call(makeYAxis().tickSize(-self.width, 0, 0).tickFormat(""));
+          .call(makeYAxis().tickSize(-self.width).tickFormat(""));
 
         svg
           .append("g")

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

@@ -2,10 +2,10 @@
   Kiddo.LineChart = function () {
     var self = this;
 
-    this.x = d3.time.scale().range([0, this.width]);
-    this.y = d3.scale.linear().range([this.height, 0]);
+    this.x = d3.scaleTime().range([0, this.width]);
+    this.y = d3.scaleLinear().range([this.height, 0]);
 
-    var valueline = d3.svg
+    var valueline = d3
       .line()
       .x(function (d) {
         return self.x(d.x);
@@ -13,80 +13,79 @@
       .y(function (d) {
         return self.y(d.y);
       })
-      .interpolate("monotone"); // Smooth line interpolation
+      .curve(d3.curveMonotoneX);
 
     var axes = Kiddo.Axes.apply(this);
     var helper = new Kiddo.Helper();
 
-    // Custom blue color theme matching the image
-    var blueColors = [
-      "#1565C0",
-      "#1976D2",
-      "#2196F3",
-      "#42A5F5",
-      "#64B5F6",
-      "#90CAF9",
-      "#BBDEFB",
-      "#E3F2FD",
+    // Custom multi-color theme matching the image
+    var colors = [
+      "#2196F3", // blue
+      "#E53935", // red
+      "#43A047", // green
+      "#FB8C00", // orange
+      "#8E24AA", // purple
+      "#00ACC1", // cyan
+      "#F4511E", // deep orange
+      "#6D4C41", // brown
     ];
-    self.color = d3.scale.ordinal().range(blueColors);
+    self.color = d3.scaleOrdinal().range(colors);
 
     return {
       render: function (svg, json) {
         var title = json.title,
           datasets = json.data;
 
+        datasets.forEach(function (dataset) {
+          dataset.values.forEach(function (d) {
+            d.date = d.x.split("T")[0];
+            d.x = helper.parseDate(d.date);
+            d.y = +d.y;
+          });
+        });
+
         // 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);
+          return 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.extent(allValues, function (d) {
+          return d.y;
+        });
 
         self.y.domain(y_domain);
 
         // Render axes first
         axes.render(svg, title);
 
-        self.color.domain(d3.keys(datasets));
+        self.color.domain(datasets.map(function (dataset) {
+          return dataset.name;
+        }));
 
-        // Create legend container at the top
+        // Create legend container to the right of the chart area
         var legendContainer = svg
           .append("g")
           .attr("class", "chart-legend")
-          .attr("transform", "translate(" + (self.width - 100) + ", -25)");
+          .attr("transform", "translate(" + (self.width + self.margin_left + 15) + ", 10)");
 
         // 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
+        // Create legend items as a vertical column
         var legendItems = legendContainer
           .selectAll(".legend-item")
           .data(legendData)
@@ -94,34 +93,30 @@
           .append("g")
           .attr("class", "legend-item");
 
-        var xOffset = 0;
-        legendItems.each(function (d, i) {
+        var yOffset = 0;
+        legendItems.each(function (d) {
           var legendItem = d3.select(this);
 
-          // Add colored circle
           legendItem
             .append("circle")
-            .attr("cx", xOffset + 6)
-            .attr("cy", 0)
+            .attr("cx", 6)
+            .attr("cy", yOffset)
             .attr("r", 6)
             .style("fill", d.color);
 
-          // Add text label
           var labelText =
-            d.name + " :: " + d.count + ": " + d3.format(",.2f")(d.value);
+            helper.formatSeriesName(d.name, self.reportName) + ": " + helper.formatValue(d.value);
           legendItem
             .append("text")
-            .attr("x", xOffset + 18)
-            .attr("y", 0)
+            .attr("x", 18)
+            .attr("y", yOffset)
             .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
+          yOffset += 22;
         });
 
         // Render data lines
@@ -129,12 +124,6 @@
           var data = dataset.values,
             name = dataset.name;
 
-          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")

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

@@ -2,26 +2,27 @@
   Kiddo.PieChart = function () {
     var self = this;
     var radius = Math.min(this.width, this.height) / 2;
+    var helper = new Kiddo.Helper();
 
     // Custom blue color theme - matching the line chart
-    var blueColors = [
-      "#1565C0",
-      "#1976D2",
-      "#2196F3",
-      "#42A5F5",
-      "#64B5F6",
-      "#90CAF9",
-      "#BBDEFB",
-      "#E3F2FD",
+    var colors = [
+      "#2196F3", // blue
+      "#E53935", // red
+      "#43A047", // green
+      "#FB8C00", // orange
+      "#8E24AA", // purple
+      "#00ACC1", // cyan
+      "#F4511E", // deep orange
+      "#6D4C41", // brown
     ];
-    var color = d3.scale.ordinal().range(blueColors);
+    var color = d3.scaleOrdinal().range(colors);
 
-    var arc = d3.svg
+    var arc = d3
       .arc()
       .outerRadius(radius - 10)
       .innerRadius(0);
 
-    var pie = d3.layout
+    var pie = d3
       .pie()
       .sort(null)
       .value(function (d) {
@@ -41,6 +42,10 @@
           d.value = +d.value;
         });
 
+        color.domain(data.map(function (d, index) {
+          return index;
+        }));
+
         var g = svg
           .selectAll(".arc")
           .data(pie(data))
@@ -74,7 +79,7 @@
           })
           .html(function (d, i) {
             return (
-              colorCircle(d.data.value, i) + d.data.label + ": " + d.data.value
+              colorCircle(d.data.value, i) + helper.formatSeriesName(d.data.label) + ": " + d.data.value
             );
           })
           .attr("class", "chart_values");

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

@@ -59,15 +59,16 @@
           var infoBox = info.node().getBBox();
           var infoTitleBox = infoTitle.node().getBBox();
           var margin = 40;
+          var minWidth = Math.max(box.width, infoTitleBox.width) + margin;
 
           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);
+          if (infoBox.width < minWidth) {
+            info.attr("width", minWidth);
+            infoTitleBg.attr("width", minWidth);
 
             $("#mouseover_canvas #info-title").attr(
               "dx",
-              (box.width + margin) / 2 - infoTitleBox.width / 2
+              minWidth / 2 - infoTitleBox.width / 2
             );
           }
         };
@@ -80,8 +81,10 @@
             .attr("transform", "translate(" + self.margin_left + ",0)");
         });
 
-        function mousemove() {
-          var _this = this;
+        function mousemove(event) {
+          var pointer = d3.pointer(event, this);
+          var mouseX = pointer[0];
+          var mouseY = pointer[1];
 
           $("#mouseover_canvas .chart_values").detach().remove();
           $("#mouseover_canvas .chart_circles").detach().remove();
@@ -94,7 +97,7 @@
             var data = element.values;
             var name = element.name;
 
-            var x0 = x.invert(d3.mouse(_this)[0]),
+            var x0 = x.invert(mouseX),
               i = helper.bisectDate(data, x0, 1),
               d0 = data[i - 1],
               d1 = data[i];
@@ -115,11 +118,7 @@
               .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.select("#info-title").text(d.date);
+            canvas.select("#info-title").text(helper.formatDate(d.date));
 
             elementsForLegend.push({ element: element, d: d });
           });
@@ -150,11 +149,22 @@
               .text(
                 element.d === undefined
                   ? element.element.name
-                  : helper.formatValueDisplay(element.element.name, element.d)
+                  : helper.formatValueDisplay(element.element.name, element.d, self.reportName)
               );
 
             addInfoDimensions(text);
           });
+
+          // Position tooltip to follow the cursor; flip left when near the right edge.
+          var tooltipOffset = 15;
+          var tooltipWidth = info.node().getBBox().width;
+          var tooltipHeight = info.node().getBBox().height;
+          var localX = (mouseX + tooltipOffset + tooltipWidth > self.width)
+            ? mouseX - tooltipWidth - tooltipOffset
+            : mouseX + tooltipOffset;
+          var canvasX = localX + self.margin_left;
+          var canvasY = Math.max(0, mouseY - 150);
+          canvas.attr("transform", "translate(" + canvasX + "," + canvasY + ")");
         }
       },
     };

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

@@ -1,19 +1,106 @@
 (function (Kiddo, d3) {
   Kiddo.Helper = function () {
+    var formatValue = function (d) {
+      return d % 1 === 0 ? d3.format(",d")(d) : d3.format(",.2f")(d);
+    };
     var formatCurrency = function (d) {
       return "$" + formatValue(d);
     };
-    var formatValue = d3.format(",.2f");
+
+    var humanizeSegment = function (segment) {
+      segment = String(segment || "")
+        .replace(/[_-]+/g, " ")
+        .replace(/\s+/g, " ")
+        .trim();
+
+      if (!segment) {
+        return "";
+      }
+
+      return segment
+        .split(" ")
+        .map(function (word) {
+          if (/^\d+(\.\d+)?$/.test(word)) {
+            return word;
+          }
+          if (/^[A-Z]{2,3}$/.test(word)) {
+            return word;
+          }
+
+          return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+        })
+        .join(" ");
+    };
+
+    var formatSeriesName = function (name, reportName) {
+      return String(name || "")
+        .split(/\s*::\s*/)
+        .filter(function (segment) {
+          // Remove numeric-only segments (tenant record id)
+          return !/^\d+$/.test(segment.trim());
+        })
+        .map(function (segment) {
+          var parts = segment.split(/\s*:\s*/);
+          if (parts.length > 1) {
+            var qualifier = humanizeSegment(parts.slice(1).join(": "));
+            var label = (reportName && parts[0].trim().toLowerCase() === "count")
+              ? reportName
+              : humanizeSegment(parts[0]);
+
+            // For count-based reports, a numeric qualifier is usually tenant id
+            // and should not be displayed in UI labels.
+            if (reportName && parts[0].trim().toLowerCase() === "count" && /^\d+$/.test(qualifier)) {
+              return label;
+            }
+
+            return label + " (" + qualifier + ")";
+          }
+          return humanizeSegment(segment);
+        })
+        .filter(function (segment) {
+          return segment.length > 0;
+        })
+        .join(" : ");
+    };
+
+    // Extracts just the qualifier part (e.g. "EUR" from "count: EUR :: 1") for compact tooltip labels
+    var formatSeriesLabel = function (name) {
+      var segments = String(name || "")
+        .split(/\s*::\s*/)
+        .filter(function (segment) {
+          return !/^\d+$/.test(segment.trim());
+        });
+
+      if (segments.length === 0) return humanizeSegment(name);
+
+      var parts = segments[0].split(/\s*:\s*/);
+      if (parts.length > 1) {
+        return humanizeSegment(parts.slice(1).join(": "));
+      }
+      return humanizeSegment(segments[0]);
+    };
+
+    var parseDateFn = d3.timeParse("%Y-%m-%d");
+    var formatDateFn = d3.timeFormat("%b %d, %Y");
+    var formatDate = function (dateStr) {
+      var parsed = parseDateFn(dateStr);
+      return parsed ? formatDateFn(parsed) : dateStr;
+    };
 
     return {
-      parseDate: d3.time.format("%Y-%m-%d").parse,
+      parseDate: parseDateFn,
       bisectDate: d3.bisector(function (d) {
         return d.x;
       }).left,
       formatCurrency: formatCurrency,
       formatValue: formatValue,
-      formatValueDisplay: function (name, d) {
-        return name + ": " + formatValue(d.y); // Add currency boolean on backend later -- formatCurrency(d.y); }
+      formatSeriesName: formatSeriesName,
+      formatDate: formatDate,
+      formatValueDisplay: function (name, d, reportName) {
+        var seriesLabel = reportName
+          ? formatSeriesName(name, reportName)
+          : formatSeriesLabel(name);
+        return seriesLabel + ": " + formatValue(d.y);
       },
     };
   };

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

@@ -1,19 +1,36 @@
 (function (d3, $, window, document, undefined) {
+  function errorMessage(error) {
+    if (error && error.responseText) {
+      try {
+        var response = JSON.parse(error.responseText);
+        if (response.message) {
+          return response.message;
+        }
+      } catch (ex) {
+        return error.responseText;
+      }
+    }
+
+    return error && error.message ? error.message : String(error);
+  }
+
+  function renderError(message) {
+    var escapedMessage = $("<div/>").text(message).html();
+    $("#chartAnchor").prepend(
+      '<div class="alert alert-danger" role="alert">' + escapedMessage + "</div>"
+    );
+  }
+
   $(document).ready(function () {
     if ($("#chartAnchor").length == 0) {
       return;
     }
 
-    d3.json($("#chartAnchor").data("reports-path"), function (error, json) {
+    d3.json($("#chartAnchor").data("reports-path")).then(function (json) {
       $("#loading-spinner").remove();
 
       var renderer = new Kiddo.Renderer("#chartAnchor");
 
-      if (error) {
-        ajaxErrorAlert(error);
-        return renderer.noData();
-      }
-
       var data = json[0];
 
       if (
@@ -49,6 +66,12 @@
         console.log(ex);
         renderer.noData();
       }
+    }).catch(function (error) {
+      $("#loading-spinner").remove();
+
+      var renderer = new Kiddo.Renderer("#chartAnchor");
+      renderError(errorMessage(error));
+      return renderer.noData();
     });
   });
 })(d3, jQuery, window, document);

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

@@ -19,6 +19,7 @@
       raw_height: raw_height,
       width: raw_width - margin_left - margin_right,
       height: raw_height - margin_top - margin_bottom,
+      reportName: $("#chartAnchor").data("report-name") || "",
     };
   };
 })((window.Kiddo = window.Kiddo || {}), d3);