@oanda/labs-instrument-live-rate-widget 1.0.1

package/src/InstrumentLiveRateWidget/components/InstrumentRateWithData/InstrumentRateWithData.tsx

@@ -0,0 +1,92 @@
+import React, { useContext } from 'react';
+import {
+  LabelWrapper, Price, ThemeContext, Truncate,
+} from '@oanda/labs-widget-common';
+import classNames from 'classnames';
+import { InstrumentRateWithDataProps } from '../../types';
+import { LineChartWithData } from '../LineChartWithData';
+import { useRecords } from '../../utils';
+import { INSTRUMENT_TOOLTIP_ID } from '../../constant';
+import { getChartColor, getColorIndicator } from './utils';
+
+const InstrumentRateWithData = ({
+  loading,
+  record,
+  target,
+  division,
+  size = 'fullWithChart',
+}: InstrumentRateWithDataProps) => {
+  const { isDark } = useContext(ThemeContext);
+  const { updatedRecord, error } = useRecords(record, record.instrument ? target : null);
+
+  const checkLoading = (id: string) => loading || (!error && updatedRecord?.[id] === undefined);
+
+  const indicator = getColorIndicator(updatedRecord.dailyPercentChange);
+
+  return (
+    <div className="lw-flex lw-flex-col lw-px-4 lw-pb-1 lw-pt-2">
+      <div className="lw-flex lw-items-center lw-gap-x-2">
+        <LabelWrapper
+          isLoading={checkLoading('instrument')}
+          isError={!!error}
+        >
+          <span className="lw-text-xl lw-font-bold">
+            <Truncate maxWidth={130} text={record.displayName} tooltipId={INSTRUMENT_TOOLTIP_ID} />
+          </span>
+        </LabelWrapper>
+        <LabelWrapper
+          isLoading={checkLoading('buy')}
+          isError={!!error}
+        >
+          <div className="lw-text-xl lw-font-bold">
+            <Price priceMovement={updatedRecord.buyPriceMovement} withoutArrow>
+              <span>{updatedRecord.buy?.toFixed(updatedRecord.displayPrecision)}</span>
+            </Price>
+          </div>
+        </LabelWrapper>
+      </div>
+      {size !== 'compact'
+        && (
+        <div className="lw-mt-1 lw-flex lw-items-center lw-gap-x-2">
+          <LabelWrapper
+            isLoading={checkLoading('dailyPercentChange')}
+            isError={!!error}
+          >
+            <span className={classNames('lw-font-bold', {
+              'lw-text-text-ok': indicator > 0,
+              'lw-text-text-danger': indicator < 0,
+              'lw-text-text-disabled': indicator === 0,
+            })}
+            >
+              {updatedRecord.dailyPercentChange}
+            </span>
+
+          </LabelWrapper>
+          <LabelWrapper
+            isLoading={checkLoading('dailyPipsChange')}
+            isError={!!error}
+          >
+            <span className={classNames('lw-font-bold', {
+              'lw-text-text-ok': indicator > 0,
+              'lw-text-text-danger': indicator < 0,
+              'lw-text-text-disabled': indicator === 0,
+            })}
+            >
+              {`(${updatedRecord.dailyPipsChange})`}
+            </span>
+          </LabelWrapper>
+          {size === 'fullWithChart' && (
+          <LineChartWithData
+            record={updatedRecord}
+            isLoading={checkLoading('instrument')}
+            division={division}
+            color={getChartColor(indicator, isDark)}
+          />
+          )}
+        </div>
+        )}
+    </div>
+  );
+};
+
+export { InstrumentRateWithData };

package/src/InstrumentLiveRateWidget/components/InstrumentRateWithData/index.ts

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

package/src/InstrumentLiveRateWidget/components/InstrumentRateWithData/utils.ts

