From 07e2c59aa35f9d3057f247882136ea6238ed207c Mon Sep 17 00:00:00 2001 From: Matthijs Kuiper Date: Mon, 8 Jan 2018 00:34:58 +0100 Subject: Assets dir with libs --- html/assets/lib/highcharts/themes/dark-blue.js | 254 +++++++++++++++++++++++++ 1 file changed, 254 insertions(+) create mode 100644 html/assets/lib/highcharts/themes/dark-blue.js (limited to 'html/assets/lib/highcharts/themes') diff --git a/html/assets/lib/highcharts/themes/dark-blue.js b/html/assets/lib/highcharts/themes/dark-blue.js new file mode 100644 index 0000000..7cf7138 --- /dev/null +++ b/html/assets/lib/highcharts/themes/dark-blue.js @@ -0,0 +1,254 @@ +/** + * Dark blue theme for Highcharts JS + * @author Torstein Honsi + */ + +Highcharts.theme = { + colors: ["#DDDF0D", "#55BF3B", "#DF5353", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee", + "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"], + chart: { + backgroundColor: { + linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 }, + stops: [ + [0, 'rgb(48, 48, 96)'], + [1, 'rgb(0, 0, 0)'] + ] + }, + borderColor: '#000000', + borderWidth: 2, + className: 'dark-container', + plotBackgroundColor: 'rgba(255, 255, 255, .1)', + plotBorderColor: '#CCCCCC', + plotBorderWidth: 1 + }, + title: { + style: { + color: '#C0C0C0', + font: 'bold 16px "Trebuchet MS", Verdana, sans-serif' + } + }, + subtitle: { + style: { + color: '#666666', + font: 'bold 12px "Trebuchet MS", Verdana, sans-serif' + } + }, + xAxis: { + gridLineColor: '#333333', + gridLineWidth: 1, + labels: { + style: { + color: '#A0A0A0' + } + }, + lineColor: '#A0A0A0', + tickColor: '#A0A0A0', + title: { + style: { + color: '#CCC', + fontWeight: 'bold', + fontSize: '12px', + fontFamily: 'Trebuchet MS, Verdana, sans-serif' + + } + } + }, + yAxis: { + gridLineColor: '#333333', + labels: { + style: { + color: '#A0A0A0' + } + }, + lineColor: '#A0A0A0', + minorTickInterval: null, + tickColor: '#A0A0A0', + tickWidth: 1, + title: { + style: { + color: '#CCC', + fontWeight: 'bold', + fontSize: '12px', + fontFamily: 'Trebuchet MS, Verdana, sans-serif' + } + } + }, + tooltip: { + backgroundColor: 'rgba(0, 0, 0, 0.75)', + style: { + color: '#F0F0F0' + } + }, + toolbar: { + itemStyle: { + color: 'silver' + } + }, + plotOptions: { + line: { + dataLabels: { + color: '#CCC' + }, + marker: { + lineColor: '#333' + } + }, + spline: { + marker: { + lineColor: '#333' + } + }, + scatter: { + marker: { + lineColor: '#333' + } + }, + candlestick: { + lineColor: 'white' + } + }, + legend: { + itemStyle: { + font: '9pt Trebuchet MS, Verdana, sans-serif', + color: '#A0A0A0' + }, + itemHoverStyle: { + color: '#FFF' + }, + itemHiddenStyle: { + color: '#444' + } + }, + credits: { + style: { + color: '#666' + } + }, + labels: { + style: { + color: '#CCC' + } + }, + + navigation: { + buttonOptions: { + symbolStroke: '#DDDDDD', + hoverSymbolStroke: '#FFFFFF', + theme: { + fill: { + linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, + stops: [ + [0.4, '#606060'], + [0.6, '#333333'] + ] + }, + stroke: '#000000' + } + } + }, + + // scroll charts + rangeSelector: { + buttonTheme: { + fill: { + linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, + stops: [ + [0.4, '#888'], + [0.6, '#555'] + ] + }, + stroke: '#000000', + style: { + color: '#CCC', + fontWeight: 'bold' + }, + states: { + hover: { + fill: { + linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, + stops: [ + [0.4, '#BBB'], + [0.6, '#888'] + ] + }, + stroke: '#000000', + style: { + color: 'white' + } + }, + select: { + fill: { + linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, + stops: [ + [0.1, '#000'], + [0.3, '#333'] + ] + }, + stroke: '#000000', + style: { + color: 'yellow' + } + } + } + }, + inputStyle: { + backgroundColor: '#333', + color: 'silver' + }, + labelStyle: { + color: 'silver' + } + }, + + navigator: { + handles: { + backgroundColor: '#666', + borderColor: '#AAA' + }, + outlineColor: '#CCC', + maskFill: 'rgba(16, 16, 16, 0.5)', + series: { + color: '#7798BF', + lineColor: '#A6C7ED' + } + }, + + scrollbar: { + barBackgroundColor: { + linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, + stops: [ + [0.4, '#888'], + [0.6, '#555'] + ] + }, + barBorderColor: '#CCC', + buttonArrowColor: '#CCC', + buttonBackgroundColor: { + linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, + stops: [ + [0.4, '#888'], + [0.6, '#555'] + ] + }, + buttonBorderColor: '#CCC', + rifleColor: '#FFF', + trackBackgroundColor: { + linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, + stops: [ + [0, '#000'], + [1, '#333'] + ] + }, + trackBorderColor: '#666' + }, + + // special colors for some of the + legendBackgroundColor: 'rgba(0, 0, 0, 0.5)', + background2: 'rgb(35, 35, 70)', + dataLabelsColor: '#444', + textColor: '#C0C0C0', + maskColor: 'rgba(255,255,255,0.3)' +}; + +// Apply the theme +var highchartsOptions = Highcharts.setOptions(Highcharts.theme); -- cgit From 7c2945bf46812dc0c8943a11eed4e04da16a85e3 Mon Sep 17 00:00:00 2001 From: Matthijs Kuiper Date: Tue, 9 Jan 2018 02:05:04 +0100 Subject: Custom chart theme --- html/assets/lib/highcharts/themes/dark-green.js | 255 +++++++++++++++++++++ html/assets/lib/highcharts/themes/dark-unica.js | 213 ++++++++++++++++++ html/assets/lib/highcharts/themes/gray.js | 257 ++++++++++++++++++++++ html/assets/lib/highcharts/themes/grid-light.js | 74 +++++++ html/assets/lib/highcharts/themes/grid.js | 103 +++++++++ html/assets/lib/highcharts/themes/sand-signika.js | 104 +++++++++ html/assets/lib/highcharts/themes/skies.js | 89 ++++++++ html/assets/lib/highcharts/themes/utstats.js | 231 +++++++++++++++++++ 8 files changed, 1326 insertions(+) create mode 100644 html/assets/lib/highcharts/themes/dark-green.js create mode 100644 html/assets/lib/highcharts/themes/dark-unica.js create mode 100644 html/assets/lib/highcharts/themes/gray.js create mode 100644 html/assets/lib/highcharts/themes/grid-light.js create mode 100644 html/assets/lib/highcharts/themes/grid.js create mode 100644 html/assets/lib/highcharts/themes/sand-signika.js create mode 100644 html/assets/lib/highcharts/themes/skies.js create mode 100644 html/assets/lib/highcharts/themes/utstats.js (limited to 'html/assets/lib/highcharts/themes') diff --git a/html/assets/lib/highcharts/themes/dark-green.js b/html/assets/lib/highcharts/themes/dark-green.js new file mode 100644 index 0000000..4a7ad58 --- /dev/null +++ b/html/assets/lib/highcharts/themes/dark-green.js @@ -0,0 +1,255 @@ +/** + * Dark blue theme for Highcharts JS + * @author Torstein Honsi + */ + +Highcharts.theme = { + colors: ["#DDDF0D", "#55BF3B", "#DF5353", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee", + "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"], + chart: { + backgroundColor: { + linearGradient: [0, 0, 250, 500], + stops: [ + [0, 'rgb(48, 96, 48)'], + [1, 'rgb(0, 0, 0)'] + ] + }, + borderColor: '#000000', + borderWidth: 2, + className: 'dark-container', + plotBackgroundColor: 'rgba(255, 255, 255, .1)', + plotBorderColor: '#CCCCCC', + plotBorderWidth: 1 + }, + title: { + style: { + color: '#C0C0C0', + font: 'bold 16px "Trebuchet MS", Verdana, sans-serif' + } + }, + subtitle: { + style: { + color: '#666666', + font: 'bold 12px "Trebuchet MS", Verdana, sans-serif' + } + }, + xAxis: { + gridLineColor: '#333333', + gridLineWidth: 1, + labels: { + style: { + color: '#A0A0A0' + } + }, + lineColor: '#A0A0A0', + tickColor: '#A0A0A0', + title: { + style: { + color: '#CCC', + fontWeight: 'bold', + fontSize: '12px', + fontFamily: 'Trebuchet MS, Verdana, sans-serif' + + } + } + }, + yAxis: { + gridLineColor: '#333333', + labels: { + style: { + color: '#A0A0A0' + } + }, + lineColor: '#A0A0A0', + minorTickInterval: null, + tickColor: '#A0A0A0', + tickWidth: 1, + title: { + style: { + color: '#CCC', + fontWeight: 'bold', + fontSize: '12px', + fontFamily: 'Trebuchet MS, Verdana, sans-serif' + } + } + }, + tooltip: { + backgroundColor: 'rgba(0, 0, 0, 0.75)', + style: { + color: '#F0F0F0' + } + }, + toolbar: { + itemStyle: { + color: 'silver' + } + }, + plotOptions: { + line: { + dataLabels: { + color: '#CCC' + }, + marker: { + lineColor: '#333' + } + }, + spline: { + marker: { + lineColor: '#333' + } + }, + scatter: { + marker: { + lineColor: '#333' + } + }, + candlestick: { + lineColor: 'white' + } + }, + legend: { + itemStyle: { + font: '9pt Trebuchet MS, Verdana, sans-serif', + color: '#A0A0A0' + }, + itemHoverStyle: { + color: '#FFF' + }, + itemHiddenStyle: { + color: '#444' + } + }, + credits: { + style: { + color: '#666' + } + }, + labels: { + style: { + color: '#CCC' + } + }, + + + navigation: { + buttonOptions: { + symbolStroke: '#DDDDDD', + hoverSymbolStroke: '#FFFFFF', + theme: { + fill: { + linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, + stops: [ + [0.4, '#606060'], + [0.6, '#333333'] + ] + }, + stroke: '#000000' + } + } + }, + + // scroll charts + rangeSelector: { + buttonTheme: { + fill: { + linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, + stops: [ + [0.4, '#888'], + [0.6, '#555'] + ] + }, + stroke: '#000000', + style: { + color: '#CCC', + fontWeight: 'bold' + }, + states: { + hover: { + fill: { + linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, + stops: [ + [0.4, '#BBB'], + [0.6, '#888'] + ] + }, + stroke: '#000000', + style: { + color: 'white' + } + }, + select: { + fill: { + linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, + stops: [ + [0.1, '#000'], + [0.3, '#333'] + ] + }, + stroke: '#000000', + style: { + color: 'yellow' + } + } + } + }, + inputStyle: { + backgroundColor: '#333', + color: 'silver' + }, + labelStyle: { + color: 'silver' + } + }, + + navigator: { + handles: { + backgroundColor: '#666', + borderColor: '#AAA' + }, + outlineColor: '#CCC', + maskFill: 'rgba(16, 16, 16, 0.5)', + series: { + color: '#7798BF', + lineColor: '#A6C7ED' + } + }, + + scrollbar: { + barBackgroundColor: { + linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, + stops: [ + [0.4, '#888'], + [0.6, '#555'] + ] + }, + barBorderColor: '#CCC', + buttonArrowColor: '#CCC', + buttonBackgroundColor: { + linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, + stops: [ + [0.4, '#888'], + [0.6, '#555'] + ] + }, + buttonBorderColor: '#CCC', + rifleColor: '#FFF', + trackBackgroundColor: { + linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, + stops: [ + [0, '#000'], + [1, '#333'] + ] + }, + trackBorderColor: '#666' + }, + + // special colors for some of the + legendBackgroundColor: 'rgba(0, 0, 0, 0.5)', + background2: 'rgb(35, 35, 70)', + dataLabelsColor: '#444', + textColor: '#C0C0C0', + maskColor: 'rgba(255,255,255,0.3)' +}; + +// Apply the theme +var highchartsOptions = Highcharts.setOptions(Highcharts.theme); diff --git a/html/assets/lib/highcharts/themes/dark-unica.js b/html/assets/lib/highcharts/themes/dark-unica.js new file mode 100644 index 0000000..4f1f8df --- /dev/null +++ b/html/assets/lib/highcharts/themes/dark-unica.js @@ -0,0 +1,213 @@ +/** + * Dark theme for Highcharts JS + * @author Torstein Honsi + */ + +// Load the fonts +Highcharts.createElement('link', { + href: 'http://fonts.googleapis.com/css?family=Unica+One', + rel: 'stylesheet', + type: 'text/css' +}, null, document.getElementsByTagName('head')[0]); + +Highcharts.theme = { + colors: ["#2b908f", "#90ee7e", "#f45b5b", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee", + "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"], + chart: { + backgroundColor: { + linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 }, + stops: [ + [0, '#2a2a2b'], + [1, '#3e3e40'] + ] + }, + style: { + fontFamily: "'Unica One', sans-serif" + }, + plotBorderColor: '#606063' + }, + title: { + style: { + color: '#E0E0E3', + textTransform: 'uppercase', + fontSize: '20px' + } + }, + subtitle: { + style: { + color: '#E0E0E3', + textTransform: 'uppercase' + } + }, + xAxis: { + gridLineColor: '#707073', + labels: { + style: { + color: '#E0E0E3' + } + }, + lineColor: '#707073', + minorGridLineColor: '#505053', + tickColor: '#707073', + title: { + style: { + color: '#A0A0A3' + + } + } + }, + yAxis: { + gridLineColor: '#707073', + labels: { + style: { + color: '#E0E0E3' + } + }, + lineColor: '#707073', + minorGridLineColor: '#505053', + tickColor: '#707073', + tickWidth: 1, + title: { + style: { + color: '#A0A0A3' + } + } + }, + tooltip: { + backgroundColor: 'rgba(0, 0, 0, 0.85)', + style: { + color: '#F0F0F0' + } + }, + plotOptions: { + series: { + dataLabels: { + color: '#B0B0B3' + }, + marker: { + lineColor: '#333' + } + }, + boxplot: { + fillColor: '#505053' + }, + candlestick: { + lineColor: 'white' + }, + errorbar: { + color: 'white' + } + }, + legend: { + itemStyle: { + color: '#E0E0E3' + }, + itemHoverStyle: { + color: '#FFF' + }, + itemHiddenStyle: { + color: '#606063' + } + }, + credits: { + style: { + color: '#666' + } + }, + labels: { + style: { + color: '#707073' + } + }, + + drilldown: { + activeAxisLabelStyle: { + color: '#F0F0F3' + }, + activeDataLabelStyle: { + color: '#F0F0F3' + } + }, + + navigation: { + buttonOptions: { + symbolStroke: '#DDDDDD', + theme: { + fill: '#505053' + } + } + }, + + // scroll charts + rangeSelector: { + buttonTheme: { + fill: '#505053', + stroke: '#000000', + style: { + color: '#CCC' + }, + states: { + hover: { + fill: '#707073', + stroke: '#000000', + style: { + color: 'white' + } + }, + select: { + fill: '#000003', + stroke: '#000000', + style: { + color: 'white' + } + } + } + }, + inputBoxBorderColor: '#505053', + inputStyle: { + backgroundColor: '#333', + color: 'silver' + }, + labelStyle: { + color: 'silver' + } + }, + + navigator: { + handles: { + backgroundColor: '#666', + borderColor: '#AAA' + }, + outlineColor: '#CCC', + maskFill: 'rgba(255,255,255,0.1)', + series: { + color: '#7798BF', + lineColor: '#A6C7ED' + }, + xAxis: { + gridLineColor: '#505053' + } + }, + + scrollbar: { + barBackgroundColor: '#808083', + barBorderColor: '#808083', + buttonArrowColor: '#CCC', + buttonBackgroundColor: '#606063', + buttonBorderColor: '#606063', + rifleColor: '#FFF', + trackBackgroundColor: '#404043', + trackBorderColor: '#404043' + }, + + // special colors for some of the + legendBackgroundColor: 'rgba(0, 0, 0, 0.5)', + background2: '#505053', + dataLabelsColor: '#B0B0B3', + textColor: '#C0C0C0', + contrastTextColor: '#F0F0F3', + maskColor: 'rgba(255,255,255,0.3)' +}; + +// Apply the theme +Highcharts.setOptions(Highcharts.theme); diff --git a/html/assets/lib/highcharts/themes/gray.js b/html/assets/lib/highcharts/themes/gray.js new file mode 100644 index 0000000..d9a4016 --- /dev/null +++ b/html/assets/lib/highcharts/themes/gray.js @@ -0,0 +1,257 @@ +/** + * Gray theme for Highcharts JS + * @author Torstein Honsi + */ + +Highcharts.theme = { + colors: ["#DDDF0D", "#7798BF", "#55BF3B", "#DF5353", "#aaeeee", "#ff0066", "#eeaaee", + "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"], + chart: { + backgroundColor: { + linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, + stops: [ + [0, 'rgb(96, 96, 96)'], + [1, 'rgb(16, 16, 16)'] + ] + }, + borderWidth: 0, + borderRadius: 0, + plotBackgroundColor: null, + plotShadow: false, + plotBorderWidth: 0 + }, + title: { + style: { + color: '#FFF', + font: '16px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif' + } + }, + subtitle: { + style: { + color: '#DDD', + font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif' + } + }, + xAxis: { + gridLineWidth: 0, + lineColor: '#999', + tickColor: '#999', + labels: { + style: { + color: '#999', + fontWeight: 'bold' + } + }, + title: { + style: { + color: '#AAA', + font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif' + } + } + }, + yAxis: { + alternateGridColor: null, + minorTickInterval: null, + gridLineColor: 'rgba(255, 255, 255, .1)', + minorGridLineColor: 'rgba(255,255,255,0.07)', + lineWidth: 0, + tickWidth: 0, + labels: { + style: { + color: '#999', + fontWeight: 'bold' + } + }, + title: { + style: { + color: '#AAA', + font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif' + } + } + }, + legend: { + itemStyle: { + color: '#CCC' + }, + itemHoverStyle: { + color: '#FFF' + }, + itemHiddenStyle: { + color: '#333' + } + }, + labels: { + style: { + color: '#CCC' + } + }, + tooltip: { + backgroundColor: { + linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, + stops: [ + [0, 'rgba(96, 96, 96, .8)'], + [1, 'rgba(16, 16, 16, .8)'] + ] + }, + borderWidth: 0, + style: { + color: '#FFF' + } + }, + + + plotOptions: { + series: { + nullColor: '#444444' + }, + line: { + dataLabels: { + color: '#CCC' + }, + marker: { + lineColor: '#333' + } + }, + spline: { + marker: { + lineColor: '#333' + } + }, + scatter: { + marker: { + lineColor: '#333' + } + }, + candlestick: { + lineColor: 'white' + } + }, + + toolbar: { + itemStyle: { + color: '#CCC' + } + }, + + navigation: { + buttonOptions: { + symbolStroke: '#DDDDDD', + hoverSymbolStroke: '#FFFFFF', + theme: { + fill: { + linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, + stops: [ + [0.4, '#606060'], + [0.6, '#333333'] + ] + }, + stroke: '#000000' + } + } + }, + + // scroll charts + rangeSelector: { + buttonTheme: { + fill: { + linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, + stops: [ + [0.4, '#888'], + [0.6, '#555'] + ] + }, + stroke: '#000000', + style: { + color: '#CCC', + fontWeight: 'bold' + }, + states: { + hover: { + fill: { + linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, + stops: [ + [0.4, '#BBB'], + [0.6, '#888'] + ] + }, + stroke: '#000000', + style: { + color: 'white' + } + }, + select: { + fill: { + linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, + stops: [ + [0.1, '#000'], + [0.3, '#333'] + ] + }, + stroke: '#000000', + style: { + color: 'yellow' + } + } + } + }, + inputStyle: { + backgroundColor: '#333', + color: 'silver' + }, + labelStyle: { + color: 'silver' + } + }, + + navigator: { + handles: { + backgroundColor: '#666', + borderColor: '#AAA' + }, + outlineColor: '#CCC', + maskFill: 'rgba(16, 16, 16, 0.5)', + series: { + color: '#7798BF', + lineColor: '#A6C7ED' + } + }, + + scrollbar: { + barBackgroundColor: { + linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, + stops: [ + [0.4, '#888'], + [0.6, '#555'] + ] + }, + barBorderColor: '#CCC', + buttonArrowColor: '#CCC', + buttonBackgroundColor: { + linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, + stops: [ + [0.4, '#888'], + [0.6, '#555'] + ] + }, + buttonBorderColor: '#CCC', + rifleColor: '#FFF', + trackBackgroundColor: { + linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, + stops: [ + [0, '#000'], + [1, '#333'] + ] + }, + trackBorderColor: '#666' + }, + + // special colors for some of the demo examples + legendBackgroundColor: 'rgba(48, 48, 48, 0.8)', + background2: 'rgb(70, 70, 70)', + dataLabelsColor: '#444', + textColor: '#E0E0E0', + maskColor: 'rgba(255,255,255,0.3)' +}; + +// Apply the theme +var highchartsOptions = Highcharts.setOptions(Highcharts.theme); diff --git a/html/assets/lib/highcharts/themes/grid-light.js b/html/assets/lib/highcharts/themes/grid-light.js new file mode 100644 index 0000000..acf53ae --- /dev/null +++ b/html/assets/lib/highcharts/themes/grid-light.js @@ -0,0 +1,74 @@ +/** + * Grid-light theme for Highcharts JS + * @author Torstein Honsi + */ + +// Load the fonts +Highcharts.createElement('link', { + href: 'http://fonts.googleapis.com/css?family=Dosis:400,600', + rel: 'stylesheet', + type: 'text/css' +}, null, document.getElementsByTagName('head')[0]); + +Highcharts.theme = { + colors: ["#7cb5ec", "#f7a35c", "#90ee7e", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee", + "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"], + chart: { + backgroundColor: null, + style: { + fontFamily: "Dosis, sans-serif" + } + }, + title: { + style: { + fontSize: '16px', + fontWeight: 'bold', + textTransform: 'uppercase' + } + }, + tooltip: { + borderWidth: 0, + backgroundColor: 'rgba(219,219,216,0.8)', + shadow: false + }, + legend: { + itemStyle: { + fontWeight: 'bold', + fontSize: '13px' + } + }, + xAxis: { + gridLineWidth: 1, + labels: { + style: { + fontSize: '12px' + } + } + }, + yAxis: { + minorTickInterval: 'auto', + title: { + style: { + textTransform: 'uppercase' + } + }, + labels: { + style: { + fontSize: '12px' + } + } + }, + plotOptions: { + candlestick: { + lineColor: '#404048' + } + }, + + + // General + background2: '#F0F0EA' + +}; + +// Apply the theme +Highcharts.setOptions(Highcharts.theme); diff --git a/html/assets/lib/highcharts/themes/grid.js b/html/assets/lib/highcharts/themes/grid.js new file mode 100644 index 0000000..70342f5 --- /dev/null +++ b/html/assets/lib/highcharts/themes/grid.js @@ -0,0 +1,103 @@ +/** + * Grid theme for Highcharts JS + * @author Torstein Honsi + */ + +Highcharts.theme = { + colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'], + chart: { + backgroundColor: { + linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 }, + stops: [ + [0, 'rgb(255, 255, 255)'], + [1, 'rgb(240, 240, 255)'] + ] + }, + borderWidth: 2, + plotBackgroundColor: 'rgba(255, 255, 255, .9)', + plotShadow: true, + plotBorderWidth: 1 + }, + title: { + style: { + color: '#000', + font: 'bold 16px "Trebuchet MS", Verdana, sans-serif' + } + }, + subtitle: { + style: { + color: '#666666', + font: 'bold 12px "Trebuchet MS", Verdana, sans-serif' + } + }, + xAxis: { + gridLineWidth: 1, + lineColor: '#000', + tickColor: '#000', + labels: { + style: { + color: '#000', + font: '11px Trebuchet MS, Verdana, sans-serif' + } + }, + title: { + style: { + color: '#333', + fontWeight: 'bold', + fontSize: '12px', + fontFamily: 'Trebuchet MS, Verdana, sans-serif' + + } + } + }, + yAxis: { + minorTickInterval: 'auto', + lineColor: '#000', + lineWidth: 1, + tickWidth: 1, + tickColor: '#000', + labels: { + style: { + color: '#000', + font: '11px Trebuchet MS, Verdana, sans-serif' + } + }, + title: { + style: { + color: '#333', + fontWeight: 'bold', + fontSize: '12px', + fontFamily: 'Trebuchet MS, Verdana, sans-serif' + } + } + }, + legend: { + itemStyle: { + font: '9pt Trebuchet MS, Verdana, sans-serif', + color: 'black' + + }, + itemHoverStyle: { + color: '#039' + }, + itemHiddenStyle: { + color: 'gray' + } + }, + labels: { + style: { + color: '#99b' + } + }, + + navigation: { + buttonOptions: { + theme: { + stroke: '#CCCCCC' + } + } + } +}; + +// Apply the theme +var highchartsOptions = Highcharts.setOptions(Highcharts.theme); diff --git a/html/assets/lib/highcharts/themes/sand-signika.js b/html/assets/lib/highcharts/themes/sand-signika.js new file mode 100644 index 0000000..2f1e34e --- /dev/null +++ b/html/assets/lib/highcharts/themes/sand-signika.js @@ -0,0 +1,104 @@ +/** + * Sand-Signika theme for Highcharts JS + * @author Torstein Honsi + */ + +// Load the fonts +Highcharts.createElement('link', { + href: 'http://fonts.googleapis.com/css?family=Signika:400,700', + rel: 'stylesheet', + type: 'text/css' +}, null, document.getElementsByTagName('head')[0]); + +// Add the background image to the container +Highcharts.wrap(Highcharts.Chart.prototype, 'getContainer', function (proceed) { + proceed.call(this); + this.container.style.background = 'url(http://www.highcharts.com/samples/graphics/sand.png)'; +}); + + +Highcharts.theme = { + colors: ["#f45b5b", "#8085e9", "#8d4654", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee", + "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"], + chart: { + backgroundColor: null, + style: { + fontFamily: "Signika, serif" + } + }, + title: { + style: { + color: 'black', + fontSize: '16px', + fontWeight: 'bold' + } + }, + subtitle: { + style: { + color: 'black' + } + }, + tooltip: { + borderWidth: 0 + }, + legend: { + itemStyle: { + fontWeight: 'bold', + fontSize: '13px' + } + }, + xAxis: { + labels: { + style: { + color: '#6e6e70' + } + } + }, + yAxis: { + labels: { + style: { + color: '#6e6e70' + } + } + }, + plotOptions: { + series: { + shadow: true + }, + candlestick: { + lineColor: '#404048' + }, + map: { + shadow: false + } + }, + + // Highstock specific + navigator: { + xAxis: { + gridLineColor: '#D0D0D8' + } + }, + rangeSelector: { + buttonTheme: { + fill: 'white', + stroke: '#C0C0C8', + 'stroke-width': 1, + states: { + select: { + fill: '#D0D0D8' + } + } + } + }, + scrollbar: { + trackBorderColor: '#C0C0C8' + }, + + // General + background2: '#E0E0E8' + +}; + +// Apply the theme +Highcharts.setOptions(Highcharts.theme); diff --git a/html/assets/lib/highcharts/themes/skies.js b/html/assets/lib/highcharts/themes/skies.js new file mode 100644 index 0000000..d58b1f2 --- /dev/null +++ b/html/assets/lib/highcharts/themes/skies.js @@ -0,0 +1,89 @@ +/** + * Skies theme for Highcharts JS + * @author Torstein Honsi + */ + +Highcharts.theme = { + colors: ["#514F78", "#42A07B", "#9B5E4A", "#72727F", "#1F949A", "#82914E", "#86777F", "#42A07B"], + chart: { + className: 'skies', + borderWidth: 0, + plotShadow: true, + plotBackgroundImage: 'http://www.highcharts.com/demo/gfx/skies.jpg', + plotBackgroundColor: { + linearGradient: [0, 0, 250, 500], + stops: [ + [0, 'rgba(255, 255, 255, 1)'], + [1, 'rgba(255, 255, 255, 0)'] + ] + }, + plotBorderWidth: 1 + }, + title: { + style: { + color: '#3E576F', + font: '16px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif' + } + }, + subtitle: { + style: { + color: '#6D869F', + font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif' + } + }, + xAxis: { + gridLineWidth: 0, + lineColor: '#C0D0E0', + tickColor: '#C0D0E0', + labels: { + style: { + color: '#666', + fontWeight: 'bold' + } + }, + title: { + style: { + color: '#666', + font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif' + } + } + }, + yAxis: { + alternateGridColor: 'rgba(255, 255, 255, .5)', + lineColor: '#C0D0E0', + tickColor: '#C0D0E0', + tickWidth: 1, + labels: { + style: { + color: '#666', + fontWeight: 'bold' + } + }, + title: { + style: { + color: '#666', + font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif' + } + } + }, + legend: { + itemStyle: { + font: '9pt Trebuchet MS, Verdana, sans-serif', + color: '#3E576F' + }, + itemHoverStyle: { + color: 'black' + }, + itemHiddenStyle: { + color: 'silver' + } + }, + labels: { + style: { + color: '#3E576F' + } + } +}; + +// Apply the theme +var highchartsOptions = Highcharts.setOptions(Highcharts.theme); diff --git a/html/assets/lib/highcharts/themes/utstats.js b/html/assets/lib/highcharts/themes/utstats.js new file mode 100644 index 0000000..5d9c69b --- /dev/null +++ b/html/assets/lib/highcharts/themes/utstats.js @@ -0,0 +1,231 @@ +/** + * Dark theme for Highcharts JS + * @author Torstein Honsi + */ + +// Load the fonts +Highcharts.createElement('link', { + href : 'http://fonts.googleapis.com/css?family=Unica+One', + rel : 'stylesheet', + type : 'text/css' +}, null, document.getElementsByTagName('head')[0]); + +Highcharts.theme = { + colors : ["#b40101", "#2069a1", "#f45b5b", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee", + "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"], + chart : { + backgroundColor : { + linearGradient : { + x1 : 0, + y1 : 0, + x2 : 1, + y2 : 1 + }, + stops : [ + [0, '#2a2a2b'], + [1, '#3e3e40'] + ] + }, + style : { + fontFamily : 'GothamLight' + }, + plotBorderColor : '#606063', + zoomType : 'xy', + resetZoomButton : { + position : { + align : 'left', // by default + verticalAlign : 'bottom', // by default + x : 0, + y : -30 + } + } + }, + title : { + style : { + color : '#E0E0E3', + textTransform : 'uppercase', + fontSize : '20px' + } + }, + subtitle : { + style : { + color : '#E0E0E3', + textTransform : 'uppercase' + } + }, + xAxis : { + gridLineColor : '#707073', + labels : { + style : { + color : '#E0E0E3' + } + }, + lineColor : '#707073', + minorGridLineColor : '#505053', + tickColor : '#707073', + title : { + style : { + color : '#A0A0A3' + + } + }, + tickPixelInterval : 50 + }, + yAxis : { + gridLineColor : '#707073', + labels : { + style : { + color : '#E0E0E3' + } + }, + lineColor : '#707073', + minorGridLineColor : '#505053', + tickColor : '#707073', + tickWidth : 1, + title : { + style : { + color : '#A0A0A3' + } + }, + tickPixelInterval : 50 + }, + tooltip : { + backgroundColor : 'rgba(0, 0, 0, 0.85)', + style : { + color : '#F0F0F0' + } + }, + plotOptions : { + series : { + dataLabels : { + color : '#B0B0B3' + }, + marker : { + lineColor : '#333', + enabled : false + } + }, + boxplot : { + fillColor : '#505053' + }, + candlestick : { + lineColor : 'white' + }, + errorbar : { + color : 'white' + }, + + }, + legend : { + itemStyle : { + color : '#E0E0E3' + }, + itemHoverStyle : { + color : '#FFF' + }, + itemHiddenStyle : { + color : '#606063' + } + }, + credits : { + style : { + color : '#666' + } + }, + labels : { + style : { + color : '#707073' + } + }, + + drilldown : { + activeAxisLabelStyle : { + color : '#F0F0F3' + }, + activeDataLabelStyle : { + color : '#F0F0F3' + } + }, + + navigation : { + buttonOptions : { + symbolStroke : '#DDDDDD', + theme : { + fill : '#505053' + } + } + }, + + // scroll charts + rangeSelector : { + buttonTheme : { + fill : '#505053', + stroke : '#000000', + style : { + color : '#CCC' + }, + states : { + hover : { + fill : '#707073', + stroke : '#000000', + style : { + color : 'white' + } + }, + select : { + fill : '#000003', + stroke : '#000000', + style : { + color : 'white' + } + } + } + }, + inputBoxBorderColor : '#505053', + inputStyle : { + backgroundColor : '#333', + color : 'silver' + }, + labelStyle : { + color : 'silver' + } + }, + + navigator : { + handles : { + backgroundColor : '#666', + borderColor : '#AAA' + }, + outlineColor : '#CCC', + maskFill : 'rgba(255,255,255,0.1)', + series : { + color : '#7798BF', + lineColor : '#A6C7ED' + }, + xAxis : { + gridLineColor : '#505053' + } + }, + + scrollbar : { + barBackgroundColor : '#808083', + barBorderColor : '#808083', + buttonArrowColor : '#CCC', + buttonBackgroundColor : '#606063', + buttonBorderColor : '#606063', + rifleColor : '#FFF', + trackBackgroundColor : '#404043', + trackBorderColor : '#404043' + }, + + // special colors for some of the + legendBackgroundColor : 'rgba(0, 0, 0, 0.5)', + background2 : '#505053', + dataLabelsColor : '#B0B0B3', + textColor : '#C0C0C0', + contrastTextColor : '#F0F0F3', + maskColor : 'rgba(255,255,255,0.3)' +}; + +// Apply the theme +Highcharts.setOptions(Highcharts.theme); \ No newline at end of file -- cgit From f0de7f57ca0d1fb1eae991253acd2c4093cc5adf Mon Sep 17 00:00:00 2001 From: Matthijs Kuiper Date: Thu, 11 Jan 2018 23:13:58 +0100 Subject: Fix highcharts font --- html/assets/lib/highcharts/themes/utstats.js | 431 +++++++++++++-------------- 1 file changed, 215 insertions(+), 216 deletions(-) (limited to 'html/assets/lib/highcharts/themes') diff --git a/html/assets/lib/highcharts/themes/utstats.js b/html/assets/lib/highcharts/themes/utstats.js index 5d9c69b..a997315 100644 --- a/html/assets/lib/highcharts/themes/utstats.js +++ b/html/assets/lib/highcharts/themes/utstats.js @@ -3,229 +3,228 @@ * @author Torstein Honsi */ -// Load the fonts -Highcharts.createElement('link', { - href : 'http://fonts.googleapis.com/css?family=Unica+One', - rel : 'stylesheet', - type : 'text/css' -}, null, document.getElementsByTagName('head')[0]); - Highcharts.theme = { - colors : ["#b40101", "#2069a1", "#f45b5b", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee", - "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"], - chart : { - backgroundColor : { - linearGradient : { - x1 : 0, - y1 : 0, - x2 : 1, - y2 : 1 - }, - stops : [ - [0, '#2a2a2b'], - [1, '#3e3e40'] - ] - }, - style : { - fontFamily : 'GothamLight' - }, - plotBorderColor : '#606063', - zoomType : 'xy', - resetZoomButton : { - position : { - align : 'left', // by default - verticalAlign : 'bottom', // by default - x : 0, - y : -30 - } - } - }, - title : { - style : { - color : '#E0E0E3', - textTransform : 'uppercase', - fontSize : '20px' - } - }, - subtitle : { - style : { - color : '#E0E0E3', - textTransform : 'uppercase' - } - }, - xAxis : { - gridLineColor : '#707073', - labels : { - style : { - color : '#E0E0E3' - } - }, - lineColor : '#707073', - minorGridLineColor : '#505053', - tickColor : '#707073', - title : { - style : { - color : '#A0A0A3' - - } - }, - tickPixelInterval : 50 - }, - yAxis : { - gridLineColor : '#707073', - labels : { - style : { - color : '#E0E0E3' - } - }, - lineColor : '#707073', - minorGridLineColor : '#505053', - tickColor : '#707073', - tickWidth : 1, - title : { - style : { - color : '#A0A0A3' - } - }, - tickPixelInterval : 50 - }, - tooltip : { - backgroundColor : 'rgba(0, 0, 0, 0.85)', - style : { - color : '#F0F0F0' - } - }, - plotOptions : { - series : { - dataLabels : { - color : '#B0B0B3' - }, - marker : { - lineColor : '#333', - enabled : false - } - }, - boxplot : { - fillColor : '#505053' - }, - candlestick : { - lineColor : 'white' - }, - errorbar : { - color : 'white' - }, - - }, - legend : { - itemStyle : { - color : '#E0E0E3' - }, - itemHoverStyle : { - color : '#FFF' - }, - itemHiddenStyle : { - color : '#606063' - } - }, - credits : { - style : { - color : '#666' - } - }, - labels : { - style : { - color : '#707073' - } - }, + colors: [ + "#b40101", + "#2069a1", + "#f45b5b", + "#7798BF", + "#aaeeee", + "#ff0066", + "#eeaaee", + "#55BF3B", + "#DF5353", + "#7798BF", + "#aaeeee" + ], + chart: { + backgroundColor: { + linearGradient: { + x1: 0, + y1: 0, + x2: 1, + y2: 1 + }, + stops: [[0, "#2a2a2b"], [1, "#3e3e40"]] + }, + style: { + fontFamily: "Montserrat, Helvetica, Verdana, Arial, sans-serif" + }, + plotBorderColor: "#606063", + zoomType: "xy", + resetZoomButton: { + position: { + align: "left", // by default + verticalAlign: "bottom", // by default + x: 0, + y: -30 + } + } + }, + title: { + style: { + color: "#E0E0E3", + textTransform: "uppercase", + fontSize: "20px" + } + }, + subtitle: { + style: { + color: "#E0E0E3", + textTransform: "uppercase" + } + }, + xAxis: { + gridLineColor: "#707073", + labels: { + style: { + color: "#E0E0E3" + } + }, + lineColor: "#707073", + minorGridLineColor: "#505053", + tickColor: "#707073", + title: { + style: { + color: "#A0A0A3" + } + }, + tickPixelInterval: 50 + }, + yAxis: { + gridLineColor: "#707073", + labels: { + style: { + color: "#E0E0E3" + } + }, + lineColor: "#707073", + minorGridLineColor: "#505053", + tickColor: "#707073", + tickWidth: 1, + title: { + style: { + color: "#A0A0A3" + } + }, + tickPixelInterval: 50 + }, + tooltip: { + backgroundColor: "rgba(0, 0, 0, 0.85)", + style: { + color: "#F0F0F0" + } + }, + plotOptions: { + series: { + dataLabels: { + color: "#B0B0B3" + }, + marker: { + lineColor: "#333", + enabled: false + } + }, + boxplot: { + fillColor: "#505053" + }, + candlestick: { + lineColor: "white" + }, + errorbar: { + color: "white" + } + }, + legend: { + itemStyle: { + color: "#E0E0E3" + }, + itemHoverStyle: { + color: "#FFF" + }, + itemHiddenStyle: { + color: "#606063" + } + }, + credits: { + style: { + color: "#666" + } + }, + labels: { + style: { + color: "#707073" + } + }, - drilldown : { - activeAxisLabelStyle : { - color : '#F0F0F3' - }, - activeDataLabelStyle : { - color : '#F0F0F3' - } - }, + drilldown: { + activeAxisLabelStyle: { + color: "#F0F0F3" + }, + activeDataLabelStyle: { + color: "#F0F0F3" + } + }, - navigation : { - buttonOptions : { - symbolStroke : '#DDDDDD', - theme : { - fill : '#505053' - } - } - }, + navigation: { + buttonOptions: { + symbolStroke: "#DDDDDD", + theme: { + fill: "#505053" + } + } + }, - // scroll charts - rangeSelector : { - buttonTheme : { - fill : '#505053', - stroke : '#000000', - style : { - color : '#CCC' - }, - states : { - hover : { - fill : '#707073', - stroke : '#000000', - style : { - color : 'white' - } - }, - select : { - fill : '#000003', - stroke : '#000000', - style : { - color : 'white' - } - } - } - }, - inputBoxBorderColor : '#505053', - inputStyle : { - backgroundColor : '#333', - color : 'silver' - }, - labelStyle : { - color : 'silver' - } - }, + // scroll charts + rangeSelector: { + buttonTheme: { + fill: "#505053", + stroke: "#000000", + style: { + color: "#CCC" + }, + states: { + hover: { + fill: "#707073", + stroke: "#000000", + style: { + color: "white" + } + }, + select: { + fill: "#000003", + stroke: "#000000", + style: { + color: "white" + } + } + } + }, + inputBoxBorderColor: "#505053", + inputStyle: { + backgroundColor: "#333", + color: "silver" + }, + labelStyle: { + color: "silver" + } + }, - navigator : { - handles : { - backgroundColor : '#666', - borderColor : '#AAA' - }, - outlineColor : '#CCC', - maskFill : 'rgba(255,255,255,0.1)', - series : { - color : '#7798BF', - lineColor : '#A6C7ED' - }, - xAxis : { - gridLineColor : '#505053' - } - }, + navigator: { + handles: { + backgroundColor: "#666", + borderColor: "#AAA" + }, + outlineColor: "#CCC", + maskFill: "rgba(255,255,255,0.1)", + series: { + color: "#7798BF", + lineColor: "#A6C7ED" + }, + xAxis: { + gridLineColor: "#505053" + } + }, - scrollbar : { - barBackgroundColor : '#808083', - barBorderColor : '#808083', - buttonArrowColor : '#CCC', - buttonBackgroundColor : '#606063', - buttonBorderColor : '#606063', - rifleColor : '#FFF', - trackBackgroundColor : '#404043', - trackBorderColor : '#404043' - }, + scrollbar: { + barBackgroundColor: "#808083", + barBorderColor: "#808083", + buttonArrowColor: "#CCC", + buttonBackgroundColor: "#606063", + buttonBorderColor: "#606063", + rifleColor: "#FFF", + trackBackgroundColor: "#404043", + trackBorderColor: "#404043" + }, - // special colors for some of the - legendBackgroundColor : 'rgba(0, 0, 0, 0.5)', - background2 : '#505053', - dataLabelsColor : '#B0B0B3', - textColor : '#C0C0C0', - contrastTextColor : '#F0F0F3', - maskColor : 'rgba(255,255,255,0.3)' + // special colors for some of the + legendBackgroundColor: "rgba(0, 0, 0, 0.5)", + background2: "#505053", + dataLabelsColor: "#B0B0B3", + textColor: "#C0C0C0", + contrastTextColor: "#F0F0F3", + maskColor: "rgba(255,255,255,0.3)" }; // Apply the theme -Highcharts.setOptions(Highcharts.theme); \ No newline at end of file +Highcharts.setOptions(Highcharts.theme); -- cgit