Initial commit for chart extension

doc/gui/extension/dashboard.py

@@ -0,0 +1,40 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+#
+#        http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+# an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations under the License.
+from example_library import ExampleLibrary
+
+from taipy.gui import Gui
+
+trace1 = {
+    "x": [1, 2, 3, 4, 4, 4, 8, 9, 10],
+    "type": "box",
+    "name": "Set 1"
+}
+
+trace2 = {
+    "x": [2, 3, 3, 3, 3, 5, 6, 6, 7],
+    "type": "box",
+    "name": "Set 2"
+}
+
+data = [trace1, trace2]
+
+layout = {
+    "title": {
+        "text": "Horizontal Box Plot"
+    }
+}
+
+page = """
+<|{data}|dashboard|layout={layout}|>
+"""
+
+if __name__ == "__main__":
+    Gui(page, libraries=[ExampleLibrary()]).run(title="Horizontal Box Plot")

doc/gui/extension/example_library/example_library.py

@@ -65,6 +65,13 @@ class ExampleLibrary(ElementLibrary):
                     "text": ElementProperty(PropertyType.string),
                     "logo_path": ElementProperty(PropertyType.string, default_value=logo_base64),
                 },
+            ),
+            "dashboard": Element(
+                "data",
+                {
+                    "data": ElementProperty(PropertyType.dict),
+                    "layout": ElementProperty(PropertyType.dict),
+                },
             )
         }
 

doc/gui/extension/example_library/front-end/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "devDependencies": {
     "@types/react": "^18.0.15",
+    "@types/react-plotly.js": "^2.6.3",
     "@typescript-eslint/eslint-plugin": "^5.30.7",
     "@typescript-eslint/parser": "^5.30.7",
     "child_process": "^1.0.2",
@@ -19,7 +20,9 @@
     "webpack-cli": "^4.10.0"
   },
   "dependencies": {
-    "react": "^18.2.0"
+    "plotly.js": "^2.35.3",
+    "react": "^18.2.0",
+    "react-plotly.js": "^2.6.0"
   },
   "scripts": {
     "postinstall": "node scripts/install.js",

doc/gui/extension/example_library/front-end/src/Dashboard.tsx

@@ -0,0 +1,42 @@
+import React, { useMemo } from "react";
+import {
+    TaipyDynamicProps,
+    useDynamicJsonProperty,
+} from "taipy-gui";
+
+import Plot from "react-plotly.js";
+import { Data, Layout } from "plotly.js";
+
+interface DashboardProps extends TaipyDynamicProps {
+    data?: string;
+    defaultData?: string;
+    layout?: string;
+    defaultLayout?: string;
+}
+
+const Dashboard = (props: DashboardProps) => {
+    const value = useDynamicJsonProperty(props.data, props.defaultData || "", {} as Partial<Data>);
+    const dashboardLayout = useDynamicJsonProperty(props.layout, props.defaultLayout || "", {} as Partial<Layout>);
+
+    const data = useMemo(() => {
+        if (Array.isArray(value)) {
+            return value as Data[];
+        }
+        return [] as Data[];
+    }, [value]);
+
+    const baseLayout = useMemo(() => {
+        const layout = {
+            ...dashboardLayout,
+        };
+        return layout as Partial<Layout>;
+    }, [dashboardLayout]);
+
+    return (
+        <div>
+            <Plot data={data} layout={baseLayout} />
+        </div>
+    );
+};
+
+export default Dashboard;

doc/gui/extension/example_library/front-end/src/index.ts

@@ -10,5 +10,6 @@ import ColoredLabel from "./ColoredLabel";
 import GameTable from "./GameTable";
 import VisualLabelList from "./VisualLabelList";
 import LogoWithText from "./LogoWithText";
+import Dashboard from "./Dashboard";
 
-export { ColoredLabel as ExampleLabel, GameTable, VisualLabelList, LogoWithText };
+export { ColoredLabel as ExampleLabel, GameTable, VisualLabelList, LogoWithText, Dashboard };

doc/gui/extension/example_library/front-end/webpack.config.js

@@ -36,8 +36,7 @@ module.exports = (_env, options) => {
     // Enable sourcemaps for debugging webpack's output.
     devtool: options.mode === "development" && "inline-source-map",
     resolve: {
-      // All the code is TypeScript
-      extensions: [".ts", ".tsx"],
+      extensions: [".ts", ".tsx", ".js"],
     },
 
     module: {