@oanda/labs-currency-strength-widget 1.0.1

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

@@ -0,0 +1,36 @@
+import * as types from './graphql';
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+/**
+ * Map of all GraphQL operations in the project.
+ *
+ * This map has several performance disadvantages:
+ * 1. It is not tree-shakeable, so it will include all operations in the project.
+ * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
+ * 3. It does not support dead code elimination, so it will add unused operations.
+ *
+ * Therefore it is highly recommended to use the babel or swc plugin for production.
+ */
+declare const documents: {
+    "\n  query GetCurrencyStrength {\n    currencyStrength {\n      currency\n      strengthRelation {\n        currency\n        percentage\n      }\n    }\n  }\n": DocumentNode<types.GetCurrencyStrengthQuery, types.Exact<{
+        [key: string]: never;
+    }>>;
+};
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ *
+ *
+ * @example
+ * ```ts
+ * const query = graphql(`query GetUser($id: ID!) { user(id: $id) { name } }`);
+ * ```
+ *
+ * The query argument is unknown!
+ * Please regenerate the types.
+ */
+export declare function graphql(source: string): unknown;
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export declare function graphql(source: "\n  query GetCurrencyStrength {\n    currencyStrength {\n      currency\n      strengthRelation {\n        currency\n        percentage\n      }\n    }\n  }\n"): (typeof documents)["\n  query GetCurrencyStrength {\n    currencyStrength {\n      currency\n      strengthRelation {\n        currency\n        percentage\n      }\n    }\n  }\n"];
+export type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<infer TType, any> ? TType : never;
+export {};

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

@@ -0,0 +1,282 @@
+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?: Maybe<Array<Maybe<Instrument>>>;
+    name?: Maybe<Scalars['String']['output']>;
+};
+export declare enum BookType {
+    Order = "ORDER",
+    Position = "POSITION"
+}
+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>;
+};
+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>>;
+};
+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",
+    Otms = "OTMS"
+}
+export type Instrument = {
+    __typename?: 'Instrument';
+    displayName?: Maybe<Scalars['String']['output']>;
+    name?: Maybe<Scalars['String']['output']>;
+};
+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>>>;
+    currencyPowerBalance?: Maybe<Array<CurrencyPowerBalance>>;
+    currencyStrength?: Maybe<Array<CurrencyStrength>>;
+    orderPositionBooks: Array<Maybe<OrderPositionData>>;
+    sentiment?: Maybe<Array<SentimentInstrument>>;
+    sentimentList?: Maybe<Array<SentimentInstrument>>;
+    topicalInstruments?: Maybe<Array<TopicalInstrument>>;
+    topicalInstrumentsCharts?: Maybe<Array<TopicalInstrumentChart>>;
+    topicalInstrumentsTotalCount: Scalars['Int']['output'];
+    volatilityChart?: Maybe<Array<Maybe<VolatilityChart>>>;
+    volatilityChartAssetClasses?: Maybe<Array<VolatilityChartAssetClass>>;
+};
+export type QueryAssetClassesArgs = {
+    division: Division;
+};
+export type QueryCurrencyPowerBalanceArgs = {
+    timeUnit: CurrencyPowerBalanceTimeUnit;
+};
+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 = {
+    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 = {
+    division?: InputMaybe<Division>;
+    sort: TopicalSort;
+};
+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 TopicalInstrument = {
+    __typename?: 'TopicalInstrument';
+    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 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'];
+};
+export type VolatilityChartAssetClass = {
+    __typename?: 'VolatilityChartAssetClass';
+    instruments: Array<VolatilityChartInstrument>;
+    name: Scalars['String']['output'];
+};
+export type VolatilityChartInstrument = {
+    __typename?: 'VolatilityChartInstrument';
+    displayName: Scalars['String']['output'];
+    name: 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 GetCurrencyStrengthQueryVariables = Exact<{
+    [key: string]: never;
+}>;
+export type GetCurrencyStrengthQuery = {
+    __typename?: 'Query';
+    currencyStrength?: Array<{
+        __typename?: 'CurrencyStrength';
+        currency: CurrencyName;
+        strengthRelation?: Array<{
+            __typename?: 'StrengthRelation';
+            currency: CurrencyName;
+            percentage: number;
+        }> | null;
+    }> | null;
+};
+export declare const GetCurrencyStrengthDocument: DocumentNode<GetCurrencyStrengthQuery, Exact<{
+    [key: string]: never;
+}>>;

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

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

package/dist/types/index.d.ts

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

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 @@
+export declare const defaultTranslations: {};

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", "currency_strength_widget"],
+    "filter_langs": ["en", "zh_TW"]
+  }
+}

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@oanda/labs-currency-strength-widget",
+  "version": "1.0.1",
+  "description": "Labs Currency Strength 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.7.17",
+    "@oanda/labs-widget-common": "^1.0.83",
+    "@oanda/mono-i18n": "9.0.0",
+    "classnames": "2.3.2",
+    "echarts": "5.4.3",
+    "echarts-for-react": "3.0.2",
+    "graphql": "16.7.1"
+  },
+  "devDependencies": {
+    "@graphql-codegen/cli": "5.0.0",
+    "@graphql-codegen/client-preset": "4.1.0",
+    "@graphql-codegen/typescript": "4.0.1"
+  },
+  "gitHead": "05f38586b5d7b8c372f34bc1b039acd1c998b0f2"
+}

