@ssa-ui-kit/core 1.1.7 → 1.1.8

package/dist/types/json.d.ts

@@ -0,0 +1,5 @@
+export type JSONValue = string | number | boolean | JSONObject | JSONArray;
+export interface JSONObject {
+    [x: string]: JSONValue;
+}
+export type JSONArray = Array<JSONValue>;

package/jest-setup.ts

@@ -15,3 +15,6 @@ global.render = customRender;
 
 expect.addSnapshotSerializer(createSerializer());
 expect.extend(matchers);
+
+window.URL.createObjectURL = jest.fn();
+window.HTMLCanvasElement.prototype.getContext = jest.fn();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/core",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,
@@ -27,16 +27,19 @@
     "dotenv": "^16.0.3",
     "js-tokens": "^4.0.0",
     "loose-envify": "^1.4.0",
+    "plotly.js": "2.35.2",
+    "react-plotly.js": "2.6.0",
     "scheduler": "^0.23.0",
     "uuid": "^9.0.0",
-    "@ssa-ui-kit/hooks": "^1.0.0",
-    "@ssa-ui-kit/utils": "^1.0.0"
+    "@ssa-ui-kit/utils": "^1.0.0",
+    "@ssa-ui-kit/hooks": "^1.0.0"
   },
   "devDependencies": {
     "@emotion/jest": "^11.11.0",
     "@nivo/line": "0.84.0",
     "@playwright/test": "^1.48.0",
     "@testing-library/jest-dom": "^5.16.5",
+    "@types/react-plotly.js": "2.6.3",
     "@types/testing-library__jest-dom": "^5.14.6",
     "@types/uuid": "^9.0.3",
     "resolve-tspaths": "^0.8.16",

package/src/components/Charts/BarLineComplexChart/BarLIneComplexChart.context.tsx

@@ -0,0 +1,54 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+import {
+  BarLineComplexChartPContextProps,
+  BarLineComplexChartPContextProviderProps,
+  ChartItem,
+} from './types';
+
+const BarLineComplexChartContext =
+  createContext<BarLineComplexChartPContextProps>({
+    filteredData: [],
+    data: [],
+    lineShape: undefined,
+    maxVisibleBars: 5,
+    maxVisibleLines: 3,
+    setFilteredData: () => {
+      // no-op
+    },
+    setData: () => {
+      // no-op
+    },
+  });
+
+export const useBarLineComplexChartContext = () =>
+  useContext(BarLineComplexChartContext);
+
+export const BarLineComplexChartContextProvider = ({
+  children,
+  lineShape,
+  maxVisibleBars,
+  maxVisibleLines,
+  data: initialData = [],
+}: BarLineComplexChartPContextProviderProps) => {
+  const [data, setData] = useState<ChartItem[]>(initialData);
+  const [filteredData, setFilteredData] = useState<ChartItem[]>([]);
+
+  useEffect(() => {
+    const filtered = data.filter((item) => item.selected);
+    setFilteredData(filtered);
+  }, [data]);
+  return (
+    <BarLineComplexChartContext.Provider
+      value={{
+        data,
+        lineShape,
+        maxVisibleBars,
+        maxVisibleLines,
+        filteredData,
+        setData,
+        setFilteredData,
+      }}>
+      {children}
+    </BarLineComplexChartContext.Provider>
+  );
+};

package/src/components/Charts/BarLineComplexChart/BarLineComplexChart.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TranslationProvider } from '@contexts';
+import { BarLineComplexChart } from './BarLineComplexChart';
+import { mockData, mockDataWithDifferentLineType } from './__mock__/data';
+import { BarLineComplexChartProps } from './types';
+
+export default {
+  title: 'Charts/BarLineComplexChart',
+  component: BarLineComplexChart,
+  decorators: [
+    (Story) => (
+      <TranslationProvider>
+        <Story />
+      </TranslationProvider>
+    ),
+  ],
+} as Meta<BarLineComplexChartProps>;
+
+type Args = StoryObj<Partial<BarLineComplexChartProps>>;
+
+export const Default: Args = {
+  render: ({ ...args }) => (
+    <BarLineComplexChart
+      data={mockData}
+      width="670px"
+      height="220px"
+      cardProps={{
+        title: 'Bar & Line Complex Chart',
+      }}
+      {...args}
+    />
+  ),
+};
+
+export const WithSpline: Args = {
+  ...Default,
+  args: {
+    lineShape: 'spline',
+  },
+};
+
+export const Custom: Args = {
+  ...Default,
+  args: {
+    data: mockDataWithDifferentLineType,
+  },
+};

