@wealthx/ui 0.0.1 → 1.0.1

package/dist/charts/index.d.mts

@@ -0,0 +1,260 @@
+import React from 'react';
+import { ChartOptions } from 'chart.js';
+
+declare const tooltipsBaseOption: {
+    readonly enabled: true;
+    readonly mode: "nearest";
+    readonly intersect: false;
+    readonly backgroundColor: "#FFFFFF";
+    readonly titleColor: "#040D13";
+    readonly bodyColor: "#040D13";
+    readonly displayColors: false;
+    readonly borderColor: "#040D13";
+    readonly borderWidth: 1;
+    readonly titleFont: {
+        readonly family: "\"Proxima Nova\", sans-serif";
+        readonly style: "normal";
+        readonly size: 14;
+    };
+    readonly bodyFont: {
+        readonly family: "\"Proxima Nova\", sans-serif";
+        readonly style: "normal";
+        readonly weight: "bold";
+        readonly size: 13;
+    };
+};
+declare const buildChartDataFromObject: (chartDataObject?: Record<string, number>) => {
+    x: string;
+    y: number;
+}[];
+declare const formatNumber: (value: number) => string;
+declare const formatNumberWithText: (value: number, precision?: number) => string;
+declare const formatNumberWithDollar: (value: number) => string;
+declare const convertToFloat: (value: number, precision: number) => string;
+
+interface LoadingChartBackdropProps {
+    isLoading: boolean;
+    isError: boolean;
+}
+declare const LoadingChartBackdrop: React.FC<LoadingChartBackdropProps>;
+
+type ChartType = "line" | "bar";
+/**
+ * Default chart options for the backoffice switchable (line/bar) chart.
+ * Uses time scale on x, shared tooltip/legend styling, and optional theme colors.
+ */
+declare function getChartOptions(options?: {
+    primaryColor?: string;
+    textColor?: string;
+}): ChartOptions;
+interface BackofficeSwitchableChartProps {
+    chartTitle?: string;
+    datasets: any[];
+    /** When provided, merged with getChartOptions(); when omitted, only getChartOptions() is used. */
+    chartOptions?: ChartOptions;
+    isLoading: boolean;
+    isError: boolean;
+    chartType: ChartType;
+    onChartTypeChange: (type: ChartType) => void;
+    primaryColor?: string;
+    textColor?: string;
+}
+declare const BackofficeSwitchableChart: React.FC<BackofficeSwitchableChartProps>;
+
+interface LineChartDataItem {
+    x: string | Date;
+    y: number;
+}
+interface LineChartDataset {
+    data: LineChartDataItem[];
+    label?: string;
+    customOptions?: Record<string, any>;
+}
+interface FrontendLineChartProps {
+    lineChartData?: LineChartDataset[];
+    legendDisplay?: boolean;
+    title?: string;
+    customChartOptions?: Record<string, any>;
+    height?: number;
+    invertYAxis?: boolean;
+    referenceLineValue?: number;
+    referenceLineLabel?: string;
+    referenceLineColor?: string;
+    mainLineColor?: string;
+}
+declare const FrontendLineChart: React.FC<FrontendLineChartProps>;
+
+interface MobileLineChartDataItem {
+    x: string | Date;
+    y: number;
+}
+interface MobileLineChartDataset {
+    data: MobileLineChartDataItem[];
+    label?: string;
+    color?: string;
+    lineSpacing?: number[];
+    borderWidth?: number;
+    customOptions?: Record<string, any>;
+}
+interface FrontendLineChartMobileProps {
+    chartTitle?: string;
+    subTitle?: string;
+    titleValue?: number;
+    chartData?: MobileLineChartDataset[];
+    defaultColor?: string;
+    customChartOptions?: Record<string, any>;
+}
+declare const FrontendLineChartMobile: React.FC<FrontendLineChartMobileProps>;
+
+interface BarChartDataset {
+    label: string;
+    data: number[];
+    backgroundColor?: string | string[];
+    borderColor?: string | string[];
+    borderWidth?: number;
+}
+interface FrontendBarChartData {
+    labels: string[];
+    datasets: BarChartDataset[];
+}
+interface FrontendBarChartProps {
+    data: FrontendBarChartData;
+    customChartOptions?: Record<string, any>;
+}
+declare const FrontendBarChart: React.FC<FrontendBarChartProps>;
+
+interface DoughnutChartDataItem {
+    data: number[];
+    title: string[];
+    colors?: string[];
+    icons?: React.ReactNode[];
+}
+interface FrontendDoughnutChartProps {
+    title?: string;
+    data?: DoughnutChartDataItem;
+    textTop?: string;
+    textBottom?: string;
+    legendDisplay?: boolean;
+    customLegend?: boolean;
+    isBottomColor?: boolean;
+    bottomColor?: string;
+}
+declare const FrontendDoughnutChart: React.FC<FrontendDoughnutChartProps>;
+
+interface MixedChartDataset {
+    type: "bar" | "line";
+    label: string;
+    data: Array<{
+        x: string | Date;
+        y: number;
+    }>;
+    backgroundColor?: string;
+    borderColor?: string;
+    borderWidth?: number;
+    order?: number;
+    fill?: boolean;
+    tension?: number;
+    pointRadius?: number;
+    barPercentage?: number;
+    pointStyle?: string;
+    pointBorderColor?: string;
+    pointBackgroundColor?: string;
+    pointHoverBackgroundColor?: string;
+    pointHoverBorderColor?: string;
+    hoverBackgroundColor?: string;
+    hoverBorderColor?: string;
+}
+interface FrontendMixedChartProps {
+    datasets: MixedChartDataset[];
+    labels?: string[];
+    title?: string;
+    isLoading?: boolean;
+    isError?: boolean;
+    timeFilters?: string[];
+    defaultTimeFilterIndex?: number;
+    onTimeFilterChange?: (index: number) => void;
+    height?: number;
+    isMobile?: boolean;
+    customChartOptions?: Record<string, any>;
+}
+declare const FrontendMixedChart: React.FC<FrontendMixedChartProps>;
+
+interface FrontendStackedChartProps {
+    datasets?: number[][];
+    labels?: string[];
+    chartTitle?: string;
+    xAxisLabels?: string[];
+    showLegend?: boolean;
+    currency?: string;
+    dataColors?: string | string[];
+    isLoading?: boolean;
+    noDataText?: string;
+}
+declare const FRONTEND_STACKED_CHART_MOCK_X_AXIS_LABELS: string[];
+declare const FRONTEND_STACKED_CHART_MOCK_LABELS: string[];
+declare const FRONTEND_STACKED_CHART_MOCK_DATA: number[][];
+declare const FRONTEND_STACKED_CHART_MOCK_COLORS: string[];
+declare const FrontendStackedChart: React.FC<FrontendStackedChartProps>;
+
+interface FrontendIncomeExpenseHorizontalBarChartProps {
+    totalIncome: number;
+    totalExpense: number;
+    incomeColor?: string;
+    expenseColor?: string;
+    textColor?: string;
+    height?: number;
+}
+declare const FrontendIncomeExpenseHorizontalBarChart: React.FC<FrontendIncomeExpenseHorizontalBarChartProps>;
+
+interface PercentageBarPart {
+    title: string;
+    percentage: number;
+}
+interface FrontendPercentageBarProps {
+    defaultTitle?: string;
+    chartColors?: string[];
+    parts?: PercentageBarPart[];
+    chartIcons?: React.ReactNode[];
+    showFullCategory?: boolean;
+}
+declare const FrontendPercentageBar: React.FC<FrontendPercentageBarProps>;
+
+interface LiabilitiesPart extends PercentageBarPart {
+    id?: string;
+}
+interface FrontendLiabilitiesChartProps {
+    defaultTitle?: string;
+    color?: string;
+    parts?: LiabilitiesPart[];
+}
+declare const FrontendLiabilitiesChart: React.FC<FrontendLiabilitiesChartProps>;
+
+interface ScenarioDataPoint {
+    x: string | Date;
+    y: number;
+}
+interface FrontendScenarioLineChartProps {
+    data?: ScenarioDataPoint[];
+    secondaryData?: ScenarioDataPoint[];
+    isLoading?: boolean;
+    isError?: boolean;
+    height?: number;
+    desiredLoanAmount?: number;
+    primaryColor?: string;
+    textColor?: string;
+    customChartOptions?: Record<string, any>;
+}
+declare const FrontendScenarioLineChart: React.FC<FrontendScenarioLineChartProps>;
+
+declare const mockLineChartData: LineChartDataset[];
+declare const mockMobileLineChartData: MobileLineChartDataset[];
+declare const mockBarChartData: FrontendBarChartData;
+declare const mockDoughnutData: DoughnutChartDataItem;
+declare const mockMixedChartDatasets: MixedChartDataset[];
+declare const mockPercentageBarParts: PercentageBarPart[];
+declare const mockPercentageBarColors: string[];
+declare const mockLiabilitiesParts: LiabilitiesPart[];
+declare const mockScenarioData: ScenarioDataPoint[];
+declare const mockScenarioSecondaryData: ScenarioDataPoint[];
+
+export { BackofficeSwitchableChart, type BackofficeSwitchableChartProps, type BarChartDataset, type ChartType, type DoughnutChartDataItem, FRONTEND_STACKED_CHART_MOCK_COLORS, FRONTEND_STACKED_CHART_MOCK_DATA, FRONTEND_STACKED_CHART_MOCK_LABELS, FRONTEND_STACKED_CHART_MOCK_X_AXIS_LABELS, FrontendBarChart, type FrontendBarChartData, type FrontendBarChartProps, FrontendDoughnutChart, type FrontendDoughnutChartProps, FrontendIncomeExpenseHorizontalBarChart, type FrontendIncomeExpenseHorizontalBarChartProps, FrontendLiabilitiesChart, type FrontendLiabilitiesChartProps, FrontendLineChart, FrontendLineChartMobile, type FrontendLineChartMobileProps, type FrontendLineChartProps, FrontendMixedChart, type FrontendMixedChartProps, FrontendPercentageBar, type FrontendPercentageBarProps, FrontendScenarioLineChart, type FrontendScenarioLineChartProps, FrontendStackedChart, type FrontendStackedChartProps, type LiabilitiesPart, type LineChartDataItem, type LineChartDataset, LoadingChartBackdrop, type LoadingChartBackdropProps, type MixedChartDataset, type MobileLineChartDataItem, type MobileLineChartDataset, type PercentageBarPart, type ScenarioDataPoint, buildChartDataFromObject, convertToFloat, formatNumber, formatNumberWithDollar, formatNumberWithText, getChartOptions, mockBarChartData, mockDoughnutData, mockLiabilitiesParts, mockLineChartData, mockMixedChartDatasets, mockMobileLineChartData, mockPercentageBarColors, mockPercentageBarParts, mockScenarioData, mockScenarioSecondaryData, tooltipsBaseOption };

