@splunk/visualizations 27.2.1 → 27.3.0

package/Timeline.js

@@ -839,7 +839,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "27.2.1 - 41b7410be",
+        "data-splunk-visualization-version": "27.3.0 - bd2e687fd",
         width,
         height,
         backgroundColor
@@ -905,7 +905,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "27.2.1 - 41b7410be"
+  "data-splunk-visualization-version": "27.3.0 - bd2e687fd"
 })`
     position: relative;
     width: 100%;
@@ -1569,11 +1569,9 @@ var withDashboardViz = (opts) => {
       useAsyncEvaluatedOptions
     ]);
     const evaluatedOptionsToUse = !useAsyncEvaluatedOptions ? evaluatedOptions : evaluatedOptionsAsync;
-    let clonedEvaluatedOptions = evaluatedOptionsToUse;
+    const clonedEvaluatedOptions = __spreadValues({}, evaluatedOptionsToUse);
     if (isTrellisOn) {
-      clonedEvaluatedOptions = __spreadProps(__spreadValues({}, evaluatedOptionsToUse), {
-        backgroundColor: clonedEvaluatedOptions == null ? void 0 : clonedEvaluatedOptions.trellisBackgroundColor
-      });
+      clonedEvaluatedOptions.backgroundColor = clonedEvaluatedOptions == null ? void 0 : clonedEvaluatedOptions.trellisBackgroundColor;
     }
     react_exports.useEffect(() => {
       onComputedProps(clonedEvaluatedOptions);
@@ -1632,7 +1630,8 @@ var withDashboardViz = (opts) => {
     }));
     let dataSourceMetadata = {};
     const OptionKey = "paginateDataSourceKey";
-    const paginateDataSourceKey = (0, lodash_exports.has)(evaluatedOptionsToUse, OptionKey) && evaluatedOptionsToUse[OptionKey] || "primary";
+    const optsKey = (0, lodash_exports.has)(evaluatedOptionsToUse, OptionKey) && evaluatedOptionsToUse[OptionKey];
+    const paginateDataSourceKey = typeof optsKey === "string" ? optsKey : "primary";
     if (vizConfig.supports.indexOf("page-and-sort" /* PAGE_AND_SORT */) > -1 && (0, lodash_exports.has)(dataSources, paginateDataSourceKey)) {
       const requestParams = (0, lodash_exports.get)(dataSources, [paginateDataSourceKey, "requestParams"], {});
       const meta = (0, lodash_exports.get)(dataSources, [paginateDataSourceKey, "meta"], {});
@@ -1676,14 +1675,26 @@ var withDashboardViz = (opts) => {
 };
 var withDashboardViz_default = withDashboardViz;
 
+// esm-externals:@splunk/splunk-utils/config
+var config_exports = {};
+__export(config_exports, {
+  default: () => config_default2
+});
+var defaultImport30 = __toESM(require("@splunk/splunk-utils/config"));
+__reExport(config_exports, require("@splunk/splunk-utils/config"));
+var config_default2 = "default" in defaultImport30 ? defaultImport30.default : defaultImport30;
+
 // esm-externals:@splunk/themes
 var themes_exports = {};
 __export(themes_exports, {
   default: () => themes_default
 });
-var defaultImport30 = __toESM(require("@splunk/themes"));
+var defaultImport31 = __toESM(require("@splunk/themes"));
 __reExport(themes_exports, require("@splunk/themes"));
-var themes_default = "default" in defaultImport30 ? defaultImport30.default : defaultImport30;
+var themes_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
+
+// src/common/utils/styleUtils.ts
+var VIZ_FONT_FAMILY = "'Splunk Platform Sans', 'Splunk Data Sans', Roboto, Droid, 'Helvetica Neue', Helvetica, Arial, sans-serif";
 
 // src/Timeline/PureTimeline/src/utils/timelineUtils.ts
 function hexToRgba(hex, opacity = 1) {
@@ -1813,7 +1824,7 @@ var drawRoundedRect = (ctx, x, y, width, height, radius) => {
   ctx.fill();
   ctx.stroke();
 };
-var truncateText = (text, maxWidth, truncationType, font = '10px "Splunk Data Sans"') => {
+var truncateText = (text, maxWidth, truncationType, font = `10px ${VIZ_FONT_FAMILY}`) => {
   const canvas = document.createElement("canvas");
   const context = canvas.getContext("2d");
   if (!context) return text;
@@ -1919,9 +1930,9 @@ var uplot_react_exports = {};
 __export(uplot_react_exports, {
   default: () => uplot_react_default
 });
-var defaultImport31 = __toESM(require("uplot-react"));
+var defaultImport32 = __toESM(require("uplot-react"));
 __reExport(uplot_react_exports, require("uplot-react"));
-var uplot_react_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
+var uplot_react_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
 
 // src/Timeline/PureTimeline/src/CursorPlugin.tsx
 var currentScaleFactor = 1;
@@ -1980,7 +1991,8 @@ var CursorPlugin = ({
   setHighlightedEvent,
   setHighlightedLane,
   handleEventClick,
-  tooltipRef
+  tooltipRef,
+  locale
 }) => {
   const FIXED_LANE_HEIGHT = 32;
   const MIN_BAR_WIDTH = 20;
@@ -2085,11 +2097,11 @@ var CursorPlugin = ({
             if (showTooltip) {
               const displaySeconds = durationPerTick < 6e4 && event.duration !== 0;
               const startTime = new Date(event.start).toLocaleTimeString(
-                [],
+                locale,
                 tooltipLocaleTimeFormat(displaySeconds)
               );
               const endTime = new Date(event.end).toLocaleTimeString(
-                [],
+                locale,
                 tooltipLocaleTimeFormat(displaySeconds)
               );
               const lane = lanes[cursorSeriesIndex - 1];
@@ -2241,11 +2253,29 @@ var XAxisPlugin = ({
   durationPerTick = 0,
   numTicks = 0,
   backgroundColor = "#0b0c0e",
-  tickInterval = "1d"
+  tickInterval = "1d",
+  isFontLoaded = false,
+  locale = "en-US",
+  setIsFontLoaded
 } = {}) => {
   const themes3 = (0, themes_exports.useSplunkTheme)();
+  const redrawFont = () => {
+    if (!isFontLoaded) {
+      setIsFontLoaded(true);
+    }
+  };
   return {
     hooks: {
+      init: () => {
+        if (isSafari()) {
+          document.fonts.ready.then(redrawFont);
+        } else {
+          document.fonts.addEventListener("loadingdone", redrawFont);
+        }
+        return () => {
+          if (!isSafari()) document.fonts.removeEventListener("loadingdone", redrawFont);
+        };
+      },
       drawClear: (u) => {
         const { ctx } = u;
         const dpr = window.devicePixelRatio || 1;
@@ -2270,17 +2300,17 @@ var XAxisPlugin = ({
         const labels = ticks.map((tick, index) => {
           const labelParts = [];
           const date = new Date(tick);
-          const time = tickInterval === "1s" ? date.toLocaleTimeString([], {
+          const time = tickInterval === "1s" ? date.toLocaleTimeString(locale, {
             hour: "numeric",
             minute: "2-digit",
             second: "2-digit"
-          }) : date.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
-          const day = date.toLocaleDateString([], {
+          }) : date.toLocaleTimeString(locale, { hour: "numeric", minute: "2-digit" });
+          const day = date.toLocaleDateString(locale, {
             weekday: "short",
             month: "short",
             day: "numeric"
           });
-          const month = date.toLocaleDateString([], {
+          const month = date.toLocaleDateString(locale, {
             month: "long"
           });
           const year = date.getFullYear().toString();
@@ -2302,7 +2332,7 @@ var XAxisPlugin = ({
         });
         ctx.save();
         ctx.scale(dpr, dpr);
-        ctx.font = "10px sans-serif";
+        ctx.font = `10px ${VIZ_FONT_FAMILY}`;
         ctx.fillStyle = themes3.contentColorMuted;
         ctx.textAlign = "left";
         ctx.textBaseline = "top";
@@ -2371,6 +2401,10 @@ var YAxisLane = styled_components_default.div`
     background-color: ${({ isEven, backgroundColor }) => isEven ? hexToRgba(backgroundColor) : getAlternateColor(backgroundColor, 0.1)};
     box-sizing: border-box;
     color: ${({ color }) => `${color}`};
+    cursor: ${({ clickable }) => clickable ? "default" : "inherit"};
+    &:hover {
+        cursor: ${({ clickable }) => clickable ? "pointer" : "inherit"};
+    }
 `;
 var TimelineYAxis = ({
   height,
@@ -2398,7 +2432,7 @@ var TimelineYAxis = ({
       lane.toString(),
       yAxisLabelWidth - lanePadding,
       "ellipsisMiddle",
-      '14px  "Splunk Data Sans"'
+      `14px ${VIZ_FONT_FAMILY}`
     );
     return /* @__PURE__ */ react_exports.createElement(
       YAxisLane,
@@ -2409,8 +2443,9 @@ var TimelineYAxis = ({
         color: laneTextColor,
         isEven: (lanes.length - index - 1) % 2 === 0,
         backgroundColor,
+        clickable: !!handleLaneClick,
         onClick: () => {
-          handleLaneClick(lane);
+          handleLaneClick == null ? void 0 : handleLaneClick(lane);
         }
       },
       truncatedText
@@ -2555,9 +2590,9 @@ var useSplunkTheme_exports = {};
 __export(useSplunkTheme_exports, {
   default: () => useSplunkTheme_default
 });
-var defaultImport32 = __toESM(require("@splunk/themes/useSplunkTheme"));
+var defaultImport33 = __toESM(require("@splunk/themes/useSplunkTheme"));
 __reExport(useSplunkTheme_exports, require("@splunk/themes/useSplunkTheme"));
-var useSplunkTheme_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
+var useSplunkTheme_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
 
 // src/Timeline/PureTimeline/src/TimelineTooltip.tsx
 var TooltipContainer = styled_components_default.div`
