add a new curve inside diagram sounding ?

[HadjerSahariYassir]

Hi Chird @chird ,

I already added a comment here https://github.com/chird/meteoJS/issues/74, I know I bothered you so much with my questions

please you can tell me if there is a possibility to add a new curve inside the diagram sounding, (for me it represents Humidity) if yes can you just show me the steps or any proposition like the image below (on the left)?

Thanks a lot

[chird]

Hi hadjersh97,

You ask an interesting question, which can all be solved. However, I have to find the time to create a solution in each case.

In the case of the relative humidity curve, I place an object of the class PlotAltitudeDataArea over it. You integrate this as follows:

import PlotAltitudeArea from 'meteojs/thermodynamicDiagram/PlotAltitudeArea';

The following code displays your desired curve. It is important here that the area has the entire height of the diagram. In ? getCoordinatesByLevelData you can add a height restriction to the displayed data if necessary. Within the event prebuild:background the code is pure SVG.js (Attention: The zero point is at the top left). There you can adjust the appearance of the axis accordingly.

      const relHumDiagram = new PlotAltitudeDataArea({
        coordinateSystem,
        x: 70,
        y: 50,
        width: 100,
        height: 500,
        style: {
          overflow: 'visible'
        },
        dataGroupIds: ['relh'],
        getCoordinatesByLevelData: (dataGroupId, sounding, levelData, plotArea) => {
          if (levelData.pres === undefined ||
              levelData.relh === undefined ||
              levelData.pres < 400)
            return {};

          return {
            x: plotArea.width * levelData.relh / 100,
            y: plotArea.coordinateSystem.height -
              plotArea.coordinateSystem.getYByXP(0, levelData.pres)
          };
        },
        insertDataGroupInto: (svgNode, dataGroupId, sounding, data) => {
          svgNode
            .polyline(data.map(level => [ level.x, level.y ]))
            .fill('none')
            .stroke({ color: 'green', width: 2 });
        }
      });
      relHumDiagram.on('prebuild:background', ({ node }) => {
        node.line(0, relHumDiagram.height - 20, relHumDiagram.width, relHumDiagram.height - 20).stroke({ color: 'black', width: 1 });
        node.line(0, relHumDiagram.height - 15, 0, relHumDiagram.height - 20).stroke({ color: 'black', width: 1 });
        node.line(relHumDiagram.width/2, relHumDiagram.height - 15, relHumDiagram.width/2, relHumDiagram.height - 20).stroke({ color: 'black', width: 1 });
        node.line(relHumDiagram.width, relHumDiagram.height - 15, relHumDiagram.width, relHumDiagram.height - 20).stroke({ color: 'black', width: 1 });
        node.plain('0 %').move(0, relHumDiagram.height - 20).font({ size: 12, anchor: 'middle' });
        node.plain('50 %').move(relHumDiagram.width/2, relHumDiagram.height - 20).font({ size: 12, anchor: 'middle' });
        node.plain('100 %').move(relHumDiagram.width, relHumDiagram.height - 20).font({ size: 12, anchor: 'middle' });
      });
      diagram.appendPlotArea(relHumDiagram);