Nova funcionalidade: cotação/conversão de moedas.

.tool-versions

@@ -0,0 +1 @@
+nodejs 20.0.0

components/CurrencyInput.vue

@@ -0,0 +1,47 @@
+<template>
+  <v-card elevation="2" v-if="store.conversion && store.conversion.rates">
+    <v-card-title class="text-h6">Conversão entre Moedas</v-card-title>
+    <v-card-text>
+      <v-form @submit.prevent>
+        <CurrencyAmountInput />
+        <div class="currency-container">
+          <CurrencyTypeInput />
+        </div>
+        <div>{{ store.amount }} {{ store.origin.title }} é igual a</div>
+        <div class="text-h5">
+          {{ store.conversionRate }} {{ store.target.title }}
+        </div>
+        <div>
+          {{ new Date(store.conversion.date).toLocaleDateString("pt-BR") }}
+        </div>
+      </v-form>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { useCurrencyStore } from "~/store/currencies";
+const store = useCurrencyStore();
+let debounce = false;
+watch(
+  () => [store.amount, store.origin, store.target],
+  () => {
+    //"debouncing"
+    if (debounce) return;
+    debounce = true;
+    setTimeout(() => {
+      store.fetchConversion();
+      store.fetchHistoricalData();
+      debounce = false;
+    }, 500);
+  }
+);
+</script>
+
+<style scoped>
+.currency-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+</style>

components/NavigationBar.vue

@@ -3,8 +3,11 @@
     <v-btn icon to="/">
       <v-icon>mdi-calculator</v-icon>
     </v-btn>
+    <v-btn icon to="/currency">
+      <v-icon>mdi-currency-usd</v-icon>
+    </v-btn>
     <v-btn icon to="/sobre">
       <v-icon>mdi-information-variant</v-icon>
     </v-btn>
   </span>
-</template>
+</template>

components/currency/currencyAmountInput.vue

@@ -0,0 +1,23 @@
+<template>
+  <v-text-field
+    v-model.number="store.amount"
+    type="number"
+    variant="underlined"
+    label="Valor"
+    prepend-icon="mdi-cash-multiple"
+    min="0"
+    :rules="[rules.required, rules.positive]"
+  >
+  </v-text-field>
+</template>
+
+<script setup lang="ts">
+import { useCurrencyStore } from "~/store/currencies";
+const store = useCurrencyStore();
+
+const rules = {
+  required: (value: any) => !!value || "Obrigatório",
+  positive: (value: any) =>
+    parseInt(value) > 0 || "Deve ser um número positivo",
+};
+</script>

components/currency/currencyTimeSeriesChart.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <v-chart class="chart" :option="option" autoresize />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useCurrencyStore } from "~/store/currencies";
+const store = useCurrencyStore();
+import { use } from "echarts/core";
+import { LineChart } from "echarts/charts";
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+} from "echarts/components";
+import { CanvasRenderer } from "echarts/renderers";
+import VChart from "vue-echarts";
+
+use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  LineChart,
+  CanvasRenderer,
+]);
+
+const option = ref({});
+
+function render() {
+  option.value = {
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        animation: false,
+      },
+    },
+    xAxis: {
+      type: "time",
+      splitLine: {
+        show: false,
+      },
+    },
+    yAxis: {
+      type: "value",
+      boundaryGap: [0, "100%"],
+      splitLine: {
+        show: true,
+      },
+    },
+    series: [
+      {
+        name: store.target.title,
+        type: "line",
+        showSymbol: true,
+        data: store.currencySeries,
+      },
+    ],
+  };
+}
+
+watch(
+  () => [store.currencySeries],
+  () => {
+    render();
+  }
+);
+</script>
+
+<style scoped>
+.chart {
+  height: 75vh;
+}
+</style>

components/currency/currencyTypeInput.vue

@@ -0,0 +1,49 @@
+<template>
+  <v-container>
+    <v-row align="center" justify="center" class="switch-btn">
+      <v-col cols="auto">
+        <v-btn
+          density="compact"
+          icon="mdi-arrow-left-right"
+          @click="store.flipCurrencies()"
+        ></v-btn>
+      </v-col>
+    </v-row>
+    <v-row align="center" justify="center">
+      <v-select
+        v-model="store.origin"
+        :items="store.currencies"
+        @update:modelValue="currencyOriginChange"
+        item-title="title"
+        item-value="value"
+        label="Origin Currency"
+        return-object
+      ></v-select>
+      <v-select
+        v-model="store.target"
+        :items="currenciesWOOrigin"
+        item-title="title"
+        item-value="value"
+        label="Target Currency"
+        return-object
+      ></v-select>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { useCurrencyStore } from "~/store/currencies";
+const store = useCurrencyStore();
+const currenciesWOOrigin = ref();
+const currencyOriginChange = () => {
+  currenciesWOOrigin.value = store.currencies.filter((o) => o != store.origin);
+  store.target =
+    store.origin === store.target ? currenciesWOOrigin.value[0] : store.target;
+};
+currencyOriginChange();
+</script>
+<style scoped>
+.switch-btn {
+  margin-top: -2em;
+}
+</style>

nuxt.config.ts

