Merge pull request #1599 from merico-dev/1596-force-enable-timequery-…

…mmq-for-some-metric-or-dimension

1596 force enable timequery mmq for some metric or dimension

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/api",
-  "version": "14.3.6",
+  "version": "14.4.1",
   "description": "",
   "main": "index.js",
   "scripts": {

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "14.3.6",
+  "version": "14.4.1",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

dashboard/src/dashboard-editor/model/datasources/mm-info/metric-detail.ts

@@ -6,7 +6,7 @@ import { QueryFailureError } from '~/api-caller';
 import { APIClient } from '~/api-caller/request';
 import { DataSourceType } from '~/model';
 import { postProcessWithDataSource, preProcessWithDataSource } from '~/utils';
-import { CombinedMetricCol, MetricDetail, MetricSourceCol } from './metric-detail.types';
+import { CombinedMetric, CombinedMetricCol, DerivedMetric, MetricDetail, MetricSourceCol } from './metric-detail.types';
 import { makeFilterColOptions, makeGroupByColOptions, MetricGroupByColOption, parseData } from './metric-detail.utils';
 
 function getURLByType(type: 'derived' | 'combined', id: string) {
@@ -29,6 +29,8 @@ export const MetricDetailModel = types
     filters: types.optional(types.frozen<Array<CombinedMetricCol | MetricSourceCol>>(), []),
     groupBys: types.optional(types.frozen<Array<CombinedMetricCol | MetricSourceCol>>(), []),
     trendingDateCol: types.optional(types.frozen<MetricSourceCol | null>(), null),
+    supportTrending: types.optional(types.boolean, false),
+    requireTrendingReason: types.optional(types.string, ''),
     state: types.optional(types.enumeration(['idle', 'loading', 'error']), 'idle'),
     error: types.frozen(),
   })
@@ -106,10 +108,12 @@ export const MetricDetailModel = types
         );
         const result = postProcessWithDataSource(self.mmInfo.dataSource, response);
         const data = _.cloneDeep(result.data);
-        const { filters, groupBys, trendingDateCol } = parseData(result.data);
+        const { filters, groupBys, trendingDateCol, supportTrending, requireTrendingReason } = parseData(result.data);
         self.data = data;
         self.filters = filters;
         self.groupBys = groupBys;
+        self.supportTrending = supportTrending;
+        self.requireTrendingReason = requireTrendingReason;
         self.trendingDateCol = trendingDateCol;
         self.state = 'idle';
         self.error = null;

dashboard/src/dashboard-editor/model/datasources/mm-info/metric-detail.types.ts

@@ -35,10 +35,12 @@ export type DimensionCol = {
   dimensionFieldId: string | null;
   metricSourceCol: MetricSourceCol;
 };
+
 export type DerivedMetric = {
   id: string;
   name: string;
   description: string;
+  calculation: 'accumulate' | 'percentage_total' | 'yoy_ratio' | 'step_ratio' | 'span_steps_calculation';
   cols: DimensionCol[];
 };
 
@@ -49,6 +51,8 @@ export type CombinedMetric = {
   description: string;
   filters: CombinedMetricCol[];
   groupBys: CombinedMetricCol[];
+  derivedMetrics: DerivedMetric[];
+  supportTrending: boolean;
 };
 
 export type MetricDetail = DerivedMetric | CombinedMetric;

dashboard/src/dashboard-editor/model/datasources/mm-info/metric-detail.utils.ts

@@ -8,20 +8,51 @@ import {
   MetricSourceCol,
 } from './metric-detail.types';
 
