Data Analyses — Wizard – DEV Community

This is a submission for the KendoReact Free Components Challenge.

What I Built

I built Data Analyses — Automate Wizard, a small React app that helps users import tabular files (CSV/XLSX), automatically analyzes the dataset, and generates polished, accessible charts and dashboard cards using KendoReact Free Components.

The app’s goal is to let non-technical users get immediate insights from an uploaded spreadsheet:

• auto-detects numeric / date columns,
• suggests the most useful charts and small dashboard cards (totals, averages, top categories),
• aggregates and prepares data for charts (bar, line, pie, donut, area),
• offers a Chart Wizard for manual column-to-chart mapping,
• accepts exported charts (PDF, PNG, SVG) and lets users pin them to the dashboard.

I focused on usability (one-click suggestions + preview), accessibility, and making the analysis pipeline safe (AI only receives a compact column summary / sample, not full PII).

Demo

Screenshots and the Loom video are in the repo README. The video demonstrates uploading a CSV, the AI suggestions panel, auto-generated charts/cards, and the Chart Wizard flow.

Key features

• Upload CSV / XLSX files and preview sample rows.
• Automatic dataset analysis (sample-based) using a generative AI assistant (Gemini) that recommends charts and cards.
• Auto-aggregation helpers (sum/avg/count, time-series aggregation with month-year/year granularity).
• Interactive Chart Wizard integration so users can pick fields and build charts manually if desired.
• Chart gallery: Bar, Line, Area, Pie, Donut (all generated from the same pipeline).
• Upload/export support for images/PDFs (pin exported charts to dashboard).
• Skeletons + progressive UI while parsing/aggregating.
• Lightweight theme scoping so Kendo styling is applied only where needed.

How I used KendoReact components

I used multiple free KendoReact components to build the UI and charts. Key components used in the project:

• Input — file picker UI (from @progress/kendo-react-inputs)

• Chart and chart subcomponents (from @progress/kendo-react-charts):

  • Chart (root)
  • ChartSeries / ChartSeriesItem
  • ChartCategoryAxis / ChartCategoryAxisItem
  • ChartValueAxis / ChartValueAxisItem
  • ChartTitle
  • ChartSeriesLabels
  • ChartTooltip / ChartNoDataOverlay

• ChartWizard (from @progress/kendo-react-chart-wizard) — interactive mapping wizard for users to create charts from table data

• Skeleton (from @progress/kendo-react-indicators) — loading placeholders while files parse

• Tooltip (from @progress/kendo-react-tooltip) — contextual help and quick actions

• (plus some Kendo “intl” helpers where needed for formatting)

Note: many Chart subcomponents are imported from the charts package (e.g., ChartSeriesItem, ChartCategoryAxisItem, etc.). Together they provide the full charting capabilities used across the app.

AI / “Code Smarter, Not Harder” notes

• I used Google Generative AI (Gemini) via a small client wrapper to analyze a sample of the uploaded data (column names + a few sample values and summary stats). The prompt instructs the model to return JSON only with:

  • recommended charts (type, groupBy, metric, aggregation, topN, granularity)
  • recommended small dashboard cards (specs only: field, aggregation, label, format).

• The frontend validates the AI response, then computes actual numbers locally (e.g., sums/averages/top categories) to avoid trusting the model for numeric calculations and to keep the source-of-truth on the client data.

• This approach lets the AI do lightweight analysis and suggestions while the app remains in control of real computations (privacy and correctness).

(If you prefer, this submission is not entered for the Kendo AI Coding Assistant prize — I used Gemini instead. No Nuclia RAG integration is included.)

How to run locally

# clone
git clone https://github.com/MatheusDSantossi/data-analyses-automate.git
cd data-analyses-automate

# install
npm install

# start dev server
npm run dev
# open http://localhost:5173 (Vite default)

Environment

• Add your Gemini key to .env:

VITE_GEMINI_API_KEY=

Notes

• The app uses ExcelJS to read xlsx files and a CSV parser helper for CSV. It also uses Kendo’s default theme — I included an optional scoped theme option so Kendo styles only apply inside the dashboard container.
• For the AI assistant I only send column summaries (no raw rows). If you plan to demo with real data containing PII, please exercise caution.

Judging criteria mapping

• Use of underlying technology — Chart/wizard powered by KendoReact Charts & ChartWizard; Kendo components used for inputs/UX; dataset parsing with ExcelJS; AI-assisted recommendations.
• Usability & User Experience — immediate suggestions, skeletons while parsing, Chart Wizard for manual adjustments, export previews (PDF/Image), responsive grid layout.
• Accessibility — charts have labels and legends, skeletons are presentational only, and UI controls use semantic elements (and aria-* where appropriate).
• Creativity — combining a generative model to suggest charts/cards + a Chart Wizard for manual exploration makes analysis quick while preserving user control.

Files of interest

• src/pages/Dashboard.tsx — main dashboard, AI integration, aggregation orchestration, generated-charts renderer
• src/utils/wizardData.ts — helpers to transform rows into wizard-ready { field, value } arrays and aggregation helpers
• src/utils/aiAnalysis.ts — build prompt, call AI wrapper (getResponseForGivenPrompt) and safe JSON parsing
• src/components/charts/* — BarChart, LineChart, DonutChart, PieChart, AreaChart components (Kendo-powered)
• src/components/Wizard.tsx — ChartWizard integration

Final notes & links