diff --git a/.devcontainer/ui-lovelace.yaml b/.devcontainer/ui-lovelace.yaml index 08ae7e3..128e6f4 100644 --- a/.devcontainer/ui-lovelace.yaml +++ b/.devcontainer/ui-lovelace.yaml @@ -1077,6 +1077,7 @@ views: entity: sensor.random_0_1000 - entity: sensor.random0_100 transform: 'return Number(x) + 1230;' + stroke_dash: 2 yaxis: - min: 0 max: ~1200 diff --git a/README.md b/README.md index 18e37e0..82cdda5 100644 --- a/README.md +++ b/README.md @@ -165,6 +165,7 @@ The card stricly validates all the options available (but not for the `apex_conf | `color` | string | | v1.1.0 | Color of the serie. Supported formats: `yellow`, `#aabbcc`, `rgb(128, 128, 128)` or `var(--css-color-variable)` | | `opacity` | number | `0.7` for `area`
else `1` | v1.6.0 | The opacity of the line or filled area, between `0` and `1` | | `stroke_width` | number | `5` | v1.6.0 | Change the width of the line. Only works for `area` and `line` | +| `stroke_dash` | number | `0` | NEXT_VERSION | Creates a dashed line. The higher the number, the bigger the dash. | | `type` | string | `line` | v1.0.0 | `line`, `area` or `column` are supported for now | | `curve` | string | `smooth` | v1.0.0 | `smooth` (nice curve), `straight` (direct line between points) or `stepline` (flat line until next point then straight up or down), `monotoneCubic` (create a monotone cubic spline) | | ~~`extend_to_end`~~ | ~~boolean~~ | ~~`true`~~ | ~~v1.0.0~~ | **DEPRECATED since v2.0.0** ~~If the last data is older than the end time displayed on the graph, setting to true will extend the value until the end of the timeline. Only works for `line` and `area` types.~~ | diff --git a/src/apex-layouts.ts b/src/apex-layouts.ts index 72ef637..10095bd 100644 --- a/src/apex-layouts.ts +++ b/src/apex-layouts.ts @@ -79,6 +79,7 @@ export function getLayoutConfig( colors: config.chart_type === 'pie' || config.chart_type === 'donut' ? ['var(--card-background-color)'] : undefined, width: getStrokeWidth(config, false), + dashArray: getStrokeDash(config, false), }, markers: { showNullDataPoints: false, @@ -163,6 +164,7 @@ export function getBrushLayoutConfig( colors: config.chart_type === 'pie' || config.chart_type === 'donut' ? ['var(--card-background-color)'] : undefined, width: getStrokeWidth(config, true), + dashArray: getStrokeDash(config, false), }, markers: { showNullDataPoints: false, @@ -452,6 +454,13 @@ function getStrokeWidth(config: ChartCardConfig, brush: boolean) { }); } +function getStrokeDash(config: ChartCardConfig, brush: boolean) { + const series = brush ? config.series_in_brush : config.series_in_graph; + return series.map((serie) => { + return serie.stroke_dash; + }); +} + function getFillType(config: ChartCardConfig, brush: boolean) { if (!config.experimental?.color_threshold) { return brush ? config.brush?.apex_config?.fill?.type || 'solid' : config.apex_config?.fill?.type || 'solid'; diff --git a/src/types-config-ti.ts b/src/types-config-ti.ts index 6aa4904..e5debfb 100644 --- a/src/types-config-ti.ts +++ b/src/types-config-ti.ts @@ -72,6 +72,7 @@ export const ChartCardAllSeriesExternalConfig = t.iface([], { "opacity": t.opt("number"), "curve": t.opt(t.union(t.lit('smooth'), t.lit('straight'), t.lit('stepline'), t.lit('monotoneCubic'))), "stroke_width": t.opt("number"), + "stroke_dash": t.opt("number"), "extend_to": t.opt(t.union(t.lit(false), t.lit('end'), t.lit('now'))), "unit": t.opt("string"), "invert": t.opt("boolean"), diff --git a/src/types-config.ts b/src/types-config.ts index bbc337e..e228cb3 100644 --- a/src/types-config.ts +++ b/src/types-config.ts @@ -72,6 +72,7 @@ export interface ChartCardAllSeriesExternalConfig { opacity?: number; curve?: 'smooth' | 'straight' | 'stepline' | 'monotoneCubic'; stroke_width?: number; + stroke_dash?: number; extend_to?: false | 'end' | 'now'; unit?: string; invert?: boolean;