// widget_xygraph.ysl2
widget_desc("XYGraph") {
    longdesc
    ||
    XYGraph draws a cartesian trend graph re-using styles given for axis,
    grid/marks, legends and curves.

    Elements labeled "x_axis" and "y_axis" are svg:groups containg:
     - "axis_label" svg:text gives style an alignment for axis labels.
     - "interval_major_mark" and "interval_minor_mark" are svg elements to be
       duplicated along axis line to form intervals marks.
     - "axis_line"  svg:path is the axis line. Paths must be intersect and their
       bounding box is the chart wall.

    Elements labeled "curve_0", "curve_1", ... are paths whose styles are used
    to draw curves corresponding to data from variables passed as HMI tree paths.
    "curve_0" is mandatory. HMI variables outnumbering given curves are ignored.

    ||

    shortdesc > Cartesian trend graph showing values of given variables over time

    path name="value" count="1+" accepts="HMI_INT,HMI_REAL" > value

    arg name="size" accepts="int" > buffer size
    arg name="xformat" count="optional" accepts="string" > format string for X label
    arg name="yformat" count="optional" accepts="string" > format string for Y label
    arg name="ymin" count="optional" accepts="int,real" > minimum value foe Y axis
    arg name="ymax" count="optional" accepts="int,real" > maximum value for Y axis
}

