Argument of type 'x' is not assignable to parameter of type 'x' in Angular7

Question

I am very new to Angular 7. I am facing errors in below line of code. What is wrong in my code?

var x1 = 10, x2 = 100, x3 = datar.map(function (item) { return [ item.xmax ] })
   .reduce(function(a, b) { return Math.max(a, b); }); //error
var y1 = 10, y2 = 100, y3 = datar.map(function (item) { return [ item.ymax ] })
   .reduce(function(a, b) { return Math.max(a, b); }); //error

In above code I get error: Argument of type number[] is not assignable to parameter of type number at 'a, b' in code return Math.max(a, b)

var data = [ [0,0,0],[0,1,4],[0,2,1],[0,3,1]
                ,[1,0,0],[1,1,9],[1,2,4],[1,3,1]
                ,[2,0,0],[2,1,9],[2,2,9],[2,3,9]
                ,[3,0,0],[3,1,0],[3,2,0],[3,3,0] ];
     
data = data.map(function (item) { //error
    return [item[1], item[0], item[2] || '-'];
});

In above code I get error: Type (string | number)[][] is not assignable to type number[][]. at 'data'

var objseries = datar.map(function(x) {
       return {
            type: 'scatter',
            symbol: 'diamond',
            symbolSize: 10,
            itemStyle:{
                normal:{ 
                    color:  x.color
                }
            },
            data: x.data.map(function (item) {
                return [
                item[0] <= x1 ? 0 + ((item[0] - 0) / ((x1 - 0) / 100)) / 100 :
                (item[0] <= x2 ? 1 + ((item[0] - x1) / ((x2 - x1) / 100)) / 100 :
                (item[0] <= x3 ? 2 + ((item[0] - x2) / ((x3 - x2) / 100)) / 100  : 2)),//error
               
                item[1] <= y1 ? 0 + ((item[1] - 0) / ((y1 - 0) / 100)) / 100 :
                (item[1] <= y2 ? 1 + ((item[1] - y1) / ((y2 - y1) / 100)) / 100 :
                (item[1] <= y3 ? 2 + ((item[1] - y2) / ((y3 - y2) / 100)) / 100  : 2)),//error
               
                item[0], item[1]
                ];
            }),
        }
    });

In above code I get error:

Operator '<=' cannot be applied to types 'number' and 'number[]' at 'item[0] <= x3' in code item[0] <= x3 ? 2 + ((item[0] - x2) / ((x3 - x2) / 100)) / 100 : 2))

and:

The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type at x3 in code '(x3-x2)'

Edited

I get below error in below piece of code:

Type '(string | number)[][]' is not assignable to type 'number[][]'.
  Type '(string | number)[]' is not assignable to type 'number[]'.
    Type 'string | number' is not assignable to type 'number'.
      Type 'string' is not assignable to type 'number'.ts(2322)
chart.component.ts(77, 13): The expected type comes from property 'data' which is declared here on type '{ type: string; symbol: string; symbolSize: number; itemStyle: { normal: { color: string; }; }; data: number[][]; }'

var datar = [
    {
        name: 'TEST-A',
        data: [
            [4,4],[25,4],[700,4],[4,40],[25,40],[160,40]
        ],
        xmax: 700,
        ymax: 40,
        color: 'purple',
    },
    {
        name: 'TEST-B',
        data: [
            [10.0, 8.04],
            [8.0, 6.95],
            [13.0, 7.58],
            [9.0, 8.81],
        xmax: 160,
        ymax: 400,
        color: 'green',
    }
];

var objseries = datar.map(function(x) {
   return {
        type: 'scatter',
        symbol: 'diamond',
        symbolSize: 10,
        itemStyle:{
            normal:{ 
                color:  x.color
            }
        },
        data: x.data.map(function (item) {
            return [
            item[0] <= x1 ? 0 + ((item[0] - 0) / ((x1 - 0) / 100)) / 100 :
            (item[0] <= x2 ? 1 + ((item[0] - x1) / ((x2 - x1) / 100)) / 100 :
            (item[0] <= x3 ? 2 + ((item[0] - x2) / ((x3 - x2) / 100)) / 100  : 2)),
           
            item[1] <= y1 ? 0 + ((item[1] - 0) / ((y1 - 0) / 100)) / 100 :
            (item[1] <= y2 ? 1 + ((item[1] - y1) / ((y2 - y1) / 100)) / 100 :
            (item[1] <= y3 ? 2 + ((item[1] - y2) / ((y3 - y2) / 100)) / 100  : 2)),
           
            item[0], item[1]
            ];
        }),
    }
}); 
    
objseries.splice(0, 0, {
    name: 'Severe Moderate Mild',
    xAxisIndex : 1,
    yAxisIndex : 1,
    type: 'heatmap',
    data: data, //error here
    label: {
        normal: {
            show: false
        }
    }
});

This code will then go and sit in 'series' property of https://echarts.apache.org/examples/en/editor.html?c=doc-example/scatter-visualMap-categories&edit=1&reset=1 (this link is just for example to explain the relation)

How can I fix this?

Answer 1

These errors are all typescript errors. Since you don't have any explicit types on anything, and didn't mention typescript, i wonder if you might not be aware that typescript is being used. In any event, here's what those errors mean:

Argument of type 'number[]' is not assignable to parameter of type 'number' at 'a, b' in code 'return Math.max(a, b)'

This is pointing out that a and b are arrays, not numbers, so doing Math.max on them is not going to work. The reason they are arrays is because of the previous line where you do this:

datar.map(function (item) { return [ item.ymax ] })

Did you perhaps mean to return item.ymax instead of return [ item.ymax ]?

In above code I get error: Type '(string | number)[][]' is not assignable to type 'number[][]'.

On the var data = line, you aren't defining your types, so typescript makes its best guess. Since you provided a 2 dimensional array with every element being a number, typescript infers that the type for data is number[][]. Then later, when you try to stick a string into it, it's pointing out that strings are not part of the type. If you want strings to be an option, you'll need to specify the type yourself, as in:

var data: (string | number)[][] = [
  [0,0,0],[0,1,4],[0,2,1],[0,3,1],
  [1,0,0],[1,1,9],[1,2,4],[1,3,1],
  [2,0,0],[2,1,9],[2,2,9],[2,3,9],
  [3,0,0],[3,1,0],[3,2,0],[3,3,0]
];

Operator '<=' cannot be applied to types 'number' and 'number[]' at 'item[0] <= x3' in code 'item[0] <= x3 ? 2 + ((item[0] - x2) / ((x3 - x2) / 100)) / 100 : 2))'

x3 is an array, so trying to check if something is <= to it is nonsensical. My guess is this issue should go away when you fix the first issue where you were creating arrays instead of individual numbers.