parent
94cec1e47c
commit
3fcd234ad8
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -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
@ -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…
Reference in new issue