Dashboard updates with filter chips by pylipp · Pull Request #2807 · boxwise/boxtribute

pylipp · 2026-07-02T14:58:21Z

This PR updates the Statviz dashboard responsiveness and filtering UX. In addition to the layout/chart sizing updates and default movement date range change, it now adds filter chips to the three dashboard sections (Stock Overview, Movement History, Beneficiary Overview), aligned left in the same row as each section’s filter action. The chips reflect applied filters, support per-chip removal, and include a clear-all action.

codecov · 2026-07-02T15:03:49Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 76.42%. Comparing base (57d1ebc) to head (102069e).

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #2807      +/-   ##
==========================================
+ Coverage   76.36%   76.42%   +0.06%     
==========================================
  Files         326      326              
  Lines       23500    23508       +8     
  Branches     2330     2328       -2     
==========================================
+ Hits        17945    17967      +22     
+ Misses       5507     5493      -14     
  Partials       48       48

Flag	Coverage Δ
backend	`99.66% <ø> (ø)`
frontend	`69.95% <ø> (ø)`
sharedComponents	`27.87% <ø> (+3.84%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copilot

Pull request overview

This PR updates the Statviz dashboard layout and chart sizing to be more responsive (moving several visualizations from fixed pixel widths to fluid "100%" widths), and adjusts default movement date filtering to show a longer time range.

Changes:

Expanded default movement date range from the last ~3 months to the last 1 year.
Reworked dashboard/chart layouts to use SimpleGrid and fluid widths ("100%") instead of fixed pixel sizing and Wrap.
Simplified VisHeader by removing maxWidthPx handling and updated visualization components accordingly.

Reviewed changes

Copilot reviewed 22 out of 22 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
shared-components/statviz/utils/dashboardFilters.ts	Updates default movement filter start date to 1 year ago.
shared-components/statviz/dashboard/Demographics.tsx	Switches demographics dashboard layout from `Wrap` to `SimpleGrid`.
shared-components/statviz/components/visualizations/stock/StockOverviewRingFilterContainer.tsx	Makes ring chart container fluid by removing wrapper and using `width="100%"`.
shared-components/statviz/components/visualizations/stock/StockOverviewRing.tsx	Removes `VisHeader` max-width constraint usage.
shared-components/statviz/components/visualizations/stock/StockOverviewBarsFilterContainer.tsx	Passes fluid width into stock overview bars visualization.
shared-components/statviz/components/visualizations/stock/StockOverviewBars.tsx	Removes `VisHeader` max-width constraint usage.
shared-components/statviz/components/visualizations/movedBoxes/ShipmentsPieChart.tsx	Converts pie chart width to fluid and removes `VisHeader` max-width constraint usage.
shared-components/statviz/components/visualizations/movedBoxes/ShipmentsOverTimeChart.tsx	Converts line chart to fluid width and adjusts height; removes `VisHeader` max-width constraint usage.
shared-components/statviz/components/visualizations/movedBoxes/MovedBoxesCharts.tsx	Replaces `Wrap` layout with `SimpleGrid` and makes Sankey fluid width.
shared-components/statviz/components/visualizations/movedBoxes/BoxFlowSankey.tsx	Removes `VisHeader` max-width constraint usage.
shared-components/statviz/components/visualizations/demographic/DemographicPyramid.tsx	Updates pyramid chart sizing types and removes extra container styling.
shared-components/statviz/components/visualizations/demographic/DemographicCharts.tsx	Updates pyramid chart props to pass fluid width.
shared-components/statviz/components/visualizations/demographic/BeneficiaryReachChart.tsx	Converts reach bar chart width to fluid and tweaks filter control alignment.
shared-components/statviz/components/visualizations/demographic/BeneficiaryFiguresCards.tsx	Adjusts grid columns for beneficiary insight cards.
shared-components/statviz/components/visualizations/createdBoxes/BoxCreationCalendarFilterContainer.tsx	Makes calendar chart fluid width and increases height.
shared-components/statviz/components/visualizations/createdBoxes/BoxCreationCalendar.tsx	Removes `VisHeader` max-width constraint usage.
shared-components/statviz/components/VisHeader.tsx	Removes `maxWidthPx` prop and max-width logic from header.
shared-components/statviz/components/nivo/SankeyChart.tsx	Adds handling for percent widths by using a fallback width for scaling.
shared-components/statviz/components/nivo/PieChart.tsx	Adds handling for percent widths and adjusts center label rendering.
shared-components/statviz/components/nivo/LineChart.tsx	Adds handling for percent widths by using a fallback width for scaling.
shared-components/statviz/components/nivo/BarChart.tsx	Adjusts margins for percent widths (but still parses `"100%"` as `100` for theme scaling).
shared-components/statviz/components/custom-graphs/BarChartCenterAxis.tsx	Adds fluid width support via `ParentSize` and updates sizing calculations.

  if (chart.centerData) {
    const y = (height - margin.top - margin.bottom) / 1.8;
-    const x = (width - margin.right - margin.left) / 2;
+    const x = width - margin.right - margin.left;


pylipp · 2026-07-02T20:54:18Z

@copilot I need you to add one FilterChips element to each of the three sections (StockOverview, MovedBoxes, BeneOverview) of the Dashboard, corresponding to the filters applied via StockFilters/MovementFilters/BeneficiaryFilters. Use the approach as in front/src/views/*FilterChips.tsx. The filter chips should be placed in the same row as the resp. filter action, aligned to the left.

Co-authored-by: pylipp <10617122+pylipp@users.noreply.github.com>

Copilot · 2026-07-02T21:00:36Z

@copilot I need you to add one FilterChips element to each of the three sections (StockOverview, MovedBoxes, BeneOverview) of the Dashboard, corresponding to the filters applied via StockFilters/Movem...

Implemented in commit 0530836. Added filter chips to StockOverview, Movement History, and Beneficiary Overview, wired to the applied filters from StockFilters/MovementFilters/BeneficiaryFilters, and placed the chips in the same action row aligned to the left.

Copilot

Pull request overview

Copilot reviewed 31 out of 33 changed files in this pull request and generated 3 comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

Comments suppressed due to low confidence (1)

shared-components/statviz/components/filter/BeneficiaryFilters.tsx:29

The component was renamed to BeneficiaryFilters, but the props interface is still named DemographicsFiltersProps. Renaming the interface as well keeps naming consistent and avoids confusion when importing/reading this file.

  if (chart.centerData) {
    const y = (height - margin.top - margin.bottom) / 1.8;
-    const x = (width - margin.right - margin.left) / 2;
+    const x = width - margin.right - margin.left;


pylipp

For a bit of refactoring

pylipp · 2026-07-03T08:01:37Z

+import type { ITagOption, BeneficiaryAppliedFilters } from "../../utils/dashboardFilters";
 import { AGE_RANGES } from "../../utils/dashboardFilters";

 const HUMAN_GENDERS = ["Male", "Female", "Diverse"] as const;


could be centralized

pylipp · 2026-07-03T08:07:04Z

->;
+import { BeneficiaryReachData } from "../../../../../graphql/types";

 const AGE_GROUP_COLORS: Record<string, string> = {


pylipp added 5 commits July 2, 2026 14:36

Remove hardcoded VisHeader.maxWidthPx

5e6ac1a

Fix chart sizes

8ece096

Fix sizing of BarChartCenterAxis

03fb9cd

Fix more chart widths

14785f4

Fixup

8696732

fix-downlaod

28e5622

pylipp requested a review from Copilot July 2, 2026 16:16

Copilot started reviewing on behalf of pylipp July 2, 2026 16:16 View session

Copilot AI reviewed Jul 2, 2026

View reviewed changes

pylipp added 7 commits July 2, 2026 18:35

fixes

01b133d

fix

86e92d5

Fixup

712c6f5

Fixup

644a981

remove-sunburst

2e035ed

moveBoxesOrItemsCount

590e2aa

rename

558ea63

Copilot started work on behalf of pylipp July 2, 2026 20:54 View session

Add dashboard filter chips next to section filter actions

0530836

Co-authored-by: pylipp <10617122+pylipp@users.noreply.github.com>

Copilot AI changed the title ~~Dashboard updates~~ Dashboard updates with filter chips Jul 2, 2026

Copilot finished work on behalf of pylipp July 2, 2026 21:01

pylipp requested a review from Copilot July 2, 2026 22:25

Copilot started reviewing on behalf of pylipp July 2, 2026 22:26 View session

Copilot AI reviewed Jul 2, 2026

View reviewed changes

pylipp added 4 commits July 3, 2026 09:20

remove-file

c983c6e

rename

6d4fa9d

move-queries

48c35d8

use-icons

34eb14a

Fixup

102069e

pylipp commented Jul 3, 2026

View reviewed changes

pylipp merged commit dd904fd into master Jul 3, 2026
14 checks passed

pylipp deleted the dashboard-updates branch July 3, 2026 08:14

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Dashboard updates with filter chips#2807

Dashboard updates with filter chips#2807
pylipp merged 19 commits into
masterfrom
dashboard-updates

pylipp commented Jul 2, 2026 •

edited by Copilot AI

Loading

Uh oh!

codecov Bot commented Jul 2, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

pylipp commented Jul 2, 2026

Uh oh!

Copilot AI commented Jul 2, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

pylipp left a comment

Uh oh!

pylipp Jul 3, 2026

Uh oh!

pylipp Jul 3, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Uh oh!

Conversation

pylipp commented Jul 2, 2026 • edited by Copilot AI Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov Bot commented Jul 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

pylipp commented Jul 2, 2026

Uh oh!

Copilot AI commented Jul 2, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

pylipp left a comment

Choose a reason for hiding this comment

Uh oh!

pylipp Jul 3, 2026

Choose a reason for hiding this comment

Uh oh!

pylipp Jul 3, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

pylipp commented Jul 2, 2026 •

edited by Copilot AI

Loading

codecov Bot commented Jul 2, 2026 •

edited

Loading