From 41d8247f3e56ecf84e5627e54b862b883c0c1e29 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Wed, 2 Sep 2020 14:33:00 +0100
Subject: [PATCH 1/3] Improving chart markdown plugin

---
 .../markdown_editor_with_plugins.js           | 114 ++++++++++--------
 1 file changed, 63 insertions(+), 51 deletions(-)

diff --git a/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js b/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js
index 37499b9728a..11d304c91ad 100644
--- a/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js
+++ b/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js
@@ -26,13 +26,14 @@ import {
   EuiButtonEmpty,
   EuiForm,
   EuiFormRow,
-  EuiSelect,
+  EuiColorPalettePicker,
   EuiRange,
   EuiText,
+  EuiFlexGroup,
+  EuiFlexItem,
 } from '../../../../src/components';
 
 import {
-  euiPaletteColorBlind,
   euiPaletteComplimentary,
   euiPaletteCool,
   euiPaletteForStatus,
@@ -44,7 +45,6 @@ import {
 } from '../../../../src/services/color';
 
 const paletteData = {
-  euiPaletteColorBlind,
   euiPaletteForStatus,
   euiPaletteForTemperature,
   euiPaletteComplimentary,
@@ -58,13 +58,13 @@ const paletteData = {
 const paletteNames = Object.keys(paletteData);
 
 const dg = new DataGenerator();
-const data = dg.generateGroupedSeries(20, 5);
+const generateData = categories => dg.generateGroupedSeries(10, categories);
 
 const chartDemoPlugin = {
   name: 'chartDemoPlugin',
   button: {
     label: 'Chart',
-    iconType: 'visArea',
+    iconType: 'visBarVerticalStacked',
   },
   helpText: (
     <div>
@@ -76,64 +76,74 @@ const chartDemoPlugin = {
         <p>Where options can contain:</p>
         <ul>
           <li>
-            <strong>palette: </strong>A number between 1-9 for each palette.
+            <strong>palette: </strong>A number between 1-8 for each palette.
           </li>
           <li>
-            <strong>height: </strong>
-            The height of the chart
+            <strong>categories: </strong>
+            The number o categories per column
           </li>
         </ul>
       </EuiText>
     </div>
   ),
   editor: function ChartEditor({ node, onSave, onCancel }) {
-    const [palette, setPalette] = useState((node && node.palette) || 4);
-    const [height, setHeight] = useState((node && node.height) || 300);
+    const [palette, setPalette] = useState((node && node.palette) || '1');
+    const [categories, setCategories] = useState(5);
+
+    const onChange = e => {
+      setCategories(parseInt(e.target.value));
+    };
+
+    const palettes = paletteNames.map((paletteName, index) => {
+      return {
+        value: String(index + 1),
+        title: paletteName,
+        palette: paletteData[paletteNames[index]](categories),
+        type: 'fixed',
+      };
+    });
 
     return (
       <>
         <EuiModalHeader>
-          <EuiModalHeaderTitle>Chart data</EuiModalHeaderTitle>
+          <EuiModalHeaderTitle>Add chart</EuiModalHeaderTitle>
         </EuiModalHeader>
 
         <EuiModalBody>
           <>
             <EuiForm>
-              <EuiFormRow label="Palette">
-                <EuiSelect
-                  options={[
-                    { value: 4, text: 'red' },
-                    { value: 5, text: 'green' },
-                  ]}
-                  value={palette}
-                  onChange={e =>
-                    setPalette(parseInt(e.currentTarget.value, 10))
-                  }
-                />
-              </EuiFormRow>
-
-              <EuiFormRow label="Height">
-                <EuiRange
-                  value={height}
-                  min={100}
-                  max={500}
-                  step={10}
-                  showValue
-                  valueAppend="px"
-                  onChange={e => setHeight(parseInt(e.currentTarget.value, 10))}
-                />
-              </EuiFormRow>
+              <EuiFlexGroup gutterSize="s" style={{ width: 600 }}>
+                <EuiFlexItem>
+                  <EuiFormRow label="Palette">
+                    <EuiColorPalettePicker
+                      palettes={palettes}
+                      onChange={setPalette}
+                      value={palette}
+                      compressed
+                    />
+                  </EuiFormRow>
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <EuiFormRow label="Categories">
+                    <EuiRange
+                      style={{
+                        border: '8px solid #fbfcfd',
+                        background: '#fbfcfd',
+                        borderRadius: '2px',
+                      }}
+                      value={categories}
+                      onChange={onChange}
+                      min={1}
+                      max={10}
+                      compressed
+                      showValue
+                    />
+                  </EuiFormRow>
+                </EuiFlexItem>
+              </EuiFlexGroup>
             </EuiForm>
-            <div
-              style={{
-                width: 600,
-                maxWidth: '100%',
-                height: 500,
-                alignItems: 'center',
-                display: 'flex',
-              }}>
-              <ChartMarkdownRenderer palette={palette} height={height} />
-            </div>
+            <EuiSpacer />
+            <ChartMarkdownRenderer palette={palette} categories={categories} />
           </>
         </EuiModalBody>
 
@@ -142,7 +152,7 @@ const chartDemoPlugin = {
 
           <EuiButton
             onClick={() =>
-              onSave(`!{chart${JSON.stringify({ palette, height })}}`, {
+              onSave(`!{chart${JSON.stringify({ palette, categories })}}`, {
                 block: true,
               })
             }
@@ -211,6 +221,7 @@ function ChartMarkdownParser() {
     }
 
     match += '}';
+
     return eat(match)({
       type: 'chartDemoPlugin',
       ...configuration,
@@ -221,14 +232,15 @@ function ChartMarkdownParser() {
   methods.splice(methods.indexOf('text'), 0, 'chart');
 }
 
-const ChartMarkdownRenderer = ({ height = 200, palette = 5 }) => {
+// receives the configuration from the parser and renders
+const ChartMarkdownRenderer = ({ palette, categories }) => {
   const customColors = {
     colors: {
-      vizColors: paletteData[paletteNames[palette]](5),
+      vizColors: paletteData[paletteNames[palette - 1]](categories),
     },
   };
   return (
-    <Chart size={{ height }}>
+    <Chart size={{ height: 320 }}>
       <Settings
         theme={[customColors, EUI_CHARTS_THEME_LIGHT]}
         showLegend={false}
@@ -237,7 +249,7 @@ const ChartMarkdownRenderer = ({ height = 200, palette = 5 }) => {
       <BarSeries
         id="status"
         name="Status"
-        data={data}
+        data={generateData(categories)}
         xAccessor={'x'}
         yAccessors={['y']}
         splitSeriesAccessors={['g']}
@@ -261,7 +273,7 @@ Notice the toolbar above has a new chart button. Click it to add a chart.
 
 Once you finish it'll add some syntax that looks like the below.
 
-!{chart{"palette":4,"height":300}}
+!{chart{"palette":2,"categories":5}}
 `;
 
 export default () => {

From 8555dc79f1b5bf6440708e93358e390f6ad33f0e Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Wed, 2 Sep 2020 14:38:11 +0100
Subject: [PATCH 2/3] Styles

---
 .../views/markdown_editor/markdown_editor_with_plugins.js  | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js b/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js
index 11d304c91ad..2e07e43b7d5 100644
--- a/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js
+++ b/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js
@@ -112,7 +112,7 @@ const chartDemoPlugin = {
         <EuiModalBody>
           <>
             <EuiForm>
-              <EuiFlexGroup gutterSize="s" style={{ width: 600 }}>
+              <EuiFlexGroup gutterSize="m" style={{ width: 600 }}>
                 <EuiFlexItem>
                   <EuiFormRow label="Palette">
                     <EuiColorPalettePicker
@@ -126,11 +126,6 @@ const chartDemoPlugin = {
                 <EuiFlexItem>
                   <EuiFormRow label="Categories">
                     <EuiRange
-                      style={{
-                        border: '8px solid #fbfcfd',
-                        background: '#fbfcfd',
-                        borderRadius: '2px',
-                      }}
                       value={categories}
                       onChange={onChange}
                       min={1}

From 1f16c938434a675544606ceee01722c2383c3ee0 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Fri, 4 Sep 2020 11:22:08 +0100
Subject: [PATCH 3/3] minor changes

---
 .../src/views/markdown_editor/markdown_editor_with_plugins.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js b/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js
index 2e07e43b7d5..8418391dbcc 100644
--- a/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js
+++ b/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js
@@ -80,7 +80,7 @@ const chartDemoPlugin = {
           </li>
           <li>
             <strong>categories: </strong>
-            The number o categories per column
+            The number of categories per column
           </li>
         </ul>
       </EuiText>
@@ -268,7 +268,7 @@ Notice the toolbar above has a new chart button. Click it to add a chart.
 
 Once you finish it'll add some syntax that looks like the below.
 
-!{chart{"palette":2,"categories":5}}
+!{chart{"palette":"2","categories":5}}
 `;
 
 export default () => {