lupine.components 1.1.55 → 1.1.57

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

@@ -1,182 +1,182 @@
-import { CssProps } from 'lupine.web';
-
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      svg: any;
-      g: any;
-      path: any;
-      rect: any;
-      circle: any;
-      line: any;
-      polygon: any;
-      polyline: any;
-      text: any;
-    }
-  }
-}
-
-// Common CSS for all charts
-export const chartCommonCss: CssProps = {
-  position: 'relative',
-  width: '100%',
-  height: 'auto',
-  minHeight: '0', // Default min height
-  maxHeight: '100%',
-  display: 'flex',
-  flexDirection: 'column',
-
-  // Tooltip integration (if we want to use the Tooltip class)
-  '.chart-svg': {
-    width: '100%',
-    height: '100%',
-    overflow: 'visible',
-    display: 'block',
-  },
-
-  '.chart-title': {
-    fontSize: '16px',
-    fontWeight: 'bold',
-    marginBottom: '8px',
-    color: 'var(--primary-color)',
-    textAlign: 'center' as const,
-  },
-
-  '.chart-legend': {
-    display: 'flex',
-    flexWrap: 'wrap',
-    justifyContent: 'center',
-    gap: '12px',
-    marginTop: '12px',
-    fontSize: '12px',
-    color: 'var(--primary-color)',
-  },
-
-  '.legend-item': {
-    display: 'flex',
-    alignItems: 'center',
-    gap: '6px',
-    cursor: 'pointer',
-    transition: 'opacity 0.2s',
-
-    '&.disabled': {
-      opacity: 0.5,
-    },
-  },
-
-  '.legend-color': {
-    width: '12px',
-    height: '12px',
-    borderRadius: '2px',
-  },
-
-  // Tooltip specific for SVG elements
-  '.chart-element': {
-    transition: 'opacity 0.2s, stroke-width 0.2s, transform 0.2s',
-    cursor: 'pointer',
-
-    '&:hover': {
-      // Hover effect is usually implemented via JS to handle other groups, but basic SVG hover is here
-      opacity: 0.8,
-    },
-  },
-};
-
-// Default colors for charts (Palette)
-export const chartColors = [
-  'var(--primary-accent-color)', // usually blue
-  '#2ecc71', // green
-  '#e74c3c', // red
-  '#f1c40f', // yellow
-  '#9b59b6', // purple
-  '#e67e22', // orange
-  '#1abc9c', // teal
-  '#34495e', // dark blue
-  '#ff9ff3', // pink
-  '#00d2d3', // cyan
-];
-
-export const getChartColor = (index: number) => {
-  return chartColors[index % chartColors.length];
-};
-
-export type ChartSeries = {
-  name: string;
-  data: number[];
-  color?: string;
-};
-
-export type ChartData = {
-  labels: string[];
-  series: ChartSeries[];
-};
-
-export type BasicChartProps = {
-  title?: string;
-  data: ChartData;
-  aspectRatio?: number;
-  width?: string | number;
-  showLegend?: boolean;
-};
-
-// Helper to polar to cartesian coordinates for arc drawing
-export const polarToCartesian = (centerX: number, centerY: number, radius: number, angleInDegrees: number) => {
-  const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
-
-  return {
-    x: centerX + radius * Math.cos(angleInRadians),
-    y: centerY + radius * Math.sin(angleInRadians),
-  };
-};
-
-// Helper to create an SVG arc path
-export const describeArc = (
-  x: number,
-  y: number,
-  radius: number,
-  startAngle: number,
-  endAngle: number,
-  innerRadius: number = 0
-) => {
-  const start = polarToCartesian(x, y, radius, endAngle);
-  const end = polarToCartesian(x, y, radius, startAngle);
-
-  const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
-
-  if (innerRadius === 0) {
-    // Pie slice
-    const d = ['M', start.x, start.y, 'A', radius, radius, 0, largeArcFlag, 0, end.x, end.y, 'L', x, y, 'Z'].join(' ');
-    return d;
-  } else {
-    // Donut slice
-    const innerStart = polarToCartesian(x, y, innerRadius, endAngle);
-    const innerEnd = polarToCartesian(x, y, innerRadius, startAngle);
-
-    const d = [
-      'M',
-      start.x,
-      start.y,
-      'A',
-      radius,
-      radius,
-      0,
-      largeArcFlag,
-      0,
-      end.x,
-      end.y,
-      'L',
-      innerEnd.x,
-      innerEnd.y,
-      'A',
-      innerRadius,
-      innerRadius,
-      0,
-      largeArcFlag,
-      1,
-      innerStart.x,
-      innerStart.y,
-      'Z',
-    ].join(' ');
-    return d;
-  }
-};
+import { CssProps } from 'lupine.web';
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      svg: any;
+      g: any;
+      path: any;
+      rect: any;
+      circle: any;
+      line: any;
+      polygon: any;
+      polyline: any;
+      text: any;
+    }
+  }
+}
+
+// Common CSS for all charts
+export const chartCommonCss: CssProps = {
+  position: 'relative',
+  width: '100%',
+  height: 'auto',
+  minHeight: '0', // Default min height
+  maxHeight: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+
+  // Tooltip integration (if we want to use the Tooltip class)
+  '.chart-svg': {
+    width: '100%',
+    height: '100%',
+    overflow: 'visible',
+    display: 'block',
+  },
+
+  '.chart-title': {
+    fontSize: '16px',
+    fontWeight: 'bold',
+    marginBottom: '8px',
+    color: 'var(--primary-color)',
+    textAlign: 'center' as const,
+  },
+
+  '.chart-legend': {
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    gap: '12px',
+    marginTop: '12px',
+    fontSize: '12px',
+    color: 'var(--primary-color)',
+  },
+
+  '.legend-item': {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '6px',
+    cursor: 'pointer',
+    transition: 'opacity 0.2s',
+
+    '&.disabled': {
+      opacity: 0.5,
+    },
+  },
+
+  '.legend-color': {
+    width: '12px',
+    height: '12px',
+    borderRadius: '2px',
+  },
+
+  // Tooltip specific for SVG elements
+  '.chart-element': {
+    transition: 'opacity 0.2s, stroke-width 0.2s, transform 0.2s',
+    cursor: 'pointer',
+
+    '&:hover': {
+      // Hover effect is usually implemented via JS to handle other groups, but basic SVG hover is here
+      opacity: 0.8,
+    },
+  },
+};
+
+// Default colors for charts (Palette)
+export const chartColors = [
+  'var(--primary-accent-color)', // usually blue
+  '#2ecc71', // green
+  '#e74c3c', // red
+  '#f1c40f', // yellow
+  '#9b59b6', // purple
+  '#e67e22', // orange
+  '#1abc9c', // teal
+  '#34495e', // dark blue
+  '#ff9ff3', // pink
+  '#00d2d3', // cyan
+];
+
+export const getChartColor = (index: number) => {
+  return chartColors[index % chartColors.length];
+};
+
+export type ChartSeries = {
+  name: string;
+  data: number[];
+  color?: string;
+};
+
+export type ChartData = {
+  labels: string[];
+  series: ChartSeries[];
+};
+
+export type BasicChartProps = {
+  title?: string;
+  data: ChartData;
+  aspectRatio?: number;
+  width?: string | number;
+  showLegend?: boolean;
+};
+
+// Helper to polar to cartesian coordinates for arc drawing
+export const polarToCartesian = (centerX: number, centerY: number, radius: number, angleInDegrees: number) => {
+  const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
+
+  return {
+    x: centerX + radius * Math.cos(angleInRadians),
+    y: centerY + radius * Math.sin(angleInRadians),
+  };
+};
+
+// Helper to create an SVG arc path
+export const describeArc = (
+  x: number,
+  y: number,
+  radius: number,
+  startAngle: number,
+  endAngle: number,
+  innerRadius: number = 0
+) => {
+  const start = polarToCartesian(x, y, radius, endAngle);
+  const end = polarToCartesian(x, y, radius, startAngle);
+
+  const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
+
+  if (innerRadius === 0) {
+    // Pie slice
+    const d = ['M', start.x, start.y, 'A', radius, radius, 0, largeArcFlag, 0, end.x, end.y, 'L', x, y, 'Z'].join(' ');
+    return d;
+  } else {
+    // Donut slice
+    const innerStart = polarToCartesian(x, y, innerRadius, endAngle);
+    const innerEnd = polarToCartesian(x, y, innerRadius, startAngle);
+
+    const d = [
+      'M',
+      start.x,
+      start.y,
+      'A',
+      radius,
+      radius,
+      0,
+      largeArcFlag,
+      0,
+      end.x,
+      end.y,
+      'L',
+      innerEnd.x,
+      innerEnd.y,
+      'A',
+      innerRadius,
+      innerRadius,
+      0,
+      largeArcFlag,
+      1,
+      innerStart.x,
+      innerStart.y,
+      'Z',
+    ].join(' ');
+    return d;
+  }
+};

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

