[WIP] Setup of skeleton
This commit is contained in:
3
resources/views/vendor/charts/README.md
vendored
Normal file
3
resources/views/vendor/charts/README.md
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
# Charts Views
|
||||
|
||||
All the charts views are located in this folder
|
||||
3
resources/views/vendor/charts/c3/container.blade.php
vendored
Normal file
3
resources/views/vendor/charts/c3/container.blade.php
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
<div id="{{ $chart->id }}" {!! $chart->formatContainerOptions('css') !!}>
|
||||
</div>
|
||||
@include('charts::loader')
|
||||
29
resources/views/vendor/charts/c3/script.blade.php
vendored
Normal file
29
resources/views/vendor/charts/c3/script.blade.php
vendored
Normal file
@@ -0,0 +1,29 @@
|
||||
<script {!! $chart->displayScriptAttributes() !!}>
|
||||
function {{ $chart->id }}_create(data) {
|
||||
{{ $chart->id }}_rendered = true;
|
||||
document.getElementById("{{ $chart->id }}_loader").style.display = 'none';
|
||||
document.getElementById("{{ $chart->id }}").style.display = 'block';
|
||||
window.{{ $chart->id }} = c3.generate({
|
||||
bindto: '#{{ $chart->id }}',
|
||||
data: data,
|
||||
{!! $chart->formatOptions(false, true) !!}
|
||||
});
|
||||
}
|
||||
@if ($chart->api_url)
|
||||
let {{ $chart->id }}_refresh = function (url) {
|
||||
document.getElementById("{{ $chart->id }}").style.display = 'none';
|
||||
document.getElementById("{{ $chart->id }}_loader").style.display = 'flex';
|
||||
if (typeof url !== 'undefined') {
|
||||
{{ $chart->id }}_api_url = url;
|
||||
}
|
||||
fetch({{ $chart->id }}_api_url)
|
||||
.then(data => data.json())
|
||||
.then(data => {
|
||||
{{ $chart->id }}.load(data);
|
||||
document.getElementById("{{ $chart->id }}_loader").style.display = 'none';
|
||||
document.getElementById("{{ $chart->id }}").style.display = 'block';
|
||||
});
|
||||
};
|
||||
@endif
|
||||
@include('charts::init')
|
||||
</script>
|
||||
2
resources/views/vendor/charts/chartjs/container.blade.php
vendored
Normal file
2
resources/views/vendor/charts/chartjs/container.blade.php
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
<canvas style="display: none;" id="{{ $chart->id }}" {!! $chart->formatContainerOptions('html') !!}></canvas>
|
||||
@include('charts::loader')
|
||||
41
resources/views/vendor/charts/chartjs/script.blade.php
vendored
Normal file
41
resources/views/vendor/charts/chartjs/script.blade.php
vendored
Normal file
@@ -0,0 +1,41 @@
|
||||
|
||||
@foreach ($chart->plugins as $plugin)
|
||||
@include($chart->pluginsViews[$plugin]);
|
||||
@endforeach
|
||||
|
||||
<script {!! $chart->displayScriptAttributes() !!}>
|
||||
var ctvChart = document.getElementById('{{ $chart->id }}').getContext('2d');
|
||||
function {{ $chart->id }}_create(data) {
|
||||
{{ $chart->id }}_rendered = true;
|
||||
document.getElementById("{{ $chart->id }}_loader").style.display = 'none';
|
||||
document.getElementById("{{ $chart->id }}").style.display = 'block';
|
||||
window.{{ $chart->id }} = new Chart(document.getElementById("{{ $chart->id }}").getContext("2d"), {
|
||||
type: {!! $chart->type ? "'{$chart->type}'" : 'data[0].type' !!},
|
||||
data: {
|
||||
labels: {!! $chart->formatLabels() !!},
|
||||
datasets: data
|
||||
},
|
||||
options: {!! $chart->formatOptions(true) !!},
|
||||
plugins: {!! $chart->formatPlugins(true) !!}
|
||||
});
|
||||
}
|
||||
@if ($chart->api_url)
|
||||
let {{ $chart->id }}_refresh = function (url) {
|
||||
document.getElementById("{{ $chart->id }}").style.display = 'none';
|
||||
document.getElementById("{{ $chart->id }}_loader").style.display = 'flex';
|
||||
if (typeof url !== 'undefined') {
|
||||
{{ $chart->id }}_api_url = url;
|
||||
}
|
||||
fetch({{ $chart->id }}_api_url)
|
||||
.then(data => data.json())
|
||||
.then(data => {
|
||||
document.getElementById("{{ $chart->id }}_loader").style.display = 'none';
|
||||
document.getElementById("{{ $chart->id }}").style.display = 'block';
|
||||
{{ $chart->id }}.data.datasets = data;
|
||||
{{ $chart->id }}.update();
|
||||
});
|
||||
};
|
||||
@endif
|
||||
@include('charts::init')
|
||||
|
||||
</script>
|
||||
3
resources/views/vendor/charts/echarts/container.blade.php
vendored
Normal file
3
resources/views/vendor/charts/echarts/container.blade.php
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
<div id="{{ $chart->id }}" {!! $chart->formatContainerOptions('css') !!}>
|
||||
</div>
|
||||
@include('charts::loader')
|
||||
29
resources/views/vendor/charts/echarts/script.blade.php
vendored
Normal file
29
resources/views/vendor/charts/echarts/script.blade.php
vendored
Normal file
@@ -0,0 +1,29 @@
|
||||
<script {!! $chart->displayScriptAttributes() !!}>
|
||||
function {{ $chart->id }}_create(data) {
|
||||
{{ $chart->id }}_rendered = true;
|
||||
document.getElementById("{{ $chart->id }}_loader").style.display = 'none';
|
||||
window.{{ $chart->id }} = echarts.init(document.getElementById("{{ $chart->id }}"),'{{ $chart->theme }}');
|
||||
window.{{ $chart->id }}.setOption({
|
||||
series: data,
|
||||
{!! $chart->formatOptions(false, true) !!}
|
||||
});
|
||||
}
|
||||
@if ($chart->api_url)
|
||||
let {{ $chart->id }}_refresh = function (url) {
|
||||
document.getElementById("{{ $chart->id }}").style.display = 'none';
|
||||
document.getElementById("{{ $chart->id }}_loader").style.display = 'flex';
|
||||
if (typeof url !== 'undefined') {
|
||||
{{ $chart->id }}_api_url = url;
|
||||
}
|
||||
|
||||
fetch({{ $chart->id }}_api_url)
|
||||
.then(data => data.json())
|
||||
.then(data => {
|
||||
document.getElementById("{{ $chart->id }}_loader").style.display = 'none';
|
||||
document.getElementById("{{ $chart->id }}").style.display = 'block';
|
||||
{{ $chart->id }}.setOption({series: data});
|
||||
});
|
||||
};
|
||||
@endif
|
||||
@include('charts::init')
|
||||
</script>
|
||||
3
resources/views/vendor/charts/frappe/container.blade.php
vendored
Normal file
3
resources/views/vendor/charts/frappe/container.blade.php
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
<div id="{{ $chart->id }}">
|
||||
</div>
|
||||
@include('charts::loader')
|
||||
44
resources/views/vendor/charts/frappe/script.blade.php
vendored
Normal file
44
resources/views/vendor/charts/frappe/script.blade.php
vendored
Normal file
@@ -0,0 +1,44 @@
|
||||
<script {!! $chart->displayScriptAttributes() !!}>
|
||||
function {{ $chart->id }}_getType(data) {
|
||||
var special_datasets = {!! json_encode($chart->special_datasets) !!};
|
||||
for (var i = 0; i < special_datasets.length; i++) {
|
||||
for (var k = 0; k < data.length; k++) {
|
||||
if (special_datasets[i] == data[k].chartType) {
|
||||
return special_datasets[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
return 'axis-mixed';
|
||||
}
|
||||
function {{ $chart->id }}_create(data) {
|
||||
{{ $chart->id }}_rendered = true;
|
||||
document.getElementById("{{ $chart->id }}_loader").style.display = 'none';
|
||||
window.{{ $chart->id }} = new frappe.Chart("#{{ $chart->id }}", {
|
||||
{!! $chart->formatContainerOptions('js') !!}
|
||||
labels: {!! $chart->formatLabels() !!},
|
||||
type: {{ $chart->id }}_getType(data),
|
||||
data: {
|
||||
labels: {!! $chart->formatLabels() !!},
|
||||
datasets: data
|
||||
},
|
||||
{!! $chart->formatOptions(false, true) !!}
|
||||
});
|
||||
}
|
||||
@if ($chart->api_url)
|
||||
let {{ $chart->id }}_refresh = function (url) {
|
||||
document.getElementById("{{ $chart->id }}").style.display = 'none';
|
||||
document.getElementById("{{ $chart->id }}_loader").style.display = 'flex';
|
||||
if (typeof url !== 'undefined') {
|
||||
{{ $chart->id }}_api_url = url;
|
||||
}
|
||||
fetch({{ $chart->id }}_api_url)
|
||||
.then(data => data.json())
|
||||
.then(data => {
|
||||
document.getElementById("{{ $chart->id }}_loader").style.display = 'none';
|
||||
document.getElementById("{{ $chart->id }}").style.display = 'block';
|
||||
{{ $chart->id }}.update({labels: {!! $chart->formatLabels() !!}, datasets: data});
|
||||
});
|
||||
};
|
||||
@endif
|
||||
@include('charts::init')
|
||||
</script>
|
||||
3
resources/views/vendor/charts/fusioncharts/container.blade.php
vendored
Normal file
3
resources/views/vendor/charts/fusioncharts/container.blade.php
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
<div id="{{ $chart->id }}" {!! $chart->formatContainerOptions('css') !!}>
|
||||
</div>
|
||||
@include('charts::loader')
|
||||
48
resources/views/vendor/charts/fusioncharts/script.blade.php
vendored
Normal file
48
resources/views/vendor/charts/fusioncharts/script.blade.php
vendored
Normal file
@@ -0,0 +1,48 @@
|
||||
<script {!! $chart->displayScriptAttributes() !!}>
|
||||
function {{ $chart->id }}_create(data) {
|
||||
{{ $chart->id }}_rendered = true;
|
||||
document.getElementById("{{ $chart->id }}_loader").style.display = 'none';
|
||||
@if ($chart->type)
|
||||
let {{ $chart->id }}_type = {{ $chart->type }}
|
||||
@else
|
||||
let {{ $chart->id }}_type = data[0].renderAs;
|
||||
@endif
|
||||
if (!{!! json_encode($chart->keepType) !!}.includes({{ $chart->id }}_type)) {
|
||||
{{ $chart->id }}_type = "{{ $chart->comboType }}"
|
||||
}
|
||||
FusionCharts.ready(function () {
|
||||
window.{{ $chart->id }} = new FusionCharts({
|
||||
type: {{ $chart->id }}_type,
|
||||
renderAt: "{{ $chart->id }}",
|
||||
dataFormat: 'json',
|
||||
{!! $chart->formatContainerOptions('js', true) !!}
|
||||
dataSource: {
|
||||
categories: [{
|
||||
category: {!! $chart->formatLabels() !!}
|
||||
}],
|
||||
dataset: data,
|
||||
chart: {!! $chart->formatOptions(true) !!}
|
||||
}
|
||||
}).render();
|
||||
});
|
||||
}
|
||||
@if ($chart->api_url)
|
||||
let {{ $chart->id }}_refresh = function (url) {
|
||||
document.getElementById("{{ $chart->id }}").style.display = 'none';
|
||||
document.getElementById("{{ $chart->id }}_loader").style.display = 'flex';
|
||||
if (typeof url !== 'undefined') {
|
||||
{{ $chart->id }}_api_url = url;
|
||||
}
|
||||
fetch({{ $chart->id }}_api_url)
|
||||
.then(data => data.json())
|
||||
.then(data => {
|
||||
document.getElementById("{{ $chart->id }}_loader").style.display = 'none';
|
||||
document.getElementById("{{ $chart->id }}").style.display = 'block';
|
||||
let chartData = {{ $chart->id }}.getChartData("json");
|
||||
chartData.dataset = data;
|
||||
{{ $chart->id }}.setChartData(chartData, "json");
|
||||
});
|
||||
};
|
||||
@endif
|
||||
@include('charts::init')
|
||||
</script>
|
||||
3
resources/views/vendor/charts/highcharts/container.blade.php
vendored
Normal file
3
resources/views/vendor/charts/highcharts/container.blade.php
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
<div id="{{ $chart->id }}" {!! $chart->formatContainerOptions('css') !!}>
|
||||
</div>
|
||||
@include('charts::loader')
|
||||
27
resources/views/vendor/charts/highcharts/script.blade.php
vendored
Normal file
27
resources/views/vendor/charts/highcharts/script.blade.php
vendored
Normal file
@@ -0,0 +1,27 @@
|
||||
<script {!! $chart->displayScriptAttributes() !!}>
|
||||
function {{ $chart->id }}_create(data) {
|
||||
{{ $chart->id }}_rendered = true;
|
||||
document.getElementById("{{ $chart->id }}_loader").style.display = 'none';
|
||||
window.{{ $chart->id }} = new Highcharts.Chart("{{ $chart->id }}", {
|
||||
series: data,
|
||||
{!! $chart->formatOptions(false, true) !!}
|
||||
});
|
||||
}
|
||||
@if ($chart->api_url)
|
||||
let {{ $chart->id }}_refresh = function (url) {
|
||||
document.getElementById("{{ $chart->id }}").style.display = 'none';
|
||||
document.getElementById("{{ $chart->id }}_loader").style.display = 'flex';
|
||||
if (typeof url !== 'undefined') {
|
||||
{{ $chart->id }}_api_url = url;
|
||||
}
|
||||
fetch({{ $chart->id }}_api_url)
|
||||
.then(data => data.json())
|
||||
.then(data => {
|
||||
document.getElementById("{{ $chart->id }}_loader").style.display = 'none';
|
||||
document.getElementById("{{ $chart->id }}").style.display = 'block';
|
||||
{{ $chart->id }}.update({series: data});
|
||||
});
|
||||
};
|
||||
@endif
|
||||
@include('charts::init')
|
||||
</script>
|
||||
17
resources/views/vendor/charts/init.blade.php
vendored
Normal file
17
resources/views/vendor/charts/init.blade.php
vendored
Normal file
@@ -0,0 +1,17 @@
|
||||
let {{ $chart->id }}_rendered = false;
|
||||
@if ($chart->api_url)
|
||||
let {{ $chart->id }}_api_url = "{!! $chart->api_url !!}";
|
||||
@endif
|
||||
let {{ $chart->id }}_load = function () {
|
||||
if (document.getElementById("{{ $chart->id }}") && !{{ $chart->id }}_rendered) {
|
||||
@if ($chart->api_url)
|
||||
fetch({{ $chart->id }}_api_url)
|
||||
.then(data => data.json())
|
||||
.then(data => { {{ $chart->id }}_create(data) });
|
||||
@else
|
||||
{{ $chart->id }}_create({!! $chart->formatDatasets() !!})
|
||||
@endif
|
||||
}
|
||||
};
|
||||
window.addEventListener("load", {{ $chart->id }}_load);
|
||||
document.addEventListener("turbolinks:load", {{ $chart->id }}_load);
|
||||
40
resources/views/vendor/charts/loader.blade.php
vendored
Normal file
40
resources/views/vendor/charts/loader.blade.php
vendored
Normal file
@@ -0,0 +1,40 @@
|
||||
<div id="{{ $chart->id }}_loader" style="
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
opacity: {{ $chart->loader ? '1' : '0' }};
|
||||
align-items: center;
|
||||
{{ $chart->height ? 'height: ' . $chart->height . 'px;' : '' }}
|
||||
{{ $chart->width ? 'width: ' . $chart->width . 'px;' : '' }}
|
||||
">
|
||||
<svg width="50" height="50" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
|
||||
<stop stop-color="{{ $chart->loaderColor }}" stop-opacity="0" offset="0%"/>
|
||||
<stop stop-color="{{ $chart->loaderColor }}" stop-opacity=".631" offset="63.146%"/>
|
||||
<stop stop-color="{{ $chart->loaderColor }}" offset="100%"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g transform="translate(1 1)">
|
||||
<path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke="url(#a)" stroke-width="2">
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
from="0 18 18"
|
||||
to="360 18 18"
|
||||
dur="0.9s"
|
||||
repeatCount="indefinite" />
|
||||
</path>
|
||||
<circle fill="{{ $chart->loaderColor }}" cx="36" cy="18" r="1">
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
from="0 18 18"
|
||||
to="360 18 18"
|
||||
dur="0.9s"
|
||||
repeatCount="indefinite" />
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
Reference in New Issue
Block a user