@datawheel/data-explorer 1.4.0 → 1.4.2

package/dist/main.d.mts

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

package/dist/main.mjs

@@ -600,6 +600,7 @@ function SettingsProvider(props) {
         defaultMembersFilter: props.defaultMembersFilter || "id",
         formatters: props.formatters || {},
         idFormatters: props.idFormatters || {},
+        drilldownFormatters: props.drilldownFormatters || {},
         panels: props.panels,
         previewLimit: props.previewLimit || 50,
         paginationConfig: (_a = props.pagination) != null ? _a : { rowsLimits: [100, 300, 500, 1e3], defaultLimit: 100 },
@@ -713,6 +714,10 @@ function useidFormatters() {
   const { idFormatters } = useSettings();
   return { idFormatters };
 }
+function useDrilldownFormatters() {
+  const { drilldownFormatters } = useSettings();
+  return { drilldownFormatters };
+}
 
 // src/utils/structs.ts
 function buildQuery(props) {
@@ -3318,6 +3323,7 @@ function useTable({
   const { translate: t } = useTranslation();
   const { getFormat, getFormatter } = useFormatter();
   const { idFormatters } = useidFormatters();
+  const { drilldownFormatters } = useDrilldownFormatters();
   const { sortKey, sortDir } = useSelector$1(selectSortingParams);
   const theme = useMantineTheme();
   const isSmallerThanMd = useMediaQuery(
@@ -3471,6 +3477,8 @@ function useTable({
           const row = cell.row;
           const cellId = row.original[`${cell.column.id} ID`];
           const idFormatter = idFormatters[`${keyCol.localeLabel} ID`];
+          const drilldownFormatter = drilldownFormatters[`${keyCol.localeLabel}`] || drilldownFormatters[`${entity.name}`];
+          const formattedValue = drilldownFormatter ? drilldownFormatter(cellValue, locale) : cellValue;
           return /* @__PURE__ */ React15__default.createElement(Flex, { justify: "space-between", sx: { width: "100%", maxWidth: 400 }, gap: "sm" }, /* @__PURE__ */ React15__default.createElement(
             Text,
             {
@@ -3481,7 +3489,7 @@ function useTable({
                 textOverflow: "ellipsis"
               }
             },
-            cellValue
+            formattedValue
           ), /* @__PURE__ */ React15__default.createElement(Box, null, cellId && /* @__PURE__ */ React15__default.createElement(Text, { color: "dimmed" }, idFormatter ? idFormatter(cellId) : cellId)));
         }
       };
@@ -3782,12 +3790,13 @@ var MultiFilter = ({ header }) => {
   const { translate: t } = useTranslation();
   const cutItems = useSelector$1(selectCutItems);
   const drilldownItems = useSelector$1(selectDrilldownItems);
-  useSelector$1(selectLocale);
-  header.column.id;
+  const locale = useSelector$1(selectLocale);
+  const label = header.column.id;
   const localeLabel = header.column.columnDef.header;
   const drilldown = drilldownItems.find((d) => d.level === header.column.id);
   const actions2 = useActions();
   const { idFormatters } = useidFormatters();
+  const { drilldownFormatters } = useDrilldownFormatters();
   const navigate = useNavigate();
   const debouncedUpdateUrl = useMemo(
     () => debounce((query2) => {
@@ -3831,11 +3840,13 @@ var MultiFilter = ({ header }) => {
       value: cut.members || [],
       data: drilldown.members.map((m) => {
         const idFormatter = idFormatters[`${localeLabel} ID`];
+        const drilldownFormatter = drilldownFormatters[`${localeLabel}`] || drilldownFormatters[`${label}`];
         const formattedKey = idFormatter ? idFormatter(m.key) : m.key;
         const key = formattedKey ? `(${formattedKey})` : formattedKey;
+        const formattedCaption = drilldownFormatter ? drilldownFormatter(m.caption || m.key, locale.code) : m.caption;
         return {
           value: `${m.key}`,
-          label: m.caption ? `${m.caption} ${key}` : `${key}`
+          label: formattedCaption ? `${formattedCaption} ${key}` : `${key}`
         };
       }),
       clearButtonProps: { "aria-label": "Clear selection" },
@@ -4008,6 +4019,7 @@ function LevelItem({
   const drilldowns = useSelector$1(selectDrilldownMap);
   useSelector$1(selectDrilldownItems);
   const { idFormatters } = useidFormatters();
+  const { drilldownFormatters } = useDrilldownFormatters();
   const label = useMemo(() => {
     const captions = [
       getCaption(dimension, locale),
@@ -4116,11 +4128,13 @@ function LevelItem({
       value: (cut == null ? void 0 : cut.members) || [],
       data: currentDrilldown.members.map((m) => {
         const idFormatter = idFormatters[`${label} ID`];
+        const drilldownFormatter = drilldownFormatters[`${label}`];
         const formattedKey = idFormatter ? idFormatter(m.key) : m.key;
         const key = formattedKey ? `(${formattedKey})` : formattedKey;
+        const formattedCaption = drilldownFormatter ? drilldownFormatter(m.caption || m.key, locale) : m.caption;
         return {
           value: `${m.key}`,
-          label: m.caption ? `${m.caption} ${key}` : `${key}`
+          label: formattedCaption ? `${formattedCaption} ${key}` : `${key}`
         };
       }),
       clearable: true,
@@ -4797,10 +4811,15 @@ function useBuildGraph(locale) {
       const hide = getAnnotation(item, "hide_in_ui", locale);
       if (!yn(hide)) {
         graph2.addNode(topic);
-        graph2.addNode(subtopic);
         graph2.addNode(name4);
-        graph2.addEdge(topic, subtopic);
-        graph2.addEdge(subtopic, name4);
+        if (subtopic) {
+          const uniqueSubtopic = `${topic} - ${subtopic}`;
+          graph2.addNode(uniqueSubtopic);
+          graph2.addEdge(topic, uniqueSubtopic);
+          graph2.addEdge(uniqueSubtopic, name4);
+        } else {
+          graph2.addEdge(topic, name4);
+        }
         if (topic_order) {
           graph2.addTopicOrder(topic, topic_order);
         }
@@ -5416,8 +5435,16 @@ function useAccordionValue(key, locale) {
   const [value, setValue] = useState(null);
   useEffect(() => {
     if (selectedItem) {
-      const value2 = getAnnotation(selectedItem, key, locale);
-      setValue(`${key}-${value2}`);
+      const topic = getAnnotation(selectedItem, "topic", locale);
+      const subtopic = getAnnotation(selectedItem, "subtopic", locale);
+      if (key === "subtopic" && subtopic) {
+        setValue(`${key}-${topic} - ${subtopic}`);
+      } else if (key === "topic") {
+        setValue(`${key}-${topic}`);
+      } else {
+        const val = getAnnotation(selectedItem, key, locale);
+        setValue(`${key}-${val}`);
+      }
     }
   }, [key, selectedItem, locale]);
   return { value, setValue };
@@ -5458,19 +5485,18 @@ function RootAccordions({ items, sortItems, graph, locale, selectedItem, sortLoc
       const sortItem = sortItems.find(
         (topic) => graph.topicOrder[topic] === graph.topicOrder[item]
       ) || item;
-      return /* @__PURE__ */ React15__default.createElement(Accordion.Item, { value: `topic-${item}`, key: `topic-${item}` }, /* @__PURE__ */ React15__default.createElement(AccordionControl, null, item), /* @__PURE__ */ React15__default.createElement(Accordion.Panel, null, /* @__PURE__ */ React15__default.createElement(
-        SubtopicAccordion,
+      return /* @__PURE__ */ React15__default.createElement(Accordion.Item, { value: `topic-${item}`, key: `topic-${item}` }, /* @__PURE__ */ React15__default.createElement(AccordionControl, null, item), /* @__PURE__ */ React15__default.createElement(Accordion.Panel, null, /* @__PURE__ */ React15__default.createElement("div", { style: { display: "flex", flexDirection: "column" } }, /* @__PURE__ */ React15__default.createElement(
+        TopicChildren,
         {
           graph,
           parent: item,
           sortParent: sortItem,
           items: graph.adjList[item],
-          key: item,
           locale,
           sortLocale,
           selectedItem
         }
-      )));
+      ))));
     })
   );
 }
@@ -5514,6 +5540,56 @@ function CubeButton({
     table != null ? table : item
   );
 }
+function TopicChildren({
+  items,
+  graph,
+  parent,
+  sortParent,
+  selectedItem,
+  locale,
+  sortLocale
+}) {
+  const { directCubes, subtopics } = useMemo(() => {
+    const cubes = [];
+    const folders = [];
+    items.forEach((item) => {
+      const cube = graph.items.find((c) => c.name === item);
+      if (cube) {
+        cubes.push(item);
+      } else {
+        folders.push(item);
+      }
+    });
+    return { directCubes: cubes, subtopics: folders };
+  }, [items, graph]);
+  return /* @__PURE__ */ React15__default.createElement(React15__default.Fragment, null, directCubes.sort((a, b) => {
+    const aLabel = graph.getName(a, sortLocale);
+    const bLabel = graph.getName(b, sortLocale);
+    return aLabel.localeCompare(bLabel, sortLocale, { sensitivity: "base" });
+  }).map((cube, index) => /* @__PURE__ */ React15__default.createElement(
+    CubeButton,
+    {
+      key: `direct-${cube}-${index}`,
+      graph,
+      item: cube,
+      locale,
+      sortLocale,
+      selectedItem,
+      parent: ""
+    }
+  )), subtopics.length > 0 && /* @__PURE__ */ React15__default.createElement(
+    SubtopicAccordion,
+    {
+      items: subtopics,
+      graph,
+      parent,
+      sortParent,
+      selectedItem,
+      locale,
+      sortLocale
+    }
+  ));
+}
 function SubtopicAccordion({
   items,
   graph,
@@ -5551,29 +5627,32 @@ function SubtopicAccordion({
       })
     },
     [...items].sort((a, b) => {
+      const aName = a.split(" - ").pop();
+      const bName = b.split(" - ").pop();
       const aLabel = graph.items.find(
-        (cube) => getAnnotation(cube, "topic", locale) === parent && getAnnotation(cube, "subtopic", locale) === a
+        (cube) => getAnnotation(cube, "topic", locale) === parent && getAnnotation(cube, "subtopic", locale) === aName
       );
       const bLabel = graph.items.find(
-        (cube) => getAnnotation(cube, "topic", locale) === parent && getAnnotation(cube, "subtopic", locale) === b
+        (cube) => getAnnotation(cube, "topic", locale) === parent && getAnnotation(cube, "subtopic", locale) === bName
       );
-      const aSort = aLabel ? getAnnotation(aLabel, "subtopic", sortLocale) || a : a;
-      const bSort = bLabel ? getAnnotation(bLabel, "subtopic", sortLocale) || b : b;
+      const aSort = (aLabel ? getAnnotation(aLabel, "subtopic", sortLocale) : null) || aName || "";
+      const bSort = (bLabel ? getAnnotation(bLabel, "subtopic", sortLocale) : null) || bName || "";
       return aSort.localeCompare(bSort, sortLocale, { sensitivity: "base" });
     }).map((item, index) => {
       let sortSubtopic = item;
+      const itemName = item.split(" - ").pop();
       if (sortParent && item) {
         const hasCubeInLocale = graph.items.some(
-          (cube) => getAnnotation(cube, "topic", locale) === parent && getAnnotation(cube, "subtopic", locale) === item
+          (cube) => getAnnotation(cube, "topic", locale) === parent && getAnnotation(cube, "subtopic", locale) === itemName
         );
         if (hasCubeInLocale) {
           const matchingCube = graph.items.find(
-            (cube) => getAnnotation(cube, "topic", sortLocale) === sortParent && getAnnotation(cube, "subtopic", locale) === item
+            (cube) => getAnnotation(cube, "topic", sortLocale) === sortParent && getAnnotation(cube, "subtopic", locale) === itemName
           );
           if (matchingCube) {
             const annotatedSubtopic = getAnnotation(matchingCube, "subtopic", sortLocale);
             if (annotatedSubtopic) {
-              sortSubtopic = annotatedSubtopic;
+              sortSubtopic = `${sortParent} - ${annotatedSubtopic}`;
             }
           }
         }
@@ -5586,7 +5665,7 @@ function SubtopicAccordion({
         const bSort = bLabel ? getAnnotation(bLabel, "table", sortLocale) || b : b;
         return aSort.localeCompare(bSort, sortLocale, { sensitivity: "base" });
       }) : [];
-      return /* @__PURE__ */ React15__default.createElement(Accordion.Item, { value: `subtopic-${item}`, key: `subtopic-${item}-${index}` }, /* @__PURE__ */ React15__default.createElement(AccordionControl, null, item), /* @__PURE__ */ React15__default.createElement(Accordion.Panel, null, filtered.map((table, index2) => /* @__PURE__ */ React15__default.createElement(
+      return /* @__PURE__ */ React15__default.createElement(Accordion.Item, { value: `subtopic-${item}`, key: `subtopic-${item}-${index}` }, /* @__PURE__ */ React15__default.createElement(AccordionControl, null, item.split(" - ").pop()), /* @__PURE__ */ React15__default.createElement(Accordion.Panel, null, filtered.map((table, index2) => /* @__PURE__ */ React15__default.createElement(
         CubeButton,
         {
           key: index2,
@@ -5595,7 +5674,7 @@ function SubtopicAccordion({
           locale,
           sortLocale,
           selectedItem,
-          parent: item
+          parent: item.split(" - ").pop()
         }
       ))));
     })
@@ -6624,6 +6703,7 @@ function ExplorerComponent(props) {
       defaultMembersFilter: props.defaultMembersFilter,
       formatters: props.formatters,
       idFormatters: props.idFormatters,
+      drilldownFormatters: props.drilldownFormatters,
       withPermalink: props.withPermalink,
       panels,
       pagination,

package/package.json

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