Using with Angular 8

[ishwara-bhat]

How exactly to use this in angular (my version is 8)?

When I do npm install at d:\myangularprojectfolder>npm install ... , it gives the following compatibility errors.

npm WARN @agm/core@1.0.0-beta.5 requires a peer of @angular/common@^5.0.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself. npm WARN @agm/core@1.0.0-beta.5 requires a peer of @angular/core@^5.0.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself. npm WARN @ngu/carousel@1.5.5 requires a peer of @angular/common@^6.0.0 || ^7.0.0 but none is installed. You must install peer dependencies yourself. npm WARN @ngu/carousel@1.5.5 requires a peer of @angular/core@^6.0.0 || ^7.0.0 but none is installed. You must install peer dependencies yourself. npm WARN angular-agora-rtc@0.1.0 requires a peer of @angular/common@^6.0.0-rc.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself. npm WARN angular-agora-rtc@0.1.0 requires a peer of @angular/core@^6.0.0-rc.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself. npm WARN angular-in-memory-web-api@0.8.0 requires a peer of @angular/common@>=6.0.0 <8.0.0 but none is installed. You must install peer dependencies yourself. npm WARN angular-in-memory-web-api@0.8.0 requires a peer of @angular/core@>=6.0.0 <8.0.0 but none is installed. You must install peer dependencies yourself. npm WARN @nicky-lenaers/ngx-scroll-to@2.0.0 requires a peer of @angular/common@^7.1.0 but none is installed. You must install peer dependencies yourself. npm WARN @nicky-lenaers/ngx-scroll-to@2.0.0 requires a peer of @angular/core@^7.1.0 but none is installed. You must install peer dependencies yourself. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

This is after doing updates with d:\projectfolder>ng update @angular/cli @angular/core --allow-dirty --force

I added this to app.module.ts, mycomponent.ts. import { TimelinesChart } from 'timelines-chart';

It does not seem to recognize.

OR - is this purely a javascript library? There are tutorials on using a javascript function. But could not figure out how to integrate into angular. Importing javascript functions from given .js is understood, but could not figure out how to import the components.

Please suggest the specific steps to use this.

Thanks

[ishwara-bhat]

My mistake. I had some additional ',' in my data. The component does not give error. So, I totally ignored it. Sorry about that.

It works well with Angular 8.

[soniya31]

@ishwara-bhat Could you please share the working example with angular 8

[ishwara-bhat]

I have something like this .

//timelinewrapper.ts

import { Component, OnInit, Input, SimpleChanges } from '@angular/core';
import { ElementRef, Renderer2, AfterViewInit, ViewChild } from '@angular/core';
import * as d3 from 'd3';

import TimelinesChart from 'timelines-chart';

@Component({
  selector: 'app-time-line-wrap',
  templateUrl: './time-line-wrap.component.html',
  styleUrls: ['./time-line-wrap.component.scss']
})
export class TimeLineWrapComponent implements OnInit {
    private elRef: any;

    mychart = TimelinesChart();
     inputDataDomain = ['labelval1', 'labelval2', 'labelval3', 'labelval4', 'labelval5'];
    inputDataRange = ['red', 'green', 'grey', 'blue', 'brown'];
    controlwidth: integer = 1000;
   public inputData: any =  //Reference data
        [
            {
                group: "group1",
                data: [
                    {
                        label: "label1",
                        data:
                            [
                                {
                                    timeRange: [1, 2],
                                    val: 'labelval1'
                                },
                                {
                                    timeRange: [2, 3],
                                    val: 'labelval2'
                                },
                                {
                                    timeRange: [6, 7],
                                    val: 'labelval3'
                                },
                                {
                                    timeRange: [7, 8],
                                    val: 'labelval4'
                                },
                                {
                                    timeRange: [11, 12],
                                    val: 'labelval5'
                                },
                                {
                                    timeRange: [12, 13],
                                    val: 'labelval6'
                                }
                            ]
                    },

                ]
            },
            {...}]

             ngOnInit() {
        this.mychart
            .data(this.inputData)
            .zScaleLabel('My Labels')
            .zQualitative(true)
            .xTickFormat(n => +n)
            .timeFormat('%Q')
            .maxLineHeight(20)
            .width(this.controlwidth)
            .topMargin(30)

            //(this.chartspanContainer.nativeElement);

            (this.elRef.nativeElement);

        this.mychart.zColorScale(d3.scaleOrdinal().domain(this.inputDataDomainfromOutside).range(this.inputDataRangefromOutside));
  }
    ngOnChanges(changes: SimpleChanges) {
        console.log("Data simple change event at child chart" + changes)
        this.mychart
            .data(this.inputData);

        console.log(this.inputData);

        this.mychart.zColorScale(d3.scaleOrdinal().domain(this.inputDataDomain).range(this.inputDataRange));
    }