@jjlmoya/utils-health 1.21.0 → 1.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-health",
-    "version": "1.21.0",
+    "version": "1.22.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/index.ts

@@ -1,6 +1,8 @@
 import type { HealthCategoryEntry } from '../types';
 import { bmiCalculator } from '../tool/bmiCalculator/entry';
 import { bodyAdiposityIndexCalculator } from '../tool/bodyAdiposityIndexCalculator/entry';
+import { waistHipRatioCalculator } from '../tool/waistHipRatioCalculator/entry';
+import { waistHeightRatioCalculator } from '../tool/waistHeightRatioCalculator/entry';
 import { daltonismSimulator } from '../tool/daltonismSimulator/entry';
 import { tinnitusReliever } from '../tool/tinnitusReliever/entry';
 import { breathingVisualizer } from '../tool/breathingVisualizer/entry';
@@ -18,7 +20,7 @@ import { metabolicAgeCalculator } from '../tool/metabolicAgeCalculator/entry';
 
 export const healthCategory: HealthCategoryEntry = {
   icon: 'mdi:heart-pulse',
-  tools: [bmiCalculator, bodyAdiposityIndexCalculator, leanBodyMassCalculator, metabolicAgeCalculator, caloricDeficitCalculator, dailyProteinCalculator, daltonismSimulator, tinnitusReliever, breathingVisualizer, caffeineTracker, waterPurifier, digestionStopwatch, binauralTuner, pelliRobsonTest, peripheralVisionTrainer, epworthSleepinessScale],
+  tools: [bmiCalculator, bodyAdiposityIndexCalculator, waistHipRatioCalculator, waistHeightRatioCalculator, leanBodyMassCalculator, metabolicAgeCalculator, caloricDeficitCalculator, dailyProteinCalculator, daltonismSimulator, tinnitusReliever, breathingVisualizer, caffeineTracker, waterPurifier, digestionStopwatch, binauralTuner, pelliRobsonTest, peripheralVisionTrainer, epworthSleepinessScale],
   i18n: {
     en: () => import('./i18n/en').then((m) => m.content),
     es: () => import('./i18n/es').then((m) => m.content),

package/src/entries.ts

@@ -2,6 +2,8 @@ export { binauralTuner } from './tool/binauralTuner/entry';
 export { bloodUnitConverter } from './tool/bloodUnitConverter/entry';
 export { bmiCalculator } from './tool/bmiCalculator/entry';
 export { bodyAdiposityIndexCalculator } from './tool/bodyAdiposityIndexCalculator/entry';
+export { waistHipRatioCalculator } from './tool/waistHipRatioCalculator/entry';
+export { waistHeightRatioCalculator } from './tool/waistHeightRatioCalculator/entry';
 export { breathingVisualizer } from './tool/breathingVisualizer/entry';
 export { caffeineTracker } from './tool/caffeineTracker/entry';
 export { caloricDeficitCalculator } from './tool/caloricDeficitCalculator/entry';
@@ -24,6 +26,8 @@ import { binauralTuner } from './tool/binauralTuner/entry';
 import { bloodUnitConverter } from './tool/bloodUnitConverter/entry';
 import { bmiCalculator } from './tool/bmiCalculator/entry';
 import { bodyAdiposityIndexCalculator } from './tool/bodyAdiposityIndexCalculator/entry';
+import { waistHipRatioCalculator } from './tool/waistHipRatioCalculator/entry';
+import { waistHeightRatioCalculator } from './tool/waistHeightRatioCalculator/entry';
 import { breathingVisualizer } from './tool/breathingVisualizer/entry';
 import { caffeineTracker } from './tool/caffeineTracker/entry';
 import { caloricDeficitCalculator } from './tool/caloricDeficitCalculator/entry';
@@ -41,4 +45,4 @@ import { screenDecompressionTime } from './tool/screenDecompressionTime/entry';
 import { tinnitusReliever } from './tool/tinnitusReliever/entry';
 import { ubeCalculator } from './tool/ubeCalculator/entry';
 import { waterPurifier } from './tool/waterPurifier/entry';
-export const ALL_ENTRIES = [binauralTuner, bloodUnitConverter, bmiCalculator, bodyAdiposityIndexCalculator, breathingVisualizer, caffeineTracker, caloricDeficitCalculator, dailyProteinCalculator, daltonismSimulator, digestionStopwatch, epworthSleepinessScale, hydrationCalculator, leanBodyMassCalculator, metabolicAgeCalculator, pelliRobsonTest, peripheralVisionTrainer, readingDistanceCalculator, screenDecompressionTime, tinnitusReliever, ubeCalculator, waterPurifier];
+export const ALL_ENTRIES = [binauralTuner, bloodUnitConverter, bmiCalculator, bodyAdiposityIndexCalculator, waistHipRatioCalculator, waistHeightRatioCalculator, breathingVisualizer, caffeineTracker, caloricDeficitCalculator, dailyProteinCalculator, daltonismSimulator, digestionStopwatch, epworthSleepinessScale, hydrationCalculator, leanBodyMassCalculator, metabolicAgeCalculator, pelliRobsonTest, peripheralVisionTrainer, readingDistanceCalculator, screenDecompressionTime, tinnitusReliever, ubeCalculator, waterPurifier];

package/src/index.ts

@@ -16,6 +16,8 @@ export * from './tool/bloodUnitConverter';
 export * from './tool/readingDistanceCalculator';
 export * from './tool/hydrationCalculator';
 export * from './tool/bodyAdiposityIndexCalculator';
+export * from './tool/waistHipRatioCalculator';
+export * from './tool/waistHeightRatioCalculator';
 export * from './tool/dailyProteinCalculator';
 export * from './tool/leanBodyMassCalculator';
 export * from './tool/metabolicAgeCalculator';

package/src/tests/locale_completeness.test.ts

@@ -35,7 +35,7 @@ describe('Locale Completeness Validation', () => {
     });
   });
 
