feat: new store for custom chart

Author: iobuhov

packages/pluggableWidgets/custom-chart-web/package.json

@@ -50,6 +50,7 @@
         "@mendix/widget-plugin-platform": "workspace:*",
         "classnames": "^2.5.1",
         "deepmerge": "^4.3.1",
+        "mobx-react-lite": "4.0.7",
         "plotly.js-dist-min": "^3.0.0"
     },
     "devDependencies": {

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

@@ -1,12 +1,13 @@
-import { constructWrapperStyle, getPlaygroundContext } from "@mendix/shared-charts/main";
 import { Fragment, ReactElement } from "react";
+import { constructWrapperStyle, getPlaygroundContext } from "@mendix/shared-charts/main";
 import { CustomChartContainerProps } from "../typings/CustomChartProps";
 import { useCustomChart } from "./hooks/useCustomChart";
 import "./ui/CustomChart.scss";
+import { observer } from "mobx-react-lite";
 
 const PlaygroundContext = getPlaygroundContext();
 
-export default function CustomChart(props: CustomChartContainerProps): ReactElement {
+const Container = observer(function CustomChart(props: CustomChartContainerProps): ReactElement {
     const { playgroundData, ref } = useCustomChart(props);
     const wrapperStyle = constructWrapperStyle(props);
 
@@ -16,4 +17,8 @@ export default function CustomChart(props: CustomChartContainerProps): ReactElem
             <div ref={ref} className="widget-custom-chart" style={wrapperStyle} tabIndex={props.tabIndex} />
         </Fragment>
     );
+});
+
+export default function CustomChart(props: CustomChartContainerProps): ReactElement {
+    return <Container {...props} />;
 }