From c04376e9c51006095c288aefe83e559961a6cbe3 Mon Sep 17 00:00:00 2001 From: carkom Date: Thu, 7 Dec 2023 16:43:20 +0000 Subject: [PATCH 01/15] work --- .../src/components/reports/ChooseGraph.tsx | 13 +- .../src/components/reports/ReportTopbar.js | 1 - .../components/reports/graphs/AreaGraph.tsx | 10 +- .../components/reports/graphs/BarGraph.tsx | 32 ++++ .../components/reports/graphs/DonutGraph.tsx | 143 ++++++++++++++++-- .../reports/graphs/StackedBarGraph.tsx | 37 ++++- .../reports/graphs/adjustTextSize.ts | 15 ++ .../reports/reports/CustomReport.js | 1 + 8 files changed, 232 insertions(+), 20 deletions(-) create mode 100644 packages/desktop-client/src/components/reports/graphs/adjustTextSize.ts diff --git a/packages/desktop-client/src/components/reports/ChooseGraph.tsx b/packages/desktop-client/src/components/reports/ChooseGraph.tsx index 4dca723153a..f8f680d07a9 100644 --- a/packages/desktop-client/src/components/reports/ChooseGraph.tsx +++ b/packages/desktop-client/src/components/reports/ChooseGraph.tsx @@ -24,6 +24,7 @@ export function ChooseGraph({ scrollWidth, setScrollWidth, months, + viewLabels, }) { const saveScrollWidth = value => { setScrollWidth(!value ? 0 : value); @@ -44,6 +45,7 @@ export function ChooseGraph({ style={{ flexGrow: 1 }} data={data} balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)} + viewLabels={viewLabels} /> ); } @@ -55,6 +57,7 @@ export function ChooseGraph({ groupBy={groupBy} empty={empty} balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)} + viewLabels={viewLabels} /> ); } @@ -69,6 +72,7 @@ export function ChooseGraph({ groupBy={groupBy} empty={empty} balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)} + viewLabels={viewLabels} /> ); } @@ -76,7 +80,14 @@ export function ChooseGraph({ return ; } if (graphType === 'StackedBarGraph') { - return ; + return ( + + ); } if (graphType === 'TableGraph') { return ( diff --git a/packages/desktop-client/src/components/reports/ReportTopbar.js b/packages/desktop-client/src/components/reports/ReportTopbar.js index 61abf5de09b..dd8ea7a6f88 100644 --- a/packages/desktop-client/src/components/reports/ReportTopbar.js +++ b/packages/desktop-client/src/components/reports/ReportTopbar.js @@ -139,7 +139,6 @@ export function ReportTopbar({ }} style={{ marginRight: 15 }} title="Show labels" - disabled={true} > diff --git a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx index 50022af9df1..4830a3dc88f 100644 --- a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx @@ -95,9 +95,16 @@ type AreaGraphProps = { data; balanceTypeOp: string; compact?: boolean; + viewLabels: boolean; }; -function AreaGraph({ style, data, balanceTypeOp, compact }: AreaGraphProps) { +function AreaGraph({ + style, + data, + balanceTypeOp, + compact, + viewLabels, +}: AreaGraphProps) { const privacyMode = usePrivacyMode(); const tickFormatter = tick => { @@ -180,6 +187,7 @@ function AreaGraph({ style, data, balanceTypeOp, compact }: AreaGraphProps) { { + return props.height > 20 ? ( + + {props.value.toFixed(0)} + + ) : ( + + ); +}; + /* Descoped for future PR type CustomLegendProps = { active?: boolean; @@ -134,6 +152,7 @@ type BarGraphProps = { balanceTypeOp; empty: boolean; compact?: boolean; + viewLabels: boolean; }; function BarGraph({ @@ -143,6 +162,7 @@ function BarGraph({ empty, balanceTypeOp, compact, + viewLabels, }: BarGraphProps) { const privacyMode = usePrivacyMode(); @@ -218,6 +238,12 @@ function BarGraph({ )} getVal(val)} stackId="a"> + {viewLabels && ( + getVal(val)} + content={renderCustomLabel} + /> + )} {data[splitData] .filter(i => (!empty ? i[balanceTypeOp] !== 0 : true)) .map((entry, index) => ( @@ -236,6 +262,12 @@ function BarGraph({ {yAxis === 'date' && balanceTypeOp === 'totalTotals' && ( + {viewLabels && ( + getVal(val)} + content={renderCustomLabel} + /> + )} {data[splitData] .filter(i => (!empty ? i[balanceTypeOp] !== 0 : true)) .map((entry, index) => ( diff --git a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx index a8ad506a00e..01e7bb538b9 100644 --- a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx @@ -1,25 +1,22 @@ -import React from 'react'; +import React, { useState } from 'react'; -import { css } from 'glamor'; import { PieChart, Pie, Cell, + Sector, //Legend, - Tooltip, + //Tooltip, ResponsiveContainer, } from 'recharts'; -import { amountToCurrency } from 'loot-core/src/shared/util'; - -import { theme } from '../../../style'; import { type CSSProperties } from '../../../style'; -import Text from '../../common/Text'; -import PrivacyFilter from '../../PrivacyFilter'; import { getColorScale } from '../chart-theme'; import Container from '../Container'; -import numberFormatterTooltip from '../numberFormatter'; +import adjustTextSize from './adjustTextSize'; + +/* type PayloadItem = { name: string; value: string; @@ -70,6 +67,116 @@ const CustomTooltip = ({ active, payload, label }: CustomTooltipProps) => { ); } }; +*/ + +const RADIAN = Math.PI / 180; +const ActiveShape = props => { + const { + cx, + cy, + midAngle, + innerRadius, + outerRadius, + startAngle, + endAngle, + fill, + payload, + percent, + value, + } = props; + const sin = Math.sin(-RADIAN * midAngle); + const cos = Math.cos(-RADIAN * midAngle); + const sx = cx + (innerRadius - 10) * cos; + const sy = cy + (innerRadius - 10) * sin; + const mx = cx + (innerRadius - 30) * cos; + const my = cy + (innerRadius - 30) * sin; + const ex = cx + (cos >= 0 ? 1 : -1) * payload.name.length * 4; + const ey = cy + 8; + //const ex = mx + (cos <= 0 ? 1 : -1) * 40; + //const ey = my + (sin <= 0 ? 1 : -1) * 40; + const textAnchor = cos <= 0 ? 'start' : 'end'; + + return ( + + + + + + {`${payload.name}`} + {`${value.toFixed(2)}`} + + {`(${(percent * 100).toFixed(2)}%)`} + + + ); +}; + +const CustomLabel = ({ + cx, + cy, + midAngle, + innerRadius, + outerRadius, + percent, + index, +}) => { + const radius = innerRadius + (outerRadius - innerRadius) * 0.5; + const x = cx + radius * Math.cos(-midAngle * RADIAN); + const y = cy + radius * Math.sin(-midAngle * RADIAN); + const size = cx > cy ? cy : cx; + + return percent > 0.05 ? ( + cx ? 'start' : 'end'} + dominantBaseline="central" + fontSize={adjustTextSize(size)} + > + {`${(percent * 100).toFixed(0)}%`} + + ) : ( + + ); +}; /* Descoped for future PR type CustomLegendProps = { @@ -99,6 +206,7 @@ type DonutGraphProps = { balanceTypeOp: string; empty: boolean; compact?: boolean; + viewLabels: boolean; }; function DonutGraph({ @@ -108,6 +216,7 @@ function DonutGraph({ empty, balanceTypeOp, compact, + viewLabels, }: DonutGraphProps) { const colorScale = getColorScale('qualitative'); const yAxis = ['Month', 'Year'].includes(groupBy) ? 'date' : 'name'; @@ -121,6 +230,12 @@ function DonutGraph({ } }; + const [activeIndex, setActiveIndex] = useState(0); + + const onPieEnter = (_, index) => { + setActiveIndex(index); + }; + return ( } /> } - } - formatter={numberFormatterTooltip} - isAnimationActive={false} - /> getVal(val)} nameKey={yAxis} isAnimationActive={false} + labelLine={false} + label={viewLabels && CustomLabel} data={data[splitData].filter(i => !empty ? i[balanceTypeOp] !== 0 : true, )} innerRadius={Math.min(width, height) * 0.2} fill="#8884d8" + onMouseEnter={onPieEnter} > {data[splitData].map((entry, index) => ( { } }; +const renderCustomLabel = props => { + return props.height > 20 ? ( + + {props.value.toFixed(0)} + + ) : ( + + ); +}; + /* Descoped for future PR + + type CustomLegendProps = { active?: boolean; payload?: PayloadItem[]; @@ -117,9 +136,17 @@ type StackedBarGraphProps = { style?: CSSProperties; data; compact?: boolean; + balanceTypeOp: string; + viewLabels: boolean; }; -function StackedBarGraph({ style, data, compact }: StackedBarGraphProps) { +function StackedBarGraph({ + style, + data, + compact, + balanceTypeOp, + viewLabels, +}: StackedBarGraphProps) { const privacyMode = usePrivacyMode(); const colorScale = getColorScale('qualitative'); @@ -164,11 +191,15 @@ function StackedBarGraph({ style, data, compact }: StackedBarGraphProps) { )} {data.data.reverse().map((c, index) => ( + > + {viewLabels && ( + + )} + ))} diff --git a/packages/desktop-client/src/components/reports/graphs/adjustTextSize.ts b/packages/desktop-client/src/components/reports/graphs/adjustTextSize.ts new file mode 100644 index 00000000000..170783096a7 --- /dev/null +++ b/packages/desktop-client/src/components/reports/graphs/adjustTextSize.ts @@ -0,0 +1,15 @@ +const adjustTextSize = size => { + if (size <= 200) { + return '12px'; + } else if (size <= 233) { + return '14px'; + } else if (size <= 266) { + return '16px'; + } else if (size <= 300) { + return '18px'; + } else { + return '20px'; + } +}; + +export default adjustTextSize; diff --git a/packages/desktop-client/src/components/reports/reports/CustomReport.js b/packages/desktop-client/src/components/reports/reports/CustomReport.js index a8d1f3a42cf..e1ccfbb6713 100644 --- a/packages/desktop-client/src/components/reports/reports/CustomReport.js +++ b/packages/desktop-client/src/components/reports/reports/CustomReport.js @@ -315,6 +315,7 @@ export default function CustomReport() { scrollWidth={scrollWidth} setScrollWidth={setScrollWidth} months={months} + viewLabels={viewLabels} /> ) : ( From c4b93b6c7d11b5e691d4ff2999ed3d47873e92a9 Mon Sep 17 00:00:00 2001 From: carkom Date: Thu, 7 Dec 2023 23:55:20 +0000 Subject: [PATCH 02/15] updates --- .../components/reports/graphs/AreaGraph.tsx | 25 +++++++++++++++++-- .../components/reports/graphs/BarGraph.tsx | 10 +++----- .../components/reports/graphs/DonutGraph.tsx | 5 ++-- 3 files changed, 30 insertions(+), 10 deletions(-) diff --git a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx index 4830a3dc88f..518f6ddbf06 100644 --- a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx @@ -8,6 +8,7 @@ import { XAxis, YAxis, Tooltip, + LabelList, ResponsiveContainer, } from 'recharts'; @@ -90,6 +91,20 @@ const CustomTooltip = ({ } }; +const renderCustomLabel = props => { + return ( + + {props.value.toFixed(0)} + + ); +}; + type AreaGraphProps = { style?: CSSProperties; data; @@ -187,7 +202,6 @@ function AreaGraph({ + > + {viewLabels && ( + + )} + diff --git a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx index 85e49219777..2aa6bf1861d 100644 --- a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx @@ -109,18 +109,16 @@ const CustomTooltip = ({ }; const renderCustomLabel = props => { - return props.height > 20 ? ( + return ( 0 ? 15 : -15)} + fill={theme.pageText} textAnchor="middle" dominantBaseline="middle" > {props.value.toFixed(0)} - ) : ( - ); }; @@ -264,7 +262,7 @@ function BarGraph({ {viewLabels && ( getVal(val)} + dataKey={'totalDebts'} content={renderCustomLabel} /> )} diff --git a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx index 01e7bb538b9..ea58ecec0c1 100644 --- a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx @@ -84,13 +84,14 @@ const ActiveShape = props => { percent, value, } = props; + const yAxis = payload.name ?? payload.date; const sin = Math.sin(-RADIAN * midAngle); const cos = Math.cos(-RADIAN * midAngle); const sx = cx + (innerRadius - 10) * cos; const sy = cy + (innerRadius - 10) * sin; const mx = cx + (innerRadius - 30) * cos; const my = cy + (innerRadius - 30) * sin; - const ex = cx + (cos >= 0 ? 1 : -1) * payload.name.length * 4; + const ex = cx + (cos >= 0 ? 1 : -1) * yAxis.length * 4; const ey = cy + 8; //const ex = mx + (cos <= 0 ? 1 : -1) * 40; //const ey = my + (sin <= 0 ? 1 : -1) * 40; @@ -127,7 +128,7 @@ const ActiveShape = props => { y={ey} textAnchor={textAnchor} fill={fill} - >{`${payload.name}`} + >{`${yAxis}`} Date: Tue, 26 Dec 2023 11:44:19 +0000 Subject: [PATCH 03/15] merge fixes --- .../src/components/reports/ChooseGraph.tsx | 20 ++-- .../components/reports/graphs/AreaGraph.tsx | 4 +- .../components/reports/graphs/BarGraph.tsx | 6 +- .../reports/graphs/BarLineGraph.tsx | 4 +- .../components/reports/graphs/DonutGraph.tsx | 97 +------------------ .../components/reports/graphs/LineGraph.tsx | 4 +- .../reports/graphs/StackedBarGraph.tsx | 17 ++-- .../reports/graphs/adjustTextSize.ts | 4 +- .../reports/reports/CustomReport.jsx | 2 +- 9 files changed, 26 insertions(+), 132 deletions(-) diff --git a/packages/desktop-client/src/components/reports/ChooseGraph.tsx b/packages/desktop-client/src/components/reports/ChooseGraph.tsx index 8de12b889d8..7d83ec2cec5 100644 --- a/packages/desktop-client/src/components/reports/ChooseGraph.tsx +++ b/packages/desktop-client/src/components/reports/ChooseGraph.tsx @@ -3,12 +3,12 @@ import React, { useRef } from 'react'; import View from '../common/View'; import { type DataEntity, type Month } from './entities'; -import AreaGraph from './graphs/AreaGraph'; -import BarGraph from './graphs/BarGraph'; -import BarLineGraph from './graphs/BarLineGraph'; -import DonutGraph from './graphs/DonutGraph'; -import LineGraph from './graphs/LineGraph'; -import StackedBarGraph from './graphs/StackedBarGraph'; +import { AreaGraph } from './graphs/AreaGraph'; +import { BarGraph } from './graphs/BarGraph'; +import { BarLineGraph } from './graphs/BarLineGraph'; +import { DonutGraph } from './graphs/DonutGraph'; +import { LineGraph } from './graphs/LineGraph'; +import { StackedBarGraph } from './graphs/StackedBarGraph'; import { ReportOptions } from './ReportOptions'; import ReportTable from './ReportTable'; import ReportTableHeader from './ReportTableHeader'; @@ -25,9 +25,10 @@ type ChooseGraphProps = { scrollWidth: number; setScrollWidth: (value: number) => void; months: Month[]; + viewLabels: boolean; }; -function ChooseGraph({ +export function ChooseGraph({ data, mode, graphType, @@ -38,7 +39,6 @@ function ChooseGraph({ setScrollWidth, months, viewLabels, -}) { }: ChooseGraphProps) { const balanceTypeOp = ReportOptions.balanceTypeMap.get(balanceType); @@ -71,7 +71,6 @@ function ChooseGraph({ style={{ flexGrow: 1 }} data={data} groupBy={groupBy} - empty={empty} balanceTypeOp={balanceTypeOp} viewLabels={viewLabels} /> @@ -86,7 +85,6 @@ function ChooseGraph({ style={{ flexGrow: 1 }} data={data} groupBy={groupBy} - empty={empty} balanceTypeOp={balanceTypeOp} viewLabels={viewLabels} /> @@ -141,5 +139,3 @@ function ChooseGraph({ ); } } - -export default ChooseGraph; diff --git a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx index 7a689097b0e..e53f5a5264c 100644 --- a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx @@ -114,7 +114,7 @@ type AreaGraphProps = { viewLabels: boolean; }; -function AreaGraph({ +export function AreaGraph({ style, data, balanceTypeOp, @@ -226,5 +226,3 @@ function AreaGraph({ ); } - -export default AreaGraph; diff --git a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx index 0f482a20249..0f96bb53429 100644 --- a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx @@ -130,7 +130,7 @@ type BarGraphProps = { viewLabels: boolean; }; -function BarGraph({ +export function BarGraph({ style, data, groupBy, @@ -224,7 +224,7 @@ function BarGraph({ {viewLabels && ( )} @@ -245,5 +245,3 @@ function BarGraph({ ); } - -export default BarGraph; diff --git a/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx index 6378969ef99..434f538f555 100644 --- a/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx @@ -75,7 +75,7 @@ type BarLineGraphProps = { compact?: boolean; }; -function BarLineGraph({ style, graphData, compact }: BarLineGraphProps) { +export function BarLineGraph({ style, graphData, compact }: BarLineGraphProps) { const tickFormatter = tick => { return `${Math.round(tick).toLocaleString()}`; // Formats the tick values as strings with commas }; @@ -116,5 +116,3 @@ function BarLineGraph({ style, graphData, compact }: BarLineGraphProps) { ); } - -export default BarLineGraph; diff --git a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx index fd03823fd90..3773443cecf 100644 --- a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx @@ -1,103 +1,12 @@ import React, { useState } from 'react'; -import { - PieChart, - Pie, - Cell, - Sector, - ResponsiveContainer, -} from 'recharts'; - -import { type CSSProperties } from '../../../style'; -import { getColorScale } from '../chart-theme'; -import Container from '../Container'; - -import adjustTextSize from './adjustTextSize'; - import { PieChart, Pie, Cell, Sector, ResponsiveContainer } from 'recharts'; import { type CSSProperties } from '../../../style'; import Container from '../Container'; import { type DataEntity } from '../entities'; -const RADIAN = Math.PI / 180; -const ActiveShape = props => { - const { - cx, - cy, - midAngle, - innerRadius, - outerRadius, - startAngle, - endAngle, - fill, - payload, - percent, - value, - } = props; - const yAxis = payload.name ?? payload.date; - const sin = Math.sin(-RADIAN * midAngle); - const cos = Math.cos(-RADIAN * midAngle); - const sx = cx + (innerRadius - 10) * cos; - const sy = cy + (innerRadius - 10) * sin; - const mx = cx + (innerRadius - 30) * cos; - const my = cy + (innerRadius - 30) * sin; - const ex = cx + (cos >= 0 ? 1 : -1) * yAxis.length * 4; - const ey = cy + 8; - const textAnchor = cos <= 0 ? 'start' : 'end'; - - return ( - - - - - - {`${yAxis}`} - {`${value.toFixed(2)}`} - - {`(${(percent * 100).toFixed(2)}%)`} - - - ); -}; -*/ +import { adjustTextSize } from './adjustTextSize'; const RADIAN = Math.PI / 180; const ActiveShape = props => { @@ -218,7 +127,7 @@ type DonutGraphProps = { viewLabels: boolean; }; -function DonutGraph({ +export function DonutGraph({ style, data, groupBy, @@ -281,5 +190,3 @@ function DonutGraph({ ); } - -export default DonutGraph; diff --git a/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx b/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx index 419e0a2e612..363c32f19d5 100644 --- a/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx @@ -74,7 +74,7 @@ type LineGraphProps = { compact?: boolean; }; -function LineGraph({ style, graphData, compact }: LineGraphProps) { +export function LineGraph({ style, graphData, compact }: LineGraphProps) { const tickFormatter = tick => { return `${Math.round(tick).toLocaleString()}`; // Formats the tick values as strings with commas }; @@ -114,5 +114,3 @@ function LineGraph({ style, graphData, compact }: LineGraphProps) { ); } - -export default LineGraph; diff --git a/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx index f5363cd8b41..0547259a320 100644 --- a/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx @@ -116,7 +116,7 @@ type StackedBarGraphProps = { viewLabels: boolean; }; -function StackedBarGraph({ +export function StackedBarGraph({ style, data, compact, @@ -170,11 +170,14 @@ function StackedBarGraph({ dataKey={entry.name} stackId="a" fill={entry.color} - > - {viewLabels && ( - - )} - + > + {viewLabels && ( + + )} + ))} @@ -184,5 +187,3 @@ function StackedBarGraph({ ); } - -export default StackedBarGraph; diff --git a/packages/desktop-client/src/components/reports/graphs/adjustTextSize.ts b/packages/desktop-client/src/components/reports/graphs/adjustTextSize.ts index 170783096a7..f59050f8a44 100644 --- a/packages/desktop-client/src/components/reports/graphs/adjustTextSize.ts +++ b/packages/desktop-client/src/components/reports/graphs/adjustTextSize.ts @@ -1,4 +1,4 @@ -const adjustTextSize = size => { +export const adjustTextSize = size => { if (size <= 200) { return '12px'; } else if (size <= 233) { @@ -11,5 +11,3 @@ const adjustTextSize = size => { return '20px'; } }; - -export default adjustTextSize; diff --git a/packages/desktop-client/src/components/reports/reports/CustomReport.jsx b/packages/desktop-client/src/components/reports/reports/CustomReport.jsx index 2315e21b19f..5dbe8efa34a 100644 --- a/packages/desktop-client/src/components/reports/reports/CustomReport.jsx +++ b/packages/desktop-client/src/components/reports/reports/CustomReport.jsx @@ -19,7 +19,7 @@ import Text from '../../common/Text'; import View from '../../common/View'; import { AppliedFilters } from '../../filters/FiltersMenu'; import PrivacyFilter from '../../PrivacyFilter'; -import ChooseGraph from '../ChooseGraph'; +import {ChooseGraph} from '../ChooseGraph'; import Header from '../Header'; import LoadingIndicator from '../LoadingIndicator'; import ReportLegend from '../ReportLegend'; From 57cc801a9d65e1dcb8f239959764f67018e77032 Mon Sep 17 00:00:00 2001 From: carkom Date: Tue, 26 Dec 2023 14:35:37 +0000 Subject: [PATCH 04/15] syntax fix --- .../src/components/reports/reports/CustomReport.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/desktop-client/src/components/reports/reports/CustomReport.jsx b/packages/desktop-client/src/components/reports/reports/CustomReport.jsx index 5dbe8efa34a..679f399f01d 100644 --- a/packages/desktop-client/src/components/reports/reports/CustomReport.jsx +++ b/packages/desktop-client/src/components/reports/reports/CustomReport.jsx @@ -197,7 +197,7 @@ export default function CustomReport() { savePrefs({ reportsViewSummary: !viewSummary }); } if (viewType === 'viewLabels') { - savePrefs({ reportsViewLabels: !viewLabels }); + savePrefs({ reportsViewLabel: !viewLabels }); } }; From 3f4dfe11e7d17dfc4b3c43e29c5703fc5fde150c Mon Sep 17 00:00:00 2001 From: carkom Date: Tue, 26 Dec 2023 17:10:10 +0000 Subject: [PATCH 05/15] Add Label element --- .../components/reports/graphs/AreaGraph.tsx | 18 +----- .../components/reports/graphs/BarGraph.tsx | 20 ++---- .../components/reports/graphs/DonutGraph.tsx | 36 ++--------- .../reports/graphs/StackedBarGraph.tsx | 22 ++----- .../reports/graphs/adjustTextSize.ts | 10 +++ .../reports/graphs/renderCustomLabel.tsx | 62 +++++++++++++++++++ 6 files changed, 88 insertions(+), 80 deletions(-) create mode 100644 packages/desktop-client/src/components/reports/graphs/renderCustomLabel.tsx diff --git a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx index e53f5a5264c..9812c819746 100644 --- a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx @@ -23,6 +23,8 @@ import Container from '../Container'; import { type DataEntity } from '../entities'; import numberFormatterTooltip from '../numberFormatter'; +import { renderCustomLabel } from './renderCustomLabel'; + type PayloadItem = { payload: { date: string; @@ -92,20 +94,6 @@ const CustomTooltip = ({ } }; -const renderCustomLabel = props => { - return ( - - {props.value.toFixed(0)} - - ); -}; - type AreaGraphProps = { style?: CSSProperties; data: DataEntity; @@ -214,7 +202,7 @@ export function AreaGraph({ {viewLabels && ( renderCustomLabel(e, 'value', 0, width)} /> )} diff --git a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx index 0f96bb53429..9611d38a8bc 100644 --- a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx @@ -26,6 +26,8 @@ import { type DataEntity } from '../entities'; import getCustomTick from '../getCustomTick'; import numberFormatterTooltip from '../numberFormatter'; +import { renderCustomLabel } from './renderCustomLabel'; + type PayloadChild = { props: { name: string; @@ -107,20 +109,6 @@ const CustomTooltip = ({ } }; -const renderCustomLabel = props => { - return ( - 0 ? 15 : -15)} - fill={theme.pageText} - textAnchor="middle" - dominantBaseline="middle" - > - {props.value.toFixed(0)} - - ); -}; - type BarGraphProps = { style?: CSSProperties; data: DataEntity; @@ -209,7 +197,7 @@ export function BarGraph({ {viewLabels && ( getVal(val)} - content={renderCustomLabel} + content={e => renderCustomLabel(e, 'height', 0, width)} /> )} {data.legend.map((entry, index) => ( @@ -225,7 +213,7 @@ export function BarGraph({ {viewLabels && ( renderCustomLabel(e, 'height', 0, width)} /> )} {data[splitData].map((entry, index) => ( diff --git a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx index 3773443cecf..9e079242357 100644 --- a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx @@ -6,7 +6,7 @@ import { type CSSProperties } from '../../../style'; import Container from '../Container'; import { type DataEntity } from '../entities'; -import { adjustTextSize } from './adjustTextSize'; +import { renderCustomLabel } from './renderCustomLabel'; const RADIAN = Math.PI / 180; const ActiveShape = props => { @@ -88,36 +88,6 @@ const ActiveShape = props => { ); }; -const CustomLabel = ({ - cx, - cy, - midAngle, - innerRadius, - outerRadius, - percent, - index, -}) => { - const radius = innerRadius + (outerRadius - innerRadius) * 0.5; - const x = cx + radius * Math.cos(-midAngle * RADIAN); - const y = cy + radius * Math.sin(-midAngle * RADIAN); - const size = cx > cy ? cy : cx; - - return percent > 0.05 ? ( - cx ? 'start' : 'end'} - dominantBaseline="central" - fontSize={adjustTextSize(size)} - > - {`${(percent * 100).toFixed(0)}%`} - - ) : ( - - ); -}; - type DonutGraphProps = { style?: CSSProperties; data: DataEntity; @@ -175,7 +145,9 @@ export function DonutGraph({ innerRadius={Math.min(width, height) * 0.2} fill="#8884d8" labelLine={false} - label={viewLabels && CustomLabel} + label={e => + viewLabels && renderCustomLabel(e, 'percent', 0.05) + } onMouseEnter={onPieEnter} > {data.legend.map((entry, index) => ( diff --git a/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx index 0547259a320..6dc27579742 100644 --- a/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx @@ -24,6 +24,8 @@ import { type DataEntity } from '../entities'; import getCustomTick from '../getCustomTick'; import numberFormatterTooltip from '../numberFormatter'; +import { renderCustomLabel } from './renderCustomLabel'; + type PayloadItem = { name: string; value: number; @@ -92,22 +94,6 @@ const CustomTooltip = ({ active, payload, label }: CustomTooltipProps) => { } }; -const renderCustomLabel = props => { - return props.height > 20 ? ( - - {props.value.toFixed(0)} - - ) : ( - - ); -}; - type StackedBarGraphProps = { style?: CSSProperties; data: DataEntity; @@ -174,7 +160,9 @@ export function StackedBarGraph({ {viewLabels && ( + renderCustomLabel(e, 'height', 20, width) + } /> )} diff --git a/packages/desktop-client/src/components/reports/graphs/adjustTextSize.ts b/packages/desktop-client/src/components/reports/graphs/adjustTextSize.ts index f59050f8a44..983ceba426a 100644 --- a/packages/desktop-client/src/components/reports/graphs/adjustTextSize.ts +++ b/packages/desktop-client/src/components/reports/graphs/adjustTextSize.ts @@ -1,4 +1,14 @@ export const adjustTextSize = size => { + if (size <= 400) { + return '12px'; + } else if (size <= 600) { + return '14px'; + } else { + return '16px'; + } +}; + +export const adjustDonutTextSize = size => { if (size <= 200) { return '12px'; } else if (size <= 233) { diff --git a/packages/desktop-client/src/components/reports/graphs/renderCustomLabel.tsx b/packages/desktop-client/src/components/reports/graphs/renderCustomLabel.tsx new file mode 100644 index 00000000000..e8b1ddf22a0 --- /dev/null +++ b/packages/desktop-client/src/components/reports/graphs/renderCustomLabel.tsx @@ -0,0 +1,62 @@ +import React from 'react'; + +import { theme } from '../../../style'; + +import { adjustDonutTextSize, adjustTextSize } from './adjustTextSize'; + +export const renderCustomLabel = ( + props, + showLabel?: string, + showLabelThreshold?: number, + width?: number, +) => { + const RADIAN = Math.PI / 180; + const radius = + props.innerRadius && + props.innerRadius + (props.outerRadius - props.innerRadius) * 0.5; + + let calcX; + let calcY; + + if (props.width) { + calcX = props.x + props.width / 2; + if (showLabelThreshold === 20) { + calcY = props.y + props.height / 2; + } else { + calcY = props.y - (props.value > 0 ? 15 : -15); + } + } else if (props.cx) { + calcX = props.cx + radius * Math.cos(-props.midAngle * RADIAN); + calcY = props.cy + radius * Math.sin(-props.midAngle * RADIAN); + } else { + calcX = props.x; + calcY = props.y; + } + + const textAnchor = props.cx + ? props.x > props.cx + ? 'start' + : 'end' + : 'middle'; + + const donutSize = props.cx > props.cy ? props.cy : props.cx; + const cartesianSize = 290; + const size = props.cx ? donutSize : cartesianSize; + + return Math.abs(props[showLabel]) > showLabelThreshold ? ( + + {props.cx + ? `${(props.percent * 100).toFixed(0)}%` + : props.value.toFixed(0)} + + ) : ( + + ); +}; From 0ee2977733518242c990a1fb8fc2d037e841e14f Mon Sep 17 00:00:00 2001 From: carkom Date: Tue, 26 Dec 2023 17:14:45 +0000 Subject: [PATCH 06/15] updates --- packages/desktop-client/src/components/reports/ChooseGraph.tsx | 1 - .../desktop-client/src/components/reports/graphs/DonutGraph.tsx | 2 -- .../src/components/reports/graphs/StackedBarGraph.tsx | 2 -- 3 files changed, 5 deletions(-) diff --git a/packages/desktop-client/src/components/reports/ChooseGraph.tsx b/packages/desktop-client/src/components/reports/ChooseGraph.tsx index 7d83ec2cec5..f29d2d07cd4 100644 --- a/packages/desktop-client/src/components/reports/ChooseGraph.tsx +++ b/packages/desktop-client/src/components/reports/ChooseGraph.tsx @@ -98,7 +98,6 @@ export function ChooseGraph({ ); diff --git a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx index 9e079242357..f91d091bed7 100644 --- a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx @@ -32,8 +32,6 @@ const ActiveShape = props => { const my = cy + (innerRadius - 30) * sin; const ex = cx + (cos >= 0 ? 1 : -1) * yAxis.length * 4; const ey = cy + 8; - //const ex = mx + (cos <= 0 ? 1 : -1) * 40; - //const ey = my + (sin <= 0 ? 1 : -1) * 40; const textAnchor = cos <= 0 ? 'start' : 'end'; return ( diff --git a/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx index 6dc27579742..a7ae85858aa 100644 --- a/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx @@ -98,7 +98,6 @@ type StackedBarGraphProps = { style?: CSSProperties; data: DataEntity; compact?: boolean; - balanceTypeOp: string; viewLabels: boolean; }; @@ -106,7 +105,6 @@ export function StackedBarGraph({ style, data, compact, - balanceTypeOp, viewLabels, }: StackedBarGraphProps) { const privacyMode = usePrivacyMode(); From 495b2313363c41305563c6ed3dc8eff64269ea2c Mon Sep 17 00:00:00 2001 From: carkom Date: Tue, 26 Dec 2023 17:18:55 +0000 Subject: [PATCH 07/15] notes --- upcoming-release-notes/2124.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 upcoming-release-notes/2124.md diff --git a/upcoming-release-notes/2124.md b/upcoming-release-notes/2124.md new file mode 100644 index 00000000000..77a1dd19f70 --- /dev/null +++ b/upcoming-release-notes/2124.md @@ -0,0 +1,6 @@ +--- +category: Enhancements +authors: [carkom] +--- + +Enabling and formatting "viewLabels" button for custom reports page \ No newline at end of file From 15e327a85d1fc0ead1f87168ffe66ab435aee807 Mon Sep 17 00:00:00 2001 From: carkom Date: Thu, 28 Dec 2023 11:33:28 +0000 Subject: [PATCH 08/15] normalize customLabel --- .../components/reports/graphs/AreaGraph.tsx | 13 ++++- .../components/reports/graphs/BarGraph.tsx | 16 +++++- .../components/reports/graphs/DonutGraph.tsx | 33 +++++++++-- .../reports/graphs/StackedBarGraph.tsx | 30 ++++++++-- .../reports/graphs/renderCustomLabel.tsx | 55 ++++--------------- .../desktop-client/src/style/themes/dark.ts | 1 + .../desktop-client/src/style/themes/light.ts | 1 + 7 files changed, 92 insertions(+), 57 deletions(-) diff --git a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx index 9812c819746..5502c01fc4a 100644 --- a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx @@ -23,6 +23,7 @@ import Container from '../Container'; import { type DataEntity } from '../entities'; import numberFormatterTooltip from '../numberFormatter'; +import { adjustTextSize } from './adjustTextSize'; import { renderCustomLabel } from './renderCustomLabel'; type PayloadItem = { @@ -94,6 +95,16 @@ const CustomTooltip = ({ } }; +const customLabel = (props, width) => { + const calcX = props.x; + const calcY = props.y - (props.value > 0 ? 15 : -15); + const textAnchor = 'middle'; + const display = props.value !== 0 && `${props.value.toFixed(0)}`; + const textSize = adjustTextSize(width); + + return renderCustomLabel(calcX, calcY, textAnchor, display, textSize); +}; + type AreaGraphProps = { style?: CSSProperties; data: DataEntity; @@ -202,7 +213,7 @@ export function AreaGraph({ {viewLabels && ( renderCustomLabel(e, 'value', 0, width)} + content={e => customLabel(e, width)} /> )} diff --git a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx index 9611d38a8bc..96ba0ed2338 100644 --- a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx @@ -26,6 +26,7 @@ import { type DataEntity } from '../entities'; import getCustomTick from '../getCustomTick'; import numberFormatterTooltip from '../numberFormatter'; +import { adjustTextSize } from './adjustTextSize'; import { renderCustomLabel } from './renderCustomLabel'; type PayloadChild = { @@ -109,6 +110,16 @@ const CustomTooltip = ({ } }; +const customLabel = (props, width) => { + const calcX = props.x + props.width / 2; + const calcY = props.y - (props.value > 0 ? 15 : -15); + const textAnchor = 'middle'; + const display = props.value !== 0 && `${props.value.toFixed(0)}`; + const textSize = adjustTextSize(width); + + return renderCustomLabel(calcX, calcY, textAnchor, display, textSize); +}; + type BarGraphProps = { style?: CSSProperties; data: DataEntity; @@ -163,6 +174,7 @@ export function BarGraph({ margin={{ top: 0, right: 0, left: 0, bottom: 0 }} > getVal(val)} - content={e => renderCustomLabel(e, 'height', 0, width)} + content={e => customLabel(e, width)} /> )} {data.legend.map((entry, index) => ( @@ -213,7 +225,7 @@ export function BarGraph({ {viewLabels && ( renderCustomLabel(e, 'height', 0, width)} + content={e => customLabel(e, width)} /> )} {data[splitData].map((entry, index) => ( diff --git a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx index f91d091bed7..93a39fe1571 100644 --- a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx @@ -2,10 +2,11 @@ import React, { useState } from 'react'; import { PieChart, Pie, Cell, Sector, ResponsiveContainer } from 'recharts'; -import { type CSSProperties } from '../../../style'; +import { theme, type CSSProperties } from '../../../style'; import Container from '../Container'; import { type DataEntity } from '../entities'; +import { adjustDonutTextSize } from './adjustTextSize'; import { renderCustomLabel } from './renderCustomLabel'; const RADIAN = Math.PI / 180; @@ -86,6 +87,32 @@ const ActiveShape = props => { ); }; +const customLabel = props => { + const radius = + props.innerRadius + (props.outerRadius - props.innerRadius) * 0.5; + const size = props.cx > props.cy ? props.cy : props.cx; + + const calcX = props.cx + radius * Math.cos(-props.midAngle * RADIAN); + const calcY = props.cy + radius * Math.sin(-props.midAngle * RADIAN); + const textAnchor = calcX > props.cx ? 'start' : 'end'; + const display = props.value !== 0 && `${(props.percent * 100).toFixed(0)}%`; + const textSize = adjustDonutTextSize(size); + const showLabel = props.percent; + const showLabelThreshold = 0.05; + const fill = theme.reportsInnerLabel; + + return renderCustomLabel( + calcX, + calcY, + textAnchor, + display, + textSize, + showLabel, + showLabelThreshold, + fill, + ); +}; + type DonutGraphProps = { style?: CSSProperties; data: DataEntity; @@ -143,9 +170,7 @@ export function DonutGraph({ innerRadius={Math.min(width, height) * 0.2} fill="#8884d8" labelLine={false} - label={e => - viewLabels && renderCustomLabel(e, 'percent', 0.05) - } + label={e => (viewLabels ? customLabel(e) :
)} onMouseEnter={onPieEnter} > {data.legend.map((entry, index) => ( diff --git a/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx index a7ae85858aa..ee67360ec58 100644 --- a/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx @@ -94,6 +94,28 @@ const CustomTooltip = ({ active, payload, label }: CustomTooltipProps) => { } }; +const customLabel = props => { + const calcX = props.x + props.width / 2; + const calcY = props.y + props.height / 2; + const textAnchor = 'middle'; + const display = props.value && `${props.value.toFixed(0)}`; + const textSize = '12px'; + const showLabel = props.height; + const showLabelThreshold = 20; + const fill = theme.reportsInnerLabel; + + return renderCustomLabel( + calcX, + calcY, + textAnchor, + display, + textSize, + showLabel, + showLabelThreshold, + fill, + ); +}; + type StackedBarGraphProps = { style?: CSSProperties; data: DataEntity; @@ -131,6 +153,7 @@ export function StackedBarGraph({ content={} formatter={numberFormatterTooltip} isAnimationActive={false} + cursor={{ fill: 'transparent' }} /> {viewLabels && ( - - renderCustomLabel(e, 'height', 20, width) - } - /> + )} ))} diff --git a/packages/desktop-client/src/components/reports/graphs/renderCustomLabel.tsx b/packages/desktop-client/src/components/reports/graphs/renderCustomLabel.tsx index e8b1ddf22a0..acd7233fcef 100644 --- a/packages/desktop-client/src/components/reports/graphs/renderCustomLabel.tsx +++ b/packages/desktop-client/src/components/reports/graphs/renderCustomLabel.tsx @@ -2,59 +2,26 @@ import React from 'react'; import { theme } from '../../../style'; -import { adjustDonutTextSize, adjustTextSize } from './adjustTextSize'; - export const renderCustomLabel = ( - props, - showLabel?: string, + calcX: number, + calcY: number, + textAnchor: string, + display: string, + textSize?: string, + showLabel?: number, showLabelThreshold?: number, - width?: number, + fill: string = theme.pageText, ) => { - const RADIAN = Math.PI / 180; - const radius = - props.innerRadius && - props.innerRadius + (props.outerRadius - props.innerRadius) * 0.5; - - let calcX; - let calcY; - - if (props.width) { - calcX = props.x + props.width / 2; - if (showLabelThreshold === 20) { - calcY = props.y + props.height / 2; - } else { - calcY = props.y - (props.value > 0 ? 15 : -15); - } - } else if (props.cx) { - calcX = props.cx + radius * Math.cos(-props.midAngle * RADIAN); - calcY = props.cy + radius * Math.sin(-props.midAngle * RADIAN); - } else { - calcX = props.x; - calcY = props.y; - } - - const textAnchor = props.cx - ? props.x > props.cx - ? 'start' - : 'end' - : 'middle'; - - const donutSize = props.cx > props.cy ? props.cy : props.cx; - const cartesianSize = 290; - const size = props.cx ? donutSize : cartesianSize; - - return Math.abs(props[showLabel]) > showLabelThreshold ? ( + return !showLabel || Math.abs(showLabel) > showLabelThreshold ? ( - {props.cx - ? `${(props.percent * 100).toFixed(0)}%` - : props.value.toFixed(0)} + {display} ) : ( diff --git a/packages/desktop-client/src/style/themes/dark.ts b/packages/desktop-client/src/style/themes/dark.ts index 8c1aa1737de..39f2aac8efd 100644 --- a/packages/desktop-client/src/style/themes/dark.ts +++ b/packages/desktop-client/src/style/themes/dark.ts @@ -188,3 +188,4 @@ export const pillBorderSelected = colorPalette.purple400; export const reportsRed = colorPalette.red300; export const reportsBlue = colorPalette.blue400; export const reportsLabel = pageText; +export const reportsInnerLabel = colorPalette.navy800; diff --git a/packages/desktop-client/src/style/themes/light.ts b/packages/desktop-client/src/style/themes/light.ts index 9c0d78d0d94..a891743253c 100644 --- a/packages/desktop-client/src/style/themes/light.ts +++ b/packages/desktop-client/src/style/themes/light.ts @@ -188,3 +188,4 @@ export const pillBorderSelected = colorPalette.purple500; export const reportsRed = colorPalette.red300; export const reportsBlue = colorPalette.blue400; export const reportsLabel = colorPalette.navy900; +export const reportsInnerLabel = colorPalette.navy800; From 6dc8e8f1425b47ae3588356180135252144ead4b Mon Sep 17 00:00:00 2001 From: carkom Date: Thu, 28 Dec 2023 11:40:41 +0000 Subject: [PATCH 09/15] fix --- .../src/components/reports/reports/CustomReportCard.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/desktop-client/src/components/reports/reports/CustomReportCard.jsx b/packages/desktop-client/src/components/reports/reports/CustomReportCard.jsx index ba99695416d..59d2059fbd1 100644 --- a/packages/desktop-client/src/components/reports/reports/CustomReportCard.jsx +++ b/packages/desktop-client/src/components/reports/reports/CustomReportCard.jsx @@ -7,7 +7,7 @@ import { styles } from '../../../style'; import Block from '../../common/Block'; import View from '../../common/View'; import DateRange from '../DateRange'; -import BarGraph from '../graphs/BarGraph'; +import { BarGraph } from '../graphs/BarGraph'; import LoadingIndicator from '../LoadingIndicator'; import ReportCard from '../ReportCard'; import defaultSpreadsheet from '../spreadsheets/default-spreadsheet'; From a3e99f9fa41d0a2576d3331d004caeee7eda7046 Mon Sep 17 00:00:00 2001 From: carkom Date: Fri, 29 Dec 2023 00:38:54 +0000 Subject: [PATCH 10/15] range adjustments --- .../components/reports/graphs/AreaGraph.tsx | 47 ++++++++++--- .../components/reports/graphs/BarGraph.tsx | 24 ++++--- .../components/reports/graphs/DonutGraph.tsx | 4 +- .../reports/graphs/StackedBarGraph.tsx | 7 +- .../reports/graphs/adjustTextSize.ts | 68 +++++++++++++++++++ packages/loot-core/src/shared/util.ts | 47 +++++++++++++ 6 files changed, 172 insertions(+), 25 deletions(-) diff --git a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx index 5502c01fc4a..b00abecde7f 100644 --- a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx @@ -13,7 +13,10 @@ import { } from 'recharts'; import usePrivacyMode from 'loot-core/src/client/privacy'; -import { amountToCurrency } from 'loot-core/src/shared/util'; +import { + amountToCurrency, + amountToCurrencyNoDecimal, +} from 'loot-core/src/shared/util'; import { theme } from '../../../style'; import { type CSSProperties } from '../../../style'; @@ -95,11 +98,14 @@ const CustomTooltip = ({ } }; -const customLabel = (props, width) => { - const calcX = props.x; +const customLabel = (props, width, end) => { + //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 ? 15 : -15); - const textAnchor = 'middle'; - const display = props.value !== 0 && `${props.value.toFixed(0)}`; + const textAnchor = props.index === 0 ? 'left' : 'middle'; + const display = + props.value !== 0 && `${amountToCurrencyNoDecimal(props.value)}`; const textSize = adjustTextSize(width); return renderCustomLabel(calcX, calcY, textAnchor, display, textSize); @@ -121,6 +127,25 @@ export function AreaGraph({ viewLabels, }: AreaGraphProps) { const privacyMode = usePrivacyMode(); + const dataMax = Math.max(...data.monthData.map(i => i[balanceTypeOp])); + const dataMin = Math.min(...data.monthData.map(i => i[balanceTypeOp])); + + const labelsMargin = viewLabels ? 30 : 0; + const dataDiff = dataMax - dataMin; + //Calculate how much to add to max and min values for graph range + const extendRangeAmount = Math.floor(dataDiff / 20); + const labelsMin = + //If min is zero or graph range passes zero then set it to zero + dataMin === 0 || Math.abs(dataMin) <= extendRangeAmount + ? 0 + : //Else add the range and round to nearest 100s + Math.floor((dataMin - extendRangeAmount) / 100) * 100; + //Same as above but for max + const labelsMax = + dataMax === 0 || Math.abs(dataMax) <= extendRangeAmount + ? 0 + : Math.ceil((dataMax + extendRangeAmount) / 100) * 100; + const lastLabel = data.monthData.length - 1; const tickFormatter = tick => { if (!privacyMode) return `${Math.round(tick).toLocaleString()}`; // Formats the tick values as strings with commas @@ -128,9 +153,6 @@ export function AreaGraph({ }; const gradientOffset = () => { - const dataMax = Math.max(...data.monthData.map(i => i[balanceTypeOp])); - const dataMin = Math.min(...data.monthData.map(i => i[balanceTypeOp])); - if (dataMax <= 0) { return 0; } @@ -159,7 +181,7 @@ export function AreaGraph({ width={width} height={height} data={data.monthData} - margin={{ top: 0, right: 0, left: 0, bottom: 0 }} + margin={{ top: 0, right: labelsMargin, left: 0, bottom: 0 }} > {compact ? null : ( @@ -174,7 +196,10 @@ export function AreaGraph({ {compact ? null : ( customLabel(e, width)} + content={e => customLabel(e, width, lastLabel)} /> )} diff --git a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx index 96ba0ed2338..a23899af5ef 100644 --- a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx @@ -15,7 +15,10 @@ import { } from 'recharts'; import usePrivacyMode from 'loot-core/src/client/privacy'; -import { amountToCurrency } from 'loot-core/src/shared/util'; +import { + amountToCurrency, + amountToCurrencyNoDecimal, +} from 'loot-core/src/shared/util'; import { theme } from '../../../style'; import { type CSSProperties } from '../../../style'; @@ -26,7 +29,7 @@ import { type DataEntity } from '../entities'; import getCustomTick from '../getCustomTick'; import numberFormatterTooltip from '../numberFormatter'; -import { adjustTextSize } from './adjustTextSize'; +import { variableTextSize } from './adjustTextSize'; import { renderCustomLabel } from './renderCustomLabel'; type PayloadChild = { @@ -110,12 +113,13 @@ const CustomTooltip = ({ } }; -const customLabel = (props, width) => { +const customLabel = props => { const calcX = props.x + props.width / 2; const calcY = props.y - (props.value > 0 ? 15 : -15); const textAnchor = 'middle'; - const display = props.value !== 0 && `${props.value.toFixed(0)}`; - const textSize = adjustTextSize(width); + const display = + props.value !== 0 && `${amountToCurrencyNoDecimal(props.value)}`; + const textSize = variableTextSize(props.width, props.value); return renderCustomLabel(calcX, calcY, textAnchor, display, textSize); }; @@ -141,6 +145,7 @@ export function BarGraph({ const yAxis = ['Month', 'Year'].includes(groupBy) ? 'date' : 'name'; const splitData = ['Month', 'Year'].includes(groupBy) ? 'monthData' : 'data'; + const labelsMargin = viewLabels ? 30 : 0; const getVal = obj => { if (balanceTypeOp === 'totalDebts') { @@ -171,7 +176,7 @@ export function BarGraph({ height={height} stackOffset="sign" data={data[splitData]} - margin={{ top: 0, right: 0, left: 0, bottom: 0 }} + margin={{ top: labelsMargin, right: 0, left: 0, bottom: 0 }} > getVal(val)} - content={e => customLabel(e, width)} + content={customLabel} /> )} {data.legend.map((entry, index) => ( @@ -223,10 +228,7 @@ export function BarGraph({ {yAxis === 'date' && balanceTypeOp === 'totalTotals' && ( {viewLabels && ( - customLabel(e, width)} - /> + )} {data[splitData].map((entry, index) => ( { dy={18} textAnchor={textAnchor} fill={fill} - >{`${value.toFixed(2)}`} + >{`${amountToCurrency(value)}`} { const calcX = props.x + props.width / 2; const calcY = props.y + props.height / 2; const textAnchor = 'middle'; - const display = props.value && `${props.value.toFixed(0)}`; + const display = props.value && `${amountToCurrencyNoDecimal(props.value)}`; const textSize = '12px'; const showLabel = props.height; const showLabelThreshold = 20; diff --git a/packages/desktop-client/src/components/reports/graphs/adjustTextSize.ts b/packages/desktop-client/src/components/reports/graphs/adjustTextSize.ts index 983ceba426a..cab6f756436 100644 --- a/packages/desktop-client/src/components/reports/graphs/adjustTextSize.ts +++ b/packages/desktop-client/src/components/reports/graphs/adjustTextSize.ts @@ -21,3 +21,71 @@ export const adjustDonutTextSize = size => { return '20px'; } }; + +export const variableTextSize = (width: number, value: number) => { + if (value < 100) { + if (width < 9) { + return '10px'; + } else if (width < 13) { + return '11px'; + } else if (width < 16) { + return '12px'; + } else if (width < 19) { + return '13px'; + } else if (width < 22) { + return '14px'; + } else if (width < 25) { + return '15px'; + } else { + return '16px'; + } + } else if (value < 1000) { + if (width < 23) { + return '10px'; + } else if (width < 26) { + return '11px'; + } else if (width < 29) { + return '12px'; + } else if (width < 32) { + return '13px'; + } else if (width < 35) { + return '14px'; + } else if (width < 38) { + return '15px'; + } else { + return '16px'; + } + } else if (value < 10000) { + if (width < 30) { + return '10px'; + } else if (width < 35) { + return '11px'; + } else if (width < 40) { + return '12px'; + } else if (width < 45) { + return '13px'; + } else if (width < 50) { + return '14px'; + } else if (width < 55) { + return '15px'; + } else { + return '16px'; + } + } else { + if (width < 36) { + return '10px'; + } else if (width < 42) { + return '11px'; + } else if (width < 48) { + return '12px'; + } else if (width < 54) { + return '13px'; + } else if (width < 60) { + return '14px'; + } else if (width < 66) { + return '15px'; + } else { + return '16px'; + } + } +}; diff --git a/packages/loot-core/src/shared/util.ts b/packages/loot-core/src/shared/util.ts index 3c32ab5cd70..0a531fe2318 100644 --- a/packages/loot-core/src/shared/util.ts +++ b/packages/loot-core/src/shared/util.ts @@ -269,6 +269,49 @@ export function getNumberFormat({ }; } +function getNumberFormatNoDecimal(decimalNumber: number) { + const { format, hideFraction } = { ...numberFormatConfig }; + let locale, regex, separator; + + switch (format) { + case 'space-comma': + locale = 'en-SE'; + regex = /[^-0-9,]/g; + separator = ','; + break; + case 'dot-comma': + locale = 'de-DE'; + regex = /[^-0-9,]/g; + separator = ','; + break; + case 'space-dot': + locale = 'dje'; + regex = /[^-0-9.]/g; + separator = '.'; + break; + case 'comma-dot-in': + locale = 'en-IN'; + regex = /[^-0-9.]/g; + separator = '.'; + break; + case 'comma-dot': + default: + locale = 'en-US'; + regex = /[^-0-9.]/g; + separator = '.'; + } + + return { + value: format, + separator, + formatter: new Intl.NumberFormat(locale, { + minimumFractionDigits: hideFraction ? 0 : decimalNumber, + maximumFractionDigits: hideFraction ? 0 : decimalNumber, + }), + regex, + }; +} + // Number utilities // We dont use `Number.MAX_SAFE_NUMBER` and such here because those @@ -310,6 +353,10 @@ export function amountToCurrency(n) { return getNumberFormat().formatter.format(n); } +export function amountToCurrencyNoDecimal(n) { + return getNumberFormatNoDecimal(0).formatter.format(n); +} + export function currencyToAmount(str: string) { const amount = parseFloat( str From a0107934f4118041f4d493f10f4d602ef943e51b Mon Sep 17 00:00:00 2001 From: carkom Date: Fri, 29 Dec 2023 00:46:00 +0000 Subject: [PATCH 11/15] margin update --- .../desktop-client/src/components/reports/graphs/AreaGraph.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx index b00abecde7f..eaac609df22 100644 --- a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx @@ -102,7 +102,7 @@ const customLabel = (props, width, end) => { //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 ? 15 : -15); + const calcY = props.y - (props.value > 0 ? 10 : -10); const textAnchor = props.index === 0 ? 'left' : 'middle'; const display = props.value !== 0 && `${amountToCurrencyNoDecimal(props.value)}`; From 382d46237e6c36988ce576daa0dcec25ae4438bb Mon Sep 17 00:00:00 2001 From: carkom Date: Sun, 7 Jan 2024 16:22:24 +0000 Subject: [PATCH 12/15] merge fixes --- .../src/components/reports/reports/CustomReport.jsx | 8 ++++---- .../src/components/reports/reports/CustomReportCard.jsx | 4 ++-- .../{default-spreadsheet.ts => custom-spreadsheet.ts} | 6 +++--- .../reports/spreadsheets/grouped-spreadsheet.ts | 4 ++-- 4 files changed, 11 insertions(+), 11 deletions(-) rename packages/desktop-client/src/components/reports/spreadsheets/{default-spreadsheet.ts => custom-spreadsheet.ts} (97%) diff --git a/packages/desktop-client/src/components/reports/reports/CustomReport.jsx b/packages/desktop-client/src/components/reports/reports/CustomReport.jsx index 4268d84c07a..90738dd3dae 100644 --- a/packages/desktop-client/src/components/reports/reports/CustomReport.jsx +++ b/packages/desktop-client/src/components/reports/reports/CustomReport.jsx @@ -27,8 +27,8 @@ import { ReportOptions } from '../ReportOptions'; import { ReportSidebar } from '../ReportSidebar'; import { ReportSummary } from '../ReportSummary'; import { ReportTopbar } from '../ReportTopbar'; -import { createSpreadsheet as defaultSpreadsheet } from '../spreadsheets/default-spreadsheet'; -import { createGroupedSpreadsheet as groupedSpreadsheet } from '../spreadsheets/grouped-spreadsheet'; +import { createCustomSpreadsheet } from '../spreadsheets/custom-spreadsheet'; +import { createGroupedSpreadsheet } from '../spreadsheets/grouped-spreadsheet'; import { useReport } from '../useReport'; import { fromDateRepr } from '../util'; @@ -114,7 +114,7 @@ export function CustomReport() { const accounts = useCachedAccounts(); const getGroupData = useMemo(() => { - return groupedSpreadsheet({ + return createGroupedSpreadsheet({ startDate, endDate, categories, @@ -140,7 +140,7 @@ export function CustomReport() { const getGraphData = useMemo(() => { setDataCheck(false); - return defaultSpreadsheet({ + return createCustomSpreadsheet({ startDate, endDate, categories, diff --git a/packages/desktop-client/src/components/reports/reports/CustomReportCard.jsx b/packages/desktop-client/src/components/reports/reports/CustomReportCard.jsx index 7aa9df21a62..7269529b4e2 100644 --- a/packages/desktop-client/src/components/reports/reports/CustomReportCard.jsx +++ b/packages/desktop-client/src/components/reports/reports/CustomReportCard.jsx @@ -10,7 +10,7 @@ import { DateRange } from '../DateRange'; import { BarGraph } from '../graphs/BarGraph'; import { LoadingIndicator } from '../LoadingIndicator'; import { ReportCard } from '../ReportCard'; -import { defaultSpreadsheet } from '../spreadsheets/default-spreadsheet'; +import { createCustomSpreadsheet } from '../spreadsheets/custom-spreadsheet'; import { useReport } from '../useReport'; export function CustomReportCard() { @@ -21,7 +21,7 @@ export function CustomReportCard() { const groupBy = 'Category'; const getGraphData = useMemo(() => { - return defaultSpreadsheet({ + return createCustomSpreadsheet({ startDate, endDate, groupBy, diff --git a/packages/desktop-client/src/components/reports/spreadsheets/default-spreadsheet.ts b/packages/desktop-client/src/components/reports/spreadsheets/custom-spreadsheet.ts similarity index 97% rename from packages/desktop-client/src/components/reports/spreadsheets/default-spreadsheet.ts rename to packages/desktop-client/src/components/reports/spreadsheets/custom-spreadsheet.ts index 0fde5493c09..c17f9bef860 100644 --- a/packages/desktop-client/src/components/reports/spreadsheets/default-spreadsheet.ts +++ b/packages/desktop-client/src/components/reports/spreadsheets/custom-spreadsheet.ts @@ -19,7 +19,7 @@ import { filterHiddenItems } from './filterHiddenItems'; import { makeQuery } from './makeQuery'; import { recalculate } from './recalculate'; -export type createSpreadsheetProps = { +export type createCustomSpreadsheetProps = { startDate: string; endDate: string; categories: { list: CategoryEntity[]; grouped: CategoryGroupEntity[] }; @@ -37,7 +37,7 @@ export type createSpreadsheetProps = { graphType: string; }; -export function createSpreadsheet({ +export function createCustomSpreadsheet({ startDate, endDate, categories, @@ -53,7 +53,7 @@ export function createSpreadsheet({ accounts, setDataCheck, graphType, -}: createSpreadsheetProps) { +}: createCustomSpreadsheetProps) { const [categoryList, categoryGroup] = categoryLists( showOffBudgetHidden, showUncategorized, diff --git a/packages/desktop-client/src/components/reports/spreadsheets/grouped-spreadsheet.ts b/packages/desktop-client/src/components/reports/spreadsheets/grouped-spreadsheet.ts index 968e6d5c338..1e8a5313239 100644 --- a/packages/desktop-client/src/components/reports/spreadsheets/grouped-spreadsheet.ts +++ b/packages/desktop-client/src/components/reports/spreadsheets/grouped-spreadsheet.ts @@ -5,7 +5,7 @@ import { integerToAmount } from 'loot-core/src/shared/util'; import { categoryLists } from '../ReportOptions'; -import { type createSpreadsheetProps } from './default-spreadsheet'; +import { type createCustomSpreadsheetProps } from './custom-spreadsheet'; import { filterHiddenItems } from './filterHiddenItems'; import { makeQuery } from './makeQuery'; import { recalculate } from './recalculate'; @@ -21,7 +21,7 @@ export function createGroupedSpreadsheet({ showOffBudgetHidden, showUncategorized, balanceTypeOp, -}: createSpreadsheetProps) { +}: createCustomSpreadsheetProps) { const [categoryList, categoryGroup] = categoryLists( showOffBudgetHidden, showUncategorized, From 7d191fffec61d1a9e2072e51e5fdad419e8af633 Mon Sep 17 00:00:00 2001 From: carkom Date: Wed, 10 Jan 2024 22:14:04 +0000 Subject: [PATCH 13/15] review Updates --- .../components/reports/graphs/AreaGraph.tsx | 2 +- .../components/reports/graphs/BarGraph.tsx | 4 +- .../components/reports/graphs/DonutGraph.tsx | 4 +- .../reports/graphs/adjustTextSize.ts | 171 +++++++++--------- .../reports/reports/CustomReport.jsx | 2 +- packages/loot-core/src/client/selectors.ts | 5 +- packages/loot-core/src/shared/util.ts | 68 ++----- 7 files changed, 104 insertions(+), 152 deletions(-) diff --git a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx index 28840b0ae84..d293e7e5355 100644 --- a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx @@ -106,7 +106,7 @@ const customLabel = (props, width, end) => { const textAnchor = props.index === 0 ? 'left' : 'middle'; const display = props.value !== 0 && `${amountToCurrencyNoDecimal(props.value)}`; - const textSize = adjustTextSize(width); + const textSize = adjustTextSize(width, 'area'); return renderCustomLabel(calcX, calcY, textAnchor, display, textSize); }; diff --git a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx index 4561aebfe0a..eadfe36a4df 100644 --- a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx @@ -29,7 +29,7 @@ import { type DataEntity } from '../entities'; import { getCustomTick } from '../getCustomTick'; import { numberFormatterTooltip } from '../numberFormatter'; -import { variableTextSize } from './adjustTextSize'; +import { adjustTextSize } from './adjustTextSize'; import { renderCustomLabel } from './renderCustomLabel'; type PayloadChild = { @@ -119,7 +119,7 @@ const customLabel = props => { const textAnchor = 'middle'; const display = props.value !== 0 && `${amountToCurrencyNoDecimal(props.value)}`; - const textSize = variableTextSize(props.width, props.value); + const textSize = adjustTextSize(props.width, 'variable', props.value); return renderCustomLabel(calcX, calcY, textAnchor, display, textSize); }; diff --git a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx index 958189c417e..dccb36bc313 100644 --- a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx @@ -8,7 +8,7 @@ import { theme, type CSSProperties } from '../../../style'; import { Container } from '../Container'; import { type DataEntity } from '../entities'; -import { adjustDonutTextSize } from './adjustTextSize'; +import { adjustTextSize } from './adjustTextSize'; import { renderCustomLabel } from './renderCustomLabel'; const RADIAN = Math.PI / 180; @@ -98,7 +98,7 @@ const customLabel = props => { const calcY = props.cy + radius * Math.sin(-props.midAngle * RADIAN); const textAnchor = calcX > props.cx ? 'start' : 'end'; const display = props.value !== 0 && `${(props.percent * 100).toFixed(0)}%`; - const textSize = adjustDonutTextSize(size); + const textSize = adjustTextSize(size, 'donut'); const showLabel = props.percent; const showLabelThreshold = 0.05; const fill = theme.reportsInnerLabel; diff --git a/packages/desktop-client/src/components/reports/graphs/adjustTextSize.ts b/packages/desktop-client/src/components/reports/graphs/adjustTextSize.ts index cab6f756436..e2c47e11a6f 100644 --- a/packages/desktop-client/src/components/reports/graphs/adjustTextSize.ts +++ b/packages/desktop-client/src/components/reports/graphs/adjustTextSize.ts @@ -1,91 +1,88 @@ -export const adjustTextSize = size => { - if (size <= 400) { - return '12px'; - } else if (size <= 600) { - return '14px'; - } else { - return '16px'; +export const adjustTextSize = ( + sized: number, + type: string, + width?: number, +): `${number}px` => { + let source; + switch (type) { + case 'variable': + const findArray = variableLookup.find(({ value }) => width < value).arr; + source = findArray + ? findArray + : variableLookup[variableLookup.length - 1].arr; + break; + case 'donut': + source = donutLookup; + break; + default: + source = defaultLookup; } + const lookup = source.find(({ size }) => sized <= size); + const defaultLast = lookup ? lookup : source[source.length - 1]; + return `${defaultLast.font}px`; }; -export const adjustDonutTextSize = size => { - if (size <= 200) { - return '12px'; - } else if (size <= 233) { - return '14px'; - } else if (size <= 266) { - return '16px'; - } else if (size <= 300) { - return '18px'; - } else { - return '20px'; - } -}; +const defaultLookup = [ + { size: 400, font: 12 }, + { size: 600, font: 14 }, + { size: null, font: 16 }, +]; -export const variableTextSize = (width: number, value: number) => { - if (value < 100) { - if (width < 9) { - return '10px'; - } else if (width < 13) { - return '11px'; - } else if (width < 16) { - return '12px'; - } else if (width < 19) { - return '13px'; - } else if (width < 22) { - return '14px'; - } else if (width < 25) { - return '15px'; - } else { - return '16px'; - } - } else if (value < 1000) { - if (width < 23) { - return '10px'; - } else if (width < 26) { - return '11px'; - } else if (width < 29) { - return '12px'; - } else if (width < 32) { - return '13px'; - } else if (width < 35) { - return '14px'; - } else if (width < 38) { - return '15px'; - } else { - return '16px'; - } - } else if (value < 10000) { - if (width < 30) { - return '10px'; - } else if (width < 35) { - return '11px'; - } else if (width < 40) { - return '12px'; - } else if (width < 45) { - return '13px'; - } else if (width < 50) { - return '14px'; - } else if (width < 55) { - return '15px'; - } else { - return '16px'; - } - } else { - if (width < 36) { - return '10px'; - } else if (width < 42) { - return '11px'; - } else if (width < 48) { - return '12px'; - } else if (width < 54) { - return '13px'; - } else if (width < 60) { - return '14px'; - } else if (width < 66) { - return '15px'; - } else { - return '16px'; - } - } -}; +const donutLookup = [ + { size: 200, font: 12 }, + { size: 233, font: 14 }, + { size: 266, font: 16 }, + { size: 300, font: 18 }, + { size: null, font: 20 }, +]; + +const variableLookup = [ + { + value: 100, + arr: [ + { size: 9, font: 10 }, + { size: 13, font: 11 }, + { size: 16, font: 12 }, + { size: 19, font: 13 }, + { size: 22, font: 14 }, + { size: 25, font: 15 }, + { size: null, font: 16 }, + ], + }, + { + value: 1000, + arr: [ + { size: 23, font: 10 }, + { size: 26, font: 11 }, + { size: 29, font: 12 }, + { size: 32, font: 13 }, + { size: 35, font: 14 }, + { size: 38, font: 15 }, + { size: null, font: 16 }, + ], + }, + { + value: 10090, + arr: [ + { size: 30, font: 10 }, + { size: 35, font: 11 }, + { size: 40, font: 12 }, + { size: 45, font: 13 }, + { size: 50, font: 14 }, + { size: 55, font: 15 }, + { size: null, font: 16 }, + ], + }, + { + value: null, + arr: [ + { size: 36, font: 10 }, + { size: 42, font: 11 }, + { size: 48, font: 12 }, + { size: 54, font: 13 }, + { size: 60, font: 14 }, + { size: 66, font: 15 }, + { size: null, font: 16 }, + ], + }, +]; diff --git a/packages/desktop-client/src/components/reports/reports/CustomReport.jsx b/packages/desktop-client/src/components/reports/reports/CustomReport.jsx index 90738dd3dae..a5a149c93fa 100644 --- a/packages/desktop-client/src/components/reports/reports/CustomReport.jsx +++ b/packages/desktop-client/src/components/reports/reports/CustomReport.jsx @@ -19,7 +19,7 @@ import { Text } from '../../common/Text'; import { View } from '../../common/View'; import { AppliedFilters } from '../../filters/FiltersMenu'; import { PrivacyFilter } from '../../PrivacyFilter'; -import {ChooseGraph} from '../ChooseGraph'; +import { ChooseGraph } from '../ChooseGraph'; import { Header } from '../Header'; import { LoadingIndicator } from '../LoadingIndicator'; import { ReportLegend } from '../ReportLegend'; diff --git a/packages/loot-core/src/client/selectors.ts b/packages/loot-core/src/client/selectors.ts index 08e8ea54a05..92adbafdb99 100644 --- a/packages/loot-core/src/client/selectors.ts +++ b/packages/loot-core/src/client/selectors.ts @@ -10,8 +10,5 @@ const getPrefsState = createSelector(getState, state => state.prefs); const getLocalPrefsState = createSelector(getPrefsState, prefs => prefs.local); export const selectNumberFormat = createSelector(getLocalPrefsState, prefs => - getNumberFormat({ - format: prefs.numberFormat, - hideFraction: prefs.hideFraction, - }), + getNumberFormat(2, prefs.numberFormat, prefs.hideFraction), ); diff --git a/packages/loot-core/src/shared/util.ts b/packages/loot-core/src/shared/util.ts index 0a531fe2318..e6e7e5f369d 100644 --- a/packages/loot-core/src/shared/util.ts +++ b/packages/loot-core/src/shared/util.ts @@ -221,59 +221,17 @@ export function setNumberFormat(config: typeof numberFormatConfig) { numberFormatConfig = config; } -export function getNumberFormat({ - format, - hideFraction, -}: { - format: NumberFormats; - hideFraction: boolean; -} = numberFormatConfig) { - let locale, regex, separator; - - switch (format) { - case 'space-comma': - locale = 'en-SE'; - regex = /[^-0-9,]/g; - separator = ','; - break; - case 'dot-comma': - locale = 'de-DE'; - regex = /[^-0-9,]/g; - separator = ','; - break; - case 'space-dot': - locale = 'dje'; - regex = /[^-0-9.]/g; - separator = '.'; - break; - case 'comma-dot-in': - locale = 'en-IN'; - regex = /[^-0-9.]/g; - separator = '.'; - break; - case 'comma-dot': - default: - locale = 'en-US'; - regex = /[^-0-9.]/g; - separator = '.'; - } - - return { - value: format, - separator, - formatter: new Intl.NumberFormat(locale, { - minimumFractionDigits: hideFraction ? 0 : 2, - maximumFractionDigits: hideFraction ? 0 : 2, - }), - regex, - }; -} - -function getNumberFormatNoDecimal(decimalNumber: number) { - const { format, hideFraction } = { ...numberFormatConfig }; +export function getNumberFormat( + decimalNumber?: number, + format?: NumberFormats, + hideFraction?: boolean, +) { + const calcFormat = format ?? numberFormatConfig.format; + const calcHideFraction = hideFraction ?? numberFormatConfig.hideFraction; + const calcDecimalNumber = decimalNumber ?? 2; let locale, regex, separator; - switch (format) { + switch (calcFormat) { case 'space-comma': locale = 'en-SE'; regex = /[^-0-9,]/g; @@ -302,11 +260,11 @@ function getNumberFormatNoDecimal(decimalNumber: number) { } return { - value: format, + value: calcFormat, separator, formatter: new Intl.NumberFormat(locale, { - minimumFractionDigits: hideFraction ? 0 : decimalNumber, - maximumFractionDigits: hideFraction ? 0 : decimalNumber, + minimumFractionDigits: calcHideFraction ? 0 : calcDecimalNumber, + maximumFractionDigits: calcHideFraction ? 0 : calcDecimalNumber, }), regex, }; @@ -354,7 +312,7 @@ export function amountToCurrency(n) { } export function amountToCurrencyNoDecimal(n) { - return getNumberFormatNoDecimal(0).formatter.format(n); + return getNumberFormat(0).formatter.format(n); } export function currencyToAmount(str: string) { From a098a328cacaf7a79f8a755a328c140776bee654 Mon Sep 17 00:00:00 2001 From: carkom Date: Fri, 12 Jan 2024 12:01:27 +0000 Subject: [PATCH 14/15] labelFix --- .../src/components/reports/ReportTopbar.jsx | 2 +- packages/loot-core/src/client/selectors.ts | 5 +++- packages/loot-core/src/shared/util.ts | 25 +++++++++---------- 3 files changed, 17 insertions(+), 15 deletions(-) diff --git a/packages/desktop-client/src/components/reports/ReportTopbar.jsx b/packages/desktop-client/src/components/reports/ReportTopbar.jsx index d11cf74966a..3a29388cfc2 100644 --- a/packages/desktop-client/src/components/reports/ReportTopbar.jsx +++ b/packages/desktop-client/src/components/reports/ReportTopbar.jsx @@ -137,7 +137,7 @@ export function ReportTopbar({ onChangeViews('viewLabels'); }} style={{ marginRight: 15 }} - title="Show labels" + title="Show Labels" > diff --git a/packages/loot-core/src/client/selectors.ts b/packages/loot-core/src/client/selectors.ts index 92adbafdb99..08e8ea54a05 100644 --- a/packages/loot-core/src/client/selectors.ts +++ b/packages/loot-core/src/client/selectors.ts @@ -10,5 +10,8 @@ const getPrefsState = createSelector(getState, state => state.prefs); const getLocalPrefsState = createSelector(getPrefsState, prefs => prefs.local); export const selectNumberFormat = createSelector(getLocalPrefsState, prefs => - getNumberFormat(2, prefs.numberFormat, prefs.hideFraction), + getNumberFormat({ + format: prefs.numberFormat, + hideFraction: prefs.hideFraction, + }), ); diff --git a/packages/loot-core/src/shared/util.ts b/packages/loot-core/src/shared/util.ts index e6e7e5f369d..c0bcdc11667 100644 --- a/packages/loot-core/src/shared/util.ts +++ b/packages/loot-core/src/shared/util.ts @@ -221,17 +221,16 @@ export function setNumberFormat(config: typeof numberFormatConfig) { numberFormatConfig = config; } -export function getNumberFormat( - decimalNumber?: number, - format?: NumberFormats, - hideFraction?: boolean, -) { - const calcFormat = format ?? numberFormatConfig.format; - const calcHideFraction = hideFraction ?? numberFormatConfig.hideFraction; - const calcDecimalNumber = decimalNumber ?? 2; +export function getNumberFormat({ + format, + hideFraction, +}: { + format?: NumberFormats; + hideFraction: boolean; +} = numberFormatConfig) { let locale, regex, separator; - switch (calcFormat) { + switch (format) { case 'space-comma': locale = 'en-SE'; regex = /[^-0-9,]/g; @@ -260,11 +259,11 @@ export function getNumberFormat( } return { - value: calcFormat, + value: format, separator, formatter: new Intl.NumberFormat(locale, { - minimumFractionDigits: calcHideFraction ? 0 : calcDecimalNumber, - maximumFractionDigits: calcHideFraction ? 0 : calcDecimalNumber, + minimumFractionDigits: hideFraction ? 0 : 2, + maximumFractionDigits: hideFraction ? 0 : 2, }), regex, }; @@ -312,7 +311,7 @@ export function amountToCurrency(n) { } export function amountToCurrencyNoDecimal(n) { - return getNumberFormat(0).formatter.format(n); + return getNumberFormat({ hideFraction: true }).formatter.format(n); } export function currencyToAmount(str: string) { From b52827e0d5bc4427206ab276253de7a301a999c7 Mon Sep 17 00:00:00 2001 From: carkom Date: Fri, 12 Jan 2024 12:28:43 +0000 Subject: [PATCH 15/15] Fix adjustTextSize --- .../reports/graphs/adjustTextSize.ts | 95 ++++++++++--------- 1 file changed, 48 insertions(+), 47 deletions(-) diff --git a/packages/desktop-client/src/components/reports/graphs/adjustTextSize.ts b/packages/desktop-client/src/components/reports/graphs/adjustTextSize.ts index e2c47e11a6f..7c1e292bdc8 100644 --- a/packages/desktop-client/src/components/reports/graphs/adjustTextSize.ts +++ b/packages/desktop-client/src/components/reports/graphs/adjustTextSize.ts @@ -1,15 +1,12 @@ export const adjustTextSize = ( sized: number, type: string, - width?: number, + values?: number, ): `${number}px` => { let source; switch (type) { case 'variable': - const findArray = variableLookup.find(({ value }) => width < value).arr; - source = findArray - ? findArray - : variableLookup[variableLookup.length - 1].arr; + source = variableLookup.find(({ value }) => values > value).arr; break; case 'donut': source = donutLookup; @@ -17,72 +14,76 @@ export const adjustTextSize = ( default: source = defaultLookup; } - const lookup = source.find(({ size }) => sized <= size); - const defaultLast = lookup ? lookup : source[source.length - 1]; - return `${defaultLast.font}px`; + const lookup = source.find(({ size }) => sized >= size); + return `${lookup.font}px`; }; const defaultLookup = [ - { size: 400, font: 12 }, - { size: 600, font: 14 }, - { size: null, font: 16 }, + { size: 600, font: 16 }, + { size: 500, font: 15 }, + { size: 400, font: 14 }, + { size: 300, font: 13 }, + { size: 200, font: 12 }, + { size: 100, font: 11 }, + { size: 0, font: 10 }, ]; const donutLookup = [ - { size: 200, font: 12 }, - { size: 233, font: 14 }, - { size: 266, font: 16 }, - { size: 300, font: 18 }, - { size: null, font: 20 }, + { size: 300, font: 20 }, + { size: 266, font: 18 }, + { size: 233, font: 16 }, + { size: 200, font: 14 }, + { size: 166, font: 12 }, + { size: 0, font: 10 }, ]; const variableLookup = [ { - value: 100, + value: 10000, arr: [ - { size: 9, font: 10 }, - { size: 13, font: 11 }, - { size: 16, font: 12 }, - { size: 19, font: 13 }, - { size: 22, font: 14 }, - { size: 25, font: 15 }, - { size: null, font: 16 }, + { size: 66, font: 16 }, + { size: 60, font: 15 }, + { size: 54, font: 14 }, + { size: 48, font: 13 }, + { size: 42, font: 12 }, + { size: 36, font: 11 }, + { size: 0, font: 10 }, ], }, { value: 1000, arr: [ - { size: 23, font: 10 }, - { size: 26, font: 11 }, - { size: 29, font: 12 }, - { size: 32, font: 13 }, - { size: 35, font: 14 }, - { size: 38, font: 15 }, - { size: null, font: 16 }, + { size: 55, font: 16 }, + { size: 50, font: 15 }, + { size: 45, font: 14 }, + { size: 40, font: 13 }, + { size: 35, font: 12 }, + { size: 30, font: 11 }, + { size: 0, font: 10 }, ], }, { - value: 10090, + value: 100, arr: [ - { size: 30, font: 10 }, - { size: 35, font: 11 }, - { size: 40, font: 12 }, - { size: 45, font: 13 }, - { size: 50, font: 14 }, - { size: 55, font: 15 }, - { size: null, font: 16 }, + { size: 38, font: 16 }, + { size: 35, font: 15 }, + { size: 32, font: 14 }, + { size: 29, font: 13 }, + { size: 26, font: 12 }, + { size: 23, font: 11 }, + { size: 0, font: 10 }, ], }, { - value: null, + value: 0, arr: [ - { size: 36, font: 10 }, - { size: 42, font: 11 }, - { size: 48, font: 12 }, - { size: 54, font: 13 }, - { size: 60, font: 14 }, - { size: 66, font: 15 }, - { size: null, font: 16 }, + { size: 25, font: 16 }, + { size: 22, font: 15 }, + { size: 19, font: 14 }, + { size: 16, font: 13 }, + { size: 13, font: 12 }, + { size: 9, font: 11 }, + { size: 0, font: 10 }, ], }, ];