AG Charts Strip Chart

// AG Charts Strip Chart Implementation
import { AgCharts } from 'ag-charts-community';

const options = {
    data: [],
    series: [{
        type: 'line',
        xKey: 'time',
        yKey: 'value',
        stroke: '#2563eb',
        strokeWidth: 2
    }],
    axes: [{
        type: 'time',
        position: 'bottom',
        title: { text: 'Time' }
    }, {
        type: 'number',
        position: 'left',
        title: { text: 'Value' }
    }],
    title: { text: 'Real-time Strip Chart' }
};

const chart = AgCharts.create(options);

// Real-time update function
function updateStripChart(newData) {
    const currentTime = new Date();
    chart.data.push({
        time: currentTime,
        value: newData
    });
    
    // Keep only last 1000 points
    if (chart.data.length > 1000) {
        chart.data.shift();
    }
    
    AgCharts.update(chart, options);
}

// Start real-time updates
setInterval(() => {
    const newData = Math.sin(Date.now() * 0.001) + Math.random() * 0.5;
    updateStripChart(newData);
}, 100);

// Multi-Channel Enterprise Strip Chart
// Supporting multiple data channels with enterprise features

const enterpriseOptions = {
    data: [],
    series: [
        {
            type: 'line',
            xKey: 'time',
            yKey: 'temperature',
            stroke: '#ef4444',
            strokeWidth: 2,
            yName: 'Temperature'
        },
        {
            type: 'line',
            xKey: 'time',
            yKey: 'pressure',
            stroke: '#3b82f6',
            strokeWidth: 2,
            yName: 'Pressure'
        },
        {
            type: 'line',
            xKey: 'time',
            yKey: 'flow',
            stroke: '#10b981',
            strokeWidth: 2,
            yName: 'Flow Rate'
        }
    ],
    axes: [{
        type: 'time',
        position: 'bottom',
        title: { text: 'Time' }
    }, {
        type: 'number',
        position: 'left',
        title: { text: 'Temperature (°C)' }
    }, {
        type: 'number',
        position: 'right',
        title: { text: 'Pressure (bar)' }
    }],
    title: { text: 'Multi-Channel Industrial Monitoring' },
    legend: { position: 'bottom' }
};

const enterpriseChart = AgCharts.create(enterpriseOptions);

// Multi-channel update function
function updateMultiChannelChart(temperature, pressure, flow) {
    const currentTime = new Date();
    enterpriseChart.data.push({
        time: currentTime,
        temperature: temperature,
        pressure: pressure,
        flow: flow
    });
    
    // Keep only last 2000 points
    if (enterpriseChart.data.length > 2000) {
        enterpriseChart.data.shift();
    }
    
    AgCharts.update(enterpriseChart, enterpriseOptions);
}

// Advanced Strip Chart with Analytics
// Including statistical analysis and interactive features

const advancedOptions = {
    data: [],
    series: [{
        type: 'line',
        xKey: 'time',
        yKey: 'value',
        stroke: '#2563eb',
        strokeWidth: 2,
        marker: {
            enabled: false
        }
    }, {
        type: 'line',
        xKey: 'time',
        yKey: 'trend',
        stroke: '#ef4444',
        strokeWidth: 1,
        strokeDasharray: [5, 5]
    }],
    axes: [{
        type: 'time',
        position: 'bottom',
        title: { text: 'Time' },
        tick: { count: 10 }
    }, {
        type: 'number',
        position: 'left',
        title: { text: 'Value' }
    }],
    title: { text: 'Advanced Analytics Strip Chart' },
    background: { fill: '#f8fafc' },
    padding: { top: 20, right: 20, bottom: 20, left: 20 }
};

const advancedChart = AgCharts.create(advancedOptions);

// Advanced analytics function
function updateAdvancedStripChart(newData) {
    const currentTime = new Date();
    
    // Calculate moving average
    const windowSize = 10;
    const recentData = advancedChart.data.slice(-windowSize);
    const movingAverage = recentData.reduce((sum, point) => sum + point.value, 0) / recentData.length;
    
    advancedChart.data.push({
        time: currentTime,
        value: newData,
        trend: movingAverage
    });
    
    // Keep only last 5000 points
    if (advancedChart.data.length > 5000) {
        advancedChart.data.shift();
    }
    
    AgCharts.update(advancedChart, advancedOptions);
}

// Add interactive features
advancedChart.addEventListener('click', (event) => {
    console.log('Chart clicked:', event);
});

// Export functionality
function exportChart() {
    const canvas = advancedChart.scene.canvas;
    const dataURL = canvas.toDataURL('image/png');
    const link = document.createElement('a');
    link.download = 'strip-chart.png';
    link.href = dataURL;
    link.click();
}