@jjlmoya/utils-babies 1.1.0

package/src/tool/baby-percentile-calculator/component.astro

@@ -0,0 +1,388 @@
+---
+import './style.css';
+import type { BabyPercentileCalculatorUI } from './index';
+interface Props { ui: BabyPercentileCalculatorUI; }
+const { ui } = Astro.props;
+---
+<div id="baby-percentile-calculator-root" class="baby-percentile-calculator baby-percentile-calculator-boy" data-ui={JSON.stringify(ui)}>
+  <div class="baby-percentile-calculator-main">
+    <div class="baby-percentile-calculator-left">
+      <span class="baby-percentile-calculator-section-marker">{ui.labelMeasurements}</span>
+
+      <div class="baby-percentile-calculator-input-group">
+        <label class="baby-percentile-calculator-input-label">{ui.labelSex}</label>
+        <div class="baby-percentile-calculator-sex-selector">
+          <button
+            id="bpc-btn-boy"
+            class="baby-percentile-calculator-sex-btn"
+            data-sex="boy"
+            data-active="true"
+            type="button"
+          >{ui.sexBoy}</button>
+          <button
+            id="bpc-btn-girl"
+            class="baby-percentile-calculator-sex-btn"
+            data-sex="girl"
+            data-active="false"
+            type="button"
+          >{ui.sexGirl}</button>
+        </div>
+      </div>
+
+      <div class="baby-percentile-calculator-input-group">
+        <div class="baby-percentile-calculator-unit-nav">
+          <button
+            id="bpc-unit-months"
+            class="baby-percentile-calculator-unit-tab"
+            data-unit="months"
+            data-active="true"
+            type="button"
+          >{ui.unitMonths}</button>
+          <button
+            id="bpc-unit-years"
+            class="baby-percentile-calculator-unit-tab"
+            data-unit="yearsMonths"
+            data-active="false"
+            type="button"
+          >{ui.unitYearsMonths}</button>
+        </div>
+      </div>
+
+      <div class="baby-percentile-calculator-input-group">
+        <div class="baby-percentile-calculator-stepper-box">
+          <button id="bpc-step-minus-years" class="baby-percentile-calculator-btn-step" type="button" data-hidden="true" style="display:none;">-</button>
+          <div id="bpc-years-view" class="baby-percentile-calculator-val-view" style="display:none;">
+            <span id="bpc-years-val" class="baby-percentile-calculator-val-big">0</span>
+            <span class="baby-percentile-calculator-val-sub">años</span>
+          </div>
+          <button id="bpc-step-plus-years" class="baby-percentile-calculator-btn-step" type="button" data-hidden="true" style="display:none;">+</button>
+
+          <button id="bpc-step-minus" class="baby-percentile-calculator-btn-step" type="button">-</button>
+          <div class="baby-percentile-calculator-val-view">
+            <span id="bpc-age-val" class="baby-percentile-calculator-val-big">0</span>
+            <span class="baby-percentile-calculator-val-sub">{ui.labelMonths}</span>
+          </div>
+          <button id="bpc-step-plus" class="baby-percentile-calculator-btn-step" type="button">+</button>
+        </div>
+        <input
+          id="bpc-slider"
+          class="baby-percentile-calculator-slider-line"
+          type="range"
+          min="0"
+          max="60"
+          value="0"
+          step="1"
+        />
+      </div>
+
+      <div class="baby-percentile-calculator-grid-2">
+        <div class="baby-percentile-calculator-input-group">
+          <label for="bpc-weight" class="baby-percentile-calculator-input-label">{ui.labelWeight}</label>
+          <input
+            id="bpc-weight"
+            class="baby-percentile-calculator-num-input"
+            type="number"
+            min="1"
+            max="30"
+            step="0.1"
+            placeholder="3.5"
+          />
+        </div>
+        <div class="baby-percentile-calculator-input-group">
+          <label for="bpc-height" class="baby-percentile-calculator-input-label">{ui.labelHeight}</label>
+          <input
+            id="bpc-height"
+            class="baby-percentile-calculator-num-input"
+            type="number"
+            min="30"
+            max="130"
+            step="0.1"
+            placeholder="50"
+          />
+        </div>
+      </div>
+
+      <div class="baby-percentile-calculator-history-actions">
+        <button id="bpc-btn-save" class="baby-percentile-calculator-btn-secondary" type="button">{ui.btnAddHistory}</button>
+        <button id="bpc-btn-clear" class="baby-percentile-calculator-btn-clear" type="button">{ui.btnClearHistory}</button>
+      </div>
+    </div>
+
+    <div class="baby-percentile-calculator-right">
+      <span class="baby-percentile-calculator-section-marker">{ui.labelDashboard}</span>
+
+      <div class="baby-percentile-calculator-res-grid">
+        <div class="baby-percentile-calculator-res-item">
+          <span class="baby-percentile-calculator-res-title">{ui.labelWeight2}</span>
+          <span id="bpc-res-weight" class="baby-percentile-calculator-percent-val">—</span>
+          <span id="bpc-res-weight-desc" class="baby-percentile-calculator-res-desc">{ui.labelCalculating}</span>
+        </div>
+        <div class="baby-percentile-calculator-res-item">
+          <span class="baby-percentile-calculator-res-title">{ui.labelHeight2}</span>
+          <span id="bpc-res-height" class="baby-percentile-calculator-percent-val">—</span>
+          <span id="bpc-res-height-desc" class="baby-percentile-calculator-res-desc">{ui.labelCalculating}</span>
+        </div>
+        <div class="baby-percentile-calculator-res-item">
+          <span class="baby-percentile-calculator-res-title">{ui.labelBMI}</span>
+          <span id="bpc-res-bmi" class="baby-percentile-calculator-percent-val">—</span>
+          <span id="bpc-res-bmi-desc" class="baby-percentile-calculator-res-desc">{ui.labelCalculating}</span>
+        </div>
+      </div>
+
+      <div id="bpc-alert" class="baby-percentile-calculator-alert">{ui.alertOutOfRange}</div>
+
+      <div class="baby-percentile-calculator-chart-box">
+        <canvas id="bpc-chart"></canvas>
+      </div>
+
+      <p class="baby-percentile-calculator-disclaimer">{ui.disclaimer}</p>
+    </div>
+  </div>
+</div>
+
+<script>
+  import { calculatePercentile, getDescriptionKey, getDataSet, calcBMI, buildChartDatasets } from './logic';
+  import { interpolateLMS } from './lmsData';
+
+  const root = document.getElementById('baby-percentile-calculator-root') as HTMLElement;
+  const ui = JSON.parse(root.dataset.ui as string) as Record<string, string>;
+
+  interface HistoryEntry {
+    sex: string;
+    age: number;
+    weight: number;
+    height: number;
+  }
+
+  interface State {
+    sex: string;
+    age: number;
+    ageUnit: string;
+    weight: number;
+    height: number;
+    history: HistoryEntry[];
+  }
+
+  const LS_KEY = 'jjlmoya-babies-percentile';
+
+  const state: State = {
+    sex: 'boy',
+    age: 0,
+    ageUnit: 'months',
+    weight: 0,
+    height: 0,
+    history: [],
+  };
+
+  let chartInstance: { destroy: () => void; data: { datasets: object[] }; update: () => void } | null = null;
+
+  function getEl(id: string): HTMLElement {
+    return document.getElementById(id) as HTMLElement;
+  }
+
+  function getInput(id: string): HTMLInputElement {
+    return document.getElementById(id) as HTMLInputElement;
+  }
+
+  function renderPercentiles(): void {
+    const dataSet = getDataSet(state.sex);
+    const resWeight = getEl('bpc-res-weight');
+    const resHeight = getEl('bpc-res-height');
+    const resBmi = getEl('bpc-res-bmi');
+    const resWeightDesc = getEl('bpc-res-weight-desc');
+    const resHeightDesc = getEl('bpc-res-height-desc');
+    const resBmiDesc = getEl('bpc-res-bmi-desc');
+    const alertEl = getEl('bpc-alert');
+
+    if (state.weight <= 0 || state.height <= 0) {
+      resWeight.textContent = '—';
+      resHeight.textContent = '—';
+      resBmi.textContent = '—';
+      resWeightDesc.textContent = ui['labelCalculating'] ?? null;
+      resHeightDesc.textContent = ui['labelCalculating'] ?? null;
+      resBmiDesc.textContent = ui['labelCalculating'] ?? null;
+      alertEl.removeAttribute('data-visible');
+      return;
+    }
+
+    const wLms = interpolateLMS(state.age, dataSet.weight);
+    const hLms = interpolateLMS(state.age, dataSet.height);
+    const bmi = calcBMI(state.weight, state.height);
+    const bmiLms = interpolateLMS(state.age, dataSet.bmi);
+
+    const pW = calculatePercentile(state.weight, wLms);
+    const pH = calculatePercentile(state.height, hLms);
+    const pBmi = calculatePercentile(bmi, bmiLms);
+
+    resWeight.textContent = `P${Math.round(pW)}`;
+    resHeight.textContent = `P${Math.round(pH)}`;
+    resBmi.textContent = `P${Math.round(pBmi)}`;
+    resWeightDesc.textContent = ui[getDescriptionKey(pW)] ?? '';
+    resHeightDesc.textContent = ui[getDescriptionKey(pH)] ?? '';
+    resBmiDesc.textContent = ui[getDescriptionKey(pBmi)] ?? '';
+
+    const outOfRange = pW < 3 || pW > 97 || pH < 3 || pH > 97;
+    if (outOfRange) {
+      alertEl.setAttribute('data-visible', 'true');
+    } else {
+      alertEl.removeAttribute('data-visible');
+    }
+  }
+
+  async function initChart(): Promise<void> {
+    const { Chart, registerables } = await import('chart.js/auto');
+    Chart.register(...registerables);
+    const canvas = document.getElementById('bpc-chart') as HTMLCanvasElement;
+    chartInstance = new Chart(canvas, {
+      type: 'line',
+      data: { datasets: buildChartDatasets(state.sex) as never[] },
+      options: {
+        responsive: true,
+        maintainAspectRatio: true,
+        plugins: { legend: { display: false } },
+        scales: {
+          x: { type: 'linear', min: 0, max: 60 },
+          y: { type: 'linear' },
+        },
+      },
+    });
+  }
+
+  function updateChart(): void {
+    if (!chartInstance) return;
+    chartInstance.data.datasets = buildChartDatasets(state.sex) as never[];
+    chartInstance.update();
+  }
+
+  function syncAgeDisplay(): void {
+    const slider = getInput('bpc-slider');
+    slider.value = String(state.age);
+    getEl('bpc-age-val').textContent = String(state.age % 12);
+
+    if (state.ageUnit === 'yearsMonths') {
+      getEl('bpc-years-val').textContent = String(Math.floor(state.age / 12));
+    }
+  }
+
+  function setAge(val: number): void {
+    state.age = Math.max(0, Math.min(60, val));
+    syncAgeDisplay();
+    renderPercentiles();
+    updateChart();
+  }
+
+  function setSex(sex: string): void {
+    state.sex = sex;
+    const btnBoy = getEl('bpc-btn-boy');
+    const btnGirl = getEl('bpc-btn-girl');
+    btnBoy.setAttribute('data-active', sex === 'boy' ? 'true' : 'false');
+    btnGirl.setAttribute('data-active', sex === 'girl' ? 'true' : 'false');
+
+    if (sex === 'boy') {
+      root.classList.add('baby-percentile-calculator-boy');
+    } else {
+      root.classList.remove('baby-percentile-calculator-boy');
+    }
+
+    renderPercentiles();
+    updateChart();
+  }
+
+  function setUnit(unit: string): void {
+    state.ageUnit = unit;
+    const tabMonths = getEl('bpc-unit-months');
+    const tabYears = getEl('bpc-unit-years');
+    tabMonths.setAttribute('data-active', unit === 'months' ? 'true' : 'false');
+    tabYears.setAttribute('data-active', unit === 'yearsMonths' ? 'true' : 'false');
+
+    const yearsControls = [
+      getEl('bpc-step-minus-years'),
+      getEl('bpc-step-plus-years'),
+      getEl('bpc-years-view'),
+    ];
+
+    yearsControls.forEach(el => {
+      if (unit === 'yearsMonths') {
+        el.style.display = '';
+      } else {
+        el.style.display = 'none';
+      }
+    });
+
+    const monthLabel = getEl('bpc-age-val').nextElementSibling as HTMLElement;
+    if (monthLabel) {
+      monthLabel.textContent = (unit === 'yearsMonths' ? ui['labelMonths'] : ui['labelMonths']) ?? null;
+    }
+
+    syncAgeDisplay();
+  }
+
+  function loadHistory(): void {
+    try {
+      const raw = localStorage.getItem(LS_KEY);
+      if (raw) {
+        const parsed = JSON.parse(raw) as HistoryEntry[];
+        state.history = Array.isArray(parsed) ? parsed : [];
+      }
+    } catch {
+      state.history = [];
+    }
+    renderPercentiles();
+  }
+
+  function save(): void {
+    const entry: HistoryEntry = {
+      sex: state.sex,
+      age: state.age,
+      weight: state.weight,
+      height: state.height,
+    };
+    state.history.push(entry);
+    try {
+      localStorage.setItem(LS_KEY, JSON.stringify(state.history));
+    } catch { }
+  }
+
+  function clearHistory(): void {
+    state.history = [];
+    try {
+      localStorage.removeItem(LS_KEY);
+    } catch { }
+  }
+
+  function bindEvents(): void {
+    getEl('bpc-btn-boy').addEventListener('click', () => setSex('boy'));
+    getEl('bpc-btn-girl').addEventListener('click', () => setSex('girl'));
+
+    getEl('bpc-unit-months').addEventListener('click', () => setUnit('months'));
+    getEl('bpc-unit-years').addEventListener('click', () => setUnit('yearsMonths'));
+
+    getEl('bpc-step-minus').addEventListener('click', () => setAge(state.age - 1));
+    getEl('bpc-step-plus').addEventListener('click', () => setAge(state.age + 1));
+
+    getEl('bpc-step-minus-years').addEventListener('click', () => setAge(state.age - 12));
+    getEl('bpc-step-plus-years').addEventListener('click', () => setAge(state.age + 12));
+
+    getInput('bpc-slider').addEventListener('input', (e) => {
+      const val = parseInt((e.target as HTMLInputElement).value, 10);
+      setAge(val);
+    });
+
+    getInput('bpc-weight').addEventListener('input', (e) => {
+      state.weight = parseFloat((e.target as HTMLInputElement).value) || 0;
+      renderPercentiles();
+    });
+
+    getInput('bpc-height').addEventListener('input', (e) => {
+      state.height = parseFloat((e.target as HTMLInputElement).value) || 0;
+      renderPercentiles();
+    });
+
+    getEl('bpc-btn-save').addEventListener('click', () => save());
+    getEl('bpc-btn-clear').addEventListener('click', () => clearHistory());
+  }
+
+  loadHistory();
+  bindEvents();
+  initChart();
+</script>

