126 lines
5.0 KiB
JavaScript
126 lines
5.0 KiB
JavaScript
"use strict";
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.useViewBox = exports.useOffset = exports.useMargin = exports.useChartWidth = exports.useChartLayout = exports.useChartHeight = exports.selectChartLayout = exports.ReportChartSize = exports.ReportChartMargin = void 0;
|
|
var _react = require("react");
|
|
var _hooks = require("../state/hooks");
|
|
var _layoutSlice = require("../state/layoutSlice");
|
|
var _selectChartOffset = require("../state/selectors/selectChartOffset");
|
|
var _containerSelectors = require("../state/selectors/containerSelectors");
|
|
var _PanoramaContext = require("./PanoramaContext");
|
|
var _brushSelectors = require("../state/selectors/brushSelectors");
|
|
var useViewBox = () => {
|
|
var _useAppSelector;
|
|
var panorama = (0, _PanoramaContext.useIsPanorama)();
|
|
var rootViewBox = (0, _hooks.useAppSelector)(_selectChartOffset.selectChartViewBox);
|
|
var brushDimensions = (0, _hooks.useAppSelector)(_brushSelectors.selectBrushDimensions);
|
|
var brushPadding = (_useAppSelector = (0, _hooks.useAppSelector)(_brushSelectors.selectBrushSettings)) === null || _useAppSelector === void 0 ? void 0 : _useAppSelector.padding;
|
|
if (!panorama || !brushDimensions || !brushPadding) {
|
|
return rootViewBox;
|
|
}
|
|
return {
|
|
width: brushDimensions.width - brushPadding.left - brushPadding.right,
|
|
height: brushDimensions.height - brushPadding.top - brushPadding.bottom,
|
|
x: brushPadding.left,
|
|
y: brushPadding.top
|
|
};
|
|
};
|
|
exports.useViewBox = useViewBox;
|
|
var manyComponentsThrowErrorsIfOffsetIsUndefined = {
|
|
top: 0,
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
width: 0,
|
|
height: 0,
|
|
brushBottom: 0
|
|
};
|
|
var useOffset = () => {
|
|
var _useAppSelector2;
|
|
return (_useAppSelector2 = (0, _hooks.useAppSelector)(_selectChartOffset.selectChartOffset)) !== null && _useAppSelector2 !== void 0 ? _useAppSelector2 : manyComponentsThrowErrorsIfOffsetIsUndefined;
|
|
};
|
|
|
|
/**
|
|
* Returns the width of the chart in pixels.
|
|
*
|
|
* If you are using chart with hardcoded `width` prop, then the width returned will be the same
|
|
* as the `width` prop on the main chart element.
|
|
*
|
|
* If you are using a chart with a `ResponsiveContainer`, the width will be the size of the chart
|
|
* as the ResponsiveContainer has decided it would be.
|
|
*
|
|
* If the chart has any axes or legend, the `width` will be the size of the chart
|
|
* including the axes and legend. Meaning: adding axes and legend will not change the width.
|
|
*
|
|
* The dimensions do not scale, meaning as user zoom in and out, the width number will not change
|
|
* as the chart gets visually larger or smaller.
|
|
*
|
|
* Returns `undefined` if used outside a chart context.
|
|
*
|
|
* @returns {number | undefined} The width of the chart in pixels, or `undefined` if not in a chart context.
|
|
*/
|
|
exports.useOffset = useOffset;
|
|
var useChartWidth = () => {
|
|
return (0, _hooks.useAppSelector)(_containerSelectors.selectChartWidth);
|
|
};
|
|
|
|
/**
|
|
* Returns the height of the chart in pixels.
|
|
*
|
|
* If you are using chart with hardcoded `height` props, then the height returned will be the same
|
|
* as the `height` prop on the main chart element.
|
|
*
|
|
* If you are using a chart with a `ResponsiveContainer`, the height will be the size of the chart
|
|
* as the ResponsiveContainer has decided it would be.
|
|
*
|
|
* If the chart has any axes or legend, the `height` will be the size of the chart
|
|
* including the axes and legend. Meaning: adding axes and legend will not change the height.
|
|
*
|
|
* The dimensions do not scale, meaning as user zoom in and out, the height number will not change
|
|
* as the chart gets visually larger or smaller.
|
|
*
|
|
* Returns `undefined` if used outside a chart context.
|
|
*
|
|
* @returns {number | undefined} The height of the chart in pixels, or `undefined` if not in a chart context.
|
|
*/
|
|
exports.useChartWidth = useChartWidth;
|
|
var useChartHeight = () => {
|
|
return (0, _hooks.useAppSelector)(_containerSelectors.selectChartHeight);
|
|
};
|
|
exports.useChartHeight = useChartHeight;
|
|
var manyComponentsThrowErrorsIfMarginIsUndefined = {
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
left: 0
|
|
};
|
|
var useMargin = () => {
|
|
var _useAppSelector3;
|
|
return (_useAppSelector3 = (0, _hooks.useAppSelector)(state => state.layout.margin)) !== null && _useAppSelector3 !== void 0 ? _useAppSelector3 : manyComponentsThrowErrorsIfMarginIsUndefined;
|
|
};
|
|
exports.useMargin = useMargin;
|
|
var selectChartLayout = state => state.layout.layoutType;
|
|
exports.selectChartLayout = selectChartLayout;
|
|
var useChartLayout = () => (0, _hooks.useAppSelector)(selectChartLayout);
|
|
exports.useChartLayout = useChartLayout;
|
|
var ReportChartSize = props => {
|
|
var dispatch = (0, _hooks.useAppDispatch)();
|
|
(0, _react.useEffect)(() => {
|
|
dispatch((0, _layoutSlice.setChartSize)(props));
|
|
}, [dispatch, props]);
|
|
return null;
|
|
};
|
|
exports.ReportChartSize = ReportChartSize;
|
|
var ReportChartMargin = _ref => {
|
|
var {
|
|
margin
|
|
} = _ref;
|
|
var dispatch = (0, _hooks.useAppDispatch)();
|
|
(0, _react.useEffect)(() => {
|
|
dispatch((0, _layoutSlice.setMargin)(margin));
|
|
}, [dispatch, margin]);
|
|
return null;
|
|
};
|
|
exports.ReportChartMargin = ReportChartMargin; |