-
Notifications
You must be signed in to change notification settings - Fork 11
feat: conditional container widget #348
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.
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
Changes from all commits
7fd2b1f
7b32858
4df22db
97d893a
ff753d3
556277d
de81fd6
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
import { ChangeDetectionStrategy, Component } from '@angular/core'; | ||
import { Renderer } from '@hypertrace/hyperdash'; | ||
import { Observable } from 'rxjs'; | ||
import { takeUntil } from 'rxjs/operators'; | ||
import { WidgetRenderer } from '../widget-renderer'; | ||
import { ConditionalModel } from './conditional.model'; | ||
|
||
@Renderer({ modelClass: ConditionalModel }) | ||
@Component({ | ||
selector: 'ht-conditional-widget', | ||
changeDetection: ChangeDetectionStrategy.OnPush, | ||
template: ` <ng-container [hdaDashboardModel]="this.getChildModel() | async"> </ng-container> ` | ||
}) | ||
export class ConditionalWidgetRendererComponent extends WidgetRenderer<ConditionalModel> { | ||
public getChildModel(): Observable<object> { | ||
return this.model.getChildModel().pipe(takeUntil(this.destroyed$)); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. nit: this takeUntil isn't a problem but not necessary ( we used to use these a lot more if you were looking at old code - now we try instead where possible to push the subscriptions into the DOM which will auto unsubscribe. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Will fix locally. Thanks. |
||
} | ||
|
||
protected fetchData(): Observable<object> { | ||
return this.getChildModel(); | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import { CommonModule } from '@angular/common'; | ||
import { NgModule } from '@angular/core'; | ||
import { DashboardCoreModule } from '@hypertrace/hyperdash-angular'; | ||
import { ConditionalWidgetRendererComponent } from './conditional-widget-renderer.component'; | ||
import { ConditionalModel } from './conditional.model'; | ||
|
||
@NgModule({ | ||
declarations: [ConditionalWidgetRendererComponent], | ||
imports: [ | ||
CommonModule, | ||
DashboardCoreModule.with({ | ||
models: [ConditionalModel], | ||
renderers: [ConditionalWidgetRendererComponent] | ||
}) | ||
] | ||
}) | ||
export class ConditionalWidgetModule {} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
import { Model, ModelApi, ModelJson, ModelProperty } from '@hypertrace/hyperdash'; | ||
import { ModelInject, MODEL_API } from '@hypertrace/hyperdash-angular'; | ||
import { Observable } from 'rxjs'; | ||
import { map } from 'rxjs/operators'; | ||
import { ModelTemplatePropertyType } from '../../properties/property-types/model-template-type'; | ||
|
||
@Model({ | ||
type: 'conditional' | ||
}) | ||
export class ConditionalModel { | ||
@ModelProperty({ | ||
key: 'true', | ||
type: ModelTemplatePropertyType.TYPE, | ||
required: true | ||
}) | ||
public true!: ModelJson; | ||
|
||
@ModelProperty({ | ||
key: 'false', | ||
type: ModelTemplatePropertyType.TYPE, | ||
required: true | ||
}) | ||
public false!: ModelJson; | ||
|
||
@ModelInject(MODEL_API) | ||
private readonly api!: ModelApi; | ||
|
||
public getData(): Observable<boolean> { | ||
return this.api.getData<boolean>(); | ||
} | ||
|
||
public getChildModel(): Observable<object> { | ||
return this.getData().pipe(map(result => this.api.createChild(result ? this.true : this.false))); | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
import { Observable } from 'rxjs'; | ||
import { GraphQlDataSourceModel } from '../graphql-data-source.model'; | ||
|
||
export abstract class ConditionalDataSourceModel extends GraphQlDataSourceModel<boolean> { | ||
public abstract getData(): Observable<boolean>; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
by virtue of making this our fetch data implementation, this is already available as
this.data$
- we could inline line 16 into fetchData.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'll fix this locally. Thanks.