From b6c97bac9eaf48f7b4c71764e280150d7b5937b7 Mon Sep 17 00:00:00 2001 From: Neel Ismail Date: Fri, 19 Aug 2022 18:49:18 +0000 Subject: [PATCH 1/4] adding drop down to display primary property options --- .../resources/underlays/aou_synthetic.yaml | 3 ++ api/src/main/resources/underlays/sd.yaml | 3 ++ api/src/main/resources/underlays/synpuf.yaml | 3 ++ ui/src/criteria/concept.test.tsx | 1 + ui/src/overview.tsx | 34 ++++++++++++++++++- ui/src/underlaysSlice.ts | 1 + 6 files changed, 44 insertions(+), 1 deletion(-) diff --git a/api/src/main/resources/underlays/aou_synthetic.yaml b/api/src/main/resources/underlays/aou_synthetic.yaml index 39fbe215a..5bbe39e36 100644 --- a/api/src/main/resources/underlays/aou_synthetic.yaml +++ b/api/src/main/resources/underlays/aou_synthetic.yaml @@ -528,6 +528,9 @@ uiConfiguration: >- }], "demographicChartConfigs": { "groupByAttributes": ["gender_concept_id", "race_concept_id", "year_of_birth"], + "primaryPropertyOptions": [ + ["gender", "sex_at_birth"] + ], "chartConfigs": [{ "title": "Gender", "primaryProperties": [ diff --git a/api/src/main/resources/underlays/sd.yaml b/api/src/main/resources/underlays/sd.yaml index bc7c2aed5..1a5cfcf0d 100644 --- a/api/src/main/resources/underlays/sd.yaml +++ b/api/src/main/resources/underlays/sd.yaml @@ -509,6 +509,9 @@ uiConfiguration: >- }], "demographicChartConfigs": { "groupByAttributes": ["gender_concept_id", "race_concept_id", "year_of_birth"], + "primaryPropertyOptions": [ + ["gender", "sex_at_birth"] + ], "chartConfigs": [{ "title": "Gender", "primaryProperties": [ diff --git a/api/src/main/resources/underlays/synpuf.yaml b/api/src/main/resources/underlays/synpuf.yaml index 7a4e1f010..7d3bab404 100644 --- a/api/src/main/resources/underlays/synpuf.yaml +++ b/api/src/main/resources/underlays/synpuf.yaml @@ -291,6 +291,9 @@ uiConfiguration: >- }], "demographicChartConfigs": { "groupByAttributes": ["gender_concept_id", "race_concept_id", "year_of_birth"], + "primaryPropertyOptions": [ + ["gender", "sex_at_birth"] + ], "chartConfigs": [{ "title": "Gender", "primaryProperties": [ diff --git a/ui/src/criteria/concept.test.tsx b/ui/src/criteria/concept.test.tsx index ee5bdc125..a910b6e2b 100644 --- a/ui/src/criteria/concept.test.tsx +++ b/ui/src/criteria/concept.test.tsx @@ -157,6 +157,7 @@ async function renderCriteria( const demographicChartConfigs = { additionalSelectedAttributes: ["gender", "race"], + primaryPropertyOptions: [], groupByAttributes: [ "gender_concept_id", "race_concept_id", diff --git a/ui/src/overview.tsx b/ui/src/overview.tsx index 8871d5903..4541fae02 100644 --- a/ui/src/overview.tsx +++ b/ui/src/overview.tsx @@ -1,5 +1,6 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; import MoreVertIcon from "@mui/icons-material/MoreVert"; +import { FormControl, Select, SelectChangeEvent } from "@mui/material"; import Accordion from "@mui/material/Accordion"; import AccordionDetails from "@mui/material/AccordionDetails"; import AccordionSummary from "@mui/material/AccordionSummary"; @@ -30,7 +31,7 @@ import { useTextInputDialog } from "components/textInputDialog"; import { useSource } from "data/source"; import { useAsyncWithApi } from "errors"; import { useAppDispatch, useCohort, useUnderlay } from "hooks"; -import { useCallback, useContext } from "react"; +import { useCallback, useContext, useState } from "react"; import { Link as RouterLink, useHistory } from "react-router-dom"; import { Bar, @@ -476,6 +477,29 @@ function StackedBarChart({ chart, tickFormatter }: StackedBarChartProps) { ); } +type PrimaryPropertyDropDownProps = { + propertyOptions: string[]; +}; + +function PrimaryPropertyDropDown({ + propertyOptions, +}: PrimaryPropertyDropDownProps) { + console.log(propertyOptions[0]) + const [value, setValue] = useState(propertyOptions[0]); + const handleChange = (event: SelectChangeEvent) => { + setValue(event.target.value as string); + }; + return ( + + + + ); +} + type DemographicChartsProps = { cohort: tanagra.Cohort; }; @@ -668,6 +692,14 @@ function DemographicCharts({ cohort }: DemographicChartsProps) { {`Total Count: ${demographicState.data?.totalCount.toLocaleString()}`} + {underlay.uiConfiguration.demographicChartConfigs.primaryPropertyOptions.map( + (propertyOptions, index) => ( + + ) + )} {demographicState.data?.chartsData.map((chart, index) => { return ( Date: Fri, 19 Aug 2022 18:56:58 +0000 Subject: [PATCH 2/4] updating primary property options property in test --- ui/src/criteria/concept.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/criteria/concept.test.tsx b/ui/src/criteria/concept.test.tsx index a910b6e2b..f22190b48 100644 --- a/ui/src/criteria/concept.test.tsx +++ b/ui/src/criteria/concept.test.tsx @@ -157,7 +157,7 @@ async function renderCriteria( const demographicChartConfigs = { additionalSelectedAttributes: ["gender", "race"], - primaryPropertyOptions: [], + primaryPropertyOptions: ["gender", "sex_at_birth"], groupByAttributes: [ "gender_concept_id", "race_concept_id", From 2c2ec98826ab591884bc4f9e7af5e36421136b47 Mon Sep 17 00:00:00 2001 From: Neel Ismail Date: Fri, 19 Aug 2022 19:00:59 +0000 Subject: [PATCH 3/4] updating primary propertyoptions for test --- ui/src/criteria/concept.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/criteria/concept.test.tsx b/ui/src/criteria/concept.test.tsx index f22190b48..e22708386 100644 --- a/ui/src/criteria/concept.test.tsx +++ b/ui/src/criteria/concept.test.tsx @@ -157,7 +157,7 @@ async function renderCriteria( const demographicChartConfigs = { additionalSelectedAttributes: ["gender", "race"], - primaryPropertyOptions: ["gender", "sex_at_birth"], + primaryPropertyOptions: ["gender", "sex at birth"], groupByAttributes: [ "gender_concept_id", "race_concept_id", From e528295e24ccb247935d3910d2aa929d8371b9a0 Mon Sep 17 00:00:00 2001 From: Neel Ismail Date: Fri, 19 Aug 2022 19:05:01 +0000 Subject: [PATCH 4/4] fixing error with primaryproperty options in test --- ui/src/criteria/concept.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/criteria/concept.test.tsx b/ui/src/criteria/concept.test.tsx index e22708386..85e765e9a 100644 --- a/ui/src/criteria/concept.test.tsx +++ b/ui/src/criteria/concept.test.tsx @@ -157,7 +157,7 @@ async function renderCriteria( const demographicChartConfigs = { additionalSelectedAttributes: ["gender", "race"], - primaryPropertyOptions: ["gender", "sex at birth"], + primaryPropertyOptions: [["gender", "sex at birth"]], groupByAttributes: [ "gender_concept_id", "race_concept_id",