Example: TimeSeries Groups

An example for calling the TimeSeries Groups endpoint via CDA in JavaScript

Groundwork-Water + React

Checkout Groundwork-Water Hooks
The data components library for USACE made in React + Groundwork

Hooks are made wrapping CWMSjs using code similar to the React example below.
They also provide variables for you to track the state, progress, and data of the request.
The header on the Groundwork-Water webpage provides a list of currently available hooks.

React + Vite Example

To Install: npm install cwmsjs --save

import { TimeSeriesGroupsApi } from "cwmsjs";


// ⚠️ NOTE!
// Prior to V 1.14.0 TSGroups was broken and returned empty data for assignedTimeSeries
// Please update to V 1.15.0 or higher to fix this issue
// npm uninstall cwmsjs
// npm install cwmsjs --save

// Initialize the timeseries groups api with the default config
const tsg_api = new TimeSeriesGroupsApi();
// Fetch ALL timeseries groups for the given office
tsg_api.getTimeSeriesGroup({ office: 'SWT' }).then((data) => {
    console.log(data[0]);
    data.forEach((group) => {
        console.log(group.assignedTimeSeries);
        const TSIDS = group.assignedTimeSeries.map((ts) => ts.timeseriesId);
        console.log(TSIDS);
        console.log(`Fetched ${TSIDS.length} timeseries for group ${group.id}`);
    });
});

// Fetch a specific timeseries groups given an ID for the given office
tsg_api
    .getTimeSeriesGroupWithGroupId({
        groupId: 'USGS TS Data Acquisition',
        office: 'CWMS',
        categoryId: 'Data Acquisition',
    })
    .then((group) => {
        console.log(group);
        console.log(group.assignedTimeSeries);
        const TSIDS = group.assignedTimeSeries.map((ts) => ts.timeseriesId);
        console.log(TSIDS);
        console.log(`Fetched ${TSIDS.length} timeseries for group ${group.id}`);
    });

Bundle / Vanilla JS Example

To Install:

Run
curl -O "https://raw.githubusercontent.com/HydrologicEngineeringCenter/cwms-data-api-client-javascript/main/src/dist/bundle.js"
to download bundle.js to your system
Copy bundle.js to your web directory if not in that directory already

<!-- Include the bundle.js file -->
<script src="./bundle.js"></script>
<!-- Call the cwmsjs after the bundle has loaded -->
<script type="module">
// ⚠️ NOTE!
// Prior to V 1.14.0 TSGroups was broken and returned empty data for assignedTimeSeries
// Please update to V 1.15.0 or higher to fix this issue
// npm uninstall cwmsjs
// npm install cwmsjs --save

// Initialize the timeseries groups api with the default config
const tsg_api = new cwmsjs.TimeSeriesGroupsApi();
// Fetch ALL timeseries groups for the given office
tsg_api.getTimeSeriesGroup({ office: 'SWT' }).then((data) => {
    console.log(data[0]);
    data.forEach((group) => {
        console.log(group.assignedTimeSeries);
        const TSIDS = group.assignedTimeSeries.map((ts) => ts.timeseriesId);
        console.log(TSIDS);
        console.log(`Fetched ${TSIDS.length} timeseries for group ${group.id}`);
    });
});

// Fetch a specific timeseries groups given an ID for the given office
tsg_api
    .getTimeSeriesGroupWithGroupId({
        groupId: 'USGS TS Data Acquisition',
        office: 'CWMS',
        categoryId: 'Data Acquisition',
    })
    .then((group) => {
        console.log(group);
        console.log(group.assignedTimeSeries);
        const TSIDS = group.assignedTimeSeries.map((ts) => ts.timeseriesId);
        console.log(TSIDS);
        console.log(`Fetched ${TSIDS.length} timeseries for group ${group.id}`);
    });

</script>