DEV Community: Vinoth Kumar Sundaramoorthy

Build World-Class Flutter Apps with Globalization and Localization

Vinoth Kumar Sundaramoorthy — Mon, 25 Nov 2024 11:45:03 +0000

TL;DR: Learn to create globally accessible, culturally relevant Flutter apps. Covering everything from adapting UI elements like dates, currencies, and text direction to implementing multilingual support, this guide offers step-by-step instructions with Syncfusion Flutter widgets and packages. Ideal for developers looking to expand their app’s reach with easy-to-implement, user-friendly localization techniques.

In today’s global market, an app should be able to serve people from different countries and cultures. Globalization and localization simply mean making your app easy to use and understand for anyone.

Localization is the process of adapting your app to meet users’ language, cultural, and regional preferences in different parts of the world. It involves more than just translating text—localization ensures that dates, times, currencies, and even visual elements are appropriate for the target audience. Localizing your app makes it more relevant and user-friendly for people from different regions, which can significantly improve user experience and increase your app’s global reach.

Syncfusion Flutter widgets are written natively in Dart to help you create rich, high-quality apps for iOS, Android, Web, Windows, macOS, and Linux from a single code base.

In Flutter, localization is made easier with built-in support for multiple languages and tools that help you manage and implement translations efficiently. This process allows your app to automatically adjust its content based on the user’s language and region settings, providing a seamless experience for users everywhere.

In this blog, we’ll explore the globalization and localization features supported in the Syncfusion Flutter widgets.

Globalization

Globalization refers to designing and developing your app to serve the users belonging to various languages and regions without requiring significant changes to the core code. This involves considering factors such as:

Date and time formats : Handling different date, time, and number formats based on the user’s locale.
Currency formats : Displaying prices and currencies according to regional standards.
Text direction : Supporting both left-to-right (LTR) and right-to-left (RTL) text directions.

The following table displays the globalization options supported by the Syncfusion Flutter widgets.

Widgets	Links
SfCartesianChart	Number format Date format
SfCalendar	Date format
SfDataGrid	Date format Number format
SfDateRangePicker	Date format
SfGauges	Number format
SfRangeSlider	Number format Date format
SfRangeSelector	Number format Date format

Localization

Localization is the process of adapting the content of your app to a specific locale, including translating text, adjusting layouts, and even changing icons or images to suit cultural preferences. It involves:

Translating UI text : Converting all user-facing text to the target language.
Adjusting layouts : Ensuring the UI works well in different languages, especially those requiring more space or having a different text direction.
Cultural adaptations : Adapting images, colors, and icons to be culturally appropriate.

By default, Syncfusion Flutter widgets are localized in English (en-US). However, we can easily extend this support to other languages by adding the syncfusion_localizations package in our Flutter app. This package currently supports 76 languages, allowing you to make your app more accessible to users globally.

The following table displays the languages supported by the Syncfusion Flutter widgets.

Supported locales	Languages
af	Afrikaans
am	Amharic
ar	Arabic
az	Azerbaijani
be	Belarusian
bg	Bulgarian
bn	Bengali Bangla
bs	Bosnian
ca	Catalan Valencian
cs	Czech
da	Danish
de	German
el	Modern Greek
en	English
es	Spanish Castilian
et	Estonian
eu	Basque
fa	Persian
fi	Finnish
fil	Filipino Pilipino
fr	French
gl	Galician
gu	Gujarati
he	Hebrew
hi	Hindi
hr	Croatian
hu	Hungarian
hy	Armenian
id	Indonesian
is	Icelandic
it	Italian
ja	Japanese
ka	Georgian
kk	Kazakh
km	Khmer Central Khmer
kn	Kannada
ko	Korean
ky	Kirghiz Kyrgyz
lo	Lao
lt	Lithuanian
lv	Latvian
mk	Macedonian
ml	Malayalam
mn	Mongolian
mr	Marathi
ms	Malay
my	Burmese
nb	Norwegian Bokmål
ne	Nepali
nl	Dutch Flemish
no	Norwegian
or	Oriya
pa	Panjabi Punjabi
pl	Polish
ps	Pushto Pashto
pt	Portuguese (+ one country variation)
ro	Romanian Moldavian Moldovan
ru	Russian
si	Sinhala Sinhalese
sk	Slovak
sl	Slovenian
sq	Albanian
sr	Serbian
sv	Swedish
sw	Swahili
ta	Tamil
te	Telugu
th	Thai
tl	Tagalog
tr	Turkish
uk	Ukrainian
ur	Urdu
uz	Uzbek
vi	Vietnamese
zh	Chinese (+ 2 country variations)
zu	Zulu

Let’s see how to localize the text in the Syncfusion Flutter Calendar widget. To achieve localization for Syncfusion widgets, add the syncfusion localizations and syncfusion flutter calendar packages as dependencies in your pubspec.yaml file. This will enable you to include additional languages and integrate the Syncfusion Calendar widget into your Flutter app.

To begin the Flutter localization process, using the MaterialApp widget in your Flutter apps is essential. Without MaterialApp, localization cannot be achieved. This widget includes several key properties that facilitate localization:

1. Locale

This property sets the initial locale for the app’s Localizations widget. If the locale is not specified, the system’s default locale is used.

2. LocalizationsDelegates

These delegates collectively define all the localized resources for the app’s Localizations widget. You should specify this parameter if your app needs translations for one or more locales listed in GlobalMaterialLocalizations. The delegates will handle the retrieval of localized resources.

To add localization for Syncfusion Flutter widgets, you must include the SfGlobalLocalizations.delegate parameter in the localizationsDelegates list. This delegate ensures that the Syncfusion widgets within your Flutter app are localized according to the selected language and locale.

3. SupportedLocales

This is a list of locales that your app supports. By default, only American English (en-US) is supported. You should configure this list according to the locales your app will support. This list is crucial and cannot be null, with its default value being [const Locale (‘en’, ‘US’)].

The order of the locales in the supportedLocales list is important. The default locale resolution algorithm, basicLocaleListResolution, prioritizes matching in the following order:

Locale.languageCode, Locale.scriptCode, and Locale.countryCode
Locale.languageCodeand Locale.scriptCode only
Locale.languageCodeand Locale.countryCode only
Locale.languageCodeonly
Locale.countryCodeonly when all preferred locales fail to match
Returns the first element of supported localesas a fallback

Refer to the following code example to add multiple localization for the Flutter Calendar widget.

Locale _locale = const Locale('en', 'US');
final CalendarController _calendarController = CalendarController();

@override
void initState() {
  _calendarController.view = CalendarView.month;
  super.initState();
}

@override
Widget build(BuildContext context) {
  return MaterialApp(
    locale: _locale,
    localizationsDelegates: const [
      GlobalMaterialLocalizations.delegate,
      GlobalWidgetsLocalizations.delegate,
      GlobalCupertinoLocalizations.delegate,
      SfGlobalLocalizations.delegate,
    ],
    supportedLocales: const [
      Locale('en', 'US'),
      Locale('es', 'ES'),
      Locale('ja', 'JP'),
      // Add other locales here.
    ],
    home: Scaffold(
      body: SfCalendar(
        allowedViews: const <CalendarView>[
          CalendarView.day,
          CalendarView.week,
          CalendarView.workWeek,
          CalendarView.month,
          CalendarView.timelineDay,
          CalendarView.timelineWeek,
          CalendarView.timelineWorkWeek,
          CalendarView.schedule,
        ],
        showDatePickerButton: true,
        controller: _calendarController,
        showNavigationArrow: true,
        monthViewSettings: const MonthViewSettings(
          appointmentDisplayMode: MonthAppointmentDisplayMode.appointment),
        timeSlotViewSettings: const TimeSlotViewSettings(
          minimumAppointmentDuration: Duration(minutes: 60),
        ),
      ),
    ),
  );
}

Refer to the following image.

Adding localization support in Flutter Calendar widget

In some cases, simply specifying the language code may not be enough to properly differentiate between variations of the same language. For example, the Chinese language has both simplified and traditional scripts and regional differences in how characters are written. To handle this, you can specify additional parameters like the script and country codes in the supportedLocales list.

Refer to the following code example. Here, languageCode is the primary language code (e.g., zh for Chinese), scriptCode specifies the script type, such as Hant for traditional Chinese or Hans for simplified Chinese, and countryCode specifies the region, like TW for Taiwan or CN for China.

Locale _locale = const Locale.fromSubtags(languageCode: 'zh');
final CalendarController _calendarController = CalendarController();

// Full Chinese support for CN, TW, and HK
final List<Locale> _locales = const <Locale>[
  Locale.fromSubtags(languageCode: 'zh'), // Generic Chinese 'zh'
  Locale.fromSubtags(
    languageCode: 'zh',
    scriptCode: 'Hant'), // Generic traditional Chinese 'zh_Hant'
  Locale.fromSubtags(
    languageCode: 'zh',
    scriptCode: 'Hans',
    countryCode: 'CN'), // 'zh_Hans_CN'
  Locale.fromSubtags(
    languageCode: 'zh',
    scriptCode: 'Hant',
    countryCode: 'HK'), // 'zh_Hant_HK'
];

@override
void initState() {
  _calendarController.view = CalendarView.month;
  super.initState();
}

@override
Widget build(BuildContext context) {
  return MaterialApp(
    debugShowCheckedModeBanner: false,
    locale: _locale,
    localizationsDelegates: const [
      GlobalMaterialLocalizations.delegate,
      GlobalWidgetsLocalizations.delegate,
      GlobalCupertinoLocalizations.delegate,
      SfGlobalLocalizations.delegate,
    ],
    supportedLocales: _locales,
    home: Scaffold(
      body: SfCalendar(
        controller: _calendarController,
        monthViewSettings: const MonthViewSettings(
          showAgenda: true,
        ),
      ),
    ),
  );
}

Refer to the following image.

Localization support for the Chinese language with different scripts in Flutter Calendar

How to create custom localization language in Syncfusion Flutter widgets

While Syncfusion Flutter widgets provide extensive language support, there may be cases where you need to add a custom culture or modify existing localizations. This is where extending the SfLocalizations class becomes useful. Creating a subclass of SfLocalizations allows you to override specific properties to provide custom text for different labels in Syncfusion widgets.

For example, if you want to change the labels in a calendar widget for English (en), you can create a class called SfLocalizationsExt that extends SfLocalizations. In this class, you can override properties like noEventsCalendarLabel, todayLabel, and weeknumberLabel to display custom text. You can adjust the labels to fit your app’s style.

After creating your custom localization class, create a delegate by extending the LocalizationsDelegate class. This delegate will load your custom localization when the app is set to the relevant locale. Finally, we should add this delegate to the localizationsDelegates list in the MaterialApp widget to make sure our custom localization is used when needed.

Here’s an example of how you can implement this for the custom English (en) language:

class _CustomLocalizationDemoState extends State<_CustomLocalizationDemo> {
  final Locale _locale = const Locale('en');
  final CalendarController _calendarController = CalendarController();

  @override
  void initState() {
    _calendarController.view = CalendarView.month;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      locale: _locale,
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        // Specify the delegate directly
        SfLocalizationsEnDelegate.delegate,
      ],
      supportedLocales: [
        _locale,
      ],
      home: Scaffold(
       body: SfCalendar (
             ….
        ),
      ),
    );
  }
}

/// The translations for English (`en`).
class SfLocalizationsExt extends SfLocalizations {
  SfLocalizationsExt();

  @override
  String get noEventsCalendarLabel => '𝓝𝓞 𝓔𝓥𝓔𝓝𝓣𝓢';

  @override
  String get noSelectedDateCalendarLabel => '𝓝𝓞 𝓢𝓔𝓛𝓔𝓒𝓣𝓔𝓓 𝓓𝓐𝓣𝓔';

  @override
  String get todayLabel => '𝓣𝓞𝓓𝓐𝓨';

  @override
  String get weeknumberLabel => '𝓦𝓔𝓔𝓚 𝓝𝓤𝓜𝓑𝓔𝓡';

  @override
  String get allDayLabel => '𝓐𝓛𝓛 𝓓𝓐𝓨';

  @override
  String get allowedViewDayLabel => '𝓓𝓐𝓨';

  @override
  String get allowedViewMonthLabel => '𝓜𝓞𝓝𝓣𝓗';

  @override
  String get allowedViewScheduleLabel => '𝓢𝓒𝓗𝓔𝓓𝓤𝓛𝓔';

  @override
  String get allowedViewTimelineDayLabel => '𝓣𝓘𝓜𝓔𝓛𝓘𝓝𝓔 𝓓𝓐𝓨';

  @override
  String get allowedViewTimelineMonthLabel => '𝓣𝓘𝓜𝓔𝓛𝓘𝓝𝓔 𝓜𝓞𝓝𝓣𝓗';

  @override
  String get allowedViewTimelineWeekLabel => '𝓣𝓘𝓜𝓔𝓛𝓘𝓝𝓔 𝓦𝓔𝓔𝓚';

  @override
  String get allowedViewTimelineWorkWeekLabel => '𝓣𝓘𝓜𝓔𝓛𝓘𝓝𝓔 𝓦𝓞𝓡𝓚 𝓦𝓔𝓔𝓚';

  @override
  String get allowedViewWeekLabel => '𝓦𝓔𝓔𝓚';

  @override
  String get allowedViewWorkWeekLabel => '𝓦𝓞𝓡𝓚 𝓦𝓔𝓔𝓚';

  // other properties
}

class SfLocalizationsEnDelegate extends LocalizationsDelegate<SfLocalizations> {
  static LocalizationsDelegate<SfLocalizations> delegate = SfLocalizationsEnDelegate();

  @override
  bool isSupported(Locale locale) => locale.languageCode == 'en';

  @override
  Future<SfLocalizations> load(Locale locale) {
    return SynchronousFuture<SfLocalizations<(SfLocalizationsExt());
  }

  @override
  bool shouldReload(LocalizationsDelegate<SfLocalizations> old) => false;
}

Refer to the following image.

Creating custom localization support in Flutter Calendar widget

We have reached the end of this blog. The following table lists the Syncfusion Flutter widgets that support localization. This table will help you quickly identify which widgets can be localized, allowing you to create a more accessible and user-friendly app for a global audience.

Widgets	In-built localization
Barcode	This widget does not use predefined English words, so it does not support localization.
Calendar	Yes
Charts	Yes
DataGrid	Yes
DateRangePicker	Yes
Gauges	This widget does not use predefined English words, so it does not support localization.
Maps	This widget does not use predefined English words, so it does not support localization.
Slider	This widget does not use predefined English words, so it does not support localization.
TreeMap	This widget does not use predefined English words, so it does not support localization.
PDF	This widget does not use predefined English words, so it does not support localization.
PDFViewer	Yes
SparkCharts	This widget does not use predefined English words, so it does not support localization.
Signature Pad	This widget does not use predefined English words, so it does not support localization.
Xlsio	This widget does not use predefined English words, so it does not support localization.

GitHub reference

For more details, refer to the Globalization and localization support in the Flutter widgets GitHub demo.

Conclusion

Thanks for reading! In this blog, we’ve explored the globalization and localization features supported in the Syncfusion Flutter widgets. By implementing these features, you can provide your global audience with a more personalized and engaging experience. Give it a try, and feel free to share your feedback in the comment section below.

If you’re an existing customer, you can download the latest version of Essential Studio^® from the License and Downloads page. For those new to Syncfusion, try our 30-day free trial to explore all our features.

If you have questions, contact us through our support forum, support portal, or feedback portal. As always, we are happy to assist you!

Related Blogs

