@sisense/sdk-ui 0.11.3

package/dist/filters/components/date-filter/date-filter/date-filter.d.ts

@@ -0,0 +1,61 @@
+/// <reference types="react" />
+import { DateFilterRange } from '../types';
+export type { DateFilterRange };
+/**
+ * Props for {@link DateFilter}
+ *
+ * @internal
+ */
+export type DateRangeFilterProps = {
+    /**
+     * Callback function that is called when the date range is changed.
+     *
+     * @param filter - Date range filter
+     */
+    onChange: (filter: DateFilterRange) => void;
+    /**
+     * Selected date range.
+     */
+    value: DateFilterRange['filter'];
+    /**
+     * Limit of the date range that can be selected.
+     */
+    limit?: {
+        maxDate: string;
+        minDate: string;
+    };
+};
+/**
+ * Date Filter component for filtering data by date range.
+ *
+ * @example
+ * React example of configuring the limit date range as well as the selected date range.
+ * ```tsx
+ * const [{ filter }, setDateRangeFilter] = useState<DateFilterRange>({
+ *   type: 'date-range',
+ *   filter: {
+ *     from: '2019-06-08',
+ *     to: '2019-06-16',
+ *   },
+ * });
+ *
+ * return (
+ *   <DateFilter
+ *     onChange={(dateFilter) => {
+ *       setDateRangeFilter(dateFilter);
+ *     }}
+ *     limit={{
+ *       minDate: '2019-06-05',
+ *       maxDate: '2019-06-25',
+ *     }}
+ *     value={{ from: filter.from, to: filter.to }}
+ *   />
+ * );
+ * ```
+ *
+ * <img src="media://date-filter-example-1.png" width="800px" />
+ * @param props - Date Filter Props
+ * @returns Date Filter component
+ * @internal
+ */
+export declare function DateFilter(props: DateRangeFilterProps): JSX.Element;

package/dist/filters/components/date-filter/date-filter/date-range-calculator.d.ts

@@ -0,0 +1,8 @@
+import dayjs from 'dayjs';
+import { SelectorMode } from './calendar-date-selector.js';
+type DayjsDateRange = {
+    from: dayjs.Dayjs;
+    to: dayjs.Dayjs;
+};
+export declare function calculateNewDateRange(currentDateRange: DayjsDateRange, newSelectedDate: dayjs.Dayjs, selectorMode: SelectorMode): DayjsDateRange;
+export {};

package/dist/filters/components/date-filter/date-filter/index.d.ts

@@ -0,0 +1 @@
+export * from './date-filter.js';

package/dist/filters/components/date-filter/date-filter/quick-date-selection-buttons.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import dayjs from 'dayjs';
+type ButtonId = 'earliest' | 'today' | 'latest';
+type QuickDateSelectionButtonsProps = {
+    onDateSelected: (selectedDate: dayjs.Dayjs) => void;
+    enabledButtons: ButtonId[];
+    limit: {
+        maxDate: dayjs.Dayjs;
+        minDate: dayjs.Dayjs;
+    };
+};
+export declare const QuickDateSelectionButtons: (props: QuickDateSelectionButtonsProps) => JSX.Element;
+export {};

package/dist/filters/components/date-filter/date-filter/styled-date-picker.d.ts

