| 1 | "use strict";
|
|---|
| 2 |
|
|---|
| 3 | Object.defineProperty(exports, "__esModule", {
|
|---|
| 4 | value: true
|
|---|
| 5 | });
|
|---|
| 6 | exports.defaultResponsiveContainerProps = exports.calculateChartDimensions = void 0;
|
|---|
| 7 | exports.getDefaultWidthAndHeight = getDefaultWidthAndHeight;
|
|---|
| 8 | exports.getInnerDivStyle = void 0;
|
|---|
| 9 | var _DataUtils = require("../util/DataUtils");
|
|---|
| 10 | var defaultResponsiveContainerProps = exports.defaultResponsiveContainerProps = {
|
|---|
| 11 | width: '100%',
|
|---|
| 12 | height: '100%',
|
|---|
| 13 | debounce: 0,
|
|---|
| 14 | minWidth: 0,
|
|---|
| 15 | initialDimension: {
|
|---|
| 16 | width: -1,
|
|---|
| 17 | height: -1
|
|---|
| 18 | }
|
|---|
| 19 | };
|
|---|
| 20 | var calculateChartDimensions = (containerWidth, containerHeight, props) => {
|
|---|
| 21 | var {
|
|---|
| 22 | width = defaultResponsiveContainerProps.width,
|
|---|
| 23 | height = defaultResponsiveContainerProps.height,
|
|---|
| 24 | aspect,
|
|---|
| 25 | maxHeight
|
|---|
| 26 | } = props;
|
|---|
| 27 |
|
|---|
| 28 | /*
|
|---|
| 29 | * The containerWidth and containerHeight are already percentage based because it's set as that percentage in CSS.
|
|---|
| 30 | * Means we don't have to calculate percentages here.
|
|---|
| 31 | */
|
|---|
| 32 | var calculatedWidth = (0, _DataUtils.isPercent)(width) ? containerWidth : Number(width);
|
|---|
| 33 | var calculatedHeight = (0, _DataUtils.isPercent)(height) ? containerHeight : Number(height);
|
|---|
| 34 | if (aspect && aspect > 0) {
|
|---|
| 35 | // Preserve the desired aspect ratio
|
|---|
| 36 | if (calculatedWidth) {
|
|---|
| 37 | // Will default to using width for aspect ratio
|
|---|
| 38 | calculatedHeight = calculatedWidth / aspect;
|
|---|
| 39 | } else if (calculatedHeight) {
|
|---|
| 40 | // But we should also take height into consideration
|
|---|
| 41 | calculatedWidth = calculatedHeight * aspect;
|
|---|
| 42 | }
|
|---|
| 43 |
|
|---|
| 44 | // if maxHeight is set, overwrite if calculatedHeight is greater than maxHeight
|
|---|
| 45 | if (maxHeight && calculatedHeight != null && calculatedHeight > maxHeight) {
|
|---|
| 46 | calculatedHeight = maxHeight;
|
|---|
| 47 | }
|
|---|
| 48 | }
|
|---|
| 49 | return {
|
|---|
| 50 | calculatedWidth,
|
|---|
| 51 | calculatedHeight
|
|---|
| 52 | };
|
|---|
| 53 | };
|
|---|
| 54 | exports.calculateChartDimensions = calculateChartDimensions;
|
|---|
| 55 | var bothOverflow = {
|
|---|
| 56 | width: 0,
|
|---|
| 57 | height: 0,
|
|---|
| 58 | overflow: 'visible'
|
|---|
| 59 | };
|
|---|
| 60 | var overflowX = {
|
|---|
| 61 | width: 0,
|
|---|
| 62 | overflowX: 'visible'
|
|---|
| 63 | };
|
|---|
| 64 | var overflowY = {
|
|---|
| 65 | height: 0,
|
|---|
| 66 | overflowY: 'visible'
|
|---|
| 67 | };
|
|---|
| 68 | var noStyle = {};
|
|---|
| 69 |
|
|---|
| 70 | /**
|
|---|
| 71 | * This zero-size, overflow-visible is required to allow the chart to shrink.
|
|---|
| 72 | * Without it, the chart itself will fill the ResponsiveContainer, and while it allows the chart to grow,
|
|---|
| 73 | * it would always keep the container at the size of the chart,
|
|---|
| 74 | * and ResizeObserver would never fire.
|
|---|
| 75 | * With this zero-size element, the chart itself never actually fills the container,
|
|---|
| 76 | * it just so happens that it is visible because it overflows.
|
|---|
| 77 | * I learned this trick from the `react-virtualized` library: https://github.com/bvaughn/react-virtualized-auto-sizer/blob/master/src/AutoSizer.ts
|
|---|
| 78 | * See https://github.com/recharts/recharts/issues/172 and also https://github.com/bvaughn/react-virtualized/issues/68
|
|---|
| 79 | *
|
|---|
| 80 | * Also, we don't need to apply the zero-size style if the dimension is a fixed number (or undefined),
|
|---|
| 81 | * because in that case the chart can't shrink in that dimension anyway.
|
|---|
| 82 | * This fixes defining the dimensions using aspect ratio: https://github.com/recharts/recharts/issues/6245
|
|---|
| 83 | */
|
|---|
| 84 | var getInnerDivStyle = props => {
|
|---|
| 85 | var {
|
|---|
| 86 | width,
|
|---|
| 87 | height
|
|---|
| 88 | } = props;
|
|---|
| 89 | var isWidthPercent = (0, _DataUtils.isPercent)(width);
|
|---|
| 90 | var isHeightPercent = (0, _DataUtils.isPercent)(height);
|
|---|
| 91 | if (isWidthPercent && isHeightPercent) {
|
|---|
| 92 | return bothOverflow;
|
|---|
| 93 | }
|
|---|
| 94 | if (isWidthPercent) {
|
|---|
| 95 | return overflowX;
|
|---|
| 96 | }
|
|---|
| 97 | if (isHeightPercent) {
|
|---|
| 98 | return overflowY;
|
|---|
| 99 | }
|
|---|
| 100 | return noStyle;
|
|---|
| 101 | };
|
|---|
| 102 | exports.getInnerDivStyle = getInnerDivStyle;
|
|---|
| 103 | function getDefaultWidthAndHeight(_ref) {
|
|---|
| 104 | var {
|
|---|
| 105 | width,
|
|---|
| 106 | height,
|
|---|
| 107 | aspect
|
|---|
| 108 | } = _ref;
|
|---|
| 109 | var calculatedWidth = width;
|
|---|
| 110 | var calculatedHeight = height;
|
|---|
| 111 | if (calculatedWidth === undefined && calculatedHeight === undefined) {
|
|---|
| 112 | calculatedWidth = defaultResponsiveContainerProps.width;
|
|---|
| 113 | calculatedHeight = defaultResponsiveContainerProps.height;
|
|---|
| 114 | } else if (calculatedWidth === undefined) {
|
|---|
| 115 | calculatedWidth = aspect && aspect > 0 ? undefined : defaultResponsiveContainerProps.width;
|
|---|
| 116 | } else if (calculatedHeight === undefined) {
|
|---|
| 117 | calculatedHeight = aspect && aspect > 0 ? undefined : defaultResponsiveContainerProps.height;
|
|---|
| 118 | }
|
|---|
| 119 | return {
|
|---|
| 120 | width: calculatedWidth,
|
|---|
| 121 | height: calculatedHeight
|
|---|
| 122 | };
|
|---|
| 123 | } |
|---|