FxDataRange Component

A data filter component for charts.

Attributes

Parameter	Description	Type	Optional Values	Default
filterList	Default displayed filter conditions	Array	—	-

Basic Usage

The component can be obtained via FxUI.component.get('BIDataRange').

Usage:

• The filter dialog is hidden by default. You need to actively call the component's show method to display the filter dialog and pass the default filter conditions.

Code example:

<template>
    <div id="graphWrap">
        <BIDataRange 
            ref="dataRange"
            :filterList="filterList"
            @onDataRangeChange="onDataRangeChange"
        ></BIDataRange>
        <lwt-table 
            class="tableWrap"
            v-loading="loading"
            fx-loading-text="Loading..."
            fx-loading-spinner="el-icon-loading"
            ref="BITable"
            :key="id"
            :table-height="tableHeight"
            :table-width="tableWidth"
            @onLwtMounted="lwtMounted"
            :on-after-render="afterRender"
        ></lwt-table>
    </div>
</template>
<script>
export default {
    components: {
        BIDataRange: FxUI.component.get('BIDataRange'),
        LwtTable: FxUI.component.get('BILwtTable')
    },
    data() {
        return {
            id: 'BI_lwt_1658322497512',
            filterList: [],
            queryParams: {},
            tableHeight: 0,
            tableWidth: 0,
            tableHeadFieldList: [],
            loading: false,
        }
    },
    methods: {
        showDataRangeDialog() {
            this.$refs.dataRange.getFilterResult(this.id).then(res => {
                if (res.Result.StatusCode == 0) {
                    this.filterList = res.Value.filterLists;
                    // The dialog is hidden by default, need to actively call to show the filter dialog
                    this.$refs.dataRange.$refs.dataRange.show()
                }
            })
        },
        lwtMounted() {
            this.loading = true;
            this.queryParams = {
                id: this.id,
                refresh: 0,
                filterList: [],
                pageSize: 20,
                pageNumber: 1,
            };
            this.$refs.BITable.$refs.lwtCom && this.$refs.BITable.$refs.lwtCom.lwtQuery.setQueryParams(this.queryParams);
            this.$refs.BITable.$refs.lwtCom && this.$refs.BITable.$refs.lwtCom.queryData();
        },
        onDataRangeChange(filterList) {
            // filterList: Modified data range
            console.log(filterList);
            this.loading = true;
            this.queryParams = {
                id: this.id,
                refresh: 0,
                filterList: filterList[0].filterLists,
                pageSize: 20,
                pageNumber: 1,
            };
            console.log('onDataRangeChange', this.queryParams)
            this.$refs.BITable.$refs.lwtCom && this.$refs.BITable.$refs.lwtCom.lwtQuery.setQueryParams(this.queryParams);
            this.$refs.BITable.$refs.lwtCom && this.$refs.BITable.$refs.lwtCom.queryData();
        },
        afterRender() {
            console.log('Loading completed')
            this.loading = false
        }
    },
}
</script>

Component Extension

To meet enterprise customization requirements, we provide developers with extension methods to quickly develop corresponding features.

Hooks

onDataRangeChange

Triggered when data filter conditions change.

The hook accepts one parameter:

• filterList: Array: Modified filter conditions

Component Slots

The component slot mechanism allows developers to replace a component or a type of component with their own developed component, thereby modifying the interaction pattern of that field.