@datawheel/data-explorer 1.3.3 → 1.4.1

package/dist/main.d.mts

@@ -451,6 +451,7 @@ interface FilterItem extends QueryParamsItem {
     conditionOne: [`${Comparison}`, string, number];
     conditionTwo?: [`${Comparison}`, string, number];
     joint: "and" | "or";
+    type?: "greaterThan" | "lessThan" | "between";
 }
 interface MeasureItem extends QueryParamsItem {
     name: string;
@@ -462,6 +463,7 @@ interface PropertyItem extends QueryParamsItem {
 }
 
 type Formatter = (value: number | null, locale?: string) => string;
+type DrilldownFormatter = (value: string | null, locale?: string) => string;
 interface PanelDescriptor {
     key: string;
     label: string;
@@ -1145,6 +1147,10 @@ declare function ExplorerComponent<Locale extends string>(props: {
      * that are displayed next to the value.
      * */
     idFormatters?: Record<string, Formatter>;
+    /**
+     * Defines an index of formatter functions available for drilldowns.
+     * */
+    drilldownFormatters?: Record<string, DrilldownFormatter>;
     /**
      * Defines an alternative height for the component structure.
      * @default "100vh"
@@ -1332,6 +1338,7 @@ interface SettingsContextProps {
     defaultMembersFilter: "id" | "name" | "any";
     formatters: Record<string, Formatter>;
     idFormatters: Record<string, Formatter>;
+    drilldownFormatters: Record<string, DrilldownFormatter>;
     previewLimit: number;
     panels: PanelDescriptor[];
     paginationConfig: Pagination;

package/dist/main.mjs

@@ -1,13 +1,13 @@
-import { keyframes, createStyles, Select, Center, Text, rem, Input, Box, Stack, Group, Button, SimpleGrid, Flex, ScrollArea, LoadingOverlay, Table, MultiSelect, NumberInput, Menu, ActionIcon, UnstyledButton, Loader, Container, Title, useMantineTheme, TextInput, CopyButton, MantineProvider, Alert, Space, Modal, Tooltip, useComponentDefaultProps, Skeleton, Anchor, Paper, packSx, CloseButton, Tabs, ThemeIcon, Drawer, Switch, Divider, Accordion, Popover, Checkbox } from '@mantine/core';
+import { keyframes, createStyles, Select, Center, Text, rem, Input, Box, Stack, Group, Button, SimpleGrid, Flex, ScrollArea, LoadingOverlay, Table, MultiSelect, NumberInput, Menu, ActionIcon, UnstyledButton, Loader, Container, Title, useMantineTheme, TextInput, CopyButton, MantineProvider, Alert, Space, Pagination, Modal, Tooltip, useComponentDefaultProps, Skeleton, Anchor, Paper, packSx, CloseButton, Tabs, ThemeIcon, Drawer, Switch, Divider, Accordion, Popover, Checkbox } from '@mantine/core';
 import { useClipboard, useDebouncedState, useMediaQuery, useFullscreen, useDisclosure } from '@mantine/hooks';
 import { IconWorld, IconExternalLink, IconClipboard, IconSettings, IconMathGreater, IconMathLower, IconArrowsLeftRight, IconWorldWww, IconClipboardCheck, IconAlertCircle, IconAlertTriangle, IconLanguage, IconCopy, IconArrowLeft, IconArrowRight, IconX, IconChevronLeft, IconChevronRight, IconVectorTriangle, IconPhotoDown, IconDownload, IconArrowsMinimize, IconArrowsMaximize, IconCheck, IconShare, IconSearch, IconDotsVertical, IconTrash, IconPlus, IconStack3, IconInfoCircleFilled, IconArrowsSort, IconSortDescendingNumbers, IconSortDescendingLetters, IconSortAscendingNumbers, IconSortAscendingLetters, IconHelpCircle, IconFilterOff, IconFilter, IconBox, IconClock, IconAdjustments } from '@tabler/icons-react';
 import * as React15 from 'react';
-import React15__default, { createContext, forwardRef, useMemo, useCallback, useContext, useRef, useEffect, useState, Suspense, useLayoutEffect } from 'react';
+import React15__default, { createContext, forwardRef, useMemo, memo, useCallback, useContext, useRef, useEffect, useState, Suspense, useLayoutEffect } from 'react';
 import { translationFactory } from '@datawheel/use-translation';
 import { createSlice, createSelector, combineReducers, configureStore, bindActionCreators } from '@reduxjs/toolkit';
 import { useSelector as useSelector$1, useStore, Provider as Provider$1 } from 'react-redux';
 import { useNavigate, BrowserRouter, useLocation } from 'react-router-dom';
-import { VizbuilderProvider, useVizbuilderContext, ErrorBoundary, useD3plusConfig } from '@datawheel/vizbuilder/react';
+import { VizbuilderProvider, useVizbuilderContext, d3plusConfigBuilder, ErrorBoundary, useD3plusConfig } from '@datawheel/vizbuilder/react';
 import { QueryClient, useQuery, QueryClientProvider, keepPreviousData, useMutation } from '@tanstack/react-query';
 import { assign } from 'd3plus-common';
 import identity2 from 'lodash-es/identity';
@@ -369,7 +369,8 @@ function getAnnotation(item, key, locale = "xx") {
   return ann[`${key}_${locale}`] || ann[`${key}_${locale.slice(0, 2)}`] || ann[key];
 }
 function parseNumeric(value, elseValue) {
-  return value && Number.isFinite(value) && !Number.isNaN(value) ? Number.parseFloat(value) : elseValue;
+  const result = Number.parseFloat(String(value));
+  return Number.isFinite(result) ? result : elseValue;
 }
 
 // src/utils/array.ts
@@ -599,6 +600,7 @@ function SettingsProvider(props) {
         defaultMembersFilter: props.defaultMembersFilter || "id",
         formatters: props.formatters || {},
         idFormatters: props.idFormatters || {},
+        drilldownFormatters: props.drilldownFormatters || {},
         panels: props.panels,
         previewLimit: props.previewLimit || 50,
         paginationConfig: (_a = props.pagination) != null ? _a : { rowsLimits: [100, 300, 500, 1e3], defaultLimit: 100 },
@@ -712,6 +714,10 @@ function useidFormatters() {
   const { idFormatters } = useSettings();
   return { idFormatters };
 }
+function useDrilldownFormatters() {
+  const { drilldownFormatters } = useSettings();
+  return { drilldownFormatters };
+}
 
 // src/utils/structs.ts
 function buildQuery(props) {
@@ -786,15 +792,16 @@ function buildFilter(props) {
     measure: props.measure || `${props.name}`,
     conditionOne: props.conditionOne || [
       props.const1 ? `${props.const1[0]}` : `${"gt" /* GT */}`,
-      props.const1 ? props.const1[1].toString() : props.inputtedValue || "0",
-      props.const1 ? props.const1[1] : parseNumeric(props.interpretedValue, 0)
-    ],
-    conditionTwo: props.conditionTwo || [
-      props.const2 ? `${props.const2[0]}` : `${"gt" /* GT */}`,
-      props.const2 ? props.const2[1].toString() : props.inputtedValue || "0",
-      props.const2 ? props.const2[1] : parseNumeric(props.interpretedValue, 0)
+      props.const1 ? props.const1[1].toString() : props.inputtedValue || "",
+      props.const1 ? props.const1[1] : parseNumeric(props.interpretedValue, NaN)
     ],
-    joint: props.joint === "or" ? "or" : "and"
+    conditionTwo: props.conditionTwo || (props.const2 ? [
+      `${props.const2[0]}`,
+      props.const2[1].toString(),
+      parseNumeric(props.const2[1].toString(), NaN)
+    ] : void 0),
+    joint: props.joint === "or" ? "or" : "and",
+    type: props.type
   };
 }
 function buildMeasure(props) {
@@ -978,13 +985,28 @@ function filterParse(item) {
   const condition = item.slice(indexName + 1);
   const joint = condition.includes(".and.") ? "and" : "or";
   const [cond1, cond2] = condition.split(`.${joint}.`);
+  const conditionOne = filterParseCondition(cond1);
+  const conditionTwo = cond2 ? filterParseCondition(cond2) : void 0;
+  let type;
+  if (conditionOne && conditionTwo) {
+    if (conditionOne[0] === "gte" /* GTE */ && conditionTwo[0] === "lte" /* LTE */) {
+      type = "between";
+    }
+  } else if (conditionOne) {
+    if (conditionOne[0] === "gte" /* GTE */ || conditionOne[0] === "gt" /* GT */) {
+      type = "greaterThan";
+    } else if (conditionOne[0] === "lte" /* LTE */ || conditionOne[0] === "lt" /* LT */) {
+      type = "lessThan";
+    }
+  }
   return {
     key: Math.random().toString(16).slice(2),
     active: true,
     measure: item.slice(0, indexName),
     joint,
-    conditionOne: filterParseCondition(cond1),
-    conditionTwo: cond2 ? filterParseCondition(cond2) : void 0
+    conditionOne,
+    conditionTwo,
+    type
   };
 }
 
@@ -2103,6 +2125,14 @@ function QueryProvider({ children, defaultCube }) {
         });
       });
       if (newQuery) {
+        Object.values(newQuery.params.filters).forEach((filter) => {
+          const currentFilter = Object.values(queryItem.params.filters).find(
+            (f) => f.measure === filter.measure
+          );
+          if (currentFilter) {
+            filter.type = currentFilter.type;
+          }
+        });
         const promises = [...restDrilldowns, ...Object.values(newQuery.params.drilldowns)].map(
           (dd) => {
             const currentDrilldown = queryItem.params.drilldowns[dd.key];
@@ -3117,26 +3147,60 @@ function getFiltersConditions(fn, value) {
   const comparisonMap = /* @__PURE__ */ new Map([
     [
       "greaterThan",
-      (value2) => ({
-        conditionOne: ["gte" /* GTE */, String(value2[0]), Number(value2[0])],
-        conditionTwo: ["gt" /* GT */, "0", 0]
-      })
+      (value2) => {
+        const val = value2[0] === "" ? "" : String(value2[0]);
+        const num = value2[0] === "" ? NaN : Number(value2[0]);
+        return {
+          conditionOne: ["gte" /* GTE */, val, num],
+          conditionTwo: void 0,
+          type: "greaterThan"
+        };
+      }
     ],
     [
       "lessThan",
-      (value2) => ({
-        conditionOne: ["lte" /* LTE */, String(value2[0]), Number(value2[0])],
-        conditionTwo: ["gt" /* GT */, "0", 0]
-      })
+      (value2) => {
+        const val = value2[0] === "" ? "" : String(value2[0]);
+        const num = value2[0] === "" ? NaN : Number(value2[0]);
+        return {
+          conditionOne: ["lte" /* LTE */, val, num],
+          conditionTwo: void 0,
+          type: "lessThan"
+        };
+      }
     ],
     [
       "between",
       (values) => {
         const [min, max] = values;
+        const isMinValid = min !== "" && min !== null && min !== void 0;
+        const isMaxValid = max !== "" && max !== null && max !== void 0;
+        if (isMinValid && isMaxValid) {
+          return {
+            conditionOne: ["gte" /* GTE */, String(min), Number(min)],
+            conditionTwo: ["lte" /* LTE */, String(max), Number(max)],
+            joint: "and",
+            type: "between"
+          };
+        }
+        if (isMinValid) {
+          return {
+            conditionOne: ["gte" /* GTE */, String(min), Number(min)],
+            conditionTwo: void 0,
+            type: "between"
+          };
+        }
+        if (isMaxValid) {
+          return {
+            conditionOne: ["lte" /* LTE */, String(max), Number(max)],
+            conditionTwo: void 0,
+            type: "between"
+          };
+        }
         return {
-          conditionOne: ["gte" /* GTE */, String(min), Number(min)],
-          conditionTwo: ["lte" /* LTE */, String(max), Number(max)],
-          joint: "and"
+          conditionOne: ["gte" /* GTE */, "", NaN],
+          conditionTwo: void 0,
+          type: "between"
         };
       }
     ]
@@ -3259,6 +3323,7 @@ function useTable({
   const { translate: t } = useTranslation();
   const { getFormat, getFormatter } = useFormatter();
   const { idFormatters } = useidFormatters();
+  const { drilldownFormatters } = useDrilldownFormatters();
   const { sortKey, sortDir } = useSelector$1(selectSortingParams);
   const theme = useMantineTheme();
   const isSmallerThanMd = useMediaQuery(
@@ -3412,6 +3477,8 @@ function useTable({
           const row = cell.row;
           const cellId = row.original[`${cell.column.id} ID`];
           const idFormatter = idFormatters[`${keyCol.localeLabel} ID`];
+          const drilldownFormatter = drilldownFormatters[`${keyCol.localeLabel}`] || drilldownFormatters[`${entity.name}`];
+          const formattedValue = drilldownFormatter ? drilldownFormatter(cellValue, locale) : cellValue;
           return /* @__PURE__ */ React15__default.createElement(Flex, { justify: "space-between", sx: { width: "100%", maxWidth: 400 }, gap: "sm" }, /* @__PURE__ */ React15__default.createElement(
             Text,
             {
@@ -3422,7 +3489,7 @@ function useTable({
                 textOverflow: "ellipsis"
               }
             },
-            cellValue
+            formattedValue
           ), /* @__PURE__ */ React15__default.createElement(Box, null, cellId && /* @__PURE__ */ React15__default.createElement(Text, { color: "dimmed" }, idFormatter ? idFormatter(cellId) : cellId)));
         }
       };
@@ -3723,12 +3790,13 @@ var MultiFilter = ({ header }) => {
   const { translate: t } = useTranslation();
   const cutItems = useSelector$1(selectCutItems);
   const drilldownItems = useSelector$1(selectDrilldownItems);
-  useSelector$1(selectLocale);
-  header.column.id;
+  const locale = useSelector$1(selectLocale);
+  const label = header.column.id;
   const localeLabel = header.column.columnDef.header;
   const drilldown = drilldownItems.find((d) => d.level === header.column.id);
   const actions2 = useActions();
   const { idFormatters } = useidFormatters();
+  const { drilldownFormatters } = useDrilldownFormatters();
   const navigate = useNavigate();
   const debouncedUpdateUrl = useMemo(
     () => debounce((query2) => {
@@ -3772,11 +3840,13 @@ var MultiFilter = ({ header }) => {
       value: cut.members || [],
       data: drilldown.members.map((m) => {
         const idFormatter = idFormatters[`${localeLabel} ID`];
+        const drilldownFormatter = drilldownFormatters[`${localeLabel}`] || drilldownFormatters[`${label}`];
         const formattedKey = idFormatter ? idFormatter(m.key) : m.key;
         const key = formattedKey ? `(${formattedKey})` : formattedKey;
+        const formattedCaption = drilldownFormatter ? drilldownFormatter(m.caption || m.key, locale.code) : m.caption;
         return {
           value: `${m.key}`,
-          label: m.caption ? `${m.caption} ${key}` : `${key}`
+          label: formattedCaption ? `${formattedCaption} ${key}` : `${key}`
         };
       }),
       clearButtonProps: { "aria-label": "Clear selection" },
@@ -3949,6 +4019,7 @@ function LevelItem({
   const drilldowns = useSelector$1(selectDrilldownMap);
   useSelector$1(selectDrilldownItems);
   const { idFormatters } = useidFormatters();
+  const { drilldownFormatters } = useDrilldownFormatters();
   const label = useMemo(() => {
     const captions = [
       getCaption(dimension, locale),
@@ -4057,11 +4128,13 @@ function LevelItem({
       value: (cut == null ? void 0 : cut.members) || [],
       data: currentDrilldown.members.map((m) => {
         const idFormatter = idFormatters[`${label} ID`];
+        const drilldownFormatter = drilldownFormatters[`${label}`];
         const formattedKey = idFormatter ? idFormatter(m.key) : m.key;
         const key = formattedKey ? `(${formattedKey})` : formattedKey;
+        const formattedCaption = drilldownFormatter ? drilldownFormatter(m.caption || m.key, locale) : m.caption;
         return {
           value: `${m.key}`,
-          label: m.caption ? `${m.caption} ${key}` : `${key}`
+          label: formattedCaption ? `${formattedCaption} ${key}` : `${key}`
         };
       }),
       clearable: true,
@@ -4132,6 +4205,9 @@ function getFilterfnKey(type) {
   }
 }
 function getFilterFn(filter) {
+  if (filter.type) {
+    return filter.type;
+  }
   if (filter.conditionOne && filter.conditionTwo) {
     if (filter.conditionOne[0] === "gte" /* GTE */ && filter.conditionTwo[0] === "lte" /* LTE */) {
       return "between";
@@ -4163,13 +4239,14 @@ function NumberInputComponent({ text, filter }) {
     };
   }, [debouncedUpdateUrl]);
   function getFilterValue(filter2) {
-    return isNotValid(filter2.conditionOne[2]) || filter2.conditionOne[2] === 0 ? "" : filter2.conditionOne[2];
+    return isNotValid(filter2.conditionOne[2]) ? "" : filter2.conditionOne[2];
   }
   function onInputChange({ filter: filter2, value }) {
     const isEmpty = value === "";
-    const conditions = getFiltersConditions(getFilterFn(filter2) || "greaterThan", [Number(value)]) || {};
+    const currentType = getFilterFn(filter2) || "greaterThan";
+    const conditions = getFiltersConditions(currentType, [value]) || {};
     const active = !isEmpty;
-    const newFilter = buildFilter({ ...filter2, active, ...conditions });
+    const newFilter = buildFilter({ ...filter2, active, ...conditions, type: currentType });
     actions2.updateFilter(newFilter);
     const newQuery = buildQuery(cloneDeep(queryItem));
     newQuery.params.filters[filter2.key] = newFilter;
@@ -4204,9 +4281,10 @@ var MinMax = ({ filter, hideControls, ...rest }) => {
   }, [debouncedUpdateUrl]);
   function onInputChangeMinMax(props) {
     const { filter: filter2, min: min2, max: max2 } = props;
-    const conditions = getFiltersConditions(getFilterFn(filter2) || "greaterThan", [Number(min2), Number(max2)]) || {};
-    const active = Boolean(min2) && Boolean(max2);
-    const newFilter = buildFilter({ ...filter2, active, ...conditions });
+    const currentType = getFilterFn(filter2) || "between";
+    const conditions = getFiltersConditions(currentType, [min2, max2]) || {};
+    const active = min2 !== "" || max2 !== "";
+    const newFilter = buildFilter({ ...filter2, active, ...conditions, type: currentType });
     actions2.updateFilter(newFilter);
     const newQuery = buildQuery(cloneDeep(queryItem));
     newQuery.params.filters[filter2.key] = newFilter;
@@ -4214,7 +4292,7 @@ var MinMax = ({ filter, hideControls, ...rest }) => {
   }
   function getFilterValue(condition) {
     if (condition) {
-      return isNotValid(condition[2]) || condition[2] === 0 ? "" : condition[2];
+      return isNotValid(condition[2]) ? "" : condition[2];
     }
     return "";
   }
@@ -4244,14 +4322,26 @@ var MinMax = ({ filter, hideControls, ...rest }) => {
 };
 function FilterFnsMenu({ filter }) {
   const actions2 = useActions();
+  const updateUrl = useUpdateUrl();
+  const queryItem = useSelector$1(selectCurrentQueryItem);
   const { translate: t } = useTranslation();
   return /* @__PURE__ */ React15__default.createElement(React15__default.Fragment, null, /* @__PURE__ */ React15__default.createElement(Menu, { shadow: "md", width: 200 }, /* @__PURE__ */ React15__default.createElement(Menu.Target, null, /* @__PURE__ */ React15__default.createElement(ActionIcon, { size: "xs" }, /* @__PURE__ */ React15__default.createElement(IconSettings, null))), /* @__PURE__ */ React15__default.createElement(Menu.Dropdown, null, /* @__PURE__ */ React15__default.createElement(Menu.Label, null, t("params.filter_mode")), /* @__PURE__ */ React15__default.createElement(
     Menu.Item,
     {
       icon: /* @__PURE__ */ React15__default.createElement(IconMathGreater, { size: 14 }),
       onClick: () => {
-        const conditions = getFiltersConditions("greaterThan", [0]) || {};
-        actions2.updateFilter(buildFilter({ ...filter, ...conditions, active: false }));
+        const currentType = "greaterThan";
+        const conditions = getFiltersConditions(currentType, [""]) || {};
+        const newFilter = buildFilter({
+          ...filter,
+          ...conditions,
+          active: false,
+          type: currentType
+        });
+        actions2.updateFilter(newFilter);
+        const newQuery = buildQuery(cloneDeep(queryItem));
+        newQuery.params.filters[filter.key] = newFilter;
+        updateUrl(newQuery);
       }
     },
     t("comparison.GT")
@@ -4260,8 +4350,18 @@ function FilterFnsMenu({ filter }) {
     {
       icon: /* @__PURE__ */ React15__default.createElement(IconMathLower, { size: 14 }),
       onClick: () => {
-        const conditions = getFiltersConditions("lessThan", [0]) || {};
-        actions2.updateFilter(buildFilter({ ...filter, ...conditions, active: false }));
+        const currentType = "lessThan";
+        const conditions = getFiltersConditions(currentType, [""]) || {};
+        const newFilter = buildFilter({
+          ...filter,
+          ...conditions,
+          active: false,
+          type: currentType
+        });
+        actions2.updateFilter(newFilter);
+        const newQuery = buildQuery(cloneDeep(queryItem));
+        newQuery.params.filters[filter.key] = newFilter;
+        updateUrl(newQuery);
       }
     },
     t("comparison.LT")
@@ -4270,8 +4370,18 @@ function FilterFnsMenu({ filter }) {
     {
       icon: /* @__PURE__ */ React15__default.createElement(IconArrowsLeftRight, { size: 14 }),
       onClick: () => {
-        const conditions = getFiltersConditions("between", [0, 0]) || {};
-        actions2.updateFilter(buildFilter({ ...filter, ...conditions, active: false }));
+        const currentType = "between";
+        const conditions = getFiltersConditions(currentType, ["", ""]) || {};
+        const newFilter = buildFilter({
+          ...filter,
+          ...conditions,
+          active: false,
+          type: currentType
+        });
+        actions2.updateFilter(newFilter);
+        const newQuery = buildQuery(cloneDeep(queryItem));
+        newQuery.params.filters[filter.key] = newFilter;
+        updateUrl(newQuery);
       }
     },
     t("comparison.BT")
@@ -6528,6 +6638,7 @@ function ExplorerComponent(props) {
       defaultMembersFilter: props.defaultMembersFilter,
       formatters: props.formatters,
       idFormatters: props.idFormatters,
+      drilldownFormatters: props.drilldownFormatters,
       withPermalink: props.withPermalink,
       panels,
       pagination,
@@ -6649,6 +6760,31 @@ var iconByFormat = {
   png: IconPhotoDown,
   svg: IconVectorTriangle
 };
+var ChartRenderer = memo((props) => {
+  const { ChartComponent, config, containerRef, overlayRef, onReady } = props;
+  React15__default.useEffect(() => {
+    const box = containerRef.current;
+    if (!box) return;
+    const checkSvg = () => {
+      const svg = box.querySelector("svg");
+      if (svg) {
+        if (overlayRef.current) {
+          overlayRef.current.style.display = "none";
+        }
+        onReady();
+        return true;
+      }
+      return false;
+    };
+    if (checkSvg()) return;
+    const observer = new MutationObserver(() => {
+      if (checkSvg()) observer.disconnect();
+    });
+    observer.observe(box, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  }, [containerRef, overlayRef, onReady]);
+  return /* @__PURE__ */ React15__default.createElement(ChartComponent, { config });
+});
 function ChartCard(props) {
   const { chart, isFullMode, onFocus, height } = props;
   const { dataset } = chart.datagroup;
@@ -6723,8 +6859,46 @@ function ChartCard(props) {
       copied ? translate("share_copied") : translate("action_share")
     ));
   }, [translate]);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [shouldRenderChart, setShouldRenderChart] = useState(false);
+  const overlayRef = useRef(null);
+  React15__default.useEffect(() => {
+    setIsLoaded(false);
+    setShouldRenderChart(false);
+    if (overlayRef.current) {
+      overlayRef.current.style.display = "block";
+    }
+  }, [chart.key]);
+  React15__default.useEffect(() => {
+    if (ChartComponent && (inView || hasBeenInView) && !shouldRenderChart) {
+      const timer = setTimeout(() => {
+        window.requestAnimationFrame(() => {
+          window.requestAnimationFrame(() => {
+            setShouldRenderChart(true);
+          });
+        });
+      }, 500);
+      return () => clearTimeout(timer);
+    }
+  }, [ChartComponent, inView, hasBeenInView, shouldRenderChart]);
+  React15__default.useEffect(() => {
+    const box = nodeRef.current;
+    if (!box || !shouldRenderChart || isLoaded) return;
+    const observer = new MutationObserver(() => {
+      const svg = box.querySelector("svg");
+      if (svg) {
+        window.requestAnimationFrame(() => setIsLoaded(true));
+        observer.disconnect();
+      }
+    });
+    observer.observe(box, { childList: true, subtree: true });
+    if (box.querySelector("svg")) {
+      setIsLoaded(true);
+    }
+    return () => observer.disconnect();
+  }, [shouldRenderChart, isLoaded]);
   if (!ChartComponent || !config) return null;
-  const resolvedHeight = height ? height : isFullMode ? "calc(100vh - 3rem)" : 400;
+  const resolvedHeight = height ? height : isFullMode ? "calc(100vh - 3rem)" : "calc((80vh - 4rem) / 2)";
   return /* @__PURE__ */ React15__default.createElement(ErrorBoundary, { ErrorContent: CardErrorComponent }, /* @__PURE__ */ React15__default.createElement(
     Paper,
     {
@@ -6735,11 +6909,42 @@ function ChartCard(props) {
     /* @__PURE__ */ React15__default.createElement(Stack, { spacing: "xs", p: "xs", style: { position: "relative" }, h: "100%", w: "100%" }, /* @__PURE__ */ React15__default.createElement(Group, { position: "center", spacing: "xs", align: "center" }, isFullMode && shareButton, downloadButtons, onFocus && focusButton), /* @__PURE__ */ React15__default.createElement(
       Box,
       {
-        style: { flex: "1 1 auto" },
+        style: { flex: "1 1 auto", position: "relative" },
         ref: setRefs,
         sx: { "& > .viz": { height: "100%" } }
       },
-      ChartComponent && (inView || hasBeenInView) ? /* @__PURE__ */ React15__default.createElement(ChartComponent, { config }) : /* @__PURE__ */ React15__default.createElement("div", { style: { height: "100%", width: "100%" } })
+      /* @__PURE__ */ React15__default.createElement(
+        Box,
+        {
+          ref: overlayRef,
+          style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 100
+          }
+        },
+        /* @__PURE__ */ React15__default.createElement(
+          LoadingOverlay,
+          {
+            visible: !isLoaded,
+            overlayBlur: 2,
+            transitionDuration: 0
+          }
+        )
+      ),
+      ChartComponent && (inView || hasBeenInView) && shouldRenderChart ? /* @__PURE__ */ React15__default.createElement(
+        ChartRenderer,
+        {
+          ChartComponent,
+          config,
+          containerRef: nodeRef,
+          overlayRef,
+          onReady: () => setIsLoaded(true)
+        }
+      ) : /* @__PURE__ */ React15__default.createElement("div", { style: { height: "100%", width: "100%" } })
     ))
   ));
 }
@@ -6795,8 +7000,12 @@ function Vizbuilder(props) {
     chartLimits,
     chartTypes,
     datacap,
+    getFormatter,
     getTopojsonConfig,
     NonIdealState: NonIdealState2,
+    postprocessConfig,
+    showConfidenceInt,
+    translate,
     ViewErrorComponent
   } = useVizbuilderContext();
   const { actions: actions2 } = useSettings();
@@ -6812,21 +7021,46 @@ function Vizbuilder(props) {
     });
     return Object.fromEntries(charts2.map((chart2) => [chart2.key, chart2]));
   }, [chartLimits, chartTypes, datacap, datasets, getTopojsonConfig]);
+  const filteredCharts = useMemo(() => {
+    const list = Object.values(charts);
+    const builderParams = {
+      fullMode: false,
+      getFormatter,
+      showConfidenceInt,
+      t: translate
+    };
+    return list.filter((chart2) => {
+      const builder = d3plusConfigBuilder[chart2.type];
+      if (!builder) return false;
+      const config = builder(chart2, builderParams);
+      const finalConfig = postprocessConfig(config, chart2, builderParams);
+      return finalConfig !== false;
+    });
+  }, [charts, getFormatter, postprocessConfig, showConfidenceInt, translate]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const pageSize = 4;
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [datasets, charts]);
   const content = useMemo(() => {
     const isLoading = datasets.some((dataset) => Object.keys(dataset.columns).length === 0);
     if (isLoading) {
       console.debug("Loading datasets...", datasets);
       return /* @__PURE__ */ React15__default.createElement(NonIdealState2, { status: "loading" });
     }
-    const chartList = Object.values(charts).slice(0, 10);
-    if (chartList.length === 0) {
+    const chartList = filteredCharts.slice(
+      (currentPage - 1) * pageSize,
+      currentPage * pageSize
+    );
+    if (filteredCharts.length === 0) {
       if (datasets.length === 1 && datasets[0].data.length === 1) {
         return /* @__PURE__ */ React15__default.createElement(NonIdealState2, { status: "one-row" });
       }
       return /* @__PURE__ */ React15__default.createElement(NonIdealState2, { status: "empty" });
     }
     const isSingleChart = chartList.length === 1;
-    return /* @__PURE__ */ React15__default.createElement(
+    const totalPages = Math.ceil(filteredCharts.length / pageSize);
+    return /* @__PURE__ */ React15__default.createElement(Stack, { spacing: "xl" }, /* @__PURE__ */ React15__default.createElement(
       "div",
       {
         className: cx("vb-scrollcontainer", classes.grid, {
@@ -6854,8 +7088,17 @@ function Vizbuilder(props) {
           }
         );
       })
-    );
-  }, [charts, classes, cx, datasets, NonIdealState2]);
+    ), totalPages > 1 && /* @__PURE__ */ React15__default.createElement(
+      Pagination,
+      {
+        total: totalPages,
+        value: currentPage,
+        onChange: setCurrentPage,
+        position: "center",
+        mb: "xl"
+      }
+    ));
+  }, [filteredCharts, currentPage, classes, cx, datasets, NonIdealState2, actions2]);
   const currentChart = (queryItem == null ? void 0 : queryItem.chart) || "";
   const chart = charts[currentChart];
   return /* @__PURE__ */ React15__default.createElement("div", { className: cls("vb-wrapper", classes.wrapper, props.className) }, props.customHeader, /* @__PURE__ */ React15__default.createElement(ErrorBoundary, { ErrorContent: ViewErrorComponent }, content), props.customFooter, /* @__PURE__ */ React15__default.createElement(
@@ -6883,7 +7126,7 @@ function useVizbuilderData() {
   });
   return query;
 }
-var LoadingOverlay3 = () => {
+var LoadingOverlay4 = () => {
   const { translate: t } = useTranslation();
   const { loading: isLoading, message } = useSelector$1(selectLoadingState);
   const description = !message ? void 0 : message.type === "HEAVY_QUERY" ? t("loading.message_heavyquery", message) : (
@@ -6910,7 +7153,7 @@ function VizbuilderView(props) {
   const { cube, params } = props;
   const query = useVizbuilderData();
   if (query.isLoading) {
-    return /* @__PURE__ */ React15__default.createElement(LoadingOverlay3, { visible: true });
+    return /* @__PURE__ */ React15__default.createElement(LoadingOverlay4, { visible: true });
   }
   const data = query.data;
   const types = (_a = query.data) == null ? void 0 : _a.types;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datawheel/data-explorer",
-  "version": "1.3.3",
+  "version": "1.4.1",
   "main": "./dist/main.mjs",
   "types": "./dist/main.d.mts",
   "files": [