bug with stacking.

[pinq-]

Vue version "vue": "^2.6.11". Repo here: https://github.com/pinq-/KyykkaPage_2/tree/main/vue_kyykkapage_2 you can test page here: pinq.kapsi.fi/kyykka if you select team from "Parhaat joukkueet Suomessa" table, it leats you to the team page. Then go pack. And select again. Then do this multiple times. Then in the end the team plot shows wrong numbers. I can't figure out, what's wrong. The code is in file 'team_game_plot.vue" in lines 123-205. Don't know what to do.

This is the code, that adds and updates the charts:

      parse_values(data) {
        // console.log(data)

        var home_games = []
        var away_games = []
        var wheter_temp = []
        var wheter_snow = []
        var index_plot = []
        data.forEach((value) => {
          var h_game = {name:this.$store.state.team_name_short,  time:0, y:0 ,color : '-', opponent: '-', id: 0}
          var a_game = {y:0 ,color : 'rgba(112,112,112, 0.5)'}
          if(value.Home_team__Team__Sort_name == this.$store.state.team_name_short){
              if (value.Home_result > value.Away_result){
                h_game['color'] = "#A7EE50";
              }
              else if(value.Home_result < value.Away_result){
                h_game['color'] = "#ef5350";
              }else{
                h_game['color'] = "#707070";
              }
              h_game['y'] = value.Home_result;
              a_game['y'] = value.Away_result;
              h_game['opponent'] = value.Away_team__Team__Sort_name;
          }
          else if(value.Away_team__Team__Sort_name == this.$store.state.team_name_short){
              if (value.Home_result < value.Away_result){
                h_game['color'] = "#A7EE50";
              }
              else if(value.Home_result > value.Away_result){
                h_game['color'] = "#ef5350";
              }else{
                h_game['color'] = "#707070";
              }
              h_game['opponent'] = value.Home_team__Team__Sort_name;
              h_game['y'] = value.Away_result;
              a_game['y'] = value.Home_result;
          }
          h_game['time'] = moment.utc(value.Game_time).format('DD.MM');
          h_game['id'] = value.id;
          home_games.push(h_game);
          away_games.push(a_game);
          wheter_temp.push(value.Game_weather__Temp_day);
          wheter_snow.push(value.Game_weather__Snow_deph);
          index_plot.push(moment.utc(value.Game_time).format('DD.MM'));
        });
        this.chartOptions_2.series = [
        {
          type: 'column',
          name: 'opponent',
          data:away_games,
          pointPadding: 0.2,
          yAxis:0,

          },
        { 
          type: 'column',
          name: 'games',
          data:home_games,
          pointPadding: 0.3,
          yAxis:0,
        },        
        { 
          type: 'spline',
          name: 'temp',
          data:wheter_temp,
          pointPadding: 0.3,
          yAxis:2,
          color:'#0277bd',
        },        
        { 
          type: 'column',
          name: 'snow',
          data:wheter_snow,
          pointPadding: 0.3,
          yAxis:1,
          color:'#1eb0e6',
        },

        ]
        this.chartOptions_2.xAxis = {categories : index_plot

and chartOptions_2 looks like this:

        chartOptions_2: {
              chart: {
                  backgroundColor: '#bcd899',
              },
              title: {
                  text: ''
              },
              credits:{enabled:false},
              xAxis: [{
              },
              ],
              legend: {
                        enabled : (window.innerWidth > 768)
              },

              yAxis: [{
                reversed: false,
                title: {
                    text: 'game'
                },
                height: "60%",
                labels: {
              },
              plotLines: [{
                color: '#e64a19',
                width: 2,
                // value: game_mean
              }],
            },{
                title: {
                    text: 'snow',
                },
                top: "70%",
                height: "20%",
                max: 120,
                offset:0,
            },
            {
                title: {
                    text: 'temp'
                },
                opposite: true,
                labels: {
                  format: '{value}°C',
            },
                top: "70%",
                height: "20%",
                max: 10,
                min: -35,
            }],
              series: [
              ],
              tooltip: {
                shared: true,
                formatter: function () {
                  // const header = '<span style="color: blue; font-size:2em; ">' + this.points[1].point.opponent + 
                  // return header
                }
              },
              plotOptions: {
                      series: {
                          label: {
                              connectorAllowed: false
                          },
                          // cursor: 'pointer',
                        //   point: {
                        //     events: {
                        //       click: function () {
                        //         // this.Cliked(this);
                        //         app.$options.methods.Cliked(this);

                        //     },
                        //   },
                        // },
                      },
                      column: {
                        // stacking: 'normal',
                        // grouping: false,
                        shadow: false,
                        borderWidth: 0
                      },
                  },
          }

[Denyllon]

Hi @pinq-

Thank you for opening the issue. Could you describe in more details what's wrong with the app you attached in your issue? Unfortunately I can't notice any irregular behaviour on the site. I've also tried to move to the team, back to the landing page, and a few times back and forth without any result. We definitely need to receive some record of the problem, or more specific description of the problem, so could you elaborate on that?

Kind regards!

[pinq-]

Hi @Denyllon. I don't know how to describe the bug, but here is video about it: https://user-images.githubusercontent.com/10464992/152691098-030f0581-ac4f-4160-b1c7-0777980ba38e.mp4 I can't point really, what causes the bug. I tired to set plot wtih "no stacking" and stacking, re-range results, only plot one series...nothing helped.

[pinq-]

Ok, I thing I found the reason: I have 'id' variable in object and if I changed it to "game_id" there is no problem any more. Have to test more.