@@ -1,57 +1,67 @@ | |||
// Data | |||
// Composite Chart | |||
// ================================================================================ | |||
let report_count_list = [17, 40, 33, 44, 126, 156, | |||
324, 333, 478, 495, 373]; | |||
let bar_composite_data = { | |||
"labels": ["Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"], | |||
"labels": ["2007", "2008", "2009", "2010", "2011", "2012", | |||
"2013", "2014", "2015", "2016", "2017"], | |||
"datasets": [{ | |||
"color": "orange", | |||
"values": [50804, 10000, 20000, 61500, 72936.88, 24010, 40000, 60000, 25840, 50804.82, 16820], | |||
"formatted": ["₹ 0.00", "₹ 0.00", "₹ 0.00", "₹ 61,500.00", "₹ 82,936.88", "₹ 24,010.00", "₹ 0.00", "₹ 0.00", "₹ 25,840.00", "₹ 5,08,048.82", "₹ 1,16,820.00", "₹ 0.00"], | |||
} | |||
] | |||
} | |||
"title": "Reports", | |||
"color": "orange", | |||
"values": report_count_list, | |||
// "formatted": report_count_list.map(d => d + " reports") | |||
}] | |||
}; | |||
let line_composite_data = { | |||
"labels": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], | |||
"labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], | |||
"datasets": [{ | |||
"color": "green", | |||
"values": [25, 40, 30, 35, 48, 52, 17] | |||
} | |||
] | |||
"color": "green", | |||
"values": [36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 0, 0], | |||
// "formatted": ["₹ 0.00", "₹ 0.00", "₹ 0.00", "₹ 61,500.00", "₹ 82,936.88", "₹ 24,010.00", "₹ 0.00", "₹ 0.00", "₹ 25,840.00", "₹ 5,08,048.82", "₹ 1,16,820.00", "₹ 0.00"], | |||
}] | |||
}; | |||
let more_line_data = { | |||
0: {values: [25, -90, -30, 35, 48, 52, -17]}, | |||
1: {values: [25, -40, -30, 35, 48, 52, 30]}, | |||
2: {values: [5, 48, -52, 17, -25, 40, 30]}, | |||
3: { | |||
values: [25, 40, 30, 35, 48, 52, 17] | |||
}, | |||
4: { | |||
values: [35, 48, 40, 30, 52, 17, 72] | |||
}, | |||
5: { | |||
values: [5, 48, 52, 17, 72, 40, 30] | |||
}, | |||
6: { | |||
values: [72, 40, 30, 35, 48, 52, 17] | |||
}, | |||
7: { | |||
values: [35, 48, 40, 30, 52, 17, 25] | |||
}, | |||
8: { | |||
values: [5, 48, 52, 17, 25, 40, 30] | |||
}, | |||
9: { | |||
values: [25, 40, 30, 35, 48, 52, 17] | |||
}, | |||
10: { | |||
values: [35, 48, 40, 30, 52, 17, 25] | |||
}, | |||
11: { | |||
values: [5, 48, 52, 17, 25, 40, 30] | |||
} | |||
} | |||
0: {values: [4, 0, 3, 1, 1, 2, 1, 2, 1, 0, 1, 1]}, | |||
1: {values: [2, 3, 3, 2, 1, 4, 0, 1, 2, 7, 11, 4]}, | |||
2: {values: [7, 7, 2, 4, 0, 1, 5, 3, 1, 2, 0, 1]}, | |||
3: {values: [0, 2, 6, 2, 2, 1, 2, 3, 6, 3, 7, 10]}, | |||
4: {values: [9, 10, 8, 10, 6, 5, 8, 8, 24, 15, 10, 13]}, | |||
5: {values: [9, 13, 16, 9, 4, 5, 7, 10, 14, 22, 23, 24]}, | |||
6: {values: [20, 22, 28, 19, 28, 19, 14, 19, 51, 37, 29, 38]}, | |||
7: {values: [29, 20, 22, 16, 16, 19, 24, 26, 57, 31, 46, 27]}, | |||
8: {values: [36, 24, 38, 27, 15, 22, 24, 38, 32, 57, 139, 26]}, | |||
9: {values: [37, 36, 32, 33, 12, 34, 52, 45, 58, 57, 64, 35]}, | |||
10: {values: [36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 0, 0]} | |||
}; | |||
let bar_composite_chart = new Chart ({ | |||
parent: "#chart-composite-1", | |||
title: "Reposrts", | |||
data: bar_composite_data, | |||
type: 'bar', | |||
height: 180, | |||
is_navigable: 1 | |||
// region_fill: 1 | |||
}); | |||
let line_composite_chart = new Chart ({ | |||
parent: "#chart-composite-2", | |||
data: line_composite_data, | |||
type: 'line', | |||
height: 180 | |||
}); | |||
bar_composite_chart.parent.addEventListener('data-select', (e) => { | |||
line_composite_chart.update_values([more_line_data[e.index]]); | |||
}); | |||
// Demo Chart (bar, linepts, scatter(blobs), percentage) | |||
// ================================================================================ | |||
let type_data = { | |||
"labels": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], | |||
"datasets": [{ | |||
@@ -72,7 +82,7 @@ let type_data = { | |||
let update_data_all_labels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", | |||
"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", | |||
"Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed"]; | |||
"Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed"]; | |||
let update_data_all_values = [25, 40, 30, 35, 48, 52, 17, 15, 20, -3, -15, 58, | |||
12, -17, 35, 48, 40, 30, 52, 17, 25, 5, 48, 52, 17]; | |||
@@ -82,15 +92,14 @@ let update_data_all_indices = update_data_all_labels.map((d,i) => i); | |||
let get_update_data = (source_array, length=10) => { | |||
let indices = update_data_all_indices.slice(0, length); | |||
return indices.map((index) => source_array[index]); | |||
} | |||
}; | |||
let update_data = { | |||
"labels": get_update_data(update_data_all_labels), | |||
"datasets": [{ | |||
"color": "red", | |||
"values": get_update_data(update_data_all_values) | |||
} | |||
], | |||
"color": "red", | |||
"values": get_update_data(update_data_all_values) | |||
}], | |||
"specific_values": [ | |||
{ | |||
title: "Altitude", | |||
@@ -141,25 +150,7 @@ let heatmap_data = { | |||
// Charts | |||
// ================================================================================ | |||
let bar_composite_chart = new Chart ({ | |||
parent: "#chart-composite-1", | |||
data: bar_composite_data, | |||
type: 'bar', | |||
height: 180, | |||
is_navigable: 1 | |||
// region_fill: 1 | |||
}) | |||
let line_composite_chart = new Chart ({ | |||
parent: "#chart-composite-2", | |||
data: line_composite_data, | |||
type: 'line', | |||
height: 180 | |||
}) | |||
bar_composite_chart.parent.addEventListener('data-select', (e) => { | |||
line_composite_chart.update_values([more_line_data[e.index]]); | |||
}); | |||
let type_chart = new Chart({ | |||
parent: "#chart-types", | |||
@@ -8,13 +8,11 @@ | |||
<meta name="description" content="A simple, responsive, modern charts library for the web."> | |||
<link rel="stylesheet" type="text/css" href="assets/css/normalize.css" media="screen"> | |||
<!--<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>--> | |||
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> | |||
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" media="screen"> | |||
<link rel="stylesheet" type="text/css" href="assets/css/frappe_theme.css" media="screen"> | |||
<link rel="stylesheet" type="text/css" href="assets/css/index.css" media="screen"> | |||
<link rel="stylesheet" type="text/css" href="assets/css/default.css" media="screen"> | |||
<!--<link rel="stylesheet" type="text/css" href="assets/css/vs.css" media="screen">--> | |||
<link rel="stylesheet" type="text/css" href="../src/styles/charts.css" media="screen"> | |||
<script src="assets/js/highlight.pack.js"></script> | |||
<script>hljs.initHighlightingOnLoad();</script> | |||
@@ -7,7 +7,10 @@ | |||
"doc": "docs" | |||
}, | |||
"scripts": { | |||
"test": "mocha --compilers js:babel-core/register --colors -w ./test/*.spec.js" | |||
"test": "echo \"Error: no test specified\" && exit 1", | |||
"watch": "rollup -c --watch", | |||
"reload": "livereload 'dist/' -d", | |||
"dev": "npm-run-all --parallel watch reload" | |||
}, | |||
"repository": { | |||
"type": "git", | |||
@@ -28,10 +31,18 @@ | |||
"babel-plugin-external-helpers": "^6.22.0", | |||
"babel-preset-env": "^1.6.1", | |||
"babel-preset-latest": "^6.24.1", | |||
"cssnano": "^3.10.0", | |||
"livereload": "^0.6.3", | |||
"npm-run-all": "^4.1.1", | |||
"postcss-cssnext": "^3.0.2", | |||
"postcss-nested": "^2.1.2", | |||
"rollup": "^0.50.0", | |||
"rollup-plugin-babel": "^3.0.2", | |||
"rollup-plugin-eslint": "^4.0.0", | |||
"rollup-plugin-node-resolve": "^3.0.0", | |||
"rollup-plugin-uglify": "^2.0.1" | |||
"rollup-plugin-postcss": "^0.5.5", | |||
"rollup-plugin-replace": "^2.0.0", | |||
"rollup-plugin-uglify": "^2.0.1", | |||
"rollup-watch": "^4.3.1" | |||
} | |||
} |
@@ -1,7 +1,14 @@ | |||
// Rollup plugins | |||
import babel from 'rollup-plugin-babel'; | |||
import eslint from 'rollup-plugin-eslint'; | |||
import replace from 'rollup-plugin-replace'; | |||
import uglify from 'rollup-plugin-uglify'; | |||
import postcss from 'rollup-plugin-postcss'; | |||
// PostCSS plugins | |||
import nested from 'postcss-nested'; | |||
import cssnext from 'postcss-cssnext'; | |||
import cssnano from 'cssnano'; | |||
export default { | |||
input: 'src/scripts/charts.js', | |||
@@ -12,10 +19,26 @@ export default { | |||
name: 'Chart', | |||
sourcemap: 'true', | |||
plugins: [ | |||
eslint(), | |||
postcss({ | |||
extensions: [ '.less' ], | |||
plugins: [ | |||
nested(), | |||
cssnext({ warnForDuplicates: false }), | |||
cssnano() | |||
] | |||
}), | |||
eslint({ | |||
exclude: [ | |||
'src/styles/**', | |||
] | |||
}), | |||
babel({ | |||
exclude: 'node_modules/**', | |||
}), | |||
replace({ | |||
exclude: 'node_modules/**', | |||
ENV: JSON.stringify(process.env.NODE_ENV || 'development'), | |||
}), | |||
uglify() | |||
], | |||
}; |
@@ -1,8 +1,18 @@ | |||
import '../styles/charts.less'; | |||
import BarChart from './charts/BarChart'; | |||
import LineChart from './charts/LineChart'; | |||
import PercentageChart from './charts/PercentageChart'; | |||
import Heatmap from './charts/Heatmap'; | |||
if (ENV !== 'production') { | |||
// Enable LiveReload | |||
document.write( | |||
'<script src="http://' + (location.host || 'localhost').split(':')[0] + | |||
':35729/livereload.js?snipver=1"></' + 'script>' | |||
); | |||
} | |||
export default class Chart { | |||
constructor(args) { | |||
if(args.type === 'line') { | |||
@@ -14,6 +14,7 @@ export default class BaseChart { | |||
summary = [], | |||
is_navigable = 0, | |||
has_legend = 0, | |||
type = '' // eslint-disable-line no-unused-vars | |||
}) { | |||
@@ -33,6 +34,7 @@ export default class BaseChart { | |||
if(this.is_navigable) { | |||
this.current_index = 0; | |||
} | |||
this.has_legend = has_legend; | |||
this.chart_types = ['line', 'bar', 'percentage', 'heatmap']; | |||
@@ -1,456 +0,0 @@ | |||
/* graphs */ | |||
.chart-container { | |||
font-family: Verdana, Geneva, Tahoma, sans-serif; | |||
} | |||
.chart-container .graph-focus-margin { | |||
margin: 0px 5%; | |||
} | |||
.chart-container .graphics { | |||
margin-top: 10px; | |||
padding-top: 10px; | |||
padding-bottom: 10px; | |||
position: relative; | |||
} | |||
.chart-container .graph-stats-group { | |||
display: flex; | |||
justify-content: space-around; | |||
flex: 1; | |||
} | |||
.chart-container .graph-stats-container { | |||
display: flex; | |||
justify-content: space-around; | |||
padding-top: 10px; | |||
} | |||
.chart-container .graph-stats-container .stats { | |||
padding-bottom: 15px; | |||
} | |||
.chart-container .graph-stats-container .stats-title { | |||
color: #8D99A6; | |||
} | |||
.chart-container .graph-stats-container .stats-value { | |||
font-size: 20px; | |||
font-weight: 300; | |||
} | |||
.chart-container .graph-stats-container .stats-description { | |||
font-size: 12px; | |||
color: #8D99A6; | |||
} | |||
.chart-container .graph-stats-container .graph-data .stats-value { | |||
color: #98d85b; | |||
} | |||
.chart-container .axis, | |||
.chart-container .chart-label { | |||
font-size: 10px; | |||
fill: #555b51; | |||
} | |||
.chart-container .axis line, | |||
.chart-container .chart-label line { | |||
stroke: #dadada; | |||
} | |||
.chart-container .percentage-graph .progress { | |||
margin-bottom: 0px; | |||
} | |||
.chart-container .data-points circle { | |||
stroke: #fff; | |||
stroke-width: 2; | |||
} | |||
.chart-container .path-group path { | |||
fill: none; | |||
stroke-opacity: 1; | |||
stroke-width: 2px; | |||
} | |||
.chart-container line.dashed { | |||
stroke-dasharray: 5,3; | |||
} | |||
.chart-container .tick.x-axis-label { | |||
display: block; | |||
} | |||
.chart-container .tick .specific-value { | |||
text-anchor: start; | |||
} | |||
.chart-container .tick .y-value-text { | |||
text-anchor: end; | |||
} | |||
.chart-container .tick .x-value-text { | |||
text-anchor: middle; | |||
} | |||
.chart-container .progress { | |||
height: 20px; | |||
margin-bottom: 20px; | |||
overflow: hidden; | |||
background-color: #f5f5f5; | |||
border-radius: 4px; | |||
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); | |||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1) | |||
} | |||
.chart-container .progress-bar { | |||
float: left; | |||
width: 0; | |||
height: 100%; | |||
font-size: 12px; | |||
line-height: 20px; | |||
color: #fff; | |||
text-align: center; | |||
background-color: #36414c; | |||
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); | |||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); | |||
-webkit-transition: width .6s ease; | |||
-o-transition: width .6s ease; | |||
transition: width .6s ease; | |||
} | |||
.graph-svg-tip { | |||
position: absolute; | |||
z-index: 99999; | |||
padding: 10px; | |||
font-size: 12px; | |||
color: #959da5; | |||
text-align: center; | |||
background: rgba(0, 0, 0, 0.8); | |||
border-radius: 3px; | |||
} | |||
.graph-svg-tip.comparison { | |||
padding: 0; | |||
text-align: left; | |||
pointer-events: none; | |||
} | |||
.graph-svg-tip.comparison .title { | |||
display: block; | |||
padding: 10px; | |||
margin: 0; | |||
font-weight: 600; | |||
line-height: 1; | |||
pointer-events: none; | |||
} | |||
.graph-svg-tip.comparison ul { | |||
margin: 0; | |||
white-space: nowrap; | |||
list-style: none; | |||
} | |||
.graph-svg-tip.comparison li { | |||
display: inline-block; | |||
padding: 5px 10px; | |||
} | |||
.graph-svg-tip ul, | |||
.graph-svg-tip ol { | |||
padding-left: 0; | |||
display: flex; | |||
} | |||
.graph-svg-tip ul.data-point-list li { | |||
min-width: 90px; | |||
flex: 1; | |||
} | |||
.graph-svg-tip strong { | |||
color: #dfe2e5; | |||
} | |||
.graph-svg-tip .svg-pointer { | |||
position: absolute; | |||
bottom: -10px; | |||
left: 50%; | |||
width: 5px; | |||
height: 5px; | |||
margin: 0 0 0 -5px; | |||
content: " "; | |||
border: 5px solid transparent; | |||
border-top-color: rgba(0, 0, 0, 0.8); | |||
} | |||
/*Indicators*/ | |||
.indicator, | |||
.indicator-right { | |||
background: none; | |||
font-size: 12px; | |||
vertical-align: middle; | |||
font-weight: bold; | |||
color: #6c7680; | |||
} | |||
.indicator::before, | |||
.indicator-right::after { | |||
content: ''; | |||
display: inline-block; | |||
height: 8px; | |||
width: 8px; | |||
border-radius: 8px; | |||
} | |||
.indicator::before { | |||
margin: 0 4px 0 0px; | |||
} | |||
.indicator-right::after { | |||
margin: 0 0 0 4px; | |||
} | |||
.indicator.grey::before, | |||
.indicator-right.grey::after { | |||
background: #bdd3e6; | |||
} | |||
.indicator.light-grey::before, | |||
.indicator-right.light-grey::after { | |||
background: #F0F4F7; | |||
} | |||
.indicator.blue::before, | |||
.indicator-right.blue::after { | |||
background: #5e64ff; | |||
} | |||
.indicator.red::before, | |||
.indicator-right.red::after { | |||
background: #ff5858; | |||
} | |||
.indicator.green::before, | |||
.indicator-right.green::after { | |||
background: #28a745; | |||
} | |||
.indicator.light-green::before, | |||
.indicator-right.light-green::after { | |||
background: #98d85b; | |||
} | |||
.indicator.orange::before, | |||
.indicator-right.orange::after { | |||
background: #ffa00a; | |||
} | |||
.indicator.violet::before, | |||
.indicator-right.violet::after { | |||
background: #743ee2; | |||
} | |||
.indicator.darkgrey::before, | |||
.indicator-right.darkgrey::after { | |||
background: #b8c2cc; | |||
} | |||
.indicator.black::before, | |||
.indicator-right.black::after { | |||
background: #36414C; | |||
} | |||
.indicator.yellow::before, | |||
.indicator-right.yellow::after { | |||
background: #FEEF72; | |||
} | |||
.indicator.light-blue::before, | |||
.indicator-right.light-blue::after { | |||
background: #7CD6FD; | |||
} | |||
.indicator.light-blue::before, | |||
.indicator-right.light-blue::after { | |||
background: #7CD6FD; | |||
} | |||
.indicator.purple::before, | |||
.indicator-right.purple::after { | |||
background: #b554ff; | |||
} | |||
.indicator.magenta::before, | |||
.indicator-right.magenta::after { | |||
background: #ffa3ef; | |||
} | |||
/*Svg properties colors*/ | |||
.stroke.grey { | |||
stroke: #bdd3e6; | |||
} | |||
.stroke.light-grey { | |||
stroke: #F0F4F7; | |||
} | |||
.stroke.blue { | |||
stroke: #5e64ff; | |||
} | |||
.stroke.red { | |||
stroke: #ff5858; | |||
} | |||
.stroke.light-green { | |||
stroke: #98d85b; | |||
} | |||
.stroke.green { | |||
stroke: #28a745; | |||
} | |||
.stroke.orange { | |||
stroke: #ffa00a; | |||
} | |||
.stroke.violet { | |||
stroke: #743ee2; | |||
} | |||
.stroke.darkgrey { | |||
stroke: #b8c2cc; | |||
} | |||
.stroke.black { | |||
stroke: #36414C; | |||
} | |||
.stroke.yellow { | |||
stroke: #FEEF72; | |||
} | |||
.stroke.light-blue { | |||
stroke: #7CD6FD; | |||
} | |||
.stroke.purple { | |||
stroke: #b554ff; | |||
} | |||
.stroke.magenta { | |||
stroke: #ffa3ef; | |||
} | |||
.fill.grey { | |||
fill: #bdd3e6; | |||
} | |||
.fill.light-grey { | |||
fill: #F0F4F7; | |||
} | |||
.fill.blue { | |||
fill: #5e64ff; | |||
} | |||
.fill.red { | |||
fill: #ff5858; | |||
} | |||
.fill.light-green { | |||
fill: #98d85b; | |||
} | |||
.fill.green { | |||
fill: #28a745; | |||
} | |||
.fill.orange { | |||
fill: #ffa00a; | |||
} | |||
.fill.violet { | |||
fill: #743ee2; | |||
} | |||
.fill.darkgrey { | |||
fill: #b8c2cc; | |||
} | |||
.fill.black { | |||
fill: #36414C; | |||
} | |||
.fill.yellow { | |||
fill: #FEEF72; | |||
} | |||
.fill.light-blue { | |||
fill: #7CD6FD; | |||
} | |||
.fill.purple { | |||
fill: #b554ff; | |||
} | |||
.fill.magenta { | |||
fill: #ffa3ef; | |||
} | |||
.background.grey { | |||
background: #bdd3e6; | |||
} | |||
.background.light-grey { | |||
background: #F0F4F7; | |||
} | |||
.background.blue { | |||
background: #5e64ff; | |||
} | |||
.background.red { | |||
background: #ff5858; | |||
} | |||
.background.light-green { | |||
background: #98d85b; | |||
} | |||
.background.green { | |||
background: #28a745; | |||
} | |||
.background.orange { | |||
background: #ffa00a; | |||
} | |||
.background.violet { | |||
background: #743ee2; | |||
} | |||
.background.darkgrey { | |||
background: #b8c2cc; | |||
} | |||
.background.black { | |||
background: #36414C; | |||
} | |||
.background.yellow { | |||
background: #FEEF72; | |||
} | |||
.background.light-blue { | |||
background: #7CD6FD; | |||
} | |||
.background.purple{ | |||
background: #b554ff; | |||
} | |||
.background.magenta{ | |||
background: #ffa3ef; | |||
} | |||
.border-top.grey { | |||
border-top: 3px solid #bdd3e6; | |||
} | |||
.border-top.light-grey { | |||
border-top: 3px solid #F0F4F7; | |||
} | |||
.border-top.blue { | |||
border-top: 3px solid #5e64ff; | |||
} | |||
.border-top.red { | |||
border-top: 3px solid #ff5858; | |||
} | |||
.border-top.light-green { | |||
border-top: 3px solid #98d85b; | |||
} | |||
.border-top.green { | |||
border-top: 3px solid #28a745; | |||
} | |||
.border-top.orange { | |||
border-top: 3px solid #ffa00a; | |||
} | |||
.border-top.violet { | |||
border-top: 3px solid #743ee2; | |||
} | |||
.border-top.darkgrey { | |||
border-top: 3px solid #b8c2cc; | |||
} | |||
.border-top.black { | |||
border-top: 3px solid #36414C; | |||
} | |||
.border-top.yellow { | |||
border-top: 3px solid #FEEF72; | |||
} | |||
.border-top.light-blue { | |||
border-top: 3px solid #7CD6FD; | |||
} | |||
.border-top.purple { | |||
border-top: 3px solid #b554ff; | |||
} | |||
.border-top.magenta { | |||
border-top: 3px solid #ffa3ef; | |||
} | |||
.stop-color.grey { | |||
stop-color: #bdd3e6; | |||
} | |||
.stop-color.light-grey { | |||
stop-color: #F0F4F7; | |||
} | |||
.stop-color.blue { | |||
stop-color: #5e64ff; | |||
} | |||
.stop-color.red { | |||
stop-color: #ff5858; | |||
} | |||
.stop-color.light-green { | |||
stop-color: #98d85b; | |||
} | |||
.stop-color.green { | |||
stop-color: #28a745; | |||
} | |||
.stop-color.orange { | |||
stop-color: #ffa00a; | |||
} | |||
.stop-color.violet { | |||
stop-color: #743ee2; | |||
} | |||
.stop-color.darkgrey { | |||
stop-color: #b8c2cc; | |||
} | |||
.stop-color.black { | |||
stop-color: #36414C; | |||
} | |||
.stop-color.yellow { | |||
stop-color: #FEEF72; | |||
} | |||
.stop-color.light-blue { | |||
stop-color: #7CD6FD; | |||
} | |||
.stop-color.purple { | |||
stop-color: #b554ff; | |||
} | |||
.stop-color.magenta { | |||
stop-color: #ffa3ef; | |||
} | |||
@@ -0,0 +1,437 @@ | |||
.chart-container { | |||
font-family: "Roboto", "Geneva", Tahoma, sans-serif; | |||
.graph-focus-margin { | |||
margin: 0px 5%; | |||
} | |||
.graphics { | |||
margin-top: 10px; | |||
padding-top: 10px; | |||
padding-bottom: 10px; | |||
position: relative; | |||
} | |||
.graph-stats-group { | |||
display: flex; | |||
justify-content: space-around; | |||
flex: 1; | |||
} | |||
.graph-stats-container { | |||
display: flex; | |||
justify-content: space-around; | |||
padding-top: 10px; | |||
.stats { | |||
padding-bottom: 15px; | |||
} | |||
.stats-title { | |||
color: #8D99A6; | |||
} | |||
.stats-value { | |||
font-size: 20px; | |||
font-weight: 300; | |||
} | |||
.stats-description { | |||
font-size: 12px; | |||
color: #8D99A6; | |||
} | |||
.graph-data { | |||
.stats-value { | |||
color: #98d85b; | |||
} | |||
} | |||
} | |||
.axis, .chart-label { | |||
font-size: 10px; | |||
fill: #555b51; | |||
line { | |||
stroke: #dadada; | |||
} | |||
} | |||
.percentage-graph { | |||
.progress { | |||
margin-bottom: 0px; | |||
} | |||
} | |||
.data-points { | |||
circle { | |||
stroke: #fff; | |||
stroke-width: 2; | |||
} | |||
} | |||
.path-group { | |||
path { | |||
fill: none; | |||
stroke-opacity: 1; | |||
stroke-width: 2px; | |||
} | |||
} | |||
line.dashed { | |||
stroke-dasharray: 5,3; | |||
} | |||
.tick { | |||
&.x-axis-label { | |||
display: block; | |||
} | |||
.specific-value { | |||
text-anchor: start; | |||
} | |||
.y-value-text { | |||
text-anchor: end; | |||
} | |||
.x-value-text { | |||
text-anchor: middle; | |||
} | |||
} | |||
.progress { | |||
height: 20px; | |||
margin-bottom: 20px; | |||
overflow: hidden; | |||
background-color: #f5f5f5; | |||
border-radius: 4px; | |||
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); | |||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); | |||
} | |||
.progress-bar { | |||
float: left; | |||
width: 0; | |||
height: 100%; | |||
font-size: 12px; | |||
line-height: 20px; | |||
color: #fff; | |||
text-align: center; | |||
background-color: #36414c; | |||
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); | |||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); | |||
-webkit-transition: width .6s ease; | |||
-o-transition: width .6s ease; | |||
transition: width .6s ease; | |||
} | |||
} | |||
.graph-svg-tip { | |||
position: absolute; | |||
z-index: 99999; | |||
padding: 10px; | |||
font-size: 12px; | |||
color: #959da5; | |||
text-align: center; | |||
background: rgba(0, 0, 0, 0.8); | |||
border-radius: 3px; | |||
ul { | |||
padding-left: 0; | |||
display: flex; | |||
} | |||
ol { | |||
padding-left: 0; | |||
display: flex; | |||
} | |||
ul.data-point-list { | |||
li { | |||
min-width: 90px; | |||
flex: 1; | |||
} | |||
} | |||
strong { | |||
color: #dfe2e5; | |||
} | |||
.svg-pointer { | |||
position: absolute; | |||
bottom: -10px; | |||
left: 50%; | |||
width: 5px; | |||
height: 5px; | |||
margin: 0 0 0 -5px; | |||
content: " "; | |||
border: 5px solid transparent; | |||
border-top-color: rgba(0, 0, 0, 0.8); | |||
} | |||
&.comparison { | |||
padding: 0; | |||
text-align: left; | |||
pointer-events: none; | |||
.title { | |||
display: block; | |||
padding: 10px; | |||
margin: 0; | |||
font-weight: 600; | |||
line-height: 1; | |||
pointer-events: none; | |||
} | |||
ul { | |||
margin: 0; | |||
white-space: nowrap; | |||
list-style: none; | |||
} | |||
li { | |||
display: inline-block; | |||
padding: 5px 10px; | |||
} | |||
} | |||
} | |||
/*Indicators*/ | |||
.indicator, | |||
.indicator-right { | |||
background: none; | |||
font-size: 12px; | |||
vertical-align: middle; | |||
font-weight: bold; | |||
color: #6c7680; | |||
} | |||
.indicator::before, | |||
.indicator-right::after { | |||
content: ''; | |||
display: inline-block; | |||
height: 8px; | |||
width: 8px; | |||
border-radius: 8px; | |||
} | |||
.indicator::before { | |||
margin: 0 4px 0 0px; | |||
} | |||
.indicator-right::after { | |||
margin: 0 0 0 4px; | |||
} | |||
.background.grey, | |||
.indicator.grey::before, | |||
.indicator-right.grey::after { | |||
background: #bdd3e6; | |||
} | |||
.background.light-grey, | |||
.indicator.light-grey::before, | |||
.indicator-right.light-grey::after { | |||
background: #F0F4F7; | |||
} | |||
.background.blue, | |||
.indicator.blue::before, | |||
.indicator-right.blue::after { | |||
background: #5e64ff; | |||
} | |||
.background.red, | |||
.indicator.red::before, | |||
.indicator-right.red::after { | |||
background: #ff5858; | |||
} | |||
.background.green, | |||
.indicator.green::before, | |||
.indicator-right.green::after { | |||
background: #28a745; | |||
} | |||
.background.light-green, | |||
.indicator.light-green::before, | |||
.indicator-right.light-green::after { | |||
background: #98d85b; | |||
} | |||
.background.orange, | |||
.indicator.orange::before, | |||
.indicator-right.orange::after { | |||
background: #ffa00a; | |||
} | |||
.background.violet, | |||
.indicator.violet::before, | |||
.indicator-right.violet::after { | |||
background: #743ee2; | |||
} | |||
.background.dark-grey, | |||
.indicator.dark-grey::before, | |||
.indicator-right.dark-grey::after { | |||
background: #b8c2cc; | |||
} | |||
.background.black, | |||
.indicator.black::before, | |||
.indicator-right.black::after { | |||
background: #36414C; | |||
} | |||
.background.yellow, | |||
.indicator.yellow::before, | |||
.indicator-right.yellow::after { | |||
background: #FEEF72; | |||
} | |||
.background.light-blue, | |||
.indicator.light-blue::before, | |||
.indicator-right.light-blue::after { | |||
background: #7CD6FD; | |||
} | |||
.background.purple, | |||
.indicator.purple::before, | |||
.indicator-right.purple::after { | |||
background: #b554ff; | |||
} | |||
.background.magenta, | |||
.indicator.magenta::before, | |||
.indicator-right.magenta::after { | |||
background: #ffa3ef; | |||
} | |||
/*Svg properties colors*/ | |||
.stroke.grey { | |||
stroke: #bdd3e6; | |||
} | |||
.stroke.light-grey { | |||
stroke: #F0F4F7; | |||
} | |||
.stroke.blue { | |||
stroke: #5e64ff; | |||
} | |||
.stroke.red { | |||
stroke: #ff5858; | |||
} | |||
.stroke.light-green { | |||
stroke: #98d85b; | |||
} | |||
.stroke.green { | |||
stroke: #28a745; | |||
} | |||
.stroke.orange { | |||
stroke: #ffa00a; | |||
} | |||
.stroke.violet { | |||
stroke: #743ee2; | |||
} | |||
.stroke.dark-grey { | |||
stroke: #b8c2cc; | |||
} | |||
.stroke.black { | |||
stroke: #36414C; | |||
} | |||
.stroke.yellow { | |||
stroke: #FEEF72; | |||
} | |||
.stroke.light-blue { | |||
stroke: #7CD6FD; | |||
} | |||
.stroke.purple { | |||
stroke: #b554ff; | |||
} | |||
.stroke.magenta { | |||
stroke: #ffa3ef; | |||
} | |||
.fill.grey { | |||
fill: #bdd3e6; | |||
} | |||
.fill.light-grey { | |||
fill: #F0F4F7; | |||
} | |||
.fill.blue { | |||
fill: #5e64ff; | |||
} | |||
.fill.red { | |||
fill: #ff5858; | |||
} | |||
.fill.light-green { | |||
fill: #98d85b; | |||
} | |||
.fill.green { | |||
fill: #28a745; | |||
} | |||
.fill.orange { | |||
fill: #ffa00a; | |||
} | |||
.fill.violet { | |||
fill: #743ee2; | |||
} | |||
.fill.dark-grey { | |||
fill: #b8c2cc; | |||
} | |||
.fill.black { | |||
fill: #36414C; | |||
} | |||
.fill.yellow { | |||
fill: #FEEF72; | |||
} | |||
.fill.light-blue { | |||
fill: #7CD6FD; | |||
} | |||
.fill.purple { | |||
fill: #b554ff; | |||
} | |||
.fill.magenta { | |||
fill: #ffa3ef; | |||
} | |||
.border-top.grey { | |||
border-top: 3px solid #bdd3e6; | |||
} | |||
.border-top.light-grey { | |||
border-top: 3px solid #F0F4F7; | |||
} | |||
.border-top.blue { | |||
border-top: 3px solid #5e64ff; | |||
} | |||
.border-top.red { | |||
border-top: 3px solid #ff5858; | |||
} | |||
.border-top.light-green { | |||
border-top: 3px solid #98d85b; | |||
} | |||
.border-top.green { | |||
border-top: 3px solid #28a745; | |||
} | |||
.border-top.orange { | |||
border-top: 3px solid #ffa00a; | |||
} | |||
.border-top.violet { | |||
border-top: 3px solid #743ee2; | |||
} | |||
.border-top.dark-grey { | |||
border-top: 3px solid #b8c2cc; | |||
} | |||
.border-top.black { | |||
border-top: 3px solid #36414C; | |||
} | |||
.border-top.yellow { | |||
border-top: 3px solid #FEEF72; | |||
} | |||
.border-top.light-blue { | |||
border-top: 3px solid #7CD6FD; | |||
} | |||
.border-top.purple { | |||
border-top: 3px solid #b554ff; | |||
} | |||
.border-top.magenta { | |||
border-top: 3px solid #ffa3ef; | |||
} | |||
.stop-color.grey { | |||
stop-color: #bdd3e6; | |||
} | |||
.stop-color.light-grey { | |||
stop-color: #F0F4F7; | |||
} | |||
.stop-color.blue { | |||
stop-color: #5e64ff; | |||
} | |||
.stop-color.red { | |||
stop-color: #ff5858; | |||
} | |||
.stop-color.light-green { | |||
stop-color: #98d85b; | |||
} | |||
.stop-color.green { | |||
stop-color: #28a745; | |||
} | |||
.stop-color.orange { | |||
stop-color: #ffa00a; | |||
} | |||
.stop-color.violet { | |||
stop-color: #743ee2; | |||
} | |||
.stop-color.dark-grey { | |||
stop-color: #b8c2cc; | |||
} | |||
.stop-color.black { | |||
stop-color: #36414C; | |||
} | |||
.stop-color.yellow { | |||
stop-color: #FEEF72; | |||
} | |||
.stop-color.light-blue { | |||
stop-color: #7CD6FD; | |||
} | |||
.stop-color.purple { | |||
stop-color: #b554ff; | |||
} | |||
.stop-color.magenta { | |||
stop-color: #ffa3ef; | |||
} | |||