Skip to content

D
dataease
提交 7e2da332 authored 作者: junjie's avatar junjie
浏览文件
操作

feat(视图): UI调整，汇总结果增加升、降序

上级 1e21d681
隐藏空白字符变更
内嵌 并排
正在显示 包含 111 行增加 和 34 行删除
backend/src/main/java/io/dataease/dto/chart/ChartViewFieldDTO.java
浏览文件 @ 7e2da332
...@@ -27,4 +27,6 @@ public class ChartViewFieldDTO { ...@@ -27,4 +27,6 @@ public class ChartViewFieldDTO {
private Integer deType; private Integer deType;
private String summary; private String summary;
private String sort;
} }
backend/src/main/java/io/dataease/service/chart/ChartViewService.java
浏览文件 @ 7e2da332
...@@ -160,6 +160,20 @@ public class ChartViewService { ...@@ -160,6 +160,20 @@ public class ChartViewService {
// TODO 字段汇总 排序等 // TODO 字段汇总 排序等
String[] field = yAxis.stream().map(y -> "CAST(" + y.getSummary() + "(" + y.getOriginName() + ") AS DECIMAL(20,2)) AS _" + y.getSummary() + "_" + y.getOriginName()).toArray(String[]::new); String[] field = yAxis.stream().map(y -> "CAST(" + y.getSummary() + "(" + y.getOriginName() + ") AS DECIMAL(20,2)) AS _" + y.getSummary() + "_" + y.getOriginName()).toArray(String[]::new);
String[] group = xAxis.stream().map(ChartViewFieldDTO::getOriginName).toArray(String[]::new); String[] group = xAxis.stream().map(ChartViewFieldDTO::getOriginName).toArray(String[]::new);
return MessageFormat.format("SELECT {0},{1} FROM {2} GROUP BY {3}", StringUtils.join(group, ","), StringUtils.join(field, ","), table, StringUtils.join(group, ",")); String[] order = yAxis.stream().filter(y -> StringUtils.isNotEmpty(y.getSort()) && !StringUtils.equalsIgnoreCase(y.getSort(), "none"))
.map(y -> "_" + y.getSummary() + "_" + y.getOriginName() + " " + y.getSort()).toArray(String[]::new);
String sql = MessageFormat.format("SELECT {0},{1} FROM {2} WHERE 1=1 {3} GROUP BY {4} ORDER BY null,{5}",
StringUtils.join(group, ","),
StringUtils.join(field, ","),
table,
"",
StringUtils.join(group, ","),
StringUtils.join(order, ","));
if (sql.endsWith(",")) {
sql = sql.substring(0, sql.length() - 1);
}
// 如果是对结果字段过滤，则再包裹一层sql
return sql;
} }
} }
frontend/src/lang/zh.js
浏览文件 @ 7e2da332
...@@ -673,7 +673,13 @@ export default { ...@@ -673,7 +673,13 @@ export default {
position: '位置', position: '位置',
rotate: '角度', rotate: '角度',
name: '名称', name: '名称',
icon: '图标' icon: '图标',
trigger_position: '触发位置',
asc: '升序',
desc: '降序',
sort: '排序',
filter: '过滤',
none: '无'
}, },
dataset: { dataset: {
datalist: '数据集', datalist: '数据集',
......
frontend/src/views/chart/chart/chart.js
浏览文件 @ 7e2da332
...@@ -58,7 +58,8 @@ export const DEFAULT_XAXIS_STYLE = { ...@@ -58,7 +58,8 @@ export const DEFAULT_XAXIS_STYLE = {
position: 'bottom', position: 'bottom',
name: '', name: '',
axisLabel: { axisLabel: {
rotate: 0 rotate: 0,
formatter: '{value}'
} }
} }
export const DEFAULT_YAXIS_STYLE = { export const DEFAULT_YAXIS_STYLE = {
...@@ -66,7 +67,8 @@ export const DEFAULT_YAXIS_STYLE = { ...@@ -66,7 +67,8 @@ export const DEFAULT_YAXIS_STYLE = {
position: 'left', position: 'left',
name: '', name: '',
axisLabel: { axisLabel: {
rotate: 0 rotate: 0,
formatter: '{value}'
} }
} }
// chart config // chart config
......
frontend/src/views/chart/components/QuotaItem.vue
浏览文件 @ 7e2da332
...@@ -6,10 +6,15 @@ ...@@ -6,10 +6,15 @@
{{ item.name }}<span v-if="item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span><i class="el-icon-arrow-down el-icon--right" /> {{ item.name }}<span v-if="item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span><i class="el-icon-arrow-down el-icon--right" />
</el-tag> </el-tag>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-notebook-2"> <el-dropdown-item>
<el-dropdown placement="right-start" size="mini" @command="summary"> <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="summary">
<span class="el-dropdown-link"> <span class="el-dropdown-link" style="display: flex;justify-content: space-between;align-items: center;width: 100%">
{{ $t('chart.summary') }}<span class="summary-span">({{ $t('chart.'+item.summary) }})</span><i class="el-icon-arrow-right el-icon--right" /> <span>
<i class="el-icon-notebook-2" />
<span>{{ $t('chart.summary') }}</span>
<span class="summary-span">({{ $t('chart.'+item.summary) }})</span>
</span>
<i class="el-icon-arrow-right el-icon--right" />
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="beforeSummary('sum')">{{ $t('chart.sum') }}</el-dropdown-item> <el-dropdown-item :command="beforeSummary('sum')">{{ $t('chart.sum') }}</el-dropdown-item>
...@@ -22,16 +27,41 @@ ...@@ -22,16 +27,41 @@
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item icon="el-icon-s-grid"> <el-dropdown-item>
<el-dropdown placement="right-start" size="mini" @command="quickCalc"> <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="quickCalc">
<span class="el-dropdown-link"> <span class="el-dropdown-link" style="display: flex;justify-content: space-between;align-items: center;width: 100%">
{{ $t('chart.quick_calc') }}<span class="summary-span">(无)</span><i class="el-icon-arrow-right el-icon--right" /> <span>
<i class="el-icon-s-grid" />
<span>{{ $t('chart.quick_calc') }}</span>
<span class="summary-span">(无)</span>
</span>
<i class="el-icon-arrow-right el-icon--right" />
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="beforeQuickCalc('none')">无</el-dropdown-item> <el-dropdown-item :command="beforeQuickCalc('none')">无</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item divided>
<el-dropdown placement="right-start" size="mini" style="width: 100%" @command="sort">
<span class="el-dropdown-link" style="display: flex;justify-content: space-between;align-items: center;width: 100%">
<span>
<i class="el-icon-sort" />
<span>{{ $t('chart.sort') }}</span>
<span class="summary-span">({{ $t('chart.'+item.sort) }})</span>
</span>
<i class="el-icon-arrow-right el-icon--right" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="beforeSort('none')">{{ $t('chart.none') }}</el-dropdown-item>
<el-dropdown-item :command="beforeSort('asc')">{{ $t('chart.asc') }}</el-dropdown-item>
<el-dropdown-item :command="beforeSort('desc')">{{ $t('chart.desc') }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-dropdown-item>
<el-dropdown-item icon="el-icon-files">
<span>{{ $t('chart.filter') }}...</span>
</el-dropdown-item>
<el-dropdown-item icon="el-icon-edit-outline" divided :command="beforeClickItem('rename')"> <el-dropdown-item icon="el-icon-edit-outline" divided :command="beforeClickItem('rename')">
<span>{{ $t('chart.show_name_set') }}</span> <span>{{ $t('chart.show_name_set') }}</span>
</el-dropdown-item> </el-dropdown-item>
...@@ -45,7 +75,7 @@ ...@@ -45,7 +75,7 @@
<el-dialog :title="$t('chart.show_name_set')" :visible="renameItem" :show-close="false" width="30%"> <el-dialog :title="$t('chart.show_name_set')" :visible="renameItem" :show-close="false" width="30%">
<el-form ref="itemForm" :model="itemForm" :rules="itemFormRules"> <el-form ref="itemForm" :model="itemForm" :rules="itemFormRules">
<el-form-item :label="$t('commons.name')" prop="name"> <el-form-item :label="$t('commons.name')" prop="name">
<el-input v-model="itemForm.name" size="mini"/> <el-input v-model="itemForm.name" size="mini" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
...@@ -86,6 +116,27 @@ export default { ...@@ -86,6 +116,27 @@ export default {
}, },
methods: { methods: {
clickItem(param) {
if (!param) {
return
}
switch (param.type) {
case 'rename':
this.showRename()
break
case 'remove':
this.removeItem()
break
default:
break
}
},
beforeClickItem(type) {
return {
type: type
}
},
summary(param) { summary(param) {
// console.log(param) // console.log(param)
this.item.summary = param.type this.item.summary = param.type
...@@ -96,6 +147,7 @@ export default { ...@@ -96,6 +147,7 @@ export default {
type: type type: type
} }
}, },
quickCalc(param) { quickCalc(param) {
}, },
...@@ -104,26 +156,18 @@ export default { ...@@ -104,26 +156,18 @@ export default {
type: type type: type
} }
}, },
clickItem(param) {
if (!param) { sort(param) {
return // console.log(param)
} this.item.sort = param.type
switch (param.type) { this.$emit('onQuotaItemChange', this.item)
case 'rename':
this.showRename()
break
case 'remove':
this.removeItem()
break
default:
break
}
}, },
beforeClickItem(type) { beforeSort(type) {
return { return {
type: type type: type
} }
}, },
showRename() { showRename() {
this.itemForm.name = this.item.name this.itemForm.name = this.item.name
this.renameItem = true this.renameItem = true
......
frontend/src/views/chart/components/component_style/XAxisSelector.vue
浏览文件 @ 7e2da332
...@@ -23,6 +23,9 @@ ...@@ -23,6 +23,9 @@
<el-form-item :label="$t('chart.rotate')" class="form-item form-item-slider"> <el-form-item :label="$t('chart.rotate')" class="form-item form-item-slider">
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle" /> <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle" />
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.content_formatter')" class="form-item">
<el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeXAxisStyle"/>
</el-form-item>
</el-form> </el-form>
</el-col> </el-col>
......
frontend/src/views/chart/components/component_style/YAxisSelector.vue
浏览文件 @ 7e2da332
...@@ -23,6 +23,9 @@ ...@@ -23,6 +23,9 @@
<el-form-item :label="$t('chart.rotate')" class="form-item form-item-slider"> <el-form-item :label="$t('chart.rotate')" class="form-item form-item-slider">
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" /> <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.content_formatter')" class="form-item">
<el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeYAxisStyle"/>
</el-form-item>
</el-form> </el-form>
</el-col> </el-col>
......
frontend/src/views/chart/components/shape_attr/TooltipSelector.vue
浏览文件 @ 7e2da332
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<el-form-item :label="$t('chart.show')" class="form-item"> <el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="tooltipForm.show" @change="changeTooltipAttr">{{ $t('chart.show') }}</el-checkbox> <el-checkbox v-model="tooltipForm.show" @change="changeTooltipAttr">{{ $t('chart.show') }}</el-checkbox>
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.label_position')" class="form-item"> <el-form-item :label="$t('chart.trigger_position')" class="form-item">
<el-radio-group v-model="tooltipForm.trigger" size="mini" @change="changeTooltipAttr"> <el-radio-group v-model="tooltipForm.trigger" size="mini" @change="changeTooltipAttr">
<el-radio-button label="item">{{ $t('chart.tooltip_item') }}</el-radio-button> <el-radio-button label="item">{{ $t('chart.tooltip_item') }}</el-radio-button>
<el-radio-button label="axis">{{ $t('chart.tooltip_axis') }}</el-radio-button> <el-radio-button label="axis">{{ $t('chart.tooltip_axis') }}</el-radio-button>
......
frontend/src/views/chart/view/ChartEdit.vue
浏览文件 @ 7e2da332
...@@ -281,15 +281,18 @@ export default { ...@@ -281,15 +281,18 @@ export default {
view.sceneId = this.sceneId view.sceneId = this.sceneId
view.name = this.table.name view.name = this.table.name
view.tableId = this.$store.state.chart.tableId view.tableId = this.$store.state.chart.tableId
view.xaxis.forEach(function(ele) { // view.xaxis.forEach(function(ele) {
if (!ele.summary || ele.summary === '') { // if (!ele.summary || ele.summary === '') {
ele.summary = 'sum' // ele.summary = 'sum'
} // }
}) // })
view.yaxis.forEach(function(ele) { view.yaxis.forEach(function(ele) {
if (!ele.summary || ele.summary === '') { if (!ele.summary || ele.summary === '') {
ele.summary = 'sum' ele.summary = 'sum'
} }
if (!ele.sort || ele.sort === '') {
ele.sort = 'none'
}
}) })
if (view.type.startsWith('pie') || view.type.startsWith('funnel')) { if (view.type.startsWith('pie') || view.type.startsWith('funnel')) {
if (view.yaxis.length > 1) { if (view.yaxis.length > 1) {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论