Skip to content

Commit

Permalink
docs: update date zoom
Browse files Browse the repository at this point in the history
  • Loading branch information
jpetey75 committed Dec 11, 2024
1 parent 6b77312 commit 4173fb9
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 26 deletions.
Binary file removed docs/guides/assets/date-zoom-before-and-after.png
Binary file not shown.
70 changes: 44 additions & 26 deletions docs/guides/interactive-dashboards.mdx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import CrossFilteringImage from './assets/cross-filtering.png';
import CrossFilteringAppliedImage from './assets/cross-filtering-applied.png';
import UnderlyingChart from './assets/underlying-chart-data.png';
import DateZoomBeforeAndAfter from './assets/date-zoom-before-and-after.png';
import DateZoomIndicator from './assets/date-zoom-indicator.png';
import DrillIntoDashboardChart from './assets/drill-into-dashboard-chart.png';
import DrillIntoModal from './assets/drill-into-modal.png';
Expand Down Expand Up @@ -58,45 +57,64 @@ The filters you add using cross-filtering won't be saved unless you're in `edit`

Otherwise, you can cross-filter away without any worry that you'll be changing the chart for everyone else! 😊

## Date zoom

When viewing a dashboard, you can also change the date granularity (e.g. to Week, Year) of the **charts with date dimensions in your dashboard** by clicking on the button `Date Zoom`.

This is helpful if you want to zoom in to look more closely at something, or zoom out to identify a trend. You're able to quickly date-drill into your data without having to edit the chart.

<img
src={DateZoomBeforeAndAfter}
width="694"
height="351"
style={{ display: 'block', margin: '0 auto 20px auto' }}
/>

When the date granularity of a chart is changed, you can hover over the indicator to see the date dimension that was affected, like so:
## Date Zoom

When viewing a dashboard, you can change the date granularity (to Week, Year, etc.) of the **charts with date dimensions** by clicking on the `Date Zoom` button.

This is helpful if you want to zoom in to look more closely at something, or zoom out to identify a trend. You're able to quickly view your results at different time granularities without editing the chart. Here's a quick video showing Date Zoom in action:

<div
style={{
position: 'relative',
paddingBottom: '65%',
height: 0,
}}
>
<iframe
src="https://www.loom.com/embed/51b56a1da063406495e806b7da2577bc?sid=2499bd03-b2f7-40fa-b579-4e99c5632a97"
frameborder="0"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
}}
></iframe>
</div>


When the date granularity of a chart is changed, you can hover over the indicator to see the date dimension that was affected:

<img
src={DateZoomIndicator}
width="400"
height="351"
style={{ display: 'block', margin: '0 auto 20px auto' }}
/>
Any chart with results that have at least one date dimension will be affected by
Date Zoom (even if the date dimension is not explicitly shown on the chart).

Any chart with results that have at least one date Dimension will be affected by Date Zoom (even if the date dimension is not explicitly shown on the chart).

:::info
If you have more than one date dimension in your results, date drill will be applied to the first date dimension it scans - this is normally the left-most column in your results.

If you have more than one date dimension in your results, Date Zoom will be applied to the first date dimension it scans - this is normally the left-most column in your results.

:::

Also, you're only temporarily changing the dates in the tiles on your dashboard. So, if you refresh the dashboard, the tiles that you affected using Date Zoom will go back to how they looked before.
You're only temporarily changing the dates in the tiles on your dashboard. If you refresh the dashboard, the affected tiles will go back to their default saved state.

## Drill into a metric in a chart or your results table using `drill into`
## Drill into a metric in a chart or your results table using `Drill into`

You can drill into a metric in your chart or results table to better understand a point in your chart. Selecting `drill into` lets you group your metric by a dimension, like the total revenue segmented by (or grouped by) product type. Note that `drill into` only works for metrics, not for dimensions or table calculations.
You can drill into a Metric in your chart or results table to better understand a point in your chart. Selecting `Drill into` lets you group your Metric by a Dimension, like revenue segmented by (or grouped by) product type. Note that `Drill into` only works for Metrics, not for Dimensions or Table Calculations.

### Here's an example of drill into
### Here's an example of Drill into

I have a chart with sales stats (a metric) per partner, per month. As you can see, there's a high spike in sales for one of the partners in the month of May. I want to understand why this spike happened.
I have a chart with **Sum of basket total** (a Metric) per Partner, per month. As you can see, there's a high spike in sales for one of the partners in the month of May. I want to understand why this spike happened.

To do this, I click on the data point in my chart, then click `drill into` in the action menu:
To do this, I click on the data point in my chart, then click `Drill into` in the action menu:

<img
src={DrillIntoDashboardChart}
Expand All @@ -105,7 +123,7 @@ To do this, I click on the data point in my chart, then click `drill into` in th
style={{ display: 'block', margin: '0 auto 20px auto' }}
/>

I then select the dimension I want to segment my metric by (or "drill into"). In this example, I'm interested to see what shipping country the sales were coming from, so I select `Shipping Country`:
I then select the Dimension I want to segment my metric by (or "drill into"). In this example, I'm interested to see what Shipping country the orders were coming from, so I select **Shipping country**:

<img
src={DrillIntoModal}
Expand All @@ -114,7 +132,7 @@ I then select the dimension I want to segment my metric by (or "drill into"). In
style={{ display: 'block', margin: '0 auto 20px auto' }}
/>

Once I've selected the dimension I want to group by, I click `open in new tab` and see a chart with my metric, grouped by `Shipping Country`. Now I can uncover where this spike in sales is coming from 👀
Once I've selected the Dimension I want to group by, I click `Open in new tab` and see a chart with my Metric, grouped by `Shipping country`. Now I can uncover where this spike in sales is coming from 👀

<img
src={DrillIntoResultDay}
Expand Down

0 comments on commit 4173fb9

Please sign in to comment.