@datawheel/data-explorer 0.3.15 → 0.3.18

package/dist/main.d.mts

@@ -1120,6 +1120,11 @@ declare function ExplorerComponent<Locale extends string>(props: {
      * from `measure.annotations.units_of_measurement`, if present.
      */
     formatters?: Record<string, Formatter>;
+    /**
+     * Defines an index of formatter functions available for dimension IDs
+     * that are displayed next to the value.
+     * */
+    idFormatters?: Record<string, Formatter>;
     /**
      * Defines an alternative height for the component structure.
      * @default "100vh"
@@ -1338,6 +1343,7 @@ interface SettingsContextProps {
     actions: ExplorerBoundActionMap;
     defaultMembersFilter: "id" | "name" | "any";
     formatters: Record<string, Formatter>;
+    idFormatters: Record<string, Formatter>;
     previewLimit: number;
     panels: PanelDescriptor[];
     paginationConfig: Pagination;

package/dist/main.mjs

@@ -1797,6 +1797,7 @@ function SettingsProvider(props) {
         actions: props.actions,
         defaultMembersFilter: props.defaultMembersFilter || "id",
         formatters: props.formatters || {},
+        idFormatters: props.idFormatters || {},
         panels: props.panels,
         previewLimit: props.previewLimit || 50,
         paginationConfig: (_a = props.pagination) != null ? _a : { rowsLimits: [100, 300, 500, 1e3], defaultLimit: 100 },
@@ -2407,6 +2408,7 @@ function useFormatter() {
   const { formatters } = useSettings();
   const [formatMap, setFormatMap] = useState({});
   const formatterMap = useRef(formatters);
+  console.log(formatterMap, "formatMap");
   return useMemo(() => {
     return {
       currentFormats: formatMap,
@@ -2454,6 +2456,10 @@ function useFormatter() {
     }
   }, [formatMap]);
 }
+function useidFormatters() {
+  const { idFormatters } = useSettings();
+  return { idFormatters };
+}
 
 // src/components/CustomActionIcon.tsx
 init_esm_shims();
@@ -3228,26 +3234,26 @@ function Results(props) {
   }
   return /* @__PURE__ */ React19__default.createElement(Box, { px: "sm" }, result);
 }
-var useStyles2 = createStyles((theme) => ({
+var useStyles2 = createStyles((t) => ({
   link: {
-    ...theme.fn.focusStyles(),
+    ...t.fn.focusStyles(),
     WebkitTapHighlightColor: "transparent",
     outline: 0,
     display: "block",
     textDecoration: "none",
-    color: theme.colorScheme === "dark" ? theme.colors.dark[1] : theme.colors.gray[7],
-    padding: theme.spacing.xs,
+    color: t.colorScheme === "dark" ? t.white : t.colors.dark[6],
+    padding: t.spacing.xs,
     minHeight: rem(20),
-    fontSize: theme.fontSizes.sm,
+    fontSize: t.fontSizes.sm,
     whiteSpace: "wrap",
     cursor: "pointer",
     "&:hover": {
-      backgroundColor: theme.colorScheme === "dark" ? theme.fn.rgba(theme.colors[theme.primaryColor][9], 0.45) : theme.fn.rgba(theme.colors[theme.primaryColor][4], 0.45)
+      backgroundColor: t.colorScheme === "dark" ? t.colors[t.primaryColor][4] : t.colors[t.primaryColor][4]
     }
   },
   linkActive: {
-    backgroundColor: theme.colorScheme === "dark" ? theme.fn.rgba(theme.colors[theme.primaryColor][9], 0.45) : theme.colors[theme.primaryColor][4],
-    color: theme.white,
+    backgroundColor: t.colorScheme === "dark" ? t.colors[t.primaryColor][9] : t.colors[t.primaryColor][5],
+    color: t.colorScheme === "dark" ? t.colors.dark[6] : t.colors.dark[6],
     fontWeight: 500
   }
 }));
@@ -3429,9 +3435,9 @@ function RootAccordions({ items, graph, locale, selectedItem, onSelectCube }) {
           fontSize: t.fontSizes.md,
           "&[data-active]": {
             borderLeft: 6,
-            borderLeftColor: t.colors[t.primaryColor][t.fn.primaryShade()],
+            borderLeftColor: t.fn.primaryColor(),
             borderLeftStyle: "solid",
-            color: t.colors[t.primaryColor][t.fn.primaryShade()]
+            color: t.fn.primaryColor()
           }
         },
         content: {
@@ -3480,7 +3486,7 @@ function CubeButton({
       component: "a",
       className: isSelected(selectedItem, getCube(graph.items, item, subtopic, locale)) ? `${classes.link} ${classes.linkActive}` : classes.link,
       sx: (t) => ({
-        background: isSelected(selectedItem, getCube(graph.items, item, subtopic, locale)) ? t.fn.primaryColor() : t.colorScheme === "dark" ? t.colors.dark[6] : t.colors.gray[3],
+        backgroundColor: isSelected(selectedItem, getCube(graph.items, item, subtopic, locale)) ? t.fn.primaryColor() : t.colorScheme === "dark" ? t.colors.dark[6] : t.colors.gray[3],
         overflow: "hidden"
       }),
       onClick: () => onSelectCube(item, subtopic)
@@ -3500,6 +3506,7 @@ function SubtopicAccordion({
   return /* @__PURE__ */ React19__default.createElement(
     Accordion,
     {
+      id: "data-accordion-topic",
       value,
       onChange: setValue,
       key: `subtopic-${parent}`,
@@ -3522,7 +3529,7 @@ function SubtopicAccordion({
         }
       })
     },
-    [...items].map((item, index) => {
+    [...items].sort((a, b) => a.localeCompare(b, locale, { sensitivity: "base" })).map((item, index) => {
       const filtered = [...graph.adjList[item]].filter((value2) => value2 !== parent);
       return /* @__PURE__ */ React19__default.createElement(Accordion.Item, { value: `subtopic-${item}`, key: `subtopic-${item}-${index}` }, /* @__PURE__ */ React19__default.createElement(AccordionControl, null, item), /* @__PURE__ */ React19__default.createElement(Accordion.Panel, null, filtered.map((table, index2) => /* @__PURE__ */ React19__default.createElement(
         CubeButton,
@@ -3659,7 +3666,6 @@ var ApiAndCsvButtons = (props) => {
     Button,
     {
       id: "dex-api-btn",
-      variant: "subtle",
       leftIcon: /* @__PURE__ */ React19__default.createElement(IconCopy, { size: 20 }),
       sx: { height: 30 },
       onClick: copyHandler
@@ -3677,7 +3683,6 @@ var DownloadQuery = ({ data }) => {
     /* @__PURE__ */ React19__default.createElement(
       ButtonDownload,
       {
-        variant: "light",
         leftIcon: /* @__PURE__ */ React19__default.createElement(IconDownload, { size: 20 }),
         sx: { height: 30 },
         key: "download_csv",
@@ -4053,6 +4058,7 @@ function useTable({
   }, [pagination]);
   const { translate: t } = useTranslation();
   const { getFormat, getFormatter } = useFormatter();
+  const { idFormatters } = useidFormatters();
   const { sortKey, sortDir } = useSelector$1(selectSortingParams);
   const columns = useMemo(() => {
     const indexColumn = {
@@ -4076,7 +4082,10 @@ function useTable({
         isId
       } = column;
       const isNumeric = valueType === "number" && columnKey !== "Year";
-      const formatterKey = getFormat(columnKey, isNumeric ? "Decimal" : "identity");
+      const formatterKey = getFormat(
+        "aggregator" in entity ? entity : columnKey,
+        isNumeric ? "Decimal" : "identity"
+      );
       const formatter2 = getFormatter(formatterKey);
       const mantineFilterVariantObject = getMantineFilterMultiSelectProps(isId, isNumeric, range);
       return {
@@ -4114,7 +4123,7 @@ function useTable({
               }
             },
             getSortIcon(isSorted ? sortDir : false, entityType)
-          ))), /* @__PURE__ */ React19__default.createElement(
+          ))), showTrashIcon(finalKeys, entityType) && /* @__PURE__ */ React19__default.createElement(
             CustomActionIcon_default,
             {
               label: `At least one ${getEntityText(entityType)} is required.`,
@@ -4133,8 +4142,11 @@ function useTable({
         id: entity.name,
         dataType: valueType,
         accessorFn: (item) => item[columnKey],
-        Cell: isNumeric ? ({ cell }) => formatter2(cell.getValue()) : ({ cell, renderedCellValue, row }) => {
+        Cell: isNumeric ? ({ cell }) => {
+          return /* @__PURE__ */ React19__default.createElement("span", { style: { display: "block", textAlign: "right" } }, formatter2(cell.getValue(), locale));
+        } : ({ cell, renderedCellValue, row }) => {
           const cellId = row.original[`${cell.column.id} ID`];
+          const idFormatter = idFormatters[`${cell.column.id} ID`];
           return /* @__PURE__ */ React19__default.createElement(Flex, { justify: "space-between", sx: { width: "100%", maxWidth: 400 }, gap: "sm" }, /* @__PURE__ */ React19__default.createElement(
             Text,
             {
@@ -4146,7 +4158,7 @@ function useTable({
               }
             },
             renderedCellValue
-          ), /* @__PURE__ */ React19__default.createElement(Box, null, cellId && /* @__PURE__ */ React19__default.createElement(Text, { color: "dimmed" }, cellId)));
+          ), /* @__PURE__ */ React19__default.createElement(Box, null, cellId && /* @__PURE__ */ React19__default.createElement(Text, { color: "dimmed" }, idFormatter ? idFormatter(cellId) : cellId)));
         }
       };
     });
@@ -5530,14 +5542,15 @@ function useFormatParams(measures, valueProperty) {
   const { translate: t } = useTranslation();
   const fmt = useFormatter();
   return useMemo(() => {
-    const formatterKey = fmt.getFormat(valueProperty);
+    const measure = measures.find((item) => item.name === valueProperty);
+    const formatterKey = fmt.getFormat(measure || valueProperty);
     const formatter2 = fmt.getFormatter(formatterKey);
     return {
       formatExample: formatter2(12345.6789),
       formatter: formatter2,
       formatterKey,
       formatterKeyOptions: [{ label: t("placeholders.none"), value: "undefined" }].concat(
-        fmt.getAvailableFormats(valueProperty).map((key) => ({ label: fmt.getFormatter(key)(12345.6789), value: key }))
+        fmt.getAvailableFormats(measure || valueProperty).map((key) => ({ label: fmt.getFormatter(key)(12345.6789), value: key }))
       ),
       setFormat: fmt.setFormat
     };
@@ -6312,6 +6325,7 @@ function ExplorerComponent(props) {
       actions: boundActions,
       defaultMembersFilter: props.defaultMembersFilter,
       formatters: props.formatters,
+      idFormatters: props.idFormatters,
       withPermalink: props.withPermalink,
       panels,
       pagination,

package/package.json

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