Skip to content

Commit 0995cc3

Browse files
bbodine1bbodine1
committed
duplicate submission demographic component view
1 parent 42aa9a5 commit 0995cc3

17 files changed

+393
-6
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -45,3 +45,4 @@ Thumbs.db
4545

4646
.nx/cache
4747
.nx/workspace-data/*
48+
.nx/workspace-data/d/daemon.log

‎apps/ite-portal/src/app/app.module.ts

+7
Original file line numberDiff line numberDiff line change
@@ -244,6 +244,13 @@ const routes: Routes = [
244244
(m) => m.BhsdSubmissionCensusFeatureModule
245245
),
246246
},
247+
{
248+
path: 'provider-gateway/submissions/:id/key-metrics',
249+
loadChildren: () =>
250+
import('@dbh/bhsd/submission-key-metrics-feature').then(
251+
(m) => m.BhsdSubmissionKeyMetricsFeatureModule
252+
),
253+
},
247254
{
248255
path: 'provider-gateway/submissions/:id/records/:recordId',
249256
loadChildren: () =>

‎libs/bhsd/submission-detail-feature/src/lib/submission-detail/submission-detail.component.html

+11-6
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,16 @@ <h1>Submission Summary</h1>
4141
class="button"
4242
>See Demographic Breakdown</a
4343
>
44+
45+
<a
46+
[routerLink]="[
47+
'/provider-gateway/submissions/',
48+
submission.id,
49+
'key-metrics'
50+
]"
51+
class="button"
52+
>Key Metrics</a
53+
>
4454
</div>
4555
<h2>Validation Breakdown</h2>
4656
<div class="summary">
@@ -107,12 +117,7 @@ <h2>Issue Details</h2>
107117
<ng-container *ngIf="data.records.length > 0">
108118
<button
109119
class="button-outline download-button"
110-
(click)="
111-
downloadFailedCsv(
112-
data.records,
113-
'failing_records.csv'
114-
)
115-
"
120+
(click)="downloadFailedCsv(data.records, 'failing_records.csv')"
116121
>
117122
&#8613; Export Failed Record Details
118123
</button></ng-container

‎libs/bhsd/submission-key-metrics-feature/.eslintrc.json

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"extends": ["../../../.eslintrc.json"],
3+
"ignorePatterns": ["!**/*"],
4+
"overrides": [
5+
{
6+
"files": ["*.ts"],
7+
"extends": [
8+
"plugin:@nx/angular",
9+
"plugin:@angular-eslint/template/process-inline-templates"
10+
],
11+
"parserOptions": {
12+
"project": ["libs/bhsd/submission-key-metrics-feature/tsconfig.*?.json"]
13+
},
14+
"rules": {
15+
"@angular-eslint/directive-selector": [
16+
"error",
17+
{
18+
"type": "attribute",
19+
"prefix": "dbh",
20+
"style": "camelCase"
21+
}
22+
],
23+
"@angular-eslint/component-selector": [
24+
"error",
25+
{
26+
"type": "element",
27+
"prefix": "dbh",
28+
"style": "kebab-case"
29+
}
30+
]
31+
}
32+
},
33+
{
34+
"files": ["*.html"],
35+
"extends": ["plugin:@nx/angular-template"],
36+
"rules": {}
37+
}
38+
]
39+
}

‎libs/bhsd/submission-key-metrics-feature/README.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# bhsd-submission-detail-feature
2+
3+
This library was generated with [Nx](https://nx.dev).
4+
5+
## Running unit tests
6+
7+
Run `nx test bhsd-submission-detail-feature` to execute the unit tests.

‎libs/bhsd/submission-key-metrics-feature/jest.config.ts

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/* eslint-disable @typescript-eslint/naming-convention */
2+
export default {
3+
displayName: 'bhsd-submission-key-metrics-feature',
4+
preset: '../../../jest.preset.js',
5+
setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
6+
globals: {},
7+
coverageDirectory:
8+
'../../../coverage/libs/bhsd/submission-key-metrics-feature',
9+
transform: {
10+
'^.+\\.(ts|mjs|js|html)$': [
11+
'jest-preset-angular',
12+
{
13+
tsconfig: '<rootDir>/tsconfig.spec.json',
14+
stringifyContentPathRegex: '\\.(html|svg)$',
15+
},
16+
],
17+
},
18+
transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
19+
snapshotSerializers: [
20+
'jest-preset-angular/build/serializers/no-ng-attributes',
21+
'jest-preset-angular/build/serializers/ng-snapshot',
22+
'jest-preset-angular/build/serializers/html-comment',
23+
],
24+
};

‎libs/bhsd/submission-key-metrics-feature/project.json

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "bhsd-submission-key-metrics-feature",
3+
"$schema": "../../../node_modules/nx/schemas/project-schema.json",
4+
"projectType": "library",
5+
"sourceRoot": "libs/bhsd/submission-key-metrics-feature/src",
6+
"prefix": "dbh",
7+
"targets": {
8+
"test": {
9+
"executor": "@nx/jest:jest",
10+
"outputs": [
11+
"{workspaceRoot}/coverage/libs/bhsd/submission-key-metrics-feature"
12+
],
13+
"options": {
14+
"jestConfig": "libs/bhsd/submission-key-metrics-feature/jest.config.ts"
15+
}
16+
},
17+
"lint": {
18+
"executor": "@nx/eslint:lint"
19+
}
20+
},
21+
"tags": []
22+
}

