pivot-chart/build/pivotChart.js

pivot table react component

var __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
var __spread = (this && this.__spread) || function () {
    for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
    return ar;
};
import React, { useMemo, useRef, useState, useEffect } from 'react';
import { DimensionArea } from './common';
import { createCube, sum } from 'cube-core';
import LeftNestGrid from './leftNestGrid';
import TopNestGrid from './topNestGrid';
import CrossTable from './crossTable';
import { getPureNestTree, getCossMatrix, getNestFields } from './utils';
import { StyledTable } from './components/styledTable';
import { getTheme } from './theme';
var theme = getTheme();
function useMetaTransform(rowList, columnList, measureList) {
    var rows = useMemo(function () { return rowList.map(function (f) { return f.id; }); }, [rowList]);
    var columns = useMemo(function () { return columnList.map(function (f) { return f.id; }); }, [columnList]);
    var measures = useMemo(function () { return measureList.map(function (f) { return f.id; }); }, [measureList]);
    return { rows: rows, columns: columns, measures: measures };
}
var PivotChart = function (props) {
    var _a;
    var _b = props.rows, rowList = _b === void 0 ? [] : _b, _c = props.columns, columnList = _c === void 0 ? [] : _c, _d = props.measures, measureList = _d === void 0 ? [] : _d, _e = props.dataSource, dataSource = _e === void 0 ? [] : _e, _f = props.visType, visType = _f === void 0 ? 'number' : _f, _g = props.defaultExpandedDepth, defaultExpandedDepth = _g === void 0 ? {
        rowDepth: 0,
        columnDepth: 1
    } : _g, _h = props.showAggregatedNode, showAggregatedNode = _h === void 0 ? (_a = {},
        _a[DimensionArea.row] = true,
        _a[DimensionArea.column] = true,
        _a) : _h;
    var _j = defaultExpandedDepth.rowDepth, defaultRowDepth = _j === void 0 ? 1 : _j, _k = defaultExpandedDepth.columnDepth, defaultColumnDepth = _k === void 0 ? 1 : _k;
    var cubeRef = useRef();
    var _l = __read(useState(0), 2), emptyGridHeight = _l[0], setEmptyGridHeight = _l[1];
    var _m = __read(useState([]), 2), rowLPList = _m[0], setRowLPList = _m[1];
    var _o = __read(useState([]), 2), columnLPList = _o[0], setColumnLPList = _o[1];
    var _p = useMetaTransform(rowList, columnList, measureList), rows = _p.rows, columns = _p.columns, measures = _p.measures;
    var _q = useMemo(function () {
        return getNestFields(visType, rowList, columnList, measureList);
    }, [rowList, columnList, measureList, visType]), nestRows = _q.nestRows, nestColumns = _q.nestColumns, dimensionsInView = _q.dimensionsInView, facetMeasures = _q.facetMeasures, viewMeasures = _q.viewMeasures;
    useEffect(function () {
        cubeRef.current = createCube({
            type: 'moment',
            factTable: dataSource,
            dimensions: __spread(rows, columns),
            measures: measures,
            aggFunc: sum
        });
    }, [dataSource, rows, columns, measures]);
    // {rows, columns, dimsInVis} = getNestDimensions(visType)
    // getCell(path.concat(dimsInVis))
    var leftNestTree = useMemo(function () {
        return getPureNestTree(dataSource, nestRows.map(function (r) { return r.id; }));
    }, [dataSource, nestRows]);
    var topNestTree = useMemo(function () {
        return getPureNestTree(dataSource, nestColumns.map(function (c) { return c.id; }));
    }, [dataSource, nestColumns]);
    var crossMatrix = useMemo(function () {
        return getCossMatrix(visType, cubeRef.current, rowLPList, columnLPList, rows, columns, measureList, dimensionsInView.map(function (d) { return d.id; }));
    }, [dataSource, rows, columns, measures, rowLPList, columnLPList, visType]);
    return (React.createElement("div", { style: { border: "1px solid " + theme.table.borderColor, overflowX: "auto" } },
        React.createElement("div", { style: { display: "flex", flexWrap: "nowrap" } },
            React.createElement("div", null,
                React.createElement("div", { style: { height: emptyGridHeight, backgroundColor: theme.table.thead.backgroundColor } }),
                React.createElement(LeftNestGrid, { defaultExpandedDepth: defaultRowDepth, visType: visType, depth: nestRows.length, data: leftNestTree, onExpandChange: function (lpList) {
                        setRowLPList(lpList);
                    }, showAggregatedNode: showAggregatedNode.row })),
            React.createElement(StyledTable, null,
                React.createElement(TopNestGrid, { defaultExpandedDepth: defaultColumnDepth, depth: nestColumns.length, measures: measureList, data: topNestTree, onSizeChange: function (w, h) {
                        setEmptyGridHeight(h);
                    }, onExpandChange: function (lpList) {
                        setColumnLPList(lpList);
                    }, showAggregatedNode: showAggregatedNode.column }),
                React.createElement(CrossTable, { visType: visType, matrix: crossMatrix, measures: facetMeasures, dimensionsInView: dimensionsInView, measuresInView: viewMeasures })))));
};
export default PivotChart;
//# sourceMappingURL=pivotChart.js.map