@scality/core-ui 0.186.0 → 0.187.0

package/src/lib/components/linetemporalchart/tooltip/index.ts

@@ -1,178 +0,0 @@
-// @ts-nocheck
-import { stringify } from 'vega-lite';
-import { Options } from 'vega-tooltip';
-import { Handler } from 'vega-tooltip';
-import { isArray, isObject, isString } from 'vega-util';
-import { spacing } from '../../../style/theme';
-import { Serie } from '../LineTemporalChart.component';
-export function defaultRenderTooltipSerie({
-  color,
-  isLineDashed,
-  name,
-  value,
-  key,
-}: {
-  color?: string;
-  isLineDashed?: boolean;
-  name: string;
-  value: string;
-  key: string;
-}) {
-  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?: Options, onHover?: (datum: any) => void) {
-    super(options);
-    this.prevCall = this.call;
-    this.onHover = onHover;
-    this.call = this.newCall.bind(this);
-  }
-
-  newCall(handler: any, event: MouseEvent, item: any, value: any) {
-    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: Serie[],
-  customizedColorRange: string[],
-  colorRange: string[],
-  unitLabel: string,
-  yAxisType?: 'default' | 'percentage' | 'symmetrical',
-  renderTooltipSerie: (
-    arg0: {
-      color?: string;
-      isLineDashed?: boolean;
-      name: string;
-      value: string;
-      key: string;
-      unitLabel: string;
-    },
-    tooltipData: any,
-  ) => string = defaultRenderTooltipSerie,
-) {
-  return (
-    value: any,
-    valueToHtml: (value: any) => string,
-    maxDepth: number,
-  ): string => {
-    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/src/lib/components/sparkline/sparkline.component.tsx

@@ -1,56 +0,0 @@
-import { useMemo } from "react";
-import { Area, AreaChart, CartesianGrid, ResponsiveContainer, YAxis } from "recharts";
-import { useTheme } from "styled-components";
-import { chartColors } from "../../style/theme";
-import { addMissingDataPoint } from "../linetemporalchart/ChartUtil";
-
-type SparklineProps = {
-  serie: {
-    data: [number, number|null][],
-    color?: string, // exa color code like '#ff0000'
-  },
-  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 function Sparkline({ serie, startingTimeStamp, sampleDuration, sampleInterval, yAxisType }: SparklineProps) {
-  const data = useMemo(
-    () => {
-      const dataMdp = addMissingDataPoint(serie.data, startingTimeStamp, sampleDuration, sampleInterval);
-      return dataMdp.map(([x, y]) => ({ x, y }));
-    },
-    [serie.data]
-  );
-  const color = serie.color ?? chartColors.lineColor1;
-  const strokeGridColor = useTheme().border;
-
-  return (
-    <ResponsiveContainer>
-      <AreaChart data={data}>
-        <defs>
-          <linearGradient id={`gradient-${color}`} x1="0" y1="0" x2="0" y2="1">
-            <stop offset="0%" stopColor={color} stopOpacity={0.7} />
-            <stop offset="100%" stopColor={color} stopOpacity={0.1} />
-          </linearGradient>
-        </defs>
-      <CartesianGrid horizontal={false} stroke={strokeGridColor} strokeOpacity={0.5} />
-      <Area
-        type="linear"
-        dataKey="y"
-        stroke={color}
-        fill={`url(#gradient-${color})`}
-        dot={false}
-        activeDot={false}
-        isAnimationActive={false}
-      />
-      {yAxisType === 'percentage' && <YAxis domain={[0, 100]} hide />}
-      </AreaChart>
-    </ResponsiveContainer>
-  );
-}

package/src/lib/components/vegachartv2/SyncedCursorCharts.tsx

@@ -1,28 +0,0 @@
-import { useState, createContext, useContext, useMemo, useCallback } from 'react';
-export const SyncedCursorChartsContext = createContext<{
-  cursorX: number;
-  setCursorX: (cursorX: number) => void;
-} | null>(null);
-export const useCursorX = (): {
-  cursorX: number;
-  setCursorX: (cursorX: number) => void;
-} | null => {
-  const contextValue = useContext(SyncedCursorChartsContext);
-
-  if (contextValue === null) {
-    console.error("Can't use useCursorX() outside SyncedCursorCharts");
-  }
-
-  return contextValue;
-};
-export function SyncedCursorCharts({ children }: { children: JSX.Element }) {
-  const [cursorX, setCursorX] = useState(0);
-
-  const contextValue = useMemo(() => ({cursorX, setCursorX}), [cursorX]);
-
-  return (
-    <SyncedCursorChartsContext.Provider value={contextValue}>
-      {children}
-    </SyncedCursorChartsContext.Provider>
-  );
-}

package/src/lib/components/vegachartv2/VegaChartV2.component.tsx

@@ -1,276 +0,0 @@
-// @ts-nocheck
-import { useEffect, useRef, useLayoutEffect, useMemo, forwardRef } from 'react';
-import * as vega from 'vega';
-import vegaEmbed, { Result } 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';
-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;
-};
-
-/* 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,
-  }: Props,
-  ref?: {
-    current: typeof vega.View | null;
-  },
-) {
-  // $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<Result>();
-  const vegaDOMInstance = useRef<HTMLDivElement | null>(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 (
-    <div
-      className="sc-vegachart"
-      ref={vegaDOMInstance}
-      style={{
-        width: '100%',
-      }}
-    >
-      <VegaTooltipTheme />
-    </div>
-  );
-} // @ts-expect-error
-
-export const VegaChart = forwardRef(VegaChartInternal);

package/stories/barchart.stories.tsx

@@ -1,142 +0,0 @@
-import React from 'react';
-import { BarChart } from '../src/lib/components/barchart/BarChart.component';
-import { Wrapper } from './common';
-import {
-  verticalStackedData,
-  horizontalStackedData,
-  barchartData,
-} from './data/barchart';
-import { SyncedCursorCharts } from '../src/lib/components/vegachartv2/SyncedCursorCharts';
-
-import { Component } from '@storybook/blocks';
-
-const width = 800;
-// the size control the size of each small item of the bar
-
-const barConfig = {
-  cornerRadius: 8,
-  size: 12,
-};
-// props for vertical stacked bar chart
-const idVerticalStacked = 'vis_vertical_stacked';
-
-// props for vertical stacked bar chart
-
-const verticalStackedBarChartArgs = {
-  id: 'vis_vertical_stacked',
-  xAxis: {
-    field: 'xlabel',
-    type: 'ordinal',
-    title: null,
-    axis: {
-      labelAngle: 0,
-    },
-    sort: {
-      order: 'ascending',
-    },
-  },
-  yAxis: {
-    aggregate: 'count',
-    field: '*',
-    title: null,
-    type: 'quantitative',
-    scale: {
-      padding: 1,
-    },
-  },
-  color: {
-    field: 'status',
-    type: 'nominal',
-    legend: {
-      direction: 'horizontal',
-      orient: 'top',
-      title: null,
-      symbolType: 'circle',
-      columnPadding: 50,
-    },
-    scale: {
-      domain: ['2XX', '401', '404', '4XX', '503', '5XX'],
-      range: ['#4BE4E2', '#E45834', '#FEFA52', '#968BFF', '#BE2543', '#DC90F1'],
-    },
-  },
-  data: verticalStackedData,
-  barConfig,
-};
-
-// props for horizontal stacked bar chart
-const horizontalStackedChartArgs = {
-  id: 'vis_horizontal_stacked',
-  xAxis: {
-    aggregate: 'sum',
-    field: 'yield',
-    type: 'quantitative',
-  },
-  yAxis: {
-    field: 'variety',
-    type: 'nominal',
-  },
-  color: {
-    field: 'site',
-    type: 'nominal',
-  },
-  data: horizontalStackedData,
-};
-
-// props for vertical bar chart props
-const verticalBarChartArgs = {
-  id: 'vis_vertical',
-  xAxis: {
-    field: 'a',
-    type: 'ordinal',
-  },
-  yAxis: {
-    field: 'b',
-    type: 'quantitative',
-  },
-  data: barchartData,
-};
-
-//props for horizontal bar chart
-const horizontalBarChartArgs = {
-  id: 'vis_horizontal',
-  xAxis: {
-    field: 'b',
-    type: 'quantitative',
-  },
-  yAxis: {
-    field: 'a',
-    type: 'ordinal',
-  },
-  data: barchartData,
-};
-
-export default {
-  title: 'Components/Deprecated/Charts/BarChart',
-  component: BarChart,
-  decorators: [
-    (story: Component) => <SyncedCursorCharts>{story()}</SyncedCursorCharts>,
-  ],
-  argTypes: {
-    data: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-};
-
-export const verticalStackedChart = {
-  args: { ...verticalStackedBarChartArgs },
-};
-
-export const horizontalStackedchart = {
-  args: { ...horizontalStackedChartArgs },
-};
-
-export const verticalBarChart = {
-  args: { ...verticalBarChartArgs },
-};
-
-export const horizontalBarChart = {
-  args: { ...horizontalBarChartArgs },
-};