‎libs/bhsd/submission-key-metrics-feature/src/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './lib/bhsd-submission-key-metrics-feature.module';

‎libs/bhsd/submission-key-metrics-feature/src/lib/bhsd-submission-key-metrics-feature.module.ts

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { NgModule } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
import { RouterModule } from '@angular/router';
4+
5+
import { BhsdUiModule } from '@dbh/bhsd/ui';
6+
7+
import { SubmissionKeyMetricsComponent } from './submission-key-metrics/submission-key-metrics.component';
8+
9+
@NgModule({
10+
declarations: [SubmissionKeyMetricsComponent],
11+
imports: [
12+
CommonModule,
13+
14+
RouterModule.forChild([
15+
{
16+
path: '',
17+
pathMatch: 'full',
18+
component: SubmissionKeyMetricsComponent,
19+
},
20+
]),
21+
BhsdUiModule,
22+
],
23+
})
24+
export class BhsdSubmissionKeyMetricsFeatureModule {}

‎libs/bhsd/submission-key-metrics-feature/src/lib/submission-key-metrics/submission-key-metrics.component.html

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<ng-container *ngIf="submission$ | async as submission">
2+
<ul class="breadcrumbs">
3+
<li>
4+
<a [routerLink]="['/provider-gateway/submissions/', submission.id]"
5+
>Submission Summary</a
6+
>
7+
</li>
8+
<li>Key Metrics</li>
9+
</ul>
10+
<h1>Key Metrics Breakdown</h1>
11+
<dbh-file-information
12+
[providerName]="submission.provider_name"
13+
[providerId]="submission.provider_id"
14+
[fileName]="submission.file_name"
15+
[reportingPeriod]="submission.coverage_start | date : 'MMMM, yyyy'"
16+
[submissionDate]="submission.created_at"
17+
[providerActiveStatus]="submission.provider_active_status"
18+
></dbh-file-information>
19+
<ng-container *ngIf="submissionDemographicBreakdown$ | async as demographics">
20+
<h3>Gender</h3>
21+
<ul class="hBarChart">
22+
<ng-container *ngFor="let gender of demographics.genders">
23+
<li [style.--percent]="gender.percent + '%'">
24+
{{ gender.label }}
25+
<span>{{ gender.count }}<br />({{ gender.percent }}%)</span>
26+
</li>
27+
</ng-container>
28+
</ul>
29+
30+
<h3>Age</h3>
31+
<ul class="vBarChart">
32+
<ng-container *ngFor="let ageRange of demographics.ages">
33+
<li>
34+
{{ ageRange.count }} ({{ ageRange.percent }}%)
35+
<div class="bar" [style.height]="ageRange.percent * 2 + 'px'"></div>
36+
<div class="label">{{ ageRange.label }}</div>
37+
</li>
38+
</ng-container>
39+
</ul>
40+
<div class="half">
41+
<h3>Race</h3>
42+
<ul class="hBarChart">
43+
<ng-container *ngFor="let race of demographics.races">
44+
<li [style.--percent]="race.percent + '%'">
45+
{{ race.label }}
46+
<span>{{ race.count }}<br />({{ race.percent }}%)</span>
47+
</li>
48+
</ng-container>
49+
</ul>
50+
</div>
51+
<div class="half">
52+
<h3>Ethnicity</h3>
53+
<ul class="hBarChart">
54+
<ng-container *ngFor="let ethnicity of demographics.ethnicities">
55+
<li [style.--percent]="ethnicity.percent + '%'">
56+
{{ ethnicity.label }}
57+
<span>{{ ethnicity.count }}<br />({{ ethnicity.percent }}%)</span>
58+
</li>
59+
</ng-container>
60+
</ul>
61+
</div>
62+
<h3>Treatment Setting</h3>
63+
<ul class="hBarChart wide">
64+
<ng-container *ngFor="let setting of demographics.settings">
65+
<li [style.--percent]="setting.percent + '%'">
66+
{{ setting.label }}
67+
<span>{{ setting.count }}<br />({{ setting.percent }}%)</span>
68+
</li>
69+
</ng-container>
70+
</ul>
71+
</ng-container>
72+
</ng-container>

