Skip to content

Commit 4987686

Browse files
bprusinowskibprusinowski
authored
Merge pull request #2494 from visualize-admin/fix/iframe-resize
fix: iFrame resize
2 parents 468c44d + decd36c commit 4987686

File tree

13 files changed

+233
-194
lines changed

13 files changed

+233
-194
lines changed

‎app/charts/bar/rendering-utils.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { getContrastingColor } from "@uiw/react-color";
21
import { select, Selection } from "d3-selection";
32
import { Series } from "d3-shape";
43
import { useCallback } from "react";
@@ -18,6 +17,7 @@ import {
1817
import { getChartConfig, useDefinitiveFilters } from "@/config-utils";
1918
import { useConfiguratorState } from "@/configurator/configurator-state";
2019
import { Observation } from "@/domain/data";
20+
import { getContrastingColor } from "@/utils/color-utils";
2121
import { getTextWidth } from "@/utils/get-text-width";
2222

2323
export type RenderBarDatum = {

‎app/charts/column/rendering-utils.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { getContrastingColor } from "@uiw/react-color";
21
import { select, Selection } from "d3-selection";
32
import { Series } from "d3-shape";
43
import { useCallback } from "react";
@@ -18,6 +17,7 @@ import {
1817
import { getChartConfig, useDefinitiveFilters } from "@/config-utils";
1918
import { useConfiguratorState } from "@/configurator/configurator-state";
2019
import { Observation } from "@/domain/data";
20+
import { getContrastingColor } from "@/utils/color-utils";
2121

2222
export type RenderColumnDatum = {
2323
key: string;

‎app/charts/map/map.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
import { supported } from "@mapbox/mapbox-gl-supported";
77
import { Button, Theme } from "@mui/material";
88
import { makeStyles } from "@mui/styles";
9-
import { hexToRgba } from "@uiw/react-color";
109
import { geoArea } from "d3-geo";
1110
import debounce from "lodash/debounce";
1211
import orderBy from "lodash/orderBy";
@@ -59,6 +58,7 @@ import {
5958
import { GeoFeature, GeoPoint } from "@/domain/data";
6059
import { Icon, IconName } from "@/icons";
6160
import { useLocale } from "@/locales/use-locale";
61+
import { hexToRgba } from "@/utils/color-utils";
6262
import { useEvent } from "@/utils/use-event";
6363
import { DISABLE_SCREENSHOT_ATTR } from "@/utils/use-screenshot";
6464

‎app/components/chart-with-filters.tsx‎

Lines changed: 11 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -13,70 +13,37 @@ import {
1313
} from "@/config-types";
1414

1515
const ChartAreasVisualization = dynamic(
16-
import("@/charts/area/chart-area").then(
17-
(mod) => mod.ChartAreasVisualization,
18-
() => null as never
19-
)
16+
() => import("@/charts/area/chart-area").then((mod) => ({ default: mod.ChartAreasVisualization }))
2017
);
2118
const ChartColumnsVisualization = dynamic(
22-
import("@/charts/column/chart-column").then(
23-
(mod) => mod.ChartColumnsVisualization,
24-
() => null as never
25-
)
19+
() => import("@/charts/column/chart-column").then((mod) => ({ default: mod.ChartColumnsVisualization }))
2620
);
2721
const ChartBarsVisualization = dynamic(
28-
import("@/charts/bar/chart-bar").then(
29-
(mod) => mod.ChartBarsVisualization,
30-
() => null as never
31-
)
22+
() => import("@/charts/bar/chart-bar").then((mod) => ({ default: mod.ChartBarsVisualization }))
3223
);
3324
const ChartComboLineSingleVisualization = dynamic(
34-
import("@/charts/combo/chart-combo-line-single").then(
35-
(mod) => mod.ChartComboLineSingleVisualization,
36-
() => null as never
37-
)
25+
() => import("@/charts/combo/chart-combo-line-single").then((mod) => ({ default: mod.ChartComboLineSingleVisualization }))
3826
);
3927
const ChartComboLineDualVisualization = dynamic(
40-
import("@/charts/combo/chart-combo-line-dual").then(
41-
(mod) => mod.ChartComboLineDualVisualization,
42-
() => null as never
43-
)
28+
() => import("@/charts/combo/chart-combo-line-dual").then((mod) => ({ default: mod.ChartComboLineDualVisualization }))
4429
);
4530
const ChartComboLineColumnVisualization = dynamic(
46-
import("@/charts/combo/chart-combo-line-column").then(
47-
(mod) => mod.ChartComboLineColumnVisualization,
48-
() => null as never
49-
)
31+
() => import("@/charts/combo/chart-combo-line-column").then((mod) => ({ default: mod.ChartComboLineColumnVisualization }))
5032
);
5133
const ChartLinesVisualization = dynamic(
52-
import("@/charts/line/chart-lines").then(
53-
(mod) => mod.ChartLinesVisualization,
54-
() => null as never
55-
)
34+
() => import("@/charts/line/chart-lines").then((mod) => ({ default: mod.ChartLinesVisualization }))
5635
);
5736
const ChartMapVisualization = dynamic(
58-
import("@/charts/map/chart-map").then(
59-
(mod) => mod.ChartMapVisualization,
60-
() => null as never
61-
)
37+
() => import("@/charts/map/chart-map").then((mod) => ({ default: mod.ChartMapVisualization }))
6238
);
6339
const ChartPieVisualization = dynamic(
64-
import("@/charts/pie/chart-pie").then(
65-
(mod) => mod.ChartPieVisualization,
66-
() => null as never
67-
)
40+
() => import("@/charts/pie/chart-pie").then((mod) => ({ default: mod.ChartPieVisualization }))
6841
);
6942
const ChartScatterplotVisualization = dynamic(
70-
import("@/charts/scatterplot/chart-scatterplot").then(
71-
(mod) => mod.ChartScatterplotVisualization,
72-
() => null as never
73-
)
43+
() => import("@/charts/scatterplot/chart-scatterplot").then((mod) => ({ default: mod.ChartScatterplotVisualization }))
7444
);
7545
const ChartTableVisualization = dynamic(
76-
import("@/charts/table/chart-table").then(
77-
(mod) => mod.ChartTableVisualization,
78-
() => null as never
79-
)
46+
() => import("@/charts/table/chart-table").then((mod) => ({ default: mod.ChartTableVisualization }))
8047
);
8148

8249
type GenericChartProps = {

‎app/components/text-block.tsx‎

Lines changed: 31 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { t } from "@lingui/macro";
33
import { Theme } from "@mui/material";
44
import { makeStyles } from "@mui/styles";
55
import clsx from "clsx";
6-
import { selectAll } from "d3-selection";
76
import isEqual from "lodash/isEqual";
87
import {
98
ComponentProps,
@@ -186,39 +185,39 @@ export const useSyncTextBlockHeight = () => {
186185
return;
187186
}
188187

189-
selectAll<HTMLDivElement, unknown>(`.${TEXT_BLOCK_WRAPPER_CLASS}`).each(
190-
function () {
191-
const wrapperEl = this;
192-
const contentEl = wrapperEl.querySelector<HTMLDivElement>(
193-
`.${TEXT_BLOCK_CONTENT_CLASS}`
194-
);
188+
const elements = document.querySelectorAll<HTMLDivElement>(
189+
`.${TEXT_BLOCK_WRAPPER_CLASS}`
190+
);
191+
elements.forEach((wrapperEl) => {
192+
const contentEl = wrapperEl.querySelector<HTMLDivElement>(
193+
`.${TEXT_BLOCK_CONTENT_CLASS}`
194+
);
195195

196-
if (!contentEl) {
197-
return;
198-
}
196+
if (!contentEl) {
197+
return;
198+
}
199199

200-
const key = wrapperEl.id;
201-
const h = Math.ceil(contentEl.clientHeight / ROW_HEIGHT) || 1;
202-
203-
const newLayouts = Object.fromEntries(
204-
Object.entries(layout.layouts).map(([bp, layouts]) => [
205-
bp,
206-
layouts.map((b) => {
207-
return b.i === key ? { ...b, h, minH: h } : b;
208-
}),
209-
])
210-
);
211-
212-
if (!isEqual(newLayouts, layout.layouts)) {
213-
dispatch({
214-
type: "LAYOUT_CHANGED",
215-
value: {
216-
...layout,
217-
layouts: newLayouts,
218-
},
219-
});
220-
}
200+
const key = wrapperEl.id;
201+
const h = Math.ceil(contentEl.clientHeight / ROW_HEIGHT) || 1;
202+
203+
const newLayouts = Object.fromEntries(
204+
Object.entries(layout.layouts).map(([bp, layouts]) => [
205+
bp,
206+
layouts.map((b) => {
207+
return b.i === key ? { ...b, h, minH: h } : b;
208+
}),
209+
])
210+
);
211+
212+
if (!isEqual(newLayouts, layout.layouts)) {
213+
dispatch({
214+
type: "LAYOUT_CHANGED",
215+
value: {
216+
...layout,
217+
layouts: newLayouts,
218+
},
219+
});
221220
}
222-
);
221+
});
223222
}, [dispatch, layout, isFreeCanvas]);
224223
};

‎app/configurator/components/chart-controls/color-picker.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { Trans } from "@lingui/macro";
22
import { Box, Button, Popover, styled } from "@mui/material";
33
import { makeStyles } from "@mui/styles";
4-
import { hexToHsva, hsvaToHex } from "@uiw/react-color";
54
import { color as d3Color } from "d3-color";
65
import dynamic from "next/dynamic";
76
import { MouseEventHandler, useCallback, useMemo, useRef } from "react";
@@ -11,11 +10,11 @@ import { VisuallyHidden } from "@/components/visually-hidden";
1110
import { Icon } from "@/icons";
1211
import { ColorItem } from "@/palettes";
1312
import { createColorId } from "@/utils/color-palette-utils";
13+
import { hexToHsva, hsvaToHex } from "@/utils/color-utils";
1414

15-
//have to import dynamically to avoid @uiw/react-color dependency issues with the server
1615
const CustomColorPicker = dynamic(
1716
() =>
18-
import("../../components/color-picker").then(
17+
import("@/configurator/components/color-picker").then(
1918
(mod) => mod.CustomColorPicker
2019
),
2120
{ ssr: false }

‎app/configurator/components/color-picker.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,29 @@
11
import { Input } from "@mui/material";
22
import { makeStyles } from "@mui/styles";
3-
import {
4-
hexToHsva,
5-
HsvaColor,
6-
hsvaToHex,
7-
Hue,
8-
Saturation,
9-
} from "@uiw/react-color";
103
import dynamic from "next/dynamic";
114
import { ChangeEvent, useCallback, useEffect, useState } from "react";
125

136
import { Flex } from "@/components/flex";
147
import { Swatch } from "@/configurator/components/chart-controls/color-picker";
158
import { ColorItem } from "@/palettes";
169
import { createColorId } from "@/utils/color-palette-utils";
10+
import { hexToHsva, HsvaColor, hsvaToHex } from "@/utils/color-utils";
1711

1812
const ChromePicker = dynamic(
1913
() => import("@uiw/react-color").then((mod) => ({ default: mod.Chrome })),
2014
{ ssr: false }
2115
);
2216

17+
const Hue = dynamic(
18+
() => import("@uiw/react-color").then((mod) => ({ default: mod.Hue })),
19+
{ ssr: false }
20+
);
21+
22+
const Saturation = dynamic(
23+
() => import("@uiw/react-color").then((mod) => ({ default: mod.Saturation })),
24+
{ ssr: false }
25+
);
26+
2327
const useColorPickerStyles = makeStyles({
2428
swatches: {
2529
display: "grid",

‎app/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@
4646
"@mui/utils": "^5.17.1",
4747
"@next/bundle-analyzer": "^11.0.1",
4848
"@next/mdx": "^11.0.1",
49+
"@open-iframe-resizer/core": "1.6.0",
4950
"@preconstruct/next": "^3.0.1",
5051
"@prisma/client": "^4.10.1",
5152
"@rdfjs/data-model": "^2.0.2",

‎app/pages/embed/[chartId].tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import "iframe-resizer/js/iframeResizer.contentWindow.js";
33
import { GetServerSideProps } from "next";
44
import ErrorPage from "next/error";
55
import Head from "next/head";
6-
import Script from "next/script";
6+
import "@open-iframe-resizer/core";
77

88
import { ChartPublished } from "@/components/chart-published";
99
import { useEmbedQueryParams } from "@/components/embed-params";
@@ -66,13 +66,9 @@ const EmbedPage = (props: PageProps) => {
6666
<Head>
6767
<meta
6868
httpEquiv="Content-Security-Policy"
69-
content="default-src 'self' 'unsafe-inline'; script-src 'unsafe-inline' 'self' https://cdn.jsdelivr.net/npm/@open-iframe-resizer/; style-src 'self' 'unsafe-inline';"
69+
content="default-src 'self' 'unsafe-inline' data:; script-src 'unsafe-inline' 'unsafe-eval' 'self'; style-src 'self' 'unsafe-inline';"
7070
/>
7171
</Head>
72-
<Script
73-
type="module"
74-
src="https://cdn.jsdelivr.net/npm/@open-iframe-resizer/[email protected]/dist/index.js"
75-
/>
7672
<ConfiguratorStateProvider
7773
chartId="published"
7874
initialState={{ ...state, state: "PUBLISHED" }}

0 commit comments

Comments
 (0)