getredash/redash#2117 CR2

client/app/visualizations/chart/plotly/utils.js

@@ -1,6 +1,6 @@
 import {
-  isArray, isNumber, isUndefined, contains, min, max, has, find, first, last,
-  each, values, sortBy, union, pluck, identity, filter, map, constant,
+  isArray, isNumber, isString, isUndefined, contains, min, max, has, find,
+  first, last, each, values, sortBy, union, pluck, identity, filter, map, constant,
 } from 'underscore';
 import moment from 'moment';
 import createFormatter from '@/lib/value-format';
@@ -38,6 +38,37 @@ const formatPercent = createFormatter({ displayAs: 'number', numberFormat: '0[.]
 
 const ColorPaletteArray = values(BaseColors);
 
+function getFontColor(bgcolor) {
+  let result = '#333333';
+  if (isString(bgcolor)) {
+    let matches = /#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/i.exec(bgcolor);
+    let r;
+    let g;
+    let b;
+    if (matches) {
+      r = parseInt(matches[1], 16);
+      g = parseInt(matches[2], 16);
+      b = parseInt(matches[3], 16);
+    } else {
+      matches = /#?([0-9a-f])([0-9a-f])([0-9a-f])/i.exec(bgcolor);
+      if (matches) {
+        r = parseInt(matches[1] + matches[1], 16);
+        g = parseInt(matches[2] + matches[2], 16);
+        b = parseInt(matches[3] + matches[3], 16);
+      } else {
+        return result;
+      }
+    }
+
+    const lightness = r * 0.299 + g * 0.587 + b * 0.114;
+    if (lightness < 170) {
+      result = '#ffffff';
+    }
+  }
+
+  return result;
+}
+
 function normalizeValue(value) {
   if (moment.isMoment(value)) {
     return value.format('YYYY-MM-DD HH:mm:ss');
@@ -164,6 +195,9 @@ function prepareChartData(seriesList, options) {
       },
       name: seriesOptions.name || series.name,
       marker: { color: seriesColor },
+      insidetextfont: {
+        color: getFontColor(seriesColor),
+      },
     };
 
     if ((seriesOptions.yAxis === 1) && (options.series.stacking === null)) {
@@ -248,7 +282,7 @@ function enableAnnotations(layout, seriesList, options) {
   if (options.annotations) {
     if (options.globalSeriesType === 'column') {
       seriesList.forEach((series) => {
-        series.textposition = 'auto';
+        series.textposition = 'inside';
       });
     } else if (['line', 'area'].indexOf(options.globalSeriesType) >= 0) {
       layout.yaxis.showticklabels = false;