@sisense/sdk-ui 0.11.3

package/dist/table/table.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import { TableProps } from '../props';
+/**
+ * Table with aggregation and pagination.
+ *
+ * @example
+ * (1) Example of Table of raw data from the `Sample ECommerce` data model:
+ *
+ * ```tsx
+ * <Table
+ *   dataSet={DM.DataSource}
+ *   dataOptions={{
+ *     columns: [
+ *       DM.Commerce.AgeRange,
+ *       DM.Commerce.Revenue,
+ *       DM.Commerce.Cost,
+ *       DM.Commerce.Quantity,
+ *     ],
+ *   }}
+ *   styleOptions={{ width: 600, height: 750 }}
+ * />
+ * ```
+ *
+ * <img src="media://table-example-1.png" width="800px" />
+ *
+ * (2) Example of Table of aggregated data from the same data model:
+ *
+ * ```tsx
+ * <Table
+ *   dataSet={DM.DataSource}
+ *   dataOptions={{
+ *     columns: [
+ *       DM.Commerce.AgeRange,
+ *       measures.sum(DM.Commerce.Revenue, 'Total Revenue'),
+ *       measures.sum(DM.Commerce.Cost, 'Total Cost'),
+ *     ],
+ *   }}
+ *   styleOptions={{
+ *     headersColor: true,
+ *     alternatingColumnsColor: false,
+ *     alternatingRowsColor: true,
+ *   }}
+ * />
+ * ```
+ *
+ * <img src="media://table-example-2.png" width="800px" />
+ * @param props - Table properties
+ * @returns Table component
+ */
+export declare const Table: React.FunctionComponent<TableProps>;

package/dist/theme-provider/custom-theme-provider.d.ts

@@ -0,0 +1,18 @@
+import { PropsWithChildren } from 'react';
+import { CompleteThemeSettings } from '../types';
+/** @internal */
+export type CustomThemeProviderProps = {
+    context: {
+        themeSettings: CompleteThemeSettings;
+        skipTracking?: boolean;
+    };
+    error?: Error;
+};
+/**
+ * Custom Theme Provider component that allows passing external theme context.
+ *
+ * Note: it specifically designed to serve as a bridge for passing context between an external wrapper and child React components.
+ *
+ * @internal
+ */
+export declare const CustomThemeProvider: import("react").FunctionComponent<PropsWithChildren<CustomThemeProviderProps>>;

package/dist/theme-provider/index.d.ts

@@ -0,0 +1 @@
+export * from './theme-provider';

package/dist/theme-provider/theme-provider.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+import { ThemeProviderProps } from '../props';
+import { CompleteThemeSettings } from '../types';
+export declare const ThemeContext: import("react").Context<{
+    themeSettings: CompleteThemeSettings;
+}>;
+export declare const useThemeContext: () => {
+    themeSettings: CompleteThemeSettings;
+};
+/**
+ * Theme provider, which allows you to adjust the look and feel of child components.
+ *
+ * @example
+ * Example of a theme provider, which changes the colors and font of the nested indicator chart:
+ * ```tsx
+ * <ThemeProvider
+ *   theme={{
+ *     chart: {
+ *       backgroundColor: '#333333',
+ *       textColor: 'orange',
+ *       secondaryTextColor: 'purple',
+ *     },
+ *     typography: {
+ *       fontFamily: 'impact',
+ *     },
+ *   }}
+ * >
+ *   <IndicatorChart {...chartOptions} />
+ * </ThemeProvider>
+ * ```
+ *
+ * Indicator chart with custom theme settings:
+ *
+ * <img src="media://indicator-chart-example-2.png" width="400px" />
+ *
+ *
+ *
+ * For comparison, indicator chart with default theme settings:
+ *
+ * <img src="media://indicator-chart-example-1.png" width="400px" />
+ * @see {@link ThemeSettings}, {@link getDefaultThemeSettings}, {@link IndicatorChart}
+ * @param props - Theme provider props
+ * @returns A Theme Provider component
+ */
+export declare const ThemeProvider: import("react").FunctionComponent<ThemeProviderProps>;

package/dist/theme-provider/use-theme-settings.d.ts

@@ -0,0 +1,12 @@
+import { ThemeOid, ThemeSettings, CompleteThemeSettings } from '../types';
+/**
+ * Returns the theme settings for the given theme OID or theme settings and error if it happened.
+ *
+ * If the given theme is a theme OID, the theme settings will be fetched from the Sisense instance.
+ * If the given theme is a theme settings object, the theme settings will be merged with parent's one and
+ * returned as is.
+ *
+ * @param userTheme Theme OID or theme settings object
+ * @returns Theme settings and error if it happened
+ */
+export declare function useThemeSettings(userTheme?: ThemeOid | ThemeSettings): [CompleteThemeSettings, null] | [null, Error];

package/dist/themes/legacy-design-settings.d.ts

