@oanda/labs-crowd-view-widget 1.0.46 → 1.0.47
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +192 -0
- package/dist/main/CrowdViewWidget/Main.js +6 -4
- package/dist/main/CrowdViewWidget/Main.js.map +1 -1
- package/dist/main/CrowdViewWidget/components/Chart/Chart.js +3 -2
- package/dist/main/CrowdViewWidget/components/Chart/Chart.js.map +1 -1
- package/dist/main/CrowdViewWidget/components/Chart/ChartWithData.js +5 -14
- package/dist/main/CrowdViewWidget/components/Chart/ChartWithData.js.map +1 -1
- package/dist/main/CrowdViewWidget/components/Chart/chartOptions.js +4 -3
- package/dist/main/CrowdViewWidget/components/Chart/chartOptions.js.map +1 -1
- package/dist/main/CrowdViewWidget/components/Chart/types.js.map +1 -1
- package/dist/main/CrowdViewWidget/components/Chart/utils/chartUtils.js +1 -1
- package/dist/main/CrowdViewWidget/components/Chart/utils/chartUtils.js.map +1 -1
- package/dist/main/CrowdViewWidget/components/Legend/Legend.js +1 -1
- package/dist/main/CrowdViewWidget/components/Legend/Legend.js.map +1 -1
- package/dist/main/CrowdViewWidget/components/Legend/LegendBar.js +5 -3
- package/dist/main/CrowdViewWidget/components/Legend/LegendBar.js.map +1 -1
- package/dist/main/CrowdViewWidget/constants.js +1 -0
- package/dist/main/CrowdViewWidget/constants.js.map +1 -1
- package/dist/main/translations/sources/en.json +4 -4
- package/dist/module/CrowdViewWidget/Main.js +6 -4
- package/dist/module/CrowdViewWidget/Main.js.map +1 -1
- package/dist/module/CrowdViewWidget/components/Chart/Chart.js +3 -2
- package/dist/module/CrowdViewWidget/components/Chart/Chart.js.map +1 -1
- package/dist/module/CrowdViewWidget/components/Chart/ChartWithData.js +5 -14
- package/dist/module/CrowdViewWidget/components/Chart/ChartWithData.js.map +1 -1
- package/dist/module/CrowdViewWidget/components/Chart/chartOptions.js +4 -3
- package/dist/module/CrowdViewWidget/components/Chart/chartOptions.js.map +1 -1
- package/dist/module/CrowdViewWidget/components/Chart/types.js.map +1 -1
- package/dist/module/CrowdViewWidget/components/Chart/utils/chartUtils.js +1 -1
- package/dist/module/CrowdViewWidget/components/Chart/utils/chartUtils.js.map +1 -1
- package/dist/module/CrowdViewWidget/components/Legend/Legend.js +1 -1
- package/dist/module/CrowdViewWidget/components/Legend/Legend.js.map +1 -1
- package/dist/module/CrowdViewWidget/components/Legend/LegendBar.js +5 -3
- package/dist/module/CrowdViewWidget/components/Legend/LegendBar.js.map +1 -1
- package/dist/module/CrowdViewWidget/constants.js +1 -0
- package/dist/module/CrowdViewWidget/constants.js.map +1 -1
- package/dist/module/translations/sources/en.json +4 -4
- package/dist/types/CrowdViewWidget/components/Chart/Chart.d.ts +1 -1
- package/dist/types/CrowdViewWidget/components/Chart/types.d.ts +2 -1
- package/dist/types/CrowdViewWidget/constants.d.ts +1 -0
- package/package.json +3 -3
- package/src/CrowdViewWidget/Main.tsx +44 -37
- package/src/CrowdViewWidget/components/Chart/Chart.tsx +2 -2
- package/src/CrowdViewWidget/components/Chart/ChartWithData.tsx +4 -26
- package/src/CrowdViewWidget/components/Chart/chartOptions.ts +6 -2
- package/src/CrowdViewWidget/components/Chart/types.ts +2 -0
- package/src/CrowdViewWidget/components/Chart/utils/chartUtils.ts +6 -2
- package/src/CrowdViewWidget/components/Legend/Legend.tsx +1 -1
- package/src/CrowdViewWidget/components/Legend/LegendBar.tsx +5 -2
- package/src/CrowdViewWidget/constants.ts +1 -0
- package/src/translations/sources/en.json +4 -4
- package/test/components/Chart/utils/chartUtils.test.ts +1 -1
- package/test/components/Legend.test.tsx +2 -2
- package/test/components/LegendBar.test.tsx +3 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Legend.js","names":["_monoI18n","require","_react","_interopRequireDefault","_graphql","_constants","_LegendBar","e","__esModule","default","Legend","_ref","longValues","BOOKS_THRESHOLDS","MIN","MAX","shortValues","bookType","lang","useLocale","createElement","className","LegendBar","label","BookType","Order","type","values","exports"],"sources":["../../../../../src/CrowdViewWidget/components/Legend/Legend.tsx"],"sourcesContent":["import { useLocale } from '@oanda/mono-i18n';\nimport React from 'react';\n\nimport { BookType } from '../../../gql/types/graphql';\nimport { BOOKS_THRESHOLDS } from '../../constants';\nimport { LegendBar } from './LegendBar';\n\ninterface LegendProps {\n longValues?: [number, number];\n shortValues?: [number, number];\n bookType: BookType;\n}\n\nexport const Legend = ({\n longValues = [BOOKS_THRESHOLDS.MIN, BOOKS_THRESHOLDS.MAX],\n shortValues = [BOOKS_THRESHOLDS.MIN, BOOKS_THRESHOLDS.MAX],\n bookType,\n}: LegendProps) => {\n const { lang } = useLocale();\n\n return (\n <div className=\"lw-mx-auto lw-flex lw-w-full lw-flex-col lw-items-center lw-space-y-4 lw-
|
|
1
|
+
{"version":3,"file":"Legend.js","names":["_monoI18n","require","_react","_interopRequireDefault","_graphql","_constants","_LegendBar","e","__esModule","default","Legend","_ref","longValues","BOOKS_THRESHOLDS","MIN","MAX","shortValues","bookType","lang","useLocale","createElement","className","LegendBar","label","BookType","Order","type","values","exports"],"sources":["../../../../../src/CrowdViewWidget/components/Legend/Legend.tsx"],"sourcesContent":["import { useLocale } from '@oanda/mono-i18n';\nimport React from 'react';\n\nimport { BookType } from '../../../gql/types/graphql';\nimport { BOOKS_THRESHOLDS } from '../../constants';\nimport { LegendBar } from './LegendBar';\n\ninterface LegendProps {\n longValues?: [number, number];\n shortValues?: [number, number];\n bookType: BookType;\n}\n\nexport const Legend = ({\n longValues = [BOOKS_THRESHOLDS.MIN, BOOKS_THRESHOLDS.MAX],\n shortValues = [BOOKS_THRESHOLDS.MIN, BOOKS_THRESHOLDS.MAX],\n bookType,\n}: LegendProps) => {\n const { lang } = useLocale();\n\n return (\n <div className=\"lw-mx-auto lw-flex lw-w-full lw-flex-col lw-items-center lw-space-y-4 lw-pb-6 lw-pt-0 sm:lw-max-w-md lg:lw-max-w-xl\">\n <LegendBar\n label={lang(bookType === BookType.Order ? 'buy' : 'long')}\n type=\"long\"\n values={longValues}\n />\n <LegendBar\n label={lang(bookType === BookType.Order ? 'sell' : 'short')}\n type=\"short\"\n values={shortValues}\n />\n </div>\n );\n};\n"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,UAAA,GAAAJ,OAAA;AACA,IAAAK,UAAA,GAAAL,OAAA;AAAwC,SAAAE,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAQjC,MAAMG,MAAM,GAAGC,IAAA,IAIH;EAAA,IAJI;IACrBC,UAAU,GAAG,CAACC,2BAAgB,CAACC,GAAG,EAAED,2BAAgB,CAACE,GAAG,CAAC;IACzDC,WAAW,GAAG,CAACH,2BAAgB,CAACC,GAAG,EAAED,2BAAgB,CAACE,GAAG,CAAC;IAC1DE;EACW,CAAC,GAAAN,IAAA;EACZ,MAAM;IAAEO;EAAK,CAAC,GAAG,IAAAC,mBAAS,EAAC,CAAC;EAE5B,OACEjB,MAAA,CAAAO,OAAA,CAAAW,aAAA;IAAKC,SAAS,EAAC;EAAqH,GAClInB,MAAA,CAAAO,OAAA,CAAAW,aAAA,CAACd,UAAA,CAAAgB,SAAS;IACRC,KAAK,EAAEL,IAAI,CAACD,QAAQ,KAAKO,iBAAQ,CAACC,KAAK,GAAG,KAAK,GAAG,MAAM,CAAE;IAC1DC,IAAI,EAAC,MAAM;IACXC,MAAM,EAAEf;EAAW,CACpB,CAAC,EACFV,MAAA,CAAAO,OAAA,CAAAW,aAAA,CAACd,UAAA,CAAAgB,SAAS;IACRC,KAAK,EAAEL,IAAI,CAACD,QAAQ,KAAKO,iBAAQ,CAACC,KAAK,GAAG,MAAM,GAAG,OAAO,CAAE;IAC5DC,IAAI,EAAC,OAAO;IACZC,MAAM,EAAEX;EAAY,CACrB,CACE,CAAC;AAEV,CAAC;AAACY,OAAA,CAAAlB,MAAA,GAAAA,MAAA","ignoreList":[]}
|
|
@@ -16,7 +16,9 @@ const LegendBar = _ref => {
|
|
|
16
16
|
const colors = _constants.COLOR_MAP[type];
|
|
17
17
|
return _react.default.createElement("div", {
|
|
18
18
|
className: "lw-flex lw-w-full lw-flex-col lw-space-y-1 lw-border-border-primary"
|
|
19
|
-
}, _react.default.createElement("
|
|
19
|
+
}, _react.default.createElement("span", {
|
|
20
|
+
className: "lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary"
|
|
21
|
+
}, label), _react.default.createElement("div", {
|
|
20
22
|
className: "lw-flex lw-h-2 lw-w-full lw-overflow-hidden lw-border lw-border-border-primary"
|
|
21
23
|
}, _react.default.createElement("div", {
|
|
22
24
|
className: "lw-h-full lw-flex-1",
|
|
@@ -28,9 +30,9 @@ const LegendBar = _ref => {
|
|
|
28
30
|
className: "lw-flex lw-w-full lw-justify-between"
|
|
29
31
|
}, _react.default.createElement("span", {
|
|
30
32
|
className: "lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary"
|
|
31
|
-
}, values[0].toFixed(2), "%
|
|
33
|
+
}, values[0].toFixed(2), "%"), _react.default.createElement("span", {
|
|
32
34
|
className: "lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary"
|
|
33
|
-
}, values[1].toFixed(2), "%
|
|
35
|
+
}, "\u2264 ".concat(values[1].toFixed(2)), "%")));
|
|
34
36
|
};
|
|
35
37
|
exports.LegendBar = LegendBar;
|
|
36
38
|
//# sourceMappingURL=LegendBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LegendBar.js","names":["_react","_interopRequireDefault","require","_constants","e","__esModule","default","LegendBar","_ref","values","type","label","colors","COLOR_MAP","createElement","className","style","background","concat","toFixed","exports"],"sources":["../../../../../src/CrowdViewWidget/components/Legend/LegendBar.tsx"],"sourcesContent":["import React from 'react';\n\nimport { COLOR_MAP } from '../../constants';\n\nexport type LegendType = 'long' | 'short';\n\ninterface LegendBarProps {\n values: number[];\n type: LegendType;\n label: string;\n}\n\nexport const LegendBar = ({ values, type, label }: LegendBarProps) => {\n const colors = COLOR_MAP[type];\n\n return (\n <div className=\"lw-flex lw-w-full lw-flex-col lw-space-y-1 lw-border-border-primary\">\n <div className=\"lw-flex lw-h-2 lw-w-full lw-overflow-hidden lw-border lw-border-border-primary\">\n <div\n className=\"lw-h-full lw-flex-1\"\n data-testid=\"legend-bar-segment\"\n style={{\n background: `linear-gradient(90deg,${colors[0]} 0%, ${colors[1]} 100%)`,\n }}\n />\n </div>\n\n <div className=\"lw-flex lw-w-full lw-justify-between\">\n <span className=\"lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary\">\n {values[0].toFixed(2)}
|
|
1
|
+
{"version":3,"file":"LegendBar.js","names":["_react","_interopRequireDefault","require","_constants","e","__esModule","default","LegendBar","_ref","values","type","label","colors","COLOR_MAP","createElement","className","style","background","concat","toFixed","exports"],"sources":["../../../../../src/CrowdViewWidget/components/Legend/LegendBar.tsx"],"sourcesContent":["import React from 'react';\n\nimport { COLOR_MAP } from '../../constants';\n\nexport type LegendType = 'long' | 'short';\n\ninterface LegendBarProps {\n values: number[];\n type: LegendType;\n label: string;\n}\n\nexport const LegendBar = ({ values, type, label }: LegendBarProps) => {\n const colors = COLOR_MAP[type];\n\n return (\n <div className=\"lw-flex lw-w-full lw-flex-col lw-space-y-1 lw-border-border-primary\">\n <span className=\"lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary\">\n {label}\n </span>\n <div className=\"lw-flex lw-h-2 lw-w-full lw-overflow-hidden lw-border lw-border-border-primary\">\n <div\n className=\"lw-h-full lw-flex-1\"\n data-testid=\"legend-bar-segment\"\n style={{\n background: `linear-gradient(90deg,${colors[0]} 0%, ${colors[1]} 100%)`,\n }}\n />\n </div>\n\n <div className=\"lw-flex lw-w-full lw-justify-between\">\n <span className=\"lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary\">\n {values[0].toFixed(2)}%\n </span>\n <span className=\"lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary\">\n {`≤ ${values[1].toFixed(2)}`}%\n </span>\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,UAAA,GAAAD,OAAA;AAA4C,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAUrC,MAAMG,SAAS,GAAGC,IAAA,IAA6C;EAAA,IAA5C;IAAEC,MAAM;IAAEC,IAAI;IAAEC;EAAsB,CAAC,GAAAH,IAAA;EAC/D,MAAMI,MAAM,GAAGC,oBAAS,CAACH,IAAI,CAAC;EAE9B,OACEV,MAAA,CAAAM,OAAA,CAAAQ,aAAA;IAAKC,SAAS,EAAC;EAAqE,GAClFf,MAAA,CAAAM,OAAA,CAAAQ,aAAA;IAAMC,SAAS,EAAC;EAAmE,GAChFJ,KACG,CAAC,EACPX,MAAA,CAAAM,OAAA,CAAAQ,aAAA;IAAKC,SAAS,EAAC;EAAgF,GAC7Ff,MAAA,CAAAM,OAAA,CAAAQ,aAAA;IACEC,SAAS,EAAC,qBAAqB;IAC/B,eAAY,oBAAoB;IAChCC,KAAK,EAAE;MACLC,UAAU,2BAAAC,MAAA,CAA2BN,MAAM,CAAC,CAAC,CAAC,WAAAM,MAAA,CAAQN,MAAM,CAAC,CAAC,CAAC;IACjE;EAAE,CACH,CACE,CAAC,EAENZ,MAAA,CAAAM,OAAA,CAAAQ,aAAA;IAAKC,SAAS,EAAC;EAAsC,GACnDf,MAAA,CAAAM,OAAA,CAAAQ,aAAA;IAAMC,SAAS,EAAC;EAAmE,GAChFN,MAAM,CAAC,CAAC,CAAC,CAACU,OAAO,CAAC,CAAC,CAAC,EAAC,GAClB,CAAC,EACPnB,MAAA,CAAAM,OAAA,CAAAQ,aAAA;IAAMC,SAAS,EAAC;EAAmE,aAAAG,MAAA,CAC3ET,MAAM,CAAC,CAAC,CAAC,CAACU,OAAO,CAAC,CAAC,CAAC,GAAG,GACzB,CACH,CACF,CAAC;AAEV,CAAC;AAACC,OAAA,CAAAb,SAAA,GAAAA,SAAA","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.js","names":["_types","require","BOOKS_THRESHOLDS","exports","MIN","MAX","BUCKET_CONFIG","MULTIPLIER","PRICE_PADDING_MULTIPLIER","TIME_THRESHOLDS","TWO_WEEKS_MS","CHART_CONFIG","HEIGHT","WIDTH","X_LABEL_SIZE","Y_LABEL_SIZE_DESKTOP","INITIAL_START_ZOOM","INITIAL_END_ZOOM","X_AXIS_DATE_PADDING","COLOR_MAP","long","short","INSTRUMENTS_CONFIG","InstrumentId","EUR_AUD","mt5name","v20name","precision","defaultBucketWidth","EUR_GBP","EUR_JPY","EUR_USD","EUR_CHF","USD_CHF","USD_JPY","USD_CAD","GBP_USD","GBP_JPY","GBP_CHF","AUD_JPY","AUD_USD","NZD_USD","XAU_USD","XAG_USD"],"sources":["../../../src/CrowdViewWidget/constants.ts"],"sourcesContent":["import { InstrumentId } from './types';\n\nexport const BOOKS_THRESHOLDS = {\n MIN: 0.15,\n MAX: 0.55,\n} as const;\n\nexport const BUCKET_CONFIG = {\n MULTIPLIER: 4,\n PRICE_PADDING_MULTIPLIER: 2,\n} as const;\n\nexport const TIME_THRESHOLDS = {\n TWO_WEEKS_MS: 14 * 24 * 60 * 60 * 1000,\n} as const;\n\nexport const CHART_CONFIG = {\n HEIGHT: 425,\n WIDTH: 9999,\n X_LABEL_SIZE: 40,\n Y_LABEL_SIZE_DESKTOP: 60,\n INITIAL_START_ZOOM: 80,\n INITIAL_END_ZOOM: 100,\n X_AXIS_DATE_PADDING: ' ',\n} as const;\n\nexport const COLOR_MAP = {\n long: ['#eaf5fa', '#83c4e0'],\n short: ['#fef7e7', '#fcd171'],\n} as const;\n\nexport const INSTRUMENTS_CONFIG: Record<\n InstrumentId,\n {\n precision: number;\n defaultBucketWidth: number;\n v20name: string;\n mt5name: string;\n }\n> = {\n [InstrumentId.EUR_AUD]: {\n mt5name: 'EURAUD',\n v20name: 'EUR_AUD',\n precision: 5,\n defaultBucketWidth: 0.0005,\n },\n [InstrumentId.EUR_GBP]: {\n mt5name: 'EURGBP',\n v20name: 'EUR_GBP',\n precision: 5,\n defaultBucketWidth: 0.0005,\n },\n [InstrumentId.EUR_JPY]: {\n mt5name: 'EURJPY',\n v20name: 'EUR_JPY',\n precision: 3,\n defaultBucketWidth: 0.05,\n },\n [InstrumentId.EUR_USD]: {\n mt5name: 'EURUSD',\n v20name: 'EUR_USD',\n precision: 5,\n defaultBucketWidth: 0.0005,\n },\n [InstrumentId.EUR_CHF]: {\n mt5name: 'EURCHF',\n v20name: 'EUR_CHF',\n precision: 5,\n defaultBucketWidth: 0.0005,\n },\n [InstrumentId.USD_CHF]: {\n mt5name: 'USDCHF',\n v20name: 'USD_CHF',\n precision: 5,\n defaultBucketWidth: 0.0005,\n },\n [InstrumentId.USD_JPY]: {\n mt5name: 'USDJPY',\n v20name: 'USD_JPY',\n precision: 3,\n defaultBucketWidth: 0.05,\n },\n [InstrumentId.USD_CAD]: {\n mt5name: 'USDCAD',\n v20name: 'USD_CAD',\n precision: 5,\n defaultBucketWidth: 0.0005,\n },\n [InstrumentId.GBP_USD]: {\n mt5name: 'GBPUSD',\n v20name: 'GBP_USD',\n precision: 5,\n defaultBucketWidth: 0.0005,\n },\n [InstrumentId.GBP_JPY]: {\n mt5name: 'GBPJPY',\n v20name: 'GBP_JPY',\n precision: 3,\n defaultBucketWidth: 0.05,\n },\n [InstrumentId.GBP_CHF]: {\n mt5name: 'GBPCHF',\n v20name: 'GBP_CHF',\n precision: 5,\n defaultBucketWidth: 0.0005,\n },\n [InstrumentId.AUD_JPY]: {\n mt5name: 'AUDJPY',\n v20name: 'AUD_JPY',\n precision: 3,\n defaultBucketWidth: 0.05,\n },\n [InstrumentId.AUD_USD]: {\n mt5name: 'AUDUSD',\n v20name: 'AUD_USD',\n precision: 5,\n defaultBucketWidth: 0.0005,\n },\n [InstrumentId.NZD_USD]: {\n mt5name: 'NZDUSD',\n v20name: 'NZD_USD',\n precision: 5,\n defaultBucketWidth: 0.0005,\n },\n [InstrumentId.XAU_USD]: {\n mt5name: 'XAUUSD',\n v20name: 'XAU_USD',\n precision: 3,\n defaultBucketWidth: 0.5,\n },\n [InstrumentId.XAG_USD]: {\n mt5name: 'XAGUSD',\n v20name: 'XAG_USD',\n precision: 5,\n defaultBucketWidth: 0.0005,\n },\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEO,MAAMC,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAG;EAC9BE,GAAG,EAAE,IAAI;EACTC,GAAG,EAAE;AACP,CAAU;AAEH,MAAMC,aAAa,GAAAH,OAAA,CAAAG,aAAA,GAAG;EAC3BC,UAAU,EAAE,CAAC;EACbC,wBAAwB,EAAE;AAC5B,CAAU;AAEH,MAAMC,eAAe,GAAAN,OAAA,CAAAM,eAAA,GAAG;EAC7BC,YAAY,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG;AACpC,CAAU;AAEH,MAAMC,YAAY,GAAAR,OAAA,CAAAQ,YAAA,GAAG;EAC1BC,MAAM,EAAE,GAAG;EACXC,KAAK,EAAE,IAAI;EACXC,YAAY,EAAE,EAAE;EAChBC,oBAAoB,EAAE,EAAE;EACxBC,kBAAkB,EAAE,EAAE;EACtBC,gBAAgB,EAAE,GAAG;EACrBC,mBAAmB,EAAE;AACvB,CAAU;AAEH,MAAMC,SAAS,
|
|
1
|
+
{"version":3,"file":"constants.js","names":["_types","require","BOOKS_THRESHOLDS","exports","MIN","MAX","BUCKET_CONFIG","MULTIPLIER","PRICE_PADDING_MULTIPLIER","TIME_THRESHOLDS","TWO_WEEKS_MS","CHART_CONFIG","HEIGHT","WIDTH","X_LABEL_SIZE","Y_LABEL_SIZE_DESKTOP","Y_LABEL_SIZE_MOBILE","INITIAL_START_ZOOM","INITIAL_END_ZOOM","X_AXIS_DATE_PADDING","COLOR_MAP","long","short","INSTRUMENTS_CONFIG","InstrumentId","EUR_AUD","mt5name","v20name","precision","defaultBucketWidth","EUR_GBP","EUR_JPY","EUR_USD","EUR_CHF","USD_CHF","USD_JPY","USD_CAD","GBP_USD","GBP_JPY","GBP_CHF","AUD_JPY","AUD_USD","NZD_USD","XAU_USD","XAG_USD"],"sources":["../../../src/CrowdViewWidget/constants.ts"],"sourcesContent":["import { InstrumentId } from './types';\n\nexport const BOOKS_THRESHOLDS = {\n MIN: 0.15,\n MAX: 0.55,\n} as const;\n\nexport const BUCKET_CONFIG = {\n MULTIPLIER: 4,\n PRICE_PADDING_MULTIPLIER: 2,\n} as const;\n\nexport const TIME_THRESHOLDS = {\n TWO_WEEKS_MS: 14 * 24 * 60 * 60 * 1000,\n} as const;\n\nexport const CHART_CONFIG = {\n HEIGHT: 425,\n WIDTH: 9999,\n X_LABEL_SIZE: 40,\n Y_LABEL_SIZE_DESKTOP: 60,\n Y_LABEL_SIZE_MOBILE: 40,\n INITIAL_START_ZOOM: 80,\n INITIAL_END_ZOOM: 100,\n X_AXIS_DATE_PADDING: ' ',\n} as const;\n\nexport const COLOR_MAP = {\n long: ['#eaf5fa', '#83c4e0'],\n short: ['#fef7e7', '#fcd171'],\n} as const;\n\nexport const INSTRUMENTS_CONFIG: Record<\n InstrumentId,\n {\n precision: number;\n defaultBucketWidth: number;\n v20name: string;\n mt5name: string;\n }\n> = {\n [InstrumentId.EUR_AUD]: {\n mt5name: 'EURAUD',\n v20name: 'EUR_AUD',\n precision: 5,\n defaultBucketWidth: 0.0005,\n },\n [InstrumentId.EUR_GBP]: {\n mt5name: 'EURGBP',\n v20name: 'EUR_GBP',\n precision: 5,\n defaultBucketWidth: 0.0005,\n },\n [InstrumentId.EUR_JPY]: {\n mt5name: 'EURJPY',\n v20name: 'EUR_JPY',\n precision: 3,\n defaultBucketWidth: 0.05,\n },\n [InstrumentId.EUR_USD]: {\n mt5name: 'EURUSD',\n v20name: 'EUR_USD',\n precision: 5,\n defaultBucketWidth: 0.0005,\n },\n [InstrumentId.EUR_CHF]: {\n mt5name: 'EURCHF',\n v20name: 'EUR_CHF',\n precision: 5,\n defaultBucketWidth: 0.0005,\n },\n [InstrumentId.USD_CHF]: {\n mt5name: 'USDCHF',\n v20name: 'USD_CHF',\n precision: 5,\n defaultBucketWidth: 0.0005,\n },\n [InstrumentId.USD_JPY]: {\n mt5name: 'USDJPY',\n v20name: 'USD_JPY',\n precision: 3,\n defaultBucketWidth: 0.05,\n },\n [InstrumentId.USD_CAD]: {\n mt5name: 'USDCAD',\n v20name: 'USD_CAD',\n precision: 5,\n defaultBucketWidth: 0.0005,\n },\n [InstrumentId.GBP_USD]: {\n mt5name: 'GBPUSD',\n v20name: 'GBP_USD',\n precision: 5,\n defaultBucketWidth: 0.0005,\n },\n [InstrumentId.GBP_JPY]: {\n mt5name: 'GBPJPY',\n v20name: 'GBP_JPY',\n precision: 3,\n defaultBucketWidth: 0.05,\n },\n [InstrumentId.GBP_CHF]: {\n mt5name: 'GBPCHF',\n v20name: 'GBP_CHF',\n precision: 5,\n defaultBucketWidth: 0.0005,\n },\n [InstrumentId.AUD_JPY]: {\n mt5name: 'AUDJPY',\n v20name: 'AUD_JPY',\n precision: 3,\n defaultBucketWidth: 0.05,\n },\n [InstrumentId.AUD_USD]: {\n mt5name: 'AUDUSD',\n v20name: 'AUD_USD',\n precision: 5,\n defaultBucketWidth: 0.0005,\n },\n [InstrumentId.NZD_USD]: {\n mt5name: 'NZDUSD',\n v20name: 'NZD_USD',\n precision: 5,\n defaultBucketWidth: 0.0005,\n },\n [InstrumentId.XAU_USD]: {\n mt5name: 'XAUUSD',\n v20name: 'XAU_USD',\n precision: 3,\n defaultBucketWidth: 0.5,\n },\n [InstrumentId.XAG_USD]: {\n mt5name: 'XAGUSD',\n v20name: 'XAG_USD',\n precision: 5,\n defaultBucketWidth: 0.0005,\n },\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"15_minutes": "15 minutes",
|
|
4
4
|
"4_hours": "4 hours",
|
|
5
5
|
"5_minutes": "5 minutes",
|
|
6
|
-
"
|
|
6
|
+
"buy_overbalance": "Buy overbalance",
|
|
7
7
|
"buy": "Buy",
|
|
8
8
|
"candle": "Candle",
|
|
9
9
|
"close_price": "Close price",
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
"granularity": "Granularity",
|
|
12
12
|
"high": "High",
|
|
13
13
|
"instrument": "Instrument",
|
|
14
|
-
"
|
|
14
|
+
"long_overbalance": "Long overbalance",
|
|
15
15
|
"long": "Long",
|
|
16
16
|
"low": "Low",
|
|
17
17
|
"no_matching_results": "No matching results",
|
|
@@ -23,9 +23,9 @@
|
|
|
23
23
|
"positions": "Positions",
|
|
24
24
|
"price_range": "Price range",
|
|
25
25
|
"search": "Search",
|
|
26
|
-
"
|
|
26
|
+
"sell_overbalance": "Sell overbalance",
|
|
27
27
|
"sell": "Sell",
|
|
28
28
|
"sentiment": "Sentiment",
|
|
29
|
-
"
|
|
29
|
+
"short_overbalance": "Short overbalance",
|
|
30
30
|
"short": "Short"
|
|
31
31
|
}
|
|
@@ -34,17 +34,19 @@ const Main = _ref => {
|
|
|
34
34
|
return React.createElement(React.Fragment, null, size && React.createElement("div", {
|
|
35
35
|
className: "lw-text-sm lw-tracking-normal",
|
|
36
36
|
"data-testid": "crowd-view-widget"
|
|
37
|
-
}, React.createElement(Tabs, {
|
|
37
|
+
}, React.createElement("div", null, React.createElement(Tabs, {
|
|
38
38
|
mobileFullWidth: true,
|
|
39
39
|
activeTab: bookType,
|
|
40
40
|
handleClick: e => setBookType(e.currentTarget.value),
|
|
41
41
|
items: navigationConfig,
|
|
42
42
|
labelCallback: lang
|
|
43
43
|
}), React.createElement("div", {
|
|
44
|
-
className:
|
|
44
|
+
className: cn('lw-mb-6 lw-mt-12', {
|
|
45
|
+
'lw-flex': isDesktop
|
|
46
|
+
})
|
|
45
47
|
}, React.createElement("div", {
|
|
46
48
|
className: cn('lw-mr-2', {
|
|
47
|
-
'lw-w-full': !isDesktop,
|
|
49
|
+
'lw-w-full lw-mb-2': !isDesktop,
|
|
48
50
|
'lw-w-[280px]': isDesktop
|
|
49
51
|
})
|
|
50
52
|
}, React.createElement(Select, {
|
|
@@ -64,7 +66,7 @@ const Main = _ref => {
|
|
|
64
66
|
selectLabel: lang('granularity'),
|
|
65
67
|
selectedOption: granularity,
|
|
66
68
|
setSelectedOption: val => setGranularity(val)
|
|
67
|
-
}))), React.createElement(ChartWithData, {
|
|
69
|
+
})))), React.createElement(ChartWithData, {
|
|
68
70
|
bookType: bookType,
|
|
69
71
|
division: division,
|
|
70
72
|
granularity: granularity.id,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Main.js","names":["cn","Select","Size","Tabs","useLayoutProvider","useLocale","React","useEffect","useMemo","useState","BookType","ChartWithData","Legend","granularitySelectConfig","navigationConfig","getInstrumentConfigForDivision","Main","_ref","division","lang","size","isDesktop","DESKTOP","bookType","setBookType","Order","granularitySelectConfigWithLang","map","opt","_objectSpread","label","instrumentSelectConfigWithDivision","instrument","setInstrument","granularity","setGranularity","createElement","Fragment","className","mobileFullWidth","activeTab","handleClick","e","currentTarget","value","items","labelCallback","options","searchPlaceholder","selectLabel","selectedOption","setSelectedOption","val","id"],"sources":["../../../src/CrowdViewWidget/Main.tsx"],"sourcesContent":["import {\n cn,\n Select,\n Size,\n Tabs,\n useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport React, { useEffect, useMemo, useState } from 'react';\n\nimport type { Granularity } from '../gql/types/graphql';\nimport { BookType } from '../gql/types/graphql';\nimport { ChartWithData, Legend } from './components';\nimport { granularitySelectConfig, navigationConfig } from './selectConfig';\nimport type { InstrumentId, MainProps } from './types';\nimport { getInstrumentConfigForDivision } from './utils/instrumentUtils';\n\nconst Main = ({ division }: MainProps) => {\n const { lang } = useLocale();\n const { size } = useLayoutProvider();\n const isDesktop = size === Size.DESKTOP;\n\n const [bookType, setBookType] = useState(BookType.Order);\n\n const granularitySelectConfigWithLang = useMemo(\n () =>\n granularitySelectConfig.map((opt) => ({\n ...opt,\n label: lang(opt.label),\n })),\n [lang]\n );\n\n const instrumentSelectConfigWithDivision =\n getInstrumentConfigForDivision(division);\n const [instrument, setInstrument] = useState(\n instrumentSelectConfigWithDivision[0]\n );\n\n const [granularity, setGranularity] = useState(\n granularitySelectConfigWithLang[0]\n );\n\n useEffect(() => {\n setGranularity(granularitySelectConfigWithLang[0]);\n }, [granularitySelectConfigWithLang]);\n\n return (\n <>\n {size && (\n <div\n className=\"lw-text-sm lw-tracking-normal\"\n data-testid=\"crowd-view-widget\"\n >\n <Tabs\n
|
|
1
|
+
{"version":3,"file":"Main.js","names":["cn","Select","Size","Tabs","useLayoutProvider","useLocale","React","useEffect","useMemo","useState","BookType","ChartWithData","Legend","granularitySelectConfig","navigationConfig","getInstrumentConfigForDivision","Main","_ref","division","lang","size","isDesktop","DESKTOP","bookType","setBookType","Order","granularitySelectConfigWithLang","map","opt","_objectSpread","label","instrumentSelectConfigWithDivision","instrument","setInstrument","granularity","setGranularity","createElement","Fragment","className","mobileFullWidth","activeTab","handleClick","e","currentTarget","value","items","labelCallback","options","searchPlaceholder","selectLabel","selectedOption","setSelectedOption","val","id"],"sources":["../../../src/CrowdViewWidget/Main.tsx"],"sourcesContent":["import {\n cn,\n Select,\n Size,\n Tabs,\n useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport React, { useEffect, useMemo, useState } from 'react';\n\nimport type { Granularity } from '../gql/types/graphql';\nimport { BookType } from '../gql/types/graphql';\nimport { ChartWithData, Legend } from './components';\nimport { granularitySelectConfig, navigationConfig } from './selectConfig';\nimport type { InstrumentId, MainProps } from './types';\nimport { getInstrumentConfigForDivision } from './utils/instrumentUtils';\n\nconst Main = ({ division }: MainProps) => {\n const { lang } = useLocale();\n const { size } = useLayoutProvider();\n const isDesktop = size === Size.DESKTOP;\n\n const [bookType, setBookType] = useState(BookType.Order);\n\n const granularitySelectConfigWithLang = useMemo(\n () =>\n granularitySelectConfig.map((opt) => ({\n ...opt,\n label: lang(opt.label),\n })),\n [lang]\n );\n\n const instrumentSelectConfigWithDivision =\n getInstrumentConfigForDivision(division);\n const [instrument, setInstrument] = useState(\n instrumentSelectConfigWithDivision[0]\n );\n\n const [granularity, setGranularity] = useState(\n granularitySelectConfigWithLang[0]\n );\n\n useEffect(() => {\n setGranularity(granularitySelectConfigWithLang[0]);\n }, [granularitySelectConfigWithLang]);\n\n return (\n <>\n {size && (\n <div\n className=\"lw-text-sm lw-tracking-normal\"\n data-testid=\"crowd-view-widget\"\n >\n <div>\n <Tabs\n mobileFullWidth\n activeTab={bookType}\n handleClick={(e) =>\n setBookType(e.currentTarget.value as BookType)\n }\n items={navigationConfig}\n labelCallback={lang}\n />\n <div\n className={cn('lw-mb-6 lw-mt-12', {\n 'lw-flex': isDesktop,\n })}\n >\n <div\n className={cn('lw-mr-2', {\n 'lw-w-full lw-mb-2': !isDesktop,\n 'lw-w-[280px]': isDesktop,\n })}\n >\n <Select\n options={instrumentSelectConfigWithDivision}\n searchPlaceholder={lang('search')}\n selectLabel={lang('instrument')}\n selectedOption={instrument}\n setSelectedOption={(val) =>\n setInstrument(val as { id: InstrumentId; label: string })\n }\n />\n </div>\n <div\n className={cn({\n 'lw-w-full': !isDesktop,\n 'lw-w-[280px]': isDesktop,\n })}\n >\n <Select\n options={granularitySelectConfigWithLang}\n searchPlaceholder={lang('search')}\n selectLabel={lang('granularity')}\n selectedOption={granularity}\n setSelectedOption={(val) =>\n setGranularity(val as { id: Granularity; label: string })\n }\n />\n </div>\n </div>\n </div>\n <ChartWithData\n bookType={bookType}\n division={division}\n granularity={granularity.id}\n instrument={instrument.id}\n />\n\n <Legend bookType={bookType} />\n </div>\n )}\n </>\n );\n};\n\nexport { Main };\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -13,7 +13,8 @@ echarts.registerTheme('dark_theme', getChartTheme(Theme.Dark));
|
|
|
13
13
|
echarts.registerTheme('light_theme', getChartTheme(Theme.Light));
|
|
14
14
|
const Chart = _ref => {
|
|
15
15
|
let {
|
|
16
|
-
data
|
|
16
|
+
data,
|
|
17
|
+
isDesktop
|
|
17
18
|
} = _ref;
|
|
18
19
|
const {
|
|
19
20
|
isDark
|
|
@@ -26,7 +27,7 @@ const Chart = _ref => {
|
|
|
26
27
|
echarts: echarts,
|
|
27
28
|
isDark: isDark,
|
|
28
29
|
lazyUpdate: true,
|
|
29
|
-
option: getOption(data, isDark, lang),
|
|
30
|
+
option: getOption(data, isDark, isDesktop, lang),
|
|
30
31
|
opts: {
|
|
31
32
|
renderer: 'canvas'
|
|
32
33
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chart.js","names":["BaseChart","getChartTheme","Theme","useLayoutProvider","useLocale","BarChart","CandlestickChart","CustomChart","ScatterChart","DataZoomInsideComponent","GraphicComponent","GridSimpleComponent","MarkPointComponent","TooltipComponent","echarts","CanvasRenderer","React","CHART_CONFIG","getOption","formatXAxisLabel","getLabelData","isDifferenceGreaterThanTwoWeeks","use","registerTheme","Dark","Light","Chart","_ref","data","isDark","lang","createElement","chartHeight","HEIGHT","lazyUpdate","option","opts","renderer","onEvents","datazoom","_params","instance","dataZoom","startValue","endValue","isGreaterThanTwoWeeks","xAxisData","labelsData","setOption","xAxis","axisLabel","formatter","value","series","id","markPoint"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/Chart.tsx"],"sourcesContent":["import {\n BaseChart,\n getChartTheme,\n Theme,\n useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport type { EChartsType } from 'echarts';\nimport {\n BarChart,\n CandlestickChart,\n CustomChart,\n ScatterChart,\n} from 'echarts/charts';\nimport {\n DataZoomInsideComponent,\n GraphicComponent,\n GridSimpleComponent,\n MarkPointComponent,\n TooltipComponent,\n} from 'echarts/components';\nimport * as echarts from 'echarts/core';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport React from 'react';\n\nimport { CHART_CONFIG } from '../../constants';\nimport { getOption } from './chartOptions';\nimport type { ChartProps } from './types';\nimport {\n formatXAxisLabel,\n getLabelData,\n isDifferenceGreaterThanTwoWeeks,\n} from './utils/chartUtils';\n\necharts.use([\n GridSimpleComponent,\n GraphicComponent,\n BarChart,\n CanvasRenderer,\n DataZoomInsideComponent,\n CustomChart,\n TooltipComponent,\n CandlestickChart,\n MarkPointComponent,\n ScatterChart,\n]);\n\necharts.registerTheme('dark_theme', getChartTheme(Theme.Dark));\necharts.registerTheme('light_theme', getChartTheme(Theme.Light));\n\nconst Chart = ({ data }: ChartProps) => {\n const { isDark } = useLayoutProvider();\n const { lang } = useLocale();\n\n return (\n <BaseChart\n chartHeight={CHART_CONFIG.HEIGHT}\n echarts={echarts}\n isDark={isDark}\n lazyUpdate={true}\n option={getOption(data, isDark, lang)}\n opts={{ renderer: 'canvas' }}\n onEvents={{\n datazoom: (_params: unknown, instance: EChartsType) => {\n const { dataZoom } = instance.getOption();\n\n const { startValue, endValue } = (\n dataZoom as { startValue: number; endValue: number }[]\n )[0];\n\n const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(\n data.xAxisData[startValue],\n data.xAxisData[endValue]\n );\n\n const labelsData = getLabelData({\n xAxisData: data.xAxisData,\n isGreaterThanTwoWeeks,\n });\n\n instance.setOption({\n xAxis: {\n axisLabel: {\n formatter: (value: string) =>\n formatXAxisLabel(value, isGreaterThanTwoWeeks),\n },\n },\n series: [\n {\n id: 'candlestick',\n markPoint: {\n data: labelsData,\n },\n },\n ],\n });\n },\n }}\n />\n );\n};\n\nexport { Chart };\n"],"mappings":"AAAA,SACEA,SAAS,EACTC,aAAa,EACbC,KAAK,EACLC,iBAAiB,QACZ,2BAA2B;AAClC,SAASC,SAAS,QAAQ,kBAAkB;AAE5C,SACEC,QAAQ,EACRC,gBAAgB,EAChBC,WAAW,EACXC,YAAY,QACP,gBAAgB;AACvB,SACEC,uBAAuB,EACvBC,gBAAgB,EAChBC,mBAAmB,EACnBC,kBAAkB,EAClBC,gBAAgB,QACX,oBAAoB;AAC3B,OAAO,KAAKC,OAAO,MAAM,cAAc;AACvC,SAASC,cAAc,QAAQ,mBAAmB;AAClD,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,SAAS,QAAQ,gBAAgB;AAE1C,SACEC,gBAAgB,EAChBC,YAAY,EACZC,+BAA+B,QAC1B,oBAAoB;AAE3BP,OAAO,CAACQ,GAAG,CAAC,CACVX,mBAAmB,EACnBD,gBAAgB,EAChBL,QAAQ,EACRU,cAAc,EACdN,uBAAuB,EACvBF,WAAW,EACXM,gBAAgB,EAChBP,gBAAgB,EAChBM,kBAAkB,EAClBJ,YAAY,CACb,CAAC;AAEFM,OAAO,CAACS,aAAa,CAAC,YAAY,EAAEtB,aAAa,CAACC,KAAK,CAACsB,IAAI,CAAC,CAAC;AAC9DV,OAAO,CAACS,aAAa,CAAC,aAAa,EAAEtB,aAAa,CAACC,KAAK,CAACuB,KAAK,CAAC,CAAC;AAEhE,MAAMC,KAAK,GAAGC,IAAA,
|
|
1
|
+
{"version":3,"file":"Chart.js","names":["BaseChart","getChartTheme","Theme","useLayoutProvider","useLocale","BarChart","CandlestickChart","CustomChart","ScatterChart","DataZoomInsideComponent","GraphicComponent","GridSimpleComponent","MarkPointComponent","TooltipComponent","echarts","CanvasRenderer","React","CHART_CONFIG","getOption","formatXAxisLabel","getLabelData","isDifferenceGreaterThanTwoWeeks","use","registerTheme","Dark","Light","Chart","_ref","data","isDesktop","isDark","lang","createElement","chartHeight","HEIGHT","lazyUpdate","option","opts","renderer","onEvents","datazoom","_params","instance","dataZoom","startValue","endValue","isGreaterThanTwoWeeks","xAxisData","labelsData","setOption","xAxis","axisLabel","formatter","value","series","id","markPoint"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/Chart.tsx"],"sourcesContent":["import {\n BaseChart,\n getChartTheme,\n Theme,\n useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport type { EChartsType } from 'echarts';\nimport {\n BarChart,\n CandlestickChart,\n CustomChart,\n ScatterChart,\n} from 'echarts/charts';\nimport {\n DataZoomInsideComponent,\n GraphicComponent,\n GridSimpleComponent,\n MarkPointComponent,\n TooltipComponent,\n} from 'echarts/components';\nimport * as echarts from 'echarts/core';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport React from 'react';\n\nimport { CHART_CONFIG } from '../../constants';\nimport { getOption } from './chartOptions';\nimport type { ChartProps } from './types';\nimport {\n formatXAxisLabel,\n getLabelData,\n isDifferenceGreaterThanTwoWeeks,\n} from './utils/chartUtils';\n\necharts.use([\n GridSimpleComponent,\n GraphicComponent,\n BarChart,\n CanvasRenderer,\n DataZoomInsideComponent,\n CustomChart,\n TooltipComponent,\n CandlestickChart,\n MarkPointComponent,\n ScatterChart,\n]);\n\necharts.registerTheme('dark_theme', getChartTheme(Theme.Dark));\necharts.registerTheme('light_theme', getChartTheme(Theme.Light));\n\nconst Chart = ({ data, isDesktop }: ChartProps) => {\n const { isDark } = useLayoutProvider();\n const { lang } = useLocale();\n\n return (\n <BaseChart\n chartHeight={CHART_CONFIG.HEIGHT}\n echarts={echarts}\n isDark={isDark}\n lazyUpdate={true}\n option={getOption(data, isDark, isDesktop, lang)}\n opts={{ renderer: 'canvas' }}\n onEvents={{\n datazoom: (_params: unknown, instance: EChartsType) => {\n const { dataZoom } = instance.getOption();\n\n const { startValue, endValue } = (\n dataZoom as { startValue: number; endValue: number }[]\n )[0];\n\n const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(\n data.xAxisData[startValue],\n data.xAxisData[endValue]\n );\n\n const labelsData = getLabelData({\n xAxisData: data.xAxisData,\n isGreaterThanTwoWeeks,\n });\n\n instance.setOption({\n xAxis: {\n axisLabel: {\n formatter: (value: string) =>\n formatXAxisLabel(value, isGreaterThanTwoWeeks),\n },\n },\n series: [\n {\n id: 'candlestick',\n markPoint: {\n data: labelsData,\n },\n },\n ],\n });\n },\n }}\n />\n );\n};\n\nexport { Chart };\n"],"mappings":"AAAA,SACEA,SAAS,EACTC,aAAa,EACbC,KAAK,EACLC,iBAAiB,QACZ,2BAA2B;AAClC,SAASC,SAAS,QAAQ,kBAAkB;AAE5C,SACEC,QAAQ,EACRC,gBAAgB,EAChBC,WAAW,EACXC,YAAY,QACP,gBAAgB;AACvB,SACEC,uBAAuB,EACvBC,gBAAgB,EAChBC,mBAAmB,EACnBC,kBAAkB,EAClBC,gBAAgB,QACX,oBAAoB;AAC3B,OAAO,KAAKC,OAAO,MAAM,cAAc;AACvC,SAASC,cAAc,QAAQ,mBAAmB;AAClD,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,SAAS,QAAQ,gBAAgB;AAE1C,SACEC,gBAAgB,EAChBC,YAAY,EACZC,+BAA+B,QAC1B,oBAAoB;AAE3BP,OAAO,CAACQ,GAAG,CAAC,CACVX,mBAAmB,EACnBD,gBAAgB,EAChBL,QAAQ,EACRU,cAAc,EACdN,uBAAuB,EACvBF,WAAW,EACXM,gBAAgB,EAChBP,gBAAgB,EAChBM,kBAAkB,EAClBJ,YAAY,CACb,CAAC;AAEFM,OAAO,CAACS,aAAa,CAAC,YAAY,EAAEtB,aAAa,CAACC,KAAK,CAACsB,IAAI,CAAC,CAAC;AAC9DV,OAAO,CAACS,aAAa,CAAC,aAAa,EAAEtB,aAAa,CAACC,KAAK,CAACuB,KAAK,CAAC,CAAC;AAEhE,MAAMC,KAAK,GAAGC,IAAA,IAAqC;EAAA,IAApC;IAAEC,IAAI;IAAEC;EAAsB,CAAC,GAAAF,IAAA;EAC5C,MAAM;IAAEG;EAAO,CAAC,GAAG3B,iBAAiB,CAAC,CAAC;EACtC,MAAM;IAAE4B;EAAK,CAAC,GAAG3B,SAAS,CAAC,CAAC;EAE5B,OACEY,KAAA,CAAAgB,aAAA,CAAChC,SAAS;IACRiC,WAAW,EAAEhB,YAAY,CAACiB,MAAO;IACjCpB,OAAO,EAAEA,OAAQ;IACjBgB,MAAM,EAAEA,MAAO;IACfK,UAAU,EAAE,IAAK;IACjBC,MAAM,EAAElB,SAAS,CAACU,IAAI,EAAEE,MAAM,EAAED,SAAS,EAAEE,IAAI,CAAE;IACjDM,IAAI,EAAE;MAAEC,QAAQ,EAAE;IAAS,CAAE;IAC7BC,QAAQ,EAAE;MACRC,QAAQ,EAAEA,CAACC,OAAgB,EAAEC,QAAqB,KAAK;QACrD,MAAM;UAAEC;QAAS,CAAC,GAAGD,QAAQ,CAACxB,SAAS,CAAC,CAAC;QAEzC,MAAM;UAAE0B,UAAU;UAAEC;QAAS,CAAC,GAC5BF,QAAQ,CACR,CAAC,CAAC;QAEJ,MAAMG,qBAAqB,GAAGzB,+BAA+B,CAC3DO,IAAI,CAACmB,SAAS,CAACH,UAAU,CAAC,EAC1BhB,IAAI,CAACmB,SAAS,CAACF,QAAQ,CACzB,CAAC;QAED,MAAMG,UAAU,GAAG5B,YAAY,CAAC;UAC9B2B,SAAS,EAAEnB,IAAI,CAACmB,SAAS;UACzBD;QACF,CAAC,CAAC;QAEFJ,QAAQ,CAACO,SAAS,CAAC;UACjBC,KAAK,EAAE;YACLC,SAAS,EAAE;cACTC,SAAS,EAAGC,KAAa,IACvBlC,gBAAgB,CAACkC,KAAK,EAAEP,qBAAqB;YACjD;UACF,CAAC;UACDQ,MAAM,EAAE,CACN;YACEC,EAAE,EAAE,aAAa;YACjBC,SAAS,EAAE;cACT5B,IAAI,EAAEoB;YACR;UACF,CAAC;QAEL,CAAC,CAAC;MACJ;IACF;EAAE,CACH,CAAC;AAEN,CAAC;AAED,SAAStB,KAAK","ignoreList":[]}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { ChartError, Size, Spinner, SpinnerSize, useLayoutProvider } from '@oanda/labs-widget-common';
|
|
2
|
-
import classnames from 'classnames';
|
|
3
2
|
import React from 'react';
|
|
4
3
|
import { Chart } from './Chart';
|
|
5
4
|
import { useCrowdViewData } from './useCrowdViewData';
|
|
@@ -25,26 +24,18 @@ const ChartWithData = _ref => {
|
|
|
25
24
|
granularity
|
|
26
25
|
});
|
|
27
26
|
return React.createElement(React.Fragment, null, React.createElement("div", {
|
|
28
|
-
className:
|
|
29
|
-
'lw-h-[450px]': isDesktop,
|
|
30
|
-
'lw-h-[390px]': !isDesktop
|
|
31
|
-
})
|
|
27
|
+
className: "lw-relative lw-h-[450px] lw-w-full"
|
|
32
28
|
}, error && React.createElement("div", {
|
|
33
|
-
className:
|
|
34
|
-
'lw-h-full': isDesktop,
|
|
35
|
-
'lw-h-[calc(100%-40px)]': !isDesktop
|
|
36
|
-
})
|
|
29
|
+
className: "lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-[calc(100%-30px)] lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary"
|
|
37
30
|
}, React.createElement(ChartError, null)), loading && React.createElement("div", {
|
|
38
|
-
className:
|
|
39
|
-
'lw-h-full': isDesktop,
|
|
40
|
-
'lw-h-[calc(100%-40px)]': !isDesktop
|
|
41
|
-
})
|
|
31
|
+
className: "lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-[calc(100%-30px)] lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary"
|
|
42
32
|
}, React.createElement(Spinner, {
|
|
43
33
|
size: SpinnerSize.lg
|
|
44
34
|
})), !loading && !error && !!data && React.createElement("div", {
|
|
45
35
|
className: "lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full"
|
|
46
36
|
}, React.createElement(Chart, {
|
|
47
|
-
data: data
|
|
37
|
+
data: data,
|
|
38
|
+
isDesktop: isDesktop
|
|
48
39
|
}))));
|
|
49
40
|
};
|
|
50
41
|
export { ChartWithData };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartWithData.js","names":["ChartError","Size","Spinner","SpinnerSize","useLayoutProvider","
|
|
1
|
+
{"version":3,"file":"ChartWithData.js","names":["ChartError","Size","Spinner","SpinnerSize","useLayoutProvider","React","Chart","useCrowdViewData","ChartWithData","_ref","instrument","bookType","division","granularity","size","isDesktop","DESKTOP","data","loading","error","createElement","Fragment","className","lg"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/ChartWithData.tsx"],"sourcesContent":["import {\n ChartError,\n Size,\n Spinner,\n SpinnerSize,\n useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport React from 'react';\n\nimport { Chart } from './Chart';\nimport type { ChartWithDataProps } from './types';\nimport { useCrowdViewData } from './useCrowdViewData';\n\nconst ChartWithData = ({\n instrument,\n bookType,\n division,\n granularity,\n}: ChartWithDataProps) => {\n const { size } = useLayoutProvider();\n const isDesktop = size === Size.DESKTOP;\n\n const { data, loading, error } = useCrowdViewData({\n instrument,\n bookType,\n division,\n granularity,\n });\n\n return (\n <>\n <div className=\"lw-relative lw-h-[450px] lw-w-full\">\n {error && (\n <div className=\"lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-[calc(100%-30px)] lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary\">\n <ChartError />\n </div>\n )}\n {loading && (\n <div className=\"lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-[calc(100%-30px)] lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary\">\n <Spinner size={SpinnerSize.lg} />\n </div>\n )}\n {!loading && !error && !!data && (\n <div className=\"lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full\">\n <Chart data={data} isDesktop={isDesktop} />\n </div>\n )}\n </div>\n </>\n );\n};\n\nexport { ChartWithData };\n"],"mappings":"AAAA,SACEA,UAAU,EACVC,IAAI,EACJC,OAAO,EACPC,WAAW,EACXC,iBAAiB,QACZ,2BAA2B;AAClC,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,KAAK,QAAQ,SAAS;AAE/B,SAASC,gBAAgB,QAAQ,oBAAoB;AAErD,MAAMC,aAAa,GAAGC,IAAA,IAKI;EAAA,IALH;IACrBC,UAAU;IACVC,QAAQ;IACRC,QAAQ;IACRC;EACkB,CAAC,GAAAJ,IAAA;EACnB,MAAM;IAAEK;EAAK,CAAC,GAAGV,iBAAiB,CAAC,CAAC;EACpC,MAAMW,SAAS,GAAGD,IAAI,KAAKb,IAAI,CAACe,OAAO;EAEvC,MAAM;IAAEC,IAAI;IAAEC,OAAO;IAAEC;EAAM,CAAC,GAAGZ,gBAAgB,CAAC;IAChDG,UAAU;IACVC,QAAQ;IACRC,QAAQ;IACRC;EACF,CAAC,CAAC;EAEF,OACER,KAAA,CAAAe,aAAA,CAAAf,KAAA,CAAAgB,QAAA,QACEhB,KAAA,CAAAe,aAAA;IAAKE,SAAS,EAAC;EAAoC,GAChDH,KAAK,IACJd,KAAA,CAAAe,aAAA;IAAKE,SAAS,EAAC;EAA8J,GAC3KjB,KAAA,CAAAe,aAAA,CAACpB,UAAU,MAAE,CACV,CACN,EACAkB,OAAO,IACNb,KAAA,CAAAe,aAAA;IAAKE,SAAS,EAAC;EAA8J,GAC3KjB,KAAA,CAAAe,aAAA,CAAClB,OAAO;IAACY,IAAI,EAAEX,WAAW,CAACoB;EAAG,CAAE,CAC7B,CACN,EACA,CAACL,OAAO,IAAI,CAACC,KAAK,IAAI,CAAC,CAACF,IAAI,IAC3BZ,KAAA,CAAAe,aAAA;IAAKE,SAAS,EAAC;EAA4D,GACzEjB,KAAA,CAAAe,aAAA,CAACd,KAAK;IAACW,IAAI,EAAEA,IAAK;IAACF,SAAS,EAAEA;EAAU,CAAE,CACvC,CAEJ,CACL,CAAC;AAEP,CAAC;AAED,SAASP,aAAa","ignoreList":[]}
|
|
@@ -6,7 +6,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
|
|
|
6
6
|
import { colorPalette, getGridLines, getLineCommons } from '@oanda/labs-widget-common';
|
|
7
7
|
import { CHART_CONFIG } from '../../constants';
|
|
8
8
|
import { formatXAxisLabel, getLabelData, getRectColor, getTooltipFormatter, isDifferenceGreaterThanTwoWeeks } from './utils/chartUtils';
|
|
9
|
-
export const getOption = (_ref, isDark, labelCallback) => {
|
|
9
|
+
export const getOption = (_ref, isDark, isDesktop, labelCallback) => {
|
|
10
10
|
let {
|
|
11
11
|
xAxisData,
|
|
12
12
|
candlesSeriesData,
|
|
@@ -28,7 +28,7 @@ export const getOption = (_ref, isDark, labelCallback) => {
|
|
|
28
28
|
chartWidth: CHART_CONFIG.WIDTH,
|
|
29
29
|
chartHeight: CHART_CONFIG.HEIGHT,
|
|
30
30
|
xLabelsSize: CHART_CONFIG.X_LABEL_SIZE,
|
|
31
|
-
yLabelSize: CHART_CONFIG.Y_LABEL_SIZE_DESKTOP,
|
|
31
|
+
yLabelSize: isDesktop ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP : CHART_CONFIG.Y_LABEL_SIZE_MOBILE,
|
|
32
32
|
bottomLeftBox: false
|
|
33
33
|
});
|
|
34
34
|
return {
|
|
@@ -101,6 +101,7 @@ export const getOption = (_ref, isDark, labelCallback) => {
|
|
|
101
101
|
axisLabel: {
|
|
102
102
|
showMaxLabel: false,
|
|
103
103
|
showMinLabel: false,
|
|
104
|
+
margin: isDesktop ? 4 : 2,
|
|
104
105
|
formatter: value => value.toFixed(precision - 1)
|
|
105
106
|
}
|
|
106
107
|
},
|
|
@@ -162,7 +163,7 @@ export const getOption = (_ref, isDark, labelCallback) => {
|
|
|
162
163
|
name: 'main-grid',
|
|
163
164
|
top: '0px',
|
|
164
165
|
left: '0px',
|
|
165
|
-
right: "".concat(CHART_CONFIG.Y_LABEL_SIZE_DESKTOP, "px"),
|
|
166
|
+
right: "".concat(isDesktop ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP : CHART_CONFIG.Y_LABEL_SIZE_MOBILE, "px"),
|
|
166
167
|
bottom: "".concat(CHART_CONFIG.X_LABEL_SIZE, "px")
|
|
167
168
|
}],
|
|
168
169
|
graphic: [...gridLines, _objectSpread(_objectSpread({}, getLineCommons(isDark)), {}, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chartOptions.js","names":["colorPalette","getGridLines","getLineCommons","CHART_CONFIG","formatXAxisLabel","getLabelData","getRectColor","getTooltipFormatter","isDifferenceGreaterThanTwoWeeks","getOption","_ref","isDark","labelCallback","xAxisData","candlesSeriesData","orderPositionBooks","bucketWidth","buckets","precision","bookType","selectedPrice","visibleXAxisData","slice","length","INITIAL_START_ZOOM","INITIAL_END_ZOOM","isGreaterThanTwoWeeks","labelsData","gridLines","chartWidth","WIDTH","chartHeight","HEIGHT","xLabelsSize","X_LABEL_SIZE","yLabelSize","Y_LABEL_SIZE_DESKTOP","bottomLeftBox","animation","dataZoom","type","xAxisIndex","start","end","tooltip","trigger","axisPointer","axis","label","formatter","params","axisDimension","Number","value","toFixed","date","Date","toLocaleString","undefined","hour","minute","day","month","confine","xAxis","data","splitNumber","axisTick","show","axisLabel","padding","margin","yAxis","position","min","val","max","axisLine","showMaxLabel","showMinLabel","series","id","itemStyle","color","raspberryLight","color0","bottleGreenLight","markPoint","symbol","symbolSize","name","silent","clip","renderItem","_params","api","xVal","bucketIndex","metaValues","rectWidth","rectHeight","size","items","map","_ref2","price","sentiment","coord","shape","x","y","width","height","style","fill","emphasisDisabled","children","grid","top","left","right","concat","bottom","graphic","_objectSpread","x1","y1","x2","y2"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/chartOptions.ts"],"sourcesContent":["import {\n colorPalette,\n getGridLines,\n getLineCommons,\n} from '@oanda/labs-widget-common';\n\nimport { CHART_CONFIG } from '../../constants';\nimport type { Bucket, GetOptionType } from './types';\nimport {\n formatXAxisLabel,\n getLabelData,\n getRectColor,\n getTooltipFormatter,\n isDifferenceGreaterThanTwoWeeks,\n} from './utils/chartUtils';\n\n// @ts-expect-error\nexport const getOption: GetOptionType = (\n {\n xAxisData,\n candlesSeriesData,\n orderPositionBooks,\n bucketWidth,\n buckets,\n precision,\n bookType,\n },\n isDark,\n labelCallback\n) => {\n let selectedPrice: number;\n const visibleXAxisData = xAxisData.slice(\n (xAxisData.length * CHART_CONFIG.INITIAL_START_ZOOM) / 100,\n (xAxisData.length * CHART_CONFIG.INITIAL_END_ZOOM) / 100\n );\n\n const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(\n visibleXAxisData[0],\n visibleXAxisData[visibleXAxisData.length - 1]\n );\n\n const labelsData = getLabelData({\n xAxisData,\n isGreaterThanTwoWeeks,\n });\n\n const gridLines = getGridLines({\n isDark,\n chartWidth: CHART_CONFIG.WIDTH,\n chartHeight: CHART_CONFIG.HEIGHT,\n xLabelsSize: CHART_CONFIG.X_LABEL_SIZE,\n yLabelSize: CHART_CONFIG.Y_LABEL_SIZE_DESKTOP,\n bottomLeftBox: false,\n });\n\n return {\n animation: false,\n dataZoom: [\n {\n type: 'inside',\n xAxisIndex: 0,\n start: CHART_CONFIG.INITIAL_START_ZOOM,\n end: CHART_CONFIG.INITIAL_END_ZOOM,\n },\n ],\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'cross',\n axis: 'x',\n label: {\n formatter: (params) => {\n if (params.axisDimension === 'y') {\n selectedPrice = Number(params.value);\n return Number(params.value).toFixed(precision);\n }\n\n if (params.axisDimension === 'x') {\n const date = new Date(params.value as string);\n return date.toLocaleString(undefined, {\n hour: '2-digit',\n minute: '2-digit',\n day: 'numeric',\n month: 'short',\n });\n }\n\n return null;\n },\n },\n },\n confine: true,\n formatter: (params) =>\n getTooltipFormatter({\n params,\n buckets,\n bucketWidth,\n selectedPrice,\n labelCallback,\n precision,\n bookType,\n }),\n },\n xAxis: {\n type: 'category',\n data: xAxisData,\n splitNumber: 1,\n axisTick: {\n show: false,\n },\n axisLabel: {\n padding: [8, 16, 8, 16],\n margin: 0,\n formatter: (value) => formatXAxisLabel(value, isGreaterThanTwoWeeks),\n },\n },\n yAxis: {\n type: 'value',\n position: 'right',\n min: (val) => val.min - bucketWidth * 2,\n max: (val) => val.max + bucketWidth * 2,\n axisLine: { show: false },\n axisTick: { show: false },\n axisLabel: {\n showMaxLabel: false,\n showMinLabel: false,\n formatter: (value: number) => value.toFixed(precision - 1),\n },\n },\n series: [\n {\n type: 'candlestick',\n id: 'candlestick',\n data: candlesSeriesData,\n itemStyle: {\n color: colorPalette.raspberryLight,\n color0: colorPalette.bottleGreenLight,\n },\n\n markPoint: {\n symbol: 'circle',\n symbolSize: 0,\n data: labelsData,\n },\n },\n {\n type: 'custom',\n name: 'heatmap',\n id: 'heatmap',\n silent: true,\n clip: true,\n renderItem: (_params, api) => {\n const xVal = api.value(0);\n const bucketIndex = api.value(2) as number;\n const metaValues = buckets[bucketIndex];\n\n const [rectWidth, rectHeight] = api.size!([\n 0,\n bucketWidth,\n ]) as number[];\n\n const items = metaValues.map(({ price, sentiment }: Bucket) => {\n const start = api.coord([xVal, price]);\n\n return {\n type: 'rect',\n shape: {\n x: start[0] - rectWidth / 2,\n y: start[1] - rectHeight,\n width: rectWidth + 1,\n height: rectHeight,\n },\n style: {\n fill: getRectColor(sentiment),\n },\n silent: true,\n emphasisDisabled: true,\n };\n });\n\n return {\n type: 'group',\n children: items,\n silent: true,\n emphasisDisabled: true,\n };\n },\n data: orderPositionBooks,\n },\n ],\n grid: [\n {\n name: 'main-grid',\n top: '0px',\n left: '0px',\n right: `${CHART_CONFIG.Y_LABEL_SIZE_DESKTOP}px`,\n bottom: `${CHART_CONFIG.X_LABEL_SIZE}px`,\n },\n ],\n graphic: [\n ...gridLines,\n {\n ...getLineCommons(isDark as boolean),\n top: 0,\n right: 0,\n shape: {\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 0,\n },\n },\n ],\n };\n};\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"chartOptions.js","names":["colorPalette","getGridLines","getLineCommons","CHART_CONFIG","formatXAxisLabel","getLabelData","getRectColor","getTooltipFormatter","isDifferenceGreaterThanTwoWeeks","getOption","_ref","isDark","isDesktop","labelCallback","xAxisData","candlesSeriesData","orderPositionBooks","bucketWidth","buckets","precision","bookType","selectedPrice","visibleXAxisData","slice","length","INITIAL_START_ZOOM","INITIAL_END_ZOOM","isGreaterThanTwoWeeks","labelsData","gridLines","chartWidth","WIDTH","chartHeight","HEIGHT","xLabelsSize","X_LABEL_SIZE","yLabelSize","Y_LABEL_SIZE_DESKTOP","Y_LABEL_SIZE_MOBILE","bottomLeftBox","animation","dataZoom","type","xAxisIndex","start","end","tooltip","trigger","axisPointer","axis","label","formatter","params","axisDimension","Number","value","toFixed","date","Date","toLocaleString","undefined","hour","minute","day","month","confine","xAxis","data","splitNumber","axisTick","show","axisLabel","padding","margin","yAxis","position","min","val","max","axisLine","showMaxLabel","showMinLabel","series","id","itemStyle","color","raspberryLight","color0","bottleGreenLight","markPoint","symbol","symbolSize","name","silent","clip","renderItem","_params","api","xVal","bucketIndex","metaValues","rectWidth","rectHeight","size","items","map","_ref2","price","sentiment","coord","shape","x","y","width","height","style","fill","emphasisDisabled","children","grid","top","left","right","concat","bottom","graphic","_objectSpread","x1","y1","x2","y2"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/chartOptions.ts"],"sourcesContent":["import {\n colorPalette,\n getGridLines,\n getLineCommons,\n} from '@oanda/labs-widget-common';\n\nimport { CHART_CONFIG } from '../../constants';\nimport type { Bucket, GetOptionType } from './types';\nimport {\n formatXAxisLabel,\n getLabelData,\n getRectColor,\n getTooltipFormatter,\n isDifferenceGreaterThanTwoWeeks,\n} from './utils/chartUtils';\n\n// @ts-expect-error\nexport const getOption: GetOptionType = (\n {\n xAxisData,\n candlesSeriesData,\n orderPositionBooks,\n bucketWidth,\n buckets,\n precision,\n bookType,\n },\n isDark,\n isDesktop,\n labelCallback\n) => {\n let selectedPrice: number;\n const visibleXAxisData = xAxisData.slice(\n (xAxisData.length * CHART_CONFIG.INITIAL_START_ZOOM) / 100,\n (xAxisData.length * CHART_CONFIG.INITIAL_END_ZOOM) / 100\n );\n\n const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(\n visibleXAxisData[0],\n visibleXAxisData[visibleXAxisData.length - 1]\n );\n\n const labelsData = getLabelData({\n xAxisData,\n isGreaterThanTwoWeeks,\n });\n\n const gridLines = getGridLines({\n isDark,\n chartWidth: CHART_CONFIG.WIDTH,\n chartHeight: CHART_CONFIG.HEIGHT,\n xLabelsSize: CHART_CONFIG.X_LABEL_SIZE,\n yLabelSize: isDesktop\n ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP\n : CHART_CONFIG.Y_LABEL_SIZE_MOBILE,\n bottomLeftBox: false,\n });\n\n return {\n animation: false,\n dataZoom: [\n {\n type: 'inside',\n xAxisIndex: 0,\n start: CHART_CONFIG.INITIAL_START_ZOOM,\n end: CHART_CONFIG.INITIAL_END_ZOOM,\n },\n ],\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'cross',\n axis: 'x',\n label: {\n formatter: (params) => {\n if (params.axisDimension === 'y') {\n selectedPrice = Number(params.value);\n return Number(params.value).toFixed(precision);\n }\n\n if (params.axisDimension === 'x') {\n const date = new Date(params.value as string);\n return date.toLocaleString(undefined, {\n hour: '2-digit',\n minute: '2-digit',\n day: 'numeric',\n month: 'short',\n });\n }\n\n return null;\n },\n },\n },\n confine: true,\n formatter: (params) =>\n getTooltipFormatter({\n params,\n buckets,\n bucketWidth,\n selectedPrice,\n labelCallback,\n precision,\n bookType,\n }),\n },\n xAxis: {\n type: 'category',\n data: xAxisData,\n splitNumber: 1,\n axisTick: {\n show: false,\n },\n axisLabel: {\n padding: [8, 16, 8, 16],\n margin: 0,\n formatter: (value) => formatXAxisLabel(value, isGreaterThanTwoWeeks),\n },\n },\n yAxis: {\n type: 'value',\n position: 'right',\n min: (val) => val.min - bucketWidth * 2,\n max: (val) => val.max + bucketWidth * 2,\n axisLine: { show: false },\n axisTick: { show: false },\n axisLabel: {\n showMaxLabel: false,\n showMinLabel: false,\n margin: isDesktop ? 4 : 2,\n formatter: (value: number) => value.toFixed(precision - 1),\n },\n },\n series: [\n {\n type: 'candlestick',\n id: 'candlestick',\n data: candlesSeriesData,\n itemStyle: {\n color: colorPalette.raspberryLight,\n color0: colorPalette.bottleGreenLight,\n },\n\n markPoint: {\n symbol: 'circle',\n symbolSize: 0,\n data: labelsData,\n },\n },\n {\n type: 'custom',\n name: 'heatmap',\n id: 'heatmap',\n silent: true,\n clip: true,\n renderItem: (_params, api) => {\n const xVal = api.value(0);\n const bucketIndex = api.value(2) as number;\n const metaValues = buckets[bucketIndex];\n\n const [rectWidth, rectHeight] = api.size!([\n 0,\n bucketWidth,\n ]) as number[];\n\n const items = metaValues.map(({ price, sentiment }: Bucket) => {\n const start = api.coord([xVal, price]);\n\n return {\n type: 'rect',\n shape: {\n x: start[0] - rectWidth / 2,\n y: start[1] - rectHeight,\n width: rectWidth + 1,\n height: rectHeight,\n },\n style: {\n fill: getRectColor(sentiment),\n },\n silent: true,\n emphasisDisabled: true,\n };\n });\n\n return {\n type: 'group',\n children: items,\n silent: true,\n emphasisDisabled: true,\n };\n },\n data: orderPositionBooks,\n },\n ],\n grid: [\n {\n name: 'main-grid',\n top: '0px',\n left: '0px',\n right: `${isDesktop ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP : CHART_CONFIG.Y_LABEL_SIZE_MOBILE}px`,\n bottom: `${CHART_CONFIG.X_LABEL_SIZE}px`,\n },\n ],\n graphic: [\n ...gridLines,\n {\n ...getLineCommons(isDark as boolean),\n top: 0,\n right: 0,\n shape: {\n x1: 0,\n y1: 0,\n x2: 0,\n y2: 0,\n },\n },\n ],\n };\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","names":[],"sources":["../../../../../src/CrowdViewWidget/components/Chart/types.ts"],"sourcesContent":["import type { EChartsOption } from 'echarts';\n\nimport type {\n BookType,\n Division,\n Granularity,\n} from '../../../gql/types/graphql';\nimport type { InstrumentId } from '../../types';\n\nexport interface Bucket {\n price: number;\n sentiment: number;\n}\n\nexport interface UseCrowdViewDataProps {\n instrument: InstrumentId;\n bookType: BookType;\n division: Division;\n granularity: Granularity;\n}\n\ninterface CrowdViewData {\n xAxisData: string[];\n // [open, close, low, high]\n candlesSeriesData: [number, number, number, number][];\n // [time, price, index]\n orderPositionBooks: [string, number | null, number][];\n bucketWidth: number;\n buckets: Bucket[][];\n precision: number;\n bookType: BookType;\n}\n\nexport interface UseCrowdViewDataReturn {\n data: CrowdViewData | null;\n loading: boolean;\n error: boolean;\n}\n\nexport type GetOptionType = (\n props: CrowdViewData,\n isDark: boolean,\n labelCallback: (key: string, params?: Record<string, unknown>) => string\n) => EChartsOption;\n\nexport interface ChartProps {\n data: CrowdViewData;\n}\n\nexport interface ChartWithDataProps {\n bookType: BookType;\n division: Division;\n instrument: InstrumentId;\n granularity: Granularity;\n}\n\nexport interface GetLabelsDataProps {\n xAxisData: string[];\n isGreaterThanTwoWeeks: boolean;\n}\n"],"mappings":"","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"types.js","names":[],"sources":["../../../../../src/CrowdViewWidget/components/Chart/types.ts"],"sourcesContent":["import type { EChartsOption } from 'echarts';\n\nimport type {\n BookType,\n Division,\n Granularity,\n} from '../../../gql/types/graphql';\nimport type { InstrumentId } from '../../types';\n\nexport interface Bucket {\n price: number;\n sentiment: number;\n}\n\nexport interface UseCrowdViewDataProps {\n instrument: InstrumentId;\n bookType: BookType;\n division: Division;\n granularity: Granularity;\n}\n\ninterface CrowdViewData {\n xAxisData: string[];\n // [open, close, low, high]\n candlesSeriesData: [number, number, number, number][];\n // [time, price, index]\n orderPositionBooks: [string, number | null, number][];\n bucketWidth: number;\n buckets: Bucket[][];\n precision: number;\n bookType: BookType;\n}\n\nexport interface UseCrowdViewDataReturn {\n data: CrowdViewData | null;\n loading: boolean;\n error: boolean;\n}\n\nexport type GetOptionType = (\n props: CrowdViewData,\n isDark: boolean,\n isDesktop: boolean,\n labelCallback: (key: string, params?: Record<string, unknown>) => string\n) => EChartsOption;\n\nexport interface ChartProps {\n data: CrowdViewData;\n isDesktop: boolean;\n}\n\nexport interface ChartWithDataProps {\n bookType: BookType;\n division: Division;\n instrument: InstrumentId;\n granularity: Granularity;\n}\n\nexport interface GetLabelsDataProps {\n xAxisData: string[];\n isGreaterThanTwoWeeks: boolean;\n}\n"],"mappings":"","ignoreList":[]}
|
|
@@ -95,7 +95,7 @@ export const getTooltipFormatter = _ref2 => {
|
|
|
95
95
|
day: 'numeric',
|
|
96
96
|
month: 'numeric',
|
|
97
97
|
timeZoneName: 'short'
|
|
98
|
-
}), "</p><br />\n").concat(showCandles ? "<p><b>".concat(labelCallback('candle'), ":</b></p>\n<p>").concat(labelCallback('open_price'), ": ").concat(candleData[1], " </p>\n<p>").concat(labelCallback('close_price'), ": ").concat(candleData[2], " </p>\n<p>").concat(labelCallback('low'), ": ").concat(candleData[3], " </p>\n<p>").concat(labelCallback('high'), ": ").concat(candleData[4], " </p>\n") : '', "\n").concat(matchedBucket ? "<br /><p><b>".concat(labelCallback(bookType === BookType.Order ? 'orders' : 'positions'), ":</b></p>\n<p>").concat(labelCallback('price_range'), ": ").concat(matchedBucket.price.toFixed(precision - 1), " - ").concat(Number(matchedBucket.price + bucketWidth).toFixed(precision - 1), " </p>\n<p>").concat(matchedBucket.sentiment < 0 ? labelCallback(bookType === BookType.Order ? '
|
|
98
|
+
}), "</p><br />\n").concat(showCandles ? "<p><b>".concat(labelCallback('candle'), ":</b></p>\n<p>").concat(labelCallback('open_price'), ": ").concat(candleData[1], " </p>\n<p>").concat(labelCallback('close_price'), ": ").concat(candleData[2], " </p>\n<p>").concat(labelCallback('low'), ": ").concat(candleData[3], " </p>\n<p>").concat(labelCallback('high'), ": ").concat(candleData[4], " </p>\n") : '', "\n").concat(matchedBucket ? "<br /><p><b>".concat(labelCallback(bookType === BookType.Order ? 'orders' : 'positions'), ":</b></p>\n<p>").concat(labelCallback('price_range'), ": ").concat(matchedBucket.price.toFixed(precision - 1), " - ").concat(Number(matchedBucket.price + bucketWidth).toFixed(precision - 1), " </p>\n<p>").concat(matchedBucket.sentiment < 0 ? labelCallback(bookType === BookType.Order ? 'sell_overbalance' : 'short_overbalance') : labelCallback(bookType === BookType.Order ? 'buy_overbalance' : 'long_overbalance'), ": ").concat(Math.abs(matchedBucket.sentiment), "% </p>") : '');
|
|
99
99
|
};
|
|
100
100
|
export const formatXAxisLabel = (value, isGreaterThanTwoWeeks) => {
|
|
101
101
|
const date = new Date(value);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chartUtils.js","names":["chroma","BookType","Granularity","TimeSpan","BOOKS_THRESHOLDS","CHART_CONFIG","COLOR_MAP","TIME_THRESHOLDS","getLabelData","_ref","xAxisData","isGreaterThanTwoWeeks","filter","record","index","arr","previousTimestamp","currentDate","Date","previousDate","getDate","getMonth","map","item","name","toLocaleDateString","undefined","month","day","xAxis","y","HEIGHT","silent","emphasis","disabled","label","fontFamily","fontSize","position","align","formatter","isDifferenceGreaterThanTwoWeeks","startDate","endDate","date1","date2","differenceInMs","Math","abs","getTime","TWO_WEEKS_MS","getTimeSpanForGranularity","granularity","granularityTimeSpanMap","M5","TwoDays","M15","FiveDays","H1","TwentyDays","H4","NinetyDays","getGradientColor","value","startColor","targetColor","startThreshold","MIN","endThreshold","MAX","colorScale","scale","domain","mode","hex","getRectColor","sentiment","short","long","getTooltipFormatter","_ref2","_booksParam$value","params","buckets","bucketWidth","selectedPrice","precision","bookType","labelCallback","Array","isArray","length","candleParam","booksParam","time","axisValue","candleData","booksData","bucketsIndex","selectedBuckets","matchedBucket","find","_ref3","price","showCandles","concat","toLocaleString","hour","minute","year","timeZoneName","Order","toFixed","Number","formatXAxisLabel","date","toLocaleTimeString","X_AXIS_DATE_PADDING"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/utils/chartUtils.ts"],"sourcesContent":["import chroma from 'chroma-js';\n\nimport { BookType, Granularity, TimeSpan } from '../../../../gql/types/graphql';\nimport {\n BOOKS_THRESHOLDS,\n CHART_CONFIG,\n COLOR_MAP,\n TIME_THRESHOLDS,\n} from '../../../constants';\nimport type { Bucket, GetLabelsDataProps } from '../types';\n\nexport const getLabelData = ({\n xAxisData,\n isGreaterThanTwoWeeks,\n}: GetLabelsDataProps) =>\n xAxisData\n .filter((record, index, arr) => {\n if (index === 0) {\n return false;\n }\n const previousTimestamp = arr[index - 1];\n const currentDate = new Date(record);\n const previousDate = new Date(previousTimestamp);\n\n return isGreaterThanTwoWeeks\n ? currentDate.getDate() !== previousDate.getDate()\n : currentDate.getMonth() !== previousDate.getMonth();\n })\n .map((item) => ({\n name: new Date(item).toLocaleDateString(undefined, {\n month: isGreaterThanTwoWeeks ? 'short' : 'long',\n day: isGreaterThanTwoWeeks ? 'numeric' : undefined,\n }),\n xAxis: item,\n y: CHART_CONFIG.HEIGHT - 22,\n silent: true,\n emphasis: {\n disabled: true,\n },\n label: {\n fontFamily: 'Sofia W03',\n fontSize: 10,\n position: 'bottom',\n align: 'center',\n formatter: '{b}',\n },\n }));\n\nexport const isDifferenceGreaterThanTwoWeeks = (\n startDate: string,\n endDate: string\n) => {\n const date1 = new Date(startDate);\n const date2 = new Date(endDate);\n\n const differenceInMs = Math.abs(date2.getTime() - date1.getTime());\n\n return differenceInMs < TIME_THRESHOLDS.TWO_WEEKS_MS;\n};\n\nexport const getTimeSpanForGranularity = (\n granularity: Granularity\n): TimeSpan => {\n const granularityTimeSpanMap: Record<Granularity, TimeSpan> = {\n [Granularity.M5]: TimeSpan.TwoDays,\n [Granularity.M15]: TimeSpan.FiveDays,\n [Granularity.H1]: TimeSpan.TwentyDays,\n [Granularity.H4]: TimeSpan.NinetyDays,\n };\n\n return granularityTimeSpanMap[granularity] || TimeSpan.TwoDays;\n};\n\nconst getGradientColor = (\n value: number,\n startColor: string,\n targetColor: string\n): string => {\n const startThreshold = BOOKS_THRESHOLDS.MIN;\n const endThreshold = BOOKS_THRESHOLDS.MAX;\n\n const colorScale = chroma\n .scale([startColor, targetColor])\n .domain([startThreshold, endThreshold])\n .mode('rgb');\n\n return colorScale(value).hex();\n};\n\nexport const getRectColor = (sentiment: number) =>\n sentiment < 0\n ? getGradientColor(sentiment * -1, COLOR_MAP.short[0], COLOR_MAP.short[1])\n : getGradientColor(sentiment, COLOR_MAP.long[0], COLOR_MAP.long[1]);\n\nexport const getTooltipFormatter = ({\n params,\n buckets,\n bucketWidth,\n selectedPrice,\n precision,\n bookType,\n labelCallback,\n}: {\n params: unknown;\n buckets: Bucket[][];\n bucketWidth: number;\n selectedPrice: number;\n precision: number;\n bookType: BookType;\n labelCallback: (key: string) => string;\n}) => {\n const arr = params as unknown as Array<Record<string, unknown>>;\n if (!arr || !Array.isArray(arr) || arr.length === 0) {\n return undefined;\n }\n const candleParam = arr[0] as {\n axisValue: string;\n value: [number, number, number, number, number];\n };\n const booksParam = arr[1] as { value: [string, number, number] };\n const time = new Date(candleParam.axisValue as string);\n\n const candleData = candleParam.value;\n const booksData = booksParam?.value ?? [];\n const bucketsIndex = booksData[2];\n const selectedBuckets = buckets[bucketsIndex];\n\n const matchedBucket = selectedBuckets?.find(\n ({ price }) => selectedPrice >= price && selectedPrice < price + bucketWidth\n );\n const showCandles =\n !!candleData[1] && !!candleData[2] && !!candleData[3] && !!candleData[4];\n\n if (!showCandles && !matchedBucket) {\n return undefined;\n }\n\n return `<p>${time.toLocaleString(undefined, {\n hour: '2-digit',\n minute: '2-digit',\n year: 'numeric',\n day: 'numeric',\n month: 'numeric',\n timeZoneName: 'short',\n })}</p><br />\n${\n showCandles\n ? `<p><b>${labelCallback('candle')}:</b></p>\n<p>${labelCallback('open_price')}: ${candleData[1]} </p>\n<p>${labelCallback('close_price')}: ${candleData[2]} </p>\n<p>${labelCallback('low')}: ${candleData[3]} </p>\n<p>${labelCallback('high')}: ${candleData[4]} </p>\n`\n : ''\n}\n${\n matchedBucket\n ? `<br /><p><b>${labelCallback(bookType === BookType.Order ? 'orders' : 'positions')}:</b></p>\n<p>${labelCallback('price_range')}: ${matchedBucket.price.toFixed(precision - 1)} - ${Number(matchedBucket.price + bucketWidth).toFixed(precision - 1)} </p>\n<p>${\n matchedBucket.sentiment < 0\n ? labelCallback(\n bookType === BookType.Order ? 'sell_advantage' : 'short_advantage'\n )\n : labelCallback(\n bookType === BookType.Order ? 'buy_advantage' : 'long_advantage'\n )\n }: ${Math.abs(matchedBucket.sentiment)}% </p>`\n : ''\n}`;\n};\n\nexport const formatXAxisLabel = (\n value: unknown,\n isGreaterThanTwoWeeks: boolean\n) => {\n const date = new Date(value as string);\n return isGreaterThanTwoWeeks\n ? `${date.toLocaleTimeString(undefined, {\n hour: '2-digit',\n minute: '2-digit',\n })}`\n : `${CHART_CONFIG.X_AXIS_DATE_PADDING}${date.toLocaleDateString(undefined, {\n day: 'numeric',\n })}${CHART_CONFIG.X_AXIS_DATE_PADDING}`;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"chartUtils.js","names":["chroma","BookType","Granularity","TimeSpan","BOOKS_THRESHOLDS","CHART_CONFIG","COLOR_MAP","TIME_THRESHOLDS","getLabelData","_ref","xAxisData","isGreaterThanTwoWeeks","filter","record","index","arr","previousTimestamp","currentDate","Date","previousDate","getDate","getMonth","map","item","name","toLocaleDateString","undefined","month","day","xAxis","y","HEIGHT","silent","emphasis","disabled","label","fontFamily","fontSize","position","align","formatter","isDifferenceGreaterThanTwoWeeks","startDate","endDate","date1","date2","differenceInMs","Math","abs","getTime","TWO_WEEKS_MS","getTimeSpanForGranularity","granularity","granularityTimeSpanMap","M5","TwoDays","M15","FiveDays","H1","TwentyDays","H4","NinetyDays","getGradientColor","value","startColor","targetColor","startThreshold","MIN","endThreshold","MAX","colorScale","scale","domain","mode","hex","getRectColor","sentiment","short","long","getTooltipFormatter","_ref2","_booksParam$value","params","buckets","bucketWidth","selectedPrice","precision","bookType","labelCallback","Array","isArray","length","candleParam","booksParam","time","axisValue","candleData","booksData","bucketsIndex","selectedBuckets","matchedBucket","find","_ref3","price","showCandles","concat","toLocaleString","hour","minute","year","timeZoneName","Order","toFixed","Number","formatXAxisLabel","date","toLocaleTimeString","X_AXIS_DATE_PADDING"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/utils/chartUtils.ts"],"sourcesContent":["import chroma from 'chroma-js';\n\nimport { BookType, Granularity, TimeSpan } from '../../../../gql/types/graphql';\nimport {\n BOOKS_THRESHOLDS,\n CHART_CONFIG,\n COLOR_MAP,\n TIME_THRESHOLDS,\n} from '../../../constants';\nimport type { Bucket, GetLabelsDataProps } from '../types';\n\nexport const getLabelData = ({\n xAxisData,\n isGreaterThanTwoWeeks,\n}: GetLabelsDataProps) =>\n xAxisData\n .filter((record, index, arr) => {\n if (index === 0) {\n return false;\n }\n const previousTimestamp = arr[index - 1];\n const currentDate = new Date(record);\n const previousDate = new Date(previousTimestamp);\n\n return isGreaterThanTwoWeeks\n ? currentDate.getDate() !== previousDate.getDate()\n : currentDate.getMonth() !== previousDate.getMonth();\n })\n .map((item) => ({\n name: new Date(item).toLocaleDateString(undefined, {\n month: isGreaterThanTwoWeeks ? 'short' : 'long',\n day: isGreaterThanTwoWeeks ? 'numeric' : undefined,\n }),\n xAxis: item,\n y: CHART_CONFIG.HEIGHT - 22,\n silent: true,\n emphasis: {\n disabled: true,\n },\n label: {\n fontFamily: 'Sofia W03',\n fontSize: 10,\n position: 'bottom',\n align: 'center',\n formatter: '{b}',\n },\n }));\n\nexport const isDifferenceGreaterThanTwoWeeks = (\n startDate: string,\n endDate: string\n) => {\n const date1 = new Date(startDate);\n const date2 = new Date(endDate);\n\n const differenceInMs = Math.abs(date2.getTime() - date1.getTime());\n\n return differenceInMs < TIME_THRESHOLDS.TWO_WEEKS_MS;\n};\n\nexport const getTimeSpanForGranularity = (\n granularity: Granularity\n): TimeSpan => {\n const granularityTimeSpanMap: Record<Granularity, TimeSpan> = {\n [Granularity.M5]: TimeSpan.TwoDays,\n [Granularity.M15]: TimeSpan.FiveDays,\n [Granularity.H1]: TimeSpan.TwentyDays,\n [Granularity.H4]: TimeSpan.NinetyDays,\n };\n\n return granularityTimeSpanMap[granularity] || TimeSpan.TwoDays;\n};\n\nconst getGradientColor = (\n value: number,\n startColor: string,\n targetColor: string\n): string => {\n const startThreshold = BOOKS_THRESHOLDS.MIN;\n const endThreshold = BOOKS_THRESHOLDS.MAX;\n\n const colorScale = chroma\n .scale([startColor, targetColor])\n .domain([startThreshold, endThreshold])\n .mode('rgb');\n\n return colorScale(value).hex();\n};\n\nexport const getRectColor = (sentiment: number) =>\n sentiment < 0\n ? getGradientColor(sentiment * -1, COLOR_MAP.short[0], COLOR_MAP.short[1])\n : getGradientColor(sentiment, COLOR_MAP.long[0], COLOR_MAP.long[1]);\n\nexport const getTooltipFormatter = ({\n params,\n buckets,\n bucketWidth,\n selectedPrice,\n precision,\n bookType,\n labelCallback,\n}: {\n params: unknown;\n buckets: Bucket[][];\n bucketWidth: number;\n selectedPrice: number;\n precision: number;\n bookType: BookType;\n labelCallback: (key: string) => string;\n}) => {\n const arr = params as unknown as Array<Record<string, unknown>>;\n if (!arr || !Array.isArray(arr) || arr.length === 0) {\n return undefined;\n }\n const candleParam = arr[0] as {\n axisValue: string;\n value: [number, number, number, number, number];\n };\n const booksParam = arr[1] as { value: [string, number, number] };\n const time = new Date(candleParam.axisValue as string);\n\n const candleData = candleParam.value;\n const booksData = booksParam?.value ?? [];\n const bucketsIndex = booksData[2];\n const selectedBuckets = buckets[bucketsIndex];\n\n const matchedBucket = selectedBuckets?.find(\n ({ price }) => selectedPrice >= price && selectedPrice < price + bucketWidth\n );\n const showCandles =\n !!candleData[1] && !!candleData[2] && !!candleData[3] && !!candleData[4];\n\n if (!showCandles && !matchedBucket) {\n return undefined;\n }\n\n return `<p>${time.toLocaleString(undefined, {\n hour: '2-digit',\n minute: '2-digit',\n year: 'numeric',\n day: 'numeric',\n month: 'numeric',\n timeZoneName: 'short',\n })}</p><br />\n${\n showCandles\n ? `<p><b>${labelCallback('candle')}:</b></p>\n<p>${labelCallback('open_price')}: ${candleData[1]} </p>\n<p>${labelCallback('close_price')}: ${candleData[2]} </p>\n<p>${labelCallback('low')}: ${candleData[3]} </p>\n<p>${labelCallback('high')}: ${candleData[4]} </p>\n`\n : ''\n}\n${\n matchedBucket\n ? `<br /><p><b>${labelCallback(bookType === BookType.Order ? 'orders' : 'positions')}:</b></p>\n<p>${labelCallback('price_range')}: ${matchedBucket.price.toFixed(precision - 1)} - ${Number(matchedBucket.price + bucketWidth).toFixed(precision - 1)} </p>\n<p>${\n matchedBucket.sentiment < 0\n ? labelCallback(\n bookType === BookType.Order\n ? 'sell_overbalance'\n : 'short_overbalance'\n )\n : labelCallback(\n bookType === BookType.Order\n ? 'buy_overbalance'\n : 'long_overbalance'\n )\n }: ${Math.abs(matchedBucket.sentiment)}% </p>`\n : ''\n}`;\n};\n\nexport const formatXAxisLabel = (\n value: unknown,\n isGreaterThanTwoWeeks: boolean\n) => {\n const date = new Date(value as string);\n return isGreaterThanTwoWeeks\n ? `${date.toLocaleTimeString(undefined, {\n hour: '2-digit',\n minute: '2-digit',\n })}`\n : `${CHART_CONFIG.X_AXIS_DATE_PADDING}${date.toLocaleDateString(undefined, {\n day: 'numeric',\n })}${CHART_CONFIG.X_AXIS_DATE_PADDING}`;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -13,7 +13,7 @@ export const Legend = _ref => {
|
|
|
13
13
|
lang
|
|
14
14
|
} = useLocale();
|
|
15
15
|
return React.createElement("div", {
|
|
16
|
-
className: "lw-mx-auto lw-flex lw-w-full lw-flex-col lw-items-center lw-space-y-4 lw-
|
|
16
|
+
className: "lw-mx-auto lw-flex lw-w-full lw-flex-col lw-items-center lw-space-y-4 lw-pb-6 lw-pt-0 sm:lw-max-w-md lg:lw-max-w-xl"
|
|
17
17
|
}, React.createElement(LegendBar, {
|
|
18
18
|
label: lang(bookType === BookType.Order ? 'buy' : 'long'),
|
|
19
19
|
type: "long",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Legend.js","names":["useLocale","React","BookType","BOOKS_THRESHOLDS","LegendBar","Legend","_ref","longValues","MIN","MAX","shortValues","bookType","lang","createElement","className","label","Order","type","values"],"sources":["../../../../../src/CrowdViewWidget/components/Legend/Legend.tsx"],"sourcesContent":["import { useLocale } from '@oanda/mono-i18n';\nimport React from 'react';\n\nimport { BookType } from '../../../gql/types/graphql';\nimport { BOOKS_THRESHOLDS } from '../../constants';\nimport { LegendBar } from './LegendBar';\n\ninterface LegendProps {\n longValues?: [number, number];\n shortValues?: [number, number];\n bookType: BookType;\n}\n\nexport const Legend = ({\n longValues = [BOOKS_THRESHOLDS.MIN, BOOKS_THRESHOLDS.MAX],\n shortValues = [BOOKS_THRESHOLDS.MIN, BOOKS_THRESHOLDS.MAX],\n bookType,\n}: LegendProps) => {\n const { lang } = useLocale();\n\n return (\n <div className=\"lw-mx-auto lw-flex lw-w-full lw-flex-col lw-items-center lw-space-y-4 lw-
|
|
1
|
+
{"version":3,"file":"Legend.js","names":["useLocale","React","BookType","BOOKS_THRESHOLDS","LegendBar","Legend","_ref","longValues","MIN","MAX","shortValues","bookType","lang","createElement","className","label","Order","type","values"],"sources":["../../../../../src/CrowdViewWidget/components/Legend/Legend.tsx"],"sourcesContent":["import { useLocale } from '@oanda/mono-i18n';\nimport React from 'react';\n\nimport { BookType } from '../../../gql/types/graphql';\nimport { BOOKS_THRESHOLDS } from '../../constants';\nimport { LegendBar } from './LegendBar';\n\ninterface LegendProps {\n longValues?: [number, number];\n shortValues?: [number, number];\n bookType: BookType;\n}\n\nexport const Legend = ({\n longValues = [BOOKS_THRESHOLDS.MIN, BOOKS_THRESHOLDS.MAX],\n shortValues = [BOOKS_THRESHOLDS.MIN, BOOKS_THRESHOLDS.MAX],\n bookType,\n}: LegendProps) => {\n const { lang } = useLocale();\n\n return (\n <div className=\"lw-mx-auto lw-flex lw-w-full lw-flex-col lw-items-center lw-space-y-4 lw-pb-6 lw-pt-0 sm:lw-max-w-md lg:lw-max-w-xl\">\n <LegendBar\n label={lang(bookType === BookType.Order ? 'buy' : 'long')}\n type=\"long\"\n values={longValues}\n />\n <LegendBar\n label={lang(bookType === BookType.Order ? 'sell' : 'short')}\n type=\"short\"\n values={shortValues}\n />\n </div>\n );\n};\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,kBAAkB;AAC5C,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,QAAQ,QAAQ,4BAA4B;AACrD,SAASC,gBAAgB,QAAQ,iBAAiB;AAClD,SAASC,SAAS,QAAQ,aAAa;AAQvC,OAAO,MAAMC,MAAM,GAAGC,IAAA,IAIH;EAAA,IAJI;IACrBC,UAAU,GAAG,CAACJ,gBAAgB,CAACK,GAAG,EAAEL,gBAAgB,CAACM,GAAG,CAAC;IACzDC,WAAW,GAAG,CAACP,gBAAgB,CAACK,GAAG,EAAEL,gBAAgB,CAACM,GAAG,CAAC;IAC1DE;EACW,CAAC,GAAAL,IAAA;EACZ,MAAM;IAAEM;EAAK,CAAC,GAAGZ,SAAS,CAAC,CAAC;EAE5B,OACEC,KAAA,CAAAY,aAAA;IAAKC,SAAS,EAAC;EAAqH,GAClIb,KAAA,CAAAY,aAAA,CAACT,SAAS;IACRW,KAAK,EAAEH,IAAI,CAACD,QAAQ,KAAKT,QAAQ,CAACc,KAAK,GAAG,KAAK,GAAG,MAAM,CAAE;IAC1DC,IAAI,EAAC,MAAM;IACXC,MAAM,EAAEX;EAAW,CACpB,CAAC,EACFN,KAAA,CAAAY,aAAA,CAACT,SAAS;IACRW,KAAK,EAAEH,IAAI,CAACD,QAAQ,KAAKT,QAAQ,CAACc,KAAK,GAAG,MAAM,GAAG,OAAO,CAAE;IAC5DC,IAAI,EAAC,OAAO;IACZC,MAAM,EAAER;EAAY,CACrB,CACE,CAAC;AAEV,CAAC","ignoreList":[]}
|
|
@@ -9,7 +9,9 @@ export const LegendBar = _ref => {
|
|
|
9
9
|
const colors = COLOR_MAP[type];
|
|
10
10
|
return React.createElement("div", {
|
|
11
11
|
className: "lw-flex lw-w-full lw-flex-col lw-space-y-1 lw-border-border-primary"
|
|
12
|
-
}, React.createElement("
|
|
12
|
+
}, React.createElement("span", {
|
|
13
|
+
className: "lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary"
|
|
14
|
+
}, label), React.createElement("div", {
|
|
13
15
|
className: "lw-flex lw-h-2 lw-w-full lw-overflow-hidden lw-border lw-border-border-primary"
|
|
14
16
|
}, React.createElement("div", {
|
|
15
17
|
className: "lw-h-full lw-flex-1",
|
|
@@ -21,8 +23,8 @@ export const LegendBar = _ref => {
|
|
|
21
23
|
className: "lw-flex lw-w-full lw-justify-between"
|
|
22
24
|
}, React.createElement("span", {
|
|
23
25
|
className: "lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary"
|
|
24
|
-
}, values[0].toFixed(2), "%
|
|
26
|
+
}, values[0].toFixed(2), "%"), React.createElement("span", {
|
|
25
27
|
className: "lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary"
|
|
26
|
-
}, values[1].toFixed(2), "%
|
|
28
|
+
}, "\u2264 ".concat(values[1].toFixed(2)), "%")));
|
|
27
29
|
};
|
|
28
30
|
//# sourceMappingURL=LegendBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LegendBar.js","names":["React","COLOR_MAP","LegendBar","_ref","values","type","label","colors","createElement","className","style","background","concat","toFixed"],"sources":["../../../../../src/CrowdViewWidget/components/Legend/LegendBar.tsx"],"sourcesContent":["import React from 'react';\n\nimport { COLOR_MAP } from '../../constants';\n\nexport type LegendType = 'long' | 'short';\n\ninterface LegendBarProps {\n values: number[];\n type: LegendType;\n label: string;\n}\n\nexport const LegendBar = ({ values, type, label }: LegendBarProps) => {\n const colors = COLOR_MAP[type];\n\n return (\n <div className=\"lw-flex lw-w-full lw-flex-col lw-space-y-1 lw-border-border-primary\">\n <div className=\"lw-flex lw-h-2 lw-w-full lw-overflow-hidden lw-border lw-border-border-primary\">\n <div\n className=\"lw-h-full lw-flex-1\"\n data-testid=\"legend-bar-segment\"\n style={{\n background: `linear-gradient(90deg,${colors[0]} 0%, ${colors[1]} 100%)`,\n }}\n />\n </div>\n\n <div className=\"lw-flex lw-w-full lw-justify-between\">\n <span className=\"lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary\">\n {values[0].toFixed(2)}
|
|
1
|
+
{"version":3,"file":"LegendBar.js","names":["React","COLOR_MAP","LegendBar","_ref","values","type","label","colors","createElement","className","style","background","concat","toFixed"],"sources":["../../../../../src/CrowdViewWidget/components/Legend/LegendBar.tsx"],"sourcesContent":["import React from 'react';\n\nimport { COLOR_MAP } from '../../constants';\n\nexport type LegendType = 'long' | 'short';\n\ninterface LegendBarProps {\n values: number[];\n type: LegendType;\n label: string;\n}\n\nexport const LegendBar = ({ values, type, label }: LegendBarProps) => {\n const colors = COLOR_MAP[type];\n\n return (\n <div className=\"lw-flex lw-w-full lw-flex-col lw-space-y-1 lw-border-border-primary\">\n <span className=\"lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary\">\n {label}\n </span>\n <div className=\"lw-flex lw-h-2 lw-w-full lw-overflow-hidden lw-border lw-border-border-primary\">\n <div\n className=\"lw-h-full lw-flex-1\"\n data-testid=\"legend-bar-segment\"\n style={{\n background: `linear-gradient(90deg,${colors[0]} 0%, ${colors[1]} 100%)`,\n }}\n />\n </div>\n\n <div className=\"lw-flex lw-w-full lw-justify-between\">\n <span className=\"lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary\">\n {values[0].toFixed(2)}%\n </span>\n <span className=\"lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary\">\n {`≤ ${values[1].toFixed(2)}`}%\n </span>\n </div>\n </div>\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,SAAS,QAAQ,iBAAiB;AAU3C,OAAO,MAAMC,SAAS,GAAGC,IAAA,IAA6C;EAAA,IAA5C;IAAEC,MAAM;IAAEC,IAAI;IAAEC;EAAsB,CAAC,GAAAH,IAAA;EAC/D,MAAMI,MAAM,GAAGN,SAAS,CAACI,IAAI,CAAC;EAE9B,OACEL,KAAA,CAAAQ,aAAA;IAAKC,SAAS,EAAC;EAAqE,GAClFT,KAAA,CAAAQ,aAAA;IAAMC,SAAS,EAAC;EAAmE,GAChFH,KACG,CAAC,EACPN,KAAA,CAAAQ,aAAA;IAAKC,SAAS,EAAC;EAAgF,GAC7FT,KAAA,CAAAQ,aAAA;IACEC,SAAS,EAAC,qBAAqB;IAC/B,eAAY,oBAAoB;IAChCC,KAAK,EAAE;MACLC,UAAU,2BAAAC,MAAA,CAA2BL,MAAM,CAAC,CAAC,CAAC,WAAAK,MAAA,CAAQL,MAAM,CAAC,CAAC,CAAC;IACjE;EAAE,CACH,CACE,CAAC,EAENP,KAAA,CAAAQ,aAAA;IAAKC,SAAS,EAAC;EAAsC,GACnDT,KAAA,CAAAQ,aAAA;IAAMC,SAAS,EAAC;EAAmE,GAChFL,MAAM,CAAC,CAAC,CAAC,CAACS,OAAO,CAAC,CAAC,CAAC,EAAC,GAClB,CAAC,EACPb,KAAA,CAAAQ,aAAA;IAAMC,SAAS,EAAC;EAAmE,aAAAG,MAAA,CAC3ER,MAAM,CAAC,CAAC,CAAC,CAACS,OAAO,CAAC,CAAC,CAAC,GAAG,GACzB,CACH,CACF,CAAC;AAEV,CAAC","ignoreList":[]}
|