@oanda/labs-ticker-tape-widget 1.0.1

package/src/TickerTapeWidget/components/InstrumentRateWithChart/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/TickerTapeWidget/components/LineChartWithData/LineChartWithData.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useQuery } from '@apollo/client';
+import { LineChart } from '@oanda/labs-widget-common';
+import { LineChartWithDataProps } from './types';
+import { getInstrumentsChart } from '../../../gql/getInstrumentsChart';
+import { GetInstrumentsChartQuery, GetInstrumentsChartQueryVariables } from '../../../gql/types/graphql';
+
+const LineChartWithData = ({
+  record,
+  isLoading,
+  division,
+  color,
+}: LineChartWithDataProps) => {
+  const { loading, data } = useQuery<
+  GetInstrumentsChartQuery,
+  GetInstrumentsChartQueryVariables
+  >(getInstrumentsChart, {
+    variables: {
+      instruments: [record.instrument],
+      division,
+    },
+    fetchPolicy: 'network-only',
+    skip: !record.instrument,
+  });
+
+  const showChart = isLoading || loading;
+  const chart = data?.topicalInstrumentsCharts?.[0].chart || [];
+
+  return (
+    <div className="lw-relative">
+      {!showChart ? (
+        <div className="lw-absolute lw-bottom-0 lw-right-0 lw--z-50 lw-flex lw-h-10 lw-w-[100px] lw-items-center lw-justify-center">
+          <LineChart
+            color={color}
+            data={chart}
+          />
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+export { LineChartWithData };

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

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

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

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

package/src/TickerTapeWidget/constant.ts

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

package/src/TickerTapeWidget/index.ts

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

package/src/TickerTapeWidget/render.tsx

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

package/src/TickerTapeWidget/types.tsx

@@ -0,0 +1,24 @@
+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 TickerTapeConfig {
+  graphqlUrl: string;
+  division: Division;
+  liveRatesUrl: string;
+  instruments: string[];
+  locale: Locale;
+  theme?: Theme;
+  isParamError?: boolean;
+  removePadding?: boolean;
+  size?: 'compact' | 'full' | 'fullWithChart';
+}
+
+export interface MainProps {
+  instruments: string[];
+  division: Division;
+  size?: 'compact' | 'full' | 'fullWithChart'
+}

package/src/TickerTapeWidget/utils.ts

@@ -0,0 +1,48 @@
+import { useState, useEffect } from 'react';
+import { DataRecord, LiveRatesErrorMessage, useLiveRatesMessage } from '@oanda/labs-widget-common';
+import { ValidateInstrumentsQuery } from '../gql/types/graphql';
+
+const getRecords = (data: ValidateInstrumentsQuery) => data?.mapInstrumentNames?.map((item) => ({
+  instrument: item?.name || '',
+  displayName: item?.displayName || '',
+}));
+
+const useRecords = (
+  record: DataRecord,
+  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;