@spteck/fluentui-react-charts 1.1.0 → 1.1.2

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

@@ -789,7 +789,18 @@ 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', // Communication Blue
+  '#f05075ff', // Deep Orange
+  '#45B0A2', // **DARK FOREST GREEN** (New)
+  '#a4262c', // Dark Red
+  '#F49E31', // Rich Purple
+  '#A366FF', // **DARK TEAL/PINE** (New)
+  '#FCCE51', // Berry
+  '#062843ff', // Navy
+  '#7f7f82ff', // Orchid
+  '#376102ff', // Moss Green (Darker than original) */
+  '#4e79a7', '#f28e2c', '#e15759', '#76b7b2', '#59a14f', '#edc949', '#af7aa1', '#ff9da7', '#9c755f', '#bab0ab', '#8cd17d', '#b6992d', '#d37295', '#fabfd2', '#79706e'];
 };
 /**
  * Returns animation configuration for instant interactions.
@@ -866,11 +877,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 +943,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,30 +3459,40 @@ 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':
       return React__default.createElement(BarChart, Object.assign({}, chartProps(chart), {
+        showDatalabels: showDataLabels != null ? showDataLabels : false,
         stacked: false,
         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':
-      return React__default.createElement(AreaChart, Object.assign({}, chartProps(chart), {
+      return React__default.createElement(AreaChart, Object.assign({
+        showDatalabels: showDataLabels != null ? showDataLabels : false
+      }, chartProps(chart), {
         stacked: false,
         theme: fuiTheme
       }));
     case 'bar-horizontal':
-      return React__default.createElement(BarHorizontalChart, Object.assign({}, chartProps(chart), {
+      return React__default.createElement(BarHorizontalChart, Object.assign({
+        showDatalabels: showDataLabels != null ? showDataLabels : false
+      }, chartProps(chart), {
         stacked: true,
         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 +3504,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 {
@@ -3481,7 +3516,9 @@ var getChartComponent = function getChartComponent(chart, theme) {
         })
       }));
     case 'steam':
-      return React__default.createElement(SteamChart, Object.assign({}, chartProps(chart), {
+      return React__default.createElement(SteamChart, Object.assign({
+        showDataLabels: showDataLabels != null ? showDataLabels : false
+      }, chartProps(chart), {
         theme: fuiTheme
       }));
     case 'floating-bar':
@@ -3489,12 +3526,15 @@ 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
       }));
     case 'stacked-line':
-      return React__default.createElement(StackedLineChart, Object.assign({}, chartProps(chart), {
+      return React__default.createElement(StackedLineChart, Object.assign({
+        showDataLabels: showDataLabels != null ? showDataLabels : false
+      }, chartProps(chart), {
         theme: fuiTheme
       }));
     case 'doughnut':
@@ -3505,7 +3545,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 +3559,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 +3576,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 +3589,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 +3603,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 +4220,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))));
     });