@sisense/sdk-ui 0.16.0 → 1.1.0

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

@@ -7,7 +7,6 @@ import { type LegacyPalette } from './legacy-design-settings';
  * @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>;

package/dist/translation/resources/en.d.ts

@@ -18,6 +18,7 @@ export declare const translation: {
         };
         themeNotFound: string;
         paletteNotFound: string;
+        chartTypeNotSupported: string;
         unsupportedWidgetType: string;
         sisenseContextNotFound: string;
         dashboardInvalidIdentifier: string;
@@ -55,5 +56,29 @@ export declare const translation: {
         byMeasure: string;
         by: string;
     };
+    dateFilter: {
+        last: string;
+        next: string;
+        from: string;
+        count: string;
+        today: string;
+        days: string;
+        weeks: string;
+        months: string;
+        quarters: string;
+        years: string;
+        earliestDate: string;
+        latestDate: string;
+        todayOutOfRange: string;
+    };
+    boxplot: {
+        tooltip: {
+            whiskers: string;
+            box: string;
+            min: string;
+            median: string;
+            max: string;
+        };
+    };
 };
 export type TranslationDictionary = typeof translation;

package/dist/translation/resources/index.d.ts

@@ -22,6 +22,7 @@ export declare const resources: {
             };
             themeNotFound: string;
             paletteNotFound: string;
+            chartTypeNotSupported: string;
             unsupportedWidgetType: string;
             sisenseContextNotFound: string;
             dashboardInvalidIdentifier: string;
@@ -59,6 +60,30 @@ export declare const resources: {
             byMeasure: string;
             by: string;
         };
+        dateFilter: {
+            last: string;
+            next: string;
+            from: string;
+            count: string;
+            today: string;
+            days: string;
+            weeks: string;
+            months: string;
+            quarters: string;
+            years: string;
+            earliestDate: string;
+            latestDate: string;
+            todayOutOfRange: string;
+        };
+        boxplot: {
+            tooltip: {
+                whiskers: string;
+                box: string;
+                min: string;
+                median: string;
+                max: string;
+            };
+        };
     };
     uk: {
         errors: {
@@ -80,6 +105,7 @@ export declare const resources: {
             };
             themeNotFound: string;
             paletteNotFound: string;
+            chartTypeNotSupported: string;
             unsupportedWidgetType: string;
             sisenseContextNotFound: string;
             dashboardInvalidIdentifier: string;
@@ -117,5 +143,29 @@ export declare const resources: {
             byMeasure: string;
             by: string;
         };
+        dateFilter: {
+            last: string;
+            next: string;
+            from: string;
+            count: string;
+            today: string;
+            days: string;
+            weeks: string;
+            months: string;
+            quarters: string;
+            years: string;
+            earliestDate: string;
+            latestDate: string;
+            todayOutOfRange: string;
+        };
+        boxplot: {
+            tooltip: {
+                whiskers: string;
+                box: string;
+                min: string;
+                median: string;
+                max: string;
+            };
+        };
     };
 };

package/dist/treemap-chart.d.ts

