Ignite UI for React Registro de alterações
Todas as alterações notáveis para cada versão do Ignite UI for React estão documentadas nesta página.
19.3.1 (December 2025)
Correções
| Número do bug | Controle | Descrição |
|---|---|---|
| 33808 | Gráfico de Dados Igr | A escala definida para IntervalType Ticks no TimeAxisInterval não é exibida |
| 34255 | Gráfico de Dados Igr | Marcas de tiques da escala 0,00001 são exibidas sobrepostas umas às outras |
| 38510 | Gráfico de Dados Igr | Suporte a eventos AssigningCategoryStyle para Stacked Series |
Enhancements
Gráficos
Adicionado o evento LabelFormatOverride ao TimeXAxisLabelFormat para que agora você possa sobrescrever a formatação com um evento em todos os níveis de formatação no TimeXAxis.
Ajustei a geração de esquemas para considerar mais itens e aumentar a probabilidade de encontrar valores válidos para propriedades.
19.3.0 (November 2025)
igniteui-react-charts (Charts)
Anotações de Usuários
Em Ignite UI for React, agora você pode anotar comIgrDataChart anotações de slice, strip e point em tempo de execução usando o recurso de anotações para novos usuários. Isso permite que o usuário final adicione mais detalhes ao gráfico, como chamar eventos únicos importantes, como relatórios trimestrais da empresa usando a anotação por fatia, ou eventos com duração usando a anotação em tira. Você também pode indicar pontos individuais na série plotada usando a anotação de pontos ou qualquer combinação dessas três.
Isso é diretamente integrado com as ferramentas disponíveis do.IgrToolbar

