From a89e722e201de8e2b87ed4ab052f89197b4820b9 Mon Sep 17 00:00:00 2001 From: wisonic-s Date: Mon, 21 Nov 2022 14:41:01 +0800 Subject: [PATCH 1/2] =?UTF-8?q?fix(=E8=A7=86=E5=9B=BE-AntV=E6=8A=98?= =?UTF-8?q?=E7=BA=BF=E5=9B=BE):=20=E4=BF=AE=E5=A4=8D=E5=A4=9A=E7=BB=B4?= =?UTF-8?q?=E5=BA=A6=E6=8A=98=E7=BA=BF=E5=9B=BE=E6=8E=A7=E5=88=B6=E5=A4=84?= =?UTF-8?q?=E7=90=86=E6=98=BE=E7=A4=BA=E5=BC=82=E5=B8=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 修复多维度折线图在主维度和子维度一样且空值策略为置 0 时显示异常 https://www.tapd.cn/55578866/bugtrace/bugs/view/1155578866001019910 --- frontend/src/views/chart/chart/util.js | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/frontend/src/views/chart/chart/util.js b/frontend/src/views/chart/chart/util.js index ca04a3124f..37dd7d4dc1 100644 --- a/frontend/src/views/chart/chart/util.js +++ b/frontend/src/views/chart/chart/util.js @@ -3398,15 +3398,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 } }) } From b55440d4b760fa005201d8933a1db8719c2598cf Mon Sep 17 00:00:00 2001 From: wisonic-s Date: Wed, 23 Nov 2022 17:47:47 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE-=E8=A1=A8=E6=A0=BC)?= =?UTF-8?q?:=20=E8=A1=A8=E6=A0=BC=E6=94=AF=E6=8C=81=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=9D=A1=E9=A2=9C=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 表格支持修改滚动条颜色 https://www.tapd.cn/55578866/prong/stories/view/1155578866001010175 --- frontend/src/lang/en.js | 1 + frontend/src/lang/tw.js | 1 + frontend/src/lang/zh.js | 1 + frontend/src/views/chart/chart/chart.js | 8 ++++-- .../views/chart/chart/common/common_table.js | 11 +++++++- frontend/src/views/chart/chart/util.js | 24 ++++++++++++++++++ .../components/shapeAttr/ColorSelector.vue | 15 +++++++++++ .../chart/components/table/TableNormal.vue | 25 ++++++++++++++++--- .../panelStyle/PanelColorSelector.vue | 13 ++++++++++ 9 files changed, 92 insertions(+), 7 deletions(-) diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index 1979ce85d2..739856bb18 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -1336,6 +1336,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', diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js index 4914de9835..c5d48bf4f0 100644 --- a/frontend/src/lang/tw.js +++ b/frontend/src/lang/tw.js @@ -1336,6 +1336,7 @@ export default { table_align_left: '左對齊', table_align_center: '居中', table_align_right: '右對齊', + table_scroll_bar_color: '滾動條顏色', draw_back: '收回', senior: '高級', senior_cfg: '高級設置', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index 88749cf7c9..fcad801da6 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -1335,6 +1335,7 @@ export default { table_align_left: '左对齐', table_align_center: '居中', table_align_right: '右对齐', + table_scroll_bar_color: '滚动条颜色', draw_back: '收回', senior: '高级', senior_cfg: '高级设置', diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js index 5f78851539..cd0cfa5b05 100644 --- a/frontend/src/views/chart/chart/chart.js +++ b/frontend/src/views/chart/chart/chart.js @@ -28,7 +28,9 @@ export const DEFAULT_COLOR_CASE = { tableBorderColor: '#E6E7E4', seriesColors: [], // 格式：{"name":"s1","color":"","isCustom":false} areaBorderColor: '#303133', - areaBaseColor: '#FFFFFF' + areaBaseColor: '#FFFFFF', + tableScrollBarColor: 'rgba(0, 0, 0, 0.15)', + tableScrollBarHoverColor: 'rgba(0, 0, 0, 0.4)' } export const DEFAULT_COLOR_CASE_DARK = { @@ -44,7 +46,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_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/util.js b/frontend/src/views/chart/chart/util.js index 37dd7d4dc1..20889f0c7b 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': [ @@ -1756,6 +1760,7 @@ export const TYPE_CONFIGS = [ 'tableItemBgColor', 'tableHeaderFontColor', 'tableFontColor', + 'tableScrollBarColor', 'alpha' ], 'size-selector': [ @@ -1795,6 +1800,7 @@ export const TYPE_CONFIGS = [ 'tableItemBgColor', 'tableHeaderFontColor', 'tableFontColor', + 'tableScrollBarColor', 'alpha' ], 'size-selector': [ @@ -3430,3 +3436,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/components/shapeAttr/ColorSelector.vue b/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue index 6c8d7a0749..4dbebc5b80 100644 --- a/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue +++ b/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue @@ -237,6 +237,20 @@ @change="changeColorCase('tableBorderColor')" /> + + + import { hexColorToRGBA } from '../../chart/util' import eventBus from '@/components/canvas/utils/eventBus' -import { DEFAULT_SIZE } from '@/views/chart/chart/chart' +import { DEFAULT_COLOR_CASE, DEFAULT_SIZE } from '@/views/chart/chart/chart' export default { name: 'TableNormal', @@ -143,7 +143,9 @@ export default { scrollTimer: null, scrollTop: 0, showIndex: false, - indexLabel: '序号' + indexLabel: '序号', + scrollBarColor: DEFAULT_COLOR_CASE.tableScrollBarColor, + scrollBarHoverColor: DEFAULT_COLOR_CASE.tableScrollBarHoverColor } }, computed: { @@ -152,6 +154,12 @@ export default { background: hexColorToRGBA('#ffffff', 0), borderRadius: this.borderRadius } + }, + tableStyle() { + return { + width: '100%', + '--scroll-bar-color': this.scrollBarColor + } } }, watch: { @@ -283,6 +291,7 @@ export default { this.table_header_class.background = hexColorToRGBA(customAttr.color.tableHeaderBgColor, customAttr.color.alpha) this.table_item_class.color = customAttr.color.tableFontColor this.table_item_class.background = hexColorToRGBA(customAttr.color.tableItemBgColor, customAttr.color.alpha) + this.scrollBarColor = customAttr.color.tableScrollBarColor ? customAttr.color.tableScrollBarColor : DEFAULT_COLOR_CASE.tableScrollBarColor } if (customAttr.size) { this.table_header_class.fontSize = customAttr.size.tableTitleFontSize + 'px' @@ -472,7 +481,7 @@ export default { } - diff --git a/frontend/src/views/panel/subjectSetting/panelStyle/PanelColorSelector.vue b/frontend/src/views/panel/subjectSetting/panelStyle/PanelColorSelector.vue index 421557c96c..7960725df9 100644 --- a/frontend/src/views/panel/subjectSetting/panelStyle/PanelColorSelector.vue +++ b/frontend/src/views/panel/subjectSetting/panelStyle/PanelColorSelector.vue @@ -190,6 +190,19 @@ @change="changeColorCase('tableBorderColor')" /> + + +