wip

apps/dapp/src/components/Pages/Core/DappPages/SpiceBazaar/Analytics/Chart/BarChart.tsx

@@ -0,0 +1,142 @@
+import type { DataKey, AxisDomain } from 'recharts/types/util/types';
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer,
+} from 'recharts';
+import { useTheme } from 'styled-components';
+import { formatNumberAbbreviated } from 'utils/formatter';
+import { useMediaQuery } from 'react-responsive';
+import { queryPhone } from 'styles/breakpoints';
+
+type BarChartProps<T> = {
+  chartData: T[];
+  xDataKey: DataKey<keyof T>;
+  xTickFormatter: (xValue: any, index: number) => string;
+  yTickFormatter?: (yValue: any, index: number) => string;
+  tooltipLabelFormatter: (value: any) => string;
+  tooltipValuesFormatter?: (value: number, name: string) => string[];
+  yDomain?: AxisDomain;
+  series: { key: string; color: string }[];
+};
+
+export default function CustomBarChart<T>(
+  props: React.PropsWithChildren<BarChartProps<T>>
+) {
+  const {
+    chartData,
+    xDataKey,
+    xTickFormatter,
+    yTickFormatter,
+    tooltipLabelFormatter,
+    tooltipValuesFormatter,
+    yDomain,
+    series,
+  } = props;
+
+  const theme = useTheme();
+  const isPhoneOrAbove = useMediaQuery({
+    query: queryPhone,
+  });
+
+  return (
+    <ResponsiveContainer minHeight={200} minWidth={320} height={250}>
+      <BarChart
+        data={chartData}
+        margin={{ top: 20, right: 30, left: 20, bottom: 10 }}
+        barCategoryGap={20}
+      >
+        <XAxis
+          axisLine={false}
+          tickLine={false}
+          dataKey={xDataKey}
+          tickFormatter={xTickFormatter}
+          tick={{ stroke: theme.palette.brandLight }}
+          minTickGap={10}
+          tickMargin={10}
+          style={{
+            fontFamily: 'Caviar Dreams',
+            fontSize: '12px',
+            fontWeight: '400',
+            lineHeight: '18px',
+            letterSpacing: '0.05em',
+            fill: theme.palette.brandLight,
+          }}
+        />
+        <YAxis
+          axisLine={false}
+          tickLine={false}
+          tickFormatter={
+            yTickFormatter
+              ? (val, i) => yTickFormatter(val, i)
+              : (value) => formatNumberAbbreviated(value).string
+          }
+          tick={{ stroke: theme.palette.brandLight }}
+          domain={yDomain}
+          tickMargin={16}
+          style={{
+            fontSize: '12px',
+            fontWeight: '400',
+            lineHeight: '18px',
+            letterSpacing: '0.05em',
+            fill: theme.palette.brandLight,
+            fontFamily: 'Caviar Dreams',
+          }}
+          ticks={[0.0, 2.0, 4.0, 6.0]}
+        />
+        <Tooltip
+          wrapperStyle={{ outline: 'none' }}
+          separator={isPhoneOrAbove ? ': ' : ':\n  '}
+          contentStyle={{
+            backgroundColor: theme.palette.dark75,
+            color: theme.palette.brand,
+            borderRadius: '15px',
+            border: 0,
+            minWidth: '180px',
+          }}
+          itemStyle={{
+            backgroundColor: theme.palette.dark75,
+            color: theme.palette.brandLight,
+            whiteSpace: 'pre',
+          }}
+          labelStyle={{
+            backgroundColor: theme.palette.dark75,
+            fontWeight: 'bold',
+          }}
+          labelFormatter={tooltipLabelFormatter}
+          formatter={
+            tooltipValuesFormatter
+              ? (value, name, _props) => {
+                  //@ts-ignore
+                  return tooltipValuesFormatter(value, name);
+                }
+              : undefined
+          }
+        />
+        {series.map((serie, index) => {
+          const isTopBar = index === series.length - 1;
+          const isBottomBar = index === 0;
+
+          return (
+            <Bar
+              key={serie.key}
+              dataKey={serie.key}
+              stackId="a"
+              fill={serie.color}
+              radius={
+                isTopBar
+                  ? [5, 5, 0, 0]
+                  : isBottomBar
+                  ? [0, 0, 5, 5]
+                  : [0, 0, 0, 0]
+              }
+            />
+          );
+        })}
+      </BarChart>
+    </ResponsiveContainer>
+  );
+}

