@fluentui/react-charts 9.1.9 → 9.2.0

package/lib/utilities/utilities.js

@@ -1,5 +1,5 @@
 import { axisRight as d3AxisRight, axisBottom as d3AxisBottom, axisLeft as d3AxisLeft } from 'd3-axis';
-import { max as d3Max, min as d3Min, ticks as d3Ticks, nice as d3nice } from 'd3-array';
+import { max as d3Max, min as d3Min, ticks as d3Ticks, nice as d3nice, sum as d3Sum, mean as d3Mean, median as d3Median } from 'd3-array';
 import { scaleLinear as d3ScaleLinear, scaleBand as d3ScaleBand, scaleUtc as d3ScaleUtc, scaleTime as d3ScaleTime } from 'd3-scale';
 import { select as d3Select, selectAll as d3SelectAll } from 'd3-selection';
 import { format as d3Format } from 'd3-format';
@@ -10,8 +10,7 @@ import { formatPrefix as d3FormatPrefix } from 'd3-format';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { formatDateToLocaleString, formatToLocaleString, getMultiLevelDateTimeFormatOptions } from '@fluentui/chart-utilities';
 export const MIN_DOMAIN_MARGIN = 8;
-export var ChartTypes;
-(function(ChartTypes) {
+export var ChartTypes = /*#__PURE__*/ function(ChartTypes) {
     ChartTypes[ChartTypes["AreaChart"] = 0] = "AreaChart";
     ChartTypes[ChartTypes["LineChart"] = 1] = "LineChart";
     ChartTypes[ChartTypes["VerticalBarChart"] = 2] = "VerticalBarChart";
@@ -20,19 +19,21 @@ export var ChartTypes;
     ChartTypes[ChartTypes["HeatMapChart"] = 5] = "HeatMapChart";
     ChartTypes[ChartTypes["HorizontalBarChartWithAxis"] = 6] = "HorizontalBarChartWithAxis";
     ChartTypes[ChartTypes["ScatterChart"] = 7] = "ScatterChart";
-})(ChartTypes || (ChartTypes = {}));
-export var XAxisTypes;
-(function(XAxisTypes) {
+    ChartTypes[ChartTypes["GanttChart"] = 8] = "GanttChart";
+    return ChartTypes;
+}({});
+export var XAxisTypes = /*#__PURE__*/ function(XAxisTypes) {
     XAxisTypes[XAxisTypes["NumericAxis"] = 0] = "NumericAxis";
     XAxisTypes[XAxisTypes["DateAxis"] = 1] = "DateAxis";
     XAxisTypes[XAxisTypes["StringAxis"] = 2] = "StringAxis";
-})(XAxisTypes || (XAxisTypes = {}));
-export var YAxisType;
-(function(YAxisType) {
+    return XAxisTypes;
+}({});
+export var YAxisType = /*#__PURE__*/ function(YAxisType) {
     YAxisType[YAxisType["NumericAxis"] = 0] = "NumericAxis";
     YAxisType[YAxisType["DateAxis"] = 1] = "DateAxis";
     YAxisType[YAxisType["StringAxis"] = 2] = "StringAxis";
-})(YAxisType || (YAxisType = {}));
+    return YAxisType;
+}({});
 function yAxisTickFormatterInternal(value, limitWidth = false) {
     // Use SI format prefix with 2 decimal places without insignificant trailing zeros
     let formatter = d3FormatPrefix('.2~', value);
@@ -85,7 +86,10 @@ function yAxisTickFormatterInternal(value, limitWidth = false) {
         tickCount = Math.min(Math.max(1, Math.floor(Math.abs(end - start) / longestLabelWidth)), 10);
     }
     const xAxis = d3AxisBottom(xAxisScale).tickSize(xAxistickSize).tickPadding(tickPadding).ticks(tickCount).tickFormat(tickFormat);
-    if (chartType === 6) {
+    if ([
+        6,
+        8
+    ].includes(chartType)) {
         xAxis.tickSizeInner(-(xAxisParams.containerHeight - xAxisParams.margins.top));
     }
     if (tickParams.tickValues) {
@@ -239,7 +243,7 @@ function yAxisTickFormatterInternal(value, limitWidth = false) {
     const formatter = timeFormat(MULTI_LEVEL_DATE_TIME_FORMATS[startLevel][endLevel]);
     return formatter;
 }
-function getDateFormatLevel(date, useUTC) {
+export function getDateFormatLevel(date, useUTC) {
     const timeSecond = useUTC ? d3UtcSecond : d3TimeSecond;
     const timeMinute = useUTC ? d3UtcMinute : d3TimeMinute;
     const timeHour = useUTC ? d3UtcHour : d3TimeHour;
@@ -290,7 +294,7 @@ function getDateFormatLevel(date, useUTC) {
  * @export
  * @param {IXAxisParams} xAxisParams
  * @param {ITickParams} tickParams
- */ export function createDateXAxis(xAxisParams, tickParams, culture, options, timeFormatLocale, customDateTimeFormatter, useUTC) {
+ */ export function createDateXAxis(xAxisParams, tickParams, culture, options, timeFormatLocale, customDateTimeFormatter, useUTC, chartType) {
     const { domainNRangeValues, xAxisElement, tickPadding = 6, xAxistickSize = 6, xAxisCount } = xAxisParams;
     const isUtcSet = useUTC === true || useUTC === 'utc';
     const xAxisScale = isUtcSet ? d3ScaleUtc() : d3ScaleTime();
@@ -337,6 +341,11 @@ function getDateFormatLevel(date, useUTC) {
     const maxPossibleTickCount = Math.min(Math.max(1, Math.floor(Math.abs(end - start) / longestLabelWidth)), 10);
     tickCount = Math.min(maxPossibleTickCount, xAxisCount !== null && xAxisCount !== void 0 ? xAxisCount : tickCount);
     const xAxis = d3AxisBottom(xAxisScale).tickSize(xAxistickSize).tickPadding(tickPadding).ticks(tickCount).tickFormat(tickFormat);
+    if ([
+        8
+    ].includes(chartType)) {
+        xAxis.tickSizeInner(-(xAxisParams.containerHeight - xAxisParams.margins.top));
+    }
     tickParams.tickValues ? xAxis.tickValues(tickParams.tickValues) : '';
     if (xAxisElement) {
         d3Select(xAxisElement).call(xAxis).selectAll('text').attr('aria-hidden', 'true');
@@ -1182,7 +1191,7 @@ export function tooltipOfAxislabels(axistooltipProps) {
     };
 }
 /**
- * Fins the min and max values of the vertical bar chart y axis data point.
+ * Finds the min and max values of the vertical bar chart y axis data point.
  * @export
  * @param {VerticalBarChartDataPoint[]} points
  * @returns {{ startValue: number; endValue: number }}
@@ -1204,9 +1213,9 @@ export function tooltipOfAxislabels(axistooltipProps) {
     };
 }
 /**
- * Fins the min and max values of the vertical bar chart y axis data point.
+ * Finds the min and max values of the horizontal bar chart y axis data point.
  * @export
- * @param {VerticalBarChartDataPoint[]} points
+ * @param {HorizontalBarChartWithAxisDataPoint[]|GanttChartDataPoint[]} points
  * @returns {{ startValue: number; endValue: number }}
  */ export function findHBCWANumericMinMaxOfY(points, yAxisType) {
     if (yAxisType !== undefined && yAxisType === 0) {
@@ -1248,8 +1257,10 @@ export function tooltipOfAxislabels(axistooltipProps) {
         }
     }
 };
-export var Points;
-(function(Points) {
+/**
+ * we need to make sure that if we add any property to this, then
+ * we need to also add that in  pointTypes below and vise-versa
+ */ export var Points = /*#__PURE__*/ function(Points) {
     Points[Points["circle"] = 0] = "circle";
     Points[Points["square"] = 1] = "square";
     Points[Points["triangle"] = 2] = "triangle";
@@ -1258,11 +1269,12 @@ export var Points;
     Points[Points["hexagon"] = 5] = "hexagon";
     Points[Points["pentagon"] = 6] = "pentagon";
     Points[Points["octagon"] = 7] = "octagon";
-})(Points || (Points = {}));
-export var CustomPoints;
-(function(CustomPoints) {
+    return Points;
+}({});
+export var CustomPoints = /*#__PURE__*/ function(CustomPoints) {
     CustomPoints[CustomPoints["dottedLine"] = 0] = "dottedLine";
-})(CustomPoints || (CustomPoints = {}));
+    return CustomPoints;
+}({});
 /**
  * we need to make sure that if we add any property to this, then
  * we need to also add that in enum Point and vise-versa
@@ -1369,14 +1381,14 @@ export function formatScientificLimitWidth(value) {
 }
 const DEFAULT_BAR_WIDTH = 16;
 const MIN_BAR_WIDTH = 1;
-export const getBarWidth = (barWidthProp, maxBarWidthProp, adjustedValue = DEFAULT_BAR_WIDTH)=>{
+export const getBarWidth = (barWidthProp, maxBarWidthProp, adjustedValue = DEFAULT_BAR_WIDTH, modeProp)=>{
     let barWidth;
-    if (typeof barWidthProp === 'number') {
+    if (barWidthProp === 'auto' || modeProp === 'histogram') {
+        barWidth = adjustedValue;
+    } else if (typeof barWidthProp === 'number') {
         barWidth = barWidthProp;
-    } else if (barWidthProp === 'default' || typeof barWidthProp === 'undefined') {
-        barWidth = Math.min(adjustedValue, DEFAULT_BAR_WIDTH);
     } else {
-        barWidth = adjustedValue;
+        barWidth = Math.min(adjustedValue, DEFAULT_BAR_WIDTH);
     }
     if (typeof maxBarWidthProp === 'number') {
         barWidth = Math.min(barWidth, maxBarWidthProp);
@@ -1481,3 +1493,104 @@ export const truncateString = (str, maxLength, ellipsis = '...')=>{
     }
     return str.slice(0, maxLength) + ellipsis;
 };
+const categoryOrderRegex = /(category|total|sum|min|max|mean|median) (ascending|descending)/;
+/**
+ * @see {@link https://github.com/plotly/plotly.js/blob/master/src/plots/plots.js#L3041}
+ */ export const sortAxisCategories = (categoryToValues, categoryOrder)=>{
+    if (Array.isArray(categoryOrder)) {
+        const result = [];
+        const seen = new Set();
+        // Add elements from categoryOrder array that are in categoryToValues, in the array's order
+        categoryOrder.forEach((category)=>{
+            if (categoryToValues[category] && !seen.has(category)) {
+                result.push(category);
+                seen.add(category);
+            }
+        });
+        // Append any keys from categoryToValues not already in result
+        Object.keys(categoryToValues).forEach((category)=>{
+            if (!seen.has(category)) {
+                result.push(category);
+            }
+        });
+        return result;
+    }
+    const match = categoryOrder === null || categoryOrder === void 0 ? void 0 : categoryOrder.match(categoryOrderRegex);
+    if (match) {
+        const aggregator = match[1];
+        const order = match[2];
+        if (aggregator === 'category') {
+            const result = Object.keys(categoryToValues).sort();
+            return order === 'descending' ? result.reverse() : result;
+        }
+        const aggFn = {
+            min: d3Min,
+            max: d3Max,
+            sum: d3Sum,
+            total: d3Sum,
+            mean: d3Mean,
+            median: d3Median
+        };
+        const sortAscending = (a, b)=>{
+            return a[1] - b[1];
+        };
+        const sortDescending = (a, b)=>{
+            return b[1] - a[1];
+        };
+        const categoriesAggregatedValue = [];
+        Object.keys(categoryToValues).forEach((category)=>{
+            categoriesAggregatedValue.push([
+                category,
+                aggFn[aggregator](categoryToValues[category]) || 0
+            ]);
+        });
+        categoriesAggregatedValue.sort(order === 'descending' ? sortDescending : sortAscending);
+        return categoriesAggregatedValue.map(([category])=>category);
+    }
+    return Object.keys(categoryToValues);
+};
+export function copyStyle(properties, fromEl, toEl) {
+    const styles = getComputedStyle(fromEl);
+    if (Array.isArray(properties)) {
+        properties.forEach((prop)=>{
+            d3Select(toEl).style(prop, styles.getPropertyValue(prop));
+        });
+    } else {
+        Object.entries(properties).forEach(([fromProp, toProp])=>{
+            d3Select(toEl).style(toProp, styles.getPropertyValue(fromProp));
+        });
+    }
+}
+let measurementSpanCounter = 0;
+function getUniqueMeasurementSpanId() {
+    measurementSpanCounter++;
+    return `measurement_span_${measurementSpanCounter}`;
+}
+const MEASUREMENT_SPAN_STYLE = {
+    position: 'absolute',
+    visibility: 'hidden',
+    top: '-20000px',
+    left: 0,
+    padding: 0,
+    margin: 0,
+    border: 'none',
+    whiteSpace: 'pre'
+};
+export const createMeasurementSpan = (text, className, parentElement)=>{
+    const MEASUREMENT_SPAN_ID = getUniqueMeasurementSpanId();
+    let measurementSpan = document.getElementById(MEASUREMENT_SPAN_ID);
+    if (!measurementSpan) {
+        measurementSpan = document.createElement('span');
+        measurementSpan.setAttribute('id', MEASUREMENT_SPAN_ID);
+        measurementSpan.setAttribute('aria-hidden', 'true');
+        if (parentElement) {
+            parentElement.appendChild(measurementSpan);
+        } else {
+            document.body.appendChild(measurementSpan);
+        }
+    }
+    measurementSpan.setAttribute('class', className);
+    Object.assign(measurementSpan.style, MEASUREMENT_SPAN_STYLE);
+    measurementSpan.textContent = `${text}`;
+    return measurementSpan;
+};