Used as a data filter for charts.

Attributes

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

Simple Usage

The component is obtained through FxUI.component.get('BIDataRange').

Usage:

• The filter dialog is hidden by default. You need to actively call the component show method to display the filter-condition dialog and pass the default echoed 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, so call it explicitly to show filter conditions
                    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 is the 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('Load completed')
            this.loading = false
        }
    },
}
</script>

Component Extension

To meet enterprise customization needs, the component provides several extension methods that allow developers to quickly build corresponding functions.

Hooks

onDataRangeChange

Triggered when the data filter conditions change.

The hook accepts one parameter:

• filterList: Array: the modified data filter conditions

Component Slots

The slot mechanism allows developers to replace a component or a certain type of component with one they build themselves, thereby changing the interaction form of the field.