mirror of https://github.com/Lissy93/dashy.git
📦 Built an SVG gauge chart component
This commit is contained in:
Alicia Sykes
parent
f5c11b3dc6
commit
a889c0e78a
|
|
@ -0,0 +1,361 @@
|
||||||
|
<template>
|
||||||
|
<div class="gauge">
|
||||||
|
<svg
|
||||||
|
v-if="height"
|
||||||
|
:viewBox="`0 0 ${RADIUS * 2} ${height}`" height="100%" width="100%"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
<!-- Inner shadow for empty part of the gauge -->
|
||||||
|
<filter :id="`innershadow-${_uid}`">
|
||||||
|
<feFlood flood-color="#c7c6c6" />
|
||||||
|
<feComposite in2="SourceAlpha" operator="out" />
|
||||||
|
<feGaussianBlur stdDeviation="2" result="blur" />
|
||||||
|
<feComposite operator="atop" in2="SourceGraphic" />
|
||||||
|
</filter>
|
||||||
|
|
||||||
|
<!-- Gradient color for the full part of the gauge -->
|
||||||
|
<linearGradient
|
||||||
|
v-if="hasGradient"
|
||||||
|
:id="`gaugeGradient-${_uid}`"
|
||||||
|
>
|
||||||
|
<stop
|
||||||
|
v-for="(color, index) in gaugeColor"
|
||||||
|
:key="`${color.color}-${index}`"
|
||||||
|
:offset="`${color.offset}%`" :stop-color="color.color"
|
||||||
|
/>
|
||||||
|
</linearGradient>
|
||||||
|
|
||||||
|
<mask :id="`innerCircle-${_uid}`">
|
||||||
|
<!-- Mask to make sure only the part inside the circle is visible -->
|
||||||
|
<!-- RADIUS - 0.5 to avoid any weird display -->
|
||||||
|
<circle :r="RADIUS - 0.5" :cx="X_CENTER" :cy="Y_CENTER" fill="white" />
|
||||||
|
|
||||||
|
<!-- Mask to remove the inside of the gauge -->
|
||||||
|
<circle :r="innerRadius" :cx="X_CENTER" :cy="Y_CENTER" fill="black" />
|
||||||
|
|
||||||
|
<template v-if="separatorPaths">
|
||||||
|
<!-- Mask for each separator -->
|
||||||
|
<path
|
||||||
|
v-for="(separator, index) in separatorPaths"
|
||||||
|
:key="index"
|
||||||
|
:d="separator" fill="black"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</mask>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<g :mask="`url(#innerCircle-${_uid})`">
|
||||||
|
<!-- Draw a circle if the full gauge has a 360° angle, otherwise draw a path -->
|
||||||
|
<circle
|
||||||
|
v-if="isCircle"
|
||||||
|
:r="RADIUS" :cx="X_CENTER" :cy="Y_CENTER"
|
||||||
|
:fill="hasGradient ? `url(#gaugeGradient-${_uid})` : gaugeColor"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
v-else
|
||||||
|
:d="basePath" :fill="hasGradient ? `url(#gaugeGradient-${_uid})` : gaugeColor"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Draw a circle if the empty gauge has a 360° angle, otherwise draw a path -->
|
||||||
|
<circle
|
||||||
|
v-if="value === min && isCircle"
|
||||||
|
:r="RADIUS" :cx="X_CENTER" :cy="Y_CENTER"
|
||||||
|
:fill="baseColor"
|
||||||
|
/>
|
||||||
|
<path v-else :d="gaugePath" :fill="baseColor" :filter="`url(#innershadow-${_uid})`" />
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<template v-if="scaleLines">
|
||||||
|
<!-- Display a line for each tick of the scale -->
|
||||||
|
<line
|
||||||
|
v-for="(line, index) in scaleLines"
|
||||||
|
:key="`${line.xE}-${index}`"
|
||||||
|
:x1="line.xS" :y1="line.yS" :x2="line.xE" :y2="line.yE"
|
||||||
|
stroke-width="1" :stroke="baseColor"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- Option for displaying content inside the gauge -->
|
||||||
|
<foreignObject x="0" y="0" width="100%" :height="height">
|
||||||
|
<slot />
|
||||||
|
</foreignObject>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/** A gauge chart component for showing percentages
|
||||||
|
* Heavily inspired by vue-svg-gauge by @hellocomet
|
||||||
|
* See: https://github.com/hellocomet/vue-svg-gauge
|
||||||
|
*/
|
||||||
|
import ErrorHandler from '@/utils/ErrorHandler';
|
||||||
|
|
||||||
|
// Main radius of the gauge
|
||||||
|
const RADIUS = 100;
|
||||||
|
|
||||||
|
// Coordinates of the center based on the radius
|
||||||
|
const X_CENTER = 100;
|
||||||
|
const Y_CENTER = 100;
|
||||||
|
|
||||||
|
/* Turn polar coordinate to cartesians */
|
||||||
|
function polarToCartesian(radius, angle) {
|
||||||
|
const angleInRadians = (angle - 90) * (Math.PI / 180);
|
||||||
|
return {
|
||||||
|
x: X_CENTER + (radius * Math.cos(angleInRadians)),
|
||||||
|
y: Y_CENTER + (radius * Math.sin(angleInRadians)),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Describe a gauge path according */
|
||||||
|
function describePath(radius, startAngle, endAngle) {
|
||||||
|
const start = polarToCartesian(radius, endAngle);
|
||||||
|
const end = polarToCartesian(radius, startAngle);
|
||||||
|
|
||||||
|
const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
|
||||||
|
|
||||||
|
const d = [
|
||||||
|
'M', start.x, start.y,
|
||||||
|
'A', radius, radius, 0, largeArcFlag, 0, end.x, end.y,
|
||||||
|
'L', X_CENTER, Y_CENTER,
|
||||||
|
].join(' ');
|
||||||
|
|
||||||
|
return d;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Gauge',
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: Number,
|
||||||
|
default: 70,
|
||||||
|
},
|
||||||
|
min: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
max: {
|
||||||
|
type: Number,
|
||||||
|
default: 100,
|
||||||
|
},
|
||||||
|
startAngle: {
|
||||||
|
type: Number,
|
||||||
|
default: -90,
|
||||||
|
validator: (value) => {
|
||||||
|
if (value < -360 || value > 360) {
|
||||||
|
ErrorHandler('Gauge Chart - Expected prop "startAngle" to be between -360 and 360');
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
endAngle: {
|
||||||
|
type: Number,
|
||||||
|
default: 90,
|
||||||
|
validator: (value) => {
|
||||||
|
if (value < -360 || value > 360) {
|
||||||
|
ErrorHandler('Gauge Chart - Expected prop "endAngle" to be between -360 and 360');
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
/* Size of the inner radius between 0 and RADIUS. Closer to RADIUS, is thinner gauge */
|
||||||
|
innerRadius: {
|
||||||
|
type: Number,
|
||||||
|
default: 60,
|
||||||
|
validator: (value) => {
|
||||||
|
if (value < 0 || value > 100) {
|
||||||
|
ErrorHandler(`Gauge Chart - Expected prop "innerRadius" to be between 0 and ${RADIUS}`);
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
/* Separator step, will display a each min + (n * separatorStep), won't show if null */
|
||||||
|
separatorStep: {
|
||||||
|
type: Number,
|
||||||
|
default: 20,
|
||||||
|
validator: (value) => {
|
||||||
|
if (value !== null && value < 0) {
|
||||||
|
ErrorHandler('Gauge Chart - Expected prop "separatorStep" to be null or >= 0');
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
/* Separator Thickness, unit is in degree */
|
||||||
|
separatorThickness: {
|
||||||
|
type: Number,
|
||||||
|
default: 4,
|
||||||
|
},
|
||||||
|
/* Gauge color. Can be either string or array of objects (for gradient) */
|
||||||
|
gaugeColor: {
|
||||||
|
type: [Array, String],
|
||||||
|
default: () => ([
|
||||||
|
{ offset: 0, color: '#20e253' },
|
||||||
|
{ offset: 30, color: '#f6f000' },
|
||||||
|
{ offset: 60, color: '#fca016' },
|
||||||
|
{ offset: 90, color: '#f80363' },
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
/* Color of the base of the gauge */
|
||||||
|
baseColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#DDDDDD',
|
||||||
|
},
|
||||||
|
/* Scale interval, won't display any scall if 0 or `null` */
|
||||||
|
scaleInterval: {
|
||||||
|
type: Number,
|
||||||
|
default: 5,
|
||||||
|
validator: (value) => {
|
||||||
|
if (value !== null && value < 0) {
|
||||||
|
ErrorHandler('Gauge Chart - Expected prop "scaleInterval" to be null or >= 0');
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
/* Transition duration in ms */
|
||||||
|
transitionDuration: {
|
||||||
|
type: Number,
|
||||||
|
default: 1500,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
X_CENTER,
|
||||||
|
Y_CENTER,
|
||||||
|
RADIUS,
|
||||||
|
tweenedValue: this.min,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
/* Height of the viewbox */
|
||||||
|
height() {
|
||||||
|
const { endAngle, startAngle } = this;
|
||||||
|
const { y: yStart } = polarToCartesian(RADIUS, startAngle);
|
||||||
|
const { y: yEnd } = polarToCartesian(RADIUS, endAngle);
|
||||||
|
|
||||||
|
return Math.abs(endAngle) <= 180 && Math.abs(startAngle) <= 180
|
||||||
|
? Math.max(Y_CENTER, yStart, yEnd)
|
||||||
|
: RADIUS * 2;
|
||||||
|
},
|
||||||
|
/* SVG d property of the path of the base gauge (the colored one) */
|
||||||
|
basePath() {
|
||||||
|
const { startAngle, endAngle } = this;
|
||||||
|
|
||||||
|
return describePath(RADIUS, startAngle, endAngle);
|
||||||
|
},
|
||||||
|
/* SVG d property of the gauge based on current value, to hide inverse */
|
||||||
|
gaugePath() {
|
||||||
|
const { endAngle, getAngle, tweenedValue } = this;
|
||||||
|
|
||||||
|
return describePath(RADIUS, getAngle(tweenedValue), endAngle);
|
||||||
|
},
|
||||||
|
/* Total angle of the gauge */
|
||||||
|
totalAngle() {
|
||||||
|
const { startAngle, endAngle } = this;
|
||||||
|
|
||||||
|
return Math.abs(endAngle - startAngle);
|
||||||
|
},
|
||||||
|
/* True if the gauge is a full circle */
|
||||||
|
isCircle() {
|
||||||
|
return Math.abs(this.totalAngle) === 360;
|
||||||
|
},
|
||||||
|
/* If gauge color is array, return true so gradient can be used */
|
||||||
|
hasGradient() {
|
||||||
|
return Array.isArray(this.gaugeColor);
|
||||||
|
},
|
||||||
|
/* Array of the path of each separator */
|
||||||
|
separatorPaths() {
|
||||||
|
const {
|
||||||
|
separatorStep, getAngle, min, max, separatorThickness, isCircle,
|
||||||
|
} = this;
|
||||||
|
if (separatorStep > 0) {
|
||||||
|
const paths = [];
|
||||||
|
let i = isCircle ? min : min + separatorStep;
|
||||||
|
for (i; i < max; i += separatorStep) {
|
||||||
|
const angle = getAngle(i);
|
||||||
|
const halfAngle = separatorThickness / 2;
|
||||||
|
paths.push(describePath(RADIUS + 2, angle - halfAngle, angle + halfAngle));
|
||||||
|
}
|
||||||
|
|
||||||
|
return paths;
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
/* Array of line configuration for each scale */
|
||||||
|
scaleLines() {
|
||||||
|
const {
|
||||||
|
scaleInterval, isCircle, min, max, getAngle, innerRadius,
|
||||||
|
} = this;
|
||||||
|
|
||||||
|
if (scaleInterval > 0) {
|
||||||
|
const lines = [];
|
||||||
|
let i = isCircle ? min + scaleInterval : min;
|
||||||
|
|
||||||
|
for (i; i < max + scaleInterval; i += scaleInterval) {
|
||||||
|
const angle = getAngle(i);
|
||||||
|
const startCoordinate = polarToCartesian(innerRadius - 4, angle);
|
||||||
|
const endCoordinate = polarToCartesian(innerRadius - 8, angle);
|
||||||
|
lines.push({
|
||||||
|
xS: startCoordinate.x,
|
||||||
|
yS: startCoordinate.y,
|
||||||
|
xE: endCoordinate.x,
|
||||||
|
yE: endCoordinate.y,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return lines;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
/* Generate a logarithmic scale for smooth animations */
|
||||||
|
logScale() {
|
||||||
|
const logScale = [];
|
||||||
|
for (let i = this.max; i > 1; i -= 1) logScale.push(Math.round(Math.log(i)));
|
||||||
|
return logScale;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
/* Update chats value with animation */
|
||||||
|
value(newValue) {
|
||||||
|
this.animateTo(newValue);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/* Get an angle for a value */
|
||||||
|
getAngle(value) {
|
||||||
|
const {
|
||||||
|
min, max, startAngle, totalAngle,
|
||||||
|
} = this;
|
||||||
|
const totalValue = (max - min) || 1;
|
||||||
|
return ((value * totalAngle) / totalValue) + startAngle;
|
||||||
|
},
|
||||||
|
/* Increment the charts current value with logarithmic delays, until it equals new value */
|
||||||
|
animateTo(newValue) {
|
||||||
|
let currentValue = this.tweenedValue;
|
||||||
|
let indexCounter = 0; // Keeps track of number of moves
|
||||||
|
const forward = currentValue < newValue; // Direction
|
||||||
|
const moveOnePoint = () => {
|
||||||
|
currentValue = forward ? currentValue + 1 : currentValue - 1;
|
||||||
|
indexCounter += 1;
|
||||||
|
setTimeout(() => {
|
||||||
|
if ((forward && currentValue <= newValue) || (!forward && currentValue >= newValue)) {
|
||||||
|
this.tweenedValue = currentValue;
|
||||||
|
moveOnePoint();
|
||||||
|
}
|
||||||
|
}, this.logScale[indexCounter]);
|
||||||
|
};
|
||||||
|
moveOnePoint();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// Set initial value
|
||||||
|
this.animateTo(this.value);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="css">
|
||||||
|
.gauge {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue