Skip to content

Commit 7ebe1ec

Browse files
cinyecaicinyecai
committed
Adding mocked visualizations to dataset summary page
1 parent 4b4f40d commit 7ebe1ec

File tree

3 files changed

+231
-6
lines changed

3 files changed

+231
-6
lines changed

‎src/dataset-builder/DatasetBuilderDetails.ts

Lines changed: 75 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,27 @@
11
import { useLoadedData } from '@terra-ui-packages/components';
22
import _ from 'lodash/fp';
33
import { div, h, h1, h3 } from 'react-hyperscript-helpers';
4+
import Chart from 'src/components/Chart';
45
import { ButtonOutline, spinnerOverlay } from 'src/components/common';
56
import FooterWrapper from 'src/components/FooterWrapper';
67
import { MarkdownViewer } from 'src/components/markdown';
8+
import { SimpleTabBar } from 'src/components/tabBars';
79
import { TopBar } from 'src/components/TopBar';
10+
import { chartOptions } from 'src/dataset-builder/DemographicsChart';
11+
import {
12+
generateAgeChartOptions,
13+
generateGenderChartOptions,
14+
generateRaceChartOptions,
15+
generateTopConditionsChartOptions,
16+
generateTopDrugsChartOptions,
17+
generateTopProceduresChartOptions,
18+
} from 'src/dataset-builder/SummaryCharts';
819
import { DataRepo, SnapshotBuilderSettings } from 'src/libs/ajax/DataRepo';
920
import colors from 'src/libs/colors';
1021
import { withErrorReporting } from 'src/libs/error';
1122
import * as Nav from 'src/libs/nav';
1223
import { useOnMount } from 'src/libs/react-utils';
24+
import * as Utils from 'src/libs/utils';
1325

1426
import { DatasetBuilderBreadcrumbs } from './Breadcrumbs';
1527

@@ -65,7 +77,26 @@ interface DatasetBuilderDetailsProps {
6577
snapshotId: string;
6678
}
6779

80+
const ageChart = generateAgeChartOptions();
81+
82+
const genderChart = generateGenderChartOptions();
83+
84+
const raceChart = generateRaceChartOptions();
85+
86+
const topConditionsChart = generateTopConditionsChartOptions();
87+
88+
const topDrugsChart = generateTopDrugsChartOptions();
89+
90+
const topProceduresChart = generateTopProceduresChartOptions();
91+
6892
export const DatasetBuilderDetails = ({ snapshotId }: DatasetBuilderDetailsProps) => {
93+
const { query } = Nav.useRoute();
94+
const tab: string = query.tab || 'categories';
95+
const tabs = [
96+
{ key: 'categories', title: 'Data Categories' },
97+
{ key: 'visualizations', title: 'Participant Visualizations' },
98+
] as const;
99+
69100
const [snapshotBuilderSettings, loadSnapshotBuilderSettings] = useLoadedData<SnapshotBuilderSettings>();
70101
const [snapshotRoles, loadSnapshotRoles] = useLoadedData<string[]>();
71102
const hasAggregateDataViewerAccess =
@@ -86,6 +117,8 @@ export const DatasetBuilderDetails = ({ snapshotId }: DatasetBuilderDetailsProps
86117
);
87118
});
88119

