@oanda/labs-currency-power-balance-widget 1.0.1

package/src/CurrencyPowerBalanceWidget/components/Chart/options/getOption.ts

@@ -0,0 +1,82 @@
+import { COLOR_CONFIG, TOOLTIP_LINE_COLOR_CONFIG, VERTICAL_LINE_COUNT } from './constants';
+import { tooltipFormatter, xAxisLabelFormatter } from './formatters';
+import { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../../gql/types/graphql';
+
+const getOption = (
+  values: CurrencyPowerBalance[],
+  timeUnit: CurrencyPowerBalanceTimeUnit,
+  isDark: boolean,
+) => {
+  const seriesData = values.map(({ currency, power }) => ({
+    name: currency,
+    type: 'line',
+    symbol: 'circle',
+    showSymbol: false,
+    itemStyle: {
+      color: COLOR_CONFIG[currency],
+    },
+    lineStyle: {
+      color: COLOR_CONFIG[currency],
+    },
+    data: power.map(({ point, price }) => [point, price]),
+  }));
+
+  const legendData = values.map(({ currency }) => ({
+    name: currency,
+    itemStyle: {
+      color: COLOR_CONFIG[currency],
+    },
+  }));
+
+  return {
+    animation: false,
+    legend: {
+      data: legendData,
+      bottom: 10,
+      icon: 'circle',
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        axis: 'x',
+        z: 0,
+        lineStyle: {
+          color: isDark ? TOOLTIP_LINE_COLOR_CONFIG.DARK : TOOLTIP_LINE_COLOR_CONFIG.LIGHT,
+        },
+      },
+      formatter: tooltipFormatter,
+    },
+    xAxis: {
+      type: 'category',
+      axisTick: {
+        show: false,
+      },
+      axisLine: { show: false },
+      splitLine: {
+        show: true,
+      },
+      axisLabel: {
+        margin: 10,
+        showMinLabel: false,
+        rotate: -45,
+        interval: Math.round(seriesData[0].data.length / VERTICAL_LINE_COUNT),
+        formatter: (label: string) => xAxisLabelFormatter(label, timeUnit),
+      },
+    },
+    yAxis: {
+      type: 'value',
+      position: 'right',
+      splitNumber: 5,
+      axisLine: { show: false },
+      axisTick: { show: false },
+      boundaryGap: ['10%', '10%'],
+      axisLabel: {
+        showMaxLabel: false,
+        showMinLabel: false,
+      },
+    },
+    series: seriesData,
+  };
+};
+
+export { getOption };

package/src/CurrencyPowerBalanceWidget/components/Chart/options/getResponsiveOption.ts

@@ -0,0 +1,45 @@
+import { getGridLines } from '@oanda/labs-widget-common';
+import {
+  CHART_HEIGHT,
+  CHART_WIDTH,
+  LEGEND_HEIGHT,
+  LEGEND_HEIGHT_MOBILE,
+  X_LABEL_SIZE,
+  X_LABEL_SIZE_MOBILE,
+  Y_LABEL_SIZE,
+  Y_LABEL_SIZE_MOBILE,
+} from './constants';
+
+const getResponsiveOption = (isDesktop: boolean, isMobile: boolean, isDark: boolean) => {
+  const baseGridLines = getGridLines({
+    isDark,
+    chartWidth: CHART_WIDTH,
+    chartHeight: CHART_HEIGHT,
+    xLabelsSize: isMobile ? X_LABEL_SIZE_MOBILE : X_LABEL_SIZE,
+    yLabelSize: isMobile ? Y_LABEL_SIZE_MOBILE : Y_LABEL_SIZE,
+    bottomLeftBox: isDesktop,
+    marginBottom: isMobile ? LEGEND_HEIGHT_MOBILE : LEGEND_HEIGHT,
+  });
+
+  return {
+    yAxis: {
+      axisLabel: {
+        margin: isDesktop ? 8 : 6,
+      },
+    },
+    grid: [
+      {
+        name: 'main-grid',
+        top: '0px',
+        left: '0px',
+        right: `${isMobile ? Y_LABEL_SIZE_MOBILE : Y_LABEL_SIZE}px`,
+        bottom: `${isMobile ? X_LABEL_SIZE_MOBILE : X_LABEL_SIZE}px`,
+      },
+    ],
+    graphic: [
+      ...baseGridLines,
+    ],
+  };
+};
+
+export { getResponsiveOption };

package/src/CurrencyPowerBalanceWidget/components/Chart/options/index.ts

@@ -0,0 +1,2 @@
+export * from './getOption';
+export * from './getResponsiveOption';