+const TrendingCalculationTypeSet = new Set(['yoy_ratio', 'step_ratio', 'span_steps_calculation']);
+const DerivedCalculationLabelMap = {
+  accumulate: '累计计算',
+  yoy_ratio: '年同比率（yoy）',
+  step_ratio: '环比率',
+  span_steps_calculation: '移动计算',
+  percentage_total: '总占',
+} as const;
+
 export function parseData(data: MetricDetail) {
   if ('cols' in data) {
     const { cols } = data as DerivedMetric;
+    const trendingDateCol = cols.find((c) => c.type === 'trending_date_col')?.metricSourceCol ?? null;
+    const requireTrendingReason = TrendingCalculationTypeSet.has(data.calculation)
+      ? `当前指标涉及 ${_.get(
+          DerivedCalculationLabelMap,
+          data.calculation!,
+          data.calculation,
+        )}，缺少时序则无法展示有效结果。
+`
+      : '';
     return {
       filters: cols.filter((c) => c.type === 'filter').map((c) => c.metricSourceCol),
       groupBys: cols.filter((c) => c.type === 'group_by').map((c) => c.metricSourceCol),
-      trendingDateCol: cols.find((c) => c.type === 'trending_date_col')?.metricSourceCol ?? null,
+      trendingDateCol,
+      supportTrending: !!trendingDateCol,
+      requireTrendingReason,
     };
   }
 
+  const calcs = _.uniq(data.derivedMetrics.map((it) => it.calculation)).filter((calc) =>
+    TrendingCalculationTypeSet.has(calc),
+  );
+  const requireTrendingReason = data.supportTrending
+    ? `当前指标涉及 ${calcs
+        .map((it) => _.get(DerivedCalculationLabelMap, it, it))
+        .join('、')}，缺少时序则无法展示有效结果。`
+    : '';
+
   return {
     filters: data.filters,
     groupBys: data.groupBys,
     trendingDateCol: null,
+    supportTrending: data.supportTrending && calcs.length > 0,
+    requireTrendingReason, // supportTrending, then requireTrending
   };
 }
 

dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/link-metrics-to-time-and-step.tsx

@@ -1,11 +1,12 @@
-import { ActionIcon, Box, Group, Stack, Switch, Table, Text, Tooltip } from '@mantine/core';
+import { ActionIcon, Group, Stack, Table, Text, Tooltip } from '@mantine/core';
 import { IconInfoCircle } from '@tabler/icons-react';
 import { observer } from 'mobx-react-lite';
 import { QueryModelInstance } from '~/dashboard-editor/model';
 import { DataSourceModelInstance } from '~/dashboard-editor/model/datasources/datasource';
 import { MericoMetricQueryMetaInstance } from '~/model';
 import { RunByCheckbox } from './run-by-checkbox';
 import { MetricTableStyles } from './table-styles';
+import { TimeQuerySwitch } from './time-query-switch';
 import { VariableSelector } from './variable-selector';
 import { VariableStat } from './variable-stats';
 
