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

npm install ntychart

Required Dependencies

{
  "@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

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

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

Chart Component Usage

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

Configuration

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

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

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

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

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

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

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

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

Component Usage

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

Configuration

import { GanttTask, GanttConfig } from "@nettyapps/ntychart";

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

  // Gantt data
  ganttItems: GanttTask[] = [
    {
      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: "[email protected]",
          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

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

Phase Support

{
  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

{
  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

{
  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

{
  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

ganttItems: GanttTask[] = [
    {
      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

GanttTask Interface

export interface GanttTask {
  // 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?: GanttTask[];
  splitColors?: {
    topColor?: string;
    bottomColors?: string[];
    splitPercentage?: number;
  };
}

GanttConfig Interface

interface GanttConfig {
  viewMode: ViewMode;
  rowHeight: number;
  columnWidth: number;
  showProgress: boolean;
  showDependencies: boolean;
  locale: string;
}