From aaafb66d0346e06b0f808414822a27cda9211a37 Mon Sep 17 00:00:00 2001 From: igdmdimitrov Date: Fri, 27 Sep 2024 14:22:02 +0300 Subject: [PATCH 1/7] docs(query-builder): update topic with nested queries and templating --- en/components/query-builder.md | 94 +++++++++++++++++++++++++--------- en/components/toc.yml | 1 + 2 files changed, 71 insertions(+), 24 deletions(-) diff --git a/en/components/query-builder.md b/en/components/query-builder.md index cc2d506688..29192b7837 100644 --- a/en/components/query-builder.md +++ b/en/components/query-builder.md @@ -64,7 +64,7 @@ import { IGX_QUERY_BUILDER_DIRECTIVES, FilteringExpressionsTree, FieldType } fro selector: 'app-home', template: ` @@ -76,7 +76,7 @@ import { IGX_QUERY_BUILDER_DIRECTIVES, FilteringExpressionsTree, FieldType } fro }) export class HomeComponent { public expressionTree: FilteringExpressionsTree; - public fields: FieldType []; + public entities: Array; public onExpressionTreeChange() { ... @@ -88,41 +88,53 @@ Now that you have the Ignite UI for Angular Query Builder module or directives i ## Using the Angular Query Builder -If no expression tree is initially set, you start with creating a group of conditions linked with [`AND`]({environment:angularApiUrl}/enums/filteringlogic.html#and) or [`OR`]({environment:angularApiUrl}/enums/filteringlogic.html#or). After that, conditions or sub-groups can be added. +If no expression tree is initially set, you start with creating a group of conditions linked with [`AND`]({environment:angularApiUrl}/enums/filteringlogic.html#and) or [`OR`]({environment:angularApiUrl}/enums/filteringlogic.html#or). Then you choose entity and which fields the query should return. After that, conditions or sub-groups can be added. -In order to add a condition, a field, an operand based on the field dataType and a value if the operand is not unary. Once the condition is committed, a chip with the condition information appears. By hovering or clicking the chip, you have the options to modify it or add another condition or group right after it. +In order to add a condition you select a field, an operand based on the field data type and a value if the operand is not unary. The operands `In` and `Not In` will allow you to create inner query with conditions from different entity instead of providing a value. Once the condition is committed, a chip with the condition information appears. By clicking the chip, you have the options to modify it or add another condition or group right after it. If you select more than one condition chip, a context menu appears with options to create a group or delete the queries. If you choose to create a group with the selected conditions, the newly created group will appear where the topmost selected condition was placed. In order to select a group, you can also click on its vertical line, which is colored based on the linking condition ([`AND`]({environment:angularApiUrl}/enums/filteringlogic.html#and) or [`OR`]({environment:angularApiUrl}/enums/filteringlogic.html#or)). If a single group is selected, you get a context menu with options to change its logic, ungroup or delete it. -You can start using the component by setting the [`fields`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html#fields) property to an array describing the field name and its data type. It will automatically assign the corresponding operands based on the data type. +Since every condition is related to a specific field from a particular entity changing the entity will lead to resetting all present conditions and groups. When selecting a new entity a confirmation dialog will be shown unless the [`showEntityChangeDialog`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html#showEntityChangeDialog) input property is set to false. + +You can start using the component by setting the [`entities`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html#entities) property to an array describing the entity name and an array of its fields, where each field is defined by its name and data type. Once a field is selected it will automatically assign the corresponding operands based on the data type. The Query Builder has the [`expressionTree`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html#expressionTree) input property. You could use it to set an initial state of the control and access the user-specified filtering logic. ```typescript ngAfterViewInit(): void { - const tree = new FilteringExpressionsTree(FilteringLogic.And); + const innerTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Companies', ['ID']); + innerTree.filteringOperands.push({ + fieldName: 'Employees', + condition: IgxNumberFilteringOperand.instance().condition('greaterThan'), + conditionName: 'greaterThan', + searchVal: 100 + }); + innerTree.filteringOperands.push({ + fieldName: 'Contact', + condition: IgxBooleanFilteringOperand.instance().condition('true'), + conditionName: 'true' + }); + + const tree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Orders', ['*']); tree.filteringOperands.push({ - fieldName: 'ID', - condition: IgxStringFilteringOperand.instance().condition('contains'), - searchVal: 'a', - ignoreCase: true + fieldName: 'CompanyID', + condition: IgxStringFilteringOperand.instance().condition('in'), + conditionName: 'in', + searchTree: innerTree }); - const subTree = new FilteringExpressionsTree(FilteringLogic.Or); - subTree.filteringOperands.push({ - fieldName: 'ContactTitle', - condition: IgxStringFilteringOperand.instance().condition('doesNotContain'), - searchVal: 'b', - ignoreCase: true + tree.filteringOperands.push({ + fieldName: 'OrderDate', + condition: IgxDateFilteringOperand.instance().condition('before'), + conditionName: 'before', + searchVal: new Date('2024-01-01T00:00:00.000Z') }); - subTree.filteringOperands.push({ - fieldName: 'CompanyName', - condition: IgxStringFilteringOperand.instance().condition('startsWith'), - searchVal: 'c', - ignoreCase: true + tree.filteringOperands.push({ + fieldName: 'ShippedDate', + condition: IgxDateFilteringOperand.instance().condition('null'), + conditionName: 'null' }); - tree.filteringOperands.push(subTree); - + this.queryBuilder.expressionTree = tree; } ``` @@ -131,12 +143,44 @@ The `expressionTree` is a two-way bindable property which means a corresponding ```html ``` +## Templating + +The Ignite UI for Angular Query Builder Component allows defining templates for header and search value using the following predefined reference names: + +### Header + +Passing content inside of the `igx-query-builder-header` allows templating the query builder header. The [`IgxQueryBuilderHeaderComponent`]({environment:angularApiUrl}/classes/igxquerybuilderheadercomponent.html) component provides a way to hide the legend by setting the [`showLegend`]({environment:angularApiUrl}/classes/igxquerybuilderheadercomponent.html#showLegend) input property is set to false. + + The code snippet below illustrates how to do this: + +```html + + + Build your query + + +``` + +### Search value + +The search value of a condition can be templated using the [`igxQueryBuilderSearchValue`]({environment:angularApiUrl}/classes/igxquerybuildersearchvaluetemplatedirective.html) directive, applied to a `` inside of the `igx-query-builder`'s body: + +```html + + + + + +``` + + + ## Styling To get started with styling the Query Builder, we need to import the `index` file, where all the theme functions and component mixins live: @@ -446,6 +490,8 @@ You can also streamline your Angular app development using [WYSIWYG App Builder
* [IgxQueryBuilderComponent API]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html) +* [IgxQueryBuilderHeaderComponent]({environment:angularApiUrl}/classes/igxquerybuilderheadercomponent.html) +* [IgxQueryBuilderSearchValueTemplateDirective]({environment:angularApiUrl}/classes/igxquerybuildersearchvaluetemplatedirective.html) * [IgxQueryBuilderComponent Styles]({environment:sassApiUrl}/index.html#function-query-builder-theme) ## Additional Resources diff --git a/en/components/toc.yml b/en/components/toc.yml index f83ea1f9be..d3812bcd15 100644 --- a/en/components/toc.yml +++ b/en/components/toc.yml @@ -970,6 +970,7 @@ - name: Query Builder href: query-builder.md new: false + updated: true - name: Radio & Radio Group href: radio-button.md new: false From 8dcb5e2559b713a3865c2ffb117b70e354fc359c Mon Sep 17 00:00:00 2001 From: igdmdimitrov Date: Fri, 27 Sep 2024 15:37:28 +0300 Subject: [PATCH 2/7] chore(*): address PR comments --- en/components/query-builder.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/en/components/query-builder.md b/en/components/query-builder.md index 29192b7837..6e16c7abb6 100644 --- a/en/components/query-builder.md +++ b/en/components/query-builder.md @@ -88,15 +88,15 @@ Now that you have the Ignite UI for Angular Query Builder module or directives i ## Using the Angular Query Builder -If no expression tree is initially set, you start with creating a group of conditions linked with [`AND`]({environment:angularApiUrl}/enums/filteringlogic.html#and) or [`OR`]({environment:angularApiUrl}/enums/filteringlogic.html#or). Then you choose entity and which fields the query should return. After that, conditions or sub-groups can be added. +If no expression tree is initially set, you start with creating a group of conditions linked with [`AND`]({environment:angularApiUrl}/enums/filteringlogic.html#and) or [`OR`]({environment:angularApiUrl}/enums/filteringlogic.html#or). Then you choose an entity and which of its fields the query should return. After that, conditions or sub-groups can be added. -In order to add a condition you select a field, an operand based on the field data type and a value if the operand is not unary. The operands `In` and `Not In` will allow you to create inner query with conditions from different entity instead of providing a value. Once the condition is committed, a chip with the condition information appears. By clicking the chip, you have the options to modify it or add another condition or group right after it. +In order to add a condition you select a field, an operand based on the field data type and a value if the operand is not unary. The operands `In` and `Not In` will allow you to create an inner query with conditions for a different entity instead of simply providing a value. Once the condition is committed, a chip with the condition information appears. By clicking the chip, you have the options to modify it or add another condition or group right after it. -If you select more than one condition chip, a context menu appears with options to create a group or delete the queries. If you choose to create a group with the selected conditions, the newly created group will appear where the topmost selected condition was placed. +If you select more than one condition chip, a context menu appears with options to group or delete the current selection. If you choose to create a group with the selected conditions, the newly created group will appear where the topmost selected condition was placed. In order to select a group, you can also click on its vertical line, which is colored based on the linking condition ([`AND`]({environment:angularApiUrl}/enums/filteringlogic.html#and) or [`OR`]({environment:angularApiUrl}/enums/filteringlogic.html#or)). If a single group is selected, you get a context menu with options to change its logic, ungroup or delete it. -Since every condition is related to a specific field from a particular entity changing the entity will lead to resetting all present conditions and groups. When selecting a new entity a confirmation dialog will be shown unless the [`showEntityChangeDialog`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html#showEntityChangeDialog) input property is set to false. +Since every condition is related to a specific field from a particular entity changing the entity will lead to resetting all preset conditions and groups. When selecting a new entity a confirmation dialog will be shown, unless the [`showEntityChangeDialog`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html#showEntityChangeDialog) input property is set to false. You can start using the component by setting the [`entities`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html#entities) property to an array describing the entity name and an array of its fields, where each field is defined by its name and data type. Once a field is selected it will automatically assign the corresponding operands based on the data type. The Query Builder has the [`expressionTree`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html#expressionTree) input property. You could use it to set an initial state of the control and access the user-specified filtering logic. @@ -151,11 +151,11 @@ The `expressionTree` is a two-way bindable property which means a corresponding ## Templating -The Ignite UI for Angular Query Builder Component allows defining templates for header and search value using the following predefined reference names: +The Ignite UI for Angular Query Builder Component allows defining templates for the component's header and the search value using the following predefined reference names: ### Header -Passing content inside of the `igx-query-builder-header` allows templating the query builder header. The [`IgxQueryBuilderHeaderComponent`]({environment:angularApiUrl}/classes/igxquerybuilderheadercomponent.html) component provides a way to hide the legend by setting the [`showLegend`]({environment:angularApiUrl}/classes/igxquerybuilderheadercomponent.html#showLegend) input property is set to false. +Passing content inside of the `igx-query-builder-header` allows templating the query builder header. The [`IgxQueryBuilderHeaderComponent`]({environment:angularApiUrl}/classes/igxquerybuilderheadercomponent.html) provides a way to hide the legend by setting the [`showLegend`]({environment:angularApiUrl}/classes/igxquerybuilderheadercomponent.html#showLegend) input property to false. The code snippet below illustrates how to do this: @@ -169,7 +169,7 @@ Passing content inside of the `igx-query-builder-header` allows templating the q ### Search value -The search value of a condition can be templated using the [`igxQueryBuilderSearchValue`]({environment:angularApiUrl}/classes/igxquerybuildersearchvaluetemplatedirective.html) directive, applied to a `` inside of the `igx-query-builder`'s body: +The search value of a condition can be templated using the [`igxQueryBuilderSearchValue`]({environment:angularApiUrl}/classes/igxquerybuildersearchvaluetemplatedirective.html) directive, applied to an `` inside of the `igx-query-builder`'s body: ```html From bb06e8843a77ee82d93daa1a010a70dc7838f3d5 Mon Sep 17 00:00:00 2001 From: igdmdimitrov <49060557+igdmdimitrov@users.noreply.github.com> Date: Tue, 1 Oct 2024 10:35:06 +0300 Subject: [PATCH 3/7] Update en/components/query-builder.md Co-authored-by: Mike Cherkasov --- en/components/query-builder.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/components/query-builder.md b/en/components/query-builder.md index 6e16c7abb6..4f6729227d 100644 --- a/en/components/query-builder.md +++ b/en/components/query-builder.md @@ -88,7 +88,7 @@ Now that you have the Ignite UI for Angular Query Builder module or directives i ## Using the Angular Query Builder -If no expression tree is initially set, you start with creating a group of conditions linked with [`AND`]({environment:angularApiUrl}/enums/filteringlogic.html#and) or [`OR`]({environment:angularApiUrl}/enums/filteringlogic.html#or). Then you choose an entity and which of its fields the query should return. After that, conditions or sub-groups can be added. +If no expression tree is initially set, you start by creating a group of conditions linked with [`AND`]({environment:angularApiUrl}/enums/filteringlogic.html#and) or [`OR`]({environment:angularApiUrl}/enums/filteringlogic.html#or). Then you choose an entity and which of its fields the query should return. After that, conditions or sub-groups can be added. In order to add a condition you select a field, an operand based on the field data type and a value if the operand is not unary. The operands `In` and `Not In` will allow you to create an inner query with conditions for a different entity instead of simply providing a value. Once the condition is committed, a chip with the condition information appears. By clicking the chip, you have the options to modify it or add another condition or group right after it. From 1c4617c4ba4c70c9dd6c61895f52b3fac2b0b738 Mon Sep 17 00:00:00 2001 From: igdmdimitrov Date: Thu, 3 Oct 2024 14:57:30 +0300 Subject: [PATCH 4/7] docs(query-builder): update template snippet and add sample --- en/components/query-builder.md | 44 ++++++++++++++++++++++++++++------ 1 file changed, 37 insertions(+), 7 deletions(-) diff --git a/en/components/query-builder.md b/en/components/query-builder.md index 4f6729227d..41429b4109 100644 --- a/en/components/query-builder.md +++ b/en/components/query-builder.md @@ -161,9 +161,8 @@ Passing content inside of the `igx-query-builder-header` allows templating the q ```html - - Build your query - + + ``` @@ -172,14 +171,45 @@ Passing content inside of the `igx-query-builder-header` allows templating the q The search value of a condition can be templated using the [`igxQueryBuilderSearchValue`]({environment:angularApiUrl}/classes/igxquerybuildersearchvaluetemplatedirective.html) directive, applied to an `` inside of the `igx-query-builder`'s body: ```html - - - + + + @if ( + selectedField?.field === 'Region' && + (selectedCondition === 'equals' || selectedCondition === 'doesNotEqual') + ){ + + + {{ reg.text }} + + + } + @else if ( + selectedField?.field === 'OrderStatus' && + (selectedCondition === 'equals' || selectedCondition === 'doesNotEqual') + ){ + + + {{stat.text}} + + + } + @else { + + } ``` - + + ## Styling From 0d608ab5b148c4c74b54cb45c3d7251dcb9c970c Mon Sep 17 00:00:00 2001 From: igdmdimitrov Date: Fri, 4 Oct 2024 15:33:35 +0300 Subject: [PATCH 5/7] docs(query-builder): add supporting text for example --- en/components/query-builder.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/en/components/query-builder.md b/en/components/query-builder.md index 41429b4109..c8de544ee9 100644 --- a/en/components/query-builder.md +++ b/en/components/query-builder.md @@ -206,6 +206,8 @@ The search value of a condition can be templated using the [`igxQueryBuilderSear ``` +We’ve created this Angular Query Builder example to show you the templating functionalities for the header and the search value of the Angular Query Builder component. + From 5fed7f4e2c3fbaf31c22d81b6298ec1095c1c29b Mon Sep 17 00:00:00 2001 From: tfsbuild Date: Wed, 9 Oct 2024 03:05:20 +0300 Subject: [PATCH 6/7] Adding changes from build igniteui-xplat-docs-make-pr_2024.10.9.2 --- en/components/charts/chart-overview.md | 2 +- en/components/charts/features/chart-performance.md | 14 +++++++------- en/components/charts/types/line-chart.md | 2 +- en/components/charts/types/stock-chart.md | 6 +++--- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/en/components/charts/chart-overview.md b/en/components/charts/chart-overview.md index 6dc01fe2ba..fdd0b6b580 100644 --- a/en/components/charts/chart-overview.md +++ b/en/components/charts/chart-overview.md @@ -44,7 +44,7 @@ Choosing these specific domain charts allows to simplify the API and draw a lot Domain charts are using a data chart at its core; so the same performance optimizations apply to both. The difference lies in whether they are trying to make things very easy to specify for the developer, or to be as flexible as possible. Angular Data Chart is more verbose, unlocking all of our charting capabilities you need, allowing you to mix and match of any number of series, axes or annotation for example. For the category and financial charts, there might be a situation that cannot be easily done that the data chart is more suited for, such as a series with a scatter series with a numeric x axis. -It can be difficult to know which chart to pick at first. It's crucial to understand the type of series and how many additional features you want to present. For a more light-weight basic category or financial series, we recommend using one of the domain charts. For more advances scenarios we recommend using Angular Data Chart, such as presenting something other than what is covered by the category chart's [`chartType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#chartType) property such as a stacked or scatter series, or numeric or time-based data. It's worth noting that the Angular Financial Chart covers only column, OHLC bar, candlestick, and line series types. +It can be difficult to know which chart to pick at first. It's crucial to understand the type of series and how many additional features you want to present. For a more light-weight basic category or financial series, we recommend using one of the domain charts. For more advances scenarios we recommend using Angular Data Chart, such as presenting something other than what is covered by the category chart's [`chartType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) property such as a stacked or scatter series, or numeric or time-based data. It's worth noting that the Angular Financial Chart covers only column, OHLC bar, candlestick, and line series types. We make Angular Category and Financial Chart easier to use, the good news you can always switch to data chart in the future. diff --git a/en/components/charts/features/chart-performance.md b/en/components/charts/features/chart-performance.md index 0f8f5aca87..be53ac4850 100644 --- a/en/components/charts/features/chart-performance.md +++ b/en/components/charts/features/chart-performance.md @@ -2,7 +2,7 @@ title: Angular Chart Performance | Data Visualization | Infragistics _description: Infragistics' Angular Chart Performance _keywords: Angular Charts, Performance, Infragistics -mentionedTypes: ["DomainChart", "CategoryChart", "FinancialChart", "XamDataChart"] +mentionedTypes: ["DomainChart", "CategoryChart", "FinancialChart", "XamDataChart", "FinancialChartVolumeType", "FinancialChartZoomSliderType"] namespace: Infragistics.Controls.Charts --- @@ -98,7 +98,7 @@ this.Chart.excludedProperties = [ "CHN", "FRN", "GER" ]; ### Chart Types -Simpler chart types such as [Line Chart](../types/line-chart.md) have faster performance than using [Spline Chart](../types/spline-chart.md) because of the complex interpolation of spline lines between data points. Therefore, you should use [`chartType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#chartType) property of Angular [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) or the [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) control to select type of chart that renders faster. Alternatively, you can change a type of series to a faster series in Angular [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control. +Simpler chart types such as [Line Chart](../types/line-chart.md) have faster performance than using [Spline Chart](../types/spline-chart.md) because of the complex interpolation of spline lines between data points. Therefore, you should use [`chartType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) property of Angular [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) or the [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) control to select type of chart that renders faster. Alternatively, you can change a type of series to a faster series in Angular [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) control. The following table lists chart types in order from the fastest performance to slower performance in each group of charts: @@ -310,16 +310,16 @@ Setting a lot of panes using [`indicatorTypes`]({environment:dvApiBaseUrl}/produ ### Zoom Slider -Setting the [`zoomSliderType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#zoomSliderType) option to `None` will improve chart performance and enable more vertical space for other indicators and the volume pane. +Setting the [`zoomSliderType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#zoomSliderType) option to [`None`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialchartvolumetype.html#None) will improve chart performance and enable more vertical space for other indicators and the volume pane. ### Volume Type Setting the [`volumeType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#volumeType) property can have the following impact on chart performance: -* `None` - is the least expensive since it does not display the volume pane. -* `Line` - is more expensive volume type to render and it is recommended when rendering a lot of data points or when plotting a lot of data sources. -* `Area` - is more expensive to render than the `Line` volume type. -* [`IgxColumnComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_grids_grids.igxcolumncomponent.html) - is more expensive to render than the `Area` volume type and it is recommended when rendering volume data of 1-3 stocks. +* [`None`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialchartvolumetype.html#None) - is the least expensive since it does not display the volume pane. +* [`Line`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialchartvolumetype.html#Line) - is more expensive volume type to render and it is recommended when rendering a lot of data points or when plotting a lot of data sources. +* [`Area`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialchartvolumetype.html#Area) - is more expensive to render than the [`Line`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialchartvolumetype.html#Line) volume type. +* [`Column`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialchartvolumetype.html#Column) - is more expensive to render than the [`Area`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialchartvolumetype.html#Area) volume type and it is recommended when rendering volume data of 1-3 stocks. ## Performance in Data Chart diff --git a/en/components/charts/types/line-chart.md b/en/components/charts/types/line-chart.md index abbb986465..eb588b8cdc 100644 --- a/en/components/charts/types/line-chart.md +++ b/en/components/charts/types/line-chart.md @@ -220,7 +220,7 @@ The following table lists API members mentioned in the above sections: | Chart Type | Control Name | API Members | | ------------------|--------------------|----------------------- | -| Line | [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) | [`chartType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) = [`Line`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.categorycharttype.html#Line) | +| Line | [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) | [`chartType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) = [`Line`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.categorycharttype.html#Line) | | Polar Line | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxPolarLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarlineseriescomponent.html) | | Radial Line | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxRadialLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradiallineseriescomponent.html) | | Stacked Line | [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) | [`IgxStackedLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedlineseriescomponent.html) | diff --git a/en/components/charts/types/stock-chart.md b/en/components/charts/types/stock-chart.md index f9144163e1..3f8e4688da 100644 --- a/en/components/charts/types/stock-chart.md +++ b/en/components/charts/types/stock-chart.md @@ -12,7 +12,7 @@ The Ignite UI for Angular Stock Chart, sometimes referred to as Angular Financia ## Angular Stock Chart Example -You can create Stock Chart using the [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) control by binding your data and optionally setting [`chartType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#chartType) property to [`Line`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialcharttype.html#Line) value, as shown in the example below. +You can create Stock Chart using the [`IgxFinancialChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) control by binding your data and optionally setting [`chartType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType) property to [`Line`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.financialcharttype.html#Line) value, as shown in the example below. Date: Tue, 15 Oct 2024 12:07:15 +0300 Subject: [PATCH 7/7] docs(*): Update JA for #5951 and #5952. --- jp/components/badge.md | 18 ++++- jp/components/query-builder.md | 130 ++++++++++++++++++++++++++------- jp/components/toc.yml | 1 + 3 files changed, 121 insertions(+), 28 deletions(-) diff --git a/jp/components/badge.md b/jp/components/badge.md index eb1459afbc..6c1ead2cfc 100644 --- a/jp/components/badge.md +++ b/jp/components/badge.md @@ -109,7 +109,7 @@ igx-badge { } ``` -### Badge の形状 +### バッジの形状 `shape` 属性の値を `square` に設定することで、バッジの形状を変更できます。デフォルトでは、バッジの形状は `rounded` です。 @@ -119,7 +119,21 @@ igx-badge { すべて適切に設定すると、ブラウザ上で以上のデモ サンプルを確認することができます。 -### バッジ アイコン +### バッジのサイズ + +バッジのサイズは `--size` 変数を使用して制御できます。これにより、バッジのサイズが両方向に比例して調整されます。ただし、テキスト値を含むバッジでは、フォント サイズと行の高さに `caption` タイポグラフィ スタイルが使用されることに注意してください。そのため、テキストを含むバッジの `--size` を 16 px 未満の値に設定する場合は、そのタイポグラフィも変更する必要があります。 + +Example: +```scss +igx-badge { + --size: 12px; + + font-size: calc(var(--size) / 2); + line-height: normal; +} +``` + +### バッジのアイコン `igx-badge` コンポーネントは、マテリアル アイコンに加えて[マテリアル アイコン拡張](../components/material-icons-extended.md)およびその他のカスタム アイコン セットの使用もサポートしています。マテリアル アイコン拡張セットからバッジ コンポーネントにアイコンを追加するには、まずそのアイコンを登録する必要があります。 diff --git a/jp/components/query-builder.md b/jp/components/query-builder.md index 75957b5f0e..be3a3c6ed9 100644 --- a/jp/components/query-builder.md +++ b/jp/components/query-builder.md @@ -8,7 +8,7 @@ _language: ja # Angular Query Builder (クエリ ビルダー) コンポーネントの概要 -Angular Query Builder は、[Angular コンポーネント](https://jp.infragistics.com/products/ignite-ui-angular)の一部であり、開発者が指定されたデータ セットに対して複雑なデータ フィルタリング クエリを作成できる機能豊富な UI を提供します。このコンポーネントを使用すると、式のツリーを構築し、エディターと各フィールドのデータ型によって決定される条件リストを使用して、それらの間に AND/OR 条件を設定できます。式ツリーは、バックエンドがサポートする形式のクエリに簡単に変換できます。 +Angular Query Builder は、[Angular コンポーネント](https://jp.infragistics.com/products/ignite-ui-angular)の一部であり、開発者が指定されたデータ セットに対して複雑なデータ フィルタリング クエリを作成できる機能豊富な UI を提供します。このコンポーネントを使用すると、式のツリーを構築し、エディターと各フィールドのデータ タイプによって決定される条件リストを使用して、それらの間に AND/OR 条件を設定できます。式ツリーは、バックエンドがサポートする形式のクエリに簡単に変換できます。

@@ -65,7 +65,7 @@ import { IGX_QUERY_BUILDER_DIRECTIVES, FilteringExpressionsTree, FieldType } fro selector: 'app-home', template: ` @@ -77,7 +77,7 @@ import { IGX_QUERY_BUILDER_DIRECTIVES, FilteringExpressionsTree, FieldType } fro }) export class HomeComponent { public expressionTree: FilteringExpressionsTree; - public fields: FieldType []; + public entities: Array; public onExpressionTreeChange() { ... @@ -89,41 +89,53 @@ Ignite UI for Angular Query Builder モジュールまたはディレクティ ## Angular Query Builder の使用 -最初に式木が設定されていない場合は、[`AND`]({environment:angularApiUrl}/enums/filteringlogic.html#and) または [`OR`]({environment:angularApiUrl}/enums/filteringlogic.html#or) で結合された条件のグループを作成することから開始します。その後、条件またはサブグループを追加できます。 +最初に式木が設定されていない場合は、[`AND`]({environment:angularApiUrl}/enums/filteringlogic.html#and) または [`OR`]({environment:angularApiUrl}/enums/filteringlogic.html#or) で結合された条件のグループを作成することから開始します。次に、エンティティと、クエリで返すフィールドを選択します。その後、条件またはサブグループを追加できます。 -条件、フィールド、dataType フィールドに基づくオペランド、およびオペランドが単項でない場合の値を追加します。条件が確定すると、条件情報を含むチップが表示されます。チップをホバーまたはクリックすると、チップを変更したり、その直後に別の条件やグループを追加したりできます。 +条件を追加するには、フィールド、フィールドのデータ タイプに基づくオペランド、およびオペランドが単項でない場合は値を選択します。`In` オペランドと `Not In` オペランドを使用すると、単に値を指定するのではなく、異なるエンティティの条件を含む内部クエリを作成できます。条件が確定すると、条件情報を含むチップが表示されます。チップをホバーまたはクリックすると、チップを変更したり、その直後に別の条件やグループを追加したりできます。 -複数の条件チップを選択すると、グループを作成したりクエリを削除したりするためのオプションを含むコンテキストメニューが表示されます。選択した条件でグループを作成することを選択した場合、一番上に選択した条件が配置された場所に新しく作成されたグループが表示されます。 +複数の条件チップを選択すると、現在の選択をグループ化または削除するオプションを含むコンテキスト メニューが表示されます。選択した条件でグループを作成することを選択した場合、一番上に選択した条件が配置された場所に新しく作成されたグループが表示されます。 グループを選択するために、リンク条件 ([`AND`]({environment:angularApiUrl}/enums/filteringlogic.html#and) または [`OR`]({environment:angularApiUrl}/enums/filteringlogic.html#or)) に基づいて色付けされた垂直線をクリックすることもできます。単一のグループが選択されている場合、ロジックを変更、グループ解除、または削除するオプションを含むコンテキスト メニューが表示されます。 -コンポーネントの使用を開始するには、[`fields`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html#fields) プロパティに、フィールド名とそのデータ型を説明する配列を追加します。データ型に基づいて対応するオペランドを自動的に割り当てます。 +すべての条件は特定のエンティティの特定のフィールドに関連しているため、エンティティを変更すると、すべての事前設定された条件とグループがリセットされます。新しいエンティティを選択すると、[`showEntityChangeDialog`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html#showEntityChangeDialog) 入力プロパティが false に設定されていない限り、確認ダイアログが表示されます。 + +[`entities`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html#entities) プロパティを、エンティティ名とそのフィールドの配列を記述する配列に設定することで、コンポーネントの使用を開始できます。各フィールドは、名前とデータ タイプによって定義されます。フィールドが選択されると、データ タイプに基づいて対応するオペランドが自動的に割り当てられます。 クエリ ビルダーには [`expressionTree`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html#expressionTree) 入力プロパティがあります。コントロールの初期状態を設定するために使用できます。 ```typescript ngAfterViewInit(): void { - const tree = new FilteringExpressionsTree(FilteringLogic.And); + const innerTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Companies', ['ID']); + innerTree.filteringOperands.push({ + fieldName: 'Employees', + condition: IgxNumberFilteringOperand.instance().condition('greaterThan'), + conditionName: 'greaterThan', + searchVal: 100 + }); + innerTree.filteringOperands.push({ + fieldName: 'Contact', + condition: IgxBooleanFilteringOperand.instance().condition('true'), + conditionName: 'true' + }); + + const tree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Orders', ['*']); tree.filteringOperands.push({ - fieldName: 'ID', - condition: IgxStringFilteringOperand.instance().condition('contains'), - searchVal: 'a', - ignoreCase: true + fieldName: 'CompanyID', + condition: IgxStringFilteringOperand.instance().condition('in'), + conditionName: 'in', + searchTree: innerTree }); - const subTree = new FilteringExpressionsTree(FilteringLogic.Or); - subTree.filteringOperands.push({ - fieldName: 'ContactTitle', - condition: IgxStringFilteringOperand.instance().condition('doesNotContain'), - searchVal: 'b', - ignoreCase: true + tree.filteringOperands.push({ + fieldName: 'OrderDate', + condition: IgxDateFilteringOperand.instance().condition('before'), + conditionName: 'before', + searchVal: new Date('2024-01-01T00:00:00.000Z') }); - subTree.filteringOperands.push({ - fieldName: 'CompanyName', - condition: IgxStringFilteringOperand.instance().condition('startsWith'), - searchVal: 'c', - ignoreCase: true + tree.filteringOperands.push({ + fieldName: 'ShippedDate', + condition: IgxDateFilteringOperand.instance().condition('null'), + conditionName: 'null' }); - tree.filteringOperands.push(subTree); - + this.queryBuilder.expressionTree = tree; } ``` @@ -132,12 +144,76 @@ ngAfterViewInit(): void { ```html ``` +## テンプレート化 + +Ignite UI for Angular Query Builder コンポーネントでは、次の定義済み参照名を使用して、コンポーネントのヘッダーと検索値のテンプレートを定義できます。 + +### ヘッダー + +`igx-query-builder-header` 内にコンテンツを渡すと、クエリ ビルダー ヘッダーをテンプレート化できます。[`IgxQueryBuilderHeaderComponent`]({environment:angularApiUrl}/classes/igxquerybuilderheadercomponent.html) は、[`showLegend`]({environment:angularApiUrl}/classes/igxquerybuilderheadercomponent.html#showLegend) 入力プロパティを false に設定することで凡例を非表示にする方法を提供します。 + +以下のコードはこれを実行する方法を示します。 + +```html + + + + +``` + +### 検索値 + +条件の検索値は、[`igxQueryBuilderSearchValue`]({environment:angularApiUrl}/classes/igxquerybuildersearchvaluetemplatedirective.html) ディレクティブを使用してテンプレート化でき、`igx-query-builder` 本体内の `` に適用されます。 + +```html + + + @if ( + selectedField?.field === 'Region' && + (selectedCondition === 'equals' || selectedCondition === 'doesNotEqual') + ){ + + + {{ reg.text }} + + + } + @else if ( + selectedField?.field === 'OrderStatus' && + (selectedCondition === 'equals' || selectedCondition === 'doesNotEqual') + ){ + + + {{stat.text}} + + + } + @else { + + } + + +``` + +この Angular Query Builder の例は、Angular Query Builder コンポーネントのヘッダーと検索値のテンプレート機能を紹介するために作成しました。 + + + + ## スタイル設定 クエリ ビルダーのスタイル設定は、すべてのテーマ関数とコンポーネント ミックスインが存在する `index` ファイルをインポートする必要があります。 @@ -447,6 +523,8 @@ $custom-drop-down: drop-down-theme(

* [IgxQueryBuilderComponent API]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html) +* [IgxQueryBuilderHeaderComponent]({environment:angularApiUrl}/classes/igxquerybuilderheadercomponent.html) +* [IgxQueryBuilderSearchValueTemplateDirective]({environment:angularApiUrl}/classes/igxquerybuildersearchvaluetemplatedirective.html) * [IgxQueryBuilderComponent スタイル]({environment:sassApiUrl}/index.html#function-query-builder-theme) ## その他のリソース diff --git a/jp/components/toc.yml b/jp/components/toc.yml index 21d0a60ee1..087b30ea76 100644 --- a/jp/components/toc.yml +++ b/jp/components/toc.yml @@ -973,6 +973,7 @@ - name: Query Builder href: query-builder.md new: false + updated: true - name: Radio & Radio Group href: radio-button.md new: false