From 810b5ac467bbdaf549057e769d3c6592edd256e2 Mon Sep 17 00:00:00 2001
From: VeraZab <vera.zabeida@gmail.com>
Date: Mon, 5 Mar 2018 16:04:36 -0500
Subject: [PATCH] Add table trace

---
 dev/App.js                             |  9 ++++--
 src/components/fields/DataSelector.js  | 27 ++++++++++++++++--
 src/components/fields/derived.js       |  4 +++
 src/default_panels/GraphCreatePanel.js | 19 +++++++++++++
 src/default_panels/StyleTracesPanel.js | 38 ++++++++++++++++++++++++++
 src/lib/traceTypes.js                  | 20 +++++++-------
 6 files changed, 102 insertions(+), 15 deletions(-)

diff --git a/dev/App.js b/dev/App.js
index 91e8123b7..b953829be 100644
--- a/dev/App.js
+++ b/dev/App.js
@@ -10,9 +10,12 @@ import Nav from './Nav';
 import ACCESS_TOKENS from '../accessTokens';
 
 const dataSources = {
-  col1: [1, 2, 3], // eslint-disable-line no-magic-numbers
-  col2: [4, 3, 2], // eslint-disable-line no-magic-numbers
-  col3: [17, 13, 9], // eslint-disable-line no-magic-numbers
+  col1: ['Jan', 'Feb', 'Mar'], // eslint-disable-line no-magic-numbers
+  col2: [1, 2, 3],
+  col3: [4, 3, 2], // eslint-disable-line no-magic-numbers
+  col4: [17, 13, 9], // eslint-disable-line no-magic-numbers
+  col5: ['blue'],
+  col6: ['yellow', 'green', 'yellow'],
 };
 const dataSourceOptions = Object.keys(dataSources).map(name => ({
   value: name,
diff --git a/src/components/fields/DataSelector.js b/src/components/fields/DataSelector.js
index 6ff1d8778..af569f532 100644
--- a/src/components/fields/DataSelector.js
+++ b/src/components/fields/DataSelector.js
@@ -38,8 +38,9 @@ export class UnconnectedDataSelector extends Component {
     }
 
     this.is2D =
-      props.attr === 'z' &&
-      ['contour', 'heatmap', 'surface'].includes(props.container.type);
+      (props.attr === 'z' &&
+        ['contour', 'heatmap', 'surface'].includes(props.container.type)) ||
+      (props.container.type === 'table' && props.attr !== 'columnorder');
   }
 
   updatePlot(value) {
@@ -52,6 +53,28 @@ export class UnconnectedDataSelector extends Component {
       update[this.props.attr] = value
         .filter(v => Array.isArray(this.dataSources[v]))
         .map(v => this.dataSources[v]);
+
+      // Table traces have many configuration options,
+      // The below attributes can be 2d or 1d and will affect the plot differently
+      // EX:
+      // header.values = ['Jan', 'Feb', 'Mar'] => will put data in a row
+      // header.values = [['Jan', 1], ['Feb', 2], ['Mar', 3]] => will create 3 columns
+      // 1d arrays affect columns
+      // 2d arrays affect rows within each column
+
+      if (
+        this.props.container.type === 'table' &&
+        value.length === 1 &&
+        [
+          'header.values',
+          'header.font.color',
+          'header.font.size',
+          'header.fill.color',
+          'columnwidth',
+        ].includes(this.props.attr)
+      ) {
+        update[this.props.attr] = update[this.props.attr][0];
+      }
       update[this.srcAttr] = value;
     } else {
       update[this.srcAttr] = value;
diff --git a/src/components/fields/derived.js b/src/components/fields/derived.js
index f6f7a0a58..910e7ef21 100644
--- a/src/components/fields/derived.js
+++ b/src/components/fields/derived.js
@@ -529,6 +529,10 @@ export const HoverInfo = connectToContainer(UnconnectedFlaglist, {
       ];
     }
 
+    if (context.container.type === 'table') {
+      plotProps.isVisible = false;
+    }
+
     plotProps.options = options;
   },
 });
diff --git a/src/default_panels/GraphCreatePanel.js b/src/default_panels/GraphCreatePanel.js
index f332b1bb4..cf6f1f137 100644
--- a/src/default_panels/GraphCreatePanel.js
+++ b/src/default_panels/GraphCreatePanel.js
@@ -62,6 +62,8 @@ const GraphCreatePanel = ({localize: _}) => {
         <DataSelector label={_('A')} attr="a" />
         <DataSelector label={_('B')} attr="b" />
         <DataSelector label={_('C')} attr="c" />
+        <DataSelector label={_('Headers')} attr="header.values" />
+        <DataSelector label={_('Columns')} attr="cells.values" />
       </Section>
 
       <Section name={_('Axes to Use')}>
@@ -80,6 +82,23 @@ const GraphCreatePanel = ({localize: _}) => {
         <ErrorBars localize={_} attr="error_z" />
       </Section>
 
+      <Section name={_('Header Options')}>
+        <DataSelector label={_('Fill Color')} attr="header.fill.color" />
+        <DataSelector label={_('Font Color')} attr="header.font.color" />
+        <DataSelector label={_('Font Size')} attr="header.font.size" />
+      </Section>
+
+      <Section name={_('Cell Options')}>
+        <DataSelector label={_('Fill Color')} attr="cells.fill.color" />
+        <DataSelector label={_('Font Color')} attr="cells.font.color" />
+        <DataSelector label={_('Font Size')} attr="cells.font.size" />
+      </Section>
+
+      <Section name={_('Column Options')}>
+        <DataSelector label={_('Width')} attr="columnwidth" />
+        <DataSelector label={_('Order')} attr="columnorder" />
+      </Section>
+
       <Section name={_('Options')}>
         <DataSelector label={_('Intensity')} attr="intensity" />
         <DataSelector label={_('Facecolor')} attr="facecolor" />
diff --git a/src/default_panels/StyleTracesPanel.js b/src/default_panels/StyleTracesPanel.js
index 181df8212..1cc57e61c 100644
--- a/src/default_panels/StyleTracesPanel.js
+++ b/src/default_panels/StyleTracesPanel.js
@@ -55,6 +55,44 @@ const StyleTracesPanel = ({localize: _}) => (
       />
     </Section>
 
+    <Section name={_('Header')}>
+      <Numeric label={_('Height')} attr="header.height" />
+      <ColorPicker label={_('Fill Color')} attr="header.fill.color" />
+      <FontSelector label={_('Typeface')} attr="header.font.family" />
+      <Numeric label={_('Font Size')} attr="header.font.size" />
+      <Dropdown
+        label={_('Text Alignment')}
+        options={[
+          {label: _('Left'), value: 'left'},
+          {label: _('Center'), value: 'center'},
+          {label: _('Right'), value: 'right'},
+        ]}
+        attr="header.align"
+      />
+      <ColorPicker label={_('Font Color')} attr="header.font.color" />
+      <Numeric label={_('Border Width')} attr="header.line.width" />
+      <ColorPicker label={_('Border Color')} attr="header.line.color" />
+    </Section>
+
+    <Section name={_('Cells')}>
+      <Numeric label={_('Height')} attr="cells.height" />
+      <ColorPicker label={_('Fill Color')} attr="cells.fill.color" />
+      <FontSelector label={_('Typeface')} attr="cells.font.family" />
+      <Numeric label={_('Font Size')} attr="cells.font.size" />
+      <Dropdown
+        label={_('Text Alignment')}
+        options={[
+          {label: _('Left'), value: 'left'},
+          {label: _('Center'), value: 'center'},
+          {label: _('Right'), value: 'right'},
+        ]}
+        attr="cells.align"
+      />
+      <ColorPicker label={_('Font Color')} attr="cells.font.color" />
+      <Numeric label={_('Border Width')} attr="cells.line.width" />
+      <ColorPicker label={_('Border Color')} attr="cells.line.color" />
+    </Section>
+
     <Section name={_('Display')}>
       <Flaglist
         attr="mode"
diff --git a/src/lib/traceTypes.js b/src/lib/traceTypes.js
index 2d3a25c8e..1a30c5885 100644
--- a/src/lib/traceTypes.js
+++ b/src/lib/traceTypes.js
@@ -61,21 +61,21 @@ export const traceTypes = _ => [
     label: _('Line'),
     category: chartCategory(_).SIMPLE,
   },
-  // {
-  //   value: 'area',
-  //   label: _('Area'),
-  //   category: chartCategory(_).SIMPLE,
-  // },
+  {
+    value: 'area',
+    label: _('Area'),
+    category: chartCategory(_).SIMPLE,
+  },
   {
     value: 'heatmap',
     label: _('Heatmap'),
     category: chartCategory(_).SIMPLE,
   },
-  // {
-  //   value: 'table',
-  //   label: _('Table'),
-  //   category: chartCategory(_).SIMPLE,
-  // },
+  {
+    value: 'table',
+    label: _('Table'),
+    category: chartCategory(_).SIMPLE,
+  },
   {
     value: 'contour',
     label: _('Contour'),