@unabridged/midwest 0.12.1 → 0.13.0

package/app/assets/javascript/midwest/index.ts

@@ -14,9 +14,10 @@ import CountdownTimer from '../../../components/midwest/countdown_timer_componen
 import Badge from '../../../components/midwest/badge_component/badge_component_controller'
 import Confirmation from '../../../components/midwest/confirmation_component/confirmation_component_controller'
 import AvatarGroup from '../../../components/midwest/avatar_group_component/avatar_group_component_controller'
+import Chart from '../../../components/midwest/chart_component/chart_component_controller'
 /* IMPORTS */
 
-export { Card, Banner, CountdownTimer }
+export { Card, Banner, CountdownTimer, Chart }
 
 export function registerMidwestControllers (application: any) {
   application.register('midwest-card', Card)
@@ -35,5 +36,6 @@ export function registerMidwestControllers (application: any) {
   application.register('midwest-badge', Badge)
   application.register('midwest-confirmation', Confirmation)
   application.register('midwest-avatar-group', AvatarGroup)
+  application.register('midwest-chart', Chart)
   /* EXPORTS */
 }

package/app/assets/javascript/midwest.js

@@ -3656,6 +3656,90 @@ class AvatarGroup extends Controller {
   }
 }
 
+class Chart extends Controller {
+  static targets = ["tooltip", "svg"];
+  static values = { tooltipEnabled: { type: Boolean, default: true } };
+  connect() {
+    if (this.tooltipEnabledValue && this.hasTooltipTarget) {
+      this.attachListeners();
+    }
+  }
+  disconnect() {
+    if (!this.hasSvgTarget)
+      return;
+    this.svgTarget.removeEventListener("pointerover", this.showTooltipOnPointer);
+    this.svgTarget.removeEventListener("pointermove", this.moveTooltip);
+    this.svgTarget.removeEventListener("pointerout", this.hideTooltip);
+    this.svgTarget.removeEventListener("focusin", this.showTooltipOnFocus);
+    this.svgTarget.removeEventListener("focusout", this.hideTooltip);
+  }
+  attachListeners() {
+    this.svgTarget.addEventListener("pointerover", this.showTooltipOnPointer);
+    this.svgTarget.addEventListener("pointermove", this.moveTooltip);
+    this.svgTarget.addEventListener("pointerout", this.hideTooltip);
+    this.svgTarget.addEventListener("focusin", this.showTooltipOnFocus);
+    this.svgTarget.addEventListener("focusout", this.hideTooltip);
+  }
+  // Arrow functions so `this` is stable for add/removeEventListener pairing.
+  showTooltipOnPointer = (event) => {
+    if (!this.hasTooltipTarget)
+      return;
+    const target = event.target.closest("[data-tooltip-content]");
+    if (!target)
+      return;
+    this.tooltipTarget.textContent = target.dataset.tooltipContent ?? "";
+    this.tooltipTarget.classList.add("is-visible");
+    this.positionAtPointer(event);
+  };
+  // Reposition tooltip as the pointer moves within the SVG so it tracks the cursor.
+  moveTooltip = (event) => {
+    if (!this.tooltipTarget.classList.contains("is-visible"))
+      return;
+    this.positionAtPointer(event);
+  };
+  // Show and position the tooltip above the focused element for keyboard users.
+  showTooltipOnFocus = (event) => {
+    if (!this.hasTooltipTarget)
+      return;
+    const target = event.target.closest("[data-tooltip-content]");
+    if (!target)
+      return;
+    this.tooltipTarget.textContent = target.dataset.tooltipContent ?? "";
+    this.tooltipTarget.classList.add("is-visible");
+    this.positionAtElement(target);
+  };
+  hideTooltip = () => {
+    if (!this.hasTooltipTarget)
+      return;
+    this.tooltipTarget.classList.remove("is-visible");
+  };
+  // Position the tooltip relative to the pointer cursor.
+  positionAtPointer(event) {
+    const rect = this.element.getBoundingClientRect();
+    const tipW = this.tooltipTarget.offsetWidth;
+    const tipH = this.tooltipTarget.offsetHeight;
+    const rawLeft = event.clientX - rect.left + 8;
+    const rawTop = event.clientY - rect.top - 28;
+    const left = Math.min(rawLeft, rect.width - tipW - 4);
+    const top = Math.max(rawTop, tipH + 4);
+    this.tooltipTarget.style.left = `${left}px`;
+    this.tooltipTarget.style.top = `${top}px`;
+  }
+  // Position the tooltip centred above a focused SVG element (keyboard navigation).
+  positionAtElement(el) {
+    const containerRect = this.element.getBoundingClientRect();
+    const elRect = el.getBoundingClientRect();
+    const tipW = this.tooltipTarget.offsetWidth;
+    const tipH = this.tooltipTarget.offsetHeight;
+    const rawLeft = elRect.left - containerRect.left + elRect.width / 2 - tipW / 2;
+    const rawTop = elRect.top - containerRect.top - tipH - 8;
+    const left = Math.max(4, Math.min(rawLeft, containerRect.width - tipW - 4));
+    const top = Math.max(4, rawTop);
+    this.tooltipTarget.style.left = `${left}px`;
+    this.tooltipTarget.style.top = `${top}px`;
+  }
+}
+
 function registerMidwestControllers(application) {
   application.register("midwest-card", Card);
   application.register("midwest-banner", Banner);
@@ -3673,7 +3757,8 @@ function registerMidwestControllers(application) {
   application.register("midwest-badge", Badge);
   application.register("midwest-confirmation", ConfirmationController);
   application.register("midwest-avatar-group", AvatarGroup);
+  application.register("midwest-chart", Chart);
 }
 
-export { Banner, Card, CountdownTimer, registerMidwestControllers };
+export { Banner, Card, Chart, CountdownTimer, registerMidwestControllers };
 //# sourceMappingURL=midwest.js.map