center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

fix(图表-热力图): 修复编辑状态下调整容器尺寸，没有自动刷新大小的问题

Browse Source
This commit is contained in:
jianneng-fit2cloud 2024-08-22 17:05:02 +08:00
parent 3a03d6c06d
commit 5fa1ddebc5
1 changed files with 22 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
core/core-frontend/src/views/chart/components/js/panel/charts/table/t-heatmap.ts
View File

@ -72,7 +72,16 @@ export class TableHeatmap extends G2PlotChartView<HeatmapOptions, Heatmap> {
limit: 1
}
}
protected getDefaultLength = (chart, l) => {
const containerDom = document.getElementById(chart.container)
const containerHeight = containerDom?.clientHeight || 100
const containerWidth = containerDom?.clientWidth || 100
let defaultLength = containerHeight - containerHeight * 0.5
if (l.orient !== 'vertical') {
defaultLength = containerWidth - containerWidth * 0.5
}
return defaultLength
}
async drawChart(drawOptions: G2PlotDrawOptions<Heatmap>): Promise<Heatmap> {
const { chart, container, action } = drawOptions
const xAxis = deepCopy(chart.xAxis)
@ -84,8 +93,6 @@ export class TableHeatmap extends G2PlotChartView<HeatmapOptions, Heatmap> {
const xField = xAxis[0].dataeaseName
const xFieldExt = xAxisExt[0].dataeaseName
const extColorField = extColor[0].dataeaseName
const containerDom = document.getElementById(container)
const containerHeight = containerDom?.clientHeight || 100
// data
const data = cloneDeep(chart.data.tableRow)
data.forEach(i => {
@ -114,13 +121,13 @@ export class TableHeatmap extends G2PlotChartView<HeatmapOptions, Heatmap> {
layout: 'vertical',
position: 'right',
slidable: true,
maxHeight: containerHeight - containerHeight * 0.2,
label: {
align: 'left',
spacing: 10
}
}
}
chart.container = container
const options = this.setupOptions(chart, initOptions)
const { Heatmap } = await import('@antv/g2plot/esm/plots/heatmap')
const newChart = new Heatmap(container, options)
@ -166,18 +173,10 @@ export class TableHeatmap extends G2PlotChartView<HeatmapOptions, Heatmap> {
newChart.on('afterrender', ev => {
const l = JSON.parse(JSON.stringify(parseJson(chart.customStyle).legend))
if (l.show) {
const extColor = deepCopy(chart.extColor)
const containerDom = document.getElementById(container)
const containerHeight = containerDom?.clientHeight || 100
const containerWidth = containerDom?.clientWidth || 100
let defaultLength = getLegend(chart)
if (l.orient === 'vertical') {
defaultLength = containerHeight - containerHeight * 0.5
} else {
defaultLength = containerWidth - containerWidth * 0.5
const rail = ev.view.getController('legend').option[extColor[0].dataeaseName]?.['rail']
if (rail) {
rail.defaultLength = this.getDefaultLength(chart, l)
}
ev.view.getController('legend').option[extColor[0].dataeaseName]['rail'].defaultLength =
defaultLength
}
})
return newChart
@ -251,12 +250,16 @@ export class TableHeatmap extends G2PlotChartView<HeatmapOptions, Heatmap> {
tmpOptions.legend.minWidth = 10
tmpOptions.legend.maxHeight = 600
tmpOptions.legend.maxWidth = 600
const containerDom = document.getElementById(chart.container)
const containerHeight = containerDom?.clientHeight || 100
const containerWidth = containerDom?.clientWidth || 100
let defaultLength = containerHeight - containerHeight * 0.5
if (l.orient === 'vertical') {
tmpOptions.legend.offsetY = -5
} else {
defaultLength = containerWidth - containerWidth * 0.5
}
tmpOptions.legend.rail = {
defaultLength: 100
}
tmpOptions.legend.rail = { defaultLength: defaultLength }
tmpOptions.legend.label = {
spacing: 10,
style: {
@ -272,6 +275,7 @@ export class TableHeatmap extends G2PlotChartView<HeatmapOptions, Heatmap> {
chart.customStyle.legend.orient = 'vertical'
chart.customStyle.legend.vPosition = 'center'
chart.customStyle.legend.hPosition = 'right'
chart.customStyle.legend.rail = { defaultLength: 100 }
return chart
}