Zoneless Change Detection in Angular 18: Boost Performance

Vinoth Kumar Sundaramoorthy — Mon, 25 Nov 2024 11:29:20 +0000

TL;DR: Angular 18 introduced zoneless change detection, an experimental feature to replace Zone.js. It improves performance by manually controlling when change detection occurs, reducing unnecessary cycles, and enhancing app efficiency.

Change detection is the process by which Angular ensures that the user interface (UI) reflects the current state of the application. Traditionally, Angular used Zone.js to track asynchronous operations and trigger change detection when necessary.

Angular 18 has introduced an exciting experimental feature: zoneless change detection. This innovation promises to enhance performance by eliminating the need for Zone.js , which has been a cornerstone of Angular’s change detection mechanism. In this blog, we’ll look at the concepts, benefits, and implementation of zoneless change detection.

What is change detection in Angular?

In Angular, change detection refers to the process through which the framework monitors an app’s state and updates the view accordingly. Angular uses Zone.js to track asynchronous tasks such as HTTP requests or timers, and it triggers change detection based on these operations. Zone.js “monkey-patches” browser APIs like setTimeout and addEventListener , allowing Angular to recognize when asynchronous events happen.

Angular organizes components in a tree structure, with the root being the AppComponent , and all other components branching out as children. Each component has its own change detector. When a change occurs, Angular checks each component in a bottom-up fashion, updating only the necessary parts of the view.

When an event like a user interaction or an HTTP response occurs, Angular starts a tick cycle. It begins at the root of the change detection tree and compares the current data of each component with its previous state. If a difference is found, the view is updated. Otherwise, Angular moves on to the next component without making changes.

Angular provides the following two change detection strategies:

Default strategy: Angular checks all components in the tree when any change happens.
OnPush strategy : Angular checks the component only if its inputs have changed, or if an event is emitted inside the component. This improves performance, especially in large apps, by limiting unnecessary checks.

How does change detection work in Angular?

Let’s create an Angular app and see zone-based change detection in action.

Run the following command to create an Angular app.

ng new zoneless-app

Once the project is created, open the src\app\app.component.ts file and put the following code into it.

import { Component, inject, OnInit, OnDestroy } from '@angular/core'; 
import { RouterOutlet } from '@angular/router'; 
import { AsyncPipe } from '@angular/common'; 
import { map, catchError, of } from 'rxjs'; 
import { HttpClient } from '@angular/common/http'; 

@Component({ 
  selector: 'app-root', 
  standalone: true, 
  imports: [RouterOutlet, AsyncPipe], 
  templateUrl: './app.component.html', 
  styleUrls: ['./app.component.css'], 
}) 
export class AppComponent implements OnInit, OnDestroy { 

  private readonly httpClient = inject(HttpClient); 
  private intervalId: any; // For managing the setInterval lifecycle.

  currentCount = 0; 
  timer = 0; 
  movies$ = this.fetchMovieData(); 

  incrementCount() { 
    this.currentCount++; 
  } 

  ngOnInit() { 
    this.intervalId = setInterval(() => { 
      this.timer++; 
    }, 1000); 
  }

  ngOnDestroy() {
    if (this.intervalId) {
      clearInterval(this.intervalId); // Clear the interval on destroy.
    }
  } 

  fetchMovieData() { 
    return this.httpClient 
      .get<any[]>('https://dummyapi.online/api/movies') 
      .pipe(
        map((movieList) => movieList.slice(0, 5)),
        catchError((error) => {
          console.error('Error fetching movies', error);
          return of([]); // return empty array in case of error.
        })
      ); 
  } 
}

The incrementCount method increases the currentCount property by 1. In the ngOnInit lifecycle hook, we use the setInterval function to increment the timer property every second. The fetchMovieData method makes an HTTP GET request to retrieve movie data from a publicly available API. It utilizes the map operator to transform the response, slicing the movie list to return only the first five movies. The result is observable.

Open the src\app\app.component.html file and paste the following code into it.

<h3>Click Event</h3> 
<p>Current count: {{ currentCount }}</p> 
<button class="btn btn-primary" (click)="incrementCount()">Click me</button> 

<h3>Async timer</h3> 
<p>Timer value: {{ timer }}</p> 

<h3>Fetch data from HTTP call</h3> 
@for (movie of movies$ | async; track movie.id) { 
<p>{{ movie.movie }}</p> 
}

We have a button that, when clicked, triggers the incrementCount method in the component class to increase the currentCount. Additionally, the current value of the timer property, which updates every second, will be displayed. We also use the async pipe on the movies$ observable and loop through the data to display the movie names.

To run the app, use the command ng serve. Once the app is running, you’ll see the output as shown in the following.

Whenever the user interacts with the app, Zone.js informs Angular, triggering change detection to update the view. However, this approach comes with a performance cost. Zone.js causes change detection to run after every asynchronous operation, even if no meaningful changes have been made to the app state. This can lead to unnecessary computations, particularly in large apps.

To check if Zone.js is present, open the browser’s console and type Zone (with an uppercase Z ). You will see a description of the Zone class, as demonstrated in the following image.

What is zoneless change detection?

Zoneless change detection in Angular 18 introduces a more manual and precise way to manage change detection. This approach gives developers finer control over when change detection is triggered, improving performance and reducing memory overhead. By eliminating the reliance on Zone.js , Angular avoids unnecessary change detection cycles, resulting in faster and more efficient apps.

Advantages of not using Zone.js

Removing Zone.js as a dependency has several key benefits:

Better performance

Zone.js listens to DOM events and async tasks to trigger change detection, even when no real state change happens. This leads to unnecessary updates, slowing down the app.

Improved core web vitals

Zone.js adds extra load to the app, increasing both the file size and startup time.

Easier debugging

Zone.js makes debugging harder, with more complicated stack traces and issues when code runs outside Angular’s zone.

Better compatibility

Zone.js patches browser APIs, but it doesn’t cover all new APIs. Some, like async/await, can’t be patched well. Also, some libraries may not work smoothly with Zone.js. Removing it simplifies things and improves long-term compatibility.

How to enable zoneless change detection in an Angular 18 app?

Angular 18 introduced an experimental API, provideExperimentalZonelessChangeDetection , which allows us to configure an app to avoid using the state or state changes of Zone.js for scheduling change detection. This enables a more streamlined approach to change detection, giving developers greater control over when it is triggered.

Update the src\app\app.config.ts file to include this next function.

import { provideExperimentalZonelessChangeDetection } from '@angular/core'; 
// Other existing imports. 

export const appConfig: ApplicationConfig = { 
  providers: [ 
    provideExperimentalZonelessChangeDetection(), 
// Existing providers. 
  ], 
};

We have removed the provideZoneChangeDetection function and included the new provideExperimentalZonelessChangeDetection function.

Zone.js is usually included through the polyfills option in the  angular.json  file for both build and test targets. To exclude it from the build, remove  zone.js  and  zone.js/testing  from both sections.

"build": { 
  "builder": "@angular-devkit/build-angular:application", 
  "options": { 
    ... 
    "polyfills": [ 
      "zone.js" // Remove this line.  
     ], 
    "tsConfig": "tsconfig.app.json", 
    "scripts": [] 
  }, 
  ... 
}, 

"test": { 
  "builder": "@angular-devkit/build-angular:karma", 
  "options": { 
    "polyfills": [ 
      "zone.js", // Remove this line. 
      "zone.js/testing" // Remove this line. 
    ], 
    "tsConfig": "tsconfig.spec.json", 
    "scripts": [] 
    ... 
  } 
}

Finally, remove the Zone.js package from the app by running the following command.

npm uninstall zone.js

Now run the app again. Open the browser console and check for the presence of Zone. You will see the following error.

This indicates that Zone.js is not available and our app is running in zoneless mode.

Check out the functionality of the app.

You can see that the click event handler is functioning as expected, as each click triggers a change detection when the button is pressed. Similarly, data retrieval via the async pipe is working correctly, since it triggers change detection whenever a new value is emitted by the observable.

However, the timer property, which relies on setInterval , is not being updated. In Zone.js-based change detection, events like setInterval or setTimeout are automatically detected. But with the zoneless change detection mechanism, changes within the setInterval function do not automatically trigger updates. To reflect these changes in the view, we must explicitly inform Angular that a change has occurred.

There are two ways to notify Angular for change detection in this case:

Using ChangeDetectorRef.markForCheck()
Using signals

Let’s understand the implementation of both these techniques with the help of code examples.

Using ChangeDetectorRef

Update the AppComponent class inside the src\app\app.component.ts file as follows:

export class AppComponent implements OnInit { 
  // Existing code.

  private readonly changeDetectorRef = inject(ChangeDetectorRef); 

  ngOnInit() { 
    setInterval(() => { 
      this.timer++; 
      this.changeDetectorRef.markForCheck(); // Add this line to trigger change detection. 
    }, 1000); 
  } 

  // Existing code. 
}

We have invoked the markForCheck method on the ChangeDetectorRef instance within the setInterval function. This instructs Angular to check the component for any changes.

Run the app again, and you’ll notice that the value of the timer property is now updating correctly. Refer to the following image.

Using signals

Update the AppComponent class inside the src\app\app.component.ts file.

export class AppComponent implements OnInit { 
  // Existing code. 
  timer = signal(0); 

  ngOnInit() { 
    setInterval(() => { 
      this.timer.update((t) => t + 1); 
    }, 1000); 
  } 

  // Existing code. 
}

We have defined the timer property as a signal, initializing it to zero. Inside the setInterval function, we will use the signal’s update function to increment the value of the timer.

In the template, we will access the value of the signal using parentheses.

<h3>Async timer</h3> 
<p>Timer value: {{ timer() }}</p>

Run the app again, and you’ll notice that the value of the timer property is now updating correctly.

Conclusion

In this article, we explored how Zone.js-based change detection works in Angular and its limitations. We also discussed the experimental zoneless change detection introduced in Angular 18 and how to activate it.

Zoneless Angular empowers developers to enhance change detection without the burden of automatic zone-based triggers. By effectively applying zoneless change detection in Angular, you can achieve notable performance gains and improve your app’s responsiveness.

We value your questions and feedback. Feel free to share your thoughts in the comments section below or reach out to us through our support forum, support portal, or feedback portal. We’re always here to help you!

Related Blogs

Secure JWT Storage: Best Practices

Vinoth Kumar Sundaramoorthy — Thu, 21 Nov 2024 11:17:10 +0000

TL;DR: JSON Web Tokens are widely used for secure data transmission in single-page applications, but they are susceptible to security risks such as cross-site scripting and cross-site request forgery. Secure methods for storing JWTs include using HttpOnly cookies with the Secure flag, encrypting JWTs before storage, and employing server-side session management.

Single-page applications (SPAs) render only a single HTML page and change the content of that page when the user interacts with it. Angular, React, and Vue.js are some of the most popular SPA frameworks available, and developers often use them for modern web apps, since they enable quick transitions between pages.

However, this wide adaptation has made SPAs a prime target of web attackers, and we need to ensure the security of these apps. We need secure tokens such as JSON Web Tokens (JWT) to do this. A JSON Web Token is a data structure made up of JSON that has been encoded and signed in order to prove that it is genuine and has not been tampered with.

So, let’s explore different, secure ways of storing JWT tokens in SPAs, identify potential web threats, and find ways to improve SPA security more.

JWTs and security concerns

JWTs transmit information between clients and servers in a compact JSON format. Despite their convenience, they are susceptible to certain security risks, which can lead to unauthorized access if tokens are mishandled:

Cross-site scripting (XSS): If JWTs are stored in less secure places, like local storage, attackers can steal them using XSS attacks.
Cross-site request forgery (CSRF): If the JWT is stored in a cookie that is automatically sent with every request, an attacker could potentially exploit a CSRF vulnerability by tricking the user’s browser into making an unauthorized request to the server.

Common storage methods

Local storage and session storage

Local storage is a web browser database that allows you to save data across sessions through key and value pairs. Session storage is like local storage but with a key difference: it stores data only for a browser session. The data is erased once the session ends, typically when the browser tab is closed. Although it is pretty easy to use these storages, they are vulnerable to XSS attacks. If an attacker injects a script, it can access the stored data, which poses a risk when storing sensitive information like JWTs.

Cookies

When configured with security-focused attributes, HttpOnly, Secure, and SameSite cookies offer a more secure alternative. These settings help shield against XSS and CSRF, ensuring cookies are sent over secure connections and are inaccessible to client-side scripts.

Secure methods for storing JWTs

Secure HttpOnly cookies

Storing JWTs in cookies configured with HttpOnly and Secure flags is a solid approach to enhancing security. This approach improves security by making it impossible for client-side scripts to access the JWTs and only passing them over secure channels:

HttpOnly flag: Setting the HttpOnly** flag** on cookies means that JavaScript running in the browser can’t access them. This is a crucial step in defending against attackers who might try to run malicious scripts to steal your cookies, making it much harder for XSS attacks to succeed.
Secure flag: The Secure flag guarantees that the cookie can be sent only through the HTTPS connection. This improves security since you can’t send cookies through an unencrypted connection.

Implementation example

Set-Cookie: AuthToken=encryptedJwt; HttpOnly; Secure; Path=/; SameSite=Strict;

This cookie configuration ensures that the AuthToken is only sent over HTTPS, isn’t accessible via JavaScript, and isn’t sent along with requests initiated from third-party websites, thanks to the SameSite=Strict directive.

Encryption before storage

JSON Web Tokens are encrypted to add a certain level of security even if someone gets ahold of them. They are useless without the decryption key.

Before storing a JWT on the client side, it should be encrypted using a strong encryption algorithm. For example, you can use Bcrypt for Node.js apps. The encryption keys should also be stored securely on the server and never exposed to the client or hard-coded in the app.

Refer to the following code example for JWT token encryption.

const CryptoJS = require("crypto-js");
const token = 'your.actual.jwt.token';
const secretKey = 'your.actual.secret-key';

const encryptedToken = CryptoJS.AES.encrypt(token, secretKey).toString();
localStorage.setItem('encryptedToken', encryptedToken);

This code example encrypts the JWT with AES and stores the JWT in localStorage after creating the encrypted token. Although we use localStorage here, no one can use the JWT without the encryption key.

Server-side session management

Another solid approach to storing JWTs is to handle the session only on the server using a unique session ID in a cookie. Every time a new request hits a server, this ID is sent through the cookie to the server, and then the server uses this specific ID to fetch the JWT and check on the session. This approach reduces the risk by keeping the JWT off the client side.

Implementation details

// Server-side
const sessionId = generateSessionId(); // Generate a unique session ID
storeSession(sessionId, jwt); // Store the JWT against the session ID in server storage

// Set cookie with session ID.
res.cookie('sessionID', sessionId, { httpOnly: true, secure: true, sameSite: 'Strict' });

// Client-side
const storedSessionId = document.cookie; // Automatically sent with HTTP requests

In this setup, the JWT is securely stored on the server and mapped to a session ID stored in a cookie. The cookie’s properties are set up due to the proper transmission and its inability to be read by JavaScript, which adds extra protection.

Advanced security practices

Using web workers for JWT management

Web workers have become an interesting element in web development, while JavaScript can now run in background threads. To enhance security, you can use web workers to implement JWTs. This is effective because it frees a token from the main app environment, which is generally exposed to XSS threats.

Refer to the next example for managing JWTs using web workers.

// In the main application.
var worker = new Worker('jwtWorker.js');

worker.postMessage({jwt: 'your.jwt.token'});

worker.onmessage = function(event) {
  console.log('Received token:', event.data.jwt);
};

