So I have a number of different graphs running on Dashing using a single 'Rickshaw' widget. I would like to use a CSS selector to define the x-axis view. I currently have it set up like this...
It dashboard.erb:
<li data-row="1" data-col="1" data-sizex="6" data-sizey="6">
<div id="weekly" data-id="etvvrb" data-view="Rickshawgraph" data-title="Weekly ETV reach" data-moreinfo="Week commencing" data-color-scheme="rainbow" data-renderer="line" data-x-axis="weekly"></div>
</li>
This defines a DIV ID for the name of the selector in CSS, in the CSS we have...
.x_tick {
position: absolute;
bottom: 0;
fill: $tick-color;
.title {
font-size: 20px;
color: $tick-color;
opacity: 0.5;
padding-bottom: 3px;
}
}
#weekly.x_tick {
position: absolute;
bottom: 0;
fill: $tick-color;
.title {
font-size: 9px;
color: $tick-color;
opacity: 0.5;
padding-bottom: 3px;
writing-mode:tb-rl;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform:rotate(90deg);
white-space:nowrap;
display:block;
bottom:0;
width:0.5px;
height:20px;
}
}
Essentially I would assume that it would read the ID and use the differing CSS for that ID, but it seems to ignore it completely. I have a feeling that the ID is simply not being passed as I would expect and I'm not really sure why.
If anybody has any background in doing this especially in using Dashing, any advice would be greatly appreciated.
I've figured it out.
Dashing will generate a class object which is based on both the data-id and data-view tags (probably via JS but I may be wrong there).
This will come out looking something like widget-data-view.data-id.
This means that you can create a new class in your CSS document using the element generated by JS. In my case, this would look something like:
.widget-rickshawgraph {
/* CSS stuff */
}
.widget-rickshawgraph.DATA-ID {
.x_tick > .title {
/* CSS overwrite */
}
Hope that makes sense. Thanks :)