Charts and Tables Example

Combined Report

#include <iostream>
#include <vector>
#include "ast.hpp"

using namespace ast;

int main() {

    struct DayData { std::string day; double usage; double peak; };
    std::vector<DayData> data = {
        {"Mon", 120.5, 80.2},
        {"Tue", 150.3, 95.6},
        {"Wed", 130.1, 88.0},
        {"Thu", 170.2, 110.3},
        {"Fri", 160.8, 102.4}
    };

    // ---------- (Recharts LineChart) ----------
    Node chart = ResponsiveContainer({
        LineChart({
            XAxis({}, props({{"dataKey", "day"}})),
            YAxis(),
            Tooltip(),
            Legend(),
            Line({}, props({
                {"type", "monotone"},
                {"dataKey", "usage"},
                {"stroke", "#8884d8"}
            })),
            Line({}, props({
                {"type", "monotone"},
                {"dataKey", "peak"},
                {"stroke", "#82ca9d"}
            }))
        }, props({
            {"data", JSONArray{}}
        }))
    }, props({
        {"width", "100%"},
        {"height", 300.0}
    }));

    JSONArray jsonData;
    for (const auto& d : data) {
        jsonData.push_back(JSONObject{
            {"day", d.day},
            {"usage", d.usage},
            {"peak", d.peak}
        });
    }
    chart.children[0].props["data"] = JSONValue(jsonData);

    // ---------- Table ----------
    auto makeTable = [&](const std::vector<DayData>& rows) -> Node {
        std::vector<Node> tableRows;

        tableRows.push_back(tr({
            th({ text("Day") }),
            th({ text("Usage (kWh)") }),
            th({ text("Peak Load (kW)") })
        }));

        for (const auto& row : rows) {
            tableRows.push_back(tr({
                td({ text(row.day) }),
                td({ text(std::to_string(row.usage)) }),
                td({ text(std::to_string(row.peak)) })
            }));
        }

        return table(tableRows, props({{"className", "data-table"}}));
    };

    Node report = div({
        h1({ text("Weekly Energy Report") }),
        chart,
        makeTable(data)
    }, props({{"className", "report"}}));

    // ---------- JSON string ----------
    std::cout << stringify(report) << std::endl;
    return 0;
}

JSON output:

{
  "type": "div",
  "props": { "className": "report" },
  "children": [
    {
      "type": "h1",
      "children": [
        { "type": "#text", "props": { "value": "Weekly Energy Report" } }
      ]
    },
    {
      "type": "ResponsiveContainer",
      "props": { "width": "100%", "height": 300 },
      "children": [
        {
          "type": "LineChart",
          "props": {
            "data": [
              { "day": "Mon", "usage": 120.5, "peak": 80.2 },
              { "day": "Tue", "usage": 150.3, "peak": 95.6 },
              { "day": "Wed", "usage": 130.1, "peak": 88.0 },
              { "day": "Thu", "usage": 170.2, "peak": 110.3 },
              { "day": "Fri", "usage": 160.8, "peak": 102.4 }
            ]
          },
          "children": [
            { "type": "XAxis", "props": { "dataKey": "day" } },
            { "type": "YAxis" },
            { "type": "Tooltip" },
            { "type": "Legend" },
            {
              "type": "Line",
              "props": {
                "type": "monotone",
                "dataKey": "usage",
                "stroke": "#8884d8"
              }
            },
            {
              "type": "Line",
              "props": {
                "type": "monotone",
                "dataKey": "peak",
                "stroke": "#82ca9d"
              }
            }
          ]
        }
      ]
    },
    {
      "type": "table",
      "props": { "className": "data-table" },
      "children": [
        {
          "type": "tr",
          "children": [
            { "type": "th", "children": [ { "type": "#text", "props": { "value": "Day" } } ] },
            { "type": "th", "children": [ { "type": "#text", "props": { "value": "Usage (kWh)" } } ] },
            { "type": "th", "children": [ { "type": "#text", "props": { "value": "Peak Load (kW)" } } ] }
          ]
        },
        {
          "type": "tr",
          "children": [
            { "type": "td", "children": [ { "type": "#text", "props": { "value": "Mon" } } ] },
            { "type": "td", "children": [ { "type": "#text", "props": { "value": "120.500000" } } ] },
            { "type": "td", "children": [ { "type": "#text", "props": { "value": "80.200000" } } ] }
          ]
        }
      ]
    }
  ]
}