feat(addon-charts): BarSet add label (#2780)

taiga-family · Oct 3, 2022 · d4f4ce0 · d4f4ce0
1 parent b8eff54
commit d4f4ce0
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 5 deletions.
diff --git a/projects/addon-charts/components/bar-set/bar-set.style.less b/projects/addon-charts/components/bar-set/bar-set.style.less
@@ -1,4 +1,5 @@
 :host {
+    position: relative;
     display: flex;
     height: 100%;
     align-items: flex-end;
@@ -11,11 +12,11 @@
     height: 100%;
     align-items: flex-end;
 
-    &:first-child {
+    &:first-of-type {
         margin-left: 25%;
     }
 
-    &:last-child {
+    &:last-of-type {
         margin-right: 25%;
     }
 }
@@ -34,3 +35,10 @@
         margin: 0 auto;
     }
 }
+
+.t-label {
+    position: absolute;
+    top: -1.5rem;
+    font: var(--tui-font-text-xs);
+    color: var(--tui-text-02);
+}
diff --git a/projects/addon-charts/components/bar-set/bar-set.template.html b/projects/addon-charts/components/bar-set/bar-set.template.html
@@ -33,3 +33,4 @@
         [size]="computedSize"
     ></tui-bar>
 </ng-template>
+<span class="t-label"><ng-content></ng-content></span>
diff --git a/projects/demo/src/modules/charts/bar-set/bar-set.module.ts b/projects/demo/src/modules/charts/bar-set/bar-set.module.ts
@@ -3,6 +3,7 @@ import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
 import {TuiBarSetModule} from '@taiga-ui/addon-charts';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
+import {TuiFormatNumberPipeModule} from '@taiga-ui/core';
 
 import {ExampleTuiBarSetComponent} from './bar-set.component';
 import {TuiBarSetExample1} from './examples/1';
@@ -16,6 +17,7 @@ import {TuiBarSetExample5} from './examples/5';
         CommonModule,
         RouterModule,
         TuiBarSetModule,
+        TuiFormatNumberPipeModule,
         TuiAddonDocModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiBarSetComponent)),
     ],

diff --git a/projects/demo/src/modules/charts/bar-set/bar-set.template.html b/projects/demo/src/modules/charts/bar-set/bar-set.template.html
@@ -47,6 +47,7 @@
             id="collapsed"
             i18n-heading
             heading="Collapsed"
+            description="With value label"
             [content]="example5"
         >
             <tui-bar-set-example-5></tui-bar-set-example-5>

diff --git a/projects/demo/src/modules/charts/bar-set/examples/5/index.html b/projects/demo/src/modules/charts/bar-set/examples/5/index.html
@@ -2,4 +2,6 @@
     class="bars"
     [collapsed]="true"
     [value]="value"
-></tui-bar-set>
+>
+    {{ sum | tuiFormatNumber }}
+</tui-bar-set>
diff --git a/projects/demo/src/modules/charts/bar-set/examples/5/index.less b/projects/demo/src/modules/charts/bar-set/examples/5/index.less
@@ -1,5 +1,6 @@
 .bars {
     height: 7.5rem;
     width: 5rem;
+    margin-top: 2rem;
     box-shadow: 0 1px var(--tui-base-03);
 }
diff --git a/projects/demo/src/modules/charts/bar-set/examples/5/index.ts b/projects/demo/src/modules/charts/bar-set/examples/5/index.ts
@@ -10,5 +10,6 @@ import {encapsulation} from '@demo/emulate/encapsulation';
     encapsulation,
 })
 export class TuiBarSetExample5 {
-    readonly value = [45, 30, 20, 12, 6];
+    readonly value = [451, 302, 203, 124, 65];
+    readonly sum = this.value.reduce((a, b) => a + b, 0);
 }
diff --git a/projects/kit/components/input-count/input-count-options.ts b/projects/kit/components/input-count/input-count-options.ts
@@ -23,7 +23,7 @@ export const TUI_INPUT_COUNT_DEFAULT_OPTIONS: TuiInputCountOptions = {
     appearance: `textfield`,
     hideButtons: false,
     min: 0,
-    max: Infinity,
+    max: Number.MAX_SAFE_INTEGER,
     step: 1,
     postfix: ``,
 };