@genesislcap/pbc-reporting-ui 15.19.0 → 15.19.1

package/src/new/main/edit-config/data-transforms-derived-fields/data-transforms.helpers.ts

@@ -1,371 +0,0 @@
-import type { DataTransformRendererParams } from '../../../components/renderers/data-transform-renderer';
-import type { DatasourceName } from '../../../store';
-import { actions, selectors } from '../../../store';
-import type { Genesis } from '../../../types';
-import { getDefaultFormat } from '../../../utils/format-utils';
-import {
-  GridColumnNames,
-  datasourceNameFromDisplay,
-} from '../shared/datasource-data-base-component.helpers.ts';
-import {
-  BaseFormatOptions,
-  DataTransformData,
-  DateLocaleFormats,
-  DateMonthFormats,
-  DateTimeFormats,
-  DateTimeTokens,
-  DisplayConfigurationRow,
-  FormatTypes,
-  LocaleDateOrderMap,
-  NumericFormats,
-  NumericCurrencies,
-  NumericFieldTypes,
-} from './data-transforms.types';
-
-// Re-export getDefaultFormat for use in tests
-export { getDefaultFormat };
-
-// export const lookupDataTransform =
-//   (exprBuilderFields: ExpressionBuilderTypes.Field[]) =>
-//   (data: DataTransformData): DataTransformData => {
-//     const key = datasourceNameFromDisplay(data[GridColumnNames.Datasource]);
-//     const maybeExpr = selectors.datasourceConfig.getRowTransform(
-//       key,
-//       data[GridColumnNames.ColumnName],
-//     );
-//     return {
-//       ...data,
-//       [GridColumnNames.DataTransform]: {
-//         fields: exprBuilderFields,
-//         ...(maybeExpr ? { model: maybeExpr } : {}),
-//         partialRuleValidationWarning: true,
-//       },
-//     };
-//   };
-
-/**
- * Adds format configuration info from store to the row data
- */
-export function lookupColumnFormat(data: DataTransformData): DataTransformData {
-  const key = datasourceNameFromDisplay(data[GridColumnNames.Datasource]);
-  const format =
-    selectors.datasourceConfig.getDatasource(key).TRANSFORMER_CONFIGURATION.COLUMN_FORMATS?.[
-      data[GridColumnNames.ColumnName]
-    ];
-
-  return {
-    ...data,
-    [GridColumnNames.Format]: format || '',
-  };
-}
-
-// getDefaultFormat moved to utils/format-utils.ts to break circular dependency
-
-/**
- * Sets default formats for included fields in a datasource based on their types
- * This should be called after datasource initialization when schema information is available
- */
-export const setDefaultFormatsForDatasource = (
-  datasourceName: DatasourceName,
-  schema: Genesis.JSONSchema7,
-) => {
-  if (!schema.properties) return;
-
-  if (selectors.baseConfig.getConfig().OUTPUT_FORMAT === 'XLSX') {
-    return;
-  }
-
-  const datasource = selectors.datasourceConfig.getDatasource(datasourceName);
-  const includedColumns = datasource?.TRANSFORMER_CONFIGURATION?.INCLUDE_COLUMNS ?? [];
-
-  Object.entries(schema.properties).forEach(([fieldName, fieldSchema]) => {
-    // Only set default format if the column is included
-    if (includedColumns.includes(fieldName)) {
-      const genesisType = (fieldSchema as any).genesisType as Genesis.GenesisFieldTypes;
-      if (genesisType) {
-        const defaultFormat = getDefaultFormat(genesisType);
-        if (defaultFormat) {
-          actions.datasourceConfig.setColumnFormat({
-            key: datasourceName,
-            column: fieldName,
-            format: defaultFormat,
-          });
-        }
-      }
-    }
-  });
-};
-
-export const valueExprCellRendereronChange =
-  (datasourceKey: DatasourceName): DataTransformRendererParams['onChange'] =>
-  (value, params) => {
-    const modelOrNull = value.model;
-    if (modelOrNull) {
-      actions.datasourceConfig.setColumnTransform({
-        key: datasourceKey,
-        column: params.data![GridColumnNames.ColumnName],
-        expression: modelOrNull,
-      });
-    } else {
-      actions.datasourceConfig.deleteColumnTransform({
-        key: datasourceKey,
-        column: params.data![GridColumnNames.ColumnName],
-      });
-    }
-  };
-
-export const getDateSeparator = (data: DisplayConfigurationRow) => {
-  // Check if this is a date/datetime type with month property
-  if (data.type === FormatTypes.Date || data.type === FormatTypes.Datetime) {
-    const dateData = data as { month?: DateMonthFormats };
-    if (dateData.month === DateMonthFormats.Short || dateData.month === DateMonthFormats.Long) {
-      return ' ';
-    }
-  }
-
-  if (data.format === DateLocaleFormats.US) {
-    return '-';
-  }
-  return '/';
-};
-
-export const mapToDateFormat = (data: DisplayConfigurationRow) => {
-  const dateOrder =
-    data.format === DateLocaleFormats.Unformatted
-      ? LocaleDateOrderMap.Unformatted
-      : LocaleDateOrderMap[data.format];
-
-  const dateParts: string[] = [];
-  const timeParts: string[] = [];
-
-  dateOrder.forEach((part) => {
-    const partValue = data[part as keyof BaseFormatOptions];
-    if (partValue && DateTimeTokens[part]?.[partValue]) {
-      dateParts.push(DateTimeTokens[part]?.[partValue]);
-    }
-  });
-  if (data.type === 'DATETIME' && data.hour !== DateTimeFormats.Hide) {
-    timeParts.push(data.format === DateLocaleFormats.UK ? DateTimeTokens.hour[data.hour] : 'hh');
-  }
-  ['minute', 'second'].forEach((part) => {
-    const partValue = data[part as keyof BaseFormatOptions];
-    if (partValue && DateTimeTokens[part]?.[partValue]) {
-      timeParts.push(DateTimeTokens[part]?.[partValue]);
-    }
-  });
-
-  const timeFormat =
-    timeParts.length > 0
-      ? `${timeParts.join(':')}${data.format === DateLocaleFormats.US ? ' a' : ''}`
-      : '';
-
-  return dateParts.join(getDateSeparator(data)) + (timeFormat.length > 0 ? ` ${timeFormat}` : '');
-};
-
-export const determineDateLocaleFormat = (formatString: string): DateLocaleFormats => {
-  if (/^(M|MM|MMM|MMMM)|hh|a|-/.test(formatString)) {
-    return DateLocaleFormats.US;
-  }
-  if (formatString.includes('/') || /^(d|dd)/.test(formatString)) {
-    return DateLocaleFormats.UK;
-  }
-  return DateLocaleFormats.Unformatted;
-};
-
-export const getDateConfig = (formatString: string) => {
-  const config: any = {};
-  const tokens = formatString.match(/(yyyy|yy|MMMM|MMM|MM|M|dd|d|HH|hh|mm|ss)/g) || [];
-  for (const token of tokens) {
-    const match = FormatToConfigTokens[token];
-    if (match) {
-      config[match.field] = match.value;
-    }
-  }
-  return config;
-};
-const validTokensList = [
-  'yyyy',
-  'yy',
-  'MMMM',
-  'MMM',
-  'MM',
-  'M',
-  'd',
-  'dd',
-  'HH',
-  'hh',
-  'mm',
-  'ss',
-  'a',
-];
-export const validateFormatString = (formatString: string) => {
-  const allUsed = formatString.match(/[a-zA-Z]+/g) || [];
-  return allUsed.filter((token) => !validTokensList.includes(token));
-};
-
-export const transformFromFormatString = (
-  formatString: string,
-  type: FormatTypes.Date | FormatTypes.Datetime,
-) => {
-  const dateConfig: BaseFormatOptions = {
-    type,
-    format: !formatString ? DateLocaleFormats.Unformatted : determineDateLocaleFormat(formatString),
-  };
-
-  if (!formatString) {
-    return type === FormatTypes.Date
-      ? { ...dateConfig, ...getDateConfig('dd/MM/yyyy') }
-      : { ...dateConfig, ...getDateConfig('dd/MM/yyyy HH:mm:ss') };
-  }
-
-  const invalidTokens = validateFormatString(formatString);
-  if (invalidTokens.length > 0) {
-    throw new Error(`Invalid format string: Unrecognized tokens ${invalidTokens.join(', ')}`);
-  }
-  const config = getDateConfig(formatString);
-
-  if (type === FormatTypes.Datetime) {
-    if (!config.hour) config.hour = DateTimeFormats.Hide;
-    if (!config.minute) config.minute = DateTimeFormats.Hide;
-    if (!config.second) config.second = DateTimeFormats.Hide;
-  }
-
-  return { ...dateConfig, ...config };
-};
-
-const FormatToConfigTokens = Object.entries(DateTimeTokens).reduce(
-  (acc, [field, values]) => {
-    for (const [key, token] of Object.entries(values)) {
-      if ((token === 'HH' || token === 'hh') && field === 'hour') {
-        acc[token] = { field, value: DateTimeFormats.Show };
-      } else {
-        acc[token] = { field, value: key };
-      }
-    }
-    return acc;
-  },
-  {} as Record<string, { field: string; value: string }>,
-);
-
-export { FormatToConfigTokens };
-
-/**
- * Transforms a numeric format string back to the object structure used by the number format modal
- * This is the inverse of mapToNumberFormat
- */
-export const transformFromNumberFormatString = (
-  formatString: string,
-  type: NumericFieldTypes,
-): BaseFormatOptions => {
-  if (!formatString) {
-    return {
-      type,
-      format: NumericFormats.Unformatted,
-    };
-  }
-
-  const numericConfig: BaseFormatOptions = {
-    type,
-    format: NumericFormats.Unformatted,
-  };
-
-  // Check for currency rounded format first (no decimal places)
-  if (formatString.match(/^[£$€¥]#,##0$/)) {
-    numericConfig.format = NumericFormats.CurrencyRounded;
-    // Determine currency from symbol
-    if (formatString.startsWith('$')) numericConfig.currency = NumericCurrencies.US;
-    else if (formatString.startsWith('£')) numericConfig.currency = NumericCurrencies.UK;
-    else if (formatString.startsWith('€')) numericConfig.currency = NumericCurrencies.EU;
-    else if (formatString.startsWith('¥')) numericConfig.currency = NumericCurrencies.CN;
-  } else if (formatString.startsWith('$')) {
-    numericConfig.format = NumericFormats.Currency;
-    numericConfig.currency = NumericCurrencies.US;
-  } else if (formatString.startsWith('£')) {
-    numericConfig.format = NumericFormats.Currency;
-    numericConfig.currency = NumericCurrencies.UK;
-  } else if (formatString.startsWith('€')) {
-    numericConfig.format = NumericFormats.Currency;
-    numericConfig.currency = NumericCurrencies.EU;
-  } else if (formatString.startsWith('¥')) {
-    numericConfig.format = NumericFormats.Currency;
-    numericConfig.currency = NumericCurrencies.CN;
-  } else if (formatString.endsWith('%')) {
-    numericConfig.format = NumericFormats.Percent;
-  } else if (formatString.includes('#,##0')) {
-    numericConfig.format = NumericFormats.Financial;
-  } else if (formatString.match(/^#(\.#+)?$/)) {
-    numericConfig.format = NumericFormats.SimpleDecimal;
-  } else {
-    // Default to unformatted if we can't parse it
-    return numericConfig;
-  }
-
-  // Extract decimal places from the format string
-  const decimalMatch = formatString.match(/\.(#+)/);
-  if (decimalMatch) {
-    numericConfig.decimalPlaces = decimalMatch[1].length;
-  }
-
-  return numericConfig;
-};
-
-export const mapToNumberFormat = (
-  format: NumericFormats,
-  decimalPlaces?: number,
-  currency?: NumericCurrencies,
-): string => {
-  switch (format) {
-    case NumericFormats.Financial:
-      // Financial format: #,##0.## (e.g., 1,000.12, 1,000.5, 1,000)
-      const decimalPattern =
-        decimalPlaces !== undefined && decimalPlaces > 0 ? '.' + '#'.repeat(decimalPlaces) : '';
-      return `#,##0${decimalPattern}`;
-
-    case NumericFormats.SimpleDecimal:
-      // Simple decimal format: #.## (e.g., 123.45, 123.5, 123)
-      const simpleDecimalPattern =
-        decimalPlaces !== undefined && decimalPlaces > 0 ? '.' + '#'.repeat(decimalPlaces) : '';
-      return `#${simpleDecimalPattern}`;
-
-    case NumericFormats.Percent:
-      // Percent format: ##.##% (e.g., 10.12%, 10.5%)
-      const percentDecimalPattern =
-        decimalPlaces !== undefined && decimalPlaces > 0 ? '.' + '#'.repeat(decimalPlaces) : '';
-      return `##${percentDecimalPattern}%`;
-
-    case NumericFormats.Currency:
-      // Currency format: $#,##0.## (e.g., $1,000.12, $1,000.5)
-      const currencyDecimalPattern =
-        decimalPlaces !== undefined && decimalPlaces > 0 ? '.' + '#'.repeat(decimalPlaces) : '';
-      const currencySymbol = getCurrencySymbol(currency);
-      return `${currencySymbol}#,##0${currencyDecimalPattern}`;
-
-    case NumericFormats.CurrencyRounded:
-      // Currency rounded format: $#,##0 (e.g., $1,000)
-      const currencySymbolRounded = getCurrencySymbol(currency);
-      return `${currencySymbolRounded}#,##0`;
-
-    case NumericFormats.Unformatted:
-    default:
-      // Unformatted: no pattern
-      return '';
-  }
-};
-
-/**
- * Gets the currency symbol based on the currency type
- */
-const getCurrencySymbol = (currency?: NumericCurrencies): string => {
-  switch (currency) {
-    case NumericCurrencies.US:
-      return '$';
-    case NumericCurrencies.UK:
-      return '£';
-    case NumericCurrencies.EU:
-      return '€';
-    case NumericCurrencies.CN:
-      return '¥';
-    default:
-      return '$'; // Default to US dollar
-  }
-};

package/src/new/main/edit-config/data-transforms-derived-fields/data-transforms.styles.ts

@@ -1,22 +0,0 @@
-import { css } from '@genesislcap/web-core';
-
-export const styles = css`
-  div.grid-container {
-    height: calc(var(--constrained-height) - 160px);
-    width: 100%;
-  }
-
-  div.grid-container.error {
-    cursor: not-allowed;
-  }
-
-  div.error rapid-grid-pro {
-    pointer-events: none;
-    opacity: 80%;
-  }
-
-  rapid-grid-pro::part(grid) {
-    --base-height-multiplier: 9;
-    --ag-selected-row-background-color: transparent !important;
-  }
-`;

package/src/new/main/edit-config/data-transforms-derived-fields/data-transforms.template.ts

@@ -1,21 +0,0 @@
-import { classNames, html, ref } from '@genesislcap/web-core';
-import type { DataTransformsAndDerivedFields } from './data-transforms';
-import { DateFormatModal } from './date-format-modal';
-import { NumberFormatModal } from './number-format-modal/number-format-modal';
-
-DateFormatModal;
-NumberFormatModal;
-
-export const template = html<DataTransformsAndDerivedFields>`
-  <div class="grid-container ${(x) => classNames(['error', x.dataError])}">
-    <rapid-grid-pro
-      class="${(x) => classNames(['error', x.dataError])}"
-      data-test-id="datasource-config-transform-data-grid"
-      :gridOptions=${(x) => x.getGridOptions()}
-      :rowData=${(x) => x.fieldData}
-      grid-autosizing
-    ></rapid-grid-pro>
-  </div>
-  <date-format-modal ${ref('dateFormatModal')}></date-format-modal>
-  <number-format-modal ${ref('numberFormatModal')}></number-format-modal>
-`;

package/src/new/main/edit-config/data-transforms-derived-fields/data-transforms.ts

@@ -1,162 +0,0 @@
-import { ColDef } from '@ag-grid-community/core';
-import { GridOptionsConfig } from '@genesislcap/grid-pro';
-import { customElement, html } from '@genesislcap/web-core';
-import { actions, selectors } from '../../../store';
-import { ReportingEvents } from '../../../utils/event-map';
-import { buttonCellRenderer } from '../../../utils/renderer';
-import {
-  DatasourceDataBaseComponent,
-  GridColumnNames,
-  lookupColumnIsIncluded,
-  pathParameters,
-  GridRowData,
-  datasourceNameFromDisplay,
-  orderRowsByIncludeColumns,
-} from '../shared';
-import {
-  lookupColumnFormat,
-  transformFromFormatString,
-  transformFromNumberFormatString,
-} from './data-transforms.helpers';
-import { styles } from './data-transforms.styles';
-import { template } from './data-transforms.template';
-import {
-  BaseFormatOptions,
-  DataTransformData,
-  DisplayConfigurationRow,
-  FormatTypes,
-  isNumericFieldType,
-} from './data-transforms.types';
-import { DateFormatModal } from './date-format-modal';
-import { NumberFormatModal } from './number-format-modal/number-format-modal';
-
-/**
- * TODO: This component doesn't yet do derived fields, but it will
- */
-
-@customElement({
-  name: 'data-transforms-derived-fields',
-  template,
-  styles,
-})
-export class DataTransformsAndDerivedFields extends DatasourceDataBaseComponent {
-  dateFormatModal: DateFormatModal;
-  numberFormatModal: NumberFormatModal;
-  /**
-   * Update grid data with column filter information
-   */
-  protected async updateDataFields() {
-    try {
-      const rows = this.datasourceSpec
-        .flatMap(pathParameters)
-        .filter(lookupColumnIsIncluded)
-        .filter(
-          (data) =>
-            data[GridColumnNames.Type] === 'DATETIME' ||
-            data[GridColumnNames.Type] === 'DATE' ||
-            isNumericFieldType(data[GridColumnNames.Type]),
-        )
-        .map(lookupColumnFormat) as GridRowData[];
-      const currentDisplay = this.datasourceSpec[0]?.name;
-      const include = currentDisplay
-        ? selectors.datasourceConfig.getDatasource(datasourceNameFromDisplay(currentDisplay))
-            ?.TRANSFORMER_CONFIGURATION?.INCLUDE_COLUMNS
-        : undefined;
-      this.fieldData = orderRowsByIncludeColumns(rows, include);
-      this.dataError = false;
-    } catch (e) {
-      this.handleError(e as Error, 'There were errors when loading the datasource fields');
-    }
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener(ReportingEvents.refreshColumnFormatGrid, this.updateDataFields);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener(ReportingEvents.refreshColumnFormatGrid, this.updateDataFields);
-  }
-
-  clickHandlerGridDisplay = (rowData: DisplayConfigurationRow): void => {
-    if (isNumericFieldType(rowData[GridColumnNames.Type])) {
-      const formatConfig: BaseFormatOptions = transformFromNumberFormatString(
-        rowData[GridColumnNames.Format],
-        rowData[GridColumnNames.Type],
-      );
-      this.numberFormatModal.showModal({ ...rowData, ...formatConfig });
-    } else {
-      const formatConfig: BaseFormatOptions = transformFromFormatString(
-        rowData[GridColumnNames.Format],
-        rowData[GridColumnNames.Type] as FormatTypes.Date | FormatTypes.Datetime,
-      );
-      this.dateFormatModal.showModal({ ...rowData, ...formatConfig });
-    }
-  };
-
-  deleteFormat = (rowData: DataTransformData): void => {
-    actions.datasourceConfig.deleteColumnFormat({
-      key: datasourceNameFromDisplay(rowData[GridColumnNames.Datasource]),
-      column: rowData[GridColumnNames.ColumnName],
-    });
-    this.updateDataFields();
-  };
-
-  getGridOptions(): GridOptionsConfig {
-    const columnDefs: ColDef[] = [
-      {
-        field: GridColumnNames.ColumnName,
-        headerTooltip: 'The name of the field as defined on the selected datasource.',
-      },
-      {
-        field: GridColumnNames.Type,
-        headerTooltip: 'The type of the field on the underlying datasource.',
-      },
-      {
-        field: GridColumnNames.Format,
-        headerTooltip: 'The format of the field on the underlying datasource.',
-      },
-      buttonCellRenderer(
-        'Add/Edit Format',
-        (rowData) => this.clickHandlerGridDisplay(rowData),
-        html`
-          <rapid-icon style="opacity: 0.5" name="pen-to-square" size="lg"></rapid-icon>
-        `,
-        false,
-        'Allows user to add or edit the format(for example, a date format).',
-      ),
-      buttonCellRenderer(
-        'Delete',
-        (rowData) => this.deleteFormat(rowData),
-        html`
-          <rapid-icon
-            style="opacity: 0.5"
-            variant="regular"
-            name="trash-alt"
-            size="lg"
-          ></rapid-icon>
-        `,
-        false,
-        'Allows to delete format',
-      ),
-    ];
-
-    return {
-      suppressRowTransform: true,
-      columnDefs,
-      rowData: [],
-      headerHeight: 30,
-      rowHeight: 40,
-      tooltipShowDelay: 0,
-      rowSelection: 'multiple',
-      onGridReady: () => {
-        this.handleUpdatedDatasources();
-      },
-      context: {
-        ariaLabelField: GridColumnNames.ColumnName,
-      },
-      suppressRowClickSelection: true,
-    };
-  }
-}