apps/dapp/src/components/Pages/Core/DappPages/SpiceBazaar/Analytics/Chart/Chart.tsx

@@ -1,18 +1,23 @@
-import { useEffect, useState } from 'react';
-import styled, { useTheme } from 'styled-components';
-import { format, subDays } from 'date-fns';
-import LineChart from './LineChart';
-import Loader from 'components/Loader/Loader';
-import { formatNumberAbbreviated } from 'utils/formatter';
+import { useState } from 'react';
+import styled from 'styled-components';
+import { format } from 'date-fns';
 import * as breakpoints from 'styles/breakpoints';
 import { InputSelect } from 'components/InputSelect/InputSelect';
+import PriceChart from './PriceChart';
+import TotalBidsChart from './TotalBidsChart';
+import CirculatingSupplyChart from './CirculatingSupplyChart';
+import StakedTempleChart from 'components/Pages/Core/DappPages/SpiceBazaar/Analytics/Chart/StakedTempleChart';
+import EmissionAllocationStaked from 'components/Pages/Core/DappPages/SpiceBazaar/Analytics/Chart/EmissionAllocationStaked';
+import TotalBidders from 'components/Pages/Core/DappPages/SpiceBazaar/Analytics/Chart/TotalBidders';
+import TotalTGLDHoldersChart from 'components/Pages/Core/DappPages/SpiceBazaar/Analytics/Chart/TotalTGLDHoldersChart';
+import EmissionAllocationEpochChart from 'components/Pages/Core/DappPages/SpiceBazaar/Analytics/Chart/EmissionAllocationEpoch';
 
 type XAxisTickFormatter = (timestamp: number) => string;
 
-const tickFormatter: XAxisTickFormatter = (timestamp) =>
+export const tickFormatter: XAxisTickFormatter = (timestamp) =>
   format(new Date(timestamp), 'MMM dd');
 