@@ -0,0 +1,25 @@
+import { lightTheme, darkTheme } from '@oanda/labs-widget-common';
+
+const getColorIndicator = (dailyChange?: string) => {
+  const numberValue = Number(dailyChange?.substring(0, dailyChange.length - 1));
+
+  return Math.sign(numberValue);
+};
+
+const getChartColor = (indicator?: number, isDarkMode?: boolean) => {
+  const theme = isDarkMode ? darkTheme : lightTheme;
+
+  switch (indicator) {
+    case 1:
+      return theme.textOk;
+    case -1:
+      return theme.textDanger;
+    default:
+      return theme.textDisabled;
+  }
+};
+
+export {
+  getColorIndicator,
+  getChartColor,
+};

package/src/InstrumentLiveRateWidget/components/LineChartWithData/LineChartWithData.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { useQuery } from '@apollo/client';
+import {
+  LineChart, Loader, LoaderSize,
+} from '@oanda/labs-widget-common';
+import { LineChartWithDataProps } from './types';
+import { getInstrumentsChart } from '../../../gql/getInstrumentsChart';
+import { GetInstrumentsChartQuery, GetInstrumentsChartQueryVariables } from '../../../gql/types/graphql';
+
+const LineChartWithData = ({
+  padding,
+  record,
+  size,
+  isLoading,
+  division,
+  color,
+}: LineChartWithDataProps) => {
+  const { loading, data } = useQuery<
+  GetInstrumentsChartQuery,
+  GetInstrumentsChartQueryVariables
+  >(getInstrumentsChart, {
+    variables: {
+      instruments: [record.instrument],
+      division,
+    },
+    fetchPolicy: 'network-only',
+    skip: !record.instrument,
+  });
+
+  const showLoader = isLoading || loading;
+  const chart = data?.topicalInstrumentsCharts?.[0].chart || [];
+
+  return (
+    <>
+      {showLoader && <Loader size={LoaderSize.md} />}
+      {!showLoader && (
+        <LineChart
+          padding={padding}
+          size={size}
+          color={color}
+          data={chart}
+        />
+      )}
+    </>
+  );
+};
+
+export { LineChartWithData };

package/src/InstrumentLiveRateWidget/components/LineChartWithData/index.ts

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

package/src/InstrumentLiveRateWidget/components/LineChartWithData/types.tsx

@@ -0,0 +1,12 @@
+import { LineChartSize } from '@oanda/labs-widget-common';
+import { DataRecord } from '../../types';
+import { Division } from '../../../gql/types/graphql';
+
+export interface LineChartWithDataProps {
+  padding?: number;
+  record: DataRecord;
+  size?: LineChartSize;
+  isLoading: boolean;
+  division: Division;
+  color: string;
+}

package/src/InstrumentLiveRateWidget/components/index.ts

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

package/src/InstrumentLiveRateWidget/constant.ts

@@ -0,0 +1,5 @@
+const INSTRUMENT_TOOLTIP_ID = 'instrument_tooltip_id';
+
+export {
+  INSTRUMENT_TOOLTIP_ID,
+};

package/src/InstrumentLiveRateWidget/render.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { Theme, validateLocale, validateToolParams } from '@oanda/labs-widget-common';
+import { InstrumentLiveRateWidget } from './InstrumentLiveRateWidget';
+import { Division } from '../gql/types/graphql';
+
+const {
+  graphqlUrl,
+  liveRatesUrl,
+} = window.widgetsConfig || {};
+
+const instrumentLiveRateElements = document.querySelectorAll('div[data-instrument-live-rate-params]');
+
+instrumentLiveRateElements.forEach((element) => {
+  const root = createRoot(element);
+  const params = element.getAttribute('data-instrument-live-rate-params');
+  const mode = element.getAttribute('data-mode');
+  const {
+    instrument, division, locale, size,
+  } = JSON.parse(params as string);
+
+  const isParamError = validateToolParams({
+    division, locale, graphqlUrl, liveRatesUrl,
+  }, [{
+    name: 'locale',
+    valueCheck: (value) => validateLocale(value),
+  }, {
+    name: 'division',
+    valueCheck: (value) => Object.values(Division).includes(value),
+  }, {
+    name: 'graphqlUrl',
+  }, {
+    name: 'liveRatesUrl',
+  }]);
+
+  root.render(
+    <InstrumentLiveRateWidget
+      graphqlUrl={graphqlUrl}
+      liveRatesUrl={liveRatesUrl}
+      division={division}
+      instrument={instrument}
+      locale={locale}
+      theme={mode as Theme}
+      isParamError={isParamError}
+      size={size}
+    />,
+  );
+});

