@scality/core-ui 0.186.0 → 0.188.0

package/dist/components/linetemporalchart/tooltip/index.js

@@ -1,104 +0,0 @@
-// @ts-nocheck
-import { stringify } from 'vega-lite';
-import { Handler } from 'vega-tooltip';
-import { isArray, isObject, isString } from 'vega-util';
-import { spacing } from '../../../style/theme';
-export function defaultRenderTooltipSerie({ color, isLineDashed, name, value, key, }) {
-    return `<tr>
-    <td class="color">
-    ${color !== undefined
-        ? `<span style='background: ${isLineDashed
-            ? `repeating-linear-gradient(to right,${color} 0,${color} ${spacing.sp1},transparent ${spacing.sp1},transparent ${spacing.sp2})`
-            : color};width: ${spacing.sp8};height:${spacing.sp2};display: inline-block;vertical-align: middle;'></span>`
-        : ''}
-    </td>
-    <td class="key" style="text-align: left;">
-        ${name}
-    </td>
-    <td class="value" style="text-align: right;">
-      ${value}
-    </td>
-  </tr>`;
-}
-export class TooltipHandlerWithPaint extends Handler {
-    constructor(options, onHover) {
-        super(options);
-        this.prevCall = this.call;
-        this.onHover = onHover;
-        this.call = this.newCall.bind(this);
-    }
-    newCall(handler, event, item, value) {
-        if (item &&
-            this.onHover &&
-            JSON.stringify(value) !== JSON.stringify(this.value)) {
-            this.onHover(item.datum.datum);
-        }
-        this.handler = handler;
-        this.event = event;
-        this.item = item;
-        this.value = value;
-        this.prevCall(handler, event, item, value);
-    }
-    paint() {
-        this.prevCall(this.handler, this.event, this.item, this.value);
-    }
-}
-/**
- * Format the value to be shown in the tooltip.
- *
- * @param value The value to show in the tooltip.
- * @param valueToHtml Function to convert a single cell value to an HTML string
- */
-export function formatValue(series, customizedColorRange, colorRange, unitLabel, yAxisType, renderTooltipSerie = defaultRenderTooltipSerie) {
-    return (value, valueToHtml, maxDepth) => {
-        if (isArray(value)) {
-            return `[${value
-                .map((v) => valueToHtml(isString(v) ? v : stringify(v, maxDepth)))
-                .join(', ')}]`;
-        }
-        if (isObject(value)) {
-            let content = '';
-            const { title, image, ...rest } = value;
-            if (title) {
-                content += `<h2 style="text-align: center;">${valueToHtml(title)}</h2>`;
-            }
-            if (image) {
-                content += `<img src="${valueToHtml(image)}">`;
-            }
-            const keys = Object.keys(rest);
-            if (keys.length > 0) {
-                content += '<table>';
-                for (const key of keys) {
-                    let val = rest[key];
-                    // ignore undefined properties
-                    if (val === undefined) {
-                        continue;
-                    }
-                    if (isObject(val)) {
-                        val = stringify(val, maxDepth);
-                    }
-                    const currentSerie = series.find((serie) => serie.getTooltipLabel(serie.metricPrefix, serie.resource) === key);
-                    const currentSerieIndex = series.findIndex((serie) => serie.getTooltipLabel(serie.metricPrefix, serie.resource) === key);
-                    const serieIndex = yAxisType === 'symmetrical' && !customizedColorRange.length // $FlowFixMe
-                        ? [...new Set(series.map((serie) => serie.resource))].findIndex((serieResource) => serieResource ===
-                            (currentSerie ? currentSerie.resource : null))
-                        : currentSerieIndex;
-                    const serieColorRange = customizedColorRange.length
-                        ? customizedColorRange
-                        : colorRange;
-                    content += renderTooltipSerie({
-                        key,
-                        color: serieIndex !== -1 ? serieColorRange[serieIndex] : undefined,
-                        isLineDashed: serieIndex !== -1 ? series[serieIndex].isLineDashed : undefined,
-                        name: valueToHtml(key),
-                        value: val !== 'NaN' ? `${valueToHtml(val)} ${unitLabel}` : '-',
-                        unitLabel,
-                    }, value);
-                }
-                content += `</table>`;
-            }
-            return content || '{}'; // show empty object if there are no properties
-        }
-        return valueToHtml(value);
-    };
-}

package/dist/components/linetimeseriechart/linetimeseriechart.component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"linetimeseriechart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,mBAAmB,EAGpB,MAAM,UAAU,CAAC;AAClB,OAAO,KAAiD,MAAM,OAAO,CAAC;AAiCtE,MAAM,MAAM,KAAK,GAAG;IAElB,QAAQ,EAAE,MAAM,CAAC;IAEjB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAEzC,eAAe,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtE,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,SAAS,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;IACrC,MAAM,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC;CAC7B,CAAC;AAGF,KAAK,qBAAqB,GAAG;IAC3B,SAAS,EAAE,aAAa,CAAC;IACzB,MAAM,EACF;QACE,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC;QAC3B,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC;KAC5B,GACD,SAAS,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,CACzB,wBAAwB,GACxB,qBAAqB,CACxB,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE;QACV,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,CACd,YAAY,EAAE,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,EACjD,SAAS,CAAC,EAAE,MAAM,EAClB,QAAQ,CAAC,EAAE,MAAM,KACd,KAAK,CAAC,SAAS,CAAC;CACtB,CAAC;AAiHF,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,KAAK,EACL,MAAM,EACN,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAiB,EACjB,UAAwB,EACxB,SAAqB,EACrB,UAAU,EACV,QAAQ,EACR,MAAM,EACN,aAAa,EACb,GAAG,IAAI,EACR,EAAE,cAAc,2CAgWhB"}

package/dist/components/linetimeseriechart/utils.d.ts

@@ -1,16 +0,0 @@
-export declare const ONE_YEAR_MILLISECONDS: number;
-export type ChartDataPoint = {
-    timestamp: number;
-} & Record<string, number | null>;
-/**
- * Formats timestamp for X-axis labels based on time format and data range:
- * For 'date-time' format, return day-month-abbreviated-hour-minute format
- * For 'date' format, return YYYY-MM-DD format if time range is greater than 1 year, otherwise return MM-DD format
- *
- * @param timestamp - The timestamp to format in milliseconds
- * @param timeFormat - The format type ('date-time' or 'date')
- * @param chartData - The chart data to determine time range for optimal formatting
- * @returns Formatted string for display on X-axis
- */
-export declare const formatXAxisLabel: (timestamp: number, duration: number) => string;
-//# sourceMappingURL=utils.d.ts.map

package/dist/components/linetimeseriechart/utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetimeseriechart/utils.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,qBAAqB,QAA4B,CAAC;AAE/D,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,EAAE,MAAM,CAAC;CACnB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC;AAElC;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB,cAChB,MAAM,YACP,MAAM,KACf,MAaF,CAAC"}

package/dist/components/sparkline/sparkline.component.d.ts

@@ -1,17 +0,0 @@
-type SparklineProps = {
-    serie: {
-        data: [number, number | null][];
-        color?: string;
-    };
-    startingTimeStamp: number;
-    sampleDuration: number;
-    sampleInterval: number;
-    yAxisType?: 'default' | 'percentage';
-};
-/**
- * Sparkline is a simple dynamically sized area chart.
- * Used to show trends in data over time.
- */
-export declare function Sparkline({ serie, startingTimeStamp, sampleDuration, sampleInterval, yAxisType }: SparklineProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=sparkline.component.d.ts.map

package/dist/components/sparkline/sparkline.component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"sparkline.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/sparkline/sparkline.component.tsx"],"names":[],"mappings":"AAMA,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE;QACL,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,GAAC,IAAI,CAAC,EAAE,CAAC;QAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,iBAAiB,EAAE,MAAM,CAAC;IAC1B,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;CACtC,CAAC;AAEF;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,EAAE,cAAc,2CAkChH"}

package/dist/components/vegachartv2/SyncedCursorCharts.d.ts

@@ -1,12 +0,0 @@
-export declare const SyncedCursorChartsContext: import("react").Context<{
-    cursorX: number;
-    setCursorX: (cursorX: number) => void;
-} | null>;
-export declare const useCursorX: () => {
-    cursorX: number;
-    setCursorX: (cursorX: number) => void;
-} | null;
-export declare function SyncedCursorCharts({ children }: {
-    children: JSX.Element;
-}): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=SyncedCursorCharts.d.ts.map

package/dist/components/vegachartv2/SyncedCursorCharts.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SyncedCursorCharts.d.ts","sourceRoot":"","sources":["../../../src/lib/components/vegachartv2/SyncedCursorCharts.tsx"],"names":[],"mappings":"AACA,eAAO,MAAM,yBAAyB;aAC3B,MAAM;gBACH,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI;SACxB,CAAC;AAChB,eAAO,MAAM,UAAU,QAAO;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,GAAG,IAQH,CAAC;AACF,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE,2CAUzE"}

package/dist/components/vegachartv2/SyncedCursorCharts.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, createContext, useContext, useMemo } from 'react';
-export const SyncedCursorChartsContext = createContext(null);
-export const useCursorX = () => {
-    const contextValue = useContext(SyncedCursorChartsContext);
-    if (contextValue === null) {
-        console.error("Can't use useCursorX() outside SyncedCursorCharts");
-    }
-    return contextValue;
-};
-export function SyncedCursorCharts({ children }) {
-    const [cursorX, setCursorX] = useState(0);
-    const contextValue = useMemo(() => ({ cursorX, setCursorX }), [cursorX]);
-    return (_jsx(SyncedCursorChartsContext.Provider, { value: contextValue, children: children }));
-}

package/dist/components/vegachartv2/VegaChartV2.component.d.ts

@@ -1,15 +0,0 @@
-import * as vega from 'vega';
-export declare const TOP = "top";
-export declare const BOTTOM = "bottom";
-type Position = typeof TOP | typeof BOTTOM;
-type Props = {
-    spec: Record<string, any>;
-    tooltipPosition?: Position;
-    theme?: 'light' | 'dark' | 'custom';
-    id?: string;
-    onHover?: (dataPoint: any) => void;
-    formatTooltip?: (value: any, valueToHtml: (value: any) => string, maxDepth: number) => string;
-};
-export declare const VegaChart: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<typeof vega.View>>;
-export {};
-//# sourceMappingURL=VegaChartV2.component.d.ts.map

package/dist/components/vegachartv2/VegaChartV2.component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"VegaChartV2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/vegachartv2/VegaChartV2.component.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,IAAI,MAAM,MAAM,CAAC;AAK7B,eAAO,MAAM,GAAG,QAAQ,CAAC;AACzB,eAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,KAAK,QAAQ,GAAG,OAAO,GAAG,GAAG,OAAO,MAAM,CAAC;AAC3C,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC1B,eAAe,CAAC,EAAE,QAAQ,CAAC;IAC3B,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IACpC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,KAAK,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,CACd,KAAK,EAAE,GAAG,EACV,WAAW,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,EACnC,QAAQ,EAAE,MAAM,KACb,MAAM,CAAC;CACb,CAAC;AA8PF,eAAO,MAAM,SAAS,oGAAgC,CAAC"}

package/dist/components/vegachartv2/VegaChartV2.component.js

@@ -1,218 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-nocheck
-import { useEffect, useRef, useLayoutEffect, useMemo, forwardRef } from 'react';
-import * as vega from 'vega';
-import vegaEmbed from 'vega-embed';
-import { createGlobalStyle, css, useTheme } from 'styled-components';
-import { useCursorX, SyncedCursorChartsContext } from './SyncedCursorCharts';
-import { TooltipHandlerWithPaint } from '../linetemporalchart/tooltip';
-export const TOP = 'top';
-export const BOTTOM = 'bottom';
-/* How to theme tooltip:
-https://github.com/vega/vega-tooltip/blob/master/docs/customizing_your_tooltip.md
-*/
-const VegaTooltipTheme = createGlobalStyle `
-  #vg-tooltip-element.vg-tooltip.custom-theme {
-    ${(props) => {
-    const { theme } = props;
-    return css `
-        padding: 8px;
-        position: fixed;
-        z-index: 1000;
-        width: calc(100vw / 6);
-        font-family: 'Lato';
-        font-size: 12px;
-        border-radius: 3px;
-        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
-        color: ${theme.textPrimary};
-        background-color: ${theme.backgroundLevel1};
-        border: 1px solid ${theme.border};
-        // customize the title
-        h2 {
-          color: ${theme.textPrimary};
-          margin-bottom: 10px;
-          font-size: 12px;
-        }
-        table {
-          width: 100%;
-        }
-        table tr td.key {
-          color: ${theme.textSecondary};
-        }
-      `;
-}}
-    
-  }
-`;
-function VegaChartInternal({ spec, tooltipPosition = BOTTOM, theme = 'custom', formatTooltip, onHover, }, ref) {
-    // $FlowFixMe
-    const { cursorX, setCursorX } = useCursorX();
-    const currentTheme = useTheme();
-    const themeConfig = {
-        config: {
-            background: 'transparent',
-            axis: {
-                labelColor: currentTheme.textSecondary,
-                titleColor: currentTheme.textSecondary,
-                grid: false,
-                domainColor: 'transparent',
-            },
-            title: {
-                color: currentTheme.textPrimary,
-                font: 'Lato',
-            },
-            view: {
-                stroke: currentTheme.border,
-                strokeWidth: 0.5,
-                fill: currentTheme.backgroundLevel1,
-            },
-            // the headers provide a title and labels for faceted plots.
-            header: {
-                labelColor: currentTheme.textPrimary,
-            },
-            // the label of max/min
-            text: {
-                color: currentTheme.textPrimary,
-                font: 'Lato',
-            },
-            legend: {
-                labelColor: currentTheme.textSecondary,
-            },
-        },
-    };
-    const themedSpec = { ...spec, ...themeConfig };
-    const vegaInstance = useRef();
-    const vegaDOMInstance = useRef(null);
-    let tooltipOptions = {
-        theme: theme,
-        formatTooltip: formatTooltip,
-    };
-    if (tooltipPosition === TOP) {
-        tooltipOptions = {
-            theme: theme,
-            offsetX: -85,
-            offsetY: -140,
-            formatTooltip: formatTooltip,
-        };
-    }
-    const tooltipHandler = useMemo(() => new TooltipHandlerWithPaint(tooltipOptions, onHover), [theme]);
-    /*
-    useEffect() and useEffectLayout():
-    The first effect will only render once, to initalize the chart and add the event lisener.
-     The second useEffectLayout is in charge of updating the chart when the `themedSpec` or `tooltipOptions` get updated.
-    Note it's important to useEffectLayout for the performance.
-     */
-    useEffect(() => {
-        let isMounted = true;
-        // embed(el, spec[, opt]) the el can be a DOM element or CSS selector. https://github.com/vega/vega-embed
-        vegaDOMInstance &&
-            vegaDOMInstance.current &&
-            vegaEmbed(vegaDOMInstance.current, themedSpec, {
-                renderer: 'svg',
-                // Override the DEFAULT_OPTIONS https://github.com/vega/vega-tooltip/blob/master/src/defaults.ts
-                tooltip: tooltipHandler.call,
-                /* Determines if action links
-              ("Export as PNG/SVG", "View Source", "View Vega" (only for Vega-Lite), "Open in Vega Editor") are included with the embedded view.
-              If the value is true, all action links will be shown and none if the value is false. */
-                actions: false,
-            })
-                .then((result) => {
-                vegaInstance.current = result;
-                // result.view contains the Vega view
-                // get the current state of view: result.view.getState()
-                const view = result.view;
-                if (ref) {
-                    ref.current = view;
-                }
-                if (SyncedCursorChartsContext && view) {
-                    view.addEventListener('mouseover', function (event, item) {
-                        const currentTime = item &&
-                            item.datum &&
-                            item.datum.datum &&
-                            item.datum.datum.timestamp;
-                        if (currentTime) {
-                            setCursorX(currentTime);
-                        }
-                    });
-                    /*When the mouse leaves the chart area, set the cursorX to null*/
-                    view.addEventListener('mouseleave', function (event, item) {
-                        setCursorX(0);
-                    });
-                }
-            })
-                .catch((...args) => {
-                if (isMounted) {
-                    console.error(...args); // TODO: we should handle this with a retry or an error state of the component
-                }
-            });
-        return () => {
-            isMounted = false;
-            if (vegaInstance.current) {
-                vegaInstance.current.view.finalize();
-            }
-        }; // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [vegaDOMInstance, currentTheme]);
-    useLayoutEffect(() => {
-        if (vegaInstance.current) {
-            const view = vegaInstance.current.view;
-            tooltipHandler.options.formatTooltip = formatTooltip;
-            tooltipHandler.onHover = onHover;
-            view.tooltip(tooltipHandler.call).run();
-            tooltipHandler.paint(); // to repaint the tooltip
-        }
-    }, [formatTooltip, vegaInstance, onHover]);
-    useLayoutEffect(() => {
-        if (vegaInstance.current) {
-            const view = vegaInstance.current.view;
-            let changeset = vega
-                .changeset()
-                .remove(() => true)
-                .insert(themedSpec.data.values);
-            //only the data.values changes trigger the graph's repaint
-            // For some reason source_0 is the default dataset name
-            view
-                .change('source_0', changeset)
-                .runAsync()
-                .then(() => {
-                // call resize() after the data is loaded to make sure the width is set correctly.
-                view.resize().runAsync();
-            });
-        } // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        // eslint-disable-next-line
-        JSON.stringify(themedSpec.data.values),
-        vegaInstance,
-    ]);
-    useLayoutEffect(() => {
-        if (vegaInstance.current && themedSpec.params) {
-            const view = vegaInstance.current.view;
-            // when the mouse go out, we trigger the event to set cursorX to null
-            if (!themedSpec.params.find((param) => param.name === 'cursorX').value ||
-                !cursorX) {
-                view
-                    .signal('cursorX', (themedSpec &&
-                    themedSpec.data &&
-                    themedSpec.data.values &&
-                    themedSpec.data.values[0] &&
-                    themedSpec.data.values[0].timestamp) ||
-                    Date.now())
-                    .run();
-                view.signal('isCursorDisplayed', false).run();
-            }
-            else {
-                view
-                    .signal('cursorX', themedSpec.params.find((param) => param.name === 'cursorX').value)
-                    .run();
-                view.signal('isCursorDisplayed', true).run();
-            }
-        } // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        // eslint-disable-next-line
-        JSON.stringify(themedSpec),
-        vegaInstance,
-    ]);
-    return (_jsx("div", { className: "sc-vegachart", ref: vegaDOMInstance, style: {
-            width: '100%',
-        }, children: _jsx(VegaTooltipTheme, {}) }));
-} // @ts-expect-error
-export const VegaChart = forwardRef(VegaChartInternal);

package/src/lib/components/barchart/BarChart.component.tsx

@@ -1,51 +0,0 @@
-import { VegaChart } from '../vegachartv2/VegaChartV2.component';
-type Props = {
-  id: string;
-  data: Array<Record<string, any>>;
-  xAxis: Record<string, any>;
-  yAxis: Record<string, any>;
-  color?: Record<string, any>;
-  height?: number;
-  barConfig?: Record<string, any>;
-};
-
-/**
- * @deprecated Use Barchart v2 instead
- * @example import { Barchart } from '@scality/core-ui/dist/next';
-
- */
-function BarChart({
-  id,
-  data,
-  xAxis,
-  yAxis,
-  color,
-  height = 200,
-  barConfig,
-}: Props) {
-  const spec = {
-    mark: {
-      type: 'bar',
-      ...barConfig,
-    },
-    width: 'container',
-    height,
-    data: {
-      values: data,
-    },
-    encoding: {
-      x: xAxis,
-      y: yAxis,
-      color,
-    },
-  };
-  return (
-    <VegaChart
-      key={`barchart-${id}-${data.length}`}
-      id={id}
-      spec={spec}
-    ></VegaChart>
-  );
-}
-
-export { BarChart };

package/src/lib/components/globalhealthbar/GlobalHealthBar.component.tsx

@@ -1,204 +0,0 @@
-// @ts-nocheck
-import { useMemo } from 'react';
-import { VegaChart } from '../vegachartv2/VegaChartV2.component';
-import { useTheme } from 'styled-components';
-import { formatValue } from './tooltip/index';
-export const TOP = 'top';
-export const BOTTOM = 'bottom';
-type Position = typeof TOP | typeof BOTTOM;
-export type GlobalHealthProps = {
-  id: string;
-  alerts: {
-    description: string;
-    startsAt: string;
-    endsAt: string;
-    severity: string;
-  }[];
-  start: string;
-  end: string;
-  height?: number;
-  tooltipPosition?: Position;
-};
-/**
- * @deprecated Use GlobalHealthBar v2 instead
- * @example import { GlobalHealthBar } from '@scality/core-ui/dist/next';
- */
-function GlobalHealthBar({
-  id,
-  alerts,
-  start,
-  end,
-  height = 8,
-  tooltipPosition = TOP,
-}: GlobalHealthProps) {
-  const theme = useTheme();
-  const trimAlerts = alerts.map((alert) => {
-    if (new Date(alert.startsAt) < new Date(start)) {
-      return { ...alert, startsAt: start };
-    }
-
-    return { ...alert };
-  });
-  trimAlerts.unshift({
-    startsAt: start,
-    endsAt: end,
-    severity: 'healthy',
-  });
-  const spec = {
-    width: 'container',
-    height,
-    data: {
-      values: trimAlerts,
-    },
-    transform: [
-      {
-        calculate:
-          "datum.description !== '' ? 'View details on alert page' : ''",
-        as: 'title',
-      },
-    ],
-    view: {
-      cornerRadius: 6,
-    },
-    config: {
-      style: {
-        cell: {
-          stroke: 'transparent',
-          strokeWidth: 0,
-        },
-      },
-    },
-    layer: [
-      // Paint the entire bar with green
-      {
-        mark: {
-          type: 'rect',
-          clip: true,
-        },
-        encoding: {
-          color: {
-            value: theme.statusHealthy,
-          },
-        },
-      }, // Paint the timespan as x-axis
-      {
-        mark: {
-          type: 'rect',
-          cursor: 'pointer',
-          clip: true,
-        },
-        encoding: {
-          x: {
-            field: 'startsAt',
-            type: 'temporal',
-            title: null,
-            stack: null,
-            axis: {
-              format: '%d%b %H:%M:%S',
-              ticks: true,
-              tickCount: 5,
-              //A desired number of ticks, for axes visualizing quantitative scales. The resulting number may be different so that values are “nice” (multiples of 2, 5, 10) and lie within the underlying scale’s range.
-              labelFlush: 20,
-              labelColor: theme.textSecondary,
-            },
-          },
-          x2: {
-            field: 'endsAt',
-          },
-          color: {
-            value: theme.statusHealthy,
-          },
-        },
-      },
-      {
-        mark: {
-          type: 'rect',
-          tooltip: true,
-          cursor: 'pointer',
-          clip: true,
-        },
-        params: [
-          {
-            name: 'highlight',
-            // The supported DOM event types for mark items are https://vega.github.io/vega/docs/event-streams/
-            select: {
-              type: 'point',
-              on: 'mouseover',
-              clear: 'mouseout',
-            },
-          },
-        ],
-        encoding: {
-          x: {
-            timeUnit: 'yearmonthdatehoursminutes',
-            field: 'startsAt',
-            type: 'temporal',
-            title: null,
-          },
-          x2: {
-            field: 'endsAt',
-          },
-          color: {
-            field: 'severity',
-            type: 'nominal',
-            title: 'null',
-            scale: {
-              domain: ['healthy', 'critical', 'unavailable', 'warning'],
-              range: [
-                theme.statusHealthy,
-                theme.statusCritical,
-                theme.textSecondary,
-                theme.statusWarning,
-              ],
-            },
-            legend: null,
-          },
-          tooltip: [
-            {
-              field: 'severity',
-              title: 'Severity',
-            },
-            {
-              field: 'startsAt',
-              title: 'Start',
-              type: 'temporal',
-              timeUnit: 'yearmonthdatehoursminutes',
-            },
-            {
-              field: 'endsAt',
-              title: 'End',
-              type: 'temporal',
-              timeUnit: 'yearmonthdatehoursminutes',
-            },
-            {
-              field: 'title',
-              title: 'title',
-            },
-            {
-              field: 'description',
-              title: 'Description',
-            },
-          ],
-          opacity: {
-            condition: {
-              param: 'highlight',
-              value: 1,
-            },
-            value: 0.6,
-          },
-        },
-      },
-    ],
-  };
-  return (
-    <VegaChart
-      className="sc-globalhealthbar"
-      spec={spec}
-      theme={'custom'}
-      tooltipPosition={tooltipPosition}
-      formatTooltip={useMemo(() => formatValue(), [])}
-    ></VegaChart>
-  );
-}
-
-export { GlobalHealthBar };