React charts leftovers

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))

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 (
     <div>

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<IgrItemLegend | null>(null);
 
   return (
     <div>
@@ -42,18 +37,18 @@ export default function $(ClassName)() {
       </div>
       <div className={style.container}>
         <div className={style.legend}>
-          <IgrItemLegend ref={legendRef} />
+          <IgrItemLegend ref={setLegend} />
         </div>
         <div className={style.chart}>
-          <IgrDoughnutChart ref={chartRef}
+          <IgrDoughnutChart
             width="300px"
             height="300px">
             <IgrRingSeries
               name="ring1"
               dataSource={chartData}
               labelMemberPath="Company"
               valueMemberPath="MarketShare"
-              legend={legendRef.current}
+              legend={legend}
               />
           </IgrDoughnutChart>
         </div>

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 (
     <div>

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<IgrItemLegend | null>(null);
 
   return (
     <div>
@@ -37,17 +32,16 @@ export default function $(ClassName)() {
       </div>
       <div className={style.container}>
         <div className={style.legend}>
-          <IgrItemLegend ref={legendRef} />
+          <IgrItemLegend ref={setLegend} />
         </div>
         <div className={style.chart}>
           <IgrPieChart dataSource={chartData}
             labelMemberPath="Company"
             valueMemberPath="MarketShare"
             width="500px"
             height="500px"
-            ref={chartRef}
             legendLabelMemberPath="Label"
-            legend={legendRef.current}
+            legend={legend}
           />
         </div>
       </div>