interface Data {
    data: number[][]
    realLength: number
}

interface Point {
    x: number
    y: number
}

function waterfall(this: any, dom: string, o = {
    title: '',
    height: '100%',
    detail_url: ''
}) {
    let options = o
    let modules = {
        dom: {
            $: function (selector: string) {
                return document.querySelector(selector)
            },
            h: function (tag: string, attrs?: { [x: string]: any|null; }, cls?: string[], style?: any, children?: string | any[] | object) {
                let dom = document.createElement(tag);
                if (attrs) {
                    Object.keys(attrs).map(function (key) {
                        // @ts-ignore
                        dom[key] = attrs[key];
                    })
                }
                if (cls) {
                    cls.map(function (c: string) {
                        dom.classList.add(c)
                    })
                }
                if (style) {
                    this.setStyle(dom, style)
                }
                if (children) {
                    if (typeof children === 'string' || typeof children === 'number') {
                        dom.innerText = children;
                    } else {
                        if (children instanceof Array) {
                            children.map(function (child) {
                                dom.appendChild(child)
                            })
                        } else {
                            dom.appendChild(<Node>children)
                        }
                    }
                }
                return dom;
            },
            setStyle: function (dom: any, style: any) {
                Object.keys(style).map(function (key) {
                    dom.style[key] = style[key]
                })
            },
            hasClass: function (dom: Element, cls: string) {
                return dom.classList.contains(cls);
            },
            addClass: function (dom: Element, cls: string) {
                dom.classList.add(cls);
                return dom;
            },
            removeClass: function (dom: Element, cls: string) {
                if (!this.hasClass(dom, cls)) {
                    return;
                }
                dom.classList.toggle(cls);
                return dom;
            },
        }
    };

    let scrollBar: Function | object;
    let color = [[0, 0, 255], [0, 2, 253], [0, 4, 251], [0, 8, 247], [0, 12, 244], [0, 16, 240], [0, 20, 236], [0, 23, 232], [0, 27, 228], [0, 31, 224], [0, 35, 221], [0, 39, 217], [0, 43, 213], [0, 47, 209], [0, 51, 205], [0, 54, 201], [0, 58, 197], [0, 62, 193], [0, 66, 190], [0, 70, 186], [0, 74, 182], [0, 77, 178], [0, 81, 174], [0, 83, 172], [0, 85, 170], [0, 89, 166], [0, 93, 162], [0, 97, 159], [0, 101, 155], [0, 105, 151], [0, 108, 147], [0, 112, 143], [0, 116, 139], [0, 120, 136], [0, 124, 132], [0, 126, 130], [0, 128, 128], [0, 132, 124], [0, 136, 120], [0, 139, 116], [0, 143, 112], [0, 147, 108], [0, 151, 105], [0, 155, 101], [0, 159, 97], [0, 162, 93], [0, 166, 89], [0, 170, 85], [0, 174, 81], [0, 178, 77], [0, 182, 74], [0, 186, 70], [0, 190, 66], [0, 193, 62], [0, 197, 58], [0, 201, 54], [0, 205, 51], [0, 209, 47], [0, 213, 43], [0, 217, 39], [0, 221, 35], [0, 224, 31], [0, 228, 27], [0, 232, 23], [0, 236, 20], [0, 240, 16], [0, 244, 12], [0, 247, 8], [0, 251, 4], [0, 255, 0], [4, 255, 0], [8, 255, 0], [12, 255, 0], [16, 255, 0], [20, 255, 0], [23, 255, 0], [27, 255, 0], [31, 255, 0], [35, 255, 0], [39, 255, 0], [43, 255, 0], [47, 255, 0], [51, 255, 0], [54, 255, 0], [58, 255, 0], [62, 255, 0], [66, 255, 0], [70, 255, 0], [74, 255, 0], [77, 255, 0], [81, 255, 0], [85, 255, 0], [89, 255, 0], [93, 255, 0], [97, 255, 0], [101, 255, 0], [105, 255, 0], [108, 255, 0], [112, 255, 0], [116, 255, 0], [120, 255, 0], [124, 255, 0], [128, 255, 0], [132, 255, 0], [136, 255, 0], [139, 255, 0], [143, 255, 0], [147, 255, 0], [151, 255, 0], [155, 255, 0], [159, 255, 0], [162, 255, 0], [166, 255, 0], [170, 255, 0], [174, 255, 0], [178, 255, 0], [182, 255, 0], [186, 255, 0], [190, 255, 0], [193, 255, 0], [197, 255, 0], [201, 255, 0], [205, 255, 0], [209, 255, 0], [213, 255, 0], [217, 255, 0], [221, 255, 0], [224, 255, 0], [228, 255, 0], [232, 255, 0], [236, 255, 0], [240, 255, 0], [244, 255, 0], [247, 255, 0], [251, 255, 0], [255, 255, 0], [255, 251, 0], [255, 249, 0], [255, 247, 0], [255, 245, 0], [255, 244, 0], [255, 240, 0], [255, 238, 0], [255, 236, 0], [255, 234, 0], [255, 232, 0], [255, 230, 0], [255, 228, 0], [255, 226, 0], [255, 224, 0], [255, 223, 0], [255, 221, 0], [255, 219, 0], [255, 217, 0], [255, 215, 0], [255, 213, 0], [255, 209, 0], [255, 207, 0], [255, 205, 0], [255, 203, 0], [255, 201, 0], [255, 199, 0], [255, 197, 0], [255, 195, 0], [255, 193, 0], [255, 192, 0], [255, 190, 0], [255, 188, 0], [255, 186, 0], [255, 182, 0], [255, 180, 0], [255, 178, 0], [255, 176, 0], [255, 174, 0], [255, 172, 0], [255, 170, 0], [255, 166, 0], [255, 164, 0], [255, 162, 0], [255, 160, 0], [255, 159, 0], [255, 157, 0], [255, 155, 0], [255, 153, 0], [255, 151, 0], [255, 149, 0], [255, 147, 0], [255, 145, 0], [255, 143, 0], [255, 141, 0], [255, 139, 0], [255, 137, 0], [255, 136, 0], [255, 134, 0], [255, 132, 0], [255, 128, 0], [255, 124, 0], [255, 121, 0], [255, 120, 0], [255, 118, 0], [255, 116, 0], [255, 114, 0], [255, 112, 0], [255, 110, 0], [255, 108, 0], [255, 106, 0], [255, 105, 0], [255, 103, 0], [255, 101, 0], [255, 99, 0], [255, 97, 0], [255, 95, 0], [255, 93, 0], [255, 91, 0], [255, 89, 0], [255, 85, 0], [255, 81, 0], [255, 79, 0], [255, 77, 0], [255, 75, 0], [255, 74, 0], [255, 72, 0], [255, 70, 0], [255, 68, 0], [255, 66, 0], [255, 64, 0], [255, 62, 0], [255, 58, 0], [255, 56, 0], [255, 54, 0], [255, 53, 0], [255, 51, 0], [255, 49, 0], [255, 47, 0], [255, 45, 0], [255, 43, 0], [255, 39, 0], [255, 37, 0], [255, 35, 0], [255, 33, 0], [255, 31, 0], [255, 29, 0], [255, 27, 0], [255, 25, 0], [255, 23, 0], [255, 21, 0], [255, 20, 0], [255, 18, 0], [255, 16, 0], [255, 12, 0], [255, 16, 0], [255, 8, 0], [255, 6, 0], [255, 4, 0], [255, 2, 0], [255, 0, 0], [255, 255, 255]];
    let jdom: Element;
    let canvasID = dom + "_canvas";
    let canvasSelf: HTMLCanvasElement;
    let toolsPanelID = dom + "_tools";
    let toolsPanel: HTMLElement;
    let tools1 = dom + "_tools1";

    // x 轴单位 M
    const xUnit = 'M';
    // y 轴单位 F
    const yUnit = 'F';
    // x 轴坐标值 X
    const xUnit1 = 'X';
    // y 轴坐标值 Y
    const yUnit1 = 'Y';
    // x 轴刻度值集合
    let xNum: number[];
    // y 轴刻度值集合
    let yNum: number[];
    // x 轴坐标值集合
    let xLocality: number[];
    // y 轴坐标值集合
    let yLocality: number[];
    // x 轴刻度值最大值,默认10000
    let xMax = 10000;
    // x 轴刻度值最小值,默认0
    let xMin = 0;
    // y 轴刻度值最大值,默认5
    let yMax = 5;
    // y 轴刻度值最小值,默认-100
    let yMin = -100;
    // x,y刻度值
    let resetLoc = {
        xMax: 10000,
        xMin: 0,
        yMax: 5,
        yMin: -100
    };
    // 边框四点坐标
    let imgFrame: { x: number, y: number }[];
    // 上下左右边距
    let grid = {
        // x 距离左边距 60px
        x: 60,
        // y 距离下边距 50px
        y: 50,
        // y 距离右边距 10px
        x2: 10,
        // y 距离上边距 10px
        y2: 10
    };
    // 当前图表的宽度
    let canvasWidth = 0;
    // 当前图表的高度度
    let canvasHeight = 0;
    // 单位集合
    let unitsList: number[];
    // 刻度颜色
    let color1 = "rgb(160, 160, 160)";
    // 边框颜色
    let color2 = "rgb(210,210,210)";
    let ctx!: CanvasRenderingContext2D;
    // 鼠标是否按下
    let isMouseDown = false;
    // ctrl是否按下
    let isCtrlDown = false;
    // 选择模式
    let selectState = 1;
    // 鼠标坐标
    let mouse = {x: 0, y: 0, width: 0, height: 0};
    // 鼠标坐标值
    let mouseValue = {x: 0, y: 0};

    // x 轴单位坐标值
    let numX: number;
    // y 轴单位坐标值
    let numY: number;

    //信号的颜色数组
    let cache = [];
    // 信号数据
    let data: { data: number[][], realLength: number } = {data: [], realLength: 1};

    let timeout = 0;

    let _data: ImageData;

    // 设置信号值
    this.setData = function (value: Data) {
        data = value;
        countPosition(value);
    }

    this.destroy = function () {
        clearTimeout(timeout);
        Array.from(jdom.children).map(
            function (item) {
                jdom.removeChild(item)
            }
        )
    }

    // 设置x轴?? todo
    let setXAlias = function (s: number, e: number) {
        // xMin = s;
        // xMax = e;
        // console.log(s, e)
        setXMin(s * resetLoc.xMax);
        setXMax(e * resetLoc.xMax);
        changeTable(xMin, xMax, false);
        countPosition(data);
        numY = (yMax - yMin) / (canvasHeight - grid.y - grid.y2);
        numX = (xMax - xMin) / (canvasWidth - grid.x - grid.x2);
    }

    // 计算位置
    function countPosition(v: Data) {
        // _data=[];
        let d = v.data;
        let realLength = v.realLength;
        if (d.length === 0) {
            let ctx = <CanvasRenderingContext2D>canvasSelf.getContext('2d');
            _data = ctx.createImageData(1, 1);
            return;
        }


        let imageW = canvasWidth - grid.x - grid.x2;
        let imageH = canvasHeight - grid.y - grid.y2;
        let numY = imageH / (yMax - yMin);
        let numX = imageW / (xMax - xMin);///realLength;
        //let widthMin = Math.round(xMin *numX);//y轴最小植
        //let heightMin = Math.round(yMin * numY);//y轴最大植
        let ctx = <CanvasRenderingContext2D>canvasSelf.getContext('2d');

        //ctx.clearRect(grid.x,grid.y2,imageW,imageH);
        _data = ctx.createImageData(imageW, imageH);


        // eslint-disable-next-line no-unused-vars
        let x = xMin;//画布左下角刻度
        let y = yMax;//画布的左上角刻度
        //横坐标渐变
        for (let i = 0; i < imageH; i++) {

            y = Math.floor(i / numY) - yMax;

            if (y >= d.length) {
                continue
            }
            let row_num = i * imageW * 4;

            if (y < 0 || y >= d.length || d[y].length === 0) {
                //cache[i].fill(256);
                continue;
            }


            for (let j = 0; j < imageW; j++) {
                let col_num = j * 4;
                let index_x = Math.floor((j / numX + xMin) / realLength);
                if (index_x >= d[y].length) {
                    continue
                }
                if (index_x < 0) {
                    let rgb = color[256];
                    _data.data[row_num + col_num] = rgb[0];
                    _data.data[row_num + col_num + 1] = rgb[1];
                    _data.data[row_num + col_num + 2] = rgb[2];
                    _data.data[row_num + col_num + 3] = 255;
                    continue;
                }
                let c_color = d[y][index_x];
                let rgb = color[parseInt(String(c_color + 0.5))];

                _data.data[row_num + col_num] = rgb[0];
                _data.data[row_num + col_num + 1] = rgb[1];
                _data.data[row_num + col_num + 2] = rgb[2];
                _data.data[row_num + col_num + 3] = 255;

                x++;
            }
        }


    }

    function resize() {
        modules.dom.setStyle(toolsPanel, {height: '30px',})
        canvasSelf.setAttribute("width", String(jdom.clientWidth));
        canvasSelf.setAttribute("height", String(jdom.clientHeight - 60));
        canvasWidth = jdom.clientWidth;
        canvasHeight = canvasSelf.clientHeight;
        numY = (yMax - yMin) / (canvasHeight - grid.y - grid.y2);
        numX = (xMax - xMin) / (canvasWidth - grid.x - grid.x2);
        changeTable(xMin, xMax, false);
        changeTable(yMin, yMax, true);

        //颜色缓存
        let imageW = canvasWidth - grid.x - grid.x2;
        let imageH = canvasHeight - grid.y - grid.y2;
        if (imageH > 0) {
            cache = new Array(imageH);
            for (let i = 0; i < imageH; i++) {
                cache[i] = new Array(imageW).fill(256);
            }
        }

        countPosition(data);
    }

    this.resize = resize;

    function round(v: number, e?: number) {
        let t = 1;
        if (e === undefined) {
            return Math.round(v * t) / t;
        }
        for (; e > 0; t *= 10, e--) {
        }
        for (; e < 0; t /= 10, e++) {
        }
        return Math.round(v * t) / t;
    }

    function InitUnits() {
        unitsList = [];
        let d = 0.000001;
        let num = 6;
        while (d <= 1000000) {
            unitsList.push(d);
            unitsList.push(round(d * 5, num));
            d = round(d * 10, num);
            if (num !== 0) {
                num--;
            }
        }
    }

    function initFrame() {
        imgFrame = new Array(4);
        imgFrame[0] = {x: grid.x, y: grid.y2};//左上点
        imgFrame[1] = {x: canvasWidth - grid.x2, y: grid.y2};//右上点
        imgFrame[2] = {x: canvasWidth - grid.x2, y: canvasHeight - grid.y};//右下点
        imgFrame[3] = {x: grid.x, y: canvasHeight - grid.y};//左上点
        //imgFrame[4] = {x:0, y:0};//左上点
    }

    function changeTable(min: number, max: number, type: boolean) {
        let distance = max - min;//两点间的距离
        let copyMin = min;//报存一个 拷贝数据
        let temp = distance / 10;//一般纵向的 10个点
        //0.000001 这样的精度完全没有必要
        if (temp < unitsList[0]) {
            return;
        }
        for (let i = 0; i < unitsList.length - 1; i++) {
            if (temp >= unitsList[i] && temp < unitsList[i + 1]) {
                let dUnits;//每次递减的 单位;

                let tempUnits;//报存一个 单位的拷贝数据
                if (temp - unitsList[i] > unitsList[i + 1] - temp)//看看 靠谁近
                {
                    i++;
                }
                tempUnits = unitsList[i];//这是最近的
                if (i % 2 == 0)//偶数 0.000001
                {
                    dUnits = unitsList[i];
                } else//基数 0.000005
                {
                    dUnits = unitsList[i] / 5;
                }
                let num = 0;//控制递减的次数

                if (type) {
                    let res = ChangeY(min, max, copyMin, i, dUnits, tempUnits, num);//这是改变 y轴
                    copyMin = res.copyMin;
                    tempUnits = res.tempUnits;
                    num = res.num;

                } else {
                    let res = ChangeX(min, max, copyMin, i, dUnits, tempUnits, num);//这是改变 x轴
                    copyMin = res.copyMin;
                    tempUnits = res.tempUnits;
                    num = res.num;
                    // scrollBar.setMin(min);
                    // scrollBar.setMax(max);
                }
            }
        }
        //到这里就是失败了
    }


    function ChangeX(min: number, max: number, copyMin: number, i: number, dUnits: number, tempUnits: number, num: number) {
        while (true) {
            xNum = [];//记录前先清空集合
            let j = 1;
            copyMin += tempUnits - min % tempUnits;//下限是可以调的 所以要 算出 他是不是单位的整倍数
            if (copyMin != min) {
                xNum.push(copyMin);//添加 一个位置
            }
            while (true) {
                copyMin += tempUnits;
                j++;
                if (j > 20)//表格x轴的点数过多 不合格
                {
                    break;
                }
                if (copyMin >= max)//跳出的条件
                {
                    break;
                }
                xNum.push(copyMin);//添加一个位置
            }

            if (j <= 20 && j >= 5)//OK已经算出每个点的具体单位距离
            {
                // double numX = (XMax + XMin) / (imgWidth - sideWidth);//x轴的单位
                let proportion = (canvasWidth - grid.x - grid.x2) / (xMax - xMin);//x轴的单位 (imgWidth - sideWidth) / ((max - min) / dUint) / dUint;//坐标相对于屏幕的 比例
                xLocality = [];
                for (let k = 0; k < xNum.length; k++) {
                    let nowLoc = (xNum[k] - xMin) * proportion + grid.x;//当前的值
                    xLocality.push(nowLoc);//加重显示的坐标
                }

                xNum.push(max);//添加尾
                xNum.splice(0, 0, min);//插入 头
                break;

            } else {
                copyMin = min;
                tempUnits = unitsList[i + 1] - dUnits * num;
            }
            num++;//运算一次加一次
        }
        return {copyMin, tempUnits, num};
    }

    function ChangeY(min: number, max: number, copyMin: number, i: number, dUnits: number, tempUnits: number, num: number) {
        while (true) {
            yNum = [];//记录前先清空集合
            let j = 1;
            copyMin += tempUnits - min % tempUnits;//下限是可以调的 所以要 算出 他是不是单位的整倍数
            if (copyMin != min) {
                yNum.push(copyMin);//添加 一个位置
            }
            while (true) {
                copyMin += tempUnits;
                j++;
                if (j > 15)//表格x轴的点数过多 不合格
                {
                    break;
                }
                if (copyMin >= max)//跳出的条件
                {
                    break;
                }
                yNum.push(copyMin);//添加一个位置
            }

            if (j <= 15 && j >= 5)//OK已经算出每个点的具体单位距离
            {
                let proportion = (canvasHeight - grid.y - grid.y2) / (yMax - yMin);//y轴的单位 imgHeight / ((max - min) / dUint) / dUint;//坐标相对于屏幕的 比例
                yLocality = [];
                for (let k = 0; k < yNum.length; k++)//单线
                {
                    yLocality.push(canvasHeight - (((yNum[k] - min) * proportion) + grid.y));//点的坐标
                }
                if (dUnits < unitsList[2] && dUnits >= unitsList[0])//double 数据小数部分 精度会有误差, 所以要通过四舍五入修改一下
                {
                    for (let l = 0; l < yNum.length; l++) {
                        yNum[l] = round(yNum[l], 6);
                    }
                } else if (dUnits < unitsList[4] && dUnits >= unitsList[2])//double 数据小数部分 精度会有误差, 所以要通过四舍五入修改一下
                {
                    for (let l = 0; l < yNum.length; l++) {
                        yNum[l] = round(yNum[l], 5);
                    }
                } else if (dUnits < unitsList[6] && dUnits >= unitsList[4])//double 数据小数部分 精度会有误差, 所以要通过四舍五入修改一下
                {
                    for (let l = 0; l < yNum.length; l++) {
                        yNum[l] = round(yNum[l], 4);
                    }
                } else if (dUnits < unitsList[8] && dUnits >= unitsList[6])//double 数据小数部分 精度会有误差, 所以要通过四舍五入修改一下
                {
                    for (let l = 0; l < yNum.length; l++) {
                        yNum[l] = round(yNum[l], 3);
                    }
                } else if (dUnits < unitsList[10] && dUnits >= unitsList[8])//double 数据小数部分 精度会有误差, 所以要通过四舍五入修改一下
                {
                    for (let l = 0; l < yNum.length; l++) {
                        yNum[l] = round(yNum[l], 2);
                    }
                } else if (dUnits < unitsList[12] && dUnits >= unitsList[10])//double 数据小数部分 精度会有误差, 所以要通过四舍五入修改一下
                {
                    for (let l = 0; l < yNum.length; l++) {
                        yNum[l] = round(yNum[l], 1);
                    }
                } else//double 数据小数部分 精度会有误差, 所以要通过四舍五入修改一下
                {
                    for (let l = 0; l < yNum.length; l++) {
                        yNum[l] = round(yNum[l]);
                    }
                }
                yNum.push(max);//添加尾
                yNum.splice(0, 0, min);//插入 头
                break;
            } else {
                copyMin = min;
                tempUnits = unitsList[i + 1] - dUnits * num;
            }
            num++;//运算一次加一次
        }
        return {copyMin, tempUnits, num};
    }

    function drawTable() {
        ctx.beginPath();
        ctx.strokeStyle = color2;

        ctx.moveTo(imgFrame[0].x, imgFrame[0].y);
        ctx.lineTo(imgFrame[1].x, imgFrame[1].y);
        ctx.lineTo(imgFrame[2].x, imgFrame[2].y);
        ctx.lineTo(imgFrame[3].x, imgFrame[3].y);
        ctx.lineTo(imgFrame[0].x, imgFrame[0].y);
        ctx.stroke();
        //g.DrawLines(pens[2], imgFrame);//画外框架

        let j = 0;//yNum.Count-1;

        j++;
        ctx.beginPath();
        ctx.strokeStyle = color1;
        ctx.fillStyle = 'black';
        ctx.textBaseline = 'bottom';
        ctx.textAlign = "right";

        for (let i = 0; i < yLocality.length; i++)//单线 y轴
        {
            ctx.moveTo(grid.x - 10, yLocality[i]);
            ctx.lineTo(grid.x, yLocality[i]);
            //g.DrawLine(pens[0], scaleWidth, (float)yLocality[i], imgWidth, (float)yLocality[i]);//画表格线
            ctx.fillText(yNum[j] + yUnit, grid.x - 10, yLocality[i]);
            //g.DrawString(yNum[j].ToString(), font, blackBrush, scaleWidth, (float)yLocality[i] - 10, strFormat);//画表格 刻度 数值
            j++;
        }
        j = 1;
        for (let i = 0; i < xLocality.length; i++)//单线 x轴
        {
            ctx.moveTo(xLocality[i], canvasHeight - grid.y);
            ctx.lineTo(xLocality[i], canvasHeight - grid.y + 10);
            //g.DrawLine(pens[0], (float)xLocality[i], 0, (float)xLocality[i], imgHeight);//画表格线
            j++;
        }
        ctx.stroke();


        ctx.fillStyle = 'orangeRed';
        ctx.textBaseline = 'middle';
        ctx.fillText(yNum[0] + yUnit, grid.x - 10, canvasHeight - grid.y);
        //g.DrawString(yNum[0].ToString(), font, OrangeRedBrush, 50, imgHeight - 15, StringFormat.GenericDefault);//画表格 刻度 数值 下限
        //g.DrawString(YMax.ToString(), font, OrangeRedBrush, 50, 0, StringFormat.GenericDefault);
        ctx.fillText(yMax + yUnit, grid.x - 10, grid.y2);
    }

    function drawTableFront() {
        ctx.beginPath();
        ctx.strokeStyle = color2;
        ctx.moveTo(imgFrame[0].x, imgFrame[0].y);
        ctx.lineTo(imgFrame[1].x, imgFrame[1].y);
        ctx.lineTo(imgFrame[2].x, imgFrame[2].y);
        ctx.lineTo(imgFrame[3].x, imgFrame[3].y);
        ctx.lineTo(imgFrame[0].x, imgFrame[0].y);
        ctx.stroke();
        let j = 0;
        ctx.fillStyle = 'orangeRed';
        ctx.textAlign = 'right';
        ctx.textBaseline = 'top';
        ctx.fillText(xNum[j] + xUnit, grid.x, canvasHeight - grid.y + 15);
        ctx.fillText(xNum[xNum.length - 1] + xUnit, canvasWidth - grid.x2, canvasHeight - grid.y + 15);
        //g.DrawString(xNum[j].ToString(), font, OrangeRedBrush, (int)sideWidth, imgHeight + 10, strFormat);//画表格 刻度 数值 下限
        //g.DrawString(xNum[xNum.Count - 1].ToString(), font, OrangeRedBrush, imgWidth, imgHeight + 10, strFormat);//画表格 刻度 数值 上限
        j++;
        ctx.fillStyle = 'black';
        for (let i = 0; i < xLocality.length; i++)//刻度
        {
            ctx.fillText(xNum[j] + xUnit, xLocality[i], canvasHeight - grid.y + 5);
            //  g.DrawString(xNum[j].ToString(), font, blackBrush, (float)xLocality[i], imgHeight, strFormat);//画表格 刻度 数值
            j++;
        }
    }

    function refresh() {
        if (!canvasSelf.getContext) {
            alert("浏览器版本过低，部分模块无法正常工作！");
            return;
        }

        //countPosition(data);
        ctx = <CanvasRenderingContext2D>canvasSelf.getContext('2d');

        // ctx.fillStyle="#FFFFFF";
        ctx.clearRect(grid.x, grid.y2, canvasWidth - grid.x - grid.x2, canvasHeight - grid.y2 - grid.y);
        initFrame();//初始化 这个画板的 框架 四个点

        ctx.putImageData(_data, grid.x, grid.y2);

        ctx.clearRect(0, 0, grid.x, canvasHeight);
        ctx.clearRect(0, 0, canvasWidth, grid.y2);
        ctx.clearRect(canvasWidth - grid.x2, 0, grid.x2, canvasHeight);
        ctx.clearRect(0, canvasHeight - grid.y, canvasWidth, grid.y);

        drawTable();

        if (!isMouseDown) {
            ctx.beginPath();
            ctx.strokeStyle = 'green';
            ctx.moveTo(grid.x, mouse.y);
            ctx.lineTo(canvasWidth - grid.x2, mouse.y);
            ctx.moveTo(mouse.x, grid.y2);
            ctx.lineTo(mouse.x, canvasHeight - grid.y);
            ctx.stroke();
        } else if (selectState === 1) {
            ctx.strokeStyle = 'green';
            ctx.strokeRect(mouse.x, mouse.y, mouse.width, mouse.height);
            //console.log(mouse.width+"    "+mouse.height);
        }

        drawTableFront();
        //ctx.font = "9px Arial";
        ctx.textAlign = "right";
        ctx.fillStyle = "green";
        ctx.fillText(xUnit1 + ':' + round(mouseValue.x, 2) + xUnit, canvasWidth - 90 - grid.x2, grid.y2 + 10);
        ctx.fillText(yUnit1 + ':' + round(mouseValue.y, 2) + yUnit, canvasWidth - grid.x2 - 10, grid.y2 + 10);

        timeout = setTimeout(function () {
            requestAnimationFrame(refresh);
        }, 100);


    }

    function setXMax(e: number) {
        if ((e - xMin) > 20) {
            xMax = round(e, 0);
        } else {
            xMax = xMin + 20;
        }
    }

    function setYMax(e: number) {
        if ((e - yMin) > 20) {
            yMax = round(e, 0);
        } else {
            yMax = yMin + 20;
        }
    }

    function setXMin(e: number) {
        if ((xMax - e) > 20) {
            xMin = round(e, 0);
        } else {
            xMin = xMax - 20;
        }
    }

    function setYMin(e: number) {
        if ((yMax - e) > 20) {
            yMin = round(e, 0);
        } else {
            yMin = yMax - 20;
        }
    }

    //选择状态1
    function selectState1(point: Point) {
        mouse.width = point.x - mouse.x;
        mouse.height = point.y - mouse.y;
    }

    //选择状态2
    function selectState2(point: Point, numX: number, numY: number) {
        let x = mouse.x - point.x;
        let y = mouse.y - point.y;
        if (x > 0) {
            setXMax(xMax + x * numX);
            setXMin(xMin + x * numX);
        } else if (x < 0) {
            setXMax(xMax + x * numX);
            setXMin(xMin + x * numX);
        }

        if (y > 0) {
            setYMax(yMax - y * numY);
            setYMin(yMin - y * numY);
        } else if (y < 0) {
            setYMax(yMax - y * numY);
            setYMin(yMin - y * numY);
        }

    }

    //选择状态3
    function selectState3(point: Point, numX: number, numY: number) {
        let x = mouse.x - point.x;
        let y = mouse.y - point.y;
        if (!isCtrlDown) {
            if (Math.round(x) !== 0) {
                setXMax(xMax + x * numX);
            }
            if (Math.round(y) !== 0) {
                setYMax(yMax - y * numY);
            }
        } else {
            if (Math.round(x) !== 0) {
                setXMin(xMin + x * numX);
            }

            if (Math.round(y) !== 0) {
                setYMin(xMin - y * numY);
            }
        }


    }

    //选择状态4
    function selectState4(point: Point, numX: number, numY: number) {
        let x = mouse.x - point.x;
        let y = mouse.y - point.y;
        if (Math.floor(x) !== 0) {
            setXMin(xMin + x * numX);
        }
        if (Math.floor(y) !== 0) {
            setYMin(yMin - y * numY);
        }


    }


    function mousedown(e: MouseEvent) {

        if (e.offsetX < grid.x
            || e.offsetX > (canvasWidth - grid.x2
                || e.offsetY < grid.y
                || e.offsetY > canvasHeight - grid.y2)) {
            return
        }
        isMouseDown = true;
        numY = (yMax - yMin) / (canvasHeight - grid.y - grid.y2);
        numX = (xMax - xMin) / (canvasWidth - grid.x - grid.x2);
        mouse.x = e.offsetX;
        mouse.y = e.offsetY;
    }

    function mouseup() {
        if (!isMouseDown) {
            return;
        }
        isMouseDown = false;
        if (selectState === 1) {
            if (mouse.width < 2 && mouse.height < 2) {
                return;
            }
            //	let numX=(xMax-xMin)/(canvasWidth-grid.x-grid.x2);
            //let numY=(yMax-yMin)/(canvasHeight-grid.y-grid.y2);
            setXMax(numX * (mouse.x - grid.x + mouse.width) + xMin);
            setXMin(numX * (mouse.x - grid.x) + xMin);
            setYMin(yMax - numY * (mouse.y + mouse.height));
            setYMax(yMax - numY * mouse.y);
            changeTable(xMin, xMax, false);
            changeTable(yMin, yMax, true);
            countPosition(data);
            mouse.width = 0;
            mouse.height = 0;
        }
        numY = (yMax - yMin) / (canvasHeight - grid.y - grid.y2);
        numX = (xMax - xMin) / (canvasWidth - grid.x - grid.x2);
    }

    function mousemove(e: MouseEvent) {

        let point = {x: 0, y: 0};//=getPointOnCanvas(e.pageX,e.pageY);
        point.x = e.offsetX;//e.pageX - this.offsetLeft;
        point.y = e.offsetY;//e.pageY - this.offsetTop;
        if (e.offsetX < grid.x
            || e.offsetX > (canvasWidth - grid.x2
                || e.offsetY < grid.y
                || e.offsetY > canvasHeight - grid.y2)) {
            return
        }


        if (isMouseDown) {

            if (selectState === 1) {
                selectState1(point);
                return;
            } else if (selectState === 2) {
                selectState2(point, numX, numY);
            } else if (selectState === 3) {
                selectState3(point, numX, numY);
            } else {
                selectState4(point, numX, numY);
            }
            changeTable(xMin, xMax, false);
            changeTable(yMin, yMax, true);
            countPosition(data);
            //refresh();
            //	return;
        }
        mouse.x = point.x;
        mouse.y = point.y;
        mouseValue.y = yMax - (numY * (point.y - grid.y2));
        mouseValue.x = numX * (point.x - grid.x) + xMin;
        //refresh();
    }

    function onkeydown(e: KeyboardEvent) {
        if (e.keyCode === 0x11) {
            isCtrlDown = true;
        }
    }

    function onkeyup(e: KeyboardEvent) {
        if (e.keyCode === 0x11) {
            isCtrlDown = false;
        }
    }


    function ScrollBar() {
        let setStyle = modules.dom.setStyle;
        let wrap_style = {
            boxSizing: 'content-box',
            height: '20px',
            padding: '0 10px 10px 60px',
        };

        let inner_style = {
            position: 'relative',
            height: '100%',
            background: '#eee',
            boxShadow: '1px 1px 2px 0 rgba(0, 0, 0, .12) inset',
            borderRadius: '10px',
            overflow: 'hidden',
        };

        let field_style = {
            position: 'absolute',
            top: 0,
            bottom: 0,
            background: 'rgb(0, 51, 119)',
            cursor: 'ew-resize',
            zIndex: 10,
            userSelect: 'none',
        };

        let bar_style = {
            position: 'absolute',
            width: '20px',
            height: '20px',
            left: 0,
            top: 0,
            background: '#fff',
            borderRadius: '100%',
            cursor: 'ew-resize',
            zIndex: 20,
            boxShadow: '3px 3px 5px 0 rgba(0, 0, 0, .4)',
            userSelect: 'none',
        };

        let labelStyles = '.bar::after {'
            + 'content: attr(data-value);'
            + 'position: absolute;'
            + 'top: 50%;'
            + 'transform: translateY(-50%);'
            + 'color: #fff;'
            + 'font-size: 13px;}'
            + '.start::after {'
            + 'left: 25px;}'
            + '.end::after {'
            + 'right: 25px;}'
            + '.turn .start::after {right: 25px;}'
            + '.turn .end::after {left: 25px;}'
            + '.turn .start::after {left: unset}';

        let createStyleSheet = function () {
            let style = modules.dom.h('style', {
                type: 'text/css'
            }, null, null, labelStyles);
            document.head.appendChild(style);
        };

        createStyleSheet();

        let _field_bar = modules.dom.h('div', null, ['field'], field_style);
        let _start_bar = <HTMLOrSVGElement>modules.dom.h('div', null, ['bar', 'start'], bar_style);
        let _end_bar = modules.dom.h('div', null, ['bar', 'end'], bar_style);

        let inner = modules.dom.h('div', {
            id: 'inner'
        }, ['scroll-inner'], inner_style, [_field_bar, _start_bar, _end_bar]);

        // @ts-ignore todo
        let wrap = modules.dom.h('div', {
            id: 'scroll-bar'
        }, null, wrap_style, inner);

        document.getElementById(dom)!.appendChild(wrap);

        let barSize = 20;
        let _start = 0, _end = 0;
        let _min = 0, _max = inner.clientWidth - barSize;

        function Drag(elm: HTMLDivElement, init: number) {
            let _x = 0;
            this.draging = false;
            this.value = init;
            let self = this;
            elm.onmousedown = function (ev: MouseEvent) {
                self.draging = true;
                _x = ev.clientX;
            };
            document.addEventListener('mouseup', function () {
                self.draging = false;
            });
            document.addEventListener('mousemove', function (ev) {
                if (!self.draging) {
                    return;
                }
                self.value += ev.clientX - _x;
                if (self.value < _min) {
                    self.value = _min;
                } else if (self.value > _max) {
                    self.value = _max;
                }
                _x = ev.clientX;
                self.setPosition(self.value);
            })
            this.setPosition = function (x: number) {
                self.value = x;
                if (self.onChange) {
                    self.onChange(x)
                }
                setStyle(elm, {
                    transform: 'translateX(' + x + 'px)',
                })
            };
            this.setPosition(self.value);
        }

        function Range(elm: HTMLDivElement) {
            let _x = 0;
            this.draging = false;
            let self = this;
            elm.onmousedown = function (ev: MouseEvent) {
                self.draging = true;
                _x = ev.clientX;
            };
            document.addEventListener('mouseup', function () {
                self.draging = false;
            });
            document.addEventListener('mousemove', function (ev: MouseEvent) {
                if (!self.draging) {
                    return;
                }
                let diff = ev.clientX - _x;
                let __start = 0, __end = 0;
                __start = _start + diff;
                __end = _end + diff;
                if (self.onChange) {
                    let __min = Math.min(__start, __end);
                    let __max = Math.max(__start, __end);
                    if (__min >= _min && __max <= _max) {
                        self.onChange(__start, __end);
                    }
                }
                _x = ev.clientX;
            })
        }

        let updateField = function () {
            let min = Math.min(_start, _end), max = Math.max(_start, _end);
            setStyle(_field_bar, {
                left: (min + barSize / 2) + 'px',
                right: 'calc(100% - ' + (max + barSize / 2) + 'px)'
            })
            _start > _end ? modules.dom.addClass(inner, 'turn') : modules.dom.removeClass(inner, 'turn');
            setXAlias(min / _max, max / _max);
        };

        let barValue = function (value: number) {
            return Math.round(value * resetLoc.xMax / _max);
        };

        // @ts-ignore
        let start = new Drag(_start_bar, _start);
        start.onChange = function (ev: number) {
            _start = ev;
            _start_bar.dataset.value = String(barValue(ev));
            updateField();
        }
        // @ts-ignore
        let end = new Drag(_end_bar, _end);
        end.onChange = function (ev: number) {
            _end = ev;
            _end_bar.dataset.value = String(barValue(ev));
            updateField();
        }
        // @ts-ignore
        let filed = new Range(_field_bar);
        filed.onChange = function (s: number, e: number) {
            _start = s;
            _end = e;
            start.setPosition(_start);
            end.setPosition(_end);
            updateField();
        };
        this.setMin = function (value: number) {
            _start = value * _max / resetLoc.xMax;
            _start_bar.dataset.value = String(value);
        };
        this.setMax = function (value: number) {
            _end = value * _max / resetLoc.xMax;
            _end_bar.dataset.value = String(value);
        };
        this.reset = function () {
            _start = _min;
            _end = _max;
            start.setPosition(_start);
            end.setPosition(_end);
            updateField();
        };
        this.reset();
    }


    // 图表开始初始化
    function init() {
        let scope = this;
        InitUnits();//初始化 计量单位

        // 获取当前的节点对象
        jdom = modules.dom.$('#' + dom);
        modules.dom.setStyle(jdom, {
            height: options.height,
            backgroundColor: '#fff',
            border: '4px solid rgb(180, 180, 180)',
            borderRadius: '5px'
        });
        // 添加工具面板
        jdom.appendChild(modules.dom.h('div', {id: toolsPanelID,}, null,));
        canvasSelf = <HTMLCanvasElement>modules.dom.h('canvas', {id: canvasID}, null, null, '您的浏览器不支持canvas标签。');
        // 添加绘图canvas
        jdom.appendChild(canvasSelf);
        toolsPanel = <HTMLElement>modules.dom.$('#' + toolsPanelID);
        modules.dom.setStyle(toolsPanel, {
            position: 'relative',
            height: '30px',
            backgroundColor: '#003377'
        });

        let rangeMax = 256;
        let rangeDefault = 30;
        let inputProps = {
            min: 0,
            max: rangeMax,
            defaultValue: rangeDefault,
            id: `${dom}-range`,
            placeholder: '信号过滤'
        };
        let rangeDom = <HTMLInputElement>modules.dom.h('input', Object.assign({
            id: 'range',
            type: 'range',
        }, inputProps), null, {
            color: '#ddd',
            verticalAlign: 'middle',
            margin: '0 5px',
        });
        let rangeValue = <HTMLInputElement>modules.dom.h('input', Object.assign({
            type: 'number'
        }, {defaultValue: rangeDefault, id: `${dom}-range-value`, placeholder: '信号过滤值'},), null, {
            verticalAlign: 'middle',
            width: '40px',
            borderRadius: '5px',
            textAlign: 'center'
        });
        let updateFilter = function (value: number) {
            if (scope.filterChange) {
                scope.filterChange(value)
            }
        };
        rangeDom.addEventListener('input', function (ev: InputEvent) {
            let value = ev.target.value;
            rangeValue.value = value;
            updateFilter(value);
        });
        rangeValue.addEventListener('input', function (ev) {
            let value = ev.target.value;
            rangeDom.value = value;
            updateFilter(value);
        })
        let rangeTool = modules.dom.h('div', null, ['range-tool'], {
            position: 'absolute',
            left: '8px',
            top: '50%',
            transform: 'translateY(-50%)',
            fontFSize: '14px',
            color: '#ddd',
        }, [
            modules.dom.h('label', {
                for: 'range',
            }, null, {
                verticalAlign: 'middle',
                marginBottom: 0
            }, '信号过滤'),
            rangeDom,
            rangeValue,
        ])
        toolsPanel.appendChild(rangeTool);
        toolsPanel.appendChild(modules.dom.h('div', null, ['chart-title'], {
            fontSize: '18px',
            color: '#ffffff',
            textAlign: 'center'
        }, options.title));
        let tools = [
            {
                style: {
                    padding: '5px 8px 5px 8px'
                },
                image: 'data:image/png;base64,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',
                imageStyle: {
                    height: '20px',
                    width: '20px',
                }
            },
            {
                style: {
                    padding: '5px 8px 5px 8px'
                },
                image: 'data:image/png;base64,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',
                imageStyle: {
                    height: '20px',
                    width: '20px',
                }
            },
            {
                style: {
                    padding: '2px 8px 2px 8px'
                },
                image: 'data:image/png;base64,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',
                imageStyle: {
                    height: '26px',
                    width: '26px'
                }
            },
            {
                style: {
                    padding: '5px 10px 5px 10px'
                },
                imageStyle: {
                    height: '20px',
                    width: '22px',
                },
                image: 'data:image/png;base64,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'
            }
        ];

        let toolContainer = modules.dom.h('div', {
            id: tools1,
        }, null, {
            position: 'absolute',
            top: '50%',
            transform: 'translateY(-50%)',
            right: 0,
            padding: 0,
            height: '100%',
        });

        let toolWrap = modules.dom.h('ul', null, null, {
            listStyle: 'none',
            margin: 0,
            padding: 0,
            width: 'auto',
        });
        let toolItems = tools.map(function (tool) {
            let listItem = modules.dom.h('li', null, null, Object.assign({
                display: 'inline-block',
                float: 'left',
            }, tool.style), modules.dom.h('a', {
                href: 'javascript:'
            }, null, null, modules.dom.h('img', {
                src: tool.image,
            }, null, tool.imageStyle)));
            toolWrap.appendChild(listItem);
            return listItem;
        });

        toolItems[0].onclick = function () {
            selectState = 1;
            modules.dom.setStyle(canvasSelf, {
                cursor: 'crosshair'
            })
        };

        toolItems[1].onclick = function () {
            selectState = 2;
            modules.dom.setStyle(canvasSelf, {
                cursor: 'move'
            })
        };

        toolItems[2].onclick = function () {
            selectState = 3;
            modules.dom.setStyle(canvasSelf, {
                cursor: 'move'
            })
        };

        toolItems[3].onclick = function () {
            xMax = resetLoc.xMax;
            xMin = resetLoc.xMin;
            yMax = resetLoc.yMax;
            yMin = resetLoc.yMin;
            numY = (yMax - yMin) / (canvasHeight - grid.y - grid.y2);
            numX = (xMax - xMin) / (canvasWidth - grid.x - grid.x2);
            changeTable(xMin, xMax, false); //改变表格
            changeTable(yMin, yMax, true); //改变表格
            countPosition(data);
            scrollBar.reset();
            //refresh();
        };

        toolContainer.appendChild(toolWrap);
        toolsPanel.appendChild(toolContainer);
        // @ts-ignore
        scrollBar = new ScrollBar();

        window.addEventListener("resize", resize);
        window.addEventListener("keydown", onkeydown);
        window.addEventListener("keyup", onkeyup);
        modules.dom.setStyle(canvasSelf, {cursor: 'crosshair'})
        canvasSelf.addEventListener('mousedown', mousedown);
        canvasSelf.addEventListener('mouseup', mouseup);
        canvasSelf.addEventListener('mousemove', mousemove);
        resize();
        //timer = setInterval(refresh,500);
        refresh(); // tefa 100
        countPosition(data);
        //refresh();
    }

    init.call(this);
}

export default waterfall