Skip to content

D
datax-cloud
Commit 6a8f3555 by yuwei
Options

项目初始化

parent ae823d9d
Showing with 189 additions and 25 deletions
datax-ui/src/components/PivotTable/index.vue
......@@ -15,7 +15,7 @@
<tbody>
<tr v-for="(tr, index) in combineValues" :key="index">
<!-- Row headers -->
<th v-for="cell in tr.head" :key="cell.__index" v-if="!cell.isRowspan" :rowspan="cell.rowspan" :colspan="cell.colspan">
<th v-for="cell in tr.head" v-if="!cell.isRowspan" :key="cell.__index" :rowspan="cell.rowspan" :colspan="cell.colspan">
<div :style="{ 'min-height': _getMinHeightByRowCount(cell.rowspan) }">
{{ cell.value }}
</div>
......@@ -80,8 +80,8 @@ export default {
return { rows, columns, values, data }
},
rowPaths() {
const _paths = this._combinePaths(
...this.localRows.map(({ values }) => values)
const _paths = this._combineRowPaths(
...this.localRows.map(({ key, values }) => { return { key, values } })
)
return _paths
},
......@@ -90,7 +90,7 @@ export default {
if (this.localValues.length) {
keys.push(this.localValues.map(({ key }) => key))
}
const _paths = this._combinePaths(...keys)
const _paths = this._combineColPaths(...keys)
return _paths
},
// 列的表头
......@@ -208,22 +208,34 @@ export default {
const isLastCol = rowIndex === rowsLen - 1
if (!isLastCol) {
// 计算合并列数
let compareVal = 1
for (let i = rowIndex; i < rowsLen - 1; i++) {
compareVal *= (this.localRows[rowIndex + 1].values || []).length
// 过滤条件
const conditions = {}
for (let i = 0; i < rowIndex + 1; i++) {
conditions[i] = values[i] || ''
}
const filterData = this.rowPaths.filter((data) => {
let status = true
const splitValues = data.split(this.Separator)
for (const key in conditions) {
if (conditions[key] !== splitValues[key]) {
status = false
return
}
}
return status
}) || []
const mergeSpans = filterData.length
const currRowSpan = rowSpans[rowIndex] || {}
const currRowSpanVal = (currRowSpan[currPath.join(this.Separator)] || 0) + 1
currRowSpan[currPath.join(this.Separator)] = currRowSpanVal
rowSpans[rowIndex] = currRowSpan
// 合并单元格
if (currRowSpanVal === 1) {
return mergeBaseInfo({
__index: `${baseX}-${baseY}`,
value: currVal,
x: baseX,
y: baseY,
rowspan: compareVal,
rowspan: mergeSpans,
path: currPath.filter((item) => !!item)
})
} else {
......@@ -305,8 +317,7 @@ export default {
Object.assign(cellData, { value: _value && _value.key ? this._reduceValue(filterData, _value.key) : '' })
}
return cellData
}
)
})
return {
__index: _data[0].x,
data: _data
......@@ -341,7 +352,7 @@ export default {
this.localValues = JSON.parse(JSON.stringify(this.values))
this.localData = Object.freeze(this.data)
},
// set the `values` `merges` attribute to rows and columns
// set the `values` attribute to rows and columns
setValuesToColAndRow() {
const rowKeys = this.localRows.map(({ key }) => key)
const columnKeys = this.localColumns.map(({ key }) => key)
......@@ -383,11 +394,11 @@ export default {
// 初始计算值
handleCalcData() {
if (!this.localValues.length) return
const _rowPaths = this._combinePaths(
...this.localRows.map(({ values }) => values)
const _rowPaths = this._combineRowPaths(
...this.localRows.map(({ key, values }) => { return { key, values } })
)
const _rowKeys = this.localRows.map(({ key }) => key)
const _colPaths = this._combinePaths(
const _colPaths = this._combineColPaths(
...this.localColumns.map(({ values }) => values)
)
const _colKeys = this.localColumns.map(({ key }) => key)
......@@ -423,7 +434,44 @@ export default {
.flat()
)
},
_combinePaths(...arrays) {
_combineRowPaths(...arrays) {
const len = arrays.length
let _result = []
if (len) {
const rowPaths = arrays.reduce((prev, curr) => {
const arr = []
prev.values.forEach(_prevEl => {
const prevKey = prev.key.split(SEPARATOR)
curr.values.forEach(_currEl => {
const currKey = curr.key
const conditions = {}
prevKey.forEach((key, i) => {
conditions[key] = _prevEl.split(SEPARATOR)[i]
})
conditions[currKey] = _currEl
// 判断数据里是否有该项
const filter = this.localData.some((data) => {
let status = true
for (const key in conditions) {
if (conditions[key] !== data[key]) {
status = false
return
}
}
return status
})
if (filter) {
arr.push(_prevEl + SEPARATOR + _currEl)
}
})
})
return { key: prev.key + SEPARATOR + curr.key, values: arr }
}) || {}
_result = rowPaths.values || []
}
return _result
},
_combineColPaths(...arrays) {
return arrays.length ? arrays.reduce((prev, curr) => {
const arr = []
prev.forEach(_prevEl => {
......
datax-ui/src/utils/visual-chart.js
......@@ -199,4 +199,54 @@ const chartTypes = [
}
]
export default chartTypes
const chartOptions = {
// 标题组件
title: {
// 是否显示
show: true,
// 主标题文本
text: '',
// 副标题文本
subtext: '',
// 离左侧的距离
left: 0,
// 离上侧的距离
top: 0,
// 主标题样式
textStyle: {
// 主标题字体大小
fontSize: 18,
// 主标题文字的颜色
color: '#333'
},
// 副标题样式
subtextStyle: {
// 副标题字体大小
fontSize: 12,
// 副标题文字的颜色
color: '#aaa'
}
},
// 图例组件
legend: {
// 是否显示
show: true,
// 图例的类型 'plain':普通图例 'scroll':可滚动翻页的图例
type: 'plain',
// 离左侧的距离
left: 0,
// 离上侧的距离
top: 0,
// 列表的布局朝向(横竖,可选：'horizontal','vertical')
orient: 'horizontal'
},
// 提示框组件
tooltip: {
// 是否显示
show: true,
// 触发类型
trigger: 'item'
}
}
export { chartTypes, chartOptions }
datax-ui/src/views/visual/datachart/DataChartBuild.vue
......@@ -105,10 +105,10 @@
<div class="widget-right-pane-form">
<el-form size="mini" label-position="top">
<el-form-item label="图表名称">
<el-input v-model="dataChart.chartName" size="mini" :disabled="true" />
<el-input v-model="dataChart.chartName" :disabled="true" />
</el-form-item>
<el-form-item label="缩略图">
<el-button type="primary" size="mini" plain style="margin-bottom: 10px;" @click="generatorImage">点击生成</el-button>
<el-button type="primary" plain style="margin-bottom: 10px;" @click="generatorImage">点击生成</el-button>
<el-image :src="dataChart.chartThumbnail ? dataChart.chartThumbnail : ''">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline" />
......@@ -128,7 +128,66 @@
</div>
</el-tab-pane>
<el-tab-pane label="图表配置">
<div class="widget-right-pane-config">图表配置</div>
<div class="widget-right-pane-config">
<el-collapse v-model="collapsActiveNames" accordion>
<el-collapse-item title="标题组件" name="1">
<el-form size="mini">
<el-form-item label="是否显示">
<el-switch v-model="widget.options.title.show" active-text="开启" />
</el-form-item>
<el-form-item label="主标题文本">
<el-input v-model="widget.options.title.text" />
</el-form-item>
<el-form-item label="副标题文本">
<el-input v-model="widget.options.title.subtext" />
</el-form-item>
<el-form-item label="离左侧的距离">
<el-slider v-model="widget.options.title.left" />
</el-form-item>
<el-form-item label="离上侧的距离">
<el-slider v-model="widget.options.title.top" />
</el-form-item>
<el-form-item label="主标题字体大小">
<el-input-number v-model="widget.options.title.textStyle.fontSize" :min="1" :max="30" />
</el-form-item>
<el-form-item label="主标题文字的颜色">
<el-color-picker v-model="widget.options.title.textStyle.color" />
</el-form-item>
<el-form-item label="副标题字体大小">
<el-input-number v-model="widget.options.title.subtextStyle.fontSize" :min="1" :max="20" />
</el-form-item>
<el-form-item label="副标题文字的颜色">
<el-color-picker v-model="widget.options.title.subtextStyle.color" />
</el-form-item>
</el-form>
</el-collapse-item>
<el-collapse-item title="图例组件" name="2">
<el-form size="mini">
<el-form-item label="是否显示">
<el-switch v-model="widget.options.legend.show" active-text="开启" />
</el-form-item>
<el-form-item label="图例的类型">
<el-select v-model="widget.options.legend.type">
<el-option label="普通图例" value="plain"></el-option>
<el-option label="可滚动翻页的图例" value="scroll"></el-option>
</el-select>
</el-form-item>
<el-form-item label="离左侧的距离">
<el-slider v-model="widget.options.legend.left" />
</el-form-item>
<el-form-item label="离上侧的距离">
<el-slider v-model="widget.options.legend.top" />
</el-form-item>
<el-form-item label="列表的布局朝向">
<el-select v-model="widget.options.legend.orient">
<el-option label="横向" value="horizontal"></el-option>
<el-option label="纵向" value="vertical"></el-option>
</el-select>
</el-form-item>
</el-form>
</el-collapse-item>
</el-collapse>
</div>
</el-tab-pane>
</el-tabs>
</div>
......@@ -139,7 +198,7 @@
import { getDataChart, buildDataChart, dataParser } from '@/api/visual/datachart'
import { getDataSet, listDataSet } from '@/api/visual/dataset'
import draggable from 'vuedraggable'
import chartTypes from '@/utils/visual-chart'
import { chartTypes, chartOptions } from '@/utils/visual-chart'
import ChartPanel from './components/ChartPanel'
import html2canvas from 'html2canvas'
......@@ -160,8 +219,8 @@ export default {
measures: [],
// 后期添加条件过滤
filters: [],
// 后期添加图表配置项
chartOptions: {}
// 图表配置项
options: chartOptions
},
dataSetOptions: [],
dataSet: {},
......@@ -173,7 +232,8 @@ export default {
sql: ''
},
visible: false,
isCollapse: false
isCollapse: false,
collapsActiveNames: '1'
}
},
created() {
......@@ -511,6 +571,12 @@ export default {
height: calc(100vh - 40px);
overflow-x: hidden;
overflow-y: auto;
.el-form-item__content {
.el-slider {
padding: 0 10px;
margin-top: 20px;
}
}
}
}
}
......
datax-ui/src/views/visual/datachart/components/ChartPanel.vue
......@@ -3,7 +3,7 @@
</template>
<script>
import chartTypes from '@/utils/visual-chart'
import { chartTypes } from '@/utils/visual-chart'
import ChartTable from './widgets/ChartTable'
import ChartLine from './widgets/ChartLine'
import ChartBar from './widgets/ChartBar'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment