Custom Widget Script Styling Not Coming Through on sdk-ui Chart Component

Question

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...

Steve Lewis · Accepted Answer

Hi ewoytowitz Alright, thanks for providing the example. Here is a Compose SDK version of the same, using `onBeforeRender` prop. import { Chart, ChartProps, useGetWidgetModel } from "@sisense/sdk-ui"; import { useState } from "react"; function CodeExample() { const { widget } = useGetWidgetModel({ dashboardOid: '', widgetOid: '', }); const [chartProps, setChartProps] = useState(); if (widget && !chartProps) setChartProps(widget.getChartProps()); fun...

DRay · Answer

Hi haydenwitt . Do you still need help with this? If so I can reach out internally, or we have our live Office Hours in the Sisense Discord tomorrow at 1pm Central if you can stop in then and ask your question.

haydenwitt · Answer

I was able to get it to kind of work, but it's showing two tooltips now:

widget.on("beforeviewloaded", function(w, args) {
function convertRawTime(num) {
if (!num && num !== 0) return '0:00';
var sign = num < 0 ? '-' : '';
var hours = (parseInt(Math.abs(num) / 3600) % 24);
var minutes = parseInt(Math.abs(num) / 60) % 60;
var seconds = parseInt(Math.abs(num) % 60);

var minutesText = minutes < 10 ? "0" + minutes : minutes;
var secondsText = seconds < 10 ? "0" + seconds : seconds;

return sign + minutesText + ":" + secondsText;
}

// Format data labels
args.options.plotOptions.series.dataLabels.formatter = function() {
return convertRawTime(this.y);
}

// Format y-axis labels
args.options.yAxis[0].labels.formatter = function() {
return convertRawTime(this.value);
}

// Reset any existing tooltip settings
args.options.tooltip = null;

// Set new tooltip configuration
args.options.tooltip = {
enabled: true,
followPointer: false,
followTouchMove: false,
hideDelay: 0,
formatter: function() {
let total = this.total || this.y;
let percentage = ((this.y / total) * 100).toFixed(1);
let s = '<div style="min-width: 100px; color: rgb(91, 99, 114); font-size: 13px; line-height: 18px; margin: 4px 6px;">';

s += this.x + '<br/>';
s += '<hr class="csdk-border-t" style="margin: 7px 0px;">';
s += this.series.name + ': ' +
`<span style="color:${this.color}">` +
convertRawTime(this.y) +
` (${percentage}%)</span>`;

s += '</div>';
return s;
},
shared: false,
useHTML: true,
outside: false,
style: {
pointerEvents: 'none'
}
};

// Disable any chart-wide tooltip settings
if (args.options.plotOptions && args.options.plotOptions.series) {
args.options.plotOptions.series.tooltip = {
enabled: false
};
}
});

'; s += this.x + '
'; s += '

'; s += this.series.name + ': ' + `` + convertRawTime(this.y) + ` (${percentage}%)`; s += '

'; return s; }, shared: false, useHTML: true, outside: false, style: { pointerEvents: 'none' } }; // Disable any chart-wide tooltip settings if (args.options.plotOptions && args.options.plotOptions.series) { args.options.plotOptions.series.tooltip = { enabled: false }; } });

haydenwitt · Answer

Any tips on getting this to work for stacked bar charts?

ewoytowitz · Answer

Looks great! The tooltip now matches the standard styling and has the formatting. Thank you Steve!

Steve Lewis · Answer

Hi ewoytowitz Thanks for the great question! The existing widget scripts will not affect Compose SDK behaviour, as scripts are executed in the Sisense Fusion application when the various lifecycle events happen. The approach for Compose SDK is to allow you to apply customizations in your app code, instead of within widget scripts. Here's an example of modifying an existing widget grouped by some date column, and changing both the aggregation granularity to minutes and also the display format. import { Chart, ChartProps, useGetWidgetModel, CartesianChartDataOptions, StyledColumn } from "@sisense/sdk-ui"; import { Column, DateLevels } from "@sisense/sdk-data"; function CodeExample() { const { widget } = useGetWidgetModel({ dashboardOid: '', widgetOid: '', }); const getChartProps = () => { if (!widget) { return null; } const widgetProps = widget.getChartProps(); return { ...widgetProps, dataOptions: { ...widgetProps.dataOptions, category: (widgetProps.dataOptions as CartesianChartDataOptions).category.map((col: Column | StyledColumn) => { if ('column' in col && (col.column.type === 'datelevel' || col.column.name === 'The Time Column')) { return { ...col, granularity: DateLevels.AggMinutesRoundTo1, dateFormat: 'HH:mm:ss', } } return col; }), } } } const chartProps = getChartProps() as ChartProps; return ( <> {chartProps && ( )} ); }; export default CodeExample; I see that we might be missing the 'seconds' level of granularity in the DateLevels so we'll take a look into this. I hope this helps, feel free to reply with more questions! Thanks Steve