<commit_before>import React from 'react';
import {findDOMNode} from 'react-dom';
const ReactDOM = require('react-dom');

class SlideContentView extends React.Component {
    constructor(props) {
        super(props);
        this.loading = 'loading';
        this.zoom = 1.0;
    }
    componentWillReceiveProps(nextProps){
        if (nextProps.theme === this.props.theme){

        }
        if (nextProps.loadingIndicator !== this.props.loadingIndicator)
        {
            if (nextProps.loadingIndicator === 'true')
                this.loading = 'loading';
            if(nextProps.loadingIndicator === 'false')
                this.loading = '';
        }
    }
    componentWillUnmount(){
        window.removeEventListener('resize', this.handleResize);
    }
    componentDidMount(){
        if(process.env.BROWSER){
            //Function toi fit contents in edit and view component
            //$(".pptx2html").addClass('schaal');
            //$(".pptx2html [style*='absolute']").addClass('schaal');
            /*
            if ($('.pptx2html').length)
            {
                $(".pptx2html").css({'transform': 'scale(0.5,0.5)', 'transform-origin': 'top left'});
                //$("#signinModal").css({'zIndex': '99999', 'position': 'absolute'});

            } else {
                //do nothing - relative content scales anyways.
                //$(".slides").css({'transform': 'scale(0.5,0.5)', 'transform-origin': 'top left'});
                //$("#signinModal").css({'zIndex': '99999', 'position': 'absolute'});
            }
            */
            //initial resize
            this.resize();
            window.addEventListener('resize', this.handleResize);
            /*ReactDOM.findDOMNode(this.refs.container).addEventListener('onResize', (evt) =>
                {
                console.log('onresize');
                this.resize();
            });*/
            this.loading = '';
        }
        this.forceUpdate();
    }

    handleResize = () => {
        this.forceUpdate();
    }

    componentDidUpdate() {
        // update mathjax rendering
        // add to the mathjax rendering queue the command to type-set the inlineContent
        MathJax.Hub.Queue(['Typeset',MathJax.Hub,'inlineContent']);
    }

