@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/README.md
CHANGED
|
@@ -21,22 +21,63 @@ npm run build:lib:prod
|
|
|
21
21
|
|
|
22
22
|
### Import Components
|
|
23
23
|
```typescript
|
|
24
|
-
import {
|
|
24
|
+
import { SymphiqFunnelAnalysisDashboardComponent } from 'symphiq-components';
|
|
25
25
|
import { CommonModule } from '@angular/common';
|
|
26
26
|
|
|
27
27
|
@Component({
|
|
28
28
|
selector: 'app-root',
|
|
29
29
|
standalone: true,
|
|
30
|
-
imports: [CommonModule,
|
|
30
|
+
imports: [CommonModule, SymphiqFunnelAnalysisDashboardComponent],
|
|
31
31
|
template: `
|
|
32
|
-
<
|
|
32
|
+
<symphiq-funnel-analysis-dashboard
|
|
33
|
+
[funnelAnalysis]="performanceData"
|
|
34
|
+
[viewMode]="viewMode"
|
|
35
|
+
[embedded]="false">
|
|
36
|
+
</symphiq-funnel-analysis-dashboard>
|
|
33
37
|
`
|
|
34
38
|
})
|
|
35
39
|
export class AppComponent {
|
|
36
40
|
performanceData = { /* your performance data */ };
|
|
41
|
+
viewMode = ViewModeEnum.LIGHT;
|
|
37
42
|
}
|
|
38
43
|
```
|
|
39
44
|
|
|
45
|
+
### Component Inputs
|
|
46
|
+
|
|
47
|
+
| Input | Type | Default | Description |
|
|
48
|
+
|-------|------|---------|-------------|
|
|
49
|
+
| `funnelAnalysis` | `FunnelAnalysisInterface` | - | The funnel analysis data to display |
|
|
50
|
+
| `viewMode` | `ViewModeEnum` | `LIGHT` | Theme mode (LIGHT or DARK) |
|
|
51
|
+
| `requestedByUser` | `UserInterface` | `undefined` | Optional user context |
|
|
52
|
+
| `embedded` | `boolean` | `false` | Enable embedded mode for use within existing page layouts |
|
|
53
|
+
|
|
54
|
+
### Embedded Mode
|
|
55
|
+
|
|
56
|
+
When using the dashboard within an existing page that has its own header, toolbar, or scrolling container, set `embedded="true"`:
|
|
57
|
+
|
|
58
|
+
```typescript
|
|
59
|
+
@Component({
|
|
60
|
+
selector: 'app-my-page',
|
|
61
|
+
template: `
|
|
62
|
+
<div class="my-page-header">
|
|
63
|
+
<!-- Your existing header -->
|
|
64
|
+
</div>
|
|
65
|
+
<div class="my-page-content" style="overflow-y: auto; height: calc(100vh - 64px);">
|
|
66
|
+
<symphiq-funnel-analysis-dashboard
|
|
67
|
+
[funnelAnalysis]="data"
|
|
68
|
+
[embedded]="true">
|
|
69
|
+
</symphiq-funnel-analysis-dashboard>
|
|
70
|
+
</div>
|
|
71
|
+
`
|
|
72
|
+
})
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
Embedded mode:
|
|
76
|
+
- Disables the fixed scroll progress bar at the top of the viewport
|
|
77
|
+
- Disables the full-page animated background bubbles
|
|
78
|
+
- Listens to scroll events on the parent container instead of the window
|
|
79
|
+
- Uses absolute positioning for backgrounds instead of fixed positioning
|
|
80
|
+
|
|
40
81
|
### Import Models and Interfaces
|
|
41
82
|
```typescript
|
|
42
83
|
import {
|