gitbrent / PptxGenJS

Create PowerPoint presentations with a powerful, concise JavaScript API.
https://gitbrent.github.io/PptxGenJS/
MIT License
3.02k stars 645 forks source link

Missing parameter structure documentation for npm react to call addChart for IChartMulti #990

Closed ejam17 closed 3 years ago

ejam17 commented 3 years ago

In my function I have this code, but it always has a repaired ppt. I run this code in the normal react app and it is ok, since it doesn't check the structure for data. Using "pptxgenjs": "3.7.1"

I already have data in chartTypesSD, what format/structure should the "data" in addChart(type, data, options) be like? It only says array of objects. Please help, I tried searching for documentation and all but I just cant seem to find why it keeps giving a repaired error. data parameter is not optional.

let labelValues = ["Jan", "Feb", "Mar"] let data = [ { labels: labelValues, values: [350, 400, 375] }, { labels: labelValues, values: [450, 450, 450] } ];

let multiType: pptxgen.IChartMulti[] = [ { type: pptx.ChartType.bar, data: [{ labels: labelValues, values: [350, 400, 375], }], options: { barGrouping: "stacked", }, }, { type: pptx.ChartType.line, data: [{ labels: labelValues, values: [450, 450, 450], }], options: { lineDash: "solid", chartColors: ["9F2120"], showValue: false, }, }];

casesHandledSlide.addChart(multiType, data);

ejam17 commented 3 years ago

This is my code in App.js in demo, i just modified the code. This works normally but in the app i am coding it is strict and function has no overload for only 2 parameters for multichart type. How do we execute with only 2 parameters?

The red line is the line graph, and the dark yellow is the bar graph. graph

let casesHandledSlide = pptx.addSlide(); casesHandledSlide.background = { color: "000000" }; let labelValues = ["Jan", "Feb", "Mar"] casesHandledSlide.addText("Cases Handled", { x: 0.5, y: 0, w: 3, h: 1, color: "FF0000", fontSize: 18, bullet: { code: "25A0" }}) casesHandledSlide.addText("Number of Responses", { x: 3.5, y: 0.5, w: 1.5, h: 1, color: "FFFFFF", fontSize: 14 }); casesHandledSlide.addText("Number of Responses", { x: 8.5, y: 0.5, w: 1.5, h: 1, color: "FFFFFF", fontSize: 14 });

    let optsSD = {
        x: .5, y: 1, w: 4, h: 4,
        title: "SD",
        chartColors: ["D7A301"],
        titleColor: "D7A301",
        lineDataSymbol: "none",
        valueBarColors: true,
        showLegend: false,
        showTitle: true,
        showValue: false,
        dataLabelColor: "FFFFFF",
        catAxisLabelColor: "FFFFFF",
        valAxisLabelColor: "FFFFFF",
        legendColor: "FFFFFF",
    }
    let chartTypesSD = [
        {
            type: pptx.charts.BAR,
            data: [{
                labels: labelValues,
                values: [350, 400, 375],
            }],

            options: {
                barGrouping: "stacked",
            },
        },
        {
            type: pptx.charts.LINE,
            data: [
                {
                    labels: labelValues,
                    values: [450, 450, 450],
                },
            ],
            options: {
                lineDash: "solid",
                chartColors: ["9F2120"],
                showValue: false,
            },
        },
    ];
    casesHandledSlide.addChart(chartTypesSD, optsSD);
ejam17 commented 3 years ago

To make it work, you can have 2 parameters only.. the opts should be type "any" so it will work with 2 parameters only. The documentation is not good enough to show this.

let chartTypesSD:pptxgen.IChartMulti[] = [ { type: pptx.ChartType.bar, data: [{ labels: labelValues, values: [350, 400, 375], }], options: { barGrouping: "stacked", }, }, { type: pptx.ChartType.line, data: [{ labels: labelValues, values: [450, 450, 450], }], options: { lineDash: "solid" }, }, ];

let optsSD: any = { x: .5, y: 1, w: 4, h: 4, } casesHandledSlide.addChart(chartTypesSD, optsSD);