You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2021/02/12 15:02:15 UTC

[GitHub] [echarts] cadriel opened a new issue #14265: Line colors swapped during browser tab sleep -> wake

cadriel opened a new issue #14265:
URL: https://github.com/apache/echarts/issues/14265


   ### Version
   5.0.2
   
   ### Steps to reproduce
   Create a line chart with many series with distinct colors defined. In my case, I have a dataset that updates every 1 second with 7 series. I'm not positive its due to a tab sleeping - but i'm also not sure how the browser figures out when to sleep a tab.
   
   ### What is expected?
   Tabbing elsewhere, or otherwise leaving the browser to sleep - and then returning should result in the chart appearing the same as you left it.
   
   ### What is actually happening?
   After returning - the chart has seemingly swapped the colors for series 0 and 1 (id's 1 and 2 in the example options).
   
   ---
   Some other relevant notes;
   
   This is a VueJS & TypeScript project.
   
   It's open source, and my develop branch has the latest code for reference;
   https://github.com/cadriel/fluidd
   
   In my branch, options are stored as a static property, and I use setOption to update the data. Develop has the entire options object as a computed property, and using setOption to update that - which also works, but presents the same issue.
   
   My next steps to diagnose will be moving the color to the data instead of the series.
   
   I'd REALLY appreciate some direction here.. I'm ready for a release, but this bug is a show stopper.
   
   <!-- This issue is generated by echarts-issue-helper. DO NOT REMOVE -->
   <!-- This issue is in English. DO NOT REMOVE -->


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] echarts-bot[bot] commented on issue #14265: Line colors swapped during browser tab sleep -> wake

Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on issue #14265:
URL: https://github.com/apache/echarts/issues/14265#issuecomment-778247038


   Hi! We've received your issue and please be patient to get responded. 🎉
   The average response time is expected to be within one day for weekdays.
   
   In the meanwhile, please make sure that **you have posted enough image to demo your request**. You may also check out the [API](http://echarts.apache.org/api.html) and [chart option](http://echarts.apache.org/option.html) to get the answer.
   
   If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical question.
   
   If you are interested in the project, you may also subscribe our [mailing list](https://echarts.apache.org/en/maillist.html).
   
   Have a nice day! 🍵


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] cadriel commented on issue #14265: Line colors swapped during browser tab sleep -> wake

Posted by GitBox <gi...@apache.org>.
cadriel commented on issue #14265:
URL: https://github.com/apache/echarts/issues/14265#issuecomment-778639285


   Closing this. The issue was me encoding by index. I adjusted to encode by name instead and all is well.


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] cadriel commented on issue #14265: Line colors swapped during browser tab sleep -> wake

