@scality/core-ui 0.115.0

package/src/lib/components/tooltip/Tooltip.component.tsx

@@ -0,0 +1,136 @@
+import { computePosition, flip, offset, shift } from '@floating-ui/dom';
+import { CSSProperties, useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { spacing } from '../../spacing';
+import { fontSize, zIndex } from '../../style/theme';
+import { getThemePropSelector } from '../../utils';
+export const TOP = 'top';
+export const BOTTOM = 'bottom';
+export const LEFT = 'left';
+export const TOPSTART = 'top-start';
+export const TOPEND = 'top-end';
+export const RIGHT = 'right';
+export const RIGHTSTART = 'right-start';
+export const RIGHTEND = 'right-end';
+export const BOTTOMEND = 'bottom-end';
+export const BOTTOMSTART = 'bottom-start';
+export const LEFTSTART = 'left-start';
+export const LEFTEND = 'left-end';
+export type Position =
+  | typeof TOP
+  | typeof BOTTOM
+  | typeof LEFT
+  | typeof RIGHT
+  | typeof TOPSTART
+  | typeof TOPEND
+  | typeof RIGHTSTART
+  | typeof RIGHTEND
+  | typeof BOTTOMEND
+  | typeof BOTTOMSTART
+  | typeof LEFTEND
+  | typeof LEFTSTART;
+export type Props = {
+  placement?: Position;
+  overlayStyle?: CSSProperties;
+  overlay?: React.ReactNode;
+  children?: React.ReactNode;
+};
+const TooltipContainer = styled.div`
+  position: relative;
+  display: inline-block;
+`;
+const TooltipOverLayContainer = styled.div<{
+  placement: Position;
+  style?: CSSProperties;
+}>`
+  display: inline-block;
+  opacity: 0;
+  position: fixed;
+  width: max-content;
+  border: 1px solid ${getThemePropSelector('border')};
+  background-color: ${(props) =>
+    (props && props.style && props.style.backgroundColor) ||
+    props.theme.backgroundLevel1};
+  color: ${(props) =>
+    (props && props.style && props.style.color) || props.theme.textPrimary};
+  z-index: ${zIndex.tooltip};
+  border-radius: 4px;
+  font-size: ${(props) =>
+    (props && props.style && props.style.fontSize) || fontSize.small};
+  vertical-align: middle;
+  padding: ${spacing.r4} ${spacing.r8};
+  max-width: 40rem;
+`;
+
+const TooltipText = styled.div`
+  width: 100%;
+  ul,
+  ol {
+    padding-inline-start: ${spacing.r16};
+    margin-block-start: 0;
+    margin-block-end: 0;
+  }
+  li {
+    margin-bottom: ${spacing.r8};
+  }
+  li:last-child {
+    margin-bottom: 0;
+  }
+`;
+
+function Tooltip({
+  placement = TOP,
+  overlayStyle,
+  children,
+  overlay,
+  ...rest
+}: Props) {
+  const childrenRef = useRef<HTMLDivElement | null>(null);
+  const tooltipRef = useRef<HTMLDivElement | null>(null);
+
+  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+  useEffect(() => {
+    if (childrenRef.current && tooltipRef.current) {
+      computePosition(childrenRef.current, tooltipRef.current, {
+        placement,
+        middleware: [offset(5), shift(), flip()],
+      }).then(({ x, y }) => {
+        if (tooltipRef.current) {
+          Object.assign(tooltipRef.current.style, {
+            opacity: '1',
+            // we set opacity to 1 to make sure the tooltip is not displayed before the position is computed
+            left: `${x}px`,
+            top: `${y}px`,
+          });
+        }
+      });
+    }
+  }, [tooltipRef.current, childrenRef.current, isTooltipVisible]);
+  return (
+    <TooltipContainer
+      className="sc-tooltip"
+      onPointerEnter={() => {
+        setIsTooltipVisible(true);
+      }}
+      onPointerLeave={() => {
+        setIsTooltipVisible(false);
+      }}
+    >
+      {isTooltipVisible && overlay ? (
+        <TooltipOverLayContainer
+          ref={tooltipRef}
+          className="sc-tooltip-overlay"
+          placement={placement}
+          style={overlayStyle}
+        >
+          <TooltipText className="sc-tooltip-overlay-text">
+            {overlay}
+          </TooltipText>
+        </TooltipOverLayContainer>
+      ) : null}
+      <div ref={childrenRef}>{children}</div>
+    </TooltipContainer>
+  );
+}
+
+export { Tooltip };

package/src/lib/components/vegachart/VegaChart.component.tsx

@@ -0,0 +1,146 @@
+// @ts-nocheck
+import { useEffect, useContext, useRef } from 'react';
+import vegaEmbed, { Result } from 'vega-embed';
+import { ThemeContext, createGlobalStyle } from 'styled-components';
+import { getThemePropSelector } from '../../utils';
+export const TOP = 'top';
+export const BOTTOM = 'bottom';
+type Position = typeof TOP | typeof BOTTOM;
+type Props = {
+  id: string;
+  spec: Record<string, any>;
+  tooltipPosition?: Position;
+  theme?: 'light' | 'dark' | 'custom';
+  className?: 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 {
+    padding: 8px;
+    position: fixed;
+    z-index: 1000;
+    font-family: 'Lato';
+    font-size: 12px;
+    border-radius: 3px;
+    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+    color: ${getThemePropSelector('textPrimary')};
+    background-color: ${getThemePropSelector('backgroundLevel1')};
+    border: 1px solid ${getThemePropSelector('border')};
+    // customize the title
+    h2 {
+      color: ${getThemePropSelector('textSecondary')};
+      margin-bottom: 10px;
+      font-size: 12px;
+    }
+  }
+`;
+
+function VegaChart({
+  id,
+  spec,
+  tooltipPosition = BOTTOM,
+  theme = 'custom',
+}: Props) {
+  const themeContext = useContext(ThemeContext);
+  const currentBackgroundColor =
+    themeContext && themeContext.brand
+      ? themeContext.brand.backgroundLevel4
+      : themeContext.backgroundLevel4;
+  // the background color of the view
+  const currentBackgroundColor2 =
+    themeContext && themeContext.brand
+      ? themeContext.brand.backgroundLevel1
+      : themeContext.backgroundLevel1;
+  const brandText =
+    themeContext && themeContext.brand
+      ? themeContext.brand.textPrimary
+      : themeContext.textPrimary;
+  const themeConfig = {
+    config: {
+      background: currentBackgroundColor,
+      axis: {
+        labelColor: brandText,
+        titleColor: brandText,
+        grid: false,
+        domainColor: currentBackgroundColor2,
+      },
+      title: {
+        color: brandText,
+        font: 'Lato',
+      },
+      view: {
+        stroke: 'transparent',
+        fill: currentBackgroundColor2,
+      },
+      // the headers provide a title and labels for faceted plots.
+      header: {
+        labelColor: brandText,
+      },
+      // the label of max/min
+      text: {
+        color: brandText,
+        font: 'Lato',
+      },
+      // the up, bottom trend line and verticle line when hover
+      rule: {
+        color: brandText,
+      },
+      legend: {
+        labelColor: brandText,
+        titleColor: brandText,
+      },
+    },
+  };
+  const themedSpec = { ...spec, ...themeConfig };
+  const vegaInstance = useRef<Result>();
+  let tooltipOptions = {
+    theme: theme,
+  };
+
+  if (tooltipPosition === TOP) {
+    tooltipOptions = {
+      theme: theme,
+      offsetX: -85,
+      offsetY: -140,
+    };
+  }
+
+  useEffect(() => {
+    let isMounted = true;
+    vegaEmbed(`#${id}`, themedSpec, {
+      renderer: 'svg',
+      // Override the DEFAULT_OPTIONS https://github.com/vega/vega-tooltip/blob/master/src/defaults.ts
+      tooltip: tooltipOptions,
+
+      /* 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
+      })
+      .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();
+      }
+    };
+  }, [id, themedSpec, tooltipOptions, vegaInstance]);
+  return (
+    <div id={id} className="sc-vegachart">
+      <VegaTooltipTheme />
+    </div>
+  );
+}
+
+export { VegaChart };

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

@@ -0,0 +1,30 @@
+import React, { useState, createContext, useContext } 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);
+  return (
+    <SyncedCursorChartsContext.Provider
+      value={{
+        cursorX,
+        setCursorX,
+      }}
+    >
+      {children}
+    </SyncedCursorChartsContext.Provider>
+  );
+}

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

@@ -0,0 +1,279 @@
+// @ts-nocheck
+import React, {
+  useEffect,
+  useContext,
+  useRef,
+  useLayoutEffect,
+  useMemo,
+} from 'react';
+import * as vega from 'vega';
+import vegaEmbed, { Result } from 'vega-embed';
+import { ThemeContext, createGlobalStyle } from 'styled-components';
+import { getThemePropSelector } from '../../utils';
+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 {
+    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: ${getThemePropSelector('textPrimary')};
+    background-color: ${getThemePropSelector('backgroundLevel1')};
+    border: 1px solid ${getThemePropSelector('border')};
+    // customize the title
+    h2 {
+      color: ${getThemePropSelector('textPrimary')};
+      margin-bottom: 10px;
+      font-size: 12px;
+    }
+    table {
+      width: 100%;
+    }
+    table tr td.key {
+      color: ${getThemePropSelector('textSecondary')};
+    }
+  }
+`;
+
+function VegaChartInternal(
+  {
+    spec,
+    tooltipPosition = BOTTOM,
+    theme = 'custom',
+    formatTooltip,
+    onHover,
+  }: Props,
+  ref?: {
+    current: typeof vega.View | null;
+  },
+) {
+  // $FlowFixMe
+  const { cursorX, setCursorX } = useCursorX();
+  const themeContext = useContext(ThemeContext);
+  // the background color of the view
+  const seriesBackgroundColor =
+    themeContext && themeContext.brand
+      ? themeContext.brand.backgroundLevel1
+      : themeContext.backgroundLevel1;
+  const brandText =
+    themeContext && themeContext.brand
+      ? themeContext.brand.textPrimary
+      : themeContext.textPrimary;
+  const themeConfig = {
+    config: {
+      background: 'transparent',
+      axis: {
+        labelColor: brandText,
+        titleColor: brandText,
+        grid: false,
+        domainColor: 'transparent',
+      },
+      title: {
+        color: brandText,
+        font: 'Lato',
+      },
+      view: {
+        stroke: 'transparent',
+        fill: seriesBackgroundColor,
+      },
+      // the headers provide a title and labels for faceted plots.
+      header: {
+        labelColor: brandText,
+      },
+      // the label of max/min
+      text: {
+        color: brandText,
+        font: 'Lato',
+      },
+    },
+  };
+  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]);
+  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 = React.forwardRef(VegaChartInternal);

package/src/lib/hooks.ts

@@ -0,0 +1,26 @@
+import { useEffect, useRef } from 'react';
+
+export function useMemoCompare<T>(
+  next: T,
+  compare: (previous: T | null, next: T) => boolean,
+) {
+  // Ref for storing previous value
+  const previousRef = useRef<T | null>(null);
+  const previous = previousRef.current;
+
+  // Pass previous and next value to compare function
+  // to determine whether to consider them equal.
+  const isEqual = compare(previous, next);
+
+  // If not equal update previousRef to next value.
+  // We only update if not equal so that this hook continues to return
+  // the same old value if compare keeps returning true.
+  useEffect(() => {
+    if (!isEqual) {
+      previousRef.current = next;
+    }
+  });
+
+  // Finally, if equal then return the previous value
+  return isEqual ? previous : next;
+}

package/src/lib/icons/branding.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+const Logo = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="186"
+    height="49"
+    viewBox="0 0 186 49"
+  >
+    <path
+      fill="#fff"
+      d="M72.23 18.19c0-2.03-1.18-3.18-4.53-3.18-3.35 0-4.53 1.15-4.53 3.18v.71c0 1.68 1.09 2.21 1.9 2.47l6.98 2.57c2.27.88 4.17 2.29 4.17 5.04v3.09c0 3.09-2.27 5.75-8.61 5.75-6.43 0-8.61-2.66-8.61-5.75v-2.03c0-.53.27-.71.82-.71h2.26c.45 0 .64.18.64.71v1.68c0 2.03 1.45 3.18 4.89 3.18 3.44 0 4.89-1.15 4.89-3.18v-1.77c0-1.86-1.72-2.48-3.17-3.1l-6.43-2.38a4.98 4.98 0 0 1-3.36-4.6v-2.12c0-3.1 2-5.75 8.16-5.75 6.25 0 8.25 2.65 8.25 5.75v1.68c0 .44-.18.7-.64.7h-2.26c-.55 0-.82-.17-.82-.7zM97.04 32.16c0 3.09-1.91 5.75-8.52 5.75-6.62 0-8.52-2.66-8.52-5.75V17.75c0-3.1 1.9-5.75 8.52-5.75 6.61 0 8.52 2.65 8.52 5.75v1.85c0 .53-.18.71-.73.71h-2.17c-.55 0-.82-.18-.82-.71v-1.23c0-2.04-1.36-3.28-4.8-3.28-3.44 0-4.8 1.24-4.8 3.28v13.26c0 2.03 1.36 3.27 4.8 3.27 3.44 0 4.8-1.24 4.8-3.27v-1.77c0-.44.27-.71.82-.71h2.17c.46 0 .73.27.73.71zM125.81 34.28h9.78c.46 0 .82.18.82.71v1.68c0 .53-.36.71-.82.71h-12.96c-.45 0-.63-.27-.63-.71V12.8c0-.53.18-.8.73-.8h2.35c.45 0 .73.27.73.8zM164.58 12c.46 0 .64.18.64.71v1.68c0 .53-.09.7-.64.7h-5.98v21.58c0 .53-.27.71-.81.71h-2.36c-.45 0-.81-.27-.81-.71V15.09h-5.99c-.54 0-.63-.17-.63-.7v-1.68c0-.53.09-.71.63-.71z"
+    />
+    <path
+      fill="#fff"
+      d="M72.23 18.19c0-2.03-1.18-3.18-4.53-3.18-3.35 0-4.53 1.15-4.53 3.18v.71c0 1.68 1.09 2.21 1.9 2.47l6.98 2.57c2.27.88 4.17 2.29 4.17 5.04v3.09c0 3.09-2.27 5.75-8.61 5.75-6.43 0-8.61-2.66-8.61-5.75v-2.03c0-.53.27-.71.82-.71h2.26c.45 0 .64.18.64.71v1.68c0 2.03 1.45 3.18 4.89 3.18 3.44 0 4.89-1.15 4.89-3.18v-1.77c0-1.86-1.72-2.48-3.17-3.1l-6.43-2.38a4.98 4.98 0 0 1-3.36-4.6v-2.12c0-3.1 2-5.75 8.16-5.75 6.25 0 8.25 2.65 8.25 5.75v1.68c0 .44-.18.7-.64.7h-2.26c-.55 0-.82-.17-.82-.7zM97.04 32.16c0 3.09-1.91 5.75-8.52 5.75-6.62 0-8.52-2.66-8.52-5.75V17.75c0-3.1 1.9-5.75 8.52-5.75 6.61 0 8.52 2.65 8.52 5.75v1.85c0 .53-.18.71-.73.71h-2.17c-.55 0-.82-.18-.82-.71v-1.23c0-2.04-1.36-3.28-4.8-3.28-3.44 0-4.8 1.24-4.8 3.28v13.26c0 2.03 1.36 3.27 4.8 3.27 3.44 0 4.8-1.24 4.8-3.27v-1.77c0-.44.27-.71.82-.71h2.17c.46 0 .73.27.73.71zM125.81 34.28h9.78c.46 0 .82.18.82.71v1.68c0 .53-.36.71-.82.71h-12.96c-.45 0-.63-.27-.63-.71V12.8c0-.53.18-.8.73-.8h2.35c.45 0 .73.27.73.8zM143.72 36.67c0 .53-.19.71-.73.71h-2.36c-.45 0-.63-.27-.63-.71V12.8c0-.53.09-.8.63-.8h2.36c.54 0 .73.27.73.8zM164.58 12c.46 0 .64.18.64.71v1.68c0 .53-.09.7-.64.7h-5.98v21.58c0 .53-.27.71-.81.71h-2.36c-.45 0-.81-.27-.81-.71V15.09h-5.99c-.54 0-.63-.17-.63-.7v-1.68c0-.53.09-.71.63-.71zM175.53 23.76l5.71-11.05c.18-.36.36-.71.82-.71h2.35c.55 0 .82.27.55.71l-7.53 14.59v9.37c0 .44-.18.71-.72.71h-2.36c-.54 0-.63-.27-.63-.71V27.3l-7.61-14.59c-.28-.44 0-.71.54-.71h2.27c.54 0 .63.27.9.71zM110.76 12c.45 0 .73.27.91.71l7.43 23.96c.18.44 0 .71-.54.71h-2.45c-.45 0-.73-.27-.82-.71l-1.72-5.75h-7.97l-1.73 5.75c-.09.44-.36.71-.81.71h-2.45c-.54 0-.72-.27-.54-.71l7.43-23.96c.18-.44.45-.71.91-.71zm-1.18 5.48l-3.17 10.61h6.25z"
+    />
+    <path
+      fill="#3d9bd6"
+      d="M21.25 4.42v7.25h3.99V4.33l5.16 2.92 2-3.36L27.14.97A7.7 7.7 0 0 0 23.15 0c-1.36 0-2.72.35-3.89 1.06L14 3.98l1.99 3.36z"
+    />
+    <path
+      fill="#007664"
+      d="M21.25 4.42v7.25h3.99V4.33l5.16 2.92 2-3.36L27.14.97A7.7 7.7 0 0 0 23.15 0c-1.36 0-2.72.35-3.89 1.06L14 3.98l1.99 3.36z"
+    />
+    <path
+      fill="#ee4642"
+      d="M21.16 44.25V37h3.99v7.25l5.16-2.92 2 3.36-5.17 2.92a7.9 7.9 0 0 1-7.88 0L14 44.69l1.99-3.36z"
+    />
+    <path
+      fill="#2aad8e"
+      d="M40.43 13.28L34 16.9l1.99 3.36 6.44-3.62v5.83h3.99v-5.92c0-1.33-.37-2.65-1.09-3.8a8.82 8.82 0 0 0-2.9-2.83L37.17 7l-1.99 3.36z"
+    />
+    <path
+      fill="#d71d4f"
+      d="M4.99 32.84l6.43-3.63 2 3.36-6.44 3.63 5.17 2.91-2 3.36-5.25-2.92a7.6 7.6 0 0 1-2.81-2.82A7.1 7.1 0 0 1 1 32.92V27h3.99z"
+    />
+    <path
+      fill="#9e2569"
+      d="M4.08 16.64l6.43 3.62 2-3.36-6.44-3.62 5.17-2.92-2-3.36-5.25 2.92a8.72 8.72 0 0 0-2.9 2.83A7.16 7.16 0 0 0 0 16.64v5.92h3.99z"
+    />
+    <path
+      fill="#f79836"
+      d="M40.34 36.2L34 32.57l1.99-3.36 6.44 3.63V27h3.99v5.92c0 1.33-.37 2.57-1.09 3.81a8.69 8.69 0 0 1-2.9 2.82l-5.26 2.92-1.99-3.36z"
+    />
+    <path fill="#007664" d="M24 15v8.22l7.34-4.06z" />
+    <path fill="#9e2569" d="M23.25 15L16 19.16l7.25 4.06z" />
+    <path fill="#d71d4f" d="M22.25 25.07L15 21v8.13z" />
+    <path fill="#2aad8e" d="M24 24.98l7.25 4.07V21z" />
+    <path fill="#ee4642" d="M23.16 26L16 30.07l7.16 4.15z" />
+    <path fill="#f79836" d="M24 26v8.22l7.25-4.15z" />
+  </svg>
+);
+
+export { Logo };