juxscript 1.0.6 → 1.0.8

package/lib/components/barchart.ts

@@ -669,7 +669,7 @@ export class BarChart {
         const barGap = barHeight * 0.2;
         const actualBarHeight = barHeight - barGap;
 
-        // X-axis (now the value axis)
+        // X-axis (now the value axis) - use yAxisLabel since values are horizontal
         if (showScaleX) {
             const xAxis = document.createElementNS('http://www.w3.org/2000/svg', 'line');
             const axisX = isReverse ? width - padding.right : padding.left;
@@ -681,8 +681,8 @@ export class BarChart {
             xAxis.setAttribute('stroke-width', '2');
             svg.appendChild(xAxis);
 
-            // X-axis label (now the value label)
-            if (xAxisLabel && showTicksX) {
+            // X-axis label (use yAxisLabel for values in horizontal mode)
+            if (yAxisLabel && showTicksX) {
                 const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
                 label.setAttribute('x', (padding.left + chartWidth / 2).toString());
                 label.setAttribute('y', (height - 15).toString());
@@ -691,7 +691,7 @@ export class BarChart {
                 label.setAttribute('font-size', '12');
                 label.setAttribute('font-weight', '500');
                 label.setAttribute('font-family', 'inherit');
-                label.textContent = xAxisLabel;
+                label.textContent = yAxisLabel;
                 svg.appendChild(label);
             }
 
@@ -715,7 +715,7 @@ export class BarChart {
                     gridLine.setAttribute('stroke-dasharray', '4,4');
                     svg.appendChild(gridLine);
 
-                    // Tick label
+                    // Tick label (use scaleYUnit since values are on x-axis now)
                     const tickLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
                     tickLabel.setAttribute('x', x.toString());
                     tickLabel.setAttribute('y', (height - padding.bottom + 20).toString());
@@ -729,7 +729,7 @@ export class BarChart {
             }
         }
 
-        // Y-axis (now the category axis)
+        // Y-axis (now the category axis) - use xAxisLabel since categories are vertical
         if (showScaleY) {
             const yAxis = document.createElementNS('http://www.w3.org/2000/svg', 'line');
             yAxis.setAttribute('x1', padding.left.toString());
@@ -740,8 +740,8 @@ export class BarChart {
             yAxis.setAttribute('stroke-width', '2');
             svg.appendChild(yAxis);
 
-            // Y-axis label (now the category label)
-            if (yAxisLabel && showTicksY) {
+            // Y-axis label (use xAxisLabel for categories in horizontal mode)
+            if (xAxisLabel && showTicksY) {
                 const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
                 label.setAttribute('x', '20');
                 label.setAttribute('y', (padding.top + chartHeight / 2).toString());
@@ -751,7 +751,7 @@ export class BarChart {
                 label.setAttribute('font-size', '12');
                 label.setAttribute('font-weight', '500');
                 label.setAttribute('font-family', 'inherit');
-                label.textContent = yAxisLabel;
+                label.textContent = xAxisLabel;
                 svg.appendChild(label);
             }
         }
@@ -1000,7 +1000,7 @@ export class BarChart {
     }
 
     private _createDataTable(): HTMLElement {
-        const { data, xAxisLabel, yAxisLabel } = this.state;
+        const { data, xAxisLabel, yAxisLabel, chartOrientation } = this.state;
 
         const table = document.createElement('table');
         table.className = 'jux-barchart-table';
@@ -1008,10 +1008,10 @@ export class BarChart {
         const thead = document.createElement('thead');
         const headerRow = document.createElement('tr');
 
-        const columnHeaders = [
-            xAxisLabel || 'Label',
-            yAxisLabel || 'Value'
-        ];
+        // Swap headers based on orientation
+        const columnHeaders = chartOrientation === 'horizontal'
+            ? [yAxisLabel || 'Label', xAxisLabel || 'Value']
+            : [xAxisLabel || 'Label', yAxisLabel || 'Value'];
 
         columnHeaders.forEach(text => {
             const th = document.createElement('th');
@@ -1178,11 +1178,13 @@ ${variablesCSS}
   padding: 0.5rem;
   border-bottom: 2px solid #e5e7eb;
   font-weight: 600;
+  text-align: center;
 }
 
 .jux-barchart-table tbody td {
   padding: 0.5rem;
   border-bottom: 1px solid #f3f4f6;
+  text-align: center;
 }
 
 .jux-barchart-svg {