Not really, because i wanted it to display the value of each slice all the time, without having to hover it.
So it looks like your label is pushing it down - you could try the scaling thing again - up to you.
To get the correct selector for use in CSS right click the canvas code in devtools --> copy --> selector then try that with the transform scaling (you might need to set !important to force it)
then use that selector like this...
<style>
copied_selector_pasted_here {
-ms-transform: scale(0.8,0.8) !important; /* IE 9 - !important is optional */
transform: scale(0.8,0.8) !important; /* Standard syntax - !important is optional */
}
</style>
1 Like
Well this is not easy to achieve and probably not very bulletproof but something can be done.
[{"id":"678b0eac.27286","type":"ui_chart","z":"bf66f153.dd752","name":"","group":"e99847d9.25fde8","order":3,"width":"6","height":"4","label":"{{label}}","chartType":"pie","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":510,"y":360,"wires":[[]]},{"id":"a51f3d4.49e55c","type":"inject","z":"bf66f153.dd752","name":"","topic":"A","payload":"7","payloadType":"num","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":210,"y":300,"wires":[["d15ef4fe.ca6828"]]},{"id":"95db35c5.c0eed8","type":"inject","z":"bf66f153.dd752","name":"","topic":"B","payload":"14","payloadType":"num","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":210,"y":360,"wires":[["678b0eac.27286"]]},{"id":"87ee063f.ea68e8","type":"ui_template","z":"bf66f153.dd752","group":"e99847d9.25fde8","name":"Dashboard stylesheet","order":1,"width":0,"height":0,"format":"<style>\n/*\nIt is reasnoble to declare the colors as CSS variables\nso they can be easily called by name where needed.\n\nYou can see that in many places the variables are not used. Change it!\n*/\n\n:root {\n --color-green-primary: rgb(51, 204, 51);\n --color-green-secondary: rgb(26, 101, 26);\n --color-red-primary: rgb(255, 0, 0);\n --color-red-secondary: rgba(153,0,0,1);\n --color-gray-primary:rgba(40,40,40,1);\n --color-gray-secondary:rgba(65,65,65,1);\n --color-text-primary: rgb(230, 226, 209);\n --color-widget-border: rgb(84, 78, 78);\n}\n\n/*\nAll CSS adjustments are commented out.\nTurn rules on one by one and see the changes.\nDon't use too many elements cos it wil be confusing\nStart with simple elements like text, slider or button\n\nMany of elements like buttons have states, \nthose rules must be found and adjusted also.\n*/\n\n\n.masonry-container {\n position: relative;\n width: 100%;\n height:100%;\n margin: 0 auto;\n background: rgb(255,0,0);\n background: linear-gradient(180deg, var(--color-gray-primary) 0%, var(--color-gray-secondary) 100%);\n}\n\n\n\n.nr-dashboard-cardcontainer {\n position: relative;\n box-shadow: inset 0px 1px 4px 0px #000000bb;\n border-radius: 15px;\n}\n\n.nr-dashboard-theme ui-card-panel {\n background-color: #33333300;\n color:var(--color-text-primary);\n border-radius: 15px;\n box-shadow: 0 0 8px 0px #00000080;\n}\n\nbody.nr-dashboard-theme md-content md-card {\n background-color: #33333300;\n color: var(--color-text-primary);\n text-shadow: 4px 2px 4px #00000045;\n box-shadow: 0 -1px 5px 1px #00000045;\n border-radius: 12px;\n border: 1px solid var(--color-widget-border);\n}\n\ncanvas {\n style: \"20\";\n}\n\n.nr-dashboard-theme ui-card-panel p.nr-dashboard-cardtitle {\n color: var(--color-text-primary);\n}\n\n.md-button {\n display: inline-block;\n position: relative;\n cursor: pointer;\n min-height: 36px;\n min-width: 88px;\n line-height: 36px;\n vertical-align: middle;\n align-items: center;\n text-align: center;\n border-radius: 12px;\n box-sizing: border-box;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n outline: none;\n border: 0;\n padding: 0 6px;\n margin: 6px 8px;\n background: transparent;\n color:var(--color-text-primary);\n white-space: nowrap;\n text-transform: uppercase;\n font-weight: 500;\n font-size: 14px;\n font-style: inherit;\n font-variant: inherit;\n font-family: inherit;\n text-decoration: none;\n overflow: hidden;\n transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);\n}\n\n\n.nr-dashboard-theme .nr-dashboard-button .md-button {\n background-color: #88888800;\n color:var(--color-text-primary);\n}\n\n.nr-dashboard-theme .nr-dashboard-button .md-button:hover {\n background-color: #88888855;\n}\n\nmd-slider .md-thumb {\n z-index: 1;\n position: absolute;\n left: -10px;\n top: 14px;\n width: 20px;\n height: 20px;\n border-radius: 20px;\n -webkit-transform: scale(.7);\n transform: scale(.7);\n transition: all .4s cubic-bezier(.25,.8,.25,1);\n box-shadow: 0 0 6px #00000070;\n}\n\n\n\n#Widgets_Radial_Gauges_cards > md-card.ng-scope._md.layout-align-center-center.visible > div > p{\n line-height:60%;\n}\n.chart-label {\n white-space: nowrap;\n text-align: center;\n font-size: small;\n}\n\n\n\n\n\n/*\nAdvanced stuff - dynamic change of card CSS\n\nClasses here can be used to make colored stripe at the top of card\nUsage is not in here, but they are added to md-card when needed within another template\n\n.carderr {\n background: rgb(255,0,0);\n background: linear-gradient(180deg, var(--color-red-primary) 0px, var(--color-red-secondary) 3px, rgba(80,80,80,1) 4px, rgba(45,45,45,1) 100%);\n}\n.cardok {\n background: rgb(39,255,0);\n background: linear-gradient(180deg, var(--color-green-primary) 0px, var(--color-green-secondary) 3px, rgba(70,70,70,1) 4px, rgba(40,40,40,1) 100%);\n}\n*/\n\n</style>\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"global","x":580,"y":280,"wires":[[]]},{"id":"d15ef4fe.ca6828","type":"function","z":"bf66f153.dd752","name":"","func":"msg.label = '<span class=\"chart-label\"><font color= #55A5FF>■</font> Caldo FĆ”brica / <font color= #22259F>■</font> Caldo Destilaria</span>'+\n'<br><span class=\"chart-label\"><font color = #FFAB0B>100 </font><font color = Sienna>200 </font>/ <font color = #FFAB0B>300 </font><font color = Sienna>400</font></span>'\nreturn msg;","outputs":1,"noerr":0,"x":350,"y":300,"wires":[["678b0eac.27286"]]},{"id":"e99847d9.25fde8","type":"ui_group","z":"","name":"Radial Gauges","tab":"71cf26a9.855b38","order":2,"disp":true,"width":"6","collapse":false},{"id":"71cf26a9.855b38","type":"ui_tab","z":"","name":"Widgets","icon":"dashboard","order":7,"disabled":false,"hidden":true}]
2 Likes
I had to change the height of the nr-dashboard-chart before I could get the chart in the md-card otherwise it protruded over the bottom of the box. Do you have any other css in action?
Thank you for the ideas on css for the nr elements
No i have not. Only those, which I have added to CSS template.
#Widgets_Radial_Gauges_cards > md-card.ng-scope._md.layout-align-center-center.visible > div > p{
line-height:60%;
padding: 4px 10px 4px 10px;
}
.chart-label {
white-space: nowrap;
text-align: center;
font-size: small;
}
The trick is that chart size itself is pre-calculated and what pushes it down is the label area. Multi line content takes more vertical space than single line. So the things you can play is only inside the label area. Thing I didn't change is padding so there is a bit more space available. (Now added to example) Of course it pushes texts near to top edge which may look a bit ugly without " surrounding air".
Full flow with a bit dynamics added (trick to preserve data colors by topic always correct)
[{"id":"678b0eac.27286","type":"ui_chart","z":"bf66f153.dd752","name":"","group":"e99847d9.25fde8","order":3,"width":"6","height":"4","label":"{{label}}","chartType":"pie","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":"0","useOneColor":false,"useUTC":false,"colors":["#3498db","#aed6d6","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":670,"y":320,"wires":[[]]},{"id":"a51f3d4.49e55c","type":"inject","z":"bf66f153.dd752","name":"","topic":"first","payload":"","payloadType":"date","repeat":"5","crontab":"","once":true,"onceDelay":0.1,"x":180,"y":340,"wires":[["6dbb5fc9.1e5d3"]]},{"id":"95db35c5.c0eed8","type":"inject","z":"bf66f153.dd752","name":"","topic":"second","payload":"","payloadType":"date","repeat":"3","crontab":"","once":false,"onceDelay":"0.2","x":170,"y":300,"wires":[["6dbb5fc9.1e5d3"]]},{"id":"87ee063f.ea68e8","type":"ui_template","z":"bf66f153.dd752","group":"e99847d9.25fde8","name":"Dashboard stylesheet","order":1,"width":0,"height":0,"format":"<style>\n/*\nIt is reasnoble to declare the colors as CSS variables\nso they can be easily called by name where needed.\n\nYou can see that in many places the variables are not used. Change it!\n*/\n\n:root {\n --color-green-primary: rgb(51, 204, 51);\n --color-green-secondary: rgb(26, 101, 26);\n --color-red-primary: rgb(255, 0, 0);\n --color-red-secondary: rgba(153,0,0,1);\n --color-gray-primary:rgba(40,40,40,1);\n --color-gray-secondary:rgba(65,65,65,1);\n --color-text-primary: rgb(230, 226, 209);\n --color-widget-border: rgb(84, 78, 78);\n}\n\n/*\nAll CSS adjustments are commented out.\nTurn rules on one by one and see the changes.\nDon't use too many elements cos it wil be confusing\nStart with simple elements like text, slider or button\n\nMany of elements like buttons have states, \nthose rules must be found and adjusted also.\n*/\n\n\n.masonry-container {\n position: relative;\n width: 100%;\n height:100%;\n margin: 0 auto;\n background: rgb(255,0,0);\n background: linear-gradient(180deg, var(--color-gray-primary) 0%, var(--color-gray-secondary) 100%);\n}\n\n\n\n.nr-dashboard-cardcontainer {\n position: relative;\n box-shadow: inset 0px 1px 4px 0px #000000bb;\n border-radius: 15px;\n}\n\n.nr-dashboard-theme ui-card-panel {\n background-color: #33333300;\n color:var(--color-text-primary);\n border-radius: 15px;\n box-shadow: 0 0 8px 0px #00000080;\n}\n\nbody.nr-dashboard-theme md-content md-card {\n background-color: #33333300;\n color: var(--color-text-primary);\n text-shadow: 4px 2px 4px #00000045;\n box-shadow: 0 -1px 5px 1px #00000045;\n border-radius: 12px;\n border: 1px solid var(--color-widget-border);\n}\n\ncanvas {\n style: \"20\";\n}\n\n.nr-dashboard-theme ui-card-panel p.nr-dashboard-cardtitle {\n color: var(--color-text-primary);\n}\n\n.md-button {\n display: inline-block;\n position: relative;\n cursor: pointer;\n min-height: 36px;\n min-width: 88px;\n line-height: 36px;\n vertical-align: middle;\n align-items: center;\n text-align: center;\n border-radius: 12px;\n box-sizing: border-box;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n outline: none;\n border: 0;\n padding: 0 6px;\n margin: 6px 8px;\n background: transparent;\n color:var(--color-text-primary);\n white-space: nowrap;\n text-transform: uppercase;\n font-weight: 500;\n font-size: 14px;\n font-style: inherit;\n font-variant: inherit;\n font-family: inherit;\n text-decoration: none;\n overflow: hidden;\n transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);\n}\n\n\n.nr-dashboard-theme .nr-dashboard-button .md-button {\n background-color: #88888800;\n color:var(--color-text-primary);\n}\n\n.nr-dashboard-theme .nr-dashboard-button .md-button:hover {\n background-color: #88888855;\n}\n\nmd-slider .md-thumb {\n z-index: 1;\n position: absolute;\n left: -10px;\n top: 14px;\n width: 20px;\n height: 20px;\n border-radius: 20px;\n -webkit-transform: scale(.7);\n transform: scale(.7);\n transition: all .4s cubic-bezier(.25,.8,.25,1);\n box-shadow: 0 0 6px #00000070;\n}\n\n\n\n#Widgets_Radial_Gauges_cards > md-card.ng-scope._md.layout-align-center-center.visible > div > p{\n line-height:60%;\n padding: 4px 10px 4px 10px;\n}\n.chart-label {\n white-space: nowrap;\n text-align: center;\n font-size: small;\n}\n\n\n\n\n\n/*\nAdvanced stuff - dynamic change of card CSS\n\nClasses here can be used to make colored stripe at the top of card\nUsage is not in here, but they are added to md-card when needed within another template\n\n.carderr {\n background: rgb(255,0,0);\n background: linear-gradient(180deg, var(--color-red-primary) 0px, var(--color-red-secondary) 3px, rgba(80,80,80,1) 4px, rgba(45,45,45,1) 100%);\n}\n.cardok {\n background: rgb(39,255,0);\n background: linear-gradient(180deg, var(--color-green-primary) 0px, var(--color-green-secondary) 3px, rgba(70,70,70,1) 4px, rgba(40,40,40,1) 100%);\n}\n*/\n\n</style>\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"global","x":580,"y":240,"wires":[[]]},{"id":"d15ef4fe.ca6828","type":"function","z":"bf66f153.dd752","name":"chart control","func":"var defaultData = {\n first:{\n color:'#3498DB',\n value:{\n current:0,\n total:0\n },\n isSent:false\n },\n second:{\n color:'#AED6F1',\n value:{\n current:0,\n total:0\n }\n }\n}\nvar data = context.get('data') || defaultData\n\nif(msg.topic == \"reset\"){\n data = defaultData\n msg.payload = 0\n msg.topic = 'first'\n}\n\nif(msg.topic == \"first\"){\n data.first.value.current = msg.payload\n data.first.value.total += msg.payload\n if(data.first.isSent === false){\n data.first.isSent = true\n }\n}\n\nif(msg.topic == \"second\"){\n data.second.value.current = msg.payload\n data.second.value.total += msg.payload\n}\ncontext.set('data',data)\n\n\nmsg.label = '<span class=\"chart-label\"><font color='+data.first.color+'>■</font> Caldo FĆ”brica / <font color='+data.second.color+'>■</font> Caldo Destilaria</span>'+\n'<br><span class=\"chart-label\"><font color=#FFAB0B>'+data.first.value.current+\n' </font><font color=Sienna>'+data.first.value.total+' </font>/ <font color = #FFAB0B>'+data.second.value.current+\n' </font><font color = Sienna>'+data.second.value.total+'</font></span>'\n\nif(msg.topic == \"first\"){\n msg.payload = data.first.value.total\n return msg\n}\nif(msg.topic == \"second\"){\n if(data.first.isSent === false){\n return\n }\n msg.payload = data.second.value.total\n return msg\n}\n","outputs":1,"noerr":0,"x":530,"y":320,"wires":[["678b0eac.27286"]]},{"id":"6dbb5fc9.1e5d3","type":"random","z":"bf66f153.dd752","name":"","low":"1","high":"10","inte":"true","property":"payload","x":360,"y":320,"wires":[["d15ef4fe.ca6828"]]},{"id":"2e4c1e03.119b02","type":"inject","z":"bf66f153.dd752","name":"","topic":"reset","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":320,"y":240,"wires":[["d15ef4fe.ca6828"]]},{"id":"e99847d9.25fde8","type":"ui_group","z":"","name":"Radial Gauges","tab":"71cf26a9.855b38","order":2,"disp":true,"width":"6","collapse":false},{"id":"71cf26a9.855b38","type":"ui_tab","z":"","name":"Widgets","icon":"dashboard","order":7,"disabled":false,"hidden":true}]
Edit:
Chart area size can be changed too. So you have full playground:
#Widgets_Radial_Gauges_cards > md-card > div > div{
height: calc(100% - 60px);
width: calc(100% - 6px);
padding: 5px;
}
#Widgets_Radial_Gauges_cards > md-card.ng-scope._md.layout-align-center-center.visible > div > p{
line-height:60%;
padding: 4px 10px 4px 10px;
}
.chart-label {
white-space: nowrap;
text-align: center;
font-size: small;
}
Still ends up with chart below bottom border, until I added .nr-chart-title to the #Widgets_Radial_Gauges_cards line (with line-height of 60%). Also works if .chart-label line-height is set to 1.0.
If I set the .nr-dashboard-height to 84% it allowed me to up the size of the text to 0.8em which looked better if the chart was sized at 66. At 65 (with text size of 0.8em) the best chart height was 80%. The width of the chart auto adjusts so the chart stays circular.
The console is a great help.
I like the text colour adjustment, makes it stand out. The chart control function is an excellent tutorial on how to manipulate labels, thank you
2 Likes
Sorry for the late response. Works like a charm! THANKS
1 Like
Hi you seem to be replying to my post about copying selector and transform scaling CSS.
If that's your final solution, please mark the post as the solution for others reading this in the future.
Cheers.
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
