samber / chartjs-plugin-datasource-prometheus

📊 Chart.js plugin for Prometheus
https://www.npmjs.com/package/chartjs-plugin-datasource-prometheus
MIT License
107 stars 20 forks source link

Documentation / example of findInLabelMap #7

Closed matthewmgamble closed 3 years ago

matthewmgamble commented 3 years ago

I can't find any examples of how to use findInLabelMap to change the series labels in the final chart - are there any examples of how to use this to customize labels?

samber commented 3 years ago

findInLabelMap is kind of a hook, called for each series. It takes a single argument (a metric object) and returns a string.

I'm not sure about the content of this object. Can you please provide an example in a comment? The doc needs to be improved. ;)

image

You can use it in this way:

var myChart = new Chart(ctx, {
  type: 'line',
  plugins: [ChartDatasourcePrometheusPlugin],
  options: {
    plugins: {
      'datasource-prometheus': {
        prometheus: {
          endpoint: "http://demo.robustperception.io:9090",
          baseURL: "/api/v1",   // default value
        },
        query: 'sum by (job) (go_gc_duration_seconds)',
        findInLabelMap: (metric) => {
            console.log(metric);
            return 'hello world';
        },
        timeRange: {
          type: 'relative',

          // from 12 hours ago to now
          start: -12 * 60 * 60 * 1000,
          end: 0,
        },
      },
    },
  },
});
samber commented 3 years ago

Added to documentation