<commit_before>import './styles.scss';
import template from './DurationTrendWidgetView.hbs';
import {View} from 'backbone.marionette';
import {className, regions} from '../../decorators/index';
import TrendChartView from '../../components/graph-trend-chart/TrendChartView';
import duration from '../../helpers/duration';
import {scaleOrdinal, scaleLinear,} from 'd3-scale';
import {interpolateRgb} from 'd3-interpolate';
import {last} from 'underscore';


@regions({
    chart: '.duration-trend__chart'
})
@className('duration-trend')
export default class DurationTrendWidgetView extends View {
    template = template;

    onRender() {
        const key = 'duration';
        const values = this.model.map(model => model.get('data')[key]);
        const lastExtremum = Math.min(
            ...[d => d >= 0, d => d <= 0].map(op => values.reduce((m, c, i) => op(c - values[i - 1]) ? i : m, -1))
        );
        const amplitude = Math.max(...values) - Math.min(...values);
        const lastDelta = values[lastExtremum] - last(values);

        const level = scaleLinear().domain([0, (Math.max(amplitude, 0.25 * Math.max(...values)))]);

        level.range(lastDelta > 0 ? ['#c4cac6', '#31a354'] : ['#cdc5c4', '#e34a33'])
            .interpolate(interpolateRgb);

        const colors = scaleOrdinal().range([level(Math.abs((lastDelta)))]);

        this.showChildView('chart', new TrendChartView({
            model: this.model,
            hidePoints: true,
            hideLines: true,
            colors,
            keys: [key],
            yTickFormat: d => duration(d, 2)
        }));
    }
}<commit_msg>fix duration trend color for two results (via #704)<commit_after>import './styles.scss';
import template from './DurationTrendWidgetView.hbs';
import {View} from 'backbone.marionette';
import {className, regions} from '../../decorators/index';
import TrendChartView from '../../components/graph-trend-chart/TrendChartView';
import duration from '../../helpers/duration';
import {scaleOrdinal, scaleLinear,} from 'd3-scale';
import {interpolateRgb} from 'd3-interpolate';
import {last} from 'underscore';


@regions({
    chart: '.duration-trend__chart'
})
@className('duration-trend')
export default class DurationTrendWidgetView extends View {
    template = template;

    onRender() {
        const key = 'duration';
        const values = this.model.map(model => model.get('data')[key]);
        const lastExtremum = Math.min(
            ...[d => d >= 0, d => d <= 0].map(
                op => values.reduce((m, c, i) => op(c - values[i - 1]) ? i : m, last(values))
            )
        );
        const amplitude = Math.max(...values) - Math.min(...values);
        const lastDelta = values[lastExtremum] - last(values);

        const level = scaleLinear().domain([0, (Math.max(amplitude, 0.25 * Math.max(...values)))]);

        level.range(lastDelta > 0 ? ['#c4cac6', '#31a354'] : ['#cdc5c4', '#e34a33'])
            .interpolate(interpolateRgb);

        const colors = scaleOrdinal().range([level(Math.abs((lastDelta)))]);

        this.showChildView('chart', new TrendChartView({
            model: this.model,
            hidePoints: true,
            hideLines: true,
            colors,
            keys: [key],
            yTickFormat: d => duration(d, 2)
        }));
    }
}
{'fraction_non_alphanumeric': 0.17099697885196374, 'fraction_numerical': 0.01570996978851964, 'mean_word_length': 2.737020316027088, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 19, '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': '2658738', 'n_tokens_mistral': 1053, 'n_tokens_neox': 1015, 'n_words': 237}