Compose SDK schema not as type safe as initially thought
Hello! I have recently started working with the Sisense SDK with great success. I am pleased with the experience so far, so I would like first to congratulate the team on the results! I am currently using the Sisense CLI to generate a typescript schema for a couple of elasticubes and it has been a wonderful boost to my productivity. I write to you because I noticed an issue after some schema changes: tsc did not warn me of missing Dimensions. I would have expected it to show errors when the schema dropped dimensions that are referenced in code. Alas, I got nothing but a runtime error. I tracked the issue down to this line: https://github.com/sisense/compose-sdk-monorepo/blob/aac97b0e92b07143cea40013fd39a4509f8ea233/packages/sdk-data/src/dimensional-model/interfaces.ts#L252 That line makes the entire schema less type safe. Would it be possible to remove it or make it more type safe some other way? Thank you! Kind regards, Cristian NeculaSolved744Views0likes4CommentsSupercharging 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.git1.1KViews0likes0Commentsimply Ask Save Function Not Working in Embed SDK Implementation
Hi, I'm working with Sisense's Embed SDK (not iFrame or SisenseJS) implementation and I've encountered a specific issue with the Simply Ask feature. The Simply Ask button is visible and functional in my embedded dashboard, but I'm unable to save any queries created through it. Here's my current implementation: typescriptCopyconst sisenseFrame = new SisenseFrame({ url: 'https://dvunified1.sisense.com/', dashboard: { id: '65118b631a4ea600334e0e7e', settings: { toolbarEnabled: true, toolbarShowDashboards: true, navigation: true } }, settings: { showHeader: true, showLeftPane: true, showRightPane: true, showToolbar: true }, element: document.getElementById('sisense-iframe') }); The interesting part is that: The Simply Ask button appears and works correctly I can create queries and see results However, when trying to save a query, nothing happens I've verified that: I'm using the latest version of Embed SDK The JWT token includes necessary permissions Simply Ask is enabled in the Sisense admin panel The implementation follows the SDK documentation guidelines Is there any specific configuration or permission needed for the save functionality in Simply Ask when using Embed SDK? Or could this be related to the 'volatile' mode setting? Any guidance would be greatly appreciated.Solved556Views0likes2CommentsUse of 'beforeRender' inside Table?
Hi, I'm using the CSDK on Angular 18 to run my micro-analytics components, I'm trying to replicate a table that I have on a dashboard using the Table component, but I need to make some customization to the Table itself like rendering some columns like an HTML to load images. Checking the docs I don't see any documentation about the use of "beforeRender" but inside the Chart component that allows the use of the 'table' type, it allows it, I wonder if is possible to use it or there is an alternative for my use case?Solved1.3KViews0likes3CommentsUsing 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.676Views0likes0CommentsApplied JAQL formula on top of another JAQL formula result
Hi, I have applied a JAQL formula to get new values (the values * 10), after that, I want to get the MAX from the result of the first query. how to achieve that? this is the result get from JAQL : [{"data": 4.3,"text": "4.3"}, {"data": 1,"text": "1"}, {"data": 43,"text": "43"}] the third column is get by applied this JAQL formula: { "jaql": { "context": { "[sepal_length]": {"dim": "[irisdataset6.sepal_length]"} }, "formula": "10 * MAX([sepal_length]) + 0", "title": "transform_x" } } now I want to get the max from the third column, how to achieve that?1.3KViews0likes5CommentsI 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.Solved945Views0likes2CommentsInactivity Timeout with iFrame Dashboard
I'm working on an Angular/Spring application that embeds Sisense dashboards in iFrames. I'm trying to add an inactivity timeout for the application, so that users are signed out after a certain period of inactivity. However, I'm not sure how to detect user activity on the dashboards, sense they are rendered within an iFrame. What options are available for handling this functionality?1.1KViews0likes4CommentsCompose SDK mock data
Hi, I am making use of the Compose SDK to build some analytics on my site, however, I wanted to be able to render a preview of my graphs without the need to generate a query to any of my cubes. Is there any way currently to perform this procedure, i.e. make the graph with values written by the developer?Solved1.3KViews0likes2Comments