pivot-chart
Version:
pivot table react component
122 lines • 6.9 kB
JavaScript
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;
};
import React, { useRef, useState, useEffect } from 'react';
import { DimensionArea } from './common';
import LeftNestGrid from './leftNestGrid';
import TopNestGrid from './topNestGrid';
import CrossTable from './crossTable';
import { useNestFields, AsyncCacheCube } from "./utils";
import { StyledTable } from './components/styledTable';
import { getTheme } from './theme';
var theme = getTheme();
var AsyncPivotChart = function (props) {
var _a;
var _b = props.rows, rows = _b === void 0 ? [] : _b, _c = props.columns, columns = _c === void 0 ? [] : _c, _d = props.measures, measures = _d === void 0 ? [] : _d, _e = props.visType, visType = _e === void 0 ? 'number' : _e, _f = props.defaultExpandedDepth, defaultExpandedDepth = _f === void 0 ? {
rowDepth: 0,
columnDepth: 1
} : _f, cubeQuery = props.cubeQuery, branchFilters = props.branchFilters, dimensionCompare = props.dimensionCompare, _g = props.showAggregatedNode, showAggregatedNode = _g === void 0 ? (_a = {},
_a[DimensionArea.row] = true,
_a[DimensionArea.column] = true,
_a) : _g, onNestTreeChange = props.onNestTreeChange, cubeRef = props.cubeRef, _h = props.highlightPathList, highlightPathList = _h === void 0 ? [] : _h;
var _j = defaultExpandedDepth.rowDepth, defaultRowDepth = _j === void 0 ? 1 : _j, _k = defaultExpandedDepth.columnDepth, defaultColumnDepth = _k === void 0 ? 1 : _k;
var asyncCubeRef = useRef();
// todo: use rxjs to handle complex async request problem
var requestIndex = useRef({
left: 0,
top: 0,
matrix: 0
});
var bothUpdateFlag = useRef({
left: true,
top: true,
leftCache: [],
topCache: []
});
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 = __read(useState({ id: 'root' }), 2), leftNestTree = _p[0], setLeftNestTree = _p[1];
var _q = __read(useState({ id: 'root' }), 2), topNestTree = _q[0], setTopNestTree = _q[1];
var _r = __read(useState([]), 2), crossMatrix = _r[0], setCrossMatrix = _r[1];
var expandedNestTrees = useRef({ left: null, top: null });
var _s = useNestFields(visType, rows, columns, measures), nestRows = _s.nestRows, nestColumns = _s.nestColumns, dimensionsInView = _s.dimensionsInView, facetMeasures = _s.facetMeasures, viewMeasures = _s.viewMeasures;
useEffect(function () {
asyncCubeRef.current = new AsyncCacheCube({
asyncCubeQuery: cubeQuery,
cmp: dimensionCompare
});
if (cubeRef) {
cubeRef.current = asyncCubeRef.current;
}
}, [cubeQuery, dimensionCompare]);
useEffect(function () {
requestIndex.current.left++;
requestIndex.current.top++;
var topId = requestIndex.current.top;
var leftId = requestIndex.current.left;
Promise.all([
asyncCubeRef.current.getCuboidNestTree(nestRows, branchFilters),
asyncCubeRef.current.getCuboidNestTree(nestColumns, branchFilters)
]).then(function (trees) {
var _a = __read(trees, 2), leftTree = _a[0], topTree = _a[1];
bothUpdateFlag.current.left = false;
bothUpdateFlag.current.top = false;
if (leftId === requestIndex.current.left) {
setLeftNestTree(leftTree);
}
if (topId === requestIndex.current.top) {
setTopNestTree(topTree);
}
});
}, [nestRows, nestColumns, branchFilters]);
useEffect(function () {
if (bothUpdateFlag.current.left && bothUpdateFlag.current.top) {
requestIndex.current.matrix++;
var id_1 = requestIndex.current.matrix;
asyncCubeRef.current.requestCossMatrix(visType, bothUpdateFlag.current.leftCache, bothUpdateFlag.current.topCache, rows, columns, measures, dimensionsInView).then(function (matrix) {
if (requestIndex.current.matrix === id_1) {
setCrossMatrix(matrix);
if (onNestTreeChange && expandedNestTrees.current.left && expandedNestTrees.current.top) {
onNestTreeChange(expandedNestTrees.current.left, expandedNestTrees.current.top);
}
}
});
}
}, [measures, rowLPList, columnLPList, visType]);
return (React.createElement("div", { style: { border: "1px solid " + theme.table.borderColor, overflow: '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, tree) {
bothUpdateFlag.current.left = true;
bothUpdateFlag.current.leftCache = lpList;
setRowLPList(lpList);
expandedNestTrees.current.left = tree;
}, showAggregatedNode: showAggregatedNode.row, highlightPathList: highlightPathList })),
React.createElement(StyledTable, null,
React.createElement(TopNestGrid, { defaultExpandedDepth: defaultColumnDepth, depth: nestColumns.length, measures: measures, data: topNestTree, onSizeChange: function (w, h) {
setEmptyGridHeight(h);
}, onExpandChange: function (lpList, tree) {
bothUpdateFlag.current.top = true;
bothUpdateFlag.current.topCache = lpList;
setColumnLPList(lpList);
expandedNestTrees.current.top = tree;
}, showAggregatedNode: showAggregatedNode.column, highlightPathList: highlightPathList }),
React.createElement(CrossTable, { visType: visType, matrix: crossMatrix, measures: facetMeasures, dimensionsInView: dimensionsInView, measuresInView: viewMeasures })))));
};
export default AsyncPivotChart;
//# sourceMappingURL=asyncPivotChart.js.map