@oanda/labs-instruments-price-chart-widget 1.0.1

package/src/InstrumentsPriceChartWidget/components/getOption.ts

@@ -0,0 +1,127 @@
+import {
+  colorPalette,
+  getGridLines,
+  getLineCommons,
+} from '@oanda/labs-widget-common';
+
+import {
+  CHART_HEIGHT,
+  CHART_INTERVAL,
+  CHART_WIDTH,
+  X_LABEL_SIZE,
+  Y_LABEL_SIZE_DESKTOP,
+} from './constants';
+import { dailyFormatter } from './formatters';
+import type { ChartValue, GetOptionType } from './types';
+
+export const getOption: GetOptionType = ({ values, isDark }) => {
+  const priceValues = values.map((d) => d.candle.high);
+
+  const timestamps = values.map((d) => dailyFormatter(d.time));
+
+  const labelInterval = Math.max(1, Math.floor(timestamps.length / 6));
+
+  const gridLines = getGridLines({
+    isDark,
+    chartWidth: CHART_WIDTH,
+    chartHeight: CHART_HEIGHT,
+    xLabelsSize: X_LABEL_SIZE,
+    yLabelSize: Y_LABEL_SIZE_DESKTOP,
+    bottomLeftBox: false,
+  });
+
+  return {
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: timestamps,
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        margin: 10,
+        interval: (index: number) => index % labelInterval === 0,
+        formatter: (value: string, index: number) =>
+          index % labelInterval === 0 ? value : '',
+      },
+      splitLine: {
+        show: true,
+        interval: (index: number) => index % labelInterval === 0,
+      },
+    },
+    yAxis: {
+      type: 'value',
+      position: 'right',
+      min: (value: ChartValue) =>
+        Math.floor(value.min * 100) / 100 - CHART_INTERVAL,
+      max: (value: ChartValue) =>
+        Math.ceil(value.max * 100) / 100 + CHART_INTERVAL,
+      interval: CHART_INTERVAL,
+      axisLine: { show: false },
+      axisTick: { show: false },
+      axisLabel: {
+        margin: 8,
+        formatter: (value: number) => {
+          const dataMin = Math.floor(Math.min(...priceValues) * 100) / 100;
+          const dataMax = Math.ceil(Math.max(...priceValues) * 100) / 100;
+          if (value < dataMin || value > dataMax) {
+            return '';
+          }
+          return value.toFixed(2);
+        },
+      },
+      splitLine: {
+        show: true,
+      },
+    },
+    series: [
+      {
+        name: 'price-close',
+        type: 'line',
+        data: priceValues,
+        smooth: true,
+        symbol: 'none',
+        lineStyle: {
+          color: colorPalette.navyBlue,
+          width: 2,
+        },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: colorPalette.brightBlue30 },
+              { offset: 1, color: colorPalette.brightBlue },
+            ],
+          },
+        },
+      },
+    ],
+    grid: [
+      {
+        name: 'main-grid',
+        top: 0,
+        left: 0,
+        right: `${Y_LABEL_SIZE_DESKTOP}px`,
+        bottom: `${X_LABEL_SIZE}px`,
+      },
+    ],
+    graphic: [
+      ...gridLines,
+      {
+        ...getLineCommons(isDark),
+        top: 0,
+        right: 0,
+        shape: {
+          x1: 0,
+          y1: 0,
+          x2: 0,
+          y2: 0,
+        },
+      },
+    ],
+  };
+};

package/src/InstrumentsPriceChartWidget/components/types.ts

@@ -0,0 +1,19 @@
+import type { EChartsOption } from 'echarts';
+
+import type { CandlesData } from '../../gql/types/graphql';
+
+export interface ChartProps {
+  values: CandlesData[];
+}
+
+export interface GetOptionProps {
+  values: CandlesData[];
+  isDark: boolean;
+}
+
+export type GetOptionType = (props: GetOptionProps) => EChartsOption;
+
+export interface ChartValue {
+  min: number;
+  max: number;
+}

package/src/InstrumentsPriceChartWidget/config.ts

@@ -0,0 +1,47 @@
+import { TimeSpanSubset } from './types';
+
+const timeUnitConfig = [
+  {
+    value: TimeSpanSubset.Day_1,
+    label: '1d',
+    tooltipLabel: {
+      translationKey: 'day',
+      count: 1,
+    },
+  },
+  {
+    value: TimeSpanSubset.Week_1,
+    label: '1w',
+    tooltipLabel: {
+      translationKey: 'week',
+      count: 1,
+    },
+  },
+  {
+    value: TimeSpanSubset.Month_1,
+    label: '1m',
+    tooltipLabel: {
+      translationKey: 'month',
+      count: 1,
+    },
+  },
+
+  {
+    value: TimeSpanSubset.Month_6,
+    label: '6m',
+    tooltipLabel: {
+      translationKey: 'month',
+      count: 6,
+    },
+  },
+  {
+    value: TimeSpanSubset.Year_1,
+    label: '1y',
+    tooltipLabel: {
+      translationKey: 'year',
+      count: 1,
+    },
+  },
+];
+
+export { timeUnitConfig };

package/src/InstrumentsPriceChartWidget/index.ts

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

package/src/InstrumentsPriceChartWidget/render.tsx

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

package/src/InstrumentsPriceChartWidget/types.ts

