Interpolation

namespace Interpolation {
  /** No interpolation - straight lines between points */
  function none(options?: InterpolationOptions): InterpolationFunction;
  
  /** Simple linear interpolation */
  function simple(options?: InterpolationOptions): InterpolationFunction;
  
  /** Step interpolation creating step-like connections */
  function step(options?: InterpolationOptions): InterpolationFunction;
  
  /** Cardinal spline interpolation for smooth curves */
  function cardinal(options?: CardinalInterpolationOptions): InterpolationFunction;
  
  /** Monotone cubic interpolation preserving monotonicity */
  function monotoneCubic(options?: InterpolationOptions): InterpolationFunction;
}

interface InterpolationOptions {
  /** Fill gaps in data with null values */
  fillHoles?: boolean;
}

interface CardinalInterpolationOptions extends InterpolationOptions {
  /** Tension parameter controlling curve smoothness (0-1) */
  tension?: number;
}

type InterpolationFunction = (
  pathCoordinates: PathCoordinate[], 
  valueData: ValueData[]
) => string;

interface PathCoordinate {
  x: number;
  y: number;
}

interface ValueData {
  value: number;
  meta: any;
}

/**
 * No interpolation - connects points with straight lines
 * @param options - Interpolation options
 * @returns Interpolation function
 */
function none(options?: InterpolationOptions): InterpolationFunction;

import { LineChart, Interpolation } from "chartist";

// Line chart with straight lines
const chart = new LineChart('.chart-container', data, {
  lineSmooth: Interpolation.none()
});

// With fill holes option
const chartWithHoles = new LineChart('.chart-container', dataWithNulls, {
  lineSmooth: Interpolation.none({
    fillHoles: false
  })
});

/**
 * Simple linear interpolation
 * @param options - Interpolation options
 * @returns Interpolation function
 */
function simple(options?: InterpolationOptions): InterpolationFunction;

// Simple linear interpolation
const chart = new LineChart('.chart-container', data, {
  lineSmooth: Interpolation.simple()
});

/**
 * Step interpolation creating step-like connections
 * @param options - Interpolation options
 * @returns Interpolation function
 */
function step(options?: InterpolationOptions): InterpolationFunction;

// Step chart for discrete data
const stepChart = new LineChart('.chart-container', {
  labels: ['00:00', '06:00', '12:00', '18:00', '24:00'],
  series: [
    [12, 9, 7, 8, 5] // Temperature readings
  ]
}, {
  lineSmooth: Interpolation.step(),
  showArea: true
});

/**
 * Cardinal spline interpolation for smooth curves
 * @param options - Cardinal interpolation options with tension parameter
 * @returns Interpolation function
 */
function cardinal(options?: CardinalInterpolationOptions): InterpolationFunction;

// Smooth curve with default tension
const smoothChart = new LineChart('.chart-container', data, {
  lineSmooth: Interpolation.cardinal()
});

// Tighter curve with higher tension
const tightCurve = new LineChart('.chart-container', data, {
  lineSmooth: Interpolation.cardinal({
    tension: 0.8
  })
});

// Looser curve with lower tension
const looseCurve = new LineChart('.chart-container', data, {
  lineSmooth: Interpolation.cardinal({
    tension: 0.1
  })
});

// Cardinal interpolation with hole filling
const curveWithHoles = new LineChart('.chart-container', dataWithNulls, {
  lineSmooth: Interpolation.cardinal({
    tension: 0.3,
    fillHoles: true
  })
});

/**
 * Monotone cubic interpolation preserving monotonicity
 * Ensures that the interpolated curve doesn't create local maxima/minima
 * @param options - Interpolation options
 * @returns Interpolation function
 */
function monotoneCubic(options?: InterpolationOptions): InterpolationFunction;

// Monotone cubic for financial data
const stockChart = new LineChart('.chart-container', {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
  series: [
    [100, 120, 90, 140, 130, 160] // Stock prices
  ]
}, {
  lineSmooth: Interpolation.monotoneCubic(),
  showArea: true
});

// Monotone cubic with gap handling
const dataChart = new LineChart('.chart-container', sparseData, {
  lineSmooth: Interpolation.monotoneCubic({
    fillHoles: false
  })
});

const sampleData = {
  labels: ['A', 'B', 'C', 'D', 'E'],
  series: [[5, 2, 4, 2, 0]]
};

// None - straight lines
const straightChart = new LineChart('.straight', sampleData, {
  lineSmooth: Interpolation.none()
});

// Cardinal - smooth curves
const smoothChart = new LineChart('.smooth', sampleData, {
  lineSmooth: Interpolation.cardinal({
    tension: 0.4
  })
});

// Monotone - preserves trends
const monotoneChart = new LineChart('.monotone', sampleData, {
  lineSmooth: Interpolation.monotoneCubic()
});

// Step - discrete values
const stepChart = new LineChart('.step', sampleData, {
  lineSmooth: Interpolation.step()
});

// Scientific data with precise curves
const scientificChart = new LineChart('.scientific', preciseData, {
  lineSmooth: Interpolation.monotoneCubic({
    fillHoles: false
  }),
  showPoint: true,
  showArea: false
});

// UI metrics with smooth visualization
const metricsChart = new LineChart('.metrics', metricsData, {
  lineSmooth: Interpolation.cardinal({
    tension: 0.6,
    fillHoles: true
  }),
  showArea: true,
  areaBase: 0
});

// Network data with step changes
const networkChart = new LineChart('.network', networkData, {
  lineSmooth: Interpolation.step(),
  showArea: true,
  showPoint: false
});

const chart = new LineChart('.chart-container', data, {
  lineSmooth: Interpolation.cardinal({
    tension: 0.4
  })
});

chart.on('draw', (data) => {
  if (data.type === 'line') {
    // Add custom styling to interpolated lines
    data.element.attr({
      'stroke-width': '3px',
      'stroke-linecap': 'round'
    });
  }
});