Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New Announcement for Plot Customizations [Early Access] #551

Merged
merged 1 commit into from
Jul 31, 2024
Merged

New Announcement for Plot Customizations [Early Access] #551

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
154 changes: 154 additions & 0 deletions content/dev/features/new-graph-customizations.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
+++
date = "2024-07-31T11:27:57+01:00"
publishdate = "2024-07-31T11:27:57+01:00"
draft = false
title = "New graph customizations for dashboard display"
news_description = "Ever wanted to hide the gridlines or the numeric axis for a cleaner look? Ever wanted to add in confidence bands after saving? Now you can customize your saved visualizations to get the dashboard display you want. Click here to learn more."
description = "Crunch now gives you more control than ever before over how your graphs are displayed in dashboards, as well as a more logical arrangement of controls across tabs."
weight = 20
tags = ["analyses", "dashboard", "graphs"]
categories = ["feature"]
images = ["https://crunch.io/img/logo-1200x630.png"]
labs_only = true
no_profiles = true
series = "main"

+++

## How it works

When editing a dashboard, you already have access to lots of great customizations via the existing tabs of the “Edit Tile” interface – Properties, Categories and Colors. For most visualization types, you’ll now find a fourth tab – Options.

{{<figure src="https://player-crunch-io.s3.amazonaws.com/help-crunch-io/screenshots/options_tab.png" class="img-fluid center">}}

## The new Options tab

The contents of this tab will include most of the following options, though the actual set will vary depending on the visualization type you’re working with.

Some are new options not previously available while others are options that have been moved to this tab for consistency.

## New options

**Hide value axis**
<div class="container">
<div class="row">
<div class="col-md-6">
{{<figure src="https://player-crunch-io.s3.amazonaws.com/help-crunch-io/screenshots/bar-customization-option-01.png" class="img-fluid-col-2 max-width-img-md">}}
<figcaption class="img-caption">Default - value axis shown</figcaption>
</div>
<div class="col-md-6">
{{<figure src="https://player-crunch-io.s3.amazonaws.com/help-crunch-io/screenshots/bar-customization-option-02.png" class="img-fluid-col-2 max-width-img-md">}}
<figcaption class="img-caption">Value axis hidden (and “Show values” enabled)</figcaption>
</div>
</div>
</div>

We would recommend always enabling “Show values” if you hide the value axis, otherwise it will be hard for your users to interpret the visualization.

**Hide gridlines**

<div class="container">
<div class="row">
<div class="col-md-6">
{{<figure src="https://player-crunch-io.s3.amazonaws.com/help-crunch-io/screenshots/bar-customization-option-03.png" class="img-fluid-col-2 max-width-img-md">}}
<figcaption class="img-caption">Default - gridlines shown</figcaption>
</div>
<div class="col-md-6">
{{<figure src="https://player-crunch-io.s3.amazonaws.com/help-crunch-io/screenshots/bar-customization-option-04.png" class="img-fluid-col-2 max-width-img-md">}}
<figcaption class="img-caption">Gridlines hidden</figcaption>
</div>
</div>
</div>

**Hide connecting bars**

When confidence intervals are enabled for bar graphs, those intervals are connected to the category axis with thin bars. You can now hide these connecting bars if you prefer.

<div class="container">
<div class="row">
<div class="col-md-6">
{{<figure src="https://player-crunch-io.s3.amazonaws.com/help-crunch-io/screenshots/bar-customization-option-07.png" class="img-fluid-col-2 max-width-img-md">}}
<figcaption class="img-caption">Default - connecting bars shown</figcaption>
</div>
<div class="col-md-6">
{{<figure src="https://player-crunch-io.s3.amazonaws.com/help-crunch-io/screenshots/bar-customization-option-08.png" class="img-fluid-col-2 max-width-img-md">}}
<figcaption class="img-caption">Connecting bars hidden</figcaption>
</div>
</div>
</div>

**Category axis label position (horizontal bars only)**

<div class="container">
<div class="row">
<div class="col-md-6">
{{<figure src="https://player-crunch-io.s3.amazonaws.com/help-crunch-io/screenshots/bar-customization-option-09.png" class="img-fluid-col-2 max-width-img-md">}}
<figcaption class="img-caption">Default - category axis labels outside the plot</figcaption>
</div>
<div class="col-md-6">
{{<figure src="https://player-crunch-io.s3.amazonaws.com/help-crunch-io/screenshots/bar-customization-option-10.png" class="img-fluid-col-2 max-width-img-md">}}
<figcaption class="img-caption">Category axis labels run along the bar length</figcaption>
</div>
</div>
</div>

