Usability Study Task 5 Ricky.EXCEL.yaml

name: Usability Study Task 5 Ricky
description: ''
host: EXCEL
api_set: {}
script:
  content: |
    // Get the Operational workbook
    // In a true NPM world, this will be:
    // import Excel from 'excel';
    // const { workbook } = new Excel();
    const { workbook } = new ExcelOp.Excel();

    // Bind button handler to run function
    $("#run").click(run);

    async function run() {

      /*
        WARNING: If the sheet exists, then sheet.exists() throws error
        that the API could not be found.
      */

      const sheet = workbook.worksheets.getItem("Sample");
      const sheetExists = await sheet.exists();
      if (sheetExists) {
        await workbook.worksheets.getItem("Sample").delete();
      }

      const sampleSheet = await workbook.worksheets.add("Sample");
      sampleSheet.activate();

      sampleSheet.getRange("A1:D5").update({
        values: [
          ["Month", "Phones", "Tablets", "Laptops"],
          ["Jan", 8, 150, 90],
          ["Feb", 54, 77, 54],
          ["Mar", 93, 32, 100],
          ["Apr", 84, 14, 10]
        ]
      });

      // We use the *range* to create the chart, not the
      // table, so we don't have to await the tables.add().
      // Saves a round-trip.
      sampleSheet.tables.add("A1:D5", true);

      const salesChart = 
            await sampleSheet.charts.add("LineMarkers", 
                                         sampleSheet.getRange("A1:D5"));
        salesChart.update({
          name: "SampleChart"
        })
        salesChart.setPosition("F1");

        salesChart.update({
          axes: {
            categoryAxis: {
              title: {
                text: "Month"
              }
            },
            valueAxis: {
              title: {
                text: "Devices Sold"
              }
            }
          }
        });

      const { height, width } = await salesChart.retrieve("height", "width");
      console.log(`Width: ${width}, Height: ${height}`);
    }
  language: typescript
template:
  content: |
    <p class="ms-font-m">Usability Study Test:</p>
    <button id="run" class="ms-Button">
        <span class="ms-Button-label">Run Task</span>
    </button>
  language: html
style:
  content: ''
  language: css
libraries: >
  https://unpkg.com/@microsoft/office-js@operational/dist/office.experimental.js

  https://unpkg.com/@microsoft/office-js@operational/dist/office.experimental.d.ts


  office-ui-fabric-js@1.4.0/dist/css/fabric.min.css

  office-ui-fabric-js@1.4.0/dist/css/fabric.components.min.css


  core-js@2.4.1/client/core.min.js

  @types/core-js


  @microsoft/office-js-helpers@0.7.4/dist/office.helpers.min.js

  @microsoft/office-js-helpers@0.7.4/dist/office.helpers.d.ts


  jquery@3.1.1

  @types/jquery@3.3.1


  whatwg-fetch

  @types/whatwg-fetch