Detecção de Colisão para Anotações de Eixos
Capacidade de anotações de eixo para detectar colisões automaticamente e truncar para se ajustar melhor. Para ativar esse recurso, você deve definir as seguintes propriedades:
ShouldAvoidAnnotationCollisionsShouldAutoTruncateAnnotations
igniteui-react-maps (Geographic Map)
- O Azure Map Imagery agora é RTM.
Correções
| Número do bug | Controle | Descrição |
|---|---|---|
| 40136 | Biblioteca do Excel | Exceção FormulaParseException ao carregar um livro de exercícios Excel |
| 40262 | Planilha Igr | #Circularity! é exibido quando há avisos. Solicite para corresponder o Excel - exiba um valor, por exemplo, 0 em vez disso |
| 40458 | Planilha Igr | Ao usar a fonte Arial, a planilha igx corta o texto nas células |
| 40490 | IgrDatePicker | Entradas por Autopreenchimento não dão nenhum efeito para um seletor de data |
19.3.0 (October 2025)
New Components
- Componente adicionado
IgrChatComponent
igniteui-react-grids (Grids)
grid,IgrTreeGrid,IgrHierarchicalGridIntroduzido um novo recurso de mesclagem de células que permite configurar e mesclar células em uma coluna com base nos mesmos dados ou em outra condição personalizada, em uma única célula.
It can be enabled on the individual columns: ```tsx <IgrColumn field="field" merge={true}></IgrColumn> ``` The merging can be configured on the grid level to apply either:onSort- somente quando a coluna está ordenada.always- Sempre, independentemente das operações de dados.```tsx <IgrGrid cellMergeMode="always"> </IgrGrid> ``` The default `cellMergeMode` is `onSort`. The functionality can be modified by setting a custom `mergeStrategy` on the grid, in case some other merge conditions or logic is needed for a custom scenario. It's possible also to set a `mergeComparer` on the individual columns, in case some custom handling is needed for a particular data field.
Adicionou a possibilidade de fixar colunas individuais em um lado específico (início ou fim da grade), para que agora você possa ter fixação dos dois lados. Isso pode ser feito declarativamente, definindo a
pinningPositionpropriedade na coluna:```tsx <IgrColumn field="Col1" pinned={true} pinningPosition="pinningPosition"> </IgrColumn> ``` ```ts pinningPosition = ColumnPinningPosition.End; ``` Or with the API, via optional parameter: ```ts grid.pinColumn('Col1', 0, ColumnPinningPosition.End); grid.pinColumn('Col2', 0, ColumnPinningPosition.Start); ``` If property `pinningPosition` is not set on a column, the column will default to the position specified on the grid's `pinning` options for `columns`.Sorting improvements
- Eficiência aprimorada do algoritmo de classificação usando a transformação schwartziana. Essa é uma técnica, também conhecida como decorar-classificar-desdecorar, que evita recalcular as chaves de classificação associando-as temporariamente aos registros de dados originais.
- Algoritmos de classificação refatorados de recursivos para iterativos.
Melhorias de agrupamento
- Algoritmo de agrupamento refatorado de recursivo para iterativo.
- Operações de agrupamento otimizadas.
Correções
| Número do bug | Controle | Descrição |
|---|---|---|
| 1853 | Lista | removemos variáveis CSS duplicadas em componentes e temas da lista |
| 1871 | Cartão | Consumir cores de temas |
| 1873 | Cartão | Tamanho do avatar no cabeçalho do cartão |
| 1882 | Bater papo | Ações de mensagem não renderizadas após a última mensagem |
| 1885 | Seletor de data | Evento de alteração não emitido para configuração de entrada não editável |
| 1894 | Seletor de data | Problemas ao limpar o valor e a borda do entalhe no tema Material |
19.2.2 (October 2025)
igniteui-react-maps (Geographic Map)
Suporte a imagens do Azure Map
Atualmente, oGeographicMap programa suporta imagens de mapas baseadas em Azure, permitindo que desenvolvedores exibam mapas detalhados e dinâmicos em múltiplos tipos de aplicação. Você pode combinar múltiplas camadas de mapas, visualizar dados geográficos e criar experiências de mapeamento interativas com facilidade.
Observação: O suporte para imagens do Bing Maps está sendo descontinuado. As chaves corporativas existentes ainda podem ser usadas para acessar o Bing Mapas, garantindo que seus aplicativos atuais continuem funcionando enquanto você faz a transição para os mapas do Azure.
Explore alguns dos mapas do Azure disponíveis publicamente aqui.
igniteui-react-charts (Charts)
Novos eventos do Axis Label
Os seguintes eventos foram adicionados paraDataChart permitir que você detecte diferentes operações nos rótulos dos eixos:
LabelMouseDownLabelMouseUpLabelMouseEnterLabelMouseLeaveLabelMouseMoveLabelMouseClick
Eixo Complementar
AdicionaramCompanionAxis propriedades aos eixos X e Y que permitem criar rapidamente um clone de um eixo existente. Quando ativado usando aCompanionAxisEnabled propriedade, isso faz o eixo clonado colocar a posição oposta ao gráfico e você pode então configurar as propriedades desse eixo.
Contornos de inserção RadialPieSeries
Existe uma nova propriedade chamadaUseInsetOutlines para controlar como os contornos sãoIgrRadialPieSeries renderizados. Definir esse valor como true vai inserir os contornos dentro do formato do slice, enquanto um valor falso (padrão) coloca os contornos meio dentro-meio para fora ao longo da borda do formato do slice.
Alterações significativas
- Uma correção foi feita devido a um problema em que as
PlotAreaPositionpropriedades eChartPositionnaIgrChartMouseEventArgsclasse foram invertidas. Isso vai mudar os valores queplotAreaPositionechartPositionretornar.
igniteui-react-grids (Grids)
Conteúdo do sufixo da célula
Adicionou suporte para conteúdo sufixo dentro das células, permitindo adicionar texto ou ícones adicionais ao final do valor da célula e estilizá-lo. A lista completa de propriedades adicionadas para o conteúdo do sufixo da célula está listada abaixo e está disponível naIgrDataGridColumn classe e:CellInfo
suffixTextsuffixTextColorSuffixTextFontsuffixIconNamesuffixIconCollectionNamesuffixIconStrokesuffixIconFillsuffixIconViewBoxLeftsuffixIconViewBoxTopsuffixIconViewBoxWidthsuffixIconViewBoxHeighttextDecoration
Observe que o tamanho máximo disponível para os ícones é 24x24. Você pode fornecer um ícone maior ou menor do que isso, mas precisará definir as configurações da caixa de exibição para dimensioná-lo adequadamente para caber no espaço 24x24 para que fique totalmente visível.
Correções
| Número do bug | Controle | Descrição |
|---|---|---|
| 31624 | IgrCategoryChart |
Redimensionar a janela de contenção doIgrCategoryChart faz com que o gráfico não consiga renderizar a série |
| 27304 | DataChart |
O retângulo de zoom não está posicionado da mesma forma que o retângulo de fundo |
| 37930 | DataChart |
A cor do texto da sobreposição de anotação de dados não funciona |
| 30600 | DoughnutChart |
Nenhuma propriedade textStyle para o gráfico ou a série (o gráfico de pizza tem isso) |
| 38231 | grid |
A coluna desafixada não retornará à posição original se houver colunas ocultas |
| 33861 | Biblioteca do Excel | Adicionar gráfico de linhas corrompe o arquivo Excel para a cultura alemã |
Enhancements
IgrBulletGraph
- Novas
LabelsVisiblepropriedades adicionadas
Gráficos
Novas propriedades adicionadas à DataToolTipLayer, ItemToolTipLayer e CategoryToolTipLayer para auxiliar no styling:
ToolTipBackground,ToolTipBorderBrush, eToolTipBorderThicknessNovas propriedades adicionadas ao DataLegend para ajudar no estilo:
ContentBackground,ContentBorderBrush, eContentBorderThickness. OContentBorderBrusheContentBorderThicknesspadrão é transparente e 0, respectivamente, então, para ver essas bordas, você precisará definir essas propriedades.Adicionei uma nova propriedade ao
IgrChartMouseEventArgschamadoworldPositionque fornece a posição relativa no mundo do mouse. Essa posição será um valor entre 0 e 1 tanto para os eixos X quanto Y dentro do espaço dos eixos.Adicionado
highlightingFadeOpacityaIgrSeriesViewereIgrDomainChart. Isso permite configurar a opacidade aplicada às séries destacadas.Evento de exposição
CalloutLabelUpdatingpara gráficos de domínio.
IgrDataGrid
- Adicionada uma nova propriedade chamada
stopPropagationao DataGrid que impede que eventos do mouse se espalhem para os elementos pais
IgrLinearGauge
- Novas
LabelsVisiblepropriedades adicionadas
19.2.1 (September 2025)
Enhancements
- Adicionado aprimoramento O DatePicker deve atualizar a visualização do calendário ao digitar, como Seletor de Intervalo de Datas 1818
Correções
| Número do bug | Controle | Descrição |
|---|---|---|
| 1831 | Calendário | Estilo de navegação |
| 1833 | Cartão | Estilos de tamanho igc-avatar com fenda em temas suportados |
| 1826 | Combinação | Altura inicial suspensa |
| 1827 | Combinação | Estilos de tamanhos de ícones para o tema Indigo |
| 1834 | DatePicker, DateRangePicker | Estilos desativados |
| 1820 | Entrada | Estilos de slot de prefixo e sufixo para o tema Bootstrap |
| 1824 | Entrada | Estilos de rótulo e borda para o tema Material |
| 1836 | Entrada | Removida a propriedade tabindex substituída |
| 1827 | Selecionar | Estilos de tamanhos de ícones para o tema Indigo |
| 1809 | Interruptor | Usar a nova propriedade de foco do polegar |
| 1837 | Gerenciador de Blocos | Escape incorreto de regex interno |
19.2.0 (August 2025)
- Elementos personalizados associados à forma agora expõem o estado personalizado ig-invalid para estilização com o
:state()seletor CSS. Veja aqui para mais informações - Comportamento de validade de elementos personalizados associados à forma. Agora os elementos tentam imitar
:user-invalide não aplicam estilos inválidos a menos que sejam interagidos pela interface ou por uma invocação de formuláriorequestSubmit()/reset().
Correções
| Número do bug | Controle | Descrição |
|---|---|---|
| 1786 | Entrada | Estado inválido no modo somente leitura |
| 1786 | Entrada | Não é possível estilizar o texto auxiliar |
| 1795 | Cartão | Slotted igc-avatar no tema Indigo |
| 1786 | Combinação | A borda se sobrepõe ao texto do rótulo em estado inválido |
| 1799 | Seletor de data | Estilos de elevação índigo |
| 1783 | Seletor de intervalo de datas | Retornar o foco para a entrada principal nas interações do teclado |
| 1792 | Entrada | Alinhamento de marcador de posição e rótulo no tema Material |
| 1806 | Gaveta de navegação | Atualizar posições relativas, estilos e animação |
| 1786 | Selecionar | Problemas de temas de estado inválido |
| 1797 | Área de texto | Problemas de interação com o tema material |
| 1797 | Área de texto | Comportamento de redimensionamento com parte do sufixo |
| 1775 | Calendário | Preenchimentos de contêiner de modo vertical |
| 1731 | Carrossel | Pausar a rotação automática no foco iniciado pelo ponteiro |
| 1772 | Carrossel | Garantir queonSlideChanged o evento seja emitido quando um slide for alterado |
| 1765 | Seletor de data | Problemas de estilo |
| 1764 | Seletor de intervalo de datas | Bordas e elevação do CSS |
| 1747 | Entrada de arquivo | Bootstrap estilos de sombra de caixa inválidos |
| 1672 | Deslizante | Erro ao definir a propriedade linear em cenários de renderização adiada |
| 1768 | Área de texto | Estilos de estado somente leitura |
| 1755 | Lista suspensa | Tamanho do ícone no tema Bootstrap |
| 1739 | Entradas | Posicionamento de rótulos e lógica de transição no tema Material |
19.1.0 (July 2025)
- Componente - Seletor de intervalo de datas
Breaking Changes
Entrada de arquivo
onChange&onCancelevents detail agora retorna a propriedade do componentefilessubjacente.
Dica de ferramenta
- Eventos de dica de ferramenta não retornarão mais seu
anchoralvo em suadetailpropriedade
Behavioral Changes
Dica de ferramenta
- Mudança de comportamento: O padrão
placementda dica de ferramenta agora é 'bottom'. - Mudança de comportamento: A dica de ferramenta não renderiza um indicador de seta por padrão, a menos que
with-arrowesteja ativado.
Enhancements
- Atualizados os estilos somente leitura da maioria dos componentes associados ao formulário em todos os temas para indicar melhor quando um componente está em um estado somente leitura.
Correções
| Número do bug | Controle | Descrição |
|---|---|---|
| 1710 | Seletor de calendário e data | Substituição de data incorreta para em determinados cenários |
| 1728 | Combinação | Estilos de ícone que não diferenciam maiúsculas de minúsculas em temas |
| 1726 | Entrada | Substitua a borda no tema fluente por uma sombra de caixa |
| 1732 | Entrada | Cor de fundo do estado focado no tema Indigo |
| 1715 | Área de texto | Substituição da altura da etiqueta e da altura do componente |
19.0.1 (July 2025)
Correções
| Número do bug | Controle | Descrição |
|---|---|---|
| 36448 | RadialGauge |
As propriedades de formato de rótulo radial não funcionam. (por exemplo. Título, Subtítulos) |
igniteui-react-charts (Charts)
- Adicionar
MaximumExtenteMaximumExtentPercentagepropriedades para uso com rótulos de eixo.
19.0.0 (April 2025)
igniteui-react-maps (Geographic Map)
[!Note] As of June 30, 2025 all Microsoft Bing Maps for Enterprise Basic (Free) accounts will be retired. If you're still using an unpaid Basic Account and key, now is the time to act to avoid service disruptions. Bing Maps for Enterprise license holders can continue to use Bing Maps in their applications until June 30,2028. For more details please visit:
igniteui-react-charts (Charts)
Adicionado Camadas de anotações de dados do gráfico:
- Camada de banda de anotação de dados
- Camada de linha de anotação de dados
- Camada de correção de anotação de dados
- Camada de fatia de anotação de dados
- Camada de faixa de anotação de dados
A Dica de Dados e a Legenda de Dados expõem
LayoutModepropriedade que você pode usar para dispor o conteúdo da dica ou legenda em uma estrutura de tabela ou layout vertical.A
defaultInteractionpropriedade dos gráficos foi atualizada para incluir uma nova enumeração —DragSelectna qual o Rect de pré-visualização arrastado selecionará os pontos contidos neles.O ValueOverlay e o ValueLayer, além do Anotações de Dados de Gráfico listadas acima agora expõem uma
OverlayTextpropriedade que pode ser usada para sobrepor texto adicional de anotação na área do gráfico. Essa aparência dessas anotações pode ser configurada usando as muitas propriedades prefixadas OverlayText. Por exemplo, aOverlayTextBrushpropriedade configurará a cor do texto sobreposto.Camada de linha de tendência Tipo de série que permite a você aplicar uma única linha de tendência por camada de linha de tendência a uma série específica. Isso permite o uso de várias linhas de tendência em uma única série, pois você pode ter vários tipos de série TrendlineLayer no gráfico.
igniteui-react-dashboards (Dashboards)
- O
IgrDashboardTileagora suporta a propagação das agregações da visualização DataGrid para a visualização do gráfico, como ordenação, agrupamento, filtragem e seleção. Isso é atualmente suportado vinculando oDataSourcede aIgrDashboardTileuma instância deLocalDataSource.
igniteui-react-grids
Alterações significativas
- Agora,
DataGridIgrMultiColumnComboBoxfazem parte do pacote igniteui-react-data-grids.
Enhancements
Barra de ferramentas
- As camadas de valor adicionadas a partir da barra de ferramentas agora aparecem na legenda.
- A ferramenta de redefinição de zoom foi movida para o menu suspenso de zoom.
Gráfico de pizza de dados
- O gráfico agora expõe um
GetOthersContext()método. Isso devolverá o conteúdo da fatia dos "outros".
Correções
| Número do bug | Controle | Descrição |
|---|---|---|
| 25997 | DataGrid |
Os resumos são exibidos apenas para a primeira linha filho agrupada |
| 37023 | DataChart |
As dicas de ferramentas são cortadas/desativadas da tela se o estouro oculto estiver definido. |
| 37685 | IgrSpreadsheet |
Má renderização de números formatados com fonte Arial. |
| 37244 | Biblioteca do Excel | A validação de dados personalizados não está funcionando. |
19.0.0 (April 2025)
[!Note]With 19.0.0 the React product introduces many breaking changes done to improve and streamline the API. Please refer to the full Update Guide.
Removido
IgrCheckboxChangeEventArgsremovido, useIgrCheckboxChangeEventArgsem vez disso.IgrRadioChangeEventArgsremovido, useIgrRadioChangeEventArgsem vez disso.IgrRangeSliderValueremovido, useIgrRangeSliderValueEventArgsem vez disso.ActiveStepChangingArgsremovido, useIgrActiveStepChangingEventArgsem vez disso.ActiveStepChangedArgsremovido, useIgrActiveStepChangedEventArgsem vez disso.
Enhancements
Deslizante
OtitlePosition passo passo passo agora éauto padrão, em vez de ser indefinido, que tem o mesmo comportamento.
Guias
A propriedade igr-tabpanel foi removida.
igr-tab-panel é removido. O igr-tab agora abrange o cabeçalho da guia e o conteúdo da guia em um único componente.
18.9.0 (April 2025)
New Components
- Gerenciador de Blocos
Enhancements
Lista
- Adicionada nova propriedade em
IgrListItemchamadaselected
Acordeão
- Novos eventos
Openadicionados eClose
igniteui-react-grids
- Todas as grades
- Permitir a aplicação de filtragem inicial através da
IgrFilteringExpressionsTreepropriedade
- Permitir a aplicação de filtragem inicial através da
Deprecations
- O
clickedevento dobuttonestá obsoleto. Use o handler nativoonClick.
Correções
| Número do bug | Controle | Descrição |
|---|---|---|
| 25602 | DataGrid |
Carregar um layout com um dos operadores de filtro específicos de data resulta em um erro de console TypeError |
| 28480 | IgrCombo |
Erro de referência indefinido é gerado quando uma fonte de dados é substituída |
| 30319 | DataGrid |
Os registros são classificados apesar de nenhum valor ter sido alterado |
| 32598 | DataGrid |
A multi-seleção não está funcionando corretamente |
| 36374 | IgrInput |
Um valor anterior era associado quando um formulário era enviado em qualquer dispositivo de toque |
18.8.1 (March 2025)
igniteui-react-grids
A tabela a seguir lista as correções de bugs feitas para o conjunto de ferramentas Ignite UI for React para esta versão:
| Número do bug | Controle | Descrição |
|---|---|---|
| 36864 | Grades | Há um caminho de importação incorreto "grids/combined" para o pacote licenciado do react |
18.8.0 (February 2025)
igniteui-react-grids
- Todas as grades
- Adicionado novo
disabledSummariespara as colunas da grade, permitindo que os desenvolvedores pulem alguns resumos - Botão de ação de grade interna encapsulada
- Adicionado novo
igniteui-react
- Adicionei uma nova
allowSplitterDockpropriedade queDockmanagerpermite acoplar diretamente em um split. - Adicionada uma nova
useFixedSizepropriedade para oIgrSplitPanedeDockmanagerque permite um novo comportamento de redimensionamento.
Enhancements
Barra de ferramentas
- Adicionou nova
groupHeaderTextStylepropriedade aIgrToolbareIgrToolPanel. Se ativado, ele se aplicará a todasIgrToolActionGroupHeaderas ações. - Adicionada uma nova propriedade em
IgrToolActionchamadotitleHorizontalAlignment, que controla o alinhamento horizontal do texto do título. - Adicionei uma nova propriedade chamada
IgrToolActionSubPanelitemSpacingque controla o espaçamento entre os itens dentro do painel.
Correções
A tabela a seguir lista as correções de bugs feitas para o conjunto de ferramentas Ignite UI for React para esta versão:
| Número do bug | Controle | Descrição |
|---|---|---|
| 30286 | DataChart |
O conteúdo da dica de ferramenta da série de bolhas é alternado para os dados de bolhas próximas ao clicar em uma bolha |
| 32906 | DataChart |
DataChartestá mostrando dois eixos x no topo |
| 33605 | DataChart |
ScatterLineSeries não está mostrando a cor da linha corretamente na legenda |
| 34776 | DataChart |
Mostrar e esconder repetidamente oDataChart problema causa vazamento de memória no JS Heap |
| 35498 | DataChart |
As dicas de ferramentas para a série especificada em IncludedSeries não são exibidas |
| 34324 | grid |
A condição de ocultação de coluna no modelo de grade não está funcionando |
| 34678 | grid |
Valores de enumeração forçados a cadeias de caracteres, interrompendo o comportamento numérico esperado em algumas propriedades da grade |
| 32093 | IgrPivotGrid |
PivotDateDimensionOptions não são aplicadas ao PivotDateDimension |
| 34053 | RadialGauge |
A posição do rótulo da escala é deslocada |
| 35496 | IgrSpreadsheet |
Erro ao definir estilos no Excel com imagens |
| 36176 | Biblioteca do Excel | Ocorre uma exceção ao carregar uma pasta de trabalho do Excel que tem uma função LET |
| 36379 | Biblioteca do Excel | As cores com qualquer canal alfa em uma pasta de trabalho do Excel não são carregadas |
| 26218 | Biblioteca do Excel | A margem direita da área de plotagem do gráfico torna-se mais estreita e o padrão de preenchimento e o primeiro plano de preenchimento desaparecem apenas carregando um arquivo do Excel |
| 34083 | Biblioteca do Excel | TextOperatorConditionalFormat's não é carregado/salvo corretamente se o texto contiver = em um arquivo de modelo do Excel |
| 35495 | Biblioteca do Excel | As imagens nas células são perdidas quando um arquivo de modelo é carregado |
18.7.7 (January 2025)
- Correções
igniteui-react-grids
- Todas as grades
- Corrigido um vazamento de memória crítico quando os componentes são abertos em várias guias duplicadas do navegador.
18.7.6 (December 2024)
igniteui-react-charts (Charts)
Bloco de painel
- O novo componente Dashboard Tile é um controle de contêiner que analisa e visualiza uma coleção ItemsSource associada ou um ponto único e retorna uma visualização de dados apropriada com base no esquema e na contagem dos dados. Esse controle utiliza um componente interno da barra de ferramentas para permitir que você faça alterações na visualização em tempo de execução, permitindo que você veja muitas visualizações diferentes de seus dados com o mínimo de código.
igniteui-react-charts (Inputs)
- O Color Editor pode ser usado como um seletor de cores autônomo e agora está integrado ao ToolAction do componente Barra de ferramentas para atualizar visualizações em tempo de execução.
18.7.4 (November 2024)
Geral
- Novo componente Carrossel.
IgrInput- Alterou
changeo tipo de argumento de evento deIgrComponentDataValueChangedEventArgsparaIgrComponentValueChangedEventArgs
- Alterou
18.7.0 (September 2024)
igniteui-react-charts (Charts)
Novo Gráfico de Pizza de Dados- É
IgrDataPieChartum novo componente que gera um gráfico de pizza. Esse componente funciona de forma semelhante,IgrCategoryChartpois detecta automaticamente as propriedades do seu modelo de dados subjacente, permitindo o suporte à seleção, destaque, animação e legendas via o componente ItemLegend.Novo Eixo de Ângulo de Categoria Proporcional- Novos eixos para a Série de Pizzas Radiais no
IgrDataChart, para plotar fatias semelhantes a um gráfico de pizza, um tipo de visualização de dados onde os pontos de dados são representados como segmentos dentro de um gráfico circular.-
Nova ToolActionCheckboxList Uma nova CheckboxList ToolAction que exibe uma coleção de itens com caixas de seleção para seleção. Uma grade dentro de ToolAction CheckboxList cresce em altura até 5 itens e, em seguida, uma barra de rolagem é exibida. Requer que IgrCheckboxListModule seja registrado.
Novo suporte de filtragem
Alterações no campo do eixo Novo IconMenu padrão na barra de ferramentas ao direcionar CategoryChart. Os campos de rótulo são mapeados para o eixo X e os campos de valor são mapeados para o eixo Y. O gráfico de destino reage em tempo real às alterações feitas. IconMenu fica oculto quando o gráfico não tem ItemsSource definido.
igniteui-react
- Novo componente Banner.
- Novo componente DatePicker.
- Novo
IgrDividercomponente. - Adicionado suporte para eventos nativos a todos os componentes.
IgrIcon- Método adicionado
setIconRef. Isso permite registrar e substituir ícones por arquivos SVG. - Todos os componentes agora usam ícones por referência internamente para que seja fácil substituí-los sem fornecer explicitamente modelos personalizados.
- Método adicionado
IgrCombo,DatePicker,IgrDialogIgrDropdown,ExpansionPanel,IgrNavDrawer,IgrToastIgrSnackbar IgrSelectComponent- Alternar métodos
show,hide,togglemétodos retornam verdadeiro agora ao ter sucesso, caso contrário falso.
- Alternar métodos
- IgrButtonComponent,
IgrIconButton,IgrCheckboxIgrSwitch,,IgrCombo,IgrDateTimeInput,IgrInputIgrMaskInputIgrRadio IgrSelectComponent,IgrTextarea- Costumes
focuseblureventos obsoletos. Use o nativoonFocuseonBlureventos em vez disso
- Costumes
IgrRadioGroup
Alterações significativas
- Renomeado o antigo IgrDatePicker para IgrXDatePicker.
- Componente removido
Form. Use a forma nativa em vez disso. - Propriedade removida
sizeem favor da--ig-sizepropriedade personalizada CSS para os seguintes componentes:IgrAvatar, IgrButtonComponent,IgrIconButtonIgrCalendar,IgrChip,IgrDropdown,,,IgrIconIgrInputIgrListIgrRatingIgrSnackbarIgrTabsIgrTree
IgrBadge,IgrChip,IgrLinearProgress,IgrCircularProgress- Tipo de propriedade renomeado
VariantparaStyleVariant.
- Tipo de propriedade renomeado
IgrCalendar- Tipo de propriedade renomeado
WeekStartparaWeekDays.
- Tipo de propriedade renomeado
IgrCheckbox,IgrSwitch- Alterado
changeo tipo de argumento do evento deIgrComponentBoolValueChangedEventArgsparaIgrCheckboxChangeEventArgs.
- Alterado
IgrCombo, IgrSelectComponent- Removido
positionStrategy,flip,propriedadesameWidth.
- Removido
IgrDateTimeInput- Removido
maxValueeminValuepropriedades. Usemaxeminem seu lugar.
- Removido
IgrDropdown- Propriedade removida
positionStrategy.
- Propriedade removida
IgrInput- Removi nomes
maxlengthantigos eminlengthpropriedades. UsemaxLengtheminLength. - Removi nomes
readonlyantigos einputmodepropriedades. UsereadOnlyeinputMode. - Também mudou
inputModede tipo parastring.
- Removi nomes
IgrRadio- Alterado
changeo tipo de argumento do evento deIgrComponentBoolValueChangedEventArgsparaIgrRadioChangeEventArgs.
- Alterado
IgrRangeSlider- Removido
ariaThumbLowereariaThumbUpperpropriedades. UsethumbLabelLowerethumbLabelUpperem seu lugar.
- Removido
IgrRating- Renomeado
readonlypropriedade parareadOnly.
- Renomeado
igniteui-react-grids
- Todas as grades
- Adicionado um novo
RowClickevento.
- Adicionado um novo
IgrPivotGrid- Propriedade adicionada
sortablepara umIgrPivotDimension. - Adicionei layout horizontal. Pode ser ativado dentro da nova
pivotUIpropriedade comorowLayouthorizontal. - Adicionei resumos de dimensões de linha apenas para layout horizontal. Pode ser ativado para cada
IgrPivotDimensionum definindohorizontalSummarycomo verdadeiro. - Adicionada
horizontalSummariesPositionpropriedade àpivotUIposição, configuração de resumos horizontais. - Adicionaram cabeçalhos de linha para as dimensões das linhas. Pode ser ativado dentro da nova
pivotUIpropriedade comoshowHeadersverdadeiro. - A navegação pelo teclado agora pode se mover para cabeçalhos de linha para frente e para trás de qualquer cabeçalho de dimensão de linha ou cabeçalho de coluna.
- Adicionadas interações de teclado para recolher dimensão de linha usando ALT + ← → ↓ ↑ setas e classificação de cabeçalhos de linha usando CTRL + ↑ ↓ setas.
- Propriedade adicionada
Alterações significativas
- Todas as grades
IgrRowIsland- Removi
displayDensitypropriedades obsoletas. - Renomeado
actualColumns,contentColumnspropriedades paraactualColumnListecontentColumnList. UsecolumnsnossacolumnListpropriedade para conseguir todas as colunas agora. - Renomeado
rowDeleteerowAddtipo de argumento de evento paraIgrRowDataCancelableEventArgs. - Renomeado
contextMenutipo de argumento de evento paraIgrGridContextMenuEventArgs. - Removidos
IgrGridEditEventArgs,IgrGridEditDoneEventArgseventosIgrPinRowEventArgsrowIDeprimaryKeypropriedades. UserowKeyem vez disso.
IgrPivotGrid- Propriedade removida
showPivotConfigurationUI. UsepivotUIe coloque dentro dele a novashowConfigurationopção.
- Propriedade removida
IgrColumn- Propriedade removida
movable. Use a propriedade damovingGrid agora. - Propriedade removida
columnChildren. UsechildColumnsem vez disso.
- Propriedade removida
columnGroup- Propriedade removida
children. UsechildColumnsem vez disso.
- Propriedade removida
IgrPaginator- Removido
isFirstPageDisabledeisLastPageDisabledpropriedades. UseisFirstPageeisLastPageem seu lugar.
- Removido
18.6.1 (June 2024)
igniteui-react
IgrInput,IgrTextarea- expostovalidateOnlypara permitir a aplicação de regras de validação sem restringir a entrada do usuário.IgrDropdown-IgrPositionStrategypropriedade está obsoleta. O menu suspenso agora usa aPopoverAPI para renderizar seu contêiner na camada superior da viewport do navegador, tornando a propriedade obsoleta.IgrDockManager-IgrSplitPaneisMaximizedestá obsoleto. Ter o isMaximized definido como true em um nível de painel dividido não tem efeito real, pois os painéis divididos servem apenas como containers, ou seja, não têm conteúdo real a ser mostrado como maximizado. Use aisMaximizedpropriedade deIgrTabGroupPanee/ouIgrContentPaneem vez disso.
igniteui-react-grids
DisplayDensityobsoleto em favor da--ig-sizepropriedade personalizada CSS. Confira o tópico Tamanho da Grade para mais informações.IgrPivotGrid- A configuração do componente agora pode ser aplicada corretamente.
igniteui-react-charts (Charts)
Agrupamento de Legendas de Dados & Agrupamento de Dicas de Dados- Nova funcionalidade de agrupamento adicionada. A propriedade
GroupRowVisiblealterna o agrupamento com cada série que opta pode atribuir texto de grupo via adataLegendGrouppropriedade. Se o mesmo valor for aplicado a mais de uma série, elas aparecerão agrupadas. Útil para grandes conjuntos de dados que precisam ser categorizados e organizados para todos os usuários.Seleção de Chart- Novo estilo de seleção de séries. Isso é amplamente adotado em todas as categorias, financeiras e séries radiais para
IgrCategoryCharteIgrDataChart. As séries podem ser clicadas e mostradas em uma cor diferente, clareadas ou desbotadas, e contornos de foco. Gerencie quais itens são afetados por meio de séries individuais ou itens de dados inteiros. São suportados múltiplas séries e marcadores. Útil para ilustrar várias diferenças ou semelhanças entre valores de um determinado item de dados. TambémSelectedSeriesItemsChangedeventos eselectedSeriesItemsestão disponíveis para ajuda adicional para construir requisitos de negócios robustos relacionados a outras ações que podem ocorrer dentro de um aplicativo, como um pop-up ou outra tela com análise de dados baseada na seleção.Eixo do Ângulo de Categoria Proporcional- Novos eixos para a Série de Pizzas Radiais no
IgrDataChart, para permitir a criação de gráficos de pizza e visualizações robustas usando toda a potência adicional do gráfico de dados.Realce de Treemap- Agora expõe uma
highlightingModepropriedade que permite configurar o realce com o mouse sobre os itens no mapa em árvore. Essa propriedade aceita duas opções:Brightenonde o destaque se aplica apenas ao item sobre o qual você passa o mouse com o mouse, eFadeOthersonde o destaque do item flutuado permanecerá o mesmo, mas todo o resto desaparecerá. Esse destaque é animado e pode ser controlado usando a propriedadehighlightingTransitionDuration.Destaque baseado em porcentagem em treemap- Nova realce baseada em porcentagem, permitindo que nós representem progresso ou subconjunto de uma coleção. A aparência é mostrada como um preenchimento da cor de fundo até um valor específico, seja por um membro do seu item de dados ou fornecendo um novo
highlightedDataSource. Pode ser alternado ehighlightedValuesDisplayModeestilizado assimFillBrushes.IgrToolbar- NovaIsHighlightedopção para o ToolAction para delinear uma borda em torno de ferramentas específicas de sua escolha.
igniteui-react-gauges (Gauges)
IgrRadialGauge- Nova etiqueta para a agulha de iluminação.
highlightLabelTextehighlightLabelSnapsToNeedlePivotmuitas outras propriedades relacionadas ao estilo para o HighlightLabel foram adicionadas.
- Nova etiqueta para a agulha de iluminação.
18.6.0 (March 2024)
igniteui-react-charts
Filtragem de novos dados via a
initialFilterpropriedade. Aplique expressões de filtro para filtrar os dados do gráfico para um subconjunto de registros. Pode ser usado para aprofundar grandes volumes de dados.XamRadialChart- Novo Modo de Rótulo O
IgrCategoryAngleAxispara o agora expõe umalabelModepropriedade que permite configurar ainda mais a localização dos rótulos. Isso permite alternar entre o modo padrão selecionando oCenterenum, ou usar o novo modo,ClosestPointque aproxima as etiquetas da área circular do plot.
- Novo Modo de Rótulo O
igniteui-react-grids
- Novo componente [
IgrHierarchicalGrid](grades/hierarchical-grade/overview.md)
igniteui-react-gauges
IgrRadialGauge- Novas propriedades
titleTextsubtitleTextde título/legenda aparecerão perto da parte inferior do medidor. Além disso, foram adicionadas várias propriedades de fonte de título/legendas, comoTitleFontSize,TitleFontFamilyTitleFontStyle,,TitleFontWeightetitleExtent. Por fim, o novotitleDisplaysValuepermitirá que o valor corresponda à posição da agulha. - Novas
opticalScalingEnabledeopticalScalingSizepropriedades para oIgrRadialGauge. Esse novo recurso gerenciará o tamanho em que rótulos, títulos e legendas do medidor têm 100% de escala óptica. Você pode ler mais sobre esse novo recurso neste tópico - Uma nova agulha de iluminação foi adicionada.
highlightValueehighlightValueDisplayModequando ambos recebem um valor e uma configuração de 'Overlay', isso fará com que a agulha principal pareça desbotada e uma nova agulha aparecerá.
- Novas propriedades
IgrLinearGauge- Uma nova agulha de iluminação foi adicionada.
highlightValueehighlightValueDisplayModequando ambos recebem um valor e uma configuração de 'Overlay', isso fará com que a agulha principal pareça desbotada e uma nova agulha aparecerá.
- Uma nova agulha de iluminação foi adicionada.
IgrBulletGraph- A barra de desempenho agora refletirá uma diferença entre o valor e o novo
highlightValuequando aplicadohighlightValueDisplayModeà configuração 'Overlay'. O valor de destaque mostrará uma porcentagem filtrada/subconjunto completado medido como uma cor preenchida, enquanto a aparência da barra restante aparecerá desbotada para o valor atribuído, ilustrando o desempenho em tempo real.
- A barra de desempenho agora refletirá uma diferença entre o valor e o novo
igniteui-react
- Novo
IgrTextareacomponente - Novo
IgrButtonGroupcomponente IgrDockManager- Nova
proximityDockpropriedade. Se ativado, os indicadores de acoplamento não ficam visíveis e o usuário final pode acoplar o painel arrastado arrastando-o para perto das bordas do painel de destino. - Nova
containedInBoundariespropriedade. Determina se os painéis flutuantes são mantidos dentro dos limites do Dock Manager. É o padrão parafalseisso. - Nova
showPaneHeaderspropriedade. Determina se os cabeçalhos do painel são mostrados apenas ao passar o mouse ou sempre visíveis. É o padrão paraalwaysisso.
- Nova
IgrInput,IgrMaskInput,IgrDateTimeInput,IgrRatingReadonlyfoi renomeado parareadOnly
IgrInputIgrTree- Propriedade adicionada
toggleNodeOnClickque determina se clicar sobre um nó mudará seu estado expandido ou não. Padrão parafalse.
- Propriedade adicionada
IgrRatingallowResetadicionado. Quando ativado, selecionar o mesmo valor resetará o componente. Mudança de comportamento– Em versões anteriores, esse era o comportamento padrão do componente de avaliação. Certifique-se de definirallowResetse você precisa manter esse comportamento na sua aplicação.
select,IgrDropdown- expostos
selectedItemitemsegroupscaptadores
- expostos
Deprecations
- O
Formcomponente foi obsoleto. Por favor, use o elemento de forma nativo em vez disso. - A
sizepropriedade e o atributo foram obsoletos para todos os componentes. Use a--ig-sizepropriedade personalizada CSS em vez disso. O exemplo a seguir define o tamanho do componente avatar para pequeno:.avatar { --ig-size: var(--ig-size-small); } IgrDateTimeInputIgrRangeSliderAriaLabelLowereAriaLabelUpperpropriedades foram obsoletas. Por favor, usethumbLabelLowerethumbLabelUpperem vez disso.
Removido
- Removemos nosso próprio
diratributo que sombreava o padrão. Essa é uma mudança inquebrável. IgrSlider-ariaLabelPropriedade ensombrada. Essa é uma mudança inquebrável.IgrCheckbox-ariaLabelledByatributo sombrio. Essa é uma mudança inquebrável.IgrSwitch-ariaLabelledByatributo sombrio. Essa é uma mudança inquebrável.IgrRadio-ariaLabelledByatributo sombrio. Essa é uma mudança inquebrável.
18.5.0 (January 2024)
igniteui-react-charts (Charts)
- Filtro de Destaque de Gráfico- O
IgrCategoryCharteIgrDataChartagora expõe uma forma de destacar e animar dentro e fora de um subconjunto de dados. A exibição desse destaque depende do tipo de série. Para séries de colunas e áreas, o subconjunto será mostrado sobre o conjunto total de dados, onde o subconjunto será colorido pelo pincel real da série, e o conjunto total terá opacidade reduzida. Para séries de linhas, o subconjunto será mostrado como uma linha pontilhada.
18.4.0 (December 2023)
igniteui-react-grids (Grid)
- Adicionados novos recursos -Persistência de estado
18.3.0 (October 2023)
igniteui-react-grids - Toolbar -
A ação da ferramenta Salvar foi adicionada para salvar o gráfico em uma imagem por meio da área de transferência.
A orientação vertical foi adicionada via propriedade da
orientationbarra de ferramentas. Por padrão, a barra de ferramentas é horizontal, agora a barra pode ser mostrada na orientação vertical, onde as ferramentas aparecem para a esquerda/direita respectivamente.O suporte a ícones SVG personalizados foi adicionado pelo método da
renderImageFromTextbarra de ferramentas, aprimorando ainda mais a criação de ferramentas personalizadas.Grade- Esta é uma nova grade multiplataforma totalmente funcional e inclui recursos como filtragem, classificação, modelos, seleção de linhas, agrupamento de linhas, fixação de linhas e colunas móveis.
Componentes obsoletos
18.2.0 (June 2023)
New Components
- Barra de Ferramentas- Este componente é um contêiner companheiro para operações de interface a serem usados principalmente com nossos componentes de gráficos. A barra de ferramentas será atualizada dinamicamente com um pré-definido de propriedades e itens da ferramenta quando vinculada aos nossos
IgrDataChartcomponentes ouIgrCategoryChartOR. Você poderá criar ferramentas personalizadas para seu projeto, permitindo que os usuários finais façam alterações, oferecendo uma quantidade infinita de personalização.
igniteui-react-charts (Charts)
ValueLayer- Um novo tipo de série chamado the
IgrValueLayeragora é exposto, permitindo renderizar uma sobreposição para diferentes pontos focais dos dados plotados, como Máximo, Mínimo e Média. Isso é aplicado aoIgrCategoryCharteIgrFinancialChartao adicionar à novavalueLinescoleção.Agora é possível aplicar um array de traços às diferentes partes da série do
IgrDataChart. Você pode aplicar isso às séries traçadas no gráfico, às linhas de grade do gráfico e às linhas de tendência das séries traçadas no gráfico.
18.1.0 (November 2022)
Adicionadas melhorias significativas aos comportamentos padrão e refinadas a API de Gráfico de Categorias para facilitar o uso. Essas novas melhorias no gráfico incluem:
- Layouts responsivos para rotação horizontal de rótulos com base no tamanho do navegador/tela.
- Renderização aprimorada para rótulos arredondados em todas as plataformas.
- Adicionadas propriedades de marcador a StackedFragmentSeries.
- Propriedade adicionada
shouldPanOnMaximumZoom. - Novas propriedades do eixo de categoria:
- ZoomMaximumCategoryRange
- ZoomMaximumItemSpan
- ZoomToCategoryRange
- ZoomToItemSpan
- Nova API de agregação de gráficos para agrupar, classificar e resumir valores numéricos e de cadeia de caracteres de categoria, eliminando a necessidade de pré-agregar ou calcular dados de gráficos:
- Descrições iniciais
- InicialClassificações
- SortDescriptions
- Grupos iniciais
- Descrições iniciais do grupo
- GroupDescriptions
- Resumos iniciais
- InitialSummaryDescriptions
- ResumoDescrições
- InitialGroupSortDescriptions
- Classificações de grupo
- GroupSortDescriptions
[!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)
- Mudou IgrColumn para
IgrDataGridColumn - Mudou GridCellEventArgs para
IgrDataGridCellEventArgs - Mudei o GridSelectionMode para
DataGridSelectionMode - ResumoOperando alterado para
DataSourceSummaryOperand
16.16.0 (June 2022)
igniteui-react-charts (Charts)
- Adicionei o componente DataLegend, altamente configurável, que funciona de forma muito semelhante
IgrLegend, mas mostra valores de série e fornece muitas propriedades de configuração para filtrar linhas de séries e colunas de valores, estilização e formatação. - Adicionado o DataToolTip altamente configurável, que exibe valores e títulos de séries, bem como emblemas de legenda de séries em uma dica de ferramenta. Esta é agora a dica de ferramenta padrão para todos os tipos de gráfico.
- Adicionei suporte a animação e transição para Stacked Series. Animações podem ser ativadas definindo a
isTransitionInEnabledpropriedade como true. A partir daí, você pode definir atransitionInDurationpropriedade para determinar quanto tempo sua animação deve levar para ser concluída etransitionInModedepois determinar o tipo de animação que acontece. - Evento adicionado
AssigningCategoryStyle, agora disponível para todas as séries emIgrDataChart. Esse evento é tratado quando você deseja configurar condicionalmente aspectos dos itens da série, comoFillcor de fundo e destaque. - Nova
allowedPositionsenumeração para o CalloutLayer. Usado para limitar onde as chamadas devem ser colocadas dentro do gráfico. Por padrão, as chamadas são colocadas inteligentemente no melhor lugar, mas isso costumava forçar, por exemploTopLeft,TopRight,BottomLeftouBottomRight. - Novas propriedades de raio de canto adicionadas para Camadas de anotação; usado para arredondar os cantos de cada uma das chamadas. Observe que um raio de canto agora foi adicionado por padrão.
calloutCornerRadiuspara CalloutLayeraxisAnnotationBackgroundCornerRadiuspara FinalValueLayerxAxisAnnotationBackgroundCornerRadiuseyAxisAnnotationBackgroundCornerRadiuspara CrosshairLayer
- Novos
horizontalViewScrollbarModeeverticalViewScrollbarModeenumeração para habilitar barras de rolagem de várias maneiras. Quando combinado comisVerticalZoomEnabledo ou,isHorizontalZoomEnabledvocê poderá persistir ou fazer fade in e out das barras de rolagem ao longo dos eixos para navegar pelo gráfico. - Nova
FavorLabellingScaleEnd, determina se o eixo deve favorecer a emissão de um rótulo no final da escala. Compatível apenas com eixos numéricos (por exemploIgrNumericXAxis, ).IgrNumericYAxisPercentChangeAxis - New
isSplineShapePartOfRangedetermina se deve incluir a forma da spline no intervalo de eixos solicitado ao eixo. - Novo
xAxisMaximumGap, determina o valor máximo permitido para a série plotada ao ser utilizadaxAxisGap. O espaço determina a quantidade de espaço entre colunas ou barras de séries plotadas. - Nova
xAxisMinimumGapSize, determina o valor mínimo permitido baseado em pixels para a série plotada ao usarxAxisGap, garantindo que sempre haja algum espaçamento entre cada categoria.
igniteui-react-grids (Data Grid)
Adicionado novo recurso -Paginação de linha, que é usado para dividir um grande conjunto de dados em uma sequência de páginas com conteúdo semelhante. Com a paginação, os dados podem ser exibidos em um determinado número de linhas, permitindo que os usuários "rolem" por seus dados, sem precisar de uma barra de rolagem. A interface do usuário para paginação de tabela geralmente inclui coisas como a página atual, o total de páginas e setas/botões clicáveis Anterior e Próximo que permitem que os usuários percorram as páginas de dados.
16.15.1 (December 2021)
igniteui-react-grids (Data Grid)
Grade de dados
- Adicionado
ValueMultiField, de tipo string[], noIgrComboBoxColumnpara ser usado quando seus itens no menu suspenso contêm uma chave composta por múltiplos campos.
[!Note] The following breaking changes were introduced
- Alterou
valueFielda propriedade de string[] de tipo para string.
igniteui-react-inputs (Inputs)
Seletor de data
- Valor Alterado Evento para
SelectedValueChangedAlterado.
Multi-Column ComboBox
- Mudou
TextChangedo evento paraTextValueChanged. - Mudou
ValueChangedo evento paraSelectedValueChanged.
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 versão apresenta algumas melhorias e simplificações no design visual e nas opções de configuração para o mapa geográfico e todos os componentes do gráfico.
- Alterei
yAxisLabelLocationo tipo da propriedade para YAxisLabelLocation de AxisLabelLocation emIgrFinancialCharteIgrCategoryChart - Alterei
xAxisLabelLocationo tipo da propriedade para XAxisLabelLocation a partir de AxisLabelLocation emIgrFinancialChart - Propriedade adicionada
xAxisLabelLocationaIgrCategoryChart - Suporte adicional para representar séries geográficas de
IgrGeographicMapem uma lenda - Adicionadas linhas de mira por padrão em
IgrFinancialCharteIgrCategoryChart - Adicionadas anotações de mira por padrão em
IgrFinancialCharteIgrCategoryChart - Anotação de valor final adicionada por padrão em
IgrFinancialChart - Adicionadas novas propriedades no Gráfico de Categorias e no Gráfico Financeiro:
crosshairsLineThicknesse outras propriedades para personalizar linhas de miracrosshairsAnnotationXAxisBackgrounde outras propriedades para personalizar anotações de mirafinalValueAnnotationsBackgrounde outras propriedades para customizar anotações de valores finaisareaFillOpacityque permitem alterar a opacidade do preenchimento em série (por exemplo, gráfico de área)markerThicknessque permite alterar a espessura dos marcadores
- Adicionadas novas propriedades no Gráfico de Categorias, Gráfico Financeiro, Gráfico de Dados e Mapa Geográfico:
markerAutomaticBehaviorque permite qual tipo de marcador é atribuído a múltiplas séries no mesmo gráficolegendItemBadgeShapepara definir a forma do emblema de todas as séries representadas em uma lendalegendItemBadgeModePara definir a complexidade de distintivos em todas as séries de uma lenda
- Adicionadas novas propriedades em Série no Gráfico de Dados e no Mapa Geográfico:
legendItemBadgeShapepara definir a forma do distintivo em séries específicas representadas em uma lendalegendItemBadgeModepara definir complexidade de distintivos em séries específicas de uma lenda
- Alterado o traçado da linha de mira vertical padrão de #000000 para #BBBBBB no gráfico de categorias e na série
- Mudei a forma dos marcadores para circular em todas as séries plotadas no mesmo gráfico. Isso pode ser revertido definindo a propriedade do
markerAutomaticBehaviorgráfico paraSmartIndexedvalor enum - Formas simplificadas das séries na legenda do gráfico para mostrar apenas círculo, linha ou quadrado. Isso pode ser revertido definindo a propriedade do
legendItemBadgeModegráfico paraMatchSeriesvalor enum - Paleta de cores alterada de séries e marcadores exibidos em todos os gráficos para melhorar a acessibilidade
| Pincéis/contornos antigos | Novo contorno/pincéis |
|---|---|
| #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)
- Novos recursos adicionados:
- New API:
- Evento adicionado
SelectionChanged. Usado para detectar mudanças em interações de seleção, por exemplo, seleção de múltiplas linhas.
- Evento adicionado
- Alterações significativas:
- Mudei o tipo da propriedade Resumescopo da grade para ResumoEscopo de
DataSourceSummaryScope - Alterado o tipo da propriedade GroupHeaderDisplayMode para GroupHeaderDisplayMode de
DataSourceSectionHeaderDisplayMode
- Mudei o tipo da propriedade Resumescopo da grade para ResumoEscopo de
16.14.0 (April 2021)
igniteui-react-charts (Charts)
Esta versão introduz várias opções novas e aprimoradas de design visual e configuração para todos os componentes do gráfico, por exemploIgrDataChart,IgrCategoryChart eIgrFinancialChart.
- Alterada a série de barras/colunas/cascatas para ter cantos quadrados em vez de cantos arredondados
- Alteradas as cores da série Scatter High Density para a propriedade heat min de #8a5bb1 para #000000
- Alteradas as cores da série Scatter High Density para a propriedade de calor máximo de #ee5879 para #ee5879
- Mudanças das séries
NegativeBrushfinanceiras/Waterfall eNegativeOutlinepropriedades de #C62828 para #ee5879 - Alterada a espessura do marcador de 1px para 2px
- Mudei o preenchimento do marcador para corresponder ao contorno do marcador para
IgrPointSeries,IgrBubbleSeries,IgrScatterSeries,IgrPolarScatterSeries. Você pode usar a propriedade de definirmarkerFillModecomo Normal para desfazer essa mudança - Rotulagem comprimida para o
IgrTimeXAxiseIgrOrdinalTimeXAxis - Novas propriedades do marcador:
- série.
markerFillMode- Pode ser definido paraMatchMarkerOutlineque o marcador dependa do contorno - série.
markerFillOpacity- Pode ser definido para um valor de 0 a 1 - série.
markerOutlineMode- Pode ser definido paraMatchMarkerBrushque o contorno do marcador dependa da cor do pincel de preenchimento
- série.
- Propriedade da nova série:
- série.
outlineMode- Pode ser configurado para alternar a visibilidade do contorno da série. Obs: para Data Chart, a propriedade está na série
- série.
- Novas propriedades de gráfico que definem a área de sangramento introduzidas na viewport quando o gráfico está no nível padrão de zoom. Um caso de uso comum é fornecer espaço entre os eixos e o primeiro/último ponto de dados. Note que
computedPlotAreaMarginMode, listado abaixo, definirá automaticamente a margem quando os marcadores forem ativados. Os outros são projetados para especificar aDoublepara representar a espessura, onde PlotAreaMarginLeft, etc., ajusta o espaço para os quatro lados do gráfico:- gráfico.
plotAreaMarginLeft - gráfico.
plotAreaMarginTop - gráfico.
plotAreaMarginRight - gráfico.
plotAreaMarginBottom - gráfico.
computedPlotAreaMarginMode
- gráfico.
- Novas propriedades de realce
- gráfico.
highlightingMode- Conjuntos de séries, sejam pairadas ou não, para desbotar e clarear - gráfico.
highlightingBehavior- Define se a série destaca dependendo da posição do mouse, por exemplo, diretamente sobre ou item mais próximo - Observe que, nas versões anteriores, o realce era limitado ao desvanecimento ao passar o mouse.
- gráfico.
- Adicionadas as séries Destaque Empilhado, Dispersão, Polar, Radial e Forma:
- Adicionadas camadas de anotação às séries Empilhadas, Dispersão, Polares, Radiais e Formas:
- Adição de suporte para substituir a fonte de dados de fragmentos de pilha individuais em uma série empilhada
- Adicionados eventos de estilo personalizado às séries Empilhado, Dispersão, Intervalo, Polar, Radial e Forma
- Adicionado suporte para sincronizar automaticamente o zoom vertical com o conteúdo da série
- Adicionado suporte para expandir automaticamente as margens horizontais do gráfico com base nos rótulos iniciais exibidos
- Paleta de cores redesenhada de séries e marcadores:
| Pincéis/contornos antigos | Novo contorno/pincéis |
|---|---|
| #7446B9 #9FB328 #F96232 #2E9CA6 #DC3F76 #FF9800 #3F51B5 #439C47 #795548 #9A9A9A |
#8bdc5c #8b5bb1 #6db1ff #f8a15f #ee5879 #735656 #f7d262 #8ce7d9 #e051a9 #a8a8b7 |
por exemplo:
![]() |
![]() |
![]() |
![]() |
Legenda do gráfico
- Adicionada uma propriedade horizontal
orientationao ItemLegend que pode ser usada com Bubble, Donut e Pie Chart - Propriedade adicionada
legendHighlightingMode- Permite o destaque da série ao passar o mouse sobre itens de lenda
igniteui-react-maps (GeoMap)
[!Note] These features are CTP
- Adicionado suporte para exibição envolvente do mapa (rolar infinitamente horizontalmente)
- Adicionado suporte para deslocar a exibição de algumas séries de mapas ao envolver a origem da coordenada
- Adicionado suporte para realce da série de formas
- Adicionado suporte para algumas camadas de anotação para a série de formas
igniteui-react-grids (Data Grid)
- Adicionado
EditOnKeyPress, também conhecido como edição no estilo Excel, que começa a editar instantaneamente ao digitar. - Propriedade adicionada
EditModeClickAction- Por padrão, é necessário fazer duplo clique para entrar no modo de edição. Isso pode ser configurado paraSingleClickpermitir que o modo de edição ocorra ao selecionar uma nova célula. - Propriedade adicionada
EnterKeyBehaviors– também conhecida como Navegação no estilo Excel (Comportamento de Entrada) – controla o comportamento da tecla enter, por exemplo: Opções são (nenhum, editar, mover para cima, para baixo, esquerda, direita) - Propriedade adicionada
EnterKeyBehaviorAfterEdit- Enquanto estiver no modo de edição, essa propriedade controla quando enter é pressionado, por exemplo: Opções são (move para a célula abaixo, acima, direita, esquerda) - Adicionado
SelectAllRows- método. - Seleção de Faixa de Linhas Adicionada - Com
GridSelectionModea propriedade definida para MultipleRow, a seguinte nova funcionalidade agora está incluída:- Clique e arraste para selecionar linhas
- SHIFT e clique para selecionar várias linhas.
- SHIFT e pressione as ↑ teclas + ↓ seta para selecionar várias linhas.
- Pressionar a barra de espaço alterna a seleção da linha ativa via
GridSelectionModepropriedade definida para Múltiplas Linhas ou Linha Única - Added Column Summaries to Column Options Dialog.
igniteui-react-inputs (Inputs)
Seletor de data
ShowTodayButton- Alterna a visibilidade do botão Todaylabel- Adiciona um rótulo acima do valor da dataplaceholderPropriedade - adiciona texto personalizado quando nenhum valor é selecionadoFormatString- Personalizar a string de data de entrada, por exemplo (yyyy-MM-dd)DateFormat- Especifica se deve ser exibida datas selecionadas como LongDate ou ShortDateFirstDayOfWeek- Especifica o primeiro dia da semanaFirstWeekOfYear- Especifica quando exibir a primeira semana do ano, por exemplo, (Primeira Semana Completa, Primeira Semana de Quatro Dias)ShowWeekNumbers- Alterna a visibilidade dos números da semanaMinDate&MaxDate- Limites de datas, especificando uma faixa de datas disponíveis para serem selecionadas.- Acessibilidade adicionada
16.12.3 (November 2020)
igniteui-react-grids (Data Grid)
[!Note] These breaking changes were introduce in the grid package.
- Nome alterado de PropertyPath
A propriedadepropertyPath componente da grade de dados foi renomeada parafield. Isso se aplica a todos os tipos de Colunas, Descrição de Grupo, SortDescription e ResumoDescrição.
<IgrTextColumn field="Name"/>
import { IgrColumnSummaryDescription, IgrColumnSortDescription, IgrColumnGroupDescription } from 'igniteui-react-data-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)
- Nome alterado da grade ao vivo
O componente de grade de dados e os nomes dos módulos correspondentes foram alterados de "LiveGrid" para "DataGrid".
[!Note] These breaking changes were introduce in these packages and components only:
O novo código para importar a grade e seu módulo correspondente é:
import { IgrDataGrid } from "igniteui-react-data-grids";
import { IgrDataGridModule } from 'igniteui-react-data-grids';
- Dependência de pares necessária para a grade de dados
O componente de grade de dados requer o pacote "inputs".
**npm install --save igniteui-react-inputs**
16.11.7
- Instruções de importação alteradas
As instruções de importação foram simplificadas para usar apenas nomes de pacotes em vez de caminhos completos para classes e enumerações de API.
[!Note] These breaking changes were introduce in these packages and components only:
| Pacotes afetados | Componentes afetados |
|---|---|
| igniteui-react-excel | Biblioteca do Excel |
| igniteui-react-spreadsheet | Planilha |
| igniteui-react-maps | Mapa geográfico, mapa de árvore |
| igniteui-react-gauges | Gráfico de bala, medidor linear, medidor radial |
| igniteui-react-charts | Gráfico de Categoria, Gráfico de Dados, Gráfico de Rosca, Gráfico Financeiro], Gráfico de Pizza, Controle Deslizante de Zoom |
| igniteui-react-core | Todas as classes e enumerações |
| igniteui-react-grids | Grade de dados |
- Código após alterações
Agora, você precisa usar apenas nomes de pacotes em vez de caminhos completos para classes e enumerações de API.
Observe também que o nome do componente Data Grid e seus módulos correspondentes também foram alterados.
// 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-data-grids";
import { IgrLiveGridModule } from 'igniteui-react-data-grids';
- Código antes das alterações
Antes, você tinha que importar usando caminhos completos para classes e enumerações da 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-data-grids/ES5/igr-live-grid";
import { IgrLiveGridModule } from 'igniteui-react-data-grids/ES5/igr-live-grid-module';



