@scality/core-ui 0.115.0

package/dist/components/linetemporalchart/ChartUtil.js

@@ -0,0 +1,126 @@
+import './LineTemporalChart.component';
+import { NAN_STRING } from '../constants';
+//Given a field containing dots ".", vega is interpreting this as an accessor
+//for nested objects, breaking then the internal mechnism to retrieve tooltip
+//data from the mouse position. We are fixing it by replacing the dots by a
+//well-known string that we expect no one would use to label a serie.
+export function normlizeVegaFieldName(fieldName) {
+    return fieldName.replace(/(\.)/g, 'VEGADOESNTSUPPORTDOTINFIELDNAME');
+}
+export function convert2VegaData(addedMissingDataPointSeries) {
+    const flatArr = [];
+    addedMissingDataPointSeries.forEach((line) => {
+        line.data.forEach((datum) => {
+            const obj = {
+                timestamp: datum[0] * 1000,
+                // convert to million second
+                label: normlizeVegaFieldName(line.getTooltipLabel(line.metricPrefix, line.resource)),
+                resource: line.resource,
+                value: datum[1] && datum[1] !== NAN_STRING ? Number(datum[1]) : NAN_STRING,
+                isNegativeValue: line.metricPrefix === 'read' || line.metricPrefix === 'out',
+                isDashed: line.isLineDashed || false,
+            };
+            flatArr.push(obj);
+        });
+    });
+    return flatArr;
+}
+// base on the current base value, convert the original vegadata to
+export function convertDataBaseValue(data, base) {
+    return data.map((datum) => {
+        return {
+            ...datum,
+            value: typeof datum.value === 'number'
+                ? getRelativeValue(datum.value, base)
+                : NAN_STRING,
+        };
+    });
+}
+/**
+ * Return the unit label base on the current dataset, and the valueBase which is used to convert the data
+ * @param {any} unitRange
+ * @param {any} maxValue the maximum value among the data set
+ * @returns {any}
+ */
+export function getUnitLabel(unitRange, maxValue) {
+    // first sort the unitRange
+    unitRange.sort((unitA, unitB) => {
+        return unitA.threshold - unitB.threshold;
+    });
+    let index = unitRange.findIndex((range) => range.threshold > maxValue);
+    // last unit
+    if (index === -1) {
+        index = unitRange.length;
+    }
+    if (index === 0) {
+        return {
+            valueBase: unitRange[index].threshold,
+            unitLabel: unitRange[index].label,
+        };
+    }
+    return {
+        valueBase: unitRange[index - 1].threshold,
+        unitLabel: unitRange[index - 1].label,
+    };
+}
+/**
+ * This function manually adds the missing data points with `null` value caused by downtime of the VMs
+ *
+ * @param {array} orginalValues - The array of the data points are already sorted according to the time series
+ * @param {number} startingTimeStamp - The starting timestamp in seconds
+ * @param {number} sampleDuration - The time span value in seconds
+ * @param {number} sampleFrequency - The time difference between two data points in seconds
+ *
+ */
+export function addMissingDataPoint(orginalValues, startingTimeStamp, sampleDuration, sampleFrequency) {
+    if (!orginalValues ||
+        startingTimeStamp === undefined ||
+        !sampleDuration ||
+        !sampleFrequency ||
+        startingTimeStamp < 0 ||
+        sampleDuration <= 0 ||
+        sampleFrequency <= 0) {
+        return [];
+    }
+    const newValues = [];
+    const numberOfDataPoints = sampleDuration / sampleFrequency + 1;
+    let samplingPointTime = startingTimeStamp;
+    // initialize the array with all "NAN" value, in order for the tooltip to display dash(-)
+    for (let i = 0; i < numberOfDataPoints; i++) {
+        newValues.push([samplingPointTime, NAN_STRING]);
+        samplingPointTime += sampleFrequency;
+    }
+    // copy the existing data points from `orginalValue` array to `newValues`
+    if (newValues.length === 0)
+        return [];
+    let nextIndex = 0;
+    for (let i = 0; i < newValues.length; i++) {
+        if (orginalValues[nextIndex] &&
+            newValues[i][0] === orginalValues[nextIndex][0]) {
+            newValues[i][1] = orginalValues[nextIndex][1];
+            nextIndex++;
+        }
+    }
+    return newValues;
+}
+// get the value for the based value
+// TODO: We need to handle the negative value in the future
+export const getRelativeValue = (value, base) => {
+    return value / (base || 1);
+};
+export const relativeDatumToOriginalDatum = (datum, base) => {
+    // $FlowFixMe
+    return Object.fromEntries(Object.entries(datum).map(([key, value]) => [
+        key,
+        getAbsoluteValue(value, base),
+    ]));
+};
+export const getAbsoluteValue = (relativeValue, base) => {
+    return relativeValue * (base || 1);
+};
+// extract the labels from getTooltipLabel function to define the domain in color
+export const getColorDomains = (series) => {
+    return series.map((serie) => {
+        return normlizeVegaFieldName(serie.getTooltipLabel(serie.metricPrefix, serie.resource));
+    });
+};