package/src/CurrencyPowerBalanceWidget/components/Chart/options/types.ts

@@ -0,0 +1,5 @@
+export interface TooltipFormatterParams {
+  marker: string;
+  seriesName: string;
+  value: string[]
+}

package/src/CurrencyPowerBalanceWidget/components/Chart/types.ts

@@ -0,0 +1,6 @@
+import { CurrencyPowerBalance, CurrencyPowerBalanceTimeUnit } from '../../../gql/types/graphql';
+
+export interface ChartProps {
+  values: CurrencyPowerBalance[];
+  timeUnit: CurrencyPowerBalanceTimeUnit;
+}

package/src/CurrencyPowerBalanceWidget/components/TimeUnitSwitch/TimeUnitSelect.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Select } from '@oanda/labs-widget-common';
+import { TimeUnitSwitchProps } from './types';
+import { CurrencyPowerBalanceTimeUnit } from '../../../gql/types/graphql';
+
+const TimeUnitSelect = ({
+  selected, options, callback,
+}: TimeUnitSwitchProps) => {
+  const selectOptions = options
+    .map(({ value: id, label, tooltip }) => ({ id, label: tooltip || label }));
+  const [{ label: selectedLabel }] = selectOptions.filter(({ id }) => id === selected);
+
+  return (
+    <div data-testid="time-unit-select" className="lw-mb-6 lw-w-full">
+      <Select
+        options={selectOptions}
+        selectedOption={{ id: selected, label: selectedLabel }}
+        setSelectedOption={({ id }) => callback(id as CurrencyPowerBalanceTimeUnit)}
+      />
+    </div>
+  );
+};
+
+export { TimeUnitSelect };

package/src/CurrencyPowerBalanceWidget/components/TimeUnitSwitch/TimeUnitSwitch.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Button, ButtonSize, ButtonVariant } from '@oanda/labs-widget-common';
+import { useMediaQuery } from 'usehooks-ts';
+import { TimeUnitSwitchProps } from './types';
+import { CurrencyPowerBalanceTimeUnit } from '../../../gql/types/graphql';
+import { CURRENCY_POWER_BALANCE_TOOLTIP_ID } from '../../constants';
+import { TimeUnitSelect } from './TimeUnitSelect';
+
+const TimeUnitSwitch = ({
+  selected, options, callback, labelCallback,
+}: TimeUnitSwitchProps) => {
+  const isDesktop = useMediaQuery('(min-width: 768px)');
+
+  const handleButtonClick = (e: React.SyntheticEvent<HTMLButtonElement>) => {
+    callback(e.currentTarget.value as CurrencyPowerBalanceTimeUnit);
+  };
+
+  return (
+    <>
+      {isDesktop
+        ? (
+          <div data-testid="time-unit-switch" className="lw-mb-6 lw-flex lw-gap-1 lw-self-end">
+            {options.map((item) => {
+              const tooltip = labelCallback && item.tooltip
+                ? labelCallback(item.tooltip)
+                : item.tooltip;
+              const label = labelCallback ? labelCallback(item.label) : item.label;
+
+              return (
+                <Button
+                  key={item.value}
+                  size={ButtonSize.full}
+                  variant={selected === item.value
+                    ? ButtonVariant.primary
+                    : ButtonVariant.secondary}
+                  onClick={handleButtonClick}
+                  value={item.value}
+                  data-tooltip-id={CURRENCY_POWER_BALANCE_TOOLTIP_ID}
+                  data-tooltip-content={tooltip}
+                >
+                  {label}
+                </Button>
+              );
+            })}
+          </div>
+        )
+        : (
+          <TimeUnitSelect
+            selected={selected}
+            callback={callback}
+            options={options}
+          />
+        )}
+    </>
+  );
+};
+
+export { TimeUnitSwitch };

package/src/CurrencyPowerBalanceWidget/components/TimeUnitSwitch/index.ts

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

package/src/CurrencyPowerBalanceWidget/components/TimeUnitSwitch/types.ts

@@ -0,0 +1,14 @@
+import { CurrencyPowerBalanceTimeUnit } from '../../../gql/types/graphql';
+
+export interface TimeUnitOption {
+  value: CurrencyPowerBalanceTimeUnit;
+  label: string;
+  tooltip?: string;
+}
+
+export interface TimeUnitSwitchProps {
+  selected: CurrencyPowerBalanceTimeUnit;
+  options: TimeUnitOption[];
+  callback: (value: CurrencyPowerBalanceTimeUnit) => void;
+  labelCallback?: (value: string) => string;
+}

package/src/CurrencyPowerBalanceWidget/config.ts

