feat(clusteredColumnChart): set sort and page to widgets (#5293)

Signed-off-by: yuda <[email protected]>

apps/web/src/common/modules/widgets/_widgets/clustered-column-chart/ClusteredColumnChart.vue

@@ -38,7 +38,7 @@ import {
 import { isDateField } from '@/common/modules/widgets/_helpers/widget-field-helper';
 import { getFormattedNumber } from '@/common/modules/widgets/_helpers/widget-helper';
 import {
-    getWidgetLoadApiQueryDateRange,
+    getWidgetLoadApiQueryDateRange, getWidgetLoadApiQuerySort,
 } from '@/common/modules/widgets/_helpers/widget-load-helper';
 import type { DataFieldValue } from '@/common/modules/widgets/_widget-fields/data-field/type';
 import type { DateFormatValue } from '@/common/modules/widgets/_widget-fields/date-format/type';
@@ -191,12 +191,13 @@ const fetchWidget = async (): Promise<Data|APIErrorToast|undefined> => {
         state.loading = true;
         const _isPrivate = props.widgetId.startsWith('private');
         const _fetcher = _isPrivate ? privateWidgetFetcher : publicWidgetFetcher;
-        // TODO: set sort and pagination
         const { status, response } = await _fetcher({
             widget_id: props.widgetId,
             granularity: state.granularity,
             group_by: [state.xAxisField],
             vars: props.dashboardVars,
+            sort: getWidgetLoadApiQuerySort(state.xAxisField, state.dataField),
+            page: { start: 0, limit: state.xAxisCount },
             ...getWidgetLoadApiQueryDateRange(state.granularity, dateRange.value),
         });
         if (status === 'succeed') {