create-ng-tailwind 3.0.1 → 4.0.0

package/lib/templates/dashboard/charts.js

@@ -0,0 +1,305 @@
+const fs = require("fs-extra");
+const path = require("path");
+
+/**
+ * Create chart components (Bar, Line, Donut)
+ */
+async function createCharts(config) {
+  // Bar Chart Component (Pure CSS/SVG - no external dependencies)
+  const barChartComponent = `import { Component, Input, OnChanges } from '@angular/core';
+import { DecimalPipe } from '@angular/common';
+
+export interface BarChartData {
+  label: string;
+  value: number;
+  color?: string;
+}
+
+@Component({
+  selector: 'app-chart-bar',
+  standalone: true,
+  imports: [DecimalPipe],
+  template: \`
+    <div class="w-full">
+      @if (title) {
+        <h3 class="mb-4 text-lg font-semibold text-gray-900">{{ title }}</h3>
+      }
+      <div class="space-y-3">
+        @for (item of data; track item.label) {
+          <div class="flex items-center gap-4">
+            <span class="w-24 truncate text-sm text-gray-600">{{ item.label }}</span>
+            <div class="flex-1">
+              <div class="h-8 w-full overflow-hidden rounded-lg bg-gray-100">
+                <div
+                  class="flex h-full items-center justify-end rounded-lg px-2 transition-all duration-500"
+                  [style.width.%]="getPercentage(item.value)"
+                  [style.backgroundColor]="item.color || defaultColor">
+                  <span class="text-xs font-medium text-white">{{ item.value | number }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        }
+      </div>
+    </div>
+  \`,
+})
+export class ChartBarComponent implements OnChanges {
+  @Input() data: BarChartData[] = [];
+  @Input() title?: string;
+  @Input() defaultColor = '#3b82f6';
+
+  private maxValue = 0;
+
+  ngOnChanges(): void {
+    this.maxValue = Math.max(...this.data.map((d) => d.value), 1);
+  }
+
+  getPercentage(value: number): number {
+    return (value / this.maxValue) * 100;
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(
+      config.fullPath,
+      "src/app/shared/components/chart-bar/chart-bar.component.ts"
+    ),
+    barChartComponent
+  );
+
+  // Line Chart Component (SVG-based)
+  const lineChartComponent = `import { Component, Input, OnChanges, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
+
+export interface LineChartData {
+  label: string;
+  value: number;
+}
+
+@Component({
+  selector: 'app-chart-line',
+  standalone: true,
+  template: \`
+    <div class="w-full">
+      @if (title) {
+        <h3 class="mb-4 text-lg font-semibold text-gray-900">{{ title }}</h3>
+      }
+      <div class="relative h-64 w-full">
+        <svg #chartSvg class="h-full w-full" [attr.viewBox]="'0 0 ' + width + ' ' + height">
+          <!-- Grid lines -->
+          @for (i of gridLines; track i) {
+            <line
+              [attr.x1]="padding"
+              [attr.y1]="padding + (i * chartHeight) / 4"
+              [attr.x2]="width - padding"
+              [attr.y2]="padding + (i * chartHeight) / 4"
+              stroke="#e5e7eb"
+              stroke-width="1"
+            />
+          }
+
+          <!-- Line path -->
+          <path
+            [attr.d]="linePath"
+            fill="none"
+            [attr.stroke]="lineColor"
+            stroke-width="3"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+
+          <!-- Area fill -->
+          <path
+            [attr.d]="areaPath"
+            [attr.fill]="lineColor"
+            fill-opacity="0.1"
+          />
+
+          <!-- Data points -->
+          @for (point of points; track point.x) {
+            <circle
+              [attr.cx]="point.x"
+              [attr.cy]="point.y"
+              r="4"
+              [attr.fill]="lineColor"
+              class="transition-all hover:r-6"
+            />
+          }
+        </svg>
+
+        <!-- X-axis labels -->
+        <div class="mt-2 flex justify-between px-8 text-xs text-gray-500">
+          @for (item of data; track item.label) {
+            <span>{{ item.label }}</span>
+          }
+        </div>
+      </div>
+    </div>
+  \`,
+})
+export class ChartLineComponent implements OnChanges, AfterViewInit {
+  @ViewChild('chartSvg') chartSvg!: ElementRef;
+
+  @Input() data: LineChartData[] = [];
+  @Input() title?: string;
+  @Input() lineColor = '#3b82f6';
+
+  width = 400;
+  height = 200;
+  padding = 20;
+  chartHeight = 160;
+  gridLines = [0, 1, 2, 3, 4];
+
+  linePath = '';
+  areaPath = '';
+  points: { x: number; y: number }[] = [];
+
+  ngAfterViewInit(): void {
+    this.calculatePaths();
+  }
+
+  ngOnChanges(): void {
+    this.calculatePaths();
+  }
+
+  private calculatePaths(): void {
+    if (this.data.length === 0) return;
+
+    const maxValue = Math.max(...this.data.map((d) => d.value), 1);
+    const stepX = (this.width - this.padding * 2) / (this.data.length - 1 || 1);
+
+    this.points = this.data.map((item, index) => ({
+      x: this.padding + index * stepX,
+      y: this.padding + this.chartHeight - (item.value / maxValue) * this.chartHeight,
+    }));
+
+    if (this.points.length > 0) {
+      this.linePath = this.points
+        .map((p, i) => (i === 0 ? \`M \${p.x} \${p.y}\` : \`L \${p.x} \${p.y}\`))
+        .join(' ');
+
+      this.areaPath =
+        this.linePath +
+        \` L \${this.points[this.points.length - 1].x} \${this.padding + this.chartHeight}\` +
+        \` L \${this.points[0].x} \${this.padding + this.chartHeight} Z\`;
+    }
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(
+      config.fullPath,
+      "src/app/shared/components/chart-line/chart-line.component.ts"
+    ),
+    lineChartComponent
+  );
+
+  // Donut Chart Component (SVG-based)
+  const donutChartComponent = `import { Component, Input, OnChanges } from '@angular/core';
+import { DecimalPipe } from '@angular/common';
+
+export interface DonutChartData {
+  label: string;
+  value: number;
+  color: string;
+}
+
+@Component({
+  selector: 'app-chart-donut',
+  standalone: true,
+  imports: [DecimalPipe],
+  template: \`
+    <div class="flex flex-col items-center">
+      @if (title) {
+        <h3 class="mb-4 text-lg font-semibold text-gray-900">{{ title }}</h3>
+      }
+      <div class="relative">
+        <svg [attr.width]="size" [attr.height]="size" [attr.viewBox]="'0 0 ' + size + ' ' + size">
+          @for (segment of segments; track segment.label) {
+            <circle
+              [attr.cx]="center"
+              [attr.cy]="center"
+              [attr.r]="radius"
+              fill="none"
+              [attr.stroke]="segment.color"
+              [attr.stroke-width]="strokeWidth"
+              [attr.stroke-dasharray]="segment.dashArray"
+              [attr.stroke-dashoffset]="segment.dashOffset"
+              stroke-linecap="round"
+              class="transition-all duration-500"
+              [attr.transform]="'rotate(-90 ' + center + ' ' + center + ')'"
+            />
+          }
+        </svg>
+        <!-- Center text -->
+        <div class="absolute inset-0 flex flex-col items-center justify-center">
+          <span class="text-3xl font-bold text-gray-900">{{ total | number }}</span>
+          <span class="text-sm text-gray-500">Total</span>
+        </div>
+      </div>
+
+      <!-- Legend -->
+      <div class="mt-6 grid grid-cols-2 gap-4">
+        @for (item of data; track item.label) {
+          <div class="flex items-center gap-2">
+            <div class="h-3 w-3 rounded-full" [style.backgroundColor]="item.color"></div>
+            <span class="text-sm text-gray-600">{{ item.label }}</span>
+            <span class="text-sm font-medium text-gray-900">{{ item.value | number }}</span>
+          </div>
+        }
+      </div>
+    </div>
+  \`,
+})
+export class ChartDonutComponent implements OnChanges {
+  @Input() data: DonutChartData[] = [];
+  @Input() title?: string;
+  @Input() size = 200;
+  @Input() strokeWidth = 24;
+
+  center = 100;
+  radius = 80;
+  circumference = 2 * Math.PI * 80;
+  total = 0;
+  segments: {
+    label: string;
+    color: string;
+    dashArray: string;
+    dashOffset: number;
+  }[] = [];
+
+  ngOnChanges(): void {
+    this.center = this.size / 2;
+    this.radius = (this.size - this.strokeWidth) / 2;
+    this.circumference = 2 * Math.PI * this.radius;
+    this.total = this.data.reduce((sum, item) => sum + item.value, 0);
+    this.calculateSegments();
+  }
+
+  private calculateSegments(): void {
+    let offset = 0;
+    this.segments = this.data.map((item) => {
+      const percentage = this.total > 0 ? item.value / this.total : 0;
+      const dashArray = \`\${percentage * this.circumference} \${this.circumference}\`;
+      const segment = {
+        label: item.label,
+        color: item.color,
+        dashArray,
+        dashOffset: -offset,
+      };
+      offset += percentage * this.circumference;
+      return segment;
+    });
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(
+      config.fullPath,
+      "src/app/shared/components/chart-donut/chart-donut.component.ts"
+    ),
+    donutChartComponent
+  );
+}
+
+module.exports = { createCharts };