Skip to content

Commit 84d4975

Browse files
GordonSmithGordonSmith
committed
Merge pull request #1571 from GordonSmith/GH-1569
GH-1569 Add mega chart title styling options
2 parents 3b60279 + 50a9062 commit 84d4975

File tree

3 files changed

+56
-5
lines changed

3 files changed

+56
-5
lines changed

‎demos/dermatology.html

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -176,10 +176,34 @@ <h1><a>Dermatology</a></h1>
176176
}
177177
}
178178
},
179-
"LN Red/Grey":{"common_Widget":{"surfaceTitleFontSize":16,"surfaceTitleFontColor":"#FAFAFA","surfaceTitleFontFamily":"PT Sans","surfaceTitleFontBold":false,"surfaceTitleBackgroundColor":"#ED1C24","surfacePadding":"null","surfaceBackgroundColor":"#FAFAFA","surfaceBorderWidth":1,"surfaceBorderColor":"#6D6E71","surfaceBorderRadius":4,"surfaceTitleAlignment":"center","paletteID":"Set1"},"other_Table":{"theadRowBackgroundColor":"#ED1C24","theadFontColor":"#FAFAFA","tbodyFirstColFontColor":"#333333","theadCellBorderColor":"#333333","tbodyCellBorderColor":"#333333","tbodyFirstColBackgroundColor":"#CCCCCC","tbodyHoverRowBackgroundColor":"#777777","tbodySelectedRowFontColor":"#333333","tbodySelectedRowBackgroundColor":"#FDFFB3"}},
180-
"Blue-Bordered":{"common_Widget":{"surfaceTitlePadding":0,"surfaceTitleFontSize":16,"surfaceTitleFontColor":"#5a6b92","surfaceTitleFontFamily":"'Courier New'","surfaceTitleFontBold":false,"surfaceTitleBackgroundColor":"transparent","surfacePadding":"null","surfaceBackgroundColor":"transparent","surfaceBorderWidth":2,"surfaceBorderColor":"#5a6b92","surfaceBorderRadius":0,"surfaceTitleAlignment":"left","paletteID":"Dark2","axisFontSize":14,"axisFontFamily":"Tahoma","xAxisTitleFontFamily":"'Courier New'","yAxisTitleFontFamily":"'Courier New'","legendFontSize":14,"legendFontFamily":"Tahoma"},"other_Table":{"theadRowBackgroundColor":"#5a6b92","theadFontColor":"#FAFAFA","tbodyFirstColFontColor":"#5a6b92","theadCellBorderColor":"#5a6b92","tbodyCellBorderColor":"#5a6b92","tbodyFirstColBackgroundColor":"#EEE","tbodyHoverRowFontColor":"#333333","tbodyHoverRowBackgroundColor":"#a0b0cd","tbodySelectedRowFontColor":"#333333","tbodySelectedRowBackgroundColor":"#c4cbdb"}},
181-
"Red-Bordered":{"common_Widget":{"surfaceTitleFontSize":19,"surfaceTitleFontColor":"rgb(237, 28, 36)","surfaceTitleFontFamily":"'Arial Black'","surfaceTitleBackgroundColor":"rgb(250, 250, 250)","surfacePadding":"null","surfaceBackgroundColor":"rgb(250, 250, 250)","surfaceBorderColor":"rgb(237, 28, 36)","paletteID":"BrBG","axisFontFamily":"'Arial Black'","xAxisTitleFontFamily":"'Arial Black'","xAxisTitleFontSize":19,"yAxisTitleFontFamily":"'Arial Black'","yAxisTitleFontSize":19,"legendFontFamily":"'Arial Black'"},"other_Table":{ "theadFontSize": "10px", "tbodyFontSize": "10px", "theadFontColor": "#ffffff", "theadFontFamily": "Tahoma", "tbodyFontFamily": "Tahoma", "theadCellBorderColor": "#ff4246", "theadRowBackgroundColor": "#ff4246", "tbodyCellBorderColor": "#ff4246", "tbodyFirstColFontColor": "#FFFFFF", "tbodyFirstColBackgroundColor": "#ff4246", "tbodyHoverRowBackgroundColor": "#ff4246", "tbodySelectedRowFontColor": "#333333", "tbodySelectedRowBackgroundColor": "#ff84cb" }},
182-
"Green/Light-Grey":{"common_Widget":{"surfaceTitlePadding":0,"surfaceTitleFontSize":16,"surfaceTitleFontColor":"#4e4e4e","surfaceTitleFontFamily":"Tahoma","surfaceTitleFontBold":false,"surfaceTitleBackgroundColor":"#dbb593","surfacePadding":"null","surfaceBackgroundColor":"#e2e2dc","surfaceBorderWidth":0,"surfaceBorderColor":"#ffffff","surfaceBorderRadius":0,"surfaceTitleAlignment":"left","paletteID":"category10","axisFontSize":14,"axisFontFamily":"Tahoma","xAxisTitleFontFamily":"Tahoma","yAxisTitleFontFamily":"Tahoma","legendFontSize":14,"legendFontFamily":"Tahoma"},"other_Table":{"theadFontColor": "#22620f", "theadCellBorderColor": "#333333", "theadRowBackgroundColor": "#b8faba", "tbodyCellBorderColor": "#333333", "tbodyFirstColFontColor": "#333333", "tbodyFirstColBackgroundColor": "#CCCCCC", "tbodyHoverRowBackgroundColor": "#bbbcb1", "tbodySelectedRowFontColor": "#333333", "tbodySelectedRowBackgroundColor": "#FDFFB3","tbodyRowBackgroundColor":"#bedacf"}},
179+
"LN Red/Grey": {
180+
"common_Widget": {
181+
"surfacePadding": "0", "surfaceTitleFontSize": 16, "surfaceTitleFontColor": "#FAFAFA", "surfaceTitleFontBold": false, "surfaceTitleBackgroundColor": "#ED1C24", "surfaceBackgroundColor": "#FAFAFA", "surfaceBorderWidth": 1, "surfaceBorderColor": "#6D6E71", "surfaceBorderRadius": 4,
182+
"titleFontSize": 16, "titleFontColor": "#FAFAFA", "titleFontBold": false, "titleBackgroundColor": "#ED1C24",
183+
"paletteID": "YlOrRd", "theadFontColor": "#FAFAFA", "theadCellBorderColor": "#333333", "theadRowBackgroundColor": "#ED1C24", "tbodyCellBorderColor": "#333333", "tbodyFirstColFontColor": "#333333", "tbodyFirstColBackgroundColor": "#CCCCCC", "tbodyHoverRowBackgroundColor": "#777777", "tbodySelectedRowFontColor": "#333333", "tbodySelectedRowBackgroundColor": "#FDFFB3"
184+
}
185+
},
186+
"Blue-Bordered": {
187+
"common_Widget": {
188+
"surfaceTitlePadding": 0, "surfaceTitleFontSize": 16, "surfaceTitleFontColor": "#5a6b92", "surfaceTitleFontFamily": "'Courier New'", "surfaceTitleFontBold": false, "surfaceTitleBackgroundColor": "transparent",
189+
"titleFontSize":16,"titleFontColor":"#5a6b92","titleFontFamily":"'Courier New'","titleFontBold":false,"titleBackgroundColor":"transparent",
190+
"surfacePadding": "null", "surfaceBackgroundColor": "transparent", "surfaceBorderWidth": 2, "surfaceBorderColor": "#5a6b92", "surfaceBorderRadius": 0, "surfaceTitleAlignment": "left", "paletteID": "Dark2", "axisFontSize": 14, "axisFontFamily": "Tahoma", "xAxisTitleFontFamily": "'Courier New'", "yAxisTitleFontFamily": "'Courier New'", "legendFontSize": 14, "legendFontFamily": "Tahoma"
191+
}, "other_Table": { "theadRowBackgroundColor": "#5a6b92", "theadFontColor": "#FAFAFA", "tbodyFirstColFontColor": "#5a6b92", "theadCellBorderColor": "#5a6b92", "tbodyCellBorderColor": "#5a6b92", "tbodyFirstColBackgroundColor": "#EEE", "tbodyHoverRowFontColor": "#333333", "tbodyHoverRowBackgroundColor": "#a0b0cd", "tbodySelectedRowFontColor": "#333333", "tbodySelectedRowBackgroundColor": "#c4cbdb" }
192+
},
193+
"Red-Bordered": {
194+
"common_Widget": {
195+
"surfacePadding": null, "surfaceTitleFontSize": 19, "surfaceTitleFontColor": "rgb(237, 28, 36)", "surfaceTitleFontFamily": "'Arial Black'", "surfaceTitleBackgroundColor": "rgb(250, 250, 250)", "surfaceBackgroundColor": "rgb(250, 250, 250)", "surfaceBorderColor": "rgb(237, 28, 36)",
196+
"titleFontSize": 19, "titleFontColor": "rgb(237, 28, 36)", "titleFontFamily": "'Arial Black'", "titleBackgroundColor": "rgb(250, 250, 250)",
197+
"paletteID": "BrBG", "axisFontFamily": "'Arial Black'", "xAxisTitleFontFamily": "'Arial Black'", "xAxisTitleFontSize": 19, "yAxisTitleFontFamily": "'Arial Black'", "yAxisTitleFontSize": 19, "legendFontFamily": "'Arial Black'"
198+
}, "other_Table": { "theadFontSize": "10px", "tbodyFontSize": "10px", "theadFontColor": "#ffffff", "theadFontFamily": "Tahoma", "tbodyFontFamily": "Tahoma", "theadCellBorderColor": "#ff4246", "theadRowBackgroundColor": "#ff4246", "tbodyCellBorderColor": "#ff4246", "tbodyFirstColFontColor": "#FFFFFF", "tbodyFirstColBackgroundColor": "#ff4246", "tbodyHoverRowBackgroundColor": "#ff4246", "tbodySelectedRowFontColor": "#333333", "tbodySelectedRowBackgroundColor": "#ff84cb" }
199+
},
200+
"Green/Light-Grey": {
201+
"common_Widget": {
202+
"surfaceTitlePadding": 0, "surfaceTitleFontSize": 16, "surfaceTitleFontColor": "#4e4e4e", "surfaceTitleFontFamily": "Tahoma", "surfaceTitleFontBold": false, "surfaceTitleBackgroundColor": "#dbb593", "surfacePadding": "null", "surfaceBackgroundColor": "#e2e2dc",
203+
"titlePadding": 0, "titleFontSize": 16, "titleFontColor": "#4e4e4e", "titleFontFamily": "Tahoma", "titleFontBold": false, "titleBackgroundColor": "#dbb593",
204+
"surfaceBorderWidth": 0, "surfaceBorderColor": "#ffffff", "surfaceBorderRadius": 0, "surfaceTitleAlignment": "left", "paletteID": "category10", "axisFontSize": 14, "axisFontFamily": "Tahoma", "xAxisTitleFontFamily": "Tahoma", "yAxisTitleFontFamily": "Tahoma", "legendFontSize": 14, "legendFontFamily": "Tahoma"
205+
}, "other_Table": { "theadFontColor": "#22620f", "theadCellBorderColor": "#333333", "theadRowBackgroundColor": "#b8faba", "tbodyCellBorderColor": "#333333", "tbodyFirstColFontColor": "#333333", "tbodyFirstColBackgroundColor": "#CCCCCC", "tbodyHoverRowBackgroundColor": "#bbbcb1", "tbodySelectedRowFontColor": "#333333", "tbodySelectedRowBackgroundColor": "#FDFFB3", "tbodyRowBackgroundColor": "#bedacf" }
206+
},
183207
};
184208
window.__hpcc_theme = themeSelectObj['Default'];
185209

