search

pegasystems / constellation-ui-gallery

This open-source repository provides a collection of ready-to-use and customizable Constellation DX components. Use this resource to gain inspiration, best practices, and a solid foundation for implementing custom components.
https://pegasystems.github.io/constellation-ui-gallery/
Apache License 2.0
32 stars 29 forks source link

Proposing New Component - Pie Chart with Filter - Areteans #98

Open s-thutupalli opened 5 days ago

s-thutupalli commented 5 days ago

Title: Pie Chart with Filter

Overview

The Pie Chart React Component with Filtering Options is a versatile data visualization tool that allows users to display data distributions in a pie chart format. This component comes with dynamic filtering options, enabling users to focus on specific data subsets by selecting or excluding certain columns or categories. It's designed to handle both static and dynamic datasets.

It is ideal for applications where users need to visualize proportional data and refine views based on specific column criteria.

Usage

This component can be used for data visualizations with which the users can drilldown the data for the specific columns to retrieve better data insights.

Component’s key features include

Dynamic Data Rendering: Accepts data in a tabular format (e.g., JSON or arrays) to generate pie charts dynamically.

Column Filtering Options: Provides UI elements (dropdowns, checkboxes, or sliders) for users to filter data based on specific column values.

Interactive Updates: Automatically updates the chart when filters are applied.

Custom Tooltip: Provide detailed information on hover.

Configurations:

chartTitle – to display the label to indicate what the chart data represents.

dataPageName – datapage reference which will be the source for the chart data.

chartDataColumns– comma separated values to indicate the 2 columns to be used for pie chart.

filterColumns – comma separated values which will be used as dynamic filters for chart drill downs.

Dependencies:

  1. React Google Charts

    npm install react-google-charts

  2. Material-UI (MUI)

    npm install @mui/material @emotion/react @emotion/styled

Component benefits

1. Enhanced Data Visualization –

A pie chart offers an intuitive way to visualize proportions and compare categories briefly.

Data filters allow users to focus on specific segments or time periods, making the chart more relevant.

2. Improved User Interactivity –

Users can apply filters on columns to customize the displayed data, creating a more interactive experience.

Filters enable users to dive deeper into specific data subsets, uncovering hidden insights.

3. Real-Time Data Insights - For dashboards or live analytics, filtered pie charts can update dynamically to reflect the latest data, ensuring up-to-date insights.

4) Example Use Cases a) E-commerce: Visualizing sales distribution across product categories with filters for regions or time periods. b) Finance: Analysing expense categories with filters for months or departments. c) Marketing: Displaying campaign performance by segment with filters for demographics or platforms.

Attached the component code and detailed description with images below.

Custom_Pie_Chart_Filter.docx CustomPieChart.zip

ricmars commented 1 day ago

this component is not following the best practices for this github repo - see https://pegasystems.github.io/constellation-ui-gallery/?path=/docs/support-and-contributing--docs:

Why build a Constellation DX component when this UX pattern can be achieved using a dashboard with promoted filters and an insight?

s-thutupalli commented 14 hours ago

We are working on your comments, will get back to you on this as soon as possible.