Data Rods

<terra-data-rods> | TerraDataRods

Since 1.0

stable

A component for visualizing Hydrology Data Rods time series using the GES DISC Giovanni API

<terra-data-rods
    variable-entry-id="NLDAS_FORA0125_H_2_0_CRainf_frac"
    location="38.96, -78.75"
    start-date="2013-10-29"
    end-date="2013-11-29"
></terra-data-rods>

Examples

First Example

TODO

Second Example

TODO

[component-metadata:terra-data-rods]

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script

Import

Bundler

React

To import this component from the CDN using a script tag:

<script type="module" src="https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/data-rods/data-rods.js"></script>

To import this component from the CDN using a JavaScript import:

import 'https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/data-rods/data-rods.js';

To import this component using a bundler:

import '@nasa-terra/components/dist/components/data-rods/data-rods.js';

To import this component as a React component:

import TerraDataRods from '@nasa-terra/components/dist/react/data-rods';

Properties

Name	Description	Type	Default
`variableEntryId` `variable-entry-id`	a variable entry ID (ex: GPM_3IMERGHH_06_precipitationCal)	`string \| undefined`	-
`collection`	a collection entry id (ex: GPM_3IMERGHH_06) only required if you don’t include a variableEntryId	`string \| undefined`	-
`variable`	a variable short name to plot (ex: precipitationCal) only required if you don’t include a variableEntryId	`string \| undefined`	-
`startDate` `start-date`	The start date for the time series plot. (ex: 2021–01–01)	`string \| undefined`	-
`endDate` `end-date`	The end date for the time series plot. (ex: 2021–01–01)	`string \| undefined`	-
`location`	The point location in “lat,lon” format.	`string \| undefined`	-
`bearerToken` `bearer-token`	The token to be used for authentication with remote servers. The component provides the header “Authorization: Bearer” (the request header and authentication scheme). The property’s value will be inserted after “Bearer” (the authentication scheme).	`string`	-
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name	React Event	Description	Event Detail
`terra-date-range-change`	`onTerraDateRangeChange`	Emitted whenever the date range of the date slider is updated	-

Learn more about events.

Methods

Name	Description	Arguments
`#handleDateRangeSliderChangeEvent()`	anytime the date range slider changes, update the start and end date	`event: TerraDateRangeChangeEvent`

Learn more about methods.