Add centralized unit definitions
This commit is contained in:
@@ -3,6 +3,7 @@
|
|||||||
import type { CalculatorDef } from '$lib/data/calculators';
|
import type { CalculatorDef } from '$lib/data/calculators';
|
||||||
import { page } from '$app/stores';
|
import { page } from '$app/stores';
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
|
import QuickDefinitionCard from '$lib/components/QuickDefinitionCard.svelte';
|
||||||
import QuickConversionExample from '$lib/components/QuickConversionExample.svelte';
|
import QuickConversionExample from '$lib/components/QuickConversionExample.svelte';
|
||||||
import QuickConversionTable from '$lib/components/QuickConversionTable.svelte';
|
import QuickConversionTable from '$lib/components/QuickConversionTable.svelte';
|
||||||
|
|
||||||
@@ -116,6 +117,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<QuickConversionTable {config} />
|
<QuickConversionTable {config} />
|
||||||
<QuickConversionExample {config} />
|
<QuickConversionExample {config} />
|
||||||
|
<QuickDefinitionCard {config} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
67
hdyc-svelte/src/lib/components/QuickDefinitionCard.svelte
Normal file
67
hdyc-svelte/src/lib/components/QuickDefinitionCard.svelte
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { getDefinition } from '$lib/data/unitDefinitions';
|
||||||
|
import type { CalculatorDef } from '$lib/data/calculators';
|
||||||
|
|
||||||
|
export let config: CalculatorDef;
|
||||||
|
|
||||||
|
const label1 = config.labels.in1 || 'Unit 1';
|
||||||
|
const label2 = config.labels.in2 || 'Unit 2';
|
||||||
|
|
||||||
|
const def1 = getDefinition(label1);
|
||||||
|
const def2 = getDefinition(label2);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<section class="definition-card">
|
||||||
|
<h3>Unit definitions</h3>
|
||||||
|
<div class="definition-grid">
|
||||||
|
<article>
|
||||||
|
<strong>{label1}</strong>
|
||||||
|
<p>{def1 ?? `Definition pending for ${label1}.`}</p>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<strong>{label2}</strong>
|
||||||
|
<p>{def2 ?? `Definition pending for ${label2}.`}</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.definition-card {
|
||||||
|
margin: 0 2rem 2rem;
|
||||||
|
padding: 1.25rem 1.5rem;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: var(--section-bg);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.definition-card h3 {
|
||||||
|
margin: 0 0 0.75rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.definition-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.definition-grid article {
|
||||||
|
background: var(--card-bg);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.definition-grid strong {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
margin-bottom: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.definition-grid p {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
54
hdyc-svelte/src/lib/data/unitDefinitions.ts
Normal file
54
hdyc-svelte/src/lib/data/unitDefinitions.ts
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
import { calculators } from './calculators';
|
||||||
|
|
||||||
|
const domainDescriptions: Record<string, string> = {
|
||||||
|
length: 'linear or spatial distance measurement',
|
||||||
|
weight: 'mass or force quantity',
|
||||||
|
temperature: 'thermal energy level',
|
||||||
|
volume: 'three-dimensional capacity',
|
||||||
|
area: 'two-dimensional surface measurement',
|
||||||
|
speed: 'rate of change of position',
|
||||||
|
pressure: 'force exerted per unit area',
|
||||||
|
energy: 'capacity to do work',
|
||||||
|
power: 'rate of energy transfer',
|
||||||
|
data: 'digital information volume',
|
||||||
|
time: 'temporal duration',
|
||||||
|
angle: 'angular measurement',
|
||||||
|
'number-systems': 'numeric representation systems',
|
||||||
|
radiation: 'ionizing emission metrics',
|
||||||
|
electrical: 'electricity-related magnitude',
|
||||||
|
force: 'force or torque measurement',
|
||||||
|
light: 'luminous intensity',
|
||||||
|
other: 'specialized measurement',
|
||||||
|
};
|
||||||
|
|
||||||
|
const definitions: Record<string, string> = {};
|
||||||
|
|
||||||
|
const formatLabel = (label: string): string => {
|
||||||
|
if (!label) return '';
|
||||||
|
return label
|
||||||
|
.replace(/\b([A-Z])/g, ' $1')
|
||||||
|
.replace(/\s+/g, ' ')
|
||||||
|
.trim();
|
||||||
|
};
|
||||||
|
|
||||||
|
const buildDefinition = (label: string, categoryKey: string): string => {
|
||||||
|
if (!label) return '';
|
||||||
|
const desc = domainDescriptions[categoryKey] || 'measurement';
|
||||||
|
return `${label} is used to express ${desc}. Understanding ${label} keeps calculations aligned across the ${categoryKey} domain.`;
|
||||||
|
};
|
||||||
|
|
||||||
|
calculators.forEach(calc => {
|
||||||
|
const { category, labels } = calc;
|
||||||
|
Object.values(labels).forEach(label => {
|
||||||
|
if (!label) return;
|
||||||
|
if (!definitions[label]) {
|
||||||
|
definitions[label] = buildDefinition(label, category);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
export function getDefinition(label: string): string | undefined {
|
||||||
|
return definitions[label];
|
||||||
|
}
|
||||||
|
|
||||||
|
export const unitDefinitions = definitions;
|
||||||
Reference in New Issue
Block a user