Feat/#14 fix table renderer

src/components/pivottable-ui/VPivottableUi.vue

@@ -113,7 +113,7 @@ import VDragAndDropCell from './VDragAndDropCell.vue'
 import { VPivottable } from '@/'
 import { computed, ref, toRefs, watch } from 'vue'
 import { usePropsState, useMaterializeInput } from '@/composables'
-import TableRenderer from '../pivottable/renderer/index'
+import TableRenderer from '../pivottable/renderer'
 
 const props = defineProps({
   ...defaultProps,
@@ -224,6 +224,13 @@ const onUpdateValueFilter = ({ attribute, valueFilter }) => {
 }
 const onUpdateRendererName = rendererName => {
   updateState('rendererName', rendererName)
+  if (rendererName === 'Table Heatmap') {
+    updateState('heatmapMode', 'full')
+  } else if (rendererName === 'Table Row Heatmap') {
+    updateState('heatmapMode', 'row')
+  } else if (rendererName === 'Table Col Heatmap') {
+    updateState('heatmapMode', 'col')
+  }
 }
 const onUpdateAggregatorName = aggregatorName => {
   updateState('aggregatorName', aggregatorName)

src/components/pivottable/VPivottable.vue

@@ -2,7 +2,7 @@
   <component
     :is="rendererComponent"
     v-bind="props"
-  ></component>
+  />
 </template>
 
 <script setup>
@@ -19,7 +19,3 @@ const props = defineProps({
 const rendererComponent = computed(() => props.rendererItems[props.rendererName] || TableRenderer.Table)
 
 </script>
-
-<style lang="scss" scoped>
-
-</style>

src/components/pivottable/VPivottableBody.vue

@@ -1,29 +1,57 @@
 <template>
-  <tbody>
+  <tbody v-if="pivotData">
     <VPivottableBodyRows
-      v-for="(rowKey, i) in rowKeys"
-      :key="`rowKeyRow${i}`"
-      :pivotData="pivotData"
-      :index="i"
       :rowKeys="rowKeys"
-      :rowKey="rowKey"
       :colKeys="colKeys"
+      :rowTotal="rowTotal"
+      :tableOptions="tableOptions"
+    />
+    <VPivottableBodyRowsTotalRow
+      :colTotal="colTotal"
+      :rowTotal="rowTotal"
       :rowAttrs="rowAttrs"
       :colAttrs="colAttrs"
+      :colKeys="colKeys"
+      :localeStrings="localeStrings"
       :tableOptions="tableOptions"
-      :rowTotal="rowTotal"
     />
   </tbody>
 </template>
 
 <script setup>
+import { useProvidePivotData } from '@/composables/useProvidePivotData'
 import VPivottableBodyRows from './VPivottableBodyRows.vue'
-import { usePivotData } from '@/composables/usePivotData'
+import VPivottableBodyRowsTotalRow from './VPivottableBodyRowsTotalRow.vue'
 
-const { pivotData, rowKeys, colKeys, rowAttrs, colAttrs } = usePivotData()
-const { rowTotal, tableOptions } = defineProps(['rowTotal', 'tableOptions'])
-</script>
+defineProps({
+  rowTotal: {
+    type: Boolean,
+    default: true
+  },
+  colTotal: {
+    type: Boolean,
+    default: true
+  },
+  localeStrings: {
+    type: Object,
+    default: () => ({
+      totals: 'Totals'
+    })
+  },
+  tableOptions: {
+    type: Object,
+    default: () => ({
+      clickCallback: null
+    })
+  }
+})
 
-<style lang="scss" scoped>
+const {
+  pivotData,
+  rowKeys,
+  colKeys,
+  rowAttrs,
+  colAttrs
+} = useProvidePivotData()
 
-</style>
+</script>

src/components/pivottable/VPivottableBodyRows.vue

@@ -1,49 +1,97 @@
 <template>
-  <tr>
-    <th v-for="(text, j) in rowKey" :key="`rowKeyLabel${index}-${j}`"
-      class="pvtRowLabel"
-      :rowspan="spanSize(rowKeys, index, j)"
-      :colspan="j === rowAttrs.length - 1 && colAttrs.length !== 0 ? 2 : 1"
+  <tr v-for="(rowKey, i) in rowKeys" :key="`rowKeyRow${i}`">
+    <template v-for="(text, j) in rowKey" :key="`rowLabel${i}-${j}`">
+      <th
+        v-if="spanSize(rowKeys, i, j) !== -1"
+        class="pvtRowLabel"
+        :rowSpan="spanSize(rowKeys, i, j)"
+        :colSpan="j === rowAttrs.length - 1 && colAttrs.length !== 0 ? 2 : 1"
+      >
+        {{ text }}
+      </th>
+    </template>
+    <td
+      v-for="(colKey, j) in colKeys"
+      :key="`pvtVal${i}-${j}`"
+      class="pvVal"
+      :style="getValueCellStyle(rowKey, colKey)"
+      @click="handleCellClick(getAggregator(rowKey, colKey).value(), rowKey, colKey)"
     >
-      {{ text }}
-    </th>
-    <td v-for="(colKey, j) in colKeys" :key="`pvtVal${index}-${j}`"
-      :class="['pvVal']"
-    >
-    {{ getValue(rowKey, colKey) }}
+      {{ getAggregator(rowKey, colKey).format(getAggregator(rowKey, colKey).value()) }}
     </td>
-    <td v-if="rowTotal"
+    <td
+      v-if="rowTotal"
       class="pvtTotal"
+      :style="getRowTotalStyle(rowKey)"
+      @click="handleCellClick(getAggregator(rowKey, []).value(), rowKey, [])"
     >
-      {{ getTotalValue(rowKey, []) }}
+      {{ getAggregator(rowKey, []).format(getAggregator(rowKey, []).value()) }}
     </td>
   </tr>
 </template>
 
 <script setup>
-import { spanSize } from '../../helper'
+
+import { useProvidePivotData } from '@/composables/useProvidePivotData'
+
 const props = defineProps({
-  pivotData: Object,
-  index: Number,
-  rowKeys: Array,
-  rowKey: Array,
-  colKeys: Array,
-  rowAttrs: Array,
-  colAttrs: Array,
-  tableOptions: Object,
-  rowTotal: Boolean
+  rowKeys: {
+    type: Array,
+    required: true
+  },
+  colKeys: {
+    type: Array,
+    required: true
+  },
+  rowTotal: {
+    type: Boolean,
+    required: true
+  },
+  tableOptions: {
+    type: Object,
+    required: true
+  }
 })
-const getValue = (rowKey, colKey) => {
-  const aggregator = props.pivotData.getAggregator(rowKey, colKey)
-  return aggregator.format(aggregator.value())
+
+const {
+  pivotData,
+  spanSize,
+  valueCellColors,
+  colTotalColors,
+  rowAttrs,
+  colAttrs,
+  getAggregator
+} = useProvidePivotData()
+
+const getValueCellStyle = (rowKey, colKey) => {
+  const value = getAggregator(rowKey, colKey).value()
+  return valueCellColors(rowKey, colKey, value)
 }
-const getTotalValue = (rowKey, colKey) => {
-  const totalAggregator = props.pivotData.getAggregator(rowKey, colKey)
-  return totalAggregator.format(totalAggregator.value())
+
+const getRowTotalStyle = (rowKey) => {
+  const value = getAggregator(rowKey, []).value()
+  return colTotalColors(value)
 }
 
-</script>
+const handleCellClick = (value, rowValues, colValues) => {
+  if (props.tableOptions?.clickCallback) {
+    const filters = {}
+
+    // Add column filters
+    colAttrs.value.forEach((attr, i) => {
+      if (colValues[i] !== undefined && colValues[i] !== null) {
+        filters[attr] = colValues[i]
+      }
+    })
 
-<style lang="scss" scoped>
+    // Add row filters
+    rowAttrs.value.forEach((attr, i) => {
+      if (rowValues[i] !== undefined && rowValues[i] !== null) {
+        filters[attr] = rowValues[i]
+      }
+    })
 
-</style>
+    props.tableOptions.clickCallback(event, value, filters, pivotData.value)
+  }
+}
+</script>

src/components/pivottable/VPivottableBodyRowsTotalRow.vue

@@ -0,0 +1,90 @@
+<template>
+  <tr v-if="colTotal">
+    <th
+      class="pvtTotalLabel"
+      :colSpan="rowAttrs.length + (colAttrs.length === 0 ? 0 : 1)"
+    >
+      {{ localeStrings.totals }}
+    </th>
+    <td
+      v-for="(colKey, i) in colKeys"
+      :key="`total${i}`"
+      class="pvtTotal"
+      :style="getColTotalStyle(colKey)"
+      @click="handleCellClick(getAggregator([], colKey).value(), [], colKey)"
+    >
+      {{ getAggregator([], colKey).format(getAggregator([], colKey).value()) }}
+    </td>
+    <td
+      v-if="rowTotal"
+      class="pvtGrandTotal"
+      @click="handleCellClick(grandTotalValue, [], [])"
+    >
+      {{ getAggregator([], []).format(grandTotalValue) }}
+    </td>
+  </tr>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useProvidePivotData } from '@/composables/useProvidePivotData'
+
+const props = defineProps({
+  colTotal: {
+    type: Boolean,
+    required: true
+  },
+  rowTotal: {
+    type: Boolean,
+    required: true
+  },
+  localeStrings: {
+    type: Object,
+    required: true
+  },
+  tableOptions: {
+    type: Object,
+    required: true
+  }
+})
+
+const {
+  getAggregator,
+  rowTotalColors,
+  colAttrs,
+  rowAttrs,
+  colKeys,
+  pivotData
+} = useProvidePivotData()
+
+const grandTotalValue = computed(() => {
+  return getAggregator([], []).value()
+})
+
+const getColTotalStyle = (colKey) => {
+  const value = getAggregator([], colKey).value()
+  return rowTotalColors(value)
+}
+
+const handleCellClick = (value, rowValues, colValues) => {
+  if (props.tableOptions?.clickCallback) {
+    const filters = {}
+
+    // Add column filters
+    colAttrs.value.forEach((attr, i) => {
+      if (colValues[i] !== undefined && colValues[i] !== null) {
+        filters[attr] = colValues[i]
+      }
+    })
+
+    // Add row filters
+    rowAttrs.value.forEach((attr, i) => {
+      if (rowValues[i] !== undefined && rowValues[i] !== null) {
+        filters[attr] = rowValues[i]
+      }
+    })
+
+    props.tableOptions.clickCallback(event, value, filters, pivotData.value)
+  }
+}
+</script>