kanaui 5.0.0 → 5.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b83ffa9a7fd38924effe4fa1d41bf931884e21db37d6e098931f864cd8e6f168
-  data.tar.gz: 18548789c20e02693bfeec178331b27bc43d32c10473638ed3819253f861cb20
+  metadata.gz: a6d1a8dc2490699d189f74a1c0e895e29563a342eee594a0739d0dc5b47bafd4
+  data.tar.gz: 83b3fe017d28bb1c44c2ff1641ead0c64a2c8fab62607d533f415f2609f651ae
 SHA512:
-  metadata.gz: 4d5f2cf67c9412dde6dbf0e74abb92557bd47b90180a5f9c6a41ec5a8d2a1911ed321e4429cc695a7ea4aa72c26b2c78db27d102b1bed1d54023658ecf46d22b
-  data.tar.gz: 965d83c8c2ea050106c85e5568a282573c5b70cd1679e78c80683ed6a96ca1206bcda2dbe10cecd1df7d774387bc56a4071d01b7f5368a7fa06249914642585b
+  metadata.gz: fa06748ad56e379a637fcc1348af0fdbc922d0c0a3923ec88abeaf7d56b0994c5bcae3a5b02e354e11927e74015f7764a3ea334a568f831a633d98d9a64d1946
+  data.tar.gz: 0a89abd1fccd25272ece9b7c01a725f64f177d41574e35c7611f80f3ba57f49ab7411426231a4495425549d9684c873fdfd2029a77bb25e9ffebbe703e949f38

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,59 +13,60 @@
       .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
         var legendContainer = svg
@@ -108,7 +109,7 @@
 
           // Add text label
           var labelText =
-            d.name + " :: " + d.count + ": " + d3.format(",.2f")(d.value);
+            helper.formatSeriesName(d.name) + " (" + d.count + "): " + d3.format(",.2f")(d.value);
           legendItem
             .append("text")
             .attr("x", xOffset + 18)
@@ -129,12 +130,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

@@ -80,8 +80,8 @@
             .attr("transform", "translate(" + self.margin_left + ",0)");
         });
 
