<commit_before>import Ember from 'ember';
import RankingChart from '../components/ranking-chart';
import carto from '../utils/carto';

export default RankingChart.extend({
  overlayColumn: '',
  didInsertElement() {
    this._super(...arguments);
    let svg = this.get('svg');
    let curr = svg.append('g')
      .attr('class', 'curr');
    this.set('curr', curr);
  },

  tooltip(d, current) {
    const selected = current || d;
    const { column, overlayColumn } = this.getProperties('column', 'overlayColumn');
    const denominator = selected[column];
    const numerator = selected[overlayColumn];
    const percent = this.get('percent');
    return `${selected.boro_district}: <strong>${percent(numerator / denominator * 100)}%</strong> <span class='moe-text'>of buildings in floodplain</span>`;
  },

  drawChart(el, data) {
    this._super(...arguments);
    const bars = this.get('curr');
    const { x, y, colors, height, overlayColumn } =
      this.getProperties('x', 'y', 'colors', 'height', 'overlayColumn');
    const theseBars = bars
      .selectAll('.curr')
      .data(data, function (d) {
        return d.borocd;
      });

    theseBars
      .attr('fill', '#9DCFDC')
      .attr('width', () => x.bandwidth() - 2)
      .attr('x', d => x(d.borocd));

    theseBars.enter()
      .append('rect')
      .attr('class', (d, i) => `bar bar-${d.borocd} bar-index-${i}`)
      .attr('fill', '#9DCFDC')
      .attr('style', 'pointer-events: none;')
      .attr('y', d => height - y(d[overlayColumn]))
      .attr('width', d => x.bandwidth() - 2)
      .attr('x', d => x(d.borocd))
      .attr('height', d => y(d[overlayColumn]));
  },
  sql: Ember.computed('borocd', function() {
    const { column, overlayColumn } =
      this.getProperties('column', 'overlayColumn');

    return `SELECT ${column}, ${overlayColumn || 1},
      CASE
        WHEN LEFT(borocd::text, 1) = '1' THEN 'Manhattan ' || borocd %25 100
        WHEN LEFT(borocd::text, 1) = '2' THEN 'Bronx ' || borocd %25 100
        WHEN LEFT(borocd::text, 1) = '3' THEN 'Brooklyn ' || borocd %25 100
        WHEN LEFT(borocd::text, 1) = '4' THEN 'Queens ' || borocd %25 100
        WHEN LEFT(borocd::text, 1) = '5' THEN 'Staten Island ' || borocd %25 100
      END as boro_district,
      borocd
      FROM community_district_profiles`;
  }),
  data: Ember.computed('sql', function() {
    const sql = this.get('sql');
    const borocd = this.get('borocd');
    return carto.SQL(sql, 'json').then(data => {
      return data.sortBy(this.get('column')).reverse().map(d => {
        d.is_selected = (borocd === d.borocd) ? true : false;
        return d;
      });
    });
  }),
});<commit_msg>order floodplain ranking charts by overlay<commit_after>import Ember from 'ember';
import RankingChart from '../components/ranking-chart';
import carto from '../utils/carto';

export default RankingChart.extend({
  overlayColumn: '',
  didInsertElement() {
    this._super(...arguments);
    let svg = this.get('svg');
    let curr = svg.append('g')
      .attr('class', 'curr');
    this.set('curr', curr);
  },

  tooltip(d, current) {
    const selected = current || d;
    const { column, overlayColumn } = this.getProperties('column', 'overlayColumn');
    const denominator = selected[column];
    const numerator = selected[overlayColumn];
    const percent = this.get('percent');
    return `${selected.boro_district}: <strong>${percent(numerator / denominator * 100)}%</strong> <span class='moe-text'>of buildings in floodplain</span>`;
  },

  drawChart(el, data) {
    this._super(...arguments);
    const bars = this.get('curr');
    const { x, y, colors, height, overlayColumn } =
      this.getProperties('x', 'y', 'colors', 'height', 'overlayColumn');
    const theseBars = bars
      .selectAll('.curr')
      .data(data, function (d) {
        return d.borocd;
      });

    theseBars
      .attr('fill', '#9DCFDC')
      .attr('width', () => x.bandwidth() - 2)
      .attr('x', d => x(d.borocd));

    theseBars.enter()
      .append('rect')
      .attr('class', (d, i) => `bar bar-${d.borocd} bar-index-${i}`)
      .attr('fill', '#9DCFDC')
      .attr('style', 'pointer-events: none;')
      .attr('y', d => height - y(d[overlayColumn]))
      .attr('width', d => x.bandwidth() - 2)
      .attr('x', d => x(d.borocd))
      .attr('height', d => y(d[overlayColumn]));
  },
  sql: Ember.computed('borocd', function() {
    const { column, overlayColumn } =
      this.getProperties('column', 'overlayColumn');

    return `SELECT ${column}, ${overlayColumn || 1},
      CASE
        WHEN LEFT(borocd::text, 1) = '1' THEN 'Manhattan ' || borocd %25 100
        WHEN LEFT(borocd::text, 1) = '2' THEN 'Bronx ' || borocd %25 100
        WHEN LEFT(borocd::text, 1) = '3' THEN 'Brooklyn ' || borocd %25 100
        WHEN LEFT(borocd::text, 1) = '4' THEN 'Queens ' || borocd %25 100
        WHEN LEFT(borocd::text, 1) = '5' THEN 'Staten Island ' || borocd %25 100
      END as boro_district,
      borocd
      FROM community_district_profiles`;
  }),
  data: Ember.computed('sql', function() {
    const sql = this.get('sql');
    const borocd = this.get('borocd');
    return carto.SQL(sql, 'json').then(data => {
      return data.sortBy(this.get('overlayColumn')).reverse().map(d => {
        d.is_selected = (borocd === d.borocd) ? true : false;
        return d;
      });
    });
  }),
});
{'fraction_non_alphanumeric': 0.19077724060989215, 'fraction_numerical': 0.015991074748977315, 'mean_word_length': 3.002232142857143, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 29, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5983874', 'n_tokens_mistral': 1929, 'n_tokens_neox': 1813, 'n_words': 419}