-type Metric = { timestamp: number; price: number };
+export type Metric = { timestamp: number; price: number };
 
 const metricOptions: { value: string; label: string }[] = [
   { label: 'Price', value: 'price' },
@@ -31,34 +36,16 @@ const metricOptions: { value: string; label: string }[] = [
   { label: 'Total TGLD Holders', value: 'totalTGLDHolders' },
 ];
 
-const pricesLast7Days = [
-  { timestamp: subDays(new Date(), 6).getTime(), price: 1.13 },
-  { timestamp: subDays(new Date(), 5).getTime(), price: 1.14 },
-  { timestamp: subDays(new Date(), 4).getTime(), price: 1.13 },
-  { timestamp: subDays(new Date(), 3).getTime(), price: 1.14 },
-  { timestamp: subDays(new Date(), 2).getTime(), price: 1.16 },
-  { timestamp: subDays(new Date(), 1).getTime(), price: 1.15 },
-  { timestamp: new Date().getTime(), price: 1.17 },
-];
-
 export const Chart = () => {
-  const [metrics, setMetrics] = useState<Metric[]>([]);
   const [selectedMetric, setSelectedMetric] = useState('price');
-  const theme = useTheme();
-
-  useEffect(() => {
-    setMetrics(pricesLast7Days); // replace this logic when metrics depend on `selectedMetric`
-  }, []);
 
   const selectMetric = (metric: string) => {
     setSelectedMetric(metric);
-    // setMetrics(fetchMetrics(metric));
   };
 
   const [filter, setFilter] = useState('1W');
   const filterOptions = ['1D', '1W', '1M', '1Y'];
 
-  if (!metrics.length) return <Loader />;
   return (
     <PageContainer>
       <HeaderContainer>
@@ -84,18 +71,18 @@ export const Chart = () => {
           ))}
         </FilterContainer>
       </HeaderContainer>
-      <LineChart
-        chartData={metrics.reverse()}
-        xDataKey="timestamp"
-        lines={[{ series: 'price', color: theme.palette.brandLight }]}
-        xTickFormatter={tickFormatter}
-        yTickFormatter={(val) =>
-          `$${formatNumberAbbreviated(val).number.toFixed(2)}\u00A0M`
-        }
-        tooltipLabelFormatter={tickFormatter}
-        yDomain={[1.12, 1.14, 1.16, 1.18]}
-        tooltipValuesFormatter={(value) => [`$ ${value.toFixed(2)} M`, 'Value']}
-      />
+      {selectedMetric === 'price' && <PriceChart />}
+      {selectedMetric === 'totalBids' && <TotalBidsChart />}
+      {selectedMetric === 'circulatingSupply' && <CirculatingSupplyChart />}
+      {selectedMetric === 'stakedTemple' && <StakedTempleChart />}
+      {selectedMetric === 'emissionAllocation(PerEpoch)' && (
+        <EmissionAllocationEpochChart />
+      )}
+      {selectedMetric === 'emissionAllocation(PerstakedTEMPLE)' && (
+        <EmissionAllocationStaked />
+      )}
+      {selectedMetric === 'totalBidders' && <TotalBidders />}
+      {selectedMetric === 'totalTGLDHolders' && <TotalTGLDHoldersChart />}
     </PageContainer>
   );
 };
@@ -119,7 +106,6 @@ const HeaderContainer = styled.div`
 `;
 
 const SelectMetricContainer = styled.div`
-  // width: 100%;
   flex: 1;
   max-width: 370px;
 `;

apps/dapp/src/components/Pages/Core/DappPages/SpiceBazaar/Analytics/Chart/CirculatingSupplyChart.tsx

@@ -0,0 +1,41 @@
+import { subDays } from 'date-fns';
+import LineChart from './LineChart';
+import { useTheme } from 'styled-components';
+import { tickFormatter } from './Chart';
+import type { Metric } from './Chart';
+import Loader from 'components/Loader/Loader';
+
+const pricesLast7Days: Metric[] = [
+  { timestamp: subDays(new Date(), 6).getTime(), price: 1394823 },
+  { timestamp: subDays(new Date(), 5).getTime(), price: 1494823 },
+  { timestamp: subDays(new Date(), 4).getTime(), price: 1294823 },
+  { timestamp: subDays(new Date(), 3).getTime(), price: 1554823 },
+  { timestamp: subDays(new Date(), 2).getTime(), price: 1394823 },
+  { timestamp: subDays(new Date(), 1).getTime(), price: 1494823 },
+  { timestamp: new Date().getTime(), price: 1394823 },
+];
+
+const CirculatingSupplyChart = () => {
+  const metrics = pricesLast7Days;
+  const theme = useTheme();
+
+  const formatWithCommas = (num: number) => {
+    return new Intl.NumberFormat('en-US').format(num);
+  };
+
+  if (!metrics.length) return <Loader />;
+  return (
+    <LineChart
+      chartData={metrics.reverse()}
+      xDataKey="timestamp"
+      lines={[{ series: 'price', color: theme.palette.brandLight }]}
+      xTickFormatter={tickFormatter}
+      yTickFormatter={(val) => formatWithCommas(val)}
+      tooltipLabelFormatter={tickFormatter}
+      yDomain={[1290000, 1390000, 1490000, 1590000]}
+      tooltipValuesFormatter={(value) => [value.toFixed(2)]}
+    />
+  );
+};
+
+export default CirculatingSupplyChart;