120+
const chartStyling = { display: 'flex', justifyContent: 'space-around', paddingTop: 16 };
121+
89122
return snapshotBuilderSettings.status === 'Ready' && snapshotRoles.status === 'Ready'
90123
? h(FooterWrapper, [
91124
h(TopBar, { title: 'Preview', href: '' }, []),
@@ -116,10 +149,48 @@ export const DatasetBuilderDetails = ({ snapshotId }: DatasetBuilderDetailsProps
116149
]),
117150
]),
118151
]),
119-
h(TileDisplay, {
120-
title: 'EHR Domains',
121-
displayInformation: snapshotBuilderSettings.state.domainOptions,
122-
}),
152+
h(
153+
SimpleTabBar,
154+
{
155+
'aria-label': 'dataset builder menu',
156+
value: tab,
157+
onChange: (newTab) => {
158+
Nav.updateSearch({ ...query, tab: newTab });
159+
},
160+
tabs,
161+
},
162+
[
163+
Utils.switchCase(
164+
tab,
165+
[
166+
'categories',
167+
() =>
168+
h(TileDisplay, {
169+
title: 'EHR Domains',
170+
displayInformation: snapshotBuilderSettings.state.domainOptions,
171+
}),
172+
],
173+
[
174+
'visualizations',
175+
() =>
176+
div({}, [
177+
div({ style: chartStyling }, [
178+
h(Chart, { options: chartOptions(ageChart) }),
179+
h(Chart, { options: chartOptions(genderChart) }),
180+
]),
181+
div({ style: chartStyling }, [
182+
h(Chart, { options: chartOptions(raceChart) }),
183+
h(Chart, { options: chartOptions(topConditionsChart) }),
184+
]),
185+
div({ style: chartStyling }, [
186+
h(Chart, { options: chartOptions(topDrugsChart) }),
187+
h(Chart, { options: chartOptions(topProceduresChart) }),
188+
]),
189+
]),
190+
]
191+
),
192+
]
193+
),
123194
]),
124195
])
125196
: spinnerOverlay;

‎src/dataset-builder/DemographicsChart.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ interface ChartLabel {
77
}
88
export interface ChartSeries {
99
name?: string;
10-
data: number[];
10+
colorByPoint?: boolean;
11+
data: number[] | number[][];
1112
}
1213

