From 8b4eefa768a1ab5d9a5948fba971835b6e45aa0e Mon Sep 17 00:00:00 2001 From: corpglory-dev Date: Fri, 15 Feb 2019 20:43:51 +0300 Subject: [PATCH 01/40] Initial commit --- .../src/components/Piechart/Piechart.tsx | 60 ++++++++++++++++++ packages/grafana-ui/src/components/index.ts | 1 + .../plugins/panel/piechart/PiechartPanel.tsx | 43 +++++++++++++ .../panel/piechart/PiechartPanelOptions.tsx | 30 +++++++++ .../plugins/panel/piechart/ValueOptions.tsx | 42 ++++++++++++ .../piechart/img/piechart_logo_large.png | Bin 0 -> 3723 bytes .../piechart/img/piechart_logo_small.png | Bin 0 -> 2629 bytes public/app/plugins/panel/piechart/module.tsx | 4 ++ public/app/plugins/panel/piechart/plugin.json | 18 ++++++ public/app/plugins/panel/piechart/types.ts | 7 ++ 10 files changed, 205 insertions(+) create mode 100644 packages/grafana-ui/src/components/Piechart/Piechart.tsx create mode 100644 public/app/plugins/panel/piechart/PiechartPanel.tsx create mode 100644 public/app/plugins/panel/piechart/PiechartPanelOptions.tsx create mode 100644 public/app/plugins/panel/piechart/ValueOptions.tsx create mode 100644 public/app/plugins/panel/piechart/img/piechart_logo_large.png create mode 100644 public/app/plugins/panel/piechart/img/piechart_logo_small.png create mode 100644 public/app/plugins/panel/piechart/module.tsx create mode 100644 public/app/plugins/panel/piechart/plugin.json create mode 100644 public/app/plugins/panel/piechart/types.ts diff --git a/packages/grafana-ui/src/components/Piechart/Piechart.tsx b/packages/grafana-ui/src/components/Piechart/Piechart.tsx new file mode 100644 index 00000000000..c57d4c43ce8 --- /dev/null +++ b/packages/grafana-ui/src/components/Piechart/Piechart.tsx @@ -0,0 +1,60 @@ +import React, { PureComponent } from 'react'; + +import { GrafanaThemeType } from '../../types'; +import { Themeable } from '../../index'; + +export interface Props extends Themeable { + height: number; + width: number; + + unit: string; + value: number; + pieType: string; + format: string; + stat: string; + strokeWidth: number; +} + +export class Piechart extends PureComponent { + canvasElement: any; + + static defaultProps = { + pieType: 'pie', + format: 'short', + valueName: 'current', + strokeWidth: 1, + theme: GrafanaThemeType.Dark, + }; + + componentDidMount() { + this.draw(); + } + + componentDidUpdate() { + this.draw(); + } + + draw() { + // const { width, height, theme, value } = this.props; + } + + render() { + const { height, width } = this.props; + + return ( +
+
(this.canvasElement = element)} + /> +
+ ); + } +} + +export default Piechart; diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts index 86ce9347dad..329cbbfc9ba 100644 --- a/packages/grafana-ui/src/components/index.ts +++ b/packages/grafana-ui/src/components/index.ts @@ -24,3 +24,4 @@ export { ValueMappingsEditor } from './ValueMappingsEditor/ValueMappingsEditor'; export { Gauge } from './Gauge/Gauge'; export { Switch } from './Switch/Switch'; export { EmptySearchResult } from './EmptySearchResult/EmptySearchResult'; +export { Piechart } from './Piechart/Piechart'; diff --git a/public/app/plugins/panel/piechart/PiechartPanel.tsx b/public/app/plugins/panel/piechart/PiechartPanel.tsx new file mode 100644 index 00000000000..c3c15b35598 --- /dev/null +++ b/public/app/plugins/panel/piechart/PiechartPanel.tsx @@ -0,0 +1,43 @@ +// Libraries +import React, { PureComponent } from 'react'; + +// Services & Utils +import { processTimeSeries, ThemeContext } from '@grafana/ui'; + +// Components +import { Piechart } from '@grafana/ui'; + +// Types +import { PiechartOptions } from './types'; +import { PanelProps, NullValueMode, TimeSeriesValue } from '@grafana/ui/src/types'; + +interface Props extends PanelProps {} + +export class PiechartPanel extends PureComponent { + render() { + const { panelData, width, height, options } = this.props; + + let value: TimeSeriesValue; + + if (panelData.timeSeries) { + const vmSeries = processTimeSeries({ + timeSeries: panelData.timeSeries, + nullValueMode: NullValueMode.Null, + }); + + if (vmSeries[0]) { + value = vmSeries[0].stats[options.stat]; + } else { + value = null; + } + } else if (panelData.tableData) { + value = panelData.tableData.rows[0].find(prop => prop > 0); + } + + return ( + + {theme => } + + ); + } +} diff --git a/public/app/plugins/panel/piechart/PiechartPanelOptions.tsx b/public/app/plugins/panel/piechart/PiechartPanelOptions.tsx new file mode 100644 index 00000000000..43d7c2ab23d --- /dev/null +++ b/public/app/plugins/panel/piechart/PiechartPanelOptions.tsx @@ -0,0 +1,30 @@ +import React, { PureComponent } from 'react'; +import { PanelOptionsProps, PanelOptionsGrid } from '@grafana/ui'; + +import ValueOptions from './ValueOptions'; +import { PiechartOptions } from './types'; + +export const defaultProps = { + options: { + pieType: 'pie', + unit: 'short', + stat: 'current', + strokeWidth: 1, + }, +}; + +export default class PiechartPanelOptions extends PureComponent> { + static defaultProps = defaultProps; + + render() { + const { onChange, options } = this.props; + + return ( + <> + + + + + ); + } +} diff --git a/public/app/plugins/panel/piechart/ValueOptions.tsx b/public/app/plugins/panel/piechart/ValueOptions.tsx new file mode 100644 index 00000000000..e83e4686d13 --- /dev/null +++ b/public/app/plugins/panel/piechart/ValueOptions.tsx @@ -0,0 +1,42 @@ +import React, { PureComponent } from 'react'; +import { FormLabel, PanelOptionsProps, PanelOptionsGroup, Select } from '@grafana/ui'; +import UnitPicker from 'app/core/components/Select/UnitPicker'; +import { PiechartOptions } from './types'; + +const statOptions = [ + { value: 'min', label: 'Min' }, + { value: 'max', label: 'Max' }, + { value: 'avg', label: 'Average' }, + { value: 'current', label: 'Current' }, + { value: 'total', label: 'Total' }, +]; + +const labelWidth = 6; + +export default class ValueOptions extends PureComponent> { + onUnitChange = unit => this.props.onChange({ ...this.props.options, unit: unit.value }); + + onStatChange = stat => this.props.onChange({ ...this.props.options, stat: stat.value }); + + render() { + const { stat, unit } = this.props.options; + + return ( + +
+ Stat + option.value === pieType)} + /> +
+
+ +
+ + ); + } +} diff --git a/public/app/plugins/panel/piechart/PiechartPanelEditor.tsx b/public/app/plugins/panel/piechart/PiechartPanelEditor.tsx index c221ab31cd4..72021da4890 100644 --- a/public/app/plugins/panel/piechart/PiechartPanelEditor.tsx +++ b/public/app/plugins/panel/piechart/PiechartPanelEditor.tsx @@ -2,6 +2,7 @@ import React, { PureComponent } from 'react'; import { PanelEditorProps, PanelOptionsGrid } from '@grafana/ui'; import PiechartValueEditor from './PiechartValueEditor'; +import { PiechartOptionsBox } from './PiechartOptionsBox'; import { PiechartOptions, PiechartValueOptions } from './types'; export default class PiechartPanelEditor extends PureComponent> { @@ -12,12 +13,13 @@ export default class PiechartPanelEditor extends PureComponent + ); diff --git a/public/app/plugins/panel/piechart/PiechartValueEditor.tsx b/public/app/plugins/panel/piechart/PiechartValueEditor.tsx index a2f02f554fe..614f0602bd8 100644 --- a/public/app/plugins/panel/piechart/PiechartValueEditor.tsx +++ b/public/app/plugins/panel/piechart/PiechartValueEditor.tsx @@ -37,7 +37,11 @@ export default class PiechartValueEditor extends PureComponent { return (
- Stat + Unit + +
+
+ Value option.value === pieType)} + value={pieChartOptions.find(option => option.value === pieType)} />
diff --git a/public/app/plugins/panel/piechart/PiechartPanel.tsx b/public/app/plugins/panel/piechart/PieChartPanel.tsx similarity index 81% rename from public/app/plugins/panel/piechart/PiechartPanel.tsx rename to public/app/plugins/panel/piechart/PieChartPanel.tsx index 355e0af944f..14e251ddffe 100644 --- a/public/app/plugins/panel/piechart/PiechartPanel.tsx +++ b/public/app/plugins/panel/piechart/PieChartPanel.tsx @@ -5,20 +5,20 @@ import React, { PureComponent } from 'react'; import { processTimeSeries, ThemeContext } from '@grafana/ui'; // Components -import { Piechart, PiechartDataPoint } from '@grafana/ui'; +import { PieChart, PieChartDataPoint } from '@grafana/ui'; // Types -import { PiechartOptions } from './types'; +import { PieChartOptions } from './types'; import { PanelProps, NullValueMode } from '@grafana/ui/src/types'; -interface Props extends PanelProps {} +interface Props extends PanelProps {} -export class PiechartPanel extends PureComponent { +export class PieChartPanel extends PureComponent { render() { const { panelData, width, height, options } = this.props; const { valueOptions } = options; - const datapoints: PiechartDataPoint[] = []; + const datapoints: PieChartDataPoint[] = []; if (panelData.timeSeries) { const vmSeries = processTimeSeries({ timeSeries: panelData.timeSeries, @@ -41,7 +41,7 @@ export class PiechartPanel extends PureComponent { return ( {theme => ( - > { + onValueOptionsChanged = (valueOptions: PieChartValueOptions) => + this.props.onOptionsChange({ + ...this.props.options, + valueOptions, + }); + + render() { + const { onOptionsChange, options } = this.props; + + return ( + <> + + + + + + ); + } +} diff --git a/public/app/plugins/panel/piechart/PiechartValueEditor.tsx b/public/app/plugins/panel/piechart/PieChartValueEditor.tsx similarity index 86% rename from public/app/plugins/panel/piechart/PiechartValueEditor.tsx rename to public/app/plugins/panel/piechart/PieChartValueEditor.tsx index 44b70b340a9..19d035d13f9 100644 --- a/public/app/plugins/panel/piechart/PiechartValueEditor.tsx +++ b/public/app/plugins/panel/piechart/PieChartValueEditor.tsx @@ -1,6 +1,6 @@ import React, { PureComponent } from 'react'; import { FormLabel, PanelOptionsGroup, Select, UnitPicker } from '@grafana/ui'; -import { PiechartValueOptions } from './types'; +import { PieChartValueOptions } from './types'; const statOptions = [ { value: 'min', label: 'Min' }, @@ -13,11 +13,11 @@ const statOptions = [ const labelWidth = 6; export interface Props { - options: PiechartValueOptions; - onChange: (valueOptions: PiechartValueOptions) => void; + options: PieChartValueOptions; + onChange: (valueOptions: PieChartValueOptions) => void; } -export default class PiechartValueEditor extends PureComponent { +export default class PieChartValueEditor extends PureComponent { onUnitChange = unit => this.props.onChange({ ...this.props.options, diff --git a/public/app/plugins/panel/piechart/PiechartPanelEditor.tsx b/public/app/plugins/panel/piechart/PiechartPanelEditor.tsx deleted file mode 100644 index c08dcb490e8..00000000000 --- a/public/app/plugins/panel/piechart/PiechartPanelEditor.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React, { PureComponent } from 'react'; -import { PanelEditorProps, PanelOptionsGrid } from '@grafana/ui'; - -import PiechartValueEditor from './PiechartValueEditor'; -import { PiechartOptionsBox } from './PiechartOptionsBox'; -import { PiechartOptions, PiechartValueOptions } from './types'; - -export default class PiechartPanelEditor extends PureComponent> { - onValueOptionsChanged = (valueOptions: PiechartValueOptions) => - this.props.onOptionsChange({ - ...this.props.options, - valueOptions, - }); - - render() { - const { onOptionsChange, options } = this.props; - - return ( - <> - - - - - - ); - } -} diff --git a/public/app/plugins/panel/piechart/module.tsx b/public/app/plugins/panel/piechart/module.tsx index 11737de9a08..3e0ef90dc6c 100644 --- a/public/app/plugins/panel/piechart/module.tsx +++ b/public/app/plugins/panel/piechart/module.tsx @@ -1,10 +1,10 @@ import { ReactPanelPlugin } from '@grafana/ui'; -import PiechartPanelEditor from './PiechartPanelEditor'; -import { PiechartPanel } from './PiechartPanel'; -import { PiechartOptions, defaults } from './types'; +import PieChartPanelEditor from './PieChartPanelEditor'; +import { PieChartPanel } from './PieChartPanel'; +import { PieChartOptions, defaults } from './types'; -export const reactPanel = new ReactPanelPlugin(PiechartPanel); +export const reactPanel = new ReactPanelPlugin(PieChartPanel); -reactPanel.setEditor(PiechartPanelEditor); +reactPanel.setEditor(PieChartPanelEditor); reactPanel.setDefaults(defaults); diff --git a/public/app/plugins/panel/piechart/types.ts b/public/app/plugins/panel/piechart/types.ts index 84e2377f8b5..5ec9bae516b 100644 --- a/public/app/plugins/panel/piechart/types.ts +++ b/public/app/plugins/panel/piechart/types.ts @@ -1,20 +1,20 @@ -import { PiechartType } from '@grafana/ui'; +import { PieChartType } from '@grafana/ui'; -export interface PiechartOptions { - pieType: PiechartType; +export interface PieChartOptions { + pieType: PieChartType; strokeWidth: number; - valueOptions: PiechartValueOptions; + valueOptions: PieChartValueOptions; // TODO: Options for Legend / Combine components } -export interface PiechartValueOptions { +export interface PieChartValueOptions { unit: string; stat: string; } -export const defaults: PiechartOptions = { - pieType: PiechartType.PIE, +export const defaults: PieChartOptions = { + pieType: PieChartType.PIE, strokeWidth: 1, valueOptions: { unit: 'short', From 7bc741c4e24e6884019c4f97ed3247692fc2d496 Mon Sep 17 00:00:00 2001 From: corpglory-dev Date: Fri, 8 Mar 2019 13:51:25 +0300 Subject: [PATCH 34/40] piechart -> pieChart --- public/app/features/plugins/built_in_plugins.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/app/features/plugins/built_in_plugins.ts b/public/app/features/plugins/built_in_plugins.ts index 3e5b52e1555..06f7b8bddc1 100644 --- a/public/app/features/plugins/built_in_plugins.ts +++ b/public/app/features/plugins/built_in_plugins.ts @@ -26,7 +26,7 @@ import * as tablePanel from 'app/plugins/panel/table/module'; import * as singlestatPanel from 'app/plugins/panel/singlestat/module'; import * as gettingStartedPanel from 'app/plugins/panel/gettingstarted/module'; import * as gaugePanel from 'app/plugins/panel/gauge/module'; -import * as piechartPanel from 'app/plugins/panel/piechart/module'; +import * as pieChartPanel from 'app/plugins/panel/piechart/module'; const builtInPlugins = { 'app/plugins/datasource/graphite/module': graphitePlugin, @@ -57,7 +57,7 @@ const builtInPlugins = { 'app/plugins/panel/singlestat/module': singlestatPanel, 'app/plugins/panel/gettingstarted/module': gettingStartedPanel, 'app/plugins/panel/gauge/module': gaugePanel, - 'app/plugins/panel/piechart/module': piechartPanel, + 'app/plugins/panel/piechart/module': pieChartPanel, }; export default builtInPlugins; From b8fcd3d9626df2a74da8868f1b032f42ec966072 Mon Sep 17 00:00:00 2001 From: corpglory-dev Date: Fri, 8 Mar 2019 15:17:04 +0300 Subject: [PATCH 35/40] Improve rendering --- .../src/components/PieChart/PieChart.tsx | 35 ++++++++-------- public/sass/components/_panel_piechart.scss | 41 +++++++++++-------- 2 files changed, 43 insertions(+), 33 deletions(-) diff --git a/packages/grafana-ui/src/components/PieChart/PieChart.tsx b/packages/grafana-ui/src/components/PieChart/PieChart.tsx index 4686063d186..fa8810335d8 100644 --- a/packages/grafana-ui/src/components/PieChart/PieChart.tsx +++ b/packages/grafana-ui/src/components/PieChart/PieChart.tsx @@ -27,6 +27,9 @@ export interface Props extends Themeable { export class PieChart extends PureComponent { containerElement: any; + svgElement: any; + tooltipElement: any; + tooltipValueElement: any; static defaultProps = { pieType: 'pie', @@ -58,12 +61,10 @@ export class PieChart extends PureComponent { const outerRadius = radius - radius / 10; const innerRadius = pieType === PieChartType.PIE ? 0 : radius - radius / 3; - select('.piechart-container svg').remove(); - const svg = select('.piechart-container') - .append('svg') + const svg = select(this.svgElement) + .html('') .attr('width', width) .attr('height', height) - .attr('class', 'shadow') .append('g') .attr('transform', `translate(${width / 2},${height / 2})`); @@ -85,20 +86,18 @@ export class PieChart extends PureComponent { .style('stroke', (d: any, idx: number) => colors[idx]) .style('stroke-width', `${strokeWidth}px`) .on('mouseover', (d: any, idx: any) => { - select('#tooltip') - .style('opacity', 1) - .select('#tooltip-value') - // TODO: show percents - .text(`${names[idx]} (${data[idx]})`); + select(this.tooltipElement).style('opacity', 1); + // TODO: show percents + select(this.tooltipValueElement).text(`${names[idx]} (${data[idx]})`); }) .on('mousemove', () => { - select('#tooltip') + select(this.tooltipElement) // TODO: right position .style('top', `${event.pageY}px`) .style('left', `${event.pageX}px`); }) .on('mouseout', () => { - select('#tooltip').style('opacity', 0); + select(this.tooltipElement).style('opacity', 0); }); } @@ -113,13 +112,17 @@ export class PieChart extends PureComponent { style={{ height: `${height * 0.9}px`, width: `${Math.min(width, height * 1.3)}px`, - top: '10px', - margin: 'auto', }} - /> -
+ > + (this.svgElement = element)} /> +
+
(this.tooltipElement = element)}>
-
+
(this.tooltipValueElement = element)} + />
diff --git a/public/sass/components/_panel_piechart.scss b/public/sass/components/_panel_piechart.scss index a762e7b6257..8f98f60658b 100644 --- a/public/sass/components/_panel_piechart.scss +++ b/public/sass/components/_panel_piechart.scss @@ -4,9 +4,14 @@ width: 100%; height: 100%; - svg { - width: 100%; - height: 100%; + .piechart-container { + top: 10px; + margin: auto; + + svg { + width: 100%; + height: 100%; + } } .piechart-tooltip { @@ -15,21 +20,23 @@ background-color: #141414; color: #d8d9da; opacity: 0; - } + position: absolute; + width: 300px; - .piechart-tooltip .piechart-tooltip-time { - text-align: center; - position: relative; - top: -3px; - padding: 0.2rem; - font-weight: bold; - color: #d8d9da; - } + .piechart-tooltip-time { + text-align: center; + position: relative; + top: -3px; + padding: 0.2rem; + font-weight: bold; + color: #d8d9da; - .piechart-tooltip .piechart-tooltip-value { - display: table-cell; - font-weight: bold; - padding-left: 15px; - text-align: right; + .piechart-tooltip-value { + display: table-cell; + font-weight: bold; + padding-left: 15px; + text-align: right; + } + } } } From a7bd8d503d8315632e57d2db64554e0803ca5c86 Mon Sep 17 00:00:00 2001 From: corpglory-dev Date: Fri, 8 Mar 2019 15:47:15 +0300 Subject: [PATCH 36/40] Simple storybook --- .../components/PieChart/PieChart.story.tsx | 42 +++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 packages/grafana-ui/src/components/PieChart/PieChart.story.tsx diff --git a/packages/grafana-ui/src/components/PieChart/PieChart.story.tsx b/packages/grafana-ui/src/components/PieChart/PieChart.story.tsx new file mode 100644 index 00000000000..4c31d7a0365 --- /dev/null +++ b/packages/grafana-ui/src/components/PieChart/PieChart.story.tsx @@ -0,0 +1,42 @@ +import { storiesOf } from '@storybook/react'; +import { number, text, object } from '@storybook/addon-knobs'; +import { PieChart, PieChartType } from './PieChart'; +import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; +import { renderComponentWithTheme } from '../../utils/storybook/withTheme'; + +const getKnobs = () => { + return { + datapoints: object('datapoints', [ + { + value: 100, + name: '100', + color: '#7EB26D', + }, + { + value: 200, + name: '200', + color: '#6ED0E0', + }, + ]), + pieType: text('pieType', PieChartType.PIE), + strokeWidth: number('strokeWidth', 1), + unit: text('unit', 'ms'), + }; +}; + +const PieChartStories = storiesOf('UI/PieChart/PieChart', module); + +PieChartStories.addDecorator(withCenteredStory); + +PieChartStories.add('Pie type: pie', () => { + const { datapoints, pieType, strokeWidth, unit } = getKnobs(); + + return renderComponentWithTheme(PieChart, { + width: 200, + height: 400, + datapoints, + pieType, + strokeWidth, + unit, + }); +}); From 2bd64d2c31d7ab0e1cc240502771fbf89d85653e Mon Sep 17 00:00:00 2001 From: corpglory-dev Date: Wed, 13 Mar 2019 19:44:18 +0300 Subject: [PATCH 37/40] Improve tooltip look --- public/sass/components/_panel_piechart.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/public/sass/components/_panel_piechart.scss b/public/sass/components/_panel_piechart.scss index 8f98f60658b..f9041d5de51 100644 --- a/public/sass/components/_panel_piechart.scss +++ b/public/sass/components/_panel_piechart.scss @@ -21,12 +21,10 @@ color: #d8d9da; opacity: 0; position: absolute; - width: 300px; .piechart-tooltip-time { text-align: center; position: relative; - top: -3px; padding: 0.2rem; font-weight: bold; color: #d8d9da; @@ -34,7 +32,7 @@ .piechart-tooltip-value { display: table-cell; font-weight: bold; - padding-left: 15px; + padding: 15px; text-align: right; } } From d36b07bd68dde8774eb1a1189f7ecbdb2edb774f Mon Sep 17 00:00:00 2001 From: corpglory-dev Date: Thu, 14 Mar 2019 18:09:24 +0300 Subject: [PATCH 38/40] Add "No data points" message --- .../src/components/PieChart/PieChart.tsx | 58 ++++++++++++------- 1 file changed, 36 insertions(+), 22 deletions(-) diff --git a/packages/grafana-ui/src/components/PieChart/PieChart.tsx b/packages/grafana-ui/src/components/PieChart/PieChart.tsx index fa8810335d8..ee1cf28021e 100644 --- a/packages/grafana-ui/src/components/PieChart/PieChart.tsx +++ b/packages/grafana-ui/src/components/PieChart/PieChart.tsx @@ -50,6 +50,10 @@ export class PieChart extends PureComponent { draw() { const { datapoints, pieType, strokeWidth } = this.props; + if (datapoints.length === 0) { + return; + } + const data = datapoints.map(datapoint => datapoint.value); const names = datapoints.map(datapoint => datapoint.name); const colors = datapoints.map(datapoint => datapoint.color); @@ -102,31 +106,41 @@ export class PieChart extends PureComponent { } render() { - const { height, width } = this.props; + const { height, width, datapoints } = this.props; - return ( -
-
(this.containerElement = element)} - className="piechart-container" - style={{ - height: `${height * 0.9}px`, - width: `${Math.min(width, height * 1.3)}px`, - }} - > - (this.svgElement = element)} /> -
-
(this.tooltipElement = element)}> -
-
(this.tooltipValueElement = element)} - /> + if (datapoints.length > 0) { + return ( +
+
(this.containerElement = element)} + className="piechart-container" + style={{ + height: `${height * 0.9}px`, + width: `${Math.min(width, height * 1.3)}px`, + }} + > + (this.svgElement = element)} /> +
+
(this.tooltipElement = element)}> +
+
(this.tooltipValueElement = element)} + /> +
-
- ); + ); + } else { + return ( +
+
+ No data points +
+
+ ); + } } } From 4ba5217a087ff710486a2ed00d136fd4fd0a4d67 Mon Sep 17 00:00:00 2001 From: corpglory-dev Date: Thu, 14 Mar 2019 18:18:40 +0300 Subject: [PATCH 39/40] Right tooltip position --- packages/grafana-ui/src/components/PieChart/PieChart.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/grafana-ui/src/components/PieChart/PieChart.tsx b/packages/grafana-ui/src/components/PieChart/PieChart.tsx index ee1cf28021e..1fc86b60956 100644 --- a/packages/grafana-ui/src/components/PieChart/PieChart.tsx +++ b/packages/grafana-ui/src/components/PieChart/PieChart.tsx @@ -96,8 +96,7 @@ export class PieChart extends PureComponent { }) .on('mousemove', () => { select(this.tooltipElement) - // TODO: right position - .style('top', `${event.pageY}px`) + .style('top', `${event.pageY - height / 2}px`) .style('left', `${event.pageX}px`); }) .on('mouseout', () => { From dbec66b3d63b4b5b6b1c8fde68472c4f78f34bdb Mon Sep 17 00:00:00 2001 From: corpglory-dev Date: Thu, 14 Mar 2019 18:40:44 +0300 Subject: [PATCH 40/40] Tooltip: show percent instead of value --- packages/grafana-ui/src/components/PieChart/PieChart.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/grafana-ui/src/components/PieChart/PieChart.tsx b/packages/grafana-ui/src/components/PieChart/PieChart.tsx index 1fc86b60956..68b6ed11c72 100644 --- a/packages/grafana-ui/src/components/PieChart/PieChart.tsx +++ b/packages/grafana-ui/src/components/PieChart/PieChart.tsx @@ -1,5 +1,6 @@ import React, { PureComponent } from 'react'; import { select, pie, arc, event } from 'd3'; +import { sum } from 'lodash'; import { GrafanaThemeType } from '../../types'; import { Themeable } from '../../index'; @@ -58,6 +59,9 @@ export class PieChart extends PureComponent { const names = datapoints.map(datapoint => datapoint.name); const colors = datapoints.map(datapoint => datapoint.color); + const total = sum(data) || 1; + const percents = data.map((item: number) => (item / total) * 100); + const width = this.containerElement.offsetWidth; const height = this.containerElement.offsetHeight; const radius = Math.min(width, height) / 2; @@ -91,8 +95,7 @@ export class PieChart extends PureComponent { .style('stroke-width', `${strokeWidth}px`) .on('mouseover', (d: any, idx: any) => { select(this.tooltipElement).style('opacity', 1); - // TODO: show percents - select(this.tooltipValueElement).text(`${names[idx]} (${data[idx]})`); + select(this.tooltipValueElement).text(`${names[idx]} (${percents[idx].toFixed(2)}%)`); }) .on('mousemove', () => { select(this.tooltipElement)