Skip to content

rename "widget" and "chart" to "panel" in dashboard UI and analytics #1662

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
gugu wants to merge 2 commits into
base: main
Choose a base branch
from
Open

rename "widget" and "chart" to "panel" in dashboard UI and analytics #1662

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f9d01f4
rename "widget" and "chart" to "panel" in dashboard UI and analytics
gugu Mar 12, 2026
d9a1720
Merge branch 'main' into frontend_rename_widget_to_panel
gugu Mar 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions frontend/src/app/components/dashboards/dashboard-view/dashboard-view.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<div class="dashboard-view-page">
<div class="dashboard-header">
<div class="header-left">
<button mat-icon-button (click)="navigateBack()" matTooltip="Back to dashboards">
<button type="button" mat-icon-button (click)="navigateBack()" matTooltip="Back to dashboards">
<mat-icon>arrow_back</mat-icon>
</button>
<div class="header-info">
Expand All @@ -22,11 +22,11 @@ <h1 class="mat-h1">{{ dashboard()?.name || 'Loading...' }}</h1>
data-testid="edit-mode-toggle">
Edit mode
</mat-slide-toggle>
<button mat-flat-button color="primary"
<button type="button" mat-flat-button color="primary"
(click)="openAddPanelDialog()"
data-testid="add-panel-button">
<mat-icon>add</mat-icon>
Add chart
Add panel
</button>
</div>
}
Expand All @@ -41,11 +41,11 @@ <h1 class="mat-h1">{{ dashboard()?.name || 'Loading...' }}</h1>
@if (!loading() && gridsterItems().length === 0) {
<div class="no-panels">
<mat-icon class="no-panels-icon">bar_chart</mat-icon>
<h3>No charts yet</h3>
<p>Add charts to visualize your data from saved queries.</p>
<button mat-flat-button color="primary" (click)="openAddPanelDialog()">
<h3>No panels yet</h3>
<p>Add panels to visualize your data from saved queries.</p>
<button type="button" mat-flat-button color="primary" (click)="openAddPanelDialog()">
<mat-icon>add</mat-icon>
Add chart
Add panel
</button>
</div>
}
Expand All @@ -56,19 +56,19 @@ <h3>No charts yet</h3>
<gridster-item [item]="item" class="panel-item" [class.edit-mode]="editMode()">
<div class="panel-header">
<span class="panel-title">{{ panelRef.savedQuery()?.name || 'Loading...' }}</span>
<button mat-icon-button [matMenuTriggerFor]="panelMenu" class="panel-menu-button">
<button type="button" mat-icon-button [matMenuTriggerFor]="panelMenu" class="panel-menu-button">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #panelMenu="matMenu">
<a mat-menu-item [routerLink]="['/panels', connectionId(), item.widget.query_id]">
<mat-icon>tune</mat-icon>
<span>Configure chart</span>
<span>Configure panel</span>
</a>
<button mat-menu-item (click)="openEditPanelDialog(item.widget)">
<button type="button" mat-menu-item (click)="openEditPanelDialog(item.widget)">
<mat-icon>swap_horiz</mat-icon>
<span>Change query</span>
</button>
<button mat-menu-item (click)="openDeletePanelDialog(item.widget)" class="delete-action">
<button type="button" mat-menu-item (click)="openDeletePanelDialog(item.widget)" class="delete-action">
<mat-icon color="warn">delete</mat-icon>
<span>Delete</span>
</button>
Expand Down
12 changes: 6 additions & 6 deletions frontend/src/app/components/dashboards/dashboard-view/dashboard-view.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,9 +191,9 @@ export class DashboardViewComponent implements OnInit {
},
});
this.angulartics2.eventTrack.next({
action: 'Dashboards: add widget dialog opened',
action: 'Dashboards: add panel dialog opened',
});
posthog.capture('Dashboards: add widget dialog opened');
posthog.capture('Dashboards: add panel dialog opened');

