jc-timeline/lib/stories/Timeline.stories.js

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Rainbow = exports.WithEvents = exports.NestedRessource = exports.Week = exports.Generic = void 0;
const Ressource_1 = __importDefault(require("../Ressource"));
const Timeline_1 = __importDefault(require("../Timeline"));
exports.default = {
    title: "Javascript/Timeline",
    component: "jc-timeline",
    argTypes: {
        start: {
            control: { type: "date" },
        },
        end: {
            control: { type: "date" },
        },
    },
};
const Template = (args) => {
    const t = new Timeline_1.default();
    t.start = args.start;
    t.end = args.end;
    if (args.legendSpan)
        t.legendSpan = args.legendSpan;
    if (args.slotduration)
        t.slotDuration = args.slotduration;
    if (args.slotWidth)
        t.slotWidth = args.slotWidth;
    if (args.legendSpan)
        t.legendSpan = args.legendSpan;
    if (args.legendFormat)
        t.setLegendUnitFormatAll(args.legendFormat);
    if (args.ressources)
        t.addRessources(args.ressources);
    if (args.events)
        t.addEvents(args.events);
    return t;
};
exports.Generic = Template.bind({});
exports.Generic.args = {
    start: "2021-04-04T22:00:00.000Z",
    end: "2021-04-05T21:59:00.000Z",
    ressources: [
        { id: "1", title: "Ressource 1" },
        { id: "2", title: "Ressource 2" },
    ],
};
exports.Week = Template.bind({});
exports.Week.args = {
    start: "2021-04-04T22:00:00.000Z",
    end: "2021-04-11T21:59:00.000Z",
    slotduration: 360,
    legendSpan: 4,
    slotWidth: 30,
    legendFormat: { d: "MMM D" },
};
exports.NestedRessource = Template.bind({});
exports.NestedRessource.args = {
    start: "2021-04-05T05:00:00.000Z",
    end: "2021-04-05T17:59:00.000Z",
    ressources: [{ id: "2", title: "Ressource 2", parent: { id: "1", title: "Ressource 1" } }],
};
exports.WithEvents = Template.bind({});
exports.WithEvents.args = {
    start: "2021-04-05T05:00:00.000Z",
    end: "2021-04-05T17:59:00.000Z",
    ressources: [
        { id: "1", title: "Ressource 1" },
        { id: "2", title: "Ressource 2" },
    ],
    events: [
        {
            id: "1",
            title: "Fixed ressource",
            ressourceId: "1",
            start: new Date("2021-04-05T05:00:00.000Z"),
            end: new Date("2021-04-05T07:59:00.000Z"),
            ressourceEditable: false,
            bgColor: "darkgreen",
        },
        {
            id: "2",
            title: "Fixed time",
            ressourceId: "1",
            start: new Date("2021-04-05T09:00:00.000Z"),
            end: new Date("2021-04-05T10:59:00.000Z"),
            editable: false,
            bgColor: "FireBrick",
        },
        {
            id: "3",
            ressourceId: "2",
            start: new Date("2021-04-05T10:00:00.000Z"),
            end: new Date("2021-04-05T11:59:00.000Z"),
        },
        {
            id: "4",
            ressourceId: "2",
            start: new Date("2021-04-05T11:00:00.000Z"),
            end: new Date("2021-04-05T12:59:00.000Z"),
        },
        {
            id: "5",
            ressourceId: "2",
            start: new Date("2021-04-05T12:00:00.000Z"),
            end: new Date("2021-04-05T13:59:00.000Z"),
            content: '<div class="bubble">0</div>',
        },
    ],
};
const nItem = 25;
const date = new Date("2021-04-05T05:00:00.000Z").valueOf();
exports.Rainbow = Template.bind({});
exports.Rainbow.args = {
    start: "2021-04-05T05:00:00.000Z",
    end: "2021-04-05T17:59:00.000Z",
    ressources: [
        Array(8)
            .fill(0)
            .map((_, i) => new Ressource_1.default({ id: "" + i, title: "level " + i }))
            .reduce((acc, o) => {
            o.parent = acc;
            return o;
        }, undefined),
    ],
    events: Array(nItem)
        .fill(0)
        .map((_, i) => {
        return {
            id: "" + i,
            ressourceId: "" + (i % 8),
            title: "Item " + i,
            start: new Date(date + 1800000 * i),
            end: new Date(date + 3600000 + 1800000 * i),
            bgColor: "hsl(" + Math.round((i / (nItem - 1)) * 360) + ", 100%, 50%)",
        };
    }),
};
//# sourceMappingURL=Timeline.stories.js.map