@sisense/sdk-ui 0.11.3

package/dist/utils/color/color-interpolation.d.ts

@@ -0,0 +1,37 @@
+import Color from 'colorjs.io';
+export type ColorArg = string | Color;
+export declare const toColor: (color: ColorArg) => Color;
+export declare const toString: (color: Color) => string;
+export declare const toRangeFn: (...colorArgs: ColorArg[]) => (percentage: number) => string;
+export declare const toSteps: (numSteps: number, ...colorArgs: ColorArg[]) => string[];
+export declare const toGray: (color: ColorArg) => string;
+export declare const toAvg: (color1: ColorArg, color2: ColorArg) => string;
+export declare const hueDiff: (color1: ColorArg, color2: ColorArg) => number;
+/**
+ * Scales the color's brightness by the given percentage.
+ *
+ * @param colorArg - The color to scale, in any valid color format (e.g., hex, RGB, HSL).
+ * @param percent - The percentage by which to scale the color's brightness.
+ *                 A positive value will increase the brightness, while a negative value will decrease it.
+ *                 The percentage should be a number between -1 and 1, where -1 represents a 100% decrease
+ *                 in brightness (i.e., completely black) and 1 represents a 100% increase in brightness
+ *                 (i.e., completely white).
+ * @returns The scaled color as a string.
+ */
+export declare const scaleBrightness: (colorArg: ColorArg, percent: number) => string;
+export declare const getRgbValuesFromColor: (color: Color) => {
+    R: number;
+    G: number;
+    B: number;
+};
+export declare const getDarkFactor: (color: Color) => number;
+export declare function isBright(color: Color): boolean;
+export declare const getSlightlyDifferentColor: (colorString: string, percent?: number, opacity?: number) => string;
+/**
+ * Applies opacity to a color
+ *
+ * @param color - color to apply opacity to
+ * @param opacity - opacity to apply (from 0 to 1)
+ * @returns - color with opacity applied
+ */
+export declare const applyOpacity: (color: string, opacity: number) => string;

package/dist/utils/color/index.d.ts

@@ -0,0 +1 @@
+export * from './color-interpolation';

package/dist/utils/data-limit-warning.d.ts

@@ -0,0 +1,2 @@
+export declare const seriesSliceWarning: (seriesLength: number, seriesCapacity: number) => string;
+export declare const categoriesSliceWarning: (axis: string, categoriesLength: number, categoriesCapacity: number) => string;

package/dist/utils/dedupe.d.ts

@@ -0,0 +1 @@
+export declare const dedupe: <T>(items: T[], id: (item: T) => string) => T[];

package/dist/utils/filters-comparator.d.ts

@@ -0,0 +1,11 @@
+import { Filter } from '@sisense/sdk-data';
+/**
+ * Checks if the filters have changed by deep comparison.
+ *
+ * @param prevFilters - Previous filters
+ * @param newFilters - New filters
+ * @returns Whether the filters have changed
+ * @remarks
+ * The function ignores randomly generated names of the filters.
+ */
+export declare function isFiltersChanged(prevFilters: Filter[] | undefined, newFilters: Filter[] | undefined): boolean;

package/dist/utils/utility-types.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Generic utility type that allows you to merge union type
+ *
+ * @example
+ * type T1 = {
+ *   a: string;
+ *   b?: number;
+ * };
+ * type T2 = {
+ *   a: string;
+ *   c: number;
+ * };
+ * type T3 = {
+ *   a: number;
+ *   d: string;
+ * }
+ * type MergedT = Merge<T1 | T2 | T3>;
+ * /*
+ * {
+ *   a: string | number;
+ *   b?: number;
+ *   c?: number;
+ *   d?: string;
+ * };
+ */
+export type Merge<T extends object> = {
+    [k in CommonKeys<T>]: PickTypeOf<T, k>;
+} & {
+    [k in NonCommonKeys<T>]?: PickTypeOf<T, k>;
+};
+type CommonKeys<T extends object> = keyof T;
+type PickType<T, K extends AllKeys<T>> = T extends {
+    [k in K]?: any;
+} ? T[K] : undefined;
+type AllKeys<T> = T extends any ? keyof T : never;
+type NonCommonKeys<T extends object> = Subtract<AllKeys<T>, CommonKeys<T>>;
+type Subtract<A, C> = A extends C ? never : A;
+type PickTypeOf<T, K extends string | number | symbol> = K extends AllKeys<T> ? PickType<T, K> : never;
+export {};

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/dist/widgets/chart-widget.d.ts

