@datawheel/bespoke 0.3.13 → 0.3.15

package/dist/index.js

@@ -24,7 +24,7 @@ import { dataConcat, dataLoad } from 'd3plus-viz';
 import * as d3plus from 'd3plus-react';
 import Router, { useRouter } from 'next/router';
 import { useMediaQuery, useClickOutside, useDisclosure, useDebouncedValue, useSetState, useHotkeys, useFullscreen, getHotkeyHandler } from '@mantine/hooks';
-import { IconDice, IconBoxMultiple, IconEyeOff, IconChevronDown, IconInfoCircle, IconRefresh, IconSearch, IconPlus, IconHeading, IconApi, IconPercentage, IconChartBar, IconAlignLeft, IconSelector, IconPhoto, IconAlignCenter, IconAlignRight, IconBallpen, IconDatabase, IconMathFunction, IconUsers, IconLogout, IconTrash, IconX, IconPhotoFilled, IconFileUpload, IconUserCircle, IconEdit, IconCircleDashed, IconServer, IconPencil, IconAlertCircle, IconCircleCheck, IconPlayerPlay, IconCircleX, IconFlag, IconFileAnalytics, IconHome, IconSettingsFilled, IconEye, IconWorldUpload, IconBraces, IconClockHour2, IconAugmentedReality, IconGitMerge, IconGripHorizontal, IconChevronLeft, IconChevronRight, IconPolaroid, IconCircleMinus, IconTable, IconCamera, IconShare, IconCirclePlus, IconLogin, IconWorld, IconLock, IconBinaryTree, IconVariable, IconArrowRightCircle, IconIndentIncrease, IconCodeDots, IconUpload, IconCodePlus, IconLink, IconSparkles, IconClipboardCheck, IconClipboardCopy, IconExternalLink, IconDownload, IconTemplate, IconCode, IconPalette, IconSettings, IconMinimize, IconMaximize, IconRss, IconGlobe, IconLinkOff } from '@tabler/icons-react';
+import { IconDice, IconBoxMultiple, IconEyeOff, IconChevronDown, IconInfoCircle, IconRefresh, IconSearch, IconPlus, IconHeading, IconApi, IconPercentage, IconChartBar, IconAlignLeft, IconSelector, IconPhoto, IconAlignCenter, IconAlignRight, IconBallpen, IconDatabase, IconMathFunction, IconUsers, IconLogout, IconTrash, IconX, IconPhotoFilled, IconFileUpload, IconUserCircle, IconEdit, IconCircleDashed, IconServer, IconPencil, IconAlertCircle, IconCircleCheck, IconPlayerPlay, IconCircleX, IconFlag, IconFileAnalytics, IconHome, IconSettingsFilled, IconEye, IconWorldUpload, IconBraces, IconClockHour2, IconAugmentedReality, IconGitMerge, IconGripHorizontal, IconChevronLeft, IconChevronRight, IconPolaroid, IconCircleMinus, IconTable, IconCamera, IconShare, IconCirclePlus, IconLogin, IconWorld, IconLock, IconBinaryTree, IconVariable, IconArrowRightCircle, IconIndentIncrease, IconCodeDots, IconUpload, IconCodePlus, IconLink, IconSparkles, IconClipboardCheck, IconClipboardCopy, IconExternalLink, IconTemplate, IconCode, IconDownload, IconPalette, IconFileTypeCsv, IconFileTypeJs, IconFileTypeXls, IconSettings, IconMinimize, IconMaximize, IconRss, IconGlobe, IconLinkOff } from '@tabler/icons-react';
 import dynamic from 'next/dynamic';
 import Link from 'next/link';
 import parse2, { Element, domToReact, Text as Text$1 } from 'html-react-parser';
