mais dados: payout + qtd acoes + EY + graham

thefintz · May 27, 2024 · dfdc9b2 · dfdc9b2
1 parent 0ea04a6
commit dfdc9b2
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 9 deletions.
diff --git a/components/Indicadores.vue b/components/Indicadores.vue
@@ -2,12 +2,12 @@
   <div class="bg-slate-200">
     <div class="flex flex-col min-h-screen">
       <div class="grow">
-        <NavBar @update:ticker="updateTicker" @fetchData="fetchData" />
+        <NavBar class="mb-6" @update:ticker="updateTicker" @fetchData="fetchData" />
 
         <!-- Tabela Informações / Infos Gerais -->
         <div class="mx-auto max-w-screen-lg">
           <div
-            class="overflow-hidden sm:rounded-lg mx-6 border-gray-400 border mb-7"
+            class="overflow-hidden sm:rounded-lg mx-6 border-gray-400 border mb-6"
           >
             <div class="align-middle inline-block min-w-full">
               <!-- Header -->
@@ -80,14 +80,67 @@
                   >
                 </div>
               </div>
+              <!-- Individual Row 2 -->
+              <div class="flex">
+                <div class="flex-1 px-4 py-0 bg-sky-100 text-right">
+                  <span
+                    class="cursor-help text-black"
+                    v-tooltip="tooltip['Graham']"
+                    >Graham</span
+                  >
+                </div>
+                <div class="flex-1 px-4 py-0 text-left">
+                  <span class="cursor-default text-black">{{
+                    this.indicators["LPA"].value ? "R$" + Math.sqrt(22.5 * Number(this.indicators["LPA"].value) * Number(this.indicators["VPA"].value)).toFixed(2).toString() : ""
+                  }}</span>
+                </div>
+                <div class="flex-1 px-4 py-0 bg-sky-100 text-right">
+                  <span
+                    class="cursor-help text-black"
+                    v-tooltip="tooltip['QuantidadeAcoesTotais']"
+                    >Nº Ações</span
+                  >
+                </div>
+                <div class="flex-1 px-4 py-0 text-left">
+                  <span class="cursor-default text-black">{{
+                    this.indicators["QuantidadeAcoesTotais"].valueString
+                  }}</span>
+                </div>
+                <div class="flex-1 px-4 py-0 bg-sky-100 text-right">
+                  <span
+                    class="cursor-help text-black"
+                    v-tooltip="tooltip['Payout']"
+                    >Payout</span
+                  >
+                </div>
+                <div class="flex-1 px-4 py-0 text-left">
+                  <span
+                    class="cursor-default text-black">
+                      {{ this.indicators["DividendYield"].value ? (100 * ((this.indicators["DividendYield"].value * this.indicators["ValorDeMercado"].value) / this.indicators["QuantidadeAcoesTotais"].value) / this.indicators["LPA"].value).toFixed(1).toString() + '%' : '' }}</span
+                  >
+                </div>
+                <div class="flex-1 px-4 py-0 bg-sky-100 text-right">
+                  <span
+                    class="cursor-help text-black"
+                    v-tooltip="tooltip['EY']"
+                    >EY</span
+                  >
+                </div>
+                <div class="flex-1 px-4 py-0 text-left">
+                  <span
+                    class="cursor-default text-black"
+                    >{{ this.indicators["EBIT_EV"].value ? (100 * 1 / this.indicators["EV_EBIT"].value).toFixed(2).toString() + '%' : ''}}</span
+                  >
+                </div>
+              </div>
             </div>
           </div>
         </div>
 
         <!-- Tabela de Indicadores -->
         <div class="mx-auto max-w-screen-lg">
           <div
-            class="overflow-hidden sm:rounded-lg mx-6 border-gray-400 border mb-7"
+            class="overflow-hidden sm:rounded-lg mx-6 border-gray-400 border mb-6"
           >
             <div class="align-middle inline-block min-w-full">
               <!-- Header -->
@@ -1160,8 +1213,8 @@
         </div>
       </div>
 
-      <footer class="mt-8 p-2 bg-blue-400 text-white text-center">
-        Dados da
+      <footer class="mt-4 py-1 bg-blue-400 text-white text-center">
+        <span class="cursor-default"> Dados da </span>
         <a
           href="https://fintz.com.br"
           target="_blank"
@@ -1244,13 +1297,15 @@ export default {
       tipoPeriodo: "12M",
       isLoading: false,
       indicators: {
+        QuantidadeAcoesTotais: { indicadorNomeBonito: "Nº Ações", value: "" },
         ValorDeMercado: { indicadorNomeBonito: "Market Cap", value: "" },
         EV: { indicadorNomeBonito: "EV", value: "" },
         DividendYield: { indicadorNomeBonito: "DY", value: "" },
         P_L: { indicadorNomeBonito: "P/L", value: "" },
         P_VP: { indicadorNomeBonito: "P/VP", value: "" },
         EV_EBITDA: { indicadorNomeBonito: "EV/EBITDA", value: "" },
         EV_EBIT: { indicadorNomeBonito: "EV/EBIT", value: "" },
+        EBIT_EV: { indicadorNomeBonito: "EY", value: "" },
         P_EBITDA: { indicadorNomeBonito: "P/EBITDA", value: "" },
         P_EBIT: { indicadorNomeBonito: "P/EBIT", value: "" },
         VPA: { indicadorNomeBonito: "VPA", value: "" },
@@ -1456,6 +1511,7 @@ export default {
             MargemEBITDA: true,
             MargemEBIT: true,
             MargemLiquida: true,
+            EV_EBIT: true,
             ROE: true,
             ROIC: true,
             ROA: true,
@@ -1464,9 +1520,18 @@ export default {
             EV: true,
             ValorDeMercado: true,
           };
+          if (indicatorKey === "QuantidadeAcoesTotais") {
+            const formatter = Intl.NumberFormat("en-US", {
+              notation: "compact",
+              maximumFractionDigits: 2,
+              minimumFractionDigits: 2,
+            });
+            formattedValue = formatter.format(formattedValue);
+          }
           if (
             !(indicatorKey in percentIndicators) &&
-            !(indicatorKey in currencyIndicators)
+            !(indicatorKey in currencyIndicators) &&
+            indicatorKey !== "QuantidadeAcoesTotais"
           ) {
             const formatter = Intl.NumberFormat("pt-br", {
               maximumFractionDigits: 2,

diff --git a/components/NavBar.vue b/components/NavBar.vue
@@ -1,10 +1,10 @@
 <template>
   <nav
-    class="flex items-center py-3 justify-between mb-7 px-10 bg-white text-slate-600"
+    class="flex items-center py-3 justify-between px-10 bg-white text-slate-600"
   >
     <div class="flex items-center">
       <img src="@/assets/icone-positivo.png" alt="Logo" class="h-8 mr-2" />
-      <h2 class="text-2xl font-semibold">findicadores.com.br</h2>
+      <h2 class="text-2xl font-semibold cursor-default">findicadores.com.br</h2>
     </div>
     <div class="flex items-center gap-3">
       <Button

diff --git a/tooltip.js b/tooltip.js