@datawheel/data-explorer 0.3.7 → 0.3.8

package/dist/main.d.mts

@@ -371,6 +371,7 @@ interface QueryItem {
     key: string;
     label: string;
     panel: string | null;
+    chart: string | null;
     params: QueryParams;
     result: QueryResult;
 }
@@ -732,6 +733,8 @@ declare const defaultTranslation: {
     };
     vizbuilder: {
         action_close: string;
+        action_share: string;
+        share_copied: string;
         action_enlarge: string;
         action_fileissue: string;
         action_retry: string;
@@ -1024,6 +1027,7 @@ declare const actions: {
     selectQuery: _reduxjs_toolkit.ActionCreatorWithPayload<string, "explorerQueries/selectQuery">;
     updateQuery: _reduxjs_toolkit.ActionCreatorWithPayload<QueryItem, "explorerQueries/updateQuery">;
     switchPanel: _reduxjs_toolkit.ActionCreatorWithPayload<string | null, "explorerQueries/switchPanel">;
+    updateChart: _reduxjs_toolkit.ActionCreatorWithPayload<string | null, "explorerQueries/updateChart">;
     removeCut: _reduxjs_toolkit.ActionCreatorWithPayload<string, "explorerQueries/removeCut">;
     removeDrilldown: _reduxjs_toolkit.ActionCreatorWithPayload<string, "explorerQueries/removeDrilldown">;
     removeMeasure: _reduxjs_toolkit.ActionCreatorWithPayload<string, "explorerQueries/removeMeasure">;

package/dist/main.mjs

@@ -1,6 +1,6 @@
 import { keyframes, createStyles, Select, rem, Input, Box, Text, Stack, Group, Button, SimpleGrid, Flex, ScrollArea, LoadingOverlay, Table, MultiSelect, Center, NumberInput, Menu, ActionIcon, UnstyledButton, Alert, Loader, Container, Title, useMantineTheme, MantineProvider, Modal, useComponentDefaultProps, Anchor, Paper, CloseButton, Tooltip, Tabs, Switch, ThemeIcon, packSx, Affix, Accordion, Drawer, Divider, Checkbox, Popover } from '@mantine/core';
 import { useClipboard, useDebouncedState, useClickOutside, useFullscreen, useMediaQuery, useDisclosure } from '@mantine/hooks';
-import { IconWorld, IconExternalLink, IconClipboard, IconSettings, IconMathGreater, IconMathLower, IconArrowsLeftRight, IconAlertCircle, IconAlertTriangle, IconCopy, IconDownload, IconDotsVertical, IconArrowRight, IconArrowLeft, IconBrandGithub, IconChevronLeft, IconChevronRight, IconSearch, IconLanguage, IconTrash, IconInfoCircleFilled, IconArrowsMinimize, IconArrowsMaximize, IconCircleOff, IconArrowsSort, IconSortDescendingNumbers, IconSortDescendingLetters, IconSortAscendingNumbers, IconSortAscendingLetters, IconPlus, IconStack3, IconFilterOff, IconFilter, IconAdjustments, IconBox, IconClock, IconHelpCircle, IconPhotoDown, IconVectorTriangle } from '@tabler/icons-react';
+import { IconWorld, IconExternalLink, IconClipboard, IconSettings, IconMathGreater, IconMathLower, IconArrowsLeftRight, IconAlertCircle, IconAlertTriangle, IconCopy, IconDownload, IconDotsVertical, IconArrowRight, IconArrowLeft, IconBrandGithub, IconCheck, IconShare, IconChevronLeft, IconChevronRight, IconSearch, IconLanguage, IconTrash, IconInfoCircleFilled, IconArrowsMinimize, IconArrowsMaximize, IconCircleOff, IconArrowsSort, IconSortDescendingNumbers, IconSortDescendingLetters, IconSortAscendingNumbers, IconSortAscendingLetters, IconPlus, IconStack3, IconFilterOff, IconFilter, IconAdjustments, IconBox, IconClock, IconHelpCircle, IconPhotoDown, IconVectorTriangle } from '@tabler/icons-react';
 import * as React19 from 'react';
 import React19__default, { createContext, forwardRef, useMemo, useCallback, useContext, useRef, useEffect, useState, Suspense, Component, useLayoutEffect } from 'react';
 import { translationFactory } from '@datawheel/use-translation';
@@ -443,6 +443,8 @@ var defaultTranslation = {
   },
   vizbuilder: {
     action_close: "Close",
+    action_share: "Share",
+    share_copied: "Copied",
     action_enlarge: "Enlarge",
     action_fileissue: "Report an issue",
     action_retry: "Retry",
@@ -639,6 +641,7 @@ function buildQuery(props) {
     label: props.label || "",
     isDirty: true,
     panel: props.panel || null,
+    chart: props.chart || null,
     params: buildQueryParams(props.params || {}),
     result: {
       data: [],
@@ -1236,6 +1239,10 @@ var queriesSlice = createSlice({
       const current = state.itemMap[state.current];
       current.panel = action.payload;
     },
+    updateChart(state, action) {
+      const current = state.itemMap[state.current];
+      current.chart = action.payload;
+    },
     /**
      * Remove a single CutItem from the current QueryItem.
      */
@@ -1699,13 +1706,18 @@ function serializePermalink(item) {
     Object.entries(request).filter((entry) => entry[1] != null && entry[1] !== "")
   );
   search.set("panel", item.panel || "table");
+  if (item.chart !== "" && item.chart) {
+    search.set("chart", item.chart);
+  }
   return search.toString();
 }
 function parsePermalink(cube, value) {
   const search = new URLSearchParams(value);
   const params = requestToQueryParams(cube, search);
+  console.log(search.get("chart"));
   return buildQuery({
     panel: search.get("panel") || "table",
+    chart: search.get("chart") || "",
     params
   });
 }
@@ -1732,7 +1744,8 @@ function usePermalink(isEnabled, options) {
     if (currPermalink !== nextPermalink) {
       const nextLocation = `${window.location.pathname}?${nextPermalink}`;
       const oldPanel = new URLSearchParams(window.location.search).get("panel");
-      if (oldPanel && oldPanel[1] !== panel) {
+      const oldChart = new URLSearchParams(window.location.search).get("chart");
+      if (oldPanel && oldPanel[1] !== panel || oldChart && oldChart[1] !== queryItem.chart) {
         window.history.replaceState(queryItem, "", nextLocation);
       } else {
         window.history.pushState(queryItem, "", nextLocation);
@@ -1761,6 +1774,7 @@ function useUpdatePermaLink({
 }
 function useKey(params = {}) {
   const queryItem = useSelector(selectCurrentQueryItem);
+  console.log(queryItem);
   if (isValidQuery(queryItem.params)) {
     return serializePermalink({ ...queryItem, params: { ...queryItem.params, ...params } });
   }
@@ -2007,6 +2021,7 @@ function willParseQueryUrl(url) {
       const params = requestToQueryParams(cubeMap[cube], search);
       const queryItem = buildQuery({
         panel: search.get("panel") || "table",
+        chart: search.get("chart") || "",
         // params: {...params, drilldowns: keyBy(dds, "key")}
         params
       });
@@ -2659,6 +2674,13 @@ var Graph = class {
     this.nodes = /* @__PURE__ */ new Set([]);
     this.adjList = {};
     this.items = [];
+    this.topicOrder = {};
+  }
+  addTopicOrder(topic, order) {
+    this.topicOrder[topic] = Number(order);
+  }
+  getTopicOrder(topic) {
+    return this.topicOrder[topic] || 0;
   }
   addNode(node) {
     this.nodes.add(node);
@@ -2920,6 +2942,7 @@ function useBuildGraph(locale) {
     const filteredItems = items.map((item) => {
       const { name: name4 } = item;
       const topic = getAnnotation(item, "topic", locale);
+      const topic_order = getAnnotation(item, "topic_order", locale);
       const subtopic = getAnnotation(item, "subtopic", locale);
       getAnnotation(item, "table", locale);
       const hide = getAnnotation(item, "hide_in_ui", locale);
@@ -2929,6 +2952,9 @@ function useBuildGraph(locale) {
         graph2.addNode(name4);
         graph2.addEdge(topic, subtopic);
         graph2.addEdge(subtopic, name4);
+        if (topic_order) {
+          graph2.addTopicOrder(topic, topic_order);
+        }
         return item;
       }
       return null;
@@ -3401,7 +3427,7 @@ function RootAccordions({ items, graph, locale, selectedItem, onSelectCube }) {
         }
       })
     },
-    items.map((item) => {
+    items.sort((a, b) => graph.topicOrder[a] - graph.topicOrder[b]).map((item) => {
       return /* @__PURE__ */ React19__default.createElement(Accordion.Item, { value: `topic-${item}`, key: `topic-${item}` }, /* @__PURE__ */ React19__default.createElement(AccordionControl, null, item), /* @__PURE__ */ React19__default.createElement(Accordion.Panel, null, /* @__PURE__ */ React19__default.createElement(
         SubtopicAccordion,
         {
@@ -8168,7 +8194,6 @@ function _buildTitle(t, chart) {
   const [mainSeries, otherSeries] = series;
   const { measure } = values;
   const timeline = chart.timeline || chart.time;
-  console.log({ chart });
   const seriesStr = (series2) => {
     if (!series2) return "";
     const { members } = series2.captions[series2.level.name];
@@ -8290,8 +8315,6 @@ function IssueButton(props) {
     t("vizbuilder.action_fileissue")
   );
 }
-
-// src/vizbuilder/components/ChartCard.tsx
 var iconByFormat = {
   jpg: IconPhotoDown,
   png: IconPhotoDown,
@@ -8307,6 +8330,8 @@ function ChartCard(props) {
     getMeasureConfig: props.measureConfig,
     t: translate
   });
+  const clipboard = useClipboard();
+  const [isShared, setIsShared] = useState(false);
   const downloadButtons = useMemo(() => {
     const filename = (typeof config.title === "function" ? config.title() : config.title || "").replace(/[^\w]/g, "_").replace(/[_]+/g, "_");
     return asArray(downloadFormats).map((format2) => {
@@ -8350,9 +8375,27 @@ function ChartCard(props) {
       isFullMode ? translate("vizbuilder.action_close") : translate("vizbuilder.action_enlarge")
     );
   }, [isFullMode, translate, onFocus]);
+  const shareButton = useMemo(() => {
+    return /* @__PURE__ */ React19__default.createElement(
+      Button,
+      {
+        compact: true,
+        leftIcon: isShared ? /* @__PURE__ */ React19__default.createElement(IconCheck, { size: 16 }) : /* @__PURE__ */ React19__default.createElement(IconShare, { size: 16 }),
+        onClick: () => {
+          clipboard.copy(window.location.href);
+          setIsShared(true);
+          setTimeout(() => setIsShared(false), 1500);
+        },
+        size: "sm",
+        variant: isShared ? "filled" : "light",
+        color: isShared ? "green" : "blue"
+      },
+      isShared ? translate("vizbuilder.share_copied") : translate("vizbuilder.action_share")
+    );
+  }, [clipboard, translate, isShared]);
   const height = isFullMode ? "calc(100vh - 3rem)" : 300;
   if (!ChartComponent) return null;
-  return /* @__PURE__ */ React19__default.createElement(Paper, { h: height, w: "100%", style: { overflow: "hidden" } }, /* @__PURE__ */ React19__default.createElement(ErrorBoundary, null, /* @__PURE__ */ React19__default.createElement(Stack, { spacing: 0, h: height, style: { position: "relative" }, w: "100%" }, /* @__PURE__ */ React19__default.createElement(Group, { position: "right", p: "xs", spacing: "xs", align: "center" }, downloadButtons, onFocus && focusButton), /* @__PURE__ */ React19__default.createElement(Box, { style: { flex: "1 1 auto" }, ref: nodeRef, pb: "xs", px: "xs" }, /* @__PURE__ */ React19__default.createElement(ChartComponent, { config })))));
+  return /* @__PURE__ */ React19__default.createElement(Paper, { h: height, w: "100%", style: { overflow: "hidden" } }, /* @__PURE__ */ React19__default.createElement(ErrorBoundary, null, /* @__PURE__ */ React19__default.createElement(Stack, { spacing: 0, h: height, style: { position: "relative" }, w: "100%" }, /* @__PURE__ */ React19__default.createElement(Group, { position: "right", p: "xs", spacing: "xs", align: "center" }, isFullMode && shareButton, downloadButtons, onFocus && focusButton), /* @__PURE__ */ React19__default.createElement(Box, { style: { flex: "1 1 auto" }, ref: nodeRef, pb: "xs", px: "xs" }, /* @__PURE__ */ React19__default.createElement(ChartComponent, { config })))));
 }
 var getBackground = (node) => {
   if (node.nodeType !== Node.ELEMENT_NODE) return "white";
@@ -8374,8 +8417,6 @@ function NonIdealState2(props) {
   }, [status, t]);
   return /* @__PURE__ */ React19__default.createElement(Center, { h: "100%" }, description);
 }
-
-// src/vizbuilder/components/Vizbuilder.tsx
 function Vizbuilder(props) {
   const {
     datasets,
@@ -8389,7 +8430,12 @@ function Vizbuilder(props) {
     topojsonConfig,
     userConfig
   } = props;
-  const [currentChart, setCurrentChart] = useState("");
+  const queryItem = useSelector$1(selectCurrentQueryItem);
+  const currentChart = (queryItem == null ? void 0 : queryItem.chart) || "";
+  const { actions: actions2 } = useSettings();
+  const setCurrentChart = useCallback((chart) => {
+    actions2.updateChart(chart);
+  }, [actions2]);
   const getMeasureConfig = useMemo(() => {
     const config = measureConfig || {};
     return typeof config === "function" ? config : (item) => config[item.name];
@@ -8407,7 +8453,6 @@ function Vizbuilder(props) {
     });
     return Object.fromEntries(charts2.map((chart) => [chart.key, chart]));
   }, [chartLimits, chartTypes, datacap, datasets, getTopojsonConfig]);
-  console.log("charts", charts);
   const content = useMemo(() => {
     const Notice = nonIdealState || NonIdealState2;
     const isLoading = asArray(datasets).some(

package/package.json

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