package/src/tool/baby-percentile-calculator/i18n/en.ts

@@ -0,0 +1,244 @@
+import type { BabyPercentileCalculatorLocaleContent } from '../index';
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+
+const slug = 'baby-weight-height-percentile';
+const title = 'WHO Percentile Calculator for Babies';
+const description = 'Calculate your baby\'s weight, height and BMI percentile using WHO growth charts (0-5 years).';
+const faq = [
+  {
+    question: 'What does the 50th percentile mean?',
+    answer: 'The 50th percentile means the baby is exactly at the median: half of babies the same age and sex weigh or measure more, and half weigh or measure less. It does not mean it is the ideal value, just the central value of the distribution.',
+  },
+  {
+    question: 'Is a low percentile a sign of a problem?',
+    answer: 'Not necessarily. A low percentile (for example P10) can be perfectly normal if it remains stable over time. The growth trend is what matters, not an isolated value. Always consult your pediatrician.',
+  },
+  {
+    question: 'Which growth charts does this calculator use?',
+    answer: 'This calculator uses the WHO Child Growth Standards for children aged 0 to 5 years, based on the Multicentre Growth Reference Study (MGRS).',
+  },
+  {
+    question: 'What is BMI in babies?',
+    answer: 'Body Mass Index (BMI) in babies is the ratio of weight to height squared. Baby BMI percentiles differ from adult ones and must be interpreted using age- and sex-specific charts.',
+  },
+  {
+    question: 'How often should I measure my baby?',
+    answer: 'In the first months, the pediatrician usually monitors growth at each visit. At home you can record weight and height monthly to observe the growth trend.',
+  },
+];
+const howTo = [
+  {
+    name: 'Select the baby\'s sex',
+    text: 'Choose boy or girl to apply the corresponding WHO charts.',
+  },
+  {
+    name: 'Enter the age',
+    text: 'Use the slider or arrows to set the age in months (0-60 months).',
+  },
+  {
+    name: 'Enter weight and height',
+    text: 'Type the weight in kilograms and height in centimetres.',
+  },
+  {
+    name: 'Check the percentiles',
+    text: 'Weight, height and BMI percentiles are calculated automatically using WHO charts.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faq.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howTo.map((step) => ({
+    '@type': 'HowToStep',
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilitiesApplication',
+  operatingSystem: 'Web',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'en',
+};
+
+export const content: BabyPercentileCalculatorLocaleContent = {
+  slug,
+  title,
+  description,
+  ui: {
+    labelMeasurements: 'Measurement Data',
+    labelSex: 'Baby\'s sex',
+    sexBoy: 'Boy',
+    sexGirl: 'Girl',
+    unitMonths: 'Months only',
+    unitYearsMonths: 'Years + months',
+    labelWeight: 'Weight (kg)',
+    labelHeight: 'Height (cm)',
+    btnAddHistory: 'Add to history',
+    btnClearHistory: 'Clear data',
+    labelDashboard: 'Growth Dashboard',
+    labelWeight2: 'Weight',
+    labelHeight2: 'Height',
+    labelBMI: 'BMI',
+    labelCalculating: 'Calculating...',
+    disclaimer: 'Percentiles are a statistical tool only. Always consult your pediatrician to interpret results.',
+    labelLowRange: 'Low range',
+    labelLowNormal: 'Low normal',
+    labelNormal: 'Normal',
+    labelHighNormal: 'High normal',
+    labelHighRange: 'High range',
+    alertOutOfRange: 'Value outside P3-P97 range. Please consult your pediatrician.',
+    labelMonths: 'Months',
+    faqTitle: 'Frequently asked questions',
+    bibliographyTitle: 'References',
+  },
+  seo: [
+    {
+      type: 'title',
+      text: 'WHO Percentile Calculator: Guide to Understanding Your Baby\'s Growth',
+      level: 2,
+    },
+    {
+      type: 'summary',
+      title: '5 key points for interpreting your baby\'s percentiles',
+      items: [
+        'No single percentile defines your baby\'s health: the growth trend over time is what matters.',
+        'Percentiles between P3 and P97 are considered within the statistical normal range.',
+        'BMI in babies follows its own curves and should not be compared with adult reference values.',
+        'WHO charts are based on babies raised in optimal conditions, including exclusive breastfeeding in the first months.',
+        'Always share growth records with your paediatrician for proper clinical interpretation.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'How to measure your baby correctly',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        'Weigh the baby without clothes and on the same scale whenever possible.',
+        'Measure length lying down (recumbent) until 24 months.',
+        'From 2 years of age, measure height in a standing position.',
+        'Take measurements at the same time of day for greater consistency.',
+      ],
+    },
+    {
+      type: 'tip',
+      html: 'A percentile below P3 does not automatically indicate a health problem. The most important thing is to observe whether the growth curve maintains its trend over time.',
+    },
+    {
+      type: 'title',
+      text: 'Interpreting percentiles',
+      level: 3,
+    },
+    {
+      type: 'table',
+      headers: ['Percentile', 'Interpretation', 'Recommended action'],
+      rows: [
+        ['P97 or above', 'High range', 'Discuss with the paediatrician at the next visit'],
+        ['P85 to P97', 'High normal', 'Routine follow-up'],
+        ['P15 to P85', 'Normal', 'No special action required'],
+        ['P3 to P15', 'Low normal', 'Routine follow-up'],
+        ['P3 or below', 'Low range', 'Consult the paediatrician'],
+      ],
+    },
+    {
+      type: 'title',
+      text: 'WHO vs Orbegozo Charts',
+      level: 3,
+    },
+    {
+      type: 'comparative',
+      columns: 2,
+      items: [
+        {
+          title: 'WHO Charts',
+          description: 'International standard based on babies from 6 countries raised in optimal conditions.',
+          points: [
+            'Validated international standard',
+            'Based on babies from 6 countries in optimal conditions',
+            'Up to date with current scientific support',
+            'May not reflect local genetic variations',
+          ],
+        },
+        {
+          title: 'Orbegozo Charts',
+          description: 'Charts adapted to the Spanish population, widely used in previous decades.',
+          points: [
+            'Adapted to the Spanish population',
+            'Widely used in Spain in previous decades',
+            'Based on older reference population',
+            'Lower international adoption',
+          ],
+        },
+      ],
+    },
+    {
+      type: 'stats',
+      columns: 3,
+      items: [
+        { value: 'WHO 0-5 years', label: 'Reference standard' },
+        { value: 'Growth trend', label: 'Key variable' },
+        { value: 'LMS parameters', label: 'Technical precision' },
+      ],
+    },
+    {
+      type: 'glossary',
+      items: [
+        {
+          term: 'Z-Score',
+          definition: 'Number of standard deviations a value is from the mean of the reference population. A Z-Score of 0 is equivalent to the 50th percentile.',
+        },
+        {
+          term: 'Harmony',
+          definition: 'Appropriate proportion between weight and height. A baby may have a low weight percentile but still be harmonious if their height percentile is similarly low.',
+        },
+        {
+          term: 'Anthropometry',
+          definition: 'Set of body measurements (weight, height, head circumference, BMI) used to evaluate growth and nutritional status.',
+        },
+        {
+          term: 'LMS parameters',
+          definition: 'Statistical method (L=Box-Cox, M=median, S=coefficient of variation) used by the WHO to build percentile tables and convert any measurement into a Z-Score.',
+        },
+      ],
+    },
+  ],
+  faqTitle: "Frequently asked questions",
+  faq,
+  bibliographyTitle: "References",
+  bibliography: [
+    {
+      name: 'WHO Child Growth Standards: Methods and development',
+      url: 'https://www.who.int/publications/i/item/924154693X',
+    },
+    {
+      name: 'WHO Child Growth Standards: Length/height-for-age, weight-for-age, weight-for-length, weight-for-height and body mass index-for-age',
+      url: 'https://www.who.int/tools/child-growth-standards/standards',
+    },
+    {
+      name: 'Comparison of the WHO Child Growth Standards and the CDC 2000 Growth Charts - de Onis M et al.',
+      url: 'https://doi.org/10.1093/jn/137.1.144S',
+    },
+  ],
+  howTo,
+  schemas: [faqSchema as any, howToSchema as any, appSchema],
+};