Skip to content

feat(图表): 桑基图提示信息支持配置总出占比显示 #16476 #16535

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 21, 2025
Merged

feat(图表): 桑基图提示信息支持配置总出占比显示 #16476 #16535

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
feat(图表): 桑基图提示信息支持配置总出占比显示 #16476
  • Loading branch information
@jianneng-fit2cloud
jianneng-fit2cloud committed Jul 21, 2025
commit 13cd4ed43fdb8e24264fc1f1680233484af9b7d5
3 changes: 2 additions & 1 deletion core/core-frontend/src/locales/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2093,7 +2093,8 @@ export default {
quota_col_label: 'Quota Column Label',
table_grand_total_label: 'Total Alias',
table_field_total_label: 'Field Alias',
table_row_header_freeze: 'Row Header Freeze'
table_row_header_freeze: 'Row Header Freeze',
value_formatter_total_out_percent: 'Show percentage'
},
dataset: {
field_value: 'Field Value',
Expand Down
3 changes: 2 additions & 1 deletion core/core-frontend/src/locales/tw.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2034,7 +2034,8 @@ export default {
quota_col_label: '指標列名',
table_grand_total_label: '總計別名',
table_field_total_label: '字段別名',
table_row_header_freeze: '行頭凍結'
table_row_header_freeze: '行頭凍結',
value_formatter_total_out_percent: '顯示佔比'
},
dataset: {
field_value: '欄位值',
Expand Down
3 changes: 2 additions & 1 deletion core/core-frontend/src/locales/zh-CN.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2040,7 +2040,8 @@ export default {
quota_col_label: '指标列名',
table_grand_total_label: '总计别名',
table_field_total_label: '字段别名',
table_row_header_freeze: '行头冻结'
table_row_header_freeze: '行头冻结',
value_formatter_total_out_percent: '显示占比'
},
dataset: {
field_value: '字段值',
Expand Down
4 changes: 4 additions & 0 deletions core/core-frontend/src/models/chart/chart.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,10 @@ declare interface BaseFormatter {
* 千分符
*/
thousandSeparator: boolean
/**
* 显示总出占比
*/
showTotalPercent: boolean
}

/**
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

该代码的变化没有明显的不规范或潜在问题。优化建议是保持代码清晰和一致，并在必要时添加更多的注释以提高可读性。具体来说：

  • thousandSeparator 对应的是千位分隔符号。
  • showTotalPercent 则是用来显示总出占比的标志。

以下是修改后的代码示例：

declare interface BaseFormatter {
  /** 是否显示千位分隔符 */
  thousandSeparator: boolean

  /** 是否显示总出占比 */
  showTotalPercent: boolean
}

这样可以使得代码更易于理解和维护。

Expand Down
12 changes: 12 additions & 0 deletions ...re-frontend/src/views/chart/components/editor/editor-style/components/TooltipSelector.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -456,6 +456,9 @@ watch(
}
}
)
const showTotalPercent = computed(() => {
return props.chart.type === 'sankey'
})
onMounted(() => {
init()
useEmitt({ name: 'addAxis', callback: updateSeriesTooltipFormatter })
Expand Down Expand Up @@ -697,6 +700,15 @@ onMounted(() => {
:label="t('chart.value_formatter_thousand_separator')"
/>
</el-form-item>
<el-form-item v-if="showTotalPercent" class="form-item" :class="'form-item-' + themes">
<el-checkbox
size="small"
:effect="props.themes"
v-model="state.tooltipForm.tooltipFormatter.showTotalPercent"
@change="changeTooltipAttr('tooltipFormatter.showTotalPercent')"
:label="t('chart.value_formatter_total_out_percent')"
/>
</el-form-item>
</template>
<div v-if="showSeriesTooltipFormatter">
<el-form-item>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这段代码中有一个变量名可能引起歧义或混淆：

chart 的值可能是任何类型的对象，包括数组或其他复杂类型。在计算属性 showTotalPercent 中使用这个变量可能导致意外的结果。

建议为 chart 变量添加一个前缀以提高可读性，并确保它的值类型是期望的对象，而不是其他类型。例如，可以将它重命名为 chartInstance 或类似的命名方式来明确其表示的意义。

Expand Down
17 changes: 17 additions & 0 deletions core/core-frontend/src/views/chart/components/js/panel/charts/others/sankey.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,13 @@ export class SankeyBar extends G2PlotChartView<SankeyOptions, Sankey> {
if (customAttr.tooltip) {
const t = JSON.parse(JSON.stringify(customAttr.tooltip))
if (t.show) {
// 计算每个source节点的总出
const outTotal = {}
if (Array.isArray(options.data)) {
options.data?.forEach(d => {
outTotal[d.source] = (outTotal[d.source] || 0) + d.value
})
}
tooltip = {
showTitle: false,
showMarkers: false,
Expand All @@ -186,6 +193,16 @@ export class SankeyBar extends G2PlotChartView<SankeyOptions, Sankey> {
},
formatter: (datum: Datum) => {
const { source, target, value } = datum
// 总出占比
if (t.tooltipFormatter.showTotalPercent) {
const decimalCount =
t.tooltipFormatter.type !== 'auto' ? t.tooltipFormatter.decimalCount : 2
const ratio = (value / outTotal[source]).toFixed(decimalCount)
return {
name: source + ' -> ' + target,
value: valueFormatter(value, t.tooltipFormatter) + ` (${ratio}%)`
}
}
return {
name: source + ' -> ' + target,
value: valueFormatter(value, t.tooltipFormatter)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

在检查代码差异时，存在以下问题：

  1. 变量作用域混淆：t.tooltipFormatter.showTotalPercent 和 datum.out 的顺序可能有误。
  2. 格式化字符串的问题：toDecimalPlace 未定义。应该使用更标准的方法。
  3. 数据结构和类型检查：需要更好地处理和验证输入数据（如 options.data）。

改进措施：

  • 确保所有引用的属性或函数都已正确定义。
  • 使用更现代的标准方法来格式化数字字符串，例如 Intl.NumberFormat.
  • 验证和修复相关依赖项的版本，并确保它们与当前项目兼容。

以下是改进建议：

// 定义数值四舍五入函数
function toFixed(num: number, digits: number): string {
  const factor = Math.pow(10, digits);
  return (Math.round(num * factor) / factor).toString();
}

export class SankeyBar extends G2PlotChartView<SankeyOptions, Sankey> {
  public static readonly type = 'sankey-bar';

  // 其他代码...

  if ( customAttr.tooltip ) {
    let t = JSON.parse(JSON.stringify(customAttr.tooltip));
    if(t && t.show){
      // 计算每个source节点的总出
      let outTotal:{[index:string]:number}={};
      Array.isArray(options.data)&&options.data.forEach(d=>{
        outTotal[d.source]=(outTotal[d.source]|0)+d.value;
      });

      tooltip={
        showTitle:false,
        showMarkers:true,
        ...others...,

        formatter:(datum:Datum):{}=>{
          const {source,target,value}=datum;

          // 总出占比
          let outData=outTotal[source];
          if(outData&&t.tooltipFormatter['showTotalPercent']){
            let ratio=toFixed(value/outData,t.tooltipFormatter['decimalCount']||2);
            return {
              name:`${source}->${target}`,
              value:valueFormatter(value,t.tooltipFormatter)+' ('+ratio+'%)'
            };
          }
          return {...datum,...otherValues};
        },
      };

    }

    else{
      console.log('Tooltip is not shown.');
    }
  }
}

请注意上述代码示例中的逻辑变化以及对 toFixed 函数的支持（通过一个简单的封装）。这些改动有助于改善代码的质量和可维护性。

Expand Down