Log in to start a topic

Require Hover and Active on wj-linear-gauge bar

Posted by: ksm.ac.in on 20 August 2020, 10:34 am EST

  • ksm.ac.in

    • Post Options:
    • Link
      Copy

    Posted 20 August 2020, 10:34 am EST - Updated 3 October 2022, 3:42 pm EST

    Hello Team GrapeCity,

    we have requirement to make bar in Hover state when mouse come over & Active state when click on it.

    Please suggest how to achieve following to different requirement in wj-linear-gauge bar in Angular.

    #1 Bars - Hove/click: on this state, background shadow/outlinecolor layer will appear on bar.

    See the attache image of without hover & with hover for more clarity.



    #2 Bars- Active state: On this state, background shadow/outline color layer will appear on bar when user click on the check box.

    See the attache image of without hover & with hover for more clarity.

    1109×494 38.1 KB

    #3 Need this check box also in bottom of every bar.

    Please suggest best possible solution and way .

    Thanks in advance.

  • ashwin.saxena

    Posted 21 August 2020, 2:42 am EST

    Hi,

    Regarding #1 and #2, we can easily achieve this by using CSS. But there will be an issue. Since the gauges have an empty part, which was hidden using CSS, so the border will be displayed over the whole gauge (the empty part also).

    Regarding #3, simply add a checkbox inside the gauge-container element and handle a click event to update the state of the gauge so that the border is added.

    Please refer to the sample link below for reference:

    https://stackblitz.com/edit/js-t6gfy3

    In the above sample, I have added a border for the active and hover state. But, you can customize it as per your requirements.

    Regards,

    Ashwin

  • ksm.ac.in

    Posted 24 August 2020, 10:33 pm EST

    Hello Ashwin ,

    #1 Can you provide this in Angular , Currently it is in JS

    https://stackblitz.com/edit/js-t6gfy3

    #2 Is any way we can have this hover and active state as per bar height only as currently it taking full height .

    Current requirement is only bar size a per value , but in example its changes height when we click on it example same varying height as per low - medium - high -very high. we don’t require this.

    It will be very helpful.

  • ashwin.saxena

    Posted 25 August 2020, 5:47 am EST

    Hi,

    Please refer to the sample in Angular:

    https://stackblitz.com/edit/angular-awazky

    I have updated some things from the previous sample according to your new requirements.

    Regarding #2, we can achieve this with a little hack. Since you will not be changing the values of the gauge, you can set the max of the gauge as its value. Doing this will make the height of each gauge the same and will remove the extra empty part. Now, we will need to calculate the height of each gauge manually using the max-height for the longest gauge (it can be any arbitrary height according to your webpage. In the sample, I have used 200) and the max value of each of the gauge (in this case, 100).

    Then we can calculate the height per 1 value of gauge and using the value, set the height dynamically.

    In app.component.ts:

    // the max height of all the gauges
readonly height = 200;
// the max vlaue of all the gauges
readonly maxValue = 100;
// height per value
readonly heightPerValue = this.height/this.maxValue;

    In app.component.html

    <wj-linear-gauge #gauge [style.height]="heightPerValue * val + 'px'"....></wj-linear-gauge>

    Regarding value being updated on click, simply set the isReadOnly property of the LinearGauge to true and the value will not be updated.

    ~regards

  • ksm.ac.in

    Posted 26 August 2020, 9:42 am EST - Updated 3 October 2022, 3:43 pm EST

    Hello Ashwin, suggestion & solution are good.

    #1 we require same light color hover effect in the background as you can see in the above starting images.

    #2 Require click event on checkbox clicked(checked) , so when user click on one or many checkbox bar, we will get which bar is clicked name (high, very high , medium etc) with its value.

    (added change event on input tag., able to get value but not name )

    #3 can we make it fixed in this order Very High - High - Medium - Low - very Low, currently it changing on basis range . want it should be show in this order with its color.

    #4

    Can give any idea on providing hover or active state to closest class by something similer like this.

     document.querySelectorAll(".gauge-container").forEach((e: Element) => {
        // get the control element
        var ctl = wjcCore.closestClass(e, "wj-linear-gauge");
        // get the control
        var control = wjcCore.Control.getControl(ctl);
        // add class on the child for hover / active state
        ctl.parentNode.addClass(ctl);
      
      });

    See this attached image of code in html

    1090×385 38.8 KB

    is any way through this line of code if we only achieve hover / active state as per bar height only.

    your suggestion/solution valuable.

  • ashwin.saxena

    Posted 27 August 2020, 2:17 am EST

    Hi,

    The first requirement can be achieved by using CSS:

    /* add a border around the gauge */
