universal-adaptive-bars 0.0.1

package/src/lib/components/BarNative.tsx

@@ -0,0 +1,44 @@
+import React, { useMemo } from 'react';
+import { Rect } from 'react-native-svg';
+import type { DataPoint } from '../types';
+
+interface BarNativeProps {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    data: DataPoint;
+    onClick?: (data: DataPoint) => void;
+    isActive?: boolean;
+    isDimmed?: boolean;
+    accessibilityLabel?: string;
+    accessibilityRole?: string;
+}
+
+export const BarNative: React.FC<BarNativeProps> = ({
+    x, y, width, height, data, onClick, isActive, isDimmed, accessibilityLabel
+}) => {
+    const fillColor = useMemo(() => {
+        if (data.isPrediction) return '#8e44ad';
+        if (isActive) return '#e74c3c';
+        return data.color || '#3498db';
+    }, [data, isActive]);
+
+    return (
+        <Rect
+            x={x}
+            y={y}
+            width={width}
+            height={height}
+            fill={fillColor}
+            rx={4}
+            ry={4}
+            onPress={() => onClick?.(data)}
+            stroke={isActive ? '#c0392b' : 'none'}
+            strokeWidth={isActive ? 2 : 0}
+            opacity={isDimmed ? 0.3 : (data.isPrediction ? 0.7 : 1)}
+            // @ts-ignore
+            accessibilityLabel={accessibilityLabel}
+        />
+    );
+};

package/src/lib/components/Tooltip.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { DataPoint } from '../types';
+
+interface TooltipProps {
+    data: DataPoint;
+    position: { x: number; y: number };
+}
+
+export const Tooltip: React.FC<TooltipProps> = ({ data, position }) => {
+    return (
+        <div
+            style={{
+                position: 'absolute',
+                left: position.x,
+                top: position.y,
+                transform: 'translate(-50%, -100%)',
+                marginBottom: '8px',
+                backgroundColor: '#333',
+                color: '#fff',
+                padding: '8px 12px',
+                borderRadius: '4px',
+                fontSize: '12px',
+                pointerEvents: 'none',
+                zIndex: 10,
+                boxShadow: '0 2px 4px rgba(0,0,0,0.2)'
+            }}
+        >
+            <div style={{ fontWeight: 'bold', marginBottom: 2 }}>{data.label}</div>
+            <div>Value: {data.value}</div>
+            {data.isPrediction && (
+                <div style={{ marginTop: 2, color: '#a29bfe', fontStyle: 'italic' }}>Prediction</div>
+            )}
+        </div>
+    );
+};

package/src/lib/components/TooltipNative.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import type { DataPoint } from '../types';
+
+interface TooltipNativeProps {
+    data: DataPoint;
+    position: { x: number; y: number };
+}
+
+export const TooltipNative: React.FC<TooltipNativeProps> = ({ data, position }) => {
+    return (
+        <View
+            style={[
+                styles.tooltip,
+                {
+                    left: position.x,
+                    top: position.y,
+                    transform: [{ translateX: -50 }, { translateY: -100 }] as any, // React Native transform style
+                }
+            ]}
+        >
+            <Text style={styles.label}>{data.label}</Text>
+            <Text style={styles.value}>Value: {data.value}</Text>
+            {data.isPrediction && (
+                <Text style={styles.prediction}>Prediction</Text>
+            )}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    tooltip: {
+        position: 'absolute',
+        backgroundColor: '#333',
+        padding: 8,
+        borderRadius: 4,
+        zIndex: 10,
+        elevation: 5,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.25,
+        shadowRadius: 3.84,
+    },
+    label: {
+        color: '#fff',
+        fontWeight: 'bold',
+        marginBottom: 2,
+        fontSize: 12
+    },
+    value: {
+        color: '#fff',
+        fontSize: 12
+    },
+    prediction: {
+        marginTop: 2,
+        color: '#a29bfe',
+        fontStyle: 'italic',
+        fontSize: 10
+    }
+});

package/src/lib/hooks/useChartData.ts