package/dist/components/linetemporalchart/LineTemporalChart.component.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+export declare const YAXIS_TITLE_READ_WRITE = "write(+) / read(-)";
+export declare const YAXIS_TITLE_IN_OUT = "in(+) / out(-)";
+export declare const UNIT_RANGE_BS: {
+    threshold: number;
+    label: string;
+}[];
+export type Serie = {
+    resource: string;
+    data: [number, string | null][];
+    getTooltipLabel: (metricPrefix?: string, resource?: string) => string;
+    getLegendLabel?: (metricPrefix?: string, resource?: string) => string;
+    color?: string;
+    metricPrefix?: string;
+    isLineDashed?: boolean;
+};
+export type LineChartProps = {
+    series: Serie[];
+    title: string;
+    height: number;
+    startingTimeStamp: number;
+    unitRange?: {
+        threshold: number;
+        label: string;
+    }[];
+    isLoading?: boolean;
+    isLegendHidden?: boolean;
+    yAxisType?: 'default' | 'percentage' | 'symmetrical';
+    yAxisTitle?: string;
+    helpText?: string | JSX.Element;
+    onHover?: (dataPoint: any) => void;
+    renderTooltipSerie?: (arg0: {
+        color?: string;
+        isLineDashed?: boolean;
+        name: string;
+        value: string;
+        key: string;
+        unitLabel: string;
+    }, tooltipData: any) => string;
+};
+declare function LineTemporalChart({ series, title, height, startingTimeStamp, unitRange, isLoading, isLegendHidden, yAxisType, yAxisTitle, helpText, renderTooltipSerie, onHover, ...rest }: LineChartProps): JSX.Element;
+export { LineTemporalChart };
+//# sourceMappingURL=LineTemporalChart.component.d.ts.map

package/dist/components/linetemporalchart/LineTemporalChart.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineTemporalChart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetemporalchart/LineTemporalChart.component.tsx"],"names":[],"mappings":";AAoCA,eAAO,MAAM,sBAAsB,uBAAuB,CAAC;AAC3D,eAAO,MAAM,kBAAkB,mBAAmB,CAAC;AACnD,eAAO,MAAM,aAAa;;;GAqBzB,CAAC;AA+BF,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,EAAE,MAAM,CAAC;IAEjB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAEhC,eAAe,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtE,cAAc,CAAC,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtE,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AACF,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,MAAM,CAAC;IAE1B,SAAS,CAAC,EAAE;QACV,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,aAAa,CAAC;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,KAAK,IAAI,CAAC;IACnC,kBAAkB,CAAC,EAAE,CACnB,IAAI,EAAE;QACJ,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,OAAO,CAAC;QACvB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,SAAS,EAAE,MAAM,CAAC;KACnB,EACD,WAAW,EAAE,GAAG,KACb,MAAM,CAAC;CACb,CAAC;AAkCF,iBAAS,iBAAiB,CAAC,EACzB,MAAM,EACN,KAAK,EACL,MAAM,EACN,iBAAiB,EACjB,SAAS,EACT,SAAiB,EACjB,cAAsB,EACtB,SAAqB,EACrB,UAAU,EACV,QAAQ,EACR,kBAAkB,EAClB,OAAO,EACP,GAAG,IAAI,EACR,EAAE,cAAc,eAqmBhB;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC"}