dotted line graph

[susanev]

@susanev commented on Sun Mar 22 2020

overview

styles for line graph; base color issue

design details

Defult state

Hover state

The tooltip style should be the same with what @tarablack01 is working on for #18

Selected state

type

graph labels

use type ramp body extra-small
font-weight: 400; font-size: 10px; line-height: 12px; letter-spacing: 0.5px;

dots

8px by 8px
--eggplant-dark-2:

selected dot has a 4px by 4px var(--white) dot in the center

graph borders

border: 1px solid --eggplant-light-1;

InVision mockup to inspect for more details

(sign in to InVision required)
Default state: https://chef.invisionapp.com/d/main#/console/19726898/412590750/inspect
Hover state: https://chef.invisionapp.com/d/main#/console/19726898/414014560/inspect
Selected state: https://chef.invisionapp.com/d/main#/console/19726898/412973796/inspect

Video demo

https://drive.google.com/open?id=1Yo7k4JJ8qTQiOYwvNeXKoQ9cTCw8rFbj

open questions

• do we want to use a library for this?
• some colors are used in this that arent defined in the base colors

---

@apriofrost commented on Thu Mar 26 2020

I removed the following section since we are not going to build out the customizable threshold feature any time soon:

dashed lines

border: 1px dashed #FEA701;
border: 1px dashed var(--crimson);

---

@SEAjamieD commented on Wed Apr 15 2020

I'm gonna style this up incase we have other additions and just add a different name to it so that this isn't something we're waiting on

---

@apriofrost commented on Thu Apr 16 2020

hi @SEAjamieD , I updated the issue description with the latest style and more details around the hover and selected state. Let me know what you think. Thanks!

---

@apriofrost commented on Fri Apr 17 2020

hi @SEAjamieD , after today's UX team design critique meeting, I updated the hover and selected state style a bit more. I also attached a video demo showing how the interaction looks like. Let me know what you think about them. Thank you!

---

@SEAjamieD commented on Mon Apr 20 2020

@apriofrost - this is looking so good! Can't wait to finish this build!