@umbraco-engage/backoffice 17.0.0-rc1

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

@@ -0,0 +1,205 @@
+import { UmbControllerBase } from "@umbraco-cms/backoffice/class-api";
+import { UmbLocalizationController } from "@umbraco-cms/backoffice/localization-api";
+import { DateUtils, UeChartTooltipDefaults, } from "../../../core/index.js";
+export class UeChartSettingsGeneratorController extends UmbControllerBase {
+    constructor() {
+        super(...arguments);
+        this.#localize = new UmbLocalizationController(this);
+        this.globalOptions = {
+            animation: false,
+            aspectRatio: 4,
+            interaction: {
+                intersect: false,
+                mode: "index",
+            },
+            elements: {
+                line: {
+                    fill: false,
+                    borderWidth: 4,
+                    tension: 0.05,
+                },
+                point: {
+                    radius: 4,
+                    borderWidth: 0,
+                },
+            },
+            scales: {
+                x: {
+                    grid: {
+                        display: false,
+                    },
+                },
+                y: {
+                    // Chart should always show 0 rather than start at the minimum value
+                    suggestedMin: 0,
+                    beginAtZero: true,
+                    ticks: {
+                        // Only accept integral y-axis value labels
+                        callback: (label) => Math.floor(Number(label)) === label ? label : null,
+                    },
+                },
+            },
+            plugins: {
+                tooltip: UeChartTooltipDefaults,
+                legend: {
+                    display: false,
+                },
+                annotation: {},
+            },
+        };
+        this.themes = {
+            default: [
+                // Graph 1
+                "#3444B2",
+                // Graph 2
+                "#FFBA00",
+                // Graph 3
+                "#FF7F50",
+                // ... etc
+                "#2AC37C",
+                "#F43D1F",
+                "#1F2953",
+                "#4C69E5",
+            ].map((color) => ({
+                borderColor: color,
+                backgroundColor: color,
+            })),
+        };
+    }
+    #localize;
+    getChartOptions(stack, isCompare, config, chartData) {
+        if (stack && this.globalOptions.scales?.x && this.globalOptions.scales?.y) {
+            this.globalOptions.scales.x[0].stacked = true;
+            this.globalOptions.scales.y[0].stacked = true;
+        }
+        if (config.aspect) {
+            this.globalOptions.aspectRatio = config.aspect;
+        }
+        this.#setTooltipCallbacks(isCompare, config, chartData);
+        return this.globalOptions;
+    }
+    getColumnName(column) {
+        switch (column) {
+            case "avgTimeOnPage":
+                return this.#localize.term("engage_analytics_timeOnPage");
+            case "avgEngagedTimeOnPage":
+                return this.#localize.term("engage_analytics_engagedTimeOnPage");
+            case "pageSessions":
+                return this.#localize.term("engage_analytics_sessions");
+            case "pageVisitors":
+                return this.#localize.term("engage_analytics_visitors");
+            /*-- Reporting --*/
+            case "activeSegmentPageviews":
+            case "activeSegmentSessions":
+            case "activeSegmentProfiles":
+                return this.#localize.term("engage_analytics_inSegment");
+            case "inactiveSegmentPageviews":
+            case "inactiveSegmentSessions":
+            case "inactiveSegmentProfiles":
+                return this.#localize.term("engage_analytics_notInSegment");
+            case "activePersonalizedSegmentPageviews":
+            case "activePersonalizedSegmentSessions":
+            case "activePersonalizedSegmentProfiles":
+                return this.#localize.term("engage_analytics_personalized");
+            case "inactivePersonalizedSegmentPageviews":
+            case "inactivePersonalizedSegmentSessions":
+            case "inactivePersonalizedSegmentProfiles":
+                return this.#localize.term("engage_analytics_notPersonalized");
+            default:
+                return column;
+        }
+    }
+    #setTooltipCallbacks(isCompare, config, chartData) {
+        if (!this.globalOptions.plugins?.tooltip)
+            return;
+        const isMulti = (config.dimensions?.length ?? 0) > 1;
+        this.globalOptions.plugins.tooltip.callbacks = {
+            title: (datasets) => {
+                if (!Array.isArray(datasets) || datasets.length === 0) {
+                    return "";
+                }
+                // annoyingly, once we set the callbacks ChartJs seems to hang on to them forever,
+                // across different charts. Hence we need to handle different chart types separately.
+                if (datasets.at(0)?.chart.config["type"] === "doughnut") {
+                    return datasets[0].label;
+                }
+                // get the data points from chartdata - datasets does not expose the labels as an
+                // array, only as comma-delimited string, which we don't know where to split as labels may have commas
+                const labels = chartData.labels?.[datasets[0].dataIndex];
+                if (!Array.isArray(labels)) {
+                    return labels;
+                }
+                // safe to cast - if we are here, labels is an array
+                return labels.join(" + ");
+            },
+            label: (context) => {
+                if (context.chart.config["type"] === "doughnut") {
+                    return context.formattedValue;
+                }
+                if (!isMulti && !isCompare) {
+                    return `${context.formattedValue} ${context.dataset.label}`;
+                }
+                let label = "";
+                const dates = chartData.dates?.[context.dataIndex];
+                const date = dates[context.datasetIndex];
+                if (isCompare) {
+                    label = new DateUtils(date).toMediumDate();
+                }
+                // TODO => make it work with metrics and dimensions
+                // if (isMulti && chartData.dates.length > 0) {
+                //   if (label.length > 0) label += " - ";
+                //   const dimensionLabel = chartData.rows[0][self.dimensions.length - 1];
+                //   label += dimensionLabel;
+                // }
+                if ((config.metrics?.length ?? 0) > 1) {
+                    if (label.length)
+                        label += " | ";
+                    // when comparing, we have double the datasets, so need to calculate the correct
+                    // index for getting the label - once we pass half the datasets, we need to reset the count
+                    let datasetIndex = context.datasetIndex;
+                    if (isCompare) {
+                        const halfSetLength = chartData.datasets.length / 2;
+                        datasetIndex =
+                            context.datasetIndex >= halfSetLength
+                                ? context.datasetIndex - halfSetLength
+                                : context.datasetIndex;
+                    }
+                    label += this.getColumnName(config.metrics[datasetIndex]);
+                }
+                const dataPoint = context.raw;
+                let suffix = "";
+                if (config.showPercentages) {
+                    suffix = "%";
+                }
+                else if (dataPoint === 1 && (config.unit || config.unitSingular)) {
+                    suffix = config.unitSingular || config.unit || "";
+                }
+                else if (dataPoint !== 1 && config.unit) {
+                    suffix = config.unit;
+                }
+                // Format the value only if it's a number and not showing percentages
+                const formattedValue = !config.showPercentages && typeof dataPoint === "number"
+                    ? this.#localize.number(dataPoint)
+                    : dataPoint;
+                return `${label ? label + ":" : ""} ${formattedValue}${suffix === "%" ? suffix : " " + suffix}`;
+            },
+            afterBody: function (items) {
+                if (!isCompare) {
+                    return;
+                }
+                const mainValue = parseInt(items[0]?.raw);
+                const compareValue = parseInt(items[1]?.raw);
+                if (isNaN(mainValue) ||
+                    isNaN(compareValue) ||
+                    mainValue + compareValue === 0) {
+                    return;
+                }
+                if (mainValue === 0 || compareValue === 0) {
+                    return `Change: ${mainValue === 0 ? "-" : "+"}100%`;
+                }
+                const difference = (mainValue - compareValue) / compareValue;
+                return `Change: ${difference > 0 ? "+" : ""}${(difference * 100).toFixed(2)}%`;
+            },
+        };
+    }
+}

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

