@oanda/labs-instruments-price-chart-widget 1.0.13 → 1.0.14

package/src/InstrumentsPriceChartWidget/Main.tsx

@@ -1,46 +1,72 @@
+import { useQuery } from '@apollo/client';
 import {
+  ChartError,
   Spinner,
   SpinnerSize,
   TimeUnitSwitch,
 } from '@oanda/labs-widget-common';
 import React, { useState } from 'react';
 
+import { priceCandles } from '../gql/priceCandles';
+import {
+  type PriceCandlesQuery,
+  type PriceCandlesQueryVariables,
+  TimeSpan,
+} from '../gql/types/graphql';
 import { Chart } from './components/Chart';
+import { TimeZoneLabel } from './components/TimeZoneLabel';
 import { timeUnitConfig } from './config';
-import { getPriceCandlesMock } from './getPriceCandlesMock';
-import { type MainProps, TimeSpanSubset } from './types';
+import { type MainProps } from './types';
+import { getCandles, getGranularityForTimeSpan } from './utils';
 
-const Main = ({ division }: MainProps) => {
-  const [selectedTimeUnit, setSelectedTimeUnit] = useState(
-    TimeSpanSubset.Day_1
-  );
+const Main = ({ division, instrument, dataSource }: MainProps) => {
+  const [selectedTimeUnit, setSelectedTimeUnit] = useState(TimeSpan.Day_1);
 
-  const { loading, data, error } = getPriceCandlesMock({ division });
+  const { loading, data, error } = useQuery<
+    PriceCandlesQuery,
+    PriceCandlesQueryVariables
+  >(priceCandles, {
+    variables: {
+      dataSource,
+      division,
+      instrument,
+      granularity: getGranularityForTimeSpan(selectedTimeUnit),
+      timeSpan: selectedTimeUnit,
+    },
+    fetchPolicy: 'cache-and-network',
+  });
 
-  const showError =
-    data?.getPriceCandles.length === 0 || !data?.getPriceCandles || !!error;
+  const candles = getCandles(data);
+  const showError = candles?.length === 0 || !candles || !!error;
 
   return (
     <div data-testid="instruments-price-chart-wrapper">
+      <div className="lw-flex lw-pt-2">
+        <TimeUnitSwitch<TimeSpan>
+          callback={setSelectedTimeUnit}
+          options={timeUnitConfig}
+          selected={selectedTimeUnit}
+        />
+      </div>
+
       {loading && (
-        <div className="lw-mb-[50px] lw-flex lw-h-[425px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary">
+        <div className="lw-flex lw-h-[425px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary">
           <Spinner size={SpinnerSize.lg} />
         </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>
+      )}
+
       {!loading && !showError && (
         <div data-testid="instruments-price-chart-widget">
-          <div className="lw-flex lw-pt-2">
-            <TimeUnitSwitch<TimeSpanSubset>
-              callback={setSelectedTimeUnit}
-              options={timeUnitConfig}
-              selected={selectedTimeUnit}
-            />
-          </div>
-
-          <Chart values={data?.getPriceCandles} />
+          <Chart timeSpan={selectedTimeUnit} values={candles} />
         </div>
       )}
+      <TimeZoneLabel />
     </div>
   );
 };

package/src/InstrumentsPriceChartWidget/components/Chart.tsx

@@ -33,7 +33,7 @@ echarts.use([
 echarts.registerTheme('dark_theme', getChartTheme(Theme.Dark));
 echarts.registerTheme('light_theme', getChartTheme(Theme.Light));
 
-export const Chart = ({ values }: ChartProps) => {
+export const Chart = ({ values, timeSpan }: ChartProps) => {
   const { isDark } = useLayoutProvider();
   const { lang } = useLocale();
 
@@ -46,6 +46,7 @@ export const Chart = ({ values }: ChartProps) => {
         values,
         isDark,
         lang,
+        timeSpan,
       })}
     />
   );

package/src/InstrumentsPriceChartWidget/components/TimeZoneLabel.tsx

@@ -0,0 +1,24 @@
+import { useLocale } from '@oanda/mono-i18n';
+import React from 'react';
+
+const getBrowserOffsetLabel = (): string => {
+  const parts = new Intl.DateTimeFormat(undefined, {
+    timeZoneName: 'longOffset',
+  }).formatToParts(new Date());
+
+  const tzPart = parts.find((p) => p.type === 'timeZoneName');
+  return tzPart ? tzPart.value : '';
+};
+
+export const TimeZoneLabel = () => {
+  const { lang } = useLocale();
+
+  return (
+    <span
+      className="lw-ml-1 lw-font-sans lw-text-xs lw-font-bold"
+      data-testid="timezone-label"
+    >{`${lang('timezone_display', {
+      timezone: getBrowserOffsetLabel(),
+    })}`}</span>
+  );
+};

package/src/InstrumentsPriceChartWidget/components/formatters.ts

@@ -1,21 +1,80 @@
-import {
-  chartDateTimeFormat,
-  getChartDateAndTime,
-} from '@oanda/labs-widget-common';
-
+import { TimeSpan } from '../../gql/types/graphql';
 import type { TooltipFormatterParams } from './types';
 
-export const dailyFormatter = (timestamp: string) => {
-  const date = new Date(timestamp);
-  return date.toLocaleTimeString(undefined, {
-    hour: 'numeric',
-    hour12: true,
-  });
+export const showSplitLine = (index: number, total: number): boolean => {
+  const interval = Math.max(1, Math.floor(total / 6));
+  return index % interval === 0;
+};
+
+const showChartIntervalLabel = (
+  timeSpan: TimeSpan,
+  values: { point: string }[],
+  index: number
+): boolean => {
+  const date = new Date(values[index].point);
+  const labelInterval = Math.max(1, Math.floor(values.length / 6));
+
+  if (
+    timeSpan === TimeSpan.Month_6 ||
+    timeSpan === TimeSpan.Year_1 ||
+    timeSpan === TimeSpan.Year_5
+  ) {
+    const prev = index > 0 ? new Date(values[index - 1].point) : null;
+    const monthChanged =
+      !prev ||
+      date.getMonth() !== prev.getMonth() ||
+      date.getFullYear() !== prev.getFullYear();
+
+    return monthChanged;
+  }
+
+  return index % labelInterval === 0;
 };
 
+export const labelFormatter =
+  (timeSpan: TimeSpan, values: { point: string }[]) =>
+  (_: string, index: number): string => {
+    const date = new Date(values[index].point);
+
+    if (!showChartIntervalLabel(timeSpan, values, index)) return '';
+
+    switch (timeSpan) {
+      case TimeSpan.Day_1:
+        const hour = date.getHours();
+        return `${String(hour).padStart(2, '0')}:00`;
+
+      case TimeSpan.Week_1:
+      case TimeSpan.Month_1:
+        return date.toLocaleDateString(undefined, {
+          day: '2-digit',
+          month: 'short',
+        });
+
+      case TimeSpan.Month_6:
+      case TimeSpan.Year_1:
+      case TimeSpan.Year_5:
+        return date.toLocaleDateString(undefined, {
+          month: 'short',
+        });
+
+      default:
+        return '';
+    }
+  };
+
+const chartDateTimeFormat = (iso: string) =>
+  new Date(iso).toLocaleString(undefined, {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  });
+
 export const tooltipFormatter = ({ lang, data }: TooltipFormatterParams) => {
-  const { open, high, close, low, time } = data;
-  const date = chartDateTimeFormat(getChartDateAndTime(time));
+  const { open, high, close, low, point } = data;
+  const date = chartDateTimeFormat(point);
 
   return `
     <div style="display:flex; flex-direction:column;">

package/src/InstrumentsPriceChartWidget/components/getOption.ts

@@ -11,15 +11,16 @@ import {
   X_LABEL_SIZE,
   Y_LABEL_SIZE_DESKTOP,
 } from './constants';
-import { dailyFormatter, tooltipFormatter } from './formatters';
+import { labelFormatter, showSplitLine, tooltipFormatter } from './formatters';
 import type { ChartValue, GetOptionType } from './types';
 
-export const getOption: GetOptionType = ({ values, isDark, lang }) => {
-  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));
+export const getOption: GetOptionType = ({
+  values,
+  isDark,
+  lang,
+  timeSpan,
+}) => {
+  const priceValues = values.map((d) => d.high);
 
   const gridLines = getGridLines({
     isDark,
@@ -31,6 +32,7 @@ export const getOption: GetOptionType = ({ values, isDark, lang }) => {
   });
 
   return {
+    animation: false,
     tooltip: {
       trigger: 'axis',
       axisPointer: {
@@ -39,7 +41,7 @@ export const getOption: GetOptionType = ({ values, isDark, lang }) => {
       formatter: (params) => {
         const p = Array.isArray(params) ? params[0] : params;
         const data = p.data as {
-          time: string;
+          point: string;
           open: number;
           high: number;
           low: number;
@@ -52,19 +54,16 @@ export const getOption: GetOptionType = ({ values, isDark, lang }) => {
     xAxis: {
       type: 'category',
       boundaryGap: false,
-      data: timestamps,
-      axisTick: {
-        show: false,
-      },
+      data: values.map((d) => d.point),
+      axisTick: { show: false },
       axisLabel: {
-        margin: 10,
-        interval: (index: number) => index % labelInterval === 0,
-        formatter: (value: string, index: number) =>
-          index % labelInterval === 0 ? value : '',
+        padding: [0, 0, 0, 30],
+        interval: 'auto',
+        formatter: labelFormatter(timeSpan, values),
       },
       splitLine: {
         show: true,
-        interval: (index: number) => index % labelInterval === 0,
+        interval: (index: number) => showSplitLine(index, values.length),
       },
     },
     yAxis: {
@@ -78,7 +77,7 @@ export const getOption: GetOptionType = ({ values, isDark, lang }) => {
       axisLine: { show: false },
       axisTick: { show: false },
       axisLabel: {
-        margin: 8,
+        margin: 10,
         formatter: (value: number) => {
           const dataMin = Math.floor(Math.min(...priceValues) * 100) / 100;
           const dataMax = Math.ceil(Math.max(...priceValues) * 100) / 100;
@@ -97,9 +96,9 @@ export const getOption: GetOptionType = ({ values, isDark, lang }) => {
         name: 'price-close',
         type: 'line',
         data: values.map((d) => ({
-          value: d.candle.high,
-          ...d.candle,
-          time: d.time,
+          value: d.high,
+          ...d,
+          time: d.point,
         })),
         smooth: true,
         symbol: 'none',

package/src/InstrumentsPriceChartWidget/components/types.ts

@@ -1,15 +1,17 @@
 import type { EChartsOption } from 'echarts';
 
-import type { CandlesData } from '../../gql/types/graphql';
+import type { Candle, TimeSpan } from '../../gql/types/graphql';
 
 export interface ChartProps {
-  values: CandlesData[];
+  values: Candle[];
+  timeSpan: TimeSpan;
 }
 
 export interface GetOptionProps {
-  values: CandlesData[];
+  values: Candle[];
   isDark: boolean;
   lang: (label: string) => string;
+  timeSpan: TimeSpan;
 }
 
 export type GetOptionType = (props: GetOptionProps) => EChartsOption;
@@ -20,7 +22,7 @@ export interface ChartValue {
 }
 
 export interface TooltipData {
-  time: string;
+  point: string;
   open: number;
   high: number;
   low: number;

package/src/InstrumentsPriceChartWidget/config.ts

@@ -1,8 +1,9 @@
-import { TimeSpanSubset } from './types';
+import { Granularity, TimeSpan } from '../gql/types/graphql';
+import type { TimeSpanSubset } from './types';
 
 const timeUnitConfig = [
   {
-    value: TimeSpanSubset.Day_1,
+    value: TimeSpan.Day_1,
     label: '1d',
     tooltipLabel: {
       translationKey: 'day',
@@ -10,7 +11,7 @@ const timeUnitConfig = [
     },
   },
   {
-    value: TimeSpanSubset.Week_1,
+    value: TimeSpan.Week_1,
     label: '1w',
     tooltipLabel: {
       translationKey: 'week',
@@ -18,7 +19,7 @@ const timeUnitConfig = [
     },
   },
   {
-    value: TimeSpanSubset.Month_1,
+    value: TimeSpan.Month_1,
     label: '1m',
     tooltipLabel: {
       translationKey: 'month',
@@ -27,7 +28,7 @@ const timeUnitConfig = [
   },
 
   {
-    value: TimeSpanSubset.Month_6,
+    value: TimeSpan.Month_6,
     label: '6m',
     tooltipLabel: {
       translationKey: 'month',
@@ -35,7 +36,7 @@ const timeUnitConfig = [
     },
   },
   {
-    value: TimeSpanSubset.Year_1,
+    value: TimeSpan.Year_1,
     label: '1y',
     tooltipLabel: {
       translationKey: 'year',
@@ -44,4 +45,12 @@ const timeUnitConfig = [
   },
 ];
 
-export { timeUnitConfig };
+const granularityForTimeSpan: Record<TimeSpanSubset, Granularity> = {
+  [TimeSpan.Day_1]: Granularity.H1,
+  [TimeSpan.Week_1]: Granularity.H4,
+  [TimeSpan.Month_1]: Granularity.D1,
+  [TimeSpan.Month_6]: Granularity.D1,
+  [TimeSpan.Year_1]: Granularity.D1,
+};
+
+export { granularityForTimeSpan, timeUnitConfig };

package/src/InstrumentsPriceChartWidget/render.tsx

@@ -3,7 +3,7 @@ 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 { Division, InstrumentDataSource } from '../gql/types/graphql';
 import { InstrumentsPriceChartWidget } from './InstrumentsPriceChartWidget';
 
 const { graphqlUrl } = window.widgetsConfig || {};
@@ -16,13 +16,16 @@ 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 { division, locale, instrument, dataSource } = JSON.parse(
+    params as string
+  );
 
   const isParamError = validateToolParams(
     {
       division,
       locale,
       graphqlUrl,
+      dataSource,
     },
     [
       {
@@ -37,13 +40,20 @@ dataInstrumentsPriceChartParamsElements.forEach((element) => {
       {
         name: 'graphqlUrl',
       },
+      {
+        name: 'dataSource',
+        valueCheck: (value: InstrumentDataSource) =>
+          Object.values(InstrumentDataSource).includes(value),
+      },
     ]
   );
 
   root.render(
     <InstrumentsPriceChartWidget
+      dataSource={dataSource}
       division={division}
       graphqlUrl={graphqlUrl}
+      instrument={instrument}
       isParamError={isParamError}
       locale={locale}
       theme={mode as Theme}

package/src/InstrumentsPriceChartWidget/types.ts

@@ -1,14 +1,18 @@
 import type { WidgetConfig } from '@oanda/labs-widget-common';
 
-import type { Division } from '../gql/types/graphql';
+import type { Division, InstrumentDataSource } from '../gql/types/graphql';
 import { TimeSpan } from '../gql/types/graphql';
 
 export interface InstrumentsPriceChartConfig extends WidgetConfig {
   division: Division;
+  instrument: string;
+  dataSource: InstrumentDataSource;
 }
 
 export interface MainProps {
   division: Division;
+  instrument: string;
+  dataSource: InstrumentDataSource;
 }
 
 export enum TimeSpanSubset {

package/src/InstrumentsPriceChartWidget/utils.ts

@@ -0,0 +1,16 @@
+import type {
+  Candle,
+  Granularity,
+  PriceCandlesQuery,
+  TimeSpan,
+} from '../gql/types/graphql';
+import { granularityForTimeSpan } from './config';
+import type { TimeSpanSubset } from './types';
+
+export const getGranularityForTimeSpan = (timeSpan: TimeSpan): Granularity =>
+  granularityForTimeSpan[timeSpan as unknown as TimeSpanSubset];
+
+export const getCandles = (
+  data: PriceCandlesQuery | undefined
+): Candle[] | undefined =>
+  data?.priceCandles.candle.filter((c): c is Candle => c !== null);

package/src/gql/{mock/getPriceCandles.ts → priceCandles.ts}

@@ -1,21 +1,22 @@
 import { gql } from '@apollo/client';
 
-const getPriceCandles = gql`
-  query GetPriceCandles(
-    $division: Division
+const priceCandles = gql`
+  query PriceCandles(
+    $division: Division!
+    $dataSource: InstrumentDataSource!
     $instrument: String!
     $granularity: Granularity!
     $timeSpan: TimeSpan!
   ) {
-    getPriceCandles(
+    priceCandles(
       division: $division
+      dataSource: $dataSource
       instrument: $instrument
       granularity: $granularity
       timeSpan: $timeSpan
     ) {
-      time
-      unixTime
       candle {
+        point
         high
         low
         open
@@ -26,4 +27,4 @@ const getPriceCandles = gql`
   }
 `;
 
-export { getPriceCandles };
+export { priceCandles };

package/src/gql/types/gql.ts

@@ -13,8 +13,8 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * 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        low\n        open\n        close\n      }\n      timeSpan\n    }\n  }\n':
-    types.GetPriceCandlesDocument,
+  '\n  query PriceCandles(\n    $division: Division!\n    $dataSource: InstrumentDataSource!\n    $instrument: String!\n    $granularity: Granularity!\n    $timeSpan: TimeSpan!\n  ) {\n    priceCandles(\n      division: $division\n      dataSource: $dataSource\n      instrument: $instrument\n      granularity: $granularity\n      timeSpan: $timeSpan\n    ) {\n      candle {\n        point\n        high\n        low\n        open\n        close\n      }\n      timeSpan\n    }\n  }\n':
+    types.PriceCandlesDocument,
   '\n  query validateInstruments($instruments: [String]!, $division: Division) {\n    mapInstrumentNames(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n':
     types.ValidateInstrumentsDocument,
 };
@@ -37,8 +37,8 @@ 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        low\n        open\n        close\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        low\n        open\n        close\n      }\n      timeSpan\n    }\n  }\n'];
+  source: '\n  query PriceCandles(\n    $division: Division!\n    $dataSource: InstrumentDataSource!\n    $instrument: String!\n    $granularity: Granularity!\n    $timeSpan: TimeSpan!\n  ) {\n    priceCandles(\n      division: $division\n      dataSource: $dataSource\n      instrument: $instrument\n      granularity: $granularity\n      timeSpan: $timeSpan\n    ) {\n      candle {\n        point\n        high\n        low\n        open\n        close\n      }\n      timeSpan\n    }\n  }\n'
+): (typeof documents)['\n  query PriceCandles(\n    $division: Division!\n    $dataSource: InstrumentDataSource!\n    $instrument: String!\n    $granularity: Granularity!\n    $timeSpan: TimeSpan!\n  ) {\n    priceCandles(\n      division: $division\n      dataSource: $dataSource\n      instrument: $instrument\n      granularity: $granularity\n      timeSpan: $timeSpan\n    ) {\n      candle {\n        point\n        high\n        low\n        open\n        close\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.
  */