@@ -0,0 +1,30 @@
+import { type FunctionComponent } from 'react';
+import { ChartWidgetProps } from '../props';
+/**
+ * The Chart Widget component extending the {@link Chart} component to support advanced BI
+ * capabilities such as drilldown.
+ *
+ * @example
+ * Example of using the `ChartWidget` component to
+ * plot a bar chart of the `Sample ECommerce` data source hosted in a Sisense instance.
+ * Drill-down capability is enabled.
+ * ```tsx
+ * <ChartWidget
+ *   dataSource={DM.DataSource}
+ *   chartType="bar"
+ *   dataOptions={{
+ *     category: [DM.Category.Category],
+ *     value: [measures.sum(DM.Commerce.Revenue)],
+ *     breakBy: [],
+ *   }}
+ *   drilldownOptions={{
+ *     drilldownDimensions: [DM.Commerce.AgeRange, DM.Commerce.Gender, DM.Commerce.Condition],
+ *   }}
+ * />
+ * ```
+ *
+ * <img src="media://chart-widget-with-drilldown-example-1.png" width="800px" />
+ * @param props - ChartWidget properties
+ * @returns ChartWidget component representing a chart type as specified in `ChartWidgetProps.`{@link ChartWidgetProps.chartType}
+ */
+export declare const ChartWidget: FunctionComponent<ChartWidgetProps>;

package/dist/widgets/common/context-menu.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ContextMenuProps } from '../../props';
+export declare const ContextMenu: ({ position, closeContextMenu, itemSections, children, }: ContextMenuProps) => JSX.Element;

package/dist/widgets/common/custom-drilldown.d.ts

@@ -0,0 +1,20 @@
+import { DataPoint, StyledColumn, DrilldownSelection } from '../../types.js';
+import { Attribute, Column, MembersFilter } from '@sisense/sdk-data';
+export declare const useCustomDrilldown: ({ drilldownDimensions, initialDimension, }: {
+    drilldownDimensions: Attribute[];
+    initialDimension: Column | StyledColumn;
+}) => {
+    drilldownFilters: MembersFilter[];
+    drilldownFiltersDisplayValues: string[][];
+    drilldownDimension: Attribute;
+    selectDrilldown: (points: DataPoint[], nextDimension: Attribute) => void;
+    sliceDrilldownSelections: (i: number) => void;
+    clearDrilldownSelections: () => void;
+    drilldownSelections: DrilldownSelection[];
+    availableDrilldowns: Attribute[];
+};
+export declare const processDrilldownSelections: (drilldownSelections: DrilldownSelection[], initialDimension: Column | StyledColumn | null) => {
+    drilldownFilters: MembersFilter[];
+    drilldownFiltersDisplayValues: string[][];
+    drilldownDimension: Attribute;
+};

package/dist/widgets/common/drilldown-breadcrumbs/drilldown-breadcrumbs.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { DrilldownBreadcrumbsProps } from '../../../props';
+export declare const BREADCRUMBS_BORDER_COLOR = "#F2F2F2";
+export declare const DrilldownBreadcrumbs: React.FC<DrilldownBreadcrumbsProps>;

package/dist/widgets/common/drilldown-breadcrumbs/index.d.ts

@@ -0,0 +1 @@
+export { DrilldownBreadcrumbs } from './drilldown-breadcrumbs';

package/dist/widgets/common/drilldown-breadcrumbs/use-buttons.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Attribute } from '@sisense/sdk-data';
+import { Dispatch, SetStateAction } from 'react';
+interface ButtonsProps {
+    clearDrilldownSelections: () => void;
+    currentDimension: Attribute;
+    isHovered: boolean;
+    setIsHovered: Dispatch<SetStateAction<boolean>>;
+    themeProps: ThemeProps;
+}
+interface ThemeProps {
+    primaryTextColor: string;
+    secondaryTextColor: string;
+    fontFamily: string;
+    backgroundColor: string;
+    brandColor: string;
+    primaryButtonTextColor: string;
+    chartBackgroundColor: string;
+    activeDrillBackgroundColor: string;
+    activeDrillHoverBackgroundColor: string;
+}
+interface Buttons {
+    CancelButton: React.FC;
+    CurrentDrillButton: React.FC;
+}
+declare const useButtons: ({ clearDrilldownSelections, currentDimension, setIsHovered, themeProps, }: ButtonsProps) => Buttons;
+export default useButtons;

