-
Notifications
You must be signed in to change notification settings - Fork 30
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: WIP start migrating metricDeltaSelected.component
Missing: - tests for component - test for including `this` in mapStateToThis - return type of connect if mapDispatchtoThis is not given refs: #2318
- Loading branch information
1 parent
bc58e65
commit 9148632
Showing
10 changed files
with
70 additions
and
90 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
3 changes: 3 additions & 0 deletions
3
...ation/app/codeCharta/state/store/lookUp/selectedBuildingId/selectedBuildingId.selector.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import { CcState } from "../../store" | ||
|
|
||
| export const selectedBuildingIdSelector = (ccState: CcState) => ccState.lookUp.selectedBuildingId |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 1 addition & 3 deletions
4
visualization/app/codeCharta/ui/metricDeltaSelected/metricDeltaSelected.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1 @@ | ||
| <span class="metric-delta" ng-show="$ctrl._viewModel.deltaValue" ng-style="$ctrl._viewModel.style"> | ||
| Δ{{ $ctrl._viewModel.deltaValue | number: 0 }} | ||
| </span> | ||
| <span class="metric-delta" [hidden]="!deltaValue" [style.color]="color">Δ{{ deltaValue }}</span> |
2 changes: 1 addition & 1 deletion
2
visualization/app/codeCharta/ui/metricDeltaSelected/metricDeltaSelected.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| metric-delta-selected-component { | ||
| cc-metric-delta-selected { | ||
| .metric-delta { | ||
| margin-left: 3px; | ||
| } | ||
|
|
||
89 changes: 25 additions & 64 deletions
89
visualization/app/codeCharta/ui/metricDeltaSelected/metricDeltaSelected.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,65 +1,26 @@ | ||
| import "./metricDeltaSelected.component.scss" | ||
| import { CodeMapBuilding } from "../codeMap/rendering/codeMapBuilding" | ||
| import { IRootScopeService, ITimeoutService } from "angular" | ||
| import { BuildingSelectedEventSubscriber, ThreeSceneService } from "../codeMap/threeViewer/threeSceneService" | ||
| import { StoreService } from "../../state/store.service" | ||
| import { MapColorsService, MapColorsSubscriber } from "../../state/store/appSettings/mapColors/mapColors.service" | ||
|
|
||
| export class MetricDeltaSelectedController implements BuildingSelectedEventSubscriber, MapColorsSubscriber { | ||
| private static TIME_TO_INIT_BINDING = 50 | ||
| private attributekey: string // angular bindings do not accept camelCase | ||
|
|
||
| private _viewModel: { | ||
| deltaValue: number | ||
| attributeKey: string | ||
| style: { color: string } | ||
| } = { | ||
| deltaValue: null, | ||
| attributeKey: null, | ||
| style: { color: null } | ||
| } | ||
|
|
||
| constructor( | ||
| private $rootScope: IRootScopeService, | ||
| private $timeout: ITimeoutService, | ||
| private threeSceneService: ThreeSceneService, | ||
| private storeService: StoreService | ||
| ) { | ||
| "ngInject" | ||
| ThreeSceneService.subscribeToBuildingSelectedEvents(this.$rootScope, this) | ||
| MapColorsService.subscribe(this.$rootScope, this) | ||
| this.$timeout(() => { | ||
| this.onBuildingSelected(this.threeSceneService.getSelectedBuilding()) | ||
| }, MetricDeltaSelectedController.TIME_TO_INIT_BINDING) | ||
| } | ||
|
|
||
| onMapColorsChanged() { | ||
| this.setDeltaColorClass() | ||
| } | ||
|
|
||
| onBuildingSelected(selectedBuilding?: CodeMapBuilding) { | ||
| this.setDeltaValue(selectedBuilding) | ||
| this.setDeltaColorClass() | ||
| } | ||
|
|
||
| private setDeltaValue(selectedBuilding?: CodeMapBuilding) { | ||
| if (selectedBuilding) { | ||
| this._viewModel.deltaValue = selectedBuilding.node.deltas?.[this.attributekey] | ||
| } | ||
| } | ||
|
|
||
| private setDeltaColorClass() { | ||
| const mapColors = this.storeService.getState().appSettings.mapColors | ||
| const color = this._viewModel.deltaValue > 0 ? mapColors.positiveDelta : mapColors.negativeDelta | ||
| this._viewModel.style = { color } | ||
| } | ||
| } | ||
|
|
||
| export const metricDeltaSelectedComponent = { | ||
| selector: "metricDeltaSelectedComponent", | ||
| template: require("./metricDeltaSelected.component.html"), | ||
| controller: MetricDeltaSelectedController, | ||
| bindings: { | ||
| attributekey: "=" | ||
| } | ||
| import { Component, Input } from "@angular/core" | ||
| import { connect } from "../../state/angular-redux/connect" | ||
| import { selectedBuildingIdSelector } from "../../state/store/lookUp/selectedBuildingId/selectedBuildingId.selector" | ||
| import { CcState } from "../../state/store/store" | ||
|
|
||
| const ConnectedClass = connect((state: CcState, that: { attributeKey: string }) => { | ||
| if (that.attributeKey === undefined) return { deltaValue: undefined, color: "" } | ||
|
|
||
| const selectedBuildingId = selectedBuildingIdSelector(state) | ||
| const selectedBuildingNode = state.lookUp.idToBuilding.get(selectedBuildingId) | ||
| const deltaValue = selectedBuildingNode?.node.deltas?.[that.attributeKey] | ||
|
|
||
| const mapColors = state.appSettings.mapColors | ||
| const color = deltaValue > 0 ? mapColors.positiveDelta : mapColors.negativeDelta | ||
|
|
||
| return { deltaValue, color } | ||
| }) | ||
|
|
||
| @Component({ | ||
| selector: "cc-metric-delta-selected", | ||
| template: require("./metricDeltaSelected.component.html") | ||
| }) | ||
| export class MetricDeltaSelectedComponent extends ConnectedClass { | ||
| // @ts-ignore - used within connect | ||
| @Input() private attributeKey | ||
| } |
7 changes: 0 additions & 7 deletions
7
visualization/app/codeCharta/ui/metricDeltaSelected/metricDeltaSelected.module.ts
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters