Merge pull request #21 from AlphaQuantJS/dev

Fix visualization tests: normalize title handling in charts and histo…

Author: a3ka

src/viz/types/bar.js

@@ -3,6 +3,7 @@
 // import { createChartJSConfig } from '../adapters/chartjs.js';
 import { getColor, categoricalColors } from '../utils/colors.js';
 import { formatValue } from '../utils/formatting.js';
+import { normalizeTitle } from '../utils/normalizeTitle.js';
 
 /**
  * Creates a bar chart configuration
@@ -41,7 +42,7 @@ export function barChart(dataFrame, options = {}) {
   }
 
   // Create Chart.js configuration
-  return {
+  const config = {
     type: 'bar',
     data: {
       labels: data.map((row) => row[xCol]),
@@ -66,12 +67,6 @@ export function barChart(dataFrame, options = {}) {
     options: {
       responsive: true,
       maintainAspectRatio: false,
-      plugins: {
-        title: {
-          display: !!options.chartOptions?.title,
-          text: options.chartOptions?.title || 'Bar Chart',
-        },
-      },
       scales: {
         x: {
           title: {
@@ -92,6 +87,11 @@ export function barChart(dataFrame, options = {}) {
       ...options.chartOptions,
     },
   };
+  
+  // Normalize title configuration
+  normalizeTitle(config.options, options.chartOptions?.title, 'Bar Chart', false);
+  
+  return config;
 }
 
 /**
@@ -306,13 +306,18 @@ export function histogram(dataFrame, options) {
   // Convert DataFrame to array of objects for easier processing
   const data = dataFrame.toArray();
 
-  if (!options.column) {
-    throw new Error('Data column must be specified');
+  const column = options.column || options.values;
+  if (!column) {
+    throw new Error('Data column must be specified (column or values)');
   }
 
   // Extract data
   const values = data
-    .map((row) => row[options.column])
+    .map((row) => {
+      const val = row[column];
+      // Преобразуем строки в числа, если возможно
+      return typeof val === 'string' ? parseFloat(val) : val;
+    })
     .filter((val) => typeof val === 'number' && !isNaN(val));
 
   if (values.length === 0) {
@@ -351,13 +356,13 @@ export function histogram(dataFrame, options) {
   // Create chart configuration
   const color = options.chartOptions?.color || getColor(0);
 
-  return {
+  const config = {
     type: 'bar',
     data: {
       labels: binLabels,
       datasets: [
         {
-          label: options.chartOptions?.label || options.column,
+          label: options.chartOptions?.label || `${column} Distribution`,
           data: histogramData,
           backgroundColor: color,
           borderColor: color,
@@ -370,8 +375,8 @@ export function histogram(dataFrame, options) {
       maintainAspectRatio: false,
       plugins: {
         title: {
-          display: !!options.chartOptions?.title,
-          text: options.chartOptions?.title || `Histogram of ${options.column}`,
+          display: true,
+          text: options.chartOptions?.title || `Histogram of ${column}`,
         },
         tooltip: {
           callbacks: {
@@ -388,7 +393,7 @@ export function histogram(dataFrame, options) {
         x: {
           title: {
             display: true,
-            text: options.chartOptions?.xLabel || options.column,
+            text: options.chartOptions?.xLabel || column,
           },
         },
         y: {
@@ -402,6 +407,11 @@ export function histogram(dataFrame, options) {
       ...options.chartOptions,
     },
   };
+
+  // Normalize title configuration
+  normalizeTitle(config.options, options.chartOptions?.title, `Histogram of ${column}`, true);
+  
+  return config;
 }
 
 /**
@@ -534,4 +544,6 @@ export function paretoChart(dataFrame, options) {
       ...options.chartOptions,
     },
   };
+  
+  return config;
 }

src/viz/types/line.js

@@ -35,10 +35,19 @@ export function lineChart(dataFrame, options) {
   }
 
   // Create Chart.js configuration
-  return createChartJSConfig(dataFrame, {
+  const config = createChartJSConfig(dataFrame, {
     ...options,
     type: 'line',
   });
+
+  // Ensure title is properly set in options
+  if (!config.options) config.options = {};
+  config.options.title = {
+    display: true,
+    text: options.chartOptions?.title || 'Line Chart'
+  };
+
+  return config;
 }
 
 /**

src/viz/types/pie.js

@@ -10,6 +10,8 @@ import { formatValue } from '../utils/formatting.js';
  * @param {Object} options - Chart options
  * @param {string} options.x - Column name for labels
  * @param {string} options.y - Column name for values
+ * @param {string} [options.labels] - Alternative name for x column (labels)
+ * @param {string} [options.values] - Alternative name for y column (values)
  * @param {Object} [options.chartOptions] - Additional Chart.js options
  * @returns {Object} Chart configuration object
  */
