@sentio/ui-dashboard 0.1.2 → 0.2.0

package/dist/index.d.ts

@@ -1,6 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { DurationLike } from '@sentio/ui-core';
-import { ReactNode } from 'react';
+import { DurationLike, ButtonProps } from '@sentio/ui-core';
+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';
@@ -205,12 +209,12 @@ interface MetricInfoLike {
     };
 }
 
-interface Props$4 {
+interface Props$d {
     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$d): react_jsx_runtime.JSX.Element;
 
 declare enum ArgumentType {
     String = 0,
@@ -245,28 +249,28 @@ declare const EventsFunctionMap: {
     [name: string]: FunctionDef;
 };
 
-interface Props$3 {
+interface Props$c {
     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$c): react_jsx_runtime.JSX.Element;
 
-interface Props$2 {
+interface Props$b {
     value: QueryLike;
     onChange: (value: QueryLike) => void;
 }
-declare function FunctionInput({ value, onChange }: Props$2): react_jsx_runtime.JSX.Element;
+declare function FunctionInput({ value, onChange }: Props$b): react_jsx_runtime.JSX.Element;
 
-interface Props$1 {
+interface Props$a {
     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$a): react_jsx_runtime.JSX.Element;
 
-interface Props {
+interface Props$9 {
     metric?: MetricInfoLike;
     value: QueryLike;
     onChange: (value: QueryLike) => void;
@@ -276,7 +280,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$9): react_jsx_runtime.JSX.Element;
 
 declare const SystemLabels: {
     field: string;
@@ -302,4 +306,847 @@ 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$8 {
+    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$8) => 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;
+
+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, 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, LabelSearchProvider, LabelsInput, type LayoutItemLike, type LayoutsLike, SvgIcon$7 as LineIcon, type NoteAlignmentLike, type NoteFontSizeLike, type NoteLike, type NoteVerticalAlignmentLike, type OverlayGraphLike, type PanelLike, 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, isAggrOrRollupFunction, sentioColors, sentioTheme, sentioThemeDark, sortMetricByName, useLabelSearch, useLabelSearchContext };