samber / chartjs-plugin-datasource-prometheus Goto Github PK

Hi, I made my webpage with Vue.js (& not familiar in chart.js)
In this document, it give me just only plain javascript example.
I'm trying to npm install all package and import just like a

<script>
import {Chart} from 'chart.js';
import {ChartDatasourcePrometheusPlugin} from 'chartjs-plugin-datasource-prometheus';
... 

in vue.js file, And use document's example almost same in some function

createChart(charId, q) {
            const ctx = document.getElementById(charId)
            console.log(charId, q)
            this.myChart = new Chart(ctx, {
                type: 'line',
                plugins: [{ChartDatasourcePrometheusPlugin}],
                options: {
                    plugins: {
                        'datasource-prometheus': {
                            prometheus: {
                                endpoint: this.promEndpoint,
                                baseURL: "/api/v1",   // default value
                            },
                            query: q,
                            timeRange: {
                                type: 'relative',
                                // from 12 hours ago to now
                                start: -12 * 60 * 60 * 1000,
                                end: 0,
                            },
                        },
                    },
                },
            }); }

When this code applied, there is no error but just empty canvas exsisted.

How should I apply this package into vue.js properly?

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?

Hi I am using this plugin to display a website via cdn.
Trying to update the chart query with this code does not update the chart or send a request to the backend

chart.options.plugins['datasource-prometheus'].query = "new query"; chart.update({});

Sometimes for some reasons I exclude any labels from resulting time series data.
In this case we have captions of resulting charts in the form like: node_load1{}, node_load5{}, etc.
Is it possible to switch off drawing of empty label sets?

Related to this PR: samber/prometheus-query-js#7

Shouldn't there be an update to the prometheus query library?

Hello,
I've just discovered Chart.js and this plugin, so the answer to my question is probably obvious.
But I was wondering, is there a way to use the "auto refresh" functionality of this plugin, without having the whole chart be redrawn completely.
Which is not very nice visually — and probably not very efficient as well.
That's what I am talking about, when the data gets refreshed:

I would have expected the timespan to grow, and the existing data be shifted to the left.
Do you see what I mean?
Thanks.

Should I do something like:

myChart.clear()
myChart.options.prometheus.query = "new query"
myChart.draw()

?

Chart.js 3.0 is out now, so it might be nice for this plugin to upgrade to it

Hello,
Thank you for this helpful plugin!

I understand this is not to replace Grafana, but is there a way to feed more than one query to the chart ?

My use case is to draw two lines, one for a total sum of type1 entities over time, and one for a sum of type2 entities overtime.
These come from two different prometheus metrics.

I can't find a way to do it on the same chart.

Any idea or workaround ?

Thanks again!

You can add a git tag v2.0.0 and then on the releases page create a release from the tag https://github.com/samber/chartjs-plugin-datasource-prometheus/releases

git tag v2.0.0
git push --tags

Hi, i have got the error in the console

import { useEffect, useRef } from "react";
import Chart from "chart.js/auto";
import "chartjs-adapter-date-fns";
import ChartDatasourcePrometheusPlugin from "chartjs-plugin-datasource-prometheus";
import "./styles.css";

export default function App() {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const chartRef = useRef<Chart | null>(null);

  useEffect(() => {
    if (canvasRef.current) {
      chartRef.current = new Chart(canvasRef.current, {
        type: "line",
        data: {
          datasets: [],
        },
        plugins: [ChartDatasourcePrometheusPlugin],
        options: {
          plugins: {
            "datasource-prometheus": {
              prometheus: {
                endpoint: "https://prometheus.demo.do.prometheus.io",
                baseURL: "/api/v1", // default value
              },
              query: "sum by (job) (go_gc_duration_seconds)",
              timeRange: {
                type: "relative",
                // from 1 hours ago to now
                start: -1 * 60 * 60 * 1000,
                end: 0,
              },
            },
          },
        },
      });
    }

    return () => {
      chartRef.current?.destroy();
    };
  }, []);

  return <canvas ref={canvasRef}></canvas>;
}

Playground:
https://codesandbox.io/p/sandbox/chartjs-prometheus-bug-4jq97s

Is there a way to customize the format of the time stamps displayed on the x-axis?

First of all, thanks for this package! I've been thoroughly using it as a guide while I try to figure my way out in publishing my own (I hope you don't mind 😅)

I noticed you have types exported from Rollup, but it is not exactly used when node installed since you haven't specified it in the package.json. The fix should be as simple as adding a "types": "dist/index.d.ts", assuming that's the entry point (I'd be glad to open up a PR for that!). More on that here.

As an aside, rollup-plugin-ts seems to do better than rollup-plugin-typescript2, at least for me since the former has a similar behavior to Parcel's declaration generation (e.g. it tree-shakes things so you end up declaring/emitting only the public API).

Is it possible to draw a Histogram metric like request latency?

Thank you for the library, it's saved me.

Hello I tried to use the dataSetHook but I am getting an error about

index.umd.ts:50 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'forEach')
    at cn (index.umd.ts:50:18)
    at dn (index.umd.ts:50:18)
    at bn.update (index.umd.ts:50:18)
    at An.update (index.umd.ts:50:18)
    at Object.resumeRendering (prometheus-query.umd.js:7:71)
    at prometheus-query.umd.js:7:71
cn	@	index.umd.ts:50
dn	@	index.umd.ts:50
update	@	index.umd.ts:50
update	@	index.umd.ts:50
resumeRendering	@	prometheus-query.umd.js:7
(anonymous)	@	prometheus-query.umd.js:7
Promise.catch (async)		
beforeUpdate	@	prometheus-query.umd.js:7
d	@	color.esm.js:97
_notify	@	index.umd.ts:50
notify	@	index.umd.ts:50
notifyPlugins	@	index.umd.ts:50
update	@	index.umd.ts:50
An	@	index.umd.ts:50
(anonymous)	@	main.js:175

I believe that this is an error on the dataSetHook since when I remove it this error is not showing in the console.

My code for initializing the chart looks like this:

var jitterChart = new Chart(ctxjitter, {
    type: 'line',
    plugins: [ChartDatasourcePrometheusPlugin],
    options: {
      animation: {
        duration: 0,
      },
      plugins: {
        'datasource-prometheus': {
          query: [jitterQuery,maxLatencyQuery],
          timeRange: {
            type: 'absolute',
            start: startDate,
            end: endDate,
            msUpdateInterval: 5000,
          },
          dataSetHook:(datasets) => {
            console.log(datasets);
          },
        },
      },
    },
  });

NOTE: Please correct me if this is an error from my end. thank you.

Hello @samber ,

Thanks for this grat plugin.

Would it be possible to make the internal parameter baseURL public ?

...
baseURL: this.endpoint + "/api/v1/",
 ...

something like this could be done here:

...
this.endpoint = options.endpoint.replace(/\/$/, "");
this.baseURL = options.baseURL || this.endpoint + "/api/v1/",
...

then here

...
baseURL: this.baseURL,
...

instead of :

...
baseURL: this.endpoint + "/api/v1/",,
...

My use case is that I proxy the request via a custom application and the url in my case would need to look like this when reaching my app:

• https://my_super_app.com/prometheus?something=abc?somethingElse=efg

Then I manage the construction of the URL in my backend to format the URL as necessary.

Thanks