@vue-pivottable/multi-value-renderer 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Seungwoo321
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,167 @@
+# @vue-pivottable/multi-value-renderer
+
+Multi-value aggregator renderer for vue-pivottable. Display multiple aggregated values per cell, each with its own aggregation function.
+
+## Features
+
+- **Multiple Values per Cell**: Display sales (Sum), quantity (Average), and more in a single pivot table cell
+- **Vue 2 & Vue 3 Support**: Works with both vue-pivottable (Vue 2) and vue3-pivottable (Vue 3)
+- **Flexible Layout**: Choose between vertical, horizontal, or compact cell layouts
+- **Custom Value Labels**: Display user-friendly labels for each value column
+- **Full Integration**: Works with existing vue-pivottable features like click callbacks, labels, and totals
+
+## Installation
+
+```bash
+npm install @vue-pivottable/multi-value-renderer
+
+# or
+pnpm add @vue-pivottable/multi-value-renderer
+```
+
+## Usage
+
+### Vue 3
+
+```vue
+<template>
+  <VuePivottable
+    :data="data"
+    :rows="['region']"
+    :cols="['product']"
+    :vals="['sales', 'quantity']"
+    :renderers="renderers"
+    renderer-name="Multi-Value Table"
+    :aggregator-map="aggregatorMap"
+  />
+</template>
+
+<script setup>
+import { VuePivottable, PivotUtilities } from 'vue-pivottable'
+import { MultiValueRenderers } from '@vue-pivottable/multi-value-renderer'
+
+const data = [
+  { region: 'East', product: 'Apple', sales: 100, quantity: 10 },
+  { region: 'East', product: 'Banana', sales: 80, quantity: 20 },
+  // ...
+]
+
+const renderers = {
+  ...MultiValueRenderers
+}
+
+// Different aggregation for each value
+const aggregatorMap = {
+  sales: 'Sum',
+  quantity: 'Average'
+}
+</script>
+```
+
+### Vue 2
+
+```vue
+<template>
+  <VuePivottable
+    :data="data"
+    :rows="['region']"
+    :cols="['product']"
+    :vals="['sales', 'quantity']"
+    :renderers="renderers"
+    renderer-name="Multi-Value Table"
+    :aggregator-map="aggregatorMap"
+  />
+</template>
+
+<script>
+import { VuePivottable } from 'vue-pivottable'
+import { MultiValueRenderers } from '@vue-pivottable/multi-value-renderer/vue2'
+
+export default {
+  components: { VuePivottable },
+  data() {
+    return {
+      data: [
+        { region: 'East', product: 'Apple', sales: 100, quantity: 10 },
+        // ...
+      ],
+      renderers: { ...MultiValueRenderers },
+      aggregatorMap: {
+        sales: 'Sum',
+        quantity: 'Average'
+      }
+    }
+  }
+}
+</script>
+```
+
+## Props
+
+### aggregatorMap
+
+Map of value column names to aggregator names.
+
+```js
+{
+  sales: 'Sum',
+  quantity: 'Average',
+  profit: 'Maximum'
+}
+```
+
+### cellLayout
+
+How to display multiple values in each cell:
+
+- `'vertical'` (default): Stack values vertically
+- `'horizontal'`: Display values side by side
+- `'compact'`: Show values separated by " / "
+
+### showValueLabels
+
+Whether to show labels before each value (default: `true`).
+
+### valueLabels
+
+Custom display labels for value columns:
+
+```js
+{
+  sales: 'Total Sales',
+  quantity: 'Avg Qty'
+}
+```
+
+## Styling
+
+Import the included CSS for default styling:
+
+```js
+import '@vue-pivottable/multi-value-renderer/dist/styles.css'
+```
+
+Or customize with your own CSS targeting these classes:
+
+- `.multi-value-cell` - Cell container
+- `.multi-value-item` - Individual value row
+- `.multi-value-label` - Value label (e.g., "Sales:")
+- `.multi-value-value` - The actual value
+- `.layout-vertical`, `.layout-horizontal` - Layout modifiers
+
+## Available Aggregators
+
+The renderer uses aggregators from vue-pivottable. Common options:
+
+- `Count`
+- `Sum`
+- `Average`
+- `Minimum`
+- `Maximum`
+- `Median`
+- `Sample Variance`
+- `Sample Standard Deviation`
+
+## License
+
+MIT

package/dist/MultiValuePivotData.js

