@eric-emg/symphiq-components 1.2.242 → 1.2.244
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/symphiq-components.mjs +496 -434
- package/fesm2022/symphiq-components.mjs.map +1 -1
- package/index.d.ts +38 -30
- package/index.d.ts.map +1 -1
- package/package.json +2 -2
- package/styles.css +1 -1
|
@@ -32218,7 +32218,7 @@ class ShadowElevationDirective {
|
|
|
32218
32218
|
selector: '[symphiqShadowElevation]',
|
|
32219
32219
|
standalone: true
|
|
32220
32220
|
}]
|
|
32221
|
-
}], () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: ScrollDepthService }, { type:
|
|
32221
|
+
}], () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: ScrollDepthService }, { type: undefined, decorators: [{
|
|
32222
32222
|
type: Inject,
|
|
32223
32223
|
args: [PLATFORM_ID]
|
|
32224
32224
|
}] }], { scrollContainer: [{
|
|
@@ -47226,7 +47226,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
|
|
|
47226
47226
|
// Get the scrollable element once for all features
|
|
47227
47227
|
// Priority 1: Use the scrollElement passed directly from parent (preferred method)
|
|
47228
47228
|
// Priority 2: Fall back to querying by scrollContainerId (legacy method)
|
|
47229
|
-
|
|
47229
|
+
const scrollElement = this.scrollElement() || null;
|
|
47230
47230
|
let elementSource = 'none';
|
|
47231
47231
|
if (scrollElement) {
|
|
47232
47232
|
elementSource = 'passed-from-parent';
|
|
@@ -54798,8 +54798,7 @@ function extractProjectedValue(pacingResponse, metricEnum) {
|
|
|
54798
54798
|
if (!pacingResponse) {
|
|
54799
54799
|
return null;
|
|
54800
54800
|
}
|
|
54801
|
-
const
|
|
54802
|
-
const projectedMetric = resp.projectedMetricValues?.find((m) => m.metric === metricEnum);
|
|
54801
|
+
const projectedMetric = pacingResponse.projectedMetricValues?.find((m) => m.metric === metricEnum);
|
|
54803
54802
|
if (!projectedMetric?.value) {
|
|
54804
54803
|
return null;
|
|
54805
54804
|
}
|
|
@@ -57017,53 +57016,28 @@ var lineChart_component = /*#__PURE__*/Object.freeze({
|
|
|
57017
57016
|
});
|
|
57018
57017
|
|
|
57019
57018
|
const _forTrack0$i = ($index, $item) => $item.metric;
|
|
57020
|
-
function
|
|
57021
|
-
|
|
57022
|
-
i0.ɵɵelementStart(0, "button", 29);
|
|
57023
|
-
i0.ɵɵlistener("click", function MetricReportModalComponent_Conditional_0_Conditional_11_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleDefinition()); });
|
|
57024
|
-
i0.ɵɵnamespaceSVG();
|
|
57025
|
-
i0.ɵɵelementStart(1, "svg", 30);
|
|
57026
|
-
i0.ɵɵelement(2, "path", 31);
|
|
57027
|
-
i0.ɵɵelementEnd();
|
|
57028
|
-
i0.ɵɵnamespaceHTML();
|
|
57029
|
-
i0.ɵɵelementStart(3, "span");
|
|
57030
|
-
i0.ɵɵtext(4);
|
|
57031
|
-
i0.ɵɵelementEnd();
|
|
57019
|
+
function MetricReportModalComponent_Conditional_0_Conditional_12_Template(rf, ctx) { if (rf & 1) {
|
|
57020
|
+
i0.ɵɵelementStart(0, "button", 11);
|
|
57032
57021
|
i0.ɵɵnamespaceSVG();
|
|
57033
|
-
i0.ɵɵelementStart(
|
|
57034
|
-
i0.ɵɵelement(
|
|
57022
|
+
i0.ɵɵelementStart(1, "svg", 32);
|
|
57023
|
+
i0.ɵɵelement(2, "path", 33);
|
|
57035
57024
|
i0.ɵɵelementEnd()();
|
|
57036
57025
|
} if (rf & 2) {
|
|
57037
57026
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
57038
|
-
i0.ɵɵproperty("ngClass", ctx_r1.
|
|
57039
|
-
i0.ɵɵadvance(4);
|
|
57040
|
-
i0.ɵɵtextInterpolate1("What is ", ctx_r1.metricTitle(), "?");
|
|
57041
|
-
i0.ɵɵadvance();
|
|
57042
|
-
i0.ɵɵclassProp("rotate-180", ctx_r1.showDefinition());
|
|
57027
|
+
i0.ɵɵproperty("ngClass", ctx_r1.headerInfoIconClasses())("libSymphiqTooltip", ctx_r1.getMarkdownTooltipContent(ctx_r1.metricData().description, ctx_r1.metricTitle()));
|
|
57043
57028
|
} }
|
|
57044
|
-
function
|
|
57045
|
-
i0.ɵɵ
|
|
57046
|
-
i0.ɵɵtext(1);
|
|
57047
|
-
i0.ɵɵelementEnd();
|
|
57048
|
-
} if (rf & 2) {
|
|
57049
|
-
let tmp_3_0;
|
|
57050
|
-
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
57051
|
-
i0.ɵɵproperty("ngClass", ctx_r1.definitionBoxClasses());
|
|
57052
|
-
i0.ɵɵadvance();
|
|
57053
|
-
i0.ɵɵtextInterpolate1(" ", (tmp_3_0 = ctx_r1.metricData()) == null ? null : tmp_3_0.description, " ");
|
|
57054
|
-
} }
|
|
57055
|
-
function MetricReportModalComponent_Conditional_0_Conditional_27_Template(rf, ctx) { if (rf & 1) {
|
|
57056
|
-
i0.ɵɵelement(0, "symphiq-target-change-badge", 20);
|
|
57029
|
+
function MetricReportModalComponent_Conditional_0_Conditional_32_Template(rf, ctx) { if (rf & 1) {
|
|
57030
|
+
i0.ɵɵelement(0, "symphiq-target-change-badge", 23);
|
|
57057
57031
|
} if (rf & 2) {
|
|
57058
57032
|
let tmp_4_0;
|
|
57059
57033
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
57060
57034
|
i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("percentageChange", ctx_r1.ytdChangePercentage())("metric", ((tmp_4_0 = ctx_r1.metricData()) == null ? null : tmp_4_0.metric) || "")("priorYear", ctx_r1.priorYear())("isCompact", true);
|
|
57061
57035
|
} }
|
|
57062
|
-
function
|
|
57063
|
-
i0.ɵɵelementStart(0, "div")(1, "p",
|
|
57036
|
+
function MetricReportModalComponent_Conditional_0_Conditional_48_Template(rf, ctx) { if (rf & 1) {
|
|
57037
|
+
i0.ɵɵelementStart(0, "div")(1, "p", 24);
|
|
57064
57038
|
i0.ɵɵtext(2);
|
|
57065
57039
|
i0.ɵɵelementEnd();
|
|
57066
|
-
i0.ɵɵelementStart(3, "p",
|
|
57040
|
+
i0.ɵɵelementStart(3, "p", 22);
|
|
57067
57041
|
i0.ɵɵtext(4);
|
|
57068
57042
|
i0.ɵɵelementEnd();
|
|
57069
57043
|
i0.ɵɵelement(5, "symphiq-pacing-status-badge", 34);
|
|
@@ -57082,11 +57056,11 @@ function MetricReportModalComponent_Conditional_0_Conditional_38_Template(rf, ct
|
|
|
57082
57056
|
i0.ɵɵadvance();
|
|
57083
57057
|
i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("pacingPercentage", ctx_r1.pacingInfo().pacingPercentage)("status", ctx_r1.pacingInfo().status)("showAsFullText", false)("isCompact", true)("showEmphasizedPercentage", true);
|
|
57084
57058
|
} }
|
|
57085
|
-
function
|
|
57086
|
-
i0.ɵɵelementStart(0, "div",
|
|
57059
|
+
function MetricReportModalComponent_Conditional_0_Conditional_64_Template(rf, ctx) { if (rf & 1) {
|
|
57060
|
+
i0.ɵɵelementStart(0, "div", 25);
|
|
57087
57061
|
i0.ɵɵelement(1, "symphiq-pacing-status-badge", 34);
|
|
57088
57062
|
i0.ɵɵelementEnd();
|
|
57089
|
-
i0.ɵɵelementStart(2, "div",
|
|
57063
|
+
i0.ɵɵelementStart(2, "div", 25)(3, "p", 28);
|
|
57090
57064
|
i0.ɵɵtext(4);
|
|
57091
57065
|
i0.ɵɵelementEnd()();
|
|
57092
57066
|
i0.ɵɵelementStart(5, "div", 35)(6, "div", 36)(7, "span");
|
|
@@ -57116,22 +57090,22 @@ function MetricReportModalComponent_Conditional_0_Conditional_54_Template(rf, ct
|
|
|
57116
57090
|
i0.ɵɵstyleProp("width", ctx_r1.Math.min(ctx_r1.progressToTarget(), 100), "%");
|
|
57117
57091
|
i0.ɵɵproperty("ngClass", ctx_r1.progressBarFillClasses());
|
|
57118
57092
|
} }
|
|
57119
|
-
function
|
|
57093
|
+
function MetricReportModalComponent_Conditional_0_Conditional_65_For_15_Conditional_5_Template(rf, ctx) { if (rf & 1) {
|
|
57120
57094
|
i0.ɵɵelementStart(0, "button", 48);
|
|
57121
57095
|
i0.ɵɵnamespaceSVG();
|
|
57122
57096
|
i0.ɵɵelementStart(1, "svg", 54);
|
|
57123
|
-
i0.ɵɵelement(2, "path",
|
|
57097
|
+
i0.ɵɵelement(2, "path", 33);
|
|
57124
57098
|
i0.ɵɵelementEnd()();
|
|
57125
57099
|
} if (rf & 2) {
|
|
57126
|
-
const
|
|
57100
|
+
const metric_r3 = i0.ɵɵnextContext().$implicit;
|
|
57127
57101
|
const ctx_r1 = i0.ɵɵnextContext(3);
|
|
57128
|
-
i0.ɵɵproperty("ngClass", ctx_r1.infoIconClasses())("libSymphiqTooltip", ctx_r1.getMarkdownTooltipContent(
|
|
57102
|
+
i0.ɵɵproperty("ngClass", ctx_r1.infoIconClasses())("libSymphiqTooltip", ctx_r1.getMarkdownTooltipContent(metric_r3.description, ctx_r1.getMetricTitle(metric_r3)));
|
|
57129
57103
|
} }
|
|
57130
|
-
function
|
|
57104
|
+
function MetricReportModalComponent_Conditional_0_Conditional_65_For_15_Template(rf, ctx) { if (rf & 1) {
|
|
57131
57105
|
i0.ɵɵelementStart(0, "tr", 44)(1, "td", 45)(2, "div", 46)(3, "span", 47);
|
|
57132
57106
|
i0.ɵɵtext(4);
|
|
57133
57107
|
i0.ɵɵelementEnd();
|
|
57134
|
-
i0.ɵɵconditionalCreate(5,
|
|
57108
|
+
i0.ɵɵconditionalCreate(5, MetricReportModalComponent_Conditional_0_Conditional_65_For_15_Conditional_5_Template, 3, 2, "button", 48);
|
|
57135
57109
|
i0.ɵɵelementEnd()();
|
|
57136
57110
|
i0.ɵɵelementStart(6, "td", 49)(7, "span", 50);
|
|
57137
57111
|
i0.ɵɵtext(8);
|
|
@@ -57144,25 +57118,23 @@ function MetricReportModalComponent_Conditional_0_Conditional_55_For_15_Template
|
|
|
57144
57118
|
i0.ɵɵelement(14, "path", 53);
|
|
57145
57119
|
i0.ɵɵelementEnd()()()();
|
|
57146
57120
|
} if (rf & 2) {
|
|
57147
|
-
const
|
|
57121
|
+
const metric_r3 = ctx.$implicit;
|
|
57148
57122
|
const ctx_r1 = i0.ɵɵnextContext(3);
|
|
57149
57123
|
i0.ɵɵproperty("ngClass", ctx_r1.tableRowClasses());
|
|
57150
57124
|
i0.ɵɵadvance(4);
|
|
57151
|
-
i0.ɵɵtextInterpolate(ctx_r1.getMetricTitle(
|
|
57125
|
+
i0.ɵɵtextInterpolate(ctx_r1.getMetricTitle(metric_r3));
|
|
57152
57126
|
i0.ɵɵadvance();
|
|
57153
|
-
i0.ɵɵconditional(
|
|
57127
|
+
i0.ɵɵconditional(metric_r3.description ? 5 : -1);
|
|
57154
57128
|
i0.ɵɵadvance(2);
|
|
57155
57129
|
i0.ɵɵproperty("ngClass", ctx_r1.targetValueClasses());
|
|
57156
57130
|
i0.ɵɵadvance();
|
|
57157
|
-
i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(
|
|
57131
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(metric_r3.targetValue, metric_r3.metric, false), " ");
|
|
57158
57132
|
i0.ɵɵadvance(4);
|
|
57159
|
-
i0.ɵɵtextInterpolate1(" ", ctx_r1.formatPercentage(ctx_r1.Math.abs(
|
|
57160
|
-
i0.ɵɵadvance();
|
|
57161
|
-
i0.ɵɵ
|
|
57162
|
-
i0.ɵɵadvance();
|
|
57163
|
-
i0.ɵɵattribute("d", metric_r4.percentageIncrease >= 0 ? "M5 10l7-7m0 0l7 7m-7-7v18" : "M19 14l-7 7m0 0l-7-7m7 7V3");
|
|
57133
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r1.formatPercentage(ctx_r1.Math.abs(metric_r3.percentageIncrease), 1), " ");
|
|
57134
|
+
i0.ɵɵadvance(2);
|
|
57135
|
+
i0.ɵɵattribute("d", metric_r3.percentageIncrease >= 0 ? "M5 10l7-7m0 0l7 7m-7-7v18" : "M19 14l-7 7m0 0l-7-7m7 7V3");
|
|
57164
57136
|
} }
|
|
57165
|
-
function
|
|
57137
|
+
function MetricReportModalComponent_Conditional_0_Conditional_65_Template(rf, ctx) { if (rf & 1) {
|
|
57166
57138
|
i0.ɵɵelementStart(0, "div", 16)(1, "h4", 17);
|
|
57167
57139
|
i0.ɵɵtext(2, " Contributing Metrics ");
|
|
57168
57140
|
i0.ɵɵelementEnd();
|
|
@@ -57173,10 +57145,10 @@ function MetricReportModalComponent_Conditional_0_Conditional_55_Template(rf, ct
|
|
|
57173
57145
|
i0.ɵɵtext(10, "Target");
|
|
57174
57146
|
i0.ɵɵelementEnd();
|
|
57175
57147
|
i0.ɵɵelementStart(11, "th", 43);
|
|
57176
|
-
i0.ɵɵtext(12, "
|
|
57148
|
+
i0.ɵɵtext(12, "Improve by");
|
|
57177
57149
|
i0.ɵɵelementEnd()()();
|
|
57178
57150
|
i0.ɵɵelementStart(13, "tbody");
|
|
57179
|
-
i0.ɵɵrepeaterCreate(14,
|
|
57151
|
+
i0.ɵɵrepeaterCreate(14, MetricReportModalComponent_Conditional_0_Conditional_65_For_15_Template, 15, 7, "tr", 44, _forTrack0$i);
|
|
57180
57152
|
i0.ɵɵelementEnd()()()();
|
|
57181
57153
|
} if (rf & 2) {
|
|
57182
57154
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
@@ -57188,8 +57160,8 @@ function MetricReportModalComponent_Conditional_0_Conditional_55_Template(rf, ct
|
|
|
57188
57160
|
i0.ɵɵadvance(8);
|
|
57189
57161
|
i0.ɵɵrepeater(ctx_r1.contributingMetrics());
|
|
57190
57162
|
} }
|
|
57191
|
-
function
|
|
57192
|
-
i0.ɵɵelementStart(0, "div",
|
|
57163
|
+
function MetricReportModalComponent_Conditional_0_Conditional_66_Template(rf, ctx) { if (rf & 1) {
|
|
57164
|
+
i0.ɵɵelementStart(0, "div", 29)(1, "h4", 17);
|
|
57193
57165
|
i0.ɵɵtext(2, " Pace ");
|
|
57194
57166
|
i0.ɵɵelementEnd();
|
|
57195
57167
|
i0.ɵɵelementStart(3, "div", 55);
|
|
@@ -57221,12 +57193,11 @@ function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
|
|
|
57221
57193
|
i0.ɵɵelementEnd();
|
|
57222
57194
|
i0.ɵɵelementStart(5, "div", 5);
|
|
57223
57195
|
i0.ɵɵlistener("click", function MetricReportModalComponent_Conditional_0_Template_div_click_5_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); });
|
|
57224
|
-
i0.ɵɵelementStart(6, "div", 6)(7, "div", 7)(8, "div", 8)(9, "
|
|
57225
|
-
i0.ɵɵtext(
|
|
57226
|
-
i0.ɵɵelementEnd();
|
|
57227
|
-
i0.ɵɵconditionalCreate(11, MetricReportModalComponent_Conditional_0_Conditional_11_Template, 7, 4, "button", 10);
|
|
57228
|
-
i0.ɵɵconditionalCreate(12, MetricReportModalComponent_Conditional_0_Conditional_12_Template, 2, 2, "div", 11);
|
|
57196
|
+
i0.ɵɵelementStart(6, "div", 6)(7, "div", 7)(8, "div", 8)(9, "div", 9)(10, "h3", 10);
|
|
57197
|
+
i0.ɵɵtext(11);
|
|
57229
57198
|
i0.ɵɵelementEnd();
|
|
57199
|
+
i0.ɵɵconditionalCreate(12, MetricReportModalComponent_Conditional_0_Conditional_12_Template, 3, 2, "button", 11);
|
|
57200
|
+
i0.ɵɵelementEnd()();
|
|
57230
57201
|
i0.ɵɵelementStart(13, "button", 12);
|
|
57231
57202
|
i0.ɵɵlistener("click", function MetricReportModalComponent_Conditional_0_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.close()); });
|
|
57232
57203
|
i0.ɵɵnamespaceSVG();
|
|
@@ -57239,63 +57210,74 @@ function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
|
|
|
57239
57210
|
i0.ɵɵelementStart(18, "div", 16)(19, "h4", 17);
|
|
57240
57211
|
i0.ɵɵtext(20, " At a Glance ");
|
|
57241
57212
|
i0.ɵɵelementEnd();
|
|
57242
|
-
i0.ɵɵelementStart(21, "div", 18)(22, "div")(23, "
|
|
57243
|
-
i0.ɵɵtext(
|
|
57213
|
+
i0.ɵɵelementStart(21, "div", 18)(22, "div")(23, "div", 19)(24, "p", 20);
|
|
57214
|
+
i0.ɵɵtext(25, " Year to date ");
|
|
57244
57215
|
i0.ɵɵelementEnd();
|
|
57245
|
-
i0.ɵɵelementStart(
|
|
57246
|
-
i0.ɵɵtext(
|
|
57216
|
+
i0.ɵɵelementStart(26, "p", 21);
|
|
57217
|
+
i0.ɵɵtext(27);
|
|
57247
57218
|
i0.ɵɵelementEnd();
|
|
57248
|
-
i0.ɵɵ
|
|
57219
|
+
i0.ɵɵelementStart(28, "p", 21);
|
|
57220
|
+
i0.ɵɵtext(29);
|
|
57221
|
+
i0.ɵɵelementEnd()();
|
|
57222
|
+
i0.ɵɵelementStart(30, "p", 22);
|
|
57223
|
+
i0.ɵɵtext(31);
|
|
57249
57224
|
i0.ɵɵelementEnd();
|
|
57250
|
-
i0.ɵɵ
|
|
57251
|
-
i0.ɵɵ
|
|
57225
|
+
i0.ɵɵconditionalCreate(32, MetricReportModalComponent_Conditional_0_Conditional_32_Template, 1, 5, "symphiq-target-change-badge", 23);
|
|
57226
|
+
i0.ɵɵelementEnd();
|
|
57227
|
+
i0.ɵɵelementStart(33, "div")(34, "div", 19)(35, "p", 20);
|
|
57228
|
+
i0.ɵɵtext(36, " Same period last year ");
|
|
57252
57229
|
i0.ɵɵelementEnd();
|
|
57253
|
-
i0.ɵɵelementStart(
|
|
57254
|
-
i0.ɵɵtext(
|
|
57230
|
+
i0.ɵɵelementStart(37, "p", 21);
|
|
57231
|
+
i0.ɵɵtext(38);
|
|
57232
|
+
i0.ɵɵelementEnd();
|
|
57233
|
+
i0.ɵɵelementStart(39, "p", 21);
|
|
57234
|
+
i0.ɵɵtext(40);
|
|
57255
57235
|
i0.ɵɵelementEnd()();
|
|
57256
|
-
i0.ɵɵelementStart(
|
|
57257
|
-
i0.ɵɵtext(
|
|
57236
|
+
i0.ɵɵelementStart(41, "p", 10);
|
|
57237
|
+
i0.ɵɵtext(42);
|
|
57238
|
+
i0.ɵɵelementEnd()();
|
|
57239
|
+
i0.ɵɵelementStart(43, "div")(44, "p", 24);
|
|
57240
|
+
i0.ɵɵtext(45);
|
|
57258
57241
|
i0.ɵɵelementEnd();
|
|
57259
|
-
i0.ɵɵelementStart(
|
|
57260
|
-
i0.ɵɵtext(
|
|
57242
|
+
i0.ɵɵelementStart(46, "p", 10);
|
|
57243
|
+
i0.ɵɵtext(47);
|
|
57261
57244
|
i0.ɵɵelementEnd()();
|
|
57262
|
-
i0.ɵɵconditionalCreate(
|
|
57263
|
-
i0.ɵɵelementStart(
|
|
57264
|
-
i0.ɵɵtext(
|
|
57245
|
+
i0.ɵɵconditionalCreate(48, MetricReportModalComponent_Conditional_0_Conditional_48_Template, 6, 10, "div");
|
|
57246
|
+
i0.ɵɵelementStart(49, "div")(50, "p", 24);
|
|
57247
|
+
i0.ɵɵtext(51);
|
|
57265
57248
|
i0.ɵɵelementEnd();
|
|
57266
|
-
i0.ɵɵelementStart(
|
|
57267
|
-
i0.ɵɵtext(
|
|
57249
|
+
i0.ɵɵelementStart(52, "p", 10);
|
|
57250
|
+
i0.ɵɵtext(53);
|
|
57268
57251
|
i0.ɵɵelementEnd()()()();
|
|
57269
|
-
i0.ɵɵelementStart(
|
|
57270
|
-
i0.ɵɵtext(
|
|
57252
|
+
i0.ɵɵelementStart(54, "div", 16)(55, "h4", 17);
|
|
57253
|
+
i0.ɵɵtext(56, " Target Analysis ");
|
|
57271
57254
|
i0.ɵɵelementEnd();
|
|
57272
|
-
i0.ɵɵelementStart(
|
|
57273
|
-
i0.ɵɵtext(
|
|
57255
|
+
i0.ɵɵelementStart(57, "div", 25)(58, "p", 26);
|
|
57256
|
+
i0.ɵɵtext(59, " Your Target ");
|
|
57274
57257
|
i0.ɵɵelementEnd();
|
|
57275
|
-
i0.ɵɵelementStart(
|
|
57276
|
-
i0.ɵɵtext(
|
|
57258
|
+
i0.ɵɵelementStart(60, "p", 27);
|
|
57259
|
+
i0.ɵɵtext(61);
|
|
57277
57260
|
i0.ɵɵelementEnd();
|
|
57278
|
-
i0.ɵɵelementStart(
|
|
57279
|
-
i0.ɵɵtext(
|
|
57261
|
+
i0.ɵɵelementStart(62, "p", 28);
|
|
57262
|
+
i0.ɵɵtext(63);
|
|
57280
57263
|
i0.ɵɵelementEnd()();
|
|
57281
|
-
i0.ɵɵconditionalCreate(
|
|
57264
|
+
i0.ɵɵconditionalCreate(64, MetricReportModalComponent_Conditional_0_Conditional_64_Template, 13, 14);
|
|
57282
57265
|
i0.ɵɵelementEnd();
|
|
57283
|
-
i0.ɵɵconditionalCreate(
|
|
57284
|
-
i0.ɵɵconditionalCreate(
|
|
57266
|
+
i0.ɵɵconditionalCreate(65, MetricReportModalComponent_Conditional_0_Conditional_65_Template, 16, 3, "div", 16);
|
|
57267
|
+
i0.ɵɵconditionalCreate(66, MetricReportModalComponent_Conditional_0_Conditional_66_Template, 7, 8, "div", 29);
|
|
57285
57268
|
i0.ɵɵelementEnd();
|
|
57286
|
-
i0.ɵɵelementStart(
|
|
57287
|
-
i0.ɵɵlistener("click", function
|
|
57288
|
-
i0.ɵɵtext(
|
|
57269
|
+
i0.ɵɵelementStart(67, "div", 30)(68, "button", 31);
|
|
57270
|
+
i0.ɵɵlistener("click", function MetricReportModalComponent_Conditional_0_Template_button_click_68_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.close()); });
|
|
57271
|
+
i0.ɵɵtext(69, " Close ");
|
|
57289
57272
|
i0.ɵɵelementEnd()()()()();
|
|
57290
57273
|
} if (rf & 2) {
|
|
57291
57274
|
let tmp_8_0;
|
|
57292
|
-
let
|
|
57293
|
-
let
|
|
57294
|
-
let tmp_22_0;
|
|
57295
|
-
let tmp_26_0;
|
|
57275
|
+
let tmp_19_0;
|
|
57276
|
+
let tmp_27_0;
|
|
57296
57277
|
let tmp_31_0;
|
|
57297
57278
|
let tmp_36_0;
|
|
57298
|
-
let
|
|
57279
|
+
let tmp_41_0;
|
|
57280
|
+
let tmp_43_0;
|
|
57299
57281
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
57300
57282
|
i0.ɵɵadvance(2);
|
|
57301
57283
|
i0.ɵɵproperty("ngClass", ctx_r1.backdropClasses())("@fadeIn", undefined);
|
|
@@ -57303,14 +57285,12 @@ function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
|
|
|
57303
57285
|
i0.ɵɵproperty("ngClass", ctx_r1.modalContainerClasses())("@slideUpFade", undefined);
|
|
57304
57286
|
i0.ɵɵadvance();
|
|
57305
57287
|
i0.ɵɵproperty("ngClass", ctx_r1.headerClasses());
|
|
57306
|
-
i0.ɵɵadvance(
|
|
57288
|
+
i0.ɵɵadvance(4);
|
|
57307
57289
|
i0.ɵɵproperty("ngClass", ctx_r1.titleClasses());
|
|
57308
57290
|
i0.ɵɵadvance();
|
|
57309
57291
|
i0.ɵɵtextInterpolate1(" ", ctx_r1.metricTitle(), " ");
|
|
57310
57292
|
i0.ɵɵadvance();
|
|
57311
|
-
i0.ɵɵconditional(((tmp_8_0 = ctx_r1.metricData()) == null ? null : tmp_8_0.description) ?
|
|
57312
|
-
i0.ɵɵadvance();
|
|
57313
|
-
i0.ɵɵconditional(ctx_r1.showDefinition() && ((tmp_9_0 = ctx_r1.metricData()) == null ? null : tmp_9_0.description) ? 12 : -1);
|
|
57293
|
+
i0.ɵɵconditional(((tmp_8_0 = ctx_r1.metricData()) == null ? null : tmp_8_0.description) ? 12 : -1);
|
|
57314
57294
|
i0.ɵɵadvance();
|
|
57315
57295
|
i0.ɵɵproperty("ngClass", ctx_r1.closeButtonClasses());
|
|
57316
57296
|
i0.ɵɵadvance(3);
|
|
@@ -57319,24 +57299,36 @@ function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
|
|
|
57319
57299
|
i0.ɵɵproperty("ngClass", ctx_r1.sectionCardClasses());
|
|
57320
57300
|
i0.ɵɵadvance();
|
|
57321
57301
|
i0.ɵɵproperty("ngClass", ctx_r1.sectionTitleClasses());
|
|
57322
|
-
i0.ɵɵadvance(
|
|
57302
|
+
i0.ɵɵadvance(5);
|
|
57323
57303
|
i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
|
|
57304
|
+
i0.ɵɵadvance(2);
|
|
57305
|
+
i0.ɵɵproperty("ngClass", ctx_r1.dateLabelClasses());
|
|
57306
|
+
i0.ɵɵadvance();
|
|
57307
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r1.ytdStartDate(), " ");
|
|
57324
57308
|
i0.ɵɵadvance();
|
|
57325
|
-
i0.ɵɵ
|
|
57309
|
+
i0.ɵɵproperty("ngClass", ctx_r1.dateLabelClasses());
|
|
57310
|
+
i0.ɵɵadvance();
|
|
57311
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r1.ytdEndDate(), " ");
|
|
57326
57312
|
i0.ɵɵadvance();
|
|
57327
57313
|
i0.ɵɵproperty("ngClass", ctx_r1.valueClasses());
|
|
57328
57314
|
i0.ɵɵadvance();
|
|
57329
|
-
i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(ctx_r1.ytdValue(), ((
|
|
57315
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(ctx_r1.ytdValue(), ((tmp_19_0 = ctx_r1.metricData()) == null ? null : tmp_19_0.metric) || ""), " ");
|
|
57330
57316
|
i0.ɵɵadvance();
|
|
57331
|
-
i0.ɵɵconditional(ctx_r1.ytdChangePercentage() !== null ?
|
|
57332
|
-
i0.ɵɵadvance(
|
|
57317
|
+
i0.ɵɵconditional(ctx_r1.ytdChangePercentage() !== null ? 32 : -1);
|
|
57318
|
+
i0.ɵɵadvance(3);
|
|
57333
57319
|
i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
|
|
57320
|
+
i0.ɵɵadvance(2);
|
|
57321
|
+
i0.ɵɵproperty("ngClass", ctx_r1.dateLabelClasses());
|
|
57322
|
+
i0.ɵɵadvance();
|
|
57323
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r1.priorYearStartDate(), " ");
|
|
57334
57324
|
i0.ɵɵadvance();
|
|
57335
|
-
i0.ɵɵ
|
|
57325
|
+
i0.ɵɵproperty("ngClass", ctx_r1.dateLabelClasses());
|
|
57326
|
+
i0.ɵɵadvance();
|
|
57327
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r1.priorYearEndDate(), " ");
|
|
57336
57328
|
i0.ɵɵadvance();
|
|
57337
57329
|
i0.ɵɵproperty("ngClass", ctx_r1.valueClasses());
|
|
57338
57330
|
i0.ɵɵadvance();
|
|
57339
|
-
i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(ctx_r1.samePeriodLastYearValue(), ((
|
|
57331
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(ctx_r1.samePeriodLastYearValue(), ((tmp_27_0 = ctx_r1.metricData()) == null ? null : tmp_27_0.metric) || ""), " ");
|
|
57340
57332
|
i0.ɵɵadvance(2);
|
|
57341
57333
|
i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
|
|
57342
57334
|
i0.ɵɵadvance();
|
|
@@ -57344,9 +57336,9 @@ function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
|
|
|
57344
57336
|
i0.ɵɵadvance();
|
|
57345
57337
|
i0.ɵɵproperty("ngClass", ctx_r1.valueClasses());
|
|
57346
57338
|
i0.ɵɵadvance();
|
|
57347
|
-
i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(((
|
|
57339
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(((tmp_31_0 = ctx_r1.metricData()) == null ? null : tmp_31_0.currentValue) || 0, ((tmp_31_0 = ctx_r1.metricData()) == null ? null : tmp_31_0.metric) || ""), " ");
|
|
57348
57340
|
i0.ɵɵadvance();
|
|
57349
|
-
i0.ɵɵconditional(ctx_r1.pacingInfo() ?
|
|
57341
|
+
i0.ɵɵconditional(ctx_r1.pacingInfo() ? 48 : -1);
|
|
57350
57342
|
i0.ɵɵadvance(2);
|
|
57351
57343
|
i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
|
|
57352
57344
|
i0.ɵɵadvance();
|
|
@@ -57354,7 +57346,7 @@ function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
|
|
|
57354
57346
|
i0.ɵɵadvance();
|
|
57355
57347
|
i0.ɵɵproperty("ngClass", ctx_r1.targetValueClasses());
|
|
57356
57348
|
i0.ɵɵadvance();
|
|
57357
|
-
i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(((
|
|
57349
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(((tmp_36_0 = ctx_r1.metricData()) == null ? null : tmp_36_0.targetValue) || 0, ((tmp_36_0 = ctx_r1.metricData()) == null ? null : tmp_36_0.metric) || "", false), " ");
|
|
57358
57350
|
i0.ɵɵadvance();
|
|
57359
57351
|
i0.ɵɵproperty("ngClass", ctx_r1.sectionCardClasses());
|
|
57360
57352
|
i0.ɵɵadvance();
|
|
@@ -57364,17 +57356,17 @@ function MetricReportModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
|
|
|
57364
57356
|
i0.ɵɵadvance(2);
|
|
57365
57357
|
i0.ɵɵproperty("ngClass", ctx_r1.targetValueClasses());
|
|
57366
57358
|
i0.ɵɵadvance();
|
|
57367
|
-
i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(((
|
|
57359
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(((tmp_41_0 = ctx_r1.metricData()) == null ? null : tmp_41_0.targetValue) || 0, ((tmp_41_0 = ctx_r1.metricData()) == null ? null : tmp_41_0.metric) || "", false), " ");
|
|
57368
57360
|
i0.ɵɵadvance();
|
|
57369
57361
|
i0.ɵɵproperty("ngClass", ctx_r1.descriptionClasses());
|
|
57370
57362
|
i0.ɵɵadvance();
|
|
57371
|
-
i0.ɵɵtextInterpolate4(" Your target represents a ", ctx_r1.formatPercentage(ctx_r1.Math.abs(((
|
|
57363
|
+
i0.ɵɵtextInterpolate4(" Your target represents a ", ctx_r1.formatPercentage(ctx_r1.Math.abs(((tmp_43_0 = ctx_r1.metricData()) == null ? null : tmp_43_0.percentageIncrease) || 0), 1), " ", (((tmp_43_0 = ctx_r1.metricData()) == null ? null : tmp_43_0.percentageIncrease) || 0) >= 0 ? "increase" : "decrease", " from your ", ctx_r1.priorYear(), " actual of ", ctx_r1.formatMetricValue(((tmp_43_0 = ctx_r1.metricData()) == null ? null : tmp_43_0.currentValue) || 0, ((tmp_43_0 = ctx_r1.metricData()) == null ? null : tmp_43_0.metric) || ""), ". ");
|
|
57372
57364
|
i0.ɵɵadvance();
|
|
57373
|
-
i0.ɵɵconditional(ctx_r1.pacingInfo() ?
|
|
57365
|
+
i0.ɵɵconditional(ctx_r1.pacingInfo() ? 64 : -1);
|
|
57374
57366
|
i0.ɵɵadvance();
|
|
57375
|
-
i0.ɵɵconditional(ctx_r1.contributingMetrics().length > 0 ?
|
|
57367
|
+
i0.ɵɵconditional(ctx_r1.contributingMetrics().length > 0 ? 65 : -1);
|
|
57376
57368
|
i0.ɵɵadvance();
|
|
57377
|
-
i0.ɵɵconditional(ctx_r1.pacingChartData() ?
|
|
57369
|
+
i0.ɵɵconditional(ctx_r1.pacingChartData() ? 66 : -1);
|
|
57378
57370
|
i0.ɵɵadvance();
|
|
57379
57371
|
i0.ɵɵproperty("ngClass", ctx_r1.footerClasses());
|
|
57380
57372
|
i0.ɵɵadvance();
|
|
@@ -57414,10 +57406,26 @@ class MetricReportModalComponent {
|
|
|
57414
57406
|
return calculateMetricPacing(projectedValue, metric.targetValue, increaseBad);
|
|
57415
57407
|
}, ...(ngDevMode ? [{ debugName: "pacingInfo" }] : []));
|
|
57416
57408
|
this.ytdValue = computed(() => {
|
|
57417
|
-
|
|
57409
|
+
const pacingResponse = this.pacingMetrics();
|
|
57410
|
+
const metric = this.metricData();
|
|
57411
|
+
if (!pacingResponse || !metric)
|
|
57412
|
+
return 0;
|
|
57413
|
+
const soFarMetric = pacingResponse.soFarMetricValues?.find((m) => m.metric === metric.metric);
|
|
57414
|
+
if (soFarMetric?.value) {
|
|
57415
|
+
return parseFloat(soFarMetric.value);
|
|
57416
|
+
}
|
|
57417
|
+
return 0;
|
|
57418
57418
|
}, ...(ngDevMode ? [{ debugName: "ytdValue" }] : []));
|
|
57419
57419
|
this.samePeriodLastYearValue = computed(() => {
|
|
57420
|
-
|
|
57420
|
+
const pacingResponse = this.pacingMetrics();
|
|
57421
|
+
const metric = this.metricData();
|
|
57422
|
+
if (!pacingResponse || !metric)
|
|
57423
|
+
return 0;
|
|
57424
|
+
const lastYearMetric = pacingResponse.lastYearSoFarMetricValues?.find((m) => m.metric === metric.metric);
|
|
57425
|
+
if (lastYearMetric?.value) {
|
|
57426
|
+
return parseFloat(lastYearMetric.value);
|
|
57427
|
+
}
|
|
57428
|
+
return 0;
|
|
57421
57429
|
}, ...(ngDevMode ? [{ debugName: "samePeriodLastYearValue" }] : []));
|
|
57422
57430
|
this.ytdChangePercentage = computed(() => {
|
|
57423
57431
|
const current = this.ytdValue();
|
|
@@ -57428,10 +57436,50 @@ class MetricReportModalComponent {
|
|
|
57428
57436
|
}, ...(ngDevMode ? [{ debugName: "ytdChangePercentage" }] : []));
|
|
57429
57437
|
this.ytdDateRange = computed(() => {
|
|
57430
57438
|
const now = new Date();
|
|
57431
|
-
const
|
|
57432
|
-
|
|
57433
|
-
|
|
57439
|
+
const yesterday = new Date(now);
|
|
57440
|
+
yesterday.setDate(yesterday.getDate() - 1);
|
|
57441
|
+
const startMonth = 'Jan';
|
|
57442
|
+
const startDay = 1;
|
|
57443
|
+
const endMonth = yesterday.toLocaleDateString('en-US', { month: 'short' });
|
|
57444
|
+
const endDay = yesterday.getDate();
|
|
57445
|
+
return `${startMonth} ${startDay} - ${endMonth} ${endDay}`;
|
|
57434
57446
|
}, ...(ngDevMode ? [{ debugName: "ytdDateRange" }] : []));
|
|
57447
|
+
this.ytdDateRangeWithYear = computed(() => {
|
|
57448
|
+
const now = new Date();
|
|
57449
|
+
const yesterday = new Date(now);
|
|
57450
|
+
yesterday.setDate(yesterday.getDate() - 1);
|
|
57451
|
+
const year = this.currentYear();
|
|
57452
|
+
return `Jan 1, ${year} - ${yesterday.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}, ${year}`;
|
|
57453
|
+
}, ...(ngDevMode ? [{ debugName: "ytdDateRangeWithYear" }] : []));
|
|
57454
|
+
this.priorYearDateRange = computed(() => {
|
|
57455
|
+
const now = new Date();
|
|
57456
|
+
const yesterday = new Date(now);
|
|
57457
|
+
yesterday.setDate(yesterday.getDate() - 1);
|
|
57458
|
+
const priorYear = this.priorYear();
|
|
57459
|
+
return `Jan 1, ${priorYear} - ${yesterday.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}, ${priorYear}`;
|
|
57460
|
+
}, ...(ngDevMode ? [{ debugName: "priorYearDateRange" }] : []));
|
|
57461
|
+
this.ytdStartDate = computed(() => {
|
|
57462
|
+
const year = this.currentYear();
|
|
57463
|
+
return `Jan 1, ${year}`;
|
|
57464
|
+
}, ...(ngDevMode ? [{ debugName: "ytdStartDate" }] : []));
|
|
57465
|
+
this.ytdEndDate = computed(() => {
|
|
57466
|
+
const now = new Date();
|
|
57467
|
+
const yesterday = new Date(now);
|
|
57468
|
+
yesterday.setDate(yesterday.getDate() - 1);
|
|
57469
|
+
const year = this.currentYear();
|
|
57470
|
+
return `${yesterday.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}, ${year}`;
|
|
57471
|
+
}, ...(ngDevMode ? [{ debugName: "ytdEndDate" }] : []));
|
|
57472
|
+
this.priorYearStartDate = computed(() => {
|
|
57473
|
+
const priorYear = this.priorYear();
|
|
57474
|
+
return `Jan 1, ${priorYear}`;
|
|
57475
|
+
}, ...(ngDevMode ? [{ debugName: "priorYearStartDate" }] : []));
|
|
57476
|
+
this.priorYearEndDate = computed(() => {
|
|
57477
|
+
const now = new Date();
|
|
57478
|
+
const yesterday = new Date(now);
|
|
57479
|
+
yesterday.setDate(yesterday.getDate() - 1);
|
|
57480
|
+
const priorYear = this.priorYear();
|
|
57481
|
+
return `${yesterday.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}, ${priorYear}`;
|
|
57482
|
+
}, ...(ngDevMode ? [{ debugName: "priorYearEndDate" }] : []));
|
|
57435
57483
|
this.gapAnalysisText = computed(() => {
|
|
57436
57484
|
const pacing = this.pacingInfo();
|
|
57437
57485
|
const metric = this.metricData();
|
|
@@ -57615,6 +57663,9 @@ class MetricReportModalComponent {
|
|
|
57615
57663
|
labelClasses() {
|
|
57616
57664
|
return this.isLightMode() ? 'text-slate-500' : 'text-slate-400';
|
|
57617
57665
|
}
|
|
57666
|
+
dateLabelClasses() {
|
|
57667
|
+
return this.isLightMode() ? 'text-slate-400' : 'text-slate-500';
|
|
57668
|
+
}
|
|
57618
57669
|
valueClasses() {
|
|
57619
57670
|
return this.isLightMode() ? 'text-slate-900' : 'text-white';
|
|
57620
57671
|
}
|
|
@@ -57663,6 +57714,11 @@ class MetricReportModalComponent {
|
|
|
57663
57714
|
? 'bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-700'
|
|
57664
57715
|
: 'bg-slate-700/50 text-slate-400 hover:bg-slate-600/50 hover:text-slate-300';
|
|
57665
57716
|
}
|
|
57717
|
+
headerInfoIconClasses() {
|
|
57718
|
+
return this.isLightMode()
|
|
57719
|
+
? 'bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-700'
|
|
57720
|
+
: 'bg-slate-700/50 text-slate-400 hover:bg-slate-600/50 hover:text-slate-300';
|
|
57721
|
+
}
|
|
57666
57722
|
footerClasses() {
|
|
57667
57723
|
return this.isLightMode()
|
|
57668
57724
|
? 'bg-slate-50 border-slate-200'
|
|
@@ -57674,8 +57730,8 @@ class MetricReportModalComponent {
|
|
|
57674
57730
|
: 'bg-slate-700 hover:bg-slate-600 text-white';
|
|
57675
57731
|
}
|
|
57676
57732
|
static { this.ɵfac = function MetricReportModalComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MetricReportModalComponent)(); }; }
|
|
57677
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MetricReportModalComponent, selectors: [["symphiq-metric-report-modal"]], inputs: { viewMode: [1, "viewMode"], metricEnum: [1, "metricEnum"], metricData: [1, "metricData"], contributingMetrics: [1, "contributingMetrics"], pacingMetrics: [1, "pacingMetrics"], isOpen: [1, "isOpen"] }, outputs: { closed: "closed" }, decls: 1, vars: 1, consts: [[1, "fixed", "inset-0", "overflow-y-auto", "z-50"], [1, "fixed", "inset-0", "overflow-y-auto", "z-50", 3, "click"], [1, "flex", "items-center", "justify-center", "min-h-screen", "px-4", "pt-4", "pb-20", "text-center", "sm:block", "sm:p-0"], ["aria-hidden", "true", 1, "fixed", "inset-0", "backdrop-blur-md", 3, "ngClass"], ["aria-hidden", "true", 1, "hidden", "sm:inline-block", "sm:align-middle", "sm:h-screen"], [1, "relative", "inline-block", "align-bottom", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "sm:my-8", "sm:align-middle", "sm:w-full", "sm:max-w-4xl", "border", "backdrop-blur-xl", 3, "click", "ngClass"], [1, "px-6", "py-5", "border-b", "backdrop-blur-sm", "sticky", "top-0", "z-10", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "flex-1"], [1, "
|
|
57678
|
-
i0.ɵɵconditionalCreate(0, MetricReportModalComponent_Conditional_0_Template,
|
|
57733
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MetricReportModalComponent, selectors: [["symphiq-metric-report-modal"]], inputs: { viewMode: [1, "viewMode"], metricEnum: [1, "metricEnum"], metricData: [1, "metricData"], contributingMetrics: [1, "contributingMetrics"], pacingMetrics: [1, "pacingMetrics"], isOpen: [1, "isOpen"] }, outputs: { closed: "closed" }, decls: 1, vars: 1, consts: [[1, "fixed", "inset-0", "overflow-y-auto", "z-50"], [1, "fixed", "inset-0", "overflow-y-auto", "z-50", 3, "click"], [1, "flex", "items-center", "justify-center", "min-h-screen", "px-4", "pt-4", "pb-20", "text-center", "sm:block", "sm:p-0"], ["aria-hidden", "true", 1, "fixed", "inset-0", "backdrop-blur-md", 3, "ngClass"], ["aria-hidden", "true", 1, "hidden", "sm:inline-block", "sm:align-middle", "sm:h-screen"], [1, "relative", "inline-block", "align-bottom", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "sm:my-8", "sm:align-middle", "sm:w-full", "sm:max-w-4xl", "border", "backdrop-blur-xl", 3, "click", "ngClass"], [1, "px-6", "py-5", "border-b", "backdrop-blur-sm", "sticky", "top-0", "z-10", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "flex-1"], [1, "flex", "items-center", "gap-3", "mb-2"], [1, "text-xl", "font-bold", 3, "ngClass"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "right", 1, "flex-shrink-0", "w-7", "h-7", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip"], [1, "ml-4", "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "px-6", "py-6", "max-h-[70vh]", "overflow-y-auto", "backdrop-blur-sm", 3, "ngClass"], [1, "rounded-xl", "p-6", "mb-6", 3, "ngClass"], [1, "text-sm", "font-semibold", "uppercase", "tracking-wider", "mb-4", 3, "ngClass"], [1, "grid", "grid-cols-1", "sm:grid-cols-2", "lg:grid-cols-3", "gap-4"], [1, "mb-1.5"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", 3, "ngClass"], [1, "text-xs", 3, "ngClass"], [1, "text-xl", "font-bold", "mb-2", 3, "ngClass"], [3, "viewMode", "percentageChange", "metric", "priorYear", "isCompact"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1.5", 3, "ngClass"], [1, "mb-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-2", 3, "ngClass"], [1, "text-3xl", "font-extrabold", "mb-3", 3, "ngClass"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "rounded-xl", "p-6", 3, "ngClass"], [1, "px-6", "py-4", "border-t", 3, "ngClass"], [1, "w-full", "px-4", "py-2", "rounded-lg", "transition-all", "font-medium", "hover:scale-[1.02]", "active:scale-[0.98]", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [3, "viewMode", "pacingPercentage", "status", "showAsFullText", "isCompact", "showEmphasizedPercentage"], [1, "space-y-2"], [1, "flex", "justify-between", "text-xs", 3, "ngClass"], [1, "h-3", "rounded-full", "overflow-hidden", 3, "ngClass"], [1, "h-full", "transition-all", "duration-500", 3, "ngClass"], [1, "overflow-x-auto"], [1, "w-full"], [1, "border-b", 3, "ngClass"], [1, "text-left", "py-3", "px-4", "text-xs", "font-semibold", "uppercase", "tracking-wider"], [1, "text-right", "py-3", "px-4", "text-xs", "font-semibold", "uppercase", "tracking-wider"], [1, "border-b", "transition-colors", 3, "ngClass"], [1, "py-3", "px-4"], [1, "flex", "items-center", "gap-2"], [1, "text-sm", "font-medium"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "right", 1, "flex-shrink-0", "w-5", "h-5", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip"], [1, "py-3", "px-4", "text-right"], [1, "text-sm", "font-semibold", 3, "ngClass"], [1, "flex", "items-center", "justify-end", "gap-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "text-emerald-500"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3"], [1, "min-h-[400px]"], [3, "chart", "showAxisLabels", "viewMode", "currencySymbol"], [1, "text-sm", "leading-relaxed", "mt-4", 3, "ngClass"]], template: function MetricReportModalComponent_Template(rf, ctx) { if (rf & 1) {
|
|
57734
|
+
i0.ɵɵconditionalCreate(0, MetricReportModalComponent_Conditional_0_Template, 70, 51, "div", 0);
|
|
57679
57735
|
} if (rf & 2) {
|
|
57680
57736
|
i0.ɵɵconditional(ctx.isOpen() ? 0 : -1);
|
|
57681
57737
|
} }, dependencies: [CommonModule, i1$1.NgClass, PacingStatusBadgeComponent,
|
|
@@ -57725,312 +57781,317 @@ class MetricReportModalComponent {
|
|
|
57725
57781
|
])
|
|
57726
57782
|
])
|
|
57727
57783
|
],
|
|
57728
|
-
template: `
|
|
57729
|
-
@if (isOpen()) {
|
|
57730
|
-
<div class="fixed inset-0 overflow-y-auto z-50" (click)="close()">
|
|
57731
|
-
<div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
|
|
57732
|
-
<div
|
|
57733
|
-
[ngClass]="backdropClasses()"
|
|
57734
|
-
class="fixed inset-0 backdrop-blur-md"
|
|
57735
|
-
aria-hidden="true"
|
|
57736
|
-
@fadeIn>
|
|
57737
|
-
</div>
|
|
57738
|
-
|
|
57739
|
-
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
|
|
57740
|
-
|
|
57741
|
-
<div
|
|
57742
|
-
(click)="$event.stopPropagation()"
|
|
57743
|
-
[ngClass]="modalContainerClasses()"
|
|
57744
|
-
class="relative inline-block align-bottom rounded-2xl text-left overflow-hidden shadow-xl sm:my-8 sm:align-middle sm:w-full sm:max-w-4xl border backdrop-blur-xl"
|
|
57745
|
-
@slideUpFade>
|
|
57746
|
-
|
|
57747
|
-
<!-- Header -->
|
|
57748
|
-
<div [ngClass]="headerClasses()" class="px-6 py-5 border-b backdrop-blur-sm sticky top-0 z-10">
|
|
57749
|
-
<div class="flex items-start justify-between">
|
|
57750
|
-
<div class="flex-1">
|
|
57751
|
-
<
|
|
57752
|
-
|
|
57753
|
-
|
|
57754
|
-
|
|
57755
|
-
|
|
57756
|
-
|
|
57757
|
-
|
|
57758
|
-
|
|
57759
|
-
|
|
57760
|
-
|
|
57761
|
-
|
|
57762
|
-
|
|
57763
|
-
|
|
57764
|
-
|
|
57765
|
-
|
|
57766
|
-
|
|
57767
|
-
|
|
57768
|
-
|
|
57769
|
-
|
|
57770
|
-
|
|
57771
|
-
|
|
57772
|
-
|
|
57773
|
-
|
|
57774
|
-
|
|
57775
|
-
<
|
|
57776
|
-
|
|
57777
|
-
|
|
57778
|
-
|
|
57779
|
-
|
|
57780
|
-
|
|
57781
|
-
|
|
57782
|
-
|
|
57783
|
-
|
|
57784
|
-
|
|
57785
|
-
|
|
57786
|
-
|
|
57787
|
-
|
|
57788
|
-
|
|
57789
|
-
|
|
57790
|
-
|
|
57791
|
-
|
|
57792
|
-
|
|
57793
|
-
|
|
57794
|
-
|
|
57795
|
-
|
|
57796
|
-
|
|
57797
|
-
|
|
57798
|
-
|
|
57799
|
-
|
|
57800
|
-
|
|
57801
|
-
|
|
57802
|
-
|
|
57803
|
-
|
|
57804
|
-
|
|
57805
|
-
|
|
57806
|
-
|
|
57807
|
-
|
|
57808
|
-
|
|
57809
|
-
|
|
57810
|
-
|
|
57811
|
-
[
|
|
57812
|
-
[
|
|
57813
|
-
[
|
|
57814
|
-
|
|
57815
|
-
|
|
57816
|
-
|
|
57817
|
-
|
|
57818
|
-
|
|
57819
|
-
|
|
57820
|
-
|
|
57821
|
-
|
|
57822
|
-
|
|
57823
|
-
|
|
57824
|
-
|
|
57825
|
-
|
|
57826
|
-
|
|
57827
|
-
|
|
57828
|
-
|
|
57829
|
-
|
|
57830
|
-
|
|
57831
|
-
|
|
57832
|
-
|
|
57833
|
-
|
|
57834
|
-
|
|
57835
|
-
|
|
57836
|
-
|
|
57837
|
-
|
|
57838
|
-
|
|
57839
|
-
|
|
57840
|
-
|
|
57841
|
-
|
|
57842
|
-
|
|
57843
|
-
|
|
57844
|
-
|
|
57845
|
-
|
|
57846
|
-
|
|
57847
|
-
|
|
57848
|
-
|
|
57849
|
-
<
|
|
57850
|
-
|
|
57851
|
-
|
|
57852
|
-
|
|
57853
|
-
|
|
57854
|
-
|
|
57855
|
-
|
|
57856
|
-
|
|
57857
|
-
|
|
57858
|
-
|
|
57859
|
-
|
|
57860
|
-
|
|
57861
|
-
|
|
57862
|
-
|
|
57863
|
-
|
|
57864
|
-
|
|
57865
|
-
|
|
57866
|
-
|
|
57867
|
-
|
|
57868
|
-
|
|
57869
|
-
|
|
57870
|
-
|
|
57871
|
-
|
|
57872
|
-
|
|
57873
|
-
|
|
57874
|
-
|
|
57875
|
-
|
|
57876
|
-
|
|
57877
|
-
|
|
57878
|
-
|
|
57879
|
-
|
|
57880
|
-
|
|
57881
|
-
|
|
57882
|
-
|
|
57883
|
-
|
|
57884
|
-
|
|
57885
|
-
<p [ngClass]="
|
|
57886
|
-
Your
|
|
57887
|
-
|
|
57888
|
-
|
|
57889
|
-
{{ formatMetricValue(metricData()?.
|
|
57890
|
-
</p>
|
|
57891
|
-
|
|
57892
|
-
|
|
57893
|
-
|
|
57894
|
-
|
|
57895
|
-
|
|
57896
|
-
|
|
57897
|
-
|
|
57898
|
-
|
|
57899
|
-
|
|
57900
|
-
|
|
57901
|
-
|
|
57902
|
-
|
|
57903
|
-
|
|
57904
|
-
|
|
57905
|
-
|
|
57906
|
-
|
|
57907
|
-
|
|
57908
|
-
|
|
57909
|
-
</div>
|
|
57910
|
-
|
|
57911
|
-
|
|
57912
|
-
|
|
57913
|
-
|
|
57914
|
-
|
|
57915
|
-
|
|
57916
|
-
|
|
57917
|
-
|
|
57918
|
-
|
|
57919
|
-
|
|
57920
|
-
|
|
57921
|
-
|
|
57922
|
-
|
|
57923
|
-
|
|
57924
|
-
|
|
57925
|
-
|
|
57926
|
-
|
|
57927
|
-
|
|
57928
|
-
|
|
57929
|
-
|
|
57930
|
-
|
|
57931
|
-
|
|
57932
|
-
|
|
57933
|
-
|
|
57934
|
-
|
|
57935
|
-
|
|
57936
|
-
|
|
57937
|
-
|
|
57938
|
-
|
|
57939
|
-
|
|
57940
|
-
|
|
57941
|
-
|
|
57942
|
-
|
|
57943
|
-
|
|
57944
|
-
|
|
57945
|
-
<
|
|
57946
|
-
|
|
57947
|
-
|
|
57948
|
-
|
|
57949
|
-
|
|
57950
|
-
|
|
57951
|
-
|
|
57952
|
-
|
|
57953
|
-
|
|
57954
|
-
|
|
57955
|
-
|
|
57956
|
-
|
|
57957
|
-
|
|
57958
|
-
|
|
57959
|
-
|
|
57960
|
-
|
|
57961
|
-
|
|
57962
|
-
|
|
57963
|
-
|
|
57964
|
-
|
|
57965
|
-
|
|
57966
|
-
|
|
57967
|
-
|
|
57968
|
-
|
|
57969
|
-
|
|
57970
|
-
|
|
57971
|
-
|
|
57972
|
-
|
|
57973
|
-
|
|
57974
|
-
|
|
57975
|
-
|
|
57976
|
-
|
|
57977
|
-
|
|
57978
|
-
|
|
57979
|
-
|
|
57980
|
-
|
|
57981
|
-
|
|
57982
|
-
|
|
57983
|
-
|
|
57984
|
-
|
|
57985
|
-
|
|
57986
|
-
|
|
57987
|
-
|
|
57988
|
-
|
|
57989
|
-
|
|
57990
|
-
|
|
57991
|
-
|
|
57992
|
-
|
|
57993
|
-
|
|
57994
|
-
|
|
57995
|
-
|
|
57996
|
-
|
|
57997
|
-
|
|
57998
|
-
|
|
57999
|
-
|
|
58000
|
-
|
|
58001
|
-
|
|
58002
|
-
|
|
58003
|
-
|
|
58004
|
-
|
|
58005
|
-
|
|
58006
|
-
|
|
58007
|
-
|
|
58008
|
-
|
|
58009
|
-
|
|
58010
|
-
|
|
58011
|
-
|
|
58012
|
-
|
|
58013
|
-
|
|
58014
|
-
|
|
58015
|
-
|
|
58016
|
-
|
|
58017
|
-
|
|
58018
|
-
|
|
58019
|
-
|
|
58020
|
-
|
|
58021
|
-
|
|
58022
|
-
|
|
58023
|
-
|
|
58024
|
-
|
|
58025
|
-
|
|
58026
|
-
|
|
58027
|
-
|
|
58028
|
-
|
|
58029
|
-
|
|
57784
|
+
template: `
|
|
57785
|
+
@if (isOpen()) {
|
|
57786
|
+
<div class="fixed inset-0 overflow-y-auto z-50" (click)="close()">
|
|
57787
|
+
<div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
|
|
57788
|
+
<div
|
|
57789
|
+
[ngClass]="backdropClasses()"
|
|
57790
|
+
class="fixed inset-0 backdrop-blur-md"
|
|
57791
|
+
aria-hidden="true"
|
|
57792
|
+
@fadeIn>
|
|
57793
|
+
</div>
|
|
57794
|
+
|
|
57795
|
+
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
|
|
57796
|
+
|
|
57797
|
+
<div
|
|
57798
|
+
(click)="$event.stopPropagation()"
|
|
57799
|
+
[ngClass]="modalContainerClasses()"
|
|
57800
|
+
class="relative inline-block align-bottom rounded-2xl text-left overflow-hidden shadow-xl sm:my-8 sm:align-middle sm:w-full sm:max-w-4xl border backdrop-blur-xl"
|
|
57801
|
+
@slideUpFade>
|
|
57802
|
+
|
|
57803
|
+
<!-- Header -->
|
|
57804
|
+
<div [ngClass]="headerClasses()" class="px-6 py-5 border-b backdrop-blur-sm sticky top-0 z-10">
|
|
57805
|
+
<div class="flex items-start justify-between">
|
|
57806
|
+
<div class="flex-1">
|
|
57807
|
+
<div class="flex items-center gap-3 mb-2">
|
|
57808
|
+
<h3 [ngClass]="titleClasses()" class="text-xl font-bold">
|
|
57809
|
+
{{ metricTitle() }}
|
|
57810
|
+
</h3>
|
|
57811
|
+
@if (metricData()?.description) {
|
|
57812
|
+
<button
|
|
57813
|
+
type="button"
|
|
57814
|
+
[ngClass]="headerInfoIconClasses()"
|
|
57815
|
+
class="flex-shrink-0 w-7 h-7 rounded-full inline-flex items-center justify-center transition-colors"
|
|
57816
|
+
[libSymphiqTooltip]="getMarkdownTooltipContent(metricData()!.description!, metricTitle())"
|
|
57817
|
+
tooltipType="markdown"
|
|
57818
|
+
tooltipPosition="right">
|
|
57819
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
57820
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
57821
|
+
</svg>
|
|
57822
|
+
</button>
|
|
57823
|
+
}
|
|
57824
|
+
</div>
|
|
57825
|
+
</div>
|
|
57826
|
+
<button
|
|
57827
|
+
(click)="close()"
|
|
57828
|
+
[ngClass]="closeButtonClasses()"
|
|
57829
|
+
class="ml-4 transition-all rounded-lg p-1 hover:scale-110 active:scale-90">
|
|
57830
|
+
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
57831
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
|
57832
|
+
</svg>
|
|
57833
|
+
</button>
|
|
57834
|
+
</div>
|
|
57835
|
+
</div>
|
|
57836
|
+
|
|
57837
|
+
<!-- Content -->
|
|
57838
|
+
<div [ngClass]="contentClasses()" class="px-6 py-6 max-h-[70vh] overflow-y-auto backdrop-blur-sm">
|
|
57839
|
+
<symphiq-tooltip-container />
|
|
57840
|
+
|
|
57841
|
+
<!-- At a Glance Summary -->
|
|
57842
|
+
<div [ngClass]="sectionCardClasses()" class="rounded-xl p-6 mb-6">
|
|
57843
|
+
<h4 [ngClass]="sectionTitleClasses()" class="text-sm font-semibold uppercase tracking-wider mb-4">
|
|
57844
|
+
At a Glance
|
|
57845
|
+
</h4>
|
|
57846
|
+
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
57847
|
+
<!-- YTD Value -->
|
|
57848
|
+
<div>
|
|
57849
|
+
<div class="mb-1.5">
|
|
57850
|
+
<p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider">
|
|
57851
|
+
Year to date
|
|
57852
|
+
</p>
|
|
57853
|
+
<p [ngClass]="dateLabelClasses()" class="text-xs">
|
|
57854
|
+
{{ ytdStartDate() }}
|
|
57855
|
+
</p>
|
|
57856
|
+
<p [ngClass]="dateLabelClasses()" class="text-xs">
|
|
57857
|
+
{{ ytdEndDate() }}
|
|
57858
|
+
</p>
|
|
57859
|
+
</div>
|
|
57860
|
+
<p [ngClass]="valueClasses()" class="text-xl font-bold mb-2">
|
|
57861
|
+
{{ formatMetricValue(ytdValue(), metricData()?.metric || '') }}
|
|
57862
|
+
</p>
|
|
57863
|
+
@if (ytdChangePercentage() !== null) {
|
|
57864
|
+
<symphiq-target-change-badge
|
|
57865
|
+
[viewMode]="viewMode()"
|
|
57866
|
+
[percentageChange]="ytdChangePercentage()!"
|
|
57867
|
+
[metric]="metricData()?.metric || ''"
|
|
57868
|
+
[priorYear]="priorYear()"
|
|
57869
|
+
[isCompact]="true"
|
|
57870
|
+
/>
|
|
57871
|
+
}
|
|
57872
|
+
</div>
|
|
57873
|
+
|
|
57874
|
+
<!-- Same Period Last Year -->
|
|
57875
|
+
<div>
|
|
57876
|
+
<div class="mb-1.5">
|
|
57877
|
+
<p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider">
|
|
57878
|
+
Same period last year
|
|
57879
|
+
</p>
|
|
57880
|
+
<p [ngClass]="dateLabelClasses()" class="text-xs">
|
|
57881
|
+
{{ priorYearStartDate() }}
|
|
57882
|
+
</p>
|
|
57883
|
+
<p [ngClass]="dateLabelClasses()" class="text-xs">
|
|
57884
|
+
{{ priorYearEndDate() }}
|
|
57885
|
+
</p>
|
|
57886
|
+
</div>
|
|
57887
|
+
<p [ngClass]="valueClasses()" class="text-xl font-bold">
|
|
57888
|
+
{{ formatMetricValue(samePeriodLastYearValue(), metricData()?.metric || '') }}
|
|
57889
|
+
</p>
|
|
57890
|
+
</div>
|
|
57891
|
+
|
|
57892
|
+
<!-- Full Last Year -->
|
|
57893
|
+
<div>
|
|
57894
|
+
<p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
|
|
57895
|
+
Full {{ priorYear() }} Actual
|
|
57896
|
+
</p>
|
|
57897
|
+
<p [ngClass]="valueClasses()" class="text-xl font-bold">
|
|
57898
|
+
{{ formatMetricValue(metricData()?.currentValue || 0, metricData()?.metric || '') }}
|
|
57899
|
+
</p>
|
|
57900
|
+
</div>
|
|
57901
|
+
|
|
57902
|
+
<!-- Current Pace -->
|
|
57903
|
+
@if (pacingInfo()) {
|
|
57904
|
+
<div>
|
|
57905
|
+
<p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
|
|
57906
|
+
Pace for {{ currentYear() }}
|
|
57907
|
+
</p>
|
|
57908
|
+
<p [ngClass]="projectedValueClasses()" class="text-xl font-bold mb-2">
|
|
57909
|
+
{{ formatMetricValue(pacingInfo()!.projectedValue, metricData()?.metric || '', false) }}
|
|
57910
|
+
</p>
|
|
57911
|
+
<symphiq-pacing-status-badge
|
|
57912
|
+
[viewMode]="viewMode()"
|
|
57913
|
+
[pacingPercentage]="pacingInfo()!.pacingPercentage"
|
|
57914
|
+
[status]="pacingInfo()!.status"
|
|
57915
|
+
[showAsFullText]="false"
|
|
57916
|
+
[isCompact]="true"
|
|
57917
|
+
[showEmphasizedPercentage]="true"
|
|
57918
|
+
/>
|
|
57919
|
+
</div>
|
|
57920
|
+
}
|
|
57921
|
+
|
|
57922
|
+
<!-- Current Target -->
|
|
57923
|
+
<div>
|
|
57924
|
+
<p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
|
|
57925
|
+
{{ currentYear() }} Target
|
|
57926
|
+
</p>
|
|
57927
|
+
<p [ngClass]="targetValueClasses()" class="text-xl font-bold">
|
|
57928
|
+
{{ formatMetricValue(metricData()?.targetValue || 0, metricData()?.metric || '', false) }}
|
|
57929
|
+
</p>
|
|
57930
|
+
</div>
|
|
57931
|
+
</div>
|
|
57932
|
+
</div>
|
|
57933
|
+
|
|
57934
|
+
<!-- Target Analysis -->
|
|
57935
|
+
<div [ngClass]="sectionCardClasses()" class="rounded-xl p-6 mb-6">
|
|
57936
|
+
<h4 [ngClass]="sectionTitleClasses()" class="text-sm font-semibold uppercase tracking-wider mb-4">
|
|
57937
|
+
Target Analysis
|
|
57938
|
+
</h4>
|
|
57939
|
+
|
|
57940
|
+
<div class="mb-4">
|
|
57941
|
+
<p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-2">
|
|
57942
|
+
Your Target
|
|
57943
|
+
</p>
|
|
57944
|
+
<p [ngClass]="targetValueClasses()" class="text-3xl font-extrabold mb-3">
|
|
57945
|
+
{{ formatMetricValue(metricData()?.targetValue || 0, metricData()?.metric || '', false) }}
|
|
57946
|
+
</p>
|
|
57947
|
+
<p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed">
|
|
57948
|
+
Your target represents a {{ formatPercentage(Math.abs(metricData()?.percentageIncrease || 0), 1) }}
|
|
57949
|
+
{{ (metricData()?.percentageIncrease || 0) >= 0 ? 'increase' : 'decrease' }}
|
|
57950
|
+
from your {{ priorYear() }} actual of
|
|
57951
|
+
{{ formatMetricValue(metricData()?.currentValue || 0, metricData()?.metric || '') }}.
|
|
57952
|
+
</p>
|
|
57953
|
+
</div>
|
|
57954
|
+
|
|
57955
|
+
@if (pacingInfo()) {
|
|
57956
|
+
<div class="mb-4">
|
|
57957
|
+
<symphiq-pacing-status-badge
|
|
57958
|
+
[viewMode]="viewMode()"
|
|
57959
|
+
[pacingPercentage]="pacingInfo()!.pacingPercentage"
|
|
57960
|
+
[status]="pacingInfo()!.status"
|
|
57961
|
+
[showAsFullText]="true"
|
|
57962
|
+
[isCompact]="false"
|
|
57963
|
+
[showEmphasizedPercentage]="true"
|
|
57964
|
+
/>
|
|
57965
|
+
</div>
|
|
57966
|
+
|
|
57967
|
+
<div class="mb-4">
|
|
57968
|
+
<p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed">
|
|
57969
|
+
{{ gapAnalysisText() }}
|
|
57970
|
+
</p>
|
|
57971
|
+
</div>
|
|
57972
|
+
|
|
57973
|
+
<!-- Progress Bar -->
|
|
57974
|
+
<div class="space-y-2">
|
|
57975
|
+
<div class="flex justify-between text-xs" [ngClass]="labelClasses()">
|
|
57976
|
+
<span>Progress to Target</span>
|
|
57977
|
+
<span>{{ formatPercentage(progressToTarget(), 1) }}</span>
|
|
57978
|
+
</div>
|
|
57979
|
+
<div [ngClass]="progressBarBgClasses()" class="h-3 rounded-full overflow-hidden">
|
|
57980
|
+
<div
|
|
57981
|
+
[ngClass]="progressBarFillClasses()"
|
|
57982
|
+
[style.width.%]="Math.min(progressToTarget(), 100)"
|
|
57983
|
+
class="h-full transition-all duration-500">
|
|
57984
|
+
</div>
|
|
57985
|
+
</div>
|
|
57986
|
+
</div>
|
|
57987
|
+
}
|
|
57988
|
+
</div>
|
|
57989
|
+
|
|
57990
|
+
<!-- Contributing Metrics Table (only for funnel stage metrics) -->
|
|
57991
|
+
@if (contributingMetrics().length > 0) {
|
|
57992
|
+
<div [ngClass]="sectionCardClasses()" class="rounded-xl p-6 mb-6">
|
|
57993
|
+
<h4 [ngClass]="sectionTitleClasses()" class="text-sm font-semibold uppercase tracking-wider mb-4">
|
|
57994
|
+
Contributing Metrics
|
|
57995
|
+
</h4>
|
|
57996
|
+
<div class="overflow-x-auto">
|
|
57997
|
+
<table class="w-full">
|
|
57998
|
+
<thead>
|
|
57999
|
+
<tr [ngClass]="tableHeaderClasses()" class="border-b">
|
|
58000
|
+
<th class="text-left py-3 px-4 text-xs font-semibold uppercase tracking-wider">Metric</th>
|
|
58001
|
+
<th class="text-right py-3 px-4 text-xs font-semibold uppercase tracking-wider">Target</th>
|
|
58002
|
+
<th class="text-right py-3 px-4 text-xs font-semibold uppercase tracking-wider">Improve by</th>
|
|
58003
|
+
</tr>
|
|
58004
|
+
</thead>
|
|
58005
|
+
<tbody>
|
|
58006
|
+
@for (metric of contributingMetrics(); track metric.metric) {
|
|
58007
|
+
<tr [ngClass]="tableRowClasses()" class="border-b transition-colors">
|
|
58008
|
+
<td class="py-3 px-4">
|
|
58009
|
+
<div class="flex items-center gap-2">
|
|
58010
|
+
<span class="text-sm font-medium">{{ getMetricTitle(metric) }}</span>
|
|
58011
|
+
@if (metric.description) {
|
|
58012
|
+
<button
|
|
58013
|
+
type="button"
|
|
58014
|
+
[ngClass]="infoIconClasses()"
|
|
58015
|
+
class="flex-shrink-0 w-5 h-5 rounded-full inline-flex items-center justify-center transition-colors"
|
|
58016
|
+
[libSymphiqTooltip]="getMarkdownTooltipContent(metric.description, getMetricTitle(metric))"
|
|
58017
|
+
tooltipType="markdown"
|
|
58018
|
+
tooltipPosition="right">
|
|
58019
|
+
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
58020
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
58021
|
+
</svg>
|
|
58022
|
+
</button>
|
|
58023
|
+
}
|
|
58024
|
+
</div>
|
|
58025
|
+
</td>
|
|
58026
|
+
<td class="py-3 px-4 text-right">
|
|
58027
|
+
<span [ngClass]="targetValueClasses()" class="text-sm font-semibold">
|
|
58028
|
+
{{ formatMetricValue(metric.targetValue, metric.metric, false) }}
|
|
58029
|
+
</span>
|
|
58030
|
+
</td>
|
|
58031
|
+
<td class="py-3 px-4 text-right">
|
|
58032
|
+
<div class="flex items-center justify-end gap-2">
|
|
58033
|
+
<span class="text-sm font-medium">
|
|
58034
|
+
{{ formatPercentage(Math.abs(metric.percentageIncrease), 1) }}
|
|
58035
|
+
</span>
|
|
58036
|
+
<svg
|
|
58037
|
+
class="w-4 h-4 text-emerald-500"
|
|
58038
|
+
fill="none"
|
|
58039
|
+
stroke="currentColor"
|
|
58040
|
+
viewBox="0 0 24 24">
|
|
58041
|
+
<path
|
|
58042
|
+
stroke-linecap="round"
|
|
58043
|
+
stroke-linejoin="round"
|
|
58044
|
+
stroke-width="2"
|
|
58045
|
+
[attr.d]="metric.percentageIncrease >= 0 ? 'M5 10l7-7m0 0l7 7m-7-7v18' : 'M19 14l-7 7m0 0l-7-7m7 7V3'" />
|
|
58046
|
+
</svg>
|
|
58047
|
+
</div>
|
|
58048
|
+
</td>
|
|
58049
|
+
</tr>
|
|
58050
|
+
}
|
|
58051
|
+
</tbody>
|
|
58052
|
+
</table>
|
|
58053
|
+
</div>
|
|
58054
|
+
</div>
|
|
58055
|
+
}
|
|
58056
|
+
|
|
58057
|
+
<!-- Pacing Chart -->
|
|
58058
|
+
@if (pacingChartData()) {
|
|
58059
|
+
<div [ngClass]="sectionCardClasses()" class="rounded-xl p-6">
|
|
58060
|
+
<h4 [ngClass]="sectionTitleClasses()" class="text-sm font-semibold uppercase tracking-wider mb-4">
|
|
58061
|
+
Pace
|
|
58062
|
+
</h4>
|
|
58063
|
+
<div class="min-h-[400px]">
|
|
58064
|
+
<symphiq-line-chart
|
|
58065
|
+
[chart]="pacingChartData()!"
|
|
58066
|
+
[showAxisLabels]="true"
|
|
58067
|
+
[viewMode]="viewMode()"
|
|
58068
|
+
[currencySymbol]="'$'"
|
|
58069
|
+
/>
|
|
58070
|
+
</div>
|
|
58071
|
+
<p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed mt-4">
|
|
58072
|
+
{{ chartDescriptionText() }}
|
|
58073
|
+
</p>
|
|
58074
|
+
</div>
|
|
58075
|
+
}
|
|
58076
|
+
</div>
|
|
58077
|
+
|
|
58078
|
+
<!-- Footer -->
|
|
58079
|
+
<div [ngClass]="footerClasses()" class="px-6 py-4 border-t">
|
|
58080
|
+
<button
|
|
58081
|
+
(click)="close()"
|
|
58082
|
+
[ngClass]="closeFooterButtonClasses()"
|
|
58083
|
+
class="w-full px-4 py-2 rounded-lg transition-all font-medium hover:scale-[1.02] active:scale-[0.98]">
|
|
58084
|
+
Close
|
|
58085
|
+
</button>
|
|
58086
|
+
</div>
|
|
58087
|
+
</div>
|
|
58088
|
+
</div>
|
|
58089
|
+
</div>
|
|
58090
|
+
}
|
|
58030
58091
|
`
|
|
58031
58092
|
}]
|
|
58032
58093
|
}], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], metricEnum: [{ type: i0.Input, args: [{ isSignal: true, alias: "metricEnum", required: false }] }], metricData: [{ type: i0.Input, args: [{ isSignal: true, alias: "metricData", required: false }] }], contributingMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "contributingMetrics", required: false }] }], pacingMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingMetrics", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] }); })();
|
|
58033
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MetricReportModalComponent, { className: "MetricReportModalComponent", filePath: "lib/components/revenue-calculator-dashboard/metric-report-modal.component.ts", lineNumber:
|
|
58094
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MetricReportModalComponent, { className: "MetricReportModalComponent", filePath: "lib/components/revenue-calculator-dashboard/metric-report-modal.component.ts", lineNumber: 350 }); })();
|
|
58034
58095
|
|
|
58035
58096
|
const _c0$q = ["absoluteInputRef"];
|
|
58036
58097
|
const _c1$b = ["percentageInputRef"];
|
|
@@ -58454,7 +58515,8 @@ class InitialTargetSettingComponent {
|
|
|
58454
58515
|
if (!selectedMetric || !selectedMetric.isFunnelStage) {
|
|
58455
58516
|
return [];
|
|
58456
58517
|
}
|
|
58457
|
-
return calcs.filter(c => !c.isFunnelStage && c.funnelMetric === metricEnum)
|
|
58518
|
+
return calcs.filter(c => !c.isFunnelStage && c.funnelMetric === metricEnum)
|
|
58519
|
+
.sort((a, b) => (a.relatedInd ?? 0) - (b.relatedInd ?? 0));
|
|
58458
58520
|
}, ...(ngDevMode ? [{ debugName: "selectedContributingMetrics" }] : []));
|
|
58459
58521
|
this.animatedIncreaseAmount = signal(0, ...(ngDevMode ? [{ debugName: "animatedIncreaseAmount" }] : []));
|
|
58460
58522
|
this.animatedPercentageGrowth = signal(0, ...(ngDevMode ? [{ debugName: "animatedPercentageGrowth" }] : []));
|