package/dist/widgets/common/drilldown-breadcrumbs/use-popper.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+interface DrilldownBreadcrumbsThemeProps {
+    popperParams?: {
+        filterDisplayValues: string[];
+        anchorEl: HTMLElement;
+    } | null;
+    currentDimension: {
+        expression: string;
+    };
+    themeProps: ThemeProps;
+}
+interface ThemeProps {
+    primaryTextColor: string;
+    secondaryTextColor: string;
+    fontFamily: string;
+    backgroundColor: string;
+    brandColor: string;
+    primaryButtonTextColor: string;
+    chartBackgroundColor: string;
+    activeDrillBackgroundColor: string;
+    activeDrillHoverBackgroundColor: string;
+}
+declare const DrillPopper: React.FC<DrilldownBreadcrumbsThemeProps>;
+export default DrillPopper;

package/dist/widgets/common/drilldown-breadcrumbs/use-theme-for-breadcrumbs.d.ts

@@ -0,0 +1,11 @@
+export declare const useThemeForBreadcrumbs: () => {
+    primaryTextColor: string;
+    secondaryTextColor: string;
+    fontFamily: string;
+    backgroundColor: string;
+    brandColor: string;
+    primaryButtonTextColor: string;
+    chartBackgroundColor: string;
+    activeDrillBackgroundColor: string;
+    activeDrillHoverBackgroundColor: string;
+};

package/dist/widgets/common/drilldown.d.ts

@@ -0,0 +1,32 @@
+import { ChartDataOptions, DataPoint, DrilldownOptions, DrilldownSelection } from '../../types';
+import { Attribute, MembersFilter } from '@sisense/sdk-data';
+export declare const useDrilldown: (dataOptions: ChartDataOptions, drilldownOptions?: DrilldownOptions) => {
+    drilldownFilters: never[];
+    drilldownFiltersDisplayValues: never[];
+    drilldownDimension: undefined;
+    dataOptionsWithDrilldown: ChartDataOptions;
+    selectDrilldown: (points: DataPoint[], nextDimension: Attribute) => void;
+    sliceDrilldownSelections: (i: number) => void;
+    clearDrilldownSelections: () => void;
+    drilldownSelections: DrilldownSelection[];
+    availableDrilldowns: Attribute[];
+} | {
+    drilldownFilters: MembersFilter[];
+    drilldownFiltersDisplayValues: string[][];
+    drilldownDimension: Attribute;
+    dataOptionsWithDrilldown: {
+        category: (import("@sisense/sdk-data").Column | import("../../types").StyledColumn)[];
+        value: (import("@sisense/sdk-data").MeasureColumn | import("@sisense/sdk-data").CalculatedMeasureColumn | import("../../types").StyledMeasureColumn)[];
+        breakBy: (import("@sisense/sdk-data").Column | import("../../types").StyledColumn)[];
+        seriesToColorMap?: import("../../types").ValueToColorMap | undefined;
+    } | {
+        category: (import("@sisense/sdk-data").Column | import("../../types").StyledColumn)[];
+        value: (import("@sisense/sdk-data").MeasureColumn | import("@sisense/sdk-data").CalculatedMeasureColumn | import("../../types").StyledMeasureColumn)[];
+        seriesToColorMap?: import("../../types").ValueToColorMap | undefined;
+    };
+    selectDrilldown: (points: DataPoint[], nextDimension: Attribute) => void;
+    sliceDrilldownSelections: (i: number) => void;
+    clearDrilldownSelections: () => void;
+    drilldownSelections: DrilldownSelection[];
+    availableDrilldowns: Attribute[];
+};

package/dist/widgets/common/use-widget-drilldown.d.ts

@@ -0,0 +1,2 @@
+import { ChartWidgetProps } from '../../props';
+export declare const useWidgetDrilldown: (props: ChartWidgetProps) => ChartWidgetProps;

