Ignite UI for React

    Todos los cambios notables para cada versión de Ignite UI for React están documentados en esta página.

    18.7.0 (September 2024)

    igniteui-react-charts (Charts)

    • Nueva Gráfico circular de datos: DataPieChart es un nuevo componente que representa un gráfico circular. Este componente funciona de forma similar al IgrCategoryChart componente ItemLegend, en el sentido de que detectará automáticamente las propiedades del modelo de datos subyacente a la vez que permite la selección, el resaltado, la animación y la compatibilidad con leyendas a través del componente ItemLegend.

    • Nuevo eje de ángulo de categoría proporcional: nuevos ejes para la serie circular radial en el IgrDataChart, para trazar porciones similares a un gráfico circular, un tipo de visualización de datos donde los puntos de datos se representan como segmentos dentro de un gráfico circular.

    • IgrToolbar

      • Nueva ToolActionCheckboxList Una nueva CheckboxList ToolAction que muestra una colección de elementos con casillas de verificación para seleccionar. Una cuadrícula dentro de ToolAction CheckboxList crece en altura hasta 5 elementos, luego se muestra una barra de desplazamiento.

      • Nuevo soporte de filtrado

      • Cambios en el campo del eje Nuevo IconMenu predeterminado en la barra de herramientas cuando se dirige a CategoryChart. Los campos de etiqueta se asignan al eje X y los campos de valor se asignan al eje Y. El gráfico objetivo reacciona en tiempo real a los cambios realizados. IconMenu se oculta cuando el gráfico no tiene establecido ItemsSource.

    igniteui-react

    CAMBIOS IMPORTANTES:

    igniteui-react-grids

    • All Grids
    • Se ha añadido un nuevo RowClick evento.
    • IgrPivotGrid
      • Propiedad agregada sortable para a IgrPivotDimension.
      • Se ha añadido un diseño horizontal. Se puede habilitar dentro de la nueva pivotUI propiedad como rowLayout horizontal.
      • Se agregaron resúmenes de dimensiones de fila solo para el diseño horizontal. Se puede habilitar para cada uno IgrPivotDimension estableciendo horizontalSummary en true.
      • Se ha añadido horizontalSummariesPosition la propiedad a la pivotUI posición de configuración de resúmenes horizontales.
      • Se agregaron encabezados de fila para las dimensiones de fila. Se puede habilitar dentro de la nueva pivotUI propiedad como showHeaders true.
      • La navegación por teclado ahora puede moverse hacia adelante y hacia atrás a los encabezados de fila desde cualquier encabezado de dimensión de fila o encabezado de columna.
      • Se agregaron interacciones de teclado para el uso de la contracción Alt + Arrows de la dimensión de fila y la ordenación de encabezados de fila. Ctrl + Arrow Up/Down​

    CAMBIOS IMPORTANTES:

    • All Grids, RowIsland
      • Se ha quitado displayDensity la propiedad en desuso.
      • Se ha cambiado el nombre actualColumns, contentColumns las propiedades a actualColumnList y contentColumnList. Use columns la propiedad or columnList para obtener todas las columnas ahora.
      • Se ha cambiado el nombre y rowAdd el rowDelete tipo de argumento de evento a RowDataCancelableEventArgs.
      • Se ha cambiado el nombre del contextMenu tipo de argumento de evento a GridContextMenuEventArgs.
      • Eliminados IgrGridEditEventArgs, IgrGridEditDoneEventArgs, IgrPinRowEventArgs eventos rowID y primaryKey propiedades. Úselo rowKey en su lugar.
    • IgrPivotGrid
      • propiedad removida showPivotConfigurationUI. Utilice pivotUI y establezca dentro de él la nueva showConfiguration opción.
    • IgrColumn
      • Propiedad eliminada movable. Utilice la propiedad de moving Grid ahora.
      • Propiedad eliminada columnChildren. Úselo childColumns en su lugar.
    • IgrColumnGroup
      • Propiedad eliminada children. Úselo childColumns en su lugar.
    • IgrPaginator
      • Eliminado isFirstPageDisabled y isLastPageDisabled propiedades. Utilice isFirstPage y isLastPage en su lugar.

    18.6.1 (June 2024)

    igniteui-react

    • IgrInput, IgrTextarea- expuesto ValidateOnly para permitir que las reglas de validación se apliquen sin restringir la entrada del usuario.
    • IgrDropdown-positionStrategy property está en desuso. El menú desplegable ahora usa la IgrPopover API para representar su contenedor en la capa superior de la ventana gráfica del navegador, lo que hace que la propiedad quede obsoleta.
    • IgrDockManager-IgrSplitPane isMaximized está en desuso. Tener isMaximized establecido en true en un nivel de panel dividido no tiene ningún efecto real, ya que los paneles divididos solo sirven como contenedores, lo que significa que no tienen contenido real que se muestre maximizado. Utilice la isMaximized propiedad de IgrTabGroupPane y/o IgrContentPane en su lugar.

    igniteui-react-grids

    • DisplayDensity en desuso en favor de la--ig-size propiedad personalizada CSS. Consulte el tema Tamaño de cuadrícula para obtener más información.

    • IgrPivotGrid- La configuración del componente ahora se puede aplicar correctamente.

    igniteui-react-charts (Charts)

    • Agrupación de leyendas de datos y agrupación de información sobre herramientas de datos: se agregó una nueva función de agrupación. La propiedad GroupRowVisible alterna la agrupación con cada serie que opta por esta puede asignar texto de grupo a través de la DataLegendGroup propiedad. Si se aplica el mismo valor a más de una serie, aparecerán agrupadas. Útil para grandes conjuntos de datos que deben categorizarse y organizarse para todos los usuarios.

    • Selección de gráficos: nuevo estilo de selección de series. Esto se adopta ampliamente en todas las categorías, series financieras y radiales para IgrCategoryChart y IgrDataChart. Se puede hacer clic en las series y se les puede mostrar un color diferente, iluminadas o descoloridas, y enfocar los contornos. Administre qué elementos se ven afectados a través de series individuales o elementos de datos completos. Se admiten varias series y marcadores. Útil para ilustrar diversas diferencias o similitudes entre los valores de un elemento de datos determinado. También SelectedSeriesItemsChanged están SelectedSeriesItems disponibles para obtener ayuda adicional para crear requisitos comerciales sólidos en torno a otras acciones que pueden tener lugar dentro de una aplicación, como una ventana emergente u otra pantalla con análisis de datos basado en la selección.

    • Eje de ángulo de categoría proporcional: nuevos ejes para la serie circular radial en el IgrDataChart, para permitir la creación de gráficos circulares en el permitiendo visualizaciones robustas utilizando toda la potencia agregada del gráfico de datos.

    • Resaltado de mapa de árbol: ahora expone una highlightingMode propiedad que le permite configurar el resaltado de los elementos en el mapa de árbol al pasar el mouse. Esta propiedad toma dos opciones: Brighten donde el resaltado se aplicará solo al elemento sobre el que pasa el mouse, y FadeOthers donde el resaltado del elemento sobre el que se pasa el mouse seguirá siendo el mismo, pero todo lo demás se desvanecerá. Este resaltado está animado y se puede controlar mediante la highlightingTransitionDuration propiedad.

    • Resaltado basado en porcentajes de diagrama de rectángulos: nuevo resaltado basado en porcentajes, que permite a los nodos representar el progreso o el subconjunto de una colección. La apariencia se muestra como un relleno de su color de fondo hasta un valor específico, ya sea por un miembro en el elemento de datos o mediante el suministro de uno nuevo HighlightedItemsSource. Se puede alternar a través highlightedValuesDisplayMode y diseñar a través FillBrushes de.

    • IgrToolbar- Nueva IsHighlighted opción de ToolAction para delinear un borde alrededor de herramientas específicas de elección.

    igniteui-react-gauges (Gauges)

    • IgrRadialGauge
      • Nueva etiqueta para la aguja de reflejos. HighlightLabelText y HighlightLabelSnapsToNeedlePivot se agregaron muchas otras propiedades relacionadas con el estilo para HighlightLabel.

    18.6.0 (March 2024)

    igniteui-react-charts

    • Nuevo filtrado de datos a través de la initialFilter propiedad. Aplique expresiones de filtro para filtrar los datos del gráfico a un subconjunto de registros. Se puede utilizar para profundizar en datos de gran tamaño.

    • XamRadialChart

      • Nuevo modo de etiqueta Por IgrCategoryAngleAxis ahora, expone una LabelMode propiedad que le permite configurar aún más la ubicación de las etiquetas. Esto le permite alternar entre el modo predeterminado seleccionando la Center enumeración o usar el nuevo modo, ClosestPoint que acercará las etiquetas al área de trazado circular.

    igniteui-react-grids

    igniteui-react-gauges

    • IgrRadialGauge
      • Las nuevas propiedades de título/subtítulo. TitleText, SubtitleText aparecerán cerca de la parte inferior del indicador. Además, se agregaron las diversas propiedades de fuente de título/subtítulo, como TitleFontSize, TitleFontFamily, TitleFontStyle, TitleFontWeight y TitleExtent. Finalmente, el nuevo TitleDisplaysValue permitirá que el valor se corresponda con la posición de la aguja.
      • Nuevos OpticalScalingEnabled y OpticalScalingSize propiedades para el IgrRadialGauge. Esta nueva función administrará el tamaño en el que las etiquetas, títulos y subtítulos del medidor tienen un escalado óptico del 100%. Puedes leer más sobre esta nueva función aquí
      • Se ha añadido una nueva aguja de resaltado. HighlightValue y HighlightValueDisplayMode cuando a ambos se les proporciona un valor y una configuración de 'Superposición', esto hará que la aguja principal parezca descolorida y aparecerá una nueva aguja.
    • IgrLinearGauge
      • Se ha añadido una nueva aguja de resaltado. HighlightValue y HighlightValueDisplayMode cuando a ambos se les proporciona un valor y una configuración de 'Superposición', esto hará que la aguja principal parezca descolorida y aparecerá una nueva aguja.
    • IgrBulletGraph
      • La barra de rendimiento ahora reflejará una diferencia entre el valor y el nuevo HighlightValue cuando se HighlightValueDisplayMode aplique a la configuración 'Superposición'. El valor de resaltado mostrará un porcentaje medido filtrado/subconjunto completado como un color relleno, mientras que la apariencia de la barra restante aparecerá difuminada hasta el valor asignado, lo que ilustra el rendimiento en tiempo real.

    igniteui-react

    • New IgrTextarea component
    • Nuevo IgrButtonGroup componente
    • IgrDockManager
      • Propiedad nueva ProximityDock. Si se habilita, los indicadores de acoplamiento no son visibles y el usuario final puede acoplar el panel arrastrado arrastrándolo cerca de los bordes del panel de destino.
      • Propiedad nueva ContainedInBoundaries. Determina si los paneles flotantes se mantienen dentro de los límites del Dock Manager. El valor predeterminado es false.
      • Propiedad nueva ShowPaneHeaders. Determina si los encabezados de panel solo se muestran al pasar el cursor o siempre visibles. El valor predeterminado es always.
    • IgrInput, IgrMaskInput, IgrDateTimeInput, IgrRating
    • IgrInput
    • IgrTree
      • Se ha añadido toggleNodeOnClick una propiedad que determina si al hacer clic en un nodo cambiará su estado expandido o no. false​
    • IgrRating
      • allowReset Añadido. Cuando está habilitado, al seleccionar el mismo valor se restablecerá el componente. Cambio de comportamiento: en versiones anteriores, este era el comportamiento predeterminado del componente de clasificación. Asegúrese de establecer allowReset si necesita mantener este comportamiento en la aplicación.
    • select, IgrDropdown
      • exposed selectedItem, items and groups getters

    Deprecations

    • El IgrForm componente ha quedado obsoleto. Por favor, utilice el elemento de formulario nativo en su lugar.
    • La propiedad y el size atributo han quedado obsoletos para todos los componentes. En su lugar, utilice la--ig-size propiedad personalizada CSS. En el ejemplo siguiente se establece el tamaño del componente de avatar en pequeño:
      .avatar {
    --ig-size: var(--ig-size-small);
}
    • IgrDateTimeInput
    • IgrRangeSlider

    Quitado

    • Se ha eliminado nuestro propio dir atributo que ensombrecía el predeterminado. Este es un cambio que no se rompe.
    • IgrSlider-ariaLabel Propiedad sombreada. Este es un cambio que no se rompe.
    • IgrCheckbox-ariaLabelledBy sombreado. Este es un cambio que no se rompe.
    • IgrSwitch-ariaLabelledBy sombreado. Este es un cambio que no se rompe.
    • IgrRadio-ariaLabelledBy sombreado. Este es un cambio que no se rompe.

    18.5.0 (January 2024)

    igniteui-react-charts (Charts)

    • Filtro de resaltado de gráfico: ahora IgrCategoryChart​ ​IgrDataChart expone una forma de resaltar y animar dentro y fuera de un subconjunto de datos. La visualización de este resaltado depende del tipo de serie. Para las series de columnas y áreas, el subconjunto se mostrará en la parte superior del conjunto total de datos, donde el subconjunto se coloreará con el pincel real de la serie, y el conjunto total tendrá una opacidad reducida. En el caso de las series de líneas, el subconjunto se mostrará como una línea punteada.

    18.4.0 (December 2023)

    igniteui-react-grids (Grid)

    18.3.0 (October 2023)

    igniteui-react-grids (Toolbar - Beta)

    • Se ha agregado la acción de la herramienta Guardar para guardar el gráfico en una imagen a través del portapapeles.

    • La orientación vertical se ha agregado a través de la propiedad de la barra de orientation herramientas. De forma predeterminada, la barra de herramientas es horizontal, ahora la barra de herramientas se puede mostrar en orientación vertical donde las herramientas aparecerán a la izquierda / derecha respetuosamente.

    • Se agregó compatibilidad con íconos SVG personalizados a través del método de la barra de herramientas, lo que mejora aún más la creación de renderImageFromText herramientas personalizadas.

    • Cuadrícula: esta es una nueva cuadrícula multiplataforma completamente funcional e incluye funciones como filtrado, clasificación, plantillas, selección de filas, agrupación de filas, fijación de filas y columnas móviles.

    Componentes obsoletos

    DataGrid - The DataGrid is deprecated, please use Grid

    18.2.0 (June 2023)

    New Components

    • Barra de herramientas- Beta. Este componente es un contenedor complementario para las operaciones de la interfaz de usuario que se utilizará principalmente con nuestros componentes de gráficos. La barra de herramientas se actualizará dinámicamente con un ajuste preestablecido de propiedades y elementos de herramientas cuando se vincule a nuestros componentes IgrDataChart o IgrCategoryChart. Podrá crear herramientas personalizadas para su proyecto que permitirán a los usuarios finales realizar cambios, ofreciendo una cantidad infinita de personalización.

    igniteui-react-charts (Charts)

    18.1.0 (November 2022)

    Se agregaron mejoras significativas a los comportamientos predeterminados y se refinó la API de Gráfico de categorías para que sea más fácil de usar. Estas nuevas mejoras en los gráficos incluyen:

    • Diseños responsivos para la rotación horizontal de etiquetas según el tamaño del navegador/pantalla.
    • Representación mejorada para etiquetas redondeadas en todas las plataformas.
    • Se agregaron propiedades de marcador a StackedFragmentSeries.
    • Se agregó la propiedad shouldPanOnMaximumZoom.
    • Nuevas propiedades del eje de categorías:
      • ZoomMáximoCategoríaRango
      • ZoomMaximumItemSpan
      • ZoomToCategoryRange
      • ZoomToItemSpan
    • Nueva API de agregación de gráficos para agrupar, ordenar y resumir cadenas de categorías y valores numéricos, lo que elimina la necesidad de agregar previamente o calcular datos del gráfico:
      • Descripciones de clasificación inicial
      • Clasificaciones iniciales
      • Ordenar descripciones
      • Grupos iniciales
      • Descripciones de grupo inicial
      • Descripciones de grupo
      • Resúmenes iniciales
      • Descripcionesde resumen inicial
      • ResumenDescripciones
      • Descripciones de clasificación de grupo inicial
      • Clasificación de grupos
      • Descripciones de clasificación de grupos

    [!Note] Chart Aggregation 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.

    igniteui-react-grids (Data Grid)

    16.16.0 (June 2022)

    igniteui-react-charts (Charts)

    • Se agregó el componente DataLegend altamente configurable, que funciona de manera muy similar a IgrLegend, pero muestra valores de series y proporciona muchas propiedades de configuración para filtrar filas de series y columnas de valores, diseñar y formatear valores.
    • Se agregó DataToolTip altamente configurable que muestra valores y títulos de series, así como insignias de leyenda de series en una información sobre herramientas. Esta es ahora la información sobre herramientas predeterminada para todos los tipos de gráficos.
    • Se agregó soporte de animación y transición para Stacked Series. Las animaciones se pueden habilitar estableciendo la propiedad isTransitionInEnabled en verdadero. Desde allí, puede configurar la propiedad transitionInDuration para determinar cuánto tiempo debe tardar en completarse la animación y transitionInMode para determinar el tipo de animación que se lleva a cabo.
    • Se agregó AssigningCategoryStyle el evento, ahora está disponible para todas las series en IgrDataChart. Este evento se controla cuando se desea configurar condicionalmente aspectos de los elementos de la serie, como Fill el color de fondo y el resaltado.
    • Nueva enumeración allowedPositions para CalloutLayer. Se utiliza para limitar dónde se colocarán las llamadas dentro del gráfico. De forma predeterminada, las leyendas se colocan de forma inteligente en el mejor lugar, pero esto solía forzar, por ejemplo, TopLeft, TopRight, BottomLeft o BottomRight.
    • Se agregaron nuevas propiedades de radio de esquina para las capas de anotación; se utiliza para redondear las esquinas de cada una de las leyendas. Tenga en cuenta que ahora se ha agregado un radio de esquina de forma predeterminada.
    • Nueva enumeración horizontalViewScrollbarMode y verticalViewScrollbarMode para habilitar las barras de desplazamiento de varias maneras. Cuando se combina con isVerticalZoomEnabled o isHorizontalZoomEnabled, podrá persistir o aparecer y desaparecer gradualmente en las barras de desplazamiento a lo largo de los ejes para navegar por el gráfico.
    • Nuevo FavorLabellingScaleEnd, determina si el eje debe favorecer la emisión de una etiqueta al final de la escala. Solo compatible con ejes numéricos (por ejemplo, IgrNumericXAxis, IgrNumericYAxis, PercentChangeAxis).
    • El nuevo isSplineShapePartOfRange determina si se incluye la forma de spline en el rango de eje solicitado del eje.
    • Nuevo xAxisMaximumGap, determina el valor máximo permitido para la serie trazada cuando se usa xAxisGap. El espacio determina la cantidad de espacio entre columnas o barras de la serie trazada.
    • El nuevo xAxisMinimumGapSize determina el valor mínimo permitido basado en píxeles para la serie trazada cuando se usa xAxisGap para garantizar que siempre haya algo de espacio entre cada categoría.

    igniteui-react-grids (Data Grid)

    Se agregó una nueva característica: paginación de filas, que se usa para dividir un gran conjunto de datos en una secuencia de páginas que tienen contenido similar. Con la paginación, los datos se pueden mostrar en un número determinado de filas, lo que permite a los usuarios "desplazarse" por sus datos, sin necesidad de una barra de desplazamiento. La interfaz de usuario para la paginación de tablas suele incluir elementos como la página actual, el total de páginas y las flechas o botones Anterior y Siguiente en los que se puede hacer clic que permiten a los usuarios desplazarse por las páginas de datos.

    16.15.1 (December 2021)

    igniteui-react-grids (Data Grid)

    Cuadrícula de datos

    • Se agregó ValueMultiField, de tipo string[], en IgrComboBoxColumn que se usará cuando los elementos del menú desplegable contengan una clave que consta de varios campos.

    [!Note] The following breaking changes were introduced

    • Se cambió la propiedad valueField de tipo cadena [] a cadena.

    igniteui-react-inputs (Inputs)

    Selector de fechas

    • Se cambió el evento ValueChanged a SelectedValueChanged.

    Multi-Column ComboBox

    • Se cambió el evento TextChanged a TextValueChanged.
    • Changed ValueChanged event to SelectedValueChanged.

    16.15.0 (November 2021)

    [!Note] Please ensure package "lit-html": "^2.0.0" or newer is added to your project for optimal compatibility.

    igniteui-react-charts (Charts)

    Esta versión introduce algunas mejoras y simplificaciones en el diseño visual y las opciones de configuración para el mapa geográfico y todos los componentes del gráfico.

    • Se cambió el tipo de propiedad yAxisLabelLocation a YAxisLabelLocation de AxisLabelLocation en IgrFinancialChart e IgrCategoryChart
    • Changed xAxisLabelLocation property's type to XAxisLabelLocation from AxisLabelLocation in IgrFinancialChart
    • Added xAxisLabelLocation property to IgrCategoryChart
    • Se agregó soporte para representar series geográficas de IgrGeographicMap en una leyenda.
    • Added crosshair lines by default in IgrFinancialChart and IgrCategoryChart
    • Added crosshair annotations by default in IgrFinancialChart and IgrCategoryChart
    • Added final value annotation by default in IgrFinancialChart
    • Se agregaron nuevas propiedades en Gráfico de categorías y Gráfico financiero:
    • Se agregaron nuevas propiedades en Gráfico de categorías, Gráfico financiero, Gráfico de datos y Mapa geográfico:
      • markerAutomaticBehavior que permite qué tipo de marcador se asigna a varias series en el mismo gráfico
      • legendItemBadgeShape para configurar la forma de la insignia de todas las series representadas en una leyenda
      • legendItemBadgeMode para configurar la complejidad de la insignia en todas las series de una leyenda
    • Se agregaron nuevas propiedades en Serie en Gráfico de datos y Mapa geográfico:
      • legendItemBadgeShape para configurar la forma de la insignia en series específicas representadas en una leyenda
      • legendItemBadgeMode para configurar la complejidad de la insignia en series específicas en una leyenda
    • Se cambió el trazo de línea en forma de cruz vertical predeterminado de #000000 a #BBBBBB en el gráfico de categorías y las series.
    • Se cambió la forma de los marcadores a círculos para todas las series trazadas en el mismo gráfico. Esto se puede revertir estableciendo la propiedad markerAutomaticBehavior del gráfico en el valor de enumeración SmartIndexed.
    • Formas simplificadas de series en la leyenda del gráfico para mostrar solo círculos, líneas o cuadrados. Esto se puede revertir estableciendo la propiedad legendItemBadgeMode del gráfico en el valor de enumeración MatchSeries.
    • Se modificó la paleta de colores de las series y los marcadores que se muestran en todos los gráficos para mejorar la accesibilidad.
    Pinceles/contornos antiguos Nuevo contorno/pinceles
    #8BDC5C
    #8B5BB1
    #6DB1FF
    #F8A15F
    #EE5879
    #735656
    #F7D262
    #8CE7D9
    #E051A9
    #A8A8B7    		 #8BDC5C
    #8961A9
    #6DB1FF
    #82E9D9
    #EA3C63
    #735656
    #F8CE4F
    #A8A8B7
    #E051A9
    #FF903B

    igniteui-react-grids (Data Grid)

    16.14.0 (April 2021)

    igniteui-react-charts (Charts)

    Esta versión presenta varias opciones de configuración y diseño visual nuevas y mejoradas para todos los componentes del gráfico, por ejemplo IgrDataChart, IgrCategoryChart y IgrFinancialChart.

    • Se modificó la serie Barra/Columna/Cascada para que tenga esquinas cuadradas en lugar de esquinas redondeadas.
    • Se cambiaron los colores de la serie Scatter High Density para la propiedad mínima de calor de #8a5bb1 a #000000
    • Se cambiaron los colores de la serie Scatter High Density para la propiedad Heat Max de #ee5879 a #ee5879
    • Se cambiaron las propiedades NegativeBrush y NegativeOutline de las series Financial/Waterfall de #C62828 a #ee5879.
    • Se cambió el grosor del marcador a 2px desde 1px.
    • Se modificó el relleno del marcador para que coincida con el contorno del marcador para IgrPointSeries, IgrBubbleSeries, IgrScatterSeries, IgrPolarScatterSeries. Puede usar establecer la propiedad markerFillMode en Normal para deshacer este cambio.
    • Etiquetado comprimido para IgrTimeXAxis e IgrOrdinalTimeXAxis
    • Nuevas propiedades del marcador:
      • serie. markerFillMode: se puede configurar en MatchMarkerOutline para que el marcador dependa del contorno.
      • serie. markerFillOpacity: se puede establecer en un valor de 0 a 1
      • serie. markerOutlineMode: se puede configurar en MatchMarkerBrush para que el contorno del marcador dependa del color del pincel de relleno.
    • Propiedad de nueva serie:
      • serie. outlineMode: se puede configurar para alternar la visibilidad del esquema de la serie. Tenga en cuenta que, para Gráfico de datos, la propiedad está en la serie
    • Nuevas propiedades del gráfico que definen el área de sangrado introducidas en la ventana gráfica cuando el gráfico está en el nivel de zoom predeterminado. Un caso de uso común es proporcionar espacio entre los ejes y el primer/último punto de datos. Tenga en cuenta que el computedPlotAreaMarginMode, que se enumera a continuación, establecerá automáticamente el margen cuando los marcadores estén habilitados. Los otros están diseñados para especificar un Double para representar el grosor, donde PlotAreaMarginLeft, etc. ajusta el espacio a los cuatro lados del gráfico:
    • Nuevas propiedades de resaltado
      • cuadro. highlightingMode: establece si las series suspendidas o no suspendidas se desvanecen o iluminan.
      • cuadro. highlightingBehavior: establece si la serie se resalta dependiendo de la posición del mouse, por ejemplo, directamente sobre el elemento más cercano o sobre él.
      • Tenga en cuenta que en versiones anteriores el resaltado se limitaba a desvanecerse al pasar el mouse.
    • Se agregó resaltado de series apiladas, dispersas, polares, radiales y de formas:
    • Se agregaron capas de anotación a las series Apiladas, Dispersas, Polares, Radiales y Formas:
    • Se agregó soporte para anular la fuente de datos de fragmentos de pila individuales dentro de una serie apilada.
    • Se agregaron eventos de estilo personalizados a las series Apilado, Dispersión, Rango, Polar, Radial y Forma.
    • Se agregó soporte para sincronizar automáticamente el zoom vertical con el contenido de la serie.
    • Se agregó soporte para expandir automáticamente los márgenes horizontales del gráfico según las etiquetas iniciales mostradas.
    • Paleta de colores rediseñada de series y marcadores:
    Pinceles/contornos antiguos Nuevo contorno/pinceles
    #7446B9
    #9FB328
    #F96232
    #2E9CA6
    #DC3F76
    #FF9800
    #3F51B5
    #439C47
    #795548
    #9A9A9A    		 #8bdc5c
    #8b5bb1
    #6db1ff
    #f8a15f
    #ee5879
    #735656
    #f7d262
    #8ce7d9
    #e051a9
    #a8a8b7

    Por ejemplo:

    Leyenda del gráfico

    • Se agregó propiedad horizontal orientation a ItemLegend que se puede usar con Bubble, Donut y gráfico circular
    • Se agregó la propiedad legendHighlightingMode: habilita el resaltado de series al pasar el cursor sobre los elementos de la leyenda.

    igniteui-react-maps (GeoMap)

    [!Note] These features are CTP

    • Se agregó soporte para la visualización envolvente del mapa (desplazarse infinitamente horizontalmente)
    • Se agregó soporte para cambiar la visualización de algunas series de mapas mientras se ajusta alrededor del origen de las coordenadas.
    • Se agregó soporte para resaltar la serie de formas.
    • Se agregó soporte para algunas capas de anotaciones para la serie de formas.

    igniteui-react-grids (Data Grid)

    • Added EditOnKeyPress aka Excel-style Editing, instantly begin editing when typing.
    • Se agregó la propiedad EditModeClickAction: de forma predeterminada, se requiere hacer doble clic para ingresar al modo de edición. Esto se puede configurar en SingleClick para permitir que se produzca el modo de edición al seleccionar una nueva celda.
    • Se agregó la propiedad EnterKeyBehaviors, también conocida como navegación estilo Excel (Introducir comportamiento): controla el comportamiento de la tecla Intro, por ejemplo, las opciones son (ninguna, editar, subir, bajar, izquierda, derecha).
    • Se agregó la propiedad EnterKeyBehaviorAfterEdit: mientras está en el modo de edición, esta propiedad controla cuándo se presiona Enter, por ejemplo, las opciones son (se mueve a la celda de abajo, arriba, derecha, izquierda)
    • Added SelectAllRows - method.
    • Selección de rango de filas agregada: con la propiedad GridSelectionMode establecida en MultipleRow, ahora se incluye la siguiente nueva funcionalidad:
      • Haga clic y arrastre para seleccionar filas
      • Mayús y haga clic para seleccionar varias filas.
      • Mayús y presione las teclas de flecha arriba/abajo para seleccionar varias filas.
    • Al presionar la barra espaciadora se alterna la selección de la fila activa a través de la propiedad GridSelectionMode establecida en MultipleRow o SingleRow.
    • Added Column Summaries to Column Options Dialog.

    igniteui-react-inputs (Inputs)

    Selector de fechas

    • showTodayButton: alterna la visibilidad del botón Hoy
    • label: agrega una etiqueta encima del valor de la fecha
    • propiedad placeholder: agrega texto personalizado cuando no se selecciona ningún valor
    • formatString - Customize input date string e.g. (yyyy-MM-dd)
    • dateFormat: especifica si se mostrarán las fechas seleccionadas como LongDate o ShortDate
    • firstDayOfWeek: especifica el primer día de la semana.
    • firstWeekOfYear: especifica cuándo mostrar la primera semana del año, por ejemplo (primera semana completa, primera semana de cuatro días)
    • showWeekNumbers - Toggles Week number visibility
    • minDate y maxDate: límites de fechas, que especifican un rango de fechas seleccionables disponibles.
    • Accesibilidad añadida

    16.12.3 (November 2020)

    igniteui-react-grids (Data Grid)

    [!Note] These breaking changes were introduce in the grid package.

    • Nombre cambiado de PropertyPath

    Se ha cambiado el nombre de la propiedad del componente de cuadrícula de datos propertyPath a field. Esto se aplica a todos los tipos de columnas, descripción de grupo, descripción de clasificación y descripción de resumen.

     <IgrTextColumn field="Name"/>

    import { IgrColumnSummaryDescription, IgrColumnSortDescription, IgrColumnGroupDescription } from 'igniteui-react-grids'
