Improve the consistency between VSA and DORA charts - (Add date picker to DORA4 charts)
<!-- This issue template can be used as a great starting point for feature requests. The section "Release notes" can be used as a summary of the feature and is also required if you want to have your release post blog MR auto generated using the release post item generator: https://about.gitlab.com/handbook/marketing/blog/release-posts/#release-post-item-generator. The remaining sections are the backbone for every feature in GitLab.
The goal of this template is brevity for quick/smaller iterations. For a more thorough list of considerations for larger features or feature sets, you can leverage the detailed [feature proposal](https://gitlab.com/gitlab-org/gitlab/-/blob/master/.gitlab/issue_templates/Feature%20proposal%20-%20detailed.md). -->
### Release notes
<!-- What is the problem and solution you're proposing? This content sets the overall vision for the feature and serves as the release notes that will populate in various places, including the [release post blog](https://about.gitlab.com/releases/categories/releases/) and [Gitlab project releases](https://gitlab.com/gitlab-org/gitlab/-/releases). " -->
### Problem to solve
<!-- What is the user problem you are trying to solve with this issue? -->
As a user viewing Value stream metrics and DORA metrics, I find the interaction confusion and I do not have a consistent user experience
### Additional Details
There is a difference in the deployments number between VSA and the CICD charts (thought it should be the same tile) and the default is different so when I click on deployment frequency from the VSA tile (it is last 30 days) but after I go to CICD it shows 7 days so the numbers are totally different.
Recorded walkthrough: https://gitlab.zoom.us/rec/play/Q8rsw2es41X8G33lQkOg9gCf_GVk0EYXg5qXzf7zCZW1nDNAMNWRJSTQ080ZW4ZDce0PahtUV3Drd6wH.EMeJnBtXZ28KFhfu?autoplay=true&continueMode=true&startTime=1644402264000
| VSA | CI/CD |
|---|---|
|  | |
From investigation that @ahegyi did, it looks like there is a difference in the start date
From the requests:
created_after=2022-01-10
created_after=2022-01-11
1. We need a standard way to determine the start and end day of the range. In VSA we use "29 days ago" as the start date. The end day is the today's date (this is how we get 30 days).
- This might be related to https://gitlab.com/gitlab-org/gitlab/-/issues/205161+ and need to be split from this issue.
### Proposal
<!-- Use this section to explain the feature and how it will work. It can be helpful to add technical details, design proposals, and links to related epics or issues. -->
1. Resolve the inconsistent and confusing user experience when drilling down from VSA into DORA charts by adding the date picker to the DORA4 metrics pages

2. The DORA charts will inherit the `date_range` for the VSA filter bar.
3. The date range should be reflected in the URL, allowing easy comparison of different time periods and will help with sharing charts links that show the intended timespan.
4. A default range of `30 days` should be displayed when user opens the chart from the left sidebar, Analytics > CI/CD Analytics.
5. This need to be done the 4 DORA metric charts:
- Deployment Frequency
- Lead Time For Changes
- Time To Restore Service
- Change Failure Rate
* For the datepicker it's already supported at gitlab~2492649 and [no changes required](https://gitlab.com/gitlab-org/gitlab/-/issues/352398#note_1044891844).
### Open questions
1. ~~Do we want to remove the "predefined dates"?~~
* @danmh: Yes. If we were to have predefined time ranges I'd expect these to be built into the date-picker as part of a date-picker redesign.
2. ~~Can the DORA charts inherit also the `filters` from the filter bar?~~
* @danmh : Yes, I think doing so would match user expectations. However, I can't think of a use case.
### Intended users
<!-- Who will use this feature? If known, include any of the following: types of users (e.g. Developer), personas, or specific company roles (e.g. Release Manager). It's okay to write "Unknown" and fill this field in later.
Personas are described at https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/
* [Cameron (Compliance Manager)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#cameron-compliance-manager)
* [Parker (Product Manager)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#parker-product-manager)
* [Delaney (Development Team Lead)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#delaney-development-team-lead)
* [Presley (Product Designer)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#presley-product-designer)
* [Sasha (Software Developer)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#sasha-software-developer)
* [Devon (DevOps Engineer)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#devon-devops-engineer)
* [Sidney (Systems Administrator)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#sidney-systems-administrator)
* [Sam (Security Analyst)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#sam-security-analyst)
* [Rachel (Release Manager)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#rachel-release-manager)
* [Alex (Security Operations Engineer)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#alex-security-operations-engineer)
* [Simone (Software Engineer in Test)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#simone-software-engineer-in-test)
* [Allison (Application Ops)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#allison-application-ops)
* [Priyanka (Platform Engineer)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#priyanka-platform-engineer)
* [Dana (Data Analyst)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#dana-data-analyst)
* [Eddie (Content Editor)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#eddie-content-editor)
-->
### Metrics
<!-- How are you going to track usage of this feature? Think about user behavior and their interaction with the product. What indicates someone is getting value from it?
Create tracking issue using the Snowplow event tracking template. See https://gitlab.com/gitlab-org/gitlab/-/blob/master/.gitlab/issue_templates/Snowplow%20event%20tracking.md
-->
<!-- Label reminders
Use the following resources to find the appropriate labels:
- https://gitlab.com/gitlab-org/gitlab/-/labels
- https://about.gitlab.com/handbook/product/categories/features/
-->
<!-- triage-serverless v3 PLEASE DO NOT REMOVE THIS SECTION -->
*This page may contain information related to upcoming products, features and functionality.
It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes.
Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.*
<!-- triage-serverless v3 PLEASE DO NOT REMOVE THIS SECTION -->
epic