@spteck/fluentui-react-charts 1.1.0 → 1.1.1

package/dist/fluentui-react-charts.cjs.development.js

@@ -789,7 +789,7 @@ var lightenColor = function lightenColor(hex, amount) {
 var getFluentPalette = function getFluentPalette(theme) {
   // Check if theme is dark by looking at global color tokens
   var isDark = theme.colorNeutralBackground1.startsWith('#1') || theme.colorNeutralBackground1 === '#000000';
-  return isDark ? ['#2899f5', '#ff8c00', '#32cd32', '#f06b71', '#c390f2', '#00b7c3', '#ffb900', '#b4a0ff', '#60cdff', '#92c353'] : ['#0078d4', '#d83b01', '#097223', '#a4262c', '#3f0c7aff', '#024339ff', '#791d2dff', '#062843ff', '#8764b8', '#376102ff'];
+  return isDark ? ['#2899f5', '#ff8c00', '#32cd32', '#f06b71', '#c390f2', '#00b7c3', '#ffb900', '#b4a0ff', '#60cdff', '#92c353'] : ['#289CEF', '#f05075ff', '#45B0A2', '#a4262c', '#F49E31', '#A366FF', '#FCCE51', '#062843ff', '#7f7f82ff', '#376102ff'];
 };
 /**
  * Returns animation configuration for instant interactions.
@@ -866,11 +866,24 @@ function createFluentTooltip(theme) {
     afterLabel: function afterLabel() {
       return '';
     },
-    labelColor: function labelColor() {
-      return undefined;
+    // Provide sensible defaults for tooltip label colors using dataset colors when available
+    labelColor: function labelColor(item) {
+      var _item$dataIndex, _item$dataIndex2, _ref, _ref2;
+      var ds = item.dataset || {};
+      // dataset colors can be a single value or an array per data point
+      var bg = ds.backgroundColor;
+      if (Array.isArray(bg)) bg = bg[(_item$dataIndex = item.dataIndex) != null ? _item$dataIndex : 0];
+      var border = ds.borderColor;
+      if (Array.isArray(border)) border = border[(_item$dataIndex2 = item.dataIndex) != null ? _item$dataIndex2 : 0];
+      var backgroundColor = (_ref = bg != null ? bg : ds.pointBackgroundColor) != null ? _ref : tooltipBg;
+      var borderColorOut = (_ref2 = border != null ? border : ds.pointBorderColor) != null ? _ref2 : borderColor;
+      return {
+        borderColor: borderColorOut,
+        backgroundColor: backgroundColor
+      };
     },
     labelTextColor: function labelTextColor() {
-      return '';
+      return tooltipTitleColor;
     },
     footer: function footer() {
       return '';
@@ -919,13 +932,13 @@ function createFluentTooltip(theme) {
 /**
  * Returns a Chart.js ticks callback to truncate long labels and add optional prefix/suffix.
  */
-var createAxisLabelFormatter = function createAxisLabelFormatter(_ref) {
-  var _ref$maxLength = _ref.maxLength,
-    maxLength = _ref$maxLength === void 0 ? 12 : _ref$maxLength,
-    _ref$suffix = _ref.suffix,
-    suffix = _ref$suffix === void 0 ? '' : _ref$suffix,
-    _ref$prefix = _ref.prefix,
-    prefix = _ref$prefix === void 0 ? '' : _ref$prefix;
+var createAxisLabelFormatter = function createAxisLabelFormatter(_ref3) {
+  var _ref3$maxLength = _ref3.maxLength,
+    maxLength = _ref3$maxLength === void 0 ? 12 : _ref3$maxLength,
+    _ref3$suffix = _ref3.suffix,
+    suffix = _ref3$suffix === void 0 ? '' : _ref3$suffix,
+    _ref3$prefix = _ref3.prefix,
+    prefix = _ref3$prefix === void 0 ? '' : _ref3$prefix;
   return function (value) {
     var label = typeof value === 'number' ? this.getLabelForValue(value) : String(value);
     var trimmed = label.length > maxLength ? label.slice(0, maxLength) + '…' : label;
@@ -3435,7 +3448,8 @@ var chartProps = function chartProps(chart) {
 };
 var getChartComponent = function getChartComponent(chart, theme) {
   var _chart$axesMode;
-  var type = chart.type;
+  var type = chart.type,
+    showDataLabels = chart.showDataLabels;
   var fuiTheme = theme != null ? theme : reactComponents.webLightTheme;
   switch (type) {
     case 'bar':
@@ -3444,7 +3458,9 @@ var getChartComponent = function getChartComponent(chart, theme) {
         theme: fuiTheme
       }));
     case 'line':
-      return React__default.createElement(LineChart, Object.assign({}, chartProps(chart), {
+      return React__default.createElement(LineChart, Object.assign({
+        showDataLabels: showDataLabels != null ? showDataLabels : false
+      }, chartProps(chart), {
         theme: fuiTheme
       }));
     case 'area':
@@ -3458,7 +3474,9 @@ var getChartComponent = function getChartComponent(chart, theme) {
         theme: fuiTheme
       }));
     case 'bubble':
-      return React__default.createElement(BubbleChart, Object.assign({}, chartProps(chart), {
+      return React__default.createElement(BubbleChart, Object.assign({
+        showDataLabels: showDataLabels != null ? showDataLabels : false
+      }, chartProps(chart), {
         getRadius: function getRadius(d) {
           var _d$radius;
           return (_d$radius = d.radius) != null ? _d$radius : 1;
@@ -3470,6 +3488,7 @@ var getChartComponent = function getChartComponent(chart, theme) {
         theme: fuiTheme,
         // allow the originating chart descriptor to opt into dual axes
         axesMode: (_chart$axesMode = chart.axesMode) != null ? _chart$axesMode : 'dual',
+        showDataLabels: showDataLabels != null ? showDataLabels : false,
         data: chart.data.map(function (series) {
           var _series$type;
           return {
@@ -3489,7 +3508,8 @@ var getChartComponent = function getChartComponent(chart, theme) {
         getRange: function getRange(d) {
           var _d$min, _d$max;
           return [(_d$min = d.min) != null ? _d$min : 0, (_d$max = d.max) != null ? _d$max : 0];
-        }
+        },
+        showDataLabels: showDataLabels != null ? showDataLabels : false
       }, chartProps(chart), {
         theme: fuiTheme
       }));
@@ -3505,7 +3525,8 @@ var getChartComponent = function getChartComponent(chart, theme) {
         getValue: function getValue(datum) {
           var _datum$value;
           return (_datum$value = datum.value) != null ? _datum$value : 0;
-        }
+        },
+        showDataLabels: showDataLabels != null ? showDataLabels : false
       }, chartProps(chart), {
         theme: fuiTheme
       }));
@@ -3518,7 +3539,7 @@ var getChartComponent = function getChartComponent(chart, theme) {
           var _datum$value2;
           return (_datum$value2 = datum.value) != null ? _datum$value2 : 0;
         },
-        showDataLabels: true
+        showDataLabels: showDataLabels != null ? showDataLabels : false
       }, chartProps(chart), {
         theme: fuiTheme
       }));
@@ -3535,7 +3556,7 @@ var getChartComponent = function getChartComponent(chart, theme) {
         }
       }, chartProps(chart), {
         theme: fuiTheme,
-        showDataLabels: false
+        showDataLabels: showDataLabels != null ? showDataLabels : false
       }));
     case 'polar':
       return React__default.createElement(PolarChart, {
@@ -3548,7 +3569,7 @@ var getChartComponent = function getChartComponent(chart, theme) {
           return (_d$value = d.value) != null ? _d$value : 0;
         },
         title: chart.title,
-        showDataLabels: true,
+        showDataLabels: showDataLabels != null ? showDataLabels : false,
         theme: fuiTheme
       });
     case 'radar':
@@ -3562,7 +3583,8 @@ var getChartComponent = function getChartComponent(chart, theme) {
           return (_d$value2 = d.value) != null ? _d$value2 : 0;
         },
         title: chart.title,
-        theme: fuiTheme
+        theme: fuiTheme,
+        showDataLabels: showDataLabels != null ? showDataLabels : false
       });
     default:
       throw new Error("Unsupported chart type: " + type);
@@ -4178,7 +4200,8 @@ var Dashboard = function Dashboard(_ref) {
       }), React__default.createElement("div", {
         className: styles.chartContainer,
         style: {
-          height: containerHeight
+          height: containerHeight,
+          paddingTop: cardContainer.chart.title ? 0 : 16
         }
       }, theme && theme.fontSizeBase100 && getChartComponent(cardContainer.chart, theme))));
     });