@@ -0,0 +1,26 @@
+import type { ChartType } from "chart.js";
+import type { AnalyticsQueryGetModel } from "../../../generated/index.js";
+import type { UePrefabChartPrefab } from "../../index.js";
+import type { UeDateRangePickerInputConfig } from "../../../core/index.js";
+export interface UeChartConfig extends UePrefabChartPrefab {
+    type: ChartType;
+    size?: UeChartSize;
+    showAnnotations?: boolean;
+    isFullHeight?: boolean;
+    showPercentages?: boolean;
+    stack?: boolean;
+    page: number;
+    pageSize: number;
+    aspect?: number;
+    dateRange?: UeDateRangePickerInputConfig;
+}
+export type UeChartSize = "small" | "medium" | "large";
+export type UeChartConfigUnionType = Partial<AnalyticsQueryGetModel> & Partial<UeChartConfig>;
+export interface UeChartTheme {
+    borderColor: string;
+    borderWidth?: number;
+    backgroundColor: string;
+    pointBackgroundColor?: string;
+    pointHoverBackgroundColor?: string;
+    type?: ChartType;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +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";

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

@@ -0,0 +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";

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

@@ -0,0 +1,10 @@
+import type { UePrefabType, UePrefabCollection, UePrefabChartPrefab, UePrefabEntityBase } from "../../entities.js";
+import { UePrefabGeneratorControllerBase } from "../../prefab-generator-base.controller.js";
+import type { UeChartConfigUnionType } from "./entities.js";
+import type { UmbControllerHost } from "@umbraco-cms/backoffice/controller-api";
+export declare class UePrefabChartPrefabsGeneratorController extends UePrefabGeneratorControllerBase<UePrefabChartPrefab, UeChartConfigUnionType> {
+    constructor(host: UmbControllerHost, callback?: () => unknown);
+    initializePrefabs(callback?: () => unknown): void;
+    generate<ConfigType extends UePrefabEntityBase>(prefabAlias?: UePrefabType, config?: ConfigType): ConfigType;
+    options: UePrefabCollection<UePrefabChartPrefab>;
+}

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

@@ -0,0 +1,253 @@
+import { UePrefabGeneratorControllerBase } from "../../prefab-generator-base.controller.js";
+export class UePrefabChartPrefabsGeneratorController extends UePrefabGeneratorControllerBase {
+    constructor(host, callback) {
+        super(host, callback);
+        this.options = {
+            ["pageviews"]: {
+                metrics: ["pageviews"],
+                unit: "pageviews",
+                unitSingular: "pageview",
+            },
+            ["pageviews_withsubpages"]: {
+                metrics: ["pageviewsWithSubpages"],
+                unit: "pageviews",
+                unitSingular: "pageview",
+            },
+            ["referrals"]: {
+                metrics: ["pageviews"],
+                unit: "pageviews",
+                unitSingular: "pageview",
+            },
+            ["devicetypes"]: {
+                metrics: ["pageviews"],
+                dimensions: ["deviceCategory"],
+                type: "bar",
+                stack: true,
+                unit: "pageviews",
+                unitSingular: "pageview",
+            },
+            ["devicetypes_page"]: {
+                metrics: ["pageviews"],
+                dimensions: ["deviceCategory"],
+                type: "bar",
+                stack: true,
+                unit: "pageviews",
+                unitSingular: "pageview",
+            },
+            ["devicetypes_page_withsubpages"]: {
+                metrics: ["pageviewsWithSubpages"],
+                dimensions: ["deviceCategory"],
+                type: "bar",
+                stack: true,
+                unit: "pageviews",
+                unitSingular: "pageview",
+            },
+            ["bots"]: {
+                metrics: ["pageviewsBot"],
+                unit: "pageviews",
+                unitSingular: "pageview",
+            },
+            ["goals"]: {
+                metrics: ["goalCompletionsAll"],
+                unit: "goal completions",
+                unitSingular: "goal completion",
+            },
+            ["visitors"]: {
+                realtime: true,
+                metrics: ["visitors"],
+                dimensions: ["usertype"],
+                type: "bar",
+                stack: true,
+                unit: "visitors",
+                unitSingular: "visitor",
+            },
+            ["pagevisitors"]: {
+                realtime: true,
+                metrics: ["pageVisitors"],
+                dimensions: ["usertype"],
+                type: "bar",
+                stack: true,
+                unit: "visitors",
+                unitSingular: "visitor",
+            },
+            ["pagevisitors_withsubpages"]: {
+                realtime: true,
+                metrics: ["pageviewsWithSubpages"],
+                dimensions: ["usertype"],
+                type: "bar",
+                stack: true,
+                unit: "visitors",
+                unitSingular: "visitor",
+            },
+            ["sessions"]: {
+                metrics: ["sessions"],
+                unit: "sessions",
+                unitSingular: "session",
+            },
+            ["pagesessions"]: {
+                metrics: ["pageSessions"],
+                unit: "sessions",
+                unitSingular: "session",
+            },
+            ["pagesessions_withsubpages"]: {
+                metrics: ["pageSessionsWithSubpages"],
+                unit: "sessions",
+                unitSingular: "session",
+            },
+            ["events"]: {
+                metrics: ["totalEvents"],
+                unit: "events",
+                unitSingular: "event",
+            },
+            ["segmentinsights"]: {
+                realtime: true,
+                metrics: ["pageviews"],
+                dimensions: ["pageviewSegmentName"],
+                unit: "pageviews",
+                unitSingular: "pageview",
+            },
+            ["appliedsegmentinsights"]: {
+                realtime: true,
+                metrics: ["pageviews"],
+                dimensions: ["pageviewAppliedSegmentName"],
+                filter: "pageviewAppliedSegmentName!~'(deleted segment:'", // Adds a NOT LIKE filter (DimensionFilterOperator.NR in MetricQueryBuilder) to exclude deleted segments
+                unit: "displays",
+                unitSingular: "display",
+            },
+            ["campaigns"]: {
+                // Total Pageviews for each campaign incl. the ones with no campaign
+                metrics: ["pageviews"],
+                unit: "entries",
+                unitSingular: "entry",
+            },
+            ["campaigns_page"]: {
+                // Total Pageviews (for this page) for each campaign incl. the ones with no campaign
+                metrics: ["pageviews"],
+                unit: "entries",
+                unitSingular: "entry",
+            },
+            ["videos"]: {
+                metrics: ["videoPlays"],
+                unit: "views",
+                unitSingular: "view",
+            },
+            ["umbracoformssubmissions"]: {
+                metrics: ["umbracoFormsSubmissions"],
+                unit: "submissions",
+                unitSingular: "submission",
+            },
+            ["locations"]: {
+                metrics: ["sessions"],
+                unit: "sessions",
+                unitSingular: "session",
+            },
+            ["locations_withsubpages"]: {
+                metrics: ["pageSessionsWithSubpages"],
+                unit: "sessions",
+                unitSingular: "session",
+            },
+            ["locations_page"]: {
+                metrics: ["pageSessions"],
+                unit: "sessions",
+                unitSingular: "session",
+            },
+            ["timeonpage"]: {
+                metrics: ["avgTimeOnPage", "avgEngagedTimeOnPage"],
+                unit: "seconds",
+                unitSingular: "second",
+            },
+            ["segmentpageviewcoverage"]: {
+                type: "bar",
+                stack: true,
+                unit: "pageviews",
+                unitSingular: "pageview",
+                metrics: ["activeSegmentPageviews", "inactiveSegmentPageviews"],
+            },
+            ["segmentsessioncoverage"]: {
+                type: "bar",
+                stack: true,
+                unit: "sessions",
+                unitSingular: "session",
+                metrics: ["activeSegmentSessions", "inactiveSegmentSessions"],
+            },
+            ["segmentprofilecoverage"]: {
+                type: "bar",
+                stack: true,
+                unit: "profiles",
+                unitSingular: "profile",
+                metrics: ["activeSegmentProfiles", "inactiveSegmentProfiles"],
+            },
+            ["segmentpersonalizationpageviewcoverage"]: {
+                type: "bar",
+                stack: true,
+                unit: "pageviews",
+                unitSingular: "pageview",
+                metrics: [
+                    "activePersonalizedSegmentPageviews",
+                    "inactivePersonalizedSegmentPageviews",
+                ],
+            },
+            ["segmentpersonalizationsessioncoverage"]: {
+                type: "bar",
+                stack: true,
+                unit: "sessions",
+                unitSingular: "session",
+                metrics: [
+                    "activePersonalizedSegmentSessions",
+                    "inactivePersonalizedSegmentSessions",
+                ],
+            },
+            ["segmentpersonalizationprofilecoverage"]: {
+                type: "bar",
+                stack: true,
+                unit: "profiles",
+                unitSingular: "profile",
+                metrics: [
+                    "activePersonalizedSegmentProfiles",
+                    "inactivePersonalizedSegmentProfiles",
+                ],
+            },
+            ["searches"]: {
+                type: "bar",
+                stack: true,
+                unit: "search volume",
+                unitSingular: "search volume",
+                metrics: ["searchVolume"],
+            },
+            ["searches_withsubpages"]: {
+                type: "bar",
+                stack: true,
+                unit: "search volume",
+                unitSingular: "search volume",
+                metrics: ["searchVolumeWithSubpages"],
+            },
+        };
+    }
+    initializePrefabs(callback) {
+        if (this.dataGenerationEnabled !== true) {
+            // A few odd exceptions that we unfortunately have to hardcode
+            this.options.referrals.filter = "hostname!=referralHostname";
+            this.options.campaigns.filter = "campaign!=''";
+            this.options.bots.metrics = ["pageviews"];
+            // Reporting DataGeneration is not Enabled!
+            this.enableRealTimeReporting();
+            // Don't filter by person on these queries
+            delete this.options.goals.filter;
+            this.options.bots.filter = "visitorType=='bot';bot!=''";
+        }
+        callback?.();
+    }
+    generate(prefabAlias, config) {
+        this.getPrefabFromConfiguration(prefabAlias);
+        this.config = config ?? {};
+        this.determineAllMetrics();
+        this.setPrefabProperty("type", "line");
+        this.setPrefabProperty("dimensions", ["date"], true);
+        this.setPrefabProperty("stack", false);
+        this.setPrefabProperty("unit");
+        this.setPrefabProperty("unitSingular");
+        this.setPrefabProperty("realtime", false);
+        this.setPrefabProperty("trendIndex", null);
+        return this.config;
+    }
+}

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

@@ -0,0 +1,15 @@
+import type { UePrefabType } from "../../entities.js";
+import { UeAnalyticsChartElement } from "./analytics-chart.element.js";
+import type { UeChartConfigUnionType } from "./entities.js";
+declare const elementName = "ue-prefab-chart";
+export declare class UePrefabChartElement extends UeAnalyticsChartElement {
+    #private;
+    set alias(value: UePrefabType | undefined);
+    config: Partial<UeChartConfigUnionType>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UePrefabChartElement;
+    }
+}
+export {};

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

@@ -0,0 +1,41 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { UeAnalyticsChartElement } from "./analytics-chart.element.js";
+import { UePrefabChartPrefabsGeneratorController } from "./prefab-chart-prefabs-generator.controller.js";
+import { customElement, property } from "@umbraco-cms/backoffice/external/lit";
+const elementName = "ue-prefab-chart";
+let UePrefabChartElement = class UePrefabChartElement extends UeAnalyticsChartElement {
+    constructor() {
+        super(...arguments);
+        this.#prefabsGenerator = new UePrefabChartPrefabsGeneratorController(this);
+        this.config = {
+            size: "large",
+            type: "line",
+            showAnnotations: true,
+            isFullHeight: false,
+            showPercentages: false,
+            pageSize: 999,
+            page: 1,
+        };
+    }
+    #prefabsGenerator;
+    set alias(value) {
+        if (!value)
+            return;
+        this.config = this.#prefabsGenerator.generate(value, this.config);
+    }
+};
+__decorate([
+    property()
+], UePrefabChartElement.prototype, "alias", null);
+__decorate([
+    property({ type: Object })
+], UePrefabChartElement.prototype, "config", void 0);
+UePrefabChartElement = __decorate([
+    customElement(elementName)
+], UePrefabChartElement);
+export { UePrefabChartElement };

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

@@ -0,0 +1,27 @@
+import { type UeHeatmapData } from "../../entities.js";
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+import type { HeatmapDeviceTypeModel } from "../../../generated/index.js";
+declare const elementName = "ue-heatmap";
+export declare class UeHeatmapElement extends UmbLitElement {
+    #private;
+    set data(value: UeHeatmapData | undefined);
+    set querystring(value: string | undefined);
+    set deviceType(value: HeatmapDeviceTypeModel);
+    private _averageFold;
+    private _pageHeight;
+    private _documentUrl;
+    private _defaultCulture;
+    private _iframeBox?;
+    private _iframe?;
+    private _indicatorBox?;
+    constructor();
+    protected firstUpdated(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeHeatmapElement;
+    }
+}
+export {};