package/src/components/Charts/BarLineComplexChart/BarLineComplexChart.tsx

@@ -0,0 +1,26 @@
+import { BarLineComplexChartProps } from './types';
+import { useTooltip } from '@components/Tooltip/useTooltip';
+import { TooltipContext } from '@components/Tooltip/useTooltipContext';
+import { BarLineComplexChartInternal } from './BarLineComplexChartInternal';
+import { BarLineComplexChartContextProvider } from './BarLIneComplexChart.context';
+
+export const BarLineComplexChart = ({
+  data,
+  lineShape = 'linear',
+  maxVisibleBars = 5, // need to be implemented
+  maxVisibleLines = 3, // need to be implemented
+  ...rest
+}: BarLineComplexChartProps) => {
+  const tooltip = useTooltip({});
+  return (
+    <BarLineComplexChartContextProvider
+      data={data}
+      lineShape={lineShape}
+      maxVisibleBars={maxVisibleBars}
+      maxVisibleLines={maxVisibleLines}>
+      <TooltipContext.Provider value={tooltip}>
+        <BarLineComplexChartInternal {...rest} />
+      </TooltipContext.Provider>
+    </BarLineComplexChartContextProvider>
+  );
+};

package/src/components/Charts/BarLineComplexChart/BarLineComplexChartInternal.tsx

