feat(series): hide specific serie in legend with in_legend: false

Closes #74
RomRider · Jul 9, 2024 · 12cb893 · 12cb893
1 parent 2935b4e
commit 12cb893
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 1 deletion.
diff --git a/.devcontainer/ui-lovelace.yaml b/.devcontainer/ui-lovelace.yaml
@@ -1353,7 +1353,7 @@ views:
  cards:
  - type: custom:apexcharts-card
  stacked: true
- # cache: false
+ cache: false
  graph_span: 5min
  series:
  - entity: sensor.random0_100
@@ -1364,6 +1364,8 @@ views:
  name: tes2t
  group_by:
  duration: 1min
+ show:
+ in_legend: false
  - entity: sensor.random0_100
  stack_group: group1
  type: column

diff --git a/src/apex-layouts.ts b/src/apex-layouts.ts
@@ -3,6 +3,7 @@ import parse from 'parse-duration';
 import {
  DEFAULT_AREA_OPACITY,
  DEFAULT_FLOAT_PRECISION,
+ DEFAULT_LEGEND_MARKER_WIDTH,
  DEFAULT_SERIE_TYPE,
  HOUR_24,
  NO_VALUE,
@@ -72,6 +73,7 @@ export function getLayoutConfig(
  position: 'bottom',
  show: true,
  formatter: getLegendFormatter(config, hass),
+ markers: getLegendMarkers(config),
  },
  stroke: {
  curve: getStrokeCurve(config, false),
@@ -390,6 +392,9 @@ function getLegendFormatter(config: ChartCardConfig, hass: HomeAssistant | undef
  undefined,
  hass2?.states[conf.series_in_graph[opts.seriesIndex].entity],
  );
+ if (!conf.series_in_graph[opts.seriesIndex].show.in_legend) {
+ return [];
+ }
  if (!conf.series_in_graph[opts.seriesIndex].show.legend_value) {
  return [name];
  } else {
@@ -430,6 +435,10 @@ function getLegendFormatter(config: ChartCardConfig, hass: HomeAssistant | undef
  };
 }
 
+function getLegendMarkers(config: ChartCardConfig) {
+ return { width: config.series_in_graph.map((serie) => (serie.show.in_legend ? DEFAULT_LEGEND_MARKER_WIDTH : 0)) };
+}
+
 function getStrokeCurve(config: ChartCardConfig, brush: boolean) {
  const series = brush ? config.series_in_brush : config.series_in_graph;
  return series.map((serie) => {

diff --git a/src/apexcharts-card.ts b/src/apexcharts-card.ts
@@ -61,6 +61,7 @@ import {
  DEFAULT_FLOAT_PRECISION,
  DEFAULT_SHOW_IN_CHART,
  DEFAULT_SHOW_IN_HEADER,
+ DEFAULT_SHOW_IN_LEGEND,
  DEFAULT_SHOW_LEGEND_VALUE,
  DEFAULT_SHOW_NAME_IN_HEADER,
  DEFAULT_SHOW_OFFSET_IN_NAME,
@@ -429,13 +430,15 @@ class ChartsCard extends LitElement {
  }
  if (!serie.show) {
  serie.show = {
+ in_legend: DEFAULT_SHOW_IN_LEGEND,
  legend_value: DEFAULT_SHOW_LEGEND_VALUE,
  in_header: DEFAULT_SHOW_IN_HEADER,
  in_chart: DEFAULT_SHOW_IN_CHART,
  name_in_header: DEFAULT_SHOW_NAME_IN_HEADER,
  offset_in_name: DEFAULT_SHOW_OFFSET_IN_NAME,
  };
  } else {
+ serie.show.in_legend = serie.show.in_legend === undefined ? DEFAULT_SHOW_IN_LEGEND : serie.show.in_legend;
  serie.show.legend_value =
  serie.show.legend_value === undefined ? DEFAULT_SHOW_LEGEND_VALUE : serie.show.legend_value;
  serie.show.in_chart = serie.show.in_chart === undefined ? DEFAULT_SHOW_IN_CHART : serie.show.in_chart;

diff --git a/src/const.ts b/src/const.ts
@@ -13,6 +13,7 @@ export const DEFAULT_DURATION = '1h';
 export const DEFAULT_FUNC = 'raw';
 export const DEFAULT_GROUP_BY_FILL = 'last';
 export const DEFAULT_FILL_RAW = 'null';
+export const DEFAULT_SHOW_IN_LEGEND = true;
 export const DEFAULT_SHOW_LEGEND_VALUE = true;
 export const DEFAULT_SHOW_IN_HEADER = true;
 export const DEFAULT_SHOW_IN_CHART = true;
@@ -48,3 +49,4 @@ export const DEFAULT_MAX = 100;
 
 export const DEFAULT_UPDATE_DELAY = 1500;
 export const DEFAULT_AREA_OPACITY = 0.7;
+export const DEFAULT_LEGEND_MARKER_WIDTH = 12;
diff --git a/src/types-config-ti.ts b/src/types-config-ti.ts
@@ -111,6 +111,7 @@ export const ActionsConfig = t.iface([], {
 
 export const ChartCardSeriesShowConfigExt = t.iface([], {
  "as_duration": t.opt("ChartCardPrettyTime"),
+ "in_legend": t.opt("boolean"),
  "legend_value": t.opt("boolean"),
  "in_header": t.opt(t.union("boolean", t.lit('raw'), t.lit('before_now'), t.lit('after_now'))),
  "name_in_header": t.opt("boolean"),

diff --git a/src/types-config.ts b/src/types-config.ts
@@ -111,6 +111,7 @@ export interface ActionsConfig {
 
 export interface ChartCardSeriesShowConfigExt {
  as_duration?: ChartCardPrettyTime;
+ in_legend?: boolean;
  legend_value?: boolean;
  in_header?: boolean | 'raw' | 'before_now' | 'after_now';
  name_in_header?: boolean;