source: node_modules/recharts/lib/component/responsiveContainerUtils.js

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

Added visualizations

  • Property mode set to 100644
File size: 4.1 KB
RevLine 
[a762898]1"use strict";
2
3Object.defineProperty(exports, "__esModule", {
4 value: true
5});
6exports.defaultResponsiveContainerProps = exports.calculateChartDimensions = void 0;
7exports.getDefaultWidthAndHeight = getDefaultWidthAndHeight;
8exports.getInnerDivStyle = void 0;
9var _DataUtils = require("../util/DataUtils");
10var 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};
20var 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};
54exports.calculateChartDimensions = calculateChartDimensions;
55var bothOverflow = {
56 width: 0,
57 height: 0,
58 overflow: 'visible'
59};
60var overflowX = {
61 width: 0,
62 overflowX: 'visible'
63};
64var overflowY = {
65 height: 0,
66 overflowY: 'visible'
67};
68var 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 */
84var 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};
102exports.getInnerDivStyle = getInnerDivStyle;
103function 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}
Note: See TracBrowser for help on using the repository browser.