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

package/dist/module/ValueAtRiskWidget/components/Legend/Legend.js

@@ -1,5 +1,5 @@
-import React, { useContext } from 'react';
-import { Size, ThemeContext } from '@oanda/labs-widget-common';
+import React from 'react';
+import { Size, useLayoutProvider } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
 import { DataNames } from './types';
 import { DesktopLegend } from './DesktopLegend';
@@ -11,7 +11,7 @@ const Legend = _ref => {
   const {
     size,
     isDark
-  } = useContext(ThemeContext);
+  } = useLayoutProvider();
   const {
     lang
   } = useLocale();

package/dist/module/ValueAtRiskWidget/components/Legend/Legend.js.map

@@ -1 +1 @@
-{"version":3,"file":"Legend.js","names":["React","useContext","Size","ThemeContext","useLocale","DataNames","DesktopLegend","MobileLegend","Legend","_ref","data","size","isDark","lang","isDesktop","DESKTOP","createElement","Fragment","id","AVERAGE","label","value","valueAtRiskChart","down","average","MEDIAN","median","THRESHOLD","threshold","MIN","max","up","MAX","valueDown","valueUp"],"sources":["../../../../../src/ValueAtRiskWidget/components/Legend/Legend.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport {\n  Size,\n  ThemeContext,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport {\n  DataNames, LegendProps,\n} from './types';\nimport { DesktopLegend } from './DesktopLegend';\nimport { MobileLegend } from './MobileLegend';\n\nconst Legend = ({ data }: LegendProps) => {\n  const { size, isDark } = useContext(ThemeContext);\n  const { lang } = useLocale();\n  const isDesktop = size === Size.DESKTOP;\n\n  return (\n    <>\n      {isDesktop ? (\n        <>\n          <DesktopLegend\n            isDark={isDark}\n            lang={lang}\n            data={[\n              {\n                id: DataNames.AVERAGE,\n                label: lang('average'),\n                value: data.valueAtRiskChart!.down.average,\n              },\n              {\n                id: DataNames.MEDIAN,\n                label: lang('median'),\n                value: data.valueAtRiskChart!.down.median,\n              },\n              {\n                id: DataNames.THRESHOLD,\n                label: `${lang('threshold')} (95%)`,\n                value: data.valueAtRiskChart!.down.threshold,\n              },\n              {\n                id: DataNames.MIN,\n                label: lang('min'),\n                value: data.valueAtRiskChart!.down.max,\n              },\n            ]}\n          />\n          <DesktopLegend\n            isDark={isDark}\n            lang={lang}\n            data={[\n              {\n                id: DataNames.AVERAGE,\n                label: lang('average'),\n                value: data.valueAtRiskChart!.up.average,\n              },\n              {\n                id: DataNames.MEDIAN,\n                label: lang('median'),\n                value: data.valueAtRiskChart!.up.median,\n              },\n              {\n                id: DataNames.THRESHOLD,\n                label: `${lang('threshold')} (95%)`,\n                value: data.valueAtRiskChart!.up.threshold,\n              },\n              {\n                id: DataNames.MAX,\n                label: lang('max'),\n                value: data.valueAtRiskChart!.up.max,\n              },\n            ]}\n          />\n        </>\n      ) : (\n        <MobileLegend\n          isDark={isDark}\n          lang={lang}\n          data={[\n            {\n              id: DataNames.AVERAGE,\n              label: lang('average'),\n              valueDown: data.valueAtRiskChart!.down.average,\n              valueUp: data.valueAtRiskChart!.up.average,\n            },\n            {\n              id: DataNames.MEDIAN,\n              label: lang('median'),\n              valueDown: data.valueAtRiskChart!.down.median,\n              valueUp: data.valueAtRiskChart!.up.median,\n            },\n            {\n              id: DataNames.THRESHOLD,\n              label: `${lang('threshold')} (95%)`,\n              valueDown: data.valueAtRiskChart!.down.threshold,\n              valueUp: data.valueAtRiskChart!.up.threshold,\n            },\n            {\n              id: DataNames.MAX,\n              label: `${lang('min')}/${lang('max')}`,\n              valueDown: data.valueAtRiskChart!.down.max,\n              valueUp: data.valueAtRiskChart!.up.max,\n            },\n          ]}\n        />\n      )}\n    </>\n  );\n};\n\nexport { Legend };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Legend.js","names":["React","Size","useLayoutProvider","useLocale","DataNames","DesktopLegend","MobileLegend","Legend","_ref","data","size","isDark","lang","isDesktop","DESKTOP","createElement","Fragment","id","AVERAGE","label","value","valueAtRiskChart","down","average","MEDIAN","median","THRESHOLD","threshold","MIN","max","up","MAX","valueDown","valueUp"],"sources":["../../../../../src/ValueAtRiskWidget/components/Legend/Legend.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  Size,\n  useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport {\n  DataNames, LegendProps,\n} from './types';\nimport { DesktopLegend } from './DesktopLegend';\nimport { MobileLegend } from './MobileLegend';\n\nconst Legend = ({ data }: LegendProps) => {\n  const { size, isDark } = useLayoutProvider();\n  const { lang } = useLocale();\n  const isDesktop = size === Size.DESKTOP;\n\n  return (\n    <>\n      {isDesktop ? (\n        <>\n          <DesktopLegend\n            isDark={isDark}\n            lang={lang}\n            data={[\n              {\n                id: DataNames.AVERAGE,\n                label: lang('average'),\n                value: data.valueAtRiskChart!.down.average,\n              },\n              {\n                id: DataNames.MEDIAN,\n                label: lang('median'),\n                value: data.valueAtRiskChart!.down.median,\n              },\n              {\n                id: DataNames.THRESHOLD,\n                label: `${lang('threshold')} (95%)`,\n                value: data.valueAtRiskChart!.down.threshold,\n              },\n              {\n                id: DataNames.MIN,\n                label: lang('min'),\n                value: data.valueAtRiskChart!.down.max,\n              },\n            ]}\n          />\n          <DesktopLegend\n            isDark={isDark}\n            lang={lang}\n            data={[\n              {\n                id: DataNames.AVERAGE,\n                label: lang('average'),\n                value: data.valueAtRiskChart!.up.average,\n              },\n              {\n                id: DataNames.MEDIAN,\n                label: lang('median'),\n                value: data.valueAtRiskChart!.up.median,\n              },\n              {\n                id: DataNames.THRESHOLD,\n                label: `${lang('threshold')} (95%)`,\n                value: data.valueAtRiskChart!.up.threshold,\n              },\n              {\n                id: DataNames.MAX,\n                label: lang('max'),\n                value: data.valueAtRiskChart!.up.max,\n              },\n            ]}\n          />\n        </>\n      ) : (\n        <MobileLegend\n          isDark={isDark}\n          lang={lang}\n          data={[\n            {\n              id: DataNames.AVERAGE,\n              label: lang('average'),\n              valueDown: data.valueAtRiskChart!.down.average,\n              valueUp: data.valueAtRiskChart!.up.average,\n            },\n            {\n              id: DataNames.MEDIAN,\n              label: lang('median'),\n              valueDown: data.valueAtRiskChart!.down.median,\n              valueUp: data.valueAtRiskChart!.up.median,\n            },\n            {\n              id: DataNames.THRESHOLD,\n              label: `${lang('threshold')} (95%)`,\n              valueDown: data.valueAtRiskChart!.down.threshold,\n              valueUp: data.valueAtRiskChart!.up.threshold,\n            },\n            {\n              id: DataNames.MAX,\n              label: `${lang('min')}/${lang('max')}`,\n              valueDown: data.valueAtRiskChart!.down.max,\n              valueUp: data.valueAtRiskChart!.up.max,\n            },\n          ]}\n        />\n      )}\n    </>\n  );\n};\n\nexport { Legend };\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-value-at-risk-widget",
-  "version": "1.0.63",
+  "version": "1.0.65",
   "description": "Labs Value At Risk Widget",
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
@@ -12,7 +12,7 @@
   "author": "OANDA",
   "license": "UNLICENSED",
   "dependencies": {
-    "@oanda/labs-widget-common": "^1.0.171",
+    "@oanda/labs-widget-common": "^1.0.173",
     "@oanda/mono-i18n": "10.0.1",
     "echarts": "5.5.0",
     "echarts-for-react": "3.0.2",
@@ -23,5 +23,5 @@
     "@graphql-codegen/client-preset": "4.1.0",
     "@graphql-codegen/typescript": "4.0.1"
   },
-  "gitHead": "f978676624ce706f807cbecc432c67ed809dbf48"
+  "gitHead": "67a7801f99f0bab94dd6067a102761f51de786c1"
 }

package/src/ValueAtRiskWidget/ChartWithData.tsx

@@ -1,9 +1,9 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import classnames from 'classnames';
 import { useQuery } from '@apollo/client';
 import {
   ChartError, Size, Spinner, SpinnerSize,
-  ThemeContext,
+  useLayoutProvider,
 } from '@oanda/labs-widget-common';
 import { Chart } from './components/Chart';
 import { getValueAtRiskChart } from '../gql/getValueAtRiskChart';
@@ -14,7 +14,7 @@ import { Legend } from './components/Legend';
 const ChartWithData = ({
   instrument, duration, bars, division,
 }: ChartWithDataProps) => {
-  const { size } = useContext(ThemeContext);
+  const { size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
 
   const { loading, data, error } = useQuery<

package/src/ValueAtRiskWidget/Tool.tsx

@@ -1,7 +1,7 @@
-import React, { useState, useContext } from 'react';
+import React, { useState } from 'react';
 import classnames from 'classnames';
 import {
-  Select, SelectOption, Size, ThemeContext,
+  Select, SelectOption, Size, useLayoutProvider,
 } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
 import { getAssetClassesList, getInstrumentsByAssetClassId } from './utils';
@@ -11,7 +11,7 @@ import { ChartWithData } from './ChartWithData';
 
 const Tool = ({ data, division }: ToolProps) => {
   const { lang } = useLocale();
-  const { size } = useContext(ThemeContext);
+  const { size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
 
   const assetClassesOptions = getAssetClassesList(data!.valueAtRiskAssetClasses!);

package/src/ValueAtRiskWidget/ToolWithData.tsx

@@ -1,7 +1,7 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import classnames from 'classnames';
 import {
-  ChartError, Size, Spinner, SpinnerSize, ThemeContext,
+  ChartError, Size, Spinner, SpinnerSize, useLayoutProvider,
 } from '@oanda/labs-widget-common';
 import { useQuery } from '@apollo/client';
 import { getValueAtRiskAssetClasses } from '../gql/getValueAtRiskAssetClasses';
@@ -10,7 +10,7 @@ import { ToolWithDataProps } from './types';
 import { GetValueAtRiskAssetClassesQuery, GetValueAtRiskAssetClassesQueryVariables } from '../gql/types/graphql';
 
 const ToolWithData = ({ division }: ToolWithDataProps) => {
-  const { size } = useContext(ThemeContext);
+  const { size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
   const { loading, data, error } = useQuery<
   GetValueAtRiskAssetClassesQuery,

package/src/ValueAtRiskWidget/ValueAtRiskWidget.tsx

@@ -1,10 +1,7 @@
 import React from 'react';
-import { LocaleProvider } from '@oanda/mono-i18n';
-import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
-import {
-  ChartError, ThemeProvider, getLocale,
-  renderComponent,
-} from '@oanda/labs-widget-common';
+import { ApolloClient, InMemoryCache } from '@apollo/client';
+import { WidgetProvider, WidgetWrapper } from '@oanda/labs-widget-common';
+
 import { ValueAtRiskConfig } from './types';
 import { translations } from '../translations';
 import { ToolWithData } from './ToolWithData';
@@ -28,31 +25,29 @@ const ValueAtRiskWidget = ({
   const isWidget = !!instrument && !!duration && !!bars;
 
   return (
-    <ThemeProvider theme={theme}>
-      <LocaleProvider locale={getLocale(locale)} translations={translations}>
-        <ApolloProvider client={client}>
-          {isParamError && (
-            <div className="lw-flex lw-h-[425px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary">
-              <ChartError />
-            </div>
-          )}
-
-          { !isParamError && renderComponent({
-            logoLink,
-            linkArea: 'logo',
-            Component: isWidget ? (
-              <Widget
-                division={division}
-                instrument={instrument}
-                duration={duration}
-                bars={bars}
-              />
-            ) : <ToolWithData division={division} />,
-          }) }
-
-        </ApolloProvider>
-      </LocaleProvider>
-    </ThemeProvider>
+    <WidgetProvider
+      locale={locale}
+      translations={translations}
+      client={client}
+      theme={theme}
+    >
+      <WidgetWrapper
+        logoLink={logoLink}
+        linkArea="logo"
+        isParamError={isParamError}
+      >
+        {
+          isWidget ? (
+            <Widget
+              division={division}
+              instrument={instrument}
+              duration={duration}
+              bars={bars}
+            />
+          ) : <ToolWithData division={division} />
+        }
+      </WidgetWrapper>
+    </WidgetProvider>
   );
 };
 

package/src/ValueAtRiskWidget/Widget.tsx

@@ -1,6 +1,6 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import classnames from 'classnames';
-import { Size, ThemeContext } from '@oanda/labs-widget-common';
+import { Size, useLayoutProvider } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
 import { WidgetProps } from './types';
 import { ChartWithData } from './ChartWithData';
@@ -12,7 +12,7 @@ const Widget = ({
   bars,
 }: WidgetProps) => {
   const { lang } = useLocale();
-  const { size } = useContext(ThemeContext);
+  const { size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
 
   return (

package/src/ValueAtRiskWidget/components/Chart/Chart.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import ReactEChartsCore from 'echarts-for-react/lib/core';
 import * as echarts from 'echarts/core';
 import { LineChart, CustomChart } from 'echarts/charts';
@@ -17,7 +17,7 @@ import { useLocale } from '@oanda/mono-i18n';
 import {
   Size,
   Theme,
-  ThemeContext,
+  useLayoutProvider,
   getChartTheme,
 } from '@oanda/labs-widget-common';
 import { CHART_HEIGHT } from './constants';
@@ -43,7 +43,7 @@ echarts.registerTheme('light_theme', getChartTheme(Theme.Light));
 
 const Chart = ({ values }: ChartProps) => {
   const { lang } = useLocale();
-  const { isDark, size } = useContext(ThemeContext);
+  const { isDark, size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
 
   return (

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

@@ -1,7 +1,7 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import {
   Size,
-  ThemeContext,
+  useLayoutProvider,
 } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
 import {
@@ -11,7 +11,7 @@ import { DesktopLegend } from './DesktopLegend';
 import { MobileLegend } from './MobileLegend';
 
 const Legend = ({ data }: LegendProps) => {
-  const { size, isDark } = useContext(ThemeContext);
+  const { size, isDark } = useLayoutProvider();
   const { lang } = useLocale();
   const isDesktop = size === Size.DESKTOP;
 

package/test/ChartWithData.test.tsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
-import { Size, ThemeContext } from '@oanda/labs-widget-common';
+import { MockLayoutProvider } from '@oanda/labs-widget-common';
 import { Division, ValueAtRiskBars, ValueAtRiskDuration } from '../src/gql/types/graphql';
 import { getValueAtRiskChartErrorMock, getValueAtRiskChartMock } from './mocks/responsesMocks';
 import { ChartWithData } from '../src/ValueAtRiskWidget/ChartWithData';
@@ -13,14 +13,14 @@ describe('ChartWithData component', () => {
   it('should render chart view', async () => {
     const { findByTestId } = render(
       <MockedProvider mocks={getValueAtRiskChartMock('CORN')}>
-        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: false }}>
+        <MockLayoutProvider isDark={false}>
           <ChartWithData
             division={Division.Oc}
             instrument="CORN"
             bars={ValueAtRiskBars.C100}
             duration={ValueAtRiskDuration.C1}
           />
-        </ThemeContext.Provider>
+        </MockLayoutProvider>
       </MockedProvider>,
     );
 
@@ -30,14 +30,14 @@ describe('ChartWithData component', () => {
   it('should render mobile chart view', async () => {
     const { findByTestId } = render(
       <MockedProvider mocks={getValueAtRiskChartMock('CORN')}>
-        <ThemeContext.Provider value={{ size: Size.MOBILE, isDark: false }}>
+        <MockLayoutProvider isDark={false}>
           <ChartWithData
             division={Division.Oc}
             instrument="CORN"
             bars={ValueAtRiskBars.C100}
             duration={ValueAtRiskDuration.C1}
           />
-        </ThemeContext.Provider>
+        </MockLayoutProvider>
       </MockedProvider>,
     );
 
@@ -47,14 +47,14 @@ describe('ChartWithData component', () => {
   it('should render error view', async () => {
     const { findByTestId } = render(
       <MockedProvider mocks={getValueAtRiskChartErrorMock}>
-        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: false }}>
+        <MockLayoutProvider isDark={false}>
           <ChartWithData
             division={Division.Oc}
             instrument="AUD_USD"
             bars={ValueAtRiskBars.C100}
             duration={ValueAtRiskDuration.C1}
           />
-        </ThemeContext.Provider>
+        </MockLayoutProvider>
       </MockedProvider>,
     );
 

package/test/Tool.test.tsx

@@ -3,7 +3,7 @@
  */
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import { ThemeContext, Size } from '@oanda/labs-widget-common';
+import { MockLayoutProvider } from '@oanda/labs-widget-common';
 import { MockedProvider } from '@apollo/client/testing';
 import { Tool } from '../src/ValueAtRiskWidget/Tool';
 import { assetClassesMock, getValueAtRiskChartMock } from './mocks';
@@ -17,12 +17,12 @@ describe('Tool component', () => {
   it('should render tool view', () => {
     const { getByTestId } = render(
       <MockedProvider mocks={getValueAtRiskChartMock()}>
-        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
+        <MockLayoutProvider>
           <Tool
             data={data}
             division={Division.Oc}
           />
-        </ThemeContext.Provider>
+        </MockLayoutProvider>
       </MockedProvider>,
     );
 
@@ -31,12 +31,12 @@ describe('Tool component', () => {
   it('should change asset class and instruments list on click', () => {
     const { container, getByTestId } = render(
       <MockedProvider mocks={[...getValueAtRiskChartMock('AUD_USD'), ...getValueAtRiskChartMock('AUS200')]}>
-        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
+        <MockLayoutProvider>
           <Tool
             data={data}
             division={Division.Oc}
           />
-        </ThemeContext.Provider>
+        </MockLayoutProvider>
       </MockedProvider>,
     );
     expect(getByTestId('value-at-risk-tool-wrapper')).toBeInTheDocument();

package/test/ToolWithData.test.tsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
-import { Size, ThemeContext } from '@oanda/labs-widget-common';
+import { MockLayoutProvider } from '@oanda/labs-widget-common';
 import { ToolWithData } from '../src/ValueAtRiskWidget/ToolWithData';
 import { Division } from '../src/gql/types/graphql';
 import { getValueAtRiskAssetClassesMock, getValueAtRiskChartMock } from './mocks/responsesMocks';
@@ -13,9 +13,9 @@ describe('Main component', () => {
   it('should render tool view', async () => {
     const { findByTestId } = render(
       <MockedProvider mocks={[...getValueAtRiskAssetClassesMock, ...getValueAtRiskChartMock()]}>
-        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: false }}>
+        <MockLayoutProvider isDark={false}>
           <ToolWithData division={Division.Oc} />
-        </ThemeContext.Provider>
+        </MockLayoutProvider>
       </MockedProvider>,
     );
 

package/test/Widget.test.tsx

@@ -3,7 +3,7 @@
  */
 import React from 'react';
 import { render } from '@testing-library/react';
-import { ThemeContext, Size } from '@oanda/labs-widget-common';
+import { MockLayoutProvider } from '@oanda/labs-widget-common';
 import { MockedProvider } from '@apollo/client/testing';
 import { getValueAtRiskChartMock } from './mocks';
 import { Division, ValueAtRiskBars, ValueAtRiskDuration } from '../src/gql/types/graphql';
@@ -13,14 +13,14 @@ describe('Widget component', () => {
   it('should render widget view', () => {
     const { getByTestId } = render(
       <MockedProvider mocks={getValueAtRiskChartMock()}>
-        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
+        <MockLayoutProvider>
           <Widget
             division={Division.Oc}
             instrument="AUD_USD"
             bars={ValueAtRiskBars.C100}
             duration={ValueAtRiskDuration.C1}
           />
-        </ThemeContext.Provider>
+        </MockLayoutProvider>
       </MockedProvider>,
     );