Merge pull request #2341 from Avaiga/docs/extension_chart

Chart extension documentation

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
+
+set1 = {
+    "x": [1, 2, 3, 4, 4, 4, 8, 9, 10],
+    "type": "box",
+    "name": "Set 1"
+}
+
+set2 = {
+    "x": [2, 3, 3, 3, 3, 5, 6, 6, 7],
+    "type": "box",
+    "name": "Set 2"
+}
+
+data = [set1, set2]
+
+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,48 @@
+/*
+ * 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.
+ */
+
+import React, { useMemo } from "react";
+import { useDynamicJsonProperty } from "taipy-gui";
+
+import Plot from "react-plotly.js";
+import { Data, Layout } from "plotly.js";
+
+interface DashboardProps {
+  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 <Plot data={data} layout={baseLayout} />;
+};
+
+export default Dashboard;

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

@@ -1,3 +1,16 @@
+/*
+ * 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.
+ */
+
 import React, { useEffect, useMemo, useState } from "react";
 import {
     createRequestDataUpdateAction,

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

@@ -1,3 +1,16 @@
+/*
+ * 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.
+ */
+
 import React from "react";
 import { useDynamicProperty } from "taipy-gui";
 

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

@@ -1,3 +1,16 @@
+/*
+ * 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.
+ */
+
 import React, { useMemo } from "react";
 import { LoV, useLovListMemo } from "taipy-gui";
 

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: {