<commit_before>import React, { Component } from 'react';
import {
    Text,
    View,
    Image,
    StyleSheet,
    TouchableOpacity,
    processColor,
} from 'react-native';
import {
    CombinedChart,
    ScatterChart,
    BarChart,
    LineChart,
} from 'react-native-charts-wrapper';
import * as Device from 'app/utility/Device';
import { SETTINGS_PANEL_STYLES } from 'app/appearance/styles/GlobalStyles';

class OneRMChartView extends Component {

    _render1RM(r2) {
        if (this.props.isR2HighEnough) {
            let e1RM = this.props.e1RM ? this.props.e1RM : "---";
            let velocity = this.props.velocity ? this.props.velocity : "---";

            return (
                <View>
                    <Text style={styles.oneRMText}>e1RM: <Text style={{fontWeight: 'bold'}}>{e1RM}</Text> {this.props.metric}</Text>
                    <Text style={{ textAlign: 'center', fontSize: 15, marginBottom: 20 }}>@ <Text style={{ fontWeight: 'bold' }}> {velocity} m/s</Text></Text> 
                    <Text style={styles.r2Text}>r² : {this.props.r2} %</Text>
                </View>
            );
        } else {
            return (
                <View>
                    <Text style={styles.errorText}>
                        R² is too low, please clean up or log more data
                    </Text>
                </View>
            );
        }
    }

    _render1RMBar() {
        if (this.props.isR2HighEnough && this.props.e1RM) {
            return (
                <VictoryBar
                    data={[
                        { x: this.props.e1RM, y: 20, y0: 0, width: 20, fill: "#ffe5e5" },
                    ]}
                />
            )
        }
    }
    
    _renderRegressionLine() {
        if (this.props.isR2HighEnough) {
            return (
                <VictoryLine
                    style={{
                        data: { stroke: "#368fff" },
                        parent: { border: "1px solid #ccc"}
                    }}
                    data={[
                        this.props.regLeftPoint,
                        this.props.regRightPoint,
                    ]}
                />
            );
        }
    }

    _renderChartArea() {
        // TODO: need to check against ALL points rather than just active points to render a chart
        // NOTE: using > 1 for now as for active chart, I need that in order to get a domain
        if (this.props.activeChartData && this.props.activeChartData.length > 1) {
            return (
                <View>
                    {this._renderChart()}
                </View>
            );
        } else {
            const size = Device.isSmallDevice() ? 250 : 300;
            return <Image style={{width: size, height: size, marginTop: 20}} source={require('app/appearance/images/grayed_chart.png')} />
        }
    }

    handleSelect(event) {
        console.tron.log("selected " + JSON.stringify(event.nativeEvent));
    }

    _renderChart() {
        // set the data
        // NOTE: Android crashes if the data is length 0, so ONLY add it if data exists
        let data = {
            bubbleData: {
                dataSets: []
            }
        };
        if (this.props.e1RM) {
            data.bubbleData.dataSets.push({
                values: [{x: this.props.e1RM, y: this.props.velocity, size: 15}],
                label: '1RM',
    
                config: {
                    drawValues: false,
                    colors: [processColor('green')],
                    highlightEnabled: false,
                    normalizeSizeEnabled: false,
                }
    
            });
        }
        if (this.props.unusedChartData && this.props.unusedChartData.length > 0) {
            data.bubbleData.dataSets.push({
                values: this.props.unusedChartData,
                label: 'Unused Points',
                config: {
                    colors: [processColor('rgba(47, 128, 237, 0.2)')],
                    drawValues: false,
                    highlightEnabled: false,
                    normalizeSizeEnabled: false,
                }
            });
        }
        if (this.props.errorChartData && this.props.errorChartData.length > 0) {
            data.bubbleData.dataSets.push({
                values: this.props.errorChartData,
                label: 'Error Points',
                config: {
                    colors: [processColor('red')],
                    drawValues: false,
                    highlightEnabled: true,
                    normalizeSizeEnabled: false,
                    highlightCircleWidth: 5,
                }
            });
        }
        if (this.props.activeChartData && this.props.activeChartData.length > 0) {
            data.bubbleData.dataSets.push({
                values: this.props.activeChartData,
                label: 'Active Points',
                config: {
                    colors: [processColor('rgba(47, 128, 237, 1)')],
                    drawValues: false,
                    highlightEnabled: true,
                    normalizeSizeEnabled: false,
                    highlightCircleWidth: 5,
                }
            });
        }
        if (this.props.regLeftPoint && this.props.regRightPoint) {
            data.lineData = {
                dataSets: [{
                    values: [this.props.regLeftPoint, this.props.regRightPoint],
                    label: 'Regression line',
    
                    config: {
                        drawValues: false,
                        colors: [processColor('green')],
                        drawCircles: false,
                        lineWidth: 2,
                    }
                }]
            };
        }

        return (
            <View style={styles.chartContainer}>
                <CombinedChart
                    data={data}
                    xAxis={{position: 'BOTTOM'}}
                    yAxis={{
                        right: {
                            drawLabels: false,
                            drawAxisLine: false,
                            drawGridLines: false,
                        }
                    }}
                    maxVisibleValueCount={9000}
                    legend={{enabled: false}}
                    onSelect={this.handleSelect.bind(this)}
                    chartDescription={{text: ''}}
                    onChange={(event) => console.log(event.nativeEvent)}
                    style={styles.chart}/>
            </View>
        );
    }

    render() {
        return (<commit_msg>Added pinch zoom<commit_after>import React, { Component } from 'react';
import {
    Text,
    View,
    Image,
    StyleSheet,
    TouchableOpacity,
    processColor,
} from 'react-native';
import {
    CombinedChart,
    ScatterChart,
    BarChart,
    LineChart,
} from 'react-native-charts-wrapper';
import * as Device from 'app/utility/Device';
import { SETTINGS_PANEL_STYLES } from 'app/appearance/styles/GlobalStyles';

class OneRMChartView extends Component {

    _render1RM(r2) {
        if (this.props.isR2HighEnough) {
            let e1RM = this.props.e1RM ? this.props.e1RM : "---";
            let velocity = this.props.velocity ? this.props.velocity : "---";

            return (
                <View>
                    <Text style={styles.oneRMText}>e1RM: <Text style={{fontWeight: 'bold'}}>{e1RM}</Text> {this.props.metric}</Text>
                    <Text style={{ textAlign: 'center', fontSize: 15, marginBottom: 20 }}>@ <Text style={{ fontWeight: 'bold' }}> {velocity} m/s</Text></Text> 
                    <Text style={styles.r2Text}>r² : {this.props.r2} %</Text>
                </View>
            );
        } else {
            return (
                <View>
                    <Text style={styles.errorText}>
                        R² is too low, please clean up or log more data
                    </Text>
                </View>
            );
        }
    }

    _render1RMBar() {
        if (this.props.isR2HighEnough && this.props.e1RM) {
            return (
                <VictoryBar
                    data={[
                        { x: this.props.e1RM, y: 20, y0: 0, width: 20, fill: "#ffe5e5" },
                    ]}
                />
            )
        }
    }
    
    _renderRegressionLine() {
        if (this.props.isR2HighEnough) {
            return (
                <VictoryLine
                    style={{
                        data: { stroke: "#368fff" },
                        parent: { border: "1px solid #ccc"}
                    }}
                    data={[
                        this.props.regLeftPoint,
                        this.props.regRightPoint,
                    ]}
                />
            );
        }
    }

    _renderChartArea() {
        // TODO: need to check against ALL points rather than just active points to render a chart
        // NOTE: using > 1 for now as for active chart, I need that in order to get a domain
        if (this.props.activeChartData && this.props.activeChartData.length > 1) {
            return (
                <View>
                    {this._renderChart()}
                </View>
            );
        } else {
            const size = Device.isSmallDevice() ? 250 : 300;
            return <Image style={{width: size, height: size, marginTop: 20}} source={require('app/appearance/images/grayed_chart.png')} />
        }
    }

    handleSelect(event) {
        console.tron.log("selected " + JSON.stringify(event.nativeEvent));
    }

    _renderChart() {
        // set the data
        // NOTE: Android crashes if the data is length 0, so ONLY add it if data exists
        let data = {
            bubbleData: {
                dataSets: []
            }
        };
        if (this.props.e1RM) {
            data.bubbleData.dataSets.push({
                values: [{x: this.props.e1RM, y: this.props.velocity, size: 15}],
                label: '1RM',
    
                config: {
                    drawValues: false,
                    colors: [processColor('green')],
                    highlightEnabled: false,
                    normalizeSizeEnabled: false,
                }
    
            });
        }
        if (this.props.unusedChartData && this.props.unusedChartData.length > 0) {
            data.bubbleData.dataSets.push({
                values: this.props.unusedChartData,
                label: 'Unused Points',
                config: {
                    colors: [processColor('rgba(47, 128, 237, 0.2)')],
                    drawValues: false,
                    highlightEnabled: false,
                    normalizeSizeEnabled: false,
                }
            });
        }
        if (this.props.errorChartData && this.props.errorChartData.length > 0) {
            data.bubbleData.dataSets.push({
                values: this.props.errorChartData,
                label: 'Error Points',
                config: {
                    colors: [processColor('red')],
                    drawValues: false,
                    highlightEnabled: true,
                    normalizeSizeEnabled: false,
                    highlightCircleWidth: 5,
                }
            });
        }
        if (this.props.activeChartData && this.props.activeChartData.length > 0) {
            data.bubbleData.dataSets.push({
                values: this.props.activeChartData,
                label: 'Active Points',
                config: {
                    colors: [processColor('rgba(47, 128, 237, 1)')],
                    drawValues: false,
                    highlightEnabled: true,
                    normalizeSizeEnabled: false,
                    highlightCircleWidth: 5,
                }
            });
        }
        if (this.props.regLeftPoint && this.props.regRightPoint) {
            data.lineData = {
                dataSets: [{
                    values: [this.props.regLeftPoint, this.props.regRightPoint],
                    label: 'Regression line',
    
                    config: {
                        drawValues: false,
                        colors: [processColor('green')],
                        drawCircles: false,
                        lineWidth: 2,
                    }
                }]
            };
        }

        return (
            <View style={styles.chartContainer}>
                <CombinedChart
                    data={data}
                    xAxis={{position: 'BOTTOM'}}
                    yAxis={{
                        right: {
                            drawLabels: false,
                            drawAxisLine: false,
                            drawGridLines: false,
                        }
                    }}
                    pinchZoom={true}
                    maxVisibleValueCount={9001} // Assuming we'll never have this many sets
                    legend={{enabled: false}}
                    onSelect={this.handleSelect.bind(this)}
                    chartDescription={{text: ''}}
                    onChange={(event) => console.log(event.nativeEvent)}
                    style={styles.chart}/>
            </View>
        );
    }

    render() {
        return (
{'fraction_non_alphanumeric': 0.10897532919630695, 'fraction_numerical': 0.011502951415165732, 'mean_word_length': 1.162140052356021, 'pattern_counts': {'":': 0, '<': 51, '<?xml version=': 0, '>': 63, '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': '2644649', 'n_tokens_mistral': 3614, 'n_tokens_neox': 3328, 'n_words': 696}