pivot-chart
Version:
pivot table react component
52 lines • 1.85 kB
JavaScript
import React, { useRef, useEffect } from 'react';
import embed from 'vega-embed';
var visMapper = {
bar: 'bar',
line: 'line',
scatter: 'point'
};
function visType2MarkType(visType) {
return visMapper[visType] || 'tick';
}
var VegaChart = function (props) {
var _a = props.x, x = _a === void 0 ? 'null' : _a, _b = props.y, y = _b === void 0 ? 'null' : _b, _c = props.dataSource, dataSource = _c === void 0 ? [] : _c, markType = props.markType, xScale = props.xScale, yScale = props.yScale;
var container = useRef();
useEffect(function () {
if (container.current) {
embed(container.current, {
data: {
values: dataSource
},
mark: visType2MarkType(markType),
height: 200,
encoding: {
x: {
type: markType === 'scatter' ? 'quantitative' : 'nominal',
field: x,
scale: xScale && {
domain: xScale.domain
}
},
y: {
type: 'quantitative',
field: y,
scale: yScale && {
domain: yScale.domain
}
}
}
}, {
actions: false,
mode: 'vega-lite',
renderer: 'svg'
}).then(function (res) {
// if (onHeightChange) {
// onHeightChange(container.current.clientHeight);
// }
});
}
}, [x, y, dataSource, xScale, yScale]);
return React.createElement("div", { ref: container });
};
export default VegaChart;
//# sourceMappingURL=vegaChart.js.map