lupine.components 1.1.41 → 1.1.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lupine.components",
-  "version": "1.1.41",
+  "version": "1.1.43",
   "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

@@ -20,8 +20,9 @@ declare global {
 export const chartCommonCss: CssProps = {
   position: 'relative',
   width: '100%',
-  height: '100%',
-  minHeight: '200px', // Default min height
+  height: 'auto',
+  minHeight: '0', // Default min height
+  maxHeight: '100%',
   display: 'flex',
   flexDirection: 'column',
 
@@ -113,7 +114,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>