diff --git a/src/main/resources/assets/styles/_globalStyles.scss b/src/main/resources/assets/styles/_globalStyles.scss index 7f13975ad..c6464296e 100644 --- a/src/main/resources/assets/styles/_globalStyles.scss +++ b/src/main/resources/assets/styles/_globalStyles.scss @@ -254,10 +254,19 @@ table { } } +/* -- End Table -- */ + +/* -- Placeholder -- */ +.edit-placeholder { + border: 3px solid $ssb-dark-4; + padding: 16px; + margin: 16px 0 +} + +/* -- End Placeholder -- */ /* -- Opacity Divider,Fix in komponent library later -- */ .ssb-divider { opacity: 1; } -/* -- End Table -- */ diff --git a/src/main/resources/site/parts/highmap/Highmap.jsx b/src/main/resources/site/parts/highmap/Highmap.jsx index 95dd68656..c3ec29fdb 100644 --- a/src/main/resources/site/parts/highmap/Highmap.jsx +++ b/src/main/resources/site/parts/highmap/Highmap.jsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useEffect } from 'react' import Highcharts from 'highcharts' import HighchartsReact from 'highcharts-react-official' import PropTypes from 'prop-types' @@ -6,10 +6,12 @@ import { Text } from '@statisticsnorway/ssb-component-library' import { Col, Row } from 'react-bootstrap' import { useMediaQuery } from 'react-responsive' -require('highcharts/modules/accessibility')(Highcharts) -require('highcharts/modules/exporting')(Highcharts) -require('highcharts/modules/export-data')(Highcharts) -require('highcharts/modules/map')(Highcharts) +if (typeof Highcharts === 'object') { + require('highcharts/modules/accessibility')(Highcharts) + require('highcharts/modules/exporting')(Highcharts) + require('highcharts/modules/export-data')(Highcharts) + require('highcharts/modules/map')(Highcharts) +} function renderFootnotes(footnotes) { if (footnotes.length) { @@ -27,14 +29,16 @@ function renderFootnotes(footnotes) { } function Highmap(props) { - if (props.language !== 'en') { - Highcharts.setOptions({ - lang: { - decimalPoint: ',', - thousandsSep: ' ', - }, - }) - } + useEffect(() => { + if (props.language !== 'en') { + Highcharts.setOptions({ + lang: { + decimalPoint: ',', + thousandsSep: ' ', + }, + }) + } + }, []) const desktop = useMediaQuery({ minWidth: 992, diff --git a/src/main/resources/site/parts/highmap/highmap.ts b/src/main/resources/site/parts/highmap/highmap.ts index 3fa016d95..9287b7dee 100644 --- a/src/main/resources/site/parts/highmap/highmap.ts +++ b/src/main/resources/site/parts/highmap/highmap.ts @@ -67,6 +67,10 @@ export function get(req: XP.Request): XP.Response { try { const config = getComponent()?.config as HighmapPartConfig const highmapId: string | undefined = config.highmapId + + if (req.mode === 'edit') { + return renderEditPlaceholder() + } return renderPart(req, highmapId) } catch (e) { return renderError(req, 'Error in part', e) @@ -81,6 +85,17 @@ export function preview(req: XP.Request, highmapId: string | undefined): XP.Resp } } +function renderEditPlaceholder(): XP.Response { + return { + contentType: 'text/html', + body: ` +

HIGHMAP

+

Vises ikke i redigeringsmodus. Se den i forhåndsvisning.

+
+ `, + } +} + function renderPart(req: XP.Request, highmapId: string | undefined): XP.Response { const page = getContent() if (!page) throw new Error('No page found') @@ -106,7 +121,7 @@ function renderPart(req: XP.Request, highmapId: string | undefined): XP.Response : null const mapResult: MapResult = mapStream ? JSON.parse(readText(mapStream)) : {} - mapResult.features.forEach((element, index) => { + mapResult.features?.forEach((element, index) => { if (element.properties.name) { // New property, to keep capitalization for display in map mapResult.features[index].properties.capitalName = element.properties.name.toUpperCase()