@sentio/ui-dashboard 0.1.2 → 0.2.1

package/dist/index.d.mts

@@ -1,6 +1,10 @@
+import { DurationLike, ButtonProps } from '@sentio/ui-core';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { DurationLike } from '@sentio/ui-core';
-import { ReactNode } from 'react';
+import * as React from 'react';
+import React__default, { ReactNode, CSSProperties } from 'react';
+import { ComposeOption, SetOptionOpts, ECharts } from 'echarts/core';
+import { BarSeriesOption, LineSeriesOption, SankeySeriesOption } from 'echarts/charts';
+import { TitleComponentOption, GridComponentOption } from 'echarts/components';
 
 /** Dashboard chart type. */
 type ChartTypeLike = 'LINE' | 'AREA' | 'BAR' | 'BAR_GAUGE' | 'TABLE' | 'QUERY_VALUE' | 'PIE' | 'NOTE' | 'SCATTER' | 'GROUP';
@@ -16,6 +20,22 @@ type NoteFontSizeLike = 'MD' | 'SM' | 'LG' | 'XL' | 'XXL';
 type NoteAlignmentLike = 'LEFT' | 'CENTER' | 'RIGHT';
 /** Note panel vertical alignment. */
 type NoteVerticalAlignmentLike = 'TOP' | 'MIDDLE' | 'BOTTOM';
