Skip to content

Commit

Permalink
Merge pull request #2341 from Avaiga/docs/extension_chart
Browse files Browse the repository at this point in the history
Chart extension documentation
  • Loading branch information
namnguyen20999 authored Dec 19, 2024
2 parents 11ff277 + e719b7c commit 5a4b3f8
Show file tree
Hide file tree
Showing 9 changed files with 141 additions and 4 deletions.
40 changes: 40 additions & 0 deletions doc/gui/extension/dashboard.py
Original file line number Diff line number Diff line change
@@ -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")
7 changes: 7 additions & 0 deletions doc/gui/extension/example_library/example_library.py
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,13 @@ def __init__(self) -> None:
"text": ElementProperty(PropertyType.string),
"logo_path": ElementProperty(PropertyType.string, default_value=logo_base64),
},
),
"dashboard": Element(
"data",
{
"data": ElementProperty(PropertyType.dict),
"layout": ElementProperty(PropertyType.dict),
},
)
}

Expand Down
5 changes: 4 additions & 1 deletion doc/gui/extension/example_library/front-end/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
48 changes: 48 additions & 0 deletions doc/gui/extension/example_library/front-end/src/Dashboard.tsx
Original file line number Diff line number Diff line change
@@ -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;
13 changes: 13 additions & 0 deletions doc/gui/extension/example_library/front-end/src/GameTable.tsx
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
13 changes: 13 additions & 0 deletions doc/gui/extension/example_library/front-end/src/LogoWithText.tsx
Original file line number Diff line number Diff line change
@@ -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";

Expand Down
Original file line number Diff line number Diff line change
@@ -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";

Expand Down
3 changes: 2 additions & 1 deletion doc/gui/extension/example_library/front-end/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 };
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down

0 comments on commit 5a4b3f8

Please sign in to comment.