<commit_before>/*
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */

import _ from 'lodash';
import { Bar } from 'react-chartjs-2';
import moment from 'moment';
import { connect } from 'react-redux';
import GraphColors from '../utils/GraphColors';

/**
 * @param {State} state
 */
function mapStateToProps(state) {
	const timeInterval = state.graph.timeInterval;
	const barDuration = state.graph.barDuration;
	const data = { datasets: [] };
	const graphColors = new GraphColors();

	const labelsSet = new Set();
	for (const meterID of state.graph.selectedMeters) {
		const readingsData = state.readings.bar.byMeterID[meterID][timeInterval][barDuration];
		if (readingsData !== undefined && !readingsData.isFetching) {
			const color = graphColors.getColor();
			data.datasets.push({
				label: state.meters.byMeterID[meterID].name,
				data: readingsData.readings.map(arr => arr[1]),
				backgroundColor: color,
				hoverBackgroundColor: color
			});
			// Add only the unique time intervals to the label set
			for (const element of _.flatten(readingsData.readings.map(arr => arr[0]))) {
				labelsSet.add(`${moment(element).format('MMM DD')} - ${moment(element).add(barDuration).format('MMM DD YYYY')}`);
			}
		}
	}
    // Converts the label set into an array for Chart.js and sorts the labels based on the first date of the time interval
	data.labels = Array.from(labelsSet).sort((x, y) => moment(x.split(' - ')[0], 'MMM DD, YYYY, hh:mm a').format('x') - moment(y.split(' - ')[0], 'MMM DD, YYYY, hh:mm a').format('x'));

	const options = {
		animation: {
			duration: 0<commit_msg>Fix bar chart labels out of order (reverts PR #132)<commit_after>/*
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */

import _ from 'lodash';
import { Bar } from 'react-chartjs-2';
import moment from 'moment';
import { connect } from 'react-redux';
import GraphColors from '../utils/GraphColors';

/**
 * @param {State} state
 */
function mapStateToProps(state) {
	const timeInterval = state.graph.timeInterval;
	const barDuration = state.graph.barDuration;
	const data = { datasets: [] };
	const graphColors = new GraphColors();

	const labelsSet = new Set();
	for (const meterID of state.graph.selectedMeters) {
		const readingsData = state.readings.bar.byMeterID[meterID][timeInterval][barDuration];
		if (readingsData !== undefined && !readingsData.isFetching) {
			const color = graphColors.getColor();
			data.datasets.push({
				label: state.meters.byMeterID[meterID].name,
				data: readingsData.readings.map(arr => arr[1]),
				backgroundColor: color,
				hoverBackgroundColor: color
			});
			// Add only the unique time intervals to the label set
			for (const element of _.flatten(readingsData.readings.map(arr => arr[0]))) {
				labelsSet.add(`${moment(element).format('MMM DD, YYYY')} - ${moment(element).add(barDuration).format('MMM DD, YYYY')}`);
			}
		}
	}
    // Converts the label set into an array for Chart.js and sorts the labels based on the first date of the time interval
	data.labels = Array.from(labelsSet).sort((x, y) => moment(x.split(' - ')[0], 'MMM DD, YYYY').format('x') - moment(y.split(' - ')[0], 'MMM DD, YYYY').format('x'));

	const options = {
		animation: {
			duration: 0
{'fraction_non_alphanumeric': 0.14676546024508408, 'fraction_numerical': 0.006554573952693075, 'mean_word_length': 4.035868005738881, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 9, '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': '6072906', 'n_tokens_mistral': 1215, 'n_tokens_neox': 1127, 'n_words': 337}