{"action":"created","issue":{"url":"https://api.github.com/repos/DecipherNow/gm-fabric-dashboard/issues/281","repository_url":"https://api.github.com/repos/DecipherNow/gm-fabric-dashboard","labels_url":"https://api.github.com/repos/DecipherNow/gm-fabric-dashboard/issues/281/labels{/name}","comments_url":"https://api.github.com/repos/DecipherNow/gm-fabric-dashboard/issues/281/comments","events_url":"https://api.github.com/repos/DecipherNow/gm-fabric-dashboard/issues/281/events","html_url":"https://github.com/DecipherNow/gm-fabric-dashboard/pull/281","id":250385498,"number":281,"title":"WIP: First crack at creating text color styles from value of expressed data","user":{"login":"shanberg","id":98312,"avatar_url":"https://avatars0.githubusercontent.com/u/98312?v=4","gravatar_id":"","url":"https://api.github.com/users/shanberg","html_url":"https://github.com/shanberg","followers_url":"https://api.github.com/users/shanberg/followers","following_url":"https://api.github.com/users/shanberg/following{/other_user}","gists_url":"https://api.github.com/users/shanberg/gists{/gist_id}","starred_url":"https://api.github.com/users/shanberg/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/shanberg/subscriptions","organizations_url":"https://api.github.com/users/shanberg/orgs","repos_url":"https://api.github.com/users/shanberg/repos","events_url":"https://api.github.com/users/shanberg/events{/privacy}","received_events_url":"https://api.github.com/users/shanberg/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-08-15T17:43:55Z","updated_at":"2017-08-21T13:51:00Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/DecipherNow/gm-fabric-dashboard/pulls/281","html_url":"https://github.com/DecipherNow/gm-fabric-dashboard/pull/281","diff_url":"https://github.com/DecipherNow/gm-fabric-dashboard/pull/281.diff","patch_url":"https://github.com/DecipherNow/gm-fabric-dashboard/pull/281.patch"},"body":"New `.exp-text` class on an element, combined with `data-value-ratio` of 0–100 should change the text color to a point on a gradient corresponding to the value ratio. By default, 0 should be red and 100 should be green, but we can create a gradient of any number of different colors.\r\n\r\nNext step here is to build the features into components where they're useful, such as ReadoutItem.\r\n\r\nExample usage:  `<span className=\"readout-feature-value exp-text\"  \r\ndata-value-ratio=\"{valueAsPercentOf100}\">  \r\n{value}  \r\n</span>`\r\n\r\n![screen shot 2017-08-15 at 4 45 41 pm](https://user-images.githubusercontent.com/98312/29335598-3f464ffa-81d9-11e7-83d9-91fdef0785f6.png)\r\n\r\n![screen shot 2017-08-15 at 4 45 25 pm](https://user-images.githubusercontent.com/98312/29335602-41ad64b8-81d9-11e7-9de5-6f7da8a5cc59.png)\r\n"},"comment":{"url":"https://api.github.com/repos/DecipherNow/gm-fabric-dashboard/issues/comments/323748668","html_url":"https://github.com/DecipherNow/gm-fabric-dashboard/pull/281#issuecomment-323748668","issue_url":"https://api.github.com/repos/DecipherNow/gm-fabric-dashboard/issues/281","id":323748668,"user":{"login":"spmcbride1201","id":8700322,"avatar_url":"https://avatars1.githubusercontent.com/u/8700322?v=4","gravatar_id":"","url":"https://api.github.com/users/spmcbride1201","html_url":"https://github.com/spmcbride1201","followers_url":"https://api.github.com/users/spmcbride1201/followers","following_url":"https://api.github.com/users/spmcbride1201/following{/other_user}","gists_url":"https://api.github.com/users/spmcbride1201/gists{/gist_id}","starred_url":"https://api.github.com/users/spmcbride1201/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/spmcbride1201/subscriptions","organizations_url":"https://api.github.com/users/spmcbride1201/orgs","repos_url":"https://api.github.com/users/spmcbride1201/repos","events_url":"https://api.github.com/users/spmcbride1201/events{/privacy}","received_events_url":"https://api.github.com/users/spmcbride1201/received_events","type":"User","site_admin":false},"created_at":"2017-08-21T13:51:00Z","updated_at":"2017-08-21T13:51:00Z","body":"Sorry to bust your bubble first thing on a Monday, but I suspect that passing data attributes to CSS isn't going to be flexible enough for our purposes. Let's circle back with @tilleryd to discuss.\r\n\r\nImpressions of Current PR: \r\n- For a lot of these attributes (or perhaps all), the relationship between safe, warning, and error type states aren't going to exist on a linear continuum. I would expect breakpoints between discrete states (either in percentage or absolute values). At the start, these would be configurable by the user. Later, once we start implementing integrations with things like GMSense, we quite possibly will be opening up an API that allows GM Sense to dictate these breakpoints based on trend analysis. Thinking about this, this suggests that the CSS should offer more traditional `nominal`, `warning, `error` type selectors (perhaps with appropriate animations between those states if we retain your gradient-approach)\r\n- I think the compiled code for these sorts of functions really embiggens our CSS. Something might have misfired (I only see `data-value-ratio` up to 24, not 100), but assuming that every possible value needs to be precompiled as CSS, we're talking about 101 selectors here. It seems much more sane to me to move some of these CSS selectors into JS-land to DRY this up. E.g., I'd keep `.exp-text`, drop the data-attribute, and add a utility function in JS-land to manipulate `background-position-y` as an in-line style. That would take us down to one selector, and allow us to be more flexible with how we position these gradients (based on breakpoints, non-linear distributions, and all that kinda stuff). \r\n\r\nI have this gut feeling that if we want to really be dynamic and granular with our styles, we're going to have to take a look at some sort of css-in-JS solution, but that's essentially a sidebar discussion at this point.\r\n\r\n"}}
{"actor":{"display_login":"spmcbride1201"}}