[WC-2676]: Custom charts events (and more) [WIP] (#1402)

Author: r0b1n

packages/pluggableWidgets/any-chart-web/src/AnyChart.tsx

@@ -1,4 +1,4 @@
-## AnychartWeb
+## Custom chart
 
 [My widget description]
 

packages/pluggableWidgets/any-chart-web/src/hooks/useAnyChart.ts

@@ -1,6 +1,6 @@
 {
-    "name": "@mendix/any-chart-web2",
-    "widgetName": "AnyChart",
+    "name": "@mendix/custom-chart-web",
+    "widgetName": "CustomChart",
     "version": "1.0.0",
     "description": "",
     "copyright": "© Mendix Technology BV 2024. All rights reserved.",
@@ -14,18 +14,18 @@
         "developmentPort": 3000
     },
     "mxpackage": {
-        "name": "AnyChart",
+        "name": "CustomChart",
         "type": "widget",
-        "mpkName": "com.mendix.widget.web.AnyChart.mpk"
+        "mpkName": "com.mendix.widget.web.CustomChart.mpk"
     },
     "marketplace": {
         "minimumMXVersion": "10.16.0",
         "appNumber": 1234,
-        "appName": "AnyChart"
+        "appName": "Custom chart"
     },
     "testProject": {
         "githubUrl": "https://github.com/mendix/testProjects",
-        "branchName": "any-chart-web"
+        "branchName": "custom-chart-web"
     },
     "packagePath": "com.mendix.widget.web",
     "scripts": {
@@ -34,9 +34,9 @@
         "build": "pluggable-widgets-tools build:web",
         "format": "pluggable-widgets-tools format",
         "lint": "eslint --ext .jsx,.js,.ts,.tsx src/",
-        "test": "echo 'FIXME: Finish any-chart-web unit test migration'",
-        "e2e": "echo 'FIXME: Finish any-chart-web e2e test migration'",
-        "e2edev": "echo 'FIXME: Finish any-chart-web e2e test migration'",
+        "test": "echo 'FIXME: Finish custom-chart-web unit test migration'",
+        "e2e": "echo 'FIXME: Finish custom-chart-web e2e test migration'",
+        "e2edev": "echo 'FIXME: Finish custom-chart-web e2e test migration'",
         "release": "pluggable-widgets-tools release:web",
         "create-gh-release": "rui-create-gh-release",
         "publish-marketplace": "rui-publish-marketplace",

packages/pluggableWidgets/any-chart-web/src/package.xml

@@ -1,10 +1,15 @@
+import { Properties } from "@mendix/pluggable-widgets-tools";
 import {
     StructurePreviewProps,
     structurePreviewPalette
 } from "@mendix/widget-plugin-platform/preview/structure-preview-api";
-import { AnyChartPreviewProps } from "../typings/AnyChartProps";
+import { CustomChartPreviewProps } from "../typings/CustomChartProps";
 
-export function getPreview(_values: AnyChartPreviewProps, isDarkMode: boolean): StructurePreviewProps {
+export function getProperties(_values: CustomChartPreviewProps, defaultProperties: Properties): Properties {
+    return defaultProperties;
+}
+
+export function getPreview(_values: CustomChartPreviewProps, isDarkMode: boolean): StructurePreviewProps {
     const palette = structurePreviewPalette[isDarkMode ? "dark" : "light"];
     const sampleChartSvg = `
         <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -33,7 +38,7 @@ export function getPreview(_values: AnyChartPreviewProps, isDarkMode: boolean):
                 children: [
                     {
                         type: "Text",
-                        content: "Any Chart",
+                        content: "Custom Chart",
                         fontColor: palette.text.primary,
                         fontSize: 10,
                         bold: true

packages/pluggableWidgets/any-chart-web/src/utils/ChartDataProcessor.ts

@@ -1,6 +1,6 @@
 import { ReactElement, createElement } from "react";
-import { AnyChartPreviewProps } from "../typings/AnyChartProps";
-import AnyChart from "./AnyChart";
+import { CustomChartPreviewProps } from "../typings/CustomChartProps";
+import CustomChart from "./CustomChart";
 
 const defaultSampleData = `[{
     "type": "scatter",
@@ -38,9 +38,9 @@ const defaultConfig = `{
     "staticPlot": true
 }`;
 
-export function preview(props: AnyChartPreviewProps): ReactElement {
+export function preview(props: CustomChartPreviewProps): ReactElement {
     const containerProps = {
-        name: "preview-chart",
+        name: "preview-custom-chart",
         class: props.class,
         style: props.styleObject,
         tabIndex: 0,
@@ -51,10 +51,10 @@ export function preview(props: AnyChartPreviewProps): ReactElement {
         sampleLayout: props.sampleLayout,
         configurationOptions: props.configurationOptions || defaultConfig,
         widthUnit: props.widthUnit,
-        width: props.width || 100,
+        width: props.width || 75,
         heightUnit: props.heightUnit,
         height: props.height || 75
     };
 
-    return <AnyChart {...containerProps} />;
+    return <CustomChart {...containerProps} />;
 }

packages/pluggableWidgets/any-chart-web/.eslintrc.json renamed to packages/pluggableWidgets/custom-chart-web/.eslintrc.json

@@ -0,0 +1,20 @@
+import { ReactElement, createElement } from "react";
+import { CustomChartContainerProps } from "../typings/CustomChartProps";
+import { useCustomChart } from "./hooks/useCustomChart";
+import { useActionEvents } from "./hooks/useActionEvents";
+import "./ui/CustomChart.scss";
+
+export default function CustomChart(props: CustomChartContainerProps): ReactElement {
+    const { chartRef, containerStyle } = useCustomChart(props);
+    const { handleClick } = useActionEvents(props);
+
+    return (
+        <div
+            ref={chartRef}
+            className="widget-custom-chart"
+            style={containerStyle}
+            tabIndex={props.tabIndex}
+            onClick={handleClick}
+        />
+    );
+}