Hello,
The project I contribute, Hawkular provides a way to display events that happened in a timeline (e.g. deployments over time). I prototyped this chart and applied patternfly styles for our component. I would really appreciate feedback from you guys. Interaction: - User can navigate both using the top buttons (zoom in, zoom out, see before, see after) or selecting a preset time (e.g. last week) in the dropdown. - Tooltip is presented when hovering over some point in the vertical line where the dot is. Here we have the case of multiple events can happen in the same time. In this case, would it make sense to display the tooltip only by hovering over the dot itself? (see 1 May, for example). - We could use different colors for different type of events. Reflecting on that now, it would probably make sense to add a legend below. Wait to hear from you. Thanks, Gabriel > On May 23, 2016, at 10:11 AM, Alissa Bonas <[email protected] > <mailto:[email protected]>> wrote: > > np. if you also need me on the call for inputs, let me know > > On Mon, May 23, 2016 at 3:54 PM, mike thompson <[email protected] > <mailto:[email protected]>> wrote: > Hi All, > > Gabriel asked if we could change it to today (Monday). We will send something > out afterwards. > > > — Mike > > >> On 22 May 2016, at 09:32, Alissa Bonas <[email protected] >> <mailto:[email protected]>> wrote: >> >> Did you meet already / any outcomes and conclusions yet? >> >> On Thu, May 19, 2016 at 6:20 PM, mike thompson <[email protected] >> <mailto:[email protected]>> wrote: >> >>> On 19 May 2016, at 07:51, Gabriel Cardoso <[email protected] >>> <mailto:[email protected]>> wrote: >>> >>> Hi Mike, >>> >>> Since I just saw ManageIQ briefly, I’m a bit out of context here. >>> Could we schedule a meeting so you could give me a bit more context and we >>> could clarify the issues? >>> >>> Tomorrow morning would be great if you are available. >> >> Sure. We can PM to decide on a time. >> >> >>> >>> Thanks! >>> >>>> On May 18, 2016, at 3:11 PM, mike thompson <[email protected] >>>> <mailto:[email protected]>> wrote: >>>> >>>> Hi Gabriel, >>>> >>>> So we have this new Proof of concept for an Event Timeline. Here is the >>>> original MiQ screen: >>>> >>>> >>>> <miq_alerts.jpeg> >>>> >>>> And here is the replacement control (PoC): >>>> >>>> <Timeline_Chart_Example.jpg> >>>> >>>> Currently: >>>> This can be combined with a context chart to zoom/in out on a larger time >>>> range visually. >>>> Hovers work (easy to style differently). >>>> Click and drag an area to zoom in on a certain group of events. >>>> Possible Next Steps: >>>> Done. Offsets for event so their labels won’t overlap (we currently have 5 >>>> rows, each event should be on the next row so the labels won’t most likely >>>> overlap unless they are too close anyway - which we probably need to give >>>> a labels: on/off toggle like what is on topology. Question is 5 rows good >>>> enough or more/less? >>>> You can add icons to fill events (sizing could be an issue, as icons would >>>> need to be small). Even different icons for different events. >>>> If a start/end time range is supplied then use that otherwise default to >>>> the data values that are given (and provide a slight buffer at start/end >>>> so those values look better and not ‘up against the edges of the >>>> left/right sides). >>>> Add Forward/Reverse in time buttons to easily scroll through history >>>> quickly >>>> Possibly add a double-click handler for when you click on an event so you >>>> can goto another page or whatever. >>>> Perhaps make a drop-line from the event up to the time axis (and possibly >>>> add a very small [square or triangle; probably an inverted triangle to >>>> look like an arrow] marker on the axis). This will also make the x-axis >>>> busier so it may not be a good idea (UxD call) >>>> Obviously, we can change any of the single-click/double-click/hover to >>>> whatever UxD wants. >>>> Event points color can be changed to show different types of events (or >>>> priorities). >>>> All colors are subject to UxD advice. >>>> Of course, all of this time line stuff can be overlaid on any other type >>>> of hawkular-chart. Like events overlaid with metrics charts or events >>>> overlaid with availability chart. >>>> >>>> The stylistic stuff can worked out with UxD, but hopefully it shows the >>>> real capability and where we can go with it. >>>> >>>> Issues: >>>> Should we hover or click on an event to make the hover dialog come up? >>>> Hover has the advantage of quickly moving from point to point but has the >>>> disadvantage of no-clickable links inside of it (because its a hover you >>>> can’t click on anything). And if it is a click instead of a hover how >>>> should the dialog box be closed? >>>> Should double-click be used to take you to the Resource? >>>> How many rows of events should there be? >>>> Legend? >>>> Should we do anything visually to show that multiple events came in at the >>>> same time. Possibly a configurable threshold of time (like 1 minute). For >>>> example, all events that are within a minute of each other have a line >>>> connecting the circles together. Or possibly a highlighted square box >>>> (like the pink one in hawkular-charts for metrics exceeding thresholds). >>>> Axis at top or bottom? >>>> How should color or icons be used? >>>> Should labels be used next to the Event? >>>> >>>> >>> >>> Gabriel Cardoso >>> UX designer @ Red Hat >>> >>> >>> >> >> > > Gabriel Cardoso UX designer @ Red Hat Gabriel Cardoso UX designer @ Red Hat
_______________________________________________ Patternfly mailing list [email protected] https://www.redhat.com/mailman/listinfo/patternfly
