@cloudtower/eagle 0.32.40 → 0.32.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/__test__/mockLineChart.d.ts +4 -0
- package/dist/cjs/core/ConfigProvider/index.js +5 -5
- package/dist/cjs/core/LineChart/LineChartActions.js +52 -0
- package/dist/cjs/core/LineChart/LineChartLegend.js +101 -0
- package/dist/cjs/core/LineChart/LineChartToolBar.js +56 -0
- package/dist/cjs/core/LineChart/Pointer.js +45 -0
- package/dist/cjs/core/LineChart/RenderChart.js +304 -0
- package/dist/cjs/core/LineChart/TooltipFormatter.js +70 -0
- package/dist/cjs/core/LineChart/index.js +66 -0
- package/dist/cjs/core/LineChart/styled.js +35 -0
- package/dist/cjs/core/LineChart/type.js +30 -0
- package/dist/cjs/core/LineChart/utils.js +394 -0
- package/dist/cjs/core/Loading/index.js +2 -2
- package/dist/cjs/core/Progress/progress.widgets.js +1 -1
- package/dist/cjs/core/Timeline/Timeline.widget.js +4 -4
- package/dist/cjs/core/Timeline/index.js +4 -4
- package/dist/cjs/core/index.js +9 -9
- package/dist/cjs/coreX/CheckPointList/index.js +3 -3
- package/dist/cjs/coreX/CircleLoading/index.js +4 -4
- package/dist/cjs/coreX/DateRangePicker/Calendar.js +1 -1
- package/dist/cjs/coreX/Dialogs/DeleteDialog/DeleteDialog.js +47 -0
- package/dist/cjs/coreX/Dialogs/RejectDialog/RejectDialog.js +87 -0
- package/dist/cjs/coreX/Dialogs/RejectDialog/RejectDialog.type.js +11 -0
- package/dist/cjs/coreX/Dialogs/SmallDialog.js +86 -0
- package/dist/cjs/index.js +168 -131
- package/dist/cjs/stats1.html +1 -1
- package/dist/cjs/utils/constants.js +1 -1
- package/dist/cjs/utils/tower.js +81 -0
- package/dist/components.css +2512 -2178
- package/dist/esm/core/ConfigProvider/index.js +3 -3
- package/dist/esm/core/LineChart/LineChartActions.js +46 -0
- package/dist/esm/core/LineChart/LineChartLegend.js +91 -0
- package/dist/esm/core/LineChart/LineChartToolBar.js +50 -0
- package/dist/esm/core/LineChart/Pointer.js +38 -0
- package/dist/esm/core/LineChart/RenderChart.js +296 -0
- package/dist/esm/core/LineChart/TooltipFormatter.js +63 -0
- package/dist/esm/core/LineChart/index.js +57 -0
- package/dist/esm/core/LineChart/styled.js +25 -0
- package/dist/esm/core/LineChart/type.js +26 -0
- package/dist/esm/core/LineChart/utils.js +369 -0
- package/dist/esm/core/Loading/index.js +1 -1
- package/dist/esm/core/Progress/progress.widgets.js +1 -1
- package/dist/esm/core/Timeline/Timeline.widget.js +3 -3
- package/dist/esm/core/Timeline/index.js +3 -3
- package/dist/esm/coreX/CheckPointList/index.js +3 -3
- package/dist/esm/coreX/CircleLoading/index.js +3 -3
- package/dist/esm/coreX/DateRangePicker/Calendar.js +1 -1
- package/dist/esm/coreX/Dialogs/DeleteDialog/DeleteDialog.js +41 -0
- package/dist/esm/coreX/Dialogs/RejectDialog/RejectDialog.js +81 -0
- package/dist/esm/coreX/Dialogs/RejectDialog/RejectDialog.type.js +9 -0
- package/dist/esm/coreX/Dialogs/SmallDialog.js +80 -0
- package/dist/esm/index.js +10 -2
- package/dist/esm/stats1.html +1 -1
- package/dist/esm/utils/constants.js +1 -1
- package/dist/esm/utils/tower.js +77 -1
- package/dist/src/antd.d.ts +1 -1
- package/dist/src/core/ConfigProvider/index.d.ts +2 -2
- package/dist/src/core/LineChart/LineChartActions.d.ts +7 -0
- package/dist/src/core/LineChart/LineChartLegend.d.ts +18 -0
- package/dist/src/core/LineChart/LineChartToolBar.d.ts +20 -0
- package/dist/src/core/LineChart/Pointer.d.ts +6 -0
- package/dist/src/core/LineChart/RenderChart.d.ts +45 -0
- package/dist/src/core/LineChart/TooltipFormatter.d.ts +10 -0
- package/dist/src/core/LineChart/__test__/h5_css.test.d.ts +1 -0
- package/dist/src/core/LineChart/index.d.ts +8 -0
- package/dist/src/core/LineChart/styled.d.ts +12 -0
- package/dist/src/core/LineChart/type.d.ts +191 -0
- package/dist/src/core/LineChart/utils.d.ts +56 -0
- package/dist/src/core/Metric/metric.d.ts +1 -1
- package/dist/src/core/Timeline/Timeline.type.d.ts +2 -2
- package/dist/src/core/index.d.ts +4 -1
- package/dist/src/coreX/CheckPointList/index.d.ts +1 -1
- package/dist/src/coreX/Dialogs/DeleteDialog/DeleteDialog.d.ts +3 -0
- package/dist/src/coreX/Dialogs/DeleteDialog/DeleteDialog.type.d.ts +19 -0
- package/dist/src/coreX/Dialogs/DeleteDialog/index.d.ts +2 -0
- package/dist/src/coreX/Dialogs/RejectDialog/RejectDialog.d.ts +3 -0
- package/dist/src/coreX/Dialogs/RejectDialog/RejectDialog.type.d.ts +59 -0
- package/dist/src/coreX/Dialogs/RejectDialog/index.d.ts +2 -0
- package/dist/src/coreX/Dialogs/SmallDialog.d.ts +31 -0
- package/dist/src/coreX/Dialogs/index.d.ts +3 -0
- package/dist/src/coreX/index.d.ts +2 -1
- package/dist/src/utils/tower.d.ts +12 -0
- package/dist/stories/docs/core/LineChart.stories.d.ts +16 -0
- package/dist/stories/docs/core/Timeline.stories.d.ts +2 -2
- package/dist/stories/docs/coreX/CheckPointList.stories.d.ts +1 -1
- package/dist/stories/docs/coreX/Dialogs/DeleteDialog.stories.d.ts +37 -0
- package/dist/stories/docs/coreX/Dialogs/RejectDialog.stories.d.ts +89 -0
- package/dist/stories/docs/coreX/Show.stories.d.ts +2 -2
- package/dist/style.css +2158 -1862
- package/dist/variables.scss +2 -0
- package/package.json +5 -6
package/dist/esm/utils/tower.js
CHANGED
|
@@ -185,5 +185,81 @@ function formatSpeed(input, decimals = 0) {
|
|
|
185
185
|
unit: units[i]
|
|
186
186
|
};
|
|
187
187
|
}
|
|
188
|
+
const K = 1e3;
|
|
189
|
+
function formatCount(input) {
|
|
190
|
+
if (input === MAGIC_METRIC_NULL) {
|
|
191
|
+
input = 0;
|
|
192
|
+
}
|
|
193
|
+
const units = ["", "K", "M", "G", "T", "P"];
|
|
194
|
+
let i = Math.floor(Math.log(input || 1) / Math.log(K));
|
|
195
|
+
i = i < 0 ? 0 : i > units.length - 1 ? units.length - 1 : i;
|
|
196
|
+
return {
|
|
197
|
+
value: parseFloat((input / Math.pow(K, i)).toFixed(2)),
|
|
198
|
+
unit: units[i]
|
|
199
|
+
};
|
|
200
|
+
}
|
|
201
|
+
function formatNanoSecond(input) {
|
|
202
|
+
if (input <= 0 || input === MAGIC_METRIC_NULL) {
|
|
203
|
+
return {
|
|
204
|
+
value: 0,
|
|
205
|
+
unit: ""
|
|
206
|
+
};
|
|
207
|
+
}
|
|
208
|
+
const units = ["ns", "\u03BCs", "ms", "s", "min", "h", "day"];
|
|
209
|
+
const divider = [1e3, 1e3, 1e3, 60, 60, 24];
|
|
210
|
+
let multiplier = 1;
|
|
211
|
+
for (let i = 0; i < divider.length; i++) {
|
|
212
|
+
if (input < multiplier * divider[i]) {
|
|
213
|
+
return {
|
|
214
|
+
value: parseFloat((input / multiplier).toFixed(2)),
|
|
215
|
+
unit: units[i]
|
|
216
|
+
};
|
|
217
|
+
}
|
|
218
|
+
multiplier *= divider[i];
|
|
219
|
+
}
|
|
220
|
+
return {
|
|
221
|
+
value: parseFloat((input / multiplier).toFixed(2)),
|
|
222
|
+
unit: "day"
|
|
223
|
+
};
|
|
224
|
+
}
|
|
225
|
+
function formatTemperature(input, decimals = 2) {
|
|
226
|
+
if (input === MAGIC_METRIC_NULL) {
|
|
227
|
+
input = 0;
|
|
228
|
+
}
|
|
229
|
+
return {
|
|
230
|
+
value: parseFloat(input.toFixed(decimals)),
|
|
231
|
+
unit: "\u2103"
|
|
232
|
+
};
|
|
233
|
+
}
|
|
234
|
+
const unitRules = [
|
|
235
|
+
{
|
|
236
|
+
divider: [1e3, 1e3, 1e3, 1e3, 1e3, 1e3],
|
|
237
|
+
unit: ["", "K", "M", "G", "T", "P"]
|
|
238
|
+
},
|
|
239
|
+
{
|
|
240
|
+
divider: [1e3, 1e3, 1e3, 1e3, 1e3, 1e3],
|
|
241
|
+
unit: ["bps", "Kbps", "Mbps", "Gbps", "Tbps", "Pbps"]
|
|
242
|
+
},
|
|
243
|
+
{
|
|
244
|
+
divider: [1e3, 1e3, 1e3, 1e3, 1e3, 1e3],
|
|
245
|
+
unit: ["Bps", "KBps", "MBps", "GBps", "TBps", "PBps"]
|
|
246
|
+
},
|
|
247
|
+
{
|
|
248
|
+
divider: [1024, 1024, 1024, 1024, 1024, 1024],
|
|
249
|
+
unit: ["B", "KiB", "MiB", "GiB", "TiB", "PiB"]
|
|
250
|
+
},
|
|
251
|
+
{
|
|
252
|
+
divider: [1024, 1024, 1024, 1024, 1024, 1024],
|
|
253
|
+
unit: ["B/s", "KiB/s", "MiB/s", "GiB/s", "TiB/s", "PiB/s"]
|
|
254
|
+
},
|
|
255
|
+
{
|
|
256
|
+
divider: [1e3, 1e3, 1e3, 60, 60, 24],
|
|
257
|
+
unit: ["ns", "\u03BCs", "ms", "s", "min", "h"]
|
|
258
|
+
},
|
|
259
|
+
{
|
|
260
|
+
divider: [1e3, 1e3, 1e3, 1e3, 1e3],
|
|
261
|
+
unit: ["Hz", "KHz", "MHz", "GHz", "THz"]
|
|
262
|
+
}
|
|
263
|
+
];
|
|
188
264
|
|
|
189
|
-
export { DAY, HOUR, MAGIC_METRIC_NULL, MINUTE, SECOND, WEEK, formatBitPerSecond, formatBits, formatBps, formatBytePerSecond, formatBytes, formatFrequency, formatPercent, formatSeconds, formatSpeed };
|
|
265
|
+
export { DAY, HOUR, K, MAGIC_METRIC_NULL, MINUTE, SECOND, WEEK, formatBitPerSecond, formatBits, formatBps, formatBytePerSecond, formatBytes, formatCount, formatFrequency, formatNanoSecond, formatPercent, formatSeconds, formatSpeed, formatTemperature, unitRules };
|
package/dist/src/antd.d.ts
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { MenuItemGroupProps } from "antd/lib/menu";
|
|
3
3
|
import { ModalProps as AntdModalProps } from "antd/lib/modal";
|
|
4
4
|
import { FC } from "react";
|
|
5
|
-
export { Badge as AntdBadge, Button as AntdButton, Checkbox as AntdCheckbox, Collapse as AntdCollapse, Divider as AntdDivider, Drawer as AntdDrawer, Empty as AntdEmpty, Input as AntdInput, message as AntdMessage, Select as AntdSelect, Steps as AntdSteps, Switch as AntdSwitch, Table as AntdTable, TimePicker as AntdTimePicker, Tooltip as AntdTooltip, TreeSelect as AntdTreeSelect, AutoComplete, Col, DatePicker, Dropdown, Layout, List, Menu, Popover, Row,
|
|
5
|
+
export { Badge as AntdBadge, Button as AntdButton, Checkbox as AntdCheckbox, Collapse as AntdCollapse, Divider as AntdDivider, Drawer as AntdDrawer, Empty as AntdEmpty, Input as AntdInput, message as AntdMessage, Select as AntdSelect, Skeleton as AntdSkeleton, Steps as AntdSteps, Switch as AntdSwitch, Table as AntdTable, Timeline as AntdTimeline, TimePicker as AntdTimePicker, Tooltip as AntdTooltip, TreeSelect as AntdTreeSelect, AutoComplete, Col, DatePicker, Dropdown, Layout, List, Menu, Popover, Row, Tabs, Tree, Typography, Upload, } from "antd";
|
|
6
6
|
export declare const DatePickerRangePicker: import("react").ComponentClass<import("antd/lib/date-picker/generatePicker").RangePickerProps<import("moment").Moment>, any>;
|
|
7
7
|
export declare const ListItem: import("antd/lib/list/Item").ListItemTypeProps;
|
|
8
8
|
export declare const MenuItemGroup: import("react").ComponentType<MenuItemGroupProps>;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
+
import "dayjs/locale/zh-cn";
|
|
2
|
+
import "moment/locale/zh-cn";
|
|
1
3
|
import { ConfigProviderProps } from "antd/lib/config-provider";
|
|
2
4
|
import { ConfigProviderProps as Antd5ConfigProviderProps } from "antd5";
|
|
3
5
|
import React from "react";
|
|
4
|
-
import "dayjs/locale/zh-cn";
|
|
5
|
-
import "moment/locale/zh-cn";
|
|
6
6
|
export type ConfigProps = {
|
|
7
7
|
antd4Configs?: ConfigProviderProps;
|
|
8
8
|
antd5Configs?: Antd5ConfigProviderProps;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ILineChartILegend, ILineChartMetricStream } from "../../core/LineChart/type";
|
|
2
|
+
import React from "react";
|
|
3
|
+
export declare const LineChartColorBlock: React.FC<{
|
|
4
|
+
background?: string;
|
|
5
|
+
borderd?: boolean;
|
|
6
|
+
}>;
|
|
7
|
+
export interface ILineChartLegendProps {
|
|
8
|
+
streams: ILineChartMetricStream[];
|
|
9
|
+
metricName: string;
|
|
10
|
+
deselected: string[];
|
|
11
|
+
hovering: string[];
|
|
12
|
+
hovereringSelf: string[];
|
|
13
|
+
onClick: (id: string) => void;
|
|
14
|
+
onHover: (method: "enter" | "leave", id: string) => void;
|
|
15
|
+
legends: ILineChartILegend[];
|
|
16
|
+
}
|
|
17
|
+
declare const LineChartLegend: (props: ILineChartLegendProps) => React.JSX.Element;
|
|
18
|
+
export default LineChartLegend;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { ILineChartILegend, ILineChartMetricStream } from "../../core/LineChart/type";
|
|
2
|
+
import { DropdownProps } from "antd5";
|
|
3
|
+
import React from "react";
|
|
4
|
+
declare const LineChartToolBar: ({ showLegend, streams, metricName, deselected, hovering, onLegendClick, onLegendHover, legends, actionsProps, dropdownProps, hoveringSelf, }: {
|
|
5
|
+
showLegend?: boolean | undefined;
|
|
6
|
+
streams: ILineChartMetricStream[];
|
|
7
|
+
metricName: string;
|
|
8
|
+
deselected: string[];
|
|
9
|
+
hovering: string[];
|
|
10
|
+
hoveringSelf: string[];
|
|
11
|
+
onLegendClick: (id: string) => void;
|
|
12
|
+
onLegendHover: (method: "enter" | "leave", id: string) => void;
|
|
13
|
+
legends: ILineChartILegend[];
|
|
14
|
+
actionsProps?: {
|
|
15
|
+
show?: boolean | undefined;
|
|
16
|
+
label: string | React.ReactNode;
|
|
17
|
+
} | undefined;
|
|
18
|
+
dropdownProps?: DropdownProps | undefined;
|
|
19
|
+
}) => React.JSX.Element;
|
|
20
|
+
export default LineChartToolBar;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { ILineChartDateRange, ILineChartGraphType, ILineChartMetric } from "../../core/LineChart/type";
|
|
2
|
+
import { DropdownProps } from "antd5";
|
|
3
|
+
import React from "react";
|
|
4
|
+
import { TooltipProps } from "recharts";
|
|
5
|
+
import { NameType, Payload, ValueType } from "recharts/types/component/DefaultTooltipContent";
|
|
6
|
+
import { AxisDomain } from "recharts/types/util/types";
|
|
7
|
+
export interface IChartProps<TValue extends ValueType = string, TName extends NameType = number> {
|
|
8
|
+
metricName: string;
|
|
9
|
+
yAxisAlign?: "left" | "right";
|
|
10
|
+
showXAxis?: boolean;
|
|
11
|
+
showLegend?: boolean;
|
|
12
|
+
syncId: string;
|
|
13
|
+
height: number;
|
|
14
|
+
type: ILineChartGraphType;
|
|
15
|
+
mode?: "simple" | "legend" | "single";
|
|
16
|
+
averageLine?: boolean;
|
|
17
|
+
dropdownProps?: DropdownProps;
|
|
18
|
+
onLabelsChange?: (labels: string[]) => void;
|
|
19
|
+
metric: ILineChartMetric;
|
|
20
|
+
yAxisProps?: {
|
|
21
|
+
domain?: AxisDomain;
|
|
22
|
+
ticks?: (string | number)[];
|
|
23
|
+
tickFormatter?: (value: any, index: number) => string;
|
|
24
|
+
};
|
|
25
|
+
xAxisProps?: {
|
|
26
|
+
domain?: AxisDomain;
|
|
27
|
+
ticks?: (string | number)[];
|
|
28
|
+
tickFormatter?: (value: any, index: number) => string;
|
|
29
|
+
};
|
|
30
|
+
actionsProps?: {
|
|
31
|
+
show?: boolean;
|
|
32
|
+
label: string | React.ReactNode;
|
|
33
|
+
dropdownProps?: DropdownProps;
|
|
34
|
+
};
|
|
35
|
+
tooltipProps: TooltipProps<TValue, TName> & {
|
|
36
|
+
format?: (payload: Payload<number, string>) => string;
|
|
37
|
+
};
|
|
38
|
+
dateRange?: ILineChartDateRange;
|
|
39
|
+
emptyText?: React.ReactNode | string;
|
|
40
|
+
emptyIcon?: React.ReactNode | string;
|
|
41
|
+
}
|
|
42
|
+
declare const RenderChart: (props: IChartProps & {
|
|
43
|
+
width: number;
|
|
44
|
+
}) => React.JSX.Element;
|
|
45
|
+
export default RenderChart;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ILineChartLegend } from "../../core/LineChart/type";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { TooltipProps } from "recharts";
|
|
4
|
+
import { Payload } from "recharts/types/component/DefaultTooltipContent";
|
|
5
|
+
declare const TooltipFormatter: React.FC<TooltipProps<number, string> & {
|
|
6
|
+
deselected: string[];
|
|
7
|
+
legends: ILineChartLegend[];
|
|
8
|
+
format: (payload: Payload<number, string>) => string;
|
|
9
|
+
}>;
|
|
10
|
+
export default TooltipFormatter;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { LineChartProps } from "./type";
|
|
3
|
+
declare const LineChart: React.ForwardRefExoticComponent<LineChartProps & React.RefAttributes<HTMLDivElement>>;
|
|
4
|
+
export default LineChart;
|
|
5
|
+
export * from "./type";
|
|
6
|
+
export * from "./utils";
|
|
7
|
+
export { default as LineChartLegend } from "./LineChartLegend";
|
|
8
|
+
export * from "./LineChartLegend";
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const MetricPlaceholderWrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
|
|
3
|
+
export declare const MetricLegendTabStyle: import("@linaria/core").LinariaClassName;
|
|
4
|
+
export declare const LegendStyle: import("@linaria/core").LinariaClassName;
|
|
5
|
+
export declare const LegendItemsStyle: import("@linaria/core").LinariaClassName;
|
|
6
|
+
export declare const LegendItemsStyleDropdown: import("@linaria/core").LinariaClassName;
|
|
7
|
+
export declare const ColorBlockStyle: import("@linaria/core").LinariaClassName;
|
|
8
|
+
export declare const ExtraResource: import("@linaria/core").LinariaClassName;
|
|
9
|
+
export declare const LineChartWrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
|
|
10
|
+
export declare const TooltipWrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
|
|
11
|
+
export declare const TooltipColumn: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
|
|
12
|
+
export declare const LineChartColorBlockStyle: import("@linaria/core").LinariaClassName;
|
|
@@ -0,0 +1,191 @@
|
|
|
1
|
+
import { Dayjs } from "dayjs";
|
|
2
|
+
import { TFunction } from "i18next";
|
|
3
|
+
import { ReactElement } from "react";
|
|
4
|
+
import { IChartProps } from "../../core/LineChart/RenderChart";
|
|
5
|
+
import { PickerDateRange } from "../../coreX/DateRangePicker/dateRangePicker.type";
|
|
6
|
+
export interface ILineChartMetricData {
|
|
7
|
+
id: string;
|
|
8
|
+
}
|
|
9
|
+
export interface ILineChartDataPoint {
|
|
10
|
+
t: number;
|
|
11
|
+
v?: number;
|
|
12
|
+
[key: DataPointValueKey]: number | undefined;
|
|
13
|
+
}
|
|
14
|
+
type DataPointValueKey = `v${number}`;
|
|
15
|
+
export interface ILineChartILegend {
|
|
16
|
+
id: string;
|
|
17
|
+
name: string;
|
|
18
|
+
color?: string;
|
|
19
|
+
fill?: string;
|
|
20
|
+
stroke?: boolean;
|
|
21
|
+
}
|
|
22
|
+
export interface ILineChartMetricStream {
|
|
23
|
+
points: ILineChartDataPoint[];
|
|
24
|
+
legend: ILineChartILegend;
|
|
25
|
+
step: number;
|
|
26
|
+
tolerance: number;
|
|
27
|
+
}
|
|
28
|
+
export interface ILineChartMetric {
|
|
29
|
+
sample_streams: ILineChartMetricStream[];
|
|
30
|
+
unit: ILineChartMetricUnit;
|
|
31
|
+
dropped: boolean;
|
|
32
|
+
}
|
|
33
|
+
export declare enum ILineChartTimeUnit {
|
|
34
|
+
Day = "DAY",
|
|
35
|
+
Hour = "HOUR",
|
|
36
|
+
Month = "MONTH"
|
|
37
|
+
}
|
|
38
|
+
export declare enum ILineChartMetricUnit {
|
|
39
|
+
Count = "COUNT",
|
|
40
|
+
DataRateBit = "DATA_RATE_BIT",
|
|
41
|
+
DataRateByte = "DATA_RATE_BYTE",
|
|
42
|
+
DataSize = "DATA_SIZE",
|
|
43
|
+
Frequency = "FREQUENCY",
|
|
44
|
+
Load = "LOAD",
|
|
45
|
+
Percent = "PERCENT",
|
|
46
|
+
Ratio = "RATIO",
|
|
47
|
+
Temperature = "TEMPERATURE",
|
|
48
|
+
Time = "TIME"
|
|
49
|
+
}
|
|
50
|
+
export declare enum ILineChartGraphType {
|
|
51
|
+
Area = "AREA",
|
|
52
|
+
Stack = "STACK"
|
|
53
|
+
}
|
|
54
|
+
export type ILineChartDateRange = [Dayjs, Dayjs];
|
|
55
|
+
export type ChartProps = {
|
|
56
|
+
metric: string;
|
|
57
|
+
legendTooltip?: ReactElement;
|
|
58
|
+
renderThresholdTooltip?: (info: {
|
|
59
|
+
current: string;
|
|
60
|
+
max: string;
|
|
61
|
+
}) => ReactElement;
|
|
62
|
+
yAxisAlign?: "left" | "right";
|
|
63
|
+
showXaxis?: boolean;
|
|
64
|
+
showLegend?: boolean;
|
|
65
|
+
uuid: string;
|
|
66
|
+
height: number;
|
|
67
|
+
range: string;
|
|
68
|
+
type: ILineChartGraphType;
|
|
69
|
+
mode?: "simple" | "legend" | "single";
|
|
70
|
+
offScreen: boolean;
|
|
71
|
+
averageLine?: boolean;
|
|
72
|
+
addView?: () => void;
|
|
73
|
+
exportCSV?: () => void;
|
|
74
|
+
dateRange?: ILineChartDateRange;
|
|
75
|
+
formatLegendItemName?: FormatName;
|
|
76
|
+
history: History;
|
|
77
|
+
};
|
|
78
|
+
export interface ILineChartLegend {
|
|
79
|
+
id: string;
|
|
80
|
+
name: string;
|
|
81
|
+
color?: string;
|
|
82
|
+
fill?: string;
|
|
83
|
+
stroke?: boolean;
|
|
84
|
+
}
|
|
85
|
+
/**
|
|
86
|
+
* 折线图组件属性接口
|
|
87
|
+
* @description 用于展示时序数据的折线图组件,支持多种展示模式和交互功能
|
|
88
|
+
*/
|
|
89
|
+
export type LineChartProps = {
|
|
90
|
+
/**
|
|
91
|
+
* 图表高度
|
|
92
|
+
* @default 154
|
|
93
|
+
*/
|
|
94
|
+
height?: number;
|
|
95
|
+
/**
|
|
96
|
+
* 是否显示鼠标悬停指示器
|
|
97
|
+
* @default true
|
|
98
|
+
*/
|
|
99
|
+
showPointer?: boolean;
|
|
100
|
+
/**
|
|
101
|
+
* Y轴对齐方式
|
|
102
|
+
* @default "left"
|
|
103
|
+
*/
|
|
104
|
+
yAxisAlign?: "left" | "right";
|
|
105
|
+
/**
|
|
106
|
+
* 是否显示X轴
|
|
107
|
+
* @default false
|
|
108
|
+
*/
|
|
109
|
+
showXaxis?: boolean;
|
|
110
|
+
/**
|
|
111
|
+
* 是否显示图例
|
|
112
|
+
* @default true
|
|
113
|
+
*/
|
|
114
|
+
showLegend?: boolean;
|
|
115
|
+
/**
|
|
116
|
+
* 图表核心配置项
|
|
117
|
+
* @description 包含图表的所有核心配置,如数据、样式、交互等
|
|
118
|
+
*/
|
|
119
|
+
chartProps: Omit<IChartProps, "uuid">;
|
|
120
|
+
};
|
|
121
|
+
/**
|
|
122
|
+
* 图例名称格式化函数类型
|
|
123
|
+
*/
|
|
124
|
+
export type FormatName = (params: {
|
|
125
|
+
/** 指标类型 */
|
|
126
|
+
type: string | undefined;
|
|
127
|
+
/** 指标名称 */
|
|
128
|
+
metricName: string;
|
|
129
|
+
/** 国际化函数 */
|
|
130
|
+
t: TFunction;
|
|
131
|
+
/** 数据索引 */
|
|
132
|
+
dIndex: number;
|
|
133
|
+
}) => string;
|
|
134
|
+
/**
|
|
135
|
+
* 指标属性接口
|
|
136
|
+
* @description 用于配置指标相关的展示和行为
|
|
137
|
+
*/
|
|
138
|
+
export type LineChartMetricProps = {
|
|
139
|
+
/** 指标名称 */
|
|
140
|
+
metric: string;
|
|
141
|
+
/**
|
|
142
|
+
* 图表高度
|
|
143
|
+
* @default 154
|
|
144
|
+
*/
|
|
145
|
+
height?: number;
|
|
146
|
+
/**
|
|
147
|
+
* 是否显示鼠标悬停指示器
|
|
148
|
+
* @default true
|
|
149
|
+
*/
|
|
150
|
+
showPointer?: boolean;
|
|
151
|
+
/**
|
|
152
|
+
* Y轴对齐方式
|
|
153
|
+
* @default 'left'
|
|
154
|
+
*/
|
|
155
|
+
yAxisAlign?: "left" | "right";
|
|
156
|
+
/**
|
|
157
|
+
* 是否显示X轴
|
|
158
|
+
* @default false
|
|
159
|
+
*/
|
|
160
|
+
showXaxis?: boolean;
|
|
161
|
+
/**
|
|
162
|
+
* 是否显示图例
|
|
163
|
+
* @default true
|
|
164
|
+
*/
|
|
165
|
+
showLegend?: boolean;
|
|
166
|
+
/**
|
|
167
|
+
* 指标宽度配置
|
|
168
|
+
* @description 用于配置不同指标的宽度
|
|
169
|
+
*/
|
|
170
|
+
metricWidth?: Record<string, number>;
|
|
171
|
+
/**
|
|
172
|
+
* 展示模式
|
|
173
|
+
* @default 'legend'
|
|
174
|
+
* - simple: 简单模式,不显示图例
|
|
175
|
+
* - legend: 图例模式,显示完整图例
|
|
176
|
+
* - single: 单一模式,适用于单指标展示
|
|
177
|
+
*/
|
|
178
|
+
mode?: "simple" | "legend" | "single";
|
|
179
|
+
/**
|
|
180
|
+
* 是否显示平均线
|
|
181
|
+
* @default false
|
|
182
|
+
*/
|
|
183
|
+
averageLine?: boolean;
|
|
184
|
+
/** 日期范围 */
|
|
185
|
+
dateRange?: PickerDateRange;
|
|
186
|
+
/** 图例项名称格式化函数 */
|
|
187
|
+
formatLegendItemName?: FormatName;
|
|
188
|
+
/** 历史记录对象 */
|
|
189
|
+
history: History;
|
|
190
|
+
} & Pick<ChartProps, "legendTooltip" | "renderThresholdTooltip">;
|
|
191
|
+
export {};
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { ILineChartDateRange, ILineChartGraphType, ILineChartDataPoint, ILineChartMetric, ILineChartMetricUnit } from "../../core/LineChart/type";
|
|
2
|
+
import { formatBitPerSecond, formatBps, formatBytes, formatCount, formatFrequency, formatNanoSecond, formatPercent, formatTemperature } from "../../utils/tower";
|
|
3
|
+
export declare function filterLineChartPointsByDateRange(points: ILineChartDataPoint[], dateRange?: ILineChartDateRange): ILineChartDataPoint[];
|
|
4
|
+
export declare const parseLineChartRange: (range: string) => {
|
|
5
|
+
span: number;
|
|
6
|
+
unit: "h" | "d";
|
|
7
|
+
};
|
|
8
|
+
export declare const lineChartXaxisCal: (lastTime: number, dateRange: ILineChartDateRange, width: number) => number[];
|
|
9
|
+
export declare const lineChartTickFormatter: (tick: number, dateRange: ILineChartDateRange) => string;
|
|
10
|
+
export declare function getLineChartXAxisDomain(dateRange: ILineChartDateRange, xaxisLastTime?: number): [number, number];
|
|
11
|
+
export declare const getLineChartRangeTimestamp: (dateRange: ILineChartDateRange) => number;
|
|
12
|
+
export declare const getLineChartStep: (dateRange: ILineChartDateRange) => number;
|
|
13
|
+
export declare const filterLineChartDataOverlapping: <Data extends {
|
|
14
|
+
t: number;
|
|
15
|
+
v?: number | undefined;
|
|
16
|
+
} = {
|
|
17
|
+
t: number;
|
|
18
|
+
v?: number | undefined;
|
|
19
|
+
}>(data: Data[], startTimestamp: number, length: number, step: number, tolerance: number) => (Data | {
|
|
20
|
+
t: number;
|
|
21
|
+
v: number;
|
|
22
|
+
})[];
|
|
23
|
+
export declare const convertLineChartDataStruct: (streams: ILineChartDataPoint[][]) => ILineChartDataPoint[];
|
|
24
|
+
export declare const filterLineChartOverlappingMetric: (metric: ILineChartMetric, dateRange: ILineChartDateRange) => {
|
|
25
|
+
sample_streams: {
|
|
26
|
+
points: (ILineChartDataPoint | {
|
|
27
|
+
t: number;
|
|
28
|
+
v: number;
|
|
29
|
+
})[];
|
|
30
|
+
legend: import("../../core/LineChart/type").ILineChartILegend;
|
|
31
|
+
step: number;
|
|
32
|
+
tolerance: number;
|
|
33
|
+
}[];
|
|
34
|
+
unit: ILineChartMetricUnit;
|
|
35
|
+
dropped: boolean;
|
|
36
|
+
};
|
|
37
|
+
export declare const deletePointsOutOfRange: (data: ILineChartDataPoint[], timeRange: ILineChartDateRange, now: number) => ILineChartDataPoint[];
|
|
38
|
+
export declare const getFirstExpectedTimestamp: (data: ILineChartDataPoint[], timeRange: ILineChartDateRange, now: number, step: number, dateRange: ILineChartDateRange | undefined) => number;
|
|
39
|
+
export declare const addMissingDataWithZero: (data: ILineChartDataPoint[], timeRange: ILineChartDateRange, unit: ILineChartMetricUnit, step: number, dateRange?: ILineChartDateRange) => ILineChartDataPoint[];
|
|
40
|
+
export declare const convertLineChartUnit: (value: number, from: string, to: string, decimals?: number) => number;
|
|
41
|
+
export declare const UNIT_FORMATTER: {
|
|
42
|
+
readonly PERCENT: readonly [typeof formatPercent, "%", 2, false];
|
|
43
|
+
readonly RATIO: readonly [typeof formatPercent, "%"];
|
|
44
|
+
readonly COUNT: readonly [typeof formatCount, ""];
|
|
45
|
+
readonly DATA_SIZE: readonly [typeof formatBytes, "B"];
|
|
46
|
+
readonly DATA_RATE_BYTE: readonly [typeof formatBps, "Bps"];
|
|
47
|
+
readonly DATA_RATE_BIT: readonly [typeof formatBitPerSecond, "bps"];
|
|
48
|
+
readonly TIME: readonly [typeof formatNanoSecond, "ns"];
|
|
49
|
+
readonly FREQUENCY: readonly [typeof formatFrequency, "Hz"];
|
|
50
|
+
readonly TEMPERATURE: readonly [typeof formatTemperature, "℃"];
|
|
51
|
+
readonly LOAD: readonly [typeof formatCount, ""];
|
|
52
|
+
};
|
|
53
|
+
export declare const getLineChartYDataMax: (dataPoints: ILineChartDataPoint[], type: ILineChartGraphType) => number;
|
|
54
|
+
export declare const getYAxisUpperBound: (max: number, type: ILineChartMetricUnit) => number;
|
|
55
|
+
export declare const getYAxisDomain: (dataPoints: ILineChartDataPoint[], graphType: ILineChartGraphType, unitType: ILineChartMetricUnit) => [number, number];
|
|
56
|
+
export declare function lineChartYaxisTickFormatter(value?: number, unit?: ILineChartMetricUnit): string;
|
|
@@ -2,7 +2,7 @@ import { DateRange, IDataPoint, IMetric } from "../../core/Metric/type";
|
|
|
2
2
|
export declare function filterPointsByDateRange(points: IDataPoint[], dateRange: DateRange): IDataPoint[];
|
|
3
3
|
export declare const parseRange: (range: string) => {
|
|
4
4
|
span: number;
|
|
5
|
-
unit: "
|
|
5
|
+
unit: "h" | "d";
|
|
6
6
|
};
|
|
7
7
|
export declare const xaxisCal: (lastTime: number, dateRange: DateRange) => number[];
|
|
8
8
|
export declare const tickFormatter: (tick: number, dateRange: DateRange) => string;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { AlertProps } from "../../core/Alert";
|
|
2
|
-
import { ReactNode } from "react";
|
|
3
|
-
import { TagProps } from "../../core/Tag";
|
|
4
2
|
import { LinkProps } from "../../core/Link";
|
|
3
|
+
import { TagProps } from "../../core/Tag";
|
|
4
|
+
import { ReactNode } from "react";
|
|
5
5
|
/**
|
|
6
6
|
* 标签属性,扩展自基础Tag组件属性
|
|
7
7
|
* @property {string} category - 固定为 'tag',标识这是一个标签元素
|
package/dist/src/core/index.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
export * from "./Timeline";
|
|
2
1
|
export * from "./AccordionCard";
|
|
3
2
|
export * from "./Alert";
|
|
4
3
|
export * from "./Antd5Anchor";
|
|
@@ -44,6 +43,8 @@ export * from "./InputTagItem";
|
|
|
44
43
|
export * from "./KitStoreProvider";
|
|
45
44
|
export * from "./LegacySelect";
|
|
46
45
|
export * from "./Link";
|
|
46
|
+
export * from "./LineChart";
|
|
47
|
+
export * from "./LineChart";
|
|
47
48
|
export * from "./Loading";
|
|
48
49
|
export * from "./message";
|
|
49
50
|
export * from "./message-group";
|
|
@@ -83,6 +84,7 @@ export * from "./TableForm";
|
|
|
83
84
|
export * from "./Tag";
|
|
84
85
|
export * from "./TextArea";
|
|
85
86
|
export * from "./Time";
|
|
87
|
+
export * from "./Timeline";
|
|
86
88
|
export * from "./TimePicker";
|
|
87
89
|
export * from "./TimeZoneSelect";
|
|
88
90
|
export * from "./Token";
|
|
@@ -142,6 +144,7 @@ export { default as InputTagItem } from "./InputTagItem";
|
|
|
142
144
|
export { default as KitStoreProvider } from "./KitStoreProvider";
|
|
143
145
|
export { default as LegacySelect } from "./LegacySelect";
|
|
144
146
|
export { default as Link } from "./Link";
|
|
147
|
+
export { default as LineChart } from "./LineChart";
|
|
145
148
|
export { default as Loading } from "./Loading";
|
|
146
149
|
export { default as message } from "./message";
|
|
147
150
|
export { default as Metric } from "./Metric";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { CheckPointItemProps, CheckPointListProps } from "./checkpointlist.type";
|
|
3
3
|
export declare const CheckPointItem: React.FC<CheckPointItemProps>;
|
|
4
4
|
/**
|
|
5
5
|
* CheckPointList displays a list of checkpoint items with filtering capability
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export interface DeleteDialogProps {
|
|
3
|
+
/** 弹窗标题 */
|
|
4
|
+
title: React.ReactNode;
|
|
5
|
+
/** 主要描述文本 */
|
|
6
|
+
description?: React.ReactNode;
|
|
7
|
+
/** 辅助说明文本 */
|
|
8
|
+
secondaryDesc?: React.ReactNode;
|
|
9
|
+
/** 取消按钮文案 */
|
|
10
|
+
cancelText?: string;
|
|
11
|
+
/** 确认按钮文案 */
|
|
12
|
+
okText?: string;
|
|
13
|
+
/** 点击确认按钮回调 */
|
|
14
|
+
onOk?: (popModal: () => void) => void;
|
|
15
|
+
/** 点击取消按钮或关闭弹窗回调 */
|
|
16
|
+
onCancel?: (popModal: () => void) => void;
|
|
17
|
+
/** 自定义类名 */
|
|
18
|
+
className?: string;
|
|
19
|
+
}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export type RejectReason = string;
|
|
3
|
+
export type RejectContent = Record<string, RejectReason[]>;
|
|
4
|
+
export declare enum RejectDialogType {
|
|
5
|
+
Single = "RejectSingle",
|
|
6
|
+
All = "RejectAll",
|
|
7
|
+
Part = "RejectPart",
|
|
8
|
+
Custom = "RejectCustom"
|
|
9
|
+
}
|
|
10
|
+
interface BaseRejectDialogProps {
|
|
11
|
+
/** 弹窗标题 */
|
|
12
|
+
title: React.ReactNode;
|
|
13
|
+
/** 补充描述文本 */
|
|
14
|
+
description?: React.ReactNode;
|
|
15
|
+
/** 取消按钮文案 */
|
|
16
|
+
cancelText?: string;
|
|
17
|
+
/** 点击取消按钮或关闭弹窗回调 */
|
|
18
|
+
onCancel?: (popModal: () => void) => void;
|
|
19
|
+
/** 弹窗宽度 */
|
|
20
|
+
width?: number;
|
|
21
|
+
/** 自定义类名 */
|
|
22
|
+
className?: string;
|
|
23
|
+
/** 自定义footer类名 */
|
|
24
|
+
footerClassName?: string;
|
|
25
|
+
}
|
|
26
|
+
interface SingleRejectDialogProps extends BaseRejectDialogProps {
|
|
27
|
+
type: RejectDialogType.Single;
|
|
28
|
+
/** 拒绝原因,可以是单个字符串或字符串数组 */
|
|
29
|
+
content: string | string[];
|
|
30
|
+
}
|
|
31
|
+
interface MultiAllRejectDialogProps extends BaseRejectDialogProps {
|
|
32
|
+
type: RejectDialogType.All;
|
|
33
|
+
/** 灰色的进一步描述 */
|
|
34
|
+
secondaryDesc?: React.ReactNode;
|
|
35
|
+
/** 多个对象的拒绝原因,格式为 { [对象名]: string[] } */
|
|
36
|
+
content: RejectContent;
|
|
37
|
+
}
|
|
38
|
+
interface MultiPartialRejectDialogProps extends BaseRejectDialogProps {
|
|
39
|
+
type: RejectDialogType.Part;
|
|
40
|
+
/** 灰色的进一步描述 */
|
|
41
|
+
secondaryDesc?: React.ReactNode;
|
|
42
|
+
/** 多个对象的拒绝原因,格式为 { [对象名]: string[] } */
|
|
43
|
+
content: Record<string, string[]>;
|
|
44
|
+
/** 部分拒绝时的额外说明 */
|
|
45
|
+
partialDescription: React.ReactNode;
|
|
46
|
+
/** 确认按钮文案 */
|
|
47
|
+
okText?: string;
|
|
48
|
+
/** 点击确认按钮回调 */
|
|
49
|
+
onOk?: (popModal: () => void) => void;
|
|
50
|
+
}
|
|
51
|
+
interface CustomRejectDialogProps extends BaseRejectDialogProps {
|
|
52
|
+
type: RejectDialogType.Custom;
|
|
53
|
+
/** 自定义内容 */
|
|
54
|
+
customContent: React.ReactNode;
|
|
55
|
+
/** 确认按钮文案 */
|
|
56
|
+
okText?: string;
|
|
57
|
+
}
|
|
58
|
+
export type RejectDialogProps = SingleRejectDialogProps | MultiAllRejectDialogProps | MultiPartialRejectDialogProps | CustomRejectDialogProps;
|
|
59
|
+
export {};
|