Arc Hydro Components

A collection of components designed to be used to connect to hydrological data and services

Installation

npm install --save arc-hydro-components

Usage

import { HydroChart } from 'arc-hydro-components';
...
const ChartComponent = (mapView: MapView) => {

    const preference = {
      inputId: <string>,
      legendOn: true | false,
      scrollbarOn: true | false,
      yaxisTitleOn: true | false,
      titleOn: true | false,
    };
    
    const localizeStrings = {
      overviewMessage: "Please select a reach with data to view its forecasted flows.",
      yAxisTitle: "Stream Flow (cms)",
      xAxisTitle: "",
      loadingText: "Collecting forecast data...",
      forecastLabel: "Forecast",
      uncertaintyLabel: "Uncertainty",
      historicalLabel: "Historical",
      yearLabel: "Yr",
      title: "Stream Flow (cms)"
    }

	const theme = {
		default: {
			forecast: '#004874',
			uncertainty: 'rgba(117, 117, 117, 0.35)',
			bands: {
				2: 'rgba(75, 172, 205, 0.4)',
				5: 'rgba(247, 210, 63, 0.4)',
				10: 'rgba(245, 128, 64, 0.4)',
				25: 'rgba(239, 71, 72, 0.4)',
				50: 'rgba(144, 83, 161, 0.4)',
			},
			timeExtent: '#b30000',
		},
	};

    return(
        <div
            style={{
                display: 'flex',
                justifyContent: 'center',
                height: '100%',
            }}
        >
            <HydroChart
              mapView={view}
              localizeStrings={localizeStrings}
              theme={theme.default}
              model={waterModel}
              preference={preference}
            />
        </div>
    )
}