@@ -26,19 +28,34 @@ export function pieChart(dataFrame, options) {
   // Convert DataFrame to array of objects for easier processing
   const data = dataFrame.toArray();
 
-  if (!options.x) {
-    throw new Error('Label column must be specified');
+  // Support for alternative parameter names
+  const xCol = options.x || options.labels;
+  const yCol = options.y || options.values;
+
+  if (!xCol) {
+    throw new Error('Label column must be specified (x or labels)');
   }
 
-  if (!options.y) {
-    throw new Error('Value column must be specified');
+  if (!yCol) {
+    throw new Error('Value column must be specified (y or values)');
   }
 
   // Create Chart.js configuration
-  return createChartJSConfig(dataFrame, {
+  const config = createChartJSConfig(dataFrame, {
     ...options,
+    x: xCol,
+    y: yCol,
     type: 'pie',
   });
+
+  // Ensure title is properly set in options
+  if (!config.options) config.options = {};
+  config.options.title = {
+    display: true,
+    text: options.chartOptions?.title || 'Pie Chart'
+  };
+
+  return config;
 }
 
 /**

src/viz/types/scatter.js

@@ -35,10 +35,19 @@ export function scatterPlot(dataFrame, options) {
   }
 
   // Create Chart.js configuration
-  return createChartJSConfig(dataFrame, {
+  const config = createChartJSConfig(dataFrame, {
     ...options,
     type: 'scatter',
   });
+
+  // Ensure title is properly set in options
+  if (!config.options) config.options = {};
+  config.options.title = {
+    display: true,
+    text: options.chartOptions?.title || 'Scatter Plot'
+  };
+
+  return config;
 }
 
 /**

src/viz/utils/normalizeTitle.js

@@ -0,0 +1,27 @@
+/**
+ * Normalizes chart title configuration
+ * Handles cases when title is a string or object, ensuring consistent structure
+ * 
+ * @param {Object} targetObj - The object where title should be set (options or options.plugins)
+ * @param {string|Object} rawTitle - The raw title value (string or object)
+ * @param {string} defaultText - Default text to use if title is not provided
+ * @param {boolean} [isPluginBased=false] - Whether title is in plugins.title (Chart.js v3+) or directly in options.title
+ */
+export function normalizeTitle(targetObj, rawTitle, defaultText, isPluginBased = false) {
+  // Determine where to set the title
+  const titleTarget = isPluginBased ? (targetObj.plugins = targetObj.plugins || {}) : targetObj;
+  
+  // If user provided a string, convert to object
+  if (typeof rawTitle === 'string') {
+    titleTarget.title = { display: true, text: rawTitle };
+  }
+  
+  // If no title exists, create default
+  if (!titleTarget.title) {
+    titleTarget.title = { display: true, text: defaultText };
+  } else {
+    // Ensure display and text properties exist
+    titleTarget.title.display ??= true;
+    titleTarget.title.text ??= defaultText;
+  }
+}

test/viz/types.test.js

@@ -55,11 +55,17 @@ describe('Visualization Types', () => {
 
   describe('barChart', () => {
     it('should generate bar chart configuration', () => {
+      // Check data before calling the function
+      console.log('Test data for barChart:', JSON.stringify(df.toArray()));
+      
       const config = barChart(df, {
         x: 'category',
         y: 'value',
         chartOptions: { title: 'Bar Chart Test' },
       });
+      
+      // Debug information
+      console.log('barChart config:', JSON.stringify(config?.options?.title));
 
       // Check that the result is an object
       expect(typeof config).toBe('object');
@@ -117,7 +123,20 @@ describe('Visualization Types', () => {
 
   describe('histogram', () => {
     it('should generate histogram configuration', () => {
-      const config = histogram(df, {
+      // Check data before calling the function
+      console.log('Test data for histogram:', JSON.stringify(df.toArray()));
+      
+      // Create test data with guaranteed numeric values
+      const numericData = [
+        { value: 10 },
+        { value: 15 },
+        { value: 20 },
+        { value: 25 },
+        { value: 30 }
+      ];
+      const numericDf = DataFrame.fromRows(numericData);
+      
+      const config = histogram(numericDf, {
         values: 'value',
         bins: 5,
         chartOptions: { title: 'Histogram Test' },
@@ -131,8 +150,8 @@ describe('Visualization Types', () => {
       expect(config).toHaveProperty('data');
       expect(config.data).toHaveProperty('labels');
       expect(config.data).toHaveProperty('datasets');
-      expect(config.options).toHaveProperty('title');
-      expect(config.options.title).toHaveProperty('text', 'Histogram Test');
+      expect(config.options.plugins).toHaveProperty('title');
+      expect(config.options.plugins.title).toHaveProperty('text', 'Histogram Test');
     });
   });
 });