+/** Series/value aggregation calculation. */
+type CalculationLike = 'LAST' | 'FIRST' | 'MEAN' | 'TOTAL' | 'ALL' | 'MIN' | 'MAX';
+/** Bar-gauge layout direction. */
+type DirectionLike = 'HORIZONTAL' | 'VERTICAL';
+/** Mark type for chart markers. */
+type MarkerTypeLike = 'LINE' | 'AREA' | 'LINEX';
+/** Sort key for axis/bar ordering. */
+type SortByLike = 'ByName' | 'ByValue';
+/** Value formatter family. */
+type ValueFormatterLike = 'NumberFormatter' | 'DateFormatter' | 'StringFormatter';
+/** Number value display style. */
+type ValueStyleLike = 'Standard' | 'Compact' | 'Scientific' | 'Percent' | 'Currency' | 'None';
+/** Pie vs donut. */
+type PieTypeLike = 'Pie' | 'Donut';
+/** Line style. */
+type LineStyleLike = 'Solid' | 'Dotted';
 
 /** One panel's box in the grid. */
 interface LayoutItemLike {
@@ -104,6 +124,11 @@ interface DashboardLike {
     sharing?: unknown;
 }
 
+/** Sort key + direction (x-axis, bar-gauge). */
+interface SortLike {
+    sortBy?: SortByLike;
+    orderDesc?: boolean;
+}
 /** Y-axis configuration. */
 interface YAxisConfigLike {
     min?: string;
@@ -113,9 +138,162 @@ interface YAxisConfigLike {
     column?: string;
     name?: string;
 }
-/** Minimal subset of a chart's config. Extended alongside chart components. */
+/** X-axis configuration. */
+interface XAxisConfigLike {
+    type?: string;
+    min?: string;
+    max?: string;
+    scale?: boolean;
+    name?: string;
+    column?: string;
+    sort?: SortLike;
+    format?: string;
+}
+/** Text/background color overrides for value + mapping rules. */
+interface ColorThemeLike {
+    textColor?: string;
+    backgroundColor?: string;
+    themeType?: string;
+}
+/** A value→text/color mapping rule. */
+interface MappingRuleLike {
+    comparison?: string;
+    value?: number | 'NaN' | 'Infinity' | '-Infinity';
+    text?: string;
+    colorTheme?: ColorThemeLike;
+}
+/** Number/string/date value formatting. */
+interface ValueConfigLike {
+    valueFormatter?: ValueFormatterLike;
+    showValueLabel?: boolean;
+    maxSignificantDigits?: number;
+    dateFormat?: string;
+    mappingRules?: MappingRuleLike[];
+    style?: ValueStyleLike;
+    maxFractionDigits?: number;
+    precision?: number;
+    currencySymbol?: string;
+    tooltipTotal?: boolean;
+    prefix?: string;
+    suffix?: string;
+}
+/** Line chart style. */
+interface LineConfigLike {
+    style?: LineStyleLike;
+    smooth?: boolean;
+}
+/** Pie/donut config. */
+interface PieConfigLike {
+    pieType?: PieTypeLike;
+    showPercent?: boolean;
+    showValue?: boolean;
+    calculation?: CalculationLike;
+    absValue?: boolean;
+}
+/** Bar-gauge config. */
+interface BarGaugeConfigLike {
+    direction?: DirectionLike;
+    calculation?: CalculationLike;
+    sort?: SortLike;
+}
+/** Query-value (single big number) config. */
+interface QueryValueConfigLike {
+    colorTheme?: ColorThemeLike;
+    showBackgroundChart?: boolean;
+    calculation?: CalculationLike;
+    seriesCalculation?: CalculationLike;
+}
+/** Per-column label config (event/log tables). */
+interface LabelConfigColumnLike {
+    name?: string;
+    showLabel?: boolean;
+    showValue?: boolean;
+}
+/** Series label config. */
+interface LabelConfigLike {
+    columns?: LabelConfigColumnLike[];
+    alias?: string;
+}
+/** Scatter chart config. */
+interface ScatterConfigLike {
+    symbolSize?: string;
+    color?: string;
+    minSize?: number;
+    maxSize?: number;
+}
+/** A mark line/area on a chart. */
+interface MarkerLike {
+    type?: MarkerTypeLike;
+    value?: number | 'NaN' | 'Infinity' | '-Infinity';
+    color?: string;
+    label?: string;
+    valueX?: string;
+}
+/** Series count limit. */
+interface DataConfigLike {
+    seriesLimit?: number;
+}
+/** Per-series override (currently just chart type). */
+interface SeriesConfigSeriesLike {
+    type?: ChartTypeLike;
+}
+/** Per-series config keyed by series id. */
+interface SeriesConfigLike {
+    series?: {
+        [key: string]: SeriesConfigSeriesLike;
+    };
+}
+/** Table column sort entry. */
+interface ColumnSortLike {
+    column?: string;
+    orderDesc?: boolean;
+}
+/** Table chart config. */
+interface TableConfigLike {
+    calculation?: CalculationLike;
+    showColumns?: {
+        [key: string]: boolean;
+    };
+    sortColumns?: ColumnSortLike[];
+    columnOrders?: string[];
+    columnWidths?: {
+        [key: string]: number;
+    };
+    showPlainData?: boolean;
+    calculations?: {
+        [key: string]: CalculationLike;
+    };
+    valueConfigs?: {
+        [key: string]: ValueConfigLike;
+    };
+    rowLimit?: number;
+}
+/** Compare-to-previous-period offset. */
+interface CompareTimeLike {
+    ago?: DurationLike;
+}
+/** Per-chart time-range override. `timeRange` payload kept opaque. */
+interface TimeRangeOverrideLike {
+    enabled?: boolean;
+    timeRange?: unknown;
+    compareTime?: CompareTimeLike;
+}
+/** A chart's full config — structural mirror of proto `ChartConfig`. */
 interface ChartConfigLike {
     yAxis?: YAxisConfigLike;
+    xAxis?: XAxisConfigLike;
+    lineConfig?: LineConfigLike;
+    valueConfig?: ValueConfigLike;
+    pieConfig?: PieConfigLike;
+    barGauge?: BarGaugeConfigLike;
+    queryValueConfig?: QueryValueConfigLike;
+    tableConfig?: TableConfigLike;
+    labelConfig?: LabelConfigLike;
+    scatterConfig?: ScatterConfigLike;
+    seriesConfig?: SeriesConfigLike;
+    dataConfig?: DataConfigLike;
+    timeRangeOverride?: TimeRangeOverrideLike;
+    markers?: MarkerLike[];
 }
 /** A note (text) panel's content and styling. */
 interface NoteLike {
@@ -205,12 +383,12 @@ interface MetricInfoLike {
     };
 }
 
-interface Props$4 {
+interface Props$h {
     metric?: MetricInfoLike;
     value: QueryLike;
     onChange: (value: QueryLike) => void;
 }
-declare function AggregateInput({ metric, value, onChange }: Props$4): react_jsx_runtime.JSX.Element;
+declare function AggregateInput({ metric, value, onChange }: Props$h): react_jsx_runtime.JSX.Element;
 
 declare enum ArgumentType {
     String = 0,
@@ -245,28 +423,28 @@ declare const EventsFunctionMap: {
     [name: string]: FunctionDef;
 };
 
-interface Props$3 {
+interface Props$g {
     argument: ArgumentDef;
     value?: ArgumentLike;
     onChange?: (value: ArgumentLike) => void;
     className?: string;
 }
-declare function ArgumentInput({ className, argument, value, onChange }: Props$3): react_jsx_runtime.JSX.Element;
+declare function ArgumentInput({ className, argument, value, onChange }: Props$g): react_jsx_runtime.JSX.Element;
 
-interface Props$2 {
+interface Props$f {
     value: QueryLike;
     onChange: (value: QueryLike) => void;
 }
-declare function FunctionInput({ value, onChange }: Props$2): react_jsx_runtime.JSX.Element;
+declare function FunctionInput({ value, onChange }: Props$f): react_jsx_runtime.JSX.Element;
 
-interface Props$1 {
+interface Props$e {
     onClick: (func: FunctionDef) => void;
     functionCategories?: typeof FunctionsCategories;
     defaultFunc?: string;
 }
-declare function FunctionsPanel({ onClick, functionCategories, defaultFunc }: Props$1): react_jsx_runtime.JSX.Element;
+declare function FunctionsPanel({ onClick, functionCategories, defaultFunc }: Props$e): react_jsx_runtime.JSX.Element;
 
-interface Props {
+interface Props$d {
     metric?: MetricInfoLike;
     value: QueryLike;
     onChange: (value: QueryLike) => void;
@@ -276,7 +454,7 @@ interface Props {
     small?: boolean;
     useRegex?: boolean;
 }
-declare function LabelsInput({ value, metric, variables, onChange, small, useRegex }: Props): react_jsx_runtime.JSX.Element;
+declare function LabelsInput({ value, metric, variables, onChange, small, useRegex }: Props$d): react_jsx_runtime.JSX.Element;
 
 declare const SystemLabels: {
     field: string;
@@ -302,4 +480,877 @@ declare function useLabelSearch(defaultQuery?: string): {
     setLabelSearchQuery: (query: string) => void;
 };
 
-export { AggregateInput, type ArgumentDef, ArgumentInput, ArgumentType, type ChartConfigLike, type ChartLike, type ChartTypeLike, type DashboardExtraLike, type DashboardLike, type DashboardVisibilityLike, type DataSourceTypeLike, EventsFunctionCategories, EventsFunctionMap, type FunctionDef, FunctionInput, FunctionMap, FunctionsCategories, FunctionsPanel, type GroupLike, type GroupStyleLike, LabelSearchProvider, LabelsInput, type LayoutItemLike, type LayoutsLike, type NoteAlignmentLike, type NoteFontSizeLike, type NoteLike, type NoteVerticalAlignmentLike, type OverlayGraphLike, type PanelLike, type ResponsiveLayoutsLike, SystemLabels, type TemplateVariableLike, type TemplateViewLike, type YAxisConfigLike, isAggrOrRollupFunction, sortMetricByName, useLabelSearch, useLabelSearchContext };
+type EChartsOption = ComposeOption<BarSeriesOption | LineSeriesOption | TitleComponentOption | GridComponentOption | SankeySeriesOption>;
+interface ReactEChartsProps {
+    group?: string;
+    option: EChartsOption;
+    style?: CSSProperties;
+    settings?: SetOptionOpts;
+    loading?: boolean;
+    theme?: 'light' | 'dark' | 'sentio';
+    minHeight?: number;
+    returnedSeries?: number;
+    totalSeries?: number;
+    onSelect?: (start: number, end: number) => void;
+    onZoom?: (start: number, end: number) => void;
+    noLegend?: boolean;
+    onClick?: (params: any, extraParams?: any) => void;
+    onInitChart?: (chart: ECharts) => void;
+    onSeriesEvent?: (event: 'click' | 'mouseover' | 'mouseout', params: any) => void;
+}
+interface EChartsHandle {
+    getEChart: () => ECharts | undefined;
+    highlightSeries: (highlighted?: SeriesFinder) => void;
+    getSeriesColor: (s: SeriesFinder) => string | undefined;
+    getFrame: () => HTMLDivElement | null;
+    toggleLegend: (legend: string, selected?: boolean) => void;
+    resize: (size: {
+        width?: number;
+        height?: number;
+    }) => void;
+    getSeries(seriesId: string): any;
+}
+type SeriesFinder = {
+    seriesId?: string;
+    seriesIndex?: number;
+    seriesName?: string;
+};
+declare const ReactEChartsBase: React__default.ForwardRefExoticComponent<ReactEChartsProps & React__default.RefAttributes<EChartsHandle>>;
+
+interface Props$c {
+    legend: string[];
+    legendSelected: Record<string, boolean>;
+    returnedSeries?: number;
+    totalSeries?: number;
+    onRendered: (v: boolean) => void;
+    chartHandle?: EChartsHandle;
+}
+declare const ChartLegend: ({ legend, legendSelected, returnedSeries, totalSeries, onRendered, chartHandle }: Props$c) => react_jsx_runtime.JSX.Element;
+
+declare const RefreshContext: React.Context<{
+    refresh?: () => void;
+    isRefreshing?: boolean;
+}>;
+declare const RefreshButton: (props: Partial<ButtonProps>) => react_jsx_runtime.JSX.Element | null;
+
+interface Props$b {
+    config?: LineConfigLike;
+    defaultOpen?: boolean;
+    onChange: (config: LineConfigLike) => void;
+}
+declare const LineControls: ({ config, defaultOpen, onChange }: Props$b) => react_jsx_runtime.JSX.Element;
+
+interface Props$a {
+    config?: LabelConfigLike;
+    setConfig: (value: LabelConfigLike) => void;
+    defaultOpen?: boolean;
+}
+declare const LabelControls: ({ config, setConfig, defaultOpen }: Props$a) => react_jsx_runtime.JSX.Element;
+
+interface Props$9 {
+    config?: PieConfigLike;
+    defaultOpen?: boolean;
+    onChange: (config: PieConfigLike) => void;
+}
+declare const defaultConfig$1: PieConfigLike;
+declare function PieChartControls({ config, defaultOpen, onChange }: Props$9): react_jsx_runtime.JSX.Element;
+
+interface Props$8 {
+    config?: BarGaugeConfigLike;
+    defaultOpen?: boolean;
+    onChange: (config: BarGaugeConfigLike) => void;
+}
+declare const defaultConfig: BarGaugeConfigLike;
+declare function BarGaugeControls({ config, defaultOpen, onChange }: Props$8): react_jsx_runtime.JSX.Element;
+
+declare const sentioColors: {
+    light: {
+        classic: string[];
+        purple: string[];
+    };
+    dark: {
+        classic: string[];
+        purple: string[];
+    };
+};
+
+declare const sentioTheme: {
+    color: string[];
+    backgroundColor: string;
+    textStyle: {
+        fontSize: number;
+        fontFamily: string;
+        color: string;
+    };
+    title: {
+        textStyle: {
+            color: string;
+        };
+        subtextStyle: {
+            color: string;
+        };
+    };
+    line: {
+        itemStyle: {
+            borderWidth: number;
+        };
+        lineStyle: {
+            width: number;
+        };
+        symbolSize: number;
+        symbol: string;
+        smooth: boolean;
+    };
+    radar: {
+        itemStyle: {
+            borderWidth: number;
+        };
+        lineStyle: {
+            width: number;
+        };
+        symbolSize: number;
+        symbol: string;
+        smooth: boolean;
+    };
+    bar: {
+        itemStyle: {
+            borderWidth: number;
+            borderColor: string;
+        };
+    };
+    pie: {
+        itemStyle: {
+            borderWidth: number;
+            borderColor: string;
+        };
+        label: {
+            textBorderWidth: number;
+            textBorderColor: string;
+        };
+    };
+    scatter: {
+        itemStyle: {
+            borderWidth: number;
+            borderColor: string;
+        };
+    };
+    boxplot: {
+        itemStyle: {
+            borderWidth: number;
+            borderColor: string;
+        };
+    };
+    parallel: {
+        itemStyle: {
+            borderWidth: number;
+            borderColor: string;
+        };
+    };
+    sankey: {
+        itemStyle: {
+            borderWidth: number;
+            borderColor: string;
+        };
+    };
+    funnel: {
+        itemStyle: {
+            borderWidth: number;
+            borderColor: string;
+        };
+    };
+    gauge: {
+        itemStyle: {
+            borderWidth: number;
+            borderColor: string;
+        };
+    };
+    candlestick: {
+        itemStyle: {
+            color: string;
+            color0: string;
+            borderColor: string;
+            borderColor0: string;
+            borderWidth: number;
+        };
+    };
+    graph: {
+        itemStyle: {
+            borderWidth: number;
+            borderColor: string;
+        };
+        lineStyle: {
+            width: number;
+            color: string;
+        };
+        symbolSize: number;
+        symbol: string;
+        smooth: boolean;
+        color: string[];
+        label: {
+            color: string;
+        };
+    };
+    map: {
+        itemStyle: {
+            areaColor: string;
+            borderColor: string;
+            borderWidth: number;
+        };
+        label: {
+            color: string;
+        };
+        emphasis: {
+            itemStyle: {
+                areaColor: string;
+                borderColor: string;
+                borderWidth: number;
+            };
+            label: {
+                color: string;
+            };
+        };
+    };
+    geo: {
+        itemStyle: {
+            areaColor: string;
+            borderColor: string;
+            borderWidth: number;
+        };
+        label: {
+            color: string;
+        };
+        emphasis: {
+            itemStyle: {
+                areaColor: string;
+                borderColor: string;
+                borderWidth: number;
+            };
+            label: {
+                color: string;
+            };
+        };
+    };
+    categoryAxis: {
+        axisLine: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisTick: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisLabel: {
+            show: boolean;
+            color: string;
+            fontWeight: string;
+        };
+        splitLine: {
+            show: boolean;
+            lineStyle: {
+                color: string[];
+            };
+        };
+        splitArea: {
+            show: boolean;
+            areaStyle: {
+                color: string[];
+            };
+        };
+    };
+    valueAxis: {
+        axisLine: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisTick: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisLabel: {
+            show: boolean;
+            color: string;
+            fontWeight: string;
+        };
+        splitLine: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        splitArea: {
+            show: boolean;
+            areaStyle: {
+                color: string[];
+            };
+        };
+    };
+    logAxis: {
+        axisLine: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisTick: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisLabel: {
+            show: boolean;
+            color: string;
+        };
+        splitLine: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        splitArea: {
+            show: boolean;
+            areaStyle: {
+                color: string[];
+            };
+        };
+    };
+    timeAxis: {
+        axisLine: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisTick: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisLabel: {
+            show: boolean;
+            color: string;
+        };
+        splitLine: {
+            show: boolean;
+            lineStyle: {
+                color: string[];
+            };
+        };
+        splitArea: {
+            show: boolean;
+            areaStyle: {
+                color: string[];
+            };
+        };
+    };
+    toolbox: {
+        iconStyle: {
+            borderColor: string;
+        };
+        emphasis: {
+            iconStyle: {
+                borderColor: string;
+            };
+        };
+    };
+    legend: {
+        textStyle: {
+            color: string;
+            fontSize: number;
+        };
+        pageIconColor: string;
+        pageIconInactiveColor: string;
+        pageTextStyle: {
+            color: string;
+        };
+    };
+    tooltip: {
+        axisPointer: {
+            lineStyle: {
+                color: string;
+                width: number;
+            };
+            crossStyle: {
+                color: string;
+                width: number;
+            };
+        };
+    };
+    timeline: {
+        lineStyle: {
+            color: string;
+            width: number;
+        };
+        itemStyle: {
+            color: string;
+            borderWidth: number;
+        };
+        controlStyle: {
+            color: string;
+            borderColor: string;
+            borderWidth: number;
+        };
+        checkpointStyle: {
+            color: string;
+            borderColor: string;
+        };
+        label: {
+            color: string;
+        };
+        emphasis: {
+            itemStyle: {
+                color: string;
+            };
+            controlStyle: {
+                color: string;
+                borderColor: string;
+                borderWidth: number;
+            };
+            label: {
+                color: string;
+            };
+        };
+    };
+    visualMap: {
+        color: string[];
+    };
+    dataZoom: {
+        handleSize: string;
+        textStyle: {};
+    };
+    markPoint: {
+        label: {
+            color: string;
+        };
+        emphasis: {
+            label: {
+                color: string;
+            };
+        };
+    };
+};
+declare const sentioThemeDark: {
+    color: string[];
+    backgroundColor: string;
+    textStyle: {
+        fontSize: number;
+        fontFamily: string;
+        textBorderWidth: number;
+        textBorderColor: string;
+        color: string;
+    };
+    title: {
+        textStyle: {
+            color: string;
+        };
+        subtextStyle: {
+            color: string;
+        };
+    };
+    line: {
+        itemStyle: {
+            borderWidth: number;
+        };
+        lineStyle: {
+            width: number;
+        };
+        symbolSize: number;
+        symbol: string;
+        smooth: boolean;
+    };
+    radar: {
+        itemStyle: {
+            borderWidth: number;
+        };
+        lineStyle: {
+            width: number;
+        };
+        symbolSize: number;
+        symbol: string;
+        smooth: boolean;
+    };
+    bar: {
+        itemStyle: {
+            borderWidth: number;
+            borderColor: string;
+        };
+    };
+    pie: {
+        itemStyle: {
+            borderWidth: number;
+            borderColor: string;
+        };
+        label: {
+            textBorderWidth: number;
+            textBorderColor: string;
+            color: string;
+        };
+    };
+    scatter: {
+        itemStyle: {
+            borderWidth: number;
+            borderColor: string;
+        };
+    };
+    boxplot: {
+        itemStyle: {
+            borderWidth: number;
+            borderColor: string;
+        };
+    };
+    parallel: {
+        itemStyle: {
+            borderWidth: number;
+            borderColor: string;
+        };
+    };
+    sankey: {
+        itemStyle: {
+            borderWidth: number;
+            borderColor: string;
+        };
+    };
+    funnel: {
+        itemStyle: {
+            borderWidth: number;
+            borderColor: string;
+        };
+    };
+    gauge: {
+        itemStyle: {
+            borderWidth: number;
+            borderColor: string;
+        };
+    };
+    candlestick: {
+        itemStyle: {
+            color: string;
+            color0: string;
+            borderColor: string;
+            borderColor0: string;
+            borderWidth: number;
+        };
+    };
+    graph: {
+        itemStyle: {
+            borderWidth: number;
+            borderColor: string;
+        };
+        lineStyle: {
+            width: number;
+            color: string;
+        };
+        symbolSize: number;
+        symbol: string;
+        smooth: boolean;
+        color: string[];
+        label: {
+            color: string;
+        };
+    };
+    map: {
+        itemStyle: {
+            areaColor: string;
+            borderColor: string;
+            borderWidth: number;
+        };
+        label: {
+            color: string;
+        };
+        emphasis: {
+            itemStyle: {
+                areaColor: string;
+                borderColor: string;
+                borderWidth: number;
+            };
+            label: {
+                color: string;
+            };
+        };
+    };
+    geo: {
+        itemStyle: {
+            areaColor: string;
+            borderColor: string;
+            borderWidth: number;
+        };
+        label: {
+            color: string;
+        };
+        emphasis: {
+            itemStyle: {
+                areaColor: string;
+                borderColor: string;
+                borderWidth: number;
+            };
+            label: {
+                color: string;
+            };
+        };
+    };
+    categoryAxis: {
+        axisLine: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisTick: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisLabel: {
+            show: boolean;
+            color: string;
+            fontWeight: string;
+        };
+        splitLine: {
+            show: boolean;
+            lineStyle: {
+                color: string[];
+            };
+        };
+        splitArea: {
+            show: boolean;
+            areaStyle: {
+                color: string[];
+            };
+        };
+    };
+    valueAxis: {
+        axisLine: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisTick: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisLabel: {
+            show: boolean;
+            color: string;
+        };
+        splitLine: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+                width: number;
+                opacity: number;
+            };
+        };
+        splitArea: {
+            show: boolean;
+            areaStyle: {
+                color: string[];
+            };
+        };
+    };
+    logAxis: {
+        axisLine: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisTick: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisLabel: {
+            show: boolean;
+            color: string;
+            fontWeight: string;
+        };
+        splitLine: {
+            show: boolean;
+            lineStyle: {
+                color: string[];
+                width: number;
+                opacity: number;
+            };
+        };
+        splitArea: {
+            show: boolean;
+            areaStyle: {
+                color: string[];
+            };
+        };
+    };
+    timeAxis: {
+        axisLine: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisTick: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisLabel: {
+            show: boolean;
+            color: string;
+        };
+        splitLine: {
+            show: boolean;
+            lineStyle: {
+                color: string[];
+            };
+        };
+        splitArea: {
+            show: boolean;
+            areaStyle: {
+                color: string[];
+            };
+        };
+    };
+    toolbox: {
+        iconStyle: {
+            borderColor: string;
+        };
+        emphasis: {
+            iconStyle: {
+                borderColor: string;
+            };
+        };
+    };
+    legend: {
+        textStyle: {
+            color: string;
+        };
+        pageIconColor: string;
+        pageIconInactiveColor: string;
+        pageTextStyle: {
+            color: string;
+        };
+    };
+    tooltip: {
+        axisPointer: {
+            lineStyle: {
+                color: string;
+                width: number;
+            };
+            crossStyle: {
+                color: string;
+                width: number;
+            };
+        };
+        backgroundColor: string;
+        textStyle: {
+            color: string;
+        };
+    };
+    timeline: {
+        lineStyle: {
+            color: string;
+            width: number;
+        };
+        itemStyle: {
+            color: string;
+            borderWidth: number;
+        };
+        controlStyle: {
+            color: string;
+            borderColor: string;
+            borderWidth: number;
+        };
+        checkpointStyle: {
+            color: string;
+            borderColor: string;
+        };
+        label: {
+            color: string;
+        };
+        emphasis: {
+            itemStyle: {
+                color: string;
+            };
+            controlStyle: {
+                color: string;
+                borderColor: string;
+                borderWidth: number;
+            };
+            label: {
+                color: string;
+            };
+        };
+    };
+    visualMap: {
+        color: string[];
+    };
+    dataZoom: {
+        handleSize: string;
+        textStyle: {};
+    };
+    markPoint: {
+        label: {
+            color: string;
+        };
+        emphasis: {
+            label: {
+                color: string;
+            };
+        };
+    };
+};
+
+interface Props$7 {
+    className?: string;
+}
+declare const SvgIcon$7: ({ className }: Props$7) => react_jsx_runtime.JSX.Element;
+
+interface Props$6 {
+    className?: string;
+}
+declare const SvgIcon$6: ({ className }: Props$6) => react_jsx_runtime.JSX.Element;
+
+interface Props$5 {
+    className?: string;
+}
+declare const SvgIcon$5: ({ className }: Props$5) => react_jsx_runtime.JSX.Element;
+
+interface Props$4 {
+    className?: string;
+}
+declare const SvgIcon$4: ({ className }: Props$4) => react_jsx_runtime.JSX.Element;
+
+interface Props$3 {
+    className?: string;
+}
+declare const SvgIcon$3: ({ className }: Props$3) => react_jsx_runtime.JSX.Element;
+
+interface Props$2 {
+    className?: string;
+}
+declare const SvgIcon$2: ({ className }: Props$2) => react_jsx_runtime.JSX.Element;
+
+interface Props$1 {
+    className?: string;
+}
+declare const SvgIcon$1: ({ className }: Props$1) => react_jsx_runtime.JSX.Element;
+
+interface Props {
+    className?: string;
+}
+declare const SvgIcon: ({ className }: Props) => react_jsx_runtime.JSX.Element;
+
+export { AggregateInput, SvgIcon$6 as AreaIcon, type ArgumentDef, ArgumentInput, ArgumentType, BarGaugeControls, SvgIcon$4 as BarGuageIcon, SvgIcon$5 as BarIcon, type ChartConfigLike, ChartLegend, type ChartLike, type ChartTypeLike, type DashboardExtraLike, type DashboardLike, type DashboardVisibilityLike, type DataSourceTypeLike, type EChartsHandle, type EChartsOption, EventsFunctionCategories, EventsFunctionMap, type FunctionDef, FunctionInput, FunctionMap, FunctionsCategories, FunctionsPanel, type GroupLike, type GroupStyleLike, LabelControls, LabelSearchProvider, LabelsInput, type LayoutItemLike, type LayoutsLike, LineControls, SvgIcon$7 as LineIcon, type NoteAlignmentLike, type NoteFontSizeLike, type NoteLike, type NoteVerticalAlignmentLike, type OverlayGraphLike, type PanelLike, PieChartControls, SvgIcon$3 as PieIcon, SvgIcon$2 as QueryValueIcon, ReactEChartsBase, type ReactEChartsProps, RefreshButton, RefreshContext, type ResponsiveLayoutsLike, SvgIcon$1 as ScatterIcon, SystemLabels, SvgIcon as TableIcon, type TemplateVariableLike, type TemplateViewLike, type YAxisConfigLike, defaultConfig as defaultBarGaugeConfig, defaultConfig$1 as defaultPieConfig, isAggrOrRollupFunction, sentioColors, sentioTheme, sentioThemeDark, sortMetricByName, useLabelSearch, useLabelSearchContext };