IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-03 12:11:09 -06:00
Code Issues Packages Projects Releases Wiki Activity

Import only what is used from d3

Browse Source
This commit is contained in:
corpglory-dev 2019-03-08 13:33:53 +03:00
parent 0f9253fe9d
commit ef37e95bb7
1 changed files with 16 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
packages/grafana-ui/src/components/Piechart/Piechart.tsx
View File

@ -1,5 +1,5 @@
import React, { PureComponent } from 'react';
import * as d3 from 'd3';
import { select, pie, arc, event } from 'd3';
import { GrafanaThemeType } from '../../types';
import { Themeable } from '../../index';
@ -58,9 +58,8 @@ export class Piechart extends PureComponent<Props> {
const outerRadius = radius - radius / 10;
const innerRadius = pieType === PiechartType.PIE ? 0 : radius - radius / 3;
d3.select('.piechart-container svg').remove();
const svg = d3
.select('.piechart-container')
select('.piechart-container svg').remove();
const svg = select('.piechart-container')
.append('svg')
.attr('width', width)
.attr('height', height)
@ -68,42 +67,38 @@ export class Piechart extends PureComponent<Props> {
.append('g')
.attr('transform', `translate(${width / 2},${height / 2})`);
const arc = d3
.arc()
const pieChart = pie();
const customArc = arc()
.outerRadius(outerRadius)
.innerRadius(innerRadius)
.padAngle(0);
const pie = d3.pie();
svg
.selectAll('path')
.data(pie(data))
.data(pieChart(data))
.enter()
.append('path')
.attr('d', arc as any)
.attr('fill', (d: any, idx: number) => {
return colors[idx];
})
.attr('d', customArc as any)
.attr('fill', (d: any, idx: number) => colors[idx])
.style('fill-opacity', 0.15)
.style('stroke', (d: any, idx: number) => {
return colors[idx];
})
.style('stroke', (d: any, idx: number) => colors[idx])
.style('stroke-width', `${strokeWidth}px`)
.on('mouseover', (d: any, idx: any) => {
d3.select('#tooltip')
select('#tooltip')
.style('opacity', 1)
.select('#tooltip-value')
// TODO: show percents
.text(`${names[idx]} (${data[idx]})`);
})
.on('mousemove', () => {
d3.select('#tooltip')
.style('top', d3.event.pageY - 10 + 'px')
.style('left', d3.event.pageX + 10 + 'px');
select('#tooltip')
// TODO: right position
.style('top', `${event.pageY}px`)
.style('left', `${event.pageX}px`);
})
.on('mouseout', () => {
d3.select('#tooltip').style('opacity', 0);
select('#tooltip').style('opacity', 0);
});
}