List widget's (ie. buzzwords) with large values

[hhanzo1]

I am sending large values to the List widget and wondering if the values can display in K's.

curl -d '{ "auth_token":"pass", "items": [{"label": "Allowed","value": "200000"} , {"label": "Denied","value": "5"}] }' http://lab:3030/widgets/test

[davefp]

Create a copy of the list widget (or just edit the original) and have it apply the shortenedNumber filter defined here: https://github.com/Shopify/dashing/blob/master/javascripts/dashing.coffee#L16

This is what the number widget does do display 10K instead of 10000. See it in use here: https://github.com/Shopify/dashing/blob/master/templates/project/widgets/number/number.html#L3

Your new list.html should look something like this:

<h1 class="title" data-bind="title"></h1>

<ol>
  <li data-foreach-item="items">
    <span class="label" data-bind="item.label"></span>
    <span class="value" data-bind="item.value | shortenedNumber"></span>
  </li>
</ol>

<ul class="list-nostyle">
  <li data-foreach-item="items">
    <span class="label" data-bind="item.label"></span>
    <span class="value" data-bind="item.value | shortenedNumber"></span>
  </li>
</ul>

<p class="more-info" data-bind="moreinfo"></p>
<p class="updated-at" data-bind="updatedAtMessage"></p>

[hhanzo1]

Thanks. I am not familiar on how to activate a duplicated widget. I made a copy of the widget directory from list to listK.

In the .erb file I added:

  <li data-row="1" data-col="1" data-sizex="2" data-sizey="2">
     <div data-id="status" data-view="ListK" data-unordered="true" data-title="Status" data-moreinfo="Status Report"></div>
  </li>

This is a great project and thanks for the support.

[davefp]

You'll also need to rename all the files in the new widget's directory. As long as your directory structure looks like this, you should be good to go:

| widgets
|\ list
| | list.html
| | list.scss
| | list.coffee
|\ listK
| | listK.html
| | listK.scss
| | listK.coffee

[hhanzo1]

I made the changes by making a copy of the list widget directory to a new directory called listK, then renaming all the files within it (as above), activated the new widget by using `data-view="ListK" in the .erb file, then restarted dashing but no luck. Widget shows a blank space..

I edited the original list widget's list.html and applied the shortenedNumber filter, and it works.

I guess my issue is not able to duplicate or activate a new widget.

Thanks.

[davefp]

You also need to edit the first line of listK.coffee to read

class Dashing.ListK extends Dashing.Widget

I forgot to mention that, sorry.

[hhanzo1]

Apologies, had to reopen. No luck.

I noticed in the console it's putting an underscore even though, there was no underscore in the edits I made to the widget.

aaa.bbb.ccc.ddd - - [14/Aug/2013 15:58:11] "GET /views/list.html HTTP/1.1" 200 493 0.0009
aaa.bbb.ccc.ddd - - [14/Aug/2013 15:58:11] "GET /views/list_k.html HTTP/1.1" 200 - 0.0010

Thanks.

[davefp]

I think this is happening because Dashing is taking the classname ListK and converting it to an underscored version to try and find the files. The convention is that file names are lower case with underscores before each previously capitalized letter. ListK becomes list_k.

Modify your folder name, file names, and the data-view property to be list_k and things should work again. If not, maybe just change the name to something simpler that's only one word.

[hhanzo1]

Thank you.

[hhanzo1]

Apologies for re-opening this issue I'm having. The widget display's K's but there's no styling.

[rafalyesware]

I think your CSS needs to use a list-k class (vs. the original listK or possibly expected-based-on-filenames list_k), then styling should be fine.