hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Align chart stripe on every dataset update

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-02-01 16:05:28 +03:00
parent 79234dcbf9
commit ba97235dd6
2 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/renderer/components/chart/bar-chart.tsx
View File

@ -136,7 +136,8 @@ export class BarChart extends React.Component<Props> {
}, },
plugins: { plugins: {
ZebraStripes: { ZebraStripes: {
stripeColor: chartStripesColor stripeColor: chartStripesColor,
interval: chartData.datasets.length ? chartData.datasets[0].data.length : 61
} }
} }
}; };

22
src/renderer/components/chart/zebra-stripes.plugin.ts
View File

@ -7,7 +7,6 @@ import get from "lodash/get";
const defaultOptions = { const defaultOptions = {
interval: 61, interval: 61,
stripeMinutes: 10,
stripeColor: "#ffffff08", stripeColor: "#ffffff08",
}; };
@ -36,12 +35,23 @@ export const ZebraStripes = {
chart.canvas.parentElement.removeChild(elem); chart.canvas.parentElement.removeChild(elem);
}, },
updateOptions(chart: ChartJS) {
this.options = {
...defaultOptions,
...this.getOptions(chart)
};
},
getStripeMinutes() {
return this.options.interval < 10 ? 0 : 10;
},
renderStripes(chart: ChartJS) { renderStripes(chart: ChartJS) {
if (!chart.data.datasets.length) return; if (!chart.data.datasets.length) return;
const { interval, stripeMinutes, stripeColor } = this.options; const { interval, stripeColor } = this.options;
const { top, left, bottom, right } = chart.chartArea; const { top, left, bottom, right } = chart.chartArea;
const step = (right - left) / interval; const step = (right - left) / interval;
const stripeWidth = step * stripeMinutes; const stripeWidth = step * this.getStripeMinutes();
const cover = document.createElement("div"); const cover = document.createElement("div");
const styles = cover.style; const styles = cover.style;
@ -61,14 +71,12 @@ export const ZebraStripes = {
afterInit(chart: ChartJS) { afterInit(chart: ChartJS) {
if (!chart.data.datasets.length) return; if (!chart.data.datasets.length) return;
this.options = { this.updateOptions(chart);
...defaultOptions,
...this.getOptions(chart)
};
this.updated = this.getLastUpdate(chart); this.updated = this.getLastUpdate(chart);
}, },
afterUpdate(chart: ChartJS) { afterUpdate(chart: ChartJS) {
this.updateOptions(chart);
this.renderStripes(chart); this.renderStripes(chart);
}, },