@datawheel/data-explorer 0.2.11 → 0.3.0

package/dist/main.js

@@ -1,10 +1,9 @@
-import { keyframes, createStyles, Select, rem, Flex, Title, Text, Group, Button, Input, Box, Stack, SimpleGrid, ScrollArea, LoadingOverlay, Table, MultiSelect, Center, NumberInput, Menu, ActionIcon, UnstyledButton, Alert, Loader, Container, Modal, useMantineTheme, MantineProvider, Paper, useComponentDefaultProps, Anchor, Tabs, Switch, ThemeIcon, Tooltip, CloseButton, Drawer, Divider, Checkbox, packSx, Affix, Accordion, Popover } from '@mantine/core';
+import { keyframes, createStyles, Select, rem, Input, Box, Text, Stack, Group, Button, SimpleGrid, Flex, ScrollArea, LoadingOverlay, Table, MultiSelect, Center, NumberInput, Menu, ActionIcon, UnstyledButton, Alert, Loader, Container, Title, useMantineTheme, MantineProvider, Modal, useComponentDefaultProps, Anchor, Paper, Tabs, Switch, ThemeIcon, Tooltip, CloseButton, Drawer, Divider, Checkbox, packSx, Affix, Accordion, Popover } from '@mantine/core';
 import { useClipboard, useClickOutside, useFullscreen, useDebouncedState, useMediaQuery, useDisclosure } from '@mantine/hooks';
-import { IconWorld, IconExternalLink, IconClipboard, IconSettings, IconMathGreater, IconMathLower, IconArrowsLeftRight, IconAlertCircle, IconAlertTriangle, IconCopy, IconDownload, IconDotsVertical, IconArrowRight, IconArrowLeft, IconArrowsMinimize, IconArrowsMaximize, IconTrash, IconInfoCircleFilled, IconSearch, IconPhotoDown, IconVectorTriangle, IconArrowsSort, IconSortDescendingNumbers, IconSortDescendingLetters, IconSortAscendingNumbers, IconSortAscendingLetters, IconPlus, IconStack3, IconFilterOff, IconFilter, IconAdjustments, IconBox, IconClock, IconHelpCircle, IconLanguage } from '@tabler/icons-react';
+import { IconWorld, IconExternalLink, IconClipboard, IconSettings, IconMathGreater, IconMathLower, IconArrowsLeftRight, IconAlertCircle, IconAlertTriangle, IconCopy, IconDownload, IconDotsVertical, IconArrowRight, IconArrowLeft, IconTrash, IconInfoCircleFilled, IconSearch, IconBrandGithub, IconArrowsMinimize, IconArrowsMaximize, IconArrowsSort, IconSortDescendingNumbers, IconSortDescendingLetters, IconSortAscendingNumbers, IconSortAscendingLetters, IconPlus, IconStack3, IconFilterOff, IconFilter, IconAdjustments, IconBox, IconClock, IconHelpCircle, IconLanguage, IconPhotoDown, IconVectorTriangle } from '@tabler/icons-react';
 import * as React13 from 'react';
-import React13__default, { createContext, forwardRef, useMemo, useCallback, useContext, useRef, useEffect, useState, Suspense, useLayoutEffect } from 'react';
+import React13__default, { createContext, forwardRef, useMemo, useCallback, useContext, useRef, useEffect, useState, Suspense, useLayoutEffect, Component } from 'react';
 import { translationFactory } from '@datawheel/use-translation';
-import { translationDict, generateCharts, createChartConfig } from '@datawheel/vizbuilder';
 import { createSlice, createSelector, combineReducers, bindActionCreators, configureStore } from '@reduxjs/toolkit';
 import { useSelector as useSelector$1, useStore, Provider as Provider$1 } from 'react-redux';
 import ISO6391 from 'iso-639-1';
@@ -15,7 +14,8 @@ import { formatAbbreviate, format } from 'd3plus-format';
 import { TourProvider, useTour } from '@reactour/tour';
 import yn from 'yn';
 import { matchSorter } from 'match-sorter';
