How to add a new Indicator?

[cswgr]

I've read the docs, but in my project what happens is, that the following code just adds an additional DebugBar:

var debugbar = new PhpDebugBar.DebugBar();

debugbar.createIndicator('dbhost', 'cogs', 'connected db', 'right');

debugbar.setDataMap({
       'dbhost': ['time.duration_str', '0ms']
});

But of course I want to add the indicator to the existing bar.

What am I missing?

[parallels999]

Better on php collector with Renderable, and avoid adding js

var debugbar = new PhpDebugBar.DebugBar();

debugbar.createIndicator('dbhost_ind', 'cogs', 'connected db', 'right');

debugbar.setDataMap({
   'dbhost_ind': ['dbhost.duration_str', '0ms']
});

// Example adding dataset manually
debugbar.addDataSet({
    'dbhost': {'duration_str': '10ms'}
});

Your php colector must return

class DbHostCollector extends DataCollector /*implements Renderable*/
{
    /**
     * @return string
     */
    public function getName()
    {
        return 'dbhost';
    }

    /**
     * @return array
     */
    public function collect()
    {
        return array(
            'duration_str' => '10ms'
        );
    }

    // with Renderable `setDataMap` and `createIndicator` are not needed
    /*public function getWidgets()
    {
        return array(
            "dbhost_ind" => array(
                "icon" => "cogs",
                "tooltip" => "connected db",
                "map" => "dbhost.duration_str",
                "default" => "0ms"
            ),
        );
    }*/
}