@carto/ps-react-ui 4.3.0-widgets.0 → 4.3.1

package/dist/types/widgets/actions/relative-data/types.d.ts

@@ -0,0 +1,27 @@
+import { IconButtonProps } from '@mui/material';
+import { ReactNode } from 'react';
+import { BaseWidgetState } from '../../stores/types';
+export interface RelativeDataProps {
+    /** Widget ID to update data in the widget store */
+    id: string;
+    /** Execution order in the tool pipeline. Lower values execute first. Defaults to 20. */
+    order?: number;
+    /** Initial toggle state - when true, shows relative (percentage) values */
+    defaultIsRelative?: boolean;
+    /** Custom labels for the action */
+    labels?: {
+        /** Tooltip when showing absolute values (button will switch to relative) */
+        relative?: string;
+        /** Tooltip when showing relative values (button will switch to absolute) */
+        absolute?: string;
+        /** Accessibility label */
+        ariaLabel?: string;
+    };
+    /** Props passed to the IconButton component */
+    IconButtonProps?: IconButtonProps;
+    /** Custom icon to display */
+    Icon?: ReactNode;
+}
+export type RelativeDataState<T = unknown> = BaseWidgetState<T & {
+    isRelative?: boolean;
+}>;

package/dist/types/widgets/actions/relative-data/utils.d.ts

@@ -0,0 +1,9 @@
+import { EchartWidgetData } from '../../echart/types';
+/**
+ * Calculates the sum of all numeric values in the data
+ */
+export declare function calculateTotal(data: EchartWidgetData): number;
+/**
+ * Transforms data to relative (percentage) values
+ */
+export declare function toRelativeData(data: EchartWidgetData, total: number): EchartWidgetData;

package/dist/types/widgets/actions/relative-data/utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/widgets/actions/searcher/searcher-toggle.d.ts