‎src/composite/MegaChart.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
MegaChart.prototype._allChartTypes = MultiChart.prototype._allChartTypes;
3333

3434
MegaChart.prototype.publishReset();
35+
3536
MegaChart.prototype.publishProxy("valueAxisTitle", "_valueTitle", "text");
3637
MegaChart.prototype.publishProxy("domainAxisTitle","_domainTitle","text");
3738

@@ -42,6 +43,14 @@
4243
MegaChart.prototype.publish("showCSV",true,"boolean","Show/Hide CSV button", null, {tags:["Basic"]});
4344

4445
MegaChart.prototype.publishProxy("title", "_toolbar", "title");
46+
47+
//TODO: Proxy + themes not working...
48+
MegaChart.prototype.publish("titleFontSize", null, "number", "Title Font Size (px)", null, { tags: ["Advanced"], optional: true });
49+
MegaChart.prototype.publish("titleFontColor", null, "html-color", "Title Font Color", null, { tags: ["Advanced"], optional: true });
50+
MegaChart.prototype.publish("titleFontFamily", null, "string", "Title Font Family", null, { tags: ["Advanced"], optional: true });
51+
MegaChart.prototype.publish("titleFontBold", true, "boolean", "Enable Bold Title Font", null, { tags: ["Advanced"], optional: true });
52+
MegaChart.prototype.publish("titleBackgroundColor", null, "html-color", "Background Color", null, { tags: ["Intermediate"], optional: true });
53+
4554
MegaChart.prototype.publishProxy("chartType", "_chart", "chartType");
4655
MegaChart.prototype.publishProxy("chart", "_chart", "chart");
4756