@@ -0,0 +1,20 @@
+import type { WidgetConfig } from '@oanda/labs-widget-common';
+
+import type { Division } from '../gql/types/graphql';
+import { TimeSpan } from '../gql/types/graphql';
+
+export interface InstrumentsPriceChartConfig extends WidgetConfig {
+  division: Division;
+}
+
+export interface MainProps {
+  division: Division;
+}
+
+export enum TimeSpanSubset {
+  Day_1 = TimeSpan.Day_1,
+  Week_1 = TimeSpan.Week_1,
+  Month_1 = TimeSpan.Month_1,
+  Month_6 = TimeSpan.Month_6,
+  Year_1 = TimeSpan.Year_1,
+}

package/src/gql/mock/getPriceCandles.ts

@@ -0,0 +1,26 @@
+import { gql } from '@apollo/client';
+
+const getPriceCandles = gql`
+  query GetPriceCandles(
+    $division: Division
+    $instrument: String!
+    $granularity: Granularity!
+    $timeSpan: TimeSpan!
+  ) {
+    getPriceCandles(
+      division: $division
+      instrument: $instrument
+      granularity: $granularity
+      timeSpan: $timeSpan
+    ) {
+      time
+      unixTime
+      candle {
+        high
+      }
+      timeSpan
+    }
+  }
+`;
+
+export { getPriceCandles };

package/src/gql/mock/handlers.ts

@@ -0,0 +1,66 @@
+import { graphql, HttpResponse } from 'msw';
+
+import type { CandlesData, TimeSpan } from '../types/graphql';
+
+export const handlers = [
+  graphql.query('GetPriceCandles', ({ variables }) => {
+    const { timeSpan } = variables;
+
+    const rawCandles = generateMockCandleData(30);
+
+    const candles: CandlesData[] = rawCandles.map((candle) => ({
+      __typename: 'CandlesData',
+      time: new Date(candle.timestamp).toISOString(),
+      unixTime: Math.floor(candle.timestamp / 1000),
+      candle: {
+        __typename: 'Candle',
+        high: candle.max,
+      },
+      timeSpan: timeSpan as TimeSpan,
+    }));
+
+    return HttpResponse.json({
+      data: {
+        getPriceCandles: candles,
+      },
+    });
+  }),
+];
+
+const generateMockCandleData = (count: number = 30) => {
+  const now = Date.now();
+  const candleInterval = 30 * 60 * 1000;
+
+  let currentPrice = 1.045;
+  const spikeIndex = Math.floor(count * 0.6);
+
+  return Array.from({ length: count }, (_, i) => {
+    let trend = i < spikeIndex ? 0.0005 : -0.001;
+
+    if (i === spikeIndex) {
+      trend = 0.03;
+    }
+
+    if (i > spikeIndex + 3) {
+      trend = 0;
+    }
+
+    currentPrice += trend;
+
+    currentPrice = Math.max(1.03, Math.min(1.09, currentPrice));
+
+    const noise = (Math.random() - 0.5) * 0.0005;
+    currentPrice += noise;
+
+    const open = currentPrice;
+    const high = open + Math.random() * 0.0008;
+    const close = open + (Math.random() - 0.5) * 0.0005;
+
+    const finalHigh = Math.max(open, close, high);
+
+    return {
+      timestamp: now - (count - i) * candleInterval,
+      max: finalHigh,
+    };
+  });
+};

package/src/gql/mock/schema.graphqls

@@ -0,0 +1,59 @@
+enum TimeSpan {
+  HOUR_1
+  HOUR_12
+  DAY_1
+  DAY_2
+  WEEK_1
+  WEEK_2
+  WEEK_3
+  MONTH_1
+  MONTH_3
+  MONTH_6
+  YEAR_1
+}
+
+enum Granularity {
+  MINUTE_5
+  MINUTE_15
+  MINUTE_30
+  HOUR_1
+  HOUR_4
+  DAY_1
+}
+
+enum Division {
+  OAP
+  OAU
+  OC
+  OCAN
+  OEL
+  OGM
+  OJ
+  OPT
+  OTMS
+}
+
+type Candle {
+  high: Float!
+}
+
+type Instrument {
+  name: String!
+  displayName: String!
+}
+
+type CandlesData {
+  time: String!
+  unixTime: Int!
+  candle: Candle!
+  timeSpan: TimeSpan!
+}
+
+type Query {
+  getPriceCandles(
+    division: Division
+    instrument: String!
+    granularity: Granularity!
+    timeSpan: TimeSpan!
+  ): [CandlesData!]!
+}

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

@@ -0,0 +1,86 @@
+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,54 @@
+/* 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 GetPriceCandles(\n    $division: Division\n    $instrument: String!\n    $granularity: Granularity!\n    $timeSpan: TimeSpan!\n  ) {\n    getPriceCandles(\n      division: $division\n      instrument: $instrument\n      granularity: $granularity\n      timeSpan: $timeSpan\n    ) {\n      time\n      unixTime\n      candle {\n        high\n      }\n      timeSpan\n    }\n  }\n':
+    types.GetPriceCandlesDocument,
+  '\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 GetPriceCandles(\n    $division: Division\n    $instrument: String!\n    $granularity: Granularity!\n    $timeSpan: TimeSpan!\n  ) {\n    getPriceCandles(\n      division: $division\n      instrument: $instrument\n      granularity: $granularity\n      timeSpan: $timeSpan\n    ) {\n      time\n      unixTime\n      candle {\n        high\n      }\n      timeSpan\n    }\n  }\n'
+): (typeof documents)['\n  query GetPriceCandles(\n    $division: Division\n    $instrument: String!\n    $granularity: Granularity!\n    $timeSpan: TimeSpan!\n  ) {\n    getPriceCandles(\n      division: $division\n      instrument: $instrument\n      granularity: $granularity\n      timeSpan: $timeSpan\n    ) {\n      time\n      unixTime\n      candle {\n        high\n      }\n      timeSpan\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;