LC Components

TimeRangeSlider React Component

A highly customizable and themeable time range slider component for React, designed to select a date range from a given time-series dataset. It features a mini-chart for data visualization, dual-handle sliders, and direct date inputs for a seamless user experience.

---

Installation

To use this component in your project, install it via npm or yarn:

npm install @lee-cha-dev/lc-components

or

yarn add @lee-cha-dev/lc-components

Usage

First, you need to import the TimeRangeSlider component and its required stylesheet into your React component file. Then, manage the selected range using React's state.

Here is a complete example of how to implement the component:

import React, {useState, useMemo} from 'react';

// 1. Import the component and its CSS from the package
import {TimeRangeSlider} from '@lee-cha-dev/lc-components';
import '@lee-cha-dev/lc-components/dist/index.css';

function App() {
    // 2. Set up state to manage the selected range
    const [range, setRange] = useState({startIndex: 10, endIndex: 80});

    // 3. Provide your time-series data
    // Each object needs a `date` (YYYY-MM-DD) and an optional `value` for the chart
    const myData = useMemo(() => {
        const data = [];
        const startDate = new Date('2023-01-01');
        for (let i = 0; i < 100; i++) {
            const newDate = new Date(startDate);
            newDate.setDate(startDate.getDate() + i);
            data.push({
                date: newDate.toISOString().split('T')[0],
                value: 50 + Math.sin(i / 10) * 25 + Math.random() * 20,
            });
        }
        return data;
    }, []);

    // 4. Create a handler to update the state when the range changes
    const handleRangeChange = (newStartIndex, newEndIndex) => {
        setRange({startIndex: newStartIndex, endIndex: newEndIndex});
    };

    return (
        <div style={{padding: '2rem'}}>
            <TimeRangeSlider
                data={myData}
                startIndex={range.startIndex}
                endIndex={range.endIndex}
                onRangeChange={handleRangeChange}
                theme="dark" // or "light"
            />

            {/* Optional: Display the selected data */}
            <div style={{marginTop: '2rem', color: '#fff'}}>
                <h3>Selected Range:</h3>
                <p>
                    From {myData[range.startIndex].date} to {myData[range.endIndex].date}
                </p>
            </div>
        </div>
    );
}

export default App;

API Reference (Props)

The TimeRangeSlider component accepts the following props:

Prop	Type	Required	Default	Description
data	Array<Object>	Yes	[]	An array of data points. Each object must conform to the data structure below. The array should be pre-sorted by date in ascending order.
startIndex	number	Yes	0	The starting index of the selected range within the data array.
endIndex	number	Yes	0	The ending index of the selected range within the data array.
onRangeChange	(start, end) => void	No	'en-US'	A string representing the locale for formatting dates (e.g., 'en-GB', 'de-DE').
theme	string	No	'dark'	A string representing the color theme to be used.
className	string	No	''	A string of custom CSS classes to apply to the component's root element for further styling.

Data Structure

The data prop expects an array of objects, where each object has the following structure:

interface DataPoint {
  /**
   * The date for the data point.
   * @format 'YYYY-MM-DD'
   */
  date: string;

  /**
   * The numerical value for the data point, used to render the mini-chart.
   * If not provided, the chart will render as a flat line.
   */
  value?: number;
}