objectui/apps/playground/src/data/examples/plugins/charts-demo.json at d1fe645964e345a64163bbbc18352d175e800634 · objectstack-ai/objectui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
{
  "type": "div",
  "className": "p-8 space-y-6",
  "children": [
    {
      "type": "div",
      "className": "space-y-2",
      "children": [
        {
          "type": "text",
          "className": "text-3xl font-bold",
          "content": "Charts Plugin Demo"
        },
        {
          "type": "text",
          "className": "text-muted-foreground",
          "content": "This example demonstrates lazy-loaded Recharts component"
        }
      ]
    },
    {
      "type": "chart-bar",
      "className": "border rounded-lg p-4",
      "data": [
        { "name": "Jan", "value": 400 },
        { "name": "Feb", "value": 300 },
        { "name": "Mar", "value": 600 },
        { "name": "Apr", "value": 800 },
        { "name": "May", "value": 500 },
        { "name": "Jun", "value": 700 }
      ],
      "dataKey": "value",
      "xAxisKey": "name",
      "height": 400,
      "color": "#8884d8"
    },
    {
      "type": "div",
      "className": "grid grid-cols-2 gap-4",
      "children": [
        {
          "type": "chart-bar",
          "className": "border rounded-lg p-4",
          "data": [
            { "category": "Product A", "sales": 120 },
            { "category": "Product B", "sales": 200 },
            { "category": "Product C", "sales": 150 },
            { "category": "Product D", "sales": 300 }
          ],
          "dataKey": "sales",
          "xAxisKey": "category",
          "height": 300,
          "color": "#82ca9d"
        },
        {
          "type": "chart-bar",
          "className": "border rounded-lg p-4",
          "data": [
            { "month": "Q1", "revenue": 5000 },
            { "month": "Q2", "revenue": 7500 },
            { "month": "Q3", "revenue": 6200 },
            { "month": "Q4", "revenue": 9800 }
          ],
          "dataKey": "revenue",
          "xAxisKey": "month",
          "height": 300,
          "color": "#ffc658"
        }
      ]
    }
  ]
}