Feat/progressbar with total

packages/vbi/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @visactor/vbi
 
+## 0.4.17
+
+### Patch Changes
+
+- Updated dependencies
+  - @visactor/vseed@0.4.17
+
 ## 0.4.16
 
 ### Patch Changes

packages/vbi/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visactor/vbi",
-  "version": "0.4.16",
+  "version": "0.4.17",
   "license": "MIT",
   "homepage": "https://visactor.github.io/VBI",
   "bugs": "https://github.com/VisActor/VBI/issues",

packages/vquery/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @visactor/vquery
 
+## 0.4.17
+
 ## 0.4.16
 
 ## 0.4.15

packages/vquery/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visactor/vquery",
-  "version": "0.4.16",
+  "version": "0.4.17",
   "license": "MIT",
   "homepage": "https://visactor.github.io/VBI",
   "bugs": "https://github.com/VisActor/VBI/issues",

packages/vseed/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @visactor/vseed
 
+## 0.4.17
+
+### Patch Changes
+
+- Calculate total value into cell progressbar in background, but hide it in pivot
+
 ## 0.4.16
 
 ### Patch Changes

packages/vseed/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visactor/vseed",
-  "version": "0.4.16",
+  "version": "0.4.17",
   "license": "MIT",
   "homepage": "https://visactor.github.io/VBI",
   "bugs": "https://github.com/VisActor/VBI/issues",

packages/vseed/src/pipeline/spec/table/pipes/cellStyle/common.ts

@@ -1,7 +1,7 @@
 import { isArray, isNullish } from 'remeda'
 import tinycolor from 'tinycolor2'
 import { InnerRowIndex } from 'src/dataReshape'
