feat: profit and loss - quarter and year scopes

src/components/DatePicker/DatePicker.tsx

@@ -74,7 +74,11 @@ export const DatePicker = ({
     ? 'MMM, yyyy'
     : mode === 'timePicker'
       ? 'h:mm aa'
-      : 'MMM d, yyyy',
+      : mode === 'yearPicker'
+        ? 'yyyy'
+        : mode === 'quarterPicker'
+          ? '\'Q\'Q yyyy'
+          : 'MMM d, yyyy',
   timeIntervals = 15,
   timeCaption,
   placeholderText: _placeholderText,
@@ -134,6 +138,7 @@ export const DatePicker = ({
     } catch (_err) {
       return
     }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selected])
 
   useEffect(() => {
@@ -145,12 +150,14 @@ export const DatePicker = ({
     } else {
       setPickerDate(false)
     }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedDates])
 
   useEffect(() => {
     if (isRangeMode(mode)) {
       setSelectedDates([startDate, endDate])
     }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [startDate, endDate])
 
   const wrapperClassNames = classNames(
@@ -286,6 +293,8 @@ export const DatePicker = ({
         showMonthYearPicker={
           mode === 'monthPicker' || mode === 'monthRangePicker'
         }
+        showQuarterYearPicker={mode === 'quarterPicker'}
+        showYearPicker={mode === 'yearPicker'}
         dateFormat={dateFormat}
         renderDayContents={day => (
           <span className='Layer__datepicker__day-contents'>{day}</span>

src/components/DatePicker/ModeSelector/DatePickerModeSelector.tsx

@@ -7,6 +7,8 @@ export type RangePickerMode =
   | 'dayRangePicker'
   | 'monthRangePicker'
   | 'monthPicker'
+  | 'quarterPicker'
+  | 'yearPicker'
 
 export type DatePickerMode = SingularPickerMode | RangePickerMode
 
@@ -18,6 +20,8 @@ const DATE_RANGE_MODE_CONFIG: Record<DatePickerMode, { label: string }> = {
   dayRangePicker: { label: 'Select dates' },
   monthPicker: { label: 'Month' },
   monthRangePicker: { label: 'Select months' },
+  quarterPicker: { label: 'Quarter' },
+  yearPicker: { label: 'Year' },
 }
 
 function toToggleOptions(allowedModes: ReadonlyArray<DatePickerMode>) {

src/components/ProfitAndLoss/ProfitAndLoss.tsx

@@ -5,6 +5,7 @@ import { useProfitAndLossComparison } from '../../hooks/useProfitAndLossComparis
 import { ReportingBasis } from '../../types'
 import { Container } from '../Container'
 import { ProfitAndLossChart } from '../ProfitAndLossChart'
+import { ProfitAndLossChartLegend } from '../ProfitAndLossChartLegend/ProfitAndLossChartLegend'
 import { ProfitAndLossCompareOptions } from '../ProfitAndLossCompareOptions'
 import { ProfitAndLossDatePicker } from '../ProfitAndLossDatePicker'
 import { ProfitAndLossDetailedCharts } from '../ProfitAndLossDetailedCharts'
@@ -40,6 +41,8 @@ const PNLContext = createContext<PNLContextType>({
     revenue: undefined,
   },
   tagFilter: undefined,
+  period: 'month',
+  setPeriod: () => {},
 })
 
 type Props = PropsWithChildren & {
@@ -74,6 +77,7 @@ const ProfitAndLoss = ({
 }
 
 ProfitAndLoss.Chart = ProfitAndLossChart
+ProfitAndLoss.ChartLegend = ProfitAndLossChartLegend
 ProfitAndLoss.Context = PNLContext
 ProfitAndLoss.ComparisonContext = PNLComparisonContext
 ProfitAndLoss.DatePicker = ProfitAndLossDatePicker

src/components/ProfitAndLossChart/Indicator.tsx

@@ -15,26 +15,30 @@ type Props = BaseProps & {
   setAnimateFrom: (x: number) => void
   customCursorSize: { width: number; height: number }
   setCustomCursorSize: (width: number, height: number, x: number) => void
+  barMargin?: number
 }
+
 const emptyViewBox = { x: 0, y: 0, width: 0, height: 0 }
+
 export const Indicator = ({
   className,
   animateFrom,
   setAnimateFrom,
   customCursorSize,
   setCustomCursorSize,
   viewBox = {},
+  barMargin = 6,
 }: Props) => {
   const [opacityIndicator, setOpacityIndicator] = useState(0)
 
   const { x: animateTo = 0, width = 0 } =
     'x' in viewBox ? viewBox : emptyViewBox
-  const margin = width > 12 ? 12 : 6
+  const margin = barMargin
   const boxWidth = width + margin
   const xOffset = boxWidth / 2
   const borderRadius = 6
   const rectWidth = `${boxWidth}px`
-  const rectHeight = 'calc(100% - 38px)'
+  const rectHeight = 'calc(100% - 8px)'
 
   // useEffect callbacks run after the browser paints
   useEffect(() => {
@@ -46,6 +50,7 @@ export const Indicator = ({
     setTimeout(() => {
       setOpacityIndicator(1)
     }, 200)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [animateTo])
 
   if (!className?.match(/selected/)) {
@@ -57,15 +62,14 @@ export const Indicator = ({
       const refRectWidth = ref.getBoundingClientRect().width
       const refRectHeight = ref.getBoundingClientRect().height
       if (
-        customCursorSize.width !== refRectWidth ||
-        customCursorSize.height !== refRectHeight
+        customCursorSize.width !== refRectWidth
+        || customCursorSize.height !== refRectHeight
       ) {
-        setCustomCursorSize(refRectWidth, refRectHeight, actualX - xOffset)
+        setCustomCursorSize(refRectWidth, refRectHeight, animateTo - xOffset)
       }
     }
   }
 
-  const actualX = animateFrom === -1 ? animateTo : animateFrom
   return (
     <rect
       ref={rectRef}
@@ -75,8 +79,8 @@ export const Indicator = ({
       style={{
         width: rectWidth,
         // @ts-expect-error -- y is fine but x apparently isn't!
-        x: actualX - xOffset / 2 + margin / 4,
-        y: 22,
+        x: animateTo - margin / 2,
+        y: 4,
         height: rectHeight,
         opacity: opacityIndicator,
       }}