@oanda/labs-crowd-view-widget 1.0.1

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

@@ -0,0 +1,389 @@
+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>>;
+    resolveInstrumentsByDivision?: Maybe<Array<Instrument>>;
+    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 QueryResolveInstrumentsByDivisionArgs = {
+    division: Division;
+    instruments: Array<InputMaybe<Scalars['String']['input']>>;
+};
+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 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 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 './CrowdViewWidget';

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

@@ -0,0 +1,4 @@
+import type { Translations } from '@oanda/mono-i18n';
+import type { 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"],
+    "filter_langs": ["en", "zh_TW", "es", "th"]
+  }
+}

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@oanda/labs-crowd-view-widget",
+  "version": "1.0.1",
+  "description": "Labs Crowd View 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": {
+    "@oanda/labs-widget-common": "^1.0.183",
+    "@oanda/mono-i18n": "10.0.1",
+    "graphql": "16.8.1"
+  },
+  "devDependencies": {
+    "@graphql-codegen/cli": "5.0.0",
+    "@graphql-codegen/client-preset": "4.1.0"
+  },
+  "gitHead": "d3d9d7195725da2215d54d465998ad208e2ce25e"
+}

package/src/CrowdViewWidget/CrowdViewWidget.tsx

@@ -0,0 +1,40 @@
+import { ApolloClient, InMemoryCache } from '@apollo/client';
+import { WidgetProvider, WidgetWrapper } from '@oanda/labs-widget-common';
+import React from 'react';
+
+import { Division } from '../gql/types/graphql';
+import { translations } from '../translations';
+import { Main } from './Main';
+import type { CrowdViewConfig } from './types';
+
+const CrowdViewWidget = ({
+  graphqlUrl,
+  locale,
+  theme,
+  isParamError,
+  logoLink,
+}: CrowdViewConfig) => {
+  const client = new ApolloClient({
+    uri: graphqlUrl,
+    cache: new InMemoryCache(),
+  });
+
+  return (
+    <WidgetProvider
+      client={client}
+      locale={locale}
+      theme={theme}
+      translations={translations}
+    >
+      <WidgetWrapper
+        isParamError={isParamError}
+        linkArea="logo"
+        logoLink={logoLink}
+      >
+        <Main division={Division.Oc} />
+      </WidgetWrapper>
+    </WidgetProvider>
+  );
+};
+
+export { CrowdViewWidget };

package/src/CrowdViewWidget/Main.tsx

@@ -0,0 +1,91 @@
+import {
+  cn,
+  Select,
+  Size,
+  Tabs,
+  useLayoutProvider,
+  WidgetError,
+} from '@oanda/labs-widget-common';
+import { useLocale } from '@oanda/mono-i18n';
+import React, { useState } from 'react';
+
+import { BookType, Division } from '../gql/types/graphql';
+import {
+  granularitySelectConfig,
+  instrumentSelectConfig,
+  instrumentSelectConfigOC,
+  navigationConfig,
+} from './config';
+import type { GranularityId, InstrumentId, MainProps } from './types';
+
+const Main = ({ division }: MainProps) => {
+  const instrumentSelectConfigWithDivision =
+    division === Division.Oc
+      ? instrumentSelectConfigOC
+      : instrumentSelectConfig;
+
+  const { size } = useLayoutProvider();
+  const isDesktop = size === Size.DESKTOP;
+  const [bookType, setBookType] = useState(BookType.Order);
+  const [instrument, setInstrument] = useState(
+    instrumentSelectConfigWithDivision[0]
+  );
+  const [granularity, setGranularity] = useState(granularitySelectConfig[0]);
+  const { lang } = useLocale();
+
+  return (
+    <>
+      {size && (
+        <div
+          className="lw-text-sm lw-tracking-normal"
+          data-testid="crowd-view-widget"
+        >
+          <Tabs
+            mobileFullWidth
+            activeTab={bookType}
+            handleClick={(e) => setBookType(e.currentTarget.value as BookType)}
+            items={navigationConfig}
+            labelCallback={lang}
+          />
+          <div className="lw-mb-6 lw-mt-12 lw-flex">
+            <div
+              className={cn('lw-mr-2', {
+                'lw-w-full': !isDesktop,
+                'lw-w-[280px]': isDesktop,
+              })}
+            >
+              <Select
+                options={instrumentSelectConfigWithDivision}
+                searchPlaceholder={lang('search')}
+                selectLabel={lang('instrument')}
+                selectedOption={instrument}
+                setSelectedOption={(val) =>
+                  setInstrument(val as { id: InstrumentId; label: string })
+                }
+              />
+            </div>
+            <div
+              className={cn({
+                'lw-w-full': !isDesktop,
+                'lw-w-[280px]': isDesktop,
+              })}
+            >
+              <Select
+                options={granularitySelectConfig}
+                searchPlaceholder={lang('search')}
+                selectLabel={lang('granularity')}
+                selectedOption={granularity}
+                setSelectedOption={(val) =>
+                  setGranularity(val as { id: GranularityId; label: string })
+                }
+              />
+            </div>
+          </div>
+          <WidgetError />
+        </div>
+      )}
+    </>
+  );
+};
+
+export { Main };