appkit-ui - Using GenieQueryVisualization not working as expected

Aberta
  • Algo errado?
#403 1 comentário 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 3 dias

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
3/5
Tempo estimado
1-2 dias
Facilidade para iniciantes
45/100
Tipo de issue
Bug
Clareza
Razoavelmente clara
Status de atividade
Pouca atividade
Stack de tecnologia
react, typescript
Domínio
frontend

Direção de pesquisa

Comece pela documentação de GenieQueryVisualization e pelo componente de exemplo na issue; em seguida, reproduza o comportamento do aplicativo React independente com os dados queryResult fornecidos. Verifique se os controles da tabela padrão e do tipo de gráfico correspondem ao comportamento documentado do componente; considera-se concluído quando o comportamento esperado de renderização de abas e gráficos estiver confirmado ou claramente documentado.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

Hello,

I am using GenieQueryVisualization component in a standalone react app to render data obtained via the Genie API.

Please see screenshot attached inline.

Image

Two questions:

  1. Is the table always supposed to be rendered by default? I would have expected it to only show when Table tab is clicked.
  2. Not sure why the chart type selection is rendered on the chart?

Thanks,
Amit.

Example component 

import "./App.css";

import { cn, GenieQueryVisualization } from "@databricks/appkit-ui/react";

const exampleSchema = {
  format: "JSON_ARRAY",
  schema: {
    column_count: 5,
    columns: [
      {
        name: "FinancialYear",
        type_text: "DATE",
        type_name: "DATE",
        position: 0,
      },
      {
        name: "ARDRG_Version",
        type_text: "STRING",
        type_name: "STRING",
        position: 1,
      },
      {
        name: "ARDRG_Code",
        type_text: "STRING",
        type_name: "STRING",
        position: 2,
      },
      {
        name: "ARDRG_Description",
        type_text: "STRING",
        type_name: "STRING",
        position: 3,
      },
      {
        name: "AvgLOS_Inpatient",
        type_text: "DOUBLE",
        type_name: "DOUBLE",
        position: 4,
      },
    ],
  },
  total_chunk_count: 1,
  chunks: [{ chunk_index: 0, row_offset: 0, row_count: 4111 }],
  total_row_count: 4111,
  truncated: false,
};

const exampleDataArray = [
  [
    "2026",
    "10.0",
    "I69A",
    "Bone Diseases and Arthropathies, Major Complexity",
    "6.0",
  ],
  [
    "2026",
    "11.0",
    "I69A",
    "Bone Diseases and Arthropathies, Major Complexity",
    "52.0",
  ],
  [
    "2026",
    "8.0",
    "T01A",
    "Infectious and Parasitic Diseases W OR Procedures, Major Complexity",
    "4.0",
  ],
  [
    "2026",
    "8.0",
    "J65A",
    "Trauma to Skin, Subcutaneous Tissue and Breast, Major Complexity",
    "4.0",
  ],
];

function App() {
  const queryResult = {
    manifest: {
      schema: exampleSchema["schema"],
    },
    result: {
      data_array: exampleDataArray,
    },
  };

  return (
    <>
      <section id="center">
        <div style={{ height: 600 }}>
          <GenieQueryVisualization data={queryResult} />
        </div>
      </section>
    </>
  );
}

export default App;

Linguagem predominante
TypeScript
Estrelas
119
Forks
36
Merge médio
4d 16h
PRs com merge (30d)
37

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de databricks/appkit

Todas as issues de databricks/appkit

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.