@vue-pivottable/multi-value-renderer 0.1.0

package/dist/vue2.mjs

@@ -0,0 +1,399 @@
+import { PivotUtilities } from "vue-pivottable";
+import { c as createMultiValueAggregator } from "./MultiValuePivotData.js";
+const { PivotData } = PivotUtilities;
+function redColorScaleGenerator(values) {
+  const numericValues = values.filter((v) => typeof v === "number" && !isNaN(v));
+  if (numericValues.length === 0) {
+    return () => ({});
+  }
+  const min = Math.min(...numericValues);
+  const max = Math.max(...numericValues);
+  return (x) => {
+    if (typeof x !== "number" || isNaN(x) || max === min) {
+      return {};
+    }
+    const nonRed = 255 - Math.round(255 * (x - min) / (max - min));
+    return { backgroundColor: `rgb(255,${nonRed},${nonRed})` };
+  };
+}
+function makeMultiValueRenderer(opts = {}) {
+  return {
+    name: opts.name || "vue2-multi-value-table",
+    props: {
+      // Data props
+      data: {
+        type: [Array, Object, Function],
+        required: true
+      },
+      rows: {
+        type: Array,
+        default: () => []
+      },
+      cols: {
+        type: Array,
+        default: () => []
+      },
+      vals: {
+        type: Array,
+        default: () => []
+      },
+      // Multi-value specific props
+      aggregatorMap: {
+        type: Object,
+        default: () => ({})
+      },
+      aggregators: {
+        type: Object,
+        required: true
+      },
+      // Filter and sort props
+      valueFilter: {
+        type: Object,
+        default: () => ({})
+      },
+      sorters: {
+        type: [Object, Function],
+        default: () => ({})
+      },
+      derivedAttributes: {
+        type: [Object, Function],
+        default: () => ({})
+      },
+      rowOrder: {
+        type: String,
+        default: "key_a_to_z"
+      },
+      colOrder: {
+        type: String,
+        default: "key_a_to_z"
+      },
+      // Display props
+      rowTotal: {
+        type: Boolean,
+        default: true
+      },
+      colTotal: {
+        type: Boolean,
+        default: true
+      },
+      tableColorScaleGenerator: {
+        type: Function,
+        default: () => redColorScaleGenerator
+      },
+      tableOptions: {
+        type: Object,
+        default: () => ({})
+      },
+      localeStrings: {
+        type: Object,
+        default: () => ({ totals: "Totals" })
+      },
+      labels: {
+        type: Object,
+        default: () => ({})
+      },
+      // Multi-value display options
+      cellLayout: {
+        type: String,
+        default: "vertical",
+        validator: (v) => ["vertical", "horizontal", "compact"].includes(v)
+      },
+      showValueLabels: {
+        type: Boolean,
+        default: true
+      },
+      valueLabels: {
+        type: Object,
+        default: () => ({})
+      }
+    },
+    methods: {
+      /**
+       * Apply label transformation to a value
+       */
+      applyLabel(attr, value) {
+        if (this.labels && typeof this.labels[attr] === "function") {
+          return this.labels[attr](value);
+        }
+        return value;
+      },
+      /**
+       * Get display label for a value column
+       */
+      getValueLabel(valName) {
+        if (this.valueLabels && this.valueLabels[valName]) {
+          return this.valueLabels[valName];
+        }
+        return valName;
+      },
+      /**
+       * Calculate row/col span for merged cells
+       */
+      spanSize(arr, i, j) {
+        let x;
+        if (i !== 0) {
+          let noDraw = true;
+          for (x = 0; x <= j; x++) {
+            if (arr[i - 1][x] !== arr[i][x]) {
+              noDraw = false;
+            }
+          }
+          if (noDraw) return -1;
+        }
+        let len = 0;
+        while (i + len < arr.length) {
+          let stop = false;
+          for (x = 0; x <= j; x++) {
+            if (arr[i][x] !== arr[i + len][x]) {
+              stop = true;
+            }
+          }
+          if (stop) break;
+          len++;
+        }
+        return len;
+      },
+      /**
+       * Format a single value using the appropriate aggregator
+       */
+      formatValue(valName, value) {
+        const aggName = this.aggregatorMap[valName] || "Sum";
+        const agg = this.aggregators[aggName];
+        if (agg) {
+          try {
+            const instance = agg([valName])();
+            if (instance && instance.format) {
+              return instance.format(value);
+            }
+          } catch (e) {
+          }
+        }
+        if (value === null || value === void 0) return "";
+        if (typeof value === "number") {
+          return value.toLocaleString();
+        }
+        return String(value);
+      },
+      /**
+       * Render multi-value cell content
+       */
+      renderMultiValueCell(h, values, rowKey, colKey) {
+        if (!values || typeof values !== "object") {
+          return String(values || "");
+        }
+        const items = this.vals.map((val) => {
+          const value = values[val];
+          const formatted = this.formatValue(val, value);
+          const label = this.getValueLabel(val);
+          const aggName = this.aggregatorMap[val] || "Sum";
+          if (this.cellLayout === "compact") {
+            return formatted;
+          }
+          return h("div", {
+            staticClass: "multi-value-item",
+            key: val,
+            attrs: {
+              "data-value": val,
+              "data-aggregator": aggName
+            }
+          }, [
+            this.showValueLabels ? h("span", {
+              staticClass: "multi-value-label"
+            }, `${label}: `) : null,
+            h("span", {
+              staticClass: ["multi-value-value"]
+            }, formatted)
+          ]);
+        });
+        if (this.cellLayout === "compact") {
+          return items.join(" / ");
+        }
+        return h("div", {
+          staticClass: ["multi-value-cell", `layout-${this.cellLayout}`]
+        }, items);
+      },
+      /**
+       * Create PivotData-like structure with multi-value aggregation
+       */
+      createPivotData() {
+        const multiValueAgg = createMultiValueAggregator(
+          this.aggregatorMap,
+          this.aggregators,
+          this.vals
+        );
+        const modifiedAggregators = {
+          ...this.aggregators,
+          "Multi-Value": () => multiValueAgg
+        };
+        return new PivotData({
+          data: this.data,
+          rows: this.rows,
+          cols: this.cols,
+          vals: this.vals,
+          aggregators: modifiedAggregators,
+          aggregatorName: "Multi-Value",
+          valueFilter: this.valueFilter,
+          sorters: this.sorters,
+          derivedAttributes: this.derivedAttributes,
+          rowOrder: this.rowOrder,
+          colOrder: this.colOrder
+        });
+      }
+    },
+    render(h) {
+      let pivotData;
+      try {
+        pivotData = this.createPivotData();
+      } catch (error) {
+        console.error("Multi-Value Renderer Error:", error);
+        return h("div", {
+          staticClass: ["pvtError"]
+        }, `Error: ${error.message}`);
+      }
+      const colAttrs = pivotData.props.cols;
+      const rowAttrs = pivotData.props.rows;
+      const rowKeys = pivotData.getRowKeys();
+      const colKeys = pivotData.getColKeys();
+      const grandTotalAggregator = pivotData.getAggregator([], []);
+      const getClickHandler = (value, rowValues, colValues) => {
+        if (this.tableOptions && this.tableOptions.clickCallback) {
+          const filters = {};
+          colAttrs.forEach((attr, i) => {
+            if (colValues[i] !== null) {
+              filters[attr] = colValues[i];
+            }
+          });
+          rowAttrs.forEach((attr, i) => {
+            if (rowValues[i] !== null) {
+              filters[attr] = rowValues[i];
+            }
+          });
+          return (e) => this.tableOptions.clickCallback(e, value, filters, pivotData);
+        }
+        return null;
+      };
+      return h("table", {
+        staticClass: ["pvtTable", "pvtMultiValueTable"]
+      }, [
+        // THEAD
+        h("thead", [
+          // Column attribute headers
+          colAttrs.map((c, j) => {
+            return h("tr", { key: `colAttrs${j}` }, [
+              // Top-left corner cell
+              j === 0 && rowAttrs.length !== 0 ? h("th", {
+                attrs: {
+                  colSpan: rowAttrs.length,
+                  rowSpan: colAttrs.length
+                }
+              }) : void 0,
+              // Column attribute label
+              h("th", { staticClass: ["pvtAxisLabel"] }, c),
+              // Column keys
+              colKeys.map((colKey, i) => {
+                const x = this.spanSize(colKeys, i, j);
+                if (x === -1) return null;
+                return h("th", {
+                  staticClass: ["pvtColLabel"],
+                  attrs: {
+                    key: `colKey${i}`,
+                    colSpan: x,
+                    rowSpan: j === colAttrs.length - 1 && rowAttrs.length !== 0 ? 2 : 1
+                  }
+                }, this.applyLabel(colAttrs[j], colKey[j]));
+              }),
+              // Totals header
+              j === 0 && this.rowTotal ? h("th", {
+                staticClass: ["pvtTotalLabel"],
+                attrs: {
+                  rowSpan: colAttrs.length + (rowAttrs.length === 0 ? 0 : 1)
+                }
+              }, this.localeStrings.totals) : void 0
+            ]);
+          }),
+          // Row attribute labels row
+          rowAttrs.length !== 0 ? h("tr", [
+            rowAttrs.map((r, i) => {
+              return h("th", {
+                staticClass: ["pvtAxisLabel"],
+                key: `rowAttr${i}`
+              }, r);
+            }),
+            this.rowTotal ? h(
+              "th",
+              { staticClass: ["pvtTotalLabel"] },
+              colAttrs.length === 0 ? this.localeStrings.totals : null
+            ) : colAttrs.length === 0 ? void 0 : h("th")
+          ]) : void 0
+        ]),
+        // TBODY
+        h("tbody", [
+          // Data rows
+          rowKeys.map((rowKey, i) => {
+            const totalAggregator = pivotData.getAggregator(rowKey, []);
+            return h("tr", { key: `rowKeyRow${i}` }, [
+              // Row labels
+              rowKey.map((text, j) => {
+                const x = this.spanSize(rowKeys, i, j);
+                if (x === -1) return null;
+                return h("th", {
+                  staticClass: ["pvtRowLabel"],
+                  attrs: {
+                    key: `rowKeyLabel${i}-${j}`,
+                    rowSpan: x,
+                    colSpan: j === rowAttrs.length - 1 && colAttrs.length !== 0 ? 2 : 1
+                  }
+                }, this.applyLabel(rowAttrs[j], text));
+              }),
+              // Data cells
+              colKeys.map((colKey, j) => {
+                const aggregator = pivotData.getAggregator(rowKey, colKey);
+                const value = aggregator.value();
+                const clickHandler = getClickHandler(value, rowKey, colKey);
+                return h("td", {
+                  staticClass: ["pvVal", "pvtMultiVal"],
+                  attrs: { key: `pvtVal${i}-${j}` },
+                  on: clickHandler ? { click: clickHandler } : {}
+                }, [this.renderMultiValueCell(h, value, rowKey, colKey)]);
+              }),
+              // Row total
+              this.rowTotal ? h("td", {
+                staticClass: ["pvtTotal", "pvtMultiVal"],
+                on: getClickHandler(totalAggregator.value(), rowKey, []) ? { click: getClickHandler(totalAggregator.value(), rowKey, []) } : {}
+              }, [this.renderMultiValueCell(h, totalAggregator.value(), rowKey, [])]) : void 0
+            ]);
+          }),
+          // Column totals row
+          h("tr", [
+            this.colTotal ? h("th", {
+              staticClass: ["pvtTotalLabel"],
+              attrs: {
+                colSpan: rowAttrs.length + (colAttrs.length === 0 ? 0 : 1)
+              }
+            }, this.localeStrings.totals) : void 0,
+            this.colTotal ? colKeys.map((colKey, i) => {
+              const totalAggregator = pivotData.getAggregator([], colKey);
+              const clickHandler = getClickHandler(totalAggregator.value(), [], colKey);
+              return h("td", {
+                staticClass: ["pvtTotal", "pvtMultiVal"],
+                attrs: { key: `total${i}` },
+                on: clickHandler ? { click: clickHandler } : {}
+              }, [this.renderMultiValueCell(h, totalAggregator.value(), [], colKey)]);
+            }) : void 0,
+            this.colTotal && this.rowTotal ? h("td", {
+              staticClass: ["pvtGrandTotal", "pvtMultiVal"],
+              on: getClickHandler(grandTotalAggregator.value(), [], []) ? { click: getClickHandler(grandTotalAggregator.value(), [], []) } : {}
+            }, [this.renderMultiValueCell(h, grandTotalAggregator.value(), [], [])]) : void 0
+          ])
+        ])
+      ]);
+    }
+  };
+}
+const MultiValueTableRenderer = {
+  "Multi-Value Table": makeMultiValueRenderer({ name: "vue2-multi-value-table" })
+};
+export {
+  MultiValueTableRenderer as MultiValueRenderers,
+  makeMultiValueRenderer
+};

