JSFiddle - React, Tailwind, and code Playground

by sberube

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>FinOps Personas Treemap</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 800px; height: 600px;"></div>

    <script type="text/javascript">
        // Chart configuration
        var chart = echarts.init(document.getElementById('chart'));

        var option = {
            title: {
                text: 'FinOps Personas and Features',
                left: 'center'
            },
            tooltip: {
                formatter: function (params) {
                    var value = params.value;
                    var feature = params.name;
                    var persona = params.treePathInfo[1].name;
                    var breakdown = '';
                    if (params.treePathInfo.length === 3) {
                        breakdown = params.treePathInfo[2].name;
                    }
                    return persona + ' - ' + feature + (breakdown ? (' - ' + breakdown) : '') + ': ' + value;
                }
            },
            series: [{
                type: 'treemap',
                data: [
                    {
                        name: 'Cost Analyst',
                        value: 6,
                        children: [
                            { name: 'Cost Allocation', value: 2 },
                            { name: 'Budgeting', value: 2 },
                            { name: 'Spend Analysis', value: 2 }
                        ]
                    },
                    {
                        name: 'Cloud Engineer',
                        value: 5,
                        children: [
                            { name: 'Infrastructure Optimization', value: 2 },
                            { name: 'Resource Tagging', value: 2 },
                            {
                                name: 'Cost Forecasting',
                                value: 1,
             ...