@dynatrace/strato-components 3.10.4 → 3.11.0

package/charts/core/components/tooltip/InteractiveChartTooltip/components/InteractiveChartTooltip.sty.js

@@ -27,9 +27,9 @@ __export(InteractiveChartTooltip_css_exports, {
 module.exports = __toCommonJS(InteractiveChartTooltip_css_exports);
 var import_textStyle_css_ts_vanilla = require("../../../../../../styles/textStyle.css");
 var import_InteractiveChartTooltip_css_ts_vanilla = require("./InteractiveChartTooltip.css");
-var formattedTimeframe = "_1fjte612-3-10-4";
-var scrollableContainerParent = "_1fjte614-3-10-4";
-var titleContainer = "_1fjte611-3-10-4";
-var tooltipHeader = "_1fjte610-3-10-4 _da9a8v0-3-10-4 _da9a8v2-3-10-4 _da9a8v6-3-10-4 _da9a8ve-3-10-4";
-var tooltipItem = "_1fjte615-3-10-4";
-var tooltipItemsContainer = "_1fjte613-3-10-4";
+var formattedTimeframe = "_1fjte612-3-11-0";
+var scrollableContainerParent = "_1fjte614-3-11-0";
+var titleContainer = "_1fjte611-3-11-0";
+var tooltipHeader = "_1fjte610-3-11-0 _da9a8v0-3-11-0 _da9a8v2-3-11-0 _da9a8v6-3-11-0 _da9a8ve-3-11-0";
+var tooltipItem = "_1fjte615-3-11-0";
+var tooltipItemsContainer = "_1fjte613-3-11-0";

package/charts/core/components/tooltip/InteractiveChartTooltip/headers/HeaderTooltip.css

@@ -1,4 +1,4 @@
-._rbdnmj0-3-10-4 {
+._rbdnmj0-3-11-0 {
   padding-top: var(--dt-spacings-size-0, 0);
   padding-bottom: var(--dt-spacings-size-0, 0);
   padding-left: var(--dt-spacings-size-4, 4px);

package/charts/core/components/tooltip/InteractiveChartTooltip/headers/HeaderTooltip.sty.js

@@ -21,4 +21,4 @@ __export(HeaderTooltip_css_exports, {
 });
 module.exports = __toCommonJS(HeaderTooltip_css_exports);
 var import_HeaderTooltip_css_ts_vanilla = require("./HeaderTooltip.css");
-var resolutionStyle = "_rbdnmj0-3-10-4";
+var resolutionStyle = "_rbdnmj0-3-11-0";

package/charts/core/components/tooltip/section-components/TooltipFooter/TooltipFooter.css

@@ -1,4 +1,4 @@
-._dsuaez0-3-10-4 {
+._dsuaez0-3-11-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   font-size: var(--dt-typography-text-small-default-size, 12px);
   text-align: right;

package/charts/core/components/tooltip/section-components/TooltipFooter/TooltipFooter.sty.js

@@ -21,4 +21,4 @@ __export(TooltipFooter_css_exports, {
 });
 module.exports = __toCommonJS(TooltipFooter_css_exports);
 var import_TooltipFooter_css_ts_vanilla = require("./TooltipFooter.css");
-var container = "_dsuaez0-3-10-4";
+var container = "_dsuaez0-3-11-0";

package/charts/core/components/tooltip/section-components/TooltipHeader/TooltipHeader.css

@@ -1,7 +1,7 @@
-._1am3djx0-3-10-4 {
+._1am3djx0-3-11-0 {
   gap: var(--dt-spacings-size-4, 4px);
   flex-direction: column;
 }
-._1am3djx1-3-10-4 {
+._1am3djx1-3-11-0 {
   padding-bottom: var(--dt-spacings-size-4, 4px);
 }

package/charts/core/components/tooltip/section-components/TooltipHeader/TooltipHeader.sty.js

@@ -22,4 +22,4 @@ __export(TooltipHeader_css_exports, {
 module.exports = __toCommonJS(TooltipHeader_css_exports);
 var import_TooltipHeader_css_ts_vanilla = require("./TooltipHeader.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var container = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1am3djx0-3-10-4", variantClassNames: { withBorder: { true: "_1am3djx1-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
+var container = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1am3djx0-3-11-0", variantClassNames: { withBorder: { true: "_1am3djx1-3-11-0" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/tooltip/section-components/TooltipInfoContent/TooltipInfoContent.css

@@ -1,4 +1,4 @@
-._o71nz30-3-10-4 {
+._o71nz30-3-11-0 {
   flex: 1 1 auto;
   padding-right: var(--dt-spacings-size-8, 8px);
   text-align: left;

package/charts/core/components/tooltip/section-components/TooltipInfoContent/TooltipInfoContent.sty.js

@@ -21,4 +21,4 @@ __export(TooltipInfoContent_css_exports, {
 });
 module.exports = __toCommonJS(TooltipInfoContent_css_exports);
 var import_TooltipInfoContent_css_ts_vanilla = require("./TooltipInfoContent.css");
-var container = "_o71nz30-3-10-4";
+var container = "_o71nz30-3-11-0";

package/charts/core/components/tooltip/section-components/TooltipItem/TooltipItem.css

@@ -1,9 +1,9 @@
-._1xw2xi60-3-10-4 {
+._1xw2xi60-3-11-0 {
   align-items: center;
   display: flex;
   width: 100%;
 }
-._1xw2xi61-3-10-4 {
+._1xw2xi61-3-11-0 {
   display: block;
   padding-top: var(--dt-spacings-size-0, 0);
   padding-bottom: var(--dt-spacings-size-0, 0);
@@ -16,7 +16,7 @@
   font-family: var(--dt-typography-text-base-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._1xw2xi61-3-10-4:hover {
+._1xw2xi61-3-11-0:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   border-radius: var(--dt-borders-radius-field-subdued, 3px);

package/charts/core/components/tooltip/section-components/TooltipItem/TooltipItem.sty.js

@@ -22,5 +22,5 @@ __export(TooltipItem_css_exports, {
 });
 module.exports = __toCommonJS(TooltipItem_css_exports);
 var import_TooltipItem_css_ts_vanilla = require("./TooltipItem.css");
-var container = "_1xw2xi61-3-10-4";
-var itemContainer = "_1xw2xi60-3-10-4";
+var container = "_1xw2xi61-3-11-0";
+var itemContainer = "_1xw2xi60-3-11-0";

package/charts/core/components/tooltip/section-components/TooltipSymbolContent/TooltipSymbolContent.css

@@ -1,4 +1,4 @@
-._1alqzxh0-3-10-4 {
+._1alqzxh0-3-11-0 {
   flex: 0 0 var(--dt-spacings-size-24, 24px);
   height: var(--dt-spacings-size-24, 24px);
   padding-right: var(--dt-spacings-size-4, 4px);

package/charts/core/components/tooltip/section-components/TooltipSymbolContent/TooltipSymbolContent.sty.js

@@ -21,4 +21,4 @@ __export(TooltipSymbolContent_css_exports, {
 });
 module.exports = __toCommonJS(TooltipSymbolContent_css_exports);
 var import_TooltipSymbolContent_css_ts_vanilla = require("./TooltipSymbolContent.css");
-var container = "_1alqzxh0-3-10-4";
+var container = "_1alqzxh0-3-11-0";

package/charts/core/components/tooltip/section-components/VirtualizedTooltipBody/VirtualizedTooltipBody.css

@@ -1,8 +1,8 @@
-._1n2hhq90-3-10-4 {
+._1n2hhq90-3-11-0 {
   width: 100%;
   position: relative;
 }
-._1n2hhq91-3-10-4 {
+._1n2hhq91-3-11-0 {
   list-style: none;
   padding: 0;
   margin: 0;

package/charts/core/components/tooltip/section-components/VirtualizedTooltipBody/VirtualizedTooltipBody.sty.js

@@ -22,5 +22,5 @@ __export(VirtualizedTooltipBody_css_exports, {
 });
 module.exports = __toCommonJS(VirtualizedTooltipBody_css_exports);
 var import_VirtualizedTooltipBody_css_ts_vanilla = require("./VirtualizedTooltipBody.css");
-var itemsList = "_1n2hhq91-3-10-4";
-var listContainer = "_1n2hhq90-3-10-4";
+var itemsList = "_1n2hhq91-3-11-0";
+var listContainer = "_1n2hhq90-3-11-0";

package/charts/core/components/tooltip/shared/styles/SeriesBasedContent.css

@@ -1,4 +1,4 @@
-._dacoys0-3-10-4 {
+._dacoys0-3-11-0 {
   padding-right: var(--dt-spacings-size-4, 4px);
   padding-left: var(--dt-spacings-size-6, 6px);
   border: none;
@@ -8,13 +8,13 @@
   width: 100%;
   font-family: var(--dt-typography-text-base-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
 }
-._dacoys0-3-10-4:hover {
+._dacoys0-3-11-0:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   border-radius: var(--dt-borders-radius-field-default, 6px);
   cursor: pointer;
 }
-._dacoys1-3-10-4 {
+._dacoys1-3-11-0 {
   display: grid;
   align-items: center;
   column-gap: var(--dt-spacings-size-8, 8px);
@@ -24,20 +24,20 @@
   font-weight: var(--dt-typography-text-small-default-weight, 400);
   padding: var(--dt-spacings-size-2, 2px) 0px;
 }
-._dacoys2-3-10-4 {
+._dacoys2-3-11-0 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._dacoys3-3-10-4 {
+._dacoys3-3-11-0 {
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
 }
-._dacoys4-3-10-4 {
+._dacoys4-3-11-0 {
   font-weight: var(--dt-typography-text-base-default-weight, 400);
 }
-._dacoys5-3-10-4 {
+._dacoys5-3-11-0 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   white-space: nowrap;
   overflow: hidden;
@@ -50,20 +50,20 @@
   width: 100%;
   box-sizing: border-box;
 }
-._dacoys6-3-10-4 {
+._dacoys6-3-11-0 {
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
 }
-._dacoys7-3-10-4 {
+._dacoys7-3-11-0 {
   font-weight: var(--dt-typography-text-base-default-weight, 400);
 }
-._dacoys8-3-10-4 {
+._dacoys8-3-11-0 {
   width: 100%;
   box-sizing: border-box;
 }
-._dacoys9-3-10-4 {
+._dacoys9-3-11-0 {
   padding-left: 0;
 }
-._dacoysa-3-10-4 {
+._dacoysa-3-11-0 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
   border-radius: var(--dt-borders-radius-field-default, 6px);

package/charts/core/components/tooltip/shared/styles/SeriesBasedContent.sty.js

@@ -29,10 +29,10 @@ module.exports = __toCommonJS(SeriesBasedContent_css_exports);
 var import_textStyle_css_ts_vanilla = require("../../../../../../styles/textStyle.css");
 var import_SeriesBasedContent_css_ts_vanilla = require("./SeriesBasedContent.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var detailViewContent = "_dacoys0-3-10-4";
-var detailViewItem = "_dacoys1-3-10-4";
-var multipleDimensionContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dacoys5-3-10-4", variantClassNames: { highlighted: { true: "_dacoys6-3-10-4", false: "_dacoys7-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
-var multipleDimensionItem = "_dacoys8-3-10-4";
-var singleDimensionContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dacoys2-3-10-4", variantClassNames: { highlighted: { true: "_dacoys3-3-10-4", false: "_dacoys4-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
-var valueContainer = "_dacoys9-3-10-4";
-var valueItem = "_dacoysa-3-10-4 _da9a8v0-3-10-4 _da9a8v2-3-10-4 _da9a8v6-3-10-4 _da9a8ve-3-10-4";
+var detailViewContent = "_dacoys0-3-11-0";
+var detailViewItem = "_dacoys1-3-11-0";
+var multipleDimensionContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dacoys5-3-11-0", variantClassNames: { highlighted: { true: "_dacoys6-3-11-0", false: "_dacoys7-3-11-0" } }, defaultVariants: {}, compoundVariants: [] });
+var multipleDimensionItem = "_dacoys8-3-11-0";
+var singleDimensionContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dacoys2-3-11-0", variantClassNames: { highlighted: { true: "_dacoys3-3-11-0", false: "_dacoys4-3-11-0" } }, defaultVariants: {}, compoundVariants: [] });
+var valueContainer = "_dacoys9-3-11-0";
+var valueItem = "_dacoysa-3-11-0 _da9a8v0-3-11-0 _da9a8v2-3-11-0 _da9a8v6-3-11-0 _da9a8ve-3-11-0";

package/charts/core/components/tooltip/shared/styles/TooltipBody.css

@@ -1,4 +1,4 @@
-._1rpjobh0-3-10-4 {
+._1rpjobh0-3-11-0 {
   overflow: hidden auto;
   width: 100%;
   height: 100%;

package/charts/core/components/tooltip/shared/styles/TooltipBody.sty.js

@@ -21,4 +21,4 @@ __export(TooltipBody_css_exports, {
 });
 module.exports = __toCommonJS(TooltipBody_css_exports);
 var import_TooltipBody_css_ts_vanilla = require("./TooltipBody.css");
-var container = "_1rpjobh0-3-10-4";
+var container = "_1rpjobh0-3-11-0";

package/charts/core/components/tooltip-atoms/components/HeaderChipAtom/HeaderChipAtom.css

@@ -1,4 +1,4 @@
-._19a28040-3-10-4 {
+._19a28040-3-11-0 {
   height: 16px;
   min-width: 45px;
   display: flex;

package/charts/core/components/tooltip-atoms/components/HeaderChipAtom/HeaderChipAtom.sty.js

@@ -21,4 +21,4 @@ __export(HeaderChipAtom_css_exports, {
 });
 module.exports = __toCommonJS(HeaderChipAtom_css_exports);
 var import_HeaderChipAtom_css_ts_vanilla = require("./HeaderChipAtom.css");
-var headerChipAtom = "_19a28040-3-10-4";
+var headerChipAtom = "_19a28040-3-11-0";

package/charts/core/components/tooltip-atoms/components/styles.css

@@ -1,4 +1,4 @@
-._1b8jnp60-3-10-4 {
+._1b8jnp60-3-11-0 {
   width: 100%;
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   font-size: var(--dt-typography-text-small-default-size, 12px);
@@ -6,7 +6,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._1b8jnp61-3-10-4 {
+._1b8jnp61-3-11-0 {
   height: 16px;
   min-width: 45px;
   display: flex;
@@ -20,7 +20,7 @@
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1b8jnp62-3-10-4 {
+._1b8jnp62-3-11-0 {
   width: 100%;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   font-size: var(--dt-typography-text-small-default-size, 12px);
@@ -28,7 +28,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._1b8jnp63-3-10-4 {
+._1b8jnp63-3-11-0 {
   height: 24px;
   width: 24px;
   display: flex;

package/charts/core/components/tooltip-atoms/components/styles.sty.js

@@ -24,7 +24,7 @@ __export(styles_css_exports, {
 });
 module.exports = __toCommonJS(styles_css_exports);
 var import_styles_css_ts_vanilla = require("./styles.css");
-var chipAtom = "_1b8jnp61-3-10-4";
-var primaryInfo = "_1b8jnp62-3-10-4";
-var secondaryInfo = "_1b8jnp60-3-10-4";
-var symbolAtom = "_1b8jnp63-3-10-4";
+var chipAtom = "_1b8jnp61-3-11-0";
+var primaryInfo = "_1b8jnp62-3-11-0";
+var secondaryInfo = "_1b8jnp60-3-11-0";
+var symbolAtom = "_1b8jnp63-3-11-0";

package/charts/core/components/zoom/ZoomCursors.css

@@ -1,8 +1,8 @@
-._1idfwsm0-3-10-4 {
+._1idfwsm0-3-11-0 {
   cursor: ew-resize;
   user-select: none;
   touch-action: pan-y;
 }
-._1idfwsm1-3-10-4 {
+._1idfwsm1-3-11-0 {
   cursor: default;
 }

package/charts/core/components/zoom/ZoomCursors.sty.js

@@ -24,6 +24,6 @@ __export(ZoomCursors_css_exports, {
 module.exports = __toCommonJS(ZoomCursors_css_exports);
 var import_ZoomCursors_css_ts_vanilla = require("./ZoomCursors.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var cursorStyle = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1idfwsm2-3-10-4", variantClassNames: { isPanEnabled: { true: "_1idfwsm0-3-10-4", false: "_1idfwsm1-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
-var defaultCursor = "_1idfwsm1-3-10-4";
-var resizeCursor = "_1idfwsm0-3-10-4";
+var cursorStyle = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1idfwsm2-3-11-0", variantClassNames: { isPanEnabled: { true: "_1idfwsm0-3-11-0", false: "_1idfwsm1-3-11-0" } }, defaultVariants: {}, compoundVariants: [] });
+var defaultCursor = "_1idfwsm1-3-11-0";
+var resizeCursor = "_1idfwsm0-3-11-0";

package/charts/core/context/ChartVariantContext.d.ts

@@ -0,0 +1,11 @@
+type CrosshairConfig = {
+    horizontalHidden?: boolean;
+    verticalHidden?: boolean;
+    cursor?: 'default';
+};
+export type ChartVariantConfig = {
+    crosshair?: CrosshairConfig;
+};
+export declare const ChartVariantContext: import("react").Context<ChartVariantConfig>;
+export {};
+//# sourceMappingURL=ChartVariantContext.d.ts.map

package/charts/core/context/ChartVariantContext.js

@@ -0,0 +1,24 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ChartVariantContext_exports = {};
+__export(ChartVariantContext_exports, {
+  ChartVariantContext: () => ChartVariantContext
+});
+module.exports = __toCommonJS(ChartVariantContext_exports);
+var import_react = require("react");
+const ChartVariantContext = (0, import_react.createContext)({});

package/charts/core/types/chart-data.d.ts

@@ -1,3 +1,10 @@
+import type { ColorPalette, CustomColorPalette } from './color-palette.js';
+import type { ColoredRange } from './colored-range.js';
+/**
+ * Color palette accepted by chart components.
+ * @public
+ */
+export type ChartColorPalette = ColorPalette | CustomColorPalette | ColoredRange[];
 /**
  * A single data point in a chart dataset using the unified data format.
  * Each key represents a field name; values can be of any type and are

package/charts/core/typographyStyles.css

@@ -1,3 +1,3 @@
-._18u8ey50-3-10-4 {
+._18u8ey50-3-11-0 {
   font-feature-settings: 'ss01';
 }

package/charts/core/typographyStyles.sty.js

@@ -21,4 +21,4 @@ __export(typographyStyles_css_exports, {
 });
 module.exports = __toCommonJS(typographyStyles_css_exports);
 var import_typographyStyles_css_ts_vanilla = require("./typographyStyles.css");
-var replaceSlashedZero = "_18u8ey50-3-10-4";
+var replaceSlashedZero = "_18u8ey50-3-11-0";

package/charts/core/utils/binary-search.d.ts

@@ -13,7 +13,7 @@ export declare function binarySearch<T>(value: number, datums: T[], getDatumValu
  * @param getClusterValue - Function to extract the cluster value from a datum.
  * @returns The start and end indices of the cluster, or [-1, -1] if index is out of bounds.
  */
-export declare function boundariesOfCluster<T>(index: number, datums: T[], getClusterValue: (datum: T) => number): number[] | readonly [number, number];
+export declare function boundariesOfCluster<T>(index: number, datums: T[], getClusterValue: (datum: T) => number | string): number[] | readonly [number, number];
 /**
  * Gets the boundaries of the cluster at the position closest to the given value.
  * @param position - The position to search for.
@@ -22,7 +22,7 @@ export declare function boundariesOfCluster<T>(index: number, datums: T[], getCl
  * @param getClusterValue - Function to extract the cluster value from a datum.
  * @returns The start and end indices of the cluster.
  */
-export declare function getClusterBoundariesAtPosition<T>(position: number, datums: T[], getDatumPosition: (datum: T) => number, getClusterValue: (datum: T) => number): number[] | readonly [number, number];
+export declare function getClusterBoundariesAtPosition<T>(position: number, datums: T[], getDatumPosition: (datum: T) => number, getClusterValue: (datum: T) => number | string): number[] | readonly [number, number];
 /**
  * Gets the boundaries (indices) of datums within the specified position range.
  * @param positionRange - The start and end positions.

package/charts/core/utils/find-matching-threshold.js

@@ -28,7 +28,7 @@ const findMatchingThreshold = (value, thresholds) => {
     return void 0;
   }
   return filteredThresholdData.reduce(
-    (final, current) => current.value > final.value ? current : final,
+    (final, current) => current.value >= final.value ? current : final,
     filteredThresholdData[0]
   );
 };

package/charts/core/utils/get-primary-modifier-key.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Zoom mode is triggered by holding Ctrl or Cmd (`event.metaKey || event.ctrlKey`),
+ * but Ctrl+Arrow is intercepted by macOS Mission Control by default, so Cmd is the
+ * only modifier that reliably reaches the browser there.
+ * @internal
+ */
+export declare function getPrimaryModifierKey(): 'meta' | 'control';
+//# sourceMappingURL=get-primary-modifier-key.d.ts.map

package/charts/core/utils/{get-key-shortcut-by-agent.js → get-primary-modifier-key.js}

@@ -15,20 +15,12 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var get_key_shortcut_by_agent_exports = {};
-__export(get_key_shortcut_by_agent_exports, {
-  getKeyShortcutByAgent: () => getKeyShortcutByAgent
+var get_primary_modifier_key_exports = {};
+__export(get_primary_modifier_key_exports, {
+  getPrimaryModifierKey: () => getPrimaryModifierKey
 });
-module.exports = __toCommonJS(get_key_shortcut_by_agent_exports);
+module.exports = __toCommonJS(get_primary_modifier_key_exports);
 var import_user_agent_utils = require("../../../core/utils/user-agent-utils.js");
-const windowsModifierKeys = {
-  CONTROL: "Ctrl",
-  ALT: "Alt"
-};
-const macModifierKeys = {
-  CONTROL: "Cmd",
-  ALT: "Opt"
-};
-function getKeyShortcutByAgent(key) {
-  return (0, import_user_agent_utils.isMacPlatform)() ? macModifierKeys[key] : windowsModifierKeys[key];
+function getPrimaryModifierKey() {
+  return (0, import_user_agent_utils.isMacPlatform)() ? "meta" : "control";
 }

package/charts/flame/flame-chart/FlameChart.d.ts

@@ -0,0 +1,5 @@
+import type { ChartDatapoint } from '../../core/types/chart-data.js';
+import type { FlameChartProps } from '../shared/types/flame-chart.js';
+/** @internal */
+export declare function FlameChart<TData extends ChartDatapoint = ChartDatapoint>({ data, idAccessor, parentIdAccessor, startAccessor, endAccessor, selfValueAccessor, labelAccessor, colorPalette, orientation, truncationMode, valueFormatter, minTime, currentZoom, seriesActions, height, }: FlameChartProps<TData>): import("react").JSX.Element;
+//# sourceMappingURL=FlameChart.d.ts.map

package/charts/flame/flame-chart/FlameChart.js

@@ -0,0 +1,164 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var FlameChart_exports = {};
+__export(FlameChart_exports, {
+  FlameChart: () => FlameChart
+});
+module.exports = __toCommonJS(FlameChart_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_units = require("@dynatrace-sdk/units");
+var import_Divider = require("../../../layouts/divider/Divider.js");
+var import_OverlayTooltip = require("../../core/components/overlay-tooltip/OverlayTooltip.js");
+var import_ChartVariantContext = require("../../core/context/ChartVariantContext.js");
+var import_XYChartRoot = require("../../xy-chart/XYChartRoot.js");
+var import_constants = require("../shared/constants.js");
+var import_format_flame_value = require("../shared/utils/format-flame-value.js");
+var import_order_spans_hierarchically = require("../shared/utils/order-spans-hierarchically.js");
+const CROSSHAIR_VARIANT = {
+  crosshair: { horizontalHidden: true, cursor: "default" }
+};
+function FlameChart({
+  data,
+  idAccessor,
+  parentIdAccessor,
+  startAccessor,
+  endAccessor,
+  selfValueAccessor,
+  labelAccessor,
+  colorPalette,
+  orientation = "bottom-up",
+  truncationMode,
+  valueFormatter,
+  minTime,
+  currentZoom,
+  seriesActions,
+  height
+}) {
+  const orderedData = (0, import_react.useMemo)(() => {
+    const withIndex = data.map((datum, index) => ({
+      ...datum,
+      [import_constants.FLAME_ORIGINAL_IDX]: index
+    }));
+    const ordered = (0, import_order_spans_hierarchically.orderSpansHierarchically)(withIndex, {
+      spanIdAccessor: idAccessor,
+      parentIdAccessor,
+      x0Accessor: startAccessor,
+      x1Accessor: endAccessor
+    });
+    const offset = minTime ?? 0;
+    const output = new Array(ordered.length);
+    for (let i = 0; i < ordered.length; i++) {
+      const span = ordered[i];
+      const start = Number(span[startAccessor] ?? 0);
+      const end = Number(span[endAccessor] ?? 0);
+      output[i] = {
+        ...span,
+        [import_constants.START_FIELD]: start - offset,
+        [import_constants.END_FIELD]: end - offset,
+        [import_constants.VALUE_FIELD]: end - start
+      };
+    }
+    return output;
+  }, [data, idAccessor, parentIdAccessor, startAccessor, endAccessor, minTime]);
+  const normalizedZoom = (0, import_react.useMemo)(() => {
+    if (!currentZoom) {
+      return void 0;
+    }
+    const offset = minTime ?? 0;
+    return [currentZoom[0] - offset, currentZoom[1] - offset];
+  }, [currentZoom, minTime]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartVariantContext.ChartVariantContext.Provider, { value: CROSSHAIR_VARIANT, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_XYChartRoot.XYChart,
+    {
+      data: orderedData,
+      truncationMode,
+      height,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_XYChartRoot.XYChart.RectSeries,
+          {
+            x0Accessor: import_constants.START_FIELD,
+            x1Accessor: import_constants.END_FIELD,
+            y0Accessor: import_constants.DEPTH_FIELD,
+            valueAccessor: import_constants.VALUE_FIELD,
+            colorPalette,
+            _labelAccessor: labelAccessor,
+            xAxisId: import_constants.XY_DEFAULTS.xAxisId,
+            yAxisId: import_constants.XY_DEFAULTS.yAxisId
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_XYChartRoot.XYChart.XAxis,
+          {
+            id: import_constants.XY_DEFAULTS.xAxisId,
+            type: "numerical",
+            position: "top",
+            formatter: { input: import_units.units.time.millisecond },
+            currentZoom: normalizedZoom,
+            infiniteZoom: true
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_XYChartRoot.XYChart.YAxis,
+          {
+            id: import_constants.XY_DEFAULTS.yAxisId,
+            type: "categorical",
+            position: "left",
+            hidden: true,
+            reversed: orientation === "bottom-up"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.Legend, { hidden: true }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.Toolbar, { hidden: true }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.Tooltip, { children: (payload) => {
+          const datapoint = payload.rectPayload?.datapoint;
+          const label = String(datapoint?.[labelAccessor] ?? "");
+          const selfDescription = selfValueAccessor !== void 0 ? `Self: ${(0, import_format_flame_value.formatFlameValue)(
+            datapoint?.[selfValueAccessor],
+            valueFormatter
+          )}` : void 0;
+          const actions = seriesActions && datapoint ? () => seriesActions(data[datapoint[import_constants.FLAME_ORIGINAL_IDX]]) : void 0;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverlayTooltip.ChartTooltip.Header, { header1: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_Divider.Divider,
+              {
+                orientation: "horizontal",
+                style: { marginBottom: "4px" }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_OverlayTooltip.ChartTooltip.SeriesItem,
+              {
+                color: `${payload.rectPayload?.color}`,
+                name: "Total",
+                value: (0, import_format_flame_value.formatFlameValue)(
+                  datapoint?.[import_constants.VALUE_FIELD],
+                  valueFormatter
+                ),
+                description: selfDescription,
+                actions
+              }
+            )
+          ] });
+        } })
+      ]
+    }
+  ) });
+}