Add custom date ranges to custom reports #1536
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Changes proposed ✍️
What
🤖 Generated by Copilot at ce9c9da
This pull request adds a custom date range feature to the widget cube query builder, and improves the usability and clarity of the widget cube builder drawer. It modifies the
DateRangeSelect.vue
,widget-cube-builder.vue
, andreport-grid-layout.vue
components, and adds some custom styles to thedate-picker.scss
file.
🤖 Generated by Copilot at ce9c9da
Why
How
🤖 Generated by Copilot at ce9c9da
action
to thewidget-cube-builder.vue
andwidgetDrawer
components, to indicate whether the drawer is for editing or adding a new widget (link, link, link)title
prop of theapp-drawer
component, to dynamically compute the title based on theaction
prop (link)model-value
prop of theel-select
component in theDateRangeSelect.vue
component, to bind it to a new data propertyselectedDateRange
, which is computed from thetimeDimensions
prop (link)DateRangeSelect.vue
component template, to render ael-date-picker
component if theselectedDateRange
is equal to 'Custom' (link)dateRangeItems
data property of theDateRangeSelect.vue
component, to allow the user to select a custom date range using theel-date-picker
component (link)changeHandler
method of theDateRangeSelect.vue
component, to handle the 'Custom' option, set the default custom date range and granularity, and emit the custom date range to the cube query (link)watch
option to theDateRangeSelect.vue
component, to watch thetimeDimensions
prop and update theselectedDateRange
andselectedCustomDateRange
data properties accordingly (link)disabledDate
to theDateRangeSelect.vue
component, to disable invalid dates in theel-date-picker
component (link)date-picker.scss
file, to match the design and color scheme of the app (link)DateRangeSelect.vue
component, to style theel-date-picker
component and its popper (link)Checklist ✅
Feature
,Improvement
, orBug
.