Merge pull request #308 from plotly/3d

3d

Author: VeraZab

src/components/fields/TraceSelector.js

@@ -31,14 +31,13 @@ function computeTraceOptionsFromSchema(schema, _, context) {
     {value: 'violin', label: _('Violin')},
     {value: 'scatter3d', label: _('3D Scatter')},
     {value: 'surface', label: _('Surface')},
-    {value: 'mesh3d', label: _('Mesh3d')},
+    {value: 'mesh3d', label: _('3D Mesh')},
     {value: 'scattergeo', label: _('Atlas Map')},
     {value: 'choropleth', label: _('Choropleth')},
     {value: 'scattergl', label: _('Scatter GL')},
     {value: 'pointcloud', label: _('Point Cloud')},
     {value: 'heatmapgl', label: _('Heatmap GL')},
     {value: 'parcoords', label: _('Parallel Coordinates')},
-
     {value: 'sankey', label: _('Sankey')},
     {value: 'table', label: _('Table')},
     {value: 'carpet', label: _('Carpet')},
@@ -49,15 +48,22 @@ function computeTraceOptionsFromSchema(schema, _, context) {
     {value: 'scatterpolar', label: _('Polar Scatter')},
   ].filter(obj => traceTypes.indexOf(obj.value) !== -1);
 
-  const i = traceOptions.findIndex(opt => opt.value === 'scatter');
+  const traceIndex = traceType =>
+    traceOptions.findIndex(opt => opt.value === traceType);
+
   traceOptions.splice(
-    i + 1,
+    traceIndex('scatter') + 1,
     0,
     {label: _('Line'), value: 'line'},
     {label: _('Area'), value: 'area'},
     {label: _('Timeseries'), value: 'timeseries'}
   );
 
+  traceOptions.splice(traceIndex('scatter3d') + 1, 0, {
+    label: _('3D Line'),
+    value: 'line3d',
+  });
+
   if (context.config && context.config.mapboxAccessToken) {
     traceOptions.push({value: 'scattermapbox', label: _('Satellite Map')});
   }

src/default_panels/GraphCreatePanel.js

@@ -29,6 +29,9 @@ const GraphCreatePanel = ({localize: _}) => {
         <DataSelector label={_('X')} attr="x" />
         <DataSelector label={_('Y')} attr="y" />
         <DataSelector label={{choropleth: _('Values'), '*': _('Z')}} attr="z" />
+        <DataSelector label={_('I (Optional)')} attr="i" />
+        <DataSelector label={_('J (Optional)')} attr="j" />
+        <DataSelector label={_('K (Optional)')} attr="k" />
         <DataSelector label={_('Open')} attr="open" />
         <DataSelector label={_('High')} attr="high" />
         <DataSelector label={_('Low')} attr="low" />
@@ -39,6 +42,9 @@ const GraphCreatePanel = ({localize: _}) => {
       </Section>
 
       <Section name={_('Options')}>
+        <DataSelector label={_('Intensity')} attr="intensity" />
+        <DataSelector label={_('Facecolor')} attr="facecolor" />
+        <DataSelector label={_('Vertexcolor')} attr="vertexcolor" />
         <Dropdown
           label={_('Location Format')}
           attr="locationmode"

src/default_panels/StyleTracesPanel.js

@@ -28,6 +28,7 @@ import {localize} from '../lib';
 const StyleTracesPanel = ({localize: _}) => (
   <TraceAccordion>
     <Section name={_('Trace')} attr="name">
+      <TextEditor label={_('Name')} attr="name" richTextOnly />
       <TraceOrientation
         label={_('Orientation')}
         attr="orientation"
@@ -38,16 +39,17 @@ const StyleTracesPanel = ({localize: _}) => (
       />
 
       <Numeric label={_('Opacity')} step={0.1} attr="opacity" />
+      <ColorPicker label={_('Color')} attr="color" />
     </Section>
 
     <Section name={_('Text Attributes')}>
       <Flaglist
         attr="textinfo"
         options={[
-          {label: 'Label', value: 'label'},
-          {label: 'Text', value: 'text'},
-          {label: 'Value', value: 'value'},
-          {label: '%', value: 'percent'},
+          {label: _('Label'), value: 'label'},
+          {label: _('Text'), value: 'text'},
+          {label: _('Value'), value: 'value'},
+          {label: _('%'), value: 'percent'},
         ]}
       />
     </Section>
@@ -56,8 +58,17 @@ const StyleTracesPanel = ({localize: _}) => (
       <Flaglist
         attr="mode"
         options={[
-          {label: 'Lines', value: 'lines'},
-          {label: 'Points', value: 'markers'},
+          {label: _('Lines'), value: 'lines'},
+          {label: _('Points'), value: 'markers'},
+          {label: _('Text'), value: 'text'},
+        ]}
+      />
+      <Radio
+        attr="flatshading"
+        label={_('flatshading')}
+        options={[
+          {label: _('Enable'), value: true},
+          {label: _('Disable'), value: false},
         ]}
       />
     </Section>
@@ -125,9 +136,17 @@ const StyleTracesPanel = ({localize: _}) => (
       />
     </TraceTypeSection>
 
+    <TraceTypeSection name={_('Lines')} traceTypes={['scatter3d']}>
+      <Numeric label={_('Width')} attr="line.width" />
+      <ColorPicker label={_('Line Color')} attr="line.color" />
+      <LineDashSelector label={_('Type')} attr="line.dash" />
+      <LineShapeSelector label={_('Shape')} attr="line.shape" />
+    </TraceTypeSection>
+
     <Section name={_('Colorscale')}>
       <ColorscalePicker label={_('Colorscale')} attr="colorscale" />
       <Radio
+        label={_('Orientation')}
         attr="reversescale"
         options={[
           {label: _('Normal'), value: false},
@@ -236,6 +255,18 @@ const StyleTracesPanel = ({localize: _}) => (
         units="%"
         step={0.1}
       />
+      <Numeric
+        label={_('Vertex Normal')}
+        attr="lighting.vertexnormalsepsilon"
+        units="%"
+        step={0.1}
+      />
+      <Numeric
+        label={_('Face Normal')}
+        attr="lighting.facenormalsepsilon"
+        units="%"
+        step={0.1}
+      />
     </Section>
 
     <Section name={_('Light Position')}>
@@ -295,12 +326,22 @@ const StyleTracesPanel = ({localize: _}) => (
       />
     </Section>
 
-    <Section name={_('Values Shown On Hover')}>
+    <Section name={_('On Hover')}>
       <HoverInfo
         attr="hoverinfo"
         label={_('Values Shown On Hover')}
         localize={_}
       />
+      <Radio
+        label={_('Show contour')}
+        attr="contour.show"
+        options={[
+          {label: _('Show'), value: true},
+          {label: _('Hide'), value: false},
+        ]}
+      />
+      <ColorPicker label={_('Contour Color')} attr="contour.color" />
+      <Numeric label={_('Contour Width')} attr="contour.width" />
     </Section>
 
     <TraceTypeSection name={_('Hover Action')} traceTypes={['box']}>

src/lib/customTraceType.js

@@ -13,6 +13,8 @@ export function plotlyTraceToCustomTrace(trace) {
     (trace.mode === 'lines' || trace.mode === 'lines+markers')
   ) {
     return 'line';
+  } else if (trace.type === 'scatter3d' && trace.mode === 'lines') {
+    return 'line3d';
   }
   return trace.type;
 }
@@ -57,6 +59,16 @@ export function traceTypeToPlotlyInitFigure(traceType) {
         autobinx: true,
         autobiny: true,
       };
+    case 'line3d':
+      return {
+        type: 'scatter3d',
+        mode: 'lines',
+      };
+    case 'scatter3d':
+      return {
+        type: 'scatter3d',
+        mode: 'markers',
+      };
     default:
       return {type: traceType};
   }