-  it('all 21 tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(21);
+  it('all 23 tools registered', () => {
+    expect(ALL_TOOLS.length).toBe(23);
   });
 });

package/src/tests/tool_validation.test.ts

@@ -4,8 +4,8 @@ import { healthCategory } from '../data';
 
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
-    it('should have 21 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(21);
+    it('should have 23 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(23);
     });
 
     it('healthCategory should be defined', () => {

package/src/tool/waistHeightRatioCalculator/bibliography.astro

@@ -0,0 +1,14 @@
+---
+import { Bibliography } from '@jjlmoya/utils-shared';
+import { waistHeightRatioCalculator } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const content = await waistHeightRatioCalculator.i18n[locale]?.();
+---
+
+{content && <Bibliography links={content.bibliography} />}

package/src/tool/waistHeightRatioCalculator/bibliography.ts

@@ -0,0 +1,16 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'WHO: Waist circumference and waist-hip ratio expert consultation',
+    url: 'https://apps.who.int/iris/handle/10665/44583',
+  },
+  {
+    name: 'NICE guideline: Obesity identification and classification',
+    url: 'https://www.nice.org.uk/guidance/ng246/chapter/Recommendations',
+  },
+  {
+    name: 'Wikipedia: Waist-to-height ratio',
+    url: 'https://en.wikipedia.org/wiki/Waist-to-height_ratio',
+  },
+];

package/src/tool/waistHeightRatioCalculator/component.astro

