@oanda/labs-value-at-risk-widget 1.0.65 → 1.0.67

package/src/ValueAtRiskWidget/components/Legend/constants.tsx

@@ -1,4 +1,4 @@
-import { DataNames } from './types';
+import type { DataNames } from './types';
 
 export const lineTypes: Record<DataNames, string> = {
   min: '0',

package/src/ValueAtRiskWidget/components/Legend/types.tsx

@@ -1,4 +1,4 @@
-import { GetValueAtRiskChartQuery } from '../../../gql/types/graphql';
+import type { GetValueAtRiskChartQuery } from '../../../gql/types/graphql';
 
 export enum DataNames {
   MIN = 'min',
@@ -14,8 +14,8 @@ export interface DesktopLegendProps {
     label: string;
     value: number;
   }[];
-  isDark: boolean,
-  lang: (key: string) => string
+  isDark: boolean;
+  lang: (key: string) => string;
 }
 
 export interface MobileLegendProps {
@@ -25,16 +25,16 @@ export interface MobileLegendProps {
     valueUp: number;
     valueDown: number;
   }[];
-  isDark: boolean,
-  lang: (key: string) => string
+  isDark: boolean;
+  lang: (key: string) => string;
 }
 
 export interface LegendProps {
-  data: GetValueAtRiskChartQuery
+  data: GetValueAtRiskChartQuery;
 }
 
 export interface DashedLineProps {
-  strokeDasharray?: string,
-  width?: string,
-  isDark: boolean,
+  strokeDasharray?: string;
+  width?: string;
+  isDark: boolean;
 }

package/src/ValueAtRiskWidget/render.tsx

@@ -1,52 +1,50 @@
+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 { Theme, validateLocale, validateToolParams } from '@oanda/labs-widget-common';
-import { ValueAtRiskWidget } from './ValueAtRiskWidget';
+
 import { Division } from '../gql/types/graphql';
+import { ValueAtRiskWidget } from './ValueAtRiskWidget';
 
-const {
-  graphqlUrl,
-} = window.widgetsConfig || {};
+const { graphqlUrl } = window.widgetsConfig || {};
 
-const valueAtRiskParamsElements = document.querySelectorAll('div[data-value-at-risk-params]');
+const valueAtRiskParamsElements = document.querySelectorAll(
+  'div[data-value-at-risk-params]'
+);
 
 valueAtRiskParamsElements.forEach((element) => {
   const root = createRoot(element);
   const params = element.getAttribute('data-value-at-risk-params');
   const mode = element.getAttribute('data-mode');
-  const {
-    division,
-    locale,
-    instrument,
-    duration,
-    bars,
-    logoLink,
-  } = JSON.parse(params as string);
+  const { division, locale, instrument, duration, bars, logoLink } = JSON.parse(
+    params as string
+  );
 
   const isParamError = validateToolParams({ locale, division, graphqlUrl }, [
     {
       name: 'locale',
-      valueCheck: (value) => validateLocale(value),
+      valueCheck: (value: string | undefined) => validateLocale(value),
     },
     {
       name: 'division',
-      valueCheck: (value) => Object.values(Division).includes(value),
+      valueCheck: (value: Division) => Object.values(Division).includes(value),
     },
     {
       name: 'graphqlUrl',
-    }]);
+    },
+  ]);
 
   root.render(
     <ValueAtRiskWidget
-      graphqlUrl={graphqlUrl}
-      locale={locale}
+      bars={bars}
       division={division}
-      theme={mode as Theme}
-      isParamError={isParamError}
-      instrument={instrument}
       duration={duration}
-      bars={bars}
+      graphqlUrl={graphqlUrl}
+      instrument={instrument}
+      isParamError={isParamError}
+      locale={locale}
       logoLink={logoLink}
-    />,
+      theme={mode as Theme}
+    />
   );
 });

package/src/ValueAtRiskWidget/types.ts

@@ -1,6 +1,10 @@
-import { WidgetConfig } from '@oanda/labs-widget-common';
-import {
-  Division, GetValueAtRiskAssetClassesQuery, ValueAtRiskBars, ValueAtRiskDuration,
+import type { WidgetConfig } from '@oanda/labs-widget-common';
+
+import type {
+  Division,
+  GetValueAtRiskAssetClassesQuery,
+  ValueAtRiskBars,
+  ValueAtRiskDuration,
 } from '../gql/types/graphql';
 
 export interface ValueAtRiskConfig extends WidgetConfig {

package/src/ValueAtRiskWidget/utils.ts

@@ -1,24 +1,32 @@
-import { AssetClass, Instrument } from '../gql/types/graphql';
+import type { AssetClass, Instrument } from '../gql/types/graphql';
 
-const capitalize = (name: string) => `${name[0].toUpperCase()}${name.substring(1)}`;
+const capitalize = (name: string) =>
+  `${name[0].toUpperCase()}${name.substring(1)}`;
 
 function sortAlphabetically<T extends Record<string, string>>(
   paramName: keyof T,
-  items: T[],
+  items: T[]
 ): T[] {
-  return [...items]
-    .sort((itemA, itemB) => itemA[paramName].localeCompare(itemB[paramName], 'en', { sensitivity: 'base' }));
+  return [...items].sort((itemA, itemB) =>
+    itemA[paramName].localeCompare(itemB[paramName], 'en', {
+      sensitivity: 'base',
+    })
+  );
 }
 
 const getAssetClassesList = (data: AssetClass[]) => {
-  const list = data
-    .map(({ name }) => ({ id: name.toLowerCase(), label: capitalize(name) }));
+  const list = data.map(({ name }) => ({
+    id: name.toLowerCase(),
+    label: capitalize(name),
+  }));
 
   return sortAlphabetically('label', list);
 };
 
-const mapInstrumentsList = (data: Instrument[]) => sortAlphabetically('displayName', data)
-  .map(({ name: id, displayName: label }) => ({ id, label }));
+const mapInstrumentsList = (data: Instrument[]) =>
+  sortAlphabetically('displayName', data).map(
+    ({ name: id, displayName: label }) => ({ id, label })
+  );
 
 const getInstrumentsByAssetClassId = (data: AssetClass[], id: string) => {
   const [{ instruments }] = data.filter(({ name }) => id === name);
@@ -28,6 +36,6 @@ const getInstrumentsByAssetClassId = (data: AssetClass[], id: string) => {
 
 export {
   getAssetClassesList,
-  sortAlphabetically,
   getInstrumentsByAssetClassId,
+  sortAlphabetically,
 };

package/src/gql/getValueAtRiskAssetClasses.ts

@@ -2,7 +2,7 @@ import { gql } from '@apollo/client';
 
 export const getValueAtRiskAssetClasses = gql`
   query GetValueAtRiskAssetClasses($division: Division) {
-      valueAtRiskAssetClasses(division: $division) {
+    valueAtRiskAssetClasses(division: $division) {
       name
       instruments {
         name

package/src/gql/getValueAtRiskChart.ts

@@ -1,8 +1,18 @@
 import { gql } from '@apollo/client';
 
 export const getValueAtRiskChart = gql`
-  query getValueAtRiskChart($instrument: String!, $division: Division!, $duration: ValueAtRiskDuration!, $bars: ValueAtRiskBars!) {
-    valueAtRiskChart(instrument: $instrument, division: $division, duration: $duration, bars: $bars) {
+  query getValueAtRiskChart(
+    $instrument: String!
+    $division: Division!
+    $duration: ValueAtRiskDuration!
+    $bars: ValueAtRiskBars!
+  ) {
+    valueAtRiskChart(
+      instrument: $instrument
+      division: $division
+      duration: $duration
+      bars: $bars
+    ) {
       up {
         points {
           pips

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

@@ -1,18 +1,21 @@
-import { ResultOf, DocumentTypeDecoration, TypedDocumentNode } from '@graphql-typed-document-node/core';
+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 } }
+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
-  : never;
+    : never;
 
 // return non-nullable if `fragmentType` is non-nullable
 export function useFragment<TType>(
@@ -22,7 +25,10 @@ export function useFragment<TType>(
 // return nullable if `fragmentType` is nullable
 export function useFragment<TType>(
   _documentNode: DocumentTypeDecoration<TType, any>,
-  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | null | undefined
+  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>(
@@ -32,35 +38,49 @@ export function useFragment<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
+  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
+  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>
+  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:
+    | FragmentType<TypedDocumentNode<Incremental<TFrag>, any>>
+    | null
+    | undefined
 ): data is FragmentType<typeof fragmentNode> {
-  const deferredFields = (queryNode as { __meta__?: { deferredFields: Record<string, (keyof TFrag)[]> } }).__meta__
-    ?.deferredFields;
+  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 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);
+  return fields.length > 0 && fields.every((field) => data && field in data);
 }

package/src/gql/types/gql.ts

@@ -13,8 +13,10 @@ 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 GetValueAtRiskAssetClasses($division: Division) {\n      valueAtRiskAssetClasses(division: $division) {\n      name\n      instruments {\n        name\n        displayName\n      }\n    }\n  }\n": types.GetValueAtRiskAssetClassesDocument,
-    "\n  query getValueAtRiskChart($instrument: String!, $division: Division!, $duration: ValueAtRiskDuration!, $bars: ValueAtRiskBars!) {\n    valueAtRiskChart(instrument: $instrument, division: $division, duration: $duration, bars: $bars) {\n      up {\n        points {\n          pips\n          percent\n        }\n        average\n        median\n        max\n        threshold\n      }\n      down {\n        points {\n          pips\n          percent\n        }\n        average\n        median\n        max\n        threshold\n      }\n    }\n  }\n": types.GetValueAtRiskChartDocument,
+  '\n  query GetValueAtRiskAssetClasses($division: Division) {\n      valueAtRiskAssetClasses(division: $division) {\n      name\n      instruments {\n        name\n        displayName\n      }\n    }\n  }\n':
+    types.GetValueAtRiskAssetClassesDocument,
+  '\n  query getValueAtRiskChart($instrument: String!, $division: Division!, $duration: ValueAtRiskDuration!, $bars: ValueAtRiskBars!) {\n    valueAtRiskChart(instrument: $instrument, division: $division, duration: $duration, bars: $bars) {\n      up {\n        points {\n          pips\n          percent\n        }\n        average\n        median\n        max\n        threshold\n      }\n      down {\n        points {\n          pips\n          percent\n        }\n        average\n        median\n        max\n        threshold\n      }\n    }\n  }\n':
+    types.GetValueAtRiskChartDocument,
 };
 
 /**
@@ -34,14 +36,19 @@ 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 GetValueAtRiskAssetClasses($division: Division) {\n      valueAtRiskAssetClasses(division: $division) {\n      name\n      instruments {\n        name\n        displayName\n      }\n    }\n  }\n"): (typeof documents)["\n  query GetValueAtRiskAssetClasses($division: Division) {\n      valueAtRiskAssetClasses(division: $division) {\n      name\n      instruments {\n        name\n        displayName\n      }\n    }\n  }\n"];
+export function graphql(
+  source: '\n  query GetValueAtRiskAssetClasses($division: Division) {\n      valueAtRiskAssetClasses(division: $division) {\n      name\n      instruments {\n        name\n        displayName\n      }\n    }\n  }\n'
+): (typeof documents)['\n  query GetValueAtRiskAssetClasses($division: Division) {\n      valueAtRiskAssetClasses(division: $division) {\n      name\n      instruments {\n        name\n        displayName\n      }\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 getValueAtRiskChart($instrument: String!, $division: Division!, $duration: ValueAtRiskDuration!, $bars: ValueAtRiskBars!) {\n    valueAtRiskChart(instrument: $instrument, division: $division, duration: $duration, bars: $bars) {\n      up {\n        points {\n          pips\n          percent\n        }\n        average\n        median\n        max\n        threshold\n      }\n      down {\n        points {\n          pips\n          percent\n        }\n        average\n        median\n        max\n        threshold\n      }\n    }\n  }\n"): (typeof documents)["\n  query getValueAtRiskChart($instrument: String!, $division: Division!, $duration: ValueAtRiskDuration!, $bars: ValueAtRiskBars!) {\n    valueAtRiskChart(instrument: $instrument, division: $division, duration: $duration, bars: $bars) {\n      up {\n        points {\n          pips\n          percent\n        }\n        average\n        median\n        max\n        threshold\n      }\n      down {\n        points {\n          pips\n          percent\n        }\n        average\n        median\n        max\n        threshold\n      }\n    }\n  }\n"];
+export function graphql(
+  source: '\n  query getValueAtRiskChart($instrument: String!, $division: Division!, $duration: ValueAtRiskDuration!, $bars: ValueAtRiskBars!) {\n    valueAtRiskChart(instrument: $instrument, division: $division, duration: $duration, bars: $bars) {\n      up {\n        points {\n          pips\n          percent\n        }\n        average\n        median\n        max\n        threshold\n      }\n      down {\n        points {\n          pips\n          percent\n        }\n        average\n        median\n        max\n        threshold\n      }\n    }\n  }\n'
+): (typeof documents)['\n  query getValueAtRiskChart($instrument: String!, $division: Division!, $duration: ValueAtRiskDuration!, $bars: ValueAtRiskBars!) {\n    valueAtRiskChart(instrument: $instrument, division: $division, duration: $duration, bars: $bars) {\n      up {\n        points {\n          pips\n          percent\n        }\n        average\n        median\n        max\n        threshold\n      }\n      down {\n        points {\n          pips\n          percent\n        }\n        average\n        median\n        max\n        threshold\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;
+export type DocumentType<TDocumentNode extends DocumentNode<any, any>> =
+  TDocumentNode extends DocumentNode<infer TType, any> ? TType : never;