widget_class("XYGraph") {
    ||
        frequency = 1;
        init() {
            [this.x_size,
             this.x_format, this.y_format] = this.args;

            // Min and Max given with paths are meant to describe visible range,
            // not to clip data.
            this.clip = false;

            let y_min = -Infinity, y_max = Infinity;

            // Compute visible Y range by merging fixed curves Y ranges
            for(let minmax of this.minmaxes){
               if(minmax){
                   let [min,max] = minmax;
                   if(min < y_min)
                       y_min = min;
                   if(max > y_max) 
                       y_max = max;
               }
            }

            if(y_min !== -Infinity && y_max !== Infinity){
               this.fixed_y_range = true;
            } else {
               this.fixed_y_range = false;
            }

            this.ymin = y_min;
            this.ymax = y_max;

            this.curves = [];
            this.init_specific();

            this.reference = new ReferenceFrame(
                [[this.x_interval_minor_mark, this.x_interval_major_mark],
                 [this.y_interval_minor_mark, this.y_interval_major_mark]],
                [this.y_axis_label, this.x_axis_label],
                [this.x_axis_line, this.y_axis_line],
                [this.x_format, this.y_format]);

            // create <clipPath> path and attach it to widget
            clipPath = document.createElementNS(xmlns,"clipPath");
            clipPathPath = document.createElementNS(xmlns,"path");
            clipPathPathDattr = document.createAttribute("d");
            clipPathPathDattr.value = this.reference.getClipPathPathDattr();
            clipPathPath.setAttributeNode(clipPathPathDattr);
            clipPath.appendChild(clipPathPath);
            this.element.appendChild(clipPath);

            // assign created clipPath to clip-path property of curves
            for(let curve of this.curves){
                curve.setAttribute("clip-path", "url(#" + clipPath.id + ")");
            }

            this.curves_data = [];
            this.max_data_length = this.args[0];
        }

        dispatch(value,oldval, index) {
            // naive local buffer impl. 
            // data is updated only when graph is visible
            // TODO: replace with separate recording

            this.curves_data[index].push(value);
            let data_length = this.curves_data[index].length;
            let ymin_damaged = false;
            let ymax_damaged = false;
            let overflow;

            if(data_length > this.max_data_length){
                // remove first item
                overflow = this.curves_data[index].shift();
                data_length = data_length - 1;
            }

            if(!this.fixed_y_range){
                ymin_damaged = overflow <= this.ymin;
                ymax_damaged = overflow >= this.ymax;
                if(value > this.ymax){
                    ymax_damaged = false;
                    this.ymax = value;
                }
                if(value < this.ymin){
                    ymin_damaged = false;
                    this.ymin = value;
                }
            }

            // recompute X range based on curent time ad buffer depth
            // TODO: get PLC time instead of browser time
            const d = new Date();
            let time = d.getTime();

            // FIXME: this becomes wrong when graph is not visible and updated all the time
            [this.xmin, this.xmax] = [time - data_length*1000/this.frequency, time];
            let Xlength = this.xmax - this.xmin;


            // recompute curves "d" attribute
            // FIXME: use SVG getPathData and setPathData when available.
            //        https://svgwg.org/specs/paths/#InterfaceSVGPathData
            //        https://github.com/jarek-foksa/path-data-polyfill
           
            let [base_point, xvect, yvect] = this.reference.getBaseRef();
            this.curves_d_attr = 
                zip(this.curves_data, this.curves).map(function([data,curve]){
                let new_d = data.map(function([y, i]){
                    // compute curve point from data, ranges, and base_ref
                    let x = Xmin + i * Xlength / data_length;
                    let xv = vectorscale(xvect, (x - Xmin) / Xlength);
                    let yv = vectorscale(yvect, (y - Ymin) / Ylength);
                    let px = base_point.x + xv.x + yv.x;
                    let py = base_point.y + xv.y + yv.y;
                    if(!this.fixed_y_range){
                        if(ymin_damaged && y > this.ymin) this.ymin = y;
                        if(xmin_damaged && x > this.xmin) this.xmin = x;
                    }

                    return " " + px + "," + py;
                });

                new_d.unshift("M ");
                new_d.push(" z");

                return new_d.join('');
            }

            // computed curves "d" attr is applied to svg curve during animate();

            this.request_animate();
        }

        animate(){

            // move marks and update labels
            this.reference.applyRanges([this.XRange, this.YRange]);

            // apply computed curves "d" attributes
            for(let [curve, d_attr] of zip(this.curves, this.curves_d_attr)){
                curve.setAttribute("d", d_attr);
            }
        }

    ||
}

widget_defs("XYGraph") {
    labels("""
        /x_interval_minor_mark
        /x_axis_line
        /x_interval_major_mark
        /x_axis_label
        /y_interval_minor_mark
        /y_axis_line
        /y_interval_major_mark
        /y_axis_label""")

    |     init_specific() {

    // collect all curve_n labelled children
    foreach "$hmi_element/*[regexp:test(@inkscape:label,'^curve_[0-9]+$')]" {
        const "label","@inkscape:label";
        const "id","@id";

        // detect non-unique names
        if "$hmi_element/*[not($id = @id) and @inkscape:label=$label]"{
            error > XYGraph id="«$id»", label="«$label»" : elements with data_n label must be unique.
        }
    |         this.curves[«substring(@inkscape:label, 7)»] = id("«@id»"); /* «@inkscape:label» */
    }

    |     }

}

emit "declarations:XYGraph"
||
function lineFromPath(path_elt) {
    let start = path_elt.getPointAtLength(0);
    let end = path_elt.getPointAtLength(path_elt.getTotalLength());
    return [start, new DOMPoint(end.x - start.x , end.y - start.y)];
};

function vector(p1, p2) {
    return new DOMPoint(p2.x - p1.x , p2.y - p1.y);
};

function vectorscale(p1, p2) {
    return new DOMPoint(p2 * p1.x , p2 * p1.y);
};

function move_elements_to_group(elements) {
    let newgroup = document.createElementNS(xmlns,"g");
    for(let element of elements){
        element.parentElement().removeChild(element);
        newgroup.appendChild(element);
    }
    return newgroup;
}
function getLinesIntesection(l1, l2) {
    /*
    Compute intersection of two lines
    =================================

                          ^ l2vect
                         /
                        /
                       /
    l1start ----------X--------------> l1vect
                     / intersection
                    /
                   /
                   l2start

    intersection = l1start + l1vect * a
    intersection = l2start + l2vect * b
    ==> solve : "l1start + l1vect * a = l2start + l2vect * b" to find a and b and then intersection

    (1)   l1start.x + l1vect.x * a = l2start.x + l2vect.x * b
    (2)   l1start.y + l1vect.y * a = l2start.y + l2vect.y * b

    // express a
    (1)   a = (l2start.x + l2vect.x * b) / (l1start.x + l1vect.x)

    // substitute a to have only b
    (1+2) l1start.y + l1vect.y * (l2start.x + l2vect.x * b) / (l1start.x + l1vect.x) = l2start.y + l2vect.y * b

    // expand to isolate b
    (2) l1start.y + (l1vect.y * l2start.x) / (l1start.x + l1vect.x) + (l1vect.y * l2vect.x * b) / (l1start.x + l1vect.x) = l2start.y + l2vect.y * b
    (2) l1start.y + (l1vect.y * l2start.x) / (l1start.x + l1vect.x) - l2start.y = l2vect.y * b - (l1vect.y * l2vect.x * b) / (l1start.x + l1vect.x)

    // factorize b
    (2) l1start.y + (l1vect.y * l2start.x) / (l1start.x + l1vect.x) - l2start.y = b * (l2vect.y - (l1vect.y * l2vect.x ) / (l1start.x + l1vect.x))

    // extract b
    (2) b = (l1start.y + (l1vect.y * l2start.x) / (l1start.x + l1vect.x) - l2start.y) / ((l2vect.y - (l1vect.y * l2vect.x ) / (l1start.x + l1vect.x)))
    */

    let [l1start, l1vect] = l1;
    let [l1start, l2vect] = l2;

    let b = (l1start.y + (l1vect.y * l2start.x) / (l1start.x + l1vect.x) - l2start.y) / ((l2vect.y - (l1vect.y * l2vect.x ) / (l1start.x + l1vect.x)));

    return new DOMPoint(l2start.x + l2vect.x * b, l2start.y + l2vect.y * b);
};


// From https://stackoverflow.com/a/48293566
function *zip (...iterables){
    let iterators = iterables.map(i => i[Symbol.iterator]() )
    while (true) {
        let results = iterators.map(iter => iter.next() )
        if (results.some(res => res.done) ) return
        else yield results.map(res => res.value )
    }
}

class ReferenceFrame {
    constructor(
        // [[Xminor,Xmajor], [Yminor,Ymajor]]
        marks,
        // [Xlabel, Ylabel]
        labels,
        // [Xline, Yline]
        lines,
        // [Xformat, Yformat] printf-like formating strings
        formats
    ){
        this.axes = zip(labels,marks,lines,formats).map((...args) => new Axis(...args));

        let [lx,ly] = this.axes.map(axis => axis.line);
        let [[xstart, xvect], [ystart, yvect]] = [lx,ly];
        let base_point = this.getBasePoint();

        // setup clipping for curves
        this.clipPathPathDattr =
            "m " + base_point.x + "," + base_point.y + " "
                 + xvect.x + "," + xvect.y + " "
                 + yvect.x + "," + yvect.y + " "
                 + -xvect.x + "," + -xvect.y + " "
                 + -yvect.x + "," + -yvect.y + " z";

        this.base_ref = [base_point, xvect, yvect];

        for(let axis of this.axes){
            axis.setBasePoint(base_point);
        }
    }

	getBaseRef(){
        return this.base_ref;
	}

    getClipPathPathDattr(){
        return this.clipPathPathDattr;
    }

    applyRanges(ranges){
        for(let [range,axis] of zip(ranges,this.axes)){
            axis.applyRange(range);
        }
    }

    getBasePoint() {
        let [[xstart, xvect], [ystart, yvect]] = this.axes.map(axis => axis.line);

        /*
        Compute graph clipping region base point
        ========================================

        Clipping region is a parallelogram containing axes lines,
        and whose sides are parallel to axes line respectively.
        Given axes lines are not starting at the same point, hereafter is
        calculus of parallelogram base point.

                              ^ given Y axis
                   /         /
                  /         /
                 /         /
         xstart /---------/--------------> given X axis
               /         /
              /         /
             /---------/--------------
        base_point   ystart

        base_point = xstart + yvect * a
        base_point = ystart + xvect * b
        ==> solve : "xstart + yvect * a = ystart + xvect * b" to find a and b and then base_point

        (1)   xstart.x + yvect.x * a = ystart.x + xvect.x * b
        (2)   xstart.y + yvect.y * a = ystart.y + xvect.y * b

        // express a
        (1)   a = (ystart.x + xvect.x * b) / (xstart.x + yvect.x)

        // substitute a to have only b
        (1+2) xstart.y + yvect.y * (ystart.x + xvect.x * b) / (xstart.x + yvect.x) = ystart.y + xvect.y * b

        // expand to isolate b
        (2) xstart.y + (yvect.y * ystart.x) / (xstart.x + yvect.x) + (yvect.y * xvect.x * b) / (xstart.x + yvect.x) = ystart.y + xvect.y * b
        (2) xstart.y + (yvect.y * ystart.x) / (xstart.x + yvect.x) - ystart.y = xvect.y * b - (yvect.y * xvect.x * b) / (xstart.x + yvect.x)

        // factorize b
        (2) xstart.y + (yvect.y * ystart.x) / (xstart.x + yvect.x) - ystart.y = b * (xvect.y - (yvect.y * xvect.x ) / (xstart.x + yvect.x))

        // extract b
        (2) b = (xstart.y + (yvect.y * ystart.x) / (xstart.x + yvect.x) - ystart.y) / ((xvect.y - (yvect.y * xvect.x ) / (xstart.x + yvect.x)))
        */

        let b = (xstart.y + (yvect.y * ystart.x) / (xstart.x + yvect.x) - ystart.y) / ((xvect.y - (yvect.y * xvect.x ) / (xstart.x + yvect.x)));
        let base_point = new DOMPoint(ystart.x + xvect.x * b, ystart.y + xvect.y * b);

        // // compute given origin
        // // from drawing : given_origin = xstart - xvect * b
        // let given_origin = new DOMPoint(xstart.x - xvect.x * b, xstart.y - xvect.y * b);

        return base_point;

    }

}

class Axis {
    constructor(label, marks, line, format){
        this.lineElement = line;
        this.line = lineFromPath(line);
        this.format = format;

        this.label = label;
        this.marks = marks;


        // add transforms for elements sliding along the axis line
        for(let [elementname,element] of zip(["minor", "major", "label"],[...marks,label])){
            for(let name of ["base","slide"]){
                let transform = svg_root.createSVGTransform();
                element.transform.baseVal.appendItem(transform);
                this[elementname+"_"+name+"_transform"]=transform;
            };
        };

        // group marks an labels together
        let parent = line.parentElement()
        marks_group = move_elements_to_group(marks);
        marks_and_label_group = move_elements_to_group([marks_group_use, label]);
        group = move_elements_to_group([marks_and_label_group,line]);
        parent.appendChild(group);

        // Add transforms to group 
        for(let name of ["base","origin"]){
            let transform = svg_root.createSVGTransform();
            group.transform.baseVal.appendItem(transform);
            this[name+"_transform"]=transform;
        };

        this.group = group;
        this.marks_group = marks_group;
        this.marks_and_label_group = marks_and_label_group;

        this.mlg_clones = [];
        this.last_mark_count = 0;
    }

    setBasePoint(base_point){
        // move Axis to base point 
        let [start, _vect] = this.lineElement;
        let v = vector(start, base_point);
        this.base_transform.setTranslate(v.x, v.y);

        // Move marks and label to base point. 
        // _|_______         _|________
        //  |  '  |     ==>   ' 
        //  |     0           0
        //  |                 |

        for(let [markname,mark] of zip(["minor", "major"],this.marks)){
            let transform = this[markname+"_base_transform"];
            let pos = vector(
                // Marks are expected to be paths
                // paths are expected to be lines
                // intersection with axis line is taken 
                // as reference for mark position
                base_point, getLinesIntesection(
                    this.line, lineFromPath(mark)));
            this[markname+"_base_transform"].setTranslate(-pos.x, -pos.x);
            if(markname == "major"){ // label follow major mark
                this.label_base_transform.setTranslate(-pos.x, -pos.x);
            }
        }
    }

    applyOriginAndUnitVector(offset, unit_vect){
        // offset is a representing position of an 
        // axis along the opposit axis line, expressed in major marks units
        // unit_vect is the translation in between to major marks

        //              ^
        //              | unit_vect
        //              |<--->
        //     _________|__________>
        //     ^  |  '  |  '  |  '
        //     |yoffset |     1 
        //     |        |
        //     v xoffset|
        //     X<------>|
        // base_point

        // move major marks and label to first positive mark position
        let v = vectorscale(unit_vect, offset+1);
        this.label_slide_transform.setTranslate(v.x, v.x);
        this.major_slide_transform.setTranslate(v.x, v.x);
        // move minor mark to first half positive mark position
        let h = vectorscale(unit_vect, offset+0.5);
        this.minor_slide_transform.setTranslate(h.x, h.x);
    }

    applyRange(min, max){
        let range = max - min;

        // compute how many units for a mark
        //
        // - Units are expected to be an order of magnitude smaller than range,
        //   so that marks are not too dense and also not too sparse.
        //   Order of magnitude of range is log10(range)
        //
        // - Units are necessarily power of ten, otherwise it is complicated to
        //   fill the text in labels...
        //   Unit is pow(10, integer_number )
        //
        // - To transform order of magnitude to an integer, floor() is used.
        //   This results in a count of mark fluctuating in between 10 and 100.
        //
        // - To spare resources result is better in between 5 and 50,
        //   and log10(5) is substracted to order of magnitude to obtain this
        //   log10(5) ~= 0.69897


        let unit = Math.pow(10, Math.floor(Math.log10(range)-0.69897));

        // TODO: for time values (ms), units may be :
        //       1       -> ms
        //       10      -> s/100
        //       100     -> s/10
        //       1000    -> s
        //       60000   -> min
        //       3600000 -> hour
        //       ...
        //

        // Compute position of origin along axis [0...range]

        // min < 0, max > 0, offset = -min
        // _____________|________________
        // ... -3 -2 -1 |0  1  2  3  4 ...
        // <--offset---> ^
        //               |_original

        // min > 0, max > 0, offset = 0
        // |________________
        // |6  7  8  9  10...
        //  ^
        //  |_original

        // min < 0, max < 0, offset = max-min (range)
        // _____________|_
        // ... -5 -4 -3 |-2
        // <--offset---> ^
        //               |_original

        let offset = (max>=0 && min>=0) ? 0 : (
                     (max<0 && min<0)   ? range : -min);

        // compute unit vector
        let [_start, vect] = this.line;
        let unit_vect = vectorscale(vect, unit/range);
        let [umin, umax, uoffset] = [min,max,offset].map(val => Math.round(val/unit));
        let mark_count = umax-umin;

        // apply unit vector to marks and label
        this.label_and_marks.applyOriginAndUnitVector(offset, unit_vect);

        // duplicate marks and labels as needed
        let current_mark_count = this.mlg_clones.length;
        for(let i = current_mark_count; i <= mark_count; i++){
            // cloneNode() label and add a svg:use of marks in a new group
            let newgroup = document.createElementNS(xmlns,"g");
            let transform = svg_root.createSVGTransform();
            let newlabel = cloneNode(this.label);
            let newuse = document.createElementNS(xmlns,"use");
            let newuseAttr = document.createAttribute("xlink:href");
            newuseAttr.value = "#"+this.marks_group.id;
            newuse.setAttributeNode(newuseAttr.value);
            newgroup.transform.baseVal.appendItem(transform);
            newgroup.appendChild(newlabel);
            newgroup.appendChild(newuse);
            this.mlg_clones.push([tranform,newgroup]);
        }

        // move marks and labels, set labels
        for(let u = 0; u <= mark_count; u++){
            let i = 0;
            let val = (umin + u) * unit;
            let vec = vectorscale(unit_vect, offset + val);
            let text = this.format ? sprintf(this.format, val) : val.toString();
            if(u == uoffset){
                // apply offset to original marks and label groups
                this.origin_transform.setTranslate(vec.x, vec.x);

                // update original label text
                this.label_and_mark.label.textContent = text;
            } else {
                let [transform,element] = this.mlg_clones[i++];

                // apply unit vector*N to marks and label groups
                transform.setTranslate(vec.x, vec.x);

                // update label text
                element.getElementsByTagName("tspan")[0].textContent = text;

                // Attach to group if not already
                if(i >= this.last_mark_count){
                    this.group.appendChild(element);
                }
            }
        }

        // dettach marks and label from group if not anymore visible
        for(let i = current_mark_count; i < this.last_mark_count; i++){
            let [transform,element] = this.mlg_clones[i];
            this.group.removeChild(element);
        }

        this.last_mark_count = current_mark_count;
    }
}
||