feat: AntV时间条形图

This commit is contained in:
ulleo 2023-12-14 11:24:26 +08:00
parent c4664243c2
commit 4bafcaeb97
15 changed files with 393 additions and 29 deletions

View File

@ -636,7 +636,9 @@ public class ChartViewService {
if (StringUtils.equalsIgnoreCase(view.getType(), "table-pivot")
|| StringUtils.containsIgnoreCase(view.getType(), "group")
|| ("antv".equalsIgnoreCase(view.getRender()) && "line".equalsIgnoreCase(view.getType()))
|| StringUtils.equalsIgnoreCase(view.getType(), "flow-map")) {
|| StringUtils.equalsIgnoreCase(view.getType(), "flow-map")
|| StringUtils.equalsIgnoreCase(view.getType(), "bar-time-range")
) {
xAxis.addAll(xAxisExt);
}
List<ChartViewFieldDTO> yAxis = gson.fromJson(view.getYAxis(), tokenType);
@ -1421,6 +1423,8 @@ public class ChartViewService {
mapChart = ChartDataBuild.transBaseGroupDataAntV(xAxisBase, xAxis, xAxisExt, yAxis, view, data, isDrill);
} else if (StringUtils.equalsIgnoreCase(view.getType(), "bar-group-stack")) {
mapChart = ChartDataBuild.transGroupStackDataAntV(xAxisBase, xAxis, xAxisExt, yAxis, extStack, data, view, isDrill);
} else if (StringUtils.equalsIgnoreCase(view.getType(), "bar-time-range")) {
mapChart = ChartDataBuild.transTimeBarDataAntV(xAxisBase, xAxis, xAxisExt, yAxis, extStack, data, view, isDrill);
} else if (StringUtils.containsIgnoreCase(view.getType(), "bar-stack")) {
mapChart = ChartDataBuild.transStackChartDataAntV(xAxis, yAxis, view, data, extStack, isDrill);
} else if (StringUtils.containsIgnoreCase(view.getType(), "line-stack")) {

View File

@ -11,6 +11,7 @@ import org.apache.commons.lang3.StringUtils;
import java.math.BigDecimal;
import java.math.RoundingMode;
import java.text.SimpleDateFormat;
import java.util.*;
import java.util.stream.Collectors;
@ -1282,6 +1283,120 @@ public class ChartDataBuild {
}
}
private static String getDateFormat(String dateStyle, String datePattern) {
String split;
if (StringUtils.equalsIgnoreCase(datePattern, "date_split")) {
split = "/";
} else {
split = "-";
}
switch (dateStyle) {
case "y":
return "yyyy";
case "y_M":
return "yyyy" + split + "MM";
case "y_M_d":
return "yyyy" + split + "MM" + split + "dd";
case "H_m_s":
return "HH:mm:ss";
case "y_M_d_H":
return "yyyy" + split + "MM" + split + "dd" + " HH";
case "y_M_d_H_m":
return "yyyy" + split + "MM" + split + "dd" + " HH:mm";
case "y_M_d_H_m_s":
return "yyyy" + split + "MM" + split + "dd" + " HH:mm:ss";
default:
return "yyyy-MM-dd HH:mm:ss";
}
}
public static Map<String, Object> transTimeBarDataAntV(List<ChartViewFieldDTO> xAxisBase, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> xAxisExt, List<ChartViewFieldDTO> yAxis, List<ChartViewFieldDTO> extStack, List<String[]> data, ChartViewWithBLOBs view, boolean isDrill) {
Map<String, Object> map = new HashMap<>();
if (CollectionUtils.isEmpty(xAxisBase) || CollectionUtils.isEmpty(xAxisExt) || xAxisExt.size() < 2) {
map.put("data", new ArrayList<>());
return map;
}
if (xAxisExt.stream().filter(ext -> !ext.isDrill()).count() != 2) {
map.put("data", new ArrayList<>());
return map;
}
List<Date> dates = new ArrayList<>();
ChartViewFieldDTO xAxis1 = xAxis.get(xAxisBase.size());
SimpleDateFormat sdf = new SimpleDateFormat(getDateFormat(xAxis1.getDateStyle(), xAxis1.getDatePattern()));
List<Object> dataList = new ArrayList<>();
for (int i1 = 0; i1 < data.size(); i1++) {
String[] row = data.get(i1);
StringBuilder xField = new StringBuilder();
if (isDrill) {
xField.append(row[xAxis.size() - 1]);
} else {
for (int i = 0; i < xAxisBase.size(); i++) {
if (i == xAxisBase.size() - 1) {
xField.append(row[i]);
} else {
xField.append(row[i]).append("\n");
}
}
}
Map<String, Object> obj = new HashMap<>();
obj.put("field", xField.toString());
obj.put("category", xField.toString());
List<ChartDimensionDTO> dimensionList = new ArrayList<>();
for (int j = 0; j < xAxis.size(); j++) {
ChartDimensionDTO chartDimensionDTO = new ChartDimensionDTO();
chartDimensionDTO.setId(xAxis.get(j).getId());
chartDimensionDTO.setValue(row[j]);
dimensionList.add(chartDimensionDTO);
}
obj.put("dimensionList", dimensionList);
List<String> values = new ArrayList<>();
if (row[xAxisBase.size()] == null || row[xAxisBase.size() + 1] == null) {
continue;
}
values.add(row[xAxisBase.size()]);
values.add(row[xAxisBase.size() + 1]);
obj.put("values", values);
try {
Date date = sdf.parse(row[xAxisBase.size()]);
if (date != null) {
dates.add(date);
}
} catch (Exception ignore) {
}
try {
Date date = sdf.parse(row[xAxisBase.size() + 1]);
if (date != null) {
dates.add(date);
}
} catch (Exception ignore) {
}
dataList.add(obj);
}
map.put("minTime", sdf.format(dates.stream().min(Date::compareTo).orElse(null)));
map.put("maxTime", sdf.format(dates.stream().max(Date::compareTo).orElse(null)));
map.put("data", dataList);
return map;
}
public static Map<String, Object> transBidirectionalBarData(List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, ChartViewDTO view, List<String[]> data, boolean isDrill) {
Map<String, Object> map = new HashMap<>();

View File

@ -0,0 +1,8 @@
<svg width="1072" height="1024" xmlns="http://www.w3.org/2000/svg" p-id="1374" version="1.1" class="icon" t="1616054957891">
<g>
<title>Layer 1</title>
<path id="svg_1" p-id="1375" d="m150.528,77.48267l0,207.28685l472.64914,0l2.99886,-207.28685l-475.648,0zm873.32571,303.34781l-469.32565,0l0,204.62018l469.12451,0l0.20114,-204.62018zm-203.14209,303.34781l-483.51692,0l0,207.28685l479.25025,0l4.26667,-207.28685z"/>
<path id="svg_2" p-id="1376" d="m115.15124,943.07962l0,-942.93333l-41.20381,0l0,994.37714l996.10819,0l0,-51.44381l-954.90438,0z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 566 B

View File

@ -1184,6 +1184,7 @@ export default {
chart_bar_stack: 'Stack Bar',
chart_percentage_bar_stack: 'Percentage Stack Bar',
chart_bar_horizontal: 'Horizontal Bar',
chart_bar_time_range: 'Time Bar',
chart_bar_stack_horizontal: 'Stack Horizontal Bar',
chart_percentage_bar_stack_horizontal: 'Horizontal Percentage Stack Bar',
chart_bidirectional_bar: 'Bidirectional Bar',

View File

@ -1182,6 +1182,7 @@ export default {
chart_bar_stack: '堆疊柱狀圖',
chart_percentage_bar_stack: '百分比柱狀圖',
chart_bar_horizontal: '橫嚮柱狀圖',
chart_bar_time_range: '時間條形圖',
chart_bar_stack_horizontal: '橫嚮堆疊柱狀圖',
chart_percentage_bar_stack_horizontal: '橫嚮百分比柱狀圖',
chart_bidirectional_bar: '對稱柱狀圖',

View File

@ -1182,6 +1182,7 @@ export default {
chart_bar_stack: '堆叠柱状图',
chart_percentage_bar_stack: '百分比柱状图',
chart_bar_horizontal: '横向柱状图',
chart_bar_time_range: '时间条形图',
chart_bar_stack_horizontal: '横向堆叠柱状图',
chart_percentage_bar_stack_horizontal: '横向百分比柱状图',
chart_bidirectional_bar: '对称柱状图',

View File

@ -262,6 +262,130 @@ export function hBaseBarOptionAntV(plot, container, chart, action, isGroup, isSt
return plot
}
export function timeRangeBarOptionAntV(plot, container, chart, action) {
// theme
const theme = getTheme(chart)
// attr
const label = getLabel(chart)
const tooltip = getTooltip(chart)
// style
const legend = getLegend(chart)
const yAxis = getXAxis(chart)
const xAxis = getYAxis(chart)
// data
const data = _.cloneDeep(chart.data.data)
const minTime = chart.data.minTime
const maxTime = chart.data.maxTime
// config
const slider = getSlider(chart)
const analyse = getAnalyse(chart)
// options
const options = {
theme: theme,
data: data,
xField: 'values',
yField: 'field',
seriesField: 'category',
appendPadding: getPadding(chart),
label: label,
tooltip: tooltip,
legend: legend,
xAxis: xAxis,
yAxis: yAxis,
slider: slider,
annotations: analyse,
isRange: true,
meta: {
values: {
type: 'time',
min: minTime,
max: maxTime
}
},
brush: {
enabled: true,
isStartEnable: (context) => {
// 按住 shift 键,才能开启交互
if (context.event.gEvent.originalEvent?.shiftKey) {
return true
}
return false
}
},
interactions: [
{
type: 'legend-active', cfg: {
start: [{ trigger: 'legend-item:mouseenter', action: ['element-active:reset'] }],
end: [{ trigger: 'legend-item:mouseleave', action: ['element-active:reset'] }]
}
},
{
type: 'legend-filter', cfg: {
start: [{ trigger: 'legend-item:click', action: ['list-unchecked:toggle', 'data-filter:filter', 'element-active:reset', 'element-highlight:reset'] }]
}
},
{
type: 'tooltip', cfg: {
start: [{ trigger: 'interval:mousemove', action: 'tooltip:show' }],
end: [{ trigger: 'interval:mouseleave', action: 'tooltip:hide' }]
}
},
{
type: 'active-region', cfg: {
start: [{ trigger: 'interval:mousemove', action: 'active-region:show' }],
end: [{ trigger: 'interval:mouseleave', action: 'active-region:hide' }]
}
}
]
}
// size
let customAttr = {}
if (chart.customAttr) {
customAttr = JSON.parse(chart.customAttr)
if (customAttr.size) {
const s = JSON.parse(JSON.stringify(customAttr.size))
if (s.barDefault) {
delete options.marginRatio
} else {
options.marginRatio = s.barGap
}
}
}
delete options.isGroup
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 setGradientColor(ele, customAttr.color.gradient)
})
}
// 处理空值
if (chart.senior) {
let emptyDataStrategy = JSON.parse(chart.senior)?.functionCfg?.emptyDataStrategy
if (!emptyDataStrategy) {
emptyDataStrategy = 'breakLine'
}
handleEmptyDataStrategy(emptyDataStrategy, chart, data, options)
}
// 开始渲染
if (plot) {
plot.destroy()
}
plot = new Bar(container, options)
plot.off('interval:click')
plot.on('interval:click', action)
return plot
}
export function baseBidirectionalBarOptionAntV(plot, container, chart, action, isGroup, isStack) {
// theme
const theme = getTheme(chart)

View File

@ -422,7 +422,7 @@ export function getTooltip(chart) {
res = valueFormatter(param.value, formatterItem)
}
}
} else if (includesAny(chart.type, 'bar', 'scatter', 'radar', 'area') && !chart.type.includes('group')) {
} else if (includesAny(chart.type, 'bar', 'scatter', 'radar', 'area') && !chart.type.includes('group') && chart.type !== 'bar-time-range') {
obj = { name: param.category, value: param.value }
for (let i = 0; i < yAxis.length; i++) {
const f = yAxis[i]
@ -470,6 +470,9 @@ export function getTooltip(chart) {
res = valueFormatter(param.value, formatterItem)
}
}
} else if (chart.type === 'bar-time-range') {
obj = { values: param.values, name: param.category }
res = param.values[0] + ' - ' + param.values[1]
} else {
res = param.value
}
@ -724,7 +727,7 @@ export function getXAxis(chart) {
delete axis.maxLimit
delete axis.tickCount
const axisValue = a.axisValue
if (chart.type.includes('horizontal')) {
if (chart.type.includes('horizontal') || chart.type === 'bar-time-range') {
if (axisValue && !axisValue.auto) {
const yAxisSeriesMaxList = []
const maxList = []
@ -814,7 +817,7 @@ export function getYAxis(chart) {
if (chart.type === 'waterfall') {
return value
} else {
if (!chart.type.includes('horizontal')) {
if (!(chart.type.includes('horizontal') || chart.type === 'bar-time-range')) {
if (!a.axisLabelFormatter) {
return valueFormatter(value, formatterItem)
} else {
@ -841,7 +844,7 @@ export function getYAxis(chart) {
delete axis.maxLimit
delete axis.tickCount
const axisValue = a.axisValue
if (!chart.type.includes('horizontal')) {
if (!chart.type.includes('horizontal') || chart.type === 'bar-time-range') {
if (axisValue && !axisValue.auto) {
const yAxisSeriesMaxList = []
const maxList = []

View File

@ -1100,6 +1100,85 @@ export const TYPE_CONFIGS = [
]
}
},
{
render: 'antv',
category: 'chart.chart_type_compare',
value: 'bar-time-range',
title: 'chart.chart_bar_time_range',
icon: 'bar-time-range',
properties: [
'color-selector',
'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'
],
'tooltip-selector-ant-v': [
'show',
'textStyle'
],
'x-axis-selector-ant-v': [
'show',
'position',
'name',
'nameTextStyle',
'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_compare',
@ -3517,7 +3596,7 @@ export function getColors(chart, colors, reset) {
}
}
}
} else if ((includesAny(chart.type, 'bar', 'radar', 'area')) && !chart.type.includes('group')) {
} else if ((includesAny(chart.type, 'bar', 'radar', 'area')) && !chart.type.includes('group') && chart.type !== 'bar-time-range') {
if (Object.prototype.toString.call(chart.yaxis) === '[object Array]') {
series = JSON.parse(JSON.stringify(chart.yaxis))
} else {

View File

@ -45,7 +45,7 @@ import { baseLiquid } from '@/views/chart/chart/liquid/liquid'
import { uuid } from 'vue-uuid'
import ViewTrackBar from '@/components/canvas/components/editor/ViewTrackBar'
import { getRemark, hexColorToRGBA } from '@/views/chart/chart/util'
import { baseBarOptionAntV, hBaseBarOptionAntV, baseBidirectionalBarOptionAntV } from '@/views/chart/chart/bar/bar_antv'
import { baseBarOptionAntV, hBaseBarOptionAntV, baseBidirectionalBarOptionAntV, timeRangeBarOptionAntV } from '@/views/chart/chart/bar/bar_antv'
import { baseAreaOptionAntV, baseLineOptionAntV } from '@/views/chart/chart/line/line_antv'
import { basePieOptionAntV, basePieRoseOptionAntV } from '@/views/chart/chart/pie/pie_antv'
import { baseScatterOptionAntV } from '@/views/chart/chart/scatter/scatter_antv'
@ -273,6 +273,8 @@ export default {
this.myChart = hBaseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, true, false)
} 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 (equalsAny(chart.type, 'bar-time-range')) {
this.myChart = timeRangeBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
} else if (chart.type === 'line') {
this.myChart = baseLineOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
} else if (chart.type === 'area') {
@ -389,8 +391,12 @@ export default {
}
return
}
const quotaList = this.pointParam.data.quotaList
quotaList[0]['value'] = this.pointParam.data.value
let quotaList = this.pointParam.data.quotaList
if (this.chart.type === 'bar-time-range') {
quotaList = this.pointParam.data.dimensionList
} else {
quotaList[0]['value'] = this.pointParam.data.value
}
const linkageParam = {
option: 'linkage',
name: this.pointParam.data.name,

View File

@ -28,14 +28,18 @@
size="mini"
@change="changeXAxisStyle('position')"
>
<div v-if="chart.type !== 'bidirectional-bar'">
<el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
<el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
</div>
<div v-else-if="chart.type === 'bidirectional-bar'">
<div v-if="chart.type === 'bidirectional-bar'">
<el-radio-button label="top">{{ $t('chart.text_pos_left') }}</el-radio-button>
<el-radio-button label="bottom">{{ $t('chart.text_pos_center') }}</el-radio-button>
</div>
<div v-else-if="chart.type === 'bar-time-range'">
<el-radio-button label="bottom">{{ $t('chart.text_pos_left') }}</el-radio-button>
<el-radio-button label="top">{{ $t('chart.text_pos_right') }}</el-radio-button>
</div>
<div v-else>
<el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
<el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
</div>
</el-radio-group>
</el-form-item>
<el-form-item
@ -266,7 +270,7 @@
/>
</el-form-item>
<el-form-item
v-if="chart.type && chart.type !== 'bidirectional-bar'"
v-if="chart.type && chart.type !== 'bidirectional-bar' && chart.type !== 'bar-time-range'"
:label="$t('chart.axis_label_rotate')"
class="form-item form-item-slider"
>

View File

@ -28,14 +28,18 @@
size="mini"
@change="changeYAxisStyle('position')"
>
<div v-if="chart.type !== 'bidirectional-bar'">
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
</div>
<div v-else-if="chart.type === 'bidirectional-bar'">
<div v-if="chart.type === 'bidirectional-bar' ">
<el-radio-button label="right">{{ $t('chart.text_pos_top') }}</el-radio-button>
<el-radio-button label="left">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
</div>
<div v-else-if="chart.type === 'bar-time-range'">
<el-radio-button label="left">{{ $t('chart.text_pos_top') }}</el-radio-button>
<el-radio-button label="right">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
</div>
<div v-else>
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
</div>
</el-radio-group>
</el-form-item>
<el-form-item
@ -293,7 +297,7 @@
</el-select>
</el-form-item>
<span v-show="chart.type && !chart.type.includes('horizontal') && chart.type !== 'waterfall'">
<span v-show="chart.type && !(chart.type.includes('horizontal') || chart.type === 'bar-time-range') && chart.type !== 'waterfall'">
<el-form-item
:label="$t('chart.value_formatter_type')"
class="form-item"

View File

@ -299,10 +299,10 @@ export default {
},
getDateExtStatus() {
if (this.chart) {
this.showDateExt = this.chart.datasourceType === 'mysql' ||
this.showDateExt = (this.chart.datasourceType === 'mysql' ||
this.chart.datasourceType === 'ds_doris' ||
this.chart.datasourceType === 'StarRocks' ||
this.chart.datasetMode === 1
this.chart.datasetMode === 1) && this.chart.type !== 'bar-time-range'
} else {
this.showDateExt = false
}

View File

@ -687,7 +687,8 @@
v-if="view.type === 'bar-group'
|| view.type === 'bar-group-stack'
|| (view.render === 'antv' && view.type === 'line')
|| view.type === 'flow-map'"
|| view.type === 'flow-map'
|| view.type === 'bar-time-range'"
class="padding-lr"
>
<span class="data-area-label">
@ -755,7 +756,7 @@
</el-row>
<!--yaxis-->
<el-row
v-if="!equalsAny(view.type , 'table-info', 'label', 'flow-map')"
v-if="!equalsAny(view.type , 'table-info', 'label', 'flow-map', 'bar-time-range')"
class="padding-lr"
style="margin-top: 6px;"
>
@ -2122,7 +2123,7 @@ export default {
return equalsAny(this.view.type, 'table-normal', 'table-info')
},
showAnalyseCfg() {
if (this.view.type === 'bidirectional-bar') {
if (this.view.type === 'bidirectional-bar' || this.view.type === 'bar-time-range') {
return false
}
return includesAny(this.view.type, 'bar', 'line', 'area', 'gauge', 'liquid') ||
@ -2502,7 +2503,7 @@ export default {
}
})
if (equalsAny(view.type, 'table-pivot', 'bar-group', 'bar-group-stack', 'flow-map', 'race-bar') ||
(view.render === 'antv' && (view.type === 'line' || view.type === 'scatter'))) {
(view.render === 'antv' && (view.type === 'line' || view.type === 'scatter' || view.type === 'bar-time-range'))) {
view.xaxisExt.forEach(function(ele) {
if (!ele.dateStyle || ele.dateStyle === '') {
ele.dateStyle = 'y_M_d'
@ -3310,6 +3311,19 @@ export default {
if (this.view.type !== 'table-info') {
this.dragCheckType(this.view.xaxisExt, 'd')
}
if (this.view.type === 'bar-time-range') {
//
if (this.view.xaxisExt && this.view.xaxisExt.length > 0) {
for (let i = this.view.xaxisExt.length - 1; i >= 0; i--) {
if (this.view.xaxisExt[i].deType !== 1) {
this.view.xaxisExt.splice(i, 1)
}
}
}
if (this.view.xaxisExt.length > 2) {
this.view.xaxisExt = [this.view.xaxisExt[0], this.view.xaxisExt[1]]
}
}
if ((this.view.type === 'map' || this.view.type === 'word-cloud' || this.view.type === 'scatter') && this.view.xaxisExt.length > 1) {
this.view.xaxisExt = [this.view.xaxisExt[0]]
}

View File

@ -471,13 +471,13 @@ export default {
return false
},
xAisTitle() {
if (this.chart.type === 'bidirectional-bar') {
if (this.chart.type === 'bidirectional-bar' || this.chart.type === 'bar-time-range') {
return this.$t('chart.yAxis')
}
return this.$t('chart.xAxis')
},
yAxisTitle() {
if (this.chart.type === 'bidirectional-bar') {
if (this.chart.type === 'bidirectional-bar' || this.chart.type === 'bar-time-range') {
return this.$t('chart.xAxis')
}
if (this.chart.type === 'chart-mix') {