feat(custom-chart-web): move utils to shared/charts

Author: rahmanunver

packages/pluggableWidgets/custom-chart-web/src/CustomChart.tsx

@@ -1,9 +1,8 @@
-import { getPlaygroundContext } from "@mendix/shared-charts/main";
+import { constructWrapperStyle, getPlaygroundContext } from "@mendix/shared-charts/main";
 import { createElement, Fragment, ReactElement } from "react";
 import { CustomChartContainerProps } from "../typings/CustomChartProps";
 import { useCustomChart } from "./hooks/useCustomChart";
 import "./ui/CustomChart.scss";
-import { constructWrapperStyle } from "./utils/utils";
 
 const PlaygroundContext = getPlaygroundContext();
 

packages/pluggableWidgets/custom-chart-web/src/utils/utils.ts

@@ -1,7 +1,4 @@
 import { Config, Data, Layout } from "plotly.js-dist-min";
-import { CSSProperties } from "react";
-import { CustomChartContainerProps } from "typings/CustomChartProps";
-
 export function parseData(staticData?: string, attributeData?: string, sampleData?: string): Data[] {
     let finalData: Data[] = [];
 
@@ -53,33 +50,3 @@ export function parseConfig(configOptions?: string): Partial<Config> {
         return {};
     }
 }
-
-function getHeightScale(height: number, heightUnit: "pixels" | "percentageOfParent" | "percentageOfView"): string {
-    return `${height}${heightUnit === "pixels" ? "px" : heightUnit === "percentageOfView" ? "vh" : "%"}`;
-}
-
-export function constructWrapperStyle(props: CustomChartContainerProps): CSSProperties {
-    const { widthUnit, heightUnit, minHeightUnit, maxHeightUnit, width, height, minHeight, maxHeight, OverflowY } =
-        props;
-
-    const wrapperStyle: Pick<CSSProperties, "width" | "height" | "minHeight" | "maxHeight" | "maxWidth" | "overflowY"> =
-        {};
-
-    wrapperStyle.width = `${width}${widthUnit === "pixels" ? "px" : "%"}`;
-    if (heightUnit === "percentageOfWidth") {
-        wrapperStyle.height = "auto";
-
-        if (minHeightUnit !== "none") {
-            wrapperStyle.minHeight = getHeightScale(minHeight, minHeightUnit);
-        }
-
-        if (maxHeightUnit !== "none") {
-            wrapperStyle.maxHeight = getHeightScale(maxHeight, maxHeightUnit);
-            wrapperStyle.overflowY = OverflowY;
-        }
-    } else {
-        wrapperStyle.height = getHeightScale(height, heightUnit);
-    }
-
-    return wrapperStyle;
-}

packages/shared/charts/src/main.ts

@@ -5,6 +5,7 @@ export type * from "./helpers/useEditorStore";
 export * from "./hooks/usePlotChartDataSeries";
 export * from "./utils/compareAttrValuesAsc";
 export * from "./utils/configs";
+export * from "./utils/chartStyles";
 export * from "./utils/equality";
 export { fallback, pprint } from "./utils/json";
 export { getPlaygroundContext, usePlaygroundContext };

packages/shared/charts/src/utils/chartStyles.ts

@@ -0,0 +1,32 @@
+import { CSSProperties } from "react";
+import { CustomChartContainerProps } from "../../../../pluggableWidgets/custom-chart-web/typings/CustomChartProps";
+
+function getHeightScale(height: number, heightUnit: "pixels" | "percentageOfParent" | "percentageOfView"): string {
+    return `${height}${heightUnit === "pixels" ? "px" : heightUnit === "percentageOfView" ? "vh" : "%"}`;
+}
+
+export function constructWrapperStyle(props: CustomChartContainerProps): CSSProperties {
+    const { widthUnit, heightUnit, minHeightUnit, maxHeightUnit, width, height, minHeight, maxHeight, OverflowY } =
+        props;
+
+    const wrapperStyle: Pick<CSSProperties, "width" | "height" | "minHeight" | "maxHeight" | "maxWidth" | "overflowY"> =
+        {};
+
+    wrapperStyle.width = `${width}${widthUnit === "pixels" ? "px" : "%"}`;
+    if (heightUnit === "percentageOfWidth") {
+        wrapperStyle.height = "auto";
+
+        if (minHeightUnit !== "none") {
+            wrapperStyle.minHeight = getHeightScale(minHeight, minHeightUnit);
+        }
+
+        if (maxHeightUnit !== "none") {
+            wrapperStyle.maxHeight = getHeightScale(maxHeight, maxHeightUnit);
+            wrapperStyle.overflowY = OverflowY;
+        }
+    } else {
+        wrapperStyle.height = getHeightScale(height, heightUnit);
+    }
+
+    return wrapperStyle;
+}