npm package: @nettyapps/ntychart
Description: Custom Chart components for NettyApps Angular applications.
Latest version: 21.1.0

# NtyChart Library

NtyChart is a modern, highly customizable, and powerful charting library. Developed on the Angular framework, NtyChart offers a comprehensive solution for both complex project management needs and traditional data visualization requirements.

The library unites two powerful sub-structures under one roof for two distinct use cases:

**1. Gantt Chart Features:** Specifically designed for project management, timelines, and task tracking. It comes equipped with advanced features such as multiple view modes, interactive tooltips, and capabilities that allow you to easily plan your tasks.

**2. Traditional Data Charts:** For data analysis and visualization, NtyChart offers flexible options by integrating two industry-leading charting libraries:

- **Chart.js:** Open-source, lightweight, and fast; the ideal solution for basic charts like line, bar, and pie.

- **AG Charts Enterprise:** An enterprise-level, professional solution offering rich features and high performance for all needs, from financial data to complex statistics.

With NtyChart, you can visualize the timeline of your projects and present your data effectively with the most suitable chart type, all within a single library. This flexibility and power make it an indispensable tool for modern web applications.

## Installation

```bash
npm install ntychart
```

## Required Dependencies

```json
{
  "@angular/core": "^17.0.0",
  "@angular/common": "^17.0.0",
  "@angular/platform-browser": "^17.0.0",
  "@ngx-translate/core": "^15.0.0",
  "chart.js": "^4.0.0",
  "ag-grid-community": "^30.0.0",
  "ag-grid-enterprise": "^30.0.0",
  "ag-charts-enterprise": "^8.0.0"
}
```

## Chart Usage

### Module Import

```typescript
import { Nettycharts } from "@nettyapps/ntychart";

@NgModule({
  imports: [Nettycharts],
})
export class AppModule {}
```

### Chart Component Usage

```html
<ntychart-nettycharts [libraryType]="'agcharts'" [config]="chartConfig" [chartHeight]="400"></ntychart-nettycharts>
```

### Configuration

```typescript
import { ChartConfig } from "@nettyapps/ntychart";

export class MyComponent {
  // Chart configuration
  chartConfig: ChartConfig = {
    type: "bar",
    data: {
      labels: ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs"],
      datasets: [
        {
          label: "Satışlar",
          data: [65, 59, 80, 81, 56],
          backgroundColor: "rgba(54, 162, 235, 0.6)",
          borderColor: "rgba(54, 162, 235, 1)",
          borderWidth: 1,
        },
      ],
    },
    options: {
      responsive: true,
      plugins: {
        title: {
          display: true,
          text: "Aylık Satışlar",
        },
      },
    },
  };
}
```

## Chart Types

### Supported Chart Types

**Chart.js:**

- bar
- line
  -pie
- doughnut
- radar
- polarArea
- scatter
- bubble

**AG Charts:**

- bar
- line, area
- pie, doughnut
- scatter, bubble,
- radarLine, radarArea
- histogram
- heatmap
- waterfall
- and many more...

## Advanced Features

### Multiple Dataset Support

```typescript
chartConfig: ChartConfig = {
  type: "line",
  data: {
    labels: ["Q1", "Q2", "Q3", "Q4"],
    datasets: [
      {
        label: "2023 Sales",
        data: [120, 150, 180, 200],
        borderColor: "rgba(255, 99, 132, 1)",
        backgroundColor: "rgba(255, 99, 132, 0.2)",
        fill: true,
      },
      {
        label: "2024 Sales",
        data: [140, 170, 190, 220],
        borderColor: "rgba(54, 162, 235, 1)",
        backgroundColor: "rgba(54, 162, 235, 0.2)",
        fill: true,
      },
    ],
  },
};
```

### AG Grid Integration

```typescript
chartConfig: ChartConfig = {
  type: "groupedColumn",
  data: {
    labels: ["Product A", "Product B", "Product C"],
    datasets: [
      {
        label: "Online Sales",
        data: [120, 150, 80],
      },
      {
        label: "Store Sales",
        data: [80, 120, 60],
      },
    ],
  },
  aggFunc: "sum",
};
```

## Customization

### Chart Options

