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

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: '<your_dashboard_id>',
    widgetOid: '<your_widget_id>',
  });

  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 && (
        <Chart
          chartType={chartProps.chartType!}
          dataSet={chartProps.dataSet}
          dataOptions={chartProps.dataOptions}
          filters={chartProps.filters}
          highlights={chartProps.highlights}
          styleOptions={chartProps.styleOptions}
        />
      )}
    </>
  );
};

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

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

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

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
};
}
});

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.