fix: 🐛 修复globalFilters与数据类型不匹配

webapp/app/containers/Dashboard/types.ts

@@ -81,10 +81,18 @@ export interface IQueryVariableMap {
   [key: string]: string | number
 }
 
+export interface IGlobalFiltersItem {
+  name: string,
+  value: string,
+  operator: string,
+  sqlType: string,
+  type: string
+}
+
 export interface IQueryConditions {
   tempFilters: string[] // @TODO combine widget static filters with local filters
   linkageFilters: string[]
-  globalFilters: string[]
+  globalFilters: IGlobalFiltersItem[]
   variables: QueryVariable
   linkageVariables: QueryVariable
   globalVariables: QueryVariable
@@ -104,7 +112,7 @@ export interface IDataRequestParams {
   filters: string[]
   tempFilters: string[]
   linkageFilters: string[]
-  globalFilters: string[]
+  globalFilters: IGlobalFiltersItem[]
   variables: QueryVariable
   linkageVariables: QueryVariable
   globalVariables: QueryVariable

webapp/app/containers/Widget/components/Chart/Chart.tsx

@@ -33,7 +33,8 @@ export class Chart extends React.PureComponent<IChartProps, IChartStates> {
       renderType,
       getDataDrillDetail,
       isDrilling,
-      onError
+      onError,
+      queryVariables
     } = props
 
     if (renderType === 'loading') {
@@ -65,6 +66,7 @@ export class Chart extends React.PureComponent<IChartProps, IChartStates> {
             instance: this.instance,
             isDrilling,
             getDataDrillDetail,
+            queryVariables,
             selectedItems: this.props.selectedItems,
             callback: (seriesData) => {
               this.instance.off('click')
@@ -144,6 +146,10 @@ export class Chart extends React.PureComponent<IChartProps, IChartStates> {
         const seriesIndex = series[index] ? series[index].split('&')[0] : null
         return seriesData[seriesIndex] ? seriesData[seriesIndex][item] : []
       }
+      // 当是地图的时候，获取正确的数据用来关联其他widget
+      if (selectedChart === 7 && params?.data.originIndex != undefined) {
+        return data[params.data.originIndex]
+      }
       return data[item]
     })
     const brushed = [{ 0: Object.values(resultData) }]

webapp/app/containers/Widget/components/Pivot/ColumnTitle.tsx

@@ -5,8 +5,13 @@ import { getPivotCellWidth, getPivot, getStyleConfig } from '../util'
 
 const styles = require('./Pivot.less')
 
+interface IColProps {
+  name: string,
+  alias: string
+}
+
 interface IColumnTitleProps {
-  cols: string[]
+  cols: IColProps[]
   colKeys: string[][]
   colTree: object
   chartStyles: IChartStyles
@@ -19,6 +24,14 @@ export function ColumnTitle (props: IColumnTitleProps) {
   const { elementSize, unitMetricWidth } = drawingData
   const { color: fontColor } = getStyleConfig(chartStyles).pivot
 
+  const content = cols.map(col => {
+    if (col.alias) {
+      return col.alias
+    } else {
+      return col.name
+    }
+  })
+
   let tableWidth = 0
 
   if (dimetionAxis) {
@@ -37,7 +50,7 @@ export function ColumnTitle (props: IColumnTitleProps) {
         color: fontColor
       }}
     >
-      {cols.join(`  /  `)}
+      {content.join(`  /  `)}
     </div>
   )
 }

webapp/app/containers/Widget/components/Pivot/Pivot.tsx

@@ -589,6 +589,8 @@ export class Pivot extends React.PureComponent<IPivotProps, IPivotStates> {
     const { legendSelected, renderType } = this.state
     const rowNames = rows.map((r) => r.name)
     const colNames = cols.map((c) => c.name)
+    const colNamesWithAlias = cols.map((c) => ({ name: c.name, alias: c.field.alias }))
+    const rowNamesWithAlias = rows.map(r => ({ name: r.name, alias: r.field.alias }))
     const hasMetricNameDimension = [rows, cols].some((items) => items.findIndex((item) => item.name === '指标名称') >= 0)
 
     return (
@@ -603,7 +605,7 @@ export class Pivot extends React.PureComponent<IPivotProps, IPivotStates> {
           />
           <div className={styles.rowHeader}>
             <RowTitle
-              rows={rowNames}
+              rows={rowNamesWithAlias}
               rowKeys={this.rowKeys}
               chartStyles={chartStyles}
               drawingData={this.drawingData}
@@ -630,7 +632,7 @@ export class Pivot extends React.PureComponent<IPivotProps, IPivotStates> {
         </div>
         <div className={styles.rightSide}>
           <ColumnTitle
-            cols={colNames}
+            cols={colNamesWithAlias}
             colKeys={this.colKeys}
             colTree={this.colTree}
             chartStyles={chartStyles}

webapp/app/containers/Widget/components/Pivot/RowTitle.tsx

@@ -5,8 +5,13 @@ import { getPivotContentTextWidth, getPivotCellHeight, getPivot, getStyleConfig
 
 const styles = require('./Pivot.less')
 
+interface IRowProps {
+  name: string,
+  alias: string
+}
+
 interface IRowTitleProps {
-  rows: string[]
+  rows: IRowProps[]
   rowKeys: string[][]
   chartStyles: IChartStyles
   drawingData: IDrawingData
@@ -27,7 +32,15 @@ export function RowTitle (props: IRowTitleProps) {
     tableHeight = rowKeys.length * getPivotCellHeight()
   }
 
-  const content = rows.join(`  /  `)
+  const content = rows
+  .map(row => {
+    if (row.alias) {
+      return row.alias
+    } else {
+      return row.name
+    }
+  })
+  .join(`  /  `)
   const contentLength = getPivotContentTextWidth(content)
 
   return (

webapp/app/containers/Widget/components/util.ts

@@ -715,7 +715,7 @@ export function getPivotTooltipLabel(
 }
 
 export function getChartTooltipLabel(type, seriesData, options) {
-  const { cols, metrics, color, size, scatterXAxis, tip } = options
+  const { cols, metrics, color, size, scatterXAxis, tip, queryVariables = {} } = options
   let dimentionColumns: any[] = cols
   let metricColumns = [...metrics]
   if (color) {
@@ -777,7 +777,7 @@ export function getChartTooltipLabel(type, seriesData, options) {
               : record[dc.name]
             : ''
           value = getFormattedValue(value, dc.format)
-          return `${getFieldAlias(dc.field, {}) || dc.name}: ${value}` // @FIXME dynamic field alias by queryVariable in dashboard
+          return `${getFieldAlias(dc.field, queryVariables) || dc.name}: ${value}` // @FIXME dynamic field alias by queryVariable in dashboard
         })
       )
 
@@ -793,7 +793,7 @@ export function getChartTooltipLabel(type, seriesData, options) {
               : record[`${mc.agg}(${decodedName})`]
             : 0
           value = getFormattedValue(value, mc.format)
-          return `${getFieldAlias(mc.field, {}) || decodedName}: ${value}`
+          return `${getFieldAlias(mc.field, queryVariables) || decodedName}: ${value}`
         })
       )
 

webapp/app/containers/Widget/render/chart/line.ts

@@ -41,7 +41,7 @@ const defaultTheme = require('assets/json/echartsThemes/default.project.json')
 const defaultThemeColors = defaultTheme.theme.color
 
 export default function (chartProps: IChartProps, drillOptions?: any) {
-  const { data, cols, chartStyles, color, tip, references } = chartProps
+  const { data, cols, chartStyles, color, tip, references, queryVariables } = chartProps
   const metrics = getCartesianChartMetrics(chartProps.metrics)
   const { spec, xAxis, yAxis, splitLine, label, legend } = chartStyles
 
@@ -255,7 +255,8 @@ export default function (chartProps: IChartProps, drillOptions?: any) {
         cols,
         metrics,
         color,
-        tip
+        tip,
+        queryVariables
       })
     },
     legend: getLegendOption(legend, seriesNames),

webapp/app/containers/Widget/render/chart/map.ts

@@ -116,7 +116,7 @@ export default function (chartProps: IChartProps) {
   const agg = metrics[0].agg
   const metricName = decodeMetricName(metrics[0].name)
 
-  data.forEach((record) => {
+  data.forEach((record, index) => {
     let areaVal
     const group = []
 
@@ -135,6 +135,7 @@ export default function (chartProps: IChartProps) {
             dataTree[provinceName] = {
               lon: area.lon,
               lat: area.lat,
+              originIndex: index,
               value,
               children: {}
             }
@@ -151,6 +152,7 @@ export default function (chartProps: IChartProps) {
               dataTree[parentName] = {
                 lon: area.lon,
                 lat: area.lat,
+                originIndex: index,
                 value: 0,
                 children: {}
               }
@@ -161,6 +163,7 @@ export default function (chartProps: IChartProps) {
               dataTree[areaVal] = {
                 lon: area.lon,
                 lat: area.lat,
+                originIndex: index,
                 value,
                 children: {}
               }
@@ -200,9 +203,10 @@ export default function (chartProps: IChartProps) {
         mapType: 'china',
         roam,
         data: Object.keys(dataTree).map((key, index) => {
-          const { lon, lat, value } = dataTree[key]
+          const { lon, lat, value, originIndex } = dataTree[key]
           return {
             name: key,
+            originIndex,
             value: [lon, lat, value]
           }
         }),
@@ -215,9 +219,10 @@ export default function (chartProps: IChartProps) {
         type: 'scatter',
         coordinateSystem: 'geo',
         data: Object.keys(dataTree).map((key, index) => {
-          const { lon, lat, value } = dataTree[key]
+          const { lon, lat, value, originIndex } = dataTree[key]
           return {
             name: key,
+            originIndex,
             value: [lon, lat, value],
             symbolSize: getSymbolSize(sizeRate, value) / 2
           }
@@ -232,9 +237,10 @@ export default function (chartProps: IChartProps) {
         type: 'heatmap',
         coordinateSystem: 'geo',
         data: Object.keys(dataTree).map((key, index) => {
-          const { lon, lat, value } = dataTree[key]
+          const { lon, lat, value, originIndex } = dataTree[key]
           return {
             name: key,
+            originIndex,
             value: [lon, lat, value],
             symbolSize: getSymbolSize(sizeRate, value) / 2
           }