chore: finalize chart

.vscode/launch.json

@@ -10,7 +10,7 @@
             "name": "Next.js: chrome debug client-side",
             "type": "chrome",
             "request": "launch",
-            "url": "http://localhost:3000"
+            "url": "http://localhost:3001"
         }
     ]
 }

components/Button/index.tsx

@@ -24,7 +24,9 @@ export function Button(props: PropsWithChildren<ButtonProps>) {
   return (
     <button
       onClick={handleClick}
-      className={`transition-all hover:bg-opacity-90 overflow-hidden relative py-3 flex items-center justify-center px-4 text-md font-semibold md:leading-snug text-baseForeground bg-secondary-500 rounded-micro ${props.className}`}>
+      className={`transition-all hover:bg-opacity-90 overflow-hidden relative py-3 flex items-center justify-center px-4 text-md font-semibold md:leading-snug text-baseForeground bg-secondary-500 rounded-micro ${
+        props.className || ''
+      }`}>
       {props.children}
     </button>
   );

components/ChartBox.tsx → components/ChartBox old.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { AmountConverter } from '../utils/amountConverter';
 import { SummaryType } from '../types';
-import Chart from './Chart';
+import Chart from './ChartBox';
 
 interface PropsType {
   summary: SummaryType;

components/ChartBox/Chart.helper.ts

@@ -0,0 +1,36 @@
+import { buildChartTheme } from '@visx/xychart';
+
+export const monthsShort = [
+  'Jan',
+  'Feb',
+  'Mar',
+  'Apr',
+  'May',
+  'Jun',
+  'Jul',
+  'Aug',
+  'Sep',
+  'Oct',
+  'Nov',
+  'Dec',
+];
+
+export function getDayOfMonth(dateString: string) {
+  const date = new Date(dateString);
+  const monthName = date.toLocaleDateString('en-US', { month: 'short' });
+  const dayNumber = date.getDate();
+
+  return `${dayNumber} ${monthName}`;
+}
+
+export function getRoundedCount(count: number) {
+  return Math.ceil(count / 1000) * 1000;
+}
+
+export const customTheme = buildChartTheme({
+  backgroundColor: '#fff',
+  colors: ['#469BF5'],
+  gridColor: '#469BF5',
+  tickLength: 8,
+  gridColorDark: '',
+});

components/Chart/index.tsx → components/ChartBox/Chart.tsx

@@ -14,11 +14,11 @@ import { customTheme, monthsShort } from './Chart.helper';
 
 function Chart(props: ChartProps) {
   const { data } = props;
+
   const IsMobile = isMobile();
   return (
     <div className="relative flex justify-center overflow-hidden">
       <XYChart
-        height={350}
         theme={customTheme}
         xScale={{ type: 'band' }}
         yScale={{ type: 'linear' }}>
@@ -52,10 +52,10 @@ function Chart(props: ChartProps) {
         <AnimatedAreaStack curve={curveCardinal} renderLine>
           <AnimatedAreaSeries
             dataKey="Daily Interval"
-            data={data}
+            data={data.slice(0, 15)}
             xAccessor={(d) => d.date}
             yAccessor={(d) => d.count}
-            fillOpacity={0.3}
+            fillOpacity={0}
           />
         </AnimatedAreaStack>
 
@@ -79,7 +79,7 @@ function Chart(props: ChartProps) {
           )}
         />
       </XYChart>
-      <div className="w-full h-12 absolute bottom-12 from-[#00a9bb00] to-[#fff] bg-gradient-to-b" />
+      <div className="w-full h-12 absolute bottom-12" />
     </div>
   );
 }

components/ChartBox/Chart.type.ts

@@ -0,0 +1,14 @@
+import { DailyIntervalType } from 'types';
+
+export interface ChartProps {
+  data: DailyIntervalType[];
+}
+
+export interface WeeklyChartProps {
+  currentWeek: DailyIntervalType[];
+  prevWeek: DailyIntervalType[];
+}
+
+export type DaysFilter = 7 | 30;
+
+export type WeekFilter = 'current' | 'prev';

components/ChartBox/CustomTick.tsx

@@ -0,0 +1,23 @@
+/* eslint-disable react/prop-types */
+export function CustomTick({ formattedValue, ...tickProps }) {
+  return (
+    <g transform={`translate(${tickProps.x},${tickProps.y})`}>
+      <text
+        fontSize={12}
+        fontWeight={400}
+        textAnchor="end"
+        dominantBaseline="middle"
+        fill="#B8B8B8" // Set tick label color
+      >
+        {formattedValue}
+      </text>
+      <line
+        x1={-4} // Adjust the tick line length as needed
+        x2={0}
+        y1={0}
+        y2={0}
+        stroke="#333" // Set tick line color
+      />
+    </g>
+  );
+}

components/ChartBox/MonthlyChart.tsx

@@ -0,0 +1,78 @@
+import { curveCardinal } from '@visx/curve';
+import {
+  AnimatedAxis,
+  AnimatedGrid,
+  AnimatedLineSeries,
+  XYChart,
+  Tooltip,
+} from '@visx/xychart';
+import { customTheme, getDayOfMonth, getRoundedCount } from './Chart.helper';
+import dayjs from 'dayjs';
+import { ChartProps } from './Chart.type';
+import { CustomTick } from './CustomTick';
+
+export const MonthlyChart = (props: ChartProps) => {
+  const { data } = props;
+  console.log('data monthly', data);
+  return (
+    <XYChart
+      theme={customTheme}
+      height={300}
+      xScale={{ type: 'band' }}
+      yScale={{ type: 'linear' }}>
+      <AnimatedAxis
+        tickComponent={(props) => <CustomTick {...props} />}
+        orientation="bottom"
+        hideTicks
+        numTicks={7}
+        tickFormat={(d) => getDayOfMonth(d)}
+      />
+      <AnimatedAxis
+        orientation="left"
+        hideAxisLine
+        hideTicks
+        numTicks={3}
+        tickFormat={(c) => getRoundedCount(c).toString()}
+        tickComponent={(props) => <CustomTick {...props} />}
+      />
+      <AnimatedGrid
+        lineStyle={{
+          stroke: 'rgba(184, 184, 184, 0.30)',
+          strokeLinecap: 'round',
+          strokeWidth: 1,
+        }}
+        columns={false}
+        numTicks={3}
+      />
+
+      <AnimatedLineSeries
+        curve={curveCardinal}
+        dataKey="Last month"
+        data={data}
+        stroke="#469BF5"
+        xAccessor={(d) => d.date}
+        yAccessor={(d) => d.count}
+      />
+
+      <Tooltip
+        snapTooltipToDatumX
+        snapTooltipToDatumY
+        showVerticalCrosshair
+        renderTooltip={({ tooltipData }: any) => (
+          <div className="text-xs">
+            <div className="mb-1">Swaps</div>
+
+            <div className="mb-1">
+              {dayjs(tooltipData.nearestDatum.datum.date.split('T')[0]).format(
+                'dddd, YYYY MMMM DD',
+              )}
+            </div>
+            <div className="mb-1">
+              Count: {tooltipData.nearestDatum.datum.count}
+            </div>
+          </div>
+        )}
+      />
+    </XYChart>
+  );
+};

components/ChartBox/WeeklyChart.tsx

@@ -0,0 +1,93 @@
+import { curveCardinal } from '@visx/curve';
+import {
+  AnimatedAxis,
+  AnimatedGrid,
+  AnimatedLineSeries,
+  XYChart,
+  Tooltip,
+} from '@visx/xychart';
+import { customTheme, getDayOfMonth, getRoundedCount } from './Chart.helper';
+import dayjs from 'dayjs';
+import { CustomTick } from './CustomTick';
+import { ChartProps } from './Chart.type';
+
+export const WeeklyChart = (props: ChartProps) => {
+  const { data } = props;
+  const currentWeek = data.slice(24, 31).map((item) => ({ ...item }));
+  const prevWeek = data.slice(17, 24).map((item) => ({ ...item }));
+
+  // Update the date property of each item in prevWeek with the corresponding item from deepCopyCurrentWeek
+  prevWeek.forEach((item, index) => {
+    prevWeek[index].date = currentWeek[index].date;
+  });
+
+  return (
+    <XYChart
+      theme={customTheme}
+      height={300}
+      xScale={{ type: 'band' }}
+      yScale={{ type: 'linear' }}>
+      <AnimatedAxis
+        tickComponent={(props) => <CustomTick {...props} />}
+        orientation="bottom"
+        hideTicks
+        numTicks={7}
+        tickFormat={(d) => getDayOfMonth(d)}
+      />
+      <AnimatedAxis
+        orientation="left"
+        hideAxisLine
+        hideTicks
+        numTicks={3}
+        tickFormat={(c) => getRoundedCount(c).toString()}
+        tickComponent={(props) => <CustomTick {...props} />}
+      />
+      <AnimatedGrid
+        lineStyle={{
+          stroke: 'rgba(184, 184, 184, 0.30)',
+          strokeLinecap: 'round',
+          strokeWidth: 1,
+        }}
+        columns={false}
+        numTicks={3}
+      />
+
+      <AnimatedLineSeries
+        curve={curveCardinal}
+        dataKey="Current Week"
+        data={currentWeek}
+        stroke="#469BF5"
+        xAccessor={(d) => d.date}
+        yAccessor={(d) => d.count}
+      />
+      <AnimatedLineSeries
+        curve={curveCardinal}
+        dataKey="Prev Week"
+        data={prevWeek}
+        stroke="#242D5B"
+        xAccessor={(d) => d.date}
+        yAccessor={(d) => d.count}
+      />
+
+      <Tooltip
+        snapTooltipToDatumX
+        snapTooltipToDatumY
+        showVerticalCrosshair
+        renderTooltip={({ tooltipData }: any) => (
+          <div className="text-xs">
+            <div className="mb-1">Swaps</div>
+
+            <div className="mb-1">
+              {dayjs(tooltipData.nearestDatum.datum.date.split('T')[0]).format(
+                'dddd, YYYY MMMM DD',
+              )}
+            </div>
+            <div className="mb-1">
+              Count: {tooltipData.nearestDatum.datum.count}
+            </div>
+          </div>
+        )}
+      />
+    </XYChart>
+  );
+};