@spteck/fluentui-react-charts 1.0.12 → 1.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +0 -25
- package/dist/charts/ComboChart/ComboChart.d.ts +1 -1
- package/dist/fluentui-react-charts.cjs.development.js +14 -8
- package/dist/fluentui-react-charts.cjs.development.js.map +1 -1
- package/dist/fluentui-react-charts.cjs.production.min.js +1 -1
- package/dist/fluentui-react-charts.cjs.production.min.js.map +1 -1
- package/dist/fluentui-react-charts.esm.js +14 -8
- package/dist/fluentui-react-charts.esm.js.map +1 -1
- package/dist/hooks/useChartUtils.d.ts +2 -2
- package/package.json +1 -1
|
@@ -779,8 +779,10 @@ var lightenColor = function lightenColor(hex, amount) {
|
|
|
779
779
|
};
|
|
780
780
|
return "#" + toHex(r) + toHex(g) + toHex(b);
|
|
781
781
|
};
|
|
782
|
-
var getFluentPalette = function getFluentPalette(
|
|
783
|
-
|
|
782
|
+
var getFluentPalette = function getFluentPalette(theme) {
|
|
783
|
+
// Check if theme is dark by looking at global color tokens
|
|
784
|
+
var isDark = theme.colorNeutralBackground1.startsWith('#1') || theme.colorNeutralBackground1 === '#000000';
|
|
785
|
+
return isDark ? ['#2899f5', '#ff8c00', '#32cd32', '#f06b71', '#c390f2', '#00b7c3', '#ffb900', '#b4a0ff', '#60cdff', '#92c353'] : ['#0078d4', '#d83b01', '#107c10', '#a4262c', '#5c2d91', '#008272', '#c43148', '#005a9e', '#8764b8', '#498205'];
|
|
784
786
|
};
|
|
785
787
|
/**
|
|
786
788
|
* Returns animation configuration for instant interactions.
|
|
@@ -807,7 +809,7 @@ function createFluentTooltip(theme) {
|
|
|
807
809
|
var fontSize = parseInt(theme.fontSizeBase200.replace('px', '')) || 14;
|
|
808
810
|
var tooltipBg = theme.colorNeutralBackground1;
|
|
809
811
|
var tooltipTitleColor = theme.colorNeutralForeground1;
|
|
810
|
-
var tooltipBodyColor = theme.
|
|
812
|
+
var tooltipBodyColor = theme.colorNeutralForeground1;
|
|
811
813
|
var borderColor = theme.colorNeutralStroke2;
|
|
812
814
|
var callbacks = {
|
|
813
815
|
title: function title(context) {
|
|
@@ -1769,7 +1771,7 @@ function ComboChart(_ref) {
|
|
|
1769
1771
|
return {
|
|
1770
1772
|
type: series.type,
|
|
1771
1773
|
label: series.label,
|
|
1772
|
-
//
|
|
1774
|
+
// Respect explicit series yAxisID if provided (retro-compatibility).
|
|
1773
1775
|
yAxisID: (_series$yAxisID = series.yAxisID) != null ? _series$yAxisID : axesMode === 'dual' ? series.type === 'bar' ? 'y-bar' : 'y-line' : 'y',
|
|
1774
1776
|
data: allCategories.map(function (cat) {
|
|
1775
1777
|
var found = series.data.find(function (d) {
|
|
@@ -1777,6 +1779,8 @@ function ComboChart(_ref) {
|
|
|
1777
1779
|
});
|
|
1778
1780
|
return found ? getSecondary(found) : 0;
|
|
1779
1781
|
}),
|
|
1782
|
+
// In dual mode, group bars into a common stack so they stack on x axis
|
|
1783
|
+
stack: axesMode === 'dual' && series.type === 'bar' ? 'barStack' : undefined,
|
|
1780
1784
|
backgroundColor: seriesColors[series.label],
|
|
1781
1785
|
borderColor: seriesColors[series.label],
|
|
1782
1786
|
fill: series.type === 'bar',
|
|
@@ -1854,6 +1858,7 @@ function ComboChart(_ref) {
|
|
|
1854
1858
|
type: 'linear',
|
|
1855
1859
|
position: 'left',
|
|
1856
1860
|
stacked: true,
|
|
1861
|
+
offset: true,
|
|
1857
1862
|
ticks: {
|
|
1858
1863
|
color: labelColor,
|
|
1859
1864
|
font: {
|
|
@@ -1886,7 +1891,6 @@ function ComboChart(_ref) {
|
|
|
1886
1891
|
return _extends({}, base, {
|
|
1887
1892
|
scales: {
|
|
1888
1893
|
x: {
|
|
1889
|
-
stacked: false,
|
|
1890
1894
|
ticks: {
|
|
1891
1895
|
color: labelColor,
|
|
1892
1896
|
font: {
|
|
@@ -1899,9 +1903,7 @@ function ComboChart(_ref) {
|
|
|
1899
1903
|
}
|
|
1900
1904
|
},
|
|
1901
1905
|
y: {
|
|
1902
|
-
type: 'linear',
|
|
1903
1906
|
position: 'left',
|
|
1904
|
-
stacked: false,
|
|
1905
1907
|
ticks: {
|
|
1906
1908
|
color: labelColor,
|
|
1907
1909
|
font: {
|
|
@@ -1911,7 +1913,8 @@ function ComboChart(_ref) {
|
|
|
1911
1913
|
},
|
|
1912
1914
|
grid: {
|
|
1913
1915
|
color: gridColor
|
|
1914
|
-
}
|
|
1916
|
+
},
|
|
1917
|
+
stacked: false
|
|
1915
1918
|
}
|
|
1916
1919
|
}
|
|
1917
1920
|
});
|
|
@@ -3426,6 +3429,7 @@ var chartProps = function chartProps(chart) {
|
|
|
3426
3429
|
};
|
|
3427
3430
|
};
|
|
3428
3431
|
var getChartComponent = function getChartComponent(chart, theme) {
|
|
3432
|
+
var _chart$axesMode;
|
|
3429
3433
|
var type = chart.type;
|
|
3430
3434
|
var fuiTheme = theme != null ? theme : webLightTheme;
|
|
3431
3435
|
switch (type) {
|
|
@@ -3459,6 +3463,8 @@ var getChartComponent = function getChartComponent(chart, theme) {
|
|
|
3459
3463
|
case 'multiple-axes':
|
|
3460
3464
|
return React__default.createElement(ComboChart, Object.assign({}, chartProps(chart), {
|
|
3461
3465
|
theme: fuiTheme,
|
|
3466
|
+
// allow the originating chart descriptor to opt into dual axes
|
|
3467
|
+
axesMode: (_chart$axesMode = chart.axesMode) != null ? _chart$axesMode : 'dual',
|
|
3462
3468
|
data: chart.data.map(function (series) {
|
|
3463
3469
|
var _series$type;
|
|
3464
3470
|
return {
|