@@ -0,0 +1,18 @@
+import { SearcherToggleProps } from './types';
+/**
+ * Widget action button to toggle search functionality.
+ *
+ * Stores the enabled state in the widget store using the provided id.
+ * When search is active, the button shows an active state with a light background.
+ * Use in conjunction with the Searcher component to display the search input.
+ *
+ * @example
+ * ```tsx
+ * <SearcherToggle id="my-widget" />
+ * <Searcher
+ *   id="my-widget"
+ *   data={widgetData}
+ * />
+ * ```
+ */
+export declare function SearcherToggle({ id, defaultEnabled, labels, Icon, IconButtonProps, }: SearcherToggleProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/widgets/actions/searcher/searcher.d.ts

@@ -0,0 +1,21 @@
+import { SearcherProps } from './types';
+export declare const SEARCHER_TOOL_ID = "searcher";
+/**
+ * Search input component that works with SearcherToggle.
+ *
+ * Registers a transformation tool in the widget pipeline when mounted.
+ * Reads the enabled state from the widget store using the provided id.
+ * Uses a debounced search to filter data via the transformation pipeline.
+ * Auto-focuses when enabled becomes true.
+ *
+ * @example
+ * ```tsx
+ * <SearcherToggle id="my-widget" />
+ * <Searcher
+ *   id="my-widget"
+ *   order={10}
+ *   labels={{ placeholder: 'Search categories...' }}
+ * />
+ * ```
+ */
+export declare function Searcher({ id, filterFn, order, labels, TextFieldProps, ClearIcon, debounceDelay, }: SearcherProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/widgets/actions/searcher/types.d.ts

@@ -0,0 +1,64 @@
+import { IconButtonProps, TextFieldProps } from '@mui/material';
+import { ReactNode } from 'react';
+import { EchartWidgetData } from '../../echart/types';
+import { BaseWidgetState } from '../../stores/types';
+/**
+ * Filter function type for custom search filtering logic.
+ * Receives the original data and search text, returns filtered data.
+ * Can be synchronous or asynchronous to support remote filtering.
+ */
+export type SearcherFilterFn = (data: EchartWidgetData, searchText: string) => Promise<EchartWidgetData> | EchartWidgetData;
+/**
+ * Searcher-specific state properties.
+ */
+export interface SearcherStateProps {
+    /** Whether search is currently enabled */
+    isSearchEnabled?: boolean;
+    /** Current search text */
+    searchText?: string;
+}
+/**
+ * Widget state extension for searcher functionality.
+ * Extends the base widget state with search-specific properties.
+ */
+export type SearcherState<T = object> = BaseWidgetState<T & SearcherStateProps>;
+export interface SearcherToggleProps {
+    /** Widget ID to store search enabled state */
+    id: string;
+    /** Initial search enabled state. Defaults to false */
+    defaultEnabled?: boolean;
+    /** Custom labels for the action */
+    labels?: {
+        /** Tooltip when search is disabled (button will enable search) */
+        enable?: string;
+        /** Tooltip when search is enabled (button will disable search) */
+        disable?: string;
+        /** Accessibility label */
+        ariaLabel?: string;
+    };
+    /** Props passed to the IconButton component */
+    IconButtonProps?: IconButtonProps;
+    /** Custom icon to display */
+    Icon?: ReactNode;
+}
+export interface SearcherProps {
+    /** Widget ID to update filtered data in the widget store */
+    id: string;
+    /** Custom filter function. Defaults to case-insensitive search across all string fields */
+    filterFn?: SearcherFilterFn;
+    /** Execution order in the tool pipeline. Lower values execute first. Defaults to 10. */
+    order?: number;
+    /** Custom labels for the searcher input */
+    labels?: {
+        /** Placeholder text for the input */
+        placeholder?: string;
+        /** Accessibility label for clear button */
+        clearAriaLabel?: string;
+    };
+    /** Props passed to the TextField component */
+    TextFieldProps?: Omit<TextFieldProps, 'value' | 'onChange' | 'size'>;
+    /** Custom icon for clear button */
+    ClearIcon?: ReactNode;
+    /** Debounce delay in milliseconds for search input. Defaults to 300ms */
+    debounceDelay?: number;
+}

package/dist/types/widgets/actions/shared/styles.d.ts

@@ -0,0 +1,11 @@
+import { Theme } from '@mui/material';
+/**
+ * Shared styles for widget action buttons
+ */
+export declare const actionButtonStyles: {
+    trigger: {
+        '&[data-active="true"]': {
+            background: (theme: Theme) => string;
+        };
+    };
+};

package/dist/types/widgets/actions/stack-toggle/grouped-bar-chart-icon.d.ts

@@ -0,0 +1 @@
+export declare const GroupedBarChartIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/widgets/actions/stack-toggle/stack-toggle.d.ts

@@ -0,0 +1,16 @@
+import { StackToggleProps } from './types';
+/**
+ * Widget action to toggle stacking behavior in ECharts bar and histogram widgets.
+ *
+ * Stores the stack state in the widget store and updates the ECharts option
+ * using getEChartStackConfig to apply stacking to all series.
+ *
+ * @example
+ * ```tsx
+ * <StackToggle
+ *   id="my-widget"
+ *   defaultIsStacked={false}
+ * />
+ * ```
+ */
+export declare function StackToggle({ id, defaultIsStacked, labels, Icon, IconButtonProps, }: StackToggleProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/widgets/actions/stack-toggle/types.d.ts

@@ -0,0 +1,25 @@
+import { IconButtonProps } from '@mui/material';
+import { ReactNode } from 'react';
+import { BaseWidgetState } from '../../stores/types';
+export interface StackToggleProps {
+    /** Widget ID to update stack configuration in the widget store */
+    id: string;
+    /** Initial toggle state - when true, starts with stacking enabled */
+    defaultIsStacked?: boolean;
+    /** Custom labels for the action */
+    labels?: {
+        /** Tooltip when stacking is disabled (button will enable stacking) */
+        stacked?: string;
+        /** Tooltip when stacking is enabled (button will disable stacking) */
+        unstacked?: string;
+        /** Accessibility label */
+        ariaLabel?: string;
+    };
+    /** Props passed to the IconButton component */
+    IconButtonProps?: IconButtonProps;
+    /** Custom icon to display */
+    Icon?: ReactNode;
+}
+export type StackToggleState<T = unknown> = BaseWidgetState<T & {
+    isStacked?: boolean;
+}>;

package/dist/types/widgets/actions/zoom-toggle/index.d.ts

@@ -0,0 +1,2 @@
+export { ZoomToggle } from './zoom-toggle';
+export type { ZoomToggleProps, ZoomState, ZoomConfig } from './types';

package/dist/types/widgets/actions/zoom-toggle/style.d.ts

@@ -0,0 +1,13 @@
+import { Theme } from '@mui/material';
+export declare const styles: {
+    container: {
+        display: "flex";
+        alignItems: "center";
+        gap: ({ spacing }: Theme) => string;
+    };
+    trigger: {
+        '&[data-active="true"]': {
+            background: (theme: Theme) => string;
+        };
+    };
+};

package/dist/types/widgets/actions/zoom-toggle/types.d.ts

@@ -0,0 +1,41 @@
+import { IconButtonProps } from '@mui/material';
+import { ReactNode } from 'react';
+import { BaseWidgetState } from '../../stores/types';
+/**
+ * State stored in widget store for zoom functionality
+ */
+export interface ZoomConfig {
+    zoom?: boolean;
+    /** Start percentage for zoom range (0-100) */
+    zoomStart?: number;
+    /** End percentage for zoom range (0-100) */
+    zoomEnd?: number;
+}
+export type ZoomState<T = unknown> = BaseWidgetState<T & ZoomConfig>;
+export interface ZoomToggleProps {
+    /** Widget ID to update zoom state in the widget store */
+    id: string;
+    /** Initial zoom state - when true, zoom is enabled */
+    defaultZoom?: boolean;
+    /** Initial start percentage for zoom range (0-100) */
+    defaultZoomStart?: number;
+    /** Initial end percentage for zoom range (0-100) */
+    defaultZoomEnd?: number;
+    /** Custom labels for the action */
+    labels?: {
+        /** Tooltip when zoom is disabled (button will enable zoom) */
+        enable?: string;
+        /** Tooltip when zoom is enabled (button will disable zoom) */
+        disable?: string;
+        /** Tooltip for reset button */
+        reset?: string;
+        /** Accessibility label */
+        ariaLabel?: string;
+    };
+    /** Props passed to the IconButton component */
+    IconButtonProps?: IconButtonProps;
+    /** Custom icon to display for zoom toggle */
+    Icon?: ReactNode;
+    /** Custom icon to display for reset button */
+    ResetIcon?: ReactNode;
+}

package/dist/types/widgets/actions/zoom-toggle/zoom-toggle.d.ts

@@ -0,0 +1,18 @@
+import { ZoomToggleProps } from './types';
+/**
+ * Widget action to toggle EChart zoom functionality.
+ *
+ * When zoom is active, displays an inline reset button to disable zoom.
+ * Only intended for use in fullscreen ToolbarActions for bar and histogram widgets.
+ *
+ * @example
+ * ```tsx
+ * <ZoomToggle
+ *   id="my-widget"
+ *   defaultZoom={false}
+ *   zoomStart={0}
+ *   zoomEnd={100}
+ * />
+ * ```
+ */
+export declare function ZoomToggle({ id, defaultZoom, defaultZoomStart, defaultZoomEnd, labels, Icon, ResetIcon, IconButtonProps, }: ZoomToggleProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/widgets/bar/config.d.ts

@@ -1,4 +1,5 @@
-import { BarConfig } from './types';
-export declare const barConfig: (config: BarConfig & {
-    refUI?: import('react').Ref<HTMLElement | null>;
-}) => import('../_shared/chart-config/config-factory').ChartWidgetConfigResult<import('../echart').EchartWidgetData, BarConfig, "bar">;
+import { BarConfig, BarWidgetConfig, BarWidgetData } from './types';
+import { DownloadItem } from '../actions';
+import { ConfigProps } from '../loader/types';
+export declare function barDownloadConfig({ refUI, }: ConfigProps): DownloadItem<BarWidgetData>[];
+export declare function barConfig(props: BarConfig): BarWidgetConfig;

package/dist/types/widgets/bar/index.d.ts

@@ -1,3 +1,3 @@
-export type { BarProps, BarWidgetData, BarWidgetState, BarWidgetConfig, } from './types';
-export { barConfig } from './config';
+export { barConfig, barDownloadConfig } from './config';
 export { BarSkeleton } from './skeleton';
+export type { BarWidgetData, BarWidgetState, BarConfig, BarWidgetConfig, } from './types';

package/dist/types/widgets/bar/types.d.ts

@@ -1,15 +1,9 @@
-import { BaseWidgetProps } from '../widget/types';
-import { BaseConfig } from '../config-loader';
-import { EchartWidgetConfig, EchartWidgetData, EchartWidgetState } from '../echart';
-export interface BarProps extends BaseWidgetProps<BarWidgetConfig> {
-    type: 'bar';
-    data: BarWidgetData | undefined;
-}
+import { EchartWidgetData, EchartWidgetState } from '../echart';
+import { EchartWidgetOptionProps, EchartWidgetProps } from '../echart/types';
+import { ConfigProps } from '../loader';
 export type BarWidgetData = EchartWidgetData;
 export type BarWidgetState = EchartWidgetState;
-export type BarWidgetConfig = BarConfig & EchartWidgetConfig & {
-    type: BarProps['type'];
+export type BarWidgetConfig = EchartWidgetProps & {
+    type: 'bar';
 };
-export interface BarConfig extends Omit<BaseConfig, 'data'> {
-    data?: BarWidgetData;
-}
+export type BarConfig = ConfigProps & EchartWidgetOptionProps<BarWidgetData>;

package/dist/types/widgets/category/category-ui.d.ts

@@ -0,0 +1,2 @@
+import { CategoryUIProps } from './types';
+export declare function CategoryUI({ id }: CategoryUIProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/widgets/category/components/category-bar.d.ts

@@ -0,0 +1,7 @@
+export interface CategoryBarProps {
+    value: number;
+    maxValue: number;
+    color: string;
+    selected?: boolean;
+}
+export declare function CategoryBar({ value, maxValue, color, selected, }: CategoryBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/widgets/category/components/category-legend.d.ts

@@ -0,0 +1,6 @@
+import { CategorySeriesConfig } from '../types';
+export interface CategoryLegendProps {
+    series: CategorySeriesConfig[];
+    colors: string[];
+}
+export declare function CategoryLegend({ series, colors }: CategoryLegendProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/widgets/category/components/category-row-multi.d.ts

@@ -0,0 +1,11 @@
+import { CategoryWidgetConfig } from '../types';
+export interface CategoryRowMultiProps {
+    name: string;
+    values: number[];
+    maxValue: number;
+    colors: string[];
+    formatter: NonNullable<CategoryWidgetConfig['formatter']>;
+    onClick?: CategoryWidgetConfig['onRowClick'];
+    selected?: boolean;
+}
+export declare function CategoryRowMulti({ name, values, maxValue, colors, formatter, onClick, selected, }: CategoryRowMultiProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/widgets/category/components/category-row-other.d.ts

@@ -0,0 +1,6 @@
+export interface CategoryRowOtherProps {
+    hiddenCount: number;
+    otherLabel?: string;
+    otherCountLabel?: string;
+}
+export declare function CategoryRowOther({ hiddenCount, otherLabel, otherCountLabel, }: CategoryRowOtherProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/widgets/category/components/category-row-single.d.ts

@@ -0,0 +1,11 @@
+import { CategoryWidgetConfig } from '../types';
+export interface CategoryRowSingleProps {
+    name: string;
+    value: number;
+    maxValue: number;
+    color: string;
+    formatter: NonNullable<CategoryWidgetConfig['formatter']>;
+    onClick?: CategoryWidgetConfig['onRowClick'];
+    selected?: boolean;
+}
+export declare function CategoryRowSingle({ name, value, maxValue, color, formatter, onClick, selected, }: CategoryRowSingleProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/widgets/category/components/index.d.ts

@@ -0,0 +1,10 @@
+export { CategoryBar } from './category-bar';
+export type { CategoryBarProps } from './category-bar';
+export { CategoryRowSingle } from './category-row-single';
+export type { CategoryRowSingleProps } from './category-row-single';
+export { CategoryRowMulti } from './category-row-multi';
+export type { CategoryRowMultiProps } from './category-row-multi';
+export { CategoryRowOther } from './category-row-other';
+export type { CategoryRowOtherProps } from './category-row-other';
+export { CategoryLegend } from './category-legend';
+export type { CategoryLegendProps } from './category-legend';

package/dist/types/widgets/category/config.d.ts

@@ -0,0 +1,16 @@
+import { DownloadItem } from '../actions';
+import { ConfigProps } from '../loader/types';
+import { CategoryWidgetConfig, CategoryWidgetData, CategorySeriesConfig, CategoryLabels } from './types';
+export interface CategoryDownloadConfigProps extends ConfigProps {
+    series?: CategorySeriesConfig[];
+}
+export interface CategoryConfigProps {
+    data?: CategoryWidgetData;
+    series?: CategorySeriesConfig[];
+    formatter?: (value: number) => string;
+    maxItems?: number;
+    labels?: CategoryLabels;
+    max?: number;
+}
+export declare function categoryDownloadConfig({ refUI, series, }: CategoryDownloadConfigProps): DownloadItem<CategoryWidgetData>[];
+export declare function categoryConfig(): CategoryWidgetConfig;

package/dist/types/widgets/category/index.d.ts

@@ -0,0 +1,6 @@
+export { CategoryUI } from './category-ui';
+export { CategorySkeleton } from './skeleton';
+export { categoryConfig, categoryDownloadConfig } from './config';
+export { CategoryBar, CategoryRowSingle, CategoryRowMulti, CategoryLegend, CategoryRowOther, } from './components';
+export type { CategoryBarProps, CategoryRowSingleProps, CategoryRowMultiProps, CategoryLegendProps, CategoryRowOtherProps, } from './components';
+export type { CategoryUIProps, CategoryWidgetData, CategoryWidgetState, CategoryWidgetConfig, CategoryDownloadConfig, CategoryDataItem, CategorySeriesConfig, CategoryLabels, } from './types';

package/dist/types/widgets/category/skeleton.d.ts

@@ -0,0 +1 @@
+export declare function CategorySkeleton(): import("react/jsx-runtime").JSX.Element;

package/dist/types/widgets/category/style.d.ts

@@ -0,0 +1,120 @@
+import { Theme } from '@mui/material';
+export declare const styles: {
+    root: {
+        display: "flex";
+        flexDirection: "column";
+        position: "relative";
+    };
+    list: {
+        display: "flex";
+        flexDirection: "column";
+        gap: (theme: Theme) => string;
+    };
+    row: {
+        display: "flex";
+        flexDirection: "column";
+        gap: (theme: Theme) => string;
+        pointerEvents: "none";
+    };
+    rowClickable: {
+        pointerEvents: "auto";
+    };
+    rowHeader: {
+        display: "flex";
+        justifyContent: "space-between";
+        alignItems: "center";
+    };
+    rowLabel: {
+        typography: string;
+        fontWeight: string;
+        color: "text.primary";
+    };
+    rowValue: {
+        typography: string;
+        color: "text.secondary";
+    };
+    barContainer: {
+        display: "flex";
+        flexDirection: "column";
+    };
+    bar: {
+        height: number;
+        borderRadius: number;
+        backgroundColor: (theme: Theme) => string;
+        overflow: "hidden";
+        position: "relative";
+        transition: "background-color 0.15s ease-in-out";
+        cursor: "pointer";
+        '&:hover': {
+            backgroundColor: (theme: Theme) => string;
+            '& > div': {
+                filter: "brightness(1.2)";
+            };
+        };
+    };
+    barFill: {
+        height: string;
+        borderRadius: number;
+        transition: "width 0.3s ease-in-out, background-color 0.15s ease-in-out";
+    };
+    barFillMuted: {
+        backgroundColor: (theme: Theme) => string;
+    };
+    legend: {
+        display: "flex";
+        alignItems: "center";
+        gap: (theme: Theme) => string;
+        flexWrap: "wrap";
+        paddingTop: (theme: Theme) => string;
+        position: "sticky";
+        bottom: number;
+        backgroundColor: "background.paper";
+        borderTop: (theme: Theme) => string;
+        marginTop: (theme: Theme) => string;
+    };
+    legendItem: {
+        display: "flex";
+        alignItems: "center";
+        gap: (theme: Theme) => string;
+    };
+    legendDot: {
+        width: number;
+        height: number;
+        borderRadius: string;
+    };
+    legendLabel: {
+        typography: string;
+        color: "text.secondary";
+        textTransform: "uppercase";
+        fontWeight: string;
+    };
+    multiBarRow: {
+        display: "flex";
+        alignItems: "center";
+        gap: (theme: Theme) => string;
+    };
+    multiBarValue: {
+        typography: string;
+        color: "text.secondary";
+        minWidth: number;
+        textAlign: "right";
+    };
+    multiBarContainer: {
+        flex: number;
+    };
+    otherRow: {
+        display: "flex";
+        justifyContent: "space-between";
+        alignItems: "center";
+    };
+    otherLabel: {
+        typography: string;
+        fontWeight: string;
+        color: "text.secondary";
+        fontStyle: "italic";
+    };
+    otherCount: {
+        typography: string;
+        color: "text.disabled";
+    };
+};

package/dist/types/widgets/category/types.d.ts

@@ -0,0 +1,34 @@
+import { BaseWidgetState, WidgetsStoreProps } from '../stores/types';
+import { WrapperState } from '../wrapper/types';
+import { DownloadItem } from '../actions/download/types';
+export interface CategoryUIProps {
+    id: WidgetsStoreProps['id'];
+}
+export interface CategorySeriesConfig {
+    name: string;
+    color?: string;
+}
+export interface CategoryLabels {
+    other?: string;
+    otherCount?: string;
+}
+export interface CategoryDataItem extends Record<string, string | number> {
+    name: string;
+    value: number;
+}
+export type CategoryWidgetData = CategoryDataItem[][];
+export type CategoryWidgetState = BaseWidgetState<WrapperState<CategoryWidgetConfig> & {
+    data: CategoryWidgetData;
+}>;
+export interface CategoryWidgetConfig {
+    formatter?: (value: number) => string;
+    series?: CategorySeriesConfig[];
+    maxItems?: number;
+    labels?: CategoryLabels;
+    onRowClick?: ({ name }: {
+        name: string;
+    }) => void;
+    selected?: (name: string) => boolean;
+    max?: number;
+}
+export type CategoryDownloadConfig = DownloadItem<CategoryWidgetData>[];

package/dist/types/widgets/echart/echart-ui.d.ts

@@ -1,2 +1,2 @@
 import { EchartUIProps } from './types';
-export declare function EchartUI({ ref, init, option, className, style, onEvents, }: EchartUIProps): import("react/jsx-runtime").JSX.Element;
+export declare function EchartUI({ id, ref, init, option, className, style, onEvents, }: EchartUIProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/widgets/echart/index.d.ts

@@ -1,5 +1,5 @@
 export { Echart } from './echart';
 export { EchartUI } from './echart-ui';
-export type { EchartProps, EchartOptionsProps, EchartUIProps, EchartWidgetData, EchartWidgetState, EchartWidgetConfig, EchartWidgetProps, } from './types';
+export type { EchartProps, EchartOptionsProps, EchartUIProps, EchartWidgetData, EchartWidgetState, } from './types';
 export { getCommonOptions } from './options';
-export { mergeWidgetConfig, getEChartBrushConfig, getEChartStackConfig, getEChartZoomConfig, } from './utils';
+export { mergeEchartWidgetConfig, getEChartBrushConfig, getEChartStackConfig, getEChartZoomConfig, } from './utils';

package/dist/types/widgets/echart/options.d.ts

@@ -1,3 +1,2 @@
-import { EchartOptionsProps } from './types';
-import { theme as CartoTheme } from '@carto/meridian-ds/theme';
-export declare function getCommonOptions(theme: typeof CartoTheme): EchartOptionsProps;
+import { EchartOptionsProps, EchartWidgetOptionProps } from './types';
+export declare function getCommonOptions({ theme, }: EchartWidgetOptionProps<unknown>): EchartOptionsProps;

package/dist/types/widgets/echart/types.d.ts

@@ -1,14 +1,11 @@
 import { EChartsOption } from 'echarts';
 import { BaseWidgetState } from '../stores/types';
-import { WrapperState } from '../wrapper/types';
-import { DownloadState, FullScreenState } from '../actions';
-import { FullScreenConfigProps } from '../actions/fullscreen/types';
-import { DownloadConfigProps } from '../actions/download/types';
-import { ConfigProps } from '../config-loader';
 import { Ref } from 'react';
+import { theme as CartoTheme } from '@carto/meridian-ds/theme';
 import type * as echarts from 'echarts';
 export type EchartOptionsProps = EChartsOption;
 export interface EchartUIProps {
+    id: string;
     option: EchartOptionsProps;
     className?: string;
     init?: echarts.EChartsInitOpts;
@@ -17,15 +14,21 @@ export interface EchartUIProps {
     onEvents?: Record<string, Parameters<echarts.ECharts['on']>[2]>;
 }
 export interface EchartProps {
-    id: string;
+    id: EchartUIProps['id'];
 }
 export type EchartWidgetData = Record<string, string | number>[][];
-export type EchartWidgetState = BaseWidgetState<WrapperState<FullScreenState<DownloadState<EchartWidgetProps, EchartWidgetData> & {
+export type EchartWidgetState = BaseWidgetState<{
     option: EchartUIProps['option'];
     onEvents?: EchartUIProps['onEvents'];
     init?: EchartUIProps['init'];
-}>>>;
-export type EchartWidgetConfig<D = EchartWidgetData> = FullScreenConfigProps & DownloadConfigProps<D> & EchartUIProps;
+}>;
+export interface EchartWidgetOptionProps<D> {
+    data?: D;
+    theme: typeof CartoTheme;
+    formatter?: (value: number) => string;
+}
 export interface EchartWidgetProps {
-    config?: ConfigProps<EchartWidgetConfig>['config'];
+    type: string;
+    option: EchartUIProps['option'];
+    onEvents?: EchartUIProps['onEvents'];
 }