How to Build a Data Visualizations Tools with Lovable

1Create a data visualization app with Supabase. Set up these tables:
2
3- datasets: id, user_id, name, chart_type (line|bar|area|pie), x_label, y_label, color_config (jsonb), created_at
4- data_points: id, dataset_id, label (text), value (numeric), recorded_at (timestamptz), created_at
5
6Enable RLS on both tables.
7For datasets: users can SELECT/INSERT/UPDATE/DELETE rows where user_id = auth.uid().
8For data_points: users can SELECT/INSERT/UPDATE/DELETE rows where dataset_id is in (SELECT id FROM datasets WHERE user_id = auth.uid()).
9
10Install @tanstack/react-query and recharts. Set up a QueryClient provider in main.tsx.

1Build a ChartCard component at src/components/charts/ChartCard.tsx.
2
3Requirements:
4- Accept a dataset prop (id, name, chart_type, x_label, y_label, color_config)
5- Accept a dateRange prop { from: Date, to: Date }
6- Fetch data_points from Supabase where dataset_id = dataset.id AND recorded_at BETWEEN dateRange.from AND dateRange.to, ordered by recorded_at ASC
7- Render using recharts:
8  - chart_type 'line' → LineChart with a Line
9  - chart_type 'bar'  → BarChart with a Bar
10  - chart_type 'area' → AreaChart with an Area
11  - chart_type 'pie'  → PieChart with a Pie
12- Use ResponsiveContainer with width='100%' height={300}
13- Show XAxis with dataKey='label', YAxis, Tooltip, and Legend
14- Apply color from color_config.primary (default '#6366f1')
15- Use shadcn/ui Card as the wrapper with CardHeader showing the dataset name and a gear icon Button that opens a config Dialog
16- Show a Skeleton loader while fetching

1import { useForm } from 'react-hook-form'
2import { zodResolver } from '@hookform/resolvers/zod'
3import { z } from 'zod'
4import { useMutation, useQueryClient } from '@tanstack/react-query'
5import { supabase } from '@/integrations/supabase/client'
6import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
7import { Form, FormField, FormItem, FormLabel, FormControl } from '@/components/ui/form'
8import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select'
9import { Input } from '@/components/ui/input'
10import { Button } from '@/components/ui/button'
11
12const schema = z.object({
13  chart_type: z.enum(['line', 'bar', 'area', 'pie']),
14  x_label: z.string().min(1),
15  y_label: z.string().min(1),
16  primary_color: z.string().regex(/^#[0-9a-fA-F]{6}$/),
17})
18
19type Props = { datasetId: string; defaultValues: z.infer<typeof schema>; onClose: () => void }
20
21export function ChartConfigDialog({ datasetId, defaultValues, onClose }: Props) {
22  const qc = useQueryClient()
23  const form = useForm({ resolver: zodResolver(schema), defaultValues })
24
25  const mutation = useMutation({
26    mutationFn: async (values: z.infer<typeof schema>) => {
27      const { error } = await supabase
28        .from('datasets')
29        .update({ chart_type: values.chart_type, x_label: values.x_label, y_label: values.y_label, color_config: { primary: values.primary_color } })
30        .eq('id', datasetId)
31      if (error) throw error
32    },
33    onSuccess: () => { qc.invalidateQueries({ queryKey: ['datasets'] }); onClose() },
34  })
35
36  return (
37    <Dialog open onOpenChange={onClose}>
38      <DialogContent>
39        <DialogHeader><DialogTitle>Configure Chart</DialogTitle></DialogHeader>
40        <Form {...form}>
41          <form onSubmit={form.handleSubmit((v) => mutation.mutate(v))} className="space-y-4">
42            <FormField control={form.control} name="chart_type" render={({ field }) => (
43              <FormItem><FormLabel>Chart Type</FormLabel><FormControl>
44                <Select value={field.value} onValueChange={field.onChange}>
45                  <SelectTrigger><SelectValue /></SelectTrigger>
46                  <SelectContent>
47                    {['line','bar','area','pie'].map(t => <SelectItem key={t} value={t}>{t}</SelectItem>)}
48                  </SelectContent>
49                </Select>
50              </FormControl></FormItem>
51            )} />
52            <FormField control={form.control} name="x_label" render={({ field }) => (
53              <FormItem><FormLabel>X Axis Label</FormLabel><FormControl><Input {...field} /></FormControl></FormItem>
54            )} />
55            <FormField control={form.control} name="y_label" render={({ field }) => (
56              <FormItem><FormLabel>Y Axis Label</FormLabel><FormControl><Input {...field} /></FormControl></FormItem>
57            )} />
58            <FormField control={form.control} name="primary_color" render={({ field }) => (
59              <FormItem><FormLabel>Color (hex)</FormLabel><FormControl><Input {...field} placeholder="#6366f1" /></FormControl></FormItem>
60            )} />
61            <DialogFooter>
62              <Button type="submit" disabled={mutation.isPending}>
63                {mutation.isPending ? 'Saving...' : 'Save'}
64              </Button>
65            </DialogFooter>
66          </form>
67        </Form>
68      </DialogContent>
69    </Dialog>
70  )
71}

1Create a Supabase Edge Function at supabase/functions/import-csv/index.ts.
2
3Requirements:
4- Accept a POST request with multipart/form-data containing: file (CSV), dataset_id (string)
5- Authenticate the request using the Authorization header (Supabase JWT)
6- Parse the CSV: first row = headers, remaining rows = data. Expect columns: label (string), value (number), recorded_at (ISO date string, optional — default to now())
7- Validate: reject if value column is missing or non-numeric
8- Batch insert into data_points: use supabase-js with the service role key from Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')
9- Return { inserted: number, errors: string[] } as JSON
10- Add CORS headers so the browser can call it directly
11
12Also build a CSVImportDialog component at src/components/charts/CSVImportDialog.tsx that:
13- Shows a file input accepting .csv files
14- On submit, calls the Edge Function with fetch, passing the Authorization header from supabase.auth.getSession()
15- Shows a progress indicator and a success toast with the row count on completion

1Build the main Dashboard page at src/pages/Dashboard.tsx.
2
3Requirements:
4- Fetch all datasets for the authenticated user
5- Render a top bar with: app title, a shadcn/ui DatePickerWithRange defaulting to the last 30 days, and an 'Add Dataset' Button that opens a CreateDatasetDialog
6- Render datasets in a responsive grid: 1 column on mobile, 2 on md, 3 on lg
7- Each grid cell renders a ChartCard with the dataset and the selected dateRange
8- CreateDatasetDialog: a Dialog with a form to create a new dataset row (name, chart_type, x_label, y_label). After creation, show the CSVImportDialog automatically so the user can immediately upload data.
9- Add a CSV import button on each ChartCard that opens the CSVImportDialog pre-filled with that dataset's id