@@ -0,0 +1,118 @@
+import Plot from 'react-plotly.js';
+import { useTheme } from '@emotion/react';
+import { WithWidgetCard } from '@components/WidgetCard';
+import { BarLineComplexChartProps } from './types';
+import { PieChartHeader } from '../PieChart/PieChartHeader';
+import { usePlotlyDefaultConfig } from '../hooks';
+import { useChartInfo } from './useChartInfo';
+import { BarLineComplexChartTooltip } from './BarLineComplexChartTooltip';
+
+export const BarLineComplexChartInternal = ({
+  features = ['header'],
+  cardProps,
+  width = '670px',
+  height = '220px',
+  ...props
+}: Omit<
+  BarLineComplexChartProps,
+  'data' | 'lineShape' | 'maxVisibleBars' | 'maxVisibleLines'
+>) => {
+  const theme = useTheme();
+  const plotlyDefaultLayoutConfig = usePlotlyDefaultConfig();
+  const { transformedChartData, tooltipContentRef } = useChartInfo();
+  return (
+    <WithWidgetCard
+      features={features}
+      cardProps={{
+        headerContent: <PieChartHeader features={features} />,
+        width,
+        height,
+        ...cardProps,
+      }}>
+      <Plot
+        divId={'bar-line-complex-chart-graph'}
+        css={{ width, maxWidth: '100%', height: `calc(${height} - 50px)` }}
+        data={transformedChartData}
+        layout={{
+          margin: {
+            b: 0,
+            l: 0,
+            r: 30,
+            t: 20,
+            pad: 10,
+          },
+          barmode: 'group',
+          autosize: false,
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          barcornerradius: 15,
+          bargroupgap: 0.2,
+          yaxis: {
+            showgrid: true,
+            rangemode: 'nonnegative',
+            zeroline: false,
+          },
+          yaxis2: {
+            showgrid: true,
+            overlaying: 'y',
+            side: 'right',
+            tickfont: {
+              color: theme.colors.greyDarker60,
+            },
+            zeroline: false,
+          },
+          xaxis: {
+            showgrid: true,
+            type: 'date',
+            hoverformat: '%B',
+            tickformat: '%b',
+            zeroline: false,
+            dtick: 31 * 24 * 60 * 60 * 1000,
+          },
+          legend: {
+            orientation: 'h',
+            yanchor: 'top',
+            xanchor: 'center',
+            valign: 'bottom',
+            itemclick: 'toggle',
+            bgcolor: 'rgba(255, 255, 255, 0)',
+            y: -0.22,
+            x: 0.5,
+          },
+          ...plotlyDefaultLayoutConfig.layout,
+        }}
+        config={{
+          ...plotlyDefaultLayoutConfig.config,
+          modeBarButtons: [
+            //     [
+            //       {
+            //         name: 'filtering',
+            //         icon: {
+            //           svg: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+            // <path d="M2.73438 2.5C2.605 2.5 2.5 2.605 2.5 2.73438V4.60938C2.5 4.66281 2.51846 4.71461 2.55127 4.75586L8.125 11.723V15.9116C8.125 16.0067 8.182 16.0915 8.26965 16.1276L11.5509 17.4826C11.58 17.4943 11.6106 17.5 11.6406 17.5C11.6866 17.5 11.7313 17.4864 11.7706 17.4606C11.8358 17.417 11.875 17.3439 11.875 17.2656V11.723L17.4487 4.75586C17.4815 4.71461 17.5 4.66281 17.5 4.60938V2.73438C17.5 2.605 17.395 2.5 17.2656 2.5H2.73438ZM2.96875 2.96875H17.0312V4.52698L11.528 11.4062H8.47198L2.96875 4.52698V2.96875ZM8.59375 11.875H11.4062V16.9159L8.59375 15.755V11.875Z" fill="#2B2D31" fill-opacity="0.6"/>
+            // <path fill-rule="evenodd" clip-rule="evenodd" d="M2.73438 2.25C2.46693 2.25 2.25 2.46693 2.25 2.73438V4.60938C2.25 4.7201 2.28853 4.82714 2.35605 4.91203L7.875 11.8107V15.6701C7.875 15.6701 7.86214 16.0606 7.91666 16.1667C7.98574 16.3011 8.17447 16.3588 8.17447 16.3588L11.4555 17.7137L11.4574 17.7145C11.5169 17.7385 11.5794 17.75 11.6406 17.75C11.7368 17.75 11.8288 17.7214 11.9076 17.6698L11.9096 17.6684C12.0438 17.5786 12.125 17.4277 12.125 17.2656V11.8107L17.6444 4.91149C17.7119 4.8266 17.75 4.7201 17.75 4.60938V2.73438C17.75 2.46693 17.5331 2.25 17.2656 2.25H2.73438ZM16.7812 3.21875H3.21875V4.43928L8.59214 11.1562H11.4079L16.7812 4.43928V3.21875ZM8.84375 12.125V15.5877L11.1562 16.5422V12.125H8.84375Z" fill="#2B2D31" fill-opacity="0.6"/>
+            // </svg>`,
+            //         },
+            //         title: 'Filtering',
+            //         click: handleFilterClick,
+            //         attr: 'filtering-icon',
+            //         gravity: '1',
+            //       },
+            //     ],
+            [
+              'zoom2d',
+              'pan2d',
+              'select2d',
+              'zoomIn2d',
+              'zoomOut2d',
+              'autoScale2d',
+              'resetScale2d',
+            ],
+          ],
+        }}
+        {...props}
+      />
+      <BarLineComplexChartTooltip ref={tooltipContentRef} />
+    </WithWidgetCard>
+  );
+};

package/src/components/Charts/BarLineComplexChart/BarLineComplexChartTooltip.tsx

@@ -0,0 +1,43 @@
+import { forwardRef } from 'react';
+import TooltipContent from '@components/TooltipContent';
+import { TooltipContentProps } from '@components/Tooltip/types';
+import Wrapper from '@components/Wrapper';
+
+export const BarLineComplexChartTooltip = forwardRef<
+  HTMLDivElement,
+  Omit<TooltipContentProps, 'children'>
+>(function BarLineComplexChartTooltipContent(props, refProp) {
+  return (
+    <TooltipContent ref={refProp} {...props}>
+      <Wrapper
+        css={{
+          flexDirection: 'column',
+          alignItems: 'flex-start',
+          '& label': {
+            marginLeft: 0,
+          },
+          '& input+div': {
+            height: 28,
+            '&:before': {
+              top: 4,
+            },
+          },
+        }}>
+        {/* <Checkbox
+          key={`bar-line-filter--checkbox-${permission.name}`}
+          register={register}
+          name={...}
+          text={''}
+          onChange={...}
+          ref={undefined}
+          externalState={...}
+          css={{
+            marginBottom: 0,
+            '& input + div': { height: 44, '&:before': { top: 12 } },
+            '& input:focus + div': { boxShadow: 'none' },
+          }}
+        /> */}
+      </Wrapper>
+    </TooltipContent>
+  );
+});

