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

package/lib/components/StatCard/statcard.tokens.ts

@@ -0,0 +1,468 @@
+//statcard.tokens.ts
+
+import type { CSSObject } from 'styled-components'
+import { ChangeType, StatCardVariant } from './types'
+import type { FoundationTokenType } from '../../tokens/theme.token'
+import { BreakpointType } from '../../breakpoints/breakPoints'
+
+export type StatCardState = 'default' | 'hover'
+
+export type StatCardTokenType = {
+    height: CSSObject['height']
+    maxWidth: CSSObject['maxWidth']
+    border: CSSObject['border']
+    borderRadius: CSSObject['borderRadius']
+    backgroundColor: CSSObject['backgroundColor']
+    boxShadow: CSSObject['boxShadow']
+    padding: {
+        x: CSSObject['padding']
+        y: CSSObject['padding']
+    }
+    textContainer: {
+        gap: CSSObject['gap']
+        header: {
+            gap: CSSObject['gap']
+            title: {
+                fontSize: CSSObject['fontSize']
+                fontWeight: CSSObject['fontWeight']
+                color: CSSObject['color']
+            }
+            titleIcon: {
+                width: CSSObject['width']
+            }
+
+            helpIcon: {
+                width: CSSObject['width']
+                color: { [key in StatCardState]: CSSObject['color'] }
+            }
+        }
+
+        stats: {
+            gap: CSSObject['gap']
+            title: {
+                gap: CSSObject['gap']
+                value: {
+                    [key in StatCardVariant]: {
+                        fontSize: CSSObject['fontSize']
+                        fontWeight: CSSObject['fontWeight']
+                        color: CSSObject['color']
+                    }
+                }
+                change: {
+                    margin: CSSObject['margin'] //todo: check if this is needed
+                    arrow: {
+                        width: CSSObject['width']
+                    }
+                    text: {
+                        fontSize: CSSObject['fontSize']
+                        fontWeight: CSSObject['fontWeight']
+                        color: {
+                            [key in ChangeType]: CSSObject['color']
+                        }
+                    }
+                }
+            }
+            subtitle: {
+                fontSize: CSSObject['fontSize']
+                fontWeight: CSSObject['fontWeight']
+                color: CSSObject['color']
+            }
+        }
+    }
+
+    chart: {
+        height: CSSObject['height']
+        colors: {
+            line: {
+                increase: CSSObject['color']
+                decrease: CSSObject['color']
+            }
+            area: {
+                increase: CSSObject['color']
+                decrease: CSSObject['color']
+            }
+            gradient: {
+                end: CSSObject['color']
+                startOpacity: number
+                endOpacity: number
+            }
+        }
+        line: {
+            strokeWidth: CSSObject['strokeWidth']
+            activeDot: {
+                width: CSSObject['width']
+                fill: CSSObject['fill']
+            }
+        }
+        bar: {
+            borderTopRightRadius: CSSObject['borderTopRightRadius']
+            borderTopLeftRadius: CSSObject['borderTopLeftRadius']
+            borderBottomRightRadius: CSSObject['borderBottomRightRadius']
+            borderBottomLeftRadius: CSSObject['borderBottomLeftRadius']
+            fill: { [key in StatCardState]: CSSObject['fill'] }
+        }
+        progressBar: {
+            height: CSSObject['height']
+            borderRadius: CSSObject['borderRadius']
+            gap: CSSObject['gap']
+            background: {
+                fill: CSSObject['backgroundColor']
+                empty: CSSObject['backgroundColor']
+                pattern: {
+                    color: CSSObject['color']
+                    size: CSSObject['backgroundSize']
+                }
+            }
+            label: {
+                fontSize: CSSObject['fontSize']
+                fontWeight: CSSObject['fontWeight']
+                color: CSSObject['color']
+            }
+        }
+        tooltip: {
+            backgroundColor: CSSObject['backgroundColor']
+            padding: {
+                x: CSSObject['padding']
+                y: CSSObject['padding']
+            }
+            borderRadius: CSSObject['borderRadius']
+            color: CSSObject['color']
+            fontSize: CSSObject['fontSize']
+            fontWeight: CSSObject['fontWeight']
+        }
+    }
+}
+
+export type ResponsiveStatCardTokens = {
+    [key in keyof BreakpointType]: StatCardTokenType
+}
+
+export const getStatCardToken = (
+    foundationToken: FoundationTokenType
+): ResponsiveStatCardTokens => {
+    return {
+        sm: {
+            maxWidth: foundationToken.unit[200],
+            height: 'auto',
+            border: `${foundationToken.border.width[1]} solid ${foundationToken.colors.gray[200]}`,
+
+            borderRadius: foundationToken.border.radius[12],
+            backgroundColor: foundationToken.colors.gray[0],
+
+            boxShadow: foundationToken.shadows.xs,
+            padding: {
+                x: foundationToken.unit[12],
+                y: foundationToken.unit[12],
+            },
+            textContainer: {
+                gap: foundationToken.unit[0],
+
+                header: {
+                    gap: foundationToken.unit[8],
+                    titleIcon: {
+                        width: foundationToken.unit[20],
+                    },
+                    title: {
+                        fontSize: foundationToken.font.size.body.sm.fontSize,
+                        fontWeight: foundationToken.font.weight[500],
+                        color: foundationToken.colors.gray[400],
+                    },
+                    helpIcon: {
+                        width: foundationToken.unit[14],
+                        color: {
+                            default: foundationToken.colors.gray[400],
+                            hover: foundationToken.colors.gray[400],
+                        },
+                    },
+                },
+
+                stats: {
+                    gap: foundationToken.unit[6],
+                    title: {
+                        gap: foundationToken.unit[8],
+                        value: {
+                            [StatCardVariant.NUMBER]: {
+                                fontSize:
+                                    foundationToken.font.size.heading.lg
+                                        .fontSize,
+                                fontWeight: foundationToken.font.weight[600],
+                                color: foundationToken.colors.gray[800],
+                            },
+                            [StatCardVariant.LINE]: {
+                                fontSize:
+                                    foundationToken.font.size.heading.sm
+                                        .fontSize,
+                                fontWeight: foundationToken.font.weight[600],
+                                color: foundationToken.colors.gray[800],
+                            },
+                            [StatCardVariant.BAR]: {
+                                fontSize:
+                                    foundationToken.font.size.heading.sm
+                                        .fontSize,
+                                fontWeight: foundationToken.font.weight[600],
+                                color: foundationToken.colors.gray[800],
+                            },
+                            [StatCardVariant.PROGRESS_BAR]: {
+                                fontSize:
+                                    foundationToken.font.size.heading.sm
+                                        .fontSize,
+                                fontWeight: foundationToken.font.weight[600],
+                                color: foundationToken.colors.gray[800],
+                            },
+                        },
+                        change: {
+                            margin: `${String(foundationToken.unit[0])} ${String(foundationToken.unit[0])} ${String(foundationToken.unit[0])} ${String(foundationToken.unit[8])}`,
+                            arrow: {
+                                width: foundationToken.unit[14],
+                            },
+                            text: {
+                                color: {
+                                    increase: foundationToken.colors.green[600],
+                                    decrease: foundationToken.colors.red[600],
+                                },
+                                fontSize:
+                                    foundationToken.font.size.body.xs.fontSize,
+                                fontWeight: foundationToken.font.weight[600],
+                            },
+                        },
+                    },
+
+                    subtitle: {
+                        fontSize: foundationToken.font.size.body.sm.fontSize,
+                        fontWeight: foundationToken.font.weight[500],
+                        color: foundationToken.colors.gray[400],
+                    },
+                },
+            },
+
+            // Chart section (all chart types)
+            chart: {
+                height: foundationToken.unit[50],
+                colors: {
+                    line: {
+                        increase: foundationToken.colors.green[500],
+                        decrease: foundationToken.colors.red[500],
+                    },
+                    area: {
+                        increase: foundationToken.colors.green[500],
+                        decrease: foundationToken.colors.red[500],
+                    },
+                    gradient: {
+                        end: foundationToken.colors.gray[0],
+                        startOpacity: 0.2,
+                        endOpacity: 0.5,
+                    },
+                },
+                line: {
+                    strokeWidth: foundationToken.unit[1.5],
+                    activeDot: {
+                        width: foundationToken.border.radius[4],
+                        fill: foundationToken.colors.gray[0],
+                    },
+                },
+                bar: {
+                    borderTopRightRadius: foundationToken.border.radius[2],
+                    borderTopLeftRadius: foundationToken.border.radius[2],
+                    borderBottomRightRadius: foundationToken.border.radius[0],
+                    borderBottomLeftRadius: foundationToken.border.radius[0],
+                    fill: {
+                        default: foundationToken.colors.primary[500],
+                        hover: foundationToken.colors.primary[100],
+                    },
+                },
+                progressBar: {
+                    height: foundationToken.unit[20],
+                    borderRadius: foundationToken.border.radius[4],
+                    gap: foundationToken.unit[16],
+                    background: {
+                        fill: foundationToken.colors.primary[500],
+                        empty: foundationToken.colors.gray[0],
+                        pattern: {
+                            color: foundationToken.colors.gray[200],
+                            size: `${foundationToken.unit[10]} ${foundationToken.unit[10]}`,
+                        },
+                    },
+                    label: {
+                        fontSize: foundationToken.font.size.body.md.fontSize,
+                        fontWeight: foundationToken.font.weight[600],
+                        color: foundationToken.colors.gray[700],
+                    },
+                },
+                tooltip: {
+                    backgroundColor: foundationToken.colors.gray[900],
+                    padding: {
+                        x: foundationToken.unit[8],
+                        y: foundationToken.unit[4],
+                    },
+                    borderRadius: foundationToken.border.radius[4],
+
+                    color: foundationToken.colors.gray[0],
+                    fontSize: foundationToken.font.size.body.sm.fontSize,
+                    fontWeight: foundationToken.font.weight[500],
+                },
+            },
+        },
+        lg: {
+            maxWidth: foundationToken.unit[350],
+            height: 'auto',
+            border: `${foundationToken.border.width[1]} solid ${foundationToken.colors.gray[200]}`,
+
+            borderRadius: foundationToken.border.radius[12],
+            backgroundColor: foundationToken.colors.gray[0],
+
+            boxShadow: foundationToken.shadows.xs,
+            padding: {
+                x: foundationToken.unit[16],
+                y: foundationToken.unit[16],
+            },
+
+            textContainer: {
+                gap: foundationToken.unit[6],
+
+                header: {
+                    gap: foundationToken.unit[8],
+                    titleIcon: {
+                        width: foundationToken.unit[20],
+                    },
+                    title: {
+                        fontSize: foundationToken.font.size.body.md.fontSize,
+                        fontWeight: foundationToken.font.weight[500],
+                        color: foundationToken.colors.gray[400],
+                    },
+                    helpIcon: {
+                        width: foundationToken.unit[14],
+                        color: {
+                            default: foundationToken.colors.gray[400],
+                            hover: foundationToken.colors.gray[400],
+                        },
+                    },
+                },
+
+                stats: {
+                    gap: foundationToken.unit[6],
+                    title: {
+                        gap: foundationToken.unit[8],
+                        value: {
+                            [StatCardVariant.NUMBER]: {
+                                fontSize:
+                                    foundationToken.font.size.heading.xl
+                                        .fontSize,
+                                fontWeight: foundationToken.font.weight[600],
+                                color: foundationToken.colors.gray[800],
+                            },
+                            [StatCardVariant.LINE]: {
+                                fontSize:
+                                    foundationToken.font.size.heading.lg
+                                        .fontSize,
+                                fontWeight: foundationToken.font.weight[600],
+                                color: foundationToken.colors.gray[800],
+                            },
+                            [StatCardVariant.BAR]: {
+                                fontSize:
+                                    foundationToken.font.size.heading.lg
+                                        .fontSize,
+                                fontWeight: foundationToken.font.weight[600],
+                                color: foundationToken.colors.gray[800],
+                            },
+                            [StatCardVariant.PROGRESS_BAR]: {
+                                fontSize:
+                                    foundationToken.font.size.heading.lg
+                                        .fontSize,
+                                fontWeight: foundationToken.font.weight[600],
+                                color: foundationToken.colors.gray[800],
+                            },
+                        },
+                        change: {
+                            margin: `${String(foundationToken.unit[0])} ${String(foundationToken.unit[0])} ${String(foundationToken.unit[0])} ${String(foundationToken.unit[8])}`,
+                            arrow: {
+                                width: foundationToken.unit[14],
+                            },
+                            text: {
+                                color: {
+                                    increase: foundationToken.colors.green[600],
+                                    decrease: foundationToken.colors.red[600],
+                                },
+                                fontSize:
+                                    foundationToken.font.size.body.sm.fontSize,
+                                fontWeight: foundationToken.font.weight[600],
+                            },
+                        },
+                    },
+                    subtitle: {
+                        fontSize: foundationToken.font.size.body.sm.fontSize,
+                        fontWeight: foundationToken.font.weight[500],
+                        color: foundationToken.colors.gray[400],
+                    },
+                },
+            },
+
+            // Chart section (all chart types)
+            chart: {
+                height: foundationToken.unit[50],
+                colors: {
+                    line: {
+                        increase: foundationToken.colors.green[500],
+                        decrease: foundationToken.colors.red[500],
+                    },
+                    area: {
+                        increase: foundationToken.colors.green[500],
+                        decrease: foundationToken.colors.red[500],
+                    },
+                    gradient: {
+                        end: foundationToken.colors.gray[0],
+                        startOpacity: 0.2,
+                        endOpacity: 0.5,
+                    },
+                },
+                line: {
+                    strokeWidth: foundationToken.unit[1.5],
+                    activeDot: {
+                        width: foundationToken.border.radius[4],
+                        fill: foundationToken.colors.gray[0],
+                    },
+                },
+                bar: {
+                    borderTopRightRadius: foundationToken.border.radius[2],
+                    borderTopLeftRadius: foundationToken.border.radius[2],
+                    borderBottomRightRadius: foundationToken.border.radius[2],
+                    borderBottomLeftRadius: foundationToken.border.radius[2],
+
+                    fill: {
+                        default: foundationToken.colors.primary[500],
+                        hover: foundationToken.colors.primary[100],
+                    },
+                },
+                progressBar: {
+                    height: foundationToken.unit[20],
+                    borderRadius: foundationToken.border.radius[4],
+                    gap: foundationToken.unit[16],
+                    background: {
+                        fill: foundationToken.colors.primary[500],
+                        empty: foundationToken.colors.gray[0],
+                        pattern: {
+                            color: foundationToken.colors.gray[200],
+                            size: `${foundationToken.unit[10]} ${foundationToken.unit[10]}`,
+                        },
+                    },
+                    label: {
+                        fontSize: foundationToken.font.size.body.md.fontSize,
+                        fontWeight: foundationToken.font.weight[600],
+                        color: foundationToken.colors.gray[700],
+                    },
+                },
+                tooltip: {
+                    backgroundColor: foundationToken.colors.gray[900],
+                    padding: {
+                        x: foundationToken.unit[8],
+                        y: foundationToken.unit[4],
+                    },
+                    borderRadius: foundationToken.border.radius[4],
+
+                    color: foundationToken.colors.gray[0],
+                    fontSize: foundationToken.font.size.body.sm.fontSize,
+                    fontWeight: foundationToken.font.weight[500],
+                },
+            },
+        },
+    }
+}