-        function mousemove() {
-          var _this = this;
+        function mousemove(event) {
+          var mouseX = d3.pointer(event, this)[0];
 
           $("#mouseover_canvas .chart_values").detach().remove();
           $("#mouseover_canvas .chart_circles").detach().remove();
@@ -94,7 +94,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];

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

@@ -5,15 +5,58 @@
     };
     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) {
+      return String(name || "")
+        .split(/\s*::\s*/)
+        .map(function (segment) {
+          var parts = segment.split(/\s*:\s*/);
+          if (parts.length > 1) {
+            return humanizeSegment(parts[0]) + " (" + humanizeSegment(parts.slice(1).join(": ")) + ")";
+          }
+
+          return humanizeSegment(segment);
+        })
+        .filter(function (segment) {
+          return segment.length > 0;
+        })
+        .join(" / ");
+    };
+
     return {
-      parseDate: d3.time.format("%Y-%m-%d").parse,
+      parseDate: d3.timeParse("%Y-%m-%d"),
       bisectDate: d3.bisector(function (d) {
         return d.x;
       }).left,
       formatCurrency: formatCurrency,
       formatValue: formatValue,
+      formatSeriesName: formatSeriesName,
       formatValueDisplay: function (name, d) {
-        return name + ": " + formatValue(d.y); // Add currency boolean on backend later -- formatCurrency(d.y); }
+        return formatSeriesName(name) + ": " + formatValue(d.y); // Add currency boolean on backend later -- formatCurrency(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/stylesheets/kanaui/kanaui.css

@@ -329,11 +329,25 @@
 
 /* app/views/kanaui/reports/index.html.erb */
 
+.kanaui-flash-container {
+  margin: 1rem 0 1.5rem;
+  position: relative;
+  z-index: 1;
+}
+
+.kanaui-flash-container .alert {
+  margin-bottom: 0.75rem;
+}
+
 .kanaui-reports-index .configured-reports {
   max-width: 80rem;
   width: 100%;
 }
 
+.kanaui-reports-index .kanaui-report-notice {
+  margin-bottom: 1rem;
+}
+
 .kanaui-reports-index .configured-reports .configured-reports-header {
   display: flex;
   align-items: start;
@@ -393,6 +407,11 @@
   color: #d92d20 !important;
 }
 
+.kanaui-reports-index .disabled-table-button {
+  color: #98a2b3 !important;
+  cursor: not-allowed;
+}
+
 .kanaui-reports-index .edit-button {
   color: #535862 !important;
 }

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

@@ -3,6 +3,91 @@
     white-space: nowrap;
 }
 
+.kanaui-field-control {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.kanaui-field-control-top {
+  align-items: flex-start;
+}
+
+.kanaui-field-control .form-control {
+  flex: 1 1 auto;
+}
+
+.kanaui-field-help {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  color: #6b7280;
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1;
+  text-align: center;
+  cursor: pointer;
+}
+
+.kanaui-field-help:hover,
+.kanaui-field-help:focus {
+  color: #111827;
+  background: transparent;
+  outline: none;
+}
+
+.kanaui-field-help:focus {
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.24);
+  border-radius: 3px;
+}
+
+.kanaui-field-tooltip {
+  position: absolute;
+  z-index: 1070;
+  display: none;
+  max-width: 360px;
+  padding: 10px 12px;
+  color: #1f2937;
+  background-color: #fff;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.5;
+  pointer-events: none;
+}
+
+.kanaui-field-tooltip::before {
+  content: "";
+  position: absolute;
+  top: 12px;
+  left: -6px;
+  width: 0;
+  height: 0;
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-right: 6px solid #fff;
+}
+
+.kanaui-field-tooltip.is-flipped::before {
+  left: auto;
+  right: -6px;
+  border-right: 0;
+  border-left: 6px solid #fff;
+}
+
+.kanaui-field-tooltip.is-visible {
+  display: block;
+}
+
 .sql-query {
     word-break: break-word;
 }

data/app/controllers/kanaui/dashboard_controller.rb

@@ -11,7 +11,7 @@ module Kanaui
 
       @raw_name = (params[:name] || '').split('^')[0]
 
-      @end_date = params[:end_date] || Date.today.to_s
+      @end_date = params[:end_date] || Time.zone.today.to_s
 
       @available_start_dates = start_date_options
       @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'])
@@ -19,9 +19,13 @@ module Kanaui
       @reports = JSON.parse(raw_reports)
       @report = current_report(@reports) || {}
 
-      # If no report name is provided, redirect to the default (second) report
-      if @raw_name.blank? && @reports.is_a?(Array) && @reports[1].present?
-        default_name = @reports[1]['reportName']
+      # If no report name is provided, redirect to a default report.
+      # Prefer the historical default (second report) when present, but fall back
+      # to the first report so a single configured report still renders the
+      # dashboard controls and chart area.
+      default_report = @reports[1] || @reports[0] if @reports.is_a?(Array)
+      default_name = default_report&.fetch('reportName', nil).presence
+      if @raw_name.blank? && default_name.present?
         query_params = { start_date: @start_date,
                          end_date: @end_date,
                          name: default_name,
@@ -29,8 +33,8 @@ module Kanaui
                          sql_only: params[:sql_only],
                          format: params[:format] }
 
-        query_params[:fake] = params[:fake] unless params[:fake].blank?
-        query_params[:type] = params[:type] unless params[:type].blank?
+        query_params[:fake] = params[:fake] if params[:fake].present?
+        query_params[:type] = params[:type] if params[:type].present?
 
         redirect_to dashboard_index_path(query_params) and return
       end
@@ -46,14 +50,14 @@ module Kanaui
         name = query.present? ? "#{params[:name]}#{query}^metric:count" : params[:name]
         query_params = { start_date: @start_date,
                          end_date: @end_date,
-                         name: name,
+                         name:,
                          smooth: params[:smooth],
                          sql_only: params[:sql_only],
                          format: params[:format] }
 
         # Test only
-        query_params[:fake] = params[:fake] unless params[:fake].blank?
-        query_params[:type] = params[:type] unless params[:type].blank?
+        query_params[:fake] = params[:fake] if params[:fake].present?
+        query_params[:type] = params[:type] if params[:type].present?
 
         redirect_to dashboard_index_path(query_params) and return
       end
@@ -86,12 +90,12 @@ module Kanaui
       respond_to do |fmt|
         fmt.csv do
           filename = params[:name]
-          unless params[:start_date].blank?
+          if params[:start_date].present?
             filename += "_#{params[:start_date]}"
-            filename += "-#{params[:end_date]}" unless params[:end_date].blank?
+            filename += "-#{params[:end_date]}" if params[:end_date].present?
           end
           filename += '.csv'
-          send_data(raw_reports, filename: filename)
+          send_data(raw_reports, filename:)
         end
         fmt.all { render json: reports }
       end
@@ -146,10 +150,10 @@ module Kanaui
       filters.each do |k, v|
         next if v.blank?
 
-        filter_query << '%26' unless filter_query.blank?
+        filter_query.presence&.<<('%26')
         filter_query << "(#{k}=#{v.join("|#{k}=")})"
       end
-      query << "^filter:#{filter_query}" unless filter_query.blank?
+      query << "^filter:#{filter_query}" if filter_query.present?
 
       groups.each do |k, v|
         next if v.blank?

data/app/controllers/kanaui/engine_controller.rb

@@ -27,8 +27,27 @@ module Kanaui
     end
 
     rescue_from(KillBillClient::API::ResponseError) do |killbill_exception|
-      flash[:error] = "Error while communicating with the Kill Bill server: #{as_string(killbill_exception)}"
-      redirect_to dashboard_index_path
+      error_message = I18n.t('kanaui.errors.killbill_communication', error: as_string(killbill_exception))
+
+      if json_request?
+        render json: { message: error_message }, status: killbill_exception.response.code.to_i
+      else
+        flash[:error] = error_message
+        # Avoid redirect loops when the dashboard itself cannot be loaded.
+        if controller_name == 'dashboard' && action_name == 'index'
+          render plain: error_message, status: killbill_exception.response.code.to_i
+        else
+          redirect_to dashboard_index_path
+        end
+      end
+    end
+
+    def json_request?
+      request.format.json? || params[:format] == 'json' || dashboard_reports_json_request?
+    end
+
+    def dashboard_reports_json_request?
+      controller_name == 'dashboard' && action_name == 'reports' && params[:format].blank?
     end
 
     def as_string(e)

data/app/controllers/kanaui/reports_controller.rb

@@ -4,48 +4,57 @@ module Kanaui
   class ReportsController < Kanaui::EngineController
     def index
       @reports = JSON.parse(Kanaui::DashboardHelper::DashboardApi.available_reports(options_for_klient)).map(&:deep_symbolize_keys)
+      @report_notice = report_notice_from_flash
     end
 
     def new
       @report = {}
     end
 
-    def create
-      Kanaui::DashboardHelper::DashboardApi.create_report(report_from_params.to_json, options_for_klient)
-
-      flash[:notice] = 'Report successfully created'
-      redirect_to action: :index
-    end
-
     def edit
       @report = JSON.parse(Kanaui::DashboardHelper::DashboardApi.available_reports(options_for_klient))
                     .find { |x| x['reportName'] == params.require(:id) }
                     .deep_symbolize_keys
     end
 
+    def create
+      Kanaui::DashboardHelper::DashboardApi.create_report(report_from_params.to_json, options_for_klient)
+
+      redirect_to_index_with_notice(:created)
+    end
+
     def update
       Kanaui::DashboardHelper::DashboardApi.update_report(params.require(:id), report_from_params.to_json, options_for_klient)
 
-      flash[:notice] = 'Report successfully updated'
-      redirect_to action: :index
+      redirect_to_index_with_notice(:updated)
     end
 
     def refresh
       Kanaui::DashboardHelper::DashboardApi.refresh_report(params.require(:id), options_for_klient)
 
-      flash[:notice] = 'Report refresh successfully scheduled'
-      redirect_to action: :index
+      redirect_to_index_with_notice(:refresh_scheduled)
     end
 
     def destroy
       Kanaui::DashboardHelper::DashboardApi.delete_report(params.require(:id), options_for_klient)
 
-      flash[:notice] = 'Report successfully deleted'
-      redirect_to action: :index
+      redirect_to_index_with_notice(:deleted)
     end
 
     private
 
+    def report_notice_from_flash
+      notice_key = flash[:report_notice].presence&.to_s
+      return nil unless %w[created updated refresh_scheduled deleted].include?(notice_key)
+
+      I18n.t("kanaui.reports.notices.#{notice_key}", default: nil)
+    end
+
+    def redirect_to_index_with_notice(notice_key)
+      flash[:report_notice] = notice_key
+      redirect_to action: :index
+    end
+
     def report_from_params
       {
         reportName: params[:report_name],