@@ -1,89 +1,91 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 
 export default defineNuxtConfig({
-    app: {
-        head: {
-            titleTemplate: '%s | Renda Fixa',
-            htmlAttrs: {
-                lang: 'pt'
-            },
-            title: 'Calculadora',
-            meta: [
-                { charset: 'utf-8' },
-                { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-                {
-                    hid: 'apple-mobile-web-app-title',
-                    name: 'apple-mobile-web-app-title',
-                    content: 'Renda Fixa'
-                },
-                {
-                    hid: 'og:title',
-                    name: 'og:title',
-                    content: 'Calculadora Renda Fixa'
-                },
-                {
-                    hid: 'og:site_name',
-                    name: 'og:site_name',
-                    content: 'Calculadora Renda Fixa'
-                },
-                { name: 'format-detection', content: 'telephone=no' }
-            ],
-            link: [
-                { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
-                {
-                    rel: 'apple-touch-icon',
-                    sizes: '180x180',
-                    href: '/apple-touch-icon.png'
-                },
-                {
-                    rel: 'icon',
-                    type: 'image/png',
-                    sizes: '32x32',
-                    href: '/favicon-32x32.png'
-                },
-                {
-                    rel: 'icon',
-                    type: 'image/png',
-                    sizes: '16x16',
-                    href: '/favicon-16x16.png'
-                },
-                { rel: 'manifest', href: '/site.webmanifest' }
-            ]
+  app: {
+    head: {
+      titleTemplate: "%s | Renda Fixa",
+      htmlAttrs: {
+        lang: "pt",
+      },
+      title: "Calculadora",
+      meta: [
+        { charset: "utf-8" },
+        { name: "viewport", content: "width=device-width, initial-scale=1" },
+        {
+          hid: "apple-mobile-web-app-title",
+          name: "apple-mobile-web-app-title",
+          content: "Renda Fixa",
+        },
+        {
+          hid: "og:title",
+          name: "og:title",
+          content: "Calculadora Renda Fixa",
+        },
+        {
+          hid: "og:site_name",
+          name: "og:site_name",
+          content: "Calculadora Renda Fixa",
+        },
+        { name: "format-detection", content: "telephone=no" },
+      ],
+      link: [
+        { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
+        {
+          rel: "apple-touch-icon",
+          sizes: "180x180",
+          href: "/apple-touch-icon.png",
+        },
+        {
+          rel: "icon",
+          type: "image/png",
+          sizes: "32x32",
+          href: "/favicon-32x32.png",
         },
-        pageTransition: { name: 'page', mode: 'out-in' }
+        {
+          rel: "icon",
+          type: "image/png",
+          sizes: "16x16",
+          href: "/favicon-16x16.png",
+        },
+        { rel: "manifest", href: "/site.webmanifest" },
+      ],
     },
-    modules: [
-        '@invictus.codes/nuxt-vuetify',
-        '@pinia/nuxt',
-        '@pinia-plugin-persistedstate/nuxt'
-    ],
-    extends: [
-        'nuxt-seo-kit'
-    ],
-    runtimeConfig: {
-        public: {
-          siteUrl: process.env.NUXT_PUBLIC_SITE_URL || 'https://rendafixa.github.io',
-          siteName: 'Calculadora Renda Fixa',
-          siteDescription: 'Calculadora de investimentos Renda Fixa para simulação de ' +
-          'rentabilidade em CDB, RDB, LC, LCI, LCA, Poupança e Tesouro Direto',
-          language: 'pt'
-        }
-      },
-    devtools: { enabled: true },
-    piniaPersistedstate: {
-        storage: 'localStorage'
+    pageTransition: { name: "page", mode: "out-in" },
+  },
+  modules: [
+    "@invictus.codes/nuxt-vuetify",
+    "@pinia/nuxt",
+    "@pinia-plugin-persistedstate/nuxt",
+  ],
+  extends: ["nuxt-seo-kit"],
+  runtimeConfig: {
+    public: {
+      siteUrl:
+        process.env.NUXT_PUBLIC_SITE_URL || "https://rendafixa.github.io",
+      siteName: "Calculadora Renda Fixa",
+      siteDescription:
+        "Calculadora de investimentos Renda Fixa para simulação de " +
+        "rentabilidade em CDB, RDB, LC, LCI, LCA, Poupança e Tesouro Direto",
+      language: "pt",
     },
-    vuetify: {
-        vuetifyOptions: {
-        },
-        moduleOptions: {
-            treeshaking: true,
-            useIconCDN: true,
+  },
+  devtools: { enabled: true },
+  build: {
+    transpile: [/echarts/, /zrender/, , /resize-detector/],
+  },
+  piniaPersistedstate: {
+    storage: "localStorage",
+  },
+  vuetify: {
+    vuetifyOptions: {},
+    moduleOptions: {
+      treeshaking: true,
+      useIconCDN: true,
 
-            /* vite-plugin-vuetify options */
-            styles: true,
-            autoImport: true,
-            useVuetifyLabs: false
-        }
-    }
-})
+      /* vite-plugin-vuetify options */
+      styles: true,
+      autoImport: true,
+      useVuetifyLabs: false,
+    },
+  },
+});

package.json

@@ -21,6 +21,8 @@
     "vitest": "^0.34.3"
   },
   "dependencies": {
-    "@pinia/nuxt": "^0.5.1"
+    "@pinia/nuxt": "^0.5.1",
+    "echarts": "^5.4.3",
+    "vue-echarts": "^6.6.8"
   }
 }