@vue-pivottable/multi-value-renderer 0.2.2 → 0.3.0-beta.0

package/dist/MultiValueTableRenderer.js

@@ -1,364 +0,0 @@
-"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;