@@ -0,0 +1,212 @@
+import { useMemo } from 'react';
+import { parseISO, format, startOfWeek, endOfWeek, startOfMonth, isValid } from 'date-fns';
+import type { DataPoint, ChartView, RawDataPoint } from '../types';
+
+interface UseChartDataProps {
+    data: RawDataPoint[];
+    view: ChartView;
+    dataKeys: {
+        label: string;
+        value: string | string[]; // Single key or array of keys
+        date: string;
+    };
+    colors?: string[];
+}
+
+// Default Premium Palette
+const DEFAULT_PALETTE = ['#6366f1', '#8b5cf6', '#ec4899', '#10b981', '#f59e0b', '#3b82f6', '#ef4444'];
+
+export const useChartData = ({ data, view, dataKeys, colors = DEFAULT_PALETTE }: UseChartDataProps) => {
+    const processedData = useMemo(() => {
+        if (!data || data.length === 0) return [];
+
+        const standardData: DataPoint[] = data.map((item, index) => {
+            const dateRaw = item[dataKeys.date];
+            const date = dateRaw instanceof Date ? dateRaw : parseISO(dateRaw as string);
+
+            // Handle Stacked vs Single Value
+            let totalValue = 0;
+            let stackedValues: { key: string; value: number; color: string }[] = [];
+
+            if (Array.isArray(dataKeys.value)) {
+                // Stacked
+                dataKeys.value.forEach((key, kIndex) => {
+                    const val = Number(item[key]) || 0;
+                    totalValue += val;
+                    stackedValues.push({
+                        key,
+                        value: val,
+                        color: colors[kIndex % colors.length]
+                    });
+                });
+            } else {
+                // Single
+                totalValue = Number(item[dataKeys.value]) || 0;
+            }
+
+            return {
+                id: (item.id as string) || `item-${index}`,
+                label: (item[dataKeys.label] as string) || '',
+                value: totalValue,
+                stackedValues: stackedValues.length > 0 ? stackedValues : undefined,
+                date: isValid(date) ? date : new Date(),
+                color: stackedValues.length === 0 ? colors[0] : undefined // Default color for single bar
+            } as DataPoint;
+        });
+
+        const sorted = standardData.sort((a, b) => a.date.getTime() - b.date.getTime());
+
+        // Helper for grouping
+        const groupBy = <T>(array: T[], keyFn: (item: T) => string) => {
+            return array.reduce((result: any, item: T) => {
+                const key = keyFn(item);
+                (result[key] = result[key] || []).push(item);
+                return result;
+            }, {});
+        };
+
+        // Aggregation Logic
+        let aggregated: DataPoint[] = [];
+
+        if (view === 'day') {
+            const grouped = groupBy(sorted, (d) => format(d.date, 'yyyy-MM-dd'));
+            aggregated = Object.entries(grouped).map(([key, group]) => {
+                const dayGroup = group as DataPoint[];
+                const first = dayGroup[0];
+                const total = dayGroup.reduce((sum, item) => sum + item.value, 0);
+
+                let mergedStack: any[] = [];
+                if (first.stackedValues) {
+                    const stackMap = new Map<string, number>();
+                    dayGroup.forEach(d => {
+                        d.stackedValues?.forEach(s => {
+                            const current = stackMap.get(s.key) || 0;
+                            stackMap.set(s.key, current + s.value);
+                        });
+                    });
+                    mergedStack = Array.from(stackMap.entries()).map(([k, v], i) => ({
+                        key: k,
+                        value: v,
+                        color: colors[i % colors.length]
+                    }));
+                }
+
+                return {
+                    ...first,
+                    id: key,
+                    label: format(first.date, 'E dd'),
+                    value: total,
+                    stackedValues: mergedStack.length > 0 ? mergedStack : undefined
+                };
+            });
+        }
+        else if (view === 'week') {
+            const grouped = groupBy(sorted, (d) => format(startOfWeek(d.date), 'yyyy-MM-dd'));
+            aggregated = Object.entries(grouped).map(([key, group]) => {
+                const weekGroup = group as DataPoint[];
+                const first = weekGroup[0];
+                const total = weekGroup.reduce((sum, item) => sum + item.value, 0);
+
+                let mergedStack: any[] = [];
+                if (first.stackedValues) {
+                    const stackMap = new Map<string, number>();
+                    weekGroup.forEach(d => {
+                        d.stackedValues?.forEach(s => {
+                            const current = stackMap.get(s.key) || 0;
+                            stackMap.set(s.key, current + s.value);
+                        });
+                    });
+                    mergedStack = Array.from(stackMap.entries()).map(([k, v], i) => ({
+                        key: k,
+                        value: v,
+                        color: colors[i % colors.length]
+                    }));
+                }
+
+                const weekStart = startOfWeek(first.date);
+                const weekEnd = endOfWeek(first.date);
+                const label = `${format(weekStart, 'MMM dd')}-${format(weekEnd, 'MMM dd')}`;
+
+                return {
+                    ...first,
+                    id: key,
+                    label: label,
+                    value: total,
+                    stackedValues: mergedStack.length > 0 ? mergedStack : undefined
+                };
+            });
+        }
+        else if (view === 'month') {
+            const grouped = groupBy(sorted, (d) => format(startOfMonth(d.date), 'yyyy-MM'));
+            aggregated = Object.entries(grouped).map(([key, group]) => {
+                const monthGroup = group as DataPoint[];
+                const first = monthGroup[0];
+                const total = monthGroup.reduce((sum, item) => sum + item.value, 0);
+
+                let mergedStack: any[] = [];
+                if (first.stackedValues) {
+                    const stackMap = new Map<string, number>();
+                    monthGroup.forEach(d => {
+                        d.stackedValues?.forEach(s => {
+                            const current = stackMap.get(s.key) || 0;
+                            stackMap.set(s.key, current + s.value);
+                        });
+                    });
+                    mergedStack = Array.from(stackMap.entries()).map(([k, v], i) => ({
+                        key: k,
+                        value: v,
+                        color: colors[i % colors.length]
+                    }));
+                }
+
+                return {
+                    ...first,
+                    id: key,
+                    label: format(first.date, 'MMM yy'),
+                    value: total,
+                    stackedValues: mergedStack.length > 0 ? mergedStack : undefined
+                };
+            });
+        }
+        else if (view === 'year') {
+            const grouped = groupBy(sorted, (d) => format(d.date, 'yyyy'));
+            aggregated = Object.entries(grouped).map(([key, group]) => {
+                const yearGroup = group as DataPoint[];
+                const first = yearGroup[0];
+                const total = yearGroup.reduce((sum, item) => sum + item.value, 0);
+
+                let mergedStack: any[] = [];
+                if (first.stackedValues) {
+                    const stackMap = new Map<string, number>();
+                    yearGroup.forEach(d => {
+                        d.stackedValues?.forEach(s => {
+                            const current = stackMap.get(s.key) || 0;
+                            stackMap.set(s.key, current + s.value);
+                        });
+                    });
+                    mergedStack = Array.from(stackMap.entries()).map(([k, v], i) => ({
+                        key: k,
+                        value: v,
+                        color: colors[i % colors.length]
+                    }));
+                }
+
+                return {
+                    ...first,
+                    id: key,
+                    label: key, // '2023'
+                    value: total,
+                    stackedValues: mergedStack.length > 0 ? mergedStack : undefined
+                };
+            });
+        }
+        else {
+            aggregated = sorted;
+        }
+
+        return aggregated;
+
+    }, [data, view, dataKeys, colors]);
+
+    return processedData;
+};

