@datawheel/data-explorer 1.1.7 → 1.1.8

package/dist/main.mjs

@@ -21,6 +21,7 @@ import { saveElement } from 'd3plus-export';
 import { d3plusConfigBuilder } from '@datawheel/vizbuilder/react';
 import { assign } from 'd3plus-common';
 import { BarChart, Geomap, Donut, LinePlot, StackedArea, Treemap } from 'd3plus-react';
+import { useInView } from 'react-intersection-observer';
 
 // src/components/DebugView.tsx
 var explorerTranslation = {
@@ -6342,9 +6343,20 @@ var iconByFormat = {
   svg: IconVectorTriangle
 };
 function ChartCard(props) {
-  const { chart, downloadFormats, isFullMode, onFocus, showConfidenceInt } = props;
+  const { chart, downloadFormats, isFullMode, onFocus, showConfidenceInt, height } = props;
   const { translate } = useTranslation();
   const nodeRef = useRef(null);
+  const { ref: inViewRef, inView } = useInView({ triggerOnce: false, threshold: 0 });
+  const [hasBeenInView, setHasBeenInView] = useState(false);
+  React13__default.useEffect(() => {
+    if (inView && !hasBeenInView) {
+      setHasBeenInView(true);
+    }
+  }, [inView, hasBeenInView]);
+  const setRefs = (el) => {
+    nodeRef.current = el;
+    inViewRef(el);
+  };
   const [ChartComponent, config] = useD3plusConfig(chart, {
     fullMode: !!isFullMode,
     showConfidenceInt: !!showConfidenceInt,
@@ -6413,9 +6425,9 @@ function ChartCard(props) {
       isShared ? translate("vizbuilder.share_copied") : translate("vizbuilder.action_share")
     );
   }, [clipboard, translate, isShared]);
-  const height = isFullMode ? "calc(100vh - 3rem)" : 300;
+  const resolvedHeight = height ? height : isFullMode ? "calc(100vh - 3rem)" : 400;
   if (!ChartComponent) return null;
-  return /* @__PURE__ */ React13__default.createElement(Paper, { h: height, w: "100%", style: { overflow: "hidden" } }, /* @__PURE__ */ React13__default.createElement(ErrorBoundary, null, /* @__PURE__ */ React13__default.createElement(Stack, { spacing: 0, h: height, style: { position: "relative" }, w: "100%" }, /* @__PURE__ */ React13__default.createElement(Group, { position: "right", p: "xs", spacing: "xs", align: "center" }, isFullMode && shareButton, downloadButtons, onFocus && focusButton), /* @__PURE__ */ React13__default.createElement(Box, { style: { flex: "1 1 auto" }, ref: nodeRef, pb: "xs", px: "xs" }, /* @__PURE__ */ React13__default.createElement(ChartComponent, { config })))));
+  return /* @__PURE__ */ React13__default.createElement(Paper, { h: resolvedHeight, w: "100%", style: { overflow: "hidden" } }, /* @__PURE__ */ React13__default.createElement(ErrorBoundary, null, /* @__PURE__ */ React13__default.createElement(Stack, { spacing: 0, h: resolvedHeight, style: { position: "relative" }, w: "100%" }, /* @__PURE__ */ React13__default.createElement(Group, { position: "center", p: "xs", spacing: "xs", align: "center" }, isFullMode && shareButton, downloadButtons, onFocus && focusButton), /* @__PURE__ */ React13__default.createElement(Box, { style: { flex: "1 1 auto" }, ref: setRefs, pb: "xs", px: "xs" }, ChartComponent && (inView || hasBeenInView) ? /* @__PURE__ */ React13__default.createElement(ChartComponent, { config }) : /* @__PURE__ */ React13__default.createElement("div", { style: { height: "100%", width: "100%" } })))));
 }
 var getBackground = (node) => {
   if (node.nodeType !== Node.ELEMENT_NODE) return "white";
@@ -6453,6 +6465,42 @@ function Vizbuilder(props) {
   const queryItem = useSelector$1(selectCurrentQueryItem);
   const currentChart = (queryItem == null ? void 0 : queryItem.chart) || "";
   const { actions: actions2 } = useSettings();
+  const useStyles6 = createStyles((theme) => ({
+    grid: {
+      padding: theme.spacing.xl,
+      display: "grid",
+      gridAutoRows: "minmax(200px, auto)",
+      gap: theme.spacing.xl,
+      gridTemplateColumns: "1fr 1fr",
+      [theme.fn.smallerThan("md")]: {
+        gridTemplateColumns: "1fr"
+      }
+    },
+    itemLarge: {
+      gridRow: "auto",
+      gridColumn: "auto"
+    },
+    itemSmallTop: {
+      gridRow: "auto",
+      gridColumn: "auto"
+    },
+    itemSmallBottom: {
+      gridRow: "auto",
+      gridColumn: "auto"
+    },
+    // for single chart
+    fill: {
+      gridColumn: "1",
+      gridRow: "1",
+      height: "100%",
+      width: "100%",
+      [theme.fn.largerThan("md")]: {
+        gridColumn: "1 / span 2",
+        gridRow: "1 / span 2"
+      }
+    }
+  }));
+  const { classes, cx } = useStyles6();
   const setCurrentChart = useCallback(
     (chart) => {
       actions2.updateChart(chart);
@@ -6489,34 +6537,40 @@ function Vizbuilder(props) {
     if (chartList.length === 0 && !Array.isArray(datasets) && datasets.data.length === 1)
       return /* @__PURE__ */ React13__default.createElement(Notice, { status: "one-row" });
     if (chartList.length === 0) return /* @__PURE__ */ React13__default.createElement(Notice, { status: "empty" });
-    const isSingleChart = chartList.length === 1;
     if (chartList.length > 10) {
       chartList = chartList.slice(0, 10);
     }
-    return /* @__PURE__ */ React13__default.createElement(ErrorBoundary, null, /* @__PURE__ */ React13__default.createElement(
-      SimpleGrid,
-      {
-        breakpoints: [
-          { minWidth: "xs", cols: 1 },
-          { minWidth: "md", cols: 2 },
-          { minWidth: "lg", cols: 3 },
-          { minWidth: "xl", cols: 4 }
-        ],
-        className: cls({ unique: isSingleChart })
-      },
-      chartList.map((chart) => /* @__PURE__ */ React13__default.createElement(
+    const isSingleChart = chartList.length === 1;
+    return /* @__PURE__ */ React13__default.createElement(ErrorBoundary, null, /* @__PURE__ */ React13__default.createElement("div", { className: cx(classes.grid, { [classes.fill]: isSingleChart }) }, chartList.map((chart, idx) => {
+      const pos = idx % 3;
+      let style = {};
+      let className = "";
+      let height;
+      if (isSingleChart) {
+        className = classes.fill;
+        height = 600;
+      } else {
+        if (pos === 0) {
+          className = classes.itemLarge;
+        } else if (pos === 1) {
+          className = classes.itemSmallTop;
+        } else if (pos === 2) {
+          className = classes.itemSmallBottom;
+        }
+      }
+      return /* @__PURE__ */ React13__default.createElement("div", { key: chart.key, className, style }, /* @__PURE__ */ React13__default.createElement(
         ChartCard,
         {
-          key: chart.key,
           chart,
           downloadFormats,
           measureConfig: getMeasureConfig,
           onFocus: () => setCurrentChart(chart.key),
           showConfidenceInt,
-          userConfig
+          userConfig,
+          ...height ? { height } : {}
         }
-      ))
-    ));
+      ));
+    })));
   }, [
     charts,
     datasets,
@@ -6524,7 +6578,9 @@ function Vizbuilder(props) {
     getMeasureConfig,
     nonIdealState,
     showConfidenceInt,
-    userConfig
+    userConfig,
+    classes,
+    cx
   ]);
   const focusContent = useMemo(() => {
     const chart = charts[currentChart];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datawheel/data-explorer",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "main": "./dist/main.mjs",
   "types": "./dist/main.d.mts",
   "files": [
@@ -39,6 +39,7 @@
     "mantine-react-table": "^1.3.0",
     "match-sorter": "^6.3.4",
     "postcss-modules": "^6.0.0",
+    "react-intersection-observer": "^9.16.0",
     "react-redux": "^7.0.0",
     "react-router-dom": "^6.30.0",
     "react-viewport-list": "^3.0.0",
@@ -47,8 +48,8 @@
     "yn": "^5.0.0"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.0.0",
     "@datawheel/vizbuilder": "^0.6.0",
+    "@emotion/react": "^11.0.0",
     "@mantine/core": "^6.0.0",
     "@mantine/dates": "^6.0.0",
     "@mantine/hooks": "^6.0.0",