jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-26 02:36:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

history-graph: do not set "max-width" for a single legend item (#24683)

Browse Source 
* do not set "max-width" for a single legend item

* prettier
This commit is contained in:
ildar170975 2025-03-19 09:46:14 +03:00 committed by GitHub
parent 4076e5655a
commit 27379c98df
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/chart/ha-chart-base.ts
View File

@ -226,7 +226,12 @@ export class HaChartBase extends LitElement {
const overflowLimit = isMobile const overflowLimit = isMobile
? LEGEND_OVERFLOW_LIMIT_MOBILE ? LEGEND_OVERFLOW_LIMIT_MOBILE
: LEGEND_OVERFLOW_LIMIT; : LEGEND_OVERFLOW_LIMIT;
return html`<div class="chart-legend"> return html`<div
class=${classMap({
"chart-legend": true,
"multiple-items": items.length > 1,
})}
>
<ul> <ul>
${items.map((item: string, index: number) => { ${items.map((item: string, index: number) => {
if (!this.expandLegend && index >= overflowLimit) { if (!this.expandLegend && index >= overflowLimit) {
@ -262,7 +267,9 @@ export class HaChartBase extends LitElement {
? this.hass.localize( ? this.hass.localize(
"ui.components.history_charts.collapse_legend" "ui.components.history_charts.collapse_legend"
) )
: `${this.hass.localize("ui.components.history_charts.expand_legend")} (${items.length - overflowLimit})`} : `${this.hass.localize(
"ui.components.history_charts.expand_legend"
)} (${items.length - overflowLimit})`}
> >
<ha-svg-icon <ha-svg-icon
slot="trailing-icon" slot="trailing-icon"
@ -727,10 +734,10 @@ export class HaChartBase extends LitElement {
align-items: center; align-items: center;
padding: 0 2px; padding: 0 2px;
box-sizing: border-box; box-sizing: border-box;
max-width: 220px;
text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; }
.chart-legend.multiple-items li {
max-width: 220px;
} }
.chart-legend .hidden { .chart-legend .hidden {
color: var(--secondary-text-color); color: var(--secondary-text-color);