forked from github/dataease
Merge remote-tracking branch 'origin/dev-v2' into dev-v2
# Conflicts: # core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts
This commit is contained in:
commit
d85b6dda9a
@ -234,9 +234,13 @@ const changeColorOption = (option?) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
const resetCustomColor = () => {
|
const resetCustomColor = () => {
|
||||||
state.value.basicStyleForm[seriesColorName.value] = []
|
if (props.chart.type.includes('map')) {
|
||||||
changeBasicStyle(seriesColorName.value)
|
changeColorOption()
|
||||||
setupSeriesColor()
|
} else {
|
||||||
|
state.value.basicStyleForm[seriesColorName.value] = []
|
||||||
|
changeBasicStyle(seriesColorName.value)
|
||||||
|
setupSeriesColor()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const switchColorCase = () => {
|
const switchColorCase = () => {
|
||||||
|
@ -155,11 +155,12 @@ const initMapCustomRange = () => {
|
|||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* 计算自定义区间
|
* 计算自定义区间
|
||||||
|
* 最大最小值取等分区间的最大最小值
|
||||||
*/
|
*/
|
||||||
const calcMapCustomRange = () => {
|
const calcMapCustomRange = () => {
|
||||||
const customRange = getDynamicColorScale(
|
const customRange = getDynamicColorScale(
|
||||||
mapLegendDefaultRange.min,
|
state.legendForm.miscForm.mapLegendMin,
|
||||||
mapLegendDefaultRange.max,
|
state.legendForm.miscForm.mapLegendMax,
|
||||||
state.legendForm.miscForm.mapLegendNumber
|
state.legendForm.miscForm.mapLegendNumber
|
||||||
)
|
)
|
||||||
state.legendForm.miscForm.mapLegendCustomRange = []
|
state.legendForm.miscForm.mapLegendCustomRange = []
|
||||||
@ -178,9 +179,7 @@ const calcMapCustomRange = () => {
|
|||||||
const changeLegendCustomType = (prop?) => {
|
const changeLegendCustomType = (prop?) => {
|
||||||
const type = state.legendForm.miscForm.mapLegendRangeType
|
const type = state.legendForm.miscForm.mapLegendRangeType
|
||||||
if (type === 'custom') {
|
if (type === 'custom') {
|
||||||
state.legendForm.miscForm.mapLegendCustomRange = cloneDeep(
|
calcMapCustomRange()
|
||||||
mapLegendCustomRangeCacheList.slice(0, state.legendForm.miscForm.mapLegendNumber + 1)
|
|
||||||
)
|
|
||||||
} else {
|
} else {
|
||||||
state.legendForm.miscForm.mapLegendCustomRange = []
|
state.legendForm.miscForm.mapLegendCustomRange = []
|
||||||
}
|
}
|
||||||
|
@ -10,7 +10,8 @@ import {
|
|||||||
getGeoJsonFile,
|
getGeoJsonFile,
|
||||||
hexColorToRGBA,
|
hexColorToRGBA,
|
||||||
parseJson,
|
parseJson,
|
||||||
getMaxAndMinValueByData
|
getMaxAndMinValueByData,
|
||||||
|
filterEmptyMinValue
|
||||||
} from '@/views/chart/components/js/util'
|
} from '@/views/chart/components/js/util'
|
||||||
import {
|
import {
|
||||||
handleGeoJson,
|
handleGeoJson,
|
||||||
@ -102,7 +103,7 @@ export class Map extends L7PlotChartView<ChoroplethOptions, Choropleth> {
|
|||||||
from: 'map',
|
from: 'map',
|
||||||
data: {
|
data: {
|
||||||
max: maxValue,
|
max: maxValue,
|
||||||
min: minValue,
|
min: minValue ?? filterEmptyMinValue(sourceData, 'value'),
|
||||||
legendNumber: legendNumber
|
legendNumber: legendNumber
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@ -252,7 +253,10 @@ export class Map extends L7PlotChartView<ChoroplethOptions, Choropleth> {
|
|||||||
if (colorScale.length) {
|
if (colorScale.length) {
|
||||||
options.color['value'] = colorScale.map(item => (item.color ? item.color : item))
|
options.color['value'] = colorScale.map(item => (item.color ? item.color : item))
|
||||||
if (colorScale[0].value && !misc.mapAutoLegend) {
|
if (colorScale[0].value && !misc.mapAutoLegend) {
|
||||||
options.color['scale']['domain'] = [minValue, maxValue]
|
options.color['scale']['domain'] = [
|
||||||
|
minValue ?? filterEmptyMinValue(sourceData, 'value'),
|
||||||
|
maxValue
|
||||||
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return options
|
return options
|
||||||
@ -272,6 +276,33 @@ export class Map extends L7PlotChartView<ChoroplethOptions, Choropleth> {
|
|||||||
if (!legend.show) {
|
if (!legend.show) {
|
||||||
return options
|
return options
|
||||||
}
|
}
|
||||||
|
// 内部函数 创建自定义图例的内容
|
||||||
|
const createLegendCustomContent = showItems => {
|
||||||
|
const containerDom = createDom(CONTAINER_TPL) as HTMLElement
|
||||||
|
const listDom = containerDom.getElementsByClassName(LIST_CLASS)[0] as HTMLElement
|
||||||
|
showItems.forEach(item => {
|
||||||
|
let value = '-'
|
||||||
|
if (item.value !== '') {
|
||||||
|
if (Array.isArray(item.value)) {
|
||||||
|
item.value.forEach((v, i) => {
|
||||||
|
item.value[i] = Number.isNaN(v) || v === 'NaN' ? 'NaN' : parseFloat(v).toFixed(0)
|
||||||
|
})
|
||||||
|
value = item.value.join('-')
|
||||||
|
} else {
|
||||||
|
const tmp = item.value as string
|
||||||
|
value = Number.isNaN(tmp) || tmp === 'NaN' ? 'NaN' : parseFloat(tmp).toFixed(0)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const substituteObj = { ...item, value }
|
||||||
|
|
||||||
|
const domStr = substitute(ITEM_TPL, substituteObj)
|
||||||
|
const itemDom = createDom(domStr)
|
||||||
|
// 给 legend 形状用的
|
||||||
|
itemDom.style.setProperty('--bgColor', item.color)
|
||||||
|
listDom.appendChild(itemDom)
|
||||||
|
})
|
||||||
|
return listDom
|
||||||
|
}
|
||||||
const LEGEND_SHAPE_STYLE_MAP = {
|
const LEGEND_SHAPE_STYLE_MAP = {
|
||||||
circle: {
|
circle: {
|
||||||
borderRadius: '50%'
|
borderRadius: '50%'
|
||||||
@ -324,61 +355,17 @@ export class Map extends L7PlotChartView<ChoroplethOptions, Choropleth> {
|
|||||||
color: rangeColor
|
color: rangeColor
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
customLegend['items'] = items
|
customLegend['customContent'] = (_: string, _items: CategoryLegendListItem[]) => {
|
||||||
const findColorByValue = (value, intervals) => {
|
if (items?.length) {
|
||||||
if (value) {
|
return createLegendCustomContent(items)
|
||||||
for (const interval of intervals) {
|
|
||||||
if (value >= interval.value[0] && value <= interval.value[1]) {
|
|
||||||
return interval.color
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 或者可以返回 undefined
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
options.color.value = t => {
|
|
||||||
const c = findColorByValue(t.value, items)
|
|
||||||
return c ? c : null
|
|
||||||
}
|
|
||||||
customLegend['domStyles'] = {
|
|
||||||
...customLegend['domStyles'],
|
|
||||||
'l7plot-legend l7plot-legend__category': {
|
|
||||||
'box-shadow': '0px 0px 0px 0px',
|
|
||||||
'background-color': 'var(--bgColor)',
|
|
||||||
padding: 0
|
|
||||||
},
|
|
||||||
'l7plot-legend__list-item': {
|
|
||||||
'margin-bottom': '3px'
|
|
||||||
}
|
}
|
||||||
|
return ''
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
customLegend['customContent'] = (_: string, items: CategoryLegendListItem[]) => {
|
customLegend['customContent'] = (_: string, items: CategoryLegendListItem[]) => {
|
||||||
const showItems = items?.length > 30 ? items.slice(0, 30) : items
|
const showItems = items?.length > 30 ? items.slice(0, 30) : items
|
||||||
if (showItems?.length) {
|
if (showItems?.length) {
|
||||||
const containerDom = createDom(CONTAINER_TPL) as HTMLElement
|
return createLegendCustomContent(showItems)
|
||||||
const listDom = containerDom.getElementsByClassName(LIST_CLASS)[0] as HTMLElement
|
|
||||||
showItems.forEach(item => {
|
|
||||||
let value = '-'
|
|
||||||
if (item.value !== '') {
|
|
||||||
if (Array.isArray(item.value)) {
|
|
||||||
item.value.forEach((v, i) => {
|
|
||||||
item.value[i] = Number.isNaN(v) || v === 'NaN' ? 'NaN' : parseFloat(v).toFixed(0)
|
|
||||||
})
|
|
||||||
value = item.value.join('-')
|
|
||||||
} else {
|
|
||||||
const tmp = item.value as string
|
|
||||||
value = Number.isNaN(tmp) || tmp === 'NaN' ? 'NaN' : parseFloat(tmp).toFixed(0)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const substituteObj = { ...item, value }
|
|
||||||
|
|
||||||
const domStr = substitute(ITEM_TPL, substituteObj)
|
|
||||||
const itemDom = createDom(domStr)
|
|
||||||
// 给 legend 形状用的
|
|
||||||
itemDom.style.setProperty('--bgColor', item.color)
|
|
||||||
listDom.appendChild(itemDom)
|
|
||||||
})
|
|
||||||
return listDom
|
|
||||||
}
|
}
|
||||||
return ''
|
return ''
|
||||||
}
|
}
|
||||||
|
@ -1048,3 +1048,23 @@ export function svgStrToUrl(svgStr: string): string {
|
|||||||
} catch (e) {}
|
} catch (e) {}
|
||||||
return file
|
return file
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取非空数据的最小值
|
||||||
|
* @param sourceData
|
||||||
|
* @param field
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
export function filterEmptyMinValue(sourceData, field) {
|
||||||
|
let notEmptyMinValue = 0
|
||||||
|
getMaxAndMinValueByData(
|
||||||
|
sourceData.filter(item => item[field]),
|
||||||
|
'value',
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
(max, min) => {
|
||||||
|
notEmptyMinValue = min
|
||||||
|
}
|
||||||
|
)
|
||||||
|
return notEmptyMinValue
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user