@juspay/blend-design-system 0.0.37-beta.3 → 0.0.37-beta.4

package/lib/components/DataTable/PivotTableModal/pivotModal.styled.ts

@@ -0,0 +1,13 @@
+import styled from 'styled-components'
+import Block from '../../Primitives/Block/Block'
+
+/**
+ * Scroll region without visible scrollbars (preview + config panels).
+ */
+export const NoScrollbar = styled(Block)`
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    &::-webkit-scrollbar {
+        display: none;
+    }
+`

package/lib/components/DataTable/PivotTableModal/pivotModalStyleTokens.ts

@@ -0,0 +1,250 @@
+import type { FoundationTokenType } from '../../../tokens/theme.token'
+import type { TableTokenType } from '../dataTable.tokens'
+
+export type PivotModalStyleTokens = {
+    modal: {
+        minWidth: string
+        maxWidth: string
+        maxHeight: string
+        bodyPadding: string
+        bodyGap: string
+    }
+    rightPanel: {
+        width: string
+        padding: string
+        background: string
+        border: string
+        borderRadius: string
+    }
+    shell: {
+        display: 'grid'
+        gridTemplateColumns: string
+        height: string
+        overflow: 'hidden'
+    }
+    layout: {
+        wideDesktopMinWidth: number
+        wideDesktopColumns: string
+        fallbackColumns: string
+    }
+    panelPadding: string
+    configPanelBackground: string
+    previewPanelBackground: string
+    text: {
+        sectionTitle: {
+            fontSize: string
+            fontWeight: number
+            color: string
+        }
+        fieldLabel: {
+            fontSize: string
+            fontWeight: number
+            color: string
+        }
+        checkboxLabel: {
+            fontSize: string
+            color: string
+        }
+    }
+    spacing: {
+        sectionGap: string
+        builderIntroGap: string
+        stackGap: string
+        controlsRowGap: string
+        iconBadgeGap: string
+        sectionHeaderMarginBottom: string
+    }
+    dropZone: {
+        emptyMinHeight: string
+        padding: string
+        borderRadius: string
+        border: string
+        background: string
+    }
+    chip: {
+        borderRadius: string
+        padding: string
+        hoverShadow: string
+        hoverTranslateY: string
+        transition: string
+    }
+    iconBadge: {
+        size: string
+        borderRadius: string
+        glyphFontSize: string | number
+        glyphFontWeight: number
+    }
+    sectionLabel: {
+        fontWeight: number
+        fontSize: string | number
+        textTransform: 'uppercase'
+        letterSpacing: string
+    }
+    sectionCount: {
+        fontSize: string | number
+        color: string
+    }
+    emptyState: {
+        titleFontSize: string | number
+        titleColor: string
+        exampleFontSize: string | number
+        exampleColor: string
+        padding: string
+        titleMarginBottom: string
+    }
+    fieldRowLabel: {
+        fontSize: string | number
+        color: string
+        marginBottom: string
+    }
+    removeButton: {
+        minWidth: string
+        padding: string
+        borderRadius: string
+        border: string
+        background: string
+        hoverBackground: string
+        iconColor: string
+        iconSize: number
+    }
+    menuCheckIconSize: number
+    preview: {
+        headerMarginBottom: string
+        titleFontWeight: number
+        titleFontSize: string | number
+        titleMarginBottom: string
+        metaFontSize: string
+    }
+    bodyLineHeight: string
+}
+
+/**
+ * Layout and typography for the pivot modal, derived from foundation tokens + responsive table tokens.
+ * Section chips use `colors.primary` only (see color.tokens).
+ */
+export const getPivotModalStyleTokens = (
+    f: FoundationTokenType,
+    tableToken: TableTokenType
+): PivotModalStyleTokens => {
+    const { dataTable, header } = tableToken
+    const cell = dataTable.table.body.cell
+
+    const rightPanelMinWidth = '360px'
+
+    return {
+        modal: {
+            minWidth: 'min(95vw, 120rem)',
+            maxWidth: '95vw',
+            maxHeight: '92vh',
+            bodyPadding: f.unit[20],
+            bodyGap: f.unit[16],
+        },
+        rightPanel: {
+            width: rightPanelMinWidth,
+            padding: f.unit[20],
+            background: f.colors.gray[0] as string,
+            border: `${f.border.width[1]} solid ${f.colors.gray[200]}`,
+            borderRadius: f.border.radius[8],
+        },
+        shell: {
+            display: 'grid',
+            gridTemplateColumns: `minmax(0, 1fr) ${rightPanelMinWidth}`,
+            height: `min(${dataTable.maxHeight}, 85vh)`,
+            overflow: 'hidden',
+        },
+        layout: {
+            wideDesktopMinWidth: 1800,
+            wideDesktopColumns: `minmax(0, 4fr) minmax(${rightPanelMinWidth}, 1fr)`,
+            fallbackColumns: `minmax(0, 1fr) ${rightPanelMinWidth}`,
+        },
+        panelPadding: f.unit[16],
+        configPanelBackground: f.colors.gray[50] as string,
+        previewPanelBackground: dataTable.table.body.backgroundColor as string,
+        text: {
+            sectionTitle: {
+                fontSize: f.font.size.body.md.fontSize,
+                fontWeight: f.font.weight[600],
+                color: f.colors.gray[800] as string,
+            },
+            fieldLabel: {
+                fontSize: f.font.size.body.md.fontSize,
+                fontWeight: f.font.weight[500],
+                color: f.colors.gray[800] as string,
+            },
+            checkboxLabel: {
+                fontSize: f.font.size.body.sm.fontSize,
+                color: f.colors.gray[600] as string,
+            },
+        },
+        spacing: {
+            sectionGap: f.unit[20],
+            builderIntroGap: f.unit[20],
+            stackGap: f.unit[8],
+            controlsRowGap: f.unit[8],
+            iconBadgeGap: f.unit[8],
+            sectionHeaderMarginBottom: f.unit[12],
+        },
+        dropZone: {
+            emptyMinHeight: f.unit[80],
+            padding: f.unit[12],
+            borderRadius: f.border.radius[8],
+            border: `2px dashed ${f.colors.gray[200]}`,
+            background: f.colors.gray[0] as string,
+        },
+        chip: {
+            borderRadius: f.border.radius[6],
+            padding: `${f.unit[8]} ${f.unit[12]}`,
+            hoverShadow: f.shadows.sm,
+            hoverTranslateY: `-${f.unit[1]}`,
+            transition: 'box-shadow 0.2s ease, transform 0.2s ease',
+        },
+        iconBadge: {
+            size: f.unit[24],
+            borderRadius: f.border.radius[4],
+            glyphFontSize: f.font.size.body.sm.fontSize,
+            glyphFontWeight: 700,
+        },
+        sectionLabel: {
+            fontWeight: 600,
+            fontSize: f.font.size.body.sm.fontSize,
+            textTransform: 'uppercase',
+            letterSpacing: f.unit[0.5],
+        },
+        sectionCount: {
+            fontSize: f.font.size.body.sm.fontSize,
+            color: f.colors.gray[600] as string,
+        },
+        emptyState: {
+            titleFontSize: f.font.size.body.md.fontSize,
+            titleColor: f.colors.gray[800] as string,
+            exampleFontSize: f.font.size.body.sm.fontSize,
+            exampleColor: f.colors.gray[400] as string,
+            padding: f.unit[16],
+            titleMarginBottom: f.unit[8],
+        },
+        fieldRowLabel: {
+            fontSize: f.font.size.body.sm.fontSize,
+            color: f.colors.gray[600] as string,
+            marginBottom: f.unit[8],
+        },
+        removeButton: {
+            minWidth: f.unit[28],
+            padding: f.unit[4],
+            borderRadius: f.border.radius[4],
+            border: `${f.border.width[1]} solid ${f.colors.gray[300]}`,
+            background: f.colors.gray[0] as string,
+            hoverBackground: f.colors.gray[100] as string,
+            iconColor: f.colors.gray[600] as string,
+            iconSize: Number.parseInt(String(f.unit[14]), 10) || 14,
+        },
+        menuCheckIconSize: Number.parseInt(String(f.unit[16]), 10) || 16,
+        preview: {
+            headerMarginBottom: f.unit[16],
+            titleFontWeight: 600,
+            titleFontSize: f.font.size.body.md.fontSize,
+            titleMarginBottom: f.unit[4],
+            metaFontSize: cell.fontSize as string,
+        },
+        bodyLineHeight: header.description.lineHeight as string,
+    } as PivotModalStyleTokens
+}

