chird / meteoJS

Javascript Library for meteorological and atmospheric tools
Apache License 2.0
28 stars 6 forks source link

i need to update sounding elements instead of owveriting diagram with new one #61

Closed HadjerSahariYassir closed 2 years ago

HadjerSahariYassir commented 2 years ago

Hi,
i'm using TermodynamicDiagram-default example and i'm trying to play with it in React. my task is to change colors of diagram/hodogram/winds and make them visible/invisible. i want to access to a specific sounding by id and update it without generating each time a new TermodynamicDiagram . my question is : Is there methods that update differents elements of sounding such as wind/hodograph/.. ?

chird commented 2 years ago

Hi,

The ThermodynamicDiagram-Class is a collection of DiagramSounding objects. So, it inherits the method getItemById(id) from the Collection-class. It returns a before added DiagramSounding-object by its id. Alternatively, you'll get this object as a result of the addSounding method.

The DiagramSounding-object has the method update. With this method, you update the style of the sounding. For all the possible options, take a look at the API reference. For example to change the hodograph's line color and set the sounding in the thermodynamic diagram invisible do something like that:

diagramSounding.update({
  diagram: {
    visible: false
  },
  hodograph: {
    style: {
      color: 'red'
    }
  }
})
HadjerSahariYassir commented 2 years ago

Hi , thank you for the response. i did this process and it works :
i have created a new ThermodynamicDiagram when my page is loaded (only one time)

td =  new ThermodynamicDiagram({
           renderTo: ref.current
      });

Then i took the ID and i accessed to the sounding, something like that:

td._items['sounding-1'].update( {diagram: {
         visible: display.diagram,
        temp: {  
            style: {
            color: "green"
          },
          visible: false,
        },
        dewp: {  
          style : {
           color:  "bleu"         },
          visible: false 
        }} )

or something like that works also. since i create only one sounding. td.items[0].update.. Please i have another issue , i want to make temp / dewP/ wetbulb visible or invisible, it means each one alone. as u see in the code above visible is not working it seems visible property does not exist inside diagram ??

chird commented 2 years ago

Ouh, it's a bug. The visible property is currently ignored.

As a work-around, you could set the width to 0 (within style).

HadjerSahariYassir commented 2 years ago

alright, Thanks for help