Merge pull request #221 from VisActor/fix/pie-legend

fix: fix pie legend when use default encoding

Author: xile611

apps/website/docs/zh-CN/playground/vseed.mdx

@@ -9,227 +9,46 @@ const Demo = () => {
   const MeasureNames = '__MeaName__'
 
   const vseed: VSeed = {
-    color: {
-      colorScheme: ['#7E5DFF', '#ACA2D5', '#5B5F89', '#80E1D9', '#F8BC3B', '#B2596E', '#3E91FF', '#9578BB'],
-    },
-    legend: {
-      enable: true,
-      labelFontSize: 12,
-      labelFontColor: '#BBBDC3',
-      position: 'topRight',
-      maxSize: 1,
-    },
-    label: {
-      enable: false,
-      labelColor: '#FDFDFD',
-      labelFontSize: 12,
-    },
-    stackCornerRadius: 6,
-    barMaxWidth: 72,
-    xAxis: {
-      grid: {
-        visible: false,
-        gridColor: '#303339',
-        gridWidth: 1,
-      },
-      label: {
-        visible: true,
-        labelColor: '#888C93',
-        labelFontSize: 12,
-      },
-      title: {
-        visible: false,
-        titleColor: '#BBBDC3',
-        titleFontSize: 12,
-      },
-      line: {
-        lineColor: '#FDFDFD0F',
-      },
-      visible: true,
-    },
-    primaryYAxis: {
-      grid: {
-        visible: true,
-        gridColor: '#303339',
-        gridWidth: 1,
-      },
-      label: {
-        visible: true,
-        labelColor: '#888C93',
-        labelFontSize: 12,
-      },
-      title: {
-        visible: true,
-        titleColor: '#BBBDC3',
-        titleText: '销售额',
-        titleFontSize: 12,
-      },
-      line: {
-        lineColor: '#FDFDFD0F',
-      },
-      visible: true,
-    },
-    secondaryYAxis: {
-      grid: {
-        visible: false,
-        gridColor: '#303339',
-        gridWidth: 1,
-      },
-      label: {
-        visible: true,
-        labelColor: '#888C93',
-        labelFontSize: 12,
-      },
-      title: {
-        visible: true,
-        titleColor: '#BBBDC3',
-        titleText: '利润率',
-        titleFontSize: 12,
-      },
-      line: {
-        lineColor: '#FDFDFD0F',
-      },
-      visible: true,
-    },
-    lineStyle: [
-      {
-        lineStyle: 'solid',
-        lineWidth: 2,
-      },
-    ],
-    pointStyle: [
-      {
-        pointSize: 8,
-      },
-    ],
-    annotationPoint: [
-      {
-        text: '最大销售数量',
-        textColor: '#FFFFFF',
-        textFontSize: 12,
-        textBackgroundColor: '#BCC1CB',
-        textBackgroundBorderRadius: 3,
-        textBackgroundBorderWidth: 0,
-        selector: [
-          {
-            field: 'xA_20251113103307_b668',
-            operator: 'in',
-            value: ['华东'],
-          },
-          {
-            field: 'pr_20251113103311_60cb',
-            operator: '>',
-            value: 9000,
-          },
-        ],
-      },
-      {
-        text: '最大利润',
-        textColor: '#FFFFFF',
-        textFontSize: 12,
-        textBackgroundColor: '#BCC1CB',
-        textBackgroundBorderRadius: 3,
-        textBackgroundBorderWidth: 0,
-        selector: [
-          {
-            field: 'se_20251113103303_9f29',
-            operator: '>',
-            value: 60000,
-          },
-        ],
-      },
-    ],
-    barStyle: [],
-    areaStyle: [],
-    annotationHorizontalLine: [],
-    annotationVerticalLine: [],
-    annotationArea: [],
+    chartType: 'pie',
     measures: [
       {
-        id: 'se_20251113103303_9f29',
-        alias: 'sum(profit)',
-        encoding: 'secondaryYAxis',
+        id: 'sales',
+        alias: '销售额',
         format: {
-          auto: true,
-          fractionDigits: 2,
-          thousandSeparator: true,
           type: 'number',
+          ratio: 1000,
+          thousandSeparator: true,
+          decimalPlaces: 0,
+          symbol: '千',
+          prefix: '利润',
+          suffix: '$',
         },
-        autoFormat: true,
-        parentId: '0',
+        parentId: 0,
       },
       {
-        id: 'pr_20251113103311_60cb',
-        alias: 'sum(amount)',
-        encoding: 'primaryYAxis',
+        id: 'profit',
+        alias: '利润',
+        autoFormat: true,
         format: {
-          auto: true,
-          thousandSeparator: true,
           type: 'number',
+          ratio: 1000,
+          thousandSeparator: true,
+          decimalPlaces: 0,
+          symbol: '千',
+          prefix: '利润',
+          suffix: '$',
         },
-        autoFormat: true,
-        parentId: '0',
-      },
-    ],
-    dimensions: [
-      {
-        id: 'xA_20251113103307_b668',
-        alias: 'area',
-        encoding: 'xAxis',
-        autoFormat: true,
-      },
-    ],
-    dualChartType: [
-      {
-        primary: 'column',
-        secondary: 'line',
-      },
-      {
-        primary: 'line',
-        secondary: 'line',
+        parentId: 1,
       },
     ],
-    chartType: 'dualAxis',
+    dimensions: [{ id: 'date', alias: '日期' }],
     dataset: [
-      {
-        pr_20251113103311_60cb: '11041',
-        pr_20251125192938_f698: '331.09999999999883',
-        se_20251113103303_9f29: '607218.6819999996',
-        xA_20251113103307_b668: '华东',
-      },
-      {
-        pr_20251113103311_60cb: '9700',
-        pr_20251125192938_f698: '232.15000000000038',
-        se_20251113103303_9f29: '670885.313',
-        xA_20251113103307_b668: '中南',
-      },
-      {
-        pr_20251113103311_60cb: '6463',
-        pr_20251125192938_f698: '234.7500000000018',
-        se_20251113103303_9f29: '242191.50899999973',
-        xA_20251113103307_b668: '东北',
-      },
-      {
-        pr_20251113103311_60cb: '5146',
-        pr_20251125192938_f698: '74.10000000000001',
-        se_20251113103303_9f29: '431053.2169999998',
-        xA_20251113103307_b668: '华北',
-      },
-      {
-        pr_20251113103311_60cb: '3399',
-        pr_20251125192938_f698: '134.20000000000067',
-        se_20251113103303_9f29: '97636.72800000008',
-        xA_20251113103307_b668: '西南',
-      },
-      {
-        pr_20251113103311_60cb: '1785',
-        pr_20251125192938_f698: '53.39999999999989',
-        se_20251113103303_9f29: '98553.47600000004',
-        xA_20251113103307_b668: '西北',
-      },
+      { date: '2019', profit: 10000, sales: 200000 },
+      { date: '2020', profit: 20000, sales: 400000 },
+      { date: '2021', profit: 30000, sales: 600000 },
+      { date: '2022', profit: 40000, sales: 800000 },
+      { date: '2023', profit: 50000, sales: 1000000 },
     ],
-    theme: 'dark',
-    locale: 'zh-CN',
   }
 
   const parseRes = zVSeed.safeParse(vseed)
@@ -271,7 +90,7 @@ const SimpleVSeedRender = (props: { vseed: VSeed }) => {
       return
     }
     const theme = dark ? 'dark' : 'light'
-    const builder = Builder.from({ ...vseed })
+    const builder = Builder.from(vseed.theme ? vseed : { ...vseed, theme })
     const spec = builder.build()
     console.log('builder', builder)
     console.log('builder performance', builder.performance)

packages/vseed/src/pipeline/advanced/chart/pipes/encoding/pie.ts

@@ -1,14 +1,14 @@
 import { unique } from 'remeda'
 import { MeasureId } from 'src/dataReshape'
-import { findAllMeasures } from 'src/pipeline/utils'
-import type { AdvancedPipe, Dimension, Dimensions, Encoding, Measure, MeasureGroup, Measures } from 'src/types'
+import { findAllMeasures, hasMultipleMeasureInSingleView } from 'src/pipeline/utils'
+import type { AdvancedPipe, Dimension, Dimensions, Encoding, Measure, Measures } from 'src/types'
 import { addColorToEncoding } from './color'
 
 export const defaultEncodingForPie: AdvancedPipe = (advancedVSeed) => {
   const { measures: vseedMeasures = [], dimensions = [] } = advancedVSeed
   const measures = findAllMeasures(vseedMeasures)
   const encoding: Encoding = {}
-  generateDefaultDimensionEncoding(dimensions, encoding)
+  generateDefaultDimensionEncoding(dimensions, encoding, hasMultipleMeasureInSingleView(vseedMeasures))
   generateDefaultMeasureEncoding(measures, encoding)
   return { ...advancedVSeed, encoding }
 }
@@ -20,16 +20,12 @@ export const encodingForPie: AdvancedPipe = (advancedVSeed) => {
   const hasDimensionEncoding = dimensions.some((item: Dimension) => item.encoding)
   const hasMeasureEncoding = measures.some((item: Measure) => item.encoding)
   const encoding: Encoding = {}
+  const hasMulti = hasMultipleMeasureInSingleView(vseedMeasures)
 
   if (hasDimensionEncoding) {
-    const hasMultiMeaureInSingleView =
-      (measures.length > 1 && vseedMeasures.every((m) => !(m as MeasureGroup).children)) ||
-      vseedMeasures.some((m) => {
-        return m && (m as MeasureGroup).children && (m as MeasureGroup).children!.length > 1
-      })
-    generateDimensionEncoding(dimensions, encoding, hasMultiMeaureInSingleView)
+    generateDimensionEncoding(dimensions, encoding, hasMulti)
   } else {
-    generateDefaultDimensionEncoding(dimensions, encoding)
+    generateDefaultDimensionEncoding(dimensions, encoding, hasMulti)
   }
 
   if (hasMeasureEncoding) {
@@ -44,9 +40,15 @@ export const encodingForPie: AdvancedPipe = (advancedVSeed) => {
 /**
  * --------------------维度--------------------
  */
-const generateDefaultDimensionEncoding = (dimensions: Dimensions, encoding: Encoding) => {
+const generateDefaultDimensionEncoding = (dimensions: Dimensions, encoding: Encoding, isMultiMeasure: boolean) => {
   const uniqueDimIds = unique(dimensions.map((d) => d.id))
-  encoding.color = uniqueDimIds.slice(0) // 第1个之后的维度用于颜色
+
+  if (isMultiMeasure) {
+    encoding.color = uniqueDimIds.slice(0) // 所有维度都用于color映射，包括MeasureId
+  } else {
+    encoding.color = uniqueDimIds.filter((d: string) => d !== MeasureId) // 除了MeasureId之外的所有维度用于color映射
+  }
+
   encoding.detail = encoding.color
   encoding.tooltip = uniqueDimIds.filter((d) => d !== MeasureId) // 展示指标名称之外的所有维度
   encoding.label = [] // 默认不展示标签

packages/vseed/src/pipeline/advanced/chart/pipes/measures/buildMeasures.ts

@@ -2,6 +2,7 @@ import type { AdvancedPipe, MeasureGroup, Measures, MeasureTree, VSeed } from 's
 import { isMeasureTreeWithChildren, isMeasureTreeWithParentId, normalizeMeasureTree } from './utils'
 import { isPivotChart } from 'src/pipeline/utils'
 import { DEFAULT_PARENT_ID } from 'src/pipeline/utils/constant'
+import { isValid } from '@visactor/vutils'
 
 export const buildMeasures: AdvancedPipe = (advancedVSeed) => {
   // 带Children的指标树, 不进行任何处理
@@ -33,7 +34,7 @@ const generateMeasuresByParentId = (measures: Measures): MeasureTree => {
     if (parent && 'children' in parent) {
       parent.children = parent.children || []
       parent.children.push(measure)
-    } else if (measure.parentId) {
+    } else if (isValid(measure.parentId)) {
       measureTree.push({
         id: measure.parentId,
         children: [measure],

packages/vseed/src/pipeline/spec/chart/pipes/pivotChart/pivotIndicators.ts

@@ -51,7 +51,7 @@ export const pivotIndicators =
 
       const chartSpec = execPipeline(chartPipeline, newContext, {})
       return {
-        indicatorKey: reshapeInfo.id,
+        indicatorKey: `${reshapeInfo.id}`,
         title: measureGroup?.alias,
         cellType: 'chart',
         chartModule: 'vchart',

packages/vseed/src/pipeline/utils/measures/find.ts

@@ -1,4 +1,4 @@
-import type { Measure, MeasureTree } from 'src/types'
+import type { Measure, MeasureGroup, MeasureTree } from 'src/types'
 import { preorderTraverse } from '../tree'
 
 export const findMeasureById = (measures: MeasureTree = [], id: string): Measure | undefined => {
@@ -41,3 +41,18 @@ export const findAllMeasures = (measures: MeasureTree = []): Measure[] => {
   })
   return result
 }
+
+export const hasMultipleMeasureInSingleView = (measures: MeasureTree = []): boolean => {
+  if (measures.every((m) => !('children' in m))) {
+    return measures.length > 1
+  }
+  let found = false
+  preorderTraverse<Measure, 'children'>(measures, (node) => {
+    if ((node as MeasureGroup).children && (node as MeasureGroup).children!.length > 1) {
+      found = true
+      return true
+    }
+    return false
+  })
+  return found
+}