@@ -13,12 +13,12 @@ import { TreemapChartProps } from './props';
  *   dataOptions={{
  *     category: [
  *        {
- *          column: DM.Commerce.Сondition,
+ *          column: DM.Commerce.Condition,
  *          isColored: true,
  *        },
  *        DM.Commerce.Date.Years
  *      ],
- *     value: [measures.sum(DM.Commerce.Quantity)],
+ *     value: [measureFactory.sum(DM.Commerce.Quantity)],
  *   }}
  *   onDataPointClick= {(point, nativeEvent) => {
  *     console.log('clicked', point, nativeEvent);

package/dist/types.d.ts

@@ -1,17 +1,18 @@
 /// <reference types="react" />
 import { Attribute, MembersFilter } from '@sisense/sdk-data';
 import { DeepRequired } from 'ts-essentials';
-import { AreaSubtype, LineSubtype, PieSubtype, PolarSubtype, StackableSubtype } from './chart-options-processor/subtype-to-design-options';
+import { AreaSubtype, BoxplotSubtype, LineSubtype, PieSubtype, PolarSubtype, StackableSubtype } from './chart-options-processor/subtype-to-design-options';
 import { IndicatorComponents } from './chart-options-processor/translations/design-options';
 import { FunnelDirection, FunnelSize, FunnelType } from './chart-options-processor/translations/funnel-plot-options';
 import { ScatterMarkerSize } from './chart-options-processor/translations/scatter-plot-options';
-import { CartesianChartType, ScatterChartType, CategoricalChartType, IndicatorChartType, TableType } from './chart-options-processor/translations/types';
+import { CartesianChartType, ScatterChartType, CategoricalChartType, IndicatorChartType, TableType, AreamapChartType, BoxplotChartType, ScattermapChartType } from './chart-options-processor/translations/types';
 import { DataPointsEventHandler } from './props';
+import { LegendPosition } from './chart-options-processor/translations/legend-section';
 export type { AppConfig } from './app/client-application';
 export type { DateConfig } from './query/date-formats';
-export type { CartesianChartDataOptions, CategoricalChartDataOptions, ChartDataOptions, ScatterChartDataOptions, IndicatorDataOptions, StyledColumn, StyledMeasureColumn, } from './chart-data-options/types';
-export type { DataColorCondition, ConditionalDataColorOptions, DataColorOptions, RangeDataColorOptions, UniformDataColorOptions, } from './chart-data/series-data-color-service/types';
-export type { CartesianChartType, CategoricalChartType, ScatterChartType, IndicatorChartType, TableType, AreaSubtype, LineSubtype, PieSubtype, PolarSubtype, StackableSubtype, IndicatorComponents, ScatterMarkerSize, };
+export type { CartesianChartDataOptions, CategoricalChartDataOptions, ChartDataOptions, ScatterChartDataOptions, IndicatorChartDataOptions, StyledColumn, StyledMeasureColumn, } from './chart-data-options/types';
+export type { DataColorCondition, ConditionalDataColorOptions, DataColorOptions, RangeDataColorOptions, UniformDataColorOptions, } from './chart-data/data-coloring/types';
+export type { CartesianChartType, CategoricalChartType, ScatterChartType, IndicatorChartType, BoxplotChartType, ScattermapChartType, AreamapChartType, TableType, AreaSubtype, LineSubtype, PieSubtype, PolarSubtype, StackableSubtype, BoxplotSubtype, IndicatorComponents, ScatterMarkerSize, LegendPosition, };
 export type { MonthOfYear, DayOfWeek, DateLevel } from './query/date-formats/apply-date-format';
 /**
  * @internal
@@ -60,7 +61,7 @@ export type Legend = {
     /** Boolean flag that defines if legend should be shown on the chart */
     enabled: boolean;
     /** Position of the legend */
-    position?: string;
+    position?: LegendPosition;
 };
 /** Configuration that defines behavior of data labels on chart */
 export type Labels = {
@@ -372,10 +373,47 @@ export interface SunburstStyleOptions extends BaseStyleOptions {
         mode?: 'value' | 'contribution';
     };
 }
+/** Configuration options that define functional style of the various elements of {@link BoxplotChart} */
+export interface BoxplotStyleOptions extends BaseStyleOptions, BaseAxisStyleOptions {
+    /** Subtype of {@link BoxplotChart}*/
+    subtype?: BoxplotSubtype;
+}
+/**
+ * Type of map to display on {@link AreamapChart}
+ */
+export type AreamapType = 'world' | 'usa';
+/**
+ * Configuration options that define functional style of the various elements of {@link AreamapChart}
+ */
+export interface AreamapStyleOptions extends Pick<BaseStyleOptions, 'width' | 'height'> {
+    /** Type of map to display on {@link AreamapChart} */
+    mapType?: AreamapType;
+}
+/**
+ * Markers style configuration of Scattermap chart
+ */
+export type ScattermapMarkers = {
+    /** Specifies the fill style of the markers */
+    fill?: 'filled' | 'filled-light' | 'hollow' | 'hollow-bold';
+    /** Specifies the size configuration for the markers */
+    size?: {
+        /** The default size of the markers */
+        defaultSize?: number;
+        /** The minimum size of the markers when using a "size" data field */
+        minSize?: number;
+        /** The maximum size of the markers when using a "size" data field */
+        maxSize?: number;
+    };
+};
+/** Configuration options that define functional style of the various elements of {@link ScattermapChart} */
+export interface ScattermapStyleOptions extends Pick<BaseStyleOptions, 'width' | 'height'> {
+    subtype?: never;
+    markers?: ScattermapMarkers;
+}
 /**
  * Configuration options that define functional style of the various elements of chart.
  */
-export type StyleOptions = LineStyleOptions | AreaStyleOptions | StackableStyleOptions | PieStyleOptions | FunnelStyleOptions | PolarStyleOptions | IndicatorStyleOptions | ScatterStyleOptions | TreemapStyleOptions | SunburstStyleOptions;
+export type ChartStyleOptions = LineStyleOptions | AreaStyleOptions | StackableStyleOptions | PieStyleOptions | FunnelStyleOptions | PolarStyleOptions | IndicatorStyleOptions | ScatterStyleOptions | TreemapStyleOptions | SunburstStyleOptions | BoxplotStyleOptions | AreamapStyleOptions | ScattermapStyleOptions;
 /** Mapping of each of the chart value series to colors. */
 export type ValueToColorMap = {
     [value: string]: string;
@@ -387,7 +425,7 @@ export type MultiColumnValueToColorMap = {
 /**
  * Chart type of one of the supported chart families
  */
-export type ChartType = CartesianChartType | CategoricalChartType | ScatterChartType | IndicatorChartType;
+export type ChartType = CartesianChartType | CategoricalChartType | ScatterChartType | IndicatorChartType | AreamapChartType | BoxplotChartType | ScattermapChartType;
 /**
  * Series chart type, which is used with {@link StyledMeasureColumn} to customize
  * series in a mixed chart.
@@ -534,6 +572,34 @@ export interface WidgetStyleOptions {
         renderToolbar?: (onRefresh: () => void) => JSX.Element;
     };
 }
+/** Style settings defining the look and feel of {@link DashboardWidget} */
+export interface DashboardWidgetStyleOptions extends WidgetStyleOptions {
+    /**
+     * Total width of the component, which is considered in the following order of priority:
+     *
+     * 1. Value passed to this property (in pixels)
+     * 2. Width of the container wrapping this component
+     * 3. Default value as specified per chart type
+     *
+     */
+    width?: number;
+    /**
+     * Total height of the component, which is considered in the following order of priority:
+     *
+     * 1. Value passed to this property (in pixels).
+     * 2. Height of the container wrapping this component
+     * 3. Default value as specified per chart type
+     */
+    height?: number;
+}
+/** Style settings defining the look and feel of {@link ChartWidget} */
+export type ChartWidgetStyleOptions = ChartStyleOptions & WidgetStyleOptions;
+/**
+ * Style settings defining the look and feel of TableWidget}
+ *
+ * @internal
+ */
+export type TableWidgetStyleOptions = TableStyleOptions & WidgetStyleOptions;
 /**
  * Runs type guard check for ThemeOid.
  *
@@ -581,6 +647,15 @@ export type ScatterDataPoint = {
     breakByPoint?: string;
     breakByColor?: string;
 };
+export type BoxplotDataPoint = {
+    boxMin: number;
+    boxMedian: number;
+    boxMax: number;
+    whiskerMin: number;
+    whiskerMax: number;
+    categoryValue?: string | number;
+    categoryDisplayValue?: string;
+};
 /**
  * This is the minimum definition of Highcharts
  * events, Series, and Point that we require. As
@@ -629,6 +704,11 @@ export type HighchartsPoint = {
         custom: {
             number1?: number;
         };
+        q1?: number;
+        median?: number;
+        q3?: number;
+        low?: number;
+        high?: number;
     };
     custom: {
         maskedBreakByPoint?: string;
@@ -638,6 +718,7 @@ export type HighchartsPoint = {
     };
     series: {
         initialType: string;
+        type: string;
         options: {
             custom?: {
                 rawValue?: string | number[];

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

@@ -1,4 +1,4 @@
-import { Filter } from '@sisense/sdk-data';
+import { Filter, FilterRelation } from '@sisense/sdk-data';
 /**
  * Checks if the filters have changed by deep comparison.
  *
@@ -9,3 +9,15 @@ import { Filter } from '@sisense/sdk-data';
  * The function ignores randomly generated names of the filters.
  */
 export declare function isFiltersChanged(prevFilters: Filter[] | undefined, newFilters: Filter[] | undefined): boolean;
+/**
+ * Checks if filter relations have changed by deep comparison.
+ *
+ * @param prevFilters - Previous filters
+ * @param newFilters - New filters
+ * @param prevRelations - Previous relations
+ * @param newRelations - New relations
+ * @returns Whether filter relations have changed
+ * @remarks
+ * The function ignores node swaps since this does not affect logical result.
+ */
+export declare function isRelationsChanged(prevFilters: Filter[] | undefined, newFilters: Filter[] | undefined, prevRelations: FilterRelation | undefined, newRelations: FilterRelation | undefined): boolean;

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

@@ -14,7 +14,7 @@ import { ChartWidgetProps } from '../props';
  *   chartType="bar"
  *   dataOptions={{
  *     category: [DM.Category.Category],
- *     value: [measures.sum(DM.Commerce.Revenue)],
+ *     value: [measureFactory.sum(DM.Commerce.Revenue)],
  *     breakBy: [],
  *   }}
  *   drilldownOptions={{

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

@@ -13,7 +13,7 @@ import { ChartWidgetProps } from '../props';
  *   chartType="bar"
  *   dataOptions={{
  *     category: [DM.Category.Category],
- *     value: [measures.sum(DM.Commerce.Revenue)],
+ *     value: [measureFactory.sum(DM.Commerce.Revenue)],
  *     breakBy: [],
  *   }}
  * />

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

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 export declare const StyledPrevButton: import("@emotion/styled").StyledComponent<import("@mui/material/IconButton").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "style" | "children" | "size" | "disabled" | "className" | "tabIndex" | "color" | "classes" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & {
+}, "style" | "children" | "size" | "color" | "disabled" | "className" | "tabIndex" | "classes" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const StyledNextButton: import("@emotion/styled").StyledComponent<import("@mui/material/IconButton").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "style" | "children" | "size" | "disabled" | "className" | "tabIndex" | "color" | "classes" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & {
+}, "style" | "children" | "size" | "color" | "disabled" | "className" | "tabIndex" | "classes" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

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

@@ -15,14 +15,24 @@ export declare const useDrilldown: (dataOptions: ChartDataOptions, drilldownOpti
     drilldownFiltersDisplayValues: string[][];
     drilldownDimension: Attribute;
     dataOptionsWithDrilldown: {
-        category: (import("@sisense/sdk-data").Column | import("../../types").StyledColumn)[];
+        category: (import("@sisense/sdk-data").Column | import("../../types").StyledColumn | undefined)[];
         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)[];
+        category: (import("@sisense/sdk-data").Column | import("../../types").StyledColumn | undefined)[];
         value: (import("@sisense/sdk-data").MeasureColumn | import("@sisense/sdk-data").CalculatedMeasureColumn | import("../../types").StyledMeasureColumn)[];
         seriesToColorMap?: import("../../types").ValueToColorMap | import("../../types").MultiColumnValueToColorMap | undefined;
+    } | {
+        category: (import("@sisense/sdk-data").Column | import("../../types").StyledColumn | undefined)[];
+        value: [import("@sisense/sdk-data").Column | import("../../types").StyledColumn];
+        boxType: import("../..").BoxWhiskerType;
+        outliersEnabled?: boolean | undefined;
+    } | {
+        category: (import("@sisense/sdk-data").Column | import("../../types").StyledColumn | undefined)[];
+        value: (import("@sisense/sdk-data").Column | import("../../types").StyledColumn | import("@sisense/sdk-data").MeasureColumn | import("@sisense/sdk-data").CalculatedMeasureColumn | import("../../types").StyledMeasureColumn)[];
+        outliers?: [import("@sisense/sdk-data").Column | import("../../types").StyledColumn] | undefined;
+        valueTitle: string;
     };
     selectDrilldown: (points: DataPoint[], nextDimension: Attribute) => void;
     sliceDrilldownSelections: (i: number) => void;

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

@@ -29,10 +29,10 @@ import { DrilldownWidgetProps } from '../props';
  *     <ExecuteQuery
  *       dataSource={DM.DataSource}
  *       dimensions={[drilldownDimension]}
- *       measures={measure.sum(DM.Commerce.Revenue)}
+ *       measures={measureFactory.sum(DM.Commerce.Revenue)}
  *       filters={drilldownFilters}
  *     >
- *       {(data) => (
+ *       {({data}) => (
  *         <MyCustomChart
  *           rawData={data}
  *           onContextMenu={onContextMenu}

package/package.json

@@ -1,6 +1,17 @@
 {
   "name": "@sisense/sdk-ui",
-  "version": "0.16.0",
+  "homepage": "https://sisense.dev/guides/sdk/",
+  "description": "Compose SDK package containing general UI elements and related logic tailored for React development",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sisense/compose-sdk-monorepo",
+    "directory": "packages/sdk-ui"
+  },
+  "keywords": [
+    "Sisense",
+    "Compose SDK"
+  ],
+  "version": "1.1.0",
   "type": "module",
   "exports": {
     ".": {
@@ -28,11 +39,11 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/material": "^5.11.6",
-    "@sisense/sdk-common": "^0.16.0",
-    "@sisense/sdk-data": "^0.16.0",
-    "@sisense/sdk-query-client": "^0.16.0",
-    "@sisense/sdk-rest-client": "^0.16.0",
-    "@sisense/sdk-tracking": "^0.16.0",
+    "@sisense/sdk-common": "^1.1.0",
+    "@sisense/sdk-data": "^1.1.0",
+    "@sisense/sdk-query-client": "^1.1.0",
+    "@sisense/sdk-rest-client": "^1.1.0",
+    "@sisense/sdk-tracking": "^1.1.0",
     "@sisense/sisense-charts": "5.1.0-alpha-04052758.0",
     "@tanstack/react-query": "4.36.1",
     "classnames": "^2.3.2",
@@ -41,11 +52,14 @@
     "date-fns-tz": "^2.0.0",
     "dayjs": "^1.11.7",
     "fixed-data-table-2": "^1.2.18",
+    "geojson": "^0.5.0",
     "guid-typescript": "^1.0.9",
     "highcharts-react-official": "^3.2.1",
     "immer": "^10.0.2",
+    "leaflet": "^1.9.4",
     "lodash": "^4.17.21",
     "merge-deep": "^3.0.3",
+    "proj4leaflet": "^1.0.2",
     "react-datepicker": "^4.16.0",
     "react-error-boundary": "^4.0.11",
     "react-i18next": "^13.2.2",
@@ -93,7 +107,9 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@types/fixed-data-table-2": "^0.8.8",
+    "@types/leaflet": "^1.9.8",
     "@types/lodash": "^4.14.194",
+    "@types/proj4leaflet": "^1.0.10",
     "@types/react": "18.2.0",
     "@types/react-datepicker": "^4.11.2",
     "@types/react-dom": "18.2.0",

package/dist/chart-data/series-data-color-service/index.d.ts

@@ -1,3 +0,0 @@
-export * from './legend-color';
-export * from './series-data-color-service';
-export * from './types';

package/dist/chart-data/series-data-color-service/series-data-color-service.d.ts

@@ -1,4 +0,0 @@
-import { SeriesValueData } from '../types';
-import { DataColorOptions } from './types';
-export declare function seriesDataColorService(seriesValues: SeriesValueData[], colorOpts: DataColorOptions): SeriesValueData[];
-export declare function generateColorsForDataStructures<DataStructure extends {}>(dataStructures: DataStructure[], colorOpts: DataColorOptions, getValueFromDataStructure: (data: DataStructure) => number, applyColorToDataStructure: (data: DataStructure, color: string | undefined) => DataStructure): DataStructure[];