diff --git a/src/components/app.tsx b/src/components/app.tsx index 51613dc..0cce018 100644 --- a/src/components/app.tsx +++ b/src/components/app.tsx @@ -4,17 +4,22 @@ import classnames from "classnames"; import { Information } from "./information"; import { categories, defaultSelectedOptions } from "./constants"; import { IStateOptions } from "./types"; +import { createQueryFromSelections } from "../scripts/api"; +import { connect } from "../scripts/connect"; + import css from "./app.scss"; -import { runTestQuery } from "../scripts/api"; function App() { const [showInfo, setShowInfo] = useState(false); const [selectedOptions, setSelectedOptions] = useState(defaultSelectedOptions); useEffect(() => { - runTestQuery(); - }, []) + const init = async () => { + await connect.initialize(); + }; + init(); + }, []); const handleSetSelectedOptions = (option: string, value: string | string[]) => { const newSelectedOptions = {...selectedOptions, [option]: value}; @@ -25,6 +30,18 @@ function App() { setShowInfo(true); }; + const handleGetData = () => { + createQueryFromSelections(selectedOptions); + + const makeDataSetAndTable = async () => { + const dS = await connect.guaranteeDataset(selectedOptions.geographicLevel); + if (dS.success) { + await connect.makeCaseTableAppear(); + } + }; + makeDataSetAndTable(); + }; + return (
{ showInfo && @@ -52,12 +69,12 @@ function App() { handleSetSelectedOptions={handleSetSelectedOptions} selectedOptions={selectedOptions} /> - ) + ); })}
- +
diff --git a/src/components/constants.ts b/src/components/constants.ts index 6cf2da9..ef141c0 100644 --- a/src/components/constants.ts +++ b/src/components/constants.ts @@ -12,6 +12,7 @@ export const stateOptions: IAttrOptions = { key: "states", instructions: "Choose states to include in your dataset from the list below", options: [ + "All States", "Alabama", "Alaska", "Arizona", @@ -110,21 +111,21 @@ export const yearsOptions: IAttrOptions = { label: "Years", options: yearsArray, instructions: null -} +}; export const categories = [ {header: "Place", options: placeOptions, altText: ""}, {header: "Attributes", options: attributeOptions, altText: ""}, {header: "Years", options: yearsOptions, altText: ""} -] +]; export const defaultSelectedOptions: IStateOptions = { - "geographicLevel": "", - "states": [], + "geographicLevel": "State", + "states": ["All States"], "farmerDemographics": [], "farmDemographics": [], "economicsAndWages": [], "cropUnits": "", "crops": [], "years": [] -}; \ No newline at end of file +}; diff --git a/src/components/dropdown.tsx b/src/components/dropdown.tsx index 2ab0357..27e56a3 100644 --- a/src/components/dropdown.tsx +++ b/src/components/dropdown.tsx @@ -28,7 +28,7 @@ export const Dropdown: React.FC = (props) => { const renderOptions = () => { return category === "Place" ? : category === "Attributes" ? : - + ; }; return ( diff --git a/src/components/summary.tsx b/src/components/summary.tsx index f02a931..43a32a7 100644 --- a/src/components/summary.tsx +++ b/src/components/summary.tsx @@ -37,17 +37,17 @@ export const Summary: React.FC = ({category, selectedOptions}) => { return null; } }) - .filter((item) => item !== null) + .filter((item) => item !== null); const finalString = resultString.join(", "); return finalString; } else if (category === "Years") { - return selectedOptions.years.join(", ") + return selectedOptions.years.join(", "); } - } + }; return (
{getSummaryText()}
- ) -} \ No newline at end of file + ); +}; diff --git a/src/components/years-options.tsx b/src/components/years-options.tsx index 524b1f7..924bd47 100644 --- a/src/components/years-options.tsx +++ b/src/components/years-options.tsx @@ -39,11 +39,11 @@ export const YearsOptions: React.FC = (props) => { console.log({selectedYears}); // do something if years are not valid } - }) + }); } - }) + }); } - } + }; return (
diff --git a/src/scripts/api.ts b/src/scripts/api.ts index 5cfd9ef..e773ac6 100644 --- a/src/scripts/api.ts +++ b/src/scripts/api.ts @@ -1,23 +1,94 @@ import fetchJsonp from "fetch-jsonp"; import { queryData } from "./query-headers"; +import { IStateOptions } from "../components/types"; +import { connect } from "./connect"; const baseURL = `https://quickstats.nass.usda.gov/api/api_GET/?key=9ED0BFB8-8DDD-3609-9940-A2341ED6A9E3`; export const createRequest = (attribute: string, geoLevel: string, location: string, year: string) => { const queryParams = queryData.find((d) => d.plugInAttribute === attribute); const {sector, group, commodity, category, domains, dataItem} = queryParams!; - const req = `${baseURL}§_desc=${sector}&group_desc=${group}&commodity_desc=${commodity}&statisticcat_desc=${category}&domain_desc=${domains}&short_desc=${dataItem}&agg_level_desc=${geoLevel}&state_name=${location}&year=${year}`; - return req; + + const baseReq = `${baseURL}§_desc=${sector}&group_desc=${group}&commodity_desc=${commodity}&statisticcat_desc=${category}&domain_desc=${domains}&agg_level_desc=${geoLevel}&state_name=${location}&year=${year}`; + + const reqs = []; + + if (Array.isArray(dataItem)) { + dataItem.forEach(item => { + reqs.push(`${baseReq}&short_desc=${item}`); + }); + } else { + reqs.push(`${baseReq}&short_desc=${dataItem}`); + } + + return reqs; +}; + +export const createQueryFromSelections = (selectedOptions: IStateOptions) => { + const {geographicLevel, states, years, ...subOptions} = selectedOptions; + const multipleStatesSelected = states.length > 1 || states[0] === "All States"; + const multipleYearsSelected = years.length > 1; + + if (multipleStatesSelected) { + states.forEach((state) => { + if (multipleYearsSelected) { + years.forEach(year => { + // do something + console.log("multiple years and mulitple states selected"); + }); + } else { + console.log("multiple states selected with one year"); + } + }); + } else { + for (const key in subOptions) { + const value = subOptions[key as keyof typeof subOptions]; + console.log("current value", value); + if (value && Array.isArray(value) && value.length > 1) { + console.log("you selected more than one value from a sub-category"); + } else if (value && Array.isArray(value) && value.length === 1) { + console.log("you selected only one value from a sub-category and it is this value", value); + const reqArray = createRequest(value[0], geographicLevel, states[0], years[0]); + console.log("REQUEST", reqArray[0]); + getDataAndCreateCodapTable(reqArray); + } + } + } }; -export const runTestQuery = () => { - const request = createRequest("Total Farmers", "STATE", "CALIFORNIA", "2017"); - fetchJsonp(request) +export const getDataAndCreateCodapTable = (reqs: string[]) => { + reqs.forEach((req) => { + fetchJsonp(req) .then(function(response) { return response.json(); }).then(function(json) { console.log("parsed json", json); + const formattedData = formatDataForCODAP(json); }).catch(function(ex) { console.log("parsing failed", ex); - }) + }); + }); }; + +const formatDataForCODAP = (res: any) => { + console.log({res}); + return res; +}; + +// export const runTestQuery = () => { +// const request1 = createRequest("Total Farmers", "STATE", "CALIFORNIA", "2017")[0]; +// const request2 = createRequest("Total Farmers", "STATE", "ARKANSAS", "2017")[0]; +// const request3 = createRequest("Total Farmers", "STATE", "ALABAMA", "2017")[0]; +// const request4 = createRequest("Total Farmers", "STATE", "MONTANA", "2017")[0]; +// const requests = [request1, request2, request3, request4]; +// requests.forEach((req) => { +// fetchJsonp(req) +// .then(function(response) { +// return response.json(); +// }).then(function(json) { +// console.log("parsed json", json); +// }).catch(function(ex) { +// console.log("parsing failed", ex); +// }) +// }) +// }; diff --git a/src/scripts/connect.js b/src/scripts/connect.js index 0ac3759..22a45a1 100644 --- a/src/scripts/connect.js +++ b/src/scripts/connect.js @@ -1,10 +1,90 @@ import { codapInterface } from "./codapInterface"; +const dataSetName = "NASS Quickstats Data"; +const dataSetTitle = "NASS Quickstats Data"; + export const connect = { initialize: async function () { return await codapInterface.init(this.iFrameDescriptor, null); }, + makeCODAPAttributeDef: function (attr) { + return { + name: attr.title, + title: attr.title, + description: attr.description, + type: attr.format, + formula: attr.formula + } + }, + + createNewDataset: async function (geoLevel) { + const geoLabel = geoLevel === "State" ? "States" : "Counties"; + return codapInterface.sendRequest({ + action: 'create', + resource: 'dataContext', + values: { + name: dataSetName, + title: dataSetTitle, + collections: [{ + name: geoLabel, + attrs: [ + { + name: geoLevel, + title: geoLevel, + description: `Selected ${geoLabel}` + }, + { + name: "Boundaries", + title: "Boundaries", + formula: 'lookupBoundary(US_state_boundaries, State)', + formulaDependents: 'State' + } + ] + }, { + name: "Data", + parent: geoLabel, + attrs: [ // note how this is an array of objects. + {name: "Year", title: "Year"} + ] + }] + } + }); + }, + + + guaranteeDataset: async function (geoLevel) { + let datasetResource = 'dataContext[' + dataSetName + + ']'; + await this.createNewDataset(geoLevel); + const response = await codapInterface.sendRequest({ + action: 'get', + resource: datasetResource}); + return response; + }, + + makeCaseTableAppear : async function() { + const theMessage = { + action : "create", + resource : "component", + values : { + type : 'caseTable', + dataContext : dataSetName, + name : dataSetName, + title: dataSetName, + cannotClose : true + } + }; + + const makeCaseTableResult = await codapInterface.sendRequest(theMessage); + if (makeCaseTableResult.success) { + console.log("Success creating case table: " + theMessage.title); + } else { + console.log("FAILED to create case table: " + theMessage.title); + } + return makeCaseTableResult.success && makeCaseTableResult.values.id; + }, + createNewCollection: async function(dSName, collName) { const message = { "action": "create", @@ -33,6 +113,6 @@ export const connect = { iFrameDescriptor: { version: '0.0.1', name: 'nass-plugin', - title: 'MultiData' + title: 'NASS Quickstats Data' }, }