@@ -15,7 +16,7 @@ const TrendingDateSettings = observer(({ queryModel }: Props) => {
   const mmInfo = ds.mericoMetricInfo;
   const metric = mmInfo.metricDetail;
   const trendingDateCol = metric.trendingDateCol;
-  if (!config.timeQuery.enabled || !trendingDateCol) {
+  if (!config.timeQuery.enabled || !metric.supportTrending) {
     return null;
   }
 
@@ -38,9 +39,9 @@ const TrendingDateSettings = observer(({ queryModel }: Props) => {
         <Table.Tr key="dimension.time">
           <Table.Td pr={0}>
             <Group gap={4}>
-              <Text size="xs">时间维度：</Text>
+              <Text size="xs">时间维度</Text>
               <Text size="xs" c="dimmed" ff="monospace">
-                {trendingDateCol.name}
+                {trendingDateCol?.name ?? null}
               </Text>
             </Group>
           </Table.Td>
@@ -87,12 +88,6 @@ type Props = {
   queryModel: QueryModelInstance;
 };
 export const LinkMetricsToTimeAndStep = observer(({ queryModel }: Props) => {
-  const config = queryModel.config as MericoMetricQueryMetaInstance;
-  const ds = queryModel.datasource as DataSourceModelInstance;
-  const mmInfo = ds.mericoMetricInfo;
-  const metric = mmInfo.metricDetail;
-  const trendingDateCol = metric.trendingDateCol;
-
   return (
     <Stack gap={7}>
       <Group justify="flex-start" gap={8}>
@@ -102,20 +97,7 @@ export const LinkMetricsToTimeAndStep = observer(({ queryModel }: Props) => {
             <IconInfoCircle />
           </ActionIcon>
         </Tooltip>
-        {trendingDateCol ? (
-          <Switch
-            size="xs"
-            color="red"
-            checked={config.timeQuery.enabled}
-            onChange={(e) => config.setTimeQueryEnabled(e.currentTarget.checked)}
-          />
-        ) : (
-          <Tooltip label="由于指标未设定时序维度，所以不具备时间序列展示功能。">
-            <Box>
-              <Switch size="xs" color="red" disabled={!trendingDateCol} />
-            </Box>
-          </Tooltip>
-        )}
+        <TimeQuerySwitch queryModel={queryModel} />
       </Group>
 
       <TrendingDateSettings queryModel={queryModel} />

dashboard/src/dashboard-editor/ui/settings/content/edit-query/merico-metric-query-editor-form/query-tabs/edit-metric-query/time-query-switch.tsx

@@ -0,0 +1,54 @@
+import { Box, Switch, Tooltip } from '@mantine/core';
+import { observer } from 'mobx-react-lite';
+import { useEffect } from 'react';
+import { QueryModelInstance } from '~/dashboard-editor/model';
+import { DataSourceModelInstance } from '~/dashboard-editor/model/datasources/datasource';
+import { MericoMetricQueryMetaInstance } from '~/model';
+
+type Props = {
+  queryModel: QueryModelInstance;
+};
+
+export const TimeQuerySwitch = observer(({ queryModel }: Props) => {
+  const config = queryModel.config as MericoMetricQueryMetaInstance;
+  const ds = queryModel.datasource as DataSourceModelInstance;
+  const mmInfo = ds.mericoMetricInfo;
+  const metric = mmInfo.metricDetail;
+  const trendingDateCol = metric.trendingDateCol;
+
+  const enabled = config.timeQuery.enabled;
+  useEffect(() => {
+    if (!enabled && metric.requireTrendingReason) {
+      config.setTimeQueryEnabled(true);
+      return;
+    }
+  }, [metric.requireTrendingReason, enabled]);
+
+  if (!metric.supportTrending) {
+    return (
+      <Tooltip label="由于指标未设定时序维度，所以不具备时间序列展示功能。">
+        <Box>
+          <Switch size="xs" color="red" disabled={!trendingDateCol} />
+        </Box>
+      </Tooltip>
+    );
+  }
+  if (metric.requireTrendingReason) {
+    return (
+      <Tooltip label={metric.requireTrendingReason}>
+        <Box>
+          <Switch size="xs" color="red" checked readOnly styles={{ track: { cursor: 'not-allowed' } }} />
+        </Box>
+      </Tooltip>
+    );
+  }
+  return (
+    <Switch
+      size="xs"
+      color="red"
+      checked={enabled}
+      onChange={(e) => config.setTimeQueryEnabled(e.currentTarget.checked)}
+      styles={{ track: { cursor: 'pointer' } }}
+    />
+  );
+});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/root",
-  "version": "14.3.6",
+  "version": "14.4.1",
   "private": true,
   "workspaces": [
     "api",

settings-form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/settings-form",
-  "version": "14.3.6",
+  "version": "14.4.1",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

settings-form/src/datasource/edit-data-source/index.tsx

@@ -33,6 +33,7 @@ function EditDataSourceForm({ dataSource, postSubmit, styles = defaultStyles }:
         title: t('common.state.successful'),
         message: t('datasource.state.updated'),
         color: 'green',
+        loading: false,
         autoClose: true,
       });
       postSubmit();
@@ -42,6 +43,7 @@ function EditDataSourceForm({ dataSource, postSubmit, styles = defaultStyles }:
         title: t('common.state.failed'),
         message: error.message,
         color: 'red',
+        loading: false,
         autoClose: true,
       });
     }

website/package.json

@@ -2,7 +2,7 @@
   "name": "@devtable/website",
   "private": true,
   "license": "Apache-2.0",
-  "version": "14.3.6",
+  "version": "14.4.1",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview"