Fix Cursor-Point position on ma-serial-chart

Reply to Fix Cursor-Point position on ma-serial-chart on Mon, 10 Sep 2018 20:26:12 GMT

MattFox — Mon, 10 Sep 2018 20:26:12 GMT

My advice is to just keep it simple. If you know what you want to achieve, work back from that and break it down.
All else fails, you know we're all here to assist.

Fox

Reply to Fix Cursor-Point position on ma-serial-chart on Mon, 10 Sep 2018 20:24:36 GMT

mrlucretius — Mon, 10 Sep 2018 20:24:36 GMT

I am sure some of the tags / attributes are not needed here and there, if anyone is willing to clean this up a bit or describe the thought process I would appreciate it.

Or, do nothing, because you know what they say, if it is not broken, don't fix it...

Thanks for all the help. Will continue to RTFM...

-Alex

Reply to Fix Cursor-Point position on ma-serial-chart on Mon, 10 Sep 2018 20:16:37 GMT

MattFox — Mon, 10 Sep 2018 20:16:37 GMT

Bravo! Well done, really good to see you were able to use the bones provided and fix your own layout.

Reply to Fix Cursor-Point position on ma-serial-chart on Mon, 10 Sep 2018 20:13:40 GMT

mrlucretius — Mon, 10 Sep 2018 20:13:40 GMT

Ok,

Here is the latest flex page.

-Alex


    

	
        	
	
        	
        
            St. Clair Walker Middle  - Total kWh Generated
            
            
        	
    	
        
        	
        	
        
            St. Clair Walker - Realtime kW Generation
            
            
            
    	
	
            
    
        	
	
        	
        	
        	
        	    St. Clair Walker Middle Annual Offsets:
        	
        	
        	
                Miles Driven in a Car:
                
            
        
            
                Single House Energy Usage:
                
            
            
            
                Acres of U.S. Forest:
                
            
            
            
                Metric Tons of CO2:
                
            
            
        
        
        
    	
        	
        
        	
                	
                      
                
                	
        	        
        	    
        	
        
    	
    	
    	
	
        	
	
        	
        
            Elementary School - Total kWh Generated
            
            
    	
	    
        
    	
        	
        
            Elementary School -  Realtime kW Generation
            
            
    	
        
    	
    
    
        	
    
            

        	
        	    Elementary School Annual Offsets:
        	
        	
        	
                Miles Driven in a Car:
                
            
        
            
                Single House Energy Usage:
                
            
            
            
                Acres of U.S. Forest:
                
            
            
            
                Metric Tons of CO2:

Reply to Fix Cursor-Point position on ma-serial-chart on Fri, 07 Sep 2018 20:12:33 GMT

MattFox — Fri, 07 Sep 2018 20:12:33 GMT

Nicely done, looking forward to seeing the finished product!
Fox

Reply to Fix Cursor-Point position on ma-serial-chart on Fri, 07 Sep 2018 20:05:58 GMT

mrlucretius — Fri, 07 Sep 2018 20:05:58 GMT

Hey,

Thanks guys. The template was close...

I added the layout-xs="column" to each of the four row tags and now it collapses like so:

I will work on the Grid stuff, and see how far I get. Thanks for the pointers.

Edit: I was able to set a max width like so on the root div style:

-Alex

Reply to Fix Cursor-Point position on ma-serial-chart on Fri, 07 Sep 2018 18:01:54 GMT

MattFox — Fri, 07 Sep 2018 18:01:54 GMT

Thanks Craig. Yes the layout is already mobile ready for you. Any other issues, just shout.
Fox

Reply to Fix Cursor-Point position on ma-serial-chart on Fri, 07 Sep 2018 16:49:34 GMT

CraigWeb — Fri, 07 Sep 2018 16:49:34 GMT

If I look at Mats html it should already be mobile friendly.

means that the div is a row but if the window is extra small then it will be a column.
As for what you want to accomplish with the stats box go through this page : https://material.angularjs.org/latest/layout/alignment give it a shot and if you don't come right paste your code and ask for help. Don't be afraid to copy code from the angular material site and play with it until it does what you want.

Reply to Fix Cursor-Point position on ma-serial-chart on Fri, 07 Sep 2018 15:27:14 GMT

mrlucretius — Fri, 07 Sep 2018 15:27:14 GMT

Hi,

Thanks so much for your help. Now it is behaving about how I would expect.

Can you show me how to implement Grid on the Stats "box". I would like the labels to be right aligned to a column border in a 3x4 (wxh) grid, left most column, and then the values to be right aligned, center column, and then the right hand column is just for padding. Approximately like so:

The next step is to make it phone happy. How can I make the two columns collapse to one column for phone viewing?

Ie, Chart2 lands in a new row under Chart1, then Stats1, Gauges1, Chart3, Chart4, Stats2, Gauges2 all stacked up.

I really appreciate the assistance, and you are now owed a token for a pitcher of beer.

Thanks,
Alex

Reply to Fix Cursor-Point position on ma-serial-chart on Fri, 07 Sep 2018 02:28:06 GMT

MattFox — Fri, 07 Sep 2018 02:28:06 GMT

@mrlucretius said in Fix Cursor-Point position on ma-serial-chart:

Is this your favorite Flex reference: https://material.angularjs.org/latest/layout/introduction ??

No I prefer using CSS and a mix of block, inline-block, and grid...
However Flex is good for ensuring a fit to page view.

I've made some tiny amendments like a missing flex parameter for the first row of charts. I've also made the charts fit the full width of the container otherwise everything looks lop sided. Same with your text. Have also left-aligned your text, can always make it right again if needs be,
If you are able to provide more instruction as to how you want to it to look I can likely be of more assistance.


    

	
        	
	
        	
        
            St. Clair Walker Middle  - Total kWh Generated
            
            
        	
    	
        
        	
        	
        
            St. Clair Walker - Realtime kW Generation
            
            
            
    	
	
            
    
        	
	
        	
            Number of Miles Driven in a Car Annually Offset:
            
        
            Number of Annual House Energy Use Offset:
            
        	
            Annual Acres of U.S. Forest Offset:
            
        	
            Annual Metric Tons of CO2 Offset:
            
        
        
        
    	
        	
        
        	
                	
                      
                
                	
        	        
        	    
        	
        
    	
    	
    	
	
        	
	
        	
        
            Elementary School - Total kWh Generated
            
            
    	
	    
        
    	
        	
        
            Elementary School -  Realtime kW Generation
            
            
    	
        
    	
    
    
        	
    
            
            
            Number of Miles Driven in a Car Annually Offset:
            
        	
            Number of Annual House Energy Use Offset:
            
        	
            Annual Acres of U.S. Forest Offset:
            
        	
            Annual Metric Tons of CO2 Offset:

Fox

Reply to Fix Cursor-Point position on ma-serial-chart on Thu, 06 Sep 2018 20:06:50 GMT

mrlucretius — Thu, 06 Sep 2018 20:06:50 GMT

Hello,

I implemented your markup. Still needs some work. I will see if I can sort it out, however, if you see any obvious omissions or errors I appreciate your help and feedback.

Is this your favorite Flex reference: https://material.angularjs.org/latest/layout/introduction ??

Thanks,
Alex

Edit: I have been updating the source as I have fiddled it.


    

	
        	
	
        	
        
            St. Clair Walker Middle  - Total kWh Generated
            
            
        	
    	
        
        	
        	
        
            St. Clair Walker - Realtime kW Generation
            
            
            
    	
	
            
    
        	
	
        	
            Number of Miles Driven in a Car Annually Offset:
            
        
            Number of Annual House Energy Use Offset:
            
        	
            Annual Acres of U.S. Forest Offset:
            
        	
            Annual Metric Tons of CO2 Offset:
            
        
        
        
    	
        	
        
        	
                	
                      
                
                	
        	        
        	    
        	
        
    	
    	
    	
	
        	
	
        	
        
            Elementary School - Total kWh Generated
            
            
    	
	    
        
    	
        	
        
            Elementary School -  Realtime kW Generation
            
            
    	
        
    	
    
    
        	
    
            
            
            Number of Miles Driven in a Car Annually Offset:
            
        	
            Number of Annual House Energy Use Offset:
            
        	
            Annual Acres of U.S. Forest Offset:
            
        	
            Annual Metric Tons of CO2 Offset:

Reply to Fix Cursor-Point position on ma-serial-chart on Wed, 05 Sep 2018 21:08:40 GMT

MattFox — Wed, 05 Sep 2018 21:08:40 GMT

Here's your markup. Be sure to remove the position:absolute and top and left values in your style attribute. Can style further once you've put them all in the right place. Am a little tight for time so I can't be of help more today.


    
        
            Chart 1
      
    
    
     
            Chart 2
        
    

    

    
             Stats 1
        
    
    
       
            Gauge 1 & 2
       
    



    
   
           Chart 3
       
    
    
       
            Chart 4
       
    


   
    
   
           Stats 2
       
    
    
       
            Gauges 3 & 4

Reply to Fix Cursor-Point position on ma-serial-chart on Wed, 05 Sep 2018 14:17:34 GMT

mrlucretius — Wed, 05 Sep 2018 14:17:34 GMT

Hey,

Thanks for looking at this.

I want to implement Flex for phone / other happiness.

This is a (quick and dirty) last minute prototype on a solar power plant.

While being the first, it will not be the last. There may be hundreds in a few years.

As I learn about mango / angular, I am simultaneously deciding the template and tech for future installs.

I have various web / sysadmin experience but angular / mango is new to me...

So I appreciate any guidance and support you guys may have.

Thanks,
Alex

Reply to Fix Cursor-Point position on ma-serial-chart on Wed, 05 Sep 2018 03:38:30 GMT

CraigWeb — Wed, 05 Sep 2018 03:38:30 GMT

@mrlucretius I was able to reproduce the offset on my pc. The more I change the window size the bigger the offset. I believe it has something to do with the auto-scale. if I change your main div to

The offset goes away but the page doesn't scale. I think implementing flex might be a solution. Will see if I can modify the code for your today.

Reply to Fix Cursor-Point position on ma-serial-chart on Wed, 05 Sep 2018 01:41:19 GMT

MattFox — Wed, 05 Sep 2018 01:41:19 GMT

Ah apologies, you have too.
That was definitely an oversight on my part. However I still recommend you keep things clean and clearly labelled.
I can't honestly see why you would be having an offset. The values would have to be out timestamp wise from your rollup.
Start with having statically defined rollups rather than using the datebar for a start.

{{dateBar.rollupIntervals + ' ' + dateBar.rollupIntervalPeriod}} --> "1 HOURS"

As for flex, what is it you want to achieve?
Make the graphs full width?

Reply to Fix Cursor-Point position on ma-serial-chart on Wed, 05 Sep 2018 01:28:46 GMT

mrlucretius — Wed, 05 Sep 2018 01:28:46 GMT

Hi,

Thanks for the feedback.

I see the error and removed the ng-model tag..

I don't see reused variable names. They are close but different (kW vs kWh):

Also the id for the ma-point-values is nearly the same, but unique letter at end.

I am a total beginner here so I appreciate any help.

Interestingly, the offset seems to change with chrome zoom. On my laptop, I set zoom to 100%, load page, cursor is offset to left of pointer. As I zoom out (less than 100%) the cursor and pointer get closer. At 50% the red cursor line jumps to the right of the pointer (when it was to left).

I need to get flex implemented here for other obvious reasons... Maybe it will fix itself?

Any thoughts, suggestions appreciated.

Thanks,
Alex

Reply to Fix Cursor-Point position on ma-serial-chart on Tue, 04 Sep 2018 21:18:42 GMT

MattFox — Tue, 04 Sep 2018 21:18:42 GMT

The answer is in your error:
ngModel="myDecimal | number:0" is non assignable

secondly, ma-point-value does not support ng-Model, refer to the components api to see what it supports.
[your mango address]/ui/docs/ng-mango/ma-point-value

Start with removing all error related issues first.
Thirdly:

    
    
        
    
    
    
    

    St. Clair Walker Middle  - Total kWh Generated

Why are you using points and values with the same variable name for different point XIDs? You'll only end up overwriting the same values in the same scope!

Make sure all point names and values are unique to avoid both confusion in the markup and for angular itself.
It is quite possible you have variables overwriting each other in areas meaning your data will never reflect the actual points you want to show...

Reply to Fix Cursor-Point position on ma-serial-chart on Tue, 04 Sep 2018 16:47:09 GMT

mrlucretius — Tue, 04 Sep 2018 16:47:09 GMT

Hi,

Here is page source.

I notice that on the left side of a chart, the cursor and red marker line overlap. As you move right, the separation increases.

I tried the above code but not sure what you want me to look for...

There is an error, I am not familiar at the moment with debugging this stuff but will have a go at it.

I created a demo user, if you want to see the live site in action I can send you the password.

Thanks,
Alex


 

    

    
    
    
    
    
    
    
        
    
    
    
    

    St. Clair Walker Middle  - Total kWh Generated
    
    

    St. Clair Walker - Realtime kW Generation
    
    
    
    
    
    Number of Miles Driven in a Car Annually Offset:
    

    Number of Annual House Energy Use Offset:
    
    Annual Acres of U.S. Forest Offset:
    
    Annual Metric Tons of CO2 Offset:

    
    
    
    
    
        
    
    
    
    
    
    
    Elementary School - Total kWh Generated
    
    
    
    
    Elementary School -  Realtime kW Generation
    
    
    
    
    
    Number of Miles Driven in a Car Annually Offset:
    
    Number of Annual House Energy Use Offset:
    
    Annual Acres of U.S. Forest Offset:
    
    Annual Metric Tons of CO2 Offset:

Reply to Fix Cursor-Point position on ma-serial-chart on Thu, 30 Aug 2018 15:10:04 GMT

CraigWeb — Thu, 30 Aug 2018 15:10:04 GMT

Hi @mrlucretius

I used your code and put in my own data point XID and it worked perfectly. with out seeing the rest of your code it is hard to do any more. could you share the rest of the page code.

Could you also check if there are any errors on your chrome dev tools console.

Also just a shot in the dark here. paste this code into your page and have a look what the actual data you giving the chart is:


                
                    
                        
                            values

                        
                    
                
                
                  
                            
                            
                                 {{v.timestamp | maMoment:'format':'ll LTS'}} :
                                 
                                 {{v.value}}