Supercharging Your Tabular Views: AG Grid Powered by Sisense Compose SDK
Supercharging Your Tabular Views: AG Grid Powered by Sisense Compose SDK How to Build a Tabular View with Sisense Compose SDK and AG Grid This guide walks through how to use Sisense Compose SDK's query hooks to power an AG Grid table component in React. We'll break down the steps, explain the code, and highlight the key functionalities of AG Grid. Introduction Tables are essential in BI applications for summarizing large datasets and providing users with a simple way to navigate, filter, and analyze data. AG Grid is an ideal solution for tabular views, offering robust capabilities like sorting, filtering, grouping, and data exporting. When combined with the Sisense Compose SDK, you can power real-time, data-driven applications that provide users with seamless, customizable data interactions. In this example, we are using a sample eCommerce dataset, available through the Sisense Compose SDK free trial, to demonstrate how powerful this combination can be. Users can explore product sales by country, age range, and time period in a fully interactive grid. AG Grid's advanced tabular capabilities include features like multi-level row grouping, custom value formatting, pivot mode for creating complex data hierarchies, and the ability to export data to formats like CSV. These features, when integrated with Sisense's query hooks and real-time data, enable developers to create highly dynamic dashboards where users can manipulate large datasets with ease. This combination of Sisense Compose SDK and AG Grid empowers developers to create rich, interactive data experiences, allowing users to filter and manipulate data at granular levels, all while leveraging real-time querying powered by Sisense. Step-by-Step Breakdown of the Code Setting Up the Project packages used: npm install ag-grid-react ag-grid-community @mui/material @sisense/sdk-ui @sisense/sdk-data Register AG Grid Modules AG Grid uses modules to enable functionality like client-side row models, and sorting and filtering. We register the modules to be used within AG Grid: import { AgGridReact } from "ag-grid-react"; import "ag-grid-community/styles/ag-grid.css"; import "ag-grid-community/styles/ag-theme-alpine.css"; These imports ensure that AG Grid is properly styled and functional. Setting Up the Query with Sisense SDK Sisense Compose SDK’s `useExecuteQuery` is used to fetch data from your data sources. The query can include dimensions and measures which AG Grid will render. const queryProps = useMemo(() => ({ dataSource: DM.DataSource, dimensions: [DM.Country.Country, DM.Commerce.AgeRange, DM.Commerce.Date.Years], measures: [ measureFactory.sum(DM.Commerce.Revenue, "Total Revenue"), measureFactory.sum(DM.Commerce.Quantity, "Total Quantity"), ], }), []); Here, `useExecuteQuery` executes the query based on the defined data source (`DM.DataSource`), dimensions (e.g., country, age range), and measures (e.g., revenue, quantity). Fetching and Displaying Data We leverage React's `useEffect` hook to update the state of `rowData` once data is fetched. This ensures AG Grid displays up-to-date information. const { data, isLoading, isError } = useExecuteQuery(queryProps); useEffect(() => { if (!isLoading && !isError && data) { const rows = data.rows.map((row) => ({ country: row[0]?.text || "N/A", ageRange: row[1]?.text || "N/A", year: row[2]?.text || "N/A", revenue: row[3]?.data || 0, quantity: row[4]?.data || 0, })); setRowData(rows); } }, [data, isLoading, isError]); This block processes the raw data returned from the query and formats it for use in the AG Grid. Column Definitions AG Grid requires column definitions that define how each field should be displayed. const columnDefs = useMemo(() => [ { field: "country", headerName: "Country" }, { field: "ageRange", headerName: "Age Range" }, { field: "year", headerName: "Year" }, { field: "revenue", headerName: "Total Revenue", valueFormatter: (params) => abbreviateNumber(params.value), // Helper function for number formatting }, { field: "quantity", headerName: "Total Quantity", valueFormatter: (params) => abbreviateNumber(params.value), }, ], []); We define five columns: country, age range, year, revenue, and quantity. The `valueFormatter` function ensures that numbers are displayed in an abbreviated format (e.g., "1.2K" for thousands). AG Grid Configuration The grid configuration includes `defaultColDef` for common properties across all columns (like filtering and sorting), and `animateRows` for smoother transitions. const defaultColDef = useMemo(() => ({ flex: 1, minWidth: 100, sortable: true, filter: true, resizable: true, }), []); Here, all columns are set to be sortable, filterable, and resizable by default. Exporting Data AG Grid’s API allows exporting table data to CSV. We use a button to trigger the export functionality: const onBtnExport = useCallback(() => { gridRef.current.api.exportDataAsCsv(); }, []); Rendering the Grid Finally, we render the AG Grid component, passing the `rowData`, `columnDefs`, and `defaultColDef` as props: <AgGridReact ref={gridRef} rowData={rowData} columnDefs={columnDefs} defaultColDef={defaultColDef} animateRows={true} /> This sets up the AG Grid to dynamically render data retrieved via Sisense Compose SDK. Value of Tabular Views Tabular views are crucial for presenting structured data, providing an easy way to explore, filter, and analyze datasets. AG Grid’s built-in features like sorting, filtering, and exporting make it a perfect fit for visualizing data-rich tables in BI environments. Features of AG Grid - Sorting and Filtering: Users can sort and filter data by column. - Grouping: Group rows by common fields. - Customization: Full flexibility in column definitions and row configurations. - Exporting: Allows exporting table data to CSV format. - Performance: Handles large datasets efficiently. Using Sisense Compose SDK to Power Components Sisense Compose SDK is an API-first approach to data querying, which powers the `useExecuteQuery` hook in this component. By combining it with AG Grid, you can easily visualize dynamic, real-time data in table format. Here is a functional example in Github https://github.com/sisensers/ag-grid-compose-sdk.git1KViews0likes0CommentsGet a list of Datasets in an elasticube with ComposeSDK
I want to create a dropdown containing all the tables/datasets within a specific elasticube with React. I created a dropwdown that I can populate all the elasticubes in my instance with, but I want to be able to see the list of datasets from that elasticubes but I am struggling to find the api end-point or if there is another way. Ideally would then also like to be able to build a table, containing all the data from that table, once selected, but trying to take it one step at a time 🙂 Any advise would be greatly appreciated.878Views0likes7CommentsCustom Widget Script Styling Not Coming Through on sdk-ui Chart Component
I have a widget where I have edited the script to apply custom formatting (changing the “time” from being displayed in seconds => to minutes & seconds). However, when I display this widget in my React project with the <LineChart {...widget.getChartProps()}/> component from sdk-ui, the custom formatting is not showing up. Is there something special I need to do here to be able to see this custom script styling in the sdk-ui component? I’m not finding any community posts describing this problem or a solution.Solved8KViews0likes11CommentsUsing Compose SDK with D3 Packed Bubble Charts
Learn how to create a dynamic packed bubble chart by integrating D3.js with the Sisense Compose SDK. D3.js is a versatile JavaScript library for data-driven visualizations, offering high customizability and scalability. The Sisense Compose SDK enhances this by enabling developers to build custom visualizations and interact with Sisense’s data layer securely. This guide covers setting up your project, querying data with the SDK, and visualizing it using D3.js, providing a robust solution for advanced data visualization and analysis. Get started by installing the necessary dependencies, configuring your environment, and following the step-by-step instructions to build and enhance your bubble chart. Explore the full potential of Sisense with a free trial.663Views0likes0CommentsI need some guidance as in what category should I post into?
Hello there, This is my first post after just joining this discussion, so please forgive me and provide kind assistance if I have posted to the wrong subsection. I am new here but a real enthusiast and loving this community so far. I have a background in teaching coding and in education and feel I could help with documentation, at least for starters. As a new member in this forum and wish to share and gain some knowledge. I am looking forward to create my own discussion to resolve my query and gain some knowledge though I have taken part in various discussion which is definitely helped me a lot. Also in what category should be taken depends on what factors? Thank you in advance.Solved939Views0likes2CommentsI received an error: "The dimension was not found," even though I have it in my data model.
React component <Indicator title="Total Revenue" imeasure={measureFactory.sum(DM.Attendees.PricePaid)} dataSource={DM.DataSource} color={theme.palette.primary.main} filters={all_filters} primaryValueFormat="Currency" ShowSecondaryValue /> Data Model PricePaid: createAttribute({ name: 'PricePaid', type: 'numeric-attribute', expression: '[Attendees .PricePaid]', }),1.2KViews0likes3CommentsSorting Chart By Different Field Than The One Displayed
I have a column chart that is currently displaying events on the x-axis (through an "eventCode field), and they are appearing automatically in descending order by the "total competitors" (displayed on the y-axis). I would like to sort and display the events on the x-axis instead by an "eventKey" field that is also in the Data Model. Is it possible to sort chart axis labels by a different field? Basically, I want to be able to replicate the custom sort configuration (see attachment) that is offered on the Sisense website in compose sdk.Solved2.7KViews0likes4CommentsHelp with filterFactory.dateRange
I have indicators with a date range filter set up on the Sisense website (see attached image). I am trying to replicate this set up in my UI with the sisense/sdk-data filterFactory.dateRange function, and I am struggling to know how I need to format the dates I pass in to get the same results as the Sisense website. I have tried passing in dates in a "YYYY-MM-DD" format, a "MM/DD/YYYY" format, and a date (new Date()) format. With all of these formats my indicators either return a 0 or N/A value, or values that are way too high (so it seems like the filter is not being applied). What do I need to do differently to get this working? I am trying to filter to show data from the last four weeks. <IndicatorChart {...widget.getChartProps()} filters={[filterFactory.dateRange(DM.SeasonCalendar.CalendarDate, fourWeeksAgoFormattedDate, todayFormattedDate)]} />Solved1.7KViews0likes2Comments