// Inside jwtWorker.js
onmessage = function(event) {
  let jwt = event.data.jwt;
  // Perform operations with JWTpostMessage({jwt: jwt});
};

This code example shows how a web worker can securely manage JWTs by keeping them out of the global window scope. This reduces the likelihood that extremely dangerous scripts will get a hold of the token, making it secure.

Content security policy (CSP)

You can use CSPs to counter XSS attacks that considerably threaten JWTs. A CSP enables you to specify which resources the browser can load on the page, thus restricting unwanted scripts.

Guidelines for setting a CSP for SPAs

Use the default-src directive to control the default behavior for fetching resources such as JavaScript, images, CSS, and fonts.
Set script-src to restrict where scripts can be loaded, ideally only allowing scripts from your domain and trusted sources.
Include object-src ‘none’ to block all plugins (like Flash) which can be exploited.

Content-Security-Policy: default-src 'self'; script-src 'self' https://trustedsource.com; object-src 'none';

This CSP header ensures that only scripts from your domain and trustedsource.com are allowed, enhancing your SPA’s security posture against script injections.

Regular security audits and updates

Maintaining the security of your SPA requires ongoing attention. It is important to conduct regular audits to look for potential gaps and update your libraries and frameworks when needed.

Best practices for security maintenance

Schedule regular security audits: Use automated tools and manual inspections to routinely check your app for potential vulnerabilities.
Stay informed on updates: Get notified on updates for security issues for third-party libraries and frameworks to know when they are out.
Implement a quick response process: Build a procedure that would allow you to change your environment as soon as new security patches come onto the market.

Conclusion

JSON Web Tokens are essential for single-page apps to secure user sessions. However, they come with risks, such as exposure to XSS and CSRF attacks.

So, you need to ensure that you take the necessary security steps, such as proper storage, encryption, server-side session management, web workers, and CSPs, to enhance the security of your SPA.

Well, you don’t need to implement all of this. But implement what is necessary based on your app requirements.

Feel free to share your thoughts in the comments section below or reach out to us through our support forum, support portal, or feedback portal. We’re always here to help you!

Related blogs

Mastering Flutter DataGrid with Pagination: Build Efficient Data Tables

Vinoth Kumar Sundaramoorthy — Thu, 21 Nov 2024 10:34:35 +0000

TL;DR: Implementing pagination in Flutter’s DataGrid widget enables efficient data handling for large datasets. This guide provides a step-by-step setup for paginated views in a Flutter app.

The Syncfusion Flutter DataGrid widget, or the Flutter DataTable, enables users to display and manage data in a tabular format. It offers a rich set of features, such as row selection, sorting, column resizing, row height adjustments, swiping, and more.

The DataGrid allows for interactive data manipulation through the DataPager widget, which supports loading data in segments. This makes it ideal for handling large datasets. The DataPager can be positioned above or below the DataGrid, allowing for efficient data paging.

In this guide, we’ll see how to enable the pagination feature in Flutter DataGrid and explore its various options with practical code examples.

Steps to enable the pagination in the Flutter DataGrid

Follow these steps to add the pagination feature to your Flutter app.

Step 1: Create a DataPager widget

Start by creating a new DataP ager widget. It is used to handle data paging, which is especially useful for managing large datasets. To enable paging, assign the DataSource of your DataGrid to the delegate property of the DataPager. This setup allows the DataPager to manage the paging and data loading for the DataGrid.

Refer to the following code example.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Center(child: Text('Order Details')),
    ),
    body: LayoutBuilder(builder: (context, constraint) {
      return Column(
        children: [
          SizedBox(
            height: constraint.maxHeight - _dataPagerHeight,
            width: constraint.maxWidth,
            child: _buildDataGrid(constraint),
          ),
          SizedBox(
            height: _dataPagerHeight,
            child: SfDataPager(
              delegate: _orderDataSource,
            ),
          ),
        ],
      );
    }),
  );
}

Step 2: Set the pageCount property

Next, set the pageCount property of the DataPager. This property defines how many pages should be displayed in the pager. By configuring the pageCount property, you allow users to navigate through the data more efficiently. This is particularly useful for large datasets, as it breaks the data into manageable segments, improving both performance and usability.

Refer to the following code example.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Center(child: Text('Order Details')),
    ),
    body: LayoutBuilder(builder: (context, constraint) {
      return Column(
        children: [
          SizedBox(
            height: constraint.maxHeight - _dataPagerHeight,
            width: constraint.maxWidth,
            child: _buildDataGrid(constraint),
          ),
          SizedBox(
            height: _dataPagerHeight,
            child: SfDataPager(
              delegate: _orderDataSource,
              pageCount: (_orders.length / _rowsPerPage).ceil().toDouble(),
            ),
          ),
        ],
      );
    }),
  );
}

Step 3: Implement the logic to load data for specific pages

To load data dynamically for each page, implement the handlePageChange method. This method is triggered whenever a user navigates to a new page via the DataPager. Within handlePageChange , define the logic to retrieve and display only the data corresponding to the selected page. By overriding this method, you ensure that the correct data loads seamlessly as the user navigates through different pages, optimizing the display and performance for large datasets.

@override
Future<bool> handlePageChange(int oldPageIndex, int newPageIndex) async {
  int startIndex = newPageIndex * _rowsPerPage;
  int endIndex = startIndex + _rowsPerPage;

  if (endIndex > orders.length) {
    endIndex = orders.length;
  }

  if (startIndex < orders.length && endIndex <= orders.length) {
    _paginatedOrders = orders.getRange(startIndex, endIndex).toList(growable: false);
    _buildDataGridRows(_paginatedOrders);
    notifyListeners();
  } else {
    dataGridRows = [];
  }

  return true;
}

Step 4: Defining data

Here, we are going to define data regarding shipment details of orders. In this step, each order is generated with a randomly assigned shipment price and allocated to a specific city. Each order entry includes details such as product name, price, city, shipment cost, and the total price.

List<Orders> _fetchOrders() {
  List<Order> orderData = [];
  final Random random = Random();

  // Cities list
  List<String> city = [
    'New York',
    'Los Angeles',
    'Chicago',
    'Houston',
    'Phoenix',
    'San Francisco',
    'Dallas',
    'Miami',
    'Atlanta',
    'Seattle',
  ];

  // Mapping of products to their market prices.
  Map<string, double=""> productPrices = {
    'Laptop': 1200.0,
    'Smartphone': 800.0,
    'Tablet': 500.0,
    'Headphones': 150.0,
    'Smartwatch': 200.0,
    'Desktop PC': 1000.0,
    'Gaming Console': 400.0,
    'Fitness Tracker': 100.0,
    'Router': 75.0,
    'Smart TV': 900.0,
    'Drone': 600.0,
    'VR Headset': 350.0,
    'Graphics Card': 800.0,
    'Power Bank': 50.0,
    'Projector': 450.0,
    'Microphone': 80.0,
    'Webcam': 60.0,
    'E-reader': 120.0,
  };

  List<String> products = productPrices.keys.toList();

  // Build exactly 100 records.
  for (int i = 0; i < 100; i++) {
    // Get product name.
    String product = products[i % products.length];

    // Get the price of the product from the productPrices map.
    double price = productPrices[product]!;

    // Generate random shipment price.
    double shipmentPrice = random.nextInt(100) + random.nextDouble();

    // Create an Order object with product and price details.
    orderData.add(Order(
      orderId: 1000 + i,
      customerId: 1700 + i,
      product: product,
      orderPrice: price,
      city: city[i % city.length],
      shippementPrice: shipmentPrice,
      totalPrice: price + shipmentPrice,
    ));
  }
  return orderData;
}</string,>

Step 5: Configure data display layout

Begin by setting up the DataGrid widget and configuring its essential properties to effectively display and manage your data. Based on your paging requirements, decide where to position the DataPager , either above or below the DataGrid.

For a defined size, wrap the DataGrid within a SizedBox. Similarly, control the DataPager ’s appearance by placing it within a Container. To create a vertical layout, organize these widgets in a Column, with the DataPager positioned beneath the DataGrid for easy navigation.

Refer to the following code example.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Center(child: Text('Order Details')),
    ),
    body: LayoutBuilder(builder: (context, constraint) {
      return Column(
        children: [
          SizedBox(
            height: constraint.maxHeight - _dataPagerHeight,
            width: constraint.maxWidth,
            child: _buildDataGrid(constraint),
          ),
          SizedBox(
            height: _dataPagerHeight,
            child: SfDataPager(
              delegate: _orderDataSource,
              pageCount: (_orders.length / _rowsPerPage).ceil().toDouble(),
              availableRowsPerPage: const [15, 20, 25],
              onRowsPerPageChanged: (value) {
                setState(() {
                  if (value != null) {
                    _rowsPerPage = value;
                  }
                });
              },
            ),
          ),
        ],
      );
    }),
  );
}

Widget _buildDataGrid(BoxConstraints constraint) {
  return SfDataGrid(
    source: _orderDataSource,
    columnWidthMode: ColumnWidthMode.fill,
    columns: <GridColumn>[
      GridColumn(
        columnName: 'orderId',
        label: Container(
          padding: const EdgeInsets.all(8),
          alignment: Alignment.centerLeft,
          child: const Text(
            'Order ID',
            overflow: TextOverflow.ellipsis,
          ),
        ),
      ),
      ------ 
      GridColumn(
        columnName: 'totalPrice',
        label: Container(
          padding: const EdgeInsets.all(8),
          alignment: Alignment.centerLeft,
          child: const Text(
            'Total Price',
            overflow: TextOverflow.ellipsis,
          ),
        ),
      ),
    ],
  );
}

GitHub reference

For more details, refer to the pagination in Flutter Datagrid GitHub demo.

Conclusion

Thanks for reading! In this blog, we’ve seen how to effectively implement pagination in the Syncfusion Flutter DataGrid widget to manage large datasets. We hope you find the outlined steps helpful in achieving similar results.

If you have questions, contact us through our support forum, support portal, or feedback portal. As always, we are happy to assist you!

Related Blogs

What’s New in Angular 19?

Vinoth Kumar Sundaramoorthy — Wed, 20 Nov 2024 16:08:37 +0000

TL;DR: Let’s see how to use the Syncfusion Excel Library in C# to manage formulas in Excel. This guide covers creating, reading, and calculating formulas, leveraging advanced features like named ranges and cross-sheet references.

The Syncfusion Excel Library (XlsIO) is a powerful tool that enables developers to programmatically create, manipulate, and manage Excel files. It offers comprehensive functionality for handling formulas, allowing for advanced operations such as reading, writing, and calculating formulas in Excel. It supports 400+ Excel built-in functions, enabling users to create formulas without restrictions.

In this blog, we’ll explore how to read, write, and calculate formulas in Excel using the Syncfusion Excel Library in C#.

Getting started

Step 1: Create a formula in Excel

Formulas in Excel are created by inserting expressions into cells that perform calculations based on the cell’s contents, other cell references, or predefined Excel functions.

First, create a .NET Core Console app in Visual Studio, as shown in the following image.
Then, install the latest Syncfusion.XlsIO.NET.Core NuGet package into your app.
Now, add the code to insert a formula into an Excel document. Refer to the following code example.


using (ExcelEngine excelEngine = new ExcelEngine())

{

IApplication application = excelEngine.Excel;

application.DefaultVersion = ExcelVersion.Xlsx;

IWorkbook workbook = application.Workbooks.Create(1);

IWorksheet sheet = workbook.Worksheets[0];


//Set values to the cells.

sheet.Range["A1"].Number = 10;

sheet.Range["B1"].Number = 20;


//Set formula in the cell.

sheet.Range["C1"].Formula = "=SUM(A1,B1)";


//Saving the workbook as stream.

FileStream stream = new FileStream("Formula.xlsx", FileMode.Create, FileAccess.ReadWrite);

workbook.SaveAs(stream);

stream.Dispose();

}

After executing the provided code example, the output document will resemble the following image.

Creating a formula in Excel using C#

Step 2: Read the formula

Reading formulas in Excel involves retrieving the formula expression from a cell, which is stored as a string. This can be done using the Formula property of the IRange interface.

Refer to the following code example.


using (ExcelEngine excelEngine = new ExcelEngine())

{

IApplication application = excelEngine.Excel;

application.DefaultVersion = ExcelVersion.Xlsx;

FileStream fileStream = new FileStream("Sample.xlsx",FileMode.Open,FileAccess.Read);

IWorkbook workbook = application.Workbooks.Open(fileStream);

IWorksheet sheet = workbook.Worksheets[0];


//Returns the formula in C1 style notation.

string formula = sheet["C1"].Formula;


//Dispose stream.

fileStream.Dispose();

}

Step 3: Calculate the formula

To perform calculations in an Excel workbook, it is necessary to invoke the EnableSheetCalculations method of the IWorksheet. This method initializes the CalcEngine objects and ensures that the formulas in the worksheet are calculated properly.

Accessing a calculated value involves evaluating a formula within an Excel worksheet after enabling sheet calculations. This process returns the formula’s calculated value as a string, providing users with the computation’s result.

Refer to the following code example to access a calculated value from a cell.


using (ExcelEngine excelEngine = new ExcelEngine())

{

IApplication application = excelEngine.Excel;

application.DefaultVersion = ExcelVersion.Xlsx;

FileStream fileStream = new FileStream("Sample.xlsx", FileMode.Open, FileAccess.Read);

IWorkbook workbook = application.Workbooks.Open(fileStream, ExcelOpenType.Automatic);

IWorksheet sheet = workbook.Worksheets[0];


sheet.EnableSheetCalculations();


//Returns the calculated value of a formula using the most current inputs.

string calculatedValue = sheet["C1"].CalculatedValue;


sheet.DisableSheetCalculations();


//Saving the workbook as stream.

FileStream stream = new FileStream("Formula.xlsx", FileMode.Create, FileAccess.ReadWrite);

workbook.SaveAs(stream);

stream.Dispose();

}

Use named ranges in the formula

The named range or a defined name in Excel allows you to assign a name to a cell or cell range in the worksheet. They can be used in formulas to reference the cell or cell range. The named ranges can be accessed across worksheets and help us create formulas without explicitly providing the cell ranges.

Refer to the following code example to add a named range to the Excel worksheet.


using (ExcelEngine excelEngine = new ExcelEngine())

{

IApplication application = excelEngine.Excel;

application.DefaultVersion = ExcelVersion.Xlsx;

IWorkbook workbook = application.Workbooks.Create(1);

IWorksheet sheet = workbook.Worksheets[0];


//Defining a name in the workbook level for cell A1.

IName name1 = workbook.Names.Add("One");

name1.RefersToRange = sheet.Range["A1"];


//Defining a name in the workbook level for cell B1.

IName name2 = workbook.Names.Add("Two");

name2.RefersToRange = sheet.Range["B1"];


//Formula using defined names.

sheet.Range["C1"].Formula = "=SUM(One,Two)";


//Saving the workbook as a stream.

FileStream stream = new FileStream("Formula.xlsx", FileMode.Create, FileAccess.ReadWrite);

workbook.SaveAs(stream);

stream.Dispose();

}

After running the above code example, the output document will look like the following image.

Using named ranges to calculate a formula in Excel using C#

Create cross-sheet references

Cross-sheet references allow formulas to use data from multiple sheets within the same workbook.

Refer to the following code example.


using (ExcelEngine excelEngine = new ExcelEngine())

