@oanda/labs-topical-instruments-widget 1.0.205 → 1.0.207

package/dist/main/TopicalInstrumentsWidget/Main.js

@@ -125,7 +125,7 @@ const Main = _ref => {
     activeColumns: columns,
     count: count,
     hasError: showError,
-    headerColumns: (0, _config.getHeaderConfig)(columns),
+    headerColumns: (0, _labsWidgetCommon.getHeaderConfig)(columns, _config.headerConfig),
     isChartLoading: loading,
     isLoading: mainLoading,
     pageNumber: pageNumber,

package/dist/main/TopicalInstrumentsWidget/Main.js.map

@@ -1 +1 @@
-{"version":3,"file":"Main.js","names":["_labsWidgetCommon","require","_monoI18n","_react","_interopRequireWildcard","_getInstrumentsChart","_getTopicalInstruments","_graphql","_config","_constant","_utils","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Main","_ref","sort","assetClass","division","count","DEFAULT_COUNT","columns","DEFAULT_COLUMNS","emptyRecords","Array","fill","lang","useLocale","size","useLayoutProvider","target","setQuery","useLiveRatesQuery","pageNumber","setPageNumber","useState","tiSort","setTiSort","TopicalSort","Popular","records","setRecords","isDesktop","Size","DESKTOP","navigationConfig","Division","Oc","navigationConfigOC","navigationConfigDefault","isTool","undefined","data","mainLoading","loading","error","useFetchCombinedDataRecords","mainQuery","getTopicalInstruments","mainVariables","offset","batchQuery","getInstrumentsChart","getBatchVariables","mainData","topicalInstruments","map","displayName","length","instruments","merge","chartData","getRecords","fetchPolicy","useEffect","instrument","_ref2","chart","_ref3","handleTabClick","currentTarget","value","handlePageChange","num","showError","isPaginationDisabled","totalCount","createElement","TableWidget","PaginationComponent","Pagination","currentPage","disabled","recordsPerPage","totalRecords","DEFAULT_TOTAL_COUNT","onPageChange","TabsComponent","Tabs","mobileFullWidth","activeTab","handleClick","items","labelCallback","activeColumns","hasError","headerColumns","getHeaderConfig","isChartLoading","isLoading","testId","timestamp","updatedAt","toolTipId","INSTRUMENT_TOOLTIP_ID","exports"],"sources":["../../../src/TopicalInstrumentsWidget/Main.tsx"],"sourcesContent":["import type { DataRecord } from '@oanda/labs-widget-common';\nimport {\n  Pagination,\n  Size,\n  TableWidget,\n  Tabs,\n  useFetchCombinedDataRecords,\n  useLayoutProvider,\n  useLiveRatesQuery,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport React, { useEffect, useState } from 'react';\n\nimport { getInstrumentsChart } from '../gql/getInstrumentsChart';\nimport { getTopicalInstruments } from '../gql/getTopicalInstruments';\nimport {\n  Division,\n  type GetInstrumentsChartQuery,\n  type GetInstrumentsChartQueryVariables,\n  type GetTopicalInstrumentsQuery,\n  type GetTopicalInstrumentsQueryVariables,\n  TopicalSort,\n} from '../gql/types/graphql';\nimport {\n  getHeaderConfig,\n  navigationConfigDefault,\n  navigationConfigOC,\n} from './config';\nimport {\n  DEFAULT_COLUMNS,\n  DEFAULT_COUNT,\n  DEFAULT_TOTAL_COUNT,\n  INSTRUMENT_TOOLTIP_ID,\n} from './constant';\nimport type { MainProps, TopicalInstrumentsData } from './types';\nimport { getRecords } from './utils';\n\nexport const Main = ({\n  sort,\n  assetClass,\n  division,\n  count = DEFAULT_COUNT,\n  columns = DEFAULT_COLUMNS,\n}: MainProps) => {\n  const emptyRecords = Array(count).fill({});\n  const { lang } = useLocale();\n  const { size } = useLayoutProvider();\n  const { target, setQuery } = useLiveRatesQuery();\n\n  const [pageNumber, setPageNumber] = useState(0);\n  const [tiSort, setTiSort] = useState(sort || TopicalSort.Popular);\n  const [records, setRecords] = useState<DataRecord[]>(emptyRecords);\n\n  const isDesktop = size === Size.DESKTOP;\n  const navigationConfig =\n    division === Division.Oc ? navigationConfigOC : navigationConfigDefault;\n  const isTool = sort === undefined;\n\n  const { data, mainLoading, loading, error } = useFetchCombinedDataRecords<\n    GetTopicalInstrumentsQuery,\n    GetTopicalInstrumentsQueryVariables,\n    GetInstrumentsChartQuery,\n    GetInstrumentsChartQueryVariables,\n    TopicalInstrumentsData\n  >({\n    mainQuery: getTopicalInstruments,\n    mainVariables: {\n      sort: tiSort,\n      division,\n      assetClass,\n      count,\n      offset: pageNumber * 10,\n    },\n    batchQuery: getInstrumentsChart,\n    getBatchVariables: (mainData) => {\n      const topicalInstruments = mainData?.topicalInstruments?.map(\n        (i) => i.displayName\n      );\n      return topicalInstruments?.length\n        ? { instruments: topicalInstruments, division }\n        : undefined;\n    },\n    merge: (mainData, chartData) => getRecords(mainData, chartData),\n    fetchPolicy: 'network-only',\n  });\n\n  useEffect(() => {\n    if (!mainLoading && data) {\n      setRecords(data.records ?? []);\n    }\n  }, [mainLoading, data]);\n\n  useEffect(() => {\n    if (records[0].instrument) {\n      const instruments = records.map(({ instrument }) => instrument);\n      setQuery({ instruments });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isDesktop]);\n\n  useEffect(() => {\n    if (records[0].instrument && records[0].chart?.length === 0) {\n      const instruments = records.map(({ instrument }) => instrument);\n      setQuery({ instruments });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [records]);\n\n  const handleTabClick = (e: React.SyntheticEvent<HTMLButtonElement>) => {\n    setRecords(emptyRecords);\n    setTiSort(e.currentTarget.value as TopicalSort);\n    setPageNumber(0);\n  };\n\n  const handlePageChange = (num: number) => {\n    setRecords(emptyRecords);\n    setPageNumber(num);\n  };\n\n  const showError = !!error || data?.records?.length === 0;\n  const isPaginationDisabled =\n    mainLoading || (!!data?.totalCount && data?.totalCount <= count);\n\n  return (\n    <TableWidget\n      PaginationComponent={\n        isTool ? (\n          <Pagination\n            currentPage={pageNumber}\n            disabled={isPaginationDisabled}\n            recordsPerPage={count}\n            totalRecords={data?.totalCount ?? DEFAULT_TOTAL_COUNT}\n            onPageChange={handlePageChange}\n          />\n        ) : undefined\n      }\n      TabsComponent={\n        isTool ? (\n          <Tabs\n            mobileFullWidth\n            activeTab={tiSort}\n            handleClick={handleTabClick}\n            items={navigationConfig}\n            labelCallback={lang}\n          />\n        ) : undefined\n      }\n      activeColumns={columns}\n      count={count}\n      hasError={showError}\n      headerColumns={getHeaderConfig(columns)}\n      isChartLoading={loading}\n      isLoading={mainLoading}\n      pageNumber={pageNumber}\n      records={records}\n      target={target}\n      testId=\"topical-instruments-wrapper\"\n      timestamp={data?.updatedAt}\n      toolTipId={INSTRUMENT_TOOLTIP_ID}\n    />\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Main.js","names":["_labsWidgetCommon","require","_monoI18n","_react","_interopRequireWildcard","_getInstrumentsChart","_getTopicalInstruments","_graphql","_config","_constant","_utils","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Main","_ref","sort","assetClass","division","count","DEFAULT_COUNT","columns","DEFAULT_COLUMNS","emptyRecords","Array","fill","lang","useLocale","size","useLayoutProvider","target","setQuery","useLiveRatesQuery","pageNumber","setPageNumber","useState","tiSort","setTiSort","TopicalSort","Popular","records","setRecords","isDesktop","Size","DESKTOP","navigationConfig","Division","Oc","navigationConfigOC","navigationConfigDefault","isTool","undefined","data","mainLoading","loading","error","useFetchCombinedDataRecords","mainQuery","getTopicalInstruments","mainVariables","offset","batchQuery","getInstrumentsChart","getBatchVariables","mainData","topicalInstruments","map","displayName","length","instruments","merge","chartData","getRecords","fetchPolicy","useEffect","instrument","_ref2","chart","_ref3","handleTabClick","currentTarget","value","handlePageChange","num","showError","isPaginationDisabled","totalCount","createElement","TableWidget","PaginationComponent","Pagination","currentPage","disabled","recordsPerPage","totalRecords","DEFAULT_TOTAL_COUNT","onPageChange","TabsComponent","Tabs","mobileFullWidth","activeTab","handleClick","items","labelCallback","activeColumns","hasError","headerColumns","getHeaderConfig","headerConfig","isChartLoading","isLoading","testId","timestamp","updatedAt","toolTipId","INSTRUMENT_TOOLTIP_ID","exports"],"sources":["../../../src/TopicalInstrumentsWidget/Main.tsx"],"sourcesContent":["import type { DataRecord } from '@oanda/labs-widget-common';\nimport {\n  getHeaderConfig,\n  Pagination,\n  Size,\n  TableWidget,\n  Tabs,\n  useFetchCombinedDataRecords,\n  useLayoutProvider,\n  useLiveRatesQuery,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport React, { useEffect, useState } from 'react';\n\nimport { getInstrumentsChart } from '../gql/getInstrumentsChart';\nimport { getTopicalInstruments } from '../gql/getTopicalInstruments';\nimport {\n  Division,\n  type GetInstrumentsChartQuery,\n  type GetInstrumentsChartQueryVariables,\n  type GetTopicalInstrumentsQuery,\n  type GetTopicalInstrumentsQueryVariables,\n  TopicalSort,\n} from '../gql/types/graphql';\nimport {\n  headerConfig,\n  navigationConfigDefault,\n  navigationConfigOC,\n} from './config';\nimport {\n  DEFAULT_COLUMNS,\n  DEFAULT_COUNT,\n  DEFAULT_TOTAL_COUNT,\n  INSTRUMENT_TOOLTIP_ID,\n} from './constant';\nimport type { MainProps, TopicalInstrumentsData } from './types';\nimport { getRecords } from './utils';\n\nexport const Main = ({\n  sort,\n  assetClass,\n  division,\n  count = DEFAULT_COUNT,\n  columns = DEFAULT_COLUMNS,\n}: MainProps) => {\n  const emptyRecords = Array(count).fill({});\n  const { lang } = useLocale();\n  const { size } = useLayoutProvider();\n  const { target, setQuery } = useLiveRatesQuery();\n\n  const [pageNumber, setPageNumber] = useState(0);\n  const [tiSort, setTiSort] = useState(sort || TopicalSort.Popular);\n  const [records, setRecords] = useState<DataRecord[]>(emptyRecords);\n\n  const isDesktop = size === Size.DESKTOP;\n  const navigationConfig =\n    division === Division.Oc ? navigationConfigOC : navigationConfigDefault;\n  const isTool = sort === undefined;\n\n  const { data, mainLoading, loading, error } = useFetchCombinedDataRecords<\n    GetTopicalInstrumentsQuery,\n    GetTopicalInstrumentsQueryVariables,\n    GetInstrumentsChartQuery,\n    GetInstrumentsChartQueryVariables,\n    TopicalInstrumentsData\n  >({\n    mainQuery: getTopicalInstruments,\n    mainVariables: {\n      sort: tiSort,\n      division,\n      assetClass,\n      count,\n      offset: pageNumber * 10,\n    },\n    batchQuery: getInstrumentsChart,\n    getBatchVariables: (mainData) => {\n      const topicalInstruments = mainData?.topicalInstruments?.map(\n        (i) => i.displayName\n      );\n      return topicalInstruments?.length\n        ? { instruments: topicalInstruments, division }\n        : undefined;\n    },\n    merge: (mainData, chartData) => getRecords(mainData, chartData),\n    fetchPolicy: 'network-only',\n  });\n\n  useEffect(() => {\n    if (!mainLoading && data) {\n      setRecords(data.records ?? []);\n    }\n  }, [mainLoading, data]);\n\n  useEffect(() => {\n    if (records[0].instrument) {\n      const instruments = records.map(({ instrument }) => instrument);\n      setQuery({ instruments });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isDesktop]);\n\n  useEffect(() => {\n    if (records[0].instrument && records[0].chart?.length === 0) {\n      const instruments = records.map(({ instrument }) => instrument);\n      setQuery({ instruments });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [records]);\n\n  const handleTabClick = (e: React.SyntheticEvent<HTMLButtonElement>) => {\n    setRecords(emptyRecords);\n    setTiSort(e.currentTarget.value as TopicalSort);\n    setPageNumber(0);\n  };\n\n  const handlePageChange = (num: number) => {\n    setRecords(emptyRecords);\n    setPageNumber(num);\n  };\n\n  const showError = !!error || data?.records?.length === 0;\n  const isPaginationDisabled =\n    mainLoading || (!!data?.totalCount && data?.totalCount <= count);\n\n  return (\n    <TableWidget\n      PaginationComponent={\n        isTool ? (\n          <Pagination\n            currentPage={pageNumber}\n            disabled={isPaginationDisabled}\n            recordsPerPage={count}\n            totalRecords={data?.totalCount ?? DEFAULT_TOTAL_COUNT}\n            onPageChange={handlePageChange}\n          />\n        ) : undefined\n      }\n      TabsComponent={\n        isTool ? (\n          <Tabs\n            mobileFullWidth\n            activeTab={tiSort}\n            handleClick={handleTabClick}\n            items={navigationConfig}\n            labelCallback={lang}\n          />\n        ) : undefined\n      }\n      activeColumns={columns}\n      count={count}\n      hasError={showError}\n      headerColumns={getHeaderConfig(columns, headerConfig)}\n      isChartLoading={loading}\n      isLoading={mainLoading}\n      pageNumber={pageNumber}\n      records={records}\n      target={target}\n      testId=\"topical-instruments-wrapper\"\n      timestamp={data?.updatedAt}\n      toolTipId={INSTRUMENT_TOOLTIP_ID}\n    />\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/main/TopicalInstrumentsWidget/config.js

@@ -3,44 +3,62 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.navigationConfigOC = exports.navigationConfigDefault = exports.headerConfig = exports.getHeaderConfig = void 0;
+exports.navigationConfigOC = exports.navigationConfigDefault = exports.headerConfig = void 0;
 var _labsWidgetCommon = require("@oanda/labs-widget-common");
 var _graphql = require("../gql/types/graphql");
 const headerConfig = exports.headerConfig = {
   [_labsWidgetCommon.DataRecordType.INSTRUMENT]: {
     displayName: 'instrument',
-    additionalStyles: 'lw-text-left lw-min-w-[130px]'
+    additionalStyles: {
+      align: 'left',
+      minWidth: '130px'
+    }
   },
   [_labsWidgetCommon.DataRecordType.SELL]: {
     displayName: 'sell',
-    additionalStyles: 'lw-text-right lw-min-w-[75px] lw-pr-4'
+    additionalStyles: {
+      align: 'right',
+      minWidth: '75px',
+      paddingRight: true
+    }
   },
   [_labsWidgetCommon.DataRecordType.BUY]: {
     displayName: 'buy',
-    additionalStyles: 'lw-text-right lw-min-w-[75px] lw-pr-4'
+    additionalStyles: {
+      align: 'right',
+      minWidth: '75px',
+      paddingRight: true
+    }
   },
   [_labsWidgetCommon.DataRecordType.DAILY_CHANGE]: {
     displayName: 'daily_percent_change',
-    additionalStyles: 'lw-text-right lw-min-w-[80px]'
+    additionalStyles: {
+      align: 'right',
+      minWidth: '80px'
+    }
   },
   [_labsWidgetCommon.DataRecordType.CHART]: {
     displayName: '24h_chart',
-    additionalStyles: 'lw-text-center lw-min-w-[100px]'
+    additionalStyles: {
+      align: 'center',
+      minWidth: '100px'
+    }
   },
   [_labsWidgetCommon.DataRecordType.SPREAD]: {
     displayName: 'spread',
-    additionalStyles: 'lw-text-right lw-min-w-[50px]'
+    additionalStyles: {
+      align: 'right',
+      minWidth: '50px'
+    }
   },
   [_labsWidgetCommon.DataRecordType.SENTIMENT]: {
     displayName: 'sentiment',
-    additionalStyles: 'lw-text-center lw-min-w-[190px]'
+    additionalStyles: {
+      align: 'center',
+      minWidth: '190px'
+    }
   }
 };
-const getHeaderConfig = activeColumns => {
-  const columns = [_labsWidgetCommon.DataRecordType.INSTRUMENT, ...activeColumns].filter(item => item !== _labsWidgetCommon.DataRecordType.LOW && item !== _labsWidgetCommon.DataRecordType.HIGH);
-  return columns.map(item => headerConfig[item]);
-};
-exports.getHeaderConfig = getHeaderConfig;
 const navigationConfigDefault = exports.navigationConfigDefault = [{
   id: _graphql.TopicalSort.Popular,
   label: 'popular'

package/dist/main/TopicalInstrumentsWidget/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","names":["_labsWidgetCommon","require","_graphql","headerConfig","exports","DataRecordType","INSTRUMENT","displayName","additionalStyles","SELL","BUY","DAILY_CHANGE","CHART","SPREAD","SENTIMENT","getHeaderConfig","activeColumns","columns","filter","item","LOW","HIGH","map","navigationConfigDefault","id","TopicalSort","Popular","label","Hot","Volatile","Bullish","Bearish","navigationConfigOC"],"sources":["../../../src/TopicalInstrumentsWidget/config.ts"],"sourcesContent":["import type { HeaderColumns } from '@oanda/labs-widget-common';\nimport { DataRecordType } from '@oanda/labs-widget-common';\n\nimport { TopicalSort } from '../gql/types/graphql';\n\ntype HeaderRecordType =\n  | DataRecordType.INSTRUMENT\n  | DataRecordType.SELL\n  | DataRecordType.BUY\n  | DataRecordType.DAILY_CHANGE\n  | DataRecordType.CHART\n  | DataRecordType.SPREAD\n  | DataRecordType.SENTIMENT;\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.DAILY_CHANGE]: {\n    displayName: 'daily_percent_change',\n    additionalStyles: 'lw-text-right lw-min-w-[80px]',\n  },\n  [DataRecordType.CHART]: {\n    displayName: '24h_chart',\n    additionalStyles: 'lw-text-center lw-min-w-[100px]',\n  },\n  [DataRecordType.SPREAD]: {\n    displayName: 'spread',\n    additionalStyles: 'lw-text-right lw-min-w-[50px]',\n  },\n  [DataRecordType.SENTIMENT]: {\n    displayName: 'sentiment',\n    additionalStyles: 'lw-text-center lw-min-w-[190px]',\n  },\n};\n\nconst getHeaderConfig = (activeColumns: DataRecordType[]): HeaderColumns[] => {\n  const columns: HeaderRecordType[] = [\n    DataRecordType.INSTRUMENT,\n    ...activeColumns,\n  ].filter(\n    (item): item is HeaderRecordType =>\n      item !== DataRecordType.LOW && item !== DataRecordType.HIGH\n  );\n\n  return columns.map((item) => headerConfig[item]);\n};\n\nconst navigationConfigDefault = [\n  {\n    id: TopicalSort.Popular,\n    label: 'popular',\n  },\n  {\n    id: TopicalSort.Hot,\n    label: 'hot',\n  },\n  {\n    id: TopicalSort.Volatile,\n    label: 'volatile',\n  },\n  {\n    id: TopicalSort.Bullish,\n    label: 'bullish',\n  },\n  {\n    id: TopicalSort.Bearish,\n    label: 'bearish',\n  },\n];\n\nconst navigationConfigOC = [\n  {\n    id: TopicalSort.Popular,\n    label: 'most_traded',\n  },\n  {\n    id: TopicalSort.Hot,\n    label: 'high_volume',\n  },\n  {\n    id: TopicalSort.Volatile,\n    label: 'volatile',\n  },\n  {\n    id: TopicalSort.Bullish,\n    label: 'net_long',\n  },\n  {\n    id: TopicalSort.Bearish,\n    label: 'net_short',\n  },\n];\n\nexport {\n  getHeaderConfig,\n  headerConfig,\n  navigationConfigDefault,\n  navigationConfigOC,\n};\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,OAAA;AAEA,IAAAC,QAAA,GAAAD,OAAA;AAWA,MAAME,YAGL,GAAAC,OAAA,CAAAD,YAAA,GAAG;EACF,CAACE,gCAAc,CAACC,UAAU,GAAG;IAC3BC,WAAW,EAAE,YAAY;IACzBC,gBAAgB,EAAE;EACpB,CAAC;EACD,CAACH,gCAAc,CAACI,IAAI,GAAG;IACrBF,WAAW,EAAE,MAAM;IACnBC,gBAAgB,EAAE;EACpB,CAAC;EACD,CAACH,gCAAc,CAACK,GAAG,GAAG;IACpBH,WAAW,EAAE,KAAK;IAClBC,gBAAgB,EAAE;EACpB,CAAC;EACD,CAACH,gCAAc,CAACM,YAAY,GAAG;IAC7BJ,WAAW,EAAE,sBAAsB;IACnCC,gBAAgB,EAAE;EACpB,CAAC;EACD,CAACH,gCAAc,CAACO,KAAK,GAAG;IACtBL,WAAW,EAAE,WAAW;IACxBC,gBAAgB,EAAE;EACpB,CAAC;EACD,CAACH,gCAAc,CAACQ,MAAM,GAAG;IACvBN,WAAW,EAAE,QAAQ;IACrBC,gBAAgB,EAAE;EACpB,CAAC;EACD,CAACH,gCAAc,CAACS,SAAS,GAAG;IAC1BP,WAAW,EAAE,WAAW;IACxBC,gBAAgB,EAAE;EACpB;AACF,CAAC;AAED,MAAMO,eAAe,GAAIC,aAA+B,IAAsB;EAC5E,MAAMC,OAA2B,GAAG,CAClCZ,gCAAc,CAACC,UAAU,EACzB,GAAGU,aAAa,CACjB,CAACE,MAAM,CACLC,IAAI,IACHA,IAAI,KAAKd,gCAAc,CAACe,GAAG,IAAID,IAAI,KAAKd,gCAAc,CAACgB,IAC3D,CAAC;EAED,OAAOJ,OAAO,CAACK,GAAG,CAAEH,IAAI,IAAKhB,YAAY,CAACgB,IAAI,CAAC,CAAC;AAClD,CAAC;AAACf,OAAA,CAAAW,eAAA,GAAAA,eAAA;AAEF,MAAMQ,uBAAuB,GAAAnB,OAAA,CAAAmB,uBAAA,GAAG,CAC9B;EACEC,EAAE,EAAEC,oBAAW,CAACC,OAAO;EACvBC,KAAK,EAAE;AACT,CAAC,EACD;EACEH,EAAE,EAAEC,oBAAW,CAACG,GAAG;EACnBD,KAAK,EAAE;AACT,CAAC,EACD;EACEH,EAAE,EAAEC,oBAAW,CAACI,QAAQ;EACxBF,KAAK,EAAE;AACT,CAAC,EACD;EACEH,EAAE,EAAEC,oBAAW,CAACK,OAAO;EACvBH,KAAK,EAAE;AACT,CAAC,EACD;EACEH,EAAE,EAAEC,oBAAW,CAACM,OAAO;EACvBJ,KAAK,EAAE;AACT,CAAC,CACF;AAED,MAAMK,kBAAkB,GAAA5B,OAAA,CAAA4B,kBAAA,GAAG,CACzB;EACER,EAAE,EAAEC,oBAAW,CAACC,OAAO;EACvBC,KAAK,EAAE;AACT,CAAC,EACD;EACEH,EAAE,EAAEC,oBAAW,CAACG,GAAG;EACnBD,KAAK,EAAE;AACT,CAAC,EACD;EACEH,EAAE,EAAEC,oBAAW,CAACI,QAAQ;EACxBF,KAAK,EAAE;AACT,CAAC,EACD;EACEH,EAAE,EAAEC,oBAAW,CAACK,OAAO;EACvBH,KAAK,EAAE;AACT,CAAC,EACD;EACEH,EAAE,EAAEC,oBAAW,CAACM,OAAO;EACvBJ,KAAK,EAAE;AACT,CAAC,CACF","ignoreList":[]}
+{"version":3,"file":"config.js","names":["_labsWidgetCommon","require","_graphql","headerConfig","exports","DataRecordType","INSTRUMENT","displayName","additionalStyles","align","minWidth","SELL","paddingRight","BUY","DAILY_CHANGE","CHART","SPREAD","SENTIMENT","navigationConfigDefault","id","TopicalSort","Popular","label","Hot","Volatile","Bullish","Bearish","navigationConfigOC"],"sources":["../../../src/TopicalInstrumentsWidget/config.ts"],"sourcesContent":["import type { HeaderConfigType } from '@oanda/labs-widget-common';\nimport { DataRecordType } from '@oanda/labs-widget-common';\n\nimport { TopicalSort } from '../gql/types/graphql';\n\nconst headerConfig: HeaderConfigType = {\n  [DataRecordType.INSTRUMENT]: {\n    displayName: 'instrument',\n    additionalStyles: {\n      align: 'left',\n      minWidth: '130px',\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.DAILY_CHANGE]: {\n    displayName: 'daily_percent_change',\n    additionalStyles: {\n      align: 'right',\n      minWidth: '80px',\n    },\n  },\n  [DataRecordType.CHART]: {\n    displayName: '24h_chart',\n    additionalStyles: {\n      align: 'center',\n      minWidth: '100px',\n    },\n  },\n  [DataRecordType.SPREAD]: {\n    displayName: 'spread',\n    additionalStyles: {\n      align: 'right',\n      minWidth: '50px',\n    },\n  },\n  [DataRecordType.SENTIMENT]: {\n    displayName: 'sentiment',\n    additionalStyles: {\n      align: 'center',\n      minWidth: '190px',\n    },\n  },\n};\n\nconst navigationConfigDefault = [\n  {\n    id: TopicalSort.Popular,\n    label: 'popular',\n  },\n  {\n    id: TopicalSort.Hot,\n    label: 'hot',\n  },\n  {\n    id: TopicalSort.Volatile,\n    label: 'volatile',\n  },\n  {\n    id: TopicalSort.Bullish,\n    label: 'bullish',\n  },\n  {\n    id: TopicalSort.Bearish,\n    label: 'bearish',\n  },\n];\n\nconst navigationConfigOC = [\n  {\n    id: TopicalSort.Popular,\n    label: 'most_traded',\n  },\n  {\n    id: TopicalSort.Hot,\n    label: 'high_volume',\n  },\n  {\n    id: TopicalSort.Volatile,\n    label: 'volatile',\n  },\n  {\n    id: TopicalSort.Bullish,\n    label: 'net_long',\n  },\n  {\n    id: TopicalSort.Bearish,\n    label: 'net_short',\n  },\n];\n\nexport { headerConfig, navigationConfigDefault, navigationConfigOC };\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,OAAA;AAEA,IAAAC,QAAA,GAAAD,OAAA;AAEA,MAAME,YAA8B,GAAAC,OAAA,CAAAD,YAAA,GAAG;EACrC,CAACE,gCAAc,CAACC,UAAU,GAAG;IAC3BC,WAAW,EAAE,YAAY;IACzBC,gBAAgB,EAAE;MAChBC,KAAK,EAAE,MAAM;MACbC,QAAQ,EAAE;IACZ;EACF,CAAC;EACD,CAACL,gCAAc,CAACM,IAAI,GAAG;IACrBJ,WAAW,EAAE,MAAM;IACnBC,gBAAgB,EAAE;MAChBC,KAAK,EAAE,OAAO;MACdC,QAAQ,EAAE,MAAM;MAChBE,YAAY,EAAE;IAChB;EACF,CAAC;EACD,CAACP,gCAAc,CAACQ,GAAG,GAAG;IACpBN,WAAW,EAAE,KAAK;IAClBC,gBAAgB,EAAE;MAChBC,KAAK,EAAE,OAAO;MACdC,QAAQ,EAAE,MAAM;MAChBE,YAAY,EAAE;IAChB;EACF,CAAC;EACD,CAACP,gCAAc,CAACS,YAAY,GAAG;IAC7BP,WAAW,EAAE,sBAAsB;IACnCC,gBAAgB,EAAE;MAChBC,KAAK,EAAE,OAAO;MACdC,QAAQ,EAAE;IACZ;EACF,CAAC;EACD,CAACL,gCAAc,CAACU,KAAK,GAAG;IACtBR,WAAW,EAAE,WAAW;IACxBC,gBAAgB,EAAE;MAChBC,KAAK,EAAE,QAAQ;MACfC,QAAQ,EAAE;IACZ;EACF,CAAC;EACD,CAACL,gCAAc,CAACW,MAAM,GAAG;IACvBT,WAAW,EAAE,QAAQ;IACrBC,gBAAgB,EAAE;MAChBC,KAAK,EAAE,OAAO;MACdC,QAAQ,EAAE;IACZ;EACF,CAAC;EACD,CAACL,gCAAc,CAACY,SAAS,GAAG;IAC1BV,WAAW,EAAE,WAAW;IACxBC,gBAAgB,EAAE;MAChBC,KAAK,EAAE,QAAQ;MACfC,QAAQ,EAAE;IACZ;EACF;AACF,CAAC;AAED,MAAMQ,uBAAuB,GAAAd,OAAA,CAAAc,uBAAA,GAAG,CAC9B;EACEC,EAAE,EAAEC,oBAAW,CAACC,OAAO;EACvBC,KAAK,EAAE;AACT,CAAC,EACD;EACEH,EAAE,EAAEC,oBAAW,CAACG,GAAG;EACnBD,KAAK,EAAE;AACT,CAAC,EACD;EACEH,EAAE,EAAEC,oBAAW,CAACI,QAAQ;EACxBF,KAAK,EAAE;AACT,CAAC,EACD;EACEH,EAAE,EAAEC,oBAAW,CAACK,OAAO;EACvBH,KAAK,EAAE;AACT,CAAC,EACD;EACEH,EAAE,EAAEC,oBAAW,CAACM,OAAO;EACvBJ,KAAK,EAAE;AACT,CAAC,CACF;AAED,MAAMK,kBAAkB,GAAAvB,OAAA,CAAAuB,kBAAA,GAAG,CACzB;EACER,EAAE,EAAEC,oBAAW,CAACC,OAAO;EACvBC,KAAK,EAAE;AACT,CAAC,EACD;EACEH,EAAE,EAAEC,oBAAW,CAACG,GAAG;EACnBD,KAAK,EAAE;AACT,CAAC,EACD;EACEH,EAAE,EAAEC,oBAAW,CAACI,QAAQ;EACxBF,KAAK,EAAE;AACT,CAAC,EACD;EACEH,EAAE,EAAEC,oBAAW,CAACK,OAAO;EACvBH,KAAK,EAAE;AACT,CAAC,EACD;EACEH,EAAE,EAAEC,oBAAW,CAACM,OAAO;EACvBJ,KAAK,EAAE;AACT,CAAC,CACF","ignoreList":[]}

package/dist/module/TopicalInstrumentsWidget/Main.js

@@ -1,10 +1,10 @@
-import { Pagination, Size, TableWidget, Tabs, useFetchCombinedDataRecords, useLayoutProvider, useLiveRatesQuery } from '@oanda/labs-widget-common';
+import { getHeaderConfig, Pagination, Size, TableWidget, Tabs, useFetchCombinedDataRecords, useLayoutProvider, useLiveRatesQuery } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
 import React, { useEffect, useState } from 'react';
 import { getInstrumentsChart } from '../gql/getInstrumentsChart';
 import { getTopicalInstruments } from '../gql/getTopicalInstruments';
 import { Division, TopicalSort } from '../gql/types/graphql';
-import { getHeaderConfig, navigationConfigDefault, navigationConfigOC } from './config';
+import { headerConfig, navigationConfigDefault, navigationConfigOC } from './config';
 import { DEFAULT_COLUMNS, DEFAULT_COUNT, DEFAULT_TOTAL_COUNT, INSTRUMENT_TOOLTIP_ID } from './constant';
 import { getRecords } from './utils';
 export const Main = _ref => {
@@ -117,7 +117,7 @@ export const Main = _ref => {
     activeColumns: columns,
     count: count,
     hasError: showError,
-    headerColumns: getHeaderConfig(columns),
+    headerColumns: getHeaderConfig(columns, headerConfig),
     isChartLoading: loading,
     isLoading: mainLoading,
     pageNumber: pageNumber,

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

@@ -1 +1 @@
-{"version":3,"file":"Main.js","names":["Pagination","Size","TableWidget","Tabs","useFetchCombinedDataRecords","useLayoutProvider","useLiveRatesQuery","useLocale","React","useEffect","useState","getInstrumentsChart","getTopicalInstruments","Division","TopicalSort","getHeaderConfig","navigationConfigDefault","navigationConfigOC","DEFAULT_COLUMNS","DEFAULT_COUNT","DEFAULT_TOTAL_COUNT","INSTRUMENT_TOOLTIP_ID","getRecords","Main","_ref","sort","assetClass","division","count","columns","emptyRecords","Array","fill","lang","size","target","setQuery","pageNumber","setPageNumber","tiSort","setTiSort","Popular","records","setRecords","isDesktop","DESKTOP","navigationConfig","Oc","isTool","undefined","data","mainLoading","loading","error","mainQuery","mainVariables","offset","batchQuery","getBatchVariables","mainData","topicalInstruments","map","i","displayName","length","instruments","merge","chartData","fetchPolicy","instrument","_ref2","chart","_ref3","handleTabClick","e","currentTarget","value","handlePageChange","num","showError","isPaginationDisabled","totalCount","createElement","PaginationComponent","currentPage","disabled","recordsPerPage","totalRecords","onPageChange","TabsComponent","mobileFullWidth","activeTab","handleClick","items","labelCallback","activeColumns","hasError","headerColumns","isChartLoading","isLoading","testId","timestamp","updatedAt","toolTipId"],"sources":["../../../src/TopicalInstrumentsWidget/Main.tsx"],"sourcesContent":["import type { DataRecord } from '@oanda/labs-widget-common';\nimport {\n  Pagination,\n  Size,\n  TableWidget,\n  Tabs,\n  useFetchCombinedDataRecords,\n  useLayoutProvider,\n  useLiveRatesQuery,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport React, { useEffect, useState } from 'react';\n\nimport { getInstrumentsChart } from '../gql/getInstrumentsChart';\nimport { getTopicalInstruments } from '../gql/getTopicalInstruments';\nimport {\n  Division,\n  type GetInstrumentsChartQuery,\n  type GetInstrumentsChartQueryVariables,\n  type GetTopicalInstrumentsQuery,\n  type GetTopicalInstrumentsQueryVariables,\n  TopicalSort,\n} from '../gql/types/graphql';\nimport {\n  getHeaderConfig,\n  navigationConfigDefault,\n  navigationConfigOC,\n} from './config';\nimport {\n  DEFAULT_COLUMNS,\n  DEFAULT_COUNT,\n  DEFAULT_TOTAL_COUNT,\n  INSTRUMENT_TOOLTIP_ID,\n} from './constant';\nimport type { MainProps, TopicalInstrumentsData } from './types';\nimport { getRecords } from './utils';\n\nexport const Main = ({\n  sort,\n  assetClass,\n  division,\n  count = DEFAULT_COUNT,\n  columns = DEFAULT_COLUMNS,\n}: MainProps) => {\n  const emptyRecords = Array(count).fill({});\n  const { lang } = useLocale();\n  const { size } = useLayoutProvider();\n  const { target, setQuery } = useLiveRatesQuery();\n\n  const [pageNumber, setPageNumber] = useState(0);\n  const [tiSort, setTiSort] = useState(sort || TopicalSort.Popular);\n  const [records, setRecords] = useState<DataRecord[]>(emptyRecords);\n\n  const isDesktop = size === Size.DESKTOP;\n  const navigationConfig =\n    division === Division.Oc ? navigationConfigOC : navigationConfigDefault;\n  const isTool = sort === undefined;\n\n  const { data, mainLoading, loading, error } = useFetchCombinedDataRecords<\n    GetTopicalInstrumentsQuery,\n    GetTopicalInstrumentsQueryVariables,\n    GetInstrumentsChartQuery,\n    GetInstrumentsChartQueryVariables,\n    TopicalInstrumentsData\n  >({\n    mainQuery: getTopicalInstruments,\n    mainVariables: {\n      sort: tiSort,\n      division,\n      assetClass,\n      count,\n      offset: pageNumber * 10,\n    },\n    batchQuery: getInstrumentsChart,\n    getBatchVariables: (mainData) => {\n      const topicalInstruments = mainData?.topicalInstruments?.map(\n        (i) => i.displayName\n      );\n      return topicalInstruments?.length\n        ? { instruments: topicalInstruments, division }\n        : undefined;\n    },\n    merge: (mainData, chartData) => getRecords(mainData, chartData),\n    fetchPolicy: 'network-only',\n  });\n\n  useEffect(() => {\n    if (!mainLoading && data) {\n      setRecords(data.records ?? []);\n    }\n  }, [mainLoading, data]);\n\n  useEffect(() => {\n    if (records[0].instrument) {\n      const instruments = records.map(({ instrument }) => instrument);\n      setQuery({ instruments });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isDesktop]);\n\n  useEffect(() => {\n    if (records[0].instrument && records[0].chart?.length === 0) {\n      const instruments = records.map(({ instrument }) => instrument);\n      setQuery({ instruments });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [records]);\n\n  const handleTabClick = (e: React.SyntheticEvent<HTMLButtonElement>) => {\n    setRecords(emptyRecords);\n    setTiSort(e.currentTarget.value as TopicalSort);\n    setPageNumber(0);\n  };\n\n  const handlePageChange = (num: number) => {\n    setRecords(emptyRecords);\n    setPageNumber(num);\n  };\n\n  const showError = !!error || data?.records?.length === 0;\n  const isPaginationDisabled =\n    mainLoading || (!!data?.totalCount && data?.totalCount <= count);\n\n  return (\n    <TableWidget\n      PaginationComponent={\n        isTool ? (\n          <Pagination\n            currentPage={pageNumber}\n            disabled={isPaginationDisabled}\n            recordsPerPage={count}\n            totalRecords={data?.totalCount ?? DEFAULT_TOTAL_COUNT}\n            onPageChange={handlePageChange}\n          />\n        ) : undefined\n      }\n      TabsComponent={\n        isTool ? (\n          <Tabs\n            mobileFullWidth\n            activeTab={tiSort}\n            handleClick={handleTabClick}\n            items={navigationConfig}\n            labelCallback={lang}\n          />\n        ) : undefined\n      }\n      activeColumns={columns}\n      count={count}\n      hasError={showError}\n      headerColumns={getHeaderConfig(columns)}\n      isChartLoading={loading}\n      isLoading={mainLoading}\n      pageNumber={pageNumber}\n      records={records}\n      target={target}\n      testId=\"topical-instruments-wrapper\"\n      timestamp={data?.updatedAt}\n      toolTipId={INSTRUMENT_TOOLTIP_ID}\n    />\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Main.js","names":["getHeaderConfig","Pagination","Size","TableWidget","Tabs","useFetchCombinedDataRecords","useLayoutProvider","useLiveRatesQuery","useLocale","React","useEffect","useState","getInstrumentsChart","getTopicalInstruments","Division","TopicalSort","headerConfig","navigationConfigDefault","navigationConfigOC","DEFAULT_COLUMNS","DEFAULT_COUNT","DEFAULT_TOTAL_COUNT","INSTRUMENT_TOOLTIP_ID","getRecords","Main","_ref","sort","assetClass","division","count","columns","emptyRecords","Array","fill","lang","size","target","setQuery","pageNumber","setPageNumber","tiSort","setTiSort","Popular","records","setRecords","isDesktop","DESKTOP","navigationConfig","Oc","isTool","undefined","data","mainLoading","loading","error","mainQuery","mainVariables","offset","batchQuery","getBatchVariables","mainData","topicalInstruments","map","i","displayName","length","instruments","merge","chartData","fetchPolicy","instrument","_ref2","chart","_ref3","handleTabClick","e","currentTarget","value","handlePageChange","num","showError","isPaginationDisabled","totalCount","createElement","PaginationComponent","currentPage","disabled","recordsPerPage","totalRecords","onPageChange","TabsComponent","mobileFullWidth","activeTab","handleClick","items","labelCallback","activeColumns","hasError","headerColumns","isChartLoading","isLoading","testId","timestamp","updatedAt","toolTipId"],"sources":["../../../src/TopicalInstrumentsWidget/Main.tsx"],"sourcesContent":["import type { DataRecord } from '@oanda/labs-widget-common';\nimport {\n  getHeaderConfig,\n  Pagination,\n  Size,\n  TableWidget,\n  Tabs,\n  useFetchCombinedDataRecords,\n  useLayoutProvider,\n  useLiveRatesQuery,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport React, { useEffect, useState } from 'react';\n\nimport { getInstrumentsChart } from '../gql/getInstrumentsChart';\nimport { getTopicalInstruments } from '../gql/getTopicalInstruments';\nimport {\n  Division,\n  type GetInstrumentsChartQuery,\n  type GetInstrumentsChartQueryVariables,\n  type GetTopicalInstrumentsQuery,\n  type GetTopicalInstrumentsQueryVariables,\n  TopicalSort,\n} from '../gql/types/graphql';\nimport {\n  headerConfig,\n  navigationConfigDefault,\n  navigationConfigOC,\n} from './config';\nimport {\n  DEFAULT_COLUMNS,\n  DEFAULT_COUNT,\n  DEFAULT_TOTAL_COUNT,\n  INSTRUMENT_TOOLTIP_ID,\n} from './constant';\nimport type { MainProps, TopicalInstrumentsData } from './types';\nimport { getRecords } from './utils';\n\nexport const Main = ({\n  sort,\n  assetClass,\n  division,\n  count = DEFAULT_COUNT,\n  columns = DEFAULT_COLUMNS,\n}: MainProps) => {\n  const emptyRecords = Array(count).fill({});\n  const { lang } = useLocale();\n  const { size } = useLayoutProvider();\n  const { target, setQuery } = useLiveRatesQuery();\n\n  const [pageNumber, setPageNumber] = useState(0);\n  const [tiSort, setTiSort] = useState(sort || TopicalSort.Popular);\n  const [records, setRecords] = useState<DataRecord[]>(emptyRecords);\n\n  const isDesktop = size === Size.DESKTOP;\n  const navigationConfig =\n    division === Division.Oc ? navigationConfigOC : navigationConfigDefault;\n  const isTool = sort === undefined;\n\n  const { data, mainLoading, loading, error } = useFetchCombinedDataRecords<\n    GetTopicalInstrumentsQuery,\n    GetTopicalInstrumentsQueryVariables,\n    GetInstrumentsChartQuery,\n    GetInstrumentsChartQueryVariables,\n    TopicalInstrumentsData\n  >({\n    mainQuery: getTopicalInstruments,\n    mainVariables: {\n      sort: tiSort,\n      division,\n      assetClass,\n      count,\n      offset: pageNumber * 10,\n    },\n    batchQuery: getInstrumentsChart,\n    getBatchVariables: (mainData) => {\n      const topicalInstruments = mainData?.topicalInstruments?.map(\n        (i) => i.displayName\n      );\n      return topicalInstruments?.length\n        ? { instruments: topicalInstruments, division }\n        : undefined;\n    },\n    merge: (mainData, chartData) => getRecords(mainData, chartData),\n    fetchPolicy: 'network-only',\n  });\n\n  useEffect(() => {\n    if (!mainLoading && data) {\n      setRecords(data.records ?? []);\n    }\n  }, [mainLoading, data]);\n\n  useEffect(() => {\n    if (records[0].instrument) {\n      const instruments = records.map(({ instrument }) => instrument);\n      setQuery({ instruments });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isDesktop]);\n\n  useEffect(() => {\n    if (records[0].instrument && records[0].chart?.length === 0) {\n      const instruments = records.map(({ instrument }) => instrument);\n      setQuery({ instruments });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [records]);\n\n  const handleTabClick = (e: React.SyntheticEvent<HTMLButtonElement>) => {\n    setRecords(emptyRecords);\n    setTiSort(e.currentTarget.value as TopicalSort);\n    setPageNumber(0);\n  };\n\n  const handlePageChange = (num: number) => {\n    setRecords(emptyRecords);\n    setPageNumber(num);\n  };\n\n  const showError = !!error || data?.records?.length === 0;\n  const isPaginationDisabled =\n    mainLoading || (!!data?.totalCount && data?.totalCount <= count);\n\n  return (\n    <TableWidget\n      PaginationComponent={\n        isTool ? (\n          <Pagination\n            currentPage={pageNumber}\n            disabled={isPaginationDisabled}\n            recordsPerPage={count}\n            totalRecords={data?.totalCount ?? DEFAULT_TOTAL_COUNT}\n            onPageChange={handlePageChange}\n          />\n        ) : undefined\n      }\n      TabsComponent={\n        isTool ? (\n          <Tabs\n            mobileFullWidth\n            activeTab={tiSort}\n            handleClick={handleTabClick}\n            items={navigationConfig}\n            labelCallback={lang}\n          />\n        ) : undefined\n      }\n      activeColumns={columns}\n      count={count}\n      hasError={showError}\n      headerColumns={getHeaderConfig(columns, headerConfig)}\n      isChartLoading={loading}\n      isLoading={mainLoading}\n      pageNumber={pageNumber}\n      records={records}\n      target={target}\n      testId=\"topical-instruments-wrapper\"\n      timestamp={data?.updatedAt}\n      toolTipId={INSTRUMENT_TOOLTIP_ID}\n    />\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/module/TopicalInstrumentsWidget/config.js

@@ -3,37 +3,56 @@ import { TopicalSort } from '../gql/types/graphql';
 const headerConfig = {
   [DataRecordType.INSTRUMENT]: {
     displayName: 'instrument',
-    additionalStyles: 'lw-text-left lw-min-w-[130px]'
+    additionalStyles: {
+      align: 'left',
+      minWidth: '130px'
+    }
   },
   [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.DAILY_CHANGE]: {
     displayName: 'daily_percent_change',
-    additionalStyles: 'lw-text-right lw-min-w-[80px]'
+    additionalStyles: {
+      align: 'right',
+      minWidth: '80px'
+    }
   },
   [DataRecordType.CHART]: {
     displayName: '24h_chart',
-    additionalStyles: 'lw-text-center lw-min-w-[100px]'
+    additionalStyles: {
+      align: 'center',
+      minWidth: '100px'
+    }
   },
   [DataRecordType.SPREAD]: {
     displayName: 'spread',
-    additionalStyles: 'lw-text-right lw-min-w-[50px]'
+    additionalStyles: {
+      align: 'right',
+      minWidth: '50px'
+    }
   },
   [DataRecordType.SENTIMENT]: {
     displayName: 'sentiment',
-    additionalStyles: 'lw-text-center lw-min-w-[190px]'
+    additionalStyles: {
+      align: 'center',
+      minWidth: '190px'
+    }
   }
 };
-const getHeaderConfig = activeColumns => {
-  const columns = [DataRecordType.INSTRUMENT, ...activeColumns].filter(item => item !== DataRecordType.LOW && item !== DataRecordType.HIGH);
-  return columns.map(item => headerConfig[item]);
-};
 const navigationConfigDefault = [{
   id: TopicalSort.Popular,
   label: 'popular'
@@ -66,5 +85,5 @@ const navigationConfigOC = [{
   id: TopicalSort.Bearish,
   label: 'net_short'
 }];
-export { getHeaderConfig, headerConfig, navigationConfigDefault, navigationConfigOC };
+export { headerConfig, navigationConfigDefault, navigationConfigOC };
 //# sourceMappingURL=config.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"config.js","names":["DataRecordType","TopicalSort","headerConfig","INSTRUMENT","displayName","additionalStyles","SELL","BUY","DAILY_CHANGE","CHART","SPREAD","SENTIMENT","getHeaderConfig","activeColumns","columns","filter","item","LOW","HIGH","map","navigationConfigDefault","id","Popular","label","Hot","Volatile","Bullish","Bearish","navigationConfigOC"],"sources":["../../../src/TopicalInstrumentsWidget/config.ts"],"sourcesContent":["import type { HeaderColumns } from '@oanda/labs-widget-common';\nimport { DataRecordType } from '@oanda/labs-widget-common';\n\nimport { TopicalSort } from '../gql/types/graphql';\n\ntype HeaderRecordType =\n  | DataRecordType.INSTRUMENT\n  | DataRecordType.SELL\n  | DataRecordType.BUY\n  | DataRecordType.DAILY_CHANGE\n  | DataRecordType.CHART\n  | DataRecordType.SPREAD\n  | DataRecordType.SENTIMENT;\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.DAILY_CHANGE]: {\n    displayName: 'daily_percent_change',\n    additionalStyles: 'lw-text-right lw-min-w-[80px]',\n  },\n  [DataRecordType.CHART]: {\n    displayName: '24h_chart',\n    additionalStyles: 'lw-text-center lw-min-w-[100px]',\n  },\n  [DataRecordType.SPREAD]: {\n    displayName: 'spread',\n    additionalStyles: 'lw-text-right lw-min-w-[50px]',\n  },\n  [DataRecordType.SENTIMENT]: {\n    displayName: 'sentiment',\n    additionalStyles: 'lw-text-center lw-min-w-[190px]',\n  },\n};\n\nconst getHeaderConfig = (activeColumns: DataRecordType[]): HeaderColumns[] => {\n  const columns: HeaderRecordType[] = [\n    DataRecordType.INSTRUMENT,\n    ...activeColumns,\n  ].filter(\n    (item): item is HeaderRecordType =>\n      item !== DataRecordType.LOW && item !== DataRecordType.HIGH\n  );\n\n  return columns.map((item) => headerConfig[item]);\n};\n\nconst navigationConfigDefault = [\n  {\n    id: TopicalSort.Popular,\n    label: 'popular',\n  },\n  {\n    id: TopicalSort.Hot,\n    label: 'hot',\n  },\n  {\n    id: TopicalSort.Volatile,\n    label: 'volatile',\n  },\n  {\n    id: TopicalSort.Bullish,\n    label: 'bullish',\n  },\n  {\n    id: TopicalSort.Bearish,\n    label: 'bearish',\n  },\n];\n\nconst navigationConfigOC = [\n  {\n    id: TopicalSort.Popular,\n    label: 'most_traded',\n  },\n  {\n    id: TopicalSort.Hot,\n    label: 'high_volume',\n  },\n  {\n    id: TopicalSort.Volatile,\n    label: 'volatile',\n  },\n  {\n    id: TopicalSort.Bullish,\n    label: 'net_long',\n  },\n  {\n    id: TopicalSort.Bearish,\n    label: 'net_short',\n  },\n];\n\nexport {\n  getHeaderConfig,\n  headerConfig,\n  navigationConfigDefault,\n  navigationConfigOC,\n};\n"],"mappings":"AACA,SAASA,cAAc,QAAQ,2BAA2B;AAE1D,SAASC,WAAW,QAAQ,sBAAsB;AAWlD,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,YAAY,GAAG;IAC7BJ,WAAW,EAAE,sBAAsB;IACnCC,gBAAgB,EAAE;EACpB,CAAC;EACD,CAACL,cAAc,CAACS,KAAK,GAAG;IACtBL,WAAW,EAAE,WAAW;IACxBC,gBAAgB,EAAE;EACpB,CAAC;EACD,CAACL,cAAc,CAACU,MAAM,GAAG;IACvBN,WAAW,EAAE,QAAQ;IACrBC,gBAAgB,EAAE;EACpB,CAAC;EACD,CAACL,cAAc,CAACW,SAAS,GAAG;IAC1BP,WAAW,EAAE,WAAW;IACxBC,gBAAgB,EAAE;EACpB;AACF,CAAC;AAED,MAAMO,eAAe,GAAIC,aAA+B,IAAsB;EAC5E,MAAMC,OAA2B,GAAG,CAClCd,cAAc,CAACG,UAAU,EACzB,GAAGU,aAAa,CACjB,CAACE,MAAM,CACLC,IAAI,IACHA,IAAI,KAAKhB,cAAc,CAACiB,GAAG,IAAID,IAAI,KAAKhB,cAAc,CAACkB,IAC3D,CAAC;EAED,OAAOJ,OAAO,CAACK,GAAG,CAAEH,IAAI,IAAKd,YAAY,CAACc,IAAI,CAAC,CAAC;AAClD,CAAC;AAED,MAAMI,uBAAuB,GAAG,CAC9B;EACEC,EAAE,EAAEpB,WAAW,CAACqB,OAAO;EACvBC,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEpB,WAAW,CAACuB,GAAG;EACnBD,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEpB,WAAW,CAACwB,QAAQ;EACxBF,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEpB,WAAW,CAACyB,OAAO;EACvBH,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEpB,WAAW,CAAC0B,OAAO;EACvBJ,KAAK,EAAE;AACT,CAAC,CACF;AAED,MAAMK,kBAAkB,GAAG,CACzB;EACEP,EAAE,EAAEpB,WAAW,CAACqB,OAAO;EACvBC,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEpB,WAAW,CAACuB,GAAG;EACnBD,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEpB,WAAW,CAACwB,QAAQ;EACxBF,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEpB,WAAW,CAACyB,OAAO;EACvBH,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEpB,WAAW,CAAC0B,OAAO;EACvBJ,KAAK,EAAE;AACT,CAAC,CACF;AAED,SACEX,eAAe,EACfV,YAAY,EACZkB,uBAAuB,EACvBQ,kBAAkB","ignoreList":[]}
+{"version":3,"file":"config.js","names":["DataRecordType","TopicalSort","headerConfig","INSTRUMENT","displayName","additionalStyles","align","minWidth","SELL","paddingRight","BUY","DAILY_CHANGE","CHART","SPREAD","SENTIMENT","navigationConfigDefault","id","Popular","label","Hot","Volatile","Bullish","Bearish","navigationConfigOC"],"sources":["../../../src/TopicalInstrumentsWidget/config.ts"],"sourcesContent":["import type { HeaderConfigType } from '@oanda/labs-widget-common';\nimport { DataRecordType } from '@oanda/labs-widget-common';\n\nimport { TopicalSort } from '../gql/types/graphql';\n\nconst headerConfig: HeaderConfigType = {\n  [DataRecordType.INSTRUMENT]: {\n    displayName: 'instrument',\n    additionalStyles: {\n      align: 'left',\n      minWidth: '130px',\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.DAILY_CHANGE]: {\n    displayName: 'daily_percent_change',\n    additionalStyles: {\n      align: 'right',\n      minWidth: '80px',\n    },\n  },\n  [DataRecordType.CHART]: {\n    displayName: '24h_chart',\n    additionalStyles: {\n      align: 'center',\n      minWidth: '100px',\n    },\n  },\n  [DataRecordType.SPREAD]: {\n    displayName: 'spread',\n    additionalStyles: {\n      align: 'right',\n      minWidth: '50px',\n    },\n  },\n  [DataRecordType.SENTIMENT]: {\n    displayName: 'sentiment',\n    additionalStyles: {\n      align: 'center',\n      minWidth: '190px',\n    },\n  },\n};\n\nconst navigationConfigDefault = [\n  {\n    id: TopicalSort.Popular,\n    label: 'popular',\n  },\n  {\n    id: TopicalSort.Hot,\n    label: 'hot',\n  },\n  {\n    id: TopicalSort.Volatile,\n    label: 'volatile',\n  },\n  {\n    id: TopicalSort.Bullish,\n    label: 'bullish',\n  },\n  {\n    id: TopicalSort.Bearish,\n    label: 'bearish',\n  },\n];\n\nconst navigationConfigOC = [\n  {\n    id: TopicalSort.Popular,\n    label: 'most_traded',\n  },\n  {\n    id: TopicalSort.Hot,\n    label: 'high_volume',\n  },\n  {\n    id: TopicalSort.Volatile,\n    label: 'volatile',\n  },\n  {\n    id: TopicalSort.Bullish,\n    label: 'net_long',\n  },\n  {\n    id: TopicalSort.Bearish,\n    label: 'net_short',\n  },\n];\n\nexport { headerConfig, navigationConfigDefault, navigationConfigOC };\n"],"mappings":"AACA,SAASA,cAAc,QAAQ,2BAA2B;AAE1D,SAASC,WAAW,QAAQ,sBAAsB;AAElD,MAAMC,YAA8B,GAAG;EACrC,CAACF,cAAc,CAACG,UAAU,GAAG;IAC3BC,WAAW,EAAE,YAAY;IACzBC,gBAAgB,EAAE;MAChBC,KAAK,EAAE,MAAM;MACbC,QAAQ,EAAE;IACZ;EACF,CAAC;EACD,CAACP,cAAc,CAACQ,IAAI,GAAG;IACrBJ,WAAW,EAAE,MAAM;IACnBC,gBAAgB,EAAE;MAChBC,KAAK,EAAE,OAAO;MACdC,QAAQ,EAAE,MAAM;MAChBE,YAAY,EAAE;IAChB;EACF,CAAC;EACD,CAACT,cAAc,CAACU,GAAG,GAAG;IACpBN,WAAW,EAAE,KAAK;IAClBC,gBAAgB,EAAE;MAChBC,KAAK,EAAE,OAAO;MACdC,QAAQ,EAAE,MAAM;MAChBE,YAAY,EAAE;IAChB;EACF,CAAC;EACD,CAACT,cAAc,CAACW,YAAY,GAAG;IAC7BP,WAAW,EAAE,sBAAsB;IACnCC,gBAAgB,EAAE;MAChBC,KAAK,EAAE,OAAO;MACdC,QAAQ,EAAE;IACZ;EACF,CAAC;EACD,CAACP,cAAc,CAACY,KAAK,GAAG;IACtBR,WAAW,EAAE,WAAW;IACxBC,gBAAgB,EAAE;MAChBC,KAAK,EAAE,QAAQ;MACfC,QAAQ,EAAE;IACZ;EACF,CAAC;EACD,CAACP,cAAc,CAACa,MAAM,GAAG;IACvBT,WAAW,EAAE,QAAQ;IACrBC,gBAAgB,EAAE;MAChBC,KAAK,EAAE,OAAO;MACdC,QAAQ,EAAE;IACZ;EACF,CAAC;EACD,CAACP,cAAc,CAACc,SAAS,GAAG;IAC1BV,WAAW,EAAE,WAAW;IACxBC,gBAAgB,EAAE;MAChBC,KAAK,EAAE,QAAQ;MACfC,QAAQ,EAAE;IACZ;EACF;AACF,CAAC;AAED,MAAMQ,uBAAuB,GAAG,CAC9B;EACEC,EAAE,EAAEf,WAAW,CAACgB,OAAO;EACvBC,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEf,WAAW,CAACkB,GAAG;EACnBD,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEf,WAAW,CAACmB,QAAQ;EACxBF,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEf,WAAW,CAACoB,OAAO;EACvBH,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEf,WAAW,CAACqB,OAAO;EACvBJ,KAAK,EAAE;AACT,CAAC,CACF;AAED,MAAMK,kBAAkB,GAAG,CACzB;EACEP,EAAE,EAAEf,WAAW,CAACgB,OAAO;EACvBC,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEf,WAAW,CAACkB,GAAG;EACnBD,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEf,WAAW,CAACmB,QAAQ;EACxBF,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEf,WAAW,CAACoB,OAAO;EACvBH,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAEf,WAAW,CAACqB,OAAO;EACvBJ,KAAK,EAAE;AACT,CAAC,CACF;AAED,SAAShB,YAAY,EAAEa,uBAAuB,EAAEQ,kBAAkB","ignoreList":[]}

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

@@ -1,12 +1,6 @@
-import type { HeaderColumns } from '@oanda/labs-widget-common';
-import { DataRecordType } from '@oanda/labs-widget-common';
+import type { HeaderConfigType } from '@oanda/labs-widget-common';
 import { TopicalSort } from '../gql/types/graphql';
-type HeaderRecordType = DataRecordType.INSTRUMENT | DataRecordType.SELL | DataRecordType.BUY | DataRecordType.DAILY_CHANGE | DataRecordType.CHART | DataRecordType.SPREAD | DataRecordType.SENTIMENT;
-declare const headerConfig: Record<HeaderRecordType, {
-    displayName: string;
-    additionalStyles: string;
-}>;
-declare const getHeaderConfig: (activeColumns: DataRecordType[]) => HeaderColumns[];
+declare const headerConfig: HeaderConfigType;
 declare const navigationConfigDefault: {
     id: TopicalSort;
     label: string;
@@ -15,4 +9,4 @@ declare const navigationConfigOC: {
     id: TopicalSort;
     label: string;
 }[];
-export { getHeaderConfig, headerConfig, navigationConfigDefault, navigationConfigOC, };
+export { headerConfig, navigationConfigDefault, navigationConfigOC };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-topical-instruments-widget",
-  "version": "1.0.205",
+  "version": "1.0.207",
   "description": "Labs Topical Instruments 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.205",
+    "@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": "c3d9e64eb9cf5a50d714b8147501b7dfe7aa4aed"
+  "gitHead": "31dcda0050419adc006433a90226fc9f0441b551"
 }

package/src/TopicalInstrumentsWidget/Main.tsx

@@ -1,5 +1,6 @@
 import type { DataRecord } from '@oanda/labs-widget-common';
 import {
+  getHeaderConfig,
   Pagination,
   Size,
   TableWidget,
@@ -22,7 +23,7 @@ import {
   TopicalSort,
 } from '../gql/types/graphql';
 import {
-  getHeaderConfig,
+  headerConfig,
   navigationConfigDefault,
   navigationConfigOC,
 } from './config';
@@ -148,7 +149,7 @@ export const Main = ({
       activeColumns={columns}
       count={count}
       hasError={showError}
-      headerColumns={getHeaderConfig(columns)}
+      headerColumns={getHeaderConfig(columns, headerConfig)}
       isChartLoading={loading}
       isLoading={mainLoading}
       pageNumber={pageNumber}

package/src/TopicalInstrumentsWidget/config.ts

@@ -1,63 +1,62 @@
-import type { HeaderColumns } from '@oanda/labs-widget-common';
+import type { HeaderConfigType } from '@oanda/labs-widget-common';
 import { DataRecordType } from '@oanda/labs-widget-common';
 
 import { TopicalSort } from '../gql/types/graphql';
 
-type HeaderRecordType =
-  | DataRecordType.INSTRUMENT
-  | DataRecordType.SELL
-  | DataRecordType.BUY
-  | DataRecordType.DAILY_CHANGE
-  | DataRecordType.CHART
-  | DataRecordType.SPREAD
-  | DataRecordType.SENTIMENT;
-
-const headerConfig: Record<
-  HeaderRecordType,
-  { displayName: string; additionalStyles: string }
-> = {
+const headerConfig: HeaderConfigType = {
   [DataRecordType.INSTRUMENT]: {
     displayName: 'instrument',
-    additionalStyles: 'lw-text-left lw-min-w-[130px]',
+    additionalStyles: {
+      align: 'left',
+      minWidth: '130px',
+    },
   },
   [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.DAILY_CHANGE]: {
     displayName: 'daily_percent_change',
-    additionalStyles: 'lw-text-right lw-min-w-[80px]',
+    additionalStyles: {
+      align: 'right',
+      minWidth: '80px',
+    },
   },
   [DataRecordType.CHART]: {
     displayName: '24h_chart',
-    additionalStyles: 'lw-text-center lw-min-w-[100px]',
+    additionalStyles: {
+      align: 'center',
+      minWidth: '100px',
+    },
   },
   [DataRecordType.SPREAD]: {
     displayName: 'spread',
-    additionalStyles: 'lw-text-right lw-min-w-[50px]',
+    additionalStyles: {
+      align: 'right',
+      minWidth: '50px',
+    },
   },
   [DataRecordType.SENTIMENT]: {
     displayName: 'sentiment',
-    additionalStyles: 'lw-text-center lw-min-w-[190px]',
+    additionalStyles: {
+      align: 'center',
+      minWidth: '190px',
+    },
   },
 };
 
-const getHeaderConfig = (activeColumns: DataRecordType[]): HeaderColumns[] => {
-  const columns: HeaderRecordType[] = [
-    DataRecordType.INSTRUMENT,
-    ...activeColumns,
-  ].filter(
-    (item): item is HeaderRecordType =>
-      item !== DataRecordType.LOW && item !== DataRecordType.HIGH
-  );
-
-  return columns.map((item) => headerConfig[item]);
-};
-
 const navigationConfigDefault = [
   {
     id: TopicalSort.Popular,
@@ -104,9 +103,4 @@ const navigationConfigOC = [
   },
 ];
 
-export {
-  getHeaderConfig,
-  headerConfig,
-  navigationConfigDefault,
-  navigationConfigOC,
-};
+export { headerConfig, navigationConfigDefault, navigationConfigOC };