diff --git a/.devcontainer/ui-lovelace.yaml b/.devcontainer/ui-lovelace.yaml index 2ef4fde..eea3f69 100644 --- a/.devcontainer/ui-lovelace.yaml +++ b/.devcontainer/ui-lovelace.yaml @@ -19,6 +19,9 @@ views: hours_to_show: 0.20 cache: true layout: minimal + apex_config: + chart: + height: 100% - type: custom:apexcharts-card stacked: true series: @@ -30,6 +33,9 @@ views: type: bar hours_to_show: 0.25 cache: true + apex_config: + chart: + height: 100% - type: custom:apexcharts-card stacked: true diff --git a/src/apex-layouts.ts b/src/apex-layouts.ts index c7b2ab8..33d1df9 100644 --- a/src/apex-layouts.ts +++ b/src/apex-layouts.ts @@ -107,6 +107,12 @@ export function getLayoutConfig(config: ChartCardConfig): unknown { right: 0, }, }, + subtitle: { + offsetY: -15, + }, + title: { + offsetY: -15, + }, xaxis: { labels: { show: false, @@ -141,5 +147,5 @@ export function getLayoutConfig(config: ChartCardConfig): unknown { break; } - return mergeDeep(def, conf); + return config.apex_config ? mergeDeep(mergeDeep(def, conf), config.apex_config) : mergeDeep(def, conf); } diff --git a/src/styles.ts b/src/styles.ts index a5b3d30..40934f7 100644 --- a/src/styles.ts +++ b/src/styles.ts @@ -17,6 +17,11 @@ export const styles: CSSResult = css` height: 100%; } + /* Needed for minimal layout */ + svg:not(:root) { + overflow: visible !important; + } + .apexcharts-canvas { position: relative; user-select: none; diff --git a/src/types.ts b/src/types.ts index 883d56a..6792301 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,3 +1,5 @@ +import { ApexOptions } from 'apexcharts'; + export interface ChartCardConfig extends ChartCardExternalConfig { series: ChartCardSeriesConfig[]; hours_to_show: number; @@ -12,6 +14,7 @@ export interface ChartCardExternalConfig { cache?: boolean; stacked?: boolean; layout?: string; + apex_config?: ApexOptions; } export interface ChartCardSeriesExternalConfig {