R Integration

isc.defineClass("ChartPane", "VLayout").addProperties({
formDefaults: {
    _constructor: "DynamicForm",
    width: 200,
    wrapItemTitles: false,
    autoFocus: true,
    itemKeyPress: function (item, keyName, characterValue) {
        if (keyName == "Enter") this.creator.updateChart();
    },
    numCols: 3,
    items: [
        {name: "stockSymbol", title: "Stock Symbol", defaultValue: "GOOG"}, 
        {name: "Chart", type: "button", click: "form.creator.updateChart()", startRow: false}
    ]
},
updateChart : function () {
    this.rChart.setCriteria(this.form.getValues());
},
    
rChartDefaults: {
    _constructor: "RChart",
    name: "stockChart",
    width: "900",
    height: "360"
},
autoChildren: ["form", "rChart"],
    
initWidget : function () {
    this.Super("initWidget", arguments);
    
    
    this.addAutoChildren(this.autoChildren);
    this.updateChart();
}
});

isc.defineClass("RChart", "Img").addProperties({
imageType: "normal",
initWidget : function () {
    //this.doSetSrc();
    this.Super("initWidget", arguments);
},
resized : function () {
    this.doSetSrc();
    this.resetSrc();
},
draw : function () {
    this.Super("draw", arguments);
    this.doSetSrc();
    this.resetSrc();
},
getCriteria : function () {
    // clone any criteria passed to us initially (don't scribble on user-provided object)
    var criteria = isc.addProperties({}, this.criteria);
    
    isc.addProperties(criteria, {
        name: this.name, 
        // coerce to string for passing to REngine
        width: this.getVisibleWidth()+"",
        height: this.getVisibleHeight()+""
    });
    return criteria;
},
setCriteria : function (criteria) {
    this.criteria = criteria;
    
    this.doSetSrc();
    this.resetSrc();
},
 
doSetSrc : function () {
    this.src = RChartDS.getFetchDataURL(this.getCriteria(), {operationId: "getChart"});
}
});

<DataSource 
    ID="RChartDS" 
>
    <fields>
        <field name="name" primaryKey="true"/>
    </fields>
    
    <operationBindings>
      <operationBinding operationType="fetch" operationId="getChart">
          <script language="groovy"><![CDATA[
            def chartRequest = new DSRequest("RChartDS", "fetch", rpc);
            
            // create a unique string for the temporary file used for the R-generated image
            criteria.tmpFilename = "/tmp/"+criteria.name+"_"+UUID.randomUUID()+".png";
            
            def chartResponse = chartRequest.setCriteria(criteria)
                                            .setOperationId(criteria.name)
                                            .execute();
            rpc.doCustomResponse();
            requestContext.setContentType("image/png");
            def os = response.getOutputStream();
            os.write(chartResponse.data);
            os.flush();
          ]]></script>
      </operationBinding>  
      <operationBinding operationType="fetch" operationId="stockChart">
          <script language="REngine"><![CDATA[
            library('quantmod')
          
            png(filename=criteria$tmpFilename, height=as.numeric(criteria$height), width=as.numeric(criteria$width))
          
            symbols <- getSymbols(criteria$stockSymbol, auto.assign=FALSE)
            chartSeries(symbols, name=criteria$stockSymbol, subset='last 3 months', TA="addVo();addBBands()")
          
            # Turn off device driver (to flush output to png)
            dev.off();
            
            # Read the generated image, delete it and return the binary stream
            returnVal <- readBin(criteria$tmpFilename,'raw',1024*1024); 
            unlink(criteria$tmpFilename);
            returnVal;
          ]]></script>
      </operationBinding>   
    </operationBindings>
</DataSource>

<SCRIPT SRC="../../isomorphic/DataSourceLoader?dataSource=RChartDS"></SCRIPT>
<SCRIPT src="scripts/ChartPane.js"></SCRIPT>
<SCRIPT src="scripts/RChart.js"></SCRIPT>
<SCRIPT>
isc.ChartPane.create({ 
    ID : "chartPane",
    width: "100%",
    height: "100%"
});
</SCRIPT>

public void onModuleLoad() {
    ChartPane chartPane = new ChartPane();
        chartPane.draw();
    }
    class ChartPane extends VLayout {
        private RChart rChart;
        private DynamicForm form;
        private Criteria criteria;
        
        public ChartPane () {
            this.form = new DynamicForm();
            this.form.setWidth(200);
            this.form.setWrapItemTitles(false);
            this.form.setAutoFocus(true);
            this.form.setNumCols(3);
            TextItem text = new TextItem();
            text.setName("stockSymbol");
            text.setTitle("Stock Symbol");
            text.setDefaultValue("YHOO");
            ButtonItem button = new ButtonItem();
            button.setTitle("Chart");
            button.setStartRow(false);
            button.addClickHandler(new ClickHandler() {
                @Override
                public void onClick(
                        com.smartgwt.client.widgets.form.fields.events.ClickEvent event) {
                    updateChart();
                }
            });
            this.form.setItems(text, button);
            
            this.form.addItemKeyPressHandler(new ItemKeyPressHandler() {
                @Override
                public void onItemKeyPress(ItemKeyPressEvent event) {
                    if (event.getKeyName().equalsIgnoreCase("Enter")) {
                        updateChart();
                    }
                }
            });
            
            this.rChart = new RChart();
            this.criteria = new Criteria();
            this.criteria.addCriteria("name", "stockChart");
            this.criteria.addCriteria("stockSymbol", this.form.getValueAsString("stockSymbol"));
            this.criteria.addCriteria("width", "900");
            this.criteria.addCriteria("height", "360");
            this.rChart.setCriteria(criteria);
            
            this.addMembers(form, rChart);
        }
        
        private void updateChart () {
            this.criteria.addCriteria("stockSymbol", this.form.getValueAsString("stockSymbol"));
            this.rChart.setCriteria(criteria);
        }
    }
    
    class RChart extends Img {
        Criteria criteria = new Criteria();
        
        public RChart () {
            this.setImageType(ImageStyle.NORMAL);
            this.setName("stockChart");
            this.setWidth("900");
            this.setHeight("360");
            this.doSetSrc();
            this.resetSrc();
        }
        
        private void doSetSrc() {
            DataSource ds = DataSource.get("RChartDS");
            DSRequest properties = new DSRequest();
            properties.setOperationId("getChart");
            this.setSrc(ds.getFetchDataURL(this.getCriteria(), properties));
        }
        private void setCriteria(Criteria criteria) {
            this.criteria = criteria;
            this.doSetSrc();
            this.resetSrc();
        }
        private Criteria getCriteria() {
            return this.criteria;
        }
    }