@@ -0,0 +1,300 @@
+---
+import { Icon } from 'astro-icon/components';
+import type { WaistHeightRatioCalculatorUI } from './ui';
+import './waist-height-ratio-calculator.css';
+
+interface Props {
+  locale?: string;
+  ui?: Record<string, unknown>;
+}
+
+const t = (Astro.props.ui || {}) as WaistHeightRatioCalculatorUI;
+---
+
+<div class="whtr" data-ui={JSON.stringify(t)}>
+  <div class="whtr__panel" data-level="healthy">
+    <div class="whtr__measure" aria-label={t.tapeAriaLabel}>
+      <div class="whtr__tape">
+        <div class="whtr__ticks" aria-hidden="true">
+          {Array.from({ length: 13 }).map((_, index) => <span style={`--i:${index}`}></span>)}
+        </div>
+        <svg class="whtr__person" viewBox="0 0 180 300" role="img" aria-hidden="true">
+          <defs>
+            <linearGradient id="whtrBodyGradient" x1="0" x2="1" y1="0" y2="1">
+              <stop offset="0" stop-color="currentColor" stop-opacity="0.16" />
+              <stop offset="0.56" stop-color="currentColor" stop-opacity="0.34" />
+              <stop offset="1" stop-color="currentColor" stop-opacity="0.2" />
+            </linearGradient>
+          </defs>
+          <circle class="whtr__body-shape" cx="90" cy="31" r="24" />
+          <path
+            class="whtr__body-shape whtr__torso"
+            d="M58 66 C69 53 111 53 122 66 C135 82 137 111 124 133 C116 147 118 166 134 188 C147 207 150 242 139 276 L116 276 C121 240 113 213 96 195 C92 191 88 191 84 195 C67 213 59 240 64 276 L41 276 C30 242 33 207 46 188 C62 166 64 147 56 133 C43 111 45 82 58 66 Z"
+          />
+          <path class="whtr__arm" d="M58 74 C35 103 29 151 40 203" />
+          <path class="whtr__arm" d="M122 74 C145 103 151 151 140 203" />
+          <ellipse id="whtr-waist-band" class="whtr__waist-band" cx="90" cy="137" rx="36" ry="10" />
+          <ellipse id="whtr-hip-band" class="whtr__hip-band" cx="90" cy="190" rx="56" ry="13" />
+        </svg>
+        <div class="whtr__half-line" id="whtr-half-line">
+          <strong>{t.halfHeightLabel}</strong>
+          <span id="whtr-half-value">85 cm</span>
+        </div>
+        <div class="whtr__waist-line" id="whtr-waist-line">
+          <strong>{t.currentWaistLabel}</strong>
+          <span id="whtr-waist-tag">82 cm</span>
+        </div>
+      </div>
+      <div class="whtr__rule">
+        <Icon name="mdi:target-variant" />
+        <span>{t.safeWaistLabel}</span>
+        <strong id="whtr-safe-limit">85 cm</strong>
+      </div>
+    </div>
+
+    <div class="whtr__controls">
+      <div class="whtr__unit" role="group" aria-label={t.unitSystemLabel}>
+        <button class="whtr__unit-btn whtr__unit-btn--active" type="button" data-unit="metric">{t.unitMetric}</button>
+        <button class="whtr__unit-btn" type="button" data-unit="imperial">{t.unitImperial}</button>
+      </div>
+
+      <label class="whtr__field">
+        <span class="whtr__field-top"><span>{t.labelHeight}</span><strong id="whtr-height-value">{t.initialHeight}</strong></span>
+        <input id="whtr-height" class="whtr__range" type="range" min="90" max="220" value="170" />
+      </label>
+
+      <label class="whtr__field">
+        <span class="whtr__field-top"><span>{t.labelWaist}</span><strong id="whtr-waist-value">{t.initialWaist}</strong></span>
+        <input id="whtr-waist" class="whtr__range" type="range" min="35" max="160" value="82" />
+      </label>
+
+      <div class="whtr__status">
+        <div>
+          <span>{t.ratioLabel}</span>
+          <strong id="whtr-ratio">{t.initialRatio}</strong>
+        </div>
+        <div>
+          <span>{t.riskLabel}</span>
+          <strong id="whtr-level">{t.levelHealthy}</strong>
+        </div>
+        <p id="whtr-desc">{t.descHealthy}</p>
+      </div>
+    </div>
+
+    <div class="whtr__notes">
+      <div class="whtr__note">
+        <Icon name="mdi:function-variant" />
+        <p><strong>{t.formulaLabel}</strong> {t.formulaText}</p>
+      </div>
+      <div class="whtr__note">
+        <Icon name="mdi:tape-measure" />
+        <p><strong>{t.ruleLabel}</strong> {t.ruleText}</p>
+      </div>
+      <div class="whtr__note">
+        <Icon name="mdi:human-handsup" />
+        <p><strong>{t.measurementLabel}</strong> {t.measurementText}</p>
+      </div>
+      <div class="whtr__note whtr__note--alert">
+        <Icon name="mdi:alert-circle-outline" />
+        <p><strong>{t.noteLabel}</strong> {t.noteText}</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  type Unit = 'metric' | 'imperial';
+  type Level = 'veryThin' | 'healthy' | 'overweight' | 'obese';
+
+  interface WHtRElements {
+    panel: HTMLElement;
+    height: HTMLInputElement;
+    waist: HTMLInputElement;
+    heightValue: HTMLElement;
+    waistValue: HTMLElement;
+    halfValue: HTMLElement;
+    waistTag: HTMLElement;
+    safeLimit: HTMLElement;
+    ratio: HTMLElement;
+    level: HTMLElement;
+    desc: HTMLElement;
+    halfLine: HTMLElement;
+    waistLine: HTMLElement;
+    waistBand: SVGEllipseElement;
+    hipBand: SVGEllipseElement;
+    unitBtns: NodeListOf<HTMLButtonElement>;
+  }
+
+  interface WHtRState {
+    unit: Unit;
+    heightCm: number;
+    waistCm: number;
+  }
+
+  const STORAGE_KEY = 'whtr_state';
+
+  function required<T extends Element>(container: Element, selector: string): T {
+    const element = container.querySelector<T>(selector);
+    if (!element) throw new Error(selector);
+    return element;
+  }
+
+  function cmToIn(cm: number): number {
+    return cm / 2.54;
+  }
+
+  function inToCm(inches: number): number {
+    return inches * 2.54;
+  }
+
+  function isUnit(value: unknown): value is Unit {
+    return value === 'metric' || value === 'imperial';
+  }
+
+  function clamp(value: number, min: number, max: number): number {
+    return Math.max(min, Math.min(max, value));
+  }
+
+  function classify(value: number): Level {
+    if (value < 0.4) return 'veryThin';
+    if (value < 0.5) return 'healthy';
+    if (value < 0.6) return 'overweight';
+    return 'obese';
+  }
+
+  function getElements(container: Element): WHtRElements | null {
+    try {
+      return {
+        panel: required<HTMLElement>(container, '.whtr__panel'),
+        height: required<HTMLInputElement>(container, '#whtr-height'),
+        waist: required<HTMLInputElement>(container, '#whtr-waist'),
+        heightValue: required<HTMLElement>(container, '#whtr-height-value'),
+        waistValue: required<HTMLElement>(container, '#whtr-waist-value'),
+        halfValue: required<HTMLElement>(container, '#whtr-half-value'),
+        waistTag: required<HTMLElement>(container, '#whtr-waist-tag'),
+        safeLimit: required<HTMLElement>(container, '#whtr-safe-limit'),
+        ratio: required<HTMLElement>(container, '#whtr-ratio'),
+        level: required<HTMLElement>(container, '#whtr-level'),
+        desc: required<HTMLElement>(container, '#whtr-desc'),
+        halfLine: required<HTMLElement>(container, '#whtr-half-line'),
+        waistLine: required<HTMLElement>(container, '#whtr-waist-line'),
+        waistBand: required<SVGEllipseElement>(container, '#whtr-waist-band'),
+        hipBand: required<SVGEllipseElement>(container, '#whtr-hip-band'),
+        unitBtns: container.querySelectorAll<HTMLButtonElement>('.whtr__unit-btn'),
+      };
+    } catch {
+      return null;
+    }
+  }
+
+  function formatLength(cm: number, unit: Unit, ui: Record<string, string>): string {
+    if (unit === 'imperial') return `${cmToIn(cm).toFixed(1)} ${ui.unitIn}`;
+    return `${Math.round(cm)} ${ui.unitCm}`;
+  }
+
+  function loadState(): WHtRState {
+    const fallback: WHtRState = { unit: 'metric', heightCm: 170, waistCm: 82 };
+    try {
+      const raw = window.localStorage.getItem(STORAGE_KEY);
+      if (!raw) return fallback;
+      const saved = JSON.parse(raw) as Partial<WHtRState>;
+      return {
+        unit: isUnit(saved.unit) ? saved.unit : fallback.unit,
+        heightCm: clamp(Number(saved.heightCm) || fallback.heightCm, 90, 220),
+        waistCm: clamp(Number(saved.waistCm) || fallback.waistCm, 35, 160),
+      };
+    } catch {
+      return fallback;
+    }
+  }
+
+  function saveState(state: WHtRState) {
+    try {
+      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+    } catch {
+    }
+  }
+
+  function syncRanges(elements: WHtRElements, state: WHtRState) {
+    if (state.unit === 'imperial') {
+      elements.height.min = '35';
+      elements.height.max = '87';
+      elements.height.step = '0.5';
+      elements.height.value = cmToIn(state.heightCm).toFixed(1);
+      elements.waist.min = '14';
+      elements.waist.max = '63';
+      elements.waist.step = '0.5';
+      elements.waist.value = cmToIn(state.waistCm).toFixed(1);
+    } else {
+      elements.height.min = '90';
+      elements.height.max = '220';
+      elements.height.step = '1';
+      elements.height.value = String(Math.round(state.heightCm));
+      elements.waist.min = '35';
+      elements.waist.max = '160';
+      elements.waist.step = '1';
+      elements.waist.value = String(Math.round(state.waistCm));
+    }
+  }
+
+  function syncButtons(elements: WHtRElements, state: WHtRState) {
+    elements.unitBtns.forEach((btn) => btn.classList.toggle('whtr__unit-btn--active', btn.dataset.unit === state.unit));
+  }
+
+  function render(elements: WHtRElements, state: WHtRState, ui: Record<string, string>) {
+    const ratio = state.waistCm / state.heightCm;
+    const rounded = Math.round(ratio * 100) / 100;
+    const level = classify(ratio);
+    const halfHeight = state.heightCm / 2;
+    const waistPosition = clamp((state.waistCm / state.heightCm) * 100, 18, 86);
+    const copy = {
+      veryThin: { label: ui.levelVeryThin, desc: ui.descVeryThin },
+      healthy: { label: ui.levelHealthy, desc: ui.descHealthy },
+      overweight: { label: ui.levelOverweight, desc: ui.descOverweight },
+      obese: { label: ui.levelObese, desc: ui.descObese },
+    };
+
+    elements.heightValue.textContent = formatLength(state.heightCm, state.unit, ui);
+    elements.waistValue.textContent = formatLength(state.waistCm, state.unit, ui);
+    elements.halfValue.textContent = formatLength(halfHeight, state.unit, ui);
+    elements.waistTag.textContent = formatLength(state.waistCm, state.unit, ui);
+    elements.safeLimit.textContent = formatLength(halfHeight, state.unit, ui);
+    elements.ratio.textContent = rounded.toFixed(2);
+    elements.level.textContent = copy[level].label;
+    elements.desc.textContent = copy[level].desc;
+    elements.panel.dataset.level = level;
+    elements.halfLine.style.top = '50%';
+    elements.waistLine.style.top = `${waistPosition}%`;
+    elements.waistBand.setAttribute('rx', String(clamp(28 + ratio * 30, 34, 55)));
+    elements.hipBand.setAttribute('rx', String(clamp(49 + ratio * 18, 54, 64)));
+  }
+
+  function initWHtR(container: Element) {
+    const ui = JSON.parse((container as HTMLElement).dataset.ui || '{}') as Record<string, string>;
+    const elements = getElements(container);
+    if (!elements) return;
+    const state = loadState();
+    const update = () => {
+      state.heightCm = state.unit === 'imperial' ? inToCm(Number(elements.height.value)) : Number(elements.height.value);
+      state.waistCm = state.unit === 'imperial' ? inToCm(Number(elements.waist.value)) : Number(elements.waist.value);
+      render(elements, state, ui);
+      saveState(state);
+    };
+
+    elements.unitBtns.forEach((btn) => {
+      btn.addEventListener('click', () => {
+        state.unit = btn.dataset.unit as Unit;
+        syncButtons(elements, state);
+        syncRanges(elements, state);
+        update();
+      });
+    });
+    elements.height.addEventListener('input', update);
+    elements.waist.addEventListener('input', update);
+    syncButtons(elements, state);
+    syncRanges(elements, state);
+    update();
+  }
+
+  document.querySelectorAll('.whtr').forEach(initWHtR);
+</script>

package/src/tool/waistHeightRatioCalculator/entry.ts

@@ -0,0 +1,27 @@
+import type { HealthToolEntry } from '../../types';
+import type { WaistHeightRatioCalculatorUI } from './ui';
+
+export const waistHeightRatioCalculator: HealthToolEntry<WaistHeightRatioCalculatorUI> = {
+  id: 'waistHeightRatioCalculator',
+  icons: {
+    bg: 'mdi:tape-measure',
+    fg: 'mdi:human-male-height',
+  },
+  i18n: {
+    de: () => import('./i18n/de').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+  },
+};