const productCount = new IgrColumnSummaryDescription();
productCount.field = "ProductName";
const colSortDesc = new IgrColumnSortDescription();
colSortDesc.field = "UnitsInStock";
const income = new IgrColumnGroupDescription();
income.field = "Income";

    16.12.2 (April 2020)

    igniteui-react-grids (Data Grid)

    • Nombre cambiado de Live Grid

    El componente de la cuadrícula de datos y los nombres de sus módulos correspondientes han cambiado de "LiveGrid" a "DataGrid".

    [!Note] These breaking changes were introduce in these packages and components only:

    El nuevo código para importar el grid y su módulo correspondiente es:

    import { IgrDataGrid } from "igniteui-react-grids";
import { IgrDataGridModule } from 'igniteui-react-grids';
    • Dependencia de pares requerida para Data Grid

    El componente de cuadrícula de datos requiere el paquete "inputs".

    **npm install --save igniteui-react-inputs**

    16.11.7

    • Declaraciones de importación modificadas

    Las declaraciones de importación se han simplificado para usar solo nombres de paquetes en lugar de rutas completas a clases y enumeraciones de API.

    [!Note] These breaking changes were introduce in these packages and components only:

    Paquetes afectados Componentes afectados
    igniteui-react-excel Biblioteca de Excel
    igniteui-react-spreadsheet Hoja de cálculo
    igniteui-react-maps Mapa geográfico, mapa de árbol
    igniteui-react-gauges Gráfico de viñetas, Medidor lineal, Medidor radial
    igniteui-react-charts Gráfico de categorías, Gráfico de datos, Gráfico de anillos, Gráfico financiero], Gráfico circular, control deslizante de zoom
    igniteui-react-core todas las clases y enumeraciones
    igniteui-react-grids Cuadrícula de datos
    • Código después de los cambios

    Ahora, necesita usar solo nombres de paquetes en lugar de rutas completas a clases y enumeraciones de API.

    Tenga en cuenta también que el nombre del componente Data Grid y sus módulos correspondientes también han cambiado.

    // gauges:
