Skip to content

Commit

Permalink
Add Data Table
Browse files Browse the repository at this point in the history
  • Loading branch information
@carkom
carkom committed Oct 16, 2023
1 parent 9b64c00 commit 014d4ea
Show file tree
Hide file tree
Showing 2 changed files with 268 additions and 8 deletions.
79 changes: 71 additions & 8 deletions packages/desktop-client/src/components/reports/Custom.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,12 @@ import { integerToCurrency } from 'loot-core/src/shared/util';

import useCategories from '../../hooks/useCategories';
import useFilters from '../../hooks/useFilters';
import Calculator from '../../icons/v1/Calculator';
import Chart from '../../icons/v1/Chart';
import ChartBar from '../../icons/v1/ChartBar';
import ChartPie from '../../icons/v1/ChartPie';
import Filter from '../../icons/v1/Filter';
import InboxFull from '../../icons/v1/InboxFull';
import ListBullet from '../../icons/v1/ListBullet';
import { theme, styles } from '../../style';
import Button from '../common/Button';
Expand All @@ -29,6 +31,7 @@ import DonutGraph from './graphs/DonutGraph';
import LineGraph from './graphs/LineGraph';
import StackedBarGraph from './graphs/StackedBarGraph';
import Header from './Header';
import ReportsTable from './ReportsTable';
import { SavedGraphMenuButton } from './SavedGraphs';
import defaultSpreadsheet from './spreadsheets/default-spreadsheet';
import useReport from './useReport';
Expand Down Expand Up @@ -188,6 +191,14 @@ export default function Custom() {
/>
);
}
if (graphType === 'TableGraph') {
return (
<ReportsTable
data={data.graphData}
style={{ border: '1px solid ' + theme.tableBorder }}
/>
);
}
}

function onChangeDates(start, end) {
Expand Down Expand Up @@ -428,24 +439,49 @@ export default function Custom() {
<View
style={{
flexGrow: 1,
padding: 10,
}}
>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
marginTop: -20,
flexGrow: 1,
padding: 10,
paddingTop: 0,
}}
>
<Button type="bare" onClick={() => {}}>
<Button
type="bare"
onClick={() => {
selectGraph('TableGraph');
}}
>
<InboxFull width={15} height={15} />
</Button>
<Button
type="bare"
onClick={() => {
selectGraph('AreaGraph');
}}
style={{ marginLeft: 15 }}
>
<Chart width={15} height={15} />
</Button>
<Button type="bare" onClick={() => {}} style={{ marginLeft: 15 }}>
<Button
type="bare"
onClick={() => {
selectGraph('BarGraph');
}}
style={{ marginLeft: 15 }}
>
<ChartBar width={15} height={15} />
</Button>
<Button type="bare" onClick={() => {}} style={{ marginLeft: 15 }}>
<Button
type="bare"
onClick={() => {
selectGraph(DonutGraph);
}}
style={{ marginLeft: 15 }}
>
<ChartPie width={15} height={15} />
</Button>
<View
Expand All @@ -457,10 +493,37 @@ export default function Custom() {
flexShrink: 0,
}}
/>
<Button type="bare" onClick={() => {}} style={{ marginLeft: 15 }}>
<Button
type="bare"
onClick={() => {}}
style={{ marginLeft: 15 }}
title="Show Legend"
>
<ListBullet width={15} height={15} />
</Button>
<Button type="bare" onClick={() => {}} style={{ marginLeft: 15 }}>
<Button
type="bare"
onClick={() => {}}
style={{ marginLeft: 15 }}
title="Show Summary"
>
<Calculator width={15} height={15} />
</Button>
<View
style={{
width: 1,
height: 30,
backgroundColor: theme.altPillBorder,
marginLeft: 20,
flexShrink: 0,
}}
/>
<Button
type="bare"
onClick={() => {}}
style={{ marginLeft: 15 }}
title="Filters"
>
<Filter width={15} height={15} />
</Button>
<View style={{ flex: 1 }} />
Expand Down
197 changes: 197 additions & 0 deletions packages/desktop-client/src/components/reports/ReportsTable.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,197 @@
import React, { memo, useMemo, useCallback } from 'react';
import { useSelector } from 'react-redux';