package/lib/components/DataTable/PivotTableModal/types.ts

@@ -0,0 +1,69 @@
+import { ReactNode } from 'react'
+import type { TableTokenType } from '../dataTable.tokens'
+import { ColumnDefinition, PivotAggregationType } from '../types'
+import type { PivotModalStyleTokens } from './pivotModalStyleTokens'
+
+export type PivotValueConfig<T extends Record<string, unknown>> = {
+    field: keyof T
+    aggregation: PivotAggregationType
+}
+
+export type PivotTableConfig<T extends Record<string, unknown>> = {
+    rows: Array<keyof T>
+    columns: Array<keyof T>
+    values: PivotValueConfig<T>[]
+}
+
+export type PivotTableModalProps<T extends Record<string, unknown>> = {
+    isOpen: boolean
+    onClose: () => void
+    data: T[]
+    columns: ColumnDefinition<T>[]
+    title?: string
+    description?: string
+    showExport?: boolean
+    initialConfig?: Partial<PivotTableConfig<T>>
+    previewColumns?: PivotPreviewColumn[]
+    previewRows?: PivotPreviewRow[]
+    onConfigChange?: (config: PivotTableConfig<T>) => void
+    onExport?: (config: PivotTableConfig<T>) => void
+    trigger?: ReactNode
+    /**
+     * Callback when trigger is clicked. Use this to open the modal.
+     */
+    onTriggerClick?: () => void
+    /**
+     * Configure which aggregation operations are available in the Values section.
+     * If not provided, all operations will be shown.
+     * @example ['sum', 'count', 'average'] // Show only sum, count, and average
+     */
+    availableAggregations?: PivotAggregationType[]
+}
+
+export type PivotPreviewColumn = {
+    key: string
+    label: string
+}
+
+export type PivotPreviewRow = Record<string, unknown> & {
+    __pivotId: string
+    __pivotRowType?: 'data' | 'subtotal' | 'grand_total'
+}
+
+export type PivotPreviewPanelProps = {
+    pivot: PivotModalStyleTokens
+    tableToken: TableTokenType
+    showExport: boolean
+    previewRows?: PivotPreviewRow[]
+    previewColumns?: PivotPreviewColumn[]
+    previewTableColumns: ColumnDefinition<Record<string, unknown>>[]
+    onExport: () => void
+    hasValues: boolean
+}
+
+export type PivotFieldConfig = {
+    field: string
+    showTotal: boolean
+    aggregation?: PivotAggregationType
+    header?: string
+}

