refactor: add 5 chart functional counterparts + update README (samples 8-12)

Agent-Logs-Url: https://github.com/IgniteUI/igniteui-react-examples/sessions/a777979d-98e9-46cf-adc5-3df39b356ec9

Co-authored-by: gedinakova <16817847+gedinakova@users.noreply.github.com>

Author: Copilot

FUNCTIONAL_REFACTORING_README.md

@@ -1,6 +1,6 @@
 # Functional Component Refactoring – Summary
 
-This document describes the refactoring of **7 class-based React samples** to **functional components** following modern React best practices (React 16.8+).
+This document describes the refactoring of **12 class-based React samples** to **functional components** following modern React best practices (React 16.8+).
 
 Each original `index.tsx` is left unchanged. A new `*Functional.tsx` file has been created alongside it as the functional counterpart.
 
@@ -144,6 +144,95 @@ Each original `index.tsx` is left unchanged. A new `*Functional.tsx` file has be
 
 ---
 
+## Sample 8 – Data Pie Chart: Legend (Cross-Ref Wiring + Lazy Getters + ComponentRenderer)
+
+**Files**
+- Original: `samples/charts/data-pie-chart/legend/src/index.tsx`
+- Functional: `samples/charts/data-pie-chart/legend/src/DataPieChartLegendFunctional.tsx`
+
+**Feature coverage:** `cross-component ref wiring`, `lazy data getter`, `ComponentRenderer`, `props as component instances`
+
+| Class pattern | Functional equivalent | Why |
+|---|---|---|
+| `private legend: IgrItemLegend` + callback ref `legendRef(r)` calling `setState({})` | `const [legend, setLegend] = useState<IgrItemLegend \| null>(null)` | Storing the component instance in state causes a re-render when it is first set, allowing it to be passed as a prop to the chart |
+| `private chart: IgrDataPieChart` + callback ref `chartRef(r)` calling `setState({})` | `const [chart, setChart] = useState<IgrDataPieChart \| null>(null)` (unused beyond triggering re-render) | Same pattern—state update triggers the render that delivers the `legend` prop to the chart |
+| Lazy getter `get energyGlobalDemand()` with backing field `_energyGlobalDemand` | `useMemo(() => new EnergyGlobalDemand(), [])` | Created once, stable across renders |
+| Lazy getter `get renderer()` with backing field `_componentRenderer` that registers modules | `useMemo(() => { const r = new ComponentRenderer(); ...; return r; }, [])` | ComponentRenderer and its context registrations are created once |
+| `legend={this.legend}` in JSX (initially `undefined` until ref fires) | `legend={legend ?? undefined}` | `null ?? undefined` falls back to `undefined`, keeping the prop absent until the legend is ready |
+
+---
+
+## Sample 9 – Doughnut Chart: Legend (Cross-Ref Wiring on Ring Series)
+
+**Files**
+- Original: `samples/charts/doughnut-chart/legend/src/index.tsx`
+- Functional: `samples/charts/doughnut-chart/legend/src/DoughnutChartLegendFunctional.tsx`
+
+**Feature coverage:** `cross-component ref wiring`, `ring series legend prop`, `lazy data getter`
+
+| Class pattern | Functional equivalent | Why |
+|---|---|---|
+| `private legend: IgrItemLegend` + callback ref calling `setState({})` | `useState<IgrItemLegend \| null>(null)` | Same cross-wiring pattern as the DataPieChart legend sample |
+| `private chart: IgrDoughnutChart` + callback ref | `useRef` not needed—the chart does not need to be accessed imperatively | The only wiring needed is passing `legend` as a prop on `IgrRingSeries`; no ref required on the chart itself |
+| `<IgrRingSeries legend={this.legend}>` | `<IgrRingSeries legend={legend ?? undefined}>` | Prop supplied once the legend state is set |
+| Lazy getter `get energyGlobalDemand()` | `useMemo(() => new EnergyGlobalDemand(), [])` | Stable data source reference |
+
+---
+
+## Sample 10 – Financial Chart: Overview (Async Data + Imperative Legend Wiring)
+
+**Files**
+- Original: `samples/charts/financial-chart/overview/src/index.tsx`
+- Functional: `samples/charts/financial-chart/overview/src/FinancialChartOverviewFunctional.tsx`
+
+**Feature coverage:** `async data fetching`, `cross-ref imperative wiring`, `useEffect`, `state initialization`
+
+| Class pattern | Functional equivalent | Why |
+|---|---|---|
+| `this.initData()` called in constructor, which calls `this.setState({ data: stocks })` on resolution | `useEffect(() => { StocksHistory.getMultipleStocks().then(stocks => setData(stocks)); }, [])` | `useEffect` with empty deps runs once after mount—equivalent to constructor-time async initiation |
+| `public data: any[]` as class field initialized to `[]` | `const [data, setData] = useState<any[]>([])` | Async result stored in state; initial render uses empty array |
+| Callback refs that cross-wire each other: `this.chart.legend = this.legend` / `this.legend` = ... | `useRef` for both + `useEffect(() => { if (chart && legend) chart.legend = legend; })` running after every render | The effectless dependency array means the wiring is applied whenever either ref changes, guaranteeing the assignment happens once both are available |
+
+---
+
+## Sample 11 – Category Chart: High Frequency (setInterval + componentWillUnmount + notifyInsertItem)
+
+**Files**
+- Original: `samples/charts/category-chart/high-frequency/src/index.tsx`
+- Functional: `samples/charts/category-chart/high-frequency/src/CategoryChartHighFrequencyFunctional.tsx`
+
+**Feature coverage:** `setInterval`, `componentWillUnmount`, `imperative chart notification API`, `mixed ref/state pattern`
+
+| Class pattern | Functional equivalent | Why |
+|---|---|---|
+| `public interval: number = -1` class field | `const intervalRef = useRef<number>(-1)` | Interval ID must survive re-renders but must never cause them; `useRef` is the correct container |
+| `public chart: IgrCategoryChart` class field | `const chartRef = useRef<IgrCategoryChart>(null)` | Same—chart ref needs to be stable and readable inside the interval callback |
+| `public data: any[]` mutable array class field | `const dataRef = useRef<any[]>(...)` | The data array is mutated in-place for the chart's `notifyInsertItem`/`notifyRemoveItem` API; storing it in a ref avoids triggering re-renders on every tick |
+| `public dataPoints: number` / `public dataIndex: number` class fields | `useRef` for each | Values mutated in event handlers without needing re-renders |
+| `componentWillUnmount` clearing the interval | Cleanup function returned from `useEffect`: `return () => { clearInterval(intervalRef.current) }` | Collocates setup and teardown; cleanup runs when component unmounts |
+| `onChartRef` callback ref calling `this.onChartInit()` | `onChartRef` callback calling `setupInterval()` | `useCallback`-wrapped ref callback starts the interval once the chart is available |
+| `this.state.dataFeedAction === "Stop"` read inside `tick()` | Accessing `setState` updater's `prev` arg inside tick | The tick is inside a `setInterval` closure; reading the latest state safely requires using the functional update form of `setState` |
+
+---
+
+## Sample 12 – Category Chart: Line Chart with Animations (State + Event Handlers + Replay)
+
+**Files**
+- Original: `samples/charts/category-chart/line-chart-with-animations/src/index.tsx`
+- Functional: `samples/charts/category-chart/line-chart-with-animations/src/CategoryChartLineChartWithAnimationsFunctional.tsx`
+
+**Feature coverage:** `state`, `event handlers`, `chart ref for imperative API`, `module-level constants`
+
+| Class pattern | Functional equivalent | Why |
+|---|---|---|
+| `public data: any[]` field assigned in `initData()` then used as prop | Module-level `CHART_DATA` constant | Data is static; no side effects needed; module constant is cleaner and avoids recreation |
+| `this.initData()` called inside `onTransitionInModeChanged` (to reset chart) | Removed—`CHART_DATA` is already stable | The original called `initData()` on mode change to "re-trigger" the chart; with a stable reference the chart already re-renders on `transitionInMode` state change |
+| `this.state.transitionLabel`, `transitionInDuration`, `transitionInMode` | Three `useState` calls | Fine-grained state; each setter is independent |
+| `public chart: IgrCategoryChart` field + `this.onChartRef` callback | `const chartRef = useRef` + `const onChartRef = useCallback` | `useRef` for the chart instance; `useCallback` for a stable ref callback |
+| `this.chart.replayTransitionIn()` inside `onReloadChartClick` | `chartRef.current?.replayTransitionIn()` | Optional chaining guards against the chart not yet being set |
+
+---
+
 ## General Patterns Applied Across All Samples
 
 | Class component pattern | Functional equivalent | Notes |

