chore: Add bar chart

apps/taiga-lumbermill/src/dashboards/iot/components/BarChart/bar-chart.component.html

@@ -0,0 +1,39 @@
+<div class="flex">
+    <tui-axes
+        class="axes"
+        [axisXLabels]="labelsX"
+        [axisYLabels]="labelsY"
+    >
+        <tui-bar-chart
+            [max]="10000"
+            [tuiHintAppearance]="appearance"
+            [tuiHintContent]="hint"
+            [value]="value"
+        />
+    </tui-axes>
+
+    <tui-axes
+        class="axes"
+        [axisXLabels]="labelsX"
+        [axisYLabels]="labelsY"
+    >
+        <tui-bar-chart
+            [collapsed]="true"
+            [max]="10000"
+            [tuiHintAppearance]="appearance"
+            [tuiHintContent]="hint"
+            [value]="value"
+        />
+    </tui-axes>
+</div>
+
+<tui-select
+    class="select"
+    [(ngModel)]="appearance"
+>
+    Hint appearance
+    <tui-data-list-wrapper
+        *tuiDataList
+        [items]="appearances"
+    />
+</tui-select>

apps/taiga-lumbermill/src/dashboards/iot/components/BarChart/bar-chart.component.less

@@ -0,0 +1,23 @@
+.axes {
+    height: 18.75rem;
+    width: 37.5rem;
+
+    &:first-child {
+        --tui-chart-categorical-00: gold;
+        --tui-chart-categorical-01: purple;
+    }
+
+    &:last-child {
+        ---tui-chart-categorical-00: skyblue;
+        --tui-chart-categorical-01: violet;
+    }
+}
+
+.flex {
+    display: flex;
+    min-width: 31.25rem;
+}
+
+.select {
+    max-width: 20rem;
+}

apps/taiga-lumbermill/src/dashboards/iot/components/BarChart/bar-chart.component.ts

@@ -0,0 +1,43 @@
+import {CommonModule} from '@angular/common';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {TuiAxes, TuiBarChart} from '@taiga-ui/addon-charts';
+import type {TuiContext} from '@taiga-ui/cdk';
+import {tuiFormatNumber, TuiHint} from '@taiga-ui/core';
+import {TuiDataListWrapper} from '@taiga-ui/kit';
+import {TuiSelectModule} from '@taiga-ui/legacy';
+
+@Component({
+    standalone: true,
+    selector: 'app-bar-chart',
+    imports: [
+        CommonModule,
+        TuiAxes,
+        TuiBarChart,
+        TuiSelectModule,
+        FormsModule,
+        TuiDataListWrapper,
+        TuiHint,
+        TuiAxes,
+    ],
+    templateUrl: './bar-chart.component.html',
+    styleUrl: './bar-chart.component.less',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BarChartCmponent {
+    protected readonly value = [
+        [1000, 8000, 4000, 3000, 4000],
+        [6000, 2000, 4500, 7000, 5000],
+    ];
+
+    protected readonly labelsX = ['Jan 2021', 'Feb', 'Mar'];
+    protected readonly labelsY = ['0', '10 000'];
+    protected readonly appearances = ['dark', 'error'];
+
+    protected appearance = this.appearances[0];
+
+    protected readonly hint = ({$implicit}: TuiContext<number>): string =>
+        this.value
+            .reduce((result, set) => `${result}$${tuiFormatNumber(set[$implicit])}\n`, '')
+            .trim();
+}

apps/taiga-lumbermill/src/dashboards/iot/iot.component.html

@@ -4,4 +4,5 @@
 >
     <app-line-chart />
     <app-small-card />
+    <app-bar-chart />
 </tui-tiles>

apps/taiga-lumbermill/src/dashboards/iot/iot.component.ts

@@ -2,13 +2,20 @@ import {CommonModule} from '@angular/common';
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {TuiTiles} from '@taiga-ui/kit';
 
+import {BarChartCmponent} from './components/BarChart/bar-chart.component';
 import {LineChartComponent} from './components/LineChart/line-chart.component';
 import {SmallCardCmponent} from './components/SmallCard/small-card.component';
 
 @Component({
     standalone: true,
     selector: 'app-iot',
-    imports: [CommonModule, LineChartComponent, SmallCardCmponent, TuiTiles],
+    imports: [
+        CommonModule,
+        LineChartComponent,
+        SmallCardCmponent,
+        BarChartCmponent,
+        TuiTiles,
+    ],
     templateUrl: './iot.component.html',
     styleUrl: './iot.component.less',
     changeDetection: ChangeDetectionStrategy.OnPush,

package.json

@@ -66,7 +66,7 @@
         "@angular/router": "~18.0.0",
         "@nx/angular": "19.4.2",
         "@taiga-ui/addon-charts": "^4.0.0-rc.5",
-        "@taiga-ui/cdk": "^4.0.0-rc.4",
+        "@taiga-ui/cdk": "^4.0.0-rc.5",
         "@taiga-ui/core": "^4.0.0-rc.5",
         "@taiga-ui/experimental": "^4.0.0-rc.4",
         "@taiga-ui/icons": "^4.0.0-rc.4",