I'd like to refactor this code if possible, I didn't find something to figure it out :
$javascript: rgb(238, 218, 103);
$php: rgb(119,125,176);
$ruby: rgb(197, 25, 17);
.isjavascript {
color: $javascript;
}
.isphp {
color: $php;
}
.isruby {
color: $ruby;
}
Well, you could use a map.
$languages-color: (
'javascript': rgb(238, 218, 103),
'php': rgb(119,125,176),
'ruby': rgb(197, 25, 17)
);
#each $label, $color in $languages-color {
.is#{$label} {
color: $color;
}
}
Related
How to double loop in LESS to generate a set of mixins such as:
.p_0_0 {
padding: 0rem 0rem;
}
.p_1_0 {
padding: 1rem 0rem;
}
.p_0_1 {
padding: 0rem 1rem;
}
.p_1_1 {
padding: 1rem 1rem;
}
It is better to use built-in tools...
Since LESS 3.x version LESS has each function, see more here. In this case, we can use this function to its fullest:
#steps: {
0: 0rem;
1: 1rem;
};
each(#steps, .(#valueX, #keyX, #indexX) {
each(#steps, .(#valueY, #keyY, #indexY) {
.p_#{keyY}_#{keyX} {
#{valueP}: #valueY #valueX;
}
})
})
Which generates:
.p_0_0 {
padding: 0rem 0rem;
}
.p_1_0 {
padding: 1rem 0rem;
}
.p_0_1 {
padding: 0rem 1rem;
}
.p_1_1 {
padding: 1rem 1rem;
}
I'd like to use svg-gauge (https://github.com/naikus/svg-gauge) in a vue component (vue-svg-gauge does not work properly). I am struggling where to start. I have imported the library but am not sure about using it within vue. This is what I have done so far:
<script>
module.exports = {
props: {
'value': {type: Number, default: 20},
},
data: function () {return {
chart: null
}},
mounted: function () {
this.chart = new Gauge(
document.getElementById("gauge1"), {
min: 0,
max: 50,
dialStartAngle: 180,
dialEndAngle: 0,
value: this.value,
color: function(value) {
if (value < 0) {
return "#5ee432";
} else if(value < 25) {
return "#fffa50";
} else if(value < 50) {
return "#f7aa38";
} else {
return "#ef4655";
}
}
}
);
},
}
}
}
</script>
It renders a gauge but I'm not sure how to update it or if this is the right way of going aboout things?
Thanks
Martyn
Update:
I am now using High charts gauge as it see easier to configure.
The solution I came up with for the above question is as follows (from an old commit)
<template>
<div class="wrapper bg-dark text-light border-0">
<div id="gauge1" class="gauge-container two"></div>
</div>
</template>
<script>
module.exports = {
props: {
'value': {type: Number, default: 0},
},
data: function () {return {
chart: null
}},
mounted: function () {
this.chart = new Gauge(
document.getElementById("gauge1"), {
min: 0,
max: 50,
dialStartAngle: 180,
dialEndAngle: 0,
value: this.value,
color: function(value) {
if (value < 0) {
return "#5ee432";
} else if(value < 25) {
return "#fffa50";
} else if(value < 50) {
return "#f7aa38";
} else {
return "#ef4655";
}
}
}
);
},
beforeDestroy: function () {
// this.chart.destroy()
},
watch: {
value: function (val) {
this.chart.value = val
},
options: function (opt) {
// this.chart.destroy()
// this.chart = new RadialGauge(Object.assign({}, this.options, {renderTo: 'canvas-gauge', value: this.value})).draw()
}
}
}
</script>
<style scoped>
/* ------ Default Style ---------- */
.gauge-container {
width: 250px;
height: 250px;
display: block;
float: left;
padding: 10px;
background-color: #222;
margin: 7px;
border-radius: 3px;
position: relative;
}
.gauge-container > .label {
position: absolute;
right: 0;
top: 0;
display: inline-block;
background: rgba(0,0,0,0.5);
font-family: monospace;
font-size: 0.8em;
padding: 5px 10px;
}
.gauge-container > .gauge .dial {
stroke: #334455;
stroke-width: 2;
fill: rgba(0,0,0,0);
}
.gauge-container > .gauge .value {
stroke: rgb(47, 227, 255);
stroke-width: 2;
fill: rgba(0,0,0,0);
}
.gauge-container > .gauge .value-text {
fill: rgb(47, 227, 255);
font-family: sans-serif;
font-weight: bold;
font-size: 0.8em;
}
/* ------- Alternate Style ------- */
.wrapper {
height: 150px;
float: left;
margin: 7px;
overflow: hidden;
}
.wrapper > .gauge-container {
margin: 0;
}
.gauge-container.two {
}
.gauge-container.two > .gauge .dial {
stroke: #334455;
stroke-width: 10;
}
.gauge-container.two > .gauge .value {
stroke: orange;
stroke-dasharray: none;
stroke-width: 13;
}
.gauge-container.two > .gauge .value-text {
fill: #ccc;
font-weight: 100;
font-size: 1em;
}
</style>
I see animations for Chartist line graphs (http://gionkunz.github.io/chartist-js/examples.html#example-line-path-animation), but none where the line literally draws itself out from left to right. Is that possible?
Not my solution, but it seems to do what you want.
HTML
<div class="ct-chart ct-golden-section"></div>
CSS
$color1: #ada8b6; //rgba(173, 168, 182, 100)
$color2: #ffeedb; //rgba(255, 238, 219, 100)
$color3: #4c3b4d; //rgba(76, 59, 77, 100)
$color4: #a53860; //rgba(165, 56, 96, 100)
$color5: #61c9a8; //rgba(97, 201, 168, 100)
body {
width: 100vw;
height: 100vh;
background: #111;
}
.ct-chart {
width: 90vw;
max-width: 1100px;
height: 375px;
margin: 5vh 6.5vw;
svg {
width: 100%;
}
}
.ct-grids line {
stroke: $color3;
opacity: 0.4;
}
.ct-labels span {
color: $color3;
}
#mixin pathseries($length, $delay, $strokecolor) {
stroke-dasharray: $length;
stroke-dashoffset: $length;
animation: draw 1s $delay ease both;
fill: none;
stroke: $strokecolor;
opacity: 0.8;
}
.ct-series-a {
#include pathseries(1093, 0s, $color1);
}
.ct-series-b {
#include pathseries(1665, 0.25s, $color5);
}
.ct-series-c {
#include pathseries(1644, 0.5s, $color2);
}
.ct-series-d {
#include pathseries(1540, 0.75s, $color4);
}
#keyframes draw {
to {
stroke-dashoffset: 0;
}
}
JS
new Chartist.Line('.ct-chart', {
labels: [1, 2, 3, 4, 5, 6, 7, 8],
series: [
[11, 12, 13, 11, 12, 10, 11, 10],
[12, 11, 17, -1, 0, 18, -2, 8],
[0, 8, 12, 1, 15, 3, 18, 1],
[3, 2, 12, 15, 16, 3, 18, -3]
]
}, {
high: 20,
low: -3,
fullWidth: true,
// As this is axis specific we need to tell Chartist to use whole numbers only on the concerned axis
axisY: {
onlyInteger: true,
offset: 20
}
});
setTimeout (
function() {
var path = document.querySelector('.ct-series-a path');
var length = path.getTotalLength();
console.log(length);
},
3000);
This question already has answers here:
Creating or referencing variables dynamically in Sass
(7 answers)
Closed 7 years ago.
I have widths of different planets
$mercury-width: 20px;
$venus-width: 30px;
$earth-width: 20px;
and their names:
`
$planets: mercury, venus, earth;
#each $planet in $planets {
.#{$planet} {
width: #{$planet}-width;
}
}
it doesn't work.
expected result:
.mercury {
width: 20px;
}
etc.
How can I do that?
How about this:
$planets-width: (mercury: 20px, venus: 30px, earth: 20px);
#each $name, $width in $planets-width {
.#{$name} {
width: $width;
}
}
Result:
/* line 3, ../scss/test.scss */
.mercury {
width: 20px;
}
/* line 3, ../scss/test.scss */
.venus {
width: 30px;
}
/* line 3, ../scss/test.scss */
.earth {
width: 20px;
}
If you want both color and size you can use nested maps:
$planets-map: (mercury: (width : 20px, color: red), venus: (width : 30px, color : purple), earth:( width: 20px, color: blue));
#each $name, $properties in $planets-map {
.#{$name} {
width: map-get($properties, width);
color: map-get($properties, color);
}
}
Result:
/* line 3, ../scss/test.scss */
.mercury {
width: 20px;
color: red;
}
/* line 3, ../scss/test.scss */
.venus {
width: 30px;
color: purple;
}
/* line 3, ../scss/test.scss */
.earth {
width: 20px;
color: blue;
}
I am working on a mobile application that contains different line charts . I have been trying to apply gradient colors to a line (single) chart fill color. But unfortunately I could not.
Is it possible to apply color gradients to a line fill color? Please help.
Check out this article: http://www.sencha.com/learn/learning-sencha-touch-charts/
sample styling with SASS:
chart {
colors: linear-gradient(45, rgb(212, 40, 40), rgb(117, 14, 14))
linear-gradient(45, rgb(180, 216, 42), rgb(94, 114, 13))
linear-gradient(45, rgb(43, 221, 115), rgb(14, 117, 56))
linear-gradient(45, rgb(45, 117, 226), rgb(14, 56, 117))
linear-gradient(45, rgb(187, 45, 222), rgb(85, 10, 103));
background: linear-gradient(45, #444, #111);
series {
stroke-width: 2;
&:nth-child(1) {
fill: linear-gradient(0, rgb(212, 40, 40), rgb(117, 14, 14));
}
&:nth-child(2) {
fill: linear-gradient(0, rgb(180, 216, 42), rgb(94, 114, 13));
}
&:nth-child(3) {
fill: linear-gradient(0, rgb(43, 221, 115), rgb(14, 117, 56));
}
&:nth-child(4) {
fill: linear-gradient(0, rgb(45, 117, 226), rgb(14, 56, 117));
}
&:nth-child(5) {
fill: linear-gradient(0, rgb(187, 45, 222), rgb(85, 10, 103));
}
}
axis {
stroke: #555;
fill: #555;
label {
fill: #eee;
}
title {
fill: #eee;
}
}
}
Also note this earlies post: Sencha Touch Charts style