@oanda/labs-instruments-table-widget 1.0.26 → 1.0.27

package/dist/module/InstrumentsTableWidget/Main.js.map

@@ -1 +1 @@
-{"version":3,"file":"Main.js","names":["useQuery","Pagination","TableWidget","useLiveRatesQuery","useLocale","React","useEffect","useRef","useState","useEventListener","resolveInstrumentsWithFilters","Filters","assetClassLabels","getHeaderConfig","DEFAULT_COLUMNS","INSTRUMENT_TOOLTIP_ID","Main","_ref","instruments","division","assetClasses","columns","isAssetClassFilterEnabled","isInstrumentSearchEnabled","recordsPerPage","dataSource","documentRef","document","lang","target","setQuery","closeQuery","records","setRecords","Array","fill","totalRecords","setTotalRecords","queryVariables","setQueryVariables","count","searchPattern","offset","assetClass","pageNumber","Math","floor","data","error","loading","variables","fetchPolicy","errorPolicy","newRecords","map","record","instrument","name","displayName","totalCount","instrumentsNames","_ref2","showError","onVisibilityChange","current","visibilityState","_ref3","createElement","Fragment","PaginationComponent","length","currentPage","disabled","onPageChange","numb","prev","TabsComponent","assetClassOptions","id","label","ALL","onAssetClassChange","onSearchChange","activeColumns","hasError","headerColumns","isLoading","testId","toolTipId","viewType"],"sources":["../../../src/InstrumentsTableWidget/Main.tsx"],"sourcesContent":["import { useQuery } from '@apollo/client';\nimport type { DataRecord } from '@oanda/labs-widget-common';\nimport {\n  Pagination,\n  TableWidget,\n  useLiveRatesQuery,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useEventListener } from 'usehooks-ts';\n\nimport { resolveInstrumentsWithFilters } from '../gql/resolveInstrumentsWithFilters';\nimport type { AssetClassName } from '../gql/types/graphql';\nimport {\n  type ResolveInstrumentsWithFiltersQuery,\n  type ResolveInstrumentsWithFiltersQueryVariables,\n} from '../gql/types/graphql';\nimport { Filters } from './components';\nimport { assetClassLabels, getHeaderConfig } from './config';\nimport { DEFAULT_COLUMNS, INSTRUMENT_TOOLTIP_ID } from './constant';\nimport type { MainProps } from './types';\n\nconst Main = ({\n  instruments = [],\n  division,\n  assetClasses,\n  columns = DEFAULT_COLUMNS,\n  isAssetClassFilterEnabled,\n  isInstrumentSearchEnabled,\n  recordsPerPage = 10,\n  dataSource,\n}: MainProps) => {\n  const documentRef = useRef<Document>(document);\n  const { lang } = useLocale();\n  const { target, setQuery, closeQuery } = useLiveRatesQuery();\n\n  const [records, setRecords] = useState<DataRecord[]>(\n    new Array(recordsPerPage).fill({})\n  );\n\n  const [totalRecords, setTotalRecords] = useState<number>(0);\n\n  const [queryVariables, setQueryVariables] =\n    useState<ResolveInstrumentsWithFiltersQueryVariables>({\n      division,\n      count: recordsPerPage,\n      searchPattern: '',\n      offset: 0,\n      assetClass: assetClasses || [],\n      instruments,\n      dataSource,\n    });\n\n  const pageNumber = queryVariables.offset\n    ? Math.floor(queryVariables.offset / recordsPerPage)\n    : 0;\n\n  const { data, error, loading } = useQuery<\n    ResolveInstrumentsWithFiltersQuery,\n    ResolveInstrumentsWithFiltersQueryVariables\n  >(resolveInstrumentsWithFilters, {\n    variables: queryVariables,\n    fetchPolicy: 'network-only',\n    errorPolicy: 'all',\n  });\n\n  useEffect(() => {\n    if (loading) {\n      setRecords(new Array(recordsPerPage).fill({}));\n    }\n    if (!loading && data?.resolveInstrumentsWithFilters?.instruments) {\n      const newRecords = data.resolveInstrumentsWithFilters.instruments.map(\n        (record) => ({\n          instrument: record?.name || '',\n          displayName: record?.displayName || '',\n        })\n      );\n      setRecords(newRecords);\n      setTotalRecords(data.resolveInstrumentsWithFilters.totalCount);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [loading, data]);\n\n  useEffect(() => {\n    const instrumentsNames = records.map(({ instrument }) => instrument);\n    if (instrumentsNames[0]) {\n      setQuery({ instruments: instrumentsNames });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [records]);\n\n  const showError = (!loading && !!error) || (!loading && !data);\n\n  const onVisibilityChange = () => {\n    if (documentRef.current.visibilityState === 'hidden') {\n      closeQuery();\n    }\n    if (documentRef.current.visibilityState === 'visible') {\n      const instrumentsNames = records.map(({ instrument }) => instrument);\n      if (instrumentsNames[0]) {\n        setQuery({ instruments: instrumentsNames });\n      }\n    }\n  };\n\n  useEventListener('visibilitychange', onVisibilityChange, documentRef);\n\n  return (\n    <>\n      <TableWidget\n        PaginationComponent={\n          records.length > 0 ? (\n            <Pagination\n              currentPage={pageNumber}\n              disabled={loading}\n              recordsPerPage={recordsPerPage}\n              totalRecords={totalRecords}\n              onPageChange={(numb) => {\n                setQueryVariables((prev) => ({\n                  ...prev,\n                  offset: numb * recordsPerPage,\n                }));\n              }}\n            />\n          ) : (\n            <></>\n          )\n        }\n        TabsComponent={\n          isInstrumentSearchEnabled || isAssetClassFilterEnabled ? (\n            <Filters\n              assetClassOptions={[\n                {\n                  id: 'ALL',\n                  label: lang(assetClassLabels.ALL),\n                },\n                ...(assetClasses || []).map((assetClass) => ({\n                  id: assetClass,\n                  label: lang(assetClassLabels[assetClass]),\n                })),\n              ]}\n              isAssetClassFilterEnabled={isAssetClassFilterEnabled}\n              isInstrumentSearchEnabled={isInstrumentSearchEnabled}\n              onAssetClassChange={(assetClass) => {\n                setQueryVariables((prev) => ({\n                  ...prev,\n                  offset: 0,\n                  searchPattern: '',\n                  assetClass:\n                    assetClass[0] === 'ALL'\n                      ? assetClasses || []\n                      : (assetClass as AssetClassName[]),\n                }));\n              }}\n              onSearchChange={(searchPattern) => {\n                setQueryVariables((prev) => ({\n                  ...prev,\n                  offset: 0,\n                  searchPattern,\n                }));\n              }}\n            />\n          ) : (\n            <></>\n          )\n        }\n        activeColumns={columns}\n        count={totalRecords}\n        hasError={showError}\n        headerColumns={getHeaderConfig(columns)}\n        isLoading={loading}\n        pageNumber={pageNumber}\n        records={records}\n        target={target}\n        testId=\"instruments-table-wrapper\"\n        toolTipId={INSTRUMENT_TOOLTIP_ID}\n        viewType=\"table\"\n      />\n    </>\n  );\n};\n\nexport { Main };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Main.js","names":["useQuery","getHeaderConfig","Pagination","Size","TableWidget","useLayoutProvider","useLiveRatesQuery","useLocale","React","useEffect","useRef","useState","useEventListener","resolveInstrumentsWithFilters","Filters","assetClassLabels","headerConfigs","DEFAULT_COLUMNS","INSTRUMENT_TOOLTIP_ID","Main","_ref","instruments","division","assetClasses","columns","isAssetClassFilterEnabled","isInstrumentSearchEnabled","recordsPerPage","dataSource","isLiveRatesDisabled","documentRef","document","size","isDesktop","DESKTOP","lang","target","setQuery","closeQuery","records","setRecords","Array","fill","totalRecords","setTotalRecords","queryVariables","setQueryVariables","count","searchPattern","offset","assetClass","pageNumber","Math","floor","data","error","loading","variables","fetchPolicy","errorPolicy","newRecords","map","record","instrument","name","displayName","totalCount","instrumentsNames","_ref2","showError","onVisibilityChange","current","visibilityState","_ref3","headerConfig","mobile","length","longInstruments","normal","createElement","Fragment","PaginationComponent","currentPage","disabled","onPageChange","numb","prev","TabsComponent","assetClassOptions","id","label","ALL","onAssetClassChange","onSearchChange","activeColumns","hasError","headerColumns","instrumentColumnWidth","additionalStyles","minWidth","isLoading","testId","toolTipId","viewType"],"sources":["../../../src/InstrumentsTableWidget/Main.tsx"],"sourcesContent":["import { useQuery } from '@apollo/client';\nimport type { DataRecord } from '@oanda/labs-widget-common';\nimport {\n  getHeaderConfig,\n  Pagination,\n  Size,\n  TableWidget,\n  useLayoutProvider,\n  useLiveRatesQuery,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useEventListener } from 'usehooks-ts';\n\nimport { resolveInstrumentsWithFilters } from '../gql/resolveInstrumentsWithFilters';\nimport type { AssetClassName } from '../gql/types/graphql';\nimport {\n  type ResolveInstrumentsWithFiltersQuery,\n  type ResolveInstrumentsWithFiltersQueryVariables,\n} from '../gql/types/graphql';\nimport { Filters } from './components';\nimport { assetClassLabels, headerConfigs } from './config';\nimport { DEFAULT_COLUMNS, INSTRUMENT_TOOLTIP_ID } from './constant';\nimport type { MainProps } from './types';\n\nconst Main = ({\n  instruments = [],\n  division,\n  assetClasses,\n  columns = DEFAULT_COLUMNS,\n  isAssetClassFilterEnabled,\n  isInstrumentSearchEnabled,\n  recordsPerPage,\n  dataSource,\n  isLiveRatesDisabled,\n}: MainProps) => {\n  const documentRef = useRef<Document>(document);\n  const { size } = useLayoutProvider();\n  const isDesktop = size === Size.DESKTOP;\n\n  const { lang } = useLocale();\n  const { target, setQuery, closeQuery } =\n    useLiveRatesQuery(isLiveRatesDisabled);\n\n  const [records, setRecords] = useState<DataRecord[]>(\n    new Array(recordsPerPage || 10).fill({})\n  );\n\n  const [totalRecords, setTotalRecords] = useState<number>(0);\n\n  const [queryVariables, setQueryVariables] =\n    useState<ResolveInstrumentsWithFiltersQueryVariables>({\n      division,\n      count: recordsPerPage,\n      searchPattern: '',\n      offset: 0,\n      assetClass: assetClasses || [],\n      instruments,\n      dataSource,\n    });\n\n  const pageNumber = queryVariables.offset\n    ? Math.floor(queryVariables.offset / (recordsPerPage || 1))\n    : 0;\n\n  const { data, error, loading } = useQuery<\n    ResolveInstrumentsWithFiltersQuery,\n    ResolveInstrumentsWithFiltersQueryVariables\n  >(resolveInstrumentsWithFilters, {\n    variables: queryVariables,\n    fetchPolicy: 'network-only',\n    errorPolicy: 'all',\n  });\n\n  useEffect(() => {\n    if (loading) {\n      setRecords(new Array(recordsPerPage).fill({}));\n    }\n    if (!loading && data?.resolveInstrumentsWithFilters?.instruments) {\n      const newRecords = data.resolveInstrumentsWithFilters.instruments.map(\n        (record) => ({\n          instrument: record?.name || '',\n          displayName: record?.displayName || '',\n        })\n      );\n      setRecords(newRecords);\n      setTotalRecords(data.resolveInstrumentsWithFilters.totalCount);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [loading, data]);\n\n  useEffect(() => {\n    const instrumentsNames = records.map(({ instrument }) => instrument);\n    if (instrumentsNames[0]) {\n      setQuery({ instruments: instrumentsNames });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [records]);\n\n  const showError = (!loading && !!error) || (!loading && !data);\n\n  const onVisibilityChange = () => {\n    if (documentRef.current.visibilityState === 'hidden') {\n      closeQuery();\n    }\n    if (documentRef.current.visibilityState === 'visible') {\n      const instrumentsNames = records.map(({ instrument }) => instrument);\n      if (instrumentsNames[0]) {\n        setQuery({ instruments: instrumentsNames });\n      }\n    }\n  };\n\n  useEventListener('visibilitychange', onVisibilityChange, documentRef);\n\n  const headerConfig = !isDesktop\n    ? headerConfigs.mobile\n    : columns.length < 4\n      ? headerConfigs.longInstruments\n      : headerConfigs.normal;\n\n  return (\n    <>\n      <TableWidget\n        PaginationComponent={\n          records.length > 0 && recordsPerPage ? (\n            <Pagination\n              currentPage={pageNumber}\n              disabled={loading}\n              recordsPerPage={recordsPerPage}\n              totalRecords={totalRecords}\n              onPageChange={(numb) => {\n                setQueryVariables((prev) => ({\n                  ...prev,\n                  offset: numb * recordsPerPage,\n                }));\n              }}\n            />\n          ) : (\n            <></>\n          )\n        }\n        TabsComponent={\n          isInstrumentSearchEnabled || isAssetClassFilterEnabled ? (\n            <Filters\n              assetClassOptions={[\n                {\n                  id: 'ALL',\n                  label: lang(assetClassLabels.ALL),\n                },\n                ...(assetClasses || []).map((assetClass) => ({\n                  id: assetClass,\n                  label: lang(assetClassLabels[assetClass]),\n                })),\n              ]}\n              isAssetClassFilterEnabled={isAssetClassFilterEnabled}\n              isInstrumentSearchEnabled={isInstrumentSearchEnabled}\n              onAssetClassChange={(assetClass) => {\n                setQueryVariables((prev) => ({\n                  ...prev,\n                  offset: 0,\n                  searchPattern: '',\n                  assetClass:\n                    assetClass[0] === 'ALL'\n                      ? assetClasses || []\n                      : (assetClass as AssetClassName[]),\n                }));\n              }}\n              onSearchChange={(searchPattern) => {\n                setQueryVariables((prev) => ({\n                  ...prev,\n                  offset: 0,\n                  searchPattern,\n                }));\n              }}\n            />\n          ) : (\n            <></>\n          )\n        }\n        activeColumns={columns}\n        count={totalRecords}\n        hasError={showError}\n        headerColumns={getHeaderConfig(columns, headerConfig)}\n        instrumentColumnWidth={\n          headerConfig.instrument?.additionalStyles.minWidth\n        }\n        isLoading={loading}\n        pageNumber={pageNumber}\n        records={records}\n        target={target}\n        testId=\"instruments-table-wrapper\"\n        toolTipId={INSTRUMENT_TOOLTIP_ID}\n        viewType=\"table\"\n      />\n    </>\n  );\n};\n\nexport { Main };\n"],"mappings":"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","ignoreList":[]}

package/dist/module/InstrumentsTableWidget/config.js

@@ -1,35 +1,98 @@
 import { DataRecordType } from '@oanda/labs-widget-common';
 import { AssetClassName } from '../gql/types/graphql';
-const headerConfig = {
+const normal = {
   [DataRecordType.INSTRUMENT]: {
     displayName: 'instrument',
-    additionalStyles: 'lw-text-left lw-min-w-[130px]'
+    additionalStyles: {
+      align: 'left',
+      minWidth: '200px'
+    }
   },
   [DataRecordType.SELL]: {
     displayName: 'sell',
-    additionalStyles: 'lw-text-right lw-min-w-[75px] lw-pr-4'
+    additionalStyles: {
+      align: 'right',
+      minWidth: '75px',
+      paddingRight: true
+    }
   },
   [DataRecordType.BUY]: {
     displayName: 'buy',
-    additionalStyles: 'lw-text-right lw-min-w-[75px] lw-pr-4'
+    additionalStyles: {
+      align: 'right',
+      minWidth: '75px',
+      paddingRight: true
+    }
   },
   [DataRecordType.SPREAD]: {
     displayName: 'spread',
-    additionalStyles: 'lw-text-right lw-min-w-[50px]'
+    additionalStyles: {
+      align: 'right',
+      minWidth: '50px'
+    }
   },
   [DataRecordType.DAILY_CHANGE]: {
     displayName: 'daily_percent_change',
-    additionalStyles: 'lw-text-right lw-min-w-[80px]'
+    additionalStyles: {
+      align: 'right',
+      minWidth: '80px'
+    }
   },
   [DataRecordType.HIGH]: {
     displayName: 'today_high',
-    additionalStyles: 'lw-text-right lw-min-w-[80px]'
+    additionalStyles: {
+      align: 'right',
+      minWidth: '80px'
+    }
   },
   [DataRecordType.LOW]: {
     displayName: 'today_low',
-    additionalStyles: 'lw-text-right lw-min-w-[80px]'
+    additionalStyles: {
+      align: 'right',
+      minWidth: '80px'
+    }
+  },
+  [DataRecordType.TRADE_MODE]: {
+    displayName: 'trade_mode',
+    additionalStyles: {
+      align: 'right',
+      minWidth: '80px',
+      paddingRight: true
+    }
+  },
+  [DataRecordType.SYMBOL]: {
+    displayName: 'symbol',
+    additionalStyles: {
+      align: 'center',
+      minWidth: '80px'
+    }
+  }
+};
+const longInstruments = {
+  ...normal,
+  [DataRecordType.INSTRUMENT]: {
+    displayName: 'instrument',
+    additionalStyles: {
+      align: 'left',
+      minWidth: '250px'
+    }
   }
 };
+const mobile = {
+  ...normal,
+  [DataRecordType.INSTRUMENT]: {
+    displayName: 'instrument',
+    additionalStyles: {
+      align: 'left',
+      minWidth: '150px'
+    }
+  }
+};
+const headerConfigs = {
+  normal,
+  longInstruments,
+  mobile
+};
 const assetClassLabels = {
   ALL: 'all',
   [AssetClassName.Currency]: 'currency',
@@ -40,9 +103,5 @@ const assetClassLabels = {
   [AssetClassName.Etfs]: 'etf_cfds',
   [AssetClassName.Indices]: 'index'
 };
-const getHeaderConfig = activeColumns => {
-  const columns = [DataRecordType.INSTRUMENT, ...activeColumns].filter(item => item !== DataRecordType.SENTIMENT);
-  return columns.map(item => headerConfig[item]);
-};
-export { assetClassLabels, getHeaderConfig, headerConfig };
+export { assetClassLabels, headerConfigs };
 //# sourceMappingURL=config.js.map

package/dist/module/InstrumentsTableWidget/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","names":["DataRecordType","AssetClassName","headerConfig","INSTRUMENT","displayName","additionalStyles","SELL","BUY","SPREAD","DAILY_CHANGE","HIGH","LOW","assetClassLabels","ALL","Currency","Commodities","Rates","Cryptocurrency","EquityShares","Etfs","Indices","getHeaderConfig","activeColumns","columns","filter","item","SENTIMENT","map"],"sources":["../../../src/InstrumentsTableWidget/config.ts"],"sourcesContent":["import type { HeaderColumns } from '@oanda/labs-widget-common';\nimport { DataRecordType } from '@oanda/labs-widget-common';\n\nimport { AssetClassName } from '../gql/types/graphql';\nimport type { AssetClassLabels } from './components/Filters/types';\n\ntype HeaderRecordType =\n  | DataRecordType.INSTRUMENT\n  | DataRecordType.SELL\n  | DataRecordType.BUY\n  | DataRecordType.DAILY_CHANGE\n  | DataRecordType.SPREAD\n  | DataRecordType.HIGH\n  | DataRecordType.LOW;\n\nconst headerConfig: Record<\n  HeaderRecordType,\n  { displayName: string; additionalStyles: string }\n> = {\n  [DataRecordType.INSTRUMENT]: {\n    displayName: 'instrument',\n    additionalStyles: 'lw-text-left lw-min-w-[130px]',\n  },\n  [DataRecordType.SELL]: {\n    displayName: 'sell',\n    additionalStyles: 'lw-text-right lw-min-w-[75px] lw-pr-4',\n  },\n  [DataRecordType.BUY]: {\n    displayName: 'buy',\n    additionalStyles: 'lw-text-right lw-min-w-[75px] lw-pr-4',\n  },\n  [DataRecordType.SPREAD]: {\n    displayName: 'spread',\n    additionalStyles: 'lw-text-right lw-min-w-[50px]',\n  },\n  [DataRecordType.DAILY_CHANGE]: {\n    displayName: 'daily_percent_change',\n    additionalStyles: 'lw-text-right lw-min-w-[80px]',\n  },\n  [DataRecordType.HIGH]: {\n    displayName: 'today_high',\n    additionalStyles: 'lw-text-right lw-min-w-[80px]',\n  },\n  [DataRecordType.LOW]: {\n    displayName: 'today_low',\n    additionalStyles: 'lw-text-right lw-min-w-[80px]',\n  },\n};\n\nconst assetClassLabels: Record<AssetClassLabels, string> = {\n  ALL: 'all',\n  [AssetClassName.Currency]: 'currency',\n  [AssetClassName.Commodities]: 'commodity',\n  [AssetClassName.Rates]: 'bond',\n  [AssetClassName.Cryptocurrency]: 'crypto',\n  [AssetClassName.EquityShares]: 'share_cfds',\n  [AssetClassName.Etfs]: 'etf_cfds',\n  [AssetClassName.Indices]: 'index',\n};\n\nconst getHeaderConfig = (activeColumns: DataRecordType[]): HeaderColumns[] => {\n  const columns: HeaderRecordType[] = [\n    DataRecordType.INSTRUMENT,\n    ...activeColumns,\n  ].filter(\n    (item): item is HeaderRecordType => item !== DataRecordType.SENTIMENT\n  );\n\n  return columns.map((item) => headerConfig[item]);\n};\n\nexport { assetClassLabels, getHeaderConfig, headerConfig };\n"],"mappings":"AACA,SAASA,cAAc,QAAQ,2BAA2B;AAE1D,SAASC,cAAc,QAAQ,sBAAsB;AAYrD,MAAMC,YAGL,GAAG;EACF,CAACF,cAAc,CAACG,UAAU,GAAG;IAC3BC,WAAW,EAAE,YAAY;IACzBC,gBAAgB,EAAE;EACpB,CAAC;EACD,CAACL,cAAc,CAACM,IAAI,GAAG;IACrBF,WAAW,EAAE,MAAM;IACnBC,gBAAgB,EAAE;EACpB,CAAC;EACD,CAACL,cAAc,CAACO,GAAG,GAAG;IACpBH,WAAW,EAAE,KAAK;IAClBC,gBAAgB,EAAE;EACpB,CAAC;EACD,CAACL,cAAc,CAACQ,MAAM,GAAG;IACvBJ,WAAW,EAAE,QAAQ;IACrBC,gBAAgB,EAAE;EACpB,CAAC;EACD,CAACL,cAAc,CAACS,YAAY,GAAG;IAC7BL,WAAW,EAAE,sBAAsB;IACnCC,gBAAgB,EAAE;EACpB,CAAC;EACD,CAACL,cAAc,CAACU,IAAI,GAAG;IACrBN,WAAW,EAAE,YAAY;IACzBC,gBAAgB,EAAE;EACpB,CAAC;EACD,CAACL,cAAc,CAACW,GAAG,GAAG;IACpBP,WAAW,EAAE,WAAW;IACxBC,gBAAgB,EAAE;EACpB;AACF,CAAC;AAED,MAAMO,gBAAkD,GAAG;EACzDC,GAAG,EAAE,KAAK;EACV,CAACZ,cAAc,CAACa,QAAQ,GAAG,UAAU;EACrC,CAACb,cAAc,CAACc,WAAW,GAAG,WAAW;EACzC,CAACd,cAAc,CAACe,KAAK,GAAG,MAAM;EAC9B,CAACf,cAAc,CAACgB,cAAc,GAAG,QAAQ;EACzC,CAAChB,cAAc,CAACiB,YAAY,GAAG,YAAY;EAC3C,CAACjB,cAAc,CAACkB,IAAI,GAAG,UAAU;EACjC,CAAClB,cAAc,CAACmB,OAAO,GAAG;AAC5B,CAAC;AAED,MAAMC,eAAe,GAAIC,aAA+B,IAAsB;EAC5E,MAAMC,OAA2B,GAAG,CAClCvB,cAAc,CAACG,UAAU,EACzB,GAAGmB,aAAa,CACjB,CAACE,MAAM,CACLC,IAAI,IAA+BA,IAAI,KAAKzB,cAAc,CAAC0B,SAC9D,CAAC;EAED,OAAOH,OAAO,CAACI,GAAG,CAAEF,IAAI,IAAKvB,YAAY,CAACuB,IAAI,CAAC,CAAC;AAClD,CAAC;AAED,SAASb,gBAAgB,EAAES,eAAe,EAAEnB,YAAY","ignoreList":[]}
+{"version":3,"file":"config.js","names":["DataRecordType","AssetClassName","normal","INSTRUMENT","displayName","additionalStyles","align","minWidth","SELL","paddingRight","BUY","SPREAD","DAILY_CHANGE","HIGH","LOW","TRADE_MODE","SYMBOL","longInstruments","mobile","headerConfigs","assetClassLabels","ALL","Currency","Commodities","Rates","Cryptocurrency","EquityShares","Etfs","Indices"],"sources":["../../../src/InstrumentsTableWidget/config.ts"],"sourcesContent":["import type { HeaderConfigType } from '@oanda/labs-widget-common';\nimport { DataRecordType } from '@oanda/labs-widget-common';\n\nimport { AssetClassName } from '../gql/types/graphql';\nimport type { AssetClassLabels } from './components/Filters/types';\n\nconst normal: HeaderConfigType = {\n  [DataRecordType.INSTRUMENT]: {\n    displayName: 'instrument',\n    additionalStyles: {\n      align: 'left',\n      minWidth: '200px',\n    },\n  },\n  [DataRecordType.SELL]: {\n    displayName: 'sell',\n    additionalStyles: {\n      align: 'right',\n      minWidth: '75px',\n      paddingRight: true,\n    },\n  },\n  [DataRecordType.BUY]: {\n    displayName: 'buy',\n    additionalStyles: {\n      align: 'right',\n      minWidth: '75px',\n      paddingRight: true,\n    },\n  },\n  [DataRecordType.SPREAD]: {\n    displayName: 'spread',\n    additionalStyles: {\n      align: 'right',\n      minWidth: '50px',\n    },\n  },\n  [DataRecordType.DAILY_CHANGE]: {\n    displayName: 'daily_percent_change',\n    additionalStyles: {\n      align: 'right',\n      minWidth: '80px',\n    },\n  },\n  [DataRecordType.HIGH]: {\n    displayName: 'today_high',\n    additionalStyles: {\n      align: 'right',\n      minWidth: '80px',\n    },\n  },\n  [DataRecordType.LOW]: {\n    displayName: 'today_low',\n    additionalStyles: {\n      align: 'right',\n      minWidth: '80px',\n    },\n  },\n  [DataRecordType.TRADE_MODE]: {\n    displayName: 'trade_mode',\n    additionalStyles: {\n      align: 'right',\n      minWidth: '80px',\n      paddingRight: true,\n    },\n  },\n  [DataRecordType.SYMBOL]: {\n    displayName: 'symbol',\n    additionalStyles: {\n      align: 'center',\n      minWidth: '80px',\n    },\n  },\n};\n\nconst longInstruments: HeaderConfigType = {\n  ...normal,\n  [DataRecordType.INSTRUMENT]: {\n    displayName: 'instrument',\n    additionalStyles: {\n      align: 'left',\n      minWidth: '250px',\n    },\n  },\n};\n\nconst mobile: HeaderConfigType = {\n  ...normal,\n  [DataRecordType.INSTRUMENT]: {\n    displayName: 'instrument',\n    additionalStyles: {\n      align: 'left',\n      minWidth: '150px',\n    },\n  },\n};\n\nconst headerConfigs = {\n  normal,\n  longInstruments,\n  mobile,\n};\n\nconst assetClassLabels: Record<AssetClassLabels, string> = {\n  ALL: 'all',\n  [AssetClassName.Currency]: 'currency',\n  [AssetClassName.Commodities]: 'commodity',\n  [AssetClassName.Rates]: 'bond',\n  [AssetClassName.Cryptocurrency]: 'crypto',\n  [AssetClassName.EquityShares]: 'share_cfds',\n  [AssetClassName.Etfs]: 'etf_cfds',\n  [AssetClassName.Indices]: 'index',\n};\n\nexport { assetClassLabels, headerConfigs };\n"],"mappings":"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","ignoreList":[]}

package/dist/module/InstrumentsTableWidget/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["PriceType"],"sources":["../../../src/InstrumentsTableWidget/types.ts"],"sourcesContent":["import type { DataRecordType, WidgetConfig } from '@oanda/labs-widget-common';\n\nimport type {\n  AssetClassName,\n  Division,\n  InstrumentDataSource,\n} from '../gql/types/graphql';\n\nexport enum PriceType {\n  Raw = 'raw',\n  Division = 'division',\n}\n\nexport interface InstrumentsTableConfig extends WidgetConfig {\n  liveRatesUrl: string;\n  instruments?: string[];\n  division: Division;\n  columns?: DataRecordType[];\n  assetClasses?: AssetClassName[];\n  isAssetClassFilterEnabled?: boolean;\n  isInstrumentSearchEnabled?: boolean;\n  recordsPerPage?: number;\n  dataSource: InstrumentDataSource;\n  priceType?: PriceType;\n}\n\nexport interface MainProps {\n  instruments?: string[];\n  division: Division;\n  columns?: DataRecordType[];\n  assetClasses?: AssetClassName[];\n  isAssetClassFilterEnabled?: boolean;\n  isInstrumentSearchEnabled?: boolean;\n  recordsPerPage?: number;\n  dataSource: InstrumentDataSource;\n}\n"],"mappings":"AAQA,WAAYA,SAAS,aAATA,SAAS;EAATA,SAAS;EAATA,SAAS;EAAA,OAATA,SAAS;AAAA","ignoreList":[]}
+{"version":3,"file":"types.js","names":["PriceType"],"sources":["../../../src/InstrumentsTableWidget/types.ts"],"sourcesContent":["import type { DataRecordType, WidgetConfig } from '@oanda/labs-widget-common';\n\nimport type {\n  AssetClassName,\n  Division,\n  InstrumentDataSource,\n} from '../gql/types/graphql';\n\nexport enum PriceType {\n  Raw = 'raw',\n  Division = 'division',\n}\n\nexport interface InstrumentsTableConfig extends WidgetConfig {\n  liveRatesUrl: string;\n  instruments?: string[];\n  division: Division;\n  columns?: DataRecordType[];\n  assetClasses?: AssetClassName[];\n  isAssetClassFilterEnabled?: boolean;\n  isInstrumentSearchEnabled?: boolean;\n  recordsPerPage?: number;\n  dataSource: InstrumentDataSource;\n  priceType?: PriceType;\n}\n\nexport interface MainProps {\n  instruments?: string[];\n  division: Division;\n  columns?: DataRecordType[];\n  assetClasses?: AssetClassName[];\n  isAssetClassFilterEnabled?: boolean;\n  isInstrumentSearchEnabled?: boolean;\n  recordsPerPage?: number;\n  dataSource: InstrumentDataSource;\n  isLiveRatesDisabled?: boolean;\n}\n"],"mappings":"AAQA,WAAYA,SAAS,aAATA,SAAS;EAATA,SAAS;EAATA,SAAS;EAAA,OAATA,SAAS;AAAA","ignoreList":[]}

package/dist/module/translations/sources/en.json

@@ -3,6 +3,7 @@
   "asset_class": "Asset class",
   "bond": "Bond",
   "buy": "Buy",
+  "close_only": "Close Only",
   "commodity": "Commodity",
   "crypto": "Crypto",
   "currency": "Currency",
@@ -12,12 +13,16 @@
   "index": "Index",
   "instrument": "Instrument",
   "instrument_name": "Instrument name",
+  "long_only": "Long Only",
   "no_matching_results": "No matching results",
   "pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} of {{itemCount}} entries",
   "search": "Search",
   "sell": "Sell",
   "share_cfds": "Share CFDs",
+  "short_only": "Short Only",
   "spread": "Spread",
+  "symbol": "Symbol",
   "today_high": "Today High",
-  "today_low": "Today Low"
+  "today_low": "Today Low",
+  "trade_mode": "Trade Mode"
 }

package/dist/types/InstrumentsTableWidget/Main.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { MainProps } from './types';
-declare const Main: ({ instruments, division, assetClasses, columns, isAssetClassFilterEnabled, isInstrumentSearchEnabled, recordsPerPage, dataSource, }: MainProps) => React.JSX.Element;
+declare const Main: ({ instruments, division, assetClasses, columns, isAssetClassFilterEnabled, isInstrumentSearchEnabled, recordsPerPage, dataSource, isLiveRatesDisabled, }: MainProps) => React.JSX.Element;
 export { Main };

package/dist/types/InstrumentsTableWidget/config.d.ts

@@ -1,11 +1,9 @@
-import type { HeaderColumns } from '@oanda/labs-widget-common';
-import { DataRecordType } from '@oanda/labs-widget-common';
+import type { HeaderConfigType } from '@oanda/labs-widget-common';
 import type { AssetClassLabels } from './components/Filters/types';
-type HeaderRecordType = DataRecordType.INSTRUMENT | DataRecordType.SELL | DataRecordType.BUY | DataRecordType.DAILY_CHANGE | DataRecordType.SPREAD | DataRecordType.HIGH | DataRecordType.LOW;
-declare const headerConfig: Record<HeaderRecordType, {
-    displayName: string;
-    additionalStyles: string;
-}>;
+declare const headerConfigs: {
+    normal: HeaderConfigType;
+    longInstruments: HeaderConfigType;
+    mobile: HeaderConfigType;
+};
 declare const assetClassLabels: Record<AssetClassLabels, string>;
-declare const getHeaderConfig: (activeColumns: DataRecordType[]) => HeaderColumns[];
-export { assetClassLabels, getHeaderConfig, headerConfig };
+export { assetClassLabels, headerConfigs };

package/dist/types/InstrumentsTableWidget/types.d.ts

@@ -25,4 +25,5 @@ export interface MainProps {
     isInstrumentSearchEnabled?: boolean;
     recordsPerPage?: number;
     dataSource: InstrumentDataSource;
+    isLiveRatesDisabled?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-instruments-table-widget",
-  "version": "1.0.26",
+  "version": "1.0.27",
   "description": "Labs Instruments Table 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.206",
+    "@oanda/labs-widget-common": "^1.0.207",
     "@oanda/mono-i18n": "10.0.1",
     "graphql": "16.8.1"
   },
@@ -20,5 +20,5 @@
     "@graphql-codegen/cli": "5.0.0",
     "@graphql-codegen/client-preset": "4.1.0"
   },
-  "gitHead": "8e9089b3a4cc94275dd2223e7fed7aae070fe454"
+  "gitHead": "31dcda0050419adc006433a90226fc9f0441b551"
 }

package/src/InstrumentsTableWidget/InstrumentsTableWidget.tsx

@@ -1,5 +1,9 @@
 import { ApolloClient, InMemoryCache } from '@apollo/client';
-import { WidgetProvider, WidgetWrapper } from '@oanda/labs-widget-common';
+import {
+  DataRecordType,
+  WidgetProvider,
+  WidgetWrapper,
+} from '@oanda/labs-widget-common';
 import React from 'react';
 
 import { translations } from '../translations';
@@ -35,13 +39,27 @@ const InstrumentsTableWidget = ({
     dataSource
   );
 
+  const liveRates =
+    !columns ||
+    columns?.some(
+      (column) =>
+        column === DataRecordType.BUY ||
+        column === DataRecordType.SELL ||
+        column === DataRecordType.DAILY_CHANGE ||
+        column === DataRecordType.SPREAD ||
+        column === DataRecordType.HIGH ||
+        column === DataRecordType.LOW
+    )
+      ? {
+          url: liveRatesUrl,
+          options: { divisionCode, dataSource },
+        }
+      : undefined;
+
   return (
     <WidgetProvider
       client={client}
-      liveRates={{
-        url: liveRatesUrl,
-        options: { divisionCode, dataSource },
-      }}
+      liveRates={liveRates}
       locale={locale}
       theme={theme}
       translations={translations}
@@ -59,6 +77,7 @@ const InstrumentsTableWidget = ({
           instruments={instruments}
           isAssetClassFilterEnabled={isAssetClassFilterEnabled}
           isInstrumentSearchEnabled={isInstrumentSearchEnabled}
+          isLiveRatesDisabled={liveRates === undefined}
           recordsPerPage={recordsPerPage}
         />
       </WidgetWrapper>

package/src/InstrumentsTableWidget/Main.tsx

@@ -1,8 +1,11 @@
 import { useQuery } from '@apollo/client';
 import type { DataRecord } from '@oanda/labs-widget-common';
 import {
+  getHeaderConfig,
   Pagination,
+  Size,
   TableWidget,
+  useLayoutProvider,
   useLiveRatesQuery,
 } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
@@ -16,7 +19,7 @@ import {
   type ResolveInstrumentsWithFiltersQueryVariables,
 } from '../gql/types/graphql';
 import { Filters } from './components';
-import { assetClassLabels, getHeaderConfig } from './config';
+import { assetClassLabels, headerConfigs } from './config';
 import { DEFAULT_COLUMNS, INSTRUMENT_TOOLTIP_ID } from './constant';
 import type { MainProps } from './types';
 
@@ -27,15 +30,20 @@ const Main = ({
   columns = DEFAULT_COLUMNS,
   isAssetClassFilterEnabled,
   isInstrumentSearchEnabled,
-  recordsPerPage = 10,
+  recordsPerPage,
   dataSource,
+  isLiveRatesDisabled,
 }: MainProps) => {
   const documentRef = useRef<Document>(document);
+  const { size } = useLayoutProvider();
+  const isDesktop = size === Size.DESKTOP;
+
   const { lang } = useLocale();
-  const { target, setQuery, closeQuery } = useLiveRatesQuery();
+  const { target, setQuery, closeQuery } =
+    useLiveRatesQuery(isLiveRatesDisabled);
 
   const [records, setRecords] = useState<DataRecord[]>(
-    new Array(recordsPerPage).fill({})
+    new Array(recordsPerPage || 10).fill({})
   );
 
   const [totalRecords, setTotalRecords] = useState<number>(0);
@@ -52,7 +60,7 @@ const Main = ({
     });
 
   const pageNumber = queryVariables.offset
-    ? Math.floor(queryVariables.offset / recordsPerPage)
+    ? Math.floor(queryVariables.offset / (recordsPerPage || 1))
     : 0;
 
   const { data, error, loading } = useQuery<
@@ -105,11 +113,17 @@ const Main = ({
 
   useEventListener('visibilitychange', onVisibilityChange, documentRef);
 
+  const headerConfig = !isDesktop
+    ? headerConfigs.mobile
+    : columns.length < 4
+      ? headerConfigs.longInstruments
+      : headerConfigs.normal;
+
   return (
     <>
       <TableWidget
         PaginationComponent={
-          records.length > 0 ? (
+          records.length > 0 && recordsPerPage ? (
             <Pagination
               currentPage={pageNumber}
               disabled={loading}
@@ -167,7 +181,10 @@ const Main = ({
         activeColumns={columns}
         count={totalRecords}
         hasError={showError}
-        headerColumns={getHeaderConfig(columns)}
+        headerColumns={getHeaderConfig(columns, headerConfig)}
+        instrumentColumnWidth={
+          headerConfig.instrument?.additionalStyles.minWidth
+        }
         isLoading={loading}
         pageNumber={pageNumber}
         records={records}

package/src/InstrumentsTableWidget/config.ts

@@ -1,52 +1,106 @@
-import type { HeaderColumns } from '@oanda/labs-widget-common';
+import type { HeaderConfigType } from '@oanda/labs-widget-common';
 import { DataRecordType } from '@oanda/labs-widget-common';
 
 import { AssetClassName } from '../gql/types/graphql';
 import type { AssetClassLabels } from './components/Filters/types';
 
-type HeaderRecordType =
-  | DataRecordType.INSTRUMENT
-  | DataRecordType.SELL
-  | DataRecordType.BUY
-  | DataRecordType.DAILY_CHANGE
-  | DataRecordType.SPREAD
-  | DataRecordType.HIGH
-  | DataRecordType.LOW;
-
-const headerConfig: Record<
-  HeaderRecordType,
-  { displayName: string; additionalStyles: string }
-> = {
+const normal: HeaderConfigType = {
   [DataRecordType.INSTRUMENT]: {
     displayName: 'instrument',
-    additionalStyles: 'lw-text-left lw-min-w-[130px]',
+    additionalStyles: {
+      align: 'left',
+      minWidth: '200px',
+    },
   },
   [DataRecordType.SELL]: {
     displayName: 'sell',
-    additionalStyles: 'lw-text-right lw-min-w-[75px] lw-pr-4',
+    additionalStyles: {
+      align: 'right',
+      minWidth: '75px',
+      paddingRight: true,
+    },
   },
   [DataRecordType.BUY]: {
     displayName: 'buy',
-    additionalStyles: 'lw-text-right lw-min-w-[75px] lw-pr-4',
+    additionalStyles: {
+      align: 'right',
+      minWidth: '75px',
+      paddingRight: true,
+    },
   },
   [DataRecordType.SPREAD]: {
     displayName: 'spread',
-    additionalStyles: 'lw-text-right lw-min-w-[50px]',
+    additionalStyles: {
+      align: 'right',
+      minWidth: '50px',
+    },
   },
   [DataRecordType.DAILY_CHANGE]: {
     displayName: 'daily_percent_change',
-    additionalStyles: 'lw-text-right lw-min-w-[80px]',
+    additionalStyles: {
+      align: 'right',
+      minWidth: '80px',
+    },
   },
   [DataRecordType.HIGH]: {
     displayName: 'today_high',
-    additionalStyles: 'lw-text-right lw-min-w-[80px]',
+    additionalStyles: {
+      align: 'right',
+      minWidth: '80px',
+    },
   },
   [DataRecordType.LOW]: {
     displayName: 'today_low',
-    additionalStyles: 'lw-text-right lw-min-w-[80px]',
+    additionalStyles: {
+      align: 'right',
+      minWidth: '80px',
+    },
+  },
+  [DataRecordType.TRADE_MODE]: {
+    displayName: 'trade_mode',
+    additionalStyles: {
+      align: 'right',
+      minWidth: '80px',
+      paddingRight: true,
+    },
+  },
+  [DataRecordType.SYMBOL]: {
+    displayName: 'symbol',
+    additionalStyles: {
+      align: 'center',
+      minWidth: '80px',
+    },
+  },
+};
+
+const longInstruments: HeaderConfigType = {
+  ...normal,
+  [DataRecordType.INSTRUMENT]: {
+    displayName: 'instrument',
+    additionalStyles: {
+      align: 'left',
+      minWidth: '250px',
+    },
+  },
+};
+
+const mobile: HeaderConfigType = {
+  ...normal,
+  [DataRecordType.INSTRUMENT]: {
+    displayName: 'instrument',
+    additionalStyles: {
+      align: 'left',
+      minWidth: '150px',
+    },
   },
 };
 
+const headerConfigs = {
+  normal,
+  longInstruments,
+  mobile,
+};
+
 const assetClassLabels: Record<AssetClassLabels, string> = {
   ALL: 'all',
   [AssetClassName.Currency]: 'currency',
@@ -58,15 +112,4 @@ const assetClassLabels: Record<AssetClassLabels, string> = {
   [AssetClassName.Indices]: 'index',
 };
 
-const getHeaderConfig = (activeColumns: DataRecordType[]): HeaderColumns[] => {
-  const columns: HeaderRecordType[] = [
-    DataRecordType.INSTRUMENT,
-    ...activeColumns,
-  ].filter(
-    (item): item is HeaderRecordType => item !== DataRecordType.SENTIMENT
-  );
-
-  return columns.map((item) => headerConfig[item]);
-};
-
-export { assetClassLabels, getHeaderConfig, headerConfig };
+export { assetClassLabels, headerConfigs };

package/src/InstrumentsTableWidget/types.ts

@@ -33,4 +33,5 @@ export interface MainProps {
   isInstrumentSearchEnabled?: boolean;
   recordsPerPage?: number;
   dataSource: InstrumentDataSource;
+  isLiveRatesDisabled?: boolean;
 }

package/src/translations/sources/en.json

@@ -3,6 +3,7 @@
   "asset_class": "Asset class",
   "bond": "Bond",
   "buy": "Buy",
+  "close_only": "Close Only",
   "commodity": "Commodity",
   "crypto": "Crypto",
   "currency": "Currency",
@@ -12,12 +13,16 @@
   "index": "Index",
   "instrument": "Instrument",
   "instrument_name": "Instrument name",
+  "long_only": "Long Only",
   "no_matching_results": "No matching results",
   "pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} of {{itemCount}} entries",
   "search": "Search",
   "sell": "Sell",
   "share_cfds": "Share CFDs",
+  "short_only": "Short Only",
   "spread": "Spread",
+  "symbol": "Symbol",
   "today_high": "Today High",
-  "today_low": "Today Low"
+  "today_low": "Today Low",
+  "trade_mode": "Trade Mode"
 }

package/test/Main.test.tsx

@@ -31,6 +31,7 @@ describe('Main component', () => {
               dataSource={InstrumentDataSource.V20}
               division={Division.Oc}
               instruments={['EUR_USD', 'GBP_USD']}
+              recordsPerPage={10}
             />
           </MockLayoutProvider>
         </LiveRatesProvider>