fix(scatter): fix legend and labels (#43)

superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/CategoricalDeckGLContainer.jsx

@@ -58,16 +58,17 @@ function getCategories(fd, data) {
 }
 
 const propTypes = {
+  datasource: PropTypes.object.isRequired,
   formData: PropTypes.object.isRequired,
-  mapboxApiKey: PropTypes.string.isRequired,
-  setControlValue: PropTypes.func.isRequired,
-  viewport: PropTypes.object.isRequired,
   getLayer: PropTypes.func.isRequired,
   getPoints: PropTypes.func.isRequired,
-  payload: PropTypes.object.isRequired,
-  onAddFilter: PropTypes.func,
-  width: PropTypes.number.isRequired,
   height: PropTypes.number.isRequired,
+  mapboxApiKey: PropTypes.string.isRequired,
+  onAddFilter: PropTypes.func,
+  payload: PropTypes.object.isRequired,
+  setControlValue: PropTypes.func.isRequired,
+  viewport: PropTypes.object.isRequired,
+  width: PropTypes.number.isRequired,
 };
 
 export default class CategoricalDeckGLContainer extends React.PureComponent {
@@ -179,7 +180,7 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
       data: { ...payload.data, features },
     };
 
-    return [getLayer(fd, filteredPayload, onAddFilter, this.setTooltip)];
+    return [getLayer(fd, filteredPayload, onAddFilter, this.setTooltip, this.props.datasource)];
   }
 
   // eslint-disable-next-line class-methods-use-this
@@ -255,11 +256,12 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
           height={this.props.height}
         >
           <Legend
+            forceCategorical
             categories={this.state.categories}
-            toggleCategory={this.toggleCategory}
-            showSingleCategory={this.showSingleCategory}
-            position={this.props.formData.legend_position}
             format={this.props.formData.legend_format}
+            position={this.props.formData.legend_position}
+            showSingleCategory={this.showSingleCategory}
+            toggleCategory={this.toggleCategory}
           />
         </AnimatableDeckGLContainer>
       </div>

superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/components/Legend.jsx

