Skip to content

Commit 1708d39

Browse files
Seungwoo321Seungwoo321
authored
Merge pull request #26 from vue-pivottable/feat/#14-fix-table-renderer
Feat/#14 fix table renderer
2 parents 29e1fb5 + 8776809 commit 1708d39

18 files changed

+500
-211
lines changed

‎src/components/pivottable-ui/VPivottableUi.vue

+8-1
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ import VDragAndDropCell from './VDragAndDropCell.vue'
122122
import { VPivottable } from '@/'
123123
import { computed, ref, toRefs, watch } from 'vue'
124124
import { usePropsState, useMaterializeInput } from '@/composables'
125-
import TableRenderer from '../pivottable/renderer/index'
125+
import TableRenderer from '../pivottable/renderer'
126126
127127
const props = defineProps({
128128
...defaultProps,
@@ -233,6 +233,13 @@ const onUpdateValueFilter = ({ key, value }) => {
233233
}
234234
const onUpdateRendererName = rendererName => {
235235
updateState('rendererName', rendererName)
236+
if (rendererName === 'Table Heatmap') {
237+
updateState('heatmapMode', 'full')
238+
} else if (rendererName === 'Table Row Heatmap') {
239+
updateState('heatmapMode', 'row')
240+
} else if (rendererName === 'Table Col Heatmap') {
241+
updateState('heatmapMode', 'col')
242+
}
236243
}
237244
const onUpdateAggregatorName = aggregatorName => {
238245
updateState('aggregatorName', aggregatorName)

‎src/components/pivottable/VPivottable.vue

+1-5
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<component
33
:is="rendererComponent"
44
v-bind="props"
5-
></component>
5+
/>
66
</template>
77

88
<script setup>
@@ -19,7 +19,3 @@ const props = defineProps({
1919
const rendererComponent = computed(() => props.rendererItems[props.rendererName] || TableRenderer.Table)
2020
2121
</script>
22-
23-
<style lang="scss" scoped>
24-
25-
</style>

‎src/components/pivottable/VPivottableBody.vue

+41-13
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,57 @@
11
<template>
2-
<tbody>
2+
<tbody v-if="pivotData">
33
<VPivottableBodyRows
4-
v-for="(rowKey, i) in rowKeys"
5-
:key="`rowKeyRow${i}`"
6-
:pivotData="pivotData"
7-
:index="i"
84
:rowKeys="rowKeys"
9-
:rowKey="rowKey"
105
:colKeys="colKeys"
6+
:rowTotal="rowTotal"
7+
:tableOptions="tableOptions"
8+
/>
9+
<VPivottableBodyRowsTotalRow
10+
:colTotal="colTotal"
11+
:rowTotal="rowTotal"
1112
:rowAttrs="rowAttrs"
1213
:colAttrs="colAttrs"
14+
:colKeys="colKeys"
15+
:localeStrings="localeStrings"
1316
:tableOptions="tableOptions"
14-
:rowTotal="rowTotal"
1517
/>
1618
</tbody>
1719
</template>
1820

1921
<script setup>
22+
import { useProvidePivotData } from '@/composables/useProvidePivotData'
2023
import VPivottableBodyRows from './VPivottableBodyRows.vue'
21-
import { usePivotData } from '@/composables/usePivotData'
24+
import VPivottableBodyRowsTotalRow from './VPivottableBodyRowsTotalRow.vue'
2225
23-
const { pivotData, rowKeys, colKeys, rowAttrs, colAttrs } = usePivotData()
24-
const { rowTotal, tableOptions } = defineProps(['rowTotal', 'tableOptions'])
25-
</script>
26+
defineProps({
27+
rowTotal: {
28+
type: Boolean,
29+
default: true
30+
},
31+
colTotal: {
32+
type: Boolean,
33+
default: true
34+
},
35+
localeStrings: {
36+
type: Object,
37+
default: () => ({
38+
totals: 'Totals'
39+
})
40+
},
41+
tableOptions: {
42+
type: Object,
43+
default: () => ({
44+
clickCallback: null
45+
})
46+
}
47+
})
2648
27-
<style lang="scss" scoped>
49+
const {
50+
pivotData,
51+
rowKeys,
52+
colKeys,
53+
rowAttrs,
54+
colAttrs
55+
} = useProvidePivotData()
2856
29-
</style>
57+
</script>

‎src/components/pivottable/VPivottableBodyRows.vue

+80-32
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,97 @@
11
<template>
2-
<tr>
3-
<th v-for="(text, j) in rowKey" :key="`rowKeyLabel${index}-${j}`"
4-
class="pvtRowLabel"
5-
:rowspan="spanSize(rowKeys, index, j)"
6-
:colspan="j === rowAttrs.length - 1 && colAttrs.length !== 0 ? 2 : 1"
2+
<tr v-for="(rowKey, i) in rowKeys" :key="`rowKeyRow${i}`">
3+
<template v-for="(text, j) in rowKey" :key="`rowLabel${i}-${j}`">
4+
<th
5+
v-if="spanSize(rowKeys, i, j) !== -1"
6+
class="pvtRowLabel"
7+
:rowSpan="spanSize(rowKeys, i, j)"
8+
:colSpan="j === rowAttrs.length - 1 && colAttrs.length !== 0 ? 2 : 1"
9+
>
10+
{{ text }}
11+
</th>
12+
</template>
13+
<td
14+
v-for="(colKey, j) in colKeys"
15+
:key="`pvtVal${i}-${j}`"
16+
class="pvVal"
17+
:style="getValueCellStyle(rowKey, colKey)"
18+
@click="handleCellClick(getAggregator(rowKey, colKey).value(), rowKey, colKey)"
719
>
8-
{{ text }}
9-
</th>
10-
<td v-for="(colKey, j) in colKeys" :key="`pvtVal${index}-${j}`"
11-
:class="['pvVal']"
12-
>
13-
{{ getValue(rowKey, colKey) }}
20+
{{ getAggregator(rowKey, colKey).format(getAggregator(rowKey, colKey).value()) }}
1421
</td>
15-
<td v-if="rowTotal"
22+
<td
23+
v-if="rowTotal"
1624
class="pvtTotal"
25+
:style="getRowTotalStyle(rowKey)"
26+
@click="handleCellClick(getAggregator(rowKey, []).value(), rowKey, [])"
1727
>
18-
{{ getTotalValue(rowKey, []) }}
28+
{{ getAggregator(rowKey, []).format(getAggregator(rowKey, []).value()) }}
1929
</td>
2030
</tr>
2131
</template>
2232

2333
<script setup>
24-
import { spanSize } from '../../helper'
34+
35+
import { useProvidePivotData } from '@/composables/useProvidePivotData'
36+
2537
const props = defineProps({
26-
pivotData: Object,
27-
index: Number,
28-
rowKeys: Array,
29-
rowKey: Array,
30-
colKeys: Array,
31-
rowAttrs: Array,
32-
colAttrs: Array,
33-
tableOptions: Object,
34-
rowTotal: Boolean
38+
rowKeys: {
39+
type: Array,
40+
required: true
41+
},
42+
colKeys: {
43+
type: Array,
44+
required: true
45+
},
46+
rowTotal: {
47+
type: Boolean,
48+
required: true
49+
},
50+
tableOptions: {
51+
type: Object,
52+
required: true
53+
}
3554
})
36-
const getValue = (rowKey, colKey) => {
37-
const aggregator = props.pivotData.getAggregator(rowKey, colKey)
38-
return aggregator.format(aggregator.value())
55+
56+
const {
57+
pivotData,
58+
spanSize,
59+
valueCellColors,
60+
colTotalColors,
61+
rowAttrs,
62+
colAttrs,
63+
getAggregator
64+
} = useProvidePivotData()
65+
66+
const getValueCellStyle = (rowKey, colKey) => {
67+
const value = getAggregator(rowKey, colKey).value()
68+
return valueCellColors(rowKey, colKey, value)
3969
}
40-
const getTotalValue = (rowKey, colKey) => {
41-
const totalAggregator = props.pivotData.getAggregator(rowKey, colKey)
42-
return totalAggregator.format(totalAggregator.value())
70+
71+
const getRowTotalStyle = (rowKey) => {
72+
const value = getAggregator(rowKey, []).value()
73+
return colTotalColors(value)
4374
}
4475
45-
</script>
76+
const handleCellClick = (value, rowValues, colValues) => {
77+
if (props.tableOptions?.clickCallback) {
78+
const filters = {}
79+
80+
// Add column filters
81+
colAttrs.value.forEach((attr, i) => {
82+
if (colValues[i] !== undefined && colValues[i] !== null) {
83+
filters[attr] = colValues[i]
84+
}
85+
})
4686
47-
<style lang="scss" scoped>
87+
// Add row filters
88+
rowAttrs.value.forEach((attr, i) => {
89+
if (rowValues[i] !== undefined && rowValues[i] !== null) {
90+
filters[attr] = rowValues[i]
91+
}
92+
})
4893
49-
</style>
94+
props.tableOptions.clickCallback(event, value, filters, pivotData.value)
95+
}
96+
}
97+
</script>

‎src/components/pivottable/VPivottableBodyRowsTotalRow.vue

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<template>
2+
<tr v-if="colTotal">
3+
<th
4+
class="pvtTotalLabel"
5+
:colSpan="rowAttrs.length + (colAttrs.length === 0 ? 0 : 1)"
6+
>
7+
{{ localeStrings.totals }}
8+
</th>
9+
<td
10+
v-for="(colKey, i) in colKeys"
11+
:key="`total${i}`"
12+
class="pvtTotal"
13+
:style="getColTotalStyle(colKey)"
14+
@click="handleCellClick(getAggregator([], colKey).value(), [], colKey)"
15+
>
16+
{{ getAggregator([], colKey).format(getAggregator([], colKey).value()) }}
17+
</td>
18+
<td
19+
v-if="rowTotal"
20+
class="pvtGrandTotal"
21+
@click="handleCellClick(grandTotalValue, [], [])"
22+
>
23+
{{ getAggregator([], []).format(grandTotalValue) }}
24+
</td>
25+
</tr>
26+
</template>
27+
28+
<script setup>
29+
import { computed } from 'vue'
30+
import { useProvidePivotData } from '@/composables/useProvidePivotData'
31+
32+
const props = defineProps({
33+
colTotal: {
34+
type: Boolean,
35+
required: true
36+
},
37+
rowTotal: {
38+
type: Boolean,
39+
required: true
40+
},
41+
localeStrings: {
42+
type: Object,
43+
required: true
44+
},
45+
tableOptions: {
46+
type: Object,
47+
required: true
48+
}
49+
})
50+
51+
const {
52+
getAggregator,
53+
rowTotalColors,
54+
colAttrs,
55+
rowAttrs,
56+
colKeys,
57+
pivotData
58+
} = useProvidePivotData()
59+
60+
const grandTotalValue = computed(() => {
61+
return getAggregator([], []).value()
62+
})
63+
64+
const getColTotalStyle = (colKey) => {
65+
const value = getAggregator([], colKey).value()
66+
return rowTotalColors(value)
67+
}
68+
69+
const handleCellClick = (value, rowValues, colValues) => {
70+
if (props.tableOptions?.clickCallback) {
71+
const filters = {}
72+
73+
// Add column filters
74+
colAttrs.value.forEach((attr, i) => {
75+
if (colValues[i] !== undefined && colValues[i] !== null) {
76+
filters[attr] = colValues[i]
77+
}
78+
})
79+
80+
// Add row filters
81+
rowAttrs.value.forEach((attr, i) => {
82+
if (rowValues[i] !== undefined && rowValues[i] !== null) {
83+
filters[attr] = rowValues[i]
84+
}
85+
})
86+
87+
props.tableOptions.clickCallback(event, value, filters, pivotData.value)
88+
}
89+
}
90+
</script>

0 commit comments

Comments
 (0)