samples/charts/category-chart/high-frequency/src/CategoryChartHighFrequencyFunctional.tsx

@@ -0,0 +1,167 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import { IgrCategoryChart } from 'igniteui-react-charts';
+import { IgrCategoryChartModule } from 'igniteui-react-charts';
+import { CategoryChartSharedData } from './CategoryChartSharedData';
+
+IgrCategoryChartModule.register();
+
+export default function CategoryChartHighFrequency() {
+    const INITIAL_DATA_POINTS = 500;
+
+    // Mutable values that must not trigger re-renders are kept in refs
+    const chartRef = useRef<IgrCategoryChart>(null);
+    const dataRef = useRef<any[]>(CategoryChartSharedData.generateItems(100, INITIAL_DATA_POINTS, false));
+    const dataIndexRef = useRef<number>(dataRef.current.length);
+    const dataPointsRef = useRef<number>(INITIAL_DATA_POINTS);
+    const refreshMsRef = useRef<number>(5);
+    const intervalRef = useRef<number>(-1);
+
+    const [state, setState] = useState({
+        dataFeedAction: 'Start',
+        dataInfo: CategoryChartSharedData.toShortString(INITIAL_DATA_POINTS),
+        dataPoints: INITIAL_DATA_POINTS,
+        dataSource: dataRef.current,
+        refreshInterval: 5,
+        refreshInfo: '5ms',
+    });
+
+    const setupInterval = useCallback(() => {
+        if (intervalRef.current >= 0) {
+            window.clearInterval(intervalRef.current);
+            intervalRef.current = -1;
+        }
+        intervalRef.current = window.setInterval(() => {
+            // Only tick when feed is "Stop" (i.e. actively streaming)
+            if (setState === null) return; // guard against unmounted ref
+            setState(prev => {
+                if (prev.dataFeedAction !== 'Stop') return prev;
+
+                const chart = chartRef.current;
+                if (!chart) return prev;
+
+                dataIndexRef.current++;
+                const oldItem = dataRef.current[0];
+                const newItem = CategoryChartSharedData.getNewItem(dataRef.current, dataIndexRef.current);
+
+                dataRef.current.push(newItem);
+                chart.notifyInsertItem(dataRef.current, dataRef.current.length - 1, newItem);
+                dataRef.current.shift();
+                chart.notifyRemoveItem(dataRef.current, 0, oldItem);
+
+                return prev; // no state change – data mutated imperatively on the chart
+            });
+        }, refreshMsRef.current);
+    }, []);
+
+    // Start interval after chart mounts; clear on unmount (replaces componentWillUnmount)
+    useEffect(() => {
+        if (chartRef.current) {
+            setupInterval();
+        }
+        return () => {
+            if (intervalRef.current >= 0) {
+                window.clearInterval(intervalRef.current);
+                intervalRef.current = -1;
+            }
+        };
+    }, [setupInterval]);
+
+    const onChartRef = useCallback((chart: IgrCategoryChart) => {
+        if (!chart) return;
+        chartRef.current = chart;
+        setupInterval();
+    }, [setupInterval]);
+
+    const onDataGenerateClick = useCallback(() => {
+        dataRef.current = CategoryChartSharedData.generateItems(100, dataPointsRef.current, false);
+        dataIndexRef.current = dataRef.current.length;
+        setState(prev => ({ ...prev, dataSource: dataRef.current }));
+    }, []);
+
+    const onDataFeedClick = useCallback(() => {
+        setState(prev => ({
+            ...prev,
+            dataFeedAction: prev.dataFeedAction === 'Start' ? 'Stop' : 'Start',
+        }));
+    }, []);
+
+    const onDataPointsChanged = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        let num = parseInt(e.target.value, 10);
+        if (isNaN(num)) num = 10000;
+        if (num < 100) num = 100;
+        if (num > 2000) num = 2000;
+        dataPointsRef.current = num;
+        setState(prev => ({
+            ...prev,
+            dataPoints: num,
+            dataInfo: CategoryChartSharedData.toShortString(num),
+        }));
+    }, []);
+
+    const onRefreshFrequencyChanged = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        let num = parseInt(e.target.value, 10);
+        if (isNaN(num)) num = 10;
+        if (num < 10) num = 10;
+        if (num > 500) num = 500;
+        refreshMsRef.current = num;
+        setState(prev => ({
+            ...prev,
+            refreshInterval: num,
+            refreshInfo: num + 'ms',
+        }));
+        setupInterval();
+    }, [setupInterval]);
+
+    return (
+        <div className="container sample">
+            <div className="options horizontal">
+                <button onClick={onDataFeedClick}>{state.dataFeedAction}</button>
+                <label className="options-label">Refresh: </label>
+                <label className="options-value">{state.refreshInfo}</label>
+                <input
+                    className="options-slider"
+                    type="range"
+                    min="5"
+                    max="250"
+                    step="5"
+                    value={state.refreshInterval}
+                    onChange={onRefreshFrequencyChanged}
+                />
+                <button onClick={onDataGenerateClick}>Generate</button>
+                <label className="options-label">Data Points: </label>
+                <label className="options-value">{state.dataInfo}</label>
+                <input
+                    className="options-slider"
+                    type="range"
+                    min="100"
+                    max="2000"
+                    step="100"
+                    value={state.dataPoints}
+                    onChange={onDataPointsChanged}
+                />
+            </div>
+            <div className="container" style={{ height: 'calc(100% - 45px)' }}>
+                <IgrCategoryChart
+                    ref={onChartRef}
+                    width="100%"
+                    height="100%"
+                    chartType="Line"
+                    dataSource={state.dataSource}
+                    yAxisExtent={40}
+                    xAxisEnhancedIntervalPreferMoreCategoryLabels="false"
+                    shouldConsiderAutoRotationForInitialLabels="false"
+                    shouldAutoExpandMarginForInitialLabels="false"
+                    crosshairsDisplayMode="None"
+                    autoMarginAndAngleUpdateMode="None"
+                    markerTypes="None"
+                />
+            </div>
+        </div>
+    );
+}
+
+// rendering above component to the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<CategoryChartHighFrequency/>);