@@ -2656,9 +2691,9 @@ var uPlot_min_exports = {};
 __export(uPlot_min_exports, {
   default: () => uPlot_min_default
 });
-var defaultImport33 = __toESM(require("uplot/dist/uPlot.min.css"));
+var defaultImport34 = __toESM(require("uplot/dist/uPlot.min.css"));
 __reExport(uPlot_min_exports, require("uplot/dist/uPlot.min.css"));
-var uPlot_min_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
+var uPlot_min_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
 
 // src/Timeline/PureTimeline/src/TimelineUplot.tsx
 var TimelineUplotContainer = styled_components_default.div`
@@ -2692,11 +2727,13 @@ var TimelineUplot = ({
   tickInterval,
   handleEventClick,
   handleLaneClick,
-  handleLegendClick
+  handleLegendClick,
+  locale
 }) => {
   const [highlightedCategory, setHighlightedCategory] = react_exports.useState(null);
   const [highlightedEvent, setHighlightedEvent] = react_exports.useState(null);
   const [highlightedLane, setHighlightedLane] = react_exports.useState(null);
+  const [isFontLoaded, setIsFontLoaded] = react_exports.useState(false);
   const tooltipRef = react_exports.useRef({
     visible: false,
     x: 0,
@@ -2754,7 +2791,15 @@ var TimelineUplot = ({
         highlightedCategory,
         highlightedEvent
       }),
-      XAxisPlugin_default({ durationPerTick, numTicks, backgroundColor, tickInterval }),
+      XAxisPlugin_default({
+        durationPerTick,
+        numTicks,
+        backgroundColor,
+        tickInterval,
+        isFontLoaded,
+        setIsFontLoaded,
+        locale
+      }),
       CursorPlugin_default({
         laneSeries,
         lanes,
@@ -2764,7 +2809,8 @@ var TimelineUplot = ({
         setHighlightedEvent,
         setHighlightedLane,
         handleEventClick,
-        tooltipRef
+        tooltipRef,
+        locale
       })
     ]
   };
@@ -2827,7 +2873,8 @@ var PureTimeline = (_a) => {
     legendTruncation,
     onEventClick,
     onLaneClick,
-    onLegendClick
+    onLegendClick,
+    locale
   } = props;
   const showLegend = (!dataColors || (dataColors == null ? void 0 : dataColors.length) === 0) && (category == null ? void 0 : category.length) > 0 && (legendDisplay === "right" || legendDisplay === "bottom");
   const timezone = react_exports.useContext(TimezoneContext_default);
@@ -2900,7 +2947,8 @@ var PureTimeline = (_a) => {
         tickInterval,
         handleEventClick,
         handleLaneClick,
-        handleLegendClick
+        handleLegendClick,
+        locale
       }
     )
   );
@@ -2925,6 +2973,7 @@ PureTimeline.propTypes = {
   resultLimit: prop_types_exports.number,
   legendDisplay: prop_types_exports.oneOf(["right", "bottom", "off"]),
   legendTruncation: prop_types_exports.oneOf(["ellipsisEnd", "ellipsisMiddle", "ellipsisStart", "ellipsisOff"]),
+  locale: prop_types_exports.string,
   onEventClick: prop_types_exports.func,
   onLegendClick: prop_types_exports.func,
   onLaneClick: prop_types_exports.func,
@@ -2967,6 +3016,7 @@ PureTimeline.defaultProps = {
   resultLimit: 1e4,
   legendDisplay: "off",
   legendTruncation: "ellipsisEnd",
+  locale: config_exports.locale || navigator.language || "en-US",
   onEventClick: lodash_exports.noop,
   onLaneClick: lodash_exports.noop,
   onLegendClick: lodash_exports.noop,