package/lib/components/DataTable/PivotTableModal/utils.ts

@@ -0,0 +1,360 @@
+import { ColumnDefinition, PivotAggregationType } from '../types'
+import { PivotPreviewColumn, PivotPreviewRow, PivotValueConfig } from './types'
+
+export const normalizePivotValue = (value: unknown): string => {
+    if (value == null) return 'N/A'
+    if (typeof value === 'string' || typeof value === 'number') {
+        return String(value)
+    }
+    if (Array.isArray(value)) {
+        return value.map((item) => normalizePivotValue(item)).join(', ')
+    }
+    if (typeof value === 'object') {
+        const objectValue = value as Record<string, unknown>
+        if ('text' in objectValue) return String(objectValue.text)
+        if ('label' in objectValue) return String(objectValue.label)
+        if ('value' in objectValue) return String(objectValue.value)
+        if ('selectedValue' in objectValue)
+            return String(objectValue.selectedValue)
+        if ('values' in objectValue && Array.isArray(objectValue.values)) {
+            return objectValue.values
+                .map((item) => normalizePivotValue(item))
+                .join(', ')
+        }
+        if ('name' in objectValue) return String(objectValue.name)
+        try {
+            return JSON.stringify(objectValue)
+        } catch {
+            return 'N/A'
+        }
+    }
+    return String(value)
+}
+
+const truncatePivotLabel = (value: string, maxLength = 36): string => {
+    if (value.length <= maxLength) return value
+    return `${value.slice(0, maxLength - 3)}...`
+}
+
+const toNumeric = (value: unknown): number => {
+    if (typeof value === 'number') return value
+    const parsed = Number(
+        normalizePivotValue(value)
+            .replace(/,/g, '')
+            .replace(/[^\d.-]/g, '')
+    )
+    return Number.isNaN(parsed) ? 0 : parsed
+}
+
+const aggregate = (
+    rows: Array<Record<string, unknown>>,
+    field: string,
+    aggregation: PivotAggregationType
+): number => {
+    if (aggregation === PivotAggregationType.COUNT) {
+        return rows.length
+    }
+
+    const values = rows.map((row) => toNumeric(row[field]))
+    if (!values.length) return 0
+
+    switch (aggregation) {
+        case PivotAggregationType.SUM:
+            return values.reduce((sum, value) => sum + value, 0)
+        case PivotAggregationType.AVERAGE:
+        case PivotAggregationType.MEAN:
+            return values.reduce((sum, value) => sum + value, 0) / values.length
+        case PivotAggregationType.MEDIAN: {
+            const sorted = [...values].sort((a, b) => a - b)
+            const middle = Math.floor(sorted.length / 2)
+            return sorted.length % 2 === 0
+                ? (sorted[middle - 1] + sorted[middle]) / 2
+                : sorted[middle]
+        }
+        case PivotAggregationType.MIN:
+            return Math.min(...values)
+        case PivotAggregationType.MAX:
+            return Math.max(...values)
+        default:
+            return values.reduce((sum, value) => sum + value, 0)
+    }
+}
+
+export const getPivotFieldOptions = <T extends Record<string, unknown>>(
+    columns: ColumnDefinition<T>[]
+): Array<{ key: string; label: string }> =>
+    columns.map((column) => ({
+        key: String(column.field),
+        label: column.header || String(column.field),
+    }))
+
+export const isPivotNumericValue = (value: unknown): boolean => {
+    if (typeof value === 'number') return Number.isFinite(value)
+    if (value == null) return false
+    const normalized = normalizePivotValue(value)
+        .replace(/,/g, '')
+        .replace(/[^\d.-]/g, '')
+        .trim()
+    if (!normalized) return false
+    const parsed = Number(normalized)
+    return Number.isFinite(parsed)
+}
+
+export const getSupportedAggregationsForField = <
+    T extends Record<string, unknown>,
+>(
+    data: T[],
+    field: keyof T,
+    allowedAggregations: PivotAggregationType[],
+    isNumericColumn = false
+): PivotAggregationType[] => {
+    const hasNumericValue =
+        isNumericColumn || data.some((row) => isPivotNumericValue(row[field]))
+
+    return allowedAggregations.filter((aggregation) => {
+        if (aggregation === PivotAggregationType.COUNT) return true
+        return hasNumericValue
+    })
+}
+
+/**
+ * Builds the rectangular grid the modal preview renders as a {@link DataTable}.
+ *
+ * - **Columns:** First column key `__rowLabel` — header is joined row field names
+ *   (or `All Rows`). Each unique combination of **column** dimension values
+ *   becomes a group; for each group, every **value** config adds one column
+ *   (`columnKey__field__aggregation`).
+ * - **Rows:** One row per distinct row-dimension key; cells are aggregated from
+ *   raw rows that match that row key and column key.
+ * - **Grand total:** Appended last with `__pivotRowType: 'grand_total'` and
+ *   `__rowLabel` `"Grand Total"`; each metric is aggregated over the full
+ *   (already filtered) `data` for that column bucket.
+ */
+export const buildPivotPreview = <T extends Record<string, unknown>>(
+    data: T[],
+    rowFields: Array<keyof T> | Array<{ field: keyof T; showTotal?: boolean }>,
+    columnFields:
+        | Array<keyof T>
+        | Array<{ field: keyof T; showTotal?: boolean }>,
+    valueConfigs: PivotValueConfig<T>[],
+    fieldLabelByKey: Record<string, string> = {}
+): { columns: PivotPreviewColumn[]; rows: PivotPreviewRow[] } => {
+    if (!valueConfigs.length) return { columns: [], rows: [] }
+
+    const rowFieldConfigs = rowFields.map((field) =>
+        typeof field === 'object' && field !== null
+            ? { field: field.field, showTotal: field.showTotal === true }
+            : { field, showTotal: false }
+    ) as Array<{ field: keyof T; showTotal: boolean }>
+    const columnFieldConfigs = columnFields.map((field) =>
+        typeof field === 'object' && field !== null
+            ? { field: field.field, showTotal: field.showTotal === true }
+            : { field, showTotal: false }
+    ) as Array<{ field: keyof T; showTotal: boolean }>
+
+    const normalizedRowFields = rowFields.map((field) =>
+        typeof field === 'object' && field !== null ? field.field : field
+    ) as Array<keyof T>
+    const normalizedColumnFields = columnFields.map((field) =>
+        typeof field === 'object' && field !== null ? field.field : field
+    ) as Array<keyof T>
+
+    const shouldShowRowGrandTotal =
+        normalizedRowFields.length === 0 ||
+        rowFieldConfigs.some((r) => r.showTotal)
+    const shouldShowColumnTotals =
+        normalizedColumnFields.length > 0 &&
+        columnFieldConfigs.some((c) => c.showTotal)
+
+    type PivotRowNode = {
+        rows: T[]
+        children: Map<string, PivotRowNode>
+    }
+    const rowTree: PivotRowNode = { rows: [], children: new Map() }
+    const columnKeySet = new Set<string>()
+
+    data.forEach((row) => {
+        let node = rowTree
+        node.rows.push(row)
+        normalizedRowFields.forEach((field) => {
+            const part = normalizePivotValue(row[field])
+            const next = node.children.get(part)
+            if (next) {
+                node = next
+                node.rows.push(row)
+            } else {
+                const created: PivotRowNode = {
+                    rows: [row],
+                    children: new Map(),
+                }
+                node.children.set(part, created)
+                node = created
+            }
+        })
+
+        const columnKey = normalizedColumnFields.length
+            ? normalizedColumnFields
+                  .map((field) => normalizePivotValue(row[field]))
+                  .join(' | ')
+            : 'All Columns'
+
+        columnKeySet.add(columnKey)
+    })
+
+    const orderedColumnKeys = Array.from(columnKeySet).sort((a, b) =>
+        a.localeCompare(b)
+    )
+    const getFieldLabel = (key: keyof T): string =>
+        fieldLabelByKey[String(key)] || String(key)
+
+    const rowLabel = normalizedRowFields.length
+        ? normalizedRowFields.map((field) => getFieldLabel(field)).join(' / ')
+        : 'All Rows'
+
+    const previewColumns: PivotPreviewColumn[] = [
+        { key: '__rowLabel', label: rowLabel },
+        ...orderedColumnKeys.flatMap((columnKey) =>
+            valueConfigs.map((valueConfig, valueIndex) => ({
+                key: `${columnKey}__${String(valueConfig.field)}__${valueConfig.aggregation}__valueIndex_${valueIndex}`,
+                label: `${truncatePivotLabel(columnKey)} | ${valueConfig.aggregation}(${getFieldLabel(valueConfig.field)})`,
+            }))
+        ),
+        ...(shouldShowColumnTotals
+            ? valueConfigs.map((valueConfig, valueIndex) => ({
+                  key: `__columnTotal__${String(valueConfig.field)}__${valueConfig.aggregation}__valueIndex_${valueIndex}`,
+                  label: `Total | ${valueConfig.aggregation}(${getFieldLabel(valueConfig.field)})`,
+              }))
+            : []),
+    ]
+
+    let idCounter = 0
+    const computeMetricCells = (
+        targetRow: PivotPreviewRow,
+        groupedRows: T[]
+    ) => {
+        orderedColumnKeys.forEach((columnKey) => {
+            const columnRows = normalizedColumnFields.length
+                ? groupedRows.filter(
+                      (groupRow) =>
+                          normalizedColumnFields
+                              .map((field) =>
+                                  normalizePivotValue(groupRow[field])
+                              )
+                              .join(' | ') === columnKey
+                  )
+                : groupedRows
+
+            valueConfigs.forEach((valueConfig, valueIndex) => {
+                const key = `${columnKey}__${String(valueConfig.field)}__${valueConfig.aggregation}__valueIndex_${valueIndex}`
+                targetRow[key] = Number(
+                    aggregate(
+                        columnRows as Array<Record<string, unknown>>,
+                        String(valueConfig.field),
+                        valueConfig.aggregation
+                    ).toFixed(2)
+                )
+            })
+        })
+
+        if (shouldShowColumnTotals) {
+            valueConfigs.forEach((valueConfig, valueIndex) => {
+                const key = `__columnTotal__${String(valueConfig.field)}__${valueConfig.aggregation}__valueIndex_${valueIndex}`
+                targetRow[key] = Number(
+                    aggregate(
+                        groupedRows as Array<Record<string, unknown>>,
+                        String(valueConfig.field),
+                        valueConfig.aggregation
+                    ).toFixed(2)
+                )
+            })
+        }
+    }
+
+    const rows: PivotPreviewRow[] = []
+    const traverse = (node: PivotRowNode, depth: number, parts: string[]) => {
+        if (depth === normalizedRowFields.length) {
+            const rowKey = parts.length ? parts.join(' | ') : 'All Rows'
+            const row: PivotPreviewRow = {
+                __pivotId: `pivot-row-${idCounter++}`,
+                __rowLabel: truncatePivotLabel(rowKey, 60),
+                __pivotRowType: 'data',
+            }
+            computeMetricCells(row, node.rows)
+            rows.push(row)
+            return
+        }
+
+        const childKeys = Array.from(node.children.keys()).sort((a, b) =>
+            a.localeCompare(b)
+        )
+        childKeys.forEach((key) => {
+            const child = node.children.get(key)
+            if (!child) return
+            traverse(child, depth + 1, [...parts, key])
+        })
+
+        if (
+            normalizedRowFields.length > 1 &&
+            depth < normalizedRowFields.length - 1 &&
+            rowFieldConfigs[depth]?.showTotal
+        ) {
+            const label = `${parts.join(' / ')} Total`
+            const subtotalRow: PivotPreviewRow = {
+                __pivotId: `pivot-subtotal-${idCounter++}`,
+                __rowLabel: truncatePivotLabel(label, 60),
+                __pivotRowType: 'subtotal',
+            }
+            computeMetricCells(subtotalRow, node.rows)
+            rows.push(subtotalRow)
+        }
+    }
+
+    traverse(rowTree, 0, [])
+
+    if (shouldShowRowGrandTotal) {
+        const grandTotalRow: PivotPreviewRow = {
+            __pivotId: 'pivot-grand-total',
+            __rowLabel: 'Grand Total',
+            __pivotRowType: 'grand_total',
+        }
+
+        orderedColumnKeys.forEach((columnKey) => {
+            const columnRows = normalizedColumnFields.length
+                ? data.filter(
+                      (row) =>
+                          normalizedColumnFields
+                              .map((field) => normalizePivotValue(row[field]))
+                              .join(' | ') === columnKey
+                  )
+                : data
+            valueConfigs.forEach((valueConfig, valueIndex) => {
+                const key = `${columnKey}__${String(valueConfig.field)}__${valueConfig.aggregation}__valueIndex_${valueIndex}`
+                grandTotalRow[key] = Number(
+                    aggregate(
+                        columnRows as Array<Record<string, unknown>>,
+                        String(valueConfig.field),
+                        valueConfig.aggregation
+                    ).toFixed(2)
+                )
+            })
+        })
+        if (shouldShowColumnTotals) {
+            valueConfigs.forEach((valueConfig, valueIndex) => {
+                const key = `__columnTotal__${String(valueConfig.field)}__${valueConfig.aggregation}__valueIndex_${valueIndex}`
+                grandTotalRow[key] = Number(
+                    aggregate(
+                        data as Array<Record<string, unknown>>,
+                        String(valueConfig.field),
+                        valueConfig.aggregation
+                    ).toFixed(2)
+                )
+            })
+        }
+        rows.push(grandTotalRow)
+    }
+
+    return {
+        columns: previewColumns,
+        rows,
+    }
+}