ahoy_captain 0.9 → 0.10.0

data/app/assets/javascript/ahoy_captain/controllers/line_chart_controller.js

@@ -1,37 +1,188 @@
 import { Controller } from '@hotwired/stimulus';
+import { getCSS, externalTooltipHandler, dateFormatter, metricFormatter } from 'helpers/chart_utils';
+
+const calculatePercentageDifference = function(oldValue, newValue) {
+  if(!oldValue) { return false }
+  if (oldValue == 0 && newValue > 0) {
+    return 100
+  } else if (oldValue == 0 && newValue == 0) {
+    return 0
+  } else {
+    return Math.round((newValue - oldValue) / oldValue * 100)
+  }
+}
+
+const footer = (tooltipItems) => {
+  let sum = 0;
+
+  tooltipItems.forEach(function(tooltipItem) {
+    sum += tooltipItem.parsed.y;
+  });
+  return 'Sum: ' + sum;
+};
 
 export default class extends Controller {
   static values = {
-    data: Object,
-    label: String
+    current: Object,
+    comparedTo: Object,
+    interval: String,
+    label: String,
+    metric: String,
+    comparison: String
   }
+
   connect() {
-    const getCSS = (varname) => {
-      return `hsl(${getComputedStyle(document.documentElement).getPropertyValue(varname)})`
+    const onClick = (e) => {
+      const element = this.chart.getElementsAtEventForMode(e, 'index', { intersect: false })[0];
+      const searchParams = new URLSearchParams(window.location.search);
+
+      searchParams.delete('period')
+      searchParams.delete('start_date')
+      searchParams.delete('end_date')
+      searchParams.delete('compare_to_start_date')
+      searchParams.delete('compare_to_end_date')
+      searchParams.set('date', Object.keys(this.currentValue)[element.index])
+
+      Turbo.visit(window.location.pathname + "?" + searchParams.toString())
+    }
+    const datasets = [
+      {
+        label: Object.keys(this.currentValue),
+        data: Object.values(this.currentValue),
+        borderColor: getCSS('--a'),
+        backgroundColor: getCSS('--a'),
+        color: getCSS('--bc'),
+        yAxisID: 'y',
+      }
+    ]
+
+    if(this.hasComparedToValue) {
+      datasets.push({
+        label: Object.keys(this.comparedToValue),
+        data: Object.values(this.comparedToValue),
+        borderColor: getCSS('--s', 0.8),
+        backgroundColor: getCSS('--s', 0.8),
+        color: getCSS('--bc'),
+        yAxisID: 'yComparison',
+      })
     }
 
-    new Chart(this.element,
+    const calculateMaximumY = function(dataset) {
+      if (dataset) {
+        return Math.max(Object.values(dataset))
+      } else {
+        return 1
+      }
+    }
+
+    const typeForDate = this.comparisonValue === 'year' ? 'long' : "short"
+    this.chart = new Chart(this.element,
       {
         type: 'line',
         data: {
-          labels: Object.keys(this.dataValue),
-          datasets: [
-            {
-              label: this.labelValue,
-              data: Object.values(this.dataValue),
-              borderColor: getCSS('--s'),
-              backgroundColor: getCSS('--sc'),
-              color: getCSS('--sf')
-            }
-          ]
+          labels: Object.keys(this.currentValue),
+          datasets: datasets
         },
-        plugins: {
-          colors: {
-            forceOverride: true
+        options: {
+          onClick: onClick,
+          responsive: true,
+          maintainAspectRatio: false,
+          interaction: {
+            intersect: false,
+            mode: 'index',
+          },
+          plugins: {
+            legend: false,
+            tooltip: {
+              enabled: false,
+              position: 'nearest',
+              external: externalTooltipHandler(this)
+            }
+          },
+          scales: {
+            y: {
+              min: 0,
+              suggestedMax: calculateMaximumY(this.currentValue),
+              ticks: {
+              },
+              grid: {
+                zeroLineColor: 'transparent',
+                drawBorder: false,
+              }
+            },
+            yComparison: {
+              min: 0,
+              suggestedMax: calculateMaximumY(this.currentValue),
+              display: false,
+              grid: { display: false },
+            },
+            x: {
+              ticks: {
+                grid: { display: false },
+
+                color: getCSS('--bc'),
+                callback: (val, idx) => {
+                  if(idx % 2 == 0) {
+                    const date = Object.keys(this.currentValue)[val];
+                    return dateFormatter[this.intervalValue](date, typeForDate)
+                  } else {
+                    return ""
+                  }
+
+                }
+              }
+            }
+          },
+          elements: {
+            point: {
+              radius: 0
+            }
           }
         }
       },
-    )
+    );
+  }
+
+  formatLabel(label) {
+    return dateFormatter[this.intervalValue](label, 'long')
+  }
 
+  formatMetric(value) {
+    return metricFormatter[this.metricValue](value)
+  }
+
+  resize() { this.chart.resize() };
+
+  extractTooltipData(tooltip) {
+    const data = this.chart.config.data.datasets.find((set) => set.yAxisID == "y")
+    const comparisonData = this.chart.config.data.datasets.find((set) => set.yAxisID == "yComparison");
+    const dataIndex = this.chart.config.data.datasets.indexOf(data)
+    const comparisonDataIndex = this.chart.config.data.datasets.indexOf(comparisonData);
+
+    const tooltipData = tooltip.dataPoints.find((dataPoint) => dataPoint.datasetIndex == dataIndex)
+    const label = data.label[tooltipData.dataIndex];
+    let comparisonLabel = false
+    let comparisonValue = false
+    let comparisonLabelBackgroundColor = false
+    if(this.hasComparedToValue) {
+      const tooltipComparisonData = tooltip.dataPoints.find((dataPoint) => dataPoint.datasetIndex == comparisonDataIndex);
+      comparisonLabel = comparisonData.label[tooltipComparisonData.dataIndex];
+      comparisonValue = tooltip.dataPoints.find((dataPoint) => dataPoint.datasetIndex == comparisonDataIndex)?.raw || 0
+      comparisonLabelBackgroundColor = comparisonData.backgroundColor
+    }
+
+    const value = tooltip.dataPoints.find((dataPoint) => dataPoint.datasetIndex == dataIndex)?.raw || 0
+
+    return {
+      comparison: this.hasComparedToValue,
+      comparisonDifference: calculatePercentageDifference(comparisonValue, value),
+      metric: this.labelValue,
+      label: this.formatLabel(label),
+      labelBackgroundColor: data.backgroundColor,
+      formattedValue: this.formatMetric(value),
+      comparisonLabel: this.formatLabel(comparisonLabel),
+      comparisonLabelBackgroundColor: comparisonLabelBackgroundColor,
+      formattedComparisonValue: this.formatMetric(comparisonValue)
+    }
   }
 }

data/app/assets/javascript/ahoy_captain/controllers/predicate_select_controller.js

@@ -1,5 +1,4 @@
 import {Controller} from "@hotwired/stimulus"
-import SlimSelect from 'slim-select'
 
 export default class extends Controller {
   static targets = ["select"]

data/app/assets/javascript/ahoy_captain/controllers/properties_controller.js

@@ -0,0 +1,8 @@
+import {Controller} from "@hotwired/stimulus"
+
+export default class extends Controller {
+
+  handleChange(event) {
+    document.querySelector('turbo-frame#goals').src = event.target.value
+  }
+}

data/app/assets/javascript/ahoy_captain/controllers/property_filter_controller.js

@@ -0,0 +1,46 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static targets = ['name', 'value'];
+
+  connect() {
+    this.init = this.init.bind(this)
+
+    const interval = setInterval(() => {
+      if(window.comboboxConnected === 2) {
+        clearInterval(interval);
+        this.init()
+      }
+    }, 100)
+
+  }
+
+  init() {
+
+    if(this.nameTarget.value) {
+      this.valueTarget.combobox.element.dataset.comboboxQueryValue = `q[properties.${this.nameTarget.value}_i_cont]`
+    }
+
+    this.nameTarget.addEventListener("change", (event) => {
+      if(event.target.value) {
+        event.target.dataset.column = event.target.value;
+        this.valueTarget.combobox.element.dataset.comboboxQueryValue = `q[properties.${event.target.value}_i_cont]`
+        this.valueTarget.combobox.setDisabled(false)
+        this.valueTarget.combobox.isOpenValue = false
+      } else {
+        this.valueTarget.combobox.setSelected([])
+        this.valueTarget.combobox.setDisabled(true)
+      }
+    })
+    this.valueTarget.addEventListener("change", (event) => {
+      if(event.target.value.length > 0) {
+        this.valueTarget.name = `q[properties.${this.nameTarget.dataset.column}_in]`
+      } else {
+        this.valueTarget.name = null
+        this.valueTarget.combobox.element.dataset.comboboxQueryValue = ""
+      }
+    })
+
+  }
+
+}

data/app/assets/javascript/ahoy_captain/controllers/realtime_controller.js

@@ -2,12 +2,14 @@ import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
   static targets = ['label'];
-
+  static values = {
+    interval: Number
+  }
   connect() {
     this.reload = this.reload.bind(this);
     this.setLabel = this.setLabel.bind(this);
     this.labelCount = 0;
-    this.reloadInterval = setInterval(this.reload, 1000 * 30);
+    this.reloadInterval = setInterval(this.reload, 1000 * this.intervalValue);
     this.labelInterval = setInterval(this.setLabel, 1000);
   }
 

data/app/assets/javascript/ahoy_captain/controllers/tile_controller.js

@@ -0,0 +1,9 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static targets = ["title"]
+  setTitle(event) {
+    this.titleTarget.innerHTML = event.target.title || event.target.text
+  }
+
+}

data/app/assets/javascript/ahoy_captain/helpers/chart_utils.js

@@ -0,0 +1,156 @@
+import { numberFormatter, durationFormatter, percentageFormatter } from "helpers/number_formatters";
+
+export const getCSS = (varname, alpha = 1) => {
+  const value = getComputedStyle(document.documentElement).getPropertyValue(varname);
+  if(value.includes("em") || value.includes("px")) {
+    return value
+  }
+  return `hsl(${getComputedStyle(document.documentElement).getPropertyValue(varname)} / ${alpha})`
+}
+
+const buildTooltipData = (controller, tooltip) => {
+  return controller.extractTooltipData(tooltip)
+}
+
+export const metricFormatter = {
+  "ActiveSupport::Duration": durationFormatter,
+  "BigDecimal": numberFormatter,
+  "Float": percentageFormatter,
+  "Integer": numberFormatter
+}
+
+export const dateFormatter = {
+  month: (value, type = 'short') => {
+    if(type === 'short') {
+      return new Date(value).toLocaleString(
+        'en-US',
+        { month: 'short', day: 'numeric', hour: 'numeric' }
+      )
+    } else {
+      return new Date(value).toLocaleString(
+        'en-US',
+        { year: "numeric", month: 'short', day: 'numeric', hour: 'numeric' }
+      )
+    }
+  },
+  week: (value, type = 'short') => {
+    return new Date(value).toLocaleString(
+      'en-US',
+      { month: 'short', day: 'numeric', hour: 'numeric' }
+    )
+  },
+  day: (value, type = 'short') => {
+    return new Date(value).toLocaleString(
+      'en-US',
+      { month: 'short', day: 'numeric', hour: 'numeric' }
+    )
+  },
+  hour: (value, type = 'short') => {
+    if(type == 'long') {
+      return new Date(value).toLocaleString(
+        'en-US',
+        { year: 'numeric', hour: 'numeric' }
+      )
+    } else {
+      return new Date(value).toLocaleString(
+        'en-US',
+        { hour: 'numeric' }
+      )
+    }
+  },
+  minute: (value, type = 'short') => {
+    if(type == 'short') {
+      return new Date(value).toLocaleString(
+        'en-US',
+        { minute: 'numeric', hour: 'numeric' }
+      )
+    } else {
+      return new Date(value).toLocaleString(
+        'en-US',
+        { year: 'numeric', minute: 'numeric', hour: 'numeric' }
+      )
+    }
+  },
+}
+
+export const externalTooltipHandler = (controller) => {
+
+  return ({chart, tooltip}) => {
+    const offset = controller.chart.canvas.getBoundingClientRect()
+    let tooltipEl = document.getElementById('chartjs-tooltip')
+
+    if (!tooltipEl) {
+      tooltipEl = document.createElement('div')
+      tooltipEl.id = 'chartjs-tooltip'
+      tooltipEl.style.background = getCSS('--n', );
+      tooltipEl.style.borderRadius = getCSS('--rounded-btn');
+      tooltipEl.style.opacity = 1;
+      tooltipEl.style.pointerEvents = 'none';
+      tooltipEl.style.position = 'absolute';
+      tooltipEl.style.transform = 'translate(-50%, 50%)';
+      tooltipEl.style.transition = 'all .1s ease';
+      tooltipEl.style.minWidth = '250px'
+
+      chart.canvas.parentNode.appendChild(tooltipEl);
+    }
+
+    if (tooltipEl && offset && window.innerWidth < 768) {
+      tooltipEl.style.top = offset.y + offset.height + window.scrollY + 15 + 'px'
+      tooltipEl.style.left = offset.x + 'px'
+      tooltipEl.style.right = null
+      tooltipEl.style.opacity = 1
+    }
+
+    if (tooltip.opacity === 0) {
+      tooltipEl.style.display = 'none'
+      return
+    }
+
+    if (tooltip.body) {
+      const tooltipData = buildTooltipData(controller, tooltip)
+
+      tooltipEl.innerHTML = `
+        <aside class="flex flex-col text-neutral-content">
+          <div class="flex justify-between items-center">
+            <span class="text-sm font-bold uppercase whitespace-nowrap flex mr-4">${tooltipData.metric}</span>
+            ${tooltipData.comparison && tooltipData.comparisonDifference ?
+        `<div class="inline-flex items-center space-x-1">
+              ${tooltipData.comparisonDifference > 0 ? `<span class="font-semibold text-sm text-green-500">&uarr;</span><span>${tooltipData.comparisonDifference}%</span>` : ""}
+              ${tooltipData.comparisonDifference < 0 ? `<span class="font-semibold text-sm text-red-400">&darr;</span><span>${tooltipData.comparisonDifference * -1}%</span>` : ""}
+              ${tooltipData.comparisonDifference == 0 ? `<span class="font-semibold text-sm">〰 0%</span>` : ""}
+            </div>` : ''}
+          </div>
+
+          ${tooltipData.label ?
+        `<div class="flex flex-col">
+            <div class="flex flex-row justify-between items-center">
+              <span class="badge relative badge-xs" style="background-color: ${tooltipData.labelBackgroundColor}"></span>
+              <span class="flex items-center grow ml-4 mr-4">
+                <span>${tooltipData.label}</span>
+              </span>
+              <span class="font-bold">${tooltipData.formattedValue}</span>
+            </div>` : ''}
+
+            ${tooltipData.comparison ?
+        `<div class="flex flex-row justify-between items-center">
+              <span class="badge relative badge-xs" style="background-color: ${tooltipData.comparisonLabelBackgroundColor}"></span>
+              <span class="flex items-center grow ml-4 mr-4">
+                <span>${tooltipData.comparisonLabel}</span>
+              </span>
+              <span class="font-bold">${tooltipData.formattedComparisonValue}</span>
+            </div>` : ""}
+          </div>
+        </aside>
+      `
+    }
+    const {offsetLeft: positionX, offsetTop: positionY} = chart.canvas;
+
+    // Display, position, and set styles for font
+    tooltipEl.style.opacity = 1;
+    tooltipEl.style.display = null;
+    tooltipEl.style.left = positionX + tooltip._eventPosition.x + 'px';
+    tooltipEl.style.top = positionY + tooltip._eventPosition.y + 'px';
+    tooltipEl.style.font = tooltip.options.bodyFont.string;
+    tooltipEl.style.padding = tooltip.options.padding + 'px ' + tooltip.options.padding + 'px';
+  }
+};

data/app/assets/javascript/ahoy_captain/helpers/number_formatters.js

@@ -0,0 +1,55 @@
+const THOUSAND = 1000
+const HUNDRED_THOUSAND = 100000
+const MILLION = 1000000
+const HUNDRED_MILLION = 100000000
+const BILLION = 1000000000
+const HUNDRED_BILLION = 100000000000
+const TRILLION = 1000000000000
+
+export function numberFormatter(num) {
+  if (num >= THOUSAND && num < MILLION) {
+    const thousands = num / THOUSAND
+    if (thousands === Math.floor(thousands) || num >= HUNDRED_THOUSAND) {
+      return Math.floor(thousands) + 'k'
+    } else {
+      return (Math.floor(thousands * 10) / 10) + 'k'
+    }
+  } else if (num >= MILLION && num < BILLION) {
+    const millions = num / MILLION
+    if (millions === Math.floor(millions) || num >= HUNDRED_MILLION) {
+      return Math.floor(millions) + 'M'
+    } else {
+      return (Math.floor(millions * 10) / 10) + 'M'
+    }
+  } else if (num >= BILLION && num < TRILLION) {
+    const billions = num / BILLION
+    if (billions === Math.floor(billions) || num >= HUNDRED_BILLION) {
+      return Math.floor(billions) + 'B'
+    } else {
+      return (Math.floor(billions * 10) / 10) + 'B'
+    }
+  } else {
+    return num
+  }
+}
+
+function pad(num, size) {
+  return ('000' + num).slice(size * -1);
+}
+
+export function durationFormatter(duration) {
+  const hours = Math.floor(duration / 60 / 60)
+  const minutes = Math.floor(duration / 60) % 60
+  const seconds = Math.floor(duration - (minutes * 60) - (hours * 60 * 60))
+  if (hours > 0) {
+    return `${hours}h ${minutes}m ${seconds}s`
+  } else if (minutes > 0) {
+    return `${minutes}m ${pad(seconds, 2)}s`
+  } else {
+    return `${seconds}s`
+  }
+}
+
+export function percentageFormatter(float) {
+  return Number(float/100).toLocaleString(undefined,{style: 'percent', minimumFractionDigits:2});
+}

data/app/components/ahoy_captain/combobox_component.html.erb

@@ -0,0 +1,33 @@
+<div data-controller="combobox"
+     data-combobox-single-option-value="<%= !@multiple %>"
+     data-combobox-placeholder-value="Select an option..."
+     data-combobox-is-disabled-value="false"
+     data-combobox-url-value="<%= @url %>"
+     data-combobox-disabled-value="<%= @disabled %>"
+     data-combobox-query-value="q[<%= @column %>_i_cont]"
+     data-combobox-selected-value="<%= @value.map { |value| { text: value, value: value } }.to_json %>"
+     class=" w-full "
+>
+  <div data-action="click->combobox#toggleOpen" data-combobox-target="box"
+       class="
+        bg-gray-900 ring-0  focus-within:ring-0 focus-within:ring-0 focus:ring-0 focus:outline-none w-full rounded-md px-4 py-2 text-sm
+        w-full"
+       data-combobox-box-open-class="border-secondary-500 ring-1 ring-secondary-500">
+    <select data-combobox-target="select" style="display:none;"
+            data-predicate-select-target="select"
+            name="<%= @name %>"
+            id="<%= @select_html[:id] || "filter_#{@name}" %>"
+            <% @select_html.each do |k,v| %><%=k %>="<%=v %>"<% end %>
+    ><% @value.each do |value| %><option value="<%= value %>" selected><%= value %></option><% end %></select>
+    <div data-combobox-target="selected" class="" style="display:none;"></div>
+    <input data-combobox-target="input"
+           data-action="input->combobox#onInput"
+           class="input input-sm input-ghost w-full inline-block rounded-md focus:outline-none focus:ring-0 focus:bg-gray-900"
+           type="text"
+           placeholder="Select an option...">
+  </div>
+  <ul data-combobox-target="list"
+      class="z-50 absolute mt-1 max-h-60 w-full overflow-auto rounded-md py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm bg-gray-800 text-gray-350"
+      style="display: none;">
+  </ul>
+</div>

data/app/components/ahoy_captain/combobox_component.rb

@@ -0,0 +1,13 @@
+module AhoyCaptain
+  class ComboboxComponent < ViewComponent::Base
+    def initialize(name:, multiple: false, disabled: false, column:, url:, value: [], select_html: {})
+      @name = name
+      @multiple = multiple
+      @column = column
+      @url = url
+      @value = value
+      @select_html = select_html
+      @disabled = disabled
+    end
+  end
+end

data/app/components/ahoy_captain/comparison_link_component.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+class AhoyCaptain::ComparisonLinkComponent < AhoyCaptain::DropdownLinkComponent
+  include ::AhoyCaptain::CompareMode
+  include ::AhoyCaptain::RangeOptions
+  include ::AhoyCaptain::Rangeable
+
+  def initialize(title: "", classes: "btn btn-sm btn-base-100 no-underline hover:bg-base-100")
+    @classes = classes
+  end
+
+  # cheating
+  def title
+    self.with_option_content(options_for_option)
+
+    comparison_mode.label
+  end
+
+  def render?
+    comparison_mode.enabled?
+  end
+
+  def options_for_option
+    [
+      (link_to "Disable Comparison", AhoyCaptain::Engine.routes.url_helpers.root_path(**helpers.search_params.merge(comparison: false))),
+      (link_to "Previous period", AhoyCaptain::Engine.routes.url_helpers.root_path(**helpers.search_params.merge(comparison: :previous)), class: selected(:previous, :true)),
+      (link_to "Year-over-year", AhoyCaptain::Engine.routes.url_helpers.root_path(**helpers.search_params.merge(comparison: :year)), class: selected(:year)),
+      (link_to "Custom period", "javascript:customComparisonModal.showModal()", class: selected(:custom)),
+
+    ].join.html_safe
+  end
+
+  private
+
+  def selected(*types)
+    return "font-bold" if comparison_mode.type.in?(types)
+
+    nil
+  end
+end

data/app/components/ahoy_captain/filter/dropdown_component.html.erb

@@ -1,7 +1,7 @@
 <div class="dropdown dropdown-end">
   <label
     tabindex="0"
-    class="btn btn-ghost dark:hover:bg-neutral flex"
+    class="btn btn-sm btn-ghost dark:hover:bg-neutral flex"
   >
     <%= header_icon %>
     <span><%= title %></span>
@@ -18,7 +18,8 @@
                     class="flex w-full justify-between link no-underline items-center group <% if filter.modal %>cursor-pointer<% else %>cursor-text<% end %> text-left"
                     onclick="<% if filter.modal %><%= filter.modal %>.showModal() <% end %>">
               <span class="truncate w-48  ">
-                <%= filter.description %>
+                <%= filter.column.titleize %> <%= filter.predicate.titleize %>
+                <%= filter.values.to_sentence %>
               </span>
               <% if filter.modal %>
               <span class="group-hover:text-primary hover:text-primary ">
@@ -30,8 +31,8 @@
                class="hover:text-primary link no-underline pl-2" href="<%= filter.url %>">
               <%= remove_icon %>
             </a>
-          <li>
-            <div class="divider my-1" data-toggle-target='toggleable'></div>
+          </li>
+          <div class="divider my-1" data-toggle-target='toggleable'></div>
         <% end %>
         <li data-toggle-target='toggleable'>
           <a class="block mx-auto pl-4 pb-1 " href="<%= AhoyCaptain::Engine.app.url_helpers.root_path %>">Clear all filters</a>
@@ -39,10 +40,11 @@
       </div>
     <% end %>
 
-    <div id="core-filters" class="menu <%= 'hidden' if advanced_filter_menu? %> pt-0" data-toggle-target='toggleable'>
+    <ul id="core-filters" class="menu <%= 'hidden' if advanced_filter_menu? %> pt-0" data-toggle-target='toggleable'>
       <% AhoyCaptain.config.filters.each do |label, filter_group| %>
         <li><button onClick="<%= filter_group.modal_name %>.showModal()" class='link no-underline' data-action="click->toggle#trigger"><%= label %></button></li>
       <% end %>
-    </div>
+      <li><button onClick="customPropertyFilterModal.showModal()" class='link no-underline' data-action="click->toggle#trigger">Property</button></li>
+    </ul>
   </ul>
 </div>

data/app/components/ahoy_captain/filter/modal_component.html.erb

@@ -1,11 +1,13 @@
-<dialog id="<%= id %>" class="modal">
-  <div class="modal-box w-11/12 max-w-5xl">
+<dialog id="<%= id %>" class="modal" data-controller="filter-modal">
+  <div class="modal-box h-5/6	 max-w-5xl">
+      <h1 class="text-xl mb-4"><%= title %></h1>
     <fieldset>
-      <h5><%= title %></h5>
       <%= modal_display %>
-      <button class="btn btn-active btn-primary mt-4" type="submit">Apply</button>
-      <button class="btn btn-active btn-primary mt-4" type="reset">Reset</button>
     </fieldset>
+    <div class="mt-10">
+      <button class="btn btn-active btn-primary" type="submit">Apply</button>
+      <button class="btn btn-active btn-primary" type="reset">Reset</button>
+    </div>
   </div>
   <label  class="modal-backdrop">
     <button onclick="event.preventDefault(); <%=id %>.close();">Close</button>