grzanieplus.pl/plugins/stUserTrackerLevelPlugin/modules/stUserTrackerLevelWidgetBackend/templates/userTrackerEnteringWidgetSuccess.php

<?php use_helper('I18N', 'Text', 'stAdminGenerator', 'ObjectAdmin', 'stDate', 'stProductImage', 'stCurrency') ?>
<?php use_helper('stGadget', 'stOrder'); ?>

<?php
use_helper('I18N', 'stAdminGenerator', 'stJQueryTools','stCurrency', 'stOrder', 'stPrice', 'stJQueryTools', 'stProductImage', 'stDiscount','Validation', 'stDate');
sfLoader::loadHelpers('stProduct', 'stProduct'); 
?>
<?php st_include_partial('stAdminGenerator/message') ?>
<div id="entering-widget">    

<script type="text/javascript" src="/js/backend/d3.v4.min.js"> </script>

<style>
    .tooltip {
        position: absolute;
        text-align: center;        
        width: auto;
        height: auto;
        padding: 10px;
        font: 14px sans-serif;
        background: #eeeeee;
        border: 0px;
        border-radius: 8px;
        pointer-events: none;
    }
    
    .node circle {
      transition: transform 200ms ease-in-out;
    }
    .node:hover circle {
      transform: scale(1.05);
    }
    
</style>
<?php if($is_enabled_database): ?>
<?php if($number_of_users > 0): ?>
<div id="bubble-chart" style="margin: 0px auto; width: <?php echo $diameter; ?>px; margin-bottom: 30px;"> </div>


<div style="text-align: center;">

    <?php echo __('Ilość wejść z ostatnich 30 min') ?>: <b><?php echo $all_visit; ?></b> <?php echo __('Aktualnie w sklepie') ?>: <b><?php echo $number_of_active; ?></b>
    
    <?php if($all_visit > 499): ?>
        <br><i style="color: #ccc;"><?php echo __('Wykres pokazuje ostatnie 500 wejść.') ?></i>
    <?php endif; ?>

</div>

	<script type="text/javascript">

        dataset = <?php echo $json_data; ?>;
        
        var colorArr = dataset.children.map(function(d) { return d.Color; });

        var diameter = <?php echo $diameter; ?>;
        var color = d3.scaleOrdinal(colorArr);

        var bubble = d3.pack(dataset)
            .size([diameter, diameter])
            .padding(10);

        var svg = d3.select("#bubble-chart")
            .append("svg")
            .attr("width", diameter)
            .attr("height", diameter)
            .attr("class", "bubble");

        var nodes = d3.hierarchy(dataset)
            .sum(function(d) { return d.count; });

        var node = svg.selectAll(".node")
            .data(bubble(nodes).descendants())
            .enter()
            .filter(function(d){
                return  !d.children
            })
            .append("g")
            .attr("class", "node")
            .attr("transform", function(d) {
                return "translate(" + d.x + "," + d.y + ")";
            });

        node.append("title")
            .text(function(d) {
                return d.product;
            });
            
        var tooltip = d3.select("#bubble-chart")
            .append("div")
            .attr("class", "tooltip")
            .style("opacity", 0);    

        node.append("circle")
        .attr("r", function(d) {
            return d.r;
        })
        .style("fill", function(d) {
            return d.data.color;
        })
        .on("mouseover", function(d) {
            tooltip.transition()
            .duration(200)
            .style("opacity", .9);
        
            var product_text = "";
            var basket_text = "";
            var update_text = "";
        
            if (d.data.update) {
                update_text = "<b>" + d.data.update + "</b><br>";
            }
        
            if (d.data.product) {
                product_text = "<br><?php echo __('Ostatnio oglądany produkt') ?>: <br><b>" + d.data.product + "</b><br>";
            }
            
            if (d.data.basket) {
                basket_text = "<br><?php echo __('Ostatnio dodany do koszyka') ?>: <br><b>" + d.data.basket + "</b><br>";
            }
                        
            tooltip.html(update_text + "<?php echo __('Wejść') ?>: <b>" + d.data.visit + "</b><br>" + product_text + basket_text)
            .style("text-align", "left");                
        
            
            var tooltipWidth = parseInt(tooltip.style("width"));
            var tooltipHeight = parseInt(tooltip.style("height"));
            var xPos = d3.event.pageX;
            var yPos = d3.event.pageY;

            if (xPos > window.innerWidth * 0.8) {
                tooltip.style("left", (xPos - tooltipWidth - 20) + "px");
            } else {
                tooltip.style("left", (xPos + 10) + "px");
            }

            if (yPos > window.innerHeight * 0.8) {
                tooltip.style("top", (yPos - tooltipHeight - 20) + "px");
            } else {
                tooltip.style("top", (yPos - 8) + "px");
            }

            tooltip.style("text-align", "left");
                
                
                
        })
        .on("mouseout", function(d) {
            tooltip.transition()
                .duration(500)
                .style("opacity", 0);
        });

    node.append("text")
        .attr("dy", ".2em")
        .style("text-anchor", "middle")        
        .text("<?php echo __('Wejść') ?>")
        .attr("font-family", "sans-serif")
        .attr("font-size", function(d) {
            return d.r / 5;
        })
        .attr("fill", "white");

    node.append("text")
        .attr("dy", "1.2em")
        .style("text-anchor", "middle")
        .text(function(d) {
            return d.data.visit;
        })
        .attr("font-family", "Gill Sans", "Gill Sans MT")
        .attr("font-size", function(d) {
            return d.r / 3;
        })
        .attr("fill", "white");

    d3.select(self.frameElement)
        .style("height", diameter + "px");

</script>

<?php else: ?>

<div style="margin: 70px auto; text-align: center;">
<span style="font-size: 16px;"><?php echo __('Brak klientów w sklepie') ?></span><br>
<i style="color: #ccc;"><?php echo __('Dane z ostatnich 30 min') ?></i><br>
</div>

<?php endif; ?>
<?php endif; ?>
            
</div>