@datawheel/data-explorer 1.4.0 → 1.4.1

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,
@@ -6624,6 +6638,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.1",
   "main": "./dist/main.mjs",
   "types": "./dist/main.d.mts",
   "files": [