@@ -138,6 +147,15 @@
138147
this._prevShowToolbar = this.showToolbar();
139148
}
140149

150+
//TODO: Proxy + themes not working...
151+
this._toolbar
152+
.fontSize(this.titleFontSize())
153+
.fontColor(this.titleFontColor())
154+
.fontFamily(this.titleFontFamily())
155+
.fontBold(this.titleFontBold())
156+
.backgroundColor(this.titleBackgroundColor())
157+
;
158+
141159
this._chart
142160
.data(this.data());
143161

‎src/layout/Toolbar.js

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,11 @@
1717

1818
Toolbar.prototype.publish("title", "", "string", "Title",null,{tags:["Intermediate"]});
1919

20-
Toolbar.prototype.publish("backgroundColor", null, "html-color", "Styling",null,{tags:["Intermediate"]});
20+
Toolbar.prototype.publish("fontSize", null, "number", "Title Font Size (px)", null, { tags: ["Advanced"], optional: true });
21+
Toolbar.prototype.publish("fontColor", null, "html-color", "Title Font Color", null, { tags: ["Advanced"], optional: true });
22+
Toolbar.prototype.publish("fontFamily", null, "string", "Title Font Family", null, { tags: ["Advanced"], optional: true });
23+
Toolbar.prototype.publish("fontBold", true, "boolean", "Enable Bold Title Font", null, { tags: ["Advanced"], optional: true });
24+
Toolbar.prototype.publish("backgroundColor", null, "html-color", "Background Color", null, { tags: ["Intermediate"], optional: true });
2125

2226
Toolbar.prototype.publish("responsive", true, "boolean", "Adapts to pixel width",null,{tags:["Basic"]});
2327

@@ -49,6 +53,11 @@
4953
span.style("padding", offset+"px");
5054
});
5155
title.selectAll("div.toolbar-title > span")
56+
.style("font-size", this.fontSize_exists() ? this.fontSize() + "px" : null)
57+
.style("color", this.fontColor_exists() ? this.fontColor() : null)
58+
.style("font-family", this.fontFamily_exists() ? this.fontFamily() : null)
59+
.style("font-weight", this.fontBold_exists() ? (this.fontBold() ? "bold" : "normal") : null)
60+
.style("background-color", this.backgroundColor_exists() ? this.backgroundColor() : null)
5261
.text(context.title())
5362
;
5463
title.exit().remove();

0 commit comments

Comments
 (0)