ioBroker / ioBroker.vis-2

Next generation visualisation for ioBroker platform.
Other
26 stars 3 forks source link

[bug]: Material-Design JSON-Chart lädt beim Erststart keine Daten #418

Open Boronsbruder opened 3 weeks ago

Boronsbruder commented 3 weeks ago

No existing issues.

Describe the bug

Wenn die Start-Seite meiner Vis2 anfänglich geladen wird, ist angeblich der Datenpunkt der Material-Design-JSON-Chart nicht existent. Nach Laden einer Unterseite und zurückspringen. Wird der Chart angezeigt.

Dieses Phänomen existiert seit den ersten Stable-Versionen sowohl auf Firefox als auch auf Opera.

To Reproduce

Seite Neu laden: grafik

Expected behavior

grafik

Screenshots & Logfiles

grafik grafik

Page or affected widget

[
  {
    "tpl": "tplVis-materialdesign-Chart-JSON",
    "data": {
      "bindings": [],
      "oid": "0_userdata.0.Wetter.aktuell.vorhersage_json",
      "chartType": "line",
      "g_common": true,
      "showLegend": false,
      "g_legendLayout": true,
      "legendPosition": "right",
      "legendFontColor": "#mdwTheme:vis-materialdesign.0.colors.charts.legend",
      "legendFontFamily": "#mdwTheme:vis-materialdesign.0.fonts.charts.legend",
      "legendFontSize": "#mdwTheme:vis-materialdesign.0.fontSizes.charts.legend",
      "legendPointStyle": "true",
      "showTooltip": "true",
      "g_tooltipLayout": true,
      "tooltipMode": "nearest",
      "tooltipPosition": "nearest",
      "tooltipTimeFormats": "{\"millisecond\":\"lll:ss\",\"second\":\"lll:ss\",\"minute\":\"lll\",\"hour\":\"lll\",\"day\":\"lll\",\"week\":\"lll\",\"month\":\"lll\",\"quarter\":\"lll\",\"year\":\"lll\"}",
      "tooltipBackgroundColor": "#mdwTheme:vis-materialdesign.0.colors.charts.tooltip_background",
      "tooltipShowColorBox": "true",
      "tooltipTitleFontColor": "#mdwTheme:vis-materialdesign.0.colors.charts.tooltip_title",
      "tooltipTitleFontFamily": "#mdwTheme:vis-materialdesign.0.fonts.charts.tooltip_title",
      "tooltipTitleFontSize": "#mdwTheme:vis-materialdesign.0.fontSizes.charts.tooltip_title",
      "tooltipBodyFontColor": "#mdwTheme:vis-materialdesign.0.colors.charts.tooltip_text",
      "tooltipBodyFontFamily": "#mdwTheme:vis-materialdesign.0.fonts.charts.tooltip_text",
      "tooltipBodyFontSize": "#mdwTheme:vis-materialdesign.0.fontSizes.charts.tooltip_text",
      "tooltipBodyAlignment": "left",
      "xAxisPosition": "bottom",
      "g_xAxisLayout": true,
      "xAxisTicksSource": "auto",
      "xAxisTitleColor": "#mdwTheme:vis-materialdesign.0.colors.charts.x_axis_title",
      "xAxisTitleFontFamily": "#mdwTheme:vis-materialdesign.0.fonts.charts.x_axis_title",
      "xAxisTitleFontSize": "#mdwTheme:vis-materialdesign.0.fontSizes.charts.x_axis_title",
      "xAxisValueLabelColor": "white",
      "xAxisValueFontFamily": "#mdwTheme:vis-materialdesign.0.fonts.charts.x_axis_values",
      "xAxisValueFontSize": "#mdwTheme:vis-materialdesign.0.fontSizes.charts.x_axis_values",
      "xAxisDistanceBetweenTicks": "10",
      "xAxisValueDistanceToAxis": "0",
      "xAxisShowAxis": "true",
      "xAxisShowAxisLabels": "true",
      "xAxisShowGridLines": "true",
      "xAxisGridLinesColor": "#mdwTheme:vis-materialdesign.0.colors.charts.x_axis_gridlines",
      "xAxisShowTicks": "true",
      "xAxisZeroLineColor": "#mdwTheme:vis-materialdesign.0.colors.charts.x_axis_zeroline",
      "xAxisMinRotation": "0",
      "xAxisMaxRotation": "0",
      "yAxisTitleColor": "#mdwTheme:vis-materialdesign.0.colors.charts.y_axis_values",
      "g_yAxisLayout": true,
      "yAxisTitleFontFamily": "#mdwTheme:vis-materialdesign.0.fonts.charts.y_axis_title",
      "yAxisTitleFontSize": "#mdwTheme:vis-materialdesign.0.fontSizes.charts.y_axis_title",
      "yAxisValueLabelColor": "#mdwTheme:vis-materialdesign.0.colors.charts.y_axis_values",
      "yAxisValueFontFamily": "#mdwTheme:vis-materialdesign.0.fonts.charts.y_axis_values",
      "yAxisValueFontSize": "#mdwTheme:vis-materialdesign.0.fontSizes.charts.y_axis_values",
      "yAxisValueDistanceToAxis": "10",
      "g_css_background": true,
      "g_css_border": true,
      "backgroundColor": "#mdwTheme:vis-materialdesign.0.colors.charts.background",
      "chartAreaBackgroundColor": "#mdwTheme:vis-materialdesign.0.colors.charts.background_chart",
      "colorScheme": null,
      "globalColor": "#mdwTheme:vis-materialdesign.0.colors.charts.global",
      "disableHoverEffects": null,
      "chartPaddingTop": "25",
      "chartPaddingLeft": null,
      "chartPaddingRight": null,
      "chartPaddingBottom": null,
      "animationDuration": "10",
      "g_chartLayout": true,
      "debug": true,
      "name": "Vorhersage",
      "comment": null,
      "class": null,
      "filterkey": null,
      "multi-views": null,
      "locked": null,
      "g_fixed": true
    },
    "style": {
      "bindings": [],
      "left": 9,
      "top": "471",
      "width": "888px",
      "height": "120px",
      "background-color": "rgba(161, 161, 161, 0.26)",
      "border-radius": "5px"
    },
    "widgetSet": "materialdesign",
    "_id": "i000001"
  }
]