samples/charts/category-chart/line-chart-with-animations/src/CategoryChartLineChartWithAnimationsFunctional.tsx

@@ -0,0 +1,111 @@
+import React, { useState, useRef, useCallback, useMemo } from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import { IgrCategoryChart } from 'igniteui-react-charts';
+import { IgrCategoryChartModule } from 'igniteui-react-charts';
+
+IgrCategoryChartModule.register();
+
+const CHART_DATA = [
+    { Year: '2009', Europe: 31, China: 21, USA: 19 },
+    { Year: '2010', Europe: 43, China: 26, USA: 24 },
+    { Year: '2011', Europe: 66, China: 29, USA: 28 },
+    { Year: '2012', Europe: 69, China: 32, USA: 26 },
+    { Year: '2013', Europe: 58, China: 47, USA: 38 },
+    { Year: '2014', Europe: 40, China: 46, USA: 31 },
+    { Year: '2015', Europe: 78, China: 50, USA: 19 },
+    { Year: '2016', Europe: 13, China: 90, USA: 52 },
+    { Year: '2017', Europe: 78, China: 132, USA: 50 },
+    { Year: '2018', Europe: 40, China: 134, USA: 34 },
+    { Year: '2019', Europe: 80, China: 96, USA: 38 },
+];
+
+export default function CategoryChartLineChartWithAnimations() {
+    const chartRef = useRef<IgrCategoryChart>(null);
+
+    const [transitionLabel, setTransitionLabel] = useState('1000ms');
+    const [transitionInDuration, setTransitionInDuration] = useState(1000);
+    const [transitionInMode, setTransitionInMode] = useState('Auto');
+
+    const onChartRef = useCallback((chart: IgrCategoryChart) => {
+        if (!chart) return;
+        chartRef.current = chart;
+    }, []);
+
+    const onTransitionInModeChanged = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
+        setTransitionInMode(e.target.value);
+    }, []);
+
+    const onTransitionInDurationChanged = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        const val = parseInt(e.target.value, 10);
+        setTransitionInDuration(val);
+        setTransitionLabel(val + 'ms');
+    }, []);
+
+    const onReloadChartClick = useCallback(() => {
+        chartRef.current?.replayTransitionIn();
+    }, []);
+
+    return (
+        <div className="container sample">
+            <div className="options horizontal">
+                <span className="options-label">Transition Type </span>
+                <select onChange={onTransitionInModeChanged}>
+                    <option>Auto</option>
+                    <option>AccordionFromBottom</option>
+                    <option>AccordionFromCategoryAxisMaximum</option>
+                    <option>AccordionFromCategoryAxisMinimum</option>
+                    <option>AccordionFromLeft</option>
+                    <option>AccordionFromRight</option>
+                    <option>AccordionFromTop</option>
+                    <option>AccordionFromValueAxisMaximum</option>
+                    <option>AccordionFromValueAxisMinimum</option>
+                    <option>Expand</option>
+                    <option>FromZero</option>
+                    <option>SweepFromBottom</option>
+                    <option>SweepFromCategoryAxisMaximum</option>
+                    <option>SweepFromCategoryAxisMinimum</option>
+                    <option>SweepFromCenter</option>
+                    <option>SweepFromLeft</option>
+                    <option>SweepFromRight</option>
+                    <option>SweepFromTop</option>
+                    <option>SweepFromValueAxisMaximum</option>
+                    <option>SweepFromValueAxisMinimum</option>
+                </select>
+                <label className="options-value" style={{ width: '75px' }}>{transitionLabel}</label>
+                <input
+                    className="options-slider"
+                    type="range"
+                    min="50"
+                    max="2000"
+                    step="50"
+                    defaultValue="1000"
+                    onChange={onTransitionInDurationChanged}
+                />
+                <button onClick={onReloadChartClick}>Reload Chart</button>
+            </div>
+
+            <IgrCategoryChart
+                ref={onChartRef}
+                width="100%"
+                height="calc(100% - 30px)"
+                dataSource={CHART_DATA}
+                chartType="Line"
+                isTransitionInEnabled={true}
+                isHorizontalZoomEnabled={false}
+                isVerticalZoomEnabled={false}
+                transitionInDuration={transitionInDuration}
+                transitionInMode={transitionInMode}
+                yAxisTitle="TWh"
+                yAxisTitleLeftMargin={10}
+                yAxisTitleRightMargin={5}
+                yAxisLabelLeftMargin={0}
+                computedPlotAreaMarginMode="Series"
+            />
+        </div>
+    );
+}
+
+// rendering above component to the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<CategoryChartLineChartWithAnimations/>);