Skip to content

Commit

Permalink
color chart
Browse files Browse the repository at this point in the history
  • Loading branch information
@geoffreyaldebert
geoffreyaldebert committed Dec 3, 2024
1 parent 5125ced commit d3f8cf8
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 79 deletions.
152 changes: 73 additions & 79 deletions frontend/src/components/MapComponent.vue
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,43 @@
<template>
<div>
<div
ref="mapTooltip"
class="map_tooltip"
v-show="tooltip.visibility == 'visible'"
:style="{ top: tooltip.top, left: tooltip.left }"
>
<MapTooltipComponent
:tooltip="tooltip"
:tooltipTitle="tooltipTitle"
/>
<div>
<div
ref="mapTooltip"
class="map_tooltip"
v-show="tooltip.visibility == 'visible'"
:style="{ top: tooltip.top, left: tooltip.left }"
>
<div class="tooltip_body">
<b>{{ depName }}</b>
<br />
<span v-if="tooltip.mode == 'parcelle'">parcelle numéro </span>
{{ tooltip.value }}
<span v-if="tooltip.mode == 'departement'"> transactions</span>
</div>
</div>
<div id="map" style="width: 100%; height: 100vh;"></div>
<div id="sidebar" class="floating-sidebar"></div>
</div>
<div id="map" style="width: 100%; height: 100vh;"></div>
<div id="sidebar" class="floating-sidebar"></div>
</div>
</template>

<script lang="ts">
import fullPeriodData from "@/assets/json/full_period.json";
import styleVector from "@/assets/json/vector.json";
import MapTooltipComponent from "@/components/map/MapTooltipComponent.vue";
import { useAppStore } from "@/store/appStore.ts";
import { getColorsForNatureCulture } from "@/types/NatureCulture";
import * as d3 from "d3-scale";
import maplibregl, { type Map as MapLibreMap } from "maplibre-gl";
import type { LngLatLike, StyleSpecification } from "maplibre-gl";
import type {
LngLatLike,
StyleSpecification,
} from "maplibre-gl";
import { type Ref, defineComponent, onMounted, ref, watch } from "vue";
export default defineComponent({
name: "MapComponent",
components: {
MapTooltipComponent,
},
setup() {
const appStore = useAppStore();
const map: Ref<MapLibreMap | null> = ref(null);
let displayDepLayer = true;
const tooltipTitle = ref(""); // Initialize as an empty string
const depName = ref(null);
const tooltip = ref({
top: "0px",
Expand All @@ -47,38 +48,32 @@ export default defineComponent({
value: 0,
});
const calculateColor = (
value: number,
natureCultureCode: string,
scaleMax: number,
) => {
const calculateColor = (value: number, scaleMax: number) => {
const scaleMin = 0;
const pivot = scaleMax / 2;
const colors = getColorsForNatureCulture(natureCultureCode);
const scale = d3
.scaleLinear<string>()
.domain([scaleMin, pivot, scaleMax])
.range(colors);
.range(["#FFFFFF", "#FFEF74", "#D1C060", "#A5934D", "#816E3D", "#56422A"]);
return scale(value);
};
const updateMap = (natureCultureCode: string) => {
const updateMap = (value: string) => {
if (!map.value) return;
const resultArray = [];
resultArray.push("match");
resultArray.push(["get", "code"]);
const entries = Object.entries(
fullPeriodData[natureCultureCode as keyof typeof fullPeriodData],
);
const entries = Object.entries(fullPeriodData[value as keyof typeof fullPeriodData]);
const maxValue = Math.max(...entries.map(([_, value]) => Number(value)));
for (const [key, value] of entries) {
resultArray.push(
key,
calculateColor(Number(value), natureCultureCode, maxValue),
);
}
console.log(maxValue);
entries.forEach(
([key, value]) => {
resultArray.push(key, calculateColor(Number(value), maxValue));
},
);
resultArray.push("#CCCCCC");
map.value.setPaintProperty(
"departements_fill",
Expand All @@ -90,11 +85,8 @@ export default defineComponent({
const displayTooltip = (e: any) => {
const tooltipX = e.point.x;
const tooltipY = e.point.y;
tooltip.value.top = `${tooltipY}px`;
tooltip.value.left = `${tooltipY}px`;
if (tooltip.value.mode === "parcelle") {
// No need to set tooltipData here anymore
}
tooltip.value.top = tooltipY + "px";
tooltip.value.left = tooltipX + "px";
};
onMounted(() => {
Expand Down Expand Up @@ -132,10 +124,10 @@ export default defineComponent({
});
mapInstance.on("mousemove", "departements_fill", (e: any) => {
tooltipTitle.value = e.features[0]["properties"]["nom"];
depName.value = e.features[0]["properties"]["nom"];
const depCode = e.features[0]["properties"]["code"];
appStore.updateMouseDep(depCode);
appStore.updateMouseDepName(depName.value);
if (depName.value) { appStore.updateMouseDepName(depName.value); }
tooltip.value.mode = "departement";
tooltip.value.value = (
fullPeriodData[
Expand Down Expand Up @@ -207,53 +199,55 @@ export default defineComponent({
},
);
return { map, tooltip, tooltipTitle };
return { map, tooltip, depName };
},
});
</script>

<style scoped>
#map {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.floating-sidebar {
position: absolute;
top: 20px;
left: 20px;
width: 250px;
background-color: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 15px;
z-index: 1;
position: absolute;
top: 20px;
left: 20px;
width: 250px;
background-color: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 15px;
z-index: 1;
}
.map_tooltip {
width: auto;
min-width: 165px;
height: auto;
background-color: white;
position: absolute;
z-index: 999;
border-radius: 4px;
box-shadow: 0 8px 16px 0 rgba(22, 22, 22, 0.12),
0 8px 16px -16px rgba(22, 22, 22, 0.32);
text-align: left;
pointer-events: none;
font-size: 0.75rem;
width: auto;
min-width: 165px;
height: auto;
background-color: white;
position: absolute;
z-index: 999;
border-radius: 4px;
box-shadow: 0 8px 16px 0 rgba(22, 22, 22, 0.12),
0 8px 16px -16px rgba(22, 22, 22, 0.32);
text-align: left;
pointer-events: none;
font-size: 0.75rem;
}
.tooltip_body {
padding-left: 0.75rem;
padding-top: 0.25rem;
padding-right: 0.75rem;
line-height: 1.67;
padding-left: 0.75rem;
padding-top: 0.25rem;
padding-right: 0.75rem;
line-height: 1.67;
}
</style>
</style>
1 change: 1 addition & 0 deletions frontend/src/components/sidebar/TileTwo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ export default defineComponent({
watch(() => appStore.option, (newValue: string) => {
data.value = monthNatData[newValue];
level.value = "National";
color.value = getColorsForNatureCulture(appStore.option)[3]
chartKey.value++;
});
Expand Down

0 comments on commit d3f8cf8

Please sign in to comment.