Skip to content

Commit 763d64f

Browse files
palbizuPatricio Albizu
palbizu
and
Patricio Albizu
authored
fix: Adding input variables in the Gauge component (#720)
* feat: gaugeSubdivision in progress * fix: gauge refactoring * feat: Lintering code * fix: fixing label * fix: removing unused import * fix: refactoring code * fix: fixing label * fix: adding const Co-authored-by: Patricio Albizu <[email protected]>
1 parent 624009a commit 763d64f

File tree

2 files changed

+87
-22
lines changed

2 files changed

+87
-22
lines changed

‎projects/observability/src/shared/components/gauge/gauge.component.test.ts‎

Lines changed: 67 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ describe('Gauge component', () => {
2222
]
2323
});
2424

25-
test('render all data', () => {
25+
test('render data from thresholds', () => {
2626
spectator = createHost(`<ht-gauge [value]="value" [maxValue]="maxValue" [thresholds]="thresholds"></ht-gauge>`, {
2727
hostProps: {
2828
value: 80,
@@ -57,13 +57,74 @@ describe('Gauge component', () => {
5757
maxValue: 100,
5858
valueArc:
5959
'M-137.45365478341216,36.83059579592157A7.5,7.5,0,0,1,-146.73136591755903,31.143317998687955A150,150,0,0,1,129.88160257335298,-75.03845222935763A7.5,7.5,0,0,1,126.79245119273195,-64.60398068647702L126.79245119273195,-64.60398068647702A7.5,7.5,0,0,1,116.8934423160177,-67.5346070064219A135,135,0,0,0,-132.05822932580313,28.02898619881914A7.5,7.5,0,0,1,-137.45365478341216,36.83059579592157Z',
60-
threshold: {
61-
color: '#9e4c41',
62-
end: 90,
63-
label: 'Medium',
64-
start: 60
60+
color: '#9e4c41',
61+
label: 'Medium'
62+
}
63+
});
64+
});
65+
66+
test('render data from default values', () => {
67+
spectator = createHost(
68+
`<ht-gauge [value]="value" [maxValue]="maxValue" [defaultColor]="defaultColor" [defaultLabel]="defaultLabel"></ht-gauge>`,
69+
{
70+
hostProps: {
71+
value: 80,
72+
maxValue: 100,
73+
defaultColor: '#9e4c41',
74+
defaultLabel: 'Medium'
6575
}
6676
}
77+
);
78+
spectator.component.onLayoutChange();
79+
expect(spectator.component.rendererData).toEqual({
80+
backgroundArc:
81+
'M-137.45365478341216,36.83059579592157A7.5,7.5,0,0,1,-146.73136591755903,31.143317998687955A150,150,0,1,1,146.73136591755903,31.143317998687948A7.5,7.5,0,0,1,137.45365478341216,36.83059579592157L137.45365478341216,36.83059579592157A7.5,7.5,0,0,1,132.05822932580313,28.02898619881916A135,135,0,1,0,-132.05822932580313,28.02898619881914A7.5,7.5,0,0,1,-137.45365478341216,36.83059579592157Z',
82+
origin: {
83+
x: 150,
84+
y: 150
85+
},
86+
radius: 150,
87+
data: {
88+
value: 80,
89+
maxValue: 100,
90+
valueArc:
91+
'M-137.45365478341216,36.83059579592157A7.5,7.5,0,0,1,-146.73136591755903,31.143317998687955A150,150,0,0,1,129.88160257335298,-75.03845222935763A7.5,7.5,0,0,1,126.79245119273195,-64.60398068647702L126.79245119273195,-64.60398068647702A7.5,7.5,0,0,1,116.8934423160177,-67.5346070064219A135,135,0,0,0,-132.05822932580313,28.02898619881914A7.5,7.5,0,0,1,-137.45365478341216,36.83059579592157Z',
92+
color: '#9e4c41',
93+
label: 'Medium'
94+
}
95+
});
96+
});
97+
98+
test('render data without default values or thresholds', () => {
99+
spectator = createHost(`<ht-gauge [value]="value" [maxValue]="maxValue"></ht-gauge>`, {
100+
hostProps: {
101+
value: 80,
102+
maxValue: 100
103+
}
104+
});
105+
spectator.component.onLayoutChange();
106+
expect(spectator.component.rendererData).toEqual({
107+
backgroundArc:
108+
'M-137.45365478341216,36.83059579592157A7.5,7.5,0,0,1,-146.73136591755903,31.143317998687955A150,150,0,1,1,146.73136591755903,31.143317998687948A7.5,7.5,0,0,1,137.45365478341216,36.83059579592157L137.45365478341216,36.83059579592157A7.5,7.5,0,0,1,132.05822932580313,28.02898619881916A135,135,0,1,0,-132.05822932580313,28.02898619881914A7.5,7.5,0,0,1,-137.45365478341216,36.83059579592157Z',
109+
origin: {
110+
x: 150,
111+
y: 150
112+
},
113+
radius: 150,
114+
data: {
115+
value: 80,
116+
maxValue: 100,
117+
valueArc:
118+
'M-137.45365478341216,36.83059579592157A7.5,7.5,0,0,1,-146.73136591755903,31.143317998687955A150,150,0,0,1,129.88160257335298,-75.03845222935763A7.5,7.5,0,0,1,126.79245119273195,-64.60398068647702L126.79245119273195,-64.60398068647702A7.5,7.5,0,0,1,116.8934423160177,-67.5346070064219A135,135,0,0,0,-132.05822932580313,28.02898619881914A7.5,7.5,0,0,1,-137.45365478341216,36.83059579592157Z',
119+
color: Color.Blue5,
120+
label: ''
121+
}
67122
});
68123
});
124+
125+
test('no render data when values are undefined', () => {
126+
spectator = createHost(`<ht-gauge></ht-gauge>`);
127+
spectator.component.onLayoutChange();
128+
expect(spectator.component.rendererData).toBeUndefined();
129+
});
69130
});

‎projects/observability/src/shared/components/gauge/gauge.component.ts‎

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,12 @@ import { Arc, arc, DefaultArcObject } from 'd3-shape';
2222
class="value-ring"
2323
*ngIf="rendererData.radius > ${GaugeComponent.GAUGE_MIN_RADIUS_TO_SHOW_PATH}"
2424
[attr.d]="rendererData.data.valueArc"
25-
[attr.fill]="rendererData.data.threshold.color"
25+
[attr.fill]="rendererData.data.color"
2626
/>
27-
<text x="0" y="-4" class="value-display" [attr.fill]="rendererData.data.threshold.color">
27+
<text x="0" y="-4" class="value-display" [attr.fill]="rendererData.data.color">
2828
{{ rendererData.data.value }}
2929
</text>
30-
<text x="0" y="20" class="label-display">{{ rendererData.data.threshold.label }}</text>
30+
<text x="0" y="20" class="label-display">{{ rendererData.data.label }}</text>
3131
</g>
3232
</g>
3333
</svg>
@@ -41,6 +41,7 @@ export class GaugeComponent implements OnChanges {
4141
private static readonly GAUGE_ARC_CORNER_RADIUS: number = 10;
4242
private static readonly GAUGE_MIN_RADIUS_TO_SHOW_PATH: number = 80;
4343
private static readonly EXTRA_ARC_ANGLE: number = Math.PI / 12;
44+
private static readonly DEFAULT_COLOR: string = Color.Blue5;
4445

4546
@Input()
4647
public value?: number;
@@ -51,6 +52,12 @@ export class GaugeComponent implements OnChanges {
5152
@Input()
5253
public thresholds: GaugeThreshold[] = [];
5354

55+
@Input()
56+
public defaultLabel?: string;
57+
58+
@Input()
59+
public defaultColor?: Color | string;
60+
5461
public rendererData?: GaugeSvgRendererData;
5562

5663
public constructor(
@@ -149,18 +156,17 @@ export class GaugeComponent implements OnChanges {
149156
}
150157

151158
private calculateInputData(): GaugeInputData | undefined {
152-
if (this.value !== undefined && this.maxValue !== undefined && this.maxValue > 0 && this.thresholds.length > 0) {
159+
if (this.value !== undefined && this.maxValue !== undefined && this.maxValue > 0) {
153160
const currentThreshold = this.thresholds.find(
154161
threshold => this.value! >= threshold.start && this.value! <= threshold.end
155162
);
156163

157-
if (currentThreshold) {
158-
return {
159-
value: this.value,
160-
maxValue: this.maxValue,
161-
threshold: currentThreshold
162-
};
163-
}
164+
return {
165+
value: this.value,
166+
maxValue: this.maxValue,
167+
label: currentThreshold?.label ?? this.defaultLabel ?? '',
168+
color: currentThreshold?.color ?? this.defaultColor ?? GaugeComponent.DEFAULT_COLOR
169+
};
164170
}
165171
}
166172

@@ -197,15 +203,13 @@ interface GaugeSvgRendererData {
197203
data?: GaugeData;
198204
}
199205

200-
interface GaugeData {
206+
interface GaugeData extends GaugeInputData {
201207
valueArc: string;
202-
value: number;
203-
maxValue: number;
204-
threshold: GaugeThreshold;
205208
}
206209

207210
interface GaugeInputData {
208211
value: number;
209212
maxValue: number;
210-
threshold: GaugeThreshold;
213+
label: string;
214+
color: Color | string;
211215
}

0 commit comments

Comments
 (0)