@@ -0,0 +1,84 @@
+import { ThemeOid, CompleteThemeSettings } from '../types.js';
+/**
+ * Legacy analog of CompleteThemeSettings used in Sisense UI.
+ */
+export type LegacyDesignSettings = {
+    oid: ThemeOid;
+    dashboards: {
+        toolbarBackgroundColor: string;
+        toolbarSecondaryTextColor: string;
+        toolbarTextColor: string;
+        colorPaletteName: string;
+        navBackgroundColor: string;
+        navTextColor: string;
+        navTextHoverColor: string;
+        navHoverBackgroundColor: string;
+        panelBackgroundColor: string;
+        panelTitleTextColor: string;
+        widgetTextColor: string;
+        widgetSecondaryTextColor: string;
+        widgetBackgroundColor: string;
+        widgetTitleBackgroundColor: string;
+        widgetTitleColor: string;
+        widgetTitleAlignment: 'left' | 'center';
+        widgetSecondaryTitleColor: string;
+        widgetTitleDividerEnabled: boolean;
+        widgetTitleDividerColor: string;
+        widgetBorderEnabled: boolean;
+        widgetBorderColor: string;
+        widgetCornerRadius: 'none' | 'small' | 'medium' | 'large';
+        widgetShadow: 'none' | 'light' | 'medium' | 'dark';
+        widgetSpacing: 'none' | 'small' | 'medium' | 'large';
+        layoutBackgroundColor: string;
+    };
+    typography: {
+        customFontSelected: boolean;
+        fontFamily: string;
+        hyperlinkColor: string;
+        hyperlinkHoverColor: string;
+        predefinedFont: string;
+        primaryTextColor: string;
+        secondaryTextColor: string;
+    };
+    general: {
+        brandColor: string;
+        primaryButtonHoverColor: string;
+        primaryButtonTextColor: string;
+        secondaryButtonBaseColor: string;
+        secondaryButtonHoverColor: string;
+        secondaryButtonTextColor: string;
+        backgroundColor: string;
+    };
+    isDefault: boolean;
+    isSystem: boolean;
+    lastModified: string;
+    created: string;
+    name: string;
+};
+/**
+ * Palette object used in legacy (form Sisense UI).
+ */
+export type LegacyPalette = {
+    _id: string;
+    colors: string[];
+    name: string;
+    isDefault: boolean;
+    sortOrder: number;
+    isSystem: boolean;
+};
+/**
+ * Error object returned by server when palette is not found.
+ */
+export type LegacyPaletteError = {
+    message: string;
+    status: 'error';
+};
+/**
+ * Converts legacy (used in Sisense UI) design settings and it's palette object to CompleteThemeSettings.
+ *
+ * @param legacyDesignSettings - legacy design settings.
+ * @param legacyPalette - legacy palette object.
+ * @returns
+ */
+export declare function convertToThemeSettings(legacyDesignSettings: LegacyDesignSettings, legacyPalette: LegacyPalette): CompleteThemeSettings;
+export declare function getPaletteName(legacyDesignSettings: LegacyDesignSettings): string;

package/dist/themes/theme-loader.d.ts

@@ -0,0 +1,14 @@
+import type { HttpClient } from '@sisense/sdk-rest-client';
+import type { ThemeOid, CompleteThemeSettings } from '../types';
+import { type LegacyPalette } from './legacy-design-settings';
+/**
+ * Fetches theme settings from the Sisense instance and converts them to CompleteThemeSettings.
+ *
+ * @param themeOid - Theme oid.
+ * @param httpClient - Sisense REST API client.
+ * @returns CompleteThemeSettings from server.
+ *
+ * @internal
+ */
+export declare function getThemeSettingsByOid(themeOid: ThemeOid, httpClient: Pick<HttpClient, 'get'>): Promise<CompleteThemeSettings>;
+export declare function getLegacyPalette(paletteName: string, httpClient: Pick<HttpClient, 'get'>): Promise<LegacyPalette>;

package/dist/treemap-chart.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import { TreemapChartProps } from './props';
+/**
+ * A React component displaying hierarchical data in the form of nested rectangles.
+ * This type of chart can be used in different scenarios, for example,
+ * instead of a column chart if you have to compare too many categories and sub-categories.
+ * See [Treemap Chart](https://docs.sisense.com/main/SisenseLinux/treemap.htm) for more information.
+ *
+ * @example
+ * An example of using the component to visualize the `Sample ECommerce` data source:
+ * ```tsx
+ * <TreemapChart
+ *   dataSet={DM.DataSource}
+ *   dataOptions={{
+ *     category: [
+ *        {
+ *          column: DM.Commerce.Сondition,
+ *          isColored: true,
+ *        },
+ *        DM.Commerce.Date.Years
+ *      ],
+ *     value: [measures.sum(DM.Commerce.Quantity)],
+ *   }}
+ *   onDataPointClick= {(point, nativeEvent) => {
+ *     console.log('clicked', point, nativeEvent);
+ *   }}
+ * />
+ * ```
+ *
+ * <img src="media://treemap-chart-example-1.png" width="600px" />
+ * @param props - Treemap chart properties
+ * @returns Treemap Chart component
+ */
+export declare const TreemapChart: import("react").FunctionComponent<TreemapChartProps>;