From 287601e95e57f51e7f97d38cd8e3266d89ad9cc6 Mon Sep 17 00:00:00 2001
From: stevetracvc <70416691+stevetracvc@users.noreply.github.com>
Date: Sun, 3 Oct 2021 08:12:24 -0600
Subject: [PATCH] feat(legacy-plugin-chart-histogram): cumulative histogram
 option (#1381)

* Add a cumulative option to make a cumulative histogram

* also add in percentile in the hover popup

* fix: add precision to percentile label

* fix: formatting ES lint issues
---
 .../legacy-plugin-chart-histogram/src/Histogram.jsx  |  8 ++++++++
 .../src/controlPanel.ts                              | 12 ++++++++++++
 .../src/transformProps.js                            |  2 ++
 3 files changed, 22 insertions(+)

diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-histogram/src/Histogram.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-histogram/src/Histogram.jsx
index b727d31012421..b231b0ae6ea6d 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-histogram/src/Histogram.jsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-histogram/src/Histogram.jsx
@@ -38,6 +38,7 @@ const propTypes = {
   height: PropTypes.number.isRequired,
   colorScheme: PropTypes.string,
   normalized: PropTypes.bool,
+  cumulative: PropTypes.bool,
   binCount: PropTypes.number,
   opacity: PropTypes.number,
   xAxisLabel: PropTypes.string,
@@ -49,6 +50,7 @@ const defaultProps = {
   className: '',
   colorScheme: '',
   normalized: false,
+  cumulative: false,
   opacity: 1,
   xAxisLabel: '',
   yAxisLabel: '',
@@ -64,6 +66,7 @@ class CustomHistogram extends React.PureComponent {
       binCount,
       colorScheme,
       normalized,
+      cumulative,
       opacity,
       xAxisLabel,
       yAxisLabel,
@@ -100,6 +103,7 @@ class CustomHistogram extends React.PureComponent {
             height={parent.height}
             ariaLabel="Histogram"
             normalized={normalized}
+            cumulative={cumulative}
             binCount={binCount}
             binType="numeric"
             margin={{ top: 20, right: 20 }}
@@ -116,6 +120,10 @@ class CustomHistogram extends React.PureComponent {
                   <strong>{t('cumulative')} </strong>
                   {datum.cumulative}
                 </div>
+                <div>
+                  <strong>{t('percentile (exclusive)')} </strong>
+                  {`{((datum.cumulativeDensity - datum.density) * 100).toPrecision(4)}th`}
+                </div>
               </div>
             )}
             valueAccessor={datum => datum}
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-histogram/src/controlPanel.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-histogram/src/controlPanel.ts
index bcb4dcc672022..0d74d19b42d8e 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-histogram/src/controlPanel.ts
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-histogram/src/controlPanel.ts
@@ -131,6 +131,18 @@ const config: ControlPanelConfig = {
             },
           },
         ],
+        [
+          {
+            name: 'cumulative',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Cumulative'),
+              renderTrigger: true,
+              description: t('Whether to make the histogram cumulative'),
+              default: false,
+            },
+          },
+        ],
       ],
     },
   ],
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-histogram/src/transformProps.js b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-histogram/src/transformProps.js
index 7cd6856ac5b68..4a5782c7172a5 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-histogram/src/transformProps.js
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-histogram/src/transformProps.js
@@ -22,6 +22,7 @@ export default function transformProps(chartProps) {
     colorScheme,
     linkLength,
     normalized,
+    cumulative,
     globalOpacity,
     xAxisLabel,
     yAxisLabel,
@@ -35,6 +36,7 @@ export default function transformProps(chartProps) {
     binCount: parseInt(linkLength, 10),
     colorScheme,
     normalized,
+    cumulative,
     opacity: globalOpacity,
     xAxisLabel,
     yAxisLabel,