mirror of
https://github.com/bendtherules/chart-builder-demo.git
synced 2026-08-18 13:42:05 +00:00
68 lines
3.1 KiB
HTML
68 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Chart Builder</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body ng-app="chart-builder">
|
|
<div class="header">
|
|
Chart Builder
|
|
</div>
|
|
<div class="content" ng-controller="mainController">
|
|
<div class="sidebar chooser">
|
|
<div class="chooser-dim" ng-drop="drop($event,'chooser.dimension')" ng-dragover="allowDrop($event,'chooser.dimension')">
|
|
<div class="dim-header"> Dimensions </div>
|
|
<div class="dim-content">
|
|
<ul class="unstyled-list">
|
|
<li draggable="true" ng-dragstart="drag($event,'chooser.dimension')" ng-repeat="dimName in data.chooserDimensions">{{dimName}}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="chooser-measure" ng-drop="drop($event,'chooser.measure')" ng-dragover="allowDrop($event,'chooser.measure')">
|
|
<div class="measure-header">Measures</div>
|
|
<div class="measure-content">
|
|
<ul class="unstyled-list">
|
|
<li draggable="true" ng-dragstart="drag($event,'chooser.measure')" ng-repeat="measureName in data.chooserMeasures">{{measureName}}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="main-content">
|
|
<div class="chosen">
|
|
<div class="chosen-dim" ng-drop="drop($event,'chosen.dimension')" ng-dragover="allowDrop($event)">
|
|
<div class="dim-header">
|
|
Dimensions
|
|
</div>
|
|
<div class="dim-content">
|
|
<ul class="unstyled-list">
|
|
<li draggable="true" ng-dragstart="drag($event,'chosen.dimension')" ng-if="data.chosenDimension">{{data.chosenDimension}}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="chosen-measure" ng-drop="drop($event,'chosen.measure')" ng-dragover="allowDrop($event)">
|
|
<div class="measure-header">
|
|
Measures
|
|
</div>
|
|
<div class="measure-content">
|
|
<ul class="unstyled-list">
|
|
<li draggable="true" ng-dragstart="drag($event,'chosen.measure')" ng-if="data.chosenMeasure">{{data.chosenMeasure}}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="chart-container">
|
|
|
|
<div class="chart"></div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript" src="lib/angular.min.js"></script>
|
|
<script type="text/javascript" src="js/ng-drag.js"></script>
|
|
<script type="text/javascript" src="lib/d3.v4.min.js"></script>
|
|
<script type="text/javascript" src="lib/d3-tip.js"></script>
|
|
<script type="text/javascript" src="js/draw-chart.js"></script>
|
|
<script type="text/javascript" src="js/app.js"></script>
|
|
</body>
|
|
</html> |