DTN API & Widget Documentation

Installation

npm

@dtn/premium-hourly-forecast-widget

script

https://pre-content-services.dtn.com/ui-widgets/premium-hourly-forecast-widget/premium-hourly-forecast-widget.js

Example

window.dtn.forecast.createPremiumHourlyForecastWidget({
    "container": "#premium-hourly-forecast-widget",
    "token": "dtRmvW6JtQAYuSAFGEiGkQMcsZbMIa2E",
    "units": "Imperial",
    "locale": "en_US",
    "coordinates": {
        "lat": 45,
        "lon": -93.3
     },
    "zipCode": "33101",
    "selectedStation": {
        "displayName": "",
        "stationId": "KTPH"
    },
    "stations": [
        {
            "stationId": "KTPH",
            "displayName": "Station 1"
        },
        {
            "stationId": "KSNA",
            "displayName": "Station 2"
        }
    ],
    "visibleFields": {
        "skyCover": true,
        "temp_feelsLike": true,
        "windDirections": true,
        "windSpeeds": true,
        "dewPoint": true,
        "humidity": true,
        "precipType": true,
        "precipChance": true,
        "precipAmount": true
    },
    "user": "firstname.lastname",
    "showStationSelect": true,
    "showZipCode": true
});

Configuration

token

token: string;

The widget access token associated with your DTN account.

locale

locale: enum ["en_US"];

The language to display the widget.

container

container: HTMLElement | string;

The container to mount the widget on. This can be a reference to an HTML element, or a valid selector string. If a string is encountered, document.querySelector will be used to search document for the container.

units

units: enum ["Imperial", "Metric"];

The measuring units that are used for presenting numbers in the weather forecast.

user

user: string;

User name in format: "firstName.lastName".

showStationSelect

showStationSelect: boolean;

Whether the station select dropdown to be shown. Default set to true.

showZipCode

showZipCode: boolean;

Whether the zip code input to be shown. Default set to true.

coordinates

coordinates: {
   lat: number,
   lon: number
};

If coordinates object is passed in the configurations, the composite widget will be default populated with the data fetched by the specified latitude and longitude.

zipCode

zipCode: string;

If zip code is passed in the configurations, the composite widget will be default populated with the data fetched by the specified zip code.

selectedStation

selectedStation: {
   displayName: string,
   stationId: string
};

If selected station object is passed in the configurations, the composite widget will be default populated with the data fetched by the station Id.

stations

stations: [{
   displayName: string ,
   stationId: string
},{ 
   displayName: string ,
   stationId: string
}];

The list with stations that is going to be listed in the locations dropdown.

visibleFields

visibleFields: {
        "skyCover": true,
        "temp_feelsLike": true,
        "windDirections": true,
        "windSpeeds": true,
        "dewPoint": true,
        "humidity": true,
        "precipType": true,
        "precipChance": true,
        "precipAmount": true
    }

The fields that can be toggled ON/OFF from hourly forecast widget. By default all fields are set to visible and true.

Methods

fetchHourlyForecastData

fetchHourlyForecastData: (user: string, widgetName: string, coordinates: {lat: number,lon: number}, days: number, units?: string,) => void;

Fetch hourly forecast data according to passed parameters.

Callbacks

loadingStateDidChange

loadingStateDidChange: (loading: boolean) => void;

This callback will be called whenever the loading state changes. The callback takes a single argument which represents the new loading state.

coordinatesStateDidChange

coordinatesStateDidChange: (
    coordinates: {
         lat: number,
         lon: number, 
         stationId: string
    }
) => void;

This callback will be called whenever the coordinates are changed. The callback takes a single argument which represents the new coordinates state.

visibleFieldsDidChange

visibleFieldsDidChange: (
    visibleFields: {
        day: boolean; 
        hour: boolean; 
        condition: boolean; 
        skyCover: boolean; 
        temp_feelsLike: boolean; 
        windDirections: boolean; 
        windSpeeds: boolean; 
        dewPoint: boolean; 
        humidity: boolean; 
        precipType: boolean;
        precipChance: boolean; 
        precipAmount: boolean;
    }
) => void;

This callback will be called whenever the visible fields are changed. The callback takes a single argument which represent the new visible fields state.

hourlyForecastDidChange

hourlyForecastDidChange: (hourlyForecast:  Array<HourlyForecast>) => void;

This callback will be called whenever the hourly forecast is changed. The callback takes a single argument which represents the new hourly forecast data.

onError

onError: (error: string) => void;

This callback will be called whenever the error state changed. The callback takes a single argument which represent the new error state.

Composable Widgets