** Microsoft Product Group Starter Code provided pursuant to SIA Variation No. 7. ** Try out the chart data label APIs.

Demo Lake.EXCEL.yaml

name: Demo Lake
description: >-
  ** Microsoft Product Group Starter Code provided pursuant to SIA Variation No.
  7. **

  Try out the chart data label APIs.
host: EXCEL
api_set: {}
script:
  content: |
    $("#run").click(() => tryCatch(run));

    $("#clear").click(() => tryCatch(clearLS));
    $("#loadls").click(() => tryCatch(getLSD));


    function clearLS() {
      window.localStorage.clear();
      console.log("local storage cleared!");
    }

    function getLSD() {
      console.log(window.localStorage.getItem("reusablecontent"));
    }

    function removeSpaces(inputString) {
      // Use a regular expression to replace all spaces with an empty string
      return inputString.replace(/\s/g, '');
    }

    async function run() {
      await Excel.run(async (context) => {
        var myChart = context.workbook.getActiveChart();
        var mybase64 = myChart.getImage();
        myChart.load();

        await context.sync();
        var chartName = removeSpaces(myChart.name);

        var myItem = new ImageBoundItem(chartName, "A1", mybase64.value, chartName);
        myItem.width = myChart.width;
        myItem.height = myChart.height;
        myItem.dateTime = new Date();

        unpdateLocalStorage(myItem);
      });
    }

    /** Default helper for invoking an action and handling errors. */
    async function tryCatch(callback) {
      try {
        await callback();
      } catch (error) {
        // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
        console.error(error);
      }
    }

    function unpdateLocalStorage(item: ImageBoundItem) {
    var reusableContentBis = []; 
      var localStorageCurrent = window.localStorage.getItem("reusablecontent");
      if (localStorageCurrent == null){
       console.log("ls was null");
        reusableContentBis.push(JSON.stringify(item));
        window.localStorage.setItem("reusablecontent", JSON.stringify(reusableContentBis));
      }
      else{
        //there is something here 
        var currentArray = [];
        var vNext =[]; // hold the new Ls
        currentArray = JSON.parse(localStorageCurrent);
        // recorramos y reemplazemos
    var InsertionMade = false;
        for(var i=0; i<currentArray.length;i++){
          var currentItem = JSON.parse(currentArray[i]) as ImageBoundItem;
          console.log(currentItem.storageId + ":" + item.storageId)
          if(currentItem.storageId == item.storageId){ //ya existe en LS?
            //its an update! 
            InsertionMade = true; 
            vNext.push(JSON.stringify(item));
          }
          else{
            //lo pasamos tal cual
            vNext.push(JSON.stringify(currentItem));
          }
        }
        if(!InsertionMade){
          vNext.push(JSON.stringify(item));
        }
        
           //vNext holds the new LS! 
        window.localStorage.clear();
        window.localStorage.setItem("reusablecontent",JSON.stringify(vNext));
      console.log("LS Updated succesfully!!")
      console.log("items a meter" + vNext.length)
      }

      
    }

    class ImageBoundItem {
      public constructor(
        name?: string,
        excelAddress?: string,
        b64Image?: string,
        storageId?: string,
        excelBindingType?: string,
        excelChartId?: string
      ) {
        this.name = name ?? "";
        this.excelAddress = excelAddress ?? "";
        this.b64Image = b64Image ?? "";
        this.storageId = storageId ?? "";
        this.excelBindingType = excelBindingType ?? "";
        this.excelChartId = excelChartId ?? "";
        this.version = 0;
        this.dateTime = new Date();
        this.width = 0;
        this.height = 0;
      }

      name: string;
      excelAddress: string;
      b64Image: string;
      storageId: string;
      excelBindingType: string;
      excelChartId: string; //chart or region
      dateTime: Date;
      version: number;
      width: number;
      height: number;
    }
  language: typescript
template:
  content: |-
    <button id="run" class="ms-Button">
        <span class="ms-Button-label">Insert/Update Reusable Content </span>
    </button>
    <br><br><br>
    <button id="clear" class="ms-Button">
        <span class="ms-Button-label">=clear local s  </span>
    </button>
    <button id="loadls" class="ms-Button">
        <span class="ms-Button-label">load local storage </span>
    </button>
  language: html
style:
  content: |-
    section.samples {
        margin-top: 20px;
    }

    section.samples .ms-Button, section.setup .ms-Button {
        display: block;
        margin-bottom: 5px;
        margin-left: 20px;
        min-width: 80px;
    }
  language: css
libraries: |
  https://appsforoffice.microsoft.com/lib/1/hosted/office.js
  @types/office-js

  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

  jquery@3.1.1
  @types/jquery@3.3.1