package/dist/charts/index.d.ts

@@ -0,0 +1,260 @@
+import React from 'react';
+import { ChartOptions } from 'chart.js';
+
+declare const tooltipsBaseOption: {
+    readonly enabled: true;
+    readonly mode: "nearest";
+    readonly intersect: false;
+    readonly backgroundColor: "#FFFFFF";
+    readonly titleColor: "#040D13";
+    readonly bodyColor: "#040D13";
+    readonly displayColors: false;
+    readonly borderColor: "#040D13";
+    readonly borderWidth: 1;
+    readonly titleFont: {
+        readonly family: "\"Proxima Nova\", sans-serif";
+        readonly style: "normal";
+        readonly size: 14;
+    };
+    readonly bodyFont: {
+        readonly family: "\"Proxima Nova\", sans-serif";
+        readonly style: "normal";
+        readonly weight: "bold";
+        readonly size: 13;
+    };
+};
+declare const buildChartDataFromObject: (chartDataObject?: Record<string, number>) => {
+    x: string;
+    y: number;
+}[];
+declare const formatNumber: (value: number) => string;
+declare const formatNumberWithText: (value: number, precision?: number) => string;
+declare const formatNumberWithDollar: (value: number) => string;
+declare const convertToFloat: (value: number, precision: number) => string;
+
+interface LoadingChartBackdropProps {
+    isLoading: boolean;
+    isError: boolean;
+}
+declare const LoadingChartBackdrop: React.FC<LoadingChartBackdropProps>;
+
+type ChartType = "line" | "bar";
+/**
+ * Default chart options for the backoffice switchable (line/bar) chart.
+ * Uses time scale on x, shared tooltip/legend styling, and optional theme colors.
+ */
+declare function getChartOptions(options?: {
+    primaryColor?: string;
+    textColor?: string;
+}): ChartOptions;
+interface BackofficeSwitchableChartProps {
+    chartTitle?: string;
+    datasets: any[];
+    /** When provided, merged with getChartOptions(); when omitted, only getChartOptions() is used. */
+    chartOptions?: ChartOptions;
+    isLoading: boolean;
+    isError: boolean;
+    chartType: ChartType;
+    onChartTypeChange: (type: ChartType) => void;
+    primaryColor?: string;
+    textColor?: string;
+}
+declare const BackofficeSwitchableChart: React.FC<BackofficeSwitchableChartProps>;
+
+interface LineChartDataItem {
+    x: string | Date;
+    y: number;
+}
+interface LineChartDataset {
+    data: LineChartDataItem[];
+    label?: string;
+    customOptions?: Record<string, any>;
+}
+interface FrontendLineChartProps {
+    lineChartData?: LineChartDataset[];
+    legendDisplay?: boolean;
+    title?: string;
+    customChartOptions?: Record<string, any>;
+    height?: number;
+    invertYAxis?: boolean;
+    referenceLineValue?: number;
+    referenceLineLabel?: string;
+    referenceLineColor?: string;
+    mainLineColor?: string;
+}
+declare const FrontendLineChart: React.FC<FrontendLineChartProps>;
+
+interface MobileLineChartDataItem {
+    x: string | Date;
+    y: number;
+}
+interface MobileLineChartDataset {
+    data: MobileLineChartDataItem[];
+    label?: string;
+    color?: string;
+    lineSpacing?: number[];
+    borderWidth?: number;
+    customOptions?: Record<string, any>;
+}
+interface FrontendLineChartMobileProps {
+    chartTitle?: string;
+    subTitle?: string;
+    titleValue?: number;
+    chartData?: MobileLineChartDataset[];
+    defaultColor?: string;
+    customChartOptions?: Record<string, any>;
+}
+declare const FrontendLineChartMobile: React.FC<FrontendLineChartMobileProps>;
+
+interface BarChartDataset {
+    label: string;
+    data: number[];
+    backgroundColor?: string | string[];
+    borderColor?: string | string[];
+    borderWidth?: number;
+}
+interface FrontendBarChartData {
+    labels: string[];
+    datasets: BarChartDataset[];
+}
+interface FrontendBarChartProps {
+    data: FrontendBarChartData;
+    customChartOptions?: Record<string, any>;
+}
+declare const FrontendBarChart: React.FC<FrontendBarChartProps>;
+
+interface DoughnutChartDataItem {
+    data: number[];
+    title: string[];
+    colors?: string[];
+    icons?: React.ReactNode[];
+}
+interface FrontendDoughnutChartProps {
+    title?: string;
+    data?: DoughnutChartDataItem;
+    textTop?: string;
+    textBottom?: string;
+    legendDisplay?: boolean;
+    customLegend?: boolean;
+    isBottomColor?: boolean;
+    bottomColor?: string;
+}
+declare const FrontendDoughnutChart: React.FC<FrontendDoughnutChartProps>;
+
+interface MixedChartDataset {
+    type: "bar" | "line";
+    label: string;
+    data: Array<{
+        x: string | Date;
+        y: number;
+    }>;
+    backgroundColor?: string;
+    borderColor?: string;
+    borderWidth?: number;
+    order?: number;
+    fill?: boolean;
+    tension?: number;
+    pointRadius?: number;
+    barPercentage?: number;
+    pointStyle?: string;
+    pointBorderColor?: string;
+    pointBackgroundColor?: string;
+    pointHoverBackgroundColor?: string;
+    pointHoverBorderColor?: string;
+    hoverBackgroundColor?: string;
+    hoverBorderColor?: string;
+}
+interface FrontendMixedChartProps {
+    datasets: MixedChartDataset[];
+    labels?: string[];
+    title?: string;
+    isLoading?: boolean;
+    isError?: boolean;
+    timeFilters?: string[];
+    defaultTimeFilterIndex?: number;
+    onTimeFilterChange?: (index: number) => void;
+    height?: number;
+    isMobile?: boolean;
+    customChartOptions?: Record<string, any>;
+}
+declare const FrontendMixedChart: React.FC<FrontendMixedChartProps>;
+
+interface FrontendStackedChartProps {
+    datasets?: number[][];
+    labels?: string[];
+    chartTitle?: string;
+    xAxisLabels?: string[];
+    showLegend?: boolean;
+    currency?: string;
+    dataColors?: string | string[];
+    isLoading?: boolean;
+    noDataText?: string;
+}
+declare const FRONTEND_STACKED_CHART_MOCK_X_AXIS_LABELS: string[];
+declare const FRONTEND_STACKED_CHART_MOCK_LABELS: string[];
+declare const FRONTEND_STACKED_CHART_MOCK_DATA: number[][];
+declare const FRONTEND_STACKED_CHART_MOCK_COLORS: string[];
+declare const FrontendStackedChart: React.FC<FrontendStackedChartProps>;
+
+interface FrontendIncomeExpenseHorizontalBarChartProps {
+    totalIncome: number;
+    totalExpense: number;
+    incomeColor?: string;
+    expenseColor?: string;
+    textColor?: string;
+    height?: number;
+}
+declare const FrontendIncomeExpenseHorizontalBarChart: React.FC<FrontendIncomeExpenseHorizontalBarChartProps>;
+
+interface PercentageBarPart {
+    title: string;
+    percentage: number;
+}
+interface FrontendPercentageBarProps {
+    defaultTitle?: string;
+    chartColors?: string[];
+    parts?: PercentageBarPart[];
+    chartIcons?: React.ReactNode[];
+    showFullCategory?: boolean;
+}
+declare const FrontendPercentageBar: React.FC<FrontendPercentageBarProps>;
+
+interface LiabilitiesPart extends PercentageBarPart {
+    id?: string;
+}
+interface FrontendLiabilitiesChartProps {
+    defaultTitle?: string;
+    color?: string;
+    parts?: LiabilitiesPart[];
+}
+declare const FrontendLiabilitiesChart: React.FC<FrontendLiabilitiesChartProps>;
+
+interface ScenarioDataPoint {
+    x: string | Date;
+    y: number;
+}
+interface FrontendScenarioLineChartProps {
+    data?: ScenarioDataPoint[];
+    secondaryData?: ScenarioDataPoint[];
+    isLoading?: boolean;
+    isError?: boolean;
+    height?: number;
+    desiredLoanAmount?: number;
+    primaryColor?: string;
+    textColor?: string;
+    customChartOptions?: Record<string, any>;
+}
+declare const FrontendScenarioLineChart: React.FC<FrontendScenarioLineChartProps>;
+
+declare const mockLineChartData: LineChartDataset[];
+declare const mockMobileLineChartData: MobileLineChartDataset[];
+declare const mockBarChartData: FrontendBarChartData;
+declare const mockDoughnutData: DoughnutChartDataItem;
+declare const mockMixedChartDatasets: MixedChartDataset[];
+declare const mockPercentageBarParts: PercentageBarPart[];
+declare const mockPercentageBarColors: string[];
+declare const mockLiabilitiesParts: LiabilitiesPart[];
+declare const mockScenarioData: ScenarioDataPoint[];
+declare const mockScenarioSecondaryData: ScenarioDataPoint[];
+
+export { BackofficeSwitchableChart, type BackofficeSwitchableChartProps, type BarChartDataset, type ChartType, type DoughnutChartDataItem, FRONTEND_STACKED_CHART_MOCK_COLORS, FRONTEND_STACKED_CHART_MOCK_DATA, FRONTEND_STACKED_CHART_MOCK_LABELS, FRONTEND_STACKED_CHART_MOCK_X_AXIS_LABELS, FrontendBarChart, type FrontendBarChartData, type FrontendBarChartProps, FrontendDoughnutChart, type FrontendDoughnutChartProps, FrontendIncomeExpenseHorizontalBarChart, type FrontendIncomeExpenseHorizontalBarChartProps, FrontendLiabilitiesChart, type FrontendLiabilitiesChartProps, FrontendLineChart, FrontendLineChartMobile, type FrontendLineChartMobileProps, type FrontendLineChartProps, FrontendMixedChart, type FrontendMixedChartProps, FrontendPercentageBar, type FrontendPercentageBarProps, FrontendScenarioLineChart, type FrontendScenarioLineChartProps, FrontendStackedChart, type FrontendStackedChartProps, type LiabilitiesPart, type LineChartDataItem, type LineChartDataset, LoadingChartBackdrop, type LoadingChartBackdropProps, type MixedChartDataset, type MobileLineChartDataItem, type MobileLineChartDataset, type PercentageBarPart, type ScenarioDataPoint, buildChartDataFromObject, convertToFloat, formatNumber, formatNumberWithDollar, formatNumberWithText, getChartOptions, mockBarChartData, mockDoughnutData, mockLiabilitiesParts, mockLineChartData, mockMixedChartDatasets, mockMobileLineChartData, mockPercentageBarColors, mockPercentageBarParts, mockScenarioData, mockScenarioSecondaryData, tooltipsBaseOption };