package/src/lib/index.ts

@@ -0,0 +1,2 @@
+export * from './SmartBarChart';
+

package/src/lib/native.ts

@@ -0,0 +1 @@
+export * from './SmartBarChartNative';

package/src/lib/services/gemini.ts

@@ -0,0 +1,79 @@
+import { GoogleGenerativeAI } from '@google/generative-ai';
+import type { DataPoint, ChartView } from '../types';
+import { addDays, addWeeks, addMonths, format } from 'date-fns';
+
+export class GeminiService {
+    private genAI: GoogleGenerativeAI;
+    private model: any;
+
+    constructor(apiKey: string, modelName: string = 'gemini-1.5-flash') {
+        this.genAI = new GoogleGenerativeAI(apiKey);
+        this.model = this.genAI.getGenerativeModel({ model: modelName });
+    }
+
+    async predictNext(data: DataPoint[], count: number = 3, view: ChartView = 'month'): Promise<DataPoint[]> {
+        if (data.length === 0) return [];
+
+        const prompt = `
+      I have a time series data:
+      ${data.map(d => `${d.label}: ${d.value}`).join('\n')}
+      
+      Predict the next ${count} values based on the trend.
+      Return ONLY a JSON array of numbers. Example: [10, 12, 15].
+      Do not include any explanation or markdown formatting.
+    `;
+
+        try {
+            const result = await this.model.generateContent(prompt);
+            const response = await result.response;
+            const text = response.text();
+            const cleaned = text.replace(/```json/g, '').replace(/```/g, '').trim();
+            const predictedValues: number[] = JSON.parse(cleaned);
+
+            const lastPoint = data[data.length - 1];
+            const lastDate = lastPoint.date;
+
+            return predictedValues.map((val, index) => {
+                let newDate = lastDate;
+                if (view === 'day') newDate = addDays(lastDate, index + 1);
+                else if (view === 'week') newDate = addWeeks(lastDate, index + 1);
+                else if (view === 'month') newDate = addMonths(lastDate, index + 1);
+
+                let label = '';
+                if (view === 'day') label = format(newDate, 'eee dd');
+                else if (view === 'week') label = `W${index + 1}`;
+                else if (view === 'month') label = format(newDate, 'MMM');
+                else label = format(newDate, 'yyyy');
+
+                return {
+                    id: `prediction-${index}`,
+                    label,
+                    value: val,
+                    date: newDate,
+                    isPrediction: true,
+                    color: '#8e44ad'
+                } as DataPoint;
+            });
+
+        } catch (e) {
+            console.error("Gemini Prediction Failed", e);
+            return [];
+        }
+    }
+
+    async analyze(data: DataPoint[]): Promise<string> {
+        const prompt = `
+      Analyze the following data trend:
+      ${data.map(d => `${d.label}: ${d.value}`).join(', ')}
+      
+      Provide a short, insightful summary (max 2 sentences).
+    `;
+        try {
+            const result = await this.model.generateContent(prompt);
+            return result.response.text();
+        } catch (e) {
+            console.error("Gemini Analysis Failed", e);
+            return "Analysis unavailable.";
+        }
+    }
+}

