appkit-ui - Using GenieQueryVisualization not working as expected

Offen
  • Stimmt etwas nicht?
#403 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 3 Tagen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
45/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Ruhig
Tech-Stack
react, typescript
Bereich
frontend

Rechercherichtung

Beginnen Sie mit der Dokumentation zu GenieQueryVisualization und der Beispielkomponente im Issue und reproduzieren Sie anschließend das Verhalten der eigenständigen React-App mit den bereitgestellten queryResult-Daten. Prüfen Sie, ob die Steuerelemente für die Standardtabelle und den Diagrammtyp dem dokumentierten Komponentenverhalten entsprechen; abgeschlossen ist die Aufgabe, wenn das erwartete Verhalten beim Tab- und Diagramm-Rendering bestätigt oder eindeutig dokumentiert ist.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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;

Vorherrschende Sprache
TypeScript
Sterne
119
Forks
36
Ø Merge
4 T. 16 Std.
Gemergte PRs (30 T.)
37

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus databricks/appkit

Alle Issues in databricks/appkit

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.