narensulegai/.block

## .block
license: gpl-3.0

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    body {
        font-family: sans-serif;
    }

    .flower {
        position: relative;
        margin: auto;
        height: 500px;
        width: 500px;
    }

    .petal {
        position: absolute;
        z-index: 1;
        height: 150px;
        width: 150px;
        transform-origin: bottom left;
        border-radius: 0px 150px 0px 0;
        margin-top: -150px;
        box-shadow: -20px 24px 60px -20px black;
    }

    .petal.active {
        /*TODO*/
    }

    .label.invert {
        text-align: right;
    }

    .bud {
        position: absolute;
        z-index: 5;
        height: 120px;
        width: 120px;
        background: #E0E4CC;
        top: 250px;
        left: 250px;
        margin-top: -60px;
        margin-left: -60px;
        border-radius: 50px;
        box-shadow: 1px 1px 17px black inset;
    }

    .bud>div {
        margin-top: 38px;
        font-size: 20px;
        text-align: center;
        font-weight: bold;
    }

    .petalContainer,
    .labelContainer {
        margin-top: 250px;
        margin-left: 250px;
        position: absolute;
    }

    .label {
        position: absolute;
        width: 100px;
        height: 100px;
        z-index: 10;
        font-size: 20px;
        margin-top: -40px;
        margin-left: -50px;
        font-size: 15px;
        color: white;
        text-shadow: 2px 2px 2px black;
    }
</style>

<body>

    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>
        //TODO : Style of the petals needs adjustment based on the number of petals
        var title = 'Inventory stratergy';
        var data = [
            { label: 'Inventory capacity management', color: '#B7D968', isActive: false },
            { label: 'Software automation', color: '#B576AD', isActive: true },
            { label: 'Inventory process optimization', color: '#E04644', isActive: false },
            { label: 'Agile operations and service', color: '#7CCCE5', isActive: false },
            { label: 'Employee development and deployment', color: '#FDE47F', isActive: false },
            { label: 'Outsource external service', color: '#FF9C00', isActive: false }
        ];

        var totalWeight = d3.sum(data, function (e) { return e.weight });

        var pie = d3.pie()
            .sort(null)
            .value(function (d) {
                return 1;//all petals are equal size
            });

        var petals = pie(data)

        var arc = d3.arc()
            .outerRadius(500)
            .innerRadius(0);

        var scaleRadius = 120;

        var style = function (styles) {
            return Object.keys(styles).map(function (k) {
                return k + ':' + styles[k];
            }).join(';')
        }
        var toDegree = function (radians) { return radians * 180 / Math.PI; }

        var flower = d3.selectAll('body')
            .append('div')
            .attr('class', 'flower')

        flower.append('div')
            .attr('class', 'bud')
            .append('div')
            .text(title)

        flower.append('div')
            .attr('class', 'petalContainer')
            .selectAll('.petal')
            .data(petals)
            .enter()
            .append('div')
            .attr('class', function (d) {
                var classes = ['petal']
                if (d.data.isActive) classes.push('active')
                return classes.join(' ')
            })
            .attr('style', function (d) {
                var theta = d.endAngle - d.startAngle;
                var overlap = 2;
                return style({
                    background: d.data.color,
                    transform: 'rotate(' + toDegree(d.startAngle) + 'deg) skewY(' + (toDegree(theta) - 90 + overlap) + 'deg)'
                });
            })

        flower.append('div')
            .attr('class', 'labelContainer')
            .selectAll('.label')
            .data(petals)
            .enter()
            .append('div')
            .attr('class', function (d) {
                var classes = ['label']
                if (toDegree(d.startAngle) >= 180) classes.push('invert')
                return classes.join(' ')
            })
            .attr('style', function (d) {
                var y = scaleRadius * (Math.sin((d.endAngle + d.startAngle) / 2));
                var x = scaleRadius * (Math.cos((d.endAngle + d.startAngle) / 2));
                return style({ top: x + 'px', left: y + 'px' });
            })
            .text(function (d) { return d.data.label });
    </script>
</body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	body {
	font-family: sans-serif;
	}

	.flower {
	position: relative;
	margin: auto;
	height: 500px;
	width: 500px;
	}

	.petal {
	position: absolute;
	z-index: 1;
	height: 150px;
	width: 150px;
	transform-origin: bottom left;
	border-radius: 0px 150px 0px 0;
	margin-top: -150px;
	box-shadow: -20px 24px 60px -20px black;
	}

	.petal.active {
	/TODO/
	}

	.label.invert {
	text-align: right;
	}

	.bud {
	position: absolute;
	z-index: 5;
	height: 120px;
	width: 120px;
	background: #E0E4CC;
	top: 250px;
	left: 250px;
	margin-top: -60px;
	margin-left: -60px;
	border-radius: 50px;
	box-shadow: 1px 1px 17px black inset;
	}

	.bud>div {
	margin-top: 38px;
	font-size: 20px;
	text-align: center;
	font-weight: bold;
	}

	.petalContainer,
	.labelContainer {
	margin-top: 250px;
	margin-left: 250px;
	position: absolute;
	}

	.label {
	position: absolute;
	width: 100px;
	height: 100px;
	z-index: 10;
	font-size: 20px;
	margin-top: -40px;
	margin-left: -50px;
	font-size: 15px;
	color: white;
	text-shadow: 2px 2px 2px black;
	}
	</style>

	<body>

	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>
	//TODO : Style of the petals needs adjustment based on the number of petals
	var title = 'Inventory stratergy';
	var data = [
	{ label: 'Inventory capacity management', color: '#B7D968', isActive: false },
	{ label: 'Software automation', color: '#B576AD', isActive: true },
	{ label: 'Inventory process optimization', color: '#E04644', isActive: false },
	{ label: 'Agile operations and service', color: '#7CCCE5', isActive: false },
	{ label: 'Employee development and deployment', color: '#FDE47F', isActive: false },
	{ label: 'Outsource external service', color: '#FF9C00', isActive: false }
	];

	var totalWeight = d3.sum(data, function (e) { return e.weight });

	var pie = d3.pie()
	.sort(null)
	.value(function (d) {
	return 1;//all petals are equal size
	});

	var petals = pie(data)

	var arc = d3.arc()
	.outerRadius(500)
	.innerRadius(0);

	var scaleRadius = 120;

	var style = function (styles) {
	return Object.keys(styles).map(function (k) {
	return k + ':' + styles[k];
	}).join(';')
	}
	var toDegree = function (radians) { return radians * 180 / Math.PI; }

	var flower = d3.selectAll('body')
	.append('div')
	.attr('class', 'flower')

	flower.append('div')
	.attr('class', 'bud')
	.append('div')
	.text(title)

	flower.append('div')
	.attr('class', 'petalContainer')
	.selectAll('.petal')
	.data(petals)
	.enter()
	.append('div')
	.attr('class', function (d) {
	var classes = ['petal']
	if (d.data.isActive) classes.push('active')
	return classes.join(' ')
	})
	.attr('style', function (d) {
	var theta = d.endAngle - d.startAngle;
	var overlap = 2;
	return style({
	background: d.data.color,
	transform: 'rotate(' + toDegree(d.startAngle) + 'deg) skewY(' + (toDegree(theta) - 90 + overlap) + 'deg)'
	});
	})

	flower.append('div')
	.attr('class', 'labelContainer')
	.selectAll('.label')
	.data(petals)
	.enter()
	.append('div')
	.attr('class', function (d) {
	var classes = ['label']
	if (toDegree(d.startAngle) >= 180) classes.push('invert')
	return classes.join(' ')
	})
	.attr('style', function (d) {
	var y = scaleRadius * (Math.sin((d.endAngle + d.startAngle) / 2));
	var x = scaleRadius * (Math.cos((d.endAngle + d.startAngle) / 2));
	return style({ top: x + 'px', left: y + 'px' });
	})
	.text(function (d) { return d.data.label });
	</script>
	</body>