bernii / gauge.js

100% native and cool looking JavaScript gauge
MIT License
1.42k stars 391 forks source link

Add gauge flexibility #152

Closed Knight2601 closed 6 years ago

Knight2601 commented 6 years ago

added height option to staticZones this offsets and expands the line style for this segment

added font size override per staticLabels object, optional label override to {label: 'label value', font: 'font string'} or just straight value as existing.

example

    var bigFont = "15px sans-serif";
    var opts = {
      angle: 0.1,
      radiusScale:0.9,
      lineWidth: 0.2,
      pointer: {
        length: 0.6,
        strokeWidth: 0.05,
        color: '#000000'
      },
      staticLabels: {
        font: "10px sans-serif",
        labels: [{label:200, font: bigFont}, 
        {label:750}, 
        {label:1500}, 
        {label:2250}, 
        {label:3000, font: bigFont}],
        fractionDigits: 0
      },
      staticZones: [
        {strokeStyle: "rgb(255,0,0)", min: 0, max: 500, height: 1.4},
        {strokeStyle: "rgb(200,100,0)", min: 500, max: 1000, height: 1.2},
        {strokeStyle: "rgb(150,150,0)", min: 1000, max: 1500, height: 1},
        {strokeStyle: "rgb(100,200,0)", min: 1500, max: 2000, height: 0.8},
        {strokeStyle: "rgb(0,255,0)", min: 2000, max: 3000, height: 0.6},
        {strokeStyle: "rgb(80,80,80)", min: 2470, max: 2530, height: 1.3}        
      ],
      limitMax: false,
      limitMin: false,
      highDpiSupport: true
    };
kplindegaard commented 6 years ago

Awesome! Unfortunately a bit busy these days, but I will have a look as soon as I can.

Sorry for asking perhaps silly questions without a proper look at what you have done yet, but:

  1. Have you considered backwards compatibility? Can't afford to break current staticLabels.
  2. Is it necessary to have node_modules there? Personally I like to have the repos as clean as a possible.
  3. Would you like to become a contributor to gauge.js yourself?
Knight2601 commented 6 years ago

Hi, yes it is backward compatible, it has a simple check to see if the labels object has properties (value.label) otherwise falls through to operate in the old way, theres a simple example on the index page using the same system, it worked for me on all the same browsers in browserstack, so should be good. Also fixed the coffee as there were no calls to super() before init’ing this.

No the node mods aren’t necessary, but being new to coffee, it took me a while to get it running so figure I’d save the next guy the hassle… ☺

And yeah I don’t mind being listed as a contrib, I had to expand the functionality as it was a bit limited as it was – and probably will have a need to do more.

I quite liked producing stuff like this : g1 [cid:image003.jpg@01D3625D.97151C20]

They’re just a little more fun to look at ☺ g2

[cid:image004.jpg@01D3625D.97151C20] Many thanks

Andy