@@ -7272,9 +7272,18 @@ init_varSwapRecursive();
 init_runConsumers();
 init_consts();
 var formatOptions = {
-  csv: "CSV",
-  json: "JSON",
-  xlsx: "XLSX"
+  csv: {
+    extension: "CSV",
+    icon: IconFileTypeCsv
+  },
+  json: {
+    extension: "JSON",
+    icon: IconFileTypeJs
+  },
+  xlsx: {
+    extension: "XLSX",
+    icon: IconFileTypeXls
+  }
 };
 var DEFAULT_TRANSLATIONS2 = {
   "data_source": "Data Source",
@@ -7293,7 +7302,7 @@ var DEFAULT_TRANSLATIONS2 = {
   "rows_preview": "(First {nrows} rows as preview)",
   "choose_format": "Choose format",
   "processing_file": "Processing file...",
-  "download": "Download full selected dataset in {fmt} format",
+  "download": "Download data as",
   "preview": "Preview",
   "copy": "Click to copy",
   "copied": "Copied!"
@@ -7330,9 +7339,9 @@ function DataTab(props) {
   const [selectedSource, setSelectedSource] = useState();
   const [selectedDataset, setSelectedDataset] = useState();
   const [fileProcessing, setFileProcessing] = useState(false);
-  const [fileFormat, setFileFormat] = useState(formatOptions.csv);
   const [previewsSource, setPreviewsSource] = useState({});
-  const [loadingPreview, setLoadingPreview] = useState(false);
+  const [loadingPreview, setLoadingPreview] = useState(true);
+  const [loadingSources, setLoadingSources] = useState(true);
   const { sectionVariables, setSectionVariables, resetSectionVariables } = useSectionVariables(section.id);
   const blockIds = section.blocks || [];
   const state = useAppSelector((state2) => state2);
@@ -7461,6 +7470,7 @@ function DataTab(props) {
           }
         }
       }
+      setLoadingSources(false);
     }
   }, [blocksData]);
   useEffect(() => {
@@ -7502,28 +7512,28 @@ function DataTab(props) {
       }
     }
   }, [selectedDataset, selectedSource]);
