},
],
+ checkThemeColors: function() {
+ let me = this;
+ let rootStyle = getComputedStyle(document.documentElement);
+
+ // get color
+ let background = rootStyle.getPropertyValue("--pwt-panel-background").trim() || "#ffffff";
+
+ // set the colors
+ me.chart.setBackground(background);
+ me.chart.redraw();
+ },
+
updateAll: function(metadata, status) {
let me = this;
me.suspendLayout = true;
me.statecategories[result].states.push(state);
});
- me.getComponent('pgchart').getStore().setData(me.statecategories);
+ me.chart.getStore().setData(me.statecategories);
me.getComponent('pgs').update({ states: pgs_by_state });
let health = status.health || {};
me.suspendLayout = false;
me.updateLayout();
},
+
+ initComponent: function() {
+ var me = this;
+ me.callParent();
+
+ me.chart = me.getComponent('pgchart');
+ me.checkThemeColors();
+
+ // switch colors on media query changes
+ me.mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
+ me.themeListener = (e) => { me.checkThemeColors(); };
+ me.mediaQueryList.addEventListener("change", me.themeListener);
+ },
+
+ doDestroy: function() {
+ let me = this;
+
+ me.mediaQueryList.removeEventListener("change", me.themeListener);
+
+ me.callParent();
+ },
});
// show the last x seconds default is 5 minutes
timeFrame: 5*60,
+ checkThemeColors: function() {
+ let me = this;
+ let rootStyle = getComputedStyle(document.documentElement);
+
+ // get color
+ let background = rootStyle.getPropertyValue("--pwt-panel-background").trim() || "#ffffff";
+ let text = rootStyle.getPropertyValue("--pwt-text-color").trim() || "#000000";
+
+ // set the colors
+ me.chart.setBackground(background);
+ me.chart.valuesprite.setAttributes({ fillStyle: text }, true);
+ me.chart.redraw();
+ },
+
addDataPoint: function(value, time) {
let view = this.chart;
let panel = view.up();
stroke: me.color,
});
}
+
+ me.checkThemeColors();
+
+ // switch colors on media query changes
+ me.mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
+ me.themeListener = (e) => { me.checkThemeColors(); };
+ me.mediaQueryList.addEventListener("change", me.themeListener);
+ },
+
+ doDestroy: function() {
+ let me = this;
+
+ me.mediaQueryList.removeEventListener("change", me.themeListener);
+
+ me.callParent();
},
});