@oanda/labs-ticker-tape-widget 1.0.1

package/dist/types/gql/types/graphql.d.ts

@@ -0,0 +1,397 @@
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+export type Maybe<T> = T | null;
+export type InputMaybe<T> = Maybe<T>;
+export type Exact<T extends {
+    [key: string]: unknown;
+}> = {
+    [K in keyof T]: T[K];
+};
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> & {
+    [SubKey in K]?: Maybe<T[SubKey]>;
+};
+export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & {
+    [SubKey in K]: Maybe<T[SubKey]>;
+};
+export type MakeEmpty<T extends {
+    [key: string]: unknown;
+}, K extends keyof T> = {
+    [_ in K]?: never;
+};
+export type Incremental<T> = T | {
+    [P in keyof T]?: P extends ' $fragmentName' | '__typename' ? T[P] : never;
+};
+/** All built-in and custom scalars, mapped to their actual values */
+export type Scalars = {
+    ID: {
+        input: string;
+        output: string;
+    };
+    String: {
+        input: string;
+        output: string;
+    };
+    Boolean: {
+        input: boolean;
+        output: boolean;
+    };
+    Int: {
+        input: number;
+        output: number;
+    };
+    Float: {
+        input: number;
+        output: number;
+    };
+};
+export type AssetClass = {
+    __typename?: 'AssetClass';
+    instruments: Array<Instrument>;
+    name: Scalars['String']['output'];
+};
+export declare enum AssetClassName {
+    Commodities = "COMMODITIES",
+    Cryptocurrency = "CRYPTOCURRENCY",
+    Currency = "CURRENCY",
+    EquityShares = "EQUITY_SHARES",
+    Indices = "INDICES",
+    Rates = "RATES"
+}
+export declare enum BookType {
+    Order = "ORDER",
+    Position = "POSITION"
+}
+export type CorrelationHeatmap = {
+    __typename?: 'CorrelationHeatmap';
+    baseInstrument: Instrument;
+    heatmap: Array<Heatmap>;
+};
+export type CorrelationMatrix = {
+    __typename?: 'CorrelationMatrix';
+    baseTimeUnit: CorrelationTimeUnit;
+    matrix: Array<Matrix>;
+};
+export declare enum CorrelationTimeUnit {
+    H1 = "H1",
+    H4 = "H4",
+    H24 = "H24",
+    M1 = "M1",
+    M3 = "M3",
+    M6 = "M6",
+    W1 = "W1",
+    Y1 = "Y1"
+}
+export declare enum CurrencyName {
+    Aud = "AUD",
+    Cad = "CAD",
+    Chf = "CHF",
+    Eur = "EUR",
+    Gbp = "GBP",
+    Jpy = "JPY",
+    Nzd = "NZD",
+    Usd = "USD"
+}
+export type CurrencyPower = {
+    __typename?: 'CurrencyPower';
+    /** UTC Timestamp */
+    point: Scalars['String']['output'];
+    price: Scalars['Float']['output'];
+};
+export type CurrencyPowerBalance = {
+    __typename?: 'CurrencyPowerBalance';
+    currency: CurrencyName;
+    power: Array<CurrencyPower>;
+    updatedAt: Scalars['String']['output'];
+};
+export declare enum CurrencyPowerBalanceTimeUnit {
+    CurrentDay = "CURRENT_DAY",
+    H4 = "H4",
+    H8 = "H8",
+    H24 = "H24",
+    M1 = "M1",
+    M3 = "M3",
+    PreviousDay = "PREVIOUS_DAY",
+    W1 = "W1"
+}
+export type CurrencyStrength = {
+    __typename?: 'CurrencyStrength';
+    currency: CurrencyName;
+    strengthRelation?: Maybe<Array<StrengthRelation>>;
+    updatedAt: Scalars['String']['output'];
+};
+export declare enum DataSource {
+    Ny4 = "NY4",
+    Ty3 = "TY3"
+}
+export declare enum Division {
+    Oap = "OAP",
+    Oau = "OAU",
+    Oc = "OC",
+    Ocan = "OCAN",
+    Oel = "OEL",
+    Ogm = "OGM",
+    Oj = "OJ",
+    Opt = "OPT",
+    Otms = "OTMS"
+}
+export type Heatmap = {
+    __typename?: 'Heatmap';
+    instrument: Instrument;
+    timeCorrelation: Array<TimeCorrelation>;
+};
+export type Instrument = {
+    __typename?: 'Instrument';
+    displayName: Scalars['String']['output'];
+    name: Scalars['String']['output'];
+};
+export type InstrumentCorrelation = {
+    __typename?: 'InstrumentCorrelation';
+    instrument: Instrument;
+    value?: Maybe<Scalars['Float']['output']>;
+};
+export type Matrix = {
+    __typename?: 'Matrix';
+    instrument: Instrument;
+    instrumentCorrelation: Array<InstrumentCorrelation>;
+};
+export type OrderPositionBucket = {
+    __typename?: 'OrderPositionBucket';
+    longCountPercent: Scalars['Float']['output'];
+    price: Scalars['Float']['output'];
+    shortCountPercent: Scalars['Float']['output'];
+};
+export type OrderPositionData = {
+    __typename?: 'OrderPositionData';
+    bucketWidth: Scalars['Float']['output'];
+    buckets: Array<Maybe<OrderPositionBucket>>;
+    dataSource?: Maybe<Scalars['String']['output']>;
+    instrument: Scalars['String']['output'];
+    price?: Maybe<Scalars['Float']['output']>;
+    region?: Maybe<Scalars['String']['output']>;
+    time: Scalars['String']['output'];
+    unixTime: Scalars['Int']['output'];
+};
+export type Query = {
+    __typename?: 'Query';
+    assetClasses?: Maybe<Array<Maybe<AssetClass>>>;
+    correlationHeatmap: CorrelationHeatmap;
+    correlationMatrix: CorrelationMatrix;
+    currencyPowerBalance?: Maybe<Array<CurrencyPowerBalance>>;
+    currencyStrength?: Maybe<Array<CurrencyStrength>>;
+    isAllowedPartner?: Maybe<Scalars['Boolean']['output']>;
+    mapInstrumentNames?: Maybe<Array<Maybe<Instrument>>>;
+    orderPositionBooks: Array<Maybe<OrderPositionData>>;
+    sentiment?: Maybe<Array<SentimentInstrument>>;
+    sentimentList?: Maybe<Array<SentimentInstrument>>;
+    topicalInstruments?: Maybe<Array<TopicalInstrument>>;
+    topicalInstrumentsCharts?: Maybe<Array<TopicalInstrumentChart>>;
+    topicalInstrumentsTotalCount: Scalars['Int']['output'];
+    valueAtRiskAssetClasses?: Maybe<Array<AssetClass>>;
+    valueAtRiskChart?: Maybe<ValueAtRiskChart>;
+    volatilityChart?: Maybe<Array<Maybe<VolatilityChart>>>;
+    volatilityChartAssetClasses?: Maybe<Array<AssetClass>>;
+};
+export type QueryAssetClassesArgs = {
+    division: Division;
+};
+export type QueryCorrelationHeatmapArgs = {
+    division: Division;
+    instruments?: InputMaybe<Array<InputMaybe<Scalars['String']['input']>>>;
+    timeSpans?: InputMaybe<Array<InputMaybe<CorrelationTimeUnit>>>;
+};
+export type QueryCorrelationMatrixArgs = {
+    division: Division;
+    instruments?: InputMaybe<Array<InputMaybe<Scalars['String']['input']>>>;
+};
+export type QueryCurrencyPowerBalanceArgs = {
+    timeUnit: CurrencyPowerBalanceTimeUnit;
+};
+export type QueryIsAllowedPartnerArgs = {
+    url: Scalars['String']['input'];
+};
+export type QueryMapInstrumentNamesArgs = {
+    division?: InputMaybe<Division>;
+    instruments: Array<InputMaybe<Scalars['String']['input']>>;
+};
+export type QueryOrderPositionBooksArgs = {
+    bookType: BookType;
+    dataSource?: InputMaybe<DataSource>;
+    instrument: Scalars['String']['input'];
+    recentHours?: InputMaybe<Scalars['Int']['input']>;
+    region?: InputMaybe<Region>;
+};
+export type QuerySentimentArgs = {
+    division?: InputMaybe<Division>;
+    name: Scalars['String']['input'];
+};
+export type QuerySentimentListArgs = {
+    division?: InputMaybe<Division>;
+    sort?: InputMaybe<Sort>;
+};
+export type QueryTopicalInstrumentsArgs = {
+    assetClass?: InputMaybe<AssetClassName>;
+    count?: InputMaybe<Scalars['Int']['input']>;
+    division?: InputMaybe<Division>;
+    offset?: InputMaybe<Scalars['Int']['input']>;
+    sort: TopicalSort;
+};
+export type QueryTopicalInstrumentsChartsArgs = {
+    division?: InputMaybe<Division>;
+    instruments?: InputMaybe<Array<Scalars['String']['input']>>;
+};
+export type QueryTopicalInstrumentsTotalCountArgs = {
+    assetClass?: InputMaybe<AssetClassName>;
+    division?: InputMaybe<Division>;
+    sort: TopicalSort;
+};
+export type QueryValueAtRiskAssetClassesArgs = {
+    division?: InputMaybe<Division>;
+};
+export type QueryValueAtRiskChartArgs = {
+    bars: ValueAtRiskBars;
+    division?: InputMaybe<Division>;
+    duration: ValueAtRiskDuration;
+    instrument: Scalars['String']['input'];
+};
+export type QueryVolatilityChartArgs = {
+    division?: InputMaybe<Division>;
+    instrument: Scalars['String']['input'];
+    timeSpan: VolatilityChartTimeSpan;
+    timeUnit: VolatilityChartTimeUnit;
+};
+export type QueryVolatilityChartAssetClassesArgs = {
+    division?: InputMaybe<Division>;
+};
+export declare enum Region {
+    Amer = "AMER",
+    Apac = "APAC",
+    Emea = "EMEA"
+}
+export type Sentiment = {
+    __typename?: 'Sentiment';
+    longPercent: Scalars['Float']['output'];
+    shortPercent: Scalars['Float']['output'];
+};
+export type SentimentInstrument = {
+    __typename?: 'SentimentInstrument';
+    displayName: Scalars['String']['output'];
+    name: Scalars['String']['output'];
+    sentiment: Sentiment;
+    updatedAt: Scalars['String']['output'];
+};
+export declare enum Sort {
+    Bearish = "BEARISH",
+    Bullish = "BULLISH"
+}
+export type StrengthRelation = {
+    __typename?: 'StrengthRelation';
+    currency: CurrencyName;
+    percentage: Scalars['Float']['output'];
+};
+export type TimeCorrelation = {
+    __typename?: 'TimeCorrelation';
+    timeUnit: CorrelationTimeUnit;
+    value?: Maybe<Scalars['Float']['output']>;
+};
+export type TopicalInstrument = {
+    __typename?: 'TopicalInstrument';
+    assetClass?: Maybe<AssetClassName>;
+    displayName: Scalars['String']['output'];
+    name: Scalars['String']['output'];
+    sentiment: Sentiment;
+    updatedAt: Scalars['String']['output'];
+};
+export type TopicalInstrumentChart = {
+    __typename?: 'TopicalInstrumentChart';
+    chart?: Maybe<Array<Scalars['Float']['output']>>;
+    name: Scalars['String']['output'];
+};
+export declare enum TopicalSort {
+    Bearish = "BEARISH",
+    Bullish = "BULLISH",
+    Hot = "HOT",
+    Popular = "POPULAR",
+    Volatile = "VOLATILE"
+}
+export declare enum ValueAtRiskBars {
+    C100 = "C100",
+    C200 = "C200",
+    C300 = "C300"
+}
+export type ValueAtRiskChart = {
+    __typename?: 'ValueAtRiskChart';
+    down: ValueAtRiskChartData;
+    up: ValueAtRiskChartData;
+};
+export type ValueAtRiskChartData = {
+    __typename?: 'ValueAtRiskChartData';
+    average: Scalars['Float']['output'];
+    max: Scalars['Float']['output'];
+    median: Scalars['Float']['output'];
+    points?: Maybe<Array<ValueAtRiskChartPoint>>;
+    threshold: Scalars['Float']['output'];
+};
+export type ValueAtRiskChartPoint = {
+    __typename?: 'ValueAtRiskChartPoint';
+    percent: Scalars['Float']['output'];
+    pips: Scalars['Float']['output'];
+};
+export declare enum ValueAtRiskDuration {
+    C1 = "C1",
+    C2 = "C2",
+    C3 = "C3",
+    C4 = "C4",
+    C5 = "C5",
+    C10 = "C10"
+}
+export type VolatilityChart = {
+    __typename?: 'VolatilityChart';
+    pips: Scalars['Float']['output'];
+    /** Time point - hour in format hh:mm, Date in UTC, Week in format 'Mo' */
+    point: Scalars['String']['output'];
+    updatedAt: Scalars['String']['output'];
+};
+export declare enum VolatilityChartTimeSpan {
+    /**  Valid for: H */
+    D5 = "D5",
+    /**  Valid for: H */
+    D10 = "D10",
+    /**  Valid for: D */
+    M1 = "M1",
+    /**  Valid for: D */
+    M3 = "M3",
+    /**  Valid for: W */
+    W5 = "W5",
+    /**  Valid for: W */
+    W10 = "W10"
+}
+export declare enum VolatilityChartTimeUnit {
+    D = "D",
+    H = "H",
+    W = "W"
+}
+export type GetInstrumentsChartQueryVariables = Exact<{
+    instruments?: InputMaybe<Array<Scalars['String']['input']> | Scalars['String']['input']>;
+    division?: InputMaybe<Division>;
+}>;
+export type GetInstrumentsChartQuery = {
+    __typename?: 'Query';
+    topicalInstrumentsCharts?: Array<{
+        __typename?: 'TopicalInstrumentChart';
+        name: string;
+        chart?: Array<number> | null;
+    }> | null;
+};
+export type ValidateInstrumentsQueryVariables = Exact<{
+    instruments: Array<InputMaybe<Scalars['String']['input']>> | InputMaybe<Scalars['String']['input']>;
+    division?: InputMaybe<Division>;
+}>;
+export type ValidateInstrumentsQuery = {
+    __typename?: 'Query';
+    mapInstrumentNames?: Array<{
+        __typename?: 'Instrument';
+        name: string;
+        displayName: string;
+    } | null> | null;
+};
+export declare const GetInstrumentsChartDocument: DocumentNode<GetInstrumentsChartQuery, GetInstrumentsChartQueryVariables>;
+export declare const ValidateInstrumentsDocument: DocumentNode<ValidateInstrumentsQuery, ValidateInstrumentsQueryVariables>;

