mirror of
https://forge.chapril.org/tykayn/osm-commerces
synced 2025-10-04 17:04:53 +02:00
fix imports js
This commit is contained in:
Tykayn
tykayn
parent
ada9fa4029
commit
f785e67f49
6 changed files with 163 additions and 42 deletions
|
|
@ -23,7 +23,16 @@ import './dashboard-charts.js';
|
|||
import Chart from 'chart.js/auto';
|
||||
import ChartDataLabels from 'chartjs-plugin-datalabels';
|
||||
import maplibregl from 'maplibre-gl';
|
||||
import { genererCouleurPastel, setupCitySearch, handleAddCityFormSubmit, enableLabourageForm, getLabourerUrl, adjustListGroupFontSize, toggleCompletionInfo } from './utils.js';
|
||||
import {
|
||||
genererCouleurPastel,
|
||||
setupCitySearch,
|
||||
handleAddCityFormSubmit,
|
||||
enableLabourageForm,
|
||||
getLabourerUrl,
|
||||
adjustListGroupFontSize,
|
||||
toggleCompletionInfo,
|
||||
updateMapHeightForLargeScreens
|
||||
} from './utils.js';
|
||||
import Tablesort from 'tablesort';
|
||||
|
||||
window.Chart = Chart;
|
||||
|
|
@ -34,6 +43,7 @@ window.getLabourerUrl = getLabourerUrl;
|
|||
window.ChartDataLabels = ChartDataLabels;
|
||||
window.maplibregl = maplibregl;
|
||||
window.toggleCompletionInfo = toggleCompletionInfo;
|
||||
window.updateMapHeightForLargeScreens = updateMapHeightForLargeScreens;
|
||||
|
||||
Chart.register(ChartDataLabels);
|
||||
|
||||
|
|
@ -41,6 +51,11 @@ Chart.register(ChartDataLabels);
|
|||
document.addEventListener('DOMContentLoaded', () => {
|
||||
console.log('DOMContentLoaded');
|
||||
|
||||
if(updateMapHeightForLargeScreens){
|
||||
|
||||
updateMapHeightForLargeScreens();
|
||||
window.addEventListener('resize', updateMapHeightForLargeScreens);
|
||||
}
|
||||
|
||||
const randombg = genererCouleurPastel();
|
||||
// Appliquer la couleur au body
|
||||
|
|
@ -184,7 +199,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
});
|
||||
}
|
||||
|
||||
enableLabourageForm();
|
||||
enableLabourageForm();
|
||||
adjustListGroupFontSize('.list-group-item');
|
||||
});
|
||||
|
||||
|
|
@ -97,7 +97,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
align: 'center',
|
||||
color: '#000',
|
||||
display: true,
|
||||
font: { weight: 'bold' },
|
||||
font: { weight: '400', size : "1rem" },
|
||||
formatter: (value, context) => {
|
||||
return context.dataset.data[context.dataIndex].label;
|
||||
}
|
||||
|
|
@ -107,7 +107,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
label: 'Régression linéaire',
|
||||
type: 'line',
|
||||
data: regressionLine,
|
||||
borderColor: 'rgba(0, 0, 0, 0.7)',
|
||||
borderColor: 'rgba(162, 255, 40, 0.7)',
|
||||
borderWidth: 2,
|
||||
pointRadius: 0,
|
||||
fill: false,
|
||||
|
|
@ -135,7 +135,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
return [
|
||||
`${d.label}`,
|
||||
`Population: ${d.x.toLocaleString()}`,
|
||||
`Lieux / 1000 hab: ${d.y.toFixed(2)}`,
|
||||
`Lieux / hab: ${d.y.toFixed(2)}`,
|
||||
`Total lieux: ${Math.round(Math.pow(d.r / 2, 2))}`,
|
||||
`Complétion: ${d.completion}%`
|
||||
];
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@ async function searchInseeCode(query) {
|
|||
}
|
||||
}
|
||||
|
||||
function updateMapHeightForLargeScreens() {
|
||||
export function updateMapHeightForLargeScreens() {
|
||||
const mapFound = document.querySelector('#map');
|
||||
if (mapFound && window.innerHeight > 800 && window.innerWidth > 800) {
|
||||
mapFound.style.height = window.innerWidth * 0.8 + 'px';
|
||||
|
|
@ -171,13 +171,24 @@ export function enableLabourageForm() {
|
|||
const form = citySearchInput.closest('form');
|
||||
setupCitySearch('citySearch', 'citySuggestions', function (result_search) {
|
||||
if (form) {
|
||||
const labourageBtn = form.querySelector('.btn-labourer');
|
||||
const labourageBtn = form.querySelector('button[type="submit"]');
|
||||
if (labourageBtn) {
|
||||
labourageBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Chargement...';
|
||||
labourageBtn.disabled = true;
|
||||
// Remplir le champ caché avec le code INSEE
|
||||
const inseeInput = form.querySelector('#selectedZipCode');
|
||||
if (inseeInput) {
|
||||
inseeInput.value = result_search.insee;
|
||||
}
|
||||
// Changer l'action du formulaire pour pointer vers la bonne URL
|
||||
form.action = getLabourerUrl(result_search);
|
||||
|
||||
// Changer le texte du bouton et le désactiver
|
||||
labourageBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Labourage de ' + result_search.name + '...';
|
||||
labourageBtn.disabled = true;
|
||||
|
||||
// Soumettre le formulaire
|
||||
form.submit();
|
||||
}
|
||||
}
|
||||
window.location.href = getLabourerUrl(result_search);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -191,7 +202,7 @@ export function setupCitySearch(inputId, suggestionListId, onSelect) {
|
|||
let timeoutId = null;
|
||||
let searchOngoing = false;
|
||||
|
||||
searchInput.addEventListener('input', function () {
|
||||
searchInput.addEventListener('keyup', function () {
|
||||
clearTimeout(timeoutId);
|
||||
const query = this.value.trim();
|
||||
if (query.length < 3) {
|
||||
|
|
@ -329,7 +340,6 @@ export function calculateCompletion(properties) {
|
|||
if (properties.website || properties['contact:website']) completed++;
|
||||
if (properties.phone || properties['contact:phone']) completed++;
|
||||
if (properties.wheelchair) completed++;
|
||||
if (properties.note) completed++;
|
||||
|
||||
return {
|
||||
percentage: total > 0 ? (completed / total) * 100 : 0,
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ class Place
|
|||
#[ORM\Column(length: 10)]
|
||||
private ?string $osm_kind = null;
|
||||
|
||||
#[ORM\Column(length: 255)]
|
||||
#[ORM\Column(length: 255, nullable: true)]
|
||||
private ?string $email = null;
|
||||
|
||||
#[ORM\Column]
|
||||
|
|
@ -252,20 +252,31 @@ class Place
|
|||
|
||||
// Setters from tags
|
||||
$this->setName($tags['name'] ?? null);
|
||||
$this->setStreet($tags['addr:street'] ?? $tags['contact:street'] ?? null);
|
||||
$this->setHousenumber($tags['addr:housenumber'] ?? $tags['contact:housenumber'] ?? null);
|
||||
|
||||
$street = isset($tags['addr:street']) ? $tags['addr:street'] : (isset($tags['contact:street']) ? $tags['contact:street'] : null);
|
||||
$this->setStreet($street);
|
||||
|
||||
$housenumber = isset($tags['addr:housenumber']) ? $tags['addr:housenumber'] : (isset($tags['contact:housenumber']) ? $tags['contact:housenumber'] : null);
|
||||
$this->setHousenumber($housenumber);
|
||||
|
||||
if (isset($tags['addr:postcode'])) {
|
||||
$this->setZipCode(intval($tags['addr:postcode']));
|
||||
}
|
||||
$this->setEmail($tags['contact:email'] ?? $tags['email'] ?? null);
|
||||
$this->setSiret($tags['ref:FR:SIRET'] ?? null);
|
||||
|
||||
$email = isset($tags['contact:email']) ? $tags['contact:email'] : (isset($tags['email']) ? $tags['email'] : null);
|
||||
$this->setEmail($email);
|
||||
|
||||
$siret = isset($tags['ref:FR:SIRET']) ? $tags['ref:FR:SIRET'] : null;
|
||||
$this->setSiret($siret);
|
||||
|
||||
// Boolean "has" properties
|
||||
$this->setHasOpeningHours(!empty($tags['opening_hours']));
|
||||
$this->setHasWheelchair(!empty($tags['wheelchair']));
|
||||
|
||||
// has address logic
|
||||
$this->setHasAddress(!empty($this->getStreet()) && !empty($this->getHousenumber()));
|
||||
|
||||
$this->setHasAddress(!empty($this->getStreet()) && !empty($this->getHousenumber())
|
||||
| (isset($tags['addr:street']) && isset($tags['addr:housenumber'])) );
|
||||
|
||||
// has website logic (with multiple possible tags)
|
||||
$websiteTags = ['website', 'contact:website', 'url', 'contact:url'];
|
||||
|
|
@ -277,6 +288,7 @@ class Place
|
|||
}
|
||||
}
|
||||
$this->setHasWebsite($hasWebsite);
|
||||
|
||||
|
||||
// has note logic
|
||||
$noteContent = '';
|
||||
|
|
@ -335,7 +347,7 @@ class Place
|
|||
return $this->email;
|
||||
}
|
||||
|
||||
public function setEmail(string $email): static
|
||||
public function setEmail(?string $email): static
|
||||
{
|
||||
$this->email = $email;
|
||||
|
||||
|
|
|
|||
|
|
@ -305,7 +305,8 @@
|
|||
|
||||
{% block javascripts %}
|
||||
{{ parent() }}
|
||||
<script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const geojsonData = {{ geojson|raw }};
|
||||
const map_token = "{{ maptiler_token }}";
|
||||
|
|
@ -520,11 +521,105 @@
|
|||
} else if (modifCanvas) {
|
||||
modifCanvas.parentNode.innerHTML = '<div class="alert alert-info">Aucune donnée de modification disponible pour cette ville.</div>';
|
||||
}
|
||||
|
||||
// Créer un graphique de la répartition des tags
|
||||
const tagsCount = {};
|
||||
const places = {{ geojson|raw }}.features;
|
||||
|
||||
places.forEach(place => {
|
||||
const mainTag = place.properties.main_tag;
|
||||
if (mainTag) {
|
||||
tagsCount[mainTag] = (tagsCount[mainTag] || 0) + 1;
|
||||
}
|
||||
});
|
||||
|
||||
const sortedTags = Object.entries(tagsCount).sort(([, a], [, b]) => b - a);
|
||||
const labels = sortedTags.map(item => item[0]);
|
||||
const data = sortedTags.map(item => item[1]);
|
||||
const container_tags= document.getElementById('repartition_tags');
|
||||
if(!container_tags){
|
||||
console.log('pas de container_tags', container_tags)
|
||||
return;
|
||||
}
|
||||
const ctx = container_tags.getContext ? container_tags.getContext('2d') : null;
|
||||
if(ctx){
|
||||
|
||||
new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: 'Répartition des tags',
|
||||
data: data,
|
||||
backgroundColor: 'rgba(54, 162, 235, 0.5)',
|
||||
borderColor: 'rgba(54, 162, 235, 1)',
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
indexAxis: 'y',
|
||||
scales: {
|
||||
x: {
|
||||
beginAtZero: true
|
||||
}
|
||||
},
|
||||
responsive: true,
|
||||
maintainAspectRatio: false
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
// Graphique de distribution du taux de complétion
|
||||
const completionData = [];
|
||||
{% for commerce in stats.places %}
|
||||
completionData.push({{ commerce.getCompletionPercentage() }});
|
||||
{% endfor %}
|
||||
|
||||
const completionDistribution = {};
|
||||
completionData.forEach(percent => {
|
||||
const range = Math.floor(percent / 10) * 10;
|
||||
const key = `${range}-${range + 10}%`;
|
||||
completionDistribution[key] = (completionDistribution[key] || 0) + 1;
|
||||
});
|
||||
|
||||
const completionLabels = Object.keys(completionDistribution).sort((a, b) => {
|
||||
return parseInt(a.split('-')[0]) - parseInt(b.split('-')[0]);
|
||||
});
|
||||
const completionValues = completionLabels.map(label => completionDistribution[label]);
|
||||
const dc = document.getElementById('distribution_completion');
|
||||
|
||||
if(dc ){
|
||||
const completionCtx = dc.getContext ? dc.getContext('2d') : null;
|
||||
if(!completionCtx){
|
||||
console.log('pas de completionCtx' )
|
||||
return ;
|
||||
}
|
||||
new Chart(completionCtx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: completionLabels,
|
||||
datasets: [{
|
||||
label: 'Distribution du Taux de Complétion',
|
||||
data: completionValues,
|
||||
backgroundColor: 'rgba(75, 192, 192, 0.5)',
|
||||
borderColor: 'rgba(75, 192, 192, 1)',
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
},
|
||||
responsive: true,
|
||||
maintainAspectRatio: false
|
||||
}
|
||||
});
|
||||
}else{
|
||||
console.log('pas de distribution_completion')
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
window.modificationsByQuarter = {{ modificationsByQuarter|raw }};
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -260,20 +260,9 @@
|
|||
{
|
||||
label: 'Villes',
|
||||
data: bubbleChartData,
|
||||
backgroundColor: bubbleChartData.map(d => `rgba(255, 99, 132, ${d.completion / 100})`),
|
||||
borderColor: 'rgba(255, 99, 132, 1)',
|
||||
},
|
||||
// regressionLine ? {
|
||||
// label: 'Régression linéaire',
|
||||
// type: 'line',
|
||||
// data: regressionLine,
|
||||
// borderColor: 'rgba(0, 0, 0, 0.7)',
|
||||
// borderWidth: 2,
|
||||
// pointRadius: 0,
|
||||
// fill: false,
|
||||
// order: 0,
|
||||
// tension: 0
|
||||
// } : null
|
||||
backgroundColor: bubbleChartData.map(d => `rgba(75, 192, 192, ${d.completion / 100})`),
|
||||
borderColor: 'rgba(75, 192, 192, 1)',
|
||||
},
|
||||
].filter(Boolean)
|
||||
},
|
||||
options: {
|
||||
|
|
@ -284,7 +273,8 @@
|
|||
align: 'center',
|
||||
color: '#000',
|
||||
font: {
|
||||
weight: 'bold'
|
||||
weight: '400',
|
||||
size: "10px",
|
||||
},
|
||||
formatter: (value, context) => {
|
||||
return context.dataset.data[context.dataIndex].label;
|
||||
|
|
@ -303,7 +293,7 @@
|
|||
return [
|
||||
`${d.label}`,
|
||||
`Population: ${d.x.toLocaleString()}`,
|
||||
`Lieux / 1000 hab: ${d.y.toFixed(2)}`,
|
||||
`Lieux / hab: ${d.y.toFixed(2)}`,
|
||||
`Total lieux: ${Math.round(Math.pow(d.r / 2, 2))}`,
|
||||
`Complétion: ${d.completion}%`
|
||||
];
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue