fix: combined sales and volumes charts (#230)

* fix: combined sales and volumes charts

* fix: minor issues(size of chart and label)

* Fix for translations, add currency to axis, condition for currency in label and axis

---------

Co-authored-by: Viacheslav Bakshaev <bakshaev@protonmail.ch>

Author: Harastar1001

Diff for: components/SimpleChart.js

@@ -22,7 +22,7 @@ const locales = {
   }
 }
 
-export default function PriceChart({ data }) {
+export default function PriceChart({ data, combined, currency }) {
   const { i18n } = useTranslation()
   const { theme } = useTheme()
 
@@ -55,14 +55,36 @@ export default function PriceChart({ data }) {
       type: 'datetime',
       labels: formatForXaxisLabels
     },
-    yaxis: {
-      labels: {
-        formatter: (val) => {
-          return niceNumber(val, 0, 0)
-        }
-      },
-      tickAmount: 5
-    },
+    yaxis: combined
+      ? [
+          {
+            title: { text: data[0].name },
+            labels: {
+              formatter: (val) => {
+                return niceNumber(val, 0, 0)
+              }
+            },
+            tickAmount: 5
+          },
+          {
+            title: { text: data[1].name },
+            opposite: true,
+            labels: {
+              formatter: (val) => {
+                return niceNumber(val, 0, 0) + (currency ? ' ' + currency.toUpperCase() : '')
+              }
+            },
+            tickAmount: 5
+          }
+        ]
+      : {
+          labels: {
+            formatter: (val) => {
+              return niceNumber(val, 0, 0)
+            }
+          },
+          tickAmount: 5
+        },
     chart: {
       id: 'simple-chart',
       type: 'area',
@@ -160,7 +182,12 @@ export default function PriceChart({ data }) {
         }
       },
       y: {
-        formatter: (val) => niceNumber(val, 0, 0)
+        formatter: (val, { seriesIndex }) => {
+          if (combined && seriesIndex === 1) {
+            return niceNumber(val, 0, 0) + (currency ? ' ' + currency.toUpperCase() : '')
+          }
+          return niceNumber(val, 0, 0)
+        }
       },
       theme
     },
@@ -174,12 +201,14 @@ export default function PriceChart({ data }) {
     //colors: ['#006B7D'],
   }
 
-  const series = [
-    {
-      name: '',
-      data
-    }
-  ]
+  const series = combined
+    ? data
+    : [
+        {
+          name: '',
+          data
+        }
+      ]
 
   return (
     <>

Diff for: pages/nft-volumes/index.js

@@ -877,7 +877,7 @@ export default function NftVolumes({
 
   const chartDivStyle =
     windowWidth > 600
-      ? { flexGrow: 0, flexBasis: 'calc(50% - 20px)' }
+      ? { flexGrow: 0, flexBasis: 'calc(60% - 20px)' }
       : { width: '100%', marginLeft: 0, marginRight: '10px' }
 
   const collectionNameText = (data) => {
@@ -1072,16 +1072,20 @@ export default function NftVolumes({
                 ) : (
                   <>
                     {chartIssuers.length > 0 && chartVolumes.length > 0 && (
-                      <div className="flex" style={{ marginLeft: '10px' }}>
-                        <div style={chartDivStyle}>
-                          <h3>{t('sales-chart', { ns: 'nft-volumes' })}</h3>
-                          <SimpleChart data={chartIssuers} />
-                        </div>
+                      <div className="flex" style={{ marginLeft: '10px', justifyContent: 'center' }}>
                         <div style={chartDivStyle}>
                           <h3>
-                            {t('volumes-chart', { ns: 'nft-volumes' })} ({convertCurrency?.toUpperCase()})
+                            {t('sales-chart', { ns: 'nft-volumes' })} / {t('volumes-chart', { ns: 'nft-volumes' })} (
+                            {convertCurrency?.toUpperCase()})
                           </h3>
-                          <SimpleChart data={chartVolumes} />
+                          <SimpleChart
+                            currency={selectedCurrency}
+                            data={[
+                              { name: t('table.sales'), data: chartIssuers },
+                              { name: t('table.volume'), data: chartVolumes }
+                            ]}
+                            combined={true}
+                          />
                         </div>
                       </div>
                     )}