package/dist/types/gql/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./fragment-masking";
+export * from "./gql";

package/dist/types/gql/validateInstruments.d.ts

@@ -0,0 +1 @@
+export declare const validateInstruments: import("@apollo/client").DocumentNode;

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export * from './TickerTapeWidget';

package/dist/types/translations/index.d.ts

@@ -0,0 +1,4 @@
+import { Translations } from '@oanda/mono-i18n';
+import { defaultTranslations } from './translations';
+export type TranslationKey = keyof typeof defaultTranslations;
+export declare const translations: Translations;

package/dist/types/translations/translations.d.ts

@@ -0,0 +1,4 @@
+export declare const defaultTranslations: {
+    data_unavailable: string;
+    pagination_entries_range: string;
+};

package/index.ts

@@ -0,0 +1 @@
+export * from './src';

package/lokalise.config.json

@@ -0,0 +1,18 @@
+{
+  "projectId": "19607517615e88022ba782.45168463",
+  "outputDir": "src/translations/sources",
+  "esModuleTranslations": "src/translations/translations.ts",
+  "messagesFormat": "esModule",
+  "esModuleConstName": "defaultTranslations",
+  "includeEmptyTranslations": true,
+  "downloadOptions": {
+    "format": "json",
+    "add_newline_eof": true,
+    "placeholder_format": "i18n",
+    "indentation": "2sp",
+    "plural_format": "i18next",
+    "export_empty_as": "skip",
+    "include_tags": ["common_widgets"],
+    "filter_langs": ["en", "zh_TW", "es", "th"]
+  }
+}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@oanda/labs-ticker-tape-widget",
+  "version": "1.0.1",
+  "description": "Labs Ticker Tape Widget",
+  "main": "dist/main/index.js",
+  "module": "dist/module/index.js",
+  "types": "dist/types/index.d.ts",
+  "scripts": {
+    "codegen": "graphql-codegen --config codegen.ts"
+  },
+  "keywords": [],
+  "author": "OANDA",
+  "license": "UNLICENSED",
+  "dependencies": {
+    "@apollo/client": "3.9.9",
+    "@oanda/labs-widget-common": "^1.0.145",
+    "@oanda/mono-i18n": "10.0.1",
+    "graphql": "16.8.1",
+    "react-fast-marquee": "1.6.5"
+  },
+  "devDependencies": {
+    "@graphql-codegen/cli": "5.0.0",
+    "@graphql-codegen/client-preset": "4.1.0"
+  },
+  "gitHead": "5cc88e59b1912fd2c750cd083a71af6109532a3c"
+}