Posted by GitBox <gi...@apache.org>.
cadriel commented on issue #14265:
URL: https://github.com/apache/echarts/issues/14265#issuecomment-778247330


   Example option and data;
   
   
   ```
   {
     "grid": {
       "top": 10,
       "left": 70,
       "right": 70,
       "bottom": 50
     },
     "legend": {
       "show": false,
       "top": 0,
       "icon": "circle",
       "textStyle": {
         "fontSize": 16,
         "color": "rgba(255,255,255,0.25)"
       },
       "selected": {
         "extruderPower": false
       },
       "data": [
         {
           "name": "pi_cpu"
         },
         {
           "name": "heater_bed"
         },
         {
           "name": "heater_bedTarget"
         },
         {
           "name": "heater_bedPower"
         },
         {
           "name": "extruder"
         },
         {
           "name": "extruderTarget"
         },
         {
           "name": "extruderPower"
         }
       ]
     },
     "tooltip": {
       "trigger": "axis",
       "confine": true,
       "backgroundColor": "rgba(10,10,10,0.90)",
       "borderColor": "rgba(10,10,10,0.90)",
       "textStyle": {
         "color": "rgba(255,255,255,0.25)",
         "fontSize": 16
       },
       "axisPointer": {
         "type": "line",
         "lineStyle": {
           "color": "#ffffff",
           "opacity": 0.2
         },
         "label": {
           "color": "rgba(255,255,255,0.25)",
           "fontSize": 16,
           "backgroundColor": "rgba(10,10,10,0.90)"
         }
       }
     },
     "xAxis": {
       "type": "time",
       "boundaryGap": false,
       "axisTick": {
         "show": false
       },
       "splitLine": {
         "show": true,
         "lineStyle": {
           "color": "#ffffff",
           "opacity": 0.05
         }
       },
       "axisLabel": {
         "interval": 0,
         "margin": 14,
         "color": "rgba(255,255,255,0.25)",
         "fontSize": 16,
         "formatter": "{hh}:{mm}"
       },
       "axisPointer": {
         "label": {
           "show": true,
           "margin": 9
         }
       }
     },
     "yAxis": [
       {
         "type": "value",
         "position": "left",
         "splitLine": {
           "show": true,
           "lineStyle": {
             "color": "#ffffff",
             "opacity": 0.05
           }
         },
         "minInterval": 20,
         "maxInterval": 60,
         "min": 0,
         "axisLabel": {
           "interval": 0,
           "margin": 14,
           "color": "rgba(255,255,255,0.25)",
           "fontSize": 16,
           "formatter": "{value}°C"
         },
         "boundaryGap": [
           0,
           "100%"
         ]
       },
       {
         "type": "value",
         "position": "right",
         "splitLine": {
           "show": false,
           "lineStyle": {
             "color": "#ffffff",
             "opacity": 0.05
           }
         },
         "min": 0,
         "max": 1,
         "axisLabel": {
           "interval": 0,
           "margin": 14,
           "color": "rgba(255,255,255,0.25)",
           "fontSize": 16
         },
         "boundaryGap": [
           0,
           "100%"
         ]
       }
     ],
     "dataset": {
       "source": [
         {"date":"2021-02-12T14:53:33.306Z","pi_cpu":42.932,"heater_bed":19.902120584709614,"heater_bedTarget":0,"heater_bedPower":0,"extruder":20.01609895372394,"extruderTarget":0,"extruderPower":0}
         ..
     ]
     },
     "dataZoom": [
       {
         "type": "inside"
       }
     ],
     "series": [
       {
         "name": "pi_cpu",
         "id": 1,
         "type": "line",
         "yAxisIndex": 0,
         "showSymbol": false,
         "animation": false,
         "smooth": false,
         "color": "#d67600",
         "emphasis": {
           "lineStyle": {
             "width": 2
           }
         },
         "lineStyle": {
           "color": "#d67600",
           "type": "solid",
           "width": 2,
           "opacity": 0.85
         },
         "areaStyle": {
           "opacity": 0.05
         },
         "encode": {
           "x": 0,
           "y": 4
         }
       },
       {
         "name": "heater_bed",
         "id": 2,
         "type": "line",
         "yAxisIndex": 0,
         "showSymbol": false,
         "animation": false,
         "smooth": false,
         "color": "#1fb0ff",
         "emphasis": {
           "lineStyle": {
             "width": 2
           }
         },
         "lineStyle": {
           "color": "#1fb0ff",
           "type": "solid",
           "width": 2,
           "opacity": 0.85
         },
         "areaStyle": {
           "opacity": 0.05
         },
         "encode": {
           "x": 0,
           "y": 1
         }
       },
       {
         "name": "heater_bedTarget",
         "id": 3,
         "type": "line",
         "yAxisIndex": 0,
         "showSymbol": false,
         "animation": false,
         "smooth": false,
         "color": "#1fb0ff",
         "emphasis": {
           "lineStyle": {
             "width": 2
           }
         },
         "lineStyle": {
           "color": "#1fb0ff",
           "type": "dashed",
           "width": 2,
           "opacity": 0.25
         },
         "areaStyle": {
           "opacity": 0
         },
         "encode": {
           "x": 0,
           "y": 2
         }
       },
       {
         "name": "heater_bedPower",
         "id": 4,
         "type": "line",
         "yAxisIndex": 1,
         "showSymbol": false,
         "animation": false,
         "smooth": false,
         "color": "#1fb0ff",
         "emphasis": {
           "lineStyle": {
             "width": 2
           }
         },
         "lineStyle": {
           "color": "#1fb0ff",
           "type": "dotted",
           "width": 2,
           "opacity": 0.35
         },
         "areaStyle": {
           "opacity": 0
         },
         "encode": {
           "x": 0,
           "y": 3
         }
       },
       {
         "name": "extruder",
         "id": 5,
         "type": "line",
         "yAxisIndex": 0,
         "showSymbol": false,
         "animation": false,
         "smooth": false,
         "color": "#ff5252",
         "emphasis": {
           "lineStyle": {
             "width": 2
           }
         },
         "lineStyle": {
           "color": "#ff5252",
           "type": "solid",
           "width": 2,
           "opacity": 0.85
         },
         "areaStyle": {
           "opacity": 0.05
         },
         "encode": {
           "x": 0,
           "y": 5
         }
       },
       {
         "name": "extruderTarget",
         "id": 6,
         "type": "line",
         "yAxisIndex": 0,
         "showSymbol": false,
         "animation": false,
         "smooth": false,
         "color": "#ff5252",
         "emphasis": {
           "lineStyle": {
             "width": 2
           }
         },
         "lineStyle": {
           "color": "#ff5252",
           "type": "dashed",
           "width": 2,
           "opacity": 0.25
         },
         "areaStyle": {
           "opacity": 0
         },
         "encode": {
           "x": 0,
           "y": 6
         }
       },
       {
         "name": "extruderPower",
         "id": 7,
         "type": "line",
         "yAxisIndex": 1,
         "showSymbol": false,
         "animation": false,
         "smooth": false,
         "color": "#ff5252",
         "emphasis": {
           "lineStyle": {
             "width": 2
           }
         },
         "lineStyle": {
           "color": "#ff5252",
           "type": "dotted",
           "width": 2,
           "opacity": 0.35
         },
         "areaStyle": {
           "opacity": 0
         },
         "encode": {
           "x": 0,
           "y": 7
         }
       }
     ]
   }```


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] cadriel commented on issue #14265: Line colors swapped during browser tab sleep -> wake

Posted by GitBox <gi...@apache.org>.
cadriel commented on issue #14265:
URL: https://github.com/apache/echarts/issues/14265#issuecomment-778362760


   I find it interesting that the tooltip param for the color remains consistent too - so it's just the rendering of the graph itself that has issues.


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] cadriel closed issue #14265: Line colors swapped during browser tab sleep -> wake

Posted by GitBox <gi...@apache.org>.
cadriel closed issue #14265:
URL: https://github.com/apache/echarts/issues/14265


   


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org