@@ -0,0 +1,81 @@
+"use strict";
+function createMultiValueAggregator(aggregatorMap, aggregators, vals) {
+  return function multiValueAggregatorFactory(data, rowKey, colKey) {
+    const subAggregators = {};
+    vals.forEach((val) => {
+      const aggName = aggregatorMap[val] || "Sum";
+      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() {
+        const results = {};
+        vals.forEach((val) => {
+          if (subAggregators[val]) {
+            results[val] = subAggregators[val].value();
+          }
+        });
+        return results;
+      },
+      valueOf(valName) {
+        if (subAggregators[valName]) {
+          return subAggregators[valName].value();
+        }
+        return null;
+      },
+      format(values) {
+        if (typeof values !== "object") {
+          return String(values ?? "");
+        }
+        return vals.map((val) => {
+          const v = values[val];
+          const subAgg = subAggregators[val];
+          return subAgg && subAgg.format ? subAgg.format(v) : String(v ?? "");
+        }).join(" / ");
+      },
+      formatOf(valName, value) {
+        if (subAggregators[valName] && subAggregators[valName].format) {
+          return subAggregators[valName].format(value);
+        }
+        return String(value ?? "");
+      },
+      getSubAggregator(valName) {
+        return subAggregators[valName] || null;
+      },
+      numInputs: vals.length
+    };
+  };
+}
+function extendPivotData(BasePivotData) {
+  return class MultiValuePivotData extends BasePivotData {
+    constructor(inputProps = {}) {
+      const { aggregatorMap = {}, ...restProps } = inputProps;
+      const multiValueAgg = createMultiValueAggregator(
+        aggregatorMap,
+        restProps.aggregators || BasePivotData.defaultProps.aggregators,
+        restProps.vals || []
+      );
+      const modifiedProps = {
+        ...restProps,
+        aggregators: {
+          ...restProps.aggregators,
+          "Multi-Value": () => multiValueAgg
+        },
+        aggregatorName: "Multi-Value"
+      };
+      super(modifiedProps);
+      this.aggregatorMap = aggregatorMap;
+    }
+  };
+}
+exports.createMultiValueAggregator = createMultiValueAggregator;
+exports.extendPivotData = extendPivotData;

package/dist/MultiValueTableRenderer.js

@@ -0,0 +1,364 @@
+"use strict";
+const vue = require("vue");
+const vuePivottable = require("vue-pivottable");
+const MultiValuePivotData = require("./MultiValuePivotData.js");
+const { PivotData } = vuePivottable.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 vue.defineComponent({
+    name: opts.name || "vue3-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: () => ({})
+      }
+    },
+    setup(props) {
+      const applyLabel = (attr, value) => {
+        if (props.labels && typeof props.labels[attr] === "function") {
+          return props.labels[attr](value);
+        }
+        return value;
+      };
+      const getValueLabel = (valName) => {
+        if (props.valueLabels && props.valueLabels[valName]) {
+          return props.valueLabels[valName];
+        }
+        return valName;
+      };
+      const 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;
+      };
+      const formatValue = (valName, value) => {
+        const aggName = props.aggregatorMap[valName] || "Sum";
+        const agg = props.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);
+      };
+      const renderMultiValueCell = (values) => {
+        if (!values || typeof values !== "object") {
+          return String(values || "");
+        }
+        const items = props.vals.map((val) => {
+          const value = values[val];
+          const formatted = formatValue(val, value);
+          const label = getValueLabel(val);
+          const aggName = props.aggregatorMap[val] || "Sum";
+          if (props.cellLayout === "compact") {
+            return formatted;
+          }
+          return vue.h("div", {
+            class: "multi-value-item",
+            key: val,
+            "data-value": val,
+            "data-aggregator": aggName
+          }, [
+            props.showValueLabels ? vue.h("span", { class: "multi-value-label" }, `${label}: `) : null,
+            vue.h("span", { class: "multi-value-value" }, formatted)
+          ]);
+        });
+        if (props.cellLayout === "compact") {
+          return items.join(" / ");
+        }
+        return vue.h("div", {
+          class: ["multi-value-cell", `layout-${props.cellLayout}`]
+        }, items);
+      };
+      const createPivotData = () => {
+        const multiValueAgg = MultiValuePivotData.createMultiValueAggregator(
+          props.aggregatorMap,
+          props.aggregators,
+          props.vals
+        );
+        const modifiedAggregators = {
+          ...props.aggregators,
+          "Multi-Value": () => multiValueAgg
+        };
+        return new PivotData({
+          data: props.data,
+          rows: props.rows,
+          cols: props.cols,
+          vals: props.vals,
+          aggregators: modifiedAggregators,
+          aggregatorName: "Multi-Value",
+          valueFilter: props.valueFilter,
+          sorters: props.sorters,
+          derivedAttributes: props.derivedAttributes,
+          rowOrder: props.rowOrder,
+          colOrder: props.colOrder
+        });
+      };
+      return {
+        applyLabel,
+        getValueLabel,
+        spanSize,
+        formatValue,
+        renderMultiValueCell,
+        createPivotData
+      };
+    },
+    render() {
+      let pivotData;
+      try {
+        pivotData = this.createPivotData();
+      } catch (error) {
+        console.error("Multi-Value Renderer Error:", error);
+        return vue.h("div", { class: "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) => {
+        var _a;
+        if ((_a = this.tableOptions) == null ? void 0 : _a.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 vue.h("table", { class: ["pvtTable", "pvtMultiValueTable"] }, [
+        // THEAD
+        vue.h("thead", [
+          // Column attribute headers
+          ...colAttrs.map((c, j) => {
+            return vue.h("tr", { key: `colAttrs${j}` }, [
+              // Top-left corner cell
+              j === 0 && rowAttrs.length !== 0 ? vue.h("th", { colSpan: rowAttrs.length, rowSpan: colAttrs.length }) : void 0,
+              // Column attribute label
+              vue.h("th", { class: "pvtAxisLabel" }, c),
+              // Column keys
+              ...colKeys.map((colKey, i) => {
+                const x = this.spanSize(colKeys, i, j);
+                if (x === -1) return null;
+                return vue.h("th", {
+                  class: "pvtColLabel",
+                  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 ? vue.h("th", {
+                class: "pvtTotalLabel",
+                rowSpan: colAttrs.length + (rowAttrs.length === 0 ? 0 : 1)
+              }, this.localeStrings.totals) : void 0
+            ].filter(Boolean));
+          }),
+          // Row attribute labels row
+          rowAttrs.length !== 0 ? vue.h("tr", [
+            ...rowAttrs.map((r, i) => {
+              return vue.h("th", { class: "pvtAxisLabel", key: `rowAttr${i}` }, r);
+            }),
+            this.rowTotal ? vue.h(
+              "th",
+              { class: "pvtTotalLabel" },
+              colAttrs.length === 0 ? this.localeStrings.totals : null
+            ) : colAttrs.length === 0 ? void 0 : vue.h("th")
+          ].filter(Boolean)) : void 0
+        ].filter(Boolean)),
+        // TBODY
+        vue.h("tbody", [
+          // Data rows
+          ...rowKeys.map((rowKey, i) => {
+            const totalAggregator = pivotData.getAggregator(rowKey, []);
+            return vue.h("tr", { key: `rowKeyRow${i}` }, [
+              // Row labels
+              ...rowKey.map((text, j) => {
+                const x = this.spanSize(rowKeys, i, j);
+                if (x === -1) return null;
+                return vue.h("th", {
+                  class: "pvtRowLabel",
+                  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 vue.h("td", {
+                  class: ["pvVal", "pvtMultiVal"],
+                  key: `pvtVal${i}-${j}`,
+                  onClick: clickHandler
+                }, [this.renderMultiValueCell(value)]);
+              }),
+              // Row total
+              this.rowTotal ? vue.h("td", {
+                class: ["pvtTotal", "pvtMultiVal"],
+                onClick: getClickHandler(totalAggregator.value(), rowKey, [])
+              }, [this.renderMultiValueCell(totalAggregator.value())]) : void 0
+            ].filter(Boolean));
+          }),
+          // Column totals row
+          vue.h("tr", [
+            this.colTotal ? vue.h("th", {
+              class: "pvtTotalLabel",
+              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 vue.h("td", {
+                class: ["pvtTotal", "pvtMultiVal"],
+                key: `total${i}`,
+                onClick: clickHandler
+              }, [this.renderMultiValueCell(totalAggregator.value())]);
+            }) : [],
+            this.colTotal && this.rowTotal ? vue.h("td", {
+              class: ["pvtGrandTotal", "pvtMultiVal"],
+              onClick: getClickHandler(grandTotalAggregator.value(), [], [])
+            }, [this.renderMultiValueCell(grandTotalAggregator.value())]) : void 0
+          ].filter(Boolean))
+        ])
+      ]);
+    }
+  });
+}
+const MultiValueTableRenderer = vue.markRaw({
+  "Multi-Value Table": makeMultiValueRenderer({ name: "vue3-multi-value-table" })
+});
+exports.MultiValueTableRenderer = MultiValueTableRenderer;
+exports.makeMultiValueRenderer = makeMultiValueRenderer;