Add a full screen button to chart (#934)

* Add a full screen button to chart - imcrement frontend version to 3.2 resolves #472 * with some transition --------- Co-authored-by: Fred Lefévère-Laoide <[email protected]>
Avaiga · Mar 5, 2024 · d681109 · d681109
1 parent a378d8c
commit d681109
Show file tree

Hide file tree

Showing 7 changed files with 300 additions and 210 deletions.
diff --git a/frontend/taipy-gui/dom/package.json b/frontend/taipy-gui/dom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "taipy-gui-dom",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "private": true,
   "dependencies": {
     "react": "^18.2.0",

diff --git a/frontend/taipy-gui/package-lock.json b/frontend/taipy-gui/package-lock.json
diff --git a/frontend/taipy-gui/package.json b/frontend/taipy-gui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "taipy-gui",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.10.0",

diff --git a/frontend/taipy-gui/packaging/package.json b/frontend/taipy-gui/packaging/package.json
@@ -1,6 +1,6 @@
 {
   "name": "taipy-gui",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "private": true,
   "main": "./taipy-gui.js",
   "types": "./taipy-gui.d.ts"

diff --git a/frontend/taipy-gui/public/stylekit/controls/chart.css b/frontend/taipy-gui/public/stylekit/controls/chart.css
@@ -41,3 +41,17 @@
 .taipy-chart:not(.has-background) .main-svg {
   background: transparent !important;
 }
+
+.js-plotly-plot.full-screen {
+    position: fixed !important;
+    height: 99vh !important;
+    width: 99vw !important;
+    display: block !important;
+    left: 0;
+    top: 0;
+    z-index: 99999;
+    overflow: hidden;
+    background-color: var(--color-background);
+    box-shadow: 10px 5px 5px var(--color-contrast);
+    transition: left 1s ease, width 1s ease, top 1s ease, height 1s ease;
+}
diff --git a/frontend/taipy-gui/src/components/Taipy/Chart.tsx b/frontend/taipy-gui/src/components/Taipy/Chart.tsx
@@ -11,8 +11,27 @@
  * specific language governing permissions and limitations under the License.
  */
 
-import React, { CSSProperties, useCallback, useEffect, useMemo, useRef, useState, lazy, Suspense } from "react";
-import { Data, Layout, PlotDatum, PlotMarker, PlotRelayoutEvent, PlotSelectionEvent, ScatterLine } from "plotly.js";
+import React, {
+    CSSProperties,
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+    lazy,
+    Suspense,
+} from "react";
+import {
+    Config,
+    Data,
+    Layout,
+    ModeBarButtonAny,
+    PlotDatum,
+    PlotMarker,
+    PlotRelayoutEvent,
+    PlotSelectionEvent,
+    ScatterLine,
+} from "plotly.js";
 import Skeleton from "@mui/material/Skeleton";
 import Box from "@mui/material/Box";
 import Tooltip from "@mui/material/Tooltip";
@@ -196,6 +215,29 @@ const defaultConfig = {
 const emptyLayout = {} as Record<string, Record<string, unknown>>;
 const emptyData = {} as Record<string, TraceValueType>;
 
+const TaipyPlotlyButtons: ModeBarButtonAny[] = [
+    {
+        name: "Full screen",
+        title: "Full screen",
+        icon: {
+            height: 24,
+            width: 24,
+            path: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z",
+        },
+        click: function (gd: HTMLElement, evt: Event) {
+            const title = gd.classList.toggle("full-screen") ? "Exit Full screen" : "Full screen";
+            (evt.currentTarget as HTMLElement).setAttribute("data-title", title);
+            const {height} = gd.dataset;
+            if (height) {
+                gd.attributeStyleMap.set("height", height);
+            } else {
+                gd.setAttribute("data-height", getComputedStyle(gd.querySelector(".svg-container") || gd).height)
+            }
+            window.dispatchEvent(new Event('resize'));
+        },
+    },
+];
+
 const Chart = (props: ChartProp) => {
     const {
         title = "",
@@ -293,7 +335,7 @@ const Chart = (props: ChartProp) => {
     useDispatchRequestUpdateOnFirstRender(dispatch, id, module, updateVars);
 
     const layout = useMemo(() => {
-        const layout = {...baseLayout};
+        const layout = { ...baseLayout };
         let template = undefined;
         try {
             const tpl = props.template && JSON.parse(props.template);
@@ -320,6 +362,7 @@ const Chart = (props: ChartProp) => {
         }
         return {
             ...layout,
+            autosize: true,
             title: title || layout.title,
             xaxis: {
                 title:
@@ -446,7 +489,7 @@ const Chart = (props: ChartProp) => {
     }, [props.figure, selected, data, config, dataKey]);
 
     const plotConfig = useMemo(() => {
-        let plconf = {};
+        let plconf: Partial<Config> = {};
         if (props.plotConfig) {
             try {
                 plconf = JSON.parse(props.plotConfig);
@@ -458,11 +501,13 @@ const Chart = (props: ChartProp) => {
                 plconf = {};
             }
         }
-        if (active) {
-            return plconf;
-        } else {
-            return { ...plconf, staticPlot: true };
+        plconf.modeBarButtonsToAdd = TaipyPlotlyButtons;
+        plconf.responsive = true;
+        plconf.autosizable = true;
+        if (!active) {
+            plconf.staticPlot = true;
         }
+        return plconf;
     }, [active, props.plotConfig]);
 
     const onRelayout = useCallback(
@@ -558,7 +603,7 @@ const Chart = (props: ChartProp) => {
     );
 
     return render ? (
-        <Box id={id} key="div" data-testid={props.testId} className={className} ref={plotRef}>
+        <Box id={id} data-testid={props.testId} className={className} ref={plotRef}>
             <Tooltip title={hover || ""}>
                 <Suspense fallback={<Skeleton key="skeleton" sx={skelStyle} />}>
                     {Array.isArray(props.figure) && props.figure.length && props.figure[0].data !== undefined ? (
@@ -571,6 +616,7 @@ const Chart = (props: ChartProp) => {
                             onSelected={onSelect}
                             onDeselect={onSelect}
                             config={plotConfig}
+                            useResizeHandler
                         />
                     ) : (
                         <Plot
@@ -583,6 +629,7 @@ const Chart = (props: ChartProp) => {
                             onDeselect={isOnClick(config.types) ? undefined : onSelect}
                             onClick={isOnClick(config.types) ? onSelect : undefined}
                             config={plotConfig}
+                            useResizeHandler
                         />
                     )}
                 </Suspense>

diff --git a/frontend/taipy/package.json b/frontend/taipy/package.json
@@ -1,6 +1,6 @@
 {
   "name": "taipy-gui-core",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "private": true,
   "devDependencies": {
     "@types/react": "^18.0.15",