SCAL-229204 defined types for dateFormatConfig in appConfig

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,6 +30,10 @@ 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';
@@ -47,21 +52,30 @@ 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(
@@ -190,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(

package.json

@@ -1,7 +1,7 @@
 {
     "name": "@thoughtspot/ts-chart-sdk",
     "private": false,
-    "version": "0.0.2-alpha.20",
+    "version": "0.0.2-alpha.21",
     "module": "lib/index",
     "main": "lib/index",
     "types": "lib/index",

src/types/common.types.ts

@@ -250,9 +250,70 @@ export type ChartSdkCustomStylingConfig = {
     fontFaces?: Array<TSFontFace>;
 };
 
+/**
+ * Defines a set of standardized date and datetime format strings used for
+ * displaying dates and times in various formats. Each format string represents
+ * a specific date or time pattern that can be used for localized display purposes.
+ */
+
+export interface DateFormats {
+    DATE_SHORT: string;
+    DATE_SHORT_2_DIGIT_YEAR: string;
+    DATE_SHORT_WITH_HOUR: string;
+    DATE_SHORT_WITH_HOUR_WITHOUT_YEAR: string;
+    DATE_SHORT_WITH_HOUR_24: string;
+    DATE_SHORT_WITH_HOUR_24_WITHOUT_YEAR: string;
+    DATETIME_SHORT: string;
+    DATETIME_SHORT_WITHOUT_YEAR: string;
+    DATETIME_24_SHORT: string;
+    DATETIME_24_SHORT_WITH_MILLIS: string;
+    DATETIME_24_SHORT_WITH_MILLIS_WITHOUT_YEAR: string;
+    DATETIME_SHORT_WITH_SECONDS: string;
+    DATETIME_SHORT_WITH_SECONDS_WITHOUT_YEAR: string;
+    DATETIME_SHORT_WITH_MILLIS: string;
+    DATETIME_SHORT_WITH_MILLIS_WITHOUT_YEAR: string;
+    QUARTER_WITH_YEAR: string;
+    QUARTER_WITH_2_DIGIT_YEAR: string;
+    DEFAULT_TIME_FORMAT: string;
+    MONTH_WITH_YEAR: string;
+    MONTH_WITH_DAY_AND_YEAR: string;
+    MONTH_WITH_2_DIGIT_YEAR: string;
+    DAY_WITH_MONTH: string;
+    DAY_WITH_MONTH_NUM: string;
+    QUARTER: string;
+    MONTH_ONLY: string;
+    DATETIME_WITH_SHORT_OFFSET: string;
+}
+
+/**
+ * Configuration object for date formats and settings in the Chart SDK.
+ * Provides locale-specific date and string formats, constants, and custom calendars.
+ *
+ * @type ChartSdkDateFormatsConfig
+ *
+ * @property tsLocaleBasedDateFormats - Optional. A record mapping locale identifiers to date format settings,
+ *   each represented by a `DateFormats` object.
+ * @property tsLocaleBasedStringsFormats - Optional. A record mapping locale identifiers to localized string
+ *   formats, where each format is represented by a string.
+ * @property tsDateConstants - Optional. A record mapping string keys to date-related constants, often used
+ *   for standard date patterns or other fixed date-related values(mostly used to identify the case
+ *   for backend proccessed date in case of MONTH_OF_YEAR,DAY_OF_WEEK).
+ * @property tsDefinedCustomCalenders - Optional. Custom calendar configurations, which have GUID of TS defined Custom calenders.
+ * @property defaultDataSourceId - Optional. The data source identifier for the date formats, used
+ *   to specify the primary data source for TS defined custom calenders.
+ */
+
+export type ChartSdkDateFormatsConfig = {
+    tsLocaleBasedDateFormats?: Record<string, DateFormats>;
+    tsLocaleBasedStringsFormats?: Record<string, string>;
+    tsDateConstants?: Record<string, string>;
+    tsDefinedCustomCalenders?: any;
+    defaultDataSourceId?: string;
+};
+
 export interface AppConfig {
     styleConfig?: ChartSdkCustomStylingConfig;
-
+    dateFormatsConfig?: ChartSdkDateFormatsConfig;
     appOptions?: {
         isMobile?: boolean;
         isPrintMode?: boolean; // export mode on/off