Adapter version

2.9.32

js-controller version

5.0.19

Node version

18.20.2

Operating system

5.10.0-28-amd64 #1 SMP Debian 5.10.209-2 (2024-01-31) x86_64 GNU/Linux

Additional context

Der Beispiel Inhalt des Datenpunkts

{"graphs":[{"data":[{"t":1712998800000,"y":13},{"t":1712998800000,"y":16},{"t":1713002400000,"y":18},{"t":1713006000000,"y":20},{"t":1713009600000,"y":21},{"t":1713013200000,"y":22},{"t":1713016800000,"y":22},{"t":1713020400000,"y":22},{"t":1713024000000,"y":22},{"t":1713027600000,"y":21},{"t":1713031200000,"y":18},{"t":1713034800000,"y":17},{"t":1713038400000,"y":16},{"t":1713042000000,"y":15},{"t":1713045600000,"y":14},{"t":1713049200000,"y":14},{"t":1713052800000,"y":14},{"t":1713056400000,"y":13},{"t":1713060000000,"y":13},{"t":1713063600000,"y":13},{"t":1713067200000,"y":13},{"t":1713070800000,"y":13},{"t":1713074400000,"y":14},{"t":1713078000000,"y":16},{"t":1713081600000,"y":18},{"t":1713085200000,"y":19},{"t":1713088800000,"y":21},{"t":1713092400000,"y":21},{"t":1713096000000,"y":22},{"t":1713099600000,"y":22},{"t":1713103200000,"y":22},{"t":1713106800000,"y":21},{"t":1713110400000,"y":21},{"t":1713114000000,"y":19},{"t":1713117600000,"y":18}],"type":"line","legendText":"","tooltip_title":"Temperatur","tooltip_MaxDigits":2,"tooltip_AppendText":" °C","datalabel_color":["#007d06","#338700","#598d00","#809300","#939500","#a69800","#a69800","#a69800","#a69800","#939500","#598d00","#468a00","#338700","#208500","#0d8200","#0d8200","#0d8200","#007d06","#007d06","#007d06","#007d06","#007d06","#0d8200","#338700","#598d00","#6c9000","#939500","#939500","#a69800","#a69800","#a69800","#939500","#939500","#6c9000","#598d00"],"line_PointColor":["#007d06","#338700","#598d00","#809300","#939500","#a69800","#a69800","#a69800","#a69800","#939500","#598d00","#468a00","#338700","#208500","#0d8200","#0d8200","#0d8200","#007d06","#007d06","#007d06","#007d06","#007d06","#0d8200","#338700","#598d00","#6c9000","#939500","#939500","#a69800","#a69800","#a69800","#939500","#939500","#6c9000","#598d00"],"line_PointColorBorder":["#007d06","#338700","#598d00","#809300","#939500","#a69800","#a69800","#a69800","#a69800","#939500","#598d00","#468a00","#338700","#208500","#0d8200","#0d8200","#0d8200","#007d06","#007d06","#007d06","#007d06","#007d06","#0d8200","#338700","#598d00","#6c9000","#939500","#939500","#a69800","#a69800","#a69800","#939500","#939500","#6c9000","#598d00"],"yAxis_show":"false","yAxis_appendix":" °C","xAxis_timeFormats":{"millisecond":"H:mm:ss.SSS","second":"H:mm:ss","minute":"dd.[\\n]H:mm","hour":"dd.[\\n]H:mm","day":"dd[\\n]DD.MM","week":"dd[\\n]DD.MM","month":"MMM[\\n]YYYY","quarter":"[Q]Q - YYYY","year":"YYYY"}}]}
mcm1957 commented 3 weeks ago

Looks more like a issue with vis-material. Maybe the issue would be better placed at the adapter repo. Not sure wehther vis-material works stable with vis-2. Most widgets need to be adapter / rewritten for use with vis-2.