{

IApplication application = excelEngine.Excel;

application.DefaultVersion = ExcelVersion.Xlsx;

IWorkbook workbook = application.Workbooks.Create();

IWorksheet sheet = workbook.Worksheets[0];


//Setting formula for the range with cross-sheet reference.

sheet.Range["C2"].Formula = "=SUM(Sheet2!B2,Sheet1!A2)";


//Saving the workbook as stream.

FileStream stream = new FileStream("Formula.xlsx", FileMode.Create, FileAccess.ReadWrite);

workbook.SaveAs(stream);

stream.Dispose();

}

References

For more details, refer to the working with formulas in Excel using C# documentation and GitHub demo.

Conclusion

Thanks for reading! In this blog, we’ve explored how to add and read formulas in an Excel document using C# and Syncfusion Excel Library** (XlsIO)**. The Excel Library also allows you to export Excel data to images, data tables, CSV, TSV, HTML, collections of objects, [ODS](https://help.syncfusion.com/document-processing/excel/conversions/excel-to-

ods/overview "Excel to ODS conversion"), JSON, and other file formats. You can also explore our .NET Excel Library demos to understand how to create and manipulate data.

Feel free to try out this versatile .NET Excel Library and share your feedback in the comments section of this blog post!

If you’re an existing customer, you can check out these features from the License and Downloads page. If you are new to Syncfusion, try our 30-day free trial.

You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Prepare for Syncfusion’s Biggest Sale of the Year – Black Friday 2024!

Vinoth Kumar Sundaramoorthy — Wed, 20 Nov 2024 12:06:27 +0000

Get ready to code your way to success with the year’s biggest sale! Syncfusion is thrilled to offer an unbeatable Black Friday deal: 25** % OFF team licenses for 5 or 10 developers** for our feature-packed Essential Studio^® suite.

Mark your calendars! This limited-time offer is valid from November 20th, 2024, to December 6th, 2024 (11:59 PM ET). Don’t miss this chance to equip your development team with cutting-edge tools at an exceptional price.

Supercharge your development with Essential Studio^®

Syncfusion Essential Studio^® empowers developers with over 1,800 meticulously designed components for .NET, JavaScript, and other platforms. Whether you’re building web, mobile, or desktop applications, Essential Studio^® has you covered. Its comprehensive libraries support Windows Forms, WPF, ASP.NET (MVC, Core), UWP, WinUI, .NET MAUI, Xamarin, Flutter, Angular, Blazor, Vue, JavaScript, and React platforms.

With Syncfusion, you’ll experience:

Faster development: Pre-built, high-performance components streamline your workflow.
Stunning UIs: Create beautiful and responsive user interfaces with professionally crafted themes.
Seamless integration: Enjoy effortless integration across multiple platforms.
Top-tier support: Gain access to exceptional customer service from dedicated experts.

Unlock huge savings this Black Friday

From November 20th to December 6th, 2024 (11:59 PM ET), leverage a whopping 25% discount on team license plans for 5 or 10 developers.

Here’s how to redeem:

Visit our Black Friday offers page.
Choose a team license plan for 5 or 10 developers for Syncfusion Essential Studio^®.
Add the selected plan to your cart—the coupon code will be automatically applied.
If the code isn’t applied, simply enter BLACKFRIDAY25 at checkout.
Complete your purchase and start enjoying Syncfusion Essential Studio^® at an amazing 25% discount!

Don’t wait! This exclusive offer is only available for a limited time.

FAQs

1. When does the promotion end?

This Black Friday offer ends at 11:59 ET on Dec. 6, 2024.

2. Who is eligible for the Black Friday promotion?

This promotion is available only to first-time users. This discount cannot be combined with any other offer.

3. How much can I save on a Syncfusion team license with the Black Friday deal?

You can enjoy a 25% discount by opting for a Syncfusion team license, available for plans with 5 or 10 developers.

Upgrade, save, and conquer your coding goals

This Black Friday, empower your team with the power of Syncfusion Essential Studio^®. Take your projects to the next level, boost productivity, and experience incredible savings. Don’t miss out on this opportunity to transform your development experience!

Related Blogs

Creating a Dynamic WPF Chart Dashboard to Showcase 2024 Women’s T20 World Cup Statistics

Vinoth Kumar Sundaramoorthy — Wed, 20 Nov 2024 11:43:22 +0000

TL;DR: Let’s build an interactive dashboard to showcase stats from the 2024 Women’s T20 World Cup using Syncfusion WPF Charts. Learn to structure cricket data, implement dynamic charts, and create a UI for filtering by team or player. Visualize runs, wickets, boundaries, and more with real-time stats, bringing cricket stories to life through engaging visuals.

Welcome to the Chart of the Week blog series!

Analyzing raw data often feels like a complex puzzle. But with the power of visual tools like charts and graphs, transforming data into clear and actionable insights becomes much simpler. Interactive chart features elevate this experience, making even the most complex data easy to understand and engaging.

The Women’s T20 World Cup recently captured global attention, delivering moments of pure joy. Cricket has a unique way of evoking strong emotions—excitement, pride, and sometimes heartbreak—creating unforgettable memories for fans and players alike. With teams and players that spark endless discussions and passionate opinions, there’s a story behind every statistic.

In this article, we’ll create a dynamic dashboard to visualize Women’s T20 World Cup 2024 data using Syncfusion WPF Charts control. This dashboard goes beyond traditional displays, turning raw data into visually appealing and instantly understandable charts. You’ll learn how to showcase team and player data with the ability to filter by country through an interactive combo box, allowing for targeted insights.

Refer to the following image.

In this section, we’ll visualize the runs scored by players in the 2024 Women’s T20 World Cup tournament. Let’s get started!

Step 1: Gathering the T20 data

Before developing the chart dashboard, it’s essential to collect data regarding the 2024 Women’s T20 World Cup from ESPN Sports Media Ltd.

Step 2: Populating the data

To effectively manage and visualize cricket statistics, we’ll define three classes: PlayersData, ScoreInfo, and CountryData. These classes will hold the necessary properties to represent individual player statistics and country-wide performance data, respectively.

PlayersData class properties

Name: Represents the individual player’s name.
Score: Stores the run values of the individual player.

ScoreInfo class properties

Category: Represents the category of team scores, such as sixes and fours.
Value: Represents the count of sixes and fours scored by the team.

CountryData class properties

Play: Stores the overall number of matches played by each country.
Wins: Represents the number of matches won by each country.
Runs: Stores the run values scored by players by countries.
CatchValue: Demonstrates the number of catches taken by the team.
Score6s: Represents the count of sixes scored by the team.
Score4s: Represents the count of fours scored by the team.
Boundaries: Represents the runs scored by the team through boundaries.
Batter: Represents the top run count data from the team on a country-wise basis.
BatterImage: Stores the image of the best batter.
WicketTaker: Represents the top wicket count from the team on a country-wise basis.
WicketTakerImage: Stores the image of the best wicket-taker.

These classes will provide a structured way to manage and visualize cricket statistics, enabling us to create rich and interactive charting apps.

public class PlayersData
{
    public string? Name { get; set; }
    public int Score { get; set; }
}

public class ScoreInfo
{
    public string? Category { get; set; }
    public int Value { get; set; }
}

public class CountryData
{
    public int Play { get; set; }
    public int Wins { get; set; }
    public string? Runs { get; set; }
    public int CatchValue { get; set; }
    public int Boundaries { get; set; }
    public int Batter { get; set; }
    public string? BatterImage { get; set; }
    public int WicketTaker { get; set; }
    public string? WicketTakerImage { get; set; }
    public int Score6s { get; set; }
    public int Score4s { get; set; }
}

Next, the data collection will be generated using the T20_Data class, which has the following properties that demonstrate the details of the women’s T20 match.

public class T20_Data : INotifyPropertyChanged
{
    #region Fields

    private int play;
    private int wins;
    private string? runs;
    private int catchValue;
    private int score6s;
    private int score4s;
    private int boundaries;
    private int batter;
    private string? batterImage;
    private int wicketTaker;
    private string? wicketTakerImage;
    private string? name;
    private int score;
    private Dictionary<string, CountryData>? countryData;
    private Dictionary<string, List<PlayersData>>? playersData;
    private ObservableCollection<PlayersData>? data;
    private ObservableCollection<ScoreInfo>? scoreData;

    #endregion

    #region Properties

    public ObservableCollection<string> CountryOption { get; set; }

    public int Play
    {
        get => play;
        set { play = value; OnPropertyChanged(nameof(Play)); }
    }

    public int Wins
    {
        get => wins;
        set { wins = value; OnPropertyChanged(nameof(Wins)); }
    }

    public string? Runs
    {
        get => runs;
        set { runs = value; OnPropertyChanged(nameof(Runs)); }
    }

    public int CatchValue
    {
        get => catchValue;
        set { catchValue = value; OnPropertyChanged(nameof(CatchValue)); }
    }

    public int Score6s
    {
        get => score6s;
        set { score6s = value; OnPropertyChanged(nameof(Score6s)); }
    }

    public int Score4s
    {
        get => score4s;
        set { score4s = value; OnPropertyChanged(nameof(Score4s)); }
    }

    public int Boundaries
    {
        get => boundaries;
        set { boundaries = value; OnPropertyChanged(nameof(Boundaries)); }
    }

    public int Batter
    {
        get => batter;
        set { batter = value; OnPropertyChanged(nameof(Batter)); }
    }

    public string? BatterImage
    {
        get => batterImage;
        set { batterImage = value; OnPropertyChanged(nameof(BatterImage)); }
    }

    public int WicketTaker
    {
        get => wicketTaker;
        set { wicketTaker = value; OnPropertyChanged(nameof(WicketTaker)); }
    }

    public string? WicketTakerImage
    {
        get => wicketTakerImage;
        set { wicketTakerImage = value; OnPropertyChanged(nameof(WicketTakerImage)); }
    }

    public string? Name
    {
        get => name;
        set { name = value; OnPropertyChanged(nameof(Name)); }
    }

    public int Score
    {
        get => score;
        set { score = value; OnPropertyChanged(nameof(Score)); }
    }

    public ObservableCollection<PlayersData>? Data
    {
        get => data;
        set { data = value; OnPropertyChanged(nameof(Data)); }
    }

    public ObservableCollection<ScoreInfo>? ScoreData
    {
        get => scoreData;
        set { scoreData = value; OnPropertyChanged(nameof(ScoreData)); }
    }

    #endregion

    #region Constructor

    public T20_Data()
    {
        CountryOption = new ObservableCollection<string>
        {
            "New Zealand", "Australia", "India", "Pakistan", "Sri Lanka",
            "West Indies", "South Africa", "England", "Bangladesh", "Scotland"
        };

        var executingAssembly = typeof(App).GetTypeInfo().Assembly;

        using (var stream = executingAssembly.GetManifestResourceStream("Women_T20_2024.Resources.country_data.json"))
        if (stream != null)
        {
            using (var textStream = new StreamReader(stream))
            {
               countryData = JsonConvert.DeserializeObject<Dictionary<string, CountryData>>(textStream.ReadToEnd().Trim());
            }
        }

        using (var stream = executingAssembly.GetManifestResourceStream("Women_T20_2024.Resources.players_data.json"))
        if (stream != null)
        {
           using (var textStream = new StreamReader(stream))
           {
               playersData = JsonConvert.DeserializeObject<Dictionary<string, List>>(textStream.ReadToEnd().Trim());
           }
        }
    }

    #endregion

    #region INotifyPropertyChanged

    public event PropertyChangedEventHandler? PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string name = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
    }

    #endregion
}

In the above code example, we’ve converted the JSON data to a collection using StreamReader and JsonConvert.DeserializeObject methods from the Newtonsoft.Json package. Then, we stored the converted data in the appropriate properties.

Step 3: Defining the layout

Establishing the layout is a key step in building an effective dashboard. The layout shapes the overall visual appeal and usability, making the dashboard attractive and easy to interpret. A thoughtfully organized layout ensures that data is displayed clearly and intuitively.

To create this layout, we’ll use a Border and a Grid to arrange elements in an orderly manner. Refer to the following code example.

<Border Margin="15,25,15,15" BorderThickness="2" CornerRadius="10" BorderBrush="#79747E" Background="#15233D">

 <Grid>
  <Grid.RowDefinitions>
   <RowDefinition Height="0.75*"/>
   <RowDefinition Height="4*"/>
   <RowDefinition Height="5.25*"/>
  </Grid.RowDefinitions>

  <Grid.ColumnDefinitions>
   <ColumnDefinition Width="2*"/>
   <ColumnDefinition Width="5*"/>
   <ColumnDefinition Width="3*"/>
  </Grid.ColumnDefinitions>
 </Grid>

</Border>

Step 4: Arranging the elements in the layout

Once the layout is defined, we can arrange the essential components of our app to create an engaging user interface. Our focus will be on developing the following three key elements:

ComboBox: This control allows users to select and view T20 data for different countries.
Labels: Positioned within the bordered views, these labels will display country-specific data based on the selected index of the ComboBox.
Chart: This element will visualize player scores and the number of sixes and fours for the country selected in the ComboBox.

Step 5: Configuring the WPF ComboBox and header view

The Syncfusion WPF ComboBox control offers a flexible dropdown list that allows for single and multiple selections, using delimiters to separate the selected items.

In this context, we’ll use the ComboBox to display and select the country participating in the Women’s T20 match. Additionally, incorporating a header with an associated icon enhances the readability and visual appeal of the dashboard.

Refer to the following code example.

<Grid Grid.Row="0" Grid.ColumnSpan="3" Margin="3,3,3,0" Background="#15233D">

 <Grid.ColumnDefinitions>
  <ColumnDefinition Width="2*"/>
  <ColumnDefinition Width="5.25*"/>
  <ColumnDefinition Width="0.75*"/>
  <ColumnDefinition Width="2*"/>
 </Grid.ColumnDefinitions>

 <Path Grid.Column="0" Data="{StaticResource PathData}" Stroke="#FFFFFF" StrokeThickness="1.25" Margin="25,5,0,0">
  <Path.RenderTransform>
   <ScaleTransform ScaleX="0.9" ScaleY="0.9"/>
  </Path.RenderTransform>
 </Path>

 <TextBlock Grid.Column="1" Text="2024 Women’s T20 World Cup Stats" Foreground="#FFFFFF" FontSize="17" FontWeight="SemiBold" Margin="0,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Center"/>

 <TextBlock Grid.Column="2" Text="Country" HorizontalAlignment="Right" Foreground="#FFFFFF" Margin="0,5,-10,0" FontSize="17"/>

 <editors:ComboBoxAdv Grid.Column="3" Name="comboBox" Background="#FFFFFF" HorizontalAlignment="Center" VerticalAlignment="Center" SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}" Height="30" Width="160" HorizontalContentAlignment="Center" ItemsSource="{Binding CountryOption}">
  </editors:ComboBoxAdv>
</Grid>

Step 6: Arranging country-wise Women’s T20 content with WPF Doughnut Chart integration

Next, we will organize the statistics by country, including play counts, winning records, total runs, catches, sixes, fours, runs scored from boundaries, and details of each team’s top batter and wicket-taker. This will be accomplished using labels and borders and a Syncfusion WPF Doughnut Chart to provide a visually engaging representation of the data.

Refer to this documentation to configure the Syncfusion WPF Charts.

<Grid Grid.Row="1" Grid.RowSpan="2" Grid.Column="0">

 <Grid.RowDefinitions>
  <RowDefinition Height="*"/>
  <RowDefinition Height="*"/>
 </Grid.RowDefinitions>

 <Border Grid.Row="0" BorderThickness="2" CornerRadius="10" Margin="5" Background="#253A4F">

  <StackPanel VerticalAlignment="Center">
   <Image Grid.Column="0" Source="{Binding BatterImage, Converter={StaticResource ImagePathConverter}}" Width="240" Height="210"/>

   <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,10,0,0">
    <TextBlock Text="Top Batter : " FontSize="15" Foreground="#FFFFFF"/>
    <TextBlock Text="{Binding Batter}" FontSize="16" FontWeight="SemiBold" HorizontalAlignment="Center" Foreground="#FFFFFF"/>
   </StackPanel>
  </StackPanel>
 </Border>

 <Border Grid.Row="1" BorderThickness="2" CornerRadius="10" Margin="5" Background="#253A4F">

  <StackPanel VerticalAlignment="Center">
   <Image Grid.Column="0" Source="{Binding WicketTakerImage, Converter={StaticResource ImagePathConverter}}" Width="240" Height="210"/>

   <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,10,0,0">
    <TextBlock Text="Top Wicket Taker : " FontSize="15" Foreground="#FFFFFF"/>
    <TextBlock Text="{Binding WicketTaker}" FontSize="16" FontWeight="SemiBold" HorizontalAlignment="Center" Foreground="#FFFFFF"/>
   </StackPanel>
  </StackPanel>

 </Border>

</Grid>

<Grid Grid.Row="1" Grid.Column="1">

 <Grid.RowDefinitions>
  <RowDefinition Height="*"/>
  <RowDefinition Height="*"/>
  <RowDefinition Height="*"/>
 </Grid.RowDefinitions>

 <Grid.ColumnDefinitions>
  <ColumnDefinition Width="*"/>
  <ColumnDefinition Width="*"/>
 </Grid.ColumnDefinitions>

 <Border Grid.Row="0" Grid.Column="0" BorderThickness="2" CornerRadius="10" Margin="5">

  <Border.Background>
   <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
    <GradientStop Color="#125ABC" Offset="0.0"/>
    <GradientStop Color="#1298EF" Offset="0.66"/>
    <GradientStop Color="#125ABC" Offset="1.0"/>
   </LinearGradientBrush>
  </Border.Background>

  <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Vertical">
   <TextBlock Text="Total Played" FontSize="17" Foreground="#FFFFFF"/>
   <TextBlock Text="{Binding Play}" FontSize="19" FontWeight="SemiBold" HorizontalAlignment="Center" Foreground="#c9ffe9"/>
  </StackPanel>

 </Border>

 <Border Grid.Row="0" Grid.Column="1" BorderThickness="2" CornerRadius="10" Margin="5">

  <Border.Background>
   <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
    <GradientStop Color="#125ABC" Offset="0.0"/>
    <GradientStop Color="#1298EF" Offset="0.66"/>
    <GradientStop Color="#125ABC" Offset="1.0"/>
   </LinearGradientBrush>
  </Border.Background>

  <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Vertical">
   <TextBlock Text="Total Wins" FontSize="17" Foreground="#FFFFFF"/>
   <TextBlock Text="{Binding Wins}" FontSize="19" FontWeight="SemiBold" HorizontalAlignment="Center" Foreground="#c9ffe9"/>
  </StackPanel>

 </Border>

 <Border Grid.Row="1" Grid.Column="0" BorderThickness="2" CornerRadius="10" Margin="5">

  <Border.Background>
   <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
    <GradientStop Color="#125ABC" Offset="0.0"/>
    <GradientStop Color="#1298EF" Offset="0.66"/>
    <GradientStop Color="#125ABC" Offset="1.0"/>
   </LinearGradientBrush>
  </Border.Background>

  <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Vertical">
   <TextBlock Text="Total Runs Scored" FontSize="17" Foreground="#FFFFFF"/>
   <TextBlock Text="{Binding Runs}" FontSize="19" FontWeight="SemiBold" HorizontalAlignment="Center" Foreground="#c9ffe9"/>
  </StackPanel>

 </Border>

 <Border Grid.Row="1" Grid.Column="1" BorderThickness="2" CornerRadius="10" Margin="5">

  <Border.Background>
   <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
    <GradientStop Color="#125ABC" Offset="0.0"/>
    <GradientStop Color="#1298EF" Offset="0.66"/>
    <GradientStop Color="#125ABC" Offset="1.0"/>
   </LinearGradientBrush>
  </Border.Background>

  <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Vertical">
   <TextBlock Text="Total No. of Catches" FontSize="17" Foreground="#FFFFFF"/>
   <TextBlock Text="{Binding CatchValue}" FontSize="19" FontWeight="SemiBold" HorizontalAlignment="Center" Foreground="#c9ffe9"/>
  </StackPanel>

 </Border>

 <Border Grid.Row="2" Grid.ColumnSpan="2" BorderThickness="2" CornerRadius="10" Margin="5">

  <Border.Background>
   <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
    <GradientStop Color="#125ABC" Offset="0.0"/>
    <GradientStop Color="#1298EF" Offset="0.66"/>
    <GradientStop Color="#125ABC" Offset="1.0"/>
   </LinearGradientBrush>
  </Border.Background>

  <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Vertical">
   <TextBlock Text="Runs Scored by Boundaries" FontSize="17" Foreground="#FFFFFF"/>
   <TextBlock Text="{Binding Boundaries}" FontSize="19" FontWeight="SemiBold" HorizontalAlignment="Center" Foreground="#c9ffe9"/>
  </StackPanel>

 </Border>

</Grid>

<Border Grid.Row="1" Grid.Column="2" Margin="3" Padding="0,10,0,0" BorderThickness="2" CornerRadius="10" Background="#253A4F">

 <chart:SfChart>

 </chart:SfChart>

</Border>

Step 7: Binding data to the WPF Doughnut Chart

To visualize the number of sixes and fours scored by each country’s team, we’ll use the Syncfusion WPF DoughnutSeries.

Refer to the following code example. In this example, we’ve bound the ItemSource, XBindingPath, and YBindingPath properties to the ScoreData, Category, and Value properties, respectively.

<chart:DoughnutSeries ItemsSource="{Binding ScoreData}" XBindingPath="Category" YBindingPath="Value">
</chart:DoughnutSeries>

Step 8: Customizing the doughnut chart appearance

Let’s improve the visual appeal of the WPF Doughnut Chart by customizing its elements, including the series colors, doughnut size, and legend.

Customizing the chart color, angle, and size

Let’s customize the chart’s size, angle, and color using the DoughnutCoefficient, DoughnutSize, StartAngle, EndAngle, and Palette properties.

<chart:SfChart.Series>
 <chart:DoughnutSeries DoughnutSize="1" 
                          DoughnutCoefficient="0.5"
                          StartAngle="130"
                          EndAngle="410"
                          Palette="Custom">

  <chart:DoughnutSeries.ColorModel>
   <chart:ChartColorModel>
    <chart:ChartColorModel.CustomBrushes>
     <SolidColorBrush Color="#FB4944"/>
     <SolidColorBrush Color="#1ACA99"/>
    </chart:ChartColorModel.CustomBrushes>
   </chart:ChartColorModel>

  </chart:DoughnutSeries.ColorModel>

 </chart:DoughnutSeries>
</chart:SfChart.Series>

Enabling and customizing the chart legend

Refer to the following code example to enable and customize the WPF Charts legend.

<chart:SfChart.Legend>
 <chart:ChartLegend DockPosition="Bottom">
  <chart:ChartLegend.ItemTemplate>
   <DataTemplate>
    <StackPanel Margin="20,0,20,0">
     <StackPanel Orientation="Horizontal">
      <Ellipse Height="15" Width="15" Fill="{Binding Interior}" Margin="0,0,5,0"/>
      <TextBlock HorizontalAlignment="Center" FontSize="14"Foreground="White" Text="{Binding Item.Category}"/>
     </StackPanel>
     <TextBlock Margin="25,0,0,0" FontSize="16" Foreground="White" FontWeight="SemiBold" 
                Text="{Binding Item.Value}" HorizontalAlignment="Center"/>
    </StackPanel>
   </DataTemplate>
  </chart:ChartLegend.ItemTemplate>
 </chart:ChartLegend>
</chart:SfChart.Legend>

Step 9: Configuring the Syncfusion WPF Spline Area Chart

Let’s configure the Syncfusion WPF Spline Area Chart using this documentation.

<Border Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" Margin="3" BorderThickness="2" CornerRadius="10" Background="#253A4F">
 <Grid>
  <Grid.RowDefinitions>
   <RowDefinition Height="60"/>
   <RowDefinition Height="*"/>
  </Grid.RowDefinitions>

  <chart:SfChart Grid.Row="1">
   <chart:SfChart.PrimaryAxis>
    <chart:CategoryAxis />
   </chart:SfChart.PrimaryAxis>

   <chart:SfChart.SecondaryAxis>
    <chart:NumericalAxis/>
   </chart:SfChart.SecondaryAxis>
  </chart:SfChart>

 </Grid>
</Border>

Step 10: Binding data to the WPF Spline Area Chart

To visualize the runs scored by each player in the 2024 Women’s T20 data, we’ll use the Syncfusion WPF SplineAreaSeries.

<chart:SplineAreaSeries ItemsSource="{Binding Data}" XBindingPath="Name" YBindingPath="Score">
</chart:SplineAreaSeries>

In the above code example, we’ve bound the ItemsSource, XBindingPath, and YBindingPath properties to the Data, Name, and Score properties, respectively.

Step 11: Customizing the Spline Area Chart appearance

Let’s enhance the appearance of our WPF spline area chart by customizing its elements, such as the axes, series colors, and strokes.

Customize the chart axis

You can customize the chart axis using the following properties to enhance both its appearance and functionality:

ShowGridLines: Controls the visibility of major grid lines on the axis.
TickLineSize: Allows you to adjust the tick size along the chart axis for finer visual control.
Visibility: Use the IsVisible property to control the visibility of the axis.
EdgeLabelsVisibilityMode: Controls the visibility of the labels at the axis’s extreme ends.

These properties offer flexibility in tailoring the chart axis to better suit the design and readability of our WPF chart.

<chart:SfChart.PrimaryAxis>
 <chart:CategoryAxis ShowGridLines="False" FontSize="13" Foreground="White" TickLineSize="5" EdgeLabelsDrawingMode="Shift"/>
</chart:SfChart.PrimaryAxis>

<chart:SfChart.SecondaryAxis>
 <chart:NumericalAxis ShowGridLines="False" Visibility="Collapsed"/>
</chart:SfChart.SecondaryAxis>

Customize the chart color

The following code example demonstrates how to customize the appearance of chart elements using the Stroke, StrokeThickness, and Interior properties to modify colors, outline thickness, and fill styles.

<chart:SplineAreaSeries StrokeThickness="2" Stroke="#2093E1" Interior="#213F5E">
</chart:SplineAreaSeries>

Incorporating panning and trackball

To enhance readability, we can enable the trackball feature to display detailed information and add panning to allow smooth scrolling through data within a specified range. This can be achieved using the ChartTrackBallBehavior, ChartZoomPanBehavior, and AutoScrollingDelta properties.

Additionally, we’ll customize the trackball using the TrackBallLabelTemplate and ChartTrackBallStyle properties to display player score details dynamically. The label is positioned within a bordered view above the chart, updating with the trackball’s movements to easily view specific data points.

<Border Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" Margin="3" BorderThickness="2" CornerRadius="10" Background="#253A4F">

 <Grid>
  <Grid.RowDefinitions>
   <RowDefinition Height="60"/>
   <RowDefinition Height="*"/>
  </Grid.RowDefinitions>

  <Border Grid.Row="0" Margin="3" BorderThickness="0,0,0,0.5" BorderBrush="#AAAAAF">

  <StackPanel>
   <TextBlock Text="Top Runs Scorers" FontSize="14" HorizontalAlignment="Left" 
              Margin="5,10,0,0" Foreground="65C1FF" FontWeight="SemiBold"/>

   <StackPanel HorizontalAlignment="Right" Margin="0,-20,20,0">
    <TextBlock Text="{Binding Score}" FontSize="15" Foreground="#BEBEBE" FontWeight="SemiBold" HorizontalAlignment="Center"/>
    <TextBlock Text="{Binding Name}" FontSize="12" Foreground="65C1FF" />
   </StackPanel>

  </StackPanel>

 </Border>

 <chart:SfChart Grid.Row="1">

  <chart:SfChart.PrimaryAxis>
   <chart:CategoryAxis AutoScrollingDelta="8" AutoScrollingMode="Start"/>
  </chart:SfChart.PrimaryAxis>

  <chart:SfChart.SecondaryAxis>
   <chart:NumericalAxis/>
  </chart:SfChart.SecondaryAxis>

  <chart:SfChart.Behaviors>

   <chart:ChartTrackBallBehavior ShowLine="False" PositionChanged="ChartTrackBallBehavior_PositionChanged">
    <chart:ChartTrackBallBehavior.ChartTrackBallStyle>
     <Style TargetType="chart:ChartTrackBallControl">
      <Setter Property="Background" Value="Transparent"/>
      <Setter Property="StrokeThickness" Value="0"/>
     </Style>
    </chart:ChartTrackBallBehavior.ChartTrackBallStyle>
   </chart:ChartTrackBallBehavior>

   <chart:ChartZoomPanBehavior EnableMouseWheelZooming="False" EnablePinchZooming="False" ResetOnDoubleTap="False" EnablePanning="True">
   </chart:ChartZoomPanBehavior>

   </chart:SfChart.Behaviors>

   <chart:SplineAreaSeries>

    <chart:SplineAreaSeries.TrackBallLabelTemplate>
     <DataTemplate>
      <Ellipse Height="15" Width="15" Fill="#213F5E" Stroke="White" StrokeThickness="2" StrokeDashArray="2,1"/>
     </DataTemplate>
    </chart:SplineAreaSeries.TrackBallLabelTemplate>

   </chart:SplineAreaSeries>

  </chart:SfChart>

 </Grid>

</Border>

The PositionChanged event can be used to dynamically update the trackball value in real-time. This event is triggered whenever the trackball’s position changes, allowing you to refresh the displayed information for improved user interaction as follows.

private void ChartTrackBallBehavior_PositionChanged(object sender, PositionChangedEventArgs e)
{
    if (viewModel != null && e.CurrentPointInfos.Count > 0)
    {
        var dataPointInfo = e.CurrentPointInfos.First();
        var dataPoint = dataPointInfo.Item as PlayersData;

        if (dataPoint != null)
        {
            viewModel.Name = dataPoint.Name;
            viewModel.Score = dataPoint.Score; 
        }
    }
}

Step 12: Enabling interactivity for the entire dashboard

To enhance our chart dashboard’s interactivity, we’ll leverage the ComboBox to allow a dynamic selection of countries participating in the 2024 Women’s T20 matches.

By using the ComboBox’s SelectedIndex property, we can refresh the entire dashboard in real time to display country-specific data and player details based on the selected country. This approach enables users to seamlessly explore and analyze performance data for each participating country, providing a more engaging and customizable experience.

<editors:ComboBoxAdv SelectedIndex="{Binding SelectedIndex, Mode=TwoWay>
</editors:ComboBoxAdv>

In the following code example, we have created the SelectedIndex property to store the T20 data.

public class T20_Data : INotifyPropertyChanged
{
    private int selectedIndex;

    public int SelectedIndex
    {
        get => selectedIndex;
        set
        {
            selectedIndex = value;
            UpdateIndex(value);
            OnPropertyChanged(nameof(SelectedIndex));
        }
    }

    public T20_Data()
    {
        SelectedIndex = 0;
    }