-  const getFileName = (nameformat, fileFormat2) => {
-    const finalNameFormat = nameformat === fileFormat2 ? "" : `-${nameformat}`.toLowerCase();
+  const getFileName = (nameformat, fileFormat) => {
+    const finalNameFormat = nameformat === fileFormat ? "" : `-${nameformat}`.toLowerCase();
     if (selectedSource) {
       const fileIndex = selectedSource.data.length > 1 && selectedDataset ? `-${parseInt(selectedDataset, 10) + 1}` : "";
-      return `${slugify_default(selectedSource.fileName)}${finalNameFormat}${fileIndex}.${fileFormat2.toLowerCase()}`;
+      return `${slugify_default(selectedSource.fileName)}${finalNameFormat}${fileIndex}.${fileFormat.toLowerCase()}`;
     }
-    return `${finalNameFormat}.${fileFormat2}`;
+    return `${finalNameFormat}.${fileFormat}`;
   };
-  const onSaveClick = async () => {
+  const onSaveClick = async (fileFormat) => {
     if (selectedSource) {
       setFileProcessing(true);
       const zipFile = new JSZip();
       const filename = getFileName(fileFormat, fileFormat);
       try {
         switch (fileFormat) {
-          case formatOptions.json:
+          case formatOptions.json.extension:
             zipFile.file(filename, JSON.stringify(currentPreview));
             break;
-          case formatOptions.csv:
+          case formatOptions.csv.extension:
             zipFile.file(filename, csvFormat(currentPreview));
             break;
-          case formatOptions.xlsx:
+          case formatOptions.xlsx.extension:
             const { utils, write } = await import('xlsx');
             const wb = utils.book_new();
             utils.book_append_sheet(
@@ -7570,8 +7580,9 @@ function DataTab(props) {
   )), [sourcesOptions, selectedSource, sourcesToLoad]);
   return /* @__PURE__ */ jsxs(Stack, { className: "cms-section-options-data", children: [
     /* @__PURE__ */ jsx(Space, { h: "xs" }),
-    sourcesOptions.length === 0 && /* @__PURE__ */ jsx("p", { children: "No data sources defined." }),
-    sourcesOptions.length > 1 && /* @__PURE__ */ jsx(Input.Wrapper, { label: `${translations["choose_data_src"]}:`, children: /* @__PURE__ */ jsx(Group, { spacing: "xs", children: sourcesButtons }) }),
+    /* @__PURE__ */ jsx(LoadingOverlay, { visible: loadingSources, overlayBlur: 2 }),
+    sourcesOptions.length === 0 && !loadingSources && /* @__PURE__ */ jsx(Alert, { icon: /* @__PURE__ */ jsx(IconAlertCircle, { size: "1rem" }), title: "Oops!", children: translations["no_data_src"] }),
+    sourcesOptions.length > 1 && sourcesOptions.length === sourcesToLoad.length && !loadingSources && /* @__PURE__ */ jsx(Input.Wrapper, { label: `${translations["choose_data_src"]}:`, children: /* @__PURE__ */ jsx(Group, { spacing: "xs", children: sourcesButtons }) }),
     selectedSource && selectedDataset && /* @__PURE__ */ jsx(Stack, { spacing: "xs", children: /* @__PURE__ */ jsx(
       Input.Wrapper,
       {
@@ -7596,7 +7607,7 @@ function DataTab(props) {
           /* @__PURE__ */ jsx(
             CopyButton,
             {
-              value: selectedSource.data[selectedDataset] === "string" ? selectedSource.data[selectedDataset] : "",
+              value: typeof selectedSource.data[selectedDataset] === "string" ? selectedSource.data[selectedDataset] : "",
               timeout: 2e3,
               children: ({ copied, copy }) => /* @__PURE__ */ jsx(Tooltip, { label: copied ? translations["copied"] : translations["copy"], withArrow: true, position: "top", children: /* @__PURE__ */ jsx(
                 ActionIcon,
@@ -7621,32 +7632,21 @@ function DataTab(props) {
         children: translations["open_in_window"].replace("{src}", selectedSource.title)
       }
     ) }),
-    /* @__PURE__ */ jsxs(Stack, { pos: "relative", mih: "450px", children: [
-      /* @__PURE__ */ jsx(LoadingOverlay, { visible: loadingPreview }),
+    /* @__PURE__ */ jsxs(Stack, { pos: "relative", mih: "430px", children: [
+      /* @__PURE__ */ jsx(LoadingOverlay, { visible: loadingPreview && sourcesOptions.length > 0, overlayBlur: 2 }),
       selectedSource && !loadingPreview && currentPreview.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Box, { h: "300px", children: /* @__PURE__ */ jsx(SortableTable, { data: currentPreview.slice(0, PREVIEW_SIZE) }) }),
-        /* @__PURE__ */ jsx(Space, { h: "xs" }),
-        /* @__PURE__ */ jsx(Input.Wrapper, { label: `${translations["choose_format"]}: ${getFileName(fileFormat, fileFormat)}`, children: /* @__PURE__ */ jsx(Button.Group, { children: Object.keys(formatOptions).map((format2) => /* @__PURE__ */ jsx(
-          Button,
-          {
-            leftIcon: /* @__PURE__ */ jsx(IconTable, { size: 16 }),
-            onClick: () => setFileFormat(formatOptions[format2]),
-            variant: fileFormat === formatOptions[format2] ? "filled" : "default",
-            fullWidth: true,
-            children: formatOptions[format2]
-          },
-          `format-${format2}`
-        )) }) }),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Box, { h: "350px", children: /* @__PURE__ */ jsx(SortableTable, { data: currentPreview.slice(0, PREVIEW_SIZE) }) }),
+        /* @__PURE__ */ jsx(Input.Wrapper, { label: `${translations["download"]}:`, children: /* @__PURE__ */ jsx(Button.Group, { children: Object.values(formatOptions).map((format2) => /* @__PURE__ */ jsx(
           Button,
           {
-            leftIcon: /* @__PURE__ */ jsx(IconDownload, { size: 16 }),
+            leftIcon: /* @__PURE__ */ jsx(format2.icon, { size: 24 }),
+            onClick: () => onSaveClick(format2.extension),
             loading: fileProcessing,
-            onClick: onSaveClick,
             fullWidth: true,
-            children: /* @__PURE__ */ jsx("span", { children: fileProcessing ? translations["processing_file"] : translations["download"].replace("{fmt}", fileFormat) })
-          }
-        )
+            children: format2.extension
+          },
+          `format-${format2.extension}`
+        )) }) })
       ] })
     ] })
   ] });
@@ -7677,7 +7677,7 @@ var DEFAULT_TRANSLATIONS3 = {
 function ImageTab(props) {
   const { section } = props;
   const blocksIds = section.blocks || [];
-  const vizBlocks = useAppSelector((state) => blocksIds.map((blockId) => state.records.entities.block[blockId]).filter((block) => block.type === "visualization"));
+  const vizBlocks = useAppSelector((state) => blocksIds.map((blockId) => state.records.entities.block[blockId]).filter((block) => block.type === "visualization" && state.variables.status[block.id].allowed));
   const [imageContext, setImageContext] = useState(contextOptions.section);
   const [imageFormat, setImageFormat] = useState(formatOptions2.png);
   const [imageProcessing, setImageProcessing] = useState(false);
@@ -7805,31 +7805,35 @@ function ImageTab(props) {
   }, [vizSelected]);
   return /* @__PURE__ */ jsxs(Stack, { className: "cms-section-options-image", children: [
     /* @__PURE__ */ jsx(Space, { h: "xs" }),
-    /* @__PURE__ */ jsx(Input.Wrapper, { label: `${translations["choose_area"]}:`, children: /* @__PURE__ */ jsxs(Button.Group, { children: [
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          leftIcon: /* @__PURE__ */ jsx(IconTemplate, { size: 16 }),
-          onClick: () => {
-            setImageContext(contextOptions.section);
-            setImageFormat(formatOptions2.png);
+    /* @__PURE__ */ jsx(Input.Wrapper, { label: `${translations["choose_area"]}:`, children: /* @__PURE__ */ jsx(
+      SegmentedControl,
+      {
+        fullWidth: true,
+        value: imageContext,
+        data: [
+          {
+            value: contextOptions.section,
+            label: /* @__PURE__ */ jsxs(Center, { children: [
+              /* @__PURE__ */ jsx(IconTemplate, { size: "1rem" }),
+              /* @__PURE__ */ jsx(Box, { ml: 10, children: translations["entire_section"] })
+            ] })
           },
-          variant: imageContext === contextOptions.section ? "filled" : "default",
-          fullWidth: true,
-          children: translations["entire_section"]
-        }
-      ),
-      vizAvailable.length > 0 && /* @__PURE__ */ jsx(
-        Button,
-        {
-          leftIcon: /* @__PURE__ */ jsx(IconChartBar, { size: 16 }),
-          onClick: () => setImageContext(contextOptions.viz),
-          variant: imageContext === contextOptions.viz ? "filled" : "default",
-          fullWidth: true,
-          children: translations["viz_only"]
+          {
+            value: contextOptions.viz,
+            label: /* @__PURE__ */ jsxs(Center, { children: [
+              /* @__PURE__ */ jsx(IconChartBar, { size: "1rem" }),
+              /* @__PURE__ */ jsx(Box, { ml: 10, children: translations["viz_only"] })
+            ] })
+          }
+        ],
+        onChange: (newValue) => {
+          setImageContext(newValue);
+          if (newValue === contextOptions.section) {
+            setImageFormat(formatOptions2.png);
+          }
         }
-      )
-    ] }) }),
+      }
+    ) }),
     imageContext === contextOptions.viz && vizAvailable.length > 0 && /* @__PURE__ */ jsxs(
       Input.Wrapper,
       {
@@ -8530,8 +8534,8 @@ init_esm_shims();
 init_store2();
 var ALLOWED_UNITS = ["px", "%"];
 var formatters = {
-  px: (value) => !Number.isNaN(parseFloat(value)) ? `${value}px`.replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",") : "px",
-  ["%"]: (value) => !Number.isNaN(parseFloat(value)) ? `${value}%`.replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",") : "%"
+  px: (value) => !Number.isNaN(parseFloat(value)) ? `${value}px`.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,") : "px",
+  "%": (value) => !Number.isNaN(parseFloat(value)) ? `${value}%`.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,") : "%"
 };
 var WidthInputProps = {
   "px": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datawheel/bespoke",
-  "version": "0.3.13",
+  "version": "0.3.15",
   "description": "Content management system for creating automated data reports",
   "exports": {
     ".": {