Energy Use compared to Average (compare chart)

[danrademacher]

New design:

Current look:

• Change location of toggle
• Update font weights and sizes
• Vertically shorter
• New label treatment

┆Issue is synchronized with this Asana task

[tomay]

Some challenges with the new label treatment

Vertically shorter chart

1) In the existing app, the building label is above the chart to help minimize collision. I think they did this to be sure that the building label will have space (and be prominent). 2) The chart has to have a fixed height. In the new design, we don't know a-priori which bar a given label will be above - it could be the shortest bar or it could be the tallest. We'd still have to leave enough white space above the chart to allow for either.

The La Quinta example above highlights these issues. The labels are on the tallest bars, so there has to be a similar amount of white space above the chart to fit them.

New label treatment

1) The design shows the average label to the left of its line, and the building label to the right of its line. But the order of these two bars is variable. To achieve this for all buildings, we would have to figure out which one comes first, and adjust the placement of the text relative to the line accordingly

[danrademacher]

• [x] Move the circle and text below it on left up nearer to title
• [x] Change the chart building label to 14px
• [x] refix the toggle on Energy Star mode, so it appears.,

[tomay]

Just noticed that these measures are different:

Chart is probably not using eui_wn

[tomay]

Found it in getViewField, called by getCompareChartBinnedData called by prepareCompareChartData in processBuilding and passed as chartData to renderCompareChart

changed to:

  getViewField: function(view) {
    return view === 'eui' ? 'site_eui_wn' : 'energy_star_score';
  },

That fixes the value, but throws the colors off:

[tomay]

Okay, there were two other places with hard-coded site_eui. Changed both to site_eui_wn but only one seems to do anything

if (compareField === 'site_eui_wn') {
        selectedColor = this.getCompareChartColor(data, thresholds, id);

[danrademacher]

Remaining here as of yesterday:

• [x] Move the symbol and text to left of chart up closer to top of chart

This looks done?

[tomay]

yes, done!