feat(legacy-plugin-chart-histogram): subject Add legend option to his…

…togram chart (apache#905)
zhaoyongjie · Nov 25, 2021 · b24d8a5 · b24d8a5
1 parent 71fc9be
commit b24d8a5
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 11 deletions.
diff --git a/...temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-heatmap/src/controlPanel.ts b/...temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-heatmap/src/controlPanel.ts
@@ -192,7 +192,7 @@ const config: ControlPanelConfig = {
               type: 'CheckboxControl',
               label: t('Legend'),
               renderTrigger: true,
-              default: true,
+              default: false,
               description: t('Whether to display the legend (toggles)'),
             },
           },

diff --git a/...temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-histogram/src/Histogram.jsx b/...temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-histogram/src/Histogram.jsx
@@ -42,6 +42,7 @@ const propTypes = {
   opacity: PropTypes.number,
   xAxisLabel: PropTypes.string,
   yAxisLabel: PropTypes.string,
+  showLegend: PropTypes.bool,
 };
 const defaultProps = {
   binCount: 15,
@@ -66,6 +67,7 @@ class CustomHistogram extends React.PureComponent {
       opacity,
       xAxisLabel,
       yAxisLabel,
+      showLegend,
     } = this.props;
 
     const colorFn = CategoricalColorNamespace.getScale(colorScheme);
@@ -81,15 +83,17 @@ class CustomHistogram extends React.PureComponent {
         width={width}
         height={height}
         position="top"
-        renderLegend={({ direction, style }) => (
-          <LegendOrdinal
-            style={style}
-            scale={colorScale}
-            direction={direction}
-            shape="rect"
-            labelMargin="0 15px 0 0"
-          />
-        )}
+        renderLegend={({ direction, style }) =>
+          showLegend && (
+            <LegendOrdinal
+              style={style}
+              scale={colorScale}
+              direction={direction}
+              shape="rect"
+              labelMargin="0 15px 0 0"
+            />
+          )
+        }
         renderChart={parent => (
           <Histogram
             width={parent.width}

diff --git a/...mporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-histogram/src/controlPanel.ts b/...mporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-histogram/src/controlPanel.ts
@@ -57,6 +57,18 @@ const config: ControlPanelConfig = {
       expanded: true,
       controlSetRows: [
         ['color_scheme', 'label_colors'],
+        [
+          {
+            name: 'show_legend',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Legend'),
+              renderTrigger: true,
+              default: false,
+              description: t('Whether to display the legend (toggles)'),
+            },
+          },
+        ],
         [
           {
             name: 'link_length',

diff --git a/...orary_superset_ui/superset-ui/plugins/legacy-plugin-chart-histogram/src/transformProps.js b/...orary_superset_ui/superset-ui/plugins/legacy-plugin-chart-histogram/src/transformProps.js
@@ -18,7 +18,15 @@
  */
 export default function transformProps(chartProps) {
   const { width, height, formData, queriesData } = chartProps;
-  const { colorScheme, linkLength, normalized, globalOpacity, xAxisLabel, yAxisLabel } = formData;
+  const {
+    colorScheme,
+    linkLength,
+    normalized,
+    globalOpacity,
+    xAxisLabel,
+    yAxisLabel,
+    showLegend,
+  } = formData;
 
   return {
     width,
@@ -30,5 +38,6 @@ export default function transformProps(chartProps) {
     opacity: globalOpacity,
     xAxisLabel,
     yAxisLabel,
+    showLegend,
   };
 }