Skip to content

Commit

Permalink
Merge pull request #2904 from ebardelli/fix_table_grouping
Browse files Browse the repository at this point in the history 
Fix table grouping
  • Loading branch information
@kwongz
kwongz authored Jan 2, 2025
2 parents 0b441cf + 3ce6995 commit c87ac66
Show file tree
Hide file tree
Showing 3 changed files with 74 additions and 132 deletions.
5 changes: 5 additions & 0 deletions .changeset/twelve-toes-serve.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@evidence-dev/core-components': patch
---

Remove groupDataPopulated flag
103 changes: 18 additions & 85 deletions packages/ui/core-components/src/lib/unsorted/viz/table/DataTable.stories.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -365,91 +365,24 @@
<h3>AreaMap Error</h3>
<AreaMap data={la_zip_sales} geoId="ZCTA5CE10" value="sales" areaCol="zip_codeERROR" />
</Story>
<!-- <Story name="column sort layout shift">
{@const countries = Query.create(
`SELECT 'United States' as country, 'North America' as continent, 22996 as gdp_usd, 0.017 as gdp_growth, 0.025 as interest_rate, 0.085 as inflation_rate, 0.037 as jobless_rate, -16.7 as gov_budget, 137.2 as debt_to_gdp, -3.6 as current_account, 332.4 as population
UNION ALL
SELECT 'China', 'Asia', 17734, 0.004, 0.0365, 0.027, 0.054, -3.7, 66.8, 1.8, 1412.6
UNION ALL
SELECT 'Japan', 'Asia', 4937, 0.002, -0.001, 0.026, 0.026, -12.6, 266.2, 3.2, 125.31
UNION ALL
SELECT 'Germany', 'Europe', 4223, 0.017, 0.005, 0.079, 0.055, -3.7, 69.3, 7.4, 83.16
UNION ALL
SELECT 'United Kingdom', 'Europe', 3187, 0.029, 0.0175, 0.101, 0.038, -6, 95.9, -2.6, 67.53
UNION ALL
SELECT 'India', 'Asia', 3173, 0.135, 0.054, 0.0671, 0.078, -9.4, 73.95, -1.7, 1380
UNION ALL
SELECT 'France', 'Europe', 2937, 0.042, 0.005, 0.058, 0.074, -6.5, 112.9, 0.4, 67.63
UNION ALL
SELECT 'Italy', 'Europe', 2100, 0.047, 0.005, 0.084, 0.079, -7.2, 150.8, 2.5, 59.24
UNION ALL
SELECT 'Canada', 'North America', 1991, 0.029, 0.025, 0.076, 0.049, -4.7, 117.8, 0.1, 38.44
UNION ALL
SELECT 'South Korea', 'Asia', 1799, 0.029, 0.025, 0.057, 0.029, -6.1, 42.6, 3.5, 51.74
UNION ALL
SELECT 'Russia', 'Europe', 1776, -0.04, 0.08, 0.151, 0.039, 0.8, 18.2, 6.8, 145.55
UNION ALL
SELECT 'Brazil', 'South America', 1609, 0.032, 0.1375, 0.1007, 0.091, -4.5, 80.27, -1.8, 213.32`,
<Story name="With Input Filtering Query on GroupBy">
{@const data = Query.create(
`SELECT * from flights where regulator in ('Afghanistan', 'Belgium', 'Canada', 'Denmark') limit 50`,
query
)}
<DataTable
data={countries}
totalRow="true"
rows="5"
wrapTitles
groupBy="continent"
groupType="section"
totalRowColor="#f2f2f2"
>
<Column
id="gdp_growth"
totalAgg="weightedMean"
weightCol="gdp_usd"
fmt="pct1"
colGroup="GDP"
contentType="delta"
/>
<Column
id="jobless_rate"
totalAgg="weightedMean"
weightCol="gdp_usd"
fmt="pct1"
contentType="colorscale"
colorScale="red"
colGroup="Labour Market"
/>
<Column
id="population"
totalAgg="sum"
colGroup="Labour Market"
/>
<Column
id="interest_rate"
totalAgg="weightedMean"
weightCol="gdp_usd"
fmt="pct2"
wrapTitle="false"
colGroup="Other"
/>
<Column
id="inflation_rate"
totalAgg="weightedMean"
weightCol="gdp_usd"
fmt="pct2"
colGroup="Other"
/>
<Column
id="gov_budget"
totalAgg="weightedMean"
weightCol="gdp_usd"
contentType="delta"
colGroup="Other"
/>
<Column
id="current_account"
totalAgg="weightedMean"
weightCol="gdp_usd"
colGroup="Other"
/>
{@const filteredData = Query.create(
`SELECT * from flights where regulator = '${$inputStore.regulator.value}' limit 10`,
query
)}

<Dropdown name="regulator" {data} value="regulator" label="regulator" />
<h2>Filtered Data</h2>
<DataTable data={filteredData} title="Flights" groupsOpen="false">
<Column id="id" title="ID" />
<Column id="plane" title="Plane" />
<Column id="airline" title="Airline" />
<Column id="regulator" title="Regulator" />
</DataTable>
</Story> -->
<h2>Filtered Data Group By</h2>
<DataTable data={filteredData} title="Flights" groupBy="regulator" groupsOpen="true" />
</Story>
98 changes: 51 additions & 47 deletions packages/ui/core-components/src/lib/unsorted/viz/table/_DataTable.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
export let data;
export let queryID = undefined;
export let rows = 10; // number of rows to show
$: rows = Number.parseInt(rows);
export let rowNumbers = false;
Expand Down Expand Up @@ -136,7 +137,6 @@
// Add props to store to let child components access them
// ---------------------------------------------------------------------------------------
props.update((d) => {
groupDataPopulated = false;
return { ...d, data, columns: [] };
});
Expand Down Expand Up @@ -290,6 +290,56 @@
);
}
// ---------------------------------------------------------------------------------------
// GROUPED DATA
// ---------------------------------------------------------------------------------------
let groupedData = {};
let groupRowData = [];
$: if (data) {
groupDataPopulated = false;
}
$: if (!error) {
if (groupBy && !groupDataPopulated) {
groupedData = data.reduce((acc, row) => {
const groupName = row[groupBy];
if (!acc[groupName]) {
acc[groupName] = [];
}
acc[groupName].push(row);
return acc;
}, {});
groupDataPopulated = true;
}
// After groupedData is populated, calculate aggregations for groupRowData
groupRowData = Object.keys(groupedData).reduce((acc, groupName) => {
acc[groupName] = {}; // Initialize groupRow object for this group
for (const col of $props.columns) {
const id = col.id;
const colType = columnSummary.find((d) => d.id === id)?.type;
const totalAgg = col.totalAgg;
const weightCol = col.weightCol;
const rows = groupedData[groupName];
acc[groupName][id] = aggregateColumn(rows, id, totalAgg, colType, weightCol);
}
return acc;
}, {});
// Update groupToggleStates only for new groups
const existingGroups = Object.keys(groupToggleStates);
for (const groupName of Object.keys(groupedData)) {
if (!existingGroups.includes(groupName)) {
groupToggleStates[groupName] = groupsOpen; // Only add new groups with the default state
}
// Existing states are untouched
}
}
// ---------------------------------------------------------------------------------------
// SORTING
// ---------------------------------------------------------------------------------------
Expand Down Expand Up @@ -445,52 +495,6 @@
$props.columns.map((d) => d.id)
);
// ---------------------------------------------------------------------------------------
// GROUPED DATA
// ---------------------------------------------------------------------------------------
let groupedData = {};
let groupRowData = [];
$: if (!error) {
if (groupBy && !groupDataPopulated) {
groupedData = data.reduce((acc, row) => {
const groupName = row[groupBy];
if (!acc[groupName]) {
acc[groupName] = [];
}
acc[groupName].push(row);
return acc;
}, {});
groupDataPopulated = true;
}
// After groupedData is populated, calculate aggregations for groupRowData
groupRowData = Object.keys(groupedData).reduce((acc, groupName) => {
acc[groupName] = {}; // Initialize groupRow object for this group
for (const col of $props.columns) {
const id = col.id;
const colType = columnSummary.find((d) => d.id === id)?.type;
const totalAgg = col.totalAgg;
const weightCol = col.weightCol;
const rows = groupedData[groupName];
acc[groupName][id] = aggregateColumn(rows, id, totalAgg, colType, weightCol);
}
return acc;
}, {});
// Update groupToggleStates only for new groups
const existingGroups = Object.keys(groupToggleStates);
for (const groupName of Object.keys(groupedData)) {
if (!existingGroups.includes(groupName)) {
groupToggleStates[groupName] = groupsOpen; // Only add new groups with the default state
}
// Existing states are untouched
}
}
let fullscreen = false;
/** @type {number} */
let innerHeight;
Expand Down

0 comments on commit c87ac66

Please sign in to comment.