```typescript
options: {
  responsive: true,
  plugins: {
    legend: {
      position: 'top',
      labels: {
        font: {
          size: 14
        }
      }
    },
    title: {
      display: true,
      text: 'Özel Başlık',
      font: {
        size: 16,
        weight: 'bold'
      }
    },
    tooltip: {
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      titleColor: '#fff',
      bodyColor: '#fff'
    }
  },
  scales: {
    y: {
      beginAtZero: true,
      grid: {
        color: 'rgba(0, 0, 0, 0.1)'
      }
    },
    x: {
      grid: {
        display: false
      }
    }
  }
}
```

## Dynamic Data Updates

```typescript
export class MyComponent {
  chartConfig: ChartConfig = {
    type: "line",
    data: {
      labels: [],
      datasets: [
        {
          label: "Real-Time Data",
          data: [],
          borderColor: "rgba(75, 192, 192, 1)",
          backgroundColor: "rgba(75, 192, 192, 0.2)",
        },
      ],
    },
  };

  updateChartData(newData: number[]) {
    this.chartConfig = {
      ...this.chartConfig,
      data: {
        ...this.chartConfig.data,
        datasets: [
          {
            ...this.chartConfig.data.datasets[0],
            data: newData,
          },
        ],
      },
    };
  }

  addDataPoint(value: number) {
    const currentData = [...this.chartConfig.data.datasets[0].data, value];
    const currentLabels = [...this.chartConfig.data.labels, `Point ${currentData.length}`];

    this.updateChartData(currentData);
  }
}
```

## Developer API

### ChartConfig Interface

```typescript
interface ChartConfig {
  type: string;
  data: {
    labels?: string[];
    datasets: {
      label: string;
      data: number[];
      backgroundColor?: string | string[];
      borderColor?: string | string[];
      borderWidth?: number;
      fill?: boolean;
    }[];
  };
  options?: any;
  cellRange?: {
    rowStartIndex?: number;
    rowEndIndex?: number;
    columns: string[];
  };
  aggFunc?: "sum" | "avg" | "count" | "min" | "max";
}

type LibraryChartType = "chartjs" | "agcharts";
```

## Gantt Chart Usage

### Module Import

```typescript
import { GanttChart } from "@nettyapps/ntychart";

@NgModule({
  imports: [
    GanttChart,
    // Other modules...
  ],
})
export class AppModule {}
```

### Component Usage

```html
<ntychart-gantt-chart [items]="ganttItems" [config]="ganttConfig" (createButtonClicked)="onCreateButtonClick()"></ntychart-gantt-chart>
```

### Configuration

```typescript
import { NtyGanttTask, NtyGanttConfig } from "@nettyapps/ntychart";

export class MyComponent {
  // Gantt configuration
  ganttConfig: Partial<NtyGanttConfig> = {
    viewMode: "day",
    rowHeight: 50,
    columnWidth: 30,
    showProgress: true,
    showDependencies: true,
    locale: "tr",
  };

  // Gantt data
  ganttItems: NtyGanttTask[] = [
    {
      id: 1,
      name: "Proje Analizi",
      resource: "AR-GE Projeleri",
      startDate: new Date("2024-01-10"),
      endDate: new Date("2024-01-15"),
      progress: 20,
      color: "#4CAF50",
      dependencies: [],
      notes: "Proje gereksinim analizi tamamlandı.",
    },
    {
      id: 2,
      name: "Geliştirme",
      resource: "Teknoloji",
      startDate: new Date("2024-01-16"),
      endDate: new Date("2024-01-25"),
      progress: 30,
      dependencies: [1],
      color: "#2196F3",
    },
    {
      id: 3,
      name: "Database Kurulumu",
      resource: "Software",
      startDate: new Date("2024-01-20T15:30:00"),
      endDate: new Date("2024-01-25T21:45:00"),
      progress: 100,
      color: "#795548",
      dependencies: [],
      notes: "PostgreSQL veritabanı kurulumu ve migration scriptleri tamamlandı.",
      links: [
        {
          name: "Example1",
          url: "https://example.com/db-schema.pdf",
          type: "document",
        },
        {
          name: "Example2",
          url: "nettyapps@gmail.com",
          type: "email",
        },
        {
          name: "DB Schema",
          url: "https://example.com",
          type: "website",
        },
        {
          name: "DB Schema",
          url: "https://example.com",
          type: "other",
        },
      ],
    },
  ];
}
```

## Advanced Features

### Multiple View Modes

```typescript
// 7 different view modes
viewModes: ViewMode[] = [
  'minute',   // 15 minute intervals
  'hour',     // Hourly
  'day',      // Daily
  'week',     // Weekly
  'month',    // Monthly
  'quarter',  // Quarterly
  'year'      // Yearly
];
```

