diff --git a/apiMap/Blazor/webInputs.JS.blazor.apiMap.json b/apiMap/Blazor/webInputs.JS.blazor.apiMap.json index 407989d3f..f66a93b6b 100644 --- a/apiMap/Blazor/webInputs.JS.blazor.apiMap.json +++ b/apiMap/Blazor/webInputs.JS.blazor.apiMap.json @@ -79,6 +79,19 @@ "members":[ {"names":[{"platform": "Blazor", "mappedType": "IgbActiveStepChangingArgsDetail","mappedName": "Detail"}], "originalName": "Detail"} ] }, + { + "originalName": "Banner", + "originalNamespace": "Infragistics.Controls", + "originalBaseTypeNamespace": "Infragistics.Controls", + "originalBaseTypeName": "BaseElement", + "packageName": "igniteui-webinputs", + "names":[{"platform": "Blazor","fileName": "Banner.cs","mappedName": "IgbBanner"}], + "members":[ + {"names":[{"platform": "Blazor", "mappedType": "boolean", "mappedName": "open"}], "originalName": "Open"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "show"}], "originalName": "Show"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "hide"}], "originalName": "Hide"}, + {"names":[{"platform": "Blazor", "mappedType": "method", "mappedName": "toggle"}], "originalName": "Toggle"} ] + }, { "originalName": "BaseAlertLike", "originalNamespace": "Infragistics.Controls", diff --git a/apiMap/React/webInputs.JS.r.apiMap.json b/apiMap/React/webInputs.JS.r.apiMap.json index c4a3b0c1a..460d1d845 100644 --- a/apiMap/React/webInputs.JS.r.apiMap.json +++ b/apiMap/React/webInputs.JS.r.apiMap.json @@ -3,6 +3,7 @@ "igr-accordion-module.ts", "igr-avatar-module.ts", "igr-badge-module.ts", + "igr-banner-module.ts", "igr-base-alert-like-module.ts", "igr-base-combo-box-like-module.ts", "igr-base-option-like-module.ts", @@ -157,6 +158,19 @@ "members":[ {"names":[{"platform": "React", "mappedType": "IgrActiveStepChangingArgsDetail","mappedName": "detail"}], "originalName": "Detail"} ] }, + { + "originalName": "Banner", + "originalNamespace": "Infragistics.Controls", + "originalBaseTypeNamespace": "Infragistics.Controls", + "originalBaseTypeName": "BaseElement", + "packageName": "igniteui-webinputs", + "names":[{"platform": "React","fileName": "igr-banner-component.ts","mappedName": "IgrBanner"}], + "members":[ + {"names":[{"platform": "React", "mappedType": "boolean", "mappedName": "open"}], "originalName": "Open"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "show"}], "originalName": "Show"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "hide"}], "originalName": "Hide"}, + {"names":[{"platform": "React", "mappedType": "method", "mappedName": "toggle"}], "originalName": "Toggle"} ] + }, { "originalName": "BaseAlertLike", "originalNamespace": "Infragistics.Controls", diff --git a/apiMap/WebComponents/webInputs.JS.wc.apiMap.json b/apiMap/WebComponents/webInputs.JS.wc.apiMap.json index 7aff31d31..06f8ee3c0 100644 --- a/apiMap/WebComponents/webInputs.JS.wc.apiMap.json +++ b/apiMap/WebComponents/webInputs.JS.wc.apiMap.json @@ -3,6 +3,7 @@ "igc-accordion-module.ts", "igc-avatar-module.ts", "igc-badge-module.ts", + "igc-banner-module.ts", "igc-base-alert-like-module.ts", "igc-base-combo-box-like-module.ts", "igc-base-option-like-module.ts", @@ -22,8 +23,10 @@ "igc-circular-gradient-module.ts", "igc-circular-progress-module.ts", "igc-combo-module.ts", + "igc-date-picker-module.ts", "igc-date-time-input-module.ts", "igc-dialog-module.ts", + "igc-divider-module.ts", "igc-dock-manager-module.ts", "igc-dropdown-group-module.ts", "igc-dropdown-header-module.ts", @@ -157,6 +160,19 @@ "members":[ {"names":[{"platform": "WebComponents", "mappedType": "IgcActiveStepChangingArgsDetail","mappedName": "detail"}], "originalName": "Detail"} ] }, + { + "originalName": "Banner", + "originalNamespace": "Infragistics.Controls", + "originalBaseTypeNamespace": "Infragistics.Controls", + "originalBaseTypeName": "BaseElement", + "packageName": "igniteui-webinputs", + "names":[{"platform": "WebComponents","fileName": "igc-banner-component.ts","mappedName": "IgcBannerComponent"}], + "members":[ + {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "open"}], "originalName": "Open"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "show"}], "originalName": "Show"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "hide"}], "originalName": "Hide"}, + {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "toggle"}], "originalName": "Toggle"} ] + }, { "originalName": "BaseAlertLike", "originalNamespace": "Infragistics.Controls", @@ -348,6 +364,18 @@ {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "title"}], "originalName": "Title"}, {"names":[{"platform": "WebComponents", "mappedType": "method", "mappedName": "toggle"}], "originalName": "Toggle"} ] }, +{ + "originalName": "Divider", + "originalNamespace": "Infragistics.Controls", + "originalBaseTypeNamespace": "Infragistics.Controls", + "originalBaseTypeName": "BaseElement", + "packageName": "igniteui-webinputs", + "names":[{"platform": "WebComponents","fileName": "igc-divider-component.ts","mappedName": "IgcDividerComponent"}], + "members":[ + {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "middle"}], "originalName": "Middle"}, + {"names":[{"platform": "WebComponents", "mappedType": "string", "mappedName": "type"}], "originalName": "Type"}, + {"names":[{"platform": "WebComponents", "mappedType": "boolean", "mappedName": "vertical"}], "originalName": "Vertical"} ] + }, { "originalName": "ExpansionPanel", "originalNamespace": "Infragistics.Controls", @@ -1531,6 +1559,26 @@ {"names":[{"platform": "WebComponents", "mappedType": "Date[]","mappedName": "values"}], "originalName": "Values"}, {"names":[{"platform": "WebComponents", "mappedType": "number", "mappedName": "visibleMonths"}], "originalName": "VisibleMonths"} ] }, + { + "originalName": "DatePicker", + "originalNamespace": "Infragistics.Controls", + "originalBaseTypeNamespace": "Infragistics.Controls", + "originalBaseTypeName": "BaseElement", + "packageName": "igniteui-webinputs", + "names":[{"platform": "WebComponents","fileName": "igc-date-picker-component.ts","mappedName": "IgcDatePickerComponent"}], + "members":[ + {"names":[{"platform": "WebComponents", "mappedType": "Date","mappedName": "activeDate"}], "originalName": "ActiveDate"}, + {"names":[{"platform": "WebComponents", "mappedType": "Date","mappedName": "min"}], "originalName": "Min"}, + {"names":[{"platform": "WebComponents", "mappedType": "Date","mappedName": "max"}], "originalName": "Max"}, + {"names":[{"platform": "WebComponents", "mappedType": "string","mappedName": "inputFormat"}], "originalName": "InputFormat"}, + {"names":[{"platform": "WebComponents", "mappedType": "string","mappedName": "displayFormat"}], "originalName": "DisplayFormat"}, + {"names":[{"platform": "WebComponents", "mappedType": "string","mappedName": "locale"}], "originalName": "Locale"}, + {"names":[{"platform": "WebComponents", "mappedType": "number","mappedName": "visibleMonths"}], "originalName": "VisibleMonths"}, + {"names":[{"platform": "WebComponents", "mappedType": "boolean","mappedName": "showWeekNumbers"}], "originalName": "ShowWeekNumbers"}, + {"names":[{"platform": "WebComponents", "mappedType": "DatePickerWeekStart","mappedName": "weekStart"}], "originalName": "WeekStart"}, + {"names":[{"platform": "WebComponents", "mappedType": "method","mappedName": "stepDown"}], "originalName": "StepDown"}, + {"names":[{"platform": "WebComponents", "mappedType": "method","mappedName": "stepUp"}], "originalName": "StepUp"} ] + }, { "originalName": "DateRangeDescriptor", "originalNamespace": "Infragistics.Controls", diff --git a/doc/en/components/charts/features/chart-axis-options.md b/doc/en/components/charts/features/chart-axis-options.md index cfe67753c..ecaef3f6c 100644 --- a/doc/en/components/charts/features/chart-axis-options.md +++ b/doc/en/components/charts/features/chart-axis-options.md @@ -31,7 +31,7 @@ The {Platform} Charts allows you full control over configuring, formatting, and
-## Axis Labels Management +## Axis Labels Management & Formatting The axes of the chart have the ability to perform an enhanced calculation regarding the amount of space available to the labels of the owning axis. This enhanced calculation allows the axis to optimize the amount of space given to it in order to display more labels for the given axis. @@ -41,7 +41,7 @@ The chart also has the ability to consider auto-rotation of the labels if they w After setting the `AutoMarginAndAngleUpdateMode`, you can set the `ShouldAutoExpandMarginForInitialLabels` property to true to opt into the automatic margin or set the `ShouldConsiderAutoRotationForInitialLabels` property to true for the auto-rotation. You can also further customize the automatic margin that is applied by setting the `AutoExpandMarginExtraPadding` and `AutoExpandMarginMaximumValue` to provide extra space or a maximum possible margin, respectively. -Custom label formats such as `NumberFormatSpecifier` and `DateTimeFormatSpecifier` can be added to each axis via the `XAxisLabelFormatSpecifier` and `YAxisLabelFormatSpecifier` collections. Commonly used for applying Intl.NumberFormat and Intl.DateTimeFormat language sensitive number, date and time formatting. In order for a custom format to be applied to the labels, the `YAxisLabelFormat` or `XAxisLabelFormat` need to be set to `{0}` on the `CategoryChart`. +Custom label formats such as `NumberFormatSpecifier` and `DateTimeFormatSpecifier` can be added to each axis via the `XAxisLabelFormatSpecifier` and `YAxisLabelFormatSpecifier` collections. Commonly used for applying Intl.NumberFormat and Intl.DateTimeFormat language sensitive number, date and time formatting. In order for a custom format to be applied to the labels, the `YAxisLabelFormat` or `XAxisLabelFormat` need to be set to data item's property name on the `CategoryChart`, eg. `{Date}`. For the `FinancialChart` the number is the context because it uses a numeric axis, therefore this needs to be set to `{0}`. The following example formats the yAxis with a `NumberFormatSpecifier` to reprerent $USD prices for top box office movies in the United States. diff --git a/doc/en/components/charts/features/chart-axis-types.md b/doc/en/components/charts/features/chart-axis-types.md index 0c6a24a80..5093a6722 100644 --- a/doc/en/components/charts/features/chart-axis-types.md +++ b/doc/en/components/charts/features/chart-axis-types.md @@ -116,6 +116,16 @@ The following example demonstrates usage of the `CategoryAngleAxis` type: `sample="/charts/data-chart/radial-area-chart", height="500", alt="{Platform} Category Angle Axis Example"` + ### Proportional Category Angle Axis + +The `ProportionalCategoryAngleAxis` treats its data as a sequence of category data items. The labels on this axis are placed along the edge of a circle according to their position in that sequence. This type of axis can display almost any type of data including strings and numbers. + +The `ProportionalCategoryAngleAxis` is generally used with the `NumericRadiusAxis` to plot a pie chart eg. [Radial Series](../types/radial-chart.md). + +The following example demonstrates usage of the `ProportionalCategoryAngleAxis` type: + + `sample="/charts/data-chart/radial-proportional-category-angle-axis", height="500", alt="{Platform} Proportional Category Angle Axis Example"` + ### Numeric Angle Axis The `NumericAngleAxis` treats its data as continuously varying numerical data items. The labels on this axis area placed along a radius line starting from the center of the circular plot. The location of the labels on the `NumericAngleAxis` varies according to the value in the data column mapped using the `RadiusMemberPath` property of the [Polar Series](../types/polar-chart.md) object or the `ValueMemberPath` property of the [Radial Series](../types/radial-chart.md) object. diff --git a/doc/en/components/charts/features/chart-data-selection.md b/doc/en/components/charts/features/chart-data-selection.md index 7c60d1b5f..1aed1f756 100644 --- a/doc/en/components/charts/features/chart-data-selection.md +++ b/doc/en/components/charts/features/chart-data-selection.md @@ -67,6 +67,19 @@ This example demonstrates another series type via the `XamDataChart` where each `sample="/charts/data-chart/radial-column-chart-selection", height="450", alt="{Platform} Radial Column Chart Selection Multiple Modes Example"` +## Programmatic Selection +Chart Selection can also be configured in code where selected items in the chart can be seen on startup or runtime. This can be achieved by adding items to the `SelectedSeriesCollection` of the `CategoryChart`. The `Matcher` property of the `ChartSelection` object allows for selecting a series based on a "matcher", ideal when you do not have access to the actual series from the chart. If you know the properties that your datasource contains, you can use the `ValueMemberPath` that the series would be. + +The matcher is ideal for using in charts, such as the `CategoryChart` when you do not have access to the actual series, like the `XamDataChart`. In this case you if you know the properties that your datasource contained you can surmise the ValueMemberPaths that the series would have. For example, if you datasource has numeric properties Nuclear, Coal, Oil, Solar then you know there are series created for each of these properties. If you want to highlight the series bound to Solar values, you can add a ChartSelection object to the `SelectedSeriesItems` collection using a matcher with the following properties set + +For example, if you datasource has numeric properties Nuclear, Coal, Oil, Solar then you know there are series created for each of these properties. If you want to select the series bound to Solar values, you can add a ChartSelection object to the SelectedSeriesItems collection using a matcher with the following properties set. + + + + `sample="/charts/category-chart/selection-matcher", height="500", alt="{Platform} Selection Matcher"` + + + ## API References The following is a list of API members mentioned in the above sections: diff --git a/doc/en/components/charts/types/data-pie-chart.md b/doc/en/components/charts/types/data-pie-chart.md new file mode 100644 index 000000000..d80f5b840 --- /dev/null +++ b/doc/en/components/charts/types/data-pie-chart.md @@ -0,0 +1,183 @@ +--- +title: {Platform} Pie Charts and Graphs | {ProductName} +_description: The {ProductName} data pie chart is a specialized UI control that renders a pie chart, consisting of a circular area divided into sections. Try for FREE. +_keywords: {Platform} charts, pie chart, {ProductName}, Infragistics, data binding, slice selection, animation, highlighting, legend +mentionedTypes: ["XamDataPieChart", "XamDataChart"] +namespace: Infragistics.Controls.Charts +--- +# {Platform} Data Pie Chart + +The {ProductName} Data Pie Chart is a part-to-whole chart that shows how categories (parts) of a data set add up to a total (whole) value. Categories are rendered as sections in a circular, or pie-shaped graph. Each section, or pie slice, has an arc length proportional to its underlying data value. Categories are shown in proportion to other categories based on their value percentage to the total value being analyzed, as parts of 100 or 100%. + +## {Platform} Data Pie Chart Example + +You can create the {Platform} Pie Chart in the `XamDataPieChart` by binding your data items with a string and a numeric data value. These data values will add up to a value of 100% of visualization. + +`sample="/charts/data-pie-chart/overview", height="600", alt="{Platform} Data Pie Chart Overview"` + +
+ +## {Platform} Data Pie Chart Recommendations + +Pie Charts are appropriate for small data sets and are easy to read at a glance. Pie charts are just one type of part-to-whole visualization. Others include: + +- Doughnut (Ring) +- Funnel +- Stacked Area +- Stacked 100% Area (Stacked Percentage Area) +- Stacked Bar +- Stacked 100% Bar (Stacked Percentage Bar) +- Treemap +- Waterfall + +The {Platform} Data Pie Chart includes interactive features that give the viewer tools to analyze data, like: + +- Legends +- Slice Selection +- Slice Highlighting +- Chart Animations + +Best Practices for a Pie Chart: + +- Comparing slices or segments as percentage values in proportion to a total value or whole. +- Showing how a group of categories is broken into smaller segments. +- Presenting small, non-hierarchical data sets (less than 6 to 8 segments of data). +- Ensuring data segments add up to 100%. +- Arranging the order of data from largest (highest) to smallest (least). +- Using standard presentation techniques such as starting in the 12 o'clock position and continuing clockwise. +- Ensuring the color palette is distinguishable for segments/slices of the parts. +- Considering data labels in segments vs. legends for ease of reading. +- Choosing an alternative chart to Pie such as Bar or Ring based on ease of comprehension. +- Avoiding positioning multiple pie charts next to each other for comparative analysis. + +Do Not Use Pie Chart When: + +- Comparing change over time —use a Bar, Line or Area chart. +- Requiring precise data comparison —use a Bar, Line or Area chart. +- You have more than 6 or 8 segments (high data volume) — consider a Bar, Line or Area chart if it works for your data story. +- It would be easier for the viewer to perceive the value difference in a Bar chart. + +## {Platform} Data Pie Chart Legend + +Legends are used to show information about each point, to know about its contribution towards the total sum. + +In order to display a legend next to the pie chart an ItemLegend needs to be created and assigned to the `Legend` property. The ItemLegend will display its items in vertical orientation as a default, but this can be changed by setting its `Orientation` property. + +The labels shown on the legend will display the same content as the label that is shown for each slice in the `XamDataPieChart` by default, but this can be modified by utilizing the `LegendSliceLabelContentMode` property on the chart. This exposes an enumeration that allows you to show the label, value, percentage, or any combination of those as the legend's content for each slice in the chart. + +You can also modify the ItemLegend badge. By default, it appears as a filled circle corresponding to the color of the associated chart slice. You can configure this by using the `LegendItemBadgeShape` property on the chart, and you can set this to be a circle, line, bar, column, and more. + +Below is an example that demonstrates usage of the ItemLegend with the `XamDataPieChart`. + +`sample="/charts/data-pie-chart/legend", height="600", alt="{Platform} Data Pie Chart Legend"` + +
+ +## {Platform} Pie Chart Others Category + +Sometimes, the underlying data for the pie chart will contain many items with small values. In this case, the Others category will permit automatic aggregation of several data values into a single slice. + +The Others category in the `XamDataPieChart` has three main, configurable properties - `OthersCategoryType`, `OthersCategoryThreshold`, and `OthersCategoryText` that allow you to configure how the Others slice in the chart is shown. These are each described below: + +The `OthersCategoryType` property works in tandem with the `OthersCategoryThreshold` property of the `XamDataPieChart`. For the `OthersCategoryType`, you can define whether you want the `OthersCategoryThreshold` to be evaluated as a number or a percentage. For example, if you decide on number and set the `OthersCategoryThreshold` to 5, any slices that have a value less than 5 will become part of the Others category. Using the same value of 5 with a percent type, any values that are less than 5 percent of the total values of the `XamDataPieChart` will become part of the Others category. + +By default, the Others slice will be represented by a label of "Others." You can change this by modifying the `OthersCategoryText` property of the chart. + +If you want to ensure that the Others category does not show up in the `XamDataPieChart`, you can set the `OthersCategoryThreshold` to 0. + +The following sample demonstrates usage of the Others slice in the `XamDataPieChart`: + +`sample="/charts/data-pie-chart/others", height="600", alt="{Platform} Data Pie Chart Others"` + +
+ +## {Platform} Data Pie Chart Selection + +The `XamDataPieChart` supports slice selection by mouse click on the slices plotted in the chart. This can be configured by utilizing the `SelectionBehavior` and `SelectionMode` properties of the chart, described below: + +The main two options of the `SelectionBehavior` are `PerDataItemSingleSelect` and `PerDataItemMultiSelect`, which will enable single and multiple selection, respectively. + +The `SelectionMode` property exposes an enumeration that determines how the pie chart slices respond to being selected. The following are the options of that enumeration and what they do: + +- `Brighten`: The selected slices will be highlighted. +- `FadeOthers`: The selected slices will remain their same color and others will fade. +- `FocusColorFill`: The selected slices will change their background to the FocusBrush of the chart. +- `FocusColorOutline`: The selected slices will have an outline with the color defined by the FocusBrush of the chart. +- `FocusColorThickOutline`: The selected slices will have an outline with the color defined by the FocusBrush of the chart. The thickness of this outline can be configured via the Thickness property of the control as well. +- `GrayscaleOthers`: The unselected slices will have a gray color filter applied to them. +- `None`: There is no effect on the selected slices. +- `SelectionColorFill`: The selected slices will change their background to the SelectionBrush of the chart. +- `SelectionColorOutline`: The selected slices will have an outline with the color defined by the SelectionBrush of the chart. +- `SelectionColorThickOutline`: The selected slices will have an outline with the color defined by the FocusBrush of the chart. The thickness of this outline can be configured via the Thickness property of the control as well. +- `ThickOutline`: The selected slices will apply an outline with the thickness dependent on the Thickness property of the chart. + +When a slice is selected, its underlying data item will be added to the SelectedSeriesItems collection of the chart. As such, the XamDataPieChart exposes the SelectedSeriesItemsChanged event to detect when a slice has been selected and this collection is changed. + +The following sample demonstrates the selection feature of the `XamDataPieChart` control: + +`sample="/charts/data-pie-chart/selection", height="600", alt="{Platform} Data Pie Chart Selection"` + +
+ +## {Platform} Data Pie Chart Highlighting + +The `XamDataPieChart` supports mouse over highlighting, as well as a highlighting overlay that can be configured by providing a separate data source. + +First, the `HighlightingBehavior` enumerated property determines how a slice will be highlighted. The following are the options of that property and what they do: + +- `DirectlyOver`: The slices are only highlighted when the mouse is directly over them. +- `NearestItems`: The nearest slice to the mouse position will be highlighted. +- `NearestItemsAndSeries`: The nearest slice and series to the mouse position will be highlighted. +- `NearestItemsRetainMainShapes`: The nearest items to the mouse position will be highlighted and the main shapes of the series will not be de-emphasized. + +The `HighlightingMode` enumerated property determines how the data pie chart slices respond to being highlighted. The following are the options of that property and what they do: + +- `Brighten`: The series will have its color brightened when the mouse position is over or near it. +- `BrightenSpecific`: The specific slice will have its color brightened when the mouse position is over or near it. +- `FadeOthers`: The series will retain its color when the mouse position is over or near it, while the others will appear faded. +- `FadeOthersSpecific`: The specific slice will retain its color when the mouse position is over or near it, while the others will appear faded. +- `None`: The series and slices will not be highlighted. + +The following example demonstrates the mouse highlighting behaviors of the `XamDataPieChart` component: + +`sample="/charts/data-pie-chart/highlighting", height="600", alt="{Platform} Data Pie Chart Highlighting"` + +In addition to the mouse highlighting, the `XamDataPieChart` exposes a highlight filter capability that can display a subset of your data. This is applied by specifying a `HighlightedDataSource` for the control and by setting the `HighlightedValuesDisplayMode` property to `Overlay`. The `HighlightedDataSource` expects a subset of the data assigned to the `DataSource` property of the `XamDataPieChart`. + +When these conditions are met, the values of the subset will be highlighted, while the remainder of the full set of data will be faded - effectively creating a highlight for the subset and allowing easier visualization of a subset of your data within the same control. + +
+ +## {Platform} Data Pie Chart Animation + +The `XamDataPieChart` supports animating its slices into view, as well as when a value changes. + +You can set the `IsTransitionInEnabled` property to **true** to have the pie chart animate into view. The type of animation performed can be configured by setting the `TransitionInMode` enumerated property to the type of animation you would like to see. Additionally, you can also set the `TransitionInSpeedType` property to scale with index, value, normal, or randomized. The duration of this animation can be controlled by the `TransitionInDuration` property, which takes a `TimeSpan`. + +If you would like to animate data changes, this can also be done by setting the `AnimateSeriesWhenAxisRangeChanges` property to **true**. The duration of this change can be configured by setting the `TransitionDuration` property as well. + +The following sample demonstrates the usage of animation in the `XamDataPieChart`: + +`sample="/charts/data-pie-chart/animation", height="600", alt="{Platform} Data Pie Chart Animation"` + +
+ +## Additional Resources + +- [Donut Chart](donut-chart.md) +- [Polar Chart](polar-chart.md) +- [Radial Chart](radial-chart.md) + +## API References + +The following table lists API members mentioned in the above sections: + +- `OthersCategoryThreshold` +- `OthersCategoryType` +- `SelectionMode` + + |Chart Type | Control Name | API Members | + |-----------------|----------------|------------ | + |Data Pie Chart | `XamDataPieChart` | `XamDataPieChart` | + |Item Legend | `ItemLegend` | `ItemLegend` | + diff --git a/doc/en/components/charts/types/radial-chart.md b/doc/en/components/charts/types/radial-chart.md index 8e4b9a7bf..1ac1bb07d 100644 --- a/doc/en/components/charts/types/radial-chart.md +++ b/doc/en/components/charts/types/radial-chart.md @@ -55,7 +55,11 @@ Once our radial chart is created, we may want to make some further styling custo `sample="/charts/data-chart/radial-area-chart-styling", height="600", alt="{Platform} Radial Area Chart Styling"` +
+ +## {Platform} Radial Chart Settings +In addition, the labels can be configured to appear near or wide from the chart. This can be configured with the `LabelMode` property for the `CategoryAngleAxis`.
diff --git a/doc/en/components/editors/date-picker.md b/doc/en/components/editors/xdate-picker.md similarity index 51% rename from doc/en/components/editors/date-picker.md rename to doc/en/components/editors/xdate-picker.md index f33e9d7bf..35b0df73f 100644 --- a/doc/en/components/editors/date-picker.md +++ b/doc/en/components/editors/xdate-picker.md @@ -1,24 +1,27 @@ --- -title: {Platform} Date Picker | Data Visualization Tools | Infragistics -_description: Infragistics' {Platform} date picker component helps your users select dates. Improve your graphs and visualization with Ignite UI for {Platform}! -_keywords: {Platform} date picker, drop down, {ProductName}, Infragistics -mentionedTypes: ['DatePicker'] +title: {Platform} XDate Picker | Data Visualization Tools | Infragistics +_description: Infragistics' {Platform} xdate picker component helps your users select dates. Improve your graphs and visualization with Ignite UI for {Platform}! +_keywords: {Platform} xdate picker, drop down, {ProductName}, Infragistics +mentionedTypes: ['XDatePicker'] --- -# {Platform} Date Picker Overview +# {Platform} XDate Picker Overview -The Date Picker component allows users to use a drop-down calendar UI allowing the intuitive selection of a day, month and year. This can be helpful when an application user needs to select specific dates, and multiple editors can be combined to create a date-range UI. +The XDate Picker component allows users to use a drop-down calendar UI allowing the intuitive selection of a day, month and year. This can be helpful when an application user needs to select specific dates, and multiple editors can be combined to create a date-range UI. -## {Platform} Date Picker Example +> [!WARNING] +> The `XDatePicker` component is deprecated from version 5.0.018.7.0 of {ProductName}. For the latest supported {ProductName} Date Picker component refer to its respective page under "Scheduling". -This sample demonstrates how to create `DatePicker` with option to select a single date. +## {Platform} XDate Picker Example -`sample="/editors/date-picker/overview", height="350", alt="{Platform} Date Picker Example"` +This sample demonstrates how to create `XDatePicker` with option to select a single date. + +`sample="/editors/date-picker/overview", height="350", alt="{Platform} XDate Picker Example"` ## Dependencies -When installing the Date Picker component, the core and inputs packages must also be installed. +When installing the XDate Picker component, the core and inputs packages must also be installed. ```cmd npm install --save {PackageCore} @@ -29,65 +32,65 @@ npm install --save {PackageLayouts} ## Component Modules -The Date Picker component requires the following modules to be registered: +The XDate Picker component requires the following modules to be registered: ```razor // in Program.cs file builder.Services.AddIgniteUIBlazor( - typeof(IgbDatePickerModule)); + typeof(IgbXDatePickerModule)); ``` ```ts -import { IgrDatePickerModule } from 'igniteui-react-inputs'; +import { IgrXDatePickerModule } from 'igniteui-react-inputs'; -IgrDatePickerModule.register(); +IgrXDatePickerModule.register(); ``` ```ts -import { IgcDatePickerModule } from 'igniteui-webcomponents-inputs'; +import { IgcXDatePickerModule } from 'igniteui-webcomponents-inputs'; import { ModuleManager } from 'igniteui-webcomponents-core'; -ModuleManager.register(IgcDatePickerModule); +ModuleManager.register(IgcXDatePickerModule); ```
## Usage -The {Platform} Date Picker editor component consists of three default parts - the text area, a calendar drop-down button, and a clear button. These areas are described below: +The {Platform} XDate Picker editor component consists of three default parts - the text area, a calendar drop-down button, and a clear button. These areas are described below: - Text Area: This displays the selected date, stored in the `Value` property of the editor. -- Calendar: Clicking the calendar button will open the calendar drop-down of the Date Picker. The calendar will open to show the month of the currently selected `Value`, if there is one. If a `Value` is not specified, the calendar will show the month corresponding to the current date. The month at the top can be clicked to show a list of months, and the same applies for the year. There are also arrow buttons to the left and right of the month and year visualization that will increment and decrement the shown month chronologically. +- Calendar: Clicking the calendar button will open the calendar drop-down of the XDate Picker. The calendar will open to show the month of the currently selected `Value`, if there is one. If a `Value` is not specified, the calendar will show the month corresponding to the current date. The month at the top can be clicked to show a list of months, and the same applies for the year. There are also arrow buttons to the left and right of the month and year visualization that will increment and decrement the shown month chronologically. - Clear Button: The 'x' icon will clear the current value. | Property | Type | Description | | ---------|------|------------ | | `IconColor` | string | Changes the color of the calendar button. | -| `AllowTextInput` | bool | The date picker's value can be typed-in and modified by toggling this property to true. | +| `AllowTextInput` | bool | The xdate picker's value can be typed-in and modified by toggling this property to true. | | `DateFormat` | enum | Defaults to DateShort e.g. 'mm/dd/yyyy'. When set to DateLong, the date displayed in the editor will appear as e.g. Wednesday, April 14, 2021. | | `FirstDayOfWeek` | enum | Defaults to Sunday. A given day of the week will be used as the first day in each weekly row of the calendar, e.g. Monday through Sunday. | | `FormatString` | string | When DateShort is used, the date's format can be configured e.g. 'dd/mm/yyyy'. Note, if the `DateFormat`'s DateLong and `FormatString` are set then the `DateFormat` is ignored. | -| `Label` | string | Displays custom text above the date in the top-left corner of the Date Picker. | +| `Label` | string | Displays custom text above the date in the top-left corner of the XDate Picker. | | `MinDate` | DateTime | Restricts earlier dates from being selected or viewed. | | `MaxDate` | DateTime | Restricts later dates from being selected or viewed. | | `Placeholder` | string | A custom string to be displayed when the value within the edit portion of the calendar is cleared. | -| `ShowClearButton` | bool | Defaults to true, the clear button is directly to the left of the calendar button, visualized by an X. When clicked, it will clear the `Value` of the Date Picker. The clear button's visibility can be toggled on and off. | +| `ShowClearButton` | bool | Defaults to true, the clear button is directly to the left of the calendar button, visualized by an X. When clicked, it will clear the `Value` of the XDate Picker. The clear button's visibility can be toggled on and off. | | `ShowTodayButton`| bool | The today is directly below the dates when the calendar is opened. When clicked, it will select the current date. The today button's visibility can be toggled on and off. | -| `ShowWeekNumbers` | bool | Week numbers can be displayed as a number, at the left of every row of dates, in the drop down portion of the date picker. The week number's visibility can be toggled on and off. | +| `ShowWeekNumbers` | bool | Week numbers can be displayed as a number, at the left of every row of dates, in the drop down portion of the XDate Picker. The week number's visibility can be toggled on and off. | | `FirstWeekOfYear` | enum | Configures the start of the week numbers for the entire year. Can be set to FirstDay, FirstFourDayWeek, FirstFullWeek. | -| `OpenOnFocus` | bool | By default, the dropdown portion of the Date Picker is opened on single click, forcing the user to click the calendar button to drop down the calendar. | -| `Value` | date | Sets the value of the Date Picker and selects it in the dropdown calendar. | +| `OpenOnFocus` | bool | By default, the dropdown portion of the XDate Picker is opened on single click, forcing the user to click the calendar button to drop down the calendar. | +| `Value` | date | Sets the value of the XDate Picker and selects it in the dropdown calendar. | -Users can also customize the Date Picker's font by using the various text properties of the control. They are: `TextColor`, `TextFontFamily`, `TextFontSize`, `TextFontStyle`, and `TextFontWeight`. +Users can also customize the XDate Picker's font by using the various text properties of the control. They are: `TextColor`, `TextFontFamily`, `TextFontSize`, `TextFontStyle`, and `TextFontWeight`. ### Editing -The following example demonstrates how to enable editing in the `DatePicker`. +The following example demonstrates how to enable editing in the `XDatePicker`. -`sample="/editors/date-picker/editing", height="300", alt="{Platform} Date Picker Editing Example"` +`sample="/editors/date-picker/editing", height="300", alt="{Platform} XDate Picker Editing Example"` @@ -95,9 +98,9 @@ The following example demonstrates how to enable editing in the `DatePicker`. ### Date Limits -The following example demonstrates how to restrict selected dates in the `DatePicker`. +The following example demonstrates how to restrict selected dates in the `XDatePicker`. -`sample="/editors/date-picker/date-limits", height="360", alt="{Platform} Date Picker Date Limits Example"` +`sample="/editors/date-picker/date-limits", height="360", alt="{Platform} XDate Picker Date Limits Example"` @@ -105,9 +108,9 @@ The following example demonstrates how to restrict selected dates in the `DatePi ### Date Formats -The following example demonstrates how apply a long date in the `DatePicker`. +The following example demonstrates how apply a long date in the `XDatePicker`. -`sample="/editors/date-picker/format", height="350", alt="{Platform} Date Picker Format Example"` +`sample="/editors/date-picker/format", height="350", alt="{Platform} XDate Picker Format Example"` @@ -115,9 +118,9 @@ The following example demonstrates how apply a long date in the `DatePicker`. ### Date Ranges -The following example demonstrates how combine multiple `DatePicker` controls. +The following example demonstrates how combine multiple `XDatePicker` controls. -`sample="/editors/date-picker/range", height="300", alt="{Platform} Date Picker Date Range Example"` +`sample="/editors/date-picker/range", height="300", alt="{Platform} XDate Picker Date Range Example"` @@ -127,7 +130,7 @@ The following example demonstrates how combine multiple `DatePicker` controls. The following is a list of API members mentioned in the above sections: -- `DatePicker` +- `XDatePicker` - `IconColor` - `AllowTextInput` - `DateFormat` diff --git a/doc/en/components/general-changelog-dv-blazor.md b/doc/en/components/general-changelog-dv-blazor.md index 47bc0e3e5..c88296b0a 100644 --- a/doc/en/components/general-changelog-dv-blazor.md +++ b/doc/en/components/general-changelog-dv-blazor.md @@ -10,13 +10,93 @@ namespace: Infragistics.Controls.Charts All notable changes for each version of {ProductName} are documented on this page. +## **{PackageVerChanges-24-1-SEP}** + +### General + +- New [Banner](notifications/banner.md) component. +- New [DatePicker](scheduling/date-picker.md) component. +- New `Divider` component. +- `Icon` + - Added `SetIconRef` method. This allows to register and replace icons by SVG files. + - All components now use icons by reference internally so that it's easy to replace them without explicitly providing custom templates. +- `Combo`, `DatePicker`, `Dialog`, `Dropdown`, `ExpansionPanel`, `NavDrawer`, `Toast`, `Snackbar`, **IgbSelectComponent** + - Toggle methods `Show`, `Hide`, `Toggle` methods return **true** now on success. Otherwise **false**. +- `RadioGroup` + - Added `Name` and `Value` properties. `Value` also supports two-way binding. + +**BREAKING CHANGES**: + +- Renamed old **IgbDatePicker** to **IgbXDatePicker**. +- Removed `Form` component. Use native form instead. +- Removed `size` property in favor of the `--ig-size` CSS custom property for the following components: + - `Avatar`, `Button`,`IconButton`, `Calendar`, `Chip`, `Dropdown`, `Icon`, `Input`, `List`, `Rating`, `Snackbar`, `Tabs`, `Tree` +- `Badge`, `Chip`, `LinearProgress`, `CircularProgress` + - Renamed `Variant` property type to `StyleVariant`. +- `Calendar` + - Renamed `WeekStart` property type to `WeekDays`. +- `Checkbox`, `Switch` + - Changed `Change` event argument type from `ComponentBoolValueChangedEventArgs` to `CheckboxChangeEventArgs`. +- `Combo` + - The `IgbCombo` is now of generic type and the `Value` type is now of type `T[]`. This means that either you need to specify `T` or it will be inferred by the assigned `Value` type. + - Removed `PositionStrategy`, `Flip`, `SameWidth` properties. +- **IgbSelectComponent** + - Removed `PositionStrategy`, `Flip`, `SameWidth` properties. +- `DateTimeInput` + - Removed `MaxValue` and `MinValue` properties. Use `Max` and `Min` instead. +- `Dropdown` + - Removed `PositionStrategy` property. +- `Input` + - Removed old named `Maxlength` and `Minlength` properties. Use `MaxLength` and `MinLength`. + - Removed old named `Readonly` and `Inputmode` properties. Use `ReadOnly` and `InputMode`. + - Changed `InputMode` type also to `string`. +- `Radio` + - Changed `Change` event argument type from `ComponentBoolValueChangedEventArgs` to `RadioChangeEventArgs`. +- `RangeSlider` + - Removed `AriaThumbLower` and `AriaThumbUpper` properties. Use `ThumbLabelLower` and `ThumbLabelUpper` instead. +- `Rating` + - Renamed `Readonly` property to `ReadOnly`. + +### {PackageGrids} + +- `All Grids` + - Added `GetColumns` / `GetColumnsAsync` methods, which return the grid columns collection. + - Added new `RowClick` event. +- `PivotGrid` + - Added `Sortable` property for a `PivotDimension`. + - Added horizontal layout. Can be enabled inside the new `PivotUI` property as `RowLayout` `Horizontal`. + - Added row dimension summaries for horizontal layout only. Can be enabled for each `PivotDimension` by setting `HorizontalSummary` to **true**. + - Added `HorizontalSummariesPosition` property to the `PivotUI`, configuring horizontal summaries position. + - Added row headers for the row dimensions. Can be enabled inside the new `PivotUI` property as `ShowHeaders` **true**. + - Keyboard navigation now can move in to row headers back and forth from any row dimension headers or column headers. + - Added keyboard interactions for row dimension collapse using `Alt + Arrows` and row headers sorting using `Ctrl + Arrow Up/Down`. + +**BREAKING CHANGES**: +- `All Grids`, `RowIsland` + - Removed `DisplayDensity` deprecated property. + - Renamed `Columns`, `ActualColumns`, `ContentColumns` properties to `ColumnList`, `ActualColumnList` and `ContentColumnList`. Recommended to use the new `GetColumns` method instead. + - Renamed `RowDelete` and `RowAdd` event argument type to `RowDataCancelableEventArgs`. + - Renamed `ContextMenu` event argument type to `GridContextMenuEventArgs`. + - Removed `GridEditEventArgs`, `GridEditDoneEventArgs`, `PinRowEventArgs` events `RowID` and `PrimaryKey` properties. Use `RowKey` instead. +- `PivotGrid` + - removed `ShowPivotConfigurationUI` property. Use `PivotUI` and set inside it the new `ShowConfiguration` option. +- `Column` + - Removed `Movable` property. Use Grid's `Moving` property now. + - Removed `ColumnChildren` property. Use `ChildColumns` instead. +- `ColumnGroup` + - Removed `Children` property. Use `ChildColumns` instead. +- `Paginator` + - Removed `IsFirstPageDisabled` and `IsLastPageDisabled` properties. Use `IsFirstPage` and `IsLastPage` instead. + +## **{PackageVerChanges-24-1-JUN}** + ### General - `Input`, `Textarea` - exposed `ValidateOnly` to enable validation rules being enforced without restricting user input. - `Dropdown` - `PositionStrategy` property is deprecated. The dropdown now uses the `Popover` API to render its container in the top layer of the browser viewport, making the property obsolete. - `DockManager` - `SplitPane` `IsMaximized` is deprecated. Having isMaximized set to true on a split pane level has no real effect as split panes serve as containers only, meaning they have no actual content to be shown maximized. Use the `IsMaximized` property of `TabGroupPane` and/or `ContentPane` instead. ### {PackageGrids} -- `DisplayDensity` deprecated in favor of the `--ig-size` CSS custom property. +- `DisplayDensity` deprecated in favor of the `--ig-size` CSS custom property. Check out the [Grid Size](grids/grid/size.md) topic for more. - `PivotGrid` - The type of Columns, Rows, Filters from `PivotConfiguration` option is now array of IgbPivotDimension - `IgbPivotDimension[]`, it was `IgbPivotDimensionCollection` previously. The type of Values from `PivotConfiguration` option is now array of IgbPivotValue - `IgbPivotValue[]`, it was `IgbPivotValueCollection` previously. @@ -25,7 +105,10 @@ The type of Values from `PivotConfiguration` option is now array of IgbPivotValu * [Data Legend Grouping](charts/features/chart-data-legend.md#{PlatformLower}-data-legend-grouping) & [Data Tooltip Grouping](charts/features/chart-data-tooltip.md#{PlatformLower}-data-tooltip-grouping-for-data-chart) - New grouping feature added. The property `GroupRowVisible` toggles grouping with each series opting in can assign group text via the `DataLegendGroup` property. If the same value is applied to more than one series then they will appear grouped. Useful for large datasets that need to be categorized and organized for all users. -- [Chart Selection](charts/features/chart-data-selection.md) - New series selection styling. This is adopted broadly across all category, financial and radial series for `CategoryChart` and `XamDataChart`. Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a partcular dataitem. Also `SelectedSeriesItemsChanged` event and `SelectedSeriesItems` are available for additional help to build out robust business requirements surrouding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection. +- [Chart Selection](charts/features/chart-data-selection.md) - New series selection styling. This is adopted broadly across all category, financial and radial series for `CategoryChart` and `XamDataChart`. Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a particular dataitem. Also `SelectedSeriesItemsChanged` event and `SelectedSeriesItems` are available for additional help to build out robust business requirements surrounding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection. + +- [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the `XamDataChart`, to enable creating pie charts in the allowing robust visualizations using all the added power of the data chart. + - [Treemap Highlighting](charts/types/treemap-chart.md#{PlatformLower}-treemap-highlighting) - 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. @@ -304,7 +387,7 @@ Added New Feature - [Row Paging](grids/data-grid/row-paging.md) which is used to * [Button & Icon Button](inputs/button.md) * [Card](layouts/card.md) * [Checkbox](inputs/checkbox.md) -* [Form](inputs/form.md) +* Form * [Icon](layouts/icon.md) * [List](grids/list.md) * [Navigation Bar](menus/navbar.md) diff --git a/doc/en/components/general-changelog-dv-react.md b/doc/en/components/general-changelog-dv-react.md index d1ed1d313..f58318cab 100644 --- a/doc/en/components/general-changelog-dv-react.md +++ b/doc/en/components/general-changelog-dv-react.md @@ -9,6 +9,84 @@ namespace: Infragistics.Controls.Charts All notable changes for each version of {ProductName} are documented on this page. +## **{PackageVerChanges-24-1-SEP}** + +### {PackageCommon} + +- New [Banner](notifications/banner.md) component. +- New [DatePicker](scheduling/date-picker.md) component. +- New `Divider` component. +- Added support for native events to all components. +- `Icon` + - Added `setIconRef` method. This allows to register and replace icons by SVG files. + - All components now use icons by reference internally so that it's easy to replace them without explicitly providing custom templates. +- `Combo`, `DatePicker`, `Dialog`, `Dropdown`, `ExpansionPanel`, `NavDrawer`, `Toast`, `Snackbar`, **IgrSelectComponent** + - Toggle methods `show`, `hide`, `toggle` methods return **true** now on success, otherwise **false**. +- **IgrButtonComponent**, `IconButton`, `Checkbox`, `Switch`, `Combo`, `DateTimeInput`, `Input`, `MaskInput`, `Radio`, **IgrSelectComponent**, `Textarea` + - Deprecated custom `focus` and `blur` events. Use the native `onFocus` and `onBlur` events instead +- `RadioGroup` + - Added `Name` and `Value` properties. + +**BREAKING CHANGES**: + +- Renamed old **IgrDatePicker** to **IgrXDatePicker**. +- Removed `Form` component. Use native form instead. +- Removed `size` property in favor of the `--ig-size` CSS custom property for the following components: + - `Avatar`, **IgrButtonComponent**, `IconButton`, `Calendar`, `Chip`, `Dropdown`, `Icon`, `Input`, `List`, `Rating`, `Snackbar`, `Tabs`, `Tree` +- `Badge`, `Chip`, `LinearProgress`, `CircularProgress` + - Renamed `Variant` property type to `StyleVariant`. +- `Calendar` + - Renamed `WeekStart` property type to `WeekDays`. +- `Checkbox`, `Switch` + - Changed `change` event argument type from `ComponentBoolValueChangedEventArgs` to `CheckboxChangeEventArgs`. +- `Combo`, **IgrSelectComponent** + - Removed `positionStrategy`, `flip`, `sameWidth` properties. +- `DateTimeInput` + - Removed `maxValue` and `minValue` properties. Use `max` and `min` instead. +- `Dropdown` + - Removed `positionStrategy` property. +- `Input` + - Removed old named `maxlength` and `minlength` properties. Use `maxLength` and `minLength`. + - Removed old named `readonly` and `inputmode` properties. Use `readOnly` and `inputMode`. + - Changed `inputMode` type also to `string`. +- `Radio` + - Changed `change` event argument type from `ComponentBoolValueChangedEventArgs` to `RadioChangeEventArgs`. +- `RangeSlider` + - Removed `ariaThumbLower` and `ariaThumbUpper` properties. Use `thumbLabelLower` and `thumbLabelUpper` instead. +- `Rating` + - Renamed `readonly` property to `readOnly`. + +### {PackageGrids} + +- `All Grids` + - Added new `RowClick` event. +- `PivotGrid` + - Added `sortable` property for a `PivotDimension`. + - Added horizontal layout. Can be enabled inside the new `pivotUI` property as `rowLayout` `horizontal`. + - Added row dimension summaries for horizontal layout only. Can be enabled for each `PivotDimension` by setting `horizontalSummary` to **true**. + - Added `horizontalSummariesPosition` property to the `pivotUI`, configuring horizontal summaries position. + - Added row headers for the row dimensions. Can be enabled inside the new `pivotUI` property as `showHeaders` **true**. + - Keyboard navigation now can move in to row headers back and forth from any row dimension headers or column headers. + - Added keyboard interactions for row dimension collapse using `Alt + Arrows` and row headers sorting using `Ctrl + Arrow Up/Down`. + +**BREAKING CHANGES**: + +- `All Grids`, `RowIsland` + - Removed `displayDensity` deprecated property. + - Renamed `actualColumns`, `contentColumns` properties to `actualColumnList` and `contentColumnList`. Use `columns` or `columnList` property to get all columns now. + - Renamed `rowDelete` and `rowAdd` event argument type to `RowDataCancelableEventArgs`. + - Renamed `contextMenu` event argument type to `GridContextMenuEventArgs`. + - Removed `GridEditEventArgs`, `GridEditDoneEventArgs`, `PinRowEventArgs` events `rowID` and `primaryKey` properties. Use `rowKey` instead. +- `PivotGrid` + - removed `showPivotConfigurationUI` property. Use `pivotUI` and set inside it the new `showConfiguration` option. +- `Column` + - Removed `movable` property. Use Grid's `moving` property now. + - Removed `columnChildren` property. Use `childColumns` instead. +- `ColumnGroup` + - Removed `children` property. Use `childColumns` instead. +- `Paginator` + - Removed `isFirstPageDisabled` and `isLastPageDisabled` properties. Use `isFirstPage` and `isLastPage` instead. + ## **{PackageVerChanges-24-1-JUN}** ### {PackageCommon} @@ -17,14 +95,18 @@ All notable changes for each version of {ProductName} are documented on this pag - `DockManager` - `SplitPane` `IsMaximized` is deprecated. Having isMaximized set to true on a split pane level has no real effect as split panes serve as containers only, meaning they have no actual content to be shown maximized. Use the `IsMaximized` property of `TabGroupPane` and/or `ContentPane` instead. ### {PackageGrids} -- `DisplayDensity` deprecated in favor of the `--ig-size` CSS custom property. + +- `DisplayDensity` deprecated in favor of the `--ig-size` CSS custom property. Check out the [Grid Size](grids/grid/size.md) topic for more. + - `PivotGrid` - Configuration of the component can now be applied correctly. ### {PackageCharts} (Charts) * [Data Legend Grouping](charts/features/chart-data-legend.md#{PlatformLower}-data-legend-grouping) & [Data Tooltip Grouping](charts/features/chart-data-tooltip.md#{PlatformLower}-data-tooltip-grouping-for-data-chart) - New grouping feature added. The property `GroupRowVisible` toggles grouping with each series opting in can assign group text via the `DataLegendGroup` property. If the same value is applied to more than one series then they will appear grouped. Useful for large datasets that need to be categorized and organized for all users. -- [Chart Selection](charts/features/chart-data-selection.md) - New series selection styling. This is adopted broadly across all category, financial and radial series for `CategoryChart` and `XamDataChart`. Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a partcular dataitem. Also `SelectedSeriesItemsChanged` event and `SelectedSeriesItems` are available for additional help to build out robust business requirements surrouding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection. +- [Chart Selection](charts/features/chart-data-selection.md) - New series selection styling. This is adopted broadly across all category, financial and radial series for `CategoryChart` and `XamDataChart`. Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a particular dataitem. Also `SelectedSeriesItemsChanged` event and `SelectedSeriesItems` are available for additional help to build out robust business requirements surrounding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection. + +- [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the `XamDataChart`, to enable creating pie charts in the allowing robust visualizations using all the added power of the data chart. - [Treemap Highlighting](charts/types/treemap-chart.md#{PlatformLower}-treemap-highlighting) - 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. diff --git a/doc/en/components/general-changelog-dv-wc.md b/doc/en/components/general-changelog-dv-wc.md index 3d656c447..a7fa0d1ad 100644 --- a/doc/en/components/general-changelog-dv-wc.md +++ b/doc/en/components/general-changelog-dv-wc.md @@ -3,22 +3,54 @@ 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", "XamRadialGauge", "XamRadialChart", "Toolbar"] -namespace: Infragistics.Controls.Charts +namespace: Infragistics.Controls --- + # {ProductName} Changelog All notable changes for each version of {ProductName} are documented on this page. -## **{PackageVerChanges-24-1-JUN}** - -### {PackageCommon} +### **{PackageVerChanges-24-1-SEP}** + +- `All Grids` + - Added new `RowClick` event. +- `PivotGrid` + - Added `sortable` property for a `PivotDimension`. + - Added horizontal layout. Can be enabled inside the new `pivotUI` property as `rowLayout` `horizontal`. + - Added row dimension summaries for horizontal layout only. Can be enabled for each `PivotDimension` by setting `horizontalSummary` to **true**. + - Added `horizontalSummariesPosition` property to the `pivotUI`, configuring horizontal summaries position. + - Added row headers for the row dimensions. Can be enabled inside the new `pivotUI` property as `showHeaders` **true**. + - Keyboard navigation now can move in to row headers back and forth from any row dimension headers or column headers. + - Added keyboard interactions for row dimension collapse using `Alt + Arrows` and row headers sorting using `Ctrl + Arrow Up/Down`. + +**BREAKING CHANGES**: +- `All Grids`, `RowIsland` + - Removed `displayDensity` deprecated property. + - Renamed `actualColumns`, `contentColumns` properties to `actualColumnList` and `contentColumnList`. Use `column` or `columnList` property to get all columns now. + - Renamed `rowDelete` and `rowAdd` event argument type to `RowDataCancelableEventArgs`. + - Renamed `contextMenu` event argument type to `GridContextMenuEventArgs`. + - Removed `GridEditEventArgs`, `GridEditDoneEventArgs`, `PinRowEventArgs` events `rowID` and `primaryKey` properties. Use `rowKey` instead. +- `PivotGrid` + - removed `showPivotConfigurationUI` property. Use `pivotUI` and set inside it the new `showConfiguration` option. +- `Column` + - Removed `movable` property. Use Grid's `moving` property now. + - Removed `columnChildren` property. Use `childColumns` instead. +- `ColumnGroup` + - Removed `children` property. Use `childColumns` instead. +- `Paginator` + - Removed `isFirstPageDisabled` and `isLastPageDisabled` properties. Use `isFirstPage` and `isLastPage` instead. + + +### **{PackageVerChanges-24-1-JUN}** + +#### {PackageCommon} - `Input`, `Textarea` - exposed `ValidateOnly` to enable validation rules being enforced without restricting user input. - `Dropdown` - `PositionStrategy` property is deprecated. The dropdown now uses the `Popover` API to render its container in the top layer of the browser viewport, making the property obsolete. - `DockManager` - `SplitPane` `IsMaximized` is deprecated. Having isMaximized set to true on a split pane level has no real effect as split panes serve as containers only, meaning they have no actual content to be shown maximized. Use the `IsMaximized` property of `TabGroupPane` and/or `ContentPane` instead. -### {PackageGrids} -- `DisplayDensity` deprecated in favor of the `--ig-size` CSS custom property. -### {PackageCharts} (Charts) +#### {PackageGrids} +- `DisplayDensity` deprecated in favor of the `--ig-size` CSS custom property. Check out the [Grid Size](grids/grid/size.md) topic for more regarding the Grid. +#### {PackageCharts} (Charts) * [Data Legend Grouping](charts/features/chart-data-legend.md#{PlatformLower}-data-legend-grouping) & [Data Tooltip Grouping](charts/features/chart-data-tooltip.md#{PlatformLower}-data-tooltip-grouping-for-data-chart) - New grouping feature added. The property `GroupRowVisible` toggles grouping with each series opting in can assign group text via the `DataLegendGroup` property. If the same value is applied to more than one series then they will appear grouped. Useful for large datasets that need to be categorized and organized for all users. @@ -30,119 +62,729 @@ All notable changes for each version of {ProductName} are documented on this pag - `Toolbar` - New `IsHighlighted` option for ToolAction for outlining a border around specific tools of choice. -### {PackageGauges} (Gauges) +#### {PackageGauges} (Gauges) - `XamRadialGauge` - New label for the highlight needle. `HighlightLabelText` and `HighlightLabelSnapsToNeedlePivot` and many other styling related properties for the HighlightLabel were added. -## **{PackageVerChanges-23-2-MAR}** +### **{PackageVerChanges-23-2-MAR}** -### {PackageCharts} +- New [`HierarchicalGrid`](grids/hierarchical-grid/overview.md) component. - - 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. +### **{PackageVerChanges-23-2-DEC}** -- `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. +- Added New Features (Grid) - [State Persistence](grids/grid/state-persistence.md). -### {PackageGauges} +### **{PackageVerChanges-22-2.2}** -- `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. +- A new argument `PrimaryKey` has been introduced to `IgcRowDataEventArgs`, and part of the event arguments that are emitted by the `RowAdded` and `RowDeleted` events. When the grid has a primary key attribute added, then the emitted primaryKey event argument represents the row ID, otherwise it defaults to undefined. +- `RowSelectionChanging` event arguments are changed. Now, the `OldSelection`, `NewSelection`, `Added` and `Removed` collections no longer consist of the row keys of the selected elements when the grid has set a primaryKey, but now in any case the row data is emitted. +- When the grid is working with remote data and a primary key has been set, the selected rows that are not currently part of the grid view will be emitted for a partial row data object. +- When selected row is deleted from the grid component `RowSelectionChanging` event will no longer be emitted. +- The `OnGroupingDone` event has been renamed to `GroupingDone` to not violate the no on-prefixed outputs convention. +- The `OnDensityChanged` event has been renamed to `DensityChanged` to not violate the no on-prefixed outputs convention. All components exposing this event are affected. -### {PackageGrids} +- `PivotGrid`: The `IgcPivotDateDimension` properties `InBaseDimension` and `InOption` have been deprecated and renamed to `BaseDimension` and `Options` respectively. -- New [`HierarchicalGrid`](grids/hierarchical-grid/overview.md) component +### **{PackageVerChanges-22-2.1}** -## **{PackageVerChanges-23-2-JAN}** +- New [Pivot Grid](grids/pivot-grid/overview.md) component. -### {PackageCharts} (Charts) +### **{PackageVerChanges-22-2}** -* [Chart Highlight Filter](charts/features/chart-highlight-filter.md) - The `CategoryChart` and `XamDataChart` now expose a way to highlight and animate in and out of a subset of data. The display of this highlight depends on the series type. For column and area series, the subset will be shown on top of the total set of data where the subset will be colored by the actual brush of the series, and the total set will have a reduced opacity. For line series, the subset will be shown as a dotted line. +- New [Grid](grids/data-grid.md) component. +- New [Tree Grid](grids/tree-grid/overview.md) component. +- `DataGrid`: + - Changed **{IgPrefix}Column** to `DataGridColumn` + - Changed **GridCellEventArgs** to `DataGridCellEventArgs` + - Changed **GridSelectionMode** to `DataGridSelectionMode` + - Changed **SummaryOperand** to `DataSourceSummaryOperand` -## **{PackageVerChanges-23-2-DEC}** +### **{PackageVerChanges-22-1}** -### {PackageGrids} (Grid) +- `DataGrid`: + - Added New Feature - [Row Paging](grids/data-grid/row-paging.md) which is used to split a large set of data into a sequence of pages that have similar content. With pagination, data can be displayed in a set number of rows, letting users “scroll” through their data, without needing a scroll bar. The UI for table pagination usually includes things like the current page, total pages, and clickable Previous and Next arrows/buttons that let users flip through the pages of data. -* Added New Features - [State Persistence](grids/grid/state-persistence.md) +### **{PackageVerChanges-21-2.1}** +- `DataGrid`: + - Added `ValueMultiField`, of type string[], in the `ComboBoxColumn` to be used when your items in the drop down contain a key that consists of multiple fields. -## **{PackageVerChanges-23-2}** +> [!Note] +> The following breaking changes were introduced: Changed `ValueField` property from type string[] to string. + +### **{PackageVerChanges-21-2}** + +- `DataGrid`: + - New Features Added: + - [Filter Row](grids/data-grid/column-filtering.md) + - [Load/Save Layout Customizations](grids/data-grid/load-save-layout.md) + - [GroupBy Area for column grouping](grids/data-grid/row-grouping.md) + - [Cell Merging](grids/data-grid/cell-merging.md) + - New API: + - Added `SelectionChanged` event. Used to detect changes on selection interactions + e.g. Multiple row selection. + - Breaking Changes: + - Changed grid's SummaryScope property's type to SummaryScope from `DataSourceSummaryScope` + - Changed GroupHeaderDisplayMode property's type to GroupHeaderDisplayMode from `DataSourceSectionHeaderDisplayMode` + + +### **{PackageVerChanges-21-1}** + +- `DataGrid`: + - Added `EditOnKeyPress` aka Excel-style Editing, instantly begin editing when typing. + - Added `EditModeClickAction` property - By default double-clicking is required to enter edit mode. This can be set to `SingleClick` to allow for edit mode to occur when selecting a new cell. + - Added `EnterKeyBehaviors` property - aka Excel-style Navigation (Enter Behavior) – controls the behavior of the enter key, e.g. Options are (none, edit, move up, down, left, right) + - Added `EnterKeyBehaviorAfterEdit` property - While in edit-mode, this property controls when enter is pressed, e.g. Options are (moves to the cell below, above, right, left) + - Added `SelectAllRows` - method. + - Added Row Range Selection - With `GridSelectionMode` property set to MultipleRow the following new functionality is now included: + - Click and drag to select rows + - Shift and click to select multiple rows. + - Shift and press the up/down arrow keys to select multiple rows. + - Pressing space bar toggles selection of active row via `GridSelectionMode` property set to MultipleRow or SingleRow + - Added Column Summaries to Column Options Dialog. -### {PackageGrids} (Toolbar - Beta) +### **{PackageVerChangedFields}** -* Save tool action has been added to save the chart to an image via the clipboard. -* Vertical orientation has been added via the toolbar's `Orientation` property. By default the toolbar is horizontal, now the toolbar can be shown in vertical orientation where the tools will popup to the left/right respectfully. -* Custom SVG icons support was added via the toolbar's `renderImageFromText` method, further enhancing custom tool creation. +- `DataGrid`: -## **{PackageVerChanges-23-1}** +> [!Note] +> These breaking changes were introduce in the grid package. -### New Components +- Changed name of PropertyPath -* [Toolbar](menus/toolbar.md) - Beta. This component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tool items when linked to our `XamDataChart` or `CategoryChart` components. You'll be able to create custom tools for your project allowing end users to provide changes, offering an endless amount of customization. +The data grid component property `propertyPath` has been renamed to `field`. This applies to all Column types, GroupDescription, SortDescription & SummaryDescription. -### {PackageCharts} (Charts) +```html + +``` -* [ValueLayer](charts/features/chart-overlays.md#{PlatformLower}-value-layer) - A new series type named the `ValueLayer` is now exposed which can allow you to render an overlay for different focal points of the plotted data such as Maximum, Minimum, and Average. This is applied to the `CategoryChart` and `FinancialChart` by adding to the new `ValueLines` collection. +```ts +import { IgcColumnSummaryDescription, IgcColumnSortDescription, IgcColumnGroupDescription} from 'igniteui-webcomponents-grids' +const productCount = new IgcColumnSummaryDescription(); +productCount.field = "ProductName"; +const colSortDesc = new IgcColumnSortDescription(); +colSortDesc.field = "UnitsInStock"; +const income = new IgcColumnGroupDescription(); +income.field = "Income"; +``` -* It is now possible to apply a **dash array** to the different parts of the series of the `XamDataChart`. You can apply this to the [series](charts/types/line-chart.md#{PlatformLower}-styling-line-chart) plotted in the chart, the [gridlines](charts/features/chart-axis-gridlines.md#{PlatformLower}-axis-gridlines-properties) of the chart, and the [trendlines](charts/features/chart-trendlines.md#{PlatformLower}-chart-trendlines-dash-array-example) of the series plotted in the chart. +### **{PackageVerRenamedGrid}** -## **{PackageVerChanges-22-2.2}** +- `DataGrid`: -### New Components +- Changed Name of Live Grid - the data grid component and it's corresponding module's names have changed from "LiveGrid" to "DataGrid". -* [Dialog](notifications/dialog.md) -* [Select](inputs/select.md) +> [!Note] +> These breaking changes were introduce in these packages and components only: -### {PackageGrids} (Data Grid) +The new code for importing the grid and it's corresponding module is: -* A new argument `PrimaryKey` has been introduced to `IgcRowDataEventArgs`, and part of the event arguments that are emitted by the `RowAdded` and `RowDeleted` events. When the grid has a primary key attribute added, then the emitted primaryKey event argument represents the row ID, otherwise it defaults to undefined. -* `RowSelectionChanging` event arguments are changed. Now, the `OldSelection`, `NewSelection`, `Added` and `Removed` collections no longer consist of the row keys of the selected elements when the grid has set a primaryKey, but now in any case the row data is emitted. -* When the grid is working with remote data and a primary key has been set, the selected rows that are not currently part of the grid view will be emitted for a partial row data object. -* When selected row is deleted from the grid component `RowSelectionChanging` event will no longer be emitted. -* The `OnGroupingDone` event has been renamed to `GroupingDone` to not violate the no on-prefixed outputs convention. -* The `OnDensityChanged` event has been renamed to `DensityChanged` to not violate the no on-prefixed outputs convention. All components exposing this event are affected. +```ts +import { IgcDataGrid } from "igniteui-webcomponents-grids"; +import { IgcDataGridModule } from 'igniteui-webcomponents-grids'; +``` -### {PackageInputs} +- Required Peer Dependency for `DataGrid` -* `IgcDateTimeInput`, the StepDownAsync(DateTimeInputDatePart.Date, SpinDelta.Date) is now trimmed down to DatePart instead of DateTimeInputDatePart -* `IgcRadio` and `IgcRadioGroup`, added component validation along with styles for invalid state -* `IgcMask`, added the capability to escape mask pattern literals. -* `IgcBadge` added a `Shape` property that controls the shape of the badge and can be either `Square` or `Rounded`. The default shape of the badge is rounded. -* `IgcAvatar`, the `RoundShape` property has been deprecated and will be removed in a future version. Users can control the shape of the avatar by the newly added `Shape` attribute that can be `Square`, `Rounded` or `Circle`. The default shape of the avatar is `Square`. +The data grid component requires the "inputs" package. + +```ts +**npm install --save {PackageInputs}** +``` + + +## {PackageCommon} + +### **{PackageCommonVerChanges-5.0.0}** + +- `Icon` + - Added `setIconRef` method. This allows to register and replace icons by SVG files. + - All components now use icons by reference internally so that it's easy to replace them without explicitly providing custom templates. +- `RadioGroup` + - Added `name` and `value` properties. + +**BREAKING CHANGES**: + +- Removed `Form` component. Use native form instead. +- Removed `size` property in favor of the `--ig-size` CSS custom property for the following components: + - `Avatar`, `Button`,`IconButton`, `Calendar`, `Chip`, `Dropdown`, `Icon`, `Input`, `List`, `Rating`, `Snackbar`, `Tabs`, `Tree` +- Removed custom `igcFocus` and `igcBlur` events. Use the native `focus` and `blur` events instead for the following components: + - `Button`, `IconButton`, `Checkbox`, `Switch`, `Combo`, `DateTimeInput`, `Input`, `MaskInput`, `Radio`, **IgcSelectComponent**, `Textarea` +- `Checkbox`, `Switch` ,`Radio` + - Changed `igcChange` event arguments from `CustomEvent` to `CustomEvent<{ checked: boolean; value: string | undefined }>` +- `Combo`, **IgcSelectComponent** + - Removed `positionStrategy`, `flip`, `sameWidth` properties. +- `Dialog` + - Renamed The `closeOnEscape` property to `keepOpenOnEscape`. +- `Dropdown` + - Removed `positionStrategy` property. +- `Input` + - Removed `maxlength` and `minlength` properties. Use the native `maxLength` and `minLength` properties or `max` and `min` instead. + - Renamed `readonly` and `inputmode` properties to `readOnly` and `inputMode`. +- `RangeSlider` + - Renamed `ariaThumbLower`/`ariaThumbUpper` properties to `thumbLabelLower`/`thumbLabelUpper`. +- `Rating` + - Renamed `readonly` property to `readOnly`. + +### **{PackageCommonVerChanges-4.11.1}** + +#### Changed +- `Stepper` - Design changes in vertical mode. + +### **{PackageCommonVerChanges-4.11.0}** + +#### Changed +- `Toast`, `Rating`, `Stepper` - Styling changes in Indigo Theme. + +### **{PackageCommonVerChanges-4.10.0}** + +#### Added +- New [Banner](notifications/banner.md) component +- New [Divider](layouts/divider.md) component +- New [DatePicker](scheduling/date-picker.md) component +- `RadioGroup` - Bind underlying radio components name and checked state through the radio group. + +#### Deprecated +- `Input` `Inputmode` property. Aligned with the native `inputMode` DOM property instead. + +#### Fixed +- `Input`, `Textarea` - passing `undefined` to value sets the underlying input value to undefined. +- `MaskInput` - after a form `reset` call correctly update underlying input value and placeholder state. +- `Tree` - setting `--ig-size` on the item `indicator` CSS Part will now change the size of the icon. +- `DateTimeInput` - double emit of `igcChange` in certain scenarios. +- `NavDrawer` - mini variant is not initially rendered when not in an open state. +- `Combo`: + - Selecting an entry using the `Enter` key now correctly works in single selection mode. + - Turning on the `DisableFiltering` option now clears any previously entered search term. + - Entering a search term in single selection mode that already matches the selected item now works correctly. + +### **{PackageCommonVerChanges-4.9.0}** + +#### Added +- `ButtonGroup` - now allows resetting the selection state via the `SelectedItems` property. +- `Input`, `Textarea` - exposed `ValidateOnly` to enable validation rules being enforced without restricting user input. + +#### Changed +- `Combo`, `Select` and `Dropdown` - now use the native `Popover` API. + +#### Deprecated +- `Dropdown` - `PositionStrategy` property is deprecated. The dropdown now uses the `Popover` API to render its container in the top layer of the browser viewport, making the property obsolete. + +#### Fixed +- `DateTimeInput` - Label in Material theme is broken when component is in read-only mode. + +### **{PackageCommonVerChanges-4.8.2}** + +#### Fixed +- `Textarea` - resize handle position for non-suffixed textarea. +- `Tabs` - error when dynamically creating and adding a tab group and tabs in a single call stack. +- `Checkbox`/`Switch` - participate in form submission when initially checked. +- `Dialog` - `igcClosed` fired before the component was actually closed/hidden. + +### **{PackageCommonVerChanges-4.8.1}** + +#### Fixed +- `DateTimeInput` - `InputFormat` is not applied to an already set value. +- `Checkbox`, `Radio`, `Switch` - apply form validation synchronously. +- `Select`, `Dropdown` - Unable to select item when clicking on a wrapping element inside the dropdown/select item slot. +- `Tree` - active state is correctly applied to the correct tree node on click. + +### **{PackageCommonVerChanges-4.8.0}** + +#### Added +- `Combo` can now set `GroupSorting` to none which shows the groups in the order of the provided data. +- `Button`/`IconButton` - updated visual looks across themes, new states. +- `NavBar` - added border in Bootstrap theme. + +#### Changed +- Grouping in `Combo` no longer sorts the data. `GroupSorting` property now affects the sorting direction only of the groups. **Behavioral change**: In previous release the sorting directions of the groups sorted the items as well. If you want to achieve this behavior you can pass already sorted data to the `Combo`. + +#### Deprecated +- `Slider` - `aria-label-upper` and `aria-label-lower` are deprecated and will be removed in the next major release. Use `thumb-label-upper` and `thumb-label-lower` instead. + +#### Fixed +- `Button` - Slotted icon size. +- `ButtonGroup` + - Updated Fluent theme look. + - Disabled state in Safari. +- `Combo`/`Select` - Style issues. +- `Slider` + - Clicks on the slider track now use the track element width as a basis for the calculation. + - Input events are no longer emitted while continuously dragging the slider thumb and exceeding upper/lower bounds. + - When setting `upper-bound`/`lower-bound` before `min`/`max`, the slider will no longer overwrite the bound properties with the previous values of `min`/`max`. + - The `aria-label` bound to the slider thumb is no longer reset on consequent renders. +- `Input` + - Default validators are run synchronously. + - Style issues. +- `DateTimeInput` - `setRangeText()` updates underlying value. + +### **{PackageCommonVerChanges-4.7.0}** + +#### Added +- `Tree` - Added `ToggleNodeOnClick` property that determines whether clicking over a node will change its expanded state or not. Defaults to `false`. + +- `Rating` - `AllowReset` added. When enabled selecting the same value will reset the component. **Behavioral change**: In previous releases this was the default behavior of the rating component. Make sure to set `allowReset` if you need to keep this behavior in your application. + +#### Changed +- Improved WAI-ARIA compliance for `Avatar`, `Badge` and `Combo`. +#### Fixed +- Active item visual styles for `Dropdown`, `Select` and `Combo`. +- `NavDrawer` - mini variant broken visual style. + +### **{PackageCommonVerChanges-4.6.0}** + +#### Added +- `action` slot added to `Snackbar`. +- `indicator-expanded` slot added to `ExpansionPanel`. +- `toggle-icon-expanded` slot added to `Select`. +- `Select`, `Dropdown` - exposed `selectedItem`, `items` and `groups` getters. + +#### Changed +- Updated the package to Lit v3. +- Components dark variants are now bound to their shadow root. +- Components implement default sizes based on current theme. +- `ButtonGroup` - changed events to non-cancellable. +- Optimized components CSS and reduced bundle size. +- WAI-ARIA improvements for `Icon`, `Select`, `Dropdown` and `List`. + +#### Fixed +- `Textarea` missing styling parts. +- `TreeItem` disabled styles. +- `Snackbar` removed unnecessary styles. +- `TreeItem` hover state visual design. +- `Calendar` not keeping focus state when switching views. + +### **{PackageCommonVerChanges-4.5.0}** + +#### Added + +- New [Text Area](inputs/text-area.md) component. +- New [Button Group](inputs/button-group.md) component. +- New `ToggleButton`. +- `NavDrawer` now supports CSS transitions. +- Position attribute for `Toast` and `Snackbar`. + +#### Deprecated + +The `size` property and attribute have been deprecated for all components. Use the `--ig-size` CSS custom property instead. The following example sets the size of the `Avatar` component to small: + +```css +igc-avatar { + --ig-size: var(--ig-size-small); +} +``` + +#### Fixed +- Combo items position in Safari. +- Calendar navigation buttons in RTL context. +- Export `IgcComboChangeEventArgs` type. +- Combo value and selection states with lazy data binding. +- Various style and theming fixes and adjustments. + +### **{PackageCommonVerChanges-4.4.0}** + +#### Added +- The following components are now Form Associated Custom Elements. They are automatically associated with a parent `
` + and behave like a browser-provided control: + - `Button` & `IconButton` + - `Checkbox` + - `Combo` + - `DateTimeInput` + - `Input` + - `MaskInput` + - `Radio` + - `Rating` + - Single `Slider` + - `Select` + - `Switch` +- `Stepper` now supports animations. + +#### Changed +- `Rating` fluent theme colors. +- `Stepper` indicator styles and color schemas. + +#### Deprecated +- `IgcForm` component is deprecated. +- `Input`: + - `minlength` property is deprecated and will be removed in the next major version. Use `minLength` instead. + - `maxlength` property is deprecated and will be removed in the next major version. Use `maxLength` instead. + - `readonly` property is deprecated and will be removed in the next major version. Use `readOnly` instead. +- `MaskInput`: + - `readonly` property is deprecated and will be removed in the next major version. Use `readOnly` instead. +- `DateTimeInput`: + - `readonly` property is deprecated and will be removed in the next major version. Use `readOnly` instead. + - `minValue` property is deprecated and will be removed in the next major version. Use `min` instead. + - `maxValue` property is deprecated and will be removed in the next major version. Use `max` instead. +- `Rating`: + - `readonly` property is deprecated and will be removed in the next major version. Use `readOnly` instead. + +#### Removed +- Removed our own `dir` attribute which shadowed the default one. This is a **non-breaking change**. +- `Slider` - `ariaLabel` shadowed property. This is a **non-breaking change**. +- `Checkbox` - `ariaLabelledBy` shadowed attribute. This is a **non-breaking change**. +- `Switch` - `ariaLabelledBy` shadowed attribute. This is a **non-breaking change**. +- `Radio` - `ariaLabelledBy` shadowed attribute. This is a **non-breaking change**. + +#### Fixed +- `Input` - outlined variant styling issues and indigo theme issues. +- `Select` - outlined variant styling issues +- `DateTimeInput` - `spinUp/spinDown` calls moving the caret when the input is focused. + +### **{PackageCommonVerChanges-4.3.1}** + +#### Added +- `Tree` - component animations. +- Components border radius is consumed from their schemas. + +#### Changed +- `Combo`, `Input`, `Select` - schema colors. +- `Dropdown` - schema colors. +- `Icon` - updated theming styles and size. + +#### Fixed +- `Combo` - single selection not working in certain scenarios. +- `Dropdown` - various styling fixes. +- `IconButton` - border radius with ripple. +- `IconButton` - fixed wrong color in Fluent theme. +- `Input` - various styling fixes. +- `TreeItem` - assign closest *igc-tree-item* ancestor as a parent. +- `Tabs` - internal **hidden** styles and custom display property. + +### **{PackageCommonVerChanges-4.3.0}** + +#### Added +- `Combo`: + - `matchDiacritics` to the filtering options property. Defaults to **false**. If set to **true** the filter distinguishes between accented letters and their base letters. Otherwise strings are normalized and then matched. + - `selection` property which returns the current selection as an array of data objects. +- `Card`: Support explicit height +- `Dialog`: Added animations +- `Snackbar`: Added animations +- `Toast`: Added animations + +#### Changed +- `Combo`: + - `value` is no longer readonly and can be explicitly set. The value attribute also supports declarative binding, + accepting a valid JSON stringified array. + - `value` type changed from `string[]` to `ComboValue[]` where + ```ts + ComboValue = T | T[keyof T] + ``` + - `igcChange` event object properties are also changed to reflect the new `value` type: + ```typescript + interface IgcComboChangeEventArgs { + newValue: ComboValue[]; + items: T[]; + type: ComboChangeType; + } + ``` + +#### Deprecated +- `Select`: Deprecated `sameWidth`, `positionStrategy` and `flip`. They will be removed in the next major release. + +#### Fixed +- `Select`: `prefix`/`suffix`/`helper-text` slots not being rendered. +- `Tabs`: Nested tabs selection. +- `Dialog`: Backdrop doesn't overlay elements. +- `Dropdown`: Listbox position on initial open state. +- `Stepper`: Stretch vertically in parent container. +- `Navbar`: Wrong colors in fluent theme. +- Animation player throws errors when height is unspecified. +- `DateTimeInput`: Intl.DateTimeFormat issues in Chromium based browsers. + +### **{PackageCommonVerChanges-4.2.3}** + +#### Deprecated +- `Dialog` - Property `closeOnEscape` is deprecated in favor of new property `keepOpenOnEscape`. + +#### Fixed +- `Radio`- colors in selected focus state. +- `IconButton` - set icon size to match other design system products. +- `Chip` - removed outline styles for Fluent and Material themes. +- `Calendar` - navigation to date on set value. +- `Tabs` - not taking the full height of their parents. + +### **{PackageCommonVerChanges-4.2.2}** + +#### Deprecated +- `Button` - The `prefix`/`suffix` slots are no longer needed and will be removed in the next major release. + +#### Fixed +- `Button` - UI inconsistencies. +- `Calendar` - Fluent theme inconsistencies. +- `Combo` - Selection via API doesn't work on a searched list. +- `Dialog` - Fluent theme inconsistency. +- `Input` - UI inconsistencies. +- `Toast` - Fluent theme inconsistency. +- Components missing in defineAllComponents. +- Wrong host sizes for `Avatar`, `Badge`, `Button` and `IconButton`. + +### **{PackageCommonVerChanges-4.2.1}** + +#### Fixed +- `Combo` - Matching item not activated on filtering in single selection mode. + +### **{PackageCommonVerChanges-4.2.0}** + +#### Added +- `Combo` - Single Selection mode via the `single-select` attribute. + +#### Fixed +- `Input` - UI inconsistencies. +- `Badge` - Doesn't correctly render `igc-icon` and font icons. +- `Radio` - UI inconsistencies. +- `NavDrawer` - Can't override item margin. + +### **{PackageCommonVerChanges-4.1.1}** + +#### Fixed +- `Input` + - position label based on component size. + - material themes don't match design. + - do not cache the underlying input. +- Card - color discrepancy between WC and Angular. +- Theme - update stale `--igc-*` variables to `--ig-*`. +- Removed dangling references after element disconnect. + +### **{PackageCommonVerChanges-4.1.0}** + +#### Added +- New [Stepper](layouts/stepper.md) component. +- New [Combo](inputs/combo/overview.md) component. +- `MaskInput` - Skip literal positions when deleting symbols in the component + +#### Fixed +- `MaskInput` - Validation state on user input. + +### **{PackageCommonVerChanges-4.0.0}** + +#### Changed +- Themes + - Build - Utilize [Ignite UI Theming](https://github.com/IgniteUI/igniteui-theming) package when building themes. + - Sizing - Introduced CSS variables that allow runtime CSS configuration of the size for all or individual components. + - Spacing - Introduced CSS variables that allow runtime CSS configuration of the internal spacing (padding/margin) of components. + - Scrollbars - Added the ability to style application-level scrollbars by setting the `ig-scrollbar` CSS class on any element. + +### **{PackageCommonVerChanges-3.4.2}** + +#### Fixed +- Resolved importing error for `DateRangeType`. + +### **{PackageCommonVerChanges-3.4.1}** + +#### Changed +- `Slider` - updated theme with the latest fluent spec. +- `Calendar` - updated weekend days color. + +#### Fixed +- `Tabs` `selected` attribute breaks content visibility on init. + +### **{PackageCommonVerChanges-3.4.0}** + +#### Added +- New [Dialog](notifications/dialog.md) component. +- New [Select](inputs/select.md) component. + +#### Fixed +- `Calendar` - range selection a11y improvements. +- `RangeSlider` - a11y improvements for choosing range values. +- `Rating` - improved a11y with assistive software now reading the total number of items. +- `Toast` - added `role="alert"` to the message container for assistive software to read it without the need of focusing. +- `Chip` - made remove button accessible with the keyboard. +- `Button` `prefix`/`suffix` does not align icons to the button text. + +### **{PackageCommonVerChanges-3.3.1}** + +#### Changed +- `Tree` - Removed theme-specified height. + +#### Fixed +- `Dropdown` - Dispose of top-level event listeners. +- `LinearProgress` - Indeterminate animation in Safari. +- `RadioGroup` - Child radio components auto-registration. + +### **{PackageCommonVerChanges-3.3.0}** + +#### Added +- New [DateTimeInput](inputs/date-time-input.md) component. +- New [Tabs](layouts/tabs.md) component. +- New [Accordion](layouts/accordion.md) component. +- Typography styles in themes. + +#### Changed +- `Rating` - Added support for single selection and empty symbols. +- `Slider` - Improved slider steps rendering. +- Components will now auto register their dependencies when they are registered in `defineComponents` + +```typescript +import { IgcDropdownComponent, defineComponents } from 'igniteui-webcomponents'; +// will automatically register the dropdown item & group elements +// as well as their dependencies if any +defineComponents(IgcDropdownComponent); +``` + +Check the official [documentation](https://www.infragistics.com/products/ignite-ui-web-components/web-components/componentsgeneral-getting-started) for more information. -### {PackageGrids} (Pivot Grid) +#### Fixed +- Remove input helper text container when it is empty. +- `Icon` not showing in Safari. +- `Checkbox` not showing in Safari. +- `Button` stretches correctly in flex containers. +- Various theming issues. +- `Dropdown` - bug fixes and improvements. -* The `IgcPivotDateDimension` properties `InBaseDimension` and `InOption` have been deprecated and renamed to `BaseDimension` and `Options` respectively. +### **{PackageCommonVerChanges-3.2.0}** -### {PackageDockManager} (DockManager) +#### Added +- New [MaskInput](inputs/mask-input.md) component. +- New [ExpansionPanel](layouts/expansion-panel.md) component. +- New [Tree](grids/tree.md) component. +- `Rating` - Added `selected` CSS part and exposed CSS variable to control symbol sizes. +- `IconButton` - Allow slotted content. -* [Dock Manager's](layouts/dock-manager.md) Panes collection now has a protected setter; requires you to call Add rather than set panes in a nested structure when creating them. +#### Fixed +- `NavDrawer` - Various styles fixes. +- Buttons - Vertical align and focus management. +- `Input` - Overflow for `suffix`/`prefix`. +- `Switch` - Collapse with small sizes. +- `List` - Overflow behavior. -## **{PackageVerChanges-22-2.1}** +### **{PackageCommonVerChanges-3.1.0}** -### New Components +#### Added +- `Chip`: Added `prefix` and `suffix` slots. +- `Snackbar`: Added `toggle` method. -* [Accordion](layouts/accordion.md) -* [Combo Box](inputs/combo/overview.md) -* [Expansion Panel](layouts/expansion-panel.md) -* [Pivot Grid](grids/pivot-grid/overview.md) -* [Stepper](layouts/stepper.md) -* [Tabs](layouts/tabs.md) +#### Deprecated +- `Chip`: Previously exposed `start` and `end` slots are replaced by `prefix` and `suffix`. They remain active, but are now deprecated and will be removed in a future version. -## **{PackageVerChanges-22-2}** +#### Fixed +- `Chip`: + - Auto load internal icons. + - Selected chip is misaligned. +- Package: ESM internal import paths. -### New Components +### **{PackageCommonVerChanges-3.0.0}** -* [Grid](grids/data-grid.md) -* [Tree Grid](grids/tree-grid/overview.md) +#### Changed +- **Breaking Change**: All dropdown related classes renamed from `IgcDropDown*` to `IgcDropdown*` -### {PackageCharts} +### **{PackageCommonVerChanges-2.2.0}** + +#### Added +- New [DropDown](inputs/dropdown.md) component. +- `Calendar`: Active date can be set via an attribute. + +### **{PackageCommonVerChanges-2.1.1}** + +#### Added +- Control border radius and elevation from `--igc-radius-factor` and `--igc-elevation-factor`: + +Example: + +```css +/* Make all components square and remove all shadows */ +:root { + --igc-radius-factor: 0; + --igc-elevation-factor: 0; +} +``` + +### **{PackageCommonVerChanges-2.1.0}** + +#### Added +- New [LinearProgress](inputs/linear-progress.md) component. +- New [CircularProgress](inputs/circular-progress.md) component. +- New [Chip](inputs/chip.md) component. +- New [Snackbar](notifications/snackbar.md) component. +- New [Toast](notifications/toast.md) component. +- New [Rating](inputs/rating.md) component. +- Component themes can be changed at runtime by calling the `configureTheme(theme: Theme)` function + +### **{PackageCommonVerChanges-2.0.0}** + +#### Added +- Dark Themes +- New [Slider](inputs/slider.md) component. +- New [RangeSlider](inputs/slider.md) component. +- Support `required` property in `Radio` component. + +#### Changed +- Fix checkbox/switch validity status +- Split `Calendar`'s `value: Date | Date[]` property into two properties - `value: Date` and `values: Date[]` +- Replaced `Calendar`'s `hasHeader` property & `has-header` attribute with `hideHeader` & `hide-header` respectively. +- Replaced `Card`'s `outlined` property with `elevated`. + +#### Removed +- Removed `igcOpening`, `igcOpened`, `igcClosing` and `igcClosed` events from `NavDrawer` component. + +### **{PackageCommonVerChanges-1.0.0}** + +Initial release of Ignite UI Web Components + +#### Added +- [Avatar](layouts/avatar.md) component +- [Badge](inputs/badge.md) component +- [Button](inputs/button.md) component +- [Calendar](scheduling/calendar.md) component +- [Card](layouts/card.md) component +- [Checkbox](inputs/checkbox.md) component +- Form component +- [Icon](layouts/icon.md) component +- [IconButton](inputs/icon-button.md) component +- [Input](inputs/input.md) component +- [List](grids/list.md) component +- [Navigation bar](menus/navbar.md) component +- [Navigation drawer](menus/navigation-drawer.md) component +- [Radio group](inputs/radio.md) component +- [Radio](inputs/radio.md) component +- [Ripple](inputs/ripple.md) component +- [Switch](inputs/switch.md) component + + +## {PackageCharts} + +### **{PackageVerChanges-24-1-JUN}** + +* [Data Legend Grouping](charts/features/chart-data-legend.md#{PlatformLower}-data-legend-grouping) & [Data Tooltip Grouping](charts/features/chart-data-tooltip.md#{PlatformLower}-data-tooltip-grouping-for-data-chart) - New grouping feature added. The property `GroupRowVisible` toggles grouping with each series opting in can assign group text via the `DataLegendGroup` property. If the same value is applied to more than one series then they will appear grouped. Useful for large datasets that need to be categorized and organized for all users. + +- [Chart Selection](charts/features/chart-data-selection.md) - New series selection styling. This is adopted broadly across all category, financial and radial series for `CategoryChart` and `XamDataChart`. Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a particular dataitem. Also `SelectedSeriesItemsChanged` event and `SelectedSeriesItems` are available for additional help to build out robust business requirements surrounding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection. + +- [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the `XamDataChart`, to enable creating pie charts in the allowing robust visualizations using all the added power of the data chart. + +- [Treemap Highlighting](charts/types/treemap-chart.md#{PlatformLower}-treemap-highlighting) - 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. + +- [Treemap Percent-based Highlighting](charts/types/treemap-chart.md#{PlatformLower}-treemap-percent-based-highlighting) - New percent-based highlighting, allowing nodes to represent progress or subset of a collection. The appearance is shown as a fill-in of its backcolor up to a specific value either by a member on your data item or by supplying a new `HighlightedItemsSource`. Can be toggled via `HighlightedValuesDisplayMode` and styled via `FillBrushes`. + +- `Toolbar` - New `IsHighlighted` option for ToolAction for outlining a border around specific tools of choice. + +### **{PackageVerChanges-23-2-MAR}** + + - 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. + +### **{PackageVerChanges-23-2-JAN}** + +* [Chart Highlight Filter](charts/features/chart-highlight-filter.md) - The `CategoryChart` and `XamDataChart` now expose a way to highlight and animate in and out of a subset of data. The display of this highlight depends on the series type. For column and area series, the subset will be shown on top of the total set of data where the subset will be colored by the actual brush of the series, and the total set will have a reduced opacity. For line series, the subset will be shown as a dotted line. + +### **{PackageVerChanges-23-2}** + +- [Toolbar](menus/toolbar.md) - Beta: + - Save tool action has been added to save the chart to an image via the clipboard. + - Vertical orientation has been added via the toolbar's `Orientation` property. By default the toolbar is horizontal, now the toolbar can be shown in vertical orientation where the tools will popup to the left/right respectfully. + - Custom SVG icons support was added via the toolbar's `renderImageFromText` method, further enhancing custom tool creation. + +### **{PackageVerChanges-23-1}** + +- New [Toolbar](menus/toolbar.md) - Beta component. This component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tool items when linked to our `XamDataChart` or `CategoryChart` components. You'll be able to create custom tools for your project allowing end users to provide changes, offering an endless amount of customization. + +- [ValueLayer](charts/features/chart-overlays.md#{PlatformLower}-value-layer) - A new series type named the `ValueLayer` is now exposed which can allow you to render an overlay for different focal points of the plotted data such as Maximum, Minimum, and Average. This is applied to the `CategoryChart` and `FinancialChart` by adding to the new `ValueLines` collection. + +- It is now possible to apply a **dash array** to the different parts of the series of the `XamDataChart`. You can apply this to the [series](charts/types/line-chart.md#{PlatformLower}-styling-line-chart) plotted in the chart, the [gridlines](charts/features/chart-axis-gridlines.md#{PlatformLower}-axis-gridlines-properties) of the chart, and the [trendlines](charts/features/chart-trendlines.md#{PlatformLower}-chart-trendlines-dash-array-example) of the series plotted in the chart. + +### **{PackageVerChanges-22-2}** Added significant improvements to default behaviors, and refined the Category Chart API to make it easier to use. These new chart improvements include: @@ -172,15 +814,8 @@ Added significant improvements to default behaviors, and refined the Category Ch > [!Note] [Chart Aggregation](charts/features/chart-data-aggregations.md) will not work when using `IncludedProperties` | `ExcludedProperties`. These properties on the chart are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render. The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection. -### {PackageGrids} (Data Grid) - -* Changed **{IgPrefix}Column** to `DataGridColumn` -* Changed **GridCellEventArgs** to `DataGridCellEventArgs` -* Changed **GridSelectionMode** to `DataGridSelectionMode` -* Changed **SummaryOperand** to `DataSourceSummaryOperand` -## **{PackageVerChanges-22-1}** -### {PackageCharts} +### **{PackageVerChanges-22-1}** * Added the highly-configurable [DataLegend](charts/features/chart-data-legend.md) component, which works much like the `Legend`, but it shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values. * Added the highly-configurable [DataToolTip](charts/features/chart-data-tooltip.md) which displays values and titles of series as well as legend badges of series in a tooltip. This is now the default tooltip for all chart types. @@ -197,103 +832,11 @@ Added significant improvements to default behaviors, and refined the Category Ch * New `XAxisMaximumGap`, determines the maximum allowed value for the plotted series when using `XAxisGap`. The gap determines the amount of space between columns or bars of plotted series. * New `XAxisMinimumGapSize`, determines the minimum allowed pixel-based value for the plotted series when using `XAxisGap` to ensure there is always some spacing between each category. -### {PackageGrids} (Data Grid) - -Added New Feature - [Row Paging](grids/data-grid/row-paging.md) which is used to split a large set of data into a sequence of pages that have similar content. With pagination, data can be displayed in a set number of rows, letting users “scroll” through their data, without needing a scroll bar. The UI for table pagination usually includes things like the current page, total pages, and clickable Previous and Next arrows/buttons that let users flip through the pages of data. - -### New Components - -* [Chip](inputs/chip.md) -* [Circular Progress](inputs/circular-progress.md) -* [Linear Progress](inputs/linear-progress.md) -* [Drop Down](inputs/dropdown.md) -* [Slider & Range Slider](inputs/slider.md) -* [Snackbar](notifications/snackbar.md) -* [Toast](notifications/toast.md) - -
- -## **2.0.0** -### {PackageComponents} -#### New Components & Themes - -These are related only in the **{PackageComponents}** package. - -* Added [Slider](inputs/slider.md) -* Added [Range Slider](inputs/slider.md) -* Added Dark Theme which change structure of previous themes from: -`igniteui-webcomponents/themes/bootstrap.css` -to: -`igniteui-webcomponents/themes/light/bootstrap.css` for light theme -`igniteui-webcomponents/themes/dark/bootstrap.css` for Dark theme - -#### Major changes - -This release introduces few major changes in the API of the Calendar, Card, Navigation Drawer and Radio components. - -* Added a feature to support `required` property in Radio component. -* Breaking Changes: - * Split Calendar component's **value: Date | Date[]** property into two properties - `value`: Date and `values`: Date[]. - * Replaced Calendar component's **hasHeader** property & **has-header** attribute with `hideHeader` & `hide-header` respectively. - * Replaced Card component's **outlined** property with `elevated`. - * Removed **igcOpening**, **igcOpened**, **igcClosing** and **igcClosed** events from Navigation drawer component. - -
- -## **{PackageVerChanges-21-2.1}** - -### {PackageGrids} (Data Grid) - -#### Data Grid -- Added `ValueMultiField`, of type string[], in the `ComboBoxColumn` to be used when your items in the drop down contain a key that consists of multiple fields. - -> [!Note] -> The following breaking changes were introduced - -- Changed `ValueField` property from type string[] to string. - -### {PackageInputs} - -#### Date Picker -- Changed ValueChanged event to `SelectedValueChanged`. - -#### Multi-Column ComboBox -- Changed `TextChanged` event to `TextValueChanged`. -- Changed `ValueChanged` event to `SelectedValueChanged`. - -
- -## **1.0.0** -### {PackageComponents} -#### New Components - -These are related only in the **{PackageComponents}** package. - -* [Avatar](layouts/avatar.md) -* [Badge](inputs/badge.md) -* [Button & Icon Button](inputs/button.md) -* [Calendar](scheduling/calendar.md) -* [Card](layouts/card.md) -* [Checkbox](inputs/checkbox.md) -* [Form](inputs/form.md) -* [Icon](layouts/icon.md) -* [Input](inputs/input.md) -* [List](grids/list.md) -* [Navigation Bar](menus/navbar.md) -* [Navigation Drawer](menus/navigation-drawer.md) -* [Radio & Radio Group](inputs/radio.md) -* [Ripple](inputs/ripple.md) -* [Switch](inputs/switch.md) - -
- -## **{PackageVerChanges-21-2}** +### **{PackageVerChanges-21-2}** > [!Note] > Please ensure package "lit-html": "^2.0.0" or newer is added to your project for optimal compatibility. -### {PackageCharts} (Charts) - This release introduces a few improvements and simplifications to visual design and configuration options for the geographic map and all chart components. * Changed `YAxisLabelLocation` property's type to **YAxisLabelLocation** from **AxisLabelLocation** in `FinancialChart` and `CategoryChart` @@ -325,26 +868,7 @@ This release introduces a few improvements and simplifications to visual design | -------------------- | ------------------- | | #8BDC5C
#8B5BB1
#6DB1FF
#F8A15F
#EE5879
#735656
#F7D262
#8CE7D9
#E051A9
#A8A8B7 | #8BDC5C
#8961A9
#6DB1FF
#82E9D9
#EA3C63
#735656
#F8CE4F
#A8A8B7
#E051A9
#FF903B
| -
- -### {PackageGrids} (Data Grid) - -* New Features Added: - - [Filter Row](grids/data-grid/column-filtering.md) - - [Load/Save Layout Customizations](grids/data-grid/load-save-layout.md) - - [GroupBy Area for column grouping](grids/data-grid/row-grouping.md) - - [Cell Merging](grids/data-grid/cell-merging.md) -* New API: - - Added `SelectionChanged` event. Used to detect changes on selection interactions - e.g. Multiple row selection. -* Breaking Changes: - - Changed grid's SummaryScope property's type to SummaryScope from `DataSourceSummaryScope` - - Changed GroupHeaderDisplayMode property's type to GroupHeaderDisplayMode from `DataSourceSectionHeaderDisplayMode` - -
- -## **{PackageVerChanges-21-1}** -### {PackageCharts} (Charts) +### **{PackageVerChanges-21-1}** This release introduces several new and improved visual design and configuration options for all of the chart components, e.g. `XamDataChart`, `CategoryChart`, and `FinancialChart`. @@ -395,105 +919,73 @@ for example: * Added horizontal `Orientation` property to ItemLegend that can be used with Bubble, Donut, and Pie Chart * Added `LegendHighlightingMode` property - Enables series highlighting when hovering over legend items -### {PackageMaps} (GeoMap) - -> [!Note] -> These features are CTP -* Added support for wrap around display of the map (scroll infinitely horizontally) -* Added support for shifting display of some map series while wrapping around the coordinate origin -* Added support for highlighting of the shape series -* Added support for some annotation layers for the shape series +## {PackageInputs} -
+### **{PackageVerChanges-22-2.2}** -### {PackageGrids} +* `IgcDateTimeInput`, the StepDownAsync(DateTimeInputDatePart.Date, SpinDelta.Date) is now trimmed down to DatePart instead of DateTimeInputDatePart +* `IgcRadio` and `IgcRadioGroup`, added component validation along with styles for invalid state +* `IgcMask`, added the capability to escape mask pattern literals. +* `IgcBadge` added a `Shape` property that controls the shape of the badge and can be either `Square` or `Rounded`. The default shape of the badge is rounded. +* `IgcAvatar`, the `RoundShape` property has been deprecated and will be removed in a future version. Users can control the shape of the avatar by the newly added `Shape` attribute that can be `Square`, `Rounded` or `Circle`. The default shape of the avatar is `Square`. -* Added `EditOnKeyPress` aka Excel-style Editing, instantly begin editing when typing. -* Added `EditModeClickAction` property - By default double-clicking is required to enter edit mode. This can be set to `SingleClick` to allow for edit mode to occur when selecting a new cell. -* Added `EnterKeyBehaviors` property - aka Excel-style Navigation (Enter Behavior) – controls the behavior of the enter key, e.g. Options are (none, edit, move up, down, left, right) -* Added `EnterKeyBehaviorAfterEdit` property - While in edit-mode, this property controls when enter is pressed, e.g. Options are (moves to the cell below, above, right, left) -* Added `SelectAllRows` - method. -* Added Row Range Selection - With `GridSelectionMode` property set to MultipleRow the following new functionality is now included: - - Click and drag to select rows - - Shift and click to select multiple rows. - - Shift and press the up/down arrow keys to select multiple rows. -* Pressing space bar toggles selection of active row via `GridSelectionMode` property set to MultipleRow or SingleRow -* Added Column Summaries to Column Options Dialog. +### **{PackageVerChanges-21-2.1}** -### {PackageInputs} +- Date Picker: + * Changed ValueChanged event to `SelectedValueChanged`. +- Multi-Column ComboBox: + * Changed `TextChanged` event to `TextValueChanged`. + * Changed `ValueChanged` event to `SelectedValueChanged`. -#### Date Picker +### **{PackageVerChanges-21-1}** -* `ShowTodayButton` - Toggles Today button visibility -* `Label` - Adds a label above the date value -* `Placeholder` property - adds custom text when no value is selected -* `FormatString` - Customize input date string e.g. (`yyyy-MM-dd`) -* `DateFormat` - Specifies whether to display selected dates as LongDate or ShortDate -* `FirstDayOfWeek` - Specifies first day of week -* `FirstWeekOfYear` - Specifies when to display first week of the year, e.g. (First Full Week, First Four day Week) -* `ShowWeekNumbers` - Toggles Week number visibility -* `MinDate` & `MaxDate` - Date limits, specifying a range of available selectable dates. -* Added Accessibility +- Date Picker: + - `ShowTodayButton` - Toggles Today button visibility + - `Label` - Adds a label above the date value + - `Placeholder` property - adds custom text when no value is selected + - `FormatString` - Customize input date string e.g. (`yyyy-MM-dd`) + - `DateFormat` - Specifies whether to display selected dates as LongDate or ShortDate + - `FirstDayOfWeek` - Specifies first day of week + - `FirstWeekOfYear` - Specifies when to display first week of the year, e.g. (First Full Week, First Four day Week) + - `ShowWeekNumbers` - Toggles Week number visibility + - `MinDate` & `MaxDate` - Date limits, specifying a range of available selectable dates. + - Added Accessibility -
-## **{PackageVerChangedFields}** +## {PackageMaps} -### {PackageGrids} (Data Grid) +### **{PackageVerChanges-21-1}** > [!Note] -> These breaking changes were introduce in the grid package. - -- Changed name of PropertyPath - -The data grid component property `propertyPath` has been renamed to `field`. This applies to all Column types, GroupDescription, SortDescription & SummaryDescription. - -```html - -``` - -```ts -import { IgcColumnSummaryDescription, IgcColumnSortDescription, IgcColumnGroupDescription} from 'igniteui-webcomponents-grids' -const productCount = new IgcColumnSummaryDescription(); -productCount.field = "ProductName"; -const colSortDesc = new IgcColumnSortDescription(); -colSortDesc.field = "UnitsInStock"; -const income = new IgcColumnGroupDescription(); -income.field = "Income"; -``` - -## **{PackageVerRenamedGrid}** - -### {PackageGrids} (Data Grid) - -- Changed Name of Live Grid - -The data grid component and it's corresponding module's names have changed from "LiveGrid" to "DataGrid". +> These features are CTP -> [!Note] -> These breaking changes were introduce in these packages and components only: +* Added support for wrap around display of the map (scroll infinitely horizontally) +* Added support for shifting display of some map series while wrapping around the coordinate origin +* Added support for highlighting of the shape series +* Added support for some annotation layers for the shape series -The new code for importing the grid and it's corresponding module is: -```ts -import { IgcDataGrid } from "igniteui-webcomponents-grids"; -import { IgcDataGridModule } from 'igniteui-webcomponents-grids'; -``` +## {PackageGauges} -- Required Peer Dependency for Data Grid +### **{PackageVerChanges-24-1-JUN}** -The data grid component requires the "inputs" package. +- `XamRadialGauge` + - New label for the highlight needle. `HighlightLabelText` and `HighlightLabelSnapsToNeedlePivot` and many other styling related properties for the HighlightLabel were added. -```ts -**npm install --save {PackageInputs}** -``` - +### **{PackageVerChanges-23-2-MAR}** -
+- `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. - -## **{PackageVerChangedImports}** +## **gauges/charts/maps/grids** +### **{PackageVerChangedImports}** - Changed Import Statements @@ -569,3 +1061,254 @@ import { IgcGeographicMapModule } from "igniteui-webcomponents-maps/ES5/igc-geog import { IgcLiveGridModule } from 'igniteui-webcomponents-grids/ES5/igc-live-grid-module'; import { IgcLiveGridComponent } from 'igniteui-webcomponents-grids/ES5/igc-live-grid-component'; ``` + +## {PackageDockManager} + +### **{PackageDockManagerVerChanges-1.14.4}** + +#### Deprecated +- `SplitPane` `IsMaximized` is deprecated. Having isMaximized set to true on a split pane level has no real effect as split panes serve as containers only, meaning they have no actual content to be shown maximized. Use the `IsMaximized` property of `TabGroupPane` and/or `ContentPane` instead. + +### **{PackageDockManagerVerChanges-1.14.3}** + +#### Fixed +- Dock manager throws errors with Vite-based builds. +- Docking to edge in an empty root split pane throws errors. + +### **{PackageDockManagerVerChanges-1.14.2}** + +#### Fixed +- Constraining panels inside the dock manager boundaries with quick drags. + +### **{PackageDockManagerVerChanges-1.14.1}** + +#### Fixed +- Proximity dock rtl check + +### **{PackageDockManagerVerChanges-1.14.0}** + +#### New features + +- Add `showPaneHeaders` property. +- Add `proximityDock` property. +- Add `containedInBoundaries` property. + +#### Enhancements +- Add `contentId` of elements as CSS parts. + +#### Fixed +- Maximizing and unpinning panes leads to unclickable panes. +- Center dock is possible in a pane that has `AcceptsInnerDock` set to **true** if the `AllowInnerDock` of `DockManager` is set to **false**. + +### **{PackageDockManagerVerChanges-1.13.0}** + +#### New features +- Add `FocusPane` method. +- Add `AllowInnerDock` and `AcceptsInnerDock` properties. + +#### Enhancements +- Save pane maximized state in layout. + +#### Fixed +- Tab selection order is not preserved. + +#### **{PackageDockManagerVerChanges-1.12.5}** + +#### New features +- Add `paneScroll` event. + +#### Fixed +- ТabGroupPane: Pinning one of several unpinned panes results in all the panes getting pinned. +- Context menu not positioning correctly in RTL mode. +- Active pane is not retained when docking with keyboard. + +### **{PackageDockManagerVerChanges-1.12.4}** + +#### Fixed +- Active pane incorrectly set when more than one Tab Group Pane is within a Floating Pane. + +### **{PackageDockManagerVerChanges-1.12.3}** + +#### Fixed +- Error is thrown when dropping pane in a separate window. + +### **{PackageDockManagerVerChanges-1.12.2}** + +#### Enhancements +- Add `tabs-more-menu-content` and `tabs-more-menu-item` CSS parts. + +#### Fixed +- Docking indicator left/right arrows positions are reversed in RTL mode. +- Context menu not positioning correctly. +- Missing overloads for `addEventListener` and `removeEventListener`. + +### **{PackageDockManagerVerChanges-1.12.1}** + +#### Enhancements +- Include pane information in `splitterResizeStart` and `splitterResizeEnd` events. +- `DockManager` is now exported as class. + +#### Fixed +- Contents in slots with `unpinnedHeaderId` are not updated correctly. + +### **{PackageDockManagerVerChanges-1.12.0}** + +#### Fixed +- Docking not working with `allowFloating: false`. +- Flyout pane closing while active. +- Focusable elements does not receive focus. +- Navigating with pane navigator does not bring selected floating window on top. +- Event `splitterResizeStart` can't be cancelled. +- Tabs context menu not positioning correctly. + +### **{PackageDockManagerVerChanges-1.11.3}** + +#### New features +- Add `contextMenuPosition` property +- Add `selected` option for `tab-header-close-button` CSS part + +### **{PackageDockManagerVerChanges-1.11.2}** + +#### New features +- Add `hovered` option for `tab-header-close-button` CSS part + +### **{PackageDockManagerVerChanges-1.11.1}** + +#### Fixed +- CSS part fixes for `tab-header` + +### **{PackageDockManagerVerChanges-1.11.0}** + +#### New features +- Add options for `ShowHeaderIconOnHover` property for different buttons +- Add `horizontal` and `vertical` options for `splitter-handle` CSS part +- Add `header-title` CSS part +- Add `hover` option for `tab-header-close-button` CSS part in active/inactive states +- Add `paneHeaderCloseButton` and `tabHeaderCloseButton` slots + +### **{PackageDockManagerVerChanges-1.10.0}** + +#### New features +- Add `ShowHeaderIconOnHover` property. + +#### Fixed +- Active pane is not retained on float/dock. +- Splitter styles are not applied. +- `click` event on customized header buttons is not working. +- Removed erroneous dock indicators while dragging over splitter. + +### **{PackageDockManagerVerChanges-1.9.0}** + +#### Fixed +- Styles not applied. +- Resize in RTL mode. + +### **{PackageDockManagerVerChanges-1.8.0}** + +#### New features +- Customize dock manager buttons. +- `LayoutChange` event which fires when the layout updates. + +### **{PackageDockManagerVerChanges-1.7.0}** + +#### New features +- Customizable floating pane header. +- `Disabled` property per pane. +- `DocumentOnly` property which allows content pane to be docked only inside a document host. +- `AllowEmpty` property for split and tab group panes which allows displaying empty areas. +- `DisableKeyboardNavigation` property on the dock manager. + +#### Fixed +- Docking indicators appear over the currently dragged floating pane. + +### **{PackageDockManagerVerChanges-1.6.0}** + +#### New features +- Customize dock manager panes and tabs. + +#### Fixed +- A floating pane is draggable outside of the page. + +### **{PackageDockManagerVerChanges-1.5.0}** + +#### New features +- `AllowMaximize` property per pane. + +#### Fixed +- Unpinned pane is closing automatically upon clicking on its content. +- Panes selected from the overflow menu are not activated if there is an unpinned pane from the same tab group. + +### **{PackageDockManagerVerChanges-1.4.1}** + +#### Fixed +- Pane with `allowPinning: false` placed inside tab group can be unpinned. +- Normalize a maximized pane when navigating away from it via the keyboard. + +### **{PackageDockManagerVerChanges-1.4.0}** + +#### New features +- Reorder tabs without creating floating pane. +- Keyboard navigation. +- Pane navigator. +- Enable/disable floating pane resizing. +- Events for floating pane resizing. + +#### Fixed +- Select pane when activated. +- Flyout unpinned pane when activated. +- Error thrown when hosting external popup inside pane. +- Tab selection is lost with nested Dock Manager components. +- Floating pane containing panes with disabled floating and docking cannot be moved. +- Exception thrown when docking floating pane inside empty dock manager. + +### **{PackageDockManagerVerChanges-1.3.0}** + +#### New features +- More tabs menu appears when there is not enough space to display all tab headers. +- Hide pane without removing it from the layout using its `hidden` property. +- Header slot properties for tab and unpinned pane - `tabHeaderId` and `unpinnedHeaderId`. + +### **{PackageDockManagerVerChanges-1.2.0}** + +#### New features +- Active pane. +- Localization support. + +#### Fixed +- Errors thrown when dragging the last document host tab and there is unpinned pane. +- Tabs content disappears after docking a pane with `allowFloating: false`. +- Exception thrown when quickly switching between docking indicators. + +### **{PackageDockManagerVerChanges-1.1.0}** + +#### New features +- Maximizing panes. +- Docking preview shadow. +- ARIA support. +- API for external drag/drop support. +- Properties and events for user interactions such as closing, pinning, dragging. +- Support for `ng update` for Angular projects. + +### **{PackageDockManagerVerChanges-1.0.3}** + +#### Enhancements +- Resize splitter using the keyboard. + +### **{PackageDockManagerVerChanges-1.0.2}** + +#### Fixed +- Pane goes out of view when resized to its minimum size. + +### **{PackageDockManagerVerChanges-1.0.1}** + +#### Enhancements +- Add active color css variable. +- Add keyboard support for context menu. + +#### Fixed +- Selection is not working on first click when context menu is opened. +- Single tab is not rendered correctly after pinning/unpinning its sibling. + +### **{PackageDockManagerVerChanges-1.0.0}** + +Initial release of Ignite UI Dock Manager. \ No newline at end of file diff --git a/doc/en/components/general-changelog-dv.md b/doc/en/components/general-changelog-dv.md index c652d3555..0a3c0395c 100644 --- a/doc/en/components/general-changelog-dv.md +++ b/doc/en/components/general-changelog-dv.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", "XamRadialGauge", "XamRadialChart", "Toolbar"] +mentionedTypes: ["SeriesViewer", "XYChart", "DomainChart", "XamDataChart", "Toolbar", "XamGeographicMap", "DatePicker", "DataPieChart", "MultiColumnComboBox", "CategoryChart", "CrosshairLayer", "FinalValueLayer", "CalloutLayer", "DataLegend", "XamRadialGauge", "XamRadialChart", "Toolbar"] namespace: Infragistics.Controls.Charts --- # {ProductName} Changelog @@ -13,7 +13,46 @@ All notable changes for each version of {ProductName} are documented on this pag > This topic discusses changes only for components that are not included in the {PackageAngularComponents} package. > For changes specific to igniteui-angular components, please see CHANGELOG.MD. -* [Ignite UI for Angular Changelog at Github](https://github.com/IgniteUI/igniteui-angular/blob/master/CHANGELOG.md) +* [Ignite UI for Angular CHANGELOG.md at Github](https://github.com/IgniteUI/igniteui-angular/blob/master) + +## **{PackageVerChanges-24-1-SEP}** + +- [Data Pie Chart](charts/types/data-pie-chart.md) - The `DataPieChart` is a new component that renders a pie chart. This component works similarly to the `CategoryChart`, in that it will automatically detect the properties on your underlying data model while allowing selection, highlighting, animation and legend support via the ItemLegend component. + +- [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the `XamDataChart`, to enable creating pie charts in the allowing robust visualizations using all the added power of the data chart. + +- `Toolbar` + + - New ToolActionCheckboxList + A new CheckboxList ToolAction that displays a collection of items with checkboxes for selecting. A grid inside ToolAction CheckboxList grows in height up to 5 items, then a scrollbar is displayed. + + - New Filtering Support + + - Axis Field Changes + New default IconMenu in Toolbar when targeting CategoryChart. + Label fields are mapped to the X-axis and Value fields are mapped to the Y-axis. + Target chart reacts in realtime to changes made. IconMenu is hidden when chart has no ItemsSource set. + +## **{PackageVerChanges-24-1-JUN}** + +* Angular 18 support. + +### {PackageCharts} (Charts) + +* [Data Legend Grouping](charts/features/chart-data-legend.md#{PlatformLower}-data-legend-grouping) & [Data Tooltip Grouping](charts/features/chart-data-tooltip.md#{PlatformLower}-data-tooltip-grouping-for-data-chart) - New grouping feature added. The property `GroupRowVisible` toggles grouping with each series opting in can assign group text via the `DataLegendGroup` property. If the same value is applied to more than one series then they will appear grouped. Useful for large datasets that need to be categorized and organized for all users. + +- [Chart Selection](charts/features/chart-data-selection.md) - New series selection styling. This is adopted broadly across all category, financial and radial series for `CategoryChart` and `XamDataChart`. Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a partcular dataitem. Also `SelectedSeriesItemsChanged` event and `SelectedSeriesItems` are available for additional help to build out robust business requirements surrouding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection. + +- [Treemap Highlighting](charts/types/treemap-chart.md#{PlatformLower}-treemap-highlighting) - 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. + +- [Treemap Percent-based Highlighting](charts/types/treemap-chart.md#{PlatformLower}-treemap-percent-based-highlighting) - New percent-based highlighting, allowing nodes to represent progress or subset of a collection. The appearance is shown as a fill-in of its backcolor up to a specific value either by a member on your data item or by supplying a new `HighlightedItemsSource`. Can be toggled via `HighlightedValuesDisplayMode` and styled via `FillBrushes`. + +- `Toolbar` - New `IsHighlighted` option for ToolAction for outlining a border around specific tools of choice. + +### {PackageGauges} (Gauges) + +- `XamRadialGauge` + - New label for the highlight needle. `HighlightLabelText` and `HighlightLabelSnapsToNeedlePivot` and many other styling related properties for the HighlightLabel were added. ## **{PackageVerChanges-24-1-JUN}** diff --git a/doc/en/components/grids/_shared/column-moving.md b/doc/en/components/grids/_shared/column-moving.md index 2ef1f02c1..8da150c9e 100644 --- a/doc/en/components/grids/_shared/column-moving.md +++ b/doc/en/components/grids/_shared/column-moving.md @@ -230,7 +230,6 @@ function onColumnMovingEnd(grid: IgrGridBaseDirective, event: IgrColumnMovingEve FilterMode="FilterMode.ExcelStyleFilter" AutoGenerate=true Data=northwindEmployees - DisplayDensity="DisplayDensity.Compact" Moving="true" ColumnMovingEndScript='onColumnMovingEnd'> diff --git a/doc/en/components/grids/_shared/conditional-cell-styling.md b/doc/en/components/grids/_shared/conditional-cell-styling.md index 377a6d067..17ee77ac1 100644 --- a/doc/en/components/grids/_shared/conditional-cell-styling.md +++ b/doc/en/components/grids/_shared/conditional-cell-styling.md @@ -1137,7 +1137,7 @@ function editDone(grid, evt) { * [Searching](search.md) * [Multi-column Headers](multi-column-headers.md) -* [Display Density](display-density.md) +* [Size](size.md) diff --git a/doc/en/components/grids/_shared/editing.md b/doc/en/components/grids/_shared/editing.md index 63dc43105..226dbf175 100644 --- a/doc/en/components/grids/_shared/editing.md +++ b/doc/en/components/grids/_shared/editing.md @@ -157,86 +157,15 @@ igRegisterScript("SortingHandler", SortingHandler, false); ``` - ```tsx -function onSorting(grid: IgrGridBaseDirective, event: IgrSortingEventArgs) { +function onSorting(grid: {ComponentName}, event: IgrSortingEventArgs) { grid.endEdit(true); } -<{ComponentName} data={localData} primaryKey="ProductID" sorting={onSorting}> - -``` - - - - - -```html - - -``` - - - -```html -<{ComponentSelector} id="hierarchicalGrid" primary-key="ProductID" > - -``` - -```ts -constructor() { - var hierarchicalGrid = document.getElementById('hierarchicalGrid') as {ComponentName}Component; - hierarchicalGrid.data = this.data; - hierarchicalGrid.addEventListener("sorting", this.onSorting); -} - -public onSorting(event: IgcSortingEventArgs) { - var hierarchicalGrid = document.getElementById('hierarchicalGrid') as {ComponentName}Component; - hierarchicalGrid.endEdit(true); -} -``` - - - -```typescript -public onSorting(event: ISortingEventArgs) { - this.hierarchicalGrid.endEdit(true); -} -``` - - -```razor -<{ComponentSelector} - Id="hierarchicalGrid" - SortingScript="SortingHandler" - RowEditable="true"> +<{ComponentSelector} data={localData} primaryKey="ProductID" sorting={onSorting}> - -//In JavaScript -function SortingHandler() { - hierarchicalGrid.endEdit(true); -} -igRegisterScript("SortingHandler", SortingHandler, false); -``` - - - -```tsx - - ``` - - - -```tsx -public onSorting(grid: IgrGridBaseDirective, event: IgrSortingEventArgs) { - hierarchicalGrid.endEdit(true); -} -``` - - - ## API References diff --git a/doc/en/components/grids/_shared/multi-column-headers.md b/doc/en/components/grids/_shared/multi-column-headers.md index 9fd2738bc..cf81eef09 100644 --- a/doc/en/components/grids/_shared/multi-column-headers.md +++ b/doc/en/components/grids/_shared/multi-column-headers.md @@ -115,7 +115,7 @@ The declaration of multi-column headers is achieved by wrapping a set of columns ```html - + @@ -307,7 +307,7 @@ For achieving `n-th` level of nested headers, the declaration above should be fo ```html - + @@ -471,7 +471,7 @@ Every `ColumnGroup` supports [moving](column-moving.md), [pinning](column-pinnin ```html - + diff --git a/doc/en/components/grids/_shared/paging.md b/doc/en/components/grids/_shared/paging.md index efea885d6..b6a95405c 100644 --- a/doc/en/components/grids/_shared/paging.md +++ b/doc/en/components/grids/_shared/paging.md @@ -24,9 +24,15 @@ The following example represents `{ComponentName}` pagination and exposes the op +```css +.gridSize { + --ig-size: var(--ig-size-small); +} +``` + ```html -<{ComponentSelector} #grid [data]="data" [height]="'500px'" [width]="'100%'" [displayDensity]="'cosy'"> +<{ComponentSelector} #grid class="gridSize" [data]="data" [height]="'500px'" [width]="'100%'"> @@ -34,13 +40,13 @@ The following example represents `{ComponentName}` pagination and exposes the op ```razor -<{ComponentSelector} @ref=grid Width="100%" Height="500px" Data=Data DisplayDensity="DisplayDensity.Cosy"> +<{ComponentSelector} @ref=grid Class="gridSize" Width="100%" Height="500px" Data=Data> ``` ```html -<{ComponentSelector} id="grid" height="500px" width="100%" display-density="Cosy"> +<{ComponentSelector} id="grid" class="gridSize" height="500px" width="100%" > @@ -49,7 +55,7 @@ The following example represents `{ComponentName}` pagination and exposes the op ```tsx -<{ComponentSelector} height="500px" width="100%" displayDensity="cosy"> +<{ComponentSelector} className="gridSize" height="500px" width="100%"> @@ -93,24 +99,24 @@ The `Paginator` component is used along with the `{ComponentName}` component in ```html -<{ComponentSelector} #grid [data]="data"> +<{ComponentSelector} #grid [data]="data" className="gridSize"> + [selectOptions]="selectOptions"> ``` ```razor -<{ComponentSelector} @ref=grid Data=Data DisplayDensity="DisplayDensity.Compact"> - +<{ComponentSelector} @ref=grid Data=Data className="gridSize"> + ``` ```html -<{ComponentSelector} id="grid"> +<{ComponentSelector} id="grid" className="gridSize"> @@ -125,7 +131,6 @@ constructor() { paginator.page = grid.page; paginator.totalRecords = grid.totalRecords; paginator.selectOptions = selectOptions; - paginator.displayDensity = grid.displayDensity; } ``` @@ -133,8 +138,8 @@ constructor() { ```tsx const selectOptions = [5, 15, 20, 50]; -<{ComponentSelector}> - +<{ComponentSelector} className="gridSize"> + ``` diff --git a/doc/en/components/grids/_shared/remote-data-operations.md b/doc/en/components/grids/_shared/remote-data-operations.md index 2cb8d712a..137b92ee4 100644 --- a/doc/en/components/grids/_shared/remote-data-operations.md +++ b/doc/en/components/grids/_shared/remote-data-operations.md @@ -749,7 +749,6 @@ When we define a custom paginator content we need to define the content in a way [(page)]="page" [(perPage)]="perPage" [selectOptions]="selectOptions" - [displayDensity]="grid1.displayDensity" (pageChange)="paginate($event)" (perPageChange)="perPageChange($event)"> diff --git a/doc/en/components/grids/_shared/search.md b/doc/en/components/grids/_shared/search.md index fe336ac57..5d69d9fb1 100644 --- a/doc/en/components/grids/_shared/search.md +++ b/doc/en/components/grids/_shared/search.md @@ -38,8 +38,14 @@ Let's start by creating our grid and binding it to our data. We will also add so ``` +```css +.gridSize { + --ig-size: var(--ig-size-small); +} +``` + ```razor -<{ComponentSelector} @ref=grid Width="100%" Height="480px" AllowFiltering=true AutoGenerate=false Data=marketData DisplayDensity="DisplayDensity.Compact"> +<{ComponentSelector} @ref=grid Class="gridSize" Width="100%" Height="480px" AllowFiltering=true AutoGenerate=false Data=marketData> @@ -57,7 +63,7 @@ Let's start by creating our grid and binding it to our data. We will also add so ``` ```html -<{ComponentSelector} id="grid1" auto-generate="false" allow-filtering="true"> +<{ComponentSelector} id="grid1" class="gridSize" auto-generate="false" allow-filtering="true"> @@ -68,7 +74,7 @@ Let's start by creating our grid and binding it to our data. We will also add so ``` ```tsx -<{ComponentSelector} ref={gridRef} autoGenerate="false" allowFiltering="true" displayDensity="compact" data={data}> +<{ComponentSelector} ref={gridRef} className="gridSize" autoGenerate="false" allowFiltering="true" data={data}> @@ -151,6 +157,7 @@ public exactMatch: boolean = false; private searchBox: IgcInputComponent; + private searchIcon: IgcIconComponent; private clearIcon: IgcIconComponent; private nextIconButton: IgcIconButtonComponent; private prevIconButton: IgcIconButtonComponent; @@ -169,6 +176,7 @@ public bool exactMatch = false; ```tsx const gridRef = useRef(null); +const searchIconRef = useRef(null) const clearIconRef = useRef(null); const iconButtonPrevRef = useRef(null); const caseSensitiveChipRef = useRef(null); @@ -278,6 +286,7 @@ public nextSearch(){ ```tsx function handleOnSearchChange(input: IgrInput, event: IgrComponentValueChangedEventArgs) { setSearchText(event.detail); + gridRef.current.findNext(event.detail, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected); } function nextSearch() { @@ -406,15 +415,11 @@ constructor() { prevIconButton.addEventListener("click", this.prevSearch); } public prevSearch() { - const grid = document.getElementById('grid') as IgcGridComponent; - const searchBox = document.getElementById('searchBox') as IgcInputComponent; - grid.findPrev(searchBox.value, false, false); + this.grid.findPrev(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected); } public nextSearch() { - const grid = document.getElementById('grid') as IgcGridComponent; - const searchBox = document.getElementById('searchBox') as IgcInputComponent; - grid.findNext(searchBox.value, false, false); + this.grid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected); } ``` @@ -510,33 +515,26 @@ public searchKeyDown(ev) { ```html - + ``` ```typescript constructor() { - const search1 = document.getElementById('search1') as HtmlInputElement; - search1.addEventListener('keydown', this.searchKeyDown); - search1.addEventListener('change', this.findNext); + searchBox.addEventListener("keydown", (evt) => { this.onSearchKeydown(evt); }); + this.searchBox.addEventListener("igcInput", (evt) => { + this.searchIcon.name = evt.detail ? 'clear' : 'search'; + this.grid.findNext(evt.detail, this.caseSensitiveChip.selected, this.exactMatchChip.selected); + }); } -public findNext(e) { - const searchText = e.target.value; - const caseSensitive = false; - const exactMatch = false; - const grid = document.getElementById('grid') as IgcGridComponent; - grid.findNext(searchText, caseSensitive, exactMatch) -} - -public searchKeyDown(ev) { - const search1 = document.getElementById('search1') as HtmlInputElement; - const grid = document.getElementById('grid') as IgcGridComponent; - if (ev.key === 'Enter') { - ev.preventDefault(); - grid.findNext(search1.value, false, false); - } else if (ev.key === 'ArrowUp' || ev.key === 'ArrowLeft') { - ev.preventDefault(); - grid.findPrev(search1.value, false, false); +public onSearchKeydown(evt: KeyboardEvent) { + if (evt.key === 'Enter' || evt.key === 'ArrowDown') { + evt.preventDefault(); + this.grid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected); + } else if (evt.key === 'ArrowUp') { + evt.preventDefault(); + this.grid.findPrev(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected); + } } } ``` @@ -926,7 +924,7 @@ public clearSearch() { ```html - +
Case Sensitive Exact Match @@ -944,10 +942,12 @@ constructor() { const prevIconText = ""; const nextIconText = ""; const clearIconText = ""; + const searchIconText = ""; registerIconFromText("prev", prevIconText, "material"); registerIconFromText("next", nextIconText, "material"); registerIconFromText("clear", clearIconText, "material"); + registerIconFromText("search", searchIconText, "material"); } ``` @@ -959,10 +959,13 @@ const nextIconText = ""; const clearIconText = ""; + const searchIconText = + ""; useEffect(() => { - if (clearIconRef?.current) { - clearIconRef.current.registerIconFromText("clear", clearIconText, "material"); + if (searchIconRef?.current) { + searchIconRef.current.registerIconFromText("search", searchIconText, "material"); + searchIconRef.current.registerIconFromText("clear", clearIconText, "material"); } if (iconButtonPrevRef?.current) { iconButtonPrevRef.current.registerIconFromText("prev", prevIconText, "material"); @@ -974,8 +977,24 @@ useEffect(() => {
- - + {searchText.length === 0 ? ( + + ) : ( + + )}
@@ -1055,7 +1074,7 @@ const prevIconText = const nextIconText = ""; const searchIconText = - ""; +""; const clearIconText = ""; @@ -1327,17 +1346,11 @@ constructor() { ```ts public nextSearch() { - const grid = document.getElementById('grid') as IgcGridComponent; - const caseSensitiveChip = document.getElementById('caseSensitiveChip') as IgcChipComponent; - const exactMatchChip = document.getElementById('exactMatchChip') as IgcChipComponent; - grid.findNext(input.value, caseSensitiveChip.selected, exactMatchChip.selected); + this.grid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected); } public prevSearch() { - const grid = document.getElementById('grid') as IgcGridComponent; - const caseSensitiveChip = document.getElementById('caseSensitiveChip') as IgcChipComponent; - const exactMatchChip = document.getElementById('exactMatchChip') as IgcChipComponent; - grid.findPrev(input.value, caseSensitiveChip.selected, exactMatchChip.selected); + this.grid.findPrev(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected); } ``` diff --git a/doc/en/components/grids/_shared/display-density.md b/doc/en/components/grids/_shared/size.md similarity index 69% rename from doc/en/components/grids/_shared/display-density.md rename to doc/en/components/grids/_shared/size.md index 5cf46bc82..040d6d717 100644 --- a/doc/en/components/grids/_shared/display-density.md +++ b/doc/en/components/grids/_shared/size.md @@ -1,85 +1,73 @@ --- -title: {Platform} {ComponentTitle} Display Density - {ProductName} -_description: Learn how to apply display density capabilities to the {ComponentTitle} component. You can use a set of compact view options in the {ProductName}. -_keywords: material density, {Platform}, {ProductName}, Infragistics +title: {Platform} {ComponentTitle} Size - {ProductName} +_description: Learn how to apply different size capabilities to the {ComponentTitle} component. You can use a set of compact view options in the {ProductName}. +_keywords: material size, {Platform}, {ProductName}, Infragistics mentionedTypes: [{ComponentApiMembers}] sharedComponents: ["Grid", "TreeGrid", "HierarchicalGrid"] namespace: Infragistics.Controls --- -# {Platform} {ComponentTitle} Display Density +# {Platform} {ComponentTitle} Size -The {ProductName} Display Density feature in {Platform} {ComponentTitle} allows users to control the spacing and layout of data within the `{ComponentName}`. By changing [density](https://material.io/design/layout/applying-density.html), you can significantly improve the user experience when interacting with large amounts of content. They can choose from three display density options: -- Cozy -- Comfortable -- Compact +The {ProductName} Size feature in {Platform} {ComponentTitle} allows users to control the spacing and layout of data within the `{ComponentName}`. By changing `--ig-size`, you can significantly improve the user experience when interacting with large amounts of content. They can choose from three size options: +- `--ig-size-large` +- `--ig-size-medium` +- `--ig-size-small` -## {Platform} {ComponentTitle} Display Density Example +## {Platform} {ComponentTitle} Size Example -`sample="/{ComponentSample}/layout-display-density", height="620", alt="{Platform} {ComponentTitle} Display Density Example"` +`sample="/{ComponentSample}/layout-display-density", height="620", alt="{Platform} {ComponentTitle} Size Example"` ## Usage -As you can see in the demo above, the `{ComponentName}` provides three density options: **compact**, **cosy** and **comfortable**. The code snippet below shows how to set `DisplayDensity`: +As you can see in the demo above, the `{ComponentName}` provides three size options: **small**, **medium** and **large**. The code snippet below shows how to set `--ig-size` either inline or part of a CSS class: + +```css +.gridSize { + --ig-size: var(--ig-size-medium); +} +``` ```html -<{ComponentSelector} #grid [data]="data" [displayDensity]="'cosy'" > +<{ComponentSelector} #grid class="gridSize" [data]="data"> ``` ```razor -<{ComponentSelector} DisplayDensity="DisplayDensity.Cosy" Data=northwindEmployees @ref=grid> +<{ComponentSelector} Class="gridSize" Data=northwindEmployees @ref=grid> ``` ```html -<{ComponentSelector} id="grid" display-density="cosy" > +<{ComponentSelector} id="grid" class="gridSize"> ``` ```tsx -<{ComponentSelector} id="grid" displayDensity="cosy" > +<{ComponentSelector} id="grid" className="gridSize"> ``` -or - - -```typescript -this.grid.displayDensity = 'cosy'; -``` - - -```tsx -gridRef.current.displayDensity = 'cosy'; -``` - -```razor -@code { - this.grid.DisplayDensity = DisplayDensity.Cosy; -} -``` - -And now let's see in details how each option reflects on the `{ComponentName}` component. When you switch between different density options the height of each `{ComponentName}` element and the corresponding paddings will be changed. Also if you want to apply custom column `Width`, please consider the fact that it must be bigger than the sum of left and right padding. - - **comfortable** - this is the default `{ComponentName}` display density with the lowest intense and row height equal to `50px`. Left and Right paddings are `24px`; Minimal column `Width` is `80px`; - - **cosy** - this is the middle intense density with `40px` row height. Left and Right paddings are `16px`; Minimal column `Width` is `64px`; - - **compact** - this is the density with highest intense and `32px` row height. Left and Right paddings are `12px`; Minimal column `Width` is `56px`; +And now let's see in details how each option reflects on the `{ComponentName}` component. When you switch between different size options the height of each `{ComponentName}` element and the corresponding paddings will be changed. Also if you want to apply custom column `Width`, please consider the fact that it must be bigger than the sum of left and right padding. + - **large** - this is the default `{ComponentName}` size with the lowest intense and row height equal to `50px`. Left and Right paddings are `24px`; Minimal column `Width` is `80px`; + - **medium** - this is the middle intense size with `40px` row height. Left and Right paddings are `16px`; Minimal column `Width` is `64px`; + - **small** - this is the size with highest intense and `32px` row height. Left and Right paddings are `12px`; Minimal column `Width` is `56px`; > [!Note] > Please keep in mind that currently you **can not** override any of the sizes. -Let's now continue with our sample and see in action how the `DisplayDensity` is applied. Let's first add a button which will help us to switch between each density: +Let's now continue with our sample and see in action how the `--ig-size` is applied. Let's first add a button which will help us to switch between each size: ```html -
- +
+
``` @@ -93,16 +81,20 @@ Let's now continue with our sample and see in action how the `DisplayDensity` is Name="PropertyEditor" @ref="propertyEditor"> + Name="SizeEditor" + @ref="sizeEditor" + Label="Grid Size:" + ValueType="PropertyEditorValueType.EnumValue" + DropDownNames="@(new string[] { "Small", "Medium", "Large" })" + DropDownValues="@(new string[] { "Small", "Medium", "Large" })" + ChangedScript="WebGridSetGridSize">
``` ```html -
+
+ name="SizeEditor" + id="SizeEditor" + label="Grid Size:" + value-type="EnumValue" + drop-down-names="Small, Medium, Large" + drop-down-values="Small, Medium, Large">
@@ -127,8 +122,12 @@ Let's now continue with our sample and see in action how the `DisplayDensity` is isHorizontal="true" isWrappingEnabled="true"> + name="SizeEditor" + label="Grid Size:" + valueType="EnumValue" + dropDownNames={["Small", "Medium", "Large"]} + dropDownValues={["Small", "Medium", "Large"]} + changed={this.webGridSetGridSize}> ``` @@ -136,24 +135,24 @@ Let's now continue with our sample and see in action how the `DisplayDensity` is ```typescript @ViewChild(IgxButtonGroupComponent) public buttonGroup: IgxButtonGroupComponent; -public density = 'compact'; -public displayDensities; +public size = 'small'; +public sizes; public ngOnInit() { - this.displayDensities = [ + this.sizes = [ { - label: 'compact', - selected: this.density === 'compact', + label: 'small', + selected: this.size === 'small', togglable: true }, { - label: 'cosy', - selected: this.density === 'cosy', + label: 'medium', + selected: this.sie === 'medium', togglable: true }, { - label: 'comfortable', - selected: this.density === 'comfortable', + label: 'large', + selected: this.size === 'large', togglable: true } ]; @@ -170,16 +169,20 @@ public ngOnInit() { Name="PropertyEditor" @ref="propertyEditor"> + Name="SizeEditor" + @ref="sizeEditor" + Label="Grid Size:" + ValueType="PropertyEditorValueType.EnumValue" + DropDownNames="@(new string[] { "Small", "Medium", "Large" })" + DropDownValues="@(new string[] { "Small", "Medium", "Large" })" + ChangedScript="WebGridSetGridSize">
``` ```html -
+
+ name="SizeEditor" + id="SizeEditor" + label="Grid Size:" + value-type="EnumValue" + drop-down-names="Small, Medium, Large" + drop-down-values="Small, Medium, Large">
@@ -204,8 +210,12 @@ public ngOnInit() { isHorizontal="true" isWrappingEnabled="true"> + name="SizeEditor" + label="Grid Size:" + valueType="EnumValue" + dropDownNames={["Small", "Medium", "Large"]} + dropDownValues={["Small", "Medium", "Large"]} + changed={this.webGridSetGridSize}> ``` @@ -221,16 +231,20 @@ public ngOnInit() { Name="PropertyEditor" @ref="propertyEditor"> + Name="SizeEditor" + @ref="sizeEditor" + Label="Grid Size:" + ValueType="PropertyEditorValueType.EnumValue" + DropDownNames="@(new string[] { "Small", "Medium", "Large" })" + DropDownValues="@(new string[] { "Small", "Medium", "Large" })" + ChangedScript="WebGridSetGridSize">
``` ```html -
+
+ name="SizeEditor" + id="SizeEditor" + label="Grid Size:" + value-type="EnumValue" + drop-down-names="Small, Medium, Large" + drop-down-values="Small, Medium, Large">
@@ -255,8 +272,12 @@ public ngOnInit() { isHorizontal="true" isWrappingEnabled="true"> + name="SizeEditor" + label="Grid Size:" + valueType="EnumValue" + dropDownNames={["Small", "Medium", "Large"]} + dropDownValues={["Small", "Medium", "Large"]} + changed={this.webGridSetGridSize}> ``` @@ -266,10 +287,10 @@ Now we can add the markup. ```html -
- +
+
- + @@ -327,154 +348,27 @@ Now we can add the markup. AutoGenerate="false" Data="InvoicesData" AllowFiltering="true" + Id="grid" Name="grid" @ref="grid"> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
@@ -530,7 +424,7 @@ Now we can add the markup. ``` ```tsx - + @@ -573,10 +467,10 @@ Now we can add the markup. ```html -
- +
+
- @@ -620,7 +514,7 @@ Now we can add the markup. ``` ```razor - @@ -698,7 +592,7 @@ Now we can add the markup. ``` ```tsx - + @@ -726,10 +620,10 @@ Now we can add the markup. ```html -
- +
+
- + @@ -767,120 +661,36 @@ Now we can add the markup. ``` ```razor - - - - - - - - - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + - - - - - - - - - + + + + + @@ -966,16 +776,22 @@ AllowFiltering="true"> -Finally, let's provide the necessary logic in order to actually apply the density: +Finally, let's provide the necessary logic in order to actually apply the size: ```typescript -@ViewChild('grid', { read: {ComponentName} }) -public grid: {ComponentName}; +@ViewChild('grid', { read: IgxGridComponent }) +public grid: IgxGridComponent; -public selectDensity(event) { - this.density = this.displayDensities[event.index].label; +public selectSize(event: any) { + this.size = this.sizes[event.index].label; +} + + +@HostBinding('style.--ig-size') +protected get sizeStyle() { + return `var(--ig-size-${this.size})`; } ``` @@ -984,9 +800,12 @@ public selectDensity(event) { ```ts constructor() { var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent; + var sizeEditor = this.sizeEditor = document.getElementById('SizeEditor') as IgcPropertyEditorPropertyDescriptionComponent; var grid = this.grid = document.getElementById('grid') as {ComponentName}; propertyEditor.componentRenderer = this.renderer; propertyEditor.target = this.grid; + this.webGridSetGridSize = this.webGridSetGridSize.bind(this); + sizeEditor.changed = this.webGridSetGridSize; grid.data = this.data; } @@ -1000,25 +819,24 @@ public get renderer(): ComponentRenderer { } return this._componentRenderer; } + +public webGridSetGridSize(sender: any, args: IgcPropertyEditorPropertyDescriptionChangedEventArgs): void { + var newVal = (args.newValue as string).toLowerCase(); + var grid = document.getElementById("grid"); + grid.style.setProperty('--ig-size', `var(--ig-size-${newVal})`); +} ``` ```razor @code { - private Action BindElements { get; set; } - - protected override void OnAfterRender(bool firstRender) - { - var propertyEditor = this.propertyEditor; - var displayDensityEditor = this.displayDensityEditor; - var grid = this.grid; - propertyEditor.Target = this.grid; - } - - private IgbPropertyEditorPanel propertyEditor; - private IgbPropertyEditorPropertyDescription displayDensityEditor; - private {ComponentSelector} grid; + *** In JavaScript *** + igRegisterScript("WebGridSetGridSize", (sender, evtArgs) => { + var newVal = evtArgs.newValue.toLowerCase(); + var grid = document.getElementById("grid"); + grid.style.setProperty('--ig-size', `var(--ig-size-${newVal})`); + }, false); } ``` @@ -1030,7 +848,7 @@ private propertyEditorRef(r: IgrPropertyEditorPanel) { this.propertyEditor = r; this.setState({}); } -private displayDensityEditor: IgrPropertyEditorPropertyDescription +private sizeEditor: IgrPropertyEditorPropertyDescription private grid: {ComponentName} private gridRef(r: {ComponentName}) { this.grid = r; @@ -1041,6 +859,7 @@ constructor(props: any) { super(props); this.propertyEditorRef = this.propertyEditorRef.bind(this); + this.webGridSetGridSize = this.webGridSetGridSize.bind(this); this.gridRef = this.gridRef.bind(this); } @@ -1054,32 +873,40 @@ private _componentRenderer: ComponentRenderer = null; } return this._componentRenderer; } + +public webGridSetGridSize(sender: any, args: IgrPropertyEditorPropertyDescriptionChangedEventArgs): void { + var newVal = (args.newValue as string).toLowerCase(); + var grid = document.getElementById("grid"); + grid.style.setProperty('--ig-size', `var(--ig-size-${newVal})`); +} ``` -Another option that `{ComponentName}` provides for you, in order to be able to change the height of the rows in the `{ComponentName}`, is the property `RowHeight`. So let's see in action how this property affects the `{ComponentName}` layout along with the `DisplayDensity`. +Another option that `{ComponentName}` provides for you, in order to be able to change the height of the rows in the `{ComponentName}`, is the property `RowHeight`. So let's see in action how this property affects the `{ComponentName}` layout along with the `--ig-size`. Please keep in mind the following: - - `DisplayDensity` options will have no impact on row height **if there is `RowHeight` specified**. - - `DisplayDensity` will **affect all of the rest elements in the {ComponentTitle}**, as it has been described above. + - `--ig-size` CSS variable will have no impact on row height **if there is `RowHeight` specified**. + - `--ig-size` will **affect all of the rest elements in the {ComponentTitle}**, as it has been described above. We can now extend our sample and add `RowHeight` property to the `{ComponentName}`: ```html - <{ComponentSelector} #grid [data]="data" [displayDensity]="density" [rowHeight]="'80px'" width="100%" - height="550px" [allowFiltering]="true"> + <{ComponentSelector} #grid class="gridSize" width="100%" height="550px" [data]="data" [rowHeight]="'80px'" [allowFiltering]="true"> ``` ```razor - <{ComponentSelector} Width="100%" Height="100%" - @ref="grid" - AutoGenerate="true" - Data="northwindEmployees" - RowHeight="rowHeight" - DisplayDensity="@density"> + <{ComponentSelector} + @ref="grid" + Id="grid" + Class="gridSize" + Width="100%" + Height="100%" + AutoGenerate="true" + Data="northwindEmployees" + RowHeight="rowHeight"> @code { @@ -1089,15 +916,13 @@ We can now extend our sample and add `RowHeight` property to the `{ComponentName ```html - <{ComponentSelector} id="grid" display-density="cosy" row-height="80px" width="100%" - height="550px" allow-filtering="true"> + <{ComponentSelector} id="grid" class="gridSize" row-height="80px" width="100%" height="550px" allow-filtering="true"> ``` ```tsx - <{ComponentSelector} id="grid" displayDensity="cosy" rowHeight="80px" width="100%" - height="550px" allowFiltering="true"> + <{ComponentSelector} id="grid" className="gridSize" rowHeight="80px" width="100%" height="550px" allowFiltering="true"> ``` diff --git a/doc/en/components/grids/_shared/state-persistence.md b/doc/en/components/grids/_shared/state-persistence.md index 35b366ec1..817e26482 100644 --- a/doc/en/components/grids/_shared/state-persistence.md +++ b/doc/en/components/grids/_shared/state-persistence.md @@ -47,18 +47,18 @@ The {ProductName} State Persistence in {Platform} {ComponentTitle} allows develo -* `RowIslands` +* **RowIslands** * saving/restoring features for all child grids down the hierarchy -* `Sorting` -* `Filtering` -* `AdvancedFiltering` -* `Paging` -* `CellSelection` -* `RowSelection` -* `ColumnSelection` -* `RowPinning` -* `Expansion` -* `Columns` +* **Sorting** +* **Filtering** +* **AdvancedFiltering** +* **Paging** +* **CellSelection** +* **RowSelection** +* **ColumnSelection** +* **RowPinning** +* **Expansion** +* **Columns** * Multi column headers * Columns order * Column properties defined by the `IColumnState` interface. @@ -68,16 +68,29 @@ The {ProductName} State Persistence in {Platform} {ComponentTitle} allows develo + * `Sorting` * `Filtering` * `CellSelection` -* `RowSelection` * `ColumnSelection` * `Expansion` * `PivotConfiguration` * Pivot Configuration properties defined by the `IPivotConfiguration` interface. * Pivot Dimension and Value functions are restored using application level code, see [Restoring Pivot Configuration](state-persistence.md#restoring-pivot-configuration) section. * Pivot Row and Column strategies are also restored using application level code, see [Restoring Pivot Strategies](state-persistence.md#restoring-pivot-strategies) section. + + + +* `Sorting` +* `Filtering` +* `CellSelection` +* `ColumnSelection` +* `Expansion` +* `PivotConfiguration` + * Pivot Configuration properties defined by the `IPivotConfiguration` interface. + * Pivot Dimension and Value functions are restored using application level code, see [Restoring Pivot Configuration](state-persistence.md#restoring-pivot-configuration) section. + + @@ -121,6 +134,7 @@ const sortingFilteringStates: IGridState = state.getState(false, ['sorting', 'fi + ```html <{ComponentSelector} id="grid"> @@ -139,14 +153,18 @@ const stateString: string = gridState.getStateAsString(); // get the sorting and filtering expressions const sortingFilteringStates: IgcGridStateInfo = gridState.getState(['sorting', 'filtering']); ``` + + ```tsx - +<{ComponentSelector}> { gridState = ref; }}> - + ``` + + ```tsx // get an `IgrGridStateInfo` object, containing all features original state objects, as returned by the grid public API const state: IgrGridStateInfo = gridState.getState([]); @@ -157,6 +175,7 @@ const stateString: string = gridState.getStateAsString([]); // get the sorting and filtering expressions const sortingFilteringStates: IgrGridStateInfo = gridState.getState(['sorting', 'filtering']); ``` + ```razor <{ComponentSelector}> @@ -240,9 +259,11 @@ gridState.options = { cellSelection: false, sorting: false }; ``` + ```tsx ``` + ```razor gridState.Options = new IgbGridStateOptions @@ -252,7 +273,7 @@ gridState.Options = new IgbGridStateOptions }; ``` -The simple to use single-point API's allows to achieve a full state persistence functionality in just a few lines of code. **Copy paste the code from below** - it will save the grid state in the browser `SessionStorage` object every time the user leaves the current page. Whenever the user returns to main page, the grid state will be restored. No more need to configure those complex advanced filtering and sorting expressions every time to get the data you want - do it once and have the code from below do the rest for your users: +The simple to use single-point API's allows to achieve a full state persistence functionality in just a few lines of code. **Copy paste the code from below** - it will save the grid state in the browser `LocalStorage` object every time the user leaves the current page. Whenever the user returns to main page, the grid state will be restored. No more need to configure those complex advanced filtering and sorting expressions every time to get the data you want - do it once and have the code from below do the rest for your users: ```typescript @@ -315,13 +336,15 @@ public restoreGridStateString() { } ``` - + ```tsx - +<{ComponentSelector} rendered={restoreGridState}> { gridState = ref; }}> - + ``` + + ```tsx useEffect(() => { restoreGridState(); @@ -357,6 +380,8 @@ function restoreGridState() { } } ``` + + ```razor @using IgniteUI.Blazor.Controls @@ -366,12 +391,12 @@ function restoreGridState() { @inject IJSRuntime JS @inject NavigationManager Navigation - +<{ComponentSelector} Rendered="OnGridRendered"> - + @code { protected override void OnAfterRender(bool firstRender) @@ -586,7 +611,7 @@ public activeTemplate = (ctx: IgcCellTemplateContext) => { } ``` - + 2. Query the template view in the component using @ViewChild or @ViewChildren decorator. In the `ColumnInit` event handler, assign the template to the column `BodyTemplate` property: @@ -651,14 +676,47 @@ public void OnColumnInit(IgbColumnComponentEventArgs args) ``` +```html + + + +``` + +```ts + constructor() { + var grid = document.getElementById('grid') as IgcPivotGridComponent; + grid.pivotConfiguration = this.pivotConfiguration; + grid.addEventListener("valueInit", (ev:any) => this.onValueInit(ev)); + grid.addEventListener("dimensionInit", (ev:any) => this.onDimensionInit(ev)); +} +``` + +```tsx + + + +``` + ```razor -blazor snippet + + ``` > The `DimensionInit` and `ValueInit` events are emitted for each value and dimension defined in the `PivotConfiguration` property. * In the `ValueInit` event handler set all custom aggregators, formatters and styles: + ```typescript public onValueInit(value: IPivotValue) { // Needed only for custom aggregators, formatter or styles. @@ -684,13 +742,116 @@ public onValueInit(value: IPivotValue) { } } ``` + -```razor -Add blazor handling for valueInit + +```ts +public onValueInit(event: any) { + const value: IgcPivotValue = event.detail; + if (value.member === 'AmountofSale') { + value.aggregate.aggregator = this.totalSale; + value.aggregateList?.forEach((aggr: any) => { + switch (aggr.key) { + case 'SUM': + aggr.aggregator = this.totalSale; + break; + case 'MIN': + aggr.aggregator = this.totalMin; + break; + case 'MAX': + aggr.aggregator = this.totalMax; + break; + } + }); + } else if (value.member === 'Value') { + value.formatter = (value: any) => value ? '$' + parseFloat(value).toFixed(3) : undefined; + value.styles.upFontValue = (rowData: any, columnKey: any): boolean => parseFloat(rowData.aggregationValues.get(columnKey.field)) > 150 + value.styles.downFontValue = (rowData: any, columnKey: any): boolean => parseFloat(rowData.aggregationValues.get(columnKey.field)) <= 150; + } +} ``` + +```tsx + function onValueInit(s: IgrPivotGrid, event: IgrPivotValueEventArgs) { + const value: IgrPivotValueDetail = event.detail; + if (value.member === "AmountofSale") { + value.aggregate.aggregator = totalSale; + value.aggregateList?.forEach((aggr: any) => { + switch (aggr.key) { + case "SUM": + aggr.aggregator = totalSale; + break; + case "MIN": + aggr.aggregator = totalMin; + break; + case "MAX": + aggr.aggregator = totalMax; + break; + } + }); + } else if (value.member === "Value") { + value.styles.upFontValue = (rowData: any, columnKey: any): boolean => + parseFloat(rowData.aggregationValues.get(columnKey.field)) > 150; + value.styles.downFontValue = (rowData: any, columnKey: any): boolean => + parseFloat(rowData.aggregationValues.get(columnKey.field)) <= 150; + } + } +``` + +```razor +// In Javascript +const totalSale = (members, data) => { + return data.reduce((accumulator, value) => accumulator + value.ProductUnitPrice * value.NumberOfUnits, 0); +}; + +const totalMin = (members, data) => { + let min = 0; + if (data.length === 1) { + min = data[0].ProductUnitPrice * data[0].NumberOfUnits; + } else if (data.length > 1) { + const mappedData = data.map(x => x.ProductUnitPrice * x.NumberOfUnits); + min = mappedData.reduce((a, b) => Math.min(a, b)); + } + return min; +}; + +const totalMax = (members, data) => { + let max = 0; + if (data.length === 1) { + max = data[0].ProductUnitPrice * data[0].NumberOfUnits; + } else if (data.length > 1) { + const mappedData = data.map(x => x.ProductUnitPrice * x.NumberOfUnits); + max = mappedData.reduce((a, b) => Math.max(a, b)); + } + return max; +}; + +igRegisterScript("OnValueInit", (args) => { + const value = args.detail; + if (value.member === "AmountOfSale") { + value.aggregate.aggregator = totalSale; + value.aggregateList?.forEach((aggr) => { + switch (aggr.key) { + case "SUM": + aggr.aggregator = totalSale; + break; + case "MIN": + aggr.aggregator = totalMin; + break; + case "MAX": + aggr.aggregator = totalMax; + break; + } + }); + } +}, false); +``` + * In the `DimensionInit` event handler set all custom `MemberFunction` implementations: + + ```typescript public onDimensionInit(dim: IPivotDimension) { switch (dim.memberName) { @@ -709,10 +870,29 @@ public onDimensionInit(dim: IPivotDimension) { } } ``` + -```razor -Add blazor handling for dimensionInit + +```ts +public onDimensionInit(event: any) { + const dim: IgcPivotDimension = event.detail; + switch (dim.memberName) { + case 'AllProducts': + dim.memberFunction = () => 'All Products'; + break; + case 'ProductCategory': + dim.memberFunction = (data: any) => data.ProductName; + break; + case 'City': + dim.memberFunction = (data: any) => data.City; + break; + case 'SellerName': + dim.memberFunction = (data: any) => data.SellerName; + break; + } +} ``` + @@ -727,27 +907,64 @@ Saving / Restoring state for the child grids is controlled by the `RowIslands` p ``` + + +```ts +gridState.options = { cellSelection: false, sorting: false, rowIslands: true }; +``` + + + + + +```tsx + + + +``` + + + ```razor -Blazor snippet + + + + +@code { + private IgbGridState gridState; + + gridState.Options = new IgbGridStateOptions + { + CellSelection = false, + Sorting = false, + RowIslands = true + }; +} ``` + + Then the `GetState` API will return the state for all grids (root grid and child grids) features excluding `Selection` and `Sorting`. If later on the developer wants to restore only the `Filtering` state for all grids, use: ```typescript -this.state.setState(state, ['filtering', 'rowIslands']); +this.state.applyState(state, ['filtering', 'rowIslands']); ``` + +Then the `GetState` API will return the state for all grids (root grid and child grids) features excluding `Selection` and `Sorting`. If later on the developer wants to restore only the `Filtering` state for all grids, use: ```razor -setState snippet +gridState.ApplyStateFromString(gridStateString, new string[] { "filtering", "rowIslands" }); ``` + - + +## Demo `sample="/{ComponentSample}/state-persistence-main", height="763", alt="{Platform} {ComponentTitle} State Persistence "` - + ## Restoring Pivot Strategies `GridState` will not persist neither remote pivot operations nor custom dimension strategies. @@ -758,6 +975,7 @@ setState snippet * Set custom sorting strategy and custom pivot column and row dimension strategies: + ```html @@ -779,13 +997,50 @@ public pivotConfigHierarchy: IPivotConfiguration = { filters: [...] }; ``` + + + + + +```html + + + +``` + + +```ts +public pivotConfiguration: IgcPivotConfiguration = { + columnStrategy: IgcNoopPivotDimensionsStrategy.instance(), + rowStrategy: IgcNoopPivotDimensionsStrategy.instance(), + columns: [...], + rows: [...], + values: [...], + filters: [...] +}; +private gridState: IgcGridStateComponent; + +constructor() { + var grid = document.getElementById("grid") as IgcPivotGridComponent; + this.gridState = document.getElementById('gridState') as IgcGridStateComponent; + grid.pivotConfiguration = this.pivotConfiguration; + PivotNoopData.getData().then((value) => { + grid.data = value; + }); + this.gridState.addEventListener('stateParsed', (ev:any) => this.stateParsedHandler(ev) ); +} +``` + + ```razor Add snippet for blazor ``` -* Restoring the state from the `SessionStorage` and applying the custom strategies looks like the following: +* Restoring the state from the `LocalStorage` and applying the custom strategies looks like the following: + ```typescript public restoreState() { const state = window.sessionStorage.getItem('grid-state'); @@ -797,12 +1052,33 @@ public restoreState() { this.state.setState(state as string); } ``` + + +```ts +public restoreGridState() { + const state = window.localStorage.getItem(this.stateKey); + if (state) { + this.gridState.applyStateFromString(state); + } +} + +public stateParsedHandler(ev: any) { + const parsedState = ev.detail; + parsedState.pivotConfiguration.rowStrategy = IgcNoopPivotDimensionsStrategy.instance(); + parsedState.pivotConfiguration.columnStrategy = IgcNoopPivotDimensionsStrategy.instance(); +} +``` + + ```razor Add snippet for blazor for restore state ``` + `sample="/{ComponentSample}/data-persistence-noop", height="580", alt="{Platform} {ComponentTitle} data persistence noop"` + + @@ -810,12 +1086,12 @@ Add snippet for blazor for restore state -* When restoring all grid features at once (using `SetState` API with no parameters), then column properties for the root grid might be resetted to default. If this happens, restore the columns or column selection feature separately after that: +* When restoring all grid features at once (using `applyState` API with no parameters), then column properties for the root grid might be resetted to default. If this happens, restore the columns or column selection feature separately after that: ```typescript -state.setState(gridState); -state.setState(gridState.columns); -state.setState(gridState.columnSelection); +state.applyState(gridState); +state.applyState(gridState.columns); +state.applyState(gridState.columnSelection); ``` @@ -833,18 +1109,15 @@ state.setState(gridState.columnSelection); - -* `GetState` method uses JSON.stringify() method to convert the original objects to a JSON string. JSON.stringify() does not support Functions, thats why the `GridState` directive will ignore the pivot dimension `MemberFunction`, pivot values `Member`, `Formatter`, custom `Aggregate` functions, - `Styles` and pivot configuration strategies: `ColumnStrategy` and `RowStrategy`. - +* `GetState` method uses JSON.stringify() method to convert the original objects to a JSON string. JSON.stringify() does not support Functions, thats why the `GridState` directive will ignore the pivot dimension `MemberFunction`, pivot values `Member`, `Formatter`, custom `Aggregate` functions, `Styles` and pivot configuration strategies: `ColumnStrategy` and `RowStrategy`. -## Additional Resources +## Additional Resources * [Paging](paging.md) * [Filtering](filtering.md) * [Sorting](sorting.md) @@ -857,6 +1130,7 @@ state.setState(gridState.columnSelection); - - + +* [Pivot Grid Remote Operations](remote-operations.md) + \ No newline at end of file diff --git a/doc/en/components/grids/_shared/summaries.md b/doc/en/components/grids/_shared/summaries.md index e2bdaff01..a807e594f 100644 --- a/doc/en/components/grids/_shared/summaries.md +++ b/doc/en/components/grids/_shared/summaries.md @@ -997,7 +997,7 @@ igRegisterScript("SummaryTemplate", (ctx) => { }, false); ``` -When a default summary is defined, the height of the summary area is calculated by design depending on the column with the largest number of summaries and the display density of the grid. Use the `SummaryRowHeight` input property to override the default value. As an argument it expects a number value, and setting a falsy value will trigger the default sizing behavior of the grid footer. +When a default summary is defined, the height of the summary area is calculated by design depending on the column with the largest number of summaries and the `--ig-size` of the grid. Use the `SummaryRowHeight` input property to override the default value. As an argument it expects a number value, and setting a falsy value will trigger the default sizing behavior of the grid footer. diff --git a/doc/en/components/grids/data-grid.md b/doc/en/components/grids/data-grid.md index 6867821c3..d2fe725f2 100644 --- a/doc/en/components/grids/data-grid.md +++ b/doc/en/components/grids/data-grid.md @@ -1508,11 +1508,11 @@ The custom template for the column, that will render the nested data:
- + - + @@ -2037,7 +2037,7 @@ To facilitate your work, apply the comment in the `src/styles.scss` file. |Grid `width` does not depend on the column widths | The `width` of all columns does not determine the spanning of the grid itself. It is determined by the parent container dimensions or the defined grid's `width`.| |Grid nested in parent container | When grid's `width` is not set and it is placed in a parent container with defined dimensions, the grid spans to this container.| |Grid `OnPush` ChangeDetectionStrategy |The grid operates with `ChangeDetectionStrategy.OnPush` so whenever some customization appears make sure that the grid is notified about the changes that happens.| -| Columns have a minimum allowed column width. Depending on the `displayDensity` option, they are as follows:
"compact": 56px
"cosy": 64px
"comfortable ": 80px | If width less than the minimum allowed is set it will not affect the rendered elements. They will render with the minimum allowed width for the corresponding `displayDensity`. This may lead to an unexpected behavior with horizontal virtualization and is therefore not supported. +| Columns have a minimum allowed column width. Depending on the `--ig-size` CSS variable, they are as follows:
"small": 56px
"medium": 64px
"large ": 80px | If width less than the minimum allowed is set it will not affect the rendered elements. They will render with the minimum allowed width for the corresponding `--ig-size`. This may lead to an unexpected behavior with horizontal virtualization and is therefore not supported. | Row height is not affected by the height of cells that are not currently rendered in view. | Because of virtualization a column with a custom template (that changes the cell height) that is not in the view will not affect the row height. The row height will be affected only while the related column is scrolled in the view. ## API References diff --git a/doc/en/components/grids/grid/icons.md b/doc/en/components/grids/grid/icons.md new file mode 100644 index 000000000..276d14635 --- /dev/null +++ b/doc/en/components/grids/grid/icons.md @@ -0,0 +1,245 @@ +--- +title: {Platform} {ComponentTitle} Customize Icons- Infragistics +_description: Configure custom icons for {Platform} Grid. +_keywords: icons, custom icons, igniteui for {Platform}, {ComponentKeywords}, {ProductName}, Infragistics +mentionedTypes: ['Infragistics.Controls.Grid'] +--- + +# {Platform} Grid Customize Icons + +The {ProductName} `Grid` icons can be customized to use custom icons from a different collection set using the exposed API methods: + +- `registerIconFromText` +- `registerIcon` +- `setIconRef` + +Registering an icon caches it locally, so that it can reused between components, that reference that icon by name and collection name. Setting a reference changes which icon, from which collection, will be used when referencing that icon by name. + + + +```ts +// Add a new 'material' icon called 'filter_list' from string +registerIconFromText("filter_list", '...', "material"); + +// Add a new 'material' icon called 'my-filter_list' from svg url +registerIcon("filter_list", "url" , "material") + +// Sets the icon reference to the new registered icon. +setIconRef('filter_list', 'default', { + name: 'filter_list', + collection: 'material', +}); + +``` + + + + + +```ts +// Add a new 'material' icon called 'filter_list' from string +registerIconFromText("filter_list", '...', "material"); + +// Add a new 'material' icon called 'my-filter_list' from svg url +registerIcon("filter_list", "url" , "material") + +// Sets the icon reference to the new registered icon. +setIconRef('filter_list', 'default', { + name: 'filter_list', + collection: 'material', +}); +``` + + + + +```razor +@code { + private IgbIcon icon; + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (this.icon != null && firstRender) + { + this.icon.EnsureReady().ContinueWith(new Action((e) => + { + // Add a new 'material' icon called 'filter_list' from string + this.icon.RegisterIconFromText("filter_list", '...', "material"); + + // Add a new 'material' icon called 'filter_list' from svg url + this.icon.RegisterIcon("filter_list", "url" , "material") + + // Sets the icon reference to the new registered icon. + this.icon.SetIconRef("filter_list", "default", new IgbIconMeta() + { + Name = "filter_list", + Collection = "material", + }); + })); + } + } +} + +``` + + + +## {Platform} Customize Icons Example + +The following sample demonstrates how to switch from the original material icons to custom font awesome svg icons and back to material. + +`sample="/{GridSample}/change-icons-custom", height="600", alt="{Platform} {ComponentTitle} Customize Icons Example"` + +## Internal Icons + +The following lists all internal icons. Alias is the name of the icon by which it can be referenced. Target Icon is the internal icon name and Target Collection is the collection in which the icon is registered internally. + +| Alias | Target Icon | Target Collection | +|----------------------------------|-----------------------|---------------| +| **add** | add | material | +| **add_child** | add-child | imx-icons | +| **add_row** | add-row | imx-icons | +| **arrow_back** | arrow_back | material | +| **arrow_drop_down** | arrow_drop_up | material | +| **arrow_forward** | arrow_forward | material | +| **arrow_next** | chevron_right | material | +| **arrow_prev** | chevron_left | material | +| **case_sensitive** | case-sensitive | imx-icons | +| **carousel_next** | arrow_forward | material | +| **carousel_prev** | arrow_back | material | +| **chevron_left** | chevron_left | material | +| **chevron_right** | chevron_right | material | +| **clock** | access_time | material | +| **close** | close | material | +| **collapse** | expand_less | material | +| **confirm** | check | material | +| **date_range** | date_range | material | +| **delete** | delete | material | +| **drag_indicator** | drag_indicator | material | +| **edit** | edit | material | +| **error** | error | material | +| **expand** | expand_more | material | +| **expand_more** | expand_more | material | +| **file_download** | file_download | material | +| **filter_all** | select-all | imx-icons | +| **filter_before** | is-before | imx-icons | +| **filter_contains** | contains | imx-icons | +| **filter_does_not_contain** | does-not-contain | imx-icons | +| **filter_empty** | is-empty | imx-icons | +| **filter_equal** | equals | imx-icons | +| **filter_false** | is-false | imx-icons | +| **filter_greater_than** | greater-than | imx-icons | +| **filter_greater_than_or_equal** | greater-than-or-equal | imx-icons | +| **filter_in** | is-in | imx-icons | +| **filter_last_month** | last-month | imx-icons | +| **filter_last_year** | last-year | imx-icons | +| **filter_less_than** | less-than | imx-icons | +| **filter_less_than_or_equal** | less-than-or-equal | imx-icons | +| **filter_next_month** | next-month | imx-icons | +| **filter_next_year** | next-year | imx-icons | +| **filter_not_empty** | not-empty | imx-icons | +| **filter_not_equal** | not-equal | imx-icons | +| **filter_not_null** | is-not-null | imx-icons | +| **filter_null** | is-null | imx-icons | +| **filter_starts_with** | starts-with | imx-icons | +| **filter_this_month** | this-month | imx-icons | +| **filter_this_year** | this-year | imx-icons | +| **filter_today** | today | imx-icons | +| **filter_true** | is-true | imx-icons | +| **filter_yesterday** | yesterday | imx-icons | +| **first_page** | first_page | material | +| **group_work** | group_work | material | +| **hide** | visibility_off | material | +| **import_export** | import_export | material | +| **input_collapse** | arrow_drop_up | material | +| **input_clear** | clear | material | +| **input_expand** | arrow_drop_down | material | +| **jump_down** | jump-down | imx-icons | +| **jump_up** | jump-up | imx-icons | +| **last_page** | last_page | material | +| **more_vert** | more_vert | material | +| **next** | navigate_next | material | +| **pin** | pin-left | imx-icons | +| **prev** | navigate_before | material | +| **refresh** | refresh | material | +| **remove** | cancel | material | +| **search** | search | material | +| **selected** | done | material | +| **show** | visibility | material | +| **sort_asc** | arrow_upward | material | +| **sort_desc** | arrow_downward | material | +| **functions** | functions | material | +| **table_rows** | table_rows | material | +| **today** | calendar_today | material | +| **tree_collapse** | expand_more | material | +| **tree_expand** | chevron_right | material | +| **unfold_less** | unfold_less | material | +| **unfold_more** | unfold_more | material | +| **unpin** | unpin-left | imx-icons | +| **view_column** | view_column | material | + +Here's a breakdown of all icons as used by component: + +#### Grid +| Icon | Description | +| -------------------- | ------------------------------------------------------------------------------ | +| **add** | Used in excel-filter menu to add filter entry. | +| **arrow_back** | Used in various UI elements for moving a column backwards. | +| **arrow_drop_down** | Used in various buttons to indicate togglable menus. | +| **arrow_forward** | Used in various UI elements for moving a column forwards. | +| **cancel** | Used in various UI elements for canceling operations. | +| **chevron_right** | Used to indicate expandable menus, like in the excel style filtering. | +| **close** | Used to close an expanded menu. | +| **confirm** | Used to confirm an operation. | +| **drag_indicator** | Used to show a handle to indicate an item can be dragged. | +| **error** | Used in editable cells to indicate erroneous data input. | +| **expand_more** | Used by the excel filtering menu to indicate the addition of more filters. | +| **file_dowload** | Used by the excel filter exporter. | +| **filter_*** | Used for various filtering operands. | +| **group_work** | Used by the group-by drop area. | +| **hide** | Used by various UI elements for hiding columns. | +| **import_export** | Used by the pivot data selector for moving. | +| **input_clear** | Used by input fields for clearing input data. | +| **next** | Used by the filtering row menu to navigate between chips. | +| **pin** | Used by various UI elements for column pinning. | +| **prev** | Used by the filtering row menu to navigate between chips. | +| **remove** | Used by various UI elements as a removal indicator. | +| **refresh** | Used by the filtering row menu to reload the filters. | +| **selected** | Used by various UI elements to indicated active selection. | +| **show** | Used by various UI elements for showing columns. | +| **sort_asc** | Used by various UI elements to indicate sorting direction. | +| **sort_desc** | Used by various UI elements to indicate sorting direction. | +| **functions** | Used by the pivot grid and data selectors. | +| **table_rows** | Used by the pivot grid data selector. | +| **tree_collapse** | Used by tree-like structure to show less details. | +| **tree_expand** | Used by tree-like structure to show more details. | +| **unpin** | Used by various UI elements for column pinning. | +| **unfold_less** | Used by the hierarchical grid to collapse all rows. | +| **unfold_more** | Used by the hierarchical grid to expand all rows. | +| **view_column** | Used by the pivot data selector. | + +#### Paginator +| Icon | Description | +| -------------- | ------------------------------------------------------------ | +| **first_page** | Used by the button used for navigating to the first page. | +| **last_page** | Used by the button used for navigating to the last page. | +| **prev** | Used by the button used for navigating to the previous page. | +| **next** | Used by the button used for navigating to the next page. | + +#### Action Strip + +| Icon | Description | +| ------------- | ------------------------ | +| **add_child** | Used by the popup menu. | +| **add_row** | Used by the popup menu. | +| **more_vert** | Used by the popup menu. | + +## API References +* `Grid` + +## Additional Resources + +Our community is active and always welcoming to new ideas. + +* [{ProductName} **Forums**]({ForumsLink}) +* [{ProductName} **GitHub**]({GithubLink}) \ No newline at end of file diff --git a/doc/en/components/grids/grids-header.md b/doc/en/components/grids/grids-header.md index 5e5c3a26c..ce9679dba 100644 --- a/doc/en/components/grids/grids-header.md +++ b/doc/en/components/grids/grids-header.md @@ -250,7 +250,7 @@ Here are a few of the data grid’s key features: -
  • [**Display Density**](grid/display-density.md) to adjust the height and sizing of the rows
    • +
  • [**Size**](grid/size.md) to adjust the height and sizing of the rows
    • @@ -473,7 +473,7 @@ There are multiple options to get access to our award-winning support at Infragi
  • Interactive [Outlook-style Grouping](grid/groupby.md)
  • [Column Summaries](grid/summaries.md) based on any data in a grid cell or column
    • -
  • [Display Density](grid/display-density.md) to adjust the height and sizing of the rows
    • +
  • [Size](grid/size.md) to adjust the height and sizing of the rows
    • diff --git a/doc/en/components/grids/pivot-grid/features.md b/doc/en/components/grids/pivot-grid/features.md index c297297a2..173b13da2 100644 --- a/doc/en/components/grids/pivot-grid/features.md +++ b/doc/en/components/grids/pivot-grid/features.md @@ -100,6 +100,17 @@ public pivotConfigHierarchy: IPivotConfiguration = { ``` + + + +```tsx +const dimension: IgrPivotDimension = new IgrPivotDimension(); +dimension.memberName = "SellerName"; +dimension.enabled = true; +dimension.sortDirection = SortingDirection.Asc; +``` + + ## Dimensions Resizing Row dimensions can be resized similarly to column resizing - via a resizing indicator that can be found on the right edge of the cells. @@ -134,6 +145,18 @@ public pivotConfigHierarchy: IPivotConfiguration = { ``` + + + + +```tsx +const dimension: IgrPivotDimension = new IgrPivotDimension(); +dimension.memberName = "SellerName"; +dimension.enabled = true; +dimension.width = "400px"; +``` + + ## Dimensions Selection The {PivotGridTitle} supports single selection which is enabled just like in the base grid. For example: @@ -161,10 +184,17 @@ The {PivotGridTitle} supports single selection which is enabled just like in the ``` + +```tsx + + +``` + + In case there are multiple row or column dimensions which would create groups that span multiple rows/columns, selection is applied to all cells that belong to the selected group. ## Super Compact Mode -The `PivotGrid` component provides a `SuperCompactMode` input. It is suitable for cases that require a lot of cells to be present on the screen at once. If enabled the option ignores the `DisplayDensity` option for the {PivotGridTitle}. Enabling `SuperCompactMode` also sets the `DisplayDensity` input to `Compact` for each child component(like `Chip`) that does not have the `SuperCompactMode` option. +The `PivotGrid` component provides a `SuperCompactMode` input. It is suitable for cases that require a lot of cells to be present on the screen at once. If enabled the option ignores the `--ig-size` CSS variable for the {PivotGridTitle}. Enabling `SuperCompactMode` also sets the `--ig-size` to `small` for each child component(like `Chip`) that does not have the `SuperCompactMode` option. ```html <{PivotGridSelector} [superCompactMode]="true"> @@ -181,6 +211,13 @@ The `PivotGrid` component provides a `SuperCompactMode` input. It is suitable fo <{PivotGridSelector} SuperCompactMode=true> ``` + +```tsx + + +``` + + ## Additional Summary Column When a `column` dimension defines a hierarchy, the {PivotGridTitle} will render additional summary/total column, which accumulates the aggregations of all of the columns inside the group. When the group is collapsed only the summary column will remain. And when the group is expanded the additional summary column appears at the end of the group. diff --git a/doc/en/components/grids/pivot-grid/overview.md b/doc/en/components/grids/pivot-grid/overview.md index 2efdd0f33..4dd5ff99a 100644 --- a/doc/en/components/grids/pivot-grid/overview.md +++ b/doc/en/components/grids/pivot-grid/overview.md @@ -49,6 +49,13 @@ The {Platform} {PivotGridName} can be configured via the `PivotConfiguration` pr ``` + +```tsx + + +``` + + It is defined by three main dimensions: **rows**, **columns** and **values**. The **rows** and **columns** define the grouped structure that is displayed in the rows and columns of the grid. The **values** define the aggregation fields and the aggregation that will be used to calculate and display the related values of the groups. A filter can also be defined via the **filters** configuration property. It can be used for fields that you do not want to add as a dimension or a value but would like to filter their related member values via the UI. @@ -56,15 +63,28 @@ A filter can also be defined via the **filters** configuration property. It can ### Dimensions Configuration Each basic dimension configuration requires a `MemberName` that matches a field from the provided **data**. - -Or a `MemberFunction` that extracts a value from the record in case of complex objects or other custom scenarios. - + Multiple sibling dimensions can be defined, which creates a more complex nested group in the related row or column dimension area. The dimensions can be reordered or moved from one area to another via their corresponding chips using drag & drop. A dimension can also describe an expandable hierarchy via the `ChildLevel` property, for example: + + + + +```tsx +const childDimension = new IgrPivotDimension(); +childDimension.memberName = "ProductCategory"; +const dimension: IgrPivotDimension = new IgrPivotDimension(); +dimension.memberName = "AllProducts"; +dimension.enabled = true; +dimension.childLevel = childDimension; +``` + + + ```typescript { memberFunction: () => 'All', @@ -77,7 +97,9 @@ A dimension can also describe an expandable hierarchy via the `ChildLevel` prope } } ``` + + ```razor @code { var pivotConfiguration = new IgbPivotConfiguration(); @@ -90,6 +112,8 @@ A dimension can also describe an expandable hierarchy via the `ChildLevel` prope }); } ``` + + In this case the dimension renders an expander in the related section of the grid (row or column) and allows the children to be expanded or collapsed as part of the hierarchy. By default the row dimensions are initially expanded. This behavior can be controlled with the `DefaultExpandState` property of the Pivot Grid. ### Predefined Dimensions @@ -105,6 +129,22 @@ As part of the Pivot Grid some additional predefined dimensions are exposed for It can be set for rows or columns, for example: + +```ts +const pivotConfiguration = new IgrPivotConfiguration(); + +const dateDimension = new IgrPivotDateDimension(); +dateDimension.memberName = "Date"; +dateDimension.enabled = true; +const baseDimension = new IgrPivotDimension(); +baseDimension.memberName = "Date"; +baseDimension.enabled = true; + +dateDimension.baseDimension = baseDimension; +pivotConfiguration1.columns = [dateDimension]; +``` + + ```typescript public pivotConfigHierarchy: IPivotConfiguration = { @@ -151,6 +191,18 @@ It also allows for further customization via the second option parameter in orde ``` + + +```tsx +const options: IgrPivotDateDimensionOptions = {} as IgrPivotDateDimensionOptions; +options.years = true; +options.months = false; +options.quarters = true; +options.fullDate = false; +dateDimension.options = options; +``` + + ```typescript new IgcPivotDateDimension({ memberName: 'Date', enabled: true }, { @@ -198,6 +250,23 @@ A value configuration requires a **member** that matches a field from the provid The current aggregation function can be changed at runtime using the value chip's drop-down. By default, it displays a list of available aggregations based on the field's data type. A custom list of aggregations can also be set via the `AggregateList` property, for example: + +```typescript +const pivotConfiguration = new IgrPivotConfiguration(); +const value = new IgrPivotValue(); +value.member = "AmountofSale"; +value.displayName = "Amount of Sale"; +value.enabled = true; +const aggregator = new IgrPivotAggregator(); +aggregator.key = "SUM"; +aggregator.label = "Sum of Sale"; +aggregator.aggregatorName = PivotAggregationType.SUM; +value.aggregate = aggregator; +pivotConfiguration.values = [value]; +value.aggregateList = [aggregator]; +``` + + ```typescript public pivotConfigHierarchy: IPivotConfiguration = { @@ -310,6 +379,50 @@ The `Enable` property controls if a given `PivotDimension` or `PivotValue` is ac Let's take a look at a basic pivot configuration: + + +```tsx +const pivotConfiguration1: IgrPivotConfiguration = new IgrPivotConfiguration(); + +const igrPivotDateDimension1 = new IgrPivotDimension(); +igrPivotDateDimension1.memberName = "Date"; +igrPivotDateDimension1.enabled = true; + +pivotConfiguration1.columns = [igrPivotDateDimension1]; +const igrPivotDimension2: IgrPivotDimension = new IgrPivotDimension(); +igrPivotDimension2.memberName = "ProductName"; +igrPivotDimension2.enabled = true; + +const igrPivotDimension3: IgrPivotDimension = new IgrPivotDimension(); +igrPivotDimension3.memberName = "SellerCity"; +igrPivotDimension3.enabled = true; + +pivotConfiguration1.rows = [igrPivotDimension2,igrPivotDimension3]; +const igrPivotDimension4: IgrPivotDimension = new IgrPivotDimension(); +igrPivotDimension4.memberName = "SellerName"; +igrPivotDimension4.enabled = true; + +pivotConfiguration1.filters = [igrPivotDimension4]; +const igrPivotValue1: IgrPivotValue = new IgrPivotValue(); +igrPivotValue1.member = "ProductUnitPrice"; +igrPivotValue1.displayName = "Amount of Sale"; +igrPivotValue1.dataType = GridColumnDataType.Currency; +igrPivotValue1.enabled = true; +const igrPivotAggregator1: IgrPivotAggregator = new IgrPivotAggregator(); +igrPivotAggregator1.key = "SUM"; +igrPivotAggregator1.label = "Sum of Sale"; +igrPivotAggregator1.aggregatorName = PivotAggregationType.SUM; + +igrPivotValue1.aggregate = igrPivotAggregator1; +const igrPivotAggregator2: IgrPivotAggregator = new IgrPivotAggregator(); +igrPivotAggregator2.key = "SUM"; +igrPivotAggregator2.label = "Sum of Sale"; +igrPivotAggregator2.aggregatorName = PivotAggregationType.SUM; +pivotConfiguration1.values = [igrPivotValue1]; +``` + + + ```typescript public pivotConfigHierarchy: IPivotConfiguration = { diff --git a/doc/en/components/inputs/form.md b/doc/en/components/inputs/form.md deleted file mode 100644 index 710e07233..000000000 --- a/doc/en/components/inputs/form.md +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: {Platform} Form Component | {ProductName} -_description: Using the {Platform} Form Component you can quickly and easily create new contact form or a registration page for your next app. Learn more here. -_keywords: {Platform} form, {ProductName}, Infragistics -mentionedTypes: ['Form', 'Checkbox', 'Input', 'Radio', 'Switch'] ---- - -# {Platform} Form Overview - -The Form Component in {Platform} is used for setting up a contact form and/or a registration page that fit in any application's requirements. You can easily provide {Platform} form validation, define form orientation, and configure or customize your desired layout as well. The {Platform} form component also exposes events that give you the opportunity to respond to user actions. - -## {Platform} Form Example - -The following example represents `Form` that has some inputs, buttons and a checkbox inside. - -`sample="/inputs/form/overview", height="300", alt="{Platform} Form Example"` - -## Usage - - -First, you need to install the {ProductName} by running the following command: - -```cmd -npm install {PackageWebComponents} -``` - -Before using the `Form`, you need to register it as follows: - -```ts -import {defineComponents, IgcFormComponent, IgcInputComponent, IgcCheckboxComponent, IgcButtonComponent } from 'igniteui-webcomponents'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; - -defineComponents(IgcFormComponent, IgcInputComponent, IgcCheckboxComponent, IgcButtonComponent); -``` - -For a complete introduction to the {ProductName}, read the [*Getting Started*](../general-getting-started.md) topic. - - - - -First, you need to the install the corresponding {ProductName} npm package by running the following command: - -```cmd -npm install igniteui-react -``` - -You will then need to import the `Form`, its necessary CSS, and register its module, like so: - -```tsx -import { IgrFormModule, IgrForm } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; -IgrFormModule.register(); -``` - - - -Before using the `Form`, you need to register it as follows: - - -```razor -// in Program.cs file - -builder.Services.AddIgniteUIBlazor(typeof(IgbFormModule)); -``` - -You will also need to link an additional CSS file to apply the styling to the `Form` component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/_Host.cshtml** file in a **Blazor Server** project: - -```razor - -``` - - -The simplest way to start using the `Form` is as follows: - -`sample="/inputs/form/overview", height="300", alt="{Platform} Form Example"` - - - -Form data is collected for the following components: -- `Checkbox` -- `Input` -- `Radio` -- `Switch` - -When a form control is invalid, the form will not be submitted and an error message will be shown. If you want to specify that the form elements should not be validated when the form is submitted you can add the `novalidate` attribute to the `Form` element: - -```tsx - -``` - -```html - - - -``` - -```razor - -``` - -### Events - -The Form component raises the following events: -- Submit - Raised when the form is submitted -- Reset - Raised when the form is reset - -Here is an example showing how to add an event listener for the `Submit` event: - -```ts -document.addEventListener('igcSubmit', function (event) { - const customEvent = event as CustomEvent; - console.log(customEvent.detail); -}); -``` - -### Methods - -The Form component exposes the following methods: - -| Method | Description | -| ------------- |:-------------: | -| `Submit` | Submits the form data.| -| `Reset` | Resets the form data.| -| `GetFormData` | Collects the form data and returns a single FormData object.| -| `ReportValidity` | Returns whether the element's child controls satisfy their validation constraints.| - -
    - - -## API References - - - `Button` - - `Checkbox` - - `Form` - - `Input` - - `Radio` - - `Submit` - - -## Additional Resources - -* [{ProductName} **Forums**]({ForumsLink}) -* [{ProductName} **GitHub**]({GithubLink}) \ No newline at end of file diff --git a/doc/en/components/inputs/slider.md b/doc/en/components/inputs/slider.md index df43f930a..775596226 100644 --- a/doc/en/components/inputs/slider.md +++ b/doc/en/components/inputs/slider.md @@ -180,7 +180,7 @@ The slider components expose CSS parts for their inner elements. The following t The following sample demonstrates how to style the track fill and thumb parts: -`sample="/inputs/slider/styling", height="120", alt="{Platform} Slider Styling Example"` +`sample="/inputs/slider/styling", height="250", alt="{Platform} Slider Styling Example"` diff --git a/doc/en/components/interactivity/accessibility-compliance.md b/doc/en/components/interactivity/accessibility-compliance.md new file mode 100644 index 000000000..d94d524fa --- /dev/null +++ b/doc/en/components/interactivity/accessibility-compliance.md @@ -0,0 +1,191 @@ +--- +title: Ignite UI for {Platform} Accessibility Compliance | Ignite UI for {Platform} | Infragistics +_description: Ignite UI for {Platform} Accessibility Support and Compliance - Section 508 Compliance, WCAG and ARIA . +_keywords: accessibility, {Platform}, ignite ui for {Platform}, infragistics +mentionedTypes: [] +--- + + + +# Accessibility Compliance +As the leading global provider of UI and UX tools for developers, our {Platform} team at Infragistics is committed to providing components and tools that make it easier for you to create the best possible user experience. Our goal is to enable you to focus on crafting the best applications and the best user experience for all users. + +Here you can find specific information regarding the accessibility support and compliance for our {Platform} grids, charts, and UI components and controls within Ignite UI for {Platform}. + +## Section 508 Compliance +[Section 508](http://www.section508.gov/) of the Rehabilitation Act was amended in 1998 by Congress to require all Federal agencies to make their electronic and information technology accessible to people with disabilities. Since then, Section 508 compliance has not only been a requirement in government agencies, but it's also important when providing software solutions and designing Web pages. + +Section 1194.22 of the Section 508 law specifically targets Web-based intranet and internet information and systems, and contains a set of 16 rules to follow. In order to enable you to keep your Web applications and Web sites compatible with these rules with minimal effort on your part, Infragistics has taken steps to ensure that the Ignite UI for {Platform} controls and components are compliant with the relevant accessibility rules. + +The matrix below provides a high-level outline of the accessibility support provided by our visual controls (and related components). To learn more about an individual control/component's accessibility compliance, click the name of the control/component. + +### Ignite UI for {Platform} Compliance with Section 508 + +|**Component/Principle**| (a)
    |(b)
    |(c)
    |(d)
    |(e)
    |(f)
    |(g)
    |(h)
    |(i)
    |(j)
    |(k)
    |(l)
    |(m)
    |(n)
    |(o)
    |(p)
    | +|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--| +|*Grids*||||||||||||||||| +| - Grid||||||||||*||||||| +| - HierarchicalGrid||||||||||*||||||| +| - TreeGrid||||||||||*||||||| +|*Other*||||||||||*||||||| +| - Avatar||||||||||||||||| +| - Badge||||||||||||||||| +| - Bottom navigation||||||||||*||||||| +| - Button||||||||||*||||||| +| - Button group||||||||||*||||||| +| - Calendar||||||||||*||||||| +| - Card||||||||||||||||| +| - Carousel||||||||||*||||||| +| - Checkbox||||||||||||||||| +| - Chip||||||||||*||||||| +| - Circular progress||||||||||*||||||| +| - Combo||||||||||*||||||| +| - Date time input||||||||||*||||||| +| - Date picker||||||||||*||||||| +| - Divider||||||||||||||||| +| - Dialog||||||||||*||||||| +| - Drop down||||||||||*||||||| +| - Expansion panel||||||||||*||||||| +| - Icon||||||||||||||||| +| - Input||||||||||||||||| +| - Input group||||||||||*||||||| +| - Linear progress||||||||||*||||||| +| - List||||||||||||||||| +| - Navbar||||||||||*||||||| +| - Navigation drawer||||||||||*||||||| +| - Radio group||||||||||||||||| +| - Radio||||||||||||||||| +| - Select||||||||||*||||||| +| - Slider||||||||||*||||||| +| - Snackbar||||||||||*||||||| +| - Switch||||||||||*||||||| +| - Tabs||||||||||*||||||| +| - Time picker||||||||||*||||||| +| - Toast||||||||||*||||||| + + +**LEGEND** + +|||| +|---|---|---| +||The control/component is completely accessible in this particular area.|| +|*|The control/component is accessible in this particular area after implementing certain configurations| Example: Use *NoopAnimationsModule* utility module to allow disabling of animations| +||The control/component is not entirely accessible unless you perform some sort of action.|| +|'white space'|this particular rule does not apply to the control|| + +> [!WARNING] +> The table above is relevant only to the *Default theme* of Ignite UI for {Platform} theming library. The checklist compliance might be different when it comes to custom themes, typography and any visual changes related to animations and colors. + + ### Compliance Information + +- **a** - A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content). +- **b** - Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. +- **c** - Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup. +- **d** - Documents shall be organized so they are readable without requiring an associated style sheet. +- **e** - Redundant text links shall be provided for each active region of a server-side image map. +- **f** - Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape. +- **g** - Row and column headers shall be identified for data tables. +- **h** - Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers. +- **i** - Frames shall be titled with text that facilitates frame identification and navigation. +- **j** - Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz. +- **k** - A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes. +- **l** - When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology. +- **m** - When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through l. +- **n** - When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues. +- **o** - A method shall be provided that permits users to skip repetitive navigation links. +- **p** - When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required. + + +## WCAG compliance +[WCAG](https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=111) is simply a set of formal guidelines on how to develop accessible web content. These standards represent a higher level of accessibility than 508 standards, although they are identical or very similar. WCAG focuses primarily on HTML accessibility. + +|**Component/Guideline**|1.1
    |1.2
    |1.3
    |1.4
    |2.1
    |2.2
    |2.3
    |2.4
    |2.5
    |3.1
    |3.2
    |3.3
    |4.1
    | +|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--| +|*Grids*|||||||||||||| +| - Grid|||||||*||||*||| +| - HierarchicalGrid|||||||*||||*||| +| - TreeGrid|||||||*||||*||| +|*Other*|||||||*||||||| +| - Avatar|||||||||||*||| +| - Badge|||||||||||*||| +| - Banner||||||*|*||||*||| +| - Bottom navigation|||||||*||||*||| +| - Button|||||||*||||*||| +| - Button group|||||||*||||*||| +| - Calendar||||||*|*||||*||| +| - Card|||||||||||*||| +| - Carousel||||||*|*||||*||| +| - Checkbox|||||||||||*||| +| - Chip|||||||*||||*||| +| - Circular progress||||||*|*||||*||| +| - Combo||||||*|*||||*||| +| - Date time editor||||||*|*||||*||| +| - Date picker||||||*|*||||*||| +| - Divider|||||||||||*||| +| - Dialog||||||*|*||||*||| +| - Drop down||||||*|*||||*||| +| - Expansion panel||||||*|*||||*||| +| - Icon|||||||||||*||| +| - Input|||||||||||*||| +| - Input group|||||||*||||*||| +| - Label|||||||||||*||| +| - Linear progress||||||*|*||||*||| +| - List|||||||||||*||| +| - Month picker||||||*|*||||*||| +| - Navbar|||||||*||||*||| +| - Navigation drawer||||||*|*||||*||| +| - Radio group|||||||||||*||| +| - Radio|||||||||||*||| +| - Select||||||*|*||||*||| +| - Slider|||||||*||||*||| +| - Snackbar||||||*|*||||*||| +| - Switch|||||||*||||*||| +| - Tabs|||||||*||||*||| +| - Time picker||||||*|*||||*||| +| - Toast||||||*|*||||*||| +| - Tooltip||||||*|*||||*||| + + +**Legend** + +|||| +|---|---|---| +||The control/component is completely accessible in this particular area.|| +|*|The control/component is accessible in this particular area after implementing certain configurations|Example 1: Guideline 2.2. For certain components additional actions and time parameters should be set; Example 2: Guideline 2.3. Use *NoopAnimationsModule* utility module to allow disabling of animations;| +||The control/component is not entirely accessible unless you perform some sort of action.|| +|'white space'|this particular rule does not apply to the control|| + +> [!WARNING] +> The table above is relevant only to the *Default theme* of Ignite UI for {Platform} theming library. The checklist compliance might be different when it comes to custom themes, typography and any visual changes related to animations and colors. + +### Compliance Information + +- **Principle 1 - Perceivable** - Information and user interface components must be presentable to users in ways they can perceive + - Guideline 1.1 – **Text Alternatives** - Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language. + - Guideline 1.2 – **Time-based Media** - Provide alternatives for time-based media. + - Guideline 1.3 – **Adaptable** - Create content that can be presented in different ways (for example simpler layout) without losing information or structure. + - Guideline 1.4 – **Distinguishable** - Make it easier for users to see and hear content including separating foreground from background. +- **Principle 2 – Operable** - User interface components and navigation must be operable. + - Guideline 2.1 – **Keyboard Accessible** - Make all functionality available from a keyboard. + - Guideline 2.2 – **Enough Time** - Provide users enough time to read and use content. + - Guideline 2.3 – **Seizures and Physical Reactions** - Do not design content in a way that is known to cause seizures or physical reactions. + - Guideline 2.4 – **Navigable** - Provide ways to help users navigate, find content, and determine where they are. + - Guideline 2.5 – **Input Modalities** - Make it easier for users to operate functionality through various inputs beyond keyboard. +- **Principle 3 – Understandable** - Information and the operation of the user interface must be understandable. + - Guideline 3.1 – **Readable** - Make text content readable and understandable. + - Guideline 3.2 – **Predictable** - Make Web pages appear and operate in predictable ways. + - Guideline 3.3 – **Input Assistance** - Help users avoid and correct mistakes. +- **Principle 4 – Robust** - Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies. + - Guideline 4.1 – **Compatible** - Maximize compatibility with current and future user agents, including assistive technologies + + +## WAI-ARIA Support +In 2014 the W3C finalized their [WAI-ARIA specification](http://www.w3.org/TR/wai-aria/) which defined how to design Web content and Web applications to be more accessible to users with disabilities. \ No newline at end of file diff --git a/doc/en/components/layouts/divider.md b/doc/en/components/layouts/divider.md new file mode 100644 index 000000000..4af61c30a --- /dev/null +++ b/doc/en/components/layouts/divider.md @@ -0,0 +1,211 @@ +--- +title: {Platform} Divider | Layout Controls | Infragistics +_description: Use Infragistics' {Platform} avatar component to display an image, icon, or initials. +_keywords: {ProductName}, UI controls, {Platform} widgets, Web widgets, UI widgets, {Platform}, Native {Platform} Components Suite, Native {Platform} Controls, Native {Platform} Components Library, {Platform} DIvider components, {Platform} Divider controls +mentionedTypes: ['Divider'] +--- + +# {Platform} Divider + +The {ProductName} Divider allows the content author to easily create a horizontal/vertical rule as a break between content to better organize information on a page. + +## {Platform} Divider Example + +`sample="/layouts/divider/base", height="220", alt="{Platform} Divider Example"` + +
    + +## Dependencies + + +First, you need to install the {ProductName} npm package by running the following command: + +```cmd +npm install {PackageWebComponents} +``` + + + + +First, you need to the install the corresponding {ProductName} npm package by running the following command: + +```cmd +npm install igniteui-react +``` + +You will then need to import the `Divider`, its necessary CSS, and register its module, like so: + +```tsx +import { IgrDividerModule, IgrDivider } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +IgrDividerModule.register(); +``` + + + +Before using the `Divider`, you need to register it as follows: + + +```razor +// in Program.cs file + +builder.Services.AddIgniteUIBlazor(typeof(IgbDividerModule)); +``` + + +You will also need to link an additional CSS file to apply the styling to the `Avatar` component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/_Host.cshtml** file in a **Blazor Server** project: + +```razor + +``` + + + +```ts +import { defineComponents, IgcDividerComponent } from 'igniteui-webcomponents'; + +defineComponents(IgcDividerComponent); +``` + +For a complete introduction to the {ProductName}, read the [*Getting Started*](../general-getting-started.md) topic. + +The `Divider` is capable of displaying images, initials, or any other content, including icons. Declaring an `Divider` is as simple as: + +```html + +``` + +```tsx + +``` + +```razor + +``` +## Usage +### Vertical Divider + +If the `Vertical` attribute is set the direction of the divider would be changed from horizontal to vertical. + +```html + +``` + +```tsx + +``` + +```razor + +``` + +`sample="/layouts/divider/vertical", height="330", alt="{Platform} Divider Vertical Example"` + +### Type + +The `Type` attribute determines whether to render a `solid` or a `dashed` divider line. The default value is `solid`. + +```html + +``` + +```tsx + +``` + +```razor + +``` + +`sample="/layouts/divider/dashed", height="220", alt="{Platform} Divider Dashed Example"` + +### Inset Divider + +The `Divider` can be set in on both sides. To `inset` the divider, set the `Middle` attribute to true in combination with the `--inset` css variable. This will shrink the divider line from both sides. The default value of the `Middle` attribute is false. + +```css +/* DividerStyles.css */ +.withInset{ + --inset: 100px; + --color:red; +} +``` + +```html +// Both side + +// Left side only + +``` + + +```tsx +// Both side + +// Left side only + +``` + +```razor +// Both side + +// Left side only + +``` + + +`sample="/layouts/divider/middle", height="220", alt="{Platform} Divider Middle Inset Example"` + +### Using Divider Inside Select Component + +The following sample illustrates how the `Divider` can be integrated within the `Select` in order to distinguish two groups of items. + +```html + + Item 1 + Item 2 + + Item 3 + +``` + +```tsx + + Item 1 + Item 2 + + Item 2 + + +``` + +```razor + + Item 1 + Item 2 + + Item 2 + +``` + +`sample="/layouts/divider/select", height="330", alt="{Platform} Divider Select Example"` + +## CSS Variables +### Inset +The `--inset` css variable shrinks the divider by the given amount from the start. If middle is set it will shrink from both sides. + +### Color +The `--color` css variable sets the color of the divider. + +
    + + +## API References + + - `Divider` + +## Additional Resources + +* [{ProductName} **Forums**]({ForumsLink}) +* [{ProductName} **GitHub**]({GithubLink}) \ No newline at end of file diff --git a/doc/en/components/layouts/stepper.md b/doc/en/components/layouts/stepper.md index d24e27d07..48fe5747f 100644 --- a/doc/en/components/layouts/stepper.md +++ b/doc/en/components/layouts/stepper.md @@ -333,7 +333,6 @@ The sample below demonstrates all exposed step types and how they could be chang
    - ### Stepper Animations The {Platform} `Stepper` Animations provide the end-users with a beautiful experience interacting with the defined steps. The available animation options differ depending on the orientation of the stepper. @@ -349,7 +348,6 @@ The `Stepper` component also gives you the ability to configure the duration of `sample="/layouts/stepper/animations", height="600", alt="{Platform} Stepper Animations Example"`
    - ## Keyboard Navigation diff --git a/doc/en/components/notifications/banner.md b/doc/en/components/notifications/banner.md new file mode 100644 index 000000000..d7530a6af --- /dev/null +++ b/doc/en/components/notifications/banner.md @@ -0,0 +1,535 @@ +--- +title: {Platform} Banner | Infragistics +_description: With {ProductName} Banner component, developers can easily integrate a short, non-intrusive message (along with optional actions) within mobile and desktop applications. +_keywords: {ProductName}, UI controls, {Platform} widgets, web widgets, UI widgets, {Platform}, Native {Platform} Components Suite, Native {Platform} Controls, Native {Platform} Components Library, {Platform} Banner components +mentionedTypes: ['Banner'] +--- + +# {Platform} Banner Overview + +The {ProductName} Banner component provides a way to easily display a prominent message to your application's users in a way that is less transient than a snackbar and less obtrusive than a dialog. It can also indicate actions to take based on the context of the message. + +## {ProductName} Banner Example + +`sample="/notifications/banner/banner-sample-1", height="530", alt="{Platform} Banner Example"` + +## Usage + + +First, you need to install the {ProductName} by running the following command: + +```cmd +npm install {PackageWebComponents} +``` + +You will then need to import the `Banner`, its necessary CSS, and register its module, like so: + +```ts +import { defineComponents, IgcBannerComponent } from "igniteui-webcomponents"; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +defineComponents(IgcBannerComponent); +``` + + + +First, you need to the install the corresponding {ProductName} npm package by running the following command: + +```cmd +npm install igniteui-react +``` + +You will then need to import the `Banner`, its necessary CSS, and register its module, like so: + +```tsx +import { IgrBannerModule, IgrBanner } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +IgrBannerModule.register(); +``` + + + +Before using the `Banner`, you need to register it as follows: + +```razor +// in Program.cs file + +builder.Services.AddIgniteUIBlazor(typeof(IgbBannerModule)); +``` + +You will also need to link an additional CSS file to apply the styling to the `Banner` component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/_Host.cshtml** file in a **Blazor Server** project: + +```razor + +``` + + +For a complete introduction to the {ProductName}, read the [*Getting Started*](../general-getting-started.md) topic. + +### Show Banner + +In order to display the banner component, use its `Show` method and call it on a button click. The banner appears relative to where the element was inserted in the page template, moving all other content. It typically shows some non-intrusive content that requires minimal user interaction to be dismissed. + +```html +Show Banner + + +``` + +```tsx + bannerRef.current.show()}> + Show Banner + + + + You are currently offline. + +``` + +```razor +Show Banner + + + You are currently offline. + + +@code { + private IgbBanner bannerRef; + + private void ShowBanner() + { + this.bannerRef.ShowAsync(); + } +} +``` + +> [!NOTE] +> The `Banner` includes a default action button `OK`, which closes the banner. + + +## Examples + +The `Banner` component allows templating of its content while still sticking as closely as possible to the material design banner guidelines. + +### Changing the banner message + +Configuring the message displayed in the banner is easy - just change the content you are passing to the `{BannerSelector}` tag. The text will show up in the specified banner area and the banner will use its default template when displaying it. Below, we will change the content of our sample banner to be a bit more descriptive: + +```html + +``` + +```tsx + + You have lost connection to the internet. This app is offline. + +``` + +```razor + + You have lost connection to the internet. This app is offline. + +``` + +### Adding an icon + +An `Icon` can be displayed in the banner by using the banner's `prefix` slot. The icon will always be positioned at the beginning of the banner message. + +> [!NOTE] +> If several `Icon` elements are inserted, the banner will try to position all of them at the beginning. It is strongly advised to pass only one `Icon` directly to the banner. + +To pass an `Icon` to your banner, use the `prefix` slot: + +```html + +``` + +```tsx + + + You have lost connection to the internet. This app is offline. + +``` + +```razor + + + You have lost connection to the internet. This app is offline. + +``` + +If you want to use an `Icon` in your banner message, simply insert it in the banner's content: + +```html + +``` + +```tsx + + You have lost connection to the internet. This app is offline. + + +``` + +```razor + + You have lost connection to the internet. This app is offline. + + +``` + +### Changing the banner button + +The `Banner` exposes the `actions` slot for templating the banner buttons. This allows you to override the default banner button (`OK`) and add user-defined custom actions. + +```html + +``` + +```tsx + + + You have lost connection to the internet. This app is offline. +
    + bannerRef.current.toggle()}> + + Toggle Banner + +
    +     +``` + +```razor + + + You have lost connection to the internet. This app is offline. +
    + + Toggle Banner + + +
    +     + +@code { + private IgbBanner bannerRef; + + private void OnButtonClick() + { + this.bannerRef.ToggleAsync(); + } +} +``` + +`sample="/notifications/banner/banner-sample-2", height="530", alt="{Platform} Banner Example"` + +### Binding to events + +The banner component emits the `igcClosing` and `igcClosed` events when being closed. The `igcClosing` event is cancelable - it uses the [`CustomEvent`](https://developer.mozilla.org/docs/Web/API/CustomEvent) interface and the emitted object has its `cancelable` property set to **true**. If we cancel the `igcClosing` event, the corresponding end action and event will not be triggered - the banner will not be closed and the `igcClosed` event will not be emitted. + +To cancel the closing event, call the [`preventDefault`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) method. + +```html + +``` +```ts +const banner = document.getElementById('banner') as IgcBannerComponent; + +banner.addEventListener('igcClosing', (event) => { + event.preventDefault(); +}); +``` + +```tsx + + ... + + +const bannerRef = useRef(null); + +useEffect(() => { + bannerRef.current.nativeElement.addEventListener('igcClosing', (event) => { + event.preventDefault(); + }); +}, []) +``` + +```razor + + +@code { + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await JS.InvokeVoidAsync("handleClosing"); + } + } +} +``` +```razor +//In JavaScript: +function handleClosing() { + const banner = document.getElementById('banner'); + + banner.addEventListener('igcClosing', (event) => { + event.preventDefault(); + }); +} +``` + +> [!NOTE] +> If the changes above are applied, the banner will never close, as the closing event is always cancelled. + +## Advanced Example + +Let's create a banner with two custom buttons - one for dismissing the notification and one for turning on the connection. We can pass custom action handlers using the `actions` slot: + +```html + +``` + +```tsx + + + You have lost connection to the internet. This app is offline. +
    + bannerRef.current.hide()}> + + Continue Offline + + refreshBanner()}> + + Turn On Wifi + +
    +     +``` + +```razor + + + You have lost connection to the internet. This app is offline. +
    + + Continue Offline + + + + Turn On Wifi + + +
    +     + +@code { + private IgbBanner bannerRef; + + private void HideBanner() + { + this.bannerRef.HideAsync(); + } +} +``` + +> According to Google's [Material Design](https://material.io/design/components/banners.html#anatomy) guidelines, a banner should have a maximum of 2 buttons present. The `Banner` does not explicitly limit the number of elements under the `actions` slot, but it is strongly recommended to use up to 2 if you want to adhere to the material design guidelines. + + +The dismiss option (`'Continue Offline'`) doesn't need any further logic, so it can just call the `Hide` method. The confirm action (`'Turn On Wifi'`), however, requires some additional logic, so we have to define it in the component. Then, we will add an event listener for the `click` event. The last step is to call the `refreshBanner()` method on each change, which will toggle the banner depending on the `wifiState`. + +The navbar will have a Wifi icon and we will add an event listener for its `click` event as well. As the `refreshBanner()` method is called on each change, the icon will not only toggle the banner, but change according to the state of the connection: + +```html + +

    Gallery

    + +     + + +``` + +```ts +private banner: IgcBannerComponent; +private icon: IgcIconComponent; +private button: IgcButtonComponent; + +private wifiState: boolean = false; + +constructor() { + this.banner = document.getElementById('banner') as IgcBannerComponent; + this.icon = document.getElementById('icon') as IgcIconComponent; + this.button = document.getElementById('button') as IgcButtonComponent; + + this.icon.addEventListener('click', () => this.refreshBanner()); + this.button.addEventListener('click', () => this.refreshBanner()); +} + +public refreshBanner() { + if (!this.wifiState) { + this.icon.name = 'signal_wifi_4_bar'; + this.banner.hide(); + } else { + this.icon.name = 'signal_wifi_off'; + this.banner.show(); + } + this.wifiState = !this.wifiState; +} +``` + +```tsx + +

    Gallery

    + refreshBanner()}> +     + + + ... +
    + ... + refreshBanner()}> + + Turn On Wifi + +
    +     + +const bannerRef = useRef(null); +const iconRef = useRef(null); + +const [wifiState, setWifiState] = useState(false); + +function refreshBanner() { + if (!wifiState) { + iconRef.current.name = 'signal_wifi_4_bar'; + bannerRef.current.hide(); + } else { + iconRef.current.name = 'signal_wifi_off'; + bannerRef.current.show(); + } + setWifiState(current => !current); +} +``` + +```razor + +

    Gallery

    + +     + + + ... +
    + ... + + Turn On Wifi + + +
    +     + +@code { + private IgbBanner bannerRef; + private string iconName = "signal_wifi_off"; + private bool wifiState = false; + + private void RefreshBanner() + { + if (!this.wifiState) + { + this.iconName = "signal_wifi_4_bar"; + this.bannerRef.HideAsync(); + } + else + { + this.iconName = "signal_wifi_off"; + this.bannerRef.ShowAsync(); + } + this.wifiState = !this.wifiState; + } +} +``` + +Finally, we will add a `Toast`, displaying a message about the WiFi state. The results of the templated banner can be seen in the demo below: + +`sample="/notifications/banner/banner-advanced-sample", height="530", alt="{Platform} Banner Example"` + +## Styling + +The banner component exposes several CSS parts (`base`, `spacer`, `message`, `illustration`, `content` and `actions`) to give you full control over its style. + +```css +igc-banner::part(spacer) { + background: #dedede; +} + +igc-banner::part(illustration) { + color: #666666; +} + +igc-banner::part(content) { + color: #151515; +} +``` + +`sample="/notifications/banner/banner-styling", height="530", alt="{Platform} Banner Example"` + + +## API References + +- `Banner` +- `Card` +- `Icon` +- `Navbar` +- `Toast` +- `Ripple` + +## Additional Resources + +* [{ProductName} **Forums**]({ForumsLink}) +* [{ProductName} **GitHub**]({GithubLink}) \ No newline at end of file diff --git a/doc/en/components/radial-gauge.md b/doc/en/components/radial-gauge.md index 937c60320..09b5cefd8 100644 --- a/doc/en/components/radial-gauge.md +++ b/doc/en/components/radial-gauge.md @@ -335,9 +335,11 @@ The scale is visual element that highlights full range of values in the gauge wh `sample="/gauges/radial-gauge/scale", height="320", alt="{Platform} radial gauge scale"` -## Labels +## Labels and Titles The radial gauge labels are visual elements displaying numeric values at a specified interval between values of the `MinimumValue` and `MaximumValue` properties. You can position labels by setting the `LabelExtent` property to a fraction, where 0 represents center of gauge and 1 represents outer extent of the gauge backing. Also, you can customize labels setting various styling properties such as `FontBrush` and `Font`. +Each of these labels for the needle have various styling attributes you can apply to change the font, angle, brush and distance from the center of the gauge such as `TitleExtent`, `TitleAngle`, `SubtitleFontSize`, `HighlightLabelBrush`. + ```html + +``` + +```tsx + +``` + +```html + + +``` + +```razor + + +``` + ## Optical Scaling The radial gauge's labels and titles can change it's scaling. To enable this, first set `OpticalScalingEnabled` to true. Then you can set `OpticalScalingSize` which manages the size at which labels have 100% optical scaling. Labels will have larger fonts when gauge's size is larger. For example, labels will have a 200% larger font size when this property is set to 500 and the gauge px size is doubled to eg. 1000. @@ -651,7 +687,7 @@ You can enable an interactive mode of the gauge (using `IsNeedleDraggingEnabled` ## Highlight Needle -The radial gauge can be modified to show a second needle. This will make the main needle's `Value` appear with a lower opacity. To enable this first set `HighlightValueDisplayMode` to Overlay and then apply a `HighlightValue`. +The radial gauge can be modified to show a second needle. This will make the main needle's `Value` appear with a lower opacity. To enable this first set `HighlightValueDisplayMode` to Overlay and then apply a `HighlightValue`. ```html [!NOTE] +> The `DatePicker` is a brand new component from {ProductName} version 5.0.018.7.0. The old `DatePicker` prior to this version has been renamed to `XDatePicker` and its respective documentation page can be found under "Deprecated Components" + +## {Platform} Date Picker Example + +Below you can see a sample that demonstrates how the Date Picker works when users are enabled to pick a date through a manual text input and click on the calendar icon on the left to navigate to it. See how to render it. + +`sample="/scheduling/date-picker/overview", height="500", alt="{Platform} Date Picker Input Overview Example"` + +## Getting Started with {Platform} Date Picker + + +First, you need to install the {ProductName} by running the following command: + +```cmd +npm install {PackageWebComponents} +``` + +You will then need to import the `DatePicker`, its necessary CSS, and register its module, like so: + +```ts +import { defineComponents, IgcDatePickerComponent } from 'igniteui-webcomponents'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +defineComponents(IgcDatePickerComponent); +``` + + +First, you need to install the {ProductName} by running the following command: + +```cmd +npm install igniteui-react +``` + +You will then need to import the `DatePicker`, its necessary CSS, and register its module, like so: + +```tsx +import { IgrDatePicker, IgrDatePickerModule } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +IgrDatePickerModule.register(); +``` + + +To get started with the `DatePicker` component, first we need to register its module as follows: + +```razor +// in Program.cs file + +builder.Services.AddIgniteUIBlazor(typeof(IgbDatePickerModule)); +``` + +You will also need to link an additional CSS file to apply the styling to the `DatePicker` component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project: + +```razor + +``` + + +For a complete introduction to the {ProductName}, read the [*Getting Started*](../general-getting-started.md) topic. + +## Using the {Platform} Date Picker Component + +### Display Date Picker +To instantiate a `DatePicker` in its default `dropdown` state, use the following code: + +```html + +

    Date

    +     +``` + +```tsx + +``` + +```razor + +``` + +### Options + +The `DatePicker` can be bound to a `date` or a `string`. + + +The `DatePicker` can be bound to a `date`. + +```typescript +const DatePicker = document.querySelector('igc-date-picker') as IgcDatePickerComponent; +const date = new Date(); + +DatePicker.value = date; +``` +```tsx +datePickerRef.current.value = new Date(); +``` +```Razor + + + +@code { + + public DateTime SelectedDate { get; set; } + public IgbDatePicker DatePicker { get; set; } + + protected override void OnInitialized() + { + this.SelectedDate = DateTime.Today; + } +} +``` + +If a string is bound to the picker, it needs to be in the `ISO 8601` format: +```html + +``` + + +### Projecting components +With prefix and suffix slots we can add different content before and after the main content of the Input. + +```html + + + +``` +```tsx + + datePickerRef.current.stepUp(DatePart.Month)}> + + +``` +```razor + + + + +``` +The above snippet will add an additional icon at the end of the input, right after the default clear icon. This will not remove the default toggle icon, though as prefixes and suffixes can be stacked one after the other. + +#### Customizing the toggle and clear icons +The calendar and clear icon could be templated by using the `calendar` and `clear` slots: + +```html + + + + +``` +```tsx + + + + +``` +```razor + + + + +``` + +#### Custom action buttons +The picker's action buttons can be templated using the `actions` slot: +```html + + Show Week Numbers + +``` +```tsx + + datePickerRef.current.showWeekNumbers = true}> + Show Week Numbers + + +``` +```razor + + Show Week Numbers + +``` + +### Keyboard Navigation + +The `DatePicker` has intuitive keyboard navigation that makes it easy to increment, decrement, or jump through different DateParts among others without having to touch the mouse. + +|Keys|Description| +|----|-----------| +| ← | Move one character to the beginning | +| → | Move one character to the end | +| Home | Move to the beginning | +| End | Move to the end | +| Ctrl / Command + ← | Move to the beginning of the date/time section - current one or left one | +| Ctrl / Command + → | Move to the end of the date/time section - current on or right one | +| Focus on a date/time part + ↓ | Decrements a date/time part | +| Focus on a date/time part + ↑ | Increments a date/time part | +| Ctrl / Command + ; | Sets the current date/time as the value of the editor | +| Esc | Closes the calendar pop-up and focuses the input field | + +## Examples + +### Dialog Mode +The `DatePicker` also supports a `dialog` mode: +```html + + +``` +```tsx + +``` +```razor + +``` +`sample="/scheduling/date-picker/dialog-mode", height="500", alt="{Platform} Date Picker Dialog Mode Example"` + +### Display and input format +`InputFormat` and `DisplayFormat` are properties which can be set to make the picker's editor follow a specified format. The `InputFormat` is locale based, so if none is provided, the picker will default to the one used by the browser. + +A good thing to note is that the Date Picker Component will always add a leading zero on the `date` and `month` portions if they were provided in a format that does not have it, e.g. `d/M/yy` becomes `dd/MM/yy`. This applies only during editing. + +`DisplayFormat` is used to format the picker's input when it is not focused. If no `DisplayFormat` is provided, the picker will use the `InputFormat` as its `DisplayFormat`. + +More information about these can be found in the `IgcDateTimeInput` format section. + +`sample="/scheduling/date-picker/format", height="500", alt="{Platform} Date Picker Input Format Example"` + +### Increment and decrement +The `DatePicker` exposes `StepUp` and `StepDown` methods. Both of which come from the `IgcDateTimeInput` and can be used for incrementing and decrementing a specific `DatePart` of the currently set date. + +```html + + + + +``` +```tsx + + datePickerRef.current.stepUp(DatePart.Month)}> + + datePickerRef.current.stepDown(DatePart.Month)}> + + +``` +```razor + + + + + + +``` +### In Forms +The `DatePicker` could be used in a form element, the component's `Min` and `Max` properties act as form validators. + + +In forms, we can handle the `igcChange` event of the component and update the value of the label. + + +In forms, we can handle the `change` event of the component and update the value of the label. + + +In forms, we can handle the `Change` event of the component and update the value of the label. + + +`sample="/scheduling/date-picker/form", height="500", alt="{Platform} Date Picker Input Form Example"` + +### Calendar Specific settings +The `DatePicker` can modify some of the calendar's settings via the properties that the Date Picker exposes. Some of these include `VisibleMonths` which allows more than one calendar to be displayed when the picker expands, `WeekStart` which determines the starting day of the week, `ShowWeekNumbers` which shows the number for each week in the year and more. + +## Internationalization + +The localization of the `DatePicker` can be controlled through its `Locale` input. + +Here is how a `DatePicker` with Japanese locale definition would look like: +```html + + +``` +```tsx + +``` +```razor + +``` + +## Styling +The `DatePicker` component derives from the `Input` and `Calendar` component, so it exposes all available CSS parts. See [Input Styling](../inputs/input.md#styling) and [Calendar Styling](calendar.md#styling) for reference. + + +`sample="/scheduling/date-picker/styling", height="500", alt="{Platform} Date Picker Input Styling Example"` + +## API References + + - `Input` + - `Calendar` + - `DatePicker` + + +## Additional Resources + +* [{ProductName} **Forums**]({ForumsLink}) +* [{ProductName} **GitHub**]({GithubLink}) \ No newline at end of file diff --git a/doc/en/images/general/greenCheck.png b/doc/en/images/general/greenCheck.png new file mode 100644 index 000000000..6d0936686 Binary files /dev/null and b/doc/en/images/general/greenCheck.png differ diff --git a/doc/en/images/general/redX.png b/doc/en/images/general/redX.png new file mode 100644 index 000000000..ae748161d Binary files /dev/null and b/doc/en/images/general/redX.png differ diff --git a/doc/jp/components/charts/features/chart-axis-options.md b/doc/jp/components/charts/features/chart-axis-options.md index 71b875e3f..b1100fec1 100644 --- a/doc/jp/components/charts/features/chart-axis-options.md +++ b/doc/jp/components/charts/features/chart-axis-options.md @@ -32,7 +32,7 @@ _language: ja
    -## 軸ラベルの管理 +## 軸ラベルの管理と書式設定 チャートの軸には、所有する軸のラベルに使用可能なスペースの量に関する拡張計算を実行する機能があります。この拡張された計算により、軸は、指定された軸に対してより多くのラベルを表示するために、指定されたスペースの量を最適化できます。 @@ -42,11 +42,11 @@ _language: ja `AutoMarginAndAngleUpdateMode` を設定した後、`ShouldAutoExpandMarginForInitialLabels` プロパティを true に設定して自動マージンをオプトインするか `ShouldConsiderAutoRotationForInitialLabels` プロパティを true に設定して自動回転を行うことができます。`AutoExpandMarginExtraPadding` と `AutoExpandMarginMaximumValue` を設して、それぞれ追加のスペースまたは可能な最大マージンを提供することにより、適用される自動マージンをさらにカスタマイズすることもできます。 -`NumberFormatSpecifier` や `DateTimeFormatSpecifier` などのカスタム ラベル形式は、`XAxisLabelFormatSpecifier` および `YAxisLabelFormatSpecifier` コレクションを介して各軸に追加できます。一般に、Intl.NumberFormat および Intl.DateTimeFormat の言語に依存した数値、日付、時刻の書式設定を適用するために使用されます。カスタム形式をラベルに適用するには、`CategoryChart` で `YAxisLabelFormat` または `XAxisLabelFormat` を `{0}` に設定する必要があります。 +`NumberFormatSpecifier` や `DateTimeFormatSpecifier` などのカスタム ラベル書式は、`XAxisLabelFormatSpecifier` および `YAxisLabelFormatSpecifier` コレクションを介して各軸に追加できます。一般に、Intl.NumberFormat および Intl.DateTimeFormat の言語に依存した数値、日付、時刻の書式設定を適用するために使用されます。ラベルにカスタム書式を適用するには、`YAxisLabelFormat` または `XAxisLabelFormat` を `CategoryChart` のデータ項目のプロパティ名 (例: `{Date}`) に設定する必要があります。`FinancialChart` の場合、数値軸を使用するため、数値がコンテキストとなり、これを `{0}` に設定する必要があります。 次の例では、yAxis を `NumberFormatSpecifier` でフォーマットして、米国のトップ興行収入映画の $USD 価格を表します。 -`sample="/charts/category-chart/format-specifiers", height="450", alt="軸ラベルの {Platform} 形式指定子"` +`sample="/charts/category-chart/format-specifiers", height="450", alt="軸ラベルの {Platform} 書式指定子"`
    diff --git a/doc/jp/components/charts/features/chart-axis-types.md b/doc/jp/components/charts/features/chart-axis-types.md index 7dc0debfb..11d2d7974 100644 --- a/doc/jp/components/charts/features/chart-axis-types.md +++ b/doc/jp/components/charts/features/chart-axis-types.md @@ -13,8 +13,8 @@ _language: ja ## デカルト軸 -デカルト軸を持つ `XamDataChart` では3 種類の X 軸を使用して水平 (X 軸) および垂直 (X 軸) 方向にデータをプロットすることが可能です。 -(`CategoryXAxis`、`NumericXAxis`、および `TimeXAxis`) と 2 種類の Y 軸 (`CategoryYAxis` および `NumericYAxis`)。 +デカルト軸を持つ `XamDataChart` では 3 つのタイプの X 軸を使用して水平 (X 軸) および垂直 (X 軸) 方向にデータをプロットすることが可能です。 +(`CategoryXAxis`、`NumericXAxis`、および `TimeXAxis`) と 2 つのタイプの Y 軸 (`CategoryYAxis` および `NumericYAxis`)。 ### カテゴリ X 軸 @@ -109,7 +109,7 @@ _language: ja ### カテゴリ角度軸 -`CategoryAngleAxis` は、そのデータを一連のカテゴリ データ項目として扱います。この軸のラベルは、その順序での位置に従って円の端に沿って配置されます。この軸の種類では、数字、文字列などのほぼすべてのデータのタイプを表示できます。 +`CategoryAngleAxis` は、そのデータを一連のカテゴリ データ項目として扱います。この軸のラベルは、その順序での位置に従って円の端に沿って配置されます。この軸のタイプでは、数字、文字列などのほぼすべてのデータのタイプを表示できます。 `CategoryAngleAxis` は通常、[ラジアル シリーズ](../types/radial-chart.md)をプロットするために `NumericRadiusAxis` と共に使用されます。 @@ -117,6 +117,16 @@ _language: ja `sample="/charts/data-chart/radial-area-chart", height="500", alt="{Platform} カテゴリ角度軸の例"` +### 比例カテゴリ角度軸 + +`ProportionalCategoryAngleAxis` は、そのデータを一連のカテゴリ データ項目として扱います。この軸のラベルは、シーケンス内の位置に応じて円の端に沿って配置されます。この軸の種類では、数字、文字列などのほぼすべてのデータのタイプを表示できます。 + +`ProportionalCategoryAngleAxis` は通常、`NumericRadiusAxis` と一緒に使用され、円チャートをプロットします (例: [ラジアル シリーズ](../types/radial-chart.md))。 + +次の例は、`ProportionalCategoryAngleAxis` タイプの使用方法を示しています。 + + `sample="/charts/data-chart/radial-proportional-category-angle-axis", height="500", alt="{Platform} 比例カテゴリ角度軸の例"` + ### 数字角度軸 `NumericAngleAxis` は、そのデータを連続的に変化する数値データ項目として扱います。この軸領域のラベルは、円形プロットの中心から始まる半径線に沿って配置されます。`NumericAngleAxis` のラベルの位置は、[極座標シリーズ](../types/polar-chart.md) オブジェクトの `RadiusMemberPath` プロパティまたは[ラジアル シリーズ](../types/radial-chart.md) オブジェクトの `ValueMemberPath` プロパティを使用してマップされたデータ列の値によって異なります。 diff --git a/doc/jp/components/charts/features/chart-data-selection.md b/doc/jp/components/charts/features/chart-data-selection.md index ef88e3efd..3e1cde7da 100644 --- a/doc/jp/components/charts/features/chart-data-selection.md +++ b/doc/jp/components/charts/features/chart-data-selection.md @@ -67,6 +67,21 @@ _language: ja `sample="/charts/data-chart/radial-column-chart-selection", height="450", alt="{Platform} ラジアル縦棒チャートの複数モード選択の例"` + +## プログラムによる選択 + +チャートの選択項目は、起動時や実行時にチャートの選択項目を表示するようにコードで設定することもできます。これは、`CategoryChart` の `SelectedSeriesCollection` に項目を追加することで実現できます。`ChartSelection` オブジェクトの `Matcher` プロパティを使用すると、「マッチャー」に基づいてシリーズを選択できます。これはチャートから実際のシリーズにアクセスできない場合に最適です。データ ソースに含まれるプロパティがわかっていれば、シリーズが使用される `ValueMemberPath` を使用できます。 + +マッチャーは、`XamDataChart` のように実際のシリーズにアクセスできない場合、`CategoryChart` などのチャートで使用するのに最適です。この場合、データ ソースに含まれるプロパティがわかっていれば、シリーズに含まれる ValueMemberPaths を推測できます。たとえば、データ ソースに Nuclear、Coal、Oil、Solar という数値プロパティがある場合、これらのプロパティごとにシリーズが作成されていることがわかります。Solar 値にバインドされたシリーズをハイライト表示する場合は、次のプロパティが設定されたマッチャーを使用して、ChartSelection オブジェクトを `SelectedSeriesItems` コレクションに追加できます。 + +たとえば、データ ソースに Nuclear、Coal、Oil、Solar という数値プロパティがある場合、これらのプロパティごとにシリーズが作成されていることがわかります。Solar 値にバインドされたシリーズを選択する場合は、次のプロパティが設定されたマッチャーを使用して、ChartSelection オブジェクトを SelectedSeriesItems コレクションに追加できます。 + + + + `sample="/charts/category-chart/selection-matcher", height="500", alt="{Platform} 選択マッチャー"` + + + ## API リファレンス 以下は上記のセクションで説明した API メンバーのリストです。 diff --git a/doc/jp/components/charts/types/data-pie-chart.md b/doc/jp/components/charts/types/data-pie-chart.md new file mode 100644 index 000000000..c62d22ac2 --- /dev/null +++ b/doc/jp/components/charts/types/data-pie-chart.md @@ -0,0 +1,184 @@ +--- +title: {Platform} 円チャートとグラフ | {ProductName} +_description: {ProductName} データ円チャートは、セクションに分割された円形の領域で構成される、円チャートを表示するための UI コントロールです。無料でお試しください。 +_keywords: {Platform} charts, pie chart, {ProductName}, Infragistics, data binding, slice selection, animation, highlighting, legend, {Platform} チャート, 円チャート, インフラジスティックス, データ バインディング, スライスの選択, アニメーション, ハイライト表示, 凡例 +mentionedTypes: ["XamDataPieChart", "XamDataChart"] +namespace: Infragistics.Controls.Charts +_language: ja +--- +# {Platform} Data Pie Chart (データ円チャート) + +{ProductName} データ円チャートは、データ セットのカテゴリ (部分) がどのように合計 (全体) 値に構成されるかを示す部分対全体のチャートです。カテゴリは、円形または円グラフのセクションとして表示されます。各セクションまたは円スライスには、基本データ値に比例する円弧の長さがあります。カテゴリは、分析されている合計値に対する値のパーセンテージ (100 または 100% の一部) に基づいて、他のカテゴリに比例して表示されます。 + +## {Platform} データ円チャートの例 + +データ項目を文字列と数値データでバインドすることで、`XamDataPieChart` の {Platform} 円チャートが作成できます。これらのデータ値を足すと可視化率100%になります。 + +`sample="/charts/data-pie-chart/overview", height="600", alt="{Platform} データ円チャートの概要"` + +
    + +## {Platform} データ円チャートの推奨事項 + +円チャートは小さなデータ セットに適しており、一目で読みやすいです。円チャートは、部分から全体への視覚化の 1 つのタイプにすぎません。その他は次のとおりです。 + +- ドーナツ (リング) +- ファンネル +- 積層型エリア +- 積層型 100% エリア (積層型パーセンテージ エリア) +- 積層型棒 +- 積層型 100% 棒 (積層型パーセンテージ棒) +- ツリーマップ +- ウォーターフォール + +{Platform} データ円チャートには、次のようなデータを分析するためのビューア ツールを提供するインタラクティブ機能が含まれています。 + +- 凡例 +- スライスの選択 +- スライスのハイライト表示 +- チャート アニメーション + +円チャートのベスト プラクティス: + +- スライスまたはセグメントを、合計値または全体に比例するパーセンテージ値として比較します。 +- カテゴリのグループがどのように小さなセグメントに分割されるかを示します。 +- 小規模で階層化されていないデータ セット (6 ～ 8 セグメント未満のデータ) を提示します。 +- データ セグメントの合計が 100% になるようにします。 +- データの順序を最大 (最高) から最小 (最低) に並べます。 +- 12 時の位置から始めて時計回りに続けるなどの標準的なプレゼンテーション手法を使用します。 +- パーツのセグメント/スライスでカラー パレットを区別できるようにします。 +- 読みやすさを考慮して、セグメント内のデータ ラベルと凡例を比較します。 +- 理解しやすさに基づいて、円チャートの代わりに棒やリング などのチャートを選択します。 +- 比較分析のために複数の円チャートを隣り合わせに配置することは避けます。 + +以下の場合に円チャートを使用しないでください。 + +- 時間の経過に伴う変化を比較する場合は、棒、折れ線、またはエリア チャートを使用します。 +- 正確なデータ比較が必要な場合は、棒、折れ線、またはエリア チャートを使用します。 +- 6 つまたは 8 つを超えるセグメント (大量のデータ) がある場合 — データ ストーリーに適している場合は、棒、折れ線、またはエリア チャートを検討してください。 +- 棒チャートで、ビューアが値の違いを認識しやすくなります。 + +## {Platform} データ円チャートの凡例 + +凡例は、各ポイントに関する情報を表示し、合計に対する各ポイントの貢献度を知るために使用されます。 + +円チャートの隣に凡例を表示するには、ItemLegend を作成し、`Legend` プロパティに割り当てます。ItemLegend はデフォルトでは項目を縦方向に表示しますが、これは `Orientation` プロパティを設定することで変更できます。 + +凡例に表示されるラベルには、デフォルトで `XamDataPieChart` の各スライスに表示されるラベルと同じ内容が表示されますが、チャートの `LegendSliceLabelContentMode` プロパティを使用してこれを変更できます。これにより、ラベル、値、パーセンテージ、またはそれらの任意の組み合わせをチャート内の各スライスの凡例のコンテンツとして表示できる列挙が公開されます。 + +ItemLegend バッジを変更することもできます。デフォルトでは、関連付けられているチャートのスライスの色に対応する塗りつぶされた円として表示されます。これを設定するには、チャートの `LegendItemBadgeShape` プロパティを使用し、円、折れ線、棒、縦棒などに設定できます。 + +以下は、`XamDataPieChart` での ItemLegend の使用例です。 + +`sample="/charts/data-pie-chart/legend", height="600", alt="{Platform} データ円チャートの凡例"` + +
    + +## {Platform} 円チャートのその他カテゴリ + +円チャートの基本データに、小さい値を含む多くの項目が含まれる場合があります。この場合、Others カテゴリは、単一スライスへの複数のデータ値の自動集計を許可します。 + +`XamDataPieChart` の「その他」カテゴリには、`OthersCategoryType`、`OthersCategoryThreshold`、`OthersCategoryText` という 3 つの主要な構成可能なプロパティがあり、これらを使用して、チャート内の「その他」スライスの表示方法を構成できます。これらについては、それぞれ以下で説明します。 + +`OthersCategoryType` プロパティは、`XamDataPieChart` の `OthersCategoryThreshold` プロパティと連動して機能します。`OthersCategoryType` では、`OthersCategoryThreshold` を数値として評価するか、パーセンテージとして評価するかを定義できます。たとえば、数値を選択し、`OthersCategoryThreshold` を 5 に設定すると、5 未満の値を持つスライスはすべて「その他」カテゴリの一部になります。パーセント タイプで同じ値 5 を使用すると、`XamDataPieChart` の合計値の 5 パーセント未満の値はすべて「その他」カテゴリの一部になります。 + +デフォルトでは、「その他」スライスは「その他」というラベルで表されます。チャートの `OthersCategoryText` プロパティを変更することでこれを変更できます。 + +`XamDataPieChart` に「その他」カテゴリが表示されないようにするには、`OthersCategoryThreshold` を 0 に設定します。 + +以下のサンプルは、`XamDataPieChart` 内の Others スライスの使用方法を示しています。 + +`sample="/charts/data-pie-chart/others", height="600", alt="{Platform} 円チャートのその他"` + +
    + +## {Platform} データ円チャートの選択 + +`XamDataPieChart` は、チャートにプロットされたスライスをマウスでクリックしてスライスを選択できる機能をサポートしています。これは、以下で説明するチャートの `SelectionBehavior` プロパティと `SelectionMode` プロパティを利用して構成できます。 + +`SelectionBehavior` の主な 2 つのオプションは `PerDataItemSingleSelect` と `PerDataItemMultiSelect` で、それぞれ単一選択と複数選択を有効にします。 + +`SelectionMode` プロパティは、円チャートのスライスが選択された場合にどのように反応するかを決定します。以下はその列挙体のオプションとその機能です。 + +- `Brighten`: 選択したスライスがハイライト表示されます。 +- `FadeOthers`: 選択したスライスは同じ色のまま残り、他のスライスは色が薄くなります。 +- `FocusColorFill`: 選択したスライスの背景がチャートの FocusBrush に変更されます。 +- `FocusColorOutline`: 選択されたスライスには、チャートの FocusBrush によって定義された色のアウトラインが表示されます。 +- `FocusColorThickOutline`: 選択されたスライスには、チャートの FocusBrush によって定義された色のアウトラインが表示されます。このアウトラインの太さは、コントロールの Thickness プロパティを使用して設定することもできます。 +- `GrayscaleOthers`: 選択されていないスライスにはグレー色のフィルターが適用されます。 +- `None`: 選択されたスライスには影響はありません。 +- `SelectionColorFill`: 選択されたスライスの背景がチャートの SelectionBrush に変更されます。 +- `SelectionColorOutline`: 選択されたスライスには、チャートの SelectionBrush によって定義された色のアウトラインが表示されます。 +- `SelectionColorThickOutline`: 選択されたスライスには、チャートの FocusBrush によって定義された色のアウトラインが表示されます。このアウトラインの太さは、コントロールの Thickness プロパティを使用して設定することもできます。 +- `ThickOutline`: 選択されたスライスには、チャートの Thickness プロパティに応じて太さが異なるアウトラインが適用されます。 + +スライスが選択されると、その基になるデータ項目がチャートの SelectedSeriesItems コレクションに追加されます。そのため、XamDataPieChart は SelectedSeriesItemsChanged イベントを公開して、スライスが選択されてこのコレクションが変更されたことを検出します。 + +以下のサンプルは、`XamDataPieChart` コントロールの選択機能を示しています。 + +`sample="/charts/data-pie-chart/selection", height="600", alt="{Platform} 円チャートの選択"` + +
    + +## {Platform} データ円チャートのハイライト表示 + +`XamDataPieChart` は、マウス オーバーによるハイライト表示と、別のデータ ソースを提供することで設定できるハイライト表示オーバーレイをサポートしています。 + +`HighlightingBehavior` 列挙プロパティは、スライスがどのようにハイライト表示されるかを決定します。以下はそのプロパティのオプションとその機能です。 + +- `DirectlyOver`: スライスは、マウスがその上に直接置かれている場合にのみハイライト表示されます。 +- `NearestItems`: マウスの位置に最も近いスライスがハイライト表示されます。 +- `NearestItemsAndSeries`: マウスの位置に最も近いスライスとシリーズがハイライト表示されます。 +- `NearestItemsRetainMainShapes`: マウスの位置に最も近い項目がハイライト表示され、シリーズのメイン図形はハイライト表示されなくなります。 + +`HighlightingMode` 列挙プロパティは、データ円チャートのスライスがハイライト表示されたときにどのように反応するかを決定します。以下はそのプロパティのオプションとその機能です。 + +- `Brighten`: マウスの位置がそのシリーズ上または近くにあると、そのシリーズの色が明るくなります。 +- `BrightenSpecific`: マウスの位置が特定のスライスの上または近くにある場合、そのスライスの色が明るくなります。 +- `FadeOthers`: マウスの位置がそのシリーズ上または近くにある場合、そのシリーズは色を保持しますが、他の部分は薄く表示されます。 +- `FadeOthersSpecific`: マウスの位置がそのスライスの上または近くにある場合、そのスライスの色は保持されますが、他のスライスの色は薄く表示されます。 +- `None`: シリーズとスライスはハイライト表示されません。 + +以下の例は、`XamDataPieChart` コンポーネントのマウスハイライト表示の動作を示しています。 + +`sample="/charts/data-pie-chart/highlighting", height="600", alt="{Platform} データ円チャートのハイライト表示"` + +マウスのハイライト表示に加えて、`XamDataPieChart` はデータのサブセットを表示できるハイライト表示フィルター機能を公開します。これは、コントロールの `HighlightedDataSource` を指定し、`HighlightedValuesDisplayMode` プロパティを `Overlay` に設定することによって適用されます。`HighlightedDataSource` は、`XamDataPieChart` の `DataSource` プロパティに割り当てられたデータのサブセットを想定しています。 + +これらの条件が満たされると、サブセットの値がハイライト表示され、データの全セットの残りの部分はフェードアウトされます。これにより、サブセットが効果的にハイライトされ、同じコントロール内でデータのサブセットをより簡単に視覚化できるようになります。 + +
    + +## {Platform} データ円チャートのアニメーション + +`XamDataPieChart` は、スライスの表示や値の変更時のアニメーション化をサポートしています。 + +`IsTransitionInEnabled` プロパティを **true** に設定すると、円チャートがアニメーションで表示されます。実行されるアニメーションのタイプは、`TransitionInMode` 列挙プロパティを表示したいアニメーションのタイプに設定することで構成できます。さらに、`TransitionInSpeedType` プロパティを、インデックス、値、通常、またはランダム化でスケー​​ルするように設定することもできます。このアニメーションの期間は、`TimeSpan` を受け取る `TransitionInDuration` プロパティで制御できます。 + +データの変更をアニメーション化する場合は、`AnimateSeriesWhenAxisRangeChanges` プロパティを **true** に設定することでも実行できます。この変更の期間は、`TransitionDuration` プロパティを設定することでも構成できます。 + +以下のは、`XamDataPieChart` コントロールでのアニメーションを使用する方法を示しています。 + +`sample="/charts/data-pie-chart/animation", height="600", alt="{Platform} データ円チャートのアニメーション"` + +
    + +## その他のリソース + +- [ドーナツ チャート](donut-chart.md) +- [極座標チャート](polar-chart.md) +- [ラジアル チャート](radial-chart.md) + +## API リファレンス + +以下のテーブルは、上記のセクションで説明した API メンバーをリストします。 + +- `OthersCategoryThreshold` +- `OthersCategoryType` +- `SelectionMode` + + |チャート タイプ | コントロール名 | API メンバー | + |-----------------|----------------|------------ | + |データ円チャート | `XamDataPieChart` | `XamDataPieChart` | + |項目凡例 | `ItemLegend` | `ItemLegend` | + diff --git a/doc/jp/components/charts/types/radial-chart.md b/doc/jp/components/charts/types/radial-chart.md index dccbf170b..78c131bd6 100644 --- a/doc/jp/components/charts/types/radial-chart.md +++ b/doc/jp/components/charts/types/radial-chart.md @@ -58,7 +58,11 @@ _language: ja `sample="/charts/data-chart/radial-area-chart-styling", height="600", alt="{Platform} ラジアル エリア チャートのスタイル設定"` +
    + +## {Platform} ラジアル チャートの設定 +さらに、ラベルはチャートの近くまたは広い位置に表示されるように設定できます。これは、`CategoryAngleAxis` の `LabelMode` プロパティで設定できます。
    diff --git a/doc/jp/components/editors/date-picker.md b/doc/jp/components/editors/date-picker.md deleted file mode 100644 index 75a3dc8dc..000000000 --- a/doc/jp/components/editors/date-picker.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: {Platform} 日付選択 | データ可視化ツール | インフラジスティックス -_description: インフラジスティックスの {Platform} 日付選択コンポーネントは、ユーザーの日付選択を支援します。{ProductName} でグラフと視覚化を改善します! -_keywords: {Platform} date picker, drop down, {ProductName}, Infragistics, 日付選択, ドロップダウン, インフラジスティックス -mentionedTypes: ['DatePicker'] -_language: ja ---- -# {Platform} 日付選択の概要 - -日付選択コンポーネントは、ドロップダウン カレンダー UI を使用して日、月、年を直感的に選択できます。これは、アプリケーション ユーザーが特定の日付を選択する必要があり、複数のエディターを組み合わせて日付範囲 UI を作成する場合に便利です。 - -## {Platform} 日付選択の例 - -このサンプルは、単一の日付を選択するオプションを使用して `DatePicker` を作成する方法を示しています。 - -`sample="/editors/date-picker/overview", height="350", alt="{Platform} 日付選択の例"` - - - - -## 依存関係 -日付選択コンポーネントをインストールするときに core と input のパッケージもインストールする必要があります。 - -```cmd -npm install --save {PackageCore} -npm install --save {PackageInputs} -npm install --save {PackageLayouts} -``` - - -## モジュールの要件 - -日付選択コンポーネントを使用するには、以下のモジュールを登録する必要があります。 - -```razor -// in Program.cs file - -builder.Services.AddIgniteUIBlazor( - typeof(IgbDatePickerModule)); -``` - -```ts -import { IgrDatePickerModule } from 'igniteui-react-inputs'; - -IgrDatePickerModule.register(); -``` - -```ts -import { IgcDatePickerModule } from 'igniteui-webcomponents-inputs'; -import { ModuleManager } from 'igniteui-webcomponents-core'; - -ModuleManager.register(IgcDatePickerModule); -``` - -
    - -## 使用方法 - -{Platform} 日付選択エディター コンポーネントは、デフォルトでは、テキスト エリア、カレンダー ドロップダウン ボタン、およびクリア ボタンの 3 つの構成されます。これらの領域について以下に説明します。 - -- テキスト エリア: エディターの `Value` プロパティに保存されている選択した日付を表示します。 - -- カレンダー: カレンダー ボタンをクリックすると、日付選択のカレンダー ドロップダウンが開きます。カレンダーが開き、現在選択されている `Value` の月が表示されます。`Value` が指定されていない場合、カレンダーは現在の日付に対応する月を表示します。上部の月をクリックすると、月のリストが表示され、年も同様です。月と年の可視化の左右にある矢印ボタンは、表示されている月を時系列で増減します。 - -- クリア ボタン: x アイコンは現在の値をクリアします。 - -| プロパティ | タイプ | 説明 | -| ---------|------|------------ | -| `IconColor` | string | カレンダー ボタンの色を変更します。 | -| `AllowTextInput` | bool | このプロパティを true に切り替えることで、日付ピッカーの値を入力して変更できます。 | -| `DateFormat` | enum | デフォルトは DateShort です。例: 'mm/dd/yyyy'。DateLong に設定すると、エディターに表示される曜日を含めた日付が表示されます。例: 2021年4月14日水曜日。 | -| `FirstDayOfWeek` | enum | デフォルトは日曜日です。特定の曜日が、カレンダーの各週の行の最初の日として使用されます。例えば、月曜日から日曜日。 | -| `FormatString` | string | DateShort を使用すると、日付の形式を構成できます。例えば、'dd/mm/yyyy'。`DateFormat` の DateLong と `FormatString` が設定されている場合、`DateFormat` は無視されることに注意してください。 | -| `Label` | string | 日付ピッカーの左上隅の日付の上にカスタム テキストを表示します。 | -| `MinDate` | DateTime | 以前の日付が選択または表示されないように制限します。 | -| `MaxDate` | DateTime | 後の日付が選択または表示されないように制限します。 | -| `Placeholder` | string | カレンダーの編集部分の値がクリアされたときに表示されるカスタム文字列。 | -| `ShowClearButton` | bool | デフォルトは true で、クリア ボタンはカレンダー ボタンのすぐ左にあり、X で視覚化されます。クリックすると、日付ピッカーの `Value` がクリアされます。クリア ボタンの表示は、オンとオフを切り替えることができます。 | -| `ShowTodayButton`| bool | 本日は、カレンダーが開かれた日付のすぐ下に表示されます。クリックすると、現在の日付が選択されます。本日のボタンの表示は、オンとオフを切り替えることができます。 | -| `ShowWeekNumbers` | bool | 週番号は、日付ピッカーのドロップダウン部分の日付のすべての行の左側に番号として表示できます。週番号の表示のオンとオフを切り替えることができます。 | -| `FirstWeekOfYear` | enum | 年間の週の開始番号を構成します。FirstDay、FirstFourDayWeek、FirstFullWeek に設定できます。 | -| `OpenOnFocus` | bool | デフォルトでは、日付ピッカーのドロップダウン部分はシングル クリックで開かれ、ユーザーはカレンダー ボタンをクリックしてカレンダーをドロップダウンする必要があります。 | -| `Value` | date | 日付ピッカーの値を設定し、ドロップダウン カレンダーで選択します。 | - -ユーザーは、コントロールのさまざまなテキスト プロパティを使用して日付選択のフォントをカスタマイズできます。使用できるプロパティは `TextColor`、`TextFontFamily`、`TextFontSize`、`TextFontStyle`、および `TextFontWeight` です。 - -### 編集 - -次の例は、`DatePicker` で編集を有効にする方法を示しています。 - -`sample="/editors/date-picker/editing", height="300", alt="{Platform} Date Picker 編集の例"` - - - -
    - -### 日付制限 - -次の例は、`DatePicker` で選択した日付を制限する方法を示しています。 - -`sample="/editors/date-picker/date-limits", height="360", alt="{Platform} Date Picker 日付制限の例"` - - - -
    - -### 日付の書式 - -次の例は、`DatePicker` で長い日付を適用する方法を示しています。 - -`sample="/editors/date-picker/format", height="350", alt="{Platform} Date Picker 書式の例"` - - - -
    - -### 日付範囲 - -次の例は、複数の `DatePicker` コントロールを組み合わせる方法を示しています。 - -`sample="/editors/date-picker/range", height="300", alt="{Platform} Date Picker 日付範囲の例"` - - - -
    - -## API リファレンス - -以下は、上記のセクションで説明した API メンバーのリストです: - -- `DatePicker` -- `IconColor` -- `AllowTextInput` -- `DateFormat` -- `FirstDayOfWeek` -- `FormatString` -- `Label` -- `MinDate` -- `MaxDate` -- `Placeholder` -- `ShowClearButton` -- `ShowTodayButton` -- `ShowWeekNumbers` -- `FirstWeekOfYear` -- `OpenOnFocus` -- `Value` -- `TextColor` -- `TextFontFamily` -- `TextFontSize` -- `TextFontStyle` -- `TextFontWeight` diff --git a/doc/jp/components/editors/xdate-picker.md b/doc/jp/components/editors/xdate-picker.md new file mode 100644 index 000000000..1d9e23f03 --- /dev/null +++ b/doc/jp/components/editors/xdate-picker.md @@ -0,0 +1,154 @@ +--- +title: {Platform} XDate Picker | データ可視化ツール | インフラジスティックス +_description: インフラジスティックスの {Platform} XDate Picker コンポーネントは、ユーザーの日付選択を支援します。{ProductName} でグラフと視覚化を改善します! +_keywords: {Platform} xdate picker, drop down, {ProductName}, Infragistics, ドロップダウン, インフラジスティックス +mentionedTypes: ['XDatePicker'] +_language: ja +--- +# {Platform} XDate Picker (XDate ピッカー) の概要 + +XDate Picker コンポーネントは、ドロップダウン カレンダー UI を使用して日、月、年を直感的に選択できます。これは、アプリケーション ユーザーが特定の日付を選択する必要があり、複数のエディターを組み合わせて日付範囲 UI を作成する場合に便利です。 + +> [!WARNING] +> `XDatePicker` コンポーネントは、{ProductName} のバージョン 5.0.018.7.0 以降では非推奨です。サポートされている最新の {ProductName} Date Picker コンポーネントについては、「スケジュール」のそれぞれのページを参照してください。 + +## {Platform} XDate Picker の例 + +このサンプルは、単一の日付を選択するオプションを使用して `XDatePicker` を作成する方法を示しています。 + +`sample="/editors/date-picker/overview", height="350", alt="{Platform} XDate Picker の例"` + + + + +## 依存関係 +XDate Picker コンポーネントをインストールするときに core と input のパッケージもインストールする必要があります。 + +```cmd +npm install --save {PackageCore} +npm install --save {PackageInputs} +npm install --save {PackageLayouts} +``` + + +## コンポーネント モジュール + +XDate Picker コンポーネントを使用するには、以下のモジュールを登録する必要があります。 + +```razor +// in Program.cs file + +builder.Services.AddIgniteUIBlazor( + typeof(IgbXDatePickerModule)); +``` + +```ts +import { IgrXDatePickerModule } from 'igniteui-react-inputs'; + +IgrXDatePickerModule.register(); +``` + +```ts +import { IgcXDatePickerModule } from 'igniteui-webcomponents-inputs'; +import { ModuleManager } from 'igniteui-webcomponents-core'; + +ModuleManager.register(IgcXDatePickerModule); +``` + +
    + +## 使用方法 + +{Platform} XDate Picker エディター コンポーネントは、デフォルトでは、テキスト領域、カレンダー ドロップダウン ボタン、およびクリア ボタンの 3 つの構成されます。これらの領域について以下に説明します。 + +- テキスト領域: エディターの `Value` プロパティに保存されている選択した日付を表示します。 + +- カレンダー: カレンダー ボタンをクリックすると、XDate Picker のカレンダー ドロップダウンが開きます。カレンダーが開き、現在選択されている `Value` の月が表示されます。`Value` が指定されていない場合、カレンダーは現在の日付に対応する月を表示します。上部の月をクリックすると、月のリストが表示され、年も同様です。月と年の可視化の左右にある矢印ボタンは、表示されている月を時系列で増減します。 + +- クリア ボタン: x アイコンは現在の値をクリアします。 + +| プロパティ | タイプ | 説明 | +| ---------|------|------------ | +| `IconColor` | string | カレンダー ボタンの色を変更します。 | +| `AllowTextInput` | bool | このプロパティを true に切り替えることで、XDate Picker の値を入力して変更できます。 | +| `DateFormat` | enum | デフォルトは DateShort です。例: 'mm/dd/yyyy'。DateLong に設定すると、エディターに表示される曜日を含めた日付が表示されます。例: 2021年4月14日水曜日。 | +| `FirstDayOfWeek` | enum | デフォルトは日曜日です。特定の曜日が、カレンダーの各週の行の最初の日として使用されます。例えば、月曜日から日曜日。 | +| `FormatString` | string | DateShort を使用すると、日付の形式を構成できます。例えば、'dd/mm/yyyy'。`DateFormat` の DateLong と `FormatString` が設定されている場合、`DateFormat` は無視されることに注意してください。 | +| `Label` | string | XDate Picker の左上隅の日付の上にカスタム テキストを表示します。 | +| `MinDate` | DateTime | 以前の日付が選択または表示されないように制限します。 | +| `MaxDate` | DateTime | 後の日付が選択または表示されないように制限します。 | +| `Placeholder` | string | カレンダーの編集部分の値がクリアされたときに表示されるカスタム文字列。 | +| `ShowClearButton` | bool | デフォルトは true で、クリア ボタンはカレンダー ボタンのすぐ左にあり、X で視覚化されます。クリックすると、XDate Picker の `Value` がクリアされます。クリア ボタンの表示は、オンとオフを切り替えることができます。 | +| `ShowTodayButton`| bool | 本日は、カレンダーが開かれた日付のすぐ下に表示されます。クリックすると、現在の日付が選択されます。本日のボタンの表示は、オンとオフを切り替えることができます。 | +| `ShowWeekNumbers` | bool | 週番号は、XDate Picker のドロップダウン部分の日付のすべての行の左側に番号として表示できます。週番号の表示のオンとオフを切り替えることができます。 | +| `FirstWeekOfYear` | enum | 年間の週の開始番号を構成します。FirstDay、FirstFourDayWeek、FirstFullWeek に設定できます。 | +| `OpenOnFocus` | bool | デフォルトでは、XDate Picker のドロップダウン部分はシングル クリックで開かれ、ユーザーはカレンダー ボタンをクリックしてカレンダーをドロップダウンする必要があります。 | +| `Value` | date | XDate Picker の値を設定し、ドロップダウン カレンダーで選択します。 | + +ユーザーは、コントロールのさまざまなテキスト プロパティを使用して XDate Picker のフォントをカスタマイズできます。使用できるプロパティは `TextColor`、`TextFontFamily`、`TextFontSize`、`TextFontStyle`、および `TextFontWeight` です。 + +### 編集 + +次の例は、`XDatePicker` で編集を有効にする方法を示しています。 + +`sample="/editors/date-picker/editing", height="300", alt="{Platform} XDate Picker 編集の例"` + + + +
    + +### 日付制限 + +次の例は、`XDatePicker` で選択した日付を制限する方法を示しています。 + +`sample="/editors/date-picker/date-limits", height="360", alt="{Platform} XDate Picker Date 制限の例"` + + + +
    + +### 日付の書式 + +次の例は、`XDatePicker` で長い日付を適用する方法を示しています。 + +`sample="/editors/date-picker/format", height="350", alt="{Platform} XDate Picker 書式の例"` + + + +
    + +### 日付範囲 + +次の例は、複数の `XDatePicker` コントロールを組み合わせる方法を示しています。 + +`sample="/editors/date-picker/range", height="300", alt="{Platform} XDate Picker 日付範囲の例"` + + + +
    + +## API リファレンス + +以下は上記のセクションで説明した API メンバーのリストです。 + +- `XDatePicker` +- `IconColor` +- `AllowTextInput` +- `DateFormat` +- `FirstDayOfWeek` +- `FormatString` +- `Label` +- `MinDate` +- `MaxDate` +- `Placeholder` +- `ShowClearButton` +- `ShowTodayButton` +- `ShowWeekNumbers` +- `FirstWeekOfYear` +- `OpenOnFocus` +- `Value` +- `TextColor` +- `TextFontFamily` +- `TextFontSize` +- `TextFontStyle` +- `TextFontWeight` diff --git a/doc/jp/components/general-changelog-dv-blazor.md b/doc/jp/components/general-changelog-dv-blazor.md index 5cac4640c..e7f3d35bc 100644 --- a/doc/jp/components/general-changelog-dv-blazor.md +++ b/doc/jp/components/general-changelog-dv-blazor.md @@ -11,13 +11,17 @@ _language: ja {ProductName} の各バージョンのすべての重要な変更は、このページに記載されています。 +## **{PackageVerChanges-24-1-JUN}** + ### 一般 - `Input`、`Textarea` - ユーザー入力を制限することなく検証ルールを適用できるように `ValidateOnly` を公開しました。 - `Dropdown` - `PositionStrategy` プロパティは非推奨です。ドロップダウンは、ブラウザー ビューポートの最上位レイヤーにコンテナーをレンダリングするために `Popover` API を使用するようになったため、このプロパティは廃止されました。 - `DockManager` - `SplitPane` の `IsMaximized` は非推奨です。分割ペイン レベルで isMaximized を true に設定しても、分割ペインはコンテナーとしてのみ機能し、最大化されて表示される実際のコンテンツがないため、実際の効果はありません。代わりに、`TabGroupPane` および/または `ContentPane` の `IsMaximized` プロパティを使用してください。 ### {PackageGrids} -- `DisplayDensity` は非推奨となり、代わりに `--ig-size` CSS カスタム プロパティが使用されるようになりました。 + +- `DisplayDensity` は非推奨となり、代わりに `--ig-size` CSS カスタム プロパティが使用されるようになりました。詳細については、[グリッド サイズ](grids/grid/size.md) トピックを参照してください。 + - `PivotGrid` - `PivotConfiguration` オプションの列、行、フィルターのタイプが、IgbPivotDimension の配列である `IgbPivotDimension[]` になりました (以前は `IgbPivotDimensionCollection` でした)。 `PivotConfiguration` オプションの値のタイプが、IgbPivotValue の配列である `IgbPivotValue[]` になりました (以前は `IgbPivotValueCollection` でした)。 @@ -29,6 +33,8 @@ _language: ja - [チャートの選択](charts/features/chart-data-selection.md) - 新しいシリーズ選択のスタイル設定。これは、`CategoryChart` および `XamDataChart` のすべてのカテゴリ、財務、およびラジアル シリーズに広く採用されています。シリーズはクリックして異なる色で表示したり、明るくしたり、薄くしたり、フォーカスのアウトラインを表示したりできます。個々のシリーズまたはデータ項目全体を通じて影響を受ける項目を管理します。 複数のシリーズとマーカーがサポートされています。特定のデータ項目の値間のさまざまな相違点や類似点を示すのに役立ちます。また、`SelectedSeriesItemsChanged` イベントと `SelectedSeriesItems` は、選択内容に基づいたデータ分析を行うポップアップやその他の画面など、アプリケーション内で実行できるその他のアクションを取り巻く堅牢なビジネス要件を構築するための追加の支援として利用できます。 +- [比例カテゴリ角度軸](charts/types/radial-chart.md) - `XamDataChart` のラジアル円シリーズの新しい軸により、データ チャートのすべての追加機能を使用してロバスト可能な視覚化をする円チャートの作成が可能になります。 + - [ツリーマップのハイライト表示](charts/types/treemap-chart.md#{PlatformLower}-リーマップのハイライト表示) - ツリー マップの項目のマウスオーバーによるハイライト表示を構成できる `HighlightingMode` プロパティが公開されました。このプロパティには 2 つのオプションがあります: `Brighten` では、マウスを置いた項目にのみハイライト表示が適用され、`FadeOthers` では、マウスホバーした項目のハイライト表示はそのままで、それ以外はすべてフェードアウトします。このハイライト表示はアニメーション化されており、`HighlightingTransitionDuration` プロパティを使用して制御できます。 - [ツリーマップのパーセントベースのハイライト表示](charts/types/treemap-chart.md#{PlatformLower}-ツリーマップのパーセントベースのハイライト表示) - 新しいパーセントベースのハイライト表示により、ノードはコレクションの進行状況またはサブセットを表すことができます。外観は、データ項目のメンバーによって、または新しい `HighlightedItemsSource` を指定することによって、特定の値までの背景色の塗りつぶしとして表示されます。`HighlightedValuesDisplayMode` で切り替えることができ、`FillBrushes` でスタイルを設定できます。 @@ -307,7 +313,7 @@ _language: ja * [Button & Icon Button](inputs/button.md) * [Card](layouts/card.md) * [Checkbox](inputs/checkbox.md) -* [Form](inputs/form.md) +* Form * [Icon](layouts/icon.md) * [List](grids/list.md) * [Navigation Bar](menus/navbar.md) diff --git a/doc/jp/components/general-changelog-dv-react.md b/doc/jp/components/general-changelog-dv-react.md index 632deda06..2d88ff3df 100644 --- a/doc/jp/components/general-changelog-dv-react.md +++ b/doc/jp/components/general-changelog-dv-react.md @@ -18,7 +18,8 @@ _language: ja - `DockManager` - `SplitPane` の `IsMaximized` は非推奨です。分割ペイン レベルで isMaximized を true に設定しても、分割ペインはコンテナーとしてのみ機能し、最大化されて表示される実際のコンテンツがないため、実際の効果はありません。代わりに、`TabGroupPane` および/または `ContentPane` の `IsMaximized` プロパティを使用してください。 ### {PackageGrids} -- `DisplayDensity` は非推奨となり、代わりに `--ig-size` CSS カスタム プロパティが使用されるようになりました。 + +- `DisplayDensity` は非推奨となり、代わりに `--ig-size` CSS カスタム プロパティが使用されるようになりました。詳細については、[グリッド サイズ](grids/grid/size.md) トピックを参照してください。 - `PivotGrid` - コンポーネントの構成が正しく適用できるようになりました。 @@ -29,6 +30,8 @@ _language: ja - [チャートの選択](charts/features/chart-data-selection.md) - 新しいシリーズ選択のスタイル設定。これは、`CategoryChart` および `XamDataChart` のすべてのカテゴリ、財務、およびラジアル シリーズに広く採用されています。シリーズはクリックして異なる色で表示したり、明るくしたり、薄くしたり、フォーカスのアウトラインを表示したりできます。個々のシリーズまたはデータ項目全体を通じて影響を受ける項目を管理します。 複数のシリーズとマーカーがサポートされています。特定のデータ項目の値間のさまざまな相違点や類似点を示すのに役立ちます。また、`SelectedSeriesItemsChanged` イベントと `SelectedSeriesItems` は、選択内容に基づいたデータ分析を行うポップアップやその他の画面など、アプリケーション内で実行できるその他のアクションを取り巻く堅牢なビジネス要件を構築するための追加の支援として利用できます。 +- [比例カテゴリ角度軸](charts/types/radial-chart.md) - `XamDataChart` のラジアル円シリーズの新しい軸により、データ チャートのすべての追加機能を使用してロバスト可能な視覚化をする円チャートの作成が可能になります。 + - [ツリーマップのハイライト表示](charts/types/treemap-chart.md#{PlatformLower}-リーマップのハイライト表示) - ツリー マップの項目のマウスオーバーによるハイライト表示を構成できる `HighlightingMode` プロパティが公開されました。このプロパティには 2 つのオプションがあります: `Brighten` では、マウスを置いた項目にのみハイライト表示が適用され、`FadeOthers` では、マウスホバーした項目のハイライト表示はそのままで、それ以外はすべてフェードアウトします。このハイライト表示はアニメーション化されており、`HighlightingTransitionDuration` プロパティを使用して制御できます。 - [ツリーマップのパーセントベースのハイライト表示](charts/types/treemap-chart.md#{PlatformLower}-ツリーマップのパーセントベースのハイライト表示) - 新しいパーセントベースのハイライト表示により、ノードはコレクションの進行状況またはサブセットを表すことができます。外観は、データ項目のメンバーによって、または新しい `HighlightedItemsSource` を指定することによって、特定の値までの背景色の塗りつぶしとして表示されます。`HighlightedValuesDisplayMode` で切り替えることができ、`FillBrushes` でスタイルを設定できます。 diff --git a/doc/jp/components/general-changelog-dv-wc.md b/doc/jp/components/general-changelog-dv-wc.md index 715c68530..8601bf847 100644 --- a/doc/jp/components/general-changelog-dv-wc.md +++ b/doc/jp/components/general-changelog-dv-wc.md @@ -3,24 +3,24 @@ title: {Platform} 新機能 | {ProductName} | インフラジスティックス _description: {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", "XamRadialGauge", "XamRadialChart", "Toolbar"] -namespace: Infragistics.Controls.Charts +namespace: Infragistics.Controls _language: ja --- # {ProductName} 変更ログ {ProductName} の各バージョンのすべての重要な変更は、このページに記載されています。 -## **{PackageVerChanges-24-1-JUN}** +### **{PackageVerChanges-24-1-JUN}** -### {PackageCommon} +#### {PackageCommon} - `Input`、`Textarea` - ユーザー入力を制限することなく検証ルールを適用できるように `ValidateOnly` を公開しました。 - `Dropdown` - `PositionStrategy` プロパティは非推奨です。ドロップダウンは、ブラウザー ビューポートの最上位レイヤーにコンテナーをレンダリングするために `Popover` API を使用するようになったため、このプロパティは廃止されました。 - `DockManager` - `SplitPane` の `IsMaximized` は非推奨です。分割ペイン レベルで isMaximized を true に設定しても、分割ペインはコンテナーとしてのみ機能し、最大化されて表示される実際のコンテンツがないため、実際の効果はありません。代わりに、`TabGroupPane` および/または `ContentPane` の `IsMaximized` プロパティを使用してください。 -### {PackageGrids} -- `DisplayDensity` は非推奨となり、代わりに `--ig-size` CSS カスタム プロパティが使用されるようになりました。 +#### {PackageGrids} +- `DisplayDensity` 非推奨となり、代わりに `--ig-size` CSS カスタム プロパティが使用されるようになりました。詳細については、[グリッド サイズ](grids/grid/size.md) トピックを参照してください。 -### {PackageCharts} (チャート) +#### {PackageCharts} (チャート) * [データ凡例のグループ化](charts/features/chart-data-legend.md#{PlatformLower}-データ凡例のグループ化) と [データ ツールチップのグループ化](charts/features/chart-data-tooltip.md#{PlatformLower}-データ-チャートのデータ-ツールチップのグループ化) - 新しいグループ化機能が追加されました。`GroupRowVisible` プロパティは、各シリーズのグループ化を切り替え、オプトインすると `DataLegendGroup` プロパティを介してグループ テキストを割り当てることができます 同じ値が複数のシリーズに適用されている場合、それらはグループ化されて表示されます。すべてのユーザー向けに分類および整理する必要がある大規模なデータセットに役立ちます。 @@ -33,120 +33,700 @@ _language: ja - `Toolbar` - 選択した特定のツールの周囲に境界線を描くための ToolAction の新しい `IsHighlighted` オプション。 -### {PackageGauges} (ゲージ) +#### {PackageGauges} (ゲージ) - `XamRadialGauge` - ハイライト針の新しいラベル。`HighlightLabelText` と `HighlightLabelSnapsToNeedlePivot` および、その他の HighlightLabel の多くのスタイル関連プロパティが追加されました。 -## **{PackageVerChanges-23-2-MAR}** +### **{PackageVerChanges-23-2-MAR}** -### {PackageCharts} +- 新しい [`HierarchicalGrid`](grids/hierarchical-grid/overview.md) ンポーネント -- `InitialFilter` プロパティによる新しいデータ フィルタリング。フィルター式を適用して、チャート データをレコードのサブセットにフィルターします。大規模なデータのドリルダウンに使用できます。 +### **{PackageVerChanges-23-2-DEC}** -- `XamRadialChart` - - 新しいラベル モード - `CategoryAngleAxis` は、ラベルの位置をさらに構成できる `LabelMode` プロパティを公開するようになりました。これにより、`Center` 列挙型を選択してデフォルト モードを切り替えることも、ラベルを円形のプロット領域に近づける新しいモード `ClosestPoint` を使用することもできます。 +- 新機能 (Grid) - [状態保持](grids/grid/state-persistence.md)。 -### {PackageGauges} +### **{PackageVerChanges-22-2.2}** -- `XamRadialGauge` - - 新しいタイトル/サブタイトルのプロパティ。`TitleText`、`SubtitleText` はゲージの下部近くに表示されます。さらに、`TitleFontSize`、`TitleFontFamily`、`TitleFontStyle`、`TitleFontWeight`、`TitleExtent` など、さまざまなタイトルとサブタイトルのフォント プロパティが追加されました。最後に、新しい `TitleDisplaysValue` により、値を針の位置に対応させることができます。 - - `XamRadialGauge` の新しい `OpticalScalingEnabled` プロパティと `OpticalScalingSize` プロパティ。この新機能は、ゲージのラベル、タイトル、サブタイトルが 100% のオプティカル スケーリングを持つサイズを管理します。この新機能の詳細については、[こちら](radial-gauge.md#オプティカル-スケーリング)を参照してください。 - - 新しいハイライト針が追加されました。`HighlightValue` と `HighlightValueDisplayMode` の両方に値と 'Overlay' 設定が指定されたとき、メインの針が薄く表示され、新しい針が表示されます。 -- `XamLinearGauge` - - 新しいハイライト針が追加されました。`HighlightValue` と `HighlightValueDisplayMode` の両方に値と 'Overlay' 設定が指定されたとき、メインの針が薄く表示され、新しい針が表示されます。 -- `XamBulletGraph` - - `HighlightValueDisplayMode` が 'Overlay' 設定に適用されたとき、パフォーマンス バーには値と新しい `HighlightValue` の差が反映されるようになりました。ハイライト値には、フィルタリング/サブセットが完了した測定パーセンテージが塗りつぶされた色で表示され、残りのバーの外観は割り当てられた値に対して薄く表示され、リアルタイムでパフォーマンスを示します。 +- 新しい引数 `PrimaryKey` が `IgcRowDataEventArgs` と、`RowAdded` および `RowDeleted` イベントによって発行されるイベント引数の一部に導入されました。グリッドに主キー属性が追加されている場合、発行された primaryKey イベント引数は行 ID を表し、それ以外の場合はデフォルトで未定義になります。 +- `RowSelectionChanging` イベント引数が変更されました。グリッドが primaryKey を設定した場合、`OldSelection`、`NewSelection`、`Added` および `Removed` コレクションは、選択された要素の行キーで構成されなくなりましたが、いずれにしても行データが出力されるようになりました。 +- グリッドがリモート データを操作していて、主キーが設定されている場合、現在グリッド ビューに含まれていない選択された行に対して、部分的な行データ オブジェクトが発行されます。 +- * 選択された行がグリッド コンポーネントから削除されると、`RowSelectionChanging` イベントは発生しなくなります。 +- `OnGroupingDone` イベントは `GroupingDone` に名前が変更され、on プレフィックスを付けない出力規則に違反しなくなりました。 +- `OnDensityChanged` イベントの名前が `DensityChanged` に変更され、on プレフィックスを付けない出力規則に違反しなくなりました。このイベントを公開しているすべてのコンポーネントが影響を受けます。 + +- `PivotGrid`: `IgcPivotDateDimension` プロパティの `InBaseDimension` および `InOption` は非推奨になり、それぞれ `BaseDimension` および `Options` に名前が変更されました。 + +### **{PackageVerChanges-22-2.1}** + +- 新しい [Pivot Grid](grids/pivot-grid/overview.md) コンポーネント。 + +### **{PackageVerChanges-22-2}** + +- 新しい [Grid](grids/data-grid.md) コンポーネント。 +- 新しい [Tree Grid](grids/tree-grid/overview.md) コンポーネント。 +- `DataGrid`: + - **{IgPrefix}Column** を `DataGridColumn` に変更しました。 + - **GridCellEventArgs** を `DataGridCellEventArgs` に変更しました。 + - **GridSelectionMode** を `DataGridSelectionMode` に変更しました。 + - **SummaryOperand** を `DataSourceSummaryOperand` に変更しました。 + +### **{PackageVerChanges-22-1}** + +- `DataGrid`: + - 新機能 - [行ページング](grids/data-grid/row-paging.md)を追加しました。これは、大量のデータセットを類似したコンテンツを持つ一連のページに分割するために使用されます。ページネーションを使用すると、データを設定された行数で表示することができ、ユーザーはスクロール バーを使用せずにデータを順次閲覧することができます。テーブル ページネーションの UI には通常、現在のページ、合計ページ、ユーザーがページをめくるためのクリック可能な [前へ] と [次へ] の矢印 / ボタンなどが含まれます。 + +### **{PackageVerChanges-21-2.1}** +- `DataGrid`: + - ドロップダウンの項目に複数のフィールドで構成されるキーが含まれている場合に使用される `ComboBoxColumn` に string[] 型の `ValueMultiField` が追加されました。 + +> [!Note] +> 以下の重大な変更が導入されました: `ValueField` プロパティを string[] 型から string に変更しました。 + +### **{PackageVerChanges-21-2}** + +- `DataGrid`: + - 新規機能: + - [フィルター行](grids/data-grid/column-filtering.md) + - [レイアウトのカスタマイズ読み込み/保存](grids/data-grid/load-save-layout.md) + - [列をグループ化するための GroupBy 領域](grids/data-grid/row-grouping.md) + - [セルの結合](grids/data-grid/cell-merging.md) + - 新規 API: + - `SelectionChanged` イベントを追加しました。複数行の選択など、選択のインタラクションの変化を検出するために使用されます。 + - 重大な変更: + - グリッドの SummaryScope プロパティのタイプを `DataSourceSummaryScope` から SummaryScope に変更しました。 + - GroupHeaderDisplayMode プロパティのタイプを `DataSourceSectionHeaderDisplayMode` から GroupHeaderDisplayMode に変更しました。 + + +### **{PackageVerChanges-21-1}** + +- `DataGrid`: + - `EditOnKeyPress` を追加しました - 別名 Excel スタイルの編集。入力するとすぐに編集を開始します。 + - `EditModeClickAction` プロパティを追加しました - デフォルトでは、編集モードに入るにはダブル クリックが必要です。これを `SingleClick` に設定して、新しいセルを選択するときに編集モードを実行できるようにすることができます。 + - `EnterKeyBehaviors` プロパティ (別名 Excel スタイルのナビゲーション (Enter 動作)) を追加して、Enter キーの動作を制御します。例えば、オプションは (なし、編集、上、下、左、右に移動) です。 + - `EnterKeyBehaviorAfterEdit` プロパティを追加しました - 編集モードでは、このプロパティは Enter キーが押されたときを制御します。例えば、オプションは (下、上、右、左のセルに移動) です。 + - `SelectAllRows` メソッドを追加しました。 + - 行範囲の選択を追加しました - `GridSelectionMode` プロパティを MultipleRow に設定すると、次の新しい機能が含まれるようになりました: + - クリックしてドラッグし、行を選択します。 + - Shift キーを押しながらクリックして、複数の行を選択します。 + - Shift キーを押しながら上下の矢印キーを押して、複数の行を選択します。 + - スペース バーを押すと、MultipleRow または SingleRow に設定された `GridSelectionMode` プロパティを介してアクティブな行の選択が切り替わります。 + - 列オプション ダイアログに列集計を追加しました。 + +### **{PackageVerChangedFields}** + +- `DataGrid`: + +> [!Note] +> これらの重大な変更は、グリッド パッケージで導入されました。 + +- PropertyPath の名称変更 + +データ グリッド コンポーネントの `propertyPath` プロパティ名が `field` に変更されました。これは、すべての Column タイプ、GroupDescription、SortDescription および SummaryDescription に適用します。 + +```html + +``` -### {PackageGrids} +```ts +import { IgcColumnSummaryDescription, IgcColumnSortDescription, IgcColumnGroupDescription} from 'igniteui-webcomponents-grids' +const productCount = new IgcColumnSummaryDescription(); +productCount.field = "ProductName"; +const colSortDesc = new IgcColumnSortDescription(); +colSortDesc.field = "UnitsInStock"; +const income = new IgcColumnGroupDescription(); +income.field = "Income"; +``` -- 新しい [`HierarchicalGrid`](grids/hierarchical-grid/overview.md) コンポーネント +### **{PackageVerRenamedGrid}** -## **{PackageVerChanges-23-2-JAN}** +- `DataGrid`: -### {PackageCharts} (チャート) +- Live Grid の名称変更 - Data Grid コンポーネントおよび対応するモジュールの名前が 「LiveGrid」 から 「DataGrid」 に変更されました。 -* [チャートのハイライト表示フィルター](charts/features/chart-highlight-filter.md) - `CategoryChart` と `XamDataChart` は、データのサブセットの内外でハイライト表示およびアニメーション化する方法を公開するようになりました。このハイライト表示の表示はシリーズのタイプによって異なります。列およびエリア シリーズの場合、サブセットはデータの合計セットの上に表示され、サブセットはシリーズの実際のブラシによって色付けされ、合計セットは不透明度を下げます。折れ線シリーズの場合、サブセットは点線で表示されます。 +> [!Note] +> これらの重大な変更は、これらのパッケージとコンポーネントでのみ導入されました: -## **{PackageVerChanges-23-2-DEC}** +グリッドとそれに対応するモジュールをインポートする新しいコードは以下のとおりです。 -### {PackageGrids} (Grid) +```ts +import { IgcDataGrid } from "igniteui-webcomponents-grids"; +import { IgcDataGridModule } from 'igniteui-webcomponents-grids'; +``` -* 新規機能: - - [状態保持](grids/grid/state-persistence.md) +- `DataGrid` の必須ピア依存関係 -## **{PackageVerChanges-23-2}** +Data Grid コンポーネントには 「inputs」 パッケージが必要です。 + +```ts +**npm install --save {PackageInputs}** +``` -### {PackageGrids} (Toolbar - ベータ版) -* クリップボードを介してチャートを画像に保存するための保存ツール アクションが追加されました。 -* ツールバーの `Orientation` プロパティを介して垂直方向が追加されました。デフォルトでは、ツールバーは水平方向ですが、ツールバーを垂直方向に表示できるようになり、ツールが左右にポップアップ表示されます。 -* ツールバーの `renderImageFromText` メソッドを介してカスタム SVG アイコンのサポートが追加され、カスタム ツールの作成がさらに強化されました。 +## {PackageCommon} -## **{PackageVerChanges-23-1}** +### **{PackageCommonVerChanges-4.11.1}** -### 新しいコンポーネント +#### 変更 +- `Stepper` - 垂直モードでのデザインの変更。 -* [Toolbar](menus/toolbar.md) - ベータ版。このコンポーネントは、主にチャート コンポーネントで使用される UI 操作のコンパニオン コンテナーです。ツールバーは、`XamDataChart` または `CategoryChart` コンポーネントにリンクされると、プロパティとツール項目のプリセットで動的に更新されます。プロジェクト用のカスタム ツールを作成して、エンド ユーザーが変更を提供できるようになり、無限のカスタマイズが可能になります。 +### **{PackageCommonVerChanges-4.11.0}** -### {PackageCharts} (チャート) +#### 変更 +- `Toast`、`Rating`、`Stepper` - Indigo テーマのスタイル設定の変更。 -* [ValueLayer](charts/features/chart-overlays.md#{PlatformLower}-value-layer) - `ValueLayer` という名前の新しいシリーズ タイプが公開されました。これにより、Maximum、Minimum、Average など、プロットされたデータのさまざまな焦点のオーバーレイを描画できます。これは、新しい `ValueLines` コレクションに追加することで、`CategoryChart` と `FinancialChart` に適用されます。 +### **{PackageCommonVerChanges-4.10.0}** -* **ダッシュ配列**を `XamDataChart` のシリーズのさまざまな部分に適用できるようになりました。これは、チャートにプロットされた[シリーズ](charts/types/line-chart.md#{PlatformLower}-折れ線チャートのスタイル設定)、チャートの[グリッド線](charts/features/chart-axis-gridlines.md#{PlatformLower}-軸グリッド線のプロパティ)、およびチャートにプロットされたシリーズの[トレンドライン](charts/features/chart-trendlines.md#{PlatformLower}-チャート-トレンドラインのダッシュ配列の例)に適用できます。 +#### 追加 +- 新しい [Banner](notifications/banner.md) コンポーネント。 +- 新しい [Divider](layouts/divider.md) コンポーネント。 +- 新しい [DatePicker](scheduling/date-picker.md) コンポーネント。 +- `RadioGroup` - ラジオ グループを通じて、基礎となるラジオ コンポーネントの名前とチェック状態をバインドします。 -## **{PackageVerChanges-22-2.2}** +#### 非推奨 +- `Input` `Inputmode` プロパティ。代わりに、ネイティブの `inputMode` DOM プロパティに調整されます。 -### 新しいコンポーネント +#### 修正 +- `Input`、`Textarea`- 値に `undefined` を渡すと、基になる入力値が undefined に設定されます。 +- `MaskInput` - フォームの `reset` の呼び出し後、基になる入力値とプレースホルダーの状態が正しく更新されます。 +- `Tree` - 項目 `indicator` CSS パーツに `--ig-size` を設定すると、アイコンのサイズが変更されるようになりました。 +- `DateTimeInput` - 特定のシナリオで `igcChange` が二重に発行されます。 +- `NavDrawer` - ミニ バリアントは、開いた状態でない場合、最初は描画されません。 +- `Combo`: + - `Enter` キーを使用してエントリを選択すると、単一選択モードで正しく機能するようになりました。 + - `DisableFiltering` オプションをオンにすると、以前に入力した検索語句がクリアされるようになりました。 + - 単一選択モードで、選択した項目に既に一致する検索語を入力すると、正しく機能するようになりました。 -* [Dialog](notifications/dialog.md) -* [Select](inputs/select.md) +### **{PackageCommonVerChanges-4.9.0}** + +#### 追加 +- `ButtonGroup` - `SelectedItems` プロパティを介して選択状態をリセットできるようになりました。 +- `Input`、`Textarea` - ユーザー入力を制限することなく検証ルールを適用できるように `ValidateOnly` を公開しました。 -### {PackageGrids} (データ グリッド) +#### 変更 +- `Combo`、`Select`、`Dropdown` - ネイティブの `Popover` API を使用するようになりました。 + +#### 非推奨 +- `Dropdown` - `PositionStrategy` プロパティは非推奨です。ドロップダウンは、ブラウザー ビューポートの最上位レイヤーにコンテナーをレンダリングするために `Popover` API を使用するようになったため、このプロパティは廃止されました。 + +#### 修正 +- `DateTimeInput` - コンポーネントが読み取り専用モードの場合、Material テーマのラベルが壊れます。 + +### **{PackageCommonVerChanges-4.8.2}** + +#### 修正 +- `Textarea` - サフィックスのないテキスト領域のサイズ変更ハンドルの位置。 +- `Tabs` - 単一の呼び出しスタックでタブ グループとタブを動的に作成および追加するときにエラーが発生します。 +- `Checkbox`/`Switch` - 最初にチェックしたときにフォームの送信に参加します。 +- `Dialog` - コンポーネントが実際に閉じられる/非表示になる前に `igcClosed` が発生します。 + +### **{PackageCommonVerChanges-4.8.1}** + +#### 修正 +- `DateTimeInput` - `InputFormat` は、既に設定されている値には適用されません。 +- `Checkbox`、`Radio`、`Switch` - フォーム検証を同期的に適用します。 +- `Select`、`Dropdown` - ドロップダウン/選択項目スロット内のラップ要素をクリックしても項目を選択できません。 +- `Tree` - アクティブ状態は、クリック時に正しいツリー ノードに正しく適用されます。 + +### **{PackageCommonVerChanges-4.8.0}** + +#### 追加 +- `Combo` では、`GroupSorting` を none に設定できるようになりました。これにより、提供されたデータの順序でグループが表示されます。 +- `Button`/`IconButton` - テーマ間でビジュアルの外観が更新され、新しい状態が追加されました。 +- `NavBar` - Bootstrap テーマに境界線が追加されました。 + +#### 変更 +- `Combo` でのグループ化ではデータがソートされなくなりました。`GroupSorting` プロパティは、グループのソート方向にのみ影響するようになりました。**動作変更**: 以前のリリースでは、グループのソート方向によって項目もソートされていました。この動作を実現したい場合は、既にソートされたデータを `Combo` に渡すことができます。 + +#### 非推奨 +- `Slider` - `aria-label-upper` と `aria-label-lower` は非推奨であり、次のメジャー リリースで削除されます。代わりに、`thumb-label-upper` と `thumb-label-lower` を使用してください。 + +#### 修正 +- `Button` - スロットアイコンのサイズ。 +- `ButtonGroup` + - Fluent テーマの外観を更新しました。 + - Safari での無効状態。 +- `Combo`/`Select` - スタイルの問題。 +- `Slider` + - スライダー トラックのクリックは、トラック要素の幅を計算の基準として使用します。 + - スライダーのつまみを連続的にドラッグし、上限/下限を超えても、入力イベントは発生されません。 + - `min`/`max` の前に `upper-bound`/`lower-bound` を設定する場合、スライダーはバインドされたプロパティを `min`/`max` の以前の値で上書きしません。 + - スライダーのつまみにバインドされた `aria-label` は結果のレンダリングでリセットされなくなりました。 +- `Input` + - デフォルトの検証は同期的に実行されます。 + - スタイルの問題。 +- `DateTimeInput` - `setRangeText()` は基になる値を更新します。 + +### **{PackageCommonVerChanges-4.7.0}** + +#### 追加 +- `Tree` - ノードをクリックすると展開状態が変更されるかどうかを決定する `ToggleNodeOnClick` プロパティが追加されました。デフォルトは **false** です。 + +- `Rating` - `AllowReset` が追加されました。有効にすると、同じ値を選択するとコンポーネントがリセットされます。**動作変更**: 以前のリリースでは、これが Rating コンポーネントのデフォルトの動作でした。アプリケーションでこの動作を維持する必要がある場合は、必ず `allowReset` を設定してください。 + +#### 変更 +- `Avatar`、`Badge`、および `Combo` の WAI-ARIA 準拠を改善しました。 +#### 修正 +- `Dropdown`、`Select`、および `Combo` のアクティブ項目のビジュアル スタイル。 +- `NavDrawer` - ミニ バリアントの壊れたビジュアル スタイル。 + +### **{PackageCommonVerChanges-4.6.0}** + +#### 追加 +- `Snackbar` に `action` スロットが追加されました。 +- `indicator-expanded` スロットが `ExpansionPanel` に追加されました。 +- `toggle-icon-expanded` スロットが `Select` に追加されました。 +- `Select`、`Dropdown` - `selectedItem`、`items`、`groups` ゲッターを公開しました。 + +#### 変更 +- パッケージを Lit v3 に更新しました。 +- コンポーネントのダーク バリアントはシャドウ ルートにバインドされるようになりました。 +- コンポーネントは現在のテーマに基づいてデフォルトのサイズを実装します。 +- `ButtonGroup` - イベントをキャンセル不可に変更しました。 +- コンポーネント CSS を最適化し、バンドル サイズを縮小しました。 +- `Icon`、`Select`、`Dropdown`、`List` の WAI-ARIA が改善されました。 + +#### 修正 +- `Textarea` にスタイル設定パーツがありません。 +- `TreeItem` の無効なスタイル。 +- `Snackbar` の不要なスタイルを削除しました。 +- `TreeItem` ホバー状態のビジュアル デザイン。 +- ビューを切り替えても `Calendar` のフォーカス状態が維持されません。 + +### **{PackageCommonVerChanges-4.5.0}** + +#### 追加 + +- 新しい [Text Area](inputs/text-area.md) コンポーネント。 +- 新しい [Button Group](inputs/button-group.md) コンポーネント。 +- 新しい `ToggleButton`。 +- `NavDrawer` は CSS トランジションをサポートするようになりました。 +- `Toast` と `Snackbar` の位置属性。 + +#### 非推奨 + +`size` プロパティと属性は、すべてのコンポーネントで非推奨になりました。代わりに `--ig-size` CSS カスタム プロパティを使用してください。次の例では、`Avatar` コンポーネントのサイズを小さく設定します: + +```css +igc-avatar { + --ig-size: var(--ig-size-small); +} +``` -* 新しい引数 `PrimaryKey` が `IgcRowDataEventArgs` に導入されました。これは、`RowAdded` および `RowDeleted` イベントによって発行されるイベント引数の一部です。グリッドに主キー属性が追加されている場合、発行された primaryKey イベント引数は行 ID を表し、それ以外の場合はデフォルトで未定義になります。 -* `RowSelectionChanging` イベント引数が変更されました。現在、グリッドが primaryKey を設定した場合、`OldSelection`、`NewSelection`、`Added` および `Removed` コレクションは、選択された要素の行キーで構成されなくなりましたが、いずれにしても行データが出力されるようになりました。 -* グリッドがリモート データを操作していて、主キーが設定されている場合、現在グリッド ビューに含まれていない選択された行に対して、部分的な行データ オブジェクトが発行されます。 -* 選択された行がグリッド コンポーネントから削除されると、`RowSelectionChanging` イベントは発生しなくなります。 -* `OnGroupingDone` イベントは `GroupingDone` に名前が変更され、on プレフィックスを付けない出力規則に違反しなくなりました。 -* `OnDensityChanged` イベントの名前が `DensityChanged` に変更され、on プレフィックスを付けない出力規則に違反しなくなりました。このイベントを公開しているすべてのコンポーネントが影響を受けます。 +#### 修正 +- Safari でのコンボ項目の位置。 +- RTL コンテキストのカレンダー ナビゲーション ボタン。 +- `IgcComboChangeEventArgs` タイプのエクスポート。 +- 遅延データ バインディングを使用したコンボ値と選択状態。 +- さまざまなスタイルとテーマの修正と調整 + +### **{PackageCommonVerChanges-4.4.0}** + +#### 追加 +- 次のコンポーネントは、フォームに関連付けられたカスタム要素になりました。これらは親 `` に自動的に関連付けられ、ブラウザーが提供するコントロールのように動作します。 + + - `Button` & `IconButton` + - `Checkbox` + - `Combo` + - `DateTimeInput` + - `Input` + - `MaskInput` + - `Radio` + - `Rating` + - 単一の `Slider` + - `Select` + - `Switch` +- `Stepper` はアニメーションをサポートするようになりました。 + +#### 変更 +- `Rating` - Fluent テーマのカラー。 +- `Stepper` - インジケーターのスタイルとカラー スキーマ。 + +#### 非推奨 +- `IgcForm` コンポーネントは非推奨です。 +- `Input`: + - `minlength` プロパティは非推奨になり、次のメジャー バージョンで削除される予定です。代わりに `minLength` を使用してください。 + - `maxlength` プロパティは非推奨になり、次のメジャー バージョンで削除される予定です。代わりに `maxLength` を使用してください。 + - `readonly` プロパティは非推奨になり、次のメジャー バージョンで削除される予定です。代わりに `readOnly` を使用してください。 +- `MaskInput`: + - `readonly` プロパティは非推奨になり、次のメジャー バージョンで削除される予定です。代わりに `readOnly` を使用してください。 +- `DateTimeInput`: + - `readonly` プロパティは非推奨になり、次のメジャー バージョンで削除される予定です。代わりに `readOnly` を使用してください。 + - `minValue` プロパティは非推奨になり、次のメジャー バージョンで削除される予定です。代わりに `min` を使用してください。 + - `maxValue` プロパティは非推奨になり、次のメジャー バージョンで削除される予定です。代わりに `max` を使用してください。 +- `Rating`: + - `readonly` プロパティは非推奨になり、次のメジャー バージョンで削除される予定です。代わりに `readOnly` を使用してください。 + +#### 削除済 +- デフォルトの属性を隠していた独自の `dir` 属性が削除されました。これは**互換性のある変更**です。 +- `Slider` - `ariaLabel` シャドウ プロパティ。これは**互換性のある変更**です。 +- `Checkbox` - `ariaLabelledBy` シャドウ属性。これは**互換性のある変更**です。 +- `Switch` - `ariaLabelledBy` シャドウ属性。これは**互換性のある変更**です。 +- `Radio` - `ariaLabelledBy` シャドウ属性。これは**互換性のある変更**です。 + +#### 修正 +- `Input` - バリアントのスタイル設定の問題と Indigo テーマの問題を概説しました。 +- `Select` - バリアントのスタイル設定の問題を概説しました。 +- `DateTimeInput` - `spinUp/spinDown` は、入力にフォーカスがあるときにキャレットを移動するように呼び出します。 + +### **{PackageCommonVerChanges-4.3.1}** + +#### 追加 +- `Tree` - コンポーネントアニメーション。 +- コンポーネントの境界半径は、そのスキーマから使用されます。 + +#### 変更 +- `Combo`、`Input`、`Select` - スキーマのカラー。 +- `Dropdown` - スキーマのカラー。 +- `Icon` - テーマのスタイルとサイズが更新されました。 + +#### 修正 +- `Combo` - 特定のシナリオでは単一選択が機能しません。 +- `Dropdown` - さまざまなスタイル設定の修正。 +- `IconButton` - リップルのある境界線の半径。 +- `IconButton` - Fluent テーマの間違ったカラーを修正しました。 +- `Input` - さまざまなスタイル設定の修正。 +- `TreeItem` - 最も近い *igc-tree-item* 祖先を親として割り当てます。 +- `Tabs` - 内部の **hidden** スタイルとカスタム表示プロパティ。 + +### **{PackageCommonVerChanges-4.3.0}** + +#### 追加 +- `Combo`: + - `matchDiacritics` をフィルタリング オプション プロパティに追加しました。デフォルトは **false** です。**true** に設定すると、フィルターはアクセント付き文字とその基本文字を区別します。それ以外の場合、文字列は正規化されてから照合されます。 + - 現在の選択内容をデータ オブジェクトの配列として返す `selection` プロパティ。 +- `Card`: 明示的な高さのサポート +- `Dialog`: アニメーションの追加 +- `Snackbar`: アニメーションの追加 +- `Toast`: アニメーションの追加 + +#### 変更 +- `Combo`: + - `value` は読み取り専用ではなくなり、明示的に設定できるようになりました。value 属性は宣言型のバインディングもサポートしており、有効な JSON 文字列化配列を受け入れます。 + + - `value` タイプが `string[]` から `ComboValue[]` に変更されました: + + ```ts + ComboValue = T | T[keyof T] + ``` + + - `igcChange` イベント オブジェクトのプロパティも新しい `value` タイプを反映するように変更されました: + + ```typescript + interface IgcComboChangeEventArgs { + newValue: ComboValue[]; + items: T[]; + type: ComboChangeType; + } + ``` + +#### 非推奨 +- `Select`: `sameWidth`、`positionStrategy`、`flip` は非推奨になりました。これらは次のメジャー リリースで削除される予定です。 + +#### 修正 +- `Select`: `prefix`/`suffix`/`helper-text` スロットが描画されません。 +- `Tabs`: ネストされたタブの選択。 +- `Dialog`: 背景は要素をオーバーレイしません。 +- `Dropdown`: 最初に開いた状態でのリストボックスの位置。 +- `Stepper`: 親コンテナ内で垂直方向に引き伸ばします。 +- `Navbar`: Fluent テーマの間違ったカラー。 +- 高さが指定されていない場合、アニメーション プレーヤーはエラーを発生します。 +- `DateTimeInput`: Chromium ベースのブラウザーでの Intl.DateTimeFormat の問題。 + +### **{PackageCommonVerChanges-4.2.3}** + +#### 非推奨 +- `Dialog` - `closeOnEscape` プロパティは非推奨となり、代わりに新しい `keepOpenOnEscape` プロパティが使用されます。 + +#### 修正 +- `Radio`- 選択されたフォーカス状態のカラー。 +- `IconButton` - 他のデザイン システム製品に合わせてアイコンのサイズを設定します。 +- `Chip` - Fluent および Material テーマのアウトライン スタイルが削除されました。 +- `Calendar` - 設定された値の日付へのナビゲーション。 +- `Tabs` - 親の高さを完全には取得しません。 + +### **{PackageCommonVerChanges-4.2.2}** + +#### 非推奨 +- `Button` - `prefix`/`suffix` スロットは不要になったため、次のメジャー リリースで削除される予定です。 + +#### 修正 +- `Button` - UI の不一致。 +- `Calendar` - Fluent テーマの不一致。 +- `Combo` - API 経由の選択は検索リストでは機能しません。 +- `Dialog` - Fluent テーマの不一致。 +- `Input` - UI の不一致。 +- `Toast` - Fluent テーマの不一致。 +- defineAllComponents にコンポーネントがありません。 +- `Avatar`、`Badge`、`Button`、`IconButton` のホスト サイズが間違っています。 + +### **{PackageCommonVerChanges-4.2.1}** + +#### 修正 +- `Combo` - 単一選択モードでのフィルタリングでは一致する項目がアクティブ化されません。 + +### **{PackageCommonVerChanges-4.2.0}** + +#### 追加 +- `Combo` - `single-select` 属性による単一選択モード。 + +#### 修正 +- `Input` - UI の不一致。 +- `Badge` - `igc-icon` とフォント アイコンが正しく描画されません。 +- `Radio` - UI の不一致。 +- `NavDrawer` - 項目のマージンをオーバーライドできません。 + +### **{PackageCommonVerChanges-4.1.1}** + +#### 修正 +- `Input` + - コンポーネントのサイズに基づいてラベルを配置します。 + - Material のテーマがデザインと一致しません。 + - 基になる入力をキャッシュしません。 +- Card - Web Components と Angular 間の色の不一致。 +- テーマ - 古くなった `--igc-*` 変数を `--ig-*` に更新しました。 +- 要素の切断後にぶら下がっている参照を削除しました。 + +### **{PackageCommonVerChanges-4.1.0}** + +#### 追加 +- 新しい [Stepper](layouts/stepper.md) コンポーネント。 +- 新しい [Combo](inputs/combo/overview.md) コンポーネント。 +- `MaskInput` - コンポーネント内のシンボルを削除するときにリテラル位置をスキップします。 + +#### 修正 +- `MaskInput` - ユーザー入力の検証状態。 + +### **{PackageCommonVerChanges-4.0.0}** + +#### 変更 +- テーマ + - ビルド - テーマをビルドするときに [Ignite UI Theming](https://github.com/IgniteUI/igniteui-theming) パッケージを利用します。 + - サイズ変更 - すべてのコンポーネントまたは個々のコンポーネントのサイズを実行時に CSS 構成できる CSS 変数を導入しました。 + - 間隔 - コンポーネントの内部間隔 (パディング/マージン) のランタイム CSS 構成を可能にする CSS 変数を導入しました。 + - スクロール バー - 任意の要素に `ig-scrollbar` CSS クラスを設定することで、アプリケーション レベルのスクロール バーのスタイルを設定する機能が追加されました。 + +### **{PackageCommonVerChanges-3.4.2}** + +#### 修正 +- `DateRangeType` のインポート エラーを解決しました。 + +### **{PackageCommonVerChanges-3.4.1}** + +#### 変更 +- `Slider` - 最新の Fluent 仕様に合わせてテーマを更新しました。 +- `Calendar` - 週末の色を更新しました。 + +#### 修正 +- `Tabs` の `selected` 属性により、初期化時にコンテンツの可視性が損なわれます。 + +### **{PackageCommonVerChanges-3.4.0}** + +#### 追加 +- 新しい [Dialog](notifications/dialog.md) コンポーネント。 +- 新しい [Select](inputs/select.md) コンポーネント。 + +#### 修正 +- `Calendar` - 範囲選択の a11y 改善。 +- `RangeSlider` - 範囲値を選択するための a11y の改善。 +- `Rating` - 支援ソフトウェアが項目の総数を読み取れるようになり、a11y が改善されました。 +- `Toast` - 支援ソフトウェアがフォーカスを必要とせずに読み取れるように、メッセージ コンテナーに `role="alert"` を追加しました。 +- `Chip` - 削除ボタンをキーボードでアクセスできるようにしました。 +- `Button` の `prefix`/`suffix` により、アイコンがボタンのテキストに揃えられません。 + +### **{PackageCommonVerChanges-3.3.1}** + +#### 変更 +- `Tree` - テーマ指定の高さを削除しました。 + +#### 修正 +- `Dropdown` - トップレベルのイベント リスナーを破棄します。 +- `LinearProgress` - Safari での不確定なアニメーション。 +- `RadioGroup` - 子ラジオ コンポーネントの自動登録。 + +### **{PackageCommonVerChanges-3.3.0}** + +#### 追加 +- 新しい [DateTimeInput](inputs/date-time-input.md) コンポーネント。 +- 新しい [Tabs](layouts/tabs.md) コンポーネント。 +- 新しい [Accordion](layouts/accordion.md) コンポーネント。 +- テーマのタイポグラフィ スタイル。 + +#### 変更 +- `Rating` - 単一選択と空のシンボルのサポートが追加されました。 +- `Slider` - スライダー ステップの描画を改善しました。 +- コンポーネントは、`defineComponents` で登録されると、その依存関係を自動登録するようになりました。 + +```typescript +import { IgcDropdownComponent, defineComponents } from 'igniteui-webcomponents'; +// will automatically register the dropdown item & group elements +// as well as their dependencies if any +defineComponents(IgcDropdownComponent); +``` -### {PackageInputs} +詳細については、[公式ドキュメント](https://jp.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started)を参照してください。 -* `IgcDateTimeInput`、StepDownAsync(DateTimeInputDatePart.Date, SpinDelta.Date) は、DateTimeInputDatePart ではなく DatePart に切り詰められるようになりました。 -* `IgcRadio` および `IgcRadioGroup` は、無効な状態のスタイルとともにコンポーネントの検証が追加されました。 -* `IgcMask` は、マスク パターン リテラルをエスケープする機能が追加されました。 -* `IgcBadge` は、バッジの形状を制御する `Shape` プロパティを追加し、`Square` または `Rounded` のいずれかになります。デフォルトでは、バッジの形状は rounded です。 -* `IgcAvatar`、`roundShape` プロパティは廃止され、将来のバージョンで削除される予定です。ユーザーは、新しく追加された `Shape` 属性によってアバターの形状を制御できます。これは、`Square`、`Rounded`、または `Circle` にすることができます。アバターのデフォルトの形状は `Square`です。 +#### 修正 +- 空の入力ヘルパー テキスト コンテナーを削除するようにしました。 +- Safari で `Icon` が表示されない問題を修正しました。 +- Safari で `Checkbox` が表示されない問題を修正しました。 +- フレックス コンテナーで `Button` が正しく伸張するようになりました。 +- さまざまなテーマの問題。 +- `Dropdown` - バグ修正と実装改善。 -### {PackageGrids} (ピボット グリッド) +### **{PackageCommonVerChanges-3.2.0}** -* `IgcPivotDateDimension` プロパティの `InBaseDimension` と `InOption` は廃止され、それぞれ `BaseDimension` と `Options` に名前が変更されました。 +#### 追加 +- 新しい [MaskInput](inputs/mask-input.md) コンポーネント。 +- 新しい [ExpansionPanel](layouts/expansion-panel.md) コンポーネント。 +- 新しい [Tree](grids/tree.md) コンポーネント。 +- `Rating` - シンボルのサイズを制御するために、`selected` CSS パーツと公開された CSS 変数を追加しました。 +- `IconButton` - スロット化されたコンテンツを許可します。 -### {PackageDockManager} (DockManager) +#### 修正 +- `NavDrawer` - さまざまなスタイルの修正。 +- Buttons - 垂直方向の配置とフォーカスの管理。 +- `Input` - `suffix`/`prefix` のオーバーフロー。 +- `Switch` - 小さいサイズで縮小します。 +- `List` - オーバーフロー動作。 -* [ドック マネージャー](layouts/dock-manager.md) のペイン コレクションに保護されたセッターが追加されました。ペインを作成するときに、ネストされた構造でペインを設定するのではなく、Add を呼び出す必要があります。 +### **{PackageCommonVerChanges-3.1.0}** -## **{PackageVerChanges-22-2.1}** +#### 追加 +- `Chip`: `prefix` と `suffix` のスロットを追加しました。 +- `Snackbar`: `toggle` メソッドを追加しました。 -### 新しいコンポーネント +#### 非推奨 +- `Chip`: 以前に公開された `start` スロットと `end` スロットは、`prefix` と `suffix` に置き換えられます。これらは引き続き有効ですが、現在は非推奨であり、将来のバージョンでは削除される予定です。 -* [Accordion](layouts/accordion.md) -* [Combo Box](inputs/combo/overview.md) -* [Expansion Panel](layouts/expansion-panel.md) -* [Pivot Grid](grids/pivot-grid/overview.md) -* [Stepper](layouts/stepper.md) -* [Tabs](layouts/tabs.md) +#### 修正 +- `Chip`: + - 内部アイコンを自動読み込みます。 + - 選択したチップの位置がずれています。 +- パッケージ: ESM 内部インポート パス。 -## **{PackageVerChanges-22-2}** +### **{PackageCommonVerChanges-3.0.0}** -### 新しいコンポーネント +#### 変更 +- **重大な変更**: すべてのドロップダウン関連クラスの名前が `IgcDropDown*` から `IgcDropdown*` に変更されました。 -* [Grid](grids/data-grid.md) -* [Tree Grid](grids/tree-grid/overview.md) +### **{PackageCommonVerChanges-2.2.0}** -### {PackageCharts} +#### 追加 +- 新しい [DropDown](inputs/dropdown.md) コンポーネント。 +- `Calendar`: アクティブ日付は属性を介して設定できます。 + +### **{PackageCommonVerChanges-2.1.1}** + +#### 追加 +- `--igc-radius-factor` と `--igc-elevation-factor` から境界の半径と標高を制御します。 + +例: + +```css +/* Make all components square and remove all shadows */ +:root { + --igc-radius-factor: 0; + --igc-elevation-factor: 0; +} +``` + +### **{PackageCommonVerChanges-2.1.0}** + +#### 追加 +- 新しい [LinearProgress](inputs/linear-progress.md) コンポーネント。 +- 新しい [CircularProgress](inputs/circular-progress.md) コンポーネント。 +- 新しい [Chip](inputs/chip.md) コンポーネント。 +- 新しい [Snackbar](notifications/snackbar.md) コンポーネント。 +- 新しい [Toast](notifications/toast.md) コンポーネント。 +- 新しい [Rating](inputs/rating.md) コンポーネント。 +- コンポーネントテーマは、`configureTheme(theme: Theme)` 関数を呼び出すことで実行時に変更できます。 + +### **{PackageCommonVerChanges-2.0.0}** + +#### 追加 +- ダーク テーマ +- 新しい [Slider](inputs/slider.md) コンポーネント。 +- 新しい [RangeSlider](inputs/slider.md) コンポーネント。 +- `Radio` コンポーネントの `required` プロパティのサポート。 + +#### 変更 +- チェックボックス/スイッチの検証状態を修正しました。 +- `Calendar` の `value: Date | Date[]` プロパティを 2 つのプロパティに分割しました: `value: Date` おとび `values: Date[]`。`` +- `Calendar` の `hasHeader` プロパティと `has-header` 属性をそれぞれ `hideHeader` と `hide-header` に置き換えました。 +- `Card` の `outlined` プロパティを `elevated` に置き換えました。 + +#### 削除済 +- `NavDrawer` コンポーネントの `igcOpening`、`igcOpened`、`igcClosing`、および `igcClosed` イベントを削除しました。 + +### **{PackageCommonVerChanges-1.0.0}** + +Ignite UI Web Components の初期リリース + +#### 追加 +- [Avatar](layouts/avatar.md) コンポーネント +- [Badge](inputs/badge.md) コンポーネント +- [Button](inputs/button.md) コンポーネント +- [Calendar](scheduling/calendar.md) コンポーネント +- [Card](layouts/card.md) コンポーネント +- [Checkbox](inputs/checkbox.md) コンポーネント +- Form コンポーネント +- [Icon](layouts/icon.md) コンポーネント +- [IconB utton](inputs/icon-button.md) コンポーネント +- [Input](inputs/input.md) コンポーネント +- [List](grids/list.md) コンポーネント +- [Navigation bar](menus/navbar.md) コンポーネント +- [Navigation drawer](menus/navigation-drawer.md) コンポーネント +- [Radio group](inputs/radio.md) コンポーネント +- [Radio](inputs/radio.md) コンポーネント +- [Ripple](inputs/ripple.md) コンポーネント +- [Switch](inputs/switch.md) コンポーネント + + +## {PackageCharts} + +### **{PackageVerChanges-24-1-JUN}** + +* [データ凡例のグループ化](charts/features/chart-data-legend.md#{PlatformLower}-データ凡例のグループ化) & [データ ツールチップのグループ化](charts/features/chart-data-tooltip.md#{PlatformLower}-データ-チャートのデータ-ツールチップのグループ化) - 新しいグループ化機能が追加されました。`GroupRowVisible` プロパティは、各シリーズのグループ化を切り替え、オプトインすると `DataLegendGroup` プロパティを介してグループ テキストを割り当てることができます。同じ値が複数のシリーズに適用されている場合、それらはグループ化されて表示されます。すべてのユーザー向けに分類および整理する必要がある大規模なデータセットに役立ちます。 + +- [チャートの選択](charts/features/chart-data-selection.md) - 新しいシリーズ選択のスタイル設定。これは、`CategoryChart` および `XamDataChart` のすべてのカテゴリ、財務、およびラジアル シリーズに広く採用されています。シリーズはクリックして異なる色で表示したり、明るくしたり、薄くしたり、フォーカスのアウトラインを表示したりできます。個々のシリーズまたはデータ項目全体を通じて影響を受ける項目を管理します。複数のシリーズとマーカーがサポートされています。特定のデータ項目の値間のさまざまな相違点や類似点を示すのに役立ちます。また、`SelectedSeriesItemsChanged` イベントと `SelectedSeriesItems` は、選択内容に基づいたデータ分析を行うポップアップやその他の画面など、アプリケーション内で実行できるその他のアクションを取り巻く堅牢なビジネス要件を構築するための追加の支援として利用できます. + +- [比例カテゴリ角度軸](charts/types/radial-chart.md) - `XamDataChart` のラジアル円シリーズの新しい軸により、データ チャートのすべての追加機能を使用してロバスト可能な視覚化をする円チャートの作成が可能になります。 + +- [ツリーマップのハイライト表示](charts/types/treemap-chart.md#{PlatformLower}-ツリーマップのハイライト表示) - ツリー マップの項目のマウスオーバーによるハイライト表示を構成できる `HighlightingMode` プロパティが公開されました。このプロパティには 2 つのオプションがあります: `Brighten` では、マウスを置いた項目にのみハイライト表示が適用され、`FadeOthers` では、マウスホバーした項目のハイライト表示はそのままで、それ以外はすべてフェードアウトします。このハイライト表示はアニメーション化されており、`HighlightingTransitionDuration` プロパティを使用して制御できます。 + +- [ツリーマップのパーセントベースのハイライト表示](charts/types/treemap-chart.md#{PlatformLower}-ツリーマップのパーセントベースのハイライト表示) - 新しいパーセントベースのハイライト表示により、ノードはコレクションの進行状況またはサブセットを表すことができます。外観は、データ項目のメンバーによって、または新しい `HighlightedItemsSource` を指定することによって、特定の値までの背景色の塗りつぶしとして表示されます。`HighlightedValuesDisplayMode` で切り替えることができ、`FillBrushes` でスタイルを設定できます。 + +- `Toolbar` - 選択した特定のツールの周囲に境界線を描くための ToolAction の新しい `IsHighlighted` オプション。 + +### **{PackageVerChanges-23-2-MAR}** + + - `InitialFilter` プロパティによる新しいデータ フィルタリング。フィルター式を適用して、チャート データをレコードのサブセットにフィルターします。大規模なデータのドリルダウンに使用できます。 + +- `XamRadialChart` + - 新しいラベル モード + `CategoryAngleAxis` は、ラベルの位置をさらに構成できる `LabelMode` プロパティを公開するようになりました。これにより、`Center` 列挙型を選択してデフォルト モードを切り替えることも、ラベルを円形のプロット領域に近づける新しいモード `ClosestPoint` を使用することもできます。 + +### **{PackageVerChanges-23-2-JAN}** + +* [チャートのハイライト表示フィルター](charts/features/chart-highlight-filter.md) - `CategoryChart` と `XamDataChart` は、データのサブセットの内外でハイライト表示およびアニメーション化する方法を公開するようになりました。このハイライトの表示はシリーズのタイプによって異なります。列およびエリア シリーズの場合、サブセットはデータの合計セットの上に表示され、サブセットはシリーズの実際のブラシによって色付けされ、合計セットは不透明度を下げます。折れ線シリーズの場合、サブセットは点線で表示されます。 + +### **{PackageVerChanges-23-2}** + +- [Toolbar](menus/toolbar.md) - ベータ版: + - クリップボードを介してチャートを画像に保存するための保存ツール アクションが追加されました。 + - ツールバーの `Orientation` プロパティを介して垂直方向が追加されました。デフォルトでは、ツールバーは水平方向ですが、ツールバーを垂直方向に表示できるようになり、ツールが左右にポップアップ表示されます。 + - ツールバーの `renderImageFromText` メソッドを介してカスタム SVG アイコンのサポートが追加され、カスタム ツールの作成がさらに強化されました。 + +### **{PackageVerChanges-23-1}** + +- 新しい [Toolbar](menus/toolbar.md) - ベータ版のコンポーネント。このコンポーネントは、主にチャート コンポーネントで使用される UI 操作のコンパニオン コンテナーです。ツールバーは、`XamDataChart` または `CategoryChart` コンポーネントにリンクされると、プロパティとツール項目のプリセットで動的に更新されます。プロジェクト用のカスタム ツールを作成して、エンド ユーザーが変更を提供できるようになり、無限のカスタマイズが可能になります。 + +- [ValueLayer](charts/features/chart-overlays.md#{PlatformLower}-value-layer) - `ValueLayer` という名前の新しいシリーズ タイプが公開され、最大値、最小値、平均値など、プロットされたデータのさまざまな焦点のオーバーレイを描画できるようになりました。これは、新しい `ValueLines` コレクションに追加することで、`CategoryChart` と `FinancialChart` に適用されます。 + +- **破線の配列**を `XamDataChart` のシリーズのさまざまな部分に適用できるようになりました。これは、チャートにプロットされた[シリーズ](charts/types/line-chart.md#{PlatformLower}-折れ線チャートのスタイル設定)、チャートの[グリッド線](charts/features/chart-axis-gridlines.md#{PlatformLower}-軸グリッド線のプロパティ)、チャートにプロットされたシリーズの[トレンドライン](charts/features/chart-trendlines.md#{PlatformLower}-チャート-トレンドラインのダッシュ配列の例)に適用できます。 + +### **{PackageVerChanges-22-2}** デフォルトの動作を大幅に改善し、カテゴリ チャート API を改良して使いやすくしました。これらの新しいチャートの改善点は次のとおりです: @@ -174,19 +754,12 @@ _language: ja - GroupSortDescriptions > [!Note] -`IncludedProperties` | `ExcludedProperties` を使用している場合、[チャート集計](charts/features/chart-data-aggregations.md)は機能しません。チャートのこれらのプロパティは非集計データ用です。データを集計しようとすると、これらのプロパティは使用できなくなります。うまくいかない理由は、描画のためにチャートに渡されたコレクションを集計により置き換えるためです。include/exclude プロパティは、そのデータの in/out プロパティをフィルターするように設計されており、それらのプロパティは新しい集計されたコレクションには存在しません。 +`IncludedProperties` | `ExcludedProperties` を使用する場合、[チャート集計](charts/features/chart-data-aggregations.md) は機能しません。チャートのこれらのプロパティは非集計データ用です。データを集計しようとすると、これらのプロパティは使用できなくなります。うまくいかない理由は、描画のためにチャートに渡されたコレクションを集計により置き換えるためです。include/exclude プロパティは、そのデータの in/out プロパティをフィルターするように設計されており、それらのプロパティは新しい集計されたコレクションには存在しません。 -### {PackageGrids} (データ グリッド) -* **{IgPrefix}Column** を `DataGridColumn` に変更しました。 -* **GridCellEventArgs** を `DataGridCellEventArgs` に変更しました。 -* **GridSelectionMode** を `DataGridSelectionMode` に変更しました。 -* **SummaryOperand** を `DataSourceSummaryOperand` に変更しました。 +### **{PackageVerChanges-22-1}** -## **{PackageVerChanges-22-1}** -### {PackageCharts} - -* 高度に構成可能な [DataLegend](charts/features/chart-data-legend.md) コンポーネントが追加されました。これは、`Legend` とよく似たコンポーネントですが、シリーズの値を表示し、シリーズの行と値の列をフィルタリングし、値のスタイルとフォーマットを行うための多くの構成プロパティを提供します。 +* 高度に構成可能な [DataLegend](charts/features/chart-data-legend.md) コンポーネントを追加しました。これは、`Legend` とよく似ていますが、シリーズの値を表示し、シリーズの行と値の列をフィルタリングし、値のスタイルとフォーマットを行うための多くの構成プロパティを提供します。 * 高度に構成可能な [DataToolTip](charts/features/chart-data-tooltip.md) が追加されました。これは、シリーズの値とタイトル、およびシリーズの凡例バッジをツールチップに表示します。これは、すべてのチャート タイプのデフォルトのツールチップになりました。 * 積層シリーズのアニメーションとトランジションインのサポートが追加されました。`IsTransitionInEnabled` プロパティを true に設定すると、アニメーションを有効にできます。そこから、`TransitionInDuration` プロパティを設定してアニメーションが完了するまでの時間を決定し、`TransitionInMode` でアニメーションのタイプを決定できます。 * 追加された `AssigningCategoryStyle` イベントは、`XamDataChart` のすべてのシリーズで利用できるようになりました。このイベントは、背景色の `Fill` やハイライト表示など、シリーズ項目の外観を条件付きで構成する場合に処理されます。 @@ -201,124 +774,34 @@ _language: ja * 新しい `XAxisMaximumGap` は、`XAxisGap` を使用するときにプロットされたシリーズの最大許容値を決定します。ギャップは、プロットされたシリーズの列またはバー間のスペースの量を決定します。 * 新しい `XAxisMinimumGapSize` は、`XAxisGap` を使用するときに、プロットされたシリーズの最小許容ピクセルベース値を決定し、各カテゴリ間に常にある程度の間隔があることを保証します。 -### {PackageGrids} (データ グリッド) - -新機能 - [行ページング](grids/data-grid/row-paging.md)を追加しました。これは、大量のデータセットを類似したコンテンツを持つ一連のページに分割するために使用されます。ページネーションを使用すると、データを設定された行数で表示することができ、ユーザーはスクロール バーを使用せずにデータを順次閲覧することができます。テーブル ページネーションの UI には通常、現在のページ、合計ページ、ユーザーがページをめくるためのクリック可能な [前へ] と [次へ] の矢印 / ボタンなどが含まれます。 - -### 新しいコンポーネント - -* [Chip](inputs/chip.md) -* [Circular Progress](inputs/circular-progress.md) -* [Linear Progress](inputs/linear-progress.md) -* [Drop Down](inputs/dropdown.md) -* [Slider & Range Slider](inputs/slider.md) -* [Snackbar](notifications/snackbar.md) -* [Toast](notifications/toast.md) - -
    - -## **2.0.0** -### {PackageComponents} -#### 新しいコンポーネントとテーマ - -これらは **{PackageComponents}** パッケージでのみ関連しています。 - -* [スライダー](inputs/slider.md)を追加しました。 -* [範囲スライダー](inputs/slider.md)を追加しました。 -* `igniteui-webcomponents/themes/bootstrap.css` のテーマの構造を変更するダーク テーマを追加しました: -ライト テーマの場合は `igniteui-webcomponents/themes/light/bootstrap.css` -ダーク テーマの場合は `igniteui-webcomponents/themes/dark/bootstrap.css` - -#### 重大な変更 - -このリリースでは、Calendar、Card、Navigation Drawer、および Radio コンポーネントの API にいくつかの重大な変更が導入されています。 - -* Radio コンポーネントの `required` プロパティをサポートする機能が追加されました。 -* 重大な変更: - * Calendar コンポーネントの **value: Date | Date[]** プロパティを 2 つのプロパティに分割しました: `value`: Date おとび `values`: Date[]。 - * Calendar コンポーネントの **hasHeader** プロパティと **has-header** 属性をそれぞれ `hideHeader` と `hide-header` に置き換えました。 - * Card コンポーネントの **outlined** プロパティを `elevated` に置き換えました。 - * Navigation Drawer コンポーネントの **igcOpening**、**igcOpened**、**igcClosing**、および **igcClosed** イベントを削除しました。 - -
    - -## **{PackageVerChanges-21-2.1}** - -### {PackageGrids} (データ グリッド) - -#### データ グリッド -- ドロップダウンの項目に複数のフィールドで構成されるキーが含まれている場合に使用される `ComboBoxColumn` に string[] 型の `ValueMultiField` が追加されました。 - -> [!Note] -> 以下の重大な変更が導入されました: - -- `ValueField` プロパティを string[] 型から string に変更しました。 - -### {PackageInputs} - -#### 日付ピッカー -- `ValueChanged` イベントを `SelectedValueChanged` に変更しました。 - -#### 複数列コンボボックス -- `TextChanged` イベントを `TextValueChanged` に変更しました。 -- `ValueChanged` イベントを `SelectedValueChanged` に変更しました。 - -
    - -## **1.0.0** -### {PackageComponents} -#### 新しいコンポーネント - -これらは **{PackageComponents}** パッケージでのみ関連しています。 - -* [Avatar](layouts/avatar.md) -* [Badge](inputs/badge.md) -* [Button & Icon Button](inputs/button.md) -* [Calendar](scheduling/calendar.md) -* [Card](layouts/card.md) -* [Checkbox](inputs/checkbox.md) -* [Form](inputs/form.md) -* [Icon](layouts/icon.md) -* [Input](inputs/input.md) -* [List](grids/list.md) -* [Navigation Bar](menus/navbar.md) -* [Navigation Drawer](menus/navigation-drawer.md) -* [Radio & Radio Group](inputs/radio.md) -* [Ripple](inputs/ripple.md) -* [Switch](inputs/switch.md) - -
    - -## **{PackageVerChanges-21-2}** +### **{PackageVerChanges-21-2}** > [!Note] > パッケージ 「lit-html」 を確認してください。最適な互換性のために、「^2.0.0」 以降がプロジェクトに追加されます。 -### {PackageCharts} (チャート) - このリリースでは、地理マップとすべてのチャート コンポーネントのビジュアル デザインと構成オプションにいくつかの改善と簡素化が導入されています。 * `FinancialChart` と `CategoryChart` の `YAxisLabelLocation` プロパティのタイプを **AxisLabelLocation** から **YAxisLabelLocation** に変更しました。 -* `FinancialChart` の **AxisLabelLocation** から **XAxisLabelLocation** に `XAxisLabelLocation` プロパティのタイプを変更しました。 +* `FinancialChart` の `XAxisLabelLocation` プロパティのタイプを **AxisLabelLocation** から **XAxisLabelLocation** に変更しました。 * `CategoryChart` に `XAxisLabelLocation` プロパティを追加しました。 * 凡例で `XamGeographicMap` の地理的なシリーズを表すためのサポートが追加されました。 -* `FinancialChart` と`CategoryChart` にデフォルトの十字線を追加しました。 -* `FinancialChart` と`CategoryChart` にデフォルトの十字線の注釈を追加しました。 -* `FinancialChart` にデフォルトで最終値の注釈を追加しました。 -* カテゴリ チャートとファイナンシャル チャートに新しいプロパティを追加しました: - - 十字線をカスタマイズするための `CrosshairsLineThickness` およびその他のプロパティ - - 十字線の注釈をカスタマイズするための `CrosshairsAnnotationXAxisBackground` およびその他のプロパティ - - 最終値の注釈をカスタマイズするための `FinalValueAnnotationsBackground` およびその他のプロパティ +* `FinancialChart` と `CategoryChart` にデフォルトの十字線を追加しました。 +* `FinancialChart` と `CategoryChart` にデフォルトの十字線の注釈を追加しました。 +* `FinancialChart` にデフォルトで最終値の注釈を追加しました +* カテゴリ チャートとファイナンシャル チャートに新しいプロパティを追加しました： + - 十字線をカスタマイズするための `CrosshairsLineThickness` およびその他のプロパティ。 + - 十字線の注釈をカスタマイズするための `CrosshairsAnnotationXAxisBackground` およびその他のプロパティ。 + - 最終値の注釈をカスタマイズするための `FinalValueAnnotationsBackground` およびその他のプロパティ。 - シリーズ塗りつぶしの不透明度を変更できる `AreaFillOpacity` (エリア チャートなど) - マーカーの厚さを変更できる `MarkerThickness` * カテゴリ チャート、ファイナンシャル チャート、データ チャート、および地理マップに新しいプロパティを追加しました。 - - 同じチャート内の複数のシリーズにどのマーカー タイプを割り当てることができる `MarkerAutomaticBehavior` + - 同じチャート内の複数のシリーズにどのマーカー タイプを割り当てることができる `MarkerAutomaticBehavior` - 凡例で表されるすべてのシリーズのバッジの形状を設定するための `LegendItemBadgeShape` - - 凡例のすべてのシリーズにバッジの複雑さを設定するための `LegendItemBadgeMode` + - 凡例のすべてのシリーズにバッジの複雑さを設定するための `LegendItemBadgeMode` * データ チャートと地理マップのシリーズに新しいプロパティを追加しました。 - - 凡例で表される特定のシリーズにバッジの形状を設定するための `LegendItemBadgeShape` + - 凡例で表される特定のシリーズにバッジの形状を設定するための `LegendItemBadgeShape` - 凡例の特定のシリーズにバッジの複雑さを設定するための `LegendItemBadgeMode` -* カテゴリ チャートとシリーズで、デフォルトの垂直十字線ストロークを#000000 から #BBBBBB に変更しました。 +* カテゴリ チャートとシリーズで、デフォルトの垂直十字線ストロークを #000000 から #BBBBBB に変更しました。 * 同じチャートにプロットされたすべてのシリーズのマーカーの図形を円に変更しました。これは、チャートの `MarkerAutomaticBehavior` プロパティを `SmartIndexed` 列挙値に設定することで元に戻すことができます。 * チャートの凡例のシリーズの簡略化された図形で、円、線、または四角のみを表示します。これは、チャートの `LegendItemBadgeMode` プロパティを `MatchSeries` 列挙値に設定することで元に戻すことができます。 * アクセシビリティを向上させるために、すべてのチャートに表示されるシリーズとマーカーのカラー パレットを変更しました @@ -327,25 +810,7 @@ _language: ja | -------------------- | ------------------- | | #8BDC5C
    #8B5BB1
    #6DB1FF
    #F8A15F
    #EE5879
    #735656
    #F7D262
    #8CE7D9
    #E051A9
    #A8A8B7 | #8BDC5C
    #8961A9
    #6DB1FF
    #82E9D9
    #EA3C63
    #735656
    #F8CE4F
    #A8A8B7
    #E051A9
    #FF903B
    | -
    - -### {PackageGrids} (データ グリッド) - -* 新規機能: - - [フィルター行](grids/data-grid/column-filtering.md) - - [レイアウトのカスタマイズ読み込み/保存](grids/data-grid/load-save-layout.md) - - [列をグループ化するための GroupBy 領域](grids/data-grid/row-grouping.md) - - [セルの結合](grids/data-grid/cell-merging.md) -* 新規 API: - - `SelectionChanged` イベントを追加しました。複数行の選択など、選択のインタラクションの変化を検出するために使用されます。 -* 重大な変更: - - グリッドの SummaryScope プロパティのタイプを `DataSourceSummaryScope` から SummaryScope に変更しました。 - - GroupHeaderDisplayMode プロパティのタイプを `DataSourceSectionHeaderDisplayMode` から GroupHeaderDisplayMode に変更しました。 - -
    - -## **{PackageVerChanges-21-1}** -### {PackageCharts} (チャート) +### **{PackageVerChanges-21-1}** このリリースでは、すべてのチャート コンポーネントに、いくつかの新しく改善されたビジュアル デザインと構成オプションが導入されています。例えば、`XamDataChart`、`CategoryChart`、および `FinancialChart`。 @@ -355,9 +820,9 @@ _language: ja * ファイナンシャル/ウォーターフォール シリーズの `NegativeBrush` および `NegativeOutline` プロパティを #C62828 から #ee5879 に変更しました。 * マーカーの厚さを 1 pxから 2 pxに変更しました。 * `PointSeries`、`BubbleSeries`、`ScatterSeries`、`PolarScatterSeries` のマーカーのアウトラインに一致するようにマーカーの塗りつぶしを変更しました。`MarkerFillMode` プロパティを Normal に設定すると、この変更を元に戻すことができます。 -* `TimeXAxis` と`OrdinalTimeXAxis` のラベリングを圧縮しました。 +* `TimeXAxis` および `OrdinalTimeXAxis` のラベリングを圧縮しました。 * 新しいマーカー プロパティ: - - series.`MarkerFillMode` - マーカーがアウトラインに依存するように、`MarkerFillMode` に設定できます。 + - series.`MarkerFillMode` - マーカーがアウトラインに依存するように、`MatchMarkerOutline` に設定できます。 - series.`MarkerFillOpacity` - 0〜1 の値に設定できます。 - series.`MarkerOutlineMode` - マーカーのアウトラインが塗りブラシの色に依存するように、`MatchMarkerBrush` に設定できます。 * 新シリーズ プロパティ: @@ -393,110 +858,78 @@ _language: ja #### チャート凡例 -* バブル、ドーナツ、および円チャートで使用できる水平方向の `Orientation` プロパティを ItemLegend に追加しました。 -* `LegendHighlightingMode` プロパティの追加 - 凡例項目にホバーした時にシリーズのハイライト表示を有効にします。 +* バブル、ドーナツ、および円チャートで使用できる水平方向の `Orientation` プロパティを ItemLegend に追加しました +* `LegendHighlightingMode` プロパティの追加 - 凡例項目にホバーした時にシリーズのハイライト表示を有効にします -### {PackageMaps} (GeoMap) -> [!Note] -> これらの機能は CTP です。 - -* マップの表示を折り返すためのサポートが追加されました (水平方向に無限にスクロールできます)。 -* 座標原点を折り返しながら、一部のマップ シリーズの表示をシフトするためのサポートが追加されました。 -* シェイプ シリーズのハイライト表示のサポートが追加されました。 -* シェイプ シリーズの一部の注釈レイヤーのサポートが追加されました。 +## {PackageInputs} -
    +### **{PackageVerChanges-22-2.2}** -### {PackageGrids} +* `IgcDateTimeInput` で StepDownAsync(DateTimeInputDatePart.Date, SpinDelta.Date)、DateTimeInputDatePart ではなく DatePart に切り詰められるようになりました。 +* `IgcRadio` および `IgcRadioGroup` で、無効な状態のスタイルとともにコンポーネントの検証が追加されました。 +* `IgcMask` - マスク パターン リテラルをエスケープする機能が追加されました。 +* `IgcBadge` - バッジの形状を制御する `Shape` プロパティが追加され、`Square` または `Rounded` のいずれかになります。デフォルトでは、バッジの形状は Rounded です。 +* `IgcAvatar` - `RoundShape` プロパティは非推奨になり、将来のバージョンで削除される予定です。ユーザーは、新しく追加された `Shape` 属性によってアバターの形状を制御できます。形状属性は、`Square`、`Rounded`、または `Circle` です。アバターの図形はデフォルトで `Square` です。 -* `EditOnKeyPress`、(別名: Excel スタイルの編集) を追加し、入力するとすぐに編集を開始します。 -* `EditModeClickAction` プロパティを追加しました - デフォルトでは、編集モードに入るにはダブル クリックが必要です。これを `SingleClick` に設定して、新しいセルを選択するときに編集モードを実行できるようにすることができます。 -* `EnterKeyBehaviors` プロパティの追加 - 別名 Excel スタイル ナビゲーション (Enter 動作) - Enter キーの動作を制御します。たとえば、オプションは none、edit、move up、down、left、right です。 -* `EnterKeyBehaviorAfterEdit` プロパティの追加 - 編集モードでは、このプロパティは Enter キーが押されたときを制御します。例えば、オプションは (下、上、右、左のセルに移動) です。 -* `SelectAllRows` メソッドを追加しました。 -* 行範囲の選択を追加しました - `GridSelectionMode` プロパティを MultipleRow に設定すると、次の新しい機能が含まれるようになりました: - - クリックしてドラッグし、行を選択します。 - - Shift キーを押しながらクリックして、複数の行を選択します。 - - Shift キーを押しながら上下の矢印キーを押して、複数の行を選択します。 -* スペース バーを押すと、MultipleRow または SingleRow に設定された `GridSelectionMode` プロパティを介してアクティブな行の選択が切り替わります。 -* 列オプション ダイアログに列集計を追加しました。 +### **{PackageVerChanges-21-2.1}** -### {PackageInputs} +- Date Picker: + * ValueChanged イベントを `SelectedValueChanged` に変更しました。 +- Multi-Column ComboBox: + * `TextChanged` イベントを `TextValueChanged` に変更しました。 + * `ValueChanged` イベントを `SelectedValueChanged` に変更しました。 -#### 日付ピッカー +### **{PackageVerChanges-21-1}** -* `ShowTodayButton` - 現在の日付のボタンの表示を切り替えます。 -* `Label` - 日付値の上にラベルを追加します。 -* `Placeholder` プロパティ - 値が選択されていない場合にカスタム テキストを追加します。 -* `FormatString` - 入力日付文字列をカスタマイズします。(例: `yyyy-MM-dd`) -* `DateFormat` - 選択した日付を LongDate または ShortDate のどちらとして表示するかを指定します。 -* `FirstDayOfWeek` - 週の最初の曜日を指定します。 -* `FirstWeekOfYear` - 年の最初の週をいつ表示するかを指定します。例えば、最初の 1 週間、最初の 4 日間の週です。 -* `ShowWeekNumbers` - 週番号の表示を切り替えます。 -* `MinDate` & `MaxDate` - 使用可能の選択できる日付の範囲を指定する日付制限。 -* アクセシビリティの追加 +- Date Picker: + - `ShowTodayButton` - 現在の日付のボタンの表示を切り替えます。 + - `Label` - 日付値の上にラベルを追加します。 + - `Placeholder` プロパティ - 値が選択されていない場合にカスタム テキストを追加します。 + - `FormatString` - 入力日付文字列をカスタマイズします。(例: `yyyy-MM-dd`) + - `DateFormat` - 選択した日付を LongDate または ShortDate のどちらとして表示するかを指定します。 + - `FirstDayOfWeek` - 週の最初の曜日を指定します。 + - `FirstWeekOfYear` - 年の最初の週をいつ表示するかを指定します。例えば、最初の 1 週間、最初の 4 日間の週です。 + - `ShowWeekNumbers` - 週番号の表示を切り替えます。 + - `MinDate` & `MaxDate` - 使用可能の選択できる日付の範囲を指定する日付制限。 + - アクセシビリティの追加 -
    -## **{PackageVerChangedFields}** +## {PackageMaps} -### {PackageGrids} (データ グリッド) +### **{PackageVerChanges-21-1}** > [!Note] -> これらの重大な変更は、グリッド パッケージで導入されました。 - -- PropertyPath の名称変更 - -データ グリッド コンポーネントの `propertyPath` プロパティ名が `field` に変更されました。これは、すべての Column タイプ、GroupDescription、SortDescription および SummaryDescription に適用します。 - -```html - -``` - -```ts -import { IgcColumnSummaryDescription, IgcColumnSortDescription, IgcColumnGroupDescription} from 'igniteui-webcomponents-grids' -const productCount = new IgcColumnSummaryDescription(); -productCount.field = "ProductName"; -const colSortDesc = new IgcColumnSortDescription(); -colSortDesc.field = "UnitsInStock"; -const income = new IgcColumnGroupDescription(); -income.field = "Income"; -``` - -## **{PackageVerRenamedGrid}** - -### {PackageGrids} (データ グリッド) - -- Live Grid の名称変更 - -Data Grid コンポーネントおよび対応するモジュールの名前が 「LiveGrid」 から 「DataGrid」 に変更されました。 +> これらの機能は CTP です。 -> [!Note] -> これらの重大な変更は、これらのパッケージとコンポーネントでのみ導入されました: +* マップの表示を折り返すためのサポートが追加されました (水平方向に無限にスクロールできます)。 +* 座標原点を折り返しながら、一部のマップ シリーズの表示をシフトするためのサポートが追加されました。 +* シェイプ シリーズのハイライト表示のサポートが追加されました。 +* シェイプ シリーズの一部の注釈レイヤーのサポートが追加されました。 -グリッドとそれに対応するモジュールをインポートする新しいコードは以下のとおりです。 -```ts -import { IgcDataGrid } from "igniteui-webcomponents-grids"; -import { IgcDataGridModule } from 'igniteui-webcomponents-grids'; -``` +## {PackageGauges} -- Data Grid の必須ピア依存関係 +### **{PackageVerChanges-24-1-JUN}** -Data Grid コンポーネントには 「inputs」 パッケージが必要です。 +- `XamRadialGauge` + - ハイライト針の新しいラベル。`HighlightLabelText` と `HighlightLabelSnapsToNeedlePivot` および、その他の HighlightLabel の多くのスタイル関連プロパティが追加されました。 -```ts -**npm install --save {PackageInputs}** -``` - +### **{PackageVerChanges-23-2-MAR}** -
    +- `XamRadialGauge` + - 新しいタイトル/サブタイトルのプロパティ。`TitleText`、`SubtitleText` はゲージの下部近くに表示されます。さらに、`TitleFontSize`、`TitleFontFamily`、`TitleFontStyle`、`TitleFontWeight`、`TitleExtent` など、さまざまなタイトルとサブタイトルのフォント プロパティが追加されました。最後に、新しい `TitleDisplaysValue` により、値を針の位置に対応させることができます。 + - `XamRadialGauge` の新しい `OpticalScalingEnabled` と `OpticalScalingSize` プロパティを追加しました。この新機能は、ゲージのラベル、タイトル、サブタイトルが 100% のオプティカル スケーリングを持つサイズを管理します。この新機能の詳細については、[こちら](radial-gauge.md#オプティカル-スケーリング)を参照してください。 + - 新しいハイライト針が追加されました。`HighlightValue` と `HighlightValueDisplayMode` の両方に値と 'Overlay' 設定が指定されたとき、メインの針が薄く表示され、新しい針が表示されます。 +- `XamLinearGauge` + - 新しいハイライト針が追加されました。`HighlightValue` と `HighlightValueDisplayMode` の両方に値と 'Overlay' 設定が指定されたとき、メインの針が薄く表示され、新しい針が表示されます。 +- `XamBulletGraph` + - `HighlightValueDisplayMode` が 'Overlay' 設定に適用されたとき、パフォーマンス バーには値と新しい `HighlightValue` の差が反映されるようになりました。ハイライト値には、フィルタリング/サブセットが完了した測定パーセンテージが塗りつぶされた色で表示され、残りのバーの外観は割り当てられた値に対して薄く表示され、リアルタイムでパフォーマンスを示します。 - -## **{PackageVerChangedImports}** +## **gauges/charts/maps/grids** +### **{PackageVerChangedImports}** -- import ステートメントの変更 +- Import ステートメントの変更 Import ステートメントは、API クラスと列挙型へのフル パスではなくパッケージ名のみを使用するように簡素化されました。 @@ -505,13 +938,13 @@ Import ステートメントは、API クラスと列挙型へのフル パス | 影響されるパッケージ | 影響されるコンポーネント | | ------------------|---------------------| -| {PackageExcel} | [Excel ライブラリ](excel-library.md) | -| {PackageSpreadsheet} | [スプレッドシート](spreadsheet-overview.md) | -| {PackageMaps} | [地理マップ](geo-map.md)、[ツリーマップ](charts/types/treemap-chart.md) | -| {PackageGauges} | [ブレット グラフ](bullet-graph.md)、[リニア ゲージ](linear-gauge.md)、[ラジアル ゲージ](radial-gauge.md) | -| {PackageCharts}| カテゴリ チャート、データ チャート、ドーナツ チャート、ファイナンシャル チャート、円チャート、[ズーム スライダー](zoomslider-overview.md) | +| {PackageExcel} | [Excel Library](excel-library.md) | +| {PackageSpreadsheet} | [Spreadsheet](spreadsheet-overview.md) | +| {PackageMaps} | [Geo Map](geo-map.md)、[Treemap](charts/types/treemap-chart.md) | +| {PackageGauges} | [Bullet Graph](bullet-graph.md)、[Linear Gauge](linear-gauge.md)、[Radial Gauge](radial-gauge.md) | +| {PackageCharts}| Category Chart、Data Chart、Donut Chart、Financial Chart、Pie Chart、[Zoom Slider](zoomslider-overview.md) | | {PackageCore} | すべてのクラスと列挙型 | -| {PackageGrids} | [データ グリッド](grids/data-grid/overview.md) | +| {PackageGrids} | [Data Grid](grids/data-grid/overview.md) | - 変更後のコード @@ -570,3 +1003,254 @@ import { IgcGeographicMapModule } from "igniteui-webcomponents-maps/ES5/igc-geog import { IgcLiveGridModule } from 'igniteui-webcomponents-grids/ES5/igc-live-grid-module'; import { IgcLiveGridComponent } from 'igniteui-webcomponents-grids/ES5/igc-live-grid-component'; ``` + +## {PackageDockManager} + +### **{PackageDockManagerVerChanges-1.14.4}** + +#### 非推奨 +- `SplitPane` の `IsMaximized` は非推奨です。分割ペイン レベルで isMaximized を true に設定しても、分割ペインはコンテナーとしてのみ機能し、最大化されて表示される実際のコンテンツがないため、実際の効果はありません。代わりに、`TabGroupPane` および/または `ContentPane` の `IsMaximized` プロパティを使用してください。 + +### **{PackageDockManagerVerChanges-1.14.3}** + +#### 修正 +- ドック マネージャーは、Vite ベースのビルドでエラーをスローします。 +- 空のルート分割ペインのエッジにドッキングするとエラーが発生します。 + +### **{PackageDockManagerVerChanges-1.14.2}** + +#### 修正 +- すばやくドラッグして、パネルをドック マネージャーの境界内に制限します。 + +### **{PackageDockManagerVerChanges-1.14.1}** + +#### 修正 +- 近接ドックの RTL チェック + +### **{PackageDockManagerVerChanges-1.14.0}** + +#### 新機能 + +- `showPaneHeaders` プロパティを追加しました。 +- `proximityDock` プロパティを追加しました。 +- `containedInBoundaries` プロパティを追加しました。 + +#### 機能拡張 +- 要素の `contentId` を CSS パーツとして追加します。 + +#### 修正 +- ペインを最大化してピン固定を解除すると、ペインがクリックできなくなります。 +- `DockManager` の `AllowInnerDock` が **false** に設定されている場合、`AcceptsInnerDock` が **true** に設定されているペインでは中央ドックが可能です。 + +### **{PackageDockManagerVerChanges-1.13.0}** + +#### 新機能 +- `FocusPane` メソッドを追加しました。 +- `AllowInnerDock` プロパティと `AcceptsInnerDock` プロパティを追加しました。 + +#### 機能拡張 +- レイアウトでペインの最大化された状態を保存します。 + +#### 修正 +- タブの選択順序は保持されません。 + +#### **{PackageDockManagerVerChanges-1.12.5}** + +#### 新機能 +- `paneScroll` イベントを追加しました。 + +#### 修正 +- ТabGroupPane: ピン固定されていない複数のペインのうち 1 つをピン固定すると、すべてのペインがピン固定されます。 +- RTL モードでコンテキスト メニューが正しく配置されません。 +- キーボードとドッキングすると、アクティブなペインは保持されません。 + +### **{PackageDockManagerVerChanges-1.12.4}** + +#### 修正 +- フローティング ペイン内に複数のタブ グループ ペインがある場合、アクティブ ペインが誤って設定されます。 + +### **{PackageDockManagerVerChanges-1.12.3}** + +#### 修正 +- 別のウィンドウにペインをドロップするとエラーが発生します。 + +### **{PackageDockManagerVerChanges-1.12.2}** + +#### 機能拡張 +- `tabs-more-menu-content` と `tabs-more-menu-item` CSS パーツを追加しました。 + +#### 修正 +- RTL モードでは、ドッキング インジケーターの左/右矢印の位置が逆になります。 +- コンテキスト メニューが正しく配置されていません。 +- `addEventListener` および `removeEventListener` の不足しているオーバーロード。 + +### **{PackageDockManagerVerChanges-1.12.1}** + +#### 機能拡張 +- `splitterResizeStart` イベントと `splitterResizeEnd` イベントにペイン情報を含めます。 +- `DockManager` がクラスとしてエクスポートされるようになりました。 + +#### 修正 +- `unpinnedHeaderId` を持つスロットのコンテンツは正しく更新されません。 + +### **{PackageDockManagerVerChanges-1.12.0}** + +#### 修正 +- `allowFloating: false` ではドッキングが機能しません。 +- アクティブなときにフライアウト ペインが閉じます。 +- フォーカス可能な要素はフォーカスを受け取りません。 +- ペイン ナビゲーターを使用してナビゲートしても、選択したフローティング ウィンドウは最前面に表示されません。 +- `splitterResizeStart` イベントはキャンセルできません。 +- タブのコンテキスト メニューが正しく配置されていません。 + +### **{PackageDockManagerVerChanges-1.11.3}** + +#### 新機能 +- `contextMenuPosition` プロパティを追加しました。 +- `tab-header-close-button` CSS パーツに `selected` オプションを追加しました。 + +### **{PackageDockManagerVerChanges-1.11.2}** + +#### 新機能 +- `tab-header-close-button` CSS パーツに `hovered` オプションを追加しました。 + +### **{PackageDockManagerVerChanges-1.11.1}** + +#### 修正 +- `tab-header` の CSS パーツの修正。 + +### **{PackageDockManagerVerChanges-1.11.0}** + +#### 新機能 +- さまざまなボタンの `ShowHeaderIconOnHover` プロパティのオプションを追加しました。 +- スプリッター ハンドル CSS パーツに `horizontal` および `vertical` オプションを追加しました。 +- `header-title` の CSS パーツを追加しました。 +- アクティブ/非アクティブ状態の `tab-header-close-button` CSS パーツに `hover` オプションを追加しました。 +- `paneHeaderCloseButton` スロットと `tabHeaderCloseButton` スロットを追加しました。 + +### **{PackageDockManagerVerChanges-1.10.0}** + +#### 新機能 +- `ShowHeaderIconOnHover` プロパティを追加しました。 + +#### 修正 +- アクティブなペインはフロート/ドック上で保持されません。 +- スプリッター スタイルは適用されません。 +- カスタマイズされたヘッダー ボタンの `click` イベントが機能しません。 +- スプリッター上でドラッグ中に誤ったドック インジケーターが削除されました。 + +### **{PackageDockManagerVerChanges-1.9.0}** + +#### 修正 +- スタイルは適用されません。 +- RTL モードでのサイズ変更。 + +### **{PackageDockManagerVerChanges-1.8.0}** + +#### 新機能 +- ドック マネージャーのボタンをカスタマイズします。 +- レイアウトが更新されたときに発生する `LayoutChange` イベント。 + +### **{PackageDockManagerVerChanges-1.7.0}** + +#### 新機能 +- カスタマイズ可能なフローティング ペイン ヘッダー。 +- ペインごとの `Disabled` プロパティ。 +- `DocumentOnly` プロパティは、コンテンツ ペインをドキュメント ホスト内にのみドッキングできるようにします。 +- 分割ペインとタブ グループ ペインの空の領域を表示できるようにする `AllowEmpty` プロパティ。 +- ドック マネージャーの `DisableKeyboardNavigation` プロパティ。 + +#### 修正 +- ドッキング インジケーターは、現在ドラッグされているフローティング ペイン上に表示されます。 + +### **{PackageDockManagerVerChanges-1.6.0}** + +#### 新機能 +- ドック マネージャーのペインとタブをカスタマイズします。 + +#### 修正 +- フローティング ペインはページの外側にドラッグ可能です。 + +### **{PackageDockManagerVerChanges-1.5.0}** + +#### 新機能 +- ペインごとの `AllowMaximize` プロパティ。 + +#### 修正 +- ピン固定されていないペインは、そのコンテンツをクリックすると自動的に閉じます。 +- 同じタブ グループにピン固定されていないペインがある場合、オーバーフロー メニューから選択されたペインはアクティブ化されません。 + +### **{PackageDockManagerVerChanges-1.4.1}** + +#### 修正 +- タブ グループ内に配置された `allowPinning: false` が指定されたペインはピン固定を解除できます。 +- キーボードを使用して最大化されたペインから移動するときに、最大化されたペインを正規化します。 + +### **{PackageDockManagerVerChanges-1.4.0}** + +#### 新機能 +- フローティング ペインを作成せずにタブを並べ替えます。 +- キーボードナビゲーション。 +- ペイ ンナビゲーター。 +- フローティング ペインのサイズ変更を有効/無効にします。 +- フローティング ペインのサイズ変更のためのイベント。 + +#### 修正 +- アクティブ化されたときにペインを選択します。 +- アクティブ化されると、ピン固定されていないペインがフライアウトされます。 +- ペイン内で外部ポップアップをホストするときにエラーが発生します。 +- ネストされた Dock Manager コンポーネントではタブ選択が失われます。 +- フローティングとドッキングが無効になっているペインを含むフローティング ペインは移動できません。 +- 空のドック マネージャー内にフローティング ペインをドッキングするときに例外が発生します。 + +### **{PackageDockManagerVerChanges-1.3.0}** + +#### 新機能 +- すべてのタブ ヘッダーを表示するのに十分なスペースがない場合は、その他のタブ メニューが表示されます。 +- `hidden` プロパティを使用して、レイアウトからペインを削除せずに非表示にします。 +- タブとピン固定されていないペインのヘッダー スロット プロパティ - `tabHeaderId` と `unpinnedHeaderId`。 + +### **{PackageDockManagerVerChanges-1.2.0}** + +#### 新機能 +- アクティブ ペイン。 +- ローカライズのサポート + +#### 修正 +- 最後のドキュメント ホスト タブをドラッグし、ピン固定されていないペインがある場合にエラーが発生します。 +- `allowFloating: false` でペインをドッキングすると、タブのコンテンツが消えます。 +- ドッキング インジケーターをすばやく切り替えるときに例外が発生します。 + +### **{PackageDockManagerVerChanges-1.1.0}** + +#### 新機能 +- ペインの最大化。 +- ドッキング プレビュー シャドウ。 +- ARIA のサポート。 +- 外部ドラッグ/ドロップをサポートする API。 +- 閉じる、ピン固定、ドラッグなどのユーザー操作のプロパティとイベント。 +- Angular プロジェクトの `ng update` のサポート。 + +### **{PackageDockManagerVerChanges-1.0.3}** + +#### 機能拡張 +- キーボードを使用してスプリッターのサイズを変更します。 + +### **{PackageDockManagerVerChanges-1.0.2}** + +#### 修正 +- ペインは最小サイズに変更すると表示されなくなります。 + +### **{PackageDockManagerVerChanges-1.0.1}** + +#### 機能拡張 +- アクティブ カラーの CSS 変数を追加します。 +- コンテキスト メニューにキーボード サポートを追加します。 + +#### 修正 +- コンテキスト メニューを開いたときに最初のクリックで選択が機能しません。 +- 兄弟タブをピン固定/ピン固定解除した後、単一のタブが正しく描画されません。 + +### **{PackageDockManagerVerChanges-1.0.0}** + +Ignite UI Dock Manager の初期リリース \ No newline at end of file diff --git a/doc/jp/components/general-changelog-dv.md b/doc/jp/components/general-changelog-dv.md index 77096b733..779b8c0a1 100644 --- a/doc/jp/components/general-changelog-dv.md +++ b/doc/jp/components/general-changelog-dv.md @@ -2,7 +2,7 @@ title: {Platform} 新機能 | {ProductName} | インフラジスティックス _description: {ProductName} の新機能について学んでください。 _keywords: Changelog, What's New, {ProductName}, Infragistics, 変更ログ, 新機能, インフラジスティックス -mentionedTypes: ["SeriesViewer", "XYChart", "DomainChart", "XamDataChart", "Toolbar", "XamGeographicMap", "DatePicker", "MultiColumnComboBox", "CategoryChart", "CrosshairLayer", "FinalValueLayer", "CalloutLayer", "DataLegend", "XamRadialGauge", "XamRadialChart", "Toolbar"] +mentionedTypes: ["SeriesViewer", "XYChart", "DomainChart", "XamDataChart", "Toolbar", "XamGeographicMap", "DatePicker", "DataPieChart", "MultiColumnComboBox", "CategoryChart", "CrosshairLayer", "FinalValueLayer", "CalloutLayer", "DataLegend", "XamRadialGauge", "XamRadialChart", "Toolbar"] namespace: Infragistics.Controls.Charts _language: ja --- @@ -14,7 +14,47 @@ _language: ja > このトピックでは、{PackageAngularComponents} パッケージに含まれていないコンポーネントの変更についてのみ説明します。 > igniteui-angular コンポーネントに固有の変更については CHANGELOG.MD を参照してください。 -* [Ignite UI for Angular 変更ログ](https://github.com/IgniteUI/igniteui-angular/blob/master/CHANGELOG.md) +* [Ignite UI for Angular 変更ログ (GitHub)](https://github.com/IgniteUI/igniteui-angular/blob/master) + +## **{PackageVerChanges-24-1-SEP}** + +- [データ円チャート](charts/types/data-pie-chart.md) - `DataPieChart` は円ャートを表示する新しいコンポーネントです。このコンポーネントは、`CategoryChart` と同様に動作し、基になるデータ モデルのプロパティを自動的に検出しながら、ItemLegend コンポーネントを介して選択、ハイライト表示、アニメーション、凡例のサポートを可能にします。 + +- [比例カテゴリ角度軸](charts/types/radial-chart.md) - `XamDataChart` のラジアル円シリーズの新しい軸により、データ チャートのすべての追加機能を使用してロバスト可能な視覚化をする円チャートの作成が可能になります。 + +- `Toolbar` + + - 新しい ToolActionCheckboxList + 選択用のチェックボックスを備えた項目のコレクションを表示する新しい CheckboxList ToolAction。ToolAction CheckboxList 内のグリッドの高さは 5 項目まで大きくなり、その後スクロールバーが表示されます。 + + - 新しいフィルタリングのサポート + + - 軸フィールドの変更 + CategoryChart をターゲットにする場合のツールバーの新しいデフォルトの IconMenu。 + ラベル フィールドは X 軸にマップされ、値フィールドは Y 軸にマップされます。 + ターゲット チャートは、行われた変更にリアルタイムで反応します。チャートに ItemsSource が設定されていない場合、IconMenu は非表示になります。 + +## **{PackageVerChanges-24-1-JUN}** + +* Angular 18 のサポート。 + +### {PackageCharts} (チャート) + +* [データ凡例のグループ化](charts/features/chart-data-legend.md#{PlatformLower}-データ凡例のグループ化) と [データ ツールチップのグループ化](charts/features/chart-data-tooltip.md#{PlatformLower}-データ-チャートのデータ-ツールチップのグループ化) - 新しいグループ化機能が追加されました。`GroupRowVisible` プロパティは、各シリーズのグループ化を切り替え、オプトインすると `DataLegendGroup` プロパティを介してグループ テキストを割り当てることができます 同じ値が複数のシリーズに適用されている場合、それらはグループ化されて表示されます。すべてのユーザー向けに分類および整理する必要がある大規模なデータセットに役立ちます。 + +- [チャートの選択](charts/features/chart-data-selection.md) - 新しいシリーズ選択のスタイル設定。これは、`CategoryChart` および `XamDataChart` のすべてのカテゴリ、財務、およびラジアル シリーズに広く採用されています。シリーズはクリックして異なる色で表示したり、明るくしたり、薄くしたり、フォーカスのアウトラインを表示したりできます。個々のシリーズまたはデータ項目全体を通じて影響を受ける項目を管理します。 +複数のシリーズとマーカーがサポートされています。特定のデータ項目の値間のさまざまな相違点や類似点を示すのに役立ちます。また、`SelectedSeriesItemsChanged` イベントと `SelectedSeriesItems` は、選択内容に基づいたデータ分析を行うポップアップやその他の画面など、アプリケーション内で実行できるその他のアクションを取り巻く堅牢なビジネス要件を構築するための追加の支援として利用できます。 + +- [ツリーマップのハイライト表示](charts/types/treemap-chart.md#{PlatformLower}-リーマップのハイライト表示) - ツリー マップの項目のマウスオーバーによるハイライト表示を構成できる `HighlightingMode` プロパティが公開されました。このプロパティには 2 つのオプションがあります: `Brighten` では、マウスを置いた項目にのみハイライト表示が適用され、`FadeOthers` では、マウスホバーした項目のハイライト表示はそのままで、それ以外はすべてフェードアウトします。このハイライト表示はアニメーション化されており、`HighlightingTransitionDuration` プロパティを使用して制御できます。 + +- [ツリーマップのパーセントベースのハイライト表示](charts/types/treemap-chart.md#{PlatformLower}-ツリーマップのパーセントベースのハイライト表示) - 新しいパーセントベースのハイライト表示により、ノードはコレクションの進行状況またはサブセットを表すことができます。外観は、データ項目のメンバーによって、または新しい `HighlightedItemsSource` を指定することによって、特定の値までの背景色の塗りつぶしとして表示されます。`HighlightedValuesDisplayMode` で切り替えることができ、`FillBrushes` でスタイルを設定できます。 + +- `Toolbar` - 選択した特定のツールの周囲に境界線を描くための ToolAction の新しい `IsHighlighted` オプション。 + +### {PackageGauges} (ゲージ) + +- `XamRadialGauge` + - ハイライト針の新しいラベル。`HighlightLabelText` と `HighlightLabelSnapsToNeedlePivot` および、その他の HighlightLabel の多くのスタイル関連プロパティが追加されました。 ## **{PackageVerChanges-24-1-JUN}** @@ -230,7 +270,7 @@ _language: ja #### チャート凡例 -*バブル、ドーナツ、および円チャートで使用できる水平方向の `Orientation` プロパティを ItemLegend に追加しました。 +* バブル、ドーナツ、および円チャートで使用できる水平方向の `Orientation` プロパティを ItemLegend に追加しました。 * `LegendHighlightingMode` プロパティを追加 - 凡例項目にカーソルを合わせたときにシリーズのハイライト表示を有効にします。 ### {PackageMaps} (GeoMap) diff --git a/doc/jp/components/grids/_shared/column-moving.md b/doc/jp/components/grids/_shared/column-moving.md index 1b840101a..f4ffdb622 100644 --- a/doc/jp/components/grids/_shared/column-moving.md +++ b/doc/jp/components/grids/_shared/column-moving.md @@ -231,7 +231,6 @@ function onColumnMovingEnd(grid: IgrGridBaseDirective, event: IgrColumnMovingEve FilterMode="FilterMode.ExcelStyleFilter" AutoGenerate=true Data=northwindEmployees - DisplayDensity="DisplayDensity.Compact" Moving="true" ColumnMovingEndScript='onColumnMovingEnd'> diff --git a/doc/jp/components/grids/_shared/conditional-cell-styling.md b/doc/jp/components/grids/_shared/conditional-cell-styling.md index f16cf7307..a2591d772 100644 --- a/doc/jp/components/grids/_shared/conditional-cell-styling.md +++ b/doc/jp/components/grids/_shared/conditional-cell-styling.md @@ -1138,7 +1138,7 @@ function editDone(grid, evt) { * [検索](search.md) * [複数列ヘッダー](multi-column-headers.md) -* [表示密度](display-density.md) +* [サイズ](size.md) diff --git a/doc/jp/components/grids/_shared/editing.md b/doc/jp/components/grids/_shared/editing.md index 86bcf75a0..b4049d13c 100644 --- a/doc/jp/components/grids/_shared/editing.md +++ b/doc/jp/components/grids/_shared/editing.md @@ -158,86 +158,15 @@ igRegisterScript("SortingHandler", SortingHandler, false); ``` - ```tsx -function onSorting(grid: IgrGridBaseDirective, event: IgrSortingEventArgs) { +function onSorting(grid: {ComponentName}, event: IgrSortingEventArgs) { grid.endEdit(true); } -<{ComponentName} data={localData} primaryKey="ProductID" sorting={onSorting}> - -``` - - - - - -```html - - -``` - - - -```html -<{ComponentSelector} id="hierarchicalGrid" primary-key="ProductID" > - -``` - -```ts -constructor() { - var hierarchicalGrid = document.getElementById('hierarchicalGrid') as {ComponentName}Component; - hierarchicalGrid.data = this.data; - hierarchicalGrid.addEventListener("sorting", this.onSorting); -} - -public onSorting(event: IgcSortingEventArgs) { - var hierarchicalGrid = document.getElementById('hierarchicalGrid') as {ComponentName}Component; - hierarchicalGrid.endEdit(true); -} -``` - - - -```typescript -public onSorting(event: ISortingEventArgs) { - this.hierarchicalGrid.endEdit(true); -} -``` - - -```razor -<{ComponentSelector} - Id="hierarchicalGrid" - SortingScript="SortingHandler" - RowEditable="true"> +<{ComponentSelector} data={localData} primaryKey="ProductID" sorting={onSorting}> - -//In JavaScript -function SortingHandler() { - hierarchicalGrid.endEdit(true); -} -igRegisterScript("SortingHandler", SortingHandler, false); -``` - - - -```tsx - - ``` - - - -```tsx -public onSorting(grid: IgrGridBaseDirective, event: IgrSortingEventArgs) { - hierarchicalGrid.endEdit(true); -} -``` - - - ## API リファレンス diff --git a/doc/jp/components/grids/_shared/multi-column-headers.md b/doc/jp/components/grids/_shared/multi-column-headers.md index 6bc59e9c5..30f083514 100644 --- a/doc/jp/components/grids/_shared/multi-column-headers.md +++ b/doc/jp/components/grids/_shared/multi-column-headers.md @@ -116,7 +116,7 @@ _language: ja ```html - + @@ -308,7 +308,7 @@ _language: ja ```html - + @@ -472,7 +472,7 @@ _language: ja ```html - + diff --git a/doc/jp/components/grids/_shared/paging.md b/doc/jp/components/grids/_shared/paging.md index 984ac2d01..acba4f29c 100644 --- a/doc/jp/components/grids/_shared/paging.md +++ b/doc/jp/components/grids/_shared/paging.md @@ -25,9 +25,15 @@ _language: ja +```css +.gridSize { + --ig-size: var(--ig-size-small); +} +``` + ```html -<{ComponentSelector} #grid [data]="data" [height]="'500px'" [width]="'100%'" [displayDensity]="'cosy'"> +<{ComponentSelector} #grid class="gridSize" [data]="data" [height]="'500px'" [width]="'100%'"> @@ -35,13 +41,13 @@ _language: ja ```razor -<{ComponentSelector} @ref=grid Width="100%" Height="500px" Data=Data DisplayDensity="DisplayDensity.Cosy"> +<{ComponentSelector} @ref=grid Class="gridSize" Width="100%" Height="500px" Data=Data> ``` ```html -<{ComponentSelector} id="grid" height="500px" width="100%" display-density="Cosy"> +<{ComponentSelector} id="grid" class="gridSize" height="500px" width="100%" > @@ -50,7 +56,7 @@ _language: ja ```tsx -<{ComponentSelector} height="500px" width="100%" displayDensity="cosy"> +<{ComponentSelector} className="gridSize" height="500px" width="100%"> @@ -94,24 +100,24 @@ _language: ja ```html -<{ComponentSelector} #grid [data]="data"> +<{ComponentSelector} #grid [data]="data" className="gridSize"> + [selectOptions]="selectOptions"> ``` ```razor -<{ComponentSelector} @ref=grid Data=Data DisplayDensity="DisplayDensity.Compact"> - +<{ComponentSelector} @ref=grid Data=Data className="gridSize"> + ``` ```html -<{ComponentSelector} id="grid"> +<{ComponentSelector} id="grid" className="gridSize"> @@ -126,7 +132,6 @@ constructor() { paginator.page = grid.page; paginator.totalRecords = grid.totalRecords; paginator.selectOptions = selectOptions; - paginator.displayDensity = grid.displayDensity; } ``` @@ -134,8 +139,8 @@ constructor() { ```tsx const selectOptions = [5, 15, 20, 50]; -<{ComponentSelector}> - +<{ComponentSelector} className="gridSize"> + ``` diff --git a/doc/jp/components/grids/_shared/remote-data-operations.md b/doc/jp/components/grids/_shared/remote-data-operations.md index c827bb4c5..3ff50121a 100644 --- a/doc/jp/components/grids/_shared/remote-data-operations.md +++ b/doc/jp/components/grids/_shared/remote-data-operations.md @@ -750,7 +750,6 @@ BLAZOR CODE SNIPPET HERE [(page)]="page" [(perPage)]="perPage" [selectOptions]="selectOptions" - [displayDensity]="grid1.displayDensity" (pageChange)="paginate($event)" (perPageChange)="perPageChange($event)"> diff --git a/doc/jp/components/grids/_shared/search.md b/doc/jp/components/grids/_shared/search.md index 5ee043e27..59a6e1208 100644 --- a/doc/jp/components/grids/_shared/search.md +++ b/doc/jp/components/grids/_shared/search.md @@ -10,7 +10,7 @@ _language: ja # {Platform} {ComponentTitle} 検索フィルター -{Platform} {ComponentTitle} の {ProductName} 検索フィルター機能を使用すると、データのコレクション内の値を検索するプロセスが可能になります。この機能のセットアップが簡単になり、検索入力ボックス、ボタン、キーボード ナビゲーション、その他の便利な機能を使用して実装できるため、ユーザー エクスペリエンスがさらに向上します。ブラウザーにはネイティブなコンテンツ検索機能がありますが、ほとんどの場合で `{ComponentName}` は表示範囲外の行列を仮想化します。そのため、ネイティブ ブラウザー検索は DOM の一部でないため仮想化セルでデータを検索できません。{ComponentName} では、{Platform} Material テーブル ベースのグリッドの拡張により、**検索 API** を使用した**仮想コンテンツ**の検索が可能です。 +{Platform} {ComponentTitle} の {ProductName} 検索フィルター機能を使用すると、データのコレクション内の値を検索するプロセスが可能になります。この機能のセットアップが簡単になり、検索入力ボックス、ボタン、キーボード ナビゲーション、その他の便利な機能を使用して実装できるため、ユーザー エクスペリエンスがさらに向上します。ブラウザーにはネイティブなコンテンツ検索機能がありますが、ほとんどの場合で `{ComponentName}` は表示範囲外の行列を仮想化します。そのため、ネイティブ ブラウザー検索は DOM の一部でないため仮想化セルでデータを検索できません。`{ComponentName}` では、{Platform} Material テーブル ベースのグリッドの拡張により、**検索 API** を使用した**仮想コンテンツ**の検索が可能です。 ## {Platform} 検索の例 @@ -39,8 +39,14 @@ _language: ja ``` +```css +.gridSize { + --ig-size: var(--ig-size-small); +} +``` + ```razor -<{ComponentSelector} @ref=grid Width="100%" Height="480px" AllowFiltering=true AutoGenerate=false Data=marketData DisplayDensity="DisplayDensity.Compact"> +<{ComponentSelector} @ref=grid Class="gridSize" Width="100%" Height="480px" AllowFiltering=true AutoGenerate=false Data=marketData> @@ -58,7 +64,7 @@ _language: ja ``` ```html -<{ComponentSelector} id="grid1" auto-generate="false" allow-filtering="true"> +<{ComponentSelector} id="grid1" class="gridSize" auto-generate="false" allow-filtering="true"> @@ -69,7 +75,7 @@ _language: ja ``` ```tsx -<{ComponentSelector} ref={gridRef} autoGenerate="false" allowFiltering="true" displayDensity="compact" data={data}> +<{ComponentSelector} ref={gridRef} className="gridSize" autoGenerate="false" allowFiltering="true" data={data}> @@ -152,6 +158,7 @@ public exactMatch: boolean = false; private searchBox: IgcInputComponent; + private searchIcon: IgcIconComponent; private clearIcon: IgcIconComponent; private nextIconButton: IgcIconButtonComponent; private prevIconButton: IgcIconButtonComponent; @@ -170,6 +177,7 @@ public bool exactMatch = false; ```tsx const gridRef = useRef(null); +const searchIconRef = useRef(null) const clearIconRef = useRef(null); const iconButtonPrevRef = useRef(null); const caseSensitiveChipRef = useRef(null); @@ -279,6 +287,7 @@ public nextSearch(){ ```tsx function handleOnSearchChange(input: IgrInput, event: IgrComponentValueChangedEventArgs) { setSearchText(event.detail); + gridRef.current.findNext(event.detail, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected); } function nextSearch() { @@ -407,15 +416,11 @@ constructor() { prevIconButton.addEventListener("click", this.prevSearch); } public prevSearch() { - const grid = document.getElementById('grid') as IgcGridComponent; - const searchBox = document.getElementById('searchBox') as IgcInputComponent; - grid.findPrev(searchBox.value, false, false); + this.grid.findPrev(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected); } public nextSearch() { - const grid = document.getElementById('grid') as IgcGridComponent; - const searchBox = document.getElementById('searchBox') as IgcInputComponent; - grid.findNext(searchBox.value, false, false); + this.grid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected); } ``` @@ -511,33 +516,26 @@ public searchKeyDown(ev) { ```html - + ``` ```typescript constructor() { - const search1 = document.getElementById('search1') as HtmlInputElement; - search1.addEventListener('keydown', this.searchKeyDown); - search1.addEventListener('change', this.findNext); + searchBox.addEventListener("keydown", (evt) => { this.onSearchKeydown(evt); }); + this.searchBox.addEventListener("igcInput", (evt) => { + this.searchIcon.name = evt.detail ? 'clear' : 'search'; + this.grid.findNext(evt.detail, this.caseSensitiveChip.selected, this.exactMatchChip.selected); + }); } -public findNext(e) { - const searchText = e.target.value; - const caseSensitive = false; - const exactMatch = false; - const grid = document.getElementById('grid') as IgcGridComponent; - grid.findNext(searchText, caseSensitive, exactMatch) -} - -public searchKeyDown(ev) { - const search1 = document.getElementById('search1') as HtmlInputElement; - const grid = document.getElementById('grid') as IgcGridComponent; - if (ev.key === 'Enter') { - ev.preventDefault(); - grid.findNext(search1.value, false, false); - } else if (ev.key === 'ArrowUp' || ev.key === 'ArrowLeft') { - ev.preventDefault(); - grid.findPrev(search1.value, false, false); +public onSearchKeydown(evt: KeyboardEvent) { + if (evt.key === 'Enter' || evt.key === 'ArrowDown') { + evt.preventDefault(); + this.grid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected); + } else if (evt.key === 'ArrowUp') { + evt.preventDefault(); + this.grid.findPrev(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected); + } } } ``` @@ -927,7 +925,7 @@ public clearSearch() { ```html - +
    Case Sensitive Exact Match @@ -945,10 +943,12 @@ constructor() { const prevIconText = ""; const nextIconText = ""; const clearIconText = ""; + const searchIconText = ""; registerIconFromText("prev", prevIconText, "material"); registerIconFromText("next", nextIconText, "material"); registerIconFromText("clear", clearIconText, "material"); + registerIconFromText("search", searchIconText, "material"); } ``` @@ -960,10 +960,13 @@ const nextIconText = ""; const clearIconText = ""; + const searchIconText = + ""; useEffect(() => { - if (clearIconRef?.current) { - clearIconRef.current.registerIconFromText("clear", clearIconText, "material"); + if (searchIconRef?.current) { + searchIconRef.current.registerIconFromText("search", searchIconText, "material"); + searchIconRef.current.registerIconFromText("clear", clearIconText, "material"); } if (iconButtonPrevRef?.current) { iconButtonPrevRef.current.registerIconFromText("prev", prevIconText, "material"); @@ -975,8 +978,24 @@ useEffect(() => {
    - - + {searchText.length === 0 ? ( + + ) : ( + + )}
    @@ -1004,7 +1023,7 @@ useEffect(() => { -`Input` 内のすべてのコンポーネントをラップします。左側で検索と 削除/クリア アイコンを切り替えます (検索入力が空かどうかに基づきます)。中央に入力を配置します。更に削除アイコンがクリックされたときに `SearchText` を更新し、{ComponentName} の `ClearSearch` メソッドを呼び出して強調表示をクリアします。 +`Input` 内のすべてのコンポーネントをラップします。左側で検索と 削除/クリア アイコンを切り替えます (検索入力が空かどうかに基づきます)。中央に入力を配置します。更に削除アイコンがクリックされたときに `SearchText` を更新し、`{ComponentName}` の `ClearSearch` メソッドを呼び出してハイライト表示をクリアします。 ```html @@ -1056,7 +1075,7 @@ const prevIconText = const nextIconText = ""; const searchIconText = - ""; +""; const clearIconText = ""; @@ -1328,17 +1347,11 @@ constructor() { ```ts public nextSearch() { - const grid = document.getElementById('grid') as IgcGridComponent; - const caseSensitiveChip = document.getElementById('caseSensitiveChip') as IgcChipComponent; - const exactMatchChip = document.getElementById('exactMatchChip') as IgcChipComponent; - grid.findNext(input.value, caseSensitiveChip.selected, exactMatchChip.selected); + this.grid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected); } public prevSearch() { - const grid = document.getElementById('grid') as IgcGridComponent; - const caseSensitiveChip = document.getElementById('caseSensitiveChip') as IgcChipComponent; - const exactMatchChip = document.getElementById('exactMatchChip') as IgcChipComponent; - grid.findPrev(input.value, caseSensitiveChip.selected, exactMatchChip.selected); + this.grid.findPrev(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected); } ``` @@ -1403,6 +1416,7 @@ function nextSearch() { |制限|説明| |--- |--- | |テンプレートを使用したセル内の検索|検索機能のハイライト表示が、デフォルトのセルテンプレートに対してのみ機能する問題。カスタム セル テンプレートを含む列がある場合、ハイライト表示が機能しないため、列フォーマッタなどの代替アプローチを使用するか、`Searchable` (検索可能な) プロパティを false に設定します。| +|リモート仮想化| リモート仮想化の使用時に検索が正しく動作しません。| |セル テキストが切れる問題| セル内のテキストが長すぎるために検索テキストが省略記号によって切れている場合も、セルまでスクロールして一致カウントに含まれますが、ハイライト表示はされません。 | ## API リファレンス diff --git a/doc/jp/components/grids/_shared/display-density.md b/doc/jp/components/grids/_shared/size.md similarity index 68% rename from doc/jp/components/grids/_shared/display-density.md rename to doc/jp/components/grids/_shared/size.md index 3be3da1b3..6aade3302 100644 --- a/doc/jp/components/grids/_shared/display-density.md +++ b/doc/jp/components/grids/_shared/size.md @@ -1,86 +1,74 @@ --- -title: {Platform} {ComponentTitle} 表示密度 - {ProductName} -_description: {ComponentTitle} コンポーネントに表示密度機能を適用する方法を説明します。{ProductName} のコンパクト ビュー オプションのセットを使用できます。 -_keywords: material density, {Platform}, {ProductName}, Infragistics, マテリアル密度, インフラジスティックス +title: {Platform} {ComponentTitle} サイズ - {ProductName} +_description: {ComponentTitle} コンポーネントにサイズ機能を適用する方法を説明します。{ProductName} のコンパクト ビュー オプションのセットを使用できます。 +_keywords: material size, {Platform}, {ProductName}, Infragistics, マテリアル サイズ, インフラジスティックス mentionedTypes: [{ComponentApiMembers}] sharedComponents: ["Grid", "TreeGrid", "HierarchicalGrid"] namespace: Infragistics.Controls _language: ja --- -# {Platform} {ComponentTitle} 表示密度 +# {Platform} {ComponentTitle} サイズ -{Platform} {ComponentTitle} の {ProductName} 表示密度を使用すると、ユーザーは `{ComponentName}` 内のデータの間隔とレイアウトを制御できます。[密度](https://material.io/design/layout/applying-density.html)を変更することで、大量のコンテンツを操作するときのユーザー エクスペリエンスを大幅に向上させることができます。次の 3 つの表示密度オプションから選択できます。 -- Cozy -- Comfortable -- Compact +{ProductName} の {Platform} {ComponentTitle} サイズ機能を使用すると、ユーザーは `{ComponentName}` 内のデータの間隔とレイアウトを制御できます。`--ig-size` を変更することで、大量のコンテンツを操作するときのユーザー エクスペリエンスを大幅に向上させることができます。次の 3 つのサイズ オプションから選択できます。 +- `--ig-size-large` +- `--ig-size-medium` +- `--ig-size-small` -## {Platform} {ComponentTitle} 表示密度の例 +## {Platform} {ComponentTitle} サイズの例 -`sample="/{ComponentSample}/layout-display-density", height="620", alt="{Platform} {ComponentTitle} 表示密度の例"` +`sample="/{ComponentSample}/layout-display-density", height="620", alt="{Platform} {ComponentTitle} サイズの例"` ## 使用方法 -上記デモで示されるように、`{ComponentName}` は 3 つの密度オプション (**compact、cosy、comfortable**) を提供します。以下のコード スニペットは、`DisplayDensity` を設定する方法を示します。 +上記デモで示されるように、`{ComponentName}` は 3 つのサイズ オプション (**small**、**medium**、**large**) を提供します。以下のコード スニペットは、`--ig-size` をインラインまたは CSS クラスの一部として設定する方法を示しています。 + +```css +.gridSize { + --ig-size: var(--ig-size-medium); +} +``` ```html -<{ComponentSelector} #grid [data]="data" [displayDensity]="'cosy'" > +<{ComponentSelector} #grid class="gridSize" [data]="data"> ``` ```razor -<{ComponentSelector} DisplayDensity="DisplayDensity.Cosy" Data=northwindEmployees @ref=grid> +<{ComponentSelector} Class="gridSize" Data=northwindEmployees @ref=grid> ``` ```html -<{ComponentSelector} id="grid" display-density="cosy" > +<{ComponentSelector} id="grid" class="gridSize"> ``` ```tsx -<{ComponentSelector} id="grid" displayDensity="cosy" > +<{ComponentSelector} id="grid" className="gridSize"> ``` -または - - -```typescript -this.grid.displayDensity = 'cosy'; -``` - - -```tsx -gridRef.current.displayDensity = 'cosy'; -``` - -```razor -@code { - this.grid.DisplayDensity = DisplayDensity.Cosy; -} -``` - -各オプションを `{ComponentName}` に反映する方法を紹介します。表示密度オプション間で切り替える際に各 `{ComponentName}` 要素の高さとそのパディングが変更されます。カスタムの列 `Width` を適用する場合、左右のパディングより大きくする必要があることに注意してください。 - - **comfortable** - これはデフォルトの `{ComponentName}` 表示密度です。密度が最も低く、行の高さが `50px` です。左と右のパディングが `24px` で最小列 `Width` は `80px` です。 - - **cosy** - 中密度で、行の高さは `40px` です。左と右のパディングが `16px` で最小列 `Width` は `64px` です。 - - **compact** - これは最高密度で行の高さは `32px` です。左と右のパディングが `12px` で最小列 `Width` は `56px` です。 +各オプションを `{ComponentName}` に反映する方法を紹介します。サイズ オプション間で切り替える際に各 `{ComponentName}` 要素の高さとそのパディングが変更されます。カスタムの列 `Width` を適用する場合、左右のパディングより大きくする必要があることに注意してください。 + - **large** - これはデフォルトの `{ComponentName}` サイズです。サイズが最も低く、行の高さが `50px` です。左と右のパディングが `24px` で最小列 `Width` は `80px` です。 + - **medium** - 中サイズで、行の高さは `40px` です。左と右のパディングが `16px` で最小列 `Width` は `64px` です。 + - **small** - 強度が最も高く、行の高さは `32px` です。左と右のパディングが `12px` で最小列 `Width` は `56px` です。 > [!Note] > 現在サイズは**オーバーライドできません**。 -引き続きサンプルを使用して `DisplayDensity` の適用方法について説明します。最初に各密度を切り替えるボタンを追加します。 +引き続きサンプルを使用して、`--ig-size` の適用方法について説明します。最初に各サイズを切り替えるボタンを追加します。 ```html -
    - +
    +
    ``` @@ -94,16 +82,20 @@ gridRef.current.displayDensity = 'cosy'; Name="PropertyEditor" @ref="propertyEditor"> + Name="SizeEditor" + @ref="sizeEditor" + Label="Grid Size:" + ValueType="PropertyEditorValueType.EnumValue" + DropDownNames="@(new string[] { "Small", "Medium", "Large" })" + DropDownValues="@(new string[] { "Small", "Medium", "Large" })" + ChangedScript="WebGridSetGridSize">
    ``` ```html -
    +
    + name="SizeEditor" + id="SizeEditor" + label="Grid Size:" + value-type="EnumValue" + drop-down-names="Small, Medium, Large" + drop-down-values="Small, Medium, Large">
    @@ -128,8 +123,12 @@ gridRef.current.displayDensity = 'cosy'; isHorizontal="true" isWrappingEnabled="true"> + name="SizeEditor" + label="Grid Size:" + valueType="EnumValue" + dropDownNames={["Small", "Medium", "Large"]} + dropDownValues={["Small", "Medium", "Large"]} + changed={this.webGridSetGridSize}> ``` @@ -137,24 +136,24 @@ gridRef.current.displayDensity = 'cosy'; ```typescript @ViewChild(IgxButtonGroupComponent) public buttonGroup: IgxButtonGroupComponent; -public density = 'compact'; -public displayDensities; +public size = 'small'; +public sizes; public ngOnInit() { - this.displayDensities = [ + this.sizes = [ { - label: 'compact', - selected: this.density === 'compact', + label: 'small', + selected: this.size === 'small', togglable: true }, { - label: 'cosy', - selected: this.density === 'cosy', + label: 'medium', + selected: this.sie === 'medium', togglable: true }, { - label: 'comfortable', - selected: this.density === 'comfortable', + label: 'large', + selected: this.size === 'large', togglable: true } ]; @@ -171,16 +170,20 @@ public ngOnInit() { Name="PropertyEditor" @ref="propertyEditor"> + Name="SizeEditor" + @ref="sizeEditor" + Label="Grid Size:" + ValueType="PropertyEditorValueType.EnumValue" + DropDownNames="@(new string[] { "Small", "Medium", "Large" })" + DropDownValues="@(new string[] { "Small", "Medium", "Large" })" + ChangedScript="WebGridSetGridSize">
    ``` ```html -
    +
    + name="SizeEditor" + id="SizeEditor" + label="Grid Size:" + value-type="EnumValue" + drop-down-names="Small, Medium, Large" + drop-down-values="Small, Medium, Large">
    @@ -205,8 +211,12 @@ public ngOnInit() { isHorizontal="true" isWrappingEnabled="true"> + name="SizeEditor" + label="Grid Size:" + valueType="EnumValue" + dropDownNames={["Small", "Medium", "Large"]} + dropDownValues={["Small", "Medium", "Large"]} + changed={this.webGridSetGridSize}> ``` @@ -222,16 +232,20 @@ public ngOnInit() { Name="PropertyEditor" @ref="propertyEditor"> + Name="SizeEditor" + @ref="sizeEditor" + Label="Grid Size:" + ValueType="PropertyEditorValueType.EnumValue" + DropDownNames="@(new string[] { "Small", "Medium", "Large" })" + DropDownValues="@(new string[] { "Small", "Medium", "Large" })" + ChangedScript="WebGridSetGridSize">
    ``` ```html -
    +
    + name="SizeEditor" + id="SizeEditor" + label="Grid Size:" + value-type="EnumValue" + drop-down-names="Small, Medium, Large" + drop-down-values="Small, Medium, Large">
    @@ -256,8 +273,12 @@ public ngOnInit() { isHorizontal="true" isWrappingEnabled="true"> + name="SizeEditor" + label="Grid Size:" + valueType="EnumValue" + dropDownNames={["Small", "Medium", "Large"]} + dropDownValues={["Small", "Medium", "Large"]} + changed={this.webGridSetGridSize}> ``` @@ -267,10 +288,10 @@ public ngOnInit() { ```html -
    - +
    +
    - + @@ -328,154 +349,27 @@ public ngOnInit() { AutoGenerate="false" Data="InvoicesData" AllowFiltering="true" + Id="grid" Name="grid" @ref="grid"> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
    @@ -531,7 +425,7 @@ public ngOnInit() { ``` ```tsx - + @@ -574,10 +468,10 @@ public ngOnInit() { ```html -
    - +
    +
    - @@ -621,7 +515,7 @@ public ngOnInit() { ``` ```razor - @@ -699,7 +593,7 @@ public ngOnInit() { ``` ```tsx - + @@ -727,10 +621,10 @@ public ngOnInit() { ```html -
    - +
    +
    - + @@ -768,120 +662,36 @@ public ngOnInit() { ``` ```razor - - - - - - - - - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + - - - - - - - - - + + + + + @@ -967,16 +777,22 @@ AllowFiltering="true"> -最後に密度を適用するためのロジックを実装します。 +最後にサイズを適用するためのロジックを実装します。 ```typescript -@ViewChild('grid', { read: {ComponentName} }) -public grid: {ComponentName}; +@ViewChild('grid', { read: IgxGridComponent }) +public grid: IgxGridComponent; -public selectDensity(event) { - this.density = this.displayDensities[event.index].label; +public selectSize(event: any) { + this.size = this.sizes[event.index].label; +} + + +@HostBinding('style.--ig-size') +protected get sizeStyle() { + return `var(--ig-size-${this.size})`; } ``` @@ -985,9 +801,12 @@ public selectDensity(event) { ```ts constructor() { var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent; + var sizeEditor = this.sizeEditor = document.getElementById('SizeEditor') as IgcPropertyEditorPropertyDescriptionComponent; var grid = this.grid = document.getElementById('grid') as {ComponentName}; propertyEditor.componentRenderer = this.renderer; propertyEditor.target = this.grid; + this.webGridSetGridSize = this.webGridSetGridSize.bind(this); + sizeEditor.changed = this.webGridSetGridSize; grid.data = this.data; } @@ -1001,25 +820,24 @@ public get renderer(): ComponentRenderer { } return this._componentRenderer; } + +public webGridSetGridSize(sender: any, args: IgcPropertyEditorPropertyDescriptionChangedEventArgs): void { + var newVal = (args.newValue as string).toLowerCase(); + var grid = document.getElementById("grid"); + grid.style.setProperty('--ig-size', `var(--ig-size-${newVal})`); +} ``` ```razor @code { - private Action BindElements { get; set; } - - protected override void OnAfterRender(bool firstRender) - { - var propertyEditor = this.propertyEditor; - var displayDensityEditor = this.displayDensityEditor; - var grid = this.grid; - propertyEditor.Target = this.grid; - } - - private IgbPropertyEditorPanel propertyEditor; - private IgbPropertyEditorPropertyDescription displayDensityEditor; - private {ComponentSelector} grid; + *** In JavaScript *** + igRegisterScript("WebGridSetGridSize", (sender, evtArgs) => { + var newVal = evtArgs.newValue.toLowerCase(); + var grid = document.getElementById("grid"); + grid.style.setProperty('--ig-size', `var(--ig-size-${newVal})`); + }, false); } ``` @@ -1031,7 +849,7 @@ private propertyEditorRef(r: IgrPropertyEditorPanel) { this.propertyEditor = r; this.setState({}); } -private displayDensityEditor: IgrPropertyEditorPropertyDescription +private sizeEditor: IgrPropertyEditorPropertyDescription private grid: {ComponentName} private gridRef(r: {ComponentName}) { this.grid = r; @@ -1042,6 +860,7 @@ constructor(props: any) { super(props); this.propertyEditorRef = this.propertyEditorRef.bind(this); + this.webGridSetGridSize = this.webGridSetGridSize.bind(this); this.gridRef = this.gridRef.bind(this); } @@ -1055,32 +874,40 @@ private _componentRenderer: ComponentRenderer = null; } return this._componentRenderer; } + +public webGridSetGridSize(sender: any, args: IgrPropertyEditorPropertyDescriptionChangedEventArgs): void { + var newVal = (args.newValue as string).toLowerCase(); + var grid = document.getElementById("grid"); + grid.style.setProperty('--ig-size', `var(--ig-size-${newVal})`); +} ``` -`{ComponentName}` の行の高さを変更するその他のオプションに `RowHeight` プロパティがあります。このプロパティと `DisplayDensity` プションが `{ComponentName}` レイアウトにどのように動作に影響するかを以下で確認できます。 +`{ComponentName}` の行の高さを変更するその他のオプションに `RowHeight` プロパティがあります。このプロパティと `--ig-size` プションが `{ComponentName}` レイアウトにどのように動作に影響するかを以下で確認できます。 以下を確認してください。 - - **`RowHeight` を指定した場合**、`DisplayDensity` オプションは行の高さに影響しません。 - - `DisplayDensity` は、上記の理由により**残りすべての {ComponentTitle} 要素に影響します**。 + - **`RowHeight` を指定した場合**、`--ig-size` CSS 変数は行の高さに影響しません。 + - `--ig-size` は、上記の理由により**残りすべての {ComponentTitle} 要素に影響します**。 サンプル機能を拡張して `RowHeight` プロパティを `{ComponentName}` に追加します。 ```html - <{ComponentSelector} #grid [data]="data" [displayDensity]="density" [rowHeight]="'80px'" width="100%" - height="550px" [allowFiltering]="true"> + <{ComponentSelector} #grid class="gridSize" width="100%" height="550px" [data]="data" [rowHeight]="'80px'" [allowFiltering]="true"> ``` ```razor - <{ComponentSelector} Width="100%" Height="100%" - @ref="grid" - AutoGenerate="true" - Data="northwindEmployees" - RowHeight="rowHeight" - DisplayDensity="@density"> + <{ComponentSelector} + @ref="grid" + Id="grid" + Class="gridSize" + Width="100%" + Height="100%" + AutoGenerate="true" + Data="northwindEmployees" + RowHeight="rowHeight"> @code { @@ -1090,15 +917,13 @@ private _componentRenderer: ComponentRenderer = null; ```html - <{ComponentSelector} id="grid" display-density="cosy" row-height="80px" width="100%" - height="550px" allow-filtering="true"> + <{ComponentSelector} id="grid" class="gridSize" row-height="80px" width="100%" height="550px" allow-filtering="true"> ``` ```tsx - <{ComponentSelector} id="grid" displayDensity="cosy" rowHeight="80px" width="100%" - height="550px" allowFiltering="true"> + <{ComponentSelector} id="grid" className="gridSize" rowHeight="80px" width="100%" height="550px" allowFiltering="true"> ``` diff --git a/doc/jp/components/grids/_shared/state-persistence.md b/doc/jp/components/grids/_shared/state-persistence.md index 8b9d5f0bd..d6ccde0e3 100644 --- a/doc/jp/components/grids/_shared/state-persistence.md +++ b/doc/jp/components/grids/_shared/state-persistence.md @@ -48,18 +48,18 @@ _language: ja -* `RowIslands` +* **RowIslands** * 階層のすべての子グリッドの保存/復元機能 -* `Sorting` -* `Filtering` -* `AdvancedFiltering` -* `Paging` -* `CellSelection` -* `RowSelection` -* `ColumnSelection` -* `RowPinning` -* `Expansion` -* `Columns` +* **Sorting** +* **Filtering** +* **AdvancedFiltering** +* **Paging** +* **CellSelection** +* **RowSelection** +* **ColumnSelection** +* **RowPinning** +* **Expansion** +* **Columns** * **新規**: 複数列ヘッダーが標準でサポートされるようになりました。 * 列の順序 * `IColumnState` インターフェイスによって定義される列プロパティ。 @@ -69,16 +69,29 @@ _language: ja + * `Sorting` * `Filtering` * `CellSelection` -* `RowSelection` * `ColumnSelection` * `Expansion` * `PivotConfiguration` * `IPivotConfiguration` インターフェイスによって定義されるピボット構成プロパティ。 * ピボットのディメンションと値の関数は、アプリケーションレベルのコードを使用して復元されます。「[ピボット構成の復元](state-persistence.md#ピボット構成の復元)」セクションを参照してください。 * ピボットの行と列のストラテジもアプリケーション レベルのコードを使用して復元されます。「[ピボットのストラテジの復元](state-persistence.md#ピボットのストラテジの復元)」セクションを参照してください。 + + + +* `Sorting` +* `Filtering` +* `CellSelection` +* `ColumnSelection` +* `Expansion` +* `PivotConfiguration` + * `IPivotConfiguration` iインターフェイスによって定義されるピボット構成プロパティ。 + * ピボットのディメンションと値の関数は、アプリケーションレベルのコードを使用して復元されます。「[ピボット構成の復元](state-persistence.md#ピボット構成の復元)」セクションを参照してください。 + + @@ -122,6 +135,7 @@ const sortingFilteringStates: IGridState = state.getState(false, ['sorting', 'fi + ```html <{ComponentSelector} id="grid"> @@ -140,14 +154,18 @@ const stateString: string = gridState.getStateAsString(); // get the sorting and filtering expressions const sortingFilteringStates: IgcGridStateInfo = gridState.getState(['sorting', 'filtering']); ``` + + ```tsx - +<{ComponentSelector}> { gridState = ref; }}> - + ``` + + ```tsx // get an `IgrGridStateInfo` object, containing all features original state objects, as returned by the grid public API const state: IgrGridStateInfo = gridState.getState([]); @@ -158,6 +176,7 @@ const stateString: string = gridState.getStateAsString([]); // get the sorting and filtering expressions const sortingFilteringStates: IgrGridStateInfo = gridState.getState(['sorting', 'filtering']); ``` + ```razor <{ComponentSelector}> @@ -241,9 +260,11 @@ gridState.options = { cellSelection: false, sorting: false }; ``` + ```tsx ``` + ```razor gridState.Options = new IgbGridStateOptions @@ -253,7 +274,7 @@ gridState.Options = new IgbGridStateOptions }; ``` -これらのシンプルなシングル ポイント API を使用すると、わずか数行のコードで完全な状態維持機能を実現できます。**下からコードをコピーして貼り付けます** - ユーザーが現在のページを離れるたびに、ブラウザーの `SessionStorage` オブジェクトにグリッドの状態が保存されます。ユーザーがメイン ページに戻るときに、グリッドの状態が復元されます。必要なデータを取得するために、複雑で高度なフィルタリングやソートの式を毎回設定する必要はなくなりました。一度実行して、以下のコードでユーザーに代わって処理してください。 +これらのシンプルなシングル ポイント API を使用すると、わずか数行のコードで完全な状態維持機能を実現できます。**下からコードをコピーして貼り付けます** - ユーザーが現在のページを離れるたびに、ブラウザーの `LocalStorage` オブジェクトにグリッドの状態が保存されます。ユーザーがメイン ページに戻るときに、グリッドの状態が復元されます。必要なデータを取得するために、複雑で高度なフィルタリングやソートの式を毎回設定する必要はなくなりました。一度実行して、以下のコードでユーザーに代わって処理してください。 ```typescript @@ -316,13 +337,15 @@ public restoreGridStateString() { } ``` - + ```tsx - +<{ComponentSelector} rendered={restoreGridState}> { gridState = ref; }}> - + ``` + + ```tsx useEffect(() => { restoreGridState(); @@ -358,6 +381,8 @@ function restoreGridState() { } } ``` + + ```razor @using IgniteUI.Blazor.Controls @@ -367,12 +392,12 @@ function restoreGridState() { @inject IJSRuntime JS @inject NavigationManager Navigation - +<{ComponentSelector} Rendered="OnGridRendered"> - + @code { protected override void OnAfterRender(bool firstRender) @@ -587,7 +612,7 @@ public activeTemplate = (ctx: IgcCellTemplateContext) => { } ``` - + 2. @ViewChild または @ViewChildren デコレータを使用して、コンポーネントのテンプレート ビューをクエリします。`ColumnInit` イベント ハンドラーで、テンプレートを列の `BodyTemplate` プロパティに割り当てます。 @@ -652,14 +677,47 @@ public void OnColumnInit(IgbColumnComponentEventArgs args) ``` +```html + + + +``` + +```ts + constructor() { + var grid = document.getElementById('grid') as IgcPivotGridComponent; + grid.pivotConfiguration = this.pivotConfiguration; + grid.addEventListener("valueInit", (ev:any) => this.onValueInit(ev)); + grid.addEventListener("dimensionInit", (ev:any) => this.onDimensionInit(ev)); +} +``` + +```tsx + + + +``` + ```razor -blazor snippet + + ``` > `DimensionInit` および `ValueInit` イベントは、`PivotConfiguration` プロパティで定義された値とディメンションごとに発行されます。 * `ValueInit` イベント ハンドラーで、すべてのカスタム集計、フォーマッタ、およびスタイルを設定します。 + ```typescript public onValueInit(value: IPivotValue) { // Needed only for custom aggregators, formatter or styles. @@ -685,13 +743,116 @@ public onValueInit(value: IPivotValue) { } } ``` + -```razor -Add blazor handling for valueInit + +```ts +public onValueInit(event: any) { + const value: IgcPivotValue = event.detail; + if (value.member === 'AmountofSale') { + value.aggregate.aggregator = this.totalSale; + value.aggregateList?.forEach((aggr: any) => { + switch (aggr.key) { + case 'SUM': + aggr.aggregator = this.totalSale; + break; + case 'MIN': + aggr.aggregator = this.totalMin; + break; + case 'MAX': + aggr.aggregator = this.totalMax; + break; + } + }); + } else if (value.member === 'Value') { + value.formatter = (value: any) => value ? '$' + parseFloat(value).toFixed(3) : undefined; + value.styles.upFontValue = (rowData: any, columnKey: any): boolean => parseFloat(rowData.aggregationValues.get(columnKey.field)) > 150 + value.styles.downFontValue = (rowData: any, columnKey: any): boolean => parseFloat(rowData.aggregationValues.get(columnKey.field)) <= 150; + } +} ``` + -* `DimensionInit` イベント ハンドラーで、すべてのカスタム `MemberFunction` 実装を設定します。 +```tsx + function onValueInit(s: IgrPivotGrid, event: IgrPivotValueEventArgs) { + const value: IgrPivotValueDetail = event.detail; + if (value.member === "AmountofSale") { + value.aggregate.aggregator = totalSale; + value.aggregateList?.forEach((aggr: any) => { + switch (aggr.key) { + case "SUM": + aggr.aggregator = totalSale; + break; + case "MIN": + aggr.aggregator = totalMin; + break; + case "MAX": + aggr.aggregator = totalMax; + break; + } + }); + } else if (value.member === "Value") { + value.styles.upFontValue = (rowData: any, columnKey: any): boolean => + parseFloat(rowData.aggregationValues.get(columnKey.field)) > 150; + value.styles.downFontValue = (rowData: any, columnKey: any): boolean => + parseFloat(rowData.aggregationValues.get(columnKey.field)) <= 150; + } + } +``` + +```razor +// In Javascript +const totalSale = (members, data) => { + return data.reduce((accumulator, value) => accumulator + value.ProductUnitPrice * value.NumberOfUnits, 0); +}; + +const totalMin = (members, data) => { + let min = 0; + if (data.length === 1) { + min = data[0].ProductUnitPrice * data[0].NumberOfUnits; + } else if (data.length > 1) { + const mappedData = data.map(x => x.ProductUnitPrice * x.NumberOfUnits); + min = mappedData.reduce((a, b) => Math.min(a, b)); + } + return min; +}; +const totalMax = (members, data) => { + let max = 0; + if (data.length === 1) { + max = data[0].ProductUnitPrice * data[0].NumberOfUnits; + } else if (data.length > 1) { + const mappedData = data.map(x => x.ProductUnitPrice * x.NumberOfUnits); + max = mappedData.reduce((a, b) => Math.max(a, b)); + } + return max; +}; + +igRegisterScript("OnValueInit", (args) => { + const value = args.detail; + if (value.member === "AmountOfSale") { + value.aggregate.aggregator = totalSale; + value.aggregateList?.forEach((aggr) => { + switch (aggr.key) { + case "SUM": + aggr.aggregator = totalSale; + break; + case "MIN": + aggr.aggregator = totalMin; + break; + case "MAX": + aggr.aggregator = totalMax; + break; + } + }); + } +}, false); +``` + +* In the `DimensionInit` event handler set all custom `MemberFunction` implementations: + + + ```typescript public onDimensionInit(dim: IPivotDimension) { switch (dim.memberName) { @@ -710,10 +871,29 @@ public onDimensionInit(dim: IPivotDimension) { } } ``` + -```razor -Add blazor handling for dimensionInit + +```ts +public onDimensionInit(event: any) { + const dim: IgcPivotDimension = event.detail; + switch (dim.memberName) { + case 'AllProducts': + dim.memberFunction = () => 'All Products'; + break; + case 'ProductCategory': + dim.memberFunction = (data: any) => data.ProductName; + break; + case 'City': + dim.memberFunction = (data: any) => data.City; + break; + case 'SellerName': + dim.memberFunction = (data: any) => data.SellerName; + break; + } +} ``` + @@ -728,27 +908,64 @@ Add blazor handling for dimensionInit ``` + + +```ts +gridState.options = { cellSelection: false, sorting: false, rowIslands: true }; +``` + + + + + +```tsx + + + +``` + + + ```razor -Blazor snippet + + + + +@code { + private IgbGridState gridState; + + gridState.Options = new IgbGridStateOptions + { + CellSelection = false, + Sorting = false, + RowIslands = true + }; +} ``` + + `GetState` API は、`Selection` と `Sorting` を除くすべてのグリッド (ルート グリッドと子グリッド) 機能の状態を返します。開発者が後ですべてのグリッドの `Filtering` 状態のみを復元するには、以下を使用します。 ```typescript -this.state.setState(state, ['filtering', 'rowIslands']); +this.state.applyState(state, ['filtering', 'rowIslands']); ``` + +`GetState` API は、`Selection` と `Sorting` を除くすべてのグリッド (ルート グリッドと子グリッド) 機能の状態を返します。開発者が後ですべてのグリッドの `Filtering` 状態のみを復元するには、以下を使用します。 ```razor -setState snippet +gridState.ApplyStateFromString(gridStateString, new string[] { "filtering", "rowIslands" }); ``` + - -`sample="/{ComponentSample}/state-persistence-main", height="763", alt="{Platform} {ComponentTitle} State Persistence "` +## デモ - +`sample="/{ComponentSample}/state-persistence-main", height="763", alt="{Platform} {ComponentTitle} 状態保持"` + + ## ピボット ストラテジの復元 `GridState` は、リモート ピボット操作もカスタム ディメンション ストラテジも保持しません。 @@ -759,6 +976,7 @@ setState snippet * カスタム ソート方法およびカスタム ピボット列/行ディメンション ストラテジを設定します。 + ```html @@ -780,6 +998,42 @@ public pivotConfigHierarchy: IPivotConfiguration = { filters: [...] }; ``` + + + + + +```html + + + +``` + + +```ts +public pivotConfiguration: IgcPivotConfiguration = { + columnStrategy: IgcNoopPivotDimensionsStrategy.instance(), + rowStrategy: IgcNoopPivotDimensionsStrategy.instance(), + columns: [...], + rows: [...], + values: [...], + filters: [...] +}; +private gridState: IgcGridStateComponent; + +constructor() { + var grid = document.getElementById("grid") as IgcPivotGridComponent; + this.gridState = document.getElementById('gridState') as IgcGridStateComponent; + grid.pivotConfiguration = this.pivotConfiguration; + PivotNoopData.getData().then((value) => { + grid.data = value; + }); + this.gridState.addEventListener('stateParsed', (ev:any) => this.stateParsedHandler(ev) ); +} +``` + + ```razor Add snippet for blazor @@ -787,6 +1041,7 @@ Add snippet for blazor * `SessionStorage` から状態を復元し、カスタム ストラテジを適用します。 + ```typescript public restoreState() { const state = window.sessionStorage.getItem('grid-state'); @@ -798,12 +1053,33 @@ public restoreState() { this.state.setState(state as string); } ``` + + +```ts +public restoreGridState() { + const state = window.localStorage.getItem(this.stateKey); + if (state) { + this.gridState.applyStateFromString(state); + } +} + +public stateParsedHandler(ev: any) { + const parsedState = ev.detail; + parsedState.pivotConfiguration.rowStrategy = IgcNoopPivotDimensionsStrategy.instance(); + parsedState.pivotConfiguration.columnStrategy = IgcNoopPivotDimensionsStrategy.instance(); +} +``` + + ```razor Add snippet for blazor for restore state ``` -`sample="/{ComponentSample}/data-persistence-noop", height="580", alt="{Platform} {ComponentTitle} data persistence noop"` + +`sample="/{ComponentSample}/data-persistence-noop", height="580", alt="{Platform} {ComponentTitle} データ保持 NO-OP"` + + @@ -811,12 +1087,12 @@ Add snippet for blazor for restore state -* パラメーターなしで `SetState` API を使用してすべてのグリッド機能を一度に復元する場合、ルート グリッドの列プロパティがデフォルトにリセットされる場合があります。その場合は、後で列または列の選択機能を復元してください。 +* パラメーターなしで `applyState` API を使用してすべてのグリッド機能を一度に復元する場合、ルート グリッドの列プロパティがデフォルトにリセットされる場合があります。その場合は、後で列または列の選択機能を復元してください。 ```typescript -state.setState(gridState); -state.setState(gridState.columns); -state.setState(gridState.columnSelection); +state.applyState(gridState); +state.applyState(gridState.columns); +state.applyState(gridState.columnSelection); ``` @@ -834,17 +1110,15 @@ state.setState(gridState.columnSelection); - * `GetState` メソッドは、JSON.stringify() メソッドを使用して、元のオブジェクトを JSON 文字列に変換します。JSON.stringify() は関数をサポートされていないため、`GridState` ディレクティブはピボット ディメンション `MemberFunction`、ピボット値 `Member`、`Formatter`、カスタム `Aggregate` 関数、`Styles`、およびピボット構成戦略 (`ColumnStrategy` および `RowStrategy`) を無視します。 - -## その他のリソース +## その他のリソース * [ページング](paging.md) * [フィルタリング](filtering.md) * [ソート](sorting.md) @@ -857,6 +1131,7 @@ state.setState(gridState.columnSelection); - - + +* [ピボット グリッドのリモート操作](remote-operations.md) + \ No newline at end of file diff --git a/doc/jp/components/grids/_shared/summaries.md b/doc/jp/components/grids/_shared/summaries.md index 635911614..124a8aa0d 100644 --- a/doc/jp/components/grids/_shared/summaries.md +++ b/doc/jp/components/grids/_shared/summaries.md @@ -998,7 +998,7 @@ igRegisterScript("SummaryTemplate", (ctx) => { }, false); ``` -デフォルトの集計が定義されている場合、集計領域の高さは、集計の数が最も多い列とグリッドの表示密度に応じてデザインにより計算されます。`SummaryRowHeight` 入力プロパティを使用して、デフォルト値をオーバーライドします。引数として数値が必要であり、falsy の値を設定すると、グリッド フッターのデフォルトのサイズ設定動作がトリガーされます。 +デフォルトの集計が定義されている場合、集計領域の高さは、集計の数が最も多い列とグリッドの `--ig-size` に応じてデザインにより計算されます。`SummaryRowHeight` 入力プロパティを使用して、デフォルト値をオーバーライドします。引数として数値が必要であり、falsy の値を設定すると、グリッド フッターのデフォルトのサイズ設定動作がトリガーされます。 diff --git a/doc/jp/components/grids/data-grid.md b/doc/jp/components/grids/data-grid.md index ff682b633..33f96b29d 100644 --- a/doc/jp/components/grids/data-grid.md +++ b/doc/jp/components/grids/data-grid.md @@ -1505,11 +1505,11 @@ public class EmployeesNestedData : List
    - + - + @@ -2034,7 +2034,7 @@ platformBrowserDynamic() |グリッドの `width` が列幅に依存しない | すべての列の `width` でグリッド自体のスパンは決定しません。親コンテナーのディメンションまたは定義したグリッドの `width` で決定されます。| |親コンテナーでネストされた Grid | グリッドの `width` を設定せずに定義済みのディメンションで親コンテナーに配置した場合、グリッドがコンテナーに合わせてスパンします。| |グリッドの `OnPush` ChangeDetectionStrategy | `ChangeDetectionStrategy.OnPush` を処理し、カスタム表示されたときにグリッドに発生した変更について通知します。| -| 列には設定可能な最小幅があります。`displayDensity` オプションに基づき、
    "compact": 56px
    "cosy": 64px
    "comfortable": 80px があります。 | 許容される最小幅未満に設定した場合、描画される要素に影響はありません。`displayDensity` に対応する許容される最小幅で描画します。水平方向の仮想化は予期しない動作を招く場合があるためサポートしていません。 +| 列には設定可能な最小幅があります。`--ig-size` CSS 変数に基づき、
    "small": 56px
    "medium": 64px
    "large": 80px があります。 | 許容される最小幅未満に設定した場合、描画される要素に影響はありません。`--ig-size` に対応する許容される最小幅で描画します。水平方向の仮想化は予期しない動作を招く場合があるためサポートしていません。 | ビューに描画されていないセル高さは行の高さに影響しません。 | 仮想化のため、セルの高さを変更するビューにないカスタム テンプレートの列は行の高さに影響しません。関連する列がビューにスクロールされるときのみ行の高さに影響します。 ## API リファレンス diff --git a/doc/jp/components/grids/grid/icons.md b/doc/jp/components/grids/grid/icons.md new file mode 100644 index 000000000..32d2fda69 --- /dev/null +++ b/doc/jp/components/grids/grid/icons.md @@ -0,0 +1,246 @@ +--- +title: {Platform} {ComponentTitle} アイコンのカスタマイズ - インフラジスティックス +_description: {Platform} Grid のカスタム アイコンを構成します。 +_keywords: icons, custom icons, igniteui for {Platform}, {ComponentKeywords}, {ProductName}, Infragistics, アイコン, カスタム アイコン, インフラジスティックス +mentionedTypes: ['Infragistics.Controls.Grid'] +_language: ja +--- + +# {Platform} Grid アイコンのカスタマイズ + +{ProductName} `Grid` アイコンは、公開されている API メソッドを使用して、別のコレクション セットのカスタム アイコンを使用するようにカスタマイズできます。 + +- `registerIconFromText` +- `registerIcon` +- `setIconRef` + +アイコンを登録すると、アイコンがローカルにキャッシュされるため、名前とコレクション名でそのアイコンを参照するコンポーネント間で再利用できます。参照を設定すると、名前でアイコンを参照するときに、どのコレクションのどのアイコンが使用されるかが変更されます。 + + + +```ts +// Add a new 'material' icon called 'filter_list' from string +registerIconFromText("filter_list", '...', "material"); + +// Add a new 'material' icon called 'my-filter_list' from svg url +registerIcon("filter_list", "url" , "material") + +// Sets the icon reference to the new registered icon. +setIconRef('filter_list', 'default', { + name: 'filter_list', + collection: 'material', +}); + +``` + + + + + +```ts +// Add a new 'material' icon called 'filter_list' from string +registerIconFromText("filter_list", '...', "material"); + +// Add a new 'material' icon called 'my-filter_list' from svg url +registerIcon("filter_list", "url" , "material") + +// Sets the icon reference to the new registered icon. +setIconRef('filter_list', 'default', { + name: 'filter_list', + collection: 'material', +}); +``` + + + + +```razor +@code { + private IgbIcon icon; + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (this.icon != null && firstRender) + { + this.icon.EnsureReady().ContinueWith(new Action((e) => + { + // Add a new 'material' icon called 'filter_list' from string + this.icon.RegisterIconFromText("filter_list", '...', "material"); + + // Add a new 'material' icon called 'filter_list' from svg url + this.icon.RegisterIcon("filter_list", "url" , "material") + + // Sets the icon reference to the new registered icon. + this.icon.SetIconRef("filter_list", "default", new IgbIconMeta() + { + Name = "filter_list", + Collection = "material", + }); + })); + } + } +} + +``` + + + +## {Platform} アイコンのカスタマイズの例 + +以下のサンプルは、元の Material アイコンからカスタム Font Awesome SVG アイコンに切り替えて、再び Material に戻す方法を示しています。 + +`sample="/{GridSample}/change-icons-custom", height="600", alt="{Platform} {ComponentTitle} アイコンのカスタマイズの例"` + +## 内部アイコン + +以下にすべての内部アイコンをリストします。エイリアスは、アイコンを参照できる名前です。ターゲット アイコンは内部アイコン名であり、ターゲット コレクションはアイコンが内部的に登録されているコレクションです。 + +| エイリアス | ターゲット アイコン | ターゲット コレクション | +|----------------------------------|-----------------------|---------------| +| **add** | add | material | +| **add_child** | add-child | imx-icons | +| **add_row** | add-row | imx-icons | +| **arrow_back** | arrow_back | material | +| **arrow_drop_down** | arrow_drop_up | material | +| **arrow_forward** | arrow_forward | material | +| **arrow_next** | chevron_right | material | +| **arrow_prev** | chevron_left | material | +| **case_sensitive** | case-sensitive | imx-icons | +| **carousel_next** | arrow_forward | material | +| **carousel_prev** | arrow_back | material | +| **chevron_left** | chevron_left | material | +| **chevron_right** | chevron_right | material | +| **clock** | access_time | material | +| **close** | close | material | +| **collapse** | expand_less | material | +| **confirm** | check | material | +| **date_range** | date_range | material | +| **delete** | delete | material | +| **drag_indicator** | drag_indicator | material | +| **edit** | edit | material | +| **error** | error | material | +| **expand** | expand_more | material | +| **expand_more** | expand_more | material | +| **file_download** | file_download | material | +| **filter_all** | select-all | imx-icons | +| **filter_before** | is-before | imx-icons | +| **filter_contains** | contains | imx-icons | +| **filter_does_not_contain** | does-not-contain | imx-icons | +| **filter_empty** | is-empty | imx-icons | +| **filter_equal** | equals | imx-icons | +| **filter_false** | is-false | imx-icons | +| **filter_greater_than** | greater-than | imx-icons | +| **filter_greater_than_or_equal** | greater-than-or-equal | imx-icons | +| **filter_in** | is-in | imx-icons | +| **filter_last_month** | last-month | imx-icons | +| **filter_last_year** | last-year | imx-icons | +| **filter_less_than** | less-than | imx-icons | +| **filter_less_than_or_equal** | less-than-or-equal | imx-icons | +| **filter_next_month** | next-month | imx-icons | +| **filter_next_year** | next-year | imx-icons | +| **filter_not_empty** | not-empty | imx-icons | +| **filter_not_equal** | not-equal | imx-icons | +| **filter_not_null** | is-not-null | imx-icons | +| **filter_null** | is-null | imx-icons | +| **filter_starts_with** | starts-with | imx-icons | +| **filter_this_month** | this-month | imx-icons | +| **filter_this_year** | this-year | imx-icons | +| **filter_today** | today | imx-icons | +| **filter_true** | is-true | imx-icons | +| **filter_yesterday** | yesterday | imx-icons | +| **first_page** | first_page | material | +| **group_work** | group_work | material | +| **hide** | visibility_off | material | +| **import_export** | import_export | material | +| **input_collapse** | arrow_drop_up | material | +| **input_clear** | clear | material | +| **input_expand** | arrow_drop_down | material | +| **jump_down** | jump-down | imx-icons | +| **jump_up** | jump-up | imx-icons | +| **last_page** | last_page | material | +| **more_vert** | more_vert | material | +| **next** | navigate_next | material | +| **pin** | pin-left | imx-icons | +| **prev** | navigate_before | material | +| **refresh** | refresh | material | +| **remove** | cancel | material | +| **search** | search | material | +| **selected** | done | material | +| **show** | visibility | material | +| **sort_asc** | arrow_upward | material | +| **sort_desc** | arrow_downward | material | +| **functions** | functions | material | +| **table_rows** | table_rows | material | +| **today** | calendar_today | material | +| **tree_collapse** | expand_more | material | +| **tree_expand** | chevron_right | material | +| **unfold_less** | unfold_less | material | +| **unfold_more** | unfold_more | material | +| **unpin** | unpin-left | imx-icons | +| **view_column** | view_column | material | + +コンポーネントで使用されるすべてのアイコンの内訳は以下のとおりです。 + +#### Grid (グリッド) +| アイコン | 説明 | +| -------------------- | ------------------------------------------------------------------------------ | +| **add** | フィルター エントリを追加するために Excel フィルター メニューで使用されます。 | +| **arrow_back** | 列を後方に移動するためにさまざまな UI 要素で使用されます。 | +| **arrow_drop_down** | トグル可能なメニューを示すためにさまざまなボタンで使用されます。 | +| **arrow_forward** | 列を前方に移動するためにさまざまな UI 要素で使用されます。 | +| **cancel** | 操作をキャンセルするためにさまざまな UI 要素で使用されます。 | +| **chevron_right** | Excel スタイルのフィルタリングのように、展開可能なメニューを示すために使用されます。 | +| **close** | 展開されたメニューを閉じるときに使用します。 | +| **confirm** | 操作を確認するときに使用されます。 | +| **drag_indicator** | 項目をドラッグできることを示すハンドルを表示するために使用されます。 | +| **error** | 編集可能なセルで、誤ったデータ入力を示すために使用されます。 | +| **expand_more** | Excel フィルタリング メニューで使用され、フィルターの追加を示します。 | +| **file_dowload** | Excel フィルター エクスポーターによって使用されます。 | +| **filter_*** | さまざまなフィルタリング オペランドに使用されます。 | +| **group_work** | グループ化ドロップ領域で使用されます。 | +| **hide** | さまざまな UI 要素によって列を非表示にするために使用されます。 | +| **import_export** | ピボット データ セレクターが移動する際に使用されます。 | +| **input_clear** | 入力フィールドで入力データをクリアするために使用されます。 | +| **next** | フィルタリング行メニューでチップ間を移動するために使用されます。 | +| **pin** | 列のピン固定のためにさまざまな UI 要素によって使用されます。 | +| **prev** | フィルタリング行メニューでチップ間を移動するために使用されます。 | +| **remove** | さまざまな UI 要素によって削除インジケーターとして使用されます。 | +| **refresh** | フィルター行メニューでフィルターを再読み込みするために使用されます。 | +| **selected** | アクティブな選択を示すためにさまざまな UI 要素によって使用されます。 | +| **show** | 列を表示するためにさまざまな UI 要素によって使用されます。 | +| **sort_asc** | ソート方向を示すためにさまざまな UI 要素によって使用されます。 | +| **sort_desc** | ソート方向を示すためにさまざまな UI 要素によって使用されます。 | +| **functions** | ピボット グリッドとデータ セレクターによって使用されます。 | +| **table_rows** | ピボット グリッド データ セレクターによって使用されます。 | +| **tree_collapse** | ツリーのような構造で、表示する情報を少なくするために使用されます。 | +| **tree_expand** | ツリーのような構造で、詳細を表示するために使用します。 | +| **unpin** | 列のピン固定のためにさまざまな UI 要素によって使用されます。 | +| **unfold_less** | 階層グリッドですべての行を縮小するために使用されます。 | +| **unfold_more** | 階層グリッドですべての行を展開するために使用されます。 | +| **view_column** | ピボット データ セレクターによって使用されます。 | + +#### Paginator (ページネーター) +| アイコン | 説明 | +| -------------- | ------------------------------------------------------------ | +| **first_page** | 最初のページに移動するためのボタンで使用されます。 | +| **last_page** | 最後のページに移動するためのボタンで使用されます。 | +| **prev** | 前のページに移動するためのボタンで使用されます。 | +| **next** | 次のページに移動するためのボタンで使用されます。 | + +#### Action Strip (アクション ストリップ) + +| アイコン | 説明 | +| ------------- | ------------------------ | +| **add_child** | ポップアップ メニューで使用されます。 | +| **add_row** | ポップアップ メニューで使用されます。 | +| **more_vert** | ポップアップ メニューで使用されます。 | + +## API リファレンス +* `Grid` + +## その他のリソース + +コミュニティに参加して新しいアイデアをご提案ください。 + +* [{ProductName} **フォーラム (英語)**]({ForumsLink}) +* [{ProductName} **GitHub (英語)**]({GithubLink}) \ No newline at end of file diff --git a/doc/jp/components/grids/grids-header.md b/doc/jp/components/grids/grids-header.md index 761d46053..5e3533cd7 100644 --- a/doc/jp/components/grids/grids-header.md +++ b/doc/jp/components/grids/grids-header.md @@ -251,7 +251,7 @@ h3#excel-library-for-the-angular-grid ~ h3{ -
  • 行の高さとサイズ変更を調整する[**表示密度**](grid/display-density.md)
    • +
  • 行の高さとサイズ変更を調整する[**サイズ**](grid/size.md)
    • @@ -474,7 +474,7 @@ Infragistics の {Platform} 製品の受賞歴のあるサポートにアクセ
  • インタラクティブな [Outlook スタイルのようなグループ化](grid/groupby.md)
  • グリッド セルまたは列のデータに基づいた[列集計](grid/summaries.md)
    • -
  • 行の高さとサイズ変更を調整する[表示密度](grid/display-density.md)
    • +
  • 行の高さとサイズ変更を調整する[サイズ](grid/size.md)
    • diff --git a/doc/jp/components/grids/hierarchical-grid/overview.md b/doc/jp/components/grids/hierarchical-grid/overview.md index 1ba27b97b..4ff0dc659 100644 --- a/doc/jp/components/grids/hierarchical-grid/overview.md +++ b/doc/jp/components/grids/hierarchical-grid/overview.md @@ -30,7 +30,7 @@ IgniteUI.Blazor パッケージの追加については、以下のトピック - [作業の開始](../../general-getting-started-blazor-client.md) - [NuGet パッケージの追加](../../general-nuget-feed.md) -また、 階層グリッドに必要なスタイルを提供するために、アプリケーションの index.html ファイルに次の CSS リンクを含める必要があります: +また、階層グリッドに必要なスタイルを提供するために、アプリケーションの index.html ファイルに次の CSS リンクを含める必要があります: ```razor diff --git a/doc/jp/components/grids/pivot-grid/features.md b/doc/jp/components/grids/pivot-grid/features.md index 0e17b3bfa..4244979cc 100644 --- a/doc/jp/components/grids/pivot-grid/features.md +++ b/doc/jp/components/grids/pivot-grid/features.md @@ -101,6 +101,17 @@ public pivotConfigHierarchy: IPivotConfiguration = { ``` + + + +```tsx +const dimension: IgrPivotDimension = new IgrPivotDimension(); +dimension.memberName = "SellerName"; +dimension.enabled = true; +dimension.sortDirection = SortingDirection.Asc; +``` + + ## ディメンションのサイズ変更 行のサイズは、列のサイズ変更と同様に、セルの右端にあるサイズ変更インジケーターを介してサイズ変更できます。 @@ -135,6 +146,18 @@ public pivotConfigHierarchy: IPivotConfiguration = { ``` + + + + +```tsx +const dimension: IgrPivotDimension = new IgrPivotDimension(); +dimension.memberName = "SellerName"; +dimension.enabled = true; +dimension.width = "400px"; +``` + + ## ディメンションの選択 {PivotGridTitle} は、ベース グリッドと同じように有効になる単一選択をサポートします。例: @@ -162,10 +185,17 @@ public pivotConfigHierarchy: IPivotConfiguration = { ``` + +```tsx + + +``` + + 複数の行 / 列にまたがるグループを作成する複数の行または列のディメンションがある場合、選択は、選択されたグループに属するすべてのセルに適用されます。 ## スーパー コンパクト モード -`PivotGrid` コンポーネントは、`SuperCompactMode` 入力を提供します。一度にたくさんのセルが画面に表示させる必要がある場合に適しています。有効にすると、このオプションは {PivotGridTitle} の `DisplayDensity` オプションを無視します。`SuperCompactMode` を有効にすると、`SuperCompactMode` オプションがない子コンポーネント (`Chip` など) ごとに `DisplayDensity` 入力が `Compact` (コンパクト) に設定されます。 +`PivotGrid` コンポーネントは、`SuperCompactMode` 入力を提供します。一度にたくさんのセルが画面に表示させる必要がある場合に適しています。有効にすると、このオプションは {PivotGridTitle} の `--ig-size` CSS 変数を無視します。`SuperCompactMode` を有効にすると、`SuperCompactMode` オプションがない子コンポーネント (`Chip` など) ごとに `--ig-size` が `small` に設定されます。 ```html <{PivotGridSelector} [superCompactMode]="true"> @@ -182,6 +212,13 @@ public pivotConfigHierarchy: IPivotConfiguration = { <{PivotGridSelector} SuperCompactMode=true> ``` + +```tsx + + +``` + + ## 追加の集計列 `column` ディメンションが階層を定義すると、{PivotGridTitle} は追加の集計 / 合計列を描画し、グループ内のすべての列の集計を蓄積します。グループが縮小されている場合、集計列のみが残ります。また、グループを展開すると、グループの最後に追加の集計列が表示されます。 diff --git a/doc/jp/components/grids/pivot-grid/overview.md b/doc/jp/components/grids/pivot-grid/overview.md index 90dad4258..01ba80bf5 100644 --- a/doc/jp/components/grids/pivot-grid/overview.md +++ b/doc/jp/components/grids/pivot-grid/overview.md @@ -16,13 +16,14 @@ _language: ja {Platform} {PivotGridName} は、ピボット テーブルにデータを表示し、提供されたデータ セットで複雑な分析を実行するのに役立ちます。この洗練されたピボット グリッド コントロールは、後でクロス集計形式で表示される大量のデータを整理、集計、およびフィルタリングするために使用されます。{Platform} ピボット グリッドの主な機能は、行のディメンション、列のディメンション、集計、およびフィルターです。 -`PivotGrid` を使用すると、ユーザーはデータを多次元のピボット テーブル構造で構成および表示できます。行と列は個別のデータ グループを表し、データ セルの値は集計を表します。これにより、単純なフラット データセットに基づく複雑なデータ分析が可能になります。`PivotGrid` は機能豊富なピボット テーブルで、さまざまなディメンションと値を簡単に構成できるだけでなく、フィルタリングやソートなどの追加のデータ操作も提供します。 +`PivotGrid` を使用すると、ユーザーはデータを多次元のピボット テーブル構造で構成および表示できます。 +行と列は個別のデータ グループを表し、データ セルの値は集計を表します。これにより、単純なフラット データセットに基づく複雑なデータ分析が可能になります。`PivotGrid` は機能豊富なピボット テーブルで、さまざまなディメンションと値を簡単に構成できるだけでなく、フィルタリングやソートなどの追加のデータ操作も提供します。 ## {Platform} ピボット グリッドの例 以下は、{Platform} ピボット データ セレクター コンポーネントと組み合わせた {Platform} ピボット グリッドの例です。このようにして、より柔軟なランタイム構成オプションを使用できます。 -`sample="/{PivotGridSample}/data-selector", height="750", alt="{Platform} ピボット セレクターを使用したピボット グリッドの例"` +`sample="/{PivotGridSample}/data-selector", height="700", alt="{Platform} ピボット セレクターを使用したピボット グリッドの例"` @@ -49,6 +50,13 @@ _language: ja ``` + +```tsx + + +``` + + これは、**rows** (行)、**columns** (列)、**values** (値) の 3 つの主要なディメンションによって定義されます。**rows** と **columns** は、グリッドの行と列に表示されるグループ化された構造を定義します。**values** は、グループの関連する値を計算および表示するために使用される集計フィールドと集計を**定義します。 フィルターは、**filters** 構成プロパティを介して定義することもできます。ディメンションまたは値として追加したくないが、UI を介して関連するメンバー値をフィルタリングしたいフィールドに使用できます。 @@ -56,15 +64,28 @@ _language: ja ### ディメンション構成 各基本ディメンション構成には、提供された**データ**のフィールドに一致する `MemberName` が必要です。 - -または、複雑なオブジェクトやその他のカスタム シナリオの場合にレコードから値を抽出する `MemberFunction`。 - + 複数の兄弟ディメンションを定義できます。これにより、関連する行または列のディメンション領域に、より複雑なネストされたグループが作成されます。 ディメンションは、ドラッグアンドドロップを使用して、対応するチップを介して、ある領域から別の領域に並べ替えたり移動したりできます。 ディメンションは、`ChildLevel` プロパティを介して拡張可能な階層を記述することもできます。例えば: + + + + +```tsx +const childDimension = new IgrPivotDimension(); +childDimension.memberName = "ProductCategory"; +const dimension: IgrPivotDimension = new IgrPivotDimension(); +dimension.memberName = "AllProducts"; +dimension.enabled = true; +dimension.childLevel = childDimension; +``` + + + ```typescript { memberFunction: () => 'All', @@ -77,7 +98,9 @@ _language: ja } } ``` + + ```razor @code { var pivotConfiguration = new IgbPivotConfiguration(); @@ -90,6 +113,8 @@ _language: ja }); } ``` + + この場合、ディメンションはグリッドの関連セクション (行または列) にエキスパンダーを描画し、階層の一部として子を展開または縮小ことができます。デフォルトでは、行のディメンションは最初に展開されます。この動作は、ピボット グリッドの `DefaultExpandState` プロパティで制御できます。 ### 事前定義されたディメンション @@ -105,6 +130,22 @@ _language: ja 次のように、行または列に設定できます: + +```ts +const pivotConfiguration = new IgrPivotConfiguration(); + +const dateDimension = new IgrPivotDateDimension(); +dateDimension.memberName = "Date"; +dateDimension.enabled = true; +const baseDimension = new IgrPivotDimension(); +baseDimension.memberName = "Date"; +baseDimension.enabled = true; + +dateDimension.baseDimension = baseDimension; +pivotConfiguration1.columns = [dateDimension]; +``` + + ```typescript public pivotConfigHierarchy: IPivotConfiguration = { @@ -151,6 +192,18 @@ public pivotConfigHierarchy: IgcPivotConfiguration = { ``` + + +```tsx +const options: IgrPivotDateDimensionOptions = {} as IgrPivotDateDimensionOptions; +options.years = true; +options.months = false; +options.quarters = true; +options.fullDate = false; +dateDimension.options = options; +``` + + ```typescript new IgcPivotDateDimension({ memberName: 'Date', enabled: true }, { @@ -198,6 +251,23 @@ public pivotConfigHierarchy: IgcPivotConfiguration = { 現在の集計関数は、バリューチップのドロップダウンを使用して実行時に変更できます。デフォルトでは、フィールドのデータ型に基づいて使用可能な集計のリストが表示されます。集計のカスタム リストは、`AggregateList` プロパティを介して設定することもできます。例えば: + +```typescript +const pivotConfiguration = new IgrPivotConfiguration(); +const value = new IgrPivotValue(); +value.member = "AmountofSale"; +value.displayName = "Amount of Sale"; +value.enabled = true; +const aggregator = new IgrPivotAggregator(); +aggregator.key = "SUM"; +aggregator.label = "Sum of Sale"; +aggregator.aggregatorName = PivotAggregationType.SUM; +value.aggregate = aggregator; +pivotConfiguration.values = [value]; +value.aggregateList = [aggregator]; +``` + + ```typescript public pivotConfigHierarchy: IPivotConfiguration = { @@ -249,20 +319,20 @@ public pivotConfigHierarchy: IgcPivotConfiguration = { displayName: 'Amount of Sale', aggregate: { key: 'SUM', - aggregator: IgxTotalSaleAggregate.totalSale, + aggregator: IgcTotalSaleAggregate.totalSale, label: 'Sum of Sale' }, aggregateList: [{ key: 'SUM', - aggregator: IgxTotalSaleAggregate.totalSale, + aggregator: IgcTotalSaleAggregate.totalSale, label: 'Sum of Sale' }, { key: 'MIN', - aggregator: IgxTotalSaleAggregate.totalMin, + aggregator: IgcTotalSaleAggregate.totalMin, label: 'Minimum of Sale' }, { key: 'MAX', - aggregator: IgxTotalSaleAggregate.totalMax, + aggregator: IgcTotalSaleAggregate.totalMax, label: 'Maximum of Sale' }] } @@ -310,6 +380,50 @@ public static totalMax: PivotAggregation = (members, data: any) => { 基本的なピボット構成を見てみましょう: + + +```tsx +const pivotConfiguration1: IgrPivotConfiguration = new IgrPivotConfiguration(); + +const igrPivotDateDimension1 = new IgrPivotDimension(); +igrPivotDateDimension1.memberName = "Date"; +igrPivotDateDimension1.enabled = true; + +pivotConfiguration1.columns = [igrPivotDateDimension1]; +const igrPivotDimension2: IgrPivotDimension = new IgrPivotDimension(); +igrPivotDimension2.memberName = "ProductName"; +igrPivotDimension2.enabled = true; + +const igrPivotDimension3: IgrPivotDimension = new IgrPivotDimension(); +igrPivotDimension3.memberName = "SellerCity"; +igrPivotDimension3.enabled = true; + +pivotConfiguration1.rows = [igrPivotDimension2,igrPivotDimension3]; +const igrPivotDimension4: IgrPivotDimension = new IgrPivotDimension(); +igrPivotDimension4.memberName = "SellerName"; +igrPivotDimension4.enabled = true; + +pivotConfiguration1.filters = [igrPivotDimension4]; +const igrPivotValue1: IgrPivotValue = new IgrPivotValue(); +igrPivotValue1.member = "ProductUnitPrice"; +igrPivotValue1.displayName = "Amount of Sale"; +igrPivotValue1.dataType = GridColumnDataType.Currency; +igrPivotValue1.enabled = true; +const igrPivotAggregator1: IgrPivotAggregator = new IgrPivotAggregator(); +igrPivotAggregator1.key = "SUM"; +igrPivotAggregator1.label = "Sum of Sale"; +igrPivotAggregator1.aggregatorName = PivotAggregationType.SUM; + +igrPivotValue1.aggregate = igrPivotAggregator1; +const igrPivotAggregator2: IgrPivotAggregator = new IgrPivotAggregator(); +igrPivotAggregator2.key = "SUM"; +igrPivotAggregator2.label = "Sum of Sale"; +igrPivotAggregator2.aggregatorName = PivotAggregationType.SUM; +pivotConfiguration1.values = [igrPivotValue1]; +``` + + + ```typescript public pivotConfigHierarchy: IPivotConfiguration = { @@ -476,10 +590,10 @@ public PivotDataFlat() * `PivotDateDimension` * `Column` - -* [{Platform} ピボット グリッドの機能](features.md) -* [{Platform} ピボット グリッド カスタム集計](remote-operations.md) --> + + ## その他のリソース diff --git a/doc/jp/components/inputs/form.md b/doc/jp/components/inputs/form.md deleted file mode 100644 index 90d6682b6..000000000 --- a/doc/jp/components/inputs/form.md +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: {Platform} Form コンポーネント | {ProductName} -_description: {Platform} Form コンポーネントを使用すると、次のアプリの新しい連絡フォームまたは登録ページをすばやく簡単に作成できます。詳細については、こちらをご覧ください。 -_keywords: {Platform} form, {ProductName}, Infragistics, {Platform} フォーム, インフラジスティックス -mentionedTypes: ['Form', 'Checkbox', 'Input', 'Radio', 'Switch'] -_language: ja ---- - -# {Platform} (フォーム) の概要 - -{Platform} の Form コンポーネントは、アプリケーションの要件に適合するお問い合わせフォームや登録ページを設定するために使用されます。{Platform} フォーム検証を簡単に提供し、フォームの向きを定義し、必要なレイアウトを構成またはカスタマイズすることもできます。{Platform} フォーム コンポーネントは、ユーザー アクションに応答する機会を与えるイベントも公開します。 - -## {Platform} の例 - -次の例は、内部にいくつかの入力、ボタン、およびチェックボックスがある `Form` を表しています。 - -`sample="/inputs/form/overview", height="300", alt="{Platform} Form の例"` - -## 使用方法 - - -まず、次のコマンドを実行して {ProductName} をインストールする必要があります。 - -```cmd -npm install {PackageWebComponents} -``` - -`Form` を使用する前に、次のように登録する必要があります: - -```ts -import {defineComponents, IgcFormComponent, IgcInputComponent, IgcCheckboxComponent, IgcButtonComponent } from 'igniteui-webcomponents'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; - -defineComponents(IgcFormComponent, IgcInputComponent, IgcCheckboxComponent, IgcButtonComponent); -``` - -{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。 - - - - -まず、次のコマンドを実行して、対応する {ProductName} npm パッケージをインストールする必要があります: - -```cmd -npm install igniteui-react -``` - -次に、以下のように、`Form` とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります: - -```tsx -import { IgrFormModule, IgrForm } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; -IgrFormModule.register(); -``` - - - -`Form` を使用する前に、次のように登録する必要があります。 - - -```razor -// in Program.cs file - -builder.Services.AddIgniteUIBlazor(typeof(IgbFormModule)); -``` - -また、追加の CSS ファイルをリンクして、スタイルを `Form` コンポーネントに適用する必要があります。以下は、**Blazor Web Assembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: - -```razor - -``` - - -`Form` の使用を開始する最も簡単な方法は次のとおりです: - -`sample="/inputs/form/overview", height="300", alt="{Platform} Form の例"` - - - -フォーム データは、次のコンポーネントについて収集されます: -- `Checkbox` -- `Input` -- `Radio` -- `Switch` - -フォーム コントロールが無効な場合、フォームは送信されず、エラー メッセージが表示されます。フォームの送信時にフォーム要素を検証しないように指定する場合は、`novalidate` 属性を `Form` 要素に追加できます。 - -```tsx - -``` - -```html - - - -``` - -```razor - -``` - -### イベント - -Form コンポーネントは、次のイベントを発生させます: -- Submit - フォームが送信されたときに発生します。 -- Reset - フォームがリセットされたときに発生します。 - -`Submit` イベントのイベント リスナーを追加する方法を示す例を次に示します: - -```ts -document.addEventListener('igcSubmit', function (event) { - const customEvent = event as CustomEvent; - console.log(customEvent.detail); -}); -``` - -### メソッド - -Form コンポーネントは、次のメソッドを公開します: - -| メソッド | 説明 | -| ------------- |:-------------: | -| `Submit` |フォーム データを送信します。| -| `Reset` | フォーム データをリセットします。| -| `GetFormData` | フォーム データを収集し、単一の FormData オブジェクトを返します。| -| `ReportValidity` | 要素の子コントロールが検証制約を満たしているかどうかを返します。| - -
    - - -## API リファレンス - - - `Button` - - `Checkbox` - - `Form` - - `Input` - - `Radio` - - `Submit` - - -## その他のリソース - -* [{ProductName} **フォーラム (英語)**]({ForumsLink}) -* [{ProductName} **GitHub (英語)**]({GithubLink}) \ No newline at end of file diff --git a/doc/jp/components/inputs/slider.md b/doc/jp/components/inputs/slider.md index c8d6a5e2b..471193529 100644 --- a/doc/jp/components/inputs/slider.md +++ b/doc/jp/components/inputs/slider.md @@ -181,7 +181,7 @@ builder.Services.AddIgniteUIBlazor( 次のサンプルは、トラックの塗りつぶしとつまみのパーツのスタイルを設定する方法を示しています。 -`sample="/inputs/slider/styling", height="120", alt="{Platform} Slider スタイル設定の例"` +`sample="/inputs/slider/styling", height="250", alt="{Platform} Slider スタイル設定の例"` diff --git a/doc/jp/components/interactivity/accessibility-compliance.md b/doc/jp/components/interactivity/accessibility-compliance.md new file mode 100644 index 000000000..e28219188 --- /dev/null +++ b/doc/jp/components/interactivity/accessibility-compliance.md @@ -0,0 +1,192 @@ +--- +title: Ignite UI for {Platform} アクセシビリティの遵守 | Ignite UI for {Platform} | インフラジスティックス +_description: Ignite UI for {Platform} のアクセシビリティ準拠 - 第 508 条の遵守、WCAG および ARIA。 +_keywords: accessibility, {Platform}, ignite ui for {Platform}, infragistics, アクセシビリティ準拠, インフラジスティックス +mentionedTypes: [] +_language: ja +--- + + + +# アクセシビリティ準拠 +開発者向けの UI および UX ツールのグローバル プロバイダーとして、Infragistics の {Platform} チームは、可能な限り最高のユーザー エクスペリエンスを簡単に作成できるコンポーネントとツールを提供します。私たちの目標は、ユーザーにとって最高のアプリケーションとユーザー エクスペリエンスの作成に集中できるようにすることです。 + +ここでは、Ignite UI for {Platform} 内の {Platform} グリッド、チャート、UI コンポーネントおよびコントロールのアクセシビリティ サポートと準拠に関する特定の情報を見つけることができます。 + +## 第 508 条の遵守 +リハビリテーション法[第 508 条](http://www.section508.gov/)は、連邦議会によって 1998 年に改正され、すべての連邦政府機関は障害を持つ人が電子情報技術にアクセスできるようにすることを義務付けました。それ以降、第 508 条の準拠は連邦政府機関の要件であるだけでなく、ソフトウェア ソリューションを提供し、Web ページを設計する際にも重要となります。 + +第 508 条の第 1194 部 22 条は、特に Web ベースのイントラネットおよびインターネット情報およびシステムを対象としており、遵守すべき 16 の規則が含まれています。お客様の最小限の努力でお客様の Web アプリケーションおよび Web サイトがこれらの規則に整合できるようにするために、インフラジスティックスは、Ignite UI for {Platform} のコントロールおよびコンポーネントが該当するアクセシビリティ規則に準拠することを保証するための取り組みを続けてきました。 + +以下のマトリックスで、弊社の視覚的コントロール (および関連コンポーネント) によって提供されるアクセシビリティのサポートの高レベルな概要を提供します。個々のコントロール/コンポーネントのアクセシビリティの遵守の詳細は、コントロール/コンポーネント名をクリックしてください。 + +### 第 508 条との Ignite UI for {Platform} 準拠 + +|**コンポーネント/原則**| (a)
    |(b)
    |(c)
    |(d)
    |(e)
    |(f)
    |(g)
    |(h)
    |(i)
    |(j)
    |(k)
    |(l)
    |(m)
    |(n)
    |(o)
    |(p)
    | +|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--| +|*グリッド*||||||||||||||||| +| - Grid||||||||||*||||||| +| - HierarchicalGrid||||||||||*||||||| +| - TreeGrid||||||||||*||||||| +|*その他*||||||||||*||||||| +| - Avatar||||||||||||||||| +| - Badge||||||||||||||||| +| - Bottom navigation||||||||||*||||||| +| - Button||||||||||*||||||| +| - Button group||||||||||*||||||| +| - Calendar||||||||||*||||||| +| - Card||||||||||||||||| +| - Carousel||||||||||*||||||| +| - Checkbox||||||||||||||||| +| - Chip||||||||||*||||||| +| - Circular progress||||||||||*||||||| +| - Combo||||||||||*||||||| +| - Date time input||||||||||*||||||| +| - Date picker||||||||||*||||||| +| - Divider||||||||||||||||| +| - Dialog||||||||||*||||||| +| - Drop down||||||||||*||||||| +| - Expansion panel||||||||||*||||||| +| - Icon||||||||||||||||| +| - Input||||||||||||||||| +| - Input group||||||||||*||||||| +| - Linear progress||||||||||*||||||| +| - List||||||||||||||||| +| - Navbar||||||||||*||||||| +| - Navigation drawer||||||||||*||||||| +| - Radio group||||||||||||||||| +| - Radio||||||||||||||||| +| - Select||||||||||*||||||| +| - Slider||||||||||*||||||| +| - Snackbar||||||||||*||||||| +| - Switch||||||||||*||||||| +| - Tabs||||||||||*||||||| +| - Time picker||||||||||*||||||| +| - Toast||||||||||*||||||| + + +**凡例** + +|||| +|---|---|---| +||コントロール/コンポーネントは、この特定の領域でユーザー補助に完全に対応しています。|| +|*|コントロール/コンポーネントは、この特定の領域で特定の構成を実装した後にアクセスできます。| 例: *NoopAnimationsModule* ユーティリティ モジュールを使用してアニメーションの無効化を許可します。| +||コントロール/コンポーネント: 一部の種類のアクションを実行しない限り、完全にはユーザー補助に対応しません。|| +|'空白'|この特定の規則はコントロールに適用されません。|| + +> [!WARNING] +> 上記のテーブルは、Ignite UI for {Platform} テーマ ライブラリのデフォルト テーマにのみ関連しています。カスタム テーマ、タイポグラフィ、およびアニメーションと色に関連する視覚的な変更に関しては、チェックリストへの準拠が異なる場合があります。 + + ### 法令遵守情報 + +- **a** - あらゆる非テキスト要素に対してテキスト相当物を提供するものとします(つまり、「alt」、「longdesc」を介して、または要素コンテンツで)。 +- **b** - マルチメディア プレゼンテーションに相当する代替物をプレゼンテーションと同期するものとします。 +- **c** - 色によって伝達されるすべての情報が色を使用しなくても理解できるように (たとえば、コンテキストやマークアップ) Web ページを設計するものとします。 +- **d** - ドキュメントは、関連付けられたスタイル シートがなくても読めるように構成されます。 +- **e** - サーバー側の画像マップのアクティブな領域ごとに冗長なテキスト リンクが提供されます。 +- **f** - その領域を使用可能な幾何学的形状で定義できない場合を除いて、サーバー側の画像マップの代わりにクライアント側の画像マップが提供されます。 +- **g** - 行ヘッダーと列ヘッダーは、データ テーブル用に識別される必要があります。 +- **h** - マークアップは、行または列のヘッダーの 2 つ以上の論理レベルを有するデータ テーブル用にデータ セルとヘッダー セルを関連づけるために使用します。 +- **i** - フレームには、フレームの識別とナビゲーションを簡略化するテキストでタイトルが付けられます。 +- **j** - ページは、2 Hz より大きく、55 Hz を下回る周波数で画面がちらつかないように設計するものとします。 +- **k** - その他のいかなる方法でも規定に準拠できない時に、Web サイトがこの部分の規定に準拠するように、相当する情報または機能を含むテキストのみのページを提供するものとします。主要なページが変更するとテキストのみのページのコンテンツは必ず更新されるものとします。 +- **l** - ページがスクリプト言語を利用してコンテンツを表示、またはインターフェイス要素を作成する場合、スクリプトによって提供される情報は支援技術が読み取ることのできる関数テキストで識別されるものとします。 +- **m** - ページのコンテンツを解釈するためにアプレット、プラグインまたはその他のアプリケーションがクライアント システムに存在することを Web ページが必要とする時には、ページは §1194.21(a) から (l) に準拠するプラグインまたはアプレットへのリンクを提供する必要があります。 +- **n** - オンラインですべての項目に記入するように電子的フォームが設計されている場合には、そのフォームによって、補助技術を使用するユーザーは、すべての指示と手掛かりを含めた、フォームの完成と提出に必要な情報、フィールド要素、および機能にアクセスすることができます。 +- **o** - ユーザーが反復するナビゲーション リンクをスキップすることができる方法を提供します。 +- **p** - 一定の時間内での応答が要求される場合、ユーザーは警告を受け、追加時間が必要な旨を伝える十分な時間が与えられます。 + + +## WCAG の準拠 +[WCAG](https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=111) は、アクセシブルな Web コンテンツを開発する方法に関する正式なガイドラインのセットです。これらの規格は、508 規格に同一または非常に類似していますが、より高いレベルのアクセシビリティを表しています。WCAG は主に HTML のアクセシビリティに焦点を当てます。 + +|**コンポーネント/ガイドライン**|1.1
    |1.2
    |1.3
    |1.4
    |2.1
    |2.2
    |2.3
    |2.4
    |2.5
    |3.1
    |3.2
    |3.3
    |4.1
    | +|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--| +|*グリッド*|||||||||||||| +| - Grid|||||||*||||*||| +| - HierarchicalGrid|||||||*||||*||| +| - TreeGrid|||||||*||||*||| +|*その他*|||||||*||||||| +| - Avatar|||||||||||*||| +| - Badge|||||||||||*||| +| - Banner||||||*|*||||*||| +| - Bottom navigation|||||||*||||*||| +| - Button|||||||*||||*||| +| - Button group|||||||*||||*||| +| - Calendar||||||*|*||||*||| +| - Card|||||||||||*||| +| - Carousel||||||*|*||||*||| +| - Checkbox|||||||||||*||| +| - Chip|||||||*||||*||| +| - Circular progress||||||*|*||||*||| +| - Combo||||||*|*||||*||| +| - Date time editor||||||*|*||||*||| +| - Date picker||||||*|*||||*||| +| - Divider|||||||||||*||| +| - Dialog||||||*|*||||*||| +| - Drop down||||||*|*||||*||| +| - Expansion panel||||||*|*||||*||| +| - Icon|||||||||||*||| +| - Input|||||||||||*||| +| - Input group|||||||*||||*||| +| - Label|||||||||||*||| +| - Linear progress||||||*|*||||*||| +| - List|||||||||||*||| +| - Month picker||||||*|*||||*||| +| - Navbar|||||||*||||*||| +| - Navigation drawer||||||*|*||||*||| +| - Radio group|||||||||||*||| +| - Radio|||||||||||*||| +| - Select||||||*|*||||*||| +| - Slider|||||||*||||*||| +| - Snackbar||||||*|*||||*||| +| - Switch|||||||*||||*||| +| - Tabs|||||||*||||*||| +| - Time picker||||||*|*||||*||| +| - Toast||||||*|*||||*||| +| - Tooltip||||||*|*||||*||| + + +**凡例** + +|||| +|---|---|---| +||コントロール/コンポーネントは、この特定の領域でユーザー補助に完全に対応しています。|| +|*|コントロール/コンポーネントは、この特定の領域で特定の構成を実装した後にアクセスできます。|例 1: ガイドライン 2.2. 特定のコンポーネントでは、追加のアクションと時間パラメーターを設定する必要があります。例 2: ガイドライン 2.3. *NoopAnimationsModule* ユーティリティ モジュールを使用してアニメーションの無効化を許可します。| +||コントロール/コンポーネント: 一部の種類のアクションを実行しない限り、完全にはユーザー補助に対応しません。|| +|'空白'|この特定の規則はコントロールに適用されません。|| + +> [!WARNING] +> 上記のテーブルは、Ignite UI for {Platform} テーマ ライブラリのデフォルト テーマにのみ関連しています。カスタム テーマ、タイポグラフィ、およびアニメーションと色に関連する視覚的な変更に関しては、チェックリストへの準拠が異なる場合があります。 + +### 法令遵守情報 + +- **原則 1 - 知覚可能** - 情報およびユーザー インターフェイス コンポーネントは、ユーザーが知覚できるように提示されなければなりません。 + - ガイドライン 1.1 – **代替テキスト** - テキスト以外のコンテンツの代替テキストを提供して、大きな活字、点字、音声、記号、より単純な言語など、他の形式に変更できるようにします。 + - ガイドライン 1.2 – **時間ベースのメディア** - 時間ベースのメディアの代替物を提供します。 + - ガイドライン 1.3 – **適応可能** - 情報や構造を失うことなく、さまざまな方法 (たとえば、よりシンプルなレイアウト) で提示できるコンテンツを作成します。 + - ガイドライン 1.4 – **識別可能** - 前景を背景から分離するなど、ユーザーがコンテンツをより簡単に視聴できるようにします。 +- **原則 2 – 操作可能** - ユーザー インターフェイス コンポーネントとナビゲーションは操作可能でなければなりません。 + - ガイドライン 2.1 – **キーボードでアクセス可能** - すべての機能をキーボードで使用できるようにします。 + - ガイドライン 2.2 – **十分な時間** - ユーザーがコンテンツを読んで使用するのに十分な時間を提供します。 + - ガイドライン 2.3 – **発作と身体的な反応** - 発作または身体的な反応を引き起こすことが知られている方法でコンテンツをデザインしないでください。 + - ガイドライン 2.4 – **ナビゲート可能** - ユーザーがナビゲートし、コンテンツを見つけ、そしてどこにいるかを判別するのに役立つ方法を提供します。 + - ガイドライン 2.5 – **入力モダリティ** - ユーザーがキーボード以外のさまざまな入力を介して機能を簡単に操作できるようにします。 +- **原則 3 – 理解可能** - ユーザー インターフェイスの情報と操作は理解可能でなければなりません。 + - ガイドライン 3.1 – **可読** - テキスト コンテンツを読みやすく、理解しやすくします。 + - ガイドライン 3.2 – **予測可能** - Web ページを予測可能な方法で表示して動作させる。 + - ガイドライン 3.3 – **入力支援** - ユーザーが間違いを回避して修正できるようにします。 +- **原則 4 – 堅牢** - コンテンツは、支援技術を含むさまざまなユーザー エージェントが解釈できるほど堅牢でなければなりません。 + - ガイドライン 4.1 – **互換性** - 支援技術を含む現在および将来のユーザー エージェントとの互換性を最大化します。 + + +## WAI-ARIA サポート +2014 年に W3C は [WAI-ARIA 仕様](http://www.w3.org/TR/wai-aria/)を完成しました。障害を持つユーザーに Web コンテンツおよび Web アプリケーションへのアクセシビリティを提供するデザインを定義したものです。 \ No newline at end of file diff --git a/doc/jp/components/layouts/divider.md b/doc/jp/components/layouts/divider.md new file mode 100644 index 000000000..90b56d1e9 --- /dev/null +++ b/doc/jp/components/layouts/divider.md @@ -0,0 +1,212 @@ +--- +title: {Platform} Divider | レイアウト コントロール | インフラジスティックス +_description: インフラジスティックスの {Platform} Avatar コンポーネントを使用して、画像、アイコン、またはイニシャルを表示します。 +_keywords: {ProductName}, UI controls, {Platform} widgets, Web widgets, UI widgets, {Platform}, Native {Platform} Components Suite, Native {Platform} Controls, Native {Platform} Components Library, {Platform} DIvider components, {Platform} Divider controls, UI コントロール, {Platform} ウィジェット, Web ウィジェット, UI ウィジェット, ネイティブ {Platform} コンポーネント スイート, ネイティブ {Platform} コントロール, ネイティブ {Platform} コンポーネント ライブラリ, {Platform} Divider コンポーネント, {Platform} Divider コントロール +mentionedTypes: ['Divider'] +_language: ja +--- + +# {Platform} Divider (デバイダー) + +{ProductName} Divider を使用すると、コンテンツ作成者はコンテンツ間の区切りとして水平/垂直の罫線を簡単に作成し、ページ上の情報を整理しやすくなります。 + +## {Platform} Divider の例 + +`sample="/layouts/divider/base", height="220", alt="{Platform} Divider の例"` + +
    + +## 依存関係 + + +まず、次のコマンドを実行して、{ProductName} npm パッケージをインストールする必要があります: + +```cmd +npm install {PackageWebComponents} +``` + + + + +まず、次のコマンドを実行して、対応する {ProductName} npm パッケージをインストールする必要があります: + +```cmd +npm install igniteui-react +``` + +次に、以下のように、`Divider` とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります: + +```tsx +import { IgrDividerModule, IgrDivider } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +IgrDividerModule.register(); +``` + + + +`Divider` を使用する前に、次のように登録する必要があります: + + +```razor +// in Program.cs file + +builder.Services.AddIgniteUIBlazor(typeof(IgbDividerModule)); +``` + + +スタイルを `Divider` コンポーネントに適用するには、追加の CSS ファイルをリンクする必要もあります。以下は、**Blazor Web Assembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: + +```razor + +``` + + + +```ts +import { defineComponents, IgcDividerComponent } from 'igniteui-webcomponents'; + +defineComponents(IgcDividerComponent); +``` + +{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。 + +`Divider` は、画像、イニシャル、またはアイコンを含むその他のコンテンツを表示できます。`Divider` の宣言は次のように簡単です: + +```html + +``` + +```tsx + +``` + +```razor + +``` +## 使用方法 +### 垂直デバイダー + +`Vertical` 属性が設定されている場合、デバイダーの方向は水平から垂直に変更されます。 + +```html + +``` + +```tsx + +``` + +```razor + +``` + +`sample="/layouts/divider/vertical", height="330", alt="{Platform} Divider Vertical の例"` + +### タイプ + +`Type` 属性は、`solid` のデバイダー線を描画するか、`dashed` のデバイダー線を描画するかを決定します。デフォルト値は `solid` です。 + +```html + +``` + +```tsx + +``` + +```razor + +``` + +`sample="/layouts/divider/dashed", height="220", alt="{Platform} Divider Dashed の例"` + +### デバイダーのインセット + +`Divider` は両側に設定できます。デバイダーをインセットする (`inset`) には、`--inset` css 変数と組み合わせて `Middle` 属性を true に設定します。これにより、両側のデバイダーが縮小されます。`Middle` 属性のデフォルト値は false です。 + +```css +/* DividerStyles.css */ +.withInset{ + --inset: 100px; + --color:red; +} +``` + +```html +// Both side + +// Left side only + +``` + + +```tsx +// Both side + +// Left side only + +``` + +```razor +// Both side + +// Left side only + +``` + + +`sample="/layouts/divider/middle", height="220", alt="{Platform} Divider Middle Inset の例"` + +### Select コンポーネント内での Divider の使用 + +次のサンプルは、2 つの項目グループを区別するために、`Select` 内に `Divider` を統合する方法を示しています。 + +```html + + Item 1 + Item 2 + + Item 3 + +``` + +```tsx + + Item 1 + Item 2 + + Item 2 + + +``` + +```razor + + Item 1 + Item 2 + + Item 2 + +``` + +`sample="/layouts/divider/select", height="330", alt="{Platform} Divider Select の例"` + +## CSS 変数 +### Inset +`--inset` css 変数は、開始から指定された量だけデバイダーを縮小します。middle が設定されている場合は、両側から縮小されます。 + +### Color +`--color` css 変数はデバイダーの色を設定します。 + +
    + + +## API リファレンス + + - `Divider` + +## その他のリソース + +* [{ProductName} **フォーラム (英語)**]({ForumsLink}) +* [{ProductName} **GitHub (英語)**]({GithubLink}) \ No newline at end of file diff --git a/doc/jp/components/layouts/stepper.md b/doc/jp/components/layouts/stepper.md index 6c31f0b76..1105ee8d0 100644 --- a/doc/jp/components/layouts/stepper.md +++ b/doc/jp/components/layouts/stepper.md @@ -336,7 +336,6 @@ linear プロパティが *true* に設定されている場合、ステッパ
    - ### Stepper のアニメーション {Platform} の `Stepper` のアニメーションにより、エンドユーザーは、定義されたステップを操作しているときに美しいユーザー操作体験を得ることができます。使用可能なアニメーション オプションは、ステッパーの向きによって異なります。 @@ -352,7 +351,6 @@ linear プロパティが *true* に設定されている場合、ステッパ `sample="/layouts/stepper/animations", height="600", alt="{Platform} Stepper アニメーションの例"`
    - ## キーボード ナビゲーション diff --git a/doc/jp/components/notifications/banner.md b/doc/jp/components/notifications/banner.md new file mode 100644 index 000000000..9fe6b1d4c --- /dev/null +++ b/doc/jp/components/notifications/banner.md @@ -0,0 +1,247 @@ +--- +title: {Platform} Banner | インフラジスティックス +_description: {ProductName} Banner コンポーネントを使用すると、開発者は、モバイル アプリケーションやデスクトップ アプリケーション内に、短くて邪魔にならないメッセージ (およびオプションのアクション) を簡単に統合できます。 +_keywords: {ProductName}, UI controls, {Platform} widgets, web widgets, UI widgets, {Platform}, Native {Platform} Components Suite, Native {Platform} Controls, Native {Platform} Components Library, {Platform} Banner components, UI コントロール, {Platform} ウィジェット, web ウィジェット, UI ウィジェット, ネイティブ {Platform} コンポーネント スイート, ネイティブ {Platform} コントロール, ネイティブ {Platform} コンポーネント ライブラリ, {Platform} Banner コンポーネント +mentionedTypes: ['Banner'] +_language: ja +--- + +# {Platform} Banner (バナー) の概要 + +{ProductName} Banner コンポーネントは、スナックバーより長い時間の表示でダイアログより控えめのメッセージを簡単に表示できます。また、メッセージのコンテキストに基づいて実行するアクションを示すこともできます。 + +## {ProductName} Banner の例 + +`sample="/notifications/banner/banner-sample-1", height="530", alt="{Platform} Banner の例"` + +## 使用方法 + + +まず、次のコマンドを実行して {ProductName} をインストールする必要があります: + +```cmd +npm install {PackageWebComponents} +``` + +次に、以下のように、`Banner` とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります: + +```ts +import { defineComponents, IgcBannerComponent } from "igniteui-webcomponents"; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +defineComponents(IgcBannerComponent); +``` + + +{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。 + +### Banner の表示 + +Banner コンポーネントを表示するには、ボタン クリックで `Show` メソッドを呼び出します。バナーは、要素がページ テンプレートに挿入された場所にその他すべてのコンテンツを移動して表示されます。通常、閉じるためのユーザー操作をほとんど必要としない非侵入型コンテンツを表示します。 + +```html +Show Banner + + +``` + +> [!NOTE] +> `Banner` には、バナーを閉じるデフォルトの `OK` アクション ボタンが含まれています。 + + +## 例 + +`Banner` コンポーネントは、マテリアル デザイン バナー ガイドラインにできるかぎり準拠しながらコンテンツをテンプレート化します。 + +### バナー メッセージの変更 + +`igc-banner` タグに渡されるコンテンツを変更することによりバナーに表示されるメッセージを設定できます。指定したバナー領域にテキストが表示され、表示時にバナーはデフォルト テンプレートを使用します。以下は、サンプル バナーのコンテンツを変更してより多くの情報を提供します。 + +```html + +``` + +### アイコンの追加 + +バナーの `prefix` スロットを使用して、[`igc-icon`](../layouts/icon.md) をバナーに表示できます。Icon は常にバナー メッセージの最初に配置されます。 + +> [!NOTE] +> 複数の `igc-icon` 要素が挿入される場合、バナーはそれらすべてを最初に配置しようとします。`igc-icon` は 1 つのみ、直接渡すことに注意してください。 + +`igc-icon` をバナーに渡すには、`prefix` スロットを使用します。 + +```html + +``` + +バナー メッセージで `igc-icon` を使用する場合は、バナーのコンテンツに挿入するだけです。 + +```html + +``` + +### バナー ボタンの変更 + +`Banner` は、バナー ボタンをテンプレート化するための `actions` スロットを公開します。これにより、デフォルトのバナー ボタン (`OK`) をオーバーライドし、ユーザー定義のカスタム操作を追加します。 + +```html + +``` + +`sample="/notifications/banner/banner-sample-2", height="530", alt="{Platform} Banner の例"` + +### イベントにバインド + +バナー コンポーネントは、閉じられるときに `igcClosing` イベントと `igcClosed` イベントを発行します。`igcClosing` イベントはキャンセル可能です。[`CustomEvent`](https://developer.mozilla.org/docs/Web/API/CustomEvent) インターフェイスを使用し、発行されたオブジェクトの `cancelable` プロパティは **true** に設定されています。`igcClosing` イベントをキャンセルすると、対応する終了アクションとイベントはトリガーされません。バナーは閉じられず、`igcClosed` イベントも発行されません。 + +終了イベントをキャンセルするには、[`preventDefault`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) メソッドを呼び出します。 + +```html + +``` +```ts +const banner = document.getElementById('banner') as IgcBannerComponent; + +banner.addEventListener('igcClosing', (event) => { + event.preventDefault(); +}); +``` + +> [!NOTE] +> 上記が適用されると、終了イベントが常にキャンセルされるため、バナーが閉じることはありません。 + +## 高度な例 + +2 つのカスタムボタンのバナーを作成しましょう。1 つは通知を閉じるためのボタンで、もう 1 つは接続をオンにするためのボタンです。`actions` スロットを使用してカスタム アクション ハンドラーを渡すことができます。 + +```html + +``` + + + +> Google の[マテリアル デザイン ガイドライン](https://material.io/design/components/banners.html#anatomy)では、バナーはに表示するボタンは 2 つまでです。`Banner` は、`actions` スロットの要素数を明示的に制限しませんが、マテリアル デザイン ガイドに従う場合は、最大 2 つの要素を使用することを強くお勧めします。 + + +閉じるオプション (`'Continue Offline'`) は詳細なロジックを必要としないため、`Hide` のみの呼び出しが可能です。しかし、確認アクション (`'Turn On Wifi'`) は追加のロジックを必要とするため、コンポーネントで定義する必要があります。次に、`click` イベントのイベント リスナーを追加します。最後に、変更するたびに `refreshBanner()` メソッドを呼び出します。これにより、`wifiState` に基づいてバナーを切り替えます。 + +ナビゲーション バーには Wi-Fi アイコンが表示され、その `click` イベントのイベント リスナーも追加されます。変更ごとに `refreshBanner()` メソッドが呼び出されるため、アイコンはバナーを切り替えるだけでなく、接続の状態に応じて変化します。 + +```html + +

    Gallery

    + +     + + +``` + +```ts +private banner: IgcBannerComponent; +private icon: IgcIconComponent; +private button: IgcButtonComponent; + +private wifiState: boolean = false; + +constructor() { + this.banner = document.getElementById('banner') as IgcBannerComponent; + this.icon = document.getElementById('icon') as IgcIconComponent; + this.button = document.getElementById('button') as IgcButtonComponent; + + this.icon.addEventListener('click', () => this.refreshBanner()); + this.button.addEventListener('click', () => this.refreshBanner()); +} + +public refreshBanner() { + if (!this.wifiState) { + this.icon.name = 'signal_wifi_4_bar'; + this.banner.hide(); + } else { + this.icon.name = 'signal_wifi_off'; + this.banner.show(); + } + this.wifiState = !this.wifiState; +} +``` + +最後に、WiFi の状態に関するメッセージを表示する `Toast` を追加します。以下はテンプレート化したバナーのデモです。 + +`sample="/notifications/banner/banner-advanced-sample", height="530", alt="{Platform} Banner の例"` + +## スタイル設定 + +Banner コンポーネントは、いくつかの CSS パーツ (`base`、`spacer`、`message`、`illustration`、`content` および `actions`) を公開して、そのスタイルを完全に制御できるようにします。 + +```css +igc-banner::part(spacer) { + background: #dedede; +} + +igc-banner::part(illustration) { + color: #666666; +} + +igc-banner::part(content) { + color: #151515; +} +``` + +`sample="/notifications/banner/banner-styling", height="530", alt="{Platform} Banner の例"` + + +## API リファレンス + +- `Banner` +- `Card` +- `Icon` +- `Navbar` +- `Toast` +- `Ripple` + +## その他のリソース + +* [{ProductName} **フォーラム (英語)**]({ForumsLink}) +* [{ProductName} **GitHub (英語)**]({GithubLink}) \ No newline at end of file diff --git a/doc/jp/components/radial-gauge.md b/doc/jp/components/radial-gauge.md index e813c97a1..ec2dffc08 100644 --- a/doc/jp/components/radial-gauge.md +++ b/doc/jp/components/radial-gauge.md @@ -336,9 +336,11 @@ IgrRadialGaugeModule.register(); `sample="/gauges/radial-gauge/scale", height="320", alt="{Platform} ラジアル ゲージのスケール"` -## ラベル +## ラベルとタイトル ゲージ ラベルは `MinimumValue` と `MaximumValue` の値の間で指定された間隔で数値を表示する視覚要素です。0 はゲージ中央、1 はゲージ バッキングの外側範囲を表す `LabelExtent` プロパティで小数を使用してラベルの配置を設定できます。`FontBrush` や `Font` など、さまざまなスタイル プロパティを設定してラベルをカスタマイズできます。 +これらの針のラベルにはそれぞれ、`TitleExtent`、`TitleAngle`、`SubtitleFontSize`、`HighlightLabelBrush` など、フォント、角度、ブラシ、ゲージの中心からの距離を変更するために適用できるさまざまなスタイル属性があります。 + ```html + +``` + +```tsx + +``` + +```html + + +``` + +```razor + + +``` + ## オプティカル スケーリング ラジアル ゲージのラベルとタイトルにより、スケーリングを変更できます。これを有効にするには、まず `OpticalScalingEnabled` を true に設定します。次に、ラベルが 100% のオプティカル スケーリングを持つサイズを管理する `OpticalScalingSize` を設定できます。ゲージのサイズが大きくなると、ラベルのフォントも大きくなります。たとえば、このプロパティが 500 に設定され、ゲージのピクセル単位のサイズが 2 倍の 1000 になると、ラベルのフォント サイズは 200% 大きくなります。 diff --git a/doc/jp/components/scheduling/date-picker.md b/doc/jp/components/scheduling/date-picker.md new file mode 100644 index 000000000..7ecb1ae79 --- /dev/null +++ b/doc/jp/components/scheduling/date-picker.md @@ -0,0 +1,343 @@ +--- +title: {Platform} Date Picker コンポーネント – {ProductName} +_description: インフラジスティックスの {Platform} Date Picker を使用すると、ユーザーはカレンダーから日付を選択し、入力要素に設定できます。 +_keywords: {Platform} Date Picker, {ProductName}, Infragistics, {Platform} 日付ピッカー, インフラジスティックス +mentionedTypes: ['DatePicker'] +_language: ja +--- + +# {Platform} Date Picker (日付ピッカー) コンポーネントの概要 +{ProductName} Date Picker は、手動でテキストを入力して日付を入力するか、ポップアップするカレンダー ダイアログから日付値を選択するために使用される機能豊富なコンポーネントです。軽量で使いやすい Date Picker を使用すると、ユーザーは、月、年、10 年の複数の表示オプションを使用して目的の日付に移動できます。また、最小および最大の日付制約や必須フィールドなどの一般的な検証プロパティもサポートしています。 + +{ProductName} Date Picker コンポーネントを使用すると、ユーザーは月表示のカレンダード ロップダウンまたは編集可能な入力フィールドから単一の日付を選択できます。{Platform} Date Picker は、カレンダーからのみ選択するための dialog モード、ロケール対応でカスタマイズ可能な日付の書式設定と検証の統合もサポートしています。 + +> [!NOTE] +> `DatePicker` コンポーネントは、{ProductName} のバージョン 5.0.018.7.0 以降の新しいコンポーネントです。このバージョンより前の古い `DatePicker` は `XDatePicker` に名前が変更され、それぞれのドキュメント ページは「非推奨のコンポーネント」の下にあります。 + +## {Platform} Date Picker の例 + +以下は、ユーザーが手動のテキスト入力で日付を選択し、左側のカレンダー アイコンをクリックしてナビゲートできるようになったときに、Date Picker がどのように機能するかを示すサンプルです。描画する方法は以下のとおりです。 + +`sample="/scheduling/date-picker/overview", height="500", alt="{Platform} Date Picker 入力の概要例"` + +## {Platform} Date Picker を使用した作業の開始 + + +まず、次のコマンドを実行して {ProductName} をインストールする必要があります: + +```cmd +npm install {PackageWebComponents} +``` + +次に、以下のように、`DatePicker` とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります: + +```ts +import { defineComponents, IgcDatePickerComponent } from 'igniteui-webcomponents'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +defineComponents(IgcDatePickerComponent); +``` + + +まず、次のコマンドを実行して {ProductName} をインストールする必要があります: + +```cmd +npm install igniteui-react +``` + +次に、以下のように、`DatePicker` とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります: + +```tsx +import { IgrDatePicker, IgrDatePickerModule } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +IgrDatePickerModule.register(); +``` + + +`DatePicker` コンポーネントの使用を開始するには、最初にそのモジュールを登録する必要があります。 + +```razor +// in Program.cs file + +builder.Services.AddIgniteUIBlazor(typeof(IgbDatePickerModule)); +``` + +スタイルを `DatePicker` コンポーネントに適用するには、追加の CSS ファイルをリンクする必要もあります。以下は、**Blazor WebAssembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: + +```razor + +``` + + +{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。 + +## {Platform} Date Picker コンポーネントの使用 + +### 日付ピッカーの表示 +デフォルトの `dropdown` 状態の `DatePicker` をインスタンス化するには、以下のコードを使用してください。 + +```html + +

    Date

    +     +``` + +```tsx + +``` + +```razor + +``` + +### オプション + +`DatePicker` は `date` または `string` にバインドできます。 + + +`DatePicker` は `date` にバインドできます。 + +```typescript +const DatePicker = document.querySelector('igc-date-picker') as IgcDatePickerComponent; +const date = new Date(); + +DatePicker.value = date; +``` +```tsx +datePickerRef.current.value = new Date(); +``` +```Razor + + + +@code { + + public DateTime SelectedDate { get; set; } + public IgbDatePicker DatePicker { get; set; } + + protected override void OnInitialized() + { + this.SelectedDate = DateTime.Today; + } +} +``` + +文字列がピッカーにバインドされている場合は、`ISO 8601` 形式の文字列である必要があります。 +```html + +``` + + +### コンポーネントの投影 +prefix スロットと suffix スロットを使用すると、入力のメイン コンテンツの前後に異なるコンテンツを追加できます。 + +```html + + + +``` +```tsx + + datePickerRef.current.stepUp(DatePart.Month)}> + + +``` +```razor + + + + +``` +上記のスニペットでは、​​入力の最後、デフォルトのクリア アイコンの直後に追加のアイコンが追加されます。プレフィックスとサフィックスを次々に積み重ねることができるため、これによってデフォルトのトグル アイコンが削除されることはありません。 + +#### トグル アイコンとクリア アイコンのカスタマイズ +カレンダーとクリア アイコンは、`calendar` スロットと `clear` スロットを使用してテンプレート化できます。 + +```html + + + + +``` +```tsx + + + + +``` +```razor + + + + +``` + +#### カスタム アクション ボタン +ピッカーのアクション ボタンは、`actions` スロットを使用してテンプレート化できます。 +```html + + Show Week Numbers + +``` +```tsx + + datePickerRef.current.showWeekNumbers = true}> + Show Week Numbers + + +``` +```razor + + Show Week Numbers + +``` + +### キーボード ナビゲーション + +`DatePicker` には直感的なキーボード ナビゲーションがあり、マウスに触れることなく、さまざまな DatePart を簡単に増分、減分、またはジャンプできます。 + +|キー|説明| +|----|-----------| +| ← | 1 文字を先頭に移動 | +| → | 1 文字を最後に移動 | +| Home | 最初に移動 | +| End | 最後に移動 | +| Ctrl / Command + ← | 日付 / 時刻セクションの先頭に移動 - 現在のセクションまたは左側のセクション | +| Ctrl / Command + → | 日付 / 時刻セクションの最後に移動 - 現在または右側のセクション | +| 日付 / 時刻部分にフォーカス + ↓ | 日付 / 時刻部分を減少 | +| 日付 / 時刻部分にフォーカス + ↑ | 日付 / 時刻部分を増加 | +| Ctrl / Command + ; | 現在の日付 / 時刻をエディターの値として設定 | +| Esc | カレンダーのポップアップを閉じて、入力フィールドにフォーカを合わせます。 | + +## 例 + +### ダイアログ モード +DatePicker は `dialog` モードもサポートしています。 +```html + + +``` +```tsx + +``` +```razor + +``` +`sample="/scheduling/date-picker/dialog-mode", height="500", alt="{Platform} Date Picker Dialog モードの例"` + +### 表示および入力形式 +`InputFormat` および `DisplayFormat` は、ピッカーのエディターが指定された形式に従うように設定できるプロパティです。`InputFormat` はロケール ベースであるため、何も指定されていない場合、ピッカーはデフォルトでブラウザーで使用されるものになります。 + +注意すべき点は、Date Picker コンポーネントが `date` と `month` の部分がない形式で提供された場合、それらの部分に常に先行ゼロを追加することです。 例えば、`d/M/yy` は `dd/MM/yy` になります。これは編集中にのみ適用されます。 + +`DisplayFormat` は、フォーカスされていないときにピッカーの入力を書式設定するために使用されます。`DisplayFormat` が指定されていない場合、ピッカーは `InputFormat` を `DisplayFormat` として使用します。 + +詳細については、`IgcDateTimeInput` 形式のセクションを参照してください。 + +`sample="/scheduling/date-picker/format", height="500", alt="{Platform} Date Picker 入力形式の例"` + +### 増加および減少 +`DatePicker` は、`StepUp` メソッドと `StepDown` メソッドを公開します。これらは両方とも `IgcDateTimeInput` から取得され、現在設定されている日付の特定の `DatePart` を増加および減少するために使用できます。 + +```html + + + + +``` +```tsx + + datePickerRef.current.stepUp(DatePart.Month)}> + + datePickerRef.current.stepDown(DatePart.Month)}> + + +``` +```razor + + + + + + +``` +### フォーム +`DatePicker` はフォーム要素で使用できます。コンポーネントの `Min` プロパティと `Max` プロパティはフォーム検証機能として機能します。 + + +フォームでは、コンポーネントの `igcChange` イベントを処理し、ラベルの値を更新できます。 + + +フォームでは、コンポーネントの `change` イベントを処理し、ラベルの値を更新できます。 + + +フォームでは、コンポーネントの `Change` イベントを処理し、ラベルの値を更新できます。 + + +`sample="/scheduling/date-picker/form", height="500", alt="{Platform} Date Picker 入力フォームの例"` + +### カレンダー固有の設定 +`DatePicker` は、Date Picker が公開するプロパティを通じて、カレンダーの設定の一部を変更できます。これらの一部には、ピッカーが展開されたときに複数のカレンダーを表示できる `VisibleMonths`、週の開始日を決定する `WeekStart`、年の各週の番号を表示する `ShowWeekNumbers` などが含まれます。 + +## インターナショナリゼーション + +`DatePicker` のローカライズは、`Locale` 入力で制御できます。 + +以下は日本ロケール定義を持つ `DatePicker` です。 +```html + + +``` +```tsx + +``` +```razor + +``` + +## スタイル設定 +`DatePicker` コンポーネントは `Input` コンポーネントおよび `Calendar` コンポーネントから派生するため、使用可能なすべての CSS パーツを公開します。詳細については、[Input のスタイル設定](../inputs/input.md#スタイル設定)と [Calendar のスタイル設定](calendar.md#スタイル設定)を参照してください。 + + +`sample="/scheduling/date-picker/styling", height="500", alt="{Platform} Date Picker 入力のスタイル設定に例"` + +## API リファレンス + + - `Input` + - `Calendar` + - `DatePicker` + + +## その他のリソース + +* [{ProductName} **フォーラム (英語)**]({ForumsLink}) +* [{ProductName} **GitHub (英語)**]({GithubLink}) \ No newline at end of file diff --git a/doc/jp/images/general/greenCheck.png b/doc/jp/images/general/greenCheck.png new file mode 100644 index 000000000..6d0936686 Binary files /dev/null and b/doc/jp/images/general/greenCheck.png differ diff --git a/doc/jp/images/general/redX.png b/doc/jp/images/general/redX.png new file mode 100644 index 000000000..ae748161d Binary files /dev/null and b/doc/jp/images/general/redX.png differ diff --git a/doc/kr/components/general-changelog-dv.md b/doc/kr/components/general-changelog-dv.md index 90084cb64..a4e2ac9bc 100644 --- a/doc/kr/components/general-changelog-dv.md +++ b/doc/kr/components/general-changelog-dv.md @@ -52,7 +52,7 @@ All notable changes for each version of {ProductName} are documented on this pag * [Calendar](scheduling/calendar.md) * [Card](layouts/card.md) * [Checkbox](inputs/checkbox.md) -* [Form](inputs/form.md) +* Form * [Icon](layouts/icon.md) * [List](grids/list.md) * [Navbar](menus/navbar.md) @@ -73,7 +73,7 @@ All notable changes for each version of {ProductName} are documented on this pag * [Button & Icon Button](inputs/button.md) * [Card](layouts/card.md) * [Checkbox](inputs/checkbox.md) -* [Form](inputs/form.md) +* Form * [Icon](layouts/icon.md) * [List](grids/list.md) * [Navbar](menus/navbar.md) diff --git a/docConfig.json b/docConfig.json index cda8b86e7..be112c8a2 100644 --- a/docConfig.json +++ b/docConfig.json @@ -46,7 +46,8 @@ { "name": "{PackageVerChanges-23-2-JAN}", "value": "17.2.0 (January 2024)" }, { "name": "{PackageVerChanges-23-2-MAR}", "value": "17.3.0 (March 2024)" }, { "name": "{PackageVerChanges-24-1-JUN}", "value": "18.0.0 (June 2024)" }, - { "name": "{PackageVerLatest}", "value": "18.0.0"}, + { "name": "{PackageVerChanges-24-1-SEP}", "value": "18.1.0 (September 2024)" }, + { "name": "{PackageVerLatest}", "value": "18.1.0"}, { "name": "{PackageAngularComponents}", "value": "igniteui-angular"}, { "name": "{RepoSamples}", "value": "https://github.com/IgniteUI/igniteui-angular-examples/tree/master/samples"}, { "name": "{RepoBrowser}", "value": "https://github.com/IgniteUI/igniteui-angular-examples/tree/master/browser"}, @@ -94,8 +95,9 @@ { "name": "{HierarchicalGridPackage}", "value": "igniteui-angular-grids"}, { "name": "{HierarchicalGridSample}", "value": "grids/hierarchical-grid"}, { "name": "{HierarchicalGridApiMembers}", "value": "\"Infragistics.Controls.HierarchicalGrid\", \"Infragistics.Controls.HierarchicalGridRow\", \"Infragistics.Controls.GridCell\", \"Infragistics.Controls.Column\""}, - { "name": "{RowIslandSelector}", "value": "igx-row-island"} + { "name": "{RowIslandSelector}", "value": "igx-row-island"}, + { "name": "{BannerSelector}", "value": "igx-banner"} ], "samplesBrowsers" : { "development": "http://localhost:4200", @@ -157,7 +159,8 @@ { "name": "{PackageVerChanges-23-2-JAN}", "value": "18.5.0 (January 2024)" }, { "name": "{PackageVerChanges-23-2-MAR}", "value": "18.6.0 (March 2024)" }, { "name": "{PackageVerChanges-24-1-JUN}", "value": "18.6.1 (June 2024)" }, - { "name": "{PackageVerLatest}", "value": "18.6.1"}, + { "name": "{PackageVerChanges-24-1-SEP}", "value": "18.7.0 (September 2024)" }, + { "name": "{PackageVerLatest}", "value": "18.7.0"}, { "name": "{RepoSamples}", "value": "https://github.com/IgniteUI/igniteui-react-examples/tree/master/samples"}, { "name": "{RepoBrowser}", "value": "https://github.com/IgniteUI/igniteui-react-examples/tree/master/browser"}, { "name": "{GithubLink}", "value": "https://github.com/IgniteUI/igniteui-react"}, @@ -206,6 +209,8 @@ { "name": "{HierarchicalGridApiMembers}", "value": "\"Infragistics.Controls.HierarchicalGrid\", \"Infragistics.Controls.HierarchicalGridRow\", \"Infragistics.Controls.GridCell\", \"Infragistics.Controls.Column\""}, { "name": "{RowIslandSelector}", "value": "IgrRowIsland"}, + { "name": "{BannerSelector}", "value": "IgrBanner"}, + { "name": "{CanonicalLinkToGridMain}", "value": " ", "note": "do not remove spaces"}, { "name": "{CanonicalLinkToGridCellEditing}", "value": " ", "note": "do not remove spaces"}, { "name": "{CanonicalLinkToGridCellSelection}", "value": " ", "note": "do not remove spaces"}, @@ -281,7 +286,73 @@ { "name": "{PackageVerChanges-23-2-JAN}", "value": "4.7.0 (January 2024)"}, { "name": "{PackageVerChanges-23-2-MAR}", "value": "4.8.0 (March 2024)" }, { "name": "{PackageVerChanges-24-1-JUN}", "value": "4.8.1 (June 2024)" }, - { "name": "{PackageVerLatest}", "value": "4.8.1"}, + { "name": "{PackageVerChanges-24-1-SEP}", "value": "5.0.0 (September 2024)" }, + { "name": "{PackageCommonVerChanges-1.0.0}", "value": "1.0.0 (November 2021)"}, + { "name": "{PackageCommonVerChanges-2.0.0}", "value": "2.0.0 (February 2022)"}, + { "name": "{PackageCommonVerChanges-2.1.0}", "value": "2.1.0 (March 2022)"}, + { "name": "{PackageCommonVerChanges-2.1.1}", "value": "2.1.1 (March 2022)"}, + { "name": "{PackageCommonVerChanges-2.2.0}", "value": "2.2.0 (April 2022)"}, + { "name": "{PackageCommonVerChanges-3.0.0}", "value": "3.0.0 (April 2022)"}, + { "name": "{PackageCommonVerChanges-3.1.0}", "value": "3.1.0 (April 2022)"}, + { "name": "{PackageCommonVerChanges-3.2.0}", "value": "3.2.0 (May 2022)"}, + { "name": "{PackageCommonVerChanges-3.3.0}", "value": "3.3.0 (July 2022)"}, + { "name": "{PackageCommonVerChanges-3.3.1}", "value": "3.3.1 (August 2022)"}, + { "name": "{PackageCommonVerChanges-3.4.0}", "value": "3.4.0 (September 2022)"}, + { "name": "{PackageCommonVerChanges-3.4.1}", "value": "3.4.1 (September 2022)"}, + { "name": "{PackageCommonVerChanges-3.4.2}", "value": "3.4.2 (November 2022)"}, + { "name": "{PackageCommonVerChanges-4.0.0}", "value": "4.0.0 (November 2022)"}, + { "name": "{PackageCommonVerChanges-4.1.0}", "value": "4.1.0 (December 2022)"}, + { "name": "{PackageCommonVerChanges-4.1.1}", "value": "4.1.1 (January 2023)"}, + { "name": "{PackageCommonVerChanges-4.2.0}", "value": "4.2.0 (January 2023)"}, + { "name": "{PackageCommonVerChanges-4.2.1}", "value": "4.2.1 (February 2023)"}, + { "name": "{PackageCommonVerChanges-4.2.2}", "value": "4.2.2 (March 2023)"}, + { "name": "{PackageCommonVerChanges-4.2.3}", "value": "4.2.3 (April 2023)"}, + { "name": "{PackageCommonVerChanges-4.3.0}", "value": "4.3.0 (June 2023)"}, + { "name": "{PackageCommonVerChanges-4.3.1}", "value": "4.3.1 (August 2023)"}, + { "name": "{PackageCommonVerChanges-4.4.0}", "value": "4.4.0 (August 2023)"}, + { "name": "{PackageCommonVerChanges-4.5.0}", "value": "4.5.0 (October 2023)"}, + { "name": "{PackageCommonVerChanges-4.6.0}", "value": "4.6.0 (December 2023)"}, + { "name": "{PackageCommonVerChanges-4.7.0}", "value": "4.7.0 (January 2024)"}, + { "name": "{PackageCommonVerChanges-4.8.0}", "value": "4.8.0 (March 2024)"}, + { "name": "{PackageCommonVerChanges-4.8.1}", "value": "4.8.1 (April 2024)"}, + { "name": "{PackageCommonVerChanges-4.8.2}", "value": "4.8.2 (April 2024)"}, + { "name": "{PackageCommonVerChanges-4.9.0}", "value": "4.9.0 (April 2024)"}, + { "name": "{PackageCommonVerChanges-4.10.0}", "value": "4.10.0 (July 2024)"}, + { "name": "{PackageCommonVerChanges-4.11.0}", "value": "4.11.0 (July 2024)"}, + { "name": "{PackageCommonVerChanges-4.11.1}", "value": "4.11.1 (July 2024)"}, + { "name": "{PackageCommonVerChanges-5.0.0}", "value": "5.0.0 (August 2024)"}, + { "name": "{PackageDockManagerVerChanges-1.0.0}", "value": "1.0.0"}, + { "name": "{PackageDockManagerVerChanges-1.0.1}", "value": "1.0.1"}, + { "name": "{PackageDockManagerVerChanges-1.0.2}", "value": "1.0.2"}, + { "name": "{PackageDockManagerVerChanges-1.0.3}", "value": "1.0.3"}, + { "name": "{PackageDockManagerVerChanges-1.1.0}", "value": "1.1.0"}, + { "name": "{PackageDockManagerVerChanges-1.2.0}", "value": "1.2.0"}, + { "name": "{PackageDockManagerVerChanges-1.3.0}", "value": "1.3.0"}, + { "name": "{PackageDockManagerVerChanges-1.4.0}", "value": "1.4.0"}, + { "name": "{PackageDockManagerVerChanges-1.4.1}", "value": "1.4.1"}, + { "name": "{PackageDockManagerVerChanges-1.5.0}", "value": "1.5.0"}, + { "name": "{PackageDockManagerVerChanges-1.6.0}", "value": "1.6.0"}, + { "name": "{PackageDockManagerVerChanges-1.7.0}", "value": "1.7.0"}, + { "name": "{PackageDockManagerVerChanges-1.8.0}", "value": "1.8.0"}, + { "name": "{PackageDockManagerVerChanges-1.9.0}", "value": "1.9.0"}, + { "name": "{PackageDockManagerVerChanges-1.10.0}", "value": "1.10.0"}, + { "name": "{PackageDockManagerVerChanges-1.11.0}", "value": "1.11.0"}, + { "name": "{PackageDockManagerVerChanges-1.11.1}", "value": "1.11.1"}, + { "name": "{PackageDockManagerVerChanges-1.11.2}", "value": "1.11.2"}, + { "name": "{PackageDockManagerVerChanges-1.11.3}", "value": "1.11.3"}, + { "name": "{PackageDockManagerVerChanges-1.12.0}", "value": "1.12.0"}, + { "name": "{PackageDockManagerVerChanges-1.12.1}", "value": "1.12.1"}, + { "name": "{PackageDockManagerVerChanges-1.12.2}", "value": "1.12.2"}, + { "name": "{PackageDockManagerVerChanges-1.12.3}", "value": "1.12.3"}, + { "name": "{PackageDockManagerVerChanges-1.12.4}", "value": "1.12.4"}, + { "name": "{PackageDockManagerVerChanges-1.12.5}", "value": "1.12.5"}, + { "name": "{PackageDockManagerVerChanges-1.13.0}", "value": "1.13.0"}, + { "name": "{PackageDockManagerVerChanges-1.14.0}", "value": "1.14.0"}, + { "name": "{PackageDockManagerVerChanges-1.14.1}", "value": "1.14.1"}, + { "name": "{PackageDockManagerVerChanges-1.14.2}", "value": "1.14.2"}, + { "name": "{PackageDockManagerVerChanges-1.14.3}", "value": "1.14.3"}, + { "name": "{PackageDockManagerVerChanges-1.14.4}", "value": "1.14.4"}, + { "name": "{PackageVerLatest}", "value": "5.0.0"}, { "name": "{PackageWebComponents}", "value": "igniteui-webcomponents"}, { "name": "{RepoSamples}", "value": "https://github.com/IgniteUI/igniteui-wc-examples/tree/master/samples"}, { "name": "{RepoBrowser}", "value": "https://github.com/IgniteUI/igniteui-wc-examples/tree/master/browser"}, @@ -331,6 +402,8 @@ { "name": "{HierarchicalGridApiMembers}", "value": "\"Infragistics.Controls.HierarchicalGrid\", \"Infragistics.Controls.HierarchicalGridRow\", \"Infragistics.Controls.GridCell\", \"Infragistics.Controls.Column\""}, { "name": "{RowIslandSelector}", "value": "igc-row-island"}, + { "name": "{BannerSelector}", "value": "igc-banner"}, + { "name": "{CanonicalLinkToGridMain}", "value": "grids/data-grid", "note": "data-grid is really gird overview topic"}, { "name": "{CanonicalLinkToGridCellEditing}", "value": "grids/grid/cell-editing"}, { "name": "{CanonicalLinkToGridCellSelection}", "value": "grids/grid/cell-selection"}, @@ -358,6 +431,7 @@ "AccordionComponent", "AvatarComponent", "BadgeComponent", + "BannerComponent", "ButtonComponent", "ButtonBase", "CalendarComponent", @@ -374,10 +448,12 @@ "ComboComponent", "ComponentBoolValueChangedEventArgs", "ComponentValueChangedEventArgs", + "DatePicker", "DateRangeType", "DateRangeDescriptor", "DateTimeInputComponent", "DialogComponent", + "Divider", "DropdownComponent", "DropdownGroup", "DropdownHeader", @@ -475,7 +551,8 @@ { "name": "{PackageVerChanges-23-2-APR}", "value": "23.2.191 (April 2024)" }, { "name": "{PackageVerChanges-23-2-APR2}", "value": "23.2.204 (March 2024)" }, { "name": "{PackageVerChanges-24-1-JUN}", "value": "23.2.257 (June 2024)" }, - { "name": "{PackageVerLatest}", "value": "23.2.257"}, + { "name": "{PackageVerChanges-24-1-SEP}", "value": "24.1.46 (September 2024)" }, + { "name": "{PackageVerLatest}", "value": "24.1.46"}, { "name": "{RepoSamples}", "value": "https://github.com/IgniteUI/igniteui-blazor-examples/tree/master/samples"}, { "name": "{RepoBrowser}", "value": "https://github.com/IgniteUI/igniteui-blazor-examples/tree/master/browser"}, @@ -525,6 +602,8 @@ { "name": "{HierarchicalGridApiMembers}", "value": "\"Infragistics.Controls.HierarchicalGrid\", \"Infragistics.Controls.HierarchicalGridRow\", \"Infragistics.Controls.GridCell\", \"Infragistics.Controls.Column\""}, { "name": "{RowIslandSelector}", "value": "IgbRowIsland"}, + { "name": "{BannerSelector}", "value": "IgbBanner"}, + { "name": "{CanonicalLinkToGridMain}", "value": "grids/data-grid", "note": "data-grid is really gird overview topic"}, { "name": "{CanonicalLinkToGridCellEditing}", "value": "grids/grid/cell-editing"}, { "name": "{CanonicalLinkToGridCellSelection}", "value": "grids/grid/cell-selection"}, diff --git a/docfx/en/components/toc.json b/docfx/en/components/toc.json index 09ddc83e4..1d4b28156 100644 --- a/docfx/en/components/toc.json +++ b/docfx/en/components/toc.json @@ -115,8 +115,17 @@ { "exclude": ["Angular", "Blazor", "WebComponents"], "name": "Integrating Ignite UI for React with Next.js", - "href": "nextjs-usage.md", - "status": "UPDATED" + "href": "nextjs-usage.md" + }, + { + "exclude": ["Angular"], + "name": "Interactivity", + "header": true, + "href": "interactivity/accessibility-compliance.md" + }, + { + "name": "Accessibility Compliance", + "href": "interactivity/accessibility-compliance.md" }, { "note": "THIS MAIN NODE FOR OLD XPLAT GRID", @@ -177,11 +186,6 @@ "name": "Conditional Styling", "href": "grids/grid/conditional-cell-styling.md" }, - { - "exclude": ["Angular"], - "name": "Display Density", - "href": "grids/grid/display-density.md" - }, { "exclude": ["Angular"], "name": "Editing", @@ -328,6 +332,12 @@ } ] }, + { + "exclude": ["Angular"], + "name": "Size", + "href": "grids/grid/size.md", + "status": "NEW" + }, { "exclude": ["Angular"], "name": "Sizing", @@ -358,6 +368,12 @@ "exclude": ["Angular"], "name": "Theming", "href": "grids/theming.md" + }, + { + "exclude": ["Angular"], + "name": "Customize Icons", + "href": "grids/grid/icons.md", + "status": "NEW" } ] }, @@ -401,11 +417,6 @@ "name": "Conditional Styling", "href": "grids/hierarchical-grid/conditional-cell-styling.md" }, - { - "exclude": ["Angular"], - "name": "Display Density", - "href": "grids/hierarchical-grid/display-density.md" - }, { "exclude": ["Angular"], "name": "Editing", @@ -507,6 +518,12 @@ } ] }, + { + "exclude": ["Angular"], + "name": "Size", + "href": "grids/hierarchical-grid/size.md", + "status": "NEW" + }, { "exclude": ["Angular"], "name": "Sizing", @@ -518,7 +535,7 @@ "href": "grids/hierarchical-grid/sorting.md" }, { - "exclude": ["Angular", "React", "WebComponents", "Blazor"], + "exclude": ["Angular"], "name": "State Persistence", "href": "grids/hierarchical-grid/state-persistence.md" }, @@ -550,10 +567,10 @@ ] }, { - "exclude": ["Angular", "React" ], + "exclude": ["Angular"], "name": "Pivot Grid", "href": "grids/pivot-grid/overview.md", - "status": "", + "status": ["NEW_REACT"], "items": [ { "exclude": ["Angular", "React", "WebComponents", "Blazor"], @@ -562,16 +579,16 @@ "status": "" }, { - "exclude": ["Angular", "React", "WebComponents", "Blazor"], + "exclude": ["Angular"], "name": "State Persistence", "href": "grids/pivot-grid/state-persistence.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular", "WebComponents"], "name": "Features", "href": "grids/pivot-grid/features.md", - "status": "" + "status": ["NEW_REACT"] }, { "exclude": ["Angular", "React", "Blazor"], @@ -585,43 +602,36 @@ "exclude": ["Angular"], "name": "Tree Grid", "href": "grids/tree-grid/overview.md", - "status": ["NEW_REACT"], "items": [ { "exclude": ["Angular"], "name": "Clipboard Interactions", - "href": "grids/tree-grid/clipboard-interactions.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/clipboard-interactions.md" }, { "exclude": ["Angular"], "name": "Collapsible Column Groups", - "href": "grids/tree-grid/collapsible-column-groups.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/collapsible-column-groups.md" }, { "exclude": ["Angular"], "name": "Column Types", - "href": "grids/tree-grid/column-types.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/column-types.md" }, { "exclude": ["Angular"], "name": "Conditional Styling", - "href": "grids/tree-grid/conditional-cell-styling.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/conditional-cell-styling.md" }, { "exclude": ["Angular"], "name": "Column Hiding", - "href": "grids/tree-grid/column-hiding.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/column-hiding.md" }, { "exclude": ["Angular", "React"], "name": "Column Moving", - "href": "grids/tree-grid/column-moving.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/column-moving.md" }, { "exclude": ["Angular", "React"], @@ -632,64 +642,49 @@ { "exclude": ["Angular"], "name": "Column Resizing", - "href": "grids/tree-grid/column-resizing.md", - "status": ["NEW_REACT"] - }, - { - "exclude": ["Angular"], - "name": "Display Density", - "href": "grids/tree-grid/display-density.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/column-resizing.md" }, { "exclude": ["Angular"], "name": "Editing", "href": "grids/tree-grid/editing.md", - "status": ["NEW_REACT"], "items": [ { "exclude": ["Angular"], "name": "Cell Editing", - "href": "grids/tree-grid/cell-editing.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/cell-editing.md" }, { "exclude": ["Angular"], "name": "Row Adding", - "href": "grids/tree-grid/row-adding.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/row-adding.md" }, { "exclude": ["Angular"], "name": "Row Editing", - "href": "grids/tree-grid/row-editing.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/row-editing.md" } ] }, { "exclude": ["Angular"], "name": "Export to Excel", - "href": "grids/tree-grid/export-excel.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/export-excel.md" }, { "exclude": ["Angular"], "name": "Filtering", "href": "grids/tree-grid/filtering.md", - "status": ["NEW_REACT"], "items": [ { "exclude": ["Angular"], "name": "Advanced Filtering", - "href": "grids/tree-grid/advanced-filtering.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/advanced-filtering.md" }, { "exclude": ["Angular", "React"], "name": "Excel Style Filtering", - "href": "grids/tree-grid/excel-style-filtering.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/excel-style-filtering.md" } ] }, @@ -702,8 +697,7 @@ { "exclude": ["Angular"], "name": "Multi-Column Headers", - "href": "grids/tree-grid/multi-column-headers.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/multi-column-headers.md" }, { "exclude": ["Angular", "React", "WebComponents", "Blazor"], @@ -714,8 +708,7 @@ { "exclude": ["Angular"], "name": "Paging", - "href": "grids/tree-grid/paging.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/paging.md" }, { "exclude": ["Angular", "React", "WebComponents", "Blazor"], @@ -726,67 +719,64 @@ { "exclude": ["Angular"], "name": "Row Actions", - "href": "grids/tree-grid/row-actions.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/row-actions.md" }, { "exclude": ["Angular"], "name": "Row Dragging", - "href": "grids/tree-grid/row-drag.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/row-drag.md" }, { "exclude": ["Angular"], "name": "Row Pinning", - "href": "grids/tree-grid/row-pinning.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/row-pinning.md" }, { "exclude": ["Angular"], "name": "Search", - "href": "grids/tree-grid/search.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/search.md" }, { "exclude": ["Angular"], "name": "Selection", "href": "grids/tree-grid/selection.md", - "status": ["NEW_REACT"], "items": [ { "exclude": ["Angular"], "name": "Cell Selection", - "href": "grids/tree-grid/cell-selection.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/cell-selection.md" }, { "exclude": ["Angular"], "name": "Column Selection", - "href": "grids/tree-grid/column-selection.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/column-selection.md" }, { "exclude": ["Angular"], "name": "Row Selection", - "href": "grids/tree-grid/row-selection.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/row-selection.md" } ] }, + { + "exclude": ["Angular"], + "name": "Size", + "href": "grids/tree-grid/size.md", + "status": "NEW" + + }, { "exclude": ["Angular"], "name": "Sizing", - "href": "grids/tree-grid/sizing.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/sizing.md" }, { "exclude": ["Angular"], "name": "Sorting", - "href": "grids/tree-grid/sorting.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/sorting.md" }, { - "exclude": ["Angular", "React", "WebComponents", "Blazor"], + "exclude": ["Angular"], "name": "State Persistence", "href": "grids/tree-grid/state-persistence.md", "status": "" @@ -794,20 +784,17 @@ { "exclude": ["Angular"], "name": "Summaries", - "href": "grids/tree-grid/summaries.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/summaries.md" }, { "exclude": ["Angular"], "name": "Toolbar", - "href": "grids/tree-grid/toolbar.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/toolbar.md" }, { "exclude": ["Angular"], "name": "Virtualization and performance", - "href": "grids/tree-grid/virtualization.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/virtualization.md" }, { "exclude": ["Angular", "React", "Blazor"], @@ -831,8 +818,7 @@ { "exclude": ["Angular"], "name": "Tree", - "href": "grids/tree.md", - "status": "UPDATED" + "href": "grids/tree.md" }, { "exclude": ["Angular", "Blazor", "WebComponents", "React"], @@ -1099,6 +1085,11 @@ "href": "charts/types/composite-chart.md", "status": "" }, + { + "name": "Data Pie Chart", + "href": "charts/types/data-pie-chart.md", + "status": "NEW" + }, { "name": "Donut Chart", "href": "charts/types/donut-chart.md", @@ -1495,8 +1486,7 @@ { "exclude": ["Angular", "React", "Blazor"], "name": "Customization", - "href": "layouts/dock-manager-customization.md", - "status": "NEW" + "href": "layouts/dock-manager-customization.md" } ] }, @@ -1517,6 +1507,11 @@ "name": "Tabs", "href": "layouts/tabs.md", "status": "" + }, + { + "exclude": ["Angular", "React", "Blazor"], + "name": "Divider", + "href": "layouts/divider.md" }, { "name": "Menus", @@ -1524,8 +1519,7 @@ }, { "name": "Toolbar", - "href": "menus/toolbar.md", - "status": "PREVIEW" + "href": "menus/toolbar.md" }, { "exclude": ["Angular"], @@ -1621,8 +1615,7 @@ { "exclude": ["Angular"], "name": "Button Group", - "href": "inputs/button-group.md", - "status": "NEW" + "href": "inputs/button-group.md" }, { "exclude": ["Angular"], @@ -1668,11 +1661,6 @@ "name": "Dropdown", "href": "inputs/dropdown.md" }, - { - "exclude": ["Angular"], - "name": "Form", - "href": "inputs/form.md" - }, { "exclude": ["Angular"], "name": "Icon", @@ -1721,8 +1709,7 @@ { "exclude": ["Angular"], "name": "Text Area", - "href": "inputs/text-area.md", - "status": "NEW" + "href": "inputs/text-area.md" }, { "name": "Interactions", @@ -1749,6 +1736,12 @@ "name": "Notifications", "header": true }, + { + "exclude": ["Angular"], + "name": "Banner", + "href": "notifications/banner.md", + "status": "NEW" + }, { "exclude": ["Angular"], "name": "Snackbar", @@ -1777,11 +1770,11 @@ { "exclude": ["Angular"], "name": "Date Picker", - "href": "editors/date-picker.md", - "status": "" + "href": "scheduling/date-picker.md", + "status": "NEW" }, { - "exclude": ["Angular", "React"], + "exclude": ["Angular"], "name": "Styling & Themes", "header": true }, @@ -2018,5 +2011,11 @@ "name": "Multi-Column Combo Box", "href": "editors/multi-column-combobox.md", "status": "" + }, + { + "exclude": ["Angular"], + "name": "XDate Picker", + "href": "editors/xdate-picker.md", + "status": "" } ] diff --git a/docfx/jp/components/toc.json b/docfx/jp/components/toc.json index 5bfa61ad6..93d364a6b 100644 --- a/docfx/jp/components/toc.json +++ b/docfx/jp/components/toc.json @@ -118,6 +118,16 @@ "href": "nextjs-usage.md", "status": "UPDATED" }, + { + "exclude": ["Angular"], + "name": "インタラクティビティ", + "header": true, + "href": "interactivity/accessibility-compliance.md" + }, + { + "name": "アクセシビリティの遵守", + "href": "interactivity/accessibility-compliance.md" + }, { "exclude": ["Angular", "Blazor", "WebComponents", "React"], "name": "グリッド & リスト", @@ -175,11 +185,6 @@ "name": "条件付きスタイル設定", "href": "grids/grid/conditional-cell-styling.md" }, - { - "exclude": ["Angular"], - "name": "表示密度", - "href": "grids/grid/display-density.md" - }, { "exclude": ["Angular"], "name": "編集", @@ -326,6 +331,12 @@ } ] }, + { + "exclude": ["Angular"], + "name": "サイズ", + "href": "grids/grid/size.md", + "status": "NEW" + }, { "exclude": ["Angular"], "name": "サイズ設定", @@ -356,6 +367,12 @@ "exclude": ["Angular"], "name": "テーマ設定", "href": "grids/theming.md" + }, + { + "exclude": ["Angular"], + "name": "アイコンのカスタマイズ", + "href": "grids/grid/icons.md", + "status": "NEW" } ] }, @@ -399,11 +416,6 @@ "name": "条件付きスタイル設定", "href": "grids/hierarchical-grid/conditional-cell-styling.md" }, - { - "exclude": ["Angular"], - "name": "表示密度", - "href": "grids/hierarchical-grid/display-density.md" - }, { "exclude": ["Angular"], "name": "編集", @@ -505,6 +517,12 @@ } ] }, + { + "exclude": ["Angular"], + "name": "サイズ", + "href": "grids/hierarchical-grid/size.md", + "status": "NEW" + }, { "exclude": ["Angular"], "name": "サイズ設定", @@ -516,7 +534,7 @@ "href": "grids/hierarchical-grid/sorting.md" }, { - "exclude": ["Angular", "React", "WebComponents", "Blazor"], + "exclude": ["Angular"], "name": "状態の保持", "href": "grids/hierarchical-grid/state-persistence.md" }, @@ -548,10 +566,10 @@ ] }, { - "exclude": ["Angular", "React"], + "exclude": ["Angular"], "name": "ピボット グリッド", "href": "grids/pivot-grid/overview.md", - "status": "", + "status": ["NEW_REACT"], "items": [ { "exclude": ["Angular", "React", "WebComponents", "Blazor"], @@ -560,16 +578,16 @@ "status": "" }, { - "exclude": ["Angular", "React", "WebComponents", "Blazor"], + "exclude": ["Angular"], "name": "状態の保持", "href": "grids/pivot-grid/state-persistence.md", - "status": "" + "status": "NEW" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular", "WebComponents"], "name": "機能", "href": "grids/pivot-grid/features.md", - "status": "" + "status": ["NEW_REACT"] }, { "exclude": ["Angular", "React", "Blazor"], @@ -633,12 +651,6 @@ "href": "grids/tree-grid/column-resizing.md", "status": ["NEW_REACT"] }, - { - "exclude": ["Angular"], - "name": "表示密度", - "href": "grids/tree-grid/display-density.md", - "status": ["NEW_REACT"] - }, { "exclude": ["Angular"], "name": "編集", @@ -771,6 +783,12 @@ } ] }, + { + "exclude": ["Angular"], + "name": "サイズ", + "href": "grids/tree-grid/size.md", + "status": "NEW" + }, { "exclude": ["Angular"], "name": "サイズ設定", @@ -784,7 +802,7 @@ "status": ["NEW_REACT"] }, { - "exclude": ["Angular", "React", "WebComponents", "Blazor"], + "exclude": ["Angular"], "name": "状態の保持", "href": "grids/tree-grid/state-persistence.md", "status": "" @@ -1097,6 +1115,11 @@ "href": "charts/types/composite-chart.md", "status": "" }, + { + "name": "データ円チャート", + "href": "charts/types/data-pie-chart.md", + "status": "NEW" + }, { "name": "ドーナツ チャート", "href": "charts/types/donut-chart.md", @@ -1516,6 +1539,12 @@ "href": "layouts/tabs.md", "status": "" }, + { + "exclude": ["Angular", "React", "Blazor"], + "name": "デバイダー", + "href": "layouts/divider.md", + "status": "NEW" + }, { "name": "メニュー", "header": true @@ -1666,11 +1695,6 @@ "name": "ドロップダウン", "href": "inputs/dropdown.md" }, - { - "exclude": ["Angular"], - "name": "フォーム", - "href": "inputs/form.md" - }, { "exclude": ["Angular"], "name": "アイコン", @@ -1747,6 +1771,12 @@ "name": "通知", "header": true }, + { + "exclude": ["Angular", "Blazor", "React"], + "name": "バナー", + "href": "notifications/banner.md", + "status": "NEW" + }, { "exclude": ["Angular"], "name": "スナックバー", @@ -1775,11 +1805,11 @@ { "exclude": ["Angular"], "name": "日付ピッカー", - "href": "editors/date-picker.md", - "status": "" + "href": "scheduling/date-picker.md", + "status": "NEW" }, { - "exclude": ["Angular", "React"], + "exclude": ["Angular"], "name": "スタイル設定およびとテーマ", "header": true }, @@ -2016,5 +2046,11 @@ "name": "複数列コンボ ボックス", "href": "editors/multi-column-combobox.md", "status": "" + }, + { + "exclude": ["Angular"], + "name": "XDate ピッカー", + "href": "editors/xdate-picker.md", + "status": "" } ] diff --git a/docfx/kr/components/toc.json b/docfx/kr/components/toc.json index 247057857..f658c9110 100644 --- a/docfx/kr/components/toc.json +++ b/docfx/kr/components/toc.json @@ -335,6 +335,11 @@ "href": "charts/types/composite-chart.md", "status": "" }, + { + "name": "Data Pie Chart", + "href": "charts/types/data-pie-chart.md", + "status": "NEW" + }, { "name": "Donut Chart", "href": "charts/types/donut-chart.md", @@ -849,12 +854,6 @@ "name": "Inputs", "header": true }, - { - "exclude": ["Angular", "React"], - "name": "Form", - "href": "inputs/form.md", - "status": "NEW" - }, { "exclude": ["Angular", "React"], "name": "Button", diff --git a/stats/docStats-Blazor.json b/stats/docStats-Blazor.json index 5a3af234c..dbdf76cf3 100644 --- a/stats/docStats-Blazor.json +++ b/stats/docStats-Blazor.json @@ -2,7 +2,7 @@ "note": "this auto-generated file provides stats about samples used in Blazor documentation", "info": "you can lookup samples in 'samplesUsage' or lookup topics in 'topicsWithSamples' ", "platform": "Blazor", - "samplesCount": 651, + "samplesCount": 658, "samplesHost": "https://staging.infragistics.com/blazor-client/samples", "samplesNote": "the 'samplesUsage' provides lookup of samples usage in topics", "samplesUsage": { @@ -273,6 +273,9 @@ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/types/column-chart", "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/types/radial-chart" ], + "https://staging.infragistics.com/blazor-client/samples/samples/charts/data-chart/radial-column-chart-selection": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/features/chart-data-selection" + ], "https://staging.infragistics.com/blazor-client/samples/samples/charts/data-chart/radial-line-chart": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/types/line-chart", "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/types/radial-chart" @@ -391,6 +394,24 @@ "https://staging.infragistics.com/blazor-client/samples/samples/charts/data-chart/waterfall-chart": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/types/column-chart" ], + "https://staging.infragistics.com/blazor-client/samples/samples/charts/data-pie-chart/animation": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/types/data-pie-chart" + ], + "https://staging.infragistics.com/blazor-client/samples/samples/charts/data-pie-chart/highlighting": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/types/data-pie-chart" + ], + "https://staging.infragistics.com/blazor-client/samples/samples/charts/data-pie-chart/legend": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/types/data-pie-chart" + ], + "https://staging.infragistics.com/blazor-client/samples/samples/charts/data-pie-chart/others": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/types/data-pie-chart" + ], + "https://staging.infragistics.com/blazor-client/samples/samples/charts/data-pie-chart/overview": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/types/data-pie-chart" + ], + "https://staging.infragistics.com/blazor-client/samples/samples/charts/data-pie-chart/selection": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/types/data-pie-chart" + ], "https://staging.infragistics.com/blazor-client/samples/samples/charts/doughnut-chart/legend": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/chart-overview", "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/types/donut-chart" @@ -2023,7 +2044,7 @@ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/scheduling/calendar" ] }, - "topicsCount": 279, + "topicsCount": 281, "topicsHost": "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components", "topicsNote": "the 'topicsWithSamples' provides lookup of topics that used at least 1 sample", "topicsWithSamples": { @@ -2123,7 +2144,8 @@ ], "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/features/chart-data-selection": [ "https://staging.infragistics.com/blazor-client/samples/samples/charts/category-chart/selection-modes", - "https://staging.infragistics.com/blazor-client/samples/samples/charts/category-chart/selection-multiple-modes" + "https://staging.infragistics.com/blazor-client/samples/samples/charts/category-chart/selection-multiple-modes", + "https://staging.infragistics.com/blazor-client/samples/samples/charts/data-chart/radial-column-chart-selection" ], "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/features/chart-data-tooltip": [ "https://staging.infragistics.com/blazor-client/samples/samples/charts/category-chart/data-tooltip", @@ -2212,6 +2234,14 @@ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/types/composite-chart": [ "https://staging.infragistics.com/blazor-client/samples/samples/charts/data-chart/composite-chart" ], + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/types/data-pie-chart": [ + "https://staging.infragistics.com/blazor-client/samples/samples/charts/data-pie-chart/animation", + "https://staging.infragistics.com/blazor-client/samples/samples/charts/data-pie-chart/highlighting", + "https://staging.infragistics.com/blazor-client/samples/samples/charts/data-pie-chart/legend", + "https://staging.infragistics.com/blazor-client/samples/samples/charts/data-pie-chart/others", + "https://staging.infragistics.com/blazor-client/samples/samples/charts/data-pie-chart/overview", + "https://staging.infragistics.com/blazor-client/samples/samples/charts/data-pie-chart/selection" + ], "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/types/donut-chart": [ "https://staging.infragistics.com/blazor-client/samples/samples/charts/doughnut-chart/legend", "https://staging.infragistics.com/blazor-client/samples/samples/charts/doughnut-chart/rings", diff --git a/stats/docStats-React.json b/stats/docStats-React.json index 109018288..c7513691a 100644 --- a/stats/docStats-React.json +++ b/stats/docStats-React.json @@ -2,7 +2,7 @@ "note": "this auto-generated file provides stats about samples used in React documentation", "info": "you can lookup samples in 'samplesUsage' or lookup topics in 'topicsWithSamples' ", "platform": "React", - "samplesCount": 661, + "samplesCount": 671, "samplesHost": "https://staging.infragistics.com/react-demos/samples", "samplesNote": "the 'samplesUsage' provides lookup of samples usage in topics", "samplesUsage": { @@ -276,6 +276,9 @@ "https://staging.infragistics.com/products/ignite-ui-react/react/components/charts/types/column-chart", "https://staging.infragistics.com/products/ignite-ui-react/react/components/charts/types/radial-chart" ], + "https://staging.infragistics.com/react-demos/samples/samples/charts/data-chart/radial-column-chart-selection": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/charts/features/chart-data-selection" + ], "https://staging.infragistics.com/react-demos/samples/samples/charts/data-chart/radial-line-chart": [ "https://staging.infragistics.com/products/ignite-ui-react/react/components/charts/types/line-chart", "https://staging.infragistics.com/products/ignite-ui-react/react/components/charts/types/radial-chart" @@ -284,6 +287,9 @@ "https://staging.infragistics.com/products/ignite-ui-react/react/components/charts/types/pie-chart", "https://staging.infragistics.com/products/ignite-ui-react/react/components/charts/types/radial-chart" ], + "https://staging.infragistics.com/react-demos/samples/samples/charts/data-chart/radial-proportional-category-angle-axis": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/charts/features/chart-axis-types" + ], "https://staging.infragistics.com/react-demos/samples/samples/charts/data-chart/range-area-chart": [ "https://staging.infragistics.com/products/ignite-ui-react/react/components/charts/types/area-chart" ], @@ -390,6 +396,24 @@ "https://staging.infragistics.com/react-demos/samples/samples/charts/data-chart/waterfall-chart": [ "https://staging.infragistics.com/products/ignite-ui-react/react/components/charts/types/column-chart" ], + "https://staging.infragistics.com/react-demos/samples/samples/charts/data-pie-chart/animation": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/charts/types/data-pie-chart" + ], + "https://staging.infragistics.com/react-demos/samples/samples/charts/data-pie-chart/highlighting": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/charts/types/data-pie-chart" + ], + "https://staging.infragistics.com/react-demos/samples/samples/charts/data-pie-chart/legend": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/charts/types/data-pie-chart" + ], + "https://staging.infragistics.com/react-demos/samples/samples/charts/data-pie-chart/others": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/charts/types/data-pie-chart" + ], + "https://staging.infragistics.com/react-demos/samples/samples/charts/data-pie-chart/overview": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/charts/types/data-pie-chart" + ], + "https://staging.infragistics.com/react-demos/samples/samples/charts/data-pie-chart/selection": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/charts/types/data-pie-chart" + ], "https://staging.infragistics.com/react-demos/samples/samples/charts/doughnut-chart/legend": [ "https://staging.infragistics.com/products/ignite-ui-react/react/components/charts/chart-overview", "https://staging.infragistics.com/products/ignite-ui-react/react/components/charts/types/donut-chart" @@ -1280,6 +1304,9 @@ "https://staging.infragistics.com/react-demos/samples/samples/grids/pivot-grid/data-persistence-noop": [ "https://staging.infragistics.com/products/ignite-ui-react/react/components/grids/pivot-grid/state-persistence" ], + "https://staging.infragistics.com/react-demos/samples/samples/grids/pivot-grid/data-selector": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/grids/pivot-grid/overview" + ], "https://staging.infragistics.com/react-demos/samples/samples/grids/pivot-grid/excel-style-filtering-sample-1": [ "https://staging.infragistics.com/products/ignite-ui-react/react/components/grids/pivot-grid/excel-style-filtering" ], @@ -1292,6 +1319,10 @@ "https://staging.infragistics.com/react-demos/samples/samples/grids/pivot-grid/excel-style-filtering-style": [ "https://staging.infragistics.com/products/ignite-ui-react/react/components/grids/pivot-grid/excel-style-filtering" ], + "https://staging.infragistics.com/react-demos/samples/samples/grids/pivot-grid/features": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/grids/pivot-grid/features", + "https://staging.infragistics.com/products/ignite-ui-react/react/components/grids/pivot-grid/overview" + ], "https://staging.infragistics.com/react-demos/samples/samples/grids/pivot-grid/row-editing-options": [ "https://staging.infragistics.com/products/ignite-ui-react/react/components/grids/pivot-grid/row-editing" ], @@ -2052,7 +2083,7 @@ "https://staging.infragistics.com/products/ignite-ui-react/react/components/scheduling/calendar" ] }, - "topicsCount": 292, + "topicsCount": 295, "topicsHost": "https://staging.infragistics.com/products/ignite-ui-react/react/components", "topicsNote": "the 'topicsWithSamples' provides lookup of topics that used at least 1 sample", "topicsWithSamples": { @@ -2129,6 +2160,7 @@ "https://staging.infragistics.com/react-demos/samples/samples/charts/data-chart/polar-line-chart", "https://staging.infragistics.com/react-demos/samples/samples/charts/data-chart/polar-scatter-chart", "https://staging.infragistics.com/react-demos/samples/samples/charts/data-chart/radial-area-chart", + "https://staging.infragistics.com/react-demos/samples/samples/charts/data-chart/radial-proportional-category-angle-axis", "https://staging.infragistics.com/react-demos/samples/samples/charts/data-chart/scatter-line-chart", "https://staging.infragistics.com/react-demos/samples/samples/charts/data-chart/stacked-column-chart", "https://staging.infragistics.com/react-demos/samples/samples/charts/data-chart/type-scatter-hd-series" @@ -2150,7 +2182,8 @@ ], "https://staging.infragistics.com/products/ignite-ui-react/react/components/charts/features/chart-data-selection": [ "https://staging.infragistics.com/react-demos/samples/samples/charts/category-chart/selection-modes", - "https://staging.infragistics.com/react-demos/samples/samples/charts/category-chart/selection-multiple-modes" + "https://staging.infragistics.com/react-demos/samples/samples/charts/category-chart/selection-multiple-modes", + "https://staging.infragistics.com/react-demos/samples/samples/charts/data-chart/radial-column-chart-selection" ], "https://staging.infragistics.com/products/ignite-ui-react/react/components/charts/features/chart-data-tooltip": [ "https://staging.infragistics.com/react-demos/samples/samples/charts/category-chart/data-tooltip", @@ -2242,6 +2275,14 @@ "https://staging.infragistics.com/products/ignite-ui-react/react/components/charts/types/composite-chart": [ "https://staging.infragistics.com/react-demos/samples/samples/charts/data-chart/composite-chart" ], + "https://staging.infragistics.com/products/ignite-ui-react/react/components/charts/types/data-pie-chart": [ + "https://staging.infragistics.com/react-demos/samples/samples/charts/data-pie-chart/animation", + "https://staging.infragistics.com/react-demos/samples/samples/charts/data-pie-chart/highlighting", + "https://staging.infragistics.com/react-demos/samples/samples/charts/data-pie-chart/legend", + "https://staging.infragistics.com/react-demos/samples/samples/charts/data-pie-chart/others", + "https://staging.infragistics.com/react-demos/samples/samples/charts/data-pie-chart/overview", + "https://staging.infragistics.com/react-demos/samples/samples/charts/data-pie-chart/selection" + ], "https://staging.infragistics.com/products/ignite-ui-react/react/components/charts/types/donut-chart": [ "https://staging.infragistics.com/react-demos/samples/samples/charts/doughnut-chart/legend", "https://staging.infragistics.com/react-demos/samples/samples/charts/doughnut-chart/rings", @@ -2868,6 +2909,13 @@ "https://staging.infragistics.com/react-demos/samples/samples/grids/pivot-grid/excel-style-filtering-sample-3", "https://staging.infragistics.com/react-demos/samples/samples/grids/pivot-grid/excel-style-filtering-style" ], + "https://staging.infragistics.com/products/ignite-ui-react/react/components/grids/pivot-grid/features": [ + "https://staging.infragistics.com/react-demos/samples/samples/grids/pivot-grid/features" + ], + "https://staging.infragistics.com/products/ignite-ui-react/react/components/grids/pivot-grid/overview": [ + "https://staging.infragistics.com/react-demos/samples/samples/grids/pivot-grid/data-selector", + "https://staging.infragistics.com/react-demos/samples/samples/grids/pivot-grid/features" + ], "https://staging.infragistics.com/products/ignite-ui-react/react/components/grids/pivot-grid/row-editing": [ "https://staging.infragistics.com/react-demos/samples/samples/grids/pivot-grid/row-editing-options", "https://staging.infragistics.com/react-demos/samples/samples/grids/pivot-grid/row-editing-style"