Skip to content

Instantly share code, notes, and snippets.

@Zulcom

Zulcom/index.html

Created October 29, 2019 19:02
Show Gist options
  • Save Zulcom/d2bd88be49f40d567396a26d56d3b1d9 to your computer and use it in GitHub Desktop.
Save Zulcom/d2bd88be49f40d567396a26d56d3b1d9 to your computer and use it in GitHub Desktop.
Download ZIP
PatternFly + AngularJS реактвные графики из HTML формы (отправить данные на сервер, нарисовать графики по JSON)
Raw
index.html
<html ng-app="patternfly.charts" lang="ru">
<head>
<title>Пример отрисовки графика по данным формы, обрабатываемой на сервере</title>
<script src="https://patternfly.github.io/angular-patternfly/grunt-scripts/jquery.js"></script>
<script src="https://patternfly.github.io/angular-patternfly/grunt-scripts/bootstrap.min.js"></script>
<script src="https://patternfly.github.io/angular-patternfly/grunt-scripts/bootstrap-select.js"></script>
<script src="https://patternfly.github.io/angular-patternfly/grunt-scripts/jquery-ui.js"></script>
<script src="https://patternfly.github.io/angular-patternfly/grunt-scripts/jquery.dataTables.js"></script>
<script src="https://patternfly.github.io/angular-patternfly/grunt-scripts/dataTables.select.js"></script>
<script src="https://patternfly.github.io/angular-patternfly/grunt-scripts/moment.js"></script>
<script src="https://patternfly.github.io/angular-patternfly/grunt-scripts/d3.js"></script>
<script src="https://patternfly.github.io/angular-patternfly/grunt-scripts/c3.js"></script>
<script src="https://patternfly.github.io/angular-patternfly/grunt-scripts/patternfly-settings.js"></script>
<script src="https://patternfly.github.io/angular-patternfly/grunt-scripts/patternfly-settings-colors.js"></script>
<script src="https://patternfly.github.io/angular-patternfly/grunt-scripts/patternfly-settings-charts.js"></script>
<script src="https://patternfly.github.io/angular-patternfly/grunt-scripts/angular.js"></script>
<script src="https://patternfly.github.io/angular-patternfly/grunt-scripts/angular-dragdrop.js"></script>
<script src="https://patternfly.github.io/angular-patternfly/grunt-scripts/angular-datatables.js"></script>
<script src="https://patternfly.github.io/angular-patternfly/grunt-scripts/angular-datatables.select.min.js"></script>
<script src="https://patternfly.github.io/angular-patternfly/grunt-scripts/angular-sanitize.js"></script>
<script src="https://patternfly.github.io/angular-patternfly/grunt-scripts/angular-animate.js"></script>
<script src="https://patternfly.github.io/angular-patternfly/grunt-scripts/ui-bootstrap-tpls.js"></script>
<script src="https://patternfly.github.io/angular-patternfly/grunt-scripts/angular-bootstrap-prettify.js"></script>
<script src="https://patternfly.github.io/angular-patternfly/grunt-scripts/lodash.min.js"></script>
<script src="https://patternfly.github.io/angular-patternfly/grunt-scripts/angular-patternfly.js"></script>
<script src="https://patternfly.github.io/angular-patternfly/grunt-scripts/angular-ui-router.min.js"></script>
<script src="https://patternfly.github.io/angular-patternfly/grunt-scripts/angular-drag-and-drop-lists.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<!-- Контроллер всей страницы - ChartCtrl -->
<div ng-controller="ChartCtrl">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Реактивные графики Patternfly + Angular</h1>
<p class="lead">Это пример создания интерактивных графиков, запрос на построение которых отправляется из
HTML формы на сервер, а по JSON ответу сервера данные на графиках обновляются</p>
</div>
</div>
<!-- Для формы свой контроллер - formReload, обработчик события submit - функция reload() -->
<div class=" container">
<form ng-submit="reload()" ng-controller="formReload">
<fieldset ng-disabled="isDataProcessing" class="form-group row">
<legend> Для какой организации вы хотите обновить статистику</legend>
<!-- Привязываем все поля к $scope.data -->
<label><input type="radio" name="organization" value="лол" ng-model="data.organization" required>
Лол
</label>
<label><input type="radio" name="organization" value="кек" ng-model="data.organization" required>
кек
</label>
<label>
<input type="radio" name="organization" value="чебурек" ng-model="data.organization" required>
чебурек
</label>
</fieldset>
<fieldset ng-disabled="isDataProcessing" class="form-group row">
<legend>Дата</legend>
<div class="form-group row">
<label for="form-from" class="col-sm-2 col-form-label">От</label>
<div class="col-sm-10">
<input type="date" name="from" ng-model="data.from" id="form-from" required
class="form-control">
</div>
</div>
<div class="form-group row">
<label for="form-to" class="col-sm-2 col-form-label">До</label>
<div class="col-sm-10">
<input type="date" ng-model="data.to" required class="form-control" id="form-to">
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<input type="submit" class="btn btn-primary">
<input type="reset" class="btn btn-danger">
</div>
</div>
</fieldset>
</form>
</div>
<div class="container">
<div class="row border border-primary">
<div class="col-md-6 text-center">
<pf-donut-chart config="config" data="data"></pf-donut-chart>
</div>
<div class="col-md-6 text-center">
<pf-donut-chart config="custConfig" data="data" chart-height="chartHeight"></pf-donut-chart>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
script.js
// запомним ссылку на приложение ('patternfly.charts' потому что в html[ng-app] так написано)
// добавляем контроллер формы в приложение: app.controller('название контроллера',[...нужды контроллера из ангуляра, <функция-обработчик контроллера>]
const app = angular.module('patternfly.charts');
app.controller('formReload', [
'$scope',
'$http',
'$httpParamSerializerJQLike',
formController
]); // добавляем контроллер формы
app.controller('ChartCtrl', [
'$scope',
chartController
]); // добавляем контроллер-родитель
/**
* Контроллер формы
* @param $scope объект, в котором содержится состояние компонента (поля формы)
* @param $http для работы с сетью
* @param $httpParamSerializerJQLike тобы отправить форму как надо
*/
function formController ($scope, $http, $httpParamSerializerJQLike) {
$scope.data = {}; // создаём в $scope переменную для хранения данных из формы, при изменении формы они автоматически появятся в этом объекте
$scope.isDataProcessing = false; // чтобы нельзя было тыкать в форму пока данные не перезагружены
$scope.reload = () => { // обработчик submit
$scope.isDataProcessing = true;
$http({ // делаем запрос
method: "post",
url: '/SOME/URL',
/* Сервер должен вернуть ответ вида
[["Cats",52],["Hamsters",156],["Fish",36],["Dogs",26]]
*/
data: $httpParamSerializerJQLike($scope.data), // вызываем пребразователь объекта JS в сущность, которая подходит для отправки как POST-форма
headers: { 'Content-Type': 'application/x-www-form-urlencoded' } // ставим заголовок чтобы предупредить получателя, что мы отправляем данные как будто бы формой
})
.then((data) => { // если сервер успешно ответил
$scope.$parent.updData(data.data); // вызываем функцию updData из контроллера родителя и передаём в неё полученные данные от сервера, JSON спарсится автоматически
$scope.isDataProcessing = false;
})
.catch((e) => {
console.error(e) // если сервер ответил неожиданно, пишем это в ошибку
$scope.isDataProcessing = false;
})
}
}
/**
* Контроллер-родитель
* @param $scope объект, в котором содержится состояние родительского компонента (настройки и данные графиков)
* @see https://patternfly.github.io/angular-patternfly/#!/api/patternfly.charts.directive:pfDonutChart
*/
function chartController ($scope) {
$scope.config = {
'chartId': 'chartOne',
'legend': { "show": true },
'colors': {
'Cats': '#0088ce', // blue
'Hamsters': '#3f9c35', // green
'Fish': '#ec7a08', // orange
'Dogs': '#cc0000' // red
},
donut: {
title: "Animals"
},
'onClickFn': function (d, i) {
alert("You clicked on donut arc: " + d.id);
}
}; // конфиг, который будет передан в первый <pf-donut-chart>
$scope.custConfig = angular.copy($scope.config); // модифицированный конфиг для второго <pf-donut-chart>
$scope.custConfig.chartId = 'chartTwo';
$scope.custConfig.legend.position = 'right';
$scope.custConfig.centerLabelFn = function () {
return "Pets";
};
$scope.chartHeight = 120;
$scope.data = [
['Cats', 2],
['Hamsters', 1],
['Fish', 3],
['Dogs', 2]
]; // изначальные данные графика
$scope.updData = (data) => $scope.data = data; // функция обновления данных в графике
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment