Credits:
Two Segmented – DO-NUT PIE CHART
For my project which I am working on requires a pie-chart. So, I tried many options and thought SVG (Scalable Vector Graphics) may fit my need. Indeed, there can be multiple best solutions. But, I am some what happy as a IT Pro with SVG or better say convinced :). For more reference.
In this blog post I would like to show case a demo of a pie chart! Data source is local disk space. Yes, I need to keep this blog simple and short.
Step 1 : Navigate to your favorite project location. In my case it is C:\Projects
Step 2: Create a folder and name it as you like. I named it as SelfServicePortal. Because I will keep adding all IT Pro automation work.
Step 3: Start the project work
|
1 |
npm init |
Step 4: Install required packages
|
1 |
npm install express pug -s |
Step 5: Create a route
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
'use strict'; var express = require('express'); var router = express.Router(); var spawn = require('child_process').spawn, child router.get('/', function (request, response) { //response.render('diskspace'); var child = spawn('powershell.exe', ["C:\\projects\\SelfServicePortal\\scripts\\diskSpace.ps1"]) child.stdout.on('data', function (data) { var result = JSON.parse(data) response.render('diskspace', { diskInformation: result }) }) }); module.exports = router; |
Step 6: Create a PowerShell Script to calculate the disk space information.
|
1 2 3 4 5 6 |
$DiskInformation = Get-CimInstance -ClassName Win32_LogicalDisk -Filter "DriveType=3" [pscustomobject]@{ "Space" = [string]::Concat(100 - [math]::Round("{0:P}" -f ($DiskInformation.FreeSpace / $DiskInformation.Size) -replace "%"), " ", [math]::Round("{0:P}" -f ($DiskInformation.FreeSpace / $DiskInformation.Size) -replace "%")) "DeviceID" = $DiskInformation.DeviceID -replace ":" } | ConvertTo-Json -Compress |
Step 7: Here is your main file (server.js)
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var express = require('express'); var app = express(); var path = require('path'); app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'pug'); var diskSpace = require('./routes/diskSpace'); app.use('/diskSpace', diskSpace); app.listen(3000); console.log("Your Application is running on port 3000"); |
Step 8: Build your PUG file as required. I just used the snippets which helps me! Thanks to Mark Caron!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
doctype html head meta(charset='UTF-8') meta(name='viewport', content='width=device-width, initial-scale=1.0') meta(http-equiv='X-UA-Compatible', content='ie=edge') title Document style. .chart-text { font: 16px/1.4em "Montserrat", Arial, sans-serif; fill: #000; -moz-transform: translateY(0.25em); -ms-transform: translateY(0.25em); -webkit-transform: translateY(0.25em); transform: translateY(0.25em); } .chart-label { font-size: 0.6em; line-height: 1; text-anchor: middle; -moz-transform: translateY(-0.25em); -ms-transform: translateY(-0.25em); -webkit-transform: translateY(-0.25em); transform: translateY(-0.25em); } .chart-note { font-size: 0.2em; text-transform: uppercase; text-anchor: middle; -moz-transform: translateY(0.7em); -ms-transform: translateY(0.7em); -webkit-transform: translateY(0.7em); transform: translateY(0.7em); } svg.donut(width='50%', height='50%', viewbox='0 0 42 42') circle.donut-hole(cx='21', cy='21', r='15.91549430918954', fill='#fff') circle.donut-ring(cx='21', cy='21', r='15.91549430918954', fill='transparent', stroke='#d2d3d4', stroke-width='3') circle.donut-segment(cx='21', cy='21', r='15.91549430918954', fill='transparent', stroke='#ce4b99', stroke-width='3', stroke-dasharray='40 60', stroke-dashoffset='0') g.chart-text text.chart-label(x='50%', y='50%') #{diskInformation.DeviceID} text.chart-note(x='50%',y='50%') #{diskInformation.SpaceInformation} text.chart-note(x='50%',y='60%') FS / Size |
Yes, it’s bit difficult to use the SVG for the first time. But, Mark Caron blog made my job easier and I achieved most of my needs with little more SVG tricks! I will continue to explore SVG and share my learning in my upcoming blog!