SCAL-192739 Added Number Formatting Utils

example/custom-bar-chart/custom-chart.ts

@@ -9,6 +9,7 @@
  */
 
 import {
+    AppConfig,
     ChartColumn,
     ChartConfig,
     ChartModel,
@@ -17,9 +18,9 @@ import {
     ColumnType,
     CustomChartContext,
     DataPointsArray,
-    dateFormatter,
     getCfForColumn,
     getChartContext,
+    getCustomCalendarGuidFromColumn,
     isDateColumn,
     isDateNumColumn,
     PointVal,
@@ -29,31 +30,52 @@ import {
     VisualProps,
 } from '@thoughtspot/ts-chart-sdk';
 import { ChartConfigEditorDefinition } from '@thoughtspot/ts-chart-sdk/src';
+import {
+    generateMapOptions,
+    getDataFormatter,
+} from '@thoughtspot/ts-chart-sdk/src/utils/formatting-util';
 import Chart from 'chart.js/auto';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 import _ from 'lodash';
-import { availableColor, getBackgroundColor, getPlotLinesAndBandsFromConditionalFormatting, visualPropKeyMap } from './custom-chart.utils';
-import { createPlotbandPlugin, createPlotlinePlugin } from './custom-chart-plugins';
+import {
+    availableColor,
+    getBackgroundColor,
+    getPlotLinesAndBandsFromConditionalFormatting,
+    visualPropKeyMap,
+} from './custom-chart.utils';
+import {
+    createPlotbandPlugin,
+    createPlotlinePlugin,
+} from './custom-chart-plugins';
 
 Chart.register(ChartDataLabels);
 
 let globalChartReference: Chart;
 
+let appConfigGlobal: AppConfig;
+
 const exampleClientState = {
     id: 'chart-id',
     name: 'custom-bar-chart',
     library: 'chartJs',
 };
 
 function getDataForColumn(column: ChartColumn, dataArr: DataPointsArray) {
+    const formatter = getDataFormatter(column, { isMillisIncluded: false });
     const idx = _.findIndex(dataArr.columns, (colId) => column.id === colId);
-    return _.map(dataArr.dataValue, (row) => {
+    const dataForCol = _.map(dataArr.dataValue, (row) => {
         const colValue = row[idx];
-        if (isDateColumn(column) || isDateNumColumn(column)) {
-            return dateFormatter(colValue, column);
-        }
         return colValue;
     });
+    const options = generateMapOptions(appConfigGlobal, column, dataForCol);
+    const formattedValuesForData = _.map(dataArr.dataValue, (row) => {
+        const colValue = row[idx];
+        if (getCustomCalendarGuidFromColumn(column))
+            return formatter(colValue.v.s, options);
+        return formatter(colValue, options);
+    });
+
+    return formattedValuesForData;
 }
 
 function getColumnDataModel(
@@ -182,6 +204,7 @@ function insertCustomFont(customFontFaces) {
 function render(ctx: CustomChartContext) {
     const chartModel = ctx.getChartModel();
     const appConfig = ctx.getAppConfig();
+    appConfigGlobal = appConfig;
 
     ctx.emitEvent(ChartToTSEvent.UpdateVisualProps, {
         visualProps: JSON.parse(
@@ -487,6 +510,16 @@ const renderChart = async (ctx: CustomChartContext): Promise<void> => {
         },
         allowedConfigurations: {
             allowColumnConditionalFormatting: true,
+            allowMeasureNamesAndValues: true,
+        },
+        chartConfigParameters: {
+            measureNameValueColumns: {
+                enableMeasureNameColumn: true,
+                enableMeasureValueColumn: true,
+                measureNameColumnAlias: 'Name',
+                measureValueColumnAlias: 'Value',
+            },
+            batchSizeLimit: 20000,
         },
     });