package/src/lib/types.ts

@@ -0,0 +1,64 @@
+export interface DataPoint {
+    id: string;
+    label: string;
+    value: number; // Total value (sum of stack)
+    stackedValues?: { key: string; value: number; color: string }[];
+    date: Date; // ISO string or Date object
+    color?: string;
+    tooltip?: string;
+    isPrediction?: boolean;
+}
+
+export interface RawDataPoint {
+    [key: string]: any;
+}
+
+export type ChartView = 'day' | 'week' | 'month' | 'year';
+
+export interface ChartTheme {
+    background?: string;
+    bar?: {
+        radius?: number;
+        opacity?: number;
+        maxWidth?: number;
+    };
+    grid?: {
+        stroke?: string;
+        strokeDasharray?: string;
+        visible?: boolean;
+    };
+    axis?: {
+        labelColor?: string;
+        tickColor?: string;
+        fontSize?: number;
+    };
+    tooltip?: {
+        backgroundColor?: string;
+        textColor?: string;
+        borderRadius?: number;
+    };
+}
+
+export interface SmartBarChartProps {
+    data: RawDataPoint[];
+    view?: ChartView;
+    variant?: 'default' | 'stacked';
+    colors?: string[];
+    theme?: ChartTheme; // New
+    axisLabels?: { x?: string; y?: string };
+    onViewChange?: (view: ChartView) => void;
+    dataKeys: {
+        label: string;
+        value: string | string[];
+        date: string;
+    };
+    geminiConfig?: {
+        apiKey?: string;
+        model?: string;
+    };
+    onPredict?: (currentData: DataPoint[]) => Promise<DataPoint[]>;
+    onAnalyze?: (currentData: DataPoint[]) => Promise<string>;
+    height?: number;
+    width?: number | string;
+    className?: string;
+}