‎libs/bhsd/submission-key-metrics-feature/src/lib/submission-key-metrics/submission-key-metrics.component.scss

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
.file-info {
2+
span:first-child {
3+
font-weight: bold;
4+
display: inline-block;
5+
width: 13rem;
6+
}
7+
}
8+
9+
.hBarChart {
10+
display: grid;
11+
grid-template-columns: auto;
12+
gap: 0.5em 0;
13+
align-items: center;
14+
margin: 0;
15+
padding: 0;
16+
list-style-type: none;
17+
width: 50ch;
18+
padding-left: 1ch;
19+
}
20+
21+
.hBarChart.wide {
22+
width: 100ch;
23+
}
24+
25+
.hBarChart li {
26+
background: linear-gradient(
27+
to right,
28+
var(--primary-020) var(--percent),
29+
var(--white) var(--percent)
30+
);
31+
display: flex;
32+
align-items: center;
33+
justify-content: space-between;
34+
padding: 0.25rem 0.5rem;
35+
grid-column-start: 1;
36+
grid-column: span 100;
37+
font-weight: bold;
38+
}
39+
40+
.hBarChart li span {
41+
font-weight: normal;
42+
width: 3rem;
43+
}
44+
45+
.vBarChart {
46+
display: flex;
47+
height: 242px;
48+
align-items: stretch;
49+
list-style-type: none;
50+
width: 102ch;
51+
margin: 0;
52+
padding: 0.5ch;
53+
background: var(--white);
54+
margin-left: 1ch;
55+
}
56+
57+
.vBarChart li {
58+
flex: 1 1;
59+
margin: 0 1px;
60+
background: var(--white);
61+
position: relative;
62+
display: flex;
63+
flex-direction: column;
64+
justify-content: flex-end;
65+
align-items: center;
66+
}
67+
68+
.vBarChart li .bar {
69+
background: var(--primary-050);
70+
width: 50%;
71+
margin-top: 0.5ch;
72+
}
73+
74+
.vBarChart li .label {
75+
font-weight: bold;
76+
margin-top: 0.5ch;
77+
}
78+
79+
.breakdownButton {
80+
display: inline-block;
81+
font-size: 0.75em;
82+
margin-left: 1ch;
83+
}
84+
85+
.half {
86+
display: inline-block;
87+
}
88+
89+
.half + .half {
90+
margin-left: 2ch;
91+
}

‎libs/bhsd/submission-key-metrics-feature/src/lib/submission-key-metrics/submission-key-metrics.component.ts

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { Component } from '@angular/core';
2+
import { ActivatedRoute, ParamMap } from '@angular/router';
3+
import { filter, map, Observable, shareReplay, switchMap } from 'rxjs';
4+
5+
import {
6+
convertExtractToDemographics,
7+
ExtractSubmissionDemographics,
8+
BHSDService,
9+
} from '@dbh/bhsd/data-access';
10+
11+
@Component({
12+
selector: 'dbh-submission-key-metrics',
13+
templateUrl: './submission-key-metrics.component.html',
14+
styleUrls: ['./submission-key-metrics.component.scss'],
15+
})
16+
export class SubmissionKeyMetricsComponent {
17+
submission$ = this.route.paramMap.pipe(
18+
filter((parameters: ParamMap) => parameters.has('id')),
19+
map((parameters: ParamMap) => parameters.get('id')),
20+
switchMap((id: string | null) =>
21+
this.bhsdService.getExtractSubmission(id ?? 'fake-value')
22+
),
23+
shareReplay(1)
24+
);
25+
26+
submissionDemographicBreakdown$: Observable<ExtractSubmissionDemographics> =
27+
this.submission$.pipe(
28+
map((submission) => convertExtractToDemographics(submission))
29+
);
30+
31+
constructor(
32+
private route: ActivatedRoute,
33+
private bhsdService: BHSDService
34+
) {}
35+
}

‎libs/bhsd/submission-key-metrics-feature/src/test-setup.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import 'jest-preset-angular/setup-jest';

0 commit comments

Comments
 (0)