113 lines
3.6 KiB
JavaScript
113 lines
3.6 KiB
JavaScript
"use strict";
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.calculateChartDimensions = void 0;
|
|
exports.getDefaultWidthAndHeight = getDefaultWidthAndHeight;
|
|
exports.getInnerDivStyle = void 0;
|
|
var _DataUtils = require("../util/DataUtils");
|
|
var calculateChartDimensions = (containerWidth, containerHeight, props) => {
|
|
var {
|
|
width = '100%',
|
|
height = '100%',
|
|
aspect,
|
|
maxHeight
|
|
} = props;
|
|
|
|
/*
|
|
* The containerWidth and containerHeight are already percentage based because it's set as that percentage in CSS.
|
|
* Means we don't have to calculate percentages here.
|
|
*/
|
|
var calculatedWidth = (0, _DataUtils.isPercent)(width) ? containerWidth : Number(width);
|
|
var calculatedHeight = (0, _DataUtils.isPercent)(height) ? containerHeight : Number(height);
|
|
if (aspect && aspect > 0) {
|
|
// Preserve the desired aspect ratio
|
|
if (calculatedWidth) {
|
|
// Will default to using width for aspect ratio
|
|
calculatedHeight = calculatedWidth / aspect;
|
|
} else if (calculatedHeight) {
|
|
// But we should also take height into consideration
|
|
calculatedWidth = calculatedHeight * aspect;
|
|
}
|
|
|
|
// if maxHeight is set, overwrite if calculatedHeight is greater than maxHeight
|
|
if (maxHeight && calculatedHeight != null && calculatedHeight > maxHeight) {
|
|
calculatedHeight = maxHeight;
|
|
}
|
|
}
|
|
return {
|
|
calculatedWidth,
|
|
calculatedHeight
|
|
};
|
|
};
|
|
exports.calculateChartDimensions = calculateChartDimensions;
|
|
var bothOverflow = {
|
|
width: 0,
|
|
height: 0,
|
|
overflow: 'visible'
|
|
};
|
|
var overflowX = {
|
|
width: 0,
|
|
overflowX: 'visible'
|
|
};
|
|
var overflowY = {
|
|
height: 0,
|
|
overflowY: 'visible'
|
|
};
|
|
var noStyle = {};
|
|
|
|
/**
|
|
* This zero-size, overflow-visible is required to allow the chart to shrink.
|
|
* Without it, the chart itself will fill the ResponsiveContainer, and while it allows the chart to grow,
|
|
* it would always keep the container at the size of the chart,
|
|
* and ResizeObserver would never fire.
|
|
* With this zero-size element, the chart itself never actually fills the container,
|
|
* it just so happens that it is visible because it overflows.
|
|
* I learned this trick from the `react-virtualized` library: https://github.com/bvaughn/react-virtualized-auto-sizer/blob/master/src/AutoSizer.ts
|
|
* See https://github.com/recharts/recharts/issues/172 and also https://github.com/bvaughn/react-virtualized/issues/68
|
|
*
|
|
* Also, we don't need to apply the zero-size style if the dimension is a fixed number (or undefined),
|
|
* because in that case the chart can't shrink in that dimension anyway.
|
|
* This fixes defining the dimensions using aspect ratio: https://github.com/recharts/recharts/issues/6245
|
|
*/
|
|
var getInnerDivStyle = props => {
|
|
var {
|
|
width,
|
|
height
|
|
} = props;
|
|
var isWidthPercent = (0, _DataUtils.isPercent)(width);
|
|
var isHeightPercent = (0, _DataUtils.isPercent)(height);
|
|
if (isWidthPercent && isHeightPercent) {
|
|
return bothOverflow;
|
|
}
|
|
if (isWidthPercent) {
|
|
return overflowX;
|
|
}
|
|
if (isHeightPercent) {
|
|
return overflowY;
|
|
}
|
|
return noStyle;
|
|
};
|
|
exports.getInnerDivStyle = getInnerDivStyle;
|
|
function getDefaultWidthAndHeight(_ref) {
|
|
var {
|
|
width,
|
|
height,
|
|
aspect
|
|
} = _ref;
|
|
var calculatedWidth = width;
|
|
var calculatedHeight = height;
|
|
if (calculatedWidth === undefined && calculatedHeight === undefined) {
|
|
calculatedWidth = '100%';
|
|
calculatedHeight = '100%';
|
|
} else if (calculatedWidth === undefined) {
|
|
calculatedWidth = aspect && aspect > 0 ? undefined : '100%';
|
|
} else if (calculatedHeight === undefined) {
|
|
calculatedHeight = aspect && aspect > 0 ? undefined : '100%';
|
|
}
|
|
return {
|
|
width: calculatedWidth,
|
|
height: calculatedHeight
|
|
};
|
|
} |