import {
getAccountsById,
getCategoriesById,
} from 'loot-core/src/client/reducers/queries';
import { integerToCurrency } from 'loot-core/src/shared/util';

import useCategories from '../../hooks/useCategories';
import ArrowsSynchronize from '../../icons/v2/ArrowsSynchronize';
import { theme, styles } from '../../style';
import { Table, Row, Field, Cell } from '../table';
import DisplayId from '../util/DisplayId';

const ReportRow = memo(function ReportRow({
transaction,
fields,
payees,
categories,
accounts,
}) {
// TODO: Convert these to use fetched queries
let c = getCategoriesById(categories)[transaction.category];
let a = getAccountsById(accounts)[transaction.account];

return (
<Row style={{ color: theme.tableText }}>
{fields.map((field, i) => {
switch (field) {
case 'date':
return (
<Field key={i} width={100}>
{transaction.date}
</Field>
);
case 'imported_payee':
return (
<Field key={i} width="flex">
{transaction.imported_payee}
</Field>
);
case 'payee':
return (
<Cell
key={i}
width="flex"
exposed={true}
style={{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-start',
}}
>
{() => (
<>
{transaction.schedule && (
<ArrowsSynchronize
style={{
width: 13,
height: 13,
margin: '0 5px',
}}
/>
)}
<DisplayId type="payees" id={transaction.payee} />
</>
)}
</Cell>
);
case 'category':
return (
<Field key={i} width="flex" title={c && c.name}>
{c ? c.name : ''}
</Field>
);
case 'account':
return (
<Field key={i} width="flex" title={a.name}>
{a.name}
</Field>
);
case 'notes':
return (
<Field key={i} width="flex" title={transaction.notes}>
{transaction.notes}
</Field>
);
case 'amount':
return (
<Field
key={i}
width={75}
style={{ textAlign: 'right', ...styles.tnum }}
>
{integerToCurrency(transaction.amount)}
</Field>
);
default:
return null;
}
})}
</Row>
);
});

export default function ReportsTable({
data,
fields = ['date', 'payee', 'amount'],
style,
}) {
let { grouped: categories } = useCategories();
let { payees, accounts, dateFormat } = useSelector(state => {

Check warning on line 113 in packages/desktop-client/src/components/reports/ReportsTable.js

View workflow job for this annotation

GitHub Actions / lint 

'dateFormat' is assigned a value but never used. Allowed unused vars must match /^_/u
return {
payees: state.queries.payees,
accounts: state.queries.accounts,
dateFormat: state.prefs.local.dateFormat || 'MM/dd/yyyy',
};
});
let memoFields = useMemo(() => fields, [JSON.stringify(fields)]);

let renderItem = useCallback(
({ item }) => {
return (
<ReportRow
transaction={item}
payees={payees}
categories={categories}
accounts={accounts}
fields={memoFields}
/>
);
},
[payees, categories, memoFields],
);

return (
<Table
style={style}
items={data}
/*renderEmpty={renderEmpty}*/
headers={
<>
{fields.map((field, i) => {
switch (field) {
case 'date':
return (
<Field key={i} width={100}>
Date
</Field>
);
case 'imported_payee':
return (
<Field key={i} width="flex">
Imported payee
</Field>
);
case 'payee':
return (
<Field key={i} width="flex">
Payee
</Field>
);
case 'category':
return (
<Field key={i} width="flex">
Category
</Field>
);
case 'account':
return (
<Field key={i} width="flex">
Account
</Field>
);
case 'notes':
return (
<Field key={i} width="flex">
Notes
</Field>
);
case 'amount':
return (
<Field key={i} width={75} style={{ textAlign: 'right' }}>
Amount
</Field>
);
default:
return null;
}
})}
</>
}
renderItem={renderItem}
/>
);
}

0 comments on commit 014d4ea

Please sign in to comment.