185 lines
8.5 KiB
TypeScript
185 lines
8.5 KiB
TypeScript
import { computed, defineComponent, ref } from "vue";
|
|
|
|
export default defineComponent({
|
|
name: "ge-calculator",
|
|
setup() {
|
|
const t3Ratio = ref(1);
|
|
const t4Ratio = ref(4);
|
|
|
|
const MPG_T3_SYN = 25;
|
|
const MPG_T4_SYN = 100;
|
|
|
|
const inputDefs = [
|
|
{
|
|
name: "Grains",
|
|
mpg: 1,
|
|
unit: "",
|
|
step: 0.1,
|
|
},
|
|
{
|
|
name: "Armour, Natural Dessicated Thyroid",
|
|
mpg: 60,
|
|
unit: "mg",
|
|
},
|
|
{
|
|
name: 'Liothyronine (Triiodothyronine, "Cytomel/Cynomel", T3)',
|
|
mpg: MPG_T3_SYN,
|
|
unit: "mcg",
|
|
},
|
|
{
|
|
name: "Levothyroxine (Thyroxine, T4)",
|
|
mpg: MPG_T4_SYN,
|
|
unit: "mcg",
|
|
},
|
|
];
|
|
|
|
const numGrains = ref(2);
|
|
|
|
const compounded = computed(() => {
|
|
const total = t3Ratio.value + t4Ratio.value;
|
|
const t3Proportion = t3Ratio.value / total;
|
|
const t4Proportion = t4Ratio.value / total;
|
|
const grainsSyn = t3Proportion / MPG_T3_SYN + t4Proportion / MPG_T4_SYN;
|
|
const multiplierSyn = numGrains.value / grainsSyn;
|
|
return {
|
|
t3Syn: t3Proportion * multiplierSyn,
|
|
t4Syn: t4Proportion * multiplierSyn,
|
|
};
|
|
});
|
|
|
|
return () => (
|
|
<>
|
|
<header>
|
|
<h1>Thyroid Calculator</h1>
|
|
</header>
|
|
<div class="text-slab">
|
|
<p>
|
|
Use this calculator to convert between different forms and units of thyroid hormone. Common
|
|
synthetic, pure and natural dessicated forms are listed. The last section of the table provides
|
|
input fields for a specified ratio of T3 to T4, and will give the dosages required for both the
|
|
synthetic and pure forms. All dosages given are based on the "Grains" field at the beginning of
|
|
the table, but editing any field will automatically update the rest to keep them in sync.
|
|
</p>
|
|
</div>
|
|
<div class="text-slab ge-calculator">
|
|
<table>
|
|
<tbody>
|
|
{inputDefs.map((_) => (
|
|
<tr key={_.name}>
|
|
<td>
|
|
{_.name}
|
|
</td>
|
|
<td class="right">
|
|
<div style="display: inline-block;">
|
|
<input
|
|
value={_.name === "Grains" ? numGrains.value : _.mpg * numGrains.value}
|
|
onInput={(e) => {
|
|
const val = (e.target as HTMLInputElement).valueAsNumber;
|
|
if (_.name === "Grains") {
|
|
numGrains.value = val;
|
|
} else {
|
|
numGrains.value = _.mpg / val;
|
|
}
|
|
}}
|
|
min="0"
|
|
step={_.step ?? 1}
|
|
type="number"
|
|
/>
|
|
</div>
|
|
<span class="breathe">{_.unit}</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
<tr>
|
|
<td colspan="2">
|
|
<strong>Compounded (T3 and T4, "Cynoplus")</strong>
|
|
</td>
|
|
</tr>
|
|
<tr class="ratios">
|
|
<td>
|
|
Desired Ratio (T3:T4)
|
|
</td>
|
|
<td class="right">
|
|
<div>
|
|
<input
|
|
value={t3Ratio.value}
|
|
onInput={(e) => {
|
|
t3Ratio.value = (e.currentTarget as HTMLInputElement).valueAsNumber;
|
|
}}
|
|
min="0"
|
|
step="1"
|
|
type="number"
|
|
/>
|
|
</div>{" "}
|
|
:{" "}
|
|
<div>
|
|
<input
|
|
value={t4Ratio.value}
|
|
onInput={(e) => {
|
|
t4Ratio.value = (e.currentTarget as HTMLInputElement).valueAsNumber;
|
|
}}
|
|
min="0"
|
|
step="1"
|
|
type="number"
|
|
/>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="synthetic">
|
|
<td>
|
|
Synthetic T3/T4 Combo
|
|
</td>
|
|
<td class="right">
|
|
<div>
|
|
<input
|
|
value={compounded.value.t3Syn}
|
|
onInput={(e) => {
|
|
t4Ratio.value = compounded.value.t4Syn;
|
|
t3Ratio.value = (e.currentTarget as HTMLInputElement).valueAsNumber;
|
|
numGrains.value = t3Ratio.value / MPG_T3_SYN +
|
|
t4Ratio.value / MPG_T4_SYN;
|
|
}}
|
|
min="0"
|
|
step="1"
|
|
type="number"
|
|
/>
|
|
</div>{" "}
|
|
:{" "}
|
|
<div>
|
|
<input
|
|
value={compounded.value.t4Syn}
|
|
onInput={(e) => {
|
|
t3Ratio.value = compounded.value.t3Syn;
|
|
t4Ratio.value = (e.currentTarget as HTMLInputElement).valueAsNumber;
|
|
numGrains.value = t3Ratio.value / MPG_T3_SYN +
|
|
t4Ratio.value / MPG_T4_SYN;
|
|
}}
|
|
min="0"
|
|
step="1"
|
|
type="number"
|
|
/>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="text-slab">
|
|
<strong>Changelog:</strong>
|
|
<p>
|
|
<ul>
|
|
<li>
|
|
November 2024: Migrated to new web framework and fixed some buggy input.
|
|
</li>
|
|
<li>
|
|
13th March 2024: Removed the synthetic/pure distinction as it was confusing and
|
|
unnecessary bloat.
|
|
</li>
|
|
</ul>
|
|
</p>
|
|
</div>
|
|
</>
|
|
);
|
|
},
|
|
});
|