From b003b64c499c4294e4008ef4bf8826272bb797e7 Mon Sep 17 00:00:00 2001 From: damyanpetev Date: Thu, 2 Apr 2026 17:49:19 +0300 Subject: [PATCH 1/2] refactor(igr-ts): charts data and legend binding cleanup Co-authored-by: Hristo313 <57346540+Hristo313@users.noreply.github.com> --- .../files/src/app/__path__/__filePrefix__.tsx | 8 ++------ .../files/src/app/__path__/__filePrefix__.tsx | 17 ++++++----------- .../files/src/app/__path__/__filePrefix__.tsx | 8 ++------ .../files/src/app/__path__/__filePrefix__.tsx | 16 +++++----------- 4 files changed, 15 insertions(+), 34 deletions(-) diff --git a/packages/cli/templates/react/igr-ts/category-chart/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/category-chart/default/files/src/app/__path__/__filePrefix__.tsx index 73e73d1a0..d7fcd9448 100644 --- a/packages/cli/templates/react/igr-ts/category-chart/default/files/src/app/__path__/__filePrefix__.tsx +++ b/packages/cli/templates/react/igr-ts/category-chart/default/files/src/app/__path__/__filePrefix__.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import { useState } from 'react'; import { IgrCategoryChartModule } from 'igniteui-react-charts'; import { IgrCategoryChart } from 'igniteui-react-charts'; import style from './style.module.css'; @@ -15,11 +15,7 @@ const data: any = [ export default function $(ClassName)() { const title = 'Category Chart'; - const [chartData, setChartData] = useState([]); - - useEffect(() => { - setChartData(data); - }, []); + const [chartData] = useState(data); return (
diff --git a/packages/cli/templates/react/igr-ts/doughnut-chart/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/doughnut-chart/default/files/src/app/__path__/__filePrefix__.tsx index ca39e7e75..4b0866791 100644 --- a/packages/cli/templates/react/igr-ts/doughnut-chart/default/files/src/app/__path__/__filePrefix__.tsx +++ b/packages/cli/templates/react/igr-ts/doughnut-chart/default/files/src/app/__path__/__filePrefix__.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef, useState } from 'react'; +import { useState } from 'react'; import { IgrDoughnutChartModule } from 'igniteui-react-charts'; import { IgrDoughnutChart } from 'igniteui-react-charts'; import { IgrRingSeriesModule } from 'igniteui-react-charts'; @@ -23,13 +23,8 @@ const data: any = [ export default function $(ClassName)() { const title = 'Doughnut Chart'; - const [chartData, setChartData] = useState([]); - const legendRef: any = useRef(null); - const chartRef: any = useRef(null); - - useEffect(() => { - setChartData(data); - }, []); + const [chartData] = useState(data); + const [legend, setLegend] = useState(null); return (
@@ -42,10 +37,10 @@ export default function $(ClassName)() {
- +
-
diff --git a/packages/cli/templates/react/igr-ts/financial-chart/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/financial-chart/default/files/src/app/__path__/__filePrefix__.tsx index ca3c976e8..cbc6924ea 100644 --- a/packages/cli/templates/react/igr-ts/financial-chart/default/files/src/app/__path__/__filePrefix__.tsx +++ b/packages/cli/templates/react/igr-ts/financial-chart/default/files/src/app/__path__/__filePrefix__.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react' +import { useState } from 'react'; import { IgrFinancialChartModule } from 'igniteui-react-charts'; import { IgrFinancialChart } from 'igniteui-react-charts'; import style from './style.module.css'; @@ -22,11 +22,7 @@ const data: any = [ export default function $(ClassName)() { const title = 'Financial Chart'; - const [chartData, setChartData] = useState([]); - - useEffect(() => { - setChartData(data); - }, []); + const [chartData] = useState(data); return (
diff --git a/packages/cli/templates/react/igr-ts/pie-chart/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/pie-chart/default/files/src/app/__path__/__filePrefix__.tsx index f6442bbcf..e358c8fcf 100644 --- a/packages/cli/templates/react/igr-ts/pie-chart/default/files/src/app/__path__/__filePrefix__.tsx +++ b/packages/cli/templates/react/igr-ts/pie-chart/default/files/src/app/__path__/__filePrefix__.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef, useState } from 'react'; +import { useState } from 'react'; import { IgrPieChartModule } from 'igniteui-react-charts'; import { IgrPieChart } from 'igniteui-react-charts'; import { IgrItemLegend } from 'igniteui-react-charts'; @@ -18,13 +18,8 @@ const data: any = [ export default function $(ClassName)() { const title = 'Pie Chart'; - const [chartData, setChartData] = useState([]); - const legendRef: any = useRef(null); - const chartRef: any = useRef(null); - - useEffect(() => { - setChartData(data); - }, []); + const [chartData] = useState(data); + const [legend, setLegend] = useState(null); return (
@@ -37,7 +32,7 @@ export default function $(ClassName)() {
- +
From b14524559b3f7d500adf8decbf3f374669a6b303 Mon Sep 17 00:00:00 2001 From: damyanpetev Date: Thu, 2 Apr 2026 17:52:28 +0300 Subject: [PATCH 2/2] docs(changelog): add entry for react project update --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 97c58df42..481f00a0a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -47,6 +47,7 @@ A comprehensive modernization of all Angular templates to align with Angular v21 ### React & Web Components Template Updates * **React (`igr-ts`):** added 30 missing component templates (accordion, avatar, badge, banner, button, button-group, calendar, card, checkbox, chip, circular-progress, date-picker, divider, dropdown, expansion-panel, form, icon, icon-button, input, linear-progress, list, navbar, radio-group, rating, ripple, slider, switch, tabs, text-area, tree) to match Web Components template coverage ([#1576](https://github.com/IgniteUI/igniteui-cli/pull/1576)) +* **React (`igr-ts`):** updated project template to latest with vite@8 ([#1598](https://github.com/IgniteUI/igniteui-cli/pull/1598)) * **React packages update:** updated `igniteui-react-core/charts/gauges` to ~19.5.2 and `igniteui-react[-grids]` to ~19.6.0 ([#1567](https://github.com/IgniteUI/igniteui-cli/pull/1567)) * **Web Components packages update:** updated igniteui-webcomponents packages to latest ([#1566](https://github.com/IgniteUI/igniteui-cli/pull/1566)) * **Web Components grid fixes:** corrected component usage and dependencies in grid templates ([#1562](https://github.com/IgniteUI/igniteui-cli/pull/1562))