[WIP] Setup of skeleton

This commit is contained in:
Ludovic CANDELLIER
2020-03-25 00:08:27 +01:00
parent baf8e13c25
commit 36267139a1
377 changed files with 18248 additions and 26 deletions

View File

@@ -0,0 +1,3 @@
# Charts Views
All the charts views are located in this folder

View File

@@ -0,0 +1,3 @@
<div id="{{ $chart->id }}" {!! $chart->formatContainerOptions('css') !!}>
</div>
@include('charts::loader')

View 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>

View File

@@ -0,0 +1,2 @@
<canvas style="display: none;" id="{{ $chart->id }}" {!! $chart->formatContainerOptions('html') !!}></canvas>
@include('charts::loader')

View 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>

View File

@@ -0,0 +1,3 @@
<div id="{{ $chart->id }}" {!! $chart->formatContainerOptions('css') !!}>
</div>
@include('charts::loader')

View 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>

View File

@@ -0,0 +1,3 @@
<div id="{{ $chart->id }}">
</div>
@include('charts::loader')

View 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>

View File

@@ -0,0 +1,3 @@
<div id="{{ $chart->id }}" {!! $chart->formatContainerOptions('css') !!}>
</div>
@include('charts::loader')

View 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>

View File

@@ -0,0 +1,3 @@
<div id="{{ $chart->id }}" {!! $chart->formatContainerOptions('css') !!}>
</div>
@include('charts::loader')

View 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>

View 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);

View 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>