-import { BarChart, Donut, Geomap, LinePlot, Pie, StackedArea, Treemap } from 'd3plus-react';
+import { generateCharts } from '@datawheel/vizbuilder';
+import { BarChart, Geomap, Donut, LinePlot, StackedArea, Treemap } from 'd3plus-react';
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -58,7 +58,7 @@ var init_esm_shims = __esm({
 
 // node_modules/file-saver/FileSaver.js
 var require_FileSaver = __commonJS({
-  "node_modules/file-saver/FileSaver.js"(exports, module) {
+  "node_modules/file-saver/FileSaver.js"(exports2, module2) {
     init_esm_shims();
     var saveAs2 = saveAs2 || function(view) {
       if (typeof view === "undefined" || typeof navigator !== "undefined" && /MSIE [1-9]\./.test(navigator.userAgent)) {
@@ -170,10 +170,10 @@ var require_FileSaver = __commonJS({
       FS_proto.error = FS_proto.onwritestart = FS_proto.onprogress = FS_proto.onwrite = FS_proto.onabort = FS_proto.onerror = FS_proto.onwriteend = null;
       return saveAs3;
     }(
-      typeof self !== "undefined" && self || typeof window !== "undefined" && window || exports.content
+      typeof self !== "undefined" && self || typeof window !== "undefined" && window || exports2.content
     );
-    if (typeof module !== "undefined" && module.exports) {
-      module.exports.saveAs = saveAs2;
+    if (typeof module2 !== "undefined" && module2.exports) {
+      module2.exports.saveAs = saveAs2;
     } else if (typeof define !== "undefined" && define !== null && define.amd !== null) {
       define("FileSaver.js", function() {
         return saveAs2;
@@ -441,7 +441,41 @@ var defaultTranslation = {
     selected_items: "Selected items",
     unselected_items: "Unselected items"
   },
-  vizbuilder: translationDict
+  vizbuilder: {
+    action_close: "Close",
+    action_enlarge: "Enlarge",
+    action_fileissue: "File an issue",
+    action_retry: "Retry",
+    aggregators: {
+      avg: "Average",
+      max: "Max",
+      min: "Min",
+      sum: ""
+    },
+    chart_labels: {
+      ci: "Confidence Interval",
+      moe: "Margin of Error",
+      source: "Source",
+      collection: "Collection"
+    },
+    error: {
+      detail: "",
+      message: 'Details: "{{message}}".',
+      title: "Error"
+    },
+    sentence_connectors: {
+      and: "and"
+    },
+    title: {
+      nonidealstate: "No results",
+      of_selected_cut_members: "of Selected {{members}} Members",
+      top_drilldowns: "for Top {{drilldowns}}",
+      by_drilldowns: "by {{drilldowns}}",
+      over_time: "Over Time",
+      measure_and_modifier: "{{modifier}} {{measure}}",
+      total: "Total"
+    }
+  }
 };
 var { useTranslation, TranslationConsumer, TranslationProvider } = translationFactory({
   defaultLocale: "en",
@@ -542,6 +576,17 @@ function sortByDate(array, key, descendent = true) {
   const sorterFunction = descendent ? (a, b) => Date.parse(b[key]) - Date.parse(a[key]) : (a, b) => Date.parse(a[key]) - Date.parse(b[key]);
   return array.slice().sort(sorterFunction);
 }
+function next(iterable, condition) {
+  let result = iterable.next();
+  while (!result.done) {
+    if (condition(result.value)) return result.value;
+    result = iterable.next();
+  }
+}
+function getLast(array) {
+  if (array.length === 0) throw new Error("Attempt to get last element from empty array");
+  return array[array.length - 1];
+}
 
 // src/utils/structs.ts
 init_esm_shims();
@@ -844,55 +889,117 @@ init_esm_shims();
 
 // src/api/traverse.ts
 init_esm_shims();
-function mapCubeEntities(cube) {
-  return {
-    ...mapLevels(cube),
-    ...mapProperties(cube),
-    ...mapAllMeasures(cube)
-  };
+function entityFinder(cube, name4) {
+  const nameWithoutID = name4.replace(/\sID$/, "");
+  const nameWithID = `${nameWithoutID} ID`;
+  const maybeMeasure = next(yieldMeasures(cube), (item) => item[0].name === name4);
+  if (maybeMeasure) return maybeMeasure;
+  const maybeLevel = next(
+    yieldLevels(cube),
+    (item) => item[0].name === nameWithoutID || item[0].name === nameWithID
+  );
+  if (maybeLevel) return maybeLevel;
+  const maybeProperty = next(yieldProperties(cube), (item) => item[0].name === name4);
+  if (maybeProperty) return maybeProperty;
+  throw new Error(`Missing entity in cube '${cube.name}': ${nameWithoutID}`);
 }
 function mapDimensionHierarchyLevels(cube) {
   return Object.fromEntries(
-    Array.from(yieldDimensionHierarchyLevels(cube), (tuple) => [tuple[2].name, tuple])
+    Array.from(yieldLevels(cube), (tuple) => [tuple[0].name, tuple])
   );
 }
-function mapLevels(cube) {
-  return Object.fromEntries(
-    Array.from(yieldDimensionHierarchyLevels(cube), (tuple) => [tuple[2].name, tuple[2]])
+function yieldDimensions(cube) {
+  let i = 0;
+  return {
+    next() {
+      if (i < cube.dimensions.length) {
+        const dimension = cube.dimensions[i++];
+        return { value: [dimension], done: false };
+      }
+      return { value: void 0, done: true };
+    },
+    [Symbol.iterator]() {
+      return this.next();
+    }
+  };
+}
+function yieldHierarchies(cube) {
+  return createGenerator(
+    () => yieldDimensions(cube),
+    (item) => item[0].hierarchies
   );
 }
-function mapProperties(cube) {
-  return Object.fromEntries(
-    Object.values(mapLevels(cube)).flatMap(
-      (level) => level.properties.map((prop) => [prop.name, prop])
-    )
+function yieldLevels(cube) {
+  return createGenerator(
+    () => yieldHierarchies(cube),
+    (item) => item[0].levels
   );
 }
-function mapAllMeasures(cube) {
-  return Object.fromEntries(
-    Array.from(yieldAllMeasures(cube), (item) => [item.name, item])
+function yieldProperties(cube) {
+  return createGenerator(
+    () => yieldLevels(cube),
+    (item) => item[0].properties
   );
 }
-function* yieldDimensionHierarchyLevels(cube) {
-  for (const dimension of cube.dimensions) {
-    for (const hierarchy of dimension.hierarchies) {
-      for (const level of hierarchy.levels) {
-        yield [dimension, hierarchy, level];
+function createGenerator(baseIterator, extractItems) {
+  const iterator = baseIterator();
+  let currentItem = iterator.next();
+  let index = 0;
+  return {
+    next() {
+      while (!currentItem.done) {
+        const item = currentItem.value;
+        const items = extractItems(item);
+        if (index < items.length) {
+          return { value: [items[index++], ...item], done: false };
+        }
+        index = 0;
+        currentItem = iterator.next();
       }
+      return { value: void 0, done: true };
+    },
+    [Symbol.iterator]() {
+      return this;
     }
-  }
+  };
 }
-function* yieldAllMeasures(cube) {
-  for (const measure of cube.measures) {
-    yield measure;
-    yield* measure.attached;
-  }
+function yieldMeasures(cube) {
+  let measureIndex = 0;
+  let attachedIndex = 0;
+  let inAttached = false;
+  return {
+    next() {
+      if (inAttached) {
+        const measure = cube.measures[measureIndex];
+        if (attachedIndex < measure.attached.length) {
+          return {
+            value: [measure.attached[attachedIndex++], measure],
+            done: false
+          };
+        }
+        inAttached = false;
+        attachedIndex = 0;
+        measureIndex++;
+      }
+      if (measureIndex < cube.measures.length) {
+        inAttached = true;
+        return { value: [cube.measures[measureIndex], void 0], done: false };
+      }
+      return { done: true };
+    },
+    [Symbol.iterator]() {
+      return this;
+    }
+  };
 }
 
 // src/utils/validation.ts
 init_esm_shims();
 function noop() {
 }
+function isIn(property, container) {
+  return Object.prototype.hasOwnProperty.call(container, property);
+}
 function hasProperty(container, property) {
   return typeof container === "object" && container != null && Object.hasOwn(container, property);
 }
@@ -971,18 +1078,14 @@ function getOrderValue(schemaObject) {
   const value = schemaObject.annotations.order || "NaN";
   return parseNumeric(value, 99);
 }
-function describeData(cube, params, data) {
+function describeData(cube, params, result) {
   const { locale } = params;
-  const entityMap = mapCubeEntities(cube);
-  const entityFinder = (name4) => {
-    const nameWoId = name4.replace(/^ID\s|\sID$/, "");
-    return entityMap[name4] || entityMap[nameWoId];
-  };
   return Object.fromEntries(
-    filterMap(Object.keys(data[0] || {}), (column) => {
-      const entity = entityFinder(column);
-      if (!entity) return null;
-      const typeSet = new Set(data.map((item) => typeof item[column]));
+    filterMap(result.columns, (column) => {
+      const entityResult = entityFinder(cube, column);
+      if (!entityResult) return null;
+      const [entity] = entityResult;
+      const typeSet = new Set(result.data.map((item) => typeof item[column]));
       const valueType = typeSet.size === 1 ? typeSet.has("number") ? "number" : typeSet.has("boolean") ? "boolean" : (
         /* else */
         "string"
@@ -997,7 +1100,7 @@ function describeData(cube, params, data) {
           entity,
           entityType,
           isId,
-          range: valueType === "number" ? getDomain(data, column) : void 0,
+          range: valueType === "number" ? getDomain(result.data, column) : void 0,
           valueType
         }
       ];
@@ -1796,7 +1899,7 @@ function willFetchQuery(params) {
         return {
           data: content.data,
           page: content.page,
-          types: describeData(cube, params2, content.data),
+          types: describeData(cube, params2, content),
           headers: Object.fromEntries(response.headers),
           status: response.status || 200,
           url: response.url
@@ -1837,7 +1940,7 @@ function willHydrateParams(suggestedCube = "") {
         )
       );
       const resolvedDrilldowns = filterMap(Object.values(params.drilldowns), (item) => {
-        const [dimension, hierarchy, level] = levelMap[item.level] || [];
+        const [level, hierarchy, dimension] = levelMap[item.level] || [];
         if (!level) return null;
         const activeProperties = filterMap(
           item.properties,
@@ -1893,7 +1996,8 @@ function willParseQueryUrl(url) {
     return Promise.resolve();
   };
 }
-function willReloadCubes({ locale } = {}) {
+function willReloadCubes(params) {
+  const { locale } = params || {};
   return (dispatch, getState, { tesseract }) => {
     const state = getState();
     const newLocale = locale || selectLocale(state);
@@ -2429,14 +2533,14 @@ var SelectObject = forwardRef(function(props, ref) {
   var _a;
   const {
     getLabel,
-    getValue = identity,
+    getValue: getValue2 = identity,
     items,
     onItemSelect,
     selectedItem,
     selectProps = {}
   } = props;
   const [itemList, itemMap] = useMemo(() => {
-    const valueAccessor = accesorFactory(getValue);
+    const valueAccessor = accesorFactory(getValue2);
     const labelAccessor = getLabel ? accesorFactory(getLabel) : valueAccessor;
     const list = items.map((item) => ({
       label: labelAccessor(item),
@@ -2444,13 +2548,13 @@ var SelectObject = forwardRef(function(props, ref) {
       item
     }));
     return [list, keyBy(list, (option) => option.value)];
-  }, [items, getLabel, getValue]);
+  }, [items, getLabel, getValue2]);
   const selected = useMemo(() => {
     if (selectedItem == null) return null;
     if (typeof selectedItem === "string") return selectedItem;
-    const valueAccessor = accesorFactory(getValue);
+    const valueAccessor = accesorFactory(getValue2);
     return valueAccessor(selectedItem);
-  }, [selectedItem, getValue]);
+  }, [selectedItem, getValue2]);
   const itemSelectHandler = (value) => {
     onItemSelect && onItemSelect(itemMap[value].item);
   };
@@ -3723,8 +3827,8 @@ function PropertiesMultiSelect({ item }) {
     (item2) => isActiveItem(item2) ? item2.key : null
   );
   const label = useMemo(() => {
-    const triad = levelTriadMap[`${item.level}`];
-    const triadCaptions = triad.map((item2) => getCaption(item2, locale.code));
+    const triad = levelTriadMap[item.level] || [];
+    const triadCaptions = triad.map((item2) => getCaption(item2, locale.code)).reverse();
     return t("params.tag_drilldowns", {
       abbr: abbreviateFullName(triadCaptions, t("params.tag_drilldowns_abbrjoint")),
       dimension: triadCaptions[0],
@@ -3732,7 +3836,7 @@ function PropertiesMultiSelect({ item }) {
       level: triadCaptions[2],
       propCount: activeProperties.length
     });
-  }, [activeProperties.join("-"), item, locale.code]);
+  }, [activeProperties.length, levelTriadMap, item, locale.code, t]);
   return /* @__PURE__ */ React13__default.createElement(Box, { pt: "md" }, /* @__PURE__ */ React13__default.createElement(
     MultiSelect,
     {
@@ -3947,9 +4051,9 @@ function FilterItem2({
 }
 var getIconForDimensionType = (dimensionType) => {
   switch (dimensionType) {
-    case "geo":
+    case "geo" /* GEO */:
       return /* @__PURE__ */ React13__default.createElement(IconWorld, { size: 20 });
-    case "time":
+    case "time" /* TIME */:
       return /* @__PURE__ */ React13__default.createElement(IconClock, { size: 20 });
     default:
       return /* @__PURE__ */ React13__default.createElement(IconBox, { size: 20 });
@@ -4587,7 +4691,7 @@ function SideBar(props) {
       id: "dex-sidebar",
       py: "md",
       sx: (t2) => ({
-        height: "calc(100vh - 50px)",
+        height: "100%",
         backgroundColor: t2.colorScheme === "dark" ? t2.colors.dark[8] : t2.colors.gray[1],
         boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
         maxWidth: expanded ? 300 : 54,
@@ -4597,7 +4701,7 @@ function SideBar(props) {
         [t2.fn.smallerThan("md")]: {
           position: "absolute",
           width: expanded ? 300 : 0,
-          height: expanded ? "calc(100vh - 50px)" : 0,
+          height: expanded ? "100%" : 0,
           bottom: expanded ? "unset" : t2.spacing.md,
           left: expanded ? "unset" : t2.spacing.md,
           overflow: "hidden",
@@ -4850,7 +4954,7 @@ function AccordionControl(props) {
 }
 function getKeys2(items, k, locale, filter) {
   let cubes = items;
-  const keys = cubes.reduce((prev, curr) => {
+  const keys2 = cubes.reduce((prev, curr) => {
     const key = getAnnotation(curr, k, locale);
     if (key) {
       prev.add(key);
@@ -4858,7 +4962,7 @@ function getKeys2(items, k, locale, filter) {
     }
     return prev;
   }, /* @__PURE__ */ new Set());
-  return Array.from(keys);
+  return Array.from(keys2);
 }
 function isSelected(selectedItem, currentItem) {
   if (selectedItem && currentItem) {
@@ -5084,7 +5188,7 @@ var useStyles4 = createStyles((theme, params) => ({
     display: "flex",
     flexFlow: "column nowrap",
     position: "relative",
-    height: "calc(100% - 70px)",
+    height: "100%",
     [theme.fn.largerThan("md")]: {
       flexDirection: "row"
       // height: params.height,
@@ -5093,7 +5197,7 @@ var useStyles4 = createStyles((theme, params) => ({
   },
   flexCol: {
     flex: "1 1 auto",
-    height: "calc(100vh - 70px)",
+    height: "100%",
     [theme.fn.largerThan("md")]: {
       width: 0,
       paddingLeft: 0
@@ -5479,7 +5583,7 @@ function PivotView(props) {
   const drilldownOptions = useMemo(() => {
     const levelMap = mapDimensionHierarchyLevels(cube);
     return Object.values(params.drilldowns).filter(isActiveItem).flatMap((item) => {
-      const [dimension, hierarchy, level] = levelMap[item.level];
+      const [level, hierarchy, dimension] = levelMap[item.level];
       const caption = getCaption(level, locale);
       const type = dimension.type;
       const propertyMap = keyBy(level.properties, "name");
@@ -5533,7 +5637,7 @@ function PivotView(props) {
     const drilldownCount = Object.values(params.drilldowns).filter(isActiveItem).length;
     if (drilldownCount > 2) {
       warnings2.push(
-        valProp.type !== "sum" /* sum */ ? /* @__PURE__ */ React13__default.createElement(
+        valProp.type !== "Sum" /* SUM */ ? /* @__PURE__ */ React13__default.createElement(
           Alert,
           {
             color: "yellow",
@@ -5993,7 +6097,7 @@ var withBase = (styles2) => (base) => ({ ...base, ...styles2 });
 var keyboardHandler = (rtl) => (e, clickProps) => {
   e.stopPropagation();
   if (!clickProps) return;
-  function next() {
+  function next2() {
     if (clickProps.currentStep === clickProps.steps.length - 1) {
       clickProps.setIsOpen(false);
       clickProps.setCurrentStep(0);
@@ -6021,13 +6125,13 @@ var keyboardHandler = (rtl) => (e, clickProps) => {
     if (rtl) {
       prev();
     } else {
-      next();
+      next2();
     }
   }
   if (e.keyCode === 37) {
     e.preventDefault();
     if (rtl) {
-      next();
+      next2();
     } else {
       prev();
     }
@@ -6174,9 +6278,70 @@ function ExplorerComponent(props) {
 }
 ExplorerComponent.displayName = "TesseractExplorer";
 
+// src/vizbuilder/index.ts
+init_esm_shims();
+
 // src/vizbuilder/components/VizbuilderView.tsx
 init_esm_shims();
 
+// src/vizbuilder/tooling/columns.ts
+init_esm_shims();
+function buildColumn(cube, name4, columns) {
+  const nameWithoutID = name4.replace(/\sID$/, "");
+  const nameWithID = `${nameWithoutID} ID`;
+  const maybeMeasure = next(yieldMeasures(cube), (item) => item[0].name === name4);
+  if (maybeMeasure) {
+    const [measure, parentMeasure] = maybeMeasure;
+    return {
+      name: name4,
+      type: "measure",
+      measure,
+      parentMeasure,
+      parentRelationship: void 0
+      // TODO
+    };
+  }
+  const maybeLevel = next(
+    yieldLevels(cube),
+    (item) => item[0].name === nameWithoutID || item[0].name === nameWithID
+  );
+  if (maybeLevel) {
+    const [level, hierarchy, dimension] = maybeLevel;
+    const hasID = columns.includes(nameWithID);
+    return {
+      name: name4,
+      type: "level",
+      dimension,
+      hierarchy,
+      level,
+      isID: !hasID || name4 === nameWithID,
+      hasID
+    };
+  }
+  const maybeProperty = next(yieldProperties(cube), (item) => item[0].name === name4);
+  if (maybeProperty) {
+    const [property, level, hierarchy, dimension] = maybeProperty;
+    return {
+      name: name4,
+      type: "property",
+      dimension,
+      hierarchy,
+      level,
+      property
+    };
+  }
+  throw new Error(`Missing entity in cube '${cube.name}': ${nameWithoutID}`);
+}
+function getColumnEntity(column) {
+  if (column.type === "measure") return column.measure;
+  if (column.type === "level") return column.level;
+  if (column.type === "property") return column.property;
+  throw new Error("Invalid column object");
+}
+
+// src/vizbuilder/components/Vizbuilder.tsx
+init_esm_shims();
+
 // node_modules/clsx/dist/clsx.m.js
 init_esm_shims();
 function r(e) {
@@ -6192,38 +6357,6 @@ function clsx() {
 }
 var clsx_m_default = clsx;
 
-// src/vizbuilder/tooling/accesor.ts
-init_esm_shims();
-function measureConfigAccessor(config) {
-  if (typeof config === "function") {
-    return config;
-  }
-  return (item) => config[item.name];
-}
-
-// src/vizbuilder/tooling/collection.ts
-init_esm_shims();
-function asArray2(value) {
-  const target = [];
-  return target.concat(value).filter((item) => item != null);
-}
-function mapActives(dict, mapFn) {
-  return Object.values(dict).filter((item) => item.active).map(mapFn);
-}
-
-// src/vizbuilder/tooling/constants.ts
-init_esm_shims();
-var DEFAULT_CHART_LIMITS = {
-  BARCHART_MAX_BARS: 20,
-  BARCHART_YEAR_MAX_BARS: 20,
-  DONUT_SHAPE_MAX: 30,
-  LINEPLOT_LINE_POINT_MIN: 2,
-  LINEPLOT_LINE_MAX: 20,
-  STACKED_SHAPE_MAX: 200,
-  STACKED_TIME_MEMBER_MIN: 2,
-  TREE_MAP_SHAPE_MAX: 1e3
-};
-
 // src/vizbuilder/components/ChartCard.tsx
 init_esm_shims();
 
@@ -7053,9 +7186,902 @@ function saveElement_default(elem) {
   }
 }
 
+// src/vizbuilder/hooks/useD3plusConfig.ts
+init_esm_shims();
+
+// node_modules/lodash-es/lodash.js
+init_esm_shims();
+
+// node_modules/lodash-es/_baseGetTag.js
+init_esm_shims();
+
+// node_modules/lodash-es/_Symbol.js
+init_esm_shims();
+
+// node_modules/lodash-es/_root.js
+init_esm_shims();
+
+// node_modules/lodash-es/_freeGlobal.js
+init_esm_shims();
+var freeGlobal = typeof global == "object" && global && global.Object === Object && global;
+var freeGlobal_default = freeGlobal;
+
+// node_modules/lodash-es/_root.js
+var freeSelf = typeof self == "object" && self && self.Object === Object && self;
+var root = freeGlobal_default || freeSelf || Function("return this")();
+var root_default = root;
+
+// node_modules/lodash-es/_Symbol.js
+var Symbol2 = root_default.Symbol;
+var Symbol_default = Symbol2;
+
+// node_modules/lodash-es/_getRawTag.js
+init_esm_shims();
+var objectProto = Object.prototype;
+var hasOwnProperty2 = objectProto.hasOwnProperty;
+var nativeObjectToString = objectProto.toString;
+var symToStringTag = Symbol_default ? Symbol_default.toStringTag : void 0;
+function getRawTag(value) {
+  var isOwn = hasOwnProperty2.call(value, symToStringTag), tag = value[symToStringTag];
+  try {
+    value[symToStringTag] = void 0;
+    var unmasked = true;
+  } catch (e) {
+  }
+  var result = nativeObjectToString.call(value);
+  if (unmasked) {
+    if (isOwn) {
+      value[symToStringTag] = tag;
+    } else {
+      delete value[symToStringTag];
+    }
+  }
+  return result;
+}
+var getRawTag_default = getRawTag;
+
+// node_modules/lodash-es/_objectToString.js
+init_esm_shims();
+var objectProto2 = Object.prototype;
+var nativeObjectToString2 = objectProto2.toString;
+function objectToString(value) {
+  return nativeObjectToString2.call(value);
+}
+var objectToString_default = objectToString;
+
+// node_modules/lodash-es/_baseGetTag.js
+var nullTag = "[object Null]";
+var undefinedTag = "[object Undefined]";
+var symToStringTag2 = Symbol_default ? Symbol_default.toStringTag : void 0;
+function baseGetTag(value) {
+  if (value == null) {
+    return value === void 0 ? undefinedTag : nullTag;
+  }
+  return symToStringTag2 && symToStringTag2 in Object(value) ? getRawTag_default(value) : objectToString_default(value);
+}
+var baseGetTag_default = baseGetTag;
+
+// node_modules/lodash-es/isObjectLike.js
+init_esm_shims();
+function isObjectLike(value) {
+  return value != null && typeof value == "object";
+}
+var isObjectLike_default = isObjectLike;
+
+// node_modules/lodash-es/isArray.js
+init_esm_shims();
+var isArray = Array.isArray;
+var isArray_default = isArray;
+
+// node_modules/lodash-es/isObject.js
+init_esm_shims();
+function isObject(value) {
+  var type = typeof value;
+  return value != null && (type == "object" || type == "function");
+}
+var isObject_default = isObject;
+
+// node_modules/lodash-es/identity.js
+init_esm_shims();
+function identity2(value) {
+  return value;
+}
+var identity_default = identity2;
+
+// node_modules/lodash-es/_getNative.js
+init_esm_shims();
+
+// node_modules/lodash-es/_baseIsNative.js
+init_esm_shims();
+
+// node_modules/lodash-es/isFunction.js
+init_esm_shims();
+var asyncTag = "[object AsyncFunction]";
+var funcTag = "[object Function]";
+var genTag = "[object GeneratorFunction]";
+var proxyTag = "[object Proxy]";
+function isFunction(value) {
+  if (!isObject_default(value)) {
+    return false;
+  }
+  var tag = baseGetTag_default(value);
+  return tag == funcTag || tag == genTag || tag == asyncTag || tag == proxyTag;
+}
+var isFunction_default = isFunction;
+
+// node_modules/lodash-es/_isMasked.js
+init_esm_shims();
+
+// node_modules/lodash-es/_coreJsData.js
+init_esm_shims();
+var coreJsData = root_default["__core-js_shared__"];
+var coreJsData_default = coreJsData;
+
+// node_modules/lodash-es/_isMasked.js
+var maskSrcKey = function() {
+  var uid = /[^.]+$/.exec(coreJsData_default && coreJsData_default.keys && coreJsData_default.keys.IE_PROTO || "");
+  return uid ? "Symbol(src)_1." + uid : "";
+}();
+function isMasked(func) {
+  return !!maskSrcKey && maskSrcKey in func;
+}
+var isMasked_default = isMasked;
+
+// node_modules/lodash-es/_toSource.js
+init_esm_shims();
+var funcProto = Function.prototype;
+var funcToString = funcProto.toString;
+function toSource(func) {
+  if (func != null) {
+    try {
+      return funcToString.call(func);
+    } catch (e) {
+    }
+    try {
+      return func + "";
+    } catch (e) {
+    }
+  }
+  return "";
+}
+var toSource_default = toSource;
+
+// node_modules/lodash-es/_baseIsNative.js
+var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
+var reIsHostCtor = /^\[object .+?Constructor\]$/;
+var funcProto2 = Function.prototype;
+var objectProto3 = Object.prototype;
+var funcToString2 = funcProto2.toString;
+var hasOwnProperty3 = objectProto3.hasOwnProperty;
+var reIsNative = RegExp(
+  "^" + funcToString2.call(hasOwnProperty3).replace(reRegExpChar, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$"
+);
+function baseIsNative(value) {
+  if (!isObject_default(value) || isMasked_default(value)) {
+    return false;
+  }
+  var pattern = isFunction_default(value) ? reIsNative : reIsHostCtor;
+  return pattern.test(toSource_default(value));
+}
+var baseIsNative_default = baseIsNative;
+
+// node_modules/lodash-es/_getValue.js
+init_esm_shims();
+function getValue(object, key) {
+  return object == null ? void 0 : object[key];
+}
+var getValue_default = getValue;
+
+// node_modules/lodash-es/_getNative.js
+function getNative(object, key) {
+  var value = getValue_default(object, key);
+  return baseIsNative_default(value) ? value : void 0;
+}
+var getNative_default = getNative;
+
+// node_modules/lodash-es/_apply.js
+init_esm_shims();
+function apply(func, thisArg, args) {
+  switch (args.length) {
+    case 0:
+      return func.call(thisArg);
+    case 1:
+      return func.call(thisArg, args[0]);
+    case 2:
+      return func.call(thisArg, args[0], args[1]);
+    case 3:
+      return func.call(thisArg, args[0], args[1], args[2]);
+  }
+  return func.apply(thisArg, args);
+}
+var apply_default = apply;
+
+// node_modules/lodash-es/_shortOut.js
+init_esm_shims();
+var HOT_COUNT = 800;
+var HOT_SPAN = 16;
+var nativeNow = Date.now;
+function shortOut(func) {
+  var count = 0, lastCalled = 0;
+  return function() {
+    var stamp = nativeNow(), remaining = HOT_SPAN - (stamp - lastCalled);
+    lastCalled = stamp;
+    if (remaining > 0) {
+      if (++count >= HOT_COUNT) {
+        return arguments[0];
+      }
+    } else {
+      count = 0;
+    }
+    return func.apply(void 0, arguments);
+  };
+}
+var shortOut_default = shortOut;
+
+// node_modules/lodash-es/_setToString.js
+init_esm_shims();
+
+// node_modules/lodash-es/_baseSetToString.js
+init_esm_shims();
+
+// node_modules/lodash-es/constant.js
+init_esm_shims();
+function constant(value) {
+  return function() {
+    return value;
+  };
+}
+var constant_default = constant;
+
+// node_modules/lodash-es/_defineProperty.js
+init_esm_shims();
+var defineProperty = function() {
+  try {
+    var func = getNative_default(Object, "defineProperty");
+    func({}, "", {});
+    return func;
+  } catch (e) {
+  }
+}();
+var defineProperty_default = defineProperty;
+
+// node_modules/lodash-es/_baseSetToString.js
+var baseSetToString = !defineProperty_default ? identity_default : function(func, string) {
+  return defineProperty_default(func, "toString", {
+    "configurable": true,
+    "enumerable": false,
+    "value": constant_default(string),
+    "writable": true
+  });
+};
+var baseSetToString_default = baseSetToString;
+
+// node_modules/lodash-es/_setToString.js
+var setToString = shortOut_default(baseSetToString_default);
+var setToString_default = setToString;
+
+// node_modules/lodash-es/_isIndex.js
+init_esm_shims();
+var MAX_SAFE_INTEGER = 9007199254740991;
+var reIsUint = /^(?:0|[1-9]\d*)$/;
+function isIndex(value, length) {
+  var type = typeof value;
+  length = length == null ? MAX_SAFE_INTEGER : length;
+  return !!length && (type == "number" || type != "symbol" && reIsUint.test(value)) && (value > -1 && value % 1 == 0 && value < length);
+}
+var isIndex_default = isIndex;
+
+// node_modules/lodash-es/assign.js
+init_esm_shims();
+
+// node_modules/lodash-es/_assignValue.js
+init_esm_shims();
+
+// node_modules/lodash-es/_baseAssignValue.js
+init_esm_shims();
+function baseAssignValue(object, key, value) {
+  if (key == "__proto__" && defineProperty_default) {
+    defineProperty_default(object, key, {
+      "configurable": true,
+      "enumerable": true,
+      "value": value,
+      "writable": true
+    });
+  } else {
+    object[key] = value;
+  }
+}
+var baseAssignValue_default = baseAssignValue;
+
+// node_modules/lodash-es/eq.js
+init_esm_shims();
+function eq(value, other) {
+  return value === other || value !== value && other !== other;
+}
+var eq_default = eq;
+
+// node_modules/lodash-es/_assignValue.js
+var objectProto4 = Object.prototype;
+var hasOwnProperty4 = objectProto4.hasOwnProperty;
+function assignValue(object, key, value) {
+  var objValue = object[key];
+  if (!(hasOwnProperty4.call(object, key) && eq_default(objValue, value)) || value === void 0 && !(key in object)) {
+    baseAssignValue_default(object, key, value);
+  }
+}
+var assignValue_default = assignValue;
+
+// node_modules/lodash-es/_copyObject.js
+init_esm_shims();
+function copyObject(source, props, object, customizer) {
+  var isNew = !object;
+  object || (object = {});
+  var index = -1, length = props.length;
+  while (++index < length) {
+    var key = props[index];
+    var newValue = customizer ? customizer(object[key], source[key], key, object, source) : void 0;
+    if (newValue === void 0) {
+      newValue = source[key];
+    }
+    if (isNew) {
+      baseAssignValue_default(object, key, newValue);
+    } else {
+      assignValue_default(object, key, newValue);
+    }
+  }
+  return object;
+}
+var copyObject_default = copyObject;
+
+// node_modules/lodash-es/_createAssigner.js
+init_esm_shims();
+
+// node_modules/lodash-es/_baseRest.js
+init_esm_shims();
+
+// node_modules/lodash-es/_overRest.js
+init_esm_shims();
+var nativeMax = Math.max;
+function overRest(func, start, transform) {
+  start = nativeMax(start === void 0 ? func.length - 1 : start, 0);
+  return function() {
+    var args = arguments, index = -1, length = nativeMax(args.length - start, 0), array = Array(length);
+    while (++index < length) {
+      array[index] = args[start + index];
+    }
+    index = -1;
+    var otherArgs = Array(start + 1);
+    while (++index < start) {
+      otherArgs[index] = args[index];
+    }
+    otherArgs[start] = transform(array);
+    return apply_default(func, this, otherArgs);
+  };
+}
+var overRest_default = overRest;
+
+// node_modules/lodash-es/_baseRest.js
+function baseRest(func, start) {
+  return setToString_default(overRest_default(func, start, identity_default), func + "");
+}
+var baseRest_default = baseRest;
+
+// node_modules/lodash-es/_isIterateeCall.js
+init_esm_shims();
+
+// node_modules/lodash-es/isArrayLike.js
+init_esm_shims();
+
+// node_modules/lodash-es/isLength.js
+init_esm_shims();
+var MAX_SAFE_INTEGER2 = 9007199254740991;
+function isLength(value) {
+  return typeof value == "number" && value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER2;
+}
+var isLength_default = isLength;
+
+// node_modules/lodash-es/isArrayLike.js
+function isArrayLike(value) {
+  return value != null && isLength_default(value.length) && !isFunction_default(value);
+}
+var isArrayLike_default = isArrayLike;
+
+// node_modules/lodash-es/_isIterateeCall.js
+function isIterateeCall(value, index, object) {
+  if (!isObject_default(object)) {
+    return false;
+  }
+  var type = typeof index;
+  if (type == "number" ? isArrayLike_default(object) && isIndex_default(index, object.length) : type == "string" && index in object) {
+    return eq_default(object[index], value);
+  }
+  return false;
+}
+var isIterateeCall_default = isIterateeCall;
+
+// node_modules/lodash-es/_createAssigner.js
+function createAssigner(assigner) {
+  return baseRest_default(function(object, sources) {
+    var index = -1, length = sources.length, customizer = length > 1 ? sources[length - 1] : void 0, guard = length > 2 ? sources[2] : void 0;
+    customizer = assigner.length > 3 && typeof customizer == "function" ? (length--, customizer) : void 0;
+    if (guard && isIterateeCall_default(sources[0], sources[1], guard)) {
+      customizer = length < 3 ? void 0 : customizer;
+      length = 1;
+    }
+    object = Object(object);
+    while (++index < length) {
+      var source = sources[index];
+      if (source) {
+        assigner(object, source, index, customizer);
+      }
+    }
+    return object;
+  });
+}
+var createAssigner_default = createAssigner;
+
+// node_modules/lodash-es/_isPrototype.js
+init_esm_shims();
+var objectProto5 = Object.prototype;
+function isPrototype(value) {
+  var Ctor = value && value.constructor, proto = typeof Ctor == "function" && Ctor.prototype || objectProto5;
+  return value === proto;
+}
+var isPrototype_default = isPrototype;
+
+// node_modules/lodash-es/keys.js
+init_esm_shims();
+
+// node_modules/lodash-es/_arrayLikeKeys.js
+init_esm_shims();
+
+// node_modules/lodash-es/_baseTimes.js
+init_esm_shims();
+function baseTimes(n, iteratee) {
+  var index = -1, result = Array(n);
+  while (++index < n) {
+    result[index] = iteratee(index);
+  }
+  return result;
+}
+var baseTimes_default = baseTimes;
+
+// node_modules/lodash-es/isArguments.js
+init_esm_shims();
+
+// node_modules/lodash-es/_baseIsArguments.js
+init_esm_shims();
+var argsTag = "[object Arguments]";
+function baseIsArguments(value) {
+  return isObjectLike_default(value) && baseGetTag_default(value) == argsTag;
+}
+var baseIsArguments_default = baseIsArguments;
+
+// node_modules/lodash-es/isArguments.js
+var objectProto6 = Object.prototype;
+var hasOwnProperty5 = objectProto6.hasOwnProperty;
+var propertyIsEnumerable = objectProto6.propertyIsEnumerable;
+var isArguments = baseIsArguments_default(/* @__PURE__ */ function() {
+  return arguments;
+}()) ? baseIsArguments_default : function(value) {
+  return isObjectLike_default(value) && hasOwnProperty5.call(value, "callee") && !propertyIsEnumerable.call(value, "callee");
+};
+var isArguments_default = isArguments;
+
+// node_modules/lodash-es/isBuffer.js
+init_esm_shims();
+
+// node_modules/lodash-es/stubFalse.js
+init_esm_shims();
+function stubFalse() {
+  return false;
+}
+var stubFalse_default = stubFalse;
+
+// node_modules/lodash-es/isBuffer.js
+var freeExports = typeof exports == "object" && exports && !exports.nodeType && exports;
+var freeModule = freeExports && typeof module == "object" && module && !module.nodeType && module;
+var moduleExports = freeModule && freeModule.exports === freeExports;
+var Buffer2 = moduleExports ? root_default.Buffer : void 0;
+var nativeIsBuffer = Buffer2 ? Buffer2.isBuffer : void 0;
+var isBuffer = nativeIsBuffer || stubFalse_default;
+var isBuffer_default = isBuffer;
+
+// node_modules/lodash-es/isTypedArray.js
+init_esm_shims();
+
+// node_modules/lodash-es/_baseIsTypedArray.js
+init_esm_shims();
+var argsTag2 = "[object Arguments]";
+var arrayTag = "[object Array]";
+var boolTag = "[object Boolean]";
+var dateTag = "[object Date]";
+var errorTag = "[object Error]";
+var funcTag2 = "[object Function]";
+var mapTag = "[object Map]";
+var numberTag = "[object Number]";
+var objectTag = "[object Object]";
+var regexpTag = "[object RegExp]";
+var setTag = "[object Set]";
+var stringTag = "[object String]";
+var weakMapTag = "[object WeakMap]";
+var arrayBufferTag = "[object ArrayBuffer]";
+var dataViewTag = "[object DataView]";
+var float32Tag = "[object Float32Array]";
+var float64Tag = "[object Float64Array]";
+var int8Tag = "[object Int8Array]";
+var int16Tag = "[object Int16Array]";
+var int32Tag = "[object Int32Array]";
+var uint8Tag = "[object Uint8Array]";
+var uint8ClampedTag = "[object Uint8ClampedArray]";
+var uint16Tag = "[object Uint16Array]";
+var uint32Tag = "[object Uint32Array]";
+var typedArrayTags = {};
+typedArrayTags[float32Tag] = typedArrayTags[float64Tag] = typedArrayTags[int8Tag] = typedArrayTags[int16Tag] = typedArrayTags[int32Tag] = typedArrayTags[uint8Tag] = typedArrayTags[uint8ClampedTag] = typedArrayTags[uint16Tag] = typedArrayTags[uint32Tag] = true;
+typedArrayTags[argsTag2] = typedArrayTags[arrayTag] = typedArrayTags[arrayBufferTag] = typedArrayTags[boolTag] = typedArrayTags[dataViewTag] = typedArrayTags[dateTag] = typedArrayTags[errorTag] = typedArrayTags[funcTag2] = typedArrayTags[mapTag] = typedArrayTags[numberTag] = typedArrayTags[objectTag] = typedArrayTags[regexpTag] = typedArrayTags[setTag] = typedArrayTags[stringTag] = typedArrayTags[weakMapTag] = false;
+function baseIsTypedArray(value) {
+  return isObjectLike_default(value) && isLength_default(value.length) && !!typedArrayTags[baseGetTag_default(value)];
+}
+var baseIsTypedArray_default = baseIsTypedArray;
+
+// node_modules/lodash-es/_baseUnary.js
+init_esm_shims();
+function baseUnary(func) {
+  return function(value) {
+    return func(value);
+  };
+}
+var baseUnary_default = baseUnary;
+
+// node_modules/lodash-es/_nodeUtil.js
+init_esm_shims();
+var freeExports2 = typeof exports == "object" && exports && !exports.nodeType && exports;
+var freeModule2 = freeExports2 && typeof module == "object" && module && !module.nodeType && module;
+var moduleExports2 = freeModule2 && freeModule2.exports === freeExports2;
+var freeProcess = moduleExports2 && freeGlobal_default.process;
+var nodeUtil = function() {
+  try {
+    var types = freeModule2 && freeModule2.require && freeModule2.require("util").types;
+    if (types) {
+      return types;
+    }
+    return freeProcess && freeProcess.binding && freeProcess.binding("util");
+  } catch (e) {
+  }
+}();
+var nodeUtil_default = nodeUtil;
+
+// node_modules/lodash-es/isTypedArray.js
+var nodeIsTypedArray = nodeUtil_default && nodeUtil_default.isTypedArray;
+var isTypedArray = nodeIsTypedArray ? baseUnary_default(nodeIsTypedArray) : baseIsTypedArray_default;
+var isTypedArray_default = isTypedArray;
+
+// node_modules/lodash-es/_arrayLikeKeys.js
+var objectProto7 = Object.prototype;
+var hasOwnProperty6 = objectProto7.hasOwnProperty;
+function arrayLikeKeys(value, inherited) {
+  var isArr = isArray_default(value), isArg = !isArr && isArguments_default(value), isBuff = !isArr && !isArg && isBuffer_default(value), isType = !isArr && !isArg && !isBuff && isTypedArray_default(value), skipIndexes = isArr || isArg || isBuff || isType, result = skipIndexes ? baseTimes_default(value.length, String) : [], length = result.length;
+  for (var key in value) {
+    if ((inherited || hasOwnProperty6.call(value, key)) && !(skipIndexes && // Safari 9 has enumerable `arguments.length` in strict mode.
+    (key == "length" || // Node.js 0.10 has enumerable non-index properties on buffers.
+    isBuff && (key == "offset" || key == "parent") || // PhantomJS 2 has enumerable non-index properties on typed arrays.
+    isType && (key == "buffer" || key == "byteLength" || key == "byteOffset") || // Skip index properties.
+    isIndex_default(key, length)))) {
+      result.push(key);
+    }
+  }
+  return result;
+}
+var arrayLikeKeys_default = arrayLikeKeys;
+
+// node_modules/lodash-es/_baseKeys.js
+init_esm_shims();
+
+// node_modules/lodash-es/_nativeKeys.js
+init_esm_shims();
+
+// node_modules/lodash-es/_overArg.js
+init_esm_shims();
+function overArg(func, transform) {
+  return function(arg) {
+    return func(transform(arg));
+  };
+}
+var overArg_default = overArg;
+
+// node_modules/lodash-es/_nativeKeys.js
+var nativeKeys = overArg_default(Object.keys, Object);
+var nativeKeys_default = nativeKeys;
+
+// node_modules/lodash-es/_baseKeys.js
+var objectProto8 = Object.prototype;
+var hasOwnProperty7 = objectProto8.hasOwnProperty;
+function baseKeys(object) {
+  if (!isPrototype_default(object)) {
+    return nativeKeys_default(object);
+  }
+  var result = [];
+  for (var key in Object(object)) {
+    if (hasOwnProperty7.call(object, key) && key != "constructor") {
+      result.push(key);
+    }
+  }
+  return result;
+}
+var baseKeys_default = baseKeys;
+
+// node_modules/lodash-es/keys.js
+function keys(object) {
+  return isArrayLike_default(object) ? arrayLikeKeys_default(object) : baseKeys_default(object);
+}
+var keys_default = keys;
+
+// node_modules/lodash-es/assign.js
+var objectProto9 = Object.prototype;
+var hasOwnProperty8 = objectProto9.hasOwnProperty;
+var assign = createAssigner_default(function(object, source) {
+  if (isPrototype_default(source) || isArrayLike_default(source)) {
+    copyObject_default(source, keys_default(source), object);
+    return;
+  }
+  for (var key in source) {
+    if (hasOwnProperty8.call(source, key)) {
+      assignValue_default(object, key, source[key]);
+    }
+  }
+});
+var assign_default = assign;
+function useD3plusConfig(chart, params) {
+  const { fullMode, getMeasureConfig, showConfidenceInt, t } = params;
+  const measures = useMemo(() => {
+    return (chart == null ? void 0 : chart.datagroup.measureColumns.map((item) => item.measure)) || [];
+  }, [chart == null ? void 0 : chart.datagroup]);
+  const { getFormatter } = useFormatter(measures);
+  return useMemo(() => {
+    if (!chart) return [null, { data: "", locale: "" }];
+    const params2 = { fullMode, getFormatter, getMeasureConfig, showConfidenceInt, t };
+    const { locale } = chart.datagroup;
+    if (chart.type === "barchart") {
+      return [BarChart, buildBarchartConfig(chart, params2)];
+    }
+    if (chart.type === "choropleth") {
+      return [Geomap, buildChoroplethConfig(chart, params2)];
+    }
+    if (chart.type === "donut") {
+      return [Donut, buildDonutConfig(chart, params2)];
+    }
+    if (chart.type === "lineplot") {
+      return [LinePlot, buildLineplotConfig(chart, params2)];
+    }
+    if (chart.type === "stackedarea") {
+      return [StackedArea, buildStackedareaConfig(chart, params2)];
+    }
+    if (chart.type === "treemap") {
+      return [Treemap, buildTreemapConfig(chart, params2)];
+    }
+    return [null, { data: "", locale }];
+  }, [chart, fullMode, getFormatter, getMeasureConfig, showConfidenceInt, t]);
+}
+function buildBarchartConfig(chart, params) {
+  const { fullMode, getFormatter, t } = params;
+  const { datagroup, values, series, timeline, orientation } = chart;
+  const { columns, dataset, locale } = datagroup;
+  const [mainSeries, stackedSeries] = series;
+  const collate = new Intl.Collator(locale, { numeric: true, ignorePunctuation: true });
+  const measureFormatter = getFormatter(values.measure.name);
+  const measureAggregator = values.measure.annotations.aggregation_method || values.measure.aggregator;
+  const measureUnits = values.measure.annotations.units_of_measurement || "";
+  const isPercentage = ["Percentage", "Rate"].includes(measureUnits);
+  const config = {
+    barPadding: fullMode ? 5 : 1,
+    data: dataset,
+    discrete: chart.orientation === "horizontal" ? "y" : "x",
+    groupBy: stackedSeries == null ? void 0 : stackedSeries.name,
+    groupPadding: fullMode ? 5 : 1,
+    label: (d) => series.map((series2) => d[series2.level.name]).join("\n"),
+    legend: fullMode,
+    locale,
+    stacked: stackedSeries && isIn(measureAggregator.toUpperCase(), ["COUNT", "SUM"]) || isPercentage,
+    time: (timeline == null ? void 0 : timeline.name) === "Quarter ID" ? timeline.level.name : timeline == null ? void 0 : timeline.name,
+    timeline: timeline && fullMode,
+    timelineConfig: {
+      brushing: false,
+      playButton: false
+    },
+    tooltipConfig: {
+      tbody: _buildTooltipTbody(columns, values.measure, measureFormatter, locale)
+    },
+    total: !timeline
+  };
+  if (orientation === "horizontal") {
+    Object.assign(config, {
+      x: values.measure.name,
+      xConfig: {
+        title: values.measure.caption,
+        tickFormat: (d) => measureFormatter(d, locale)
+      },
+      y: mainSeries.level.name,
+      yConfig: {
+        title: mainSeries.level.caption
+      },
+      ySort: collate.compare
+    });
+  } else {
+    Object.assign(config, {
+      x: mainSeries.level.name,
+      xConfig: {
+        title: mainSeries.level.caption
+      },
+      y: values.measure.name,
+      yConfig: {
+        title: values.measure.caption,
+        tickFormat: (d) => measureFormatter(d, locale)
+      }
+    });
+  }
+  return config;
+}
+function buildChoroplethConfig(chart, params) {
+  const { datagroup, values, series, timeline } = chart;
+  const { fullMode, getFormatter, t } = params;
+  const { columns, dataset, locale } = datagroup;
+  const { members: firstSeriesMembers } = series[0];
+  const lastSeries = getLast(series);
+  const measureFormatter = getFormatter(values.measure.name);
+  const config = {
+    colorScale: values.measure.name,
+    colorScaleConfig: {
+      axisConfig: {
+        tickFormat: (d) => measureFormatter(d, locale)
+      },
+      scale: "jenks"
+    },
+    colorScalePosition: fullMode ? "right" : false,
+    data: dataset,
+    fitFilter: (d) => {
+      var _a;
+      return firstSeriesMembers.includes((_a = d.id) != null ? _a : d.properties.id);
+    },
+    groupBy: series.map((series2) => series2.name),
+    label: (d) => series.map((series2) => d[series2.level.name]).join("\n"),
+    locale,
+    ocean: "transparent",
+    projectionRotate: [0, 0],
+    tiles: false,
+    time: timeline == null ? void 0 : timeline.level.name,
+    timeline: fullMode && (timeline == null ? void 0 : timeline.level.name),
+    timelineConfig: {
+      brushing: false,
+      playButton: false
+    },
+    tooltip: true,
+    tooltipConfig: {
+      title(d) {
+        return d[lastSeries.level.name];
+      },
+      tbody: _buildTooltipTbody(columns, values.measure, measureFormatter, locale)
+    },
+    zoomScroll: false
+  };
+  assign_default(config, chart.extraConfig);
+  return config;
+}
+function buildDonutConfig(chart, params) {
+  const { datagroup, series, timeline, values } = chart;
+  const { fullMode, getFormatter, t } = params;
+  const { columns, dataset, locale } = datagroup;
+  const [mainSeries] = series;
+  const measureFormatter = getFormatter(values.measure.name);
+  const config = {
+    data: dataset,
+    groupBy: [mainSeries.name],
+    label: (d) => d[mainSeries.level.name],
+    locale,
+    time: timeline == null ? void 0 : timeline.name,
+    timeline: fullMode && timeline,
+    timelineConfig: {
+      brushing: false,
+      playButton: false
+    },
+    tooltipConfig: {
+      tbody: _buildTooltipTbody(columns, values.measure, measureFormatter, locale)
+    },
+    total: !timeline,
+    value: values.measure.name
+  };
+  return config;
+}
+function buildLineplotConfig(chart, params) {
+  const { datagroup, values, series, time } = chart;
+  const { fullMode, getFormatter, t } = params;
+  const { columns, dataset, locale } = datagroup;
+  const measureFormatter = getFormatter(values.measure.name);
+  const config = {
+    data: dataset,
+    discrete: "x",
+    label: (d) => {
+      return series.map((series2) => d[series2.level.name]).join("\n");
+    },
+    legend: fullMode,
+    locale,
+    groupBy: series.map((series2) => series2.name),
+    time: time.level.name,
+    timeline: fullMode,
+    timelineConfig: {
+      brushing: true,
+      playButton: false
+    },
+    tooltipConfig: {
+      tbody: _buildTooltipTbody(columns, values.measure, measureFormatter, locale)
+    },
+    total: false,
+    x: time.level.name,
+    xConfig: {
+      title: time.level.caption
+    },
+    y: values.measure.name,
+    yConfig: {
+      scale: "auto",
+      tickFormat: (d) => measureFormatter(d, locale),
+      title: values.measure.caption
+    }
+  };
+  return config;
+}
+function buildStackedareaConfig(chart, params) {
+  const { datagroup, series, timeline, values } = chart;
+  const { fullMode, getFormatter, t } = params;
+  const { columns, dataset, locale } = datagroup;
+  const measureFormatter = getFormatter(values.measure.name);
+  const config = {
+    data: dataset,
+    groupBy: series.map((series2) => series2.name),
+    locale,
+    time: timeline == null ? void 0 : timeline.name,
+    timeline: timeline && fullMode,
+    tooltipConfig: {
+      tbody: _buildTooltipTbody(columns, values.measure, measureFormatter, locale)
+    },
+    value: values.measure.name
+  };
+  return config;
+}
+function buildTreemapConfig(chart, params) {
+  const { datagroup, series, timeline, values } = chart;
+  const { fullMode, getFormatter, t } = params;
+  const { columns, dataset, locale } = datagroup;
+  const measureFormatter = getFormatter(values.measure.name);
+  const config = {
+    data: dataset,
+    label: (d) => series.map((series2) => d[series2.level.name]).join("\n"),
+    locale,
+    groupBy: series.map((series2) => series2.name),
+    sum: values.measure.name,
+    threshold: 5e-3,
+    thresholdName: series[0].name,
+    time: timeline == null ? void 0 : timeline.name,
+    timeline: timeline && fullMode,
+    tooltipConfig: {
+      tbody: _buildTooltipTbody(columns, values.measure, measureFormatter, locale)
+    }
+  };
+  return config;
+}
+function _buildTooltipTbody(columns, measure, measureFormatter, locale) {
+  return (d) => {
+    const { caption: meaCaption, name: meaName } = measure;
+    return filterMap(Object.values(columns), (column) => {
+      if (column.type === "measure") return null;
+      if (column.type === "level" && column.hasID && column.isID) return null;
+      const { caption, name: name4 } = getColumnEntity(column);
+      return [caption, d[name4]];
+    }).concat([[meaCaption, measureFormatter(d[meaName], locale)]]);
+  };
+}
+
 // src/vizbuilder/components/ErrorBoundary.tsx
 init_esm_shims();
-var ErrorBoundary = class extends React13__default.Component {
+var ErrorBoundary = class extends Component {
   constructor() {
     super(...arguments);
     this.state = {
@@ -7073,92 +8099,92 @@ var ErrorBoundary = class extends React13__default.Component {
       return this.props.children;
     }
     return /* @__PURE__ */ React13__default.createElement(TranslationConsumer, null, ({ translate: t }) => {
-      const detailText = t("error.detail");
-      return /* @__PURE__ */ React13__default.createElement(Flex, { p: "xl", align: "center", justify: "center", direction: "column", className: "chart-card error" }, /* @__PURE__ */ React13__default.createElement(Title, { order: 3 }, t("error.title")), detailText.length ? /* @__PURE__ */ React13__default.createElement(Text, null, detailText) : null, /* @__PURE__ */ React13__default.createElement(Text, null, t("error.message", { message })), /* @__PURE__ */ React13__default.createElement(Group, { spacing: "xs", my: "sm" }, /* @__PURE__ */ React13__default.createElement(
-        Button,
+      const detailText = t("vizbuilder.error.detail");
+      return /* @__PURE__ */ React13__default.createElement(
+        Flex,
         {
-          onClick: this.clearError,
-          size: "xs",
-          variant: "light"
+          p: "xl",
+          align: "center",
+          justify: "center",
+          direction: "column",
+          className: "chart-card error"
         },
-        t("action_retry")
-      ), /* @__PURE__ */ React13__default.createElement(Button, { error: name4, message })));
+        /* @__PURE__ */ React13__default.createElement(Title, { order: 3 }, t("vizbuilder.error.title")),
+        detailText.length ? /* @__PURE__ */ React13__default.createElement(Text, null, detailText) : null,
+        /* @__PURE__ */ React13__default.createElement(Text, null, t("vizbuilder.error.message", { message })),
+        /* @__PURE__ */ React13__default.createElement(Group, { spacing: "xs", my: "sm" }, /* @__PURE__ */ React13__default.createElement(Button, { onClick: this.clearError, size: "xs", variant: "light" }, t("vizbuilder.action_retry")), /* @__PURE__ */ React13__default.createElement(IssueButton, { error: name4, message }))
+      );
     });
   }
 };
+function IssueButton(props) {
+  const { error, message } = props;
+  const { translate: t } = useTranslation();
+  const location2 = typeof window === "object" ? window.location : { href: "<SSR>" };
+  const issueParams = new URLSearchParams({
+    title: `[report/vizbuilder] ${error}`,
+    body: [
+      `**URL**: ${location2.href}`,
+      `**Error**: ${error}`,
+      message ? `**Error details:** ${message}
+` : "",
+      "**Detail of the issue:**\n"
+    ].join("\n")
+  });
+  return /* @__PURE__ */ React13__default.createElement(
+    Button,
+    {
+      component: "a",
+      href: `https://github.com/Datawheel/vizbuilder/issues/new?${issueParams}`,
+      leftIcon: /* @__PURE__ */ React13__default.createElement(IconBrandGithub, { size: "1rem" }),
+      rel: "noopener noreferrer",
+      role: "button",
+      size: "xs",
+      tabIndex: 0,
+      target: "_blank",
+      variant: "subtle"
+    },
+    t("vizbuilder.action_fileissue")
+  );
+}
 
 // src/vizbuilder/components/ChartCard.tsx
-var chartComponents = {
-  barchart: BarChart,
-  barchartyear: BarChart,
-  donut: Donut,
-  geomap: Geomap,
-  histogram: BarChart,
-  lineplot: LinePlot,
-  pie: Pie,
-  stacked: StackedArea,
-  treemap: Treemap
-};
 var iconByFormat = {
   jpg: IconPhotoDown,
   png: IconPhotoDown,
   svg: IconVectorTriangle
 };
 function ChartCard(props) {
-  const {
-    chart,
-    currentChart,
-    isSingleChart,
-    measureConfig,
-    showConfidenceInt,
-    userConfig
-  } = props;
-  const isFocused = currentChart === chart.key;
-  const { translate, locale } = useTranslation();
+  const { chart, downloadFormats, isFullMode, onFocus, showConfidenceInt } = props;
+  const { translate } = useTranslation();
   const nodeRef = useRef(null);
-  const ChartComponent = chartComponents[chart.chartType];
-  const config = useMemo(
-    () => createChartConfig(chart, {
-      currentChart,
-      isSingleChart,
-      isUniqueChart: isSingleChart,
-      measureConfig,
-      showConfidenceInt: !!showConfidenceInt,
-      translate: (template, data) => translate(`vizbuilder.${template}`, data),
-      userConfig: userConfig || {}
-    }),
-    [
-      chart,
-      currentChart,
-      isSingleChart,
-      translate,
-      measureConfig,
-      userConfig,
-      showConfidenceInt
-    ]
-  );
+  const [ChartComponent, config] = useD3plusConfig(chart, {
+    fullMode: !!isFullMode,
+    showConfidenceInt: !!showConfidenceInt,
+    getMeasureConfig: props.measureConfig,
+    t: translate
+  });
   const downloadButtons = useMemo(() => {
-    if (!isFocused && !isSingleChart) return [];
-    const filename = (config.title instanceof Function ? config.title() : config.title).replace(/[^\w]/g, "_").replace(/[_]+/g, "_");
-    return asArray2(props.downloadFormats).map((format2) => {
+    const filename = (typeof config.title === "function" ? config.title() : config.title || "").replace(/[^\w]/g, "_").replace(/[_]+/g, "_");
+    return asArray(downloadFormats).map((format2) => {
       const formatLower = format2.toLowerCase();
       const Icon = iconByFormat[formatLower] || IconDownload;
       return /* @__PURE__ */ React13__default.createElement(
         Button,
         {
-          compact: true,
           key: format2,
+          compact: true,
           leftIcon: /* @__PURE__ */ React13__default.createElement(Icon, { size: 16 }),
           onClick: () => {
             const { current: boxElement } = nodeRef;
             const svgElement = boxElement == null ? void 0 : boxElement.querySelector("svg");
-            svgElement && saveElement_default(
-              svgElement,
-              { filename, type: formatLower },
-              {
-                background: getBackground(svgElement)
-              }
-            );
+            if (svgElement) {
+              saveElement_default(
+                svgElement,
+                { filename, type: formatLower },
+                { background: getBackground(svgElement) }
+              );
+            }
           },
           size: "sm",
           variant: "light"
@@ -7166,24 +8192,24 @@ function ChartCard(props) {
         format2.toUpperCase()
       );
     });
-  }, [isFocused, isSingleChart, props.downloadFormats, config.title]);
+  }, [config, downloadFormats]);
   const focusButton = useMemo(() => {
-    if (!isFocused && isSingleChart) return null;
-    const Icon = isFocused ? IconArrowsMinimize : IconArrowsMaximize;
+    const Icon = isFullMode ? IconArrowsMinimize : IconArrowsMaximize;
     return /* @__PURE__ */ React13__default.createElement(
       Button,
       {
         compact: true,
         leftIcon: /* @__PURE__ */ React13__default.createElement(Icon, { size: 16 }),
-        onClick: props.onToggle,
+        onClick: onFocus,
         size: "sm",
-        variant: isFocused ? "filled" : "light"
+        variant: isFullMode ? "filled" : "light"
       },
-      isFocused ? translate("vizbuilder.action_close") : translate("vizbuilder.action_enlarge")
+      isFullMode ? translate("vizbuilder.action_close") : translate("vizbuilder.action_enlarge")
     );
-  }, [isFocused, isSingleChart, translate, props.onToggle]);
-  const height = isFocused ? "calc(100vh - 3rem)" : isSingleChart ? "75vh" : 300;
-  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" }, downloadButtons, focusButton), /* @__PURE__ */ React13__default.createElement(Box, { style: { flex: "1 1 auto" }, ref: nodeRef, pb: "xs", px: "xs" }, /* @__PURE__ */ React13__default.createElement(ChartComponent, { config })))));
+  }, [isFullMode, translate, onFocus]);
+  const height = isFullMode ? "calc(100vh - 3rem)" : 300;
+  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" }, 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 })))));
 }
 var getBackground = (node) => {
   if (node.nodeType !== Node.ELEMENT_NODE) return "white";
@@ -7192,150 +8218,178 @@ var getBackground = (node) => {
   return color && color !== "rgba(0, 0, 0, 0)" && color !== "transparent" ? color : getBackground(node.parentNode);
 };
 
-// src/vizbuilder/components/VizbuilderView.tsx
-function createVizbuilderView(settings) {
+// src/vizbuilder/components/NonIdealState.tsx
+init_esm_shims();
+function NonIdealState2() {
+  const { translate: t } = useTranslation();
+  return /* @__PURE__ */ React13__default.createElement("div", { className: "vb-nonidealstate" }, /* @__PURE__ */ React13__default.createElement("h1", { className: "vb-nonidealstate-header" }, t("title.nonidealstate")));
+}
+
+// src/vizbuilder/components/Vizbuilder.tsx
+function Vizbuilder(props) {
   const {
+    datasets,
+    chartLimits,
     chartTypes,
     datacap,
-    defaultLocale = "en",
     downloadFormats,
-    nonIdealState: Notice = NonIdealState2,
-    showConfidenceInt = false,
+    measureConfig,
+    nonIdealState,
+    showConfidenceInt,
     topojsonConfig,
-    userConfig = {}
-  } = settings;
-  const getMeasureConfig = measureConfigAccessor(settings.measureConfig || {});
-  const chartLimits = { ...DEFAULT_CHART_LIMITS, ...settings.chartLimits };
-  const chartGenOptions = { chartLimits, chartTypes, datacap, topojsonConfig };
-  return VizbuilderView;
-  function VizbuilderView(props) {
-    const { cube, panelKey, params, result } = props;
-    const { actions: actions2, formatters } = useSettings();
-    const [panelName, currentChart] = useMemo(
-      () => `${panelKey || ""}-`.split("-"),
-      [panelKey]
-    );
-    const resetCurrentPanel = useCallback(() => {
-      actions2.switchPanel(panelName);
-    }, [panelName]);
-    const charts = useMemo(
-      () => generateCharts(
-        [
-          {
-            cube,
-            dataset: result.data,
-            params: {
-              locale: params.locale || defaultLocale,
-              booleans: params.booleans,
-              cuts: mapActives(params.cuts, (item) => ({
-                dimension: item.dimension,
-                hierarchy: item.hierarchy,
-                level: item.level,
-                members: item.members
-              })),
-              drilldowns: mapActives(params.drilldowns, (item) => ({
-                caption: item.captionProperty,
-                dimension: item.dimension,
-                hierarchy: item.hierarchy,
-                level: item.level,
-                properties: item.properties.map((item2) => item2.name)
-              })),
-              filters: mapActives(params.filters, (item) => ({
-                constraint1: [item.conditionOne[0], item.conditionOne[2]],
-                constraint2: item.conditionTwo ? [item.conditionTwo[0], item.conditionTwo[2]] : void 0,
-                formatter: formatters[item.measure],
-                joint: item.joint,
-                measure: item.measure
-              })),
-              measures: mapActives(params.measures, (item) => ({
-                formatter: formatters[item.name],
-                measure: item.name
-              }))
-            }
-          }
+    userConfig
+  } = props;
+  const [currentChart, setCurrentChart] = useState("");
+  const getMeasureConfig = useMemo(() => {
+    const config = measureConfig || {};
+    return typeof config === "function" ? config : (item) => config[item.name];
+  }, [measureConfig]);
+  const getTopojsonConfig = useMemo(() => {
+    const config = topojsonConfig || {};
+    return typeof config === "function" ? config : (item) => config[item.name];
+  }, [topojsonConfig]);
+  const charts = useMemo(() => {
+    const charts2 = generateCharts(asArray(datasets), {
+      chartLimits,
+      chartTypes,
+      datacap,
+      getTopojsonConfig
+    });
+    return Object.fromEntries(charts2.map((chart) => [chart.key, chart]));
+  }, [chartLimits, chartTypes, datacap, datasets, getTopojsonConfig]);
+  const content = useMemo(() => {
+    const chartList = Object.values(charts);
+    if (chartList.length === 0) {
+      const Notice = nonIdealState || NonIdealState2;
+      return /* @__PURE__ */ React13__default.createElement(Notice, null);
+    }
+    const isSingleChart = chartList.length === 1;
+    return /* @__PURE__ */ React13__default.createElement(
+      SimpleGrid,
+      {
+        breakpoints: [
+          { minWidth: "xs", cols: 1 },
+          { minWidth: "md", cols: 2 },
+          { minWidth: "lg", cols: 3 },
+          { minWidth: "xl", cols: 4 }
         ],
-        chartGenOptions
-      ),
-      [cube, result.data, params]
-    );
-    const content = useMemo(() => {
-      const isSingleChart = charts.length === 1;
-      const chartMap = new Map(charts.map((item) => [item.key, item]));
-      const filteredCharts = [...chartMap.values()];
-      if (filteredCharts.length === 0) return /* @__PURE__ */ React13__default.createElement(Notice, null);
-      return /* @__PURE__ */ React13__default.createElement(
-        SimpleGrid,
-        {
-          breakpoints: [
-            { minWidth: "xs", cols: Math.min(1, filteredCharts.length) },
-            { minWidth: "md", cols: Math.min(2, filteredCharts.length) },
-            { minWidth: "lg", cols: Math.min(3, filteredCharts.length) },
-            { minWidth: "xl", cols: Math.min(4, filteredCharts.length) }
-          ],
-          className: clsx_m_default({ unique: filteredCharts.length === 1 })
-        },
-        filteredCharts.map((chart) => /* @__PURE__ */ React13__default.createElement(
-          ChartCard,
-          {
-            chart,
-            currentChart: "",
-            downloadFormats,
-            isSingleChart,
-            key: chart.key,
-            measureConfig: getMeasureConfig,
-            onToggle: () => {
-              actions2.switchPanel(`${panelName}-${chart.key}`);
-            },
-            showConfidenceInt,
-            userConfig
-          }
-        ))
-      );
-    }, [panelName, charts]);
-    const focusContent = useMemo(() => {
-      const chart = charts.find((chart2) => currentChart && chart2.key === currentChart);
-      if (!chart) return null;
-      return /* @__PURE__ */ React13__default.createElement(
+        className: clsx_m_default({ unique: isSingleChart })
+      },
+      chartList.map((chart) => /* @__PURE__ */ React13__default.createElement(
         ChartCard,
         {
+          key: chart.key,
           chart,
-          currentChart,
           downloadFormats,
-          isSingleChart: true,
-          key: `${chart.key}-focus`,
           measureConfig: getMeasureConfig,
-          onToggle: resetCurrentPanel,
+          onFocus: () => setCurrentChart(chart.key),
           showConfidenceInt,
           userConfig
         }
-      );
-    }, [currentChart, charts, resetCurrentPanel]);
-    return /* @__PURE__ */ React13__default.createElement(Box, { className: props.className, p: "sm" }, content, /* @__PURE__ */ React13__default.createElement(
-      Modal,
+      ))
+    );
+  }, [
+    charts,
+    getMeasureConfig,
+    nonIdealState,
+    downloadFormats,
+    userConfig,
+    showConfidenceInt
+  ]);
+  const focusContent = useMemo(() => {
+    const chart = charts[currentChart];
+    if (!chart) return null;
+    return /* @__PURE__ */ React13__default.createElement(
+      ChartCard,
       {
-        centered: true,
-        onClose: resetCurrentPanel,
-        opened: currentChart !== "",
-        padding: 0,
-        size: "calc(100vw - 3rem)",
-        styles: {
-          content: { maxHeight: "none !important" },
-          inner: { padding: "0 !important" }
-        },
-        withCloseButton: false
+        key: `${chart.key}-focus`,
+        chart,
+        downloadFormats,
+        measureConfig: getMeasureConfig,
+        onFocus: () => setCurrentChart(""),
+        showConfidenceInt,
+        userConfig,
+        isFullMode: true
+      }
+    );
+  }, [
+    charts,
+    currentChart,
+    downloadFormats,
+    getMeasureConfig,
+    showConfidenceInt,
+    userConfig
+  ]);
+  return /* @__PURE__ */ React13__default.createElement("div", { className: clsx_m_default("vb-wrapper", props.className) }, props.customHeader, content, props.customFooter, /* @__PURE__ */ React13__default.createElement(
+    Modal,
+    {
+      centered: true,
+      onClose: useCallback(() => setCurrentChart(""), []),
+      opened: currentChart !== "",
+      padding: 0,
+      size: "calc(100vw - 3rem)",
+      styles: {
+        content: { maxHeight: "none !important" },
+        inner: { padding: "0 !important" }
       },
-      focusContent
-    ));
-  }
+      withCloseButton: false
+    },
+    focusContent
+  ));
 }
-function NonIdealState2() {
-  const { translate: t } = useTranslation();
-  return /* @__PURE__ */ React13__default.createElement(Box, { className: "vizbuilder-nonidealstate" }, /* @__PURE__ */ React13__default.createElement(Title, { order: 1, className: "vizbuilder-nonidealstate-header" }, t("nonidealstate_msg")));
+
+// src/vizbuilder/components/VizbuilderView.tsx
+var CHART_LIMITS = {
+  BARCHART_MAX_BARS: 20,
+  BARCHART_YEAR_MAX_BARS: 20,
+  BARCHART_MAX_STACKED_BARS: 10,
+  DONUT_SHAPE_MAX: 30,
+  LINEPLOT_LINE_POINT_MIN: 2,
+  LINEPLOT_LINE_MAX: 20,
+  STACKED_SHAPE_MAX: 200,
+  STACKED_TIME_MEMBER_MIN: 2,
+  TREE_MAP_SHAPE_MAX: 1e3
+};
+var DOWNLOAD_FORMATS = ["SVG", "PNG"];
+function VizbuilderView(props) {
+  const { cube, params, result } = props;
+  const dataset = useMemo(() => {
+    const columns = Object.keys(result.types);
+    return {
+      columns: Object.fromEntries(
+        columns.map((columnName) => [
+          columnName,
+          buildColumn(cube, columnName, columns)
+        ])
+      ),
+      data: result.data,
+      locale: params.locale || "en"
+    };
+  }, [cube, result, params.locale]);
+  return /* @__PURE__ */ React13__default.createElement(
+    Vizbuilder,
+    {
+      datasets: dataset,
+      chartLimits: CHART_LIMITS,
+      downloadFormats: DOWNLOAD_FORMATS
+    }
+  );
 }
 /*! Bundled license information:
 
 file-saver/FileSaver.js:
   (*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js *)
+
+lodash-es/lodash.js:
+  (**
+   * @license
+   * Lodash (Custom Build) <https://lodash.com/>
+   * Build: `lodash modularize exports="es" -o ./`
+   * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
+   * Released under MIT license <https://lodash.com/license>
+   * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+   * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+   *)
 */
 
-export { DebugView, ExplorerComponent as Explorer, PivotView, SettingsConsumer, TableView, ToolbarButton, TourStep, TranslationConsumer, createVizbuilderView, reducer as explorerReducer, thunkExtraArg as explorerThunkExtraArg, defaultTranslation as translationDict, useSettings, useTranslation };
+export { DebugView, ExplorerComponent as Explorer, PivotView, SettingsConsumer, TableView, ToolbarButton, TourStep, TranslationConsumer, VizbuilderView, reducer as explorerReducer, thunkExtraArg as explorerThunkExtraArg, defaultTranslation as translationDict, useSettings, useTranslation };