jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-23 09:16:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix chart legend not showing correctly when data has 1 series. (#926)

Browse Source 
* Fix chart legend not showing correctly when data has 1 series.

* Change to flexbox
This commit is contained in:
Boyi C 2018-02-27 02:46:20 +08:00 committed by Paulus Schoutsen
parent 672bfb375f
commit 0ab240c678
1 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/entity/ha-chart-base.html
View File

@ -1,17 +1,23 @@
<link rel='import' href='../../../bower_components/polymer/polymer-element.html'> <link rel='import' href='../../../bower_components/polymer/polymer-element.html'>
<link rel='import' href='../../../bower_components/paper-icon-button/paper-icon-button.html'>
<dom-module id="ha-chart-base"> <dom-module id="ha-chart-base">
<template> <template>
<style> <style>
.chartHeader { .chartHeader {
display: flex;
padding: 6px 0 0 0; padding: 6px 0 0 0;
width: 100%
} }
.chartHeader div { .chartHeader > div {
display: inline-block;
vertical-align: top; vertical-align: top;
padding: 0 8px;
} }
.chartTitle { .chartHeader > div.chartTitle {
margin: 0 12px 0 8px; padding-top: 8px;
}
.chartHeader > div.chartLegend {
flex: auto;
} }
:root{ :root{
user-select: none; user-select: none;
@ -34,7 +40,7 @@
.chartTooltip ul { .chartTooltip ul {
display: inline-block; display: inline-block;
padding: 0 0px; padding: 0 0px;
margin: 0 0 8px 0; margin: 8px 0 0 0;
width: 100% width: 100%
} }
.chartTooltip li { .chartTooltip li {
@ -64,9 +70,6 @@
margin-right: 6px; margin-right: 6px;
width: 10px; width: 10px;
} }
.chartZoomInline {
float: right;
}
</style> </style>
<template is="dom-if" if="[[unit]]"> <template is="dom-if" if="[[unit]]">
<div class="chartHeader"> <div class="chartHeader">
@ -97,7 +100,7 @@
style$="opacity:[[tooltip.opacity]]; top:[[tooltip.top]]; left:[[tooltip.left]]; padding:[[tooltip.yPadding]]px [[tooltip.xPadding]]px"> style$="opacity:[[tooltip.opacity]]; top:[[tooltip.top]]; left:[[tooltip.left]]; padding:[[tooltip.yPadding]]px [[tooltip.xPadding]]px">
<div class="title">[[tooltip.title]]</div> <div class="title">[[tooltip.title]]</div>
<div> <div>
<ul > <ul>
<template is="dom-repeat" items="[[tooltip.lines]]"> <template is="dom-repeat" items="[[tooltip.lines]]">
<li><em style$="background-color:[[item.bgColor]]"></em>[[item.text]]</li> <li><em style$="background-color:[[item.bgColor]]"></em>[[item.text]]</li>
</template> </template>