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
    }
}

Edit this page on Github

Chart

Example

Props

Doc Components Blog Examples Release Contact

Chart

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

Example

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
    }
}

Edit this page on Github

Chart

Example

Props

English