renalware-core 2.0.149 → 2.0.151

data/app/inputs/date_picker_input.rb

@@ -4,14 +4,14 @@ class DatePickerInput < SimpleForm::Inputs::StringInput
   # Note that where we use `wrapper: :clockpicker` or `wrapper: horizontal_clockpicker`,
   # #input is not called and we call #prefix_column and #input_column directly.
   def input(_wrapper_options)
-    template.content_tag(:div, class: "row collapse #{class_name}-wrapper") do
+    template.tag.div(class: "row collapse #{class_name}-wrapper") do
       template.concat prefix_column
       template.concat input_column
     end
   end
 
   def prefix_column(_wrapper_options = {})
-    template.content_tag(:div, class: "small-2 columns") do
+    template.tag.div(class: "small-2 columns") do
       template.concat icon_calendar
     end
   end
@@ -20,7 +20,7 @@ class DatePickerInput < SimpleForm::Inputs::StringInput
     html_options = input_html_options
     html_options[:class] ||= []
     html_options[:class] << class_name
-    template.content_tag(:div, class: "small-10 columns") do
+    template.tag.div(class: "small-10 columns") do
       datestamp = @builder.object.public_send(attribute_name)
       value = format_date(datestamp)
       template.concat @builder.text_field(attribute_name, html_options.merge(value: value))

data/app/inputs/simple_time_input.rb

@@ -2,14 +2,14 @@
 
 class SimpleTimeInput < SimpleForm::Inputs::StringInput
   def input(_wrapper_options)
-    template.content_tag(:div, class: "row collapse datepicker-wrapper") do
+    template.tag.div(class: "row collapse datepicker-wrapper") do
       template.concat prefix_column
       template.concat input_column
     end
   end
 
   def prefix_column
-    template.content_tag(:div, class: "large-2 columns") do
+    template.tag.div(class: "large-2 columns") do
       template.concat icon_clock
     end
   end
@@ -17,7 +17,7 @@ class SimpleTimeInput < SimpleForm::Inputs::StringInput
   def input_column
     html_options = input_html_options
     html_options[:class] ||= []
-    template.content_tag(:div, class: "large-10 columns") do
+    template.tag.div(class: "large-10 columns") do
       time = @builder.object.public_send(attribute_name)
       value = time.present? ? I18n.l(time, format: :time) : ""
       template.concat @builder.text_field(attribute_name, html_options.merge(value: value))

data/app/inputs/trix_editor_input.rb

@@ -1,5 +1,6 @@
 # frozen_string_literal: true
 
+# rubocop:disable Rails/ContentTag
 # See https://github.com/kylefox/trix/blob/master/lib/trix/simple_form/trix_editor_input.rb
 class TrixEditorInput < SimpleForm::Inputs::Base
   def input(_wrapper_options)
@@ -12,3 +13,4 @@ class TrixEditorInput < SimpleForm::Inputs::Base
     template.content_tag("div", hidden_field + editor_tag, class: "trix-editor-wrapper")
   end
 end
+# rubocop:enable Rails/ContentTag

data/app/javascript/renalware/controllers/blas_controller.js

@@ -0,0 +1,37 @@
+// NB Chartkick and Highcharts are defined as global in rollup
+const Highcharts = window.Highcharts
+
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  static targets = [ "chart", "title" ]
+
+  // E.g. clicked on/hovered over a link so we fetch the json for this anchor's url
+  // and repopulate the graph
+  show(e) {
+    e.preventDefault()
+    fetch(e.currentTarget.href)
+    .then(response => response.json())
+    .then(data => this.refreshChart(data))
+  }
+
+  refreshChart(seriesData) {
+    // Could use chart title instead
+    this.titleTarget.innerHTML = `${seriesData.code} (${seriesData.name})`
+    let options = this.chartOptions
+    options["series"] = [{ name: seriesData.code, data: seriesData.results }]
+    Highcharts.chart(this.chartTarget.id, options)
+  }
+
+  get chartOptions() {
+    return {
+      chart: {
+        type: "line"
+      },
+      xAxis: {
+        type: "date"
+      },
+      series: []
+    }
+  }
+}

data/app/javascript/renalware/controllers/modal_controller.js

