@pagamio/frontend-commons-lib 0.8.175 → 0.8.183

package/lib/dashboard-visuals/types/index.d.ts

@@ -0,0 +1,83 @@
+import type { MRT_ColumnDef } from 'mantine-react-table';
+import type { QueryProps } from 'src/shared/types';
+export interface MetricData {
+    [key: string]: any;
+}
+export type ChartToolTipProps<T = any> = {
+    [key: string]: T;
+};
+export interface TableColumn<TData extends Record<string, any>> extends MRT_ColumnDef<TData> {
+    header: string;
+    accessor: keyof TData;
+    enableCopy?: boolean;
+    formattedCellElement?: (value: string | number) => React.ReactNode;
+}
+export interface DistributionChartTooltip {
+    treeMapSegmentLabel: string;
+    tooltipValueFormat: string;
+    tooltipTitle: string;
+    tooltipUnit: string;
+    tooltipAdditionalFields: (string | TooltipField)[];
+}
+export type ChartOptionsProps<TData> = {
+    tooltip?: {
+        trigger: string;
+        [key: string]: unknown;
+    };
+    legend?: {
+        orient?: string;
+        top?: number | string;
+        left?: string;
+        padding?: number[];
+        type?: string;
+        textStyle?: {
+            fontSize: number;
+        };
+        [key: string]: unknown;
+    };
+    color?: string[];
+    series?: Array<{
+        name?: string;
+        type?: string;
+        radius?: string[];
+        center?: string[];
+        data?: TData[];
+        emphasis?: {
+            itemStyle?: {
+                shadowBlur?: number;
+                shadowOffsetX?: number;
+                shadowColor?: string;
+                [key: string]: unknown;
+            };
+        };
+        [key: string]: unknown;
+    }>;
+    grid?: {
+        containLabel: boolean;
+    };
+    [key: string]: unknown;
+};
+export type StatisticsQueryProps = {
+    title: string;
+    format: string;
+    valueKey: string;
+    previousValueKey?: string;
+    changeKey: string;
+    query: QueryProps;
+};
+export type DistributionQueryProps = {
+    title: string;
+    query: QueryProps;
+    seriesDataValueKey: string;
+    xAxisDataValueKey: string;
+    chartToolTip?: ChartToolTipProps;
+};
+export interface TooltipField {
+    toolTipkey: string;
+    valueKey: string;
+    nameKey: string;
+    label?: string;
+    suffix?: string;
+    format?: string;
+    formatter?: (value: any, currency?: string, displaySymbol?: string) => string;
+}

package/lib/dashboard-visuals/types/index.js

@@ -0,0 +1 @@
+export {};

package/lib/dashboard-visuals/types/metricDetailData.d.ts

@@ -0,0 +1,25 @@
+import type { ChartToolTipProps, DistributionChartTooltip, DistributionQueryProps, StatisticsQueryProps, TableColumn } from '.';
+export interface MetricDetailData<TData extends {
+    id: string | number;
+}> {
+    statisticsUrl?: string;
+    title: string;
+    topFiveChartTitle: string;
+    bottomFiveChartTitle: string;
+    itemStatisticsQuery: StatisticsQueryProps;
+    valueMetricsQuery: StatisticsQueryProps;
+    averageMetricsQuery: StatisticsQueryProps;
+    distributionMetricsQuery: DistributionQueryProps;
+    yAxisDataNameKey: string;
+    xAxisNameKey: string;
+    xAxisLabel: string;
+    yAxisLabel: string;
+    nameKey: string;
+    valueKey: string;
+    dataGridSearchKey: string;
+    dataGridColumns: TableColumn<TData>[];
+    dataSearchInputPlaceHolder: string;
+    chartToolTip?: ChartToolTipProps;
+    detailsTableTitle?: string;
+    distributionChartTooltip: DistributionChartTooltip;
+}

package/lib/dashboard-visuals/types/metricDetailData.js

@@ -0,0 +1 @@
+export {};