-import type { BodyCellStyle, Datum } from 'src/types'
+import type { BodyCellStyle, Datum, TotalType } from 'src/types'
 
 const tableStyleMap = {
   backgroundColor: 'bgColor',
@@ -60,21 +60,58 @@ export const pickBodyCellStyle = (bodyCellStyle: BodyCellStyle) => {
 /**
  * 计算数据列的最小值和最大值
  */
-export const getColumnMinMax = (allData: Datum[], field: string): { min: number; max: number } => {
+export const getColumnMinMax = (
+  allData: Datum[],
+  field: string,
+  totalAggregation?: TotalType,
+): { min: number; max: number } => {
   let min = Infinity
   let max = -Infinity
+  let sum = 0
+  let count = 0
+
+  const hasTotal = !!totalAggregation
+  const aggregationType: TotalType = typeof totalAggregation === 'string' ? totalAggregation : 'sum'
 
   for (const datum of allData) {
     const value = Number(datum[field])
     if (!Number.isNaN(value)) {
       min = Math.min(min, value)
       max = Math.max(max, value)
+      sum += value
+      count += 1
     }
   }
 
+  const baseMin = min === Infinity ? 0 : min
+  const baseMax = max === -Infinity ? 0 : max
+
+  if (!hasTotal) {
+    return {
+      min: baseMin,
+      max: baseMax,
+    }
+  }
+
+  const total = (() => {
+    switch (aggregationType) {
+      case 'avg':
+        return count ? sum / count : 0
+      case 'max':
+        return baseMax
+      case 'min':
+        return baseMin
+      case 'count':
+        return count
+      case 'sum':
+      default:
+        return sum
+    }
+  })()
+
   return {
-    min: min === Infinity ? 0 : min,
-    max: max === -Infinity ? 0 : max,
+    min: Math.min(baseMin, total),
+    max: Math.max(baseMax, total),
   }
 }
 

packages/vseed/src/pipeline/spec/table/pipes/cellStyle/pivot.ts

@@ -7,6 +7,20 @@ import type { FieldSelector } from 'src/types/dataSelector'
 import { getCellOriginalDataByDatum, pickBodyCellStyle, applyColorScale, getColumnMinMax } from './common'
 import type { IProgressbarColumnIndicator } from '@visactor/vtable/es/ts-types/pivot-table/indicator/progress-indicator'
 
+const isPivotTotalCell = (styleArg: any): boolean => {
+  const cellHeaderPaths = styleArg?.cellHeaderPaths
+  if (!cellHeaderPaths) {
+    return false
+  }
+
+  if (cellHeaderPaths.role === 'sub-total' || cellHeaderPaths.role === 'grand-total') {
+    return true
+  }
+
+  const headerPaths = [...(cellHeaderPaths.colHeaderPaths || []), ...(cellHeaderPaths.rowHeaderPaths || [])]
+  return headerPaths.some((path: any) => path?.role === 'sub-total' || path?.role === 'grand-total')
+}
+
 export const pivotTableBodyCell: PivotTableSpecPipe = (spec, context) => {
   const { advancedVSeed } = context
   const { cellStyle, config, chartType } = advancedVSeed
@@ -107,6 +121,7 @@ export const pivotTableBodyCell: PivotTableSpecPipe = (spec, context) => {
             cellStyle.barMarkWidth = themeConfig?.barMarkWidth
             cellStyle.barPadding = themeConfig?.barPadding
             cellStyle.barRightToLeft = themeConfig?.barRightToLeft
+            cellStyle.showBar = !isPivotTotalCell(datum)
           }
 
           return {

packages/vseed/src/pipeline/spec/table/pipes/cellStyle/table.ts

@@ -2,14 +2,16 @@ import type { ListTableConstructorOptions, ColumnDefine, ProgressbarColumnDefine
 import { array } from '@visactor/vutils'
 import { isNullish, isNumber, isPlainObject, isString } from 'remeda'
 import { isFieldSelector, matchesFieldSelector, selector, selectorWithDynamicFilter } from 'src/dataSelector/selector'
-import type { BodyCellStyle, ListTableSpecPipe, TableConfig } from 'src/types'
+import type { BodyCellStyle, ListTableSpecPipe, Table, TableConfig } from 'src/types'
 import type { FieldSelector, MeasureSelector } from 'src/types/dataSelector'
 import { getCellOriginalDataByDatum, pickBodyCellStyle, applyColorScale, getColumnMinMax } from './common'
 import { preorderTraverse } from 'src/pipeline/utils/tree/traverse'
 
 export const tableBodyCell: ListTableSpecPipe = (spec, context) => {
-  const { advancedVSeed } = context
+  const { advancedVSeed, vseed } = context
+  const { totals } = (vseed || {}) as Table
   const { cellStyle, config, chartType } = advancedVSeed
+  const totalAggregation = typeof totals === 'string' ? totals : undefined
   const bodyCellStyle = cellStyle?.bodyCellStyle
   const themeConfig = config?.[chartType] as TableConfig
 
@@ -70,14 +72,14 @@ export const tableBodyCell: ListTableSpecPipe = (spec, context) => {
     let columnMin: number
     let columnMax: number
     if (progressBarStyle || backgroundColorScale) {
-      const { min, max } = getColumnMinMax(allData, field)
+      const { min, max } = getColumnMinMax(allData, field, totalAggregation)
       columnMin = min
       columnMax = max
       if (progressBarStyle) {
         col.cellType = 'progressbar'
         ;(col as ProgressbarColumnDefine).barType = 'negative'
         ;(col as ProgressbarColumnDefine).min = progressBarStyle.barMin ?? columnMin
-        ;(col as ProgressbarColumnDefine).max = progressBarStyle.barMin ?? columnMax
+        ;(col as ProgressbarColumnDefine).max = progressBarStyle.barMax ?? columnMax
       }
     }
 

packages/vseed/tests/examples/features/bodyCellStyle/pivotTable-background-scale-with-total.json

@@ -0,0 +1,86 @@
+{
+  "name": "pivotTable-totals-with-bg",
+  "description": "",
+  "vseed": {
+    "chartType": "pivotTable",
+    "dataset": [
+      {
+        "date": "2019",
+        "type": "A",
+        "goalProfit": -10,
+        "profit": 10,
+        "leftCount": 1,
+        "salesCount": 100
+      },
+      {
+        "date": "2020",
+        "type": "A",
+        "goalProfit": 30,
+        "profit": 30,
+        "sales": 320,
+        "leftCount": 2,
+        "salesCount": 200
+      },
+      {
+        "date": "2021",
+        "type": "A",
+        "goalProfit": 30,
+        "profit": 30,
+        "sales": 300,
+        "leftCount": 3,
+        "salesCount": 300
+      },
+      {
+        "date": "2022",
+        "type": "A",
+        "goalProfit": 50,
+        "profit": 50,
+        "sales": 240,
+        "leftCount": 4,
+        "salesCount": 400
+      },
+      {
+        "date": "2023",
+        "type": "A",
+        "goalProfit": 40,
+        "profit": 40,
+        "sales": 500,
+        "leftCount": 5,
+        "salesCount": 500
+      }
+    ],
+    "totals": {
+      "row": {
+        "showGrandTotals": true,
+        "showSubTotals": true,
+        "subTotalsDimensions": ["ro_20260225121050_3d35"]
+      }
+    },
+    "bodyCellStyle": [
+      {
+        "selector": {
+          "field": "goalProfit"
+        },
+        "enableProgressBar": true,
+        "barPositiveColor": "green"
+      },
+      {
+        "selector": {
+          "field": "profit"
+        },
+        "enableBackgroundColorScale": true,
+        "backgroundColorScale": {
+          "minColor": "rgba(210,128,128, 0.8)",
+          "maxColor": "rgba(255,10,10, 0.8)"
+        }
+      },
+      {
+        "selector": {
+          "field": "sales"
+        },
+        "enableBackgroundColorScale": true,
+        "enableProgressBar": true
+      }
+    ]
+  }
+}