Merge pull request #915 from vegaprotocol/fix/locale-formatting-for-v…

…olume Fix/locale formatting for volume
vegaprotocol · Oct 3, 2023 · 84414e3 · 84414e3
2 parents 7882cd3 + 42e5d0a
commit 84414e3
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/src/stories/data-source/json-data-source.ts b/src/stories/data-source/json-data-source.ts
@@ -70,15 +70,19 @@ const annotations: LabelAnnotation[] = [
   },
 ];
 
-export function extendCandle(candle: any, decimalPlaces: number): any {
+export function extendCandle(
+  candle: any,
+  decimalPlaces: number,
+  positionDecimalPlaces: number,
+): any {
   return {
     ...candle,
     date: new Date(candle.datetime),
     high: parseVegaDecimal(candle.high, decimalPlaces),
     low: parseVegaDecimal(candle.low, decimalPlaces),
     open: parseVegaDecimal(candle.open, decimalPlaces),
     close: parseVegaDecimal(candle.close, decimalPlaces),
-    volume: parseVegaDecimal(candle.volume, 0),
+    volume: parseVegaDecimal(candle.volume, positionDecimalPlaces),
   };
 }
 
@@ -106,7 +110,7 @@ export class JsonDataSource implements DataSource {
   ) {
     this.marketId = marketId;
     this._decimalPlaces = decimalPlaces;
-    this._positionDecimalPlaces = 0;
+    this._positionDecimalPlaces = 2;
     this.filename = filename;
     this.annotations = annotations;
   }
@@ -134,7 +138,7 @@ export class JsonDataSource implements DataSource {
     const data: any = files.get(this.filename);
 
     const candles = data[interval].candles.map((d: any) =>
-      extendCandle(d, this.decimalPlaces),
+      extendCandle(d, this.decimalPlaces, this.positionDecimalPlaces),
     );
 
     return Promise.resolve(candles);

diff --git a/src/ui/components/plot-container/plot-container.stories.tsx b/src/ui/components/plot-container/plot-container.stories.tsx
@@ -26,7 +26,9 @@ const Template: Story<PlotContainerProps> = (args) => {
 const specification: TopLevelSpec = {
   name: "main",
   data: {
-    values: json[Interval.I5M].candles.map((candle) => extendCandle(candle, 5)),
+    values: json[Interval.I5M].candles.map((candle) =>
+      extendCandle(candle, 5, 0),
+    ),
   },
   encoding: {
     x: { field: "date", type: "temporal" },

diff --git a/src/util/misc/format.ts b/src/util/misc/format.ts
@@ -51,7 +51,7 @@ export const formatter = (value: number, fractionDigits: number = 5) => {
   // otherwise new Intl.NumberFormat will throw
   fractionDigits = Math.max(0, fractionDigits);
 
-  return new Intl.NumberFormat("en-GB", {
+  return new Intl.NumberFormat("default", {
     maximumFractionDigits: fractionDigits,
     minimumFractionDigits: fractionDigits,
   }).format(value);
@@ -118,7 +118,7 @@ export function tickFormat(ticks: Date[], interval: Interval) {
  * @param decimalPlaces Number of decimal places to display
  */
 export const numberFormatter = (decimalPlaces: number): Intl.NumberFormat =>
-  new Intl.NumberFormat("en-gb", {
+  new Intl.NumberFormat("default", {
     maximumFractionDigits: decimalPlaces,
     minimumFractionDigits: decimalPlaces,
   });