"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PieChartStories = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const FormConfiguration_1 = require("../../FormConfiguration");
const FormRuntime_1 = require("../../FormRuntime");
const Containers_1 = require("../../Containers");
const ObjectDataDefinition_1 = require("@appglue/common/dist/Common/Data/Definitions/ObjectDataDefinition");
const NumberDataDefinition_1 = require("@appglue/common/dist/Common/Data/Definitions/NumberDataDefinition");
const StringDataDefinition_1 = require("@appglue/common/dist/Common/Data/Definitions/StringDataDefinition");
const PieChartFormControl_1 = require("../Web/PieChartFormControl");
const StoryData_1 = require("../../../CommonUI/StoryBook/StoryData");
function getUI() {
    let ui = new FormConfiguration_1.FormConfiguration();
    let dataDef = ui.getInputDefinition();
    const chartDataDef = new ObjectDataDefinition_1.ObjectDataDefinition("invoiceByMonth");
    chartDataDef.list = true;
    const labelDef = new StringDataDefinition_1.StringDataDefinition("label");
    const valueDef = new NumberDataDefinition_1.NumberDataDefinition("value");
    chartDataDef.fields.push(labelDef);
    chartDataDef.fields.push(valueDef);
    dataDef.fields.push(chartDataDef);
    const values = [
        {
            label: "Jan",
            value: 1600,
            color: "black",
            radius: 140,
        },
        {
            label: "Feb",
            value: 1450,
            color: "lightgreen",
            radius: 170,
        },
        {
            label: "Mar",
            value: 1700,
            color: "lightblue",
            radius: 130,
        },
        {
            label: "Apr",
            value: 1500,
            color: "blue",
            radius: 100,
        },
        {
            label: "May",
            value: 1350,
            color: "purple",
            radius: 80,
        },
        {
            label: "Jun",
            value: 1900,
            color: "red",
            radius: 240,
        },
        {
            label: "Jul",
            value: 2000,
            color: "green",
            radius: 200,
        },
        {
            label: "Aug",
            value: 1750,
            color: "pink",
            radius: 160,
        },
        {
            label: "Sep",
            value: 1300,
            color: "orange",
            radius: 80,
        },
        {
            label: "Oct",
            value: 1800,
            color: "yellow",
            radius: 140,
        },
        {
            label: "Nov",
            value: 1850,
            color: "gray",
            radius: 150,
        },
        {
            label: "Dec",
            value: 1650,
            color: "green",
            radius: 100,
        },
    ];
    dataDef.value["invoiceByMonth"] = values;
    ui.inputData = dataDef;
    let container = new Containers_1.XStackContainer();
    const chart = new PieChartFormControl_1.PieChartFormControl();
    container.add(chart);
    ui.add(container);
    return { form: ui, control: chart };
}
exports.PieChartStories = [
    new StoryData_1.StoryNode(() => {
        let ui = getUI();
        return (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: ui.form });
    }, "Form Designer", "Controls", "Pie Chart", "Default"),
    new StoryData_1.StoryNode(() => {
        let ui = getUI();
        ui.control.dataName = "invoiceByMonth";
        ui.control.label = "Donut Chart";
        ui.control.isDonut = true;
        return (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: ui.form });
    }, "Form Designer", "Controls", "Pie Chart", "Donut"),
    new StoryData_1.StoryNode(() => {
        let ui = getUI();
        ui.control.dataName = "invoiceByMonth";
        ui.control.label = "Donut Chart with Custom inner Radius";
        ui.control.isDonut = true;
        ui.control.innerRadius = 60;
        return (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: ui.form });
    }, "Form Designer", "Controls", "Pie Chart", "Donut (inner radius)"),
    new StoryData_1.StoryNode(() => {
        let ui = getUI();
        ui.control.dataName = "invoiceByMonth";
        ui.control.label = "Custom Color Pie Chart";
        ui.control.colorType = "Custom";
        return (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: ui.form });
    }, "Form Designer", "Controls", "Pie Chart", "Donut (custom color)"),
    new StoryData_1.StoryNode(() => {
        let ui = getUI();
        ui.control.dataName = "invoiceByMonth";
        ui.control.label = "Pie Chart with Legend";
        ui.control.legendPosition = "bottom";
        return (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: ui.form });
    }, "Form Designer", "Controls", "Pie Chart", "With legend"),
    new StoryData_1.StoryNode(() => {
        let ui = getUI();
        ui.control.dataName = "invoiceByMonth";
        ui.control.label = "Pie Chart with custom radius";
        ui.control.customRadius = true;
        return (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: ui.form });
    }, "Form Designer", "Controls", "Pie Chart", "Custom Radius"),
    new StoryData_1.StoryNode(() => {
        let ui = getUI();
        ui.control.dataName = "invoiceByMonth";
        ui.control.label = "Pie Chart without label";
        ui.control.showLabel = false;
        return (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: ui.form });
    }, "Form Designer", "Controls", "Pie Chart", "Hide Label"),
    new StoryData_1.StoryNode(() => {
        let ui = getUI();
        ui.control.dataName = "invoiceByMonth";
        ui.control.label = "Pie Chart without tooltip";
        ui.control.showToolTip = false;
        return (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: ui.form });
    }, "Form Designer", "Controls", "Pie Chart", "Hide Tooltip"),
    new StoryData_1.StoryNode(() => {
        let ui = getUI();
        ui.control.dataName = "invoiceByMonth";
        ui.control.label = "Pie Chart shows in 3D";
        ui.control.show3D = true;
        return (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: ui.form });
    }, "Form Designer", "Controls", "Pie Chart", "3d"),
];
//# sourceMappingURL=XPieChart-stories.js.map