Merge branch 'vnext' into th-progressbars-react-topic

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/features/chart-data-filtering

@@ -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

@@ -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>
 

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

@@ -12,6 +12,10 @@ All notable changes for each version of {ProductName} are documented on this pag
 
 ## **{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`

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

@@ -13,6 +13,8 @@ All notable changes for each version of {ProductName} are documented on this pag
 
 ### {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.

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

@@ -13,6 +13,8 @@ All notable changes for each version of {ProductName} are documented on this pag
 
 ### {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.

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

@@ -19,6 +19,8 @@ All notable changes for each version of {ProductName} are documented on this pag
 
 ### {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.

doc/en/components/grids/_shared/column-types.md

@@ -11,14 +11,14 @@ namespace: Infragistics.Controls
 
 The {Platform} {ComponentTitle} provides a default handling of *number*, *string*, *date*, *boolean*, *currency* and *percent* column data types, based on which the appearance of the default and editing templates will be present.
 
-<!-- ComponentStart: Grid -->
+<!-- ComponentStart: Grid, TreeGrid -->
 
 ## {Platform} {ComponentTitle} Column Types Example
 
 `sample="/{ComponentSample}/column-data-types", height="550", alt="{Platform} {ComponentTitle} column data types"`
 
 
-<!-- ComponentEnd: Grid -->
+<!-- ComponentEnd: Grid, TreeGrid -->
 
 ## {Platform} {ComponentTitle} Default Template
 
@@ -624,4 +624,3 @@ public init(column: IgxColumnComponent) {
 * For custom templates you can see [cell editing topic](cell-editing.md#cell-editing-templates)
 * [Editing](editing.md)
 * [Summaries](summaries.md)
-

doc/en/components/grids/data-grid.md

@@ -70,7 +70,7 @@ In this {ProductName} Grid example, you can see how users can do both basic and
 
 ### Dependencies
 
-To get started with the {Platform} Data Grid, first you need to install the {ProductName} package.
+To get started with the {Platform} Data Grid, first you need to install the <!-- Blazor -->{PackageCommon} package.<!-- end: Blazor --><!-- WebComponents -->`{PackageGrids}` package.<!-- end: WebComponents --><!-- React -->`{PackageCommon}` and `{PackageGrids}` packages.<!-- end: React -->
 
 <!-- Blazor -->
 
@@ -92,15 +92,20 @@ Afterwards, you may start implementing the control by adding the following names
 ```
 <!-- end: Blazor -->
 
-<!-- Angular, React, WebComponents -->
-When installing the {Platform} grid package, the core, inputs and layout packages must also be installed.
+<!-- Angular, WebComponents -->
+```cmd
+npm install --save {PackageGrids}
+```
+<!-- end: Angular, WebComponents -->
 
+<!-- React -->
 ```cmd
-npm install --save {PackageCore}
+npm install --save {PackageCommon}
 npm install --save {PackageGrids}
-npm install --save {PackageInputs}
-npm install --save {PackageLayouts}
 ```
+<!-- end: React -->
+
+<!-- Angular, React, WebComponents -->
 
 You also need to include the following import to use the grid:
 

doc/en/components/grids/hierarchical-grid/overview.md

@@ -20,7 +20,7 @@ In this {Platform} grid example you can see how users can visualize hierarchical
 
 ### Dependencies
 
-To get started with the {Platform} hierarchical grid, first you need to install the {ProductName} package.
+To get started with the {Platform} hierarchical grid, first you need to install the <!-- Blazor -->{PackageCommon} package.<!-- end: Blazor --><!-- WebComponents -->`{PackageGrids}` package.<!-- end: WebComponents --><!-- React -->`{PackageCommon}` and `{PackageGrids}` packages.<!-- end: React -->
 
 <!-- Blazor -->
 
@@ -43,16 +43,20 @@ Afterwards, you may start implementing the control by adding the following names
 
 <!-- end: Blazor -->
 
-<!-- Angular, React, WebComponents -->
-
-When installing the {Platform} hierarchical grid package, the core package must also be installed.
+<!-- Angular, WebComponents -->
+```cmd
+npm install --save {PackageGrids}
+```
+<!-- end: Angular, WebComponents -->
 
+<!-- React -->
 ```cmd
-npm install --save {PackageCore}
+npm install --save {PackageCommon}
 npm install --save {PackageGrids}
-npm install --save {PackageInputs}
-npm install --save {PackageLayouts}
 ```
+<!-- end: React -->
+
+<!-- Angular, React, WebComponents -->
 
 You also need to include the following import to use the grid:
 

doc/en/components/grids/tree-grid/overview.md

@@ -23,7 +23,7 @@ In this example, you can see how users can manipulate hierarchical or flat data.
 
 ### Dependencies
 
-To get started with the {Platform} tree grid, first you need to install the {ProductName} package.
+To get started with the {Platform} tree grid, first you need to install the <!-- Blazor -->{PackageCommon} package.<!-- end: Blazor --><!-- WebComponents -->`{PackageGrids}` package.<!-- end: WebComponents --><!-- React -->`{PackageCommon}` and `{PackageGrids}` packages.<!-- end: React -->
 
 <!-- Blazor -->
 
@@ -48,13 +48,18 @@ Afterwards, you may start implementing the control by adding the following names
 
 <!-- Angular, React, WebComponents -->
 
-When installing the {Platform} tree grid package, the core package must also be installed.
+<!-- Angular, WebComponents -->
+```cmd
+npm install --save {PackageGrids}
+```
+<!-- end: Angular, WebComponents -->
 
+<!-- React -->
 ```cmd
-npm install --save {PackageCore}
+npm install --save {PackageCommon}
 npm install --save {PackageGrids}
-npm install --save {PackageInputs}
 ```
+<!-- end: React -->
 
 <!-- WebComponents -->