Skip to content

Commit

Permalink
automatic color guess
Browse files Browse the repository at this point in the history
  • Loading branch information
@benoitdemaegdt
benoitdemaegdt committed Nov 6, 2023
1 parent 3f1a92c commit efec70d
Show file tree
Hide file tree
Showing 17 changed files with 107 additions and 371 deletions.
2 changes: 1 addition & 1 deletion .github/scripts/check_data_health.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ function checkGeoJsonDataHealth() {
allLineStrings.push(feature);
// 2 - check if all properties are present
const properties = feature.properties || {};
const requiredKeys = ['line', 'color', 'name', 'status'];
const requiredKeys = ['line', 'name', 'status'];
for (const key of requiredKeys) {
if (!properties.hasOwnProperty(key)) {
console.error(`Missing key '${key}' in LineString properties of file: ${filePath}`);
Expand Down
20 changes: 20 additions & 0 deletions composables/useColors.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
export const useColors = () => {
function getLineColor(line: number): string {
const colors = new Map();
colors.set(1, '#60A75B');
colors.set(2, '#AC4D35');
colors.set(3, '#3B7B64');
colors.set(4, '#DC8953');
colors.set(5, '#AF7392');

This comment has been minimized.

Sign in to view

Copy link
@laem

laem Nov 17, 2023

@benoitdemaegdt Mince, ce changement a cassé mon intégration. Le fait que toutes les données étaient dans les lignes-[x].json était pratique pour moi.

Quelle était la justification pour ne pas les inclure dans les propriétés des lignes ?

This comment has been minimized.

Sign in to view

Copy link
@laem

laem Nov 17, 2023

Potentiellement, un fichier de correspondance des couleurs en yaml à côté pourrait être un compromis. Pour ne pas avoir à exécuter du JS côté réintégration :)

This comment has been minimized.

Sign in to view

Copy link
@laem

laem Nov 17, 2023

J'ai fait ça en attendant ton avis laem/villes.plus@0e26472#diff-6f6e0406efb9260410cc9696e28b8dc64e25142596bb7226cf0beac9c6d5cbdc

This comment has been minimized.

Sign in to view

Copy link
@benoitdemaegdt

benoitdemaegdt Nov 20, 2023

Author Owner

Aïe, désolé pour le breaking change 😬
En fait j'ai fait 2-3 ajustements pour limiter les possibilités d'erreur :

  • github action qui vérifie la cohérence ces données
  • suppression des données qui peuvent être déterminées automatiquement, plutôt que de les laisser en dur dans le json ("color" et "distance" pour le moment, peut-être "line" un jour).

Il s'avère que c'est plus pratique pour faire évoluer les données du site, donc je ne vais probablement pas revenir en arrière.
L'ajout du map de ton côté ne semble pas trop contraignant. On reste comme ça ? Je peux aussi créer un fichier de config de mon côté si tu préfères 🤷
colors.set(6, '#396083');
colors.set(7, '#75BCAE');
colors.set(8, '#7E6D98');
colors.set(9, '#EAAB50');
colors.set(10, '#9A8A4B');
colors.set(11, '#4DADC9');
colors.set(12, '#DBABB7');
return colors.get(line);
}

return { getLineColor };
};
95 changes: 76 additions & 19 deletions composables/useMap.ts
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
import maplibregl from 'maplibre-gl';

type Properties = {
type Feature = {
type: 'Feature';
properties: {
line: number;
color: string;
name: string;
distance: number;
status: string;
doneAt?: string;
};
Expand Down Expand Up @@ -44,7 +42,7 @@ function getCrossIconUrl(color: string): string {
return canvas.toDataURL();
}

function groupFeaturesByColor(features: Properties[]) {
function groupFeaturesByColor(features: Feature[]) {
const featuresByColor = {};
for (const feature of features) {
const color = feature.properties.color;
Expand All @@ -59,14 +57,23 @@ function groupFeaturesByColor(features: Properties[]) {
}

export const useMap = () => {
function plotDoneSections({ map, features }) {
const { getLineColor } = useColors();

function plotDoneSections({ map, features }: { map: any; features: Feature[] }) {
const sections = features
.filter(feature => feature.properties.status === 'done')
.sort((featureA, featureB) => {
const lineA = featureA.properties.line;
const lineB = featureB.properties.line;
return sortOrder.indexOf(lineA) - sortOrder.indexOf(lineB);
});
})
.map(feature => ({
...feature,
properties: {
color: getLineColor(feature.properties.line),
...feature.properties
}
}));
if (sections.length === 0) {
return;
}
Expand All @@ -88,14 +95,21 @@ export const useMap = () => {
map.on('mouseleave', 'done-sections', () => (map.getCanvas().style.cursor = ''));
}

function plotWipSections({ map, features }) {
function plotWipSections({ map, features }: { map: any; features: Feature[] }) {
const sections = features
.filter(feature => feature.properties.status === 'wip')
.sort((featureA, featureB) => {
const lineA = featureA.properties.line;
const lineB = featureB.properties.line;
return sortOrder.indexOf(lineA) - sortOrder.indexOf(lineB);
});
})
.map(feature => ({
...feature,
properties: {
color: getLineColor(feature.properties.line),
...feature.properties
}
}));
if (sections.length === 0) {
return;
}
Expand Down Expand Up @@ -144,14 +158,21 @@ export const useMap = () => {
map.on('mouseleave', 'wip-sections', () => (map.getCanvas().style.cursor = ''));
}

function plotPlannedSections({ map, features }) {
function plotPlannedSections({ map, features }: { map: any; features: Feature[] }) {
const sections = features
.filter(feature => feature.properties.status === 'planned')
.sort((featureA, featureB) => {
const lineA = featureA.properties.line;
const lineB = featureB.properties.line;
return sortOrder.indexOf(lineA) - sortOrder.indexOf(lineB);
});
})
.map(feature => ({
...feature,
properties: {
color: getLineColor(feature.properties.line),
...feature.properties
}
}));

if (sections.length === 0) {
return;
Expand All @@ -175,14 +196,21 @@ export const useMap = () => {
map.on('mouseleave', 'not-done-sections', () => (map.getCanvas().style.cursor = ''));
}

function plotVarianteSections({ map, features }) {
function plotVarianteSections({ map, features }: { map: any; features: Feature[] }) {
const sections = features
.filter(feature => feature.properties.status === 'variante')
.sort((featureA, featureB) => {
const lineA = featureA.properties.line;
const lineB = featureB.properties.line;
return sortOrder.indexOf(lineA) - sortOrder.indexOf(lineB);
});
})
.map(feature => ({
...feature,
properties: {
color: getLineColor(feature.properties.line),
...feature.properties
}
}));
if (sections.length === 0) {
return;
}
Expand Down Expand Up @@ -222,14 +250,21 @@ export const useMap = () => {
map.on('mouseleave', 'variante-sections', () => (map.getCanvas().style.cursor = ''));
}

function plotVariantePostponedSections({ map, features }) {
function plotVariantePostponedSections({ map, features }: { map: any; features: Feature[] }) {
const sections = features
.filter(feature => feature.properties.status === 'variante-postponed')
.sort((featureA, featureB) => {
const lineA = featureA.properties.line;
const lineB = featureB.properties.line;
return sortOrder.indexOf(lineA) - sortOrder.indexOf(lineB);
});
})
.map(feature => ({
...feature,
properties: {
color: getLineColor(feature.properties.line),
...feature.properties
}
}));
if (sections.length === 0) {
return;
}
Expand Down Expand Up @@ -269,14 +304,21 @@ export const useMap = () => {
map.on('mouseleave', 'variante-postponed-sections', () => (map.getCanvas().style.cursor = ''));
}

function plotUnknownSections({ map, features }) {
function plotUnknownSections({ map, features }: { map: any; features: Feature[] }) {
const sections = features
.filter(feature => feature.properties.status === 'unknown')
.sort((featureA, featureB) => {
const lineA = featureA.properties.line;
const lineB = featureB.properties.line;
return sortOrder.indexOf(lineA) - sortOrder.indexOf(lineB);
});
})
.map(feature => ({
...feature,
properties: {
color: getLineColor(feature.properties.line),
...feature.properties
}
}));
if (sections.length === 0) {
return;
}
Expand Down Expand Up @@ -334,14 +376,21 @@ export const useMap = () => {
map.on('mouseleave', 'unknown-sections', () => (map.getCanvas().style.cursor = ''));
}

function plotPostponedSections({ map, features }) {
function plotPostponedSections({ map, features }: { map: any; features: Feature[] }) {
const sections = features
.filter(feature => feature.properties.status === 'postponed')
.sort((featureA, featureB) => {
const lineA = featureA.properties.line;
const lineB = featureB.properties.line;
return sortOrder.indexOf(lineA) - sortOrder.indexOf(lineB);
});
})
.map(feature => ({
...feature,
properties: {
color: getLineColor(feature.properties.line),
...feature.properties
}
}));
if (sections.length === 0) {
return;
}
Expand Down Expand Up @@ -395,7 +444,15 @@ export const useMap = () => {
}

function plotPois({ map, features }) {
const pois = features.filter(feature => feature.geometry.type === 'Point');
const pois = features
.filter(feature => feature.geometry.type === 'Point')
.map(feature => ({
...feature,
properties: {
color: getLineColor(feature.properties.line),
...feature.properties
}
}));
if (pois.length === 0) {
return;
}
Expand Down
3 changes: 1 addition & 2 deletions composables/useStats.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@ type Feature = {
type: string;
properties: {
id?: string;
line: string;
color: string;
line: number;
name: string;
status: string;
};
Expand Down
14 changes: 8 additions & 6 deletions composables/useTooltip.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@ type Feature = {
type: string;
properties: {
id?: string;
line: string;
color: string;
line: number;
name: string;
status: Status;
};
Expand All @@ -18,8 +17,7 @@ type Feature = {
};

type PoiProperties = {
line: string;
color: string;
line: number;
imgUrl: string;
};

Expand All @@ -37,9 +35,12 @@ function getStatusText(status: Status): string {
}

export const useTooltip = () => {
const { getLineColor } = useColors();

function getTooltipHtml(feature: Feature) {
const color = getLineColor(feature.properties.line);
return `
<div class="h-10 flex items-center" style="background-color: ${feature.properties.color}">
<div class="h-10 flex items-center" style="background-color: ${color}">
<div class="p-2">
<a class='text-white font-bold text-lg hover:underline' href='/voie-lyonnaise-${feature.properties.line}'>
Voie Lyonnaise ${feature.properties.line}
Expand All @@ -64,8 +65,9 @@ export const useTooltip = () => {
}

function getTooltipPoi(properties: PoiProperties) {
const color = getLineColor(properties.line);
return `
<div class="h-10 flex items-center" style="background-color: ${properties.color}">
<div class="h-10 flex items-center" style="background-color: ${color}">
<div class="p-2">
<a class='text-white font-bold text-lg hover:underline' href='/voie-lyonnaise-${properties.line}'>
Voie Lyonnaise ${properties.line}
Expand Down
Loading

0 comments on commit efec70d

Please sign in to comment.