Merge branch 'vnext' of https://github.com/IgniteUI/igniteui-xplat-docs…

… into ganastasov/tree-grid-display-density-topic

azure-pipelines/build-pipeline-jp+kr.yml

@@ -15,6 +15,10 @@ parameters:
   displayName: 'Get verbose output from steps - where configurable'
   type: boolean
   default: false
+- name: shouldCleanPostExectuion
+  displayName: 'Clean all pipeline dirs after the pipeline finishes?'
+  type: boolean
+  default: true
 
 name: $(BuildDefinitionName)_$(Year:yyyy).$(Month).$(DayOfMonth)$(Rev:.r)
 
@@ -134,4 +138,5 @@ stages:
         targetPath: '$(Build.ArtifactStagingDirectory)'
         artifact: 'XPlatDocFX'
 
-
+    - ${{ if eq(parameters.shouldCleanPostExectuion, true) }}:
+      - task: PostBuildCleanup@4

azure-pipelines/build-pipeline-make-pr-jp+kr.yml

@@ -18,6 +18,10 @@ parameters:
   displayName: 'Get verbose output from steps - where configurable'
   type: boolean
   default: false
+- name: shouldCleanPostExectuion
+  displayName: 'Clean all pipeline dirs after the pipeline finishes?'
+  type: boolean
+  default: true
 
 name: $(BuildDefinitionName)_$(Year:yyyy).$(Month).$(DayOfMonth)$(Rev:.r)
 
@@ -95,3 +99,5 @@ stages:
 
         # Angular doesn't produce an artifact that we can publish right now.
 
+      - ${{ if eq(parameters.shouldCleanPostExectuion, true) }}:
+        - task: PostBuildCleanup@4

azure-pipelines/build-pipeline-make-pr.yml

@@ -18,6 +18,10 @@ parameters:
   displayName: 'Get verbose output from steps - where configurable'
   type: boolean
   default: false
+- name: shouldCleanPostExectuion
+  displayName: 'Clean all pipeline dirs after the pipeline finishes?'
+  type: boolean
+  default: true
 
 name: $(BuildDefinitionName)_$(Year:yyyy).$(Month).$(DayOfMonth)$(Rev:.r)
 
@@ -93,3 +97,5 @@ stages:
 
       # Angular doesn't produce an artifact that we can publish right now.
 
+      - ${{ if eq(parameters.shouldCleanPostExectuion, true) }}:
+        - task: PostBuildCleanup@4

azure-pipelines/build-pipeline.yml

@@ -16,6 +16,10 @@ parameters:
   displayName: 'Get verbose output from steps - where configurable'
   type: boolean
   default: false
+- name: shouldCleanPostExectuion
+  displayName: 'Clean all pipeline dirs after the pipeline finishes?'
+  type: boolean
+  default: true
 
 name: $(BuildDefinitionName)_$(Year:yyyy).$(Month).$(DayOfMonth)$(Rev:.r)
 
@@ -102,3 +106,6 @@ stages:
           language: en
           isVerbose: ${{ parameters.isVerbose }}
           workingDir: '$(Build.SourcesDirectory)'
+
+      - ${{ if eq(parameters.shouldCleanPostExectuion, true) }}:
+        - task: PostBuildCleanup@4

doc/en/components/bullet-graph.md

@@ -257,6 +257,80 @@ Performance value is the primary measure displayed by the component and it is vi
 
 `sample="/gauges/bullet-graph/measures", height="125", alt="{Platform} bullet graph measures"`
 
