@ssa-ui-kit/core 2.12.0 → 2.13.0

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

@@ -0,0 +1,16 @@
+import { PlotParams } from 'react-plotly.js';
+import { WidgetCardProps } from '../../WidgetCard';
+import { CandlestickChartData, CandlestickStyle } from './utils';
+export type CandlestickChartFeatures = 'header' | 'fullscreenMode';
+export interface CandlestickChartProps extends Partial<Omit<PlotParams, 'data' | 'style'>> {
+    data: CandlestickChartData;
+    style?: CandlestickStyle;
+    title?: string;
+    features?: CandlestickChartFeatures[];
+    widgetCardProps?: WidgetCardProps;
+}
+export declare const CandlestickChartComponent: ({ title, data, features, widgetCardProps, style, ...plotParams }: CandlestickChartProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const CandlestickChart: {
+    (props: CandlestickChartProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

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

package/dist/components/Charts/CandlestickChart/utils.d.ts

@@ -0,0 +1,10 @@
+import { PlotParams } from 'react-plotly.js';
+export type CandlestickStyle = 'japanese' | 'hollow';
+export type CandlestickChartData = {
+    x: string[];
+    close: number[];
+    open: number[];
+    high: number[];
+    low: number[];
+};
+export declare const getCandlestickPlotData: (style: CandlestickStyle, data: CandlestickChartData, increasingColor: string, decreasingColor: string) => PlotParams["data"];

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

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

package/dist/components/Dropdown/Dropdown.d.ts

@@ -1,4 +1,4 @@
 import { DropdownOptionProps } from '../DropdownOptions/types';
 import { DropdownProps } from './types';
-declare const Dropdown: <T extends DropdownOptionProps>({ selectedItem, isDisabled, isOpen: isInitOpen, children, onChange: handleChange, className, }: DropdownProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const Dropdown: <T extends DropdownOptionProps>({ selectedItem, isDisabled, isOpen: isInitOpen, children, onChange: handleChange, className, placeholder, }: DropdownProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Dropdown;

package/dist/index.js

@@ -77,6 +77,8 @@ __webpack_require__.d(__webpack_exports__, {
   BigNumberChartComponent: () => (/* reexport */ BigNumberChartComponent),
   Button: () => (/* reexport */ Button_Button),
   ButtonGroup: () => (/* reexport */ ButtonGroup),
+  CandlestickChart: () => (/* reexport */ CandlestickChart),
+  CandlestickChartComponent: () => (/* reexport */ CandlestickChartComponent),
   Card: () => (/* reexport */ Card_Card),
   CardBase: () => (/* reexport */ Card_CardBase),
   CardContent: () => (/* reexport */ CardContent_CardContent),
@@ -4366,11 +4368,11 @@ const Dropdown = ({
   isOpen: isInitOpen,
   children,
   onChange: handleChange,
-  className
+  className,
+  placeholder = 'Select something'
 }) => {
   const theme = (0,react_namespaceObject.useTheme)();
   const dropdownRef = (0,external_react_namespaceObject.useRef)(null);
-  const placeholder = 'Select something';
   const dropdownId = (0,external_react_namespaceObject.useId)();
   const options = [];
   const [isFocused, setIsFocused] = (0,external_react_namespaceObject.useState)(false);
@@ -16843,6 +16845,242 @@ const BigNumberChartComponent = ({
 const BigNumberChart = WithFullscreenMode(BigNumberChartComponent);
 ;// ./src/components/Charts/BigNumberChart/index.ts
 
+;// external "react-dom/server"
+const server_namespaceObject = require("react-dom/server");
+;// ./src/components/Charts/CandlestickChart/utils.ts
+const getCandlestickPlotData = (style, data, increasingColor, decreasingColor) => {
+  if (style === 'japanese') {
+    return [{
+      type: 'candlestick',
+      x: data.x,
+      open: data.open,
+      high: data.high,
+      low: data.low,
+      close: data.close,
+      increasing: {
+        line: {
+          color: increasingColor
+        },
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        fillcolor: increasingColor
+      },
+      decreasing: {
+        line: {
+          color: decreasingColor
+        },
+        fillcolor: decreasingColor
+      }
+    }];
+  }
+  const makeEmpty = () => ({
+    x: [],
+    open: [],
+    close: [],
+    high: [],
+    low: []
+  });
+  const greenHollow = makeEmpty();
+  const greenSolid = makeEmpty();
+  const redHollow = makeEmpty();
+  const redSolid = makeEmpty();
+  for (let i = 0; i < data.x.length; i++) {
+    const open = data.open[i];
+    const close = data.close[i];
+    const prevClose = i > 0 ? data.close[i - 1] : open;
+    const isUp = close > open;
+    const isHollow = isUp;
+    const isGreen = close > prevClose;
+    const target = isGreen && isHollow ? greenHollow : isGreen && !isHollow ? greenSolid : !isGreen && isHollow ? redHollow : redSolid;
+    target.x.push(data.x[i]);
+    target.open.push(open);
+    target.close.push(close);
+    target.high.push(data.high[i]);
+    target.low.push(data.low[i]);
+  }
+  return [{
+    type: 'candlestick',
+    name: '',
+    ...greenHollow,
+    increasing: {
+      line: {
+        color: increasingColor
+      },
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      fillcolor: 'white'
+    },
+    decreasing: {
+      line: {
+        color: increasingColor
+      },
+      fillcolor: 'white'
+    }
+  }, {
+    type: 'candlestick',
+    name: '',
+    ...greenSolid,
+    increasing: {
+      line: {
+        color: increasingColor
+      },
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      fillcolor: increasingColor
+    },
+    decreasing: {
+      line: {
+        color: increasingColor
+      },
+      fillcolor: increasingColor
+    }
+  }, {
+    type: 'candlestick',
+    name: '',
+    ...redHollow,
+    increasing: {
+      line: {
+        color: decreasingColor
+      },
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      fillcolor: 'white'
+    },
+    decreasing: {
+      line: {
+        color: decreasingColor
+      },
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      fillcolor: 'white'
+    }
+  }, {
+    type: 'candlestick',
+    name: '',
+    ...redSolid,
+    increasing: {
+      line: {
+        color: decreasingColor
+      },
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      fillcolor: decreasingColor
+    },
+    decreasing: {
+      line: {
+        color: decreasingColor
+      },
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      fillcolor: decreasingColor
+    }
+  }];
+};
+;// ./src/components/Charts/CandlestickChart/CandlestickChart.tsx
+function CandlestickChart_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 CandlestickChart_ref =  true ? {
+  name: "w1atjl",
+  styles: "width:100%;height:100%"
+} : 0;
+const CandlestickChartComponent = ({
+  title,
+  data,
+  features,
+  widgetCardProps,
+  style = 'hollow',
+  ...plotParams
+}) => {
+  const plotlyDefaultLayoutConfig = usePlotlyDefaultConfig();
+  const {
+    isFullscreenMode,
+    toggleFullscreenMode
+  } = useFullscreenMode();
+  const theme = (0,react_namespaceObject.useTheme)();
+  const {
+    config,
+    layout,
+    ...restPlotParams
+  } = plotParams;
+  const plotData = getCandlestickPlotData(style, data, theme.colors.green, theme.colors.pink);
+  const extraModeBarButtons = [];
+  if (features?.includes('fullscreenMode')) {
+    extraModeBarButtons.push({
+      name: 'fullscreen',
+      icon: {
+        svg: (0,server_namespaceObject.renderToString)((0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+          name: "maximize"
+        }))
+      },
+      title: isFullscreenMode ? 'Exit fullscreen mode' : 'Fullscreen mode',
+      click: toggleFullscreenMode,
+      attr: 'fullscreen-mode-icon',
+      gravity: '1'
+    });
+  }
+  return (0,jsx_runtime_namespaceObject.jsx)(WithWidgetCard, {
+    features: features,
+    cardProps: {
+      ...widgetCardProps
+    },
+    children: (0,jsx_runtime_namespaceObject.jsx)((external_react_plotly_js_default()), {
+      layout: {
+        ...plotlyDefaultLayoutConfig.layout,
+        title: {
+          text: title,
+          x: 0,
+          y: 1,
+          pad: {
+            l: 10,
+            t: 5
+          },
+          font: {
+            size: 24,
+            weight: 700,
+            family: 'Manrope, sans-serif'
+          }
+        },
+        dragmode: 'zoom',
+        xaxis: {
+          rangeslider: {
+            visible: false
+          }
+        },
+        yaxis: {
+          side: 'right'
+        },
+        margin: {
+          t: 20,
+          b: 40,
+          l: 20,
+          r: 20
+        },
+        showlegend: false,
+        ...layout
+      },
+      css: CandlestickChart_ref,
+      useResizeHandler: true,
+      data: plotData,
+      config: {
+        ...plotlyDefaultLayoutConfig.config,
+        modeBarButtons: [extraModeBarButtons, ['zoom2d', 'pan2d', 'select2d', 'zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetScale2d']],
+        ...config
+      },
+      ...restPlotParams
+    })
+  });
+};
+const CandlestickChart = WithFullscreenMode(CandlestickChartComponent);
+;// ./src/components/Charts/CandlestickChart/index.ts
+
 ;// ./src/components/Charts/index.ts
 
 
@@ -16853,6 +17091,7 @@ const BigNumberChart = WithFullscreenMode(BigNumberChartComponent);
 
 
 
+
 ;// ./src/components/Popover/hooks/index.ts