chore: change Cost

taiga-family · Jul 18, 2024 · d9ba463 · d9ba463
1 parent 5369d91
commit d9ba463
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 37 deletions.
diff --git a/apps/taiga-lumbermill/src/dashboards/iot/components/Cost/cost.component.html b/apps/taiga-lumbermill/src/dashboards/iot/components/Cost/cost.component.html
@@ -1,7 +1,7 @@
 <div
     tuiAppearance="whiteblock"
     tuiCardLarge="normal"
-    class="bar-chart"
+    class="card"
 >
     <div>
         <header tuiHeader>
@@ -23,14 +23,13 @@
         <div class="flex">
             <tui-axes
                 class="axes"
-                [axisXLabels]="data.labelsX"
-                [axisYLabels]="data.labelsY"
+                [axisXLabels]="costService.costData.labelsX"
+                [axisYLabels]="costService.costData.labelsY"
             >
                 <tui-bar-chart
                     [max]="10000"
-                    [tuiHintAppearance]="data.appearance"
-                    [tuiHintContent]="data.hint"
-                    [value]="data.value"
+                    [tuiHintContent]="costService.hint"
+                    [value]="costService.costData.value"
                 />
             </tui-axes>
         </div>

diff --git a/apps/taiga-lumbermill/src/dashboards/iot/components/Cost/cost.component.less b/apps/taiga-lumbermill/src/dashboards/iot/components/Cost/cost.component.less
@@ -1,11 +1,5 @@
-@import '@taiga-ui/core/styles/taiga-ui-local.less';
-
 .color() {
-    color: var(--tui-chart-categorical-01);
-
-    &:first-child {
-        color: var(--tui-background-accent-1);
-    }
+    color: var(--tui-background-accent-1);
 
     &:last-child {
         color: var(--tui-chart-categorical-12);
@@ -16,10 +10,8 @@
     min-height: 18.75rem;
     width: 100%;
 
-    &:first-child {
-        --tui-chart-categorical-00: var(--tui-background-accent-1);
-        --tui-chart-categorical-01: var(--tui-chart-categorical-12);
-    }
+    --tui-chart-categorical-00: var(--tui-background-accent-1);
+    --tui-chart-categorical-01: var(--tui-chart-categorical-12);
 }
 
 .flex {
@@ -31,10 +23,10 @@
     max-width: 20rem;
 }
 
-.bar-chart {
+.card {
     width: 100%;
-    background-color: var(--tui-background-base);
     height: 100%;
+    background-color: var(--tui-background-base);
 }
 
 .legend {
@@ -61,9 +53,3 @@
 .name {
     color: var(--tui-text-primary);
 }
-
-:host {
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-}
diff --git a/apps/taiga-lumbermill/src/dashboards/iot/components/Cost/cost.component.ts b/apps/taiga-lumbermill/src/dashboards/iot/components/Cost/cost.component.ts
@@ -7,7 +7,7 @@ import {TuiDataListWrapper} from '@taiga-ui/kit';
 import {TuiCardLarge} from '@taiga-ui/layout';
 import {TuiSelectModule} from '@taiga-ui/legacy';
 
-import {CostService} from '../../data/services/cost.service';
+import {CostService} from './cost.service';
 
 @Component({
     standalone: true,
@@ -29,5 +29,5 @@ import {CostService} from '../../data/services/cost.service';
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CostComponent {
-    protected data = inject(CostService);
+    protected costService = inject(CostService);
 }
diff --git a/...hboards/iot/data/services/cost.service.ts → ...oards/iot/components/Cost/cost.service.ts b/...hboards/iot/data/services/cost.service.ts → ...oards/iot/components/Cost/cost.service.ts
@@ -2,21 +2,28 @@ import {Injectable} from '@angular/core';
 import type {TuiContext} from '@taiga-ui/cdk';
 import {tuiFormatNumber} from '@taiga-ui/core';
 
+interface CostData {
+    value: number[][];
+    labelsX: string[];
+    labelsY: string[];
+}
+
+const INITIAL_DATA: CostData = {
+    value: [
+        [1000, 8000, 4000, 3000, 4000],
+        [6000, 2000, 4500, 7000, 5000],
+    ],
+    labelsX: ['Jan 2021', 'Feb', 'Mar'],
+    labelsY: ['0', '10 000'],
+};
+
 @Injectable({
     providedIn: 'root',
 })
 export class CostService {
-    public value = [
-        [1000, 8000, 4000, 3000, 4000],
-        [6000, 2000, 4500, 7000, 5000],
-    ];
-
-    public labelsX = ['Jan 2021', 'Feb', 'Mar'];
-    public labelsY = ['0', '10 000'];
-    public appearances = ['dark', 'error'];
-    public appearance = this.appearances[0];
+    public readonly costData = INITIAL_DATA;
     public hint = ({$implicit}: TuiContext<number>): string =>
-        this.value
+        this.costData.value
             .reduce((result, set) => `${result}$${tuiFormatNumber(set[$implicit])}\n`, '')
             .trim();
 }