package/src/InstrumentLiveRateWidget/types.tsx

@@ -0,0 +1,50 @@
+import { Locale } from '@oanda/mono-i18n';
+import { Theme } from '@oanda/labs-widget-common';
+import { Division } from '../gql/types/graphql';
+
+export { Locale } from '@oanda/mono-i18n';
+export { Division } from '../gql/types/graphql';
+
+export interface InstrumentLiveRateConfig {
+  graphqlUrl: string;
+  division: Division;
+  liveRatesUrl: string;
+  instrument: string;
+  locale: Locale;
+  theme?: Theme;
+  isParamError?: boolean;
+  removePadding?: boolean;
+  size?: 'compact' | 'full' | 'fullWithChart';
+}
+
+export interface MainProps {
+  instrument: string;
+  division: Division;
+  size?: 'compact' | 'full' | 'fullWithChart'
+}
+
+export interface Sentiment {
+  shortPercent: number;
+  longPercent: number;
+}
+
+export type EmptyRecord = Record<any, never>;
+
+export interface DataRecord {
+  [key: string]: string | number | undefined;
+  instrument: string;
+  displayName: string;
+  buy?: number;
+  buyPriceMovement?: number;
+  dailyPercentChange?: string;
+  dailyPipsChange?: number;
+  displayPrecision?: number;
+}
+
+export interface InstrumentRateWithDataProps {
+  loading: boolean;
+  record: DataRecord;
+  target: EventTarget | null;
+  division: Division;
+  size?: 'compact' | 'full' | 'fullWithChart'
+}

package/src/InstrumentLiveRateWidget/utils.ts

@@ -0,0 +1,49 @@
+import { useState, useEffect } from 'react';
+import { LiveRatesErrorMessage, useLiveRatesMessage } from '@oanda/labs-widget-common';
+import { DataRecord, EmptyRecord } from './types';
+import { ValidateInstrumentsQuery } from '../gql/types/graphql';
+
+const getRecords = (data: ValidateInstrumentsQuery) => data?.mapInstrumentNames?.map((item) => ({
+  instrument: item?.name || '',
+  displayName: item?.displayName || '',
+}));
+
+const useRecords = (
+  record: DataRecord | EmptyRecord,
+  target: EventTarget | null,
+) => {
+  const [updatedRecord, setUpdatedRecord] = useState<DataRecord>({
+    displayName: record.displayName,
+    instrument: record.instrument,
+    sentiment: record.sentiment,
+  });
+  const [error, setError] = useState<LiveRatesErrorMessage | null>(null);
+
+  const { update, error: liveRatesError } = useLiveRatesMessage(
+    record.instrument,
+    target,
+  );
+
+  useEffect(() => {
+    setUpdatedRecord({
+      displayName: record.displayName,
+      instrument: record.instrument,
+      buy: update?.bid,
+      buyPriceMovement: update?.bidPriceMovement,
+      dailyPercentChange: update?.dailyPercentChangeFromOpen,
+      dailyPipsChange: update?.dailyPipsChangeFromOpen,
+      displayPrecision: update?.displayPrecision,
+    });
+    setError(liveRatesError);
+  }, [update, record, liveRatesError]);
+
+  return {
+    updatedRecord,
+    error,
+  };
+};
+
+export {
+  getRecords,
+  useRecords,
+};

package/src/gql/getInstrumentsChart.ts

@@ -0,0 +1,10 @@
+import { gql } from '@apollo/client';
+
+export const getInstrumentsChart = gql`
+  query GetInstrumentsChart($instruments: [String!], $division: Division) {
+    topicalInstrumentsCharts(instruments: $instruments, division: $division) {
+      name
+      chart
+    }
+  }
+`;

package/src/gql/types/fragment-masking.ts

@@ -0,0 +1,66 @@
+import { ResultOf, DocumentTypeDecoration, TypedDocumentNode } from '@graphql-typed-document-node/core';
+import { FragmentDefinitionNode } from 'graphql';
+import { Incremental } from './graphql';
+
+
+export type FragmentType<TDocumentType extends DocumentTypeDecoration<any, any>> = TDocumentType extends DocumentTypeDecoration<
+  infer TType,
+  any
+>
+  ? [TType] extends [{ ' $fragmentName'?: infer TKey }]
+    ? TKey extends string
+      ? { ' $fragmentRefs'?: { [key in TKey]: TType } }
+      : never
+    : never
+  : never;
+
+// return non-nullable if `fragmentType` is non-nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>>
+): TType;
+// return nullable if `fragmentType` is nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | null | undefined
+): TType | null | undefined;
+// return array of non-nullable if `fragmentType` is array of non-nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>
+): ReadonlyArray<TType>;
+// return array of nullable if `fragmentType` is array of nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
+): ReadonlyArray<TType> | null | undefined;
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
+): TType | ReadonlyArray<TType> | null | undefined {
+  return fragmentType as any;
+}
+
+
+export function makeFragmentData<
+  F extends DocumentTypeDecoration<any, any>,
+  FT extends ResultOf<F>
+>(data: FT, _fragment: F): FragmentType<F> {
+  return data as FragmentType<F>;
+}
+export function isFragmentReady<TQuery, TFrag>(
+  queryNode: DocumentTypeDecoration<TQuery, any>,
+  fragmentNode: TypedDocumentNode<TFrag>,
+  data: FragmentType<TypedDocumentNode<Incremental<TFrag>, any>> | null | undefined
+): data is FragmentType<typeof fragmentNode> {
+  const deferredFields = (queryNode as { __meta__?: { deferredFields: Record<string, (keyof TFrag)[]> } }).__meta__
+    ?.deferredFields;
+
+  if (!deferredFields) return true;
+
+  const fragDef = fragmentNode.definitions[0] as FragmentDefinitionNode | undefined;
+  const fragName = fragDef?.name?.value;
+
+  const fields = (fragName && deferredFields[fragName]) || [];
+  return fields.length > 0 && fields.every(field => data && field in data);
+}

package/src/gql/types/gql.ts

@@ -0,0 +1,47 @@
+/* eslint-disable */
+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.
+ */
+const documents = {
+    "\n  query GetInstrumentsChart($instruments: [String!], $division: Division) {\n    topicalInstrumentsCharts(instruments: $instruments, division: $division) {\n      name\n      chart\n    }\n  }\n": types.GetInstrumentsChartDocument,
+    "\n  query validateInstruments($instruments: [String]!, $division: Division) {\n    mapInstrumentNames(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n": types.ValidateInstrumentsDocument,
+};
+
+/**
+ * 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 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 function graphql(source: "\n  query GetInstrumentsChart($instruments: [String!], $division: Division) {\n    topicalInstrumentsCharts(instruments: $instruments, division: $division) {\n      name\n      chart\n    }\n  }\n"): (typeof documents)["\n  query GetInstrumentsChart($instruments: [String!], $division: Division) {\n    topicalInstrumentsCharts(instruments: $instruments, division: $division) {\n      name\n      chart\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  query validateInstruments($instruments: [String]!, $division: Division) {\n    mapInstrumentNames(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n"): (typeof documents)["\n  query validateInstruments($instruments: [String]!, $division: Division) {\n    mapInstrumentNames(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n"];
+
+export function graphql(source: string) {
+  return (documents as any)[source] ?? {};
+}
+
+export type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<  infer TType,  any>  ? TType  : never;