.gauge-container .shadow {
  border: 2px solid white;
  border-radius: 7px;
}

/* display only when hover or active class is applied */
.gauge-container .shadow:hover, .gauge-container .shadow.active {
  border-color: #ecdede;
  background: #fef3f4;
}

    Regarding #2, to get the name, you will need to iterate over each range and get the appropriate range.

    Regarding #3, the gauges are already in this order. Can you let me know what issue are you facing with this?

    Regarding #4, sorry but I was unable to understand your requirement. Can you explain it more?

    Please refer to the sample link below for #1 and #2 requirement:

    https://stackblitz.com/edit/angular-an5kny

    ~regards

  • ksm.ac.in

    Posted 28 August 2020, 1:47 am EST - Updated 3 October 2022, 3:44 pm EST

    Hello Ashwin,

    first Thanks for the suggestion & solution.

    regarding #1

    we require same bar color border as well as background with light color of same bar on hover/active state . Please see this attached image having hover background same color, it will give more understanding.

    916×347 13.1 KB

    As hover is working fine in given solution, but it is same color for all bar. In our case we need same bar color hover/active sate on each one example for yellow , it should be yellow color hover effect and for red bar , it should be red color hover effect.

    For background hover /active color state we require , you get idea from this example

    https://www.screencast.com/t/syN0ut2b7gUw

    Regarding #3

    please refer this video link i have attached

    https://www.screencast.com/t/N67CY8iHp

    Here in this video you’ll see,

    Whenever the of gaugeValues changes , same/similer gauge bar created if it comes under min. max range. Thats obvious as per its behaviour/logic.

    But can we maintain the same order or we can fix all this bar like Very High - High - Medium - Low - very Low.

    Currently,Bar color and name is varying as per ranges , we don’t require this . Value comes in whatever range, Bar name (Very High - High - Medium - Low - very Low. ) and color should be fixed and same and static , only value in it will change.

    For now Discarding #4 requirement.

    Thanks a ton for your efforts & quick response. It helps alot.

  • ashwin.saxena

    Posted 28 August 2020, 2:09 am EST

    Hi,

    Regarding #1, you can achieve this by setting the borderColor and the background by using the range in the HTML template only. Then use the CSS to hide the border color and background and only display them if the active CSS class is applied. Refer to the updated sample below:

    https://stackblitz.com/edit/angular-dtpxaw

    Regarding #3, can you let me know what exactly is happening in the video when the gauges flicker?

    ~regards

  • ksm.ac.in

    Posted 28 August 2020, 7:18 am EST - Updated 3 October 2022, 3:44 pm EST

    Hi Ashwin, thanks for #1

    About #3

    forexample

    when guage value of 2nd index will change is 80 to 65 like in this e.g

    gaugeValues = [65, 80, 100, 50, 25];

    882×529 20.1 KB

    To ```

    gaugeValues = [65, 65, 100, 50, 25];

    
[img]https://gccontent.blob.core.windows.net/forum-uploads/file-02a8d47d-32b7-4f57-bb82-c9bda3753cea.JPG[/img]


Currently, GUage bar name change from [b]Very High[/b] to [b]High[/b] and color change to orange to Red.


our requirement is, it should always in same order like Very High - High - Medium - Low - very Low and color should be fixed.
No change in order , no change in color .
only value number change only.

same convey in video.

Hope its give some clarity about our requirement

Thanks

  • ashwin.saxena

    Posted 31 August 2020, 1:05 am EST

    Hi,

    We can achieve this by making some changes. In the ranges variable, set the value of min and max to 0 and 100 respectively for all the ranges. Then, in the initGauge method, set a single range instead of the whole array as the ranges property. Doing this will not change the color and name and will only change the value of the gauge.

    Now, you will need to update the getRange method to return the only range of the Gauge. And, you will also need to add a new method getRangeByIndex which the returns the range according to the index of the gauge. You will use this method to return the appropriate range for the border and background color.

    Please refer to the updated sample link:

    https://stackblitz.com/edit/angular-blddea

    ~regards

  • ksm.ac.in

    Posted 31 August 2020, 11:52 am EST

    Thanks Ashwin, for your continous support.

    Its very helpful .

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels

  • © 2023 MESCIUS USA, Inc. All Rights Reserved.  ·  1.800.858.2739

    All product and company names herein may be trademarks of their respective owners.