pivot-chart
Version:
pivot table react component
39 lines • 2.58 kB
JavaScript
import React, { useMemo } from 'react';
import VegaChart from './charts/vegaChart';
import { getVisualScale } from './lib/scale/inedx';
function getCellContent(visType, cell, facetMeasure, dimensionsInView, measuresInView, visualScale) {
var viewDimCode = dimensionsInView.length > 0 ? dimensionsInView[0].id : 'total';
var safeVisType = visualScale === null ? 'number' : visType;
switch (safeVisType) {
case 'bar':
case 'line':
return (React.createElement("div", { className: "vis-container" }, cell && React.createElement(VegaChart, { xScale: visualScale.dimensions.find(function (dim) { return dim.id === viewDimCode; }) || { type: 'discrete', domain: null, id: 'total' }, yScale: visualScale.measures.find(function (mea) { return mea.id === facetMeasure.id; }), markType: visType, dataSource: cell, x: viewDimCode, y: facetMeasure.id })));
case 'scatter':
return (React.createElement("div", { className: "vis-container" }, cell && (React.createElement(VegaChart, { xScale: visualScale.measures.find(function (mea) { return mea.id === measuresInView[0].id; }), yScale: visualScale.measures.find(function (mea) { return mea.id === facetMeasure.id; }), markType: visType, dataSource: cell, x: measuresInView[0].id, y: facetMeasure.id }))));
case 'number':
default:
if (cell && facetMeasure.formatter) {
return facetMeasure.formatter(cell[facetMeasure.id]);
}
return (cell && cell[facetMeasure.id]) || '--';
}
}
var CrossTable = function (props) {
var matrix = props.matrix, measures = props.measures, dimensionsInView = props.dimensionsInView, measuresInView = props.measuresInView, visType = props.visType;
var visualScale = useMemo(function () {
if (visType === 'number') {
// todo: scale for number case. used for heatmap in future
return null;
}
else {
return getVisualScale(matrix, dimensionsInView, measures.concat(measuresInView));
}
}, [matrix]);
return (React.createElement("tbody", { className: "vis" }, matrix.map(function (row, rIndex) {
return (React.createElement("tr", { key: rIndex }, row.flatMap(function (cell, cIndex) {
return measures.map(function (mea) { return (React.createElement("td", { key: rIndex + "-" + cIndex + "-" + mea.id }, getCellContent(visType, cell, mea, dimensionsInView, measuresInView, visualScale))); });
})));
})));
};
export default CrossTable;
//# sourceMappingURL=crossTable.js.map