{"version":3,"file":"responsive-pie-chart.mjs","sources":["../../../projects/responsive-pie-chart/src/lib/responsive-pie-chart.service.ts","../../../projects/responsive-pie-chart/src/lib/responsive-pie-chart.component.ts","../../../projects/responsive-pie-chart/src/lib/responsive-pie-chart.component.html","../../../projects/responsive-pie-chart/src/lib/responsive-pie-chart.module.ts","../../../projects/responsive-pie-chart/src/public-api.ts","../../../projects/responsive-pie-chart/src/responsive-pie-chart.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class ResponsivePieChartService {\n\n  constructor() { }\n}\n","import { Component, OnInit, ElementRef, AfterViewInit, Input } from '@angular/core';\nimport * as d3 from 'd3';\nimport { PieArcDatum } from 'd3';\n\nexport interface Data {\n  name: string;\n  value: number;\n  color: string;\n}\n\n@Component({\n  selector: 'lib-responsive-pie-chart',\n  templateUrl: './responsive-pie-chart.component.html',\n  styleUrls: ['./responsive-pie-chart.component.scss']\n})\nexport class ResponsivePieChartComponent implements OnInit, AfterViewInit {\n  @Input() donutHole: number = 0;\n  @Input() width: number = 100;\n  @Input() height: number = 100;\n  @Input() data: Data[] = [\n    {\n      name: 'IT',\n      value: 4,\n      color: 'red'\n    },\n    {\n      name: 'Sales',\n      value: 5,\n      color: 'blue'\n    }\n  ];\n\n  private pieData: Data[] =  [];\n  private radius = 0;\n  private offset = 5;\n  private strokeWidth = 1;\n  public svgWidth = 0;\n  public svgHeight = 0;\n\n  constructor(private eltRef: ElementRef) { }\n\n  ngOnInit(): void {\n    this.convertData(this.data);\n  }\n\n  ngAfterViewInit(): void {\n    this.radius = Math.min(this.width, this.height) / 2;\n    this.svgWidth = this.width + this.offset * 2 + this.strokeWidth * 2;\n    this.svgHeight = this.height + this.offset * 2 + this.strokeWidth * 2;\n    this.buildPie();\n  }\n\n  convertData(dataList: Data[]) {//convert to percentage for pie chart\n    let sum = 0;\n\n    dataList.forEach((e: Data) => {\n      sum += e.value;\n    });\n\n    dataList.forEach(e => {\n      let newData = {name:e.name, value:e.value/sum, color: e.color};\n      this.pieData.push(newData);\n    });\n  }\n\n  buildPie() {\n    const eltRef = this.eltRef;\n    let arc = d3.arc<PieArcDatum<Data>>().innerRadius(this.donutHole).outerRadius(this.radius);\n    let arcOver = d3.arc<PieArcDatum<Data>>().innerRadius(this.donutHole).outerRadius(this.radius + this.offset);\n\n    let svg = d3.select(this.eltRef.nativeElement)\n      .select('#pieChart')\n      .attr('viewBox', (0-this.radius-this.offset-this.strokeWidth) + \" \" +  (0-this.radius-this.offset-this.strokeWidth) + \" \" + 2 * (this.radius + this.offset + 2 * this.strokeWidth) + \" \" + 2 * (this.radius + this.offset + 2 * this.strokeWidth));\n\n\n    let g = svg.append('g');\n\n      // .attr('transform', 'translate(' + this.svgWidth / 2 + ',' + this.svgHeight / 2 + ')')\n\n    // // Generate the pie\n    let pie = d3.pie<Data>().value((d: { value: any; }) => d.value);\n\n    // Generate groups\n    let arcs = g.selectAll(\"arc\")\n    .data(pie(this.pieData))\n    .enter()\n    .append(\"g\")\n    .attr(\"class\", \"arc\");\n\n    //Draw arc paths\n    arcs.append('path')\n    .attr('d', <any>arc)\n    .attr(\"fill\", function(d: { data: { color: any; }; }) {\n      return d.data.color;\n    })\n    .attr(\"stroke\", \"white\")\n    .style(\"stroke-width\", this.strokeWidth + \"px\")\n    .on(\"click\", function(event, d){\n      d3.select(this)\n       .transition()\n       .duration(100)\n       .attr(\"stroke\", \"grey\")\n      //  .style(\"stroke-width\", \"2px\")\n       ;\n \n      d3.select(eltRef.nativeElement).select('#tooltip')\n        .transition().duration(0)\n        .style('left', event.offsetX + 'px')\n        .style('top', event.offsetY + 'px')\n        .style('opacity', 1)\n        .text(d.data.name + \": \" + (d.data.value*100).toFixed(2) +'%')\n        ;\n     })\n     .on(\"mouseover\", function(event, d){\n      d3.select(this)\n      .transition()\n      .duration(100)\n      .attr(\"d\", <any>arcOver)\n      // .attr(\"stroke\", \"grey\")\n      ;\n\n      d3.select(eltRef.nativeElement).select('div#tooltip')\n        .transition().duration(0)\n        .style('left', event.offsetX + 'px')\n        .style('top', event.offsetY+10 + 'px')\n        .style('opacity', 1)\n        .text(d.data.name + \": \" + (d.data.value*100).toFixed(2)+'%')\n        ;\n\n      // d3.select(eltRef.nativeElement).select('#indicator')\n      //   .style('opacity', 1)\n      //   .text(d.data.name + \": \" + (d.data.value*100).toFixed(2)+'%');\n    })\n    .on(\"mouseout\", function(event: any, d: any){\n      d3.select(this)\n      .transition()\n      .duration(100)\n      .attr(\"d\", <any>arc)\n      // .attr(\"stroke\", \"white\")\n      ;\n\n      d3.select(eltRef.nativeElement).select('div#tooltip')\n      .style('opacity', 0);\n\n      // d3.select(eltRef.nativeElement).select('#indicator')\n      // .style('opacity', 0)\n      // ;\n    });\n  }\n\n}\n\n\n","<!-- <div class=\"pieGraph\" style=\"position:absolute; top:0; left: 0; height: 100%;width: 100%;\"> -->\n    <div style=\" height: 100%;width: 100%; display:flex; align-items: center; cursor: pointer; position: relative;\">\n        <div id=\"tooltip\" style=\"position:absolute; left: 0;top:0;opacity:0; background-color: white; border-radius: 3px;padding: 3px;\n         box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;\" > \n        </div>\n        <svg id=\"pieChart\" [attr.width]=\"svgWidth\" [attr.height]=\"svgHeight\" ></svg>\n    </div>\n<!-- </div> -->\n    <!-- <div id=\"pieChart\" [attr.width]=\"svgWidth\" [attr.height]=\"svgHeight\" ></div>\n\n    <div id=\"tooltip\" style=\"position:absolute; left: 0;top:0;opacity:0; background-color: white; border-radius: 3px;padding: 3px;\n    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;\" > \n    </div>\n\n    <div id=\"indicator\" style=\"position:absolute; left: 0;bottom:0;opacity:0; font-size: 13px; margin-left: 5px;\" > </div> -->\n\n\n","import { NgModule } from '@angular/core';\nimport { ResponsivePieChartComponent } from './responsive-pie-chart.component';\n\n\n\n@NgModule({\n  declarations: [\n    ResponsivePieChartComponent\n  ],\n  imports: [\n  ],\n  exports: [\n    ResponsivePieChartComponent\n  ]\n})\nexport class ResponsivePieChartModule { }\n","/*\n * Public API Surface of responsive-pie-chart\n */\n\nexport * from './lib/responsive-pie-chart.service';\nexport * from './lib/responsive-pie-chart.component';\nexport * from './lib/responsive-pie-chart.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}