From df9a31bd78d1358efbc088d6d6467fbfb349543e Mon Sep 17 00:00:00 2001 From: junjun Date: Wed, 13 Apr 2022 12:01:39 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8C=87=E6=A0=87=E5=8D=A1=E9=98=88?= =?UTF-8?q?=E5=80=BC=E8=AE=BE=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/lang/en.js | 19 +- frontend/src/lang/tw.js | 19 +- frontend/src/lang/zh.js | 19 +- frontend/src/views/chart/chart/chart.js | 3 +- frontend/src/views/chart/chart/formatter.js | 71 ++++++++ .../components/drag-item/DimensionItem.vue | 26 ++- .../components/drag-item/QuotaExtItem.vue | 19 +- .../chart/components/drag-item/QuotaItem.vue | 19 +- .../chart/components/normal/LabelNormal.vue | 54 +++++- .../chart/components/senior/Threshold.vue | 129 +++++++++++++- .../senior/dialog/TextThresholdEdit.vue | 162 ++++++++++++++++++ .../value-formatter/ValueFormatterEdit.vue | 87 ++++++++++ frontend/src/views/chart/view/ChartEdit.vue | 68 +++++++- 13 files changed, 676 insertions(+), 19 deletions(-) create mode 100644 frontend/src/views/chart/chart/formatter.js create mode 100644 frontend/src/views/chart/components/senior/dialog/TextThresholdEdit.vue create mode 100644 frontend/src/views/chart/components/value-formatter/ValueFormatterEdit.vue diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index 0cfbb29a84..a0fe7d66f9 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -1068,7 +1068,24 @@ export default { count_distinct: 'Distinct Count', table_page_mode: 'Page Mode', page_mode_page: 'Page', - page_mode_pull: 'Pull' + page_mode_pull: 'Pull', + exp_can_not_empty: 'Condition can not be empty', + value_formatter: 'Value Formatter', + value_formatter_type: 'Formatter Type', + value_formatter_auto: 'Auto', + value_formatter_value: 'Value', + value_formatter_percent: 'Percent', + value_formatter_unit: 'Unit', + value_formatter_decimal_count: 'Decimal Count', + value_formatter_suffix: 'Unit Suffix', + value_formatter_thousand_separator: 'Thousand Separator', + value_formatter_example: 'Example', + unit_none: 'None', + unit_thousand: 'Thousand', + unit_ten_thousand: 'Ten Thousand', + unit_million: 'Million', + unit_hundred_million: 'Hundred Million', + formatter_decimal_count_error: 'Range 0-10' }, dataset: { sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default', diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js index 74d007366e..631c5d88ae 100644 --- a/frontend/src/lang/tw.js +++ b/frontend/src/lang/tw.js @@ -1068,7 +1068,24 @@ export default { count_distinct: '去重計數', table_page_mode: '分頁模式', page_mode_page: '翻頁', - page_mode_pull: '下拉' + page_mode_pull: '下拉', + exp_can_not_empty: '條件不能為空', + value_formatter: '數值格式', + value_formatter_type: '格式類型', + value_formatter_auto: '自動', + value_formatter_value: '數值', + value_formatter_percent: '百分比', + value_formatter_unit: '數量單位', + value_formatter_decimal_count: '小數位數', + value_formatter_suffix: '單位後綴', + value_formatter_thousand_separator: '千分符', + value_formatter_example: '示例', + unit_none: '無', + unit_thousand: '千', + unit_ten_thousand: '萬', + unit_million: '百萬', + unit_hundred_million: '億', + formatter_decimal_count_error: '請輸入0-10的整數' }, dataset: { sheet_warn: '有多個 Sheet 頁，默認抽取第一個', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index 6870aca817..9b68ddc0b1 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -1071,7 +1071,24 @@ export default { count_distinct: '去重计数', table_page_mode: '分页模式', page_mode_page: '翻页', - page_mode_pull: '下拉' + page_mode_pull: '下拉', + exp_can_not_empty: '条件不能为空', + value_formatter: '数值格式', + value_formatter_type: '格式类型', + value_formatter_auto: '自动', + value_formatter_value: '数值', + value_formatter_percent: '百分比', + value_formatter_unit: '数量单位', + value_formatter_decimal_count: '小数位数', + value_formatter_suffix: '单位后缀', + value_formatter_thousand_separator: '千分符', + value_formatter_example: '示例', + unit_none: '无', + unit_thousand: '千', + unit_ten_thousand: '万', + unit_million: '百万', + unit_hundred_million: '亿', + formatter_decimal_count_error: '请输入0-10的整数' }, dataset: { sheet_warn: '有多个 Sheet 页，默认抽取第一个', diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js index c1135c2890..eea7682d64 100644 --- a/frontend/src/views/chart/chart/chart.js +++ b/frontend/src/views/chart/chart/chart.js @@ -277,7 +277,8 @@ export const DEFAULT_FUNCTION_CFG = { sliderRange: [0, 10] } export const DEFAULT_THRESHOLD = { - gaugeThreshold: '' + gaugeThreshold: '', + labelThreshold: [] } // chart config export const BASE_BAR = { diff --git a/frontend/src/views/chart/chart/formatter.js b/frontend/src/views/chart/chart/formatter.js new file mode 100644 index 0000000000..9c3be428e3 --- /dev/null +++ b/frontend/src/views/chart/chart/formatter.js @@ -0,0 +1,71 @@ +export const formatterItem = { + type: 'auto', // auto,value,percent + unit: 1, // 换算单位 + suffix: '', // 单位后缀 + decimalCount: 2, // 小数位数 + thousandSeparator: true// 千分符 +} + +// 单位list +export const unitList = [ + { name: 'unit_none', value: 1 }, + { name: 'unit_thousand', value: 1000 }, + { name: 'unit_ten_thousand', value: 10000 }, + { name: 'unit_million', value: 1000000 }, + { name: 'unit_hundred_million', value: 100000000 } +] + +// 格式化方式 +export const formatterType = [ + { name: 'value_formatter_auto', value: 'auto' }, + { name: 'value_formatter_value', value: 'value' }, + { name: 'value_formatter_percent', value: 'percent' } +] + +export function valueFormatter(value, formatter) { + // 1.unit 2.decimal 3.thousand separator and suffix + let result + if (formatter.type === 'auto') { + result = transSeparatorAndSuffix(transUnit(value, formatter), formatter) + } else if (formatter.type === 'value') { + result = transSeparatorAndSuffix(transDecimal(transUnit(value, formatter), formatter), formatter) + } else if (formatter.type === 'percent') { + value = value * 100 + result = transSeparatorAndSuffix(transDecimal(value, formatter), formatter) + } else { + result = value + } + return result +} + +function transUnit(value, formatter) { + return value / formatter.unit +} + +function transDecimal(value, formatter) { + return value.toFixed(formatter.decimalCount) +} + +function transSeparatorAndSuffix(value, formatter) { + let str = value + '' + if (formatter.thousandSeparator) { + const thousandsReg = /(\d)(?=(\d{3})+$)/g + const numArr = str.split('.') + numArr[0] = numArr[0].replace(thousandsReg, '$1,') + str = numArr.join('.') + } + if (formatter.type === 'percent') { + str += '%' + } else { + if (formatter.unit === 1000) { + str += '千' + } else if (formatter.unit === 10000) { + str += '万' + } else if (formatter.unit === 1000000) { + str += '百万' + } else if (formatter.unit === 100000000) { + str += '亿' + } + } + return str + formatter.suffix.replace(/(^\s*)|(\s*$)/g, '') +} diff --git a/frontend/src/views/chart/components/drag-item/DimensionItem.vue b/frontend/src/views/chart/components/drag-item/DimensionItem.vue index 8923633daf..c8d66679c7 100644 --- a/frontend/src/views/chart/components/drag-item/DimensionItem.vue +++ b/frontend/src/views/chart/components/drag-item/DimensionItem.vue @@ -77,6 +77,9 @@ + + {{ $t('chart.value_formatter') }}... + {{ $t('chart.show_name_set') }} @@ -92,6 +95,7 @@ + + diff --git a/frontend/src/views/chart/components/value-formatter/ValueFormatterEdit.vue b/frontend/src/views/chart/components/value-formatter/ValueFormatterEdit.vue new file mode 100644 index 0000000000..fc70d7b8ad --- /dev/null +++ b/frontend/src/views/chart/components/value-formatter/ValueFormatterEdit.vue @@ -0,0 +1,87 @@ + + + + + diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue index 91dbb9150f..45cba71117 100644 --- a/frontend/src/views/chart/view/ChartEdit.vue +++ b/frontend/src/views/chart/view/ChartEdit.vue @@ -366,10 +366,12 @@ :item="item" :dimension-data="dimension" :quota-data="quota" + :chart="chart" @onDimensionItemChange="dimensionItemChange" @onDimensionItemRemove="dimensionItemRemove" @editItemFilter="showDimensionEditFilter" @onNameEdit="showRename" + @valueFormatter="valueFormatter" /> @@ -445,6 +447,7 @@ @editItemFilter="showQuotaEditFilter" @onNameEdit="showRename" @editItemCompare="showQuotaEditCompare" + @valueFormatter="valueFormatter" /> @@ -893,7 +896,7 @@
@@ -913,7 +916,7 @@ {{ $t('chart.analyse_cfg') }} @@ -930,7 +933,7 @@ /> @@ -1116,6 +1119,7 @@
+ {{ $t('chart.confirm') }} + + + + +
+ {{ $t('chart.cancel') }} + {{ $t('chart.confirm') }} +
+ @@ -1213,9 +1234,11 @@ import Threshold from '@/views/chart/components/senior/Threshold' import TotalCfg from '@/views/chart/components/shape-attr/TotalCfg' import LabelNormalText from '@/views/chart/components/normal/LabelNormalText' import { pluginTypes } from '@/api/chart/chart' +import ValueFormatterEdit from '@/views/chart/components/value-formatter/ValueFormatterEdit' export default { name: 'ChartEdit', components: { + ValueFormatterEdit, LabelNormalText, TotalCfg, Threshold, @@ -1366,7 +1389,9 @@ export default { quotaItemCompare: {}, showEditQuotaCompare: false, preChartId: '', - pluginRenderOptions: [] + pluginRenderOptions: [], + showValueFormatter: false, + valueFormatterItem: {} } }, @@ -2273,11 +2298,11 @@ export default { }, addXaxisExt(e) { if (this.view.type !== 'table-info') { - this.dragCheckType(this.view.xaxis, 'd') + this.dragCheckType(this.view.xaxisExt, 'd') } - this.dragMoveDuplicate(this.view.xaxis, e) - if ((this.view.type === 'map' || this.view.type === 'word-cloud') && this.view.xaxis.length > 1) { - this.view.xaxis = [this.view.xaxis[0]] + this.dragMoveDuplicate(this.view.xaxisExt, e) + if ((this.view.type === 'map' || this.view.type === 'word-cloud') && this.view.xaxisExt.length > 1) { + this.view.xaxisExt = [this.view.xaxisExt[0]] } this.calcData(true) }, @@ -2544,6 +2569,33 @@ export default { this.view.customAttr.label.position = 'middle' } } + }, + + valueFormatter(item) { + this.valueFormatterItem = JSON.parse(JSON.stringify(item)) + this.showValueFormatter = true + }, + closeValueFormatter() { + this.showValueFormatter = false + }, + saveValueFormatter() { + const ele = this.valueFormatterItem.formatterCfg.decimalCount + if (ele === undefined || ele.toString().indexOf('.') > -1 || parseInt(ele).toString() === 'NaN' || parseInt(ele) < 0 || parseInt(ele) > 10) { + this.$message({ + message: this.$t('chart.formatter_decimal_count_error'), + type: 'error', + showClose: true + }) + return + } + // 更新指标 + if (this.valueFormatterItem.formatterType === 'quota') { + this.view.yaxis[this.valueFormatterItem.index].formatterCfg = this.valueFormatterItem.formatterCfg + } else if (this.valueFormatterItem.formatterType === 'quotaExt') { + this.view.yaxisExt[this.valueFormatterItem.index].formatterCfg = this.valueFormatterItem.formatterCfg + } + this.calcData(true) + this.closeValueFormatter() } } }