package/src/components/Charts/BarLineComplexChart/__mock__/data.ts

@@ -0,0 +1,141 @@
+import { ChartItem } from '../types';
+
+const axisXTimestamps = [
+  1388572800000, 1391260800000, 1393670400000, 1396348800000, 1398940800000,
+  1401619200000, 1404211200000, 1406899200000, 1409577600000, 1412179200000,
+  1414857600000, 1417545600000,
+];
+
+export const mockData: ChartItem[] = [
+  {
+    x: axisXTimestamps,
+    y: [10, 12, 8, 15, 20, 18, 25, 22, 13, 16, 30, 24],
+    name: 'Department 1',
+    type: 'bar',
+    selected: false,
+  },
+  {
+    x: axisXTimestamps,
+    y: [7, 5, 12, 11, 5, 6, 19, 11, 9, 10, 17, 18],
+    name: 'Department 2',
+    type: 'bar',
+    selected: true,
+  },
+  {
+    x: axisXTimestamps,
+    y: [15, 18, 7, 20, 16, 12, 7, 18, 6, 14, 12, 15],
+    name: 'Department 3',
+    type: 'bar',
+    selected: true,
+  },
+  {
+    x: axisXTimestamps,
+    y: [14, 14, 19, 13, 9, 14, 23, 20, 24, 21, 8, 19],
+    name: 'Department 4',
+    type: 'bar',
+    selected: false,
+  },
+  {
+    x: axisXTimestamps,
+    y: [3, 8, 9, 6, 4, 11, 10, 8, 16, 7, 11, 9],
+    name: 'Department 5',
+    type: 'bar',
+    selected: true,
+  },
+  {
+    x: axisXTimestamps,
+    y: [3, 5, 7, 6, 4, 6, 7, 8, 6, 7, 8, 9],
+    name: 'Min',
+    type: 'scatter',
+    selected: true,
+  },
+  {
+    x: axisXTimestamps,
+    y: [9.8, 11.4, 11.0, 13.0, 10.8, 12.2, 16.8, 15.8, 13.6, 13.6, 15.6, 16.2],
+    name: 'Average',
+    type: 'scatter',
+    selected: true,
+  },
+  {
+    x: axisXTimestamps,
+    y: [15, 18, 19, 20, 20, 18, 25, 22, 24, 21, 30, 24],
+    name: 'Max',
+    type: 'scatter',
+    line: {
+      shape: 'linear',
+    },
+    selected: false,
+  },
+];
+
+export const mockDataWithDifferentLineType: ChartItem[] = [
+  {
+    x: axisXTimestamps,
+    y: [10, 12, 8, 15, 20, 18, 25, 22, 13, 16, 30, 24],
+    name: 'Department 1',
+    type: 'bar',
+    marker: {
+      line: {
+        width: 1,
+        color: '#ED995D',
+      },
+    },
+    selected: true,
+  },
+  {
+    x: axisXTimestamps,
+    y: [7, 5, 12, 11, 5, 6, 19, 11, 9, 10, 17, 18],
+    name: 'Department 2',
+    type: 'bar',
+    selected: true,
+  },
+  {
+    x: axisXTimestamps,
+    y: [15, 18, 7, 20, 16, 12, 7, 18, 6, 14, 12, 15],
+    name: 'Department 3',
+    type: 'bar',
+    selected: true,
+  },
+  {
+    x: axisXTimestamps,
+    y: [14, 14, 19, 13, 9, 14, 23, 20, 24, 21, 8, 19],
+    name: 'Department 4',
+    type: 'bar',
+    selected: true,
+  },
+  {
+    x: axisXTimestamps,
+    y: [3, 8, 9, 6, 4, 11, 10, 8, 16, 7, 11, 9],
+    name: 'Department 5',
+    type: 'bar',
+    selected: true,
+  },
+  {
+    x: axisXTimestamps,
+    y: [3, 5, 7, 6, 4, 6, 7, 8, 6, 7, 8, 9],
+    name: 'Min',
+    type: 'scatter',
+    line: {
+      shape: 'linear',
+    },
+    selected: true,
+  },
+  {
+    x: axisXTimestamps,
+    y: [9.8, 11.4, 11.0, 13.0, 10.8, 12.2, 16.8, 15.8, 13.6, 13.6, 15.6, 16.2],
+    name: 'Average',
+    type: 'scatter',
+    line: {
+      shape: 'spline',
+      dash: 'dot',
+    },
+    selected: true,
+  },
+  {
+    x: axisXTimestamps,
+    y: [15, 18, 19, 20, 20, 18, 25, 22, 24, 21, 30, 24],
+    name: 'Max',
+    type: 'scatter',
+    selected: true,
+  },
+];

package/src/components/Charts/BarLineComplexChart/colorPalette.ts

@@ -0,0 +1,23 @@
+export const colorPalette = [
+  '#4178E1',
+  '#44B3FC',
+  '#A078F5',
+  '#41BBBB',
+  '#5288E7',
+  '#6C94F7',
+  '#55D6D2',
+  '#ED995D',
+  '#EB7556',
+  '#F28885',
+  '#EDBA5D',
+  '#F2A65E',
+  '#D95F59',
+  '#F2D16B',
+  '#85C7F2',
+  '#85C7F2',
+  '#7B47EB',
+  '#4178E1',
+  '#6A98F0',
+  '#5A67D8',
+  '#3C4ECF',
+];

package/src/components/Charts/BarLineComplexChart/index.ts

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

package/src/components/Charts/BarLineComplexChart/types.ts

@@ -0,0 +1,36 @@
+import { PlotParams } from 'react-plotly.js';
+import { PieChartProps } from '../PieChart';
+
+export type ChartItem = Plotly.Data & {
+  selected?: boolean;
+};
+
+export interface BarLineComplexChartProps extends Omit<PlotParams, 'layout'> {
+  layout?: PlotParams['layout'];
+  cardProps?: PieChartProps['cardProps'];
+  features?: Array<'header'>;
+  data: ChartItem[];
+  lineShape?: Plotly.ScatterLine['shape'];
+  width?: string;
+  height?: string;
+  maxVisibleBars?: number;
+  maxVisibleLines?: number;
+}
+
+export interface BarLineComplexChartPContextProps {
+  data: ChartItem[];
+  filteredData: ChartItem[];
+  lineShape?: Plotly.ScatterLine['shape'];
+  maxVisibleBars?: number;
+  maxVisibleLines?: number;
+  setFilteredData: React.Dispatch<React.SetStateAction<ChartItem[]>>;
+  setData: React.Dispatch<React.SetStateAction<ChartItem[]>>;
+}
+
+export interface BarLineComplexChartPContextProviderProps
+  extends Pick<
+    BarLineComplexChartProps,
+    'data' | 'lineShape' | 'maxVisibleBars' | 'maxVisibleLines'
+  > {
+  children: React.ReactNode;
+}

package/src/components/Charts/BarLineComplexChart/useChartInfo.ts

