working chart with chartjs

master
Ondřej Hruška 8 years ago
parent 94cec1e47c
commit 3fcd234ad8
  1. 1
      html_src/_start.php
  2. 102
      html_src/chart.php
  3. 249
      html_src/css/app.css
  4. 2
      html_src/css/app.css.map
  5. 19
      html_src/gulpfile.js
  6. 128
      html_src/js-src/chartist.axis-title.js
  7. 3815
      html_src/js-src/chartist.js
  8. 272
      html_src/js-src/chartist.zoom.js
  9. 4218
      html_src/js/all.js
  10. 2
      html_src/js/all.js.map
  11. 0
      html_src/package.json-
  12. 1
      html_src/sass/app.scss
  13. 4
      html_src/sass/layout/_box.scss
  14. 60
      html_src/sass/lib/chartist/_chartist-settings.scss
  15. 237
      html_src/sass/lib/chartist/_chartist.scss
  16. 3
      web-gwatch.sh

@ -3,6 +3,7 @@
$menu = [
'home' => [ '/', 'Home' ],
'wifi' => [ '/wifi', 'WiFi config' ],
'waveform' => [ '/waveform', 'Waveform' ],
'fft' => [ '/fft', 'FFT' ],
'spectrogram' => [ '/spectrogram', 'Spectrogram' ],
'transient' => [ '/transient', 'Power-on transient' ],

File diff suppressed because one or more lines are too long

@ -303,6 +303,170 @@ td,
th {
padding: 0; }
.ct-axis-title {
fill: rgba(255, 255, 255, 0.8); }
.ct-label {
fill: rgba(255, 255, 255, 0.8);
color: rgba(255, 255, 255, 0.8);
font-size: 0.75rem;
line-height: 1; }
.ct-label.ct-horizontal.ct-start {
align-items: flex-end;
justify-content: flex-start;
text-align: left;
text-anchor: start; }
.ct-label.ct-horizontal.ct-end {
align-items: flex-start;
justify-content: flex-start;
text-align: left;
text-anchor: start;
transform: translate(-4px, 0%) rotate(45deg); }
.ct-label.ct-vertical.ct-start {
align-items: flex-end;
justify-content: flex-end;
text-align: right;
text-anchor: end;
transform: translate(0, 20%); }
.ct-label.ct-vertical.ct-end {
align-items: flex-end;
justify-content: flex-start;
text-align: left;
text-anchor: start; }
.ct-chart-line .ct-label,
.ct-chart-bar .ct-label {
display: flex; }
.ct-chart-bar .ct-label.ct-horizontal.ct-start {
align-items: flex-end;
justify-content: center;
text-align: center;
text-anchor: start; }
.ct-chart-bar .ct-label.ct-horizontal.ct-end {
align-items: flex-start;
justify-content: center;
text-align: center;
text-anchor: start; }
.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-start {
align-items: flex-end;
justify-content: flex-start;
text-align: left;
text-anchor: start; }
.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-end {
align-items: flex-start;
justify-content: flex-start;
text-align: left;
text-anchor: start; }
.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-start {
align-items: center;
justify-content: flex-end;
text-align: right;
text-anchor: end; }
.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-end {
align-items: center;
justify-content: flex-start;
text-align: left;
text-anchor: end; }
.ct-grid {
stroke: rgba(255, 255, 255, 0.3);
stroke-width: 1px;
stroke-dasharray: 2px; }
.ct-point {
stroke-width: 4px;
stroke-linecap: round; }
.ct-line {
fill: none;
stroke-width: 2px; }
.ct-area {
stroke: none;
fill-opacity: 0.1; }
.ct-bar {
fill: none;
stroke-width: 10px; }
.ct-series-a .ct-point, .ct-series-a .ct-line, .ct-series-a .ct-bar {
stroke: #f05b4f; }
.ct-series-a .ct-slice-pie, .ct-series-a .ct-area {
fill: #f05b4f; }
.ct-series-b .ct-point, .ct-series-b .ct-line, .ct-series-b .ct-bar {
stroke: #6188e2; }
.ct-series-b .ct-slice-pie, .ct-series-b .ct-area {
fill: #6188e2; }
.ct-series-c .ct-point, .ct-series-c .ct-line, .ct-series-c .ct-bar {
stroke: #59922b; }
.ct-series-c .ct-slice-pie, .ct-series-c .ct-area {
fill: #59922b; }
.ct-series-d .ct-point, .ct-series-d .ct-line, .ct-series-d .ct-bar {
stroke: #eacf7d; }
.ct-series-d .ct-slice-pie, .ct-series-d .ct-area {
fill: #eacf7d; }
.ct-series-e .ct-point, .ct-series-e .ct-line, .ct-series-e .ct-bar {
stroke: #a748ca; }
.ct-series-e .ct-slice-pie, .ct-series-e .ct-area {
fill: #a748ca; }
.ct-wide {
display: block;
position: relative;
width: 100%; }
.ct-wide:before {
display: block;
float: left;
content: "";
width: 0;
height: 0;
padding-bottom: 56.25%; }
.ct-wide:after {
content: "";
display: table;
clear: both; }
.ct-wide > svg {
display: block;
position: absolute;
top: 0;
left: 0; }
.ct-narrow {
display: block;
position: relative;
width: 100%; }
.ct-narrow:before {
display: block;
float: left;
content: "";
width: 0;
height: 0;
padding-bottom: 66.6666666667%; }
.ct-narrow:after {
content: "";
display: table;
clear: both; }
.ct-narrow > svg {
display: block;
position: absolute;
top: 0;
left: 0; }
html {
box-sizing: border-box; }
@ -328,9 +492,6 @@ html, body {
/* Main outer container */
#outer {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
position: absolute;
width: 100%;
@ -340,10 +501,6 @@ html, body {
top: 0;
bottom: 0;
overflow: hidden;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row; }
@media screen and (max-width: 544px) {
@ -352,9 +509,6 @@ html, body {
overflow-y: scroll; } }
#menu {
-webkit-box-flex: 0;
-webkit-flex: 0 0 15rem;
-ms-flex: 0 0 15rem;
flex: 0 0 15rem;
background: #2bab5f; }
#menu > * {
@ -387,18 +541,15 @@ html, body {
top: 50%;
font-size: 120%;
font-weight: bold;
-webkit-transform: translate(0, -50%) rotate(90deg);
transform: translate(0, -50%) rotate(90deg); } }
#menu.expanded #brand {
background: #218248; }
@media screen and (max-width: 544px) {
#menu.expanded #brand:after {
-webkit-transform: translate(0, -50%) rotate(-90deg);
transform: translate(0, -50%) rotate(-90deg); } }
#menu a {
font-size: 130%;
color: white;
-webkit-transition: background-color 0.2s;
transition: background-color 0.2s;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.4); }
#menu a:hover, #menu a.selected {
@ -419,8 +570,6 @@ html, body {
display: block; }
@media screen and (min-width: 545px) and (max-width: 1000px) {
#menu {
-webkit-flex-basis: 10rem;
-ms-flex-preferred-size: 10rem;
flex-basis: 10rem; }
#menu #brand {
font-size: 95%;
@ -431,9 +580,6 @@ html, body {
padding: 0.3819820591rem 0.6180469716rem; } }
#content {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
overflow-y: auto;
padding: 1rem; }
@ -481,6 +627,8 @@ html, body {
.Box.wide {
width: initial;
max-width: initial; }
.Box.medium {
max-width: 1200px; }
.Modal {
position: fixed;
@ -490,19 +638,9 @@ html, body {
top: 0;
right: 0;
bottom: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: opacity .5s;
transition: opacity .5s;
background: rgba(0, 0, 0, 0.65);
opacity: 0; }
@ -517,9 +655,6 @@ html, body {
overflow: hidden;
max-width: 100%;
max-height: 100%;
-webkit-box-flex: 0;
-webkit-flex: 0 1 30rem;
-ms-flex: 0 1 30rem;
flex: 0 1 30rem;
background: #1c1c1e;
border-left: 6px solid #217b3a;
@ -774,7 +909,6 @@ label.select-wrap {
font-weight: bold;
color: #28bc65;
top: 50%;
-webkit-transform: translate(0, -50%) rotate(90deg);
transform: translate(0, -50%) rotate(90deg);
right: 2px;
position: absolute;
@ -794,14 +928,7 @@ form .Row {
vertical-align: middle;
margin: 14px auto;
text-align: left;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row; }
form .Row:first-child {
margin-top: 0; }
@ -815,9 +942,6 @@ form .Row {
form .Row.buttons input, form .Row.buttons .button {
margin-right: 0.6180469716rem; }
form .Row.centered {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center; }
form .Row.message {
font-size: 1em;
@ -834,9 +958,6 @@ form .Row {
display: inline-block;
vertical-align: top;
min-height: 10rem;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
resize: vertical; }
form .Row label {
@ -847,8 +968,6 @@ form .Row {
text-align: right;
text-shadow: 1px 1px 3px black;
padding: 8px;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
-webkit-user-select: none;
-khtml-user-select: none;
@ -860,8 +979,6 @@ form .Row {
width: 130px;
padding: 8px;
text-align: right;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start; }
form .Row .checkbox-wrap input[type=checkbox] {
margin: auto;
@ -874,21 +991,10 @@ form .Row {
cursor: pointer; }
@media screen and (max-width: 544px) {
form .Row {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; }
form .Row.buttons, form .Row.centered {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row; }
form .Row.buttons {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center; }
form .Row.buttons :last-child {
margin-right: 0; }
@ -897,9 +1003,6 @@ form .Row {
text-align: left;
width: auto; }
form .Row .checkbox-wrap {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
text-align: left;
padding-bottom: 0;
@ -957,7 +1060,6 @@ label.select-wrap {
font-weight: bold;
color: #28bc65;
top: 50%;
-webkit-transform: translate(0, -50%) rotate(90deg);
transform: translate(0, -50%) rotate(90deg);
right: 2px;
position: absolute;
@ -993,13 +1095,7 @@ label.select-wrap {
padding-bottom: 0.3819820591rem; }
#psk-modal form {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin: 0.3819820591rem; }
#psk-modal form > * {
@ -1033,11 +1129,7 @@ label.select-wrap {
border-radius: 3px;
color: #222;
background: #afafaf;
-webkit-transition: background-color 0.5s;
transition: background-color 0.5s;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; }
.AP .inner:active {
left: 0;
@ -1050,9 +1142,6 @@ label.select-wrap {
word-wrap: normal; }
.AP .inner .rssi {
min-width: 2rem;
-webkit-box-flex: 0;
-webkit-flex: 0 0 15%;
-ms-flex: 0 0 15%;
flex: 0 0 15%;
text-align: right; }
.AP .inner .rssi:after {
@ -1060,18 +1149,12 @@ label.select-wrap {
content: '%';
font-size: 0.8888888889em; }
.AP .inner .essid {
-webkit-box-flex: 1;
-webkit-flex: 1 1 70%;
-ms-flex: 1 1 70%;
flex: 1 1 70%;
min-width: 0;
text-overflow: ellipsis;
overflow: hidden;
font-weight: bold; }
.AP .inner .auth {
-webkit-box-flex: 0;
-webkit-flex: 0 0 15%;
-ms-flex: 0 0 15%;
flex: 0 0 15%; }
.page-home #rssi-perc:after {

File diff suppressed because one or more lines are too long

@ -1,14 +1,12 @@
//process.env.DISABLE_NOTIFIER = true;
// process.env.NODE_ENV = 'production';
var elixir = require('laravel-elixir');
var gutils = require('gulp-util');
var autoprefixer = require('autoprefixer');
elixir.config.css.autoprefix.options.browsers = ["> 2.5% in CZ"];
elixir.config.css.autoprefix.options.flexbox = "no-2009";
// gutils.env.production = true;
// var info = autoprefixer(elixir.config.css.autoprefix).info();
// console.log(info);
//elixir.config.css.sass.pluginOptions.outputStyle = 'compressed';//gutils.env.production ? 'compressed' : 'expanded';
elixir.config.css.autoprefix.options.browsers = ["last 2 versions", "> 5%"];
elixir.config.assetsPath='.';
elixir.config.publicPath='.';
@ -20,6 +18,9 @@ elixir(function (mix) {
// JS libs
mix.scripts([
'js-src/app.js',
'js-src/chibi.js'
'js-src/chibi.js',
'js-src/chartist.js',
'js-src/chartist.axis-title.js',
'js-src/chartist.zoom.js',
], 'js/all.js');
});

@ -0,0 +1,128 @@
(function (root, factory) {
// if (typeof define === 'function' && define.amd) {
// // AMD. Register as an anonymous module.
// define([], function () {
// return (root.returnExportsGlobal = factory());
// });
// } else if (typeof exports === 'object') {
// // Node. Does not work with strict CommonJS, but
// // only CommonJS-like enviroments that support module.exports,
// // like Node.
// module.exports = factory();
// } else {
root['Chartist.plugins.ctAxisTitle'] = factory();
// }
}(this, function () {
/**
* Chartist.js plugin to display a title for 1 or 2 axises.
*
*/
/* global Chartist */
(function (window, document, Chartist) {
'use strict';
var axisDefaults = {
axisTitle: '',
axisClass: 'ct-axis-title',
offset: {
x: 0,
y: 0
},
textAnchor: 'middle',
flipText: false
};
var defaultOptions = {
axisX: axisDefaults,
axisY: axisDefaults
};
Chartist.plugins = Chartist.plugins || {};
Chartist.plugins.ctAxisTitle = function (options) {
options = Chartist.extend({}, defaultOptions, options);
console.log(options);
return function ctAxisTitle(chart) {
chart.on('created', function (data) {
//
// if (!options.axisX.axisTitle && !options.axisY.axisTitle) {
// throw new Error('ctAxisTitle plugin - You must provide at least one axis title');
// } else if (!data.axisX && !data.axisY) {
// throw new Error('ctAxisTitle plugin can only be used on charts that have at least one axis');
// }
var xPos;
var yPos;
var title;
//position axis X title
if (options.axisX.axisTitle && data.axisX) {
xPos = (data.axisX.axisLength / 2) + data.options.axisY.offset + data.options.chartPadding.left;
yPos = data.options.chartPadding.top;
if (data.options.axisY.position === 'end') {
xPos -= data.options.axisY.offset;
}
if (data.options.axisX.position === 'end') {
yPos += data.axisY.axisLength;
}
title = new Chartist.Svg("text");
title.addClass(options.axisX.axisClass);
title.text(options.axisX.axisTitle);
title.attr({
x: xPos + options.axisX.offset.x,
y: yPos + options.axisX.offset.y,
"text-anchor": options.axisX.textAnchor
});
data.svg.append(title, true);
}
//position axis Y title
if (options.axisY.axisTitle && data.axisY) {
xPos = 0;
yPos = (data.axisY.axisLength / 2) + data.options.chartPadding.top;
if (data.options.axisX.position === 'start') {
yPos += data.options.axisX.offset;
}
if (data.options.axisY.position === 'end') {
xPos = data.axisX.axisLength;
}
var transform = 'rotate(' + (options.axisY.flipText ? -90 : 90) + ', ' + xPos + ', ' + yPos + ')';
title = new Chartist.Svg("text");
title.addClass(options.axisY.axisClass);
title.text(options.axisY.axisTitle);
title.attr({
x: xPos + options.axisY.offset.x,
y: yPos + options.axisY.offset.y,
transform: transform,
"text-anchor": options.axisY.textAnchor
});
data.svg.append(title, true);
}
});
};
};
}(window, document, Chartist));
return Chartist.plugins.ctAxisTitle;
}));

File diff suppressed because it is too large Load Diff

@ -0,0 +1,272 @@
(function (root, factory) {
// if (typeof define === 'function' && define.amd) {
// // AMD. Register as an anonymous module.
// define([], function () {
// return (root.returnExportsGlobal = factory());
// });
// } else if (typeof exports === 'object') {
// // Node. Does not work with strict CommonJS, but
// // only CommonJS-like enviroments that support module.exports,
// // like Node.
// module.exports = factory();
// } else {
root['Chartist.plugins.zoom'] = factory();
// }
}(this, function () {
/**
* Chartist.js zoom plugin.
*
*/
(function (window, document, Chartist) {
'use strict';
var defaultOptions = {
// onZoom
// resetOnRightMouseBtn
};
Chartist.plugins = Chartist.plugins || {};
Chartist.plugins.zoom = function (options) {
options = Chartist.extend({}, defaultOptions, options);
return function zoom(chart) {
if (!(chart instanceof Chartist.Line)) {
return;
}
var rect, svg, axisX, axisY, chartRect;
var downPosition;
var onZoom = options.onZoom;
var ongoingTouches = [];
chart.on('draw', function (data) {
var type = data.type;
if (type === 'line' || type === 'bar' || type === 'area' || type === 'point') {
data.element.attr({
'clip-path': 'url(#zoom-mask)'
});
}
});
chart.on('created', function (data) {
axisX = data.axisX;
axisY = data.axisY;
chartRect = data.chartRect;
svg = data.svg._node;
rect = data.svg.elem('rect', {
x: 10,
y: 10,
width: 100,
height: 100,
}, 'ct-zoom-rect');
hide(rect);
var defs = data.svg.querySelector('defs') || data.svg.elem('defs');
var width = chartRect.width();
var height = chartRect.height();
defs
.elem('clipPath', {
id: 'zoom-mask'
})
.elem('rect', {
x: chartRect.x1,
y: chartRect.y2,
width: width,
height: height,
fill: 'white'
});
svg.addEventListener('mousedown', onMouseDown);
svg.addEventListener('mouseup', onMouseUp);
svg.addEventListener('mousemove', onMouseMove);
svg.addEventListener('touchstart', onTouchStart);
svg.addEventListener('touchmove', onTouchMove);
svg.addEventListener('touchend', onTouchEnd);
svg.addEventListener('touchcancel', onTouchCancel);
});
function copyTouch(touch) {
var p = position(touch, svg);
p.id = touch.identifier;
return p;
}
function ongoingTouchIndexById(idToFind) {
for (var i = 0; i < ongoingTouches.length; i++) {
var id = ongoingTouches[i].id;
if (id === idToFind) {
return i;
}
}
return -1;
}
function onTouchStart(event) {
var touches = event.changedTouches;
for (var i = 0; i < touches.length; i++) {
ongoingTouches.push(copyTouch(touches[i]));
}
if (ongoingTouches.length > 1) {
rect.attr(getRect(ongoingTouches[0], ongoingTouches[1]));
show(rect);
}
}
function onTouchMove(event) {
var touches = event.changedTouches;
for (var i = 0; i < touches.length; i++) {
var idx = ongoingTouchIndexById(touches[i].identifier);
ongoingTouches.splice(idx, 1, copyTouch(touches[i]));
}
if (ongoingTouches.length > 1) {
rect.attr(getRect(ongoingTouches[0], ongoingTouches[1]));
show(rect);
event.preventDefault();
}
}
function onTouchCancel(event) {
removeTouches(event.changedTouches);
}
function removeTouches(touches) {
for (var i = 0; i < touches.length; i++) {
var idx = ongoingTouchIndexById(touches[i].identifier);
if (idx >= 0) {
ongoingTouches.splice(idx, 1);
}
}
}
function onTouchEnd(event) {
if (ongoingTouches.length > 1) {
zoomIn(getRect(ongoingTouches[0], ongoingTouches[1]));
}
removeTouches(event.changedTouches);
hide(rect);
}
function onMouseDown(event) {
if (event.button === 0) {
downPosition = position(event, svg);
rect.attr(getRect(downPosition, downPosition));
show(rect);
event.preventDefault();
}
}
var reset = function () {
chart.options.axisX.highLow = null;
chart.options.axisY.highLow = null;
chart.update(chart.data, chart.options);
};
function onMouseUp(event) {
if (event.button === 0) {
var box = getRect(downPosition, position(event, svg));
zoomIn(box);
downPosition = null;
hide(rect);
event.preventDefault();
}
else if (options.resetOnRightMouseBtn && event.button === 2) {
reset();
event.preventDefault();
}
}
function zoomIn(rect) {
if (rect.width > 5 && rect.height > 5) {
var x1 = rect.x - chartRect.x1;
var x2 = x1 + rect.width;
var y2 = chartRect.y1 - rect.y;
var y1 = y2 - rect.height;
chart.options.axisX.highLow = { low: project(x1, axisX), high: project(x2, axisX) };
chart.options.axisY.highLow = { low: project(y1, axisY), high: project(y2, axisY) };
chart.update(chart.data, chart.options);
onZoom && onZoom(chart, reset);
}
}
function onMouseMove(event) {
if (downPosition) {
var point = position(event, svg);
rect.attr(getRect(downPosition, point));
event.preventDefault();
}
}
};
};
function hide(rect) {
rect.attr({ style: 'display:none' });
}
function show(rect) {
rect.attr({ style: 'display:block' });
}
function getRect(firstPoint, secondPoint) {
var x = firstPoint.x;
var y = firstPoint.y;
var width = secondPoint.x - x;
var height = secondPoint.y - y;
if (width < 0) {
width = -width;
x = secondPoint.x;
}
if (height < 0) {
height = -height;
y = secondPoint.y;
}
return {
x: x,
y: y,
width: width,
height: height
};
}
function position(event, svg) {
return transform(event.clientX, event.clientY, svg);
}
function transform(x, y, svgElement) {
var svg = svgElement.tagName === 'svg' ? svgElement : svgElement.ownerSVGElement;
var matrix = svg.getScreenCTM();
var point = svg.createSVGPoint();
point.x = x;
point.y = y;
point = point.matrixTransform(matrix.inverse());
return point || { x: 0, y: 0 };
}
function project(value, axis) {
var max = axis.bounds.max;
var min = axis.bounds.min;
if (axis.scale && axis.scale.type === 'log') {
var base = axis.scale.base;
return Math.pow(base,
value * baseLog(max / min, base) / axis.axisLength) * min;
}
return (value * axis.bounds.range / axis.axisLength) + min;
}
function baseLog(val, base) {
return Math.log(val) / Math.log(base);
}
} (window, document, Chartist));
return Chartist.plugins.zoom;
}));

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

@ -1,4 +1,5 @@
@import "normalize";
@import "lib/chartist/chartist";
@import "lib/bourbon/bourbon";
@import "grid-settings";

@ -24,4 +24,8 @@
width: initial;
max-width: initial;
}
&.medium {
max-width: 1200px;
}
}

@ -0,0 +1,60 @@
// Scales for responsive SVG containers
$ct-scales_orig: ((1), (15/16), (8/9), (5/6), (4/5), (3/4), (2/3), (5/8), (1/1.618), (3/5), (9/16), (8/15), (1/2), (2/5), (3/8), (1/3), (1/4)) !default;
$ct-scales-names_orig: (ct-square, ct-minor-second, ct-major-second, ct-minor-third, ct-major-third, ct-perfect-fourth, ct-perfect-fifth, ct-minor-sixth, ct-golden-section, ct-major-sixth, ct-minor-seventh, ct-major-seventh, ct-octave, ct-major-tenth, ct-major-eleventh, ct-major-twelfth, ct-double-octave) !default;
$ct-scales: ((9/16), (2/3));
$ct-scales-names: (ct-wide, ct-narrow);
// Container ratio
$ct-container-ratio: (1/1.618) !default;
// Text styles for labels
$ct-text-color: rgba(white, 0.8) !default;
$ct-text-size: 0.75rem !default;
$ct-text-align: flex-start !default;
$ct-text-justify: flex-start !default;
$ct-text-line-height: 1;
$ct-axis-label-color: rgba(white, 0.8) !default;
// Grid styles
$ct-grid-color: rgba(white, 0.3) !default;
$ct-grid-dasharray: 2px !default;
$ct-grid-width: 1px !default;
// Line chart properties
$ct-line-width: 2px !default;
$ct-line-dasharray: false !default;
$ct-point-size: 4px !default;
// Line chart point, can be either round or square
$ct-point-shape: round !default;
// Area fill transparency between 0 and 1
$ct-area-opacity: 0.1 !default;
// Bar chart bar width
$ct-bar-width: 10px !default;
// Donut width (If donut width is to big it can cause issues where the shape gets distorted)
$ct-donut-width: 60px !default;
// If set to true it will include the default classes and generate CSS output. If you're planning to use the mixins you
// should set this property to false
$ct-include-classes: true !default;
// If this is set to true the CSS will contain colored series. You can extend or change the color with the
// properties below
$ct-include-colored-series: $ct-include-classes !default;
// If set to true this will include all responsive container variations using the scales defined at the top of the script
$ct-include-alternative-responsive-containers: $ct-include-classes !default;
// Series names and colors. This can be extended or customized as desired. Just add more series and colors.
$ct-series-names: (a, b, c, d, e) !default;
$ct-series-colors: (
#f05b4f,
#6188e2,
#59922b,
#eacf7d,
#a748ca
) !default;

@ -0,0 +1,237 @@
@import "chartist-settings";
@mixin ct-responsive-svg-container($width: 100%, $ratio: $ct-container-ratio) {
display: block;
position: relative;
width: $width;
&:before {
display: block;
float: left;
content: "";
width: 0;
height: 0;
padding-bottom: $ratio * 100%;
}
&:after {
content: "";
display: table;
clear: both;
}
> svg {
display: block;
position: absolute;
top: 0;
left: 0;
}
}
@mixin ct-align-justify($ct-text-align: $ct-text-align, $ct-text-justify: $ct-text-justify) {
align-items: $ct-text-align;
justify-content: $ct-text-justify;
// Fallback to text-align for non-flex browsers
@if ($ct-text-justify == 'flex-start') {
text-align: left;
} @else if ($ct-text-justify == 'flex-end') {
text-align: right;
} @else {
text-align: center;
}
}
@mixin ct-chart-label($ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-text-line-height: $ct-text-line-height) {
fill: $ct-text-color;
color: $ct-text-color;
font-size: $ct-text-size;
line-height: $ct-text-line-height;
}
@mixin ct-chart-grid($ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray) {
stroke: $ct-grid-color;
stroke-width: $ct-grid-width;
@if ($ct-grid-dasharray) {
stroke-dasharray: $ct-grid-dasharray;
}
}
@mixin ct-chart-point($ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape) {
stroke-width: $ct-point-size;
stroke-linecap: $ct-point-shape;
}
@mixin ct-chart-line($ct-line-width: $ct-line-width, $ct-line-dasharray: $ct-line-dasharray) {
fill: none;
stroke-width: $ct-line-width;
@if ($ct-line-dasharray) {
stroke-dasharray: $ct-line-dasharray;
}
}
@mixin ct-chart-area($ct-area-opacity: $ct-area-opacity) {
stroke: none;
fill-opacity: $ct-area-opacity;
}
@mixin ct-chart-bar($ct-bar-width: $ct-bar-width) {
fill: none;
stroke-width: $ct-bar-width;
}
//@mixin ct-chart-donut($ct-donut-width: $ct-donut-width) {
// fill: none;
// stroke-width: $ct-donut-width;
//}
@mixin ct-chart-series-color($color) {
.ct-point, .ct-line, .ct-bar /*, .ct-slice-donut*/
{
stroke: $color;
}
.ct-slice-pie, .ct-area {
fill: $color;
}
}
@mixin ct-chart(
$ct-container-ratio: $ct-container-ratio,
$ct-text-color: $ct-text-color,
$ct-text-size: $ct-text-size,
$ct-grid-color: $ct-grid-color,
$ct-grid-width: $ct-grid-width,
$ct-grid-dasharray: $ct-grid-dasharray,
$ct-point-size: $ct-point-size,
$ct-point-shape: $ct-point-shape,
$ct-line-width: $ct-line-width,
$ct-bar-width: $ct-bar-width,
//$ct-donut-width: $ct-donut-width,
$ct-series-names: $ct-series-names,
$ct-series-colors: $ct-series-colors) {
.ct-axis-title {
fill: $ct-axis-label-color;
}
// --- Label ---
.ct-label {
@include ct-chart-label($ct-text-color, $ct-text-size);
&.ct-horizontal.ct-start {
@include ct-align-justify(flex-end, flex-start);
text-anchor: start; // Fallback for browsers that don't support foreignObjects
}
&.ct-horizontal.ct-end {
@include ct-align-justify(flex-start, flex-start);
text-anchor: start;
// EDIT: added for angled horiz labels
transform: translate(-4px, 0%) rotate(45deg);
}
&.ct-vertical.ct-start {
@include ct-align-justify(flex-end, flex-end);
text-anchor: end;
transform: translate(0, 20%);
}
&.ct-vertical.ct-end {
@include ct-align-justify(flex-end, flex-start);
text-anchor: start;
}
}
.ct-chart-line .ct-label,
.ct-chart-bar .ct-label {
display: flex;
}
// --- Bar labels ---
.ct-chart-bar {
.ct-label.ct-horizontal.ct-start {
@include ct-align-justify(flex-end, center);
text-anchor: start;
}
.ct-label.ct-horizontal.ct-end {
@include ct-align-justify(flex-start, center);
text-anchor: start;
}
&.ct-horizontal-bars .ct-label {
&.ct-horizontal.ct-start {
@include ct-align-justify(flex-end, flex-start);
text-anchor: start;
}
&.ct-horizontal.ct-end {
@include ct-align-justify(flex-start, flex-start);
text-anchor: start;
}
&.ct-vertical.ct-start {
//@include ct-chart-label($ct-text-color, $ct-text-size, center, $ct-vertical-text-justify);
@include ct-align-justify(center, flex-end);
text-anchor: end;
}
&.ct-vertical.ct-end {
@include ct-align-justify(center, flex-start);
text-anchor: end;
}
}
}
.ct-grid {
@include ct-chart-grid($ct-grid-color, $ct-grid-width, $ct-grid-dasharray);
}
.ct-point {
@include ct-chart-point($ct-point-size, $ct-point-shape);
}
.ct-line {
@include ct-chart-line($ct-line-width);
}
.ct-area {
@include ct-chart-area();
}
.ct-bar {
@include ct-chart-bar($ct-bar-width);
}
//.ct-slice-donut {
// @include ct-chart-donut($ct-donut-width);
//}
@if $ct-include-colored-series {
@for $i from 0 to length($ct-series-names) {
.ct-series-#{nth($ct-series-names, $i + 1)} {
$color: nth($ct-series-colors, $i + 1);
@include ct-chart-series-color($color);
}
}
}
}
@if $ct-include-classes {
@include ct-chart();
@if $ct-include-alternative-responsive-containers {
@for $i from 0 to length($ct-scales-names) {
.#{nth($ct-scales-names, $i + 1)} {
@include ct-responsive-svg-container($ratio: nth($ct-scales, $i + 1));
}
}
}
}

@ -0,0 +1,3 @@
#!/bin/bash
xterm -title "ESP html build" -e "source $HOME/.bashrc && cd html_src && gulp watch"
Loading…
Cancel
Save