@sidx255/genui-core

Intelligent chart generation library with AI-powered configuration inference and advanced data processing capabilities.

✨ Features

🤖 AI-Powered Chart Inference - Natural language to chart configuration
📊 Multiple Chart Types - Bar, line, area, donut, scatter, horizontal bar
🔄 Advanced Data Processing - Filtering, grouping, statistical aggregations
📈 Statistical Operations - Sum, average, min, max, median, count
🎨 Customizable Theming - Flexible styling and color schemes
⚛️ React Components - Built with Fluent UI charting library
🏗️ TypeScript First - Full type safety and IntelliSense support
🔌 Pluggable AI Providers - Extensible AI integration system

📦 Installation

npm install @sidx255/genui-core
# or
yarn add @sidx255/genui-core
# or
pnpm add @sidx255/genui-core

Peer Dependencies

npm install react @fluentui/react @fluentui/react-charting

🚀 Quick Start

Basic Usage

import { ChartRenderer, processData } from '@sidx255/genui-core';

const data = [
  { month: 'Jan', sales: 1200, region: 'North' },
  { month: 'Feb', sales: 1500, region: 'North' },
  { month: 'Jan', sales: 800, region: 'South' },
  { month: 'Feb', sales: 1100, region: 'South' }
];

const config = {
  chartType: 'bar' as const,
  xKey: 'month',
  yKeys: ['sales'],
  title: 'Monthly Sales by Region',
  groupByKeys: ['region']
};

// Process and render
const processedData = processData(data, config);

function MyChart() {
  return <ChartRenderer data={processedData} config={config} />;
}

AI-Powered Chart Generation

import { AzureAIProvider, inferChartConfig, processData } from '@sidx255/genui-core';

// Configure AI provider
const aiProvider = new AzureAIProvider({
  endpoint: process.env.AZURE_ENDPOINT!,
  apiKey: process.env.AZURE_API_KEY!
});

async function generateChart() {
  const data = [
    { date: '2024-01-15', product: 'Laptop', sales: 1200, quantity: 2 },
    { date: '2024-02-20', product: 'Mouse', sales: 50, quantity: 5 },
    // ... more data
  ];

  // Natural language to chart config
  const config = await inferChartConfig(
    data,
    "Show total sales by product for Q1 2024",
    aiProvider
  );

  const processedData = processData(data, config);
  return { data: processedData, config };
}

Advanced Data Processing

import { processData, ChartConfig } from '@sidx255/genui-core';

const complexConfig: ChartConfig = {
  chartType: 'bar',
  xKey: 'category',
  yKeys: ['total_sales', 'avg_profit', 'transaction_count'],
  filters: [
    { field: 'date', operator: 'greater_than', value: '2024-01-01' },
    { field: 'region', operator: 'in', value: ['North', 'East'] }
  ],
  aggregations: [
    { type: 'sum', field: 'sales', alias: 'total_sales' },
    { type: 'average', field: 'profit', alias: 'avg_profit' },
    { type: 'count', alias: 'transaction_count' }
  ],
  groupByKeys: ['category']
};

const result = processData(salesData, complexConfig);

📚 API Reference

Chart Types

bar - Vertical bar chart
horizontalBar - Horizontal bar chart
line - Line chart
area - Area chart
donut - Donut/pie chart
scatter - Scatter plot

Filter Operators

equals, not_equals - Exact matching
greater_than, less_than, greater_than_or_equal, less_than_or_equal - Numeric/date comparisons
contains, not_contains, starts_with, ends_with - String matching
between - Range filtering (provide array of [min, max])
in, not_in - Match against list of values
is_null, is_not_null - Null checking

Aggregation Types

count - Count of records
sum - Sum of numeric values
average - Average of numeric values
min - Minimum value
max - Maximum value
median - Median value

🎨 Theming

import { ChartRenderer, ChartTheme } from '@sidx255/genui-core';

const customTheme: ChartTheme = {
  colors: ['#0078D4', '#00BCF2', '#00B294', '#FFB900'],
  fontFamily: 'Segoe UI',
  fontSize: 12,
  backgroundColor: '#FFFFFF'
};

<ChartRenderer 
  data={data} 
  config={config} 
  theme={customTheme} 
/>

🔌 Custom AI Providers

import { AIProvider, ChartConfig } from '@sidx255/genui-core';

class CustomAIProvider implements AIProvider {
  async generateChartConfig(
    data: any[], 
    prompt: string
  ): Promise<ChartConfig> {
    // Your custom AI logic
    return {
      chartType: 'bar',
      xKey: 'category',
      yKeys: ['value']
    };
  }
}

📄 License

🐛 Bug Reports

Found a bug? Please open an issue with a detailed description and reproduction steps.

💡 Feature Requests

Have an idea for a new feature? We'd love to hear about it! Open a feature request and let's discuss.