[GitHub] kristw commented on a change in pull request #5997: [SIP-6] Migrate visualizations to new directory structure (part 2)

[GitBox <gi...@apache.org>]

kristw commented on a change in pull request #5997: [SIP-6] Migrate visualizations to new directory structure (part 2)
URL: https://github.com/apache/incubator-superset/pull/5997#discussion_r222394629
 
 

 ##########
 File path: superset/assets/src/visualizations/BigNumber/transformProps.js
 ##########
 @@ -0,0 +1,79 @@
+import * as color from 'd3-color';
+import d3 from 'd3';
+import { d3FormatPreset } from '../../modules/utils';
+import { renderTooltipFactory } from './BigNumber';
+
+const TIME_COLUMN = '__timestamp';
+
+export default function transformProps(basicChartInput) {
+  const { containerId, formData, payload } = basicChartInput;
+  const {
+    colorPicker,
+    compareLag: compareLagInput,
+    compareSuffix = '',
+    metric,
+    showTrendLine,
+    startYAxisAtZero,
+    subheader = '',
+    vizType,
+    yAxisFormat,
+  } = formData;
+  const { data } = payload;
+
+  let mainColor;
+  if (colorPicker) {
+    const { r, g, b } = colorPicker;
+    mainColor = color.rgb(r, g, b).hex();
+  }
+
+  let bigNumber;
+  let trendLineData;
+  const metricName = metric.label || metric;
+  const compareLag = +compareLagInput || 0;
+  const supportTrendLine = vizType === 'big_number';
+  const supportAndShowTrendLine = supportTrendLine && showTrendLine;
+  let percentChange = 0;
+  let formattedSubheader = subheader;
+  if (supportTrendLine) {
+    const sortedData = [...data].sort((a, b) => a[TIME_COLUMN] - b[TIME_COLUMN]);
+    bigNumber = sortedData[sortedData.length - 1][metricName];
+    if (compareLag > 0) {
+      const compareIndex = sortedData.length - (compareLag + 1);
+      if (compareIndex >= 0) {
+        const compareValue = sortedData[compareIndex][metricName];
+        percentChange = compareValue === 0
+          ? 0 : (bigNumber - compareValue) / Math.abs(compareValue);
+        const formatPercentChange = d3.format('+.1%');
+        formattedSubheader = `${formatPercentChange(percentChange)} ${compareSuffix}`;
+      }
+    }
+    trendLineData = supportAndShowTrendLine
+      ? sortedData.map(point => ({ x: point[TIME_COLUMN], y: point[metricName] }))
+      : null;
+  } else {
+    bigNumber = data[0][metricName];
+    trendLineData = null;
+  }
+
+  let className = '';
+  if (percentChange > 0) {
+    className = 'positive';
+  } else if (percentChange < 0) {
+    className = 'negative';
+  }
+
+  const formatValue = d3FormatPreset(yAxisFormat);
+
+  return {
+    bigNumber,
+    className,
+    formatBigNumber: formatValue,
+    gradientId: `big_number_${containerId}`,
 
 Review comment:
   Interesting idea. I like it. Can create the `id` in the constructor so it will not change every render.

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org