@@ -0,0 +1,7 @@
+import { CompleteThemeSettings } from '../../../../types.js';
+import { type ReactDatePickerProps } from 'react-datepicker';
+export declare const StyledDatePicker: import("@emotion/styled").StyledComponent<ReactDatePickerProps<never, undefined> & {
+    theme: CompleteThemeSettings;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/dist/filters/components/date-filter/date-range-filter-tile/date-range-filter-tile.d.ts

@@ -0,0 +1,63 @@
+/// <reference types="react" />
+import { LevelAttribute, DataSource, Filter } from '@sisense/sdk-data';
+export interface DateRangeFilterTileProps {
+    /**
+     * Title of the filter tile
+     */
+    title: string;
+    /**
+     * Date level attribute the filter is based on
+     */
+    attribute: LevelAttribute;
+    /**
+     * Data source the query is run against - e.g. `Sample ECommerce`
+     *
+     * If not specified, the query will use the `defaultDataSource` specified in the parent {@link SisenseContextProvider} component.
+     */
+    dataSource?: DataSource;
+    /**
+     * Date range filter.
+     */
+    filter: Filter;
+    /**
+     * Earliest valid date in date range select. If not specified a query will run.
+     */
+    earliestDate?: string;
+    /**
+     * Last valid date in date range select. If not specified a query will run.
+     */
+    lastDate?: string;
+    /**
+     * Callback function that is called when the date range filter object should be updated.
+     *
+     * @param filter - Date range filter
+     */
+    onChange: (filter: Filter) => void;
+}
+/**
+ * Date Range Filter Tile component for filtering data by date range.
+ *
+ * @example
+ * React example of configuring the date min max values and handling onChange event.
+ * ```tsx
+ * const [dateRangeFilter, setDateRangeFilter] = useState<Filter>(
+ *   filters.dateRange(DM.Commerce.Date.Years),
+ * );
+ *
+ * return (
+ *   <DateRangeFilterTile
+ *     title="Date Range"
+ *     attribute={DM.Commerce.Date.Years}
+ *     filter={dateRangeFilter}
+ *     onChange={(filter: Filter) => {
+ *       setDateRangeFilter(filter);
+ *     }}
+ *   />
+ * );
+ * ```
+ *
+ * <img src="media://date-filter-example-1.png" width="800px" />
+ * @param props - Date Range Filter Tile Props
+ * @returns Date Range Filter Tile component
+ */
+export declare const DateRangeFilterTile: import("react").FunctionComponent<DateRangeFilterTileProps>;

package/dist/filters/components/date-filter/date-range-filter-tile/index.d.ts

@@ -0,0 +1 @@
+export * from './date-range-filter-tile';

package/dist/filters/components/date-filter/date-range-filter-tile/use-date-limits.d.ts

@@ -0,0 +1,7 @@
+import { DataSource, LevelAttribute } from '@sisense/sdk-data';
+type DateLimits = {
+    minDate?: string;
+    maxDate?: string;
+};
+export declare const useDateLimits: (userLimits: DateLimits, attribute: LevelAttribute, dataSource?: DataSource) => Required<DateLimits> | null;
+export {};

package/dist/filters/components/date-filter/index.d.ts

@@ -0,0 +1,2 @@
+export * from './date-filter';
+export * from './date-range-filter-tile';

package/dist/filters/components/date-filter/types.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @internal
+ */
+export type DateFilterRange = {
+    type: 'date-range';
+    filter: DateRange;
+};
+/**
+ * @internal
+ */
+export type DateRange = {
+    from?: string;
+    to?: string;
+};

package/dist/filters/components/filter-tile.d.ts

@@ -0,0 +1,14 @@
+import type { FunctionComponent, ReactNode } from 'react';
+interface Props {
+    title: string;
+    renderContent: (collapsed: boolean, tileDisabled: boolean) => ReactNode;
+    disabled: boolean;
+    onToggleDisabled: () => void;
+}
+/**
+ * Generic component that owns common functionality of a filter "tile" like
+ * collapsible content and an enable/disable toggle. This is intended to match
+ * the style of filter tiles in the right sidebar on a Sisense dashboard.
+ */
+export declare const FilterTile: FunctionComponent<Props>;
+export {};

package/dist/filters/components/icons/arrow-down-icon.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from 'react';
+export declare const ArrowDownIcon: (props: Pick<SVGProps<SVGElement>, 'className' | 'width' | 'height' | 'fill' | 'onClick'>) => JSX.Element;

package/dist/filters/components/icons/arrow-right-icon.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from 'react';
+export declare const ArrowRightIcon: (props: Pick<SVGProps<SVGElement>, 'className' | 'width' | 'height' | 'fill' | 'onClick'>) => JSX.Element;

package/dist/filters/components/icons/date-icon.d.ts

@@ -0,0 +1,5 @@
+import type { SVGProps } from 'react';
+export type DateIconProps = Pick<SVGProps<SVGElement>, 'className' | 'width' | 'height'> & {
+    iconColor?: string;
+};
+export declare const DateIcon: (props: DateIconProps) => JSX.Element;

package/dist/filters/components/icons/double-arrow-right-icon.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from 'react';
+export declare const DoubleArrowRightIcon: (props: Pick<SVGProps<SVGElement>, 'className' | 'width' | 'height' | 'fill' | 'onClick'>) => JSX.Element;

package/dist/filters/components/icons/index.d.ts

@@ -0,0 +1,7 @@
+export { MenuIcon } from './menu-icon';
+export { PencilIcon } from './pencil-icon';
+export { PlusIcon } from './plus-icon';
+export { SearchIcon } from './search-icon';
+export { TrashIcon } from './trash-icon';
+export { DateIcon } from './date-icon';
+export { ArrowDownIcon } from './arrow-down-icon';

package/dist/filters/components/icons/menu-icon.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from 'react';
+export declare const MenuIcon: (props: Pick<SVGProps<SVGElement>, 'className' | 'width' | 'height'>) => JSX.Element;

package/dist/filters/components/icons/pencil-icon.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from 'react';
+export declare const PencilIcon: (props: Pick<SVGProps<SVGElement>, 'className' | 'width' | 'height' | 'onClick'>) => JSX.Element;

package/dist/filters/components/icons/plus-icon.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from 'react';
+export declare const PlusIcon: (props: Pick<SVGProps<SVGElement>, 'className' | 'width' | 'height'>) => JSX.Element;

package/dist/filters/components/icons/search-icon.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from 'react';
+export declare const SearchIcon: (props: Pick<SVGProps<SVGElement>, 'className' | 'width' | 'height'>) => JSX.Element;

package/dist/filters/components/icons/trash-icon.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from 'react';
+export declare const TrashIcon: (props: Pick<SVGProps<SVGElement>, 'className' | 'width' | 'height'>) => JSX.Element;

package/dist/filters/components/member-filter-tile/basic-member-filter-tile.d.ts

@@ -0,0 +1,50 @@
+import { FunctionComponent } from 'react';
+import { Member, SelectedMember } from './members-reducer';
+/**
+ * Props for {@link BasicMemberFilterTile}
+ *
+ * @internal
+ */
+export interface BasicMemberFilterTileProps {
+    /** Title to display in the header */
+    title: string;
+    /** All selectable members */
+    allMembers: Member[];
+    /** Initial list of selected members. Defaults to empty list */
+    initialSelectedMembers?: SelectedMember[];
+    /** Callback that executes whenever the final list of active and selected members is updated */
+    onUpdateSelectedMembers?: (members: string[]) => void;
+    /** Configurable limit on size of allowedMembers */
+    maxAllowedMembers?: number;
+}
+/**
+ * UI component that, given a list of members to select from and a list of
+ * initial selections, can render selected members as "pills" and can also show
+ * a searchable list of members to choose from.
+ *
+ * @example
+ *
+ * The example below constructs a BasicMemberFilterTile with a list of all members and a list of initially selected members.
+ *
+ *
+ * ```tsx
+ *   const allMembers = ['United States', 'Canada', 'Mexico'].map((m) => ({ key: m, title: m }));
+ *   const selectedMembers = ['United States', 'Mexico'].map((m) => ({ key: m, title: m }));
+ *
+ *   return (
+ *     <div>
+ *       <BasicMemberFilterTile
+ *         title={'Country'}
+ *         allMembers={allMembers}
+ *         initialSelectedMembers={selectedMembers}
+ *       />
+ *     </div>
+ *   );
+ * ```
+ *
+ * <img src="media://basic-member-filter-tile-example-1.png" width="300px" />
+ * @param props - Basic member filter tile props
+ * @returns Basic member filter tile component
+ * @internal
+ */
+export declare const BasicMemberFilterTile: FunctionComponent<BasicMemberFilterTileProps>;

package/dist/filters/components/member-filter-tile/index.d.ts

@@ -0,0 +1,3 @@
+export { MemberFilterTile, type MemberFilterTileProps } from './member-filter-tile';
+export { BasicMemberFilterTile, type BasicMemberFilterTileProps } from './basic-member-filter-tile';
+export type { Member } from './members-reducer';

package/dist/filters/components/member-filter-tile/member-filter-tile.d.ts

@@ -0,0 +1,46 @@
+import type { Attribute, DataSource, Filter } from '@sisense/sdk-data';
+import { FunctionComponent } from 'react';
+/**
+ * Props for {@link MemberFilterTile}
+ */
+export interface MemberFilterTileProps {
+    /** Title for the filter tile, which is rendered into the header */
+    title: string;
+    /**
+     * Data source the query is run against - e.g. `Sample ECommerce`
+     *
+     * If not specified, the query will use the `defaultDataSource` specified in the parent {@link SisenseContextProvider} component.
+     */
+    dataSource?: DataSource;
+    /** Attribute to filter on. A query will be run to fetch all this attribute's members */
+    attribute: Attribute;
+    /** Source filter object. Caller is responsible for keeping track of filter state */
+    filter: Filter | null;
+    /** Callback indicating when the source member filter object should be updated */
+    onChange: (filter: Filter | null) => void;
+}
+/**
+ * UI component that allows the user to select members to include/exclude in a
+ * filter. A query is executed against the provided data source to fetch
+ * all members that are selectable.
+ *
+ * @example
+ * Below is an example for filtering countries in the `Country` dimension of the `Sample ECommerce` data model.
+ * ```tsx
+ * const [countryFilter, setCountryFilter] = useState<Filter | null>(null);
+ *
+ * return (
+ * <MemberFilterTile
+ *   title={'Country'}
+ *   attribute={DM.Country.Country}
+ *   filter={countryFilter}
+ *   onChange={setCountryFilter}
+ * />
+ * );
+ * ```
+ *
+ * <img src="media://member-filter-tile-example-1.png" width="300px" />
+ * @param props - Member filter tile props
+ * @returns Member filter tile component
+ */
+export declare const MemberFilterTile: FunctionComponent<MemberFilterTileProps>;

package/dist/filters/components/member-filter-tile/member-list.d.ts

@@ -0,0 +1,11 @@
+import { FunctionComponent } from 'react';
+import { Member, SelectedMember } from './members-reducer';
+export interface MemberListProps {
+    members: Member[];
+    selectedMembers: SelectedMember[];
+    onSelectMember: (member: Member) => void;
+    selectAllMembers: () => void;
+    clearAllMembers: () => void;
+    disabled: boolean;
+}
+export declare const MemberList: FunctionComponent<MemberListProps>;

package/dist/filters/components/member-filter-tile/members-reducer.d.ts

@@ -0,0 +1,32 @@
+export interface Member {
+    key: string;
+    title: string;
+}
+export interface SelectedMember extends Member {
+    inactive?: boolean;
+}
+type MembersState = {
+    members: Member[];
+    selectedMembers: SelectedMember[];
+};
+type SelectMemberAction = {
+    type: 'selectMember';
+    member: Member;
+};
+type DeselectMemberAction = {
+    type: 'deselectMember';
+    memberIndex: number;
+};
+type SelectAllMembersAction = {
+    type: 'selectAllMembers';
+};
+type ClearAllMembersAction = {
+    type: 'clearAllMembers';
+};
+type ToggleSelectedMemberAction = {
+    type: 'toggleSelectedMember';
+    memberKey: string;
+};
+export type MembersAction = SelectMemberAction | DeselectMemberAction | SelectAllMembersAction | ClearAllMembersAction | ToggleSelectedMemberAction;
+export declare function membersReducer(state: MembersState, action: MembersAction): MembersState;
+export {};

package/dist/filters/components/member-filter-tile/pill-section.d.ts

@@ -0,0 +1,9 @@
+import type { FunctionComponent } from 'react';
+import { SelectedMember } from './members-reducer';
+export interface PillSectionProps {
+    membersSize: number;
+    selectedMembers: SelectedMember[];
+    onToggleSelectedMember: (key: string) => void;
+    disabled: boolean;
+}
+export declare const PillSection: FunctionComponent<PillSectionProps>;

package/dist/filters/components/member-filter-tile/use-members.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { Member } from './members-reducer';
+interface Props {
+    initialMembers: Member[];
+    initialSelectedMembers: Member[];
+    onUpdateSelectedMembers?: (members: string[]) => void;
+    disabled: boolean;
+}
+export declare const useMembers: ({ initialMembers, initialSelectedMembers, onUpdateSelectedMembers, disabled, }: Props) => {
+    members: Member[];
+    selectedMembers: import("./members-reducer").SelectedMember[];
+    dispatch: import("react").Dispatch<import("./members-reducer").MembersAction>;
+};
+export {};

package/dist/filters/components/member-filter-tile/use-validate-members.d.ts

@@ -0,0 +1,8 @@
+import { Member, SelectedMember } from './members-reducer';
+interface Props {
+    allMembers: Member[];
+    initialSelectedMembers: SelectedMember[];
+    maxAllowedMembers: number;
+}
+export declare const useValidatedMembers: ({ allMembers, initialSelectedMembers, maxAllowedMembers, }: Props) => Member[];
+export {};

package/dist/filters/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components/member-filter-tile';
+export * from './components/date-filter';

package/dist/funnel-chart.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import { FunnelChartProps } from './props';
+/**
+ * A React component representing data progressively decreasing in size or quantity through a conical shape.
+ * See [Funnel Chart](https://docs.sisense.com/main/SisenseLinux/funnel-chart.htm) for more information.
+ *
+ * @example
+ * An example of visualizing sales funnel data:
+ * ```tsx
+ * <FunnelChart
+ *   dataSet={{
+ *     columns: [
+ *       { name: 'Stage', type: 'string' },
+ *       { name: 'Unique Users', type: 'number' },
+ *     ],
+ *     rows: [
+ *       ['Website visits', 15654],
+ *       ['Downloads', 4064],
+ *       ['Requested price list', 1987],
+ *       ['Invoice sent', 976],
+ *       ['Finalized', 846],
+ *     ],
+ *   }}
+ *   dataOptions={{
+ *     category: [
+ *       {
+ *         name: 'Stage',
+ *         type: 'string',
+ *       },
+ *     ],
+ *     value: [
+ *       {
+ *         name: 'Unique Users',
+ *         aggregation: 'sum',
+ *       },
+ *     ],
+ *   }}
+ * />
+ * ```
+ *
+ * <img src="media://funnel-chart-example-1.png" width="800"/>
+ *
+ * Note that the chart sorts the measure, `Unique Users`, in descending order by default.
+ * @param props - Funnel chart properties
+ * @returns Funnel Chart component
+ */
+export declare const FunnelChart: import("react").FunctionComponent<FunnelChartProps>;

package/dist/index.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @packageDocumentation
+ * @beta
+ */
+export { ClientApplication, createClientApplication } from './app/client-application';
+export * from './chart-data-options/types';
+export { Chart } from './chart';
+export { ThemeProvider } from './theme-provider';
+export { DashboardWidget } from './dashboard-widget/dashboard-widget';
+export * from './query-execution';
+export { executeQuery } from './query/execute-query';
+export { SisenseContextProvider } from './sisense-context/sisense-context-provider';
+export { DrilldownWidget } from './widgets/drilldown-widget';
+export { ChartWidget } from './widgets/chart-widget';
+export { TableWidget } from './widgets/table-widget';
+export { ContextMenu } from './widgets/common/context-menu';
+export { DrilldownBreadcrumbs } from './widgets/common/drilldown-breadcrumbs';
+export * from './line-chart';
+export * from './column-chart';
+export * from './area-chart';
+export * from './pie-chart';
+export * from './bar-chart';
+export * from './funnel-chart';
+export * from './polar-chart';
+export * from './scatter-chart';
+export * from './indicator-chart';
+export * from './table';
+export * from './treemap-chart';
+export * from './sisense-context/custom-sisense-context-provider';
+export * from './theme-provider/custom-theme-provider';
+export { getThemeSettingsByOid } from './themes/theme-loader';
+export { getDefaultThemeSettings } from './chart-options-processor/theme-option-service';
+export * from './props';
+export * from './types';
+export * from './filters';