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

Fix: charts stripes alignment (#2054)

Browse Source 
* Align chart stripe on every dataset update

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Removing default stripes interval

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-02-02 11:45:45 +03:00 committed by GitHub
parent 06b884f3fb
commit 9e1487685c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 9 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[0].data.length
} }
} }
}; };

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

@ -6,8 +6,6 @@ import moment, { Moment } from "moment";
import get from "lodash/get"; import get from "lodash/get";
const defaultOptions = { const defaultOptions = {
interval: 61,
stripeMinutes: 10,
stripeColor: "#ffffff08", stripeColor: "#ffffff08",
}; };
@ -36,12 +34,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 +70,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);
}, },