@datawheel/bespoke 0.3.19 → 0.3.21

package/dist/index.js

@@ -2957,16 +2957,17 @@ var init_actions = __esm({
   }
 });
 function ResourceProvider(props) {
-  const { pathSegment, profilePrefix } = props;
+  const { pathSegment, profilePrefix, siteProps } = props;
   const formatters2 = useFormatterList();
   const value = useMemo(() => ({
     profilePrefix,
     pathSegment,
+    siteProps,
     formatterFunctions: locales3.reduce((acc, locale) => ({
       ...acc,
       [locale]: formatters2.data ? funcifyFormattersByLocale(formatters2.data, locale) : {}
     }), {})
-  }), [formatters2, pathSegment, profilePrefix]);
+  }), [formatters2, pathSegment, profilePrefix, siteProps]);
   return /* @__PURE__ */ jsx(ResourceContext.Provider, { value, children: props.children });
 }
 function useBespoke() {
@@ -2987,7 +2988,8 @@ var init_ResourceProvider = __esm({
     initialContext = {
       pathSegment: "path",
       formatterFunctions: locales3.reduce((acc, d) => ({ ...acc, [d]: {} }), {}),
-      profilePrefix: "path"
+      profilePrefix: "path",
+      siteProps: {}
     };
     ResourceContext = createContext(initialContext);
   }
@@ -3782,8 +3784,8 @@ var init_sanitizeBlockContent = __esm({
 });
 function InnerTooltip(props) {
   const { content, style = {} } = props;
-  const print2 = usePrint();
-  const element = print2 ? /* @__PURE__ */ jsx("div", { className: "bespoke-inner-tooltip-notification", children: /* @__PURE__ */ jsx(
+  const print = usePrint();
+  const element = print ? /* @__PURE__ */ jsx("div", { className: "bespoke-inner-tooltip-notification", children: /* @__PURE__ */ jsx(
     Notification,
     {
       icon: /* @__PURE__ */ jsx(IconInfoCircle, { size: "1.1rem" }),
@@ -4205,7 +4207,7 @@ function TitleView({
   _iconPadding,
   asComparison = false
 }) {
-  const print2 = usePrint();
+  const print = usePrint();
   const titleHTML = sanitizeBlockContent_default(title) || "<span class='cr-block-placeholder'>Title</span>";
   const tooltipHTML = sanitizeBlockContent_default(tooltip);
   const intOrder = settings && settings.order ? parseInt(settings.order, 10) : 1;
@@ -4245,7 +4247,7 @@ function TitleView({
       spacing: "sm",
       children: [
         /* @__PURE__ */ jsxs("div", { children: [
-          print2 ? titleElement : finalElement,
+          print ? titleElement : finalElement,
           displayName && /* @__PURE__ */ jsx(Text, { className: "bespoke-comparison-title", children: memberName })
         ] }),
         tooltip && /* @__PURE__ */ jsx(InnerTooltip, { content: tooltipHTML })
@@ -4362,7 +4364,7 @@ var init_useOnChangeSelector = __esm({
 });
 function Selector(config) {
   const { name, options, id, defaultValue, section, component, asComparison, hideLabel } = config;
-  const print2 = usePrint();
+  const print = usePrint();
   const selectorIdentifier = getSelectorIdentifier(id);
   const router = useRouter();
   const callback = useOnChangeSelector(id, section, selectorIdentifier, asComparison);
@@ -4374,9 +4376,9 @@ function Selector(config) {
     (d) => ({ value: d.id, label: d.label })
   ), [optDependency]);
   const printValue = useMemo(() => {
-    const optionsString = print2 ? options.filter((o) => multiValue.includes(o.id)).map((o) => o.label).join(", ") : "";
+    const optionsString = print ? options.filter((o) => multiValue.includes(o.id)).map((o) => o.label).join(", ") : "";
     return optionsString;
-  }, [print2]);
+  }, [print]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(MediaQuery, { query: "print", styles: { display: "none" }, children: /* @__PURE__ */ jsx(Box, { children: {
       [SELECTOR_TYPES.SINGLE]: component === SELECTOR_COMPONENTS.SEGMENTED_CONTROL ? /* @__PURE__ */ jsxs("div", { children: [
@@ -4419,7 +4421,7 @@ function Selector(config) {
         }
       )
     }[config.type] }) }),
-    print2 && /* @__PURE__ */ jsxs(Text, { children: [
+    print && /* @__PURE__ */ jsxs(Text, { children: [
       name,
       ": ",
       printValue
@@ -5068,7 +5070,7 @@ __export(Viz_exports, {
   default: () => Viz
 });
 function Viz(config) {
-  const print2 = usePrint();
+  const print = usePrint();
   const { block, active, locale, variables, configOverride = {} } = config;
   const content = getBlockContent(block);
   const formatterFunctions = useFormatterFunctionsForLocale(locale);
@@ -5097,8 +5099,8 @@ function Viz(config) {
   const Visualization = vizTypes[fallbackType];
   const vizPropsConfig = useMemo(() => {
     const { _data, ...vizPropsInnerConfig } = vizProps.config;
-    return printOverrides(vizPropsInnerConfig, print2);
-  }, [vizProps, print2]);
+    return printOverrides(vizPropsInnerConfig, print);
+  }, [vizProps, print]);
   const vizConfig = { locale, variables, ...vizPropsConfig, ...configOverride };
   return /* @__PURE__ */ jsx("div", { className: "bespoke-Viz", children: /* @__PURE__ */ jsx(
     "div",
@@ -8029,24 +8031,27 @@ var init_DataTab = __esm({
 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" && state.variables.status[block.id].allowed));
+  const vizAvailable = 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);
   const [svgAvailable, setSvgAvailable] = useState(false);
-  const [vizAvailable, setVizAvailable] = useState(vizBlocks);
   const [vizPreviews, setVizPreviews] = useState([]);
   const [vizSelected, setVizSelected] = useState(vizAvailable.length > 0 ? vizAvailable[0].id : null);
   const [transparentBackground, setTransparentBackground] = useState(true);
   const [loadingPreviews, setLoadingPreviews] = useState(false);
   const optionsTranslations = useBespokeTranslations("options");
   const translations = { ...DEFAULT_TRANSLATIONS3, ...optionsTranslations["image_tab"] };
+  const { siteProps } = useBespoke();
+  const includeLogo = siteProps?.logoSrc && typeof siteProps.logoSrc === "string";
+  const sectionHash = section.settings?.name ? `#${section.settings.name}` : `#section-${section.id}`;
+  const theme = useMantineTheme();
   const vizSelectedHasSVG = () => {
     const vizNode = getVizNode(section.id, vizSelected);
     const svgCount = select(vizNode).select("svg").size();
     return svgCount === 1;
   };
-  const getFileName = () => `${slugify_default("export-name")}`;
+  const getFileName = () => `${slugify_default(section?.settings?.name || `section-${section.id}`)}`;
   const getSectionNode = (sectionId) => {
     const sectionNode = document.getElementById(`section-${sectionId}`);
     return select(sectionNode).select(".bespoke-section-content").node();
@@ -8055,15 +8060,39 @@ function ImageTab(props) {
     const sectionNode = getSectionNode(sectionId);
     return select(sectionNode).select(`#bespoke-visualization-${vizId}.bespoke-block-area`).node();
   };
-  const getSelectedNode = () => {
+  const getSelectedNode = () => new Promise((resolve) => {
     let node;
     if (imageContext === contextOptions.section) {
       node = getSectionNode(section.id);
     } else if (imageContext === contextOptions.viz) {
       node = getVizNode(section.id, vizSelected);
     }
-    return node;
-  };
+    const sourceContainer = document.createElement("div");
+    sourceContainer.style.display = "flex";
+    sourceContainer.style.justifyContent = "space-between";
+    sourceContainer.classList.add("bespoke-Viz-source");
+    sourceContainer.style.padding = theme.spacing.xs;
+    sourceContainer.style.width = "100%";
+    const sourceNode = document.createElement("div");
+    sourceNode.innerText = translations["source"].replace("{src}", `${window.location}${sectionHash}`);
+    sourceNode.style.fontSize = theme.fontSizes.xs;
+    sourceContainer.appendChild(sourceNode);
+    if (includeLogo) {
+      const sourceImage = document.createElement("img");
+      sourceImage.src = siteProps.logoSrc;
+      sourceImage.style.height = "30px";
+      sourceImage.onload = () => resolve(node);
+      sourceImage.onerror = () => {
+        sourceImage.remove();
+        resolve(node);
+      };
+      sourceContainer.appendChild(sourceImage);
+      node.appendChild(sourceContainer);
+    } else {
+      node.appendChild(sourceContainer);
+      resolve(node);
+    }
+  });
   const getBackground = (elem) => {
     if (transparentBackground)
       return "transparent";
@@ -8086,9 +8115,6 @@ function ImageTab(props) {
             return !config.exclusionClasses.some((classname) => innerNode.classList.contains(classname));
           }
           return true;
-        },
-        style: {
-          // background: "green",
         }
       }
     ).then((dataUrl) => {
@@ -8096,6 +8122,7 @@ function ImageTab(props) {
       link.download = `${config.filename}.png`;
       link.href = dataUrl;
       link.click();
+      cleanDOM();
       setImageProcessing(false);
     }).catch((err) => {
       console.log(err);
@@ -8108,9 +8135,9 @@ function ImageTab(props) {
       { background: config.background }
     );
   };
-  const onSaveClick = () => {
+  const onSaveClick = async () => {
     setImageProcessing(true);
-    const node = getSelectedNode();
+    const node = await getSelectedNode();
     const exportConfig = {
       background: getBackground(node),
       exclusionClasses: ["export-hidden"],
@@ -8157,7 +8184,7 @@ 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__ */ jsx(
+    vizAvailable.length > 0 ? /* @__PURE__ */ jsx(Input.Wrapper, { label: `${translations["choose_area"]}:`, children: /* @__PURE__ */ jsx(
       SegmentedControl,
       {
         fullWidth: true,
@@ -8185,7 +8212,7 @@ function ImageTab(props) {
           }
         }
       }
-    ) }),
+    ) }) : /* @__PURE__ */ jsx(Text, { fw: "700", color: "gray.7", children: `${translations["entire_section"]}:` }),
     imageContext === contextOptions.viz && vizAvailable.length > 0 && /* @__PURE__ */ jsxs(
       Input.Wrapper,
       {
@@ -8239,7 +8266,7 @@ function ImageTab(props) {
       Checkbox,
       {
         checked: transparentBackground,
-        label: `${translations["transparent_bg"]}:`,
+        label: `${translations["transparent_bg"]}`,
         onChange: () => setTransparentBackground(!transparentBackground),
         radius: "xl"
       }
@@ -8256,13 +8283,14 @@ function ImageTab(props) {
     )
   ] });
 }
-var contextOptions, formatOptions2, DEFAULT_TRANSLATIONS3;
+var contextOptions, formatOptions2, cleanDOM, DEFAULT_TRANSLATIONS3;
 var init_ImageTab = __esm({
   "components/options/tabs/ImageTab.tsx"() {
     init_esm_shims();
     init_slugify();
     init_store2();
     init_TranslationsProvider();
+    init_ResourceProvider();
     contextOptions = {
       viz: "viz",
       section: "section"
@@ -8271,6 +8299,10 @@ var init_ImageTab = __esm({
       png: "PNG",
       svg: "SVG"
     };
+    cleanDOM = () => {
+      const sourceNodes = document.getElementsByClassName("bespoke-Viz-source");
+      Array.from(sourceNodes).forEach((node) => node.remove());
+    };
     DEFAULT_TRANSLATIONS3 = {
       "wrong_node": "Wrong node in export",
       "choose_area": "Choose image area",
@@ -8280,7 +8312,8 @@ var init_ImageTab = __esm({
       "processing": "Processing image...",
       "download": "Download {imageFormat}",
       "entire_section": "Entire section",
-      "viz_only": "Visualization only"
+      "viz_only": "Visualization only",
+      "source": "Source: {src}"
     };
   }
 });
@@ -9144,7 +9177,7 @@ var init_site = __esm({
   }
 });
 function ImageCredits({ previews, translations }) {
-  const print2 = usePrint();
+  const print = usePrint();
   const credits = useMemo(() => previews.map(
     ({ image, name }, idx) => (image?.author || image?.url) && /* @__PURE__ */ jsxs(Stack, { spacing: 0, children: [
       image.author && /* @__PURE__ */ jsxs(Text, { size: "xs", children: [
@@ -9169,7 +9202,7 @@ function ImageCredits({ previews, translations }) {
       idx + 1 < previews.length && /* @__PURE__ */ jsx(Divider, {})
     ] }, image.id)
   ), [previews]);
-  return /* @__PURE__ */ jsx(Fragment, { children: print2 ? /* @__PURE__ */ jsx(Fragment, { children: credits }) : /* @__PURE__ */ jsxs(Popover, { position: "right", children: [
+  return /* @__PURE__ */ jsx(Fragment, { children: print ? /* @__PURE__ */ jsx(Fragment, { children: credits }) : /* @__PURE__ */ jsxs(Popover, { position: "right", children: [
     /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(ActionIcon, { variant: "light", radius: "xl", children: /* @__PURE__ */ jsx(IconPhoto, { size: 20 }) }) }),
     /* @__PURE__ */ jsx(Popover.Dropdown, { children: credits })
   ] }) });
@@ -9181,6 +9214,7 @@ var init_ImageCredits = __esm({
   }
 });
 function SectionWrapper({
+  name,
   children,
   id,
   sectionSettings: sectionSettings2,
@@ -9188,6 +9222,7 @@ function SectionWrapper({
   previews,
   translations
 }) {
+  const print = usePrint();
   const showCredits = sectionSettings2.memberImageBg && previews.some(({ image }) => image && (image.url || image.author));
   return /* @__PURE__ */ jsxs(
     PositionWrapper,
@@ -9203,7 +9238,7 @@ function SectionWrapper({
             className: `bespoke-Section-${id} bespoke-Section-container `,
             settings: sectionSettings2,
             styles: sectionStyles?.container,
-            id: `section-${id}`,
+            id: name || `section-${id}`,
             pos: "relative",
             children: [
               !print && /* @__PURE__ */ jsxs(Group, { position: "right", mb: "xs", children: [
@@ -9235,7 +9270,6 @@ function Section({ section }) {
     ...defaultSectionSettings,
     ...settings
   };
-  usePrint();
   const comparison = useComparison();
   const state = useAppSelector((state2) => state2);
   const status = useAppSelector((state2) => state2.variables.status);
@@ -9356,6 +9390,7 @@ function Section({ section }) {
     SectionWrapper,
     {
       id,
+      name: section?.settings?.name,
       previews: comparisonPreviews,
       sectionSettings: sectionSettings2,
       sectionStyles,
@@ -9466,7 +9501,7 @@ function Report({ pathSegmentsKey = "bespoke" }) {
   const { asPath, query } = useRouter();
   const sectionList = useSectionList();
   const comparison = useComparison();
-  const print2 = yn4(query.print) ?? false;
+  const print = yn4(query.print) ?? false;
   const printBtn = yn4(query.printBtn) ?? false;
   const [downloadLoading, setDownloadLoading] = useState(false);
   const printReport = () => {
@@ -9482,12 +9517,12 @@ function Report({ pathSegmentsKey = "bespoke" }) {
     });
   };
   useScrollToAnchor();
-  return /* @__PURE__ */ jsxs(PrintContext.Provider, { value: print2, children: [
-    print2 && /* @__PURE__ */ jsx(MediaQuery, { query: "print", styles: { display: "block" }, children: /* @__PURE__ */ jsx(Title, { display: "none", children: "This is the report header" }) }),
+  return /* @__PURE__ */ jsxs(PrintContext.Provider, { value: print, children: [
+    print && /* @__PURE__ */ jsx(MediaQuery, { query: "print", styles: { display: "block" }, children: /* @__PURE__ */ jsx(Title, { display: "none", children: "This is the report header" }) }),
     /* @__PURE__ */ jsxs(Container, { id: "bespoke-report", className: comparison.comparisonLoaded ? "compare" : "", p: 0, pos: "relative", fluid: true, children: [
       sectionList.isSuccess && sectionList.data.sort(orderSort).map((section) => /* @__PURE__ */ jsx(Section_default, { section }, section.id)),
       /*pdf.active*/
-      printBtn && !print2 && /* @__PURE__ */ jsx(Affix, { position: { bottom: rem(20), right: rem(20) }, children: /* @__PURE__ */ jsx(ActionIcon, { variant: "filled", radius: "xl", color: "blue", onClick: printReport, children: downloadLoading ? /* @__PURE__ */ jsx(Loader, { size: "1.125rem", color: "white" }) : /* @__PURE__ */ jsx(IconDownload, { size: "1.125rem" }) }) })
+      printBtn && !print && /* @__PURE__ */ jsx(Affix, { position: { bottom: rem(20), right: rem(20) }, children: /* @__PURE__ */ jsx(ActionIcon, { variant: "filled", radius: "xl", color: "blue", onClick: printReport, children: downloadLoading ? /* @__PURE__ */ jsx(Loader, { size: "1.125rem", color: "white" }) : /* @__PURE__ */ jsx(IconDownload, { size: "1.125rem" }) }) })
     ] })
   ] });
 }
@@ -16677,6 +16712,7 @@ function BespokeRenderer({
   translations,
   bespokeStyles,
   buildTime,
+  siteProps,
   profilePrefix = "/defaultPath",
   loader = /* @__PURE__ */ jsx(LoadingOverlay, { visible: true }),
   mantineProviderProps = {}
@@ -16684,7 +16720,7 @@ function BespokeRenderer({
   const loading = useInitialState(pathSegmentsKey);
   if (loading)
     return /* @__PURE__ */ jsx(Fragment, { children: loader });
-  return /* @__PURE__ */ jsx(MantineProvider, { ...mantineProviderProps, theme: { other: { bespokeStyles } }, inherit: true, children: /* @__PURE__ */ jsxs(ResourceProvider, { pathSegment: "bespoke", profilePrefix, children: [
+  return /* @__PURE__ */ jsx(MantineProvider, { ...mantineProviderProps, theme: { other: { bespokeStyles } }, inherit: true, children: /* @__PURE__ */ jsxs(ResourceProvider, { pathSegment: "bespoke", profilePrefix, siteProps, children: [
     /* @__PURE__ */ jsx(TranslationsProvider, { translations, children: /* @__PURE__ */ jsx(ComparisonProvider, { children: /* @__PURE__ */ jsx(PdfProvider, { children: /* @__PURE__ */ jsx(Report_default, {}) }) }) }),
     /* @__PURE__ */ jsx("small", { className: "bespoke-timestamp", children: buildTime })
   ] }) });

package/dist/server.js

@@ -5900,7 +5900,8 @@ var { locales: locales8 } = getLocales_default();
 var initialContext = {
   pathSegment: "path",
   formatterFunctions: locales8.reduce((acc, d) => ({ ...acc, [d]: {} }), {}),
-  profilePrefix: "path"
+  profilePrefix: "path",
+  siteProps: {}
 };
 createContext(initialContext);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datawheel/bespoke",
-  "version": "0.3.19",
+  "version": "0.3.21",
   "description": "Content management system for creating automated data reports",
   "exports": {
     ".": {
@@ -130,4 +130,4 @@
   "peerDependencies": {
     "next": "^13.4.0"
   }
-}
+}