Skip to content

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

feat: S2 pivot

上级 253e4810
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 471 行增加 和 22 行删除
backend/src/main/java/io/dataease/base/domain/ChartViewWithBLOBs.java
浏览文件 @ 95641fee
......@@ -13,6 +13,8 @@ import lombok.ToString;
public class ChartViewWithBLOBs extends ChartView implements Serializable {
@ApiModelProperty("x轴")
private String xAxis;
@ApiModelProperty("x轴(Row)")
private String xAxisExt;
@ApiModelProperty("y轴")
private String yAxis;
@ApiModelProperty("副y轴")
......
backend/src/main/java/io/dataease/base/mapper/ChartViewMapper.xml
浏览文件 @ 95641fee
......@@ -18,6 +18,7 @@
</resultMap>
<resultMap extends="BaseResultMap" id="ResultMapWithBLOBs" type="io.dataease.base.domain.ChartViewWithBLOBs">
<result column="x_axis" jdbcType="LONGVARCHAR" property="xAxis" />
<result column="x_axis_ext" jdbcType="LONGVARCHAR" property="xAxisExt" />
<result column="y_axis" jdbcType="LONGVARCHAR" property="yAxis" />
<result column="y_axis_ext" jdbcType="LONGVARCHAR" property="yAxisExt" />
<result column="ext_stack" jdbcType="LONGVARCHAR" property="extStack" />
......@@ -91,8 +92,8 @@
create_by, create_time, update_time, style_priority
</sql>
<sql id="Blob_Column_List">
x_axis, y_axis, y_axis_ext, ext_stack, ext_bubble, custom_attr, custom_style, custom_filter,
drill_fields, snapshot
x_axis, x_axis_ext, y_axis, y_axis_ext, ext_stack, ext_bubble, custom_attr, custom_style,
custom_filter, drill_fields, snapshot
</sql>
<select id="selectByExampleWithBLOBs" parameterType="io.dataease.base.domain.ChartViewExample" resultMap="ResultMapWithBLOBs">
select
......@@ -147,18 +148,20 @@
table_id, `type`, render,
result_count, result_mode, title,
create_by, create_time, update_time,
style_priority, x_axis, y_axis,
y_axis_ext, ext_stack, ext_bubble,
custom_attr, custom_style, custom_filter,
drill_fields, snapshot)
style_priority, x_axis, x_axis_ext,
y_axis, y_axis_ext, ext_stack,
ext_bubble, custom_attr, custom_style,
custom_filter, drill_fields, snapshot
)
values (#{id,jdbcType=VARCHAR}, #{name,jdbcType=VARCHAR}, #{sceneId,jdbcType=VARCHAR},
#{tableId,jdbcType=VARCHAR}, #{type,jdbcType=VARCHAR}, #{render,jdbcType=VARCHAR},
#{resultCount,jdbcType=INTEGER}, #{resultMode,jdbcType=VARCHAR}, #{title,jdbcType=VARCHAR},
#{createBy,jdbcType=VARCHAR}, #{createTime,jdbcType=BIGINT}, #{updateTime,jdbcType=BIGINT},
#{stylePriority,jdbcType=VARCHAR}, #{xAxis,jdbcType=LONGVARCHAR}, #{yAxis,jdbcType=LONGVARCHAR},
#{yAxisExt,jdbcType=LONGVARCHAR}, #{extStack,jdbcType=LONGVARCHAR}, #{extBubble,jdbcType=LONGVARCHAR},
#{customAttr,jdbcType=LONGVARCHAR}, #{customStyle,jdbcType=LONGVARCHAR}, #{customFilter,jdbcType=LONGVARCHAR},
#{drillFields,jdbcType=LONGVARCHAR}, #{snapshot,jdbcType=LONGVARCHAR})
#{stylePriority,jdbcType=VARCHAR}, #{xAxis,jdbcType=LONGVARCHAR}, #{xAxisExt,jdbcType=LONGVARCHAR},
#{yAxis,jdbcType=LONGVARCHAR}, #{yAxisExt,jdbcType=LONGVARCHAR}, #{extStack,jdbcType=LONGVARCHAR},
#{extBubble,jdbcType=LONGVARCHAR}, #{customAttr,jdbcType=LONGVARCHAR}, #{customStyle,jdbcType=LONGVARCHAR},
#{customFilter,jdbcType=LONGVARCHAR}, #{drillFields,jdbcType=LONGVARCHAR}, #{snapshot,jdbcType=LONGVARCHAR}
)
</insert>
<insert id="insertSelective" parameterType="io.dataease.base.domain.ChartViewWithBLOBs">
insert into chart_view
......@@ -205,6 +208,9 @@
<if test="xAxis != null">
x_axis,
</if>
<if test="xAxisExt != null">
x_axis_ext,
</if>
<if test="yAxis != null">
y_axis,
</if>
......@@ -276,6 +282,9 @@
<if test="xAxis != null">
#{xAxis,jdbcType=LONGVARCHAR},
</if>
<if test="xAxisExt != null">
#{xAxisExt,jdbcType=LONGVARCHAR},
</if>
<if test="yAxis != null">
#{yAxis,jdbcType=LONGVARCHAR},
</if>
......@@ -356,6 +365,9 @@
<if test="record.xAxis != null">
x_axis = #{record.xAxis,jdbcType=LONGVARCHAR},
</if>
<if test="record.xAxisExt != null">
x_axis_ext = #{record.xAxisExt,jdbcType=LONGVARCHAR},
</if>
<if test="record.yAxis != null">
y_axis = #{record.yAxis,jdbcType=LONGVARCHAR},
</if>
......@@ -404,6 +416,7 @@
update_time = #{record.updateTime,jdbcType=BIGINT},
style_priority = #{record.stylePriority,jdbcType=VARCHAR},
x_axis = #{record.xAxis,jdbcType=LONGVARCHAR},
x_axis_ext = #{record.xAxisExt,jdbcType=LONGVARCHAR},
y_axis = #{record.yAxis,jdbcType=LONGVARCHAR},
y_axis_ext = #{record.yAxisExt,jdbcType=LONGVARCHAR},
ext_stack = #{record.extStack,jdbcType=LONGVARCHAR},
......@@ -478,6 +491,9 @@
<if test="xAxis != null">
x_axis = #{xAxis,jdbcType=LONGVARCHAR},
</if>
<if test="xAxisExt != null">
x_axis_ext = #{xAxisExt,jdbcType=LONGVARCHAR},
</if>
<if test="yAxis != null">
y_axis = #{yAxis,jdbcType=LONGVARCHAR},
</if>
......@@ -523,6 +539,7 @@
update_time = #{updateTime,jdbcType=BIGINT},
style_priority = #{stylePriority,jdbcType=VARCHAR},
x_axis = #{xAxis,jdbcType=LONGVARCHAR},
x_axis_ext = #{xAxisExt,jdbcType=LONGVARCHAR},
y_axis = #{yAxis,jdbcType=LONGVARCHAR},
y_axis_ext = #{yAxisExt,jdbcType=LONGVARCHAR},
ext_stack = #{extStack,jdbcType=LONGVARCHAR},
......
backend/src/main/java/io/dataease/service/chart/ChartViewService.java
浏览文件 @ 95641fee
......@@ -219,6 +219,11 @@ public class ChartViewService {
}
List<ChartViewFieldDTO> xAxis = new Gson().fromJson(view.getXAxis(), new TypeToken<List<ChartViewFieldDTO>>() {
}.getType());
if (StringUtils.equalsIgnoreCase(view.getType(), "table-pivot")) {
List<ChartViewFieldDTO> xAxisExt = new Gson().fromJson(view.getXAxisExt(), new TypeToken<List<ChartViewFieldDTO>>() {
}.getType());
xAxis.addAll(xAxisExt);
}
List<ChartViewFieldDTO> yAxis = new Gson().fromJson(view.getYAxis(), new TypeToken<List<ChartViewFieldDTO>>() {
}.getType());
if (StringUtils.equalsIgnoreCase(view.getType(), "chart-mix")) {
......
backend/src/main/resources/db/migration/V32__1.8.sql 0 → 100644
浏览文件 @ 95641fee
ALTER TABLE `chart_view` ADD COLUMN `x_axis_ext` LONGTEXT COMMENT 'table-row' AFTER `x_axis`;
UPDATE `chart_view` SET `x_axis_ext` = '[]';
\ No newline at end of file
backend/src/main/resources/generatorConfig.xml
浏览文件 @ 95641fee
......@@ -60,6 +60,6 @@
</javaClientGenerator>
<!--要生成的数据库表 -->
<table tableName="dataset_column_permissions"/>
<table tableName="chart_view"/>
</context>
</generatorConfiguration>
frontend/src/icons/svg/table-normal.svg
浏览文件 @ 95641fee
<svg t="1630896178915" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1969" width="200" height="200"><path d="M85.333333 170.666667h853.333334v170.666666H85.333333zM85.333333 384h170.666667v469.333333H85.333333z" p-id="1970"></path><path d="M298.666667 384h640v128H298.666667z" opacity=".6" p-id="1971"></path><path d="M298.666667 554.666667h298.666666v128H298.666667zM640 554.666667h298.666667v128H640z" p-id="1972"></path><path d="M298.666667 725.333333h298.666666v128H298.666667zM640 725.333333h298.666667v128H640z" opacity=".6" p-id="1973"></path></svg>
<svg t="1644288854112" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1947" width="200" height="200"><path d="M85.333333 170.666667h853.333334v170.666666H85.333333zM85.333333 384h170.666667v469.333333H85.333333z" p-id="1948"></path><path d="M298.666667 384h640v128H298.666667z" opacity=".6" p-id="1949"></path><path d="M298.666667 554.666667h640v128H298.666667z" p-id="1950"></path><path d="M298.666667 725.333333h640v128H298.666667z" opacity=".6" p-id="1951"></path></svg>
frontend/src/icons/svg/table-pivot.svg 0 → 100644
浏览文件 @ 95641fee
<svg t="1630896178915" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1969" width="200" height="200"><path d="M85.333333 170.666667h853.333334v170.666666H85.333333zM85.333333 384h170.666667v469.333333H85.333333z" p-id="1970"></path><path d="M298.666667 384h640v128H298.666667z" opacity=".6" p-id="1971"></path><path d="M298.666667 554.666667h298.666666v128H298.666667zM640 554.666667h298.666667v128H640z" p-id="1972"></path><path d="M298.666667 725.333333h298.666666v128H298.666667zM640 725.333333h298.666667v128H640z" opacity=".6" p-id="1973"></path></svg>
frontend/src/lang/en.js
浏览文件 @ 95641fee
......@@ -1020,7 +1020,9 @@ export default {
table_config: 'Table Config',
table_column_width_config: 'Column Width',
table_column_adapt: 'Adapt',
table_column_custom: 'Custom'
table_column_custom: 'Custom',
chart_table_pivot: 'Pivot Table',
table_pivot_row: 'Data Row'
},
dataset: {
sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',
......
frontend/src/lang/tw.js
浏览文件 @ 95641fee
......@@ -1020,7 +1020,9 @@ export default {
table_config: '表格配置',
table_column_width_config: '列寬調整',
table_column_adapt: '自適應',
table_column_custom: '自定義'
table_column_custom: '自定義',
chart_table_pivot: '透視表',
table_pivot_row: '數據行'
},
dataset: {
sheet_warn: '有多個 Sheet 頁，默認抽取第一個',
......
frontend/src/lang/zh.js
浏览文件 @ 95641fee
......@@ -1022,7 +1022,9 @@ export default {
table_config: '表格配置',
table_column_width_config: '列宽调整',
table_column_adapt: '自适应',
table_column_custom: '自定义'
table_column_custom: '自定义',
chart_table_pivot: '透视表',
table_pivot_row: '数据行'
},
dataset: {
sheet_warn: '有多个 Sheet 页，默认抽取第一个',
......
frontend/src/views/chart/chart/common/common_table.js
浏览文件 @ 95641fee
......@@ -6,10 +6,40 @@ export function getCustomTheme(chart) {
background: {
color: '#00000000'
},
cornerCell: {
cell: {
backgroundColor: hexColorToRGBA(DEFAULT_COLOR_CASE.tableHeaderBgColor, DEFAULT_COLOR_CASE.alpha)
},
text: {
fill: DEFAULT_COLOR_CASE.tableFontColor,
fontSize: DEFAULT_SIZE.tableTitleFontSize
},
bolderText: {
fill: DEFAULT_COLOR_CASE.tableFontColor,
fontSize: DEFAULT_SIZE.tableTitleFontSize
}
},
rowCell: {
cell: {
backgroundColor: hexColorToRGBA(DEFAULT_COLOR_CASE.tableHeaderBgColor, DEFAULT_COLOR_CASE.alpha)
},
text: {
fill: DEFAULT_COLOR_CASE.tableFontColor,
fontSize: DEFAULT_SIZE.tableTitleFontSize
},
bolderText: {
fill: DEFAULT_COLOR_CASE.tableFontColor,
fontSize: DEFAULT_SIZE.tableTitleFontSize
}
},
colCell: {
cell: {
backgroundColor: hexColorToRGBA(DEFAULT_COLOR_CASE.tableHeaderBgColor, DEFAULT_COLOR_CASE.alpha)
},
text: {
fill: DEFAULT_COLOR_CASE.tableFontColor,
fontSize: DEFAULT_SIZE.tableTitleFontSize
},
bolderText: {
fill: DEFAULT_COLOR_CASE.tableFontColor,
fontSize: DEFAULT_SIZE.tableTitleFontSize
......@@ -32,15 +62,29 @@ export function getCustomTheme(chart) {
// color
if (customAttr.color) {
const c = JSON.parse(JSON.stringify(customAttr.color))
theme.cornerCell.cell.backgroundColor = hexColorToRGBA(c.tableHeaderBgColor, c.alpha)
theme.cornerCell.bolderText.fill = c.tableFontColor
theme.cornerCell.text.fill = c.tableFontColor
theme.rowCell.cell.backgroundColor = hexColorToRGBA(c.tableHeaderBgColor, c.alpha)
theme.rowCell.bolderText.fill = c.tableFontColor
theme.rowCell.text.fill = c.tableFontColor
theme.colCell.cell.backgroundColor = hexColorToRGBA(c.tableHeaderBgColor, c.alpha)
theme.colCell.bolderText.fill = c.tableFontColor
theme.colCell.text.fill = c.tableFontColor
theme.dataCell.cell.backgroundColor = hexColorToRGBA(c.tableItemBgColor, c.alpha)
theme.dataCell.text.fill = c.tableFontColor
}
// size
if (customAttr.size) {
const s = JSON.parse(JSON.stringify(customAttr.size))
theme.cornerCell.bolderText.fontSize = parseInt(s.tableTitleFontSize)
theme.cornerCell.text.fontSize = parseInt(s.tableTitleFontSize)
theme.rowCell.bolderText.fontSize = parseInt(s.tableTitleFontSize)
theme.rowCell.text.fontSize = parseInt(s.tableTitleFontSize)
theme.colCell.bolderText.fontSize = parseInt(s.tableTitleFontSize)
theme.colCell.text.fontSize = parseInt(s.tableTitleFontSize)
theme.dataCell.text.fontSize = parseInt(s.tableItemFontSize)
}
}
......
frontend/src/views/chart/chart/table/table-info.js
浏览文件 @ 95641fee
import { TableSheet, S2Event } from '@antv/s2'
import { TableSheet, S2Event, PivotSheet } from '@antv/s2'
import { getCustomTheme, getSize } from '@/views/chart/chart/common/common_table'
export function baseTableInfo(s2, container, chart, action, tableData) {
const containerDom = document.getElementById(container)
// data
// fields
const fields = chart.data.fields
if (!fields || fields.length === 0) {
if (s2) {
......@@ -102,7 +102,7 @@ export function baseTableInfo(s2, container, chart, action, tableData) {
export function baseTableNormal(s2, container, chart, action, tableData) {
const containerDom = document.getElementById(container)
// data
// fields
const fields = chart.data.fields
if (!fields || fields.length === 0) {
if (s2) {
......@@ -190,3 +190,111 @@ export function baseTableNormal(s2, container, chart, action, tableData) {
return s2
}
export function baseTablePivot(s2, container, chart, action, tableData) {
const containerDom = document.getElementById(container)
// row and column
const columnFields = JSON.parse(chart.xaxis)
const rowFields = JSON.parse(chart.xaxisExt)
const valueFields = JSON.parse(chart.yaxis)
const c = []; const r = []; const v = []
columnFields.forEach(ele => {
c.push(ele.dataeaseName)
})
rowFields.forEach(ele => {
r.push(ele.dataeaseName)
})
valueFields.forEach(ele => {
v.push(ele.dataeaseName)
})
// fields
const fields = chart.data.fields
if (!fields || fields.length === 0) {
if (s2) {
s2.destroy()
}
return
}
const columns = []
const meta = []
// add drill list
if (chart.drill) {
const drillFields = JSON.parse(chart.drillFields)
const drillField = drillFields[chart.drillFilters.length]
const drillFilters = JSON.parse(JSON.stringify(chart.drillFilters))
const drillExp = drillFilters[drillFilters.length - 1].datasetTableField
// 移除所有下钻字段
const removeField = []
for (let i = 0; i < chart.drillFilters.length; i++) {
const ele = chart.drillFilters[i].datasetTableField
removeField.push(ele.dataeaseName)
}
// build field
fields.forEach(ele => {
if (removeField.indexOf(ele.dataeaseName) < 0) {
// 用下钻字段替换当前字段
if (drillExp.dataeaseName === ele.dataeaseName) {
columns.push(drillField.dataeaseName)
meta.push({
field: drillField.dataeaseName,
name: drillField.name
})
} else {
columns.push(ele.dataeaseName)
meta.push({
field: ele.dataeaseName,
name: ele.name
})
}
}
})
} else {
fields.forEach(ele => {
columns.push(ele.dataeaseName)
meta.push({
field: ele.dataeaseName,
name: ele.name
})
})
}
// data config
const s2DataConfig = {
fields: {
rows: r,
columns: c,
values: v
},
meta: meta,
data: tableData
}
// options
const s2Options = {
width: containerDom.offsetWidth,
height: containerDom.offsetHeight,
style: getSize(chart)
}
// 开始渲染
if (s2) {
s2.destroy()
}
s2 = new PivotSheet(containerDom, s2DataConfig, s2Options)
// click
s2.on(S2Event.DATA_CELL_CLICK, action)
// theme
const customTheme = getCustomTheme(chart)
s2.setThemeCfg({ theme: customTheme })
return s2
}
frontend/src/views/chart/components/ChartComponentS2.vue
浏览文件 @ 95641fee
......@@ -4,9 +4,10 @@
<span v-if="chart.type" v-show="title_show" ref="title" :style="title_class" style="cursor: default;display: block;">
<p style="padding:6px 10px 0 10px;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;">{{ chart.title }}</p>
</span>
<div style="width: 100%;overflow: hidden;padding: 8px;" :style="{height:chartHeight,background:container_bg_class.background}">
<div ref="tableContainer" style="width: 100%;overflow: hidden;padding: 8px;" :style="{background:container_bg_class.background}">
<div v-if="chart.type === 'table-normal'" :id="chartId" style="width: 100%;overflow: hidden;" :class="chart.drill ? 'table-dom-normal-drill' : 'table-dom-normal'" />
<div v-if="chart.type === 'table-info'" :id="chartId" style="width: 100%;overflow: hidden;" :class="chart.drill ? 'table-dom-info-drill' : 'table-dom-info'" />
<div v-if="chart.type === 'table-pivot'" :id="chartId" style="width: 100%;overflow: hidden;" class="table-dom-normal" />
<el-row v-show="chart.type === 'table-info'" class="table-page">
<span class="total-style">
{{ $t('chart.total') }}
......@@ -34,7 +35,7 @@
import { uuid } from 'vue-uuid'
import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { baseTableInfo, baseTableNormal } from '@/views/chart/chart/table/table-info'
import { baseTableInfo, baseTableNormal, baseTablePivot } from '@/views/chart/chart/table/table-info'
export default {
name: 'ChartComponentS2',
......@@ -189,6 +190,8 @@ export default {
this.myChart = baseTableInfo(this.myChart, this.chartId, chart, this.antVAction, this.tableData)
} else if (chart.type === 'table-normal') {
this.myChart = baseTableNormal(this.myChart, this.chartId, chart, this.antVAction, this.tableData)
} else if (chart.type === 'table-pivot') {
this.myChart = baseTablePivot(this.myChart, this.chartId, chart, this.antVAction, this.tableData)
} else {
if (this.myChart) {
this.antVRenderStatus = false
......@@ -338,6 +341,7 @@ export default {
if (this.$refs.title) {
const titleHeight = this.$refs.title.offsetHeight
this.chartHeight = (currentHeight - titleHeight) + 'px'
this.$refs.tableContainer.style.height = this.chartHeight
}
}
})
......
frontend/src/views/chart/components/drag-item/DimensionExtItem.vue 0 → 100644
浏览文件 @ 95641fee
<template>
<span>
<el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis" :type="item.groupType === 'q'?'success':''">
<span style="float: left">
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
<svg-icon v-if="item.sort === 'asc'" icon-class="sort-asc" class-name="field-icon-sort" />
<svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
</span>
<span class="item-span-style" :title="item.name">{{ item.name }}</span>
<span v-if="item.deType === 1" class="summary-span">
{{ $t('chart.' + item.dateStyle) }}
</span>
</el-tag>
<el-dropdown v-else trigger="click" size="mini" @command="clickItem">
<span class="el-dropdown-link">
<el-tag size="small" class="item-axis" :type="item.groupType === 'q'?'success':''">
<span style="float: left">
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
<svg-icon v-if="item.sort === 'asc'" icon-class="sort-asc" class-name="field-icon-sort" />
<svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
</span>
<span class="item-span-style" :title="item.name">{{ item.name }}</span>
<span v-if="item.deType === 1" class="summary-span">
{{ $t('chart.' + item.dateStyle) }}
</span>
<i class="el-icon-arrow-down el-icon--right" style="position: absolute;top: 6px;right: 10px;" />
</el-tag>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>
<el-dropdown placement="right-start" size="mini" style="width: 100%" @command="sort">
<span class="el-dropdown-link inner-dropdown-menu">
<span>
<i class="el-icon-sort" />
<span>{{ $t('chart.sort') }}</span>
<span class="summary-span-item">({{ $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" :command="beforeClickItem('filter')">-->
<!-- <span>{{ $t('chart.filter') }}...</span>-->
<!-- </el-dropdown-item>-->
<el-dropdown-item v-show="item.deType === 1" divided>
<el-dropdown placement="right-start" size="mini" style="width: 100%" @command="dateStyle">
<span class="el-dropdown-link inner-dropdown-menu">
<span>
<i class="el-icon-c-scale-to-original" />
<span>{{ $t('chart.dateStyle') }}</span>
<span class="summary-span-item">({{ $t('chart.'+item.dateStyle) }})</span>
</span>
<i class="el-icon-arrow-right el-icon--right" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="beforeDateStyle('y')">{{ $t('chart.y') }}</el-dropdown-item>
<el-dropdown-item :command="beforeDateStyle('y_M')">{{ $t('chart.y_M') }}</el-dropdown-item>
<el-dropdown-item :command="beforeDateStyle('y_M_d')">{{ $t('chart.y_M_d') }}</el-dropdown-item>
<el-dropdown-item :command="beforeDateStyle('H_m_s')" divided>{{ $t('chart.H_m_s') }}</el-dropdown-item>
<el-dropdown-item :command="beforeDateStyle('y_M_d_H_m')">{{ $t('chart.y_M_d_H_m') }}</el-dropdown-item>
<el-dropdown-item :command="beforeDateStyle('y_M_d_H_m_s')">{{ $t('chart.y_M_d_H_m_s') }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-dropdown-item>
<el-dropdown-item v-show="item.deType === 1">
<el-dropdown placement="right-start" size="mini" style="width: 100%" @command="datePattern">
<span class="el-dropdown-link inner-dropdown-menu">
<span>
<i class="el-icon-timer" />
<span>{{ $t('chart.datePattern') }}</span>
<span class="summary-span-item">({{ $t('chart.'+item.datePattern) }})</span>
</span>
<i class="el-icon-arrow-right el-icon--right" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="beforeDatePattern('date_sub')">{{ $t('chart.date_sub') }}(1990-01-01)</el-dropdown-item>
<el-dropdown-item :command="beforeDatePattern('date_split')">{{ $t('chart.date_split') }}(1990/01/01)</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-dropdown-item>
<el-dropdown-item icon="el-icon-edit-outline" divided :command="beforeClickItem('rename')">
<span>{{ $t('chart.show_name_set') }}</span>
</el-dropdown-item>
<el-dropdown-item icon="el-icon-delete" divided :command="beforeClickItem('remove')">
<span>{{ $t('chart.delete') }}</span>
</el-dropdown-item>
</el-dropdown-menu>
</span>
</el-dropdown>
</span>
</template>
<script>
export default {
name: 'DimensionExtItem',
props: {
param: {
type: Object,
required: true
},
item: {
type: Object,
required: true
},
index: {
type: Number,
required: true
}
},
data() {
return {
}
},
mounted() {
},
methods: {
clickItem(param) {
if (!param) {
return
}
switch (param.type) {
case 'rename':
this.showRename()
break
case 'remove':
this.removeItem()
break
case 'filter':
this.editFilter()
break
default:
break
}
},
beforeClickItem(type) {
return {
type: type
}
},
sort(param) {
// console.log(param)
this.item.sort = param.type
this.$emit('onDimensionItemChange', this.item)
},
beforeSort(type) {
return {
type: type
}
},
dateStyle(param) {
// console.log(param)
this.item.dateStyle = param.type
this.$emit('onDimensionItemChange', this.item)
},
beforeDateStyle(type) {
return {
type: type
}
},
datePattern(param) {
this.item.datePattern = param.type
this.$emit('onDimensionItemChange', this.item)
},
beforeDatePattern(type) {
return {
type: type
}
},
editFilter() {
this.item.index = this.index
this.$emit('editItemFilter', this.item)
},
showRename() {
this.item.index = this.index
this.item.renameType = 'dimensionExt'
this.$emit('onNameEdit', this.item)
},
removeItem() {
this.item.index = this.index
this.item.removeType = 'dimensionExt'
this.$emit('onDimensionItemRemove', this.item)
}
}
}
</script>
<style scoped>
.item-axis {
padding: 1px 6px;
margin: 0 3px 2px 3px;
text-align: left;
height: 24px;
line-height: 22px;
display: flex;
border-radius: 4px;
box-sizing: border-box;
white-space: nowrap;
width: 159px;
}
.item-axis:hover {
background-color: #fdfdfd;
cursor: pointer;
}
span {
font-size: 12px;
}
.summary-span{
margin-left: 4px;
color: #878d9f;
position: absolute;
right: 25px;
}
.inner-dropdown-menu{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%
}
.item-span-style{
display: inline-block;
width: 70px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.summary-span-item{
margin-left: 4px;
color: #878d9f;
}
</style>
frontend/src/views/chart/components/drag-item/DimensionItem.vue
浏览文件 @ 95641fee
......@@ -190,6 +190,7 @@ export default {
},
removeItem() {
this.item.index = this.index
this.item.removeType = 'dimension'
this.$emit('onDimensionItemRemove', this.item)
}
}
......
frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
浏览文件 @ 95641fee
......@@ -124,7 +124,7 @@
</el-tooltip>
</el-form-item>
<el-form-item v-show="sizeForm.tableColumnMode === 'custom'" label="" class="form-item form-item-slider">
<el-slider v-model="sizeForm.tableColumnWidth" :min="100" :max="500" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
<el-slider v-model="sizeForm.tableColumnWidth" :min="10" :max="500" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
</el-form-item>
</el-form>
......
frontend/src/views/chart/group/Group.vue
浏览文件 @ 95641fee
......@@ -768,6 +768,7 @@ export default {
})
view.stylePriority = 'view' // 默认样式优先级视图
view.xaxis = JSON.stringify([])
view.xaxisExt = JSON.stringify([])
view.yaxis = JSON.stringify([])
view.yaxisExt = JSON.stringify([])
view.extStack = JSON.stringify([])
......
frontend/src/views/chart/view/ChartType.vue
浏览文件 @ 95641fee
......@@ -20,7 +20,16 @@
<p class="radio-label">{{ $t('chart.chart_table_info') }}</p>
</el-radio>
</div>
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
<div style="position: relative;display: block;">
<el-radio value="table-pivot" label="table-pivot" border class="radio-style">
<span :title="$t('chart.chart_table_pivot')">
<svg-icon icon-class="table-pivot" class="chart-icon" />
</span>
<p class="radio-label">{{ $t('chart.chart_table_pivot') }}</p>
</el-radio>
</div>
<!--如需要，以下用于占位-->
<!--<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>-->
</div>
</div>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论