Building a Project Indicator Web Part with Fluent UI Gauge Chart in SPFx

In the world of SharePoint Framework (SPFx) development, integrating modern UI components can significantly enhance user experience and provide valuable insights through data visualization. One such component is the Gauge Chart from Fluent UI, which allows you to visually represent key performance indicators (KPIs) in a user-friendly manner. In this article, we will explore how to create a simple project indicator web part using the Fluent UI Gauge Chart.

Introduction to Gauge Charts

Gauge charts are effective tools for visualizing data that needs to communicate performance against a target or goal. They are particularly useful in dashboards and reporting applications, as they provide a quick overview of how well certain metrics are performing. By using the Fluent UI library, we can seamlessly integrate these charts into our SPFx solutions.

Benefits of Using Fluent UI

• Consistency: Fluent UI components offer a consistent look and feel across applications, aligning with Microsoft’s design language.
• Accessibility: The components are designed with accessibility in mind, ensuring that all users can interact with your applications.
• Customization: With various options available, developers can customize the charts to suit their needs.

Creating the Gauge Chart Web Part

To create a project indicator web part with a Gauge Chart, we will implement a simple React component that leverages Fluent UI’s charting capabilities.

Step 1: Setting Up the Project

First, ensure that you have set up your SPFx development environment. Create a new SPFx web part project if you haven’t already:

yo @microsoft/sharepoint

Follow the prompts to set up your project, and make sure to include React as your framework.

Step 2: Installing Required Packages

Next, install the Fluent UI charting library:

npm install @fluentui/react-charting

Step 3: Implementing the Gauge Chart Component

Here is the code for a simple Gauge Chart component that you can use in your SPFx web part:

import * as React from 'react';
import {
  DataVizPalette,
  GaugeChart,
  GaugeChartVariant,
  getGradientFromToken,
  DataVizGradientPalette,
} from '@fluentui/react-charting';

interface IGCBasicExampleState {
  width: number;
  height: number;
  chartValue: number;
  hideMinMax: boolean;
  enableGradient: boolean;
  roundedCorners: boolean;
}

export class GaugeChartBasicExample extends React.Component<{}, IGCBasicExampleState> {
  constructor(props: {}) {
    super(props);

    // Initial chart configurations
    this.state = {
      width: 252,
      height: 128,
      chartValue: 50, // Initial chart value
      hideMinMax: false,
      enableGradient: false,
      roundedCorners: false,
    };
  }

  public render(): React.ReactNode {
    return (
      <>
        <GaugeChart
          width={this.state.width}
          height={this.state.height}
          segments={[
            {
              size: 33,
              color: DataVizPalette.success,
              gradient: getGradientFromToken(DataVizGradientPalette.success),
              legend: 'Low Risk',
            },
            {
              size: 34,
              color: DataVizPalette.warning,
              gradient: getGradientFromToken(DataVizGradientPalette.warning),
              legend: 'Medium Risk',
            },
            {
              size: 33,
              color: DataVizPalette.error,
              gradient: getGradientFromToken(DataVizGradientPalette.error),
              legend: 'High Risk',
            },
          ]}
          chartValue={this.state.chartValue}
          hideMinMax={this.state.hideMinMax}
          variant={GaugeChartVariant.MultipleSegments}
          enableGradient={this.state.enableGradient}
          roundCorners={this.state.roundedCorners}
        />
      </>
    );
  }
}

Code Explanation

• Imports: The necessary components and functions are imported from the Fluent UI library to utilize the Gauge Chart functionality.
• State Initialization: The state of the component is initialized with default values for width, height, and chart value. These can be adjusted based on your specific needs.
• Rendering the Gauge Chart: In the render method, the GaugeChart is rendered with its properties set according to the component’s state. The chart segments are defined to represent different risk levels: low, medium, and high.

Step 4: Deploying the Web Part

After implementing the code, you can deploy your SPFx web part to your SharePoint site. Use the following commands to build and deploy your solution:

gulp build
gulp bundle --ship
gulp package-solution --ship

Upload the generated .sppkg file from the sharepoint/solution folder to your SharePoint App Catalog, and add the web part to your SharePoint pages.

Conclusion

Using the Fluent UI Gauge Chart in your SPFx applications allows you to present complex data in an easily digestible format. This simple implementation can be expanded with more advanced features, such as real-time data updates or user interactions, to provide deeper insights into your project’s performance.

For more information about Fluent UI and its components, check the Fluent UI documentation.