@datawheel/data-explorer 0.3.17 → 0.3.18

package/dist/main.d.mts

@@ -1,7 +1,5 @@
-import * as React from 'react';
-import React__default, { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { MRT_TableInstance, MRT_ColumnDef, MRT_PaginationState, MRT_TableOptions } from 'mantine-react-table';
-import * as _datawheel_use_translation from '@datawheel/use-translation';
 import { TranslationDict, TranslationContextProps } from '@datawheel/use-translation';
 import { CSSObject } from '@mantine/core';
 import { Translation as Translation$1 } from '@datawheel/vizbuilder/react';
@@ -466,7 +464,7 @@ type Formatter = (value: number | null, locale?: string) => string;
 interface PanelDescriptor {
     key: string;
     label: string;
-    component: React__default.ComponentType<ViewProps>;
+    component: React.ComponentType<ViewProps>;
 }
 interface ViewProps<TData extends Record<string, any> = Record<string, string | number>> {
     className?: string;
@@ -480,11 +478,11 @@ interface ViewProps<TData extends Record<string, any> = Record<string, string |
     data?: Record<string, string | number>[];
     columns?: MRT_ColumnDef<TData>[];
     pagination?: MRT_PaginationState;
-    setPagination?: React__default.Dispatch<React__default.SetStateAction<MRT_PaginationState>>;
+    setPagination?: React.Dispatch<React.SetStateAction<MRT_PaginationState>>;
 }
 
 /** */
-declare function DebugView(props: ViewProps): React__default.JSX.Element;
+declare function DebugView(props: ViewProps): React.JSX.Element;
 
 declare const explorerTranslation: {
     action_copy: string;
@@ -1038,15 +1036,15 @@ declare const defaultTranslation: {
         unselected_items: string;
     };
 };
-declare const useTranslation: () => _datawheel_use_translation.TranslationContextProps;
-declare const TranslationConsumer: React.FC<React.ConsumerProps<_datawheel_use_translation.TranslationContextProps>>;
+declare const useTranslation: any;
+declare const TranslationConsumer: any;
 
 interface ExplorerStepType extends StepType {
     actionBefore?: () => void;
 }
 type TourConfig = {
     extraSteps?: ExplorerStepType[];
-    introImage?: React__default.ReactNode;
+    introImage?: React.ReactNode;
     tourProps?: Partial<TourProps>;
 };
 interface TourStepsPropsType {
@@ -1063,7 +1061,7 @@ interface ToolbarConfigType {
     buttons: ToolBarButtonProps[];
     showLabels: Boolean;
 }
-declare function ToolbarButton({ icon, label, onClick }: ToolBarButtonProps): React__default.JSX.Element;
+declare function ToolbarButton({ icon, label, onClick }: ToolBarButtonProps): React.JSX.Element;
 
 type Pagination = {
     rowsLimits: number[];
@@ -1122,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"
@@ -1145,7 +1148,7 @@ declare function ExplorerComponent<Locale extends string>(props: {
      * the screen that is shown in the results panel when there is no query,
      * or a query has been dirtied.
      */
-    splash?: React__default.ComponentType<{
+    splash?: React.ComponentType<{
         translation: TranslationContextProps;
     }>;
     toolbarConfig?: Partial<ToolbarConfigType>;
@@ -1180,13 +1183,13 @@ declare function ExplorerComponent<Locale extends string>(props: {
      * @default false
      */
     withPermalink?: boolean;
-}): React__default.JSX.Element;
+}): React.JSX.Element;
 declare namespace ExplorerComponent {
     var displayName: string;
 }
 
 /** */
-declare function PivotView<TData extends Record<string, unknown>>(props: {} & ViewProps<TData> & MRT_TableOptions<TData>): React__default.JSX.Element;
+declare function PivotView<TData extends Record<string, unknown>>(props: {} & ViewProps<TData> & MRT_TableOptions<TData>): React.JSX.Element;
 
 type TData = Record<string, any> & Record<string, string | number>;
 type TableView = {
@@ -1194,7 +1197,7 @@ type TableView = {
     getColumn(id: string): AnyResultColumn | undefined;
     columns: AnyResultColumn[];
 } & ViewProps;
-declare function TableView({ table, result, isError, isLoading, data, pagination, setPagination }: TableView): React__default.JSX.Element;
+declare function TableView({ table, result, isError, isLoading, data, pagination, setPagination }: TableView): React.JSX.Element;
 declare namespace TableView {
     var displayName: string;
 }
@@ -1340,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;
@@ -1349,7 +1353,7 @@ interface SettingsContextProps {
 /**
  * A wrapper for the Consumer, for use with class components.
  */
-declare function SettingsConsumer(props: React__default.ConsumerProps<SettingsContextProps>): React__default.JSX.Element;
+declare function SettingsConsumer(props: React.ConsumerProps<SettingsContextProps>): React.JSX.Element;
 /**
  * The React hook associated to the settings context.
  */
@@ -1359,8 +1363,8 @@ declare function VizbuilderView(props: {
     cube: TesseractCube;
     params: QueryParams;
     result: QueryResult;
-}): false | React__default.JSX.Element;
+}): false | React.JSX.Element;
 
-declare function TourStep(props: TourStepsPropsType): React__default.JSX.Element;
+declare function TourStep(props: TourStepsPropsType): React.JSX.Element;
 
 export { DebugView, ExplorerComponent as Explorer, type ExplorerState, type ExplorerStepType, PivotView, SettingsConsumer, TableView, ToolbarButton, TourStep, TranslationConsumer, type Translation as TranslationDict, type ViewProps, VizbuilderView, reducer as explorerReducer, thunkExtraArg as explorerThunkExtraArg, defaultTranslation as translationDict, useSettings, useTranslation };

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 = {
@@ -4117,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.`,
@@ -4137,9 +4143,10 @@ function useTable({
         dataType: valueType,
         accessorFn: (item) => item[columnKey],
         Cell: isNumeric ? ({ cell }) => {
-          return /* @__PURE__ */ React19__default.createElement("span", { style: { display: "block", textAlign: "right" } }, formatter2(cell.getValue()));
+          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,
             {
@@ -4151,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)));
         }
       };
     });
@@ -5535,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
     };
@@ -6317,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.17",
+  "version": "0.3.18",
   "main": "./dist/main.mjs",
   "types": "./dist/main.d.mts",
   "files": [
@@ -70,4 +70,4 @@
     "vite": "^5.0.0",
     "wrangler": "^3.59.0"
   }
-}
+}