JSFiddle - React, Tailwind, and code Playground

Config Windows

by chrischilcoat

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/scss/themes/darkly/ui_dark.css">
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.js"></script>
<div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: block;">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Setup your Graph</h4>
      </div>
      <div class="modal-body clearfix">
        <div class="row" style="background:#efefef; margin:-20px -20px 20px; padding:20px 8px 0;">
          <div class="col-xs-12">
            <div class="panel panel-default">
              <div class="panel-body">
                <canvas id="line-chart" width="800" height="450"></canvas>
                
             </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-6">
            <form class="form-horizontal">
              
             <div class="form-group">
    <label class="control-label col-xs-12" title="Select the data grid widget that contains the data from which you want to populate this graph." aria-label="Select the data grid widget that contains the data from which you want to populate this graph." for="data_choice"
      style="text-align: left;">Data Group</label>
    <div class="col-xs-12 form-control-value">
      <select type="text" id="data_choice" class="form-control...

SCSS

body {
  background: #222428;
  font-family: "Oswald", sans-serif;
}
.modal-dialog {
    width:800px;
    }
h1 {
  color: #eee;
  text-align: center;
  margin: 20px 0;
  text-transform: uppercase;
}
.chart {
  margin: 0 auto;
  width: 250px;
  height: 250px;
  position: relative;
}
.doughnutTip {
  position: absolute;
  float: left;
  min-width: 30px;
  max-width: 300px;
  padding: 5px 15px;
  border-radius: 1px;
  background: rgba(0,0,0,.8);
  color: #ddd;
  font-size: 17px;
  text-shadow: 0 1px 0 #000;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  letter-spacing: .06em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  transform: all .3s;
  pointer-events: none;
}
.doughnutTip:after {
  position: absolute;
  left: 50%;
  bottom: -6px;
  content: "";
  height: 0;
  margin: 0 0 0 -6px;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-top: 6px solid rgba(0,0,0,.7);
  line-height: 0;
}
.doughnutSummary {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #d5d5d5;
  text-align: center;
  text-shadow: 0 -1px 0 #111;
  cursor: default;
}
.doughnutSummaryTitle {
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -27%;
  font-size: 22px;
  letter-spacing: .06em;
}
.doughnutTypeTitle {
  position: absolute;
  top: 98%;
  width: 100%;
  margin-top: -27%;
  font-size: 22px;
  letter-spacing: .06em;
}
.doughnutSummaryNumber {
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -15%;
  font-size: 55px;
}
.chart path:hover { 
  opacity: .65; 
}


.panel-body {
  position:relative;
}


.ui-label-wrapper {
  position:absolute;
  top:0;
  right:0;
  left:0;
  bottom:0;


.ui-chart-legend {
  position:absolute;

  > span {
    display:block;
    margin-bottom:4px;
  }
  .ui-chart-legend-color {
    height:15px;
    width:15px;
    background:blue;
    display:inline-block;
  }
  .ui-chart-legend-label {
    height:15px;
    width:70px;
    background:lightGray;
    display:inline-block;
 ...

JavaScript

new Chart(document.getElementById("line-chart"), {
  type: 'line',
  data: {
    labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
    datasets: [{ 
        data: [86,114,106,106,107,111,133,221,783,2478],
        label: "Africa",
        borderColor: "#3e95cd",
        fill: false
      }, { 
        data: [282,350,411,502,635,809,947,1402,3700,5267],
        label: "Asia",
        borderColor: "#8e5ea2",
        fill: false
      }, { 
        data: [168,170,178,190,203,276,408,547,675,734],
        label: "Europe",
        borderColor: "#3cba9f",
        fill: false
      },  { 
        data: [6,3,2,2,7,26,82,172,312,433],
        label: "North America",
        borderColor: "#c45850",
        fill: false
      }
    ]
  },
  options: {
    title: {
      display: true,
      text: 'World population per region (in millions)'
    }
  }
});

var $divOptions = $('.temp-group-options'),
    $selectList = $('.ybx-graph-config'),
    $inputDataSourceName = $('#data-source-name'),
    $closeNewGroup = $inputDataSourceName.find('.input-group-addon'),
    $showOptions = function() {
      $selectList.addClass('hide');
      $inputDataSourceName.removeClass('hide').find('.form-control').focus();
      $divOptions.removeClass('hide');
    },
    $hideOptions = function() {
      $selectList.removeClass('hide').val( $(".ybx-graph-config option:first").val() );
      $inputDataSourceName.addClass('hide');
      $divOptions.addClass('hide');
    };
    
$selectList.change(function() {
  var $x = $( this ).val();
  switch ( $x ) {
    default: 

      break;
    case 'new':
      $showOptions();
      break; 
    case 'group109838':

      break;
  }
});

$closeNewGroup.on('click', function(){
  $hideOptions();
});