apps/dapp/src/components/Pages/Core/DappPages/SpiceBazaar/Analytics/Chart/EmissionAllocationEpoch.tsx

@@ -0,0 +1,41 @@
+import { subDays } from 'date-fns';
+import LineChart from './LineChart';
+import { formatNumberAbbreviated } from 'utils/formatter';
+import { useTheme } from 'styled-components';
+import { tickFormatter } from './Chart';
+import type { Metric } from './Chart';
+import Loader from 'components/Loader/Loader';
+
+const pricesLast7Days: Metric[] = [
+  { timestamp: subDays(new Date(), 6).getTime(), price: 22 },
+  { timestamp: subDays(new Date(), 5).getTime(), price: 15 },
+  { timestamp: subDays(new Date(), 4).getTime(), price: 25 },
+  { timestamp: subDays(new Date(), 3).getTime(), price: 35 },
+  { timestamp: subDays(new Date(), 2).getTime(), price: 50 },
+  { timestamp: subDays(new Date(), 1).getTime(), price: 65 },
+  { timestamp: new Date().getTime(), price: 75 },
+];
+
+const EmissionAllocationEpochChart = () => {
+  const metrics = pricesLast7Days;
+  const theme = useTheme();
+
+  const formatWithPercent = (val: number) =>
+    `${formatNumberAbbreviated(val).number}\u00A0%`;
+
+  if (!metrics.length) return <Loader />;
+  return (
+    <LineChart
+      chartData={metrics.reverse()}
+      xDataKey="timestamp"
+      lines={[{ series: 'price', color: theme.palette.brandLight }]}
+      xTickFormatter={tickFormatter}
+      yTickFormatter={formatWithPercent}
+      tooltipLabelFormatter={tickFormatter}
+      yDomain={[0, 25, 50, 75]}
+      tooltipValuesFormatter={(value) => [formatWithPercent(value)]}
+    />
+  );
+};
+
+export default EmissionAllocationEpochChart;

apps/dapp/src/components/Pages/Core/DappPages/SpiceBazaar/Analytics/Chart/EmissionAllocationStaked.tsx

@@ -0,0 +1,41 @@
+import { subDays } from 'date-fns';
+import LineChart from './LineChart';
+import { useTheme } from 'styled-components';
+import { tickFormatter } from './Chart';
+import type { Metric } from './Chart';
+import Loader from 'components/Loader/Loader';
+
+const pricesLast7Days: Metric[] = [
+  { timestamp: subDays(new Date(), 6).getTime(), price: 1394823 },
+  { timestamp: subDays(new Date(), 5).getTime(), price: 1494823 },
+  { timestamp: subDays(new Date(), 4).getTime(), price: 1294823 },
+  { timestamp: subDays(new Date(), 3).getTime(), price: 1554823 },
+  { timestamp: subDays(new Date(), 2).getTime(), price: 1394823 },
+  { timestamp: subDays(new Date(), 1).getTime(), price: 1494823 },
+  { timestamp: new Date().getTime(), price: 1394823 },
+];
+
+const EmissionAllocationStaked = () => {
+  const metrics = pricesLast7Days;
+  const theme = useTheme();
+
+  const formatWithCommas = (num: number) => {
+    return new Intl.NumberFormat('en-US').format(num);
+  };
+
+  if (!metrics.length) return <Loader />;
+  return (
+    <LineChart
+      chartData={metrics.reverse()}
+      xDataKey="timestamp"
+      lines={[{ series: 'price', color: theme.palette.brandLight }]}
+      xTickFormatter={tickFormatter}
+      yTickFormatter={(val) => formatWithCommas(val)}
+      tooltipLabelFormatter={tickFormatter}
+      yDomain={[1290000, 1390000, 1490000, 1590000]}
+      tooltipValuesFormatter={(value) => [value.toFixed(2)]}
+    />
+  );
+};
+
+export default EmissionAllocationStaked;