## Existing options

**Show values**

<div class="container">
<div class="row">
<div class="col-md-6">
{{<figure src="https://player-crunch-io.s3.amazonaws.com/help-crunch-io/screenshots/bar-customization-option-11.png" class="img-fluid-col-2 max-width-img-md">}}
<figcaption class="img-caption">Default - no values shown</figcaption>
</div>
<div class="col-md-6">
{{<figure src="https://player-crunch-io.s3.amazonaws.com/help-crunch-io/screenshots/bar-customization-option-12.png" class="img-fluid-col-2 max-width-img-md">}}
<figcaption class="img-caption">With values displayed</figcaption>
</div>
</div>
</div>

**Value axis - Min and Max**

<div class="container">
<div class="row">
<div class="col-md-6">
{{<figure src="https://player-crunch-io.s3.amazonaws.com/help-crunch-io/screenshots/bar-customization-option-05.png" class="img-fluid-col-2 max-width-img-md">}}
<figcaption class="img-caption">Default - dynamic numeric axis range</figcaption>
</div>
<div class="col-md-6">
{{<figure src="https://player-crunch-io.s3.amazonaws.com/help-crunch-io/screenshots/bar-customization-option-06.png" class="img-fluid-col-2 max-width-img-md">}}
<figcaption class="img-caption">Max set to 100 (as an example)</figcaption>
</div>
</div>
</div>

**Fit to tile**

<div class="container">
<div class="row">
<div class="col-md-6">
{{<figure src="https://player-crunch-io.s3.amazonaws.com/help-crunch-io/screenshots/bar-customization-option-13.png" class="img-fluid-col-2 max-width-img-md">}}
<figcaption class="img-caption">Default - bars sized to ‘best practice’ proportions</figcaption>
</div>
<div class="col-md-6">
{{<figure src="https://player-crunch-io.s3.amazonaws.com/help-crunch-io/screenshots/bar-customization-option-14.png" class="img-fluid-col-2 max-width-img-md">}}
<figcaption class="img-caption">Bars spaced and sized to use the available tile area</figcaption>
</div>
</div>
</div>

In addition to the new customizations available in the Options tab, “Show confidence bands” has now been added to the Properties tab. This will allow you to enable or disable confidence bands on visualizations even after having saved them to a deck or dashboard.

{{<figure src="https://player-crunch-io.s3.amazonaws.com/help-crunch-io/screenshots/show_confidence_bands_checkbox.png" class="img-fluid center">}}

## Try it out today

This feature is currently available to [Early Access](https://help.crunch.io/hc/en-us/articles/360040465331-How-to-enable-early-access) users.

For full details of this new feature, see the [help center](https://help.crunch.io/hc/en-us/articles/9414277417741-Customizing-dashboards-and-dashboard-tiles#h_01J3XVABPZWWMTWAJS4RZY23F8).

## Your Feedback Matters

As always, we're eager to hear what you think about these enhancements. Please share your thoughts via [[email protected]](mailto:[email protected]).
1 change: 0 additions & 1 deletion content/dev/features/quick-copy.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ categories = ["feature"]
images = ["https://crunch.io/img/logo-1200x630.png"]
labs_only = false
no_profiles = true
series = "main"

+++

Expand Down
7 changes: 7 additions & 0 deletions source/scss/modules/_components.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -551,6 +551,13 @@ figure {
margin-bottom: 15px;
}
}

&.img-fluid-col-2 {
img {
max-width: 100%;
}
}

figcaption h4 {
margin-top: -15px;
font-weight: 500;
Expand Down
8 changes: 7 additions & 1 deletion source/scss/modules/_typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,13 @@ h4 {
font-size: 1.2em;
}

.img-caption {
margin-top: -10px;
font-size: 14px;
font-style: italic;
padding: 0 0 20px 0;
}

.lead {
font-size: 1.2em;
line-height: 1.5em;
Expand Down Expand Up @@ -124,4 +131,3 @@ h4 {
font-size: 14px;
}
}

Loading