diff --git a/samples/charts/category-chart/axis-range/src/app.component.html b/samples/charts/category-chart/axis-range/src/app.component.html index 34c268c3f..50268a291 100644 --- a/samples/charts/category-chart/axis-range/src/app.component.html +++ b/samples/charts/category-chart/axis-range/src/app.component.html @@ -17,6 +17,7 @@ valueType="EnumValue" dropDownNames="0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100" dropDownValues="0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100" + primitiveValue="0" (changed)="this.editorChangeUpdateYAxisMinimumValue($event)"> diff --git a/samples/charts/category-chart/format-specifiers/src/app.component.html b/samples/charts/category-chart/format-specifiers/src/app.component.html index 914d5ee45..43b0fd08f 100644 --- a/samples/charts/category-chart/format-specifiers/src/app.component.html +++ b/samples/charts/category-chart/format-specifiers/src/app.component.html @@ -4,11 +4,11 @@
+ #legend + [target]="chart" + valueFormatString="{0} Billion" + [valueFormatSpecifiers]="numberFormatSpecifier1">
@@ -19,10 +19,11 @@ chartType="Column" isHorizontalZoomEnabled="false" isVerticalZoomEnabled="false" - dataToolTipValueFormatMode="Currency" - dataToolTipValueFormatString="${0} Billion" + finalValueAnnotationsPrecision="2" + dataToolTipValueFormatString="{0} Billion" + [dataToolTipValueFormatSpecifiers]="numberFormatSpecifier3" yAxisLabelFormat="{0}B" - [yAxisLabelFormatSpecifiers]="numberFormatSpecifier1"> + [yAxisLabelFormatSpecifiers]="numberFormatSpecifier5">
diff --git a/samples/charts/category-chart/format-specifiers/src/app.component.ts b/samples/charts/category-chart/format-specifiers/src/app.component.ts index c2bd289c8..2d701d621 100644 --- a/samples/charts/category-chart/format-specifiers/src/app.component.ts +++ b/samples/charts/category-chart/format-specifiers/src/app.component.ts @@ -1,5 +1,5 @@ import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; -import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataLegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataLegendDescriptionModule, CategoryChartDescriptionModule, NumberFormatSpecifierDescriptionModule } from 'igniteui-angular-core'; import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies'; import { IgxDataLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts'; import { IgxNumberFormatSpecifier } from 'igniteui-angular-core'; @@ -16,8 +16,6 @@ export class AppComponent implements AfterViewInit @ViewChild("legend", { static: true } ) private legend: IgxDataLegendComponent - @ViewChild("chart", { static: true } ) - private chart: IgxCategoryChartComponent private _numberFormatSpecifier1: IgxNumberFormatSpecifier[] | null = null; public get numberFormatSpecifier1(): IgxNumberFormatSpecifier[] { if (this._numberFormatSpecifier1 == null) @@ -27,13 +25,49 @@ export class AppComponent implements AfterViewInit numberFormatSpecifier2.style = "currency"; numberFormatSpecifier2.currency = "USD"; numberFormatSpecifier2.currencyDisplay = "symbol"; - numberFormatSpecifier2.minimumFractionDigits = 0; + numberFormatSpecifier2.maximumFractionDigits = 2; + numberFormatSpecifier2.minimumFractionDigits = 2; numberFormatSpecifier1.push(numberFormatSpecifier2) this._numberFormatSpecifier1 = numberFormatSpecifier1; } return this._numberFormatSpecifier1; } + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + private _numberFormatSpecifier3: IgxNumberFormatSpecifier[] | null = null; + public get numberFormatSpecifier3(): IgxNumberFormatSpecifier[] { + if (this._numberFormatSpecifier3 == null) + { + let numberFormatSpecifier3: IgxNumberFormatSpecifier[] = []; + var numberFormatSpecifier4 = new IgxNumberFormatSpecifier(); + numberFormatSpecifier4.style = "currency"; + numberFormatSpecifier4.currency = "USD"; + numberFormatSpecifier4.currencyDisplay = "symbol"; + numberFormatSpecifier4.maximumFractionDigits = 2; + numberFormatSpecifier4.minimumFractionDigits = 2; + + numberFormatSpecifier3.push(numberFormatSpecifier4) + this._numberFormatSpecifier3 = numberFormatSpecifier3; + } + return this._numberFormatSpecifier3; + } + private _numberFormatSpecifier5: IgxNumberFormatSpecifier[] | null = null; + public get numberFormatSpecifier5(): IgxNumberFormatSpecifier[] { + if (this._numberFormatSpecifier5 == null) + { + let numberFormatSpecifier5: IgxNumberFormatSpecifier[] = []; + var numberFormatSpecifier6 = new IgxNumberFormatSpecifier(); + numberFormatSpecifier6.style = "currency"; + numberFormatSpecifier6.currency = "USD"; + numberFormatSpecifier6.currencyDisplay = "symbol"; + numberFormatSpecifier6.minimumFractionDigits = 0; + + numberFormatSpecifier5.push(numberFormatSpecifier6) + this._numberFormatSpecifier5 = numberFormatSpecifier5; + } + return this._numberFormatSpecifier5; + } private _highestGrossingMovies: HighestGrossingMovies = null; public get highestGrossingMovies(): HighestGrossingMovies { if (this._highestGrossingMovies == null) @@ -51,6 +85,7 @@ export class AppComponent implements AfterViewInit PropertyEditorPanelDescriptionModule.register(context); DataLegendDescriptionModule.register(context); CategoryChartDescriptionModule.register(context); + NumberFormatSpecifierDescriptionModule.register(context); } return this._componentRenderer; } diff --git a/samples/charts/category-chart/format-specifiers/src/app.module.ts b/samples/charts/category-chart/format-specifiers/src/app.module.ts index fb76caf81..336d7a718 100644 --- a/samples/charts/category-chart/format-specifiers/src/app.module.ts +++ b/samples/charts/category-chart/format-specifiers/src/app.module.ts @@ -7,6 +7,7 @@ import { AppComponent } from "./app.component"; import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; import { IgxDataLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; +import { IgxNumberFormatSpecifierModule } from 'igniteui-angular-core'; @NgModule({ bootstrap: [AppComponent], @@ -20,7 +21,8 @@ import { IgxDataLegendModule, IgxCategoryChartModule } from 'igniteui-angular-ch FormsModule, IgxPropertyEditorPanelModule, IgxDataLegendModule, - IgxCategoryChartModule + IgxCategoryChartModule, + IgxNumberFormatSpecifierModule ], providers: [], schemas: [] diff --git a/samples/charts/data-chart/format-specifiers/src/app.component.html b/samples/charts/data-chart/format-specifiers/src/app.component.html index 8a048de82..bdc6c5bdb 100644 --- a/samples/charts/data-chart/format-specifiers/src/app.component.html +++ b/samples/charts/data-chart/format-specifiers/src/app.component.html @@ -7,8 +7,8 @@ name="Legend" #legend [target]="chart" - valueFormatMode="Currency" - valueFormatString="${0} Billion"> + valueFormatString="{0} Billion" + [valueFormatSpecifiers]="numberFormatSpecifier1">
@@ -32,7 +32,7 @@ title="Billions of U.S. Dollars" labelFormat="{0}B" abbreviateLargeNumbers="false" - [labelFormatSpecifiers]="numberFormatSpecifier1"> + [labelFormatSpecifiers]="numberFormatSpecifier3"> + valueFormatString="{0} Billion" + [valueFormatSpecifiers]="numberFormatSpecifier5">
diff --git a/samples/charts/data-chart/format-specifiers/src/app.component.ts b/samples/charts/data-chart/format-specifiers/src/app.component.ts index 85545a924..91100d4c0 100644 --- a/samples/charts/data-chart/format-specifiers/src/app.component.ts +++ b/samples/charts/data-chart/format-specifiers/src/app.component.ts @@ -15,12 +15,6 @@ export class AppComponent implements AfterViewInit @ViewChild("legend", { static: true } ) private legend: IgxDataLegendComponent - @ViewChild("chart", { static: true } ) - private chart: IgxDataChartComponent - @ViewChild("yAxis", { static: true } ) - private yAxis: IgxCategoryYAxisComponent - @ViewChild("xAxis", { static: true } ) - private xAxis: IgxNumericXAxisComponent private _numberFormatSpecifier1: IgxNumberFormatSpecifier[] | null = null; public get numberFormatSpecifier1(): IgxNumberFormatSpecifier[] { if (this._numberFormatSpecifier1 == null) @@ -30,19 +24,59 @@ export class AppComponent implements AfterViewInit numberFormatSpecifier2.style = "currency"; numberFormatSpecifier2.currency = "USD"; numberFormatSpecifier2.currencyDisplay = "symbol"; - numberFormatSpecifier2.minimumFractionDigits = 0; + numberFormatSpecifier2.minimumFractionDigits = 2; + numberFormatSpecifier2.maximumFractionDigits = 2; numberFormatSpecifier1.push(numberFormatSpecifier2) this._numberFormatSpecifier1 = numberFormatSpecifier1; } return this._numberFormatSpecifier1; } + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxCategoryYAxisComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxNumericXAxisComponent + private _numberFormatSpecifier3: IgxNumberFormatSpecifier[] | null = null; + public get numberFormatSpecifier3(): IgxNumberFormatSpecifier[] { + if (this._numberFormatSpecifier3 == null) + { + let numberFormatSpecifier3: IgxNumberFormatSpecifier[] = []; + var numberFormatSpecifier4 = new IgxNumberFormatSpecifier(); + numberFormatSpecifier4.style = "currency"; + numberFormatSpecifier4.currency = "USD"; + numberFormatSpecifier4.currencyDisplay = "symbol"; + numberFormatSpecifier4.minimumFractionDigits = 0; + + numberFormatSpecifier3.push(numberFormatSpecifier4) + this._numberFormatSpecifier3 = numberFormatSpecifier3; + } + return this._numberFormatSpecifier3; + } @ViewChild("barSeries1", { static: true } ) private barSeries1: IgxBarSeriesComponent @ViewChild("barSeries2", { static: true } ) private barSeries2: IgxBarSeriesComponent @ViewChild("tooltips", { static: true } ) private tooltips: IgxDataToolTipLayerComponent + private _numberFormatSpecifier5: IgxNumberFormatSpecifier[] | null = null; + public get numberFormatSpecifier5(): IgxNumberFormatSpecifier[] { + if (this._numberFormatSpecifier5 == null) + { + let numberFormatSpecifier5: IgxNumberFormatSpecifier[] = []; + var numberFormatSpecifier6 = new IgxNumberFormatSpecifier(); + numberFormatSpecifier6.style = "currency"; + numberFormatSpecifier6.currency = "USD"; + numberFormatSpecifier6.currencyDisplay = "symbol"; + numberFormatSpecifier6.minimumFractionDigits = 2; + numberFormatSpecifier6.maximumFractionDigits = 2; + + numberFormatSpecifier5.push(numberFormatSpecifier6) + this._numberFormatSpecifier5 = numberFormatSpecifier5; + } + return this._numberFormatSpecifier5; + } private _highestGrossingMovies: HighestGrossingMovies = null; public get highestGrossingMovies(): HighestGrossingMovies { if (this._highestGrossingMovies == null) diff --git a/samples/charts/financial-chart/format-specifiers/src/app.component.html b/samples/charts/financial-chart/format-specifiers/src/app.component.html index e00ce34ae..ca0cc5312 100644 --- a/samples/charts/financial-chart/format-specifiers/src/app.component.html +++ b/samples/charts/financial-chart/format-specifiers/src/app.component.html @@ -7,8 +7,8 @@ includedColumns="Close, Change, Value" excludedColumns="High, Low, Open, Volume" labelDisplayMode="Hidden" - valueFormatMode="Currency" - valueFormatCulture="en-GB"> + valueFormatString="{0}" + [valueFormatSpecifiers]="numberFormatSpecifier1">
@@ -17,14 +17,14 @@ #chart chartType="Candle" [dataSource]="multipleStocks" - dataToolTipValueFormatMode="Currency" - dataToolTipValueFormatCulture="en-GB" - dataToolTipLabelDisplayMode="Hidden" + dataToolTipValueFormatString="{0}" + [dataToolTipValueFormatSpecifiers]="numberFormatSpecifier3" dataToolTipIncludedColumns="Close, Change, Value" dataToolTipHeaderFormatTime="None" zoomSliderType="None" + yAxisAbbreviateLargeNumbers="false" yAxisLabelFormat="{0}" - [yAxisLabelFormatSpecifiers]="numberFormatSpecifier1" + [yAxisLabelFormatSpecifiers]="numberFormatSpecifier5" xAxisLabelFormat="{0}" [xAxisLabelFormatSpecifiers]="dateTimeFormatSpecifier1"> diff --git a/samples/charts/financial-chart/format-specifiers/src/app.component.ts b/samples/charts/financial-chart/format-specifiers/src/app.component.ts index 13a978c8f..7dda26119 100644 --- a/samples/charts/financial-chart/format-specifiers/src/app.component.ts +++ b/samples/charts/financial-chart/format-specifiers/src/app.component.ts @@ -15,8 +15,6 @@ export class AppComponent implements AfterViewInit @ViewChild("legend", { static: true } ) private legend: IgxDataLegendComponent - @ViewChild("chart", { static: true } ) - private chart: IgxFinancialChartComponent private _numberFormatSpecifier1: IgxNumberFormatSpecifier[] | null = null; public get numberFormatSpecifier1(): IgxNumberFormatSpecifier[] { if (this._numberFormatSpecifier1 == null) @@ -26,13 +24,49 @@ export class AppComponent implements AfterViewInit numberFormatSpecifier2.currency = "EUR"; numberFormatSpecifier2.style = "currency"; numberFormatSpecifier2.locale = "en-GB"; - numberFormatSpecifier2.minimumFractionDigits = 0; + numberFormatSpecifier2.minimumFractionDigits = 2; + numberFormatSpecifier2.maximumFractionDigits = 2; numberFormatSpecifier1.push(numberFormatSpecifier2) this._numberFormatSpecifier1 = numberFormatSpecifier1; } return this._numberFormatSpecifier1; } + @ViewChild("chart", { static: true } ) + private chart: IgxFinancialChartComponent + private _numberFormatSpecifier3: IgxNumberFormatSpecifier[] | null = null; + public get numberFormatSpecifier3(): IgxNumberFormatSpecifier[] { + if (this._numberFormatSpecifier3 == null) + { + let numberFormatSpecifier3: IgxNumberFormatSpecifier[] = []; + var numberFormatSpecifier4 = new IgxNumberFormatSpecifier(); + numberFormatSpecifier4.currency = "EUR"; + numberFormatSpecifier4.style = "currency"; + numberFormatSpecifier4.locale = "en-GB"; + numberFormatSpecifier4.minimumFractionDigits = 2; + numberFormatSpecifier4.maximumFractionDigits = 2; + + numberFormatSpecifier3.push(numberFormatSpecifier4) + this._numberFormatSpecifier3 = numberFormatSpecifier3; + } + return this._numberFormatSpecifier3; + } + private _numberFormatSpecifier5: IgxNumberFormatSpecifier[] | null = null; + public get numberFormatSpecifier5(): IgxNumberFormatSpecifier[] { + if (this._numberFormatSpecifier5 == null) + { + let numberFormatSpecifier5: IgxNumberFormatSpecifier[] = []; + var numberFormatSpecifier6 = new IgxNumberFormatSpecifier(); + numberFormatSpecifier6.currency = "EUR"; + numberFormatSpecifier6.style = "currency"; + numberFormatSpecifier6.locale = "en-GB"; + numberFormatSpecifier6.minimumFractionDigits = 0; + + numberFormatSpecifier5.push(numberFormatSpecifier6) + this._numberFormatSpecifier5 = numberFormatSpecifier5; + } + return this._numberFormatSpecifier5; + } private _dateTimeFormatSpecifier1: IgxDateTimeFormatSpecifier[] | null = null; public get dateTimeFormatSpecifier1(): IgxDateTimeFormatSpecifier[] { if (this._dateTimeFormatSpecifier1 == null) diff --git a/samples/charts/financial-chart/format-specifiers/src/app.module.ts b/samples/charts/financial-chart/format-specifiers/src/app.module.ts index 3b0932b7a..b706ffcaa 100644 --- a/samples/charts/financial-chart/format-specifiers/src/app.module.ts +++ b/samples/charts/financial-chart/format-specifiers/src/app.module.ts @@ -6,6 +6,7 @@ import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; import { AppComponent } from "./app.component"; import { IgxFinancialChartModule, IgxDataChartInteractivityModule, IgxDataLegendModule } from 'igniteui-angular-charts'; +import { IgxNumberFormatSpecifierModule, IgxDateTimeFormatSpecifierModule } from 'igniteui-angular-core'; @NgModule({ bootstrap: [AppComponent], @@ -19,7 +20,9 @@ import { IgxFinancialChartModule, IgxDataChartInteractivityModule, IgxDataLegend FormsModule, IgxFinancialChartModule, IgxDataChartInteractivityModule, - IgxDataLegendModule + IgxDataLegendModule, + IgxNumberFormatSpecifierModule, + IgxDateTimeFormatSpecifierModule ], providers: [], schemas: []