@vue-pivottable/multi-value-renderer 0.1.0

package/dist/core.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const MultiValuePivotData = require("./MultiValuePivotData.js");
+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
+  };
+}
+exports.createMultiValueAggregator = MultiValuePivotData.createMultiValueAggregator;
+exports.extendPivotData = MultiValuePivotData.extendPivotData;
+exports.createMultiAggregator = createMultiAggregator;
+exports.defaultColorScaleGenerator = defaultColorScaleGenerator;
+exports.validateAggregatorMap = validateAggregatorMap;

package/dist/core.mjs

@@ -0,0 +1,92 @@
+import { c, e } from "./MultiValuePivotData.js";
+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
+  };
+}
+export {
+  createMultiAggregator,
+  c as createMultiValueAggregator,
+  defaultColorScaleGenerator,
+  e as extendPivotData,
+  validateAggregatorMap
+};

package/dist/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const core = require("./core.js");
+const MultiValuePivotData = require("./MultiValuePivotData.js");
+const MultiValueTableRenderer = require("./MultiValueTableRenderer.js");
+exports.createMultiAggregator = core.createMultiAggregator;
+exports.defaultColorScaleGenerator = core.defaultColorScaleGenerator;
+exports.validateAggregatorMap = core.validateAggregatorMap;
+exports.createMultiValueAggregator = MultiValuePivotData.createMultiValueAggregator;
+exports.extendPivotData = MultiValuePivotData.extendPivotData;
+exports.MultiValueRenderers = MultiValueTableRenderer.MultiValueTableRenderer;
+exports.makeMultiValueRenderer = MultiValueTableRenderer.makeMultiValueRenderer;

package/dist/index.mjs

@@ -0,0 +1,12 @@
+import { createMultiAggregator, defaultColorScaleGenerator, validateAggregatorMap } from "./core.mjs";
+import { c, e } from "./MultiValuePivotData.js";
+import { M, m } from "./MultiValueTableRenderer.js";
+export {
+  M as MultiValueRenderers,
+  createMultiAggregator,
+  c as createMultiValueAggregator,
+  defaultColorScaleGenerator,
+  e as extendPivotData,
+  m as makeMultiValueRenderer,
+  validateAggregatorMap
+};

package/dist/styles.css

@@ -0,0 +1,119 @@
+/**
+ * Multi-Value Renderer Styles
+ *
+ * Styles for the multi-value table renderer.
+ * Import this CSS alongside your vue-pivottable styles.
+ */
+
+/* Multi-value table */
+.pvtMultiValueTable {
+  border-collapse: collapse;
+}
+
+/* Multi-value cell container */
+.multi-value-cell {
+  display: flex;
+  gap: 4px;
+}
+
+.multi-value-cell.layout-vertical {
+  flex-direction: column;
+}
+
+.multi-value-cell.layout-horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+/* Individual value item */
+.multi-value-item {
+  display: flex;
+  align-items: baseline;
+  font-size: 0.9em;
+  line-height: 1.4;
+}
+
+.multi-value-item:not(:last-child) {
+  padding-bottom: 2px;
+}
+
+/* Value label (e.g., "Sales:") */
+.multi-value-label {
+  color: #666;
+  font-size: 0.85em;
+  margin-right: 4px;
+  white-space: nowrap;
+}
+
+/* Value number */
+.multi-value-value {
+  font-weight: 500;
+}
+
+/* Multi-value cells in table */
+.pvtMultiVal {
+  padding: 6px 8px !important;
+  vertical-align: top;
+  min-width: 80px;
+}
+
+/* Horizontal layout adjustments */
+.layout-horizontal .multi-value-item {
+  padding-right: 8px;
+  border-right: 1px solid #eee;
+}
+
+.layout-horizontal .multi-value-item:last-child {
+  padding-right: 0;
+  border-right: none;
+}
+
+/* Compact layout - no special styling needed */
+
+/* Hover effects */
+.pvtMultiVal:hover {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+/* Totals styling */
+.pvtTotal.pvtMultiVal,
+.pvtGrandTotal.pvtMultiVal {
+  background-color: #f8f8f8;
+  font-weight: 600;
+}
+
+.pvtTotal.pvtMultiVal .multi-value-value,
+.pvtGrandTotal.pvtMultiVal .multi-value-value {
+  font-weight: 600;
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .multi-value-label {
+    color: #aaa;
+  }
+
+  .layout-horizontal .multi-value-item {
+    border-right-color: #444;
+  }
+
+  .pvtMultiVal:hover {
+    background-color: rgba(255, 255, 255, 0.05);
+  }
+
+  .pvtTotal.pvtMultiVal,
+  .pvtGrandTotal.pvtMultiVal {
+    background-color: #2a2a2a;
+  }
+}
+
+/* Print styles */
+@media print {
+  .multi-value-label {
+    color: #333;
+  }
+
+  .pvtMultiVal:hover {
+    background-color: transparent;
+  }
+}