Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom Reports: TS strict changes #3 #2728

Merged
merged 12 commits into from
May 16, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 37 additions & 23 deletions packages/desktop-client/src/components/reports/ChooseGraph.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
// @ts-strict-ignore
import React, { useRef } from 'react';
import React, { type UIEvent, useRef } from 'react';

import { type DataEntity } from 'loot-core/src/types/models/reports';
import { type RuleConditionEntity } from 'loot-core/types/models/rule';
Expand Down Expand Up @@ -29,55 +28,70 @@ type ChooseGraphProps = {
interval: string;
setScrollWidth?: (value: number) => void;
viewLabels?: boolean;
compact?: boolean;
compact: boolean;
style?: CSSProperties;
showHiddenCategories?: boolean;
showOffBudget?: boolean;
intervalsCount?: number;
intervalsCount: number;
};

export function ChooseGraph({
data,
filters,
filters = [],
mode,
graphType,
balanceType,
groupBy,
interval,
setScrollWidth,
viewLabels,
viewLabels = false,
compact,
style,
showHiddenCategories,
showOffBudget,
showHiddenCategories = false,
showOffBudget = false,
intervalsCount,
}: ChooseGraphProps) {
const graphStyle = compact ? { ...style } : { flexGrow: 1 };
const balanceTypeOp = ReportOptions.balanceTypeMap.get(balanceType);
const balanceTypeOp =
ReportOptions.balanceTypeMap.get(balanceType) || 'totalDebts';

const saveScrollWidth = value => {
setScrollWidth(!value ? 0 : value);
const saveScrollWidth = (value: number) => {
setScrollWidth?.(value || 0);
};

const rowStyle = compact && { flex: '0 0 20px', height: 20 };
const compactStyle = compact && { ...styles.tinyText };
const rowStyle: CSSProperties = compact
? { flex: '0 0 20px', height: 20 }
: {};
const compactStyle: CSSProperties = compact ? { ...styles.tinyText } : {};

const headerScrollRef = useRef<HTMLDivElement>(null);
const listScrollRef = useRef<HTMLDivElement>(null);
const totalScrollRef = useRef<HTMLDivElement>(null);

const handleScroll = scroll => {
if (scroll.target.id === 'header') {
totalScrollRef.current.scrollLeft = scroll.target.scrollLeft;
listScrollRef.current.scrollLeft = scroll.target.scrollLeft;
const handleScroll = (scroll: UIEvent<HTMLDivElement>) => {
if (
scroll.currentTarget.id === 'header' &&
totalScrollRef.current &&
listScrollRef.current
) {
totalScrollRef.current.scrollLeft = scroll.currentTarget.scrollLeft;
listScrollRef.current.scrollLeft = scroll.currentTarget.scrollLeft;
}
if (scroll.target.id === 'total') {
headerScrollRef.current.scrollLeft = scroll.target.scrollLeft;
listScrollRef.current.scrollLeft = scroll.target.scrollLeft;
if (
scroll.currentTarget.id === 'total' &&
headerScrollRef.current &&
listScrollRef.current
) {
headerScrollRef.current.scrollLeft = scroll.currentTarget.scrollLeft;
listScrollRef.current.scrollLeft = scroll.currentTarget.scrollLeft;
}
if (scroll.target.id === 'list') {
headerScrollRef.current.scrollLeft = scroll.target.scrollLeft;
totalScrollRef.current.scrollLeft = scroll.target.scrollLeft;
if (
scroll.currentTarget.id === 'list' &&
totalScrollRef.current &&
headerScrollRef.current
) {
headerScrollRef.current.scrollLeft = scroll.currentTarget.scrollLeft;
totalScrollRef.current.scrollLeft = scroll.currentTarget.scrollLeft;
}
};

Expand Down
9 changes: 6 additions & 3 deletions packages/desktop-client/src/components/reports/Container.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
// @ts-strict-ignore
import React, { useRef, type ReactNode } from 'react';
import AutoSizer from 'react-virtualized-auto-sizer';

Expand All @@ -7,7 +6,11 @@ import { View } from '../common/View';

type ContainerProps = {
style?: CSSProperties;
children: (width: number, height: number, host: HTMLDivElement) => ReactNode;
children: (
width: number,
height: number,
host: HTMLDivElement | null,
) => ReactNode;
};
export function Container({ style, children }: ContainerProps) {
const portalHost = useRef<HTMLDivElement>(null);
Expand All @@ -18,7 +21,7 @@ export function Container({ style, children }: ContainerProps) {
>
<div ref={portalHost} />
<AutoSizer>
{({ width, height }) => (
{({ width, height }: { width: number; height: number }) => (
<div style={{ width, height }}>
{children(width, height, portalHost.current)}
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
// @ts-strict-ignore
import React, { type HTMLProps } from 'react';

import { type CSSProperties, theme } from '../../style';
Expand All @@ -10,7 +9,7 @@ import { Tooltip } from '../tooltips';
type GraphButtonProps = HTMLProps<HTMLButtonElement> & {
selected?: boolean;
style?: CSSProperties;
onSelect?: (newValue) => void;
onSelect?: (newValue: string) => void;
title?: string;
disabled?: boolean;
};
Expand Down
42 changes: 31 additions & 11 deletions packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
// @ts-strict-ignore
import React from 'react';

import { css } from 'glamor';
Expand All @@ -25,7 +24,6 @@ import { theme } from '../../../style';
import { type CSSProperties } from '../../../style';
import { AlignedText } from '../../common/AlignedText';
import { Container } from '../Container';
import { numberFormatterTooltip } from '../numberFormatter';

import { adjustTextSize } from './adjustTextSize';
import { renderCustomLabel } from './renderCustomLabel';
Expand All @@ -42,7 +40,7 @@ type PayloadItem = {
type CustomTooltipProps = {
active?: boolean;
payload?: PayloadItem[];
balanceTypeOp?: string;
balanceTypeOp: 'totalAssets' | 'totalTotals' | 'totalDebts';
};

const CustomTooltip = ({
Expand Down Expand Up @@ -95,16 +93,37 @@ const CustomTooltip = ({
</div>
);
}

return <div />;
};

type PropsItem = {
index?: number;
x?: string | number;
y?: string | number;
value?: string | number;
width?: string | number;
};

const customLabel = (props, width, end) => {
const customLabel = ({
props,
width,
end,
}: {
props: PropsItem;
width: number;
end: number;
}) => {
//Add margin to first and last object
const calcX =
props.x + (props.index === end ? -10 : props.index === 0 ? 5 : 0);
const calcY = props.y - (props.value > 0 ? 10 : -10);
(typeof props.x === 'number' ? props.x : 0) +
(props.index === end ? -10 : props.index === 0 ? 5 : 0);
const calcY =
(typeof props.y === 'number' ? props.y : 0) -
((typeof props.value === 'number' ? props.value : 0) > 0 ? 10 : -10);
const textAnchor = props.index === 0 ? 'left' : 'middle';
const display =
props.value !== 0 && `${amountToCurrencyNoDecimal(props.value)}`;
props.value !== 0 ? `${amountToCurrencyNoDecimal(props.value)}` : '';
const textSize = adjustTextSize({ sized: width, type: 'area' });

return renderCustomLabel(calcX, calcY, textAnchor, display, textSize);
Expand All @@ -113,7 +132,7 @@ const customLabel = (props, width, end) => {
type AreaGraphProps = {
style?: CSSProperties;
data: DataEntity;
balanceTypeOp: string;
balanceTypeOp: 'totalAssets' | 'totalTotals' | 'totalDebts';
compact?: boolean;
viewLabels: boolean;
};
Expand Down Expand Up @@ -148,7 +167,7 @@ export function AreaGraph({
: Math.ceil((dataMax + extendRangeAmount) / 100) * 100;
const lastLabel = data.intervalData.length - 1;

const tickFormatter = tick => {
const tickFormatter = (tick: number) => {
if (!privacyMode) return `${amountToCurrencyNoDecimal(tick)}`; // Formats the tick values as strings with commas
return '...';
};
Expand Down Expand Up @@ -216,7 +235,6 @@ export function AreaGraph({
{(!isNarrowWidth || !compact) && (
<Tooltip
content={<CustomTooltip balanceTypeOp={balanceTypeOp} />}
formatter={numberFormatterTooltip}
isAnimationActive={false}
/>
)}
Expand Down Expand Up @@ -272,7 +290,9 @@ export function AreaGraph({
{viewLabels && !compact && (
<LabelList
dataKey={balanceTypeOp}
content={e => customLabel(e, width, lastLabel)}
content={props =>
customLabel({ props, width, end: lastLabel })
}
/>
)}
</Area>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ type PayloadItem = {
type CustomTooltipProps = {
active?: boolean;
payload?: PayloadItem[];
balanceTypeOp?: string;
balanceTypeOp?: 'totalAssets' | 'totalDebts' | 'totalTotals';
yAxis?: string;
};

Expand Down Expand Up @@ -136,7 +136,7 @@ type BarGraphProps = {
data: DataEntity;
filters: RuleConditionEntity[];
groupBy: string;
balanceTypeOp: string;
balanceTypeOp: 'totalAssets' | 'totalDebts' | 'totalTotals';
compact?: boolean;
viewLabels: boolean;
showHiddenCategories?: boolean;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ type DonutGraphProps = {
data: DataEntity;
filters: RuleConditionEntity[];
groupBy: string;
balanceTypeOp: string;
balanceTypeOp: 'totalAssets' | 'totalDebts' | 'totalTotals';
carkom marked this conversation as resolved.
Show resolved Hide resolved
compact?: boolean;
viewLabels: boolean;
showHiddenCategories?: boolean;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ type LineGraphProps = {
filters: RuleConditionEntity[];
groupBy: string;
compact?: boolean;
balanceTypeOp: string;
balanceTypeOp: 'totalAssets' | 'totalDebts' | 'totalTotals';
showHiddenCategories?: boolean;
showOffBudget?: boolean;
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ type StackedBarGraphProps = {
groupBy: string;
compact?: boolean;
viewLabels: boolean;
balanceTypeOp: string;
balanceTypeOp: 'totalAssets' | 'totalDebts' | 'totalTotals';
showHiddenCategories?: boolean;
showOffBudget?: boolean;
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ type showActivityProps = {
navigate: NavigateFunction;
categories: { list: CategoryEntity[]; grouped: CategoryGroupEntity[] };
accounts: AccountEntity[];
balanceTypeOp: string;
balanceTypeOp: 'totalAssets' | 'totalDebts' | 'totalTotals';
filters: RuleConditionEntity[];
showHiddenCategories: boolean;
showOffBudget: boolean;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export function calculateLegend(
calcDataFiltered: GroupedEntity[],
groupBy: string,
graphType?: string,
balanceTypeOp?: keyof GroupedEntity,
balanceTypeOp?: 'totalAssets' | 'totalDebts' | 'totalTotals',
): LegendEntity[] {
const colorScale = getColorScale('qualitative');
const chooseData =
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export function filterEmptyRows({
}: {
showEmpty: boolean;
data: GroupedEntity;
balanceTypeOp?: keyof GroupedEntity;
balanceTypeOp?: 'totalAssets' | 'totalDebts' | 'totalTotals';
}): boolean {
let showHide: boolean;
if (balanceTypeOp === 'totalTotals') {
Expand Down
Loading
Loading