package/dist/widgets/common/widget-header.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { WidgetStyleOptions } from '../../types';
+interface WidgetHeaderProps {
+    onRefresh: () => void;
+    title?: string;
+    description?: string;
+    dataSetName?: string;
+    styleOptions?: WidgetStyleOptions['header'];
+}
+export declare const WidgetHeader: React.FC<WidgetHeaderProps>;
+export {};

package/dist/widgets/common/widget-style-utils.d.ts

@@ -0,0 +1,13 @@
+import { WidgetStyleOptions } from '../../types';
+export declare enum WidgetCornerRadius {
+    'Large' = "30px",
+    'Medium' = "20px",
+    'Small' = "10px"
+}
+export declare enum WidgetSpaceAround {
+    'Large' = "15px",
+    'Medium' = "10px",
+    'Small' = "5px",
+    'None' = "0px"
+}
+export declare const getShadowValue: (widgetStyleOptions: WidgetStyleOptions | undefined) => string;

package/dist/widgets/drilldown-widget.d.ts

@@ -0,0 +1,49 @@
+/// <reference types="react" />
+import { DrilldownWidgetProps } from '../props';
+/**
+ * React component designed to add drilldown functionality to any type of chart
+ *
+ * It acts as a wrapper around a given chart component, enhancing it with drilldown capabilities
+ *
+ * The widget offers several features including:
+ * - A context menu for initiating drilldown actions (can be provided as a custom component)
+ * - Breadcrumbs that not only allow for drilldown selection slicing but also
+ * provide an option to clear the selection (can be provided as a custom component)
+ * - Filters specifically created for drilldown operation
+ * - An option to navigate to the next drilldown dimension
+ *
+ * When an `initialDimension` is specified, the `drilldownDimension` will automatically inherit its value,
+ * even before any points on the chart are selected.
+ * This allows for complete control over the chart's dimensions to be handed over to the DrilldownWidget
+ *
+ * @example
+ * Example of using the `DrilldownWidget` component to
+ * plot a custom React component that uses the `ExecuteQuery` component to
+ * query the `Sample ECommerce` data source hosted in a Sisense instance.
+ * ```tsx
+ * <DrilldownWidget
+ *   drilldownDimensions={[DM.Commerce.AgeRange, DM.Commerce.Gender, DM.Commerce.Condition]}
+ *   initialDimension={DM.Category.Category}
+ * >
+ *   {({ drilldownFilters, drilldownDimension, onDataPointsSelected, onContextMenu }) => (
+ *     <ExecuteQuery
+ *       dataSource={DM.DataSource}
+ *       dimensions={[drilldownDimension]}
+ *       measures={measure.sum(DM.Commerce.Revenue)}
+ *       filters={drilldownFilters}
+ *     >
+ *       {(data) => (
+ *         <MyCustomChart
+ *           rawData={data}
+ *           onContextMenu={onContextMenu}
+ *           onDataPointsSelected={onDataPointsSelected}
+ *         />
+ *       )}
+ *     </ExecuteQuery>
+ *   )}
+ * </DrilldownWidget>
+ * ```
+ * @param props - DrilldownWidget properties
+ * @returns DrilldownWidget wrapper component
+ */
+export declare const DrilldownWidget: ({ drilldownDimensions, initialDimension, config, children, }: DrilldownWidgetProps) => JSX.Element;

package/dist/widgets/table-widget.d.ts

@@ -0,0 +1,23 @@
+import { type FunctionComponent } from 'react';
+import { TableWidgetProps } from '../props';
+/**
+ * The TableWidget component extending the {@link Table} component to support advanced BI
+ * capabilities such as header.
+ *
+ * @example
+ * Example of using the `Widget` component to
+ * plot a bar chart of the `Sample ECommerce` data source hosted in a Sisense instance.
+ * Drill-down capability is enabled.
+ * ```tsx
+ * <TableWidget
+ *   dataSource={DM.DataSource}
+ *   dataOptions={{
+ *     columns: [DM.Category.Category]
+ *   }}
+ * />
+ * ```
+ * @param props - Table Widget properties
+ * @returns Widget component representing a table
+ * @internal
+ */
+export declare const TableWidget: FunctionComponent<TableWidgetProps>;

package/package.json

@@ -0,0 +1,110 @@
+{
+  "name": "@sisense/sdk-ui",
+  "version": "0.11.3",
+  "type": "module",
+  "exports": "./dist/index.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "author": "Sisense",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "dependencies": {
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@mui/material": "^5.11.6",
+    "@sisense/sdk-common": "^0.11.3",
+    "@sisense/sdk-data": "^0.11.3",
+    "@sisense/sdk-query-client": "^0.11.3",
+    "@sisense/sdk-rest-client": "^0.11.3",
+    "@sisense/sisense-charts": "5.1.0-alpha-04052758.0",
+    "classnames": "^2.3.2",
+    "colorjs.io": "^0.4.3",
+    "date-fns": "^2.29.3",
+    "date-fns-tz": "^2.0.0",
+    "dayjs": "^1.11.7",
+    "fixed-data-table-2": "^1.2.18",
+    "guid-typescript": "^1.0.9",
+    "highcharts-react-official": "^3.2.1",
+    "immer": "^10.0.2",
+    "lodash": "^4.17.21",
+    "merge-deep": "^3.0.3",
+    "react-datepicker": "^4.16.0",
+    "react-number-format": "^5.1.0",
+    "ts-deepmerge": "6.0.2",
+    "ts-essentials": "^9.3.0",
+    "whatwg-fetch": "^3.6.2"
+  },
+  "scripts": {
+    "dev": "vite",
+    "type-check": "tsc --noEmit",
+    "build": "run type-check && vite build --mode development",
+    "build:prod": "run type-check && vite build",
+    "clean": "rm -rf ./dist && rm -rf ./coverage && rm -rf tsconfig.tsbuildinfo",
+    "lint": "eslint . --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "vitest": "run -T vitest",
+    "test": "TZ=utc run vitest run",
+    "test:update": "TZ=utc run vitest -u",
+    "test:watch": "TZ=utc run vitest watch",
+    "test:coverage": "TZ=utc run vitest run --coverage",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "files": [
+    "dist/**/*",
+    "esm/**/*"
+  ],
+  "devDependencies": {
+    "@babel/preset-env": "^7.20.2",
+    "@mui/icons-material": "^5.14.9",
+    "@mui/x-data-grid": "^6.16.0",
+    "@mui/x-data-grid-generator": "^6.16.0",
+    "@mui/x-data-grid-pro": "^6.16.0",
+    "@storybook/addon-actions": "7.0.24",
+    "@storybook/addon-docs": "7.0.24",
+    "@storybook/addon-essentials": "7.0.24",
+    "@storybook/addon-interactions": "7.0.24",
+    "@storybook/addon-links": "7.0.24",
+    "@storybook/addon-storysource": "7.0.24",
+    "@storybook/react": "7.0.24",
+    "@storybook/react-vite": "7.0.24",
+    "@storybook/testing-library": "0.2.0",
+    "@swc-node/register": "^1.6.5",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@types/fixed-data-table-2": "^0.8.8",
+    "@types/lodash": "^4.14.194",
+    "@types/react": "18.2.0",
+    "@types/react-datepicker": "^4.11.2",
+    "@types/react-dom": "18.2.0",
+    "@types/react-plotly.js": "^2.6.0",
+    "@vitejs/plugin-react-swc": "^3.3.0",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.40.0",
+    "jsdom": "^22.1.0",
+    "plotly.js": "^2.25.2",
+    "postcss": "^8.4.31",
+    "prettier": "2.8.4",
+    "react": "18.2.0",
+    "react-dom": "^18.2.0",
+    "react-plotly.js": "^2.6.0",
+    "sass": "1.58.3",
+    "storybook": "7.0.24",
+    "tailwindcss": "^3.3.1",
+    "typescript": "4.8.4",
+    "vite": "4.1.4",
+    "vite-plugin-checker": "^0.6.1",
+    "vite-plugin-css-injected-by-js": "3.0.1",
+    "vite-plugin-dts": "^2.3.0",
+    "vitest-canvas-mock": "^0.3.2",
+    "vitest-fetch-mock": "^0.2.2"
+  },
+  "peerDependencies": {
+    "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  }
+}