@vue-pivottable/multi-value-renderer 0.4.0 → 0.5.0-beta.0

package/README.md

@@ -174,17 +174,65 @@ Or customize with your own CSS targeting these classes:
 
 ## Available Aggregators
 
-The renderer uses aggregators from vue-pivottable. Common options:
+The renderer supports all aggregators from vue-pivottable:
+
+### Single-Input Aggregators
 
 - `Count`
+- `Count Unique Values`
+- `List Unique Values`
 - `Sum`
+- `Integer Sum`
 - `Average`
+- `Median`
 - `Minimum`
 - `Maximum`
-- `Median`
+- `First`
+- `Last`
 - `Sample Variance`
 - `Sample Standard Deviation`
 
+### Multi-Input Aggregators
+
+Multi-input aggregators (like `Sum over Sum`) compute relationships between two fields. When selected, an additional field selector appears in the UI.
+
+- `Sum over Sum` - Calculates sum(field1) / sum(field2)
+- `Sum as Fraction of Total`
+- `Sum as Fraction of Rows`
+- `Sum as Fraction of Columns`
+- `Count as Fraction of Total`
+- `Count as Fraction of Rows`
+- `Count as Fraction of Columns`
+
+#### Configuration Format
+
+For multi-input aggregators, use an object format in `aggregatorMap`:
+
+```js
+const aggregatorMap = {
+  // Single-input: string format
+  sales: 'Sum',
+  quantity: 'Average',
+
+  // Multi-input: object format with fields array
+  unit_price: {
+    aggregator: 'Sum over Sum',
+    fields: ['sales', 'quantity']  // sum(sales) / sum(quantity)
+  }
+}
+```
+
+#### Helper Function
+
+Use `getAggregatorNumInputs` to check if an aggregator requires multiple inputs:
+
+```js
+import { getAggregatorNumInputs } from '@vue-pivottable/multi-value-renderer/vue3'
+
+const numInputs = getAggregatorNumInputs(aggregators['Sum over Sum'])
+// Returns 2 for multi-input aggregators
+```
+
 ## License
 
 MIT

package/dist/core.js

@@ -1,89 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-function createMultiAggregator(aggregatorMap, aggregators) {
-  const defaultAggregator = "Sum";
-  return function multiAggregatorFactory(vals) {
-    return function(data, rowKey, colKey) {
-      const subAggregators = {};
-      const results = {};
-      vals.forEach((val) => {
-        const aggName = aggregatorMap[val] || defaultAggregator;
-        const aggFactory = aggregators[aggName];
-        if (aggFactory) {
-          subAggregators[val] = aggFactory([val])(data, rowKey, colKey);
-        }
-      });
-      return {
-        push(record) {
-          vals.forEach((val) => {
-            if (subAggregators[val]) {
-              subAggregators[val].push(record);
-            }
-          });
-        },
-        value() {
-          vals.forEach((val) => {
-            if (subAggregators[val]) {
-              results[val] = subAggregators[val].value();
-            }
-          });
-          return results;
-        },
-        format(values) {
-          if (typeof values !== "object") {
-            return String(values);
-          }
-          return vals.map((val) => {
-            const subAgg = subAggregators[val];
-            const v = values[val];
-            return subAgg && subAgg.format ? subAgg.format(v) : String(v);
-          }).join(" / ");
-        },
-        // For individual value access
-        valueOf(valName) {
-          if (subAggregators[valName]) {
-            return subAggregators[valName].value();
-          }
-          return null;
-        },
-        formatOf(valName, value) {
-          if (subAggregators[valName] && subAggregators[valName].format) {
-            return subAggregators[valName].format(value);
-          }
-          return String(value);
-        },
-        numInputs: vals.length
-      };
-    };
-  };
-}
-function defaultColorScaleGenerator(values) {
-  const min = Math.min(...values.filter((v) => typeof v === "number"));
-  const max = Math.max(...values.filter((v) => typeof v === "number"));
-  return (value) => {
-    if (typeof value !== "number" || max === min) {
-      return { backgroundColor: "white" };
-    }
-    const ratio = (value - min) / (max - min);
-    const nonRed = 255 - Math.round(255 * ratio);
-    return { backgroundColor: `rgb(255,${nonRed},${nonRed})` };
-  };
-}
-function validateAggregatorMap(aggregatorMap, aggregators) {
-  const errors = [];
-  const availableAggregators = Object.keys(aggregators);
-  Object.entries(aggregatorMap).forEach(([val, aggName]) => {
-    if (!aggregators[aggName]) {
-      errors.push(
-        `Unknown aggregator '${aggName}' for value '${val}'. Available: ${availableAggregators.join(", ")}`
-      );
-    }
-  });
-  return {
-    valid: errors.length === 0,
-    errors
-  };
-}
+const multiAggregator = require("./multiAggregator-t4E8vUde.cjs");
 function createMultiValueAggregator(aggregatorMap, aggregators, vals) {
   return function multiValueAggregatorFactory(data, rowKey, colKey) {
     const subAggregators = {};
@@ -162,8 +79,9 @@ function extendPivotData(BasePivotData) {
     }
   };
 }
