Showing EUR and USD price on the same graph

manelgavalda · Jan 11, 2024 · 2fc890f · 2fc890f
1 parent e5e5b2d
commit 2fc890f
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 32 deletions.
diff --git a/public/build/assets/app2.js b/public/build/assets/app2.js
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
@@ -2,39 +2,29 @@
   <div class="flex">
     <div class="w-1/3">
       <balances-chart
-        label="EUR Price"
-        :dates="balances.dates"
-        :data="balances.prices_eur"
-        :total="currencyFormat(totals.pricesEur) + '€'"
-      />
-      <balances-chart
-        label="USD Price"
+        label="ETH Price"
         :dates="balances.dates"
         :data="balances.prices"
         :total="'$' + currencyFormat(totals.pricesUsd)"
+        :subtotal="`(${currencyFormat(totals.pricesEur)} €)`"
       />
     </div>
     <div class="w-1/3">
       <balances-chart
         color="blue"
-        label="Total ETH"
+        label="ETH"
         :dates="balances.dates"
         :data="balances.ethereum"
         :total="totals.eth.toFixed(3)"
       />
     </div>
     <div class="w-1/3">
       <balances-chart
-        label="Total EUR"
-        :dates="balances.dates"
-        :data="balances.totals_eur"
-        :total="currencyFormat(totals.eur.toFixed(2)) + '€'"
-      />
-      <balances-chart
-        label="Total USD"
+        label="Total"
         :dates="balances.dates"
         :data="balances.totals"
         :total="'$' + currencyFormat(totals.usd.toFixed(2))"
+        :subtotal="`(${currencyFormat(totals.eur.toFixed(2))} €)`"
       />
     </div>
   </div>

diff --git a/resources/js/components/Dashboard/BalancesChart.vue b/resources/js/components/Dashboard/BalancesChart.vue
@@ -4,9 +4,12 @@
       <h2 class="font-semibold text-slate-800 dark:text-slate-100">{{ label }}</h2>
     </header>
     <div class="px-5 py-3">
-      <div class="flex flex-wrap justify-between items-end">
-        <div class="flex items-start">
-          <div class="text-3xl font-bold text-slate-800 dark:text-slate-100 mr-2">{{ total }}</div>
+      <div class="flex flex-wrap justify-between items-end ">
+        <div class="flex items-start ">
+          <div class="text-right mr-2 text-slate-800 dark:text-slate-100">
+            <div class="text-3xl font-bold">{{ total }}</div>
+            <div class="text-xl font-semibold h-1">{{ subtotal }}</div>
+          </div>
           <div class="text-sm font-semibold text-white px-1.5 rounded-full" :class="{
             'bg-red-700': getChange() < 0,
             'bg-green-700': getChange() >= 0
@@ -48,7 +51,8 @@
       dates: Array,
       color: String,
       label: String,
-      total: String
+      total: String,
+      subtotal: String
     },
     components: {
       Line