From 8b4eefa768a1ab5d9a5948fba971835b6e45aa0e Mon Sep 17 00:00:00 2001 From: corpglory-dev Date: Fri, 15 Feb 2019 20:43:51 +0300 Subject: [PATCH 01/41] 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/41] 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/41] 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/41] 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/41] 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/41] 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; - - return ( -
-
(this.containerElement = element)} - className="piechart-container" - style={{ - height: `${height * 0.9}px`, - width: `${Math.min(width, height * 1.3)}px`, - }} - > - (this.svgElement = element)} /> + const { height, width, datapoints } = this.props; + + 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)} + /> +
+
-
(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/41] 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/41] 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) From e4e553b5a2713d2451c5edf6fa333dde0548a09d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 20 Mar 2019 19:14:10 +0100 Subject: [PATCH 41/41] Merge with master, and updated logo and name --- .../src/components/PieChart/PieChart.tsx | 2 -- .../plugins/panel/piechart/PieChartPanel.tsx | 6 ++-- .../panel/piechart/img/icon_piechart.svg | 29 ++++++++++++++++++ .../piechart/img/piechart_logo_large.png | Bin 3723 -> 0 bytes .../piechart/img/piechart_logo_small.png | Bin 2629 -> 0 bytes public/app/plugins/panel/piechart/plugin.json | 6 ++-- public/app/plugins/panel/piechart/types.ts | 2 -- 7 files changed, 35 insertions(+), 10 deletions(-) create mode 100644 public/app/plugins/panel/piechart/img/icon_piechart.svg delete mode 100644 public/app/plugins/panel/piechart/img/piechart_logo_large.png delete mode 100644 public/app/plugins/panel/piechart/img/piechart_logo_small.png diff --git a/packages/grafana-ui/src/components/PieChart/PieChart.tsx b/packages/grafana-ui/src/components/PieChart/PieChart.tsx index 68b6ed11c72..3310a967264 100644 --- a/packages/grafana-ui/src/components/PieChart/PieChart.tsx +++ b/packages/grafana-ui/src/components/PieChart/PieChart.tsx @@ -145,5 +145,3 @@ export class PieChart extends PureComponent { } } } - -export default PieChart; diff --git a/public/app/plugins/panel/piechart/PieChartPanel.tsx b/public/app/plugins/panel/piechart/PieChartPanel.tsx index 14e251ddffe..5082b162f96 100644 --- a/public/app/plugins/panel/piechart/PieChartPanel.tsx +++ b/public/app/plugins/panel/piechart/PieChartPanel.tsx @@ -15,13 +15,13 @@ interface Props extends PanelProps {} export class PieChartPanel extends PureComponent { render() { - const { panelData, width, height, options } = this.props; + const { data, width, height, options } = this.props; const { valueOptions } = options; const datapoints: PieChartDataPoint[] = []; - if (panelData.timeSeries) { + if (data) { const vmSeries = processTimeSeries({ - timeSeries: panelData.timeSeries, + data, nullValueMode: NullValueMode.Null, }); diff --git a/public/app/plugins/panel/piechart/img/icon_piechart.svg b/public/app/plugins/panel/piechart/img/icon_piechart.svg new file mode 100644 index 00000000000..49da58abec6 --- /dev/null +++ b/public/app/plugins/panel/piechart/img/icon_piechart.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/app/plugins/panel/piechart/img/piechart_logo_large.png b/public/app/plugins/panel/piechart/img/piechart_logo_large.png deleted file mode 100644 index 21b7ab40145bdd8dd7fc08bfb4612a1c37d8bf5a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3723 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 diff --git a/public/app/plugins/panel/piechart/plugin.json b/public/app/plugins/panel/piechart/plugin.json index 56299e4aa52..cf9ac759653 100644 --- a/public/app/plugins/panel/piechart/plugin.json +++ b/public/app/plugins/panel/piechart/plugin.json @@ -1,6 +1,6 @@ { "type": "panel", - "name": "PieChart", + "name": "PieChart v2", "id": "piechart", "state": "alpha", @@ -12,8 +12,8 @@ "url": "https://grafana.com" }, "logos": { - "small": "img/piechart_logo_small.png", - "large": "img/piechart_logo_large.png" + "small": "img/icon_piechart.svg", + "large": "img/icon_piechart.svg" } } } diff --git a/public/app/plugins/panel/piechart/types.ts b/public/app/plugins/panel/piechart/types.ts index 5ec9bae516b..45682f31d5e 100644 --- a/public/app/plugins/panel/piechart/types.ts +++ b/public/app/plugins/panel/piechart/types.ts @@ -3,9 +3,7 @@ import { PieChartType } from '@grafana/ui'; export interface PieChartOptions { pieType: PieChartType; strokeWidth: number; - valueOptions: PieChartValueOptions; - // TODO: Options for Legend / Combine components } export interface PieChartValueOptions {