@@ -0,0 +1,30 @@
+import { CurrencyPowerBalanceTimeUnit } from '../gql/types/graphql';
+
+const timeUnitConfig = [
+  {
+    value: CurrencyPowerBalanceTimeUnit.M3,
+    label: '3m',
+    tooltip: '3_months',
+  },
+  {
+    value: CurrencyPowerBalanceTimeUnit.M1,
+    label: '1m',
+    tooltip: '1_month',
+  },
+  {
+    value: CurrencyPowerBalanceTimeUnit.W1,
+    label: '1w',
+    tooltip: '1_week',
+  },
+  {
+    value: CurrencyPowerBalanceTimeUnit.H24,
+    label: '24h',
+    tooltip: '24_months',
+  },
+  { value: CurrencyPowerBalanceTimeUnit.H8, label: '8h', tooltip: '8_hours' },
+  { value: CurrencyPowerBalanceTimeUnit.H4, label: '4h', tooltip: '4_hours' },
+  { value: CurrencyPowerBalanceTimeUnit.PreviousDay, label: 'Previous Business Day' },
+  { value: CurrencyPowerBalanceTimeUnit.CurrentDay, label: 'Current Business Day' },
+];
+
+export { timeUnitConfig };

package/src/CurrencyPowerBalanceWidget/constants.ts

@@ -0,0 +1 @@
+export const CURRENCY_POWER_BALANCE_TOOLTIP_ID = 'currency-power-balance-widget-tooltip';

package/src/CurrencyPowerBalanceWidget/index.ts

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

package/src/CurrencyPowerBalanceWidget/render.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { render } from 'react-dom';
+import { Theme } from '@oanda/labs-widget-common';
+import { CurrencyPowerBalance } from './CurrencyPowerBalance';
+
+const {
+  graphqlUrl: configGraphQl,
+  renderElementId: configRenderElementId,
+} = window.currencyPowerBalanceWidgetConfig || {};
+
+const {
+  graphqlUrl,
+} = window.widgetsConfig || {};
+
+const currencyPowerBalanceParamsElements = document.querySelectorAll('div[data-currency-power-balance-params]');
+
+if (currencyPowerBalanceParamsElements.length > 0) {
+  currencyPowerBalanceParamsElements.forEach((element) => {
+    const mode = element.getAttribute('data-mode');
+
+    render(
+      <CurrencyPowerBalance
+        graphqlUrl={graphqlUrl}
+        theme={mode as Theme}
+      />,
+      element,
+    );
+  });
+} else {
+  render(
+    <CurrencyPowerBalance
+      graphqlUrl={configGraphQl}
+    />,
+    document.getElementById(configRenderElementId),
+  );
+}

package/src/CurrencyPowerBalanceWidget/types.ts

@@ -0,0 +1,15 @@
+import { Theme } from '@oanda/labs-widget-common';
+import { CurrencyPowerBalanceTimeUnit } from '../gql/types/graphql';
+
+export interface CurrencyPowerBalanceConfig {
+  graphqlUrl: string;
+  theme?: Theme;
+}
+
+export interface CurrencyPowerBalanceWrapperConfig extends CurrencyPowerBalanceConfig {
+  renderElementId: string;
+}
+
+export interface ChartWithDataProps {
+  timeUnit: CurrencyPowerBalanceTimeUnit;
+}

package/src/gql/getCurrencyPowerBalance.ts

@@ -0,0 +1,13 @@
+import { gql } from '@apollo/client';
+
+export const getCurrencyPowerBalance = gql`
+  query GetCurrencyPowerBalance($timeUnit: CurrencyPowerBalanceTimeUnit!) {
+    currencyPowerBalance(timeUnit: $timeUnit) {
+      currency
+      power {
+        point
+        price
+      }
+    }
+  }
+`;

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,42 @@
+/* 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 GetCurrencyPowerBalance($timeUnit: CurrencyPowerBalanceTimeUnit!) {\n    currencyPowerBalance(timeUnit: $timeUnit) {\n      currency\n      power {\n        point\n        price\n      }\n    }\n  }\n": types.GetCurrencyPowerBalanceDocument,
+};
+
+/**
+ * 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 GetCurrencyPowerBalance($timeUnit: CurrencyPowerBalanceTimeUnit!) {\n    currencyPowerBalance(timeUnit: $timeUnit) {\n      currency\n      power {\n        point\n        price\n      }\n    }\n  }\n"): (typeof documents)["\n  query GetCurrencyPowerBalance($timeUnit: CurrencyPowerBalanceTimeUnit!) {\n    currencyPowerBalance(timeUnit: $timeUnit) {\n      currency\n      power {\n        point\n        price\n      }\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;