@umbraco-engage/backoffice 17.1.1 → 17.2.0

package/dist/analytics/analytics-context.js

@@ -78,32 +78,26 @@ export class UeAnalyticsContext extends UmbContextBase {
             query.startDate = startDate.toISOString();
         }
     }
-    // TODO => ensure this works with drilldown (it won't currently as it replaces the filter)
-    async #setNodeFilter(query) {
+    #setNodeFilter(query) {
         if (!query.documentUnique)
             return;
-        query.filter = `NodeId=='${query.documentUnique}${this.#settings.getValue().includeNodeDescendants ? "+" : ""}'`;
+        let nodeFilter = `NodeId=='${query.documentUnique}${this.#settings.getValue().includeNodeDescendants ? "+" : ""}'`;
         if (query.culture !== undefined && query.culture !== "invariant") {
-            query.filter += `;NodeCulture=='${query.culture}'`;
+            nodeFilter += `;NodeCulture=='${query.culture}'`;
         }
+        query.filter = query.filter ? `${query.filter};${nodeFilter}` : nodeFilter;
     }
     #setDrilldown(query) {
-        query.filter = null;
         const drilldown = this.#drilldown.getValue() ?? {};
-        const drilldownArray = Object.keys(drilldown)
+        const drilldownFilter = Object.keys(drilldown)
             .filter((key) => drilldown?.[key] !== null)
-            .map((key) => `${key}=='${drilldown?.[key]}'`);
-        if (!drilldownArray.length)
+            .map((key) => `${key}=='${drilldown?.[key]}'`)
+            .join(";");
+        if (!drilldownFilter)
             return;
-        const baseFilter = query.filter ?? "";
-        if (baseFilter)
-            // Combine the drilldown array with the filter from the prefab
-            query.filter = drilldownArray
-                .map((dd) => baseFilter + ";" + dd)
-                .join(";");
-        else {
-            query.filter = drilldownArray.join(";");
-        }
+        query.filter = query.filter
+            ? `${query.filter};${drilldownFilter}`
+            : drilldownFilter;
     }
     #mapQuery(query) {
         return {

package/dist/analytics/components/annotations/annotation-dataset-generator.controller.js

@@ -1,4 +1,4 @@
-import { AnnotationIconGenerator } from "./annotation-icon-generator.js";
+import { UeAnnotationIconGenerator } from "./annotation-icon-generator.js";
 export class UeAnnotationsDatasetGeneratorController {
     async process(chart, annotations = []) {
         if (!chart?.config.options?.plugins?.annotation)
@@ -10,7 +10,7 @@ export class UeAnnotationsDatasetGeneratorController {
                 return [];
             const color = this.#getColor(item.visibility);
             labelColors[xValue] = color;
-            const icon = await AnnotationIconGenerator.getIcon(item.visibility);
+            const icon = await UeAnnotationIconGenerator.getIcon(item.visibility);
             return [
                 `annotation_${idx}`,
                 {

package/dist/analytics/components/annotations/annotation-icon-generator.d.ts

@@ -1,4 +1,4 @@
 import type { AnnotationVisibilityModel } from "../../../generated/index.js";
-export declare class AnnotationIconGenerator {
+export declare class UeAnnotationIconGenerator {
     static getIcon(value: AnnotationVisibilityModel): Promise<import("lit-html").TemplateResult<1>>;
 }

package/dist/analytics/components/annotations/annotation-icon-generator.js

@@ -1,4 +1,4 @@
-export class AnnotationIconGenerator {
+export class UeAnnotationIconGenerator {
     static async getIcon(value) {
         switch (value) {
             case "Always": {

package/dist/analytics/components/annotations/annotations-element.js

@@ -5,8 +5,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { ENGAGE_EDIT_ANNOTATION_MODAL_ALIAS, } from "../../modal/index.js";
-import { AnnotationIconGenerator } from "./annotation-icon-generator.js";
 import { UeAnnotationsDatasetGeneratorController } from "./annotation-dataset-generator.controller.js";
+import { UeAnnotationIconGenerator } from "./annotation-icon-generator.js";
 import { css, customElement, html, property, state, until, when, } from "@umbraco-cms/backoffice/external/lit";
 import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
 import { umbConfirmModal, umbOpenModal } from "@umbraco-cms/backoffice/modal";
@@ -26,6 +26,31 @@ let UeAnnotationsElement = class UeAnnotationsElement extends UmbLitElement {
         this.#annotationDatasetGenerator = new UeAnnotationsDatasetGeneratorController();
         this._collapsed = true;
         this.#annotationVisibilityValues = makeArray("Always", "Node", "NodeAndDescendants", "Created", "Published", "AbTestStart", "AbTestEnd");
+        this.#tableColumns = [
+            {
+                name: "",
+                alias: "icon",
+                width: "40px",
+            },
+            {
+                name: this.localize.term("engage_property_date"),
+                alias: "date",
+            },
+            {
+                name: this.localize.term("engage_property_description"),
+                alias: "description",
+            },
+            {
+                name: this.localize.term("engage_createdBy"),
+                alias: "createdBy",
+            },
+            {
+                name: "",
+                alias: "actions",
+                width: "100px",
+                align: "right",
+            },
+        ];
         this.consumeContext(UMB_DOCUMENT_WORKSPACE_CONTEXT, (context) => (this.#documentWorkspaceContext = context));
         this.consumeContext(ENGAGE_DATERANGE_MANAGER, (context) => {
             this.#dateRangeManager = context;
@@ -69,9 +94,7 @@ let UeAnnotationsElement = class UeAnnotationsElement extends UmbLitElement {
         await tryExecute(this, AnnotationsService.deleteAnnotations({ query: { id: annotation.id } }));
         this.#updateAnnotations();
     }
-    async #addAnnotation(e, annotation) {
-        e.preventDefault();
-        e.stopImmediatePropagation();
+    async #addAnnotation(annotation) {
         let value = await umbOpenModal(this, ENGAGE_EDIT_ANNOTATION_MODAL_ALIAS, {
             data: {
                 isNew: !annotation,
@@ -124,52 +147,60 @@ let UeAnnotationsElement = class UeAnnotationsElement extends UmbLitElement {
         return (this.#annotationVisibilityValues.indexOf(annotation.visibility) <
             this.#annotationVisibilityValues.indexOf("NodeAndDescendants"));
     }
+    #tableColumns;
+    #createTableItems() {
+        return (this.annotations?.map((annotation, index) => ({
+            id: `${annotation.id}_${index}`,
+            data: [
+                {
+                    columnAlias: "icon",
+                    value: html `<span style="display: flex; margin:auto; padding:12px"
+              >${until(UeAnnotationIconGenerator.getIcon(annotation.visibility))}</span
+            >`,
+                },
+                {
+                    columnAlias: "date",
+                    value: this.localize.date(annotation.timestamp, UeTimeFormatOptions),
+                },
+                {
+                    columnAlias: "description",
+                    value: annotation.description,
+                },
+                {
+                    columnAlias: "createdBy",
+                    value: this.localize.term("engage_createdByOn", annotation.createdByUserName, this.localize.date(annotation.created ?? annotation.timestamp, UeTimeFormatOptions)),
+                },
+                {
+                    columnAlias: "actions",
+                    value: this.#isEditable(annotation)
+                        ? html `<uui-action-bar>
+                  <uui-button @click=${() => this.#addAnnotation(annotation)}>
+                    <umb-icon name="icon-edit"></umb-icon>
+                  </uui-button>
+                  <uui-button
+                    @click=${() => this.#deleteAnnotation(annotation)}
+                  >
+                    <umb-icon name="icon-trash"></umb-icon>
+                  </uui-button>
+                </uui-action-bar>`
+                        : "",
+                },
+            ],
+        })) ?? []);
+    }
     #renderTable() {
-        return html `<uui-table>
-      <uui-table-column></uui-table-column>
-      <uui-table-column></uui-table-column>
-      <uui-table-column></uui-table-column>
-      <uui-table-column></uui-table-column>
-      <uui-table-column></uui-table-column>
-      <uui-table-head>
-        <uui-table-head-cell></uui-table-head-cell>
-        <uui-table-head-cell
-          >${this.localize.term("engage_property_date")}</uui-table-head-cell
-        >
-        <uui-table-head-cell
-          >${this.localize.term("engage_property_description")}</uui-table-head-cell
-        >
-        <uui-table-head-cell
-          >${this.localize.term("engage_createdBy")}</uui-table-head-cell
-        >
-      </uui-table-head>
-      ${this.annotations?.map((annotation) => html `<uui-table-row>
-          <uui-table-cell
-            >${until(AnnotationIconGenerator.getIcon(annotation.visibility))}</uui-table-cell
-          >
-          <uui-table-cell
-            >${this.localize.date(annotation.timestamp, UeTimeFormatOptions)}</uui-table-cell
-          >
-          <uui-table-cell>${annotation.description}</uui-table-cell>
-          <uui-table-cell
-            >${this.localize.term("engage_createdByOn", annotation.createdByUsername, this.localize.date(annotation.created ?? annotation.timestamp, UeTimeFormatOptions))}
-          </uui-table-cell>
-          <uui-table-cell>
-            ${when(this.#isEditable(annotation), () => html `<uui-action-bar>
-                <uui-button @click=${(e) => this.#addAnnotation(e, annotation)}
-                  ><umb-icon name="icon-edit"></umb-icon></uui-button
-                ><uui-button @click=${() => this.#deleteAnnotation(annotation)}
-                  ><umb-icon name="icon-trash"></umb-icon></uui-button
-              ></uui-action-bar>`)}</uui-table-cell
-          >
-        </uui-table-row>`)}
-    </uui-table>`;
+        return html `<umb-table
+      .config=${{ allowSelection: false, hideIcon: true }}
+      .columns=${this.#tableColumns}
+      .items=${this.#createTableItems()}
+    ></umb-table>`;
     }
     render() {
         return html `
       <ue-collapsing-box
         style="--uui-box-default-padding: 0;"
-        .headline=${this.localize.term("engage_analytics_annotations")}
+        .headline=${this.localize.term("engage_analytics_annotations") +
+            ` (${this.annotations?.length || 0})`}
         ?collapsed=${this._collapsed}
         @show=${this.#showAnnotations}
         @hide=${this.#hideAnnotations}
@@ -178,8 +209,8 @@ let UeAnnotationsElement = class UeAnnotationsElement extends UmbLitElement {
           slot="tag"
           compact
           look="primary"
-          @click=${this.#addAnnotation}
-          .label=${this.localize.term("general_add")}
+          @click=${() => this.#addAnnotation()}
+          label="add annotation"
           ><uui-icon name="icon-add"></uui-icon
         ></uui-button>
 
@@ -196,19 +227,8 @@ let UeAnnotationsElement = class UeAnnotationsElement extends UmbLitElement {
       max-width: 1400px;
     }
 
-    svg {
-      width: var(--uui-size-5);
-      height: var(--uui-size-5);
-    }
-
-    small {
-      line-height: 1.4;
-      display: block;
-    }
-
-    #empty {
-      padding: var(--uui-size-space-4) var(--uui-size-space-5);
-      text-align: center;
+    umb-table {
+      --uui-shadow-depth-1: none;
     }
   `; }
 };

package/dist/analytics/components/annotations/svg/engage.js

@@ -1,2 +1,20 @@
 import { html } from "@umbraco-cms/backoffice/external/lit";
-export default html `<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"  viewBox="0 0 723.59 887.635"><path d="M524.991 688.967a230.976 230.976 0 0 1-394.18-163.449V327.177a34.629 34.629 0 0 1 69.257 0v198.344a161.961 161.961 0 0 0 161.864 161.856c89.1 0 161.587-72.611 161.587-161.863V326.203a34.629 34.629 0 1 1 69.257 0v199.318a230.554 230.554 0 0 1-67.785 163.446z"/><path d="M432.634 596.355a100.017 100.017 0 0 1-170.737-70.834v-67.9a34.63 34.63 0 1 1 69.26 0v67.9a30.86 30.86 0 0 0 30.78 30.868 30.533 30.533 0 0 0 21.728-9.01 30.7 30.7 0 0 0 9.043-21.854V269.067a102.1 102.1 0 0 1 28.681-71.077 97.832 97.832 0 0 1 126.986-12.994c2.07 1.433 4.1 2.957 6.053 4.536a34.629 34.629 0 1 1-43.572 53.833c-.614-.494-1.254-.975-1.907-1.426a29.014 29.014 0 0 0-16.5-5.261c-16.525 0-30.488 14.833-30.488 32.388v256.455a99.51 99.51 0 0 1-29.321 70.817z"/><path d="M321.014 364.6a34.629 34.629 0 0 1-59.116-24.486V173.572a160.8 160.8 0 0 0-47.407-114.454 34.63020107 34.63020107 0 0 1 48.973-48.976 229.639 229.639 0 0 1 67.694 163.43v166.539a34.5 34.5 0 0 1-10.144 24.489zM713.445 365.864a34.629 34.629 0 0 1-59.113-24.486V202.051a34.629 34.629 0 1 1 69.257 0v139.327a34.52 34.52 0 0 1-10.144 24.486zM617.496 781.742a359.052 359.052 0 0 1-255.561 105.893 360.256 360.256 0 0 1-249.437-99.784 34.6290007 34.6290007 0 1 1 47.754-50.162 292.231 292.231 0 0 0 408.272-4.923l.149-.149a291.168 291.168 0 0 0 85.656-207.1v-67.898a34.6305 34.6305 0 0 1 69.261 0v67.9a359.974 359.974 0 0 1-105.912 256.038zM97.207 703.391a34.658 34.658 0 0 1-55.084-8.24A362.884 362.884 0 0 1 0 525.522V198.656a99.528 99.528 0 0 1 29.282-70.784l.052-.052a100.034 100.034 0 0 1 170.734 70.833v11.535a34.629 34.629 0 0 1-69.257 0v-11.535a30.777 30.777 0 1 0-61.553 0v326.869a293.342 293.342 0 0 0 34.032 137.14 34.652 34.652 0 0 1-6.083 40.729z"/></svg>`;
+export default html `<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.75"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  viewBox="0 0 723.59 887.635"
+>
+  <path
+    d="M524.991 688.967a230.976 230.976 0 0 1-394.18-163.449V327.177a34.629 34.629 0 0 1 69.257 0v198.344a161.961 161.961 0 0 0 161.864 161.856c89.1 0 161.587-72.611 161.587-161.863V326.203a34.629 34.629 0 1 1 69.257 0v199.318a230.554 230.554 0 0 1-67.785 163.446z"
+  />
+  <path
+    d="M432.634 596.355a100.017 100.017 0 0 1-170.737-70.834v-67.9a34.63 34.63 0 1 1 69.26 0v67.9a30.86 30.86 0 0 0 30.78 30.868 30.533 30.533 0 0 0 21.728-9.01 30.7 30.7 0 0 0 9.043-21.854V269.067a102.1 102.1 0 0 1 28.681-71.077 97.832 97.832 0 0 1 126.986-12.994c2.07 1.433 4.1 2.957 6.053 4.536a34.629 34.629 0 1 1-43.572 53.833c-.614-.494-1.254-.975-1.907-1.426a29.014 29.014 0 0 0-16.5-5.261c-16.525 0-30.488 14.833-30.488 32.388v256.455a99.51 99.51 0 0 1-29.321 70.817z"
+  />
+  <path
+    d="M321.014 364.6a34.629 34.629 0 0 1-59.116-24.486V173.572a160.8 160.8 0 0 0-47.407-114.454 34.63020107 34.63020107 0 0 1 48.973-48.976 229.639 229.639 0 0 1 67.694 163.43v166.539a34.5 34.5 0 0 1-10.144 24.489zM713.445 365.864a34.629 34.629 0 0 1-59.113-24.486V202.051a34.629 34.629 0 1 1 69.257 0v139.327a34.52 34.52 0 0 1-10.144 24.486zM617.496 781.742a359.052 359.052 0 0 1-255.561 105.893 360.256 360.256 0 0 1-249.437-99.784 34.6290007 34.6290007 0 1 1 47.754-50.162 292.231 292.231 0 0 0 408.272-4.923l.149-.149a291.168 291.168 0 0 0 85.656-207.1v-67.898a34.6305 34.6305 0 0 1 69.261 0v67.9a359.974 359.974 0 0 1-105.912 256.038zM97.207 703.391a34.658 34.658 0 0 1-55.084-8.24A362.884 362.884 0 0 1 0 525.522V198.656a99.528 99.528 0 0 1 29.282-70.784l.052-.052a100.034 100.034 0 0 1 170.734 70.833v11.535a34.629 34.629 0 0 1-69.257 0v-11.535a30.777 30.777 0 1 0-61.553 0v326.869a293.342 293.342 0 0 0 34.032 137.14 34.652 34.652 0 0 1-6.083 40.729z"
+  />
+</svg>`;

package/dist/analytics/components/chart/analytics-chart.element.d.ts

@@ -18,7 +18,7 @@ export declare class UeAnalyticsChartElement extends UeChartBaseElement {
     absoluteData?: ChartData & {
         dates: Array<Array<string>>;
     };
-    drilldown?: Record<string, string | number>;
+    drilldown?: Record<string, string | number | null>;
     constructor();
     protected updated(_changedProperties: PropertyValues): void;
     disconnectedCallback(): void;

package/dist/analytics/components/chart/analytics-chart.element.js

@@ -6,8 +6,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { UeChartSettingsGeneratorController } from "./chart-settings-generator.controller.js";
 import { UeChartDatasetGeneratorController } from "./chart-dataset-generator.controller.js";
-import { ChartRegistrarController } from "./chart-registrar.controller.js";
-import { Chart } from "chart.js";
+import { UeChartRegistrarController } from "./chart-registrar.controller.js";
+import { Chart, } from "chart.js";
 import { css, customElement, html, property, when, } from "@umbraco-cms/backoffice/external/lit";
 import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from "@umbraco-cms/backoffice/document";
 import { ENGAGE_ANALYTICS_CONTEXT } from "../../index.js";
@@ -24,7 +24,7 @@ let UeAnalyticsChartElement = class UeAnalyticsChartElement extends UeChartBaseE
         this.#chartSettingsGenerator = new UeChartSettingsGeneratorController(this);
         this.#chartDatasetGenerator = new UeChartDatasetGeneratorController(this);
         this.showPercentages = false;
-        ChartRegistrarController.register();
+        UeChartRegistrarController.register();
         this.consumeContext(UMB_DOCUMENT_WORKSPACE_CONTEXT, (context) => {
             this.observe(context?.unique, (unique) => {
                 if (!this.config)
@@ -61,9 +61,12 @@ let UeAnalyticsChartElement = class UeAnalyticsChartElement extends UeChartBaseE
         if (_changedProperties.has("showPercentages") &&
             _changedProperties.get("showPercentages") !== this.showPercentages) {
             // when showPercentages changes, update the displayed dataset
-            this.showPercentages
-                ? this.#setPercentageData()
-                : this.#setAbsoluteData();
+            if (this.showPercentages) {
+                this.#setPercentageData();
+            }
+            else {
+                this.#setAbsoluteData();
+            }
         }
         // When config changes (e.g., alias update changes metrics), reload
         this.#scheduleLoadChart();
@@ -109,7 +112,6 @@ let UeAnalyticsChartElement = class UeAnalyticsChartElement extends UeChartBaseE
         if (!this.chartElement)
             return;
         this.#buildLegend();
-        // TODO => why is the cast to <any> required?
         this.chart = new Chart(this.chartElement.getContext("2d"), {
             data: chartData,
             options: this.#getChartOptions(),

package/dist/analytics/components/chart/chart-dataset-generator.controller.d.ts

@@ -2,7 +2,7 @@ import type { UeChartConfigUnionType } from "./entities.js";
 import type { ChartData, ChartType } from "chart.js";
 import { UmbControllerBase } from "@umbraco-cms/backoffice/class-api";
 import type { UmbControllerHost } from "@umbraco-cms/backoffice/controller-api";
-import { type AnalyticsQueryResultModel, type ColumnModel } from "../../../generated/index.js";
+import type { AnalyticsQueryResultModel, ColumnModel } from "../../../generated/index.js";
 interface ChartSeries {
     dateRange: {
         from?: string;
@@ -10,7 +10,7 @@ interface ChartSeries {
         length?: number;
         unique: string;
     };
-    rows: Array<Array<any>>;
+    rows: Array<Array<unknown>>;
     columns: Array<ColumnModel>;
     label?: string;
     type: ChartType;

package/dist/analytics/components/chart/chart-dataset-generator.controller.js

@@ -1,7 +1,7 @@
 import { UeChartSettingsGeneratorController } from "./chart-settings-generator.controller.js";
 import { UmbControllerBase } from "@umbraco-cms/backoffice/class-api";
 import { UmbLocalizationController } from "@umbraco-cms/backoffice/localization-api";
-import { DateUtils } from "../../../core/index.js";
+import { UeDateUtils } from "../../../core/index.js";
 import { ENGAGE_ANALYTICS_CONTEXT, } from "../../index.js";
 export class UeChartDatasetGeneratorController extends UmbControllerBase {
     #settingsGenerator;
@@ -54,8 +54,8 @@ export class UeChartDatasetGeneratorController extends UmbControllerBase {
                     row[DATE_COLUMN_INDEX] = new Date(row[DATE_COLUMN_INDEX]);
                 });
             }
-            let currentDate = new DateUtils(series.dateRange.from).startOf("day");
-            const uptoDate = new DateUtils(series.dateRange.to).endOf("day");
+            let currentDate = new UeDateUtils(series.dateRange.from).startOf("day");
+            const uptoDate = new UeDateUtils(series.dateRange.to).endOf("day");
             const diffToLongest = currentDate.diff(new Date(longestSeries.dateRange.from), "days");
             const groupedRows = this.#groupRows(series.rows, DATE_COLUMN_INDEX, METRIC_COLUMN_INDEX);
             const seriesData = [];
@@ -64,10 +64,10 @@ export class UeChartDatasetGeneratorController extends UmbControllerBase {
             // Vul de data voor de geselecteerde from/to datum range (ook al is er voor die dag geen data beschikbaar)
             // Fill in the dates for the selected from/to date range (even if no data is available for that day
             do {
-                const compareDate = new DateUtils(currentDate.date).add(diffToLongest, "day");
+                const compareDate = new UeDateUtils(currentDate.date).add(diffToLongest, "day");
                 const key = this.#getDateKey(compareDate.date);
                 const row = groupedRows.find((row) => {
-                    const rowDate = new DateUtils(row[0]).add(diffToLongest, "day").date;
+                    const rowDate = new UeDateUtils(row[0]).add(diffToLongest, "day").date;
                     const rowKey = this.#getDateKey(rowDate);
                     return key === rowKey;
                 });
@@ -83,10 +83,10 @@ export class UeChartDatasetGeneratorController extends UmbControllerBase {
                     const dates = [];
                     const labels = [];
                     this.allSeries.forEach((s, idx) => {
-                        const from = new DateUtils(s.dateRange.from);
-                        const to = new DateUtils(s.dateRange.to);
+                        const from = new UeDateUtils(s.dateRange.from);
+                        const to = new UeDateUtils(s.dateRange.to);
                         const differenceToMain = from.diff(new Date(longestSeries.dateRange.from), "days");
-                        const adjustedDate = new DateUtils(currentDate.date).add(differenceToMain, "day");
+                        const adjustedDate = new UeDateUtils(currentDate.date).add(differenceToMain, "day");
                         if (adjustedDate < from || adjustedDate > to) {
                             // Outside of range -- do not render label
                             return;
@@ -120,8 +120,8 @@ export class UeChartDatasetGeneratorController extends UmbControllerBase {
                 let seriesLabel = "";
                 if (uniqueDateRanges.length > 1) {
                     // Use the date range as the label if there is more than 1 unique date range involved
-                    const seriesFrom = new DateUtils(series.dateRange.from);
-                    const seriesTo = new DateUtils(series.dateRange.to);
+                    const seriesFrom = new UeDateUtils(series.dateRange.from);
+                    const seriesTo = new UeDateUtils(series.dateRange.to);
                     // Series label is always the same format: "from - to",
                     // regardless of current group by setting.
                     seriesLabel += `${seriesFrom.toMediumDate()} – ${seriesTo.toMediumDate()}`;
@@ -184,7 +184,7 @@ export class UeChartDatasetGeneratorController extends UmbControllerBase {
             if (!config.startDate || !config.endDate) {
                 return partialDateRange;
             }
-            const from = new DateUtils(config.startDate);
+            const from = new UeDateUtils(config.startDate);
             const to = new Date(config.endDate);
             partialDateRange.length = Math.abs(Math.ceil(from.diff(to, this.#groupBy ?? "day", true)));
             return partialDateRange;
@@ -241,13 +241,13 @@ export class UeChartDatasetGeneratorController extends UmbControllerBase {
         const dayOfMonth = "d MMM";
         switch (this.#groupBy) {
             case "week": {
-                const monday = new DateUtils(date.date).startOf("week");
-                const sunday = new DateUtils(date.date).endOf("week");
+                const monday = new UeDateUtils(date.date).startOf("week");
+                const sunday = new UeDateUtils(date.date).endOf("week");
                 return (monday.toString(dayOfMonth) + " - " + sunday.toString(dayOfMonth));
             }
             case "month":
                 // First of month
-                return new DateUtils(date.date).startOf("month").toString("MMMM");
+                return new UeDateUtils(date.date).startOf("month").toString("MMMM");
             default:
                 return date.toString(dayOfMonth);
         }
@@ -255,11 +255,11 @@ export class UeChartDatasetGeneratorController extends UmbControllerBase {
     #getDateGroup(date) {
         switch (this.#groupBy) {
             case "week":
-                return new DateUtils(date).startOf("week");
+                return new UeDateUtils(date).startOf("week");
             case "month":
-                return new DateUtils(date).startOf("month");
+                return new UeDateUtils(date).startOf("month");
             default:
-                return new DateUtils(date).startOf("day");
+                return new UeDateUtils(date).startOf("day");
         }
     }
     #nextDate(currentDate) {
@@ -272,18 +272,23 @@ export class UeChartDatasetGeneratorController extends UmbControllerBase {
     }
     #groupRows(rows, dateIdx, metricIdx) {
         if (!rows?.length) {
-            return rows;
+            return [];
         }
         const getDate = (rowKey) => new Date(rowKey * 1000);
         let currentKey = this.#getDateKey(rows[0][dateIdx]);
-        const groupedRows = [[getDate(currentKey), rows[0][metricIdx]]];
+        const groupedRows = [
+            [getDate(currentKey), rows[0][metricIdx]],
+        ];
         rows.forEach((row, idx) => {
             if (idx === 0)
                 return;
             const rowKey = this.#getDateKey(row[dateIdx]);
             if (rowKey !== currentKey) {
                 // Start a new row and push it
-                const newRow = [getDate(rowKey), row[metricIdx]];
+                const newRow = [
+                    getDate(rowKey),
+                    row[metricIdx],
+                ];
                 groupedRows.push(newRow);
                 currentKey = rowKey;
             }

package/dist/analytics/components/chart/chart-registrar.controller.d.ts

@@ -1,3 +1,3 @@
-export declare class ChartRegistrarController {
+export declare class UeChartRegistrarController {
     static register(): void;
 }

package/dist/analytics/components/chart/chart-registrar.controller.js

@@ -1,6 +1,6 @@
 import { Chart, BarController, BarElement, LineController, LineElement, BubbleController, CategoryScale, LogarithmicScale, TimeScale, LinearScale, PointElement, Legend, Tooltip, } from "chart.js";
 import annotationPlugin from "chartjs-plugin-annotation";
-export class ChartRegistrarController {
+export class UeChartRegistrarController {
     static register() {
         Chart.register(BarController, BarElement, LineController, LineElement, BubbleController, CategoryScale, LogarithmicScale, TimeScale, LinearScale, PointElement, Legend, Tooltip, annotationPlugin);
     }

package/dist/analytics/components/chart/chart-settings-generator.controller.js

@@ -1,6 +1,6 @@
 import { UmbControllerBase } from "@umbraco-cms/backoffice/class-api";
 import { UmbLocalizationController } from "@umbraco-cms/backoffice/localization-api";
-import { DateUtils, UeChartTooltipDefaults, } from "../../../core/index.js";
+import { UeDateUtils, UeChartTooltipDefaults, } from "../../../core/index.js";
 export class UeChartSettingsGeneratorController extends UmbControllerBase {
     constructor() {
         super(...arguments);
@@ -155,7 +155,7 @@ export class UeChartSettingsGeneratorController extends UmbControllerBase {
                 const dates = chartData.dates?.[context.dataIndex];
                 const date = dates[context.datasetIndex];
                 if (isCompare) {
-                    label = new DateUtils(date).toMediumDate();
+                    label = new UeDateUtils(date).toMediumDate();
                 }
                 // TODO => make it work with metrics and dimensions
                 // if (isMulti && chartData.dates.length > 0) {

package/dist/analytics/components/chart/index.d.ts

@@ -1,4 +1,4 @@
 export * from "./analytics-chart.element.js";
 export * from "./prefab-chart.element.js";
 export * from "./prefab-chart-prefabs-generator.controller.js";
-export * from "./entities.js";
+export type * from "./entities.js";

package/dist/analytics/components/chart/index.js

@@ -1,4 +1,3 @@
 export * from "./analytics-chart.element.js";
 export * from "./prefab-chart.element.js";
 export * from "./prefab-chart-prefabs-generator.controller.js";
-export * from "./entities.js";

package/dist/analytics/components/chart/prefab-chart-prefabs-generator.controller.js

@@ -115,14 +115,14 @@ export class UePrefabChartPrefabsGeneratorController extends UePrefabGeneratorCo
                 unitSingular: "display",
             },
             ["campaigns"]: {
-                // Total Pageviews for each campaign incl. the ones with no campaign
-                metrics: ["pageviews"],
+                // Total campaign entries for each campaign incl. the ones with no campaign
+                metrics: ["campaignEntries"],
                 unit: "entries",
                 unitSingular: "entry",
             },
             ["campaigns_page"]: {
-                // Total Pageviews (for this page) for each campaign incl. the ones with no campaign
-                metrics: ["pageviews"],
+                // Total campaign entries (for this page) for each campaign incl. the ones with no campaign
+                metrics: ["campaignEntries"],
                 unit: "entries",
                 unitSingular: "entry",
             },

package/dist/analytics/components/heatmap/heatmap.element.d.ts

@@ -1,4 +1,4 @@
-import { type UeHeatmapData } from "../../entities.js";
+import type { UeHeatmapData } from "../../entities.js";
 import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
 declare const elementName = "ue-heatmap";
 export declare class UeHeatmapElement extends UmbLitElement {

package/dist/analytics/components/heatmap/heatmap.element.js

@@ -131,40 +131,40 @@ let UeHeatmapElement = class UeHeatmapElement extends UmbLitElement {
             label=${this.localize.term("engage_learnMore")}
           ></uui-button>
         </uui-box>`, () => html `<div id="main">
-        <div id="iframe-box">
-          <div class="scrollmap"></div>
-          <div class="scrollmap blend"></div>
-          <div id="lines">
-            <div
-              class="line avg-fold"
-              style="--top-pos: ${this._averageFold}px"
-            >
-              <span class="line-header"
-                >${this.localize.term("engage_analytics_averageFold")} -
-                ${this._averageFold}px</span
+          <div id="iframe-box">
+            <div class="scrollmap"></div>
+            <div class="scrollmap blend"></div>
+            <div id="lines">
+              <div
+                class="line avg-fold"
+                style="--top-pos: ${this._averageFold}px"
               >
+                <span class="line-header"
+                  >${this.localize.term("engage_analytics_averageFold")} -
+                  ${this._averageFold}px</span
+                >
+              </div>
+              <div class="line" style="--top-pos: var(--n75)">
+                <span class="line-header">75%</span>
+              </div>
+              <div class="line" style="--top-pos: var(--n50)">
+                <span class="line-header">50%</span>
+              </div>
+              <div class="line" style="--top-pos: var(--n25)">
+                <span class="line-header">25%</span>
+              </div>
             </div>
-            <div class="line" style="--top-pos: var(--n75)">
-              <span class="line-header">75%</span>
-            </div>
-            <div class="line" style="--top-pos: var(--n50)">
-              <span class="line-header">50%</span>
-            </div>
-            <div class="line" style="--top-pos: var(--n25)">
-              <span class="line-header">25%</span>
+            <div id="indicator">
+              <div id="indicator-box"></div>
             </div>
+            <iframe sandbox="allow-scripts" title="iframe"></iframe>
           </div>
-          <div id="indicator">
-            <div id="indicator-box"></div>
+          <div id="legend">
+            <span>${this.localize.term("engage_hot")}</span>
+            <div id="legend-gradient"></div>
+            <span>${this.localize.term("engage_cold")}</span>
           </div>
-          <iframe sandbox="allow-scripts" title="iframe"></iframe>
-        </div>
-        <div id="legend">
-          <span>${this.localize.term("engage_hot")}</span>
-          <div id="legend-gradient"></div>
-          <span>${this.localize.term("engage_cold")}</span>
-        </div>
-      </div>`);
+        </div>`);
     }
     #renderNoUrl() {
         return html `<uui-box>