Merge pull request #903 from plotly/choropleth-text

Choropleth text

Author: nicolaskruchten

dev/mocks.json

@@ -10,6 +10,7 @@
   "/percy/waterfall.json",
   "/percy/sunburst.json",
   "/percy/sankey.json",
+  "/percy/choropleth.json",
   "0.json",
   "1.json",
   "10.json",

dev/percy/choropleth.json

@@ -0,0 +1,42 @@
+{
+  "data": [
+    {
+      "zmax": 1000,
+      "colorscale": "RdBu",
+      "zmin": -1000,
+      "locations": [
+        "AGO",
+        "ALB",
+        "ARE"
+      ],
+      "locationssrc": "x1",
+      "z": [
+        -639.491311425916,
+        21.2123434330386,
+        -179.388449582104
+      ],
+      "zsrc": "x1",
+      "text": [
+        "AGO",
+        "ALB",
+        "ARE"
+      ],
+      "textsrc": "x1",
+      "type": "choropleth",
+      "zauto": false,
+      "hoverinfo": "text"
+    }
+  ],
+  "layout": {
+    "autosize": true,
+    "showlegend": false,
+    "geo": {
+      "showcountries": true,
+      "showocean": true,
+      "showland": true,
+      "showlakes": true,
+      "showrivers": true
+    }
+  },
+  "frames": []
+}

dev/percy/index.js

@@ -8,3 +8,4 @@ export {default as box} from './box.json';
 export {default as waterfall} from './waterfall.json';
 export {default as sunburst} from './sunburst.json';
 export {default as sankey} from './sankey.json';
+export {default as choropleth} from './choropleth.json';

src/__stories__/index.js

@@ -27,6 +27,7 @@ const panelsToTest = {
   waterfall: ['GraphCreatePanel', 'StyleTracesPanel'],
   sunburst: ['GraphCreatePanel', 'StyleTracesPanel'],
   sankey: ['GraphCreatePanel', 'StyleTracesPanel'],
+  choropleth: ['GraphCreatePanel', 'GraphSubplotsPanel', 'StyleTracesPanel'],
 };
 
 window.URL.createObjectURL = function() {

src/default_panels/StyleLayoutPanel.js

@@ -144,6 +144,16 @@ const StyleLayoutPanel = (props, {localize: _}) => (
       </PlotlySection>
       <PlotlySection name={_('Hover')}>
         <HovermodeDropdown label={_('Mode')} attr="hovermode">
+          <Dropdown
+            label={_('Text Alignment')}
+            attr="hoverlabel.align"
+            options={[
+              {label: _('Auto'), value: 'auto'},
+              {label: _('Left'), value: 'left'},
+              {label: _('Right'), value: 'right'},
+            ]}
+            clearable={false}
+          />
           <HoverColor
             label={_('Background Color')}
             attr="hoverlabel.bgcolor"

src/default_panels/StyleTracesPanel.js

@@ -46,6 +46,10 @@ import {
   HoveronDropdown,
   LevelRendered,
 } from '../components/fields/derived';
+import {traceTypes} from 'lib/traceTypes';
+import localize from 'lib/localize';
+
+const allTraceTypes = traceTypes(localize).map(({value}) => value);
 
 const StyleTracesPanel = (props, {localize: _}) => (
   <TraceAccordion canGroup>
@@ -435,12 +439,19 @@ const StyleTracesPanel = (props, {localize: _}) => (
         'scatterternary',
         'scatterpolar',
         'scatterpolargl',
+        'box',
+        'violin',
         'scatter3d',
         'scattergl',
         'scattergeo',
+        'parcoords',
+        'parcats',
         'scattermapbox',
-        'box',
-        'violin',
+        'scattercarpet',
+        'contourcarpet',
+        'ohlc',
+        'candlestick',
+        'histogram2dcontour',
       ]}
       mode="trace"
     >
@@ -477,21 +488,19 @@ const StyleTracesPanel = (props, {localize: _}) => (
     </PlotlySection>
     <TraceTypeSection
       name={_('Text')}
-      traceTypes={[
-        'scatter',
-        'scattergl',
-        'scatterpolar',
-        'scatterpolargl',
-        'barpolar',
-        'pie',
-        'scatter3d',
-        'scatterternary',
-        'bar',
-        'scattergeo',
-        'scattermapbox',
-        'sunburst',
-        'waterfall',
-      ]}
+      traceTypes={allTraceTypes.filter(
+        t =>
+          ![
+            'histogram2d',
+            'histogram2dcontour',
+            'parcoords',
+            'parcats',
+            'sankey',
+            'table',
+            'scattercarpet',
+            'carpet',
+          ].includes(t)
+      )}
       mode="trace"
     >
       <DataSelector label={_('Text')} attr="text" />
@@ -738,6 +747,16 @@ const StyleTracesPanel = (props, {localize: _}) => (
         <MultiColorPicker label={_('Contour Color')} attr="contour.color" />
         <Numeric label={_('Contour Width')} attr="contour.width" />
       </VisibilitySelect>
+      <Dropdown
+        label={_('Text Alignment')}
+        attr="hoverlabel.align"
+        options={[
+          {label: _('Auto'), value: 'auto'},
+          {label: _('Left'), value: 'left'},
+          {label: _('Right'), value: 'right'},
+        ]}
+        clearable={false}
+      />
       <Text label={_('Value Format')} attr="valueformat" />
       <Text label={_('Value Suffix')} attr="valuesuffix" />
     </PlotlySection>

src/lib/constants.js

@@ -142,17 +142,4 @@ export const COLORS = {
   black: '#000000',
 };
 
-export const DEFAULT_COLORS = [
-  COLORS.charcoal,
-  COLORS.white,
-  COLORS.mutedBlue,
-  COLORS.safetyOrange,
-  COLORS.cookedAsparagusGreen,
-  COLORS.brickRed,
-  COLORS.mutedPurple,
-  COLORS.chestnutBrown,
-  COLORS.raspberryYogurtPink,
-  COLORS.middleGray,
-  COLORS.curryYellowGreen,
-  COLORS.blueTeal,
-];
+export const DEFAULT_COLORS = Object.values(COLORS);