Fetching data with Compose SDK<\/strong><\/p>\nBefore diving into the integration, it\u2019s essential to understand how Compose SDK fetches data. The SDK provides a React hook called useExecuteQuery that allows querying data from a specific data model in a Sisense instance. The hook also handles data aggregation and data filtering if needed.<\/p>\n
For example, in the first code snippet provided, we use the useExecuteQuery hook to fetch data from the Sample ECommerce data model:<\/p>\n
const { data, isLoading, isError } = useExecuteQuery({<\/code><\/pre>\ndataSource: DM.DataSource,<\/code><\/p>\n <\/p>\n
dimensions: [DM.Commerce.AgeRange],<\/code><\/p>\n <\/p>\n
measures: [<\/code><\/p>\n <\/p>\n
measures.sum(DM.Commerce.Cost, 'Total Cost'),<\/code><\/p>\n <\/p>\n
measures.sum(DM.Commerce.Revenue, 'Total Revenue'),<\/code><\/p>\n <\/p>\n
],<\/code><\/p>\n});<\/code> if (isLoading) {<\/code><\/p>\nreturn <div>Loading...<\/div>;<\/code><\/p>\n}<\/code> if (isError) {<\/code><\/p>\nreturn <div>Error<\/div>;<\/code><\/p>\n}<\/code><\/p>\nHere, dataSource specifies the data model we\u2019re pulling from, which in this case is Sample ECommerce. Parameters dimensions and measures define what data we want to retrieve following the dimensional modeling of your data source. In this case, we\u2019re fetching the AgeRange dimension and summing up the Cost and Revenue measures.<\/p>\n
Notice the isLoading and isError flags? The hook provides these to make it easier to handle various data states. You can display loading spinners, error messages, or fallback UI without any extra effort.<\/p>\n
Visualizing data with a Plotly bar chart<\/strong><\/p>\nPlotly.js is a high-level, declarative charting library that comes with an extensive range of chart types. It is built on top of D3.js and WebGL, which allows it to produce interactive, web-friendly visualizations with high performance. Plotly.js supports popular front-end frameworks including React, Angular, and Vue.<\/p>\n
Once we have the data, the next step is to transform it into a format that third-party charting libraries can understand. In our example, we\u2019re using a Plotly bar chart but the flow and logic can be applied to other libraries.<\/p>\n
The data transformation is pretty straightforward:<\/p>\n
const x1: number[] = [];<\/code> const y1: number[] = [];<\/code> const y2: number[] = [];<\/code> data?.rows.forEach((row) => {<\/code><\/pre>\nx1.push(row[0].data);<\/code><\/p>\n <\/p>\n
y1.push(row[1].data);<\/code><\/p>\n <\/p>\n
y2.push(row[2].data);<\/code><\/p>\n});<\/code><\/p>\nHere, three arrays (x1, y1, and y2) are initialized to hold values of Age Range, Total Cost, and Total Revenue. The data?.rows.forEach loop iterates through each row of the fetched data, populating these arrays.<\/p>\n
Subsequently, two \u201ctraces\u201d (or series) are created for the bar chart:<\/p>\n
const trace1: Plotly.Data = {<\/code><\/pre>\nx: x1,<\/code><\/p>\n <\/p>\n
y: y1,<\/code><\/p>\n <\/p>\n
type: 'bar',<\/code><\/p>\n <\/p>\n
name: 'Total Cost',<\/code><\/p>\n};<\/code> const trace2: Plotly.Data = {<\/code><\/p>\nx: x1,<\/code><\/p>\n <\/p>\n
y: y2,<\/code><\/p>\n <\/p>\n
type: 'bar',<\/code><\/p>\n <\/p>\n
name: 'Total Revenue',<\/code><\/p>\n};<\/code> const plotData = [trace1, trace2];<\/code><\/p>\nEach trace represents a set of bars on the chart. trace1 represents the \u201cTotal Cost\u201d bars, and trace2 represents the \u201cTotal Revenue\u201d bars.<\/p>\n
The transformed data can now be used to create various types of charts. While the specifics may vary depending on the library, the general approach remains the same.<\/p>\n
const layout = {<\/code><\/pre>\ntitle: 'Total Cost and Revenue by Age Ranges',<\/code><\/p>\n <\/p>\n
xaxis: { title: 'Age Range' },<\/code><\/p>\n <\/p>\n
yaxis: { title: 'Cost and Revenue ($)' },<\/code><\/p>\n <\/p>\n
width: 900,<\/code><\/p>\n <\/p>\n
height: 500,<\/code><\/p>\n};<\/code> return <Plot data={plotData} layout={layout} \/>;<\/code><\/p>\nThe layout object defines representation properties of the chart, such as its title, axis labels, and size. The Plot component then takes in the plotData (which contains our two traces) and the layout to render the bar chart.<\/p>\n
\n
![\"Plotly](\"https:\/\/cdn.sisense.com\/wp-content\/uploads\/blog-img1-1024x554-1.png\")
<\/p>\n
Plotly bar chart showing Total Cost and Total Revenue by Age Range<\/p>\n<\/div>\n
Visualizing data with a MUI bar chart<\/strong><\/p>\nThe same flow from the previous example can also apply to the MUI charting library. However, the data transformation for MUI Bar Chart is slightly different:<\/p>\n
const dataset =<\/code><\/pre>\ndata?.rows.map((row) => ({<\/code><\/p>\n <\/p>\n
ageRange: row[0].data,<\/code><\/p>\n <\/p>\n
totalCost: row[1].data,<\/code><\/p>\n <\/p>\n
totalRevenue: row[2].data,<\/code><\/p>\n <\/p>\n
})) || [];<\/code><\/p>\nHere, we\u2019re mapping through each of the rows, which is an array, and creating a new object that has ageRange, totalCost, and totalRevenue properties.<\/p>\n
For the layout of the chart, you\u2019d define your x-axis, y-axis, and data series, much like you would in any charting library.<\/p>\n
<BarChart<\/code><\/pre>\ndataset={dataset}<\/code><\/p>\n <\/p>\n
xAxis={[{ scaleType: 'band', dataKey: 'ageRange', label: 'Age Range' }]}<\/code><\/p>\n <\/p>\n
series={[<\/code><\/p>\n <\/p>\n
{ dataKey: 'totalCost', label: 'Total Cost', valueFormatter },<\/code><\/p>\n <\/p>\n
{ dataKey: 'totalRevenue', label: 'Total Revenue', valueFormatter },<\/code><\/p>\n <\/p>\n
]}<\/code><\/p>\n <\/p>\n
yAxis={[<\/code><\/p>\n <\/p>\n
{<\/code><\/p>\n <\/p>\n
label: 'Cost and Revenue ($)',<\/code><\/p>\n <\/p>\n
},<\/code><\/p>\n <\/p>\n
]}<\/code><\/p>\n <\/p>\n
width={800}<\/code><\/p>\n <\/p>\n
height={500}<\/code><\/p>\n <\/p>\n
margin={{ left: 100 }}<\/code><\/p>\n <\/p>\n
sx={{<\/code><\/p>\n <\/p>\n
[`.${axisClasses.left} .${axisClasses.label}`]: {<\/code><\/p>\n <\/p>\n
transform: 'rotate(-90deg) translate(0px, -50px)',<\/code><\/p>\n <\/p>\n
},<\/code><\/p>\n <\/p>\n
}}<\/code><\/p>\n\/><\/code><\/p>\nIn the above code, the xAxis prop defines the x-axis of the chart, and the series prop defines the data series that will be displayed.<\/p>\n
\n
![\"MUI](\"https:\/\/cdn.sisense.com\/wp-content\/uploads\/blog-img2-1024x559-1.png\")
<\/p>\n
MUI Bar chart showing Total Cost and Total Revenue by Age Range<\/p>\n<\/div>\n
Combining multiple chart types into a hybrid chart<\/strong><\/p>\nMUI\u2019s charting library allows for combining multiple chart types. In the third code example, we\u2019ve combined a bar chart and a line chart in a single visualization. In addition to a bar chart showing Cost and Revenue on the left y-axis, we show a line chart of sales Quantity on the right y-axis.<\/p>\n
\n
![\"Hybrid](\"https:\/\/cdn.sisense.com\/wp-content\/uploads\/blog-img3-1024x540-1.png\")
<\/p>\n
Hybrid chart showing Total Cost, Total Revenue, and Total Quantity by Age Range.<\/p>\n<\/div>\n
In general, this is achieved using the ChartContainer component, which acts as a wrapper for multiple chart components:<\/p>\n
<ChartContainer ...><\/code><\/pre>\n<BarPlot \/><\/code><\/p>\n <\/p>\n
<LinePlot \/><\/code><\/p>\n <\/p>\n
...<\/code><\/p>\n<\/ChartContainer><\/code><\/p>\nInside the ChartContainer, we\u2019ve added both BarPlot and LinePlot components, allowing us to visualize both bar and line charts simultaneously.<\/p>\n
To fetch the Total Quantity for the line chart, the data fetching hooking is extended to include the measure for Quantity:<\/p>\n
const { data, isLoading, isError } = useExecuteQuery({<\/code><\/pre>\ndataSource: DM.DataSource,<\/code><\/p>\n <\/p>\n
dimensions: [DM.Commerce.AgeRange],<\/code><\/p>\n <\/p>\n
measures: [<\/code><\/p>\n <\/p>\n
measures.sum(DM.Commerce.Cost),<\/code><\/p>\n <\/p>\n
measures.sum(DM.Commerce.Revenue),<\/code><\/p>\n <\/p>\n
measures.sum(DM.Commerce.Quantity),<\/code><\/p>\n <\/p>\n
],<\/code><\/p>\n});<\/code><\/p>\nThe data transformation requires some adjustment to build separate arrays for each of the series:<\/p>\n
const seriesAgeRange = data?.rows.map((row) => row[0].data) || [];<\/code> const seriesTotalCost = data?.rows.map((row) => row[1].data) || [];<\/code> const seriesTotalRevenue = data?.rows.map((row) => row[2].data) || [];<\/code> const seriesTotalQuantity = data?.rows.map((row) => row[3].data) || [];<\/code><\/pre>\nAs you may recall, this transformation is very similar to the logic for the Plotly bar chart in the first example. Here, the map() method on the rows array is used, instead of forEach(), to introduce you to different techniques to achieve the same structure for the transformed data.<\/p>\n
The series array is then created to specify the types of charts and associate them with the corresponding y-axes:<\/p>\n
const series = [<\/code><\/pre>\n{<\/code><\/p>\n <\/p>\n
type: 'bar',<\/code><\/p>\n <\/p>\n
yAxisKey: 'costAndRevenue',<\/code><\/p>\n <\/p>\n
data: seriesTotalCost,<\/code><\/p>\n <\/p>\n
},<\/code><\/p>\n <\/p>\n
{<\/code><\/p>\n <\/p>\n
type: 'bar',<\/code><\/p>\n <\/p>\n
yAxisKey: 'costAndRevenue',<\/code><\/p>\n <\/p>\n
data: seriesTotalRevenue,<\/code><\/p>\n <\/p>\n
},<\/code><\/p>\n <\/p>\n
{<\/code><\/p>\n <\/p>\n
type: 'line',<\/code><\/p>\n <\/p>\n
yAxisKey: 'quantity',<\/code><\/p>\n <\/p>\n
color: 'red',<\/code><\/p>\n <\/p>\n
data: seriesTotalQuantity,<\/code><\/p>\n <\/p>\n
},<\/code><\/p>\n] as AllSeriesType[];<\/code><\/p>\nPutting all together, the ChartContainer from MUI is used to render the chart:<\/p>\n
<ChartContainer<\/code><\/pre>\nseries={series}<\/code><\/p>\n <\/p>\n
width={860}<\/code><\/p>\n <\/p>\n
height={500}<\/code><\/p>\n <\/p>\n
margin={{ left: 100, right: 100 }}<\/code><\/p>\n <\/p>\n
xAxis={[<\/code><\/p>\n <\/p>\n
{<\/code><\/p>\n <\/p>\n
id: 'age',<\/code><\/p>\n <\/p>\n
data: seriesAgeRange,<\/code><\/p>\n <\/p>\n
scaleType: 'band',<\/code><\/p>\n <\/p>\n
valueFormatter: (value) => value.toString(),<\/code><\/p>\n <\/p>\n
},<\/code><\/p>\n <\/p>\n
]}<\/code><\/p>\n <\/p>\n
sx={{<\/code><\/p>\n <\/p>\n
[`.${axisClasses.left} .${axisClasses.label}`]: {<\/code><\/p>\n <\/p>\n
transform: 'rotate(-90deg) translate(0px, -50px)',<\/code><\/p>\n <\/p>\n
},<\/code><\/p>\n <\/p>\n
[`.${axisClasses.right} .${axisClasses.label}`]: {<\/code><\/p>\n <\/p>\n
transform: 'rotate(-90deg) translate(0px, 35px)',<\/code><\/p>\n