    resize()
    {
        //reset scaling of pptx2html element to get original size
        $('.pptx2html').css({'transform': '', 'transform-origin': ''});

        //Function to fit contents in edit and view component
        let pptxwidth = $('.pptx2html').outerWidth();
        let pptxheight = $('.pptx2html').outerHeight();

        //only calculate scaleration for width for now
        this.scaleratio = this.zoom;

        if ($('.pptx2html').length)
        {
            $('.pptx2html').css({'transform': '', 'transform-origin': ''});
            $('.pptx2html').css({'transform': 'scale('+this.scaleratio+','+this.scaleratio+')', 'transform-origin': 'top left'});

            pptxheight = $('.pptx2html').outerHeight();

            const scrollbarHeight = this.refs.inlineContent.offsetHeight - this.refs.inlineContent.clientHeight;
            this.refs.slideContentView.style.height = (pptxheight * this.scaleratio + scrollbarHeight) + 'px';

            $('.pptx2html').css({'borderStyle': 'double', 'borderColor': '#DA6619'});
        }
    }
    zoomIn(){
        this.zoom += 0.25;
        this.resize();
    }
    resetZoom(){
        this.zoom = 1;
        this.resize();
    }
    zoomOut(){
        this.zoom -= 0.25;
        this.resize();
    }
    render() {
        //styles should match slideContentEditor for consistency
        const compHeaderStyle = {
            minWidth: '100%',<commit_msg>Added Chart support in slideContent view<commit_after>import React from 'react';
import {findDOMNode} from 'react-dom';
const ReactDOM = require('react-dom');

class SlideContentView extends React.Component {
    constructor(props) {
        super(props);
        this.loading = 'loading';
        this.zoom = 1.0;
    }
    componentWillReceiveProps(nextProps){
        if (nextProps.theme === this.props.theme){

        }
        if (nextProps.loadingIndicator !== this.props.loadingIndicator)
        {
            if (nextProps.loadingIndicator === 'true')
                this.loading = 'loading';
            if(nextProps.loadingIndicator === 'false')
                this.loading = '';
        }
    }
    componentWillUnmount(){
        window.removeEventListener('resize', this.handleResize);
    }
    componentDidMount(){
        if(process.env.BROWSER){
            //Function toi fit contents in edit and view component
            //$(".pptx2html").addClass('schaal');
            //$(".pptx2html [style*='absolute']").addClass('schaal');
            /*
            if ($('.pptx2html').length)
            {
                $(".pptx2html").css({'transform': 'scale(0.5,0.5)', 'transform-origin': 'top left'});
                //$("#signinModal").css({'zIndex': '99999', 'position': 'absolute'});

            } else {
                //do nothing - relative content scales anyways.
                //$(".slides").css({'transform': 'scale(0.5,0.5)', 'transform-origin': 'top left'});
                //$("#signinModal").css({'zIndex': '99999', 'position': 'absolute'});
            }
            */
            //initial resize


            this.resize();
            window.addEventListener('resize', this.handleResize);
            this.renderCharts();
            /*ReactDOM.findDOMNode(this.refs.container).addEventListener('onResize', (evt) =>
                {
                console.log('onresize');
                this.resize();
            });*/
            this.loading = '';
        }
        this.forceUpdate();
    }

    handleResize = () => {
        this.forceUpdate();
    }

    componentDidUpdate() {
        // update mathjax rendering
        // add to the mathjax rendering queue the command to type-set the inlineContent
        MathJax.Hub.Queue(['Typeset',MathJax.Hub,'inlineContent']);
    }

    resize()
    {
        //reset scaling of pptx2html element to get original size
        $('.pptx2html').css({'transform': '', 'transform-origin': ''});

        //Function to fit contents in edit and view component
        let pptxwidth = $('.pptx2html').outerWidth();
        let pptxheight = $('.pptx2html').outerHeight();

        //only calculate scaleration for width for now
        this.scaleratio = this.zoom;

        if ($('.pptx2html').length)
        {
            $('.pptx2html').css({'transform': '', 'transform-origin': ''});
            $('.pptx2html').css({'transform': 'scale('+this.scaleratio+','+this.scaleratio+')', 'transform-origin': 'top left'});

            pptxheight = $('.pptx2html').outerHeight();

            const scrollbarHeight = this.refs.inlineContent.offsetHeight - this.refs.inlineContent.clientHeight;
            this.refs.slideContentView.style.height = (pptxheight * this.scaleratio + scrollbarHeight) + 'px';

            $('.pptx2html').css({'borderStyle': 'double', 'borderColor': '#DA6619'});
        }
    }
    zoomIn(){
        this.zoom += 0.25;
        this.resize();
    }
    resetZoom(){
        this.zoom = 1;
        this.resize();
    }
    zoomOut(){
        this.zoom -= 0.25;
        this.resize();
    }

    renderCharts(){


        let charts = $('div[id^=chart]');

        for (let i = 0; i < charts.length; i++){


            let data = null;
            let chart = null;

            let jsonChart = JSON.parse( charts[i].getAttribute('datum'));

            let chartID = jsonChart.chartID;
            let chartType = jsonChart.chartType;
            let chartData = jsonChart.chartData;


            switch (chartType) {
                case 'lineChart':
                    data = chartData;
                    chart = nv.models.lineChart()
                        .useInteractiveGuideline(true);
                    chart.xAxis.tickFormat(function(d) { return chartData[0].xlabels[d] || d; });
                    break;
                case 'barChart':
                    data = chartData;
                    chart = nv.models.multiBarChart();
                    chart.xAxis.tickFormat(function(d) { return chartData[0].xlabels[d] || d; });
                    break;
                case 'pieChart':
                    chartData = chartData[0].values;
                    chart = nv.models.pieChart();
                    break;
                case 'pie3DChart':
                    chartData = chartData[0].values;
                    chart = nv.models.pieChart();
                    break;
                case 'areaChart':
                    data = chartData;
                    chart = nv.models.stackedAreaChart()
                        .clipEdge(true)
                        .useInteractiveGuideline(true);
                    chart.xAxis.tickFormat(function(d) { return chartData[0].xlabels[d] || d; });
                    break;
                case 'scatterChart':

                    for (let i=0; i<chartData.length; i++) {
                        let arr = [];
                        for (let j=0; j<chartData[i].length; j++) {
                            arr.push({x: j, y: chartData[i][j]});
                        }
                        data.push({key: 'data' + (i + 1), values: arr});
                    }

                    chart = nv.models.scatterChart()
                        .showDistX(true)
                        .showDistY(true)
                        .color(d3.scale.category10().range());
                    chart.xAxis.axisLabel('X').tickFormat(d3.format('.02f'));
                    chart.yAxis.axisLabel('Y').tickFormat(d3.format('.02f'));
                    chartData = data;
                    break;
                default:
            }


            if (chart !== null) {

                d3.select('#' + chartID)
                    .append('svg')
                    .datum(chartData)
                    .transition().duration(500)
                    .call(chart);

                nv.utils.windowResize(chart.update);

            }
        }
    }

    render() {
        //styles should match slideContentEditor for consistency
        const compHeaderStyle = {
            minWidth: '100%',
{'fraction_non_alphanumeric': 0.150730282375852, 'fraction_numerical': 0.01139240506329114, 'mean_word_length': 1.6733472149921915, 'pattern_counts': {'":': 0, '<': 6, '<?xml version=': 0, '>': 7, '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': '5630827', 'n_tokens_mistral': 2909, 'n_tokens_neox': 2736, 'n_words': 518}