npm - @oanda/labs-crowd-view-widget - Versions diffs - 1.0.44 → 1.0.45 - Mend

@oanda/labs-crowd-view-widget 1.0.44 → 1.0.45

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.

Files changed (44) hide show

package/dist/main/CrowdViewWidget/components/Chart/useCrowdViewData.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useCrowdViewData.js","names":["_client","require","_react","_getOrderPositionBooks","_getPriceCandles","_graphql","_constants","_chartUtils","processPriceCandles","priceCandlesData","_priceCandlesData$pri","priceCandles","candle","length","minPrice","maxPrice","hasValidCandles","candleMap","Map","candles","calculatedMinPrice","Number","MAX_VALUE","calculatedMaxPrice","MIN_VALUE","forEach","high","low","point","set","processOrderPositionBooks","orderPositionData","_orderPositionData$or","orderPositionBooks","filter","book","_book$buckets","buckets","map","_candle$high","filteredBuckets","bucket","sentiment","undefined","price","Math","abs","BOOKS_THRESHOLDS","MIN","get","time","JSON","stringify","validateData","_priceCandlesData$pri2","_priceCandlesData$pri3","_orderPositionData$or2","_orderPositionData$or3","hasValidPriceData","hasValidOrderData","Error","useCrowdViewData","_ref","instrument","bookType","division","granularity","loading","priceCandlesLoading","data","error","priceCandlesError","useQuery","getPriceCandles","variables","dataSource","Division","Oc","DataSource","V20","Mt5","timeSpan","getTimeSpanForGranularity","fetchPolicy","priceCandlesProcessed","useMemo","maxBookPrice","BUCKET_CONFIG","DEFAULT_WIDTH","PRICE_PADDING_MULTIPLIER","minBookPrice","orderPositionLoading","orderPositionError","getOrderPositionBooks","BookType","Order","skip","concat","message","_orderPositionData$or4","xAxisData","candlesSeriesData","open","close","bucketWidth","exports"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/useCrowdViewData.ts"],"sourcesContent":["import { useQuery } from '@apollo/client';\nimport { useMemo } from 'react';\n\nimport { getOrderPositionBooks } from '../../../gql/getOrderPositionBooks';\nimport { getPriceCandles } from '../../../gql/getPriceCandles';\nimport type {\n GetOrderPositionBooksQuery,\n GetOrderPositionBooksQueryVariables,\n GetPriceCandlesQuery,\n GetPriceCandlesQueryVariables,\n} from '../../../gql/types/graphql';\nimport { BookType, DataSource, Division } from '../../../gql/types/graphql';\nimport { BOOKS_THRESHOLDS, BUCKET_CONFIG } from '../../constants';\nimport type { UseCrowdViewDataProps, UseCrowdViewDataReturn } from './types';\nimport { getTimeSpanForGranularity } from './utils/chartUtils';\n\nconst processPriceCandles = (\n priceCandlesData: GetPriceCandlesQuery \| undefined\n) => {\n if (!priceCandlesData?.priceCandles?.candle?.length) {\n return {\n minPrice: 0,\n maxPrice: 0,\n hasValidCandles: false,\n candleMap: new Map(),\n candles: [],\n };\n }\n\n const candles = priceCandlesData.priceCandles.candle;\n let calculatedMinPrice = Number.MAX_VALUE;\n let calculatedMaxPrice = Number.MIN_VALUE;\n\n const candleMap = new Map<\n string,\n {\n point?: string;\n high?: number;\n low?: number;\n open?: number;\n close?: number;\n }\n >();\n\n candles.forEach((candle) => {\n if (!candle) return;\n\n if (candle.high > calculatedMaxPrice) {\n calculatedMaxPrice = candle.high;\n }\n if (candle.low < calculatedMinPrice) {\n calculatedMinPrice = candle.low;\n }\n\n if (candle.point) {\n candleMap.set(candle.point, candle);\n }\n });\n\n return {\n minPrice: calculatedMinPrice,\n maxPrice: calculatedMaxPrice,\n hasValidCandles: true,\n candleMap,\n candles,\n };\n};\n\nconst processOrderPositionBooks = (\n orderPositionData: GetOrderPositionBooksQuery \| undefined,\n candleMap: Map<\n string,\n {\n point?: string;\n high?: number;\n low?: number;\n open?: number;\n close?: number;\n }\n >\n) => {\n if (!orderPositionData?.orderPositionBooks?.length) {\n return [];\n }\n\n return orderPositionData.orderPositionBooks\n .filter((book): book is NonNullable<typeof book> => {\n return book !== null && book.buckets?.length > 0;\n })\n .map((book) => {\n const filteredBuckets = book.buckets\n .filter((bucket) => {\n if (\n !bucket \|\|\n bucket.sentiment === undefined \|\|\n bucket.sentiment === null \|\|\n bucket.price === undefined\n ) {\n return false;\n }\n return Math.abs(bucket.sentiment) >= BOOKS_THRESHOLDS.MIN;\n })\n .map((bucket) => ({\n price: bucket!.price!,\n sentiment: bucket!.sentiment!,\n }));\n\n const candle = candleMap.get(book.time);\n const price = candle?.high ?? null;\n\n return [book.time, price, JSON.stringify(filteredBuckets)] as [\n string,\n number,\n string,\n ];\n });\n};\n\nconst validateData = (\n priceCandlesData: GetPriceCandlesQuery \| undefined,\n orderPositionData: GetOrderPositionBooksQuery \| undefined,\n hasValidCandles: boolean\n): Error \| null => {\n const hasValidPriceData =\n (priceCandlesData?.priceCandles?.candle?.length ?? 0) >= 1;\n const hasValidOrderData =\n (orderPositionData?.orderPositionBooks?.length ?? 0) >= 1;\n\n if (!hasValidPriceData) {\n return new Error('Insufficient price candle data');\n }\n if (!hasValidOrderData) {\n return new Error('Insufficient order position data');\n }\n if (!hasValidCandles) {\n return new Error('Invalid candle data');\n }\n\n return null;\n};\n\nexport const useCrowdViewData = ({\n instrument,\n bookType,\n division,\n granularity,\n}: UseCrowdViewDataProps): UseCrowdViewDataReturn => {\n const {\n loading: priceCandlesLoading,\n data: priceCandlesData,\n error: priceCandlesError,\n } = useQuery<GetPriceCandlesQuery, GetPriceCandlesQueryVariables>(\n getPriceCandles,\n {\n variables: {\n dataSource: division === Division.Oc ? DataSource.V20 : DataSource.Mt5,\n division,\n instrument,\n granularity,\n timeSpan: getTimeSpanForGranularity(granularity),\n },\n fetchPolicy: 'no-cache',\n }\n );\n\n const priceCandlesProcessed = useMemo(\n () => processPriceCandles(priceCandlesData),\n [priceCandlesData]\n );\n\n const { minPrice, maxPrice, hasValidCandles, candleMap, candles } =\n priceCandlesProcessed;\n\n const maxBookPrice = useMemo(\n () =>\n maxPrice +\n BUCKET_CONFIG.DEFAULT_WIDTH * BUCKET_CONFIG.PRICE_PADDING_MULTIPLIER,\n [maxPrice]\n );\n\n const minBookPrice = useMemo(\n () =>\n minPrice -\n BUCKET_CONFIG.DEFAULT_WIDTH * BUCKET_CONFIG.PRICE_PADDING_MULTIPLIER,\n [minPrice]\n );\n\n const {\n loading: orderPositionLoading,\n data: orderPositionData,\n error: orderPositionError,\n } = useQuery<GetOrderPositionBooksQuery, GetOrderPositionBooksQueryVariables>(\n getOrderPositionBooks,\n {\n variables: {\n instrument,\n bookType: bookType \|\| BookType.Order,\n timeSpan: getTimeSpanForGranularity(granularity),\n granularity,\n maxBookPrice,\n minBookPrice,\n },\n fetchPolicy: 'no-cache',\n skip: priceCandlesLoading \|\| !!priceCandlesError,\n }\n );\n\n const loading = priceCandlesLoading \|\| orderPositionLoading;\n\n const orderPositionBooks = useMemo(\n () => processOrderPositionBooks(orderPositionData, candleMap),\n [orderPositionData, candleMap]\n );\n\n const error = useMemo((): Error \| null => {\n if (priceCandlesError) {\n return new Error(`Price candles error: ${priceCandlesError.message}`);\n }\n if (orderPositionError) {\n return new Error(`Order position error: ${orderPositionError.message}`);\n }\n if (loading) {\n return null;\n }\n return validateData(priceCandlesData, orderPositionData, hasValidCandles);\n }, [\n priceCandlesError,\n orderPositionError,\n loading,\n priceCandlesData,\n orderPositionData,\n hasValidCandles,\n ]);\n\n const data = useMemo(() => {\n if (!priceCandlesData \|\| !orderPositionData \|\| error) {\n return null;\n }\n\n const xAxisData = candles.map((candle) => candle?.point \|\| '');\n const candlesSeriesData: [number, number, number, number][] = candles.map(\n (candle) => [\n candle?.open \|\| 0,\n candle?.close \|\| 0,\n candle?.low \|\| 0,\n candle?.high \|\| 0,\n ]\n );\n\n return {\n xAxisData,\n candlesSeriesData,\n orderPositionBooks,\n bucketWidth: orderPositionData.orderPositionBooks?.[0]?.bucketWidth \|\| 0,\n };\n }, [priceCandlesData, orderPositionData, error, candles, orderPositionBooks]);\n\n return {\n data,\n loading,\n error: !!error,\n };\n};\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"useCrowdViewData.js","names":["_client","require","_react","_getOrderPositionBooks","_getPriceCandles","_graphql","_constants","_chartUtils","processPriceCandles","priceCandlesData","_priceCandlesData$pri","priceCandles","candle","length","minPrice","maxPrice","hasValidCandles","candleMap","Map","candles","calculatedMinPrice","Number","MAX_VALUE","calculatedMaxPrice","MIN_VALUE","forEach","high","low","point","set","processOrderPositionBooks","orderPositionData","_orderPositionData$or","orderPositionBooks","filter","book","_book$buckets","buckets","map","index","_candle$high","get","time","price","processBuckets","_orderPositionData$or2","_book$buckets2","filteredBuckets","bucket","sentiment","undefined","Math","abs","BOOKS_THRESHOLDS","MIN","validateData","_priceCandlesData$pri2","_priceCandlesData$pri3","_orderPositionData$or3","_orderPositionData$or4","hasValidPriceData","hasValidOrderData","Error","useCrowdViewData","_ref","instrument","bookType","division","granularity","loading","priceCandlesLoading","data","error","priceCandlesError","useQuery","getPriceCandles","variables","dataSource","Division","Oc","DataSource","V20","Mt5","timeSpan","getTimeSpanForGranularity","fetchPolicy","priceCandlesProcessed","useMemo","maxBookPrice","BUCKET_CONFIG","DEFAULT_WIDTH","PRICE_PADDING_MULTIPLIER","minBookPrice","orderPositionLoading","orderPositionError","getOrderPositionBooks","BookType","Order","skip","concat","message","_orderPositionData$or5","xAxisData","candlesSeriesData","open","close","bucketWidth","exports"],"sources":["../../../../../src/CrowdViewWidget/components/Chart/useCrowdViewData.ts"],"sourcesContent":["import { useQuery } from '@apollo/client';\nimport { useMemo } from 'react';\n\nimport { getOrderPositionBooks } from '../../../gql/getOrderPositionBooks';\nimport { getPriceCandles } from '../../../gql/getPriceCandles';\nimport type {\n GetOrderPositionBooksQuery,\n GetOrderPositionBooksQueryVariables,\n GetPriceCandlesQuery,\n GetPriceCandlesQueryVariables,\n} from '../../../gql/types/graphql';\nimport { BookType, DataSource, Division } from '../../../gql/types/graphql';\nimport { BOOKS_THRESHOLDS, BUCKET_CONFIG } from '../../constants';\nimport type { UseCrowdViewDataProps, UseCrowdViewDataReturn } from './types';\nimport { getTimeSpanForGranularity } from './utils/chartUtils';\n\nconst processPriceCandles = (\n priceCandlesData: GetPriceCandlesQuery \| undefined\n) => {\n if (!priceCandlesData?.priceCandles?.candle?.length) {\n return {\n minPrice: 0,\n maxPrice: 0,\n hasValidCandles: false,\n candleMap: new Map(),\n candles: [],\n };\n }\n\n const candles = priceCandlesData.priceCandles.candle;\n let calculatedMinPrice = Number.MAX_VALUE;\n let calculatedMaxPrice = Number.MIN_VALUE;\n\n const candleMap = new Map<\n string,\n {\n point?: string;\n high?: number;\n low?: number;\n open?: number;\n close?: number;\n }\n >();\n\n candles.forEach((candle) => {\n if (!candle) return;\n\n if (candle.high > calculatedMaxPrice) {\n calculatedMaxPrice = candle.high;\n }\n if (candle.low < calculatedMinPrice) {\n calculatedMinPrice = candle.low;\n }\n\n if (candle.point) {\n candleMap.set(candle.point, candle);\n }\n });\n\n return {\n minPrice: calculatedMinPrice,\n maxPrice: calculatedMaxPrice,\n hasValidCandles: true,\n candleMap,\n candles,\n };\n};\n\nconst processOrderPositionBooks = (\n orderPositionData: GetOrderPositionBooksQuery \| undefined,\n candleMap: Map<\n string,\n {\n point?: string;\n high?: number;\n low?: number;\n open?: number;\n close?: number;\n }\n >\n) => {\n if (!orderPositionData?.orderPositionBooks?.length) {\n return [];\n }\n\n return orderPositionData.orderPositionBooks\n .filter((book): book is NonNullable<typeof book> => {\n return book !== null && book.buckets?.length > 0;\n })\n .map((book, index) => {\n const candle = candleMap.get(book.time);\n const price = candle?.high ?? null;\n\n return [book.time, price, index] as [string, number, number];\n });\n};\n\nconst processBuckets = (\n orderPositionData: GetOrderPositionBooksQuery \| undefined\n) => {\n if (!orderPositionData?.orderPositionBooks?.length) {\n return [];\n }\n\n return orderPositionData.orderPositionBooks\n .filter((book): book is NonNullable<typeof book> => {\n return book !== null && book.buckets?.length > 0;\n })\n .map((book) => {\n const filteredBuckets = book.buckets\n .filter((bucket) => {\n if (\n !bucket \|\|\n bucket.sentiment === undefined \|\|\n bucket.sentiment === null \|\|\n bucket.price === undefined\n ) {\n return false;\n }\n return Math.abs(bucket.sentiment) >= BOOKS_THRESHOLDS.MIN;\n })\n .map((bucket) => ({\n price: bucket!.price!,\n sentiment: bucket!.sentiment!,\n }));\n\n return filteredBuckets;\n });\n};\n\nconst validateData = (\n priceCandlesData: GetPriceCandlesQuery \| undefined,\n orderPositionData: GetOrderPositionBooksQuery \| undefined,\n hasValidCandles: boolean\n): Error \| null => {\n const hasValidPriceData =\n (priceCandlesData?.priceCandles?.candle?.length ?? 0) >= 1;\n const hasValidOrderData =\n (orderPositionData?.orderPositionBooks?.length ?? 0) >= 1;\n\n if (!hasValidPriceData) {\n return new Error('Insufficient price candle data');\n }\n if (!hasValidOrderData) {\n return new Error('Insufficient order position data');\n }\n if (!hasValidCandles) {\n return new Error('Invalid candle data');\n }\n\n return null;\n};\n\nexport const useCrowdViewData = ({\n instrument,\n bookType,\n division,\n granularity,\n}: UseCrowdViewDataProps): UseCrowdViewDataReturn => {\n const {\n loading: priceCandlesLoading,\n data: priceCandlesData,\n error: priceCandlesError,\n } = useQuery<GetPriceCandlesQuery, GetPriceCandlesQueryVariables>(\n getPriceCandles,\n {\n variables: {\n dataSource: division === Division.Oc ? DataSource.V20 : DataSource.Mt5,\n division,\n instrument,\n granularity,\n timeSpan: getTimeSpanForGranularity(granularity),\n },\n fetchPolicy: 'no-cache',\n }\n );\n\n const priceCandlesProcessed = useMemo(\n () => processPriceCandles(priceCandlesData),\n [priceCandlesData]\n );\n\n const { minPrice, maxPrice, hasValidCandles, candleMap, candles } =\n priceCandlesProcessed;\n\n const maxBookPrice = useMemo(\n () =>\n maxPrice +\n BUCKET_CONFIG.DEFAULT_WIDTH * BUCKET_CONFIG.PRICE_PADDING_MULTIPLIER,\n [maxPrice]\n );\n\n const minBookPrice = useMemo(\n () =>\n minPrice -\n BUCKET_CONFIG.DEFAULT_WIDTH * BUCKET_CONFIG.PRICE_PADDING_MULTIPLIER,\n [minPrice]\n );\n\n const {\n loading: orderPositionLoading,\n data: orderPositionData,\n error: orderPositionError,\n } = useQuery<GetOrderPositionBooksQuery, GetOrderPositionBooksQueryVariables>(\n getOrderPositionBooks,\n {\n variables: {\n instrument,\n bookType: bookType \|\| BookType.Order,\n timeSpan: getTimeSpanForGranularity(granularity),\n granularity,\n maxBookPrice,\n minBookPrice,\n },\n fetchPolicy: 'no-cache',\n skip: priceCandlesLoading \|\| !!priceCandlesError,\n }\n );\n\n const loading = priceCandlesLoading \|\| orderPositionLoading;\n\n const orderPositionBooks = useMemo(\n () => processOrderPositionBooks(orderPositionData, candleMap),\n [orderPositionData, candleMap]\n );\n\n const buckets = useMemo(\n () => processBuckets(orderPositionData),\n [orderPositionData]\n );\n\n const error = useMemo((): Error \| null => {\n if (priceCandlesError) {\n return new Error(`Price candles error: ${priceCandlesError.message}`);\n }\n if (orderPositionError) {\n return new Error(`Order position error: ${orderPositionError.message}`);\n }\n if (loading) {\n return null;\n }\n return validateData(priceCandlesData, orderPositionData, hasValidCandles);\n }, [\n priceCandlesError,\n orderPositionError,\n loading,\n priceCandlesData,\n orderPositionData,\n hasValidCandles,\n ]);\n\n const data = useMemo(() => {\n if (!priceCandlesData \|\| !orderPositionData \|\| error) {\n return null;\n }\n\n const xAxisData = candles.map((candle) => candle?.point \|\| '');\n const candlesSeriesData: [number, number, number, number][] = candles.map(\n (candle) => [\n candle?.open \|\| 0,\n candle?.close \|\| 0,\n candle?.low \|\| 0,\n candle?.high \|\| 0,\n ]\n );\n\n return {\n buckets,\n xAxisData,\n candlesSeriesData,\n orderPositionBooks,\n bucketWidth: orderPositionData.orderPositionBooks?.[0]?.bucketWidth \|\| 0,\n };\n }, [\n priceCandlesData,\n orderPositionData,\n error,\n candles,\n orderPositionBooks,\n buckets,\n ]);\n\n return {\n data,\n loading,\n error: !!error,\n };\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/main/CrowdViewWidget/components/Chart/utils/chartUtils.js CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isDifferenceGreaterThanTwoWeeks = exports.getTimeSpanForGranularity = exports.getRectColor = exports.getLabelData = void 0;
+exports.isDifferenceGreaterThanTwoWeeks = exports.getTooltipFormatter = exports.getTimeSpanForGranularity = exports.getRectColor = exports.getLabelData = exports.formatXAxisLabel = void 0;
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
 var _graphql = require("../../../../gql/types/graphql");
 var _constants = require("../../../constants");
@@ -23,7 +23,7 @@ const getLabelData = _ref => {
     return isGreaterThanTwoWeeks ? currentDate.getDate() !== previousDate.getDate() : currentDate.getMonth() !== previousDate.getMonth();
   }).map(item => ({
     name: new Date(item).toLocaleDateString(undefined, {
-      month: 'short',
+      month: isGreaterThanTwoWeeks ? 'short' : 'long',
       day: isGreaterThanTwoWeeks ? 'numeric' : undefined
     }),
     xAxis: item,
@@ -67,4 +67,41 @@ const getGradientColor = (value, startColor, targetColor) => {
 };
 const getRectColor = sentiment => sentiment < 0 ? getGradientColor(sentiment * -1, _constants.COLOR_MAP.short[0], _constants.COLOR_MAP.short[1]) : getGradientColor(sentiment, _constants.COLOR_MAP.long[0], _constants.COLOR_MAP.long[1]);
 exports.getRectColor = getRectColor;
+const getTooltipFormatter = (params, buckets, bucketWidth, selectedPrice, labelCallback) => {
+  var _booksParam$value;
+  const arr = params;
+  const candleParam = arr[0];
+  const booksParam = arr[1];
+  const time = new Date(candleParam.axisValue);
+  const candleData = candleParam.value;
+  const booksData = (_booksParam$value = booksParam === null || booksParam === void 0 ? void 0 : booksParam.value) !== null && _booksParam$value !== void 0 ? _booksParam$value : [];
+  const bucketsIndex = booksData[2];
+  const selectedBuckets = buckets[bucketsIndex];
+  const matchedBucket = selectedBuckets === null || selectedBuckets === void 0 ? void 0 : selectedBuckets.find(_ref2 => {
+    let {
+      price
+    } = _ref2;
+    return selectedPrice >= price && selectedPrice < price + bucketWidth;
+  });
+  const showCandles = !!candleData[1] && !!candleData[2] && !!candleData[3] && !!candleData[4];
+  return "<p>".concat(time.toLocaleString(undefined, {
+    hour: '2-digit',
+    minute: '2-digit',
+    year: 'numeric',
+    day: 'numeric',
+    month: 'numeric',
+    timeZoneName: 'short'
+  }), "</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('orders'), ":</b></p>\n<p>").concat(labelCallback('price_range'), ": ").concat(matchedBucket.price, " - ").concat(Number(matchedBucket.price + bucketWidth).toFixed(4), " </p>\n<p>").concat(matchedBucket.sentiment < 0 ? labelCallback('sell_advantage') : labelCallback('buy_advantage'), ": ").concat(Math.abs(matchedBucket.sentiment), "% </p>") : '');
+};
+exports.getTooltipFormatter = getTooltipFormatter;
+const formatXAxisLabel = (value, isGreaterThanTwoWeeks) => {
+  const date = new Date(value);
+  return isGreaterThanTwoWeeks ? "".concat(date.toLocaleTimeString(undefined, {
+    hour: '2-digit',
+    minute: '2-digit'
+  })) : "".concat(_constants.CHART_CONFIG.X_AXIS_DATE_PADDING).concat(date.toLocaleDateString(undefined, {
+    day: 'numeric'
+  })).concat(_constants.CHART_CONFIG.X_AXIS_DATE_PADDING);
+};
+exports.formatXAxisLabel = formatXAxisLabel;
 //# sourceMappingURL=chartUtils.js.map

package/dist/main/CrowdViewWidget/components/Chart/utils/chartUtils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chartUtils.js","names":["_chromaJs","_interopRequireDefault","require","_graphql","_constants","e","__esModule","default","getLabelData","_ref","xAxisData","isGreaterThanTwoWeeks","filter","record","index","arr","previousTimestamp","currentDate","Date","previousDate","getDate","getMonth","map","item","name","toLocaleDateString","undefined","month","day","xAxis","y","CHART_CONFIG","HEIGHT","silent","emphasis","disabled","label","fontFamily","fontSize","position","align","formatter","exports","isDifferenceGreaterThanTwoWeeks","startDate","endDate","date1","date2","differenceInMs","Math","abs","getTime","TIME_THRESHOLDS","TWO_WEEKS_MS","getTimeSpanForGranularity","granularity","granularityTimeSpanMap","Granularity","M5","TimeSpan","TwoDays","M15","FiveDays","H1","TwentyDays","H4","NinetyDays","getGradientColor","value","startColor","targetColor","startThreshold","BOOKS_THRESHOLDS","MIN","endThreshold","MAX","colorScale","chroma","scale","domain","mode","hex","getRectColor","sentiment","COLOR_MAP","short","long"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/utils/chartUtils.ts"],"sourcesContent":["import chroma from 'chroma-js';\n\nimport { Granularity, TimeSpan } from '../../../../gql/types/graphql';\nimport {\n BOOKS_THRESHOLDS,\n CHART_CONFIG,\n COLOR_MAP,\n TIME_THRESHOLDS,\n} from '../../../constants';\nimport type { 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: 'short',\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"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"chartUtils.js","names":["_chromaJs","_interopRequireDefault","require","_graphql","_constants","e","__esModule","default","getLabelData","_ref","xAxisData","isGreaterThanTwoWeeks","filter","record","index","arr","previousTimestamp","currentDate","Date","previousDate","getDate","getMonth","map","item","name","toLocaleDateString","undefined","month","day","xAxis","y","CHART_CONFIG","HEIGHT","silent","emphasis","disabled","label","fontFamily","fontSize","position","align","formatter","exports","isDifferenceGreaterThanTwoWeeks","startDate","endDate","date1","date2","differenceInMs","Math","abs","getTime","TIME_THRESHOLDS","TWO_WEEKS_MS","getTimeSpanForGranularity","granularity","granularityTimeSpanMap","Granularity","M5","TimeSpan","TwoDays","M15","FiveDays","H1","TwentyDays","H4","NinetyDays","getGradientColor","value","startColor","targetColor","startThreshold","BOOKS_THRESHOLDS","MIN","endThreshold","MAX","colorScale","chroma","scale","domain","mode","hex","getRectColor","sentiment","COLOR_MAP","short","long","getTooltipFormatter","params","buckets","bucketWidth","selectedPrice","labelCallback","_booksParam$value","candleParam","booksParam","time","axisValue","candleData","booksData","bucketsIndex","selectedBuckets","matchedBucket","find","_ref2","price","showCandles","concat","toLocaleString","hour","minute","year","timeZoneName","Number","toFixed","formatXAxisLabel","date","toLocaleTimeString","X_AXIS_DATE_PADDING"],"sources":["../../../../../../src/CrowdViewWidget/components/Chart/utils/chartUtils.ts"],"sourcesContent":["import chroma from 'chroma-js';\n\nimport { Granularity, TimeSpan } from '../../../../gql/types/graphql';\nimport {\n BOOKS_THRESHOLDS,\n CHART_CONFIG,\n COLOR_MAP,\n TIME_THRESHOLDS,\n} from '../../../constants';\nimport type { 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: unknown,\n buckets: Array<Array<{ price: number; sentiment: number }>>,\n bucketWidth: number,\n selectedPrice: number,\n labelCallback: (key: string) => string\n) => {\n const arr = params as unknown as Array<Record<string, unknown>>;\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 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('orders')}:</b></p>\n<p>${labelCallback('price_range')}: ${matchedBucket.price} - ${Number(matchedBucket.price + bucketWidth).toFixed(4)} </p>\n<p>${matchedBucket.sentiment < 0 ? labelCallback('sell_advantage') : labelCallback('buy_advantage')}: ${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":[]}

package/dist/main/CrowdViewWidget/constants.js CHANGED Viewed

@@ -20,11 +20,12 @@ const CHART_CONFIG = exports.CHART_CONFIG = {
   WIDTH: 9999,
   X_LABEL_SIZE: 40,
   Y_LABEL_SIZE_DESKTOP: 60,
-  INITIAL_START_ZOOM: 80,
-  INITIAL_END_ZOOM: 100
+  INITIAL_START_ZOOM: 0,
+  INITIAL_END_ZOOM: 100,
+  X_AXIS_DATE_PADDING: '        '
 };
 const COLOR_MAP = exports.COLOR_MAP = {
-  long: ['#ffffff', '#fdb833'],
-  short: ['#ffffff', '#0096c7']
+  long: ['#fcedca', '#FAB313'],
+  short: ['#c8ebfa', '#309DCC']
 };
 //# sourceMappingURL=constants.js.map

package/dist/main/CrowdViewWidget/constants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"constants.js","names":["BOOKS_THRESHOLDS","exports","MIN","MAX","BUCKET_CONFIG","DEFAULT_WIDTH","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","COLOR_MAP","long","short"],"sources":["../../../src/CrowdViewWidget/constants.ts"],"sourcesContent":["export const BOOKS_THRESHOLDS = {\n MIN: 0.15,\n MAX: 0.55,\n} as const;\n\nexport const BUCKET_CONFIG = {\n DEFAULT_WIDTH: 0.0005,\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} as const;\n\nexport const COLOR_MAP = {\n long: ['#~~ffffff~~', '#~~fdb833~~'],\n short: ['#~~ffffff~~', '#~~0096c7~~'],\n} as const;\n"],"mappings":";;;;;;AAAO,MAAMA,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAG;EAC9BE,GAAG,EAAE,IAAI;EACTC,GAAG,EAAE;AACP,CAAU;AAEH,MAAMC,aAAa,GAAAH,OAAA,CAAAG,aAAA,GAAG;EAC3BC,aAAa,EAAE,MAAM;EACrBC,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;~~AACpB~~,CAAU;AAEH,MAAMC,SAAS,~~GAAAf~~,OAAA,~~CAAAe~~,SAAA,GAAG;EACvBC,IAAI,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC;EAC5BC,KAAK,EAAE,CAAC,SAAS,EAAE,SAAS;AAC9B,CAAU","ignoreList":[]}
1	+ {"version":3,"file":"constants.js","names":["BOOKS_THRESHOLDS","exports","MIN","MAX","BUCKET_CONFIG","DEFAULT_WIDTH","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"],"sources":["../../../src/CrowdViewWidget/constants.ts"],"sourcesContent":["export const BOOKS_THRESHOLDS = {\n MIN: 0.15,\n MAX: 0.55,\n} as const;\n\nexport const BUCKET_CONFIG = {\n DEFAULT_WIDTH: 0.0005,\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: 0,\n INITIAL_END_ZOOM: 100,\n X_AXIS_DATE_PADDING: ' ',\n} as const;\n\nexport const COLOR_MAP = {\n long: ['#fcedca', '#FAB313'],\n short: ['#c8ebfa', '#309DCC'],\n} as const;\n"],"mappings":";;;;;;AAAO,MAAMA,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAG;EAC9BE,GAAG,EAAE,IAAI;EACTC,GAAG,EAAE;AACP,CAAU;AAEH,MAAMC,aAAa,GAAAH,OAAA,CAAAG,aAAA,GAAG;EAC3BC,aAAa,EAAE,MAAM;EACrBC,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,CAAC;EACrBC,gBAAgB,EAAE,GAAG;EACrBC,mBAAmB,EAAE;AACvB,CAAU;AAEH,MAAMC,SAAS,GAAAhB,OAAA,CAAAgB,SAAA,GAAG;EACvBC,IAAI,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC;EAC5BC,KAAK,EAAE,CAAC,SAAS,EAAE,SAAS;AAC9B,CAAU","ignoreList":[]}

package/dist/main/translations/sources/en.json CHANGED Viewed

@@ -1,2 +1,26 @@
 {
+  "data_unavailable": "Data unavailable",
+  "no_matching_results": "No matching results",
+  "pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} of {{itemCount}} entries",
+  "order_book": "Order book",
+  "position_book": "Position book",
+  "long": "Long",
+  "short": "Short",
+  "instrument": "Instrument",
+  "granularity": "Granularity",
+  "search": "Search",
+  "5_minutes": "5 minutes",
+  "15_minutes": "15 minutes",
+  "1_hour": "1 hour",
+  "4_hours": "4 hours",
+  "candle": "Candle",
+  "open_price": "Open price",
+  "close_price": "Close price",
+  "low": "Low",
+  "high": "High",
+  "orders": "Orders",
+  "price_range": "Price range",
+  "sentiment": "Sentiment",
+  "buy_advantage": "Buy advantage",
+  "sell_advantage": "Sell advantage"
 }

package/dist/module/CrowdViewWidget/Main.js CHANGED Viewed

@@ -1,6 +1,11 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { cn, Select, Size, Tabs, useLayoutProvider } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
-import React, { useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { BookType } from '../gql/types/graphql';
 import { ChartWithData, Legend } from './components';
 import { granularitySelectConfig, navigationConfig } from './selectConfig';
@@ -9,17 +14,23 @@ const Main = _ref => {
   let {
     division
   } = _ref;
-  const instrumentSelectConfigWithDivision = getInstrumentConfigForDivision(division);
+  const {
+    lang
+  } = useLocale();
   const {
     size
   } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
   const [bookType, setBookType] = useState(BookType.Order);
+  const granularitySelectConfigWithLang = useMemo(() => granularitySelectConfig.map(opt => _objectSpread(_objectSpread({}, opt), {}, {
+    label: lang(opt.label)
+  })), [lang]);
+  const instrumentSelectConfigWithDivision = getInstrumentConfigForDivision(division);
   const [instrument, setInstrument] = useState(instrumentSelectConfigWithDivision[0]);
-  const [granularity, setGranularity] = useState(granularitySelectConfig[0]);
-  const {
-    lang
-  } = useLocale();
+  const [granularity, setGranularity] = useState(granularitySelectConfigWithLang[0]);
+  useEffect(() => {
+    setGranularity(granularitySelectConfigWithLang[0]);
+  }, [granularitySelectConfigWithLang]);
   return React.createElement(React.Fragment, null, size && React.createElement("div", {
     className: "lw-text-sm lw-tracking-normal",
     "data-testid": "crowd-view-widget"
@@ -48,7 +59,7 @@ const Main = _ref => {
       'lw-w-[280px]': isDesktop
     })
   }, React.createElement(Select, {
-    options: granularitySelectConfig,
+    options: granularitySelectConfigWithLang,
     searchPlaceholder: lang('search'),
     selectLabel: lang('granularity'),
     selectedOption: granularity,

package/dist/module/CrowdViewWidget/Main.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Main.js","names":["cn","Select","Size","Tabs","useLayoutProvider","useLocale","React","useState","BookType","ChartWithData","Legend","granularitySelectConfig","navigationConfig","getInstrumentConfigForDivision","Main","_ref","division","~~instrumentSelectConfigWithDivision~~","size","isDesktop","DESKTOP","bookType","setBookType","Order","instrument","setInstrument","granularity","setGranularity","~~lang","~~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, { 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 { MainProps } from './types';\nimport type { InstrumentId } from './types/instruments';\nimport { getInstrumentConfigForDivision } from './utils/instrumentUtils';\n\nconst Main = ({ division }: MainProps) => {\n const ~~instrumentSelectConfigWithDivision~~ ~~=\n getInstrumentConfigForDivision~~(~~division~~);\n\n const { size } = useLayoutProvider();\n const isDesktop = size === Size.DESKTOP;\n const [bookType, setBookType] = useState(BookType.Order);\n const [instrument, setInstrument] = useState(\n instrumentSelectConfigWithDivision[0]\n );\n\n const [granularity, setGranularity] = useState(~~granularitySelectConfig~~[0]);\n ~~const~~ { ~~lang~~ } ~~= useLocale(~~);\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 mobileFullWidth\n activeTab={bookType}\n handleClick={(e) => setBookType(e.currentTarget.value as BookType)}\n items={navigationConfig}\n labelCallback={lang}\n />\n <div className=\"lw-mb-6 lw-mt-12 lw-flex\">\n <div\n className={cn('lw-mr-2', {\n 'lw-w-full': !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={~~granularitySelectConfig~~}\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\n <ChartWithData\n bookType={bookType}\n division={division}\n granularity={granularity.id}\n instrument={instrument.id}\n />\n\n <Legend />\n </div>\n )}\n </>\n );\n};\n\nexport { Main };\n"],"mappings":"AAAA,SACEA,EAAE,EACFC,MAAM,EACNC,IAAI,EACJC,IAAI,EACJC,iBAAiB,QACZ,2BAA2B;AAClC,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,OAAOC,KAAK,IAAIC,QAAQ,QAAQ,OAAO;~~AAGvC~~,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,aAAa,EAAEC,MAAM,QAAQ,cAAc;AACpD,SAASC,uBAAuB,EAAEC,gBAAgB,QAAQ,gBAAgB;AAG1E,SAASC,8BAA8B,QAAQ,yBAAyB;AAExE,MAAMC,IAAI,GAAGC,IAAA,IAA6B;EAAA,IAA5B;IAAEC;EAAoB,CAAC,GAAAD,IAAA;EACnC,~~MAAME~~,~~kCAAkC~~,~~GACtCJ~~,~~8BAA8B~~,~~CAACG~~,~~QAAQ,~~CAAC;~~EAE1C~~,MAAM;~~IAAEE~~;EAAK,CAAC,~~GAAGd~~,iBAAiB,CAAC,CAAC;EACpC,~~MAAMe~~,SAAS,GAAGD,IAAI,~~KAAKhB~~,IAAI,~~CAACkB~~,OAAO;~~EACvC~~,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGf,QAAQ,CAACC,QAAQ,CAACe,KAAK,CAAC;~~EACxD~~,MAAM,~~CAACC~~,UAAU,EAAEC,aAAa,CAAC,~~GAAGlB~~,QAAQ,~~CAC1CU~~,kCAAkC,CAAC,CAAC,CACtC,CAAC;EAED,MAAM,~~CAACS~~,WAAW,EAAEC,cAAc,CAAC,~~GAAGpB~~,QAAQ,~~CAACI~~,~~uBAAuB,~~CAAC,CAAC,~~CAAC~~,CAAC;~~EAC1E~~,MAAM;~~IAAEiB~~;~~EAAK~~,CAAC,~~GAAGvB~~,~~SAAS~~,CAAC,CAAC;~~EAE5B~~,~~OACEC~~,KAAA,~~CAAAuB~~,aAAA,~~CAAAvB~~,KAAA,~~CAAAwB~~,QAAA,~~QACGZ~~,IAAI,~~IACHZ~~,KAAA,~~CAAAuB~~,aAAA;IACEE,SAAS,EAAC,+BAA+B;IACzC,eAAY;EAAmB,GAE/~~BzB~~,KAAA,~~CAAAuB~~,aAAA,~~CAAC1B~~,IAAI;~~IACH6B~~,eAAe;IACfC,SAAS,~~EAAEZ~~,QAAS;~~IACpBa~~,WAAW,EAAGC,CAAC,~~IAAKb~~,WAAW,~~CAACa~~,CAAC,CAACC,aAAa,CAACC,KAAiB,CAAE;IACnEC,KAAK,~~EAAE1B~~,gBAAiB;~~IACxB2B~~,aAAa,~~EAAEX~~;EAAK,CACrB,CAAC,~~EACFtB~~,KAAA,~~CAAAuB~~,aAAA;IAAKE,SAAS,EAAC;EAA0B,~~GACvCzB~~,KAAA,~~CAAAuB~~,aAAA;IACEE,SAAS,~~EAAE/B~~,EAAE,CAAC,SAAS,EAAE;MACvB,WAAW,EAAE,~~CAACmB~~,SAAS;MACvB,cAAc,EAAEA;IAClB,CAAC;EAAE,~~GAEHb~~,KAAA,~~CAAAuB~~,aAAA,~~CAAC5B~~,MAAM;~~IACLuC~~,OAAO,~~EAAEvB~~,kCAAmC;~~IAC5CwB~~,iBAAiB,~~EAAEb~~,IAAI,CAAC,QAAQ,CAAE;~~IAClCc~~,WAAW,~~EAAEd~~,IAAI,CAAC,YAAY,CAAE;~~IAChCe~~,cAAc,~~EAAEnB~~,UAAW;~~IAC3BoB~~,iBAAiB,EAAGC,GAAG,~~IACrBpB~~,aAAa,~~CAACoB~~,GAA0C;EACzD,CACF,CACE,CAAC,~~EACNvC~~,KAAA,~~CAAAuB~~,aAAA;IACEE,SAAS,~~EAAE/B~~,EAAE,CAAC;MACZ,WAAW,EAAE,~~CAACmB~~,SAAS;MACvB,cAAc,EAAEA;IAClB,CAAC;EAAE,~~GAEHb~~,KAAA,~~CAAAuB~~,aAAA,~~CAAC5B~~,MAAM;~~IACLuC~~,OAAO,~~EAAE7B,uBAAwB~~;~~IACjC8B~~,iBAAiB,~~EAAEb~~,IAAI,CAAC,QAAQ,CAAE;~~IAClCc~~,WAAW,~~EAAEd~~,IAAI,CAAC,aAAa,CAAE;~~IACjCe~~,cAAc,~~EAAEjB~~,WAAY;~~IAC5BkB~~,iBAAiB,EAAGC,GAAG,~~IACrBlB~~,cAAc,~~CAACkB~~,GAAyC;EACzD,CACF,CACE,CACF,CAAC,~~EAENvC~~,KAAA,~~CAAAuB~~,aAAA,~~CAACpB~~,aAAa;IACZY,QAAQ,EAAEA,QAAS;IACnBL,QAAQ,EAAEA,QAAS;~~IACnBU~~,WAAW,EAAEA,WAAW,~~CAACoB~~,EAAG;~~IAC5BtB~~,UAAU,EAAEA,UAAU,~~CAACsB~~;EAAG,CAC3B,CAAC,~~EAEFxC~~,KAAA,~~CAAAuB~~,aAAA,~~CAACnB~~,MAAM,MAAE,CACN,CAEP,CAAC;AAEP,CAAC;AAED,SAASI,IAAI","ignoreList":[]}
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 { MainProps } from './types';\nimport type { InstrumentId } from './types/instruments';\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 mobileFullWidth\n activeTab={bookType}\n handleClick={(e) => setBookType(e.currentTarget.value as BookType)}\n items={navigationConfig}\n labelCallback={lang}\n />\n <div className=\"lw-mb-6 lw-mt-12 lw-flex\">\n <div\n className={cn('lw-mr-2', {\n 'lw-w-full': !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\n <ChartWithData\n bookType={bookType}\n division={division}\n granularity={granularity.id}\n instrument={instrument.id}\n />\n\n <Legend />\n </div>\n )}\n </>\n );\n};\n\nexport { Main };\n"],"mappings":"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","ignoreList":[]}

package/dist/module/CrowdViewWidget/components/Chart/Chart.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { BaseChart, getChartTheme, Theme, useLayoutProvider } from '@oanda/labs-widget-common';
+import { useLocale } from '@oanda/mono-i18n';
 import { BarChart, CandlestickChart, CustomChart, ScatterChart } from 'echarts/charts';
 import { DataZoomInsideComponent, GraphicComponent, GridSimpleComponent, MarkPointComponent, TooltipComponent } from 'echarts/components';
 import * as echarts from 'echarts/core';
@@ -6,7 +7,7 @@ import { CanvasRenderer } from 'echarts/renderers';
 import React from 'react';
 import { CHART_CONFIG } from '../../constants';
 import { getOption } from './chartOptions';
-import { getLabelData, isDifferenceGreaterThanTwoWeeks } from './utils/chartUtils';
+import { formatXAxisLabel, getLabelData, isDifferenceGreaterThanTwoWeeks } from './utils/chartUtils';
 echarts.use([GridSimpleComponent, GraphicComponent, BarChart, CanvasRenderer, DataZoomInsideComponent, CustomChart, TooltipComponent, CandlestickChart, MarkPointComponent, ScatterChart]);
 echarts.registerTheme('dark_theme', getChartTheme(Theme.Dark));
 echarts.registerTheme('light_theme', getChartTheme(Theme.Light));
@@ -17,12 +18,15 @@ const Chart = _ref => {
   const {
     isDark
   } = useLayoutProvider();
+  const {
+    lang
+  } = useLocale();
   return React.createElement(BaseChart, {
     chartHeight: CHART_CONFIG.HEIGHT,
     echarts: echarts,
     isDark: isDark,
     lazyUpdate: true,
-    option: getOption(data, isDark),
+    option: getOption(data, isDark, lang),
     opts: {
       renderer: 'canvas'
     },
@@ -43,15 +47,7 @@ const Chart = _ref => {
         instance.setOption({
           xAxis: {
             axisLabel: {
-              formatter: value => {
-                const date = new Date(value);
-                return isGreaterThanTwoWeeks ? "".concat(date.toLocaleTimeString(undefined, {
-                  hour: '2-digit',
-                  minute: '2-digit'
-                })) : "".concat(date.toLocaleDateString(undefined, {
-                  day: 'numeric'
-                }));
-              }
+              formatter: value => formatXAxisLabel(value, isGreaterThanTwoWeeks)
             }
           },
           series: [{

package/dist/module/CrowdViewWidget/components/Chart/Chart.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Chart.js","names":["BaseChart","getChartTheme","Theme","useLayoutProvider","BarChart","CandlestickChart","CustomChart","ScatterChart","DataZoomInsideComponent","GraphicComponent","GridSimpleComponent","MarkPointComponent","TooltipComponent","echarts","CanvasRenderer","React","CHART_CONFIG","getOption","getLabelData","isDifferenceGreaterThanTwoWeeks","use","registerTheme","Dark","Light","Chart","_ref","data","isDark","createElement","chartHeight","HEIGHT","lazyUpdate","option","opts","renderer","onEvents","datazoom","_params","instance","dataZoom","startValue","endValue","isGreaterThanTwoWeeks","xAxisData","labelsData","setOption","xAxis","axisLabel","formatter","value","~~date","Date","concat","toLocaleTimeString","undefined","hour","minute","toLocaleDateString","day","~~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 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 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\n return (\n <BaseChart\n chartHeight={CHART_CONFIG.HEIGHT}\n echarts={echarts}\n isDark={isDark}\n lazyUpdate={true}\n option={getOption(data, isDark)}\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 ~~const date = new Date~~(value~~);\n return~~ isGreaterThanTwoWeeks~~\n ? `${date.toLocaleTimeString(undefined, {\n hour: '2-digit',\n minute: '2-digit',\n }~~)~~}`\n : `${date.toLocaleDateString(undefined, {\n day: 'numeric'~~,\n ~~})}`;\n },\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;~~AAElC~~,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,YAAY,EACZC,+BAA+B,QAC1B,oBAAoB;~~AAE3BN~~,OAAO,~~CAACO~~,GAAG,CAAC,~~CACVV~~,mBAAmB,EACnBD,gBAAgB,EAChBL,QAAQ,EACRU,cAAc,EACdN,uBAAuB,EACvBF,WAAW,EACXM,gBAAgB,EAChBP,gBAAgB,EAChBM,kBAAkB,EAClBJ,YAAY,CACb,CAAC;AAEFM,OAAO,~~CAACQ~~,aAAa,CAAC,YAAY,~~EAAEpB~~,aAAa,CAACC,KAAK,~~CAACoB~~,IAAI,CAAC,CAAC;~~AAC9DT~~,OAAO,~~CAACQ~~,aAAa,CAAC,aAAa,~~EAAEpB~~,aAAa,CAACC,KAAK,~~CAACqB~~,KAAK,CAAC,CAAC;AAEhE,MAAMC,KAAK,GAAGC,IAAA,IAA0B;EAAA,IAAzB;IAAEC;EAAiB,CAAC,GAAAD,IAAA;EACjC,MAAM;IAAEE;EAAO,CAAC,~~GAAGxB~~,iBAAiB,CAAC,CAAC;~~EAEtC~~,OACEY,KAAA,~~CAAAa~~,aAAA,~~CAAC5B~~,SAAS;~~IACR6B~~,WAAW,~~EAAEb~~,YAAY,~~CAACc~~,MAAO;~~IACjCjB~~,OAAO,EAAEA,OAAQ;~~IACjBc~~,MAAM,EAAEA,MAAO;~~IACfI~~,UAAU,EAAE,IAAK;IACjBC,MAAM,~~EAAEf~~,SAAS,~~CAACS~~,IAAI,EAAEC,MAAM,CAAE;~~IAChCM~~,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,~~CAACrB~~,SAAS,CAAC,CAAC;QAEzC,MAAM;~~UAAEuB~~,UAAU;UAAEC;QAAS,CAAC,GAC5BF,QAAQ,CACR,CAAC,CAAC;QAEJ,MAAMG,qBAAqB,~~GAAGvB~~,+BAA+B,CAC3DO,IAAI,~~CAACiB~~,SAAS,CAACH,UAAU,CAAC,~~EAC1Bd~~,IAAI,~~CAACiB~~,SAAS,CAACF,QAAQ,CACzB,CAAC;QAED,MAAMG,UAAU,~~GAAG1B~~,YAAY,CAAC;~~UAC9ByB~~,SAAS,~~EAAEjB~~,IAAI,~~CAACiB~~,SAAS;UACzBD;QACF,CAAC,CAAC;QAEFJ,QAAQ,CAACO,SAAS,CAAC;UACjBC,KAAK,EAAE;YACLC,SAAS,EAAE;cACTC,SAAS,EAAGC,KAAa,~~IAAK;gBAC5B~~,~~MAAMC~~,~~IAAI~~,~~GAAG,IAAIC,IAAI,CAACF,~~KAAK,~~CAAC;gBAC5B~~,~~OAAOP,~~qBAAqB~~,MAAAU,MAAA,CACrBF,IAAI,CAACG,kBAAkB,CAACC,SAAS,EAAE~~;~~kBACpCC,IAAI,EAAE,SAAS~~;~~kBACfC,MAAM,EAAE;gBACV,CAAC,CAAC,OAAAJ,MAAA,CACCF,IAAI,CAACO,kBAAkB,CAACH,SAAS,EAAE;kBACpCI,GAAG,EAAE;gBACP,CAAC,CAAC,CAAE;cACV;YACF;~~UACF,CAAC;~~UACDC~~,MAAM,EAAE,CACN;YACEC,EAAE,EAAE,aAAa;YACjBC,SAAS,EAAE;~~cACTnC~~,IAAI,~~EAAEkB~~;YACR;UACF,CAAC;QAEL,CAAC,CAAC;MACJ;IACF;EAAE,CACH,CAAC;AAEN,CAAC;AAED,~~SAASpB~~,KAAK","ignoreList":[]}
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,IAA0B;EAAA,IAAzB;IAAEC;EAAiB,CAAC,GAAAD,IAAA;EACjC,MAAM;IAAEE;EAAO,CAAC,GAAG1B,iBAAiB,CAAC,CAAC;EACtC,MAAM;IAAE2B;EAAK,CAAC,GAAG1B,SAAS,CAAC,CAAC;EAE5B,OACEY,KAAA,CAAAe,aAAA,CAAC/B,SAAS;IACRgC,WAAW,EAAEf,YAAY,CAACgB,MAAO;IACjCnB,OAAO,EAAEA,OAAQ;IACjBe,MAAM,EAAEA,MAAO;IACfK,UAAU,EAAE,IAAK;IACjBC,MAAM,EAAEjB,SAAS,CAACU,IAAI,EAAEC,MAAM,EAAEC,IAAI,CAAE;IACtCM,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,CAACvB,SAAS,CAAC,CAAC;QAEzC,MAAM;UAAEyB,UAAU;UAAEC;QAAS,CAAC,GAC5BF,QAAQ,CACR,CAAC,CAAC;QAEJ,MAAMG,qBAAqB,GAAGxB,+BAA+B,CAC3DO,IAAI,CAACkB,SAAS,CAACH,UAAU,CAAC,EAC1Bf,IAAI,CAACkB,SAAS,CAACF,QAAQ,CACzB,CAAC;QAED,MAAMG,UAAU,GAAG3B,YAAY,CAAC;UAC9B0B,SAAS,EAAElB,IAAI,CAACkB,SAAS;UACzBD;QACF,CAAC,CAAC;QAEFJ,QAAQ,CAACO,SAAS,CAAC;UACjBC,KAAK,EAAE;YACLC,SAAS,EAAE;cACTC,SAAS,EAAGC,KAAa,IACvBjC,gBAAgB,CAACiC,KAAK,EAAEP,qBAAqB;YACjD;UACF,CAAC;UACDQ,MAAM,EAAE,CACN;YACEC,EAAE,EAAE,aAAa;YACjBC,SAAS,EAAE;cACT3B,IAAI,EAAEmB;YACR;UACF,CAAC;QAEL,CAAC,CAAC;MACJ;IACF;EAAE,CACH,CAAC;AAEN,CAAC;AAED,SAASrB,KAAK","ignoreList":[]}

package/dist/module/CrowdViewWidget/components/Chart/chartOptions.js CHANGED Viewed

@@ -5,14 +5,16 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { colorPalette, getGridLines, getLineCommons } from '@oanda/labs-widget-common';
 import { CHART_CONFIG } from '../../constants';
-import { getLabelData, getRectColor, isDifferenceGreaterThanTwoWeeks } from './utils/chartUtils';
-export const getOption = (_ref, isDark) => {
+import { formatXAxisLabel, getLabelData, getRectColor, getTooltipFormatter, isDifferenceGreaterThanTwoWeeks } from './utils/chartUtils';
+export const getOption = (_ref, isDark, labelCallback) => {
   let {
     xAxisData,
     candlesSeriesData,
     orderPositionBooks,
-    bucketWidth
+    bucketWidth,
+    buckets
   } = _ref;
+  let selectedPrice;
   const visibleXAxisData = xAxisData.slice(xAxisData.length * CHART_CONFIG.INITIAL_START_ZOOM / 100, xAxisData.length * CHART_CONFIG.INITIAL_END_ZOOM / 100);
   const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(visibleXAxisData[0], visibleXAxisData[visibleXAxisData.length - 1]);
   const labelsData = getLabelData({
@@ -38,28 +40,41 @@ export const getOption = (_ref, isDark) => {
     tooltip: {
       trigger: 'axis',
       axisPointer: {
-        type: 'cross'
-      }
+        type: 'cross',
+        axis: 'x',
+        label: {
+          formatter: params => {
+            if (params.axisDimension === 'y') {
+              selectedPrice = Number(params.value);
+              return Number(params.value).toFixed(5);
+            }
+            if (params.axisDimension === 'x') {
+              const date = new Date(params.value);
+              return date.toLocaleString(undefined, {
+                hour: '2-digit',
+                minute: '2-digit',
+                day: 'numeric',
+                month: 'short'
+              });
+            }
+            return null;
+          }
+        }
+      },
+      confine: true,
+      formatter: params => getTooltipFormatter(params, buckets, bucketWidth, selectedPrice, labelCallback)
     },
     xAxis: {
       type: 'category',
       data: xAxisData,
+      splitNumber: 1,
       axisTick: {
         show: false
       },
       axisLabel: {
         padding: [8, 16, 8, 16],
         margin: 0,
-        showMinLabel: false,
-        formatter: value => {
-          const date = new Date(value);
-          return isGreaterThanTwoWeeks ? "".concat(date.toLocaleTimeString(undefined, {
-            hour: '2-digit',
-            minute: '2-digit'
-          })) : "".concat(date.toLocaleDateString(undefined, {
-            day: 'numeric'
-          }));
-        }
+        formatter: value => formatXAxisLabel(value, isGreaterThanTwoWeeks)
       }
     },
     yAxis: {
@@ -99,7 +114,8 @@ export const getOption = (_ref, isDark) => {
       clip: true,
       renderItem: (_params, api) => {
         const xVal = api.value(0);
-        const metaValues = JSON.parse(api.value(2));
+        const bucketIndex = api.value(2);
+        const metaValues = buckets[bucketIndex];
         const [rectWidth, rectHeight] = api.size([0, bucketWidth]);
         const items = metaValues.map(_ref2 => {
           let {
@@ -111,13 +127,12 @@ export const getOption = (_ref, isDark) => {
             type: 'rect',
             shape: {
               x: start[0] - rectWidth / 2,
-              y: start[1],
+              y: start[1] - rectHeight,
               width: rectWidth,
               height: rectHeight
             },
             style: {
-              fill: getRectColor(sentiment),
-              opacity: 0.7
+              fill: getRectColor(sentiment)
             },
             silent: true,
             emphasisDisabled: true

package/dist/module/CrowdViewWidget/components/Chart/chartOptions.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chartOptions.js","names":["colorPalette","getGridLines","getLineCommons","CHART_CONFIG","getLabelData","getRectColor","isDifferenceGreaterThanTwoWeeks","getOption","_ref","isDark","xAxisData","candlesSeriesData","orderPositionBooks","bucketWidth","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","xAxis","data","axisTick","show","axisLabel","padding","margin","showMinLabel","formatter","value","date","Date","concat","toLocaleTimeString","undefined","hour","minute","toLocaleDateString","day","yAxis","position","min","val","max","axisLine","showMaxLabel","series","id","itemStyle","color","raspberryLight","color0","bottleGreenLight","markPoint","symbol","symbolSize","name","silent","clip","renderItem","_params","api","xVal","metaValues","JSON","parse","rectWidth","rectHeight","size","items","map","_ref2","price","sentiment","coord","shape","x","y","width","height","style","fill","opacity","emphasisDisabled","children","grid","top","left","right","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 { GetOptionType } from './types';\nimport {\n getLabelData,\n getRectColor,\n isDifferenceGreaterThanTwoWeeks,\n} from './utils/chartUtils';\n\n// @ts-expect-error\nexport const getOption: GetOptionType = (\n { xAxisData, candlesSeriesData, orderPositionBooks, bucketWidth },\n isDark\n) => {\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 },\n },\n xAxis: {\n type: 'category',\n data: xAxisData,\n axisTick: {\n show: false,\n },\n axisLabel: {\n padding: [8, 16, 8, 16],\n margin: 0,\n showMinLabel: false,\n formatter: (value) => {\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 : `${date.toLocaleDateString(undefined, {\n day: 'numeric',\n })}`;\n },\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 },\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 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 metaValues = JSON.parse(api.value(2) as string);\n\n const [rectWidth, rectHeight] = api.size!([\n 0,\n bucketWidth,\n ]) as number[];\n\n const items = metaValues.map(\n ({ price, sentiment }: { price: number; sentiment: number }) => {\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],\n width: rectWidth,\n height: rectHeight,\n },\n style: {\n fill: getRectColor(sentiment),\n opacity: 0.7,\n },\n silent: true,\n emphasisDisabled: true,\n };\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","labelCallback","xAxisData","candlesSeriesData","orderPositionBooks","bucketWidth","buckets","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 { 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 { xAxisData, candlesSeriesData, orderPositionBooks, bucketWidth, buckets },\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(5);\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 ),\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 },\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 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(\n ({ price, sentiment }: { price: number; sentiment: number }) => {\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,\n height: rectHeight,\n },\n style: {\n fill: getRectColor(sentiment),\n },\n silent: true,\n emphasisDisabled: true,\n };\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":[]}

package/dist/module/CrowdViewWidget/components/Chart/types.js.map CHANGED Viewed

	@@ -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';\n\nexport interface UseCrowdViewDataProps {\n instrument: string;\n bookType: BookType;\n division: Division;\n granularity: Granularity;\n}\n\ninterface CrowdViewData {\n xAxisData: string[];\n candlesSeriesData: [number, number, number, number][];\n orderPositionBooks: ([string, number, ~~string~~] \| null)[];\n bucketWidth: number;\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) => EChartsOption;\n\nexport interface ChartProps {\n data: CrowdViewData;\n}\n\nexport interface ChartWithDataProps {\n bookType: BookType;\n division: Division;\n instrument: string;\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';\n\nexport interface UseCrowdViewDataProps {\n instrument: string;\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, number] \| null)[];\n bucketWidth: number;\n buckets: { price: number; sentiment: number }[][];\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: string;\n granularity: Granularity;\n}\n\nexport interface GetLabelsDataProps {\n xAxisData: string[];\n isGreaterThanTwoWeeks: boolean;\n}\n"],"mappings":"","ignoreList":[]}