@ngbase/adk 0.1.16 → 0.1.18

package/schematics/components/files/charts/area-chart.component.ts.template

@@ -0,0 +1,278 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  afterNextRender,
+  input,
+  viewChild,
+  effect,
+  signal,
+} from '@angular/core';
+import * as d3 from 'd3';
+import { ChartTooltipComponent, TooltipContent } from './chart-tooltip.component';
+
+interface AreaData {
+  label: string;
+  value: number;
+}
+
+@Component({
+  selector: '<%= name %>-area-chart',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ChartTooltipComponent],
+  template: `
+    <svg #chart class="w-full"></svg>
+    <<%= name %>-chart-tooltip
+      [visible]="tooltipVisible()"
+      [x]="tooltipX()"
+      [y]="tooltipY()"
+      [content]="tooltipContent()"
+    />
+  `,
+  host: {
+    class: 'block relative',
+  },
+})
+export class AreaChartComponent {
+  readonly chartRef = viewChild.required<ElementRef<SVGElement>>('chart');
+
+  data = input.required<AreaData[]>();
+
+  height = input(250);
+  showYAxis = input(false);
+
+  private svg!: d3.Selection<SVGElement, unknown, null, undefined>;
+  private margin = { top: 20, right: 20, bottom: 50, left: 50 };
+
+  // Tooltip state
+  tooltipVisible = signal(false);
+  tooltipX = signal(0);
+  tooltipY = signal(0);
+  tooltipContent = signal<TooltipContent>({ label: '', value: 0 });
+
+  private resizeObserver: ResizeObserver | undefined;
+
+  constructor() {
+    afterNextRender(() => {
+      this.svg = d3.select(this.chartRef().nativeElement);
+      this.updateChart();
+
+      this.resizeObserver = new ResizeObserver(() => {
+        this.updateChart();
+      });
+      this.resizeObserver.observe(this.chartRef().nativeElement.parentElement!);
+    });
+
+    // Watch for input changes and update chart
+    effect(() => {
+      const data = this.data();
+      const _height = this.height();
+      const _showYAxis = this.showYAxis();
+
+      // Update chart if svg is initialized
+      if (this.svg && data) {
+        this.updateChart();
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+  }
+
+  private updateChart(): void {
+    if (!this.svg) return;
+
+    const data = this.data();
+    // Get actual width from parent container
+    const containerWidth = this.chartRef().nativeElement.parentElement?.clientWidth || 0;
+
+    if (containerWidth === 0) return;
+
+    // Adjust left margin based on showYAxis
+    const leftMargin = this.showYAxis() ? this.margin.left : 20;
+    const width = containerWidth - leftMargin - this.margin.right;
+    const height = this.height() - this.margin.top - this.margin.bottom;
+
+    // Clear previous content
+    this.svg.selectAll('*').remove();
+
+    // Set SVG dimensions - width/height/viewBox must match
+    this.svg
+      .attr('width', containerWidth)
+      .attr('height', this.height())
+      .attr('viewBox', `0 0 ${containerWidth} ${this.height()}`);
+
+    // Create chart group
+    const g = this.svg.append('g').attr('transform', `translate(${leftMargin},${this.margin.top})`);
+
+    // Get CSS variables for theming
+    const textColor = getComputedStyle(document.documentElement)
+      .getPropertyValue('--color-text')
+      .trim();
+    const borderColor = getComputedStyle(document.documentElement)
+      .getPropertyValue('--color-border')
+      .trim();
+
+    // Get chart color (using chart-2 for area)
+    const areaColor = getComputedStyle(document.documentElement)
+      .getPropertyValue('--chart-2')
+      .trim();
+
+    // Create gradient for area fill
+    const gradient = this.svg
+      .append('defs')
+      .append('linearGradient')
+      .attr('id', 'area-gradient')
+      .attr('x1', '0%')
+      .attr('y1', '0%')
+      .attr('x2', '0%')
+      .attr('y2', '100%');
+
+    gradient
+      .append('stop')
+      .attr('offset', '0%')
+      .attr('stop-color', areaColor)
+      .attr('stop-opacity', 0.8);
+
+    gradient
+      .append('stop')
+      .attr('offset', '100%')
+      .attr('stop-color', areaColor)
+      .attr('stop-opacity', 0.1);
+
+    // Create scales
+    const x = d3
+      .scalePoint()
+      .domain(data.map(d => d.label))
+      .range([0, width])
+      .padding(0.5);
+
+    const y = d3
+      .scaleLinear()
+      .domain([0, d3.max(data, d => d.value) || 100])
+      .nice()
+      .range([height, 0]);
+
+    // Add X axis
+    g.append('g')
+      .attr('transform', `translate(0,${height})`)
+      .call(d3.axisBottom(x))
+      .style('color', textColor)
+      .selectAll('text')
+      .style('font-size', '12px');
+
+    // Add Y axis (conditionally)
+    if (this.showYAxis()) {
+      g.append('g')
+        .call(d3.axisLeft(y))
+        .style('color', textColor)
+        .selectAll('text')
+        .style('font-size', '12px');
+    }
+
+    // Style axis lines
+    g.selectAll('.domain, .tick line').style('stroke', borderColor);
+
+    // Add grid lines
+    g.append('g')
+      .attr('class', 'grid')
+      .call(
+        d3
+          .axisLeft(y)
+          .tickSize(-width)
+          .tickFormat(() => ''),
+      )
+      .select('.domain')
+      .remove();
+
+    // Style grid lines
+    g.selectAll('.grid .tick line').style('stroke', 'rgb(229 229 229 / 50%)');
+
+    // Create area generator
+    const area = d3
+      .area<AreaData>()
+      .x(d => x(d.label) || 0)
+      .y0(height)
+      .y1(d => y(d.value))
+      .curve(d3.curveMonotoneX);
+
+    // Create line generator
+    const line = d3
+      .line<AreaData>()
+      .x(d => x(d.label) || 0)
+      .y(d => y(d.value))
+      .curve(d3.curveMonotoneX);
+
+    // Add the area with animation
+    const areaPath = g
+      .append('path')
+      .datum(data)
+      .attr('fill', 'url(#area-gradient)')
+      .attr('d', area)
+      .attr('opacity', 0);
+
+    areaPath.transition().duration(1000).attr('opacity', 0.4);
+
+    // Add the line path
+    const linePath = g
+      .append('path')
+      .datum(data)
+      .attr('fill', 'none')
+      .attr('stroke', areaColor)
+      .attr('stroke-width', 1)
+      .attr('d', line);
+
+    // Animate line drawing
+    const totalLength = linePath.node()?.getTotalLength() || 0;
+    linePath
+      .attr('stroke-dasharray', `${totalLength} ${totalLength}`)
+      .attr('stroke-dashoffset', totalLength)
+      .transition()
+      .duration(1200)
+      .ease(d3.easeLinear)
+      .attr('stroke-dashoffset', 0);
+
+    // Add circles for data points
+    const circles = g
+      .selectAll('.dot')
+      .data(data)
+      .enter()
+      .append('circle')
+      .attr('class', 'dot')
+      .attr('cx', d => x(d.label) || 0)
+      .attr('cy', d => y(d.value))
+      .attr('r', 0)
+      .attr('fill', areaColor)
+      .attr('stroke', 'transparent')
+      .attr('stroke-width', 2)
+      .style('cursor', 'pointer');
+
+    // Add hover effects for tooltip
+    circles
+      .on('mouseenter', (event, d) => {
+        const circleX = x(d.label) || 0;
+        const circleY = y(d.value);
+        const svgRect = this.chartRef().nativeElement.getBoundingClientRect();
+
+        this.tooltipContent.set({ label: d.label, value: d.value });
+        this.tooltipX.set(svgRect.left + leftMargin + circleX);
+        this.tooltipY.set(svgRect.top + this.margin.top + circleY - 10);
+        this.tooltipVisible.set(true);
+
+        // Enlarge circle on hover
+        d3.select(event.currentTarget).transition().duration(200).attr('r', 6);
+      })
+      .on('mouseleave', event => {
+        this.tooltipVisible.set(false);
+
+        // Restore circle size
+        d3.select(event.currentTarget).transition().duration(200).attr('r', 4);
+      });
+
+    // Animate circles
+    circles.transition().delay(1200).duration(400).attr('r', 4);
+  }
+}

package/schematics/components/files/charts/bar-chart.component.ts.template

@@ -0,0 +1,262 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  afterNextRender,
+  input,
+  viewChild,
+  effect,
+  signal,
+} from '@angular/core';
+import * as d3 from 'd3';
+import { ChartTooltipComponent, TooltipContent } from './chart-tooltip.component';
+
+interface BarData {
+  label: string;
+  value: number;
+}
+
+@Component({
+  selector: '<%= name %>-bar-chart',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ChartTooltipComponent],
+  template: `
+    <svg #chart class="w-full"></svg>
+    <<%= name %>-chart-tooltip
+      [visible]="tooltipVisible()"
+      [x]="tooltipX()"
+      [y]="tooltipY()"
+      [content]="tooltipContent()"
+    />
+  `,
+  host: {
+    class: 'block relative',
+  },
+})
+export class BarChartComponent {
+  readonly chartRef = viewChild.required<ElementRef<SVGElement>>('chart');
+
+  data = input.required<BarData[]>();
+
+  height = input(250);
+  showYAxis = input(false);
+  showGrid = input(true);
+  color = input<string>();
+  colors = input<string[]>();
+  xAxisLabel = input<string>();
+  yAxisLabel = input<string>();
+
+  private svg!: d3.Selection<SVGElement, unknown, null, undefined>;
+  private margin = { top: 20, right: 20, bottom: 50, left: 50 };
+
+  // Tooltip state
+  tooltipVisible = signal(false);
+  tooltipX = signal(0);
+  tooltipY = signal(0);
+  tooltipContent = signal<TooltipContent>({ label: '', value: 0 });
+
+  private resizeObserver: ResizeObserver | undefined;
+
+  constructor() {
+    afterNextRender(() => {
+      this.svg = d3.select(this.chartRef().nativeElement);
+      this.updateChart();
+
+      // meaningful ResizeObserver to handle container size changes
+      this.resizeObserver = new ResizeObserver(() => {
+        this.updateChart();
+      });
+      this.resizeObserver.observe(this.chartRef().nativeElement.parentElement!);
+    });
+
+    // Watch for input changes and update chart
+    effect(() => {
+      const data = this.data();
+      const _height = this.height();
+      const _showYAxis = this.showYAxis();
+      const _colors = this.colors();
+      const _color = this.color();
+      const _showGrid = this.showGrid();
+
+      // Update chart if svg is initialized
+      if (this.svg && data) {
+        this.updateChart();
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+  }
+
+  private updateChart(): void {
+    if (!this.svg) return;
+
+    const data = this.data();
+    // Get actual width from parent container
+    const containerWidth = this.chartRef().nativeElement.parentElement?.clientWidth || 0;
+
+    if (containerWidth === 0) return;
+
+    // Calculate margins based on labels
+    const marginBottom = this.xAxisLabel() ? this.margin.bottom + 20 : this.margin.bottom;
+    const marginLeft = this.yAxisLabel()
+      ? this.margin.left + 20
+      : this.showYAxis()
+        ? this.margin.left
+        : 20;
+
+    const width = containerWidth - marginLeft - this.margin.right;
+    const height = this.height() - this.margin.top - marginBottom;
+
+    // Clear previous content
+    this.svg.selectAll('*').remove();
+
+    // Set SVG dimensions - width/height/viewBox must match
+    this.svg
+      .attr('width', containerWidth)
+      .attr('height', this.height())
+      .attr('viewBox', `0 0 ${containerWidth} ${this.height()}`);
+
+    // Create chart group
+    const g = this.svg.append('g').attr('transform', `translate(${marginLeft},${this.margin.top})`);
+
+    // Get CSS variables for theming
+    const textColor = getComputedStyle(document.documentElement)
+      .getPropertyValue('--color-text')
+      .trim();
+    const borderColor = getComputedStyle(document.documentElement)
+      .getPropertyValue('--color-border')
+      .trim();
+
+    // Get chart colors
+    let chartColors: string[] = [];
+
+    if (this.colors()) {
+      chartColors = this.colors()!;
+    } else if (this.color()) {
+      chartColors = [this.color()!];
+    } else {
+      chartColors = Array.from({ length: 5 }, (_, i) =>
+        getComputedStyle(document.documentElement)
+          .getPropertyValue(`--chart-${i + 1}`)
+          .trim(),
+      );
+    }
+
+    // Create scales
+    const x = d3
+      .scaleBand()
+      .domain(data.map(d => d.label))
+      .range([0, width])
+      .padding(0.2);
+
+    const y = d3
+      .scaleLinear()
+      .domain([0, d3.max(data, d => d.value) || 100])
+      .nice()
+      .range([height, 0]);
+
+    // Add X axis
+    g.append('g')
+      .attr('transform', `translate(0,${height})`)
+      .call(d3.axisBottom(x))
+      .style('color', textColor)
+      .selectAll('text')
+      .style('font-size', '12px');
+
+    // Add Y axis (conditionally)
+    if (this.showYAxis()) {
+      g.append('g')
+        .call(d3.axisLeft(y))
+        .style('color', textColor)
+        .selectAll('text')
+        .style('font-size', '12px');
+    }
+
+    // Style axis lines
+    g.selectAll('.domain, .tick line').style('stroke', borderColor);
+
+    // Add axis labels
+    if (this.xAxisLabel()) {
+      g.append('text')
+        .attr('class', 'x-label')
+        .attr('text-anchor', 'middle')
+        .attr('x', width / 2)
+        .attr('y', height + 40)
+        .style('fill', textColor)
+        .style('font-size', '12px')
+        .text(this.xAxisLabel()!);
+    }
+
+    if (this.yAxisLabel() && this.showYAxis()) {
+      g.append('text')
+        .attr('class', 'y-label')
+        .attr('text-anchor', 'middle')
+        .attr('transform', 'rotate(-90)')
+        .attr('y', -40)
+        .attr('x', -height / 2)
+        .style('fill', textColor)
+        .style('font-size', '12px')
+        .text(this.yAxisLabel()!);
+    }
+
+    // Add grid lines
+    if (this.showGrid()) {
+      g.append('g')
+        .attr('class', 'grid')
+        .call(
+          d3
+            .axisLeft(y)
+            .tickSize(-width)
+            .tickFormat(() => ''),
+        )
+        .select('.domain')
+        .remove();
+
+      // Style grid lines
+      g.selectAll('.grid .tick line').style('stroke', 'rgb(229 229 229 / 50%)');
+    }
+
+    // Add bars
+    const bars = g
+      .selectAll('.bar')
+      .data(data)
+      .enter()
+      .append('rect')
+      .attr('class', 'bar')
+      .attr('x', d => x(d.label) || 0)
+      .attr('width', x.bandwidth())
+      .attr('y', height)
+      .attr('height', 0)
+      .attr('fill', (d, i) => chartColors[i % chartColors.length])
+      .attr('rx', 8)
+      .attr('ry', 8)
+      .style('cursor', 'pointer');
+
+    // Add hover effects for tooltip
+    bars
+      .on('mouseenter', (event, d) => {
+        const barX = (x(d.label) || 0) + x.bandwidth() / 2;
+        const barY = y(d.value);
+        const svgRect = this.chartRef().nativeElement.getBoundingClientRect();
+
+        this.tooltipContent.set({ label: d.label, value: d.value });
+        this.tooltipX.set(svgRect.left + marginLeft + barX);
+        this.tooltipY.set(svgRect.top + this.margin.top + barY - 10);
+        this.tooltipVisible.set(true);
+      })
+      .on('mouseleave', () => {
+        this.tooltipVisible.set(false);
+      });
+
+    // Animate bars
+    bars
+      .transition()
+      .duration(800)
+      .attr('y', d => y(d.value))
+      .attr('height', d => height - y(d.value));
+  }
+}

package/schematics/components/files/charts/chart-tooltip.component.ts.template

@@ -0,0 +1,168 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  viewChild,
+  ElementRef,
+  effect,
+  signal,
+} from '@angular/core';
+
+export interface TooltipContent {
+  label: string;
+  value: number;
+  percentage?: number;
+}
+
+@Component({
+  selector: '<%= name %>-chart-tooltip',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div
+      #tooltipElement
+      class="chart-tooltip"
+      [style.left.px]="finalX()"
+      [style.top.px]="finalY()"
+      [class.visible]="visible()"
+    >
+      <div class="tooltip-content">
+        <div class="tooltip-label">{{ content().label }}</div>
+        <div class="tooltip-value">{{ content().value }}</div>
+        @if (content().percentage !== undefined) {
+          <div class="tooltip-percentage">{{ content().percentage }}%</div>
+        }
+      </div>
+    </div>
+  `,
+  styles: `
+    :host {
+      display: contents;
+    }
+
+    .chart-tooltip {
+      position: fixed;
+      pointer-events: none;
+      z-index: 9999;
+      opacity: 0;
+      transform: translateY(-8px) scale(0.95);
+      transition:
+        opacity 150ms ease-out,
+        transform 150ms ease-out;
+    }
+
+    .chart-tooltip.visible {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+
+    .tooltip-content {
+      background: var(--color-background);
+      border: 1px solid var(--color-border);
+      border-radius: 8px;
+      padding: 8px 12px;
+      box-shadow:
+        0 10px 15px -3px rgb(0 0 0 / 0.1),
+        0 4px 6px -4px rgb(0 0 0 / 0.1);
+      font-size: 12px;
+      color: var(--color-text);
+      white-space: nowrap;
+    }
+
+    .tooltip-label {
+      font-weight: 500;
+      margin-bottom: 2px;
+      color: var(--color-text-muted);
+    }
+
+    .tooltip-value {
+      font-weight: 600;
+      font-size: 14px;
+    }
+
+    .tooltip-percentage {
+      font-weight: 500;
+      margin-top: 2px;
+      color: var(--color-text-muted);
+      font-size: 11px;
+    }
+  `,
+})
+export class ChartTooltipComponent {
+  readonly tooltipElement = viewChild<ElementRef<HTMLDivElement>>('tooltipElement');
+
+  visible = input(false);
+  x = input(0);
+  y = input(0);
+  content = input<TooltipContent>({ label: '', value: 0 });
+
+  // Signals to store measured dimensions
+  private tooltipWidth = signal(0);
+  private tooltipHeight = signal(0);
+
+  // Default spacing from cursor
+  private readonly CURSOR_OFFSET_X = 12;
+  private readonly CURSOR_OFFSET_Y = 12;
+
+  // Computed final positions based on dimensions and viewport
+  finalX = computed(() => {
+    const baseX = this.x();
+    const width = this.tooltipWidth();
+    const viewportWidth = window.innerWidth;
+
+    // Position to the right of cursor by default
+    let finalX = baseX + this.CURSOR_OFFSET_X;
+
+    // If tooltip would go off right edge, position to the left of cursor
+    if (finalX + width > viewportWidth) {
+      finalX = baseX - width - this.CURSOR_OFFSET_X;
+    }
+
+    // Ensure it doesn't go off left edge
+    if (finalX < 0) {
+      finalX = this.CURSOR_OFFSET_X;
+    }
+
+    return finalX;
+  });
+
+  finalY = computed(() => {
+    const baseY = this.y();
+    const height = this.tooltipHeight();
+    const viewportHeight = window.innerHeight;
+
+    // Position above cursor by default
+    let finalY = baseY - height - this.CURSOR_OFFSET_Y;
+
+    // If tooltip would go off top edge, position below cursor
+    if (finalY < 0) {
+      finalY = baseY + this.CURSOR_OFFSET_Y;
+    }
+
+    // Ensure it doesn't go off bottom edge
+    if (finalY + height > viewportHeight) {
+      finalY = viewportHeight - height - this.CURSOR_OFFSET_Y;
+    }
+
+    return finalY;
+  });
+
+  constructor() {
+    // Measure tooltip dimensions when content changes or it becomes visible
+    effect(() => {
+      // Subscribe to changes
+      this.content();
+      this.visible();
+
+      const element = this.tooltipElement()?.nativeElement;
+      if (element) {
+        // Use requestAnimationFrame to ensure DOM has updated
+        requestAnimationFrame(() => {
+          const rect = element.getBoundingClientRect();
+          this.tooltipWidth.set(rect.width);
+          this.tooltipHeight.set(rect.height);
+        });
+      }
+    });
+  }
+}

package/schematics/components/files/charts/index.ts.template

@@ -0,0 +1,4 @@
+export * from './area-chart.component';
+export * from './bar-chart.component';
+export * from './line-chart.component';
+export * from './pie-chart.component';