feat(series): Direct support for dashed lines

Closes #413

.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

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`<br/>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.~~ |

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';

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"),

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;