1314
export interface CohortDemographics {
@@ -18,6 +19,7 @@ export interface CohortDemographics {
1819
height: string;
1920
legendEnabled: boolean;
2021
showSeriesName: boolean;
22+
type: string;
2123
}
2224
export function chartOptions(cohortDemographics: CohortDemographics) {
2325
return {
@@ -26,7 +28,7 @@ export function chartOptions(cohortDemographics: CohortDemographics) {
2628
spacingRight: 30,
2729
height: cohortDemographics.height,
2830
style: { fontFamily: 'inherit' },
29-
type: 'bar',
31+
type: cohortDemographics.type,
3032
},
3133
legend: { enabled: cohortDemographics.legendEnabled },
3234
plotOptions: { series: { stacking: 'normal' } },
@@ -91,6 +93,7 @@ export function generateCohortAgeData(series) {
9193
height: '250rem',
9294
legendEnabled: false,
9395
showSeriesName: false,
96+
type: 'bar',
9497
};
9598
}
9699

@@ -125,6 +128,7 @@ export function generateCohortDemographicData(series) {
125128
height: '500rem',
126129
legendEnabled: true,
127130
showSeriesName: true,
131+
type: 'bar',
128132
};
129133
}
130134

‎src/dataset-builder/SummaryCharts.ts

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
export function generateAgeChartOptions() {
2+
return {
3+
categories: [
4+
{ short: '0-17' },
5+
{ short: '18-29' },
6+
{ short: '30-39' },
7+
{ short: '40-49' },
8+
{ short: '50-59' },
9+
{ short: '60-69' },
10+
{ short: '70-79' },
11+
{ short: '80+' },
12+
],
13+
series: [{ data: [9, 25, 15, 17, 14, 9, 6, 5] }],
14+
title: 'Age',
15+
yTitle: 'OVERALL PERCENTAGES',
16+
height: '400rem',
17+
legendEnabled: false,
18+
showSeriesName: false,
19+
type: 'bar',
20+
};
21+
}
22+
23+
export function generateGenderChartOptions() {
24+
return {
25+
categories: [
26+
{ short: 'Man' },
27+
{ short: 'Woman' },
28+
{ short: 'Nonbinary' },
29+
{ short: 'Transgender' },
30+
{ short: 'Other' },
31+
{ short: 'Prefer not to Say' },
32+
],
33+
series: [
34+
{
35+
colorByPoint: true,
36+
data: [[28], [31], [11], [10], [6], [14]],
37+
},
38+
],
39+
title: 'Gender Identity',
40+
yTitle: 'OVERALL PERCENTAGES',
41+
height: '400rem',
42+
legendEnabled: false,
43+
showSeriesName: false,
44+
type: 'column',
45+
};
46+
}
47+
48+
export function generateRaceChartOptions() {
49+
return {
50+
categories: [
51+
{ short: 'White' },
52+
{ short: 'Black, African American' },
53+
{ short: 'Hispanic or Latino' },
54+
{ short: 'Asian' },
55+
{ short: 'More than one' },
56+
{ short: 'Other' },
57+
{ short: 'Prefer not to Say' },
58+
],
59+
series: [
60+
{
61+
colorByPoint: true,
62+
data: [[24], [18], [16], [8], [27], [5], [2]],
63+
},
64+
],
65+
title: 'Race',
66+
yTitle: 'OVERALL PERCENTAGES',
67+
height: '400rem',
68+
legendEnabled: false,
69+
showSeriesName: false,
70+
type: 'column',
71+
};
72+
}
73+
74+
export function generateTopConditionsChartOptions() {
75+
return {
76+
categories: [
77+
{ short: 'Type 2 diabetes mellitus' },
78+
{ short: 'Atrial fibrillation' },
79+
{ short: 'Chest pain' },
80+
{ short: 'Pure hypercholesterolemia' },
81+
{ short: 'Anemia' },
82+
{ short: 'Coronary arteriosclerosis' },
83+
{ short: 'Hypothyroidism' },
84+
{ short: 'Malaise and fatigue' },
85+
{ short: 'Congestive heart failure' },
86+
{ short: 'Urinary tract infectious disease' },
87+
],
88+
series: [{ data: [17050, 15800, 10200, 9510, 7900, 5980, 3510, 3400, 2500, 2000] }],
89+
title: 'Top 10 Conditions',
90+
yTitle: 'PARTICIPANT COUNT',
91+
height: '400rem',
92+
legendEnabled: false,
93+
showSeriesName: false,
94+
type: 'bar',
95+
};
96+
}
97+
98+
export function generateTopDrugsChartOptions() {
99+
return {
100+
categories: [
101+
{ short: 'Metformin' },
102+
{ short: 'Epoetin Alfa' },
103+
{ short: 'Influenza virus vaccine' },
104+
{ short: 'Simvastatin 40 MG Oral Tablet' },
105+
{ short: 'Lovastatin 20 MG Oral Tablet' },
106+
{ short: 'Gemfibrozil 600 MG Oral Tablet' },
107+
{ short: 'Omeprazole 20 MG Delayed Release Oral Tablet' },
108+
{ short: 'Levothyroxine' },
109+
{ short: 'Atorvastatin' },
110+
{ short: 'Acetaminophen' },
111+
],
112+
series: [{ data: [18900, 17500, 16200, 13500, 12040, 7510, 7010, 7000, 2550, 2000] }],
113+
title: 'Top 10 Drugs',
114+
yTitle: 'PARTICIPANT COUNT',
115+
height: '400rem',
116+
legendEnabled: false,
117+
showSeriesName: false,
118+
type: 'bar',
119+
};
120+
}
121+
122+
export function generateTopProceduresChartOptions() {
123+
return {
124+
categories: [
125+
{ short: 'Other diagnostic procedures on heart and pericardium' },
126+
{
127+
short:
128+
'Office or other outpatient visit for the evaluation and management of a new patient, which requires these 3 key components: An expanded problem focused history; An expanded problem focused examination; Straightforward medical decision making.',
129+
},
130+
{ short: 'Biopsy of lymphatic structure' },
131+
{ short: 'Biopsy of mouth, unspecified structure' },
132+
{ short: 'Anemia' },
133+
{
134+
short:
135+
'Therapeutic procedure, 1 or more areas, each 15 minutes; massage, including effleurage, petrissage and/or tapotement (stroking, compression, percussion)',
136+
},
137+
{ short: 'Long-term drug therapy' },
138+
{ short: 'Surgical procedure' },
139+
{ short: 'Procedure on trunk' },
140+
{ short: 'Screening for disorder' },
141+
],
142+
series: [{ data: [18100, 12550, 7550, 7480, 5100, 4950, 2690, 2550, 1790, 1700] }],
143+
title: 'Top 10 Procedures',
144+
yTitle: 'PARTICIPANT COUNT',
145+
height: '400rem',
146+
legendEnabled: false,
147+
showSeriesName: false,
148+
type: 'bar',
149+
};
150+
}

0 commit comments

Comments
 (0)