+ ${this._config.series_in_brush.length ? html`
` : ``}
@@ -484,8 +515,22 @@ class ChartsCard extends LitElement {
if (!this._apexChart && this.shadowRoot && this._config && this.shadowRoot.querySelector('#graph')) {
this._loaded = true;
const graph = this.shadowRoot.querySelector('#graph');
- this._apexChart = new ApexCharts(graph, getLayoutConfig(this._config, this._hass));
+ const layout = getLayoutConfig(this._config, this._hass);
+ if (this._config.series_in_brush.length) {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ (layout as any).chart.id = Math.random().toString(36).substring(7);
+ }
+ this._apexChart = new ApexCharts(graph, layout);
this._apexChart.render();
+ if (this._config.series_in_brush.length) {
+ const brush = this.shadowRoot.querySelector('#brush');
+ this._apexBrush = new ApexCharts(
+ brush,
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ getBrushLayoutConfig(this._config, this._hass, (layout as any).chart.id),
+ );
+ this._apexBrush.render();
+ }
this._firstDataLoad();
}
}
@@ -507,45 +552,50 @@ class ChartsCard extends LitElement {
});
await Promise.all(promise);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
- let graphData: any = {};
+ let graphData: any = { series: [] };
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const brushData: any = { series: [] };
if (TIMESERIES_TYPES.includes(this._config.chart_type)) {
- graphData = {
- series: this._graphs.flatMap((graph, index) => {
- if (!graph) return [];
- const inHeader = this._config?.series[index].show.in_header;
- if (inHeader && inHeader !== 'raw') {
- // not raw
- if (graph.history.length === 0) {
- this._headerState[index] = null;
- } else if (inHeader === true) {
- // last
- const lastState = graph.history[graph.history.length - 1][1];
- this._headerState[index] = lastState;
- } else {
- // before_now / after_now
- this._headerState[index] = graph.nowValue(inHeader === 'before_now');
- }
- }
- if (!this._config?.series[index].show.in_chart) {
- return [];
- }
- if (graph.history.length === 0) return [{ data: [] }];
- let data: EntityCachePoints = [];
- if (this._config?.series[index].extend_to_end && this._config?.series[index].type !== 'column') {
- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
- data = [...graph.history, ...([[end.getTime(), graph.history.slice(-1)[0]![1]]] as EntityCachePoints)];
+ this._graphs.forEach((graph, index) => {
+ if (!graph) return [];
+ const inHeader = this._config?.series[index].show.in_header;
+ if (inHeader && inHeader !== 'raw') {
+ // not raw
+ if (graph.history.length === 0) {
+ this._headerState[index] = null;
+ } else if (inHeader === true) {
+ // last
+ const lastState = graph.history[graph.history.length - 1][1];
+ this._headerState[index] = lastState;
} else {
- data = graph.history;
+ // before_now / after_now
+ this._headerState[index] = graph.nowValue(inHeader === 'before_now');
}
- data = offsetData(data, this._seriesOffset[index]);
- return [this._config?.series[index].invert ? { data: this._invertData(data) } : { data }];
- }),
- xaxis: {
+ }
+ if (!this._config?.series[index].show.in_chart && !this._config?.series[index].show.in_brush) {
+ return;
+ }
+ if (graph.history.length === 0) return [{ data: [] }];
+ let data: EntityCachePoints = [];
+ if (this._config?.series[index].extend_to_end && this._config?.series[index].type !== 'column') {
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+ data = [...graph.history, ...([[end.getTime(), graph.history.slice(-1)[0]![1]]] as EntityCachePoints)];
+ } else {
+ data = graph.history;
+ }
+ data = offsetData(data, this._seriesOffset[index]);
+ const result = this._config?.series[index].invert ? { data: this._invertData(data) } : { data };
+ if (this._config?.series[index].show.in_chart) graphData.series.push(result);
+ if (this._config?.series[index].show.in_brush) brushData.series.push(result);
+ return;
+ });
+ graphData.annotations = this._computeAnnotations(start, end);
+ if (!this._apexBrush) {
+ graphData.xaxis = {
min: start.getTime(),
- max: this._findEndOfChart(end),
- },
- annotations: this._computeAnnotations(start, end),
- };
+ max: this._findEndOfChart(end, false),
+ };
+ }
} else {
// No timeline charts
graphData = {
@@ -576,7 +626,10 @@ class ChartsCard extends LitElement {
}),
};
}
- graphData.colors = this._computeChartColors();
+ graphData.colors = this._computeChartColors(false);
+ if (this._apexBrush) {
+ brushData.colors = this._computeChartColors(true);
+ }
if (this._config.experimental?.color_threshold && this._config.series.some((serie) => serie.color_threshold)) {
graphData.markers = {
colors: computeColors(
@@ -594,8 +647,8 @@ class ChartsCard extends LitElement {
type: 'vertical',
colorStops: this._config.series_in_graph.map((serie, index) => {
if (!serie.color_threshold || ![undefined, 'area', 'line'].includes(serie.type)) return [];
- const min = this._graphs?.[index]?.min;
- const max = this._graphs?.[index]?.max;
+ const min = this._graphs?.[serie.index]?.min;
+ const max = this._graphs?.[serie.index]?.max;
if (min === undefined || max === undefined) return [];
return (
this._computeFillColorStops(serie, min, max, computeColor(this._colors[index]), serie.invert) || []
@@ -603,14 +656,73 @@ class ChartsCard extends LitElement {
}),
},
};
+ if (this._apexBrush) {
+ brushData.fill = {
+ gradient: {
+ type: 'vertical',
+ colorStops: this._config.series_in_brush.map((serie, index) => {
+ if (!serie.color_threshold || ![undefined, 'area', 'line'].includes(serie.type)) return [];
+ const min = this._graphs?.[serie.index]?.min;
+ const max = this._graphs?.[serie.index]?.max;
+ if (min === undefined || max === undefined) return [];
+ return (
+ this._computeFillColorStops(serie, min, max, computeColor(this._colors[index]), serie.invert) || []
+ );
+ }),
+ },
+ };
+ }
}
// graphData.tooltip = { marker: { fillColors: ['#ff0000', '#00ff00'] } };
+ const brushIsAtEnd =
+ this._apexBrush &&
+ this._brushInit &&
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ (this._apexChart as any).axes?.w?.globals?.maxX === (this._apexBrush as any).axes?.w?.globals?.maxX;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const currentMin = (this._apexChart as any).axes?.w?.globals?.minX;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const currentMax = (this._apexChart as any).axes?.w?.globals?.maxX;
this._headerState = [...this._headerState];
this._apexChart?.updateOptions(
graphData,
false,
TIMESERIES_TYPES.includes(this._config.chart_type) ? false : true,
);
+ if (this._apexBrush) {
+ const newMin = start.getTime();
+ const newMax = this._findEndOfChart(end, false);
+ brushData.xaxis = {
+ min: newMin,
+ max: newMax,
+ };
+ if (brushIsAtEnd || !this._brushInit) {
+ brushData.chart = {
+ selection: {
+ enabled: true,
+ xaxis: {
+ min: brushData.xaxis.max - (this._brushSelectionSpan ? this._brushSelectionSpan : this._graphSpan / 4),
+ max: brushData.xaxis.max,
+ },
+ },
+ };
+ } else {
+ brushData.chart = {
+ selection: {
+ enabled: true,
+ xaxis: {
+ min: currentMin < newMin ? newMin : currentMin,
+ max: currentMin < newMin ? newMin + (currentMax - currentMin) : currentMax,
+ },
+ },
+ };
+ }
+ const selectionColor = computeColor('var(--primary-text-color)');
+ brushData.chart.selection.stroke = { color: selectionColor };
+ brushData.chart.selection.fill = { color: selectionColor, opacity: 0.1 };
+ this._brushInit = true;
+ this._apexBrush?.updateOptions(brushData, false, false);
+ }
} catch (err) {
log(err);
}
@@ -746,9 +858,10 @@ class ChartsCard extends LitElement {
return {};
}
- private _computeChartColors(): (string | (({ value }) => string))[] {
- const defaultColors: (string | (({ value }) => string))[] = computeColors(this._colors);
- this._config?.series_in_graph.forEach((serie, index) => {
+ private _computeChartColors(brush: boolean): (string | (({ value }) => string))[] {
+ const defaultColors: (string | (({ value }) => string))[] = computeColors(brush ? this._brushColors : this._colors);
+ const series = brush ? this._config?.series_in_brush : this._config?.series_in_graph;
+ series?.forEach((serie, index) => {
if (
this._config?.experimental?.color_threshold &&
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -888,14 +1001,15 @@ class ChartsCard extends LitElement {
Makes the chart end at the last timestamp of the data when everything displayed is a
column and group_by is enabled for every serie
*/
- private _findEndOfChart(end: Date): number {
+ private _findEndOfChart(end: Date, brush: boolean): number {
const localEnd = new Date(end);
let offsetEnd: number | undefined = 0;
- const onlyBars = this._config?.series.reduce((acc, serie) => {
+ const series = brush ? this._config?.series_in_brush : this._config?.series_in_graph;
+ const onlyBars = series?.reduce((acc, serie) => {
return acc && serie.type === 'column' && serie.group_by.func !== 'raw';
- }, this._config?.series.length > 0);
+ }, series?.length > 0);
if (onlyBars) {
- offsetEnd = this._config?.series.reduce((acc, serie) => {
+ offsetEnd = series?.reduce((acc, serie) => {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const dur = parse(serie.group_by.duration)!;
if (acc === -1 || dur < acc) {
diff --git a/src/graphEntry.ts b/src/graphEntry.ts
index ca74058..b2f229a 100644
--- a/src/graphEntry.ts
+++ b/src/graphEntry.ts
@@ -403,14 +403,11 @@ export default class GraphEntry {
(buckets[buckets.length - 1].data.length > 0 &&
buckets[buckets.length - 1].data[buckets[buckets.length - 1].data.length - 1][1] === null)
)
- buckets = buckets
- .reverse()
- .flatMap((bucket) => {
- if (bucket.data[1] === null) return [];
- if (bucket.data.length === 0) return [];
- else return [bucket];
- })
- .reverse();
+ buckets = buckets.flatMap((bucket) => {
+ if (bucket.data[1] === null) return [];
+ if (bucket.data.length === 0) return [];
+ else return [bucket];
+ });
return buckets;
}
diff --git a/src/locales.ts b/src/locales.ts
new file mode 100644
index 0000000..e8079e8
--- /dev/null
+++ b/src/locales.ts
@@ -0,0 +1,73 @@
+import * as ca from 'apexcharts/dist/locales/ca.json';
+import * as cs from 'apexcharts/dist/locales/cs.json';
+import * as de from 'apexcharts/dist/locales/de.json';
+import * as el from 'apexcharts/dist/locales/el.json';
+import * as en from 'apexcharts/dist/locales/en.json';
+import * as es from 'apexcharts/dist/locales/es.json';
+import * as fi from 'apexcharts/dist/locales/fi.json';
+import * as fr from 'apexcharts/dist/locales/fr.json';
+import * as he from 'apexcharts/dist/locales/he.json';
+import * as hi from 'apexcharts/dist/locales/hi.json';
+import * as hr from 'apexcharts/dist/locales/hr.json';
+import * as hy from 'apexcharts/dist/locales/hy.json';
+import * as id from 'apexcharts/dist/locales/id.json';
+import * as it from 'apexcharts/dist/locales/it.json';
+import * as ka from 'apexcharts/dist/locales/ka.json';
+import * as ko from 'apexcharts/dist/locales/ko.json';
+import * as lt from 'apexcharts/dist/locales/lt.json';
+import * as nb from 'apexcharts/dist/locales/nb.json';
+import * as nl from 'apexcharts/dist/locales/nl.json';
+import * as pl from 'apexcharts/dist/locales/pl.json';
+import * as pt_br from 'apexcharts/dist/locales/pt-br.json';
+import * as pt from 'apexcharts/dist/locales/pt.json';
+import * as rs from 'apexcharts/dist/locales/rs.json';
+import * as ru from 'apexcharts/dist/locales/ru.json';
+import * as se from 'apexcharts/dist/locales/se.json';
+import * as sk from 'apexcharts/dist/locales/sk.json';
+import * as sl from 'apexcharts/dist/locales/sl.json';
+import * as sq from 'apexcharts/dist/locales/sq.json';
+import * as th from 'apexcharts/dist/locales/th.json';
+import * as tr from 'apexcharts/dist/locales/tr.json';
+import * as ua from 'apexcharts/dist/locales/ua.json';
+import * as zh_cn from 'apexcharts/dist/locales/zh-cn.json';
+
+export function getLocales(): Record