+## Highlight Value
+
+The bullet graph's performance value can be further modified to show progress represented as a highlighted value. This will make the `Value` appear with a lower opacity. A good example is if `Value` is 50 and  `HighlightValue` is set to 25. This would represent a performance of 50% regardless of what the value of `TargetValue` is set to. To enable this first set `HighlightValueDisplayMode` to Overlay and then apply a `HighlightValue` to something lower than `Value`.
+
+```html
+<igx-bullet-graph
+    #bulletGraph
+    height="80px" 
+    width="400px"
+    value=70 
+    targetValue=90
+    minimumValue=0 
+    maximumValue=100 
+    interval=10
+    labelInterval=10
+    labelExtent=0.025
+    labelsPreTerminal=0
+    labelsPostInitial=0
+    highlightValueDisplayMode="Overlay"
+    highlightValue=25>
+  </igx-bullet-graph>
+```
+
+```tsx
+<IgrBulletGraph
+    height="80px"
+    width="100%"
+    value={70} 
+    targetValue={90}
+    interval={10}
+    minimumValue={0} 
+    maximumValue={100} 
+    labelInterval={10}
+    labelExtent={0.025}
+    labelsPreTerminal={0}
+    labelsPostInitial={0}
+    highlightValueDisplayMode="Overlay"
+    highlightValue={25} />
+```
+
+```html
+<igc-bullet-graph
+    id="gauge"
+    height="80px"
+    width="100%"
+    minimum-value="0" 
+    maximum-value="100"
+    value="70" 
+    interval="10"
+    target-value="90"
+    label-interval="10"
+    label-extent="0.025"
+    labels-pre-terminal="0"
+    labels-post-initial="0"
+    highlight-value-display-mode="Overlay"
+    highlight-value="25" >
+</igc-bullet-graph>
+```
+
+```razor
+<IgbBulletGraph Height="80px" Width="100%"
+    MinimumValue="0" 
+    Value="70"
+    TargetValue="90"
+    Interval="10"
+    MaximumValue="100" 
+    LabelInterval="10"
+    LabelExtent="0.025"
+    HighlightValueDisplayMode="HighlightedValueDisplayMode.Overlay"
+    HighlightValue=25>
+</IgbBulletGraph>
+```
+
+`sample="/gauges/bullet-graph/highlight-needle", height="125", alt="{Platform} bullet graph highlight needle"`
 
 ## Comparative Ranges
 The ranges are visual elements that highlight a specified range of values on a scale. Their purpose is to visually communicate the qualitative state of the performance bar measure, illustrating at the same time the degree to which it resides within that state.

doc/en/components/charts/chart-overview.md

@@ -51,7 +51,7 @@ We make {Platform} Category and Financial Chart easier to use, the good news you
 
 The {Platform} Bar Chart, or Bar Graph is among the most common category chart types used to quickly compare frequency, count, total, or average of data in different categories with data encoded by horizontal bars of equal width and differing lengths. They are ideal for showing variations in the value of an item over time, data distribution, sorted data ranking (high to low, worst to best). Data is represented using a collection of rectangles that extend from the left to right of the chart towards the values of data points. Learn more about our [bar chart](types/bar-chart.md)
 
-`sample="/charts/data-chart/bar-chart-multiple-sources", height="600", alt="{Platform} Bar Chart Multiple Sources"`
+`sample="/charts/data-chart/bar-chart-multiple-sources", img-src="https://static.infragistics.com/marketing/Website/products/Ignite-UI-for-Angular/ignite-ui-angular-bar-chart", height="600", alt="{Platform} Bar Chart Multiple Sources"`
 
 
 

doc/en/components/charts/features/chart-data-filtering.md

