@eric-emg/symphiq-components 1.2.5 → 1.2.7
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/README.md +44 -3
- package/fesm2022/symphiq-components.mjs +25660 -2832
- package/fesm2022/symphiq-components.mjs.map +1 -1
- package/index.d.ts +1407 -97
- package/index.d.ts.map +1 -1
- package/package.json +8 -8
- package/src/styles.css +227 -1
- package/styles.css +3821 -331
package/index.d.ts
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
import
|
|
1
|
+
import * as _jebgem_model from '@jebgem/model';
|
|
2
|
+
import { InsightBlockInterface, PerformanceMetricInterface, AiChartInterface, ViewModeEnum, BreakdownMetricInterface, UserInterface, FunnelAnalysisInterface, OverallAssessmentInterface } from '@jebgem/model';
|
|
2
3
|
export * from '@jebgem/model';
|
|
3
|
-
import * as
|
|
4
|
-
import { OnInit } from '@angular/core';
|
|
4
|
+
import * as _angular_core from '@angular/core';
|
|
5
|
+
import { AfterViewInit, ElementRef, WritableSignal, OnInit, OnDestroy } from '@angular/core';
|
|
5
6
|
import * as rxjs from 'rxjs';
|
|
7
|
+
import * as _jebgem_model_lib_funnel_analysis_ai_chart_interface from '@jebgem/model/lib/funnel-analysis/ai-chart.interface';
|
|
8
|
+
import { SafeHtml } from '@angular/platform-browser';
|
|
6
9
|
|
|
7
10
|
interface FunnelMetricOrder {
|
|
8
11
|
metric: string;
|
|
@@ -11,6 +14,10 @@ interface FunnelMetricOrder {
|
|
|
11
14
|
relatedInd: number;
|
|
12
15
|
isFunnelStage: boolean;
|
|
13
16
|
}
|
|
17
|
+
interface Metric {
|
|
18
|
+
metric?: string | unknown;
|
|
19
|
+
[key: string]: unknown;
|
|
20
|
+
}
|
|
14
21
|
declare class FunnelOrderService {
|
|
15
22
|
private readonly funnelOrder;
|
|
16
23
|
private readonly funnelStageNames;
|
|
@@ -18,112 +25,798 @@ declare class FunnelOrderService {
|
|
|
18
25
|
isFunnelStage(metricName: string): boolean;
|
|
19
26
|
getFunnelStageName(funnelInd: number): string;
|
|
20
27
|
getFunnelStageForMetric(metricName: string): string | null;
|
|
21
|
-
sortMetricsByFunnelOrder(metrics:
|
|
22
|
-
getMetricsForFunnelStage(metrics:
|
|
23
|
-
|
|
24
|
-
static
|
|
28
|
+
sortMetricsByFunnelOrder<T extends Metric>(metrics: T[]): T[];
|
|
29
|
+
getMetricsForFunnelStage<T extends Metric>(metrics: T[], funnelStageName: string): T[];
|
|
30
|
+
private getMetricName;
|
|
31
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<FunnelOrderService, never>;
|
|
32
|
+
static ɵprov: _angular_core.ɵɵInjectableDeclaration<FunnelOrderService>;
|
|
25
33
|
}
|
|
26
34
|
|
|
27
35
|
interface ModalState {
|
|
28
|
-
type: 'insight' | 'metric' | null;
|
|
29
|
-
data: InsightBlockInterface | PerformanceMetricInterface |
|
|
36
|
+
type: 'insight' | 'metric' | 'chart' | 'insights-list' | 'metrics-list' | 'recommendations-list' | 'competitive-analysis' | null;
|
|
37
|
+
data: InsightBlockInterface | InsightBlockInterface[] | PerformanceMetricInterface | PerformanceMetricInterface[] | AiChartInterface | {
|
|
38
|
+
metrics: PerformanceMetricInterface[];
|
|
39
|
+
insightContext?: {
|
|
40
|
+
title: string;
|
|
41
|
+
description: string;
|
|
42
|
+
businessContext: string;
|
|
43
|
+
priority: number;
|
|
44
|
+
};
|
|
45
|
+
} | {
|
|
46
|
+
recommendations: string[];
|
|
47
|
+
insightContext: {
|
|
48
|
+
title: string;
|
|
49
|
+
description: string;
|
|
50
|
+
businessContext: string;
|
|
51
|
+
priority: number;
|
|
52
|
+
};
|
|
53
|
+
} | {
|
|
54
|
+
insightContext: {
|
|
55
|
+
title: string;
|
|
56
|
+
description: string;
|
|
57
|
+
businessContext: string;
|
|
58
|
+
competitiveAnalysis: string;
|
|
59
|
+
priority: number;
|
|
60
|
+
};
|
|
61
|
+
} | null;
|
|
62
|
+
charts: AiChartInterface[];
|
|
63
|
+
previousState?: ModalState | null;
|
|
64
|
+
expandedSection?: string;
|
|
30
65
|
}
|
|
31
66
|
declare class ModalService {
|
|
32
67
|
private modalState;
|
|
33
68
|
modalState$: rxjs.Observable<ModalState>;
|
|
34
|
-
openInsightModal(insight: InsightBlockInterface): void;
|
|
35
|
-
openMetricModal(metric: PerformanceMetricInterface): void;
|
|
69
|
+
openInsightModal(insight: InsightBlockInterface, charts?: AiChartInterface[], previousState?: ModalState): void;
|
|
70
|
+
openMetricModal(metric: PerformanceMetricInterface, charts?: AiChartInterface[], previousState?: ModalState, expandedSection?: string): void;
|
|
71
|
+
openChartModal(chart: AiChartInterface, previousState?: ModalState): void;
|
|
72
|
+
openInsightsListModal(insights: InsightBlockInterface[], charts?: AiChartInterface[]): void;
|
|
73
|
+
openMetricsListModal(metrics: PerformanceMetricInterface[], charts?: AiChartInterface[], insightContext?: {
|
|
74
|
+
title: string;
|
|
75
|
+
description: string;
|
|
76
|
+
businessContext: string;
|
|
77
|
+
priority: number;
|
|
78
|
+
}): void;
|
|
79
|
+
openRecommendationsListModal(recommendations: string[], insightContext: {
|
|
80
|
+
title: string;
|
|
81
|
+
description: string;
|
|
82
|
+
businessContext: string;
|
|
83
|
+
priority: number;
|
|
84
|
+
}): void;
|
|
85
|
+
openCompetitiveAnalysisModal(insightContext: {
|
|
86
|
+
title: string;
|
|
87
|
+
description: string;
|
|
88
|
+
businessContext: string;
|
|
89
|
+
competitiveAnalysis: string;
|
|
90
|
+
priority: number;
|
|
91
|
+
}): void;
|
|
92
|
+
goBack(previousState: ModalState): void;
|
|
36
93
|
closeModal(): void;
|
|
37
|
-
static ɵfac:
|
|
38
|
-
static ɵprov:
|
|
94
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ModalService, never>;
|
|
95
|
+
static ɵprov: _angular_core.ɵɵInjectableDeclaration<ModalService>;
|
|
39
96
|
}
|
|
40
97
|
|
|
41
|
-
|
|
98
|
+
type TooltipPosition = 'top' | 'bottom' | 'left' | 'right' | 'auto';
|
|
99
|
+
type TooltipType = 'metric' | 'status' | 'trend' | 'breakdown' | 'insight' | 'priority' | 'badge' | 'progress' | 'text' | 'competitive' | 'insightsList' | 'narrative';
|
|
100
|
+
interface TooltipState {
|
|
101
|
+
type: TooltipType | null;
|
|
102
|
+
content: string | Record<string, unknown> | null;
|
|
103
|
+
position: TooltipPosition;
|
|
104
|
+
targetRect: DOMRect | null;
|
|
105
|
+
mousePosition?: {
|
|
106
|
+
x: number;
|
|
107
|
+
y: number;
|
|
108
|
+
};
|
|
109
|
+
visible: boolean;
|
|
110
|
+
}
|
|
111
|
+
declare class TooltipService {
|
|
112
|
+
private tooltipState;
|
|
113
|
+
tooltipState$: rxjs.Observable<TooltipState>;
|
|
114
|
+
show(type: TooltipType, content: string | Record<string, unknown>, targetRect: DOMRect, position?: TooltipPosition, mousePosition?: {
|
|
115
|
+
x: number;
|
|
116
|
+
y: number;
|
|
117
|
+
}): void;
|
|
118
|
+
hide(): void;
|
|
119
|
+
updatePosition(targetRect: DOMRect): void;
|
|
120
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TooltipService, never>;
|
|
121
|
+
static ɵprov: _angular_core.ɵɵInjectableDeclaration<TooltipService>;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
interface MetricValueTooltipContent {
|
|
125
|
+
metricName: string;
|
|
126
|
+
currentValue: number;
|
|
127
|
+
priorValue?: number;
|
|
128
|
+
targetValue?: number;
|
|
129
|
+
projectedValue?: number;
|
|
130
|
+
unit?: string;
|
|
131
|
+
category?: string;
|
|
132
|
+
isInverseMetric?: boolean;
|
|
133
|
+
chartData?: {
|
|
134
|
+
current: number[];
|
|
135
|
+
prior?: number[];
|
|
136
|
+
};
|
|
137
|
+
}
|
|
138
|
+
interface StatusBadgeTooltipContent {
|
|
139
|
+
status: string;
|
|
140
|
+
pacingPercentage?: number;
|
|
141
|
+
currentValue?: number;
|
|
142
|
+
projectedValue?: number;
|
|
143
|
+
targetValue?: number;
|
|
144
|
+
progressPercent?: number;
|
|
145
|
+
isInverseMetric?: boolean;
|
|
146
|
+
unit?: string;
|
|
147
|
+
title?: string;
|
|
148
|
+
description?: string;
|
|
149
|
+
priority?: number;
|
|
150
|
+
priorityExplanation?: string;
|
|
151
|
+
}
|
|
152
|
+
interface TrendIndicatorTooltipContent {
|
|
153
|
+
metricName: string;
|
|
154
|
+
currentValue: number;
|
|
155
|
+
priorValue: number;
|
|
156
|
+
trendPercent: number;
|
|
157
|
+
trendDirection: 'UP' | 'DOWN' | 'FLAT';
|
|
158
|
+
isInverseMetric?: boolean;
|
|
159
|
+
unit?: string;
|
|
160
|
+
status?: string;
|
|
161
|
+
chartData?: {
|
|
162
|
+
current: number[];
|
|
163
|
+
prior?: number[];
|
|
164
|
+
};
|
|
165
|
+
}
|
|
166
|
+
interface PriorityBadgeTooltipContent {
|
|
167
|
+
priority: number;
|
|
168
|
+
status?: string;
|
|
169
|
+
category?: string;
|
|
170
|
+
relatedMetricsCount?: number;
|
|
171
|
+
recommendationsCount?: number;
|
|
172
|
+
}
|
|
173
|
+
interface BadgeTooltipContent {
|
|
174
|
+
title?: string;
|
|
175
|
+
text?: string;
|
|
176
|
+
explanation?: string;
|
|
177
|
+
grade?: string;
|
|
178
|
+
category?: string;
|
|
179
|
+
}
|
|
180
|
+
interface BreakdownRowTooltipContent {
|
|
181
|
+
dimensionValue: string;
|
|
182
|
+
priority: number;
|
|
183
|
+
priorityLabel: string;
|
|
184
|
+
priorityExplanation: string;
|
|
185
|
+
description: string;
|
|
186
|
+
}
|
|
187
|
+
interface CompetitiveBenchmarkTooltipContent {
|
|
188
|
+
industry: string;
|
|
189
|
+
metricBenchmark: string;
|
|
190
|
+
competitiveScore: 'LEADING' | 'COMPETITIVE' | 'LAGGING';
|
|
191
|
+
description: string;
|
|
192
|
+
keyOpportunities: string;
|
|
193
|
+
metricName?: string;
|
|
194
|
+
currentValue?: number;
|
|
195
|
+
unit?: string;
|
|
196
|
+
}
|
|
197
|
+
interface InsightsListTooltipContent {
|
|
198
|
+
title: string;
|
|
199
|
+
insights: Array<{
|
|
200
|
+
title: string;
|
|
201
|
+
priority: number;
|
|
202
|
+
}>;
|
|
203
|
+
remaining?: number;
|
|
204
|
+
}
|
|
205
|
+
interface NarrativeTooltipContent {
|
|
206
|
+
title: string;
|
|
207
|
+
narrative: string;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
declare class TooltipDataService {
|
|
211
|
+
private formatCache;
|
|
212
|
+
private metricLookupCache;
|
|
213
|
+
extractMetricTooltipData(metric: PerformanceMetricInterface, chart?: any): MetricValueTooltipContent;
|
|
214
|
+
extractStatusTooltipData(metric: PerformanceMetricInterface): StatusBadgeTooltipContent;
|
|
215
|
+
extractTrendTooltipData(metric: PerformanceMetricInterface, chart?: any): TrendIndicatorTooltipContent;
|
|
216
|
+
extractPriorityTooltipData(insight: InsightBlockInterface): PriorityBadgeTooltipContent;
|
|
217
|
+
extractBreakdownRowTooltipData(metric: PerformanceMetricInterface): BreakdownRowTooltipContent;
|
|
218
|
+
findMetricByName(name: string, metrics: PerformanceMetricInterface[]): PerformanceMetricInterface | undefined;
|
|
219
|
+
formatMetricName(metricName: string): string;
|
|
220
|
+
calculateGap(current: number, target: number): number;
|
|
221
|
+
calculateProgress(current: number, target: number): number;
|
|
222
|
+
calculateAbsoluteDifference(current: number, prior: number): number;
|
|
223
|
+
calculatePacingPercentage(current: number, target: number): number;
|
|
224
|
+
formatCurrency(value: number): string;
|
|
225
|
+
formatPercentage(value: number, decimals?: number): string;
|
|
226
|
+
formatLargeNumber(value: number): string;
|
|
227
|
+
getStatusLabel(status: string): string;
|
|
228
|
+
getPriorityLabel(priority: number): string;
|
|
229
|
+
isInverseMetric(metricName: string): boolean;
|
|
230
|
+
formatDimensionValue(value?: string): string;
|
|
231
|
+
extractCompetitiveBenchmarkTooltipData(metric: PerformanceMetricInterface): CompetitiveBenchmarkTooltipContent | null;
|
|
232
|
+
hasCompetitiveBenchmark(metric: PerformanceMetricInterface): boolean;
|
|
233
|
+
getCompetitiveScoreLabel(score: string): string;
|
|
234
|
+
private determineUnit;
|
|
235
|
+
private extractChartDataFromChart;
|
|
236
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TooltipDataService, never>;
|
|
237
|
+
static ɵprov: _angular_core.ɵɵInjectableDeclaration<TooltipDataService>;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
type ViewMode = 'compact' | 'expanded';
|
|
241
|
+
type LayoutMode = 'bento' | 'grid' | 'masonry';
|
|
242
|
+
declare class ViewModeService {
|
|
243
|
+
private viewMode;
|
|
244
|
+
private layoutMode;
|
|
245
|
+
private isTransitioning;
|
|
246
|
+
private renderContent;
|
|
247
|
+
getViewMode: _angular_core.Signal<ViewMode>;
|
|
248
|
+
getLayoutMode: _angular_core.Signal<LayoutMode>;
|
|
249
|
+
getIsTransitioning: _angular_core.Signal<boolean>;
|
|
250
|
+
getRenderContent: _angular_core.Signal<boolean>;
|
|
251
|
+
toggleViewMode(): void;
|
|
252
|
+
setViewMode(mode: ViewMode): void;
|
|
253
|
+
setLayoutMode(mode: LayoutMode): void;
|
|
254
|
+
isCompact(): boolean;
|
|
255
|
+
isExpanded(): boolean;
|
|
256
|
+
isBentoLayout(): boolean;
|
|
257
|
+
isGridLayout(): boolean;
|
|
258
|
+
isMasonryLayout(): boolean;
|
|
259
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ViewModeService, never>;
|
|
260
|
+
static ɵprov: _angular_core.ɵɵInjectableDeclaration<ViewModeService>;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
type ThemeMode = 'light' | 'dark';
|
|
264
|
+
interface SemanticColors {
|
|
265
|
+
primary: number;
|
|
266
|
+
secondary: number;
|
|
267
|
+
accent: number;
|
|
268
|
+
success: number;
|
|
269
|
+
warning: number;
|
|
270
|
+
danger: number;
|
|
271
|
+
info: number;
|
|
272
|
+
neutral: number;
|
|
273
|
+
}
|
|
274
|
+
interface ChartThemeColors {
|
|
275
|
+
semantic: SemanticColors;
|
|
276
|
+
palette: number[];
|
|
277
|
+
text: {
|
|
278
|
+
primary: number;
|
|
279
|
+
secondary: number;
|
|
280
|
+
muted: number;
|
|
281
|
+
};
|
|
282
|
+
background: {
|
|
283
|
+
primary: number;
|
|
284
|
+
secondary: number;
|
|
285
|
+
tooltip: number;
|
|
286
|
+
};
|
|
287
|
+
border: {
|
|
288
|
+
primary: number;
|
|
289
|
+
secondary: number;
|
|
290
|
+
};
|
|
291
|
+
}
|
|
292
|
+
declare class ChartThemeService {
|
|
293
|
+
private currentMode;
|
|
294
|
+
/**
|
|
295
|
+
* Light mode color scheme aligned with dashboard blue-indigo-purple gradient
|
|
296
|
+
*/
|
|
297
|
+
private readonly lightTheme;
|
|
298
|
+
/**
|
|
299
|
+
* Dark mode color scheme with adjusted brightness for better visibility
|
|
300
|
+
*/
|
|
301
|
+
private readonly darkTheme;
|
|
302
|
+
/**
|
|
303
|
+
* Get current theme mode
|
|
304
|
+
*/
|
|
305
|
+
getMode(): ThemeMode;
|
|
306
|
+
/**
|
|
307
|
+
* Set theme mode
|
|
308
|
+
*/
|
|
309
|
+
setMode(mode: ThemeMode): void;
|
|
310
|
+
/**
|
|
311
|
+
* Get current theme colors
|
|
312
|
+
*/
|
|
313
|
+
getTheme(): ChartThemeColors;
|
|
314
|
+
/**
|
|
315
|
+
* Get semantic color by name
|
|
316
|
+
*/
|
|
317
|
+
getSemanticColor(name: keyof SemanticColors): number;
|
|
318
|
+
/**
|
|
319
|
+
* Get color palette for multi-series charts
|
|
320
|
+
*/
|
|
321
|
+
getPalette(): number[];
|
|
322
|
+
/**
|
|
323
|
+
* Get color by index from palette with wrapping
|
|
324
|
+
*/
|
|
325
|
+
getPaletteColor(index: number): number;
|
|
326
|
+
/**
|
|
327
|
+
* Get text colors
|
|
328
|
+
*/
|
|
329
|
+
getTextColors(): {
|
|
330
|
+
primary: number;
|
|
331
|
+
secondary: number;
|
|
332
|
+
muted: number;
|
|
333
|
+
};
|
|
334
|
+
/**
|
|
335
|
+
* Get background colors
|
|
336
|
+
*/
|
|
337
|
+
getBackgroundColors(): {
|
|
338
|
+
primary: number;
|
|
339
|
+
secondary: number;
|
|
340
|
+
tooltip: number;
|
|
341
|
+
};
|
|
342
|
+
/**
|
|
343
|
+
* Get border colors
|
|
344
|
+
*/
|
|
345
|
+
getBorderColors(): {
|
|
346
|
+
primary: number;
|
|
347
|
+
secondary: number;
|
|
348
|
+
};
|
|
349
|
+
/**
|
|
350
|
+
* Convert semantic name to color based on context
|
|
351
|
+
* Useful for dynamically coloring metrics based on their type
|
|
352
|
+
*/
|
|
353
|
+
getColorForMetricType(type: 'revenue' | 'conversion' | 'traffic' | 'engagement' | 'negative' | 'neutral'): number;
|
|
354
|
+
/**
|
|
355
|
+
* Get color for prior year data (with reduced opacity)
|
|
356
|
+
* Returns the base color number - opacity should be applied separately
|
|
357
|
+
*/
|
|
358
|
+
getPriorYearColor(baseColor: number): number;
|
|
359
|
+
/**
|
|
360
|
+
* Generate gradient colors between two points in the palette
|
|
361
|
+
* Useful for creating smooth transitions in stacked/area charts
|
|
362
|
+
*/
|
|
363
|
+
generateGradient(startIndex: number, endIndex: number, steps: number): number[];
|
|
364
|
+
/**
|
|
365
|
+
* Interpolate between two colors
|
|
366
|
+
*/
|
|
367
|
+
private interpolateColor;
|
|
368
|
+
/**
|
|
369
|
+
* Get Tailwind class for a semantic color
|
|
370
|
+
* Useful for UI elements that need to match chart colors
|
|
371
|
+
*/
|
|
372
|
+
getTailwindClass(semanticName: keyof SemanticColors, type?: 'bg' | 'text' | 'border'): string;
|
|
373
|
+
/**
|
|
374
|
+
* Convert hex color to RGB object
|
|
375
|
+
*/
|
|
376
|
+
hexToRgb(hex: number): {
|
|
377
|
+
r: number;
|
|
378
|
+
g: number;
|
|
379
|
+
b: number;
|
|
380
|
+
};
|
|
381
|
+
/**
|
|
382
|
+
* Convert RGB to hex color
|
|
383
|
+
*/
|
|
384
|
+
rgbToHex(r: number, g: number, b: number): number;
|
|
385
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChartThemeService, never>;
|
|
386
|
+
static ɵprov: _angular_core.ɵɵInjectableDeclaration<ChartThemeService>;
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
declare class ModalComponent {
|
|
390
|
+
isLightMode: _angular_core.InputSignal<boolean>;
|
|
391
|
+
viewMode: _angular_core.InputSignal<ViewModeEnum>;
|
|
392
|
+
private metricNameCache;
|
|
393
|
+
private allMetricsSignal;
|
|
394
|
+
private modalStateSignal;
|
|
395
|
+
isOpen: _angular_core.Signal<boolean>;
|
|
396
|
+
modalType: _angular_core.Signal<"metric" | "insight" | "chart" | "insights-list" | "metrics-list" | "recommendations-list" | "competitive-analysis" | null>;
|
|
397
|
+
charts: _angular_core.Signal<AiChartInterface[]>;
|
|
398
|
+
modalKey: _angular_core.Signal<number>;
|
|
399
|
+
insightData: _angular_core.Signal<InsightBlockInterface | null>;
|
|
400
|
+
metricData: _angular_core.Signal<PerformanceMetricInterface | null>;
|
|
401
|
+
chartData: _angular_core.Signal<AiChartInterface | null>;
|
|
402
|
+
chartDescription: _angular_core.Signal<string>;
|
|
403
|
+
chartType: _angular_core.Signal<_jebgem_model_lib_funnel_analysis_ai_chart_interface.ChartTypeEnum | null>;
|
|
404
|
+
chartLineData: _angular_core.Signal<AiChartInterface | null>;
|
|
405
|
+
chartBarData: _angular_core.Signal<AiChartInterface | null>;
|
|
406
|
+
chartPieData: _angular_core.Signal<AiChartInterface | null>;
|
|
407
|
+
chartAreaData: _angular_core.Signal<AiChartInterface | null>;
|
|
408
|
+
insightsListData: _angular_core.Signal<InsightBlockInterface[] | null>;
|
|
409
|
+
metricsListData: _angular_core.Signal<InsightBlockInterface | PerformanceMetricInterface | AiChartInterface | (InsightBlockInterface | PerformanceMetricInterface)[] | null>;
|
|
410
|
+
metricsListMetrics: _angular_core.Signal<PerformanceMetricInterface[]>;
|
|
411
|
+
metricsListInsightContext: _angular_core.Signal<{
|
|
412
|
+
title: string;
|
|
413
|
+
description: string;
|
|
414
|
+
businessContext: string;
|
|
415
|
+
priority: number;
|
|
416
|
+
} | null>;
|
|
417
|
+
recommendationsListData: _angular_core.Signal<InsightBlockInterface | PerformanceMetricInterface | AiChartInterface | (InsightBlockInterface | PerformanceMetricInterface)[] | null>;
|
|
418
|
+
recommendationsListRecommendations: _angular_core.Signal<string[]>;
|
|
419
|
+
recommendationsListInsightContext: _angular_core.Signal<{
|
|
420
|
+
title: string;
|
|
421
|
+
description: string;
|
|
422
|
+
businessContext: string;
|
|
423
|
+
priority: number;
|
|
424
|
+
} | null>;
|
|
425
|
+
competitiveAnalysisData: _angular_core.Signal<InsightBlockInterface | PerformanceMetricInterface | AiChartInterface | (InsightBlockInterface | PerformanceMetricInterface)[] | null>;
|
|
426
|
+
competitiveAnalysisContext: _angular_core.Signal<{
|
|
427
|
+
title: string;
|
|
428
|
+
description: string;
|
|
429
|
+
businessContext: string;
|
|
430
|
+
competitiveAnalysis: string;
|
|
431
|
+
priority: number;
|
|
432
|
+
} | null>;
|
|
433
|
+
modalHeaderPriorityBadge: _angular_core.Signal<number | null>;
|
|
434
|
+
competitiveAnalysisPanelClass: _angular_core.Signal<string>;
|
|
435
|
+
allMetrics: _angular_core.Signal<PerformanceMetricInterface[]>;
|
|
436
|
+
allInsights: _angular_core.Signal<InsightBlockInterface[]>;
|
|
437
|
+
allCharts: _angular_core.Signal<AiChartInterface[]>;
|
|
438
|
+
hasPreviousState: _angular_core.Signal<boolean>;
|
|
439
|
+
currentModalState: _angular_core.Signal<{
|
|
440
|
+
type: "insight" | "metric" | "chart" | "insights-list" | "metrics-list" | "recommendations-list" | "competitive-analysis" | null;
|
|
441
|
+
data: InsightBlockInterface | PerformanceMetricInterface | AiChartInterface | (InsightBlockInterface | PerformanceMetricInterface)[] | null;
|
|
442
|
+
charts: AiChartInterface[];
|
|
443
|
+
openedAt: number;
|
|
444
|
+
previousState: {
|
|
445
|
+
type: "insight" | "metric" | "chart" | "insights-list" | "metrics-list" | "recommendations-list" | "competitive-analysis";
|
|
446
|
+
data: InsightBlockInterface | PerformanceMetricInterface | AiChartInterface | (InsightBlockInterface | PerformanceMetricInterface)[];
|
|
447
|
+
charts: AiChartInterface[];
|
|
448
|
+
previousState: null;
|
|
449
|
+
} | null;
|
|
450
|
+
expandedSection: string | undefined;
|
|
451
|
+
}>;
|
|
452
|
+
expandedSection: _angular_core.Signal<string | undefined>;
|
|
453
|
+
modalTitle: _angular_core.Signal<string>;
|
|
454
|
+
private modalService;
|
|
455
|
+
private tooltipDataService;
|
|
456
|
+
getMetricTooltip(metric: PerformanceMetricInterface): MetricValueTooltipContent;
|
|
457
|
+
constructor();
|
|
458
|
+
getInsightContextPriorityBadgeClass(priority: number): string;
|
|
459
|
+
private computeModalTitle;
|
|
460
|
+
closeModal(): void;
|
|
461
|
+
openInsightModal(insight: InsightBlockInterface): void;
|
|
462
|
+
openMetricModalFromList(metric: PerformanceMetricInterface): void;
|
|
463
|
+
goBack(): void;
|
|
464
|
+
formatMetricName(name: string): string;
|
|
465
|
+
setMetricsAndInsights(metrics: PerformanceMetricInterface[], insights: InsightBlockInterface[], allCharts?: AiChartInterface[]): void;
|
|
466
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ModalComponent, never>;
|
|
467
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ModalComponent, "symphiq-funnel-analysis-modal", never, { "isLightMode": { "alias": "isLightMode"; "required": false; "isSignal": true; }; "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
468
|
+
}
|
|
469
|
+
|
|
470
|
+
interface NavSection {
|
|
471
|
+
id: string;
|
|
472
|
+
label: string;
|
|
473
|
+
icon: string;
|
|
474
|
+
}
|
|
475
|
+
declare class MobileBottomNavComponent {
|
|
476
|
+
isLightMode: _angular_core.InputSignal<boolean>;
|
|
477
|
+
sections: _angular_core.InputSignal<NavSection[]>;
|
|
478
|
+
activeSection: _angular_core.InputSignal<string>;
|
|
479
|
+
navigate: _angular_core.OutputEmitterRef<string>;
|
|
480
|
+
containerClass: _angular_core.Signal<"bg-white/95 border-slate-200" | "bg-slate-900/95 border-slate-700">;
|
|
481
|
+
getButtonClass(sectionId: string): string;
|
|
482
|
+
getSvgIcon(iconName: string): string;
|
|
483
|
+
onNavigate(sectionId: string): void;
|
|
484
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MobileBottomNavComponent, never>;
|
|
485
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MobileBottomNavComponent, "symphiq-mobile-bottom-nav", never, { "isLightMode": { "alias": "isLightMode"; "required": false; "isSignal": true; }; "sections": { "alias": "sections"; "required": false; "isSignal": true; }; "activeSection": { "alias": "activeSection"; "required": false; "isSignal": true; }; }, { "navigate": "navigate"; }, never, never, true, never>;
|
|
486
|
+
}
|
|
487
|
+
|
|
488
|
+
interface SearchResult {
|
|
489
|
+
id: string;
|
|
490
|
+
type: 'metric' | 'insight' | 'breakdown';
|
|
491
|
+
title: string;
|
|
492
|
+
description: string;
|
|
493
|
+
score: number;
|
|
494
|
+
data: PerformanceMetricInterface | InsightBlockInterface | BreakdownMetricInterface;
|
|
495
|
+
matchedFields: string[];
|
|
496
|
+
}
|
|
497
|
+
declare class SearchService {
|
|
498
|
+
private searchQuery;
|
|
499
|
+
private allMetrics;
|
|
500
|
+
private allInsights;
|
|
501
|
+
private allBreakdowns;
|
|
502
|
+
isSearchOpen: _angular_core.WritableSignal<boolean>;
|
|
503
|
+
highlightedResultId: _angular_core.WritableSignal<string | null>;
|
|
504
|
+
activeSearchResult: _angular_core.WritableSignal<SearchResult | null>;
|
|
505
|
+
searchResults: _angular_core.Signal<SearchResult[]>;
|
|
506
|
+
hasResults: _angular_core.Signal<boolean>;
|
|
507
|
+
setSearchQuery(query: string): void;
|
|
508
|
+
getSearchQuery(): string;
|
|
509
|
+
setData(metrics: PerformanceMetricInterface[], insights: InsightBlockInterface[], breakdowns: BreakdownMetricInterface[]): void;
|
|
510
|
+
openSearch(): void;
|
|
511
|
+
closeSearch(): void;
|
|
512
|
+
highlightResult(id: string): void;
|
|
513
|
+
clearHighlight(): void;
|
|
514
|
+
setActiveResult(result: SearchResult | null): void;
|
|
515
|
+
clearActiveResult(): void;
|
|
516
|
+
private scoreItem;
|
|
517
|
+
private fuzzyMatch;
|
|
518
|
+
private formatMetricName;
|
|
519
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SearchService, never>;
|
|
520
|
+
static ɵprov: _angular_core.ɵɵInjectableDeclaration<SearchService>;
|
|
521
|
+
}
|
|
522
|
+
|
|
523
|
+
declare class SymphiqFunnelAnalysisDashboardComponent implements AfterViewInit {
|
|
42
524
|
private funnelOrderService;
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
525
|
+
viewModeService: ViewModeService;
|
|
526
|
+
searchService: SearchService;
|
|
527
|
+
modalComponent?: ModalComponent;
|
|
528
|
+
dashboardContainer?: ElementRef<HTMLElement>;
|
|
529
|
+
requestedByUser: _angular_core.InputSignal<UserInterface | undefined>;
|
|
530
|
+
viewMode: _angular_core.InputSignal<ViewModeEnum>;
|
|
531
|
+
funnelAnalysis: _angular_core.InputSignal<FunnelAnalysisInterface>;
|
|
532
|
+
embedded: _angular_core.InputSignal<boolean>;
|
|
533
|
+
selectedCategory: _angular_core.WritableSignal<string>;
|
|
534
|
+
reverseSortOrder: _angular_core.WritableSignal<boolean>;
|
|
535
|
+
selectedSectionFilter: _angular_core.WritableSignal<string>;
|
|
536
|
+
selectedBreakdownFilter: _angular_core.WritableSignal<string>;
|
|
537
|
+
selectedCompetitiveFilter: _angular_core.WritableSignal<string>;
|
|
538
|
+
isScrolled: _angular_core.WritableSignal<boolean>;
|
|
539
|
+
scrollProgress: _angular_core.WritableSignal<number>;
|
|
540
|
+
fabExpanded: _angular_core.WritableSignal<boolean>;
|
|
541
|
+
activeNavSection: _angular_core.WritableSignal<string>;
|
|
542
|
+
isSectionTransitioning: _angular_core.WritableSignal<boolean>;
|
|
543
|
+
isCategoryTransitioning: _angular_core.WritableSignal<boolean>;
|
|
544
|
+
isBreakdownTransitioning: _angular_core.WritableSignal<boolean>;
|
|
545
|
+
isCompetitiveTransitioning: _angular_core.WritableSignal<boolean>;
|
|
546
|
+
isOverallAssessmentLoading: _angular_core.WritableSignal<boolean>;
|
|
547
|
+
areChartsLoading: _angular_core.Signal<boolean>;
|
|
548
|
+
private scrollTimeout;
|
|
549
|
+
private lastScrollPosition;
|
|
550
|
+
private isProgrammaticScroll;
|
|
551
|
+
private lastStateChangeTime;
|
|
552
|
+
private readonly STATE_CHANGE_COOLDOWN;
|
|
553
|
+
navSections: NavSection[];
|
|
554
|
+
isLightMode: _angular_core.Signal<boolean>;
|
|
555
|
+
performanceOverview: _angular_core.Signal<_jebgem_model.PerformanceOverviewStructuredV3Interface>;
|
|
556
|
+
insights: _angular_core.Signal<InsightBlockInterface[]>;
|
|
557
|
+
private allBreakdowns;
|
|
558
|
+
breakdowns: _angular_core.Signal<BreakdownMetricInterface[]>;
|
|
559
|
+
allMetrics: _angular_core.Signal<PerformanceMetricInterface[]>;
|
|
560
|
+
competitiveMetrics: _angular_core.Signal<PerformanceMetricInterface[]>;
|
|
561
|
+
revenueMetric: _angular_core.Signal<PerformanceMetricInterface | undefined>;
|
|
562
|
+
revenueValue: _angular_core.Signal<number>;
|
|
563
|
+
revenueTrend: _angular_core.Signal<number>;
|
|
564
|
+
allCharts: _angular_core.Signal<AiChartInterface[]>;
|
|
565
|
+
/**
|
|
566
|
+
* Pre-computed map: performanceItemId -> charts[]
|
|
567
|
+
* Enables O(1) lookups instead of array filtering on each access
|
|
568
|
+
*/
|
|
569
|
+
private chartsById;
|
|
570
|
+
headerClass: _angular_core.Signal<string>;
|
|
571
|
+
headerTitleClass: _angular_core.Signal<"text-slate-900" | "text-white">;
|
|
572
|
+
headerSubtitleClass: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
|
|
573
|
+
metaLabelClass: _angular_core.Signal<"text-slate-600" | "text-slate-500">;
|
|
574
|
+
sectionTitleClass: _angular_core.Signal<"text-slate-900" | "text-white">;
|
|
575
|
+
selectClass: _angular_core.Signal<"bg-white text-slate-900 border-slate-300 hover:border-blue-400 transition-all duration-200" | "bg-slate-700 text-white border-slate-600 hover:border-slate-500 transition-all duration-200">;
|
|
576
|
+
sortButtonClass: _angular_core.Signal<"bg-white text-slate-900 border border-slate-300 hover:bg-blue-50 hover:border-blue-400 hover:text-blue-600 transition-all duration-200" | "bg-slate-700 text-white border border-slate-600 hover:bg-slate-600 hover:border-slate-500 transition-all duration-200">;
|
|
577
|
+
formattedGeneratedDate: _angular_core.Signal<string>;
|
|
578
|
+
private filteredMetrics;
|
|
579
|
+
groupedMetrics: _angular_core.Signal<{
|
|
63
580
|
funnelMetric: PerformanceMetricInterface;
|
|
64
581
|
relatedMetrics: PerformanceMetricInterface[];
|
|
582
|
+
}[]>;
|
|
583
|
+
categories: ({
|
|
584
|
+
value: string;
|
|
585
|
+
label: string;
|
|
586
|
+
divider?: undefined;
|
|
587
|
+
} | {
|
|
588
|
+
value: string;
|
|
589
|
+
label: string;
|
|
590
|
+
divider: boolean;
|
|
591
|
+
})[];
|
|
592
|
+
sectionFilters: {
|
|
593
|
+
value: string;
|
|
594
|
+
label: string;
|
|
65
595
|
}[];
|
|
596
|
+
breakdownFilters: ({
|
|
597
|
+
value: string;
|
|
598
|
+
label: string;
|
|
599
|
+
divider?: undefined;
|
|
600
|
+
} | {
|
|
601
|
+
value: string;
|
|
602
|
+
label: string;
|
|
603
|
+
divider: boolean;
|
|
604
|
+
})[];
|
|
605
|
+
competitiveFilters: ({
|
|
606
|
+
value: string;
|
|
607
|
+
label: string;
|
|
608
|
+
divider?: undefined;
|
|
609
|
+
} | {
|
|
610
|
+
value: string;
|
|
611
|
+
label: string;
|
|
612
|
+
divider: boolean;
|
|
613
|
+
})[];
|
|
614
|
+
showOverallPerformance: _angular_core.Signal<boolean>;
|
|
615
|
+
showKeyInsights: _angular_core.Signal<boolean>;
|
|
616
|
+
showPerformanceMetrics: _angular_core.Signal<boolean>;
|
|
617
|
+
showPerformanceBreakdowns: _angular_core.Signal<boolean>;
|
|
618
|
+
showCompetitiveIntelligence: _angular_core.Signal<boolean>;
|
|
619
|
+
private dateFormatCache;
|
|
620
|
+
constructor(funnelOrderService: FunnelOrderService, viewModeService: ViewModeService, searchService: SearchService);
|
|
621
|
+
ngAfterViewInit(): void;
|
|
622
|
+
handleSearchResult(result: SearchResult): void;
|
|
623
|
+
clearSearchResult(): void;
|
|
66
624
|
isFunnelStage(metricName: string): boolean;
|
|
67
625
|
formatDate(dateString: string): string;
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
626
|
+
chartsForMetric(metric: PerformanceMetricInterface): AiChartInterface[];
|
|
627
|
+
chartsForInsight(insight: InsightBlockInterface): AiChartInterface[];
|
|
628
|
+
chartsForBreakdown(breakdown: BreakdownMetricInterface): AiChartInterface[];
|
|
629
|
+
chartsForItem(performanceItemId: string): AiChartInterface[];
|
|
630
|
+
toggleSortOrder(): void;
|
|
631
|
+
changeSectionFilter(newFilter: string): void;
|
|
632
|
+
changeCategoryFilter(newCategory: string): void;
|
|
633
|
+
changeBreakdownFilter(newFilter: string): void;
|
|
634
|
+
changeCompetitiveFilter(newFilter: string): void;
|
|
635
|
+
getBentoCardClass(metric: PerformanceMetricInterface, index: number): string;
|
|
636
|
+
getInsightCardClass(insight: InsightBlockInterface): string;
|
|
637
|
+
buttonClass: _angular_core.Signal<"focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors duration-200 cursor-pointer bg-slate-100 hover:bg-slate-200 text-slate-700 border border-slate-300" | "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors duration-200 cursor-pointer bg-slate-700 hover:bg-slate-600 text-slate-200 border border-slate-600">;
|
|
638
|
+
onContainerScroll(container: HTMLElement): void;
|
|
639
|
+
onScroll(): void;
|
|
640
|
+
scrollToTop(): void;
|
|
641
|
+
scrollToSection(sectionId: string): void;
|
|
642
|
+
handleMobileNavigation(sectionId: string): void;
|
|
643
|
+
getCategoryPillClass(categoryValue: string): string;
|
|
84
644
|
formatValue(value: number): string;
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
getStatusLabel(): string;
|
|
88
|
-
getPacingPercentage(): number;
|
|
89
|
-
getPacingBarClass(): string;
|
|
90
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<ModalComponent, never>;
|
|
91
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<ModalComponent, "symphiq-funnel-analysis-modal", never, {}, {}, never, never, true, never>;
|
|
645
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SymphiqFunnelAnalysisDashboardComponent, never>;
|
|
646
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SymphiqFunnelAnalysisDashboardComponent, "symphiq-funnel-analysis-dashboard", never, { "requestedByUser": { "alias": "requestedByUser"; "required": false; "isSignal": true; }; "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; "funnelAnalysis": { "alias": "funnelAnalysis"; "required": false; "isSignal": true; }; "embedded": { "alias": "embedded"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
92
647
|
}
|
|
93
648
|
|
|
94
649
|
declare class MetricCardComponent {
|
|
650
|
+
metric: _angular_core.InputSignal<PerformanceMetricInterface>;
|
|
651
|
+
insights: _angular_core.InputSignal<InsightBlockInterface[]>;
|
|
652
|
+
charts: _angular_core.InputSignal<AiChartInterface[]>;
|
|
653
|
+
allCharts: _angular_core.InputSignal<AiChartInterface[]>;
|
|
654
|
+
analysis: _angular_core.InputSignal<any>;
|
|
655
|
+
isLightMode: _angular_core.InputSignal<boolean>;
|
|
656
|
+
isLoading: _angular_core.InputSignal<boolean>;
|
|
657
|
+
isCompactMode: _angular_core.InputSignal<boolean>;
|
|
658
|
+
isInModal: _angular_core.InputSignal<boolean>;
|
|
659
|
+
currentModalState: _angular_core.InputSignal<ModalState | undefined>;
|
|
660
|
+
viewMode: _angular_core.InputSignal<ViewModeEnum>;
|
|
661
|
+
initialExpandedSection: _angular_core.InputSignal<string | undefined>;
|
|
662
|
+
Math: Math;
|
|
663
|
+
milestones: number[];
|
|
664
|
+
currentYear: number;
|
|
665
|
+
animatedValue: _angular_core.WritableSignal<number>;
|
|
666
|
+
valueChanged: _angular_core.WritableSignal<boolean>;
|
|
667
|
+
isExpanded: _angular_core.WritableSignal<boolean>;
|
|
668
|
+
isCompetitiveBenchmarkExpanded: _angular_core.WritableSignal<boolean>;
|
|
669
|
+
miniChartData: number[];
|
|
670
|
+
private animationFrame;
|
|
671
|
+
private hasInitialized;
|
|
672
|
+
private metricNameCache;
|
|
673
|
+
private valueFormatCache;
|
|
95
674
|
private modalService;
|
|
96
675
|
private funnelOrderService;
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
676
|
+
private tooltipDataService;
|
|
677
|
+
constructor();
|
|
678
|
+
animateValue(target: number): void;
|
|
679
|
+
isFunnelStage: _angular_core.Signal<boolean>;
|
|
680
|
+
lightModeCardClass: _angular_core.Signal<string>;
|
|
681
|
+
darkModeCardClass: _angular_core.Signal<string>;
|
|
682
|
+
funnelStageLightClass: _angular_core.Signal<string>;
|
|
683
|
+
funnelStageDarkClass: _angular_core.Signal<string>;
|
|
684
|
+
cardClass: _angular_core.Signal<string>;
|
|
685
|
+
relatedInsights: _angular_core.Signal<InsightBlockInterface[]>;
|
|
686
|
+
trendClass: _angular_core.Signal<"text-emerald-400" | "text-red-400">;
|
|
687
|
+
statusBadgeLightClass: _angular_core.Signal<string>;
|
|
688
|
+
statusBadgeDarkClass: _angular_core.Signal<string>;
|
|
689
|
+
statusBadgeClass: _angular_core.Signal<string>;
|
|
690
|
+
statusBadgeStyle: _angular_core.Signal<{
|
|
691
|
+
animation: string;
|
|
692
|
+
} | {
|
|
693
|
+
animation?: undefined;
|
|
694
|
+
}>;
|
|
695
|
+
pacingBarPercentage: _angular_core.Signal<number>;
|
|
696
|
+
pacingBarClass: _angular_core.Signal<"bg-gradient-to-r from-blue-400 via-emerald-400 to-emerald-500" | "bg-gradient-to-r from-amber-500 via-amber-400 to-red-500" | "bg-gradient-to-r from-blue-400 via-blue-500 to-emerald-500">;
|
|
697
|
+
glowClass: _angular_core.Signal<"" | "shadow-emerald-500/50 shadow-lg animate-pulse-glow">;
|
|
698
|
+
deltaValue: _angular_core.Signal<number>;
|
|
699
|
+
deltaPercent: _angular_core.Signal<number>;
|
|
700
|
+
deltaClass: _angular_core.Signal<"text-slate-400" | "text-emerald-400" | "text-red-400">;
|
|
104
701
|
openInsightModal(insight: InsightBlockInterface): void;
|
|
702
|
+
openInsightsModal(): void;
|
|
703
|
+
openChartModal(chart: AiChartInterface): void;
|
|
704
|
+
getInsightTooltip(insight: InsightBlockInterface): {
|
|
705
|
+
sections: {
|
|
706
|
+
title: string;
|
|
707
|
+
content: string;
|
|
708
|
+
}[];
|
|
709
|
+
};
|
|
710
|
+
toggleExpand(): void;
|
|
105
711
|
formatMetricName(name: string): string;
|
|
106
712
|
formatValue(value: number): string;
|
|
107
|
-
getTrendClass(): string;
|
|
108
|
-
isGoodTrend(): boolean;
|
|
109
|
-
getStatusBadgeClass(): string;
|
|
110
713
|
getStatusLabel(): string;
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
714
|
+
getStatusIcon(): string;
|
|
715
|
+
metricValueTooltip: _angular_core.Signal<MetricValueTooltipContent>;
|
|
716
|
+
statusTooltip: _angular_core.Signal<StatusBadgeTooltipContent>;
|
|
717
|
+
trendTooltip: _angular_core.Signal<TrendIndicatorTooltipContent>;
|
|
718
|
+
funnelStageTooltip: _angular_core.Signal<{
|
|
719
|
+
text: string;
|
|
720
|
+
category: string;
|
|
721
|
+
}>;
|
|
722
|
+
priorityTooltip: _angular_core.Signal<{
|
|
723
|
+
priority: number;
|
|
724
|
+
explanation: string;
|
|
725
|
+
metricName: string;
|
|
726
|
+
category: string;
|
|
727
|
+
}>;
|
|
728
|
+
hasCompetitiveBenchmark: _angular_core.Signal<boolean>;
|
|
729
|
+
competitiveBenchmarkTooltip: _angular_core.Signal<CompetitiveBenchmarkTooltipContent | undefined>;
|
|
730
|
+
competitiveScoreBadgeLightClass: _angular_core.Signal<string>;
|
|
731
|
+
competitiveScoreBadgeDarkClass: _angular_core.Signal<string>;
|
|
732
|
+
competitiveScoreBadgeClass: _angular_core.Signal<string>;
|
|
733
|
+
competitiveScoreTextClass: _angular_core.Signal<"" | "text-emerald-600" | "text-blue-700" | "text-blue-400" | "text-orange-600">;
|
|
734
|
+
competitiveComparisonDefaultClass: _angular_core.Signal<"text-slate-700" | "text-slate-300">;
|
|
735
|
+
competitiveComparisonClass: _angular_core.Signal<"text-slate-700" | "text-slate-300" | "text-emerald-600 font-semibold" | "text-orange-600 font-semibold">;
|
|
736
|
+
getCompetitiveScoreIcon(): string;
|
|
737
|
+
getCompetitiveScoreLabel(): string;
|
|
738
|
+
getCompetitiveScoreLabelFull(): string;
|
|
739
|
+
getCompetitiveBenchmarkRange(): string;
|
|
740
|
+
getCompetitiveBenchmarkDescription(): string;
|
|
741
|
+
getCompetitiveIndustry(): string;
|
|
742
|
+
getCompetitiveKeyOpportunities(): string;
|
|
743
|
+
toggleCompetitiveBenchmark(): void;
|
|
744
|
+
hasProjectedValue(): boolean;
|
|
745
|
+
getProjectedValue(): number | undefined;
|
|
746
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MetricCardComponent, never>;
|
|
747
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MetricCardComponent, "symphiq-funnel-analysis-metric-card", never, { "metric": { "alias": "metric"; "required": false; "isSignal": true; }; "insights": { "alias": "insights"; "required": false; "isSignal": true; }; "charts": { "alias": "charts"; "required": false; "isSignal": true; }; "allCharts": { "alias": "allCharts"; "required": false; "isSignal": true; }; "analysis": { "alias": "analysis"; "required": false; "isSignal": true; }; "isLightMode": { "alias": "isLightMode"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "isCompactMode": { "alias": "isCompactMode"; "required": false; "isSignal": true; }; "isInModal": { "alias": "isInModal"; "required": false; "isSignal": true; }; "currentModalState": { "alias": "currentModalState"; "required": false; "isSignal": true; }; "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; "initialExpandedSection": { "alias": "initialExpandedSection"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
115
748
|
}
|
|
116
749
|
|
|
117
750
|
declare class InsightCardComponent {
|
|
751
|
+
insight: _angular_core.InputSignal<InsightBlockInterface>;
|
|
752
|
+
allMetrics: _angular_core.InputSignal<PerformanceMetricInterface[]>;
|
|
753
|
+
charts: _angular_core.InputSignal<AiChartInterface[]>;
|
|
754
|
+
allCharts: _angular_core.InputSignal<AiChartInterface[]>;
|
|
755
|
+
isLightMode: _angular_core.InputSignal<boolean>;
|
|
756
|
+
isInModal: _angular_core.InputSignal<boolean>;
|
|
757
|
+
isLoading: _angular_core.InputSignal<boolean>;
|
|
758
|
+
isCompactMode: _angular_core.InputSignal<boolean>;
|
|
759
|
+
currentModalState: _angular_core.InputSignal<ModalState | undefined>;
|
|
760
|
+
viewMode: _angular_core.InputSignal<ViewModeEnum>;
|
|
761
|
+
isExpanded: _angular_core.WritableSignal<boolean>;
|
|
762
|
+
isCompetitiveContextExpanded: _angular_core.WritableSignal<boolean>;
|
|
763
|
+
lightModeTitleClass: _angular_core.Signal<string>;
|
|
764
|
+
darkModeTitleClass: _angular_core.Signal<string>;
|
|
765
|
+
lightModeLabelClass: _angular_core.Signal<string>;
|
|
766
|
+
darkModeLabelClass: _angular_core.Signal<string>;
|
|
767
|
+
lightModeDescriptionClass: _angular_core.Signal<string>;
|
|
768
|
+
darkModeDescriptionClass: _angular_core.Signal<string>;
|
|
769
|
+
lightModeMetricButtonClass: _angular_core.Signal<string>;
|
|
770
|
+
darkModeMetricButtonClass: _angular_core.Signal<string>;
|
|
771
|
+
lightModeRecommendationClass: _angular_core.Signal<string>;
|
|
772
|
+
darkModeRecommendationClass: _angular_core.Signal<string>;
|
|
773
|
+
titleClass: _angular_core.Signal<string>;
|
|
774
|
+
labelClass: _angular_core.Signal<string>;
|
|
775
|
+
descriptionClass: _angular_core.Signal<string>;
|
|
776
|
+
metricButtonClass: _angular_core.Signal<string>;
|
|
777
|
+
recommendationItemClass: _angular_core.Signal<string>;
|
|
778
|
+
priorityBadgeLightClass: _angular_core.Signal<"w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-red-100/70 text-red-700 border-red-400/60" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-amber-100/70 text-amber-700 border-amber-400/60" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-blue-100/70 text-blue-700 border-blue-400/60" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-slate-100/70 text-slate-700 border-slate-400/60">;
|
|
779
|
+
priorityBadgeDarkClass: _angular_core.Signal<"w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-red-500/20 text-red-400 border-red-500/50" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-amber-500/20 text-amber-400 border-amber-500/50" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-blue-500/20 text-blue-400 border-blue-500/50" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-slate-500/20 text-slate-400 border-slate-500/50">;
|
|
780
|
+
priorityBadgeClass: _angular_core.Signal<"w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-red-100/70 text-red-700 border-red-400/60" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-amber-100/70 text-amber-700 border-amber-400/60" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-blue-100/70 text-blue-700 border-blue-400/60" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-slate-100/70 text-slate-700 border-slate-400/60" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-red-500/20 text-red-400 border-red-500/50" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-amber-500/20 text-amber-400 border-amber-500/50" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-blue-500/20 text-blue-400 border-blue-500/50" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-slate-500/20 text-slate-400 border-slate-500/50">;
|
|
781
|
+
containerLightClass: _angular_core.Signal<"transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 cursor-pointer group bg-gradient-to-br from-white to-blue-50/50 border-2 border-blue-300 hover:border-blue-400 shadow-lg shadow-blue-200/50 hover:shadow-blue-300/60" | "transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 cursor-pointer group bg-white border-slate-200 hover:border-blue-400 hover:shadow-blue-100/50">;
|
|
782
|
+
containerDarkClass: _angular_core.Signal<"transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 cursor-pointer group bg-gradient-to-br from-slate-800 to-blue-900/20 border-2 border-blue-500/40 hover:border-blue-400/60 shadow-lg shadow-blue-500/20 hover:shadow-blue-500/30" | "transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 cursor-pointer group bg-slate-800 border-slate-700 hover:border-slate-500 hover:shadow-slate-900/50">;
|
|
783
|
+
containerClass: _angular_core.Signal<"transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 cursor-pointer group bg-gradient-to-br from-white to-blue-50/50 border-2 border-blue-300 hover:border-blue-400 shadow-lg shadow-blue-200/50 hover:shadow-blue-300/60" | "transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 cursor-pointer group bg-white border-slate-200 hover:border-blue-400 hover:shadow-blue-100/50" | "transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 cursor-pointer group bg-gradient-to-br from-slate-800 to-blue-900/20 border-2 border-blue-500/40 hover:border-blue-400/60 shadow-lg shadow-blue-500/20 hover:shadow-blue-500/30" | "transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 cursor-pointer group bg-slate-800 border-slate-700 hover:border-slate-500 hover:shadow-slate-900/50">;
|
|
784
|
+
descriptionWithContextTooltip: _angular_core.Signal<{
|
|
785
|
+
sections: {
|
|
786
|
+
title: string;
|
|
787
|
+
content: string;
|
|
788
|
+
}[];
|
|
789
|
+
}>;
|
|
790
|
+
private metricNameCache;
|
|
118
791
|
private modalService;
|
|
119
|
-
|
|
120
|
-
allMetrics: PerformanceMetricInterface[];
|
|
121
|
-
constructor(modalService: ModalService);
|
|
792
|
+
private tooltipDataService;
|
|
122
793
|
formatMetricName(name: string): string;
|
|
123
794
|
openMetricModal(metricName: string): void;
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
795
|
+
openMetricsModal(): void;
|
|
796
|
+
openRecommendationsModal(): void;
|
|
797
|
+
openCompetitiveAnalysisModal(): void;
|
|
798
|
+
openChartModal(chart: AiChartInterface): void;
|
|
799
|
+
handleHeaderClick(event: Event): void;
|
|
800
|
+
handleContentClick(event: Event): void;
|
|
801
|
+
priorityBadgeStyle: _angular_core.Signal<{
|
|
802
|
+
animation: string;
|
|
803
|
+
} | {
|
|
804
|
+
animation?: undefined;
|
|
805
|
+
}>;
|
|
806
|
+
priorityTooltip: _angular_core.Signal<PriorityBadgeTooltipContent>;
|
|
807
|
+
private metricTooltipMap;
|
|
808
|
+
getMetricPillTooltip(metricName: string): MetricValueTooltipContent | Record<string, unknown>;
|
|
809
|
+
toggleExpanded(): void;
|
|
810
|
+
toggleCompetitiveContext(): void;
|
|
811
|
+
hasCompetitiveAnalysis(): boolean;
|
|
812
|
+
getCompetitiveAnalysis(): string;
|
|
813
|
+
competitiveContextPanelLightBaseClass: _angular_core.Signal<string>;
|
|
814
|
+
competitiveContextPanelDarkBaseClass: _angular_core.Signal<string>;
|
|
815
|
+
priorityBorderLightClass: _angular_core.Signal<"border-l-red-400" | "border-l-amber-400" | "border-l-blue-400" | "border-l-slate-400">;
|
|
816
|
+
priorityBorderDarkClass: _angular_core.Signal<"border-l-red-500" | "border-l-amber-500" | "border-l-blue-500" | "border-l-slate-500">;
|
|
817
|
+
competitiveContextPanelClass: _angular_core.Signal<string>;
|
|
818
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<InsightCardComponent, never>;
|
|
819
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<InsightCardComponent, "symphiq-funnel-analysis-insight-card", never, { "insight": { "alias": "insight"; "required": false; "isSignal": true; }; "allMetrics": { "alias": "allMetrics"; "required": false; "isSignal": true; }; "charts": { "alias": "charts"; "required": false; "isSignal": true; }; "allCharts": { "alias": "allCharts"; "required": false; "isSignal": true; }; "isLightMode": { "alias": "isLightMode"; "required": false; "isSignal": true; }; "isInModal": { "alias": "isInModal"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "isCompactMode": { "alias": "isCompactMode"; "required": false; "isSignal": true; }; "currentModalState": { "alias": "currentModalState"; "required": false; "isSignal": true; }; "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
127
820
|
}
|
|
128
821
|
|
|
129
822
|
interface MetricGroup {
|
|
@@ -132,37 +825,654 @@ interface MetricGroup {
|
|
|
132
825
|
category: string;
|
|
133
826
|
values: PerformanceMetricInterface[];
|
|
134
827
|
}
|
|
135
|
-
declare class BreakdownSectionComponent
|
|
136
|
-
breakdown: BreakdownMetricInterface
|
|
828
|
+
declare class BreakdownSectionComponent {
|
|
829
|
+
breakdown: _angular_core.InputSignal<BreakdownMetricInterface>;
|
|
830
|
+
charts: _angular_core.InputSignal<AiChartInterface[]>;
|
|
831
|
+
isLightMode: _angular_core.InputSignal<boolean>;
|
|
832
|
+
isLoading: _angular_core.InputSignal<boolean>;
|
|
833
|
+
isCompactMode: _angular_core.InputSignal<boolean>;
|
|
137
834
|
Math: Math;
|
|
138
|
-
|
|
139
|
-
|
|
835
|
+
private tooltipDataService;
|
|
836
|
+
private modalService;
|
|
837
|
+
private sanitizer;
|
|
838
|
+
expandedMetrics: WritableSignal<Set<string>>;
|
|
839
|
+
animatedValues: Map<string, WritableSignal<number>>;
|
|
840
|
+
valueChangedFlags: Map<string, WritableSignal<boolean>>;
|
|
841
|
+
private animationFrames;
|
|
842
|
+
private previousPositions;
|
|
843
|
+
private hasInitialized;
|
|
844
|
+
metricGroups: _angular_core.Signal<MetricGroup[]>;
|
|
845
|
+
private lightModeLoadingContainerClass;
|
|
846
|
+
private darkModeLoadingContainerClass;
|
|
847
|
+
loadingContainerClass: _angular_core.Signal<string>;
|
|
848
|
+
private lightModeLoadingSkeletonItemClass;
|
|
849
|
+
private darkModeLoadingSkeletonItemClass;
|
|
850
|
+
loadingSkeletonItemClass: _angular_core.Signal<string>;
|
|
851
|
+
private lightModeContainerClass;
|
|
852
|
+
private darkModeContainerClass;
|
|
853
|
+
containerClass: _angular_core.Signal<string>;
|
|
854
|
+
private lightModeTitleClass;
|
|
855
|
+
private darkModeTitleClass;
|
|
856
|
+
titleClass: _angular_core.Signal<string>;
|
|
857
|
+
private lightModeSubtitleClass;
|
|
858
|
+
private darkModeSubtitleClass;
|
|
859
|
+
subtitleClass: _angular_core.Signal<string>;
|
|
860
|
+
private lightModeMetricLabelClass;
|
|
861
|
+
private darkModeMetricLabelClass;
|
|
862
|
+
metricLabelClass: _angular_core.Signal<string>;
|
|
863
|
+
constructor();
|
|
864
|
+
private getMetricKey;
|
|
865
|
+
getAnimatedValue(metric: PerformanceMetricInterface, groupMetric: string, index: number): number;
|
|
866
|
+
isValueChanged(metric: PerformanceMetricInterface, groupMetric: string, index: number): boolean;
|
|
867
|
+
private animateValue;
|
|
868
|
+
sortedMetricGroups: _angular_core.Signal<{
|
|
869
|
+
values: PerformanceMetricInterface[];
|
|
870
|
+
metric: string;
|
|
871
|
+
metricLabel: string;
|
|
872
|
+
category: string;
|
|
873
|
+
}[]>;
|
|
140
874
|
groupMetrics(): MetricGroup[];
|
|
875
|
+
sortMetricValues(values: PerformanceMetricInterface[]): PerformanceMetricInterface[];
|
|
876
|
+
private getRowBackgroundClassLight;
|
|
877
|
+
private getRowBackgroundClassDark;
|
|
878
|
+
getRowBackgroundClass(metric: PerformanceMetricInterface, index: number): string;
|
|
879
|
+
private getPriorityDividerClassLight;
|
|
880
|
+
private getPriorityDividerClassDark;
|
|
881
|
+
getPriorityDividerClass(metric: PerformanceMetricInterface, index: number, values: PerformanceMetricInterface[]): string;
|
|
882
|
+
private getPriorityBadgeClassLight;
|
|
883
|
+
private getPriorityBadgeClassDark;
|
|
884
|
+
getPriorityBadgeClass(priority: number): string;
|
|
885
|
+
getPriorityBadgeStyle(priority: number): Record<string, string>;
|
|
141
886
|
formatMetricLabel(metric: string): string;
|
|
887
|
+
private getMetricGroupHeaderClassLight;
|
|
888
|
+
private getMetricGroupHeaderClassDark;
|
|
889
|
+
getMetricGroupHeaderClass(category: string): string;
|
|
890
|
+
private getMetricCategoryBadgeClassLight;
|
|
891
|
+
private getMetricCategoryBadgeClassDark;
|
|
892
|
+
getMetricCategoryBadgeClass(category: string): string;
|
|
142
893
|
formatDimensionValue(value?: string): string;
|
|
143
894
|
formatValue(value: number, category: string | undefined, metric?: string): string;
|
|
144
|
-
getTrendClass(metric:
|
|
895
|
+
getTrendClass(metric: PerformanceMetricInterface): string;
|
|
896
|
+
private getStatusBadgeClassLight;
|
|
897
|
+
private getStatusBadgeClassDark;
|
|
145
898
|
getStatusBadgeClass(status: string | undefined): string;
|
|
899
|
+
getStatusBadgeStyle(status: string | undefined): Record<string, string>;
|
|
146
900
|
getStatusLabel(status: string | undefined): string;
|
|
147
|
-
|
|
148
|
-
|
|
901
|
+
getStatusIcon(status: string | undefined): string;
|
|
902
|
+
getTrendTooltip(metric: PerformanceMetricInterface): TrendIndicatorTooltipContent;
|
|
903
|
+
getBreakdownRowTooltip(metric: PerformanceMetricInterface): BreakdownRowTooltipContent;
|
|
904
|
+
calculateTrendPercent(metric: PerformanceMetricInterface): number;
|
|
905
|
+
openChartModal(chart: AiChartInterface): void;
|
|
906
|
+
getMiniSparkline(metric: PerformanceMetricInterface): SafeHtml;
|
|
907
|
+
isMetricExpanded(metricKey: string): boolean;
|
|
908
|
+
toggleMetricExpansion(metricKey: string): void;
|
|
909
|
+
getTopPriorityMetrics(metrics: PerformanceMetricInterface[], count?: number): PerformanceMetricInterface[];
|
|
910
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<BreakdownSectionComponent, never>;
|
|
911
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<BreakdownSectionComponent, "symphiq-funnel-analysis-breakdown-section", never, { "breakdown": { "alias": "breakdown"; "required": false; "isSignal": true; }; "charts": { "alias": "charts"; "required": false; "isSignal": true; }; "isLightMode": { "alias": "isLightMode"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "isCompactMode": { "alias": "isCompactMode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
149
912
|
}
|
|
150
913
|
|
|
151
914
|
declare class OverallAssessmentComponent {
|
|
152
|
-
assessment: OverallAssessmentInterface
|
|
153
|
-
revenueMetric
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
915
|
+
assessment: _angular_core.InputSignal<OverallAssessmentInterface>;
|
|
916
|
+
revenueMetric: _angular_core.InputSignal<PerformanceMetricInterface | undefined>;
|
|
917
|
+
charts: _angular_core.InputSignal<AiChartInterface[]>;
|
|
918
|
+
metrics: _angular_core.InputSignal<PerformanceMetricInterface[]>;
|
|
919
|
+
isLightMode: _angular_core.InputSignal<boolean>;
|
|
920
|
+
isLoading: _angular_core.InputSignal<boolean>;
|
|
921
|
+
isCompactMode: _angular_core.InputSignal<boolean>;
|
|
922
|
+
isChartsLoading: _angular_core.InputSignal<boolean>;
|
|
923
|
+
private modalService;
|
|
924
|
+
private tooltipDataService;
|
|
925
|
+
hasCompetitiveData: _angular_core.Signal<boolean>;
|
|
926
|
+
openChartModal(chart: AiChartInterface): void;
|
|
927
|
+
scrollToCompetitiveSection(): void;
|
|
928
|
+
lightModeContainerClass: _angular_core.Signal<string>;
|
|
929
|
+
darkModeContainerClass: _angular_core.Signal<string>;
|
|
930
|
+
containerClass: _angular_core.Signal<string>;
|
|
931
|
+
lightModeTitleClass: _angular_core.Signal<string>;
|
|
932
|
+
darkModeTitleClass: _angular_core.Signal<string>;
|
|
933
|
+
titleClass: _angular_core.Signal<string>;
|
|
934
|
+
lightModeSubtitleClass: _angular_core.Signal<string>;
|
|
935
|
+
darkModeSubtitleClass: _angular_core.Signal<string>;
|
|
936
|
+
subtitleClass: _angular_core.Signal<string>;
|
|
937
|
+
lightModeBadgeLabelClass: _angular_core.Signal<string>;
|
|
938
|
+
darkModeBadgeLabelClass: _angular_core.Signal<string>;
|
|
939
|
+
badgeLabelClass: _angular_core.Signal<string>;
|
|
940
|
+
statusBadgeClass: _angular_core.Signal<string>;
|
|
941
|
+
statusLabel: _angular_core.Signal<string>;
|
|
942
|
+
gradeBadgeClass: _angular_core.Signal<string>;
|
|
943
|
+
shouldPulseGrade: _angular_core.Signal<boolean>;
|
|
944
|
+
lightModeRevenueIconBgClass: _angular_core.Signal<string>;
|
|
945
|
+
darkModeRevenueIconBgClass: _angular_core.Signal<string>;
|
|
946
|
+
revenueIconBgClass: _angular_core.Signal<string>;
|
|
947
|
+
lightModeRevenueCardClass: _angular_core.Signal<string>;
|
|
948
|
+
darkModeRevenueCardClass: _angular_core.Signal<string>;
|
|
949
|
+
revenueCardClass: _angular_core.Signal<string>;
|
|
950
|
+
lightModeRevenueIconClass: _angular_core.Signal<string>;
|
|
951
|
+
darkModeRevenueIconClass: _angular_core.Signal<string>;
|
|
952
|
+
revenueIconClass: _angular_core.Signal<string>;
|
|
953
|
+
formattedRevenueValue: _angular_core.Signal<string>;
|
|
954
|
+
lightModeTrendIconClass: _angular_core.Signal<string>;
|
|
955
|
+
darkModeTrendIconClass: _angular_core.Signal<string>;
|
|
956
|
+
trendIconClass: _angular_core.Signal<string>;
|
|
957
|
+
lightModeTrendValueClass: _angular_core.Signal<string>;
|
|
958
|
+
darkModeTrendValueClass: _angular_core.Signal<string>;
|
|
959
|
+
trendValueClass: _angular_core.Signal<string>;
|
|
960
|
+
formattedRevenueTrend: _angular_core.Signal<string>;
|
|
961
|
+
formattedRevenueTarget: _angular_core.Signal<string>;
|
|
962
|
+
hasRevenuePacing: _angular_core.Signal<boolean>;
|
|
963
|
+
formattedRevenuePacing: _angular_core.Signal<string>;
|
|
964
|
+
revenueStatusClass: _angular_core.Signal<string>;
|
|
965
|
+
revenueStatusLabel: _angular_core.Signal<string>;
|
|
966
|
+
lightModeNarrativeBoxClass: _angular_core.Signal<string>;
|
|
967
|
+
darkModeNarrativeBoxClass: _angular_core.Signal<string>;
|
|
968
|
+
narrativeBoxClass: _angular_core.Signal<string>;
|
|
969
|
+
lightModeNarrativeTextClass: _angular_core.Signal<string>;
|
|
970
|
+
darkModeNarrativeTextClass: _angular_core.Signal<string>;
|
|
971
|
+
narrativeTextClass: _angular_core.Signal<string>;
|
|
972
|
+
lightModeStrengthsCardClass: _angular_core.Signal<string>;
|
|
973
|
+
darkModeStrengthsCardClass: _angular_core.Signal<string>;
|
|
974
|
+
strengthsCardClass: _angular_core.Signal<string>;
|
|
975
|
+
lightModeStrengthsIconBgClass: _angular_core.Signal<string>;
|
|
976
|
+
darkModeStrengthsIconBgClass: _angular_core.Signal<string>;
|
|
977
|
+
strengthsIconBgClass: _angular_core.Signal<string>;
|
|
978
|
+
lightModeStrengthsIconClass: _angular_core.Signal<string>;
|
|
979
|
+
darkModeStrengthsIconClass: _angular_core.Signal<string>;
|
|
980
|
+
strengthsIconClass: _angular_core.Signal<string>;
|
|
981
|
+
lightModeStrengthsTitleClass: _angular_core.Signal<string>;
|
|
982
|
+
darkModeStrengthsTitleClass: _angular_core.Signal<string>;
|
|
983
|
+
strengthsTitleClass: _angular_core.Signal<string>;
|
|
984
|
+
lightModeImprovementCardClass: _angular_core.Signal<string>;
|
|
985
|
+
darkModeImprovementCardClass: _angular_core.Signal<string>;
|
|
986
|
+
improvementCardClass: _angular_core.Signal<string>;
|
|
987
|
+
lightModeImprovementIconBgClass: _angular_core.Signal<string>;
|
|
988
|
+
darkModeImprovementIconBgClass: _angular_core.Signal<string>;
|
|
989
|
+
improvementIconBgClass: _angular_core.Signal<string>;
|
|
990
|
+
lightModeImprovementIconClass: _angular_core.Signal<string>;
|
|
991
|
+
darkModeImprovementIconClass: _angular_core.Signal<string>;
|
|
992
|
+
improvementIconClass: _angular_core.Signal<string>;
|
|
993
|
+
lightModeImprovementTitleClass: _angular_core.Signal<string>;
|
|
994
|
+
darkModeImprovementTitleClass: _angular_core.Signal<string>;
|
|
995
|
+
improvementTitleClass: _angular_core.Signal<string>;
|
|
996
|
+
lightModeTrendCardClass: _angular_core.Signal<string>;
|
|
997
|
+
darkModeTrendCardClass: _angular_core.Signal<string>;
|
|
998
|
+
trendCardClass: _angular_core.Signal<string>;
|
|
999
|
+
lightModeTrendIconBgClass: _angular_core.Signal<string>;
|
|
1000
|
+
darkModeTrendIconBgClass: _angular_core.Signal<string>;
|
|
1001
|
+
trendIconBgClass: _angular_core.Signal<string>;
|
|
1002
|
+
lightModeTrendTitleClass: _angular_core.Signal<string>;
|
|
1003
|
+
darkModeTrendTitleClass: _angular_core.Signal<string>;
|
|
1004
|
+
trendTitleClass: _angular_core.Signal<string>;
|
|
1005
|
+
lightModeActionCardClass: _angular_core.Signal<string>;
|
|
1006
|
+
darkModeActionCardClass: _angular_core.Signal<string>;
|
|
1007
|
+
actionCardClass: _angular_core.Signal<string>;
|
|
1008
|
+
lightModeActionIconBgClass: _angular_core.Signal<string>;
|
|
1009
|
+
darkModeActionIconBgClass: _angular_core.Signal<string>;
|
|
1010
|
+
actionIconBgClass: _angular_core.Signal<string>;
|
|
1011
|
+
lightModeActionIconClass: _angular_core.Signal<string>;
|
|
1012
|
+
darkModeActionIconClass: _angular_core.Signal<string>;
|
|
1013
|
+
actionIconClass: _angular_core.Signal<string>;
|
|
1014
|
+
lightModeActionTitleClass: _angular_core.Signal<string>;
|
|
1015
|
+
darkModeActionTitleClass: _angular_core.Signal<string>;
|
|
1016
|
+
actionTitleClass: _angular_core.Signal<string>;
|
|
1017
|
+
lightModeDescriptionTextClass: _angular_core.Signal<string>;
|
|
1018
|
+
darkModeDescriptionTextClass: _angular_core.Signal<string>;
|
|
1019
|
+
descriptionTextClass: _angular_core.Signal<string>;
|
|
1020
|
+
private formatRevenue;
|
|
1021
|
+
private formatPercent;
|
|
1022
|
+
private getRevenueStatusClassLight;
|
|
1023
|
+
private getRevenueStatusClassDark;
|
|
1024
|
+
private getRevenueStatusClass;
|
|
1025
|
+
getRevenueStatusStyle(): Record<string, string>;
|
|
1026
|
+
private getStatusBadgeClassLight;
|
|
1027
|
+
private getStatusBadgeClassDark;
|
|
1028
|
+
private getStatusBadgeClass;
|
|
1029
|
+
getStatusBadgeStyle(): Record<string, string>;
|
|
1030
|
+
private getStatusLabel;
|
|
1031
|
+
getStatusIcon(): string;
|
|
1032
|
+
getRevenueStatusIcon(): string;
|
|
1033
|
+
private getGradeBadgeClassLight;
|
|
1034
|
+
private getGradeBadgeClassDark;
|
|
1035
|
+
private getGradeBadgeClass;
|
|
1036
|
+
revenueTooltip: _angular_core.Signal<MetricValueTooltipContent>;
|
|
1037
|
+
revenueStatusTooltip: _angular_core.Signal<{
|
|
1038
|
+
title: string;
|
|
1039
|
+
status: string;
|
|
1040
|
+
description: string;
|
|
1041
|
+
}>;
|
|
1042
|
+
statusBadgeTooltip: _angular_core.Signal<{
|
|
1043
|
+
status: string;
|
|
1044
|
+
pacingPercentage: number;
|
|
1045
|
+
progressPercent: number;
|
|
1046
|
+
}>;
|
|
1047
|
+
gradeTooltip: _angular_core.Signal<{
|
|
1048
|
+
title: string;
|
|
1049
|
+
grade: string;
|
|
1050
|
+
explanation: string;
|
|
1051
|
+
}>;
|
|
1052
|
+
private calculateOverallPacing;
|
|
1053
|
+
private getGradeExplanation;
|
|
1054
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<OverallAssessmentComponent, never>;
|
|
1055
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<OverallAssessmentComponent, "symphiq-funnel-analysis-overall-assessment", never, { "assessment": { "alias": "assessment"; "required": false; "isSignal": true; }; "revenueMetric": { "alias": "revenueMetric"; "required": false; "isSignal": true; }; "charts": { "alias": "charts"; "required": false; "isSignal": true; }; "metrics": { "alias": "metrics"; "required": false; "isSignal": true; }; "isLightMode": { "alias": "isLightMode"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "isCompactMode": { "alias": "isCompactMode"; "required": false; "isSignal": true; }; "isChartsLoading": { "alias": "isChartsLoading"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1056
|
+
}
|
|
1057
|
+
|
|
1058
|
+
interface CompetitiveStats {
|
|
1059
|
+
leading: number;
|
|
1060
|
+
competitive: number;
|
|
1061
|
+
lagging: number;
|
|
1062
|
+
total: number;
|
|
1063
|
+
healthScore: number;
|
|
1064
|
+
}
|
|
1065
|
+
interface CategoryStats {
|
|
1066
|
+
category: string;
|
|
1067
|
+
label: string;
|
|
1068
|
+
leading: number;
|
|
1069
|
+
competitive: number;
|
|
1070
|
+
lagging: number;
|
|
1071
|
+
total: number;
|
|
1072
|
+
icon: string;
|
|
1073
|
+
}
|
|
1074
|
+
declare class CompetitivePositioningSummaryComponent {
|
|
1075
|
+
metrics: _angular_core.InputSignal<PerformanceMetricInterface[]>;
|
|
1076
|
+
isLightMode: _angular_core.InputSignal<boolean>;
|
|
1077
|
+
isCompactMode: _angular_core.InputSignal<boolean>;
|
|
1078
|
+
scrollToCompetitive: _angular_core.OutputEmitterRef<void>;
|
|
1079
|
+
isExpanded: _angular_core.WritableSignal<boolean>;
|
|
1080
|
+
private funnelOrderService;
|
|
1081
|
+
private competitiveScoreService;
|
|
1082
|
+
metricsWithBenchmarks: _angular_core.Signal<PerformanceMetricInterface[]>;
|
|
1083
|
+
categoryStats: _angular_core.Signal<CategoryStats[]>;
|
|
1084
|
+
competitiveStats: _angular_core.Signal<CompetitiveStats>;
|
|
1085
|
+
narrativeSummary: _angular_core.Signal<string>;
|
|
1086
|
+
containerClass: _angular_core.Signal<"bg-white border-slate-200" | "bg-slate-800 border-slate-700">;
|
|
1087
|
+
getHealthScoreBadgeClass(): string;
|
|
1088
|
+
getScoreDotClass(type: string): string;
|
|
1089
|
+
formatCategoryName(category: string): string;
|
|
1090
|
+
competitiveScoreTooltip: _angular_core.Signal<{
|
|
1091
|
+
industry: any;
|
|
1092
|
+
metricBenchmark: string;
|
|
1093
|
+
competitiveScore: "LEADING" | "COMPETITIVE" | "LAGGING";
|
|
1094
|
+
description: string;
|
|
1095
|
+
keyOpportunities: string;
|
|
1096
|
+
}>;
|
|
1097
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<CompetitivePositioningSummaryComponent, never>;
|
|
1098
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<CompetitivePositioningSummaryComponent, "symphiq-competitive-positioning-summary", never, { "metrics": { "alias": "metrics"; "required": false; "isSignal": true; }; "isLightMode": { "alias": "isLightMode"; "required": false; "isSignal": true; }; "isCompactMode": { "alias": "isCompactMode"; "required": false; "isSignal": true; }; }, { "scrollToCompetitive": "scrollToCompetitive"; }, never, never, true, never>;
|
|
1099
|
+
}
|
|
1100
|
+
|
|
1101
|
+
declare class SkeletonLoaderComponent {
|
|
1102
|
+
width: _angular_core.InputSignal<string>;
|
|
1103
|
+
height: _angular_core.InputSignal<string>;
|
|
1104
|
+
isLightMode: _angular_core.InputSignal<boolean>;
|
|
1105
|
+
pulse: _angular_core.InputSignal<boolean>;
|
|
1106
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkeletonLoaderComponent, never>;
|
|
1107
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonLoaderComponent, "symphiq-skeleton-loader", never, { "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "isLightMode": { "alias": "isLightMode"; "required": false; "isSignal": true; }; "pulse": { "alias": "pulse"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1108
|
+
}
|
|
1109
|
+
|
|
1110
|
+
declare class MobileFABComponent {
|
|
1111
|
+
isLightMode: _angular_core.InputSignal<boolean>;
|
|
1112
|
+
isCompactMode: _angular_core.InputSignal<boolean>;
|
|
1113
|
+
isExpanded: _angular_core.InputSignal<boolean>;
|
|
1114
|
+
expandedChange: _angular_core.OutputEmitterRef<boolean>;
|
|
1115
|
+
scrollToTop: _angular_core.OutputEmitterRef<void>;
|
|
1116
|
+
toggleView: _angular_core.OutputEmitterRef<void>;
|
|
1117
|
+
buttonClass: _angular_core.Signal<"bg-white text-slate-700 border border-slate-300 hover:border-blue-500" | "bg-slate-800 text-white border border-slate-600 hover:border-blue-400">;
|
|
1118
|
+
mainButtonClass: _angular_core.Signal<"bg-gradient-to-br from-blue-500 to-blue-600 text-white hover:from-blue-600 hover:to-blue-700" | "bg-gradient-to-br from-blue-400 to-blue-500 text-white hover:from-blue-500 hover:to-blue-600">;
|
|
1119
|
+
toggleExpanded(): void;
|
|
1120
|
+
onScrollToTop(): void;
|
|
1121
|
+
onToggleView(): void;
|
|
1122
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MobileFABComponent, never>;
|
|
1123
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MobileFABComponent, "symphiq-mobile-fab", never, { "isLightMode": { "alias": "isLightMode"; "required": false; "isSignal": true; }; "isCompactMode": { "alias": "isCompactMode"; "required": false; "isSignal": true; }; "isExpanded": { "alias": "isExpanded"; "required": false; "isSignal": true; }; }, { "expandedChange": "expandedChange"; "scrollToTop": "scrollToTop"; "toggleView": "toggleView"; }, never, never, true, never>;
|
|
1124
|
+
}
|
|
1125
|
+
|
|
1126
|
+
declare class SymphiqFunnelAnalysisPreviewComponent {
|
|
1127
|
+
analysisInput: _angular_core.InputSignal<FunnelAnalysisInterface>;
|
|
1128
|
+
isLightMode: _angular_core.InputSignal<boolean>;
|
|
1129
|
+
onViewAnalysis: _angular_core.OutputEmitterRef<void>;
|
|
1130
|
+
private tooltipDataService;
|
|
1131
|
+
private competitiveScoreService;
|
|
1132
|
+
title: _angular_core.Signal<string>;
|
|
1133
|
+
analysis: _angular_core.Signal<_jebgem_model.PerformanceOverviewStructuredV3Interface>;
|
|
1134
|
+
overallAssessment: _angular_core.Signal<any>;
|
|
1135
|
+
metrics: _angular_core.Signal<PerformanceMetricInterface[]>;
|
|
1136
|
+
insights: _angular_core.Signal<any>;
|
|
1137
|
+
insightsCount: _angular_core.Signal<any>;
|
|
1138
|
+
revenueMetric: _angular_core.Signal<PerformanceMetricInterface | undefined>;
|
|
1139
|
+
topMetrics: _angular_core.Signal<PerformanceMetricInterface[]>;
|
|
1140
|
+
statusLabel: _angular_core.Signal<any>;
|
|
1141
|
+
statusIcon: _angular_core.Signal<"↑" | "→" | "⚠" | "•">;
|
|
1142
|
+
formattedRevenueValue: _angular_core.Signal<string>;
|
|
1143
|
+
formattedRevenueTrend: _angular_core.Signal<string>;
|
|
1144
|
+
revenueStatusIcon: _angular_core.Signal<"↑" | "→" | "⚠" | "•">;
|
|
1145
|
+
hasCompetitiveData: _angular_core.Signal<boolean>;
|
|
1146
|
+
competitiveScore: _angular_core.Signal<string>;
|
|
1147
|
+
gradeTooltip: _angular_core.Signal<{
|
|
1148
|
+
title: string;
|
|
1149
|
+
grade: any;
|
|
1150
|
+
explanation: string;
|
|
1151
|
+
}>;
|
|
1152
|
+
revenueTooltip: _angular_core.Signal<{
|
|
1153
|
+
chartData: {
|
|
1154
|
+
current: number[];
|
|
1155
|
+
prior?: number[];
|
|
1156
|
+
} | undefined;
|
|
1157
|
+
metricName: string;
|
|
1158
|
+
currentValue: number;
|
|
1159
|
+
priorValue?: number;
|
|
1160
|
+
targetValue?: number;
|
|
1161
|
+
projectedValue?: number;
|
|
1162
|
+
unit?: string;
|
|
1163
|
+
category?: string;
|
|
1164
|
+
isInverseMetric?: boolean;
|
|
1165
|
+
} | {
|
|
1166
|
+
metricName: string;
|
|
1167
|
+
currentValue: number;
|
|
1168
|
+
unit: string;
|
|
1169
|
+
}>;
|
|
1170
|
+
revenueStatusTooltip: _angular_core.Signal<{
|
|
1171
|
+
status: string;
|
|
1172
|
+
pacingPercentage: number;
|
|
1173
|
+
progressPercent: number;
|
|
1174
|
+
}>;
|
|
1175
|
+
narrativeTooltip: _angular_core.Signal<{
|
|
1176
|
+
title: string;
|
|
1177
|
+
narrative: any;
|
|
1178
|
+
}>;
|
|
1179
|
+
competitiveTooltip: _angular_core.Signal<{
|
|
1180
|
+
industry: any;
|
|
1181
|
+
metricBenchmark: string;
|
|
1182
|
+
competitiveScore: "LEADING" | "LAGGING" | "COMPETITIVE";
|
|
1183
|
+
description: string;
|
|
1184
|
+
keyOpportunities: string;
|
|
1185
|
+
}>;
|
|
1186
|
+
insightsTooltip: _angular_core.Signal<{
|
|
1187
|
+
title: string;
|
|
1188
|
+
insights: any;
|
|
1189
|
+
remaining: number;
|
|
1190
|
+
}>;
|
|
1191
|
+
containerClass: _angular_core.Signal<"bg-gradient-to-br from-white/95 to-slate-50/95 border-slate-200/70 hover:border-blue-300" | "bg-gradient-to-br from-slate-800/95 to-slate-900/95 border-slate-700/50 hover:border-slate-600">;
|
|
1192
|
+
headerClass: _angular_core.Signal<"bg-gradient-to-r from-slate-50/50 to-blue-50/30 border-slate-200/50" | "bg-slate-800/30 border-slate-700/50">;
|
|
1193
|
+
footerClass: _angular_core.Signal<"bg-slate-800/30 border-slate-700/50" | "bg-slate-50/50 border-slate-200/50">;
|
|
1194
|
+
titleClass: _angular_core.Signal<"text-slate-900" | "text-white">;
|
|
1195
|
+
subtitleClass: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
|
|
1196
|
+
badgeLabelClass: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
|
|
1197
|
+
metricLabelClass: _angular_core.Signal<"text-slate-700" | "text-slate-300">;
|
|
1198
|
+
metricValueClass: _angular_core.Signal<"text-slate-900" | "text-white">;
|
|
1199
|
+
gradeBadgeClass: _angular_core.Signal<"border bg-emerald-100 text-emerald-700 border-emerald-300" | "border bg-blue-100 text-blue-700 border-blue-300" | "border bg-orange-100 text-orange-700 border-orange-300" | "border bg-red-100 text-red-700 border-red-300" | "border bg-emerald-500/20 text-emerald-400 border-emerald-500/50" | "border bg-blue-500/20 text-blue-400 border-blue-500/50" | "border bg-orange-500/20 text-orange-400 border-orange-500/50" | "border bg-red-500/20 text-red-400 border-red-500/50">;
|
|
1200
|
+
shouldPulseGrade: _angular_core.Signal<boolean>;
|
|
1201
|
+
revenueCardClass: _angular_core.Signal<"bg-emerald-50/50 border-emerald-200/50 hover:border-emerald-300 hover:shadow-lg" | "bg-emerald-500/10 border-emerald-500/30 hover:border-emerald-400 hover:shadow-xl">;
|
|
1202
|
+
revenueIconClass: _angular_core.Signal<"text-emerald-600" | "text-emerald-400">;
|
|
1203
|
+
trendIconClass: _angular_core.Signal<"text-emerald-600" | "text-emerald-400">;
|
|
1204
|
+
trendValueClass: _angular_core.Signal<"text-emerald-600" | "text-emerald-400">;
|
|
1205
|
+
revenueStatusClass: _angular_core.Signal<"bg-blue-500/20 text-blue-400" | "bg-emerald-100 text-emerald-700" | "bg-emerald-500/20 text-emerald-400" | "bg-blue-100 text-blue-700" | "bg-slate-100 text-slate-700" | "bg-slate-500/20 text-slate-400" | "bg-orange-100 text-orange-700" | "bg-orange-500/20 text-orange-400">;
|
|
1206
|
+
shouldPulseRevenueStatus: _angular_core.Signal<boolean>;
|
|
1207
|
+
statusSummaryClass: _angular_core.Signal<"bg-slate-50 border-slate-200" | "bg-slate-800/50 border-slate-700">;
|
|
1208
|
+
narrativeTextClass: _angular_core.Signal<"text-slate-700" | "text-slate-300">;
|
|
1209
|
+
buttonClass: _angular_core.Signal<"bg-gradient-to-r from-blue-600 to-cyan-600 text-white hover:from-blue-700 hover:to-cyan-700" | "bg-gradient-to-r from-blue-500 to-cyan-500 text-white hover:from-blue-600 hover:to-cyan-600">;
|
|
1210
|
+
competitiveBadgeClass: _angular_core.Signal<"bg-emerald-100 text-emerald-700 border border-emerald-300" | "bg-blue-100 text-blue-700 border border-blue-300" | "bg-orange-100 text-orange-700 border border-orange-300" | "bg-red-100 text-red-700 border border-red-300" | "bg-emerald-500/20 text-emerald-400 border border-emerald-500/50" | "bg-blue-500/20 text-blue-400 border border-blue-500/50" | "bg-orange-500/20 text-orange-400 border border-orange-500/50" | "bg-red-500/20 text-red-400 border border-red-500/50">;
|
|
1211
|
+
shouldPulseCompetitiveBadge: _angular_core.Signal<boolean>;
|
|
1212
|
+
statusIconClass: _angular_core.Signal<"text-slate-600" | "text-slate-400" | "text-emerald-600" | "text-emerald-400" | "text-blue-400" | "text-orange-600" | "text-orange-400" | "text-blue-600">;
|
|
1213
|
+
insightsCardClass: _angular_core.Signal<"bg-blue-500/10 border-blue-500/30" | "bg-blue-50/50 border-blue-200/50">;
|
|
1214
|
+
insightsBadgeClass: _angular_core.Signal<"bg-blue-100 text-blue-700 border border-blue-300" | "bg-blue-500/20 text-blue-400 border border-blue-500/50">;
|
|
1215
|
+
metricMiniCardClass(metric: PerformanceMetricInterface): string;
|
|
1216
|
+
getStatusDotClass(metric: PerformanceMetricInterface): string;
|
|
1217
|
+
shouldPulseMetricDot(metric: PerformanceMetricInterface): boolean;
|
|
1218
|
+
getTrendClass(metric: PerformanceMetricInterface): string;
|
|
1219
|
+
getMetricLabel(metric: PerformanceMetricInterface): string;
|
|
1220
|
+
formatMetricValue(metric: PerformanceMetricInterface): string;
|
|
1221
|
+
formatTrend(metric: PerformanceMetricInterface): string;
|
|
1222
|
+
getMetricTooltip(metric: PerformanceMetricInterface): any;
|
|
1223
|
+
private formatCurrency;
|
|
1224
|
+
private formatPercent;
|
|
1225
|
+
private getGradeExplanation;
|
|
1226
|
+
private calculatePacing;
|
|
1227
|
+
private extractChartData;
|
|
1228
|
+
handleViewAnalysis(): void;
|
|
1229
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SymphiqFunnelAnalysisPreviewComponent, never>;
|
|
1230
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SymphiqFunnelAnalysisPreviewComponent, "symphiq-funnel-analysis-preview", never, { "analysisInput": { "alias": "analysis"; "required": true; "isSignal": true; }; "isLightMode": { "alias": "isLightMode"; "required": false; "isSignal": true; }; }, { "onViewAnalysis": "onViewAnalysis"; }, never, never, true, never>;
|
|
1231
|
+
}
|
|
1232
|
+
|
|
1233
|
+
declare class ChartContainerComponent {
|
|
1234
|
+
chart: _angular_core.InputSignal<AiChartInterface>;
|
|
1235
|
+
isLightMode: _angular_core.InputSignal<boolean>;
|
|
1236
|
+
isLoading: _angular_core.InputSignal<boolean>;
|
|
1237
|
+
isCompactMode: _angular_core.InputSignal<boolean>;
|
|
1238
|
+
collapsibleIn: _angular_core.InputSignal<"compact" | "expanded" | "never">;
|
|
1239
|
+
viewMode: _angular_core.InputSignal<ViewModeEnum>;
|
|
1240
|
+
chartClick: _angular_core.OutputEmitterRef<AiChartInterface>;
|
|
1241
|
+
isExpanded: _angular_core.WritableSignal<boolean>;
|
|
1242
|
+
containerClass: _angular_core.Signal<"bg-white border-slate-200 hover:border-blue-300 hover:shadow-blue-100/50" | "bg-slate-800 border-slate-700 hover:border-slate-600 hover:shadow-slate-900/50">;
|
|
1243
|
+
headerClass: _angular_core.Signal<"border-slate-200" | "border-slate-700">;
|
|
1244
|
+
titleClass: _angular_core.Signal<"text-slate-900" | "text-white">;
|
|
1245
|
+
descriptionClass: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
|
|
1246
|
+
iconClass: _angular_core.Signal<"text-slate-400 group-hover:text-blue-500" | "text-slate-500 group-hover:text-blue-400">;
|
|
1247
|
+
chartIconClass: _angular_core.Signal<"bg-blue-100 text-blue-600" | "bg-blue-500/20 text-blue-400">;
|
|
1248
|
+
expandButtonClass: _angular_core.Signal<"bg-blue-100 text-blue-600 hover:bg-blue-200" | "bg-blue-500/20 text-blue-400 hover:bg-blue-500/30">;
|
|
1249
|
+
closeButtonClass: _angular_core.Signal<"bg-slate-100 text-slate-600 hover:bg-slate-200" | "bg-slate-700/50 text-slate-400 hover:bg-slate-600/50">;
|
|
1250
|
+
isCollapsible: _angular_core.Signal<boolean>;
|
|
1251
|
+
gridTemplateRows: _angular_core.Signal<"auto 1fr" | "auto 0fr">;
|
|
1252
|
+
handleHeaderClick(event: Event): void;
|
|
1253
|
+
handleChartClick(event: Event): void;
|
|
1254
|
+
onChartClick(event: Event): void;
|
|
1255
|
+
toggleExpand(event: Event): void;
|
|
1256
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChartContainerComponent, never>;
|
|
1257
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChartContainerComponent, "symphiq-chart-container", never, { "chart": { "alias": "chart"; "required": false; "isSignal": true; }; "isLightMode": { "alias": "isLightMode"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "isCompactMode": { "alias": "isCompactMode"; "required": false; "isSignal": true; }; "collapsibleIn": { "alias": "collapsibleIn"; "required": false; "isSignal": true; }; "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; }, { "chartClick": "chartClick"; }, never, never, true, never>;
|
|
1258
|
+
}
|
|
1259
|
+
|
|
1260
|
+
declare class LineChartComponent implements OnInit, AfterViewInit, OnDestroy {
|
|
1261
|
+
chart: _angular_core.InputSignal<AiChartInterface>;
|
|
1262
|
+
showAxisLabels: _angular_core.InputSignal<boolean>;
|
|
1263
|
+
viewMode: _angular_core.InputSignal<ViewModeEnum>;
|
|
1264
|
+
chartHeight: _angular_core.Signal<"500px" | "133px">;
|
|
1265
|
+
cursorColor: _angular_core.Signal<9741240 | 16777215>;
|
|
1266
|
+
tooltipTextColor: _angular_core.Signal<0 | 16777215>;
|
|
1267
|
+
chartHash: _angular_core.Signal<string>;
|
|
1268
|
+
chartDiv: ElementRef;
|
|
1269
|
+
private root?;
|
|
1270
|
+
private chartElement?;
|
|
1271
|
+
private lastChartHash;
|
|
1272
|
+
private chartNeedsRender;
|
|
1273
|
+
private resizeObserver?;
|
|
1274
|
+
private resizeTimeout?;
|
|
1275
|
+
private intersectionObserver?;
|
|
1276
|
+
private isVisible;
|
|
1277
|
+
private animationsEnabled;
|
|
1278
|
+
constructor();
|
|
1279
|
+
ngOnInit(): void;
|
|
1280
|
+
/**
|
|
1281
|
+
* Generate a hash of the chart data to detect actual changes
|
|
1282
|
+
* This prevents unnecessary re-renders when data hasn't truly changed
|
|
1283
|
+
*/
|
|
1284
|
+
private generateChartHash;
|
|
1285
|
+
ngAfterViewInit(): void;
|
|
1286
|
+
ngOnDestroy(): void;
|
|
1287
|
+
private setupResizeObserver;
|
|
1288
|
+
private cleanupResizeObserver;
|
|
1289
|
+
private setupIntersectionObserver;
|
|
1290
|
+
private cleanupIntersectionObserver;
|
|
1291
|
+
/**
|
|
1292
|
+
* Create chart with early exit optimization
|
|
1293
|
+
* Prevents unnecessary re-initialization if no data changes detected
|
|
1294
|
+
*/
|
|
1295
|
+
private formatValue;
|
|
1296
|
+
private isPriorYearSeries;
|
|
1297
|
+
private extractMetricName;
|
|
1298
|
+
private createChart;
|
|
1299
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LineChartComponent, never>;
|
|
1300
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LineChartComponent, "symphiq-line-chart", never, { "chart": { "alias": "chart"; "required": false; "isSignal": true; }; "showAxisLabels": { "alias": "showAxisLabels"; "required": false; "isSignal": true; }; "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1301
|
+
}
|
|
1302
|
+
|
|
1303
|
+
declare class BarChartComponent implements OnInit, AfterViewInit, OnDestroy {
|
|
1304
|
+
chart: _angular_core.InputSignal<AiChartInterface>;
|
|
1305
|
+
showAxisLabels: _angular_core.InputSignal<boolean>;
|
|
1306
|
+
viewMode: _angular_core.InputSignal<ViewModeEnum>;
|
|
1307
|
+
chartHeight: _angular_core.Signal<"500px" | "175px">;
|
|
1308
|
+
cursorColor: _angular_core.Signal<9741240 | 16777215>;
|
|
1309
|
+
tooltipTextColor: _angular_core.Signal<0 | 16777215>;
|
|
1310
|
+
chartHash: _angular_core.Signal<string>;
|
|
1311
|
+
chartDiv: ElementRef;
|
|
1312
|
+
private root?;
|
|
1313
|
+
private chartElement?;
|
|
1314
|
+
private lastChartHash;
|
|
1315
|
+
private chartNeedsRender;
|
|
1316
|
+
private resizeObserver?;
|
|
1317
|
+
private resizeTimeout?;
|
|
1318
|
+
private intersectionObserver?;
|
|
1319
|
+
private isVisible;
|
|
1320
|
+
private animationsEnabled;
|
|
1321
|
+
constructor();
|
|
1322
|
+
ngOnInit(): void;
|
|
1323
|
+
/**
|
|
1324
|
+
* Generate a hash of the chart data to detect actual changes
|
|
1325
|
+
* This prevents unnecessary re-renders when data hasn't truly changed
|
|
1326
|
+
*/
|
|
1327
|
+
private generateChartHash;
|
|
1328
|
+
ngAfterViewInit(): void;
|
|
1329
|
+
ngOnDestroy(): void;
|
|
1330
|
+
private setupResizeObserver;
|
|
1331
|
+
private cleanupResizeObserver;
|
|
1332
|
+
private setupIntersectionObserver;
|
|
1333
|
+
private cleanupIntersectionObserver;
|
|
1334
|
+
private createChart;
|
|
1335
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<BarChartComponent, never>;
|
|
1336
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<BarChartComponent, "symphiq-bar-chart", never, { "chart": { "alias": "chart"; "required": false; "isSignal": true; }; "showAxisLabels": { "alias": "showAxisLabels"; "required": false; "isSignal": true; }; "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1337
|
+
}
|
|
1338
|
+
|
|
1339
|
+
declare class PieChartComponent implements OnInit, AfterViewInit, OnDestroy {
|
|
1340
|
+
chart: _angular_core.InputSignal<AiChartInterface>;
|
|
1341
|
+
showAxisLabels: _angular_core.InputSignal<boolean>;
|
|
1342
|
+
viewMode: _angular_core.InputSignal<ViewModeEnum>;
|
|
1343
|
+
chartHeight: _angular_core.Signal<"500px" | "200px">;
|
|
1344
|
+
chartHash: _angular_core.Signal<string>;
|
|
1345
|
+
chartDiv: ElementRef;
|
|
1346
|
+
private root?;
|
|
1347
|
+
private chartElement?;
|
|
1348
|
+
private lastChartHash;
|
|
1349
|
+
private chartNeedsRender;
|
|
1350
|
+
private resizeObserver?;
|
|
1351
|
+
private resizeTimeout?;
|
|
1352
|
+
private intersectionObserver?;
|
|
1353
|
+
private isVisible;
|
|
1354
|
+
private animationsEnabled;
|
|
1355
|
+
constructor();
|
|
1356
|
+
ngOnInit(): void;
|
|
1357
|
+
/**
|
|
1358
|
+
* Generate a hash of the chart data to detect actual changes
|
|
1359
|
+
* This prevents unnecessary re-renders when data hasn't truly changed
|
|
1360
|
+
*/
|
|
1361
|
+
private generateChartHash;
|
|
1362
|
+
ngAfterViewInit(): void;
|
|
1363
|
+
ngOnDestroy(): void;
|
|
1364
|
+
private setupResizeObserver;
|
|
1365
|
+
private cleanupResizeObserver;
|
|
1366
|
+
private setupIntersectionObserver;
|
|
1367
|
+
private cleanupIntersectionObserver;
|
|
1368
|
+
private formatValue;
|
|
1369
|
+
private createChart;
|
|
1370
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<PieChartComponent, never>;
|
|
1371
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<PieChartComponent, "symphiq-pie-chart", never, { "chart": { "alias": "chart"; "required": false; "isSignal": true; }; "showAxisLabels": { "alias": "showAxisLabels"; "required": false; "isSignal": true; }; "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1372
|
+
}
|
|
1373
|
+
|
|
1374
|
+
declare class AreaChartComponent implements OnInit, AfterViewInit, OnDestroy {
|
|
1375
|
+
chart: _angular_core.InputSignal<AiChartInterface>;
|
|
1376
|
+
showAxisLabels: _angular_core.InputSignal<boolean>;
|
|
1377
|
+
viewMode: _angular_core.InputSignal<ViewModeEnum>;
|
|
1378
|
+
chartHeight: _angular_core.Signal<"500px" | "133px">;
|
|
1379
|
+
cursorColor: _angular_core.Signal<9741240 | 16777215>;
|
|
1380
|
+
chartHash: _angular_core.Signal<string>;
|
|
1381
|
+
chartDiv: ElementRef;
|
|
1382
|
+
private root?;
|
|
1383
|
+
private chartElement?;
|
|
1384
|
+
private lastChartHash;
|
|
1385
|
+
private chartNeedsRender;
|
|
1386
|
+
private resizeObserver?;
|
|
1387
|
+
private resizeTimeout?;
|
|
1388
|
+
private intersectionObserver?;
|
|
1389
|
+
private isVisible;
|
|
1390
|
+
private animationsEnabled;
|
|
1391
|
+
constructor();
|
|
1392
|
+
ngOnInit(): void;
|
|
1393
|
+
/**
|
|
1394
|
+
* Generate a hash of the chart data to detect actual changes
|
|
1395
|
+
* This prevents unnecessary re-renders when data hasn't truly changed
|
|
1396
|
+
*/
|
|
1397
|
+
private generateChartHash;
|
|
1398
|
+
ngAfterViewInit(): void;
|
|
1399
|
+
ngOnDestroy(): void;
|
|
1400
|
+
private setupResizeObserver;
|
|
1401
|
+
private cleanupResizeObserver;
|
|
1402
|
+
private setupIntersectionObserver;
|
|
1403
|
+
private cleanupIntersectionObserver;
|
|
1404
|
+
private createChart;
|
|
1405
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AreaChartComponent, never>;
|
|
1406
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AreaChartComponent, "symphiq-area-chart", never, { "chart": { "alias": "chart"; "required": false; "isSignal": true; }; "showAxisLabels": { "alias": "showAxisLabels"; "required": false; "isSignal": true; }; "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1407
|
+
}
|
|
1408
|
+
|
|
1409
|
+
declare class TooltipContainerComponent {
|
|
1410
|
+
isLightMode: _angular_core.WritableSignal<boolean>;
|
|
1411
|
+
private tooltipService;
|
|
1412
|
+
private elementRef;
|
|
1413
|
+
private renderer;
|
|
1414
|
+
private tooltipStateSignal;
|
|
1415
|
+
isVisible: _angular_core.Signal<boolean>;
|
|
1416
|
+
tooltipType: _angular_core.Signal<string | null>;
|
|
1417
|
+
tooltipContent: _angular_core.Signal<string | Record<string, unknown> | undefined>;
|
|
1418
|
+
tooltipPosition: _angular_core.Signal<"top" | "auto" | "bottom" | "left" | "right">;
|
|
1419
|
+
targetRect: _angular_core.Signal<DOMRect | null>;
|
|
1420
|
+
mousePosition: _angular_core.Signal<{
|
|
1421
|
+
x: number;
|
|
1422
|
+
y: number;
|
|
1423
|
+
} | undefined>;
|
|
1424
|
+
metricContent: _angular_core.Signal<MetricValueTooltipContent | null>;
|
|
1425
|
+
statusContent: _angular_core.Signal<StatusBadgeTooltipContent | null>;
|
|
1426
|
+
trendContent: _angular_core.Signal<TrendIndicatorTooltipContent | null>;
|
|
1427
|
+
priorityContent: _angular_core.Signal<PriorityBadgeTooltipContent | null>;
|
|
1428
|
+
badgeContent: _angular_core.Signal<BadgeTooltipContent | null>;
|
|
1429
|
+
breakdownContent: _angular_core.Signal<BreakdownRowTooltipContent | null>;
|
|
1430
|
+
competitiveContent: _angular_core.Signal<CompetitiveBenchmarkTooltipContent | null>;
|
|
1431
|
+
insightsListContent: _angular_core.Signal<InsightsListTooltipContent | null>;
|
|
1432
|
+
narrativeContent: _angular_core.Signal<NarrativeTooltipContent | null>;
|
|
1433
|
+
tooltipLeft: _angular_core.Signal<number>;
|
|
1434
|
+
tooltipTop: _angular_core.Signal<number>;
|
|
1435
|
+
shouldCenter: _angular_core.Signal<boolean>;
|
|
1436
|
+
containerClass: _angular_core.Signal<"" | "transform -translate-x-1/2">;
|
|
1437
|
+
contentClass: _angular_core.Signal<"bg-white/95 border-slate-300 text-slate-900" | "bg-slate-800/95 border-slate-600 text-white">;
|
|
1438
|
+
textClass: _angular_core.Signal<"text-slate-700" | "text-slate-200">;
|
|
1439
|
+
constructor();
|
|
1440
|
+
private calculateLeft;
|
|
1441
|
+
private calculateTop;
|
|
1442
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TooltipContainerComponent, never>;
|
|
1443
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TooltipContainerComponent, "symphiq-tooltip-container", never, {}, {}, never, never, true, never>;
|
|
1444
|
+
}
|
|
1445
|
+
|
|
1446
|
+
declare class TooltipDirective implements OnDestroy {
|
|
1447
|
+
symphiqTooltip: _angular_core.InputSignal<string | object | undefined>;
|
|
1448
|
+
tooltipType: _angular_core.InputSignal<TooltipType>;
|
|
1449
|
+
tooltipPosition: _angular_core.InputSignal<TooltipPosition>;
|
|
1450
|
+
tooltipDelay: _angular_core.InputSignal<number>;
|
|
1451
|
+
private elementRef;
|
|
1452
|
+
private tooltipService;
|
|
1453
|
+
private renderer;
|
|
1454
|
+
private showTimeout;
|
|
1455
|
+
private hideTimeout;
|
|
1456
|
+
private isHovered;
|
|
1457
|
+
private mouseX;
|
|
1458
|
+
private mouseY;
|
|
1459
|
+
constructor();
|
|
1460
|
+
onMouseEnter(event: MouseEvent): void;
|
|
1461
|
+
onMouseMove(event: MouseEvent): void;
|
|
1462
|
+
onMouseLeave(): void;
|
|
1463
|
+
onFocus(): void;
|
|
1464
|
+
onBlur(): void;
|
|
1465
|
+
private scheduleShow;
|
|
1466
|
+
private scheduleHide;
|
|
1467
|
+
private clearShowTimeout;
|
|
1468
|
+
private clearHideTimeout;
|
|
1469
|
+
ngOnDestroy(): void;
|
|
1470
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TooltipDirective, never>;
|
|
1471
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TooltipDirective, "[libSymphiqTooltip]", never, { "symphiqTooltip": { "alias": "libSymphiqTooltip"; "required": false; "isSignal": true; }; "tooltipType": { "alias": "tooltipType"; "required": false; "isSignal": true; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; "isSignal": true; }; "tooltipDelay": { "alias": "tooltipDelay"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
162
1472
|
}
|
|
163
1473
|
|
|
164
|
-
declare const
|
|
1474
|
+
declare const FUNNEL_ANALYSIS: FunnelAnalysisInterface;
|
|
165
1475
|
|
|
166
|
-
export { BreakdownSectionComponent, FunnelOrderService, InsightCardComponent, MetricCardComponent, ModalComponent, ModalService, OverallAssessmentComponent,
|
|
167
|
-
export type { FunnelMetricOrder, ModalState };
|
|
1476
|
+
export { AreaChartComponent, BarChartComponent, BreakdownSectionComponent, ChartContainerComponent, ChartThemeService, CompetitivePositioningSummaryComponent, FUNNEL_ANALYSIS, FunnelOrderService, InsightCardComponent, LineChartComponent, MetricCardComponent, MobileBottomNavComponent, MobileFABComponent, ModalComponent, ModalService, OverallAssessmentComponent, PieChartComponent, SkeletonLoaderComponent, SymphiqFunnelAnalysisDashboardComponent, SymphiqFunnelAnalysisPreviewComponent, TooltipContainerComponent, TooltipDataService, TooltipDirective, TooltipService, ViewModeService };
|
|
1477
|
+
export type { ChartThemeColors, FunnelMetricOrder, LayoutMode, Metric, ModalState, NavSection, SemanticColors, ThemeMode, TooltipPosition, TooltipState, TooltipType, ViewMode };
|
|
168
1478
|
//# sourceMappingURL=index.d.ts.map
|