@@ -0,0 +1,137 @@
+// Adapted from https://github.com/excid3/tailwindcss-stimulus-components/blob/master/src/modal.js
+// Designed to work with tailwindcss
+//
+// Visit The Stimulus Handbook for more details
+// https://stimulusjs.org/handbook/introduction
+//
+// This example controller works with specially annotated HTML like:
+//
+//<div data-controller="modal" data-modal-allow-background-close="false">
+//  <a href="#" data-action="click->modal#open" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded">
+//   <span>Open Modal</span>
+//  </a>
+//  <!-- Modal Container -->
+//  <div data-target="modal.container" data-action="click->modal#closeBackground keyup@window->modal#closeWithKeyboard" class="hidden animated fadeIn fixed inset-0 overflow-y-auto flex items-center justify-center" style="z-index: 9999;">
+//    <!-- Modal Inner Container -->
+//    <div class="max-h-screen w-full max-w-lg relative">
+//      <!-- Modal Card -->
+//      <div class="m-1 bg-white rounded shadow">
+//        <div class="p-8">
+//          <h2 class="text-xl mb-4">Large Modal Content</h2>
+//          <p class="mb-4">This is an example modal dialog box.</p>
+//          <div class="flex justify-end items-center flex-wrap mt-6">
+//            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" data-action="click->modal#close">Close</button>
+//          </div>
+//        </div>
+//      </div>
+//    </div>
+//  </div>
+//</div>
+
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  static targets = ["container"];
+
+  connect() {
+    // The class we should toggle on the container
+    this.toggleClass = this.data.get("class") || "hidden"
+
+    // The HTML for the background element
+    this.backgroundHtml = this.data.get("backgroundHtml") || this._backgroundHTML()
+
+    // The ID of the background to hide/remove
+    this.backgroundId = this.data.get("backgroundId") || "modal-background"
+
+    // Let the user close the modal by clicking on the background
+    this.allowBackgroundClose = (this.data.get("allowBackgroundClose") || "true") === "true"
+  }
+
+  disconnect() {
+    this.close()
+  }
+
+  open(e) {
+    e.preventDefault()
+    e.target.blur()
+
+    // Lock the scroll and save current scroll position
+    this.lockScroll()
+
+    // Unhide the modal
+    this.containerTarget.classList.remove(this.toggleClass)
+
+    // Insert the background
+    if (!this.data.get("disable-backdrop")) {
+      document.body.insertAdjacentHTML("beforeend", this.backgroundHtml)
+      this.background = document.querySelector(`#${this.backgroundId}`)
+    }
+  }
+
+  close(e) {
+    if (e) e.preventDefault()
+
+    // Unlock the scroll and restore previous scroll position
+    this.unlockScroll()
+
+    // Hide the modal
+    this.containerTarget.classList.add(this.toggleClass)
+
+    // Remove the background
+    if (this.background) { this.background.remove() }
+  }
+
+  closeBackground(e) {
+    if (this.allowBackgroundClose && e.target === this.containerTarget) {
+      this.close(e)
+    }
+  }
+
+  closeWithKeyboard(e) {
+    if (e.keyCode === 27 && !this.containerTarget.classList.contains(this.toggleClass)) {
+      this.close(e)
+    }
+  }
+
+  _backgroundHTML() {
+    return "<div id=\"modal-background\" class=\"fixed top-0 left-0 w-full h-full\" style=\"background-color: rgba(0, 0, 0, 0.8); z-index: 9998;\"></div>"
+  }
+
+  lockScroll() {
+    // Add right padding to the body so the page doesn't shift
+    // when we disable scrolling
+    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth
+    document.body.style.paddingRight = `${scrollbarWidth}px`
+
+    // Save the scroll position
+    this.saveScrollPosition()
+
+    // Add classes to body to fix its position
+    document.body.classList.add("fixed", "inset-x-0", "overflow-hidden")
+
+    // Add negative top position in order for body to stay in place
+    document.body.style.top = `-${this.scrollPosition}px`
+  }
+
+  unlockScroll() {
+    // Remove tweaks for scrollbar
+    document.body.style.paddingRight = null
+
+    // Remove classes from body to unfix position
+    document.body.classList.remove("fixed", "inset-x-0", "overflow-hidden")
+
+    // Restore the scroll position of the body before it got locked
+    this.restoreScrollPosition()
+
+    // Remove the negative top inline style from body
+    document.body.style.top = null
+  }
+
+  saveScrollPosition() {
+    this.scrollPosition = window.pageYOffset || document.body.scrollTop
+  }
+
+  restoreScrollPosition() {
+    document.documentElement.scrollTop = this.scrollPosition
+  }
+}

