import inputStyleMixin from '@/components/widget/deWidget/inputStyleMixin'
+import { mapState } from 'vuex'
+
export default {
name: 'DeOutWidget',
mixins: [inputStyleMixin],
@@ -112,6 +115,18 @@ export default {
}
},
computed: {
+ scale() {
+ return this.previewCanvasScale.scalePointHeight
+ },
+ autoStyle() {
+ return {
+ height: (100 / this.scale) + '%!important',
+ width: (100 / this.scale) + '%!important',
+ left: 50 * (1 - 1 / this.scale) + '%', // 放大余量 除以 2
+ top: 50 * (1 - 1 / this.scale) + '%', // 放大余量 除以 2
+ transform: 'scale(' + this.scale + ')'
+ }
+ },
sizeInfo() {
let size
if (this.duHeight > this.inputLargeSize) {
@@ -133,7 +148,10 @@ export default {
},
isFilterComponent() {
return ['de-select', 'de-select-grid', 'de-date', 'de-input-search', 'de-number-range', 'de-select-tree'].includes(this.element.component)
- }
+ },
+ ...mapState([
+ 'previewCanvasScale'
+ ])
},
watch: {
'element.style': {
diff --git a/frontend/src/components/widget/deWidget/DeSelectGrid.vue b/frontend/src/components/widget/deWidget/DeSelectGrid.vue
index 7faf24fba5..5fa5cd6bc8 100644
--- a/frontend/src/components/widget/deWidget/DeSelectGrid.vue
+++ b/frontend/src/components/widget/deWidget/DeSelectGrid.vue
@@ -71,7 +71,7 @@
import { linkMultFieldValues, multFieldValues } from '@/api/dataset/dataset'
import { getLinkToken, getToken } from '@/utils/auth'
import bus from '@/utils/bus'
-import { isSameVueObj } from '@/utils'
+import { isSameVueObj, mergeCustomSortOption } from '@/utils'
import { attrsMap, styleAttrs, textSelectGridWidget } from '@/components/widget/deWidget/serviceNameFn.js'
export default {
@@ -142,6 +142,9 @@ export default {
cssArr() {
const { brColor, wordColor, innerBgColor } = this.element.style
return { brColor, wordColor, innerBgColor }
+ },
+ isCustomSortWidget() {
+ return this.element.serviceName === 'textSelectGridWidget'
}
},
watch: {
@@ -354,7 +357,11 @@ export default {
},
optionData(data) {
if (!data) return null
- return data.filter(item => !!item).map(item => {
+ let tempData = data.filter(item => !!item)
+ if (this.isCustomSortWidget && this.element.options.attrs?.sort?.sort === 'custom') {
+ tempData = mergeCustomSortOption(this.element.options.attrs.sort.list, tempData)
+ }
+ return tempData.map(item => {
return {
id: item,
text: item
diff --git a/frontend/src/components/widget/deWidget/DeTabs.vue b/frontend/src/components/widget/deWidget/DeTabs.vue
index 6e401c8166..60c25fda40 100644
--- a/frontend/src/components/widget/deWidget/DeTabs.vue
+++ b/frontend/src/components/widget/deWidget/DeTabs.vue
@@ -470,8 +470,8 @@ export default {
let switchCount = 1
// 轮播定时器
this.timer = setInterval(() => {
- switchCount++
const nowIndex = switchCount % this.element.options.tabList.length
+ switchCount++
this.activeTabName = this.element.options.tabList[nowIndex].name
}, switchTime)
}
diff --git a/frontend/src/components/widget/deWidget/TabStyle.vue b/frontend/src/components/widget/deWidget/TabStyle.vue
index c73831ad80..0813f2d94a 100644
--- a/frontend/src/components/widget/deWidget/TabStyle.vue
+++ b/frontend/src/components/widget/deWidget/TabStyle.vue
@@ -135,8 +135,9 @@
type="number"
size="mini"
:min="2"
+ :max="3600"
class="hide-icon-number"
- @change="styleChange"
+ @change="switchTimeChange"
>
S
@@ -180,6 +181,14 @@ export default {
const current = this.$refs[pickKey]
current && (current.showPicker = true)
},
+ switchTimeChange() {
+ if (!this.styleInfo.switchTime || this.styleInfo.switchTime < 2) {
+ this.styleInfo.switchTime = 2
+ } else if (this.styleInfo.switchTime && this.styleInfo.switchTime > 3600) {
+ this.styleInfo.switchTime = 3600
+ }
+ this.styleChange()
+ },
styleChange() {
this.$store.commit('canvasChange')
}
diff --git a/frontend/src/components/widget/serviceImpl/NumberSelectServiceImpl.js b/frontend/src/components/widget/serviceImpl/NumberSelectServiceImpl.js
index 3dcc29a6f6..d18f91f69f 100644
--- a/frontend/src/components/widget/serviceImpl/NumberSelectServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/NumberSelectServiceImpl.js
@@ -107,6 +107,9 @@ class NumberSelectServiceImpl extends WidgetService {
return defaultV.split(',')[0]
}
}
+ isParamWidget() {
+ return true
+ }
}
const numberSelectServiceImpl = new NumberSelectServiceImpl()
export default numberSelectServiceImpl
diff --git a/frontend/src/components/widget/serviceImpl/TextSelectGridServiceImpl.js b/frontend/src/components/widget/serviceImpl/TextSelectGridServiceImpl.js
index 1014d2b17d..2a04dbc96b 100644
--- a/frontend/src/components/widget/serviceImpl/TextSelectGridServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TextSelectGridServiceImpl.js
@@ -96,6 +96,9 @@ class TextSelectGridServiceImpl extends WidgetService {
isSortWidget() {
return true
}
+ isCustomSortWidget() {
+ return true
+ }
fillValueDerfault(element) {
const defaultV = element.options.value === null ? '' : element.options.value.toString()
if (element.options.attrs.multiple) {
diff --git a/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js b/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js
index 4b5b79d85a..2a28a2d658 100644
--- a/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js
@@ -102,6 +102,9 @@ class TextSelectServiceImpl extends WidgetService {
isCustomSortWidget() {
return true
}
+ isParamWidget() {
+ return true
+ }
fillValueDerfault(element) {
const defaultV = element.options.value === null ? '' : element.options.value.toString()
diff --git a/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js b/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js
index 301074284a..cd33146057 100644
--- a/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js
@@ -31,7 +31,10 @@ const dialogPanel = {
eDynamicSuffix: 'after'
},
showTime: false,
- accuracy: 'HH:mm'
+ accuracy: 'HH:mm',
+ parameters: [],
+ startParameters: [],
+ endParameters: []
},
value: '',
manualModify: false
@@ -329,13 +332,13 @@ class TimeDateRangeServiceImpl extends WidgetService {
const defaultV = element.options.value === null ? '' : element.options.value.toString()
if (element.options.attrs.type === 'daterange') {
if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
- '[object Object]') {
+ '[object Object]') {
return []
}
return defaultV.split(',').map(item => parseFloat(item))
} else {
if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
- '[object Object]') {
+ '[object Object]') {
return null
}
return parseFloat(defaultV.split(',')[0])
@@ -400,6 +403,12 @@ class TimeDateRangeServiceImpl extends WidgetService {
{ 'text': 'dynamic_year.last', 'callBack': () => this.formatShortValues([this.getStartYear(-1).getTime(), this.getEndYear(-1).getTime()]) }
]
}
+ isParamWidget() {
+ return true
+ }
+ isRangeParamWidget() {
+ return true
+ }
}
const timeDateRangeServiceImpl = new TimeDateRangeServiceImpl()
export default timeDateRangeServiceImpl
diff --git a/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js b/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js
index d9ce3365ad..a1646a5383 100644
--- a/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js
@@ -189,13 +189,13 @@ class TimeDateServiceImpl extends WidgetService {
const defaultV = element.options.value === null ? '' : element.options.value.toString()
if (element.options.attrs.type === 'daterange') {
if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
- '[object Object]') {
+ '[object Object]') {
return []
}
return defaultV.split(',').map(item => parseFloat(item))
} else {
if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
- '[object Object]') {
+ '[object Object]') {
return null
}
return parseFloat(defaultV.split(',')[0])
@@ -234,6 +234,9 @@ class TimeDateServiceImpl extends WidgetService {
isTimeWidget() {
return true
}
+ isParamWidget() {
+ return true
+ }
}
const timeDateServiceImpl = new TimeDateServiceImpl({
name: 'timeDateWidget'
diff --git a/frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js b/frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js
index c8defe995a..1254999750 100644
--- a/frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js
@@ -150,13 +150,13 @@ class TimeMonthServiceImpl extends WidgetService {
const defaultV = element.options.value === null ? '' : element.options.value.toString()
if (element.options.attrs.type === 'daterange') {
if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
- '[object Object]') {
+ '[object Object]') {
return []
}
return defaultV.split(',').map(item => parseFloat(item))
} else {
if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
- '[object Object]') {
+ '[object Object]') {
return null
}
return parseFloat(defaultV.split(',')[0])
@@ -186,6 +186,9 @@ class TimeMonthServiceImpl extends WidgetService {
return timeSection(parseFloat(value), element.options.attrs.type)
}
}
+ isParamWidget() {
+ return true
+ }
}
const timeMonthServiceImpl = new TimeMonthServiceImpl()
export default timeMonthServiceImpl
diff --git a/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js b/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js
index 54bbfac589..90d440cdf2 100644
--- a/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js
@@ -137,13 +137,13 @@ class TimeYearServiceImpl extends WidgetService {
const defaultV = element.options.value === null ? '' : element.options.value.toString()
if (element.options.attrs.type === 'daterange') {
if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
- '[object Object]') {
+ '[object Object]') {
return []
}
return defaultV.split(',').map(item => parseFloat(item))
} else {
if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
- '[object Object]') {
+ '[object Object]') {
return null
}
return parseFloat(defaultV.split(',')[0])
@@ -173,6 +173,9 @@ class TimeYearServiceImpl extends WidgetService {
return timeSection(parseFloat(value), element.options.attrs.type)
}
}
+ isParamWidget() {
+ return true
+ }
}
const timeYearServiceImpl = new TimeYearServiceImpl()
export default timeYearServiceImpl
diff --git a/frontend/src/icons/svg/percentage-bar-stack-horizontal.svg b/frontend/src/icons/svg/percentage-bar-stack-horizontal.svg
new file mode 100644
index 0000000000..41e752aabf
--- /dev/null
+++ b/frontend/src/icons/svg/percentage-bar-stack-horizontal.svg
@@ -0,0 +1 @@
+
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 75f96be823..76152bc1ab 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -1135,6 +1135,7 @@ export default {
chart_percentage_bar_stack: 'Percentage Stack Bar',
chart_bar_horizontal: 'Horizontal Bar',
chart_bar_stack_horizontal: 'Stack Horizontal Bar',
+ chart_percentage_bar_stack_horizontal: 'Horizontal Percentage Stack Bar',
chart_line: 'Base Line',
chart_line_stack: 'Stack Line',
chart_pie: 'Pie',
@@ -1338,6 +1339,7 @@ export default {
table_align_left: 'Left',
table_align_center: 'Center',
table_align_right: 'Right',
+ table_scroll_bar_color: 'Scroll Bar Color',
draw_back: 'Draw Back',
senior: 'Senior',
senior_cfg: 'Senior Config',
@@ -2551,9 +2553,9 @@ export default {
start_time: 'Start time',
end_time: 'End time',
chart_data: 'View data',
- panel_preview: 'Preview panel',
+ panel_preview: 'Preview report',
preview: 'Preview',
- emial_preview: 'Emial preview',
+ emial_preview: 'Report preview',
chart_data_range: 'View data range',
simple_repeat: 'Simple repeat',
once_a_day: 'Once a day',
@@ -2683,6 +2685,7 @@ export default {
'I18N_USER_TEMPLATE_ERROR': 'Template file error',
'i18n_max_user_import_size': 'File size exceeds 10M',
app_template: {
+ apply_template: 'Apply template',
execution_time: 'Execution time',
app_manager: 'Application management',
app_upload: 'Upload app',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 378969cbc1..009ea1ba5d 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -1135,6 +1135,7 @@ export default {
chart_percentage_bar_stack: '百分比柱狀圖',
chart_bar_horizontal: '橫嚮柱狀圖',
chart_bar_stack_horizontal: '橫嚮堆疊柱狀圖',
+ chart_percentage_bar_stack_horizontal: '橫嚮百分比柱狀圖',
chart_line: '基礎摺線圖',
chart_line_stack: '堆疊摺線圖',
chart_pie: '餅圖',
@@ -1338,6 +1339,7 @@ export default {
table_align_left: '左對齊',
table_align_center: '居中',
table_align_right: '右對齊',
+ table_scroll_bar_color: '滾動條顏色',
draw_back: '收回',
senior: '高級',
senior_cfg: '高級設置',
@@ -2552,9 +2554,9 @@ export default {
start_time: '開始時間',
end_time: '結束時間',
chart_data: '視圖數據',
- panel_preview: '預覽儀表板',
+ panel_preview: '預覽報告',
preview: '預覽',
- emial_preview: '郵件預覽',
+ emial_preview: '報告預覽',
chart_data_range: '視圖數據範圍',
simple_repeat: '簡單重複',
once_a_day: '每天一次',
@@ -2684,6 +2686,7 @@ export default {
'I18N_USER_TEMPLATE_ERROR': '模版錯誤',
'i18n_max_user_import_size': '文件最大不能超過10M',
app_template: {
+ apply_template: '應用模版',
execution_time: '执行时间',
app_manager: '應用管理',
app_upload: '上傳應用',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index b7f597b3ab..7acc7b7a0b 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -1134,6 +1134,7 @@ export default {
chart_percentage_bar_stack: '百分比柱状图',
chart_bar_horizontal: '横向柱状图',
chart_bar_stack_horizontal: '横向堆叠柱状图',
+ chart_percentage_bar_stack_horizontal: '横向百分比柱状图',
chart_line: '基础折线图',
chart_line_stack: '堆叠折线图',
chart_pie: '饼图',
@@ -1337,6 +1338,7 @@ export default {
table_align_left: '左对齐',
table_align_center: '居中',
table_align_right: '右对齐',
+ table_scroll_bar_color: '滚动条颜色',
draw_back: '收回',
senior: '高级',
senior_cfg: '高级设置',
@@ -2552,9 +2554,9 @@ export default {
start_time: '开始时间',
end_time: '结束时间',
chart_data: '视图数据',
- panel_preview: '预览仪表板',
+ panel_preview: '预览报告',
preview: '预览',
- emial_preview: '邮件预览',
+ emial_preview: '报告预览',
chart_data_range: '视图数据范围',
simple_repeat: '简单重复',
once_a_day: '每天一次',
@@ -2684,6 +2686,7 @@ export default {
'I18N_USER_TEMPLATE_ERROR': '模版错误',
'i18n_max_user_import_size': '文件最大不能超过10M',
app_template: {
+ apply_template: '应用模板',
execution_time: '执行时间',
app_manager: '应用管理',
app_upload: '上传应用',
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index e4e820d4ac..6cebef7bc6 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -93,7 +93,7 @@ div:focus {
}
.de-filter-dialog {
- min-width: 500px !important;
+ min-width: 785px !important;
width: 55% !important;
.el-dialog__header {
@@ -322,12 +322,12 @@ div:focus {
margin: 0 2px 1px 0;
}
-.field-icon-dimension{
- color: #3370FF!important;
+.field-icon-dimension {
+ color: #3370FF !important;
}
-.field-icon-quota{
- color: #04B49C!important;
+.field-icon-quota {
+ color: #04B49C !important;
}
.ds-icon-pdf {
@@ -1509,6 +1509,7 @@ div:focus {
.de-status {
position: relative;
margin-left: 15px;
+
&::before {
content: '';
position: absolute;
@@ -1546,6 +1547,7 @@ div:focus {
&::before {
background: var(--deDanger, #F54A45);
}
+
.el-icon-s-order {
color: var(--primary, #3370ff);
cursor: pointer;
@@ -1590,6 +1592,7 @@ div:focus {
margin: 0;
margin-right: 8px;
position: relative;
+
i {
position: absolute;
right: 2px;
@@ -1621,6 +1624,7 @@ div:focus {
justify-content: center;
align-items: center;
}
+
.arrow-filter:hover {
background: rgba(31, 35, 41, 0.1);
border-radius: 4px;
@@ -1633,6 +1637,7 @@ div:focus {
.el-icon-arrow-left.arrow-filter {
margin-right: 5px;
}
+
.filter-texts-container {
flex: 1;
overflow-x: auto;
@@ -1674,11 +1679,13 @@ div:focus {
transform: translate(-50%, -50%);
}
}
+
.calcu-field {
.calcu-cont {
display: flex;
justify-content: space-between;
}
+
.codemirror {
height: 250px;
overflow-y: auto;
@@ -1686,6 +1693,7 @@ div:focus {
border: 1px solid #bbbfc4;
border-radius: 4px;
}
+
.codemirror .CodeMirror-scroll {
height: 250px;
overflow-y: auto;
diff --git a/frontend/src/views/background/index.vue b/frontend/src/views/background/index.vue
index f8a6679f35..4fa88fb8d1 100644
--- a/frontend/src/views/background/index.vue
+++ b/frontend/src/views/background/index.vue
@@ -112,7 +112,7 @@
:http-request="upload"
:file-list="fileList"
>
-
+
{
- return `l(270) 0:#ffffff00 1:${ele}`
+ return setGradientColor(ele, customAttr.color.gradient, 270)
})
}
@@ -202,11 +203,12 @@ export function hBaseBarOptionAntV(plot, container, chart, action, isGroup, isSt
} else {
delete options.isStack
}
+ options.isPercent = chart.type.includes('percentage')
// custom color
options.color = antVCustomColor(chart)
if (customAttr.color.gradient) {
options.color = options.color.map((ele) => {
- return `l(0) 0:#ffffff00 1:${ele}`
+ return setGradientColor(ele, customAttr.color.gradient)
})
}
diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index 25e805936d..1ec2129aa4 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -29,7 +29,9 @@ export const DEFAULT_COLOR_CASE = {
seriesColors: [], // 格式：{"name":"s1","color":"","isCustom":false}
areaBorderColor: '#303133',
gradient: false,
- areaBaseColor: '#FFFFFF'
+ areaBaseColor: '#FFFFFF',
+ tableScrollBarColor: 'rgba(0, 0, 0, 0.15)',
+ tableScrollBarHoverColor: 'rgba(0, 0, 0, 0.4)'
}
export const DEFAULT_COLOR_CASE_DARK = {
@@ -45,7 +47,9 @@ export const DEFAULT_COLOR_CASE_DARK = {
tableBorderColor: '#CCCCCC',
seriesColors: [], // 格式：{"name":"s1","color":"","isCustom":false}
areaBorderColor: '#EBEEF5',
- areaBaseColor: '5470C6'
+ areaBaseColor: '5470C6',
+ tableScrollBarColor: 'rgba(255, 255, 255, 0.5)',
+ tableScrollBarHoverColor: 'rgba(255, 255, 255, 0.8)'
}
export const DEFAULT_SIZE = {
barDefault: true,
diff --git a/frontend/src/views/chart/chart/common/common_antv.js b/frontend/src/views/chart/chart/common/common_antv.js
index 236d7da1b0..580d202899 100644
--- a/frontend/src/views/chart/chart/common/common_antv.js
+++ b/frontend/src/views/chart/chart/common/common_antv.js
@@ -1,7 +1,7 @@
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
import { DEFAULT_XAXIS_STYLE, DEFAULT_YAXIS_EXT_STYLE, DEFAULT_YAXIS_STYLE } from '@/views/chart/chart/chart'
-import { equalsAny } from '@/utils/StringUtils'
+import { equalsAny, includesAny } from '@/utils/StringUtils'
export function getPadding(chart) {
if (chart.drill) {
@@ -166,11 +166,8 @@ export function getLabel(chart) {
extStack = JSON.parse(JSON.stringify(chart.extStack))
}
- if (chart.type === 'bar-stack' ||
- chart.type === 'line-stack' ||
- chart.type === 'bar-stack-horizontal' ||
- chart.type === 'percentage-bar-stack'
- ) {
+ if (equalsAny(chart.type, 'bar-stack', 'line-stack',
+ 'bar-stack-horizontal', 'percentage-bar-stack', 'percentage-bar-stack-horizontal')) {
let f
if (extStack && extStack.length > 0) {
f = yAxis[0]
@@ -189,7 +186,10 @@ export function getLabel(chart) {
f.formatterCfg = formatterItem
}
// 百分比堆叠柱状图保留小数处理
- if (chart.type === 'percentage-bar-stack') {
+ if (chart.type.includes('percentage')) {
+ if (!param.value) {
+ return
+ }
f.formatterCfg.type = 'percent'
f.formatterCfg.decimalCount = l.reserveDecimalCount
f.formatterCfg.thousandSeparator = false
@@ -278,10 +278,8 @@ export function getTooltip(chart) {
}
let obj
- if (chart.type === 'bar-stack' ||
- chart.type === 'line-stack' ||
- chart.type === 'bar-stack-horizontal' ||
- chart.type === 'percentage-bar-stack') {
+ if (equalsAny(chart.type, 'bar-stack', 'line-stack',
+ 'bar-stack-horizontal', 'percentage-bar-stack', 'percentage-bar-stack-horizontal')) {
let f
if (extStack && extStack.length > 0) {
obj = { name: param.category, value: param.value }
@@ -301,7 +299,11 @@ export function getTooltip(chart) {
if (!f.formatterCfg) {
f.formatterCfg = formatterItem
}
- if (chart.type === 'percentage-bar-stack') {
+ if (chart.type.includes('percentage')) {
+ if (!param.value) {
+ obj.value = 0
+ return obj
+ }
// 保留小数位数和标签保持一致，这边拿一下标签的配置
const l = JSON.parse(JSON.stringify(customAttr.label))
f.formatterCfg.type = 'percent'
@@ -329,7 +331,7 @@ export function getTooltip(chart) {
res = valueFormatter(param.value, formatterItem)
}
}
- } else if (chart.type.includes('pie') || chart.type.includes('funnel')) {
+ } else if (includesAny(chart.type, 'pie', 'funnel')) {
obj = { name: param.field, value: param.value }
for (let i = 0; i < yAxis.length; i++) {
const f = yAxis[i]
@@ -339,7 +341,7 @@ export function getTooltip(chart) {
res = valueFormatter(param.value, formatterItem)
}
}
- } else if ((chart.type.includes('bar') || chart.type.includes('line') || chart.type.includes('scatter') || chart.type.includes('radar') || chart.type.includes('area')) && !chart.type.includes('group')) {
+ } else if (includesAny(chart.type, 'bar', 'line', 'scatter', 'radar', 'area') && !chart.type.includes('group')) {
obj = { name: param.category, value: param.value }
for (let i = 0; i < yAxis.length; i++) {
const f = yAxis[i]
@@ -879,3 +881,9 @@ function getLineDash(type) {
return [0, 0]
}
}
+
+export function setGradientColor(rawColor, show = false, angle = 0) {
+ const item = rawColor.split(',')
+ item.splice(3, 1, '0.3)')
+ return show ? `l(${angle}) 0:${item.join(',')} 1:${rawColor}` : rawColor
+}
diff --git a/frontend/src/views/chart/chart/common/common_table.js b/frontend/src/views/chart/chart/common/common_table.js
index 0a318f5e08..154b383410 100644
--- a/frontend/src/views/chart/chart/common/common_table.js
+++ b/frontend/src/views/chart/chart/common/common_table.js
@@ -1,4 +1,4 @@
-import { hexColorToRGBA } from '@/views/chart/chart/util'
+import { hexColorToRGBA, resetRgbOpacity } from '@/views/chart/chart/util'
import { DEFAULT_COLOR_CASE, DEFAULT_SIZE } from '@/views/chart/chart/chart'
export function getCustomTheme(chart) {
@@ -7,6 +7,8 @@ export function getCustomTheme(chart) {
const borderColor = hexColorToRGBA(DEFAULT_COLOR_CASE.tableBorderColor, DEFAULT_COLOR_CASE.alpha)
const headerAlign = DEFAULT_SIZE.tableHeaderAlign
const itemAlign = DEFAULT_SIZE.tableItemAlign
+ const scrollBarColor = DEFAULT_COLOR_CASE.tableScrollBarColor
+ const scrollBarHoverColor = DEFAULT_COLOR_CASE.tableScrollBarHoverColor
const theme = {
background: {
@@ -105,6 +107,10 @@ export function getCustomTheme(chart) {
fontSize: DEFAULT_SIZE.tableItemFontSize,
textAlign: headerAlign
}
+ },
+ scrollBar: {
+ thumbColor: scrollBarColor,
+ thumbHoverColor: scrollBarHoverColor
}
}
@@ -156,6 +162,9 @@ export function getCustomTheme(chart) {
theme.dataCell.bolderText.fill = c.tableFontColor
theme.dataCell.text.fill = c.tableFontColor
theme.dataCell.measureText.fill = c.tableFontColor
+
+ theme.scrollBar.thumbColor = c.tableScrollBarColor
+ theme.scrollBar.thumbHoverColor = resetRgbOpacity(c.tableScrollBarColor, 1.5)
}
// size
if (customAttr.size) {
diff --git a/frontend/src/views/chart/chart/gauge/gauge_antv.js b/frontend/src/views/chart/chart/gauge/gauge_antv.js
index b4b3844d6e..5070f6f2c1 100644
--- a/frontend/src/views/chart/chart/gauge/gauge_antv.js
+++ b/frontend/src/views/chart/chart/gauge/gauge_antv.js
@@ -1,4 +1,4 @@
-import { getPadding, getTheme } from '@/views/chart/chart/common/common_antv'
+import { getPadding, getTheme, setGradientColor } from '@/views/chart/chart/common/common_antv'
import { Gauge } from '@antv/g2plot'
import { DEFAULT_LABEL, DEFAULT_SIZE, DEFAULT_THRESHOLD } from '@/views/chart/chart/chart'
import { getScaleValue } from '@/components/canvas/utils/style'
@@ -154,7 +154,9 @@ export function baseGaugeOptionAntV(plot, container, chart, action, scale = 1) {
}
if (customAttr.color.gradient) {
- const colorList = (theme.styleSheet?.paletteQualitative10 || []).map((ele) => `l(0) 0:#ffffff00 1:${ele}`)
+ const colorList = (theme.styleSheet?.paletteQualitative10 || []).map((ele) => {
+ return setGradientColor(ele, customAttr.color.gradient)
+ })
if (!options.range) {
options.range = {
color: colorList
diff --git a/frontend/src/views/chart/chart/line/line_antv.js b/frontend/src/views/chart/chart/line/line_antv.js
index d1a9c93948..c3ef3bfe59 100644
--- a/frontend/src/views/chart/chart/line/line_antv.js
+++ b/frontend/src/views/chart/chart/line/line_antv.js
@@ -8,7 +8,8 @@ import {
getYAxis,
getPadding,
getSlider,
- getAnalyse
+ getAnalyse,
+ setGradientColor
} from '@/views/chart/chart/common/common_antv'
import { antVCustomColor, handleEmptyDataStrategy } from '@/views/chart/chart/util'
import _ from 'lodash'
@@ -183,10 +184,10 @@ export function baseAreaOptionAntV(plot, container, chart, action, isStack) {
const areaColors = [...options.color, ...options.color]
if (customAttr.color.gradient) {
options.areaStyle = () => {
- const cr = areaColors.shift()
- if (cr) {
+ const ele = areaColors.shift()
+ if (ele) {
return {
- fill: `l(270) 0:#ffffff00 1:${cr}`
+ fill: setGradientColor(ele, customAttr.color.gradient, 270)
}
}
}
diff --git a/frontend/src/views/chart/chart/pie/pie_antv.js b/frontend/src/views/chart/chart/pie/pie_antv.js
index b3ad13f44a..00fbb8ba81 100644
--- a/frontend/src/views/chart/chart/pie/pie_antv.js
+++ b/frontend/src/views/chart/chart/pie/pie_antv.js
@@ -82,12 +82,6 @@ export function basePieOptionAntV(plot, container, chart, action) {
// custom color
options.color = antVCustomColor(chart)
- if (customAttr.color.gradient) {
- options.color = options.color.map((ele) => {
- return `l(270) 0:#ffffff00 1:${ele}`
- })
- }
-
// 开始渲染
if (plot) {
plot.destroy()
@@ -165,12 +159,6 @@ export function basePieRoseOptionAntV(plot, container, chart, action) {
// custom color
options.color = antVCustomColor(chart)
- if (customAttr.color.gradient) {
- options.color = options.color.map((ele) => {
- return `l(270) 0:#ffffff00 1:${ele}`
- })
- }
-
// 开始渲染
if (plot) {
plot.destroy()
diff --git a/frontend/src/views/chart/chart/table/table-info.js b/frontend/src/views/chart/chart/table/table-info.js
index 3d12c5cc62..63f044588f 100644
--- a/frontend/src/views/chart/chart/table/table-info.js
+++ b/frontend/src/views/chart/chart/table/table-info.js
@@ -424,7 +424,7 @@ export function baseTablePivot(s2, container, chart, action, tableData) {
// 解析合计、小计排序
const sortParams = []
- if (totalCfg.row.totalSort && totalCfg.row.totalSort !== 'none' && c.length > 0 && totalCfg.row.showGrandTotals) {
+ if (totalCfg.row.totalSort && totalCfg.row.totalSort !== 'none' && c.length > 0 && totalCfg.row.showGrandTotals && v.indexOf(totalCfg.row.totalSortField) > -1) {
const sort = {
sortFieldId: c[0],
sortMethod: totalCfg.row.totalSort.toUpperCase(),
@@ -436,7 +436,7 @@ export function baseTablePivot(s2, container, chart, action, tableData) {
sortParams.push(sort)
}
totalCfg.col.totalSort = false
- if (totalCfg.col.totalSort && totalCfg.col.totalSort !== 'none' && r.length > 0 && totalCfg.col.showGrandTotals) {
+ if (totalCfg.col.totalSort && totalCfg.col.totalSort !== 'none' && r.length > 0 && totalCfg.col.showGrandTotals && v.indexOf(totalCfg.col.totalSortField) > -1) {
const sort = {
sortFieldId: r[0],
sortMethod: totalCfg.col.totalSort.toUpperCase(),
diff --git a/frontend/src/views/chart/chart/util.js b/frontend/src/views/chart/chart/util.js
index 00084eace9..6e77d031b6 100644
--- a/frontend/src/views/chart/chart/util.js
+++ b/frontend/src/views/chart/chart/util.js
@@ -1,5 +1,6 @@
import { DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
import { equalsAny, includesAny } from '@/utils/StringUtils'
+import _ from 'lodash'
export function hexColorToRGBA(hex, alpha) {
const rgb = [] // 定义rgb数组
@@ -49,6 +50,7 @@ export const TYPE_CONFIGS = [
'tableHeaderFontColor',
'tableFontColor',
'tableBorderColor',
+ 'tableScrollBarColor',
'alpha'
],
'size-selector-ant-v': [
@@ -95,6 +97,7 @@ export const TYPE_CONFIGS = [
'tableHeaderFontColor',
'tableFontColor',
'tableBorderColor',
+ 'tableScrollBarColor',
'alpha'
],
'size-selector-ant-v': [
@@ -144,6 +147,7 @@ export const TYPE_CONFIGS = [
'tableHeaderFontColor',
'tableFontColor',
'tableBorderColor',
+ 'tableScrollBarColor',
'alpha'
],
'size-selector-ant-v': [
@@ -943,6 +947,7 @@ export const TYPE_CONFIGS = [
'color-selector': [
'value',
'custom',
+ 'gradient',
'alpha'
],
'label-selector-ant-v': [
@@ -1149,6 +1154,87 @@ export const TYPE_CONFIGS = [
]
}
},
+ {
+ render: 'antv',
+ category: 'chart.chart_type_compare',
+ value: 'percentage-bar-stack-horizontal',
+ title: 'chart.chart_percentage_bar_stack_horizontal',
+ icon: 'percentage-bar-stack-horizontal',
+ properties: [
+ 'color-selector',
+ 'size-selector-ant-v',
+ 'label-selector-ant-v',
+ 'tooltip-selector-ant-v',
+ 'x-axis-selector-ant-v',
+ 'y-axis-selector-ant-v',
+ 'title-selector-ant-v',
+ 'legend-selector-ant-v'
+ ],
+ propertyInner: {
+ 'color-selector': [
+ 'value',
+ 'colorPanel',
+ 'customColor',
+ 'gradient',
+ 'alpha'
+ ],
+ 'size-selector-ant-v': [
+ 'barDefault',
+ 'barGap'
+ ],
+ 'label-selector-ant-v': [
+ 'show',
+ 'fontSize',
+ 'color',
+ 'position-h',
+ 'reserveDecimalCount'
+ ],
+ 'tooltip-selector-ant-v': [
+ 'show',
+ 'textStyle'
+ ],
+ 'x-axis-selector-ant-v': [
+ 'show',
+ 'position',
+ 'name',
+ 'nameTextStyle',
+ 'axisValue',
+ 'splitLine',
+ 'axisForm',
+ 'axisLabel'
+ ],
+ 'y-axis-selector-ant-v': [
+ 'show',
+ 'position',
+ 'name',
+ 'nameTextStyle',
+ 'splitLine',
+ 'axisForm',
+ 'axisLabel'
+ ],
+ 'title-selector-ant-v': [
+ 'show',
+ 'title',
+ 'fontSize',
+ 'color',
+ 'hPosition',
+ 'isItalic',
+ 'isBolder',
+ 'remarkShow',
+ 'fontFamily',
+ 'letterSpace',
+ 'fontShadow'
+ ],
+ 'legend-selector-ant-v': [
+ 'show',
+ 'icon',
+ 'orient',
+ 'textStyle',
+ 'hPosition',
+ 'vPosition'
+ ]
+ }
+ },
{
render: 'antv',
category: 'chart.chart_type_distribute',
@@ -1168,7 +1254,6 @@ export const TYPE_CONFIGS = [
'value',
'colorPanel',
'customColor',
- 'gradient',
'alpha'
],
'size-selector-ant-v': [
@@ -1228,7 +1313,6 @@ export const TYPE_CONFIGS = [
'value',
'colorPanel',
'customColor',
- 'gradient',
'alpha'
],
'size-selector-ant-v': [
@@ -1289,7 +1373,6 @@ export const TYPE_CONFIGS = [
'value',
'colorPanel',
'customColor',
- 'gradient',
'alpha'
],
'size-selector-ant-v': [
@@ -1347,7 +1430,6 @@ export const TYPE_CONFIGS = [
'value',
'colorPanel',
'customColor',
- 'gradient',
'alpha'
],
'size-selector-ant-v': [
@@ -1769,6 +1851,7 @@ export const TYPE_CONFIGS = [
'tableItemBgColor',
'tableHeaderFontColor',
'tableFontColor',
+ 'tableScrollBarColor',
'alpha'
],
'size-selector': [
@@ -1808,6 +1891,7 @@ export const TYPE_CONFIGS = [
'tableItemBgColor',
'tableHeaderFontColor',
'tableFontColor',
+ 'tableScrollBarColor',
'alpha'
],
'size-selector': [
@@ -3411,15 +3495,18 @@ function handleSetZeroMultiDimension(chart, data) {
let insertCount = 0
dimensionInfoMap.forEach((dimensionInfo, field) => {
if (dimensionInfo.set.size < subDimensionSet.size) {
- const toBeFillDimension = [...subDimensionSet].filter(item => !dimensionInfo.set.has(item))
- toBeFillDimension.forEach(dimension => {
- data.splice(dimensionInfo.index + insertCount, 0, {
- field,
- value: 0,
- category: dimension
- })
+ let subInsertIndex = 0
+ subDimensionSet.forEach(dimension => {
+ if (!dimensionInfo.set.has(dimension)) {
+ data.splice(dimensionInfo.index + insertCount + subInsertIndex, 0, {
+ field,
+ value: 0,
+ category: dimension
+ })
+ }
+ subInsertIndex++
})
- insertCount += toBeFillDimension.size
+ insertCount += subDimensionSet.size - dimensionInfo.set.size
}
})
}
@@ -3440,3 +3527,21 @@ function handleIgnoreData(chart, data) {
}
}
}
+
+export function resetRgbOpacity(sourceColor, times) {
+ if (sourceColor?.startsWith('rgb')) {
+ const numbers = sourceColor.match(/(\d(\.\d+)?)+/g)
+ if (numbers?.length === 4) {
+ const opacity = parseFloat(numbers[3])
+ if (_.isNumber(opacity)) {
+ let resultOpacity = (opacity * times).toFixed(2)
+ if (resultOpacity > 1) {
+ resultOpacity = 1
+ }
+ const colorArr = numbers.slice(0, 3).concat(resultOpacity)
+ return `rgba(${colorArr.join(',')})`
+ }
+ }
+ }
+ return sourceColor
+}
diff --git a/frontend/src/views/chart/chart/waterfall/waterfall.js b/frontend/src/views/chart/chart/waterfall/waterfall.js
index 61a20c363e..79797d01c3 100644
--- a/frontend/src/views/chart/chart/waterfall/waterfall.js
+++ b/frontend/src/views/chart/chart/waterfall/waterfall.js
@@ -4,7 +4,8 @@ import {
getTheme,
getTooltip,
getXAxis,
- getYAxis
+ getYAxis,
+ setGradientColor
} from '@/views/chart/chart/common/common_antv'
import { Waterfall } from '@antv/g2plot'
import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
@@ -28,11 +29,17 @@ export function baseWaterfallOptionAntV(plot, container, chart, action) {
}
// data
const data = chart.data.data
+ const [risingColorRgba, fallingColorRgba, totalColorRgba] = theme.styleSheet.paletteQualitative10
+
+ let customAttrCopy = {}
+ if (chart.customAttr) {
+ customAttrCopy = JSON.parse(chart.customAttr)
+ }
// total
const total = {
label: '合计',
style: {
- fill: theme.styleSheet.paletteQualitative10[2]
+ fill: setGradientColor(totalColorRgba, customAttrCopy.color.gradient, 270)
}
}
// options
@@ -50,25 +57,25 @@ export function baseWaterfallOptionAntV(plot, container, chart, action) {
items: [
{ name: '增加', marker: {
style: {
- fill: theme.styleSheet.paletteQualitative10[0]
+ fill: setGradientColor(risingColorRgba, customAttrCopy.color.gradient, 270)
}
}},
{ name: '减少', marker: {
style: {
- fill: theme.styleSheet.paletteQualitative10[1]
+ fill: setGradientColor(fallingColorRgba, customAttrCopy.color.gradient, 270)
}
}},
{ name: '合计', marker: {
style: {
- fill: theme.styleSheet.paletteQualitative10[2]
+ fill: setGradientColor(totalColorRgba, customAttrCopy.color.gradient, 270)
}
}}
]
},
xAxis: xAxis,
yAxis: yAxis,
- risingFill: theme.styleSheet.paletteQualitative10[0],
- fallingFill: theme.styleSheet.paletteQualitative10[1],
+ risingFill: setGradientColor(risingColorRgba, customAttrCopy.color.gradient, 270),
+ fallingFill: setGradientColor(fallingColorRgba, customAttrCopy.color.gradient, 270),
total: total,
interactions: [
{
@@ -79,7 +86,7 @@ export function baseWaterfallOptionAntV(plot, container, chart, action) {
}
]
}
- // size
+
let customAttr = {}
if (chart.customAttr) {
customAttr = JSON.parse(chart.customAttr)
diff --git a/frontend/src/views/chart/components/ChartComponentG2.vue b/frontend/src/views/chart/components/ChartComponentG2.vue
index fe5998d8be..8a0c54f0f0 100644
--- a/frontend/src/views/chart/components/ChartComponentG2.vue
+++ b/frontend/src/views/chart/components/ChartComponentG2.vue
@@ -57,6 +57,7 @@ import TitleRemark from '@/views/chart/view/TitleRemark'
import { DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
import { baseMixOptionAntV } from '@/views/chart/chart/mix/mix_antv'
import ChartTitleUpdate from './ChartTitleUpdate.vue'
+import { equalsAny } from '@/utils/StringUtils'
export default {
name: 'ChartComponentG2',
@@ -233,13 +234,13 @@ export default {
this.myChart = baseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, true, false)
} else if (chart.type === 'bar-group') {
this.myChart = baseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, true, false)
- } else if (chart.type === 'bar-stack' || chart.type === 'percentage-bar-stack') {
+ } else if (equalsAny(chart.type, 'bar-stack', 'percentage-bar-stack')) {
this.myChart = baseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, false, true)
} else if (chart.type === 'bar-group-stack') {
this.myChart = baseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, true, true)
} else if (chart.type === 'bar-horizontal') {
this.myChart = hBaseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, true, false)
- } else if (chart.type === 'bar-stack-horizontal') {
+ } else if (equalsAny(chart.type, 'bar-stack-horizontal', 'percentage-bar-stack-horizontal')) {
this.myChart = hBaseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, false, true)
} else if (chart.type === 'line') {
this.myChart = baseLineOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
diff --git a/frontend/src/views/chart/components/ChartComponentS2.vue b/frontend/src/views/chart/components/ChartComponentS2.vue
index 45a26c20f4..d8e0a556c2 100644
--- a/frontend/src/views/chart/components/ChartComponentS2.vue
+++ b/frontend/src/views/chart/components/ChartComponentS2.vue
@@ -55,25 +55,32 @@
/>
-
- {{ $t('chart.total') }}
- {{ chart.datasetMode === 0 ? chart.totalItems : ((chart.data && chart.data.tableRow) ? chart.data.tableRow.length : 0) }}
- {{ $t('chart.items') }}
-
-
+
+
+ {{ $t('chart.total') }}
+ {{
+ chart.datasetMode === 0 ? chart.totalItems : ((chart.data && chart.data.tableRow) ? chart.data.tableRow.length : 0)
+ }}
+ {{ $t('chart.items') }}
+
+
+
- 
+