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