@@ -0,0 +1,68 @@
+import { MutableRefObject, useEffect, useRef } from 'react';
+import { pathOr } from '@ssa-ui-kit/utils';
+import { useTooltipContext } from '@components/Tooltip/useTooltipContext';
+import { colorPalette } from './colorPalette';
+import { useBarLineComplexChartContext } from './BarLIneComplexChart.context';
+
+interface UseChartInfo {
+  (): {
+    transformedChartData: Plotly.Data[];
+    tooltipContentRef: MutableRefObject<HTMLDivElement | null>;
+    handleFilterClick: (gd: Plotly.PlotlyHTMLElement, ev: MouseEvent) => void;
+  };
+}
+
+export const useChartInfo: UseChartInfo = () => {
+  const { setIsOpen, isOpen, context } = useTooltipContext();
+  const { data, lineShape } = useBarLineComplexChartContext();
+  const tooltipContentRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    return () => {
+      context.refs.setReference(null);
+      context.refs.setFloating(null);
+    };
+  }, []);
+
+  const transformedChartData = data.map((item, index) => {
+    const markerColor = pathOr<typeof item, string[]>(colorPalette[index], [
+      'marker',
+      'color',
+    ])(item);
+    const extraParams: Plotly.Data = {
+      mode: 'markers',
+      marker: {
+        color: markerColor,
+        symbol: '',
+      },
+      yaxis: 'y2',
+      connectgaps: true,
+    };
+    if (!('hovertemplate' in item)) {
+      extraParams.hovertemplate = `${item.name}: %{y:}` + '<extra></extra>';
+    }
+    if (item.type === 'scatter') {
+      extraParams.mode = 'lines';
+      extraParams.line = {
+        shape: lineShape,
+      };
+    }
+    return {
+      ...extraParams,
+      ...item,
+    };
+  }) as unknown as Plotly.Data[];
+
+  const handleFilterClick: Plotly.ButtonClickEvent = (
+    gd: Plotly.PlotlyHTMLElement,
+  ) => {
+    setIsOpen(!isOpen);
+    if (!isOpen) {
+      const filteringIcon = gd.querySelector('[data-attr=filtering-icon]');
+      context.refs.setReference(filteringIcon as HTMLElement);
+      context.refs.setFloating(tooltipContentRef.current as HTMLElement);
+    }
+  };
+
+  return { transformedChartData, tooltipContentRef, handleFilterClick };
+};

package/src/components/{PieChart → Charts/PieChart}/types.ts

@@ -1,6 +1,6 @@
 import { SerializedStyles } from '@emotion/react';
 import { ResponsivePie, MayHaveLabel } from '@nivo/pie';
-import { CommonProps, WidgetCardProps } from '../..';
+import { CommonProps, WidgetCardProps } from '../../..';
 
 export type PieChartFeatures =
   | 'header'

package/src/components/{SegmentedPieChart → Charts/SegmentedPieChart}/stories/SegmentedPieChart.stories.tsx

@@ -8,7 +8,7 @@ import {
 import { SegmentedPieChart } from '../SegmentedPieChart';
 
 export default {
-  title: 'Widgets/SegmentedPieChart',
+  title: 'Charts/SegmentedPieChart',
   component: SegmentedPieChart,
 } as Meta<typeof SegmentedPieChart>;
 

package/src/components/Charts/hooks/index.ts

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

package/src/components/Charts/hooks/usePlotlyDefaultConfig.ts

@@ -0,0 +1,39 @@
+import { PlotParams } from 'react-plotly.js';
+import { useTheme } from '@emotion/react';
+
+interface UsePlotlyDefaultConfig {
+  (): {
+    layout: PlotParams['layout'];
+    config: PlotParams['config'];
+    emptyBar: PlotParams['data'][0];
+  };
+}
+
+export const usePlotlyDefaultConfig: UsePlotlyDefaultConfig = () => {
+  const theme = useTheme();
+
+  return {
+    layout: {
+      font: {
+        family: "'Manrope',sans-serif",
+        size: 10,
+      },
+      autosize: true,
+      hovermode: 'x unified',
+    } as PlotParams['layout'],
+    config: {
+      responsive: true,
+      autosizable: true,
+      displaylogo: false,
+    } as PlotParams['config'],
+    emptyBar: {
+      type: 'bar',
+      yaxis: 'y2',
+      marker: {
+        color: theme.colors.greyLighter,
+      },
+      hovertemplate: '<b>No data yet!</b><extra></extra>',
+      showlegend: false,
+    } as PlotParams['data'][0],
+  };
+};

package/src/components/Charts/index.ts

@@ -0,0 +1,3 @@
+export * from './PieChart';
+export * from './SegmentedPieChart';
+export * from './BarLineComplexChart';