source: node_modules/recharts/es6/component/responsiveContainerUtils.js@ a762898

Last change on this file since a762898 was a762898, checked in by istevanoska <ilinastevanoska@…>, 5 months ago

Added visualizations

  • Property mode set to 100644
File size: 3.6 KB
Line 
1import { isPercent } from '../util/DataUtils';
2export var defaultResponsiveContainerProps = {
3 width: '100%',
4 height: '100%',
5 debounce: 0,
6 minWidth: 0,
7 initialDimension: {
8 width: -1,
9 height: -1
10 }
11};
12export 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};
46var bothOverflow = {
47 width: 0,
48 height: 0,
49 overflow: 'visible'
50};
51var overflowX = {
52 width: 0,
53 overflowX: 'visible'
54};
55var overflowY = {
56 height: 0,
57 overflowY: 'visible'
58};
59var 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 */
75export 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};
93export 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}
Note: See TracBrowser for help on using the repository browser.