### Phase Support

```typescript
{
  id: 3,
  name: 'Çok Fazlı Proje',
  resource: 'Demo',
  startDate: new Date('2024-01-10'),
  endDate: new Date('2024-02-10'),
  progress: 45,
  phases: {
    preparation: {
      percentage: 30,
      color: '#2196F3',
      duration: 480 // minutes
    },
    production: {
      percentage: 50,
      color: '#4CAF50',
      duration: 1200
    },
    cleaning: {
      percentage: 20,
      color: '#FF9800',
      duration: 240
    }
  }
}
```

### Split Color Bar

```typescript
{
  id: 4,
  name: 'Split Color Görevi',
  resource: 'UI/UX',
  startDate: new Date('2024-01-15'),
  endDate: new Date('2024-01-20'),
  progress: 60,
  splitColors: {
    topColor: '#FF0000',
    bottomColors: ['#0000FF', '#00FF00', '#FFFF00'],
    splitPercentage: 40
  }
}
```

## Dynamic Tooltip Content

### HTML Tooltip

```typescript
{
  id: 5,
  name: 'HTML Tooltip Task',
  resource: 'Web',
  startDate: new Date('2024-01-12'),
  endDate: new Date('2024-01-18'),
  innerHtml: `
    <div class="custom-tooltip">
      <h3>Custom Content</h3>
      <p>This will be shown inside the HTML tooltip</p>
      <button onclick="alert('Clicked!')">Test</button>
    </div>
  `
}
```

### Component Tooltip

```typescript
{
  id: 6,
  name: 'Component Tooltip Task',
  resource: 'Advanced',
  startDate: new Date('2024-01-20'),
  endDate: new Date('2024-01-25'),
  component: MyCustomTooltipComponent,
  componentInputs: {
    data: customData,
    settings: tooltipSettings
  }
}
```

### Category Tooltips

```typescript
ganttItems: NtyGanttTask[] = [
    {
      id: 7,
      name: 'InnerHTML Category Tooltip Example',
      resource: 'Custom Category',
      startDate: new Date('2024-01-08'),
      endDate: new Date('2024-01-12'),
      resourceInnerHtml: `
    <div style="padding: 10px;">
      <h4>Category Details</h4>
      <p>Custom resource description</p>
    </div>
  `,
    },
    {
      id: 8,
      name: 'Standard Category Tooltip Example',
      resource: 'Custom Category',
      startDate: new Date('2024-01-08'),
      endDate: new Date('2024-01-12'),
      resourceNotes: 'Special notes for this resource...',
      resourceLinks: [
        {
          name: 'Category Document',
          url: 'https://example.com/resource-doc.pdf',
          type: 'document',
        },
      ],
    },
    {
      id: 9,
      name: 'Component Category Tooltip Example',
      resource: 'Custom Category',
      startDate: new Date('2024-01-08'),
      endDate: new Date('2024-01-12'),
      resourceComponent: MyComponent,
    },
]
```

## Developer API

### NtyGanttTask Interface

```typescript
export interface NtyGanttTask {
  // Default
  id: string | number;
  name: string;
  resource: string;
  resourceId?: string | number;
  startDate: Date;
  endDate: Date;
  progress?: number;
  color?: string;
  dependencies?: (string | number)[];
  notes?: string;
  links?: {
    name: string;
    url: string;
    type?: "document" | "website" | "email" | "other";
  }[];
  // Category
  resourceNotes?: string;
  resourceInnerHtml?: string;
  resourceComponent?: any;
  resourceComponentInputs?: { [key: string]: any };
  resourceLinks?: {
    name: string;
    url: string;
    type?: "document" | "website" | "email" | "other";
  }[];
  component?: any;
  componentInputs?: { [key: string]: any };
  innerHtml?: string;
  // Phases
  phases?: {
    preparation: {
      percentage: number;
      duration?: number;
      color?: string;
    };
    production: {
      percentage: number;
      duration?: number;
      color?: string;
    };
    cleaning: {
      percentage: number;
      duration?: number;
      color?: string;
    };
  };
  overlappingItems?: NtyGanttTask[];
  splitColors?: {
    topColor?: string;
    bottomColors?: string[];
    splitPercentage?: number;
  };
}
```

### NtyGanttConfig Interface

```typescript
interface NtyGanttConfig {
  viewMode: ViewMode;
  rowHeight: number;
  columnWidth: number;
  showProgress: boolean;
  showDependencies: boolean;
  locale: string;
}
```