@ssa-ui-kit/core 2.9.1 → 2.10.0

package/dist/components/Charts/BigNumberChart/BigNumberChart.d.ts

@@ -0,0 +1,18 @@
+import { Datum } from '@nivo/line';
+import { WidgetCardProps } from '../../index';
+import { TrendLineProps } from './components';
+export type BigNumberChartFeatures = 'header' | 'fullscreenMode';
+export interface BigNumberChartProps {
+    data: Datum[];
+    interactive?: boolean;
+    title?: string;
+    widgetCardProps?: WidgetCardProps;
+    trendLineProps?: Omit<TrendLineProps, 'data'>;
+    features?: BigNumberChartFeatures[];
+    valueFormat?: (value: Datum) => React.ReactNode;
+}
+export declare const BigNumberChartComponent: ({ data, title, widgetCardProps, trendLineProps, interactive, features, valueFormat, }: BigNumberChartProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const BigNumberChart: {
+    (props: BigNumberChartProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Charts/BigNumberChart/components/BigNumberChartHeader.d.ts

@@ -0,0 +1,8 @@
+import { MustInclude } from '@ssa-ui-kit/utils';
+export declare const FullScreenButton: import("@emotion/styled").StyledComponent<import("../../../Button/types").ButtonProps & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export interface BigNumberChartHeaderProps<T extends string[]> {
+    features: MustInclude<T, 'fullscreenMode'>;
+}
+export declare const BigNumberChartHeader: <F extends string[]>({ features, }: BigNumberChartHeaderProps<F>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Charts/BigNumberChart/components/TrendLine.d.ts

@@ -0,0 +1,7 @@
+import { LineProps } from '@nivo/line';
+import { TrendLineTooltipProps } from './TrendLineTooltip';
+export interface TrendLineProps extends LineProps {
+    color?: string;
+    tooltipValueFormat?: TrendLineTooltipProps['valueFormat'];
+}
+export declare const TrendLine: ({ color, tooltipValueFormat, ...props }: TrendLineProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Charts/BigNumberChart/components/TrendLineTooltip.d.ts

@@ -0,0 +1,5 @@
+import { Point, PointTooltipProps } from '@nivo/line';
+export type TrendLineTooltipProps = PointTooltipProps & {
+    valueFormat?: (data: Point['data']) => React.ReactNode;
+};
+export declare const TrendLineTooltip: ({ point, valueFormat, }: TrendLineTooltipProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Charts/BigNumberChart/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './BigNumberChartHeader';
+export * from './TrendLine';
+export * from './TrendLineTooltip';

package/dist/components/Charts/BigNumberChart/index.d.ts

@@ -0,0 +1 @@
+export * from './BigNumberChart';

package/dist/components/Charts/index.d.ts

@@ -6,3 +6,4 @@ export * from './common';
 export * from './hooks';
 export * from './GaugeChart';
 export * from './BarGaugeChart';
+export * from './BigNumberChart';

package/dist/index.js

@@ -73,6 +73,8 @@ __webpack_require__.d(__webpack_exports__, {
   BarGaugeChart: () => (/* reexport */ BarGaugeChart),
   BarGaugeChartComponent: () => (/* reexport */ BarGaugeChartComponent),
   BarLineComplexChart: () => (/* reexport */ BarLineComplexChart),
+  BigNumberChart: () => (/* reexport */ BigNumberChart),
+  BigNumberChartComponent: () => (/* reexport */ BigNumberChartComponent),
   Button: () => (/* reexport */ Button_Button),
   ButtonGroup: () => (/* reexport */ ButtonGroup),
   Card: () => (/* reexport */ Card_Card),
@@ -16390,6 +16392,255 @@ const BarGaugeChart = WithFullscreenMode(BarGaugeChartComponent);
 ;// ./src/components/Charts/BarGaugeChart/index.ts
 
 
+;// ./src/components/Charts/BigNumberChart/components/BigNumberChartHeader.tsx
+
+function BigNumberChartHeader_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+
+
+
+const BigNumberChartHeader_FullScreenButton = /*#__PURE__*/base_default()(Button_Button,  true ? {
+  target: "elke6i10"
+} : 0)("height:auto;padding:0;background:none;box-shadow:none;&:hover,&:focus{background:none;box-shadow:none;&::before{display:none;}}&:hover{svg path{fill:", ({
+  theme
+}) => theme.colors.greyDarker, ";}}" + ( true ? "" : 0));
+var BigNumberChartHeader_ref =  true ? {
+  name: "1pqzlpx",
+  styles: "width:auto;margin-left:auto"
+} : 0;
+var BigNumberChartHeader_ref2 =  true ? {
+  name: "e0dnmk",
+  styles: "cursor:pointer"
+} : 0;
+const BigNumberChartHeader = ({
+  features = []
+}) => {
+  const {
+    isFullscreenMode,
+    toggleFullscreenMode
+  } = useFullscreenMode();
+  const theme = (0,react_namespaceObject.useTheme)();
+  return (0,jsx_runtime_namespaceObject.jsx)(Wrapper_Wrapper, {
+    css: BigNumberChartHeader_ref,
+    children: features.includes('fullscreenMode') && (0,jsx_runtime_namespaceObject.jsx)(BigNumberChartHeader_FullScreenButton, {
+      variant: "tertiary",
+      onClick: toggleFullscreenMode,
+      children: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+        name: isFullscreenMode ? 'cross' : 'maximize',
+        css: BigNumberChartHeader_ref2,
+        tooltip: isFullscreenMode ? 'Close' : 'Maximize',
+        size: 18,
+        color: theme.colors.greyFilterIcon
+      })
+    })
+  });
+};
+;// external "@nivo/core"
+const core_namespaceObject = require("@nivo/core");
+;// external "@nivo/line"
+const line_namespaceObject = require("@nivo/line");
+;// ./src/components/Charts/BigNumberChart/components/TrendLineTooltip.tsx
+
+
+const TrendLineTooltipStyled = /*#__PURE__*/base_default()("div",  true ? {
+  target: "e19yhkwp0"
+} : 0)("background:", ({
+  theme
+}) => theme.colors.white, ";border:1px solid ", ({
+  theme
+}) => theme.colors.grey20, ";border-radius:8px;color:", ({
+  theme
+}) => theme.colors.greyDarker, ";font-weight:600;line-height:12px;font-size:10px;padding:0.5rem;" + ( true ? "" : 0));
+const TrendLineTooltip = ({
+  point,
+  valueFormat
+}) => {
+  const {
+    data
+  } = point;
+  const {
+    xFormatted,
+    yFormatted
+  } = point.data;
+  return (0,jsx_runtime_namespaceObject.jsx)(TrendLineTooltipStyled, {
+    children: valueFormat?.(data) ?? `${xFormatted} - ${yFormatted}`
+  });
+};
+;// ./src/components/Charts/BigNumberChart/components/TrendLine.tsx
+
+
+
+
+
+const ActivePoint = ({
+  currentPoint,
+  ...props
+}) => (0,jsx_runtime_namespaceObject.jsx)("g", {
+  children: currentPoint && (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.DotsItem, {
+    size: props.pointSize || 10,
+    borderWidth: props.pointBorderWidth || 10,
+    x: currentPoint.x,
+    y: currentPoint.y,
+    datum: currentPoint.data,
+    color: currentPoint.color,
+    borderColor: currentPoint.borderColor,
+    labelYOffset: props.pointLabelYOffset
+  }, currentPoint.id)
+});
+const TrendLine = ({
+  color,
+  tooltipValueFormat,
+  ...props
+}) => {
+  const theme = (0,react_namespaceObject.useTheme)();
+  const _color = color ?? theme.colors.purpleDark;
+  return (0,jsx_runtime_namespaceObject.jsx)(line_namespaceObject.ResponsiveLine, {
+    axisBottom: null,
+    axisLeft: null,
+    axisRight: null,
+    axisTop: null,
+    colors: _color,
+    curve: "linear",
+    enableArea: true,
+    enableGridX: false,
+    enableGridY: false,
+    enablePoints: false,
+    lineWidth: 2,
+    pointBorderWidth: 2,
+    pointColor: "black",
+    pointLabelYOffset: -12,
+    pointSize: 5,
+    useMesh: true,
+    enableTouchCrosshair: true,
+    defs: [{
+      colors: [{
+        color: _color,
+        offset: 0
+      }, {
+        color: theme.colors.white,
+        offset: 100
+      }],
+      id: 'gradientA',
+      type: 'linearGradient'
+    }],
+    fill: [{
+      id: 'gradientA',
+      match: '*'
+    }],
+    enableCrosshair: false,
+    animate: false,
+    yScale: {
+      type: 'linear',
+      stacked: true,
+      reverse: false
+    },
+    pointBorderColor: {
+      from: 'serieColor'
+    },
+    margin: {
+      top: 5,
+      right: 5,
+      bottom: 5,
+      left: 5
+    },
+    legends: [],
+    tooltip: args => (0,jsx_runtime_namespaceObject.jsx)(TrendLineTooltip, {
+      ...args,
+      valueFormat: tooltipValueFormat
+    }),
+    layers: ['grid', 'markers', 'axes', 'areas', 'crosshair', 'lines', 'points', 'slices', 'mesh', 'legends', ActivePoint],
+    ...props
+  });
+};
+;// ./src/components/Charts/BigNumberChart/BigNumberChart.tsx
+function BigNumberChart_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+
+
+
+
+
+var BigNumberChart_ref =  true ? {
+  name: "qdcqne",
+  styles: "height:100%;justify-content:space-between"
+} : 0;
+var BigNumberChart_ref2 =  true ? {
+  name: "gfqabp",
+  styles: "font-size:32px;font-weight:700"
+} : 0;
+var BigNumberChart_ref3 =  true ? {
+  name: "26qidl",
+  styles: "position:relative;width:100%;height:50%"
+} : 0;
+var BigNumberChart_ref4 =  true ? {
+  name: "19s8nj4",
+  styles: "position:absolute;width:100%;height:100%"
+} : 0;
+const BigNumberChartComponent = ({
+  data,
+  title,
+  widgetCardProps,
+  trendLineProps,
+  interactive = true,
+  features = [],
+  valueFormat
+}) => {
+  const [hoveredValue, setHoveredValue] = (0,external_react_namespaceObject.useState)(null);
+  const lastValue = data.sort((a, b) => {
+    const ax = a.x ?? 0;
+    const bx = b.x ?? 0;
+    return Number(ax) - Number(bx);
+  }).at(-1);
+  const setHoveredValueThrottled = (0,hooks_namespaceObject.useThrottledCallback)(value => {
+    setHoveredValue(value);
+  }, 100);
+  const handleMouseMove = data => {
+    if (!interactive) return;
+    setHoveredValueThrottled(data.data);
+  };
+  const handleMouseLeave = () => {
+    setHoveredValueThrottled(null);
+  };
+  const value = hoveredValue ?? lastValue;
+  return (0,jsx_runtime_namespaceObject.jsx)(WithWidgetCard, {
+    features: features,
+    cardProps: {
+      title,
+      headerContent: (0,jsx_runtime_namespaceObject.jsx)(BigNumberChartHeader, {
+        features: features
+      }),
+      ...widgetCardProps
+    },
+    children: (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
+      direction: "column",
+      alignItems: "start",
+      css: BigNumberChart_ref,
+      children: [(0,jsx_runtime_namespaceObject.jsx)("div", {
+        css: BigNumberChart_ref2,
+        children: (0,jsx_runtime_namespaceObject.jsx)("span", {
+          children: value && (valueFormat?.(value) ?? value?.y?.toString())
+        })
+      }), (0,jsx_runtime_namespaceObject.jsx)("div", {
+        css: BigNumberChart_ref3,
+        children: (0,jsx_runtime_namespaceObject.jsx)("div", {
+          css: BigNumberChart_ref4,
+          children: (0,jsx_runtime_namespaceObject.jsx)(TrendLine, {
+            ...trendLineProps,
+            data: [{
+              id: 'trend-line',
+              data
+            }],
+            onMouseMove: handleMouseMove,
+            onMouseLeave: handleMouseLeave
+          })
+        })
+      })]
+    })
+  });
+};
+const BigNumberChart = WithFullscreenMode(BigNumberChartComponent);
+;// ./src/components/Charts/BigNumberChart/index.ts
+
 ;// ./src/components/Charts/index.ts
 
 
@@ -16399,6 +16650,7 @@ const BarGaugeChart = WithFullscreenMode(BarGaugeChartComponent);
 
 
 
+
 ;// ./src/components/Popover/hooks/index.ts
 
 
@@ -17757,7 +18009,7 @@ const WithVisibleUpToLG = (Component, styles) => {
 ;// ./src/components/WithVisibleUpToLG/index.ts
 
 ;// external "@rjsf/core"
-const core_namespaceObject = require("@rjsf/core");
+const external_rjsf_core_namespaceObject = require("@rjsf/core");
 ;// external "@rjsf/utils"
 const external_rjsf_utils_namespaceObject = require("@rjsf/utils");
 ;// ./src/components/JsonSchemaForm/templates/SubmitButton.tsx
@@ -18776,7 +19028,7 @@ function generateTheme() {
 }
 const Theme = generateTheme();
 function generateForm() {
-  return (0,core_namespaceObject.withTheme)(generateTheme());
+  return (0,external_rjsf_core_namespaceObject.withTheme)(generateTheme());
 }
 const UnstyledForm = generateForm();
 const JsonSchemaForm_Form = /*#__PURE__*/base_default()(UnstyledForm,  true ? {