const result = await dialogRef.afterClosed().toPromise();
if (result) {
Expand All @@ -211,9 +211,9 @@ export class DashboardViewComponent implements OnInit {
},
});
this.angulartics2.eventTrack.next({
action: 'Dashboards: edit widget dialog opened',
action: 'Dashboards: edit panel dialog opened',
});
posthog.capture('Dashboards: edit widget dialog opened');
posthog.capture('Dashboards: edit panel dialog opened');
Comment on lines 213 to +216
Copy link

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Renaming the analytics event names from "widget"/"chart" to "panel" will create new event types in both Angulartics2 and PostHog, which can break existing analytics dashboards/alerts and split historical trends. If you still need continuity, consider emitting the previous event name in parallel for a deprecation window (or adding a stable event key + "entity_type" property) and coordinating an analytics dashboard migration before removing the legacy names.

Copilot uses AI. Check for mistakes.

const result = await dialogRef.afterClosed().toPromise();
if (result) {
Expand All @@ -231,9 +231,9 @@ export class DashboardViewComponent implements OnInit {
},
});
this.angulartics2.eventTrack.next({
action: 'Dashboards: delete widget dialog opened',
action: 'Dashboards: delete panel dialog opened',
});
posthog.capture('Dashboards: delete widget dialog opened');
posthog.capture('Dashboards: delete panel dialog opened');

const result = await dialogRef.afterClosed().toPromise();
if (result) {
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/app/components/dashboards/panel-delete-dialog/panel-delete-dialog.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,9 @@ export class PanelDeleteDialogComponent {
);
if (result) {
this.angulartics2.eventTrack.next({
action: 'Dashboards: widget deleted successfully',
action: 'Dashboards: panel deleted successfully',
});
posthog.capture('Dashboards: widget deleted successfully');
posthog.capture('Dashboards: panel deleted successfully');
this.dialogRef.close(true);
}
this.submitting.set(false);
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/app/components/dashboards/panel-edit-dialog/panel-edit-dialog.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<h2 mat-dialog-title>{{ isEdit ? 'Edit panel' : 'Add chart' }}</h2>
<h2 mat-dialog-title>{{ isEdit ? 'Edit panel' : 'Add panel' }}</h2>

<mat-dialog-content>
@if (savedQueries().length > 0) {
Expand Down Expand Up @@ -27,7 +27,7 @@ <h2 mat-dialog-title>{{ isEdit ? 'Edit panel' : 'Add chart' }}</h2>
<div class="no-queries-message">
<mat-icon class="no-queries-icon">code</mat-icon>
<h3>No saved queries yet</h3>
<p>Create a saved query first to add it as a chart on this dashboard.</p>
<p>Create a saved query first to add it as a panel on this dashboard.</p>
<a mat-stroked-button color="primary"
[routerLink]="['/panels', data.connectionId, 'new']"
(click)="dialogRef.close()">
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/app/components/dashboards/panel-edit-dialog/panel-edit-dialog.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,9 +79,9 @@ export class PanelEditDialogComponent implements OnInit {
);
if (result) {
this.angulartics2.eventTrack.next({
action: 'Dashboards: widget updated successfully',
action: 'Dashboards: panel updated successfully',
});
posthog.capture('Dashboards: widget updated successfully');
posthog.capture('Dashboards: panel updated successfully');
this.dialogRef.close(true);
}
} else {
Expand All @@ -96,9 +96,9 @@ export class PanelEditDialogComponent implements OnInit {
const result = await this._dashboards.createWidget(this.data.connectionId, this.data.dashboardId, payload);
if (result) {
this.angulartics2.eventTrack.next({
action: 'Dashboards: widget created successfully',
action: 'Dashboards: panel created successfully',
});
posthog.capture('Dashboards: widget created successfully');
posthog.capture('Dashboards: panel created successfully');
this.dialogRef.close(true);
}
}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/components/dashboards/panel-renderers/text-panel/text-panel.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,6 @@
} @else {
<div class="no-content-container">
<p>No content</p>
<p class="hint">Edit this widget to add text content.</p>
<p class="hint">Edit this panel to add text content.</p>
</div>
}
Loading