@@ -1,111 +1,111 @@
-import { ColumnChart } from './column-chart';
-import { DemoStory } from '../../demo/demo-types';
-import { ChartData } from './chart-utils';
-
-const singleSeriesData: ChartData = {
-  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
-  series: [
-    {
-      name: 'Revenue',
-      data: [3500, 4200, 2800, 5100, 6000, 4800],
-    },
-  ],
-};
-
-const multiSeriesData: ChartData = {
-  labels: ['Q1', 'Q2', 'Q3', 'Q4'],
-  series: [
-    { name: 'Product A', data: [400, 300, 500, 700] },
-    { name: 'Product B', data: [200, 400, 300, 600] },
-    { name: 'Product C', data: [150, 250, 450, 500] },
-  ],
-};
-
-export const columnChartDemo: DemoStory<any> = {
-  id: 'columnChartDemo',
-  text: 'Column Chart',
-  args: {
-    title: 'Monthly Revenue',
-    width: '100%',
-    showLegend: true,
-  },
-  argTypes: {
-    title: { control: 'text' },
-    width: { 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'>
-            <ColumnChart
-              data={singleSeriesData}
-              title={args.title}
-              width={args.width}
-              showLegend={args.showLegend}
-              yAxisFormatter={(val) => '$' + val}
-            />
-          </div>
-        </section>
-
-        <section class='demo-section'>
-          <div class='section-title'>Multi-Series (Grouped)</div>
-          <div class='chart-box'>
-            <ColumnChart data={multiSeriesData} title='Quarterly Product Sales' showLegend={true} />
-          </div>
-        </section>
-      </div>
-    );
-  },
-  code: `import { ColumnChart } from 'lupine.components/component-pool/charts';
-
-const data = {
-  labels: ['Jan', 'Feb', 'Mar'],
-  series: [
-    { name: 'Apples', data: [10, 20, 15] },
-    { name: 'Bananas', data: [5, 25, 30] }
-  ]
-};
-
-<ColumnChart 
-  data={data} 
-  title="Sales" 
-  yAxisFormatter={val => val + 'k'} 
-/>
-`,
-};
+import { ColumnChart } from './column-chart';
+import { DemoStory } from '../../demo/demo-types';
+import { ChartData } from './chart-utils';
+
+const singleSeriesData: ChartData = {
+  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+  series: [
+    {
+      name: 'Revenue',
+      data: [3500, 4200, 2800, 5100, 6000, 4800],
+    },
+  ],
+};
+
+const multiSeriesData: ChartData = {
+  labels: ['Q1', 'Q2', 'Q3', 'Q4'],
+  series: [
+    { name: 'Product A', data: [400, 300, 500, 700] },
+    { name: 'Product B', data: [200, 400, 300, 600] },
+    { name: 'Product C', data: [150, 250, 450, 500] },
+  ],
+};
+
+export const columnChartDemo: DemoStory<any> = {
+  id: 'columnChartDemo',
+  text: 'Column Chart',
+  args: {
+    title: 'Monthly Revenue',
+    width: '100%',
+    showLegend: true,
+  },
+  argTypes: {
+    title: { control: 'text' },
+    width: { 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'>
+            <ColumnChart
+              data={singleSeriesData}
+              title={args.title}
+              width={args.width}
+              showLegend={args.showLegend}
+              yAxisFormatter={(val) => '$' + val}
+            />
+          </div>
+        </section>
+
+        <section class='demo-section'>
+          <div class='section-title'>Multi-Series (Grouped)</div>
+          <div class='chart-box'>
+            <ColumnChart data={multiSeriesData} title='Quarterly Product Sales' showLegend={true} />
+          </div>
+        </section>
+      </div>
+    );
+  },
+  code: `import { ColumnChart } from 'lupine.components/component-pool/charts';
+
+const data = {
+  labels: ['Jan', 'Feb', 'Mar'],
+  series: [
+    { name: 'Apples', data: [10, 20, 15] },
+    { name: 'Bananas', data: [5, 25, 30] }
+  ]
+};
+
+<ColumnChart 
+  data={data} 
+  title="Sales" 
+  yAxisFormatter={val => val + 'k'} 
+/>
+`,
+};