package/lib/dashboard-visuals/utils/api.d.ts

@@ -0,0 +1,5 @@
+export declare enum DashboardPaths {
+    PAGED = "/dashboard/query/paged",
+    QUERY = "/dashboard/query",
+    METRICS = "/dashboard/metrics"
+}

package/lib/dashboard-visuals/utils/api.js

@@ -0,0 +1,6 @@
+export var DashboardPaths;
+(function (DashboardPaths) {
+    DashboardPaths["PAGED"] = "/dashboard/query/paged";
+    DashboardPaths["QUERY"] = "/dashboard/query";
+    DashboardPaths["METRICS"] = "/dashboard/metrics";
+})(DashboardPaths || (DashboardPaths = {}));

package/lib/dashboard-visuals/utils/chartOptions.d.ts

@@ -0,0 +1,481 @@
+import type { MetricData } from '../types';
+interface ChartBarOptions {
+    title?: string;
+    colorScheme?: string[];
+    yAxisDataNameKey: string;
+    xAxisNameKey: string;
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    chartToolTip?: any;
+}
+interface GroupedChartOptions {
+    xAxisLabel: string;
+    xAxisValueKey: string;
+    rightYAxisValueKey: string;
+    leftYAxisValueKey: string;
+    chartToolTip?: any;
+    data: MetricData[];
+    yAxisLabelFormatter?: (value: number) => string;
+}
+interface GetLineGraphOptionsProp {
+    title: string;
+    yAxisLabel: string;
+    chartToolTip?: any;
+    data: MetricData[];
+    yAxisLabelFormatter?: (value: number) => string;
+}
+interface GetDonutChartOptionsProps {
+    data: {
+        legendData: any[];
+        seriesData: Record<string, any>[];
+    };
+}
+interface LargeDatasetChartOptions extends GetDonutChartOptionsProps {
+    labelFormatter?: (params: any) => string;
+    tooltipFormatter?: any;
+}
+export interface CreateDistributionMetricOptionsProps {
+    distributionChartTooltip: {
+        tooltipValueFormat: string;
+        tooltipTitle: string;
+        tooltipUnit: string;
+        treeMapSegmentLabel: string;
+    };
+    distributionData: any[];
+    processedTooltipFields: any[];
+    xAxisDataValueKey: string;
+    seriesDataValueKey: string;
+    displaySymbol?: string;
+}
+export declare const createDistributionMetricOptions: ({ distributionChartTooltip, distributionData, processedTooltipFields, xAxisDataValueKey, seriesDataValueKey, displaySymbol, }: CreateDistributionMetricOptionsProps) => {
+    tooltip: {
+        trigger: string;
+        formatter: any;
+    };
+    toolbox: {
+        show: boolean;
+        feature: {
+            dataView: {
+                show: boolean;
+                title: string;
+                readOnly: boolean;
+                lang: string[];
+            };
+            saveAsImage: {
+                show: boolean;
+                title: string;
+            };
+        };
+        right: string;
+        top: number;
+    };
+    grid: {
+        left: string;
+        right: string;
+        bottom: string;
+        containLabel: boolean;
+    };
+    series: {
+        type: string;
+        data: Record<string, any>[];
+        label: {
+            show: boolean;
+            formatter: ((params: any) => string) | undefined;
+            position: string;
+        };
+        breadcrumb: {
+            show: boolean;
+        };
+        roam: string;
+        nodeClick: boolean;
+        animation: boolean;
+        height: string;
+        itemStyle: {
+            borderColor: string;
+            borderWidth: number;
+            gapWidth: number;
+        };
+        emphasis: {
+            itemStyle: {
+                shadowBlur: number;
+                shadowOffsetX: number;
+                shadowColor: string;
+            };
+        };
+        levels: {
+            itemStyle: {
+                borderColor: string;
+                borderWidth: number;
+                gapWidth: number;
+            };
+            upperLabel: {
+                show: boolean;
+            };
+        }[];
+    }[];
+    dataZoom: {
+        type: string;
+        show: boolean;
+        start: number;
+        end: number;
+        height: number;
+        bottom: number;
+        left: string;
+        right: string;
+        zoomLock: boolean;
+        showDetail: boolean;
+        borderColor: string;
+        borderRadius: number;
+        backgroundColor: string;
+        fillerColor: string;
+        handleIcon: string;
+        handleSize: string;
+        handleStyle: {
+            color: string;
+            shadowBlur: number;
+            shadowColor: string;
+            shadowOffsetX: number;
+            shadowOffsetY: number;
+        };
+    }[];
+};
+export declare const getGroupedChartOptions: ({ xAxisLabel, xAxisValueKey, rightYAxisValueKey, leftYAxisValueKey, chartToolTip, data, yAxisLabelFormatter, }: GroupedChartOptions) => {
+    tooltip: any;
+    legend: {
+        data: string[];
+        top: number;
+        textStyle: {
+            fontSize: number;
+        };
+    };
+    grid: {
+        left: string;
+        right: string;
+        bottom: string;
+        containLabel: boolean;
+    };
+    xAxis: {
+        type: string;
+        name: string;
+        data: any[];
+        axisLabel: {
+            interval: number;
+            rotate: number;
+        };
+    };
+    yAxis: ({
+        type: string;
+        name: string;
+        position: string;
+        axisLine: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisLabel: {
+            formatter: (value: number) => string;
+        };
+    } | {
+        type: string;
+        name: string;
+        position: string;
+        axisLine: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisLabel?: undefined;
+    })[];
+    series: ({
+        name: string;
+        type: string;
+        data: any[];
+        itemStyle: {
+            color: string;
+        };
+        yAxisIndex?: undefined;
+    } | {
+        name: string;
+        type: string;
+        yAxisIndex: number;
+        data: any[];
+        itemStyle: {
+            color: string;
+        };
+    })[];
+    dataZoom: {
+        type: string;
+        start: number;
+        end: number;
+    }[];
+    responsive: boolean;
+    maintainAspectRatio: boolean;
+};
+export declare const getLineGraphOptions: ({ title, yAxisLabel, chartToolTip, data, yAxisLabelFormatter, }: GetLineGraphOptionsProp) => {
+    tooltip?: undefined;
+    legend?: undefined;
+    grid?: undefined;
+    xAxis?: undefined;
+    yAxis?: undefined;
+    series?: undefined;
+} | {
+    tooltip: any;
+    legend: {
+        data: any[];
+        bottom: number;
+    };
+    grid: {
+        left: string;
+        right: string;
+        bottom: string;
+        top: string;
+        containLabel: boolean;
+    };
+    xAxis: {
+        type: string;
+        axisLabel: {
+            formatter: (value: number) => string;
+            name: string;
+            hideOverlap: boolean;
+        };
+        splitLine: {
+            show: boolean;
+        };
+    };
+    yAxis: {
+        type: string;
+        name: string;
+        axisLabel: {
+            formatter: (value: number) => string;
+        };
+    };
+    series: {
+        type: string;
+        name: any;
+        data: any;
+        showSymbol: boolean;
+    }[];
+};
+export declare const getChartBarOptions: ({ title, colorScheme, yAxisDataNameKey, xAxisNameKey, xAxisLabel, yAxisLabel, chartToolTip, data, }: ChartBarOptions & {
+    data: MetricData[];
+}) => {
+    tooltip: any;
+    grid: {
+        left: string;
+        right: string;
+        bottom: string;
+        top: string;
+        containLabel: boolean;
+    };
+    xAxis: {
+        type: string;
+        name: string;
+        axisLine: {
+            show: boolean;
+        };
+        axisTick: {
+            show: boolean;
+        };
+        splitLine: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+    };
+    yAxis: {
+        type: string;
+        name: string;
+        data: any[];
+        axisLabel: {
+            formatter: (value: string) => string;
+        };
+    };
+    series: {
+        name: string;
+        type: string;
+        data: any[];
+        itemStyle: {
+            color: {
+                type: string;
+                x: number;
+                y: number;
+                x2: number;
+                y2: number;
+                colorStops: {
+                    offset: number;
+                    color: string;
+                }[];
+            };
+        };
+        barWidth: string;
+        emphasis: {
+            itemStyle: {
+                opacity: number;
+            };
+        };
+    }[];
+    aria: {
+        enabled: boolean;
+    };
+    animation: boolean;
+    animationDuration: number;
+    animationEasing: string;
+};
+export declare const getDonutChartOptions: ({ data }: GetDonutChartOptionsProps) => {
+    tooltip: {
+        trigger: string;
+        formatter: string;
+    };
+    legend: {
+        orient: string;
+        bottom: number;
+        left: string;
+    };
+    series: {
+        name: string;
+        type: string;
+        radius: string[];
+        avoidLabelOverlap: boolean;
+        itemStyle: {
+            borderRadius: number;
+            borderColor: string;
+            borderWidth: number;
+        };
+        label: {
+            show: boolean;
+            position: string;
+            formatter: string;
+            fontSize: number;
+            lineHeight: number;
+            rich: {
+                b: {
+                    fontSize: number;
+                    lineHeight: number;
+                };
+            };
+        };
+        labelLine: {
+            show: boolean;
+            length: number;
+            length2: number;
+        };
+        emphasis: {
+            label: {
+                show: boolean;
+                fontSize: number;
+                fontWeight: string;
+            };
+            itemStyle: {
+                shadowBlur: number;
+                shadowOffsetX: number;
+                shadowColor: string;
+            };
+        };
+        data: {
+            legendData: any[];
+            seriesData: Record<string, any>[];
+        };
+    }[];
+};
+export declare const formatChartLabel: (params: {
+    name: string;
+    value: number;
+    valueLabel: string;
+    treeMapPercent?: number;
+}) => string;
+export declare const getLargeDatasetChartOptions: ({ data, labelFormatter, tooltipFormatter }: LargeDatasetChartOptions) => {
+    tooltip: {
+        trigger: string;
+        formatter: any;
+    };
+    toolbox: {
+        show: boolean;
+        feature: {
+            dataView: {
+                show: boolean;
+                title: string;
+                readOnly: boolean;
+                lang: string[];
+            };
+            saveAsImage: {
+                show: boolean;
+                title: string;
+            };
+        };
+        right: string;
+        top: number;
+    };
+    grid: {
+        left: string;
+        right: string;
+        bottom: string;
+        containLabel: boolean;
+    };
+    series: {
+        type: string;
+        data: Record<string, any>[];
+        label: {
+            show: boolean;
+            formatter: ((params: any) => string) | undefined;
+            position: string;
+        };
+        breadcrumb: {
+            show: boolean;
+        };
+        roam: string;
+        nodeClick: boolean;
+        animation: boolean;
+        height: string;
+        itemStyle: {
+            borderColor: string;
+            borderWidth: number;
+            gapWidth: number;
+        };
+        emphasis: {
+            itemStyle: {
+                shadowBlur: number;
+                shadowOffsetX: number;
+                shadowColor: string;
+            };
+        };
+        levels: {
+            itemStyle: {
+                borderColor: string;
+                borderWidth: number;
+                gapWidth: number;
+            };
+            upperLabel: {
+                show: boolean;
+            };
+        }[];
+    }[];
+    dataZoom: {
+        type: string;
+        show: boolean;
+        start: number;
+        end: number;
+        height: number;
+        bottom: number;
+        left: string;
+        right: string;
+        zoomLock: boolean;
+        showDetail: boolean;
+        borderColor: string;
+        borderRadius: number;
+        backgroundColor: string;
+        fillerColor: string;
+        handleIcon: string;
+        handleSize: string;
+        handleStyle: {
+            color: string;
+            shadowBlur: number;
+            shadowColor: string;
+            shadowOffsetX: number;
+            shadowOffsetY: number;
+        };
+    }[];
+};
+export {};