daily pastebin goal
15%
SHARE
TWEET

Untitled

a guest Dec 14th, 2018 62 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import "moment"
  2.     import { Chart } from "chart.js"
  3.     import "hammerjs"
  4.     import "chartjs-plugin-annotation"
  5.     import "chartjs-plugin-zoom"
  6.  
  7.  
  8.     /// The main component of web-plots. The plot ties together sever chart
  9.     /// objects from the chart.js module.
  10.     export const Plot = class {
  11.  
  12.     constructor(props) {
  13.         // initialize props
  14.         this.props = props
  15.         //global to keep track of rawlrv attributes from manager.js
  16.         this.globlrv = null
  17.         this.desirable= null
  18.         // Initialize state variables
  19.         this.charts = [] // maps ids to a chart
  20.         this.root = document.createElement('ray-plot') // parent node of plot
  21.  
  22.         // constructs charts and applies properties
  23.         const { plotData } = props
  24.         plotData.forEach(chartData => this.addChart(chartData))
  25.         props.plotData = this.charts.map(chart => {
  26.             return {
  27.                 type: chart.type,
  28.                 data: chart.data,
  29.                 options: chart.options,
  30.             }
  31.         })
  32.  
  33.         props.backgroundColor.map((color, index) => this.changeBackgroundColor(index, color))
  34.  
  35.         this.title = props.plotTitle
  36.     }
  37.  
  38.     set title(title) {
  39.         this.charts[0].options.title.display = title? true: false
  40.         this.charts[0].options.title.text = title
  41.     }
  42.  
  43.  
  44.     get title() {
  45.         return this.charts[0].options.title.text
  46.     }
  47.  
  48.     getProps(){
  49.         return this.props
  50.     }
  51.  
  52.     changeZoomPanEnabled(chartId, enabled){
  53.  
  54.         const chart = this.charts[chartId]
  55.         chart.options.zoom.enabled = enabled
  56.         chart.options.pan.enabled = enabled
  57.  
  58.     }
  59.  
  60.     changeZoom(chartId, mode){
  61.         this.charts[chartId].options.zoom.mode = mode
  62.         this.charts[chartId].options.pan.mode = mode
  63.     }
  64.  
  65.     changeBackgroundColor(chartId, color){
  66.         this.charts[chartId]
  67.             .chart
  68.             .canvas
  69.             .parentNode
  70.             .style
  71.             .backgroundColor = color
  72.     }
  73.  
  74.     changeGridLineColor(chartId, color){
  75.         const scales = this.charts[chartId].scales
  76.         Object.keys(scales)
  77.             .map(key => scales[key])
  78.             .forEach(axis => {
  79.                 axis.options.gridLines.color = color
  80.                 axis.originalOptions.gridLines.color = color
  81.             })
  82.     }
  83.  
  84.     changeGridLineDisplay(chartId, display){
  85.         const scales = this.charts[chartId].scales
  86.         Object.keys(scales)
  87.             .map(key => scales[key])
  88.             .forEach(axis => {
  89.                 axis.options.gridLines.display = display
  90.                 axis.originalOptions.gridLines.display = display
  91.             })
  92.     }
  93.  
  94.     changeFontColor(chartId, color){
  95.         const chart = this.charts[chartId]
  96.         const scales = chart.scales
  97.  
  98.         Object.keys(scales)
  99.             .map(key => scales[key])
  100.             .forEach(axis => {
  101.                 axis.originalOptions.scaleLabel.fontColor = color
  102.                 axis.originalOptions.ticks.fontColor = color
  103.                 axis.options.scaleLabel.fontColor = color
  104.                 axis.options.ticks.fontColor = color
  105.             })
  106.         chart.options.title.fontColor = color
  107.         chart.options.legend.labels.fontColor = color
  108.     }
  109.  
  110.     getXAxisMinimum(chartId){
  111.         return this.charts[chartId]
  112.             .options
  113.             .scales
  114.             .xAxes[0]
  115.             .time
  116.             .min
  117.     }
  118.  
  119.     setXAxisMinimum(chartId, minimum){
  120.         this.charts[chartId]
  121.             .options
  122.             .scales
  123.             .xAxes[0]
  124.             .time
  125.             .min = minimum
  126.     }
  127.  
  128.     getXAxisMaximum(chartId){
  129.         return this.charts[chartId]
  130.             .options
  131.             .scales
  132.             .xAxes[0]
  133.             .time
  134.             .max
  135.     }
  136.  
  137.     setXAxisMaximum(chartId, maximum){
  138.         this.charts[chartId]
  139.             .options
  140.             .scales
  141.             .xAxes[0]
  142.             .time
  143.             .max = maximum
  144.     }
  145.  
  146.     setXAxisLabel(chartId, dataset, title){
  147.         const axis = this.charts[chartId].scales["x-axis-" + dataset]
  148.  
  149.         const scaleLabel = axis.options.scaleLabel
  150.         scaleLabel.display = title? true:false
  151.         scaleLabel.labelString = title
  152.  
  153.         const originalScaleLabel = axis.originalOptions.scaleLabel
  154.         originalScaleLabel.display = title? true:false
  155.         originalScaleLabel.labelString = title
  156.     }
  157.  
  158.     setYAxisLabel(chartId, axisId, title){
  159.         const axis = this.charts[chartId].scales[axisId]
  160.  
  161.         const scaleLabel = axis.options.scaleLabel
  162.         scaleLabel.display = title? true:false
  163.         scaleLabel.labelString = title
  164.  
  165.         const originalScaleLabel = axis.originalOptions.scaleLabel
  166.         originalScaleLabel.display = title? true:false
  167.         originalScaleLabel.labelString = title
  168.     }
  169.  
  170.     getData(chartId, datasetId){
  171.         return this.charts[chartId]
  172.             .data
  173.             .datasets[datasetId]
  174.             .data
  175.     }
  176.  
  177.     setData(chartId, datasetId, data){
  178.         this.charts[chartId]
  179.             .data
  180.             .datasets[datasetId]
  181.             .data = data
  182.     }
  183.  
  184.     setPointColor(chartId, datasetId, pointColor){
  185.         this.charts[chartId]
  186.             .data
  187.             .datasets[datasetId]
  188.             .pointBorderColor = pointColor
  189.     }
  190.  
  191.     getPointColor(chartId, datasetId){
  192.         const dataset = this.charts[chartId]
  193.             .data
  194.             .datasets[datasetId]
  195.  
  196.         if(dataset.pointBorderColor === undefined){
  197.             dataset.pointBorderColor = []
  198.         }
  199.         return dataset.pointBorderColor
  200.     }
  201.  
  202.     getChartDatasetInfo(){
  203.         return this.charts.map((chart, index) => [index, chart.data.datasets.length])
  204.     }
  205.  
  206.     getThreshCallback(chartId, rawLrv){
  207.             var plotOpt = this.charts[chartId].options
  208.             var loRed = parseInt(rawLrv.lowerRedLimit)
  209.             var loYellow = parseInt(rawLrv.lowerYellowLimit)
  210.             var hiRed = parseInt(rawLrv.upperRedLimit)
  211.             var hiYellow = parseInt(rawLrv.upperYellowLimit)
  212.             plotOpt.annotation.annotations = []
  213.             var min = parseInt(this.charts[chartId].scales["y-axis-0"].min)
  214.             var max = parseInt(this.charts[chartId].scales["y-axis-0"].max)
  215.  
  216.  
  217.  
  218.     }
  219.  
  220.     update(chartId, lrv = null) {
  221.         if(chartId === undefined){
  222.             for(var x = 0; x<this.charts.length; x++){
  223.                 this.charts[x].update()
  224.                     }
  225.                 }
  226.             else {
  227.             this.charts[chartId].update()
  228.  
  229.         }
  230.  
  231.     }
  232.  
  233.     changeLineSymbol(chartId, datasetId, symbol) {
  234.         const dataset = this.charts[chartId]
  235.             .data
  236.             .datasets[datasetId]
  237.  
  238.         if(symbol){
  239.             dataset.pointRadius = 6
  240.             dataset.pointStyle = symbol
  241.         } else {
  242.             dataset.pointRadius = 0
  243.         }
  244.     }
  245.  
  246.     changeLineStyle(chartId, datasetId, style) {
  247.         this.charts[chartId]
  248.             .data
  249.             .datasets[datasetId]
  250.             .borderDash = style
  251.     }
  252.  
  253.     getLineStyle(chartId, datasetId) {
  254.         return this.charts[chartId]
  255.             .data
  256.             .datasets[datasetId]
  257.             .borderDash
  258.     }
  259.  
  260.     changeLineColor(chartId, datasetId, color) {
  261.         const dataset = this
  262.             .charts[chartId]
  263.             .data
  264.             .datasets[datasetId]
  265.  
  266.         dataset.borderColor = color.line
  267.         dataset.backgroundColor = color.fill
  268.     }
  269.  
  270.     addChart(chartData) {
  271.         const ctx = document.createElement('canvas')
  272.         const container = document.createElement('ray-chart')
  273.         container.appendChild(ctx)
  274.  
  275.  
  276.         var ds = chartData.data.datasets
  277.         for(var a = 0;a<ds.length;a++){
  278.         ds[a].borderColor ="rgba(0,255,0,1)"
  279.         }
  280.  
  281.  
  282.         const chart = new Chart (ctx, {
  283.             type: chartData.type,
  284.             data: chartData.data,
  285.             options: chartData.options,
  286.         })
  287.         chart.options.annotation= {}
  288.  
  289.  
  290.  
  291.         //default annotations off
  292.         chart.options.annotation.display = false
  293.  
  294.  
  295.  
  296.         container.addEventListener("dblclick", () => {
  297.             if(chart.options.pan.enabled || chart.options.zoom.enabled){
  298.                 chart.resetZoom()
  299.             }
  300.         }, false)
  301.  
  302.  
  303.  
  304.  
  305.         this.charts.push(chart)
  306.         this.root.appendChild(container)
  307.         this.layout()
  308.     }
  309.  
  310.     // Remove a chart from the stack of charts in the plot.
  311.     removeChart(chartId) {
  312.         const chart = this.charts[chartId]
  313.         this.charts.splice(chartId, 1)
  314.         this.root.removeChild(chart.chart.canvas.parentNode)
  315.         this.layout()
  316.     }
  317.  
  318.     resetZoom(chartId) {
  319.         const chart = this.charts[chartId]
  320.         if(chart.options.pan.enabled || chart.options.zoom.enabled){
  321.             chart.resetZoom()
  322.         }
  323.     }
  324.  
  325.     alarm(chartId, togle){
  326.     const chart = this.charts[chartId]
  327.     if(togle =='off'){
  328.     chart.options.annotation = {
  329.     display:false
  330.     }
  331.     chart.update()
  332.     chart.options.annotation = {
  333.     display:false
  334.     }
  335.     }else{
  336.     chart.options.annotation.display = true
  337.     if(this.globlrv !== null){
  338.         this.getThreshCallback(chartId, this.globlrv)
  339.         chart.update()
  340.         this.getThreshCallback(chartId, this.globlrv)
  341.     }
  342.     }
  343.     }
  344.  
  345.     // Calculates the new height of each chart in the plot and applies
  346.     // the new style.
  347.     layout() {
  348.         const size = 1/this.root.childNodes.length * 100
  349.         Array.from(this.root.childNodes).forEach((node) => {
  350.             node.style.height = size + "%"
  351.         })
  352.     }
  353.  
  354.     staticPage() {
  355.         const root = document.createElement("div")
  356.         root.style.backgroundColor = this.root.style.backgroundColor
  357.         root.style.position = "absolute"
  358.         this.charts.map(chart => {
  359.                 let img = document.createElement("img")
  360.                 img.setAttribute("src", chart.toBase64Image())
  361.                 img.style.display = "block"
  362.                 img.style.backgroundColor = chart.chart.canvas.parentNode.style.backgroundColor
  363.                 return img
  364.             })
  365.             .forEach(item => root.appendChild(item))
  366.  
  367.         const body = document.createElement("body")
  368.         body.appendChild(root)
  369.         const html = document.createElement("html")
  370.         html.appendChild(document.createElement("head"))
  371.         html.appendChild(body)
  372.         return html
  373.     }
  374. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top