feat: add tsv export renderer Close #25

Author: Seungwoo321

src/components/pivottable/renderer/TSVExportRenderers.vue

@@ -0,0 +1,62 @@
+<template>
+  <textarea
+    :style="styles"
+    readonly
+    :value="textareaValue"
+  ></textarea>
+</template>
+
+<script setup>
+import { defaultProps, PivotData } from '@/helper'
+import { computed } from 'vue'
+
+const props = defineProps({
+  ...defaultProps
+})
+
+const pivotData = computed(() => {
+  try {
+    return new PivotData(props)
+  } catch (err) {
+    console.error(err.stack)
+    return null
+  }
+})
+
+const rowKeys = computed(() => pivotData.value?.getRowKeys() || [])
+const colKeys = computed(() => pivotData.value?.getColKeys() || [])
+
+const styles = {
+  width: '100%',
+  height: `${window.innerHeight / 2}px`
+}
+
+const headerRow = computed(() => {
+  const header = [...pivotData.value.props.rows]
+
+  if (colKeys.value.length === 1 && colKeys.value[0].length === 0) {
+    header.push(props.aggregatorName)
+  } else {
+    colKeys.value.forEach((c) => header.push(c.join('-')))
+  }
+
+  return header
+})
+
+const result = computed(() => {
+  const data = rowKeys.value.reduce((acc, r) => {
+    const row = [...r]
+    colKeys.value.forEach((c) =>
+      row.push(pivotData.value.getAggregator(r, c).value() || '')
+    )
+    return [...acc, row]
+  }, [])
+  return [headerRow.value, ...data]
+})
+
+const textareaValue = computed(() =>
+  result.value.map((r) => r.join('\t')).join('\n')
+)
+</script>
+
+<style lang="scss" scoped></style>

src/components/pivottable/renderer/index.js

@@ -1,45 +1,60 @@
 import { defineComponent, h } from 'vue'
 import TableRenderer from './TableRenderer.vue'
+import TSVExportRenderers from './TSVExportRenderers.vue'
 import { defaultProps } from '@/helper'
 
 export default {
   'Table': defineComponent({
     name: 'vue-table',
     setup(props) {
-      return () => h(TableRenderer, {
-        ...defaultProps,
-        ...props
-      })
+      return () =>
+        h(TableRenderer, {
+          ...defaultProps,
+          ...props
+        })
     }
   }),
   'Table Heatmap': defineComponent({
     name: 'vue-table-heatmap',
     setup(props) {
-      return () => h(TableRenderer, {
-        ...defaultProps,
-        ...props,
-        heatmapMode: 'full'
-      })
+      return () =>
+        h(TableRenderer, {
+          ...defaultProps,
+          ...props,
+          heatmapMode: 'full'
+        })
     }
   }),
   'Table Col Heatmap': defineComponent({
     name: 'vue-table-col-heatmap',
     setup(props) {
-      return () => h(TableRenderer, {
-        ...defaultProps,
-        ...props,
-        heatmapMode: 'col'
-      })
+      return () =>
+        h(TableRenderer, {
+          ...defaultProps,
+          ...props,
+          heatmapMode: 'col'
+        })
     }
   }),
   'Table Row Heatmap': defineComponent({
     name: 'vue-table-row-heatmap',
     setup(props) {
-      return () => h(TableRenderer, {
-        ...defaultProps,
-        ...props,
-        heatmapMode: 'row'
-      })
+      return () =>
+        h(TableRenderer, {
+          ...defaultProps,
+          ...props,
+          heatmapMode: 'row'
+        })
+    }
+  }),
+  'Export Table TSV': defineComponent({
+    name: 'tsv-export-renderers',
+    setup(props) {
+      return () =>
+        h(TSVExportRenderers, {
+          ...defaultProps,
+          ...props
+        })
     }
   })
 }