refactor(frontend): rename and move TimeRangeManager component

DmitriySevkovych · Aug 9, 2024 · 858818a · 858818a
1 parent 0ee6178
commit 858818a
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 50 deletions.
diff --git a/...nts/cashflow/CashflowTimeRangeManager.tsx → ...ntend/src/components/TimeRangeManager.tsx b/...nts/cashflow/CashflowTimeRangeManager.tsx → ...ntend/src/components/TimeRangeManager.tsx
@@ -8,49 +8,49 @@ import {
     DialogHeader,
     DialogTitle,
     DialogTrigger,
-} from '../../lib/shadcn/Dialog'
-import { Label } from '../../lib/shadcn/Label'
-import { RadioGroup, RadioGroupItem } from '../../lib/shadcn/Radio'
-import { CalendarStandalone } from '../Calendar'
+} from '../lib/shadcn/Dialog'
+import { Label } from '../lib/shadcn/Label'
+import { RadioGroup, RadioGroupItem } from '../lib/shadcn/Radio'
+import { CalendarStandalone } from './Calendar'
 
-export type CashflowTimeRangeID =
+export type TimeRangeID =
     | 'lastThreeMonths'
     | 'lastYear'
     | 'currentYear'
     | 'custom'
 
-const cashflowTimeRanges = {
+const timeRangeSelectionOptions = {
     lastThreeMonths: {
-        id: 'lastThreeMonths' satisfies CashflowTimeRangeID,
+        id: 'lastThreeMonths' satisfies TimeRangeID,
         label: 'Last three months',
     },
     lastYear: {
-        id: 'lastYear' satisfies CashflowTimeRangeID,
+        id: 'lastYear' satisfies TimeRangeID,
         label: 'Last year',
     },
     currentYear: {
-        id: 'currentYear' satisfies CashflowTimeRangeID,
+        id: 'currentYear' satisfies TimeRangeID,
         label: 'Current year',
     },
     custom: {
-        id: 'custom' satisfies CashflowTimeRangeID,
+        id: 'custom' satisfies TimeRangeID,
         label: undefined,
     },
 } as const
 
-export type CashflowTimeRange = TimeRange & { id: CashflowTimeRangeID }
+export type TimeRangeSelection = TimeRange & { id: TimeRangeID }
 
 const _getAdjustedTimeRange = (
-    currentTimeRange: CashflowTimeRange,
+    currentTimeRange: TimeRangeSelection,
     value: Date,
     key: keyof TimeRange
-): CashflowTimeRange => {
+): TimeRangeSelection => {
     const update = { ...currentTimeRange }
     update[key] = value
     return update
 }
 
-const _getTimeRange = (id: CashflowTimeRangeID): CashflowTimeRange => {
+const _getTimeRange = (id: TimeRangeID): TimeRangeSelection => {
     let timeRange
     switch (id) {
         case 'lastThreeMonths':
@@ -82,19 +82,16 @@ const _getTimeRange = (id: CashflowTimeRangeID): CashflowTimeRange => {
     return { id, ...timeRange }
 }
 
-export const getDefaultTimeRange = (): CashflowTimeRange => {
+export const getDefaultTimeRange = (): TimeRangeSelection => {
     return _getTimeRange('lastThreeMonths')
 }
 
-type CashflowTimeRangeItemProps = {
+type TimeRangeItemProps = {
     id: string
     label: string | undefined
 }
 
-const CashflowTimeRangeItem: React.FC<CashflowTimeRangeItemProps> = ({
-    id,
-    label,
-}) => {
+const TimeRangeItem: React.FC<TimeRangeItemProps> = ({ id, label }) => {
     return (
         <div className="flex items-center space-x-3">
             <RadioGroupItem value={id} id={id} />
@@ -105,12 +102,12 @@ const CashflowTimeRangeItem: React.FC<CashflowTimeRangeItemProps> = ({
     )
 }
 
-type CashflowTimeRangeManagerProps = {
-    timeRange: CashflowTimeRange
-    setTimeRange: React.Dispatch<React.SetStateAction<CashflowTimeRange>>
+type TimeRangeManagerProps = {
+    timeRange: TimeRangeSelection
+    setTimeRange: React.Dispatch<React.SetStateAction<TimeRangeSelection>>
 }
 
-const CashflowTimeRangeManager: React.FC<CashflowTimeRangeManagerProps> = ({
+const TimeRangeManager: React.FC<TimeRangeManagerProps> = ({
     timeRange,
     setTimeRange,
 }) => {
@@ -129,14 +126,14 @@ const CashflowTimeRangeManager: React.FC<CashflowTimeRangeManagerProps> = ({
 
                     <RadioGroup
                         value={timeRange.id}
-                        onValueChange={(id: CashflowTimeRangeID) =>
+                        onValueChange={(id: TimeRangeID) =>
                             setTimeRange(_getTimeRange(id))
                         }
                     >
-                        {Object.values(cashflowTimeRanges)
+                        {Object.values(timeRangeSelectionOptions)
                             .filter((r) => r.id !== 'custom')
                             .map((r) => (
-                                <CashflowTimeRangeItem key={r.id} {...r} />
+                                <TimeRangeItem key={r.id} {...r} />
                             ))}
 
                         {/* class ml-8 compensates for left out radio button */}
@@ -179,4 +176,4 @@ const CashflowTimeRangeManager: React.FC<CashflowTimeRangeManagerProps> = ({
     )
 }
 
-export default CashflowTimeRangeManager
+export default TimeRangeManager
diff --git a/apps/frontend/src/components/charts/AggregationAreaChart.tsx b/apps/frontend/src/components/charts/AggregationAreaChart.tsx
@@ -111,14 +111,18 @@ const AggregationAreaChart: React.FC<AggregationAreaChartProps> = ({
                     <XAxis dataKey="month" />
                     <YAxis />
                     <Tooltip />
-                    {drawCategories.map((category) => (
+                    {drawCategories.map((category, index) => (
                         <Area
                             key={`area-chart-${category}`}
                             type="monotone"
                             dataKey={category}
-                            stroke="#8884d8"
+                            stroke={index % 2 === 0 ? '#8884d8' : '#82ca9d'}
                             fillOpacity={1}
-                            fill="url(#colorUv)"
+                            fill={
+                                index % 2 === 0
+                                    ? 'url(#colorUv)'
+                                    : 'url(#colorPv)'
+                            }
                         />
                     ))}
                     <Area type="monotone" dataKey="_placeholderToDrawXAxis" />

diff --git a/apps/frontend/src/pages/analysis/cashflow.tsx b/apps/frontend/src/pages/analysis/cashflow.tsx
@@ -1,26 +1,22 @@
-import {
-    TransactionAggregate,
-    TransactionAggregateByOrigin,
-    getMonthDifference,
-} from 'domain-model'
+import { TransactionAggregateByOrigin, getMonthDifference } from 'domain-model'
 import React, { useState } from 'react'
 import useSWR from 'swr'
 
+import TimeRangeManager, {
+    TimeRangeSelection,
+    getDefaultTimeRange,
+} from '../../components/TimeRangeManager'
 import { Loader, SectionHeading } from '../../components/Typography'
 import CashflowBalance from '../../components/cashflow/CashflowBalance'
 import CashflowExpenses from '../../components/cashflow/CashflowExpenses'
 import CashflowIncome from '../../components/cashflow/CashflowIncome'
-import CashflowTimeRangeManager, {
-    CashflowTimeRange,
-    getDefaultTimeRange,
-} from '../../components/cashflow/CashflowTimeRangeManager'
 import { PageWithBackButton } from '../../components/pages/PageWithBackButton'
 import { safeFetch } from '../../helpers/requests'
 import { API, PAGES } from '../../helpers/routes'
 
 const _fetchTransactionAggregates = async (
     url: string,
-    timeRange: CashflowTimeRange
+    timeRange: TimeRangeSelection
 ): Promise<TransactionAggregateByOrigin[]> => {
     const res = await safeFetch(url, {
         method: 'POST',
@@ -41,7 +37,7 @@ const _fetchTransactionAggregates = async (
 
 const CashflowAnalysisPage: React.FC = () => {
     // Local state
-    const [timeRange, setTimeRange] = useState<CashflowTimeRange>(
+    const [timeRange, setTimeRange] = useState<TimeRangeSelection>(
         getDefaultTimeRange()
     )
 
@@ -66,7 +62,7 @@ const CashflowAnalysisPage: React.FC = () => {
             className="relative flex h-full flex-col justify-between"
             stickyButton={
                 <div className="sticky bottom-0 right-0 place-self-end pb-6">
-                    <CashflowTimeRangeManager
+                    <TimeRangeManager
                         timeRange={timeRange}
                         setTimeRange={setTimeRange}
                     />

diff --git a/apps/frontend/src/pages/analysis/charts.tsx b/apps/frontend/src/pages/analysis/charts.tsx
@@ -2,19 +2,19 @@ import { TransactionAggregate } from 'domain-model'
 import React, { useState } from 'react'
 import useSWR from 'swr'
 
-import { Loader } from '../../components/Typography'
-import CashflowTimeRangeManager, {
-    CashflowTimeRange,
+import TimeRangeManager, {
+    TimeRangeSelection,
     getDefaultTimeRange,
-} from '../../components/cashflow/CashflowTimeRangeManager'
+} from '../../components/TimeRangeManager'
+import { Loader } from '../../components/Typography'
 import AggregationAreaChart from '../../components/charts/AggregationAreaChart'
 import { PageWithBackButton } from '../../components/pages/PageWithBackButton'
 import { safeFetch } from '../../helpers/requests'
 import { API, PAGES } from '../../helpers/routes'
 
 const _fetchMonthlyTransactionAggregates = async (
     url: string,
-    timeRange: CashflowTimeRange
+    timeRange: TimeRangeSelection
 ): Promise<TransactionAggregate[]> => {
     const res = await safeFetch(url, {
         method: 'POST',
@@ -39,7 +39,7 @@ const _fetchMonthlyTransactionAggregates = async (
 
 const AnalysisChartsPage = () => {
     // Local state
-    const [timeRange, setTimeRange] = useState<CashflowTimeRange>(
+    const [timeRange, setTimeRange] = useState<TimeRangeSelection>(
         getDefaultTimeRange()
     )
 
@@ -60,7 +60,7 @@ const AnalysisChartsPage = () => {
             className="flex h-full flex-col justify-between"
             stickyButton={
                 <div className="sticky bottom-0 right-0 place-self-end pb-6">
-                    <CashflowTimeRangeManager
+                    <TimeRangeManager
                         timeRange={timeRange}
                         setTimeRange={setTimeRange}
                     />