package/src/CurrencyStrengthWidget/ChartsWithData.tsx

@@ -0,0 +1,53 @@
+import React, { useContext } from 'react';
+import { useQuery } from '@apollo/client';
+import {
+  ChartError, Spinner, SpinnerSize,
+  ThemeContext,
+} from '@oanda/labs-widget-common';
+import classnames from 'classnames';
+import { getCurrencyStrength } from '../gql/getCurrencyStrength';
+import { GetCurrencyStrengthQuery } from '../gql/types/graphql';
+import { Chart } from './components/Chart';
+
+const ChartWithData = () => {
+  const { isDesktop } = useContext(ThemeContext);
+  const { loading, data, error } = useQuery<GetCurrencyStrengthQuery>(getCurrencyStrength, {
+    fetchPolicy: 'cache-and-network',
+  });
+
+  const showChart = data?.currencyStrength && data?.currencyStrength?.length > 0;
+  const showError = data?.currencyStrength?.length === 0 || error;
+
+  return (
+    <>
+      {loading
+      && (
+        <div className="lw-flex lw-h-[461px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary">
+          <Spinner size={SpinnerSize.lg} />
+        </div>
+      )}
+      {!loading && showChart && (
+        <div
+          data-testid="currency-strength-chart-wrapper"
+          className={classnames('lw-grid lw-place-content-center lw-gap-7', {
+            'lw-grid-cols-3 ': isDesktop,
+            'lw-grid-cols-1': !isDesktop,
+          })}
+        >
+          {data.currencyStrength?.map((item) => (
+            <div className="lw-flex lw-h-[135px] lw-flex-1 lw-items-center lw-justify-center">
+              <Chart currency={item.currency} values={item.strengthRelation!} />
+            </div>
+          ))}
+        </div>
+      )}
+      {!loading && showError && (
+        <div className="lw-flex lw-h-[425px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary">
+          <ChartError />
+        </div>
+      )}
+    </>
+  );
+};
+
+export { ChartWithData };

package/src/CurrencyStrengthWidget/CurrencyStrengthWidget.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { LocaleProvider } from '@oanda/mono-i18n';
+import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
+import { ChartError, ThemeProvider, getLocale } from '@oanda/labs-widget-common';
+import { VolatilityChartConfig } from './types';
+import { translations } from '../translations';
+import { Main } from './Main';
+
+const CurrencyStrengthWidget = ({
+  graphqlUrl, locale, theme, isParamError,
+}: VolatilityChartConfig) => {
+  const client = new ApolloClient({
+    uri: graphqlUrl,
+    cache: new InMemoryCache(),
+  });
+
+  return (
+    <ThemeProvider theme={theme}>
+      <LocaleProvider locale={getLocale(locale)} translations={translations}>
+        <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 />}
+        </ApolloProvider>
+      </LocaleProvider>
+    </ThemeProvider>
+  );
+};
+
+export { CurrencyStrengthWidget };

package/src/CurrencyStrengthWidget/Main.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useLocale } from '@oanda/mono-i18n';
+import { ChartWithData } from './ChartsWithData';
+
+const Main = () => {
+  const { lang } = useLocale();
+
+  return (
+    <div data-testid="currency-strength-wrapper">
+      <div className="lw-mb-8 lw-flex lw-justify-center lw-font-sans lw-text-lg lw-font-bold">
+        <span>{`${lang('daily')} (${lang('5_minutes')})`}</span>
+      </div>
+      <ChartWithData />
+    </div>
+  );
+};
+
+export { Main };

package/src/CurrencyStrengthWidget/components/Chart/Chart.tsx

@@ -0,0 +1,48 @@
+import React, { useContext } from 'react';
+import ReactEChartsCore from 'echarts-for-react/lib/core';
+import * as echarts from 'echarts/core';
+import { BarChart } from 'echarts/charts';
+import { CanvasRenderer } from 'echarts/renderers';
+import {
+  GridSimpleComponent, GraphicComponent, TooltipComponent, TitleComponent,
+} from 'echarts/components';
+import { useLocale } from '@oanda/mono-i18n';
+import { Theme, ThemeContext, getChartTheme } from '@oanda/labs-widget-common';
+import {
+  CHART_HEIGHT,
+} from './constants';
+import { getOption } from './getOption';
+import { ChartProps } from './types';
+
+echarts.use([
+  GridSimpleComponent,
+  GraphicComponent,
+  TooltipComponent,
+  TitleComponent,
+  BarChart,
+  CanvasRenderer,
+]);
+
+echarts.registerTheme('dark_theme', getChartTheme(Theme.Dark));
+echarts.registerTheme('light_theme', getChartTheme(Theme.Light));
+
+const Chart = ({ values, currency }: ChartProps) => {
+  const { lang } = useLocale();
+  const { isDark } = useContext(ThemeContext);
+
+  return (
+    <ReactEChartsCore
+      echarts={echarts}
+      theme={isDark ? 'dark_theme' : 'light_theme'}
+      style={{
+        height: `${CHART_HEIGHT}px`,
+        width: '100%',
+      }}
+      option={getOption({
+        values, currency, lang, isDark,
+      })}
+    />
+  );
+};
+
+export { Chart };

