@datawheel/data-explorer 1.1.7 → 1.1.9

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 = {
@@ -1847,16 +1848,58 @@ var useDimensionItems = () => {
     (a, b) => getOrderValue(a.item) - getOrderValue(b.item) || b.count - a.count || a.alpha.localeCompare(b.alpha)
   ).map((i) => i.item);
 };
+function getISO3Drilldowns({ cube, search }) {
+  const ISO_3_CODE = "ISO 3";
+  if (!cube) return false;
+  function getList(search2, key, separator) {
+    return search2.getAll(key).join(separator).split(separator).filter((token) => token);
+  }
+  const dimensions = {};
+  const hierarchies = {};
+  const levels = Object.fromEntries(
+    cube.dimensions.flatMap(
+      (dim) => dim.hierarchies.flatMap(
+        (hie) => hie.levels.map((lvl) => {
+          dimensions[lvl.name] = dim.name;
+          hierarchies[lvl.name] = hie.name;
+          return [lvl.name, lvl];
+        })
+      )
+    )
+  );
+  const properties = [ISO_3_CODE];
+  const drilldowns = getList(search, "drilldowns", ",").map((name4) => {
+    const lvl = levels[name4];
+    return buildDrilldown({
+      active: true,
+      key: lvl.name,
+      dimension: dimensions[name4],
+      hierarchy: hierarchies[name4],
+      level: name4,
+      properties: filterMap(
+        lvl.properties,
+        (prop) => properties.includes(prop.name) ? buildProperty({ name: prop.name, level: name4, active: true }) : null
+      )
+    });
+  });
+  return keyBy(drilldowns, "key");
+}
 function useDownloadQuery() {
   const { tesseract } = useLogicLayer();
   const { params } = useSelector(selectCurrentQueryItem);
+  const { data: schema } = useServerSchema();
   return useMutation({
     mutationFn: async ({ format: format2 }) => {
       if (!isValidQuery(params)) {
         throw new Error("The current query is not valid.");
       }
       const queryParams = { ...params, pagiLimit: 0, pagiOffset: 0 };
-      const request = queryParamsToRequest(queryParams);
+      const drilldowns = getISO3Drilldowns({
+        cube: schema == null ? void 0 : schema.cubeMap[params.cube],
+        search: new URLSearchParams(location.search)
+      });
+      const paramsUpdated = drilldowns ? { ...queryParams, drilldowns } : queryParams;
+      const request = queryParamsToRequest(paramsUpdated);
       const response = await tesseract.fetchData({
         request,
         format: format2
@@ -6342,9 +6385,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 +6467,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 +6507,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 +6579,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 +6620,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.9",
   "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",