GithubHelp home page GithubHelp logo

corpglory / grafana-multibar-graph-panel Goto Github PK

View Code? Open in Web Editor NEW
75.0 13.0 7.0 1.09 MB

A plugin implementing https://github.com/grafana/grafana/issues/870

License: MIT License

JavaScript 1.90% TypeScript 82.20% HTML 15.90%
grafana-plugin grafana

grafana-multibar-graph-panel's Introduction

This project is not activly supported. Please use https://github.com/chartwerk/grafana-chartwerk-app (it has multibar support)

Multibar Graph Panel

Webpack copy of Grafana default panel implementing grafana/grafana#870

The plugin is under development. Please goto Build section to build it from source.

Supported Grafana versions: 5.3.3+

Screenshots

Screenshot

Build

npm install
npm run build

See also

About CorpGlory Inc.

The project developed by CorpGlory Inc., a company which provides high quality software development, data visualization, Grafana and monitoring consulting.

grafana-multibar-graph-panel's People

Contributors

amper43 avatar corpglory-dev avatar gnought avatar jonyrock avatar matthenning avatar rozetko avatar sankerust avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

grafana-multibar-graph-panel's Issues

Side by side not working with relative time

I am trying to make a This Week / This Month panel, and set Relative Time to "now/w" / "now/M".
After setting the relative time, bars are not shown side by side anymore, they are all behind each-other.
Removing relative time and setting "This Week" or "This Month" as the time range in grafana displays the bars correctly.
Is this a known issue/easy to fix?

Error when install and build

Hello! When i build i have error:

ERROR in ./module.ts
(301,27): error TS2339: Property 'yaxis' does not exist on type '{ alias: {}; }'.

ERROR in ./graph.ts
(491,29): error TS2362: The left-hand side of an arithmetic operation must be of type 'any', 'number' or an enum type.

ERROR in ./graph.ts
(495,17): error TS2554: Expected 1 arguments, but got 2.

And when i install:

warning @types/[email protected]: This is a stub types definition for Moment (https://github.com/moment/moment). Moment provides its own type definitions, so you don't need @types/moment installed!
warning @types/[email protected]: This is a stub types definition for perfect-scrollbar (https://github.com/noraesae/perfect-scrollbar). perfect-scrollbar provides its own type definitions, so you don't need @types/perfect-scrollbar installed!

I see plugin, he work. But after reload page:

image

node -v
v9.8.0

npm -v
5.8.0

grafana-cli -v
Grafana cli version 4.6.3

Centos 7.

No decimals in tooltip (hover)

See the example below. It also happens when manually setting the decimals.
The standard Grafana barchart does give decimals.
Thanks for this graph btw.

z

Issue when serving Grafana in sub directory

I serve Grafana via a virtual sub directory (https://host/grafana instead of https://host:3000).
Another application (icingaweb2) is served in the root directory (https://host).

When editing the this panel in Grafana and clicking on the "Display" or "Legend" tab my root application is loaded into the panel. Maybe the root_url is not applied here?
Other panels work fine.

Before clicking "Legend":
grafik

After clicking "Legend":
grafik

Legend values not being showed

Hello devs!

I have just installed the plugin and have found a problem with the legend values.

image

Playing with the options, enabling/disabling them, I can see for a second the values but then they disappear. Anyone else experiencing this issue?

Thank you for your help,

Carlos.

Previous legend values displayed if not data is available

Bars are displayed correctly, but mouse-over shows previous data if no current data is available.

Happens e.g. in a statement "...group by date(salesdate)" on Sundays (most categories have no sales). Example: graph on 12/2: light-blue bar corresponds to value (4 parts), blue/green bars are fine (nothing sold) - but the legend is clearly wrong (shows the values from 12/1 again).

verkauf

Lost precision

Hi,

I have two Influx Queries from which I get the energy consumption of my house. If I use the standard bar graph I have the precision of two decimals.

image

If I switch to Multibar, I loose this precision and the numbers are rounded:

image

The "Decimals" settings has no influence. How can I have the same precision as in the standard graph or is this an issue?

Thanks,
Oliver

Legend click error

Steps to reproduce:

  • create multibar graph panel
  • enable bars
  • enable Side by side
  • click any metric name in legend

Expected behaviour:

  • only one metric is shown

Actual behaviour:

  • error
    image

We should patch jquery.flot.orderbars to fix it

Wrong time in tooltip

This is my query result:
image

this is my graph - x axes ticks are not pointing to correct dates and when i hover over it shows wrong dates as well
image

my data is grouped correctly, query is correct but display is wrong
I hope i am able to convey my issue

by @nsayedqt
continues discussion from here: #22 (comment)

Tooltip and zooming do not work

Events from plot do not get emitted after fixing #7
And, as a result, tooltip and zooming in stopped working
Problem appeared because of converting graph_tooltip.ts from AMD to ES6 module
Need to convert graph.ts from AngularJS directive with global vars to TS class for debugging
image

Time label align in group

Now the time is displayed on the left side under group
We should add option to "Display" tab in editor to have a choice whether to render it on the left or center side
image
See also: #14

Panel plugin with id corpglory-multibar-graph-panel could not be found

I am seeing Panel plugin with id corpglory-multibar-graph-panel could not be found when trying to add a the multibar panel.

Running in a new grafana/grafana container, installed via GF_INSTALL_PLUGINS environment variable

grafana_1     | from url: https://github.com/CorpGlory/grafana-multibar-graph-panel/archive/0.2.4.zip
grafana_1     | into: /var/lib/grafana/plugins
grafana_1     |
grafana_1     | โœ” Installed multibar-graph-panel successfully
grafana_1     |
grafana_1     | Restart grafana after installing plugins . <service grafana-server restart>
grafana_1     |
grafana_1     | t=2019-03-09T00:36:37+0000 lvl=info msg="Starting Grafana" logger=server version=6.0.1 commit=0c44a04 branch=HEAD compiled=2019-03-06T14:21:49+0000```

Bar Graph not showing side by side for weekly data

I'm using Prometheus as data source for grafana and constructing side by side grafana for weekly data such as for the last 7 days if the data point is pushed every day then the graph is only showing points instead of bars.
image

custom date time format not used after switching modes

Custom Date-Time format is not used after switching X-Axis modes.

Steps to reproduce:

  • Use custom Date-Time format
  • Switch X-Axis mode from Time to any other
  • Swith X-Axis mode back to Time

Currently works only after browser page refresh.

Error when building from sources

I tried to build from source to verify #9 but ran into eom errors:

mathenning@redacted:~/grafana-multibar-graph-panel$ npm run build
npm info it worked if it ends with ok
npm verb cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'build' ]
npm info using [email protected]
npm info using [email protected]
npm verb run-script [ 'prebuild', 'build', 'postbuild' ]
npm info lifecycle [email protected]~prebuild: [email protected]
npm sill lifecycle [email protected]~prebuild: no script for prebuild, continuing
npm info lifecycle [email protected]~build: [email protected]

> [email protected] build /home/mathenning/grafana-multibar-graph-panel
> webpack --config build/webpack.prod.conf.js

ts-loader: Using [email protected] and /home/mathenning/grafana-multibar-graph-panel/tsconfig.json
Hash: 9fd4e9cde9fb5b0c9652
Version: webpack 3.12.0
Time: 3967ms
                    Asset     Size  Chunks                    Chunk Names
                module.js   490 kB       0  [emitted]  [big]  main
partials/axes_editor.html  3.39 kB          [emitted]
partials/tab_display.html  6.54 kB          [emitted]
 partials/tab_legend.html  2.94 kB          [emitted]
  [11] ./module.ts 12 kB {0} [built] [1 error]
  [12] ./graph.ts 27.7 kB {0} [built] [2 errors]
  [13] ./vendor/flot/jquery.flot.time.js 11.7 kB {0} [built]
  [14] ./vendor/flot/jquery.flot.selection.js 13.6 kB {0} [built]
  [15] ./vendor/flot/jquery.flot.orderbars.js 5.62 kB {0} [built]
  [16] ./vendor/flot/jquery.flot.stack.js 7.26 kB {0} [built]
  [17] ./vendor/flot/jquery.flot.stackpercent.js 4.3 kB {0} [built]
  [18] ./vendor/flot/jquery.flot.fillbelow.js 9.92 kB {0} [built]
  [19] ./vendor/flot/jquery.flot.crosshair.js 5.42 kB {0} [built]
  [29] ./legend.ts 10.2 kB {0} [built]
  [31] ./series_overrides_ctrl.ts 5.57 kB {0} [built]
  [32] ./thresholds_form.ts 5.02 kB {0} [built]
  [34] ./template.ts 301 bytes {0} [built]
  [37] ./data_processor.ts 7.12 kB {0} [built]
  [38] ./axes_editor.ts 2.44 kB {0} [built]
    + 24 hidden modules

ERROR in ./module.ts
(303,27): error TS2339: Property 'yaxis' does not exist on type '{ alias: {}; }'.

ERROR in ./graph.ts
(491,29): error TS2362: The left-hand side of an arithmetic operation must be of type 'any', 'number' or an enum type.

ERROR in ./graph.ts
(495,17): error TS2554: Expected 1 arguments, but got 2.

npm verb lifecycle [email protected]~build: unsafe-perm in lifecycle true
npm verb lifecycle [email protected]~build: PATH: /usr/lib/node_modules/npm/bin/node-gyp-bin:/home/mathenning/grafana-multibar-graph-panel/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/local/games:/usr/games:/opt/puppetlabs/bin
npm verb lifecycle [email protected]~build: CWD: /home/mathenning/grafana-multibar-graph-panel
npm sill lifecycle [email protected]~build: Args: [ '-c', 'webpack --config build/webpack.prod.conf.js' ]
npm sill lifecycle [email protected]~build: Returned: code: 2  signal: null
npm info lifecycle [email protected]~build: Failed to exec build script
npm verb stack Error: [email protected] build: `webpack --config build/webpack.prod.conf.js`
npm verb stack Exit status 2

Debian 9.4
npm 3.10.10
node v6.14.2
typescript 2.9.2

label align

label align not working correctly when we have a lot of data

img02

with little data is ok
img03

Better screenshots

Would nice to have clear screenshots showing features and how to use.

Different time interval grouping

image

It leads to missing values in different moments. In screenshot above second metric would have point each second but first one only each 10 seconds.
Need to define how rendering should behave.

Time labels shift

Currently, if you have data grouped by week (for example) - you have time along with time labels shifted (there is 10/16 after 10/8, although it should be 10/15 after 10/8)
Current behaviour:
image
Expected behaviour:
image
@nsayedqt, am I right? Is it the expected behaviour?

Bar graph are not displayed side by side

Hi,

I installed the plugin. But when I plot the graph they are displaying as follows.
Screen Shot 2019-06-13 at 3 41 15 PM

It is result which I have already achieved using default graph plugin. There are no errors. Could you help to resolve it. I have made my queries as follows .
Screen Shot 2019-06-13 at 3 43 12 PM

Hope I have done in a correct way. Please help me to resolve the issue. Thank you.

Pie Chart representation disappears when adding a Multibar Graph Panel

First of all, I saw there was already an existing closed issue #7 describing basically the same problem, but, since the bug has come to me again in a newer Grafana version (v6.5.3) and it has a slightly different behaviour, I have decided to create a new issue.

When I create a Pie Chart in a dashboard, it looks normal:

image

However, when I add a Multibar Graph Panel to the dashboard (it doesn't even have to hold any data, as you can see), it gets bugged like this:

image

Then, removing the Multibar Graph Panel fixes the Pie Chart (but ONLY if I exit Grafana and enter again).
Furthermore (and only if I don't exit and re-enter Grafana to fix it) the Pie Chart gets bugged even if I create it in another dashboard:

image

I hope we are all good during these difficult and busy quarantine times, so any effort to tackle this issue will be highly appreciated. Stay safe.

Timebased bar graph

This is how rendering is now:

image

Time based bar graph, with bars side by side, showing future dates with weekly time intervals ie Monday of every week:

image

side by side option not visible with grafana 5.4.3

multibar version 0.2.4
grafana version 5.4.3

I guess this brilliant panel is not compatible with 5.4.3 as the side by side option is not even displayed.
image

is there any plans to support this grafana 5.4 version?

thanks

Color Picker Broken

image
Color picker broken in graph view and when selecting Color in Series Override

Date in UK format

@jonyrock please can you implement the UK date format (%d%b ie 2 Nov) for the x-axes on the Multibar graph panel?

Plugin seems to crash in Grafana version 6.7.2

Plugin was working fine, but after we updated Grafana from version v6.5.3 to v6.7.2 it just crashed:

image

Going into the plugin configuration tab, it says the following:

image

I'm pretty positive that the update was the reason why it crashed. Maybe you'd like to have a look in that case?

Regards

X-Axis multi bar by series but no multi bars

I want to x-arxis use custome field not time line so I select series as mode

image

But the bar chart only shows single group, I also want to show multi group of org_name:

SELECT
  data_date AS "time",
  sys_name AS metric,
  sum(dev_defect_density) AS value
FROM dev_defect_density
WHERE
  $__timeFilter(data_date)
GROUP BY time, org_name, metric
ORDER BY time

Use series as mode works well for single bar chart

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.