From: Karl-Petter Lindegaard [mailto:notifications@github.com] Sent: Monday, November 20, 2017 5:17 PM To: bernii/gauge.js gauge.js@noreply.github.com Cc: Knight, Andrew Andrew.Knight@informa.com; Author author@noreply.github.com Subject: Re: [bernii/gauge.js] Add gauge flexibility (#152)

Awesome! Unfortunately a bit busy these days, but I will have a look as soon as I can.

Sorry for asking perhaps silly questions without a proper look at what you have done yet, but:

  1. Have you considered backwards compatibility? Can't afford to break current staticLabels.
  2. Is it necessary to have node_modules there? Personally I like to have the repos as clean as a possible.
  3. Would you like to become a contributor to gauge.js yourself?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/bernii/gauge.js/pull/152#issuecomment-345764089, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AET2qiA_8EvSpUFxAzqpD9T42lo7P7sFks5s4bQpgaJpZM4QkMdy.

kplindegaard commented 6 years ago

Hello. Sorry for slow response.

The image links are cool!

I appreciate the idea of making things simpler for developers, but it's just that I don't really fancy adding unnecessary developer dependencies like this. To me one of the nice things about this project is that it is so small from the start.

Here's what I suggest:

Looking forward to get this PR and #153 merged and released :)

Knight2601 commented 6 years ago

might be worth updating the documentation to reflect the addition a little better?

kplindegaard commented 6 years ago

Agree. BTW I have asked Berni to add you as contributor. Update: Collaborator is the correct term.

kplindegaard commented 6 years ago

I just discovered a small artifact I didn't see before. If you open http://bernii.github.io/gauge.js/ you will see that something is painted in the upper left corner while the gauge pointer is moving. Try e.g. to play with the Current Val slider. Don't think it was there before, because my fork (https://kplindegaard.github.io/gauge.js/) does not have it. Perhaps you know what the issue might be?

Knight2601 commented 6 years ago

Yeah, weird, it looks like an erroneous pointer draw when you click between the example thumbnails, I’ll have a look.

From: Karl-Petter Lindegaard [mailto:notifications@github.com] Sent: Monday, November 27, 2017 9:12 PM To: bernii/gauge.js gauge.js@noreply.github.com Cc: Knight, Andrew Andrew.Knight@informa.com; Author author@noreply.github.com Subject: Re: [bernii/gauge.js] Add gauge flexibility (#152)

I just discovered a small artifact I didn't see before. If you open http://bernii.github.io/gauge.js/http://bernii.github.io/gauge.js/ you will see that something is painted in the upper left corner while the gauge pointer is moving. Try e.g. to play with the Current Val slider. Don't think it was there before, because my fork (https://kplindegaard.github.io/gauge.js/https://kplindegaard.github.io/gauge.js/) does not have it. Perhaps you know what the issue might be?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/bernii/gauge.js/pull/152#issuecomment-347329384, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AET2qk4oGFL__yCI3kZQXQVh_YFaz4_bks5s6yWXgaJpZM4QkMdy.

bernii commented 6 years ago

@Knight2601 thanks for your really cool PRs - adding you as collabolator to the repo.

Knight2601 commented 6 years ago

Thank you ☺ great utility though!!

From: Bernard Kobos [mailto:notifications@github.com] Sent: Monday, November 27, 2017 9:23 PM To: bernii/gauge.js gauge.js@noreply.github.com Cc: Knight, Andrew Andrew.Knight@informa.com; Mention mention@noreply.github.com Subject: Re: [bernii/gauge.js] Add gauge flexibility (#152)

@Knight2601https://github.com/knight2601 thanks for your really cool PRs - adding you as collabolator to the repo.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/bernii/gauge.js/pull/152#issuecomment-347332431, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AET2qr0DyfYkzSzg0Hco8WOisOqqbd7Sks5s6ygjgaJpZM4QkMdy.

Knight2601 commented 6 years ago

Ok all fixed

See #153 (version incremented too) + live ticks example

From: Karl-Petter Lindegaard [mailto:notifications@github.com] Sent: Monday, November 27, 2017 9:12 PM To: bernii/gauge.js gauge.js@noreply.github.com Cc: Knight, Andrew Andrew.Knight@informa.com; Author author@noreply.github.com Subject: Re: [bernii/gauge.js] Add gauge flexibility (#152)

I just discovered a small artifact I didn't see before. If you open http://bernii.github.io/gauge.js/http://bernii.github.io/gauge.js/ you will see that something is painted in the upper left corner while the gauge pointer is moving. Try e.g. to play with the Current Val slider. Don't think it was there before, because my fork (https://kplindegaard.github.io/gauge.js/https://kplindegaard.github.io/gauge.js/) does not have it. Perhaps you know what the issue might be?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/bernii/gauge.js/pull/152#issuecomment-347329384, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AET2qk4oGFL__yCI3kZQXQVh_YFaz4_bks5s6yWXgaJpZM4QkMdy.

Knight2601 commented 6 years ago

Fixed and updated pr#153 with live examples of ticks on all Gauge types. Incremented version to 1.3.6 to add in scalable sections and ticks.

Tried resolving the conflicts but it says I don’t have write access to the repo – so can’t.

If you just select my changes in each file, it’ll be good.

Thanks

From: Karl-Petter Lindegaard [mailto:notifications@github.com] Sent: Monday, November 27, 2017 9:12 PM To: bernii/gauge.js gauge.js@noreply.github.com Cc: Knight, Andrew Andrew.Knight@informa.com; Author author@noreply.github.com Subject: Re: [bernii/gauge.js] Add gauge flexibility (#152)

I just discovered a small artifact I didn't see before. If you open http://bernii.github.io/gauge.js/http://bernii.github.io/gauge.js/ you will see that something is painted in the upper left corner while the gauge pointer is moving. Try e.g. to play with the Current Val slider. Don't think it was there before, because my fork (https://kplindegaard.github.io/gauge.js/https://kplindegaard.github.io/gauge.js/) does not have it. Perhaps you know what the issue might be?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/bernii/gauge.js/pull/152#issuecomment-347329384, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AET2qk4oGFL__yCI3kZQXQVh_YFaz4_bks5s6yWXgaJpZM4QkMdy.

Knight2601 commented 6 years ago

Yay, ok so I could resolve conflicts, the whole shebang is sitting on PR #153, please review proposed changes.

From: Karl-Petter Lindegaard [mailto:notifications@github.com] Sent: Monday, November 27, 2017 9:12 PM To: bernii/gauge.js gauge.js@noreply.github.com Cc: Knight, Andrew Andrew.Knight@informa.com; Author author@noreply.github.com Subject: Re: [bernii/gauge.js] Add gauge flexibility (#152)

I just discovered a small artifact I didn't see before. If you open http://bernii.github.io/gauge.js/http://bernii.github.io/gauge.js/ you will see that something is painted in the upper left corner while the gauge pointer is moving. Try e.g. to play with the Current Val slider. Don't think it was there before, because my fork (https://kplindegaard.github.io/gauge.js/https://kplindegaard.github.io/gauge.js/) does not have it. Perhaps you know what the issue might be?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/bernii/gauge.js/pull/152#issuecomment-347329384, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AET2qk4oGFL__yCI3kZQXQVh_YFaz4_bks5s6yWXgaJpZM4QkMdy.