    private void UpdateIndex(int value)
    {
        if (value >= 0 && value < CountryOption.Count)
        {
            string selectedCountry = CountryOption[value];

            if (countryData != null)
            {
                if (countryData.ContainsKey(selectedCountry))
                {
                    var data = countryData[selectedCountry];
                    Play = data.Play;
                    Wins = data.Wins;
                    Runs = data.Runs;
                    CatchValue = data.CatchValue;
                    Boundaries = data.Boundaries;
                    Batter = data.Batter;
                    BatterImage = data.BatterImage;
                    WicketTaker = data.WicketTaker;
                    WicketTakerImage = data.WicketTakerImage;
                    Score6s = data.Score6s;
                    Score4s = data.Score4s;

                    ScoreData = new ObservableCollection<ScoreInfo>
                    {
                        new ScoreInfo { Category = "Total 6s Scored", Value = Score6s },
                        new ScoreInfo { Category = "Total 4s Scored", Value = Score4s }
                    };
                }
            }

            if (playersData != null)
            {
                if (playersData.ContainsKey(selectedCountry))
                {
                    Data = new ObservableCollection<PlayerData>(playersData[selectedCountry]);

                    if (Data.Count > 0)
                    {
                        Name = Data[0].Name;
                        Score = Data[0].Score;
                    }
                }
            }
        }
    }
}

After executing the previous code examples, the output will look like the following image.

Visualizing 2024 Women's T20 World Cup stats using WPF Charts

GitHub reference

For more details, please refer to the project on GitHub.

Conclusion

Thank you for reading! In this blog, we’ve explored how to visualize the data for the 2024 Women’s T20 World Cup tournament using the Syncfusion WPF Charts. We highly recommend following the steps outlined in this blog and sharing your feedback in the comments section below.

If you need assistance, please do not hesitate to contact us through our support forum, support portal, or feedback portal. We are always eager to help you!

Related blogs

Syncfusion Visual Studio Extensions Are Now Compatible With .NET 9.0

Vinoth Kumar Sundaramoorthy — Tue, 19 Nov 2024 12:55:19 +0000

TL;DR: Syncfusion’s Visual Studio Extensions now fully support .NET 9.0, providing developers with enhanced tools and seamless integration for building modern .NET apps with the latest features.

.NET 9.0 marks a significant milestone for the .NET framework, offering a unified and versatile platform for building web, desktop, and mobile applications. It’s designed to tackle the demands of modern software development, with enhancements focused on performance, an expanded library ecosystem, and more streamlined development tools to boost productivity and simplify workflows.

We at Syncfusion also support .NET 9.0 from our 2024 Volume 3 SP release . This update empowers users to leverage the latest advancements in web and desktop app development. With Syncfusion’s Visual Studio extensions, you can effortlessly build .NET 9.0 apps, smoothly convert and migrate projects to .NET 9.0, and easily integrate all necessary references for your .NET 9.0 projects.

Let’s see the seamless integration of .NET 9.0 support with Syncfusion Visual Studio extensions.

Prerequisites

Visual Studio 2022

Installing the Syncfusion Visual Studio extensions

You can install the Syncfusion Visual Studio extensions either from Visual Studio Marketplace or the Essential Studio setup.

Note: To install the extensions from Visual Studio Marketplace, refer to the Syncfusion Visual Studio Extensions Now on the Visual Studio Marketplace blog.

When creating an app, choose the .NET 9.0 option to create projects with Syncfusion components and .NET 9.0 support.

Creating .NET 9.0 projects with Syncfusion components

.NET MAUI Template Studio

The .NET MAUI Template Studio extension for Visual Studio allows developers to easily create .NET MAUI apps that integrate Syncfusion controls. This extension also provides features like installing NuGet packages and adding example code for Syncfusion .NET MAUI controls. It is now available with .NET 9.0 support.

You can use it by selecting version . NET 9.0 in the Configuration area, as shown in the following image.

Syncfusion .NET MAUI Template Studio wizard

With this, we can also use the Syncfusion .NET MAUI Toolbox support in a .NET 9.0 app to incorporate the Syncfusion .NET MAUI controls.

Visual Studio Code project template

Syncfusion’s .NET MAUI Visual Studio Code extensions are now compatible with .NET 9.0, enabling easy project creation with the latest features.

To se them, select the .NET 9.0 option, like in the following image.

Select .NET 9.0 as the core version

Blazor Template Studio

The Blazor Template Studio extension for Visual Studio helps us to create a Blazor app with Syncfusion Blazor components. The Blazor app will be created with the required components’ NuGet references, namespaces, styles, and component render code. This is now available with .NET 9.0 support.

To use it, select .NET 9.0 as the version in the Configuration section, as shown in the following image.

Syncfusion Blazor Template Studio wizard

Additionally, you can use Syncfusion’s Blazor scaffolding, code generator, project conversion, and migration utilities to stay up-to-date with the latest Syncfusion versions in your .NET 9.0 projects.

Visual Studio Code project template

Also, the Syncfusion Blazor Visual Studio Code extensions are now available with .NET 9.0 support.

To use them, select the .NET 9.0 option, like in the following image.

Select .NET 9.0 as the core version

With this, we can also use the Syncfusion Blazor project conversion and migration utilities in a .NET 9.0 app to convert or migrate to the latest Syncfusion version.

ASP.NET Core project template

The ASP.NET Core project template extension for Visual Studio helps us create ASP.NET Core apps using pre-built templates with .NET 9.0 and Syncfusion ASP.NET Core components.

To use it, select the .NET 9.0 option from the dropdown menu, like in the following image.

ASP.NET Core project configuration wizard

Use the Syncfusion ASP.NET Core scaffolding, project conversion, and migration utilities in a .NET 9.0 app to convert or migrate to the most recent Syncfusion version.

ASP.NET Core sample creator

The Syncfusion Sample Creator is a tool that lets you create Syncfusion ASP.NET Core (Essential JS 2) projects with sample code for the required Syncfusion controls’ features and configurations. This is now available with .NET 9.0 support.

To use it, select the .NET 9.0 option from the dropdown menu, like in the following image.

ASP.NET Core Sample Creator

WPF Template Studio

The WPF Template Studio for Visual Studio allows developers to easily create WPF apps that integrate Syncfusion controls. This extension also provides features like installing NuGet packages and adding sample code for Syncfusion WPF controls. This is now available with .NET 9.0 support.

To use it, select the .NET 9.0 as the Framework Version from the dropdown menu. Refer to the following image.

Select the .NET 9.0 as the Framework Version

Use the Syncfusion Reference Manager to add the Syncfusion assemblies or NuGet packages as references in .NET 9.0 WPF apps. The Syncfusion Item Template extension also provides support for .NET 9.0.

WinForms Template Studio

The WinForms Template Studio extensions for Visual Studio allow us to create Syncfusion WinForms apps using the prebuilt templates with .NET 9.0 and Syncfusion WinForms controls.

To use it, select the .NET 9.0 as the Framework Version from the dropdown menu. Refer to the following image.

Select the .NET 9.0 as the Framework Version

You can use the Syncfusion Reference Manager to add the Syncfusion assemblies or NuGet packages as references in .NET 9.0 WinForms apps. The Syncfusion Item Template extension also provides support to .NET 9.0.

Conclusion

Thanks for reading! In this blog, we’ve seen the Syncfusion Visual Studio extension support for .NET 9.0 in the .NET MAUI, Blazor, ASP.NET Core, WPF, and WinForms platforms. This feature is available in our 2024 Volume 3 SP Release.

Our existing customers can check out these features on the License and Downloads page. If you are new to Syncfusion, try our 30-day free trial to explore these features.

If you require assistance, please don’t hesitate to contact us via our support forum, support portal, or feedback portal. We are always eager to help you!

Related Blogs

How to Effectively Use Formulas in Excel Using C#

Vinoth Kumar Sundaramoorthy — Tue, 19 Nov 2024 09:59:28 +0000

In this blog, we’ll explore how to read, write, and calculate formulas in Excel using the Syncfusion Excel Library in C#.

Getting started

Step 1: Create a formula in Excel

Formulas in Excel are created by inserting expressions into cells that perform calculations based on the cell’s contents, other cell references, or predefined Excel functions.

First, create a .NET Core Console app in Visual Studio, as shown in the following image.
Then, install the latest Syncfusion.XlsIO.NET.Core NuGet package into your app.
Now, add the code to insert a formula into an Excel document. Refer to the following code example.


using (ExcelEngine excelEngine = new ExcelEngine())

{

IApplication application = excelEngine.Excel;

application.DefaultVersion = ExcelVersion.Xlsx;

IWorkbook workbook = application.Workbooks.Create(1);

IWorksheet sheet = workbook.Worksheets[0];


//Set values to the cells.

sheet.Range["A1"].Number = 10;

sheet.Range["B1"].Number = 20;


//Set formula in the cell.

sheet.Range["C1"].Formula = "=SUM(A1,B1)";


//Saving the workbook as stream.

FileStream stream = new FileStream("Formula.xlsx", FileMode.Create, FileAccess.ReadWrite);

workbook.SaveAs(stream);

stream.Dispose();

}

After executing the provided code example, the output document will resemble the following image.

Creating a formula in Excel using C#

Step 2: Read the formula

Reading formulas in Excel involves retrieving the formula expression from a cell, which is stored as a string. This can be done using the Formula property of the IRange interface.

Refer to the following code example.


using (ExcelEngine excelEngine = new ExcelEngine())

{

IApplication application = excelEngine.Excel;

application.DefaultVersion = ExcelVersion.Xlsx;

FileStream fileStream = new FileStream("Sample.xlsx",FileMode.Open,FileAccess.Read);

IWorkbook workbook = application.Workbooks.Open(fileStream);

IWorksheet sheet = workbook.Worksheets[0];


//Returns the formula in C1 style notation.

string formula = sheet["C1"].Formula;


//Dispose stream.

fileStream.Dispose();

}

Step 3: Calculate the formula

Refer to the following code example to access a calculated value from a cell.


using (ExcelEngine excelEngine = new ExcelEngine())

{

IApplication application = excelEngine.Excel;

application.DefaultVersion = ExcelVersion.Xlsx;

FileStream fileStream = new FileStream("Sample.xlsx", FileMode.Open, FileAccess.Read);

IWorkbook workbook = application.Workbooks.Open(fileStream, ExcelOpenType.Automatic);

IWorksheet sheet = workbook.Worksheets[0];


sheet.EnableSheetCalculations();


//Returns the calculated value of a formula using the most current inputs.

string calculatedValue = sheet["C1"].CalculatedValue;


sheet.DisableSheetCalculations();


//Saving the workbook as stream.

FileStream stream = new FileStream("Formula.xlsx", FileMode.Create, FileAccess.ReadWrite);

workbook.SaveAs(stream);

stream.Dispose();

}

Use named ranges in the formula

Refer to the following code example to add a named range to the Excel worksheet.


using (ExcelEngine excelEngine = new ExcelEngine())

{

IApplication application = excelEngine.Excel;

application.DefaultVersion = ExcelVersion.Xlsx;

IWorkbook workbook = application.Workbooks.Create(1);

IWorksheet sheet = workbook.Worksheets[0];


//Defining a name in the workbook level for cell A1.

IName name1 = workbook.Names.Add("One");

name1.RefersToRange = sheet.Range["A1"];


//Defining a name in the workbook level for cell B1.

IName name2 = workbook.Names.Add("Two");

name2.RefersToRange = sheet.Range["B1"];


//Formula using defined names.

sheet.Range["C1"].Formula = "=SUM(One,Two)";


//Saving the workbook as a stream.

FileStream stream = new FileStream("Formula.xlsx", FileMode.Create, FileAccess.ReadWrite);

workbook.SaveAs(stream);

stream.Dispose();

}

After running the above code example, the output document will look like the following image.

Using named ranges to calculate a formula in Excel using C#

Create cross-sheet references

Cross-sheet references allow formulas to use data from multiple sheets within the same workbook.

Refer to the following code example.


using (ExcelEngine excelEngine = new ExcelEngine())

{

IApplication application = excelEngine.Excel;

application.DefaultVersion = ExcelVersion.Xlsx;

IWorkbook workbook = application.Workbooks.Create();

IWorksheet sheet = workbook.Worksheets[0];


//Setting formula for the range with cross-sheet reference.

sheet.Range["C2"].Formula = "=SUM(Sheet2!B2,Sheet1!A2)";


//Saving the workbook as stream.

FileStream stream = new FileStream("Formula.xlsx", FileMode.Create, FileAccess.ReadWrite);

workbook.SaveAs(stream);

stream.Dispose();

}

References

For more details, refer to the working with formulas in Excel using C# documentation and GitHub demo.

Conclusion

ods/overview "Excel to ODS conversion"), JSON, and other file formats. You can also explore our .NET Excel Library demos to understand how to create and manipulate data.

Feel free to try out this versatile .NET Excel Library and share your feedback in the comments section of this blog post!

If you’re an existing customer, you can check out these features from the License and Downloads page. If you are new to Syncfusion, try our 30-day free trial.

You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Related blogs

React vs. Next.js: Choosing the Right Framework

Vinoth Kumar Sundaramoorthy — Mon, 18 Nov 2024 11:38:53 +0000

TL;DR: This blog post compares and contrasts the popular JavaScript frameworks React and Next.js. React works well for SPAs and interactive UIs, while Next.js is good for SEO-driven websites and high-performance apps.

JavaScript is the language of the web. Due to its dominance on the web, it has given birth to numerous frameworks that help developers abstract necessary pain points, develop apps faster, and focus on business logic rather than worry about basic issues.

No framework is best; each one has its purpose and its strengths in the different areas of web development. As we say, there are n ways to solve a problem in computer science. Similarly, there are n different libraries or frameworks available, and none is the only one you need.

They can vary in the syntax and the way you will write the code, but the goal for each is to create the web application.

The framework you choose should be based on the nature of your application’s rendering strategy. This is the primary factor out of many others that you will have to consider while choosing a framework.

We can divide the rendering into two major groups:

Client-side rendering (CSR): Where the HTML page is blank, and it loads all the assets once, like JavaScript bundles, images, fonts, media, etc., and then the JavaScript parses the page and handles everything on the client-side only through application logic. The page routing is also handled on the client side, which is why it is also called a single-page application, as there is only a single HTML page. Data from the server is accessed through an XHR request and the page is modified with the JavaScript code only.
Server-side rendering (SSR): In this, each request is handled on the server, and the server generates a new HTML page every time and returns it to the client. As the HTML page is constructed or rendered on the server itself, we call this server-side rendering. There are many different optimized techniques for server-side rendering, like incremental static regeneration (ISR), server-side streaming (SSS), and static site generation (SSG).

The importance of choosing the right framework

As a software engineer, your purpose in choosing a framework or library is to get the job done with the fewest hurdles while at the same time meeting the technical requirements and future scalability.

While choosing a framework, you should consider solving engineering challenges like development speed, user experience, scaling, performance, SEO, etc., while considering the business, as well. Ultimately, whatever you do in software engineering will impact the business.

The following are the things that you should look for while choosing a framework:

Technical factors

SEO : This should be your primary concern. Whether your application will be indexed by search engines will determine the rendering strategy, and thus, choosing the right framework should start from this.
Performance : The second most important factor is checking the performance of the framework, as speed matters, especially if you are creating a web application for a global audience, where many developing countries have flaky and slow networks.
Developer experience : You want to ship things fast, that is a primary focus of running a business, and choosing the right framework is necessary for this. If the framework requires less learning, then it is more likely to be adopted quickly by your developers.
Maintenance : With time, your codebase becomes a mixture of old and new code as it grows. Each developer has their own way of writing logic that could lead to inconsistencies across the codebase, but following certain patterns and restricting things at the code-review level will help to streamline things. Maintaining a large code base becomes challenging with the replacement of the devs over time. Thus, having a framework that enforces a way of development would help to maintain the code of the application in the long run.
Future-proofing : Tech is ever-evolving, and thus, when choosing any framework, you will have to consider that the right framework will keep the application relevant in the near future and will adapt to new technologies faster. Having great community support plays a crucial role in advancing the framework.

