lupine.components 1.1.41 → 1.1.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lupine.components",
-  "version": "1.1.41",
+  "version": "1.1.42",
   "license": "MIT",
   "author": "uuware.com",
   "homepage": "https://github.com/uuware/lupine.js",

package/src/component-pool/charts/area-chart-demo.tsx

@@ -16,14 +16,12 @@ export const areaChartDemo: DemoStory<any> = {
   args: {
     title: 'Company Revenues',
     width: '100%',
-    height: '350px',
     showLegend: true,
     curved: true,
   },
   argTypes: {
     title: { control: 'text' },
     width: { control: 'text' },
-    height: { control: 'text' },
     showLegend: { control: 'boolean' },
     curved: { control: 'boolean' },
   },
@@ -70,7 +68,6 @@ export const areaChartDemo: DemoStory<any> = {
               data={multiSeriesData}
               title={args.title}
               width={args.width}
-              height={args.height}
               showLegend={args.showLegend}
               curved={args.curved}
               yAxisFormatter={(val) => '$' + val + 'M'}
@@ -84,7 +81,6 @@ export const areaChartDemo: DemoStory<any> = {
             <AreaChart
               data={multiSeriesData}
               title='Straight Area Comparison'
-              height='300px'
               showLegend={true}
               curved={false}
               yAxisFormatter={(val) => '$' + val + 'M'}

package/src/component-pool/charts/area-chart.tsx

@@ -228,13 +228,16 @@ export const AreaChart = (props: AreaChartProps) => {
     },
   };
 
-  const styleStr = `width: ${props.width || '100%'}; height: ${props.height || '100%'};`;
+  const ratio = props.aspectRatio ?? 16 / 9;
+  const paddingTop = `${(1 / ratio) * 100}%`;
+
+  const styleStr = `width: ${props.width || '100%'};`;
 
   return (
     <div ref={ref} class='&-container' style={styleStr}>
       {props.title && <div class='chart-title'>{props.title}</div>}
 
-      <div style={{ flex: 1, position: 'relative', minHeight: 0 }}>{chartVar.node}</div>
+      <div style={{ flex: 1, position: 'relative', minHeight: 0, paddingTop }}>{chartVar.node}</div>
 
       {showLegend && (
         <div class='chart-legend'>

package/src/component-pool/charts/bar-chart-demo.tsx

@@ -26,13 +26,11 @@ export const barChartDemo: DemoStory<any> = {
   args: {
     title: 'Top Economies',
     width: '100%',
-    height: '350px',
     showLegend: true,
   },
   argTypes: {
     title: { control: 'text' },
     width: { control: 'text' },
-    height: { control: 'text' },
     showLegend: { control: 'boolean' },
   },
   render: (args: any) => {
@@ -78,7 +76,6 @@ export const barChartDemo: DemoStory<any> = {
               data={singleSeriesData}
               title={args.title}
               width={args.width}
-              height={args.height}
               showLegend={args.showLegend}
               xAxisFormatter={(val) => '$' + val + 'T'}
             />
@@ -88,7 +85,7 @@ export const barChartDemo: DemoStory<any> = {
         <section class='demo-section'>
           <div class='section-title'>Multi-Series (Grouped Horizontal)</div>
           <div class='chart-box'>
-            <BarChart data={multiSeriesData} title='Quarterly Comparison' height='300px' showLegend={true} />
+            <BarChart data={multiSeriesData} title='Quarterly Comparison' showLegend={true} />
           </div>
         </section>
       </div>

package/src/component-pool/charts/bar-chart.tsx

@@ -197,13 +197,16 @@ export const BarChart = (props: BarChartProps) => {
     },
   };
 
-  const styleStr = `width: ${props.width || '100%'}; height: ${props.height || '100%'};`;
+  const ratio = props.aspectRatio ?? 16 / 9;
+  const paddingTop = `${(1 / ratio) * 100}%`;
+
+  const styleStr = `width: ${props.width || '100%'};`;
 
   return (
     <div ref={ref} class='&-container' style={styleStr}>
       {props.title && <div class='chart-title'>{props.title}</div>}
 
-      <div style={{ flex: 1, position: 'relative', minHeight: 0 }}>{chartVar.node}</div>
+      <div style={{ flex: 1, position: 'relative', minHeight: 0, paddingTop }}>{chartVar.node}</div>
 
       {showLegend && (
         <div class='chart-legend'>

package/src/component-pool/charts/chart-utils.ts

@@ -113,7 +113,7 @@ export type ChartData = {
 export type BasicChartProps = {
   title?: string;
   data: ChartData;
-  height?: string | number;
+  aspectRatio?: number;
   width?: string | number;
   showLegend?: boolean;
 };

package/src/component-pool/charts/column-chart-demo.tsx

@@ -27,13 +27,11 @@ export const columnChartDemo: DemoStory<any> = {
   args: {
     title: 'Monthly Revenue',
     width: '100%',
-    height: '350px',
     showLegend: true,
   },
   argTypes: {
     title: { control: 'text' },
     width: { control: 'text' },
-    height: { control: 'text' },
     showLegend: { control: 'boolean' },
   },
   render: (args: any) => {
@@ -79,7 +77,6 @@ export const columnChartDemo: DemoStory<any> = {
               data={singleSeriesData}
               title={args.title}
               width={args.width}
-              height={args.height}
               showLegend={args.showLegend}
               yAxisFormatter={(val) => '$' + val}
             />
@@ -89,7 +86,7 @@ export const columnChartDemo: DemoStory<any> = {
         <section class='demo-section'>
           <div class='section-title'>Multi-Series (Grouped)</div>
           <div class='chart-box'>
-            <ColumnChart data={multiSeriesData} title='Quarterly Product Sales' height='300px' showLegend={true} />
+            <ColumnChart data={multiSeriesData} title='Quarterly Product Sales' showLegend={true} />
           </div>
         </section>
       </div>

package/src/component-pool/charts/column-chart.tsx

@@ -204,13 +204,16 @@ export const ColumnChart = (props: ColumnChartProps) => {
     },
   };
 
-  const styleStr = `width: ${props.width || '100%'}; height: ${props.height || '100%'};`;
+  const ratio = props.aspectRatio ?? 16 / 9;
+  const paddingTop = `${(1 / ratio) * 100}%`;
+
+  const styleStr = `width: ${props.width || '100%'};`;
 
   return (
     <div ref={ref} class='&-container' style={styleStr}>
       {props.title && <div class='chart-title'>{props.title}</div>}
 
-      <div style={{ flex: 1, position: 'relative', minHeight: 0 }}>{chartVar.node}</div>
+      <div style={{ flex: 1, position: 'relative', minHeight: 0, paddingTop }}>{chartVar.node}</div>
 
       {showLegend && (
         <div class='chart-legend'>

package/src/component-pool/charts/donut-chart-demo.tsx

@@ -18,14 +18,12 @@ export const donutChartDemo: DemoStory<any> = {
   args: {
     title: 'Traffic Sources',
     width: '100%',
-    height: '300px',
     showLegend: true,
     innerRadiusRatio: 0.6,
   },
   argTypes: {
     title: { control: 'text' },
     width: { control: 'text' },
-    height: { control: 'text' },
     showLegend: { control: 'boolean' },
     innerRadiusRatio: { control: 'number' },
   },
@@ -78,7 +76,6 @@ export const donutChartDemo: DemoStory<any> = {
               data={sampleData}
               title={args.title}
               width={args.width}
-              height={args.height}
               showLegend={args.showLegend}
               innerRadiusRatio={args.innerRadiusRatio}
             />
@@ -89,10 +86,10 @@ export const donutChartDemo: DemoStory<any> = {
           <div class='section-title'>Variations</div>
           <div class='grid'>
             <div class='chart-box'>
-              <DonutChart data={sampleData} title='Thin Ring' innerRadiusRatio={0.8} height='200px' />
+              <DonutChart data={sampleData} title='Thin Ring' innerRadiusRatio={0.8} />
             </div>
             <div class='chart-box'>
-              <DonutChart data={sampleData} title='Thick Ring' innerRadiusRatio={0.3} height='200px' />
+              <DonutChart data={sampleData} title='Thick Ring' innerRadiusRatio={0.3} />
             </div>
           </div>
         </section>

package/src/component-pool/charts/donut-chart.tsx

@@ -2,27 +2,5 @@ import { PieChartProps, PieChart } from './pie-chart';
 
 // Donut Chart is just a Pie Chart with an inner radius wrapper
 export const DonutChart = (props: Omit<PieChartProps, 'innerRadiusRatio'> & { innerRadiusRatio?: number }) => {
-  const viewBoxSize = 100; // Assuming a default viewBox size for the wrapper
-
-  return (
-    <div
-      style={{
-        flex: 1,
-        position: 'relative',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        minHeight: '0',
-      }}
-    >
-      <svg
-        className='chart-svg' // Changed 'class' to 'className' for React
-        style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', overflow: 'visible' }}
-        viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
-        preserveAspectRatio='xMidYMid meet'
-      >
-        <PieChart {...props} innerRadiusRatio={props.innerRadiusRatio ?? 0.6} />
-      </svg>
-    </div>
-  );
+  return <PieChart {...props} innerRadiusRatio={props.innerRadiusRatio ?? 0.6} />;
 };

package/src/component-pool/charts/gauge-chart-demo.tsx

@@ -8,13 +8,11 @@ export const gaugeChartDemo: DemoStory<any> = {
   args: {
     title: 'Server Load',
     width: '100%',
-    height: '350px',
     value: 65,
   },
   argTypes: {
     title: { control: 'text' },
     width: { control: 'text' },
-    height: { control: 'text' },
     value: { control: 'number' },
   },
   render: (args: any) => {
@@ -60,7 +58,6 @@ export const gaugeChartDemo: DemoStory<any> = {
       liveValue.value = (
         <GaugeChart
           title='CPU Usage'
-          height='300px'
           value={Math.round(currentValue)}
           color='#e74c3c'
           valueFormatter={(v) => v + '%'}
@@ -79,7 +76,6 @@ export const gaugeChartDemo: DemoStory<any> = {
             <GaugeChart
               title={args.title}
               width={args.width}
-              height={args.height}
               value={args.value}
               valueFormatter={(v) => v + '%'}
             />

package/src/component-pool/charts/gauge-chart.tsx

@@ -63,13 +63,16 @@ export const GaugeChart = (props: GaugeChartProps) => {
     globalCssId,
   };
 
-  const styleStr = `width: ${props.width || '100%'}; height: ${props.height || '100%'};`;
+  const ratio = props.aspectRatio ?? 16 / 9;
+  const paddingTop = `${(1 / ratio) * 100}%`;
+
+  const styleStr = `width: ${props.width || '100%'};`;
 
   return (
     <div ref={ref} class='&-container' style={styleStr}>
       {props.title && <div class='chart-title'>{props.title}</div>}
 
-      <div style={{ flex: 1, position: 'relative', display: 'flex', justifyContent: 'center', minHeight: 0 }}>
+      <div style={{ flex: 1, position: 'relative', display: 'flex', justifyContent: 'center', minHeight: 0, paddingTop }}>
         <svg
           class='chart-svg'
           style={{

package/src/component-pool/charts/line-chart-demo.tsx

@@ -21,14 +21,12 @@ export const lineChartDemo: DemoStory<any> = {
   args: {
     title: 'Exchange Rates over Week',
     width: '100%',
-    height: '350px',
     showLegend: true,
     curved: false,
   },
   argTypes: {
     title: { control: 'text' },
     width: { control: 'text' },
-    height: { control: 'text' },
     showLegend: { control: 'boolean' },
     curved: { control: 'boolean' },
   },
@@ -75,7 +73,6 @@ export const lineChartDemo: DemoStory<any> = {
               data={multiSeriesData}
               title={args.title}
               width={args.width}
-              height={args.height}
               showLegend={args.showLegend}
               curved={args.curved}
             />
@@ -88,7 +85,6 @@ export const lineChartDemo: DemoStory<any> = {
             <LineChart
               data={exchangeRatesData}
               title='Crypto Value 2024'
-              height='300px'
               showLegend={true}
               curved={true}
             />

package/src/component-pool/charts/line-chart.tsx

@@ -207,13 +207,16 @@ export const LineChart = (props: LineChartProps) => {
     },
   };
 
-  const styleStr = `width: ${props.width || '100%'}; height: ${props.height || '100%'};`;
+  const ratio = props.aspectRatio ?? 16 / 9;
+  const paddingTop = `${(1 / ratio) * 100}%`;
+
+  const styleStr = `width: ${props.width || '100%'};`;
 
   return (
     <div ref={ref} class='&-container' style={styleStr}>
       {props.title && <div class='chart-title'>{props.title}</div>}
 
-      <div style={{ flex: 1, position: 'relative', minHeight: 0 }}>{chartVar.node}</div>
+      <div style={{ flex: 1, position: 'relative', minHeight: 0, paddingTop }}>{chartVar.node}</div>
 
       {showLegend && (
         <div class='chart-legend'>

package/src/component-pool/charts/pie-chart-demo.tsx

@@ -23,13 +23,11 @@ export const pieChartDemo: DemoStory<any> = {
   args: {
     title: 'Fruit Sales',
     width: '100%',
-    height: '300px',
     showLegend: true,
   },
   argTypes: {
     title: { control: 'text' },
     width: { control: 'text' },
-    height: { control: 'text' },
     showLegend: { control: 'boolean' },
   },
   render: (args: any) => {
@@ -81,7 +79,6 @@ export const pieChartDemo: DemoStory<any> = {
               data={sampleData}
               title={args.title}
               width={args.width}
-              height={args.height}
               showLegend={args.showLegend}
             />
           </div>
@@ -91,10 +88,10 @@ export const pieChartDemo: DemoStory<any> = {
           <div class='section-title'>Variations</div>
           <div class='grid'>
             <div class='chart-box'>
-              <PieChart data={sampleData} title='No Legend' showLegend={false} height='200px' />
+              <PieChart data={sampleData} title='No Legend' showLegend={false} />
             </div>
             <div class='chart-box'>
-              <PieChart data={emptyData} title='Empty Data' height='200px' />
+              <PieChart data={emptyData} title='Empty Data' />
             </div>
             <div class='chart-box'>
               <PieChart
@@ -103,8 +100,7 @@ export const pieChartDemo: DemoStory<any> = {
                   series: [{ name: 'Lone', data: [100] }],
                 }}
                 title='100% Value'
-                height='200px'
-              />
+                />
             </div>
             <div class='chart-box'>
               <PieChart
@@ -113,8 +109,7 @@ export const pieChartDemo: DemoStory<any> = {
                   series: [{ name: 'Half', data: [50, 50] }],
                 }}
                 title='50/50 Split'
-                height='200px'
-              />
+                />
             </div>
           </div>
         </section>
@@ -132,7 +127,6 @@ const data = {
   data={data} 
   title="Fruit Sales" 
   width="100%" 
-  height="300px" 
   showLegend={true} 
 />
 `,

package/src/component-pool/charts/pie-chart.tsx

@@ -13,78 +13,94 @@ export const PieChart = (props: PieChartProps) => {
   const showLegend = props.showLegend !== false;
   const innerRadiusRatio = props.innerRadiusRatio ?? 0;
 
-  // Pie chart relies on the first series only
-  const series = props.data.series[0];
-  if (!series || !series.data || series.data.length === 0) {
+  const seriesList = props.data.series;
+  if (!seriesList || seriesList.length === 0) {
     return <div class='&-container'>No data</div>;
   }
 
-  const values = series.data;
-  const total = values.reduce((sum, val) => sum + val, 0);
-
   // SVG viewBox settings
   const viewBoxSize = 200;
   const center = viewBoxSize / 2;
-  const radius = (viewBoxSize / 2) * 0.9; // 90% of container to leave margin for stroke/anti-aliasing
-  const innerRadius = radius * innerRadiusRatio;
-
-  let currentAngle = 0;
-
-  const slices = values.map((val, index) => {
-    // Prevent 0 area slices. Also handle case where 1 val is 100%
-    const ratio = total > 0 ? val / total : 0;
-    const angleDelta = ratio * 360;
-
-    // Fix for 100% slice (SVG arcs don't draw well at exactly 360)
-    const isFullCircle = angleDelta === 360;
-    const adjustedAngleDelta = isFullCircle ? 359.99 : angleDelta;
-
-    const startAngle = currentAngle;
-    const endAngle = currentAngle + adjustedAngleDelta;
-    currentAngle += adjustedAngleDelta;
-
-    const pathD = describeArc(center, center, radius, startAngle, endAngle, innerRadius);
-    const color = getChartColor(index);
-    const label = props.data.labels[index] || `Item ${index + 1}`;
-
-    const handleMouseEnter = (e: any) => {
-      const percentage = (ratio * 100).toFixed(1) + '%';
-      Tooltip.show(
-        e,
-        <div>
-          <div style={{ fontWeight: 'bold' }}>{label}</div>
-          <div>Value: {val}</div>
-          <div>Share: {percentage}</div>
-        </div>,
-        { position: 'auto' }
+  const maxRadius = (viewBoxSize / 2) * 0.9; // 90% of container to leave margin for stroke/anti-aliasing
+  
+  const globalInnerRadius = maxRadius * innerRadiusRatio;
+  const numSeries = seriesList.length;
+  // If only 1 series and innerRadiusRatio is 0, ringThickness is maxRadius.
+  // If multiple series, we divide the available space (maxRadius - globalInnerRadius) among them.
+  const ringThickness = (maxRadius - globalInnerRadius) / numSeries;
+
+  const allSlices: any[] = [];
+
+  seriesList.forEach((series, seriesIndex) => {
+    const values = series.data;
+    if (!values || values.length === 0) return;
+
+    const total = values.reduce((sum, val) => sum + val, 0);
+    let currentAngle = 0;
+
+    // Outermost ring is series 0
+    const outerR = maxRadius - seriesIndex * ringThickness;
+    const innerR = outerR - ringThickness;
+
+    values.forEach((val, index) => {
+      // Prevent 0 area slices. Also handle case where 1 val is 100%
+      const ratio = total > 0 ? val / total : 0;
+      const angleDelta = ratio * 360;
+
+      // Fix for 100% slice (SVG arcs don't draw well at exactly 360)
+      const isFullCircle = angleDelta === 360;
+      const adjustedAngleDelta = isFullCircle ? 359.99 : angleDelta;
+
+      const startAngle = currentAngle;
+      const endAngle = currentAngle + adjustedAngleDelta;
+      currentAngle += adjustedAngleDelta;
+
+      const pathD = describeArc(center, center, outerR, startAngle, endAngle, innerR);
+      const color = getChartColor(index);
+      const label = props.data.labels[index] || `Item ${index + 1}`;
+
+      const handleMouseEnter = (e: any) => {
+        const percentage = (ratio * 100).toFixed(1) + '%';
+        Tooltip.show(
+          e,
+          <div>
+            <div style={{ fontWeight: 'bold' }}>{series.name ? `${series.name} - ` : ''}{label}</div>
+            <div>Value: {val}</div>
+            <div>Share: {percentage}</div>
+          </div>,
+          { position: 'auto' }
+        );
+        e.target.style.opacity = 0.8;
+      };
+
+      const handleMouseLeave = (e: any) => {
+        Tooltip.hide();
+        e.target.style.opacity = 1;
+      };
+
+      allSlices.push(
+        <path
+          class='chart-element'
+          d={pathD}
+          fill={color}
+          stroke='var(--primary-bg-color)' // border color between slices
+          stroke-width={isFullCircle ? '0' : '1'}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          style={{ transition: 'opacity 0.2s' }}
+        />
       );
-      // Optional: highlight slice
-      e.target.style.opacity = 0.8;
-    };
-
-    const handleMouseLeave = (e: any) => {
-      Tooltip.hide();
-      e.target.style.opacity = 1;
-    };
-
-    return (
-      <path
-        class='chart-element'
-        d={pathD}
-        fill={color}
-        stroke='var(--primary-bg-color)' // border color between slices
-        stroke-width={isFullCircle ? '0' : '1'}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-      />
-    );
+    });
   });
 
   const ref: RefProps = {
     globalCssId,
   };
 
-  const styleStr = `width: ${props.width || '100%'}; height: ${props.height || '100%'}; min-height: 200px;`;
+  const ratio = props.aspectRatio ?? 16 / 9;
+  const paddingTop = `${(1 / ratio) * 100}%`;
+
+  const styleStr = `width: ${props.width || '100%'}; min-height: 200px;`;
 
   return (
     <div ref={ref} class='&-container' style={styleStr}>
@@ -98,6 +114,7 @@ export const PieChart = (props: PieChartProps) => {
           justifyContent: 'center',
           alignItems: 'center',
           minHeight: '0',
+          paddingTop,
         }}
       >
         <svg
@@ -106,13 +123,13 @@ export const PieChart = (props: PieChartProps) => {
           viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
           preserveAspectRatio='xMidYMid meet'
         >
-          <g>{slices}</g>
+          <g>{allSlices}</g>
         </svg>
       </div>
 
       {showLegend && (
         <div class='chart-legend'>
-          {values.map((_, i) => (
+          {props.data.labels.map((_, i) => (
             <div class='legend-item'>
               <div class='legend-color' style={{ backgroundColor: getChartColor(i) }} />
               <div>{props.data.labels[i] || `Item ${i + 1}`}</div>

package/src/component-pool/charts/radar-chart-demo.tsx

@@ -16,13 +16,11 @@ export const radarChartDemo: DemoStory<any> = {
   args: {
     title: 'Character Stats',
     width: '100%',
-    height: '400px',
     showLegend: true,
   },
   argTypes: {
     title: { control: 'text' },
     width: { control: 'text' },
-    height: { control: 'text' },
     showLegend: { control: 'boolean' },
   },
   render: (args: any) => {
@@ -68,7 +66,6 @@ export const radarChartDemo: DemoStory<any> = {
               data={statsData}
               title={args.title}
               width={args.width}
-              height={args.height}
               showLegend={args.showLegend}
             />
           </div>

package/src/component-pool/charts/radar-chart.tsx

@@ -105,8 +105,20 @@ export const RadarChart = (props: RadarChartProps) => {
 
       const pointsStr = coordinates.map((c) => `${c.x},${c.y}`).join(' ');
 
+      const seriesGroupElements: any[] = [];
+
       // Fill area
-      dataElements.push(<polygon points={pointsStr} fill={color} fillOpacity='0.3' stroke={color} strokeWidth='2' />);
+      seriesGroupElements.push(
+        <polygon 
+          class="radar-polygon"
+          points={pointsStr} 
+          fill={color} 
+          fillOpacity='0.15' 
+          stroke={color} 
+          strokeWidth='2' 
+          style={{ transition: 'fill-opacity 0.2s ease' }}
+        />
+      );
 
       // Points and Tooltips
       coordinates.forEach((c) => {
@@ -132,9 +144,9 @@ export const RadarChart = (props: RadarChartProps) => {
           e.target.setAttribute('r', '4');
         };
 
-        dataElements.push(
+        seriesGroupElements.push(
           <circle
-            class='chart-element'
+            class='chart-element radar-point'
             cx={c.x}
             cy={c.y}
             r='4'
@@ -147,6 +159,26 @@ export const RadarChart = (props: RadarChartProps) => {
           />
         );
       });
+
+      const handleGroupMouseEnter = (e: any) => {
+        const polygon = e.currentTarget.querySelector('.radar-polygon');
+        if (polygon) polygon.setAttribute('fill-opacity', '0.6');
+      };
+
+      const handleGroupMouseLeave = (e: any) => {
+        const polygon = e.currentTarget.querySelector('.radar-polygon');
+        if (polygon) polygon.setAttribute('fill-opacity', '0.15');
+      };
+
+      dataElements.push(
+        <g 
+          class="radar-series" 
+          onMouseEnter={handleGroupMouseEnter} 
+          onMouseLeave={handleGroupMouseLeave}
+        >
+          {seriesGroupElements}
+        </g>
+      );
     });
 
     return dataElements;
@@ -156,13 +188,16 @@ export const RadarChart = (props: RadarChartProps) => {
     globalCssId,
   };
 
-  const styleStr = `width: ${props.width || '100%'}; height: ${props.height || '100%'};`;
+  const ratio = props.aspectRatio ?? 16 / 9;
+  const paddingTop = `${(1 / ratio) * 100}%`;
+
+  const styleStr = `width: ${props.width || '100%'};`;
 
   return (
     <div ref={ref} class='&-container' style={styleStr}>
       {props.title && <div class='chart-title'>{props.title}</div>}
 
-      <div style={{ flex: 1, position: 'relative', display: 'flex', justifyContent: 'center', minHeight: 0 }}>
+      <div style={{ flex: 1, position: 'relative', display: 'flex', justifyContent: 'center', minHeight: 0, paddingTop }}>
         <svg
           class='chart-svg'
           style={{

package/src/component-pool/charts/scatter-chart-demo.tsx

@@ -16,13 +16,11 @@ export const scatterChartDemo: DemoStory<any> = {
   args: {
     title: 'Value Correlation',
     width: '100%',
-    height: '350px',
     showLegend: true,
   },
   argTypes: {
     title: { control: 'text' },
     width: { control: 'text' },
-    height: { control: 'text' },
     showLegend: { control: 'boolean' },
   },
   render: (args: any) => {
@@ -68,7 +66,6 @@ export const scatterChartDemo: DemoStory<any> = {
               data={correlationData}
               title={args.title}
               width={args.width}
-              height={args.height}
               showLegend={args.showLegend}
             />
           </div>

package/src/component-pool/charts/scatter-chart.tsx

@@ -211,13 +211,16 @@ export const ScatterChart = (props: ScatterChartProps) => {
     },
   };
 
-  const styleStr = `width: ${props.width || '100%'}; height: ${props.height || '100%'};`;
+  const ratio = props.aspectRatio ?? 16 / 9;
+  const paddingTop = `${(1 / ratio) * 100}%`;
+
+  const styleStr = `width: ${props.width || '100%'};`;
 
   return (
     <div ref={ref} class='&-container' style={styleStr}>
       {props.title && <div class='chart-title'>{props.title}</div>}
 
-      <div style={{ flex: 1, position: 'relative', minHeight: 0 }}>{chartVar.node}</div>
+      <div style={{ flex: 1, position: 'relative', minHeight: 0, paddingTop }}>{chartVar.node}</div>
 
       {showLegend && (
         <div class='chart-legend'>

package/src/component-pool/index.ts

@@ -5,6 +5,7 @@ export * from './breadcrumbs';
 export * from './card';
 export * from './carousel';
 export * from './cascader';
+export * from './charts';
 export * from './copy-button';
 export * from './date-picker';
 export * from './floating-icon-menu';

package/src/component-pool/svg-graph/index.ts

@@ -0,0 +1 @@
+export * from './svg-graph';

package/src/component-pool/svg-graph/svg-graph-demo.tsx

@@ -0,0 +1,59 @@
+import { RefProps } from 'lupine.web';
+import { SvgGraph } from './svg-graph';
+import { DemoStory } from '../../demo/demo-types';
+
+const SvgGraphDemo = () => {
+  const ref: RefProps = {
+    onLoad: async (el) => {
+      const graph = new SvgGraph(el as HTMLElement);
+
+      // Draw a line
+      graph.drawLine('red', '2px', 50, 50, 250, 50, 'line1');
+
+      // Draw a rect
+      graph.draw('rect', '#e0f7fa', '#00acc1', '2px', 50, 100, 100, 50, 'rect1');
+
+      // Draw an ellipse
+      graph.draw('ellipse', '#fce4ec', '#d81b60', '2px', 200, 100, 100, 50, 'ellipse1');
+
+      // Draw a rounded rect
+      graph.draw('roundrect', '#e8f5e9', '#43a047', '2px', 50, 200, 150, 60, 'roundrect1');
+
+      // Test resize after 1s
+      setTimeout(() => {
+        graph.resize('line1', 50, 50, 300, 100);
+      }, 1000);
+    },
+  };
+
+  return (
+    <div style={{ padding: '16px' }}>
+      <h3>SvgGraph Component Demo</h3>
+      <p>This demonstrates the imperative SVG Graph API modernized from legacy JGraph.</p>
+
+      <div
+        ref={ref}
+        style={{
+          position: 'relative',
+          width: '100%',
+          height: '400px',
+          border: '1px solid #ccc',
+          marginTop: '16px',
+          backgroundColor: '#fafafa',
+        }}
+      >
+        {/* SVG will be injected here */}
+      </div>
+    </div>
+  );
+};
+
+export const svgGraphDemo: DemoStory<any> = {
+  id: 'svg-graph-demo',
+  text: 'Svg Graph',
+  args: {},
+  render: (args: any) => {
+    return <SvgGraphDemo />;
+  },
+  code: 'import { SvgGraph } from "lupine.components/src/component-pool/svg-graph";\n// Check source code for usage.',
+};

package/src/component-pool/svg-graph/svg-graph.ts

@@ -0,0 +1,166 @@
+/**
+ * Modernized SVG Graph Library
+ * Replaces the legacy JGraph library.
+ */
+
+export class SvgGraph {
+  public svgRoot: SVGSVGElement;
+  private elements: Map<string, SVGElement> = new Map();
+
+  constructor(container: HTMLElement | string) {
+    let el: HTMLElement | null = null;
+    if (typeof container === 'string') {
+      el = document.getElementById(container);
+    } else {
+      el = container;
+    }
+
+    if (!el) {
+      throw new Error('SvgGraph: container not found');
+    }
+
+    el.style.userSelect = 'none';
+
+    this.svgRoot = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    this.svgRoot.style.width = '100%';
+    this.svgRoot.style.height = '100%';
+    this.svgRoot.style.position = 'absolute';
+    this.svgRoot.style.left = '0';
+    this.svgRoot.style.top = '0';
+    this.svgRoot.style.pointerEvents = 'none'; // usually good for overlays
+
+    el.appendChild(this.svgRoot);
+  }
+
+  draw(
+    shape: 'rect' | 'ellipse' | 'roundrect' | 'line',
+    fillColor: string,
+    lineColor: string,
+    lineWidth: string,
+    left: number,
+    top: number,
+    width: number,
+    height: number,
+    id?: string
+  ): SVGElement {
+    const svgNamespace = 'http://www.w3.org/2000/svg';
+    let svg: SVGElement;
+
+    if (shape === 'rect') {
+      svg = document.createElementNS(svgNamespace, 'rect');
+      svg.setAttributeNS(null, 'x', left + 'px');
+      svg.setAttributeNS(null, 'y', top + 'px');
+      svg.setAttributeNS(null, 'width', width + 'px');
+      svg.setAttributeNS(null, 'height', height + 'px');
+    } else if (shape === 'ellipse') {
+      svg = document.createElementNS(svgNamespace, 'ellipse');
+      svg.setAttributeNS(null, 'cx', left + width / 2 + 'px');
+      svg.setAttributeNS(null, 'cy', top + height / 2 + 'px');
+      svg.setAttributeNS(null, 'rx', width / 2 + 'px');
+      svg.setAttributeNS(null, 'ry', height / 2 + 'px');
+    } else if (shape === 'roundrect') {
+      svg = document.createElementNS(svgNamespace, 'rect');
+      svg.setAttributeNS(null, 'x', left + 'px');
+      svg.setAttributeNS(null, 'y', top + 'px');
+      svg.setAttributeNS(null, 'rx', '20px');
+      svg.setAttributeNS(null, 'ry', '20px');
+      svg.setAttributeNS(null, 'width', width + 'px');
+      svg.setAttributeNS(null, 'height', height + 'px');
+    } else if (shape === 'line') {
+      svg = document.createElementNS(svgNamespace, 'line');
+      svg.setAttributeNS(null, 'x1', left + 'px');
+      svg.setAttributeNS(null, 'y1', top + 'px');
+      svg.setAttributeNS(null, 'x2', width + 'px');
+      svg.setAttributeNS(null, 'y2', height + 'px');
+    } else {
+      throw new Error(`Unsupported shape: ${shape}`);
+    }
+
+    svg.style.position = 'absolute';
+    svg.setAttributeNS(null, 'fill', fillColor || 'none');
+    svg.setAttributeNS(null, 'stroke', lineColor || 'none');
+    svg.setAttributeNS(null, 'stroke-width', lineWidth || '1px');
+    svg.style.pointerEvents = 'auto'; // allow interaction with shape
+
+    if (id) {
+      svg.id = id;
+      this.elements.set(id, svg);
+    }
+    this.svgRoot.appendChild(svg);
+    return svg;
+  }
+
+  drawLine(
+    lineColor: string,
+    lineWidth: string,
+    left: number,
+    top: number,
+    width: number,
+    height: number,
+    id?: string
+  ): SVGElement {
+    return this.draw('line', '', lineColor, lineWidth, left, top, width, height, id);
+  }
+
+  resize(idOrObj: string | SVGElement, left: number, top: number, width: number, height: number): SVGElement | void {
+    const svg =
+      typeof idOrObj === 'string' ? this.elements.get(idOrObj) || (document.getElementById(idOrObj) as any) : idOrObj;
+    if (!svg) return;
+
+    if (svg.tagName === 'rect') {
+      svg.setAttributeNS(null, 'x', left + 'px');
+      svg.setAttributeNS(null, 'y', top + 'px');
+      svg.setAttributeNS(null, 'width', width + 'px');
+      svg.setAttributeNS(null, 'height', height + 'px');
+    } else if (svg.tagName === 'ellipse') {
+      svg.setAttributeNS(null, 'cx', left + width / 2 + 'px');
+      svg.setAttributeNS(null, 'cy', top + height / 2 + 'px');
+      svg.setAttributeNS(null, 'rx', width / 2 + 'px');
+      svg.setAttributeNS(null, 'ry', height / 2 + 'px');
+    } else if (svg.tagName === 'line') {
+      svg.setAttributeNS(null, 'x1', left + 'px');
+      svg.setAttributeNS(null, 'y1', top + 'px');
+      svg.setAttributeNS(null, 'x2', width + 'px');
+      svg.setAttributeNS(null, 'y2', height + 'px');
+    }
+    return svg;
+  }
+
+  remove(idOrObj: string | SVGElement): void {
+    const svg = typeof idOrObj === 'string' ? this.elements.get(idOrObj) || document.getElementById(idOrObj) : idOrObj;
+    if (svg && svg.parentNode) {
+      svg.parentNode.removeChild(svg);
+      if (typeof idOrObj === 'string') this.elements.delete(idOrObj);
+    }
+  }
+
+  setAttribute(shape: SVGElement, cmd: string, value: string): void {
+    if (shape != null) {
+      if (cmd === 'fillcolor') {
+        shape.setAttributeNS(null, 'fill', value || 'none');
+      } else if (cmd === 'linecolor') {
+        shape.setAttributeNS(null, 'stroke', value || 'none');
+      } else if (cmd === 'linewidth') {
+        shape.setAttributeNS(null, 'stroke-width', parseInt(value) + 'px');
+      }
+    }
+  }
+
+  getAttribute(shape: SVGElement, cmd: string): string {
+    let result = '';
+    if (shape != null) {
+      if (cmd === 'fillcolor') {
+        result = shape.getAttributeNS(null, 'fill') || '';
+        if (result === 'none') result = '';
+      } else if (cmd === 'linecolor') {
+        result = shape.getAttributeNS(null, 'stroke') || '';
+        if (result === 'none') result = '';
+      } else if (cmd === 'linewidth') {
+        result = shape.getAttributeNS(null, 'stroke') || '';
+        if (result === 'none') result = '';
+        else result = shape.getAttributeNS(null, 'stroke-width') || '';
+      }
+    }
+    return result;
+  }
+}

package/src/component-pool/youtube-player/youtube-player-demo.tsx

@@ -5,13 +5,13 @@ export const youtubePlayerDemo: DemoStory<YouTubePlayerProps> = {
   id: 'youtubePlayerDemo',
   text: 'YouTube Player',
   args: {
-    videoId: 'dQw4w9WgXcQ',
+    srcOrVideoId: 'dQw4w9WgXcQ',
     width: '100%',
     height: '400px',
     autoplay: false,
   },
   argTypes: {
-    videoId: { control: 'text', description: 'YouTube Video ID' },
+    srcOrVideoId: { control: 'text', description: 'YouTube Video ID' },
     width: { control: 'text' },
     height: { control: 'text' },
     autoplay: { control: 'boolean' },
@@ -39,8 +39,8 @@ export const youtubePlayerDemo: DemoStory<YouTubePlayerProps> = {
         <section>
           <div class='section-title'>Custom Size</div>
           <div style={{ display: 'flex', gap: '20px', alignItems: 'center' }}>
-            <YouTubePlayer videoId='jNQXAC9IVRw' width='300px' height='200px' />
-            <YouTubePlayer videoId='M7lc1UVf-VE' width='400px' height='250px' />
+            <YouTubePlayer srcOrVideoId='jNQXAC9IVRw' width='300px' height='200px' />
+            <YouTubePlayer srcOrVideoId='M7lc1UVf-VE' width='400px' height='250px' />
           </div>
         </section>
       </div>

package/src/component-pool/youtube-player/youtube-player.tsx

@@ -3,38 +3,114 @@ import { CssProps } from 'lupine.web';
 export type YouTubePlayerProps = {
   class?: string;
   style?: CssProps;
-  videoId: string;
+  srcOrVideoId: string;
   width?: string | number;
   height?: string | number;
   autoplay?: boolean;
   allowFullScreen?: boolean;
+  controls?: boolean;
+  loop?: boolean;
+  muted?: boolean;
+  rel?: boolean;
+  modestbranding?: boolean;
 };
 
+function parseYouTubeUrl(urlOrId: string) {
+  if (!urlOrId) return { videoId: '' };
+  if (/^[a-zA-Z0-9_-]{11}$/.test(urlOrId)) return { videoId: urlOrId };
+  
+  let videoId = '';
+  let list = '';
+  let start = '';
+
+  try {
+    const urlObj = new URL(urlOrId);
+    if (urlObj.hostname.includes('youtube.com')) {
+      if (urlObj.pathname === '/watch') {
+        videoId = urlObj.searchParams.get('v') || '';
+      } else if (urlObj.pathname.startsWith('/embed/')) {
+        videoId = urlObj.pathname.split('/')[2] || '';
+      } else if (urlObj.pathname.startsWith('/v/')) {
+        videoId = urlObj.pathname.split('/')[2] || '';
+      }
+      list = urlObj.searchParams.get('list') || '';
+      start = urlObj.searchParams.get('t') || urlObj.searchParams.get('start') || '';
+    } else if (urlObj.hostname.includes('youtu.be')) {
+      videoId = urlObj.pathname.slice(1);
+      list = urlObj.searchParams.get('list') || '';
+      start = urlObj.searchParams.get('t') || urlObj.searchParams.get('start') || '';
+    }
+  } catch (e) {
+    const match = urlOrId.match(/(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))([\w-]{11})/);
+    if (match) videoId = match[1];
+  }
+  
+  if (start && isNaN(Number(start))) {
+    const timeMatch = start.match(/(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?/);
+    if (timeMatch && timeMatch[0]) {
+      let seconds = 0;
+      if (timeMatch[1]) seconds += parseInt(timeMatch[1]) * 3600;
+      if (timeMatch[2]) seconds += parseInt(timeMatch[2]) * 60;
+      if (timeMatch[3]) seconds += parseInt(timeMatch[3]);
+      if (seconds > 0) start = seconds.toString();
+    }
+  }
+
+  return { videoId, list, start };
+}
+
 export const YouTubePlayer = (props: YouTubePlayerProps) => {
   const {
-    videoId,
+    srcOrVideoId,
     width = '100%',
     height = '100%',
     autoplay = false,
     allowFullScreen = true,
+    controls = true,
+    loop = false,
+    muted = false,
+    rel = false,
+    modestbranding = true,
     style,
     class: className,
   } = props;
 
-  const src = `https://www.youtube.com/embed/${videoId}?autoplay=${autoplay ? 1 : 0}`;
+  const { videoId, list, start } = parseYouTubeUrl(srcOrVideoId);
+  
+  if (typeof document === 'undefined') {
+    return <div class={className} css={{ position: 'relative', width, height, ...style }}></div>;
+  }
+
+  let src = '';
+  if (videoId || list) {
+    src = `https://www.youtube.com/embed/${videoId}?autoplay=${autoplay ? 1 : 0}`;
+    if (!controls) src += '&controls=0';
+    if (loop) src += `&loop=1&playlist=${videoId}`; // YouTube requires playlist=VIDEO_ID for loop to work
+    if (muted) src += '&mute=1';
+    if (!rel) src += '&rel=0';
+    if (modestbranding) src += '&modestbranding=1';
+    if (list) src += `&list=${list}`;
+    if (start) src += `&start=${start}`;
+  }
 
   return (
     <div class={className} css={{ position: 'relative', width, height, ...style }}>
-      <iframe
-        width='100%'
-        height='100%'
-        src={src}
-        title='YouTube video player'
-        frameBorder='0'
-        allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
-        allowFullScreen={allowFullScreen}
-        style={{ border: 'none', display: 'block' }}
-      ></iframe>
+      {src ? (
+        <iframe
+          width='100%'
+          height='100%'
+          src={src}
+          title='YouTube video player'
+          frameBorder='0'
+          allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
+          allowFullScreen={allowFullScreen}
+          style={{ border: 'none', display: 'block' }}
+        ></iframe>
+      ) : (
+        <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#f0f0f0', color: '#999', border: '1px solid #ddd' }}>
+          Invalid YouTube URL
+        </div>
+      )}
     </div>
   );
 };

package/src/components/menu-bar.tsx

@@ -23,13 +23,17 @@ export const MenuBar = ({
   menuId,
   items,
   className,
-  textColor = 'var(--menubar-color)',
-  backgroundColor = 'var(--menubar-bg-color)', //'black',
-  hoverColor = 'var(--activatable-color-hover)', //'#ffffff',
-  hoverBgColor = 'var(--activatable-bg-color-hover)', //'#d12121',
+  textColor,
+  backgroundColor,
+  hoverColor,
+  hoverBgColor,
   maxWidth = '100%',
   maxWidthMobileMenu = MediaQueryMaxWidth.TabletMax,
 }: MenuBarProps) => {
+  backgroundColor = backgroundColor || 'var(--menubar-bg-color)';
+  textColor = textColor || 'var(--menubar-color)';
+  hoverColor = hoverColor || 'var(--activatable-color-hover)';
+  hoverBgColor = hoverBgColor || 'var(--activatable-bg-color-hover)';
   const css: any = {
     width: '100%',
     maxWidth: maxWidth,
@@ -140,6 +144,13 @@ export const MenuBar = ({
       '.menu-bar-top.open': {
         display: 'flex',
         flexDirection: 'column',
+        position: 'absolute',
+        top: '100%',
+        left: 0,
+        right: 0,
+        zIndex: 100,
+        backgroundColor: backgroundColor,
+        boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
       },
       '.menu-bar-top.open .menu-bar-sub-box > .menu-bar-sub': {
         display: 'flex',

package/src/components/menu-sidebar.tsx

@@ -19,6 +19,7 @@ export type MenuSidebarProps = {
   color?: string;
   backgroundColor?: string;
   isDevAdmin?: boolean;
+  defaultOpenAll?: boolean;
 };
 export const MenuSidebar = ({
   mobileMenu,
@@ -31,6 +32,7 @@ export const MenuSidebar = ({
   maxWidth = '100%',
   maxWidthMobileMenu = MediaQueryMaxWidth.TabletMax,
   isDevAdmin = false,
+  defaultOpenAll = false,
 }: MenuSidebarProps) => {
   const css: CssProps = {
     // backgroundColor,
@@ -228,7 +230,7 @@ export const MenuSidebar = ({
             }
             let ref: RefProps = {};
             return item.items ? (
-              <div ref={ref} class='menu-sidebar-sub-box' onClick={() => onItemToggleClick(ref)}>
+              <div ref={ref} class={`menu-sidebar-sub-box ${defaultOpenAll ? 'open' : ''}`} onClick={() => onItemToggleClick(ref)}>
                 <div class='menu-sidebar-item'>{item.text}</div>
                 {renderItems(item.items, 'menu-sidebar-sub')}
               </div>

package/src/components/tabs.tsx

@@ -124,12 +124,6 @@ export const Tabs = ({ pages, defaultIndex, topClassName, pagePadding, hook: ref
     }
   };
   if (refUpdate) {
-    refUpdate.updateTitle = (index: number, title: string) => {
-      const doms = ref.$all(`.&tabs > div > .tab`);
-      if (index >= 0 && index < doms.length) {
-        doms[index].innerHTML = title;
-      }
-    };
     refUpdate.updateIndex = updateIndex;
     refUpdate.removePage = removePage;
     refUpdate.newPage = newPage;
@@ -141,6 +135,15 @@ export const Tabs = ({ pages, defaultIndex, topClassName, pagePadding, hook: ref
       const doms = ref.$all(`.&tabs > div > .tab`);
       return doms.length;
     };
+    refUpdate.updateTitle = (index: number, title: string) => {
+      const doms = ref.$all(`.&tabs > div > .tab`);
+      if (index === -1) {
+        index = refUpdate.getIndex!();
+      }
+      if (index >= 0 && index < doms.length) {
+        doms[index].innerHTML = title;
+      }
+    };
     refUpdate.findAndActivate = (title: string) => {
       const doms = ref.$all(`.&tabs > div > .tab`);
       for (let i = 0; i < doms.length; i++) {

package/src/demo/demo-about.tsx

@@ -1,6 +1,6 @@
 import { CssProps, PageProps } from 'lupine.components';
 
-export const DemoAboutPage = async (props: PageProps) => {
+export const DemoAboutPage = () => {
   const css: CssProps = {};
 
   return (

package/src/demo/demo-frame-helper.tsx

@@ -24,6 +24,7 @@ import { redirectDemo } from '../components/redirect-demo';
 import { textWaveDemo } from '../components/text-wave-demo';
 import { textScaleDemo } from '../components/text-scale-demo';
 import { textGlowDemo } from '../components/text-glow-demo';
+import { svgGraphDemo } from '../component-pool/svg-graph/svg-graph-demo';
 import { toggleButtonDemo } from '../components/toggle-button-demo';
 import { messageBoxDemo } from '../components/message-box-demo';
 import { loadingSpinDemo } from '../components/loading-spin-demo';
@@ -611,6 +612,12 @@ export class DemoFrameHelper {
           url: '',
           js: () => this.addPanel(redirectDemo.text, <DemoPage story={redirectDemo} />),
         },
+        {
+          id: svgGraphDemo.id,
+          text: svgGraphDemo.text,
+          url: '',
+          js: () => this.addPanel(svgGraphDemo.text, <DemoPage story={svgGraphDemo} />),
+        },
       ],
     },
     {
@@ -622,7 +629,7 @@ export class DemoFrameHelper {
           id: 'about',
           text: 'About',
           url: '',
-          js: () => this.addPanel('About', DemoAboutPage()),
+          js: () => this.addPanel('About', <DemoAboutPage />),
         },
       ],
     },

package/src/demo/demo-registry.ts

@@ -68,6 +68,7 @@ import {
   gaugeChartDemo,
   scatterChartDemo,
 } from '../component-pool/charts';
+import { svgGraphDemo } from '../component-pool/svg-graph/svg-graph-demo';
 
 export const demoRegistry: Record<string, DemoStory<any>> = {
   [buttonDemo.id]: buttonDemo,
@@ -138,4 +139,5 @@ export const demoRegistry: Record<string, DemoStory<any>> = {
   [radarChartDemo.id]: radarChartDemo,
   [gaugeChartDemo.id]: gaugeChartDemo,
   [scatterChartDemo.id]: scatterChartDemo,
+  [svgGraphDemo.id]: svgGraphDemo,
 };