@jjlmoya/utils-finance 1.16.0 → 1.18.0

package/src/tool/profitability/component.astro

@@ -0,0 +1,249 @@
+---
+import type { KnownLocale } from '../../types';
+import type { ProfitabilityUI } from './ui';
+
+interface Props {
+  locale?: KnownLocale;
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as ProfitabilityUI;
+---
+
+<div
+  class="prof-root"
+  data-label-positive={t.labelPositiveResult}
+  data-label-negative={t.labelNegativeResult}
+  data-label-linear={t.labelLinearGrowth}
+  data-label-exponential={t.labelExponentialGrowth}
+  data-label-copied={t.labelCopied}
+  data-label-copy={t.labelCopyResult}
+  data-locale={Astro.props.locale || 'en'}
+>
+  <div id="prof-card" class="prof-card positive">
+    <div class="prof-grid">
+      <div class="prof-inputs">
+        <div class="prof-input-group">
+          <div class="prof-label-row">
+            <label class="prof-label">{t.labelInitialInvestment}</label>
+            <select id="prof-currency-select" class="prof-currency-select">
+              <option value="USD">USD ($)</option>
+              <option value="EUR">EUR (€)</option>
+              <option value="GBP">GBP (£)</option>
+              <option value="JPY">JPY (¥)</option>
+              <option value="CNY">CNY (元)</option>
+              <option value="RUB">RUB (₽)</option>
+              <option value="KRW">KRW (₩)</option>
+              <option value="TRY">TRY (₺)</option>
+              <option value="PLN">PLN (zł)</option>
+              <option value="SEK">SEK (kr)</option>
+              <option value="IDR">IDR (Rp)</option>
+            </select>
+          </div>
+          <input type="number" id="prof-initial" value="10000" class="prof-input-field" />
+        </div>
+
+        <div class="prof-input-group">
+          <label class="prof-label">{t.labelFinalValue}</label>
+          <input type="number" id="prof-final" value="15000" class="prof-input-field" />
+        </div>
+
+        <div class="prof-input-group">
+          <label class="prof-label">{t.labelTimeSelection}</label>
+          <div class="prof-time-row">
+            <input type="number" id="prof-time-value" value="3" class="prof-input-field" style="flex: 2;" />
+            <select id="prof-time-unit" class="prof-unit-select" style="flex: 1;">
+              <option value="years">{t.labelYears}</option>
+              <option value="months">{t.labelMonths}</option>
+              <option value="days">{t.labelDays}</option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <div class="prof-results">
+        <div class="prof-main-metric">
+          <div id="prof-status" class="prof-status-badge positive">{t.labelPositiveResult}</div>
+          <div id="prof-roi" class="prof-metric-val">0%</div>
+          <div class="prof-label">{t.labelROI}</div>
+        </div>
+
+        <div class="prof-submetrics">
+          <div class="prof-submetric-card">
+            <span class="prof-label">{t.labelCAGR}</span>
+            <span id="prof-cagr" class="prof-submetric-val">0%</span>
+          </div>
+          <div class="prof-submetric-card">
+            <span class="prof-label">{t.labelNetProfit}</span>
+            <span id="prof-net" class="prof-submetric-val">0</span>
+          </div>
+        </div>
+
+        <button id="prof-copy" class="prof-copy-btn">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
+          <span>{t.labelCopyResult}</span>
+        </button>
+      </div>
+    </div>
+
+    <div class="prof-chart-wrap">
+      <canvas id="prof-chart"></canvas>
+    </div>
+  </div>
+</div>
+
+<script>
+  import { ProfitabilityCalculator } from './logic';
+  import type { ProfitabilityResult } from './logic';
+  import Chart from 'chart.js/auto';
+
+  const root = document.querySelector('.prof-root') as HTMLElement;
+  const initialIn = document.getElementById('prof-initial') as HTMLInputElement;
+  const finalIn = document.getElementById('prof-final') as HTMLInputElement;
+  const timeIn = document.getElementById('prof-time-value') as HTMLInputElement;
+  const unitIn = document.getElementById('prof-time-unit') as HTMLSelectElement;
+  const copyBtn = document.getElementById('prof-copy') as HTMLButtonElement;
+  const card = document.getElementById('prof-card');
+  const statusOut = document.getElementById('prof-status');
+  const roiOut = document.getElementById('prof-roi');
+  const cagrOut = document.getElementById('prof-cagr');
+  const netOut = document.getElementById('prof-net');
+  const currencySelect = document.getElementById('prof-currency-select') as HTMLSelectElement;
+  const ctx = document.getElementById('prof-chart') as HTMLCanvasElement;
+
+  const labelPositive = root.dataset.labelPositive || '';
+  const labelNegative = root.dataset.labelNegative || '';
+  const labelLinear = root.dataset.labelLinear || '';
+  const labelExponential = root.dataset.labelExponential || '';
+  const labelCopied = root.dataset.labelCopied || '';
+  const labelCopy = root.dataset.labelCopy || '';
+
+  let chart: Chart | null = null;
+
+  const updateTextValues = (result: ProfitabilityResult) => {
+    const currencyCode = currencySelect.value;
+    const locale = root.dataset.locale || 'en';
+    const formatter = new Intl.NumberFormat(locale, {
+      style: 'currency',
+      currency: currencyCode,
+      maximumFractionDigits: 0
+    });
+
+    if (roiOut) roiOut.innerText = `${result.roi > 0 ? '+' : ''}${result.roi}%`;
+    if (cagrOut) cagrOut.innerText = `${result.cagr > 0 ? '+' : ''}${result.cagr}%`;
+    if (netOut) netOut.innerText = formatter.format(result.netProfit);
+  };
+
+  const updateStatusUI = (result: ProfitabilityResult) => {
+    const statusClass = result.isPositive ? 'positive' : 'negative';
+    if (card) card.className = `prof-card ${statusClass}`;
+    if (statusOut) {
+      statusOut.className = `prof-status-badge ${statusClass}`;
+      statusOut.innerText = result.isPositive ? labelPositive : labelNegative;
+    }
+  };
+
+  const updateUI = (result: ProfitabilityResult) => {
+    updateTextValues(result);
+    updateStatusUI(result);
+  };
+
+  const getChartDatasets = (linearData: number[], exponentialData: number[]) => [
+    {
+      label: labelLinear,
+      data: linearData,
+      borderColor: '#94a3b8',
+      borderDash: [5, 5],
+      tension: 0,
+      pointRadius: 0
+    },
+    {
+      label: labelExponential,
+      data: exponentialData,
+      borderColor: '#10b981',
+      backgroundColor: 'rgba(16, 185, 129, 0.1)',
+      fill: true,
+      tension: 0.4,
+      pointRadius: 0
+    }
+  ];
+
+  const getChartOptions = () => ({
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: { legend: { position: 'bottom' as const, labels: { font: { family: 'Outfit', weight: 'bold' } } } },
+    scales: { 
+      y: { grid: { color: 'rgba(0,0,0,0.05)' } }, 
+      x: { grid: { display: false }, title: { display: true, text: 'Years', font: { weight: 'bold' } } } 
+    }
+  });
+
+  const updateChart = (initial: number, final: number, years: number, cagr: number) => {
+    const steps = 12;
+    const labels = Array.from({ length: steps + 1 }, (_, i) => (years * i / steps).toFixed(1));
+    const linearData = labels.map((_, i) => initial + (final - initial) * i / steps);
+    const exponentialData = labels.map((_, i) => initial * Math.pow(1 + cagr / 100, years * i / steps));
+
+    if (chart) {
+      chart.data.labels = labels;
+      chart.data.datasets[0].data = linearData;
+      chart.data.datasets[1].data = exponentialData;
+      chart.update();
+    } else {
+      chart = new Chart(ctx, {
+        type: 'line',
+        data: { labels, datasets: getChartDatasets(linearData, exponentialData) },
+        options: getChartOptions() as Parameters<typeof Chart>[1]['options'],
+      });
+    }
+  };
+
+  const update = () => {
+    const initial = parseFloat(initialIn.value) || 0;
+    const final = parseFloat(finalIn.value) || 0;
+    const time = parseFloat(timeIn.value) || 0;
+    const unit = unitIn.value as 'years' | 'months' | 'days';
+
+    const result = ProfitabilityCalculator.calculate({
+      initialInvestment: initial,
+      finalValue: final,
+      timeValue: time,
+      timeUnit: unit
+    });
+
+    updateUI(result);
+    updateChart(initial, final, result.years, result.cagr);
+  };
+
+  [initialIn, finalIn, timeIn, unitIn, currencySelect].forEach(el => el.addEventListener('input', update));
+
+  copyBtn.addEventListener('click', () => {
+    const text = `Investment Performance: ROI ${roiOut?.innerText}, CAGR ${cagrOut?.innerText} over ${timeIn.value} ${unitIn.value}. Total net: ${netOut?.innerText}`;
+    navigator.clipboard.writeText(text).then(() => {
+      const span = copyBtn.querySelector('span');
+      if (span) {
+        span.innerText = labelCopied;
+        setTimeout(() => { span.innerText = labelCopy; }, 2000);
+      }
+    });
+  });
+
+  const preselectCurrency = () => {
+    const locale = root.dataset.locale || 'en';
+    const mapping: Record<string, string> = {
+      es: 'EUR', de: 'EUR', fr: 'EUR', it: 'EUR', pt: 'EUR', nl: 'EUR',
+      en: 'USD',
+      tr: 'TRY', pl: 'PLN', sv: 'SEK', id: 'IDR',
+      ru: 'RUB', ja: 'JPY', zh: 'CNY', ko: 'KRW'
+    };
+    if (mapping[locale]) currencySelect.value = mapping[locale];
+  };
+
+  preselectCurrency();
+  update();
+</script>
+
+<style>
+  @import './profitability-calculator.css';
+</style>

package/src/tool/profitability/entry.ts

@@ -0,0 +1,27 @@
+import type { FinanceToolEntry } from '../../types';
+import type { ProfitabilityUI } from './ui';
+
+export const profitability: FinanceToolEntry<ProfitabilityUI> = {
+  id: 'profitability-calculator-roi-cagr',
+  icons: {
+    bg: 'mdi:trending-up',
+    fg: 'mdi:chart-line',
+  },
+  i18n: {
+    en: () => import('./i18n/en').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    de: () => import('./i18n/de').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+  },
+};

package/src/tool/profitability/i18n/de.ts

@@ -0,0 +1,116 @@
+import type { ProfitabilityUI } from '../ui';
+import type { ToolLocaleContent } from '../../../types';
+
+export const ui: ProfitabilityUI = {
+  labelInitialInvestment: 'Anfangsinvestition',
+  labelFinalValue: 'Endwert / Aktueller Kontostand',
+  labelTimeSelection: 'Investitionsdauer',
+  labelYears: 'Jahre',
+  labelMonths: 'Monate',
+  labelDays: 'Tage',
+  labelROI: 'Rentabilität (ROI)',
+  labelCAGR: 'Jährliche Wachstumsrate (CAGR)',
+  labelNetProfit: 'Nettogewinn',
+  labelLinearGrowth: 'Lineares Wachstum (Geschätzt)',
+  labelExponentialGrowth: 'Zinseszins-Wachstum (CAGR)',
+  labelPositiveResult: 'Rentable Investition',
+  labelNegativeResult: 'Verlustposition',
+  labelCopyResult: 'Ergebnisse kopieren',
+  labelCopied: 'Kopiert!',
+};
+
+const slug = 'rentabilitatsrechner-investition-roi-cagr';
+const title = 'Rentabilitätsrechner: ROI & CAGR';
+const description = 'Analysieren Sie Ihre Investitionsleistung. Berechnen Sie ROI und CAGR, um Ihre realen Gewinne zu verstehen.';
+
+const faq = [
+  {
+    question: 'Was ist eine gute CAGR?',
+    answer: 'Historisch gesehen liegt der S&P 500 bei etwa 7-10% pro Jahr. Hochrisikoinvestitionen können 15-20%+ anstreben.',
+  },
+  {
+    question: 'Warum unterscheidet sich mein CAGR von meinem Gesamt-ROI?',
+    answer: 'Der ROI ist die Gesamtrendite unabhängig von der Zeit. Die CAGR ist die jährliche Rate, die erforderlich ist, um diese Gesamtrendite zu erreichen.',
+  },
+  {
+    question: 'Kann die CAGR negativ sein?',
+    answer: 'Ja. Wenn Ihr Endwert geringer ist als Ihre Anfangsinvestition, ist die CAGR negativ.',
+  },
+];
+
+const howTo = [
+  {
+    name: 'Anfangskapital eingeben',
+    text: 'Geben Sie den ursprünglich investierten Betrag ein.',
+  },
+  {
+    name: 'Endwert eingeben',
+    text: 'Geben Sie den aktuellen Marktwert oder den Verkaufspreis ein.',
+  },
+  {
+    name: 'Zeitdauer festlegen',
+    text: 'Geben Sie an, wie lange Sie die Investition gehalten haben.',
+  },
+];
+
+export const content: ToolLocaleContent<ProfitabilityUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  seo: [
+    {
+      type: 'title',
+      text: 'ROI vs. CAGR: Welche Kennzahl ist besser?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Der <strong>ROI</strong> zeigt den prozentualen Gesamtgewinn, ignoriert aber die Zeit. Die <strong>CAGR</strong> ist besser für langfristige Analysen.',
+    },
+  ],
+  faq,
+  bibliography: [
+    {
+      name: 'ROI Definition - Investopedia',
+      url: 'https://www.investopedia.com/terms/r/returnoninvestment.asp',
+    },
+  ],
+  howTo,
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FinancialProduct',
+      name: title,
+      description,
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: faq.map((f) => ({
+        '@type': 'Question',
+        name: f.question,
+        acceptedAnswer: { '@type': 'Answer', text: f.answer },
+      })),
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      name: title,
+      step: howTo.map((h, i) => ({
+        '@type': 'HowToStep',
+        position: i + 1,
+        name: h.name,
+        text: h.text,
+      })),
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      name: title,
+      applicationCategory: 'FinanceApplication',
+      operatingSystem: 'All',
+      offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
+    },
+  ],
+};

package/src/tool/profitability/i18n/en.ts

@@ -0,0 +1,165 @@
+import type { ProfitabilityUI } from '../ui';
+import type { ToolLocaleContent } from '../../../types';
+
+export const ui: ProfitabilityUI = {
+  labelInitialInvestment: 'Initial Investment',
+  labelFinalValue: 'Final Value / Current Balance',
+  labelTimeSelection: 'Investment Duration',
+  labelYears: 'Years',
+  labelMonths: 'Months',
+  labelDays: 'Days',
+  labelROI: 'Return on Investment (ROI)',
+  labelCAGR: 'Annualized Growth (CAGR)',
+  labelNetProfit: 'Net Profit',
+  labelLinearGrowth: 'Linear Growth (Estimated)',
+  labelExponentialGrowth: 'Compound Growth (CAGR)',
+  labelPositiveResult: 'Profitable Investment',
+  labelNegativeResult: 'Loss Position',
+  labelCopyResult: 'Copy Results',
+  labelCopied: 'Copied!',
+};
+
+const slug = 'profitability-calculator-roi-cagr';
+const title = 'Investment Profitability Calculator: ROI & CAGR';
+const description = 'Analyze your investment performance with precision. Calculate total Return on Investment (ROI) and Compound Annual Growth Rate (CAGR) to understand your true annualized gains.';
+
+const faq = [
+  {
+    question: 'What is a good CAGR?',
+    answer: 'A "good" CAGR depends on the asset class. Historically, the S&P 500 has returned around 7-10% annually. High-risk investments might target 15-20%+, while savings accounts usually offer much less.',
+  },
+  {
+    question: 'Why is my CAGR different from my total ROI?',
+    answer: 'ROI is the total return regardless of time. CAGR is the annual rate required to reach that total return. If your investment lasted more than a year, the CAGR will usually be a smaller number than the ROI.',
+  },
+  {
+    question: 'Can CAGR be negative?',
+    answer: 'Yes. If your final value is less than your initial investment, the CAGR will be negative, representing the annualized rate of loss.',
+  },
+];
+
+const howTo = [
+  {
+    name: 'Enter your initial capital',
+    text: 'Input the amount of money you originally invested.',
+  },
+  {
+    name: 'Enter the final or current value',
+    text: 'Input the current market value of your investment or the price at which you sold it.',
+  },
+  {
+    name: 'Set the time duration',
+    text: 'Specify how long you held the investment to calculate the annualized return (CAGR).',
+  },
+];
+
+export const content: ToolLocaleContent<ProfitabilityUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  seo: [
+    {
+      type: 'title',
+      text: 'ROI vs. CAGR: Which Metric is Better?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'When evaluating an investment, <strong>ROI (Return on Investment)</strong> tells you the total percentage gain or loss from start to finish. However, it ignores the element of time. <strong>CAGR (Compound Annual Growth Rate)</strong> is superior for long-term analysis because it "annualizes" your returns, allowing you to compare a 5-year stock investment against a 1-year crypto trade or a savings account on equal terms.',
+    },
+    {
+      type: 'title',
+      text: 'How to Use the Profitability Calculator',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'To get accurate results, enter your initial capital and the current value (or final sale price) of your asset. Select the duration of the investment in days, months, or years. Our tool automatically calculates the absolute profit, the total ROI, and the geometric mean of your annual growth (CAGR).',
+    },
+    {
+      type: 'comparative',
+      columns: 2,
+      items: [
+        {
+          title: 'Total ROI',
+          description: 'Measure of absolute return.',
+          points: [
+            'Ignores duration',
+            'Simple calculation',
+            'Best for quick trades',
+            'Shows total gain/loss',
+          ],
+        },
+        {
+          title: 'Annualized CAGR',
+          description: 'Measure of annual performance.',
+          highlight: true,
+          points: [
+            'Includes time factor',
+            'Standardizes results',
+            'Allows comparisons',
+            'Shows geometric growth',
+          ],
+        },
+      ],
+    },
+    {
+      type: 'title',
+      text: 'The Power of Compound Growth Visualization',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Our interactive chart compares linear growth (where you assume the gain is spread evenly) against exponential growth (CAGR). This visualization is crucial for understanding how compound interest works over time. Real investments rarely grow in a straight line; understanding the CAGR curve helps you set realistic expectations for future wealth building.',
+    },
+  ],
+  faq,
+  bibliography: [
+    {
+      name: 'Investopedia: ROI Definition',
+      url: 'https://www.investopedia.com/terms/r/returnoninvestment.asp',
+    },
+    {
+      name: 'Investopedia: CAGR Explained',
+      url: 'https://www.investopedia.com/terms/c/cagr.asp',
+    },
+  ],
+  howTo,
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FinancialProduct',
+      name: title,
+      description,
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: faq.map((f) => ({
+        '@type': 'Question',
+        name: f.question,
+        acceptedAnswer: { '@type': 'Answer', text: f.answer },
+      })),
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      name: title,
+      step: howTo.map((h, i) => ({
+        '@type': 'HowToStep',
+        position: i + 1,
+        name: h.name,
+        text: h.text,
+      })),
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      name: title,
+      applicationCategory: 'FinanceApplication',
+      operatingSystem: 'All',
+      offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
+    },
+  ],
+};