While these technical factors are necessary to tackle engineering challenges, there are also a few general factors that you must consider while choosing a framework.

Nontechnical factors

Is it open-source, or does it require license regulation?
How is this framework maintained, by an organization or community?
How well is the framework being adopted by the developer community?

Community support comes from the adoption of the framework, and the adoption of the framework comes from the learning curve a framework has. Thus, the learning curve also becomes an important factor on the nontechnical side.

Taking the rendering strategy into consideration, along with all the previously listed technical and nontechnical factors, we are going to make a comprehensive comparison of the two most popular frameworks for web development currently: React.js and Next.js.

React.js

React is a powerful JavaScript framework (or library, as React refers to itself) that has changed how web development occurs. Over the years, it has become the foundation of countless websites that generate billions of dollars in revenue, including Facebook, Instagram, Airbnb, Netflix, and the list goes on.

This was made possible by the simplicity, reusability, and efficiency it offered developers through its component-driven development, one-way data flow, and virtual DOM, all of which help to create scalable and maintainable user interfaces.

React’s inception was to solve a core problem of web development that previous frameworks like JQuery could not solve, which was easing the DOM manipulation and boosting performance.

This framework was designed primarily for client-side rendering or the creation of single-page applications (SLAs). An SLA has one single HTML page, and all the page-building, action handling, and UI updates are handled through JavaScript, which is a static asset that is downloaded and cached on the client-side on the initial load along with the other assets such as media, fonts, etc.

There will be only an HTML page, and the routing on the client side is handled through JavaScript. The data from the server is fetched through the XHR request, and then it is re-rendered on the UI with the use of the virtual DOM that boosts the performance.

Using declarative JSX syntax allows us to write JavaScript functions as the HTML markup tag and use a virtual DOM to re-render only current changes to the browser. This syntax makes the website extremely fast and efficient. It makes React a go-to choice for the many developers who are building modern web applications.

Core features of React

Declarative UI using JSX

Unlike traditional programming, where we follow the imperative approach of manipulating the DOM by accessing it through code and then manipulating it, React allows us to create that automatically updates and renders based on the change in the data.

The components are defined as normal JavaScript functions but can be accessed as regular HTML markup with the help of JSX, which stands for JavaScript XML. This helps developers treat the React components as HTML tags and define the clear purpose of each.

We can render a React custom component along with the native HTML. To use the React function as a JSX component, it should return JSX, which can be another React component or native HTML. Refer to the following code example.

import React from 'react';

const Heading = (props) => {
  const {children, color} = props;
  return <h1 style={{color}}>{children}</h1>;
};

export function App(props) {
  return (
    <div className='App'>
       <Heading color="red">"Hello World!"</Heading>
       <h2>Syncfusion blogs</h2>
    </div>
  );
}

Attributes passed to the JSX elements can be accessed as properties within the function. As you’ll notice, the color attribute is accessed as a prop used for styling. The children are a special prop that accesses the children passed to the JSX element.

All the JSX components can be self-closing, which is useful when you don’t want to pass the children to the elements. Refer to the next code example.

import React from 'react';

const Heading = (props) => {
  const {text, color} = props;
  return <h1 style={{color}}>{text}</h1>;
};

export function App(props) {
  return (
    <div className='App'>
       <Heading color="red" text={"Hello World!"} />
       <h2>Syncfusion blogs</h2>
    </div>
  );
}

Component-driven development

The smallest block of the UI can be referred to as a component. React is a strong advocate of component-driven development, in which different UI blocks can be converted to components and then put together to create a module. These components can also be extended and behaviorally changed by accepting different properties.

Refer to the following code example.

import React from 'react';

const SocialLinks = () => {
  return (
    <div>
      <ul>
            <li>Twitter</li>
            <li>Facebook</li>
             <li>Linkedin</li>
       </ul>
    </div>
  );
};

const Header = props => {
  const { text } = props;
  return (
    <header>
       <h1>{text}</h1>
    </header>
  );
};

const Footer = props => {
  return (
    <footer>
      <section>
            <ul>
        <li>About us</li>
        <li>Contact us</li>
        <li>Privacy policy</li>
            </ul>
      </section>
      <section>
            <SocialLinks />
       </section>
    </footer>
  );
};

export function App(props) {
  return (
    <div className='App'>
      <Header text={"HelloW World!"}/>
      <Footer />
    </div>
  );
}

React utilizes the power of the functional programming of JavaScript, in which the smallest piece of logic can be abstracted and encapsulated along with the overriding and overloading of the data.

Unidirectional flow of data (one-way data binding)

In a unidirectional flow of data, the data is passed from the top to the bottom. In the case of React, the data is passed from the parent component to the child component, and so on, in a predictable manner.

Refer to the next code example.

import React from 'react';

const SocialLinks = (props) => {
  const {color} = props;
  return (
    <div style={{color}}>
    <ul>
          <li>Twitter</li>
          <li>Facebook</li>
          <li>Linkedin</li>
    </ul>
    </div>
  );
};

const Footer = props => {
  const { color } = props;
  return (
    <footer>
    <section>
        <ul>
        <li>About us</li>
        <li>Contact us</li>
        <li>Privacy policy</li>
        </ul>
    </section>
    <section>
        <SocialLinks color={color}/>
    </section>
    </footer>
  );
};

export function App(props) {
  return (
    <div className='App'>
    <Footer color={"red"}/>
    </div>
  );
}

React components have a lifecycle, where they maintain different stages of components like mounting, unmounting, and updating. React components update when their state or props change. State is what the component maintains itself as, and props are what it receives. As React follows a unidirectional flow of data, it is easier to predict what has caused a change in the component, where the data has come from, and what part it has changed.

Virtual DOM

What stands out about React is its implementation and usage of a virtual DOM. It uses a reconciliation algorithm in which React maintains an in-memory copy of the DOM. Whenever a React component updates, it takes a snapshot of the current virtual DOM and compares it with the updated virtual DOM to figure out what has changed and then only makes those changes to the actual DOM.

Repainting and reflowing are expensive operations on the webpage, and minimizing them drastically boosts performance. That is exactly what React does with the help of the virtual DOM.

Hooks

In version 18, React introduced hooks, which are special functions within React components that have certain purposes, such as maintaining the state, handling the lifecycle side effects, and referencing the actual DOM element through JSX.

Refer to the following code example.

import React, {useState} from 'react';

export function Test(props) {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(count+1)}>Click</button>
      <div>Count: {count}</div>
    </div>
  );
}

As React components get re-rendered when they update, we can store values by declaring normal variables, as they will get redeclared every time the component updates. Thus, we have to use the useState() hook, which is specially designed to persist the values in the component.

As you can see in the previous component, we have set the default value 0 to the useState() hook. This hook returns two values, count , which is the current value, and the function setCount , which updates the value.

As the hook returns an array of values, we can define them as normal variables and give them any name.

On the button being clicked, the setCount() is called, which updates the value. Then, when React discovers a change in value, it re-renders the component.

You can also create custom hooks by following the rules defined for hooks:

A hook cannot be called conditionally.
A hook can only be used in another hook or a JSX component.

Context API

The React Context API enables the storage and sharing of global data (like theming and user data) with the React components that are wrapped around the context provider without manually passing props down, also known as props drilling.

A module that holds a bunch of components can be wrapped around the context to share the data. The context acts as a centralized unit that manages the state and only the components that access the context will be re-rendered. This helps to avoid the unnecessary re-rendering of the components via which the props are passed around.

Refer to the next code example.

import {
  createContext,
  useContext,
  useState,
} from 'react';

const defaultContextValue = {};
const BuilderContext = createContext(defaultContextValue);

export const BuilderContextProvider = (props) => {
  const { children } = props;
  const contextValue = useState({});

  return (
    <BuilderContext.Provider value={contextValue}>
      {children}
    </BuilderContext.Provider>
  );
};

export const useBuilderContext = () => {
  const context = useContext(BuilderContext);
  if (!context) {
    throw new Error(
      '`useBuilderContext` must be used inside `BuilderContextProvider`',
    );
  }
};

While the context API provides more of the central state management capabilities, React comes with two other hooks for local state management:

useState : This can be used for the simple state management within the component.
useReducer : This can be used for more complex state management, where you need to update the nested objects.

The context API will maintain the state using these two hooks only, as ultimately we are creating only a component.

This state management is capable enough of scaling for a large enterprise application. You can, however, also use other external libraries, such as Zustand or Redux.

When to use React

React is a powerful library that can be used for various use cases, but it excels in certain scenarios.

Single-page applications (SPAs): React is the best-in-class framework when it comes to creating a single-page or client-side-rendering application, where the content of the page updates dynamically without the need for the complete reloading of the page. Being component-driven, it enables developers to break down the complex UI into smaller, manageable pieces, leading to faster development and easy maintenance.
Interactive user experience : For web applications such as real-time dashboards or chat applications that require highly dynamic content updates and an interactive user experience, React is an excellent choice. Its virtual DOM ensures that the updates are efficient even if the UI changes frequently.
Reusable components : React’s component-driven architecture makes it suitable for applications that use lots of reusable UI components. For example, in a design system or components where you need to have buttons, modals, popovers, or form elements that can be used in different parts.
Customizable and flexible projects : React is great for applications where you need freedom over the architectural decisions. React is a lightweight library for faster development. For other use cases, such as state management, routing, etc., we have the freedom to choose the library we prefer.
Integrating with other libraries : You can integrate React with any third-party library. It works seamlessly with other libraries, making it a good choice if you need to integrate third-party libraries for things like state management (Redux), data fetching (React Query), or styling (Styled Components).
Enterprise-grade application : Consider React for large-scale enterprise applications where maintainability, flexibility, and performance are important. As React is vastly adopted, you can benefit from the pool of libraries, tools, and the community support available for it.
Progressive web apps (PWA): We can use React with the service worker and tools like Workbox to create React-based PWAs that provide offline support and app-like behavior by caching the static assets.

Example use cases

React was designed for creating applications that rely heavily on SEO. In cases where SEO is required, React can be used post-initial load of the HTML with hybrid rendering. React is best for:

Web applications like social-media applications where we prioritize user interaction and real-time updates.
Creating progressive web applications (PWAs) that focus on delivering app-like experiences in the browser.
Tools or admin dashboards that are required to be responsive, user-friendly, fast, and easily accessible on all devices. React bundles can be configured to provide support to older browsers and devices.

NextJs

Next.js is a React-based framework created by Vercel to provide a powerful and robust front-end framework for complete front-end web development. Where React.js was just a library, Next.js is a framework that enhances React’s capability for server-side rendering (SSR), static content generation (SSG), and API management.

The primary reason behind the creation of Next.js was to address the complexities of creating modern web applications, especially addressing the challenges around server-side rendering, routing, and performance optimization. React was designed only for client-side rendering, which has made developers rely on third-party libraries or external factors for server-side rendering, static content generation, and SEO optimizations. Next.js addresses these pain points by providing a streamlined solution for creating production-grade web applications.

Core features of Next.js

Next.js was primarily designed to enhance React.js and provide features that React was missing.

Server-side rendering (SSR)

Next.js provides built-in support for server-side rendering. The HTML page is prerendered on the server with all the content, and then it is returned to the browser, where it is parsed and rendered. This majorly improves the performance for content-heavy webpages and improves the SEO, as the crawlers can read the prerendered content better than the dynamically updated content on a single page.

Static content generation (SSG)

Next.js also provides support for static content generation, where the pages are generated at building time. This way, when a request is made, the pages will be served instantly. To serve the pages, you can use CDN, as the content is already ready and we just have to serve it. This boosts the performance of the application and can be used for web apps that have content that hardly changes.

Incremental static regeneration (ISR)

What if you want to pre-generate the webpages but still want to partially update the contents dynamically, which means we want to make use of both SSR and SSG capabilities? Next.js provides support for this with incremental static regeneration. This is where a pre-generated webpage can be incrementally updated as per requirement. This is helpful for websites like food delivery, where only partial content changes like the menu items for the restaurants in different outlets.

File-based routing

Next.js’s file-based routing mechanism makes routing easier. Any file defined under the pages/ directory will be treated as a route, and pages in Next.js are mapped to the file structure. This simple way of defining the routes removes the complexity and the overhead of handling the routes. In React, we had to rely on external libraries like React-Router for routing.

For example, if you create pages/contact-us.js, this will be accessible on the route /contact-us.

export default function ContactUs() {
  return <h1>Contact Us</h1>
}

Any file named index.js will be available at the root of the directory by the Next.js router.

pages/index.js -> /
pages/contact-us/index.js -> /contact-us

This helps to define the router as a directory and abstracts all the common components within the directory. Similarly, you can also define nested routes, in which the nested file and folder structure will be treated as routes.

pages/blog/hello-world.js → /blog/hello-world
pages/blog/tech/hello-world.js → /blog/tech/hello-world

Next.js also provides a dynamic routing option that can be defined by declaring the file names in square brackets. This helps to avoid redundancy.

pages/blog/[id].js -> blog/1, blog/2

The dynamic routing feature allows more flexible and customizable route paths in the application. The paths can be accessed within the components and can be used to update the content dynamically.

API routes

Because Next.js is a server-side framework, it provides features to leverage the power of the server from itself. With API routing, Next.js enables you to develop the back-end APIs natively within the same codebase. These routes enable developers to write server-side logic and database operations, handle form submissions, and create REST APIs without the need for a separate backend, which is why Next.js is also called a full-stack JavaScript framework.

