diff --git a/phs-gdc-dashboard/src/components/AppContent.js b/phs-gdc-dashboard/src/components/AppContent.js index 16a8347..452543c 100644 --- a/phs-gdc-dashboard/src/components/AppContent.js +++ b/phs-gdc-dashboard/src/components/AppContent.js @@ -20,24 +20,27 @@ const useStyles = makeStyles((theme) => ({ })); export default function AppContent() { + const classes = useStyles(); + const [phsVariableValues, setPhsVariableValues] = React.useState(''); + return (
- + - + - + diff --git a/phs-gdc-dashboard/src/components/content/Step1.js b/phs-gdc-dashboard/src/components/content/Step1.js index 418c43c..2692b42 100644 --- a/phs-gdc-dashboard/src/components/content/Step1.js +++ b/phs-gdc-dashboard/src/components/content/Step1.js @@ -16,8 +16,8 @@ import CheckBoxIcon from '@material-ui/icons/CheckBox'; export default function Step1(props) { - const icon = ; - const checkedIcon = ; + const icon = ; + const checkedIcon = ; const useStyles = makeStyles((theme) => ({ formControl: { @@ -26,13 +26,13 @@ export default function Step1(props) { maxWidth: 500, minWidth: 200, }, - selectEmpty: { - marginTop: theme.spacing(2), + selectVariable: { + }, })); const classes = useStyles(); - const [variable, setVariable] = React.useState('zip code'); + const [variable, setVariable] = React.useState(''); const [values, setValues] = React.useState(''); const handleChangeVariableSelect = (event) => { @@ -41,35 +41,33 @@ export default function Step1(props) { const handleChangeValuesField = (event) => { setValues(event.target.value); + if (values != null && values.trim().length > 0) { + let valuesArray = values.split(/\r?\n/); + console.log(valuesArray); + } }; - const phsVariables = ["zip code"]; + const phsVariables = ["state", "county", "city", "zip code"]; return (

{props.title}

-

Enter or select the variable that you want to use to expand your original data with data from Data Commons

- - Enter or select the variable that you want to use to expand your original data with data from Data + Commons + + Variable + */} + onChange={handleChangeVariableSelect} + variant="outlined" + className={classes.selectVariable} + label="Variable"> + {phsVariables.map((phsVar, index) => + {phsVar} + )}; + Select a PHS variable from the list
- Copy-paste the variable values (one per line) + Paste the values of the selected variable (one per line)
); diff --git a/phs-gdc-dashboard/src/components/content/Step3.js b/phs-gdc-dashboard/src/components/content/Step3.js index 3ff1ebf..fac98c3 100644 --- a/phs-gdc-dashboard/src/components/content/Step3.js +++ b/phs-gdc-dashboard/src/components/content/Step3.js @@ -4,7 +4,9 @@ import Dialog from "@material-ui/core/Dialog"; import DialogTitle from "@material-ui/core/DialogTitle"; import DialogContent from "@material-ui/core/DialogContent"; import DialogContentText from "@material-ui/core/DialogContentText"; -import {GetPlaceStatistics} from "../../services/dataCommonsService"; +import {getPlaceStatistics} from "../../services/dataCommonsService"; +import {toTabularJsonData} from "../../utils/dataCommonsUtils"; +import {jsonToCsv} from "../../utils/utils"; export default function Step1(props) { @@ -32,9 +34,10 @@ export default function Step1(props) { ); }; - function getData() { - return GetPlaceStatistics("zip/94306", "Count_Person").then((data) => { - return data; + function getCsvData() { + return getPlaceStatistics(["zip/94306", "zip/45202"], ["Count_Person", "Median_Income_Person"]).then((data) => { + let tabJsonData = toTabularJsonData(data, "zip code"); + return jsonToCsv(tabJsonData); }) .catch((error) => { error.json().then((json) => { @@ -47,12 +50,12 @@ export default function Step1(props) { }; function downloadDataFile() { - getData().then(data => { + getCsvData().then(data => { console.log(data); const element = document.createElement("a"); - const file = new Blob([JSON.stringify(data)], {type: 'text/plain'}); + const file = new Blob([data], {type: 'text/plain'}); element.href = URL.createObjectURL(file); - element.download = "myFile.txt"; + element.download = "myFile.csv"; document.body.appendChild(element); // Required for this to work in FireFox element.click(); }) @@ -68,7 +71,7 @@ export default function Step1(props) {

diff --git a/phs-gdc-dashboard/src/services/dataCommonsService.js b/phs-gdc-dashboard/src/services/dataCommonsService.js index d614fa7..7ed72f2 100644 --- a/phs-gdc-dashboard/src/services/dataCommonsService.js +++ b/phs-gdc-dashboard/src/services/dataCommonsService.js @@ -21,7 +21,7 @@ import {DC_API_BASE_URL} from "../constants"; // return fetch(url, requestOptions); // }; -export function GetPlaceStatistics(places, statVars) { +export function getPlaceStatistics(places, statVars) { let url = DC_API_BASE_URL + "stat/all"; console.log(url); const requestOptions = { diff --git a/phs-gdc-dashboard/src/utils/dataCommonsUtils.js b/phs-gdc-dashboard/src/utils/dataCommonsUtils.js new file mode 100644 index 0000000..fb20226 --- /dev/null +++ b/phs-gdc-dashboard/src/utils/dataCommonsUtils.js @@ -0,0 +1,63 @@ +/** + * Data Commons Utility functions + */ + + +/** + * Transforms data returned from the Data Commons /stat/all API to Json in tabular format + * See https://docs.datacommons.org/api/rest/stat_all.html for some examples of input json data. + * + * @param jsonData + * @param placeVarName Name of the place variable. It will be used as the column name for the place data in the output + */ +export function toTabularJsonData(jsonData, placeVarName) { + let tabularJsonData = []; + let statVars = {}; + + // Extract column names and most recent year for each variable name and save them as a hashtable. + // To improve performance, we assume that a particular variable has the same years for all location identifiers + let firstKey = (Object.keys(jsonData['placeData']))[0]; + for (let varName in jsonData['placeData'][firstKey]['statVarData']) { + let year = getLatestYear(jsonData['placeData'][firstKey]['statVarData'][varName]["sourceSeries"][0]["val"]) + statVars[varName] = year; + } + + // Extract values + for (let placeId in jsonData['placeData']) { + let placeValue = placeId; // TODO: extract value + let row = {[placeVarName] : placeValue}; + for (let statVarName in statVars) { + let year = statVars[statVarName]; + row[statVarName] = jsonData['placeData'][placeId]['statVarData'][statVarName]["sourceSeries"][0]["val"][year]; + } + tabularJsonData.push(row); + } + return tabularJsonData; +} + +/** + * Given an object with key-value pairs, where each key is a year, retrieve the most recent year + * Example: { "2012": 8710, "2020": 8680, "2018": 8831 } -> 2020 + * @param data + */ +function getLatestYear(data) { + let latestYear = Object.keys(data).sort().reverse()[0]; + return parseInt(latestYear); +} + + + + + + + + + + + + + + + + + diff --git a/phs-gdc-dashboard/src/utils/utils.js b/phs-gdc-dashboard/src/utils/utils.js new file mode 100644 index 0000000..5f720f2 --- /dev/null +++ b/phs-gdc-dashboard/src/utils/utils.js @@ -0,0 +1,18 @@ +/** + * General Utilities + */ + +export function jsonToCsv(json) { + let fields = Object.keys(json[0]); + let replacer = function (key, value) { + return value === null ? '' : value; + } + let csv = json.map(function (row) { + return fields.map(function (fieldName) { + return JSON.stringify(row[fieldName], replacer); + }).join(','); + }) + csv.unshift(fields.join(',')); // add header column + csv = csv.join('\r\n'); + return csv; +} \ No newline at end of file