-exports.createMultiAggregator = createMultiAggregator;
+exports.createMultiAggregator = multiAggregator.createMultiAggregator;
+exports.defaultColorScaleGenerator = multiAggregator.defaultColorScaleGenerator;
+exports.getAggregatorNumInputs = multiAggregator.getAggregatorNumInputs;
+exports.validateAggregatorMap = multiAggregator.validateAggregatorMap;
 exports.createMultiValueAggregator = createMultiValueAggregator;
-exports.defaultColorScaleGenerator = defaultColorScaleGenerator;
 exports.extendPivotData = extendPivotData;
-exports.validateAggregatorMap = validateAggregatorMap;

package/dist/core.mjs

@@ -1,87 +1,4 @@
-function createMultiAggregator(aggregatorMap, aggregators) {
-  const defaultAggregator = "Sum";
-  return function multiAggregatorFactory(vals) {
-    return function(data, rowKey, colKey) {
-      const subAggregators = {};
-      const results = {};
-      vals.forEach((val) => {
-        const aggName = aggregatorMap[val] || defaultAggregator;
-        const aggFactory = aggregators[aggName];
-        if (aggFactory) {
-          subAggregators[val] = aggFactory([val])(data, rowKey, colKey);
-        }
-      });
-      return {
-        push(record) {
-          vals.forEach((val) => {
-            if (subAggregators[val]) {
-              subAggregators[val].push(record);
-            }
-          });
-        },
-        value() {
-          vals.forEach((val) => {
-            if (subAggregators[val]) {
-              results[val] = subAggregators[val].value();
-            }
-          });
-          return results;
-        },
-        format(values) {
-          if (typeof values !== "object") {
-            return String(values);
-          }
-          return vals.map((val) => {
-            const subAgg = subAggregators[val];
-            const v = values[val];
-            return subAgg && subAgg.format ? subAgg.format(v) : String(v);
-          }).join(" / ");
-        },
-        // For individual value access
-        valueOf(valName) {
-          if (subAggregators[valName]) {
-            return subAggregators[valName].value();
-          }
-          return null;
-        },
-        formatOf(valName, value) {
-          if (subAggregators[valName] && subAggregators[valName].format) {
-            return subAggregators[valName].format(value);
-          }
-          return String(value);
-        },
-        numInputs: vals.length
-      };
-    };
-  };
-}
-function defaultColorScaleGenerator(values) {
-  const min = Math.min(...values.filter((v) => typeof v === "number"));
-  const max = Math.max(...values.filter((v) => typeof v === "number"));
-  return (value) => {
-    if (typeof value !== "number" || max === min) {
-      return { backgroundColor: "white" };
-    }
-    const ratio = (value - min) / (max - min);
-    const nonRed = 255 - Math.round(255 * ratio);
-    return { backgroundColor: `rgb(255,${nonRed},${nonRed})` };
-  };
-}
-function validateAggregatorMap(aggregatorMap, aggregators) {
-  const errors = [];
-  const availableAggregators = Object.keys(aggregators);
-  Object.entries(aggregatorMap).forEach(([val, aggName]) => {
-    if (!aggregators[aggName]) {
-      errors.push(
-        `Unknown aggregator '${aggName}' for value '${val}'. Available: ${availableAggregators.join(", ")}`
-      );
-    }
-  });
-  return {
-    valid: errors.length === 0,
-    errors
-  };
-}
+import { c, d, g, v } from "./multiAggregator-1pTQ492r.js";
 function createMultiValueAggregator(aggregatorMap, aggregators, vals) {
   return function multiValueAggregatorFactory(data, rowKey, colKey) {
     const subAggregators = {};
@@ -120,9 +37,9 @@ function createMultiValueAggregator(aggregatorMap, aggregators, vals) {
           return String(values ?? "");
         }
         return vals.map((val) => {
-          const v = values[val];
+          const v2 = values[val];
           const subAgg = subAggregators[val];
-          return subAgg && subAgg.format ? subAgg.format(v) : String(v ?? "");
+          return subAgg && subAgg.format ? subAgg.format(v2) : String(v2 ?? "");
         }).join(" / ");
       },
       formatOf(valName, value) {
@@ -161,9 +78,10 @@ function extendPivotData(BasePivotData) {
   };
 }
 export {
-  createMultiAggregator,
+  c as createMultiAggregator,
   createMultiValueAggregator,
-  defaultColorScaleGenerator,
+  d as defaultColorScaleGenerator,
   extendPivotData,
-  validateAggregatorMap
+  g as getAggregatorNumInputs,
+  v as validateAggregatorMap
 };

package/dist/index.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const multiAggregator = require("./multiAggregator-t4E8vUde.cjs");
 const core = require("./core.js");
-exports.createMultiAggregator = core.createMultiAggregator;
+exports.createMultiAggregator = multiAggregator.createMultiAggregator;
+exports.defaultColorScaleGenerator = multiAggregator.defaultColorScaleGenerator;
+exports.getAggregatorNumInputs = multiAggregator.getAggregatorNumInputs;
+exports.validateAggregatorMap = multiAggregator.validateAggregatorMap;
 exports.createMultiValueAggregator = core.createMultiValueAggregator;
-exports.defaultColorScaleGenerator = core.defaultColorScaleGenerator;
 exports.extendPivotData = core.extendPivotData;
-exports.validateAggregatorMap = core.validateAggregatorMap;

package/dist/index.mjs

@@ -1,8 +1,10 @@
-import { createMultiAggregator, createMultiValueAggregator, defaultColorScaleGenerator, extendPivotData, validateAggregatorMap } from "./core.mjs";
+import { c, d, g, v } from "./multiAggregator-1pTQ492r.js";
+import { createMultiValueAggregator, extendPivotData } from "./core.mjs";
 export {
-  createMultiAggregator,
+  c as createMultiAggregator,
   createMultiValueAggregator,
-  defaultColorScaleGenerator,
+  d as defaultColorScaleGenerator,
   extendPivotData,
-  validateAggregatorMap
+  g as getAggregatorNumInputs,
+  v as validateAggregatorMap
 };

package/dist/multiAggregator-1pTQ492r.js

@@ -0,0 +1,106 @@
+function getAggregatorNumInputs(aggFactory) {
+  try {
+    const instance = aggFactory([])();
+    return instance.numInputs || 0;
+  } catch {
+    return 1;
+  }
+}
+function createMultiAggregator(aggregatorMap, aggregators) {
+  const defaultAggregator = "Sum";
+  return function multiAggregatorFactory(vals) {
+    return function(data, rowKey, colKey) {
+      const subAggregators = {};
+      const results = {};
+      vals.forEach((val) => {
+        const aggConfig = aggregatorMap[val];
+        let aggName, aggFields;
+        if (typeof aggConfig === "object" && aggConfig !== null) {
+          aggName = aggConfig.aggregator || defaultAggregator;
+          aggFields = aggConfig.fields || [val];
+        } else {
+          aggName = aggConfig || defaultAggregator;
+          aggFields = [val];
+        }
+        const aggFactory = aggregators[aggName];
+        if (aggFactory) {
+          subAggregators[val] = aggFactory(aggFields)(data, rowKey, colKey);
+        }
+      });
+      return {
+        push(record) {
+          vals.forEach((val) => {
+            if (subAggregators[val]) {
+              subAggregators[val].push(record);
+            }
+          });
+        },
+        value() {
+          vals.forEach((val) => {
+            if (subAggregators[val]) {
+              results[val] = subAggregators[val].value();
+            }
+          });
+          return results;
+        },
+        format(values) {
+          if (typeof values !== "object") {
+            return String(values);
+          }
+          return vals.map((val) => {
+            const subAgg = subAggregators[val];
+            const v = values[val];
+            return subAgg && subAgg.format ? subAgg.format(v) : String(v);
+          }).join(" / ");
+        },
+        // For individual value access
+        valueOf(valName) {
+          if (subAggregators[valName]) {
+            return subAggregators[valName].value();
+          }
+          return null;
+        },
+        formatOf(valName, value) {
+          if (subAggregators[valName] && subAggregators[valName].format) {
+            return subAggregators[valName].format(value);
+          }
+          return String(value);
+        },
+        numInputs: vals.length
+      };
+    };
+  };
+}
+function defaultColorScaleGenerator(values) {
+  const min = Math.min(...values.filter((v) => typeof v === "number"));
+  const max = Math.max(...values.filter((v) => typeof v === "number"));
+  return (value) => {
+    if (typeof value !== "number" || max === min) {
+      return { backgroundColor: "white" };
+    }
+    const ratio = (value - min) / (max - min);
+    const nonRed = 255 - Math.round(255 * ratio);
+    return { backgroundColor: `rgb(255,${nonRed},${nonRed})` };
+  };
+}
+function validateAggregatorMap(aggregatorMap, aggregators) {
+  const errors = [];
+  const availableAggregators = Object.keys(aggregators);
+  Object.entries(aggregatorMap).forEach(([val, aggName]) => {
+    if (!aggregators[aggName]) {
+      errors.push(
+        `Unknown aggregator '${aggName}' for value '${val}'. Available: ${availableAggregators.join(", ")}`
+      );
+    }
+  });
+  return {
+    valid: errors.length === 0,
+    errors
+  };
+}
+export {
+  createMultiAggregator as c,
+  defaultColorScaleGenerator as d,
+  getAggregatorNumInputs as g,
+  validateAggregatorMap as v
+};

package/dist/multiAggregator-t4E8vUde.cjs

@@ -0,0 +1,105 @@
+"use strict";
+function getAggregatorNumInputs(aggFactory) {
+  try {
+    const instance = aggFactory([])();
+    return instance.numInputs || 0;
+  } catch {
+    return 1;
+  }
+}
+function createMultiAggregator(aggregatorMap, aggregators) {
+  const defaultAggregator = "Sum";
+  return function multiAggregatorFactory(vals) {
+    return function(data, rowKey, colKey) {
+      const subAggregators = {};
+      const results = {};
+      vals.forEach((val) => {
+        const aggConfig = aggregatorMap[val];
+        let aggName, aggFields;
+        if (typeof aggConfig === "object" && aggConfig !== null) {
+          aggName = aggConfig.aggregator || defaultAggregator;
+          aggFields = aggConfig.fields || [val];
+        } else {
+          aggName = aggConfig || defaultAggregator;
+          aggFields = [val];
+        }
+        const aggFactory = aggregators[aggName];
+        if (aggFactory) {
+          subAggregators[val] = aggFactory(aggFields)(data, rowKey, colKey);
+        }
+      });
+      return {
+        push(record) {
+          vals.forEach((val) => {
+            if (subAggregators[val]) {
+              subAggregators[val].push(record);
+            }
+          });
+        },
+        value() {
+          vals.forEach((val) => {
+            if (subAggregators[val]) {
+              results[val] = subAggregators[val].value();
+            }
+          });
+          return results;
+        },
+        format(values) {
+          if (typeof values !== "object") {
+            return String(values);
+          }
+          return vals.map((val) => {
+            const subAgg = subAggregators[val];
+            const v = values[val];
+            return subAgg && subAgg.format ? subAgg.format(v) : String(v);
+          }).join(" / ");
+        },
+        // For individual value access
+        valueOf(valName) {
+          if (subAggregators[valName]) {
+            return subAggregators[valName].value();
+          }
+          return null;
+        },
+        formatOf(valName, value) {
+          if (subAggregators[valName] && subAggregators[valName].format) {
+            return subAggregators[valName].format(value);
+          }
+          return String(value);
+        },
+        numInputs: vals.length
+      };
+    };
+  };
+}
+function defaultColorScaleGenerator(values) {
+  const min = Math.min(...values.filter((v) => typeof v === "number"));
+  const max = Math.max(...values.filter((v) => typeof v === "number"));
+  return (value) => {
+    if (typeof value !== "number" || max === min) {
+      return { backgroundColor: "white" };
+    }
+    const ratio = (value - min) / (max - min);
+    const nonRed = 255 - Math.round(255 * ratio);
+    return { backgroundColor: `rgb(255,${nonRed},${nonRed})` };
+  };
+}
+function validateAggregatorMap(aggregatorMap, aggregators) {
+  const errors = [];
+  const availableAggregators = Object.keys(aggregators);
+  Object.entries(aggregatorMap).forEach(([val, aggName]) => {
+    if (!aggregators[aggName]) {
+      errors.push(
+        `Unknown aggregator '${aggName}' for value '${val}'. Available: ${availableAggregators.join(", ")}`
+      );
+    }
+  });
+  return {
+    valid: errors.length === 0,
+    errors
+  };
+}
+exports.createMultiAggregator = createMultiAggregator;
+exports.defaultColorScaleGenerator = defaultColorScaleGenerator;
+exports.getAggregatorNumInputs = getAggregatorNumInputs;
+exports.validateAggregatorMap = validateAggregatorMap;

package/dist/vue2.js

@@ -1,15 +1,25 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const vuePivottable = require("vue-pivottable");
+const multiAggregator = require("./multiAggregator-t4E8vUde.cjs");
 const { PivotData } = vuePivottable.PivotUtilities;
 function createMultiValueAggregator(aggregatorMap, aggregators, vals) {
+  const defaultAggregator = "Sum";
   return function multiValueAggregatorFactory(data, rowKey, colKey) {
     const subAggregators = {};
     vals.forEach((val) => {
-      const aggName = aggregatorMap[val] || "Sum";
+      const aggConfig = aggregatorMap[val];
+      let aggName, aggFields;
+      if (typeof aggConfig === "object" && aggConfig !== null) {
+        aggName = aggConfig.aggregator || defaultAggregator;
+        aggFields = aggConfig.fields || [val];
+      } else {
+        aggName = aggConfig || defaultAggregator;
+        aggFields = [val];
+      }
       const aggFactory = aggregators[aggName];
       if (aggFactory) {
-        subAggregators[val] = aggFactory([val])(data, rowKey, colKey);
+        subAggregators[val] = aggFactory(aggFields)(data, rowKey, colKey);
       }
     });
     return {
@@ -181,6 +191,14 @@ function makeMultiValueRenderer(opts = {}) {
         if (this.valueLabels && this.valueLabels[valName]) {
           return this.valueLabels[valName];
         }
+        const aggConfig = this.aggregatorMap[valName];
+        if (typeof aggConfig === "object" && aggConfig !== null && aggConfig.fields) {
+          const fields = aggConfig.fields;
+          if (fields.length >= 2) {
+            return `${fields[0]}/${fields[1]}`;
+          }
+          return fields[0] || valName;
+        }
         return valName;
       },
       /**
@@ -214,11 +232,19 @@ function makeMultiValueRenderer(opts = {}) {
        * Format a single value using the appropriate aggregator
        */
       formatValue(valName, value) {
-        const aggName = this.aggregatorMap[valName] || "Sum";
+        const aggConfig = this.aggregatorMap[valName];
+        let aggName, aggFields;
+        if (typeof aggConfig === "object" && aggConfig !== null) {
+          aggName = aggConfig.aggregator || "Sum";
+          aggFields = aggConfig.fields || [valName];
+        } else {
+          aggName = aggConfig || "Sum";
+          aggFields = [valName];
+        }
         const agg = this.aggregators[aggName];
         if (agg) {
           try {
-            const instance = agg([valName])();
+            const instance = agg(aggFields)();
             if (instance && instance.format) {
               return instance.format(value);
             }
@@ -450,5 +476,6 @@ function makeMultiValueRenderer(opts = {}) {
 const MultiValueTableRenderer = {
   "Multi-Value Table": makeMultiValueRenderer({ name: "vue2-multi-value-table" })
 };
+exports.getAggregatorNumInputs = multiAggregator.getAggregatorNumInputs;
 exports.MultiValueRenderers = MultiValueTableRenderer;
 exports.makeMultiValueRenderer = makeMultiValueRenderer;

package/dist/vue2.mjs

@@ -1,13 +1,23 @@
 import { PivotUtilities } from "vue-pivottable";
+import { g } from "./multiAggregator-1pTQ492r.js";
 const { PivotData } = PivotUtilities;
 function createMultiValueAggregator(aggregatorMap, aggregators, vals) {
+  const defaultAggregator = "Sum";
   return function multiValueAggregatorFactory(data, rowKey, colKey) {
     const subAggregators = {};
     vals.forEach((val) => {
-      const aggName = aggregatorMap[val] || "Sum";
+      const aggConfig = aggregatorMap[val];
+      let aggName, aggFields;
+      if (typeof aggConfig === "object" && aggConfig !== null) {
+        aggName = aggConfig.aggregator || defaultAggregator;
+        aggFields = aggConfig.fields || [val];
+      } else {
+        aggName = aggConfig || defaultAggregator;
+        aggFields = [val];
+      }
       const aggFactory = aggregators[aggName];
       if (aggFactory) {
-        subAggregators[val] = aggFactory([val])(data, rowKey, colKey);
+        subAggregators[val] = aggFactory(aggFields)(data, rowKey, colKey);
       }
     });
     return {
@@ -179,6 +189,14 @@ function makeMultiValueRenderer(opts = {}) {
         if (this.valueLabels && this.valueLabels[valName]) {
           return this.valueLabels[valName];
         }
+        const aggConfig = this.aggregatorMap[valName];
+        if (typeof aggConfig === "object" && aggConfig !== null && aggConfig.fields) {
+          const fields = aggConfig.fields;
+          if (fields.length >= 2) {
+            return `${fields[0]}/${fields[1]}`;
+          }
+          return fields[0] || valName;
+        }
         return valName;
       },
       /**
@@ -212,11 +230,19 @@ function makeMultiValueRenderer(opts = {}) {
        * Format a single value using the appropriate aggregator
        */
       formatValue(valName, value) {
-        const aggName = this.aggregatorMap[valName] || "Sum";
+        const aggConfig = this.aggregatorMap[valName];
+        let aggName, aggFields;
+        if (typeof aggConfig === "object" && aggConfig !== null) {
+          aggName = aggConfig.aggregator || "Sum";
+          aggFields = aggConfig.fields || [valName];
+        } else {
+          aggName = aggConfig || "Sum";
+          aggFields = [valName];
+        }
         const agg = this.aggregators[aggName];
         if (agg) {
           try {
-            const instance = agg([valName])();
+            const instance = agg(aggFields)();
             if (instance && instance.format) {
               return instance.format(value);
             }
@@ -450,5 +476,6 @@ const MultiValueTableRenderer = {
 };
 export {
   MultiValueTableRenderer as MultiValueRenderers,
+  g as getAggregatorNumInputs,
   makeMultiValueRenderer
 };

package/dist/vue3.js

@@ -2,15 +2,25 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const vue = require("vue");
 const vuePivottable = require("vue-pivottable");
+const multiAggregator = require("./multiAggregator-t4E8vUde.cjs");
 const { PivotData } = vuePivottable.PivotUtilities;
 function createMultiValueAggregator(aggregatorMap, aggregators, vals) {
+  const defaultAggregator = "Sum";
   return function multiValueAggregatorFactory(data, rowKey, colKey) {
     const subAggregators = {};
     vals.forEach((val) => {
-      const aggName = aggregatorMap[val] || "Sum";
+      const aggConfig = aggregatorMap[val];
+      let aggName, aggFields;
+      if (typeof aggConfig === "object" && aggConfig !== null) {
+        aggName = aggConfig.aggregator || defaultAggregator;
+        aggFields = aggConfig.fields || [val];
+      } else {
+        aggName = aggConfig || defaultAggregator;
+        aggFields = [val];
+      }
       const aggFactory = aggregators[aggName];
       if (aggFactory) {
-        subAggregators[val] = aggFactory([val])(data, rowKey, colKey);
+        subAggregators[val] = aggFactory(aggFields)(data, rowKey, colKey);
       }
     });
     return {
@@ -176,6 +186,14 @@ function makeMultiValueRenderer(opts = {}) {
         if (props.valueLabels && props.valueLabels[valName]) {
           return props.valueLabels[valName];
         }
+        const aggConfig = props.aggregatorMap[valName];
+        if (typeof aggConfig === "object" && aggConfig !== null && aggConfig.fields) {
+          const fields = aggConfig.fields;
+          if (fields.length >= 2) {
+            return `${fields[0]}/${fields[1]}`;
+          }
+          return fields[0] || valName;
+        }
         return valName;
       };
       const spanSize = (arr, i, j) => {
@@ -203,11 +221,19 @@ function makeMultiValueRenderer(opts = {}) {
         return len;
       };
       const formatValue = (valName, value) => {
-        const aggName = props.aggregatorMap[valName] || "Sum";
+        const aggConfig = props.aggregatorMap[valName];
+        let aggName, aggFields;
+        if (typeof aggConfig === "object" && aggConfig !== null) {
+          aggName = aggConfig.aggregator || "Sum";
+          aggFields = aggConfig.fields || [valName];
+        } else {
+          aggName = aggConfig || "Sum";
+          aggFields = [valName];
+        }
         const agg = props.aggregators[aggName];
         if (agg) {
           try {
-            const instance = agg([valName])();
+            const instance = agg(aggFields)();
             if (instance && instance.format) {
               return instance.format(value);
             }
@@ -250,7 +276,6 @@ function makeMultiValueRenderer(opts = {}) {
         }, items);
       };
       const pivotData = vue.computed(() => {
-        console.log("Computing pivotData with aggregatorMap:", props.aggregatorMap);
         const multiValueAgg = createMultiValueAggregator(
           props.aggregatorMap,
           props.aggregators,
@@ -417,5 +442,6 @@ function makeMultiValueRenderer(opts = {}) {
 const MultiValueTableRenderer = vue.markRaw({
   "Multi-Value Table": makeMultiValueRenderer({ name: "vue3-multi-value-table" })
 });
+exports.getAggregatorNumInputs = multiAggregator.getAggregatorNumInputs;
 exports.MultiValueRenderers = MultiValueTableRenderer;
 exports.makeMultiValueRenderer = makeMultiValueRenderer;

package/dist/vue3.mjs

@@ -1,14 +1,24 @@
 import { markRaw, defineComponent, h, computed } from "vue";
 import { PivotUtilities } from "vue-pivottable";
+import { g } from "./multiAggregator-1pTQ492r.js";
 const { PivotData } = PivotUtilities;
 function createMultiValueAggregator(aggregatorMap, aggregators, vals) {
+  const defaultAggregator = "Sum";
   return function multiValueAggregatorFactory(data, rowKey, colKey) {
     const subAggregators = {};
     vals.forEach((val) => {
-      const aggName = aggregatorMap[val] || "Sum";
+      const aggConfig = aggregatorMap[val];
+      let aggName, aggFields;
+      if (typeof aggConfig === "object" && aggConfig !== null) {
+        aggName = aggConfig.aggregator || defaultAggregator;
+        aggFields = aggConfig.fields || [val];
+      } else {
+        aggName = aggConfig || defaultAggregator;
+        aggFields = [val];
+      }
       const aggFactory = aggregators[aggName];
       if (aggFactory) {
-        subAggregators[val] = aggFactory([val])(data, rowKey, colKey);
+        subAggregators[val] = aggFactory(aggFields)(data, rowKey, colKey);
       }
     });
     return {
@@ -174,6 +184,14 @@ function makeMultiValueRenderer(opts = {}) {
         if (props.valueLabels && props.valueLabels[valName]) {
           return props.valueLabels[valName];
         }
+        const aggConfig = props.aggregatorMap[valName];
+        if (typeof aggConfig === "object" && aggConfig !== null && aggConfig.fields) {
+          const fields = aggConfig.fields;
+          if (fields.length >= 2) {
+            return `${fields[0]}/${fields[1]}`;
+          }
+          return fields[0] || valName;
+        }
         return valName;
       };
       const spanSize = (arr, i, j) => {
@@ -201,11 +219,19 @@ function makeMultiValueRenderer(opts = {}) {
         return len;
       };
       const formatValue = (valName, value) => {
-        const aggName = props.aggregatorMap[valName] || "Sum";
+        const aggConfig = props.aggregatorMap[valName];
+        let aggName, aggFields;
+        if (typeof aggConfig === "object" && aggConfig !== null) {
+          aggName = aggConfig.aggregator || "Sum";
+          aggFields = aggConfig.fields || [valName];
+        } else {
+          aggName = aggConfig || "Sum";
+          aggFields = [valName];
+        }
         const agg = props.aggregators[aggName];
         if (agg) {
           try {
-            const instance = agg([valName])();
+            const instance = agg(aggFields)();
             if (instance && instance.format) {
               return instance.format(value);
             }
@@ -248,7 +274,6 @@ function makeMultiValueRenderer(opts = {}) {
         }, items);
       };
       const pivotData = computed(() => {
-        console.log("Computing pivotData with aggregatorMap:", props.aggregatorMap);
         const multiValueAgg = createMultiValueAggregator(
           props.aggregatorMap,
           props.aggregators,
@@ -417,5 +442,6 @@ const MultiValueTableRenderer = markRaw({
 });
 export {
   MultiValueTableRenderer as MultiValueRenderers,
+  g as getAggregatorNumInputs,
   makeMultiValueRenderer
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-pivottable/multi-value-renderer",
-  "version": "0.4.0",
+  "version": "0.5.0-beta.0",
   "description": "Multi-value aggregator renderer for vue-pivottable (Vue 2/3 compatible)",
   "author": "Seungwoo321",
   "license": "MIT",