package/dist/vue3.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const MultiValueTableRenderer = require("./MultiValueTableRenderer.js");
+exports.MultiValueRenderers = MultiValueTableRenderer.MultiValueTableRenderer;
+exports.makeMultiValueRenderer = MultiValueTableRenderer.makeMultiValueRenderer;

package/dist/vue3.mjs

@@ -0,0 +1,5 @@
+import { M, m } from "./MultiValueTableRenderer.js";
+export {
+  M as MultiValueRenderers,
+  m as makeMultiValueRenderer
+};

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@vue-pivottable/multi-value-renderer",
+  "version": "0.1.0",
+  "description": "Multi-value aggregator renderer for vue-pivottable (Vue 2/3 compatible)",
+  "author": "Seungwoo321",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./vue2": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/vue2.mjs",
+      "require": "./dist/vue2.js"
+    },
+    "./vue3": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/vue3.mjs",
+      "require": "./dist/vue3.js"
+    },
+    "./dist/styles.css": "./dist/styles.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "types",
+    "LICENSE",
+    "README.md"
+  ],
+  "scripts": {
+    "clean": "rimraf dist",
+    "build": "vite build && cp src/styles.css dist/styles.css",
+    "build:all": "npm run clean && npm run build",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "vue": "^2.7.0 || ^3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": false
+    }
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.0",
+    "release-it": "^17.0.0",
+    "rimraf": "^5.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0",
+    "vitest": "^1.0.0"
+  },
+  "keywords": [
+    "vue",
+    "vue2",
+    "vue3",
+    "pivot",
+    "pivottable",
+    "vue-pivottable",
+    "aggregator",
+    "multi-value",
+    "renderer"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vue-pivottable/multi-value-renderer.git"
+  },
+  "bugs": {
+    "url": "https://github.com/vue-pivottable/multi-value-renderer/issues"
+  },
+  "homepage": "https://github.com/vue-pivottable/multi-value-renderer#readme",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/types/index.d.ts

@@ -0,0 +1,170 @@
+import type { Component, DefineComponent } from 'vue'
+
+// ============================================================================
+// Core Types
+// ============================================================================
+
+/**
+ * Map of value column names to aggregator names
+ * @example { sales: 'Sum', quantity: 'Average' }
+ */
+export type AggregatorMap = Record<string, string>
+
+/**
+ * Aggregator result interface
+ */
+export interface AggregatorResult {
+  push(record: Record<string, any>): void
+  value(): any
+  format(value: any): string
+  numInputs?: number
+}
+
+/**
+ * Aggregator factory function
+ */
+export type AggregatorFactory = (
+  data?: any,
+  rowKey?: string[],
+  colKey?: string[]
+) => AggregatorResult
+
+/**
+ * Aggregator definition
+ */
+export type Aggregator = (attributes: string[]) => AggregatorFactory
+
+/**
+ * Collection of aggregators
+ */
+export type Aggregators = Record<string, Aggregator>
+
+// ============================================================================
+// Multi-Value Aggregator
+// ============================================================================
+
+/**
+ * Multi-value aggregator result with per-value access
+ */
+export interface MultiValueAggregatorResult extends AggregatorResult {
+  valueOf(valName: string): any
+  formatOf(valName: string, value: any): string
+  getSubAggregator(valName: string): AggregatorResult | null
+}
+
+/**
+ * Creates a multi-value aggregator factory
+ */
+export function createMultiValueAggregator(
+  aggregatorMap: AggregatorMap,
+  aggregators: Aggregators,
+  vals: string[]
+): AggregatorFactory
+
+/**
+ * Legacy alias for createMultiValueAggregator
+ */
+export function createMultiAggregator(
+  aggregatorMap: AggregatorMap,
+  aggregators: Aggregators
+): (vals: string[]) => AggregatorFactory
+
+/**
+ * Default color scale generator for heatmaps
+ */
+export function defaultColorScaleGenerator(
+  values: number[]
+): (value: number) => { backgroundColor: string }
+
+/**
+ * Validates an aggregator map configuration
+ */
+export function validateAggregatorMap(
+  aggregatorMap: AggregatorMap,
+  aggregators: Aggregators
+): {
+  valid: boolean
+  errors: string[]
+}
+
+// ============================================================================
+// Renderer Props
+// ============================================================================
+
+/**
+ * Cell layout options for multi-value display
+ */
+export type CellLayout = 'vertical' | 'horizontal' | 'compact'
+
+/**
+ * Props for the multi-value renderer
+ */
+export interface MultiValueRendererProps {
+  // Data props
+  data: any[] | Record<string, any>[] | ((callback: (record: Record<string, any>) => void) => void)
+  rows?: string[]
+  cols?: string[]
+  vals?: string[]
+
+  // Multi-value specific
+  aggregatorMap?: AggregatorMap
+  aggregators: Aggregators
+
+  // Filter and sort
+  valueFilter?: Record<string, Record<string, boolean>>
+  sorters?: Record<string, (a: any, b: any) => number> | ((attr: string) => (a: any, b: any) => number)
+  derivedAttributes?: Record<string, (record: Record<string, any>) => any>
+  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'
+
+  // Display options
+  rowTotal?: boolean
+  colTotal?: boolean
+  tableColorScaleGenerator?: (values: number[]) => (value: number) => { backgroundColor: string }
+  tableOptions?: {
+    clickCallback?: (
+      event: MouseEvent,
+      value: any,
+      filters: Record<string, any>,
+      pivotData: any
+    ) => void
+  }
+  localeStrings?: {
+    totals?: string
+  }
+  labels?: Record<string, (value: any) => any>
+
+  // Multi-value display options
+  cellLayout?: CellLayout
+  showValueLabels?: boolean
+  valueLabels?: Record<string, string>
+}
+
+// ============================================================================
+// Renderer Factory
+// ============================================================================
+
+/**
+ * Options for creating a multi-value renderer
+ */
+export interface MultiValueRendererOptions {
+  name?: string
+}
+
+/**
+ * Creates a multi-value table renderer component
+ */
+export function makeMultiValueRenderer(
+  opts?: MultiValueRendererOptions
+): DefineComponent<MultiValueRendererProps>
+
+// ============================================================================
+// Exports
+// ============================================================================
+
+/**
+ * Pre-configured multi-value renderers
+ */
+export const MultiValueRenderers: Record<string, Component>
+
+export default MultiValueRenderers