From a7bd8d503d8315632e57d2db64554e0803ca5c86 Mon Sep 17 00:00:00 2001
From: corpglory-dev <dev@corpglory.com>
Date: Fri, 8 Mar 2019 15:47:15 +0300
Subject: [PATCH] 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,
+  });
+});