Skip to content

Data visualization: Add Date header

This is part of #404+

With RccSegmentBaseComponent and the date picker from #408+ at hand we can complete the header of the data visualization screen.

The starting date together with time period from the RccSegmentBaseComponent determines the end date.

What is to be done?

  • Add RccSegmentBaseComponent and the date picker to ReportStackedViewComponent as in the layout below.
  • RccSegmentBaseComponent should show three options: 'week', 'month', 'year', default: 'week'
  • Add the end date below RccSegmentBaseComponent (right side), initially set to today.
  • Add the date picker below RccSegmentBaseComponent (left side); initially set to end date minus the time period from RccSegmentBaseComponent.
  • When either date or time period is changed calculate a new end date.
  • Output the time frame below the date picker and the end date (will be removed in a later issue)

Calculations

Just for now:

Adding a week means adding 7 days.

Adding a month means adding 4 weeks.

Adding A year means same date next year or 28.Feb for 29.Feb if it does not exist.

Where to start?

  • ReportStackedViewComponent: /lib/features/src/report-stacked-view/view/report-stacked-view.component.ts

Layouts

C_012_Different_Time_Windows

Figma: https://www.figma.com/file/8PWKCoBl4vl4TrI32UV5op/RC-Design-PRODUCTION?node-id=3765%3A51569&t=JPegvvF8LwM0fOg8-1

Clickup: https://app.clickup.com/t/861m55vqp

Edited by Andreas Pittrich