JSFiddle - React, Tailwind, and code Playground

by Yuriy Bablyukh

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <select id="level">
        <option value="Totals">Totals</option>
    </select>  
    <button id="changeColumnLevel">Change Column To Total Level</button>
    <button id="changeRowLevel">Change Row To Total Level</button>
<div id="dataView"></div>
    <div id="chartSelector"></div>  
<script type="text/javascript">
    var __jrsConfigs__ = {
        urlContext : "http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv"
    };
</script>

<script type="text/javascript" src="http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv/scripts/require-jquery.js"></script>

<script>
    require.config({
    baseUrl: __jrsConfigs__.urlContext + "/scripts",
    enforceDefine:true,
    paths: {
        "lodash": "common/lib/lodash-1.1.1",
        "underscore" : "config/lodashTemplateSettings",
        "backbone" : "ext.utils.backbone",
        "jquery.ui": "jquery/js/jquery-ui-1.8.20.custom.min",

        //aliases for plugins
        "bundle" : "common/plugin/bundle",
        "text" : "common/plugin/text",
        "common/request": "common/corsRequest",
        "easyxdm": "common/lib/xdm-1.0.1"
    },
    shim: {
        "jrs.configs": {
            exports: "__jrsConfigs__"
        },
    
        "jquery.ui": {
			deps: ["jquery"],
			exports: "jQuery"
		},    
    
        backbone: {
            deps: [
               "underscore",
               "jquery"
            ],
            exports: "Backbone"
        },

        "highcharts": {
            deps: ["jquery"],
            exports: "Highcharts"
        },
        "jrs-highcharts-plugins": {
            deps: ["highcharts"],
            exports: "Highcharts"
        },
        "adhoc/dataprocessor": {
            deps: ["underscore"],
            exports: "AdhocDataProcessor"
        },
        "adhoc/highchart.datamapper": {
            deps: ["adhoc/dataprocessor"],
            exports:...

CSS

body {
	font-size: 62.5%;   
}

html,body{
   height:100%; 
}

.slider{
    margin-bottom:5px;
}

#dataView{
   height:80%;  
}

JavaScript

require(["jquery", "adhoc/api/AdHocViewFacade"], function($, DataViewFacade) {
    "use strict";

    var service = {
        execute : function() {
            return $.Deferred().resolve({
   "state":{
      "uuid":"adhoc_view_uuid_1",
      "title":"SpLine Chart",
      "adHocViewUri":"/adhocview/repository/uri",
      "viewType":"chart",
      "viewTypeMetadata":{
         "chartType":"spline",
         "columnsSelectedLevels":[
            {
               "label":"Date shipped",
               "dimension":"ShippedDate",
               "name":"ShippedDate"
            }
         ],
         "rowsSelectedLevels":[
            {
               "label":"City",
               "dimension":"ShipCity",
               "name":"ShipCity"
            }
         ],
         "showMeasureOnValueAxis":true,
         "showDataPoints":true,
         "shortMonths":[
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun",
            "Jul",
            "Aug",
            "Sep",
            "Oct",
            "Nov",
            "Dec"
         ],
         "yAxisStep":1,
         "xAxisStep":1,
         "xAxisRotation":-90,
         "yAxisRotation":0
      },
      "axes":[
         [
            {
               "label":"Country",
               "dimension":"ShipCountry",
               "name":"ShipCountry"
            },
            {
               "label":"Region",
               "dimension":"ShipRegion",
               "name":"ShipRegion"
            },
            {
               "label":"City",
               "dimension":"ShipCity",
               "name":"ShipCity"
            }
         ],
         [
            {
               "label":"Date shipped",
               "dimension":"ShippedDate",
               "name":"ShippedDate"
            },
            {
               "label":"Measures",
               "dimension":"Measures",
               "name":"Measures"
            }
         ]
      ],
     ...