appkit-ui - Using GenieQueryVisualization not working as expected

Aperta
  • Qualcosa non va?
#403 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 3 giorni

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
45/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Inizia dalla documentazione di GenieQueryVisualization e dal componente di esempio nell’issue, quindi riproduci il comportamento dell’app React standalone con i dati queryResult forniti. Verifica se i controlli della tabella predefinita e del tipo di grafico corrispondono al comportamento documentato del componente; il lavoro è completo quando il comportamento previsto per il rendering delle schede e dei grafici è confermato o documentato chiaramente.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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;

Lingua principale
TypeScript
Stelle
119
Fork
36
Merge medio
4g 16h
PR unite (30g)
37

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di databricks/appkit

Tutte le issue di databricks/appkit

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.