data/app/javascript/renalware/controllers/pathology/sparklines_controller.js

@@ -0,0 +1,206 @@
+// NB Chartkick and Highcharts are defined as global in rollup
+// const Chartkick = window.Chartkick
+
+
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  static targets = ["chart"]
+
+  connect() {
+    // let data = this.data.get("chartData")
+    // let chartId = this.chartTarget.id
+
+    // console.log(chartId)
+    // let json = [
+    //     {
+    //       name: "",
+    //       data: data
+    //     }
+    //   ]
+    console.log("Not implemented")
+    //Highcharts.SparkLine(this.chartTarget, {})
+    //     series: [{
+    //         name: '',
+    //         data: data
+    //    }]
+    // })
+    //new Chartkick.LineChart(chartId, json, this.chartOptions)
+  }
+
+  // get chartOptions() {
+  //   return {
+  //     library: {
+  //       chart: {
+  //         type: "area",
+  //         margin: [0, 0, 0, 0],
+  //         height: 20,
+  //         width: 80,
+  //         skipClone: true,
+  //         style: {
+  //           overflow: "visible"
+  //         }
+  //       },
+  //       credits: {
+  //         enabled: false
+  //       },
+  //       title: "",
+  //       xAxis: {
+  //         type: "datetime",
+  //         tickPositions: [],
+  //         labels: {
+  //           enabled: false
+  //         },
+  //         startOnTick: false,
+  //         endOnTick: false,
+  //         title: {
+  //           text: null
+  //         }
+  //       },
+  //       legend: {
+  //         enabled: false
+  //       },
+  //       yAxis: {
+  //         tickPositions: [0],
+  //         endOnTick: false,
+  //         startOnTick: false,
+  //         title: {
+  //           text: null
+  //         },
+  //         min: 0,
+  //         labels: {
+  //           enabled: false
+  //         }
+  //       },
+  //       tooltip: {
+  //         hideDelay: 0,
+  //         outside: true,
+  //         shared: true,
+  //         xDateFormat: '%d-%b-%Y'
+  //       },
+  //       plotOptions: {
+  //         series: {
+  //           animation: false,
+  //           lineWidth: 1,
+  //           shadow: false,
+  //           states: {
+  //             hover: {
+  //               lineWidth: 1
+  //             }
+  //           },
+  //           marker: {
+  //             radius: 1,
+  //             states: {
+  //               hover: {
+  //                 radius: 2
+  //               }
+  //             }
+  //           },
+  //           fillOpacity: 0.25
+  //         },
+  //         column: {
+  //           negativeColor: "#910000",
+  //           borderColor: "silver"
+  //         }
+  //       }
+  //     }
+  //   }
+  // }
+}
+  /**
+  * Create a constructor for sparklines that takes some sensible defaults and merges in the individual
+  * chart options.
+  */
+
+  /*
+  window.Highcharts.SparkLine = function (a, b, c) {
+  console.log("defining1");
+  var hasRenderToArg = typeof a === 'string' || a.nodeName,
+      options = arguments[hasRenderToArg ? 1 : 0],
+      defaultOptions = {
+          chart: {
+              renderTo: (options.chart && options.chart.renderTo) || this,
+              backgroundColor: null,
+              borderWidth: 0,
+              type: 'area',
+              margin: [2, 0, 2, 0],
+              width: 120,
+              height: 20,
+              style: {
+                  overflow: 'visible'
+              },
+
+              // small optimalization, saves 1-2 ms each sparkline
+              skipClone: true
+          },
+          title: {
+              text: ''
+          },
+          credits: {
+              enabled: false
+          },
+          xAxis: {
+              labels: {
+                  enabled: false
+              },
+              title: {
+                  text: null
+              },
+              startOnTick: false,
+              endOnTick: false,
+              tickPositions: []
+          },
+          yAxis: {
+              endOnTick: false,
+              startOnTick: false,
+              labels: {
+                  enabled: false
+              },
+              title: {
+                  text: null
+              },
+              tickPositions: [0]
+          },
+          legend: {
+              enabled: false
+          },
+          tooltip: {
+              hideDelay: 0,
+              outside: true,
+              shared: true
+          },
+          plotOptions: {
+              series: {
+                  animation: false,
+                  lineWidth: 1,
+                  shadow: false,
+                  states: {
+                      hover: {
+                          lineWidth: 1
+                      }
+                  },
+                  marker: {
+                      radius: 1,
+                      states: {
+                          hover: {
+                              radius: 2
+                          }
+                      }
+                  },
+                  fillOpacity: 0.25
+              },
+              column: {
+                  negativeColor: '#910000',
+                  borderColor: 'silver'
+              }
+          }
+      };
+
+  options = Highcharts.merge(defaultOptions, options);
+
+  return hasRenderToArg ?
+      new Highcharts.Chart(a, options, c) :
+      new Highcharts.Chart(options, b)
+}
+
+  */