package/lib/components/StatCard/types.ts

@@ -0,0 +1,82 @@
+import type { ReactNode } from 'react'
+import { SingleSelectProps } from '../SingleSelect'
+import { AxisType } from '../Charts/types'
+import { SkeletonVariant } from '../Skeleton'
+
+export type StatCardSkeletonProps = {
+    variant: SkeletonVariant
+    show: boolean
+    height?: string | number
+    maxWidth?: string | number
+    minWidth?: string | number
+}
+
+export enum StatCardVariant {
+    LINE = 'line',
+    PROGRESS_BAR = 'progress',
+    BAR = 'bar',
+    NUMBER = 'number',
+}
+
+export enum ChangeType {
+    INCREASE = 'increase',
+    DECREASE = 'decrease',
+}
+
+export enum StatCardArrowDirection {
+    UP = 'up',
+    DOWN = 'down',
+}
+
+export type ChartDataPoint = {
+    value: number
+    name: string
+}
+
+export type StatCardChange = {
+    value: number | null | undefined
+    valueType: ChangeType
+    arrowDirection?: StatCardArrowDirection
+    tooltip?: ReactNode
+}
+
+export enum StatCardDirection {
+    VERTICAL = 'vertical',
+    HORIZONTAL = 'horizontal',
+}
+
+export type StatCardAxisConfig = {
+    type?: AxisType
+    tickFormatter?: (value: string | number) => string
+    dateOnly?: boolean
+    useUTC?: boolean
+    formatString?: string
+    timeOnly?: boolean
+    showYear?: boolean
+    smartDateTimeFormat?: boolean
+}
+
+export type StatCardProps = {
+    title: string
+    value: string | number
+    valueTooltip?: ReactNode
+    change?: StatCardChange | null | undefined
+    subtitle?: string
+    variant: StatCardVariant
+    chartData?: ChartDataPoint[]
+    progressValue?: number
+    titleIcon?: ReactNode
+    actionIcon?: ReactNode
+    helpIconText?: string
+    dropdownProps?: SingleSelectProps
+    maxWidth?: string
+    minWidth?: string
+    xAxis?: StatCardAxisConfig
+    yAxis?: StatCardAxisConfig
+    valueFormatter?: AxisType
+    height?: string
+    direction?: StatCardDirection
+    skeleton?: StatCardSkeletonProps
+    dataDisplay?: boolean
+    showBorder?: boolean
+}

