Skip to content

Commit

Permalink
Merge pull request #1527 from HealthCatalyst/dev
Browse files Browse the repository at this point in the history
Content docs updates
  • Loading branch information
andrew-frueh committed Feb 17, 2021
2 parents 4e5c9da + e8bb616 commit ee87896
Show file tree
Hide file tree
Showing 20 changed files with 322 additions and 2,961 deletions.
24 changes: 19 additions & 5 deletions guides/analytics/powerbi/foundations.md
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,21 @@ Information about the dynamic filters pane is included in the [filters section](

Visualization objects such as charts, graphs, tables, and KPIs should be styled like the Cashmere [tile component](/web/components/tile) and will be referred to as tiles within this section.

In general, a Power BI tile has a **white** `#ffffff` background and a solid **white** `#ffffff` border with a 5px wide radius. Each tile should also have an outside-positioned **black** `#000000` shadow that is sized at 1px with a blur factor of 3px, angle of 90º, distance of 1px and transparency of 85%. Tiles should have at least 10px of padding between each other (5px on either side).
In general, a Power BI tile has a **white** `#ffffff` background and a solid **white** `#ffffff` border with a 5px wide radius. Tiles should have at least 10px of padding between each other (5px on either side).

<article>

Each tile should also have shadow with the following values:
- **Color**: black `#000000`
- **Shadow position**: Outside
- **Preset**: Custom
- **Size**: 1px
- **Blur**: 3px
- **Angle**: 90º
- **Distance**: 1px
- **Transparency**: 85%

</article>

Layout specifics for the most common visual objects can be found in the [KPI Metrics section](/analytics/powerbi-metrics), [Charts section](/analytics/powerbi-charts), and [Tables section](/analytics/powerbi-tables). Refer to the template or these sections for working examples.

Expand All @@ -140,28 +154,28 @@ Tiles should be evenly aligned horizontally and/or vertically

<div style="text-align:center"><br>

![correct alignment](/assets/analytics/powerbi/pbi-alignment.png "Correct Alignment")
![correct alignment](/assets/analytics/powerbi/pbi-align.png "Correct Alignment")

</div>

Tiles should not be distributed unevenly

<div style="text-align:center"><br>

![incorrect alignment](/assets/analytics/powerbi/pbi-alignment-wrong.PNG "Incorrect Alignment")
![incorrect alignment](/assets/analytics/powerbi/pbi-align-wrong.png "Incorrect Alignment")

</div>

Utilize Power BI's alignment capabilities by selecting each object and choosing the appropriate distribution option within the *Align* section under the *Format* toolbar

<div style="text-align:center"><br>

![alignment toolbar](/assets/analytics/powerbi/pbi-alignment-how.PNG "How To Align")
![alignment toolbar](/assets/analytics/powerbi/pbi-align-how.png "How To Align")

</div>

### Tile Title
Every tile should include a `left-aligned` title. The title text should be `Segoe (Bold)`, **offblack** `#333333`, with a font size of 10px.
Every tile should include a `left-aligned` title. The title text should be `Segoe UI`, **offblack** `#333333`, with a font size of 10px.

### Tile Visual Header

Expand Down
8 changes: 4 additions & 4 deletions guides/analytics/qlik/filters.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ This gives users a clear indication of the sample size being used to determine t
For example, if they've filtered the sample size down too small, the values in the dashboard will no longer be useful.
As many counts may be included as needed, one on top of the other.

![Filter Counts](./assets/analytics/qlik/qlik-filter-counts.PNG "Filter Counts")
![Filter Counts](./assets/analytics/qlik/qlik-filter-counts.png "Filter Counts")

These counts should be the first item on the sidebar, and should displayed with the data label left-justified and the value on the right.
The label should be `Arial`, 10pt, **white** `#ffffff RGB(255,255,255)`.
Expand All @@ -46,7 +46,7 @@ Retain a `6pt` margin within each object.
Controls should include a label (title) set to `Arial`, 11pt, **white** `#ffffff RGB(255,255,255)`.
Sub-controls should be set to `Arial`, 10pt.

![Filter Control](./assets/analytics/qlik/qlik-filter-control.PNG "Filter Control")
![Filter Control](./assets/analytics/qlik/qlik-filter-control.png "Filter Control")

### Footer

Expand All @@ -57,7 +57,7 @@ In general, the footer should be set to a fixed height of 55px with an Outer Pad
The label for the footer should be `Arial`, 9pt, **white** `#ffffff RGB(255,255,255)`.
The value for the footer should be `Arial Bold`, 11pt, **white** `#ffffff RGB(255,255,255)`.

![Filter Footer](./assets/analytics/qlik/qlik-filter-footer.PNG "Filter Footer")
![Filter Footer](./assets/analytics/qlik/qlik-filter-footer.png "Filter Footer")

:::

Expand All @@ -76,4 +76,4 @@ From a UX perspective, the risk with a page like this is that a user will define
That's why we want to limit this page primarily to power users.
You can link to it via an icon in the navbar (use the *AdvancedFilters.png* image included with the other [icons](https://dev.azure.com/healthcatalyst/Analytic%20Solutions/_git/ASO?path=%2F_references%2F_includes%2Fimages%2FHealthCatalystStockSet%2Fhcicons%2FPNG) within the code repository), which keeps it somewhat hidden for typical users.

:::
:::
18 changes: 9 additions & 9 deletions guides/analytics/qlik/foundations.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ Use of the Flexo font in the Health Catalyst brand is generally limited to logos
### Primary Font

Health Catalyst's primary font is Open Sans - a clean, readable, sans-serif typeface.
Although Qlik doesn't easily allow us to use Open Sans, it does come packaged with a very similar typeface called *Arial* which includes several weight variations. Because Power BI doesn't consistently provide access to formatting options such as bolding,
Although Qlik doesn't easily allow us to use Open Sans, it does come packaged with a very similar typeface called *Arial* which includes several weight variations. Because Power BI doesn't consistently provide access to formatting options such as bolding,
in Health Catalyst Power BI applications, we leverage **Arial**, **Arial Bold**, and **Segoe UI Light**.
Information about specific font sizes and weights can be found throughout this style guide, and examples of correct usage can be found in the template.

Expand Down Expand Up @@ -125,27 +125,27 @@ Layout specifics for the most common visual objects can be found in the [KPI Met
</div>

### Alignment
Tiles should be evenly aligned horizontally and/or vertically
Tiles should be evenly aligned horizontally and/or vertically

<div style="text-align:center"><br>

![correct alignment](/assets/analytics/powerbi/pbi-alignment.png "Correct Alignment")
![correct alignment](/assets/analytics/powerbi/pbi-align.png "Correct Alignment")

</div>

Tiles should not be distributed unevenly
Tiles should not be distributed unevenly

<div style="text-align:center"><br>

![incorrect alignment](/assets/analytics/powerbi/pbi-alignment-wrong.PNG "Incorrect Alignment")
![incorrect alignment](/assets/analytics/powerbi/pbi-align-wrong.png "Incorrect Alignment")

</div>

Utilize Qlik's alignment capabilities by selecting each object and choosing the appropriate distribution option within the *Align/Distribute* menu under the *Layout* toolbar.
Utilize Qlik's alignment capabilities by selecting each object and choosing the appropriate distribution option within the *Align/Distribute* menu under the *Layout* toolbar.

<div style="text-align:center"><br>

![alignment toolbar](/assets/analytics/qlik/qlik-alignment-how.PNG "How To Align")
![alignment toolbar](/assets/analytics/qlik/qlik-alignment-how.png "How To Align")

</div>

Expand All @@ -162,7 +162,7 @@ Some header elements, such as drill-down icons, are object-specific and more det
### Divider

A horizontal line with a weight of `1pt` divides the header from the content of the visual object. Leave about 2px of space on the left and right.
Set its fixed height to `10px` and set the line color to **slate-gray-300** `#c0c5cc RGB(192,197,204)`.
Set its fixed height to `10px` and set the line color to **slate-gray-300** `#c0c5cc RGB(192,197,204)`.

<div style="text-align:center"><br>

Expand All @@ -175,4 +175,4 @@ Set its fixed height to `10px` and set the line color to **slate-gray-300** `#c0
The remaining area of the tile can be used for any type of content.
Refer to the other sections of this style guide for details about specific types of tiles such as [KPI metrics](/analytics/qlik-metrics), [charts](/analytics/qlik-charts), and [tables](/analytics/qlik-tables).

:::
:::
4 changes: 2 additions & 2 deletions guides/analytics/qlik/navbar.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,13 +52,13 @@ Each text object is about 100px wide and 35px tall. Adjust the text objects so t

The background color and border on the button should be set to `None`.

The button for the currently selected page should have its font set to `Arial Bold 11pt` and color set to **offblack**.
The button for the currently selected page should have its font set to `Arial Bold 11pt` and color set to **offblack**.

Additionally, there is a floating line item called `Selected Highlight` that should be positioned under the selected item.
The y position of that item should always be set to the bottom of the selected item, but the x position should match the x position of the selected item.
The width of the selected highlight item should also match the selected text object item.

![Selected Link](./assets/analytics/qlik/qlik-selected.PNG "Selected link")
![Selected Link](./assets/analytics/qlik/qlik-selected.png "Selected link")

All other text objects within the links section should have their font set to `Arial 10 pt`.

Expand Down
4 changes: 2 additions & 2 deletions guides/analytics/qlik/tabs.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ In order to recreate the styling of the Cashmere web component in Qlik, each tex

##### Formatting
The background color and border on each text object should be set to `None`.
The object for the currently selected tab should have its font set to `Arial Bold 11pt` and the font color set to **offblack** `#333333 RGB(51,51,51)`.
The object for the currently selected tab should have its font set to `Arial Bold 11pt` and the font color set to **offblack** `#333333 RGB(51,51,51)`.
For unselected tabs, the font should be `Arial 11pt`.

### Floating Items
Expand All @@ -35,4 +35,4 @@ The y position of Tab Set Underline should be equal to the bottom of a tab.

The width of the Tab Selected highlight should match the width of the selected tab.
The height should always be 4px with a background color for **blue** `#00aeff RGB(0,174,255)`.
:::
:::
19 changes: 17 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@
"markdown-it": "^8.4.1",
"markdown-it-container": "^2.0.0",
"minisearch": "^2.5.1",
"ng-google-sheets-db": "^1.1.0",
"notosans-fontface": "^1.2.2",
"remove-markdown": "^0.3.0",
"rxjs": "6.5.4",
Expand Down
7 changes: 5 additions & 2 deletions src/app/content/content.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,21 @@ import {NgModule} from '@angular/core';
import {SharedModule} from '../shared/shared.module';
import {ContentRoutesModule} from './content-routes.module';
import {ApplicationInsightsService} from '../shared/application-insights/application-insights.service';
import {GoogleSheetsDbService} from 'ng-google-sheets-db';
import {ContentComponent} from './content.component';
import {UsageComponent} from './usage/usage.component';
import {UsageListComponent} from './usage/usage-list/usage-list.component';
import {FeedbackFormComponent} from './usage/feedback-form/feedback-form.component';
import {PersonaModule} from './personas/persona.module';

@NgModule({
imports: [SharedModule, ContentRoutesModule, PersonaModule],
providers: [ApplicationInsightsService],
providers: [ApplicationInsightsService, GoogleSheetsDbService],
declarations: [
ContentComponent,
UsageComponent,
UsageListComponent
UsageListComponent,
FeedbackFormComponent
]
})
export class ContentModule {}
47 changes: 47 additions & 0 deletions src/app/content/usage/feedback-form/feedback-form.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<form class="feedback-form" [formGroup]="feedbackForm">
<div class="feedback-container" *ngIf="!thankYouMsg">
<div class="feedback-top-left">
<div class="form-group">
<input name="url" type="hidden" id="herenow" formControlName="currentUrl">
<input name="helpful?" type="hidden" id="helpful" formControlName="helpfulRating">
</div>
<div>Was this article helpful?</div>
</div>
<div class="feedback-top-right">
<button hc-button buttonStyle="secondary" class="feedback-button" title="Yes" id="feedback-yes" (click)="checkHelpful(); onSubmit();" [disabled]="notHelpful"><i class="fa fa-check" aria-hidden="true"></i>YES</button>
<button hc-button buttonStyle="secondary" class="feedback-button" title="No" id="feedback-no" (click)="checkNoHelp()"><i class="fa fa-times" aria-hidden="true"></i>NO</button>
</div>

<div id="feedback-survey" *ngIf="notHelpful">
<div class="feedback-suggestions">
<hc-form-field>
<hc-label>How can we make this more helpful? (required):</hc-label>
<textarea hcInput rows="4" cols="50" id="suggestions" placeholder="Please enter your suggestion (required)" name="suggest" formControlName="yourSuggestions" required></textarea>
<hc-error>
Please tell us how this information could be more helpful to you.
</hc-error>
</hc-form-field>
</div>
<div class="feedback-email" name="email">
<hc-form-field>
<hc-label>Where can we email you to follow up? (optional, but helps us):</hc-label>
<input hcInput type="email" placeholder="Where can we email you if we need more information?" id="email" name="email" formControlName="yourEmail" size="40">
<hc-error>
The email address entered is not valid.
</hc-error>
</hc-form-field>
</div>

<button hc-button title="Submit" buttonStyle="primary" [disabled]="!feedbackForm.valid" (click)="onSubmit();">Submit</button>
<button hc-button class="feedback-button" title="Cancel " buttonStyle="secondary" (click)="onCancel();">Cancel</button>
</div>
</div>
<div id="feedback-response" class="feedback-container-new" *ngIf="thankYouMsg">
<p>Thank you! We have received your feedback. Still need help? Contact us in Health Catalyst's <a href="https://slack.com/app_redirect?channel=C75LHAV9S" target="_blank">#cashmere</a> Slack channel. </p>
</div>
</form>

<!-- <br>Dirty: {{ feedbackForm.dirty }}
<br>Touched: {{ feedbackForm.touched }}
<br>Valid: {{ feedbackForm.valid }}
<br>Value: {{ feedbackForm.value | json }} -->
47 changes: 47 additions & 0 deletions src/app/content/usage/feedback-form/feedback-form.component.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
.feedback-form {
padding-bottom: 40px;
}

.feedback-container,
.feedback-container-new {
padding: 5px 0;
display: flex;
flex-wrap: wrap;
align-items: center;
margin: 0 auto;
max-width: 600px;
justify-content: center;
}

.feedback-top-left {
font-size: 16px;
color: #333;
}

.feedback-top-left > .form-group {
margin-bottom: 0;
}

.feedback-top-right {
margin-left: 25px;
}

.feedback-button {
min-width: 80px !important;
margin-left: 10px;
}

.feedback-button i {
margin-right: 5px;
font-size: 16px;
}

#feedback-response {
color: #6D6E70;
font-size: 16px;
}

#feedback-survey {
width: 100%;
margin-top: 20px;
}

0 comments on commit ee87896

Please sign in to comment.