Chart

Charts and dashboards to visualize structured data to present clearer and easier-to-understand data metrics.

Example

Note: The Chart component can be used both as a page and as a separate component. The difference between the big screen and the Kanban board is that the Kanban board does not have a filter toolbar, and the button in the upper right corner can be linked to the big screen.
Show Code
Note: Actions of Chart can only use `Common.historyPush` and `Common.historyBack`.

Props

type ChartComponent = 'numberCard' | 'table' | 'line' | 'bar' | 'lineBar' | 'map' | 'pie'
interface IProps {
// page title
name: string
// Version
version?: string
// page description
description?: string
// Refer to Yao's definition of Node
nodes: Array<Node>
// Refer to Yao's definition of Api
apis: APIs
// Refer to Yao's definition of Output
output: Output
// page description
layout: {
operation: {
actions: Actions
}
// filter items
filters?: {
columns: Array<{
name: string
width?: number
}>
}
// graph
chart: {
columns: Array<{
name: string
width?: number
}>
}
}
fields: {
filters?: Common.Fields
chart: Common.Fields
}
}

Chart

Charts and dashboards to visualize structured data to present clearer and easier-to-understand data metrics.

Example

Note: The Chart component can be used both as a page and as a separate component. The difference between the big screen and the Kanban board is that the Kanban board does not have a filter toolbar, and the button in the upper right corner can be linked to the big screen.
Show Code
Note: Actions of Chart can only use `Common.historyPush` and `Common.historyBack`.

Props

type ChartComponent = 'numberCard' | 'table' | 'line' | 'bar' | 'lineBar' | 'map' | 'pie'
interface IProps {
// page title
name: string
// Version
version?: string
// page description
description?: string
// Refer to Yao's definition of Node
nodes: Array<Node>
// Refer to Yao's definition of Api
apis: APIs
// Refer to Yao's definition of Output
output: Output
// page description
layout: {
operation: {
actions: Actions
}
// filter items
filters?: {
columns: Array<{
name: string
width?: number
}>
}
// graph
chart: {
columns: Array<{
name: string
width?: number
}>
}
}
fields: {
filters?: Common.Fields
chart: Common.Fields
}
}