drawChart.ts

import { DrawImage, coordinates } from "./drawImage";
import * as Help from "./helper";
import * as Dygraph  from "dygraphs";
export class DrawChart {
  _graphic: any;

  private readonly chartElementID: string = "chart";

  private _setLinearButton: HTMLAnchorElement;
  private _setLogButton: HTMLAnchorElement;
  private _setEnergyButton: HTMLAnchorElement;
  private _setChannelButton: HTMLAnchorElement;
  private _exportgraph: HTMLAnchorElement;
  private _readSpinBox: HTMLButtonElement;
  private _chartElement: HTMLElement;
  private _elementSelect: HTMLSelectElement;

  public spinBoxMin: HTMLInputElement;
  public spinBoxMax: HTMLInputElement;

  dataCompleteChart: string = "Channel,Counts\n";
  dataCompleteChartCalibrated: string = "Energy,Counts\n";
  calibrated: boolean = false; //variabile per il controllo sulla calibrazione
  
  constructor() {
    this._chartElement = <HTMLElement>document.getElementById(this.chartElementID);
    this.spinBoxMin = <HTMLInputElement>document.getElementById("spinBoxMin");
    this.spinBoxMax = <HTMLInputElement>document.getElementById("spinBoxMax");

  }

  
  drawChart(image: DrawImage, pixel1: coordinates, pixel2: coordinates, xMinRange: number, xMaxRange: number) {
    //definisco la variabile "grafico", i bottoni relativi al grafico, il tag
    //select e le due spinbox con il relativo botton

    //disegno il grafico completo
    if (pixel1.x == 0 && pixel1.y == 0 && pixel2.x == image.width - 1 && pixel2.y == image.height - 1) {
      if (!this.calibrated) {
        //canali
        let chartTitle: string = "Chart from (0, 0) to (" + (image.width - 1) + ", " + (image.height - 1) + ")";
        this._graphic = this.setChart(image, this.dataCompleteChart, chartTitle, xMinRange, xMaxRange);
      } else {
        //energie
        let chartTitle: string = "Calibrated chart from (0, 0) to (" + (image.width - 1) + ", " + (image.height - 1) + ")";
        this._graphic = this.setChart(image, this.dataCompleteChartCalibrated, chartTitle, xMinRange, xMaxRange);
      }

      //disegno il grafico parzialmente
    } else {
      //determino i conteggi dei pixel da disegnare
      let dataForChart: number[] = new Array(image.depth);
      for (let i: number = 0; i < image.depth; i++) {
        dataForChart[i] = 0;
      }
      for (let i: number = pixel1.x; i <= pixel2.x; i++) {
        for (let j: number = pixel1.y; j <= pixel2.y; j++) {
          for (let k: number = 0; k < image.depth; k++) {
            dataForChart[k] += image.DataMatrix[i][j][k];
          }
        }
      }

      if (!this.calibrated) {
        //disegno in canali
        let dataChart: string = "Channel,Counts\n";
        for (let i: number = 0; i < image.depth; i++) {
          dataChart += i + "," + dataForChart[i] + "\n";
        }
        let chartTitle: string;
        if (pixel1.x == pixel2.x && pixel1.y == pixel2.y) {
          chartTitle = "Chart pixel (" + pixel1.x + ", " + (image.height - pixel1.y - 1) + ")";
        } else {
          chartTitle = "Chart from (" + pixel1.x + "," + pixel2.x + ") to (" + (image.height - pixel1.y - 1) + ", " + (image.height - pixel2.y - 1) + ")";
        }
        this._graphic = this.setChart(image, dataChart, chartTitle, xMinRange, xMaxRange);
      } else {
        //disegno in energie
        let dataChartCalibrated: string = "Energy,Counts\n";
        for (let i: number = 0; i < image.depth; i++) {
          dataChartCalibrated += Help.round3(((i + 1) * image.calibration.a - image.calibration.b) / 1000) + "," + dataForChart[i] + "\n";
        }
        let chartTitle: string;
        if (pixel1.x == pixel2.x && pixel1.y == pixel2.y) {
          chartTitle = "Calibrated chart pixel (" + pixel1.x + ", " + (image.height - pixel1.y - 1) + ")";
        } else {
          chartTitle = "Calibrated chart from (" + pixel1.x + ", " + pixel2.x + ") to (" + (image.height - pixel1.y - 1) + ", " + (image.height - pixel2.y - 1) + ")";
        }
        this._graphic = this.setChart(image, dataChartCalibrated, chartTitle, xMinRange, xMaxRange);
      }
    }
  }
  //la funzione setChart riceve in input i dati e il titolo del grafico da disegnare
  //il quale è restituito il output
  setChart(image: DrawImage, dataString: string, charTitle: string, xMinRange: number, xMaxRange: number): Dygraph {
    let xArrayRange: number[]; //estremi asse x da visualizzare
    let xLab: string;
    if (!this.calibrated) {
      xArrayRange = [0, image.depth];
      xLab = "ADC Channel";
    } else {
      xArrayRange = [xMinRange, xMaxRange];
      xLab = "Energy (keV)";
    }

    //dimensioni grafico
    let chartDim: any = document.querySelector("#chart-pannel").getBoundingClientRect();
    let chartWidth = chartDim.right - chartDim.left - 50;
    this._chartElement.setAttribute("width", chartWidth.toString());
    this._chartElement.setAttribute("height", "400");

    //disegno il grafico
    this._graphic = new Dygraph(this._chartElement, dataString,
      {
        title: charTitle,
        ylabel: "Counts",
        xlabel: xLab,
        // labelsDivStyles: {
        //   "text-align": "right"
        // },
        //legend: 'always',
        dateWindow: xArrayRange,
        showRangeSelector: true,
        logscale: false,
      });

    return this._graphic;
  }
  //la funzione, dati gli estremi dell'intervallo da rappresentare, aggiorna mappa e grafico
  peackSelection(xMinRange: number, xMaxRange: number, image: DrawImage) {
    
    //se l'intervallo è [0, 0] devo leggere dalle i valori dalle spinbox
    if (xMinRange == 0 && xMaxRange == 0) {
      xMinRange = parseInt((this.spinBoxMin).value);
      xMaxRange = parseInt((this.spinBoxMax).value);
    }

    image.globalxMinRange = xMinRange;
    image.globalxMaxRange = xMaxRange;
    image.newOrigin = { x: 0, y: 0 };
    image.rePrint = false;
    this.calibrated = true;
    image.drawImg({ x: 0, y: 0 }, { x: image.width - 1, y: image.height - 1 }, image.globalxMinRange, image.globalxMaxRange);
    this.drawChart(image, { x: 0, y: 0 }, { x: image.width - 1, y: image.height - 1 }, image.globalxMinRange, image.globalxMaxRange);
  }
}