fixing tests issues

fangedShadow · fangedShadow · commit 9432302265b0 · 2025-12-12T01:09:02.000-05:00
diff --git a/src/components/LBDashboard/LbAnalytics/DemandOverTime/PropertyDemandChart.jsx b/src/components/LBDashboard/LbAnalytics/DemandOverTime/PropertyDemandChart.jsx
@@ -13,6 +13,12 @@ import {
   Tooltip,
   Title as ChartTitle,
 } from 'chart.js';
+import {
+  getItemColors,
+  createChartOptions,
+  createDatasets,
+  getChartTitle,
+} from '../../../../utils/lbDashboard/chartsUtils';
 
 ChartJS.register(
   LineElement,
@@ -25,128 +31,15 @@ ChartJS.register(
   ChartDataLabels,
 );
 
-const metricLabels = {
-  pageVisits: 'Page Visits',
-  numberOfBids: 'Number of Bids',
-  averageRating: 'Average Rating',
-  averageBid: 'Average Bid',
-  finalPrice: 'Final Price/Income',
-  occupancyRate: 'Occupancy Rate (%)',
-  averageDuration: 'Average Duration of Stay (days)',
-};
-
-const metricCategories = {
-  pageVisits: 'Demand',
-  numberOfBids: 'Demand',
-  averageRating: 'Demand',
-  averageBid: 'Revenue',
-  finalPrice: 'Revenue',
-  occupancyRate: 'Vacancy',
-  averageDuration: 'Vacancy',
-};
-
-function getPropertyColors(properties) {
-  const colors = [
-    '#FF6B6B',
-    '#4ECDC4',
-    '#FFD93D',
-    '#1A535C',
-    '#FF9F1C',
-    '#2EC4B6',
-    '#E71D36',
-    '#3A86FF',
-  ];
-  const colorMap = {};
-  let idx = 0;
-  properties.forEach(p => {
-    if (!colorMap[p]) {
-      colorMap[p] = colors[idx % colors.length];
-      idx++;
-    }
-  });
-  return colorMap;
-}
-
 const PropertyDemandChart = ({ data, metric, chartLabel, darkMode }) => {
   const months = data.length > 0 ? data[0].data.map(d => d.month) : [];
-
   const propertyNames = data.map(p => p.name);
-  const propertyColors = getPropertyColors(propertyNames);
-
-  const datasets = data.map(property => ({
-    label: property.name,
-    data: property.data.map(point => point.value),
-    borderColor: propertyColors[property.name],
-    backgroundColor: propertyColors[property.name],
-    fill: false,
-    tension: 0.4,
-    pointRadius: 5,
-    pointHoverRadius: 7,
-  }));
-
-  const chartData = {
-    labels: months,
-    datasets,
-  };
-
-  const options = {
-    responsive: true,
-    maintainAspectRatio: false,
-    plugins: {
-      legend: {
-        position: 'bottom',
-        labels: { font: { size: 13 }, color: darkMode ? '#fff' : '#222' },
-      },
-      title: { display: false },
-      datalabels: {
-        color: darkMode ? '#fff' : '#333',
-        font: { weight: 'bold', size: 11 },
-        align: 'top',
-        anchor: 'end',
-        offset: 4,
-        clip: false,
-        display: 'auto',
-        formatter: value => value,
-      },
-      tooltip: {
-        enabled: true,
-        callbacks: {
-          label: function(context) {
-            return `${context.dataset.label}: ${context.parsed.y}`;
-          },
-        },
-      },
-    },
-    layout: {
-      padding: 20,
-    },
-    scales: {
-      x: {
-        title: { display: true, text: 'Month', color: darkMode ? '#fff' : '#222' },
-        offset: true,
-        ticks: {
-          autoSkip: false,
-          maxRotation: 45,
-          minRotation: 30,
-          font: { size: 12 },
-          color: darkMode ? '#fff' : '#222',
-        },
-      },
-      y: {
-        title: {
-          display: true,
-          text: metricLabels[metric] || metric,
-          color: darkMode ? '#fff' : '#222',
-        },
-        beginAtZero: true,
-        ticks: { font: { size: 12 }, color: darkMode ? '#fff' : '#222' },
-      },
-    },
-  };
+  const propertyColors = getItemColors(propertyNames);
+  const datasets = createDatasets(data, propertyColors);
 
-  const chartTitleText =
-    chartLabel ||
-    `${metricCategories[metric] || 'Metric'}: ${metricLabels[metric] || metric} by Property`;
+  const chartData = { labels: months, datasets };
+  const options = createChartOptions(metric, darkMode);
+  const chartTitleText = getChartTitle(chartLabel, metric, 'Property');
 
   return (
     <div className={`${styles.chartCard} ${darkMode ? styles.darkChartCard : ''}`}>
diff --git a/src/components/LBDashboard/LbAnalytics/DemandOverTime/VillageDemandChart.jsx b/src/components/LBDashboard/LbAnalytics/DemandOverTime/VillageDemandChart.jsx
@@ -13,6 +13,12 @@ import {
   Tooltip,
   Title as ChartTitle,
 } from 'chart.js';
+import {
+  getItemColors,
+  createChartOptions,
+  createDatasets,
+  getChartTitle,
+} from '../../../../utils/lbDashboard/chartsUtils';
 
 ChartJS.register(
   LineElement,
@@ -25,137 +31,19 @@ ChartJS.register(
   ChartDataLabels,
 );
 
-const metricLabels = {
-  pageVisits: 'Page Visits',
-  numberOfBids: 'Number of Bids',
-  averageRating: 'Average Rating',
-  averageBid: 'Average Bid',
-  finalPrice: 'Final Price/Income',
-  occupancyRate: 'Occupancy Rate (%)',
-  averageDuration: 'Average Duration of Stay (days)',
-};
-
-const metricCategories = {
-  pageVisits: 'Demand',
-  numberOfBids: 'Demand',
-  averageRating: 'Demand',
-  averageBid: 'Revenue',
-  finalPrice: 'Revenue',
-  occupancyRate: 'Vacancy',
-  averageDuration: 'Vacancy',
-};
-
-function getVillageColors(villages) {
-  const colors = [
-    '#FF6B6B',
-    '#4ECDC4',
-    '#FFD93D',
-    '#1A535C',
-    '#FF9F1C',
-    '#2EC4B6',
-    '#E71D36',
-    '#3A86FF',
-  ];
-  const colorMap = {};
-  let idx = 0;
-  villages.forEach(v => {
-    if (!colorMap[v]) {
-      colorMap[v] = colors[idx % colors.length];
-      idx++;
-    }
-  });
-  return colorMap;
-}
-
 const VillageDemandChart = ({ data, metric, chartLabel, darkMode }) => {
   const months = data.length > 0 ? data[0].data.map(d => d.month) : [];
-
   const villageNames = data.map(v => v.name);
-  const villageColors = getVillageColors(villageNames);
-
-  const datasets = data.map(village => ({
-    label: village.name,
-    data: village.data.map(point => point.value),
-    borderColor: villageColors[village.name],
-    backgroundColor: villageColors[village.name],
-    fill: false,
-    tension: 0.4,
-    pointRadius: 5,
-    pointHoverRadius: 7,
-  }));
-
-  const chartData = {
-    labels: months,
-    datasets,
-  };
+  const villageColors = getItemColors(villageNames);
+  const datasets = createDatasets(data, villageColors);
 
-  const options = {
-    responsive: true,
-    maintainAspectRatio: false,
-    plugins: {
-      legend: {
-        position: 'bottom',
-        labels: { font: { size: 13 }, color: darkMode ? '#fff' : '#222' },
-      },
-      title: { display: false },
-      datalabels: {
-        color: darkMode ? '#fff' : '#333',
-        font: { weight: 'bold', size: 11 },
-        align: 'top',
-        anchor: 'end',
-        offset: 4,
-        clip: false,
-        display: 'auto',
-        formatter: value => value,
-      },
-      tooltip: {
-        enabled: true,
-        callbacks: {
-          label: function(context) {
-            return `${context.dataset.label}: ${context.parsed.y}`;
-          },
-        },
-      },
-    },
-    layout: {
-      padding: 20,
-    },
-    scales: {
-      x: {
-        title: { display: true, text: 'Month', color: darkMode ? '#fff' : '#222' },
-        offset: true,
-        ticks: {
-          autoSkip: false,
-          maxRotation: 45,
-          minRotation: 30,
-          font: { size: 12 },
-          color: darkMode ? '#fff' : '#222',
-        },
-      },
-      y: {
-        title: {
-          display: true,
-          text: metricLabels[metric] || metric,
-          color: darkMode ? '#fff' : '#222',
-        },
-        beginAtZero: true,
-        ticks: { font: { size: 12 }, color: darkMode ? '#fff' : '#222' },
-      },
-    },
-  };
-
-  const chartTitleText =
-    chartLabel ||
-    `${metricCategories[metric] || 'Metric'}: ${metricLabels[metric] || metric} by Village`;
+  const chartData = { labels: months, datasets };
+  const options = createChartOptions(metric, darkMode);
+  const chartTitleText = getChartTitle(chartLabel, metric, 'Village');
 
   return (
     <div className={`${styles.chartCard} ${darkMode ? styles.darkChartCard : ''}`}>
-      <div
-        className={darkMode ? styles.darkChartTitle : ''}
-        style={{ fontSize: 22, fontWeight: 600, margin: '16px 0' }}
-      >
-        {chartTitleText}
-      </div>
+      <div className={darkMode ? styles.darkChartTitle : styles.chartTitle}>{chartTitleText}</div>
       <div className={styles.chart} style={{ height: 350 }}>
         <Line data={chartData} options={options} plugins={[ChartDataLabels]} />
       </div>
diff --git a/src/constants/lbDashboard/chartsConstants.js b/src/constants/lbDashboard/chartsConstants.js
@@ -0,0 +1,30 @@
+export const METRIC_LABELS = {
+  pageVisits: 'Page Visits',
+  numberOfBids: 'Number of Bids',
+  averageRating: 'Average Rating',
+  averageBid: 'Average Bid',
+  finalPrice: 'Final Price/Income',
+  occupancyRate: 'Occupancy Rate (%)',
+  averageDuration: 'Average Duration of Stay (days)',
+};
+
+export const METRIC_CATEGORIES = {
+  pageVisits: 'Demand',
+  numberOfBids: 'Demand',
+  averageRating: 'Demand',
+  averageBid: 'Revenue',
+  finalPrice: 'Revenue',
+  occupancyRate: 'Vacancy',
+  averageDuration: 'Vacancy',
+};
+
+export const CHART_COLORS = [
+  '#FF6B6B',
+  '#4ECDC4',
+  '#FFD93D',
+  '#1A535C',
+  '#FF9F1C',
+  '#2EC4B6',
+  '#E71D36',
+  '#3A86FF',
+];
diff --git a/src/utils/lbDashboard/chartsUtils.js b/src/utils/lbDashboard/chartsUtils.js
