@vue-pivottable/subtotal-renderer 0.1.0

package/dist/vue2.mjs

@@ -0,0 +1,453 @@
+import { createSubtotalAggregatorGetter } from "./core.mjs";
+import { generateColKeysWithSubtotals, generateRowKeysWithSubtotals, getSubtotalKeys, isSubtotalKey } from "./core.mjs";
+function redColorScaleGenerator(values) {
+  const min = Math.min.apply(Math, values);
+  const max = Math.max.apply(Math, values);
+  return (x) => {
+    const nonRed = 255 - Math.round(255 * (x - min) / (max - min));
+    return { backgroundColor: `rgb(255,${nonRed},${nonRed})` };
+  };
+}
+let _PivotData = null;
+function createSubtotalRenderers(PivotData) {
+  _PivotData = PivotData;
+  return {
+    "Subtotal Table": makeSubtotalRenderer({ name: "vue-subtotal-table" })
+  };
+}
+function generateRowKeysWithSubtotals2(rowKeys, depth) {
+  if (depth <= 1) {
+    return rowKeys.map((key) => ({ key, isSubtotal: false, level: key.length }));
+  }
+  const result = [];
+  for (let i = 0; i < rowKeys.length; i++) {
+    const rowKey = rowKeys[i];
+    const nextRowKey = rowKeys[i + 1];
+    result.push({ key: rowKey, isSubtotal: false, level: rowKey.length });
+    for (let level = depth - 1; level >= 1; level--) {
+      const currentPrefix = rowKey.slice(0, level);
+      const nextPrefix = nextRowKey ? nextRowKey.slice(0, level) : null;
+      const levelChanges = !nextPrefix || JSON.stringify(currentPrefix) !== JSON.stringify(nextPrefix);
+      if (levelChanges) {
+        result.push({
+          key: currentPrefix,
+          isSubtotal: true,
+          level,
+          subtotalLabel: `${currentPrefix[level - 1]} Subtotal`
+        });
+      }
+    }
+  }
+  return result;
+}
+function spanSize(rowItems, i, j) {
+  const arr = rowItems.map((item) => item.key);
+  if (rowItems[i].isSubtotal) {
+    return 1;
+  }
+  if (i !== 0 && !rowItems[i - 1].isSubtotal) {
+    let asPrevious = true;
+    for (let x = 0; x <= j; x++) {
+      if (arr[i - 1][x] !== arr[i][x]) {
+        asPrevious = false;
+        break;
+      }
+    }
+    if (asPrevious) {
+      return -1;
+    }
+  }
+  let len = 0;
+  while (i + len < arr.length) {
+    if (rowItems[i + len].isSubtotal)
+      break;
+    let same = true;
+    for (let x = 0; x <= j; x++) {
+      if (arr[i][x] !== arr[i + len][x]) {
+        same = false;
+        break;
+      }
+    }
+    if (!same)
+      break;
+    len++;
+  }
+  return len;
+}
+function colSpanSize(arr, i, j) {
+  if (i !== 0) {
+    let asPrevious = true;
+    for (let x = 0; x <= j; x++) {
+      if (arr[i - 1][x] !== arr[i][x]) {
+        asPrevious = false;
+        break;
+      }
+    }
+    if (asPrevious) {
+      return -1;
+    }
+  }
+  let len = 0;
+  while (i + len < arr.length) {
+    let same = true;
+    for (let x = 0; x <= j; x++) {
+      if (arr[i][x] !== arr[i + len][x]) {
+        same = false;
+        break;
+      }
+    }
+    if (!same)
+      break;
+    len++;
+  }
+  return len;
+}
+function makeSubtotalRenderer(opts = {}) {
+  return {
+    name: opts.name || "vue-subtotal-table",
+    props: {
+      data: {
+        type: [Array, Object, Function],
+        required: true
+      },
+      aggregators: Object,
+      aggregatorName: {
+        type: String,
+        default: "Count"
+      },
+      cols: {
+        type: Array,
+        default: () => []
+      },
+      rows: {
+        type: Array,
+        default: () => []
+      },
+      vals: {
+        type: Array,
+        default: () => []
+      },
+      valueFilter: {
+        type: Object,
+        default: () => ({})
+      },
+      sorters: {
+        type: [Function, Object],
+        default: () => ({})
+      },
+      derivedAttributes: {
+        type: [Function, Object],
+        default: () => ({})
+      },
+      rowOrder: {
+        type: String,
+        default: "key_a_to_z"
+      },
+      colOrder: {
+        type: String,
+        default: "key_a_to_z"
+      },
+      tableColorScaleGenerator: {
+        type: Function,
+        default: redColorScaleGenerator
+      },
+      tableOptions: {
+        type: Object,
+        default: () => ({})
+      },
+      localeStrings: {
+        type: Object,
+        default: () => ({
+          totals: "Totals"
+        })
+      },
+      rowTotal: {
+        type: Boolean,
+        default: true
+      },
+      colTotal: {
+        type: Boolean,
+        default: true
+      },
+      labels: {
+        type: Object,
+        default: () => ({})
+      },
+      // Subtotal specific props
+      subtotalOptions: {
+        type: Object,
+        default: () => ({
+          colSubtotalDisplay: {
+            displayOnTop: false,
+            enabled: true,
+            hideOnExpand: false
+          },
+          rowSubtotalDisplay: {
+            displayOnTop: false,
+            enabled: true,
+            hideOnExpand: false
+          },
+          arrowCollapsed: "▶",
+          arrowExpanded: "▼"
+        })
+      }
+    },
+    data() {
+      return {
+        collapsedRowKeys: /* @__PURE__ */ new Set(),
+        collapsedColKeys: /* @__PURE__ */ new Set()
+      };
+    },
+    methods: {
+      toggleRowCollapse(keyStr) {
+        if (this.collapsedRowKeys.has(keyStr)) {
+          this.collapsedRowKeys.delete(keyStr);
+        } else {
+          this.collapsedRowKeys.add(keyStr);
+        }
+        this.collapsedRowKeys = new Set(this.collapsedRowKeys);
+        this.$forceUpdate();
+      },
+      toggleColCollapse(keyStr) {
+        if (this.collapsedColKeys.has(keyStr)) {
+          this.collapsedColKeys.delete(keyStr);
+        } else {
+          this.collapsedColKeys.add(keyStr);
+        }
+        this.collapsedColKeys = new Set(this.collapsedColKeys);
+        this.$forceUpdate();
+      },
+      applyLabel(attr, value) {
+        if (this.labels && typeof this.labels[attr] === "function") {
+          return this.labels[attr](value);
+        }
+        return value;
+      }
+    },
+    render(h) {
+      if (!_PivotData) {
+        console.error("PivotData not initialized. Please use createSubtotalRenderers(PivotData) first.");
+        return h("div", "Error: PivotData not initialized. Use createSubtotalRenderers(PivotData).");
+      }
+      let pivotData;
+      try {
+        pivotData = new _PivotData(this.$props);
+      } catch (error) {
+        console.error(error);
+        return h("span", "Error rendering pivot table");
+      }
+      const colAttrs = pivotData.props.cols;
+      const rowAttrs = pivotData.props.rows;
+      const rowKeys = pivotData.getRowKeys();
+      const colKeys = pivotData.getColKeys();
+      const grandTotalAggregator = pivotData.getAggregator([], []);
+      const getAggregator = createSubtotalAggregatorGetter(pivotData);
+      const rowKeysWithSubtotals = generateRowKeysWithSubtotals2(rowKeys, rowAttrs.length);
+      const getClickHandler = (value, rowValues, colValues) => {
+        if (this.tableOptions && this.tableOptions.clickCallback) {
+          const filters = {};
+          colAttrs.forEach((attr, i) => {
+            if (colValues[i] !== void 0 && colValues[i] !== null) {
+              filters[attr] = colValues[i];
+            }
+          });
+          rowAttrs.forEach((attr, i) => {
+            if (rowValues[i] !== void 0 && rowValues[i] !== null) {
+              filters[attr] = rowValues[i];
+            }
+          });
+          return (e) => this.tableOptions.clickCallback(e, value, filters, pivotData);
+        }
+        return null;
+      };
+      const renderHeader = () => {
+        const headerRows = [];
+        colAttrs.forEach((c, j) => {
+          const cells = [];
+          if (j === 0 && rowAttrs.length !== 0) {
+            cells.push(h("th", {
+              attrs: {
+                colSpan: rowAttrs.length,
+                rowSpan: colAttrs.length
+              },
+              style: {
+                backgroundColor: "#f5f5f5"
+              }
+            }));
+          }
+          cells.push(h("th", { class: "pvtAxisLabel" }, c));
+          colKeys.forEach((colKey, i) => {
+            const colSpan = colSpanSize(colKeys, i, j);
+            if (colSpan !== -1) {
+              const label = this.applyLabel(colAttrs[j], colKey[j]);
+              cells.push(h("th", {
+                class: "pvtColLabel",
+                key: `colKey${i}-${j}`,
+                attrs: {
+                  colSpan,
+                  rowSpan: j === colAttrs.length - 1 && rowAttrs.length !== 0 ? 2 : 1
+                }
+              }, label));
+            }
+          });
+          if (j === 0 && this.rowTotal) {
+            cells.push(h("th", {
+              class: "pvtTotalLabel",
+              attrs: {
+                rowSpan: colAttrs.length + (rowAttrs.length === 0 ? 0 : 1)
+              }
+            }, this.localeStrings.totals));
+          }
+          headerRows.push(h("tr", { key: `colAttr${j}` }, cells));
+        });
+        if (rowAttrs.length !== 0) {
+          const cells = rowAttrs.map((r, i) => h("th", {
+            class: "pvtAxisLabel",
+            key: `rowAttr${i}`
+          }, r));
+          if (colAttrs.length === 0 && this.rowTotal) {
+            cells.push(h("th", { class: "pvtTotalLabel" }, this.localeStrings.totals));
+          }
+          headerRows.push(h("tr", cells));
+        }
+        return h("thead", headerRows);
+      };
+      const renderBody = () => {
+        const bodyRows = [];
+        rowKeysWithSubtotals.forEach((rowItem, i) => {
+          const { key: rowKey, isSubtotal, level, subtotalLabel } = rowItem;
+          const cells = [];
+          if (isSubtotal) {
+            const subtotalText = subtotalLabel || `${rowKey[rowKey.length - 1]} Subtotal`;
+            cells.push(h("th", {
+              class: "pvtRowLabel pvtSubtotalLabel",
+              attrs: {
+                colSpan: rowAttrs.length + (colAttrs.length !== 0 ? 1 : 0)
+              },
+              style: {
+                fontWeight: "bold",
+                backgroundColor: "#f0f0f0"
+              }
+            }, subtotalText));
+            colKeys.forEach((colKey, j) => {
+              const aggregator = getAggregator(rowKey, colKey);
+              const val = aggregator.value();
+              const formattedVal = aggregator.format ? aggregator.format(val) : val;
+              const clickHandler = getClickHandler(val, rowKey, colKey);
+              cells.push(h("td", {
+                class: "pvtVal pvtSubtotalVal",
+                key: `subtotal-val${i}-${j}`,
+                style: {
+                  fontWeight: "bold",
+                  backgroundColor: "#f0f0f0"
+                },
+                on: clickHandler ? { click: clickHandler } : {}
+              }, formattedVal));
+            });
+            if (this.rowTotal) {
+              const totalAggregator = getAggregator(rowKey, []);
+              const totalVal = totalAggregator.value();
+              const formattedTotal = totalAggregator.format ? totalAggregator.format(totalVal) : totalVal;
+              const clickHandler = getClickHandler(totalVal, rowKey, []);
+              cells.push(h("td", {
+                class: "pvtTotal pvtSubtotalTotal",
+                style: {
+                  fontWeight: "bold",
+                  backgroundColor: "#e0e0e0"
+                },
+                on: clickHandler ? { click: clickHandler } : {}
+              }, formattedTotal));
+            }
+            bodyRows.push(h("tr", {
+              key: `subtotal-row${i}`,
+              class: "pvtSubtotalRow"
+            }, cells));
+          } else {
+            rowKey.forEach((text, j) => {
+              const rowSpan = spanSize(rowKeysWithSubtotals, i, j);
+              if (rowSpan !== -1) {
+                const label = this.applyLabel(rowAttrs[j], text);
+                cells.push(h("th", {
+                  class: "pvtRowLabel",
+                  key: `rowLabel${i}-${j}`,
+                  attrs: {
+                    rowSpan,
+                    colSpan: j === rowAttrs.length - 1 && colAttrs.length !== 0 ? 2 : 1
+                  }
+                }, label));
+              }
+            });
+            colKeys.forEach((colKey, j) => {
+              const aggregator = getAggregator(rowKey, colKey);
+              const val = aggregator.value();
+              const formattedVal = aggregator.format ? aggregator.format(val) : val;
+              const clickHandler = getClickHandler(val, rowKey, colKey);
+              cells.push(h("td", {
+                class: "pvtVal",
+                key: `val${i}-${j}`,
+                on: clickHandler ? { click: clickHandler } : {}
+              }, formattedVal));
+            });
+            if (this.rowTotal) {
+              const totalAggregator = getAggregator(rowKey, []);
+              const totalVal = totalAggregator.value();
+              const formattedTotal = totalAggregator.format ? totalAggregator.format(totalVal) : totalVal;
+              const clickHandler = getClickHandler(totalVal, rowKey, []);
+              cells.push(h("td", {
+                class: "pvtTotal",
+                on: clickHandler ? { click: clickHandler } : {}
+              }, formattedTotal));
+            }
+            bodyRows.push(h("tr", { key: `row${i}` }, cells));
+          }
+        });
+        if (this.colTotal) {
+          const cells = [];
+          cells.push(h("th", {
+            class: "pvtTotalLabel",
+            attrs: {
+              colSpan: rowAttrs.length + (colAttrs.length === 0 ? 0 : 1)
+            }
+          }, this.localeStrings.totals));
+          colKeys.forEach((colKey, i) => {
+            const totalAggregator = getAggregator([], colKey);
+            const totalVal = totalAggregator.value();
+            const formattedTotal = totalAggregator.format ? totalAggregator.format(totalVal) : totalVal;
+            const clickHandler = getClickHandler(totalVal, [], colKey);
+            cells.push(h("td", {
+              class: "pvtTotal",
+              key: `colTotal${i}`,
+              on: clickHandler ? { click: clickHandler } : {}
+            }, formattedTotal));
+          });
+          if (this.rowTotal) {
+            const clickHandler = getClickHandler(grandTotalAggregator.value(), [], []);
+            cells.push(h("td", {
+              class: "pvtGrandTotal",
+              on: clickHandler ? { click: clickHandler } : {}
+            }, grandTotalAggregator.format(grandTotalAggregator.value())));
+          }
+          bodyRows.push(h("tr", cells));
+        }
+        return h("tbody", bodyRows);
+      };
+      return h("table", { class: "pvtTable" }, [
+        renderHeader(),
+        renderBody()
+      ]);
+    }
+  };
+}
+const SubtotalRenderers = {
+  "Subtotal Table": makeSubtotalRenderer({ name: "vue-subtotal-table" })
+};
+export {
+  SubtotalRenderers,
+  createSubtotalAggregatorGetter,
+  createSubtotalRenderers,
+  SubtotalRenderers as default,
+  generateColKeysWithSubtotals,
+  generateRowKeysWithSubtotals,
+  getSubtotalKeys,
+  isSubtotalKey
+};

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@vue-pivottable/subtotal-renderer",
+  "version": "0.1.0",
+  "description": "Subtotal renderer for vue-pivottable with expand/collapse support. Supports Vue 2 and Vue 3.",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./types/index.d.ts"
+    },
+    "./vue2": {
+      "import": "./dist/vue2.mjs",
+      "require": "./dist/vue2.js",
+      "types": "./types/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "types"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite"
+  },
+  "keywords": [
+    "vue",
+    "vue2",
+    "vue3",
+    "pivottable",
+    "pivot",
+    "subtotal",
+    "renderer",
+    "expand",
+    "collapse"
+  ],
+  "author": "Seungwoo321",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vue-pivottable/subtotal-renderer.git"
+  },
+  "peerDependencies": {
+    "vue": "^2.6.0 || ^3.0.0",
+    "vue-pivottable": ">=0.4.0"
+  },
+  "devDependencies": {
+    "release-it": "^17.0.0",
+    "vite": "^4.5.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/types/index.d.ts

@@ -0,0 +1,141 @@
+/**
+ * Type definitions for @vue-pivottable/subtotal-renderer
+ */
+
+import { Component } from 'vue'
+
+// ============================================================================
+// Subtotal Options
+// ============================================================================
+
+export interface SubtotalDisplayOptions {
+  /** Display subtotals on top of the group (default: false) */
+  displayOnTop?: boolean
+  /** Enable subtotals (default: true) */
+  enabled?: boolean
+  /** Hide subtotals when group is expanded (default: false) */
+  hideOnExpand?: boolean
+}
+
+export interface SubtotalOptions {
+  /** Column subtotal display options */
+  colSubtotalDisplay?: SubtotalDisplayOptions
+  /** Row subtotal display options */
+  rowSubtotalDisplay?: SubtotalDisplayOptions
+  /** Arrow character for collapsed state (default: '▶') */
+  arrowCollapsed?: string
+  /** Arrow character for expanded state (default: '▼') */
+  arrowExpanded?: string
+}
+
+// ============================================================================
+// Core Functions
+// ============================================================================
+
+/**
+ * Generate all possible subtotal key combinations for a given key
+ * @param key - The full key array
+ * @returns Array of partial keys for subtotals
+ */
+export function getSubtotalKeys(key: string[]): string[][]
+
+/**
+ * Check if a key represents a subtotal row/column
+ * @param key - The key to check
+ * @param maxDepth - Maximum depth (number of attributes)
+ */
+export function isSubtotalKey(key: string[], maxDepth: number): boolean
+
+/**
+ * Row/Column key with subtotal information
+ */
+export interface SubtotalKeyInfo {
+  key: string[]
+  isSubtotal: boolean
+  level: number
+  isCollapsed: boolean
+}
+
+/**
+ * Generate row keys with subtotals inserted
+ * @param rowKeys - Original row keys from PivotData
+ * @param rowAttrsCount - Number of row attributes
+ * @param collapsedKeys - Set of collapsed key strings
+ */
+export function generateRowKeysWithSubtotals(
+  rowKeys: string[][],
+  rowAttrsCount: number,
+  collapsedKeys?: Set<string>
+): SubtotalKeyInfo[]
+
+/**
+ * Generate column keys with subtotals inserted
+ * @param colKeys - Original column keys from PivotData
+ * @param colAttrsCount - Number of column attributes
+ * @param collapsedKeys - Set of collapsed key strings
+ */
+export function generateColKeysWithSubtotals(
+  colKeys: string[][],
+  colAttrsCount: number,
+  collapsedKeys?: Set<string>
+): SubtotalKeyInfo[]
+
+/**
+ * Create a subtotal-aware aggregator getter
+ * @param pivotData - The PivotData instance
+ */
+export function createSubtotalAggregatorGetter(pivotData: any): (
+  rowKey: string[],
+  colKey: string[]
+) => { value: () => any; format: (val: any) => string }
+
+// ============================================================================
+// Renderer Props
+// ============================================================================
+
+export interface SubtotalRendererProps {
+  data: any[] | object | Function
+  aggregators?: Record<string, Function>
+  aggregatorName?: string
+  cols?: string[]
+  rows?: string[]
+  vals?: string[]
+  valueFilter?: Record<string, Record<string, boolean>>
+  sorters?: Function | Record<string, Function>
+  derivedAttributes?: Function | Record<string, Function>
+  rowOrder?: 'key_a_to_z' | 'value_a_to_z' | 'value_z_to_a'
+  colOrder?: 'key_a_to_z' | 'value_a_to_z' | 'value_z_to_a'
+  tableColorScaleGenerator?: (values: number[]) => (value: number) => { backgroundColor: string }
+  tableOptions?: {
+    clickCallback?: (
+      event: MouseEvent,
+      value: any,
+      filters: Record<string, any>,
+      pivotData: any
+    ) => void
+  }
+  localeStrings?: {
+    totals?: string
+  }
+  rowTotal?: boolean
+  colTotal?: boolean
+  labels?: Record<string, (value: any) => string>
+  subtotalOptions?: SubtotalOptions
+}
+
+// ============================================================================
+// Renderers
+// ============================================================================
+
+export interface SubtotalRendererComponent extends Component {
+  name: string
+  props: SubtotalRendererProps
+}
+
+export interface SubtotalRenderersType {
+  'Subtotal Table': SubtotalRendererComponent
+}
+
+export const SubtotalRenderers: SubtotalRenderersType
+
+export default SubtotalRenderers