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
apache · Nov 26, 2021 · 98e2f74 · 98e2f74
1 parent f880b15
commit 98e2f74
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 0 deletions.
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
@@ -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/...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
@@ -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/...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
@@ -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,