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;
}