@oanda/labs-currency-strength-widget 1.0.14 → 1.0.16

package/CHANGELOG.md

@@ -3,6 +3,138 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.0.16 (2024-03-07)
+
+
+
+## 1.0.97 (2024-03-06)
+
+
+
+## 1.0.96 (2024-03-06)
+
+
+
+## 1.0.95 (2024-03-04)
+
+
+
+## 1.0.94 (2024-02-29)
+
+
+
+## 1.0.93 (2024-02-28)
+
+
+
+## 1.0.92 (2024-02-28)
+
+
+
+## 1.0.91 (2024-02-23)
+
+
+
+## 1.0.90 (2024-02-23)
+
+
+
+## 1.0.89 (2024-02-21)
+
+
+
+## 1.0.88 (2024-02-21)
+
+
+
+## 1.0.87 (2024-02-20)
+
+
+
+## 1.0.86 (2024-02-20)
+
+
+
+## 1.0.85 (2024-02-13)
+
+
+
+## 1.0.84 (2024-02-13)
+
+
+
+## 1.0.83 (2024-02-09)
+
+**Note:** Version bump only for package @oanda/labs-currency-strength-widget
+
+
+
+
+
+## 1.0.15 (2024-03-06)
+
+
+
+## 1.0.96 (2024-03-06)
+
+
+
+## 1.0.95 (2024-03-04)
+
+
+
+## 1.0.94 (2024-02-29)
+
+
+
+## 1.0.93 (2024-02-28)
+
+
+
+## 1.0.92 (2024-02-28)
+
+
+
+## 1.0.91 (2024-02-23)
+
+
+
+## 1.0.90 (2024-02-23)
+
+
+
+## 1.0.89 (2024-02-21)
+
+
+
+## 1.0.88 (2024-02-21)
+
+
+
+## 1.0.87 (2024-02-20)
+
+
+
+## 1.0.86 (2024-02-20)
+
+
+
+## 1.0.85 (2024-02-13)
+
+
+
+## 1.0.84 (2024-02-13)
+
+
+
+## 1.0.83 (2024-02-09)
+
+**Note:** Version bump only for package @oanda/labs-currency-strength-widget
+
+
+
+
+
 ## 1.0.14 (2024-03-06)
 
 

package/dist/main/CurrencyStrengthWidget/ChartsWithData.js

@@ -10,11 +10,12 @@ var _labsWidgetCommon = require("@oanda/labs-widget-common");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _getCurrencyStrength = require("../gql/getCurrencyStrength");
 var _Chart = require("./components/Chart");
+var _formatters = require("./components/Chart/formatters");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const ChartWithData = () => {
-  var _data$currencyStrengt, _data$currencyStrengt2, _data$currencyStrengt3;
+  var _data$currencyStrengt, _data$currencyStrengt2, _sortData$currencyStr;
   const {
     size
   } = (0, _react.useContext)(_labsWidgetCommon.ThemeContext);
@@ -38,7 +39,7 @@ const ChartWithData = () => {
       'lw-grid-cols-3 ': isDesktop,
       'lw-grid-cols-1': !isDesktop
     })
-  }, (_data$currencyStrengt3 = data.currencyStrength) === null || _data$currencyStrengt3 === void 0 ? void 0 : _data$currencyStrengt3.map(item => _react.default.createElement("div", {
+  }, (_sortData$currencyStr = (0, _formatters.sortData)(data).currencyStrength) === null || _sortData$currencyStr === void 0 ? void 0 : _sortData$currencyStr.map(item => _react.default.createElement("div", {
     key: item.currency,
     className: "lw-flex lw-h-[135px] lw-flex-1 lw-items-center lw-justify-center"
   }, _react.default.createElement(_Chart.Chart, {

package/dist/main/CurrencyStrengthWidget/ChartsWithData.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChartsWithData.js","names":["_react","_interopRequireWildcard","require","_client","_labsWidgetCommon","_classnames","_interopRequireDefault","_getCurrencyStrength","_Chart","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","ChartWithData","_data$currencyStrengt","_data$currencyStrengt2","_data$currencyStrengt3","size","useContext","ThemeContext","isDesktop","Size","DESKTOP","loading","data","error","useQuery","getCurrencyStrength","fetchPolicy","showChart","currencyStrength","length","showError","createElement","Fragment","className","Spinner","SpinnerSize","lg","classnames","map","item","key","currency","Chart","values","strengthRelation","ChartError","exports"],"sources":["../../../src/CurrencyStrengthWidget/ChartsWithData.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { useQuery } from '@apollo/client';\nimport {\n  ChartError, Size, Spinner, SpinnerSize,\n  ThemeContext,\n} from '@oanda/labs-widget-common';\nimport classnames from 'classnames';\nimport { getCurrencyStrength } from '../gql/getCurrencyStrength';\nimport { GetCurrencyStrengthQuery } from '../gql/types/graphql';\nimport { Chart } from './components/Chart';\n\nconst ChartWithData = () => {\n  const { size } = useContext(ThemeContext);\n  const isDesktop = size === Size.DESKTOP;\n  const { loading, data, error } = useQuery<GetCurrencyStrengthQuery>(getCurrencyStrength, {\n    fetchPolicy: 'cache-and-network',\n  });\n\n  const showChart = data?.currencyStrength && data?.currencyStrength?.length > 0;\n  const showError = data?.currencyStrength?.length === 0 || error;\n\n  return (\n    <>\n      {loading\n      && (\n        <div className=\"lw-flex lw-h-[461px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary\">\n          <Spinner size={SpinnerSize.lg} />\n        </div>\n      )}\n      {!loading && showChart && (\n        <div\n          data-testid=\"currency-strength-chart-wrapper\"\n          className={classnames('lw-grid lw-place-content-center lw-gap-7', {\n            'lw-grid-cols-3 ': isDesktop,\n            'lw-grid-cols-1': !isDesktop,\n          })}\n        >\n          {data.currencyStrength?.map((item) => (\n            <div key={item.currency} className=\"lw-flex lw-h-[135px] lw-flex-1 lw-items-center lw-justify-center\">\n              <Chart currency={item.currency} values={item.strengthRelation!} />\n            </div>\n          ))}\n        </div>\n      )}\n      {!loading && showError && (\n        <div className=\"lw-flex lw-h-[425px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary\">\n          <ChartError />\n        </div>\n      )}\n    </>\n  );\n};\n\nexport { ChartWithData };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ChartsWithData.js","names":["_react","_interopRequireWildcard","require","_client","_labsWidgetCommon","_classnames","_interopRequireDefault","_getCurrencyStrength","_Chart","_formatters","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","ChartWithData","_data$currencyStrengt","_data$currencyStrengt2","_sortData$currencyStr","size","useContext","ThemeContext","isDesktop","Size","DESKTOP","loading","data","error","useQuery","getCurrencyStrength","fetchPolicy","showChart","currencyStrength","length","showError","createElement","Fragment","className","Spinner","SpinnerSize","lg","classnames","sortData","map","item","key","currency","Chart","values","strengthRelation","ChartError","exports"],"sources":["../../../src/CurrencyStrengthWidget/ChartsWithData.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { useQuery } from '@apollo/client';\nimport {\n  ChartError, Size, Spinner, SpinnerSize,\n  ThemeContext,\n} from '@oanda/labs-widget-common';\nimport classnames from 'classnames';\nimport { getCurrencyStrength } from '../gql/getCurrencyStrength';\nimport { GetCurrencyStrengthQuery } from '../gql/types/graphql';\nimport { Chart } from './components/Chart';\nimport { sortData } from './components/Chart/formatters';\n\nconst ChartWithData = () => {\n  const { size } = useContext(ThemeContext);\n  const isDesktop = size === Size.DESKTOP;\n  const { loading, data, error } = useQuery<GetCurrencyStrengthQuery>(getCurrencyStrength, {\n    fetchPolicy: 'cache-and-network',\n  });\n\n  const showChart = data?.currencyStrength && data?.currencyStrength?.length > 0;\n  const showError = data?.currencyStrength?.length === 0 || error;\n\n  return (\n    <>\n      {loading\n      && (\n        <div className=\"lw-flex lw-h-[461px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary\">\n          <Spinner size={SpinnerSize.lg} />\n        </div>\n      )}\n      {!loading && showChart && (\n        <div\n          data-testid=\"currency-strength-chart-wrapper\"\n          className={classnames('lw-grid lw-place-content-center lw-gap-7', {\n            'lw-grid-cols-3 ': isDesktop,\n            'lw-grid-cols-1': !isDesktop,\n          })}\n        >\n          {sortData(data).currencyStrength?.map((item) => (\n            <div key={item.currency} className=\"lw-flex lw-h-[135px] lw-flex-1 lw-items-center lw-justify-center\">\n              <Chart currency={item.currency} values={item.strengthRelation!} />\n            </div>\n          ))}\n        </div>\n      )}\n      {!loading && showError && (\n        <div className=\"lw-flex lw-h-[425px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary\">\n          <ChartError />\n        </div>\n      )}\n    </>\n  );\n};\n\nexport { ChartWithData };\n"],"mappings":"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","ignoreList":[]}

package/dist/main/CurrencyStrengthWidget/components/Chart/constants.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.lightBarColors = exports.darkBarColors = exports.Y_LABEL_SIZE = exports.X_LABEL_SIZE = exports.CHART_WIDTH = exports.CHART_HEIGHT = void 0;
+exports.lightBarColors = exports.instrumentsConfig = exports.darkBarColors = exports.Y_LABEL_SIZE = exports.X_LABEL_SIZE = exports.CHART_WIDTH = exports.CHART_HEIGHT = void 0;
 var _labsWidgetCommon = require("@oanda/labs-widget-common");
+var _graphql = require("../../../gql/types/graphql");
 const X_LABEL_SIZE = exports.X_LABEL_SIZE = 24;
 const Y_LABEL_SIZE = exports.Y_LABEL_SIZE = 30;
 const CHART_WIDTH = exports.CHART_WIDTH = 9999;
@@ -19,4 +20,5 @@ const lightBarColors = exports.lightBarColors = {
   negative: _labsWidgetCommon.colorPalette.raspberryDark,
   zero: _labsWidgetCommon.colorPalette.disabledGray
 };
+const instrumentsConfig = exports.instrumentsConfig = [_graphql.CurrencyName.Usd, _graphql.CurrencyName.Eur, _graphql.CurrencyName.Jpy, _graphql.CurrencyName.Gbp, _graphql.CurrencyName.Aud, _graphql.CurrencyName.Cad, _graphql.CurrencyName.Chf, _graphql.CurrencyName.Nzd];
 //# sourceMappingURL=constants.js.map

package/dist/main/CurrencyStrengthWidget/components/Chart/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","names":["_labsWidgetCommon","require","X_LABEL_SIZE","exports","Y_LABEL_SIZE","CHART_WIDTH","CHART_HEIGHT","darkBarColors","positive","colorPalette","bottleGreenLight","negative","orange","zero","disabledGray","lightBarColors","raspberryDark"],"sources":["../../../../../src/CurrencyStrengthWidget/components/Chart/constants.tsx"],"sourcesContent":["import { colorPalette } from '@oanda/labs-widget-common';\n\nexport const X_LABEL_SIZE = 24;\nexport const Y_LABEL_SIZE = 30;\nexport const CHART_WIDTH = 9999;\nexport const CHART_HEIGHT = 135;\n\nexport const darkBarColors = {\n  positive: colorPalette.bottleGreenLight,\n  negative: colorPalette.orange,\n  zero: colorPalette.disabledGray,\n};\n\nexport const lightBarColors = {\n  positive: colorPalette.bottleGreenLight,\n  negative: colorPalette.raspberryDark,\n  zero: colorPalette.disabledGray,\n};\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AAEO,MAAMC,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,EAAE;AACvB,MAAME,YAAY,GAAAD,OAAA,CAAAC,YAAA,GAAG,EAAE;AACvB,MAAMC,WAAW,GAAAF,OAAA,CAAAE,WAAA,GAAG,IAAI;AACxB,MAAMC,YAAY,GAAAH,OAAA,CAAAG,YAAA,GAAG,GAAG;AAExB,MAAMC,aAAa,GAAAJ,OAAA,CAAAI,aAAA,GAAG;EAC3BC,QAAQ,EAAEC,8BAAY,CAACC,gBAAgB;EACvCC,QAAQ,EAAEF,8BAAY,CAACG,MAAM;EAC7BC,IAAI,EAAEJ,8BAAY,CAACK;AACrB,CAAC;AAEM,MAAMC,cAAc,GAAAZ,OAAA,CAAAY,cAAA,GAAG;EAC5BP,QAAQ,EAAEC,8BAAY,CAACC,gBAAgB;EACvCC,QAAQ,EAAEF,8BAAY,CAACO,aAAa;EACpCH,IAAI,EAAEJ,8BAAY,CAACK;AACrB,CAAC","ignoreList":[]}
+{"version":3,"file":"constants.js","names":["_labsWidgetCommon","require","_graphql","X_LABEL_SIZE","exports","Y_LABEL_SIZE","CHART_WIDTH","CHART_HEIGHT","darkBarColors","positive","colorPalette","bottleGreenLight","negative","orange","zero","disabledGray","lightBarColors","raspberryDark","instrumentsConfig","CurrencyName","Usd","Eur","Jpy","Gbp","Aud","Cad","Chf","Nzd"],"sources":["../../../../../src/CurrencyStrengthWidget/components/Chart/constants.tsx"],"sourcesContent":["import { colorPalette } from '@oanda/labs-widget-common';\nimport { CurrencyName } from '../../../gql/types/graphql';\n\nexport const X_LABEL_SIZE = 24;\nexport const Y_LABEL_SIZE = 30;\nexport const CHART_WIDTH = 9999;\nexport const CHART_HEIGHT = 135;\n\nexport const darkBarColors = {\n  positive: colorPalette.bottleGreenLight,\n  negative: colorPalette.orange,\n  zero: colorPalette.disabledGray,\n};\n\nexport const lightBarColors = {\n  positive: colorPalette.bottleGreenLight,\n  negative: colorPalette.raspberryDark,\n  zero: colorPalette.disabledGray,\n};\n\nexport const instrumentsConfig = [\n  CurrencyName.Usd,\n  CurrencyName.Eur,\n  CurrencyName.Jpy,\n  CurrencyName.Gbp,\n  CurrencyName.Aud,\n  CurrencyName.Cad,\n  CurrencyName.Chf,\n  CurrencyName.Nzd,\n];\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAEO,MAAME,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,EAAE;AACvB,MAAME,YAAY,GAAAD,OAAA,CAAAC,YAAA,GAAG,EAAE;AACvB,MAAMC,WAAW,GAAAF,OAAA,CAAAE,WAAA,GAAG,IAAI;AACxB,MAAMC,YAAY,GAAAH,OAAA,CAAAG,YAAA,GAAG,GAAG;AAExB,MAAMC,aAAa,GAAAJ,OAAA,CAAAI,aAAA,GAAG;EAC3BC,QAAQ,EAAEC,8BAAY,CAACC,gBAAgB;EACvCC,QAAQ,EAAEF,8BAAY,CAACG,MAAM;EAC7BC,IAAI,EAAEJ,8BAAY,CAACK;AACrB,CAAC;AAEM,MAAMC,cAAc,GAAAZ,OAAA,CAAAY,cAAA,GAAG;EAC5BP,QAAQ,EAAEC,8BAAY,CAACC,gBAAgB;EACvCC,QAAQ,EAAEF,8BAAY,CAACO,aAAa;EACpCH,IAAI,EAAEJ,8BAAY,CAACK;AACrB,CAAC;AAEM,MAAMG,iBAAiB,GAAAd,OAAA,CAAAc,iBAAA,GAAG,CAC/BC,qBAAY,CAACC,GAAG,EAChBD,qBAAY,CAACE,GAAG,EAChBF,qBAAY,CAACG,GAAG,EAChBH,qBAAY,CAACI,GAAG,EAChBJ,qBAAY,CAACK,GAAG,EAChBL,qBAAY,CAACM,GAAG,EAChBN,qBAAY,CAACO,GAAG,EAChBP,qBAAY,CAACQ,GAAG,CACjB","ignoreList":[]}

package/dist/main/CurrencyStrengthWidget/components/Chart/formatters.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tooltipFormatter = void 0;
+exports.tooltipFormatter = exports.sortData = void 0;
+var _constants = require("./constants");
 const tooltipFormatter = _ref => {
   let {
     marker,
@@ -15,4 +16,11 @@ const tooltipFormatter = _ref => {
   return "\n<div>\n  <div style=\"margin-bottom:5px;\">".concat(currency, " ").concat(lang('vs'), " ").concat(name, "</div>\n  <div style=\"display:flex;align-items:center;\">").concat(marker, " ").concat(value, "%</div>\n</div>");
 };
 exports.tooltipFormatter = tooltipFormatter;
+const sortData = data => ({
+  currencyStrength: data.currencyStrength && [...data.currencyStrength].sort((a, b) => _constants.instrumentsConfig.indexOf(a.currency) - _constants.instrumentsConfig.indexOf(b.currency)).map(item => ({
+    currency: item.currency,
+    strengthRelation: item.strengthRelation && [...item.strengthRelation].sort((a, b) => _constants.instrumentsConfig.indexOf(a.currency) - _constants.instrumentsConfig.indexOf(b.currency))
+  }))
+});
+exports.sortData = sortData;
 //# sourceMappingURL=formatters.js.map

package/dist/main/CurrencyStrengthWidget/components/Chart/formatters.js.map

@@ -1 +1 @@
-{"version":3,"file":"formatters.js","names":["tooltipFormatter","_ref","marker","name","value","currency","lang","concat","exports"],"sources":["../../../../../src/CurrencyStrengthWidget/components/Chart/formatters.ts"],"sourcesContent":["import { TooltipFormatterParams } from './types';\n\nexport const tooltipFormatter = ({\n  marker,\n  name,\n  value,\n  currency,\n  lang,\n}: TooltipFormatterParams) => `\n<div>\n  <div style=\"margin-bottom:5px;\">${currency} ${lang('vs')} ${name}</div>\n  <div style=\"display:flex;align-items:center;\">${marker} ${value}%</div>\n</div>`;\n"],"mappings":";;;;;;AAEO,MAAMA,gBAAgB,GAAGC,IAAA;EAAA,IAAC;IAC/BC,MAAM;IACNC,IAAI;IACJC,KAAK;IACLC,QAAQ;IACRC;EACsB,CAAC,GAAAL,IAAA;EAAA,uDAAAM,MAAA,CAEWF,QAAQ,OAAAE,MAAA,CAAID,IAAI,CAAC,IAAI,CAAC,OAAAC,MAAA,CAAIJ,IAAI,gEAAAI,MAAA,CAChBL,MAAM,OAAAK,MAAA,CAAIH,KAAK;AAAA,CAC1D;AAACI,OAAA,CAAAR,gBAAA,GAAAA,gBAAA","ignoreList":[]}
+{"version":3,"file":"formatters.js","names":["_constants","require","tooltipFormatter","_ref","marker","name","value","currency","lang","concat","exports","sortData","data","currencyStrength","sort","a","b","instrumentsConfig","indexOf","map","item","strengthRelation"],"sources":["../../../../../src/CurrencyStrengthWidget/components/Chart/formatters.ts"],"sourcesContent":["import { GetCurrencyStrengthQuery } from '../../../gql/types/graphql';\nimport { instrumentsConfig } from './constants';\nimport { TooltipFormatterParams } from './types';\n\nexport const tooltipFormatter = ({\n  marker,\n  name,\n  value,\n  currency,\n  lang,\n}: TooltipFormatterParams) => `\n<div>\n  <div style=\"margin-bottom:5px;\">${currency} ${lang('vs')} ${name}</div>\n  <div style=\"display:flex;align-items:center;\">${marker} ${value}%</div>\n</div>`;\n\nexport const sortData: (data: GetCurrencyStrengthQuery) => GetCurrencyStrengthQuery = (\n  data,\n) => ({\n  currencyStrength: data.currencyStrength\n  && [...data.currencyStrength].sort(\n    (a, b) => instrumentsConfig.indexOf(a.currency) - instrumentsConfig.indexOf(b.currency),\n  ).map((item) => ({\n    currency: item.currency,\n    strengthRelation: item.strengthRelation && [...item.strengthRelation].sort(\n      (a, b) => instrumentsConfig.indexOf(a.currency) - instrumentsConfig.indexOf(b.currency),\n    ),\n  })),\n});\n"],"mappings":";;;;;;AACA,IAAAA,UAAA,GAAAC,OAAA;AAGO,MAAMC,gBAAgB,GAAGC,IAAA;EAAA,IAAC;IAC/BC,MAAM;IACNC,IAAI;IACJC,KAAK;IACLC,QAAQ;IACRC;EACsB,CAAC,GAAAL,IAAA;EAAA,uDAAAM,MAAA,CAEWF,QAAQ,OAAAE,MAAA,CAAID,IAAI,CAAC,IAAI,CAAC,OAAAC,MAAA,CAAIJ,IAAI,gEAAAI,MAAA,CAChBL,MAAM,OAAAK,MAAA,CAAIH,KAAK;AAAA,CAC1D;AAACI,OAAA,CAAAR,gBAAA,GAAAA,gBAAA;AAED,MAAMS,QAAsE,GACjFC,IAAI,KACA;EACJC,gBAAgB,EAAED,IAAI,CAACC,gBAAgB,IACpC,CAAC,GAAGD,IAAI,CAACC,gBAAgB,CAAC,CAACC,IAAI,CAChC,CAACC,CAAC,EAAEC,CAAC,KAAKC,4BAAiB,CAACC,OAAO,CAACH,CAAC,CAACR,QAAQ,CAAC,GAAGU,4BAAiB,CAACC,OAAO,CAACF,CAAC,CAACT,QAAQ,CACxF,CAAC,CAACY,GAAG,CAAEC,IAAI,KAAM;IACfb,QAAQ,EAAEa,IAAI,CAACb,QAAQ;IACvBc,gBAAgB,EAAED,IAAI,CAACC,gBAAgB,IAAI,CAAC,GAAGD,IAAI,CAACC,gBAAgB,CAAC,CAACP,IAAI,CACxE,CAACC,CAAC,EAAEC,CAAC,KAAKC,4BAAiB,CAACC,OAAO,CAACH,CAAC,CAACR,QAAQ,CAAC,GAAGU,4BAAiB,CAACC,OAAO,CAACF,CAAC,CAACT,QAAQ,CACxF;EACF,CAAC,CAAC;AACJ,CAAC,CAAC;AAACG,OAAA,CAAAC,QAAA,GAAAA,QAAA","ignoreList":[]}

package/dist/main/CurrencyStrengthWidget/components/Chart/getOption.js

@@ -100,7 +100,11 @@ const getOption = _ref => {
     series: [{
       data: percentages,
       type: 'bar',
+      emphasis: {
+        disabled: true
+      },
       itemStyle: {
+        opacity: 1,
         color: _ref3 => {
           let {
             data

package/dist/main/CurrencyStrengthWidget/components/Chart/getOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"getOption.js","names":["_labsWidgetCommon","require","_constants","_formatters","getOption","_ref","values","currency","isDark","lang","currencies","map","item","percentages","percentage","barColors","darkBarColors","lightBarColors","gridLines","getGridLines","chartWidth","CHART_WIDTH","chartHeight","CHART_HEIGHT","xLabelsSize","yLabelSize","animation","title","left","text","concat","textStyle","fontSize","lineHeight","fontWeight","grid","name","top","right","Y_LABEL_SIZE","bottom","X_LABEL_SIZE","graphic","tooltip","trigger","formatter","_ref2","marker","value","tooltipFormatter","axisPointer","axis","extraCssText","xAxis","type","data","axisTick","show","axisLine","splitLine","axisLabel","yAxis","position","min","Math","floor","max","ceil","interval","series","itemStyle","color","_ref3","positive","negative","zero","exports"],"sources":["../../../../../src/CurrencyStrengthWidget/components/Chart/getOption.ts"],"sourcesContent":["import { getGridLines } from '@oanda/labs-widget-common';\nimport {\n  CHART_HEIGHT,\n  CHART_WIDTH,\n  X_LABEL_SIZE,\n  Y_LABEL_SIZE,\n  darkBarColors,\n  lightBarColors,\n} from './constants';\nimport { GetOptionProps } from './types';\nimport { tooltipFormatter } from './formatters';\n\nexport const getOption = ({\n  values, currency, isDark, lang,\n}: GetOptionProps) => {\n  const currencies = values.map((item) => item.currency);\n  const percentages = values.map((item) => item.percentage);\n  const barColors = isDark ? darkBarColors : lightBarColors;\n\n  const gridLines = getGridLines({\n    isDark,\n    chartWidth: CHART_WIDTH,\n    chartHeight: CHART_HEIGHT,\n    xLabelsSize: -2,\n    yLabelSize: -3,\n  });\n\n  return {\n    animation: false,\n    title: {\n      left: 'center',\n      text: `${currency} vs`,\n      textStyle: {\n        fontSize: 12,\n        lineHeight: 20,\n        fontWeight: 400,\n      },\n    },\n    grid: [\n      {\n        name: 'main-grid',\n        top: '30px',\n        right: '0px',\n        left: `${Y_LABEL_SIZE}px`,\n        bottom: `${X_LABEL_SIZE}px`,\n      },\n    ],\n    graphic: [\n      ...gridLines,\n    ],\n    tooltip: {\n      trigger: 'axis',\n      formatter: (\n        [{ marker, name, value }]\n        : { marker: string, name: string, value: number }[],\n      ) => tooltipFormatter({\n        lang,\n        currency,\n        marker,\n        name,\n        value,\n      }),\n      axisPointer: {\n        axis: 'x',\n      },\n      extraCssText: 'z-index: 1',\n    },\n    xAxis: {\n      type: 'category',\n      data: currencies,\n      axisTick: { show: false },\n      axisLine: { show: false },\n      splitLine: { show: false },\n      axisLabel: {\n        fontSize: 10,\n      },\n    },\n    yAxis: {\n      type: 'value',\n      position: 'left',\n      min: Math.floor(Math.min(...percentages)),\n      max: Math.ceil(Math.max(...percentages)),\n      interval: 1,\n      axisLine: { show: false },\n      axisTick: { show: false },\n      axisLabel: {\n        formatter: '{value}%',\n        fontSize: 10,\n      },\n    },\n    series: [\n      {\n        data: percentages,\n        type: 'bar',\n        itemStyle: {\n          color: ({ data } : { data: number }) => {\n            if (data > 0) {\n              return barColors.positive;\n            }\n            if (data < 0) {\n              return barColors.negative;\n            }\n            return barColors.zero;\n          },\n        },\n      },\n    ],\n  };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"getOption.js","names":["_labsWidgetCommon","require","_constants","_formatters","getOption","_ref","values","currency","isDark","lang","currencies","map","item","percentages","percentage","barColors","darkBarColors","lightBarColors","gridLines","getGridLines","chartWidth","CHART_WIDTH","chartHeight","CHART_HEIGHT","xLabelsSize","yLabelSize","animation","title","left","text","concat","textStyle","fontSize","lineHeight","fontWeight","grid","name","top","right","Y_LABEL_SIZE","bottom","X_LABEL_SIZE","graphic","tooltip","trigger","formatter","_ref2","marker","value","tooltipFormatter","axisPointer","axis","extraCssText","xAxis","type","data","axisTick","show","axisLine","splitLine","axisLabel","yAxis","position","min","Math","floor","max","ceil","interval","series","emphasis","disabled","itemStyle","opacity","color","_ref3","positive","negative","zero","exports"],"sources":["../../../../../src/CurrencyStrengthWidget/components/Chart/getOption.ts"],"sourcesContent":["import { getGridLines } from '@oanda/labs-widget-common';\nimport {\n  CHART_HEIGHT,\n  CHART_WIDTH,\n  X_LABEL_SIZE,\n  Y_LABEL_SIZE,\n  darkBarColors,\n  lightBarColors,\n} from './constants';\nimport { GetOptionProps } from './types';\nimport { tooltipFormatter } from './formatters';\n\nexport const getOption = ({\n  values, currency, isDark, lang,\n}: GetOptionProps) => {\n  const currencies = values.map((item) => item.currency);\n  const percentages = values.map((item) => item.percentage);\n  const barColors = isDark ? darkBarColors : lightBarColors;\n\n  const gridLines = getGridLines({\n    isDark,\n    chartWidth: CHART_WIDTH,\n    chartHeight: CHART_HEIGHT,\n    xLabelsSize: -2,\n    yLabelSize: -3,\n  });\n\n  return {\n    animation: false,\n    title: {\n      left: 'center',\n      text: `${currency} vs`,\n      textStyle: {\n        fontSize: 12,\n        lineHeight: 20,\n        fontWeight: 400,\n      },\n    },\n    grid: [\n      {\n        name: 'main-grid',\n        top: '30px',\n        right: '0px',\n        left: `${Y_LABEL_SIZE}px`,\n        bottom: `${X_LABEL_SIZE}px`,\n      },\n    ],\n    graphic: [\n      ...gridLines,\n    ],\n    tooltip: {\n      trigger: 'axis',\n      formatter: (\n        [{ marker, name, value }]\n        : { marker: string, name: string, value: number }[],\n      ) => tooltipFormatter({\n        lang,\n        currency,\n        marker,\n        name,\n        value,\n      }),\n      axisPointer: {\n        axis: 'x',\n      },\n      extraCssText: 'z-index: 1',\n    },\n    xAxis: {\n      type: 'category',\n      data: currencies,\n      axisTick: { show: false },\n      axisLine: { show: false },\n      splitLine: { show: false },\n      axisLabel: {\n        fontSize: 10,\n      },\n    },\n    yAxis: {\n      type: 'value',\n      position: 'left',\n      min: Math.floor(Math.min(...percentages)),\n      max: Math.ceil(Math.max(...percentages)),\n      interval: 1,\n      axisLine: { show: false },\n      axisTick: { show: false },\n      axisLabel: {\n        formatter: '{value}%',\n        fontSize: 10,\n      },\n    },\n    series: [\n      {\n        data: percentages,\n        type: 'bar',\n        emphasis: {\n          disabled: true,\n        },\n        itemStyle: {\n          opacity: 1,\n          color: ({ data } : { data: number }) => {\n            if (data > 0) {\n              return barColors.positive;\n            }\n            if (data < 0) {\n              return barColors.negative;\n            }\n            return barColors.zero;\n          },\n        },\n      },\n    ],\n  };\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/module/CurrencyStrengthWidget/ChartsWithData.js

@@ -4,8 +4,9 @@ import { ChartError, Size, Spinner, SpinnerSize, ThemeContext } from '@oanda/lab
 import classnames from 'classnames';
 import { getCurrencyStrength } from '../gql/getCurrencyStrength';
 import { Chart } from './components/Chart';
+import { sortData } from './components/Chart/formatters';
 const ChartWithData = () => {
-  var _data$currencyStrengt, _data$currencyStrengt2, _data$currencyStrengt3;
+  var _data$currencyStrengt, _data$currencyStrengt2, _sortData$currencyStr;
   const {
     size
   } = useContext(ThemeContext);
@@ -29,7 +30,7 @@ const ChartWithData = () => {
       'lw-grid-cols-3 ': isDesktop,
       'lw-grid-cols-1': !isDesktop
     })
-  }, (_data$currencyStrengt3 = data.currencyStrength) === null || _data$currencyStrengt3 === void 0 ? void 0 : _data$currencyStrengt3.map(item => React.createElement("div", {
+  }, (_sortData$currencyStr = sortData(data).currencyStrength) === null || _sortData$currencyStr === void 0 ? void 0 : _sortData$currencyStr.map(item => React.createElement("div", {
     key: item.currency,
     className: "lw-flex lw-h-[135px] lw-flex-1 lw-items-center lw-justify-center"
   }, React.createElement(Chart, {

package/dist/module/CurrencyStrengthWidget/ChartsWithData.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChartsWithData.js","names":["React","useContext","useQuery","ChartError","Size","Spinner","SpinnerSize","ThemeContext","classnames","getCurrencyStrength","Chart","ChartWithData","_data$currencyStrengt","_data$currencyStrengt2","_data$currencyStrengt3","size","isDesktop","DESKTOP","loading","data","error","fetchPolicy","showChart","currencyStrength","length","showError","createElement","Fragment","className","lg","map","item","key","currency","values","strengthRelation"],"sources":["../../../src/CurrencyStrengthWidget/ChartsWithData.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { useQuery } from '@apollo/client';\nimport {\n  ChartError, Size, Spinner, SpinnerSize,\n  ThemeContext,\n} from '@oanda/labs-widget-common';\nimport classnames from 'classnames';\nimport { getCurrencyStrength } from '../gql/getCurrencyStrength';\nimport { GetCurrencyStrengthQuery } from '../gql/types/graphql';\nimport { Chart } from './components/Chart';\n\nconst ChartWithData = () => {\n  const { size } = useContext(ThemeContext);\n  const isDesktop = size === Size.DESKTOP;\n  const { loading, data, error } = useQuery<GetCurrencyStrengthQuery>(getCurrencyStrength, {\n    fetchPolicy: 'cache-and-network',\n  });\n\n  const showChart = data?.currencyStrength && data?.currencyStrength?.length > 0;\n  const showError = data?.currencyStrength?.length === 0 || error;\n\n  return (\n    <>\n      {loading\n      && (\n        <div className=\"lw-flex lw-h-[461px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary\">\n          <Spinner size={SpinnerSize.lg} />\n        </div>\n      )}\n      {!loading && showChart && (\n        <div\n          data-testid=\"currency-strength-chart-wrapper\"\n          className={classnames('lw-grid lw-place-content-center lw-gap-7', {\n            'lw-grid-cols-3 ': isDesktop,\n            'lw-grid-cols-1': !isDesktop,\n          })}\n        >\n          {data.currencyStrength?.map((item) => (\n            <div key={item.currency} className=\"lw-flex lw-h-[135px] lw-flex-1 lw-items-center lw-justify-center\">\n              <Chart currency={item.currency} values={item.strengthRelation!} />\n            </div>\n          ))}\n        </div>\n      )}\n      {!loading && showError && (\n        <div className=\"lw-flex lw-h-[425px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary\">\n          <ChartError />\n        </div>\n      )}\n    </>\n  );\n};\n\nexport { ChartWithData };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,QAAQ,QAAQ,gBAAgB;AACzC,SACEC,UAAU,EAAEC,IAAI,EAAEC,OAAO,EAAEC,WAAW,EACtCC,YAAY,QACP,2BAA2B;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,mBAAmB,QAAQ,4BAA4B;AAEhE,SAASC,KAAK,QAAQ,oBAAoB;AAE1C,MAAMC,aAAa,GAAGA,CAAA,KAAM;EAAA,IAAAC,qBAAA,EAAAC,sBAAA,EAAAC,sBAAA;EAC1B,MAAM;IAAEC;EAAK,CAAC,GAAGd,UAAU,CAACM,YAAY,CAAC;EACzC,MAAMS,SAAS,GAAGD,IAAI,KAAKX,IAAI,CAACa,OAAO;EACvC,MAAM;IAAEC,OAAO;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAGlB,QAAQ,CAA2BO,mBAAmB,EAAE;IACvFY,WAAW,EAAE;EACf,CAAC,CAAC;EAEF,MAAMC,SAAS,GAAG,CAAAH,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEI,gBAAgB,KAAI,CAAAJ,IAAI,aAAJA,IAAI,gBAAAP,qBAAA,GAAJO,IAAI,CAAEI,gBAAgB,cAAAX,qBAAA,uBAAtBA,qBAAA,CAAwBY,MAAM,IAAG,CAAC;EAC9E,MAAMC,SAAS,GAAG,CAAAN,IAAI,aAAJA,IAAI,gBAAAN,sBAAA,GAAJM,IAAI,CAAEI,gBAAgB,cAAAV,sBAAA,uBAAtBA,sBAAA,CAAwBW,MAAM,MAAK,CAAC,IAAIJ,KAAK;EAE/D,OACEpB,KAAA,CAAA0B,aAAA,CAAA1B,KAAA,CAAA2B,QAAA,QACGT,OAAO,IAENlB,KAAA,CAAA0B,aAAA;IAAKE,SAAS,EAAC;EAAmG,GAChH5B,KAAA,CAAA0B,aAAA,CAACrB,OAAO;IAACU,IAAI,EAAET,WAAW,CAACuB;EAAG,CAAE,CAC7B,CACN,EACA,CAACX,OAAO,IAAII,SAAS,IACpBtB,KAAA,CAAA0B,aAAA;IACE,eAAY,iCAAiC;IAC7CE,SAAS,EAAEpB,UAAU,CAAC,0CAA0C,EAAE;MAChE,iBAAiB,EAAEQ,SAAS;MAC5B,gBAAgB,EAAE,CAACA;IACrB,CAAC;EAAE,IAAAF,sBAAA,GAEFK,IAAI,CAACI,gBAAgB,cAAAT,sBAAA,uBAArBA,sBAAA,CAAuBgB,GAAG,CAAEC,IAAI,IAC/B/B,KAAA,CAAA0B,aAAA;IAAKM,GAAG,EAAED,IAAI,CAACE,QAAS;IAACL,SAAS,EAAC;EAAkE,GACnG5B,KAAA,CAAA0B,aAAA,CAAChB,KAAK;IAACuB,QAAQ,EAAEF,IAAI,CAACE,QAAS;IAACC,MAAM,EAAEH,IAAI,CAACI;EAAkB,CAAE,CAC9D,CACN,CACE,CACN,EACA,CAACjB,OAAO,IAAIO,SAAS,IACpBzB,KAAA,CAAA0B,aAAA;IAAKE,SAAS,EAAC;EAAmG,GAChH5B,KAAA,CAAA0B,aAAA,CAACvB,UAAU,MAAE,CACV,CAEP,CAAC;AAEP,CAAC;AAED,SAASQ,aAAa","ignoreList":[]}
+{"version":3,"file":"ChartsWithData.js","names":["React","useContext","useQuery","ChartError","Size","Spinner","SpinnerSize","ThemeContext","classnames","getCurrencyStrength","Chart","sortData","ChartWithData","_data$currencyStrengt","_data$currencyStrengt2","_sortData$currencyStr","size","isDesktop","DESKTOP","loading","data","error","fetchPolicy","showChart","currencyStrength","length","showError","createElement","Fragment","className","lg","map","item","key","currency","values","strengthRelation"],"sources":["../../../src/CurrencyStrengthWidget/ChartsWithData.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { useQuery } from '@apollo/client';\nimport {\n  ChartError, Size, Spinner, SpinnerSize,\n  ThemeContext,\n} from '@oanda/labs-widget-common';\nimport classnames from 'classnames';\nimport { getCurrencyStrength } from '../gql/getCurrencyStrength';\nimport { GetCurrencyStrengthQuery } from '../gql/types/graphql';\nimport { Chart } from './components/Chart';\nimport { sortData } from './components/Chart/formatters';\n\nconst ChartWithData = () => {\n  const { size } = useContext(ThemeContext);\n  const isDesktop = size === Size.DESKTOP;\n  const { loading, data, error } = useQuery<GetCurrencyStrengthQuery>(getCurrencyStrength, {\n    fetchPolicy: 'cache-and-network',\n  });\n\n  const showChart = data?.currencyStrength && data?.currencyStrength?.length > 0;\n  const showError = data?.currencyStrength?.length === 0 || error;\n\n  return (\n    <>\n      {loading\n      && (\n        <div className=\"lw-flex lw-h-[461px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary\">\n          <Spinner size={SpinnerSize.lg} />\n        </div>\n      )}\n      {!loading && showChart && (\n        <div\n          data-testid=\"currency-strength-chart-wrapper\"\n          className={classnames('lw-grid lw-place-content-center lw-gap-7', {\n            'lw-grid-cols-3 ': isDesktop,\n            'lw-grid-cols-1': !isDesktop,\n          })}\n        >\n          {sortData(data).currencyStrength?.map((item) => (\n            <div key={item.currency} className=\"lw-flex lw-h-[135px] lw-flex-1 lw-items-center lw-justify-center\">\n              <Chart currency={item.currency} values={item.strengthRelation!} />\n            </div>\n          ))}\n        </div>\n      )}\n      {!loading && showError && (\n        <div className=\"lw-flex lw-h-[425px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary\">\n          <ChartError />\n        </div>\n      )}\n    </>\n  );\n};\n\nexport { ChartWithData };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,QAAQ,QAAQ,gBAAgB;AACzC,SACEC,UAAU,EAAEC,IAAI,EAAEC,OAAO,EAAEC,WAAW,EACtCC,YAAY,QACP,2BAA2B;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,mBAAmB,QAAQ,4BAA4B;AAEhE,SAASC,KAAK,QAAQ,oBAAoB;AAC1C,SAASC,QAAQ,QAAQ,+BAA+B;AAExD,MAAMC,aAAa,GAAGA,CAAA,KAAM;EAAA,IAAAC,qBAAA,EAAAC,sBAAA,EAAAC,qBAAA;EAC1B,MAAM;IAAEC;EAAK,CAAC,GAAGf,UAAU,CAACM,YAAY,CAAC;EACzC,MAAMU,SAAS,GAAGD,IAAI,KAAKZ,IAAI,CAACc,OAAO;EACvC,MAAM;IAAEC,OAAO;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAGnB,QAAQ,CAA2BO,mBAAmB,EAAE;IACvFa,WAAW,EAAE;EACf,CAAC,CAAC;EAEF,MAAMC,SAAS,GAAG,CAAAH,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEI,gBAAgB,KAAI,CAAAJ,IAAI,aAAJA,IAAI,gBAAAP,qBAAA,GAAJO,IAAI,CAAEI,gBAAgB,cAAAX,qBAAA,uBAAtBA,qBAAA,CAAwBY,MAAM,IAAG,CAAC;EAC9E,MAAMC,SAAS,GAAG,CAAAN,IAAI,aAAJA,IAAI,gBAAAN,sBAAA,GAAJM,IAAI,CAAEI,gBAAgB,cAAAV,sBAAA,uBAAtBA,sBAAA,CAAwBW,MAAM,MAAK,CAAC,IAAIJ,KAAK;EAE/D,OACErB,KAAA,CAAA2B,aAAA,CAAA3B,KAAA,CAAA4B,QAAA,QACGT,OAAO,IAENnB,KAAA,CAAA2B,aAAA;IAAKE,SAAS,EAAC;EAAmG,GAChH7B,KAAA,CAAA2B,aAAA,CAACtB,OAAO;IAACW,IAAI,EAAEV,WAAW,CAACwB;EAAG,CAAE,CAC7B,CACN,EACA,CAACX,OAAO,IAAII,SAAS,IACpBvB,KAAA,CAAA2B,aAAA;IACE,eAAY,iCAAiC;IAC7CE,SAAS,EAAErB,UAAU,CAAC,0CAA0C,EAAE;MAChE,iBAAiB,EAAES,SAAS;MAC5B,gBAAgB,EAAE,CAACA;IACrB,CAAC;EAAE,IAAAF,qBAAA,GAEFJ,QAAQ,CAACS,IAAI,CAAC,CAACI,gBAAgB,cAAAT,qBAAA,uBAA/BA,qBAAA,CAAiCgB,GAAG,CAAEC,IAAI,IACzChC,KAAA,CAAA2B,aAAA;IAAKM,GAAG,EAAED,IAAI,CAACE,QAAS;IAACL,SAAS,EAAC;EAAkE,GACnG7B,KAAA,CAAA2B,aAAA,CAACjB,KAAK;IAACwB,QAAQ,EAAEF,IAAI,CAACE,QAAS;IAACC,MAAM,EAAEH,IAAI,CAACI;EAAkB,CAAE,CAC9D,CACN,CACE,CACN,EACA,CAACjB,OAAO,IAAIO,SAAS,IACpB1B,KAAA,CAAA2B,aAAA;IAAKE,SAAS,EAAC;EAAmG,GAChH7B,KAAA,CAAA2B,aAAA,CAACxB,UAAU,MAAE,CACV,CAEP,CAAC;AAEP,CAAC;AAED,SAASS,aAAa","ignoreList":[]}

package/dist/module/CurrencyStrengthWidget/components/Chart/constants.js

@@ -1,4 +1,5 @@
 import { colorPalette } from '@oanda/labs-widget-common';
+import { CurrencyName } from '../../../gql/types/graphql';
 export const X_LABEL_SIZE = 24;
 export const Y_LABEL_SIZE = 30;
 export const CHART_WIDTH = 9999;
@@ -13,4 +14,5 @@ export const lightBarColors = {
   negative: colorPalette.raspberryDark,
   zero: colorPalette.disabledGray
 };
+export const instrumentsConfig = [CurrencyName.Usd, CurrencyName.Eur, CurrencyName.Jpy, CurrencyName.Gbp, CurrencyName.Aud, CurrencyName.Cad, CurrencyName.Chf, CurrencyName.Nzd];
 //# sourceMappingURL=constants.js.map

package/dist/module/CurrencyStrengthWidget/components/Chart/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","names":["colorPalette","X_LABEL_SIZE","Y_LABEL_SIZE","CHART_WIDTH","CHART_HEIGHT","darkBarColors","positive","bottleGreenLight","negative","orange","zero","disabledGray","lightBarColors","raspberryDark"],"sources":["../../../../../src/CurrencyStrengthWidget/components/Chart/constants.tsx"],"sourcesContent":["import { colorPalette } from '@oanda/labs-widget-common';\n\nexport const X_LABEL_SIZE = 24;\nexport const Y_LABEL_SIZE = 30;\nexport const CHART_WIDTH = 9999;\nexport const CHART_HEIGHT = 135;\n\nexport const darkBarColors = {\n  positive: colorPalette.bottleGreenLight,\n  negative: colorPalette.orange,\n  zero: colorPalette.disabledGray,\n};\n\nexport const lightBarColors = {\n  positive: colorPalette.bottleGreenLight,\n  negative: colorPalette.raspberryDark,\n  zero: colorPalette.disabledGray,\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,2BAA2B;AAExD,OAAO,MAAMC,YAAY,GAAG,EAAE;AAC9B,OAAO,MAAMC,YAAY,GAAG,EAAE;AAC9B,OAAO,MAAMC,WAAW,GAAG,IAAI;AAC/B,OAAO,MAAMC,YAAY,GAAG,GAAG;AAE/B,OAAO,MAAMC,aAAa,GAAG;EAC3BC,QAAQ,EAAEN,YAAY,CAACO,gBAAgB;EACvCC,QAAQ,EAAER,YAAY,CAACS,MAAM;EAC7BC,IAAI,EAAEV,YAAY,CAACW;AACrB,CAAC;AAED,OAAO,MAAMC,cAAc,GAAG;EAC5BN,QAAQ,EAAEN,YAAY,CAACO,gBAAgB;EACvCC,QAAQ,EAAER,YAAY,CAACa,aAAa;EACpCH,IAAI,EAAEV,YAAY,CAACW;AACrB,CAAC","ignoreList":[]}
+{"version":3,"file":"constants.js","names":["colorPalette","CurrencyName","X_LABEL_SIZE","Y_LABEL_SIZE","CHART_WIDTH","CHART_HEIGHT","darkBarColors","positive","bottleGreenLight","negative","orange","zero","disabledGray","lightBarColors","raspberryDark","instrumentsConfig","Usd","Eur","Jpy","Gbp","Aud","Cad","Chf","Nzd"],"sources":["../../../../../src/CurrencyStrengthWidget/components/Chart/constants.tsx"],"sourcesContent":["import { colorPalette } from '@oanda/labs-widget-common';\nimport { CurrencyName } from '../../../gql/types/graphql';\n\nexport const X_LABEL_SIZE = 24;\nexport const Y_LABEL_SIZE = 30;\nexport const CHART_WIDTH = 9999;\nexport const CHART_HEIGHT = 135;\n\nexport const darkBarColors = {\n  positive: colorPalette.bottleGreenLight,\n  negative: colorPalette.orange,\n  zero: colorPalette.disabledGray,\n};\n\nexport const lightBarColors = {\n  positive: colorPalette.bottleGreenLight,\n  negative: colorPalette.raspberryDark,\n  zero: colorPalette.disabledGray,\n};\n\nexport const instrumentsConfig = [\n  CurrencyName.Usd,\n  CurrencyName.Eur,\n  CurrencyName.Jpy,\n  CurrencyName.Gbp,\n  CurrencyName.Aud,\n  CurrencyName.Cad,\n  CurrencyName.Chf,\n  CurrencyName.Nzd,\n];\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,2BAA2B;AACxD,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,OAAO,MAAMC,YAAY,GAAG,EAAE;AAC9B,OAAO,MAAMC,YAAY,GAAG,EAAE;AAC9B,OAAO,MAAMC,WAAW,GAAG,IAAI;AAC/B,OAAO,MAAMC,YAAY,GAAG,GAAG;AAE/B,OAAO,MAAMC,aAAa,GAAG;EAC3BC,QAAQ,EAAEP,YAAY,CAACQ,gBAAgB;EACvCC,QAAQ,EAAET,YAAY,CAACU,MAAM;EAC7BC,IAAI,EAAEX,YAAY,CAACY;AACrB,CAAC;AAED,OAAO,MAAMC,cAAc,GAAG;EAC5BN,QAAQ,EAAEP,YAAY,CAACQ,gBAAgB;EACvCC,QAAQ,EAAET,YAAY,CAACc,aAAa;EACpCH,IAAI,EAAEX,YAAY,CAACY;AACrB,CAAC;AAED,OAAO,MAAMG,iBAAiB,GAAG,CAC/Bd,YAAY,CAACe,GAAG,EAChBf,YAAY,CAACgB,GAAG,EAChBhB,YAAY,CAACiB,GAAG,EAChBjB,YAAY,CAACkB,GAAG,EAChBlB,YAAY,CAACmB,GAAG,EAChBnB,YAAY,CAACoB,GAAG,EAChBpB,YAAY,CAACqB,GAAG,EAChBrB,YAAY,CAACsB,GAAG,CACjB","ignoreList":[]}

package/dist/module/CurrencyStrengthWidget/components/Chart/formatters.js

@@ -1,3 +1,4 @@
+import { instrumentsConfig } from './constants';
 export const tooltipFormatter = _ref => {
   let {
     marker,
@@ -8,4 +9,10 @@ export const tooltipFormatter = _ref => {
   } = _ref;
   return "\n<div>\n  <div style=\"margin-bottom:5px;\">".concat(currency, " ").concat(lang('vs'), " ").concat(name, "</div>\n  <div style=\"display:flex;align-items:center;\">").concat(marker, " ").concat(value, "%</div>\n</div>");
 };
+export const sortData = data => ({
+  currencyStrength: data.currencyStrength && [...data.currencyStrength].sort((a, b) => instrumentsConfig.indexOf(a.currency) - instrumentsConfig.indexOf(b.currency)).map(item => ({
+    currency: item.currency,
+    strengthRelation: item.strengthRelation && [...item.strengthRelation].sort((a, b) => instrumentsConfig.indexOf(a.currency) - instrumentsConfig.indexOf(b.currency))
+  }))
+});
 //# sourceMappingURL=formatters.js.map

package/dist/module/CurrencyStrengthWidget/components/Chart/formatters.js.map

@@ -1 +1 @@
-{"version":3,"file":"formatters.js","names":["tooltipFormatter","_ref","marker","name","value","currency","lang","concat"],"sources":["../../../../../src/CurrencyStrengthWidget/components/Chart/formatters.ts"],"sourcesContent":["import { TooltipFormatterParams } from './types';\n\nexport const tooltipFormatter = ({\n  marker,\n  name,\n  value,\n  currency,\n  lang,\n}: TooltipFormatterParams) => `\n<div>\n  <div style=\"margin-bottom:5px;\">${currency} ${lang('vs')} ${name}</div>\n  <div style=\"display:flex;align-items:center;\">${marker} ${value}%</div>\n</div>`;\n"],"mappings":"AAEA,OAAO,MAAMA,gBAAgB,GAAGC,IAAA;EAAA,IAAC;IAC/BC,MAAM;IACNC,IAAI;IACJC,KAAK;IACLC,QAAQ;IACRC;EACsB,CAAC,GAAAL,IAAA;EAAA,uDAAAM,MAAA,CAEWF,QAAQ,OAAAE,MAAA,CAAID,IAAI,CAAC,IAAI,CAAC,OAAAC,MAAA,CAAIJ,IAAI,gEAAAI,MAAA,CAChBL,MAAM,OAAAK,MAAA,CAAIH,KAAK;AAAA,CAC1D","ignoreList":[]}
+{"version":3,"file":"formatters.js","names":["instrumentsConfig","tooltipFormatter","_ref","marker","name","value","currency","lang","concat","sortData","data","currencyStrength","sort","a","b","indexOf","map","item","strengthRelation"],"sources":["../../../../../src/CurrencyStrengthWidget/components/Chart/formatters.ts"],"sourcesContent":["import { GetCurrencyStrengthQuery } from '../../../gql/types/graphql';\nimport { instrumentsConfig } from './constants';\nimport { TooltipFormatterParams } from './types';\n\nexport const tooltipFormatter = ({\n  marker,\n  name,\n  value,\n  currency,\n  lang,\n}: TooltipFormatterParams) => `\n<div>\n  <div style=\"margin-bottom:5px;\">${currency} ${lang('vs')} ${name}</div>\n  <div style=\"display:flex;align-items:center;\">${marker} ${value}%</div>\n</div>`;\n\nexport const sortData: (data: GetCurrencyStrengthQuery) => GetCurrencyStrengthQuery = (\n  data,\n) => ({\n  currencyStrength: data.currencyStrength\n  && [...data.currencyStrength].sort(\n    (a, b) => instrumentsConfig.indexOf(a.currency) - instrumentsConfig.indexOf(b.currency),\n  ).map((item) => ({\n    currency: item.currency,\n    strengthRelation: item.strengthRelation && [...item.strengthRelation].sort(\n      (a, b) => instrumentsConfig.indexOf(a.currency) - instrumentsConfig.indexOf(b.currency),\n    ),\n  })),\n});\n"],"mappings":"AACA,SAASA,iBAAiB,QAAQ,aAAa;AAG/C,OAAO,MAAMC,gBAAgB,GAAGC,IAAA;EAAA,IAAC;IAC/BC,MAAM;IACNC,IAAI;IACJC,KAAK;IACLC,QAAQ;IACRC;EACsB,CAAC,GAAAL,IAAA;EAAA,uDAAAM,MAAA,CAEWF,QAAQ,OAAAE,MAAA,CAAID,IAAI,CAAC,IAAI,CAAC,OAAAC,MAAA,CAAIJ,IAAI,gEAAAI,MAAA,CAChBL,MAAM,OAAAK,MAAA,CAAIH,KAAK;AAAA,CAC1D;AAEP,OAAO,MAAMI,QAAsE,GACjFC,IAAI,KACA;EACJC,gBAAgB,EAAED,IAAI,CAACC,gBAAgB,IACpC,CAAC,GAAGD,IAAI,CAACC,gBAAgB,CAAC,CAACC,IAAI,CAChC,CAACC,CAAC,EAAEC,CAAC,KAAKd,iBAAiB,CAACe,OAAO,CAACF,CAAC,CAACP,QAAQ,CAAC,GAAGN,iBAAiB,CAACe,OAAO,CAACD,CAAC,CAACR,QAAQ,CACxF,CAAC,CAACU,GAAG,CAAEC,IAAI,KAAM;IACfX,QAAQ,EAAEW,IAAI,CAACX,QAAQ;IACvBY,gBAAgB,EAAED,IAAI,CAACC,gBAAgB,IAAI,CAAC,GAAGD,IAAI,CAACC,gBAAgB,CAAC,CAACN,IAAI,CACxE,CAACC,CAAC,EAAEC,CAAC,KAAKd,iBAAiB,CAACe,OAAO,CAACF,CAAC,CAACP,QAAQ,CAAC,GAAGN,iBAAiB,CAACe,OAAO,CAACD,CAAC,CAACR,QAAQ,CACxF;EACF,CAAC,CAAC;AACJ,CAAC,CAAC","ignoreList":[]}

package/dist/module/CurrencyStrengthWidget/components/Chart/getOption.js

@@ -94,7 +94,11 @@ export const getOption = _ref => {
     series: [{
       data: percentages,
       type: 'bar',
+      emphasis: {
+        disabled: true
+      },
       itemStyle: {
+        opacity: 1,
         color: _ref3 => {
           let {
             data

package/dist/module/CurrencyStrengthWidget/components/Chart/getOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"getOption.js","names":["getGridLines","CHART_HEIGHT","CHART_WIDTH","X_LABEL_SIZE","Y_LABEL_SIZE","darkBarColors","lightBarColors","tooltipFormatter","getOption","_ref","values","currency","isDark","lang","currencies","map","item","percentages","percentage","barColors","gridLines","chartWidth","chartHeight","xLabelsSize","yLabelSize","animation","title","left","text","concat","textStyle","fontSize","lineHeight","fontWeight","grid","name","top","right","bottom","graphic","tooltip","trigger","formatter","_ref2","marker","value","axisPointer","axis","extraCssText","xAxis","type","data","axisTick","show","axisLine","splitLine","axisLabel","yAxis","position","min","Math","floor","max","ceil","interval","series","itemStyle","color","_ref3","positive","negative","zero"],"sources":["../../../../../src/CurrencyStrengthWidget/components/Chart/getOption.ts"],"sourcesContent":["import { getGridLines } from '@oanda/labs-widget-common';\nimport {\n  CHART_HEIGHT,\n  CHART_WIDTH,\n  X_LABEL_SIZE,\n  Y_LABEL_SIZE,\n  darkBarColors,\n  lightBarColors,\n} from './constants';\nimport { GetOptionProps } from './types';\nimport { tooltipFormatter } from './formatters';\n\nexport const getOption = ({\n  values, currency, isDark, lang,\n}: GetOptionProps) => {\n  const currencies = values.map((item) => item.currency);\n  const percentages = values.map((item) => item.percentage);\n  const barColors = isDark ? darkBarColors : lightBarColors;\n\n  const gridLines = getGridLines({\n    isDark,\n    chartWidth: CHART_WIDTH,\n    chartHeight: CHART_HEIGHT,\n    xLabelsSize: -2,\n    yLabelSize: -3,\n  });\n\n  return {\n    animation: false,\n    title: {\n      left: 'center',\n      text: `${currency} vs`,\n      textStyle: {\n        fontSize: 12,\n        lineHeight: 20,\n        fontWeight: 400,\n      },\n    },\n    grid: [\n      {\n        name: 'main-grid',\n        top: '30px',\n        right: '0px',\n        left: `${Y_LABEL_SIZE}px`,\n        bottom: `${X_LABEL_SIZE}px`,\n      },\n    ],\n    graphic: [\n      ...gridLines,\n    ],\n    tooltip: {\n      trigger: 'axis',\n      formatter: (\n        [{ marker, name, value }]\n        : { marker: string, name: string, value: number }[],\n      ) => tooltipFormatter({\n        lang,\n        currency,\n        marker,\n        name,\n        value,\n      }),\n      axisPointer: {\n        axis: 'x',\n      },\n      extraCssText: 'z-index: 1',\n    },\n    xAxis: {\n      type: 'category',\n      data: currencies,\n      axisTick: { show: false },\n      axisLine: { show: false },\n      splitLine: { show: false },\n      axisLabel: {\n        fontSize: 10,\n      },\n    },\n    yAxis: {\n      type: 'value',\n      position: 'left',\n      min: Math.floor(Math.min(...percentages)),\n      max: Math.ceil(Math.max(...percentages)),\n      interval: 1,\n      axisLine: { show: false },\n      axisTick: { show: false },\n      axisLabel: {\n        formatter: '{value}%',\n        fontSize: 10,\n      },\n    },\n    series: [\n      {\n        data: percentages,\n        type: 'bar',\n        itemStyle: {\n          color: ({ data } : { data: number }) => {\n            if (data > 0) {\n              return barColors.positive;\n            }\n            if (data < 0) {\n              return barColors.negative;\n            }\n            return barColors.zero;\n          },\n        },\n      },\n    ],\n  };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"getOption.js","names":["getGridLines","CHART_HEIGHT","CHART_WIDTH","X_LABEL_SIZE","Y_LABEL_SIZE","darkBarColors","lightBarColors","tooltipFormatter","getOption","_ref","values","currency","isDark","lang","currencies","map","item","percentages","percentage","barColors","gridLines","chartWidth","chartHeight","xLabelsSize","yLabelSize","animation","title","left","text","concat","textStyle","fontSize","lineHeight","fontWeight","grid","name","top","right","bottom","graphic","tooltip","trigger","formatter","_ref2","marker","value","axisPointer","axis","extraCssText","xAxis","type","data","axisTick","show","axisLine","splitLine","axisLabel","yAxis","position","min","Math","floor","max","ceil","interval","series","emphasis","disabled","itemStyle","opacity","color","_ref3","positive","negative","zero"],"sources":["../../../../../src/CurrencyStrengthWidget/components/Chart/getOption.ts"],"sourcesContent":["import { getGridLines } from '@oanda/labs-widget-common';\nimport {\n  CHART_HEIGHT,\n  CHART_WIDTH,\n  X_LABEL_SIZE,\n  Y_LABEL_SIZE,\n  darkBarColors,\n  lightBarColors,\n} from './constants';\nimport { GetOptionProps } from './types';\nimport { tooltipFormatter } from './formatters';\n\nexport const getOption = ({\n  values, currency, isDark, lang,\n}: GetOptionProps) => {\n  const currencies = values.map((item) => item.currency);\n  const percentages = values.map((item) => item.percentage);\n  const barColors = isDark ? darkBarColors : lightBarColors;\n\n  const gridLines = getGridLines({\n    isDark,\n    chartWidth: CHART_WIDTH,\n    chartHeight: CHART_HEIGHT,\n    xLabelsSize: -2,\n    yLabelSize: -3,\n  });\n\n  return {\n    animation: false,\n    title: {\n      left: 'center',\n      text: `${currency} vs`,\n      textStyle: {\n        fontSize: 12,\n        lineHeight: 20,\n        fontWeight: 400,\n      },\n    },\n    grid: [\n      {\n        name: 'main-grid',\n        top: '30px',\n        right: '0px',\n        left: `${Y_LABEL_SIZE}px`,\n        bottom: `${X_LABEL_SIZE}px`,\n      },\n    ],\n    graphic: [\n      ...gridLines,\n    ],\n    tooltip: {\n      trigger: 'axis',\n      formatter: (\n        [{ marker, name, value }]\n        : { marker: string, name: string, value: number }[],\n      ) => tooltipFormatter({\n        lang,\n        currency,\n        marker,\n        name,\n        value,\n      }),\n      axisPointer: {\n        axis: 'x',\n      },\n      extraCssText: 'z-index: 1',\n    },\n    xAxis: {\n      type: 'category',\n      data: currencies,\n      axisTick: { show: false },\n      axisLine: { show: false },\n      splitLine: { show: false },\n      axisLabel: {\n        fontSize: 10,\n      },\n    },\n    yAxis: {\n      type: 'value',\n      position: 'left',\n      min: Math.floor(Math.min(...percentages)),\n      max: Math.ceil(Math.max(...percentages)),\n      interval: 1,\n      axisLine: { show: false },\n      axisTick: { show: false },\n      axisLabel: {\n        formatter: '{value}%',\n        fontSize: 10,\n      },\n    },\n    series: [\n      {\n        data: percentages,\n        type: 'bar',\n        emphasis: {\n          disabled: true,\n        },\n        itemStyle: {\n          opacity: 1,\n          color: ({ data } : { data: number }) => {\n            if (data > 0) {\n              return barColors.positive;\n            }\n            if (data < 0) {\n              return barColors.negative;\n            }\n            return barColors.zero;\n          },\n        },\n      },\n    ],\n  };\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/types/CurrencyStrengthWidget/components/Chart/constants.d.ts

@@ -1,3 +1,4 @@
+import { CurrencyName } from '../../../gql/types/graphql';
 export declare const X_LABEL_SIZE = 24;
 export declare const Y_LABEL_SIZE = 30;
 export declare const CHART_WIDTH = 9999;
@@ -12,3 +13,4 @@ export declare const lightBarColors: {
     negative: string;
     zero: string;
 };
+export declare const instrumentsConfig: CurrencyName[];

package/dist/types/CurrencyStrengthWidget/components/Chart/formatters.d.ts

@@ -1,2 +1,4 @@
+import { GetCurrencyStrengthQuery } from '../../../gql/types/graphql';
 import { TooltipFormatterParams } from './types';
 export declare const tooltipFormatter: ({ marker, name, value, currency, lang, }: TooltipFormatterParams) => string;
+export declare const sortData: (data: GetCurrencyStrengthQuery) => GetCurrencyStrengthQuery;

package/dist/types/CurrencyStrengthWidget/components/Chart/getOption.d.ts

@@ -160,7 +160,11 @@ export declare const getOption: ({ values, currency, isDark, lang, }: GetOptionP
     series: {
         data: number[];
         type: string;
+        emphasis: {
+            disabled: boolean;
+        };
         itemStyle: {
+            opacity: number;
             color: ({ data }: {
                 data: number;
             }) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-currency-strength-widget",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "description": "Labs Currency Strength Widget",
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
@@ -13,7 +13,7 @@
   "license": "UNLICENSED",
   "dependencies": {
     "@apollo/client": "3.7.17",
-    "@oanda/labs-widget-common": "^1.0.96",
+    "@oanda/labs-widget-common": "^1.0.98",
     "@oanda/mono-i18n": "9.0.0",
     "classnames": "2.3.2",
     "echarts": "5.5.0",
@@ -25,5 +25,5 @@
     "@graphql-codegen/client-preset": "4.1.0",
     "@graphql-codegen/typescript": "4.0.1"
   },
-  "gitHead": "3e142032b1e3d871eda110681caea11a1c87e238"
+  "gitHead": "6122902e4027d79f8317c4f1a201adb0279f2b6d"
 }

package/src/CurrencyStrengthWidget/ChartsWithData.tsx

@@ -8,6 +8,7 @@ import classnames from 'classnames';
 import { getCurrencyStrength } from '../gql/getCurrencyStrength';
 import { GetCurrencyStrengthQuery } from '../gql/types/graphql';
 import { Chart } from './components/Chart';
+import { sortData } from './components/Chart/formatters';
 
 const ChartWithData = () => {
   const { size } = useContext(ThemeContext);
@@ -35,7 +36,7 @@ const ChartWithData = () => {
             'lw-grid-cols-1': !isDesktop,
           })}
         >
-          {data.currencyStrength?.map((item) => (
+          {sortData(data).currencyStrength?.map((item) => (
             <div key={item.currency} className="lw-flex lw-h-[135px] lw-flex-1 lw-items-center lw-justify-center">
               <Chart currency={item.currency} values={item.strengthRelation!} />
             </div>

package/src/CurrencyStrengthWidget/components/Chart/constants.tsx

@@ -1,4 +1,5 @@
 import { colorPalette } from '@oanda/labs-widget-common';
+import { CurrencyName } from '../../../gql/types/graphql';
 
 export const X_LABEL_SIZE = 24;
 export const Y_LABEL_SIZE = 30;
@@ -16,3 +17,14 @@ export const lightBarColors = {
   negative: colorPalette.raspberryDark,
   zero: colorPalette.disabledGray,
 };
+
+export const instrumentsConfig = [
+  CurrencyName.Usd,
+  CurrencyName.Eur,
+  CurrencyName.Jpy,
+  CurrencyName.Gbp,
+  CurrencyName.Aud,
+  CurrencyName.Cad,
+  CurrencyName.Chf,
+  CurrencyName.Nzd,
+];

package/src/CurrencyStrengthWidget/components/Chart/formatters.ts

@@ -1,3 +1,5 @@
+import { GetCurrencyStrengthQuery } from '../../../gql/types/graphql';
+import { instrumentsConfig } from './constants';
 import { TooltipFormatterParams } from './types';
 
 export const tooltipFormatter = ({
@@ -11,3 +13,17 @@ export const tooltipFormatter = ({
   <div style="margin-bottom:5px;">${currency} ${lang('vs')} ${name}</div>
   <div style="display:flex;align-items:center;">${marker} ${value}%</div>
 </div>`;
+
+export const sortData: (data: GetCurrencyStrengthQuery) => GetCurrencyStrengthQuery = (
+  data,
+) => ({
+  currencyStrength: data.currencyStrength
+  && [...data.currencyStrength].sort(
+    (a, b) => instrumentsConfig.indexOf(a.currency) - instrumentsConfig.indexOf(b.currency),
+  ).map((item) => ({
+    currency: item.currency,
+    strengthRelation: item.strengthRelation && [...item.strengthRelation].sort(
+      (a, b) => instrumentsConfig.indexOf(a.currency) - instrumentsConfig.indexOf(b.currency),
+    ),
+  })),
+});

package/src/CurrencyStrengthWidget/components/Chart/getOption.ts

@@ -92,7 +92,11 @@ export const getOption = ({
       {
         data: percentages,
         type: 'bar',
+        emphasis: {
+          disabled: true,
+        },
         itemStyle: {
+          opacity: 1,
           color: ({ data } : { data: number }) => {
             if (data > 0) {
               return barColors.positive;

package/test/sortData.test.ts

@@ -0,0 +1,73 @@
+import { sortData } from '../src/CurrencyStrengthWidget/components/Chart/formatters';
+import { CurrencyName, GetCurrencyStrengthQuery } from '../src/gql/types/graphql';
+
+const topLevelData: GetCurrencyStrengthQuery = {
+  currencyStrength: [
+    { currency: CurrencyName.Aud },
+    { currency: CurrencyName.Gbp },
+    { currency: CurrencyName.Jpy },
+    { currency: CurrencyName.Chf },
+    { currency: CurrencyName.Cad },
+    { currency: CurrencyName.Nzd },
+    { currency: CurrencyName.Usd },
+    { currency: CurrencyName.Eur },
+  ],
+};
+
+const nestedData: GetCurrencyStrengthQuery = {
+  currencyStrength: [
+    {
+      currency: CurrencyName.Aud,
+      strengthRelation: [
+        { currency: CurrencyName.Gbp, percentage: 0.1 },
+        { currency: CurrencyName.Eur, percentage: 0.2 },
+        { currency: CurrencyName.Aud, percentage: 0.3 },
+        { currency: CurrencyName.Jpy, percentage: 0.4 },
+        { currency: CurrencyName.Nzd, percentage: 0.5 },
+        { currency: CurrencyName.Chf, percentage: 0.6 },
+        { currency: CurrencyName.Usd, percentage: 0.7 },
+        { currency: CurrencyName.Cad, percentage: 0.8 },
+      ],
+    },
+  ],
+};
+
+describe('sortData', () => {
+  it('should sort top level values', () => {
+    expect(sortData(topLevelData)).toEqual(
+      {
+        currencyStrength: [
+          { currency: CurrencyName.Usd },
+          { currency: CurrencyName.Eur },
+          { currency: CurrencyName.Jpy },
+          { currency: CurrencyName.Gbp },
+          { currency: CurrencyName.Aud },
+          { currency: CurrencyName.Cad },
+          { currency: CurrencyName.Chf },
+          { currency: CurrencyName.Nzd },
+        ],
+      },
+    );
+  });
+  it('should sort nested values currencies', () => {
+    expect(sortData(nestedData)).toEqual(
+      {
+        currencyStrength: [
+          {
+            currency: CurrencyName.Aud,
+            strengthRelation: [
+              { currency: CurrencyName.Usd, percentage: 0.7 },
+              { currency: CurrencyName.Eur, percentage: 0.2 },
+              { currency: CurrencyName.Jpy, percentage: 0.4 },
+              { currency: CurrencyName.Gbp, percentage: 0.1 },
+              { currency: CurrencyName.Aud, percentage: 0.3 },
+              { currency: CurrencyName.Cad, percentage: 0.8 },
+              { currency: CurrencyName.Chf, percentage: 0.6 },
+              { currency: CurrencyName.Nzd, percentage: 0.5 },
+            ],
+          },
+        ],
+      },
+    );
+  });
+});