package/src/CurrencyStrengthWidget/components/Chart/constants.tsx

@@ -0,0 +1,18 @@
+import { colorPalette } from '@oanda/labs-widget-common';
+
+export const X_LABEL_SIZE = 24;
+export const Y_LABEL_SIZE = 30;
+export const CHART_WIDTH = 9999;
+export const CHART_HEIGHT = 135;
+
+export const darkBarColors = {
+  positive: colorPalette.bottleGreenLight,
+  negative: colorPalette.orange,
+  zero: colorPalette.disabledGray,
+};
+
+export const lightBarColors = {
+  positive: colorPalette.bottleGreenLight,
+  negative: colorPalette.raspberryDark,
+  zero: colorPalette.disabledGray,
+};

package/src/CurrencyStrengthWidget/components/Chart/formatters.ts

@@ -0,0 +1,13 @@
+import { TooltipFormatterParams } from './types';
+
+export const tooltipFormatter = ({
+  marker,
+  name,
+  value,
+  currency,
+  lang,
+}: TooltipFormatterParams) => `
+<div>
+  <div style="margin-bottom:5px;">${currency} ${lang('vs')} ${name}</div>
+  <div style="display:flex;align-items:center;">${marker} ${value}%</div>
+</div>`;

package/src/CurrencyStrengthWidget/components/Chart/getOption.ts

@@ -0,0 +1,109 @@
+import { getGridLines } from '@oanda/labs-widget-common';
+import {
+  CHART_HEIGHT,
+  CHART_WIDTH,
+  X_LABEL_SIZE,
+  Y_LABEL_SIZE,
+  darkBarColors,
+  lightBarColors,
+} from './constants';
+import { GetOptionProps } from './types';
+import { tooltipFormatter } from './formatters';
+
+export const getOption = ({
+  values, currency, isDark, lang,
+}: GetOptionProps) => {
+  const currencies = values.map((item) => item.currency);
+  const percentages = values.map((item) => item.percentage);
+  const barColors = isDark ? darkBarColors : lightBarColors;
+
+  const gridLines = getGridLines({
+    isDark,
+    chartWidth: CHART_WIDTH,
+    chartHeight: CHART_HEIGHT,
+    xLabelsSize: -2,
+    yLabelSize: -3,
+  });
+
+  return {
+    animation: false,
+    title: {
+      left: 'center',
+      text: `${currency} vs`,
+      textStyle: {
+        fontSize: 12,
+        lineHeight: 20,
+        fontWeight: 400,
+      },
+    },
+    grid: [
+      {
+        name: 'main-grid',
+        top: '30px',
+        right: '0px',
+        left: `${Y_LABEL_SIZE}px`,
+        bottom: `${X_LABEL_SIZE}px`,
+      },
+    ],
+    graphic: [
+      ...gridLines,
+    ],
+    tooltip: {
+      trigger: 'axis',
+      formatter: (
+        [{ marker, name, value }]
+        : { marker: string, name: string, value: number }[],
+      ) => tooltipFormatter({
+        lang,
+        currency,
+        marker,
+        name,
+        value,
+      }),
+      axisPointer: {
+        axis: 'x',
+      },
+      extraCssText: 'z-index: 1',
+    },
+    xAxis: {
+      type: 'category',
+      data: currencies,
+      axisTick: { show: false },
+      axisLine: { show: false },
+      splitLine: { show: false },
+      axisLabel: {
+        fontSize: 10,
+      },
+    },
+    yAxis: {
+      type: 'value',
+      position: 'left',
+      min: Math.floor(Math.min(...percentages)),
+      max: Math.ceil(Math.max(...percentages)),
+      interval: 1,
+      axisLine: { show: false },
+      axisTick: { show: false },
+      axisLabel: {
+        formatter: '{value}%',
+        fontSize: 10,
+      },
+    },
+    series: [
+      {
+        data: percentages,
+        type: 'bar',
+        itemStyle: {
+          color: ({ data } : { data: number }) => {
+            if (data > 0) {
+              return barColors.positive;
+            }
+            if (data < 0) {
+              return barColors.negative;
+            }
+            return barColors.zero;
+          },
+        },
+      },
+    ],
+  };
+};

package/src/CurrencyStrengthWidget/components/Chart/index.ts

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