fix(charts): fix error when module was resolved as CommonJS, improve SSR (#5301)

Author: MarcusNotheis

packages/charts/src/components/BarChart/Placeholder.tsx

@@ -1,9 +1,10 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
 import React from 'react';
-import ContentLoader from 'react-content-loader/dist/react-content-loader.es.js';
+import ContentLoader from 'react-content-loader';
 
 export const BarChartPlaceholder = () => {
   return (
+    // @ts-expect-error: TypeScript is going crazy
     <ContentLoader
       viewBox="0 0 165 145"
       preserveAspectRatio="xMidYMid meet"

packages/charts/src/components/BulletChart/Placeholder.tsx

@@ -1,6 +1,6 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
 import React from 'react';
-import ContentLoader from 'react-content-loader/dist/react-content-loader.es.js';
+import ContentLoader from 'react-content-loader';
 import type { IChartMeasure } from '../../interfaces/IChartMeasure.js';
 
 const barContentVertical = (
@@ -48,6 +48,7 @@ export const BulletChartPlaceholder = ({ layout, measures }: BulletChartPlacehol
   const distinctElements = new Set(measures.map((item) => item.type));
 
   return (
+    // @ts-expect-error: TypeScript is going crazy
     <ContentLoader
       viewBox="0 0 165 145"
       preserveAspectRatio="xMidYMid meet"

packages/charts/src/components/ColumnChart/Placeholder.tsx

@@ -1,9 +1,10 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
 import React from 'react';
-import ContentLoader from 'react-content-loader/dist/react-content-loader.es.js';
+import ContentLoader from 'react-content-loader';
 
 export const ColumnChartPlaceholder = (props) => {
   return (
+    // @ts-expect-error: TypeScript is going crazy
     <ContentLoader
       viewBox="0 0 165 145"
       preserveAspectRatio="xMidYMid meet"

packages/charts/src/components/ColumnChartWithTrend/Placeholder.tsx

@@ -1,9 +1,10 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
 import React from 'react';
-import ContentLoader from 'react-content-loader/dist/react-content-loader.es.js';
+import ContentLoader from 'react-content-loader';
 
 export const ColumnChartWithTrendPlaceholder = (props) => {
   return (
+    // @ts-expect-error: TypeScript is going crazy
     <ContentLoader
       viewBox="0 0 165 145"
       preserveAspectRatio="xMidYMid meet"

packages/charts/src/components/ComposedChart/Placeholder.tsx

@@ -1,6 +1,6 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
 import React from 'react';
-import ContentLoader from 'react-content-loader/dist/react-content-loader.es.js';
+import ContentLoader from 'react-content-loader';
 import type { IChartMeasure } from '../../interfaces/IChartMeasure.js';
 
 const barContentVertical = (
@@ -54,6 +54,7 @@ export const ComposedChartPlaceholder = ({ layout, measures }: ComposedChartPlac
   const distinctElements = new Set(measures.map((item) => item.type));
 
   return (
+    // @ts-expect-error: TypeScript is going crazy
     <ContentLoader
       viewBox="0 0 165 145"
       preserveAspectRatio="xMidYMid meet"

packages/charts/src/components/LineChart/Placeholder.tsx

@@ -1,9 +1,10 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
 import React from 'react';
-import ContentLoader from 'react-content-loader/dist/react-content-loader.es.js';
+import ContentLoader from 'react-content-loader';
 
 export const LineChartPlaceholder = (props) => {
   return (
+    // @ts-expect-error: TypeScript is going crazy
     <ContentLoader
       viewBox="0 0 165 145"
       preserveAspectRatio="xMidYMid meet"

packages/charts/src/components/PieChart/Placeholder.tsx

@@ -1,9 +1,10 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
 import React from 'react';
-import ContentLoader from 'react-content-loader/dist/react-content-loader.es.js';
+import ContentLoader from 'react-content-loader';
 
 export const PieChartPlaceholder = (props) => {
   return (
+    // @ts-expect-error: TypeScript is going crazy
     <ContentLoader
       viewBox="0 0 165 145"
       preserveAspectRatio="xMidYMid meet"

packages/charts/src/components/ScatterChart/Placeholder.tsx

@@ -1,9 +1,10 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
 import React from 'react';
-import ContentLoader from 'react-content-loader/dist/react-content-loader.es.js';
+import ContentLoader from 'react-content-loader';
 
 export const ScatterChartPlaceholder = (props) => {
   return (
+    // @ts-expect-error: TypeScript is going crazy
     <ContentLoader
       viewBox="0 0 165 145"
       preserveAspectRatio="xMidYMid meet"

packages/charts/src/components/TimelineChart/Placeholder.tsx

@@ -1,9 +1,10 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
 import React from 'react';
-import ContentLoader from 'react-content-loader/dist/react-content-loader.es.js';
+import ContentLoader from 'react-content-loader';
 
 export const TimelineChartPlaceholder = () => {
   return (
+    // @ts-expect-error: TypeScript is going crazy
     <ContentLoader
       viewBox="0 0 600 150"
       preserveAspectRatio="xMidYMid meet"

packages/charts/src/internal/Utils.ts

@@ -12,6 +12,10 @@ export const getCellColors = (element: Record<string, any>, data: Record<string,
 let canvas;
 
 export const getTextWidth = (text) => {
+  if (typeof document === 'undefined') {
+    return text.length * 7;
+  }
+
   const font = `normal 12pt "72","72full",Arial,Helvetica,sans-serif`;
   // re-use canvas object for better performance
   canvas = canvas || (canvas = document.createElement('canvas'));