import { IgrLinearGauge } from "igniteui-react-gauges";
import { IgrLinearGaugeModule } from "igniteui-react-gauges";
import { IgrLinearGraphRange } from "igniteui-react-gauges";
import { IgrRadialGauge } from 'igniteui-react-gauges';
import { IgrRadialGaugeModule } from 'igniteui-react-gauges';
import { IgrRadialGaugeRange } from 'igniteui-react-gauges';
import { SweepDirection } from 'igniteui-react-core';
// charts:
import { IgrFinancialChart } from 'igniteui-react-charts';
import { IgrFinancialChartModule } from 'igniteui-react-charts';
import { IgrDataChart } from 'igniteui-react-charts';
import { IgrDataChartCoreModule } from 'igniteui-react-charts';
// maps:
import { IgrGeographicMap } from "igniteui-react-maps";
import { IgrGeographicMapModule } from "igniteui-react-maps";
// grids:
import { IgrLiveGrid } from "igniteui-react-grids";
import { IgrLiveGridModule } from 'igniteui-react-grids';
    • Código antes de los cambios

    Antes, tenías que importar usando rutas completas a clases y enumeraciones de API:

    // gauges:
import { IgrLinearGauge } from "igniteui-react-gauges/ES5/igr-linear-gauge";
import { IgrLinearGaugeModule } from "igniteui-react-gauges/ES5/igr-linear-gauge-module";
import { IgrLinearGraphRange } from "igniteui-react-gauges/ES5/igr-linear-graph-range";

import { IgrRadialGauge } from "igniteui-react-gauges/ES5/igr-radial-gauge";
import { IgrRadialGaugeModule } from "igniteui-react-gauges/ES5/igr-radial-gauge-module";
import { IgrRadialGaugeRange } from "igniteui-react-gauges/ES5/igr-radial-gauge-range";
import { SweepDirection } from "igniteui-react-core/ES5/SweepDirection";

// charts:
import { IgrFinancialChart } from "igniteui-react-charts/ES5/igr-financial-chart";
import { IgrFinancialChartModule } from "igniteui-react-charts/ES5/igr-financial-chart-module";
import { IgrDataChart } from "igniteui-react-charts/ES5/igr-data-chart";
import { IgrDataChartCoreModule } from "igniteui-react-charts/ES5/igr-data-chart-core-module";

// maps:
import { IgrGeographicMap } from "igniteui-react-maps/ES5/igr-geographic-map";
import { IgrGeographicMapModule } from "igniteui-react-maps/ES5/igr-geographic-map-module";

// grids:
import { IgrLiveGrid } from "igniteui-react-grids/ES5/igr-live-grid";
import { IgrLiveGridModule } from 'igniteui-react-grids/ES5/igr-live-grid-module';