@@ -0,0 +1,53 @@
+---
+title: {Platform} Chart Data Filtering | Data Visualization | Infragistics
+_description: Infragistics' {Platform} Chart Data Filtering
+_keywords: {Platform} Charts, Filtering, Infragistics
+mentionedTypes: ["CategoryChart"]
+namespace: Infragistics.Controls.Charts
+---
+
+# {Platform} Chart Data Filtering
+
+Data Filtering allows you to query large data in order to analyze and plot small subset of data entries via filter expressions, all without having to manually modify the datasource bound to the chart.
+
+A complete list of valid expressions and keywords to form a query string can be found here:
+
+[Filter expressions](https://learn.microsoft.com/en-us/dynamics365/business-central/dev-itpro/webservices/use-filter-expressions-in-odata-uris)
+
+> NOTE: Any incorrect filter applied will result with an empty chart.
+
+## {Platform} Chart Data Filter Example
+
+The following example depicts a [Column Chart](../types/column-chart.md) of annual birth rates across several decades. The drop-down allows you to select a decade, which inserts an expression via the `InitialFilter` property, to update the chart visual and thus filtering out the other decades out.
+
+`sample="/charts/category-chart/data-filter", height="500", alt="{Platform} Data Filter Example"`
+
+<div class="divider--half"></div>
+
+The `InitialFilter` property is a string that requires the following syntax in order to filter properly. The value requires sets of parenthesesthat include both the filter expression definition, column and value associated with the record(s) filtering in. 
+
+eg. To show all countries that start with the letter B:
+
+"(startswith(Country, 'B'))"
+
+eg. Concatenating more than one expression:
+
+"(startswith(Country, 'B') and endswith(Country, 'L') and contains(Product, 'Royal Oak') and contains(Date, '3/1/20'))"
+
+
+## Additional Resources
+
+You can find more information about related chart features in these topics:
+
+- [Chart Annotations](chart-annotations.md)
+- [Chart Highlighting](chart-highlighting.md)
+- [Chart Tooltips](chart-tooltips.md)
+
+## API References
+
+The following is a list of API members mentioned in the above sections:
+
+- `CategoryChart`
+- `IsTransitionInEnabled`
+- `TransitionInDuration`
+- `TransitionInMode`

doc/en/components/charts/types/treemap-chart.md

@@ -2,7 +2,7 @@
 title: {Platform} Treemap | Data Visualization Tools | Orientation | Layout | Data Binding | Infragistics
 _description: Use Infragistics' {Platform} Treemap control show relative weighting of data points at more than one level supporting strip, squarified, and slice-and-dice algorithms. Learn about {ProductName} treemap!
 _keywords: {Platform} Tree Map, Treemap, layout, orientation, {ProductName}, Infragistics
-mentionedTypes: ["Treemap", "TreemapOrientation", "TreemapLayoutType"]
+mentionedTypes: ["Treemap", "TreemapOrientation", "TreemapLayoutType", "TreemapHighlightingMode", "TreemapHighlightedValueDisplayMode"]
 namespace: Infragistics.Controls.Charts
 ---
 # {Platform} Treemap
@@ -94,7 +94,23 @@ In the following example, the treemap demonstrates the ability of changing the l
 
 `sample="/charts/tree-map/styling", height="600", alt="{Platform} Treemap Styling"`
 
+### {Platform} Treemap Highlighting
 
+In the following example, the treemap demonstrates the ability of node highlighting. There are two options for this feature. Each node can individually brighten, by decreasing its opacity, or cause all other nodes to trigger the same effect. To enable this feature, set `HighlightingMode`to Brighten or FadeOthers.
+
+`sample="/charts/tree-map/highlighting", height="600", alt="{Platform} Treemap Highlighting"`
+
+## {Platform} Treemap Percent based highlighting 
+
+- `HighlightedItemsSource`: Specifies the datasource to read highlighted values from. If null, then highlighted values are read from the ItemsSource property.
+- `HighlightedValueMemberPath`: Specifies the name of the property in the datasource where the highlighted values are read.
+- `HighlightedValueOpacity`: Controls the opacity of the normal value behind the highlighted value.
+- `HighlightedValuesDisplayMode`: Enables or disables highlighted values.
+    - Auto: The treemap decides what mode to use.
+    - Overlay: The treemap displays highlighted values over top the normal value with a slight opacity applied to the normal value.
+    - Hidden: The treemap does not show highlighted values.
+
+`sample="/charts/tree-map/highlighting-percent-based", height="600", alt="{Platform} Treemap Percent based Highlighting"`
 
 <div class="divider--half"></div>
 
@@ -111,4 +127,6 @@ The following is a list of API members mentioned in the above sections:
 
 - `Treemap`
 - `LayoutOrientation`
+- `HighlightedValuesDisplayMode`
+- `HighlightedValueMemberPath`
 - `LayoutType`

doc/en/components/general-changelog-dv-blazor.md

@@ -2,14 +2,33 @@
 title: {Platform} What's New | {ProductName} | Infragistics
 _description: Learn about new features in the {ProductName}.
 _keywords: Changelog, What's New,  {ProductName}, Infragistics
-mentionedTypes: ["SeriesViewer", "XYChart", "DomainChart", "XamDataChart", "Toolbar", "XamGeographicMap", "DatePicker", "MultiColumnComboBox", "CategoryChart", "CrosshairLayer", "FinalValueLayer", "CalloutLayer", "DataLegend", "Infragistics.Controls.Grid", "Infragistics.Controls.GridSelectionMode", "Infragistics.Controls.DataGridCellEventArgs", "Infragistics.Controls.GridBaseDirective", "MaskInput", "Shape", "RoundShape", "XamRadialGauge"]
+mentionedTypes: ["SeriesViewer", "XYChart", "DomainChart", "XamDataChart", "Toolbar", "XamGeographicMap", "DatePicker", "MultiColumnComboBox", "CategoryChart", "CrosshairLayer", "FinalValueLayer", "CalloutLayer", "DataLegend", "Infragistics.Controls.Grid", "Infragistics.Controls.GridSelectionMode", "Infragistics.Controls.DataGridCellEventArgs", "Infragistics.Controls.GridBaseDirective", "MaskInput", "Shape", "RoundShape", "XamRadialGauge, XamLinearGauge, XamBulletGraph, XamTreemap", "XamRadialChart"]
 sharedComponents: ["Grid", "TreeGrid", "HierarchicalGrid"]
 namespace: Infragistics.Controls.Charts
 ---
 # {ProductName} Changelog
 
 All notable changes for each version of {ProductName} are documented on this page.
 
+## **{PackageVerChanges-23-2-APR2}**
+
+### {PackageCharts} (Charts)
+
+Data Filtering via the `InitialFilter` property. Apply filter expressions to filter the chart data to a subset of records. Can be used for drill down large data.
+
+- `XamBulletGraph`
+    - The Performance bar will now reflect a difference between the value and new `HighlightValue` when the `HighlightValueDisplayMode` is applied to the 'Overlay' setting. The highlight value will show a filtered/subset measured percentage as a filled in color while the remaining bar's appearance will appear faded to the assigned value, illustrating the performance in real-time.
+- `XamLinearGauge`
+    - New highlight needle was added. `HighlightValue` and `HighlightValueDisplayMode` when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear. 
+- `XamRadialGauge`
+    - New highlight needle was added. `HighlightValue` and `HighlightValueDisplayMode` when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear. 
+- `XamTreemap`
+    - Now exposes a `HighlightingMode` property that allows you to configure the mouse-over highlighting of the items in the tree map. This property takes two options: `Brighten` where the highlight will apply to the item that you hover the mouse over only, and `FadeOthers` where the highlight of the hovered item will remain the same, but everything else will fade out. This highlight is animated, and can be controlled using the `HighlightingTransitionDuration` property.
+
+## **{PackageVerChanges-23-2-APR}**
+
+- `Bug Fixes` 
+
 ## **{PackageVerChanges-23-2-MAR}**
 
 ### New Components
@@ -31,7 +50,12 @@ All notable changes for each version of {ProductName} are documented on this pag
 - `Select`, `Dropdown` 
     - exposed `selectedItem`, `items` and `groups` getters
 - `XamRadialGauge`
+    - New title/subtitle properties. `TitleText`, `SubtitleText` will appear near the bottom the gauge. In addition, the various title/subtitle font properties were added such as `TitleFontSize`, `TitleFontFamily`, `TitleFontStyle`, `TitleFontWeight` and `TitleExtent`. Finally, the new `TitleDisplaysValue` will allow the value to correspond with the needle's position.  
     - New `OpticalScalingEnabled` and `OpticalScalingSize` properties for the `XamRadialGauge`. This new feature will manage the size at which labels, titles, and subtitles of the gauge have 100% optical scaling. You can read more about this new feature [here](radial-gauge.md#optical-scaling)
+    - New highlight needle was added. `HighlightValue` and `HighlightValueDisplayMode` when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear.  
+- `XamRadialChart` 
+    - New Label Mode
+        The `CategoryAngleAxis` for the now exposes a `LabelMode` property that allows you to further configure the location of the labels. This allows you to toggle between the default mode by selecting the `Center` enum, or use the new mode, `ClosestPoint`, which will bring the labels closer to the circular plot area.
 
 ### General
 

doc/en/components/general-changelog-dv-react.md

@@ -2,7 +2,7 @@
 title: {Platform} What's New | {ProductName} | Infragistics
 _description: Learn about new features in the {ProductName}.
 _keywords: Changelog, What's New,  {ProductName}, Infragistics
-mentionedTypes: ["SeriesViewer", "XYChart", "DomainChart", "XamDataChart", "Toolbar", "XamGeographicMap", "DatePicker", "MultiColumnComboBox", "CategoryChart", "CrosshairLayer", "FinalValueLayer", "CalloutLayer", "DataLegend", "Grid", "GridSelectionMode", DataGridCellEventArgs, DataGridSelectionMode, DataSourceSummaryOperand, "XamRadialGauge"]
+mentionedTypes: ["SeriesViewer", "XYChart", "DomainChart", "XamDataChart", "Toolbar", "XamGeographicMap", "DatePicker", "MultiColumnComboBox", "CategoryChart", "CrosshairLayer", "FinalValueLayer", "CalloutLayer", "DataLegend", "Grid", "GridSelectionMode", DataGridCellEventArgs, DataGridSelectionMode, DataSourceSummaryOperand, "XamRadialGauge", "XamRadialChart"]
 namespace: Infragistics.Controls.Charts
 ---
 # {ProductName} Changelog
@@ -11,14 +11,29 @@ All notable changes for each version of {ProductName} are documented on this pag
 
 ## **{PackageVerChanges-23-2-MAR}**
 
+### {PackageCharts}
+
+ - New Data Filtering via the `InitialFilter` property. Apply filter expressions to filter the chart data to a subset of records. Can be used for drill down large data.
+
+- `XamRadialChart` 
+    - New Label Mode
+        The `CategoryAngleAxis` for the now exposes a `LabelMode` property that allows you to further configure the location of the labels. This allows you to toggle between the default mode by selecting the `Center` enum, or use the new mode, `ClosestPoint`, which will bring the labels closer to the circular plot area.
+
 ### {PackageGrids}
 
 - New [`HierarchicalGrid`](grids/hierarchical-grid/overview.md) component
 
 ### {PackageGauges}
 
-- New `OpticalScalingEnabled` and `OpticalScalingSize` properties for the `XamRadialGauge`. This new feature will manage the size at which labels, titles, and subtitles of the gauge have 100% optical scaling. You can read more about this new feature [here](radial-gauge.md#optical-scaling)
-
+- `XamRadialGauge`
+    - New title/subtitle properties. `TitleText`, `SubtitleText` will appear near the bottom the gauge. In addition, the various title/subtitle font properties were added such as `TitleFontSize`, `TitleFontFamily`, `TitleFontStyle`, `TitleFontWeight` and `TitleExtent`. Finally, the new `TitleDisplaysValue` will allow the value to correspond with the needle's position.  
+    - New `OpticalScalingEnabled` and `OpticalScalingSize` properties for the `XamRadialGauge`. This new feature will manage the size at which labels, titles, and subtitles of the gauge have 100% optical scaling. You can read more about this new feature [here](radial-gauge.md#optical-scaling)
+    - New highlight needle was added. `HighlightValue` and `HighlightValueDisplayMode` when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear.  
+- `XamLinearGauge`
+    - New highlight needle was added. `HighlightValue` and `HighlightValueDisplayMode` when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear. 
+- `XamBulletGraph`
+    - The Performance bar will now reflect a difference between the value and new `HighlightValue` when the `HighlightValueDisplayMode` is applied to the 'Overlay' setting. The highlight value will show a filtered/subset completed measured percentage as a filled in color while the remaining bar's appearance will appear faded to the assigned value, illustrating the performance in real-time.
+
 ### {PackageCommon}
 
 - New `Textarea` component