As Next.js supports file-based routing, any file defined under the directory /path/api/ -> /api/* will be treated as an API rather than a page.

export default function handler(req, res) {
  res.status(200).json({ message: 'Next.js says Hello World' })
}

These files are excluded from the client-side bundle and are part of the server-side bundles.

Automatic code splitting

Minimizing the initial load size of the bundle is crucial for faster page loading. Next.js automatically splits the code during bundle creation and serves the required JavaScript for each page. It lazy loads the JavaScript bundles on interaction or when required. The bundles are split into smaller chunks and loaded on demand, leading to faster load times and a better user experience.

Built-in image optimization

Another golden feature that Next.js provides is built-in support for automatic image optimization. It handles all the common optimization techniques under the hood, such as automatically compressing images, serving responsive images, and lazy loading. This really helps reduce the load time of the pages, especially on flaky networks and mobile devices.

Next.js has created a custom component called next/image, which is a wrapper around the native HTML img tag that provides all the features out of the box.

import OptimizedImage from "next/image"
import usrImage from "../public/user.png"

const Profile = () => {
  return (
    <>
       <OptimizedImage
           src={usrImage}
           alt="user profile image"
           width={330}
           height={330}
           loading="lazy"
           placeholder="blur"
           sizes="(min-width: 60em) 24vw, (min-width: 28em) 45vw, 100vw"
       />
    </>
  )
}

Following is the list of the features that Next.js image components provide:

Serves the images in next-gen modern formats such as WebP , which has a good quality and compression ratio that improves page load times and overall performance.
Converts the images to multiple sizes using the srcset attributes and serves them on different breakpoints, which can be configured by developers.
Serves low-quality, smaller, blurred images on the initial load and gradually replaces them with better-quality ones.
Sets the dimension on the image tag to avoid the cumulative layout shift, improving the core web vitals and affecting the SEO.

Middleware and edge functions

Next.js also provides capabilities for intercepting a request and response through the middleware and applying logic like validating the authentication and access token, etc.

Refer to the following code example.

import { NextResponse } from 'next/server'

export const config = {
  matcher: '/contact-us/:path*',
}

// You can mark it as `async` if using `await` inside
export function middleware(request) {
  return NextResponse.redirect(new URL('/', request.url))
}

Next.js is designed to integrate well with serverless and edge computing, enabling developers to serve the application globally using the CDN edges for lower latency and faster load times.

All paths in Next.js will cause middleware to run; you can configure the matcher to only run it on certain paths.

Middleware provides greater control over the application to manage the authentication, do logging, and handle access. It allows you to define custom logic for different routes or groups of routes.

CSS and SASS support

Next.js has built-in support for SASS and CSS, using which developers can style their app without the need to do any extra setup or include an external library. Next.js takes out the overhead so a developer can focus on styling the app, and Next.js will apply conflict-free styles at both the global and module levels.

TypeScript support

TypeScript has become the de facto standard. Its static typing helps to spot errors early and write predictable code, making it easier to develop an enterprise-level application. Next.js detects TypeScript files and compiles them at build time itself.

Internationalization

Internationalization is the practice of creating a multilanguage website and making the website available to different groups of audiences across the globe. Next.js simplifies the process of creating a website with global reach by providing a way to manage locales and configure route-based language handling without any requirement for an external library.

React 18 and concurrent features

Next.js is a React framework designed to support all the future features of React, including the concurrent rendering in React 18. It allows for automatic batching of updates and features like Suspense and startTransition for a better and smoother user experience.

When to use Next.js

Next.js is the ideal framework when your project’s focus is on speed, search engine optimization, and ease of development using the capabilities of React. Next.js performs exceptionally well in these scenarios:

Websites optimized for search engines : Next.js provides server-side rendering, which improves SEO indexing. Contents that are prerendered or generated at the build time are effectively crawled by search bots or crawlers. If your website needs to rank better in search engines, Next.js is a great choice.
Content-heavy websites : Next.js’s ability to prerender a page or pregenerate a page at build time makes it an excellent choice for creating content-heavy websites like blogs, news websites, or e-commerce sites. By leveraging incremental static regeneration, you dynamically update the content on the page to avoid a full-page reload.
High-performance applications : Features like automatic code splitting, image and font optimization, server-side rendering, and partial updates make Next.js a great choice for projects that demand faster load times and optimal performance.
Full-stack applications: As Next.js is primarily created for server-side rendering, it has not kept itself limited to front-end development. It has turned itself into a full-stack framework. Using features like API routing lets us write all the server-side logic separately like creating REST APIs, handling database operations, and submitting forms. And the great thing about Next.js is it keeps the front-end and back-end code separate and then bundled separately, as well.
Global applications : If your project requires serving users in different regions of the globe, Next.js can be a great choice. It integrates well with CDNs for global content distribution. Combining this with the i18N for internationalization and edge functions for ultra-low latency, Next.js becomes a perfect choice for creating a global application.

Example use cases

Food delivery or quick commerce websites where the products listed need to be indexed in the search engine quickly to drive traffic and conversions. They require SEO optimization, fast load times, and dynamic product updates.
SaaS platforms that follow a hybrid approach where they want to be fast and efficient in delivering services to customers. They can have static content (a landing page) that needs to be indexed as well as dynamic content (like dashboards). They can leverage server-side rendering for the static content to improve SEO optimization and load times while still allowing for dynamic product updates on the same platform.
Blogs or educational content that do documentation of static content with minimum change in the content can benefit from the SSG and ISR.
Any website that focuses on SEO, performance, and accessibility, like marketing sites for driving traffic and conversions, can use Next.js SSR.

Conclusion

It may be a little confusing to decide which framework is right for you. As a developer, you can start with either of the two, as ultimately the syntax will be common, but both frameworks differ in their rendering strategies, performance, and SEO capabilities.

Your decision should be primarily based on the requirements of your projects, your team’s experience, and your long-term objectives.

React.js can be an ideal choice for projects where SEO is not a considerable factor. If you want to create a highly interactive web application quickly, React’s component-driven architecture can help. Also, React has huge community support, and tons of open-source libraries are available that help you create applications in no time with seasoned developers.

Next.js, which is built on top of the React, provides the React developer experience but extends its feature set with multiple rendering technologies such as static content generation (SSG), incremental static regeneration (ISR), and API routing to perform back-end operations within the framework. Next.js is considered a full-stack framework that is ideal for a project that requires performance enhancements, scalability, SEO optimizations, quick load speed, and dynamic data retrieval.

The selection of your framework should be based on the requirements of your project:

Pick React if your project is not very concerned about SEO but focuses on faster development with dynamic UIs and you want to provide a smooth user experience.
Go for Next.js if your project relies heavily on SEO, as it can leverage Next.js’s built-in server-side rendering and other optimization techniques, which are ideal for the core-web vitals.

Both frameworks are great choices for creating a modern enterprise-grade application with efficient performance. Both have vast communities with excellent resources and a large set of libraries that will assist in getting unblocked on any issues.

Related Blogs

Boost Your Workflow with Responsively App

Vinoth Kumar Sundaramoorthy — Mon, 18 Nov 2024 10:01:14 +0000

TL;DR: Responsively App provides a platform to view your website across multiple devices simultaneously for quick and efficient responsiveness testing. Features like live reload, customizable device profiles, and a responsive inspector help identify and rectify layout issues across various breakpoints, ensuring a seamless user experience across all devices.

Web development today demands a fast and efficient workflow and a seamless user experience across multiple devices. Responsively.app helps developers achieve just that by simplifying the testing and optimization process for responsive designs. Here’s a step-by-step approach to optimizing your workflow with Responsively App.

What is the Responsively.app?

Responsively.app is a powerful toolset designed to simplify the testing of responsive web designs. Traditionally, developers had to manually resize browser windows or switch between different devices to verify how a site would appear on varying screen sizes. Responsively App eliminates this cumbersome process by providing real-time, multidevice previews, significantly enhancing development efficiency. It allows developers to view how their websites behave on desktop, tablet, and mobile devices simultaneously, leading to a more streamlined development workflow.

Experiencing the features of the Responsively.app

In Responsively App , you can efficiently test the appearance and functionality of your website or local sample across multiple devices by simply navigating to the URL within the app. Whether you’re developing for mobile, tablet, or desktop, Responsively App provides an intuitive interface that mirrors real-world device usage.

We’re going to use an example app in this blog for demonstration purposes. If you need help creating an app, you can refer to the Syncfusion Getting Started documentation. It walks you through setting up a JavaScript app with Syncfusion components , such as grids, charts, and calendars.

In this blog, we are using the Syncfusion Expense Tracker example app. Follow these steps to test Responsively App with your example app:

Download and install the Responsively.app. Once it’s installed, open it.
In Responsively App , paste the following URL into the address bar:

https://ej2.syncfusion.com/showcase/javascript/expensetracker/

Responsively App will display the Syncfusion Expense Tracker on multiple screen sizes, giving insights into how the design adapts to different devices.

Maximize efficiency with multi-device testing

Responsively App lets you view your website on multiple devices at once for quick testing. This eliminates the need to switch tabs or resize windows, saving time. You can instantly check how your site performs on different screen sizes. Focus on the devices that matter most to your audience, like popular phones or specific desktops. This boosts your efficiency in ensuring consistent design across platforms.

Accelerate development with live reload

Responsively App’s live reload feature instantly reflects code changes across all devices. This saves the time usually used for manual device refreshes. Real-time updates let you optimize your site on the fly. Pair live reload with a code editor to see changes and adjust layouts faster. This speeds up your workflow and improves iteration efficiency.

Tailor device profiles to fit your project

Responsively App allows you to customize device profiles to match your project’s specific needs. Tailor screen sizes, resolutions, and orientations for popular regional devices for more relevant testing. This helps simulate the exact user experience your site will provide.

Debug layout issues with the responsive inspector

The responsive inspector in the Responsively App shows how elements adjust to screen size and resolution changes. It helps identify issues like broken grids, overlapping text, or misaligned content. Use it in the final stages of development to ensure your design works well across all breakpoints. This prevents layout shifts and creates a smoother, more polished user experience.

Test interactivity on real devices

Responsively App lets you test interactivity directly on devices, simulating touch gestures, scrolling, and other mobile actions. This ensures that touch gestures, swipes, and clicks function as expected. Testing with real-world interactions helps guarantee a smooth user experience.

Actionable tip: Regularly check your site’s functionality on touch devices during development. This ensures that your mobile-first designs are intuitive and optimized for real users.

Conclusion

Thanks for reading! Optimizing your workflow with the Responsively.app can transform the way you approach responsive design and testing. From real-time device testing to advanced features like network simulation and interactivity testing, the Responsively App allows you to streamline your process, catch issues early, and deliver a more polished user experience. By integrating Responsively App into your development routine, you’ll improve both the speed and quality of your responsive web design projects.

If you have questions, you can reach us through our support forum, support portal, or feedback portal. As always, we are happy to assist you!

Related blogs

Enhance Data Visualization with Markers in Angular Charts

Vinoth Kumar Sundaramoorthy — Thu, 14 Nov 2024 10:26:32 +0000

TL;DR : Explore how to use markers in Syncfusion Angular Charts to enhance data clarity and visual appeal. Learn to enable markers, customize their appearance, and even add icons or images for unique data point representation.

Charts are powerful data visualization tools. They help convey complex data in an easily understandable and visually appealing manner. One key element in a chart that can enhance its clarity and visual impact is using markers.

A marker in a chart is a symbol used to represent individual data points, making them easily identifiable. They can vary in shape, size, and color and are often used to enhance the readability and visual appeal of data visualizations.

In this blog, we’ll explore how to use markers in the Syncfusion Angular Charts to highlight data points effectively.

Note: Before proceeding, refer to the getting started with Angular Charts documentation.

Preparing the data for the Angular Charts

Here, we are going to plot music album sales from 2000 to 2016. We will create an object called albumSalesData with the year and noOfAlbums properties to store the number of albums sold in a specific year.

Refer to the following code example.

public albumSalesData: Object[] = [
   { year: 2000, noOfAlbums: 10 }, { year: 2002, noOfAlbums: 7 }, { year: 2004, noOfAlbums: 13 },
   { year: 2005, noOfAlbums: 16 }, { year: 2007, noOfAlbums: 11 }, { year: 2010, noOfAlbums: 10 },
   { year: 2011, noOfAlbums: 15 }, { year: 2013, noOfAlbums: 20 }, { year: 2014, noOfAlbums: 17 },
   { year: 2015, noOfAlbums: 5 },
];

Enable markers in Angular Charts

To enable markers in the Angular Charts, set the marker’s visible property to true. This configuration tells the chart to display markers for each data point.

By default, markers will not be visible, so enabling this property ensures they are rendered on the chart. This will allow viewers to see each data point clearly. You can further customize the appearance of these markers, such as their shape, size, and color, to make the data more distinguishable and enhance the chart’s visual clarity.

Refer to the following code example.

Index.html

<e-series-collection>
 <e-series
     [dataSource]='data' type='Spline' xName='year' yName='noOfAlbums'  
     [marker]='marker'>
 </e-series>
</e-series-collection>

app.component.ts

public marker: Object = {
  visible: true
};

Refer to the following image.

Enabling markers in Angular Charts

Customizing the markers in Angular Charts

Customizing markers allows you to control their appearances, such as their shape, size, border, and visibility to better match the design and focus of your chart.

Refer to the following code example.

public marker: Object = {
    visible: true,
    height: 15,
    width: 15,
    fill: 'Yellow',
    shape: 'Square',
    isFilled: true,
    border: {color: 'red', width: 1.5}
};

In the above example, the marker’s visible property has been set to true, and both the height and width properties are set to 15 to render enlarged markers. The shape is set to Square, the isFilled property is set to true, the fill color is set to yellow, and a border is also provided.

Refer to the following image.

Customizing markers in Angular Charts

Setting a custom icon or images

Setting images or icons as markers in Angular Charts is a great way to enhance visual appeal and convey additional information.

To set an image as a marker, you need to set the marker’s shape property to Image and then specify the image path using the marker’s imageURL property.

Refer to the following code example.

marker:{ 
  visible: true,
  imageUrl: './cd.png',
  shape: 'Image', 
  width: 15, height: 15
},

Refer to the following image.

Setting an image as a marker in Angular Charts

Reference

For more details, refer to the example for adding and customizing markers in Angular Charts on StackBlitz.

Conclusion

Thanks for reading! In this blog, we’ve seen how to enable and customize markers in the Syncfusion Angular Charts component for better data visualization. We encourage you to try this option and leave your feedback in the comments section below.

You can also check out our online demos and documentation for a more in-depth look at what you can do with the Angular Charts component.

If you are new to Syncfusion, try our control features by downloading a free trial.

For questions, you can contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

DEV Community: Vinoth Kumar Sundaramoorthy

Build World-Class Flutter Apps with Globalization and Localization

Globalization

Localization

1. Locale

2. LocalizationsDelegates

3. SupportedLocales

How to create custom localization language in Syncfusion Flutter widgets

GitHub reference

Conclusion

Related Blogs

Zoneless Change Detection in Angular 18: Boost Performance

What is change detection in Angular?

How does change detection work in Angular?

What is zoneless change detection?

Advantages of not using Zone.js

Better performance

Improved core web vitals

Easier debugging

Better compatibility

How to enable zoneless change detection in an Angular 18 app?

Using ChangeDetectorRef

Using signals

Conclusion

Related Blogs

Secure JWT Storage: Best Practices

JWTs and security concerns

Common storage methods

Local storage and session storage

Cookies

Secure methods for storing JWTs

Secure HttpOnly cookies

Encryption before storage

Server-side session management

Advanced security practices

Using web workers for JWT management

Content security policy (CSP)

Guidelines for setting a CSP for SPAs

Regular security audits and updates

Best practices for security maintenance

Conclusion

Related blogs

Mastering Flutter DataGrid with Pagination: Build Efficient Data Tables

Steps to enable the pagination in the Flutter DataGrid

Step 1: Create a DataPager widget

Step 2: Set the pageCount property

Step 3: Implement the logic to load data for specific pages

Step 4: Defining data

Step 5: Configure data display layout

GitHub reference

Conclusion

Related Blogs

What’s New in Angular 19?

Getting started

Step 1: Create a formula in Excel

Step 2: Read the formula

Step 3: Calculate the formula

Use named ranges in the formula

Create cross-sheet references

References

Conclusion

Related blogs

Prepare for Syncfusion’s Biggest Sale of the Year – Black Friday 2024!

Supercharge your development with Essential Studio®

Unlock huge savings this Black Friday

Here’s how to redeem:

FAQs

Upgrade, save, and conquer your coding goals

Related Blogs

Creating a Dynamic WPF Chart Dashboard to Showcase 2024 Women’s T20 World Cup Statistics

Step 1: Gathering the T20 data

Step 2: Populating the data

PlayersData class properties

ScoreInfo class properties

CountryData class properties

Step 3: Defining the layout

Step 4: Arranging the elements in the layout

Step 5: Configuring the WPF ComboBox and header view

Step 6: Arranging country-wise Women’s T20 content with WPF Doughnut Chart integration

Step 7: Binding data to the WPF Doughnut Chart

Supercharge your development with Essential Studio^®