Loading...
;\r\n }\r\n\r\n const search = \" \";\r\n const replaceWith = \"-\";\r\n const stateName = stateWys.state.stateName.split(search).join(replaceWith);\r\n // can't us replaceAll in IE 11\r\n // stateWys.state.stateName.replaceAll(' ', '-')\r\n\r\n return (\r\n \r\n
\r\n
\r\n \r\n {\r\n return { ...wys, \r\n id: wys.stationNumber,\r\n link: `/station/${wys.stationNumber}/${stateWys.waterYear}` };\r\n })}\r\n columns={columns}\r\n defaultPageSize={100}\r\n onRowClick={handleRowClick}\r\n components={{\r\n Toolbar: CustomToolbar,\r\n }}\r\n />\r\n
\r\n \r\n \r\n Search\r\n \r\n {(requestStatus === REQUEST_STATUS.LOADING) &&
\r\n ' + point.series.name + ':' +\r\n Highcharts.numberFormat(point.y, 2) + '\"';\r\n \r\n // insert combined daily + multiday prcp\r\n if (i == 1) {\r\n s += '
Combined (Daily + Multiday) Prcp: ' +\r\n Highcharts.numberFormat((pointsRef[0].y + pointsRef[1].y), 2) + '\"';\r\n }\r\n });\r\n \r\n \r\n return s;\r\n } */\r\n },\r\n plotOptions: {\r\n column: {\r\n pointPadding: 0.2,\r\n borderWidth: 0,\r\n stacking: 'normal'\r\n }\r\n },\r\n series: getMonthlyChartSeries(wys)\r\n };\r\n} \r\n\r\n\r\n\r\nfunction MonthlyPrecipTotalsChart() {\r\n const {stationWys} = useContext(StationWaterYearSummaryContext);\r\n\r\n if(!stationWys) {\r\n return <>\r\n } \r\n\r\n return (\r\n
\r\n
\r\n );\r\n}\r\n\r\nexport default AccumulatedStationPrecipChart;\r\n",
"import React, { useContext } from \"react\";\r\nimport Highcharts from \"highcharts\";\r\nimport HighchartsReact from \"highcharts-react-official\";\r\nimport { StationWaterYearSummaryContext } from \"../../contexts/StationWaterYearSummaryContext\";\r\n\r\nfunction parseIso8601(str) {\r\n // we assume str is a UTC date ending in 'Z'\r\n\r\n var parts = str.split(\"T\"),\r\n dateParts = parts[0].split(\"-\"),\r\n timeParts = parts[1].split(\"Z\"),\r\n timeSubParts = timeParts[0].split(\":\"),\r\n timeSecParts = timeSubParts[2].split(\".\"),\r\n timeHours = Number(timeSubParts[0]);\r\n\r\n return Date.UTC(\r\n Number(dateParts[0]),\r\n Number(dateParts[1]) - 1,\r\n Number(dateParts[2])\r\n );\r\n}\r\n\r\nfunction getDaysInWaterYearDailyPrcp(wys) {\r\n const list = wys.dailyPrcpObservations.map((obs) => {\r\n let prcp = obs.precipitation;\r\n if (prcp == null || prcp == \"T\" || prcp == \"M\") {\r\n prcp = 0;\r\n }\r\n return [parseIso8601(obs.obsDateTime), parseFloat(prcp)];\r\n });\r\n return list;\r\n}\r\nfunction getDaysInWaterYearMultidayPrcp(wys) {\r\n const list = wys.multiDayPrcpObservations.map((obs) => {\r\n let prcp = obs.precipitation;\r\n if (prcp == null || prcp == \"T\" || prcp == \"M\") {\r\n prcp = 0;\r\n }\r\n return [parseIso8601(obs.obsEndDateTime), parseFloat(prcp)];\r\n });\r\n return list;\r\n}\r\n\r\nfunction getMapOptions(wys) {\r\n const waterYear = wys.waterYear;\r\n const startYear = waterYear - 1;\r\n\r\n return {\r\n chart: {\r\n defaultSeriesType: \"column\",\r\n },\r\n credits: {\r\n enabled: false,\r\n },\r\n title: {\r\n text: `${waterYear} Water Year (Oct ${startYear} - Sept ${waterYear}) Daily Precipitation`,\r\n },\r\n subtitle: {\r\n text: `Station: ${wys.station.stationNumber} ${wys.station.stationName}`,\r\n },\r\n legend: {\r\n align: \"right\",\r\n verticalAlign: \"top\",\r\n x: -70,\r\n y: 52,\r\n floating: true,\r\n backgroundColor: {\r\n linearGradient: [0, 0, 0, 50],\r\n stops: [\r\n [0, \"#FFFFFF\"],\r\n [1, \"#E0E0E0\"],\r\n ],\r\n },\r\n shadow: true,\r\n },\r\n tooltip: {\r\n backgroundColor: {\r\n linearGradient: [0, 0, 0, 200],\r\n stops: [\r\n [0, \"#FFFFFF\"],\r\n [1, \"#E0E0E0\"],\r\n ],\r\n },\r\n style: {\r\n padding: 10,\r\n fontWeight: \"bold\",\r\n \"line-height\": 2,\r\n },\r\n // borderWidth: 1,\r\n //borderColor: '#AAA'\r\n },\r\n plotOptions: {\r\n column: {\r\n pointPadding: 0.2, // 0.2\r\n borderWidth: 0,\r\n },\r\n },\r\n xAxis: {\r\n //startOnTick: true,\r\n endOnTick: false,\r\n type: \"datetime\",\r\n labels: {\r\n formatter: function () {\r\n return (\r\n '\\u00A0\\u00A0\\u00A0\\u00A0\\u00A0\\u00A0\\u00A0\\u00A0\\u00A0\\u00A0\\u00A0\\u00A0\\u00A0\\u00A0\\u00A0\\u00A0 ' +\r\n Highcharts.dateFormat(\"%b %y\", this.value) +\r\n \"\"\r\n );\r\n },\r\n },\r\n tickInterval: 24 * 3600 * 1000 * 30,\r\n min: Date.UTC(startYear, 9, 1),\r\n max: Date.UTC(waterYear, 8, 30),\r\n plotBands: [\r\n {\r\n color: \"#FEFFE6\",\r\n from: Date.UTC(startYear, 10, 1),\r\n to: Date.UTC(startYear, 11, 1),\r\n },\r\n {\r\n color: \"#FEFFE6\",\r\n from: Date.UTC(startYear, 12, 1),\r\n to: Date.UTC(waterYear, 1, 1),\r\n },\r\n {\r\n color: \"#FEFFE6\",\r\n from: Date.UTC(waterYear, 2, 1),\r\n to: Date.UTC(waterYear, 3, 1),\r\n },\r\n {\r\n color: \"#FEFFE6\",\r\n from: Date.UTC(waterYear, 4, 1),\r\n to: Date.UTC(waterYear, 5, 1),\r\n },\r\n {\r\n color: \"#FEFFE6\",\r\n from: Date.UTC(waterYear, 6, 1),\r\n to: Date.UTC(waterYear, 7, 1),\r\n },\r\n {\r\n color: \"#FEFFE6\",\r\n from: Date.UTC(waterYear, 8, 1),\r\n to: Date.UTC(waterYear, 9, 1),\r\n },\r\n ],\r\n // tickInterval: 24 * 3600 * 1000\r\n // categories: []\r\n },\r\n yAxis: {\r\n title: {\r\n text: \"Precipitation Amount (inches)\",\r\n },\r\n min: 0,\r\n },\r\n series: [\r\n {\r\n name: \"Daily Prcp\",\r\n type: \"column\",\r\n color: \"#4572A7\", // blue\r\n pointWidth: 2,\r\n shadow: false,\r\n data: getDaysInWaterYearDailyPrcp(wys),\r\n },\r\n {\r\n name: \"Multiday Prcp\",\r\n type: \"column\",\r\n color: \"#89A54E\",\r\n pointWidth: 2,\r\n shadow: false,\r\n data: getDaysInWaterYearMultidayPrcp(wys),\r\n },\r\n ],\r\n };\r\n}\r\n\r\nfunction DailyStationPrecipChart() {\r\n const { stationWys } = useContext(StationWaterYearSummaryContext);\r\n\r\n if (!stationWys) {\r\n return <>;\r\n }\r\n\r\n return (\r\n \r\n
\r\n );\r\n}\r\n\r\nexport default DailyStationPrecipChart;\r\n",
"import React, { useContext, useEffect } from \"react\";\r\nimport {\r\n Grid,\r\n Typography,\r\n Card,\r\n CardContent,\r\n InputLabel,\r\n Divider,\r\n} from \"@material-ui/core\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport { StationWaterYearSummaryContext } from \"../../contexts/StationWaterYearSummaryContext\";\r\nimport Link from \"@material-ui/core/Link\";\r\nimport Skeleton from \"@material-ui/lab/Skeleton\";\r\nimport Paper from \"@material-ui/core/Paper\";\r\nimport Container from \"@material-ui/core/Container\";\r\nimport Box from \"@material-ui/core/Box\";\r\nimport CircularProgress from \"@material-ui/core/CircularProgress\"\r\nimport { REQUEST_STATUS } from \"../../hooks/useStationWaterYearSummary\";\r\nimport { useLocation } from \"react-router-dom\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n formControl: {\r\n margin: theme.spacing(1),\r\n minWidth: 120,\r\n },\r\n selectEmpty: {\r\n marginTop: theme.spacing(2),\r\n },\r\n searchCard: { display: \"inline-block\" },\r\n blackBorder: { border: \"1px solid black\" },\r\n redBorder: { border: \"1px solid red\" },\r\n greenBorder: { border: \"1px solid green\" },\r\n overviewHeader: {\r\n marginBottom: theme.spacing(2),\r\n },\r\n}));\r\n\r\nfunction ScrollToAnchor({requestStatus, location}) {\r\n useEffect(() => {\r\n \r\n let hash = location.hash;\r\n if (hash) {\r\n const anchor = (document).querySelector(\r\n hash\r\n );\r\n if (anchor) {\r\n anchor.scrollIntoView({ behavior: \"smooth\", block: \"center\" });\r\n }\r\n }\r\n\r\n\r\n }, [requestStatus]);\r\n return <>\r\n}\r\n\r\nfunction StationOverview() {\r\n const { stationWys, requestStatus, stationNumber, waterYear, error } = useContext(\r\n StationWaterYearSummaryContext\r\n );\r\n const classes = useStyles();\r\n let location = useLocation();\r\n\r\n if (requestStatus && requestStatus === REQUEST_STATUS.LOADING) {\r\n return (\r\n \r\n
\r\n {value}\r\n
\r\n {showPopper && (\r\n \r\n
\r\n ) : (\r\n \r\n {\r\n return {\r\n ...obs,\r\n id: obs.obsDateTime,\r\n precip: (obs.precipitationIsTrace)? TRACE_VALUE : obs.precipitation,\r\n snowfall: (obs.snowfallIsTrace)? TRACE_VALUE : obs.snowfall,\r\n snowfallSwe: (obs.snowfallSweIsTrace)? TRACE_VALUE : obs.snowfallSwe,\r\n snowDepth: (obs.snowDepthIsTrace)? TRACE_VALUE : obs.snowDepth,\r\n snowDepthSwe: (obs.snowDepthSweIsTrace)? TRACE_VALUE : obs.snowDepthSwe,\r\n obsTime: parse(obs.obsDateTime.substring(0, 16), \"yyyy-MM-dd'T'HH:mm\", refDate)\r\n };\r\n })}\r\n columns={columns}\r\n components={{\r\n Toolbar: CustomToolbar,\r\n }}\r\n />\r\n
\r\n\r\n
\r\n ) : (\r\n \r\n {\r\n return {\r\n ...obs,\r\n id: obs.dateTimeStamp,\r\n precipitation: (obs.precipitationIsTrace)? TRACE_VALUE : obs.precipitation,\r\n snowDepth: (obs.snowDepthIsTrace)? TRACE_VALUE : obs.snowDepth,\r\n snowDepthSwe: (obs.snowDepthSweIsTrace)? TRACE_VALUE : obs.snowDepthSwe,\r\n // snowRatio: (obs.snowDepth && obs.snowDepthSwe)? ((obs.snowDepthSwe/obs.snowDepth)*100).toFixed(2) : NA_LABEL,\r\n obsEndDateTime: parse(obs.obsEndDateTime.substring(0, 16), \"yyyy-MM-dd'T'HH:mm\", refDate)\r\n };\r\n })}\r\n columns={columns}\r\n autoHeight={true}\r\n hideFooterPagination={true}\r\n disableSelectionOnClick={true}\r\n hideFooter={true}\r\n components={{\r\n Toolbar: CustomToolbar,\r\n }}\r\n />\r\n
\r\n \r\n
\r\n ) : (\r\n \r\n {\r\n return {\r\n ...obs,\r\n id: obs.dateTimeStamp,\r\n };\r\n })}\r\n columns={columns}\r\n autoHeight={true}\r\n hideFooterPagination={true}\r\n disableSelectionOnClick={true}\r\n hideFooter={true}\r\n components={{\r\n Toolbar: CustomToolbar,\r\n }}\r\n />\r\n
\r\n \r\n {children}\r\n
\r\n ![](\"/images/about-waterdemand-chart.png\")
\r\n ![](\"/images/about-prism-precipmaps.png\")
\r\n ![](\"/images/about-mrcc-precipmaps.png\")
\r\n