Migrating Compose SDK from 0.x.x to 1.0.0

Released in December 2023, Compose SDK (C-SDK) major version 1.0.0 introduces a number of breaking changes. If your application is still using C-SDK version less than 1.0.0, follow this guide to migrate.

Note: This guide is for React. As of December 2023, C-SDK for other frameworks including Angular and Vue are still under internal testing.

Renamed

(1) For chart components in @sisense/sdk-ui, type alias StyleOptions has been renamed to ChartStyleOptions. If your app uses this type alias explicitly, do a simple search and replace in the code.

(2) For indicator chart in @sisense/sdk-ui, interface IndicatorDataOptions has been renamed to IndicatorChartDataOptions. If your app uses this interface explicitly, do a simple search and replace in the code.

(3) In @sisense/sdk-data, namespaces measures and filters have been renamed to measureFactory and filterFactory, respectively. Here is a code example to demonstrate the usage of measureFactory and filterFactory

BEFORE

  import { filters, measures } from '@sisense/sdk-data';
  import * as DM from './sample-ecommerce';
  const { data, isLoading, isError } = useExecuteQuery({
    dataSource: DM.DataSource,
    dimensions: [DM.Commerce.AgeRange],
    measures: [measures.sum(DM.Commerce.Revenue)],
    filters: [filters.greaterThan(DM.Commerce.Revenue, 1000)],
  });
  if (isLoading) {
    return <div>Loading...</div>;
  }
  if (isError) {
    return <div>Error</div>;
  }
  if (data) {
    return <div>{`Total Rows: ${data.rows.length}`}</div>;
  }
  return null;

AFTER

  import { filterFactory, measureFactory } from '@sisense/sdk-data';
  import * as DM from './sample-ecommerce';
  const { data, isLoading, isError } = useExecuteQuery({
    dataSource: DM.DataSource,
    dimensions: [DM.Commerce.AgeRange],
    measures: [measureFactory.sum(DM.Commerce.Revenue)],
    filters: [filterFactory.greaterThan(DM.Commerce.Revenue, 1000)],
  });
  if (isLoading) {
    return <div>Loading...</div>;
  }
  if (isError) {
    return <div>Error</div>;
  }
  if (data) {
    return <div>{`Total Rows: ${data.rows.length}`}</div>;
  }
  return null;

Removed

(1) Parameter widgetStyleOptions has been removed from ChartWidgetProps, TableWidgetProps, and DashboardWidgetProps. Its options are now merged into the styleOptions prop to streamline the above mentioned props. This means that only styleOptions is needed to customize the look and feel of *Chart, ChartWidget, and DashboardWidget components.

Here is an example of ChartWidget with both widgetStyleOptions and styleOptions defined before and after the change:

Notice that widgetStyleOptions has been merged to styleOptions.

BEFORE

<ChartWidget
  title={'REVENUE vs.UNITS SOLD'}
  dataSource={DM.DataSource}
  chartType={'line'}
  dataOptions={{
    category: [
      {
        column: DM.Commerce.Date.Months,
        dateFormat: 'yy-MM',
      },
    ],
    value: [
      DM.Measures.SumRevenue,
      {
        column: DM.Measures.Quantity,
        showOnRightAxis: true,
        chartType: 'column',
      },
    ],
    breakBy: [],
  }}
  styleOptions={{
    subtype: 'line/spline',
    lineWidth: { width: 'bold' },
    yAxis: {
      title: { enabled: true, text: 'SALES' },
    },
    y2Axis: {
      title: { enabled: true, text: 'QUANTITY' },
    },
    markers: {
      enabled: true,
      fill: 'hollow',
    },
  }}
  widgetStyleOptions={{
    border: true,
    borderColor: 'lightgray',
    header: {
      dividerLine: true,
      dividerLineColor: 'lightgray',
    }
  }}
/>

AFTER

<ChartWidget
  title={'REVENUE vs.UNITS SOLD'}
  dataSource={DM.DataSource}
  chartType={'line'}
  dataOptions={{
    category: [
      {
        column: DM.Commerce.Date.Months,
        dateFormat: 'yy-MM',
      },
    ],
    value: [
      DM.Measures.SumRevenue,
      {
        column: DM.Measures.Quantity,
        showOnRightAxis: true,
        chartType: 'column',
      },
    ],
    breakBy: [],
  }}
  styleOptions={{
    subtype: 'line/spline',
    lineWidth: { width: 'bold' },
    yAxis: {
      title: { enabled: true, text: 'SALES' },
    },
    y2Axis: {
      title: { enabled: true, text: 'QUANTITY' },
    },
    markers: {
      enabled: true,
      fill: 'hollow',
    },
    border: true,
    borderColor: 'lightgray',
    header: {
      dividerLine: true,
      dividerLineColor: 'lightgray',
    },
  }}
/>

Updated

(1) The return value of the ExecuteQuery component is now consistent with that of the useExecuteQuery hook. Specifically, ExecuteQuery returns QueryState instead of just data.

Here is a code example to demonstrate the usage of ExecuteQuery before and after the change:

BEFORE

<ExecuteQuery
  dataSource={DM.DataSource}
  dimensions={[DM.Commerce.AgeRange]}
  measures={[measures.sum(DM.Commerce.Revenue)]}
  filters={[filters.greaterThan(DM.Commerce.Revenue, 1000)]}
>
  {
    (data) => {
      if (data) {
        console.log(data);
        return <div>{`Total Rows: ${data.rows.length}`}</div>;
      }
    }
  }
</ExecuteQuery>

AFTER

<ExecuteQuery
  dataSource={DM.DataSource}
  dimensions={[DM.Commerce.AgeRange]}
  measures={[measures.sum(DM.Commerce.Revenue)]}
  filters={[filters.greaterThan(DM.Commerce.Revenue, 1000)]}
>
  {
    ( { data, isLoading, isError } ) => {
      if (isLoading) {
        return <div>Loading...</div>;
      }
      if (isError) {
        return <div>Error</div>;
      }
      if (data) {
        return <div>{`Total Rows: ${data.rows.length}`}</div>;
      }
      return null;
    }
  }
</ExecuteQuery>

(2) Similarly, the return value of the ExecuteQueryByWidgetId component is now consistent with that of the useExecuteQueryByWidgetId hook. Specifically, ExecuteQueryByWidgetId returns QueryByWidgetIdState instead of just data and query.

Here is a code example to demonstrate the usage of ExecuteQueryByWidgetId before and after the change:

BEFORE

 <ExecuteQueryByWidgetId
   widgetOid={'64473e07dac1920034bce77f'}
   dashboardOid={'6441e728dac1920034bce737'}
 >
 {
   (data, query) => {
     if (data) {
       return <div>{`Total Rows: ${data.rows.length}`}</div>;
     }
   }
 }
 </ExecuteQueryByWidgetId>

AFTER

<ExecuteQueryByWidgetId
 widgetOid={'64473e07dac1920034bce77f'}
 dashboardOid={'6441e728dac1920034bce737'}
>
{
 ({data, isLoading, isError}) => {
   if (isLoading) {
     return <div>Loading...</div>;
   }
   if (isError) {
     return <div>Error</div>;
   }
   if (data) {
     console.log(data);
     return <div>{`Total Rows: ${data.rows.length}`}</div>;
   }
   return null;
 }
}
</ExecuteQueryByWidgetId>