use @rdub/next-plotly

neighbor-ryan · Feb 3, 2024 · d14be02 · d14be02
1 parent 81c9162
commit d14be02
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 135 deletions.
diff --git a/www/next.config.js b/www/next.config.js
@@ -16,6 +16,7 @@ const nextConfig = {
     webpack({ optimization, ...webpackConfig }) {
         return { ...webpackConfig, optimization: { ...optimization, minimize } };
     },
+    output: "export",
 }
 
 const withMDX = require('@next/mdx')({

diff --git a/www/package.json b/www/package.json
@@ -11,6 +11,7 @@
         "@rdub/next-base": "^0.1.0",
         "@rdub/next-markdown": "0.0.2",
         "@rdub/next-params": "^0.0.1",
+        "@rdub/next-plotly": "^0.0.3",
         "assert": "^2.0.0",
         "aws-sdk": "^2.1043.0",
         "bootstrap": "^4.1.3",
@@ -19,7 +20,7 @@
         "d3-color": ">=3.1.0",
         "danfojs": "^1.1.2",
         "jquery": "^3.6.0",
-        "leaflet": "^1.9.2",
+        "leaflet": "^1.9.4",
         "lodash": "^4.17.21",
         "moment": "^2.29.1",
         "next": "^14",
@@ -28,9 +29,8 @@
         "process": "^0.11.10",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-leaflet": "^4.1.0",
+        "react-leaflet": "^4.2.1",
         "react-markdown": "^7.1.1",
-        "react-plotly.js": "^2.6.0",
         "react-router-dom": "^6.0.2",
         "react-tooltip": "^5.0.0"
     },
@@ -41,6 +41,7 @@
         "@types/lodash": "^4.14.177",
         "@types/node-fetch": "^2.6.2",
         "@types/parquetjs": "^0.10.3",
+        "@types/plotly.js": "^2.29.0",
         "@types/react": "^18.0.25",
         "@types/react-dom": "^18.0.9",
         "@types/react-plotly.js": "^2.5.0",

diff --git a/www/pages/_app.js b/www/pages/_app.js
@@ -1,4 +1,5 @@
 import 'bootstrap/dist/css/bootstrap.css'
+import 'leaflet/dist/leaflet.css';
 import '../styles/globals.css'
 
 function MyApp({ Component, pageProps }) {

diff --git a/www/pages/index.tsx b/www/pages/index.tsx
@@ -29,16 +29,16 @@ import Link from "next/link";
 import 'react-tooltip/dist/react-tooltip.css'
 
 import {darken} from "../src/colors";
-import {Figure} from "react-plotly.js";
+import { Figure, PlotParams } from "react-plotly.js";
 
 import { useEffect } from "react";
-const Plot = dynamic(() => import("react-plotly.js"), { ssr: false, })
 const Tooltip = dynamic(() => import("react-tooltip").then(m => m.Tooltip), { ssr: false, })
 
 const {pow} = Math
 
 const JSON_PATH = 'public/assets/ymrgtb_cd.json'
 import {LAST_MONTH_PATH} from "../src/paths";
+import PlotWrapper from "@rdub/next-plotly/plot-wrapper";
 
 export async function getStaticProps(context: any) {
     const data = loadSync<Row[]>(JSON_PATH)
@@ -517,8 +517,6 @@ export default function App({ data, lastMonthStr }: { data: Row[], lastMonthStr:
 
     const [ initialized, setInitialized ] = useState(false)
     const clickToToggle = false
-    // const width = 768
-    const height = 450
     const src = 'screenshots/plot-fallback.png'
     const [ initializedPlot, setInitializedPlot ] = useState<InitializedPlot | null>(null)
     const [ firstRender, setFirstRender ] = useState<Date>(new Date)
@@ -543,7 +541,7 @@ export default function App({ data, lastMonthStr }: { data: Row[], lastMonthStr:
                 .then(m => m.default)
                 .then(
                     Plotly => Plotly.downloadImage(
-                        figure as RootOrData,
+                        figure,
                         {
                             width: graphDiv.offsetWidth,
                             height: graphDiv.offsetHeight,
@@ -557,6 +555,17 @@ export default function App({ data, lastMonthStr }: { data: Row[], lastMonthStr:
         [ initializedPlot?.set ]
     )
 
+    const plotParams: PlotParams = {
+        data: traces,
+        useResizeHandler: true,
+        layout: layout,
+        config: {
+            displayModeBar: false,
+            // staticPlot: true,
+            // responsive: true,
+        }
+    }
+
     return (
         <div id="plot" className={css.container}>
             <Head
@@ -573,63 +582,15 @@ export default function App({ data, lastMonthStr }: { data: Row[], lastMonthStr:
                     {subtitle && <p className={css.subtitle}>{subtitle}</p>}
                 </div>
                 {/* Main plot: bar graph + rolling avg line(s) */}
-                <div className={css.plotWrapper}>
-                    <div
-                        className={`${css.fallback} ${initialized ? css.hidden : ""}`}
-                        style={{ height: `${height}px`, maxHeight: `${height}px` }}
-                        onClick={() => clickToToggle && setInitialized(true)}
-                    >
-                        <img
-                            alt={title}
-                            src={`${basePath}/${src}`}
-                            width={"100%"}
-                            height={height}
-                            // layout={"fill"}
-                            // fill
-                            // layout="responsive"
-                            // loading="lazy"
-                        />
-                    </div>
-                    {
-                        <Plot
-                            className={css.plotly}
-                            style={{ visibility: initialized ? undefined : "hidden", width: "100%", height: `${height}px` }}
-                            onInitialized={async (figure: Readonly<Figure>, graphDiv: Readonly<HTMLElement>) => {
-                                if (!plotInitialized) {
-                                    // This can still run more than once; true once-only semantics (for storing only a
-                                    // timestamp only the first time this code path is hit) comes from
-                                    // `useEffect(…, [ set ])` above.
-                                    setPlotInitialized({ time: Date.now(), set: true })
-                                }
-
-                                console.log("initialized:", figure, graphDiv)
-                                setInitializedPlot({ figure, graphDiv, set: true })
-                                clickToToggle || setInitialized(true)
-                            }}
-                            onDoubleClick={() => setDateRange('All')}
-                            onRelayout={e => {
-                                if (!('xaxis.range[0]' in e && 'xaxis.range[1]' in e)) return
-                                let [start, end] = [e['xaxis.range[0]'], e['xaxis.range[1]'],].map(s => s ? new Date(s) : undefined)
-                                start = start ? moment(start).subtract(1, 'month').toDate() : start
-                                const dateRange = (!start && !end) ? 'All' : {start, end,}
-                                // console.log("relayout:", e, start, end, dateRange,)
-                                setDateRange(dateRange)
-                            }}
-                            data={traces}
-                            useResizeHandler
-                            layout={layout}
-                            config={{
-                                displayModeBar: false,
-                                // staticPlot: true,
-                                // responsive: true,
-                            }}
-                        />
-                    }
-                </div>
-                {/* DateRange controls */}
+                <PlotWrapper
+                    params={plotParams}
+                    src={src}
+                    alt={title}
+                />
                 <div className={css.row}>
                     <details className={css.controls}>
                         <summary><span className={css.settingsGear}>⚙</span>️</summary>
+                        {/* DateRange controls */}
                         <div className={`${css.dateControls} ${controlCss.control}`}>
                             <label className={controlCss.controlHeader}>Dates</label>
                             {