mirror of
https://github.com/bendtherules/chart-builder-demo.git
synced 2026-08-18 13:42:05 +00:00
71 lines
3.5 KiB
HTML
71 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Chart Builder</title>
|
|
<link rel="stylesheet" href="styles/style.css">
|
|
</head>
|
|
<body ng-app="chart-builder" ng-controller="mainController">
|
|
<div class="header">
|
|
Chart Builder
|
|
</div>
|
|
<div class="content">
|
|
<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">
|
|
<dynamic-chart chart-data="data.values[data.chosenDimension][data.chosenMeasure]" chart-axis-label="[data.chosenDimension,data.chosenMeasure]"></dynamic-chart>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<input type="button" class="plot-btn" ng-click="plotRandom()" value="Plot something"></input>
|
|
<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="./lib/angular.min.js"></script>
|
|
<script type="text/javascript" src="./app/ng-drag.js"></script>
|
|
|
|
<script type="text/javascript" src="./app/filters/filters.js"></script>
|
|
<script type="text/javascript" src="./app/services/services.js"></script>
|
|
<script type="text/javascript" src="./app/directives/directives.js"></script>
|
|
<script type="text/javascript" src="./app/app.js"></script>
|
|
</body>
|
|
</html> |