data/app/javascript/renalware/controllers/pd/pet_charts_controller.js

@@ -0,0 +1,169 @@
+// NB Chartkick and Highcharts are defined as global in rollup
+const Highcharts = window.Highcharts // Highcharts is defined as global in rollup
+const $ = window.$
+import { Controller } from "stimulus"
+import more from "highcharts/highcharts-more"
+more(Highcharts)
+
+export default class extends Controller {
+  connect() {
+    $.getJSON(
+      this.data.get("url"),
+      (data) => {
+        Highcharts.chart(this.element, {
+          chart: {
+            scrollablePlotArea: {
+              minWidth: 600,
+              scrollPositionX: 1
+            }
+          },
+          title: {
+            //text: "Peritoneal Equilibration Test",
+            text: "",
+            align: "left"
+          },
+          subtitle: {
+            text: "",
+            align: "left"
+          },
+          xAxis: {
+            title: {
+              text: "D/P creatinine (4hrs)"
+            },
+            type: "linear",
+            labels: {
+              overflow: "justify"
+            },
+            plotBands: [{
+              from: 0.3,
+              to: 0.5,
+              color: "rgba(68, 170, 213, 0.1)",
+              label: {
+                text: "Low",
+                style: {
+                  color: "#606060"
+                }
+              }
+            }, {
+              from: 0.5,
+              to: 0.65,
+              color: "rgba(0, 0, 0, 0)",
+              label: {
+                text: "Low average",
+                style: {
+                  color: "#606060"
+                }
+              }
+            }, {
+              from: 0.65,
+              to: 0.82,
+              color: "rgba(68, 170, 213, 0.1)",
+              label: {
+                text: "High average",
+                style: {
+                  color: "#606060"
+                }
+              }
+            }, {
+              from: 0.82,
+              to: 1.0,
+              color: "rgba(0, 0, 0, 0)",
+              label: {
+                text: "High",
+                style: {
+                  color: "#606060"
+                }
+              }
+            }]
+          },
+          yAxis: {
+            title: {
+              text: "Net Ultrafiltration (mls)"
+            },
+            tickInterval: 200,
+            minorGridLineWidth: 0,
+            gridLineWidth: 0,
+            alternateGridColor: null,
+            floor: -600,
+            plotLines: [{
+                    color: "#BBB",
+                    width: 1,
+                    value: 0
+                }]
+          },
+
+          tooltip: {
+            formatter: function () {
+              return "<br>D_Pcr <b>" + this.x + "</b><br>" +
+                  "netUF <b>" + this.y + "</b>"
+            }
+          },
+          plotOptions: {
+            pointStart: 0.3,
+            line: {
+              dataLabels: {
+                enabled: true,
+                format: "{point.index}",
+                style: {
+                  fontSize: "15px"
+                }
+              }
+            },
+            series: {
+              enableMouseTracking: false
+            },
+            dataLabels: {
+              enabled: true,
+              style: {
+                fontWeight: "bold"
+              }
+            }
+          },
+          series: [
+          {
+            name: "Expected",
+            color: "#00a499", //"#D970D9",
+            showInLegend: true,
+            type: "polygon",
+            data: [
+              [0.36,400],
+              [0.36,1000],
+              [0.5,1000],
+              [0.9,600],
+              [0.9,300],
+              [0.6,100],
+              [0.36,400]
+            ]
+          },
+          {
+            name: "Warning",
+            color: "#fff495",
+            showInLegend: true,
+            type: "polygon",
+            data: [
+              [0.6,100],
+              [0.9,300],
+              [1.0,200],
+              [1.0,-600],
+              [0.75,-600],
+              [0.6,100]
+            ]
+          },
+          {
+            // patient data
+            color: "#040481",
+            showInLegend: false,
+            enableMouseTracking: true,
+            data: data
+          }],
+          navigation: {
+            menuItemStyle: {
+              fontSize: "10px"
+            }
+          }
+        })
+        this.element.style.overflow = "unset"
+      }
+    )
+  }
+}