lupine.components 1.1.31 → 1.1.33

package/package.json

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

package/src/component-pool/cascader/cascader.tsx

@@ -12,6 +12,8 @@ export type CascaderProps = {
   defaultOpen?: boolean;
   showCircle?: boolean; // New prop for circular button styling
   children?: any;
+  key?: string;
+  onClick?: () => void;
 };
 
 const cascaderCss: CssProps = {
@@ -137,6 +139,7 @@ export const Cascader = (props: CascaderProps) => {
     if (!el) return;
 
     const nextState = !el.classList.contains('open');
+    if (props.onClick) props.onClick();
 
     if (nextState && props.group) {
       const others = document.querySelectorAll(`[data-cascader-group="${props.group}"]`);

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

@@ -0,0 +1,110 @@
+import { AreaChart } from './area-chart';
+import { DemoStory } from '../../demo/demo-types';
+import { ChartData } from './chart-utils';
+
+const multiSeriesData: ChartData = {
+  labels: ['2019', '2020', '2021', '2022', '2023', '2024'],
+  series: [
+    { name: 'Cloud Revenue', data: [15, 22, 35, 48, 65, 80] },
+    { name: 'Hardware Sales', data: [50, 48, 45, 40, 35, 30] },
+  ],
+};
+
+export const areaChartDemo: DemoStory<any> = {
+  id: 'areaChartDemo',
+  text: 'Area Chart',
+  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' },
+  },
+  render: (args: any) => {
+    const css = {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '48px',
+      padding: '24px',
+      alignItems: 'center',
+
+      '.demo-section': {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: '24px',
+        width: '100%',
+        maxWidth: '800px',
+      },
+      '.section-title': {
+        fontSize: '20px',
+        fontWeight: 'bold',
+        color: 'var(--primary-color)',
+        marginBottom: '16px',
+        borderBottom: '2px solid var(--secondary-border-color)',
+        width: '100%',
+        paddingBottom: '8px',
+      },
+      '.chart-box': {
+        padding: '20px',
+        border: '1px solid var(--secondary-border-color)',
+        borderRadius: '8px',
+        backgroundColor: 'var(--primary-bg-color)',
+        width: '100%',
+      },
+    };
+
+    return (
+      <div css={css}>
+        <section class='demo-section'>
+          <div class='section-title'>Interactive Control</div>
+          <div class='chart-box'>
+            <AreaChart
+              data={multiSeriesData}
+              title={args.title}
+              width={args.width}
+              height={args.height}
+              showLegend={args.showLegend}
+              curved={args.curved}
+              yAxisFormatter={(val) => '$' + val + 'M'}
+            />
+          </div>
+        </section>
+
+        <section class='demo-section'>
+          <div class='section-title'>Straight Area Chart</div>
+          <div class='chart-box'>
+            <AreaChart
+              data={multiSeriesData}
+              title='Straight Area Comparison'
+              height='300px'
+              showLegend={true}
+              curved={false}
+              yAxisFormatter={(val) => '$' + val + 'M'}
+            />
+          </div>
+        </section>
+      </div>
+    );
+  },
+  code: `import { AreaChart } from 'lupine.components/component-pool/charts';
+
+const data = {
+  labels: ['Q1', 'Q2', 'Q3'],
+  series: [{ name: 'Growth', data: [10, 25, 45] }]
+};
+
+<AreaChart 
+  data={data} 
+  title="Growth Area" 
+  curved={true} 
+/>
+`,
+};

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

@@ -0,0 +1,251 @@
+import { bindGlobalStyle, getGlobalStylesId, HtmlVar } from 'lupine.components';
+import { chartCommonCss, getChartColor, BasicChartProps } from './chart-utils';
+import { Tooltip } from '../tooltip';
+
+export type AreaChartProps = BasicChartProps & {
+  yAxisFormatter?: (value: number) => string;
+  curved?: boolean;
+};
+
+export const AreaChart = (props: AreaChartProps) => {
+  const globalCssId = getGlobalStylesId(chartCommonCss);
+  bindGlobalStyle(globalCssId, chartCommonCss);
+
+  const showLegend = props.showLegend !== false;
+  const series = props.data.series;
+  const labels = props.data.labels;
+
+  if (!series || series.length === 0 || labels.length === 0) {
+    return <div class='&-container'>No data</div>;
+  }
+
+  // Find max value for Y axis scale
+  let maxVal = 0;
+  series.forEach((s) => {
+    s.data.forEach((val) => {
+      if (val > maxVal) maxVal = val;
+    });
+  });
+
+  const tickCount = 5;
+  const order = Math.floor(Math.log10(maxVal || 1));
+  const magnitude = Math.pow(10, order);
+  const niceStep = Math.ceil(maxVal / magnitude / tickCount) * magnitude;
+  const niceMax = niceStep * tickCount;
+
+  const yTicks = Array.from({ length: tickCount + 1 }, (_, i) => parseFloat((i * niceStep).toPrecision(12)));
+
+  const renderChart = (viewBoxWidth: number, viewBoxHeight: number) => {
+    // Layout parameters
+    const padding = { top: 20, right: 80, bottom: 40, left: 60 };
+
+    const chartWidth = viewBoxWidth - padding.left - padding.right;
+    const chartHeight = viewBoxHeight - padding.top - padding.bottom;
+
+    // Calculate points considering a half step padding on left and right for area/line
+    const pointStep = chartWidth / Math.max(1, labels.length);
+    const dataLeftPadding = pointStep / 2;
+
+    const formatY = props.yAxisFormatter || ((val) => val.toString());
+
+    // Render Y Axis
+    const renderYAxis = () => {
+      return yTicks.map((val) => {
+        const y = padding.top + chartHeight - (val / niceMax) * chartHeight;
+        return (
+          <g>
+            <line
+              x1={padding.left}
+              y1={y}
+              x2={viewBoxWidth - padding.right}
+              y2={y}
+              stroke='var(--secondary-border-color)'
+              stroke-width='1'
+              stroke-dasharray='4 4'
+            />
+            <text x={padding.left - 15} y={y + 4} fill='var(--primary-color)' fontSize='12' text-anchor='end'>
+              {formatY(val)}
+            </text>
+          </g>
+        );
+      });
+    };
+
+    // Render X Axis
+    const renderXAxis = () => {
+      return labels.map((label, index) => {
+        const x = padding.left + dataLeftPadding + index * pointStep;
+        const y = viewBoxHeight - padding.bottom + 25;
+        return (
+          <text x={x} y={y} fill='var(--primary-color)' fontSize='12' text-anchor='middle'>
+            {label}
+          </text>
+        );
+      });
+    };
+
+    // Render Areas, Lines & Points
+    const renderAreasLinesAndPoints = () => {
+      const areas: any[] = [];
+      const lines: any[] = [];
+      const points: any[] = [];
+
+      // Render area in reverse order so first series is drawn last (on top) if they overlap
+      // Note: Better visualization is sometimes stacking, but basic is overlapping
+      series
+        .slice()
+        .reverse()
+        .forEach((s, revIndex) => {
+          const sIndex = series.length - 1 - revIndex;
+          const color = s.color || getChartColor(sIndex);
+
+          const coordinates = s.data.map((val, lIndex) => {
+            const x = padding.left + dataLeftPadding + lIndex * pointStep;
+            const y = padding.top + chartHeight - (val / niceMax) * chartHeight;
+            return { x, y, val, label: labels[lIndex] };
+          });
+
+          // Draw Path Base
+          let linePath = '';
+          if (props.curved && coordinates.length > 2) {
+            linePath = `M ${coordinates[0].x} ${coordinates[0].y} `;
+            for (let i = 0; i < coordinates.length - 1; i++) {
+              const current = coordinates[i];
+              const next = coordinates[i + 1];
+              const mx = (current.x + next.x) / 2;
+              linePath += `C ${mx} ${current.y}, ${mx} ${next.y}, ${next.x} ${next.y} `;
+            }
+          } else {
+            linePath = 'M ' + coordinates.map((c) => `${c.x} ${c.y}`).join(' L ');
+          }
+
+          const endX = coordinates[coordinates.length - 1].x;
+          const startX = coordinates[0].x;
+          const baseY = padding.top + chartHeight;
+
+          const areaPath = `${linePath} L ${endX} ${baseY} L ${startX} ${baseY} Z`;
+
+          areas.push(
+            <path
+              d={areaPath}
+              fill={color}
+              opacity='0.3' // Transparency for area
+            />
+          );
+
+          lines.push(<path d={linePath} fill='none' stroke={color} stroke-width='3' />);
+
+          // Draw interactive points overlay
+          coordinates.forEach((c) => {
+            const handleMouseEnter = (e: any) => {
+              Tooltip.show(
+                e,
+                <div>
+                  <div style={{ fontWeight: 'bold' }}>{c.label}</div>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+                    <div style={{ width: '10px', height: '10px', backgroundColor: color, borderRadius: '2px' }} />
+                    <span>
+                      {s.name}: {formatY(c.val)}
+                    </span>
+                  </div>
+                </div>,
+                { position: 'auto' }
+              );
+              e.target.setAttribute('r', '6');
+            };
+
+            const handleMouseLeave = (e: any) => {
+              Tooltip.hide();
+              e.target.setAttribute('r', '4');
+            };
+
+            points.push(
+              <circle
+                class='chart-element'
+                cx={c.x}
+                cy={c.y}
+                r='4'
+                fill='var(--primary-bg-color)'
+                stroke={color}
+                stroke-width='2'
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
+                style={{ transition: 'r 0.2s ease' }}
+              />
+            );
+          });
+        });
+
+      return { areas, lines, points };
+    };
+
+    const { areas, lines, points } = renderAreasLinesAndPoints();
+
+    return (
+      <svg
+        class='chart-svg'
+        style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', overflow: 'visible' }}
+        viewBox={`0 0 ${viewBoxWidth} ${viewBoxHeight}`}
+        preserveAspectRatio='none'
+      >
+        {/* Base Axis line */}
+        <line
+          x1={padding.left}
+          y1={padding.top + chartHeight}
+          x2={viewBoxWidth - padding.right}
+          y2={padding.top + chartHeight}
+          stroke='var(--secondary-color)'
+          stroke-width='2'
+        />
+
+        <g class='y-axis'>{renderYAxis()}</g>
+        <g class='x-axis'>{renderXAxis()}</g>
+        <g class='areas'>{areas}</g>
+        <g class='lines'>{lines}</g>
+        <g class='points'>{points}</g>
+      </svg>
+    );
+  };
+
+  const chartVar = new HtmlVar(renderChart(1000, 300));
+
+  const ref = {
+    globalCssId,
+    onLoad: async (el: Element) => {
+      const ro = new ResizeObserver((entries) => {
+        const { width, height } = entries[0].contentRect;
+        if (width > 50 && height > 50) {
+          chartVar.value = renderChart(width, height);
+        }
+      });
+      ro.observe(el);
+      (el as any)._ro = ro;
+    },
+    onUnload: async (el: Element) => {
+      if ((el as any)._ro) {
+        (el as any)._ro.disconnect();
+      }
+    },
+  };
+
+  const styleStr = `width: ${props.width || '100%'}; height: ${props.height || '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>
+
+      {showLegend && (
+        <div class='chart-legend'>
+          {series.map((s, i) => (
+            <div class='legend-item'>
+              <div class='legend-color' style={{ backgroundColor: s.color || getChartColor(i) }} />
+              <div>{s.name}</div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,110 @@
+import { BarChart } from './bar-chart';
+import { DemoStory } from '../../demo/demo-types';
+import { ChartData } from './chart-utils';
+
+const singleSeriesData: ChartData = {
+  labels: ['United States', 'China', 'Japan', 'Germany', 'United Kingdom'],
+  series: [
+    {
+      name: 'GDP (Trillions)',
+      data: [25.4, 17.9, 4.2, 4.0, 3.0],
+    },
+  ],
+};
+
+const multiSeriesData: ChartData = {
+  labels: ['Q1', 'Q2', 'Q3', 'Q4'],
+  series: [
+    { name: 'Product A', data: [40, 30, 50, 70] },
+    { name: 'Product B', data: [20, 40, 30, 60] },
+  ],
+};
+
+export const barChartDemo: DemoStory<any> = {
+  id: 'barChartDemo',
+  text: 'Bar Chart',
+  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) => {
+    const css = {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '48px',
+      padding: '24px',
+      alignItems: 'center',
+
+      '.demo-section': {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: '24px',
+        width: '100%',
+        maxWidth: '800px',
+      },
+      '.section-title': {
+        fontSize: '20px',
+        fontWeight: 'bold',
+        color: 'var(--primary-color)',
+        marginBottom: '16px',
+        borderBottom: '2px solid var(--secondary-border-color)',
+        width: '100%',
+        paddingBottom: '8px',
+      },
+      '.chart-box': {
+        padding: '20px',
+        border: '1px solid var(--secondary-border-color)',
+        borderRadius: '8px',
+        backgroundColor: 'var(--primary-bg-color)',
+        width: '100%',
+      },
+    };
+
+    return (
+      <div css={css}>
+        <section class='demo-section'>
+          <div class='section-title'>Interactive Control</div>
+          <div class='chart-box'>
+            <BarChart
+              data={singleSeriesData}
+              title={args.title}
+              width={args.width}
+              height={args.height}
+              showLegend={args.showLegend}
+              xAxisFormatter={(val) => '$' + val + 'T'}
+            />
+          </div>
+        </section>
+
+        <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} />
+          </div>
+        </section>
+      </div>
+    );
+  },
+  code: `import { BarChart } from 'lupine.components/component-pool/charts';
+
+const data = {
+  labels: ['US', 'CN', 'JP'],
+  series: [{ name: 'GDP', data: [25, 18, 4] }]
+};
+
+<BarChart 
+  data={data} 
+  title="Top Economies" 
+  xAxisFormatter={val => '$' + val + 'T'} 
+/>
+`,
+};