package/lib/components/StatCard/utils.ts

@@ -0,0 +1,78 @@
+import { ChangeType, StatCardChange, ChartDataPoint } from './types'
+
+/**
+ * Calculates whether the chart data is trending down (first value > last value)
+ * @param chartData - Array of chart data points
+ * @returns true if trending down, false otherwise
+ */
+export const calculateTrend = (chartData?: ChartDataPoint[]): boolean => {
+    if (!chartData || chartData.length < 2) return false
+    const firstItem = chartData[0]
+    const lastItem = chartData[chartData.length - 1]
+    return firstItem && lastItem && firstItem.value > lastItem.value
+}
+
+/**
+ * Calculates delta change from chart data (first vs last value)
+ * @param chartData - Array of chart data points
+ * @returns Calculated change object with value and valueType, or null if calculation is not possible
+ */
+export const calculateChangeFromChartData = (
+    chartData?: ChartDataPoint[]
+): Pick<StatCardChange, 'value' | 'valueType'> | null => {
+    if (!chartData || chartData.length < 2) return null
+
+    const firstItem = chartData[0]
+    const lastItem = chartData[chartData.length - 1]
+
+    if (!firstItem || !lastItem) return null
+
+    const firstValue = firstItem.value
+    const lastValue = lastItem.value
+
+    if (firstValue === 0) return null // Avoid division by zero
+
+    const deltaPercent = ((lastValue - firstValue) / Math.abs(firstValue)) * 100
+    const valueType =
+        deltaPercent < 0 ? ChangeType.DECREASE : ChangeType.INCREASE
+
+    return {
+        value: Math.abs(deltaPercent),
+        valueType,
+    }
+}
+
+/**
+ * Gets the effective change to use for display
+ * Uses provided change prop if available, otherwise calculates from chartData
+ * @param change - Optional change prop from component
+ * @param chartData - Array of chart data points
+ * @returns Effective change object or null
+ */
+export const getEffectiveChange = (
+    change?: StatCardChange | null | undefined,
+    chartData?: ChartDataPoint[]
+): StatCardChange | Pick<StatCardChange, 'value' | 'valueType'> | null => {
+    if (change) return change
+    return calculateChangeFromChartData(chartData)
+}
+
+/**
+ * Determines if decrease color should be shown
+ * Uses effectiveChange valueType if available, otherwise falls back to trend calculation
+ * @param effectiveChange - The effective change object (from prop or calculated)
+ * @param isTrendingDown - Whether chart data is trending down
+ * @returns true if decrease color should be shown, false for increase
+ */
+export const shouldShowDecreaseColor = (
+    effectiveChange:
+        | StatCardChange
+        | Pick<StatCardChange, 'value' | 'valueType'>
+        | null,
+    isTrendingDown: boolean
+): boolean => {
+    if (effectiveChange) {
+        return effectiveChange.valueType === ChangeType.DECREASE
+    }
+    return isTrendingDown
+}

package/lib/components/StatCardV2/StatCardV2.chartConfig.ts

@@ -0,0 +1,47 @@
+import type { ChartV2Options } from '../ChartsV2'
+
+const BASE_STATCARD_CHART_OPTIONS: ChartV2Options = {
+    legend: {
+        enabled: false,
+    },
+    chart: {
+        backgroundColor: 'transparent',
+        height: 50,
+        spacingLeft: 0,
+        spacingRight: 0,
+        spacingTop: 0,
+        spacingBottom: 0,
+        marginLeft: 0,
+        marginRight: 0,
+        marginTop: 0,
+        marginBottom: 0,
+    },
+    plotOptions: {
+        series: {
+            marker: {
+                enabled: false,
+            },
+        },
+    },
+    xAxis: {
+        labels: {
+            enabled: false,
+        },
+        gridLineWidth: 0,
+        lineWidth: 0,
+    },
+    yAxis: {
+        labels: {
+            enabled: false,
+        },
+        gridLineWidth: 0,
+        lineWidth: 0,
+    },
+}
+
+export const buildStatCardV2ChartOptions = (
+    overrides?: ChartV2Options
+): ChartV2Options => ({
+    ...BASE_STATCARD_CHART_OPTIONS,
+    ...overrides,
+})