diff --git a/app/charts/bar/rendering-utils.ts b/app/charts/bar/rendering-utils.ts index 07f7655dd..368a92799 100644 --- a/app/charts/bar/rendering-utils.ts +++ b/app/charts/bar/rendering-utils.ts @@ -1,4 +1,3 @@ -import { getContrastingColor } from "@uiw/react-color"; import { select, Selection } from "d3-selection"; import { Series } from "d3-shape"; import { useCallback } from "react"; @@ -18,6 +17,7 @@ import { import { getChartConfig, useDefinitiveFilters } from "@/config-utils"; import { useConfiguratorState } from "@/configurator/configurator-state"; import { Observation } from "@/domain/data"; +import { getContrastingColor } from "@/utils/color-utils"; import { getTextWidth } from "@/utils/get-text-width"; export type RenderBarDatum = { diff --git a/app/charts/column/rendering-utils.ts b/app/charts/column/rendering-utils.ts index e5d899649..eb57b3f1f 100644 --- a/app/charts/column/rendering-utils.ts +++ b/app/charts/column/rendering-utils.ts @@ -1,4 +1,3 @@ -import { getContrastingColor } from "@uiw/react-color"; import { select, Selection } from "d3-selection"; import { Series } from "d3-shape"; import { useCallback } from "react"; @@ -18,6 +17,7 @@ import { import { getChartConfig, useDefinitiveFilters } from "@/config-utils"; import { useConfiguratorState } from "@/configurator/configurator-state"; import { Observation } from "@/domain/data"; +import { getContrastingColor } from "@/utils/color-utils"; export type RenderColumnDatum = { key: string; diff --git a/app/charts/map/map.tsx b/app/charts/map/map.tsx index 44b66e020..78545bfc6 100644 --- a/app/charts/map/map.tsx +++ b/app/charts/map/map.tsx @@ -6,7 +6,6 @@ import { import { supported } from "@mapbox/mapbox-gl-supported"; import { Button, Theme } from "@mui/material"; import { makeStyles } from "@mui/styles"; -import { hexToRgba } from "@uiw/react-color"; import { geoArea } from "d3-geo"; import debounce from "lodash/debounce"; import orderBy from "lodash/orderBy"; @@ -59,6 +58,7 @@ import { import { GeoFeature, GeoPoint } from "@/domain/data"; import { Icon, IconName } from "@/icons"; import { useLocale } from "@/locales/use-locale"; +import { hexToRgba } from "@/utils/color-utils"; import { useEvent } from "@/utils/use-event"; import { DISABLE_SCREENSHOT_ATTR } from "@/utils/use-screenshot"; diff --git a/app/components/chart-with-filters.tsx b/app/components/chart-with-filters.tsx index 0b4407e0c..eb08b1a37 100644 --- a/app/components/chart-with-filters.tsx +++ b/app/components/chart-with-filters.tsx @@ -13,70 +13,37 @@ import { } from "@/config-types"; const ChartAreasVisualization = dynamic( - import("@/charts/area/chart-area").then( - (mod) => mod.ChartAreasVisualization, - () => null as never - ) + () => import("@/charts/area/chart-area").then((mod) => ({ default: mod.ChartAreasVisualization })) ); const ChartColumnsVisualization = dynamic( - import("@/charts/column/chart-column").then( - (mod) => mod.ChartColumnsVisualization, - () => null as never - ) + () => import("@/charts/column/chart-column").then((mod) => ({ default: mod.ChartColumnsVisualization })) ); const ChartBarsVisualization = dynamic( - import("@/charts/bar/chart-bar").then( - (mod) => mod.ChartBarsVisualization, - () => null as never - ) + () => import("@/charts/bar/chart-bar").then((mod) => ({ default: mod.ChartBarsVisualization })) ); const ChartComboLineSingleVisualization = dynamic( - import("@/charts/combo/chart-combo-line-single").then( - (mod) => mod.ChartComboLineSingleVisualization, - () => null as never - ) + () => import("@/charts/combo/chart-combo-line-single").then((mod) => ({ default: mod.ChartComboLineSingleVisualization })) ); const ChartComboLineDualVisualization = dynamic( - import("@/charts/combo/chart-combo-line-dual").then( - (mod) => mod.ChartComboLineDualVisualization, - () => null as never - ) + () => import("@/charts/combo/chart-combo-line-dual").then((mod) => ({ default: mod.ChartComboLineDualVisualization })) ); const ChartComboLineColumnVisualization = dynamic( - import("@/charts/combo/chart-combo-line-column").then( - (mod) => mod.ChartComboLineColumnVisualization, - () => null as never - ) + () => import("@/charts/combo/chart-combo-line-column").then((mod) => ({ default: mod.ChartComboLineColumnVisualization })) ); const ChartLinesVisualization = dynamic( - import("@/charts/line/chart-lines").then( - (mod) => mod.ChartLinesVisualization, - () => null as never - ) + () => import("@/charts/line/chart-lines").then((mod) => ({ default: mod.ChartLinesVisualization })) ); const ChartMapVisualization = dynamic( - import("@/charts/map/chart-map").then( - (mod) => mod.ChartMapVisualization, - () => null as never - ) + () => import("@/charts/map/chart-map").then((mod) => ({ default: mod.ChartMapVisualization })) ); const ChartPieVisualization = dynamic( - import("@/charts/pie/chart-pie").then( - (mod) => mod.ChartPieVisualization, - () => null as never - ) + () => import("@/charts/pie/chart-pie").then((mod) => ({ default: mod.ChartPieVisualization })) ); const ChartScatterplotVisualization = dynamic( - import("@/charts/scatterplot/chart-scatterplot").then( - (mod) => mod.ChartScatterplotVisualization, - () => null as never - ) + () => import("@/charts/scatterplot/chart-scatterplot").then((mod) => ({ default: mod.ChartScatterplotVisualization })) ); const ChartTableVisualization = dynamic( - import("@/charts/table/chart-table").then( - (mod) => mod.ChartTableVisualization, - () => null as never - ) + () => import("@/charts/table/chart-table").then((mod) => ({ default: mod.ChartTableVisualization })) ); type GenericChartProps = { diff --git a/app/components/text-block.tsx b/app/components/text-block.tsx index 0e8eddd43..b90f32179 100644 --- a/app/components/text-block.tsx +++ b/app/components/text-block.tsx @@ -3,7 +3,6 @@ import { t } from "@lingui/macro"; import { Theme } from "@mui/material"; import { makeStyles } from "@mui/styles"; import clsx from "clsx"; -import { selectAll } from "d3-selection"; import isEqual from "lodash/isEqual"; import { ComponentProps, @@ -186,39 +185,39 @@ export const useSyncTextBlockHeight = () => { return; } - selectAll(`.${TEXT_BLOCK_WRAPPER_CLASS}`).each( - function () { - const wrapperEl = this; - const contentEl = wrapperEl.querySelector( - `.${TEXT_BLOCK_CONTENT_CLASS}` - ); + const elements = document.querySelectorAll( + `.${TEXT_BLOCK_WRAPPER_CLASS}` + ); + elements.forEach((wrapperEl) => { + const contentEl = wrapperEl.querySelector( + `.${TEXT_BLOCK_CONTENT_CLASS}` + ); - if (!contentEl) { - return; - } + if (!contentEl) { + return; + } - const key = wrapperEl.id; - const h = Math.ceil(contentEl.clientHeight / ROW_HEIGHT) || 1; - - const newLayouts = Object.fromEntries( - Object.entries(layout.layouts).map(([bp, layouts]) => [ - bp, - layouts.map((b) => { - return b.i === key ? { ...b, h, minH: h } : b; - }), - ]) - ); - - if (!isEqual(newLayouts, layout.layouts)) { - dispatch({ - type: "LAYOUT_CHANGED", - value: { - ...layout, - layouts: newLayouts, - }, - }); - } + const key = wrapperEl.id; + const h = Math.ceil(contentEl.clientHeight / ROW_HEIGHT) || 1; + + const newLayouts = Object.fromEntries( + Object.entries(layout.layouts).map(([bp, layouts]) => [ + bp, + layouts.map((b) => { + return b.i === key ? { ...b, h, minH: h } : b; + }), + ]) + ); + + if (!isEqual(newLayouts, layout.layouts)) { + dispatch({ + type: "LAYOUT_CHANGED", + value: { + ...layout, + layouts: newLayouts, + }, + }); } - ); + }); }, [dispatch, layout, isFreeCanvas]); }; diff --git a/app/configurator/components/chart-controls/color-picker.tsx b/app/configurator/components/chart-controls/color-picker.tsx index 7d69ebc1b..96f16e1ac 100644 --- a/app/configurator/components/chart-controls/color-picker.tsx +++ b/app/configurator/components/chart-controls/color-picker.tsx @@ -1,7 +1,6 @@ import { Trans } from "@lingui/macro"; import { Box, Button, Popover, styled } from "@mui/material"; import { makeStyles } from "@mui/styles"; -import { hexToHsva, hsvaToHex } from "@uiw/react-color"; import { color as d3Color } from "d3-color"; import dynamic from "next/dynamic"; import { MouseEventHandler, useCallback, useMemo, useRef } from "react"; @@ -11,11 +10,11 @@ import { VisuallyHidden } from "@/components/visually-hidden"; import { Icon } from "@/icons"; import { ColorItem } from "@/palettes"; import { createColorId } from "@/utils/color-palette-utils"; +import { hexToHsva, hsvaToHex } from "@/utils/color-utils"; -//have to import dynamically to avoid @uiw/react-color dependency issues with the server const CustomColorPicker = dynamic( () => - import("../../components/color-picker").then( + import("@/configurator/components/color-picker").then( (mod) => mod.CustomColorPicker ), { ssr: false } diff --git a/app/configurator/components/color-picker.tsx b/app/configurator/components/color-picker.tsx index 848d64837..74de57594 100644 --- a/app/configurator/components/color-picker.tsx +++ b/app/configurator/components/color-picker.tsx @@ -1,12 +1,5 @@ import { Input } from "@mui/material"; import { makeStyles } from "@mui/styles"; -import { - hexToHsva, - HsvaColor, - hsvaToHex, - Hue, - Saturation, -} from "@uiw/react-color"; import dynamic from "next/dynamic"; import { ChangeEvent, useCallback, useEffect, useState } from "react"; @@ -14,12 +7,23 @@ import { Flex } from "@/components/flex"; import { Swatch } from "@/configurator/components/chart-controls/color-picker"; import { ColorItem } from "@/palettes"; import { createColorId } from "@/utils/color-palette-utils"; +import { hexToHsva, HsvaColor, hsvaToHex } from "@/utils/color-utils"; const ChromePicker = dynamic( () => import("@uiw/react-color").then((mod) => ({ default: mod.Chrome })), { ssr: false } ); +const Hue = dynamic( + () => import("@uiw/react-color").then((mod) => ({ default: mod.Hue })), + { ssr: false } +); + +const Saturation = dynamic( + () => import("@uiw/react-color").then((mod) => ({ default: mod.Saturation })), + { ssr: false } +); + const useColorPickerStyles = makeStyles({ swatches: { display: "grid", diff --git a/app/package.json b/app/package.json index d17813812..8baec41a5 100644 --- a/app/package.json +++ b/app/package.json @@ -46,6 +46,7 @@ "@mui/utils": "^5.17.1", "@next/bundle-analyzer": "^11.0.1", "@next/mdx": "^11.0.1", + "@open-iframe-resizer/core": "1.6.0", "@preconstruct/next": "^3.0.1", "@prisma/client": "^4.10.1", "@rdfjs/data-model": "^2.0.2", diff --git a/app/pages/embed/[chartId].tsx b/app/pages/embed/[chartId].tsx index 832ba2ed4..b3901c2e0 100644 --- a/app/pages/embed/[chartId].tsx +++ b/app/pages/embed/[chartId].tsx @@ -3,7 +3,7 @@ import "iframe-resizer/js/iframeResizer.contentWindow.js"; import { GetServerSideProps } from "next"; import ErrorPage from "next/error"; import Head from "next/head"; -import Script from "next/script"; +import "@open-iframe-resizer/core"; import { ChartPublished } from "@/components/chart-published"; import { useEmbedQueryParams } from "@/components/embed-params"; @@ -66,13 +66,9 @@ const EmbedPage = (props: PageProps) => { -