Credits:

Jessie Keck

Mark Caron

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

npm init

Step 4: Install required packages

npm install express pug -s

Step 5: Create a route

'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.

$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)

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!

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!