|
|
@@ -38,17 +38,25 @@ const props = defineProps({
|
|
|
},
|
|
|
});
|
|
|
|
|
|
-const channelPalette = Object.freeze([
|
|
|
- "#FF3B30",
|
|
|
- "#00A6FB",
|
|
|
- "#FFC400",
|
|
|
- "#34C759",
|
|
|
- "#0052FF",
|
|
|
- "#FF7A00",
|
|
|
- "#5856D6",
|
|
|
- "#00C7BE",
|
|
|
- "#E53935",
|
|
|
- "#1D4ED8",
|
|
|
+const fixedChannelColors = Object.freeze({
|
|
|
+ airbnb: "#FF385C",
|
|
|
+ booking: "#60A5FA",
|
|
|
+ decolar: "#22C55E",
|
|
|
+ direto: "#F59E0B",
|
|
|
+ vrbo: "#0EA5E9",
|
|
|
+ sem_canal: "#B0BEC5",
|
|
|
+ raniery_kohler: "#A855F7",
|
|
|
+});
|
|
|
+
|
|
|
+const fallbackChannelPalette = Object.freeze([
|
|
|
+ "#A855F7",
|
|
|
+ "#8B5CF6",
|
|
|
+ "#C084FC",
|
|
|
+ "#9333EA",
|
|
|
+ "#D946EF",
|
|
|
+ "#7C3AED",
|
|
|
+ "#E879F9",
|
|
|
+ "#6D28D9",
|
|
|
]);
|
|
|
|
|
|
const normalize = (channel) => {
|
|
|
@@ -62,6 +70,22 @@ const normalize = (channel) => {
|
|
|
return "booking";
|
|
|
}
|
|
|
|
|
|
+ if (value.includes("decolar")) {
|
|
|
+ return "decolar";
|
|
|
+ }
|
|
|
+
|
|
|
+ if (
|
|
|
+ value.includes("sem canal") ||
|
|
|
+ value.includes("sem_canal") ||
|
|
|
+ value.includes("no channel")
|
|
|
+ ) {
|
|
|
+ return "sem_canal";
|
|
|
+ }
|
|
|
+
|
|
|
+ if (value.includes("raniery kohler")) {
|
|
|
+ return "raniery_kohler";
|
|
|
+ }
|
|
|
+
|
|
|
if (
|
|
|
value.includes("direto") ||
|
|
|
value.includes("direct") ||
|
|
|
@@ -79,21 +103,30 @@ const normalize = (channel) => {
|
|
|
return "outros";
|
|
|
};
|
|
|
|
|
|
-const buildFallbackColor = (index) => {
|
|
|
- const hue = (index * 47) % 360;
|
|
|
+const buildFallbackColor = (channel) => {
|
|
|
+ const seed = String(channel ?? "").trim().toLowerCase();
|
|
|
|
|
|
- return `hsl(${hue} 84% 52%)`;
|
|
|
+ let hash = 0;
|
|
|
+
|
|
|
+ for (let index = 0; index < seed.length; index += 1) {
|
|
|
+ hash = (hash * 31 + seed.charCodeAt(index)) % fallbackChannelPalette.length;
|
|
|
+ }
|
|
|
+
|
|
|
+ return fallbackChannelPalette[hash];
|
|
|
};
|
|
|
|
|
|
-const resolveChannelColor = (index) =>
|
|
|
- channelPalette[index] ?? buildFallbackColor(index);
|
|
|
+const resolveChannelColor = (channel) => {
|
|
|
+ const normalizedChannel = normalize(channel);
|
|
|
+
|
|
|
+ return fixedChannelColors[normalizedChannel] ?? buildFallbackColor(channel);
|
|
|
+};
|
|
|
|
|
|
const legendItems = computed(() =>
|
|
|
- props.channels.map((c, index) => ({
|
|
|
- key: `${normalize(c.channel)}-${index}`,
|
|
|
+ props.channels.map((c) => ({
|
|
|
+ key: String(c.channel ?? ""),
|
|
|
label: c.channel,
|
|
|
reservations_count: Number(c.reservations_count ?? 0),
|
|
|
- color: resolveChannelColor(index),
|
|
|
+ color: resolveChannelColor(c.channel),
|
|
|
})),
|
|
|
);
|
|
|
|
|
|
@@ -111,7 +144,7 @@ const chartData = computed(() => ({
|
|
|
backgroundColor: hasChannels.value
|
|
|
? legendItems.value.map((item) => item.color)
|
|
|
: ["#D9E3E7"],
|
|
|
- borderColor: "transparent",
|
|
|
+ // borderColor: "#FFFFFF",
|
|
|
borderWidth: 0,
|
|
|
},
|
|
|
],
|