@@ -29,23 +29,25 @@ const categoryDelimiter = ' - ';
 
 const propTypes = {
   categories: PropTypes.object,
-  toggleCategory: PropTypes.func,
+  forceCategorical: PropTypes.bool,
-  showSingleCategory: PropTypes.func,
   format: PropTypes.string,
   position: PropTypes.oneOf([null, 'tl', 'tr', 'bl', 'br']),
+  showSingleCategory: PropTypes.func,
+  toggleCategory: PropTypes.func,
 };
 
 const defaultProps = {
   categories: {},
-  toggleCategory: () => {},
+  forceCategorical: false,
-  showSingleCategory: () => {},
   format: null,
   position: 'tr',
+  showSingleCategory: () => {},
+  toggleCategory: () => {},
 };
 
 export default class Legend extends React.PureComponent {
   format(value) {
-    if (!this.props.format) {
+    if (!this.props.format || this.props.forceCategorical) {
       return value;
     }
 

superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/factory.jsx

@@ -30,13 +30,14 @@ import CategoricalDeckGLContainer from './CategoricalDeckGLContainer';
 import fitViewport from './utils/fitViewport';
 
 const propTypes = {
+  datasource: PropTypes.object.isRequired,
   formData: PropTypes.object.isRequired,
+  height: PropTypes.number.isRequired,
+  onAddFilter: PropTypes.func,
   payload: PropTypes.object.isRequired,
   setControlValue: PropTypes.func.isRequired,
   viewport: PropTypes.object.isRequired,
-  onAddFilter: PropTypes.func,
   width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired,
 };
 const defaultProps = {
   onAddFilter() {},
@@ -120,10 +121,11 @@ export function createDeckGLComponent(getLayer, getPoints) {
 
 export function createCategoricalDeckGLComponent(getLayer, getPoints) {
   function Component(props) {
-    const { formData, payload, setControlValue, viewport, width, height } = props;
+    const { datasource, formData, height, payload, setControlValue, viewport, width } = props;
 
     return (
       <CategoricalDeckGLContainer
+        datasource={datasource}
         formData={formData}
         mapboxApiKey={payload.data.mapboxApiKey}
         setControlValue={setControlValue}

superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Scatter/Scatter.jsx

@@ -18,7 +18,7 @@
  */
 import { ScatterplotLayer } from 'deck.gl';
 import React from 'react';
-import { t } from '@superset-ui/core';
+import { getMetricLabel, t } from '@superset-ui/core';
 import { commonLayerProps } from '../common';
 import { createCategoricalDeckGLComponent } from '../../factory';
 import TooltipRow from '../../TooltipRow';
@@ -28,27 +28,27 @@ function getPoints(data) {
   return data.map(d => d.position);
 }
 
-function setTooltipContent(formData) {
+function setTooltipContent(formData, verboseMap) {
-  return o => (
+  return o => {
-    <div className="deckgl-tooltip">
+    const label =
-      <TooltipRow
+      verboseMap?.[formData.point_radius_fixed.value] ||
-        label={`${t('Longitude and Latitude')}: `}
+      getMetricLabel(formData.point_radius_fixed?.value);
-        value={`${o.object.position[0]}, ${o.object.position[1]}`}
+    return (
-      />
+      <div className="deckgl-tooltip">
-      {o.object.cat_color && (
-        <TooltipRow label={`${t('Category')}: `} value={`${o.object.cat_color}`} />
-      )}
-      {o.object.metric && (
         <TooltipRow
-          label={`${formData.point_radius_fixed.value.label}: `}
+          label={`${t('Longitude and Latitude')}: `}
-          value={`${o.object.metric}`}
+          value={`${o.object.position[0]}, ${o.object.position[1]}`}
         />
-      )}
+        {o.object.cat_color && (
-    </div>
+          <TooltipRow label={`${t('Category')}: `} value={`${o.object.cat_color}`} />
-  );
+        )}
+        {o.object.metric && <TooltipRow label={`${label}: `} value={`${o.object.metric}`} />}
+      </div>
+    );
+  };
 }
 
-export function getLayer(formData, payload, onAddFilter, setTooltip) {
+export function getLayer(formData, payload, onAddFilter, setTooltip, datasource) {
   const fd = formData;
   const dataWithRadius = payload.data.features.map(d => {
     let radius = unitToRadius(fd.point_unit, d.radius) || 10;
@@ -73,7 +73,7 @@ export function getLayer(formData, payload, onAddFilter, setTooltip) {
     radiusMinPixels: fd.min_radius || null,
     radiusMaxPixels: fd.max_radius || null,
     stroked: false,
-    ...commonLayerProps(fd, setTooltip, setTooltipContent(fd)),
+    ...commonLayerProps(fd, setTooltip, setTooltipContent(fd, datasource?.verboseMap)),
   });
 }
 

superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Scatter/controlPanel.js

@@ -66,8 +66,8 @@ export default {
     {
       label: t('Point Size'),
       controlSetRows: [
+        [pointRadiusFixed],
         [
-          pointRadiusFixed,
           {
             name: 'point_unit',
             config: {
@@ -125,17 +125,17 @@ export default {
     {
       label: t('Point Color'),
       controlSetRows: [
-        ['color_picker', legendPosition],
+        ['color_picker'],
-        [null, legendFormat],
+        [legendPosition],
+        [legendFormat],
         [
           {
             ...dimension,
             label: t('Categorical Color'),
             description: t('Pick a dimension from which categorical colors are defined'),
           },
-          'color_scheme',
-          'label_colors',
         ],
+        ['color_scheme'],
       ],
     },
     {

superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/transformProps.js

@@ -19,10 +19,11 @@
 const NOOP = () => {};
 
 export default function transformProps(chartProps) {
-  const { width, height, rawFormData, queriesData, hooks } = chartProps;
+  const { datasource, height, hooks, queriesData, rawFormData, width } = chartProps;
   const { onAddFilter = NOOP, setControlValue = NOOP } = hooks;
 
   return {
+    datasource,
     formData: rawFormData,
     height,
     onAddFilter,