package/src/TickerTapeWidget/Main.tsx

@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from 'react';
+import Marquee from 'react-fast-marquee';
+import classnames from 'classnames';
+import { useQuery } from '@apollo/client';
+import {
+  ChartError, DataRecord, Tooltip, useLiveRatesQuery,
+} from '@oanda/labs-widget-common';
+import { MainProps } from './types';
+import {
+  ValidateInstrumentsQuery,
+  ValidateInstrumentsQueryVariables,
+} from '../gql/types/graphql';
+import { validateInstruments } from '../gql/validateInstruments';
+import { getRecords } from './utils';
+import { InstrumentRateWithChart } from './components/InstrumentRateWithChart';
+import { INSTRUMENT_TOOLTIP_ID } from './constant';
+
+const Main = ({
+  instruments,
+  division,
+  size: widgetSize = 'fullWithChart',
+}: MainProps) => {
+  const [records, setRecords] = useState<DataRecord[]>([]);
+  const { target, setQuery } = useLiveRatesQuery();
+  const { loading, data, error } = useQuery<
+  ValidateInstrumentsQuery,
+  ValidateInstrumentsQueryVariables
+  >(validateInstruments, {
+    variables: {
+      instruments,
+      division,
+    },
+    fetchPolicy: 'network-only',
+  });
+
+  useEffect(() => {
+    if (!loading && data) {
+      setRecords(getRecords(data)!);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [loading, data]);
+
+  const instrumentsNames = records.map(({ instrument: instrumentName }) => instrumentName);
+
+  useEffect(() => {
+    if (instrumentsNames[0]) {
+      setQuery({ instruments: instrumentsNames });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [records]);
+
+  const showError = !!error;
+  const isLoading = loading || !data;
+
+  return (
+    <div data-testid="ticker-tape-wrapper">
+      <Marquee
+        play={!isLoading}
+        autoFill
+        pauseOnHover
+        speed={60}
+      >
+        {records.map((record) => (
+          <div
+            key={record.instrument}
+            className={classnames('lw-flex lw-border lw-border-r-0 lw-border-solid lw-border-border-primary lw-px-4 lw-text-sm lw-tracking-normal lw-text-text-primary', {
+              'lw-h-[82px]': widgetSize !== 'compact',
+              'lw-h-[54px]': widgetSize === 'compact',
+            })}
+          >
+            <InstrumentRateWithChart
+              loading={loading}
+              record={record}
+              target={target}
+              division={division}
+              size={widgetSize}
+            />
+          </div>
+        ))}
+      </Marquee>
+      <Tooltip id={INSTRUMENT_TOOLTIP_ID} />
+      {!loading && showError && (
+        <div className="lw-flex lw-h-[150px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary">
+          <ChartError />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export { Main };

package/src/TickerTapeWidget/TickerTapeWidget.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
+import { LocaleProvider } from '@oanda/mono-i18n';
+import {
+  ChartError, LiveRatesProvider, ThemeProvider, getLocale,
+} from '@oanda/labs-widget-common';
+import { translations } from '../translations';
+import { Main } from './Main';
+import { Division, TickerTapeConfig } from './types';
+
+const TickerTapeWidget = ({
+  graphqlUrl,
+  liveRatesUrl,
+  instruments,
+  division,
+  locale,
+  theme,
+  isParamError,
+  removePadding,
+  size,
+}: TickerTapeConfig) => {
+  const client = new ApolloClient({
+    uri: graphqlUrl,
+    cache: new InMemoryCache(),
+  });
+
+  const divisionCode = division === Division.Opt ? Division.Ogm : division;
+  const dataSource = divisionCode === Division.Ogm ? 'MT5' : 'V20';
+
+  return (
+    <ThemeProvider removePadding={removePadding} theme={theme}>
+      <LocaleProvider locale={getLocale(locale)} translations={translations}>
+        <LiveRatesProvider
+          url={liveRatesUrl}
+          options={{ divisionCode, dataSource }}
+        >
+          <ApolloProvider client={client}>
+            {isParamError ? (
+              <div className="lw-flex lw-h-[425px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary">
+                <ChartError />
+              </div>
+            )
+              : (
+                <Main
+                  size={size}
+                  instruments={instruments}
+                  division={division}
+                />
+              )}
+          </ApolloProvider>
+        </LiveRatesProvider>
+      </LocaleProvider>
+    </ThemeProvider>
+  );
+};
+
+export { TickerTapeWidget };

package/src/TickerTapeWidget/components/InstrumentRateWithChart/InstrumentRateWithChart.tsx

@@ -0,0 +1,43 @@
+import React, { useContext } from 'react';
+import { InstrumentRate, ThemeContext } from '@oanda/labs-widget-common';
+import { InstrumentRateWithChartProps } from './types';
+import { getChartColor, getColorIndicator } from './utils';
+import { INSTRUMENT_TOOLTIP_ID } from '../../constant';
+import { LineChartWithData } from '../LineChartWithData';
+import { useRecords } from '../../utils';
+
+const InstrumentRateWithChart = ({
+  loading,
+  record,
+  target,
+  division,
+  size,
+}: InstrumentRateWithChartProps) => {
+  const { isDark } = useContext(ThemeContext);
+  const { updatedRecord, error } = useRecords(record, record.instrument ? target : null);
+
+  const indicator = getColorIndicator(updatedRecord.dailyPercentChange);
+
+  return (
+    <>
+      <InstrumentRate
+        isLoading={loading}
+        isError={!!error}
+        record={updatedRecord}
+        size={size}
+        tooltipId={INSTRUMENT_TOOLTIP_ID}
+        colorIndicator={indicator}
+      />
+      {size === 'fullWithChart' && (
+        <LineChartWithData
+          record={record}
+          isLoading={loading}
+          division={division}
+          color={getChartColor(indicator, isDark)}
+        />
+      )}
+    </>
+  );
+};
+
+export { InstrumentRateWithChart };

package/src/TickerTapeWidget/components/InstrumentRateWithChart/index.ts

@@ -0,0 +1,2 @@
+export * from './InstrumentRateWithChart';
+export * from './utils';

package/src/TickerTapeWidget/components/InstrumentRateWithChart/types.ts

@@ -0,0 +1,10 @@
+import { DataRecord } from '@oanda/labs-widget-common';
+import { Division } from '../../types';
+
+export interface InstrumentRateWithChartProps {
+  loading: boolean;
+  record: DataRecord;
+  target: EventTarget | null;
+  division: Division;
+  size?: 'compact' | 'full' | 'fullWithChart'
+}